/* Finke Reporting — Oberfläche in der Finke-CI wie administration.finke-praxismarketing.de:
   Dunkelblau trägt, Gold akzentuiert, Gold nie als Text auf Weiß. Schrift Jost, lokal gehostet. */
@font-face { font-family: Jost; font-style: normal; font-weight: 300 700; font-display: swap; src: url(fonts/jost-variable-latin.woff2) format('woff2'); }

:root {
  --blau: #1b1b37;
  --blau-hell: #2e2e5c;
  --gold: #eaa319;
  --gold-hell: #f7d374;
  --hellgold: #fbefd6;
  --flaeche: #f4f4f8;
  --rahmen: #dedee6;
  --text: #333333;
  --text-leise: #5f5f6e;
  --weiss: #ffffff;
  --ok-flaeche: #e3efe6;
  --ok-text: #1d4d2b;
  --warn-flaeche: #f9e0dd;
  --warn-text: #7a1a12;
  --grau-flaeche: #ececf0;
  --breite: min(90vw, 1450px);
  --radius: 14px;
  --radius-klein: 6px;
  --schatten: 0 1px 2px rgba(27, 27, 55, .04), 0 6px 24px rgba(27, 27, 55, .06);
  --schatten-hover: 0 2px 4px rgba(27, 27, 55, .06), 0 12px 32px rgba(27, 27, 55, .10);
  /* Diagrammfarben */
  --d1: #1b1b37; --d2: #eaa319; --d3: #6b6b9a; --d4: #f7d374;
}
* { box-sizing: border-box; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: Jost, "Segoe UI", Helvetica, Arial, sans-serif; font-weight: 400; font-size: 1.0625rem; line-height: 1.5;
  color: var(--text); background: var(--flaeche); overflow-wrap: break-word; min-height: 100vh; display: flex; flex-direction: column;
}
h1, h2, h3 { color: var(--blau); font-weight: 600; line-height: 1.2; margin: 0 0 .5em; }
.h1 { font-size: 1.75rem; text-transform: uppercase; letter-spacing: .06em; margin: 0 0 .2em; }
.h1__sub { font-size: 1rem; text-transform: none; letter-spacing: 0; color: var(--text-leise); font-weight: 400; margin-left: .6rem; }
.h2 { font-size: 1.25rem; margin: 0 0 .8rem; }
.h2__sub { font-size: .95rem; color: var(--text-leise); font-weight: 400; margin-left: .5rem; }
p { margin: 0 0 1em; }
a { color: var(--blau); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--blau-hell); }
code { font-size: .9em; background: var(--grau-flaeche); padding: .1em .35em; border-radius: var(--radius-klein); overflow-wrap: anywhere; }
:focus-visible { outline: 3px solid var(--blau); outline-offset: 2px; }
.kopf :focus-visible { outline-color: var(--weiss); }
.sprung { position: absolute; left: -999px; top: 8px; background: var(--weiss); color: var(--blau); padding: 10px 16px; border-radius: var(--radius); z-index: 100; }
.sprung:focus { left: 8px; }

/* Kopfzeile */
.kopf { background: var(--blau); color: var(--weiss); position: sticky; top: 0; z-index: 40; box-shadow: 0 2px 10px rgba(19,19,73,.25); } /* Kopfzeile laeuft beim Scrollen mit (Christian 15.09.) */
.kopf__innen { max-width: var(--breite); margin: 0 auto; padding: 0 20px; display: flex; align-items: center; gap: 24px; min-height: 64px; flex-wrap: wrap; }
.marke { display: inline-flex; align-items: center; gap: 10px; color: var(--weiss); text-decoration: none; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; font-size: .95rem; min-height: 44px; }
.marke__signet { width: 26px; height: 26px; flex: none; }
.marke--gross { color: var(--blau); font-size: 1.05rem; margin-bottom: 1.25rem; }
.nav { display: flex; flex-wrap: wrap; gap: 4px; }
.nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; color: var(--weiss); text-decoration: none; border-radius: var(--radius); font-weight: 500; }
.nav a:hover { background: var(--blau-hell); color: var(--weiss); }
.nav a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--gold); }
.abmelden { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.abmelden__name { color: var(--gold-hell); font-weight: 500; }
.kopf .btn--leise { background: transparent; color: var(--weiss); border-color: rgba(255,255,255,.5); }
.kopf .btn--leise:hover { background: rgba(255,255,255,.12); border-color: var(--weiss); color: var(--weiss); }

/* Inhalt */
.inhalt { flex: 1; width: 100%; max-width: var(--breite); margin: 0 auto; padding-block: 28px 60px; padding-inline: 20px; }
.fuss { max-width: var(--breite); margin: 0 auto; width: 100%; padding: 16px 20px 28px; display: flex; justify-content: space-between; gap: 1rem; color: var(--text-leise); font-size: .95rem; flex-wrap: wrap; }
body.leer { justify-content: center; align-items: center; padding: 20px; }
.karte--zentriert { width: 100%; max-width: 440px; }
.text { margin: 0 0 .9rem; }
.text--klein { font-size: .95rem; }
.text--gedaempft { color: var(--text-leise); }
.brotkrumen { margin: 0 0 .25rem; font-size: .95rem; color: var(--text-leise); }
.brotkrumen a { text-decoration: none; }
.kopfzeile { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.erklaerung { color: var(--text-leise); font-size: .95rem; margin: -.4rem 0 .9rem; }

.karte { background: var(--weiss); border: 1px solid rgba(27, 27, 55, .07); border-radius: var(--radius); padding: 22px 24px; box-shadow: var(--schatten); margin-bottom: 20px; }
.karte--leise { background: transparent; box-shadow: none; border: 1px dashed var(--rahmen); }
.karte--hinweis { border-left: 5px solid var(--gold); }
.karte--wichtig { border: 2px solid var(--gold); background: var(--hellgold); }
.raster { display: grid; gap: 20px; margin-bottom: 20px; }
.raster--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); }
.raster .karte { margin-bottom: 0; }

.meldung { padding: 12px 16px; border-radius: var(--radius); margin-bottom: 18px; border: 1px solid transparent; }
.meldung--ok { background: var(--ok-flaeche); color: var(--ok-text); border-color: #c5dccc; }
.meldung--fehler { background: var(--hellgold); color: var(--blau); border-color: var(--gold-hell); font-weight: 500; }
.meldung--hinweis { background: var(--flaeche); color: var(--blau); border-color: var(--rahmen); }

/* Reiter, Chips, Status */
.tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--rahmen); }
.tabs a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; text-decoration: none; font-weight: 500; color: var(--text-leise); border-bottom: 3px solid transparent; margin-bottom: -1px; }
.tabs a:hover { color: var(--blau); }
.tabs a[aria-current="page"] { color: var(--blau); border-bottom-color: var(--gold); }
/* Grosse Reiter: Pillen-Leiste */
.tabs--gross { margin-bottom: 20px; border: 0; gap: 6px; padding: 6px; background: var(--weiss); border-radius: 999px; box-shadow: var(--schatten); width: max-content; max-width: 100%; }
.tabs--gross a { border-radius: 999px; border-bottom: 0; margin: 0; min-height: 40px; padding: 0 16px; }
.tabs--gross a:hover { background: var(--flaeche); }
.tabs--gross a[aria-current="page"] { background: var(--blau); color: var(--weiss); }
.chip { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--rahmen); background: var(--weiss); text-decoration: none; font-size: .95rem; color: var(--text); font-weight: 500; }
.chip:hover { border-color: var(--blau); color: var(--blau); }
.chip--aktiv { background: var(--blau); color: var(--weiss); border-color: var(--blau); }
.chip--aktiv:hover { color: var(--weiss); }
.status { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .9rem; font-weight: 500; white-space: nowrap; background: var(--grau-flaeche); color: #4a4a5a; }
.status--ok { background: var(--ok-flaeche); color: var(--ok-text); }
.status--warn { background: var(--hellgold); color: var(--blau); }

/* Zeitraum */
.zeitraum { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; }
.zeitraum__presets { display: flex; gap: 6px; flex-wrap: wrap; }
.zeitraum__frei { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-left: auto; font-size: .95rem; color: var(--text-leise); }
.zeitraum__frei input { margin-left: .3rem; font: inherit; padding: 6px 10px; min-height: 40px; border: 1px solid #b8b8c8; border-radius: var(--radius); background: var(--weiss); }

/* Kacheln */
.kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 8px; }
.kachel { position: relative; overflow: hidden; background: var(--weiss); border: 1px solid rgba(27, 27, 55, .07); border-radius: var(--radius); padding: 18px 20px 16px; box-shadow: var(--schatten); display: flex; flex-direction: column; gap: 4px; min-height: 118px; transition: box-shadow .15s ease, transform .15s ease; }
.kachel:hover { box-shadow: var(--schatten-hover); }
.kachel--akzent { border-left: 5px solid var(--gold); }
.kachel--spark { padding-bottom: 34px; }
.kachel__label { color: var(--text-leise); font-size: .9rem; letter-spacing: .01em; }
.kachel__wert { font-size: 2rem; font-weight: 600; color: var(--blau); line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.kachel__wert--klein { font-size: 1.45rem; }
.kachel__delta { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.kachel__hilfe { color: var(--text-leise); font-size: .82rem; line-height: 1.3; margin-top: 2px; }
.kachel__spark { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 30px; display: block; pointer-events: none; }
.spark__flaeche { fill: rgba(234, 163, 25, .16); }
.spark__linie { fill: none; stroke: var(--gold); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.delta { display: inline-flex; align-items: center; font-size: .82rem; font-weight: 600; color: var(--text-leise); font-variant-numeric: tabular-nums; padding: 2px 8px; border-radius: 999px; background: var(--grau-flaeche); line-height: 1.3; }
.delta--plus { color: var(--ok-text); background: var(--ok-flaeche); }
.delta--minus { color: var(--warn-text); background: var(--warn-flaeche); }
.tabelle .delta { padding: 1px 6px; }

/* Diagramm */
.diagramm { position: relative; height: 300px; }
.diagramm--klein { height: 220px; }
@media (max-width: 600px) { .diagramm { height: 230px; } }

/* Tabellen */
.tabelle__scroll { overflow-x: auto; }
.tabelle { width: 100%; border-collapse: collapse; font-size: 1rem; }
.tabelle th, .tabelle td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--rahmen); vertical-align: top; }
.tabelle th { background: var(--flaeche); color: var(--blau); font-weight: 600; font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; border-bottom: 2px solid var(--rahmen); }
.tabelle tbody tr:hover { background: #fbfbfd; }
.tabelle td { font-size: .98rem; }
.tabelle tbody tr:last-child td { border-bottom: 0; }
.tabelle .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabelle--klick tbody tr:hover { background: var(--hellgold); }
.zeile__link { font-weight: 500; text-decoration: none; }
.zeile--warn td { background: var(--warn-flaeche) !important; }
.nowrap { white-space: nowrap; }
.pfad { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .88em; color: var(--text-leise); word-break: break-all; }
.aktionen { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.aktionen form { display: inline; }
.leiste { display: inline-block; height: 8px; background: var(--blau); border-radius: 999px; vertical-align: middle; max-width: 100%; }
.leiste--gold { background: var(--gold); }

/* Balken */
.balken { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.balken li { display: grid; grid-template-columns: 120px 1fr 60px; align-items: center; gap: 10px; font-size: .95rem; }
.balken__leiste { height: 10px; background: var(--grau-flaeche); border-radius: 999px; overflow: hidden; }
.balken__fuell { display: block; height: 100%; background: var(--blau); border-radius: 999px; }
.balken__wert { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-leise); }
.quellen { margin: 0; padding-left: 1.1rem; font-size: .95rem; color: var(--text-leise); }

/* Formulare */
.formular { display: grid; gap: 14px; }
.formular label { display: grid; gap: 6px; font-weight: 500; color: var(--blau); }
.formular label.check { grid-template-columns: auto 1fr; align-items: center; gap: 10px; font-weight: 400; color: var(--text); }
.formular label.check input { width: 22px; height: 22px; margin: 0; accent-color: var(--blau); }
.formular input:not([type="checkbox"]), .formular select {
  width: 100%; max-width: 100%; font: inherit; font-weight: 400; padding: 10px 12px; min-height: 44px;
  border: 1px solid #b8b8c8; border-radius: var(--radius); background: var(--weiss); color: var(--text); min-width: 0;
}
.formular input:focus, .formular select:focus { border-color: var(--blau); outline: 3px solid var(--gold-hell); outline-offset: 0; }
.formular--zeile { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); align-items: end; }
.formular--zeile .breit { grid-column: 1 / -1; }
.formular--zeile .btn { justify-self: start; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px 20px; border-radius: var(--radius);
  background: var(--weiss); color: var(--blau); border: 2px solid var(--blau); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; line-height: 1.2;
}
.btn:hover { background: var(--flaeche); color: var(--blau); }
.btn--primaer { background: var(--blau); color: var(--weiss); }
.btn--primaer:hover { background: var(--blau-hell); border-color: var(--blau-hell); color: var(--weiss); }
.btn--gold { background: var(--gold); border-color: var(--gold); color: var(--blau); }
.btn--gold:hover { background: var(--gold-hell); border-color: var(--gold-hell); color: var(--blau); }
.btn--leise { border-width: 1px; border-color: var(--rahmen); font-weight: 500; min-height: 40px; padding: 4px 14px; font-size: .95rem; }
.btn--breit { width: 100%; }
.dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 20px; margin: 0 0 12px; }
.dl dt { color: var(--text-leise); }
.dl dd { margin: 0; font-weight: 500; color: var(--blau); }
.kopierbar { cursor: copy; }
.kopierbar.kopiert { outline: 2px solid var(--ok-text); }
.qr { width: 180px; height: 180px; margin: 0 0 12px; background: #fff; padding: 8px; border: 1px solid var(--rahmen); border-radius: var(--radius); }
.qr img, .qr canvas { display: block; width: 100% !important; height: 100% !important; }

@media (max-width: 720px) {
  .kopf__innen { gap: 10px; padding-block: 6px; }
  .abmelden__name { display: none; }
  .zeitraum__frei { margin-left: 0; }
  .balken li { grid-template-columns: 96px 1fr 54px; }
  .h1 { font-size: 1.4rem; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

.aktualisieren { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: -6px 0 12px; }
.aktualisieren form { margin: 0; }
.aktualisieren__knoepfe { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }

/* Berichts-Baukasten */
.editor { display: grid; grid-template-columns: minmax(260px, 340px) 1fr; gap: 20px; align-items: start; }
@media (max-width: 900px) { .editor { grid-template-columns: 1fr; } }
.editor-kopf { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; align-items: end; margin-bottom: 16px; }
.editor__palette { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow: auto; }
.editor__palette input[type="search"] { width: 100%; font: inherit; padding: 8px 10px; min-height: 40px; border: 1px solid #b8b8c8; border-radius: var(--radius); margin-bottom: 8px; }
.editor__gruppe { font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-leise); margin: 14px 0 6px; }
.palette { list-style: none; margin: 0; padding: 0; }
.palette__item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--rahmen); border-radius: var(--radius-klein); margin-bottom: 4px; background: var(--weiss); cursor: grab; font-size: .95rem; }
.palette__item:active { cursor: grabbing; }
.palette__typ { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--blau); background: var(--hellgold); padding: 1px 6px; border-radius: 999px; white-space: nowrap; }
.palette__plus { margin-left: auto; min-width: 32px; min-height: 32px; border: 1px solid var(--blau); background: var(--weiss); color: var(--blau); border-radius: var(--radius-klein); font-weight: 700; cursor: pointer; }
.palette__plus:hover { background: var(--blau); color: var(--weiss); }
.editor__canvas { min-height: 300px; border: 2px dashed var(--rahmen); border-radius: var(--radius); padding: 12px; background: var(--flaeche); }
.canvas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.canvas__item { grid-column: span 2; background: var(--weiss); border: 1px solid var(--rahmen); border-radius: var(--radius); padding: 10px 12px; cursor: grab; }
.canvas__item--2 { grid-column: span 3; } .canvas__item--3 { grid-column: span 6; }
.canvas__item--s1 { grid-column: span 2; } .canvas__item--s2 { grid-column: span 2; } .canvas__item--s3 { grid-column: span 3; } .canvas__item--s4 { grid-column: span 4; } .canvas__item--s5 { grid-column: span 5; } .canvas__item--s6 { grid-column: span 6; }
@media (max-width: 720px) { .canvas__item, .canvas__item--2, .canvas__item--3 { grid-column: span 6; } }
.canvas__kopf { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.canvas__griff { color: var(--text-leise); cursor: grab; }
.canvas__aktionen { margin-left: auto; display: flex; gap: 4px; }
.canvas__aktionen button { min-width: 32px; min-height: 32px; border: 1px solid var(--rahmen); background: var(--weiss); border-radius: var(--radius-klein); cursor: pointer; }
.canvas__aktionen button:hover { border-color: var(--blau); }
.canvas__felder { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.canvas__felder label { display: grid; gap: 4px; font-size: .85rem; color: var(--text-leise); }
.canvas__felder input, .canvas__felder select { font: inherit; font-size: .95rem; padding: 6px 8px; min-height: 36px; border: 1px solid #b8b8c8; border-radius: var(--radius-klein); }
.canvas__leer { padding: 24px; text-align: center; }
/* Berichtsansicht */
.bericht-raster { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
.bericht-zelle--1 { grid-column: span 2; } .bericht-zelle--2 { grid-column: span 3; } .bericht-zelle--3 { grid-column: span 6; }
.bericht-zelle--s1 { grid-column: span 1; } .bericht-zelle--s2 { grid-column: span 2; } .bericht-zelle--s3 { grid-column: span 3; } .bericht-zelle--s4 { grid-column: span 4; } .bericht-zelle--s5 { grid-column: span 5; } .bericht-zelle--s6 { grid-column: span 6; }
@media (max-width: 1100px) { .bericht-zelle--s1 { grid-column: span 2; } .bericht-zelle--s4, .bericht-zelle--s5 { grid-column: span 6; } }
@media (max-width: 900px) { .bericht-zelle--1, .bericht-zelle--s1, .bericht-zelle--s2 { grid-column: span 3; } }
@media (max-width: 600px) { .bericht-zelle--1, .bericht-zelle--2, .bericht-zelle--3, .bericht-zelle--s1, .bericht-zelle--s2, .bericht-zelle--s3 { grid-column: span 6; } }
.bericht-zelle { min-width: 0; }
.bericht-zelle .karte { margin-bottom: 0; height: 100%; }
.bericht-zelle .kachel { height: 100%; }
.vergleich { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 4px 0; }
.vergleich__wert { display: block; font-size: 1.4rem; font-weight: 600; color: var(--blau); font-variant-numeric: tabular-nums; }
.vergleich__label { display: block; font-size: .82rem; color: var(--text-leise); }

/* Reiter anpassen */
.anpassen [data-sektion] { outline: 2px dashed var(--gold); outline-offset: 4px; position: relative; }
.sektion-steuer { display: flex; gap: 6px; align-items: center; justify-content: flex-end; font-size: .85rem; color: var(--text-leise); margin-bottom: 8px; }
.sektion-steuer button { min-width: 34px; min-height: 32px; border: 1px solid var(--rahmen); background: var(--weiss); border-radius: var(--radius-klein); cursor: pointer; }
.sektion--versteckt { opacity: .45; }

/* Anteilsbalken in Tabellen */
.anteil { display: inline-flex; align-items: center; gap: 8px; min-width: 120px; }
.anteil__leiste { display: inline-block; height: 8px; background: var(--blau); border-radius: 999px; max-width: 100px; min-width: 2px; flex: none; }
.anteil__wert { color: var(--text-leise); font-size: .9rem; font-variant-numeric: tabular-nums; }

/* Reiter anpassen (Bearbeitungsmodus) */
.reiter-editor__kopf { display: flex; justify-content: space-between; gap: 16px; align-items: center; flex-wrap: wrap; }
.bericht-raster--edit .bericht-zelle { outline: 2px dashed rgba(234, 163, 25, .7); outline-offset: 4px; border-radius: var(--radius); cursor: grab; position: relative; }
.bericht-raster--edit .bericht-zelle:active { cursor: grabbing; }
.zelle--zieht { opacity: .45; }
.zelle--ziel { outline: 3px solid var(--blau) !important; }
.zelle-werkzeuge { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: end; background: var(--hellgold); border: 1px solid var(--gold-hell); border-radius: var(--radius-klein); padding: 8px 10px; margin-bottom: 8px; font-size: .82rem; color: var(--blau); }
.zelle-werkzeuge label { display: grid; gap: 2px; font-weight: 500; }
.zelle-werkzeuge select, .zelle-werkzeuge input { font: inherit; font-size: .9rem; padding: 4px 6px; min-height: 32px; border: 1px solid #b8b8c8; border-radius: var(--radius-klein); background: var(--weiss); max-width: 190px; }
.zelle-griff { cursor: grab; font-size: 1.1rem; color: var(--text-leise); align-self: center; padding: 0 4px; }
.zelle-weg { margin-left: auto; min-width: 32px; min-height: 32px; border: 1px solid var(--blau); background: var(--weiss); color: var(--blau); border-radius: var(--radius-klein); cursor: pointer; align-self: center; }
.zelle-weg:hover { background: var(--warn-flaeche); border-color: var(--warn-text); color: var(--warn-text); }
.reiter-palette input[type="search"] { width: 100%; max-width: 420px; font: inherit; padding: 8px 10px; min-height: 40px; border: 1px solid #b8b8c8; border-radius: var(--radius-klein); margin-bottom: 8px; }
.reiter-palette__spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 8px 20px; }
.reiter-palette .palette__item { cursor: grab; }

/* KI-Assistent */
.ki-antwort { background: var(--flaeche); border-left: 4px solid var(--gold); border-radius: var(--radius-klein); padding: 14px 18px; white-space: pre-wrap; }
.ki-frage { font-weight: 600; color: var(--blau); margin: 0 0 6px; }
.ki-verlauf { display: grid; gap: 14px; }
.ki-verlauf__eintrag { border-top: 1px solid var(--rahmen); padding-top: 12px; }
.ki-verlauf__meta { color: var(--text-leise); font-size: .85rem; }
.formular textarea { width: 100%; font: inherit; padding: 10px 12px; border: 1px solid #b8b8c8; border-radius: var(--radius-klein); background: var(--weiss); min-height: 96px; resize: vertical; }
.formular textarea:focus { border-color: var(--blau); outline: 3px solid var(--gold-hell); outline-offset: 0; }
.schalter { display: inline-flex; align-items: center; gap: 10px; }

/* Pop-up beim Hover ueber ein Verlaufs-Diagramm */
.karte--hover { cursor: zoom-in; }
.popup-chart { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(96vw, 1040px); max-height: 92vh; overflow: auto; background: var(--weiss); border-radius: var(--radius); box-shadow: 0 24px 80px rgba(27, 27, 55, .28), 0 0 0 1px rgba(27, 27, 55, .08); padding: 22px 26px; z-index: 900; }
.popup-chart__kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.popup-chart__kopf .h2 { margin: 0; }
.popup-chart__diagramm { position: relative; height: min(52vh, 460px); }
.popup-chart__kennzahlen { display: grid; gap: 8px; margin-top: 14px; }
.popup-chart__reihe { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; font-size: .95rem; color: var(--text-leise); border-top: 1px solid var(--rahmen); padding-top: 8px; }
.popup-chart__reihe strong { color: var(--blau); min-width: 180px; }
.popup-chart__reihe b { color: var(--blau); font-weight: 600; font-variant-numeric: tabular-nums; }
/* Griff zum Ziehen der Breite (Bearbeitungsmodus) */
.zelle-resize { position: absolute; top: 0; right: -6px; width: 12px; height: 100%; cursor: ew-resize; z-index: 2; }
.zelle-resize::after { content: ''; position: absolute; top: 50%; left: 4px; width: 4px; height: 44px; margin-top: -22px; border-radius: 999px; background: var(--gold); opacity: .8; }
.zelle-resize:hover::after, .zelle--resize .zelle-resize::after { background: var(--blau); opacity: 1; }
.zelle--resize { outline-color: var(--blau) !important; }
.zelle-frei { display: inline-flex; gap: 8px; }
.kachel__vgl { font-size: .78rem; color: var(--text-leise); }

/* Google-Rezensionen (Places): Liste der juengsten Bewertungen */
.rezensionen { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rezension { border: 1px solid var(--rahmen); border-radius: 8px; padding: 10px 14px; background: var(--weiss); }
.rezension__kopf { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; font-size: .92rem; }
.rezension__sterne { color: var(--gold); letter-spacing: 1px; white-space: nowrap; }
.rezension__leer { color: var(--rahmen); }
.rezension__text { margin: 6px 0 0; font-size: .92rem; line-height: 1.45; color: var(--text); overflow-wrap: break-word; }

/* ---- Sticky Reiter-Menue (Christian 15.09.) ---- */
.tabs--gross { position: sticky; top: 72px; z-index: 30; } /* unter der festen Kopfzeile (64 px + Abstand) */
/* ---- Quelle je Baustein ---- */
.kachel__quelle { display: inline-block; margin-top: 6px; font-size: .72rem; letter-spacing: .02em; text-transform: uppercase; color: var(--text-leise); background: var(--flaeche); border-radius: 999px; padding: 2px 8px; align-self: flex-start; }
/* ---- Kennzahl direkt am Baustein wechseln (Zahnrad beim Ueberfahren) ---- */
.bericht-zelle { position: relative; }
.zelle-zahnrad { position: absolute; top: 8px; right: 8px; z-index: 5; width: 30px; height: 30px; border-radius: 999px; border: 1px solid var(--rahmen); background: var(--weiss); color: var(--blau); cursor: pointer; opacity: 0; transition: opacity .15s; font-size: 15px; line-height: 1; }
.bericht-zelle:hover .zelle-zahnrad, .zelle-zahnrad:focus-visible, .bericht-zelle.zelle--offen .zelle-zahnrad { opacity: 1; }
.zelle-zahnrad:hover { background: var(--hellgold); border-color: var(--gold-hell); }
.zelle-schnell { position: absolute; top: 42px; right: 8px; z-index: 6; display: grid; gap: 6px; min-width: 260px; max-width: calc(100% - 16px); background: var(--weiss); border: 1px solid var(--gold-hell); border-radius: var(--radius-klein); box-shadow: var(--schatten); padding: 10px 12px; font-size: .82rem; color: var(--blau); }
.zelle-schnell label { display: grid; gap: 3px; }
.zelle-schnell select { width: 100%; max-width: 100%; }
/* ---- Kompakte Tabellen: 5 Zeilen, sortierbar, alle anzeigen ---- */
.tabelle[data-kompakt] th.sortierbar { cursor: pointer; user-select: none; white-space: nowrap; }
.tabelle[data-kompakt] th.sortierbar::after { content: "↕"; margin-left: 4px; color: var(--text-leise); font-size: .8em; }
.tabelle[data-kompakt] th.sortiert-auf::after { content: "▲"; color: var(--blau); }
.tabelle[data-kompakt] th.sortiert-ab::after { content: "▼"; color: var(--blau); }
.tabelle[data-kompakt] tr.zeile--versteckt { display: none; }
.tabelle-mehr { margin: 8px 0 2px; }
.tabelle-filter { display: block; width: 100%; max-width: 320px; margin: 0 0 8px; padding: 6px 10px; font: inherit; font-size: .9rem; border: 1px solid var(--rahmen); border-radius: 6px; background: var(--weiss); color: var(--text); }
.tabelle-filter:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.fokus-vorschlag .quelle-tag { display: inline-block; margin-right: 3px; }
.arten { white-space: normal; font-size: .88rem; min-width: 14ch; display: inline-block; }
.tabelle-sterne { display: inline-block; margin: 0 8px 8px 0; padding: 6px 10px; font: inherit; font-size: .9rem; border: 1px solid var(--rahmen); border-radius: 6px; background: var(--weiss); color: var(--text); }
.tabelle-sterne + .tabelle-filter { display: inline-block; vertical-align: top; }
.tabelle-leer { margin: 6px 0; }
.index-antrag__leiste { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 8px; }
.zelle-spalten { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 6px 0 0; padding: 6px 8px; border: 1px solid var(--rahmen); border-radius: 6px; }
.zelle-spalten legend { font-size: .8rem; color: var(--text-leise); padding: 0 4px; }
.zelle-spalten label { font-size: .85rem; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
/* Rezensionen: voller Text, Antwort, Antwortformular (Admin) */
.rezension__text, .rezension__antwort { min-width: 28ch; max-width: 70ch; white-space: normal; font-size: .92rem; line-height: 1.45; }
.rezension__antwort { margin-top: 6px; padding: 6px 8px; border-left: 3px solid var(--gold); background: var(--hellgold); color: var(--blau); }
.rezension__aktionen { display: flex; flex-direction: column; gap: 6px; min-width: 200px; }
.rezension__aktionen a { white-space: nowrap; }
.btn--klein { padding: 4px 10px; font-size: .85rem; }
.rezension__form summary { display: inline-block; list-style: none; cursor: pointer; }
.rezension__form summary::-webkit-details-marker { display: none; }
.rezension__form form { display: grid; gap: 6px; margin-top: 8px; }
.rezension__form textarea { width: 100%; min-width: 260px; font: inherit; font-size: .9rem; padding: 6px 8px; border: 1px solid var(--rahmen); border-radius: 6px; resize: vertical; }
/* ---- Auto-Aktualisierung beim Oeffnen ---- */
.auto-lade { display: inline-flex; align-items: center; gap: 6px; }
.auto-lade::before { content: ""; width: 10px; height: 10px; border-radius: 999px; border: 2px solid var(--gold); border-top-color: transparent; animation: auto-dreh .8s linear infinite; }
@keyframes auto-dreh { to { transform: rotate(360deg); } }
.zelle-schnell[hidden] { display: none; }
.bericht-zelle--s1 .zelle-schnell, .bericht-zelle--s2 .zelle-schnell { left: 0; right: auto; }

/* ---- Kundensicht (Admin sieht den Hub wie ein Kunde) ---- */
.kundensicht { position: sticky; top: 64px; z-index: 35; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; background: var(--hellgold); border-bottom: 2px solid var(--gold); color: var(--blau); padding: 8px 20px; font-size: .9rem; }
.kundensicht form { margin: 0; }
.kopfzeile__rechts { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.kopfzeile__rechts form { margin: 0; }
.kundensicht ~ main .tabs--gross { top: 122px; } /* Reiterleiste unter dem Kundensicht-Banner */
.quelle-tag { display: inline-block; font-size: .72rem; letter-spacing: .02em; text-transform: uppercase; color: var(--blau); background: var(--hellgold); border: 1px solid var(--gold-hell); border-radius: 999px; padding: 1px 8px; margin-left: 6px; vertical-align: middle; }
.tabs--gross a { padding: 0 12px; font-size: .95rem; } /* zehn Reiter in einer Zeile */

/* Lead-Verlauf (Website-Tracking → Anfrage → Verlauf ansehen), 15.09.2026 */
.raster--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.verlauf { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.verlauf__schritt { position: relative; padding: 12px 16px 12px 28px; border: 1px solid var(--rahmen); border-radius: var(--radius); display: grid; gap: 3px; }
.verlauf__schritt::before { content: ''; position: absolute; left: 11px; top: 17px; width: 9px; height: 9px; border-radius: 50%; background: var(--rahmen); }
.verlauf__schritt--start::before { background: var(--gold); }
.verlauf__schritt--ende { border-color: var(--blau); }
.verlauf__schritt--ende::before { background: var(--blau); }
.verlauf__etikett { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-leise); }
.verlauf .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.verlauf .chip { min-height: 28px; padding: 0 10px; font-size: .82rem; font-weight: 400; }

/* Verwaltung › Stammdaten: Kontoauswahl per API (17.09.) — Knopf unter dem Feld, Auswahlliste erscheint darunter */
.formular label .konto-wahl { display: grid; gap: 6px; justify-items: start; }
.formular label .konto-wahl select { width: 100%; font-weight: 400; }