/* Dashboard im Auftragscopilot-Design nach Brand Guide 1.0. Werte aus brand.css.
   Inter Tight für Überschriften und Kennzahlen, Inter für alles andere, Radien 4 px, Tomate nur für die Hauptaktion. */

* { box-sizing: border-box; }
body { margin: 0; font-size: 14px; line-height: 20px; }
.hidden { display: none !important; }

/* Aufbau: Seitenleiste 240 px, Inhalt füllt den Rest ohne Höchstbreite */
.layout { display: flex; min-height: 100vh; }
main { flex: 1; min-width: 0; padding: 32px 32px 64px; }

/* Seitenleiste */
.sidebar {
  width: 240px; flex-shrink: 0; position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; gap: 24px; padding: 24px 12px;
  background: var(--surface); border-right: 1px solid var(--line);
}
.brand { padding: 0 12px; }
.project-switch { display: flex; flex-direction: column; gap: 4px; padding: 0 12px; }
.project-switch label { color: var(--muted); font-size: 14px; line-height: 20px; }
.project-switch select { width: 100%; }
.nav { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.nav a {
  display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; border-radius: var(--radius);
  color: var(--frame-sidebar-ink); font-weight: 500; text-decoration: none; transition: background-color var(--dauer), color var(--dauer);
}
.nav a:hover { background: var(--frame-top); color: var(--ink); }
.nav a.active { background: var(--nav-active); color: var(--ink); }
/* Der Assistent hebt sich auch ohne Auswahl ab, weil dort der Fokus liegt. */
.nav a[data-view="assistant"] { background: var(--frame-selected); color: var(--ink); font-weight: 700; }
.nav a[data-view="assistant"]:hover,
.nav a[data-view="assistant"].active { background: var(--nav-active); color: var(--ink); }
.nav-heading { margin-top: 20px; padding: 0 12px 4px; color: var(--muted); font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; }
.sidebar svg {
  width: 18px; height: 18px; flex-shrink: 0;
  fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}
.sidebar-foot { padding: 16px 12px 0; border-top: 1px solid var(--line); min-width: 0; }
.user-email { font-size: 14px; line-height: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link-btn {
  display: inline-block; padding: 0; margin-top: 4px; background: none; border: none; border-radius: var(--radius);
  color: var(--muted); font: inherit; font-size: 14px; line-height: 20px; text-decoration: none; cursor: pointer;
  transition: color var(--dauer);
}
.link-btn:hover { color: var(--ink); }

/* Kopf: Titel links, Zeitraum und Aktion rechts */
.page-head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 16px 24px; margin-bottom: 24px; }
.page-head > div { min-width: 0; }
h1 { margin: 0 0 8px; font-family: var(--font-head); font-size: 40px; line-height: 44px; font-weight: 700; letter-spacing: -.035em; text-wrap: balance; }
h2 { margin: 0; font-family: var(--font-head); font-size: 20px; line-height: 26px; font-weight: 700; letter-spacing: -.02em; }
.muted { margin: 0; color: var(--muted); font-size: 14px; line-height: 20px; }
.small { margin: 4px 0 12px; }

.controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.controls label { display: flex; flex-direction: column; gap: 4px; color: var(--muted); font-size: 14px; line-height: 20px; }

/* Datumsauswahl */
.date-field { display: flex; flex-direction: column; gap: 4px; color: var(--muted); font-size: 14px; line-height: 20px; }
.date-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 144px; height: 40px; padding: 0 12px;
  border: 1px solid var(--field-line); border-radius: var(--radius); background: var(--surface); color: var(--ink);
  font: inherit; font-size: 14px; line-height: 20px; cursor: pointer; transition: background-color var(--dauer);
}
.date-btn:hover { background: var(--frame-top); }
.date-btn svg, .datepicker svg {
  width: 18px; height: 18px; flex-shrink: 0;
  fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}
.datepicker {
  position: absolute; z-index: 20; width: 296px; padding: 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
}
.datepicker[hidden] { display: none; }
.datepicker button { font: inherit; color: var(--ink); background: none; border: none; border-radius: var(--radius); cursor: pointer; transition: background-color var(--dauer); }
.datepicker-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.datepicker-head strong { font-size: 16px; line-height: 24px; font-weight: 600; }
.datepicker-head div { display: flex; gap: 4px; }
.datepicker-head button { display: grid; place-items: center; width: 32px; height: 32px; }
.datepicker-head button:hover { background: var(--frame-top); }
.datepicker-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); row-gap: 2px; }
.datepicker-weekdays { margin-bottom: 4px; color: var(--muted); font-size: 14px; line-height: 20px; text-align: center; }
.datepicker-grid button { height: 36px; font-size: 14px; }
.datepicker-grid button:hover { background: var(--frame-top); }
.datepicker-grid button.is-other { color: var(--muted); }
.datepicker-grid button.is-range { background: var(--tomate-hell); }
.datepicker-grid button.is-today { box-shadow: inset 0 0 0 1px var(--frame-line); }
.datepicker-grid button.is-selected { background: var(--ink); color: var(--surface); font-weight: 600; }
.datepicker-grid button:disabled { background: none; color: var(--frame-line); cursor: not-allowed; }
.datepicker-foot { display: flex; justify-content: flex-end; margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--line); }
.datepicker-foot button { height: 32px; padding: 0 8px; font-size: 14px; font-weight: 600; }
.datepicker-foot button:hover { background: var(--frame-top); }
.datepicker-foot button:disabled { color: var(--frame-line); cursor: not-allowed; }

/* Felder und Buttons: Höhe 40 */
select, input {
  height: 40px; padding: 0 12px; border: 1px solid var(--field-line); border-radius: var(--radius);
  background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; line-height: 20px;
}
select:disabled, input:disabled { background: var(--frame-top); color: var(--muted); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 16px;
  border: 1.5px solid var(--ink); border-radius: var(--radius); background: transparent; color: var(--ink);
  font: inherit; font-size: 14px; line-height: 20px; font-weight: 700; text-decoration: none; cursor: pointer;
  transition: transform .5s var(--curve), background-color var(--dauer), border-color var(--dauer);
}
.btn:hover { background: var(--papier-tief); }
.btn.primary { background: var(--tomate); border-color: var(--tomate); color: var(--on-accent); font-family: var(--font-head); }
.btn.primary:hover { background: var(--tomate-hover); border-color: var(--tomate-hover); transform: translateY(-2px); }
.btn:active { transform: scale(.98); }
.btn:disabled { background: transparent; border-color: var(--linie); color: var(--muted); cursor: not-allowed; transform: none; }

/* Karten und Hinweise */
.card { margin-bottom: 24px; padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.card > h2 { margin-bottom: 16px; }
.card-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.notice { margin-bottom: 24px; padding: 16px 20px; background: var(--frame-top); border: 1px solid var(--line); border-radius: var(--radius); }
.notice-action { margin-top: 12px; }

/* Kennzahlen: Die Zahl steht in Tinte, Inter Tight */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 24px; }
.kpi { padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.kpi .label { color: var(--muted); font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; }
.kpi .value { margin: 8px 0; font-family: var(--font-head); font-size: 32px; line-height: 36px; font-weight: 700; letter-spacing: -.02em; overflow-wrap: anywhere; }
.kpi .hint { color: var(--muted); font-size: 14px; line-height: 20px; }
.kpi.is-loading i { display: block; border-radius: var(--radius); background: var(--frame-selected); }
.kpi.is-loading i:nth-child(1) { width: 50%; height: 16px; }
.kpi.is-loading i:nth-child(2) { width: 70%; height: 32px; margin: 8px 0; }
.kpi.is-loading { min-height: 112px; }
.kpi.is-loading i:nth-child(3) { width: 35%; height: 22px; }

/* Etiketten: Pfeil für die Richtung, Farbe für die Bewertung */
.delta {
  display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: var(--radius-sm);
  font-size: 12px; line-height: 16px; font-weight: 600;
}
.delta svg { width: 10px; height: 10px; fill: currentColor; }
.delta.good { color: var(--besser-text); background: var(--besser-flaeche); }
.delta.bad { color: var(--schlechter-text); background: var(--schlechter-flaeche); }
.delta.neutral { color: var(--muted); background: var(--frame-selected); }
.delta.warning { color: var(--warnung-text); background: var(--warnung-flaeche); }
.tag {
  display: inline-block; margin-left: 12px; padding: 4px 8px; background: var(--sample-bg); border-radius: var(--radius-sm);
  color: var(--sample-ink); font-size: 12px; line-height: 16px; font-weight: 600;
}
.tag.is-solo { margin-left: 0; }
.tag.status-enabled { color: var(--besser-text); background: var(--besser-flaeche); }
.sub, .cond { color: var(--muted); font-size: 14px; line-height: 20px; }

/* Verlauf */
.chart-box { position: relative; height: 280px; }
.chart-controls { display: flex; gap: 8px; flex-wrap: wrap; }

.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-bottom: 24px; }
.grid-2 > .card { margin-bottom: 0; }

/* Geräte: Aufteilung */
.legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-bottom: 16px; color: var(--muted); font-size: 14px; line-height: 20px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.swatch { display: inline-block; width: 10px; height: 10px; border-radius: var(--radius-xs); }
.device-row { margin-bottom: 16px; }
.device-row:last-child { margin-bottom: 0; }
.device-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 4px 16px; margin-bottom: 4px; }
.device-head select { height: 24px; padding: 0 4px 0 0; border-color: transparent; font-size: 14px; line-height: 20px; cursor: pointer; }
.shares { color: var(--muted); font-size: 14px; line-height: 20px; }
.stack { display: flex; gap: 2px; height: 20px; border-radius: var(--radius); overflow: hidden; }
.stack:empty { background: var(--frame-selected); }

/* Tag und Uhrzeit: Muster */
.segmented { display: flex; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
.segmented button {
  flex: 1; height: 40px; margin-bottom: -1px; padding: 0 8px; background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--muted); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; transition: color var(--dauer);
}
.segmented button:hover { color: var(--ink); }
.segmented button.active { color: var(--ink); border-bottom-color: var(--ink); }
.heatmap { display: grid; grid-template-columns: 24px repeat(24, minmax(0, 1fr)); gap: 3px; color: var(--muted); font-size: 14px; line-height: 20px; }
.heatmap .cell { height: 20px; border-radius: var(--radius-xs); }
.heatmap .label { display: flex; align-items: center; }
.heatmap .axis { grid-column: span 6; padding-top: 4px; white-space: nowrap; }
.hbars { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 8px 12px; align-items: center; }
.hbars .bar { height: 16px; min-width: 1px; background: var(--data-1); border-radius: 0 var(--radius) var(--radius) 0; }
.hbars .val { color: var(--muted); text-align: right; }
.vbars { display: flex; align-items: flex-end; gap: 3px; height: 150px; border-bottom: 1px solid var(--frame-line); }
.vbars .bar { flex: 1; min-height: 1px; background: var(--data-1); border-radius: var(--radius) var(--radius) 0 0; }
.vaxis { display: flex; padding-top: 4px; color: var(--muted); font-size: 14px; line-height: 20px; }
.vaxis span { flex: 1; }

/* Hinweis beim Überfahren */
.tip {
  position: fixed; z-index: 10; padding: 6px 10px; border-radius: var(--radius); pointer-events: none;
  background: var(--ink); color: var(--surface); font-size: 14px; line-height: 20px; font-weight: 500; white-space: nowrap;
}
.tip[hidden] { display: none; }

/* Tabellen */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 10px 12px; border-bottom: 1px solid var(--frame-selected); text-align: left; white-space: nowrap; }
th { border-bottom-color: var(--line); color: var(--muted); font-size: 14px; line-height: 20px; font-weight: 400; }
th:first-child, td:first-child { padding-left: 0; }
th:last-child, td:last-child { padding-right: 0; }
td.num, th.num { text-align: right; }
th.num { white-space: normal; }
th.sortable { cursor: pointer; user-select: none; transition: color var(--dauer); }
th.sortable:hover, th.sorted { color: var(--ink); }
th.sorted { font-weight: 500; }
th.sorted::after { content: ' ↓'; }
th.sorted.asc::after { content: ' ↑'; }
tfoot td { border-top: 1px solid var(--frame-line); border-bottom: none; font-weight: 600; }
tr.group td { background: var(--next-bg); font-weight: 600; }
tr.group td:first-child { padding-left: 12px; }
tr.group td:last-child { padding-right: 12px; }
td.indent, td.indent:first-child { padding-left: 24px; }
tr.secondary td { color: var(--muted); }
td:last-child.num { padding-right: 12px; }
th:last-child.num { padding-right: 12px; }

/* Suchbegriffe und Tag Manager */
#term-filter, #gtm-filter { width: 240px; max-width: 100%; }
#term-campaign { width: 240px; max-width: 100%; }
#terms td:first-child { min-width: 160px; white-space: normal; }
#terms td:nth-child(2), #terms td:nth-child(3) { min-width: 120px; white-space: normal; }
#terms th, #terms td { padding-left: 8px; padding-right: 8px; }
.term-status { display: inline-flex; align-items: center; gap: 6px; }
.term-status svg {
  width: 16px; height: 16px; flex-shrink: 0;
  fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}
.term-status.is-none { color: var(--muted); }
body[data-view="gtm"] #page-head,
body[data-view="gtm"] #report,
body[data-view="gtm"] #loading,
body[data-view="account"] #page-head,
body[data-view="account"] #report,
body[data-view="account"] #loading,
body[data-view="assistant"] #page-head,
body[data-view="assistant"] #report,
body[data-view="assistant"] #loading { display: none !important; }

/* Assistent */
#view-assistant .page-head { max-width: 860px; }
#view-assistant .page-head > div { flex: 1 1 320px; }
.chat-new { gap: 8px; }
.chat-new svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.chat { display: flex; flex-direction: column; gap: 16px; max-width: 860px; }
.chat-log { display: flex; flex-direction: column; gap: 16px; }
.chat-suggestions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.chip {
  height: 36px; padding: 0 14px; border: 1px solid var(--field-line); border-radius: var(--radius); background: var(--surface);
  color: var(--ink); font: inherit; font-size: 14px; cursor: pointer; transition: background-color var(--dauer);
}
.chip:hover { background: var(--frame-top); }
.chat-question {
  align-self: flex-end; max-width: 80%; padding: 10px 14px; border-radius: var(--radius-lg);
  background: var(--frame-selected); white-space: pre-wrap; overflow-wrap: anywhere;
}
.chat-answer { display: flex; flex-direction: column; gap: 8px; }
.chat-answer > p { margin: 0; }
/* Kopfzeile mit Titel und Kennzahl, darunter der Text über die volle Breite */
.chat-step { padding: 16px 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--frame-top); }
.chat-step-head { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; margin-bottom: 8px; }
.chat-step-head .figure { flex-shrink: 0; max-width: 45%; font-weight: 600; text-align: right; }
.chat-step p { margin: 0; color: var(--muted); }
.chat-error { color: var(--muted); }
.chat-form { display: flex; gap: 12px; align-items: stretch; }
.chat-form textarea {
  flex: 1; min-width: 0; height: 40px; padding: 9px 12px; resize: none;
  border: 1px solid var(--frame-line); border-radius: var(--radius); background: var(--surface); color: var(--ink);
  font: inherit; font-size: 14px; line-height: 20px;
}
.chat-send { width: 40px; padding: 0; flex-shrink: 0; }
.chat-send svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 640px) {
  .chat-step-head { flex-direction: column; gap: 4px; }
  .chat-step-head .figure { max-width: none; text-align: left; }
  .chat-question { max-width: 100%; }
}

/* Tag Manager: Liste */
.kpis.is-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gtm-group + .gtm-group { margin-top: 24px; }
.gtm-group h3 { margin: 0; padding-bottom: 8px; border-bottom: 1px solid var(--line); font-family: var(--font-head); font-size: 20px; line-height: 26px; font-weight: 700; letter-spacing: -.02em; }
.gtm-count { margin-left: 4px; color: var(--muted); font-weight: 400; }
.gtm-tag {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.5fr) minmax(0, 1.5fr); gap: 8px 24px;
  padding: 16px 0; border-bottom: 1px solid var(--frame-selected);
}
.gtm-tag-name { font-weight: 500; overflow-wrap: anywhere; }
.gtm-tag.is-paused .gtm-tag-name { color: var(--muted); }
.gtm-tag .sub { overflow-wrap: anywhere; }
.gtm-label { margin-bottom: 4px; color: var(--muted); font-size: 14px; line-height: 20px; }
.gtm-label.is-spaced { margin-top: 8px; }
.gtm-action-name { font-weight: 500; overflow-wrap: anywhere; }
.chips { display: flex; flex-wrap: wrap; gap: 4px; }
.chip {
  padding: 4px 8px; background: var(--sample-bg); border-radius: var(--radius-sm);
  color: var(--ink); font-size: 12px; line-height: 16px; overflow-wrap: anywhere;
}

/* Optimierungen */
.opt-changes { margin-bottom: 24px; }
.opt-changes h2 { margin-bottom: 4px; }
.opt-changes .small { margin: 0 0 16px; }
.opt-changes .kpis { margin-bottom: 0; }
.opt-changes .hint { margin-top: 8px; }
.opt-no-changes { padding: 16px 20px; background: var(--frame-top); border: 1px solid var(--line); border-radius: var(--radius); }
body:not([data-view="optimize"]) #opt-loading { display: none !important; }
body[data-view="optimize"] #loading { display: none !important; }
.opt-loading { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 56px 16px; color: var(--muted); }
.spinner {
  width: 32px; height: 32px; border: 3px solid var(--stufe-1); border-top-color: var(--data-1); border-radius: 50%;
  animation: spinner .8s linear infinite;
}
@keyframes spinner { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2.4s; } }
.opt-badge {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 24px; padding: 8px 12px;
  background: var(--tomate-hell); color: var(--ink); border-radius: var(--radius); font-size: 14px; line-height: 20px;
}
.opt-badge svg {
  width: 18px; height: 18px; flex-shrink: 0;
  fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}
.opt-badge strong { font-weight: 600; }
.todo { margin-bottom: 40px; }
.todo > h2 { margin-bottom: 8px; font-size: 30px; line-height: 36px; letter-spacing: -.03em; }
.todo-group { margin-top: 16px; padding: 16px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-md); }
.todo-group h3 { margin: 0 0 12px; font-size: 16px; line-height: 24px; font-weight: 600; }
.todo-row {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 16px; width: 100%; margin-top: 4px; padding: 12px;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink); font: inherit; text-align: left; cursor: pointer;
  border-radius: var(--radius); transition: background-color var(--dauer);
}
.todo-row:hover { background: var(--frame-top); }
.todo-row:first-of-type { margin-top: 0; }
.todo-title { min-width: 0; font-weight: 500; }
.todo-title .sub { display: block; font-weight: 400; }
.todo-counts { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.todo-arrow { color: var(--muted); }
.audit-title { margin: 0 0 24px; font-family: var(--font-head); font-size: 30px; line-height: 36px; font-weight: 700; letter-spacing: -.03em; }
.prio { margin-bottom: 40px; }
.prio-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 24px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.prio-head .prio-title { margin: 0; padding: 0; border: none; }
.opt-section { scroll-margin-top: 16px; }
.prio-tag { display: inline-block; margin-right: 8px; padding: 2px 8px; border-radius: var(--radius-sm); font-size: 12px; line-height: 16px; font-weight: 600; vertical-align: 1px; }
.prio-tag.prio-1 { background: var(--ink); color: var(--surface); }
.prio-tag.prio-2 { background: var(--chart-bar); color: var(--frame-selected-ink); }
.prio-tag.prio-3 { background: var(--sample-bg); color: var(--sample-ink); }
.prio-title { margin-bottom: 24px; padding-bottom: 8px; border-bottom: 1px solid var(--line); font-family: var(--font-head); font-size: 20px; line-height: 26px; font-weight: 700; letter-spacing: -.02em; }
.opt-section > h3 { margin: 0 0 4px; font-size: 16px; line-height: 24px; font-weight: 600; }
.check-row {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 8px 24px; align-items: start;
  padding: 12px 0; border-bottom: 1px solid var(--frame-selected);
}
.check-row:last-child { border-bottom: none; }
.check-text { margin-top: 4px; }
/* Anteil als Balken: Grün, Radius am Datenende */
.share-cell { display: flex; align-items: center; gap: 12px; min-width: 280px; }
.share-track { flex: 1; height: 12px; background: var(--frame-selected); border-radius: var(--radius); overflow: hidden; }
.share-bar { height: 100%; background: var(--data-1); border-radius: 0 var(--radius) var(--radius) 0; }
.share-value { min-width: 64px; text-align: right; }
.check-note { margin: 8px 0; color: var(--muted); font-size: 14px; line-height: 20px; }
.check-ok { margin-top: 8px; }
.check-ok summary { padding: 4px 0; cursor: pointer; }
.delta svg.line { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.opt-section > .small { margin: 0 0 8px; }
.opt-empty { padding-top: 8px; }
.opt-item {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) minmax(0, 3fr); gap: 8px 24px; align-items: start;
  padding: 16px 0; border-bottom: 1px solid var(--frame-selected);
}
.opt-item:last-child { border-bottom: none; padding-bottom: 0; }
.opt-why { overflow-wrap: anywhere; }
.opt-why .delta { margin-top: 2px; }
.opt-metrics { display: grid; grid-auto-flow: column; grid-auto-columns: 96px; justify-content: end; gap: 8px; margin: 0; }
.opt-metrics div { text-align: right; }
.opt-metrics dt { color: var(--muted); font-size: 14px; line-height: 20px; }
.opt-metrics dd { margin: 0; }

/* Account */
.account-link {
  display: flex; align-items: center; gap: 12px; min-height: 44px; margin: 0 -12px 8px; padding: 0 12px; border-radius: var(--radius);
  color: var(--frame-sidebar-ink); font-weight: 500; text-decoration: none; transition: background-color var(--dauer);
}
.account-link:hover { background: var(--frame-top); }
.account-link.active { background: var(--chart-bar); color: var(--frame-selected-ink); }
.project-row {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px 24px;
  padding: 16px 0; border-bottom: 1px solid var(--frame-selected);
}
.project-row:last-child { border-bottom: none; padding-bottom: 0; }
.project-info { min-width: 0; flex: 1 1 280px; }
.project-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.project-confirm { color: var(--muted); font-size: 14px; line-height: 20px; }
.project-form {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
  padding: 16px; margin-bottom: 8px; background: var(--frame-top); border: 1px solid var(--line); border-radius: var(--radius);
}
.project-form label { display: flex; flex-direction: column; gap: 4px; color: var(--muted); font-size: 14px; line-height: 20px; min-width: 0; }
.project-form input, .project-form select { width: 100%; }
.project-form .project-error, .project-form .project-actions { grid-column: 1 / -1; }
.project-form .project-actions { justify-content: flex-end; }

/* Anzeigen */
#ad-campaign, #ad-group { width: 320px; max-width: 100%; }
tr.ag-row { cursor: pointer; }
tr.ag-row td { transition: background-color var(--dauer); }
tr.ag-row:hover td { background: var(--frame-top); }
tr.ag-row.open td { font-weight: 600; border-bottom-color: transparent; }
.chev { display: inline-block; width: 16px; color: var(--muted); transition: transform var(--dauer); }
tr.ag-row.open .chev { transform: rotate(90deg); }
tr.ag-detail > td, tr.ag-detail > td:first-child { padding: 16px 20px 20px; background: var(--frame-top); white-space: normal; }
.ad-block + .ad-block { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); }
.ad-block h3 { margin: 16px 0 8px; font-size: 14px; line-height: 20px; font-weight: 500; }
table.inner { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); border-collapse: separate; border-spacing: 0; }
table.inner th:first-child, table.inner td:first-child { padding-left: 12px; }
table.inner th:last-child, table.inner td:last-child { padding-right: 12px; }
table.inner tr:last-child td { border-bottom: none; }
td.wrap { min-width: 220px; white-space: normal; }
th.idx, td.idx { width: 36px; color: var(--muted); font-size: 13px; }
.url-box { padding: 10px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow-wrap: anywhere; }
.url-box a { color: var(--ink); }

.loading { padding: 40px; color: var(--muted); text-align: center; }

/* Fensterbreiten */
@media (max-width: 1199px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1099px) {
  .grid-2, .gtm-tag, .project-form, .opt-item, .check-row { grid-template-columns: minmax(0, 1fr); }
  .opt-metrics { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); justify-content: stretch; }
  .opt-metrics div { text-align: left; }
}
@media (max-width: 760px) {
  .layout { flex-direction: column; }
  .sidebar {
    position: static; width: auto; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center;
    gap: 12px 16px; padding: 16px; border-right: none; border-bottom: 1px solid var(--line);
  }
  .brand { padding: 0; flex: 1; }
  .sidebar-foot { display: flex; align-items: center; gap: 16px; padding: 0; border-top: none; }
  .account-link { min-height: 0; margin: 0; padding: 0; font-size: 13px; font-weight: 400; color: var(--muted); }
  .account-link:hover, .account-link.active { background: none; color: var(--ink); }
  .account-link svg { display: none; }
  .kpis.is-three { grid-template-columns: minmax(0, 1fr); }
  .project-actions .btn { flex: 1 1 auto; }
  .user-email { display: none; }
  .link-btn { margin-top: 0; }
  .project-switch { order: 1; flex-basis: 100%; padding: 0; }
  .nav { order: 2; flex: 1 1 100%; flex-direction: row; overflow-x: auto; scrollbar-width: none; }
  .nav a { flex-shrink: 0; }
  .nav-heading { display: none; }
  main { padding: 24px 16px 48px; }
  h1 { font-size: 30px; line-height: 36px; letter-spacing: -.03em; }
  .kpis { grid-template-columns: minmax(0, 1fr); }
  .controls { width: 100%; }
  .controls label, .controls .date-field { flex: 1 1 100%; }
  .controls select, .controls .date-btn, .controls .btn { width: 100%; }
  .card { padding: 16px; }
  .chart-controls, .chart-controls select, #term-filter, #term-campaign, #gtm-filter { width: 100%; max-width: none; }
  #ad-campaign, #ad-group { width: 100%; max-width: none; }
  .heatmap .axis { font-size: 12px; }
}

@media print {
  .sidebar, .no-print, .notice { display: none !important; }
  .card, .kpi { break-inside: avoid; }
  main { padding: 0; }
}
.check-pills { display: flex; flex-wrap: wrap; gap: 4px; }