/* 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(100vw, 1750px);   /* Christian 20.09.2026: wie die Verwaltung */
  --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; }

/* Kundenübersicht (Christian 17.09.2026): Tabellenkopf bleibt unter der Kopfzeile stehen, Werkzeug-Kürzel, Auffälligkeiten */
/* Falle (17.09.): in einem overflow-x:auto-Container klebt sticky am Container, nicht am Fenster – der Kopf hing 64 px unter der
   Tabellenoberkante und verdeckte die erste Zeile. Deshalb hier kein Scroll-Container; die Tabelle darf umbrechen. */
.tabelle__scroll--frei { overflow: visible; }
.tabelle--kopf-fest thead th { position: sticky; top: 64px; z-index: 5; box-shadow: 0 2px 0 var(--rahmen); }
.tabelle--kopf-fest td { white-space: normal; }
.werkzeuge { white-space: nowrap; }
.werkzeug { display: inline-block; min-width: 30px; text-align: center; padding: 2px 5px; margin-right: 3px; border-radius: 4px; font-size: .75rem; font-weight: 600; letter-spacing: .02em; }
.werkzeug--an { background: var(--ok-flaeche); color: var(--ok-text); }
.werkzeug--aus { background: var(--grau-flaeche); color: #9a9aa8; text-decoration: line-through; }
.auffaellig .status { display: block; width: max-content; max-width: 260px; white-space: normal; margin: 2px 0; }
.auffaellig .status--link { text-decoration: none; cursor: pointer; }
.auffaellig .status--link:hover { background: var(--gold); }

/* Fotos fürs Unternehmensprofil (17.09.): dritte Stufe „alt“ / Fehler */
.status--fehler { background: #f6dcdc; color: #7a1f1f; }

/* Fokus-Keywords-Seite (17.09.2026) */
.keywords-tabelle td { vertical-align: middle; }
.keywords-tabelle input[type="text"] { padding: 4px 8px; min-height: 32px; font-size: .95rem; }
.keywords-kunde { background: var(--flaeche); min-width: 180px; }
.keywords-neu td { border-bottom: 3px solid var(--rahmen); }

/* Kundensuche mit Vorschlägen (17.09.2026) */
.kundensuche__liste { position: absolute; left: 0; right: 0; top: 100%; margin: 4px 0 0; padding: 4px 0; list-style: none; background: var(--weiss); border: 1px solid var(--rahmen); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(19,19,73,.12); z-index: 30; max-height: 320px; overflow: auto; }
.kundensuche__liste li { padding: 8px 14px; cursor: pointer; }
.kundensuche__liste li:hover, .kundensuche__liste li[aria-selected="true"] { background: var(--flaeche); }

/* Google-Ergebnisse je Fokus-Keyword (17.09.2026) */
ol.serp { margin: 0; padding-left: 1.4em; font-size: .9rem; line-height: 1.35; }
ol.serp .serp__eigen { font-weight: 700; color: var(--blau); background: var(--hellgold); border-radius: 4px; padding: 0 4px; }
ol.serp .serp__fehlt { list-style: none; margin-left: -1.4em; color: var(--text-leise); font-style: italic; }

/* Drag & Drop-Zone fuer Bild-Uploads (17.09.2026) */
.dropzone { margin: .5rem 0 1rem; padding: 1.4rem 1rem; border: 2px dashed var(--rahmen, #cfd4dc); border-radius: 10px; text-align: center; cursor: pointer; background: var(--flaeche, #f7f8fa); transition: border-color .15s, background .15s; }
.dropzone:hover, .dropzone:focus-visible { border-color: var(--gold); outline: none; }
.dropzone--aktiv { border-color: var(--gold); background: #fbefd6; }

/* Upload-Sperre mit Fortschritt (17.09.2026) */
.upload-deckel { position: fixed; inset: 0; z-index: 1000; background: rgba(27, 27, 55, .55); display: flex; align-items: center; justify-content: center; padding: 16px; }
.upload-karte { background: #fff; border-radius: 12px; padding: 28px 32px; width: min(420px, 100%); text-align: center; box-shadow: 0 12px 40px rgba(0, 0, 0, .25); }
.upload-kreis { width: 44px; height: 44px; margin: 0 auto 14px; border-radius: 50%; border: 4px solid var(--flaeche); border-top-color: var(--gold); animation: upload-drehen .9s linear infinite; }
@keyframes upload-drehen { to { transform: rotate(360deg); } }
.upload-text { margin: 0 0 12px; }
.upload-balken { height: 8px; border-radius: 4px; background: var(--flaeche); overflow: hidden; }
.upload-balken__fuellung { height: 100%; background: linear-gradient(90deg, var(--gold-hell), var(--gold)); transition: width .2s; }
@media (prefers-reduced-motion: reduce) { .upload-kreis { animation: none; } }

.zeile--geloescht td { opacity: .6; text-decoration: line-through; } .zeile--geloescht td:last-child, .zeile--geloescht td:nth-last-child(2) { text-decoration: none; }

/* Kundensuche in der Kopfzeile (18.09.2026) */
.kundensuche--kopf { position: relative; margin-left: auto; min-width: 200px; max-width: 280px; flex: 1 1 200px; }
.kundensuche--kopf input[type="search"] { width: 100%; min-height: 36px; padding: 4px 12px; border: 1px solid rgba(255,255,255,.35); border-radius: var(--radius); background: rgba(255,255,255,.12); color: var(--weiss); font: inherit; }
.kundensuche--kopf input[type="search"]::placeholder { color: rgba(255,255,255,.7); }
.kundensuche--kopf input[type="search"]:focus { outline: none; background: var(--weiss); color: var(--text); border-color: var(--gold); }
.kundensuche--kopf .kundensuche__liste { color: var(--text); min-width: 320px; right: auto; }
@media (max-width: 720px) { .kundensuche--kopf { order: 9; flex-basis: 100%; max-width: none; margin: 0 0 8px; } }

/* Alle Tabellenköpfe kleben beim Scrollen unter der Kopfzeile (Christian 18.09.). Auf breiten Bildschirmen darf der
   Scroll-Container nicht mehr überlaufen (sticky klebt sonst am Container statt am Fenster – Falle vom 17.09.);
   auf schmalen Bildschirmen bleibt der Seitwärts-Scroll und der Kopf klebt dort nicht. */
:root { --klebe-oben: 64px; }
body.mit-reitern { --klebe-oben: 132px; } /* Kopfzeile 64 + Reiterleiste (sticky ab 72 px, 52 px hoch) + Luft */
@media (min-width: 900px) {
  .tabelle__scroll { overflow: visible; }
  .tabelle thead th { position: sticky; top: var(--klebe-oben); z-index: 5; box-shadow: 0 2px 0 var(--rahmen); }
}
/* Tabellen ohne Karte drumherum (Kundenliste, Keywords, Bilder) lagen auf der grauen Seitenfläche – Zeilen wieder weiß (Christian 18.09.) */
.tabelle tbody { background: var(--weiss); }

/* Akquise-Check: Stichpunktlisten (18.09.2026) */
.liste { margin: 6px 0 0 1.2em; padding: 0; line-height: 1.5; }
.liste li { margin: 0 0 6px; }

/* Login: unauffälliger Team-Einstieg (Microsoft-Zeichen) rechts unten in der Karte, 44-px-Klickfläche (18.09.2026) */
.karte--zentriert { position: relative; }
.team-einstieg { position: absolute; right: 6px; bottom: 6px; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; opacity: .35; border-radius: var(--radius); }
.team-einstieg:hover, .team-einstieg:focus-visible { opacity: 1; background: var(--flaeche); }

/* Kopfzeile auf schmalen Bildschirmen: Burger statt neun Menüpunkte (Christian 19.09.2026: „1/3 des Bildschirms belegt") */
.burger { display: none; width: 44px; height: 44px; padding: 10px; border: 0; background: transparent; cursor: pointer; flex-direction: column; justify-content: center; gap: 5px; border-radius: var(--radius); margin-left: auto; }
.burger__balken { display: block; height: 2px; width: 22px; background: var(--weiss); border-radius: 2px; transition: transform .15s ease, opacity .15s ease; }
.burger:hover, .burger:focus-visible { background: var(--blau-hell); }
.burger[aria-expanded="true"] .burger__balken:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__balken:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] .burger__balken:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.tabs__aktuell { display: none; }
.tabs__liste { display: contents; }
@media (max-width: 900px) {
  .kopf__innen { gap: 8px; }
  .burger { display: flex; order: 2; }
  .abmelden { order: 3; margin-left: 0; }
  .nav { order: 10; flex-basis: 100%; flex-direction: column; gap: 0; display: none; padding: 4px 0 8px; border-top: 1px solid rgba(255,255,255,.15); }
  .nav.offen { display: flex; }
  .nav a { min-height: 44px; border-radius: 0; }
  .nav a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--gold); }
  .kundensuche--kopf { order: 4; flex-basis: 100%; max-width: none; margin: 0 0 6px; }
  /* Reiterleiste einklappbar: nur der aktive Reiter sichtbar, Tipp öffnet die Liste */
  .tabs--gross { width: 100%; padding: 0; border-radius: var(--radius); flex-direction: column; gap: 0; }
  .tabs__aktuell { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 44px; padding: 0 16px; border: 0; background: var(--blau); color: var(--weiss); font: inherit; font-weight: 600; border-radius: var(--radius); cursor: pointer; }
  .tabs__aktuell[aria-expanded="true"] { border-radius: var(--radius) var(--radius) 0 0; }
  .tabs__aktuell[aria-expanded="true"] .tabs__pfeil { transform: rotate(180deg); }
  .tabs__liste { display: none; flex-direction: column; padding: 4px; }
  .tabs__liste.offen { display: flex; }
  .tabs--gross .tabs__liste a { border-radius: var(--radius-klein, 6px); min-height: 44px; }
  body.mit-reitern { --klebe-oben: 116px; }
}

/* Verwaltungs-Reiter (Christian 19.09.): links Stammdaten, rechts KI-Assistent über Datenquellen – beides über zwei Spaltenbreiten */
.raster--stammdaten { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); align-items: start; }
.raster__rechts { display: grid; gap: 20px; min-width: 0; }
@media (max-width: 900px) { .raster--stammdaten { grid-template-columns: 1fr; } }

/* Cockpit (Christian 20.09.2026): Ampel-Zeile + große Kennzahl-Kacheln mit Trend und Sparkline */
.cockpit { margin-bottom: 22px; }
.cockpit__kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; font-size: 1.05rem; color: var(--blau); }
.ampel { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: var(--grau-flaeche); box-shadow: 0 0 0 3px rgba(27,27,55,.06); flex: none; }
.ampel--gruen { background: #2e9e5b; box-shadow: 0 0 0 3px rgba(46,158,91,.18); }
.ampel--gelb { background: var(--gold); box-shadow: 0 0 0 3px rgba(234,163,25,.22); }
.ampel--rot { background: #c8362a; box-shadow: 0 0 0 3px rgba(200,54,42,.18); }
.ampel--klein { width: 10px; height: 10px; box-shadow: none; }
.cockpit__kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.kachel--cockpit { min-height: 150px; padding-top: 20px; border-top: 4px solid var(--rahmen); }
.kachel--cockpit .kachel__wert { font-size: 2.35rem; }
.kachel--cockpit.kachel--spark { padding-bottom: 40px; }
.kachel--ampel-gruen { border-top-color: #2e9e5b; }
.kachel--ampel-gelb { border-top-color: var(--gold); }
.kachel--ampel-rot { border-top-color: #c8362a; background: linear-gradient(180deg, rgba(200,54,42,.05), transparent 40%), var(--weiss); }
.kachel__zusatz { font-size: .85rem; font-weight: 400; color: var(--text-leise); letter-spacing: 0; }
.kachel__vgl { font-size: .82rem; color: var(--text-leise); }
.kachel__quelle { position: absolute; top: 8px; right: 12px; font-size: .7rem; color: var(--text-leise); opacity: .7; }
.monatssatz { margin: 4px 0 0; padding: 6px 12px; display: inline-block; background: var(--hellgold); border-radius: 999px; font-size: .95rem; color: var(--blau); cursor: copy; }
.monatssatz.kopiert { outline: 2px solid var(--ok-text); }
/* Kundensicht vereinfacht (B4): drei Aussagen, ein Diagramm, Rest aufklappbar */
.aussagen__liste { margin: 0; padding-left: 1.3em; font-size: 1.1rem; line-height: 1.55; }
.aussagen__liste li { margin-bottom: 8px; }
.aussagen__liste li::marker { color: var(--gold); font-weight: 600; }
.mehr { margin-top: 8px; }
.mehr__kopf { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px; border-radius: 999px; background: var(--weiss); border: 1px solid var(--rahmen); font-weight: 600; color: var(--blau); margin-bottom: 16px; }
.mehr__kopf::-webkit-details-marker { display: none; }
.mehr__kopf::before { content: "▸"; color: var(--gold); }
.mehr[open] .mehr__kopf::before { content: "▾"; }
.mehr__kopf:hover { background: var(--flaeche); }
/* Kundenbild: Logo von der Website oder Monogramm (A5) */
.kundenbild { width: var(--kb-px, 40px); height: var(--kb-px, 40px); border-radius: 12px; object-fit: cover; flex: none; background: var(--weiss); border: 1px solid var(--rahmen); }
.kundenbild--mono { display: inline-flex; align-items: center; justify-content: center; background: var(--kb-farbe, var(--blau)); color: var(--weiss); font-weight: 600; font-size: calc(var(--kb-px, 40px) * .4); letter-spacing: .02em; border: 0; }
.kundenkopf { display: flex; align-items: center; gap: 16px; min-width: 0; }
.kundenkopf .kundenbild { --kb-px: 60px; border-radius: 16px; }
/* Startseite: „Heute wichtig“ und Kachelwand (B1) */
.heute { border-left: 5px solid var(--gold); }
.heute__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.heute__zeile { display: grid; grid-template-columns: minmax(200px, 260px) 1fr; gap: 6px 16px; align-items: start; padding: 8px 0; border-bottom: 1px solid var(--rahmen); }
.heute__zeile:last-child { border-bottom: 0; }
.heute__kunde { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.heute__punkte { display: flex; flex-wrap: wrap; gap: 6px; }
.status--rot { background: var(--warn-flaeche); color: var(--warn-text); }
.status--link { text-decoration: none; }
@media (max-width: 720px) { .heute__zeile { grid-template-columns: 1fr; } }
.ansicht-wahl { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 16px; }
.kundenwand { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin-bottom: 24px; }
.kundenkachel { display: flex; flex-direction: column; gap: 12px; background: var(--weiss); border: 1px solid rgba(27,27,55,.07); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--schatten); text-decoration: none; color: var(--text); transition: box-shadow .15s ease, transform .15s ease; }
.kundenkachel:hover { box-shadow: var(--schatten-hover); transform: translateY(-1px); color: var(--text); }
.kundenkachel--inaktiv { opacity: .55; }
.kundenkachel__kopf { display: flex; align-items: center; gap: 12px; }
.kundenkachel__titel { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.kundenkachel__titel strong { color: var(--blau); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kundenkachel__zahlen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.kundenkachel__zahl { display: flex; flex-direction: column; gap: 2px; }
.kundenkachel__label { font-size: .78rem; color: var(--text-leise); }
.kundenkachel__wert { font-size: 1.25rem; font-weight: 600; color: var(--blau); font-variant-numeric: tabular-nums; line-height: 1.1; }
.delta--klein { font-size: .75rem; padding: 1px 6px; align-self: flex-start; }
.kundenkachel__fuss { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-top: auto; }
/* Portfolio-Tabelle (B2) */
.portfolio td.num small { display: block; }
.portfolio .ampel { vertical-align: middle; }
.visuell-versteckt { position: absolute; left: -9999px; }
.zelle--rot { box-shadow: inset 3px 0 0 #c8362a; }
.zelle--gelb { box-shadow: inset 3px 0 0 var(--gold); }
.heute__mehr { margin-top: 10px; }
.heute__mehr-kopf { cursor: pointer; color: var(--text-leise); font-size: .95rem; min-height: 40px; display: flex; align-items: center; }
.heute__mehr[open] .heute__mehr-kopf { margin-bottom: 6px; }

/* ---------- Dunkler Modus (Christian 20.09.2026, A7) ----------
   Tokens tauschen, dazu die wenigen Stellen mit festen Farben. Dunkelblau bleibt Marke (Kopfzeile, Knöpfe),
   Flächen werden tiefes Nachtblau, Text hell; Gold bleibt Akzent. Die Wahl liegt in localStorage (assets/theme.js). */
.theme-schalter { width: 40px; height: 40px; border: 1px solid rgba(255,255,255,.4); border-radius: 999px; background: transparent; color: var(--weiss); font: inherit; font-size: 1.1rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.theme-schalter:hover { background: rgba(255,255,255,.12); }
.theme-schalter__dunkel { display: none; }
[data-theme="dunkel"] .theme-schalter__hell { display: none; }
[data-theme="dunkel"] .theme-schalter__dunkel { display: inline; }
[data-theme="dunkel"] {
  --blau: #e8e8f6;          /* Überschriften, Knöpfe, Links: hell */
  --blau-hell: #ffffff;
  --gold: #f0b23a;
  --gold-hell: #f7d374;
  --hellgold: #3a3020;
  --flaeche: #12122a;       /* Seitenfläche */
  --rahmen: #2c2c4a;
  --text: #dcdcea;
  --text-leise: #9c9cb8;
  --weiss: #1c1c36;         /* Karten */
  --ok-flaeche: #1d3a27;
  --ok-text: #9fdcb2;
  --warn-flaeche: #4a1f1a;
  --warn-text: #f3b3aa;
  --grau-flaeche: #26264a;
  --schatten: 0 1px 2px rgba(0,0,0,.3), 0 6px 24px rgba(0,0,0,.35);
  --schatten-hover: 0 2px 4px rgba(0,0,0,.35), 0 12px 32px rgba(0,0,0,.45);
  --d1: #e8e8f6; --d3: #9c9cb8;
  color-scheme: dark;
}
[data-theme="dunkel"] .kopf { background: #0c0c1e; color: #ffffff; }
[data-theme="dunkel"] .kopf a, [data-theme="dunkel"] .nav a, [data-theme="dunkel"] .marke { color: #ffffff; }
[data-theme="dunkel"] .nav a:hover { background: #1f1f3f; }
[data-theme="dunkel"] .kopf .btn--leise, [data-theme="dunkel"] .theme-schalter { color: #ffffff; }
[data-theme="dunkel"] .btn { background: #1c1c36; color: #e8e8f6; border-color: #e8e8f6; }
[data-theme="dunkel"] .btn:hover { background: #26264a; color: #ffffff; }
[data-theme="dunkel"] .btn--primaer { background: #e8e8f6; color: #12122a; border-color: #e8e8f6; }
[data-theme="dunkel"] .btn--primaer:hover { background: #ffffff; color: #12122a; border-color: #ffffff; }
[data-theme="dunkel"] .btn--gold { background: var(--gold); color: #12122a; border-color: var(--gold); }
[data-theme="dunkel"] .btn--leise { border-color: var(--rahmen); }
[data-theme="dunkel"] .tabs--gross a[aria-current="page"], [data-theme="dunkel"] .chip--aktiv { background: #e8e8f6; color: #12122a; }
[data-theme="dunkel"] .tabs--gross a:hover { background: #26264a; }
[data-theme="dunkel"] .tabelle th { background: #26264a; color: #e8e8f6; }
[data-theme="dunkel"] .tabelle tbody tr:hover { background: #22223f; }
[data-theme="dunkel"] .tabelle--klick tbody tr:hover { background: #3a3020; }
[data-theme="dunkel"] .status { background: #26264a; color: #dcdcea; }
[data-theme="dunkel"] .status--ok { background: var(--ok-flaeche); color: var(--ok-text); }
[data-theme="dunkel"] .status--warn { background: var(--hellgold); color: var(--gold-hell); }
[data-theme="dunkel"] .status--rot, [data-theme="dunkel"] .status--fehler { background: var(--warn-flaeche); color: var(--warn-text); }
[data-theme="dunkel"] .meldung--ok { border-color: #2f5a3d; }
[data-theme="dunkel"] .meldung--fehler { color: var(--gold-hell); }
[data-theme="dunkel"] .formular input:not([type="checkbox"]), [data-theme="dunkel"] .formular select, [data-theme="dunkel"] .zeitraum__frei input, [data-theme="dunkel"] .eingabe, [data-theme="dunkel"] textarea { background: #12122a; color: var(--text); border-color: #3a3a5c; }
[data-theme="dunkel"] .kundensuche--kopf input[type="search"]:focus { background: #12122a; color: var(--text); }
[data-theme="dunkel"] .werkzeug--aus { color: #6e6e8a; }
[data-theme="dunkel"] .kachel--ampel-rot { background: linear-gradient(180deg, rgba(200,54,42,.12), transparent 40%), var(--weiss); }
[data-theme="dunkel"] .kundenbild { border-color: var(--rahmen); background: #26264a; }
[data-theme="dunkel"] .monatssatz { color: var(--gold-hell); }
[data-theme="dunkel"] .spark__flaeche { fill: rgba(240,178,58,.14); }
[data-theme="dunkel"] .qr { background: #fff; }
[data-theme="dunkel"] .balken__fuell, [data-theme="dunkel"] .leiste, [data-theme="dunkel"] .anteil__leiste { background: var(--gold); }
[data-theme="dunkel"] code { background: #26264a; }
[data-theme="dunkel"] .kundensicht { background: #3a3020; color: var(--gold-hell); }
[data-theme="dunkel"] :focus-visible { outline-color: var(--gold); }
[data-theme="dunkel"] .kundenbild--mono { background: var(--gold); color: #12122a; }
.nav__zahl { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 6px; border-radius: 999px; background: var(--gold); color: #1b1b37; font-size: .78rem; font-weight: 600; }
/* Monatsberichte (B5) */
.bericht-zeile { display: grid; grid-template-columns: minmax(220px, 1fr) 2fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--rahmen); align-items: start; }
.bericht-zeile:last-child { border-bottom: 0; }
.bericht-zeile textarea { width: 100%; font: inherit; font-size: .95rem; padding: 10px 12px; border: 1px solid #b8b8c8; border-radius: var(--radius); min-height: 150px; resize: vertical; background: var(--weiss); color: var(--text); }
.bericht-zeile input[type="text"] { width: 100%; font: inherit; padding: 8px 12px; min-height: 40px; border: 1px solid #b8b8c8; border-radius: var(--radius); background: var(--weiss); color: var(--text); }
.bericht-zeile__form { display: grid; gap: 8px; }
@media (max-width: 800px) { .bericht-zeile { grid-template-columns: 1fr; } }
.bericht-zeile__form label { display: grid; gap: 4px; }
.nav a .nav__zahl { margin-left: 8px; }
/* Auffälligkeit ausblenden (×) und Fußzeile mit Logo (20.09.2026) */
.punkt { display: inline-flex; align-items: center; gap: 2px; margin: 0 4px 4px 0; }
.punkt__weg { display: inline; margin: 0; }
.punkt__weg button { width: 24px; height: 24px; border: 0; border-radius: 50%; background: transparent; color: var(--text-leise); font: inherit; font-size: 1rem; line-height: 1; cursor: pointer; }
.punkt__weg button:hover { background: var(--grau-flaeche); color: var(--blau); }
.fuss { align-items: center; }
.fuss__logo img { height: 30px; width: auto; display: block; opacity: .85; }
.fuss__logo:hover img { opacity: 1; }
/* Spezifität: „.fuss__logo img" (0,1,1) schlug „.fuss__logo-dunkel" (0,1,0) – beide Logos standen untereinander (Christian 20.09.2026) */
.fuss__logo img.fuss__logo-dunkel { display: none; }
[data-theme="dunkel"] .fuss__logo img.fuss__logo-hell { display: none; }
[data-theme="dunkel"] .fuss__logo img.fuss__logo-dunkel { display: block; }
/* Sterne (20.09.2026) */
.sterne { display: inline-flex; gap: 1px; margin-left: 6px; vertical-align: 3px; font-family: "Segoe UI Symbol", "Apple Symbols", Arial, sans-serif; font-size: 1.1rem; line-height: 1; }
.stern--voll { color: var(--gold); }
.stern--leer { color: var(--rahmen); }
.stern--halb { background: linear-gradient(90deg, var(--gold) 50%, var(--rahmen) 50%); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* Übergabe-Checkliste (C3, 20.09.2026) */
.checkliste { list-style: none; margin: 0; padding: 0; }
.checkliste__zeile { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--rahmen); }
.checkliste__zeile:last-child { border-bottom: 0; }
.checkliste__zeile form { margin: 0; display: inline; }
.checkliste__haken { width: 26px; height: 26px; border: 2px solid var(--blau); border-radius: 7px; background: var(--weiss); color: var(--weiss); font: inherit; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.checkliste__zeile--erledigt .checkliste__haken { background: #2e9e5b; border-color: #2e9e5b; }
.checkliste__zeile--erledigt .checkliste__name { color: var(--text-leise); text-decoration: line-through; }
.checkliste__name { flex: 1; min-width: 0; }
.h3 { font-size: 1rem; margin: 14px 0 6px; }
/* Chancen: Vorschläge (20.09.2026) */
.vorschlag { border: 1px solid var(--rahmen); border-radius: var(--radius); padding: 10px 14px; margin-bottom: 10px; }
.vorschlag summary { cursor: pointer; min-height: 40px; display: flex; align-items: center; gap: 8px; }
.vorschlag__raster { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 8px; }
@media (max-width: 800px) { .vorschlag__raster { grid-template-columns: 1fr; } }
.vorschlag .kopierbar { padding: 8px 12px; background: var(--hellgold); border-radius: var(--radius-klein); }
.btn--klein { min-height: 32px; padding: 2px 10px; font-size: .85rem; }
pre.roh { white-space: pre-wrap; background: var(--flaeche); padding: 12px; border-radius: var(--radius); font-size: .85rem; }
/* Ansprechpartner der Agentur im Kunden-Dashboard (20.09.2026) */
.team__liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.team__person { display: flex; gap: 14px; align-items: center; }

/* Bewertungen · Einstellungen je Kunde (20.09.2026) */
.wahlgruppe { display: inline-flex; border: 1px solid var(--rahmen, #dedee6); border-radius: 999px; overflow: hidden; }
.wahlgruppe .wahl { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; font-size: .88rem; cursor: pointer; white-space: nowrap; border-right: 1px solid var(--rahmen, #dedee6); }
.wahlgruppe .wahl:last-child { border-right: 0; }
.wahlgruppe .wahl:has(input:checked) { background: var(--blau); color: #fff; }
.wahlgruppe .wahl--immer:has(input:checked) { background: #2e7d4f; }
.wahlgruppe .wahl--nie:has(input:checked) { background: #6b6b7a; }
.wahlgruppe input { position: absolute; opacity: 0; width: 0; height: 0; }
.feld--fehlt { border-color: #c8102e !important; }
.wahlgruppe .wahl:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: -2px; }

.ansicht-wahl { scroll-margin-top: 84px; }   /* Anker #kunden landet unter der Kopfzeile (21.09.2026) */