/* RT Kampagnenorder – Frontend CSS v1.0
   RT-Farben: Primär #C0272D / #DD3333, Dunkel #232323
   OnAir2-kompatibel: !important wo nötig, border-radius:0, mobile 640px
*/

:root {
  --rtko-red:    #C0272D;
  --rtko-red2:   #DD3333;
  --rtko-dark:   #232323;
  --rtko-gray:   #666;
  --rtko-lgray:  #F4F4F4;
  --rtko-border: #DDDDDD;
  --rtko-white:  #FFFFFF;
  --rtko-green:  #198754;
  --rtko-amber:  #E8A020;
}

/* ── Wrap ─────────────────────────────────────────────────────────────────── */
.rtko-wrap { max-width: 860px; margin: 0 auto; font-family: inherit; color: var(--rtko-dark); }
.rtko-wrap * { box-sizing: border-box; }

/* ── Headings ─────────────────────────────────────────────────────────────── */
.rtko-heading    { font-size: 26px!important; font-weight: 700!important; color: var(--rtko-dark)!important; margin-bottom: 8px!important; }
.rtko-subheading { font-size: 15px; color: var(--rtko-gray); margin-bottom: 28px; line-height: 1.6; }

/* ── Visibility helpers (used instead of inline style to survive OnAir2) ───── */
.rtko-hidden { display: none !important; }

/* ── Entry tiles ──────────────────────────────────────────────────────────── */
.rtko-tiles { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 32px; }
.rtko-tile {
  flex: 1; min-width: 200px;
  border: 2px solid var(--rtko-border);
  padding: 24px 20px;
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s;
  background: var(--rtko-white);
}
.rtko-tile:hover { border-color: var(--rtko-red); box-shadow: 0 4px 16px rgba(192,39,45,.12); }
.rtko-tile--highlight { border-color: var(--rtko-red); background: #fff8f8; }
.rtko-tile-icon { font-size: 28px; display: block; margin-bottom: 10px; }
.rtko-tile h3   { font-size: 16px!important; font-weight: 700!important; margin: 0 0 6px!important; color: var(--rtko-dark)!important; }
.rtko-tile p    { font-size: 13px; color: var(--rtko-gray); margin: 0; }

/* ── Progress bar ─────────────────────────────────────────────────────────── */
.rtko-progress {
  display: flex; gap: 0; margin-bottom: 28px;
  border-bottom: 2px solid var(--rtko-border);
}
.rtko-progress-step {
  flex: 1; text-align: center; padding: 10px 4px;
  font-size: 12px; font-weight: 600; color: var(--rtko-gray);
  cursor: default; position: relative;
}
.rtko-progress-step span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border: 2px solid var(--rtko-border);
  border-radius: 50%; font-size: 11px;
  margin-right: 6px; background: var(--rtko-white);
}
.rtko-progress-step.active       { color: var(--rtko-red); border-bottom: 3px solid var(--rtko-red); margin-bottom: -2px; }
.rtko-progress-step.active span  { border-color: var(--rtko-red); background: var(--rtko-red); color: var(--rtko-white); }
.rtko-progress-step.completed    { color: var(--rtko-green); }
.rtko-progress-step.completed span { border-color: var(--rtko-green); background: var(--rtko-green); color: var(--rtko-white); }

/* ── Steps ────────────────────────────────────────────────────────────────── */
.rtko-step         { display: none !important; }
.rtko-step.active  { display: block !important; }
.rtko-step-title   { font-size: 18px!important; font-weight: 700!important; color: var(--rtko-red)!important; margin: 0 0 20px!important; }

/* ── Fields ───────────────────────────────────────────────────────────────── */
.rtko-field       { margin-bottom: 18px; }
.rtko-field-row   { display: flex; gap: 16px; flex-wrap: wrap; }
.rtko-field-row .rtko-field { flex: 1; min-width: 220px; }
.rtko-label       { display: block; font-size: 13px; font-weight: 700; color: var(--rtko-dark); margin-bottom: 6px; }

.rtko-input, .rtko-select, .rtko-textarea {
  width: 100%; padding: 9px 12px;
  border: 1px solid var(--rtko-border)!important;
  border-radius: 0!important;
  font-size: 14px; color: var(--rtko-dark);
  background: var(--rtko-white);
  outline: none;
  transition: border-color .15s;
  font-family: inherit;
}
.rtko-input:focus, .rtko-select:focus, .rtko-textarea:focus {
  border-color: var(--rtko-red)!important;
  box-shadow: 0 0 0 2px rgba(192,39,45,.1);
}
.rtko-textarea { resize: vertical; min-height: 80px; }

/* ── Radio / Checkbox groups ──────────────────────────────────────────────── */
.rtko-radio-group, .rtko-checkbox-group { display: flex; flex-wrap: wrap; gap: 8px; }
.rtko-radio-option, .rtko-check-option {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; cursor: pointer; padding: 5px 10px;
  border: 1px solid var(--rtko-border); background: var(--rtko-white);
  transition: border-color .15s, background .15s;
}
.rtko-radio-option:hover, .rtko-check-option:hover { border-color: var(--rtko-red); }
.rtko-radio-option input, .rtko-check-option input { margin: 0; }

/* ── Package cards ────────────────────────────────────────────────────────── */
.rtko-package-cards { display: flex; flex-wrap: wrap; gap: 14px; }
.rtko-pkg-card {
  flex: 1; min-width: 160px; max-width: 220px;
  border: 2px solid var(--rtko-border);
  padding: 16px 14px; cursor: pointer;
  position: relative; background: var(--rtko-white);
  transition: border-color .2s, box-shadow .2s;
}
.rtko-pkg-card:hover { border-color: var(--rtko-red); }
.rtko-pkg-card.selected { border-color: var(--rtko-red); background: #fff5f5; box-shadow: 0 0 0 3px rgba(192,39,45,.25); }
.rtko-pkg-card.selected::after { content: "✓ Gewählt"; position: absolute; top: 8px; right: 8px; color: var(--rtko-red); font-weight: 700; font-size: 10px; background: #fff5f5; padding: 1px 4px; }
.rtko-pkg-card--highlight { border-color: var(--rtko-border); }
.rtko-pkg-card--highlight:not(.pkg-user-selected):not(.selected) { border-color: var(--rtko-border); }
.rtko-pkg-card--highlight.pkg-user-selected,
.rtko-pkg-card--highlight.selected { border-color: var(--rtko-red); }
.rtko-pkg-badge {
  display: inline-block; background: var(--rtko-red); color: #fff;
  font-size: 9px; font-weight: 700; padding: 2px 8px; white-space: nowrap;
  margin-bottom: 6px; letter-spacing: .04em; text-transform: uppercase;
}
.rtko-pkg-card h4    { font-size: 13px!important; font-weight: 700!important; margin: 0 0 6px!important; color: var(--rtko-dark)!important; }
.rtko-pkg-card .rtko-pkg-desc { font-size: 11px; color: var(--rtko-gray); margin-bottom: 8px; }
.rtko-pkg-card .rtko-pkg-meta { font-size: 11px; color: var(--rtko-gray); }
.rtko-pkg-card .rtko-pkg-price { font-size: 16px; font-weight: 700; color: var(--rtko-red); margin-top: 8px; }

/* ── File upload ──────────────────────────────────────────────────────────── */
.rtko-file-input   { font-size: 13px; }
.rtko-upload-status { font-size: 12px; margin-top: 4px; }
.rtko-upload-ok     { color: var(--rtko-green); }
.rtko-upload-error  { color: var(--rtko-red); }
.rtko-upload-loading { color: var(--rtko-gray); }

/* ── Info box / recommendation ────────────────────────────────────────────── */
.rtko-info-box {
  background: #fff8ee; border-left: 3px solid var(--rtko-amber);
  padding: 10px 14px; margin-bottom: 14px; font-size: 13px; font-weight: 600; color: var(--rtko-dark);
}

/* ── Price preview ────────────────────────────────────────────────────────── */
.rtko-price-preview { font-size: 14px; color: var(--rtko-gray); margin-top: 4px; }
.rtko-price-preview strong { color: var(--rtko-red); }

/* ── Summary (step 5) ─────────────────────────────────────────────────────── */
.rtko-sum-row {
  display: flex; justify-content: space-between;
  padding: 7px 10px; border-bottom: 1px solid var(--rtko-border);
  font-size: 13px;
}
.rtko-sum-row span:first-child { font-weight: 600; color: var(--rtko-gray); flex: 0 0 38%; }

.rtko-price-total   { background: var(--rtko-lgray); border: 1px solid var(--rtko-border); padding: 14px 16px; margin: 16px 0; }
.rtko-price-row     { display: flex; justify-content: space-between; padding: 5px 0; font-size: 13px; }
.rtko-price-grand   { display: flex; justify-content: space-between; padding: 10px 0 4px; font-size: 16px; border-top: 2px solid var(--rtko-dark); margin-top: 8px; }
.rtko-price-grand strong { color: var(--rtko-red); font-size: 20px; }

/* ── Fine print ───────────────────────────────────────────────────────────── */
.rtko-fine-print { font-size: 12px; color: var(--rtko-gray); margin: 12px 0; }

/* ── Navigation buttons ───────────────────────────────────────────────────── */
.rtko-nav { display: flex; gap: 10px; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--rtko-border); }
.rtko-btn {
  display: inline-block; padding: 10px 24px;
  font-size: 14px; font-weight: 700; cursor: pointer;
  border: 2px solid transparent; border-radius: 0!important;
  text-decoration: none; transition: background .15s, color .15s;
  font-family: inherit; line-height: 1.4;
}
.rtko-btn--next, .rtko-btn--submit {
  background: var(--rtko-red)!important; color: #fff!important;
  border-color: var(--rtko-red)!important; margin-left: auto;
}
.rtko-btn--next:hover, .rtko-btn--submit:hover {
  background: var(--rtko-red2)!important; border-color: var(--rtko-red2)!important;
}
.rtko-btn--back {
  background: transparent!important; color: var(--rtko-gray)!important;
  border-color: var(--rtko-border)!important;
}
.rtko-btn--back:hover { border-color: var(--rtko-gray)!important; }
.rtko-btn--secondary { background: var(--rtko-dark)!important; color: #fff!important; border-color: var(--rtko-dark)!important; }
.rtko-btn--approve   { background: var(--rtko-green)!important; color: #fff!important; border-color: var(--rtko-green)!important; font-size: 16px; padding: 12px 28px; }
.rtko-btn:disabled   { opacity: .6; cursor: not-allowed; }

/* ── Errors ───────────────────────────────────────────────────────────────── */
.rtko-errors { background: #fff3f3; border-left: 3px solid var(--rtko-red); padding: 12px 16px; margin-bottom: 16px; }
.rtko-errors p { margin: 4px 0; font-size: 13px; color: var(--rtko-red); }

/* ── Success ──────────────────────────────────────────────────────────────── */
.rtko-success { text-align: center; padding: 40px 20px; }
.rtko-success-icon { font-size: 56px; color: var(--rtko-green); margin-bottom: 12px; }
.rtko-success h3   { font-size: 22px!important; font-weight: 700!important; color: var(--rtko-dark)!important; margin-bottom: 8px!important; }
.rtko-success p    { color: var(--rtko-gray); font-size: 15px; }

/* ── Status page ──────────────────────────────────────────────────────────── */
.rtko-status-page .rtko-heading { margin-bottom: 20px; }
.rtko-status-header { display: flex; justify-content: space-between; align-items: flex-start; padding: 16px; background: var(--rtko-lgray); margin-bottom: 20px; flex-wrap: wrap; gap: 10px; }
.rtko-status-meta   { font-size: 12px; color: var(--rtko-gray); }
.rtko-badge         { display: inline-block; color: #fff; padding: 3px 10px; font-size: 11px; font-weight: 700; }
.rtko-badge-lg      { font-size: 13px; padding: 5px 14px; }
.rtko-section-title { font-size: 15px!important; font-weight: 700!important; color: var(--rtko-dark)!important; border-bottom: 2px solid var(--rtko-red); padding-bottom: 4px; margin: 20px 0 12px!important; }

.rtko-approval-box  { background: #f0fff4; border: 2px solid var(--rtko-green); padding: 20px; margin-bottom: 20px; }
.rtko-approval-box h3 { color: var(--rtko-green)!important; margin-bottom: 10px!important; }

.rtko-timeline-public { display: flex; flex-direction: column; gap: 8px; }
.rtko-timeline-public-item { display: flex; align-items: center; gap: 10px; }
.rtko-timeline-date { font-size: 12px; color: var(--rtko-gray); }

.rtko-summary-table { border: 1px solid var(--rtko-border); }
.rtko-summary-row   { display: flex; justify-content: space-between; padding: 8px 12px; border-bottom: 1px solid var(--rtko-border); font-size: 13px; }
.rtko-summary-row span:first-child { color: var(--rtko-gray); font-weight: 600; }
.rtko-summary-total { background: var(--rtko-dark); color: #fff!important; font-weight: 700; }
.rtko-summary-total span { color: #fff!important; }

/* ── Admin CSS ────────────────────────────────────────────────────────────── */
.rtko-badge { display: inline-block; color: #fff; padding: 3px 10px; font-size: 11px; font-weight: 700; border-radius: 2px; }
.rtko-detail-grid { display: grid; grid-template-columns: 1fr 340px; gap: 20px; margin-top: 16px; }
.rtko-col-main, .rtko-col-side { display: flex; flex-direction: column; gap: 16px; }
.rtko-box { background: #fff; border: 1px solid #ddd; padding: 16px; }
.rtko-box h3 { margin: 0 0 10px; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: #555; border-bottom: 1px solid #eee; padding-bottom: 6px; }
.rtko-detail-table td { font-size: 13px; }
.rtko-timeline { display: flex; flex-direction: column; gap: 6px; }
.rtko-timeline-item { padding: 6px 0; border-bottom: 1px solid #f0f0f0; }

/* ── Mobile ───────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .rtko-tiles { flex-direction: column; }
  .rtko-tile  { min-width: unset; }
  .rtko-progress-step { font-size: 10px; padding: 8px 2px; }
  .rtko-field-row     { flex-direction: column; }
  .rtko-pkg-card      { min-width: 140px; max-width: unset; }
  .rtko-detail-grid   { grid-template-columns: 1fr; }
  .rtko-nav           { flex-direction: column; }
  .rtko-btn--next, .rtko-btn--submit { margin-left: 0; }
}

/* ── Stats bar & TKP info ──────────────────────────────────────────────────── */
.rtko-stats-bar { display: flex; gap: 0; margin: 16px 0; border: 1px solid var(--rtko-border); }
.rtko-stat { flex: 1; text-align: center; padding: 12px 8px; border-right: 1px solid var(--rtko-border); }
.rtko-stat:last-child { border-right: none; }
.rtko-stat-num { display: block; font-size: 20px; font-weight: 700; color: var(--rtko-red); }
.rtko-stat-label { display: block; font-size: 11px; color: var(--rtko-gray); margin-top: 2px; }
.rtko-tkp-info { background: #fff8f0; border-left: 3px solid var(--rtko-red); padding: 12px 16px; margin-bottom: 20px; font-size: 13px; line-height: 1.6; color: var(--rtko-dark); }

/* ── Package plays info ────────────────────────────────────────────────────── */
.rtko-pkg-plays { font-size: 11px; color: var(--rtko-gray); margin: 4px 0 6px; }

/* ── Prod cards multi-select info ──────────────────────────────────────────── */
.rtko-prod-cards .rtko-pkg-card.selected::after { content: "✓ Gewählt"; }
.rtko-prod-multi-hint { font-size: 12px; color: var(--rtko-gray); margin-bottom: 8px; }

@media (max-width: 640px) {
  .rtko-stats-bar { flex-wrap: wrap; }
  .rtko-stat { min-width: 50%; border-bottom: 1px solid var(--rtko-border); }
}

/* ── Chat thread ───────────────────────────────────────────────────────────── */
.rtko-chat { max-height: 400px; overflow-y: auto; border: 1px solid var(--rtko-border); padding: 12px; background: var(--rtko-lgray); display: flex; flex-direction: column; gap: 10px; }
.rtko-chat-msg { display: flex; }
.rtko-chat-admin   { justify-content: flex-start; }
.rtko-chat-customer { justify-content: flex-end; }
.rtko-chat-bubble { max-width: 75%; }
.rtko-chat-admin   .rtko-chat-bubble { background: #fff; border: 1px solid var(--rtko-border); border-left: 3px solid var(--rtko-red); padding: 10px 14px; }
.rtko-chat-customer .rtko-chat-bubble { background: var(--rtko-dark); color: #fff; padding: 10px 14px; }
.rtko-chat-meta { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 4px; font-size: 11px; font-weight: 700; }
.rtko-chat-customer .rtko-chat-meta { color: #ccc; }
.rtko-chat-admin    .rtko-chat-meta { color: var(--rtko-gray); }
.rtko-chat-text { font-size: 13px; line-height: 1.5; }
.rtko-chat-customer .rtko-chat-text { color: #fff; }
.rtko-chat-form textarea { margin-top: 8px; }