/* WEBWUNDER Performance – Dashboard V2 (Vorschau, Doku 24). Ruhige helle Arbeitsfläche, dunkle Navigation (Nachtwald), Instrument Sans + Literata
   selbst gehostet. Ein Datenton für Links/Fokus; Rot nur für Fehler. Zustände immer mit Symbol und Text. Keine externen Abrufe. */
@font-face { font-family: 'Instrument Sans'; src: url('/static/fonts/instrument-sans-latin.woff2') format('woff2'); font-weight: 400 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Instrument Sans'; src: url('/static/fonts/instrument-sans-latin-ext.woff2') format('woff2'); font-weight: 400 700; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2113, U+A720-A7FF; }
@font-face { font-family: 'Literata'; src: url('/static/fonts/literata-latin.woff2') format('woff2'); font-weight: 400 500; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Literata'; src: url('/static/fonts/literata-latin-ext.woff2') format('woff2'); font-weight: 400 500; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2113, U+A720-A7FF; }

:root {
  /* Grundfarben im Stripe-Stil (29.10.2026): kühle, sehr helle Arbeitsfläche, helle Seitenleiste, Tinte mit Blaustich, EIN Akzent Blau für
     Links, Fokus, aktive Navigation und die Ist-Reihe der Diagramme. Grün nur noch für positive Werte und Zustände (--good), Rot nur für Fehler.
     Kontraste (WCAG AA, gerechnet): --ink 16,1:1, --ink-2 10,2:1, --muted 5,9:1 auf Weiß bzw. 5,5:1 auf --ivory; --accent 6,6:1 auf Weiß,
     --accent-ink 7,0:1 auf --accent-wash; --good 6,4:1, --warn 5,9:1, --error 6,5:1 auf Weiß. */
  --night: #1A1F2B; --night-2: #262C3A; --night-line: #353C4C; --on-night: #F2F4F7; --on-night-muted: #B4BAC6;
  --ivory: #F6F7F9; --card: #FFFFFF; --ink: #1A1F2B; --ink-2: #3C4350; --muted: #5E6573; --line: #DADDE3; --line-soft: #E8EAEE;
  --accent: #1C5CAB; --accent-ink: #174E92; --accent-wash: #EAF1FB; --accent-hover: #F2F4F7;
  --data: #1C5CAB; --data-wash: rgba(28, 92, 171, .08); --good: #1D6B44; --good-wash: #E4F2E9; --warn: #8A5600; --error: #B3261E; --error-wash: #F8E4E1; --warn-wash: #F5EBD6;
  --gap: clamp(16px, 2vw, 24px); --side: 260px; --forest: #1C5CAB; --sage: #EAF1FB;
  /* Schrift-Token (Entscheidung Johannes 27.10.2026): Instrument Sans für die ganze Oberfläche, Zahlen tabellarisch; Literata höchstens im Logo */
  --font-ui: 'Instrument Sans', 'Segoe UI', sans-serif; --num: tabular-nums;
  /* Stripe-System (B-Gegenprüfung 31.10.2026, P1-4): sechs Textstile, drei Gewichte (400 Text, 500 Beschriftung/Reiter, 600 alles Betonte),
     drei Radien, Flächen mit Haarlinie statt Schatten (Schatten nur für Schwebendes: Popover, Menü, Dialog, Hinweis). Alle Größen in v2.css
     laufen über diese Token; --fs-micro nur für Achsen und Kleinstetiketten, --fs-kpi-s für Nebenkennzahlen. */
  --fs-title: clamp(24px, 2.2vw, 28px); --fs-section: 18px; --fs-kpi: 32px; --fs-kpi-s: 24px; --fs-body: 15px; --fs-caption: 13px; --fs-micro: 13px;   /* micro = Beschriftung (6 Textstile); eigener Token für spätere Feinwahl */
  --r-s: 6px; --r-m: 10px; --r-pill: 999px;
  --r: var(--r-s); --rc: var(--r-m); --rl: var(--r-m);   /* alte Namen als Alias */
  --shadow-float: 0 12px 32px -12px rgba(26, 31, 43, .32), 0 0 0 1px rgba(26, 31, 43, .06);
  color-scheme: light;
}
@media (max-width: 640px) { :root { --fs-kpi: 26px; --fs-kpi-s: 18px; } }
/* Textstile als Klassen (Titel 28/600, Abschnitt 18/600, Kennzahl 32/600 bzw. 26 am Telefon, Text 15/400, Text stark 15/600, Beschriftung 13/500) */
.t-title { font: 600 var(--fs-title)/1.2 var(--font-ui); letter-spacing: -0.015em; }
.t-section { font: 600 var(--fs-section)/1.3 var(--font-ui); }
.t-kpi { font: 600 var(--fs-kpi)/1.1 var(--font-ui); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.t-body { font: 400 var(--fs-body)/1.5 var(--font-ui); }
.t-strong { font: 600 var(--fs-body)/1.5 var(--font-ui); }
.t-caption { font: 500 var(--fs-caption)/1.4 var(--font-ui); color: var(--muted); }
/* Browser-Standard „bold“ (700) gehört nicht ins System */
b, strong, th, h4, h5, h6 { font-weight: 600; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 72px; }
body { margin: 0; background: var(--ivory); color: var(--ink); font: 400 var(--fs-body)/1.55 'Instrument Sans', 'Segoe UI', sans-serif; font-variant-numeric: tabular-nums; }
a { color: var(--data); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--data); outline-offset: 2px; }
h1, h2, h3 { margin: 0; line-height: 1.2; text-wrap: balance; }
h1 { font: 600 var(--fs-title)/1.15 var(--font-ui); letter-spacing: -0.02em; }   /* Instrument Sans überall (Auftrag Johannes 28.10.2026) */
h2 { font-size: var(--fs-section); font-weight: 600; }
h3 { font-size: var(--fs-body); font-weight: 600; }
p { margin: 0; text-wrap: pretty; }
.muted { color: var(--muted); }
.small { font-size: var(--fs-caption); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 8px; z-index: 50; background: var(--ink); color: var(--card); padding: 10px 14px; border-radius: var(--r-s); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Rahmen und Navigation (Seitenleiste 27.10.2026; hell im Stripe-Stil seit 29.10.2026): Seitenleiste ab 1024 px, einklappbar auf eine Symbolleiste (72 px,
   Zustand im Browser gespeichert); darunter Panel von links mit Abdeckung (Doku 24: statischer Kopf, partial-panel). Aktiver Eintrag mit Fläche und
   Schriftgewicht, nie Farbe allein. Schrift: Instrument Sans (eine Sans für die ganze Navigation). */
.app { min-height: 100vh; display: grid; grid-template-columns: var(--side) minmax(0, 1fr); }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.side { --nv-text: var(--ink); --nv-item: var(--ink-2); --nv-muted: var(--muted); --nv-ico: #6B7280; --nv-hover: var(--accent-hover); --nv-active: var(--accent-wash); --nv-accent: var(--accent); --nv-line: #E6E8EC;
  background: #FFFFFF; border-right: 1px solid var(--nv-line);
  color: var(--nv-text); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; height: 100dvh; min-width: 0; font-family: var(--font-ui); font-variant-numeric: var(--num); }
.side :focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.side__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 76px; padding: 18px 12px 14px 20px; }
.side__brand { display: flex; align-items: center; min-width: 0; min-height: 44px; border-radius: var(--r-s); color: inherit; text-decoration: none; }
.side__logo { display: block; width: 164px; max-width: 100%; height: auto; }
.side__name { font-size: var(--fs-section); font-weight: 600; line-height: 1.2; color: var(--nv-text); }
.side__mono, .side__symbol { display: none; }
/* Anbieter-Signatur (27.10.2026): ganz unten, klein und ruhig; die Kundenmarke oben bleibt die erste Marke der Leiste */
.sig { display: grid; gap: 5px; margin: 8px 0 0; padding: 12px 12px 2px; border-top: 1px solid var(--nv-line); }
.sig__logo { display: block; width: 96px; height: auto; opacity: .78; }
.sig__claim { margin: 0; font-size: var(--fs-micro); font-weight: 500; line-height: 1.35; letter-spacing: .01em; color: var(--nv-muted); }
.side__collapse, .side__close { flex: none; display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: var(--r-s); background: none; color: var(--nv-muted); cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.side__collapse:hover, .side__close:hover { background: var(--nv-hover); color: var(--nv-text); }
.side__collapse[hidden], .side__close { display: none; }
.side__switch { display: flex; align-items: center; gap: 10px; min-height: 40px; margin: 0 12px 10px; padding: 0 12px; border: 1px solid var(--nv-line); border-radius: var(--r-s); color: var(--nv-item); font-size: var(--fs-caption); font-weight: 500; text-decoration: none; transition: background-color .15s ease, color .15s ease; }
.side__switch:hover { background: var(--nv-hover); color: var(--nv-text); }
.side__scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 22px; padding: 4px 10px 0; scrollbar-width: thin; scrollbar-color: #D5D9E0 transparent; }
.side__group { display: grid; gap: 2px; }
.side__label { margin: 0 0 4px; padding: 0 12px; font-size: var(--fs-micro); font-weight: 600; line-height: 1.3; letter-spacing: .01em; color: var(--nv-muted); }
.side__group a, .user__out button { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 38px; padding: 0 12px; border: 0; border-radius: var(--r-s); background: none; color: var(--nv-item); font: 500 var(--fs-body)/1.3 var(--font-ui); text-align: left; text-decoration: none; cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.side__group a span, .user__out button span { min-width: 0; padding: 7px 0; }
.side__badge { margin-left: auto; min-width: 1.35em; height: 1.35em; padding: 0 0.35em; border-radius: var(--r-pill); background: var(--error, #c0392b); color: #fff; font: 600 var(--fs-micro)/1.35em var(--font-ui); text-align: center; flex: none; }   /* Zähler-Punkt, z. B. Zugänge (28.10.2026) */
.side__group a .ico, .user__out .ico { color: var(--nv-ico); transition: color .15s ease; }
.side__group a:hover, .user__out button:hover { background: var(--nv-hover); color: var(--nv-text); }
.side__group a:hover .ico, .user__out button:hover .ico { color: var(--nv-text); }
.side__group a[aria-current="page"] { background: var(--nv-active); color: var(--accent-ink); font-weight: 600; }
.side__group a[aria-current="page"] .ico { color: var(--nv-accent); }
/* Benutzerbereich am Ende der Scrollfläche im normalen Fluss (Designpilot 29.10.2026): auf hohen Bildschirmen unten, sonst nach dem letzten Menüpunkt; überdeckt nie einen Menüpunkt */
.side__foot { display: grid; gap: 0; margin: auto -10px 0; padding: 8px 10px max(10px, env(safe-area-inset-bottom)); border-top: 1px solid var(--nv-line); }
/* Nutzerblock (29.10.2026): eine Zeile mit Initialen, Anzeigename (displayName), Rolle klein nur wenn nicht doppelt, Abmelden als Symbol rechts */
.user { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 2px 0 2px 6px; }
.user__av { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent-wash); color: var(--accent-ink); font-size: var(--fs-micro); font-weight: 600; letter-spacing: .02em; }
.user__txt { display: grid; flex: 1 1 auto; min-width: 0; line-height: 1.25; }
.user__name { font-size: var(--fs-caption); font-weight: 600; color: var(--nv-text); overflow-wrap: anywhere; }
.user__role { font-size: var(--fs-micro); color: var(--nv-muted); overflow-wrap: anywhere; }
.user__out { flex: none; margin: 0 0 0 auto; }
.side .user__out button { justify-content: center; width: 40px; min-height: 40px; height: 40px; padding: 0; gap: 0; }
.topbar { display: none; }
.scrim { display: none; }
/* Eingeklappt (nur Desktop): Symbole mit Tooltip (title per JavaScript); die Namen bleiben für Screenreader im Link */
@media (min-width: 1024px) {
  html.nav-c { --side: 72px; }
  html.nav-c .side__top { flex-direction: column; gap: 6px; min-height: 0; padding: 16px 12px 12px; }
  html.nav-c .side__logo, html.nav-c .side__name { display: none; }
  html.nav-c .side__symbol { display: block; width: 40px; height: 40px; }
  html.nav-c .sig { display: none; }
  html.nav-c .side__mono { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-m); background: var(--accent-hover); box-shadow: inset 0 0 0 1px var(--nv-line); color: var(--nv-text); font-size: var(--fs-section); font-weight: 600; }
  html.nav-c .side__collapse .ico { transform: scaleX(-1); }
  html.nav-c .side__switch { justify-content: center; width: 48px; padding: 0; }
  html.nav-c .side__scroll { gap: 10px; align-items: center; }
  html.nav-c .side__foot { justify-items: center; align-self: stretch; }
  html.nav-c .side__group { justify-items: center; width: 100%; }
  html.nav-c .side__group + .side__group { padding-top: 10px; border-top: 1px solid var(--nv-line); }
  html.nav-c .side__sub { display: none; }   /* 03.11.2026 (Johannes): eingeklappt keine Untermenüs */
  html.nav-c .side__group a, html.nav-c .user__out button { justify-content: center; width: 48px; min-height: 44px; padding: 0; }
  html.nav-c .user { flex-direction: column; justify-content: center; gap: 4px; padding: 6px 0 4px; }
  html.nav-c .user__out { margin: 0; }
  html.nav-c .side__label, html.nav-c .side__group a span, html.nav-c .user__out button span, html.nav-c .side__switch span, html.nav-c .user__txt { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (pointer: coarse) {
  .side__group a, .user__out button, .side__switch { min-height: 44px; }
  .side .user__out button { width: 44px; height: 44px; }
  .side__collapse, .side__close { width: 44px; height: 44px; }
}

.main { min-width: 0; padding: clamp(20px, 3vw, 40px); display: grid; gap: var(--gap); align-content: start; max-width: 1280px; width: 100%; }
.preview-band { border: 1px dashed var(--ink-2); background: var(--card); border-radius: var(--r-s); padding: 10px 14px; font-size: var(--fs-caption); display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.preview-band b { font-weight: 600; }

/* Kopf einer Seite */
.pagehead { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 12px 24px; }
.pagehead p { margin-top: 6px; color: var(--muted); }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--card); overflow: hidden; }
.seg a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; text-decoration: none; color: var(--ink-2); font-weight: 600; }
.seg a[aria-current="true"] { background: var(--ink); color: var(--card); }
.field-inline { display: inline-flex; gap: 8px; align-items: center; }
.field-inline select { max-width: 100%; min-width: 0; }   /* Trichter-Filter (w3int): Auswahl wie die übrigen Felder, nie breiter als die Fläche */
input, select, textarea, button { font: inherit; }
.field-inline select, .field-inline input[type="month"], .field-inline input[type="text"], .field-inline input:not([type]) { min-height: 44px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--card); padding: 0 10px; color: var(--ink); font-size: 16px; }

/* Datenstatus: eine Zeile statt Technikwand */
.datastate { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-s); padding: 12px 16px; font-size: var(--fs-body); }
.st { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.st svg { flex: none; }
.st--good svg { color: var(--good); } .st--warn svg { color: var(--warn); } .st--error svg { color: var(--error); } .st--none svg { color: var(--muted); }

/* Kennzahlkarten */
.kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.kpi { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-m); padding: 18px 20px; display: grid; gap: 8px; align-content: start; min-width: 0; }
.kpi__label { font-size: var(--fs-body); font-weight: 600; color: var(--ink-2); }
.kpi__value { font-size: var(--fs-kpi); font-weight: 600; line-height: 1.1; letter-spacing: -0.01em; }
.kpi__value.is-missing { font-size: var(--fs-section); font-weight: 600; color: var(--muted); line-height: 1.35; letter-spacing: 0; }
.kpi__plan { font-size: var(--fs-body); display: flex; flex-wrap: wrap; gap: 4px 12px; }
.kpi__plan .delta { font-weight: 600; }
.kpi__basis { font-size: var(--fs-caption); color: var(--muted); }
.kpi details { border-top: 1px solid var(--line-soft); padding-top: 8px; margin-top: 2px; }
.kpi summary { cursor: pointer; font-size: var(--fs-body); font-weight: 600; color: var(--data); min-height: 32px; display: flex; align-items: center; list-style-position: inside; }
.kpi summary::-webkit-details-marker { margin-right: 6px; }
.kpi dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 12px; margin: 8px 0 0; font-size: var(--fs-caption); }
.kpi dt { color: var(--muted); }
.kpi dd { margin: 0; overflow-wrap: anywhere; }

/* Abschnitte */
.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-m); padding: clamp(16px, 2vw, 24px); min-width: 0; }
.panel > h2 + p { margin-top: 4px; color: var(--muted); font-size: var(--fs-body); }
.grid2 { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--gap); }
.attention { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 12px; }
.attention li { display: grid; gap: 4px; }
.attention li .st { align-items: flex-start; }
.attention li .st svg { margin-top: 3px; }
.attention li p { padding-left: 22px; color: var(--muted); font-size: var(--fs-body); }
.tablewrap { position: relative; overflow-x: auto; margin-top: 12px; }   /* relative: versteckte Texte (visually-hidden, absolut) bleiben im Scrollbereich statt die Seite zu verbreitern */
table { border-collapse: collapse; width: 100%; font-size: var(--fs-body); }
th, td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
th { font-size: var(--fs-caption); color: var(--muted); font-weight: 600; }
td.n, th.n { text-align: right; white-space: nowrap; }
.note { font-size: var(--fs-caption); color: var(--muted); }
ul.note { margin: 12px 0 0; padding-left: 18px; display: grid; gap: 4px; }

/* Content & Freigabe */
.filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.filters label { display: grid; gap: 4px; font-size: var(--fs-caption); font-weight: 600; color: var(--ink-2); }
.filters select, .filters input[type="search"] { min-height: 44px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--card); padding: 0 10px; font-size: 16px; color: var(--ink); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: var(--r-s); border: 1px solid var(--ink); background: var(--ink); color: var(--card); font-weight: 600; text-decoration: none; cursor: pointer; }
.btn--ghost { background: var(--card); color: var(--ink); border-color: var(--line); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: var(--gap); }
.post { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-s); overflow: hidden; display: grid; grid-template-rows: auto 1fr; text-decoration: none; color: inherit; }
.post:hover { border-color: var(--ink-2); }
.post__media { aspect-ratio: 4 / 5; background: var(--line-soft); display: grid; place-items: center; overflow: hidden; position: relative; }
.post__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post__kind { position: absolute; left: 8px; top: 8px; background: var(--card); color: var(--ink); border-radius: var(--r-s); font-size: var(--fs-caption); font-weight: 600; padding: 2px 8px; }
.post__body { padding: 12px 14px 14px; display: grid; gap: 6px; align-content: start; }
.post__title { font-weight: 600; line-height: 1.3; }
.post__meta { font-size: var(--fs-caption); color: var(--muted); }
.mediafail { padding: 12px; text-align: center; font-size: var(--fs-caption); color: var(--error); font-weight: 600; }

.editor { display: grid; grid-template-columns: minmax(300px, 420px) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
.phone { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-m); overflow: hidden; position: sticky; top: 24px; }
.phone__head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; font-size: var(--fs-caption); font-weight: 600; border-bottom: 1px solid var(--line-soft); }
.phone__avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--night); }
.phone__media { position: relative; background: #000; }
.phone__media img, .phone__media video { width: 100%; display: block; max-height: 70vh; object-fit: contain; background: #000; }
.phone__slides { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; }
.phone__slides > * { flex: 0 0 100%; scroll-snap-align: start; }
.slidebar { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 10px; font-size: var(--fs-caption); color: var(--muted); }
.slidebar button { min-width: 44px; min-height: 36px; border: 1px solid var(--line); background: var(--card); border-radius: var(--r-s); cursor: pointer; }
.phone__text { padding: 12px; font-size: var(--fs-body); white-space: pre-wrap; overflow-wrap: anywhere; }
.phone__comment { padding: 10px 12px 14px; border-top: 1px solid var(--line-soft); font-size: var(--fs-caption); white-space: pre-wrap; overflow-wrap: anywhere; }
.phone__note { padding: 8px 12px; font-size: var(--fs-caption); color: var(--muted); border-top: 1px solid var(--line-soft); }
.form { display: grid; gap: 18px; }
.form label, .form .label { display: grid; gap: 6px; font-weight: 600; font-size: var(--fs-body); }
.form textarea, .form input[type="text"], .form input[type="url"], .form input[type="datetime-local"] { width: 100%; border: 1px solid var(--line); border-radius: var(--r-s); background: #fff; color: var(--ink); padding: 10px 12px; font-size: 16px; font-weight: 400; line-height: 1.5; }
.form textarea { min-height: 120px; resize: vertical; }
.form .hint { font-size: var(--fs-caption); font-weight: 400; color: var(--muted); display: flex; justify-content: space-between; gap: 12px; }
.form .count.is-over { color: var(--error); font-weight: 600; }
.form .count.is-warn { color: var(--warn); font-weight: 600; }
.form .err { color: var(--error); font-size: var(--fs-caption); font-weight: 600; }
.form [aria-invalid="true"] { border-color: var(--error); }
.actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.msg { border-radius: var(--r-s); padding: 12px 14px; font-size: var(--fs-body); border: 1px solid var(--line); background: var(--card); }
.msg--ok { border-color: var(--good); }
.msg--error { border-color: var(--error); background: var(--error-wash); }
.msg--warn { border-color: var(--warn); background: var(--warn-wash); }
.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 14px; margin: 10px 0 0; font-size: var(--fs-body); }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.timeline { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.timeline li { border-left: 2px solid var(--line); padding-left: 12px; font-size: var(--fs-body); }
.timeline li b { font-weight: 600; }
.mono { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: var(--fs-caption); overflow-wrap: anywhere; }
.conflict { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px; }
.conflict pre { white-space: pre-wrap; overflow-wrap: anywhere; background: #fff; border: 1px solid var(--line); border-radius: var(--r-s); padding: 10px; font: var(--fs-caption)/1.5 'Instrument Sans', sans-serif; margin: 6px 0 0; max-height: 280px; overflow: auto; }

/* Tablet */
@media (max-width: 1180px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid2 { grid-template-columns: minmax(0, 1fr); }
  .editor { grid-template-columns: minmax(0, 1fr); }
  .phone { position: static; max-width: 460px; }
}
/* Telefon und schmales Tablet: Navigation als Panel */
@media (max-width: 1023px) {
  /* align-content (31.10.2026): Rasterzeilen dehnen sich nicht mehr auf die Mindesthöhe 100vh; vorher wuchs die Kopfzeile auf kurzen Seiten bis 247 px */
  .app { grid-template-columns: minmax(0, 1fr); align-content: start; }
  /* Kopfzeile (Stripe-Muster, Johannes 31.10.2026; vorher Designpilot 29.10.2026): 52 px, deckend weiß (vorher 96 %: Überschriften schienen beim
     Scrollen durch), Haarlinie, Logo links, Menü als Symbolknopf rechts (44 × 44). Ausblenden beim Herunterscrollen: Abschnitt „Stripe-Feinschliff“ */
  .topbar { display: flex; position: sticky; top: 0; z-index: 25; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: env(safe-area-inset-top) 6px 0 16px; border-bottom: 1px solid var(--line-soft); background: #FFFFFF; color: var(--ink); }
  .topbar img { width: 128px; height: auto; display: block; }
  .topbar b { font-size: var(--fs-body); font-weight: 600; }
  .topbar button { display: inline-grid; place-items: center; width: 44px; height: 44px; min-width: 44px; padding: 0; color: var(--ink); background: none; border: 0; border-radius: var(--r-m); cursor: pointer; transition: background-color .15s ease; }
  .topbar button .ico { width: 22px; height: 22px; stroke-width: 1.8; }
  .topbar button:hover { background: var(--accent-hover); }
  .topbar button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
  .side { position: fixed; inset: 0 auto 0 0; width: min(86vw, 320px); height: 100%; z-index: 40; transform: translateX(-105%); visibility: hidden; transition: transform .22s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .22s; box-shadow: var(--shadow-float); }
  .app.is-open .side { transform: none; visibility: visible; transition: transform .22s cubic-bezier(.2, .8, .2, 1), visibility 0s; }
  .scrim { position: fixed; inset: 0; background: rgba(26, 31, 43, .45); z-index: 30; }
  .app.is-open .scrim { display: block; }
  .side__top { min-height: 64px; padding: 10px 10px 10px 20px; }
  .side__logo { width: 156px; }
  .side__collapse, .side__collapse[hidden] { display: none; }
  .side__close { display: inline-grid; width: 44px; height: 44px; }
  .side__group a, .user__out button, .side__switch { min-height: 44px; }
  .side .user__out button { width: 44px; height: 44px; }
  .main { padding: 16px; }
}
.band-short { display: none; }
@media (max-width: 640px) {
  .band-long { display: none; } .band-short { display: inline; }
  .preview-band { font-size: var(--fs-caption); padding: 6px 12px; }
  .datastate { font-size: var(--fs-caption); padding: 10px 12px; gap: 4px 12px; }
  .pagehead p { margin-top: 2px; }
  .kpis { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .kpi { padding: 12px 14px; gap: 4px; }
  .kpi__value.is-missing { font-size: var(--fs-body); }
  .kpi__basis { display: none; }
  .kpi details { padding-top: 4px; }
  .pagehead { align-items: start; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .post__body { padding: 10px; }
  .conflict { grid-template-columns: minmax(0, 1fr); }
  table { font-size: var(--fs-caption); }
}
@media (max-width: 380px) { .cards { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .side, .app.is-open .side, .side *, .topbar button { transition: none !important; } }
@media print { .side, .topbar, .scrim, .preview-band { display: none !important; } .app { display: block; } }
.mt8 { margin-top: 8px; } .mt12 { margin-top: 12px; }
.pagehead .small a, .main > .small a { display: inline-flex; align-items: center; min-height: 44px; }
.form summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; color: var(--data); }

/* ---------------------------------------------------------------- Portal (Doku 26): Übersicht, Seiten, Verwaltung */
.eyebrow { font-size: var(--fs-micro); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 4px; }
.tag { display: inline-block; font-size: var(--fs-micro); font-weight: 600; border-radius: var(--r-s); padding: 2px 7px; background: var(--warn-wash); color: var(--warn); }
.panel--lead { background: radial-gradient(80% 160% at 0% 0%, rgba(92, 170, 128, .34), transparent 58%), radial-gradient(60% 140% at 100% 0%, rgba(210, 168, 92, .22), transparent 62%), var(--night); color: var(--on-night); border-color: #24302B; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07); }
.panel--lead h2 { color: var(--on-night); }
.panel--lead .note, .panel--lead p { color: var(--on-night); }
.panel--lead a { color: #CFE3D6; }
.panel--lead .copyrow input { background: #fff; color: var(--ink); }
.summary p { margin-top: 10px; font-size: var(--fs-section); line-height: 1.6; max-width: 72ch; }
.summary b { font-weight: 600; }
.panel--flush { padding: 12px; }
.panel__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.panel__head .note { margin-top: 2px; }
.seg--small a { min-height: 36px; padding: 0 12px; font-size: var(--fs-caption); }
.kpis--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kpi__head { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.kpi__value a { color: inherit; text-decoration: none; }   /* Drilldown-Zeichen siehe .drill (Durchsicht 28.10.2026) */
.kpi__sub { font-size: var(--fs-caption); color: var(--muted); }
.kpi__cmp { display: grid; gap: 4px; font-size: var(--fs-caption); }
.cmp { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.cmp__k { color: var(--muted); min-width: 64px; }
.delta { border-radius: var(--r-s); padding: 1px 6px; font-weight: 600; font-size: var(--fs-caption); white-space: nowrap; }
.delta--up { background: var(--good-wash); color: #1E4A32; }
.delta--down { background: var(--warn-wash); color: var(--warn); }
.delta--neutral { background: #EEF0F3; color: var(--ink-2); }
.kpi__more summary { font-size: var(--fs-caption); }
.legend { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: var(--fs-caption); color: var(--ink-2); }
.legend li { display: inline-flex; align-items: center; gap: 6px; }
.sw { display: inline-block; width: 12px; height: 12px; border-radius: var(--r-s); flex: none; }
.sw--plan { background: none; border-top: 3px dashed #1A1F2B; height: 0; width: 18px; border-radius: 0; }
.chartwrap { margin-top: 8px; }
svg.chart { width: 100%; height: auto; display: block; }
svg.chart .grid { stroke: #E8EAEE; stroke-width: 1; }
svg.chart .base { stroke: #A5ABB5; stroke-width: 1; }
svg.chart .axis { font: var(--fs-micro) 'Instrument Sans', sans-serif; fill: var(--muted); }
svg.chart .axis--now { fill: var(--ink); font-weight: 600; }
details.tableview summary { cursor: pointer; color: var(--data); font-weight: 600; font-size: var(--fs-caption); min-height: 36px; display: flex; align-items: center; }
.empty { background: none; border: 1px dashed var(--line); border-radius: var(--r-m); padding: 24px; color: var(--muted); margin-top: 12px; font-size: var(--fs-caption); }   /* K3: Leerfläche gestrichelt, ruhig */
.empty b, .empty strong { display: block; margin-bottom: 4px; color: var(--ink); font-size: var(--fs-body); font-weight: 600; }
.chbar { display: flex; height: 14px; gap: 3px; border-radius: var(--r-s); overflow: hidden; margin: 14px 0 6px; }
.chbar span { display: block; min-width: 4px; }
.chlist { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px 24px; }
.ch { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 10px; }
.ch .sw { margin-top: 6px; }
.ch__head { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.ch__num { font-size: var(--fs-section); font-weight: 600; white-space: nowrap; }
.ch__list { font-size: var(--fs-caption); color: var(--ink-2); margin-top: 4px; }
.hstrip { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x proximity; padding: 4px 2px 10px; overscroll-behavior-x: contain; }
.hcard { flex: 0 0 220px; scroll-snap-align: start; background: #fff; border: 1px solid var(--line); border-radius: var(--r-m); overflow: hidden; text-decoration: none; color: var(--ink); display: grid; grid-template-rows: auto 1fr; }
.hcard:hover { border-color: var(--ink-2); }
.hcard.is-current { outline: 3px solid var(--forest); outline-offset: -1px; }
.hcard__img { position: relative; display: block; aspect-ratio: 16 / 10; background: var(--line-soft); }
.hcard__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hcard__badge { position: absolute; left: 8px; top: 8px; background: var(--forest); color: #fff; font-size: var(--fs-micro); font-weight: 600; border-radius: var(--r-s); padding: 2px 7px; }
.hcard__body { display: grid; gap: 2px; padding: 10px 12px 12px; align-content: start; }
.hcard__title { font-weight: 600; }
.hcard__owner { font-size: var(--fs-caption); color: var(--ink-2); }
.hcard__meta { font-size: var(--fs-caption); }
.hero { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 20px; align-items: center; background: var(--night); color: var(--on-night); border-radius: var(--r-m); overflow: hidden; }
.hero img { width: 100%; height: 100%; max-height: 220px; object-fit: cover; display: block; }
.hero > div { padding: 18px 20px 18px 0; display: grid; gap: 6px; }
.hero h1 { color: var(--on-night); }
.hero .eyebrow { color: var(--on-night-muted); }
.hero__owner { font-weight: 600; }
.restable tr.is-cancelled td { color: var(--muted); text-decoration: line-through; text-decoration-color: #B7B0A3; }
.mini { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-top: 8px; }
.mini--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mini > div { display: grid; gap: 2px; background: #F7F8FA; border-radius: var(--r-m); padding: 12px 14px; }
.mini__k { font-size: var(--fs-caption); color: var(--muted); }
.mini__v { font-size: var(--fs-kpi-s); font-weight: 600; line-height: 1.15; }
.doclist { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.doclist li { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; }
.doclist a { display: inline-flex; gap: 10px; align-items: center; text-decoration: none; color: var(--ink); min-height: 44px; }
.doclist a span:last-child { display: grid; }
.doc__icon { width: 38px; height: 44px; border-radius: var(--r-s); background: var(--error-wash); color: var(--error); font-size: var(--fs-micro); font-weight: 600; display: grid; place-items: center; flex: none; }
table.months tr.is-now th, table.months tr.is-now td { background: #F5F6F8; }
.pbar { display: inline-block; width: 70px; height: 8px; border-radius: var(--r-s); background: #E8EAEE; vertical-align: middle; overflow: hidden; margin-right: 6px; }
.pbar span { display: block; height: 100%; background: var(--forest); }
.siteplan { width: 100%; height: auto; display: block; margin-top: 10px; border-radius: var(--r-m); background: #fff; border: 1px solid var(--line-soft); }
.spark { display: flex; align-items: flex-end; gap: 3px; height: 140px; margin-top: 12px; border-bottom: 1px solid #A5ABB5; }
.spark span { flex: 1; background: var(--forest); border-radius: var(--r-s) var(--r-s) 0 0; min-height: 2px; }
.hbars { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.hbars li { display: grid; grid-template-columns: minmax(110px, 38%) minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: var(--fs-caption); }
.hbars__b { height: 10px; background: #E8EAEE; border-radius: var(--r-s); overflow: hidden; }
.hbars__b span { display: block; height: 100%; background: #4F86B4; }
.hbars__v { font-weight: 600; min-width: 3ch; text-align: right; }
.conns { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; }
.conns li { display: grid; gap: 2px; }
.conns .note { padding-left: 22px; }
.linklist { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.tabs a { min-height: 44px; display: inline-flex; align-items: center; padding: 0 14px; text-decoration: none; color: var(--ink-2); font-weight: 600; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.tabs a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--forest); }
.copyrow { display: flex; gap: 8px; }
.copyrow input { flex: 1; min-width: 0; min-height: 44px; border: 1px solid var(--line); border-radius: var(--r-s); padding: 0 10px; font: var(--fs-caption) ui-monospace, Consolas, monospace; }
table.users td { vertical-align: top; }
table.users tr.is-off td { color: var(--muted); }
.rowactions { white-space: nowrap; }
.rowactions a, .linkbtn { min-height: 32px; display: inline-flex; align-items: center; margin-right: 12px; }
/* 03.11.2026 (Johannes): Benutzer-Tabelle ruhig, Aktionen untereinander statt in einer langen Zeile, Spalten ohne Wortbruch */
table.users td { vertical-align: top; }
table.users td:nth-child(1) { min-width: 180px; }
table.users td:nth-child(1) .note { word-break: break-all; }
table.users td:nth-child(2), table.users td:nth-child(3), table.users th { white-space: nowrap; }
table.users td:nth-child(4) { min-width: 110px; }
table.users td:nth-child(5) { min-width: 150px; }
table.users td.rowactions { white-space: nowrap; }
table.users td.rowactions > a, table.users td.rowactions > form { display: block; }
table.users td.rowactions a, table.users td.rowactions .linkbtn { min-height: 28px; margin-right: 0; }
.linkbtn { background: none; border: 0; padding: 0; color: var(--data); font: inherit; font-size: var(--fs-body); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
form.inline { display: inline; margin: 0; }
fieldset { border: 1px solid var(--line-soft); border-radius: var(--r-m); padding: 12px 14px 14px; margin: 0; min-width: 0; }
legend { font-weight: 600; padding: 0 6px; }
.choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.form .choice { display: flex; flex-direction: row; gap: 10px; align-items: flex-start; border: 1px solid var(--line); border-radius: var(--r-m); padding: 10px 12px; font-weight: 400; cursor: pointer; }
.choice span { display: grid; gap: 2px; }
.choice input { margin-top: 1px; width: 24px; height: 24px; flex: none; accent-color: var(--accent); }   /* Tippziel ≥ 24 px (Durchsicht 29.10.2026) */
.housepick { display: flex; flex-wrap: wrap; gap: 8px; }
.form .hp { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: var(--r-m); padding: 0 10px; min-height: 44px; font-weight: 600; cursor: pointer; }
/* Häuserauswahl im Personenformular (31.10.2026): gewählte Chips farbig, Leiste mit Suche und Sammelknöpfen, mobil umbrechend */
.form .hp:has(input:checked) { border-color: var(--accent); background: var(--accent-wash); }
.hsel__pick { display: grid; gap: 10px; margin-top: 10px; }
.hsel__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.hsel__bar .btn { min-height: 44px; }
.hsel__q { flex: 1 1 180px; min-width: 0; min-height: 44px; border: 1px solid var(--line); border-radius: var(--r-s); padding: 0 10px; font-size: var(--fs-body); }
.hsel [hidden] { display: none !important; }
/* Lageplan bei eingeschränktem Zugang: dezenter Hinweis über dem Plan */
.sp-hint { margin: 0 0 8px; font-size: var(--fs-caption); color: var(--muted); }
.permgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 24px; margin-top: 8px; }
.form .perm { display: flex; flex-direction: row; gap: 8px; align-items: center; font-weight: 400; min-height: 36px; }
.label { font-weight: 600; font-size: var(--fs-caption); color: var(--ink-2); margin-bottom: 4px; }
.grid2--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form input[type="email"], .form input[type="password"], .form input[type="month"], .form input[type="file"], .form select, .filters input[type="date"] { width: 100%; border: 1px solid var(--line); border-radius: var(--r-s); background: #fff; color: var(--ink); padding: 10px 12px; font-size: 16px; font-weight: 400; min-height: 44px; }
.filters input[type="date"] { width: auto; }
.form--inline { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); align-items: end; }
.btn--wide { width: 100%; }
table.targets td, table.targets th { font-size: var(--fs-caption); padding: 7px 6px; }
body.plain { background: var(--ivory); }
.plain__main { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.plain__card { width: min(100%, 440px); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-m); padding: clamp(20px, 4vw, 32px); display: grid; gap: 14px; }
.plain__brand { display: flex; align-items: center; gap: 8px; font-size: var(--fs-micro); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 0 6px; }
.plain__brand img { width: 150px; height: auto; }
/* Anmeldung und Mandantenwahl (Premium-Redesign, Auftrag Johannes 30.10.2026, dritte Fassung nach Rückmeldung: Stripe-Prinzip).
   Fast schwarze Bühne mit drei weichen, sehr dunklen Lichtflächen (Warmgrau, ein Hauch Markenrot), die langsam schwimmen (nur transform/opacity,
   20 bis 40 s; bei prefers-reduced-motion ruhen sie in einer ausgewogenen Lage). Komposition: Inhalt höchstens 1200 px breit und mittig;
   links die mit dem Viewport wachsende WEBWUNDER-Wortmarke, der Leitsatz als ruhige Zeile darunter und mit Abstand „Individuelle Entwicklung“;
   rechts nur das Anmeldeformular (380 px), vertikal zur linken Gesamtkomposition zentriert. Keine Trennlinie zwischen den Spalten.
   Typografie-Skala 13 / 14 / 16 / 18 / 24 px (Leitsatz 18 bis 20 px), zwei Gewichte (400, 500), 8-px-Raster. Schrift: Instrument Sans. */
html.auth-root { color-scheme: dark; background: #09090A; }
body.auth { --a-bg: #09090A; --a-text: #F2EFE8; --a-label: #D6D2CA; --a-muted: #A6A39C; --a-line: rgba(242, 239, 232, .12); --a-field: #111113; --a-field-line: #4A4A52; --a-err: #FF8F84; --a-ok: #8FD4AE; --a-red: #E5352B;
  min-height: 100vh; min-height: 100dvh; background: var(--a-bg); color: var(--a-text); font: 400 var(--fs-body)/1.5 var(--font-ui); -webkit-font-smoothing: antialiased; }
body.auth :focus-visible { outline: 2px solid var(--a-text); outline-offset: 3px; }
/* Lichtflächen: große radiale Verläufe mit weich auslaufender Kurve (mehrere Stopps gegen Ringbildung), ohne harte Ränder; Bewegung nur über transform (GPU), keine Unschärfe-Filter, keine Bibliothek */
.auth__light { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  background: radial-gradient(120% 95% at 50% 45%, transparent 50%, rgba(0, 0, 0, .6) 100%); }
.auth__light::before, .auth__light::after, .auth__glow { content: ""; position: absolute; border-radius: 50%; will-change: transform; }
.auth__light::before { width: 110vmax; height: 110vmax; left: -40vmax; top: -58vmax; background: radial-gradient(closest-side, rgba(236, 228, 214, 0.2) 0%, rgba(236, 228, 214, 0.128) 20%, rgba(236, 228, 214, 0.072) 40%, rgba(236, 228, 214, 0.032) 60%, rgba(236, 228, 214, 0.008) 80%, transparent 100%);
  animation: ww-light-in 2s cubic-bezier(.2, .7, .2, 1) both, ww-drift 28s ease-in-out 2s infinite alternate; }
.auth__light::after { width: 90vmax; height: 90vmax; right: -38vmax; bottom: -50vmax; background: radial-gradient(closest-side, rgba(229, 53, 43, 0.24) 0%, rgba(229, 53, 43, 0.154) 20%, rgba(229, 53, 43, 0.086) 40%, rgba(229, 53, 43, 0.038) 60%, rgba(229, 53, 43, 0.01) 80%, transparent 100%);
  animation: ww-light-in 2.8s cubic-bezier(.2, .7, .2, 1) both, ww-drift-2 36s ease-in-out 2.8s infinite alternate; }
.auth__glow { width: 70vmax; height: 70vmax; left: 30vw; top: 10vh; background: radial-gradient(closest-side, rgba(168, 160, 150, 0.13) 0%, rgba(168, 160, 150, 0.083) 20%, rgba(168, 160, 150, 0.047) 40%, rgba(168, 160, 150, 0.021) 60%, rgba(168, 160, 150, 0.005) 80%, transparent 100%);
  animation: ww-light-in 3.2s cubic-bezier(.2, .7, .2, 1) both, ww-drift-3 40s ease-in-out 3.2s infinite alternate; }
@keyframes ww-light-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ww-drift { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(10vmax, 4vmax, 0) scale(1.08); } 100% { transform: translate3d(4vmax, 10vmax, 0) scale(.96); } }
@keyframes ww-drift-2 { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(-9vmax, -6vmax, 0) scale(1.1); } 100% { transform: translate3d(-3vmax, -11vmax, 0) scale(1); } }
@keyframes ww-drift-3 { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(-14vmax, 8vmax, 0) scale(1.12); } 100% { transform: translate3d(-6vmax, -6vmax, 0) scale(.94); } }
html.motion-paused .auth__light::before, html.motion-paused .auth__light::after, html.motion-paused .auth__glow { animation-play-state: paused; }

/* Bühne: links Marke, Leitsatz und „Individuelle Entwicklung“ untereinander; rechts nur das Formular, über beide Zeilen und mittig zur linken Komposition */
.auth__stage { position: relative; z-index: 1; box-sizing: border-box; min-height: 100vh; min-height: 100dvh; width: min(100%, calc(1200px + 2 * clamp(24px, 6vw, 96px))); margin: 0 auto;
  padding: clamp(32px, 7vh, 96px) clamp(24px, 6vw, 96px);
  display: grid; grid-template-columns: minmax(0, 1fr) 380px; grid-template-rows: auto auto; grid-template-areas: "brand form" "ea form"; column-gap: clamp(64px, 8vw, 144px); align-content: center; }
.auth__brand { grid-area: brand; display: grid; justify-items: start; align-content: end; min-width: 0; }
.auth__logo { display: block; width: clamp(340px, 34vw, 640px); max-width: 100%; height: auto; }
.auth__slogan { margin: 24px 0 0; font-size: clamp(18px, calc(.6vw + 9px), 20px); font-weight: 400; line-height: 1.5; letter-spacing: .012em; color: var(--a-muted); }
.auth__side { display: contents; }
.auth__panel { grid-area: form; align-self: center; display: grid; gap: 24px; min-width: 0; }

/* Schlagworte der Anbieter-Signatur in der Seitenleiste: alle in derselben Rasterzelle, die Breite richtet sich nach dem längsten Wort (kein Springen). Ohne JavaScript bleibt das Ruhewort (letztes Wort) sichtbar. */
.claim__words { display: grid; }
.claim__w { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(.55em); filter: blur(6px);
  transition: opacity .3s ease, transform .4s cubic-bezier(.2, .9, .2, 1), filter .3s ease, visibility 0s linear .4s; }
.claim__w.is-on { opacity: 1; visibility: visible; transform: none; filter: none; transition: opacity .32s ease, transform .45s cubic-bezier(.16, 1, .3, 1), filter .32s ease, visibility 0s; }
.claim__w.is-out { transform: translateY(-.55em); }

/* Formular: Gruppen 16 px auseinander, innerhalb 8 px; Knopf 24 px unter dem letzten Feld; Felder und Knopf gleich breit und 48 px hoch */
.auth__title { margin: 0; font: 500 24px/1.33 var(--font-ui); letter-spacing: -.012em; color: var(--a-text); }
.auth__form { display: grid; gap: 16px; }
.field { display: grid; gap: 8px; min-width: 0; }
.field__label { font-size: var(--fs-caption); font-weight: 500; line-height: 1.43; color: var(--a-label); }
.field__input { box-sizing: border-box; width: 100%; height: 48px; padding: 0 16px; border: 1px solid var(--a-field-line); border-radius: var(--r-m); background: var(--a-field); color: var(--a-text);
  font: 400 16px/1.5 var(--font-ui); caret-color: var(--a-text); transition: border-color .15s ease, box-shadow .15s ease; }
.field__input:hover { border-color: #6E6E76; }
body.auth .field__input:focus { outline: none; border-color: var(--a-text); box-shadow: 0 0 0 3px rgba(242, 239, 232, .16); }
.field__input[aria-invalid="true"] { border-color: var(--a-err); }
.field__input:-webkit-autofill, .field__input:-webkit-autofill:hover { -webkit-box-shadow: 0 0 0 60px var(--a-field) inset; -webkit-text-fill-color: var(--a-text); }
body.auth .field__input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 60px var(--a-field) inset, 0 0 0 3px rgba(242, 239, 232, .16); }
.field__pw { position: relative; }
.field__pw .field__input { padding-right: 104px; }
.field__reveal { position: absolute; top: 4px; right: 4px; bottom: 4px; min-width: 88px; padding: 0 12px; border: 0; border-radius: var(--r-s); background: none; color: var(--a-label); font: 500 var(--fs-caption)/1 var(--font-ui); cursor: pointer; }
.field__reveal:hover { background: rgba(242, 239, 232, .08); color: var(--a-text); }
.field__reveal[hidden] { display: none; }
body.auth .field__reveal:focus-visible { outline-offset: -2px; }
.auth__submit { display: flex; align-items: center; justify-content: center; gap: 8px; height: 48px; margin-top: 8px; padding: 0 16px; border: 0; border-radius: 8px; background: var(--a-text); color: var(--a-bg);
  font: 500 var(--fs-body)/1 var(--font-ui); cursor: pointer; transition: background-color .15s ease; }
.auth__submit:hover { background: #FFFFFF; }
.auth__submit[aria-busy="true"] { background: #D9D5CD; cursor: progress; }
.auth__spinner { display: none; width: 16px; height: 16px; box-sizing: border-box; border: 2px solid rgba(9, 9, 10, .22); border-top-color: var(--a-bg); border-radius: 50%; animation: ww-spin .8s linear infinite; }
.auth__submit[aria-busy="true"] .auth__spinner { display: block; }
@keyframes ww-spin { to { transform: rotate(360deg); } }
.auth__msg { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 12px 16px; border-radius: 8px; font-size: 14px; line-height: 1.43; }
.auth__msg svg { flex: none; width: 16px; height: 16px; margin-top: 2px; }
.auth__msg--error { background: rgba(255, 143, 132, .09); border: 1px solid rgba(255, 143, 132, .38); color: var(--a-err); }
.auth__msg--ok { background: rgba(143, 212, 174, .08); border: 1px solid rgba(143, 212, 174, .34); color: var(--a-ok); }
.auth__note { margin: 0; max-width: 40ch; font-size: 14px; line-height: 1.5; color: var(--a-muted); }
/* „Passwort vergessen?“ dezent unter dem Knopf; Trefferfläche 44 px hoch, optisch eine 14-px-Zeile */
.auth__help { margin: -14px 0 -10px; }
.auth__link { display: inline-flex; align-items: center; min-height: 44px; color: var(--a-muted); font-size: 14px; font-weight: 400; text-decoration: none; transition: color .15s ease; }
.auth__link:hover { color: var(--a-text); text-decoration: underline; text-underline-offset: 4px; }

/* „Individuelle Entwicklung“ (Klassen ea*): links unter Marke und Leitsatz, klar nachrangig und kompakt; kurzer roter Strich über der Überzeile als Markenakzent;
   so breit wie die Wortmarke, Text bis 58ch, damit der Absatz ruhig läuft */
.ea { grid-area: ea; position: relative; max-width: clamp(340px, 34vw, 640px); margin-top: clamp(48px, 9vh, 96px); padding-top: 24px; }
.ea::before { content: ""; position: absolute; left: 0; top: 0; width: 32px; height: 2px; background: var(--a-red); }
.ea__eyebrow { margin: 16px 0 0; font-size: var(--fs-caption); font-weight: 500; line-height: 1.38; letter-spacing: .08em; text-transform: uppercase; color: var(--a-muted); }
.ea__title { margin: 0; font: 500 var(--fs-section)/1.33 var(--font-ui); letter-spacing: -.008em; color: var(--a-text); text-wrap: balance; }
.ea__text { margin: 8px 0 0; max-width: min(100%, 58ch); font-size: var(--fs-caption); line-height: 1.57; color: var(--a-muted); text-wrap: pretty; }
.ea__keep { white-space: nowrap; }
.ea__cta { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 6px 0 -10px; color: var(--a-text); font-size: var(--fs-caption); font-weight: 500; text-decoration: none; }
.ea__cta svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s ease; }
.ea__cta:hover { text-decoration: underline; text-underline-offset: 4px; }
.ea__cta:hover svg { transform: translateX(2px); }

.tenants { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.tenants a { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 8px 16px; border: 1px solid var(--a-line); border-radius: var(--r-m); color: var(--a-text);
  font-size: var(--fs-body); font-weight: 500; line-height: 1.5; text-decoration: none; overflow-wrap: anywhere; transition: border-color .15s ease, background-color .15s ease; }
.tenants a:hover { border-color: rgba(242, 239, 232, .36); background: rgba(242, 239, 232, .04); }
.tenants svg { flex: none; width: 16px; height: 16px; fill: none; stroke: var(--a-muted); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s ease, stroke .15s ease; }
.tenants a:hover svg { stroke: var(--a-text); transform: translateX(2px); }

/* Geringe Höhe (kleine Laptops, z. B. 1280 × 640): engerer Rhythmus, damit alles ohne Scrollen sichtbar bleibt; reicht es nicht, scrollt die Seite */
@media (min-width: 900px) and (max-height: 760px) {
  .auth__stage { padding-top: 16px; padding-bottom: 16px; }
  .auth__panel { gap: 16px; }
  .auth__form { gap: 12px; }
  .ea { margin-top: 32px; padding-top: 20px; }
  .auth__logo { width: clamp(320px, 29vw, 560px); }
  .auth__slogan { margin-top: 16px; }
}
/* Telefon und Tablet hochkant: Marke, Leitsatz, Formular, „Individuelle Entwicklung“ untereinander (eigene Komposition) */
@media (max-width: 899px) {
  .auth__stage { display: block; width: 100%; max-width: 560px;
    padding: max(40px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(40px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); }
  .auth__logo { width: min(100%, 360px); }
  .auth__slogan { margin-top: 16px; font-size: 15px; }
  .auth__panel { margin-top: 48px; }
  .ea { max-width: none; margin-top: 56px; }
}
/* Telefon (Runde 5, Johannes 30.10.2026): die ganze Anmeldung ohne Scrollen ab 360 × 640 bzw. 375 × 667. Eine linke Kante, gleichmäßiger
   Rhythmus (8er-Schritte), Felder 44 px, Leitsatz in einer Zeile (Größe aus der Breite, mindestens 12 px), Absatz des Bereichs
   „Individuelle Entwicklung“ 13 px in höchstens drei Zeilen; unter 600 px Höhe entfällt nur der Absatz, Überschrift und CTA bleiben. */
@media (max-width: 599px) {
  .auth__stage { padding-top: max(24px, env(safe-area-inset-top)); padding-bottom: max(16px, env(safe-area-inset-bottom)); }
  .auth__logo { width: min(100%, 248px); }
  .auth__slogan { margin-top: 12px; font-size: max(15px, min(17px, calc((100vw - 40px) / 19))); line-height: 1.4; letter-spacing: .01em; white-space: nowrap; }
  .auth__panel { gap: 12px; margin-top: 28px; }
  .auth__title { font-size: 20px; line-height: 1.3; }
  .auth__form { gap: 12px; }
  .field { gap: 6px; }
  .field__label { font-size: var(--fs-caption); line-height: 1.38; }
  .field__input, .auth__submit { height: 44px; }
  .field__reveal { top: 2px; bottom: 2px; right: 2px; }
  .auth__submit { margin-top: 4px; }
  .auth__help { margin: -10px 0 -12px; }
  .ea { margin-top: 28px; padding-top: 16px; }
  .ea__eyebrow { font-size: var(--fs-micro); }
  .ea__title { margin-top: 6px; font-size: var(--fs-body); line-height: 1.35; }
  .ea__text { margin-top: 6px; font-size: var(--fs-caption); line-height: 1.45; }   /* 03.11.2026 (Johannes): ganzer Text, nicht abgeschnitten */
  .ea__cta { min-height: 40px; margin: 2px 0 -10px; }
}
@media (max-width: 599px) and (max-height: 660px) {
  .auth__stage { padding-top: max(20px, env(safe-area-inset-top)); }
  .auth__panel { margin-top: 24px; }
  .ea { margin-top: 24px; padding-top: 14px; }
}
@media (max-width: 599px) and (max-height: 600px) {
  .ea__text { display: none; }
}
@media (min-width: 600px) and (max-width: 899px) {
  .auth__stage { display: flex; flex-direction: column; justify-content: center; padding-left: 48px; padding-right: 48px; }
  .auth__slogan { font-size: 16px; }
}

/* Ruhe: keine Wanderung; das Licht steht in seiner Ausgangslage (gleiche Komposition wie mit Bewegung) */
@media (prefers-reduced-motion: reduce) {
  .auth__light::before, .auth__light::after, .auth__glow { animation: none; }
  .claim__w { transition: none; filter: none; }
  .auth__spinner { animation-duration: 2.4s; }
  .tenants a, .tenants svg, .field__input, .auth__submit, .auth__link, .ea__cta svg { transition: none; }
}
@media (max-width: 1180px) { .kpis--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .summary p { font-size: var(--fs-body); }
  .kpis--4 { grid-template-columns: minmax(0, 1fr); }
  /* Chalet-Seite (Durchsicht W7): Foto als Vorschaubild links neben dem Titel statt 180 px hohem Bild über dem Text */
  .hero { grid-template-columns: 96px minmax(0, 1fr); gap: 0; align-items: stretch; }
  .hero > div { padding: 12px 14px; gap: 4px; align-content: center; }
  .hero img { max-height: none; min-height: 112px; }
  .hero .eyebrow { display: none; }
  .hero h1 { font-size: var(--fs-title); }
  .hero p { font-size: var(--fs-body); }
  .mini--3 { grid-template-columns: minmax(0, 1fr); }
  .grid2--even { grid-template-columns: minmax(0, 1fr); }
  .hcard { flex-basis: 180px; }
  .hbars li { grid-template-columns: minmax(0, 1fr) 80px auto; }
  .ch__num { font-size: var(--fs-section); }
  .copyrow { flex-direction: column; }
  .tabs a { padding: 0 10px; font-size: var(--fs-body); }
  svg.chart .axis { font-size: var(--fs-kpi-s); }
}

/* Leuchten oben (Johannes 09.10.): Lichtschein hinter dem Kundenlogo und in der mobilen Kopfzeile, jetzt direkt in .side, .side__logo und .topbar */
.viewas { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; background: #FFF4DA; border: 1px solid #E5C77A; border-radius: var(--r-m); padding: 10px 14px; margin: 0; font-size: var(--fs-body); }
.viewas .btn { min-height: 38px; }
.kpi__proj { font-size: var(--fs-caption); color: var(--ink-2); background: #F1F5EE; border-radius: var(--r-s); padding: 4px 8px; }
tr.is-total th, tr.is-total td { font-weight: 600; border-top: 2px solid var(--line); }

/* ---------------------------------------------------------------- Erfolgsbeteiligung (nur Admin, Doku 26 §9) */
.fee { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.2fr) auto; gap: 18px 28px; align-items: center; border-left: 4px solid var(--forest); background: linear-gradient(90deg, var(--sage), var(--card) 46%); }
.fee__main { display: grid; gap: 4px; }
.fee__main h2 { font-size: var(--fs-body); }
.fee__value { font: 600 var(--fs-kpi)/1.05 var(--font-ui); color: var(--forest); letter-spacing: -0.01em; }
.fee__value.is-missing { font: 600 var(--fs-section)/1.3 'Instrument Sans', sans-serif; color: var(--muted); }
.fee__eq { margin: 0; display: grid; gap: 4px; font-size: var(--fs-caption); }
.fee__eq div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px dotted var(--line); padding: 2px 0; }
.fee__eq div:last-child { border-bottom: 0; font-weight: 600; }
.fee__eq dt { color: var(--muted); }
.fee__eq dd { margin: 0; font-variant-numeric: tabular-nums; }
.fee__eq div:last-child dt { color: var(--ink); }
.fee__cta { display: grid; gap: 8px; justify-items: stretch; min-width: 220px; }
.fee__cta form { display: grid; }
@media (max-width: 1100px) { .fee { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .fee__cta { grid-column: 1 / -1; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); align-items: start; } }
@media (max-width: 640px) { .fee { grid-template-columns: minmax(0, 1fr); background: linear-gradient(180deg, var(--sage), var(--card) 40%); } }

/* Druckbare Kurzrechnung (A4) */
.invbody { background: #E6E9ED; }
.invbar { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 10px 16px; background: var(--card); border-bottom: 1px solid var(--line); }
.invbar form { margin: 0; }
.inv { position: relative; overflow: hidden; width: min(210mm, 100% - 32px); margin: 24px auto 48px; background: #fff; color: #1A1F2B; padding: 18mm 16mm 14mm; border: 1px solid var(--line-soft); box-shadow: none; font-size: var(--fs-caption); line-height: 1.45; }
.inv p { margin: 0; }
.inv__mark { position: absolute; inset: 38% -10% auto; text-align: center; transform: rotate(-24deg); font: 600 96px/1 'Instrument Sans', sans-serif; letter-spacing: .12em; color: rgba(179, 38, 30, .09); pointer-events: none; }
.inv__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding-bottom: 14px; border-bottom: 2px solid #1A1F2B; }
.inv__head img { width: 190px; height: auto; display: block; margin-top: 4px; }
.inv__title { text-align: right; display: grid; gap: 2px; }
.inv__title p:first-child { font-size: var(--fs-micro); font-weight: 600; letter-spacing: .14em; }
.inv__no { font: 600 var(--fs-kpi-s)/1.2 var(--font-ui); }
.inv__intro { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 18px 0; }
.inv__k { font-size: var(--fs-micro); font-weight: 600; letter-spacing: .14em; color: #5E6573; margin-bottom: 4px !important; }
.inv__lead { font: 600 var(--fs-section)/1.25 var(--font-ui); }
.inv__strong { font-weight: 600; }
.inv__meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 0 16px; padding: 10px 0; border-top: 1px solid #D8DCE2; border-bottom: 1px solid #D8DCE2; }
.inv__meta dt { font-size: var(--fs-micro); font-weight: 600; letter-spacing: .12em; color: #5E6573; }
.inv__meta dd { margin: 2px 0 0; font-weight: 600; }
.inv__tbl { width: 100%; border-collapse: collapse; margin: 0 0 14px; font-size: var(--fs-caption); }
.inv__tbl th, .inv__tbl td { padding: 6px 0; border-bottom: 1px solid #E8EAEE; text-align: left; vertical-align: top; font-weight: 400; }
.inv__tbl thead th { font-size: var(--fs-micro); font-weight: 600; letter-spacing: .12em; color: #5E6573; border-bottom: 1px solid #1A1F2B; }
.inv__tbl .n { text-align: right; padding-left: 16px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.inv__calc { margin-left: auto; max-width: 125mm; }
.inv__sum th, .inv__sum td { border-top: 2px solid #1A1F2B; border-bottom: 0; padding-top: 8px; font-size: var(--fs-body); }
.inv__small { font-size: var(--fs-micro); color: #5E6573; margin-top: 6px !important; }
.inv__foot { display: grid; grid-template-columns: 1fr 1.3fr; gap: 24px; margin-top: 18px; padding-top: 12px; border-top: 1px solid #D8DCE2; font-size: var(--fs-micro); }
@media (max-width: 640px) { .inv { padding: 20px 16px; } .inv__intro, .inv__foot { grid-template-columns: 1fr; } .inv__meta { grid-template-columns: 1fr 1fr; } .inv__head img { width: 140px; } .inv__mark { font-size: var(--fs-kpi); } }
@media print {
  @page { size: A4; margin: 0; }
  .invbody { background: #fff; }
  .invbar { display: none !important; }
  .inv { width: 210mm; min-height: 297mm; margin: 0; box-shadow: none; }
}
.inv__test { margin: -6mm 0 12px !important; padding: 6px 10px; border-radius: var(--r-s); background: #F8E4E1; color: #B3261E; font-size: var(--fs-micro); font-weight: 600; letter-spacing: .08em; text-align: center; }

/* KI-Kosten (nur Admin, CT-77) */
.aic__days { width: 100%; }
.aic__days th { width: 7.5em; font-weight: 500; white-space: nowrap; }
.aic__bar { width: 100%; padding: 6px 8px; }
.aic__bar span { display: inline-block; height: 12px; vertical-align: middle; min-width: 0; }
.aic__a { background: #1E5C7A; border-radius: var(--r-s) 0 0 var(--r-s); }
.aic__k { background: #D2A85C; border-radius: 0 var(--r-s) var(--r-s) 0; }
.sw.aic__a, .sw.aic__k { display: inline-block; width: 12px; height: 12px; border-radius: var(--r-s); vertical-align: -1px; margin: 0 4px 0 10px; }
.aic__fund { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; font-size: var(--fs-caption); }
.aic__fund li { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px dotted var(--line); padding: 2px 0; }
.choice-inline { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-caption); min-height: 44px; cursor: pointer; }
/* Kontrollkästchen mindestens 24 px (WCAG 2.5.8); die ganze Beschriftung ist Trefferfläche, 44 px hoch (Durchsicht 20.10.2026) */
.choice-inline input[type="checkbox"] { width: 24px; height: 24px; margin: 0; flex: none; accent-color: var(--forest); }
.main code { overflow-wrap: anywhere; word-break: break-word; }

/* SEO (Recht kpi.seo) */
.seo-caps { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 14px 24px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.seo-caps li { display: grid; gap: 6px; align-content: start; min-width: 0; }
.seo-caps__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 12px; font-size: var(--fs-body); }
.seo-caps__val { font-weight: 600; white-space: nowrap; }
.seo-caps__bar { display: block; height: 10px; background: #E8EAEE; border-radius: var(--r-s); overflow: hidden; }
.seo-caps__bar span { display: block; height: 100%; background: var(--data); }
.seo-caps__bar.is-warn span { background: var(--warn); }
.seo-caps__bar.is-over span { background: var(--error); }
/* Bezugsrahmen, damit unsichtbare Screenreader-Texte in breiten Tabellen im Scrollbereich bleiben (sonst wird die Seite auf dem Telefon breiter) */
.tablewrap.seo-scroll { position: relative; }
.seo-table tbody th { color: var(--ink); font-size: var(--fs-body); font-weight: 600; }
.seo-table tbody th.seo-dev { color: var(--ink-2); font-size: var(--fs-caption); font-weight: 500; white-space: nowrap; }
.seo-table tbody th[scope="rowgroup"], .seo-table tbody th[scope="row"]:not(.seo-dev) { min-width: 10em; }
.seo-table .mono { overflow-wrap: normal; white-space: nowrap; }
.seo-table td.seo-rec { white-space: nowrap; }
.seo-table td.seo-hint { min-width: 16em; }
.seo-table td.seo-wrap { white-space: normal; min-width: 8em; }
.seo-rank tbody + tbody { border-top: 2px solid var(--line); }
.seo-gsc { border-left: 2px solid var(--line); background: #F5F6F8; }
.seo-state { color: var(--ink-2); font-size: var(--fs-caption); white-space: nowrap; }
.seo-pack { white-space: nowrap; }
/* Top-Keywords (30.10.2026): Sortierknöpfe, Platz/Veränderung je Gerät untereinander, sortierbare Spaltenköpfe als Links */
.kw-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.kw-sort { max-width: 100%; overflow-x: auto; }
.kw-table td.kw-two { white-space: nowrap; }
.kw-dev { display: block; line-height: 1.5; }
.kw-dev__l { display: inline-block; min-width: 4.4em; color: var(--muted); font-size: var(--fs-caption); text-align: left; }
.kw-table thead th a { color: inherit; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.kw-table thead th[aria-sort] a { color: var(--ink); text-decoration-color: currentColor; }
.kw-ch .rk__d.note { color: var(--muted); }
.kw-g { flex: 1 1 0; min-width: 0; }
/* Onpage-Chancen der Woche (30.10.2026) */
.op-det { grid-column: 1 / -1; font-size: var(--fs-caption); }
.op-det > summary { cursor: pointer; color: var(--accent, #1C5CAB); min-height: 32px; display: inline-flex; align-items: center; }
.op-todo { margin: 4px 0 0; padding-left: 18px; display: grid; gap: 4px; color: var(--ink-2); }
.rk .op-todo li { display: list-item; padding: 0; border: 0; font-size: var(--fs-caption); }
@media (min-width: 900px) { .op-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; } }
/* KI-Zitierungs-Stichprobe (30.10.2026) */
.kz-trend { max-width: 640px; }
.kz-matrix tbody th[scope="row"] { min-width: 16em; font-weight: 500; font-size: var(--fs-caption); }
.kz-matrix td { white-space: nowrap; }
.kz-src { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 6px 24px; }
.kz-src li { display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--line-soft); padding: 6px 0; min-width: 0; }
.kz-src .mono { overflow-wrap: anywhere; }
.kz-ex { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 10px; }
/* KI-Sichtbarkeit: Findet die KI-Suche uns? (03.11.2026) · Erklärung, Trichter je KI als volle Zeilen (kein Kachelraster), Fragen mit Status, Eigentümer ruhig in Blau */
.sf-lead { margin: 8px 0 0; max-width: 72ch; color: var(--ink); line-height: 1.55; }
.sf-fun { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 12px; }
.sf-fun li { display: grid; grid-template-columns: minmax(6.5em, 10em) minmax(0, 1fr); gap: 4px 16px; align-items: center; padding-bottom: 12px; border-bottom: 1px solid var(--line-soft); }
.sf-fun li:last-child { border-bottom: 0; padding-bottom: 0; }
.sf-fun__e { font-weight: 600; }
.sf-fun__s, .sf-own { display: grid; gap: 6px; min-width: 0; }
.sf-own { margin-top: 12px; max-width: 640px; }
.sf-step { display: grid; grid-template-columns: 9.5em minmax(48px, 1fr) minmax(7.5em, max-content); gap: 10px; align-items: center; font-size: var(--fs-caption); }
.sf-step__k { color: var(--muted); }
.sf-step__v { font-weight: 600; text-align: right; white-space: nowrap; }
.sf-bar { height: 10px; background: #E8EAEE; border-radius: var(--r-s); overflow: hidden; }
.sf-bar span { display: block; height: 100%; }
.sf-bar__f { background: #8FB3DB; }
.sf-bar__z { background: #1C5CAB; }
.sf-q { list-style: none; margin: 8px 0 0; padding: 0; display: grid; }
.sf-q li { padding: 10px 0; border-bottom: 1px solid var(--line-soft); display: grid; gap: 6px; }
.sf-q__t { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.sf-q__s { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: var(--fs-caption); }
.sf-chip { display: inline-flex; align-items: center; gap: 6px; }
.sf-chip__e { color: var(--muted); }
.sf-q__h { margin: 0; font-size: var(--fs-caption); color: var(--muted); max-width: 72ch; }
.sf-k .rl__t { font-size: var(--fs-body); }
@media (max-width: 640px) {
  .sf-fun li { grid-template-columns: minmax(0, 1fr); }
  .sf-step { grid-template-columns: 6.5em minmax(40px, 1fr) max-content; gap: 8px; }
  .sf-k li { grid-template-columns: 2em minmax(0, 1fr) auto; }
}
@media (max-width: 640px) { .kw-sort { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; } .kw-sort a { justify-content: center; min-height: 44px; } }
.kw-table th, .kw-table td { padding-left: 8px; padding-right: 8px; }
.kw-table tbody th[scope="row"] { min-width: 8.5em; }
@media (min-width: 900px) { .kw-ch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; } .kw-ch li:nth-last-child(2):nth-child(odd) { border-bottom: 0; } }
@media (max-width: 640px) {
  .seo-table tbody th[scope="rowgroup"], .seo-table tbody th[scope="row"]:not(.seo-dev) { min-width: 7.5em; }
  .seo-table th, .seo-table td { padding: 8px 6px; }
}
/* ---------------------------------------------------------------- Belegungsbericht je Chalet (Wunsch der Geschäftsführung, 12.10.2026)
   Belegt rot (gefüllt, weiße Ziffer 6,6:1), frei grün (hell mit grünem Rand, dunkelgrüne Ziffer 7,8:1), Eigentümer violett (gefüllt mit
   weißem Innenring, 8,1:1), gesperrt grau gestreift (≥ 7:1), keine Daten sehr hell schraffiert mit gestricheltem Rand (≥ 4,9:1), heute mit dunklem Rahmen.
   Auch ohne Farbe unterscheidbar: dunkel/gefüllt gegen hell/umrandet, Muster für gesperrt und keine Daten, Text in Legende und Tooltip. */
.hrep { --occ: #1C5CAB; --occ-soft: #A9C4E8; --free-bg: #FFFFFF; --free-line: #C5CAD3; --free-ink: #1A1F2B; --own: #4C3FA8; --blk: #C6CBD3; --blk-ink: #1F2522; --nod: #F5F6F8; --nod-line: #C6CBD3;
  display: grid; gap: var(--gap); min-width: 0; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.hrep__years a { min-width: 64px; justify-content: center; }
.hrep__notes { display: grid; gap: 4px; margin-top: calc(var(--gap) * -0.5); }
.hrep .panel > h3 { font-size: var(--fs-section); }
.hrep .panel > h3 + .note { margin-top: 4px; }
.sw.hrep__sw-occ { background: var(--occ); }
.sw.hrep__sw-fut { background: repeating-linear-gradient(-45deg, var(--occ) 0 3px, var(--occ-soft) 3px 6px); }
/* Monat für Monat: Balken aus der Grundlinie, Prozent über dem Balken; Ist bis gestern gefüllt, künftige Monate gestreift („ab heute gebucht“, Prognose) */
.mbars { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; }
.mbars li { display: grid; grid-template-rows: 176px auto; gap: 6px; min-width: 0; }
.mbars__track { position: relative; border-bottom: 2px solid #A5ABB5; }
.mbars__bar { position: absolute; left: 14%; right: 14%; bottom: 0; height: max(2px, calc(var(--h) * 144px)); background: var(--occ); border-radius: var(--r-s) var(--r-s) 0 0; overflow: hidden; }
.mbars__bar--fc { background: repeating-linear-gradient(-45deg, var(--occ) 0 4px, var(--occ-soft) 4px 8px); }
.mbars__v { position: absolute; left: -6px; right: -6px; bottom: calc(var(--h) * 144px + 6px); text-align: center; font-size: var(--fs-caption); font-weight: 600; color: var(--ink); white-space: nowrap; }
.mbars li.is-nodata .mbars__v { color: var(--muted); font-weight: 500; }
.mbars__m { text-align: center; font-size: var(--fs-caption); color: var(--muted); }
.mbars li.is-now .mbars__m { color: var(--ink); font-weight: 600; }
/* Kalender: 12 Monatsblätter, Spalten nach verfügbarer Breite (Telefon 1, Tablet 2, Desktop 3–4) */
.hcal__legend { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: var(--fs-body); color: var(--ink-2); }
.hcal__legend li { display: inline-flex; align-items: center; gap: 8px; }
.hcal__legend .hd { width: 30px; min-height: 30px; font-size: var(--fs-caption); }
.hcal { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 268px), 1fr)); gap: 14px; margin-top: 16px; }
.hcal__m { border: 1px solid var(--line-soft); border-radius: var(--r-m); padding: 12px 10px 10px; background: #fff; min-width: 0; break-inside: avoid; display: flex; flex-direction: column; }
.hcal__m.is-now { border-color: var(--ink-2); }
.hcal__head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 0 4px 6px; }
.hcal__head h4 { margin: 0; font-size: var(--fs-section); font-weight: 600; line-height: 1.2; }
.hcal__rate { font-size: var(--fs-caption); font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.hcal__k { font-size: var(--fs-micro); font-weight: 500; color: var(--muted); }
table.hcal__t { border-collapse: separate; border-spacing: 3px; table-layout: fixed; width: 100%; font-size: var(--fs-caption); }
.hcal__t th, .hcal__t td { padding: 0; border: 0; text-align: center; vertical-align: middle; }
.hcal__t th { font-size: var(--fs-micro); font-weight: 600; color: var(--muted); padding-bottom: 2px; }
.hd { display: grid; place-items: center; aspect-ratio: 1; min-height: 30px; border-radius: var(--r-s); font-size: var(--fs-caption); font-weight: 600; line-height: 1; box-sizing: border-box; }
.hd--booked { background: var(--occ); color: #fff; }
.hd--free { background: var(--free-bg); color: var(--free-ink); box-shadow: inset 0 0 0 1px var(--free-line); }
.hd--owner { background: #ECE9FA; color: #3F3591; box-shadow: inset 0 0 0 1.5px #8E84CF; }   /* Eigentümer gedämpft violett (Text 8 : 1); belegt Akzentblau, frei weiß mit Haarlinie; Rot nur für Fehler (B S8, 31.10.2026) */
.hd--blocked { background-color: var(--blk); background-image: repeating-linear-gradient(-45deg, transparent 0 5px, rgba(31, 37, 34, .16) 5px 7px); color: var(--blk-ink); }
.hd--nodata { background-color: var(--nod); background-image: repeating-linear-gradient(45deg, transparent 0 4px, #E3E6EA 4px 5px); border: 1px dashed var(--nod-line); color: var(--muted); font-weight: 500; }
.hd.is-today { outline: 3px solid var(--ink); outline-offset: 1px; }
.hcal__sum { margin: auto 4px 0; padding-top: 8px; display: grid; gap: 2px; font-size: var(--fs-caption); }
.hcal__sum b { font-weight: 600; }
.hcal__sum span { color: var(--muted); font-size: var(--fs-caption); }
@media (max-width: 720px) {
  .mbars { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .mbars li { grid-template-rows: none; grid-template-columns: 2.6em minmax(0, 1fr); align-items: center; gap: 10px; }
  .mbars__m { order: -1; text-align: left; font-size: var(--fs-caption); }
  .mbars__track { height: 26px; border-bottom: 0; border-left: 2px solid #A5ABB5; }
  .mbars__bar { left: 0; right: auto; top: 3px; bottom: 3px; height: auto; width: max(2px, calc(var(--h) * (100% - 4.2em))); border-radius: 0 var(--r-s) var(--r-s) 0; }
  .mbars__v { left: calc(var(--h) * (100% - 4.2em) + 8px); right: auto; bottom: auto; top: 50%; transform: translateY(-50%); text-align: left; }
}
@media (max-width: 640px) {
  .kpis--hrep { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpis--hrep .kpi__value { font-size: var(--fs-kpi-s); }
  .hrep__years { display: flex; width: 100%; }
  .hrep__years a { flex: 1; min-width: 0; padding: 0 8px; }
  .hd { font-size: var(--fs-body); }
  .hcal__head h4 { font-size: var(--fs-section); }
  table.hcal__t { border-spacing: 4px; }
}
@media print { .hrep__years, .hrep__notes details { display: none; } .hcal { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Monatsunterlagen und Auszahlungen (Regel Johannes 12.10.2026, Migration 0016) */
.tag--own { background: var(--sage); color: #1E4A32; }
.tag--all { background: #EEF0F3; color: var(--ink-2); }
.mu-portal { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 14px; margin-top: 10px; }
.mu-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mu-list li { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.mu-docs { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 12px; }
.mu-doc { border: 1px solid var(--line); border-radius: var(--r-m); padding: 12px 14px; display: grid; gap: 8px; background: #fff; min-width: 0; }
.mu-doc__head { display: flex; gap: 10px; align-items: center; min-width: 0; }
.mu-doc__head > span:last-child { display: grid; min-width: 0; }
.mu-doc__head b { overflow-wrap: anywhere; }
.mu-doc__det { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.mu-doc__fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr); gap: 10px 14px; }
.form .mu-doc__fields label { font-size: var(--fs-caption); }
.mu-preview { gap: var(--gap); }
.mu-table th, .mu-table td { font-size: var(--fs-caption); }
.mu-confirm { display: flex; gap: 8px; align-items: center; margin: 0; }
.mu-confirm input { width: 8.5em; min-height: 44px; border: 1px solid var(--line); border-radius: var(--r-s); padding: 0 8px; font-size: 16px; background: #fff; }
.mu-confirm .btn { min-height: 44px; padding: 0 12px; }
.mu-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mu-bars li { display: grid; grid-template-columns: 3em minmax(0, 1fr) 6.5em; gap: 10px; align-items: center; font-size: var(--fs-caption); }
.mu-bars__b { height: 10px; background: #E8EAEE; border-radius: var(--r-s); overflow: hidden; }
.mu-bars__b span { display: block; height: 100%; background: var(--forest); }
.mu-bars__b span.is-neg { background: var(--warn); }
.mu-bars__v { text-align: right; font-weight: 600; white-space: nowrap; }
.panel details summary { cursor: pointer; color: var(--data); font-weight: 600; min-height: 44px; display: flex; align-items: center; }
/* Telefon: Tabellen als Zeilenblöcke, Formularfelder untereinander – kein waagerechtes Scrollen */
@media (max-width: 760px) {
  .mu-doc__fields, .mu-portal { grid-template-columns: minmax(0, 1fr); }
  .mu-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .mu-table, .mu-table tbody, .mu-table tr, .mu-table th, .mu-table td { display: block; width: 100%; }
  .mu-table tr { border: 1px solid var(--line-soft); border-radius: var(--r-m); padding: 6px 10px; margin-top: 8px; }
  .mu-table th[scope="row"] { font-size: var(--fs-body); color: var(--ink); padding: 4px 0; border: 0; }
  .mu-table td { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border: 0; text-align: right; white-space: normal; }
  .mu-table td[data-label]::before { content: attr(data-label); color: var(--muted); text-align: left; font-weight: 600; }
  .mu-table td:empty { display: none; }
  .mu-table tr.is-total { border: 2px solid var(--line); }
  .mu-table tr.is-total th, .mu-table tr.is-total td { border-top: 0; }
  .mu-confirm { flex-wrap: wrap; justify-content: flex-end; }
  .mu-bars li { grid-template-columns: 2.6em minmax(0, 1fr) 5.6em; }
}

/* Wer sieht was (Rechte-Übersicht) und kompakte Rechte in der Personenliste */
.sees summary { cursor: pointer; color: var(--ink-2); font-weight: 600; min-height: 32px; display: list-item; }
.sees ul { margin: 6px 0 0; padding-left: 18px; color: var(--muted); }
.form .perm { align-items: flex-start; }
.form .perm input { margin-top: 5px; }
.perm > span { display: grid; gap: 0; }
.perm__where { font-size: var(--fs-caption); }
.rights__wrap { max-height: calc(100vh - 120px); overflow: auto; border: 1px solid var(--line-soft); border-radius: var(--r-m); }
table.rights { border-collapse: separate; border-spacing: 0; min-width: 100%; }
table.rights th, table.rights td { border-bottom: 1px solid var(--line-soft); background: var(--card); }
table.rights thead th { position: sticky; top: 0; z-index: 2; vertical-align: bottom; }
table.rights thead tr:nth-child(2) th { top: 37px; }
table.rights tbody th[scope="row"], table.rights .rights__corner { position: sticky; left: 0; z-index: 1; min-width: 240px; max-width: 300px; box-shadow: 1px 0 0 var(--line-soft); }
table.rights .rights__corner { z-index: 3; }
table.rights tbody th[scope="row"] { font-weight: 400; display: table-cell; }
.rights__label { display: block; font-weight: 600; }
table.rights tbody th[scope="row"] .note { display: block; font-size: var(--fs-caption); }
table.rights td.rights__allcell { background: var(--ivory); box-shadow: inset -1px 0 0 var(--line); }
.rights__who--all { background: var(--ivory) !important; color: var(--ink-2); }
.rights__grp { text-align: center; font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); border-left: 2px solid var(--line); height: 37px; box-sizing: border-box; }
.rights__who { padding: 8px 6px; text-align: center; min-width: 52px; font-weight: 600; }
.rights__name { display: block; writing-mode: vertical-rl; transform: rotate(180deg); max-height: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0 auto 6px; font-size: var(--fs-caption); line-height: 1.2; }
.rights__houses { display: block; font-size: var(--fs-micro); color: var(--muted); white-space: nowrap; }
table.rights td { text-align: center; vertical-align: middle; padding: 0; }
table.rights td input { width: 24px; height: 24px; margin: 10px; cursor: pointer; accent-color: var(--forest, #1D3B2E); }
.rights__na { color: var(--muted); }
table.rights tr.rights__group th { background: var(--ivory); font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); padding: 8px 10px; position: sticky; left: 0; }
table.rights tbody tr:not(.rights__group):hover td, table.rights tbody tr:not(.rights__group):hover th { background: #F7F8FA; }
@media (max-width: 640px) { table.rights tbody th[scope="row"], table.rights .rights__corner { min-width: 168px; max-width: 190px; } .rights__name { max-height: 110px; } }
/* ---------------------------------------------------------------- Pilot „Mein Chalet“ (Eigentümer-Startseite, 12.10.2026) – wirkt nur innerhalb .mch
   bzw. auf Seiten mit .mch: Datenflächen weiß statt ivory, Seite leicht warmgrau (Entscheidung B13 offen), Leitwerte in Literata mit tabellarischen
   Ziffern, Zustand heute in der Formsprache des Kalenders. Telefon: 2 × 2 Leitwerte, Kalender mit laufendem Monat und Knopf für alle Monate. */
/* Hülle seit Rollout C .mch (Regeln im Abschnitt „Rollout c“); .mc ist der Säulenbaustein des Piloten */
.mc-head { display: grid; gap: 10px; }
.mc-head__main { display: grid; gap: 8px; }
.mc-head h1 { font-size: var(--fs-title); }
.mc-head__nr { font: 500 var(--fs-caption)/1 'Instrument Sans', 'Segoe UI', sans-serif; color: var(--muted); letter-spacing: 0; white-space: nowrap; vertical-align: .18em; margin-left: .2em; }
.mc-today { display: flex; align-items: center; gap: 6px 12px; font-size: var(--fs-section); color: var(--ink-2); }
.mc-today b { color: var(--ink); font-weight: 600; }
.mc-today .hd { width: 34px; min-height: 34px; font-size: var(--fs-caption); flex: none; }
.mc-fresh { font-size: var(--fs-caption); color: var(--muted); }
.mc-fresh.is-stale .st { font-weight: 600; color: var(--warn); }
.mc-switch { display: flex; flex-wrap: wrap; gap: 8px; }
.mc-switch a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--line); border-radius: var(--r-s); background: #fff; color: var(--ink-2); font-weight: 600; text-decoration: none; }
.mc-switch a:hover { border-color: var(--ink-2); }
.mc-switch a[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.mc-pick { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mc-pick label { font-weight: 600; color: var(--ink-2); }
.mc-pick select { min-height: 44px; border: 1px solid var(--line); border-radius: var(--r-s); background: #fff; padding: 0 10px; font-size: 16px; color: var(--ink); }
/* Leitwerte: ein Band mit Haarlinien statt vier Karten */
.mc-kpis { background: #fff; border: 1px solid var(--mc-line); border-radius: var(--r-m); overflow: hidden; }
.mc-cap { font-size: var(--fs-caption); font-weight: 600; color: var(--muted); padding: 12px 20px 10px; }
.mc-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line-soft); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); margin: 0; }
.mc-tiles--1 { grid-template-columns: minmax(0, 1fr); }
.mc-tiles--3 > :last-child { grid-column: 1 / -1; }
.mc-tile { background: #fff; padding: 16px 20px 18px; min-width: 0; display: grid; gap: 6px; align-content: start; }
.mc-tile dt { font-size: var(--fs-body); font-weight: 600; color: var(--ink-2); }
.mc-tile dd { margin: 0; }
.mc-tile__v { font: 600 var(--fs-kpi)/1.08 var(--font-ui); font-variant-numeric: tabular-nums lining-nums; letter-spacing: -0.01em; color: var(--ink); white-space: nowrap; }
.mc-tile__v.is-missing { font: 600 var(--fs-body)/1.35 'Instrument Sans', 'Segoe UI', sans-serif; color: var(--muted); white-space: normal; letter-spacing: 0; }
.mc-tile__c { display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; font-size: var(--fs-caption); color: var(--muted); }
.mc-how summary { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 20px; cursor: pointer; color: var(--data); font-size: var(--fs-caption); font-weight: 600; list-style: none; }
.mc-how summary::-webkit-details-marker { display: none; }
.mc-how[open] summary { border-bottom: 1px solid var(--line-soft); }
.mc-how .facts { margin: 0; padding: 12px 20px 16px; font-size: var(--fs-caption); }
@media (min-width: 1024px) { .mc-tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .mc-tiles--3 > :last-child { grid-column: auto; } }
@media (min-width: 1280px) { .mc-tiles--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Kalender, Monat für Monat, Aufenthalte, Auszahlungen */
.mc-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; font-size: var(--fs-body); }
.mc-cal__toggle { display: none; }
.mc-all { margin-top: 4px; }
.mc-all a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.mc-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--gap); align-items: start; }
.mc-grid--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mc-stays, .mc-rows { list-style: none; margin: 4px 0 0; padding: 0; }
.mc-stays li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: baseline; padding: 11px 0; border-top: 1px solid var(--line-soft); }
.mc-stays li:first-child, .mc-rows li:first-child { border-top: 0; }
.mc-stays__d { font-weight: 600; }
.mc-stays__n { color: var(--ink-2); white-space: nowrap; }
.mc-stays__w { grid-column: 1 / -1; font-size: var(--fs-caption); color: var(--muted); }
.mc-rows li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line-soft); }
.mc-rows li > span:first-child { display: grid; gap: 2px; min-width: 0; }
.mc-rows__v { font-weight: 600; white-space: nowrap; }
@media (max-width: 1180px) { .mc-grid { grid-template-columns: minmax(0, 1fr); } }
/* Telefon und Tablet (Navigation als Panel): Kalender kompakt – Tablet laufender und nächster Monat, Telefon nur der laufende; Knopf für alle zwölf */
@media (max-width: 1023px) {
  .mc-cal__toggle:not([hidden]) { display: inline-flex; margin-top: 12px; }
  .mc-cal.is-collapsed .hcal__m:not(.is-now, .is-now + .hcal__m) { display: none; }
}
@media (max-width: 640px) {
  .mc-head h1 { font-size: var(--fs-title); }
  .mc-today { font-size: var(--fs-body); align-items: flex-start; }
  .mc-today .hd { width: 30px; min-height: 30px; font-size: var(--fs-caption); }
  .mc-cap { padding: 10px 14px 8px; }
  .mc-tile { padding: 12px 14px 14px; gap: 4px; }
  .mc-tile dt { font-size: var(--fs-caption); }
  .mc-tile__v { font-size: var(--fs-kpi); }
  .mc-how summary { padding: 0 14px; }
  .mc-how .facts { grid-template-columns: minmax(0, 1fr); gap: 2px 0; padding: 10px 14px 14px; }
  .mc-how .facts dd { margin-bottom: 8px; }
  .mc-cal__toggle:not([hidden]) { display: flex; width: 100%; }
  .mc-cal.is-collapsed .is-now + .hcal__m { display: none; }
  .mc-switch a { flex: 1 1 auto; justify-content: center; padding: 0 12px; }
}
/* ---------------------------------------------------------------- Kampagnen-Erklärungen (Migration 0019, 13.10.2026): Karten unter Marketing und auf
   /v2/plan, kurzer Abschnitt auf „Mein Chalet“. Karten einspaltig auf dem Telefon; die fünf Teile sind <details> (v2.js klappt sie auf dem Telefon zu,
   ohne JavaScript bleiben sie offen). Lange Wörter brechen um – kein waagerechtes Scrollen bei 390 px. */
.cn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: var(--gap); margin-top: 12px; align-items: start; }
.cn { background: #fff; border: 1px solid var(--line); border-radius: var(--r-m); padding: 16px 18px; display: grid; gap: 10px; min-width: 0; overflow-wrap: anywhere; }
.cn__head { display: grid; gap: 4px; }
.cn__head .eyebrow { margin: 0; }
.cn__head h3 { font-size: var(--fs-section); }
.cn__state { margin-top: 2px; font-size: var(--fs-caption); }
.cn__state .st { align-items: flex-start; }
.cn__state .st svg { margin-top: 3px; }
.cn__parts { display: grid; border-top: 1px solid var(--line-soft); }
.cn .cn__part { border-bottom: 1px solid var(--line-soft); }
.cn .cn__part > summary { min-height: 44px; display: flex; align-items: center; gap: 8px; cursor: pointer; color: var(--ink); font-weight: 600; font-size: var(--fs-body); list-style: none; }
.cn .cn__part > summary::-webkit-details-marker { display: none; }
.cn .cn__part > summary::after { content: ''; margin: 0 4px 0 auto; width: 8px; height: 8px; flex: none; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: translateY(-2px) rotate(45deg); }
.cn .cn__part[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.cn__text { display: grid; gap: 8px; padding: 0 0 12px; font-size: var(--fs-body); color: var(--ink-2); max-width: 70ch; }
.cn__foot { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; }
.cn-intro { max-width: 72ch; }
.cn-list { list-style: none; margin: 8px 0 0; padding: 0; }
.cn-list li { display: grid; gap: 2px; padding: 12px 0; border-top: 1px solid var(--line-soft); min-width: 0; overflow-wrap: anywhere; }
.cn-list li:first-child { border-top: 0; }
.cn-list .eyebrow { margin: 0; }
.cn-list dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 2px 12px; margin: 6px 0 0; font-size: var(--fs-body); }
.cn-list dt { color: var(--muted); }
.cn-list dd { margin: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
@media (max-width: 640px) {
  .cn { padding: 12px 14px; }
  .cn__foot .btn { width: 100%; }
  .cn__foot form.inline { display: block; width: 100%; }
  .cn-list dl { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .cn-list dd { margin-bottom: 6px; }
}
/* ---------------------------------------------------------------- Täglicher Stand je Kampagne (Migration 0022, 13.10.2026): Karten wie die Erklärungen,
   Kennzahlen- und Variantentabellen in .tablewrap (scrollen nur in sich, nie die Seite bei 390 px). */
.ks h4 { margin: 0 0 4px; font-size: var(--fs-body); font-weight: 600; }
.ks__since { margin: 0; font-size: var(--fs-body); }
.ks .tablewrap { margin-top: 4px; }
/* .cn bricht lange Wörter überall um (overflow-wrap: anywhere) – in Tabellen würde das die Spalten auf Buchstabenbreite drücken */
.ks table { font-size: var(--fs-caption); overflow-wrap: normal; }
.ks table th, .ks table td { padding: 8px 8px; }
.ks table thead th { white-space: nowrap; }
.ks table th[scope="row"] { font-weight: 500; min-width: 8.5em; }
.ks__test { display: grid; gap: 4px; padding-top: 10px; border-top: 1px solid var(--line-soft); min-width: 0; }
.ks__lead { margin: 4px 0 0; font-size: var(--fs-body); }
.ks__changes { padding-top: 10px; border-top: 1px solid var(--line-soft); }
.ks__changes ul { margin: 0; padding-left: 18px; font-size: var(--fs-body); display: grid; gap: 4px; }
.ks__est { margin: 0; }
.ks-line { margin: 6px 0 0; }
.ks-owner { margin-top: var(--gap); }

/* ---------------------------------------------------------------- Visualisierung (Doku 29, Pilot Übersicht 19.10.2026)
   Farbcode: Ist = Waldgrün, Vergleich (Vorjahr/Vorperiode) = Blau, Soll = Nachtwald-Strich. Erklärungen hinter ⓘ (natives details),
   Werte zusätzlich als Tabelle. Keine Animation; Hover-Hinweise nur als Ergänzung (Werte stehen am Bild oder in der Tabelle). */
:root { --cmp: #8A919D; --track: #E8EAEE; --track-2: #D6DCE6; }   /* Vergleich Orange, Wochenende kühles Grau (Stripe-Stil 29.10.2026) */
.lroot { display: grid; gap: var(--gap); min-width: 0; }

/* Live-Leiste */
.lv { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-m); padding: 9px 58px 9px 16px; min-height: 52px; }
.lv__head { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; font-size: var(--fs-body); margin: 0; }
.lv__state { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }   /* K20: ein Abstand zwischen „Aktualisiert“ und Zeit */
.lv__state--live { color: var(--good); } .lv__state--late { color: var(--warn); } .lv__state--stale { color: var(--error); } .lv__state--none, .lv__state--offline { color: var(--muted); }
.lv__detail { color: var(--ink-2); }
.lv__checked { color: var(--muted); font-size: var(--fs-caption); }
.lv__state--expired { color: var(--muted); }
.lv__reload { min-height: 44px; padding: 0 14px; border: 1px solid var(--ink); border-radius: var(--r-s); background: var(--card); color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; }
.lv__muted { color: var(--muted); }
.lv--late { border-color: #E2C98C; background: #FBF4E4; }
.lv--stale { border-color: #E3A39D; background: #FBEDEB; }
.lv__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: var(--fs-caption); color: var(--ink-2); }
.lv__src { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.lv__src time { color: var(--muted); }
.lv__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--good); flex: none; }
.lv__src--late .lv__dot { background: var(--warn); border-radius: var(--r-s); }
.lv__src--stale .lv__dot { background: var(--error); border-radius: var(--r-s); transform: rotate(45deg); }
.lv__src--off .lv__dot { background: none; border: 1.5px dashed var(--muted); }
.lv__flag { font-weight: 600; }
.lv__src--late .lv__flag { color: var(--warn); } .lv__src--stale .lv__flag { color: var(--error); } .lv__src--off .lv__flag { color: var(--muted); font-weight: 500; }
.lv > .info { flex: 1 0 100%; order: 9; min-width: 0; }
.lv > .info:not([open]) { margin-top: -4px; }
.lv > .info > summary { top: 4px; right: 6px; }
.lv__table th, .lv__table td { padding: 6px 8px; font-size: var(--fs-caption); }
.lv__table tbody th { color: var(--ink); font-size: var(--fs-caption); font-weight: 600; }

/* ⓘ und Tabellen-Symbol: Symbol oben rechts im Block, Inhalt öffnet im Fluss unter dem Titel (kein Overlay, keine Scroll-Sperre) */
.panel--v, .kpi--v { position: relative; }
.panel--v { container-type: inline-size; }
.info > summary { position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: var(--muted); cursor: pointer; list-style: none; }
.info > summary::-webkit-details-marker { display: none; }
.info > summary::marker { content: ''; }
.info > summary:hover { color: var(--ink); background: #EEF0F3; }
.info[open] > summary { color: var(--accent-ink); background: var(--accent-wash); }   /* K13: offen ohne schwarze Fläche */
.info--table > summary { right: 56px; }
.panel--v.has-tools-1 .panel__head > div:first-child, .panel--v.has-tools-1 > h2:first-child { padding-right: 46px; }   /* Platz für die Symbole nur neben dem Titel; Umschalter darunter volle Breite */
.panel--v.has-tools-2 .panel__head > div:first-child { padding-right: 92px; }
.panel--v .panel__head h2 { hyphens: auto; -webkit-hyphens: auto; }   /* lange Titel (z. B. „Buchungsverhalten“) trennen statt unter die Symbole zu laufen (Durchsicht 20.10.2026, 320 px) */
.seg--small a { white-space: nowrap; }
.panel--v .seg--small a { min-height: 44px; }
.info__body { margin: 2px 0 12px; background: #F5F6F8; border: 1px solid var(--line-soft); border-radius: var(--r-m); padding: 12px 14px; font-size: var(--fs-caption); display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.info__body p { margin: 0; }
.info__dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; margin: 0; }
.info__dl dt { color: var(--muted); }
.info__dl dd { margin: 0; overflow-wrap: anywhere; }
.info__body .tablewrap { margin-top: 0; background: var(--card); border-radius: var(--r-m); }
.info__close { justify-self: start; min-height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--card); color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; }
.kpi--v details.info { border-top: 0; padding-top: 0; margin-top: 0; }
.kpi--v .info > summary { top: 8px; right: 8px; min-height: 0; display: grid; font-size: 0; }
.kpi--v .info__body { margin: 0 0 4px; }
.kpi--v .info__dl { font-size: var(--fs-caption); margin: 0; }
/* Kennzahlkarten (breite Bildschirme): Erklärung als schmale Karte über dem Inhalt – die Karten sind zu schmal für den Text im Fluss;
   v2.js richtet sie links oder rechts aus, damit sie im Inhaltsbereich bleibt. Telefon: im Fluss unter dem Titel. */
@media (min-width: 641px) {
  .kpi--v .info__body { position: absolute; z-index: 30; top: 48px; left: -1px; width: min(380px, calc(100vw - 48px)); max-height: min(70vh, 540px); overflow: auto; margin: 0; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-float); }
  .kpi--v .info__body.is-right { left: auto; right: -1px; }
  .kpi--v.is-pop { z-index: 6; }
}

/* Kennzahlkarte mit Bild: mindestens 272 px (1 Spalte am Telefon, 2 am Tablet, 3 bei 1280–1599 px, 4 darüber) */
.kpis.kpis--v { grid-template-columns: repeat(auto-fill, minmax(min(100%, 17em), 1fr)); }
.kpi--v { container-type: inline-size; gap: 6px; padding: 16px 18px; }
.kpi--v .kpi__head { padding-right: 36px; min-height: 28px; }
.kpi__row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 4px 12px; min-width: 0; }
.kpi--v .kpi__value { font-size: var(--fs-kpi); }
.kpi--v .kpi__value.is-missing { font-size: var(--fs-section); }
.sp { flex: none; width: clamp(64px, 36cqi, 120px); height: auto; overflow: visible; margin-bottom: 4px; }
.sp__area { fill: rgba(31, 77, 58, .12); }
.sp__line { fill: none; stroke: var(--forest); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.sp__dot { fill: var(--forest); stroke: #fff; stroke-width: 1.5; }
.sp--bars rect { fill: rgba(31, 77, 58, .42); }
.sp--bars rect.is-last { fill: var(--forest); }
/* Vergleichszeilen mit Zeichen: feste Spalten Zeichen · Begriff · Wert, untereinander ausgerichtet; der Wert bricht in seiner Spalte um */
.cmp.cmp--m { display: grid; grid-template-columns: 12px 5.8em minmax(0, 1fr); gap: 2px 8px; align-items: center; }
.kpi__cmp--wide .cmp.cmp--m { grid-template-columns: 12px 7.6em minmax(0, 1fr); }
.cmp--m .cmp__k { min-width: 0; }
.cmp--m .cmp__v { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; min-width: 0; }
.kpi--v .kpi__cmp { margin-top: 2px; }

/* Bullet-Balken */
.bul { position: relative; height: 16px; margin: 4px 0 2px; }
.bul__track, .bul__ist, .bul__proj { position: absolute; top: 4px; height: 8px; border-radius: var(--r-s); }
.bul__track { left: 0; right: 0; background: var(--track); }
.bul__ist { left: 0; background: var(--forest); }
.bul__proj { border-radius: 0 var(--r-s) var(--r-s) 0; background: repeating-linear-gradient(135deg, rgba(31, 77, 58, .42) 0 3px, rgba(31, 77, 58, .14) 3px 6px); }
.bul__soll { position: absolute; top: 0; width: 3px; height: 16px; margin-left: -1.5px; background: var(--night); border-radius: var(--r-s); box-shadow: 0 0 0 2px var(--card); }
.bul__prev { position: absolute; top: 3px; width: 10px; height: 10px; margin-left: -5px; background: var(--cmp); transform: rotate(45deg); border-radius: var(--r-s); box-shadow: 0 0 0 2px var(--card); }

/* Zeichen in Legenden und Vergleichszeilen (dieselbe Form wie im Bild) */
.mk { display: inline-block; flex: none; width: 12px; height: 12px; vertical-align: -1px; }
.mk--ist { height: 8px; background: var(--forest); border-radius: var(--r-s); }
.mk--soll { width: 3px; height: 14px; margin: 0 4.5px; background: var(--night); border-radius: var(--r-s); }
.mk--prev { width: 9px; height: 9px; margin: 0 1.5px; background: var(--cmp); transform: rotate(45deg); border-radius: var(--r-s); }
.mk--proj { height: 8px; border-radius: 0 var(--r-s) var(--r-s) 0; background: repeating-linear-gradient(135deg, rgba(31, 77, 58, .5) 0 3px, rgba(31, 77, 58, .16) 3px 6px); }
.mk--prevline { height: 3px; background: var(--cmp); border-radius: var(--r-s); }
.mk--prevdash { height: 0; border-top: 3px dashed var(--cmp); }
.mk--area { height: 10px; background: rgba(31, 77, 58, .16); border-top: 2px solid var(--forest); }
.legend .mk { margin-right: 2px; }
.sw--we { background: var(--track-2); border: 1px solid #D8DCE2; }

/* Blöcke */
.panel__foot { margin-top: 12px; padding-top: 4px; border-top: 1px solid var(--line-soft); font-size: var(--fs-body); }
.panel__foot a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.grid2--pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.grid2--top { align-items: start; }
.v-narrow { display: none; }
.vstat { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin-top: 4px; }
.vstat__v { font-size: var(--fs-kpi); font-weight: 600; line-height: 1.1; letter-spacing: -0.01em; }
.vstat__k { color: var(--ink-2); font-size: var(--fs-body); max-width: 34ch; text-wrap: balance; }
.vmini { display: flex; flex-wrap: wrap; gap: 10px 32px; margin-top: 6px; }
.vmini > div { display: grid; gap: 2px; align-content: start; }
.vmini__k { font-size: var(--fs-caption); color: var(--muted); }
.vmini__v { font-size: var(--fs-kpi-s); font-weight: 600; line-height: 1.15; }
.vmini__s { font-size: var(--fs-body); font-weight: 600; line-height: 1.6; }
.vmini .delta { justify-self: start; }
.panel--v .legend { margin-top: 10px; }
.nw { white-space: nowrap; }
/* „Auf einen Blick“ am Telefon: erster Satz, der Rest über den Knopf (v2.js) */
.summary.is-short .sum__rest { display: none; }
.sum__more { margin-top: 6px; min-height: 44px; padding: 0; background: none; border: 0; color: #CFE3D6; font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.sum__more:focus-visible { outline-color: var(--on-night); }

/* Säulen je Monat */
/* Achsen und Monate als HTML in echter Schriftgröße; die Zeichenfläche dehnt sich (Linien ohne Verzerrung) */
.mc { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 8px; margin-top: 10px; }
.mc__y { position: relative; height: 220px; font-size: var(--fs-micro); color: var(--muted); }
.mc__y span { position: absolute; right: 0; transform: translateY(50%); line-height: 1; white-space: nowrap; }
.mc__plot { min-width: 0; }
.mc__svg { display: block; width: 100%; height: 220px; overflow: visible; }
.mc__svg .grid { stroke: #E8EAEE; stroke-width: 1; vector-effect: non-scaling-stroke; }
.mc__svg .base { stroke: #A5ABB5; stroke-width: 1; vector-effect: non-scaling-stroke; }
.mc__svg .mc__soll { stroke: var(--night); stroke-width: 2.5; stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; }
.mc__x { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); margin-top: 6px; font-size: var(--fs-micro); color: var(--muted); text-align: center; }
.mc__x .is-now { color: var(--ink); font-weight: 600; }
.sw--part { background: var(--forest); opacity: .5; }
.mc__svg .hit, .ar__svg .hit { fill: transparent; }
.mc__svg .hit:hover, .ar__svg .hit:hover { fill: rgba(26, 31, 43, .05); }
[data-tip] { cursor: default; }   /* K10: kein Fadenkreuz */

/* Monatsliste (Telefon) */
.ml { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; }
.ml__row { display: grid; grid-template-columns: 30px minmax(0, 1fr) 82px; gap: 10px; align-items: center; min-height: 28px; font-size: var(--fs-caption); }
.ml__m { color: var(--muted); }
.ml__row.is-now .ml__m { color: var(--ink); font-weight: 600; }
.ml__bar { position: relative; height: 16px; }
.ml__bar::before { content: ''; position: absolute; left: 0; right: 0; top: 4px; height: 8px; border-radius: var(--r-s); background: #EEF0F3; }
.ml__ist { position: absolute; left: 0; top: 4px; height: 8px; border-radius: var(--r-s); background: var(--forest); }
.ml__ist.is-part { opacity: .55; }
.ml__prev { position: absolute; top: 3px; width: 10px; height: 10px; margin-left: -5px; background: var(--cmp); transform: rotate(45deg); border-radius: 2px; box-shadow: 0 0 0 2px var(--card); }   /* 03.11.2026: Raute wie in der Legende (vorher durch den großen Radius ein Kreis) */
.ml__soll { position: absolute; top: 0; width: 3px; height: 16px; margin-left: -1.5px; background: var(--night); border-radius: var(--r-s); box-shadow: 0 0 0 2px var(--card); }
.ml__v { text-align: right; font-weight: 600; white-space: nowrap; }

/* Donut */
.dn { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 16px 28px; align-items: center; margin-top: 10px; }
.dn__svg { display: block; width: 180px; height: 180px; }
.dn__seg:hover { stroke-width: 28; }
.dn__n { font: 600 var(--fs-kpi) 'Instrument Sans', sans-serif; fill: var(--ink); }
.dn__k { font: var(--fs-caption) 'Instrument Sans', sans-serif; fill: var(--muted); }
.dn__legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.dn__row { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto 3.4em; gap: 10px; align-items: center; min-height: 44px; margin: 0 -8px; padding: 0 8px; border-radius: var(--r-m); font-size: var(--fs-body); color: var(--ink); text-decoration: none; }
a.dn__row:hover { background: #F5F6F8; }
a.dn__row .dn__v { color: var(--data); text-decoration: underline; text-underline-offset: 3px; }
.dn__legend li.is-zero .dn__row { color: var(--muted); }
.dn__v { font-weight: 600; text-align: right; }
.dn__p { color: var(--muted); text-align: right; font-size: var(--fs-caption); }
@container (max-width: 480px) { .dn { grid-template-columns: minmax(0, 1fr); justify-items: center; } .dn__legend { width: 100%; } }

/* Belegungsband */
.band { margin-top: 12px; }
.band__cols { display: grid; grid-template-columns: repeat(30, minmax(0, 1fr)); gap: 3px; height: 116px; }
.band__col { position: relative; background: #EEF0F3; border-radius: var(--r-s); }
.band__col.is-we { background: var(--track-2); }
.band__col.is-today { box-shadow: 0 0 0 2px var(--ink); }
.band__fill { position: absolute; left: 0; right: 0; bottom: 0; background: var(--forest); border-radius: var(--r-s); }
.band__prior { position: absolute; left: -1px; right: -1px; height: 3px; margin-bottom: -1.5px; background: var(--cmp); border-radius: var(--r-s); box-shadow: 0 0 0 1.5px var(--card); }
.band__col:hover { outline: 2px solid var(--ink-2); outline-offset: 1px; }
.band__axis { display: grid; grid-template-columns: repeat(30, minmax(0, 1fr)); gap: 3px; margin-top: 6px; font-size: var(--fs-micro); color: var(--muted); }
.band__tick { white-space: nowrap; overflow: hidden; }

/* Fläche mit Vergleichslinie */
.ar { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 8px; margin-top: 10px; }
.ar__y { position: relative; height: 170px; font-size: var(--fs-micro); color: var(--muted); }
.ar__y span { position: absolute; right: 0; transform: translateY(50%); line-height: 1; }
.ar__plot { min-width: 0; }
.ar__svg { display: block; width: 100%; height: 170px; overflow: visible; }
.ar__svg .grid { stroke: #E8EAEE; stroke-width: 1; vector-effect: non-scaling-stroke; }
.ar__line { fill: none; stroke: #2a78d6; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }   /* Stil-Rollout: wie die Kennzahlkurven der Übersicht */
.ar__prior { fill: none; stroke: #878D98; stroke-width: 1.25; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
/* Fix 30.10.2026 (Handy 390 px, SEO): .ovc { height: 100% } steht weiter unten und gewann gegen .ar__ovc; die Fläche wurde so hoch wie die
   ganze Plotspalte und schob die Datumsachse über die Überschrift des nächsten Diagramms. Doppelklasse gewinnt unabhängig von der Reihenfolge. */
.ovc.ar__ovc { height: auto; }
/* gestapelte Diagramme: Abstand zwischen Datumsachse und nächster Überschrift */
.ar + h3, .ar + .legend, .ar + .ar { margin-top: 24px; }
.ar__x { position: relative; height: 18px; margin-top: 4px; font-size: var(--fs-micro); color: var(--muted); }
.ar__x span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.ar__x span:first-child { transform: none; }
.ar__x span:last-child { transform: translateX(-100%); }

/* Hinweis beim Zeigen/Antippen (v2.js) */
.tip { white-space: pre-line; position: fixed; z-index: 60; max-width: min(320px, calc(100vw - 24px)); background: var(--night); color: var(--on-night); font-size: var(--fs-caption); line-height: 1.45; padding: 7px 10px; border-radius: var(--r-m); pointer-events: none; box-shadow: var(--shadow-float); }
.tip[hidden] { display: none; }


@media (max-width: 900px) { .grid2--pair { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .lv { padding: 6px 52px 6px 12px; min-height: 48px; border-radius: var(--r-s); }
  .lv__head { font-size: var(--fs-caption); }
  .lv__list { display: none; }
  .lv__detail .lv__muted { display: none; }
  .mc { grid-template-columns: 44px minmax(0, 1fr); }
  .v-wide { display: none; } .v-narrow { display: block; }
  .kpi--v { padding: 12px 14px; gap: 4px; }
  .info__dl { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .info__dl dt { color: var(--ink-2); font-weight: 600; margin-top: 6px; }
  .info__dl dt:first-child { margin-top: 0; }
  .band__cols { gap: 2px; height: 92px; }
  .band__axis { gap: 2px; }
  .band__wd { display: none; }
  .ar__y, .ar__svg { height: 140px; }
  .vstat__v { font-size: var(--fs-kpi); }
  .vmini { gap: 8px 24px; }
  .vmini__v { font-size: var(--fs-kpi-s); }
}
@media print { .lv, .info > summary, .tip { display: none !important; } }

/* ---- Rollout a: Belegung & Umsatz, Häuser, Chalet-Seite (Lageplan-Karte, Farbskala Auslastung, Liste je Chalet, Vorausschau) ----
   Farbskala in fünf Waldgrün-Stufen (siteplan.ts, geprüft mit palette-check); Werte stehen im Haus, im Hinweis und in der Tabelle. */
.sp-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px 36px; align-items: start; margin-top: 12px; }
.sp-grid--iso { grid-template-columns: minmax(0, 1fr); }
.sp-fig { margin: 0; min-width: 0; }
.sp2, .spi { display: block; width: 100%; height: auto; background: #F3EFE7; border-radius: var(--r-m); }
.sp2 { max-height: 700px; }
.sp__road { fill: #E6E9ED; }
.sp__walk { fill: #D6D3CB; stroke: #8F918B; stroke-width: 1.25; vector-effect: non-scaling-stroke; }
.sp__p rect { fill: var(--night); }
.sp__p text { fill: #fff; font: 600 var(--fs-kpi-s) 'Instrument Sans', sans-serif; text-anchor: middle; dominant-baseline: central; }
.sp__h polygon { stroke: rgba(26, 31, 43, .62); stroke-width: 1.4; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.sp__h--other polygon { stroke: #878D98; stroke-dasharray: 4 3; }
.sp__h.is-own polygon { stroke: var(--night); stroke-width: 3; }
.sp__h--data:hover polygon, .sp__h--nodata:hover polygon { stroke: var(--night); stroke-width: 2.6; }
.sp__code, .sp__val { text-anchor: middle; font-family: 'Instrument Sans', sans-serif; pointer-events: none; }
.sp__code { font-size: var(--fs-kpi-s); font-weight: 600; }
.sp__val { font-size: var(--fs-section); font-weight: 600; font-variant-numeric: tabular-nums; }
.spi .sp__h polygon { stroke-width: 1; }
.spi .sp__top { stroke: rgba(26, 31, 43, .7); }
.sp__lbl { text-anchor: middle; font: 600 var(--fs-section) 'Instrument Sans', sans-serif; fill: var(--ink); paint-order: stroke; stroke: #F7F8FA; stroke-width: 5px; stroke-linejoin: round; pointer-events: none; }
.sp__lc { font-weight: 600; }
.sp__lbl--other { fill: #5E6573; }
.sp-seg { flex: none; }
.sp-panel .panel__head > .sp-seg { margin-right: 96px; }
/* Legende der Farbskala */
.spl { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin-top: 10px; font-size: var(--fs-caption); color: var(--ink-2); }
.spl__k { width: 100%; margin: 0; color: var(--ink); font-weight: 600; }
.spl__scale, .spl__extra { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; }
.spl__scale li, .spl__extra li { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.spl__sw { flex: none; width: 16px; height: 16px; border-radius: var(--r-s); box-shadow: inset 0 0 0 1px rgba(26, 31, 43, .55); }
.spl__sw--nodata, .hb__sw--nodata { background: repeating-linear-gradient(45deg, #F5F6F8 0 3px, #B3B9C2 3px 5px); }
.spl__sw--other { background: #E8EAEE; box-shadow: inset 0 0 0 1px #878D98; }
/* Liste je Chalet: ganze Zeile führt zur Chalet-Seite */
.hb { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.hb__cap { margin: 0 0 6px; font-size: var(--fs-caption); font-weight: 600; color: var(--muted); }   /* welche Werte, welcher Zeitraum (Durchsicht W6) */
.hb__row { display: grid; grid-template-columns: 14px minmax(8.5em, 1.15fr) minmax(56px, 1fr) minmax(4.2em, max-content); gap: 4px 12px; align-items: center; min-height: 44px; margin: 0 -8px; padding: 3px 8px; border-radius: var(--r-m); color: var(--ink); text-decoration: none; font-size: var(--fs-body); }
.hb__row:hover { background: #F5F6F8; }
.hb__row.is-current { background: var(--sage); }
.hb__sw { width: 14px; height: 14px; border-radius: var(--r-s); box-shadow: inset 0 0 0 1px rgba(26, 31, 43, .55); }
.hb__n { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; min-width: 0; }
.hb__n b { color: var(--data); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.hb__nr { color: var(--muted); font-size: var(--fs-caption); }
.hb__meta { flex-basis: 100%; min-width: 0; overflow-wrap: anywhere; color: var(--muted); font-size: var(--fs-caption); line-height: 1.35; }   /* Eigentümernamen in der Zeile: umbrechen statt Überlauf bei 320 px (Gesamt-Review 20.10.) */
@media (max-width: 400px) { .hb__meta .nw { white-space: normal; } }
.hb__bar { position: relative; height: 10px; border-radius: var(--r-s); background: var(--track); overflow: hidden; }
.hb__bar > span { position: absolute; top: 0; bottom: 0; left: 0; background: var(--forest); border-radius: var(--r-s); }
.hb__bar--none { background: repeating-linear-gradient(45deg, #EEF0F3 0 4px, #E3E6EA 4px 6px); }
.hb__v { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hb__v.muted { font-weight: 500; font-size: var(--fs-caption); }
.sp-grid--iso .hb { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
/* Vorausschau: Stand 30/60/90 Tage neben der Kennzahl */
.bfw-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 8px 36px; align-items: start; }
.bfw { list-style: none; margin: 2px 0 0; padding: 0; }
.bfw li { display: grid; grid-template-columns: 8.4em 5.2em minmax(0, 1fr); gap: 2px 12px; align-items: center; min-height: 44px; border-top: 1px solid var(--line-soft); }
.bfw li:first-child { border-top: 0; }
.bfw__k { color: var(--muted); font-size: var(--fs-caption); }
.bfw__v { font-weight: 600; font-size: var(--fs-section); font-variant-numeric: tabular-nums; }
.bfw__s { color: var(--ink-2); font-size: var(--fs-caption); }
/* Chalet wechseln (Chalet-Seite) und Kennzahlen 2 × 2 */
.hchips { min-width: 0; }
.hchips__k { margin: 0 0 6px; font-size: var(--fs-caption); font-weight: 600; color: var(--muted); }   /* Zeitraum der Prozentwerte (Durchsicht W6) */
.hchips ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.hchip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--card); color: var(--ink); text-decoration: none; font-size: var(--fs-body); white-space: nowrap; }
.hchip:hover { border-color: var(--ink-2); }
.hchip.is-current { border-color: var(--night); box-shadow: inset 0 0 0 1px var(--night); background: var(--sage); }
.hchip__v { color: var(--ink-2); font-variant-numeric: tabular-nums; }
@media (min-width: 641px) and (max-width: 1599px) { .kpis.kpis--v.kpis--v2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1100px) {
  .sp-grid { grid-template-columns: minmax(0, 1fr); }
  .sp2 { max-height: none; max-width: 560px; margin: 0 auto; }
}
@media (max-width: 900px) { .bfw-grid { grid-template-columns: minmax(0, 1fr); } .sp-grid--iso .hb { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .sp-seg { display: none; }
  .sp2 .sp__code { font-size: var(--fs-kpi); }
  .hb__row { grid-template-columns: 14px minmax(0, 1fr) minmax(56px, 28%) minmax(4.2em, max-content); gap: 0 10px; }
  .hb__nr, .hb__own { display: none; }
  .sp2 .sp__val { font-size: var(--fs-kpi); }
  .bfw li { grid-template-columns: minmax(0, 1fr) auto; padding: 4px 0; }
  .bfw__s { grid-column: 1 / -1; }
  .hchips ul { flex-wrap: nowrap; overflow-x: auto; padding: 2px 2px 6px; scroll-snap-type: x proximity; }
  .hchips li { flex: none; scroll-snap-align: start; }
}

/* ---- Rollout b: Social & Klee, SEO, KI-Kosten ---- (Doku 29; Bausteine in src/ui2/charts-social.ts. Nur neue Klassen, keine Überschreibung
   bestehender Regeln. Farben aus der geprüften Palette über style-Attribute; Ist = Waldgrün.) */
/* Trichter: Beschriftung über dem Balken, Balken mittig */
.fn { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; }
.fn__step { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: baseline; }
.fn__l { font-size: var(--fs-caption); color: var(--ink-2); }
.fn__v { font-size: var(--fs-body); font-weight: 600; text-align: right; white-space: nowrap; }
.fn__rate { margin-left: 8px; font-size: var(--fs-caption); font-weight: 500; color: var(--muted); }
.fn__track { grid-column: 1 / -1; display: flex; justify-content: flex-start; height: 14px; background: #F5F6F8; border-radius: var(--r-s); }
.fn__bar { display: block; height: 14px; background: var(--forest); border-radius: var(--r-s); }
.fn__step.is-missing .fn__v { font-size: var(--fs-caption); font-weight: 500; color: var(--muted); }
.fnx { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 12px 28px; margin-top: 4px; }
.fnx__ch { min-width: 0; padding-top: 10px; border-top: 1px solid var(--line-soft); }
.fnx__ch h3 { font-size: var(--fs-body); }
.fnx__off { margin-top: 6px; font-size: var(--fs-caption); color: var(--muted); }
/* Gestapelter Balken */
.sb { display: flex; height: 26px; gap: 2px; margin: 6px 0 0; border-radius: var(--r-s); overflow: hidden; background: var(--track); }
.sb__seg { display: flex; align-items: center; justify-content: center; min-width: 2px; font-size: var(--fs-caption); font-weight: 600; color: var(--night); }
.sb__seg.is-dark { color: #fff; }
.sbr { display: grid; grid-template-columns: 7.4em minmax(0, 1fr); gap: 4px 12px; align-items: center; margin-top: 8px; }
.sbr__k { font-size: var(--fs-caption); color: var(--ink-2); line-height: 1.3; }
.sbr__k small { display: block; font-size: var(--fs-micro); color: var(--muted); }
.sbr .sb { margin: 0; }
.sbr__empty { font-size: var(--fs-caption); color: var(--muted); }
.sbg + .sbg { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.sbg h3 { font-size: var(--fs-body); }
.vstat--s .vstat__v { font-size: var(--fs-kpi); }
/* Sterne */
.st5 { display: block; flex: none; }
.st5__bg { fill: var(--track); }
.st5__fg { fill: #B5832B; }
.gsum { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 4px; }
.gsum__v { font-size: var(--fs-kpi); font-weight: 600; line-height: 1; letter-spacing: -0.01em; }
.gsum__k { flex-basis: 100%; font-size: var(--fs-caption); color: var(--muted); }
.sd { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; }
.sd__row { display: grid; grid-template-columns: 2.4em minmax(0, 1fr) 2.6em 3.2em; gap: 10px; align-items: center; min-height: 28px; font-size: var(--fs-caption); }
.sd__k { display: inline-flex; align-items: center; gap: 3px; color: var(--ink-2); font-weight: 600; }
.sd__k svg { fill: #B5832B; }
.sd__bar { position: relative; height: 10px; background: #EEF0F3; border-radius: var(--r-s); }
.sd__bar span { position: absolute; left: 0; top: 0; bottom: 0; background: var(--forest); border-radius: var(--r-s); }
.sd__v { text-align: right; font-weight: 600; }
.sd__p { text-align: right; color: var(--muted); }
/* Säulen je Tag (Achsen als HTML in echter Schriftgröße) */
.vc { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 8px; margin-top: 10px; }
.vc__y { position: relative; height: 200px; font-size: var(--fs-micro); color: var(--muted); }
.vc__y span { position: absolute; right: 0; transform: translateY(50%); line-height: 1; white-space: nowrap; }
.vc__plot { position: relative; min-width: 0; }
.vc__svg { display: block; width: 100%; height: 200px; overflow: visible; }
.vc__svg .grid { stroke: #E8EAEE; stroke-width: 1; vector-effect: non-scaling-stroke; }
.vc__svg .base { stroke: #A5ABB5; stroke-width: 1; vector-effect: non-scaling-stroke; }
.vc__svg .hit { fill: transparent; }
.vc__svg .hit:hover { fill: rgba(26, 31, 43, .05); }
.vc__x { position: relative; height: 18px; margin-top: 6px; font-size: var(--fs-micro); color: var(--muted); }
.vc__x span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.vc__x span:first-child { transform: none; }
.vc__x span:last-child { transform: translateX(-100%); }
.vc__x .is-now { color: var(--ink); font-weight: 600; }
/* Grenze in Säulen (Klee Voice 31.10.2026): gestrichelte Linie plus Beschriftung, Form statt nur Farbe */
.vc__svg .limit { stroke: var(--error); stroke-width: 1.5; stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; }
.vc__lim { position: absolute; right: 0; top: calc(var(--lim, 0) * 200px - 18px); font-size: var(--fs-micro); font-weight: 600; color: var(--error); background: var(--card, #fff); padding: 0 4px; line-height: 16px; pointer-events: none; }
@media (max-width: 640px) { .vc__lim { top: calc(var(--lim, 0) * 160px - 18px); } }
/* Linie (Bestand) */
.vl .ar__plot { position: relative; }
.vl .ar__y, .vl .vl__svg { height: 150px; }
.vl__dot { position: absolute; width: 9px; height: 9px; margin: 0 0 -4.5px -4.5px; border-radius: 50%; background: var(--forest); box-shadow: 0 0 0 2px var(--card); pointer-events: none; }
.vl .ar__x { position: relative; }
.vl__pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 8px 28px; }
.vl__pair h3 { font-size: var(--fs-body); margin-top: 8px; }
.vl__pair .note { margin-top: 2px; }
/* Balkenliste */
.bl { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; }
.bl__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 12px; align-items: baseline; }
.bl__l { font-size: var(--fs-body); font-weight: 600; min-width: 0; }
.bl__s { display: block; font-size: var(--fs-caption); font-weight: 400; color: var(--muted); }
.bl__v { font-weight: 600; white-space: nowrap; text-align: right; }
.bl__bar { grid-column: 1 / -1; height: 8px; background: #EEF0F3; border-radius: var(--r-s); }
.bl__bar span { display: block; height: 8px; border-radius: var(--r-s); }
/* Kompakte Liste statt breiter Tabelle (Telefon und Desktop gleich) */
.rl { list-style: none; margin: 8px 0 0; padding: 0; display: grid; }
.rl li { display: grid; grid-template-columns: 4.2em minmax(0, 1fr) auto; gap: 2px 12px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--line-soft); font-size: var(--fs-body); }
.rl li:last-child { border-bottom: 0; }
.rl__d { color: var(--muted); font-size: var(--fs-caption); }
.rl__t { min-width: 0; overflow-wrap: anywhere; }
.rl__t a { overflow-wrap: anywhere; }
.rl__v { font-weight: 600; text-align: right; white-space: nowrap; }
.rl__m { grid-column: 2 / -1; font-size: var(--fs-caption); color: var(--muted); }
.dn__n--s { font-size: var(--fs-kpi-s); }
.vgroup { display: grid; gap: var(--gap); min-width: 0; }
.vgroup > .pagehead h2 { font: 600 var(--fs-kpi-s)/1.2 var(--font-ui); }
.gbp-open { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
@media (max-width: 640px) {
  .sbr { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .vc { grid-template-columns: 40px minmax(0, 1fr); }
  .vc__y, .vc__svg { height: 160px; }
  .vl .ar__y, .vl .vl__svg { height: 130px; }
  .rl li { grid-template-columns: 3.6em minmax(0, 1fr) auto; gap: 2px 10px; }
}
.vtool { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin-top: 4px; }
/* Telefon: kleine Kennzahlen zu zweit nebeneinander (halbe Seitenlänge), unter 360 px wieder eine Spalte */
@media (max-width: 640px) {
  .kpis.kpis--duo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kpis--duo .kpi--v { padding: 10px 10px 12px; }
  .kpis--duo .kpi--v .kpi__head { padding-right: 30px; }
  .kpis--duo .kpi--v .kpi__label { font-size: var(--fs-caption); line-height: 1.25; }
  .kpis--duo .kpi--v .kpi__value { font-size: var(--fs-kpi-s); }
  .kpis--duo .kpi--v .kpi__value.is-missing { font-size: var(--fs-body); }
  .kpis--duo .kpi--v .kpi__sub { font-size: var(--fs-caption); }
  .kpis--duo .kpi--v .info > summary { top: 2px; right: 2px; }
  .kpis--duo .kpi--v .info > .pop__btn { top: 2px; right: 2px; }
  .kpis--duo .sp { width: 100%; max-width: 120px; }
}
@media (max-width: 359px) { .kpis.kpis--duo { grid-template-columns: minmax(0, 1fr); } }
/* geöffnetes ⓘ in einer halben Karte: Karte nimmt am Telefon die ganze Breite, damit der Text lesbar bleibt */
@media (max-width: 640px) { .kpis--duo .kpi--v:has(> details.info[open]) { grid-column: 1 / -1; } }
/* Telefon: Rangliste und Ads-Keywords als Liste statt breiter Tabelle */
.rk { list-style: none; margin: 10px 0 0; padding: 0; }
.rk li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); font-size: var(--fs-caption); }
.rk li:last-child { border-bottom: 0; }
.rk__k { font-size: var(--fs-body); font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.rk__v { text-align: right; white-space: nowrap; }
.rk__d { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; color: var(--ink-2); }
.rk__l { color: var(--muted); min-width: 4.4em; }
.sbg { margin-top: 12px; }
.kpis--duo .aic__fund li { flex-wrap: wrap; gap: 0 8px; }
.kpis--duo .aic__fund b { margin-left: auto; white-space: nowrap; }

/* ---- Rollout c: Erfolgsbeteiligung, Mein Chalet, Monatsberichte und Auszahlungen ----
   Brücke (Wasserfall) mit Telefon-Stufenliste, Bullet je Nacht, Ring „Auslastung Monat“, Säulen je Monat (gebucht schraffiert = Prognose),
   Säulen mit Vorzeichen (Auszahlungen). Abzug = graue Schraffur (Form statt Farbe), Anteil WEBWUNDER Ocker #B5832B (Palette geprüft).
   Mein Chalet hat die Hülle .mch statt .mc: .mc ist seit dem Piloten der Säulenbaustein (Raster 52 px + Rest) und hat die Seite zerlegt. */
.rc-prog { display: inline-flex; align-items: center; gap: 6px; margin: 2px 0 4px; font-size: var(--fs-caption); font-weight: 600; color: var(--ink-2); }
.rc-prog::before { content: ""; width: 12px; height: 8px; border-radius: 0 var(--r-s) var(--r-s) 0; background: repeating-linear-gradient(135deg, rgba(31, 77, 58, .5) 0 3px, rgba(31, 77, 58, .16) 3px 6px); }
.rc-hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px 36px; align-items: start; margin-top: 4px; }
.rc-hero__num { display: grid; gap: 8px; align-content: start; min-width: 0; }
.rc-hero__state { margin: 0; font-size: var(--fs-caption); font-weight: 600; }
.rc-hero__br { min-width: 0; }
.rc-hero .vstat__v.is-missing { font-size: var(--fs-section); color: var(--muted); }
.rc-fee .panel__head .seg { flex-wrap: wrap; }
.bul--prog .bul__ist { background: repeating-linear-gradient(135deg, var(--forest) 0 4px, #3F6E5A 4px 8px); }
/* Brücke: Spalten ohne Abstand, Säule 56 % breit und mittig; Verbindungslinie von Säule zu Säule auf Höhe des Zwischenstands */
.br { margin-top: 8px; }
.br__cols { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
.br__col { display: grid; grid-template-rows: auto auto auto 1fr; justify-items: center; text-align: center; min-width: 0; padding: 0 4px; }
.br__plot { position: relative; width: 100%; height: 200px; }
.br__plot::before { content: ""; position: absolute; left: 0; right: 0; bottom: var(--z); border-top: 1px solid #A5ABB5; }
.br__bar, .br__seg { position: absolute; left: 22%; width: 56%; border-radius: var(--r-s); }
.br__col--add .br__bar, .br__col--sum .br__bar { background: var(--forest); }
.br__col--cut .br__bar, .br__col--neg .br__bar { background: repeating-linear-gradient(135deg, #5E6573 0 4px, #E3E6EA 4px 8px); box-shadow: inset 0 0 0 1px #5E6573; }
.br__col--sum .br__bar, .br__col--neg .br__bar { box-shadow: inset 0 0 0 2px #1A1F2B; }
.br__seg--ours { background: #B5832B; }
.br__seg--theirs { background: var(--forest); }
.br__seg + .br__seg { box-shadow: inset 0 -2px 0 var(--card); }   /* 2 px Fläche zwischen den gestapelten Anteilen */
.brl__seg + .brl__seg { box-shadow: inset 2px 0 0 var(--card); }
.br__link { position: absolute; left: 78%; width: 44%; border-top: 1.5px dashed #878D98; z-index: 1; }
.br__v { margin-top: 8px; font-size: var(--fs-body); font-weight: 600; line-height: 1.25; white-space: nowrap; display: grid; gap: 2px; justify-items: center; }
.br__sv { display: inline-flex; align-items: center; gap: 6px; }
.br__k { font-size: var(--fs-caption); color: var(--ink-2); line-height: 1.3; }
.br__n { font-size: var(--fs-micro); color: var(--muted); line-height: 1.3; }
.br__col--none .br__k { color: var(--muted); }
.br__sw { display: inline-block; width: 10px; height: 10px; border-radius: var(--r-s); flex: none; }
.br__sw--ours { background: #B5832B; }
.br__sw--theirs { background: var(--forest); }
.rc-mk { display: inline-block; width: 12px; height: 12px; border-radius: var(--r-s); flex: none; }
.rc-mk--add, .rc-mk--theirs { background: var(--forest); }
.rc-mk--cut { background: repeating-linear-gradient(135deg, #5E6573 0 3px, #E3E6EA 3px 6px); box-shadow: inset 0 0 0 1px #5E6573; }
.rc-mk--sum { background: #fff; box-shadow: inset 0 0 0 2px #1A1F2B; }
.rc-mk--ours { background: #B5832B; }
/* Telefon: Stufenliste */
.brl { list-style: none; margin: 4px 0 0; padding: 0; display: grid; }
.brl__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: baseline; padding: 10px 0; border-top: 1px solid var(--line-soft); }
.brl__row:first-child { border-top: 0; }
.brl__row.is-total { border-top: 2px solid var(--ink-2); }
.brl__k { display: grid; gap: 1px; font-size: var(--fs-body); font-weight: 600; min-width: 0; }
.brl__row--split .brl__k { display: flex; align-items: center; gap: 8px; }
.brl__n { font-size: var(--fs-caption); font-weight: 400; color: var(--muted); }
.brl__v { font-size: var(--fs-body); font-weight: 600; white-space: nowrap; text-align: right; }
.brl__row--none .brl__k { color: var(--muted); font-weight: 500; }
.brl__track { grid-column: 1 / -1; position: relative; height: 12px; margin-top: 4px; background: #EEF0F3; border-radius: var(--r-s); }
.brl__track::before { content: ""; position: absolute; top: -3px; bottom: -3px; left: var(--z); border-left: 1.5px solid #878D98; }
.brl__bar, .brl__seg { position: absolute; top: 0; height: 12px; border-radius: var(--r-s); }
.brl__row--add .brl__bar, .brl__row--sum .brl__bar { background: var(--forest); }
.brl__row--cut .brl__bar, .brl__row--neg .brl__bar { background: repeating-linear-gradient(135deg, #5E6573 0 4px, #E3E6EA 4px 8px); box-shadow: inset 0 0 0 1px #5E6573; }
.brl__row--sum .brl__bar, .brl__row--neg .brl__bar { box-shadow: inset 0 0 0 2px #1A1F2B; }
/* Abrechnungszeiträume und Ausgangsbasis am Telefon als Liste */
.rc-pers, .rc-bases { list-style: none; margin: 4px 0 0; padding: 0; }
.rc-per, .rc-base { padding: 12px 0; border-top: 1px solid var(--line-soft); display: grid; gap: 6px; }
.rc-per:first-child, .rc-base:first-child { border-top: 0; }
.rc-per__head, .rc-base__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; }
.rc-per__head a { display: inline-flex; align-items: center; min-height: 44px; }
.rc-per__dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 6px 14px; margin: 0; font-size: var(--fs-caption); }
.rc-per__dl dt { color: var(--muted); font-size: var(--fs-caption); }
.rc-per__dl dd { margin: 0; }
.rc-per__act .rowactions { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.rc-base__v { font-weight: 600; white-space: nowrap; }
/* Formulare in Kopf und Tabellenzeile umbrechen lassen (Monatsunterlagen: sonst seitlicher Überlauf bei 320 px) */
.rc-wrap { flex-wrap: wrap; max-width: 100%; }
.rc-fm th[scope="row"] a { white-space: nowrap; display: inline-flex; align-items: center; min-height: 32px; }   /* Trefferfläche ≥ 24 px (Durchsicht 20.10.2026); Telefon: Liste .rc-per__head mit 44 px */
/* Zeiträume: Tabelle nur, wenn sie ganz in den Block passt; sonst dieselbe Liste wie am Telefon (kein Scrollen in der Tabelle) */
@container (max-width: 1040px) { .rc-fm .v-wide { display: none; } .rc-fm .rc-pers { display: block; } }
@media (max-width: 1100px) { .rc-hero { grid-template-columns: minmax(0, 1fr); } }

/* Säulen je Monat (Nächte bzw. Auszahlungen): Achse und Monate als HTML in echter Schriftgröße */
.nc { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px; margin-top: 10px; }
.nc__y { position: relative; height: 200px; font-size: var(--fs-micro); color: var(--muted); }
.nc--signed .nc__y { height: 180px; }
.nc__y span { position: absolute; right: 0; transform: translateY(50%); line-height: 1; white-space: nowrap; }
.nc__plot { min-width: 0; }
.nc__svg { display: block; width: 100%; height: 200px; overflow: visible; }
.nc--signed .nc__svg { height: 180px; }
.nc__svg .grid { stroke: #E8EAEE; stroke-width: 1; vector-effect: non-scaling-stroke; }
.nc__svg .base { stroke: #A5ABB5; stroke-width: 1; vector-effect: non-scaling-stroke; }
.nc__svg .hit { fill: transparent; }
.nc__svg .hit:hover { fill: rgba(26, 31, 43, .05); }
.nc__ist, .sc__pos { fill: var(--forest); }
.nc__fut { fill: url(#nc-hatch); }
.nc__prev { fill: var(--cmp); }
.sc__neg { fill: url(#sc-hatch); stroke: #5E6573; stroke-width: 1; vector-effect: non-scaling-stroke; }
.nc__x { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); margin-top: 6px; font-size: var(--fs-micro); color: var(--muted); text-align: center; }
.nc__x .is-now { color: var(--ink); font-weight: 600; }
.nc__x--v { color: var(--ink-2); font-weight: 600; white-space: nowrap; }
.nc__sw-prev { background: var(--cmp); }
.rc-mk-fut, .rc-ml-fut { background: repeating-linear-gradient(135deg, rgba(31, 77, 58, .55) 0 3px, #C9D6CE 3px 6px); }
.rc-mk-fut { width: 12px; height: 8px; border-radius: 0 var(--r-s) var(--r-s) 0; }
.rc-ml-fut { position: absolute; top: 4px; height: 8px; border-radius: 0 var(--r-s) var(--r-s) 0; }
.sw.rc-sw-neg { background: repeating-linear-gradient(135deg, #5E6573 0 3px, #E3E6EA 3px 6px); box-shadow: inset 0 0 0 1px #5E6573; }

/* Mein Chalet: Hülle (Regeln wie bisher unter .mc), Ring „Auslastung Monat“ */
body:has(.mch) { background: #F5F6F8; }
.mch { --card: #fff; --mc-line: #E3E6EA; --occ: #1C5CAB; --occ-soft: #A9C4E8; --free-bg: #FFFFFF; --free-line: #C5CAD3; --free-ink: #1A1F2B; --own: #4C3FA8; --blk: #C6CBD3; --blk-ink: #1F2522; --nod: #F5F6F8; --nod-line: #C6CBD3;
  display: grid; gap: var(--gap); min-width: 0; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.mch .panel { background: #fff; border-color: var(--mc-line); }
.mch .empty { background: #F5F6F8; }
.mch .hcal__head h3 { margin: 0; font-size: var(--fs-section); font-weight: 600; line-height: 1.2; }
.mch .hcal.mc-cal { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.mch .mc-kpis { position: relative; }
.mch .mc-kpis > .info > summary { top: 2px; right: 6px; }
.mch .mc-kpis > .info > .pop__btn { top: 2px; right: 6px; }
.mch .mc-kpis > .info > .info__body { margin: 0 14px 12px; }
.rc-ringbox { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 12px 24px; align-items: center; margin-top: 6px; }
.rg { display: block; width: 160px; height: 160px; }
.rg__past { stroke: var(--forest); }
.rg__fut { stroke: url(#rg-hatch); }
.rg__n { font: 600 var(--fs-kpi) var(--font-ui); fill: var(--ink); }
.rg__k { font: var(--fs-caption) "Instrument Sans", sans-serif; fill: var(--muted); }
.rc-ringfacts { display: grid; gap: 6px; margin: 0; font-size: var(--fs-body); }
.rc-ringfacts div { display: flex; align-items: baseline; gap: 8px; }
.rc-ringfacts dt { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); }
.rc-ringfacts dd { margin: 0 0 0 auto; font-weight: 600; white-space: nowrap; }
.rc-sw-free { background: #E8EAEE; box-shadow: inset 0 0 0 1px #D8DCE2; }
/* Ring bis gestern, darunter getrennt die Prognose „mit Gebuchtem bis Monatsende“ (Durchsicht K3) */
.rc-ringside { display: grid; gap: 12px; min-width: 0; }
.rc-fc { display: grid; gap: 6px; padding-top: 10px; border-top: 1px solid var(--line-soft); }
.rc-fc__lead { margin: 0; font-size: var(--fs-body); color: var(--ink-2); }
.rc-fc__lead b { color: var(--ink); font-weight: 600; }
.rc-fc .rc-ringfacts { font-size: var(--fs-caption); }
.rc-fc .rc-ringfacts dt { color: var(--muted); }
.rc-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap); align-items: start; }
@container (max-width: 440px) { .rc-ringbox { grid-template-columns: minmax(0, 1fr); justify-items: center; } .rc-ringside { width: 100%; } }
.rc-stack { display: grid; gap: var(--gap); align-content: start; min-width: 0; }
@media (max-width: 1180px) { .rc-grid { grid-template-columns: minmax(0, 1fr); } }
/* Vergleich mit einem zweiten Mews-Betrieb (Doku 30, nur Admin): je Kennzahl zwei Zeilen – Ist (Hahnenklee) Waldgrün, Vergleich (Buntenbock) Blau –,
   Werte immer als Text, Balken nur zur Orientierung. Telefon: eine Spalte, Zeile = Betrieb · Balken · Wert; Gründe und Vorjahr in eigener Zeile darunter.
   Die Tabelle mit allen Werten liegt nur hinter dem Tabellen-Symbol (keine breite Tabelle in der Fläche). */
.vg-note { margin: 2px 0 0; font-size: var(--fs-caption); line-height: 1.45; color: var(--ink-2); max-width: 62ch; }
.mk--cmpbar { height: 8px; background: var(--cmp); border-radius: var(--r-s); }
.vg-nodata { margin: 10px 0 0; padding: 8px 12px; font-size: var(--fs-caption); line-height: 1.45; color: var(--ink-2); background: var(--ivory); border-radius: var(--r-s); overflow-wrap: anywhere; }
.vg { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 4px 28px; margin-top: 10px; }
.vg__k { min-width: 0; padding: 10px 0 6px; border-top: 1px solid var(--line-soft); }
.vg__k--pace { grid-column: 1 / -1; }
.vg__t { margin: 0; font-size: var(--fs-body); font-weight: 600; line-height: 1.3; }
.vg__t .tag { margin-left: 6px; vertical-align: 1px; }
.vg__s { margin: 0 0 4px; font-size: var(--fs-caption); color: var(--muted); }
.vg__hzs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 0 28px; }
.vg__hz { min-width: 0; }
.vg__hzk { margin: 8px 0 0; font-size: var(--fs-caption); font-weight: 600; color: var(--ink-2); }
.vg__row { display: grid; grid-template-columns: 6.8em minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; min-height: 30px; font-size: var(--fs-caption); }
.vg__l { min-width: 0; color: var(--ink-2); overflow-wrap: anywhere; }
.vg__bar { height: 10px; background: var(--track); border-radius: var(--r-s); overflow: hidden; }
.vg__bar span { display: block; height: 100%; background: var(--forest); border-radius: var(--r-s); }
.vg__row--cmp .vg__bar span { background: var(--cmp); }
.vg__bar--none { background: none; }   /* fehlt die Zahl, fehlt auch das Bild (Doku 29) – keine leere Spur, die wie 0 aussieht */
.vg__v { font-weight: 600; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.vg__why, .vg__py { grid-column: 1 / -1; margin: -2px 0 2px; font-size: var(--fs-micro); line-height: 1.4; color: var(--muted); overflow-wrap: anywhere; }
.vg__py .delta { white-space: nowrap; }
@media (max-width: 640px) {
  .vg { gap: 0; }
  .vg__row { grid-template-columns: 6.2em minmax(0, 1fr) auto; gap: 2px 8px; }
}
.vg__v.muted { font-weight: 500; font-size: var(--fs-caption); }
/* Steht vor dem folgenden Telefon-Block: dessen schließende Klammer fehlt seit dem Merge 414b0cb1 (Rollout D), alles danach gilt nur bis 640 px (vorbestehender Befund, Doku 30). */
@media (max-width: 640px) {
  .mch .hcal__head h3 { font-size: var(--fs-section); }
  .rc-ringbox { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .rc-ringside { width: 100%; }
  .br__plot { height: 160px; }
}

/* ---- Rollout d: Buchungsquellen, Buchungen, Website, Marketing, Angebote ----
   Gestapelte Säulen (.sc) und Zeilen (.sr), Rangliste (.hbl), Buchungsverhalten (.bh), Kanal-Report (.krp), Buchungstabelle mit Telefonliste (.rt).
   Farben kommen als --c aus den geprüften Paletten; Schraffur = Schätzung (wie die erwartete Verlängerung im Bullet-Balken). */
.sc { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 8px; margin-top: 10px; }
.sc__y { position: relative; height: 200px; font-size: var(--fs-micro); color: var(--muted); }
.sc__y span { position: absolute; right: 0; transform: translateY(50%); line-height: 1; white-space: nowrap; }
.sc__plot { min-width: 0; }
.sc__area { position: relative; height: 200px; border-bottom: 1px solid #A5ABB5; }
.sc__grid { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid #E8EAEE; }
.sc__cols { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: clamp(2px, .5vw, 8px); align-items: end; }
.sc__col { position: relative; height: 100%; display: flex; flex-direction: column-reverse; gap: 1px; border-radius: var(--r-s) var(--r-s) 0 0; }
.sc__col:hover { outline: 2px solid var(--ink-2); outline-offset: 1px; }
.sc__col.is-part .sc__seg { opacity: .55; }
.sc__seg { display: block; flex: none; min-height: 1px; background: var(--c); }
.sc__seg:last-child { border-radius: var(--r-s) var(--r-s) 0 0; }
.sc__seg.is-hatch, .sr__seg.is-hatch, .sc__sw.is-hatch { background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .55) 0 3px, transparent 3px 6px), var(--c); }
.sc__sw { background: var(--c); }
.sc__x { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: clamp(2px, .5vw, 8px); margin-top: 6px; font-size: var(--fs-micro); color: var(--muted); text-align: center; line-height: 1.3; }
.sc__x span { min-width: 0; white-space: nowrap; }
.sc__x b { display: block; font-weight: 600; color: var(--ink-2); }
.sc__x .is-now { color: var(--ink); font-weight: 600; }
.sc--ticks .sc__x { text-align: left; }
.sc--ticks .sc__x span { overflow: visible; }
.sr { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content; gap: 4px 10px; }
.sr__row { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: center; min-height: 30px; font-size: var(--fs-caption); }
.sr__l { color: var(--muted); white-space: nowrap; }
.sr__row.is-now .sr__l { color: var(--ink); font-weight: 600; }
.sr__bar { display: flex; gap: 1px; height: 12px; border-radius: var(--r-s); overflow: hidden; background: #EEF0F3; }
.sr__row.is-part .sr__seg { opacity: .55; }
.sr__seg { display: block; height: 100%; background: var(--c); }
.sr__v { text-align: right; font-weight: 600; white-space: nowrap; }
.hbl { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 1fr) max-content; gap: 10px 12px; }
.hbl__row { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; row-gap: 4px; align-items: center; font-size: var(--fs-body); }
.hbl__l { min-width: 0; overflow-wrap: anywhere; }
.hbl__t { font-weight: 600; }
.hbl__s { display: block; font-size: var(--fs-caption); color: var(--muted); overflow-wrap: anywhere; }
.hbl__bar { height: 10px; background: var(--track); border-radius: var(--r-s); overflow: hidden; }
.hbl__bar span { display: block; height: 100%; background: var(--forest); border-radius: var(--r-s); }
.hbl__v { font-weight: 600; text-align: right; white-space: nowrap; }
.hbl__p { color: var(--muted); font-weight: 500; font-size: var(--fs-caption); margin-left: 4px; }
.bhs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 12px 24px; margin-top: 8px; }
.bh { display: grid; gap: 2px; align-content: start; padding: 10px 0; border-top: 1px solid var(--line-soft); }
.bh__k { font-size: var(--fs-caption); color: var(--ink-2); }
.bh__v { font-size: var(--fs-kpi-s); font-weight: 600; line-height: 1.2; }
.bh__p { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-caption); color: var(--muted); }
.ads-off { margin-top: 6px; font-size: var(--fs-section); font-weight: 600; }
.krp { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 12px; }
.krp__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line-soft); }
.krp__l { font-weight: 600; }
.krp__v { font-weight: 600; text-align: right; white-space: nowrap; }
.krp__row .bul { grid-column: 1 / -1; }
.krp__s { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; font-size: var(--fs-caption); color: var(--ink-2); }
.krp__e { margin-left: auto; color: var(--muted); }
.rt__u { display: none; }
@media (max-width: 640px) {
  .sc { grid-template-columns: 40px minmax(0, 1fr); }
  .sc__y, .sc__area { height: 150px; }
  .hbl { grid-template-columns: minmax(0, 1fr) max-content; }
  .hbl__l { grid-column: 1 / -1; }
  .hbl__bar { grid-column: 1; }
  .bhs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; }
  .bh__v { font-size: var(--fs-section); }
  .bh__k { min-height: 2.9em; }
  .krp__e { margin-left: 0; flex-basis: 100%; }
  .rt-wrap { overflow: visible; }
  .rt thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .rt, .rt tbody { display: block; }
  .rt tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 5px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
  .rt td { display: block; padding: 0; border: 0; text-align: left; white-space: normal; font-size: var(--fs-caption); color: var(--ink-2); }
  .rt tr::before, .rt tr::after { content: ''; flex-basis: 100%; height: 0; }
  .rt tr::before { order: 3; } .rt tr::after { order: 8; }
  .rt .rt-s { order: 1; flex: 1 1 auto; font-size: var(--fs-body); font-weight: 600; color: var(--ink); }
  .rt .rt-v { order: 2; margin-left: auto; font-size: var(--fs-body); font-weight: 600; color: var(--ink); }
  /* Zeile 2 Nächte, Personen, Chalet; Zeile 3 Vertriebsweg, Status, Buchungsdatum. Trennzeichen stehen als Komma am Ende des vorigen Eintrags
     (rt__u im HTML), damit keine umbrochene Zeile mit einem Zeichen beginnt (Durchsicht 20.10.2026) */
  .rt .rt-n { order: 4; } .rt .rt-p { order: 5; } .rt .rt-h { order: 6; }
  .rt .rt-c { order: 9; } .rt .rt-t { order: 10; } .rt .rt-b { order: 11; }
  .rt__u { display: inline; }
}

/* ---- HK-Veröffentlichung (Kachel/Alarm, CT 23.10.2026): Band auf der Übersicht, Panel auf der Social-Seite. Zustand steht in Symbol und
   Wort (st2 + Titel), die Fläche ist nur Zusatz: läuft = ruhig ohne Fläche, gelb/rot mit Fläche wie .msg, rot mit kräftigerem Rand. */
.gate { border-radius: var(--r-s); padding: 6px 14px; border: 1px solid var(--line); background: var(--card); font-size: var(--fs-body); min-width: 0; }
.gate--warn { border-color: var(--warn); background: var(--warn-wash); }
.gate--error { border: 2px solid var(--error); background: var(--error-wash); }
.gate__head { margin: 0; display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; min-height: 44px; }
.gate__meta { color: var(--ink-2); min-width: 0; overflow-wrap: anywhere; }
.gate__head a { margin-left: auto; display: inline-flex; align-items: center; min-height: 44px; }
.gate__why { margin: 4px 0 2px; padding-left: 20px; }
.gate__foot { margin: 0; }
.gate__foot a { display: inline-flex; align-items: center; min-height: 44px; }
.gate__why li + li { margin-top: 2px; }
.panel .gate__head { min-height: 0; margin-top: 8px; }
.panel .gate__why { margin: 8px 0 0; }
.gate__dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 16px; margin: 12px 0 0; }
.gate__dl dt { font-size: var(--fs-caption); color: var(--muted); }
.gate__dl dd { margin: 2px 0 0; overflow-wrap: anywhere; }
.gate__dl .gate__full { grid-column: 1 / -1; }
.gate__ch { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 8px; }
.gate__ch li { border: 1px solid var(--line-soft); border-radius: var(--r-s); padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gate__ch span { color: var(--ink-2); font-size: var(--fs-caption); }

/* ---- Ladezeichen beim Seitenwechsel (Kritik 1 Design K26, 01.11.2026; vorher abgedunkelte Vollfläche mit Logo): eine 2-px-Leiste oben im
   Akzent und Platzhalterflächen im Inhalt (Kopf 28 px, Kennzahlreihe 4 × 140 px, Diagramm 320 px) in --line-soft. Erscheint nach 200 ms (v2.js);
   Seitenleiste und Kopf bleiben bedienbar, die Leiste fängt keine Klicks ab (pointer-events: none). Ohne externe Ressourcen; bei reduzierter
   Bewegung statisch. */
.pl-top { position: fixed; inset: 0 0 auto 0; z-index: 61; height: 2px; pointer-events: none; opacity: 0; transition: opacity .2s ease; }
.pl-top i { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: var(--accent); }
.pl-top.is-on { opacity: 1; }
.pl-top.is-on i { animation: pl-top 8s cubic-bezier(.08, .7, .2, 1) forwards; }
@keyframes pl-top { 0% { transform: scaleX(0); } 12% { transform: scaleX(.35); } 40% { transform: scaleX(.65); } 100% { transform: scaleX(.92); } }
.sk { display: grid; place-items: center; min-height: min(60vh, 520px); }
.sk__brand { display: grid; justify-items: center; gap: 14px; width: min(320px, 72vw); animation: sk-in .5s cubic-bezier(.2, .7, .2, 1) both; }
.sk__brand img { display: block; width: 100%; height: auto; }
.sk__slogan { font-size: var(--fs-body); font-weight: 500; letter-spacing: .01em; color: var(--ink-2); }
.sk__bar { display: block; width: 100%; height: 3px; margin-top: 10px; border-radius: 3px; background: var(--line-soft); overflow: hidden; }
.sk__bar i { display: block; height: 100%; width: 40%; border-radius: 3px; background: var(--accent); animation: sk-bar 1.2s ease-in-out infinite; }
.sk--auth { position: fixed; inset: 0; z-index: 70; min-height: 0; background: #09090A; }
.sk--auth .sk__slogan { color: rgba(242, 239, 232, .72); }
.sk--auth .sk__bar { background: rgba(242, 239, 232, .14); }
.sk--auth .sk__bar i { background: #F2EFE8; }
@keyframes sk-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes sk-bar { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } }
/* Cloud-Runde 8 (M9, M41): Ladebild mittig über der leicht abgedunkelten Seite (Dashboard und Anmeldung); erst sichtbar, wenn das Logo geladen ist */
.sk, .sk--auth { position: fixed; inset: 0; z-index: 70; min-height: 0; display: none; place-items: center; padding: 24px; background: rgba(26, 31, 43, .28); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.sk.is-on { display: grid; }
.sk__brand { width: min(300px, calc(100vw - 48px)); padding: 28px 28px 22px; border-radius: 16px; background: #fff; box-shadow: 0 18px 48px rgba(17, 24, 39, .22), 0 2px 8px rgba(17, 24, 39, .08); }
.sk:not(.is-ready) .sk__brand { visibility: hidden; }
.sk--auth { background: rgba(9, 9, 10, .55); }
.sk--auth .sk__brand { background: #141416; box-shadow: 0 18px 48px rgba(0, 0, 0, .5); }

@media (prefers-reduced-motion: reduce) { .pl-top.is-on i { animation: none; transform: scaleX(.6); } .sk__brand, .sk__bar i { animation: none; } .sk__bar i { width: 60%; } .pl-top { transition: none; } }
@media (forced-colors: active) { .pl-top i, .sk__bar i { background: Highlight; } }

/* Empfehlungen und Automatik-Feed (31.10.2026, w3-empfehlungen): Karten im CEO-Stil, Telefon zuerst, Breiten in em, Tippflächen 44 px */
.emp-list { list-style: none; margin: 0.75em 0 0; padding: 0; display: grid; gap: 1em; }
.emp { min-width: 0; border-top: 1px solid var(--line-soft); padding-top: 1em; overflow-wrap: anywhere; }
.emp:first-child { border-top: 0; padding-top: 0; }
.emp__head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35em 0.6em; }
.emp__t { font-size: var(--fs-section); margin: 0; min-width: 0; flex: 1 1 18em; }
.emp__e { margin: 0.5em 0 0; font-weight: 600; }
.emp__b { margin: 0.25em 0 0; color: var(--ink-2); }
.emp__kv { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15em), 1fr)); gap: 0.4em 1.25em; margin: 0.6em 0 0; }
.emp__kv > div { min-width: 0; }
.emp__kv dt { font-size: var(--fs-caption); color: var(--muted); }
.emp__kv dd { margin: 0; }
.emp__aus { margin: 0.6em 0 0; padding: 0.5em 0.75em; border-radius: var(--r-m); background: var(--ivory); }
.emp__aus--ok { background: var(--good-wash); }
.emp__aus--warn { background: var(--warn-wash); }
.emp__aus--err { background: var(--error-wash); }
.emp__knoepfe { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.5em 1em; margin-top: 0.5em; }
.emp__nein summary { cursor: pointer; min-height: 2.75em; display: flex; align-items: center; color: var(--data); font-weight: 600; }
.emp__nein form { margin-top: 0.4em; max-width: 34em; }
.emp__cb { display: flex; align-items: center; gap: 0.5em; min-height: 2.75em; }
.emp-kurzliste { list-style: none; margin: 0.5em 0 0; padding: 0; display: grid; gap: 0.6em; }
.emp-kurz { min-width: 0; overflow-wrap: anywhere; display: grid; gap: 0.15em; }
.emp-karte__h { font-size: var(--fs-body); margin: 0.75em 0 0; }
.emp-karte__l { margin: 0.35em 0 0; padding-left: 1.3em; display: grid; gap: 0.35em; overflow-wrap: anywhere; }
.emp-karte__f { margin: 0.75em 0 0; }
.emp-karte__l a, .emp-karte__f a, .emp-kurz a { display: inline-block; min-height: 1.5em; }

/* ---- Anlaufphase in Mews (Doku 29, Vergleichsvorbehalt comparisonCaveats): Vergleichswerte aus der Anlaufphase bleiben sichtbar, aber
   zurückhaltend und in Form statt nur Farbe gekennzeichnet: Raute hohl, Säulen und Balken hell mit dunklem gestricheltem Rand, Vorjahresstrich
   gestrichelt. Etikett im vorhandenen Tag-Stil (.tag), Erklärung hinter ⓘ. Nur neue Klassen bzw. Zustände (is-cav), keine Rollout-Klasse neu. */
.cav-tags { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.mk--prevcav { width: 9px; height: 9px; margin: 0 1.5px; background: var(--card); border: 2px solid var(--cmp); transform: rotate(45deg); border-radius: var(--r-s); }
.bul__prev.is-cav, .ml__prev.is-cav { background: var(--card); border: 2px solid var(--cmp); }
.ml__ist.is-cav { background: rgba(31, 77, 58, .3); outline: 1.5px dashed var(--ink-2); }
.mc__svg .cav-col, .nc__svg .cav-col { fill-opacity: .3; stroke: var(--ink-2); stroke-width: 1.5; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.sw.cav-sw { background: #EEF1EC; border: 1.5px dashed var(--ink-2); }
.sw.cav-sw-occ { background: var(--occ-soft, #EBA59E); border: 1.5px dashed var(--ink-2); }
.band.is-cav .band__prior { height: 0; background: none; border-top: 3px dashed var(--cmp); box-shadow: none; }
.sc__col.is-cav .sc__seg, .sr__row.is-cav .sr__seg { opacity: .4; }
.sc__col.is-cav::after { content: ''; position: absolute; inset: 0; border: 1.5px dashed var(--ink-2); border-radius: var(--r-s) var(--r-s) 0 0; pointer-events: none; }
.sr__row.is-cav .sr__bar { outline: 1.5px dashed var(--ink-2); outline-offset: 1px; }
.mbars li.is-cav .mbars__bar { background: var(--occ-soft); border: 2px dashed var(--ink-2); }
/* Etikett „Anlaufphase, nicht vergleichbar“ neutral statt Warnfarbe (Durchsicht Folgepaket W3): kein Mangel, nur kein Vergleich */
.tag.tag--cav { background: #ECEEEA; color: var(--ink-2); font-weight: 600; }
.cmp.cmp--m:has(.tag--cav) { align-items: start; }
.cmp.cmp--m:has(.tag--cav) > .mk { margin-top: 4px; }   /* Raute auf Höhe der ersten Textzeile (Durchsicht Runde 3) */

/* Werbung (Paket W1, Seite „Werbung“): Telefon zuerst, Listen statt breiter Tabellen, keine waagerechte Scrollleiste.
   Nur neue Klassen (wb-…), keine Überschreibung bestehender Bausteine. */
.wb-budget { margin-top: 12px; }
.wb-stats { gap: 10px 24px; }
.wb-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 12px; }
.wb-item { padding-bottom: 12px; border-bottom: 1px solid var(--line-soft); min-width: 0; }
.wb-item:last-child { border-bottom: 0; padding-bottom: 0; }
.wb-item__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.wb-item__name { font-weight: 600; overflow-wrap: anywhere; min-width: 0; }
a.wb-item__name { text-decoration: underline; text-underline-offset: 2px; }
.wb-item__plat { margin: 2px 0 0; font-size: var(--fs-caption); color: var(--muted); overflow-wrap: anywhere; }
.wb-kv { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 8px 0 0; }
.wb-kv > div { display: grid; gap: 0; }
.wb-kv dt { font-size: var(--fs-micro); color: var(--muted); }
.wb-kv dd { margin: 0; font-weight: 600; white-space: nowrap; }
.wb-terms { list-style: decimal; margin: 10px 0 0; padding-left: 24px; display: grid; gap: 6px; }
.wb-terms li { overflow-wrap: anywhere; }
.wb-terms__t { font-weight: 600; margin-right: 8px; }
.wb-terms__v { font-size: var(--fs-caption); color: var(--ink-2); }
.wb-changes { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 12px; }
.wb-changes li { border-left: 3px solid var(--line-soft); padding-left: 10px; }
.wb-changes p { margin: 0; overflow-wrap: anywhere; }
.wb-changes__when { font-size: var(--fs-caption); color: var(--muted); }
.wb-back { margin: 0 0 8px; font-size: var(--fs-caption); }
/* Werbemittel-Bedarf (Paket W1, Seite werbung/motive): Briefing-Karten, nur neue Klassen (mb-…) */
.mb-card__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.mb-card__head h2 { overflow-wrap: anywhere; min-width: 0; }
.mb-why { margin: 8px 0 0; overflow-wrap: anywhere; }
.mb-nums { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 2px; font-weight: 600; }
.mb-kv { display: grid; gap: 8px; margin: 12px 0 0; }
.mb-kv > div { display: grid; gap: 2px; min-width: 0; }
.mb-kv dt { font-size: var(--fs-caption); color: var(--muted); }
.mb-kv dd { margin: 0; overflow-wrap: anywhere; }
.mb-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.mb-chips li { font-size: var(--fs-caption); padding: 2px 8px; border-radius: var(--r-s); background: #EEF0F3; }
.mb-steps { margin: 4px 0 0; padding-left: 20px; }
.mb-prompt { margin-top: 12px; display: grid; gap: 6px; }
.mb-label { font-size: var(--fs-caption); color: var(--muted); }
.mb-text { width: 100%; box-sizing: border-box; font: inherit; font-size: var(--fs-caption); resize: vertical; }
.mb-prompt .btn { justify-self: start; }
.mb-ex { margin-top: 12px; }
.mb-ex ul { margin: 6px 0 0; padding-left: 20px; }
.mb-nums li { overflow-wrap: anywhere; }
/* Reiter Werbung → Mitbewerber (30.10.2026): Beispieltexte normal, Titel fett, „ansehen“ mit 24 px Tippfläche */
.mb-nums--ex { font-weight: 400; gap: 6px; }
.mb-nums--ex b { font-weight: 600; }
.mb-nums--ex a { display: inline-block; min-height: 24px; line-height: 24px; padding: 0 2px; }
.mb-src { display: block; font-size: var(--fs-micro); font-weight: 400; color: var(--muted); }
.mb-list { margin: 0; padding-left: 18px; }
/* Werbung steuern (Paket W2): Modus, Budget, Werbemittel-Eingang, Entwürfe */
.ws-mode { margin: 8px 0 12px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.ws-links { margin-top: 0; }
.ws-form { margin: 0; display: flex; flex-wrap: wrap; align-items: end; gap: 8px; }
.ws-fields { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); width: 100%; margin: 12px 0 4px; }
.ws-fields label, .ws-inline { display: grid; gap: 4px; font-size: var(--fs-caption); color: var(--muted); min-width: 0; }
.ws-fields input, .ws-fields select, .ws-inline input, .ws-inline select, .ws-variant input, .ws-variant textarea, .ws-variant select { font: inherit; font-size: var(--fs-body); min-height: 40px; padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--r-s); background: #fff; color: var(--ink); max-width: 100%; box-sizing: border-box; }
.ws-inline select { max-width: 100%; }
.ws-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; align-items: end; }
.ws-danger { border-color: var(--error); color: var(--error); }
.ws-plan { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 4px; }
.ws-big { font-size: var(--fs-kpi); font-weight: 600; margin: 0 0 8px; }
.ws-drop h2 { margin: 0 0 4px; }
.ws-dropzone { margin-top: 12px; min-height: 120px; border: 2px dashed var(--line); border-radius: var(--r-s); display: grid; place-content: center; gap: 4px; text-align: center; padding: 16px; cursor: pointer; background: #FAFBFC; }
.ws-dropzone.is-over, .ws-dropzone:focus-visible { border-color: var(--ink); background: #F1F3F6; }
.ws-progress { margin: 12px 0 0; padding-left: 18px; display: grid; gap: 4px; overflow-wrap: anywhere; }
.ws-progress .is-ok { color: var(--good); }
.ws-progress .is-error { color: var(--error); }
.ws-assets, .ws-variants { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.ws-asset, .ws-variant { border: 1px solid var(--line); border-radius: var(--r-s); padding: 10px; background: #fff; display: grid; gap: 8px; align-content: start; min-width: 0; overflow-wrap: anywhere; }
.ws-asset__name { font-weight: 600; margin: 0; }
.ws-asset__body p { margin: 0; }
.ws-thumb { width: 100%; max-height: 260px; object-fit: contain; background: #EEF0F3; border-radius: var(--r-s); display: block; }
.ws-thumb--s { max-height: 160px; }
.ws-hints { margin: 4px 0 0; padding-left: 18px; font-size: var(--fs-caption); color: var(--muted); }
.ws-kw { display: inline-block; font-size: var(--fs-caption); padding: 1px 6px; margin: 2px 0; border-radius: var(--r-s); background: #EEF0F3; }
.ws-rsa { margin: 6px 0 0; padding-left: 20px; font-size: var(--fs-caption); }
.ws-rsa--d { color: var(--ink-2); }
.ws-draft .mb-kv { margin-top: 8px; }
/* W3v: Kampagnen-Entwürfe. Anzeigen als Nachbau wie auf den Plattformen (helle Flächen, Schrift 14 bis 16 px wie dort), Übersicht oben,
   Texte bearbeiten und Einstellungen aufklappbar. Bilder tragen width/height, das Seitenverhältnis steht vor dem Laden fest. */
.ws-draft { scroll-margin-top: 16px; }
.ws-form > .ws-inline { max-width: 100%; }
.ws-form > .ws-inline select { width: 100%; min-width: 0; }   /* lange Briefing-Titel: Auswahl nie breiter als die Spalte (Telefon) */
.ws-sum { margin: 6px 0 0; font-size: var(--fs-body); color: var(--ink-2); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.ws-hint { margin: 12px 0 0; font-size: var(--fs-caption); color: var(--muted); }
.ws-ad { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line-soft); min-width: 0; }
.ws-ad__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
.ws-ad__head h3 { margin: 0; font-size: var(--fs-section); }
.ws-preview { margin: 10px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.adp-row { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); margin-top: 14px; align-items: start; }
.adp { margin: 0; min-width: 0; width: 100%; max-width: 400px; justify-self: center; }
.adp-label { margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
.adp-card { background: #fff; color: #050505; border: 1px solid #dadde1; border-radius: var(--r-m); overflow: hidden; font: 400 15px/1.34 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; box-shadow: none; }
.adp-head { display: flex; align-items: center; gap: 10px; padding: 12px 12px 8px; }
.adp-av { width: 40px; height: 40px; border-radius: 50%; object-fit: contain; background: #fff; border: 1px solid #dadde1; padding: 3px; box-sizing: border-box; flex: none; display: inline-grid; place-items: center; font-weight: 600; color: #050505; }
.adp-av--s { width: 32px; height: 32px; padding: 2px; }
.adp-who { display: grid; min-width: 0; line-height: 1.25; }
.adp-who b { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.adp-who span { font-size: 13px; color: #65676b; }
.adp-dots { margin-left: auto; color: #65676b; font-weight: 600; letter-spacing: 1px; }
.adp-text { margin: 0; padding: 0 12px 12px; white-space: pre-line; overflow-wrap: anywhere; }
.adp-more { color: #65676b; font-weight: 600; white-space: nowrap; }
.adp-m { display: block; width: 100%; height: auto; object-fit: cover; background: #e4e6eb; }
.adp-m--45 { aspect-ratio: 4 / 5; }
.adp-m--916 { aspect-ratio: 9 / 16; }
.adp-miss { display: grid; place-items: center; aspect-ratio: 4 / 5; background: #f0f2f5; color: #65676b; font-size: 14px; }
.adp-bar { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: #f0f2f5; }
.adp-bar__t { display: grid; flex: 1; min-width: 0; line-height: 1.3; }
.adp-dom { font-size: 12px; color: #65676b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adp-bar__t b { font-size: 16px; font-weight: 600; overflow-wrap: anywhere; }
.adp-bar__t b + span { font-size: 14px; color: #65676b; }
.adp-cta { flex: none; background: #e4e6eb; color: #050505; font-size: 15px; font-weight: 600; border-radius: var(--r-s); padding: 8px 12px; white-space: nowrap; }
.adp-acts { display: flex; justify-content: space-around; gap: 4px; margin: 0 12px; padding: 6px 0; border-top: 1px solid #ced0d4; color: #65676b; font-size: 14px; font-weight: 600; }
.adp-acts span { display: inline-flex; align-items: center; gap: 6px; }
.adp-acts svg, .adp-igcta svg { width: 18px; height: 18px; }
.adp--ig .adp-card { border-radius: var(--r-m); color: #262626; font-size: 14px; }
.adp-head--ig { padding: 10px 12px; }
.adp-head--ig .adp-who b { font-size: 14px; }
.adp-head--ig .adp-who span { font-size: 12px; color: #262626; }
.adp-igcta { display: flex; justify-content: space-between; align-items: center; padding: 11px 12px; border-bottom: 1px solid #efefef; font-size: 14px; font-weight: 600; }
.adp-igicons { display: flex; justify-content: space-between; padding: 8px 10px 2px; }
.adp-igicons span { display: flex; gap: 12px; }
.adp-text--ig { padding: 4px 12px 12px; font-size: 14px; }
.adp-text--ig b { font-weight: 600; }
.adp--st { max-width: 300px; }
.adp-st { position: relative; aspect-ratio: 9 / 16; border-radius: var(--r-m); overflow: hidden; background: #000; color: #fff; font: 400 14px/1.3 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }
.adp-st > .adp-m--916 { position: absolute; inset: 0; width: 100%; height: 100%; }
.adp-st--fit { background: #1c1e21; }
.adp-st__fit { position: absolute; inset: 58px 0 72px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px; }
.adp-st__txt { margin: 0 16px; font-size: 15px; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; align-self: stretch; }
.adp-st__fit .adp-m { width: 88%; }
.adp-st__top { position: absolute; inset: 0 0 auto; padding: 8px 10px 26px; background: linear-gradient(rgba(0, 0, 0, .5), transparent); pointer-events: none; }
.adp-st__prog { display: block; height: 2px; margin-bottom: 8px; background: rgba(255, 255, 255, .4); border-radius: var(--r-s); }
.adp-st__prog i { display: block; width: 35%; height: 100%; background: #fff; border-radius: var(--r-s); }
.adp-head--st { padding: 0; }
.adp-head--st .adp-who b { color: #fff; font-size: 14px; }
.adp-head--st .adp-who span { color: rgba(255, 255, 255, .85); font-size: 12px; }
.adp-st__bot { position: absolute; inset: auto 0 0; padding: 30px 12px 14px; display: grid; justify-items: center; gap: 2px; background: linear-gradient(transparent, rgba(0, 0, 0, .55)); pointer-events: none; }
.adp-st__bot svg { width: 20px; height: 20px; }
.adp-st__cta { background: #fff; color: #050505; font-size: 14px; font-weight: 600; border-radius: var(--r-pill); padding: 8px 18px; }
/* Google: Suchanzeige wie im Suchergebnis */
.ws-gads { display: grid; gap: 28px 32px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr)); margin-top: 14px; }
.ws-gad { min-width: 0; }
.ws-gad .ws-ad__head { margin-bottom: 8px; }
.gs { background: #fff; color: #202124; border: 1px solid #dadce0; border-radius: var(--r-m); padding: 16px 18px; font: 400 14px/1.58 Arial, 'Segoe UI', sans-serif; overflow-wrap: anywhere; }
.gs-sp { margin: 0 0 8px; font-size: 14px; font-weight: 600; }
.gs-src { display: flex; align-items: center; gap: 12px; }
.gs-fav { width: 28px; height: 28px; border-radius: 50%; border: 1px solid #dadce0; background: #fff; object-fit: contain; padding: 3px; box-sizing: border-box; flex: none; display: inline-grid; place-items: center; font-weight: 600; }
.gs-src > div { display: grid; min-width: 0; line-height: 1.3; }
.gs-name { font-size: 14px; }
.gs-url { font-size: 12px; color: #4d5156; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-main { display: flex; align-items: flex-start; gap: 16px; margin-top: 6px; }
.gs-main > div { flex: 1; min-width: 0; }
.gs-t { margin: 0 0 4px; font: 400 20px/1.3 Arial, 'Segoe UI', sans-serif; color: #1a0dab; }
.gs-d { margin: 0; font-size: 14px; color: #4d5156; }
.gs-img { flex: none; width: 92px; height: 92px; margin-top: 4px; border-radius: var(--r-m); object-fit: cover; background: #f1f3f4; }
.gs-links { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px 24px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
.gs-lt { display: block; font-size: 16px; line-height: 1.4; color: #1a0dab; }
.gs-ld { display: block; font-size: 13px; line-height: 1.4; color: #4d5156; }
.rsa { display: grid; gap: 4px 24px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.rsa h4, .ws-edit h4, .ws-settings h4 { margin: 14px 0 6px; font-size: var(--fs-caption); }
.rsa ol { margin: 0; padding-left: 24px; display: grid; gap: 4px; font-size: var(--fs-body); }
.rsa-n { float: right; margin-left: 10px; font-size: var(--fs-caption); color: var(--muted); }
.rsa-n.is-over { color: var(--error); font-weight: 600; }
/* aufklappbar: Texte bearbeiten, Einstellungen */
.ws-edit, .ws-settings { margin-top: 14px; border: 1px solid var(--line); border-radius: var(--r-s); background: #FAFBFC; }
.ws-edit > summary, .ws-settings > summary { min-height: 44px; display: flex; align-items: center; padding: 0 14px; cursor: pointer; font-weight: 600; }
.ws-edit[open] > summary, .ws-settings[open] > summary { border-bottom: 1px solid var(--line); }
.ws-edit > :not(summary), .ws-settings > :not(summary) { margin-left: 14px; margin-right: 14px; }
.ws-edit > :last-child, .ws-settings > :last-child { margin-bottom: 14px; }
.ws-editf { display: grid; gap: 14px; padding-top: 14px; }
.ws-editf label { display: grid; gap: 4px; font-size: var(--fs-caption); font-weight: 600; color: var(--ink-2); }
.ws-editf input, .ws-editf textarea, .ws-editf select { width: 100%; box-sizing: border-box; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-s); background: #fff; color: var(--ink); font: inherit; font-size: 16px; font-weight: 400; line-height: 1.5; }
.ws-editf textarea { min-height: 190px; resize: vertical; }
.ws-editf .btn { justify-self: start; }
.ws-editf p { margin: 0; }
.ws-pre { white-space: pre-line; }
.ws-kv { margin-top: 12px; }
.ws-url { font-size: var(--fs-caption); word-break: break-all; }
.ws-extimgs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.ws-extimg { width: auto; height: 96px; max-width: 100%; border-radius: var(--r-s); background: #EEF0F3; }
/* Übersicht oben */
.ws-ovp h2 { margin: 0 0 10px; }
.ws-ov { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.ws-ov__a { display: flex; align-items: center; gap: 12px; min-height: 72px; padding: 8px; border: 1px solid var(--line); border-radius: var(--r-s); background: #fff; color: var(--ink); text-decoration: none; }
.ws-ov__a:hover { border-color: var(--ink-2); }
.ws-ov__img { width: 56px; height: 70px; flex: none; object-fit: cover; border-radius: var(--r-s); background: #EEF0F3; display: grid; place-items: center; font-weight: 600; color: var(--muted); }
.ws-ov__t { display: grid; gap: 2px; min-width: 0; }
.ws-ov__t b { font-size: var(--fs-body); overflow-wrap: anywhere; }
.ws-ov__t > span:not(.st) { font-size: var(--fs-caption); color: var(--muted); }
.ws-ov__t .st { justify-self: start; }
@media (max-width: 520px) { .gs { padding: 14px; } .gs-t { font-size: 18px; } .gs-img { width: 72px; height: 72px; } }
.mb-nr { font-weight: 600; color: var(--muted); }
.mb-links, .aufg-motiv-links { margin: 6px 0 0; font-size: var(--fs-caption); }
/* W3m: einfache Vorschau der Suchanzeige, Links zur Meta-Vorschau */
.ws-serp { border: 1px solid var(--line); border-radius: var(--r-s); padding: 8px 10px; background: #fff; margin: 8px 0; overflow-wrap: anywhere; }
.ws-serp__t { color: #1a0dab; font-size: var(--fs-section); margin: 2px 0; }
.ws-preview a { white-space: nowrap; }

/* Durchsicht 28.10.2026 (Johannes): Menü-Reiter, neueste Buchung, Automatik in Zahlen, gleich hohe Paare, Kampagnen- und Anzeigenkarten ----
   Reiter: höchstens vier je Hauptpunkt, gleich breit, 44 px hoch, aktiver Reiter mit Fläche und Gewicht (nie Farbe allein). Telefon: dieselbe Leiste
   volle Breite, Beschriftung darf umbrechen statt waagerecht zu scrollen. */

/* Paare gleich hoher Flächen (Übersicht): Fuß unten bündig */
.grid2--eq { align-items: stretch; }
.grid2--eq > .panel { display: flex; flex-direction: column; }
.grid2--eq > .panel > .panel__foot { margin-top: auto; }
.grid2--eq > .panel > .panel__foot { padding-top: 12px; }

/* Neueste Buchung: ruhig gefeiert, Salbei-Fläche, Herkunft als großes Abzeichen */
.nb { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px 28px; align-items: center; background: linear-gradient(120deg, var(--sage), var(--card) 75%); border-color: #C9D6C3; }
.nb__eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-caption); font-weight: 600; color: var(--good); }
.nb__ok { width: 18px; height: 18px; flex: none; }
.nb__title { margin: 6px 0 4px; font-size: var(--fs-kpi); font-weight: 600; letter-spacing: -0.01em; }
.nb__what { font-size: var(--fs-section); color: var(--ink); }
.nb__more { margin-top: 8px; font-size: var(--fs-caption); color: var(--muted); }
.nb__more a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.nb__src { display: grid; grid-template-columns: 3.5em minmax(0, 1fr); gap: 14px; align-items: start; padding: 16px; border-radius: var(--r-m); background: var(--card); border: 1px solid var(--line); }
.nb__ico { display: grid; place-items: center; width: 3.5em; height: 3.5em; border-radius: 50%; background: var(--data-wash); color: var(--data); }
.nb__svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nb__src--google_ads .nb__ico, .nb__src--meta_ads .nb__ico { background: #F5EBD6; color: #7A4A00; }
.nb__src--direkt_website .nb__ico, .nb__src--direkt_telefon_mail .nb__ico, .nb__src--klee .nb__ico, .nb__src--gaeste_mail .nb__ico { background: var(--sage); color: var(--good); }
.nb__src--unbekannt .nb__ico { background: var(--line-soft); color: var(--muted); }
.nb__k { font-size: var(--fs-caption); color: var(--muted); font-weight: 600; }
.nb__q { font-size: var(--fs-section); font-weight: 600; line-height: 1.25; }
.nb__why { margin-top: 4px; font-size: var(--fs-body); color: var(--ink-2); }
@media (max-width: 760px) { .nb { grid-template-columns: minmax(0, 1fr); } .nb__src { grid-template-columns: 48px minmax(0, 1fr); padding: 14px; } .nb__ico { width: 48px; height: 48px; } .nb__svg { width: 26px; height: 26px; } .nb__q { font-size: var(--fs-section); } }

/* Automatik in vier Zahlen */
.sysn { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9em), 1fr)); gap: 14px 20px; }
.sysn li { display: grid; gap: 2px; padding: 12px 14px; border-radius: var(--r-s); background: var(--ivory); }
.sysn__v { font-size: var(--fs-kpi); font-weight: 600; line-height: 1.1; }
.sysn__k { font-weight: 600; }
.sysn__n { font-size: var(--fs-caption); color: var(--muted); }
@media (max-width: 340px) { .sysn { grid-template-columns: minmax(0, 1fr); } }

/* Werbung oben: Kernzahlen, Kampagnenkarten, Anzeigenkarten mit Werbebild (Durchsicht 28.10.2026) */
.ak-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10em), 1fr)); gap: 12px 20px; }
.ak-kpi { display: grid; gap: 2px; align-content: start; }
.ak-kpi__k { font-size: var(--fs-caption); font-weight: 600; color: var(--ink-2); }
.ak-kpi__v { font-size: var(--fs-kpi); font-weight: 600; line-height: 1.15; }
.ak-kpi__n { font-size: var(--fs-caption); color: var(--muted); }
.ak-stand { grid-column: 1 / -1; padding-top: 8px; border-top: 1px solid var(--line-soft); font-size: var(--fs-caption); color: var(--muted); }
.kc-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 21em), 1fr)); gap: 12px; }
.kc { display: grid; grid-template-columns: 4.5em minmax(0, 1fr); gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--card); min-width: 0; }
.kc--laeuft { border-color: #B9D2C2; background: linear-gradient(180deg, #F3F8F4, var(--card) 60%); }
.kc__img { width: 4.5em; height: 4.5em; border-radius: var(--r-s); object-fit: cover; background: var(--line-soft); }
.kc__img--none { display: grid; place-items: center; font-weight: 600; color: var(--muted); }
.kc__head { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; flex-wrap: wrap; }
.kc__t { font-size: var(--fs-section); line-height: 1.3; }
.kc__t a { color: var(--ink); text-decoration: none; display: inline-flex; min-height: 24px; }
.kc__t a:hover { text-decoration: underline; }
.kc__meta { margin-top: 2px; font-size: var(--fs-caption); color: var(--ink-2); }
.kc__tech { font-size: var(--fs-micro); color: var(--muted); overflow-wrap: anywhere; }
.kc__wait { margin-top: 8px; font-size: var(--fs-caption); color: var(--warn); }
.kc__kv { margin: 8px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5em, 1fr)); gap: 6px 14px; }   /* em: wächst mit der Schrift, nie überlappend (Korrektur 28.10.) */
.kc__kv dt { font-size: var(--fs-micro); color: var(--muted); }
.kc__kv dd { margin: 0; font-weight: 600; }
.kc-more { margin-top: 12px; }
.kc-more > summary, .wb-more > summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; font-weight: 600; color: var(--data); }
.ak-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18em), 1fr)); gap: 14px; }
.ak { display: grid; grid-template-rows: auto 1fr; border: 1px solid var(--line); border-radius: var(--r-m); overflow: hidden; background: var(--card); min-width: 0; }
.ak__img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; background: var(--line-soft); max-height: 300px; }
.ak__img--text { display: grid; align-content: center; gap: 6px; padding: 16px; aspect-ratio: auto; min-height: 120px; background: #F1F4F8; }
.ak__img--text span { font-size: var(--fs-micro); font-weight: 600; color: var(--muted); }
.ak__img--text b { font-size: var(--fs-section); color: #1a0dab; line-height: 1.3; }
.ak__body { display: grid; gap: 10px; padding: 12px 14px 14px; align-content: start; }
.ak__head { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: flex-start; }
.ak__head > div { flex: 1 1 10em; min-width: 0; }
.ak__rank { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: var(--card); font-weight: 600; font-size: var(--fs-caption); }
.ak__t { font-size: var(--fs-body); line-height: 1.3; overflow-wrap: anywhere; }
.ak__c { font-size: var(--fs-caption); color: var(--muted); }
.ak__verdict { padding: 3px 10px; border-radius: var(--r-pill); font-size: var(--fs-caption); font-weight: 600; white-space: nowrap; }
.ak__verdict--gut { background: var(--sage); color: var(--good); }
.ak__verdict--mittel { background: var(--warn-wash); color: var(--warn); }
.ak__verdict--schwach { background: var(--error-wash); color: var(--error); }
.ak__kv { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(7em, 1fr)); gap: 8px 14px; }
.ak__kv dt { font-size: var(--fs-micro); color: var(--muted); }
.ak__kv dd { margin: 0; font-size: var(--fs-section); font-weight: 600; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.ak__kv dd .st { font-size: var(--fs-micro); }
.ak__stand { font-size: var(--fs-micro); color: var(--muted); }
/* Google-Suchanzeige als kompakte Vorschau in der Anzeigenkarte (28.10.2026), em-basiert, einspaltig auf dem Telefon */
.ak__gs { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 0.9em 1em; font-size: var(--fs-caption); }
.ak__gs .gs-sp { margin-bottom: 0.4em; }
.ak__gs .gs-t { margin: 0.35em 0 0.2em; font-size: 1.15em; line-height: 1.3; }
.ak__gs .gs-d { font-size: 1em; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ak__gs .gs-fav { width: 1.75em; height: 1.75em; }
.ak__id { font-size: var(--fs-micro); color: var(--muted); overflow-wrap: anywhere; }
.ak__i { margin-left: 0.25em; font-size: var(--fs-caption); color: var(--muted); cursor: help; }
.wb-sec { margin: 12px 0 0; font-size: var(--fs-kpi-s); }
.wb-more { margin-top: var(--gap); padding: 4px 16px 16px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--card); }
.wb-more[open] > summary { margin-bottom: 8px; }
.wb-more > .panel, .wb-more > .grid2 { margin-top: var(--gap); }
.wb-tools { margin: 0; padding-left: 18px; display: grid; gap: 2px; }
.wb-tools a { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 640px) { .ak-kpi__v { font-size: var(--fs-kpi-s); } .kc { grid-template-columns: 56px minmax(0, 1fr); } .kc__img { width: 56px; height: 56px; } .ak__img { max-height: 260px; } }
/* Telefon (Mobile-Brief 28.10.2026): Anzeigenkarten waagerecht mit kleinem Bild links, technische Kampagnennamen ausgeblendet (stehen in den Entwürfen) */
@media (max-width: 640px) {
  .kc__tech { display: none; }
  .ak { grid-template-columns: minmax(0, 1fr); }
  .ak__img { width: 100%; height: auto; aspect-ratio: 16 / 9; max-height: 12em; }
  .ak__img--text { padding: 10px; min-height: 0; }
  .ak__img--text b { font-size: var(--fs-caption); }
  .ak__body { padding: 10px 12px 12px; gap: 8px; }
  .ak__head { grid-template-columns: minmax(0, 1fr) auto; }
  .ak__rank { display: none; }
  .ak__kv dd { font-size: var(--fs-body); }
}

/* Google-Suche: Gewinner und Verlierer, volle Liste einklappbar (Durchsicht 28.10.2026) */
.mv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; margin-top: 12px; }
.mv h3 { margin-bottom: 6px; }
.mv__list { margin: 0; padding-left: 22px; display: grid; gap: 8px; }
.mv__k { display: block; font-weight: 600; overflow-wrap: anywhere; }
.mv__v { display: block; font-size: var(--fs-body); }
.seo-all { margin-top: 10px; }
.seo-all > summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; font-weight: 600; color: var(--data); }
@media (max-width: 760px) { .mv-grid { grid-template-columns: minmax(0, 1fr); } }
/* Umschalter oben rechts in Flächen mit ⓘ: Platz für das Symbol lassen */
.panel--v.has-tools-1 .panel__head > .seg, .panel--v.has-tools-1 .panel__head > .btn { margin-right: 44px; }
.panel--v.has-tools-2 .panel__head > .seg, .panel--v.has-tools-2 .panel__head > .btn { margin-right: 90px; }
@media (min-width: 900px) { .sysn--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Telefon (Mobile-Brief 28.10.2026): eigenständige Links in Karten und Hinweisen mit 44 px hoher Tippfläche */
@media (max-width: 640px) { .kpi--v p.small > a, .attention a, .nb__more a { display: inline-flex; align-items: center; min-height: 44px; } }

/* Drilldown (Durchsicht 28.10.2026): überall gleich – Zahl bzw. Zeile mit kleinem Chevron, gepunktete Linie beim Zeigen, Fokusrahmen;
   ⓘ = Erklärung, Chevron = Detailansicht */
.drill { display: inline-flex; align-items: center; gap: 6px; color: inherit; text-decoration: none; border-radius: var(--r-s); }
.drill__ico { width: 16px; height: 16px; flex: none; color: var(--data); opacity: .75; transition: transform .15s ease, opacity .15s ease; }
.drill:hover .drill__ico, .drill:focus-visible .drill__ico { opacity: 1; transform: translateX(2px); }
.drill:hover { text-decoration: underline dotted; text-decoration-thickness: 2px; text-underline-offset: 5px; }
@media (prefers-reduced-motion: reduce) { .drill__ico { transition: none; } .drill:hover .drill__ico { transform: none; } }
/* Umsatz im Detail: Rechnung als Treppe */
.uxl { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 2px; max-width: 640px; }
.ux { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 10px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.ux__s { color: var(--muted); font-weight: 600; text-align: center; }
.ux__k { display: grid; }
.ux__n { font-size: var(--fs-caption); color: var(--muted); }
.ux__v { font-weight: 600; font-size: var(--fs-section); }
.ux--sum { border-bottom: 0; border-top: 2px solid var(--ink); }
.ux--sum .ux__k, .ux--sum .ux__v { font-weight: 600; font-size: var(--fs-section); }
.uxh { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12em), 1fr)); gap: 4px 16px; }
.uxh .drill { display: flex; justify-content: space-between; min-height: 44px; padding: 0 4px; border-bottom: 1px solid var(--line-soft); width: 100%; }
.uxh .drill b { margin-left: auto; }
.xrefs { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.xref { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
/* Nur für WEBWUNDER-Admin: einheitlich gekennzeichnete Bereiche (Steuerung, Entwürfe, Technik) – Eigentümer sehen sie nie */
.admin-zone { display: grid; gap: var(--gap); padding: 16px; border: 1px dashed #B3B9C2; border-radius: var(--r-m); background: #F7F8FA; }
.admin-zone__label { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-caption); font-weight: 600; letter-spacing: .02em; color: var(--ink-2); }
.admin-zone__label::before { content: ''; width: 8px; height: 8px; border-radius: var(--r-s); background: var(--ink-2); }
.ux-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 40px; margin-top: 8px; }
.ux-two h3 { font-size: var(--fs-body); color: var(--ink-2); }
@media (max-width: 900px) { .ux-two { grid-template-columns: minmax(0, 1fr); } }

/* Runde 2 (28.10.2026): Werbung am Telefon – Kampagnen als kompakte Zeilen zum Aufklappen, gemeinsames „more“-Aufklappen */
.kcr-list { list-style: none; margin: 8px 0 0; padding: 0; }
.kcr { border-bottom: 1px solid var(--line-soft); }
.kcr > details > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "t v" "s s"; gap: 2px 12px; align-items: center; min-height: 56px; padding: 8px 0; cursor: pointer; list-style: none; }
.kcr > details > summary::-webkit-details-marker { display: none; }
.kcr__t { grid-area: t; font-weight: 600; }
.kcr__v { grid-area: v; font-weight: 600; }
.kcr > details > summary .st { grid-area: s; font-size: var(--fs-caption); }
.kcr__b { margin: 0 0 12px; }
.more { margin-top: 10px; }
.more > summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; font-weight: 600; color: var(--data); }
/* Kernzahlen oben (Runde 2): 3–5 gleiche Felder, Zahl groß, Zeitraum darunter; Telefon zwei Spalten */
.kz { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10em), 1fr)); gap: 14px 24px; }
.kz__i { display: grid; gap: 2px; align-content: start; min-width: 0; }
.kz__k { font-size: var(--fs-caption); font-weight: 600; color: var(--ink-2); }
.kz__v { font-size: var(--fs-kpi); font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; color: var(--ink); overflow-wrap: anywhere; }
.kz__v.is-missing { font-size: var(--fs-section); color: var(--muted); }
.kz__n { font-size: var(--fs-caption); color: var(--muted); }
.kz__foot { grid-column: 1 / -1; padding-top: 8px; border-top: 1px solid var(--line-soft); font-size: var(--fs-caption); color: var(--muted); }
@media (max-width: 640px) { .kz { grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5em), 1fr)); gap: 12px 16px; } }
/* Einklappbare Abschnitte statt langer Seiten */
.sect { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-m); }
.sect > summary { display: grid; gap: 2px; padding: 16px 52px 16px 20px; min-height: 56px; cursor: pointer; list-style: none; position: relative; }
.sect > summary::-webkit-details-marker { display: none; }
.sect > summary::after { content: ''; position: absolute; right: 22px; top: 24px; width: 9px; height: 9px; border-right: 2px solid var(--data); border-bottom: 2px solid var(--data); transform: rotate(45deg); transition: transform .15s ease; }
.sect[open] > summary::after { transform: rotate(225deg); top: 28px; }
.sect__t { font-size: var(--fs-section); font-weight: 600; }
.sect__s { font-size: var(--fs-caption); color: var(--muted); }
.sect__b { display: grid; gap: var(--gap); padding: 0 16px 16px; }
@media (prefers-reduced-motion: reduce) { .sect > summary::after { transition: none; } }
.seg--parts { display: flex; flex-wrap: wrap; width: fit-content; max-width: 100%; }
.seg--parts a { flex: 1 1 auto; justify-content: center; }
@media (max-width: 640px) { .seg--parts { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); width: 100%; } .seg--parts a { padding: 0 8px; font-size: var(--fs-caption); text-align: center; } }
/* Telefon, Korrektur 27.10.2026 abends (Rückmeldung Johannes, echtes Android-Gerät mit größerer Schrift): Kampagnenkarte einspaltig,
   kein Bildspalt, Kennzahlen zweispaltig mit Mindestbreite, damit nichts überlappt oder Wort für Wort umbricht */
@media (max-width: 640px) {
  .kc { display: flex; flex-direction: column; gap: 6px; padding: 14px; }
  .kc > .kc__img { display: none; }
  .kc__body { width: 100%; min-width: 0; }
  .kc__head { flex-wrap: wrap; }   /* Zustand rutscht bei großer Schrift unter den Namen statt ihn zu quetschen */
  .kc__t { font-size: var(--fs-section); }
  .kc__meta { font-size: var(--fs-caption); line-height: 1.45; }
  .kc__kv { grid-template-columns: repeat(auto-fit, minmax(6.5em, 1fr)); gap: 10px 16px; }   /* auto-fit: zweispaltig, bei sehr großer Schrift einspaltig statt Überlauf */
  .kc-list.v-wide, .ak-list.v-wide { display: none; }   /* Telefon: kompakte Zeilen bzw. Top 3 statt Kartenraster */
  .kc__kv dt { white-space: nowrap; }
  .kc__kv dd { font-size: var(--fs-section); white-space: nowrap; }
}
/* Große Systemschrift (Korrektur 28.10.2026): Android vergrößert die Schrift per Seitenzoom; bei 130 bis 200 % bleiben nur 180 bis 320 CSS-Pixel.
   Kopf: Logo schrumpft (Menü ist seit 31.10.2026 immer ein Symbolknopf mit Namen); Monatswahl darf umbrechen; nichts erzwingt eine Mindestbreite über der Bildschirmbreite. */
@media (max-width: 360px) {
  .topbar img { width: min(128px, calc(100% - 4.5em)); height: auto; }   /* nie größer als im Normalfall (31.10.2026) */
  .field-inline { flex-wrap: wrap; }
  .field-inline input[type="month"] { width: 100%; min-width: 0; }
  main.main { padding-left: 12px; padding-right: 12px; }
}
/* Sehr große Schrift (≤ 320 CSS-Pixel, z. B. 130 % auf 360 px oder 200 %): Vergleichszeilen zweizeilig, keine erzwungenen Zeilen ohne Umbruch */
@media (max-width: 320px) {
  .nw, .delta, .cmp__v, .kpi__cmp { white-space: normal; }
  .cmp.cmp--m, .kpi__cmp--wide .cmp.cmp--m { grid-template-columns: 12px minmax(0, 1fr); }
  .cmp--m .cmp__v { grid-column: 2; }
  .bul, .bul__track { max-width: 100%; min-width: 0; }
  .btn, a.btn { white-space: normal; max-width: 100%; height: auto; text-align: center; }
  .kpi--v { padding: 12px; }
  .kpi__row { flex-wrap: wrap; }
  .sp { max-width: 100%; }
  .hcard { min-width: 0; flex-basis: min(180px, 78%); }
  .fee__cta { min-width: 0; grid-template-columns: minmax(0, 1fr); }
  main.main > * { min-width: 0; }
  .sub, .panel__head > div { min-width: 0; }
  .kc { padding: 12px; }
  .kc__t, .kcr__t, .ak__t { overflow-wrap: anywhere; hyphens: auto; -webkit-hyphens: auto; }
  .kpis > *, .grid2 > *, .kz > *, .ak-kpis > * { min-width: 0; }
  .kpi--v > *, .kpi__cmp > *, .cmp--m > * { min-width: 0; max-width: 100%; }
  .kpi__head { flex-wrap: wrap; }
  main section.panel { padding: 12px; }
  .kpi__value { font-size: var(--fs-kpi-s); }
  .seg--small a, .seg a { white-space: normal; }
  .seg { flex-wrap: wrap; }
  .fee__cta .btn { width: 100%; }
}
.kcr > details > summary { color: var(--ink); padding-right: 22px; position: relative; }
.kcr > details > summary::after { content: ''; position: absolute; right: 4px; top: 22px; width: 8px; height: 8px; border-right: 2px solid var(--data); border-bottom: 2px solid var(--data); transform: rotate(45deg); }
.kcr > details[open] > summary::after { transform: rotate(225deg); top: 26px; }
/* Abschnittskopf im Teil ersetzt den bisherigen Seitenabschnitts-Kopf (keine doppelte Überschrift) */
.sect__t { margin: 0; }
.sect__b > .pagehead:first-child, .sect__b > section.pagehead:first-child { display: none; }
@media (max-width: 320px) { h1 { font-size: var(--fs-title); overflow-wrap: anywhere; hyphens: auto; -webkit-hyphens: auto; } .pagehead > div { min-width: 0; } dt, dd { overflow-wrap: anywhere; } }
/* Raster-Kinder dürfen schrumpfen, damit breite Tabellen in ihrem Scrollbereich bleiben statt die Seite zu verbreitern (Runde 2) */
main.main > * { min-width: 0; }
/* Benutzerliste am Telefon als Karten statt breiter Tabelle */
@media (max-width: 640px) {
  table.users, table.users tbody, table.users tr, table.users td { display: block; width: 100%; }
  table.users thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.users tr { padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
  table.users td { padding: 2px 0; border: 0; }
  table.users td.rowactions { display: flex; flex-wrap: wrap; gap: 4px 16px; padding-top: 8px; }
  table.users td.rowactions a, table.users td.rowactions .linkbtn { min-height: 44px; display: inline-flex; align-items: center; }
}
@media (max-width: 320px) { main input, main select, main textarea { max-width: 100%; min-width: 0; box-sizing: border-box; } main label { min-width: 0; max-width: 100%; } main form { min-width: 0; } }
/* Trichter (w3int): Zeitraumwahl „7 | 28 | 90 Tage“ am Telefon ohne Umbruch im Knopf; die Leiste selbst bricht unter die Überschrift */
@media (max-width: 640px) { #t-trichter .panel__head > .seg { flex: 1 1 100%; margin-right: 0; } #t-trichter .panel__head > .seg a { white-space: nowrap; flex: 1 1 auto; justify-content: center; padding: 0 10px; } }
/* Heatmap (w3heatmap, 28.10.2026): Auswahl, Wärmebild über dem Bildschirmfoto (SVG-Raster 50 × 100), Seitenspalte mit Scrolltiefe und Zielen */
.hm-controls { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between; }
.hm-pick { flex-wrap: wrap; min-width: 0; }
.hm-pick select { min-height: 44px; max-width: 100%; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--card); padding: 0 10px; color: var(--ink); font: inherit; font-size: 16px; }
.hm-segs { display: flex; flex-wrap: wrap; gap: 8px; }
.hm-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--gap); align-items: start; }
.hm-side { display: grid; gap: var(--gap); min-width: 0; }
.hm-wrap { margin-top: 12px; max-height: 78vh; overflow: auto; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--track, #E8EAEE); }
.hm-wrap:focus-visible { outline: 3px solid var(--data); outline-offset: 2px; }
.hm-stage { position: relative; width: 100%; margin: 0 auto; }
.hm-stage--handy { max-width: 390px; }
.hm-stage img { display: block; width: 100%; height: auto; }
.hm-stage svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hm-stage--leer { aspect-ratio: 1440 / 5200; background-image: linear-gradient(to bottom, var(--line-soft) 1px, transparent 1px), linear-gradient(to right, var(--line-soft) 1px, transparent 1px); background-size: 100% 10%, 10% 100%; background-color: var(--card); }
.hm-stage--handy.hm-stage--leer { aspect-ratio: 390 / 5200; }
.hm-legend { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-caption); color: var(--muted); }
.hm-legend__bar { display: inline-block; width: 96px; height: 10px; border-radius: var(--r-s); background: linear-gradient(to right, rgb(255, 214, 102), rgb(242, 113, 28), rgb(168, 18, 18)); }
.hm-side code { font-size: var(--fs-micro); word-break: break-all; }
@media (max-width: 900px) { .hm-grid { grid-template-columns: minmax(0, 1fr); } .hm-wrap { max-height: 70vh; } .hm-controls { align-items: stretch; } }
/* Zugänge und Erneuerungen (w3int, 28.10.2026): Karten einspaltig am Telefon, Breiten in em (200 % Schrift ohne Überlauf), Statusbalken; Werbebibliothek-Balken */
.zg-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 24em), 1fr)); gap: var(--gap); }
.zg-card { min-width: 0; border: 1px solid var(--line); border-left-width: 4px; border-radius: var(--r-s); padding: 12px 14px; background: var(--card); overflow-wrap: anywhere; }
.zg-card--ok { border-left-color: var(--good); } .zg-card--bald { border-left-color: var(--warn); } .zg-card--abgelaufen, .zg-card--fehlt { border-left-color: var(--error); } .zg-card--unbekannt, .zg-card--nicht_genutzt, .zg-card--nicht_eingerichtet { border-left-color: var(--line); }
.zg-card__head { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; justify-content: space-between; }
.zg-card__name { font-size: var(--fs-body); margin: 0; min-width: 0; }
.zg-card__why { margin: 6px 0 0; color: var(--muted); }
.zg-card__how { margin: 8px 0 0; }
.zg-kv { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; margin: 8px 0 0; }
.zg-kv > div { display: flex; flex-wrap: wrap; gap: 0 0.6em; min-width: 0; }
.zg-kv dt { color: var(--muted); min-width: 8.5em; }
.zg-kv dd { margin: 0; min-width: 0; flex: 1 1 12em; }
.zg-bar { display: flex; height: 0.9em; border-radius: var(--r-s); overflow: hidden; background: var(--line-soft); margin-top: 12px; }
.zg-bar__p--ok { background: var(--good); } .zg-bar__p--bald { background: var(--warn); } .zg-bar__p--abgelaufen { background: var(--error); } .zg-bar__p--fehlt { background: var(--error); opacity: 0.6; } .zg-bar__p--unbekannt { background: var(--muted); } .zg-bar__p--nicht_genutzt, .zg-bar__p--nicht_eingerichtet { background: var(--line); }
.zg-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 0; margin: 8px 0 0; font-size: var(--fs-caption); }
.zg-dot { display: inline-block; width: 0.75em; height: 0.75em; border-radius: 50%; margin-right: 0.4em; vertical-align: baseline; }
.zg-credit { margin: 8px 0 0; }
.zg-credit__v { font-size: var(--fs-kpi); font-weight: 600; }
.zg-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14em), 1fr)); gap: 12px; align-items: end; }
.zg-form .actions { grid-column: 1 / -1; }
.zg-hint { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 6px; }
.wbl-bar { height: 0.5em; border-radius: var(--r-s); background: var(--line-soft); margin: 6px 0 4px; max-width: 24em; }
.wbl-bar span { display: block; height: 100%; border-radius: var(--r-s); background: var(--data); }
/* Wochenrückblick der Werbung (28.10.2026) */
.wb-rueckblick p { margin: 0.5em 0 0; max-width: 68ch; }
.wb-rueckblick__sig { margin-top: 0.9em !important; font-weight: 600; }
/* Super-Admin → Erinnerungen (28.10.2026): eine Spalte, Breiten in em, 44 px Tippflächen, ohne waagerechte Scrollleiste */
.er-list { list-style: none; margin: 0.75em 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); }
.er-item { min-width: 0; border: 1px solid var(--line); border-left-width: 4px; border-radius: var(--r-s); padding: 0.75em 0.9em; background: var(--card); overflow-wrap: anywhere; }
.er-item--offen { border-left-color: var(--warn); } .er-item--in_arbeit { border-left-color: var(--data, var(--line)); } .er-item--erledigt { border-left-color: var(--good); }
.er-item.is-faellig { border-left-color: var(--error); }
.er-item__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.4em 0.8em; }
.er-item__titel { margin: 0; font-size: 1em; min-width: 0; }
.er-item__text { margin: 0.5em 0 0; }
.er-kv { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.25em; margin: 0.5em 0 0; }
.er-kv > div { display: flex; flex-wrap: wrap; gap: 0 0.6em; min-width: 0; }
.er-kv dt { color: var(--muted); min-width: 7.5em; }
.er-kv dd { margin: 0; min-width: 0; flex: 1 1 10em; }
.er-faellig { color: var(--error); }
.er-item__link { margin: 0.5em 0 0; }
.er-item__link a { display: inline-flex; align-items: center; min-height: 44px; }
.er-actions { display: flex; flex-wrap: wrap; gap: 0.5em; margin-top: 0.6em; }
.er-actions .btn, .er-actions .linkbtn { min-height: 44px; }
.er-edit, .er-neu { margin-top: 0.6em; }
.er-edit > summary, .er-neu > summary { min-height: 44px; display: inline-flex; align-items: center; cursor: pointer; }
.er-form { margin-top: 0.75em; max-width: 40em; }
.er-form input[type="date"], .er-form select, .er-form input[type="url"] { width: 100%; max-width: 100%; border: 1px solid var(--line); border-radius: var(--r-s); background: #fff; color: var(--ink); padding: 0.6em 0.75em; font-size: 1rem; min-height: 44px; }
.er-hinweis { border-left: 4px solid var(--error); }
.er-hinweis h2 { margin: 0; font-size: 1em; }
.er-hinweis__list { margin: 0.5em 0 0; padding-left: 1.2em; }
.er-hinweis__list li { margin: 0.25em 0; overflow-wrap: anywhere; }
.er-hinweis__list a, .er-hinweis__foot a { display: inline-flex; align-items: center; min-height: 44px; }
.er-hinweis__foot { margin: 0.25em 0 0; }
/* Super-Admin → Systemstatus (28.10.2026): eine Spalte, Breiten in em, gestörte Bereiche ausgeklappt */
.ss-info { align-self: flex-start; }
.ss-gesamt { border-left: 6px solid var(--good); }
.ss-gesamt--warn { border-left-color: var(--warn); } .ss-gesamt--error { border-left-color: var(--error); }
.ss-gesamt__titel { margin: 0; font-size: 1em; line-height: 1.2; }
.ss-gesamt__sub { margin: 0.4em 0 0; color: var(--muted); overflow-wrap: anywhere; }
.ss-bereich { padding: 0; }
.ss-bereich__sum { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4em 0.8em; min-height: 44px; padding: 0.6em 0.9em; cursor: pointer; }
.ss-bereich__name { font-weight: 600; font-size: 1em; }
.ss-bereich__n { color: var(--muted); margin-right: auto; }
.ss-list { list-style: none; margin: 0; padding: 0 0.9em 0.9em; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.6em; }
.ss-item { min-width: 0; border: 1px solid var(--line); border-left-width: 4px; border-radius: var(--r-s); padding: 0.6em 0.8em; background: var(--card); overflow-wrap: anywhere; }
.ss-item--ok { border-left-color: var(--good); } .ss-item--warnung { border-left-color: var(--warn); } .ss-item--gestoert { border-left-color: var(--error); } .ss-item--unbekannt, .ss-item--nicht_eingerichtet { border-left-color: var(--line); }
.ss-item__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.3em 0.8em; }
.ss-item__name { margin: 0; font-size: 1em; min-width: 0; }
.ss-kv { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.2em; margin: 0.4em 0 0; font-size: 1em; }
.ss-kv > div { display: flex; flex-wrap: wrap; gap: 0 0.6em; min-width: 0; }
.ss-kv dt { color: var(--muted); min-width: 8em; }
.ss-kv dd { margin: 0; min-width: 0; flex: 1 1 12em; }
.ss-quelle { color: var(--muted); font-size: var(--fs-caption); }
/* Verwaltung → Datenquellen (28.10.2026): Altbestand eingeklappt */
.ops-alt > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; color: var(--muted); }
.ops-alt__info { margin: 0.4em 0; }
/* Revenue Management (w3-revenue, 28.10.2026): Kacheln, On the Books, Wochentage, Definitionen. Breiten und Abstände in em (200 % Schrift ohne
   Überlauf), am Telefon einspaltig; Farben nur aus den Tokens (Ist = Waldgrün, Vorjahr/STLY = Blau). */
.lroot.rv { grid-template-columns: minmax(0, 1fr); }
.rv-stand { margin: -0.25em 0 0; }
.rv-kpis { grid-template-columns: repeat(auto-fill, minmax(min(100%, 15em), 1fr)); }
.rv-tile .kpi__value { font-size: var(--fs-kpi); overflow-wrap: anywhere; }
.rv-tile .kpi__sub { overflow-wrap: anywhere; }
.rv-seg { display: flex; flex-wrap: wrap; margin-top: 0.75em; max-width: 100%; }
.rv-seg a { flex: 1 1 auto; justify-content: center; }
.rv .hbl__v { white-space: normal; overflow-wrap: anywhere; }
.rv .hbl { grid-template-columns: minmax(0, 1.5fr) minmax(3em, 1fr) minmax(0, max-content); }
.rv .hbl__l { overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
.rv-otb { list-style: none; margin: 0.75em 0 0; padding: 0; display: grid; gap: 1em; }
.rv-otb__i { min-width: 0; border-top: 1px solid var(--line-soft); padding-top: 0.75em; }
.rv-otb__i:first-child { border-top: 0; padding-top: 0; }
.rv-otb__h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.5em; font-size: var(--fs-body); }
.rv-otb__dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9em), 1fr)); gap: 0.5em 1em; margin: 0.5em 0 0; }
.rv-otb__dl > div { display: grid; gap: 0.1em; min-width: 0; }
.rv-otb__dl dt { font-size: var(--fs-caption); color: var(--muted); }
.rv-otb__dl dd { display: grid; gap: 0.1em; margin: 0; }
.rv-otb__v { font-size: var(--fs-section); font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; }
.rv-otb__p { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2em 0.4em; font-size: var(--fs-caption); color: var(--ink-2); }
.rv-wd { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16em), 1fr)); gap: 1em 1.5em; margin-top: 0.75em; }
.rv-wd__i { display: grid; gap: 0.25em; min-width: 0; }
.rv-wd__h, .rv-h3 { font-size: var(--fs-body); }
.rv-wd__v { font-size: var(--fs-kpi); font-weight: 600; line-height: 1.15; }
.rv-defs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22em), 1fr)); gap: 0.75em 1.5em; margin: 0.75em 0 0; }
.rv-defs > div { min-width: 0; }
.rv-defs dt { font-weight: 600; }
.rv-defs dd { margin: 0.15em 0 0; font-size: var(--fs-body); color: var(--ink-2); overflow-wrap: anywhere; }
.rv-sw--dash { background: repeating-linear-gradient(90deg, var(--cmp) 0 0.35em, transparent 0.35em 0.6em) !important; }
.ar__svg .rv-mark { stroke: var(--ink-2); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
@media (max-width: 640px) { .rv .grid2--pair { grid-template-columns: minmax(0, 1fr); } .rv-seg a { padding: 0 0.6em; } .rv .hbl { grid-template-columns: minmax(0, 1fr) minmax(0, auto); } }
/* Revenue Management Pakete 1 bis 3 (w3-revenue2, 28.10.2026): Monatsprognose, Empfehlungen, Mitbewerber-Preise, In Mews aktiv, Monatsbericht.
   em-basiert, einspaltig am Telefon, 200 % Schrift ohne Überlauf (min-width: 0, overflow-wrap). Farben nur aus den vorhandenen Tokens. */
.rv-prog__dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9em), 1fr)); gap: 0.5em 1em; margin: 0.75em 0 0; }
.rv-prog__dl > div { display: grid; gap: 0.1em; min-width: 0; }
.rv-prog__dl dt { font-size: var(--fs-caption); color: var(--muted); }
.rv-prog__dl dd { display: grid; gap: 0.1em; margin: 0; min-width: 0; overflow-wrap: anywhere; }
.rv-prog__v { font-size: var(--fs-section); font-weight: 600; line-height: 1.2; }
.rv-pbar { position: relative; display: flex; height: 0.9em; margin: 1em 0 0.25em; background: var(--track); border-radius: var(--r-s); overflow: hidden; }
.rv-pbar__ist { background: var(--forest); }
.rv-pbar__otb { background: rgba(31, 77, 58, .55); }
.rv-pbar__pu { background: repeating-linear-gradient(135deg, rgba(31, 77, 58, .45) 0 3px, rgba(31, 77, 58, .15) 3px 6px); }
.rv-pbar__sp { position: absolute; top: 0.3em; height: 0.3em; background: var(--ink-2); border-radius: var(--r-s); }
.rv-sw--otb { background: rgba(31, 77, 58, .55) !important; }
.rv-sw--pu { background: repeating-linear-gradient(135deg, rgba(31, 77, 58, .45) 0 3px, rgba(31, 77, 58, .15) 3px 6px) !important; }
.rv-sw--sp { background: var(--ink-2) !important; height: 0.3em !important; vertical-align: 0.15em; }
.rv-sw--span { background: var(--cmp) !important; opacity: .35; }
.rvx .msg { overflow-wrap: anywhere; }
.rve-list, .rvr-list, .rvg-list { list-style: none; margin: 0.75em 0 0; padding: 0; display: grid; gap: 0.75em; }
.rve, .rvr, .rvg { min-width: 0; border-top: 1px solid var(--line-soft); padding-top: 0.75em; overflow-wrap: anywhere; }
.rve:first-child, .rvr:first-child, .rvg:first-child { border-top: 0; padding-top: 0; }
.rve__head, .rvr__h, .rvg__h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25em 0.6em; }
.rve__t { font-size: var(--fs-body); margin: 0; min-width: 0; }
.rve__k { font-size: var(--fs-caption); font-weight: 600; border-radius: var(--r-s); padding: 0.1em 0.5em; white-space: nowrap; }
.rve__k--hoch { background: var(--sage); color: #1E4A32; }
.rve__k--mittel { background: var(--warn-wash); color: var(--warn); }
.rve__k--niedrig { background: #EEF0F3; color: var(--ink-2); }
.rve__e, .rve__b, .rve__l, .rvg__b { margin: 0.35em 0 0; }
.rve__d { margin-top: 0.35em; }
.rve__d summary { cursor: pointer; min-height: 2.75em; display: flex; align-items: center; color: var(--data); font-weight: 600; }
.rve__d ul, .rvm__d ul { margin: 0.25em 0 0; padding-left: 1.2em; font-size: var(--fs-body); color: var(--ink-2); }
.rvr__dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14em), 1fr)); gap: 0.4em 1.25em; margin: 0.5em 0 0; }
.rvr__dl > div { min-width: 0; }
.rvr__dl dt { font-size: var(--fs-caption); color: var(--muted); }
.rvr__dl dd { margin: 0; overflow-wrap: anywhere; }
.rvx-restr { margin: 0.75em 0 0; padding-left: 1.2em; display: grid; gap: 0.4em; overflow-wrap: anywhere; }
.rvm { list-style: none; margin: 0.75em 0 0; padding: 0; display: grid; gap: 0.9em; }
.rvm__r { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(6em, 1.6fr) minmax(0, 1fr); gap: 0.4em 1em; align-items: center; min-width: 0; }
.rvm__l, .rvm__v { display: grid; gap: 0.1em; min-width: 0; overflow-wrap: anywhere; }
.rvm__bar { position: relative; height: 1.4em; min-width: 0; }
.rvm__track { position: absolute; left: 0; right: 0; top: 0.6em; height: 0.2em; background: var(--track); border-radius: var(--r-s); }
.rvm__span { position: absolute; top: 0.35em; height: 0.7em; background: var(--cmp); opacity: .35; border-radius: var(--r-s); }
.rvm__avg { position: absolute; top: 0.15em; width: 0.2em; height: 1.1em; margin-left: -0.1em; background: var(--cmp); border-radius: var(--r-s); }
.rvm__us { position: absolute; top: 0.3em; width: 0.8em; height: 0.8em; margin-left: -0.4em; background: var(--forest); transform: rotate(45deg); border-radius: var(--r-s); }
.mk.rvm__mk-avg { width: 3px; height: 14px; margin: 0 4.5px; background: var(--cmp); border-radius: var(--r-s); }
.mk.rvm__mk-us { width: 9px; height: 9px; margin: 0 1.5px; background: var(--forest); transform: rotate(45deg); border-radius: var(--r-s); }
.rvm__pos { font-weight: 600; }
.rvm__pos--guenstiger { color: var(--good); }
.rvm__pos--teurer { color: var(--warn); }
.rvm__d { margin-top: 0.5em; overflow-wrap: anywhere; }
.rvm__d summary { cursor: pointer; min-height: 2.75em; display: flex; align-items: center; color: var(--data); font-weight: 600; }
@media (max-width: 640px) { .rvm__r { grid-template-columns: minmax(0, 1fr); } }
/* Monatsbericht: druckoptimierte Seite (A4), PDF über den Browser */
.rvb { max-width: 210mm; margin: 0 auto 2em; padding: 14mm 14mm 12mm; background: #fff; color: #1A1F2B; font-size: var(--fs-body); line-height: 1.45; overflow-wrap: anywhere; }
.rvb h1 { font-size: var(--fs-title); margin: 0.2em 0; }
.rvb h2 { font-size: var(--fs-section); margin: 1.4em 0 0.5em; padding-bottom: 0.25em; border-bottom: 1px solid #1A1F2B; }
.rvb__k { font-size: var(--fs-micro); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #5E6573; }
.rvb__s { font-size: var(--fs-caption); color: #5E6573; }
.rvb__t { width: 100%; border-collapse: collapse; margin: 0.4em 0 0.6em; font-variant-numeric: tabular-nums; }
.rvb__t th, .rvb__t td { padding: 0.3em 0.4em 0.3em 0; border-bottom: 1px solid #E8EAEE; text-align: left; vertical-align: top; font-weight: 400; }
.rvb__t thead th { font-size: var(--fs-micro); font-weight: 600; color: #5E6573; border-bottom: 1px solid #1A1F2B; }
.rvb__t .n { text-align: right; }
.rvb__emp { padding-left: 1.2em; display: grid; gap: 0.5em; }
.rvb__foot { margin-top: 1.5em; padding-top: 0.6em; border-top: 1px solid #D8DCE2; font-size: var(--fs-caption); color: #5E6573; }
.rvb__test { padding: 0.4em 0.6em; border-radius: var(--r-s); background: #F8E4E1; color: #B3261E; font-size: var(--fs-micro); font-weight: 600; letter-spacing: .08em; text-align: center; }
@media (max-width: 640px) { .rvb { padding: 1.2em 1em; } .rvb__t { display: block; overflow-x: auto; } }
@media print { .rvb { max-width: none; width: 210mm; margin: 0; padding: 12mm 14mm; font-size: 10.5pt; } .rvb section { break-inside: avoid-page; } .rvb h2 { break-after: avoid; } }

/* ===== Designpilot Übersicht (29.10.2026, docs/DESIGN-PILOT-UEBERSICHT-2026-10-29.md) =====================================================
   Nur die Übersicht (.ov), bis Johannes den Piloten abnimmt; danach werden die Muster in die Grundregeln übernommen statt hier zu stehen.
   Ruhige Flächen (Haarlinie in Flächenfarbe, weicher Schatten, 16 px Ecken), starke Leitzahlen, Veränderungs-Chip (Form + Text, nie Farbe allein),
   Verlauf über die volle Kartenbreite, Einordnung „Was hat sich verändert · Warum · Was tun“ als natives details in der Karte. */
.ov { --surface-line: var(--line-soft); --surface-shadow: none; --rl: var(--r-m); }
.ov .panel, .ov .kpi, .ov .nb__src, .ov .datastate { border-color: var(--surface-line); border-radius: var(--r-m); box-shadow: none; }
.ov .pagehead h1 { font-size: var(--fs-title); letter-spacing: -0.025em; }
.ov .panel--v .panel__head h2 { font-size: var(--fs-section); letter-spacing: -0.01em; }
.ov .panel__foot { border-top-color: var(--line-soft); }

/* Leitkennzahlen: 3 Spalten ab rund 1000 px Inhalt, 2 am Tablet, 1 am Telefon; Mindestbreite 20em (bei 200 % Schrift früher einspaltig) */
.ov .kpis--lead { grid-template-columns: repeat(auto-fill, minmax(min(100%, 20em), 1fr)); }
.kpi--lead { display: flex; flex-direction: column; gap: 8px; padding: 20px 22px 0; overflow: visible; }
.kpi--lead .kpi__label { font-size: var(--fs-caption); font-weight: 600; color: var(--muted); letter-spacing: .005em; }
.kpi--lead .kpi__row { justify-content: flex-start; align-items: center; gap: 6px 12px; }
.kpi--lead .kpi__value { font-size: var(--fs-kpi); font-weight: 600; line-height: 1.05; letter-spacing: -0.025em; }
.kpi--lead .kpi__value.is-missing { font-size: var(--fs-section); letter-spacing: 0; }
.ov .kpi__value .drill { min-height: 44px; }   /* Drilldown an der Zahl: Tippfläche 44 px (Leitkennzahlen und Revenue-Leiste) */
.kpi--lead .kpi__sub { margin-top: -2px; font-size: var(--fs-caption); color: var(--ink-2); }
.kpi__spark { display: grid; gap: 2px; margin: 2px 0 0; }
.kpi__spark .sp { display: block; width: 100%; height: auto; margin: 0; }
.kpi__sparkcap { display: flex; justify-content: space-between; gap: 8px; font-size: var(--fs-micro); line-height: 1.3; color: var(--muted); }
.kpi--lead .bul { margin-top: 2px; }
.kpi--lead .kpi__cmp { font-size: var(--fs-caption); color: var(--ink-2); }

/* Veränderungs-Chip: Pfeil nach oben/unten bzw. Strich, Wert, ausgeschrieben für Screenreader („zum Vorjahr“); Kontrast Text ≥ 4,5 : 1 */
.chg { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px 3px 7px; border-radius: var(--r-pill); font-size: var(--fs-caption); font-weight: 600; line-height: 1.3; white-space: nowrap; }
.chg svg { width: 12px; height: 12px; flex: none; fill: currentColor; }
.chg--up { background: #E3EFE7; color: #1A5E3C; }
.chg--down { background: #F6ECD9; color: #7A4C00; }
.chg--flat { background: #E6E9ED; color: var(--ink-2); }

/* Einordnung an der Zahl: Kopfzeile = Zeichen + Satz (Information auch zugeklappt), aufgeklappt Was · Warum · Was tun und der nächste Schritt */
.hint, .kpi--v > .hint { margin: auto -22px 0; max-width: none; border-top: 1px solid var(--line-soft); }   /* volle Kartenbreite; die Regel „.kpi--v > * { max-width: 100% }“ bei sehr großer Schrift gilt hier nicht */
.kpi--lead > .kpi__cmp { margin-bottom: 12px; }
.hint > summary { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 22px; list-style: none; cursor: pointer; border-radius: 0 0 var(--r-m) var(--r-m); font-size: var(--fs-body); font-weight: 600; line-height: 1.35; color: var(--ink); }
.hint > summary::-webkit-details-marker { display: none; }
.hint > summary::marker { content: ''; }
.hint > summary:hover { background: #FAFBFC; }
.hint[open] > summary { border-radius: 0; background: #FAFBFC; }
.hint__ico { display: inline-grid; flex: none; }
.hint__ico svg { width: 18px; height: 18px; }
.hint--good .hint__ico { color: var(--good); } .hint--warn .hint__ico { color: var(--warn); } .hint--none .hint__ico { color: var(--muted); }
.hint__head { flex: 1 1 auto; min-width: 0; }
.hint__more { flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-caption); font-weight: 600; color: var(--data); }
.hint__more::after { content: ''; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .15s ease; }
.hint[open] .hint__more::after { transform: translateY(2px) rotate(-135deg); }
.hint__body { display: grid; gap: 10px; padding: 4px 22px 16px; background: #FAFBFC; border-radius: 0 0 var(--r-m) var(--r-m); font-size: var(--fs-body); }
.kpi .hint__dl, .hint__dl { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 0; font-size: var(--fs-body); }
.hint__dl > div { display: grid; gap: 2px; }
.hint__dl dt { font-size: var(--fs-caption); font-weight: 600; color: var(--muted); }
.hint__dl dd { margin: 0; color: var(--ink); overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
.hint__go { margin: 0; }
.hint__go a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.hint__go a::after { content: ''; width: 7px; height: 7px; margin-left: 8px; border-right: 2px solid currentColor; border-top: 2px solid currentColor; transform: rotate(45deg); }
@media (prefers-reduced-motion: reduce) { .hint__more::after { transition: none; } }
@media print { .hint__more { display: none; } }

/* Revenue-Kennzahlen (Auftrag 28.10.2026) als ruhige Leiste unter den Leitkennzahlen: eine Fläche, vier Zellen mit Haarlinie, 2 × 2 am Telefon */
.ov .rv-ov { gap: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--card); border: 1px solid var(--surface-line); border-radius: var(--r-m); box-shadow: none; overflow: visible; }
.ov .rv-ov > .kpi { border: 0; border-left: 1px solid var(--line-soft); border-radius: 0; box-shadow: none; background: none; padding: 14px 18px; }
.ov .rv-ov > .kpi:first-child { border-left: 0; }
.ov .rv-ov .kpi__label { font-size: var(--fs-caption); color: var(--muted); }
.ov .rv-ov .kpi__value { font-size: var(--fs-kpi); }
@media (max-width: 1100px) { .ov .rv-ov { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ov .rv-ov > .kpi:nth-child(3) { border-left: 0; } .ov .rv-ov > .kpi:nth-child(n + 3) { border-top: 1px solid var(--line-soft); } }

@media (max-width: 640px) {
  .kpi--lead { padding: 16px 16px 0; gap: 6px; }
  .hint, .kpi--v > .hint { margin-left: -16px; margin-right: -16px; }
  .hint > summary { padding: 10px 16px; }
  .hint__body { padding: 4px 16px 14px; }
  .kpi--lead .kpi__value { font-size: var(--fs-kpi); }
  .ov .rv-ov > .kpi { padding: 12px 14px; }
  .ov .rv-ov .kpi__value { font-size: var(--fs-kpi-s); }
  /* erster Bildschirm: neueste Buchung kompakter, damit die erste Leitkennzahl beginnt (Mobile-Brief); Inhalt vollständig, nur das Symbol entfällt */
  .ov .pagehead h1 { font-size: var(--fs-title); }
  .ov .nb { gap: 10px; padding: 14px 16px; }
  .ov .nb__title { font-size: var(--fs-kpi-s); margin: 4px 0 2px; }
  .ov .nb__what { font-size: var(--fs-body); }
  .ov .nb__src { grid-template-columns: minmax(0, 1fr); padding: 12px 14px; }
  .ov .nb__src > .nb__ico { display: none; }
  .ov .nb__why { font-size: var(--fs-caption); }
}
@media (max-width: 640px) { .ov .rv-ov .cmp.cmp--m { grid-template-columns: 12px minmax(0, 1fr); } .ov .rv-ov .cmp--m .cmp__v { grid-column: 2; } }
/* sehr große Schrift (bis rund 195 CSS-Pixel): Monatsfeld und Knopf untereinander, nichts erzwingt eine Breite über dem Bildschirm */
@media (max-width: 360px) { .ov .rv-ov { grid-template-columns: minmax(0, 1fr); } .ov .rv-ov > .kpi { border-left: 0; } .ov .rv-ov > .kpi + .kpi { border-top: 1px solid var(--line-soft); } }

/* ================================================================ Übersicht „Liveboard“ (Korrekturen Johannes 29.10.2026, uebersicht-v2.ts)
   Wenige große Zahlen mit weicher Fläche, ein Kasten „Auf einen Blick“, Hauptdiagramm über volle Breite, kaum Rahmen, kaum Text.
   Erklärungen nur im Popover an der eigenen Karte (Desktop über dem Inhalt, Telefon als Bottom Sheet). */
.lv--dot { padding: 0; min-height: 0; border: 0; background: none; gap: 4px 10px; }
.lv--dot .lv__head { font-size: var(--fs-caption); }
.lv--dot .lv__state { gap: 6px; font-weight: 600; }
.lv--dot .lv__state svg { width: 9px; height: 9px; }
.lv--dot > .info { flex: 0 0 auto; order: 0; margin: 0; }
.lv--dot > .info > summary { position: static; }
.lv--dot > .info[open] { flex-basis: 100%; }
.lv--dot.lv--late, .lv--dot.lv--stale { padding: 4px 10px; border: 1px solid; border-radius: var(--r-pill); }

.ov { --surface-line: var(--line-soft); --surface-shadow: none; --rl: var(--r-m); gap: clamp(20px, 2.6vw, 32px); }   /* Karten ohne sichtbaren Rand, sehr weicher Schatten (Nachtrag Johannes 29.10.2026) */
.nb--line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 10px 16px; background: var(--card); border: 1px solid var(--surface-line); border-radius: var(--r-m); box-shadow: none; }
.nb--line .nb__ico { width: 40px; height: 40px; flex: none; background: var(--sage); color: var(--good); }
.nb--line .nb__ico.nb__src--google_ads, .nb--line .nb__ico.nb__src--meta_ads { background: #F5EBD6; color: #7A4A00; }
.nb--line .nb__ico.nb__src--booking_com, .nb--line .nb__ico.nb__src--portal_sonstig { background: var(--data-wash); color: var(--data); }
.nb--line .nb__ico.nb__src--unbekannt { background: var(--line-soft); color: var(--muted); }
.nb--line .nb__svg { width: 22px; height: 22px; }
.nb__txt { flex: 1 1 18em; min-width: 0; }
.nb--line .nb__title { margin: 0; font-size: var(--fs-body); font-weight: 600; letter-spacing: 0; }
.nb--line .nb__what { font-size: var(--fs-body); color: var(--ink-2); }
.nb--line .nb__more { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0 14px; }
/* Herkunft aus unseren Maßnahmen hervorgehoben, Grund hinter ⓘ (31.10.2026) */
.nb--line .nb__eigen { font-weight: 600; color: var(--good); }
.nb--line > .info { flex: none; position: relative; }
.nb--line > .info > .pop__btn { position: static; width: 44px; height: 44px; margin: 0; }

.ovk-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14em), 1fr)); gap: var(--gap); }   /* 4 nebeneinander am Desktop, 2 am Tablet; weniger Karten (Eigentümer) füllen die Reihe */
.ovk, .ovs { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; background: var(--card); border: 1px solid var(--surface-line); border-radius: var(--r-m); box-shadow: none; }
.ovk { padding: 22px 0 0; gap: 4px; overflow: hidden; container-type: inline-size; }
.ovk > .ovk__head, .ovk > .ovk__row { padding: 0 22px; }
.ovk__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 32px; }
.ovk__row .chg { font-size: var(--fs-caption); padding: 2px 8px 2px 6px; }   /* Veränderung neben der Zahl (Stil Stripe); der Kopf trägt Name, Fachbegriff und Symbol ohne Gedränge (Punkt 28) */
.ovk__head .ovk__label { flex: 1 1 auto; min-width: 0; }
.ovk__label, .ovs__label { font-size: var(--fs-caption); font-weight: 600; color: var(--muted); letter-spacing: .01em; }
.ovk__row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.ovk__value { font-size: var(--fs-kpi); font-weight: 600; line-height: 1.05; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--ink); }
.ovk__value.drill { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.ovk__value.is-missing, .ovs__value.is-missing { font-size: var(--fs-section); font-weight: 600; color: var(--muted); letter-spacing: 0; }
.ovk__curve { position: relative; height: auto; margin: 14px 0 0; }
.ovk__curve .ovc { height: 84px; }   /* randlos bis an die Kartenkanten */
.ovc { position: relative; height: 100%; }
.ovk__svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; }
.ovc { cursor: default; touch-action: pan-y; }
.ovc__x { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px solid rgba(26, 31, 43, .28); opacity: 0; pointer-events: none; }
.ovc__dot { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #2a78d6; box-shadow: 0 0 0 2.5px #fff; opacity: 0; pointer-events: none; }
.ovc.is-x .ovc__x, .ovc.is-x .ovc__dot { opacity: 1; }
.ovc__ax { display: flex; justify-content: space-between; padding: 6px 22px 0; font-size: var(--fs-micro); color: var(--muted); font-variant-numeric: tabular-nums; }
.ovk__status { display: flex; align-items: center; gap: 7px; margin: 0 22px; padding: 12px 0 14px; font-size: var(--fs-caption); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ovk__status svg { width: 15px; height: 15px; flex: none; }
.ovk__status--good svg { color: var(--good); } .ovk__status--warn svg { color: var(--warn); } .ovk__status--none svg { color: var(--muted); }

.ovk-note { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: -8px 4px 0; font-size: var(--fs-caption); color: var(--muted); }
.ovk-note .lg { display: inline-block; width: 18px; height: 0; border-top: 2px solid #2a78d6; margin-left: 6px; }
.ovk-note .lg:first-child { margin-left: 0; }
.ovk-note .lg--prior { border-top: 1.5px dashed #878D98; }
.ovk__en { display: block; font-size: var(--fs-micro); font-weight: 500; color: var(--muted); letter-spacing: .02em; margin-top: 1px; }   /* englischer Fachbegriff (Punkt 28) */
.ovk__prov { align-self: center; padding: 2px 8px; border-radius: var(--r-pill); background: #F7EEDC; color: #7A4C00; font-size: var(--fs-micro); font-weight: 600; }   /* Punkt 29: nur an wirklich vorläufigen Zahlen */

/* Highlights: drei Kacheln mit Symbol, Kennzahl fett vorne, ein Satz */
.ovb { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17em), 1fr)); gap: var(--gap); }
.ovb__item { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; padding: 18px 20px; border-radius: var(--r-m); background: var(--card); box-shadow: none; }
.ovb__ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-m); background: #EAF2FC; color: #1c5cab; }
.ovb__ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ovb__item--good .ovb__ico { background: #E6F2EA; color: #1A5E3C; }
.ovb__item--warn .ovb__ico { background: #F7EEDC; color: #7A4C00; }
.ovb__item p { margin: 0; font-size: var(--fs-body); line-height: 1.45; color: var(--ink-2); }
.ovb__item b { display: block; margin-bottom: 2px; font-size: var(--fs-section); font-weight: 600; letter-spacing: -0.01em; color: var(--ink); font-variant-numeric: tabular-nums; }

.ovs-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5em), 1fr)); gap: var(--gap); }   /* vier kleine Karten nebeneinander am Desktop (Punkt 28) */
.ovs { padding: 14px 18px; }
.ovs__value { font-size: var(--fs-kpi-s); font-weight: 600; line-height: 1.1; letter-spacing: -0.015em; font-variant-numeric: tabular-nums; }
.ovs__line { margin: 0; font-size: var(--fs-caption); color: var(--ink-2); }

.ovm .panel__head { flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.ovm { padding: clamp(18px, 2.2vw, 28px); }
.ovm .mc__y, .ovm .mc__svg { height: 320px; }
.ovm .mc__svg .grid { stroke: #EEF0F3; }
.ovm .mc__svg .base { stroke: #D8DCE2; }
.ovm .mc__svg .mc__soll { stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 5 4; }
.ovm .legend { gap: 6px 18px; font-size: var(--fs-caption); color: var(--ink-2); }
.ovm .legend .sw { width: 9px; height: 9px; border-radius: 50%; }
.ovm .legend .sw--plan { width: 16px; height: 0; border-radius: 0; }
.ovm .mc__svg .hit:hover { fill: rgba(26, 31, 43, .035); }
.ovm .mc__y { color: var(--muted); }   /* K9: Achsen 5,9 : 1 statt 3,3 : 1 */
.ovm__tools { display: flex; align-items: center; gap: 4px; margin-left: auto; position: relative; }
.ovm__tools > .info { position: static; }
.ovm__tools > .info > summary { position: static; }

/* Popover */
.pop__btn { display: inline-grid; place-items: center; width: 36px; height: 36px; margin: -4px -8px -4px 0; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer; flex: none; }
.pop__btn:hover, .pop__btn[aria-expanded="true"] { background: var(--ivory); color: var(--ink); }
.pop { display: grid; gap: 10px; margin-top: 8px; padding: 14px 16px; border-radius: var(--r-m); background: #FAFBFC; font-size: var(--fs-body); }
.js .pop { display: none; }
.js .pop.is-open { display: grid; position: fixed; z-index: 50; top: 0; left: 0; width: min(360px, calc(100vw - 16px)); max-height: min(70vh, 520px); overflow: auto; margin: 0; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-float); overscroll-behavior: contain; color: var(--ink); text-align: left; }   /* Punkt 30: an body, über allem, Lage per v2.js (popPlace) */
.js .pop.is-open.is-sheet { top: auto; left: 0; right: 0; bottom: 0; width: auto; max-height: 70vh; border-radius: var(--r-m) var(--r-m) 0 0; padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); }
.pop__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pop__head h3 { font-size: var(--fs-body); font-weight: 600; margin: 0; }
.pop__x { display: none; place-items: center; width: 40px; height: 40px; margin: -8px -10px -8px 0; border: 0; border-radius: 50%; background: none; color: var(--ink); cursor: pointer; }
.js .pop__x { display: inline-grid; }
.pop__x:hover { background: var(--ivory); }
.pop__dl, .pop__facts { display: grid; gap: 8px; margin: 0; }
.pop__dl dt, .pop__facts dt { font-size: var(--fs-caption); font-weight: 600; color: var(--muted); }
.pop__dl dd, .pop__facts dd { margin: 0; overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
.pop__facts { padding-top: 10px; border-top: 1px solid var(--line-soft); font-size: var(--fs-caption); }
.pop__go, .pop__more { margin: 0; }
.pop__go a, .pop__more a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.pop-scrim { position: fixed; inset: 0; z-index: 44; background: rgba(26, 31, 43, .38); }

/* Booking gegen Website: eine Zeile */
.ovp { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding: 10px 16px; background: var(--card); border: 1px solid var(--surface-line); border-radius: var(--r-m); box-shadow: none; }
.ovp__line { flex: 1 1 24em; margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: var(--fs-body); }
.ovp__go { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }

/* Was wir für Sie erledigt haben: ruhige Liste */
.sysn--list { grid-template-columns: repeat(auto-fit, minmax(min(100%, 10em), 1fr)); }
.sysn--list li { background: none; padding: 8px 0; border-top: 1px solid var(--line-soft); border-radius: 0; }

/* Chalets: Liste mit Eigentümer und Status */
.hl { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22em), 1fr)); gap: 0 28px; }
.hl__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name status" "owner status"; gap: 0 12px; align-items: center; min-height: 52px; padding: 8px 0; border-top: 1px solid var(--line-soft); color: var(--ink); text-decoration: none; }
.hl__row:hover .hl__name { text-decoration: underline; }
.hl__name { grid-area: name; font-weight: 600; }
.hl__owner { grid-area: owner; font-size: var(--fs-caption); color: var(--muted); overflow-wrap: anywhere; }
.hl__status { grid-area: status; text-align: right; font-size: var(--fs-caption); }
.hl__st { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; white-space: nowrap; }
.hl__st::before { content: ''; width: 8px; height: 8px; border-radius: 50%; }
.hl__st--busy::before { background: var(--forest); }
.hl__st--free::before { border: 1.5px solid var(--muted); }

@media (max-width: 1180px) and (min-width: 561px) { .ovk-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .ovk-row { gap: 12px; }
  .ovk { padding: 16px 0 0; }
  .ovk > .ovk__head, .ovk > .ovk__row { padding: 0 16px; }
  .ovk__curve { margin-top: 10px; }
  .ovk__curve .ovc { height: 72px; }
  .ovc__ax { padding: 4px 16px 0; }
  .ovb__item { padding: 14px 16px; }
  .ovb__item b { font-size: var(--fs-section); }
  .ovm .mc__y, .ovm .mc__svg { height: 240px; }
  .ovk__value { font-size: var(--fs-kpi); }
  .ovk__status { margin: 0 16px; }
  .hl__row { grid-template-columns: minmax(0, 1fr); grid-template-areas: "name" "owner" "status"; }
  .hl__status { text-align: left; }
}
@media (max-width: 560px) { .ovk-row { grid-template-columns: minmax(0, 1fr); } .ovk__value { font-size: var(--fs-kpi); } }

/* ================================================================ Stil-Rollout „Stripe“ (29.10.2026): Stil der Übersicht auf weiteren Seiten
   Gilt nur in der Live-Wurzel mit .st (je Seite eingeschaltet). Ruhige Karten ohne Rand mit weichem Schatten, große Zahlen mit tabellarischen
   Ziffern, weiche Flächenkurven (Vorjahr gestrichelt, Crosshair), dezente Achsen und runde Legendenpunkte. Datenfarben wie im Jahresvergleich
   der Übersicht (validate_palette.js --mode light --pairs all: #1c5cab gegen #eb6834 ΔE 24,4 Protan, Soll in Tinte als Strich):
   Ist bzw. laufendes Jahr Dunkelblau, Vorjahr bzw. Vergleich Orange, Soll Tinte. Erklärungen nur im Info-Symbol (Popover). */
/* Die Stil-Ebene teilt den Klassennamen mit dem Zustandsetikett .st (inline-flex, fett): auf der Live-Wurzel zurücksetzen, sonst steht aller Text fett */
div.st { font-weight: 400; align-items: stretch; }
/* Seit 29.10.2026 gilt die Stil-Ebene für alle Seiten im Inhalt (.main; jede Live-Wurzel .st liegt darin): dieselben Variablen, ohne den Abstand der Live-Wurzel */
.main { --surface-line: var(--line-soft); --surface-shadow: none; --rl: var(--r-m); --cmp: #8a919d; }
.st { --surface-line: var(--line-soft); --surface-shadow: none; --rl: var(--r-m); --forest: #1c5cab; --cmp: #8a919d; gap: clamp(20px, 2.6vw, 32px); }
.main .panel, .main .kpi, .main .sect, .main .lv { border: 1px solid var(--surface-line); border-radius: var(--r-m); box-shadow: none; background: var(--card); }
.main .panel { padding: clamp(18px, 2.2vw, 26px); }
.main .panel__head h2, .main .panel > h2 { font-size: var(--fs-section); font-weight: 600; letter-spacing: -0.005em; }
.main .panel__head .note, .main .panel > h2 + p { font-size: var(--fs-caption); color: var(--muted); }
.main .panel__foot { border-top-color: #EEF0F3; }
.main .tablewrap table { font-variant-numeric: tabular-nums; }
/* Säulen je Monat und weitere Achsendiagramme: dezente Linien, Achsenschrift hell */
.main .mc__svg .grid, .main .ar__svg .grid { stroke: #EEF0F3; }
.main .mc__svg .base { stroke: #D8DCE2; }
.main .mc__svg .mc__soll { stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 5 4; }
.main .mc__y, .main .ar__y { color: var(--muted); }   /* K9 */
.main .mc__svg .hit:hover { fill: rgba(26, 31, 43, .035); }
.main .legend { gap: 6px 18px; font-size: var(--fs-caption); color: var(--ink-2); }
.main .legend .sw { width: 9px; height: 9px; border-radius: 50%; }
.main .legend .sw--plan { width: 16px; height: 0; border-radius: 0; }
/* Datenmarken mit fest eingetragenem Grün auf die Palette der Seite */
.main .bul__proj, .main .mk--proj { background: repeating-linear-gradient(135deg, rgba(28, 92, 171, .45) 0 3px, rgba(28, 92, 171, .14) 3px 6px); }
.main .mk--area { background: rgba(28, 92, 171, .16); }
.main .sp__area { fill: rgba(28, 92, 171, .12); }
.main .sp--bars rect { fill: rgba(28, 92, 171, .42); }
/* Kennzahlkarte im Stil der Übersicht: Name, große Zahl mit Veränderung, Kurve bis an die Kartenkanten, Vergleichszeilen */
.kpis--st { gap: var(--gap); }
.main .kpi--st { gap: 4px; padding: 20px 0 16px; overflow: hidden; }
.main .kpi--st > :not(.kpi__curve):not(.info) { margin-inline: 20px; }
.kpi--st .kpi__head { padding-right: 36px; min-height: 28px; }
.kpi--st .kpi__label { font-size: var(--fs-caption); font-weight: 600; color: var(--muted); letter-spacing: .01em; }
.kpi--st .kpi__row { justify-content: flex-start; align-items: center; gap: 6px 10px; }
.kpi--st .kpi__value { font-size: var(--fs-kpi); font-weight: 600; line-height: 1.05; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.kpi--st .kpi__value .drill { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; color: var(--ink); }
.kpi--st .kpi__row .chg { font-size: var(--fs-caption); padding: 2px 8px 2px 6px; }
.kpi--st .kpi__sub { font-size: var(--fs-caption); color: var(--muted); }
.kpi--st .kpi__curve { position: relative; margin: 10px 0 0; }
.kpi--st .kpi__curve .ovc { height: 72px; }
.kpi--st .ovc__ax { padding: 6px 20px 0; }
.kpi--st .kpi__cmp { margin-top: 10px; font-size: var(--fs-caption); }
.kpi--st > .info > .pop__btn { top: 12px; right: 10px; }
/* Kopf im Stil der Übersicht */
/* ⓘ als Popover (dieselbe Komponente wie auf der Übersicht): Symbol oben rechts im Block */
.info > .pop__btn { position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; margin: 0; }
.info > .pop__btn[aria-expanded="true"] { color: var(--accent-ink); background: var(--accent-wash); }
.pop__facts--solo { padding-top: 0; border-top: 0; }
.pop__extra { display: grid; gap: 8px; font-size: var(--fs-caption); }
.pop__extra .tablewrap { margin: 0; }
.js .pop.is-open:has(.pop__extra table) { width: min(560px, calc(100vw - 16px)); }
.lv > .info > .pop__btn { top: 4px; right: 6px; }
.lv--dot > .info > .pop__btn, .ovm__tools > .info > .pop__btn { position: static; }
.kpi--v:not(.kpi--st) .info > .pop__btn { top: 8px; right: 8px; }
@media print { .info > .pop__btn { display: none !important; } }
@media (max-width: 640px) {
  .main .kpi--st { padding: 16px 0 14px; }
  .main .kpi--st > :not(.kpi__curve):not(.info) { margin-inline: 16px; }
  .kpi--st .ovc__ax { padding: 4px 16px 0; }
  .kpi--st .kpi__value { font-size: var(--fs-kpi); }
}
.main .bfw__v a { display: inline-flex; align-items: center; min-height: 32px; }   /* Ziel ≥ 24 px (war 22 px) */
/* Stil-Rollout, weitere Reiter von Umsatz & Belegung: Kernzahlen und Revenue-Kacheln mit großen Zahlen, Abschnitte ohne doppelten Schatten */
.main .kz__k { font-size: var(--fs-caption); font-weight: 600; color: var(--muted); letter-spacing: .01em; }
.main .kz__v { font-size: var(--fs-kpi); font-weight: 600; letter-spacing: -0.025em; line-height: 1.08; font-variant-numeric: tabular-nums; }
.main .kz__foot { border-top-color: #EEF0F3; }
.main .rv-tile .kpi__label { font-size: var(--fs-caption); color: var(--muted); }
.main .rv-tile .kpi__value { font-size: var(--fs-kpi); letter-spacing: -0.025em; font-variant-numeric: tabular-nums; }
.main .sect__b .panel, .main .sect__b .kpi { box-shadow: none; background: #F5F6F8; }   /* Karten in einem aufgeklappten Abschnitt: Fläche statt zweitem Schatten */
.main .sect > summary { padding-top: 18px; padding-bottom: 18px; }
.main .rv-stand { font-size: var(--fs-caption); }
.main .kz--rve { margin-top: 12px; }
.main .rve__d > summary { min-height: 32px; }   /* „Datenbasis“: Ziel ≥ 24 px */
.main .rve__l a { display: inline-flex; align-items: center; min-height: 32px; }
.main .dn + .kpi__cmp .mk--ist { background: #1C5CAB; }   /* Direktanteil trägt die Farbe von „Direkt“ im Donut (Vertriebswege-Palette, nicht die Jahresfarbe) */
/* Legendenzeichen der Verlaufskurven (Stil der Übersicht): Linie Akzentblau, Vergleich grau gestrichelt */
.mk--stline { height: 0; border-top: 2px solid #2a78d6; }
.mk--stdash { height: 0; border-top: 1.5px dashed #878D98; }
.main .kz__v.is-missing { font-size: var(--fs-section); font-weight: 600; letter-spacing: 0; }
/* Werbung: aufklappbare Bereiche wie Karten, alleinstehende Links mit Tippziel ≥ 24 px */
.main .wb-more { border: 1px solid var(--surface-line); border-radius: var(--r-m); box-shadow: none; }
.wb-back a, .main .ws-links a { display: inline-flex; align-items: center; min-height: 32px; }
.main p.mt8 > a:only-child { display: inline-flex; align-items: center; min-height: 32px; }
/* Mein Chalet (Eigentümer, 29.10.2026): Leitwerte als ruhige Fläche ohne Rand, große Zahlen; Kopf mit Datenstand-Punkt */
.main .mc-kpis { border: 1px solid var(--surface-line); border-radius: var(--r-m); box-shadow: none; }
.main .mc-cap { font-size: var(--fs-caption); letter-spacing: .01em; padding: 14px 22px 10px; }
.main .mc-tile { padding: 16px 22px 20px; }
.main .mc-tile dt { font-size: var(--fs-caption); color: var(--muted); }
.main .mc-tile__v { font-weight: 600; letter-spacing: -0.025em; }
.mc-head .ovhead__t { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; }
/* Was wir für Sie erledigt haben: Zahlen wie auf der Übersicht */
.main .sysn__v { font-size: var(--fs-kpi); font-weight: 600; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; }
.main .sysn__v:has(> .muted) { font-size: var(--fs-section); letter-spacing: 0; }
/* Seitenköpfe der übrigen Seiten (Super-Admin, Verwaltung, Erfolgsbeteiligung, KI-Kosten; 29.10.2026) wie der Kopf der Übersicht: großer Titel,
   kurze Unterzeile in Sekundärfarbe, keine Überzeile (der Bereich steht in der Seitenleiste) */
.main .pagehead .eyebrow { display: none; }
.main .pagehead h1 { font-size: var(--fs-title); letter-spacing: -0.025em; }
.main .pagehead h1 + p { margin-top: 6px; font-size: var(--fs-caption); color: var(--muted); }
.main .pagehead .ovhead__t { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; }
.main .pagehead .ovhead__t + p { margin-top: 6px; font-size: var(--fs-caption); color: var(--muted); }
/* Formulare: Datum und Zahl wie die übrigen Felder (vorher Browser-Standard mit dunklem Rahmen) */
.form input[type="date"], .form input[type="number"] { width: 100%; border: 1px solid var(--line); border-radius: var(--r-s); background: #fff; color: var(--ink); padding: 10px 12px; font-size: 16px; font-weight: 400; min-height: 44px; }
/* Systemstatus: Gesamtstand mit farbiger Kante (Zustand steht zusätzlich im Titel), Bereiche als Zeilen einer Fläche statt einzelner Karten */
.main .ss-gesamt { box-shadow: inset 4px 0 0 var(--good); }
.main .ss-gesamt--warn { box-shadow: inset 4px 0 0 var(--warn); }
.main .ss-gesamt--error { box-shadow: inset 4px 0 0 var(--error); }
.main .ss-gesamt__titel { font-size: var(--fs-section); font-weight: 600; }
.main .ss-bereich { padding: 0; }
.main .ss-bereich + .ss-bereich { margin-top: calc(-1 * var(--gap)); border-top: 1px solid var(--line-soft); }
.main .ss-bereich:has(+ .ss-bereich) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.main .ss-bereich + .ss-bereich { border-top-left-radius: 0; border-top-right-radius: 0; }
.main .ss-bereich__sum { padding: 10px 22px; min-height: 52px; }
.main .ss-bereich__name { font-size: var(--fs-body); font-weight: 600; }
.main .ss-info .info > .pop__btn { position: static; }
/* Tippziele ≥ 24 px (Durchsicht 29.10.2026): Häkchen in Formularen und im Prüfmodus, Linklisten */
.form .perm input[type="checkbox"], .housepick input[type="checkbox"], .bt-check input[type="checkbox"] { width: 24px; height: 24px; flex: none; accent-color: var(--accent); }
.form .perm input[type="checkbox"] { margin-top: 1px; }
.linklist a { display: inline-flex; align-items: center; min-height: 32px; }
.form .choice-row { display: flex; flex-direction: row; align-items: center; gap: 10px; min-height: 44px; font-weight: 600; }
.form .choice-row input[type="checkbox"] { width: 24px; height: 24px; margin: 0; flex: none; accent-color: var(--accent); }
.form .choice-row .note { font-weight: 400; }

/* Super-Admin → Werbung heute (29.10.2026): Zwischenüberschriften und Summenzeile der Tabellen */
.main .wh-h3 { margin: 14px 0 0; font-size: var(--fs-caption); font-weight: 600; color: var(--muted); }
.main .wh-h3:first-of-type { margin-top: 4px; }
.main tr.wh-sum td { font-weight: 600; border-top: 1px solid var(--line); }
/* Fragen an die Betriebsleitung (30.10.2026, Migration 0070): Antwortblock, Archiv aufklappbar; Liste und Karten wie Erinnerungen (.er-*) */
.fq-item--beantwortet { border-left-color: var(--good); } .fq-item--erledigt { border-left-color: var(--line); }
.fq-antwort { margin: 0.6em 0 0; padding: 0.6em 0.75em; border-radius: var(--r-s); background: var(--ivory); }
.fq-antwort__label { margin: 0; font-size: var(--fs-caption); color: var(--muted); }
.fq-antwort__text { margin: 0.25em 0 0; overflow-wrap: anywhere; }
.fq-item textarea { width: 100%; max-width: 100%; }
.fq-archiv > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; }
.fq-archiv__h { display: inline; margin: 0; font-size: 1em; }
.side__badges { margin-left: auto; display: inline-flex; gap: 0.25em; flex: none; } .side__badges .side__badge { margin-left: 0; }
.side__badge--offen { background: var(--muted); }   /* Fragen offen bei der Betriebsleitung (grau), neue Antworten rot */
/* Versionsstand unten (30.10.2026): unaufdringlich, Release-Kennung nur für Admin */
.ver { margin: 0.75em 0 0; font-size: var(--fs-micro); line-height: 1.4; color: var(--muted); overflow-wrap: anywhere; }
.ver__rel { font-variant-numeric: tabular-nums; }
.side .ver { color: var(--nv-muted); margin: 4px 0 0; padding: 0 12px; }
html.nav-c .side .ver { display: none; }
/* Limit-Alarm (30.10.2026): dicker roter Block oben in „Werbung heute“ und Systemstatus */
.limit-alarm { border: 2px solid var(--error); border-left-width: 8px; background: var(--error-wash); }
.limit-alarm__titel { margin: 0; font-size: 1em; color: var(--error); }
.limit-alarm__list { list-style: none; margin: 0.75em 0 0; padding: 0; display: grid; gap: 0.9em; }
.limit-alarm__list li { min-width: 0; overflow-wrap: anywhere; }
.limit-alarm__name { margin: 0; }
.limit-alarm__foot { margin: 0.6em 0 0; }
.limit-alarm__foot a { display: inline-flex; align-items: center; min-height: 44px; }
/* Erinnerungen erledigen (30.10.2026): Knopf neben dem Text, auf dem Telefon darunter; Archiv eingeklappt */
.mu-todo li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.4em 0.8em; margin: 0.4em 0; }
.mu-todo__text { flex: 1 1 18em; min-width: 0; overflow-wrap: anywhere; }
.mu-todo__done .btn { min-height: 44px; }
.mu-todo-archiv > summary, .er-archiv > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; }
.er-archiv__h { display: inline; margin: 0; font-size: 1em; }

/* Paket A Buntenbock (30.10.2026): Kategorien, schematischer Lageplan, Datenlage, „Noch nicht verbunden“ – gilt für jeden Mandanten mit units categories */
.kg { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18em), 1fr)); gap: 16px 32px; margin-top: 12px; }
.kg__t { font-size: var(--fs-body); margin: 0 0 8px; } .kg__n { color: var(--muted); font-weight: 400; font-size: var(--fs-caption); }
.kg__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.kg__k { display: block; color: var(--muted); font-size: var(--fs-caption); } .kg__v { display: block; font-size: var(--fs-kpi-s); font-weight: 600; font-variant-numeric: tabular-nums; }
.lp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 16px; margin-top: 12px; align-items: start; }
.lp__dorf { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15em), 1fr)); gap: 12px; }
.lp__z { border: 1px solid var(--line); border-radius: var(--r-s); padding: 12px 14px; background: var(--card); }
.lp__z--hotel { background: var(--data-wash); } .lp__cn { font-weight: 600; }
.lp__z--dorf { background: var(--good-wash); }
.lp__zt { font-size: var(--fs-body); margin: 0 0 8px; }
.lp__c + .lp__c { margin-top: 10px; }
.lp__ck { display: flex; justify-content: space-between; gap: 8px; margin: 0 0 6px; font-size: var(--fs-caption); } .lp__ck span { font-variant-numeric: tabular-nums; }
.lp__u, .lp__lg { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.lp__unit { display: inline-grid; place-items: center; min-width: 44px; height: 32px; padding: 0 6px; border-radius: var(--r-s); font-size: var(--fs-caption); font-variant-numeric: tabular-nums; border: 1px solid var(--line); background: var(--card); }
.lp__unit--hi { background: var(--data); color: #fff; border-color: transparent; } .lp__unit--mid { background: var(--accent-wash); border-color: var(--data); } .lp__unit--lo { background: var(--card); border-style: dashed; }
.lp__lg { margin-top: 12px; gap: 16px; font-size: var(--fs-caption); color: var(--muted); } .lp__lg li { display: flex; align-items: center; gap: 6px; } .lp__lg .lp__unit { min-width: 18px; width: 18px; height: 14px; padding: 0; }
.dl-list { margin: 12px 0 0; padding-left: 1.1em; display: grid; gap: 8px; }
.mnc { max-width: 44em; } .mnc__t { font-size: var(--fs-section); margin: 0 0 6px; } .mnc__p { margin: 0; color: var(--ink-2); }
.cattab tr.is-muted th, .cattab tr.is-muted td { color: var(--muted); }
@media (max-width: 640px) { .lp { grid-template-columns: minmax(0, 1fr); } .kg__v { font-size: var(--fs-section); } }
/* Werbemittel: echte Vorschau je Anzeige (30.10.2026) */
.kr-vorschau { margin: 10px 0 12px; display: grid; gap: 8px; min-width: 0; }
.kr-vorschau .gs { max-width: 640px; }
.adp-row--1 { grid-template-columns: minmax(0, 400px); justify-content: start; margin-top: 0; }
.adp-row--1 .adp { justify-self: start; }
.wb-changes li .kr-vorschau { margin-left: 0; }
/* Ziel-ROAS-Kachel (30.10.2026) */
.rz { border-left: 6px solid var(--line); }
.rz--gruen { border-left-color: var(--good); } .rz--gelb { border-left-color: var(--warn, #b7791f); } .rz--rot { border-left-color: var(--bad, #c53030); }
.rz__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.rz__head h2 { margin: 0; font-size: var(--fs-section); flex: 1 1 auto; }
.rz__satz { margin: 8px 0 0; font-weight: 600; }
.rz__kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 12px 20px; margin: 14px 0 0; }
.rz__kv dt { font-size: var(--fs-caption); color: var(--muted); }
.rz__kv dd { margin: 2px 0 0; font-size: var(--fs-kpi-s); font-weight: 600; font-variant-numeric: tabular-nums; }
.rz__kv dd.rz__sub { font-size: var(--fs-caption); font-weight: 400; color: var(--muted); }
.rz__quelle { margin-top: 10px; }
/* ================================================================ Heute (30.10.2026): Anreisen, Abreisen, Reinigung, 7 Tage
   Reinigungsfarben als Zustand (nie allein: Text in Liste, Hinweis und Satz): schmutzig rot gestreift, sauber hellgrün, geprüft dunkelgrün mit
   Haken, außer Betrieb grau schraffiert. Dicker dunkler Rand = heute Nacht belegt. Telefon: eine Spalte, Tabellen als Karten (mu-table). */
.hz-jump { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.hz-jump a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: var(--r-pill); background: var(--card); box-shadow: none; color: var(--ink); text-decoration: none; font-size: var(--fs-caption); font-weight: 600; }
.hz-jump a:hover { background: var(--accent-hover); }
.hz-pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); align-items: start; }
@media (min-width: 1560px) { .hz-pair { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); } }
.hz-hints { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.hz-hint { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 10px 12px; border-radius: var(--r-m); background: #F6F7F9; border-left: 4px solid var(--line); }
.hz-hint .st { flex: none; font-size: var(--fs-caption); }
.hz-hint > span:last-child { flex: 1 1 18em; min-width: 0; }
.hz-hint--error { border-left-color: var(--error); background: var(--error-wash); } .hz-hint--error .st { color: var(--error); }
.hz-hint--warn { border-left-color: var(--warn); background: var(--warn-wash); } .hz-hint--warn .st { color: var(--warn); }
.hz-hint--good { border-left-color: var(--good); background: var(--good-wash); } .hz-hint--good .st { color: var(--good); }
.hz-hint--none .st { color: var(--ink-2); }
.hz-empty { margin-top: 12px; }
.hz-tab thead th, .hz-tab th[scope="row"] { white-space: nowrap; }
.hz-tab td .st { font-size: var(--fs-caption); }
.hz-tab tr.is-today th, .hz-tab tr.is-today td { font-weight: 600; }
@media (max-width: 640px) {
  .hz-tab th, .hz-tab td { white-space: normal; }
  .hz-tab tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 14px; padding: 8px 12px; }
  .hz-tab th[scope="row"] { grid-column: 1 / -1; }
  .hz-tab td { display: block; text-align: left; padding: 0; font-size: var(--fs-caption); }
  .hz-tab td[data-label]::before { display: block; font-size: var(--fs-micro); line-height: 1.3; }
}
.hz-stale { color: var(--warn); font-weight: 600; }
/* Reinigung: Plan links, Liste rechts (breit); Telefon: Plan, Legende, Liste untereinander */
.hz-rein { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px 36px; margin-top: 12px; align-items: start; }
@media (min-width: 1100px) { .hz-rein { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
.hz-fig { margin: 0; }
.hz-plan { max-height: 640px; }
.hz__h polygon { stroke: rgba(26, 31, 43, .55); stroke-width: 1.4; }
.hz__h.is-occ polygon { stroke: var(--night); stroke-width: 3.4; }
.hz__h--none polygon { stroke: #878D98; stroke-dasharray: 4 3; }
.hz__h text { paint-order: stroke; stroke: rgba(255, 255, 255, .85); stroke-width: 4px; stroke-linejoin: round; }
.hz__h--inspected text { stroke: #1D6B44; }
.hz__halo { stroke: #FFFFFF; stroke-width: 5px; }
.hz__move { font-size: var(--fs-body); }
.hz-lg { display: grid; gap: 6px; margin-top: 10px; font-size: var(--fs-caption); color: var(--ink-2); }
.hz-lg__l { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.hz-lg__l li { display: inline-flex; align-items: center; gap: 6px; }
.hz-sw { flex: none; width: 16px; height: 16px; border-radius: var(--r-s); box-shadow: inset 0 0 0 1px rgba(26, 31, 43, .55); }
.hz-sw--dirty, .hz-u--dirty { background: repeating-linear-gradient(45deg, #F7D4D0 0 4px, #C0362C 4px 7px); }
.hz-sw--clean, .hz-u--clean { background: #BFE3CB; }
.hz-sw--inspected, .hz-u--inspected { background: #1D6B44; color: #FFFFFF; }
.hz-sw--out, .hz-u--out { background: repeating-linear-gradient(45deg, #F5F6F8 0 3px, #B3B9C2 3px 5px); }
.hz-sw--unknown, .hz-u--unknown { background: #F5F6F8; }
.hz-sw--occ { background: var(--card); box-shadow: inset 0 0 0 3px var(--night); }
/* schematischer Plan (Einheiten mit Zimmernummern) */
.hz-schema { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15em), 1fr)); gap: 12px; }
.hz-z { border-radius: var(--r-m); padding: 12px; background: #F6F7F9; }
.hz-z--hotel { background: var(--data-wash); grid-column: 1 / -1; }
.hz-z__t { font-size: var(--fs-body); margin: 0 0 8px; }
.hz-z__u { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); gap: 8px; }
.hz-u { display: grid; place-items: center; align-content: center; min-height: 56px; padding: 4px; border-radius: var(--r-m); box-shadow: inset 0 0 0 1px rgba(26, 31, 43, .45); text-align: center; line-height: 1.2; font-variant-numeric: tabular-nums; }
.hz-u b { font-size: var(--fs-body); }
.hz-u span { font-size: var(--fs-micro); font-weight: 600; }
.hz-u--dirty b, .hz-u--dirty span:not(.visually-hidden) { background: rgba(255, 255, 255, .92); border-radius: var(--r-s); padding: 0 4px; }
.hz-u.is-occ { box-shadow: inset 0 0 0 3px var(--night); }
/* Reinigungsliste */
.hz-h3 { display: flex; align-items: center; gap: 8px; font-size: var(--fs-body); margin: 0 0 8px; }
.hz-h3 + .hz-rows, .hz-h3 + .note { margin-bottom: 16px; }
.hz-n { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 7px; border-radius: var(--r-pill); background: #EEF0F3; font-size: var(--fs-caption); }
.hz-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.hz-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; padding: 10px 12px; border-radius: var(--r-m); background: #F6F7F9; border-left: 4px solid #D8DCE2; }
.hz-row--dirty { border-left-color: #C0362C; } .hz-row--clean { border-left-color: #6FBF8E; } .hz-row--inspected { border-left-color: #1D6B44; } .hz-row--out { border-left-color: #878D98; }
.hz-row__u { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; }
.hz-row__nr { color: var(--muted); font-size: var(--fs-caption); }
.hz-row__m { grid-column: 1 / -1; color: var(--ink-2); font-size: var(--fs-caption); overflow-wrap: anywhere; }
.hz-cl .st { font-size: var(--fs-caption); }
.hz-cl--dirty .st { color: var(--error); } .hz-cl--clean .st, .hz-cl--inspected .st { color: var(--good); } .hz-cl--out .st { color: var(--warn); } .hz-cl--unknown .st { color: var(--muted); }
.hz-tasks { margin: 12px 0 0; padding-left: 1.1em; display: grid; gap: 6px; }
/* 7 Tage: eine Reihe Säulen (Belegung %), An/Ab darunter */
.hz7 { list-style: none; margin: 14px 0 4px; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.hz7__c { display: grid; grid-template-rows: auto 132px auto auto; justify-items: center; gap: 4px; min-width: 0; padding: 4px 0; border-radius: var(--r-m); cursor: default; }
.hz7__c.is-today { background: var(--accent-wash); }
.hz7__v { font-size: var(--fs-caption); font-weight: 600; color: var(--ink); }
.hz7__bar { position: relative; width: min(36px, 70%); height: 132px; border-radius: var(--r-s); background: #EEF0F3; overflow: hidden; }
.hz7__bar > span { position: absolute; left: 0; right: 0; bottom: 0; background: #1C5CAB; border-radius: var(--r-s) var(--r-s) 0 0; }
.hz7__d { font-size: var(--fs-micro); color: var(--ink-2); text-align: center; line-height: 1.25; }
.hz7__d b { display: block; color: var(--ink); }
.hz7__m { font-size: var(--fs-micro); color: var(--muted); text-align: center; line-height: 1.25; }
@media (max-width: 420px) { .hz7 { gap: 2px; } .hz7__c { grid-template-rows: auto 104px auto auto; } .hz7__bar { height: 104px; } .hz7__v { font-size: var(--fs-micro); } }
.hz7-tab { margin-top: 8px; }
.hz7-more { margin-top: 10px; }
.hz7-more > summary { min-height: 44px; display: inline-flex; align-items: center; cursor: pointer; color: var(--data); font-weight: 600; }
/* Aufgaben heute (W3, 30.10.2026): Kopier-Ausweg und Statusmeldung „Kommentar kopiert“ (aria-live) unter dem Vorschlag */
.aufg-item__text { width: 100%; max-width: 100%; box-sizing: border-box; }
.aufg-copyrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 8px; }
.aufg-copyrow .aufg-copy { min-height: 44px; }
.aufg-item__status { margin: 0; font-size: var(--fs-caption); font-weight: 600; color: var(--good, inherit); }
.aufg-item__status:empty { display: none; }
.aufg-item__status.is-warn { color: var(--warn); }
.aufg-item__fix { margin: 6px 0 0; }

/* Menü 30.10.2026: Marketing → Werbung (nur Ergebnisse) und Resortleitung */
.wa h2 { margin: 0; font-size: 1em; }
.wa__head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4em 0.8em; }
.wa__satz { margin: 0.5em 0 0; }
.wa__line { margin: 0.5em 0 0; font-size: 1em; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.wa__sub { margin: 0.25em 0 0; color: var(--muted); overflow-wrap: anywhere; }
.rl-sec + .rl-sec { margin-top: var(--gap); }
/* Klee Voice: Bestätigungsschritt ohne Skript, Notaus, Sperrliste (31.10.2026) */
.vconfirm { margin-top: 8px; }
.vconfirm > summary { list-style: none; width: fit-content; }
.vconfirm > summary::-webkit-details-marker { display: none; }
.vconfirm[open] > summary { background: var(--card); color: var(--ink); border-color: var(--line); }
.vconfirm__box { display: grid; gap: 8px; margin-top: 8px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--card); max-width: 560px; }
.vconfirm__box p { margin: 0; }
.vconfirm__box .btn { justify-self: start; }
.vnotaus { display: grid; gap: 6px; }
.vnotaus p { margin: 0; }
.vsperren { list-style: none; padding: 0; display: grid; gap: 10px; }
.vsperren li { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: flex-start; justify-content: space-between; border-top: 1px solid var(--line-soft, #EEF0F3); padding-top: 10px; }
.vsperren li > div { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; min-width: 0; overflow-wrap: anywhere; }
.vsperren .vconfirm { margin-top: 0; }
/* Super-Admin → Postfach (31.10.2026): Postfächer und Ordner links (Telefon oben als Chips), Liste mit Suche, Detail als reiner Text */
.pf { display: grid; grid-template-columns: minmax(0, 15em) minmax(0, 1fr); gap: var(--gap); align-items: start; }
.pf-nav { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-m); padding: 12px; min-width: 0; }
.pf-nav__h { margin: 4px 6px 6px; font-size: var(--fs-micro); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.pf-nav__h + .pf-nav__list { margin-bottom: 12px; }
.pf-nav__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.pf-nav__a { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 8px; border-radius: var(--r-s); color: var(--ink); text-decoration: none; min-width: 0; }
.pf-nav__a:hover { background: var(--accent-hover); }
.pf-nav__a[aria-current="page"] { background: var(--accent-wash); color: var(--accent-ink); font-weight: 600; }
.pf-nav__l { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.pf-nav__note { font-size: var(--fs-micro); color: var(--warn); }
.pf-nav__n { font-variant-numeric: tabular-nums; font-size: var(--fs-caption); color: var(--muted); }
.pf-nav__more { margin: 4px 8px 0; font-size: var(--fs-caption); }
.pf-main { min-width: 0; display: grid; gap: 12px; }
.pf-search { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-m); padding: 12px; display: grid; gap: 8px; }
.pf-search__row { display: flex; gap: 8px; min-width: 0; }
.pf-search__row input[type="search"] { flex: 1 1 auto; min-width: 0; min-height: 44px; }
.pf-filter > summary { cursor: pointer; min-height: 32px; display: inline-flex; align-items: center; color: var(--accent-ink); }
.pf-filter__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11em), 1fr)); gap: 8px 12px; margin-top: 8px; }
.pf-filter__grid label { display: grid; gap: 4px; font-size: var(--fs-caption); min-width: 0; }
.pf-filter__grid select, .pf-filter__grid input[type="date"] { min-height: 40px; width: 100%; box-sizing: border-box; }
.pf-check { display: flex !important; align-items: center; gap: 8px; }
.pf-filter__act { margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.pf-list { list-style: none; margin: 0; padding: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-m); overflow: hidden; }
.pf-list li + li { border-top: 1px solid var(--line-soft); }
.pf-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 10px 14px; color: var(--ink); text-decoration: none; min-width: 0; }
.pf-row:hover, .pf-row:focus-visible { background: var(--accent-hover); }
.pf-row__from { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pf-row__date { font-size: var(--fs-caption); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pf-row__subj { grid-column: 1 / -1; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pf-row__meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: var(--fs-micro); color: var(--muted); }
.pf-row__meta:empty { display: none; }
.pf-clip { vertical-align: -2px; margin-right: 4px; color: var(--muted); }
.pf-badge { display: inline-block; padding: 1px 8px; border-radius: var(--r-pill); background: var(--line-soft); color: var(--ink-2); font-size: var(--fs-micro); line-height: 18px; }
.pf-badge--inv { background: var(--good-wash); color: var(--good); }
.pf-badge--warn { background: var(--warn-wash); color: var(--warn); }
.pf-badge--err { background: var(--error-wash); color: var(--error); overflow-wrap: anywhere; }
.pf-empty { background: var(--card); border: 1px dashed var(--line); border-radius: var(--r-m); padding: 20px; margin: 0; color: var(--muted); }
.pf-pager { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; }
.pf-stand { margin-top: var(--gap); }
.pf-stand > summary { cursor: pointer; list-style: none; }
.pf-stand > summary::-webkit-details-marker { display: none; }
.pf-stand__h { display: inline; font-size: 1em; margin: 0; }
.pf-stand__h::after { content: " ▾"; color: var(--muted); }
.pf-stand__list { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 12px; }
.pf-stand__list li { display: grid; gap: 4px; min-width: 0; overflow-wrap: anywhere; }
.pf-stand__list li > b { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pf-bar { display: block; height: 6px; border-radius: var(--r-s); background: var(--line-soft); overflow: hidden; max-width: 28em; }
.pf-bar > span { display: block; height: 100%; background: var(--data); }
.pf-back { margin: 0 0 12px; }
.pf-mail { display: grid; gap: 12px; min-width: 0; }
.pf-mail__subj { margin: 0; font-size: var(--fs-section); overflow-wrap: anywhere; }
.pf-kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 12px; margin: 0; font-size: var(--fs-caption); }
.pf-kv > div { display: contents; }
.pf-kv dt { color: var(--muted); }
.pf-kv dd { margin: 0; overflow-wrap: anywhere; }
.pf-wr { margin: 0; }
.pf-text { white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; font-size: var(--fs-body); line-height: 1.55; border-top: 1px solid var(--line-soft); padding-top: 12px; max-width: 72ch; }
.pf-att h2 { font-size: 1em; margin: 0 0 6px; }
.pf-att__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pf-att__list li { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; min-width: 0; }
.pf-att__a { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; min-width: 0; overflow-wrap: anywhere; }
.pf-att__a.is-off { color: var(--muted); }
.pf-att__name { overflow-wrap: anywhere; }
.pf-neu > summary { list-style: none; width: fit-content; }
.pf-neu > summary.btn.btn { color: var(--card); }
.pf-neu > summary::-webkit-details-marker { display: none; }
.pf-form { display: grid; gap: 10px; margin-top: 12px; max-width: 40em; }
.pf-form label { display: grid; gap: 4px; }
.pf-form textarea, .pf-form input[type="text"] { width: 100%; box-sizing: border-box; }
.pf-flist { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.pf-flist > li { border-top: 1px solid var(--line-soft); padding-top: 12px; min-width: 0; overflow-wrap: anywhere; }
.pf-flist__head { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; justify-content: space-between; }
.pf-flist__head h3 { margin: 0; font-size: 1em; }
.pf-flist p { margin: 4px 0; }
.pf-edit > summary { cursor: pointer; color: var(--accent-ink); min-height: 32px; display: inline-flex; align-items: center; }
.pf-del { margin-top: 8px; }
@media (max-width: 860px) {
  .pf { grid-template-columns: minmax(0, 1fr); }
  .pf-nav { padding: 8px; }
  .pf-nav__list { display: flex; flex-wrap: wrap; gap: 6px; }
  .pf-nav__a { min-height: 36px; padding: 4px 10px; border: 1px solid var(--line); border-radius: var(--r-pill); }
  .pf-nav__l { flex: 0 1 auto; }
  .pf-kv { grid-template-columns: minmax(0, 1fr); }
  .pf-kv dt { margin-top: 4px; }
}

/* Dashboard-Intelligenz P1-5 (31.10.2026): Mitbewerber-Seite mit Kacheln (Datenstand, Abdeckung, Position) und Karten je Zeitraum; Ampel immer mit Text */
.kz--rvm .kz__k { display: flex; align-items: center; gap: 0.35em; }
.kz--rvm .kz__k .info { position: static; }
.kz--rvm .kz__v { font-size: var(--fs-kpi-s); }
.kz--rvm .note { font-size: var(--fs-caption); }
.rvst .kz__v::before { content: ""; display: inline-block; width: 0.55em; height: 0.55em; border-radius: 50%; margin-right: 0.4em; vertical-align: 0.12em; background: var(--muted); }
.rvst--gruen .kz__v::before { background: var(--good); } .rvst--gelb .kz__v::before { background: var(--warn); } .rvst--rot .kz__v::before { background: var(--error); }
.rvst--rot .note { color: var(--error); }
.rvc-list { list-style: none; margin: 0.9em 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15em), 1fr)); gap: 0.75em; }
.rvc { min-width: 0; border: 1px solid var(--line-soft); border-left: 4px solid var(--muted); border-radius: var(--r-m); padding: 0.7em 0.85em; background: var(--card); overflow-wrap: anywhere; }
.rvc--rot { border-left-color: var(--error); } .rvc--gelb { border-left-color: var(--warn); } .rvc--gruen { border-left-color: var(--good); } .rvc--grau { border-left-color: var(--line); } .rvc--offen { border-left-style: dashed; }
.rvc__h { display: grid; gap: 0.1em; }
.rvc__amp { margin: 0.4em 0 0; font-weight: 600; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.3em; }
.rvc__dot { width: 0.6em; height: 0.6em; border-radius: 50%; background: var(--muted); flex: none; align-self: center; }
.rvc--rot .rvc__dot { background: var(--error); } .rvc--gelb .rvc__dot { background: var(--warn); } .rvc--gruen .rvc__dot { background: var(--good); } .rvc--grau .rvc__dot { background: var(--line); }
.rvc--rot .rvc__amp { color: var(--error); } .rvc--gelb .rvc__amp { color: var(--warn); } .rvc--gruen .rvc__amp { color: var(--good); } .rvc--offen .rvc__amp, .rvc--grau .rvc__amp { color: var(--muted); }
.rvc__dl { margin: 0.5em 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.35em 0.8em; }
.rvc__dl div { min-width: 0; } .rvc__dl dt { font-size: var(--fs-caption); color: var(--muted); } .rvc__dl dd { margin: 0; font-weight: 600; }
.rvc .rvm__d { margin-top: 0.5em; }
/* P1-6a (31.10.2026): Raten & Codes in Gruppen mit Zähler */
.kz--rvx { margin-top: 0.5em; }
.rvx-gr { margin: 1.2em 0 0; font-size: var(--fs-body); display: flex; align-items: baseline; gap: 0.4em; }
/* P1-6b (31.10.2026): Top-Keywords für Google Ads mit Zusammenfassung und „alle zeigen“ */
.seo-ads-sum { margin: 0.5em 0 0; font-weight: 600; color: var(--ink-2); overflow-wrap: anywhere; }
.seo-more { margin-top: 0.75em; } .seo-more > summary { cursor: pointer; font-weight: 600; color: var(--accent-ink, var(--ink)); min-height: 44px; display: flex; align-items: center; }
/* P1-6c (31.10.2026): Band „Heute für Sie erledigt“ auf Leistungen */
.lerl > div { min-width: min(100%, 14em); max-width: 22em; }
.lerl__err { color: var(--error); font-weight: 600; }
/* Guthaben und Grenzen aller Dienste (w3-guthaben, 31.10.2026): Ampel-Kacheln, je Dienst eine Karte, am Telefon einspaltig; Breiten in em */
.gh { margin: var(--gap) 0; }
.gh__head { display: flex; align-items: center; gap: 8px; position: relative; padding-right: 48px; }
.gh__head > .info > .pop__btn { top: 50%; right: 0; transform: translateY(-50%); }
.gh__head h2 { margin: 0; }
.gh-tiles { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5em), 1fr)); gap: 12px; }
.gh-tile { min-width: 0; border: 1px solid var(--line); border-top-width: 4px; border-radius: var(--r-s); background: var(--card); overflow-wrap: anywhere; }
.gh-tile > a, .gh-tile--sum { display: grid; gap: 4px; padding: 12px 14px; color: inherit; text-decoration: none; }
.gh-tile > a:hover .gh-tile__n, .gh-tile > a:focus-visible .gh-tile__n { text-decoration: underline; }
.gh-tile--rot { border-top-color: var(--error); } .gh-tile--gelb { border-top-color: var(--warn); } .gh-tile--sum { border-top-color: var(--good); }
.gh-tile__n { font-weight: 600; font-size: var(--fs-body); }
.gh-tile__v { font-size: var(--fs-kpi-s); font-weight: 600; font-variant-numeric: var(--num); line-height: 1.2; }
.gh-tile__s { font-size: var(--fs-caption); color: var(--ink-2); }
.gh-tile--rot .gh-tile__v { color: var(--error); } .gh-tile--gelb .gh-tile__v { color: var(--warn); }
.gh-list { list-style: none; margin: var(--gap) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 24em), 1fr)); gap: var(--gap); }
.gh-card { min-width: 0; border: 1px solid var(--line); border-left-width: 4px; border-radius: var(--r-s); padding: 12px 14px; background: var(--card); overflow-wrap: anywhere; scroll-margin-top: 80px; }
.gh-card--rot { border-left-color: var(--error); } .gh-card--gelb { border-left-color: var(--warn); } .gh-card--gruen { border-left-color: var(--good); } .gh-card--grau { border-left-color: var(--line); }
.gh-card__head { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; justify-content: space-between; }
.gh-card__name { font-size: var(--fs-body); margin: 0; min-width: 0; }
.gh-card__was { margin: 4px 0 0; color: var(--muted); font-size: var(--fs-caption); }
.gh-card__grund { margin: 6px 0 0; font-weight: 600; }
.gh-kv { display: grid; gap: 4px; margin: 8px 0 0; }
.gh-kv > div { display: flex; flex-wrap: wrap; gap: 0 0.6em; min-width: 0; }
.gh-kv dt { color: var(--muted); min-width: 9.5em; }
.gh-kv dd { margin: 0; min-width: 0; flex: 1 1 10em; font-variant-numeric: var(--num); }
.gh-quelle { margin: 8px 0 0; }
.gh-q { display: inline-block; font-size: var(--fs-micro); font-weight: 600; border-radius: var(--r-s); padding: 2px 7px; background: var(--line-soft); color: var(--ink-2); }
.gh-q--api { background: var(--good-wash); color: var(--good); } .gh-q--manuell { background: var(--accent-wash); color: var(--accent-ink); } .gh-q--nur_kosten { background: var(--warn-wash); color: var(--warn); }
.gh-more { margin-top: 10px; border-top: 1px solid var(--line-soft); padding-top: 8px; }
.gh-more summary { cursor: pointer; font-weight: 600; font-size: var(--fs-body); }
.gh-zw, .gh-teile { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.gh-zw li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; }
.gh-zw__b { grid-column: 1 / -1; grid-row: 2; height: 0.4em; border-radius: var(--r-s); background: var(--line-soft); overflow: hidden; }
.gh-zw__b > span, .gh-bar > span { display: block; height: 100%; background: var(--data); }
.gh-zw b { font-variant-numeric: var(--num); }
.gh-teil__h { display: flex; flex-wrap: wrap; gap: 4px 10px; justify-content: space-between; align-items: baseline; }
.gh-teil .note { margin: 2px 0 0; }
.gh-bar { height: 0.5em; border-radius: var(--r-s); background: var(--line-soft); overflow: hidden; margin-top: 4px; }
.gh-teil--rot .gh-bar > span { background: var(--error); } .gh-teil--gelb .gh-bar > span { background: var(--warn); } .gh-teil--gruen .gh-bar > span { background: var(--good); }
.gh-form__wide { grid-column: 1 / -1; }
.gh-zug { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 6px; }
.gh-zug code, .gh-card code { font-size: var(--fs-micro); word-break: break-all; }
.aic__h { margin: var(--gap) 0 12px; }

/* ================================================================ Stripe-Feinschliff (Auftrag Johannes 31.10.2026, PERFORMANCE-HANDOFFS/DESIGN-STRIPE-2026-10-31)
   EIN Muster für Kopfzeile, Reiter, Seitenkopf, Segment-Schalter und Datenstand auf allen Seiten. Ersetzt die älteren Reiter-Varianten
   (Pille 28.10., Raster ab vier Reitern 28./29.10.), die dafür entfernt wurden. Verhalten (Ausblenden der Kopfzeile, Reiter in Sicht,
   Randverlauf) in v2.js; ohne JavaScript bleibt alles bedienbar (Kopfzeile sichtbar, Reiter wischbar). */
/* Variablen auch auf den Live-Wurzeln (.st, .ov), die sie sonst mit 18 px Radius und breiterem Schatten neu setzen */
.main, .main .st, .main .ov { --title: clamp(24px, 2.2vw, 28px); --tab-gap: 28px; --rl: var(--r-m); --surface-shadow: none; }
/* Seitentitel ruhig wie bei Stripe: 24 bis 28 px Semibold, enger Zeilenabstand; Unterzeile 14 px Sekundärfarbe */
.main h1 { font-size: var(--fs-title); font-weight: 600; line-height: 1.2; letter-spacing: -0.015em; }
.main .pagehead h1 + p { font-size: var(--fs-caption); line-height: 1.45; color: var(--muted); }

/* Reiter (Stripe-Muster): Text, aktiver Reiter in Akzentfarbe mit 2-px-Unterstrich, 1-px-Trennlinie als Innenschatten (bleibt sichtbar im
   Scrollbereich), immer EINE Zeile. Passen nicht alle Reiter, scrollt die Leiste seitlich (Scrollleiste verborgen, Verlauf am Rand per
   v2.js). Gilt für die Reiter über dem Inhalt (.subtabs), die Reiter der Verwaltung (.tabs) und die Chalet-Wahl der Eigentümer (.mc-switch).
   Kein Umbruch in ein Raster. */
.subtabs { min-width: 0; margin: 0; }
.subtabs ul, .main .tabs, .main .mc-switch { list-style: none; position: relative; display: flex; flex-wrap: nowrap; gap: var(--tab-gap); width: 100%; max-width: 100%; margin: 0; padding: 0;
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-padding-inline: 32px;
  background: none; border: 0; border-radius: 0; box-shadow: inset 0 -1px 0 var(--line); }
.subtabs ul::-webkit-scrollbar, .main .tabs::-webkit-scrollbar, .main .mc-switch::-webkit-scrollbar { display: none; }
.subtabs li { flex: none; }
.subtabs a, .main .tabs a, .main .mc-switch a { display: flex; align-items: center; flex: none; min-height: 44px; margin: 0; padding: 0; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none;
  color: var(--muted); font: 500 var(--fs-body)/1.2 var(--font-ui); white-space: nowrap; text-decoration: none; overflow-wrap: normal; hyphens: manual; box-shadow: none; transition: color .15s ease, border-color .15s ease; }
.subtabs a:hover, .main .tabs a:hover, .main .mc-switch a:hover { color: var(--ink); background: none; }
.subtabs a[aria-current="page"], .main .tabs a[aria-current="page"], .main .mc-switch a[aria-current="page"] { color: var(--accent-ink); border-bottom-color: var(--accent); background: none; box-shadow: none; font-weight: 500; }
.subtabs a:focus-visible, .main .tabs a:focus-visible, .main .mc-switch a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--r-s); }
/* Randverlauf, solange links bzw. rechts weitere Reiter liegen (Klassen aus v2.js) */
.subtabs ul.is-or, .main .tabs.is-or, .main .mc-switch.is-or { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
.subtabs ul.is-ol, .main .tabs.is-ol, .main .mc-switch.is-ol { -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px); mask-image: linear-gradient(90deg, transparent, #000 40px); }
.subtabs ul.is-ol.is-or, .main .tabs.is-ol.is-or, .main .mc-switch.is-ol.is-or { -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); }
@media (max-width: 640px) { .main, .main .st, .main .ov { --tab-gap: 22px; } }
@media (prefers-reduced-motion: reduce) { .subtabs a, .main .tabs a, .main .mc-switch a { transition: none; } }

/* Segment-Schalter (Monat/Jahr, 2/4 Erwachsene, Zeiträume): graue Spur, aktiver Teil als weiße Fläche mit Haarlinie statt schwarzer Fläche;
   Zustand zusätzlich über Schriftgewicht, nie Farbe allein */
.main .seg { gap: 2px; padding: 3px; border: 0; border-radius: var(--r-m); background: #EDEFF3; box-shadow: none; overflow: visible; }
.main .seg a { min-height: 38px; padding: 0 14px; border-radius: var(--r-m); color: var(--ink-2); font-weight: 500; font-size: var(--fs-caption); transition: background-color .15s ease, color .15s ease; }
.main .seg a:hover { color: var(--ink); background: rgba(255, 255, 255, .6); }
.main .seg a[aria-current="true"] { background: var(--card); color: var(--ink); font-weight: 600; box-shadow: none; outline: 1px solid var(--line); outline-offset: -1px; }
.main .seg a:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (pointer: coarse) { .main .seg a { min-height: 40px; } }
@media (prefers-reduced-motion: reduce) { .main .seg a { transition: none; } }

/* Datenstand neben dem Titel (.lv--dot): Punkt und Wort, ohne Karte. Die Stilregel „.main .lv“ (Karte mit Schatten) überdeckte das wegen
   höherer Spezifität: am Telefon entstand eine Karte ohne Innenabstand mit verwaistem ⓘ */
.main .lv.lv--dot { padding: 0; min-height: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.main .lv.lv--dot.lv--late, .main .lv.lv--dot.lv--stale { padding: 3px 10px; border: 1px solid; border-radius: var(--r-pill); }
.main .lv.lv--dot.lv--late { border-color: #E2C98C; background: #FBF4E4; }
.main .lv.lv--dot.lv--stale { border-color: #E3A39D; background: #FBEDEB; }
.main .lv--dot .lv__head { font-size: var(--fs-caption); gap: 2px 8px; }
.main .lv--dot .lv__state { font-weight: 600; }
.main .lv--dot .lv__detail { color: var(--muted); }
/* Telefon: Zustand und ⓘ in einer Zeile, der erklärende Satz darunter; das ⓘ behält 44 px Trefferfläche, ohne die Zeile zu erhöhen */
@media (max-width: 640px) {
  .main .lv.lv--dot { flex-wrap: nowrap; align-items: flex-start; gap: 0 4px; }
  .main .lv.lv--dot:has(> .info[open]) { flex-wrap: wrap; }
  .main .lv--dot .lv__head { flex: 1 1 auto; min-width: 0; }
  .main .lv--dot > .info > .pop__btn { margin: -11px -8px -11px 0; }
}

/* Kennzahlen: groß, aber ruhig (Semibold, tabellarische Ziffern) */
.kpi--st .kpi__value { font-size: var(--fs-kpi); letter-spacing: -0.02em; }
.main .ovk__value:not(.is-missing) { font-size: var(--fs-kpi); letter-spacing: -0.02em; }
@media (max-width: 560px) { .main .ovk__value:not(.is-missing) { font-size: var(--fs-kpi); } }
/* Abstand Kopf → Reiter: Reiter stehen direkt unter dem Titel (shell.ts placeTabs); der Kopf bringt dann keinen eigenen Abstand mit */
/* Kopfzeile am Telefon: Ausblenden beim Herunterscrollen nur über die Zustandsklasse aus v2.js (transform, kein Layoutsprung); bei reduzierter
   Bewegung bleibt sie stehen */
@media (max-width: 1023px) {
  .topbar { transition: transform .22s cubic-bezier(.2, .8, .2, 1); }
  .topbar.is-hidden { transform: translateY(-100%); }
}
@media (prefers-reduced-motion: reduce) { .topbar, .topbar.is-hidden { transition: none; transform: none; } }
/* Knöpfe: primär im Akzentblau (6,6 : 1 auf Weiß), sekundär (btn--ghost) weiß mit Haarlinie; beide 44 px, gleicher Radius, Fokusring Akzent */
.main .btn:not(.btn--ghost) { border-color: var(--accent); background: var(--accent); color: #FFFFFF; font-weight: 600; box-shadow: none; transition: background-color .15s ease, border-color .15s ease; }
.main .btn:not(.btn--ghost):hover { border-color: var(--accent-ink); background: var(--accent-ink); }
.main .btn--ghost { border-color: var(--line); background: var(--card); color: var(--ink); font-weight: 600; box-shadow: none; transition: background-color .15s ease, border-color .15s ease; }
.main .btn--ghost:hover { border-color: #C5CAD3; background: var(--ivory); }
.main .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .main .btn { transition: none; } }
/* Mitbewerber „Auf einen Blick“: die Werte sind Wörter („noch kein Abruf“, „zu wenig Marktdaten“); am Telefon eine Spalte statt Umbruch in halben Zellen */
@media (max-width: 640px) { .kz.kz--rvm { grid-template-columns: minmax(0, 1fr); gap: 14px; } }
/* Zustandsetikett (st2: Symbol + Wort) teilt den Klassennamen .st mit der Stil-Ebene, deren Abstand (20 bis 32 px) es übernahm:
   „◌      offen“. Als Inline-Etikett wieder 6 px */
span.st { gap: 6px; }
/* Seitenkopf mit nur einem ⓘ rechts (z. B. Systemstatus): ⓘ bleibt oben rechts neben dem Titel statt verwaist in einer eigenen Zeile am Telefon */
.main .pagehead:has(> .ss-info:last-child), .main .pagehead:has(> .info:last-child) { flex-wrap: nowrap; align-items: flex-start; }
.main .pagehead:has(> .ss-info:last-child) > div:first-child, .main .pagehead:has(> .info:last-child) > div:first-child { min-width: 0; }
/* Lernphase der Werbung und Eigentümer-Wochenbilanz (31.10.2026); sonst Bausteine der Ziel-ROAS-Kachel (.rz) */
.lp__bar { height: 8px; margin: 12px 0 0; background: var(--line-soft); border-radius: 4px; overflow: hidden; }
.lp__bar > i { display: block; height: 100%; background: var(--data); }
.lp__krit { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 4px; font-size: 14px; color: var(--ink-2); }
.lp__krit .is-ok { color: var(--good); }
.lp__h { margin: 16px 0 0; font-size: 15px; }
.wbz .note { margin: 4px 0 0; }
.wbz__kv dd.is-missing { font-size: 16px; font-weight: 600; color: var(--muted); }
.wbz__kv .tag { font-size: 11px; vertical-align: 1px; }
.wbz__kv dd.wb__tun { margin: 4px 0 0; font-size: 13px; font-weight: 400; color: var(--ink-2); }
/* Technische Details (Regel 31.10.2026): nur Admin, eingeklappt; interne Begriffe nie im Fließtext */
details.tech { margin-top: 6px; font-size: 13px; color: var(--muted); }
details.tech > summary { cursor: pointer; width: max-content; max-width: 100%; }
details.tech > summary:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
details.tech .tech__body { margin-top: 6px; display: grid; gap: 4px; overflow-wrap: anywhere; }
details.tech code { font-size: 12px; white-space: pre-wrap; }

/* ================================================================ Seitenkopf, Zeitraum-Chip, Datenstand (B-Gegenprüfung 31.10.2026, P1-1 bis P1-3)
   EIN Kopf für alle Seiten (.phead, shell.ts pageHead/unifyHead): Zeile 1 Titel links, Zeitraum-Chip und höchstens eine Aktion rechts;
   Zeile 2 gedämpfte Statuszeile „● Aktualisiert vor 12 Min. · Unterzeile“; darunter die Reiter. Ältere Köpfe (.pagehead, .ovhead, .mc-head)
   tragen zusätzlich .phead und sehen gleich aus. */
.period { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }   /* nur noch KI-Kosten (Admin, Monat plus Filter) */
.aic-page .field-inline, .period .field-inline { flex-wrap: wrap; }
.main .phead { display: grid; gap: 4px; margin: 0 0 var(--gap); min-width: 0; }
.phead__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; min-width: 0; }
.main .phead h1 { font: 600 var(--fs-title)/1.2 var(--font-ui); letter-spacing: -0.015em; min-width: 0; overflow-wrap: break-word; }
.phead__act { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; }
.phead__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; min-width: 0; min-height: 24px; color: var(--muted); font-size: var(--fs-caption); line-height: 1.45; }
.main .phead__sub { margin: 0; color: var(--muted); font-size: var(--fs-caption); }
.phead__meta > .lv:not([hidden]) + .phead__sub::before { content: "·"; margin-right: 8px; color: var(--muted); }
.main .phead .phead { margin: 0; }   /* Heatmap: Kopf in einer Hülle */
/* ältere Kopf-Markups mit derselben Ordnung: Titelblock links, Rest rechts, Unterzeile gedämpft */
.main .pagehead.phead, .main .ovhead.phead { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 16px; }
.main .pagehead.phead > div:first-child { min-width: 0; }
.main .pagehead.phead h1 + p, .main .ovhead.phead h1 + p { margin-top: 4px; font-size: var(--fs-caption); color: var(--muted); }
.main .mc-head.phead { display: grid; gap: 8px; }
/* Reiter direkt unter dem Kopf */
.main .phead:has(+ .subtabs, + .tabs, + .mc-switch) { margin-bottom: 8px; }
.main .phead + .subtabs, .main .phead + .tabs, .main .phead + .mc-switch, .main .subtabs + .tabs { margin-bottom: var(--gap); }

/* Zeitraum-Chip: Knopf mit Haarlinie, Tafel als Popover (Desktop) bzw. Bottom-Sheet (Telefon). Ohne JavaScript ein natives details. */
.pchip { position: relative; flex: none; }
.pchip__btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px 0 14px; border: 1px solid var(--line); border-radius: var(--r-s);
  background: var(--card); color: var(--ink); font: 500 var(--fs-body)/1 var(--font-ui); white-space: nowrap; cursor: pointer; list-style: none; user-select: none; }
.pchip__btn::-webkit-details-marker { display: none; }
.pchip__btn::marker { content: ""; }
.pchip__btn:hover { border-color: #C5CAD3; background: var(--ivory); }
.pchip__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pchip__ico { width: 16px; height: 16px; color: var(--muted); transition: transform .15s ease; }
.pchip[open] > .pchip__btn { border-color: var(--accent); }
.pchip[open] .pchip__ico { transform: rotate(180deg); }
.pchip__short { display: none; }
/* Klick daneben schließt: unsichtbare Fläche hinter der Tafel gehört zum summary (natives Umschalten, kein Skript nötig) */
.pchip[open] > .pchip__btn::before { content: ""; position: fixed; inset: 0; z-index: 40; cursor: default; }
.pchip__panel { position: absolute; z-index: 45; top: calc(100% + 6px); right: 0; width: 300px; max-height: min(70vh, 520px); overflow: auto; overscroll-behavior: contain;
  padding: 8px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--card); box-shadow: var(--shadow-float); color: var(--ink); text-align: left; }
.pchip__head { display: none; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 4px 8px 8px; }
.pchip__head b { font-size: var(--fs-body); font-weight: 600; }
.pchip__x { display: inline-grid; place-items: center; width: 44px; height: 44px; margin: -6px -6px -6px 0; border: 0; border-radius: var(--r-pill); background: none; color: var(--ink); cursor: pointer; }
.pchip__x svg { width: 18px; height: 18px; }
.pchip__x:hover { background: var(--ivory); }
.pchip__quick, .pchip__months { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.pchip__quick { padding-bottom: 8px; border-bottom: 1px solid var(--line-soft); }
.pchip__months { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pchip__cap { margin: 10px 8px 4px; color: var(--muted); font-size: var(--fs-caption); font-weight: 500; }
.pchip__panel a { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 0 10px; border-radius: var(--r-s);
  color: var(--ink); font-size: var(--fs-body); text-decoration: none; }
.pchip__panel a:hover { background: var(--ivory); }
.pchip__panel a[aria-current="true"] { background: var(--accent-wash); color: var(--accent-ink); font-weight: 600; }
.pchip__panel a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.pchip__hint { color: var(--muted); font-size: var(--fs-caption); font-weight: 400; }
.pchip__panel a[aria-current="true"] .pchip__hint { color: var(--accent-ink); }
@media (max-width: 640px) {
  .pchip__long { display: none; }
  .pchip__short { display: inline; }
  .pchip[open] > .pchip__btn::before { background: rgba(26, 31, 43, .38); }
  .pchip__panel { position: fixed; top: auto; left: 0; right: 0; bottom: 0; width: auto; max-height: 60vh;   /* K28: höchstens 60 vh, Liste scrollt im Blatt */
    border-radius: var(--r-m) var(--r-m) 0 0; border-width: 1px 0 0;
    padding: 8px 12px calc(12px + env(safe-area-inset-bottom)); }
  .pchip__head { display: flex; }
  .pchip__panel::before { content: ""; display: block; width: 36px; height: 4px; margin: 0 auto 6px; border-radius: var(--r-pill); background: var(--line); }   /* Griff */
}
@media (prefers-reduced-motion: reduce) { .pchip__ico { transition: none; } }

/* Datenstand in der Statuszeile: sichtbar „● Aktualisiert vor 12 Min.“ aus dem echten Stand der Bezugsquelle (live.ts, v2.js rechnet weiter);
   der Punkt pulsiert leise, bei reduzierter Bewegung steht er still. Verzug wie bisher als Etikett mit Quelle. */
.main .phead .lv.lv--dot { display: flex; align-items: center; min-height: 24px; }
.main .phead .lv--dot .lv__head { font-size: var(--fs-caption); color: var(--muted); }
.main .phead .lv--dot.lv--live .lv__state { color: var(--muted); font-weight: 500; }
.main .phead .lv--dot.lv--live .lv__state svg { color: var(--good); width: 8px; height: 8px; }
.main .phead .lv--dot.lv--live .lv__state b { font-weight: 500; }
.main .phead .lv--dot.lv--live > .info { display: block; }
.lv__state svg { flex: none; }
@keyframes lv-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.lv--live .lv__state svg { animation: lv-pulse 2.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .lv--live .lv__state svg { animation: none; } }
/* Statuszeile kompakt: Zustand, Zeit und ⓘ in einer Zeile; das ⓘ behält 44 px Trefferfläche, ohne die Zeile höher zu machen */
.main .phead .lv.lv--dot { flex: 0 1 auto; flex-wrap: nowrap; gap: 0 2px; }
.main .phead .lv.lv--dot:has(> .info[open]) { flex-wrap: wrap; flex-basis: 100%; }
.main .phead .lv--dot .lv__head { flex: 0 1 auto; }
.main .phead .lv--dot .lv__state { gap: 0 5px; }
.main .phead .lv--dot > .info > summary { width: 44px; height: 44px; margin: -10px -6px -10px -4px; }
.main .phead .lv--dot > .info > summary svg { width: 16px; height: 16px; }
@media (max-width: 640px) {
  /* Telefon: Titel, daneben bzw. darunter der Chip; Statuszeile neben dem Chip, wenn Platz ist (B: Kopf bis zur ersten Kennzahl ≤ 260 px) */
  .main .phead { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-bottom: 16px; }
  .main .phead > .phead__row { display: contents; }
  .main .phead > .phead__row > h1 { flex: 1 1 auto; }
  .main .phead > .phead__meta { flex: 1 1 12em; row-gap: 0; }
  .phead__meta > .lv:not([hidden]) + .phead__sub::before { content: none; }
  .main .phead > .phead__meta > .phead__sub { flex-basis: 100%; }
  .main .pagehead.phead, .main .ovhead.phead { margin-bottom: 16px; }
}

/* ================================================================ Kennzahlkarten am Telefon im 2er-Raster (B-Gegenprüfung 31.10.2026, P1-5)
   Übersicht (.ovk) und Stil-Karten (.kpi--st): zwei Spalten, Wert 26/600, Veränderung unter dem Wert, Verlauf 28 px ohne Achsentexte.
   Englischer Fachbegriff nie sichtbar (steht im ⓘ). Die ganze Karte ist das Tippziel des Drilldowns (gestreckter Link), das ⓘ liegt darüber.
   Vergleichszeilen der Stil-Karten (Vorjahr, Soll, Prognose) bleiben erhalten, aber gestapelt und klein. */
.ovk__en { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ovk .drill::after, .kpi--st .kpi__value .drill::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.ovk .pop__btn, .kpi--st .cav-tags, .kpi--st .tag { position: relative; z-index: 2; }
.kpi--st .info > summary, .kpi--st .info > .pop__btn { z-index: 2; }   /* bleiben absolut oben rechts, über dem gestreckten Link */
.ovk:has(.drill:hover), .kpi--st:has(.drill:hover) { border-color: #C5CAD3; }
.ovk:has(.drill:focus-visible), .kpi--st:has(.drill:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.ovk .drill:focus-visible, .kpi--st .drill:focus-visible { outline: none; }
@media (max-width: 640px) {
  .main .ovk-row, .main .kpis.kpis--st { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .main .ovk { padding: 12px 0 0; gap: 2px; }
  .main .ovk > .ovk__head, .main .ovk > .ovk__row { padding: 0 12px; }
  .main .ovk__head { min-height: 24px; align-items: flex-start; }
  .main .ovk__label, .main .kpi--st .kpi__label { font-size: var(--fs-caption); line-height: 1.3; }
  .main .ovk__value:not(.is-missing), .main .kpi--st .kpi__value { font-size: var(--fs-kpi); letter-spacing: -0.02em; }
  .main .ovk__row, .main .kpi--st .kpi__row { gap: 2px 6px; }
  .main .ovk__row .chg, .main .kpi--st .kpi__row .chg { font-size: var(--fs-micro); padding: 1px 6px 1px 4px; }
  .main .ovk__value.drill, .main .kpi--st .kpi__value .drill { min-height: 36px; }
  .main .ovk__curve, .main .kpi--st .kpi__curve { margin-top: 6px; }
  .main .ovk__curve .ovc, .main .kpi--st .kpi__curve .ovc { height: 28px; }
  .main .ovk .ovc__ax, .main .ovk .kpi__sparkcap, .main .kpi--st .ovc__ax { display: none; }
  .main .ovk__status { padding: 8px 12px 10px; font-size: var(--fs-caption); }
  .main .ovk__status svg { width: 14px; height: 14px; }
  .main .ovk .pop__btn { width: 44px; height: 44px; margin: -12px -12px -8px 0; }
  .main .ovk-note { font-size: var(--fs-micro); }
  .main .kpi--st { padding: 12px 0 10px; }
  .main .kpi--st > :not(.kpi__curve):not(.info) { margin-inline: 12px; }
  .main .kpi--st .kpi__head { padding-right: 28px; min-height: 24px; flex-wrap: wrap; }
  .main .kpi--st .info > summary { top: 0; right: 0; }
  .main .kpi--st .kpi__sub { font-size: var(--fs-micro); }
  .main .kpi--st .kpi__cmp { margin-top: 8px; font-size: var(--fs-micro); }
  .main .kpi--st .cmp.cmp--m { grid-template-columns: 10px minmax(0, 1fr); gap: 0 6px; }
  .main .kpi--st .cmp--m .cmp__v { grid-column: 2; }
  .main .kpi--st .kpis, .main .kpi--st .tag { font-size: var(--fs-micro); }
  .main .kpis--st .kpi--st:has(> details.info[open]) { grid-column: 1 / -1; }
}
@media (max-width: 340px) { .main .ovk-row, .main .kpis.kpis--st { grid-template-columns: minmax(0, 1fr); } }
/* Übersicht am Telefon kürzer (P1-5: ≤ 3.800 px): neueste Buchung als kompakte Zeile ohne Symbol, Chalets im 2er-Raster, Statuszeile der Karten linksbündig */
.main .ovk__status { justify-content: flex-start; text-align: left; }
@media (max-width: 640px) {
  .main .nb--line { gap: 2px 12px; padding: 10px 12px; }
  .main .nb--line .nb__ico { display: none; }
  .main .nb--line .nb__title, .main .nb--line .nb__what { font-size: var(--fs-caption); line-height: 1.4; }
  .main .nb--line .nb__more { font-size: var(--fs-caption); }
  .main .nb--line .nb__more a { display: inline-flex; align-items: center; min-height: 44px; margin: -10px 0; }
  .main .ov { gap: 16px; }
  .main .hl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
  .main .hl__row { min-height: 44px; padding: 8px 0; gap: 0; }
  .main .hl__name { font-size: var(--fs-caption); }
  .main .hl__status, .main .hl__owner { font-size: var(--fs-micro); }
}
@media (max-width: 340px) { .main .hl { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .main .ovs-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .main .ovs { padding: 12px; gap: 2px; }
  .main .ovs .ovk__head { align-items: flex-start; min-height: 24px; }
  .main .ovs .pop__btn { width: 44px; height: 44px; margin: -12px -12px -8px 0; }
  .main .ovs__label { font-size: var(--fs-caption); line-height: 1.3; }
  .main .ovs__line { font-size: var(--fs-micro); }
  .main .ovb { gap: 8px; }
  .main .ovb__item { grid-template-columns: 28px minmax(0, 1fr); gap: 10px; padding: 12px; }
  .main .ovb__ico { width: 28px; height: 28px; border-radius: var(--r-s); }
  .main .ovb__ico svg { width: 16px; height: 16px; }
  .main .ovb__item p { font-size: var(--fs-caption); }
}
@media (max-width: 340px) { .main .ovs-row { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .main .ov .panel { padding: 14px; }
  .main .ov .ml { gap: 0; }
  .main .ov .ml__row { min-height: 24px; }
  .main .ov .ml__bar { height: 12px; }
  .main .attention { gap: 8px; margin-top: 8px; }
  .main .attention li p { font-size: var(--fs-caption); line-height: 1.45; }
  .main .attention li p a { display: inline-flex; align-items: center; min-height: 44px; margin: -12px 0; }
}
@media (max-width: 640px) {
  .main .ov { gap: 12px; }
  .main .ovk__status { padding: 6px 12px 8px; }
  .main .ov .panel__head, .main .ov .vpanel__head { margin-bottom: 0; }
  .pchip__x { flex: none; }
}
@media (max-width: 640px) {
  .main .sysn { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
  .main .sysn--list li { padding: 8px 0; }
  .main .sysn__v { font-size: var(--fs-kpi-s); }
  /* Revenue-Kacheln wie die Stil-Karten zweispaltig */
  .main .kpis.rv-kpis:not(.rv-ov) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .main .rv-kpis:not(.rv-ov) > .kpi { padding: 12px; }
  .main .rv-kpis:not(.rv-ov) .kpi__value { font-size: var(--fs-kpi); }
  .main .rv-kpis:not(.rv-ov) .kpi__head { padding-right: 28px; }
  .main .rv-kpis:not(.rv-ov) .cmp.cmp--m { grid-template-columns: 10px minmax(0, 1fr); gap: 0 6px; font-size: var(--fs-caption); }
  .main .rv-kpis:not(.rv-ov) .cmp--m .cmp__v { grid-column: 2; }
  .main .rv-kpis:not(.rv-ov) .info > summary { top: 0; right: 0; }
  .main .rv-kpis:not(.rv-ov) > .kpi:has(> details.info[open]) { grid-column: 1 / -1; }
}
@media (max-width: 340px) { .main .kpis.rv-kpis:not(.rv-ov) { grid-template-columns: minmax(0, 1fr); } }

/* Zahlenspalten rechtsbündig (B P2-5): Zellen bekommen .n in shell.ts alignNumbers; der Spaltenkopf folgt, sobald die Spalte Zahlen enthält */
table:has(> tbody > tr > td.n:nth-child(2)) > thead > tr > th:nth-child(2),
table:has(> tbody > tr > td.n:nth-child(3)) > thead > tr > th:nth-child(3),
table:has(> tbody > tr > td.n:nth-child(4)) > thead > tr > th:nth-child(4),
table:has(> tbody > tr > td.n:nth-child(5)) > thead > tr > th:nth-child(5),
table:has(> tbody > tr > td.n:nth-child(6)) > thead > tr > th:nth-child(6),
table:has(> tbody > tr > td.n:nth-child(7)) > thead > tr > th:nth-child(7),
table:has(> tbody > tr > td.n:nth-child(8)) > thead > tr > th:nth-child(8),
table:has(> tbody > tr > td.n:nth-child(9)) > thead > tr > th:nth-child(9),
table:has(> tbody > tr > td.n:nth-child(10)) > thead > tr > th:nth-child(10),
table:has(> tbody > tr > td.n:nth-child(11)) > thead > tr > th:nth-child(11),
table:has(> tbody > tr > td.n:nth-child(12)) > thead > tr > th:nth-child(12) { text-align: right; }
@media (max-width: 640px) {
  /* Tippziele ≥ 44 px (B P2): Erklärsymbole und einzelne Textlinks bekommen die volle Trefferfläche, ohne die Zeile zu erhöhen */
  .main .pop__btn { width: 44px; height: 44px; margin: -8px -8px -8px -8px; }
  .main .nb__more a, .main .ovp__go, .main .panel__foot a { display: inline-flex; align-items: center; min-height: 44px; }
}
.pchip:not([open]) > .pchip__panel { display: none; }   /* geschlossen ohne Layout (sonst 2 px Überlauf am Telefon) */

/* ================================================================ Design-System Strang A (Kritik 1 Design, 01.11.2026)
   Gemeinsame Bauteile für alle Seiten: Leerzustand, Kennzahlkarte mit festen Zeilen, Raster ohne verwaiste Karten, ein Telefon-Kopf,
   ⓘ-Liste im Blatt, Tabellen (Telefon Zeilenkarten, Desktop Hover und Sortierung), Abstandsskala 4/8/12/16/24/32/48. */
:root { --pad-card: 24px; }
@media (max-width: 640px) { :root { --pad-card: 16px; } }

/* K3 Leerzustand: im Zahlenplatz nur ein ruhiger Strich, der Satz steht darunter in Beschriftungsschrift (feinschliff.ts leerWert) */
.main .is-missing[aria-hidden="true"] { color: var(--line); font-size: var(--fs-kpi-s); font-weight: 600; line-height: 1.1; letter-spacing: 0; }
.main .is-missing[aria-hidden="true"]:empty::before { content: "–"; }   /* Strich nur als Darstellung, nicht im Text (Regel ohne Gedankenstriche im Text) */
.main .leer__satz { display: block; flex-basis: 100%; margin: 0; color: var(--muted); font-size: var(--fs-caption); font-weight: 400; line-height: 1.4; letter-spacing: 0; white-space: normal; }
.main .kpi__row > .leer__satz, .main .ovk__row > .leer__satz { margin-top: -2px; }
/* Leerfläche für einen ganzen Block (kit.ts emptyBlock) */
.leerflaeche { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 4px 12px; align-items: start; padding: 24px; border: 1px dashed var(--line); border-radius: var(--r-m); background: none; color: var(--muted); }
.leerflaeche svg { width: 20px; height: 20px; color: var(--muted); grid-row: span 2; margin-top: 1px; }
.leerflaeche b { color: var(--ink); font-size: var(--fs-body); font-weight: 600; }
.leerflaeche p { grid-column: 2; margin: 0; font-size: var(--fs-caption); }

/* K5 Kennzahlkarte mit festen Zeilen: Wert und Veränderung in einer Zeile (kein Umbruch am Desktop), Verlauf und Fuß unten bündig */
@media (min-width: 641px) {
  .main .kpi--st, .main .ovk { display: flex; flex-direction: column; }
  .main .kpi--st .kpi__row, .main .ovk__row { flex-wrap: nowrap; align-items: baseline; gap: 8px; min-width: 0; }
  .main .kpi--st .kpi__row:has(> .leer__satz), .main .ovk__row:has(> .leer__satz) { flex-wrap: wrap; }
  .main .kpi--st .kpi__row .chg, .main .ovk__row .chg { flex: none; }
  .main .kpi--st .kpi__value, .main .ovk__value:not(.is-missing) { min-width: 0; font-size: clamp(24px, 1.9vw, var(--fs-kpi)); }
  .main .kpi--st .kpi__cmp { margin-top: auto; padding-top: 12px; }
  .main .ovk__curve { margin-top: auto; padding-top: 12px; }
}
/* K11 leise Verlaufslinie: niedrig, kein Pfeil neben dem Wert (die ganze Karte ist der Link), keine zweite „Über Vorjahr“-Zeile neben dem Chip */
.main .ovk__curve .ovc, .main .kpi--st .kpi__curve .ovc { height: 48px; }
.main .ovk .drill__ico, .main .kpi--st .kpi__value .drill__ico { display: none; }
.main .ovk:has(.drill:hover), .main .kpi--st:has(.drill:hover) { background: var(--ivory); border-color: var(--line); }
@media (max-width: 640px) { .main .ovk__curve .ovc, .main .kpi--st .kpi__curve .ovc { height: 28px; } }

/* K6 Raster ohne Waisen (Desktop): 3, 6 und 9 Karten in Dreierreihen, 5 als 3 + 2 mit breiter vierter Karte, 7 als 4 + 3 mit breiter fünfter Karte */
@media (min-width: 1024px) {
  .main .kpis:has(> :nth-child(3):last-child), .main .kpis:has(> :nth-child(6):last-child), .main .kpis:has(> :nth-child(9):last-child), .main .kpis:has(> :nth-child(5):last-child),
  .main .ovk-row:has(> :nth-child(3):last-child), .main .ovk-row:has(> :nth-child(6):last-child), .main .ovk-row:has(> :nth-child(9):last-child), .main .ovk-row:has(> :nth-child(5):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .main .kpis:has(> :nth-child(5):last-child) > :nth-child(4), .main .ovk-row:has(> :nth-child(5):last-child) > :nth-child(4) { grid-column: span 2; }
  .main .kpis:has(> :nth-child(7):last-child), .main .ovk-row:has(> :nth-child(7):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .main .kpis:has(> :nth-child(7):last-child) > :nth-child(5), .main .ovk-row:has(> :nth-child(7):last-child) > :nth-child(5) { grid-column: span 2; }
}
/* gleiche Höhe in jeder Reihe (K24) */
.main .kpis, .main .ovk-row, .main .grid2 { align-items: stretch; }

/* K7 ein Telefon-Kopf: Zeile 1 Titel links, Chip oder eine Aktion rechts (44 px), Zeile 2 Statuszeile über die volle Breite, Zeile 3 Unterzeile */
time[data-rel] { white-space: nowrap; }
.phead__was { flex-basis: 100%; order: 3; }
@media (max-width: 640px) {
  .main .phead:has(> .phead__row) { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0 0 16px; }   /* Titel links, Chip rechts; eine breite Aktion rutscht in eine eigene Zeile */
  .main .phead > .phead__row { display: contents; }
  .main .phead > .phead__row > h1, .main .phead > h1 { flex: 1 1 9em; min-width: 0; font-size: 22px; line-height: 1.2; }
  .main .phead > .phead__row > .phead__act { flex: 0 1 auto; margin-left: auto; flex-wrap: nowrap; }
  .main .phead > .phead__row > .phead__was, .main .phead > .phead__meta { flex: 1 1 100%; order: 3; }
  .main .phead > .phead__meta { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 0; }
  .main .phead > .phead__meta > .phead__sub { flex-basis: auto; }
  .main .phead .pchip__btn, .main .phead__act > * { min-height: 44px; }
}

/* K13 ⓘ der Statuszeile als Blatt: Quellen als Liste (Name fett, darunter Takt, Uhrzeit, Zustand); Blatt mit Griff wie der Zeitraum */
.js .pop.is-open.is-sheet::before { content: ""; display: block; width: 36px; height: 4px; margin: -8px auto 2px; border-radius: var(--r-pill); background: var(--line); }
.pop .lv__list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; font-size: var(--fs-caption); color: var(--ink-2); }
.pop .lv__src { display: grid; grid-template-columns: 8px minmax(0, 1fr); align-items: start; gap: 10px; white-space: normal; }
.pop .lv__src .lv__dot { margin-top: 6px; }
.pop .lv__txt { display: grid; gap: 2px; min-width: 0; }
.pop .lv__txt b { color: var(--ink); font-size: var(--fs-body); font-weight: 600; }
.pop .lv__meta { color: var(--muted); }

/* K15 Tabellen am Desktop: Zeilen-Hover, sortierbare Köpfe (v2.js), K19 Zellpolster 8/12 */
.main tbody tr:hover > td, .main tbody tr:hover > th { background: #F7F8FA; }
.main th[aria-sort] { padding: 0; }
.main th .th-sort { display: flex; align-items: center; gap: 4px; width: 100%; min-height: 36px; padding: 8px 12px; border: 0; background: none; color: inherit; font: inherit; text-align: inherit; cursor: pointer; }
.main th.n .th-sort { justify-content: flex-end; }
.main th .th-sort svg { width: 12px; height: 12px; flex: none; opacity: .35; }
.main th[aria-sort="ascending"] .th-sort svg, .main th[aria-sort="descending"] .th-sort svg { opacity: 1; }
.main th[aria-sort="descending"] .th-sort svg { transform: rotate(180deg); }
.main th .th-sort:hover { color: var(--ink); }
.main th .th-sort:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* K14 Tabellen am Telefon als Zeilenkarten (ab 4 Spalten): erste Zelle als Titel, übrige als Paare „Beschriftung · Wert“ */
@media (max-width: 640px) {
  .main table.t-cards, .main table.t-cards tbody, .main table.t-cards tr { display: block; width: 100%; min-width: 0; }
  .main table.t-cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .main table.t-cards tr { padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
  .main table.t-cards tbody tr:hover > td, .main table.t-cards tbody tr:hover > th { background: none; }
  .main table.t-cards td, .main table.t-cards tbody th { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 2px 0; border: 0; text-align: right; white-space: normal; min-width: 0; }
  .main table.t-cards td::before, .main table.t-cards tbody th::before { content: attr(data-label); flex: none; max-width: 50%; color: var(--muted); font-size: var(--fs-caption); font-weight: 500; text-align: left; }
  .main table.t-cards tr > :first-child { display: block; padding-bottom: 4px; text-align: left; font-size: var(--fs-body); font-weight: 600; color: var(--ink); }
  .main table.t-cards tr > :first-child::before { content: none; }
  .main table.t-cards td:empty { display: none; }
  .main .tablewrap:has(> table.t-cards) { overflow-x: visible; }
}

/* K18 Sprunganker auf „Heute“: Textlinks statt Pillen (nicht mit Reitern oder Filtern verwechselbar) */
.main .hz-jump { display: flex; flex-wrap: wrap; gap: 0 16px; }
.main .hz-jump a { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--accent); font-size: var(--fs-caption); font-weight: 500; }

/* K19 Abstandsskala: Kartenpolster am Desktop einheitlich 24 px (Telefon behält die randlosen Verläufe des 2er-Rasters mit 12 bis 16 px) */
@media (min-width: 641px) {
  .main .panel { padding: var(--pad-card); }
  .main .kpi--st { padding: var(--pad-card) 0; }
  .main .kpi--st > :not(.kpi__curve):not(.info) { margin-inline: var(--pad-card); }
  .main .ovk { padding-top: var(--pad-card); }
  .main .ovk > .ovk__head, .main .ovk > .ovk__row { padding-left: var(--pad-card); padding-right: var(--pad-card); }
  .main .ovk__status { margin-left: var(--pad-card); margin-right: var(--pad-card); }
}

/* K29 Tippziele am Telefon: Umschalter, Textlinks in Karten */
@media (max-width: 640px) {
  .main .seg a, .main .seg button { min-height: 44px; }
  .main .kpi p.small > a, .main .note > a:only-child { display: inline-flex; align-items: center; min-height: 44px; }
}
/* K5 am Telefon (2er-Raster): Beschriftung mit fester Höhe für zwei Zeilen, Veränderung immer unter dem Wert, damit Wert, Chip und Verlauf je Reihe bündig stehen */
@media (max-width: 640px) {
  .main .ovk-row > .ovk .ovk__head, .main .kpis--st > .kpi--st .kpi__head { min-height: 2.9em; align-items: flex-start; }
  .main .ovk-row > .ovk .ovk__row, .main .kpis--st > .kpi--st .kpi__row { flex-direction: column; align-items: flex-start; flex-wrap: nowrap; gap: 4px; }
  .main .ovk-row > .ovk, .main .kpis--st > .kpi--st { display: flex; flex-direction: column; }
  .main .ovk-row > .ovk .ovk__curve, .main .kpis--st > .kpi--st .kpi__curve { margin-top: auto; }
}

/* Strang B (Eigentümer und Management, 01.11.2026): „Für Sie erledigt“, Werbefeed 7 Tage, Direktbuchungen mit Vorjahr */
.mc-erl .wf__t { font-size: var(--fs-body); font-weight: 600; margin: 14px 0 4px; }
.mc-erl .wf__t:first-of-type { margin-top: 8px; }
.mc-erl .wf__l { margin: 0; padding-left: 1.2em; display: grid; gap: 4px; overflow-wrap: anywhere; }
.mc-erl .wf { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.mc-erl .wf:first-of-type:not(:nth-child(2)) { border-top: 0; }
.mc-erl .wf .panel__head h3 { font-size: var(--fs-body); margin: 0; }
.wf .wf__t { font-size: var(--fs-caption); font-weight: 600; color: var(--ink-2); margin: 10px 0 2px; }
.dv__lead { margin: 10px 0 2px; font-size: var(--fs-section); }
.dv__pct { font-size: var(--fs-kpi-s); font-weight: 600; font-variant-numeric: var(--num); margin-left: 6px; white-space: nowrap; display: inline-block; }
.dv__lead .delta { white-space: nowrap; display: inline-block; }
.dv__vj { margin: 0; color: var(--ink-2); font-size: var(--fs-caption); }
.dv__vj--up { color: var(--good); }
.dv__tun { margin: 6px 0 0; font-size: var(--fs-caption); color: var(--ink-2); padding-left: 10px; border-left: 3px solid var(--accent); }
.dv__bars { display: grid; gap: 6px; margin: 14px 0 8px; }
.dv__bar { display: grid; grid-template-columns: 72px 1fr; align-items: center; gap: 10px; font-size: var(--fs-caption); }
.dv__bk { color: var(--muted); }
.dv__track { display: flex; height: 14px; border-radius: var(--r-s); overflow: hidden; background: var(--line-soft); }
.dv__s { display: block; height: 100%; }
.dv__s--web { background: var(--good); }
.dv__s--tel { background: #5FA37E; }
.dv__s--portal { background: #9AA1AD; }
.dv__s--team { background: #CDD1D8; }
.dv__lg { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: var(--fs-caption); color: var(--ink-2); }
.dv__lg .nb__eigen { font-weight: 600; color: var(--good); }
.dv__sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.dv__geld { margin: 10px 0 0; font-size: var(--fs-body); }
.dv__geld > span:first-child { color: var(--muted); }
.dv__geld .note, .dv__geld b { white-space: nowrap; }
@media (max-width: 640px) { .dv__bar { grid-template-columns: 56px 1fr; } .dv__lead { font-size: var(--fs-body); } }
/* Strang C · Intelligenz und Kennzahlen (Umsetzung 01.11.2026): Nachfrage der nächsten Wochen auf der Empfehlungsseite */
.cprog td, .cprog th { vertical-align: middle; }
.cprog__bar { position: relative; min-width: 6em; width: 30%; }
.cprog__band { position: absolute; top: 50%; height: 1.1em; transform: translateY(-50%); background: rgba(26, 31, 43, 0.12); border-radius: 0.3em; pointer-events: none; }
/* Strang D · Unternehmenssteuerung (01.11.2026): Finanzen, Betrieb & Gäste, Wochenmail. Nur neue Klassen mit Vorsilbe fi-. */
.fi-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-top: 12px; }
.fi-tile { position: relative; border: 1px solid var(--line-soft); border-radius: var(--r-m); padding: 14px 16px; background: var(--card); min-width: 0; }
.fi-tile__k { font-size: var(--fs-caption); font-weight: 600; color: var(--muted); margin: 0 0 6px; }
.fi-tile__v { font-size: var(--fs-kpi-s); font-weight: 600; font-variant-numeric: var(--num); margin: 0; line-height: 1.2; overflow-wrap: anywhere; }
.fi-tile__v .muted { font-size: var(--fs-body); font-weight: 500; }
.fi-tile__s { font-size: var(--fs-caption); color: var(--muted); margin: 6px 0 0; }
.fi-big { font-size: clamp(32px, 5vw, 44px); font-weight: 600; font-variant-numeric: var(--num); margin: 4px 0 0; line-height: 1.1; color: var(--ink); }
.fi-range { color: var(--muted); margin: 4px 0 0; font-variant-numeric: var(--num); }
.fi-bars { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 8px; }
.fi-bars li { display: grid; grid-template-columns: 9.5em minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: var(--fs-caption); }
.fi-bars__t { background: var(--line-soft); border-radius: var(--r-s); height: 12px; overflow: hidden; }
.fi-bars__b { display: block; height: 100%; background: var(--data); }
.fi-bars__v { font-variant-numeric: var(--num); }
.fi-table td, .fi-table th { white-space: nowrap; }
.fi-table .fi-sum td { font-weight: 600; border-top: 2px solid var(--line); }
.fi-years { display: flex; gap: 4px; }
.fi-years a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: var(--r-pill); border: 1px solid var(--line); color: var(--ink-2); text-decoration: none; font-variant-numeric: var(--num); }
.fi-years a[aria-current] { background: var(--accent-wash); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.fi-inline { display: flex; gap: 8px; align-items: end; flex-wrap: wrap; }
.fi-inline label { display: grid; gap: 4px; font-size: var(--fs-caption); }
.fi-inline select { font-size: 16px; min-height: 44px; padding: 0 8px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--card); }
.fi-neu { margin: 12px 0; }
.fi-neu > summary { display: inline-flex; cursor: pointer; list-style: none; }
.fi-neu > summary::-webkit-details-marker { display: none; }
.fi-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-top: 12px; align-items: end; }
.fi-form label { display: grid; gap: 4px; }
.fi-form input, .fi-form select, .fi-form textarea { font-size: 16px; }
.fi-form .actions { grid-column: 1 / -1; }
.fi-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.fi-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.fi-list--plain li { grid-template-columns: 10em minmax(0, 1fr); align-items: start; }
.fi-incs { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 10px; }
.fi-inc { border: 1px solid var(--line-soft); border-radius: var(--r-m); padding: 12px 14px; }
.fi-inc p { margin: 6px 0 0; }
.fi-inc__head { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.fi-res > summary { cursor: pointer; margin-top: 6px; min-height: 44px; display: inline-flex; align-items: center; }
.fi-links { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 0; }
.fi-mails { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-top: 8px; }
.fi-mail { border: 1px solid var(--line); border-radius: var(--r-m); padding: 16px; background: var(--ivory); }
.fi-mail h3 { margin: 4px 0 10px; font-size: var(--fs-section); }
.fi-mail p { margin: 6px 0; }
.fi-mail__an { font-size: var(--fs-caption); color: var(--muted); margin: 0; }
@media (max-width: 640px) {
  .fi-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .fi-tile { padding: 12px; }
  .fi-bars li { grid-template-columns: minmax(0, 1fr) auto; }
  .fi-bars__t { grid-column: 1 / -1; grid-row: 2; }
  .fi-list li, .fi-list--plain li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .fi-form { grid-template-columns: minmax(0, 1fr); }
}
/* Ende Strang D */

/* Finalisierung Gegenprüfung 01.11.2026 (M4, Status vorbereitet) */
.wbz { position: relative; }   /* ⓘ der Wochenbilanz sitzt im Panel, nicht oben rechts auf der Seite (1440) */
.mc-today .hd.is-today { outline: 0; box-shadow: inset 0 0 0 1px var(--line); }   /* Kopf Mein Chalet: kein kastenförmiger Fokusrahmen um die Tageszahl */
.emp-ausi > p { margin: 0; }
.emp-ausi { position: relative; padding-right: 56px; }
/* Empfehlungen, Neubau 01.11.2026 (Auftrag Johannes): drei Euro-Zahlen, Gruppen nach Status, kompakte Karten; Telefon zuerst */
.emk-top { display: grid; gap: 12px; }
.emk-kz { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14em), 1fr)); gap: 12px 24px; }
.emk-k { display: grid; gap: 2px; align-content: start; min-width: 0; padding: 12px 14px; border: 1px solid var(--line-soft); border-radius: var(--r-m); background: var(--card); }
.emk-k__k { font-size: var(--fs-caption); color: var(--muted); }
.emk-k__v { font-size: 26px; font-weight: 600; line-height: 1.2; color: var(--ink); font-variant-numeric: tabular-nums; }
.emk-k__s { font-size: var(--fs-caption); color: var(--ink-2); }
.emk-stand { display: flex; align-items: center; gap: 8px; min-height: 44px; position: relative; }
.emk-stand .note { margin: 0; }
.emk-stand > .info > .pop__btn { position: static; }
.emk-sec { display: grid; gap: 8px; }
.emk-sec__h { display: grid; gap: 2px; }
.emk-sec__h h2, .emk-wa__t { margin: 0; font-size: var(--fs-section); font-weight: 600; color: var(--ink); }
.emk-sec__h .note { margin: 0; }
.emk-wa > summary { cursor: pointer; list-style: none; min-height: 44px; display: flex; align-items: center; }
.emk-wa > summary::-webkit-details-marker { display: none; }
.emk-wa > summary::after { content: ''; flex: none; width: 8px; height: 8px; margin-left: auto; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); }
.emk-wa[open] > summary::after { transform: rotate(-135deg); }
.emk-list { list-style: none; margin: 4px 0 0; padding: 0; display: grid; }
.emk { display: grid; gap: 6px; padding: 14px 0; border-top: 1px solid var(--line-soft); min-width: 0; overflow-wrap: anywhere; }
.emk:first-child { border-top: 0; padding-top: 4px; }
.emk__h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.emk__t { margin: 0; font-size: var(--fs-body); font-weight: 600; min-width: 0; }
.emk__eur { flex: none; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.emk__w { margin: 0; color: var(--ink-2); }
.emk__d > summary { cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; color: var(--data); font-weight: 600; font-size: var(--fs-caption); }
.emk__dl { display: grid; gap: 6px; margin: 0; }
.emk__dl > div { display: grid; grid-template-columns: minmax(7em, 10em) minmax(0, 1fr); gap: 8px; }
.emk__dl dt { color: var(--muted); font-size: var(--fs-caption); }
.emk__dl dd { margin: 0; font-size: var(--fs-caption); }
@media (max-width: 640px) { .emk__dl > div { grid-template-columns: minmax(0, 1fr); gap: 0; } .emk-k__v { font-size: 22px; } }
.emk__s { display: flex; align-items: center; gap: 8px; min-height: 28px; position: relative; }
.emk__s > .info > .pop__btn { position: static; width: 32px; height: 32px; }
/* Runde 2 (01.11.2026): Direktbuchungen je Weg mit Vorjahr, Balken auf einem Maßstab, Satz mit dem Hauptgrund */
.dv__warum { margin: 8px 0 0; font-size: var(--fs-body); color: var(--ink); max-width: 68ch; }
.dvt-wrap { margin: 14px 0 8px; }
.dvt { width: 100%; border-collapse: collapse; font-size: var(--fs-caption); }
.dvt thead th { text-align: left; font-weight: 500; color: var(--muted); padding: 0 8px 6px 0; border-bottom: 1px solid var(--line-soft); vertical-align: bottom; }
.dvt thead th.n, .dvt td.n { text-align: right; padding-right: 0; }
.dvt tbody th, .dvt tbody td { padding: 8px 8px 8px 0; border-bottom: 1px solid var(--line-soft); vertical-align: middle; text-align: left; font-weight: 400; }
.dvt tbody th { width: 34%; color: var(--ink-2); }
.dvt .nb__eigen { font-weight: 600; color: var(--good); }
.dvt__key { display: inline-flex; gap: 10px; margin-left: 8px; font-weight: 400; }
.dvt__key > span { white-space: nowrap; }
.dvt__sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; background: #5E6573; }
.dvt__sw--prev { background: #C9CED6; }
.dvt__sw--cav { background: transparent; border: 1px dashed #9AA1AD; }
.dvt__bars { min-width: 0; }
.dvt__b { display: grid; grid-template-columns: minmax(0, 1fr) 76px; align-items: center; gap: 8px; }
.dvt__b + .dvt__b { margin-top: 4px; }
.dvt__t { display: block; height: 10px; border-radius: var(--r-s); background: var(--line-soft); overflow: hidden; }
.dvt__f { display: block; height: 100%; border-radius: var(--r-s); background: #9AA1AD; min-width: 2px; }
.dvt__b--prev .dvt__f { background: #D5D8DE; }
.dvt__b--cav .dvt__f { background: transparent; border: 1px dashed #9AA1AD; box-sizing: border-box; }
.dvt__b--prev .dvt__v, .dvt__b--cav .dvt__v { color: var(--muted); }
.dvt__v { white-space: nowrap; font-variant-numeric: var(--num); color: var(--ink-2); }
.dvt__v b { font-weight: 600; }
.dvt__r--web .dvt__b--cur .dvt__f { background: var(--good); }
.dvt__r--web .dvt__b--prev .dvt__f { background: #A9CFB8; }
.dvt__r--web .dvt__b--cur .dvt__v { color: var(--good); }
.dvt__d { white-space: nowrap; font-variant-numeric: var(--num); color: var(--ink-2); }
.dvt__dn, .dvt__dp { display: block; }
.dvt__dn { font-weight: 600; }
.dvt__dn--up { color: var(--good); }
.dvt__dp { color: var(--muted); }
.dvt__tun td { padding: 0 0 10px; border-bottom: 1px solid var(--line-soft); }
.dvt__tun .dv__tun { margin: 0; }
.dv__geld .dv__gk { display: block; white-space: normal; margin-top: 2px; font-size: var(--fs-caption); color: var(--ink-2); }
@media (max-width: 640px) {
  .dvt thead th:nth-child(2) { font-size: 0; }
  .dvt thead th:nth-child(2) .dvt__key { font-size: var(--fs-caption); margin-left: 0; }
  .dvt, .dvt tbody { display: block; }
  .dvt thead { display: block; }
  .dvt thead tr { display: flex; justify-content: space-between; border-bottom: 1px solid var(--line-soft); }
  .dvt thead th { border-bottom: 0; }
  .dvt thead th:first-child { display: none; }
  .dvt tbody tr.dvt__r { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
  .dvt tbody tr.dvt__r > * { border-bottom: 0; padding: 0; width: auto; }
  .dvt tbody tr.dvt__r > th { grid-column: 1; grid-row: 1; align-self: start; }
  .dvt tbody tr.dvt__r > .dvt__d { grid-column: 2; grid-row: 1; text-align: right; }
  .dvt tbody tr.dvt__r > .dvt__d .dvt__dn, .dvt tbody tr.dvt__r > .dvt__d .dvt__dp { display: inline; }
  .dvt tbody tr.dvt__r > .dvt__bars { grid-column: 1 / -1; grid-row: 2; margin-top: 6px; }
  .dvt__tun { display: block; } .dvt__tun td { display: block; }
}
.kc-tempo__lead { margin: 10px 0 0; font-size: var(--fs-body); }
.dv__warum + .dv__warum { margin-top: 2px; }
/* Runde 2 (01.11.2026): Werbung → Ergebnisse, Trichter je Kanal und Messstatus */
.wt { width: 100%; border-collapse: collapse; font-size: var(--fs-caption); margin-top: 8px; }
.wt th, .wt td { padding: 7px 8px 7px 0; border-bottom: 1px solid var(--line-soft); text-align: left; font-weight: 400; }
.wt thead th { color: var(--muted); font-weight: 500; }
.wt .n { text-align: right; padding-right: 0; font-variant-numeric: var(--num); white-space: nowrap; }
.wt tbody th { color: var(--ink-2); }
.wt__kosten th, .wt__kosten td { font-weight: 600; }
.ms { list-style: none; margin: 10px 0 0; padding: 0; }
.ms__r { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; grid-template-areas: "a n t" "a s s"; gap: 2px 12px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); font-size: var(--fs-caption); }
.ms__a { grid-area: a; } .ms__n { grid-area: n; font-weight: 600; color: var(--ink); } .ms__s { grid-area: s; color: var(--ink-2); } .ms__t { grid-area: t; color: var(--muted); white-space: nowrap; }
@media (max-width: 640px) { .ms__r { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n t" "s s" "a a"; } }
.wt td.n { padding-left: 10px; }
.wt td.n .muted { white-space: normal; display: inline-block; text-align: right; }
@media (max-width: 640px) { .ms__r { grid-template-areas: "a t" "n n" "s s"; } }
.dvt__f[style="width:0.0%"] { min-width: 0; }

/* Speicherwart (CT 01.11.2026): Kachel im Systemstatus, nur Admin */
.swk { scroll-margin-top: 16px; }
.swk--error { box-shadow: inset 4px 0 0 var(--error); }
.sw-head__r { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.sw-head__r .info > .pop__btn { position: static; }
.sw-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 8.5em), 1fr)); gap: 12px 16px; margin: 14px 0 4px; }
.sw-kpi { min-width: 0; }
.sw-kpi p { margin: 0; }
.sw-kpi__label { font-size: var(--fs-caption); color: var(--muted); }
.sw-kpi__value { font-size: var(--fs-section); font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.sw-kpi__sub { font-size: var(--fs-caption); color: var(--muted); }
.sw-rot { color: var(--error); }
.sw-h3 { font-size: var(--fs-body); font-weight: 600; margin: 18px 0 6px; }
.sw-kat { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-width: 32em; }
.sw-kat li { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border-bottom: 1px solid var(--line-soft); }
.sw-kat b { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sw-verlauf { position: relative; }
.sw-verlauf__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sw-verlauf__head .info { position: static; }
.sw-verlauf__head .info--table > summary { position: static; }
.sw-ar { grid-template-columns: 40px minmax(0, 1fr); }
.sw-ar .ar__y span { white-space: nowrap; }
.sw-schwelle { stroke: var(--ink, #1A1F2B); stroke-width: 1.25; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; }
.sw-legende { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 6px 0 0; font-size: var(--fs-caption); color: var(--muted); }
.sw-legende__linie { display: inline-block; width: 16px; height: 2px; background: #2a78d6; border-radius: 1px; }
.sw-legende__schwelle { display: inline-block; width: 16px; border-top: 1.5px dashed var(--ink, #1A1F2B); margin-left: 8px; }
/* D2 Stufe 1 (01.11.2026): Kachel „Buchungen je Kanal“, Herkunftsspalte nicht zu schmal (Tabelle scrollt in sich) */
.wa-alle th:first-child, .wa-alle td:first-child { min-width: 11em; }
/* Strang Notfall (01.11.2026): großer roter Hinweis oben auf jeder Super-Admin-Seite, haftet beim Scrollen */
.nf-banner { position: sticky; top: 0; z-index: 40; margin: 0 0 16px; padding: 14px 16px; border-radius: var(--r-card, 12px); background: var(--error, #B3261E); color: #fff; box-shadow: 0 4px 16px rgba(0, 0, 0, .18); }
.nf-banner__titel { margin: 0 0 6px; font-size: 1.15rem; line-height: 1.3; color: #fff; }
.nf-banner__liste { margin: 0; padding-left: 1.1em; }
.nf-banner__liste li { margin: 4px 0; line-height: 1.45; }
.nf-banner__liste a, .nf-banner__mail { color: #fff; }
.nf-banner__liste a { font-weight: 600; text-decoration: underline; }
.nf-banner__seit { opacity: .85; font-size: var(--fs-caption, .875rem); white-space: nowrap; }
.nf-banner__mail { margin: 8px 0 0; font-size: var(--fs-caption, .875rem); opacity: .9; }
.ss-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }
.ss-top__herz { font-size: var(--fs-caption, .875rem); color: var(--muted); }
/* Strang Lernen (01.11.2026): Systemstatus, Kachel „Abfragen bei Meta“ (Balken als meter) */
.lb-kachel__head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.lb-kachel__head h2 { margin: 0; font-size: var(--fs-h3, 1.05rem); }
.lb-bar { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.lb-bar__meter { flex: 1 1 auto; min-width: 0; height: 12px; }
.lb-bar__wert { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 3.5em; text-align: right; }
.lb-andere { margin: 8px 0 0; padding-left: 1.1em; font-size: var(--fs-caption); }
/* Strang Übersicht fein (01.11.2026, Johannes: „immer den Platz voll füllen, keinen leeren Platz verschenken“). Nur Ergänzungen, keine bestehende Regel umgebaut.
   Wo es keine sinnvolle weitere Karte gibt, füllt die letzte Karte die Reihe; eine Füllkarte ohne Inhalt gibt es nie. */
.ov-stack { display: grid; gap: var(--gap); align-content: start; min-width: 0; }
.ov-stack > .panel { margin: 0; }
.att-leise { color: var(--muted); }
.gh-teil__hinweis { margin-top: 2px; }
/* 2 Karten nie in einem 3er-Raster (Klee: Antwortzeiten) */
@media (min-width: 641px) { .main .kpis.kpis--duo:not(:has(> :nth-child(3))) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Buchungsverhalten: 6 Kennzahlen am Desktop als 3 × 2 statt 4 + 2 */
@media (min-width: 900px) { .main .bhs:has(> :nth-child(6):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Vorausschau und Monatsprognose: 4 Werte als 2 × 2 statt 3 + 1 */
.rv-otb__dl:has(> :nth-child(4):last-child), .rv-prog__dl:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Lernphase: bei 3 Spalten füllt der letzte Wert die Reihe */
@media (min-width: 900px) { .rz__kv > :last-child:nth-child(3n + 2) { grid-column: span 2; } .rz__kv > :last-child:nth-child(3n + 1) { grid-column: 1 / -1; } }
/* Chalet-Liste zweispaltig: ungerade Zahl, letzte Zeile über die volle Breite */
@media (min-width: 760px) { .hl > li:last-child:nth-child(odd) { grid-column: 1 / -1; } }
/* Telefon: Raster mit fest 2 Spalten (341 bis 640 px); ungerade Kartenzahl, letzte Karte über die volle Breite */
@media (min-width: 341px) and (max-width: 640px) {
  .main .fi-tiles > :last-child:nth-child(odd), .main .kpis.rv-kpis:not(.rv-ov) > :last-child:nth-child(odd), .main .ovs-row > :last-child:nth-child(odd),
  .main .kpis.kpis--st > :last-child:nth-child(odd), .main .ovk-row > :last-child:nth-child(odd), .main .hl > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* Kennzahl-Kacheln in Panels: bis 480 px fest 2 Spalten, letzte ungerade Kachel über die volle Breite */
@media (max-width: 480px) and (min-width: 341px) {
  .main .kz { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .main .kz > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* ROAS-Motor R1 (01.11.2026): Kachel „ROAS-Ziel 4“ auf Werbung → Ergebnisse */
.rm__kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 12px 20px; margin: 14px 0 0; }
.rm__kv dt { font-size: var(--fs-caption); color: var(--muted); }
.rm__kv dd { margin: 2px 0 0; font-size: var(--fs-kpi-s); font-weight: 600; font-variant-numeric: tabular-nums; }
.rm__kv dd.rm__sub { font-size: var(--fs-caption); font-weight: 400; color: var(--muted); overflow-wrap: anywhere; }
.rm__tag { display: inline-block; margin-left: 4px; padding: 0 6px; border: 1px solid var(--line-soft); border-radius: 999px; font-size: var(--fs-caption); color: var(--muted); }
.rm__h3 { font-size: var(--fs-body); font-weight: 600; margin: 18px 0 6px; }
.rm__hebel { margin: 0; padding-left: 1.3em; display: grid; gap: 6px; }
.rm__hebel b { font-weight: 600; }
.rm__dna { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.rm__dna li { padding-left: 14px; position: relative; overflow-wrap: anywhere; }
.rm__dna li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.rm__dna li.rm__plus::before { background: var(--good, #1f8a4c); }
.rm__geb th:first-child { min-width: 10em; }

/* Feedback Johannes 02.11.2026 (Abschluss-Runde) */
/* Preiswächter: Empfehlung mit Handlungsbedarf (rotes Ausrufezeichen), für Eigentümer ohne Rot */
.pw-alert { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0 0; padding: 12px 14px; border: 1px solid #f1b8b4; border-radius: var(--r-m); background: #fdf1f0; color: var(--ink); font-size: var(--fs-caption); line-height: 1.5; }
.pw-alert__ico { flex: none; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #c8322b; color: #fff; font-weight: 700; font-size: 13px; line-height: 1; }
.pw-alert--soft { border-color: var(--line); background: var(--surface-2, #f6f7f9); }
.pw-alert--soft .pw-alert__ico { background: var(--ink-2); }
section.ovp + .pw-alert { margin: -8px 0 0; }
/* Seitenleiste: Bereiche des aktiven Punkts eingerückt mit senkrechtem Strich (Muster Hostinger); der aktive Bereich darunter trägt is-cur */
.side__sub { list-style: none; margin: 2px 0 6px 21px; padding: 0 0 0 12px; border-left: 1px solid var(--nv-line); display: grid; gap: 1px; }
.side__group .side__sub a { min-height: 34px; padding: 0 10px; font-weight: 500; font-size: var(--fs-caption); }
.side__group .side__sub a { background: none; color: var(--nv-item); font-weight: 500; }
.side__group .side__sub a.is-cur { background: var(--nv-active); color: var(--accent-ink); font-weight: 600; }
/* Monatswahl: jeder Monat in einer Zeile (Feedback 02.11.2026) */
.pchip__panel { width: min(340px, calc(100vw - 32px)); }
.pchip__months a { white-space: nowrap; padding: 0 8px; font-variant-numeric: tabular-nums; }
/* Übersicht: Reihe „<Monat> gebucht“ mit Überschrift über die volle Breite */
.ovs-mg { display: grid; gap: 10px; }
.ovs-row__h { margin: 4px 0 0; font-size: var(--fs-body); font-weight: 600; }
.ovs-row__h .muted { font-weight: 400; font-size: var(--fs-caption); }
.ovs-row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Chalets: Gruppen belegt (rot) und frei (grün) */
.hl__g { display: flex; align-items: center; gap: 8px; margin: 16px 0 0; font-size: var(--fs-caption); font-weight: 600; text-transform: none; }
.hl__g::before { content: ''; width: 10px; height: 10px; border-radius: 50%; }
.hl__g--busy::before { background: #c8322b; }
.hl__g--free::before { background: #1f7a4d; }
.hl__g--rest::before { border: 1.5px solid var(--muted); }
.hl__st--busy::before { background: #c8322b; }
.hl__st--free::before { border: 0; background: #1f7a4d; }
/* Jahresvergleich: Monate unter Vorjahr (Bernstein, nie Rot) */
.ovm__worse { display: inline-flex; align-items: center; gap: 8px; margin: 6px 0 0; padding: 4px 10px; border-radius: var(--r-pill); background: #FFF6E5; color: #7A4B00; font-size: var(--fs-caption); font-weight: 500; }
.ovm__worse-dot { width: 8px; height: 8px; border-radius: 50%; background: #D98B00; }
tr.is-worse > th, tr.is-worse > td { background: #FFF8EB; }
.tag--win { margin-left: 6px; background: #E7F4EC; color: #1F6B43; }
/* Tabellen-Symbol: Kreis mittig um das Symbol (vorher linksbündig, weil eine spätere Regel summary auf flex setzte) */
.main details.info > summary { display: grid; place-items: center; padding: 0; }
/* Tabelle hinter dem Tabellen-Symbol als schwebende Tafel über dem Diagramm (Feedback 02.11.2026: vorher drückte sie Kopf und Diagramm auseinander) */
.panel--v { position: relative; }
.ovm__tools > details.info--table[open] > .info__body, .panel--v > details.info--table[open] > .info__body { position: absolute; z-index: 40; top: 56px; right: 12px; width: min(560px, calc(100vw - 48px)); max-height: min(70vh, 560px); overflow: auto; margin: 0; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-float); }
.ovm__tools > details.info--table[open] > .info__body { top: 52px; right: 0; }
@media (max-width: 640px) { .ovm__tools > details.info--table[open] > .info__body, .panel--v > details.info--table[open] > .info__body { position: fixed; inset: auto 0 0 0; top: auto; width: auto; max-height: 75vh; border-radius: var(--r-m) var(--r-m) 0 0; } }
/* Direktbuchungen: eine Farbzuordnung für alle Wege wie in der Legende (Zeitraum Blau, Vorjahr Hellgrau); Website nur im Text hervorgehoben */
.dvt__b--cur .dvt__f, .dvt__r--web .dvt__b--cur .dvt__f, .dvt__sw--cur { background: #2A78D6; }
.dvt__b--prev .dvt__f, .dvt__r--web .dvt__b--prev .dvt__f, .dvt__sw--prev { background: #C9CDD4; }
/* Cloud 02.11.2026 · Leistungen-Neugestaltung: Kanal-Zeichen, volle Kachelreihen, Soll/Ist-Balken, Klee Chat und Telefon getrennt */
.marke { width: 22px; height: 22px; flex: none; display: inline-block; vertical-align: middle; }
.marke--l { width: 28px; height: 28px; }
h2.h-mark, h3.h-mark { display: flex; align-items: center; gap: 10px; }
h3.h-mark { gap: 8px; margin-bottom: 6px; }
h3.h-mark .marke { width: 20px; height: 20px; }
h3.h-mark .marke + .marke { margin-left: -4px; }
.lsysn li { align-content: start; }
.lsysn__m { display: flex; gap: 4px; margin-bottom: 6px; }
.lsysn__m .marke { width: 28px; height: 28px; }
/* Jede Kachelreihe voll: n Spalten, wenn Platz ist, sonst zwei Spalten, bei ungerader Zahl füllt die letzte Kachel die Reihe */
.lsum-c { container-type: inline-size; }
.main .sysn:where([class*="sysn--n"]) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.main .sysn--n1 { grid-template-columns: minmax(0, 1fr); }
.main .sysn--n3 > li:last-child, .main .sysn--n5 > li:last-child { grid-column: 1 / -1; }
@container (min-width: 520px) {
  .main .sysn--n3, .main .sysn--n5, .main .sysn--n6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .main .sysn--n3 > li:last-child { grid-column: auto; }
  .main .sysn--n5 > li:nth-child(4) { grid-column: span 1; }
  .main .sysn--n5 > li:last-child { grid-column: span 2; }
}
/* Runde 7 (V3): drei Leistungen schon ab 420 px nebeneinander (Übersicht bei 1440 px: Karte 488 px breit), keine halb leere Reihe */
@container (min-width: 420px) {
  .main .sysn--n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .main .sysn--n3 > li:last-child { grid-column: auto; }
}
@container (min-width: 760px) {
  .main .sysn--n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .main .sysn--n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .main .sysn--n5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .main .sysn--n6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .main .sysn--n5 > li:last-child { grid-column: auto; }
}
.lmeter__top { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.lmeter__p { font-weight: 600; color: var(--good); }
.lmeter__bar { height: 8px; border-radius: 4px; background: var(--track); margin-top: 6px; overflow: hidden; }
.lmeter__bar > span { display: block; height: 100%; background: var(--good); border-radius: 4px; }
section[aria-labelledby="h-lgbp"] g.st5__fg { fill: #FBBC05; }
.lklee__rest { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.main .lsysn, .main .sysn--list:where([class*="sysn--n"]) { row-gap: 10px; }
/* Cloud 02.11.2026 · Heute: Reinigungen der nächsten Tage unter dem Plan, Kontakt per Klick */
.hz-nx { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.hz-nx__l { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.hz-nx__l li { display: grid; grid-template-columns: 5.5em minmax(60px, 1fr) minmax(0, 1.4fr); gap: 10px; align-items: center; font-size: var(--fs-caption); }
.hz-nx__bar { height: 8px; border-radius: 4px; background: var(--track); overflow: hidden; }
.hz-nx__bar > span { display: block; height: 100%; background: var(--data); border-radius: 4px; }
.hz-kontakt { white-space: nowrap; }
.hzk { display: grid; gap: 10px; margin: 8px 0 0; }
.hzk > div { display: grid; grid-template-columns: minmax(7em, 10em) 1fr; gap: 12px; }
.hzk dt { color: var(--muted); }
.hzk dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 520px) { .hzk > div { grid-template-columns: 1fr; gap: 2px; } }
/* Cloud 02.11.2026 Feedback 2 · Buchungen: Vorjahr wirklich als Raute (vorher durch den Eckenradius rund), Verteilungen im Buchungsverhalten, Abkürzungen */
span.bul__prev, span.mk--prev, span.mk--prevcav, span.ml__prev { border-radius: 2px; }   /* 03.11.2026: Vorjahr überall als Raute, auch Anlaufphase (hohl) */
abbr[title] { text-decoration: underline dotted; text-underline-offset: 3px; cursor: help; }
div.bhd-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 12px 32px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
h3.bhd__t { font-size: var(--fs-body); margin: 0 0 8px; }
ul.bhd__l { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
ul.bhd__l > li { display: grid; grid-template-columns: 8.5em minmax(60px, 1fr) 3.2em; gap: 10px; align-items: center; font-size: var(--fs-caption); }
span.bhd__v { text-align: right; font-variant-numeric: tabular-nums; }
/* Feedback 2 · Richtung immer als Pfeil an Veränderungen (oben grün, unten Bernstein, nie Rot); Website-Zeile ohne eigene Farbe, die nicht in der Legende steht */
span.delta--up::before { content: "\2191\00a0"; }
span.delta--down::before { content: "\2193\00a0"; }
table.dvt b.nb__eigen, table.dvt tr.dvt__r--web span.dvt__v { color: inherit; }
ul.offers-next { margin: 8px 0 0; padding-left: 1.2em; display: grid; gap: 6px; }
abbr.hbl__t { text-decoration: underline dotted; text-underline-offset: 3px; cursor: help; }
/* Feedback 2 · Liquidität: zwei Balken je Woche (diese Wochen, Vorjahr) */
ul.fi-bars--vj span.fi-bars__t { display: grid; gap: 3px; height: auto; background: none; overflow: visible; }
ul.fi-bars--vj span.fi-bars__b { height: 8px; border-radius: 4px; }
span.fi-bars__b--vj { background: #C9CDD4; }
span.fi-bars__vj { display: block; font-weight: 400; color: var(--muted); font-size: var(--fs-caption); }
/* Feedback 2 · Finanzen: vier Kacheln immer als volle Reihe (2 × 2 bzw. 4 nebeneinander) */
div.fi-tiles--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1180px) { div.fi-tiles--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Feedback 2 · Mitbewerber: Farbskala immer sichtbar, Empfehlungen oben, Datenstand-Zeilen je Lauf */
span.rvm-zeile { display: block; }
ul.rvm-leg { margin: 10px 0 4px; }
span.rvc__dot--rot { background: var(--error); } span.rvc__dot--gelb { background: var(--warn); } span.rvc__dot--gruen { background: var(--good); } span.rvc__dot--grau { background: var(--line); }
span.rvc__dot--offen { background: none; border: 1.5px dashed var(--muted); }
ul.rvm-leg span.rvc__dot { display: inline-block; margin-right: 6px; vertical-align: 1px; }
ul.rvm-empf { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
ul.rvm-empf > li { display: grid; gap: 2px; padding: 10px 14px; border-radius: var(--r-s); background: var(--ivory); border-left: 4px solid var(--line); }
li.rvm-empf--gelb { border-left-color: var(--warn); } li.rvm-empf--rot { border-left-color: var(--error); }
p.rvg__links { margin: 4px 0; font-size: var(--fs-caption); }
/* Feedback 2 · Raten & Codes: mehr Abstand zwischen den Raten, Abschnitte mit Farbmarke */
ul.rvr-list { gap: 1.1em; }
ul.rvr-list > li.rvr { padding: 0.9em 1em; border: 1px solid var(--line-soft); border-radius: var(--r-m); background: var(--card); }
h3.rvx-gr { padding-left: 10px; border-left: 4px solid var(--line); margin-top: 1.6em; }
h3.rvx-gr--oeffentlich { border-left-color: var(--good); } h3.rvx-gr--portal { border-left-color: #5598E7; } h3.rvx-gr--privat { border-left-color: #8A919D; } h3.rvx-gr--entwurf { border-left-color: var(--warn); } h3.rvx-gr--hintergrund { border-left-color: var(--line); }
/* Feedback 2 · Monatsberichte mit Auszahlungen */
h2.sect-h { font-size: var(--fs-section); margin: 28px 0 8px; }
div.pay-years { margin: 8px 0; }
/* Feedback 2 · Monatsunterlagen: Erkennungsstand unter dem Status, gleiche Höhe; Abgleich je Monat einklappbar */
span.mu-st-note { display: block; margin-top: 2px; }
details.fi-rec { margin-top: 8px; } details.fi-rec > summary { cursor: pointer; font-weight: 600; padding: 6px 0; }
/* Feedback 3 (02.11.2026): Lernphase der Werbung, Frühindikatoren als volle Reihe (6, 3 oder 2 je Zeile), Kriterien nebeneinander */
ul.lph__krit { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--ink-2); }
ul.lph__krit > li { border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; background: var(--card); }
ul.lph__krit > li.is-ok { color: var(--good); border-color: var(--good); }
dl.lph__kv { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin: 10px 0 0; }
dl.lph__kv > div.lph__t { border: 1px solid var(--line); border-radius: var(--r-s); padding: 12px 14px; background: var(--card); min-width: 0; }
dl.lph__kv dt { font-size: var(--fs-caption); color: var(--muted); }
dl.lph__kv dd { margin: 4px 0 0; font-size: var(--fs-kpi-s); font-weight: 600; font-variant-numeric: tabular-nums; }
dl.lph__kv dd.rz__sub { font-size: var(--fs-caption); font-weight: 400; color: var(--muted); }
@media (max-width: 1100px) { dl.lph__kv { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { dl.lph__kv { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Feedback 3: Rendite der Werbung, Änderungen der Woche als Zahlenchips */
p.rm__woche { margin: 8px 0 0; font-size: 15px; } p.rm__woche b { font-size: var(--fs-kpi-s); font-variant-numeric: tabular-nums; }
ul.rm__chips { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--ink-2); }
ul.rm__chips > li { border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; background: var(--card); } ul.rm__chips b { font-variant-numeric: tabular-nums; }
/* Feedback 3: Hinweis zur Zuordnung (Datenschutz) unter den Kernzahlen der Werbung, ruhig ohne Warnfarbe */
aside.wa-hinweis { border: 1px solid var(--line); border-left: 4px solid var(--data); border-radius: var(--r-s); background: var(--card); padding: 12px 16px; margin: 12px 0 0; font-size: 14px; color: var(--ink-2); }
aside.wa-hinweis p { margin: 0; } aside.wa-hinweis p + p { margin-top: 6px; }
/* Feedback 3 (02.11.2026): Kampagnen und Anzeigen je Plattform mit Zeichen, Nummer je Kampagne, Schulnote als Etikett, Karten gleich hoch */
h3.plat-h { display: flex; align-items: center; gap: 8px; margin: 18px 0 0; font-size: 15px; }
h3.plat-h:first-child { margin-top: 8px; }
span.plat-h__n { margin-left: 4px; padding: 1px 8px; border-radius: 999px; background: var(--line-soft); font-size: 12px; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
span.kc__nr { display: inline-grid; place-items: center; min-width: 26px; height: 26px; border-radius: 999px; background: var(--ink); color: var(--card); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; flex: none; }
span.note-tag { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: var(--fs-caption); font-weight: 600; white-space: nowrap; border: 1px solid transparent; }
span.note-tag--sehr_gut { background: var(--good); color: #fff; }
span.note-tag--gut { background: var(--sage); color: var(--good); }
span.note-tag--befriedigend { background: var(--line-soft); color: var(--ink-2); }
span.note-tag--ausreichend, span.note-tag--schwach { background: var(--warn-wash); color: var(--warn); }
span.note-tag--offen { background: var(--card); color: var(--muted); border-color: var(--line); }
p.ak__grund { margin: 6px 0 0; font-size: var(--fs-caption); color: var(--muted); }
ul.ak-list { align-items: stretch; } ul.kc-list { align-items: stretch; }
/* Feedback 3: Plan je Kampagne, gleich hohe Karten nebeneinander */
div.cnp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19em), 1fr)); gap: 12px; margin-top: 12px; align-items: stretch; }
article.cnp { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-m); padding: 14px 16px; background: var(--card); min-width: 0; height: 100%; }
article.cnp h3 { margin: 2px 0 0; font-size: 16px; } article.cnp .eyebrow { margin: 0; }
p.cnp__live { margin: 6px 0 0; }
dl.cnp__kv { margin: 10px 0 0; display: grid; gap: 8px; } dl.cnp__kv dt { font-size: var(--fs-caption); color: var(--muted); } dl.cnp__kv dd { margin: 2px 0 0; font-size: 14px; }
/* Feedback 3: Werbung → Überblick, laufende Kampagnen als Liste mit Nummer und Plattform-Zeichen */
ul.wu-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 0; }
li.wu__k { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line-soft); }
li.wu__k:first-child { border-top: 0; }
span.wu__t { font-weight: 600; min-width: 0; overflow-wrap: anywhere; } span.wu__z { font-size: var(--fs-caption); color: var(--muted); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { li.wu__k { grid-template-columns: auto auto minmax(0, 1fr) auto; } span.wu__z { grid-column: 3 / -1; } }
/* Feedback 3: Werbemittel, aktive Anzeigen als Kartenraster statt einer Spalte mit viel Weißraum rechts */
ol.wb-changes.kr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22em), 1fr)); gap: 12px; list-style: none; padding: 0; align-items: stretch; }
ol.wb-changes.kr-grid > li.wb-item { border: 1px solid var(--line); border-radius: var(--r-m); padding: 12px 14px; background: var(--card); margin: 0; min-width: 0; }
ol.wb-changes.kr-grid .kr-vorschau { max-width: 100%; }
dl.lph__kv dd .muted { font-size: 14px; font-weight: 500; }
/* Feedback 3: Heatmap direkt auf der Seite Website, Höhe begrenzt (scrollbar) */
div.hm-wrap.hm-wrap--kompakt { max-height: 520px; overflow: auto; margin-top: 12px; }
/* Feedback 3: Länderkarte als Kachelkarte (Europa als Raster, übrige Welt als Reihe), Farbtiefe nach Besuchen */
figure.lk { margin: 8px 0 0; }
ul.lk__eu { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(9, minmax(0, 52px)); grid-auto-rows: 44px; gap: 4px; }
ul.lk__welt { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
ul.lk__welt > li.lk__t { width: 52px; height: 44px; }
li.lk__t { display: grid; place-content: center; text-align: center; border-radius: 6px; font-size: 11px; line-height: 1.15; color: var(--ink); background: color-mix(in srgb, var(--data) calc(var(--a, 0) * 100%), var(--card)); border: 1px solid var(--line-soft); font-variant-numeric: tabular-nums; }
li.lk__t b { font-size: 12px; } li.lk__t--leer { color: var(--muted); background: var(--bg, var(--card)); }
li.lk__t.lk__t--dunkel { color: #fff; }
p.lk__h { margin: 10px 0 0; font-size: var(--fs-caption); color: var(--muted); }
@media (max-width: 640px) { ul.lk__eu { grid-template-columns: repeat(9, minmax(0, 1fr)); grid-auto-rows: 34px; gap: 3px; } li.lk__t { font-size: 9px; } li.lk__t b { font-size: 10px; } ul.lk__welt > li.lk__t { width: 38px; height: 34px; } }
/* Feedback 3 (02.11.2026): breite Tabellen der Google-Suche: Höhe begrenzt, damit die waagerechte Scrollleiste immer im Bild ist; Kopf und
   erste Spalte bleiben stehen; am Computer volle Breite mit Umbruch in langen Adressen */
div.tablewrap.seo-scroll { max-height: min(75vh, 860px); overflow: auto; overscroll-behavior-x: contain; }
div.tablewrap.seo-scroll thead th { position: sticky; top: 0; z-index: 2; background: var(--card); }
div.tablewrap.seo-scroll tbody th[scope="rowgroup"], div.tablewrap.seo-scroll tbody tr > th:first-child { position: sticky; left: 0; z-index: 1; background: var(--card); }
div.tablewrap.seo-scroll table { width: 100%; }
@media (min-width: 1100px) { div.tablewrap.seo-scroll .mono { white-space: normal; overflow-wrap: anywhere; } }
/* Feedback 3: Klee Voice „Launching soon“ */
p.kv-soon { margin: 0 0 12px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--card); font-size: 14px; color: var(--ink-2); }
span.kv-soon__tag { display: inline-block; margin-right: 8px; padding: 2px 10px; border-radius: 999px; background: var(--ink); color: var(--card); font-size: 12px; font-weight: 700; letter-spacing: .02em; }
/* Feedback 4: Wer sieht was, ⓘ rechts neben dem Bereich, abgeleitete Bereiche grau */
span.rights__lrow { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; }
tr.rights__derived th, tr.rights__derived td { background: var(--ivory, var(--card)); color: var(--ink-2); }
@media (max-width: 640px) { table.rights tbody th[scope="row"], table.rights .rights__corner { min-width: 150px; max-width: 170px; } span.rights__label { font-size: 13px; } }
/* Feedback 4 (02.11.2026): Leitsatz „Your Smartest Move.“ unter dem Logo; kleine Marke im Seitenkopf rechts, nur am breiten Bildschirm */
.sig__claim { font-size: 12px; font-weight: 600; letter-spacing: .01em; color: var(--nv-ink, var(--ink-2)); }
.main .phead { grid-template-columns: minmax(0, 1fr); }
p.phead__brand { display: none; }
@media (min-width: 1100px) {
  p.phead__brand { display: flex; align-items: center; gap: 8px; margin: 0; grid-row: 2; grid-column: 1; justify-self: end; align-self: center; opacity: .55; pointer-events: none; }
  p.phead__brand img { width: 74px; height: auto; }
  p.phead__brand span { font-size: 11px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
  .main .phead > .phead__meta { grid-row: 2; grid-column: 1; padding-right: 190px; }
}

/* Runde 7 (V4): Letzte 7 Tage auf Mein Chalet, jede Kachelreihe voll. Feste Spalten je Anzahl statt auto-fit (bei 5 Kacheln war es 4 + 1).
   Ungerade Mengen teilen sich auf zwei volle Reihen mit gleich breiten Kacheln je Reihe (5 = 2 + 3, 7 = 3 + 4); ab 1200 px 5 in einer Reihe. */
@media (min-width: 900px) {
  .rz__kv.wbz__kv[class*="wbz__kv--n"] > * { grid-column: auto; }
  .wbz__kv--n1 { grid-template-columns: minmax(0, 1fr); }
  .wbz__kv--n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wbz__kv--n3, .wbz__kv--n6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wbz__kv--n4, .wbz__kv--n8 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .wbz__kv--n5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .rz__kv.wbz__kv.wbz__kv--n5 > * { grid-column: span 2; }
  .rz__kv.wbz__kv.wbz__kv--n5 > :nth-child(-n + 2) { grid-column: span 3; }
  .wbz__kv--n7 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .rz__kv.wbz__kv.wbz__kv--n7 > * { grid-column: span 3; }
  .rz__kv.wbz__kv.wbz__kv--n7 > :nth-child(-n + 3) { grid-column: span 4; }
}
@media (min-width: 1200px) {
  .wbz__kv--n5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .rz__kv.wbz__kv.wbz__kv--n5 > *, .rz__kv.wbz__kv.wbz__kv--n5 > :nth-child(-n + 2) { grid-column: auto; }
}
@media (min-width: 560px) and (max-width: 899px) {
  .wbz__kv[class*="wbz__kv--n"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rz__kv.wbz__kv[class*="wbz__kv--n"] > :last-child { grid-column: auto; }
  .rz__kv.wbz__kv.wbz__kv--n1 > :first-child, .rz__kv.wbz__kv.wbz__kv--n3 > :first-child, .rz__kv.wbz__kv.wbz__kv--n5 > :first-child, .rz__kv.wbz__kv.wbz__kv--n7 > :first-child { grid-column: 1 / -1; }
}

/* Runde 8 (Punkt 1): Chalet-Liste der Übersicht. Gruppenüberschrift („Heute belegt 7“) über die volle Breite, darunter die Chalets.
   Telefon: ein Chalet je Zeile über die volle Breite (Chalet und Nummer, Eigentümer, Status mit Punkt untereinander), lange Namen brechen um. */
.hl-wrap { display: grid; gap: 4px; }
.hl-grp .hl__g { margin-top: 12px; }
.hl-grp:first-child .hl__g { margin-top: 4px; }
.hl__name, .hl__owner { min-width: 0; overflow-wrap: anywhere; }
@media (min-width: 641px) { .hl-grp .hl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }   /* Desktop zweispaltig wie bisher */
@media (max-width: 640px) {
  .main .hl-grp .hl { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .main .hl-grp .hl > li { grid-column: auto; }
  .main .hl-grp .hl__row { grid-template-columns: minmax(0, 1fr); grid-template-areas: "name" "owner" "status"; gap: 2px; padding: 10px 0; min-height: 44px; }
  .main .hl-grp .hl__name { font-size: var(--fs-body); }
  .main .hl-grp .hl__owner, .main .hl-grp .hl__status { font-size: var(--fs-caption); text-align: left; }
  .main .hl-grp .hl__st { white-space: normal; }
}

/* Runde 8 (Punkt 2): Suche im Dashboard. Feld oben in der Seitenleiste (Telefon: im Menü), Trefferliste als weißes Feld darunter.
   Ohne JavaScript verborgen. Eingeklappte Seitenleiste: nur das Symbol, mit Fokus öffnet sich das Feld über der Seite. */
.srch { display: none; position: relative; z-index: 30; margin: 0 12px 12px; }
html.js .srch { display: block; }
.srch__box { position: relative; display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 10px; border: 1px solid var(--nv-line, #E6E8EC); border-radius: var(--r-s); background: #fff; color: var(--muted); }
.srch__box > .ico { flex: 0 0 auto; width: 18px; height: 18px; }
.srch__box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); }
.srch__in { flex: 1 1 auto; min-width: 0; height: 38px; border: 0; padding: 0; background: transparent; color: var(--ink); font: 400 var(--fs-body)/1.2 var(--font-ui); outline: none; }
.srch .srch__in:focus, .srch .srch__in:focus-visible { outline: none; box-shadow: none; }   /* Fokusring sitzt an der Box */
.srch__in::placeholder { color: var(--muted); opacity: 1; }
.srch__kbd { flex: 0 0 auto; padding: 1px 6px; border: 1px solid var(--nv-line, #E6E8EC); border-radius: 6px; background: var(--ivory, #F7F7F5); color: var(--muted); font: 600 11px/1.6 var(--font-ui); white-space: nowrap; }
.srch__box:focus-within .srch__kbd { display: none; }
.srch__list { position: absolute; top: calc(100% + 6px); left: 0; width: max(100%, 380px); max-height: min(60vh, 440px); overflow-y: auto; margin: 0; padding: 6px; list-style: none; background: #fff; border: 1px solid var(--line, #E6E8EC); border-radius: var(--r-m); box-shadow: 0 12px 32px rgba(17, 24, 39, .14), 0 2px 6px rgba(17, 24, 39, .06); }
.srch__list[hidden] { display: none; }
.srch__opt { display: grid; gap: 2px; padding: 9px 12px; border-radius: var(--r-s); cursor: pointer; color: var(--ink); }
.srch__opt[aria-selected="true"] { background: var(--accent-wash); box-shadow: inset 3px 0 0 var(--accent); }
.srch__opt:hover { background: var(--accent-hover); }
.srch__t { font-weight: 600; overflow-wrap: anywhere; }
.srch__m { font-size: var(--fs-caption); color: var(--muted); overflow-wrap: anywhere; }
.srch__none { padding: 10px 12px; color: var(--muted); font-size: var(--fs-caption); }
/* Die Seitenleiste ist sticky (eigene Stapelebene): über die Hauptfläche heben, sonst liegen deren Inhalte über der Trefferliste */
@media (min-width: 1024px) { .side { z-index: 20; } }
@media (min-width: 1024px) {
  html.nav-c .srch { width: 48px; margin: 0 auto 10px; }
  html.nav-c .srch__box { justify-content: center; padding: 0; }
  html.nav-c .srch__in { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; }
  html.nav-c .srch__kbd { display: none; }
  html.nav-c .srch:focus-within .srch__box { width: 320px; justify-content: flex-start; padding: 0 10px; box-shadow: 0 12px 32px rgba(17, 24, 39, .14); }
  html.nav-c .srch:focus-within .srch__in { position: static; opacity: 1; cursor: text; }
}
@media (max-width: 1023px) {
  .srch__kbd { display: none; }
  .srch__list { position: static; width: auto; max-height: none; margin-top: 6px; box-shadow: 0 4px 16px rgba(17, 24, 39, .10); }
  .srch__in { font-size: 16px; }   /* iOS: kein Zoom beim Fokus */
  .srch__opt { min-height: 44px; align-content: center; }
}

/* Cloud-Runde 8: Übersicht der Eigentümer, zwei Blöcke (ganzes Feriendorf, eigenes Haus) mit denselben Karten */
.ovo { display: grid; gap: 16px; }
.ovo + .ovo, .ovo + .panel { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); }
.ovo__h { margin: 0; font-size: var(--fs-section); }
.ovo__sub { margin: -12px 0 0; }

/* Cloud-Runde 8 (M40): „Für Sie erledigt“ auf Mein Chalet aufklappbar */
.mc-erl__s { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 12px; cursor: pointer; list-style: none; min-height: 44px; }
.mc-erl__s::-webkit-details-marker { display: none; }
.mc-erl__s h2 { margin: 0; }
.mc-erl__s .note { grid-column: 1; margin: 0; }
.mc-erl__s::after { content: ''; grid-column: 2; grid-row: 1 / span 2; width: 10px; height: 10px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .15s; }
.mc-erl__d[open] > .mc-erl__s::after { transform: rotate(-135deg); }
.mc-erl__d[open] > .mc-erl__s { margin-bottom: 12px; }

/* Cloud-Runde 8 (M29): Empfehlungen nach Art gegliedert, Kacheln springen zu den Maßnahmen */
.emk-gr { margin: 16px 0 6px; font-size: var(--fs-caption); font-weight: 600; color: var(--ink-2); }
.emk-gr:first-child { margin-top: 4px; }
a.emk-k--link { color: inherit; text-decoration: none; border-radius: var(--r-s); }
a.emk-k--link:hover .emk-k__go, a.emk-k--link:focus-visible .emk-k__go { text-decoration: underline; }
.emk-k__e { font-size: var(--fs-caption); color: var(--muted); }
.emk-k__go { margin-top: 4px; font-size: var(--fs-caption); font-weight: 600; color: var(--accent); }

/* Cloud-Runde 8 (M36, M38): Super-Admin → Lage */
.lg-ampel { border-left: 4px solid var(--good); }
.lg-ampel--warn { border-left-color: var(--warn); }
.lg-ampel--error { border-left-color: var(--error); background: #FEF3F2; }
.lg-ampel__k { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.lg-ampel__k h2 { margin: 0; font-size: var(--fs-section); }
.lg-ampel__s { margin: 6px 0 0; color: var(--ink-2); }
.lg-ampel__go { margin: 12px 0 0; font-weight: 600; }
.lg-nf, .lg-ps { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.lg-p { padding: 10px 12px; border: 1px solid var(--line-soft); border-radius: var(--r-s); background: #fff; }
.lg-p--err { border-color: #FDA29B; }
.lg-p__h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.lg-p__g { margin: 4px 0 0; overflow-wrap: anywhere; }
.lg-ks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
@media (min-width: 900px) { .lg-ks { grid-template-columns: repeat(3, minmax(0, 1fr)); } }   /* 6 Kacheln: 3 + 3 bzw. 2 + 2 + 2 */
.lg-k { display: grid; gap: 2px; align-content: start; min-height: 96px; padding: 12px 14px; border: 1px solid var(--line-soft); border-radius: var(--r-m); background: #fff; color: var(--ink); text-decoration: none; }
.lg-k:hover { border-color: var(--accent); }
.lg-k--warn { border-color: #FEC84B; background: #FFFAEB; }
.lg-k--err { border-color: #FDA29B; background: #FEF3F2; }
.lg-k__t { font-size: var(--fs-caption); color: var(--muted); font-weight: 600; }
.lg-k__v { font-size: var(--fs-kpi-s); font-weight: 600; font-variant-numeric: tabular-nums; }
.lg-k__s { font-size: var(--fs-caption); color: var(--ink-2); }
.lg-band a { font-weight: 600; }

/* Cloud-Runde 8 (M34): Aufgaben heute, Knöpfe nebeneinander mit Abstand */
.aufg-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 12px; }
.aufg-actions form { margin: 0; display: contents; }
.aufg-actions .aufg-btn { min-height: 44px; min-width: 112px; justify-content: center; }
.aufg-never { margin-top: 6px; }
@media (max-width: 420px) { .aufg-actions .aufg-btn { flex: 1 1 0; min-width: 0; } }

/* Cloud-Runde 8 (M32): Feedback */
.fb-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; }
.fb-list li { padding: 12px 14px; border: 1px solid var(--line-soft); border-radius: var(--r-s); }
.fb-list li.is-done { opacity: .7; }
.fb-t { margin: 0 0 4px; white-space: pre-wrap; overflow-wrap: anywhere; }

/* Cloud-Runde 8 (M11, M14): Statuszeile immer sichtbar, darf auf schmalen Karten zweizeilig werden (nie abgeschnitten) */
.ovk__status { white-space: normal; overflow: visible; align-items: flex-start; }
.ovk__status span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ovk__status svg { margin-top: 1px; }

/* Cloud-Runde 8 (M21): Monate unter Vorjahr gut sichtbar, Hinweis in der Legendenzeile */
.legend .ovm__worse { margin: 0; padding: 2px 10px; }
tr.is-worse > th, tr.is-worse > td { background: #FFF1DA; }
tr.is-worse > th:first-child { box-shadow: inset 4px 0 0 #D98B00; color: #7A4B00; font-weight: 600; }

/* Cloud-Runde 8 (M8): „Wer sieht was“, ⓘ in der Zeile neben dem Text statt absolut über der Zeilenlinie */
table.rights .rights__lrow > .info > .pop__btn { position: static; width: 32px; height: 32px; flex: none; }
table.rights .rights__lrow { align-items: center; }
/* Cloud-Runde 8 (M22): Heute, Anreisen und Abreisen nebeneinander und gleich hoch */
@media (min-width: 1100px) { .hz-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; } .hz-pair > * { height: 100%; } }
/* Pace je Anreisemonat: Fläche hell statt schwarz; gestrichelte Legende als Strich */
.ar__area { fill: #2a78d6; fill-opacity: .08; }
.main .legend .sw.rv-sw--dash { width: 16px; height: 2px; border-radius: 0; }
/* Heatmap: Legende im Kopf nicht unter dem Tabellen-Symbol (Cloud-Runde 8, Prüfbericht Desktop) */
.panel__head .hm-legend { margin-right: 56px; }
/* Cloud-Runde 8 (M16): mit Maus liegt die Verlaufskurve über der Klickfläche der Karte, damit der Tageswert beim Überfahren erscheint;
   ein Klick auf die Kurve führt weiter zur Detailseite (v2.js) */
@media (hover: hover) and (pointer: fine) {
  .ovk .ovk__curve, .kpi--st .kpi__curve { position: relative; z-index: 2; cursor: pointer; }
}

/* Cloud-Runde 8 (M10): Kopfzeile am Telefon fest und dünner (48 px), beim Scrollen ein leichter Schatten statt Ausblenden */
@media (max-width: 1023px) {
  .topbar { min-height: 48px; padding: env(safe-area-inset-top) 2px 0 14px; }
  .topbar img { width: 112px; }
  .topbar.is-hidden { transform: none; }
  .topbar.is-scrolled { box-shadow: 0 1px 0 var(--line-soft), 0 4px 12px rgba(17, 24, 39, .06); }
  .side { width: min(320px, calc(100vw - 56px)); }
  .scrim { background: rgba(26, 31, 43, .32); }
}

/* Cloud-Runde 8 (M18): Icons an den Kennzahlen */
.kz-ico { width: 16px; height: 16px; flex: none; margin-right: 7px; vertical-align: -3px; color: var(--accent); opacity: .85; }
.ovk__label, .ovs__label { display: inline-flex; align-items: center; }

/* Cloud-Runde 8 (M1): nie waagerechtes Scrollen der Seite; lange Wörter und Adressen brechen um */
html, body { overflow-x: clip; }
.main { overflow-wrap: anywhere; }
/* Mobil-Prüfung: Wochenmail-Vorschau mit langer Adresse */
.fi-mail { min-width: 0; overflow-wrap: anywhere; }

/* Cloud-Runde 8 (M6): Nachfrage der nächsten Wochen, eigener Balken (grau Spanne, blau gebucht, Strich erwartet); Telefon als Zeilenliste */
.cprog__track { position: relative; display: block; height: 10px; border-radius: 5px; background: var(--line-soft); overflow: hidden; }
.cprog__track .cprog__band { top: 0; height: 100%; transform: none; border-radius: 0; background: rgba(28, 92, 171, .16); }
.cprog__ist { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent); border-radius: 5px; }
.cprog__p50 { position: absolute; top: -2px; bottom: -2px; width: 2px; margin-left: -1px; background: var(--ink); }
.cprog__k { display: none; }
@media (max-width: 640px) {
  .cprog, .cprog tbody { display: block; } .cprog thead { display: none; }
  .cprog tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 12px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
  .cprog th[scope="row"] { grid-column: 1 / -1; padding: 0; font-weight: 600; text-align: left; }
  .cprog td { padding: 0; border: 0; text-align: left; font-size: var(--fs-caption); }
  .cprog__k { display: inline; color: var(--muted); }
  .cprog td.cprog__bar { grid-column: 1 / -1; width: auto; min-width: 0; padding-top: 4px; }
}
/* Cloud-Runde 8 (M25): Preislage farbig (unter Marktmitte blau, darüber bernstein, Mitte neutral) */
.kz__i--unter { background: var(--accent-wash); border-radius: var(--r-m); box-shadow: inset 3px 0 0 var(--accent); }
.kz__i--unter .kz__v { color: var(--accent-ink); }
.kz__i--ueber { background: #FFF6E5; border-radius: var(--r-m); box-shadow: inset 3px 0 0 #D98B00; }
.kz__i--ueber .kz__v { color: #7A4B00; }
.kz__i--mitte { background: var(--good-wash); border-radius: var(--r-m); box-shadow: inset 3px 0 0 var(--good); }
.kz__i--unter, .kz__i--ueber, .kz__i--mitte { padding: 10px 12px; }
/* Cloud-Runde 8 (M14): Telefon, gleiche Zeilenhöhen in jeder Karte einer Reihe (Chip unter der Zahl, zweizeilige Namen) */
@media (max-width: 640px) {
  .main .ovk-row > .ovk .ovk__row { min-height: 66px; justify-content: flex-start; }
  .main .ovs-row > .ovs .ovk__head, .main .ovk-row > .ovk .ovk__head { min-height: 2.9em; align-items: flex-start; }
  .main .ovs__label, .main .ovk__label { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .main .ovs__label .kz-ico, .main .ovk__label .kz-ico { display: none; }
}
/* Cloud-Runde 8 (M17): Kurvenlegende über den Karten, etwas kräftiger */
.ovk-note--top { margin: -6px 0 2px; color: var(--ink-2); font-weight: 500; }
.ovk-note--top .lg { width: 20px; }

/* Cloud-Runde 8: Google-Suche im Monat (wie Googles Monatsmail) */
.gscm-ks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
@media (min-width: 900px) { .gscm-ks { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.gscm-k { display: grid; gap: 2px; align-content: start; padding: 12px 14px; border: 1px solid var(--line-soft); border-radius: var(--r-m); }
.gscm-k__k { font-size: var(--fs-caption); color: var(--muted); font-weight: 600; }
.gscm-k__v { font-size: var(--fs-kpi-s); font-weight: 600; font-variant-numeric: tabular-nums; }
.gscm-k__s { font-size: var(--fs-caption); color: var(--ink-2); }
.gscm-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px 28px; margin-top: 18px; }
@media (min-width: 900px) { .gscm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gscm-l h3 { margin: 0; font-size: var(--fs-body); }
.gscm-l .note { margin: 2px 0 6px; }
.gscm-list, .gscm-bars, .gscm-typ { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.gscm-list li, .gscm-typ li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-top: 1px solid var(--line-soft); }
.gscm-list__k { min-width: 0; overflow-wrap: anywhere; }
.gscm-list__v { font-variant-numeric: tabular-nums; }
.gscm-bars li { display: grid; grid-template-columns: 7.5em minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.gscm-bars__b { height: 8px; border-radius: 4px; background: var(--line-soft); overflow: hidden; }
.gscm-bars__b i { display: block; height: 100%; background: var(--accent); }
.gscm-typ { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 18px; }
.gscm-typ li { flex-direction: column; gap: 2px; border: 1px solid var(--line-soft); border-radius: var(--r-s); padding: 10px 12px; }

/* 03.11.2026 (Johannes): Kurven in einer Kartenreihe auf derselben Höhe. Jede Stil-Karte hat fünf Zeilen (Kopf, Wert, Zusatz, Kurve, Vergleich),
   per Subgrid teilen sich Karten einer Reihe die Zeilenhöhen. Ohne Subgrid bleibt die bisherige Darstellung. */
@supports (grid-template-rows: subgrid) {
  .main .kpi--st { display: grid; grid-template-rows: subgrid; grid-row: span 5; row-gap: 4px; align-content: start; }
  .main .kpi--st > .info { grid-row: 1; grid-column: 1; }
  .main .kpi--st > .kpi__sub:empty { margin-block: 0; }
}
/* ---------------------------------------------------------------- Controlling (AS Holding, 03.11.2026): ruhig, zahlenlastig */
.ct-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 16px; }
.ct-act { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.ct-act .ct-pdf { min-height: 40px; padding: 0 14px; }
.ct-root { display: grid; gap: 16px; }
.ct-root > .panel { margin: 0; }
.ct { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ct th, .ct td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.ct thead th { font-size: var(--fs-caption); font-weight: 600; color: var(--ink-2); }
.ct td.n, .ct th.n { text-align: right; }
.ct tbody th { font-weight: 500; }
.ct tr.is-total th, .ct tr.is-total td { font-weight: 700; border-bottom: 0; }
.ct td.ct-neg { color: #B54708; font-weight: 600; }
.ct-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 900px) { .ct-grid { grid-template-columns: minmax(0, 1fr); } }
.ct .ct-p, .ct .ct-kz { display: none; }
.ct tbody th { word-break: normal; overflow-wrap: normal; hyphens: none; }
@media (max-width: 640px) {
  .ct th, .ct td { padding: 8px 5px; font-size: var(--fs-caption); }
  .ct th:first-child, .ct td:first-child { padding-left: 0; }
  .ct th:last-child, .ct td:last-child { padding-right: 0; }
  .ct .ct-pc, .ct .ct-lg { display: none; }
  .ct .ct-kz { display: inline; }
  .ct .ct-p { display: block; font-size: 11px; font-weight: 500; opacity: .85; }
}
/* Druckansicht: eigenes Dokument ohne Menü, A4 hoch */
.cdruck { background: #fff; color: #1A1F2B; margin: 0; }
.cdruck__bar { display: flex; justify-content: center; padding: 16px; background: var(--bg, #F6F7F9); border-bottom: 1px solid var(--line); }
.cdruck__page { box-sizing: border-box; width: 210mm; max-width: 100%; margin: 0 auto; padding: 14mm 14mm 12mm; }
.cdruck__kopf { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 10px; border-bottom: 2px solid #1A1F2B; }
.cdruck__kunde { height: 40px; width: auto; }
.cdruck__ww { height: 10px; width: auto; }
.cdruck h1 { margin: 14px 0 4px; font-size: 22pt; }
.cdruck__meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 14px; color: #5B6270; font-size: 10pt; }
.cdruck .panel { box-shadow: none; border: 1px solid #DDE1E7; margin: 0 0 10px; padding: 10px 12px; break-inside: avoid-page; }
.cdruck .panel h2 { font-size: 12pt; margin: 0; }
.cdruck .ct { table-layout: fixed; }
.cdruck .ct th:first-child { width: 34%; }
.cdruck .ct th, .cdruck .ct td { padding: 5px 8px; font-size: 9.5pt; }
.cdruck .ct-grid { grid-template-columns: minmax(0, 1fr); gap: 6px; }
.cdruck__fuss { margin-top: 12px; color: #5B6270; font-size: 8.5pt; }
@media print {
  @page { size: A4 portrait; margin: 12mm 14mm; }
  .cdruck__bar { display: none !important; }
  .cdruck__page { width: auto; padding: 0; }
  .cdruck .ct td.ct-neg { color: #B54708; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

.topbar__brand { display: inline-flex; align-items: center; min-height: 44px; color: inherit; text-decoration: none; }   /* 03.11.2026: Logo am Telefon führt zur Übersicht */
/* Helge & Rudi service workspace */
.hr-service {--hr-ink:#172b46;--hr-muted:#53657a;--hr-line:#d8e1ea;--hr-accent:#194eb3;color:var(--hr-ink);overflow-wrap:anywhere;min-width:0;max-width:1480px;margin:auto;font-variant-numeric:tabular-nums}
.hr-service h1 {font-size:clamp(1.65rem,3vw,2.55rem);letter-spacing:-.04em;margin:.9em 0 .45em;line-height:1.12}
.hr-service h2 {font-size:1.17rem;letter-spacing:-.02em;margin:1.35rem 0 .75rem}
.hr-service h3 {font-size:1rem;margin:.8rem 0 .4rem}
.hr-service small,.hr-footnote,.hr-empty {color:var(--hr-muted)}
.hr-brandhead {display:flex;align-items:center;flex-wrap:wrap;gap:.5rem 1rem;padding:.8rem 1.15rem;border-radius:14px;background:linear-gradient(105deg,#15253d,#253d59);color:white}
.hr-brandhead a {display:flex;align-items:center;gap:.65rem;min-height:48px;color:white;text-decoration:none}
.hr-brandhead a+a {padding-left:1rem;border-left:1px solid #677789}
.hr-brandhead img {width:58px;height:44px;object-fit:contain;background:#fff;border-radius:7px;padding:3px}
.hr-brandhead strong,.hr-brandhead small {display:block}
.hr-brandhead small {color:#d0dce8;font-size:.76rem}
.hr-brandhead .hr-environment {margin-left:auto}
.hr-search>div,.hr-brands,.hr-toolbar,.hr-filter,.hr-row-top,.hr-channel {display:flex;align-items:center;gap:.6rem}
.hr-search {margin:.9rem 0;max-width:55rem}
.hr-search label,.hr-toolbar label,.hr-filter label,.hr-actions label {display:grid;gap:.3rem;font-size:.83rem;font-weight:600}
.hr-search label {margin-bottom:.4rem}
.hr-service :is(input,textarea,select,button) {font:inherit;max-width:100%;min-height:44px;border-radius:7px;border:1px solid #afbdcc;background:white;color:var(--hr-ink);padding:.45rem .7rem}
.hr-service button {cursor:pointer;font-weight:600}
.hr-search input[type=search] {min-width:0;flex:1}
.hr-service .hr-search button,.hr-service .hr-actions button[value="draft"] {background:var(--hr-accent);color:white;border-color:var(--hr-accent)}
.hr-brands,.hr-toolbar,.hr-filter,.hr-row-top {flex-wrap:wrap}
.hr-brands {margin:.75rem 0 1.1rem;gap:.25rem}
.hr-brands a,.hr-back,.hr-queue header a {display:inline-flex;align-items:center;min-height:44px;text-decoration:none}
.hr-brands a {border:1px solid transparent;border-radius:7px;padding:0 .85rem;color:var(--hr-muted)}
.hr-brands a[aria-current] {background:#e4edff;border-color:#bacfee;color:#16418a;font-weight:600}
.hr-toolbar,.hr-filter {align-items:end;margin:.8rem 0}
.hr-kpis {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem;margin:1rem 0 1.4rem}
.hr-kpis>* {display:grid;align-content:start;gap:.4rem;background:white;border:1px solid var(--hr-line);border-radius:12px;padding:1rem 1.15rem;color:inherit;text-decoration:none;box-shadow:0 2px 5px #10263a06}
.hr-kpis span {color:var(--hr-muted);font-size:.86rem;font-weight:600}
.hr-kpis strong {font-size:clamp(1.55rem,2.3vw,2rem);line-height:1.2;letter-spacing:-.05em}
.hr-kpis a:hover,.hr-queue header a:hover {color:var(--hr-accent)}
.hr-queue,.hr-panel,.hr-ticket>aside,.hr-ticket>section,.hr-ticket>details {background:white;border:1px solid var(--hr-line);border-radius:12px;min-width:0}
.hr-queue,.hr-panel {margin:.8rem 0;overflow:hidden}
.hr-panel {padding:1rem 1.15rem}
.hr-panel h2,.hr-ticket h2:first-child {margin-top:0}
.hr-queue header {display:flex;justify-content:space-between;align-items:center;padding:.25rem 1rem}
.hr-queue header h3 {margin:0}
.hr-brand,.hr-state {display:inline-flex;align-items:center;gap:.4rem;padding:.25rem .55rem;border-radius:5px;font-size:.79rem;font-weight:600;width:fit-content;line-height:1.4}
.hr-brand--helge {background:#e1efe4;color:#254e37}
.hr-brand--rudi {background:#fff0df;color:#724119}
.hr-state {background:#edf0f4;color:#405268}
.hr-state:before {content:'';width:.45rem;height:.45rem;border-radius:50%;background:currentColor;flex:none}
.hr-state--draft {background:#e7edff;color:#344f96}
.hr-state--team {background:#fff0d9;color:#825317}
.hr-list {overflow:hidden;background:white;border:1px solid var(--hr-line);border-radius:10px}
.hr-queue .hr-list {border-width:1px 0 0;border-radius:0}
.hr-row,.hr-list-head {display:grid;grid-template-columns:minmax(10rem,1fr) minmax(8.5rem,.48fr) minmax(8rem,.33fr);align-items:center;gap:.75rem;padding:.75rem 1rem}
.hr-list-head {background:#f3f6fa;font-size:.78rem;font-weight:600;color:var(--hr-muted);padding-block:.55rem}
.hr-row {color:inherit;text-decoration:none;border-top:1px solid var(--hr-line)}
.hr-row:hover,.hr-row:focus-visible {background:#f1f6ff}
.hr-conversation {display:grid;gap:.22rem}
.hr-conversation>b {font-size:1rem}
.hr-conversation>span,.hr-row time {font-size:.86rem;color:var(--hr-muted)}
.hr-row time small,.hr-row-top time small {display:block}
.hr-channel {display:inline-flex;gap:.25rem;white-space:nowrap}
.hr-channel .ico {width:14px;height:14px}
.hr-ticket {display:grid;grid-template-columns:minmax(11rem,.8fr) minmax(18rem,1.65fr) minmax(12rem,.82fr);gap:.85rem;align-items:start;margin-top:1.2rem}
.hr-ticket>aside,.hr-ticket>section,.hr-ticket>details {padding:1rem}
.hr-ticket aside .hr-list {border:0}
.hr-ticket aside .hr-row {grid-template-columns:1fr;padding:.7rem 0;gap:.3rem}
.hr-ticket aside .hr-list-head,.hr-ticket aside time {display:none}
.hr-ticket summary {min-height:44px;cursor:pointer;font-weight:600}
.hr-ticket article {border-bottom:1px solid var(--hr-line);padding:0 0 1rem}
.hr-ticket article p {padding:.7rem .85rem;border-radius:8px;background:#f3f6fa}
.hr-ticket article p:last-child {background:#edf2fe;color:#253d66}
.hr-actions {display:grid;gap:.6rem;margin-top:1rem}
.hr-actions textarea {min-height:6rem;width:100%;font-weight:400}
.hr-report-list a,.hr-meter {display:grid;grid-template-columns:minmax(8rem,1.5fr) 1fr auto;gap:1rem;align-items:center;padding:.7rem 0;border-top:1px solid var(--hr-line);color:inherit;text-decoration:none}
.hr-report-list small {display:block}
.hr-meter meter {width:100%;height:1.1rem;accent-color:var(--hr-accent)}
.hr-empty {padding:.9rem}
@media(max-width:1050px){.hr-ticket {grid-template-columns:minmax(0,1.7fr) minmax(12rem,1fr)}.hr-ticket aside {display:none}.hr-kpis {grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.hr-ticket {grid-template-columns:1fr}.hr-brandhead {padding:.65rem;gap:.65rem}.hr-brandhead a+a {padding-left:.5rem}.hr-brandhead img {width:43px;height:37px}.hr-brandhead strong {font-size:.86rem}.hr-environment {width:100%}.hr-list-head {display:none}.hr-row {grid-template-columns:1fr auto;padding:.7rem}.hr-conversation {grid-column:1/-1}.hr-row time small {display:inline;margin-left:.3rem}.hr-kpis>* {padding:.8rem}.hr-service :is(select,input,textarea) {font-size:1rem}.hr-report-list a {grid-template-columns:1fr auto}.hr-report-list a>span:first-child {grid-column:1/-1}.hr-meter {grid-template-columns:minmax(5rem,1fr) 1fr auto}}
/* Zielwerte (05.11.2026): zwölf Monatsanteile im Raster */
.zw-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin: 8px 0 12px; }
.zw-grid input { width: 100%; }
@media (max-width: 640px) { .zw-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }