/* ═══════════════════════════════════════════════════════════════════
   UPC COOLTEC — Zentrales Design-System
   style.css  |  Version 1.17 - 13.10.2026 (.pv-cb-* nach pv_chat_baustein.css, gemeinsamer Baustein mit dem Admin-Assistenten)
   style.css  |  Version 1.16 - 13.10.2026 (.pv-cb-zeile: Chat-Eingabezeile mit Mikrofon, Pegelbalken, Kreuz, Haken, Sendepfeil)
   style.css  |  Version 1.15 - 04.10.2026 (Hilfetext mit Zeichnung am .feld-info, Kette Assistent 04)
   style.css  |  Version 1.14 - 04.10.2026 (.pv-cb-* Wizard-Assistent, Kette Assistent 01)
   style.css  |  Version 1.13 - 21.08.2026 (.feld-info allgemein)
     v1.13: .feld-info / .feld-info-text (Info-Symbol am Feld-Label) aus dem
            <style> von wizard_schritt2.html hierher gezogen. Die Traufhoehe,
            fuer die es gebaut wurde, steht seit heute in Schritt 4 — und ein
            zweites Mal ins Markup kopieren waere der Anfang der naechsten
            Doppelung. Optik unveraendert.
   style.css  |  Version 1.12 - 21.08.2026 (EINE Wizard-Breite)
     v1.12: Die Inhaltsbreite der Wizard-Schritte stand an DREI Stellen:
            .bs-page (Schritt 1), zwei Inline-Wrapper (Schritt 4 und 7) und
            der 1400er-Default von .wizard-main (alle uebrigen). Jetzt an
            EINER: --bs-page-max in bausteine.css, gelesen ueber den neuen
            Token --wizard-breite. .wizard-main UND .wizard-header lesen
            denselben Wert, damit Kopfzeile und Inhalt fluchten. Ausnahme
            fuer Schritte, die Breite brauchen: Klasse .wizard-breit am
            <body> (nur Schritt 2, Satellitenkarte) -> --bs-page-max-breit.
            --max-width (1400px) bleibt unveraendert; es gehoert .container
            und dem Admin, NICHT dem Wizard.
   style.css  |  Version 1.11 - 08.06.2026 (Pille aus dem Fluss -> Stepper fix)
     v1.11: Stepper "wanderte" je nach Pille (gefuellt 1/3/4 nach rechts, leer
            2/5 zentriert), weil die Pille seit v1.9 IM FLUSS (order:-1) ueber
            Auto-Margins den Stepper verschob. FIX: .pf-zaehler-row ->
            position:absolute (left:space-xl, top auf Kreis-Mitte) -> Pille
            nimmt keine Flussbreite mehr ein, .wizard-steps zentriert in der
            VOLLEN Breite -> Stepper-Position auf jedem Schritt IDENTISCH.
            v1.10 (.wizard-steps flex:0 1 760px) beibehalten. Bis 1120px geht
            die Pille wieder in den Fluss (zentriert ueber dem Stepper), damit
            sie den voll-breit zentrierten Stepper nicht ueberlappt. Nur
            style.css (R68); Markup/JS unveraendert.
   style.css  |  Version 1.10 - 08.06.2026 (Stepper-Abstand-Fix nach v1.9)
     v1.10: REGRESSION aus v1.9: .wizard-progress->display:flex machte
            .wizard-steps zum Flex-Item mit flex-basis:auto (= Inhaltsbreite,
            < 760px); margin:0 auto blockierte flex-grow -> Stepper schrumpfte,
            Labels ueberlappten. FIX: .wizard-steps flex:0 1 760px (definite
            Verteilungsbreite, schrumpft nur bei Platzmangel) -> Standardabstand
            wie vor v1.9 wieder hergestellt. Pille bleibt links inline (v1.9
            NICHT zurueckgenommen), Header weiter einheitlich hoch. Nur
            .wizard-steps geaendert (R68).
   style.css  |  Version 1.9 - 08.06.2026 (Ausfuell-Pille inline links neben Stepper)
     v1.9: #pfZaehler-Pille aus eigener Zeile (.pf-zaehler-row darunter) nach
           LINKS in die Stepper-Zeile geholt: .wizard-progress -> display:flex
           (align-items:flex-start, flex-wrap), .pf-zaehler-row -> order:-1/
           flex:0 0 auto (links), Stepper bleibt via margin:0 auto zentriert.
           Behebt die Mehrhoehe der Steps MIT Pille (1/3/4) ggue. ohne (2/5):
           gleiche Header-Hoehe ueberall. Keine feste Hoehe/overflow. Mobil
           (<=760px) bricht die Pille zentriert ueber den Stepper um. Pille-
           Logik/Optik unveraendert (R68). Markup aller Steps unveraendert
           (Header-Block identisch -> eine CSS-Regel deckt alle).
   style.css  |  Version 1.8 - 07.06.2026 (.wizard-header z-index 100->2000)
     v1.8: .wizard-header z-index auf 2000 (ueber Leaflet 700/800 + .map-overlay
           1000, unter Modals 9998) — Satellit-Karte/Zoom-Buttons gleiten beim
           Scrollen UNTER den Header statt darueber. position:sticky/top:0/opaker
           Hintergrund bereits vorhanden (nur z-index geaendert, R65).
   style.css  |  Version 1.7 - 05.06.2026 (wt-anlage-info/-section-title auf Marken-Tokens)
     v1.7: wt-anlage-info (#f0f9fa/#ccecef/var(--upc-teal)) + wt-section-title(-icon) (var(--upc-teal))
           auf --upc-teal-light/--upc-teal-mid/--upc-teal/--radius-md umgestellt.
           Beide Klassen werden NUR von wizard_schritt6.html genutzt. Namen/Struktur
           unverändert — kein Cross-Page-Effekt.
   style.css  |  Version 1.6 - 03.06.2026 (CSS-Konsolidierung: wizard-template.css eingegliedert)
     v1.6: wt-actions / wt-btn-back / wt-btn-next / wt-saving-row in WT-KLASSEN-Sektion
           ergaenzt. wizard-template.css kann jetzt geloescht werden.
   Version 1.5 - 03.06.2026 (Layout-Fundament: Header-Inhalt auf max-width zentriert)
     v1.5: .wizard-header padding-inline via calc zentriert auf --max-width=1400px.
           Balken bleibt voll breit (Hintergrundfarbe), Inhalt fluchtet mit wizard-main.
           Kein HTML-Eingriff in Wizard-Schritte nötig.
   Version 1.4 - 05.05.2026 (Logo + Header-Farbe + Header-Text + Branding-Import)
   Gilt für: Wizard (Kundenseite) + Admin-Tableau
   ═══════════════════════════════════════════════════════════════════ */
@import url("pv_chat_baustein.css?v=20261013pa");   /* v1.17: Chat-Baustein (R65), vorher hier am Dateiende */

/* Branding-Variablen aus DB (firma_einstellungen) — liefert
   --upc-teal, --solar-orange, --header-farbe etc. dynamisch.
   Damit greift die im Admin eingestellte Header-Farbe auch im Wizard.

   ACHTUNG, REIHENFOLGE: @import-Regeln muessen in CSS VOR jeder anderen
   Regel stehen — auch vor @font-face. Als hier noch der Google-Fonts-Import
   darueber stand, war das kein Thema. Seit er durch @font-face ersetzt ist
   (25.08.2026, s.u.), MUSS dieser Import oben bleiben. Rutscht er unter die
   @font-face-Bloecke, ignoriert ihn der Browser stillschweigend — und mit
   ihm alle Franchise-Farben. */
@import url('../01_Admin/branding.php');

/* ══════════════════════════════════════════════════════════════════════════
   SCHRIFTEN — LOKAL, 25.08.2026
   ══════════════════════════════════════════════════════════════════════════
   VORHER stand hier:
     @import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,
       wght@0,9..40,300;...;1,9..40,400&family=DM+Mono:wght@400;500&display=swap');

   WARUM DAS WEG MUSSTE: Ein CSS-@import wird beim Verarbeiten des
   Stylesheets geladen — also VOR jedem JavaScript. Die Anfrage ging damit
   an Google hinaus, bevor irgendein Einwilligungsbanner ueberhaupt
   existierte. Kein Consent-Werkzeug der Welt kann das bremsen; solange die
   Zeile dastand, waere jede CMP-Umstellung wirkungslos gewesen.
   Uebertragen wurden dabei IP-Adresse und Browserkennung jedes Besuchers.

   Die Schriften liegen jetzt unter wizard/fonts/ auf dem eigenen Server.
   Eine Datei vom eigenen Server ist kein Drittdienst — es gibt nichts
   einzuwilligen. Dasselbe Vorgehen wie am 20.08. bei den neun
   Bibliotheken (assets/vendor/).

   WELCHE SCHNITTE UND WARUM GENAU DIESE:
     DM Sans 300/400/500/600/700 + 400 kursiv, DM Mono 400/500.
     Herkunft: fontsource, @fontsource/dm-sans 5.3.0 und
     @fontsource/dm-mono 5.3.0, Subset latin, SIL Open Font License 1.1.
     Das ist exakt der Satz, den der fruehere Google-Import angefordert hat.

   WARUM AUCH 800, obwohl der Google-Import es nicht als Schnitt nannte:
     font-weight: 800 wird an 15 Stellen im Wizard angefordert. Der Import
     hat DM Sans als VARIABLE Schrift geladen (opsz 9..40 in der URL) —
     auf einer Gewichtsachse wird 800 ECHT dargestellt, nicht gerechnet.
     Die statischen Dateien hier haben keine Achse. Ohne einen echten
     800er-Schnitt wuerde der Browser 800 kuenstlich fett aus dem 700er
     rechnen, und GENAU DAS waere die sichtbare Aenderung, die R86
     verbietet. Der 800er liegt deshalb bei und ist unten eingetragen.
     Die 15 Fundstellen bleiben unangetastet (R68).

   font-display: swap steht in jeder Regel — es ersetzt den Parameter
   display=swap des alten Imports. Ohne ihn bliebe der Text waehrend des
   Ladens unsichtbar, statt in der Ersatzschrift zu erscheinen.

   Die Familiennamen bleiben 'DM Sans' und 'DM Mono'. Das uebrige CSS
   spricht die Schriften ueber diese Namen an; eine Umbenennung wuerde
   jede font-family-Regel ins Leere laufen lassen.
   ══════════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/dm-sans-latin-300-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/dm-sans-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/dm-sans-latin-400-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/dm-sans-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/dm-sans-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/dm-sans-latin-700-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('fonts/dm-sans-latin-800-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/dm-mono-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/dm-mono-latin-500-normal.woff2') format('woff2');
}

/* ───────────────────────────────────────────────────────────────────
   1. DESIGN TOKENS
   ─────────────────────────────────────────────────────────────────── */
:root {

  /* Hauptfarben — UPC Cooltec Brand
     Tag 35: an bausteine.css-Tokens (--bs-*) gekoppelt, damit das
     Stellpult (00_Frontend_Bausteine.html) durchschlaegt. Fallback =
     bisheriger Hex -> ohne geladenes bausteine.css KEINE Aenderung. */
  --upc-teal:         var(--bs-accent,        #0099a2);
  --upc-teal-dark:    var(--bs-accent-dark,   #007a82);
  --upc-teal-darker:  #005f66;
  --upc-teal-light:   var(--bs-accent-light,  #e6f5f6);
  --upc-teal-mid:     #b3e0e3;
  /* K4/04 (07.09.2026): die rgb-Form fuer Abwandlungen (Schatten, Tints als
     rgba(...,.2)). Der Loader rechnet sie aus der Firmenfarbe (--bs-accent-rgb);
     ohne ihn gilt UPC. Vorher standen 36 feste rgba-Werte der Hausfarbe im Quelltext. */
  --upc-teal-rgb:     var(--bs-accent-rgb,    0, 153, 162);

  /* Akzentfarbe — Solar Orange */
  --solar-orange:       var(--bs-secondary,      #d77a1a);
  --solar-orange-dark:  var(--bs-secondary-dark, #b8650f);
  --solar-orange-light: #fdf0e3;
  --solar-orange-mid:   #f5c18a;
  --solar-orange-rgb:   var(--bs-secondary-rgb, 215, 122, 26);

  /* Grautöne */
  --gray-dark:   var(--bs-text,       #333333);
  --gray-med:    var(--bs-text-muted, #848484);
  --gray-light:  #ebebeb;
  --gray-xlight: #f4f4f4;

  /* Hintergründe */
  --bg-light:  #ffffff;
  --bg-soft:   var(--bs-bg-soft, #f8fafc);
  --bg-dark:   #0b0e18;
  --bg-dark-2: #141823;
  --bg-dark-3: #1c2132;

  /* Status-Farben */
  --success:       #16a34a;
  --success-light: #dcfce7;
  --warning:       #d97706;
  --warning-light: #fef3c7;
  --danger:        #dc2626;
  --danger-light:  #fee2e2;
  --info:          #0284c7;
  --info-light:    #e0f2fe;

  /* Typografie */
  --font-main: 'DM Sans', system-ui, sans-serif;
  --font-mono: 'DM Mono', monospace;

  /* Abstände */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;
  --space-3xl: 64px;

  /* Radien */
  --radius-sm:   6px;
  --radius-md:   var(--wz-rundung, 8px);   /* Buttons + Felder — K4/05: einstellbar (firma_einstellungen.wizard_rundung), 8px = Vorgabe */
  --radius-lg:   12px;  /* Karten */
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* Schatten — dezent, nur auf Karten */
  --shadow-xs: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.07), 0 1px 3px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.09), 0 2px 6px rgba(0,0,0,0.05);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.11), 0 4px 12px rgba(0,0,0,0.06);
  --shadow-teal: 0 4px 16px rgba(var(--upc-teal-rgb),0.25);

  /* Übergänge */
  --transition-fast:   all 0.15s ease;
  --transition-normal: all 0.25s ease;

  /* Layout */
  --max-width:     1400px;   /* .container (Admin + allgemein) — NICHT der Wizard */
  --sidebar-width: 240px;

  /* 21.08.2026: DIE Inhaltsbreite des Wizards. Liest den Wert aus
     bausteine.css (--bs-page-max). Ein Schritt, der breiter sein muss,
     setzt .wizard-breit an seinem <body> — s. unten. Es gibt sonst
     KEINE zweite Stelle mehr, an der eine Wizard-Breite steht:
     .wizard-main und .wizard-header lesen beide diesen Wert, damit
     Kopfzeile und Inhalt IMMER fluchten. */
  --wizard-breite: var(--bs-page-max, 1080px);
}

/* ───────────────────────────────────────────────────────────────────
   2. RESET & BASE
   ─────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── DIE BEZUGSGRÖSSE DER GANZEN SEITE (K5/01 B.1, 07.09.2026) ─────────
   BEFUND vom 07.09.: Die Grundschrift stand auf body, html lag fest auf
   16px. Fast alle Größen im Wizard sind aber in rem angegeben und rechnen
   gegen html — .btn 0.88rem, .form-control 0.9375rem, .form-label 0.78rem,
   die Überschriften. Von 12 auf 24 gestellt bewegte sich deshalb NUR der
   Fließtext; Knöpfe, Felder und Überschriften blieben stehen.

   JETZT folgt html der Grundschrift. Der Faktor 16/15 hält die heutige
   Optik exakt: bei der Vorgabe 15px ergibt calc(15px / 15 * 16) genau die
   bisherigen 16px, also ändert sich ohne Reglerbewegung nichts.

   WAS NICHT MITWÄCHST: die Abstände. Sie stehen sämtlich in px
   (--space-xs bis --space-3xl) und hängen ab K5/03 am eigenen Regler.
   Dirk: "Dann bleiben die Abstände konstant, egal wie groß."

   NUR DER WIZARD: Das Backend lädt admin-style.css, nicht diese Datei,
   und --wz-schrift-grund wird nur von wizard-logo-loader.js gesetzt. */
html {
  font-size: calc(var(--wz-schrift-grund, 15px) / 15 * 16);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-main);
  font-size: var(--wz-schrift-grund, 15px);   /* K4/05: Grundschrift einstellbar (wizard_schrift_grund), 15px = Vorgabe */
  line-height: 1.6;
  color: var(--gray-dark);
  -webkit-font-smoothing: antialiased;
}

/* Kundenseite — hell */
body.wizard-body  { background: var(--bg-soft); }
/* K7/02 (14.09.2026): HIER STAND body.wizard-breit — die Ausnahme-Breite
   von Schritt 2 (fest 1400 px, ohne Regler). Entfernt: der Regler
   Seitenbreite gilt jetzt fuer alle elf Seiten. Kein Aufrufer mehr
   (wizard_schritt2.html traegt die Klasse nicht mehr). */
/* Admin — dunkel */
body.admin-body   { background: var(--bg-dark); color: #c8cfe0; }

a { color: var(--upc-teal); text-decoration: none; transition: var(--transition-fast); }
a:hover { color: var(--upc-teal-dark); text-decoration: underline; }

img, svg { display: block; max-width: 100%; }
ul, ol   { list-style: none; }

/* ───────────────────────────────────────────────────────────────────
   3. TYPOGRAFIE
   ─────────────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-main);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
h2 { font-size: clamp(1.3rem, 2.5vw, 1.75rem); }
h3 { font-size: clamp(1.1rem, 2vw, 1.35rem); }
h4 { font-size: 1.1rem; }
h5 { font-size: 0.95rem; }

.text-xs   { font-size: 0.75rem; }
.text-sm   { font-size: 0.85rem; }
.text-lg   { font-size: 1.05rem; }
.text-xl   { font-size: 1.2rem; }
.font-medium   { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold     { font-weight: 700; }

.text-teal    { color: var(--upc-teal); }
.text-orange  { color: var(--solar-orange); }
.text-muted   { color: var(--gray-med); }
.text-success { color: var(--success); }
.text-danger  { color: var(--danger); }

.label-tag {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--upc-teal);
}
.mono { font-family: var(--font-mono); }

/* ───────────────────────────────────────────────────────────────────
   4. LAYOUT
   ─────────────────────────────────────────────────────────────────── */
.container    { width: 100%; max-width: var(--max-width); margin-inline: auto; padding-inline: var(--space-xl); }
.container-sm { max-width: 640px;  margin-inline: auto; padding-inline: var(--space-md); }
.container-md { max-width: 800px;  margin-inline: auto; padding-inline: var(--space-md); }
.container-lg { max-width: 1100px; margin-inline: auto; padding-inline: var(--space-xl); }

.flex            { display: flex; }
.flex-col        { display: flex; flex-direction: column; }
.items-center    { align-items: center; }
.items-start     { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-end     { justify-content: flex-end; }
.gap-sm  { gap: var(--space-sm); }
.gap-md  { gap: var(--space-md); }
.gap-lg  { gap: var(--space-lg); }
.gap-xl  { gap: var(--space-xl); }

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-lg); }
.col-span-2 { grid-column: span 2; }
.col-full   { grid-column: 1 / -1; }

/* ───────────────────────────────────────────────────────────────────
   5. KARTEN
   ─────────────────────────────────────────────────────────────────── */
/* .card / .card-header / .card-body / .card-footer — UMGEZOGEN NACH bausteine.css (K5/02, 07.09.2026).
   bausteine.css ist der Master; hier stand die zweite Fassung mit
   abweichenden Werten. Jetzt .bs-card / .bs-card-head / .bs-card-body / .bs-card-fuss.
   Die .admin-body-Abwandlungen sind mit weggefallen: das Backend laedt
   diese Datei gar nicht (es hat admin-style.css), sie waren tot. */


/* Stat-Karte */
.stat-card {
  background: var(--bg-light);
  border-radius: var(--radius-lg);
  padding: var(--space-lg) var(--space-xl);
  box-shadow: var(--shadow-sm);
  border-left: 4px solid var(--upc-teal);
}
.stat-card.orange { border-left-color: var(--solar-orange); }
.stat-card.green  { border-left-color: var(--success); }
.stat-card .stat-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--gray-med); }
.stat-card .stat-value { font-size: 1.9rem; font-weight: 700; color: var(--gray-dark); line-height: 1.1; margin-top: 4px; }
.stat-card .stat-sub   { font-size: 0.82rem; color: var(--gray-med); margin-top: 2px; }

.admin-body .stat-card { background: var(--bg-dark-2); border: 1px solid rgba(255,255,255,0.07); }
.admin-body .stat-card .stat-value { color: #e8edf5; }

/* ───────────────────────────────────────────────────────────────────
   6. BUTTONS
   ─────────────────────────────────────────────────────────────────── */
/* .btn und die ganze Familie (primary/secondary/ghost/cta/danger/sm/lg/xl/icon/full) — UMGEZOGEN NACH bausteine.css (K5/02, 07.09.2026).
   bausteine.css ist der Master; hier stand die zweite Fassung mit
   abweichenden Werten. Jetzt .bs-btn mit den Zusaetzen primary / secondary / ghost /
   cta / danger und den Groessen klein / gross / xl / icon / voll.
   >>> DAS WAR DIE DUBLETTE, DIE K5 AUSGELOEST HAT: <<< derselbe Knopf
   "Weiter" war 42px auf Schritt 1 (.bs-btn), 52px auf Schritt 2 bis 7
   (.btn-lg) und 58px auf Schritt 8 (.btn-xl). */


/* ───────────────────────────────────────────────────────────────────
   7. FORMULAR
   ─────────────────────────────────────────────────────────────────── */
/* .form-group / .form-label — UMGEZOGEN NACH bausteine.css (K5/02, 07.09.2026).
   bausteine.css ist der Master; hier stand die zweite Fassung mit
   abweichenden Werten. Jetzt .bs-field / .bs-label. */


/* .form-control samt Zustaenden, textarea und Auswahlpfeil — UMGEZOGEN NACH bausteine.css (K5/02, 07.09.2026).
   bausteine.css ist der Master; hier stand die zweite Fassung mit
   abweichenden Werten. Jetzt .bs-input. Die Feldhoehe kommt aus --bs-field-h,
   die Schrift aus --bs-input-size, die Breite aus einer der fuenf
   Klassen .bs-b5 / .bs-b10 / .bs-b20 / .bs-b40 / .bs-b60. */


/* .form-check / .form-check-label — UMGEZOGEN NACH bausteine.css (K5/02, 07.09.2026).
   bausteine.css ist der Master; hier stand die zweite Fassung mit
   abweichenden Werten. Jetzt .bs-check / .bs-check-label. */


/* .form-hint — UMGEZOGEN NACH bausteine.css (K5/02, 07.09.2026).
   bausteine.css ist der Master; hier stand die zweite Fassung mit
   abweichenden Werten. Jetzt .bs-hint (Groesse aus --bs-hint-size). */


/* ── Info-Symbol am Feld-Label (21.08.2026) ─────────────────────────
   Kleines "i" hinter einem Label; der Erklaertext erscheint bei Hover
   UND bei Fokus (das Symbol hat tabindex="0"), damit er auf dem Handy
   per Antippen erreichbar ist. Reines CSS, kein Skript.
   Stand zuerst im <style> von wizard_schritt2.html. Seit die Traufhoehe
   nach Schritt 4 umgezogen ist, wird er in zwei Schritten gebraucht —
   also gehoert er hierher und nicht zweimal ins Markup.
   ZUR AUSRICHTUNG: links am Symbol verankert, nicht mittig. Die Karte
   (.card) hat overflow:hidden; ein mittiger Kasten von 270 px haengt auf
   schmalen Geraeten links heraus und wuerde dort abgeschnitten. */
.feld-info {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; margin-left: 5px; border-radius: 50%;
  background: var(--gray-med, #94a3b8); color: #fff;
  font-size: 10px; font-weight: 700; font-style: normal;
  text-transform: none; letter-spacing: 0; cursor: help;
  position: relative; vertical-align: middle; user-select: none;
}
.feld-info:hover, .feld-info:focus { background: var(--upc-teal, #0d7c8a); outline: none; }
.feld-info-text {
  display: none; position: absolute; left: -12px; bottom: calc(100% + 8px);
  width: 270px; max-width: calc(100vw - 40px); padding: 10px 12px; z-index: 1200;
  background: #1e293b; color: #f1f5f9; border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0,0,0,.28);
  font-size: 11.5px; font-weight: 400; line-height: 1.5;
  text-transform: none; letter-spacing: 0; text-align: left;
  white-space: normal; cursor: auto;
}
.feld-info-text strong { color: #fff; }
.feld-info-text::after {
  content: ''; position: absolute; top: 100%; left: 13px;
  border: 6px solid transparent; border-top-color: #1e293b;
}
.feld-info:hover .feld-info-text, .feld-info:focus .feld-info-text { display: block; }
.form-error { font-size: 0.77rem; color: var(--danger); display: none; }
.form-error.show { display: block; }
/* .admin-body .form-hint entfallen — das Backend laedt diese Datei nicht. */


/* ───────────────────────────────────────────────────────────────────
   8. TABELLEN
   ─────────────────────────────────────────────────────────────────── */
.table-wrap { width: 100%; overflow-x: auto; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }

table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }

thead th {
  padding: 12px 16px;
  text-align: left;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: var(--bg-soft);
  color: var(--gray-med);
  border-bottom: 1px solid var(--gray-light);
  white-space: nowrap;
}
tbody td { padding: 12px 16px; border-bottom: 1px solid var(--gray-light); vertical-align: middle; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--upc-teal-light); }

.admin-body thead th        { background: var(--bg-dark-3); color: rgba(255,255,255,0.35); border-bottom-color: rgba(255,255,255,0.07); }
.admin-body tbody td        { border-bottom-color: rgba(255,255,255,0.05); color: #c0cad8; }
.admin-body tbody tr:hover td { background: rgba(var(--upc-teal-rgb),0.08); }

/* ───────────────────────────────────────────────────────────────────
   9. BADGES & TAGS
   ─────────────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.badge-teal    { background: var(--upc-teal-light);    color: var(--upc-teal-dark); }
.badge-orange  { background: var(--solar-orange-light); color: var(--solar-orange-dark); }
.badge-success { background: var(--success-light);     color: var(--success); }
.badge-warning { background: var(--warning-light);     color: var(--warning); }
.badge-danger  { background: var(--danger-light);      color: var(--danger); }
.badge-gray    { background: var(--gray-xlight);       color: var(--gray-med); }
.badge-dot::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ───────────────────────────────────────────────────────────────────
   10. ALERTS
   ─────────────────────────────────────────────────────────────────── */
/* .alert und die fuenf Farbvarianten — UMGEZOGEN NACH bausteine.css (K5/02, 07.09.2026).
   bausteine.css ist der Master; hier stand die zweite Fassung mit
   abweichenden Werten. Jetzt .bs-box mit .bs-box-info / -hint / -erfolg /
   -fehler / -akzent. >>> DIE VIER STATUSFARBEN BLEIBEN GETRENNT <<< —
   ein Fehler bleibt rot, auch wenn die Hausfarbe rot ist. */


/* ───────────────────────────────────────────────────────────────────
   11. WIZARD — HEADER, PROGRESS, LAYOUT
   ─────────────────────────────────────────────────────────────────── */
.wizard-header {
  background: var(--upc-teal);
  /* Balken voll breit; Inhalt per calc auf die Wizard-Breite zentriert (v1.5).
     21.08.2026: liest jetzt --wizard-breite statt --max-width. Grund: Sobald
     der Inhalt 1080 ist und die Kopfzeile weiter auf 1400 flucht, stehen
     Logo/Stepper sichtbar neben der Karte. Mit demselben Token folgt die
     Kopfzeile jeder Breite — auch der Ausnahme in Schritt 2. */
  padding-top: 16px;
  padding-bottom: 16px;
  padding-left:  max(var(--space-xl), calc((100% - var(--wizard-breite, 1080px)) / 2));
  padding-right: max(var(--space-xl), calc((100% - var(--wizard-breite, 1080px)) / 2));
  display: flex;
  align-items: center;
  gap: var(--space-md);
  position: sticky;
  top: 0;
  z-index: 2000;   /* ueber Leaflet (700/800) + .map-overlay (1000), unter Modals (9998) */
  box-shadow: 0 2px 12px rgba(var(--upc-teal-rgb),0.30);
}
.wizard-logo-mark {
  width: 36px; height: 36px;
  background: rgba(255,255,255,0.15);
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.wizard-header h1   { font-size: 1rem; color: #fff; font-weight: 700; }
.wizard-header h1 span { color: rgba(255,255,255,0.65); font-weight: 400; }

/* Progress */
.wizard-progress {
  background: var(--upc-teal-dark);
  padding: var(--space-md) var(--space-xl) var(--space-lg);  /* top: space-md statt 0 — Kreise vertikal mittig */
  position: sticky;
  top: var(--wizard-header-height, 92px);   /* dynamisch via passeStickyAn() in wizard-logo-loader.js */
  z-index: 99;        /* knapp unter dem Header (z-index 100) */
  /* v1.9/v1.11: Ausfuell-Pille (#pfZaehler) sitzt links auf Kreis-Hoehe,
     AUS DEM FLUSS (position:absolute, s. .pf-zaehler-row) -> keine eigene
     Zeile mehr (einheitliche Header-Hoehe) UND keine Flussbreite -> der
     einzige verbliebene Flex-Inhalt .wizard-steps zentriert via margin:0
     auto in der VOLLEN Breite und steht auf jedem Schritt fix an gleicher
     Stelle. sticky = Bezug (containing block) fuer die absolute Pille. */
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
}
/* v1.10: flex-basis 760px (statt impliziter Inhaltsbreite). Seit v1.9 ist
   .wizard-progress ein Flex-Container -> .wizard-steps wurde zum Flex-Item
   mit flex-basis:auto (= Inhaltsbreite, schmaler als 760); margin:0 auto
   blockiert zudem flex-grow -> Stepper schrumpfte, Labels ueberlappten.
   flex:0 1 760px stellt die volle Verteilungsbreite wieder her (schrumpft
   nur bei Platzmangel), margin:0 auto zentriert weiter, Pille bleibt links. */
.wizard-steps    { display: flex; flex: 0 1 760px; max-width: 760px; position: relative; margin: 0 auto; }

.wizard-step { flex: 1; display: flex; flex-direction: column; align-items: center; position: relative; }
.wizard-step::before {
  content: '';
  position: absolute;
  top: 15px; right: 50%;
  width: 100%; height: 2px;
  background: rgba(255,255,255,0.18);
  z-index: 0;
}
.wizard-step:first-child::before { display: none; }
.wizard-step.done::before,
.wizard-step.active::before { background: rgba(255,255,255,0.5); }

.step-circle {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  border: 2px solid rgba(255,255,255,0.25);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.78rem;
  font-weight: 700;
  color: rgba(255,255,255,0.45);
  position: relative; z-index: 1;
  transition: var(--transition-normal);
}
.wizard-step.active .step-circle { background: #fff; border-color: #fff; color: var(--upc-teal); box-shadow: 0 0 0 4px rgba(255,255,255,0.20); }
.wizard-step.done   .step-circle { background: rgba(255,255,255,0.25); border-color: rgba(255,255,255,0.5); color: #fff; }

.step-label { font-size: 0.62rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: rgba(255,255,255,0.35); margin-top: 6px; text-align: center; }
.wizard-step.active .step-label { color: rgba(255,255,255,0.9); }
.wizard-step.done   .step-label { color: rgba(255,255,255,0.55); }

/* Wizard Karten-Header */
.wizard-main { max-width: var(--wizard-breite); margin: var(--space-2xl) auto; padding: 0 var(--space-md) var(--space-3xl); }

.wizard-card-header {
  padding: var(--space-xl) var(--space-xl) var(--space-lg);
  background: linear-gradient(135deg, var(--upc-teal-light) 0%, var(--bg-light) 100%);
  border-bottom: 1px solid var(--gray-light);
}
.wizard-card-header .step-tag { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--upc-teal); margin-bottom: 6px; }
.wizard-card-header h2   { color: var(--gray-dark); font-size: var(--bs-h2-size, 1.5rem); }  /* K5/02 3e */
.wizard-card-header p    { color: var(--gray-med); margin-top: 6px; font-size: 0.9rem; line-height: 1.5; }

/* ───────────────────────────────────────────────────────────────────
   12. ADMIN — SIDEBAR & LAYOUT
   ─────────────────────────────────────────────────────────────────── */
.admin-layout  { display: flex; min-height: 100vh; }

.admin-sidebar {
  width: var(--sidebar-width);
  background: var(--bg-dark-2);
  border-right: 1px solid rgba(255,255,255,0.07);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 200;
  overflow-y: auto;
}
.admin-sidebar-logo { padding: var(--space-lg); border-bottom: 1px solid rgba(255,255,255,0.07); display: flex; align-items: center; gap: var(--space-sm); }
.admin-sidebar-logo .logo-dot { width: 32px; height: 32px; background: var(--upc-teal); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; }
.admin-sidebar-logo span  { font-size: 0.85rem; font-weight: 700; color: #e0e6f0; line-height: 1.2; }
.admin-sidebar-logo small { font-size: 0.68rem; color: rgba(255,255,255,0.35); display: block; font-weight: 400; }

.admin-nav { padding: var(--space-md) 0; flex: 1; }
.admin-nav-section { padding: var(--space-sm) var(--space-md) var(--space-xs); font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,0.25); }

.admin-nav a {
  display: flex; align-items: center; gap: var(--space-sm);
  padding: 9px var(--space-md);
  font-size: 0.875rem; font-weight: 500;
  color: rgba(255,255,255,0.55);
  transition: var(--transition-fast);
  text-decoration: none;
  position: relative;
}
.admin-nav a:hover   { color: #fff; background: rgba(255,255,255,0.05); text-decoration: none; }
.admin-nav a.active  { color: #fff; background: rgba(var(--upc-teal-rgb),0.18); }
.admin-nav a.active::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--upc-teal); border-radius: 0 3px 3px 0; }
.admin-nav .nav-icon  { font-size: 1rem; width: 20px; text-align: center; flex-shrink: 0; }
.admin-nav .nav-badge { margin-left: auto; background: var(--upc-teal); color: #fff; font-size: 0.65rem; font-weight: 700; padding: 1px 7px; border-radius: var(--radius-full); }

.admin-content { margin-left: var(--sidebar-width); flex: 1; display: flex; flex-direction: column; min-width: 0; }

.admin-topbar {
  height: 60px;
  background: var(--bg-dark-2);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--space-xl);
  position: sticky; top: 0; z-index: 100;
}
.admin-topbar-title   { font-size: 1rem; font-weight: 700; color: #e0e6f0; }
.admin-topbar-actions { display: flex; align-items: center; gap: var(--space-md); }
.admin-page           { padding: var(--space-xl); flex: 1; }

/* ───────────────────────────────────────────────────────────────────
   13. TABS
   ─────────────────────────────────────────────────────────────────── */
.tab-nav  { display: flex; gap: 2px; border-bottom: 2px solid var(--gray-light); margin-bottom: var(--space-lg); overflow-x: auto; }
.tab-btn  { padding: var(--space-sm) var(--space-lg); font-size: 0.85rem; font-weight: 600; color: var(--gray-med); background: transparent; border: none; border-bottom: 2px solid transparent; margin-bottom: -2px; cursor: pointer; white-space: nowrap; transition: var(--transition-fast); }
.tab-btn:hover  { color: var(--upc-teal); }
.tab-btn.active { color: var(--upc-teal); border-bottom-color: var(--upc-teal); }

.admin-body .tab-nav        { border-bottom-color: rgba(255,255,255,0.08); }
.admin-body .tab-btn        { color: rgba(255,255,255,0.4); }
.admin-body .tab-btn:hover  { color: rgba(255,255,255,0.8); }
.admin-body .tab-btn.active { color: var(--upc-teal); border-bottom-color: var(--upc-teal); }

.tab-panel        { display: none; }
.tab-panel.active { display: block; }

/* ───────────────────────────────────────────────────────────────────
   14. MODALS
   ─────────────────────────────────────────────────────────────────── */
.modal-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.55); z-index: 500;
  align-items: center; justify-content: center;
  padding: var(--space-lg); backdrop-filter: blur(2px);
}
.modal-overlay.open { display: flex; }
.modal {
  background: var(--bg-light); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg); width: 100%; max-width: 560px;
  max-height: 90vh; overflow-y: auto; animation: modalIn 0.22s ease;
}
.admin-body .modal { background: var(--bg-dark-2); }

.modal-header { padding: var(--space-lg) var(--space-xl); border-bottom: 1px solid var(--gray-light); display: flex; align-items: center; justify-content: space-between; }
.admin-body .modal-header { border-bottom-color: rgba(255,255,255,0.08); }
.modal-title  { font-size: 1.1rem; font-weight: 700; }
.admin-body .modal-title { color: #e0e6f0; }
.modal-close  { width: 32px; height: 32px; background: var(--gray-xlight); border: none; border-radius: var(--radius-sm); cursor: pointer; font-size: 1.1rem; display: flex; align-items: center; justify-content: center; color: var(--gray-med); transition: var(--transition-fast); }
.modal-close:hover { background: var(--danger-light); color: var(--danger); }
.admin-body .modal-close { background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.4); }
.modal-body   { padding: var(--space-xl); }
.modal-footer { padding: var(--space-md) var(--space-xl); border-top: 1px solid var(--gray-light); display: flex; justify-content: flex-end; gap: var(--space-md); }
.admin-body .modal-footer { border-top-color: rgba(255,255,255,0.08); }

@keyframes modalIn { from { opacity: 0; transform: scale(0.95) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } }

/* ───────────────────────────────────────────────────────────────────
   15. SPINNER & LOADING
   ─────────────────────────────────────────────────────────────────── */
.spinner {
  display: inline-block;
  width: 18px; height: 18px;
  border: 2.5px solid rgba(var(--upc-teal-rgb),0.2);
  border-top-color: var(--upc-teal);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
.spinner-sm    { width: 14px; height: 14px; border-width: 2px; }
.spinner-lg    { width: 28px; height: 28px; border-width: 3px; }
.spinner-white { border-color: rgba(255,255,255,0.25); border-top-color: #fff; }

@keyframes spin { to { transform: rotate(360deg); } }

.saving-row { display: none; align-items: center; gap: var(--space-sm); font-size: 0.82rem; color: var(--gray-med); }
.saving-row.show { display: flex; }

/* ───────────────────────────────────────────────────────────────────
   16. TOGGLE SWITCH
   ─────────────────────────────────────────────────────────────────── */
.toggle-wrap { display: flex; align-items: center; gap: var(--space-sm); cursor: pointer; user-select: none; }
.toggle { position: relative; width: 40px; height: 22px; background: var(--gray-light); border-radius: var(--radius-full); transition: var(--transition-fast); flex-shrink: 0; }
.toggle::after { content: ''; position: absolute; width: 16px; height: 16px; background: #fff; border-radius: 50%; top: 3px; left: 3px; transition: var(--transition-fast); box-shadow: var(--shadow-xs); }
input:checked + .toggle { background: var(--upc-teal); }
input:checked + .toggle::after { transform: translateX(18px); }

/* ───────────────────────────────────────────────────────────────────
   17. DIVIDER
   ─────────────────────────────────────────────────────────────────── */
.divider { display: flex; align-items: center; gap: var(--space-md); color: var(--gray-med); font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; margin: var(--space-lg) 0; }
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--gray-light); }
.admin-body .divider::before, .admin-body .divider::after { background: rgba(255,255,255,0.08); }
.admin-body .divider { color: rgba(255,255,255,0.3); }

/* ───────────────────────────────────────────────────────────────────
   18. PLZ RADIUS BADGE
   ─────────────────────────────────────────────────────────────────── */
.plz-badge { display: none; align-items: center; gap: 6px; padding: 8px 12px; border-radius: var(--radius-md); font-size: 0.8rem; font-weight: 600; white-space: nowrap; animation: fadeSlide 0.25s ease; }
.plz-badge.ok  { display: flex; background: var(--success-light); color: var(--success); border: 1.5px solid #86efac; }
.plz-badge.nok { display: flex; background: var(--danger-light);  color: var(--danger);  border: 1.5px solid #fca5a5; }

@keyframes fadeSlide { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

/* ───────────────────────────────────────────────────────────────────
   19. FAVORITEN-STERN
   ─────────────────────────────────────────────────────────────────── */
.fav-star { background: none; border: none; font-size: 1.2rem; cursor: pointer; transition: transform 0.15s; line-height: 1; padding: 2px; color: var(--gray-light); }
.fav-star.active { color: var(--solar-orange); }
.fav-star:hover  { transform: scale(1.2); }

/* ───────────────────────────────────────────────────────────────────
   20. TOAST NOTIFICATIONS
   ─────────────────────────────────────────────────────────────────── */
.toast-container { position: fixed; top: var(--space-xl); right: var(--space-xl); z-index: 9999; display: flex; flex-direction: column; gap: var(--space-sm); pointer-events: none; }
.toast { background: var(--bg-light); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: var(--space-md) var(--space-lg); font-size: 0.88rem; display: flex; align-items: center; gap: var(--space-sm); min-width: 260px; max-width: 380px; border-left: 4px solid var(--upc-teal); pointer-events: auto; animation: toastIn 0.28s ease; }
.toast.success { border-left-color: var(--success); }
.toast.warning { border-left-color: var(--warning); }
.toast.error   { border-left-color: var(--danger); }
.admin-body .toast { background: var(--bg-dark-2); color: #e0e6f0; }

@keyframes toastIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }

/* ───────────────────────────────────────────────────────────────────
   21. UTILITY
   ─────────────────────────────────────────────────────────────────── */
.hidden      { display: none !important; }
.invisible   { visibility: hidden; }
.w-full      { width: 100%; }
.mt-sm  { margin-top: var(--space-sm); }
.mt-md  { margin-top: var(--space-md); }
.mt-lg  { margin-top: var(--space-lg); }
.mt-xl  { margin-top: var(--space-xl); }
.mb-md  { margin-bottom: var(--space-md); }
.mb-lg  { margin-bottom: var(--space-lg); }
.rounded     { border-radius: var(--radius-lg); }
.truncate    { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cursor-pointer { cursor: pointer; }
.overflow-hidden { overflow: hidden; }

/* ───────────────────────────────────────────────────────────────────
   22. RESPONSIVE
   ─────────────────────────────────────────────────────────────────── */
@media (max-width: 1200px) { :root { --sidebar-width: 220px; } }

@media (max-width: 900px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .admin-sidebar { transform: translateX(-100%); transition: transform 0.3s ease; }
  .admin-sidebar.open { transform: translateX(0); }
  .admin-content { margin-left: 0; }
}

@media (max-width: 640px) {
  .container { padding-inline: var(--space-md); }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .col-span-2 { grid-column: 1; }
  .wizard-main { margin-top: var(--space-lg); }
  .wizard-card-header { padding-left: var(--space-md); padding-right: var(--space-md); }
  .wizard-header, .wizard-progress { padding-left: var(--space-md); padding-right: var(--space-md); }
  .step-label { display: none; }
  /* K5/02: die Telefon-Fassung des Abschluss-Knopfes steht jetzt bei den
     uebrigen Knopfgroessen in bausteine.css (.bs-btn.xl in der Medienabfrage
     ganz unten). Hier bliebe sonst der letzte Rest des alten Baukastens. */
}

/* ───────────────────────────────────────────────────────────────────
   23. PRINT
   ─────────────────────────────────────────────────────────────────── */
@media print {
  .admin-sidebar, .admin-topbar, .wizard-header, .wizard-progress { display: none !important; }
  .admin-content { margin-left: 0; }
  body { background: white; color: black; }
  /* Karte und Knopf im Ausdruck: siehe bausteine.css (K5/02). */
}


/* ═══════════════════════════════════════════════════════════════════
   13. WIZARD HEADER-LOGO  (v1.2 — 09.05.2026)
   Standardisierung fuer Franchise-Logos:
   - HOEHE FIX 60px — Logo wird hoch- ODER runterskaliert
   - BREITE flexibel (auto, begrenzt durch max-width: 240px)
   - object-fit: contain → Logo wird nicht verzerrt, sondern passend eingepasst
   Damit ist die Header-Hoehe IMMER 92px (16px pad + 60px logo + 16px pad) —
   egal welches Logo der Franchise-Nehmer hochlaedt.
   ═══════════════════════════════════════════════════════════════════ */
.wizard-header .header-logo,
.wizard-header img.header-logo,
.wizard-header img {
  height: 60px !important;
  width: auto !important;
  max-width: 240px !important;
  object-fit: contain !important;
  display: inline-block !important;
  vertical-align: middle !important;
}

/* h1 im Wizard-Header als Flex-Zeile, damit Logo + Text nebeneinander
   sitzen statt das Bild den Block sprengt. */
.wizard-header h1 {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 0 !important;
}


/* ═══════════════════════════════════════════════════════════════════
   14. WIZARD HEADER-FARBE  (v1.3 — 07.09.2026, K5/01 C)
   Marineblau (#1e3a5f -> #0f172a) als RUECKFALL. Solar-typisch, seriös,
   gut sichtbar fuer alle Logos — aber nur, solange der Franchise-Nehmer
   keine eigene Kopfzeilenfarbe gesetzt hat.

   >>> BERICHTIGUNG DES ALTEN KOMMENTARS (C.2). <<< Hier stand vier
   Monate lang: "Wenn branding.php im Wizard eingebunden ist und der
   Franchise-Nehmer eine eigene Header-Farbe gesetzt hat, ueberschreibt
   branding.php diese Regel mit !important."
   DAS WAR FALSCH, und der Satz hat den Fehler gedeckt: wer ihn las,
   suchte woanders. branding.php kommt als @import in Zeile 81 DIESER
   Datei herein. Eine @import-Regel wird an ihrer Stelle eingesetzt,
   also GANZ OBEN — bei gleicher Spezifitaet und beidseitigem !important
   gewinnt die SPAETERE Regel, und das war diese hier. Der Franchise-
   Nehmer stellte seine Farbe ein und sah das Blau von UPC.
   Nachgestellt am 07.09.2026 (BERICHT_K5_01_Drei_Befunde).

   DIE LOESUNG: kein Wettstreit mehr, sondern ein Rueckfall. Setzt
   branding.php --header-farbe, gilt sie; sonst bleibt das Marineblau.
   Die Regel in branding.php:31 ist damit ueberfluessig, aber harmlos —
   sie setzt denselben Verlauf aus denselben zwei Variablen.
   ═══════════════════════════════════════════════════════════════════ */
.wizard-header {
  background: linear-gradient(135deg,
              var(--header-farbe,      #1e3a5f) 0%,
              var(--header-farbe-dark, #0f172a) 100%) !important;
}


/* ═══════════════════════════════════════════════════════════════════
   15. WIZARD HEADER-TEXT  (v1.3 — 05.05.2026, Tag 8)
   Im Wizard-Header soll nur das Logo + "PV-Konfigurator" zu sehen sein.
   Der Text "UPC Cooltec" daneben (war noch im H1 fest verdrahtet) wird
   ausgeblendet. Auch die ☀️ Sonne-Box (.wizard-logo-mark) wird
   versteckt — sie ist neben dem echten Logo redundant.

   Vorgehen ohne HTML-Aenderung:
     - h1 bekommt font-size:0 → "UPC Cooltec " Text-Knoten verschwindet
     - <span> mit "PV-Konfigurator" wird display:none → versteckt
     - h1::after fuegt "PV-Konfigurator" neu ein, fett + weiss

   Logo bleibt sichtbar weil <img> nicht von font-size betroffen ist.
   ═══════════════════════════════════════════════════════════════════ */

/* Sonne-Box neben Logo verstecken (redundant zum echten Logo) */
.wizard-header .wizard-logo-mark {
  display: none !important;
}

/* H1-Text plattmachen */
.wizard-header h1 {
  font-size: 0 !important;
}

/* span ("PV-Konfigurator" original) ausblenden */
.wizard-header h1 span {
  display: none !important;
}

/* Neuer Text "PV-Konfigurator" — fett, weiss, gut lesbar */
.wizard-header h1::after {
  content: "PV-Konfigurator";
  font-size: 1.15rem;
  font-weight: 700;
  color: #ffffff;
  margin-left: 14px;
  vertical-align: middle;
  letter-spacing: 0.3px;
}


/* ══════════════════════════════════════════════════════════════════════
   WT-KLASSEN — aus wizard-template.css uebernommen
   Etappe 11 (18.05.2026): Kernklassen.
   v1.6 (03.06.2026): wt-actions/wt-btn/wt-saving ergaenzt -> wizard-template.css entfaellt.
   Nicht uebernommen: .header-logo (oben Z.~724), .wizard-header h1 (oben Z.~442/738).
   ══════════════════════════════════════════════════════════════════════ */

/* wt-anlage-info / wt-section-title: nur von Schritt 6 genutzt — Marken-Teal
   auf Token umgestellt (style.css v1.7). Struktur/Namen unverändert. */
.wt-anlage-info {
  background: var(--upc-teal-light); border: 1px solid var(--upc-teal-mid); border-radius: var(--radius-md);
  padding: 14px 16px; margin-bottom: 16px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px;
}
.wt-anlage-info-item  { text-align: center; }
.wt-anlage-info-label { color: #64748b; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; }
.wt-anlage-info-wert  { font-weight: 700; color: var(--upc-teal); font-size: 18px; margin-top: 2px; }

.wt-section-title {
  font-size: 16px; font-weight: 700; color: #0f172a;
  margin: 28px 0 12px; display: flex; align-items: center; gap: 8px;
}
.wt-section-title-icon { color: var(--upc-teal); }

.wt-loading-state { text-align: center; padding: 60px 20px; color: #64748b; }
.wt-spinner {
  display: inline-block; width: 36px; height: 36px;
  border: 3px solid rgba(var(--upc-teal-rgb),0.2); border-top-color: var(--upc-teal);
  border-radius: 50%; animation: wtSpin 1s linear infinite; margin-bottom: 14px;
}
@keyframes wtSpin { to { transform: rotate(360deg); } }

.wt-error-state {
  text-align: center; padding: 32px 20px; background: #fee2e2;
  border-radius: 8px; color: #991b1b; margin: 20px 0;
}

.wt-info-banner {
  background: #fef3c7; border-left: 4px solid #f59e0b; color: #78350f;
  padding: 10px 14px; border-radius: 6px; margin-bottom: 14px;
  font-size: 13px; line-height: 1.5;
}
.wt-info-banner strong { color: #78350f; }

.wt-endpreis-box {
  background: linear-gradient(135deg, var(--upc-teal) 0%, var(--upc-teal-dark) 100%);
  color: #fff; border-radius: 12px; padding: 20px 22px; margin-top: 24px;
  box-shadow: 0 8px 20px rgba(var(--upc-teal-rgb),0.25);
}
.wt-endpreis-grid { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; }
@media (max-width: 600px) { .wt-endpreis-grid { grid-template-columns: 1fr; } }
.wt-endpreis-info-text { font-size: 14px; opacity: 0.95; margin-bottom: 8px; }
.wt-endpreis-zeile     { display: flex; justify-content: space-between; padding: 3px 0; gap: 16px; font-size: 13px; }
.wt-endpreis-zeile.sep {
  border-top: 1px solid rgba(255,255,255,.30); margin-top: 8px;
  padding-top: 8px; font-weight: 700; font-size: 14px;
}
.wt-endpreis-betrag { font-size: 38px; font-weight: 800; line-height: 1; text-align: right; }
.wt-endpreis-suffix { font-size: 13px; opacity: 0.9; text-align: right; margin-top: 6px; }

/* Aktions-Buttons (Zurück / Weiter) */
.wt-actions {
  display: flex; justify-content: space-between; gap: 12px; margin-top: 28px;
}
.wt-btn-back, .wt-btn-next {
  padding: 12px 24px; border-radius: 8px; font-size: 14px;
  font-weight: 700; cursor: pointer; border: 0; transition: all 0.2s;
}
.wt-btn-back { background: #f1f5f9; color: #475569; border: 1px solid #cbd5e1; }
.wt-btn-back:hover { background: #e2e8f0; }
.wt-btn-next { background: var(--upc-teal); color: #fff; }
.wt-btn-next:hover:not(:disabled) { background: var(--upc-teal-dark); }
.wt-btn-next:disabled { background: #cbd5e1; cursor: not-allowed; }

/* Speichern-Status (kleine Spinner-Zeile) */
.wt-saving-row {
  display: none; align-items: center; gap: 8px; font-size: 13px;
  color: #64748b; padding: 8px 12px; background: #f1f5f9;
  border-radius: 6px; margin-top: 8px;
}
.wt-saving-row.show { display: flex; }
.wt-saving-row::before {
  content: ''; display: inline-block; width: 14px; height: 14px;
  border: 2px solid var(--upc-teal); border-top-color: transparent;
  border-radius: 50%; animation: wtSpin 0.8s linear infinite;
}


/* ══════════════════════════════════════════════════════════════════════
   AMPELSYSTEM — Pflichtfeld-Ausfuell-Status (Etappe 11, 18.05.2026)
   Drei Zustaende:
     pf-ok   = gruen  — Feld ausgefuellt
     pf-leer = rosa   — Pflichtfeld, noch leer (KEIN Fehler-Rot!)
     neutral = optionale Felder — bekommen keinen Farbwechsel
   Wird per initAmpel() in wizard-logo-loader.js gesteuert.
   ══════════════════════════════════════════════════════════════════════ */

/* Die zwei Feld-Zustaende sind mit dem Feld nach bausteine.css gezogen
   (K5/02) — .bs-input.pf-leer / .pf-ok stehen dort beim Baustein. */

/* Auswahl-Kartengruppen (.kat-radio-group mit data-pflicht)
   ── 17.09.2026 (K8/01, A.1): DER GRUENE RAHMEN IST WEG. ──────────────────
   Dirks Regel: "Wenn, dann umranden wir nur Ja oder Nein gruen, aber nicht
   die gesamte Frage." GEMESSEN auf Schritt 1: die umrandete Gruppe ist
   984 px breit und die Beschriftung ("☀️ PV-Anlage Solar-Konfigurator")
   liegt DRIN — das Bedienteil selbst misst 239 px. Also eine ZEILE, kein
   Element. Beim Eingabefeld ist es umgekehrt: .bs-input faerbt NUR das Feld
   (border-color + background, bausteine.css 295/296), nicht die
   Beschriftung daneben — dort bleibt Gruen.
   >>> pf-leer BLEIBT. <<< Rosa sagt "hier fehlt noch etwas"; das ist eine
   Aussage. Gruen sagt nur "erledigt", und das zeigt die gefaerbte
   Schaltflaeche ohnehin. */
.kat-radio-group.pf-leer { outline: 2px dashed #f9a8d4; outline-offset: 6px; border-radius: 8px; }

/* ── 17.09.2026, R86: DIE BEIDEN .toggle-group-REGELN SIND ENTFERNT. ──────
   Hier standen .toggle-group.pf-leer und .pf-ok. GEPRUEFT: Es gibt im
   ganzen Wizard KEIN einziges Element mit dieser Klasse mehr — der
   Kommentar in wizard_schritt4.html Z.636 sagt es selbst ("Ersetzt die
   alten .toggle-group/.toggle-card"). Die Regeln wirkten auf nichts.
   NICHT ANGEFASST: der Zweig in wizard-logo-loader.js Z.1231, der auf
   .toggle-group ODER .bs-yn-row prueft — er bedient weiterhin .bs-yn-row.
   Der tote Teil davon ist im Bericht vermerkt. */

/* Fortschrittszaehler */
.pf-zaehler {
  display: inline-block; margin-top: 8px;
  font-size: 0.78rem; color: var(--gray-med);
  background: #f1f5f9; border-radius: 20px; padding: 3px 12px;
}
.pf-zaehler.pf-voll { color: #15803d; background: #dcfce7; }

/* Zähler-Pille LINKS, AUS DEM FLUSS (v1.11). Vorher (v1.9) im Fluss
   (order:-1) -> verschob ueber Auto-Margins den Stepper: Pille gefuellt
   (1/3/4) = Stepper nach rechts, leer (2/5) = zentriert -> Stepper
   "wanderte". Jetzt position:absolute -> Pille nimmt KEINE Flussbreite ein,
   .wizard-steps zentriert in der VOLLEN Breite -> Stepper-Position auf
   JEDEM Schritt identisch (fix). Vertikal an der Mitte der 30px-Kreise.
   .wizard-progress ist position:sticky -> dient als Bezug (containing block)
   fuer die absolute Pille; keine zusaetzliche position:relative noetig. */
.pf-zaehler-row {
  position: absolute;
  /* 13.09.2026 (Entscheidung Dirk): die Pille gehoert an die
     INHALTSSPALTE, nicht an den Fensterrand. Vorher stand hier
     left: var(--space-xl) — 32 px vom Fenster. Auf breiten Schirmen
     lag sie damit weit links neben der Karte (gemessen: Pille bei
     32 px, Inhalt beginnt bei 92 px), und je breiter der Schirm,
     desto groesser der Abstand.
     >>> DIESELBE FORMEL, DIE .wizard-header SCHON BENUTZT (Z. 573).
         Damit fluchtet die Pille exakt mit dem Logo darueber. <<<
     max() haelt sie auf schmalen Schirmen bei --space-xl — dort
     aendert sich also nichts, und unter 1120 px greift ohnehin der
     Block weiter unten, der sie zentriert in eine eigene Zeile setzt.
     Keine feste Pixelzahl: beide Werte sind Token, --wizard-breite
     haengt am Regler wizard_seitenbreite. Und die Pille bleibt AUS
     DEM FLUSS — der Stepper wandert dadurch weiterhin nicht (v1.11). */
  left: max(var(--space-xl), calc((100% - var(--wizard-breite, 1080px)) / 2));
  top: calc(var(--space-md) + 15px);   /* Mitte der Kreis-Reihe (30px-Kreise) */
  transform: translateY(-50%);
  margin: 0;
  max-width: none;
  z-index: 1;
}
.pf-zaehler-row .pf-zaehler {
  background: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.85);
  border: 1px solid rgba(255,255,255,0.22);
  margin-top: 0;
  white-space: nowrap;
}
.pf-zaehler-row .pf-zaehler.pf-voll {
  background: rgba(220,252,231,0.88);
  color: #15803d;
  border-color: rgba(134,239,172,0.4);
}
/* K4/03 (07.09.2026): DER BERATER-KASTEN — das Spiegelbild der Pille, RECHTS.
   Bis heute war er ein Flex-Kind der Leiste mit Inline-Stil (loader v1.14):
   er nahm Breite weg, .wizard-steps (margin:0 auto) rueckte nach links, und
   die absolute Pille "X von 9" lag ueber dem ersten Kreis. Jetzt AUS DEM
   FLUSS wie die Pille (position:absolute, Kreis-Hoehe), rund (20px wie
   .pf-zaehler, R86), kurz ("Berater-Modus · DLo"). Bezug ist .wizard-progress
   (sticky), wie bei der Pille. */
.pv-berater-hinweis {
  position: absolute;
  right: var(--space-xl);
  top: calc(var(--space-md) + 15px);
  transform: translateY(-50%);
  z-index: 1;
  display: inline-block;
  font-size: 0.78rem; line-height: 1.4;
  padding: 3px 12px;
  border-radius: 20px;
  color: #7a4a12; background: #fff6e6; border: 1px solid #f0d9a8;
  white-space: nowrap;
}
/* Bis 1120px reicht der linke Freiraum nicht (der voll-breit zentrierte
   Stepper wuerde die absolute Pille beruehren) -> Pille zurueck IN DEN FLUSS,
   zentriert UEBER dem Stepper (eigene Zeile). Kein Overlap; gilt fuer
   Tablet + Mobil. K4/03: der Berater-Kasten geht denselben Weg, UNTER den
   Stepper (eigene Zeile, zentriert). */
@media (max-width: 1120px) {
  .wizard-progress { justify-content: center; }
  .pf-zaehler-row {
    position: static;
    transform: none;
    left: auto;
    top: auto;
    order: -1;
    flex-basis: 100%;
    margin: 0 auto 8px;
    text-align: center;
  }
  .pv-berater-hinweis {
    position: static;
    transform: none;
    right: auto;
    top: auto;
    order: 1;
    flex-basis: auto;
    margin: 8px auto 0;
    white-space: normal;
  }
}

/* ── IBN-WAHLKNOEPFE (17.08.2026) ────────────────────────────────────────────
   Standen bis heute NUR in wizard_schritt3.html. Seit die Volleinspeisung
   Schritt 3 ueberspringt, braucht Schritt 2 dieselben Knoepfe. Statt die Regeln
   zu kopieren (zwei Staende, die auseinanderlaufen) stehen sie jetzt hier --
   und Schritt 3 hat seine Kopie abgegeben. Werte BYTE-GLEICH uebernommen. */
.ibn-btn {
  height: 38px;
  border: 1.5px solid var(--gray-light);
  background: var(--bg-soft);
  border-radius: var(--radius-md);
  padding: 0 12px;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.ibn-btn.active { border-color: var(--upc-teal); background: var(--upc-teal-light); color: var(--upc-teal-dark); }
.ibn-btn:hover  { border-color: var(--upc-teal); }

/* ── Kleinauftrag 01.10.2026: KEIN "ADRESSE SPEICHERN?" ─────────────────────
   Die Felder des Endkunden tragen autocomplete="pv-kunde-…" und sind, wo sie
   Text sind, type="search" (Chrome uebergeht autocomplete="off" bei Name und
   Anschrift). Diese Regel sorgt dafuer, dass sie aussehen wie vorher: keine
   Such-Darstellung, kein Loeschkreuz. Kein neuer Klassenname - das Attribut
   ist die Markierung. */
input[type="search"][autocomplete^="pv-kunde-"] { -webkit-appearance: none; appearance: none; }
input[autocomplete^="pv-kunde-"]::-webkit-search-cancel-button,
input[autocomplete^="pv-kunde-"]::-webkit-search-decoration { -webkit-appearance: none; display: none; }

/* Cookie-Knopf von CCM19 (.ccm-settings-summoner, sonst links 40 px, unten 40 px): links buendig
   am Inhalt, unten auf Hoehe des Chat-Knopfs. !important, weil CCM19 seine Stile selbst setzt. */
.ccm-settings-summoner { left: var(--pv-rand-l, var(--space-md)) !important; right: auto !important; bottom: var(--pv-knopf-unten) !important; }
/* Abstand unten im Inhalt: am Seitenende verdecken die Knoepfe weder Text noch "Weiter". */
.wizard-main { padding-bottom: max(var(--space-3xl), calc(var(--pv-cb-knopf) + var(--pv-knopf-unten) * 2)); }

/* ── HILFETEXTE AM INFO-SYMBOL (Kette Assistent 04, 04.10.2026) ──
   Das Symbol ist .feld-info (oben, v1.13). Neu nur: Absaetze im Kasten, ein
   etwas breiterer Kasten, wenn eine Zeichnung drin ist, und die Zeichnung
   selbst (SVG in der Seite, Farben ueber Tokens). */
.feld-info-text .pv-hilfe-absatz { display: block; margin-top: var(--space-xs); }
.feld-info-text.mit-bild { width: min(300px, calc(100vw - 16px)); max-width: none; }
.pv-hilfe-i .feld-info-text::after { left: var(--pv-pfeil-x, 13px); }
.pv-hilfe-bild { margin-top: var(--space-sm); padding: var(--space-xs); background: var(--bs-field-bg); border-radius: var(--radius-sm); }
.pv-hilfe-bild svg, .pv-hilfe-bild img { display: block; width: 100%; height: auto; }
/* 10.10.2026 (Wuensche): Reihenfolge der Teile ueber der Karte, aktueller Teil hervorgehoben
   (wizard-logo-loader.js pvWuenscheZeichnen). Bricht am Telefon um, nichts wird abgeschnitten. */
.pv-wuensche-leiste {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px;
  margin: 0 0 var(--space-md, 16px); font-size: 0.9rem; color: var(--gray-med);
}
.pv-wuensche-teil { padding: 3px 10px; border-radius: 20px; border: 1px solid var(--gray-light); background: transparent; }
.pv-wuensche-teil.aktuell { color: var(--upc-teal-dark); border-color: var(--upc-teal); background: var(--upc-teal-light); font-weight: 700; }
.pv-wuensche-trenner { color: var(--gray-med); }