/* Internes Dashboard. Ruhige, monochrome Gestaltung: dunkle Seitenleiste,
   warmes Off-White, Serifen für Titel und Kennzahlen, Hairline-Charts. */
:root {
    --page: #f4f4f1;
    --card: #ffffff;
    --side: #151515;
    --side-ink: #d9d9d4;
    --side-muted: #8a8a84;
    --ink: #121212;
    --ink2: #4b4b47;
    --muted: #7d7d78;
    --line: #e7e7e2;
    --line-strong: #d4d4ce;
    --bar: #3b4048;
    --bar-soft: #b9bcc1;
    --cmp: #cfcfca;
    --up: #1f7a3a;
    --down: #b42318;
    --good: #2f8f4e; --warn: #d9a21b; --crit: #c0392b;
    --r: 14px;
    --serif: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, "Times New Roman", serif;
    --sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--page); color: var(--ink); font: 14px/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
a { color: var(--ink); }
code { font-size: 12px; background: var(--page); padding: 1px 5px; border-radius: 5px; border: 1px solid var(--line); }
.serif { font-family: var(--serif); font-weight: 400; letter-spacing: -0.01em; }
h1 { margin: 0; font-size: 34px; line-height: 1.15; }
h3 { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
h4 { margin: 20px 0 8px; font-size: 13px; color: var(--ink2); }
p { margin: 0; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.right { margin-left: auto; }
.hint { color: var(--ink2); font-size: 12px; margin-top: 10px; }
.error { color: var(--down); font-size: 13px; margin-top: 8px; }

/* Formulare und Knöpfe */
label { display: grid; gap: 5px; font-size: 12px; color: var(--ink2); }
input, select, textarea { font: inherit; color: var(--ink); background: var(--card); border: 1px solid var(--line-strong); border-radius: 10px; padding: 9px 12px; min-height: 38px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--ink); outline-offset: 1px; border-color: transparent; }
.inline-input { width: 64px; min-height: 28px; padding: 2px 8px; }
.select { display: inline-block; }
.select select { appearance: none; -webkit-appearance: none; padding-right: 30px; font-weight: 500; background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%23121212' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right 11px center; }
.btn { font: inherit; font-weight: 500; min-height: 38px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--card); color: var(--ink); cursor: pointer; }
.btn:hover { border-color: var(--ink2); }
.btn.dark { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn.small { min-height: 32px; padding: 0 12px; font-size: 13px; }
.btn[disabled] { opacity: .5; cursor: default; }
.icon-btn { width: 30px; height: 30px; border: 0; border-radius: 8px; background: transparent; color: var(--side-muted); cursor: pointer; display: grid; place-items: center; }
.icon-btn:hover { color: #fff; background: rgba(255,255,255,.08); }
.icon-btn svg { width: 18px; height: 18px; }
.link-btn { font: inherit; font-size: 12px; color: var(--side-muted); background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
.link-btn:hover { color: #fff; }

/* Login */
.login { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login-card { width: min(380px, 100%); background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 32px; display: grid; gap: 14px; }
.login-card .brand { font-size: 30px; }

/* Layout */
.app { display: grid; grid-template-columns: 250px 1fr; min-height: 100vh; }
.app:has(.sidebar[hidden]) { grid-template-columns: 1fr; }
.sidebar { position: sticky; top: 0; height: 100vh; background: var(--side); color: var(--side-ink); display: flex; flex-direction: column; padding: 22px 16px; }
.sidebar-top { display: flex; align-items: center; justify-content: space-between; padding: 0 8px 22px; }
.sidebar .brand { font-size: 24px; color: #fff; }
.side-nav { display: grid; gap: 2px; }
.side-nav button { display: flex; align-items: center; gap: 12px; width: 100%; font: inherit; font-size: 15px; color: var(--side-ink); background: transparent; border: 0; border-radius: 9px; padding: 9px 12px; cursor: pointer; text-align: left; }
.side-nav button svg { width: 18px; height: 18px; color: var(--side-muted); }
.side-nav button:hover { background: rgba(255,255,255,.06); color: #fff; }
.side-nav button[aria-selected="true"] { background: rgba(255,255,255,.12); color: #fff; }
.side-nav button[aria-selected="true"] svg { color: #fff; }
.side-label { font-size: 12px; color: var(--side-muted); padding: 18px 12px 6px; }
.sidebar-bottom { margin-top: auto; display: grid; gap: 10px; padding: 0 8px; }
.user { display: flex; align-items: center; gap: 10px; min-width: 0; }
.avatar { width: 26px; height: 26px; border-radius: 7px; background: #2b2b2b; color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 600; flex: none; }
.user-mail { font-size: 13px; color: var(--side-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.badge { justify-self: start; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 99px; background: #f0c14b; color: #1a1a1a; }

.main { padding: 36px 40px 60px; display: grid; gap: 20px; align-content: start; min-width: 0; }
.view { min-width: 0; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 4px; }
.filters { display: flex; align-items: center; gap: 10px; }
.seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 10px; overflow: hidden; background: var(--card); }
.seg button { font: inherit; font-size: 13px; font-weight: 500; color: var(--ink2); background: transparent; border: 0; padding: 8px 14px; cursor: pointer; }
.seg button + button { border-left: 1px solid var(--line); }
.seg button[aria-pressed="true"] { background: var(--ink); color: #fff; }

.notice { display: flex; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 18px; font-size: 14px; }
.notice .mark { width: 24px; height: 24px; border-radius: 6px; background: var(--ink); color: #fff; display: grid; place-items: center; font-family: var(--serif); font-size: 14px; flex: none; }
.notice a { margin-left: auto; font-size: 13px; color: var(--ink2); }

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 26px 26px 24px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.card-head p { font-size: 13px; margin-top: 4px; max-width: 62ch; }
.card-head > div:first-child { min-width: 0; }
.card-foot { display: flex; align-items: center; gap: 18px; border-top: 1px solid var(--line); padding-top: 12px; margin-top: auto; font-size: 12px; color: var(--ink2); }
.legend { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.sw { display: inline-block; width: 14px; height: 10px; border-radius: 2px; }
.sw.bar { background: repeating-linear-gradient(90deg, var(--bar) 0 2px, transparent 2px 4px); }
.sw.line { height: 0; border-top: 2px solid var(--cmp); border-radius: 0; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.row.end { justify-content: flex-end; margin-top: 12px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: stretch; }
@media (max-width: 1000px) { .grid-2 { grid-template-columns: 1fr; } }

/* Hero-Zahlen */
.hero-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.hero-value { font-size: 44px; line-height: 1; }
.hero-label { margin-top: 6px; font-size: 14px; color: var(--ink2); }
.hero-sub { text-align: right; font-size: 13px; color: var(--ink2); display: grid; gap: 4px; }
.delta { font-weight: 600; }
.delta.up { color: var(--up); } .delta.down { color: var(--down); }

/* Charts */
.chart { position: relative; width: 100%; height: 220px; }
.chart svg { width: 100%; height: 100%; display: block; overflow: visible; }
.chart .grid-line { stroke: var(--line); stroke-width: 1; }
.chart .axis-line { stroke: var(--line-strong); stroke-width: 1; }
.chart text { fill: var(--muted); font-size: 11px; }
.chart .bar { fill: var(--bar); }
.chart .bar.hl { fill: var(--ink); }
.chart .cmp { fill: none; stroke: var(--cmp); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .crosshair { stroke: var(--line-strong); }
.tooltip { position: absolute; pointer-events: none; background: var(--ink); color: #fff; border-radius: 8px; padding: 8px 10px; font-size: 12px; min-width: 150px; z-index: 3; }
.tooltip b { display: block; margin-bottom: 4px; font-weight: 600; }
.tooltip div { display: flex; justify-content: space-between; gap: 12px; color: #c9c9c4; }
.tooltip div span:last-child { color: #fff; font-variant-numeric: tabular-nums; }
.empty { color: var(--muted); font-size: 13px; padding: 28px 0; text-align: center; }

/* Rangliste der Kampagnen */
.rank { display: grid; gap: 12px; }
.rank .item { display: grid; grid-template-columns: 150px minmax(110px, 1fr) 170px; align-items: center; gap: 14px; font-size: 13px; cursor: pointer; }
.rank .item:hover .name { text-decoration: underline; text-underline-offset: 3px; }
.rank .name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rank .name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank .track { height: 12px; width: 100%; }
.rank .fill { height: 100%; border-radius: 3px; background: var(--bar); min-width: 3px; }
.rank .fill.google { background: repeating-linear-gradient(135deg, var(--bar-soft) 0 2px, #e2e3e6 2px 4px); }
.rank .val { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; font-size: 12px; line-height: 1.3; }
.rank .val strong { display: block; font-size: 13px; }
.rank .val strong { color: var(--ink); font-weight: 600; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; }
.dot.meta { background: var(--bar); } .dot.google { background: var(--bar-soft); } .dot.organisch { border: 1.5px solid var(--bar); background: transparent; }

/* Kennzahlen-Raster */
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--line); }
.kpi { padding: 14px 12px 14px 0; border-bottom: 1px solid var(--line); }
.kpi .label { font-size: 12px; color: var(--muted); }
.kpi .value { font-family: var(--serif); font-size: 26px; line-height: 1.1; margin-top: 4px; white-space: nowrap; }
.kpi .target { font-size: 12px; color: var(--muted); margin-top: 4px; display: flex; align-items: center; gap: 6px; }
.kpi .target i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; background: var(--line-strong); }
.kpi[data-s="good"] .target i { background: var(--good); }
.kpi[data-s="warning"] .target i { background: var(--warn); }
.kpi[data-s="critical"] .target i { background: var(--crit); }

/* Funnel */
.funnel { display: grid; gap: 12px; }
.stage { display: grid; grid-template-columns: 120px 1fr 150px; align-items: center; gap: 14px; font-size: 13px; }
.stage .name { color: var(--ink2); }
.stage .meter { height: 12px; }
.stage .meter i { display: block; height: 100%; border-radius: 3px; background: var(--bar); min-width: 3px; }
.stage .num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.stage .num small { display: block; font-weight: 400; color: var(--muted); white-space: nowrap; }

/* Tabellen */
.table-wrap { overflow: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th, .table td { text-align: left; padding: 11px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.table th { font-size: 12px; font-weight: 500; color: var(--muted); cursor: pointer; user-select: none; }
.table th[data-sorted="asc"]::after { content: " ↑"; } .table th[data-sorted="desc"]::after { content: " ↓"; }
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table tr.clickable { cursor: pointer; } .table tr.clickable:hover { background: var(--page); }
.table tr.sub td { color: var(--ink2); background: #fafaf8; }
.table tr.sub td:first-child { padding-left: 28px; }
.table tfoot th, .table tfoot td { font-weight: 600; color: var(--ink); border-bottom: 0; }
.table.small th, .table.small td { padding: 7px 8px; font-size: 12px; }
.table .dot { margin-right: 8px; vertical-align: 0; }
.pill { display: inline-block; font-size: 12px; font-weight: 500; padding: 3px 9px; border-radius: 99px; background: var(--page); border: 1px solid var(--line); color: var(--ink2); }
.pill.gewonnen { background: var(--ink); color: #fff; border-color: var(--ink); }
.pill.verloren { color: var(--down); border-color: #efc7c2; background: #fdf3f2; }
.pill.demo_gebucht, .pill.demo_erfolgt, .pill.angebot { background: #e9e9e5; color: var(--ink); border-color: transparent; }

/* Seitenpanel und Modal */
.panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(540px, 100%); background: var(--card); border-left: 1px solid var(--line); z-index: 20; display: flex; flex-direction: column; box-shadow: -16px 0 48px rgba(0,0,0,.10); }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 20px 24px; border-bottom: 1px solid var(--line); }
.panel-head h3 { font-size: 24px; }
.panel-body { padding: 20px 24px; overflow: auto; display: grid; gap: 16px; align-content: start; }
.kv { display: grid; grid-template-columns: 120px 1fr; gap: 6px 12px; font-size: 13px; margin: 0; }
.kv dt { color: var(--muted); } .kv dd { margin: 0; word-break: break-word; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-grid .span2 { grid-column: 1 / -1; }
.history { display: grid; gap: 6px; font-size: 12px; color: var(--ink2); }
.history time { color: var(--muted); margin-right: 8px; }
.modal { position: fixed; inset: 0; background: rgba(20,20,20,.45); z-index: 30; display: grid; place-items: center; padding: 20px; overflow: auto; }
.modal-card { width: min(720px, 100%); background: var(--card); border-radius: 18px; padding: 0 24px 24px; max-height: calc(100vh - 40px); overflow: auto; }
.modal-card .panel-head { padding-left: 0; padding-right: 0; margin-bottom: 16px; }
.list { display: grid; gap: 8px; font-size: 13px; }
.list .item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 4px 14px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px; }
.list .item > span:last-child { text-align: right; white-space: nowrap; }
.list.click .item { cursor: pointer; }
.list.click .item:hover { background: var(--page); border-color: var(--line-strong); }

/* Auffälligkeiten: Marke, Satz, darunter der Bezug */
.signal { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 11px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; }
.signal .pill { grid-row: 1; align-self: start; }
.signal .text { grid-column: 2; font-size: 13px; line-height: 1.5; }
.signal .meta { grid-column: 2; font-size: 12px; color: var(--muted); }
.signal.kritisch { border-color: #efc7c2; background: #fefaf9; }
.signal.chance { border-color: #cbe4d1; background: #fafcfa; }
.signal.notiz { grid-template-columns: 3px minmax(0, 1fr); gap: 0 14px; background: transparent; }
.signal.notiz::before { content: ""; grid-column: 1; grid-row: 1 / -1; background: var(--line-strong); border-radius: 2px; }
.signal.notiz .text { color: var(--ink2); }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 10px; font-size: 13px; z-index: 40; }

/* ============================================================
   Bewegung
   Kurze, ruhige Übergänge: Karten steigen auf, Zahlen zählen hoch,
   Balken wachsen aus der Grundlinie, die Vergleichslinie zeichnet sich.
   Wer im Betriebssystem weniger Bewegung wünscht, sieht nichts davon.
   ============================================================ */
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes growY { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes growX { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes panelIn { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: none; } }
@keyframes modalIn { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 14px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes toastOut { to { opacity: 0; transform: translate(-50%, 8px); } }
@keyframes flash { from { background-color: rgba(240, 193, 75, .35); } to { background-color: transparent; } }
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.8); } }
@keyframes sweep { from { left: -35%; } to { left: 100%; } }

.ease { transition: all .22s cubic-bezier(.22,.61,.36,1); }
.rise { animation: rise .5s cubic-bezier(.22,.61,.36,1) both; }
.flash { border-radius: 6px; animation: flash 1.6s ease-out; }

/* Karten, Knöpfe, Navigation */
.card { transition: border-color .25s ease, box-shadow .25s ease; }
.card:hover { border-color: var(--line-strong); box-shadow: 0 8px 30px rgba(18,18,18,.045); }
.btn, .icon-btn, .link-btn, .seg button, .side-nav button { transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .12s ease; }
.btn:active, .icon-btn:active { transform: translateY(1px); }
.side-nav button svg { transition: color .18s ease, transform .25s cubic-bezier(.22,.61,.36,1); }
.side-nav button:hover svg { transform: translateX(2px); }
.icon-btn.busy svg { animation: spin .9s linear infinite; }
.table tr.clickable { transition: background-color .15s ease; }
.notice { transition: border-color .25s ease; }

/* Ladebalken oben, während Daten geholt werden */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 50; overflow: hidden; background: transparent; }
.progress i { position: absolute; top: 0; width: 35%; height: 100%; background: var(--ink); animation: sweep 1.1s cubic-bezier(.65,.05,.36,1) infinite; }

/* Lebenszeichen am Stand-Datum, solange automatisch nachgeladen wird */
.live { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--good); margin-right: 6px; vertical-align: 1px; animation: pulse 2.4s ease-in-out infinite; }

/* Charts: Säulen wachsen gestaffelt, Vergleichslinie zeichnet sich */
.chart .bar { transition: fill .15s ease; transform-box: fill-box; transform-origin: bottom; }
.chart.play .bar { animation: growY .55s cubic-bezier(.22,.61,.36,1) both; animation-delay: var(--d, 0ms); }
.chart.play .cmp { stroke-dasharray: 1; animation: draw 1s ease-out .18s both; }
.chart.play text, .chart.play .grid-line, .chart.play .axis-line { animation: fade .7s ease-out both; }
.tooltip { opacity: 0; transform: translateY(3px); transition: opacity .14s ease, transform .14s ease; }
.tooltip.on { opacity: 1; transform: none; }

/* Balken in Rangliste und Funnel */
.rank .fill, .stage .meter i { transform-origin: left center; }
.rank.play .fill, .funnel.play .stage .meter i { animation: growX .6s cubic-bezier(.22,.61,.36,1) both; animation-delay: var(--d, 0ms); }
.rank .item { transition: transform .2s cubic-bezier(.22,.61,.36,1); }
.rank .item:hover { transform: translateX(3px); }
.rank.play .item { animation: fade .5s ease-out both; animation-delay: var(--d, 0ms); }

/* Kennzahlen und Tabellen */
.kpis.play .kpi { animation: rise .45s cubic-bezier(.22,.61,.36,1) both; animation-delay: calc(var(--i, 0) * 40ms); }
.kpis.k4 { grid-template-columns: repeat(4, 1fr); }

.table.play tbody, .list.play, .funnel.play .stage .num, .kpis.play + * { animation: fade .5s ease-out both; }

/* Panel, Modal, Toast */
.panel { animation: panelIn .34s cubic-bezier(.22,.61,.36,1) both; }
.modal { animation: fade .2s ease-out both; }
.modal-card { animation: modalIn .32s cubic-bezier(.22,.61,.36,1) both; }
.toast { animation: toastIn .3s cubic-bezier(.22,.61,.36,1) both; }
.toast.out { animation: toastOut .22s ease-in both; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
    .rank .item:hover, .side-nav button:hover svg { transform: none; }
}
.pill.offen { background: #fdf6e6; border-color: #ecdcae; color: #7a6520; }
/* Termin-Art kann lang sein und soll die Tabelle nicht aus der Karte drücken */
#bookingTable td:nth-child(3), #bookingTable td:nth-child(4) { max-width: 160px; overflow: hidden; text-overflow: ellipsis; }

/* ============================================================
   Kleine Bildschirme
   Bis 1000 px wird aus der Seitenleiste eine Kopfzeile mit waagerecht
   scrollender Navigation. Ab 760 px abwärts zeigen die Tabellen nur noch
   die Spalten, die auf einem Telefon Sinn ergeben (.hide-s).
   ============================================================ */
@media (max-width: 1000px) {
    .app { grid-template-columns: 1fr; }
    .app:has(.sidebar[hidden]) { grid-template-columns: 1fr; }
    /* min-width: 0 ist nötig, sonst zieht die Navigation die Kopfzeile
       auf ihre volle Breite und die ganze Seite wird schiebbar. */
    .sidebar { position: sticky; top: 0; z-index: 15; min-width: 0; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 16px; }
    .sidebar-top { padding: 0; gap: 8px; }
    .sidebar .brand { font-size: 20px; }
    .side-nav { order: 3; flex: 1 1 100%; min-width: 0; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .side-nav::-webkit-scrollbar { display: none; }
    .side-nav button { width: auto; white-space: nowrap; padding: 7px 12px; font-size: 14px; }
    .side-nav button:hover svg { transform: none; }
    .side-label { display: none; }
    .sidebar-bottom { margin: 0 0 0 auto; padding: 0; display: flex; align-items: center; gap: 10px; }
    .user-mail { max-width: 34vw; }
    .main { padding: 22px 18px 56px; }
    .panel { box-shadow: -16px 0 48px rgba(0,0,0,.18); }
}

/* Nebensächliche Spalten fallen schon auf dem Tablet weg, damit Tabellen
   nicht seitwärts geschoben werden müssen. */
@media (max-width: 900px) {
    .hide-s { display: none !important; }
}

@media (max-width: 760px) {
    h1 { font-size: 27px; }
    .page-head { align-items: flex-start; gap: 12px; }
    .filters { width: 100%; justify-content: space-between; }
    .seg button { padding: 8px 11px; font-size: 12px; }
    .card { padding: 16px; border-radius: 12px; gap: 13px; }
    .card:hover { box-shadow: none; }
    .card-head { gap: 8px; }
    .main { gap: 14px; }
    .hero-value { font-size: 34px; }
    .hero-head { flex-wrap: wrap; }
    .hero-sub { text-align: left; }
    .chart { height: 190px; }
    .notice { flex-wrap: wrap; padding: 13px 15px; font-size: 13px; }
    .notice a { margin-left: 0; }
    .kpis, .kpis.k4 { grid-template-columns: repeat(2, 1fr); }
    .kpi .value { font-size: 23px; }
    /* Rangliste: Balken bekommt eine eigene Zeile unter Name und Zahlen */
    .rank .item { grid-template-columns: minmax(0, 1fr) auto; row-gap: 7px; }
    .rank .track { grid-column: 1 / -1; order: 3; }
    .stage { grid-template-columns: 84px minmax(0, 1fr) 92px; gap: 9px; font-size: 12px; }
    .stage .num small { white-space: normal; line-height: 1.3; }
    .table th, .table td { padding: 10px 8px; }
    /* Lange E-Mail-Adressen umbrechen lassen, statt die Tabelle zu dehnen */
    #leadTable td:nth-child(2), #bookingTable td:nth-child(2) { white-space: normal; max-width: 148px; overflow-wrap: anywhere; }
    .list .item { flex-direction: column; gap: 3px; }
    .panel { width: 100%; border-left: 0; }
    .panel-head { padding: 16px; }
    .panel-head h3 { font-size: 20px; }
    .panel-body { padding: 16px; }
    .form-grid, .kv { grid-template-columns: 1fr; }
    .kv dt { color: var(--muted); margin-top: 6px; }
    .modal { padding: 0; align-items: end; }
    .modal-card { max-height: 92vh; border-radius: 16px 16px 0 0; padding: 0 16px 20px; }
    .login-card { padding: 24px; }
    .toast { left: 16px; right: 16px; transform: none; text-align: center; }
    .toast.out, .toast { animation: none; }
}

/* Auf sehr schmalen Geräten reicht eine Kennzahl pro Zeile nicht mehr aus */
@media (max-width: 400px) {
    .main { padding: 18px 12px 48px; }
    .card { padding: 14px; }
    .hero-value { font-size: 30px; }
    .sidebar-bottom .avatar { display: none; }
    .user-mail { display: none; }
}

/* Telefon: Tabellen enger setzen, damit sie ohne Schieben lesbar bleiben.
   Beim Lead fällt das Datum weg — es steht im geöffneten Lead. */
@media (max-width: 560px) {
    .table th, .table td { padding: 9px 6px; font-size: 12px; }
    .pill { font-size: 11px; padding: 2px 7px; }
    #leadTable th:nth-child(1), #leadTable td:nth-child(1) { display: none; }
    #campaignTable td:nth-child(1) { max-width: 124px; overflow: hidden; text-overflow: ellipsis; }
    #contractTable td:nth-child(3) { white-space: normal; max-width: 120px; }
    #bookingTable td:nth-child(2), #leadTable td:nth-child(2) { max-width: 124px; }
    #contractTable select { min-height: 30px; max-width: 112px; padding: 4px 22px 4px 7px; font-size: 12px; }
    #contractTable .btn { min-height: 28px; padding: 0 9px; font-size: 12px; }
}

/* ---------- CMO ---------- */
.cmo-lage .headline { font-family: var(--serif); font-size: 26px; line-height: 1.25; letter-spacing: -0.01em; }
.cmo-lage p + p { margin-top: 10px; }
.cmo-lage .pacing { padding-left: 14px; border-left: 2px solid var(--line-strong); color: var(--ink2); }
.mini { width: 120px; }
.massnahmen { display: grid; gap: 10px; }
.massnahme { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; display: grid; gap: 7px; }
.massnahme.heute { border-color: var(--line-strong); background: #fcfcfa; }
.massnahme.erledigt { opacity: .5; }
.massnahme .kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.massnahme .titel { font-weight: 600; }
.massnahme .zeile { font-size: 13px; color: var(--ink2); }
.massnahme .zeile b { font-weight: 600; color: var(--ink); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; margin-right: 6px; }
.massnahme .knopfe { display: flex; gap: 8px; margin-top: 4px; }
.pill.heute { background: var(--ink); color: #fff; border-color: var(--ink); }
.pill.diese_woche { background: #e9e9e5; color: var(--ink); border-color: transparent; }
.pill.beobachten { background: transparent; }
.pill.kritisch { background: #fdf3f2; border-color: #efc7c2; color: var(--down); }
.pill.chance { background: #f0f7f1; border-color: #cbe4d1; color: var(--up); }
.pill.skalieren { background: #f0f7f1; border-color: #cbe4d1; color: var(--up); }
.pill.stoppen, .pill.tauschen { background: #fdf3f2; border-color: #efc7c2; color: var(--down); }
.ziel-balken { height: 10px; border-radius: 3px; background: var(--page); border: 1px solid var(--line); overflow: hidden; margin: 8px 0 4px; }
.ziel-balken i { display: block; height: 100%; background: var(--bar); }
.ziel-zeile { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.ziel-zeile:last-child { border-bottom: 0; }
.ziel-zeile b { font-variant-numeric: tabular-nums; }
.ask-antwort { margin-top: 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--page); font-size: 14px; white-space: pre-wrap; }
#cmoProdukte .inline-input { width: 56px; }
#cmoProdukte th, #cmoProdukte td { padding: 7px 6px; }

/* Lange Listen bekommen eine feste Höhe und scrollen in sich.
   Die Kopfzeile bleibt dabei stehen. */
.scroll-y { max-height: var(--h, 320px); overflow-y: auto; overscroll-behavior: contain; }
.scroll-y > .table thead th { position: sticky; top: 0; z-index: 1; background: var(--card); box-shadow: 0 1px 0 var(--line); }
.scroll-y::-webkit-scrollbar { width: 10px; }
.scroll-y::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 99px; border: 3px solid var(--card); }
.scroll-y::-webkit-scrollbar-track { background: transparent; }

/* ---------- Agent in der Kopfzeile ---------- */
.head-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.btn.agent { display: inline-flex; align-items: center; gap: 8px; background: var(--ink); border-color: var(--ink); color: #fff; }
.btn.agent svg { width: 17px; height: 17px; }
.btn.agent:hover { background: #000; border-color: #000; }

/* ---------- Chat ---------- */
.panel.chat { width: min(460px, 100%); }
.chat-verlauf { flex: 1; overflow-y: auto; padding: 18px 22px; display: grid; gap: 12px; align-content: start; }
.blase { max-width: 88%; padding: 11px 14px; border-radius: 14px; font-size: 14px; line-height: 1.55; white-space: pre-wrap; }
.blase.agent { background: var(--page); border: 1px solid var(--line); border-bottom-left-radius: 5px; justify-self: start; }
.blase.nutzer { background: var(--ink); color: #fff; border-bottom-right-radius: 5px; justify-self: end; }
.blase.denkt { color: var(--muted); font-style: italic; }
.chat-zeit { font-size: 11px; color: var(--muted); }
.chat-composer { display: flex; gap: 10px; align-items: flex-end; padding: 14px 22px 18px; border-top: 1px solid var(--line); }
.chat-composer textarea { flex: 1; resize: none; min-height: 44px; max-height: 160px; border-radius: 12px; }
.chat-leer { color: var(--muted); font-size: 13px; text-align: center; padding: 30px 10px; }
/* In den Einstellungen behalten die Karten ihre natürliche Höhe —
   sonst zieht die höchste Karte die Nachbarin mit ins Leere. */
.view[data-view="einstellungen"] .grid-2 { align-items: start; }

/* Anhänge im Chat */
.anhaenge { display: flex; flex-wrap: wrap; gap: 7px; padding: 10px 22px 0; }
.chip { display: inline-flex; align-items: center; gap: 7px; max-width: 220px; padding: 5px 9px; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--card); font-size: 12px; }
.chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip .weg { border: 0; background: none; cursor: pointer; color: var(--muted); font-size: 15px; line-height: 1; padding: 0 2px; }
.chip .weg:hover { color: var(--down); }
.chip.laedt { opacity: .55; }
.chip img { width: 26px; height: 26px; object-fit: cover; border-radius: 5px; flex: none; }
.blase .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.blase.nutzer .chip { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.25); color: #fff; }
.icon-btn.klammer { color: var(--muted); flex: none; width: 38px; height: 38px; border: 1px solid var(--line-strong); border-radius: 10px; }
.icon-btn.klammer:hover { color: var(--ink); background: var(--page); }
.chat.zieht { outline: 2px dashed var(--line-strong); outline-offset: -10px; }

/* ---------- Seitenleiste ein- und ausklappen ---------- */
.sidebar-knoepfe { display: flex; align-items: center; gap: 2px; }
#sidebarToggle .pfeil { transition: transform .25s cubic-bezier(.22,.61,.36,1); transform-origin: 11px 10px; }
.app { transition: grid-template-columns .25s cubic-bezier(.22,.61,.36,1); }
.app.schmal { grid-template-columns: 68px 1fr; }
.app.schmal .sidebar { padding: 22px 9px; align-items: center; }
.app.schmal .sidebar-top { flex-direction: column; gap: 6px; padding: 0 0 18px; width: 100%; }
.app.schmal .sidebar-knoepfe { flex-direction: column; }
.app.schmal .brand, .app.schmal .side-label, .app.schmal .user-mail, .app.schmal #logout, .app.schmal .badge { display: none; }
.app.schmal .side-nav { width: 100%; }
.app.schmal .side-nav button { justify-content: center; padding: 11px 0; gap: 0; }
.app.schmal .side-nav button > span { display: none; }
.app.schmal .side-nav button:hover svg { transform: none; }
.app.schmal .sidebar-bottom { justify-items: center; padding: 0; }
.app.schmal #sidebarToggle .pfeil { transform: rotate(180deg); }
@media (max-width: 1000px) {
    /* In der Kopfzeilen-Ansicht gibt es nichts einzuklappen */
    #sidebarToggle { display: none; }
    .app.schmal { grid-template-columns: 1fr; }
    .app.schmal .brand, .app.schmal .user-mail, .app.schmal #logout, .app.schmal .badge { display: block; }
    .app.schmal .side-nav button > span { display: inline; }
    .app.schmal .sidebar-top { flex-direction: row; width: auto; padding: 0; }
    .app.schmal .sidebar-knoepfe { flex-direction: row; }
}

/* ---------- Ladezustände ----------
   Platzhalter statt Zahlensprüngen: die Karte behält ihre Form, während
   die Daten unterwegs sind. */
@keyframes schimmer { to { background-position-x: -200%; } }
.skel { border-radius: 7px; background: linear-gradient(90deg, var(--page) 0%, #ececE6 40%, var(--page) 80%); background-size: 200% 100%; animation: schimmer 1.4s ease-in-out infinite; color: transparent !important; }
.skel-zeile { height: 13px; margin: 9px 0; }
.skel-zeile.kurz { width: 42%; }
.skel-zeile.mittel { width: 68%; }
.skel-zeile.hoch { height: 34px; width: 55%; margin: 4px 0 14px; }
.skel-block { height: 100%; min-height: 120px; border-radius: 10px; }
.skel-liste { display: grid; gap: 9px; }
.skel-liste > i { display: block; height: 46px; border-radius: 10px; }
.skel-tabelle { display: grid; gap: 7px; }
.skel-tabelle > i { display: block; height: 34px; border-radius: 8px; }
.skel-tabelle > i:nth-child(1) { height: 26px; opacity: .6; }
@media (prefers-reduced-motion: reduce) { .skel { animation: none; } }
.pill.live { background: #f0f7f1; border-color: #cbe4d1; color: var(--up); font-size: 11px; padding: 1px 7px; margin-left: 7px; }
.pill.pausiert { background: var(--page); color: var(--muted); font-size: 11px; padding: 1px 7px; margin-left: 7px; }
.rank .name .pill { flex: none; }

/* ---------- Anzeigenvorschau ---------- */
.thumb { width: 30px; height: 30px; border-radius: 5px; object-fit: cover; margin-right: 9px; vertical-align: middle; border: 1px solid var(--line); background: var(--page); }
.pill.video, .pill.bild { font-size: 10px; padding: 1px 6px; margin-left: 7px; background: var(--page); color: var(--muted); }
.table tr.creative { cursor: pointer; }
.table tr.creative:hover td { background: var(--page); }
.vorschau-rahmen { width: 100%; max-width: 360px; aspect-ratio: 340 / 620; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--page) center/cover no-repeat; }
.vorschau-rahmen { position: relative; }
.vorschau-rahmen iframe { width: 100%; height: 100%; border: 0; display: block; opacity: 0; transition: opacity .3s ease; }
.vorschau-rahmen iframe.da { opacity: 1; }
.vorschau-laedt { position: absolute; inset: 0; display: grid; place-items: center; font-size: 13px; color: var(--muted); }
.vorschau-rahmen iframe.da + .vorschau-laedt, .vorschau-rahmen:has(iframe.da) .vorschau-laedt { display: none; }
.vorschau-bild { width: 100%; max-width: 360px; border-radius: 12px; border: 1px solid var(--line); display: block; }
.ziel-gruppe { display: grid; gap: 4px 12px; grid-template-columns: 130px 1fr; font-size: 13px; }
.ziel-gruppe dt { color: var(--muted); }
.ziel-gruppe dd { margin: 0; }
.roh { margin-top: 14px; }
.roh summary { cursor: pointer; font-size: 12px; color: var(--ink2); }
.roh pre { margin: 9px 0 0; padding: 12px; background: var(--page); border: 1px solid var(--line); border-radius: 10px; font-size: 11px; line-height: 1.5; overflow: auto; max-height: 320px; }