/* book-hub Verlags-Dashboard — Design-System "Leitstand+" (design/entwurf-c-*.html, 2026-08-04).
   Weiterentwicklung des Leitstands: Buchkarte, Phasen-Tracking, Klick-Verlauf, Reel-Liste.
   Bewusst nur hell (Entscheidung Steffen 2026-08-04, kein Darkmode). */
:root{
  --surface:#fcfcfb; --ink:#0b0b0b; --sekundaer:#52514e; --gedeckt:#898781;
  --linie:#e1e0d9; --achse:#c3c2b7; --zeile-hover:#f5f4f0; --flaeche:#f0efec;
  --akzent:#2a78d6; --akzent-tief:#256abf; --akzent-hell:#cde2fb; --chart:#256abf;
  --gut:#006300; --warnung:#8a5200; --fehl:#a03123;
  --sans:system-ui,-apple-system,"Segoe UI",sans-serif;
  --schatten:2px 3px 10px rgba(0,0,0,.14);
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--surface); color:var(--ink); font-family:var(--sans);
     font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased}
.blatt{max-width:60rem; margin:0 auto; padding:0 1.5rem 4rem}
.etikett{font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gedeckt); font-weight:500}
button{font:inherit; color:inherit}

/* Kopf — sticky, damit die Tabs beim Scrollen greifbar bleiben */
header{position:sticky; top:0; z-index:10; background:var(--surface);
       display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
       padding:1.6rem 0 .95rem; border-bottom:1px solid var(--ink)}
header .marke{font-weight:700; letter-spacing:.02em}
nav{display:flex; gap:1.5rem; font-size:.85rem}
nav a{color:var(--sekundaer); text-decoration:none; padding-bottom:.95rem; position:relative}
nav a::after{content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px;
             background:var(--ink); transform:scaleX(0); transform-origin:left;
             transition:transform .18s ease}
nav a:hover{color:var(--ink)}
nav a[aria-current]{color:var(--ink); font-weight:600}
nav a[aria-current]::after,nav a:hover::after{transform:scaleX(1)}
nav a:focus-visible,button:focus-visible,summary:focus-visible,textarea:focus-visible,
a:focus-visible,svg:focus-visible,input:focus-visible{
  outline:2px solid var(--akzent); outline-offset:3px}
section{margin-top:2.75rem}

/* Buchkarte — Cover-Miniatur + Eckdaten, über allen Tabs */
.buchkarte{display:flex; gap:1.5rem; align-items:center; margin-top:2.25rem}
.buchkarte img{width:76px; height:auto; flex-shrink:0; border:1px solid var(--linie); box-shadow:var(--schatten)}
.buchkarte .autorin{font-size:.8rem; color:var(--sekundaer)}
.buchkarte h1{font-size:1.35rem; font-weight:700; letter-spacing:-.01em; line-height:1.2; margin:.1rem 0 .35rem}
.buchkarte .buch-meta{font-size:.85rem; color:var(--sekundaer); font-variant-numeric:tabular-nums}
.buchkarte .buch-meta b{color:var(--akzent-tief); font-weight:600}
.buchkarte .isbn{margin-top:.15rem; font-size:.75rem; color:var(--gedeckt); font-variant-numeric:tabular-nums}

/* Kampagnenachse */
.achsenkopf{display:flex; justify-content:space-between; align-items:baseline; gap:1rem; flex-wrap:wrap; margin-bottom:.25rem}
.achsenkopf .heute{font-size:.78rem; color:var(--sekundaer); font-variant-numeric:tabular-nums}
.achsenkopf .heute b{color:var(--akzent-tief); font-weight:600}
/* margin-top schafft Luft für das "heute"-Label, das über dem Band schwebt — sonst läuft es in die Überschrift */
.achse-wrap{position:relative; margin-top:1.6rem}
.phasenband{display:flex; gap:2px; height:2.4rem}
.segment{position:relative; background:var(--flaeche); display:flex; align-items:center; padding:0 .7rem;
         font-size:.78rem; color:var(--sekundaer); white-space:nowrap; overflow:hidden;
         transition:background .15s ease}
.segment:not(.aktiv):hover{background:#e9e8e3}
.segment.aktiv{background:var(--ink); color:#fff; font-weight:600; overflow:visible}
.segment.aktiv .zusatz{color:rgba(255,255,255,.65); font-weight:400}
.zusatz{margin-left:.45rem; font-size:.7rem}
/* Phasen-Fortschritt als blaue Laufkante in der aktiven Phase */
.segment .lauf{position:absolute; left:0; bottom:0; height:3px; background:var(--akzent)}
.heutemarke{position:absolute; top:-6px; height:calc(2.4rem + 12px); width:2px;
    background:var(--akzent); box-shadow:0 0 0 2px var(--surface)}
.heutemarke::after{content:"heute"; position:absolute; top:-1.15rem; left:50%; transform:translateX(-50%);
    font-size:.68rem; color:var(--akzent-tief); font-weight:600}
.datumszeile{display:flex; gap:2px; margin-top:.35rem; font-size:.7rem; color:var(--gedeckt);
    font-variant-numeric:tabular-nums}
.datumszeile span{padding:0 .7rem}

/* Drehquote */
.quote-raster{display:grid; grid-template-columns:minmax(15rem,22rem) 1fr; gap:3rem; align-items:end}
.zahl{font-size:4.25rem; font-weight:650; line-height:1; letter-spacing:-.02em; margin-top:.4rem;
      font-variant-numeric:tabular-nums}
.zahl small{font-size:1.75rem; font-weight:500; color:var(--sekundaer)}
.lesart{margin-top:.4rem; color:var(--sekundaer)}
.wertung{display:inline-flex; align-items:center; gap:.4rem; margin-top:.65rem;
    font-size:.8rem; font-weight:600; color:var(--gut)}
.wertung.warnung{color:var(--warnung)}
.meter{position:relative; padding-top:1.5rem; padding-bottom:1.3rem}
.meter .band-anno{position:absolute; top:0; left:60%; width:10%; text-align:center;
    font-size:.68rem; color:var(--sekundaer); white-space:nowrap}
.meter .band-anno::after{content:""; position:absolute; left:0; right:0; top:1.05rem; height:5px;
    border:1px solid var(--achse); border-bottom:none}
.meter .spur{height:12px; background:var(--akzent-hell)}
.meter .wert{height:12px; background:var(--akzent-tief); margin-top:-12px; animation:fuellen .5s ease-out}
@keyframes fuellen{from{width:0}}
.meter .skalen{display:flex; justify-content:space-between; margin-top:.3rem;
    font-size:.7rem; color:var(--gedeckt); font-variant-numeric:tabular-nums}

/* Phasen-Tracking — Slots (Drehtermine) + Soll/Ist je Phase */
.tracking{margin-top:.6rem; border-top:1px solid var(--linie)}
.tracking-zeile{display:grid; grid-template-columns:7.5rem 1fr auto; gap:1.5rem; align-items:center;
    padding:.75rem 0; border-bottom:1px solid var(--linie); transition:background .15s ease}
.tracking-zeile:hover{background:var(--zeile-hover)}
.tracking-zeile .phase-name{font-size:.85rem; color:var(--sekundaer)}
.tracking-zeile.aktiv .phase-name{color:var(--ink); font-weight:600}
.slots{display:flex; gap:.45rem; align-items:center; flex-wrap:wrap}
.slot{width:11px; height:11px; border-radius:50%; flex-shrink:0}
.slot.voll{background:var(--akzent-tief)}
.slot.offen{background:var(--surface); border:2px solid var(--akzent-tief)}
.slot.geplant{background:var(--linie)}
.slots .leer{font-size:.78rem; color:var(--gedeckt)}
.tracking-zeile .zaehler{font-size:.82rem; color:var(--sekundaer); font-variant-numeric:tabular-nums;
    white-space:nowrap; text-align:right}
.tracking-zeile .zaehler b{color:var(--ink); font-weight:600}
.legende{display:flex; gap:1.5rem; margin-top:.7rem; font-size:.72rem; color:var(--gedeckt)}
.legende span{display:inline-flex; align-items:center; gap:.4rem}
.legende .slot{width:9px; height:9px}

/* Tabellen (Stückliste + Links) */
table{width:100%; border-collapse:collapse}
caption{text-align:left; padding-bottom:.4rem}
th{text-align:left; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
   color:var(--gedeckt); font-weight:500; padding:.9rem .75rem .5rem 0; border-bottom:1px solid var(--ink)}
td{padding:.85rem .75rem .85rem 0; border-bottom:1px solid var(--linie); vertical-align:top}
tbody tr{transition:background .15s ease}
tbody tr:hover{background:var(--zeile-hover)}
td.status{width:5.5rem; white-space:nowrap; font-size:.8rem}
.gepostet{color:var(--gut); font-weight:600}
.offen-status{color:var(--gedeckt)}
td.titel{font-weight:600}
td.phase,td.datum{white-space:nowrap; color:var(--sekundaer); font-size:.85rem}
td.datum{font-variant-numeric:tabular-nums}
.phase-pille{border:1px solid var(--achse); padding:.1rem .5rem; font-size:.72rem;
    letter-spacing:.06em; text-transform:uppercase; color:var(--sekundaer)}
td.aktion{text-align:right; white-space:nowrap}
.beanstanden{background:none; border:none; font-size:.8rem; color:var(--akzent-tief);
    cursor:pointer; text-decoration:underline; text-underline-offset:3px; padding:0;
    opacity:0; transition:opacity .15s ease}
tbody tr:hover .beanstanden,.beanstanden:focus-visible{opacity:1}
.beanstanden:hover{color:var(--ink)}

/* Skelett */
details{margin-top:.5rem; font-weight:400}
summary{cursor:pointer; font-size:.8rem; color:var(--sekundaer); list-style:none}
summary::-webkit-details-marker{display:none}
summary::before{content:"+ "; color:var(--akzent-tief); font-weight:700}
details[open] summary::before{content:"− "}
.skelett{margin-top:.6rem; display:grid; grid-template-columns:7rem 1fr; gap:.3rem .9rem;
    font-size:.83rem; border-left:2px solid var(--linie); padding:.5rem 0 .5rem .9rem}
.skelett dt{color:var(--gedeckt); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; padding-top:.1rem}
.skelett dd.voll{grid-column:1 / -1}

/* Beanstanden-Formular */
.feedback-zeile td{padding-top:0}
.feedback-form{border-left:2px solid var(--akzent-hell); padding:.6rem 0 .7rem .9rem; max-width:36rem}
.feedback-form label{display:block; font-size:.8rem; color:var(--sekundaer); margin-bottom:.35rem}
.feedback-form textarea{width:100%; min-height:4.5rem; border:1px solid var(--achse); background:#fff;
    font:inherit; font-size:.9rem; padding:.5rem .6rem; resize:vertical; border-radius:0}
.form-zeile{display:flex; gap:1rem; align-items:center; margin-top:.55rem}
.knopf{background:var(--ink); color:#fff; border:none; font:inherit; font-size:.83rem;
    font-weight:600; padding:.45rem .95rem; cursor:pointer}
.knopf:hover{background:#2b2b28}
.knopf:disabled{opacity:.55; cursor:default}
.knopf-still{background:none; border:none; font:inherit; font-size:.83rem; color:var(--sekundaer);
    cursor:pointer; text-decoration:underline; text-underline-offset:3px; padding:0}
.knopf-still:hover{color:var(--ink)}
.bestaetigung{color:var(--gut); font-weight:600; font-size:.85rem; padding:.2rem 0}
.formfehler{color:var(--fehl); font-size:.83rem; margin-top:.45rem}

/* Performance — Klick-Verlauf */
.chartkopf{display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; margin-bottom:1rem}
.chartkopf .summe{margin-top:.15rem; font-size:.85rem; color:var(--sekundaer); font-variant-numeric:tabular-nums}
.chartkopf .summe b{color:var(--ink); font-weight:600}
.zeitraum{display:flex; gap:0; border:1px solid var(--achse)}
.zeitraum button{background:none; border:none; border-left:1px solid var(--achse);
    font-size:.78rem; padding:.3rem .7rem; cursor:pointer; color:var(--sekundaer);
    transition:background .15s ease}
.zeitraum button:first-child{border-left:none}
.zeitraum button:hover{background:var(--zeile-hover); color:var(--ink)}
.zeitraum button[aria-pressed="true"]{background:var(--ink); color:var(--surface); font-weight:600}
.zeitraum-frei{display:none; gap:.6rem; align-items:center; margin-top:.7rem; font-size:.8rem; color:var(--sekundaer)}
.zeitraum-frei.offen{display:flex; flex-wrap:wrap}
.zeitraum-frei input{font:inherit; font-size:.8rem; color:var(--ink); background:var(--surface);
    border:1px solid var(--achse); padding:.25rem .4rem}
.chart-wrap{position:relative}
.chart-wrap svg{display:block; width:100%; height:auto}
.gitter{stroke:var(--linie); stroke-width:1}
.achsentext{fill:var(--gedeckt); font-size:11px; font-variant-numeric:tabular-nums}
.flaeche-pfad{fill:var(--chart); opacity:.1}
.linie-pfad{fill:none; stroke:var(--chart); stroke-width:2; stroke-linejoin:round; stroke-linecap:round}
.endpunkt{fill:var(--chart); stroke:var(--surface); stroke-width:2}
.endwert{fill:var(--ink); font-size:12px; font-weight:600; font-variant-numeric:tabular-nums}
.kreuz{stroke:var(--achse); stroke-width:1; opacity:0; pointer-events:none}
.kreuz-punkt{fill:var(--chart); stroke:var(--surface); stroke-width:2; opacity:0; pointer-events:none}
.tooltip{position:absolute; pointer-events:none; opacity:0; background:var(--surface);
    border:1px solid var(--linie); box-shadow:var(--schatten); padding:.4rem .6rem;
    font-size:.78rem; white-space:nowrap; transform:translate(-50%,-100%); transition:opacity .1s ease}
.tooltip b{display:block; font-size:.9rem; font-variant-numeric:tabular-nums}
.tooltip span{color:var(--sekundaer)}
.werte-tabelle{margin-top:.7rem}
.werte-tabelle table{width:auto; margin-top:.5rem; font-size:.8rem}
.werte-tabelle td,.werte-tabelle th{padding:.15rem .9rem .15rem 0; border-bottom:1px solid var(--linie);
    font-variant-numeric:tabular-nums; font-weight:400; letter-spacing:0; text-transform:none; font-size:.8rem}
.werte-tabelle th{color:var(--gedeckt)}

/* Performance — Reel-Liste */
.reel{display:flex; gap:1.4rem; padding:1.4rem 0; border-bottom:1px solid var(--linie);
    transition:background .15s ease}
.reel:hover{background:var(--zeile-hover)}
.reel .vorschau{width:84px; height:112px; flex-shrink:0; border-radius:8px; overflow:hidden;
    background:var(--flaeche); display:flex; align-items:center; justify-content:center;
    color:var(--gedeckt); font-size:1.1rem; border:1px solid var(--linie)}
.reel .vorschau img{width:100%; height:100%; object-fit:cover}
.reel .rechts{min-width:0; flex:1}
.reel h2{font-size:1rem; font-weight:600; line-height:1.35}
.reel .gepostet-am{margin-top:.2rem; font-size:.8rem; color:var(--gedeckt); font-variant-numeric:tabular-nums}
.reel .ig-link{color:var(--akzent-tief); text-decoration:none}
.reel .ig-link:hover{text-decoration:underline; text-underline-offset:3px}
/* Kennzahlen: Auto-Fit-Grid — weitere Werte (Saves, Teilen, Link-Klicks) reihen sich ein,
   ohne dass das Layout bricht; leere Werte als "–" in gedämpfter Farbe */
.kennzahlen{display:grid; grid-template-columns:repeat(auto-fit,minmax(6.5rem,max-content));
    gap:.9rem 2.25rem; margin-top:1rem}
.kennzahlen dt{font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
    color:var(--gedeckt); font-weight:500}
.kennzahlen dd{margin-top:.1rem; font-size:1.35rem; font-weight:650; line-height:1.1;
    letter-spacing:-.01em; font-variant-numeric:tabular-nums}
.kennzahlen dd.leer{color:var(--gedeckt); font-weight:400}

/* Links */
td.klicks{font-variant-numeric:tabular-nums; white-space:nowrap}
td.klicks b{font-size:1.15rem; font-weight:650}
td.klicks .einheit{color:var(--gedeckt); font-size:.75rem; margin-left:.25rem}
td.verlauf{width:12.5rem}
.spark{display:block}
td.link-name{font-weight:600}
.link-key{display:block; font-weight:400; color:var(--gedeckt); font-size:.75rem;
    font-variant-numeric:tabular-nums}

/* Hinweise / Leer- und Fehlerzustände */
.hinweis{margin-top:2.75rem; border-left:2px solid var(--linie); padding:.6rem 0 .6rem .9rem;
    color:var(--sekundaer); max-width:34rem}
.hinweis.fehler{border-left-color:var(--fehl)}
.hinweis .nochmal{margin-top:.6rem}
.hinweis-klein{border-left:2px solid var(--linie); padding:.6rem 0 .6rem .9rem;
    color:var(--sekundaer); max-width:34rem}

footer{margin-top:3rem; padding-top:1rem; border-top:1px solid var(--linie);
    font-size:.75rem; color:var(--gedeckt)}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important; animation:none !important}
}
@media (max-width:760px){
  .blatt{padding-left:1.1rem; padding-right:1.1rem}
  header{position:static; flex-direction:column; align-items:flex-start; gap:.9rem}
  nav{flex-wrap:wrap; gap:1.1rem}
  nav a{padding-bottom:.4rem}
  .achsenkopf{flex-direction:column; align-items:flex-start; gap:.15rem}
  .achse-wrap{margin-top:.6rem}
  .zahl{font-size:3.25rem}
  .zahl small{font-size:1.35rem}
  .buchkarte img{width:64px}
  .quote-raster{grid-template-columns:1fr; gap:1.25rem}
  .phasenband{flex-direction:column; height:auto}
  .segment{flex:0 0 auto !important; min-height:2.2rem}
  .segment .zusatz{color:inherit; opacity:.7}
  .segment::after{content:attr(data-fenster); margin-left:auto; font-size:.7rem;
      font-variant-numeric:tabular-nums; opacity:.75}
  .heutemarke,.datumszeile{display:none}
  .tracking-zeile{grid-template-columns:1fr; gap:.4rem}
  .tracking-zeile .zaehler{text-align:left}
  .beanstanden{opacity:1}
  .chartkopf{flex-direction:column; align-items:flex-start; gap:.7rem}
  .reel{gap:1rem}
  .reel .vorschau{width:66px; height:88px}
  .kennzahlen{gap:.8rem 1.5rem}
  .kennzahlen dd{font-size:1.15rem}
  thead{display:none}
  table,tbody,tr,td{display:block; width:100%}
  caption{display:block}
  td{border-bottom:none; padding:.15rem 0}
  tr{border-bottom:1px solid var(--linie); padding:.8rem 0; display:block}
  td.aktion{text-align:left}
  td.verlauf{width:auto}
  .werte-tabelle table,.werte-tabelle tbody,.werte-tabelle tr,.werte-tabelle td{display:table-row-group}
  .werte-tabelle table{display:table}
  .werte-tabelle tr{display:table-row; border-bottom:none; padding:0}
  .werte-tabelle td,.werte-tabelle th{display:table-cell; width:auto; border-bottom:1px solid var(--linie); padding:.15rem .9rem .15rem 0}
  .werte-tabelle thead{display:table-header-group}
}