/* =========================================================
   Zuschlagsgewinner – Auswertung
   Gestaltung nach dem Design-System „Fundgrube" (dirkloop.com)
   Keine externen Ressourcen – Schrift liegt lokal im Ordner icons/
   ========================================================= */

:root{
  /* ---- Tokens aus dem Design-System ---- */
  --color-bg:               #F0EEE6;  /* Papierbeige, Seitengrund */
  --color-text:             #2E2F2F;  /* Anthrazit: Text, Linien, dunkle Flächen */
  --color-accent:           #D97757;  /* Terrakotta: Links, Hover, Diagramme */
  --color-highlight:        #E2D9CA;  /* Highlight-Box, Felder, Tabellenzeilen */
  --color-highlight-purple: #CBCADB;  /* Highlight-Variante flieder */
  --color-button:           #BCD1CA;  /* Salbeigrün, sekundäre Flächen */
  --transition-fast:        .3s;

  /* ---- Ergänzungen für die Auswertungsoberfläche ----
     Das Design-System kennt nur eine Fläche. Eine Tabelle mit Filtern und
     Diagrammen braucht drei Ebenen, deshalb ein aufgehellter Papierton für
     Karten und zwei abgetönte Varianten für Linien. */
  --color-card:             #F7F5EF;  /* Karten, eine Stufe heller als der Grund */
  --color-accent-text:      #9D4526;  /* Terrakotta gedunkelt – nur für Text auf hell */
  --color-accent-deep:      #A84C2C;  /* Terrakotta gedunkelt – Grund im Hover */
  --color-accent-soft:      #F3E3DA;  /* Terrakotta stark aufgehellt */
  --color-muted:            #655F57;  /* warmes Grau für Sekundärtext */
  --color-muted-strong:     #4A463F;
  --color-line:             #DDD7C9;
  --color-line-strong:      #C7BFAD;
  --color-field-hover:      #D6CCB9;

  /* ---- Funktionale Zuordnung (von den Bausteinen genutzt) ---- */
  --page:         var(--color-bg);
  --card:         var(--color-card);
  --field:        var(--color-highlight);
  --field-hover:  var(--color-field-hover);
  --line:         var(--color-line);
  --line-strong:  var(--color-line-strong);
  --text:         var(--color-text);
  --text-strong:  var(--color-text);
  --muted:        var(--color-muted);
  --muted-strong: var(--color-muted-strong);
  --accent:       var(--color-accent);

  /* Einheitliche Höhe aller Bedienelemente (Felder, Selects, Buttons) */
  --control-h:    42px;
  --radius:       10px;      /* Design-System: weiche Ecken 10–15px */
}

/* ---------- Schrift (lokal gebündelt, keine externen Ressourcen) ----------
   Das Design-System verlangt zwei Schnitte: Open Sans Light für Fließtext und
   Open Sans Condensed Medium für Headlines. Beide stecken in der vorhandenen
   Variable Font – sie hat neben wght (300–800) auch die Achse wdth (75–100%).
   „Condensed Medium" ist damit font-stretch:75% bei font-weight:500; eine
   zweite Schriftdatei ist nicht nötig. */
@font-face{
  font-family:'Open Sans';
  src:url('../icons/OpenSans-VariableFont_wdth,wght.ttf') format('truetype-variations'),
      url('../icons/OpenSans-VariableFont_wdth,wght.ttf') format('truetype');
  font-weight:300 800;
  font-stretch:75% 100%;
  font-style:normal;
  font-display:swap;
}

/* Headline-Schnitt: schmal laufend, mittlere Stärke */
.t-medium,
h1,h2,h3,
.card-title,
.kpi-value,
.badge,
.btn,
table.list th{
  font-stretch:75%;
  font-weight:500;
}

*{ box-sizing:border-box; }

/* Das hidden-Attribut muss jede display-Angabe schlagen. Ohne diese Regel
   gewinnen Klassen wie .btn (inline-flex) oder .match-report (grid) gegen das
   display:none des Browser-Stylesheets – versteckte Elemente bleiben sichtbar. */
[hidden]{ display:none !important; }

html,body{ margin:0; padding:0; }

body{
  font-family:'Open Sans','Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  font-weight:300;
  font-size:16px;
  line-height:1.7;            /* Design-System: Fließtext 16px / 1.7 */
  letter-spacing:.03em;
  color:var(--text);
  background:var(--page);
  -webkit-font-smoothing:antialiased;
}
p{ hyphens:auto; overflow-wrap:break-word; }   /* setzt lang="de-DE" voraus */

h1{ font-size:2.25rem; line-height:1.5; letter-spacing:.01em;
    color:var(--text-strong); margin:0 0 1.2rem; }
h2{ font-size:1.5rem; line-height:1.25; letter-spacing:.03em;
    color:var(--text-strong);
    border-bottom:1px solid var(--color-text); padding-bottom:.3rem; margin:0 0 1rem; }
h3{ font-size:1.15rem; letter-spacing:.03em; color:var(--text-strong); margin:0 0 .6rem; }
em{ font-style:normal; font-stretch:75%; font-weight:500; }
strong,b{ font-stretch:75%; font-weight:500; }  /* „Hervorhebung: Medium" */
code{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.85em; }

/* Design-System: dezente Pop-in-Bewegung */
@keyframes popIn{
  from{ opacity:0; transform:translateY(5px) scale(.97); }
  to  { opacity:1; transform:translateY(0) scale(1); }
}
@media (prefers-reduced-motion:no-preference){
  .card,.kpi{ animation:popIn .5s ease-out forwards; }
}

/* ---------- Icons ----------
   Die PNGs im Ordner icons/ sind reinweiß. Auf farbigem Grund werden sie direkt
   eingebunden; auf hellem Grund per filter eingeschwärzt. CSS-Masken sind hier
   ungeeignet, weil Chrome sie bei file://-Pfaden nicht darstellt. */
.btn-icon{ height:15px; width:auto; display:block; }   /* weiß auf rotem Button */

/* ---------- Kopfzeile mit Logo ---------- */
/* ---------- Logo-Ebene ----------
   Übernommen aus dirkloop.com/xxx/css.css und java.js: fest stehende Ebene
   über dem Inhalt (z-index 9999), beim Scrollen ab 100px zusammenklappend
   auf eine schmale, deckende Leiste mit Hamburger-Symbol.
   Abweichung: Breite folgt unserer Inhaltsbreite statt der 452px-Lesespalte. */
#logoEbene{
  /* wie im Original ohne border-box: Höhe meint den Inhalt, der Innenabstand
     kommt obendrauf. Sonst wäre die eingeklappte Leiste nur 16px statt 66px
     hoch und würde den darunter laufenden Inhalt nicht verdecken. */
  box-sizing:content-box;
  position:fixed; z-index:9999; isolation:isolate;
  top:10px; left:50%; transform:translateX(-50%);
  width:min(1400px, calc(100% - 3rem));
  color:var(--color-text);
  background-color:transparent;
  display:flex; align-items:center; justify-content:flex-start;
  height:70px; padding:15px 0 25px 0;
  transition: background-color 0.5s ease, color 0.5s ease, height 0.3s ease, font-size 0.3s ease, padding 0.3s ease;
}
/* Zustand am Seitenanfang, sobald einmal gescrollt wurde – wie im Original,
   wo das Skript diese Werte im else-Zweig setzt. */
#logoEbene.is-top{ height:50px; padding:25px 0; }
#logoEbene a{ color:inherit; text-decoration:none; margin-left:0; }
#logoEbene a:hover{ text-decoration:none; }
/* box-sizing:content-box, damit die 50px die Grafik selbst meinen und der
   Innenabstand außen anliegt – wie im Original, das kein border-box setzt.
   Mit border-box bliebe von der Höhe nach Abzug der 40px Innenabstand nur
   ein 10px hoher, zur Ellipse gestauchter Rest. */
.icon{
  box-sizing:content-box;
  width:50px; height:50px; border-style:none; padding:20px 0 20px 10px; display:block;
}

/* Abstandhalter unter der schwebenden Ebene. Deren Unterkante liegt bei 120px
   (10 oben + 70 Höhe + 40 Innenabstand); 100px rücken den Inhalt bewusst etwas
   darunter. Das Icon endet bei rund 105px, die Überschrift beginnt bei 112px –
   sie berühren sich also nicht. */
#start-space{ height:100px; }

/* Zustand nach dem Scrollen */
#logoEbene.is-scrolled{
  top:0; height:16px; padding:25px 0;
  background-color:var(--color-bg);
}
/* Im eingeklappten Zustand weicht das Icon dem Hamburger-Symbol mit dem
   Schriftzug – Aufbau und Maße wie in java.js/css.css der Vorlage. */
#logoEbene.is-scrolled #scroll{ display:none; }

.menu-container{ display:none; align-items:center; gap:10px; }
#logoEbene.is-scrolled .menu-container{ display:flex; }

.hamburger-link{ display:inline-flex; align-items:center; }
.hamburger-menu{
  width:25px; height:18px; display:flex; flex-direction:column;
  justify-content:space-between; padding:0 0 0 20px; box-sizing:content-box;
}
.line{ height:2px; width:100%; background-color:var(--color-text); border-radius:1px; }

#scrollOn{
  font-size:20px; letter-spacing:.01em; padding:0 0 0 10px;
  color:var(--color-text); font-stretch:100%; font-weight:300;
  text-decoration:none;
}
#scrollOn:hover{ color:var(--color-text); text-decoration:none; }


/* ---------- Layout ---------- */
/* margin-top 0.75rem = 12px: 20px weniger als die früheren 2rem, damit die
   Überschrift näher an der Logo-Leiste steht. Mobil gilt weiter 1.5rem. */
.wrap{ width:min(1400px, calc(100% - 3rem)); margin:.75rem auto 0; padding-bottom:1rem; }


/* Einleitung über die volle Seitenbreite */
.intro{ margin:0 0 1.8rem; }
.intro p{ margin:0 0 .8rem; }
.intro p:last-child{ margin-bottom:0; }

/* ---------- Karten ---------- */
.card{
  background:var(--card); border-radius:15px; padding:2rem;
  margin-bottom:1.5rem;
}
.card:last-child{ margin-bottom:0; }
/* Design-System: Sektionen durch eine 1-px-Linie in Textfarbe getrennt */
.card-title{
  font-size:1.15rem; color:var(--text-strong); letter-spacing:.03em;
  border-bottom:1px solid var(--color-text); padding-bottom:.5rem; margin-bottom:1.2rem;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}

/* ---------- Buttons ----------
   Design-System: dunkler Grund, Text in Papierbeige, Radius 10px,
   Hover auf Terrakotta, Klick verkleinert leicht. */
.btn{
  background:var(--color-text); color:var(--color-bg); border:none;
  border-radius:var(--radius);
  height:var(--control-h); padding:0 1.4rem; line-height:1;
  font-family:inherit; font-size:.9rem;
  cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem; white-space:nowrap;
  transition:background-color var(--transition-fast), transform .15s;
}
.btn:hover{ background:var(--color-accent-deep); color:var(--color-bg); }
.btn:active{ transform:scale(.95); }
.btn-sm{ padding:0 .83rem; }   /* nur schmaler – Höhe bleibt einheitlich */

/* ---------- Felder ---------- */
input,select,textarea{
  background:var(--field); border:none; border-radius:var(--radius);
  padding:.55rem .8rem; font-family:inherit; font-size:.95rem; font-weight:300;
  letter-spacing:.03em;
  color:var(--text-strong); width:100%;
}
/* einheitliche Höhe für alle einzeiligen Bedienelemente */
input:not([type=checkbox]):not([type=radio]),select{
  height:var(--control-h); padding-top:0; padding-bottom:0; line-height:normal;
}
select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B665E' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .75rem center;
  padding-right:2.2rem; cursor:pointer;
  text-overflow:ellipsis;
}
:focus-visible{ outline:none; box-shadow:0 0 0 1.5px var(--accent); }
input:focus,select:focus{ outline:none; box-shadow:0 0 0 1.5px var(--accent); }

input[type=checkbox],input[type=radio]{ width:auto; }

/* ---------- Checkboxen / Optionen ---------- */
.opt-row{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:.9rem 1.5rem;
}
.check{ display:flex; align-items:flex-start; gap:.6rem; cursor:pointer; font-size:.92rem; }
.check input{
  margin:.35rem 0 0; accent-color:var(--accent); width:16px; height:16px; flex:none; cursor:pointer;
}
.check-hint{
  display:block; font-style:normal; font-weight:300; font-size:.82rem;
  color:var(--muted); line-height:1.45;
}

/* ---------- Abgleich-Bericht ---------- */
.match-report{
  margin-top:1.2rem; display:grid;
  grid-template-columns:repeat(auto-fill, minmax(320px,1fr)); gap:.6rem;
}
.match-group{ background:var(--field); border-radius:var(--radius); padding:.7rem .9rem; }
.match-lead{ font-weight:600; font-size:.88rem; color:var(--text-strong); }
.match-list{ margin:.35rem 0 0; padding-left:1.1rem; font-size:.85rem; }
.match-list li{ color:var(--muted); }
.match-list li.is-lead{ color:var(--text); }

.field{ display:flex; flex-direction:column; gap:.25rem; min-width:0; }
.field-label{
  font-size:.75rem; text-transform:uppercase; letter-spacing:.05em;
  color:var(--muted); font-weight:600;
}
.field-reset{ justify-content:flex-end; }
.field-reset .btn{ width:100%; }

.filter-grid{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  gap:.9rem 1.5rem;
}
.filter-status{
  margin:1rem 0 0; font-size:.85rem; color:var(--muted);
}
/* eine Leerzeile Abstand zur Schaltfläche darunter */
.match-summary{ margin-bottom:1.35rem; }

/* ---------- Links ----------
   Design-System a.ueber: Terrakotta, fett, Hover unterstrichen (Offset 0.2em) */
a{
  color:var(--color-accent-text); text-decoration:none;
  font-stretch:75%; font-weight:500;
  transition:color var(--transition-fast);
}
a:hover{ text-decoration:underline; text-underline-offset:.2em; }

/* ---------- Bibliotheken- und Lizenzseite ---------- */
.back-link{ margin:0 0 1.2rem; font-size:.9rem; }
.lib-meta{
  display:grid; grid-template-columns:minmax(0,14rem) minmax(0,1fr);
  gap:.5rem 1.5rem; margin:0;
}
.lib-meta dt{ color:var(--muted); font-stretch:75%; font-weight:500; }
.lib-meta dd{ margin:0; }
.lib-meta code{ overflow-wrap:anywhere; }
.lib-links{ display:flex; flex-wrap:wrap; gap:1.5rem; margin:1.2rem 0 0; }
.lib-note{ margin:1rem 0 0; color:var(--muted); font-size:.9rem; }
.lib-note:first-child{ margin-top:0; }
.lib-disclaimer{ margin-top:1.5rem; }

/* ---------- Fußzeile ----------
   Design-System Abschnitt 3/4: Kleintext 13px, Zeilenhöhe 1.5, Laufweite
   0.03em, rechtsbündig, Textfarbe, keine Trennlinie.
   Abschnitt 5.4 (a.footer): Links in Textfarbe, Hover Terrakotta. */
.app-footer{
  width:min(1400px, calc(100% - 3rem)); margin:1rem auto 0;
  padding:0 0 2.5rem;
  text-align:right;
  font-size:13px; font-weight:300; line-height:1.5; letter-spacing:.03em;
  color:var(--color-text);
}
.app-footer a{
  color:var(--color-text); font-stretch:100%; font-weight:300;
  text-decoration:none;
}
.app-footer a:hover{ color:var(--color-accent-text); text-decoration:none; }

@media (max-width:640px){
  .lib-meta{ grid-template-columns:1fr; gap:.15rem; }
  .lib-meta dd{ margin-bottom:.6rem; }
  .app-footer{ width:calc(100% - 1.5rem); }
}

/* ---------- Laden / Fehler ---------- */
.loading{
  margin:0; text-align:center; color:var(--muted); font-size:.95rem; padding:2.5rem 0;
}
.msg-error{
  margin:0; background:var(--color-accent-soft); color:var(--color-accent-text);
  border-radius:var(--radius); padding:.7rem 1rem; font-size:.9rem; line-height:1.6;
}
.hint{ margin:1.2rem 0 1.4rem; font-size:.95rem; line-height:1.6; color:var(--text); }

/* ---------- KPIs ----------
   Spalte 1+2: quadratische Kacheln (dunkel)
   Spalte 3:   zwei gestapelte Kacheln (hell), zusammen so hoch wie ein Quadrat
   Spalte 4:   Quellenhinweis */
.kpi-grid{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  gap:1.5rem; margin-bottom:1.5rem;
}
.kpi{
  background:var(--card); border-radius:15px; padding:1.3rem 1.6rem;
  display:flex; flex-direction:column; justify-content:center; min-width:0;
}
.kpi-label{
  font-size:.8rem; text-transform:uppercase; letter-spacing:.05em;
  color:var(--muted); font-stretch:75%; font-weight:500;
}
.kpi-value{
  font-size:1.75rem; color:var(--text-strong);
  line-height:1.25; letter-spacing:.01em; margin-top:.2rem;
}
.kpi-sub{ font-size:.82rem; color:var(--muted); }

/* Farbvarianten nach Design-System: dunkle Fläche mit Papierbeige,
   helle Fläche in Salbeigrün. Label und Zusatzzeile erben die Kachelfarbe. */
.kpi-dark{ background:var(--color-text); color:var(--color-bg); }
.kpi-light{ background:var(--color-button); color:var(--color-text); }
.kpi-dark .kpi-label, .kpi-light .kpi-label,
.kpi-dark .kpi-value, .kpi-light .kpi-value,
.kpi-dark .kpi-sub,   .kpi-light .kpi-sub{ color:inherit; }
.kpi-dark .kpi-sub,   .kpi-light .kpi-sub{ opacity:.8; }

.kpi-square .kpi-value{ font-size:2.3rem; margin-top:.4rem; }
.kpi-square .kpi-sub{ margin-top:.3rem; }

/* Die gestapelte Spalte füllt die Zeilenhöhe, die von den Quadraten kommt.
   Sie nimmt die restlichen zwei Rasterspalten ein, seit der Quellenhinweis
   in die Einleitung gewandert ist. */
.kpi-stack{
  display:grid; grid-template-rows:1fr 1fr; gap:1.5rem; min-width:0;
  grid-column:span 2;
}

/* Quadratisch nur im vierspaltigen Raster – sonst würden die Kacheln
   auf schmalen Fenstern extrem hoch */
@media (min-width:1101px){
  .kpi-square{ aspect-ratio:1 / 1; }
}

/* Untergeordneter Abschnitt innerhalb einer Karte (z. B. Namensabgleich
   innerhalb des Filters) – abgesetzt durch eine Linie statt eigener Fläche */
.subsection{
  margin-top:1.6rem; padding-top:1.4rem; border-top:1px solid var(--line-strong);
}
.subsection .card-title{ font-size:1rem; }

/* ---------- Einklappbare Karten ---------- */
.card-toggle{ cursor:pointer; user-select:none; }
.card-toggle:hover{ color:var(--color-accent-text); }
.card-toggle.is-collapsed{ margin-bottom:0; border-bottom:none; padding-bottom:0; }
.toggle-right{ display:inline-flex; align-items:center; gap:.7rem; flex:0 1 auto; min-width:0; }
.toggle-meta{
  font-size:.82rem; color:var(--muted); font-weight:300;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.card-toggle .chev{ transition:transform .2s; transform:rotate(180deg); }
.card-toggle.is-collapsed .chev{ transform:rotate(0deg); }

/* Suchfeld in einer Kartenüberschrift – niedriger als die Filterfelder, damit
   die Titelzeile nicht aus dem Raster der übrigen Karten fällt */
.title-search{
  width:min(280px, 50%); flex:none;
  height:34px; font-size:.85rem; font-weight:300;
}

/* ---------- Segmented control ---------- */
.seg{ display:inline-flex; background:var(--field); border-radius:var(--radius); padding:3px; }
.seg-btn{
  background:none; border:none; font:inherit; font-size:.78rem; cursor:pointer;
  padding:.22rem .8rem; border-radius:7px; color:var(--muted-strong);
  transition:background-color var(--transition-fast), color var(--transition-fast);
  white-space:nowrap;
}
.seg-btn:hover{ color:var(--color-accent-text); }
.seg-btn.is-active{
  background:var(--color-text); color:var(--color-bg);
  font-stretch:75%; font-weight:500;
}

/* ---------- Charts ---------- */
.chart-grid{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:1.5rem;
  margin-bottom:1.5rem;
}
.chart-card{ margin-bottom:0; display:flex; flex-direction:column; }
.chart-body{ flex:1; min-height:0; }
/* Die Diagramme werden in echten Pixeln gezeichnet (viewBox = Containerbreite),
   damit die Beschriftung nicht mitskaliert und auf Telefonen winzig wird. */
.chart-body svg{ display:block; width:100%; height:auto; }
.bar-label{ font-size:13px; fill:var(--text); font-weight:300; }
.bar-value{ font-size:13px; fill:var(--muted); font-stretch:75%; font-weight:500; }
.bar-rect{ fill:var(--color-accent); transition:fill var(--transition-fast); }
.bar-row:hover .bar-rect{ fill:var(--color-text); }
.bar-track{ fill:var(--color-bg); }
.axis-line{ stroke:var(--line-strong); stroke-width:1; }

/* Fördermodell: Ring links, Legende daneben; Grafik füllt die Kartenhöhe,
   damit die Karte genauso hoch ist wie „Größenklassen“ */
/* Fördermodell steht als letzte Karte unter „Größenklassen“ und nimmt die
   ganze Breite ein – sonst bliebe die Nachbarzelle im Raster leer. */
.chart-card-donut{ grid-column:1 / -1; }
.chart-card-donut .chart-body{ display:flex; align-items:center; }
.donut-wrap{
  display:flex; align-items:center; gap:1.8rem; flex-wrap:wrap; width:100%;
}
.chart-body .donut-svg{ width:clamp(180px, 30%, 270px); height:auto; flex:none; }
.donut-wrap .legend{
  margin-top:0; flex-direction:column; align-items:flex-start; gap:.35rem;
}

.legend{ display:flex; flex-wrap:wrap; gap:.5rem 1.2rem; margin-top:1rem; }
.legend-item{ display:flex; align-items:center; gap:.45rem; font-size:.85rem; }
.legend-dot{ width:11px; height:11px; border-radius:50%; flex:none; }
.legend-val{ color:var(--muted); }

.chart-empty{ color:var(--muted); font-size:.9rem; padding:2rem 0; text-align:center; }

.chart-note{
  margin:1.2rem 0 0; padding-top:1rem; border-top:1px solid var(--line);
  font-size:.85rem; line-height:1.55; color:var(--muted);
}
/* Erläuterung rechts neben dem Ring statt darunter */
.donut-layout{ display:flex; gap:2rem; align-items:center; flex-wrap:wrap; }
.donut-layout .chart-body{ flex:1 1 300px; min-width:0; }
.chart-note-side{
  flex:1 1 340px; min-width:0;
  margin:0; padding:0 0 0 2rem;
  border-top:none; border-left:1px solid var(--line);
}
.chart-note-side p{ margin:0 0 .7rem; }
.chart-note-side p:last-child{ margin-bottom:0; }
@media (max-width:820px){
  .chart-note-side{ padding:1rem 0 0; border-left:none; border-top:1px solid var(--line); }
}

/* ---------- Tabelle ---------- */
.table-scroll{ overflow-x:auto; }
table.list{
  width:100%; border-collapse:separate; border-spacing:0 5px; font-size:.9rem;
}
table.list th{
  text-align:left; font-weight:600; font-size:.78rem; text-transform:uppercase;
  letter-spacing:.04em; color:var(--muted-strong); padding:.4rem .8rem;
  border-bottom:1px solid var(--line-strong); background:transparent;
  white-space:nowrap;
}
table.list th.sortable{ cursor:pointer; user-select:none; }
table.list th.sortable:hover{ color:var(--color-accent-text); }
table.list th .arrow{ margin-left:.3rem; opacity:.55; font-size:.7rem; }
table.list th.num, table.list td.num{ text-align:right; }
table.list td{
  background:var(--field); padding:.55rem .8rem; vertical-align:top;
}
table.list tbody tr:hover td{ background:var(--field-hover); }
table.list td:first-child{ border-radius:var(--radius) 0 0 var(--radius); }
table.list td:last-child{ border-radius:0 var(--radius) var(--radius) 0; }
.cell-nr{ color:var(--muted); width:1%; white-space:nowrap; }
.cell-num{ white-space:nowrap; font-variant-numeric:tabular-nums; }
.cell-tku{ min-width:220px; }
.badge{
  display:inline-block; border-radius:20px; padding:.2rem .7rem;
  font-size:.75rem; white-space:nowrap;
}
.badge-wilue{ background:var(--color-button); color:var(--color-text); }
.badge-bemo{ background:var(--color-highlight-purple); color:var(--color-text); }
.badge-other{ background:var(--color-line); color:var(--color-muted-strong); }
.multi-note{
  display:block; font-size:.72rem; color:var(--muted); margin-top:.15rem;
}
.empty-row td{
  background:transparent; text-align:center; color:var(--muted); padding:2rem 0;
}

/* ---------- Pagination ---------- */
.pagination{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; margin-top:1.2rem; flex-wrap:wrap;
}
.pg-size select{ width:auto; font-size:.85rem; padding:0 2rem 0 .7rem; }
.pg-range{ color:var(--muted); font-size:.85rem; }
.pg-btns{ display:flex; gap:.3rem; }
.page-btn{
  background:var(--field); border:none; border-radius:var(--radius);
  height:var(--control-h); padding:0 .7rem; line-height:1;
  display:inline-flex; align-items:center; justify-content:center;
  font:inherit; font-size:.85rem; color:var(--text); cursor:pointer;
  transition:background-color var(--transition-fast), color var(--transition-fast);
  min-width:var(--control-h);
}
.page-btn:hover:not(:disabled){ background:var(--color-accent-deep); color:var(--color-bg); }
.page-btn.is-active{
  background:var(--color-text); color:var(--color-bg);
  font-stretch:75%; font-weight:500;
}
.page-btn:disabled{ opacity:.3; cursor:default; }
.page-dots{ color:var(--muted); padding:.3rem .2rem; font-size:.85rem; }

/* ---------- Responsive ---------- */
/* Design-System Abschnitt 7: Das Logo ist auf schmalen Geräten größer (70px),
   nicht kleiner. Breakpoint wie dort bei 768px. */
@media (max-width:768px){
  /* Die Vorlage vergrößert das Logo auf schmalen Geräten (Abschnitt 7),
     skaliert die Seite aber zugleich per initial-scale=0.8 auf 80 %.
     Unsere Seite läuft ungeskaliert, deshalb sind hier überall die bereits
     mit 0,8 multiplizierten Werte eingetragen – die Leiste wirkt damit
     genauso groß wie auf dirkloop.com. */
  .icon{ width:56px; height:56px; padding:0 0 8px 4px; }     /* 70 x 0,8 */
  #logoEbene{ height:56px; padding:12px 0 20px 0; }          /* 70 / 15 / 25 */
  #logoEbene.is-top{ height:40px; padding:20px 0; }          /* 50 / 25 */
  #logoEbene.is-scrolled{ height:13px; padding:20px 0; }     /* 16 / 25 */
  .menu-container{ gap:8px; }                                /* 10 */
  .hamburger-menu{ width:20px; height:14px; padding:0 0 0 16px; }  /* 25 / 18 / 20 */
  #scrollOn{ font-size:22px; line-height:1.5; padding:0 0 0 8px; } /* 28 / 10 */
  #start-space{ height:100px; }   /* 10 oben + 56 Höhe + 32 Innenabstand */
}

@media (max-width:1100px){
  /* Sobald das vierspaltige Raster nicht mehr passt, steht jede Kachel über
     die volle Breite – auch die beiden dunklen, die oben quadratisch sind.
     Der Spaltensprung der gestapelten Kachel muss dabei zurückgenommen werden:
     „span 2" würde sonst eine zweite, implizite Spalte erzeugen und die
     Quadrate wieder nebeneinander setzen. */
  .kpi-grid{ grid-template-columns:1fr; }
  .kpi-stack{ grid-column:auto; }
  .filter-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .opt-row{ grid-template-columns:1fr; }
  .chart-grid{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  #logoEbene{ width:calc(100% - 1.5rem); }
  /* 20px weniger Luft über der Überschrift. Die Leiste endet mobil bei 98px,
     das Icon bei rund 82px – die Überschrift beginnt bei 104px. */
  #start-space{ height:80px; }
  .wrap{ width:calc(100% - 1.5rem); margin-top:1.5rem; }
  .card{ padding:1.3rem; }
  /* Die siebenspaltige Einzelvorhaben-Tabelle ist auf dem Telefon nicht
     sinnvoll lesbar – Kennzahlen und Diagramme genügen dort. */
  .card-table{ display:none; }
  .filter-grid{ grid-template-columns:1fr; }
  h1{ font-size:1.5rem; }
}