/* ── SOLANERO V2 · Luxury Platform · Design System ── */
/* Leitidee: Architektur- und Outdoor-Living-Magazin            */
/* Palette: SONNENSCHUTZ_LUXURY_PLATFORM_REDESIGN_20260714.md   */

:root {
  /* ── Luxury Palette ── */
  --deep:        #163E52;   /* Tiefes Atlantikblau — Nav, Hero, Footer */
  --forest:      #4F6E78;   /* Gedaempftes Himmelblau, abgedunkelt fuer WCAG-AA-Textkontrast (Audit 20260804: 1.89:1 -> 5.48:1, mit Sicherheitsmarge nach Fund auf preise-planung.html bei 4.49:1) — Links, Aktiv */
  --leaf:        #a8d6e8;   /* Helles Blau — Hover */
  --sage:        #8A958F;   /* Salbeigrau — Sekundäre Elemente */
  --mint:        #EEF4F5;   /* Heller Sand — Selektion, Chips */
  --sun:         #D87947;   /* Sonnenterrakotta — Haupt-CTA */
  --sun-mid:     #e08a5a;   /* Terrakotta hell */
  --sun-light:   #F7FAFA;   /* Warmes Ivory hell */
  --sun-yellow:  #C9A66B;   /* Champagner — Gold-Akzent */
  --champagne:   #C9A66B;   /* Alias Champagner */
  --champagne-text: #846D46; /* Champagner abgedunkelt fuer WCAG-AA-Textkontrast auf Weiss/Hell (Audit 20260804: 2.29:1 -> 4.93:1); nur fuer kleine Eyebrow-/Label-Texte, nicht das globale --champagne-Token ersetzen */
  --sun-text:    #AC6038;   /* Terrakotta abgedunkelt fuer WCAG-AA-Textkontrast (Audit 20260804: 3.11:1 -> 4.68:1); nur fuer Text-auf-Hell, nicht das globale --sun-Token ersetzen */
  --terra:       #D87947;   /* Sonnenterrakotta */
  --sand:        #F4F7F7;   /* Heller Sand — Abschnitte */
  --stone:       #EEF3F4;   /* Warm Stone — Abwechselung */
  --pebble:      #D7E1E3;   /* Pebble warm */
  --border:      #DDE5E7;   /* Subtile warme Linie */
  --border-cool: #DCE7EB;   /* Kühle Linie für Functional-Bereiche */
  --text:        #252A2D;   /* Anthrazit */
  --text-mid:    #4a5057;   /* Mittleres Anthrazit */
  --muted:       #8A958F;   /* Salbeigrau */
  --white:       #FFFFFF;   /* Warmes Ivory — Seiten-Bg */
  --pure:        #FFFFFF;   /* Reinweiß — Nav, Karten */
  --serif:       'Georgia','Times New Roman',serif;
  --sans:        'Inter','Helvetica Neue',system-ui,-apple-system,sans-serif;
  --cw:          1140px;
  --pad:         20px;
  --pad-lg:      40px;
  --r:           6px;
  --r-lg:        12px;

  /* ── Premium-Sommer-/Outdoor-Living-Tokens (MVP-Design-Pass 20260731) ──
     Bestandsaufnahme + zentrale Tokens laut docs/SOLANERO_MARKT_PRODUKT_MVP_20260731.md
     "Gestaltungssystem": hell, sommerlich, hochwertig statt schwerer dunkler
     Flaechen. Additiv -- bestehende Tokens (--deep, --sun, --champagne etc.)
     bleiben unveraendert und weiter gueltig, damit nichts auf den ~85 noch
     nicht angefassten Seiten bricht. --deep wird ab jetzt bewusst nur noch
     fuer Text/kleine Kontrastflaechen eingesetzt, nicht mehr fuer grossflaechige
     Hintergruende (siehe Verwendung weiter unten auf den 3 Pilotseiten). */
  --sun-salt:     #FFFFFF;  /* Salzweiss/warmes Creme — dominante helle Flaeche */
  --sun-salt-2:   #F5F8F8;  /* leicht dunklerer Salzweiss-Ton fuer Abschnittswechsel */
  --lagoon:       #2C7A9C;  /* klares Wasser-/Lagunen-/Mittelmeerblau — Marke, Interaktion */
  --lagoon-dark:  #1F5C77;  /* dunklere Lagunen-Stufe fuer Text auf hellem Grund/Hover */
  --lagoon-light: #EAF4F7;  /* sehr helles Lagunenblau fuer Flaechen/Chips */
  --seagreen:     #6FA79A;  /* dezentes Seegruen — nur dekorativ/grossflaechig, NICHT fuer Fliesstext (Kontrast 2.58:1 auf --sun-salt) */
  /* Kontrast-Check (WCAG AA, 4.5:1 fuer Fliesstext): #E0663F/Weiss ergab nur
     3.42:1 -- durchgefallen. --coral ist daher die kontrastgeprueft nutzbare
     CTA-Farbe (4.72:1 mit weisser Schrift), --coral-light nur fuer grosse/
     dekorative Flaechen ohne kleinen Text darauf. */
  --coral:        #C24F2C;  /* Sonnenkorall/Terrakotta — kontraststarke CTA-Farbe, AA-konform mit weisser Schrift */
  --coral-light:  #E0663F;  /* hellere Terrakotta-Stufe — nur dekorativ/Hover, nicht fuer Text-tragende Flaechen */
  /* Nutzer-Designentscheidung 20260731: Solar Cyan-Mint als Anregung erhalten,
     bewusst NICHT grossflaechig als Hero-/Markenflaeche (wirkt sonst Tech-/
     Fintech-artig, Kontrast mit weisser Schrift unzureichend) -- ausschliesslich
     als punktuelle Frische-Signatur: aktive Zustaende, feine Linien, kleine
     Akzent-Punkte/Icons. NIEMALS als Fliesstextfarbe (Kontrast auf --sun-salt
     unzureichend, aehnlich --seagreen). */
  --mint-signature: #00D8B6;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  color: var(--text);
  background: var(--white);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: var(--sans); cursor: pointer; }
/* 20260822 (cc_48e77680, 888-Seiten-Audit): reale mobile Horizontal-
   Overflow-Funde per Chromium+WebKit-Crawl -- lange deutsche
   Komposita-Woerter (z.B. "Planungspartnerbedingungen",
   "Terrassenueberdachungen") in Ueberschriften brechen bei 390px sonst
   nicht um und schieben scrollWidth ueber den Viewport hinaus. */
h1, h2, h3 { overflow-wrap: normal; word-break: normal; hyphens: none; }

/* ── RIBBON ── */
.ribbon {
  background: #7c3aed; color: #ede9fe;
  font-size: 10.5px; font-weight: 700; text-align: center;
  padding: 6px 16px; letter-spacing: .2px;
}
/* Header-Audit 20260729: Vorschau-Leiste brach bei <480px in 2 Zeilen um und
   machte den Header dadurch hoeher/wirkte "mehrzeilig" -- sitewide, nicht nur
   auf Ratgeber (per Screenshot-Vergleich bestaetigt). Einzeilig mit Ellipsis
   statt Umbruch, voller Text bleibt ueber title-Tooltip erreichbar. */
@media(max-width:479px){
  .ribbon { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 6px 12px; }
}

/* ── CONTAINER ── */
.cw { max-width: var(--cw); margin: 0 auto; padding: 0 var(--pad); }
/* a11y-Audit 20260804: Standard-Utility fuer nur fuer Screenreader sichtbaren
   Text -- z.B. fehlende Zwischenueberschriften, die die Ueberschriftenhierarchie
   korrekt halten, ohne das bestehende visuelle Design zu veraendern. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
@media(min-width:768px){ .cw { padding: 0 var(--pad-lg); } }

/* ── NAV — Reinweiß, Anthrazit, Champagner-CTA ── */
/* Header-System-Vereinheitlichung 20260718: --nav-fg-strong/--nav-tint/
   --nav-underline sind die EINZIGE Quelle fuer Hover-/Active-Farben aller
   Top-Level-Nav-Elemente (Links, Produkte-/Partner-Dropdown-Trigger, Login).
   Vorher hatten .nav-links, .nav-drop-trigger und die White-Premium-Override-
   Sektion je eigene, leicht unterschiedliche Grau-/Blau-Toene -- daher wirkte
   der aktive "Produkte"-Zustand wie ein Fremdkoerper. Immersive Hero-Varianten
   (weiter unten) ueberschreiben ausschliesslich diese drei Variablen, nie die
   Elemente einzeln. */
.nav {
  position: sticky; top: 0; z-index: 200;
  background: var(--pure);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 8px rgba(37,42,45,.06);
  transition: background .38s cubic-bezier(.4,0,.2,1), box-shadow .38s ease, border-color .38s ease, top .3s ease;
  --nav-fg-strong: var(--brand-blue, var(--deep));
  --nav-tint: #f4f8fa;
  --nav-underline: var(--brand-orange, var(--sun));
}
.nav-inner {
  display: flex; align-items: center; min-height: 68px;
  max-width: var(--cw); margin: 0 auto; padding: 0 var(--pad); gap: 4px;
  transition: min-height .38s cubic-bezier(.4,0,.2,1);
  /* B1.26 (Zoom-/Responsive-Remediation 20260905): height -> min-height
     erlaubt der Zeile, in der Hoehe zu wachsen, statt Inhalt abzuschneiden.
     .nav-inner selbst bleibt bewusst nowrap (kein flex-wrap hier): ein
     frueherer Versuch mit flex-wrap direkt auf .nav-inner erzeugte eine
     eigene, neue Regression -- die margin-right:auto-Logik von .nav-brand
     (schiebt den Rest der Zeile nach rechts) berechnet unter flex-wrap ihren
     freien Platz messbar falsch (Playwright-Nachweis: .nav-cta sprang schon
     bei normalem 1440px-Viewport ohne jeden Zoom auf eine zweite Zeile unter
     das Logo, obwohl der Originalinhalt nachweislich in eine Zeile passt).
     Die tatsaechlich robuste Loesung liegt eine Ebene tiefer: .nav-links
     (siehe dort, min-width:0 + eigenes flex-wrap) darf als EIN Flex-Item
     dieser Zeile unter seine eigene Textbreite schrumpfen und intern auf
     mehrere Zeilen umbrechen -- dadurch bleibt die Zeile insgesamt nowrap,
     nav-cta bleibt an ihrem Platz, und nur .nav-links selbst waechst in der
     Hoehe, was min-height hier zulässt. Bei allen realen Standard-
     Breakpoints (390-1440px) bleibt dies ein reines No-Op, da .nav-links dort
     nie schrumpfen muss; erst bei 200-%-Zoom greift es sichtbar. */
}
/* P0 High-End-Redesign 20260716: Sticky-Shrink-Header (site-chrome.js setzt
   .is-compact ab 40px Scroll-Position) -- Referenz weinor/Renson, siehe
   SOLANERO_REFERENZMATRIX_20260716.md Abschnitt 1. Rein additiv, aendert an
   keiner Seite die Grundhoehe vor dem ersten Scroll. */
.nav.is-compact { box-shadow: 0 4px 22px rgba(22,62,82,.12); }
.nav.is-compact .nav-inner { min-height: 52px; }
.nav.is-compact .nav-mark svg { width: 15px; height: 15px; }
.nav.is-compact .nav-mark img { width: 15px; height: 15px; }
.nav.is-compact .nav-name small { display: none; }
@media(min-width:768px){ .nav-inner { padding: 0 var(--pad-lg); } }

/* Markenicon 20260717: flaches, offenes S-Monogramm (assets/brand/solanero-mark.svg) --
   bewusst OHNE Kreis/Box/Schatten (Konsistenzregel), Farbe folgt currentColor ueber
   die color-Deklaration hier, damit dieselbe Regel Basis- und Dark-Hero-Zustand traegt. */
.nav-brand { display: flex; align-items: center; gap: 10px; margin-right: auto; flex-shrink: 0; }
.nav-mark { display: flex; align-items: center; justify-content: center; color: var(--deep); }
.nav-mark svg { width: 21px; height: 21px; display: block; }
.nav-mark img { width: 21px; height: 21px; display: block; }
.nav-name {
  font-family: var(--serif); font-size: 16px; font-weight: 700;
  color: var(--text); line-height: 1.1;
}
.nav-name small {
  display: block; font-family: var(--sans); font-size: 9px; font-weight: 500;
  color: var(--muted); text-transform: uppercase; letter-spacing: .6px; margin-top: 2px;
}

.nav-links { display: none; align-items: center; gap: 0; flex-wrap: wrap; row-gap: 2px; min-width: 0; }
@media(min-width:1080px){ .nav-links { display: flex; } }
.nav-links a {
  position: relative;
  font-size: 12.5px; color: var(--text-mid); padding: 8px 12px;
  border-radius: 4px; white-space: nowrap; transition: color .15s ease, background .15s ease;
  letter-spacing: .01em; font-weight: 500;
}
/* Vereinheitlichter Hover-/Active-Zustand (Header-System-Vereinheitlichung
   20260718): dezente Toenung + feine Unterstreichung statt grauem Block,
   identisch fuer Links UND Dropdown-Trigger (.nav-drop-trigger deckt sowohl
   "Produkte" als auch "Partner" ab). Hover = Toenung + halbe Linie, Active =
   volle Linie + Fettung, klar unterscheidbar. */
.nav-links a::after,
.nav-drop-trigger::before {
  content: ''; position: absolute; left: 12px; right: 12px; bottom: 3px;
  height: 2px; border-radius: 1px; background: var(--nav-underline);
  transform: scaleX(0); opacity: 0; transition: transform .18s ease, opacity .18s ease;
}
.nav-links a:hover,
.nav-links a:focus-visible,
.nav-drop-trigger:hover,
.nav-drop-trigger:focus-visible,
.nav-drop:focus-within .nav-drop-trigger {
  color: var(--nav-fg-strong); background: var(--nav-tint);
}
.nav-links a:hover::after,
.nav-drop-trigger:hover::before,
.nav-drop-trigger:focus-visible::before,
.nav-drop:focus-within .nav-drop-trigger::before {
  transform: scaleX(.5); opacity: .55;
}
.nav-links a.active,
.nav-drop-trigger.active {
  color: var(--nav-fg-strong); font-weight: 700; background: transparent;
}
.nav-links a.active::after,
.nav-drop-trigger.active::before { transform: scaleX(1); opacity: 1; }

.nav-cta { display: none; margin-left: 12px; }
@media(min-width:768px){ .nav-cta { display: inline-flex; } }
.nav-cta {
  align-items: center; background: var(--deep); color: var(--pure) !important;
  font-size: 12.5px; font-weight: 600; padding: 10px 20px;
  border-radius: 4px; white-space: nowrap; transition: background .2s;
  letter-spacing: .02em;
}
.nav-cta:hover { background: #0e2a38; }

/* Partnerzugang — typografisch gleichwertig zu den Endkunden-Menüpunkten, durch dezente Trennlinie als eigener Bereich erkennbar (P0-Redesign 20260715: vorher gerahmter Pill-Button, wirkte wie zweite CTA) */
.nav-partner-link {
  display: none; align-items: center; gap: 6px; margin-left: 14px; padding: 8px 12px 8px 16px;
  font-size: 12.5px; font-weight: 500; color: var(--text-mid); border-left: 1px solid var(--border);
  white-space: nowrap; letter-spacing: .01em; transition: color .15s, background .15s;
  border-radius: 0 4px 4px 0;
}
@media(min-width:1080px){ .nav-partner-link { display: inline-flex; } }
.nav-partner-link:hover { color: var(--nav-fg-strong); background: var(--nav-tint); }
.nm-partner-group { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--border); }
.nm-partner-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 8px; }
.nm-partner-link { display: block; font-size: 14px; color: var(--forest) !important; font-weight: 700; padding: 10px 0; }

/* Sichtbarer Desktop-Login-Zugang zwischen Partner-Dropdown und Haupt-CTA
   (P0 2026-07-17: René fand den Login im Desktop-Header nicht — Mobile hatte
   ihn bereits, Desktop nur versteckt im Dropdown). Gilt fuer Fachpartner,
   Montagepartner & Hersteller gleichermassen. */
.nav-login {
  display: none; align-items: center; gap: 6px; margin-left: 10px; padding: 8px 12px;
  font-size: 12.5px; font-weight: 600; color: var(--deep); border: 1px solid var(--border-cool, var(--border));
  border-radius: 4px; white-space: nowrap; letter-spacing: .01em; transition: all .15s;
}
@media(min-width:1080px){ .nav-login { display: inline-flex; } }
.nav-login:hover { background: var(--nav-tint); border-color: var(--nav-fg-strong); color: var(--nav-fg-strong); }
.nav-login svg { width: 14px; height: 14px; flex-shrink: 0; }

/* Kundenkonto-Zugang "Mein SOLANERO" (Premium-Ueberarbeitung 20260722): eigener,
   champagnerfarbig abgesetzter Link neben dem neutralen Partner-Login -- macht die
   Trennung Kunde/Fachpartner sofort erkennbar (Auftrag Punkt 2), ohne den
   bestehenden Partnerbereich-Zugang zu verdraengen. Gleiches Strukturmuster wie
   .nav-login, siehe apply_kunden_login_nav_20260722.py. */
.nav-kunden-login {
  display: none; align-items: center; gap: 6px; margin-left: 10px; padding: 8px 12px;
  font-size: 12.5px; font-weight: 700; color: var(--champagne); border: 1px solid var(--champagne);
  /* Launch-Review 20260728 (A1): reiner Rahmen ohne Flaeche hatte auf Fotos/
     hellen Flaechen zu wenig Kontrast (Nutzer-/Review-Fund "Mein SOLANERO
     schlecht lesbar"). Dezente Flaechenfarbe verbessert die Basis-Lesbarkeit
     auf allen nicht-transparenten (weissen) Nav-Zustaenden, ohne das Element
     optisch zu verschieben. */
  background: rgba(201,166,107,.12);
  border-radius: 4px; white-space: nowrap; letter-spacing: .01em; transition: all .15s;
}
@media(min-width:1080px){ .nav-kunden-login { display: inline-flex; } }
.nav-kunden-login:hover { background: var(--champagne); color: #fff; }
.nav-kunden-login svg { width: 14px; height: 14px; flex-shrink: 0; }
/* Launch-Review 20260728 (A1): auf den transparenten Immersive-Hero-Seiten
   (Startseite/Produktseiten, siehe .nav-cta-Analogregel weiter unten im
   Stylesheet) war "Mein SOLANERO" durch die champagnerfarbene Schrift auf
   Fotohintergrund praktisch unleserlich. Gleiches Muster wie .nav-cta: solide,
   halbtransparente Flaeche + weisse Schrift, sobald der Hero noch nicht
   durchgescrollt ist (kompakter Zustand faellt automatisch auf die
   Basis-Regel oben zurueck, dort ist der Nav-Hintergrund bereits weiss). */
.nav:has(+ .hero-product-dark) .nav-kunden-login,
.nav:has(+ .hero-home) .nav-kunden-login {
  background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.65); color: #fff;
}
.nav:has(+ .hero-product-dark) .nav-kunden-login:hover,
.nav:has(+ .hero-home) .nav-kunden-login:hover { background: #fff; color: var(--deep); border-color: #fff; }

/* Zusaetzlicher, optisch abgesetzter Eintrag im Partner-Dropdown */
.nav-drop-item-login { border-top: 1px dashed var(--border); margin-top: 4px; padding-top: 13px; }
/* Rollengetrennte Logins 20260717: drei Eintraege (Fachpartner/Montagepartner/Hersteller) teilen
   sich EINE Trennlinie oberhalb des Blocks statt je einer eigenen dashed border. */
.nav-drop-item-login + .nav-drop-item-login { border-top: none; margin-top: 0; padding-top: 10px; }

.nav-burger { display: flex; flex-direction: column; gap: 5px; padding: 8px; cursor: pointer; margin-left: 4px; }
@media(min-width:1080px){ .nav-burger { display: none; } }
.nav-burger span { display: block; width: 22px; height: 1.5px; background: var(--text); border-radius: 2px; }

.nav-mobile {
  display: none; background: var(--pure); padding: 12px var(--pad) 20px;
  border-top: 1px solid var(--border);
}
/* Header-Responsive-Fix 20260801: Scroll-Lock waehrend geoeffnetem Mobilmenue
   (gesetzt von site-chrome.js mobileMenuVerhalten() synchron zu .nav-mobile.open). */
body.nav-scroll-lock { overflow: hidden; }
@media(min-width:768px){ .nav-mobile { padding: 12px var(--pad-lg) 20px; } }
/* P0-Fix 20260717: .nav ist auf Hero-Seiten (siehe :has(+ .hero-home)-Regel
   weiter unten) position:fixed -- das Mobile-Menu als Kind von .nav bewegt sich
   dadurch nie mit dem Seiten-Scroll mit. Ohne eigenes Overflow-Scrolling waren
   untere Eintraege (u.a. Partner-Login) bei kurzen Viewports (390x844) technisch
   vorhanden, aber fuer echte Nutzer nicht erreichbar. Eigenes internes Scrollen
   loest das unabhaengig vom Fixed/Sticky-Zustand des Nav. Zusaetzlicher unterer
   Puffer (padding-bottom), weil die fixe mobile .action-bar (Schnellaktionen,
   ~899px-Breakpoint) sonst den letzten Eintrag ueberlagert und Klicks abfaengt
   -- exakt das bereits bekannte Action-Bar-Overlap-Muster (siehe SOLANERO
   WAREMA-Social-Band-Fix 20260717). */
.nav-mobile.open {
  display: block; max-height: calc(100vh - 68px); overflow-y: auto; -webkit-overflow-scrolling: touch;
  /* Puffer 2026-07-20 von 70px auf 120px erhoeht: QA-Fund (Playwright,
     390x844) zeigte, dass 70px nicht ausreichte -- selbst voll durch-
     gescrollt blieben ~39px des letzten Eintrags (Partner-Konsolidierung
     auf Direktlink) unter der fixen .action-bar (~64px hoch) verdeckt und
     damit fuer echte Taps unerreichbar. */
  padding-bottom: calc(120px + env(safe-area-inset-bottom));
}
@media(min-width:900px){ .nav-mobile.open { padding-bottom: 20px; } }
.nav-mobile a {
  display: block; font-size: 15px; color: var(--text-mid);
  padding: 12px 0; border-bottom: 1px solid var(--border); font-weight: 500;
}
.nm-cta {
  background: var(--deep); color: var(--pure) !important;
  text-align: center; padding: 14px !important; border-radius: 4px;
  margin-top: 12px; border-bottom: none !important; font-weight: 600;
}
/* Zentraler Mobile-Login (Partnernav-Konsolidierung 20260720): .nav-login ist
   erst ab 1024px sichtbar -- ohne diesen Ersatz haetten mobile Nutzer nach
   Entfernung der 3 einzelnen Rollen-Login-Links keinen Login-Zugang mehr. */
.nm-login {
  text-align: center; border: 1px solid var(--border-cool, var(--border));
  border-radius: 4px; margin-top: 10px; font-weight: 600; color: var(--deep) !important;
}
/* Mobiles Pendant zu .nav-kunden-login, siehe Kommentar dort. Launch-Review
   20260728 (A1): gleiche dezente Flaechenfarbe wie beim Desktop-Basiszustand
   fuer bessere Lesbarkeit (Rahmen allein auf hellem .nav-mobile-Hintergrund
   zu kontrastarm). */
.nm-kunden-login {
  display: block; text-align: center; border: 1px solid var(--champagne);
  background: rgba(201,166,107,.12);
  border-radius: 4px; margin-top: 10px; padding: 10px 0; font-weight: 700; color: var(--champagne) !important;
}

/* ── BUTTONS ── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 600; padding: 14px 26px;
  border-radius: 4px; border: none; transition: all .2s; cursor: pointer;
  letter-spacing: .02em;
}
/* --sun/--sun-mid bleiben als Marken-Akzentfarbe fuer Text/Icons/Border erhalten;
   fuer weissen Button-Text auf dieser Flaeche reicht ihr Kontrast (3.1:1) nicht
   fuer WCAG AA (4.5:1) -- eigene CTA-Variante nur fuer diesen Fall.
   20260929-Fresh-Fix: #AC6038 war ein blass-braunes, "dunkles Orange" (Nutzer-
   feedback). #BF4A2A ist ein saettigungsstaerkeres, frischeres Koralle-Orange
   bei fast identischem Kontrast (4.97:1 statt 4.68:1 fuer #fff, weiterhin AA). */
.btn-sun { background: #E89A6A; color: #173F52; }
.btn-sun:hover { background: #F0AA7A; color:#123747; transform: translateY(-1px); }
.btn-terra { background: #BF4A2A; color: #fff; }
.btn-terra:hover { background: #A83F22; }
.btn-champagne { background: var(--champagne); color: #fff; }
.btn-champagne:hover { background: #b89258; }
.btn-forest { background: var(--deep); color: #fff; }
.btn-forest:hover { background: #0e2a38; }
.btn-sky { background: var(--deep); color: #fff; }
.btn-sky:hover { background: #0e2a38; }
/* Launch-Review 20260728: sekundaerer CTA-Button auf dunklem Grund umgebaut.
   Vorher transparent+weisser Text -- auf manchen dunklen Flaechen/Kombis
   nicht zuverlaessig lesbar. Jetzt durchgaengig heller Button mit
   dunkelblauer Schrift im Normalzustand (WCAG-Kontrast unabhaengig vom
   Hintergrund gesichert), dunkler Hover-Zustand, sichtbarer Fokusring fuer
   Tastaturbedienung. Gilt global fuer alle .btn-outline-w, unabhaengig von
   Hero-/Footer-Kontext. */
.btn-outline-w { background: #fff; color: var(--deep); border: 1.5px solid var(--deep); }
.btn-outline-w:hover { background: var(--deep); color: #fff; border-color: #fff; }
.btn-outline-w:focus-visible { outline: 2.5px solid var(--champagne); outline-offset: 2px; }
/* .btn-outline war in mehreren Regionalseiten bereits referenziert, aber nie
   definiert (fiel auf reines .btn zurueck) -- hier zentral ergaenzt statt
   Einzelpatch je Seite (Z-930 Template-First). */
.btn-outline { background: transparent; color: var(--deep); border: 1.5px solid var(--border-cool); }
.btn-outline:hover { background: var(--stone); border-color: var(--deep); }
.btn-ghost {
  background: transparent; color: var(--deep);
  border: 1px solid var(--deep); padding: 12px 22px;
}
.btn-ghost:hover { background: var(--stone); }
.btn-ghost-light {
  background: transparent; color: rgba(255,255,255,.8);
  border: 1px solid rgba(255,255,255,.3); padding: 12px 22px;
}
.btn-ghost-light:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.7); }
.btn-lg { font-size: 14.5px; padding: 16px 32px; }
.btn-sm { font-size: 12px; padding: 8px 16px; }

/* ── HERO — Atmosphärische Vollbild-Inszenierung ── */
.hero { padding: 80px 0 72px; }

/* Homepage: 80vh, dunkles Abendlicht-Feeling */
.hero-home {
  min-height: 80vh;
  display: flex;
  align-items: center;
  padding: 0;
  background:
    radial-gradient(ellipse at 78% 55%, rgba(201,166,107,.2) 0%, transparent 42%),
    radial-gradient(ellipse at 15% 80%, rgba(216,121,71,.12) 0%, transparent 38%),
    linear-gradient(158deg, #08181f 0%, #163E52 40%, #1c4d66 72%, #0c1e2a 100%);
}
.hero-home .hero-cw {
  max-width: var(--cw); margin: 0 auto; padding: 100px var(--pad) 100px;
  width: 100%;
}
@media(min-width:768px){ .hero-home .hero-cw { padding: 120px var(--pad-lg) 120px; } }

/* Produkt-Hubs: Premium Atlantikblau */
.hero-product {
  background:
    radial-gradient(ellipse at 70% 30%, rgba(201,166,107,.14) 0%, transparent 40%),
    linear-gradient(155deg, #0c2635 0%, #163E52 42%, #1e5570 100%);
  padding: 72px 0 60px;
}

/* Hero Typografie */
.hero-eyebrow {
  font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255,255,255,.4); margin-bottom: 28px; font-weight: 500;
}
.hero-home h1 {
  font-family: var(--serif); font-size: clamp(34px, 6vw, 68px);
  color: #fff; font-weight: 400; line-height: 1.06;
  letter-spacing: -.02em; max-width: 760px; margin-bottom: 24px;
}
.hero-home h1 em { font-style: italic; color: var(--champagne); font-weight: 300; }
.hero-sub-lux {
  font-size: clamp(15px, 2vw, 17px); color: rgba(255,255,255,.62);
  line-height: 1.9; max-width: 480px; margin-bottom: 44px;
  font-weight: 400;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 48px; }

/* Legacy hero classes (product pages) */
.hero-tag {
  display: inline-flex; align-items: center;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
  color: rgba(255,255,255,.8); font-size: 11px; font-weight: 600;
  padding: 4px 14px; border-radius: 20px; text-transform: uppercase;
  letter-spacing: .5px; margin-bottom: 20px;
}
.hero h1 {
  font-family: var(--serif); font-size: clamp(26px, 5vw, 50px);
  color: #fff; font-weight: 400; line-height: 1.1;
  letter-spacing: -.018em; margin-bottom: 18px; max-width: 640px;
}
.hero h1 em { font-style: italic; color: var(--champagne); font-weight: 300; }
.hero-sub {
  font-size: clamp(14.5px, 2vw, 16.5px); color: rgba(255,255,255,.65);
  line-height: 1.85; max-width: 520px; margin-bottom: 36px;
}
.hero-stats { display: flex; flex-wrap: wrap; gap: 28px; }
.hero-stat-n { font-family: var(--serif); font-size: 22px; font-weight: 700; color: #fff; }
.hero-stat-l { font-size: 11px; color: rgba(255,255,255,.4); margin-top: 3px; letter-spacing: .04em; }

/* MASTERSTANDARD-Fix 20260717: ersetzt die KPI-Kacheln (7 Produktwelten /
   1:1 / 72h / 0 €) auf der Startseite -- wirkten wie Vergleichsportal-
   Badges, nicht wie eine Premium-Marke. Dezente Fliesstext-Zeile ohne
   Boxen/Rahmen/Hintergrund statt Zahlen-Kacheln. */
.hero-trust-line {
  margin-top: 30px; font-size: 12.5px; letter-spacing: .015em;
  color: rgba(255,255,255,.55); line-height: 1.6;
}
@media(max-width:640px){ .hero-trust-line { font-size: 11.5px; } }

/* Korrekturpaket 2A-1 (20260731): Hero-Feinschliff nach Nutzerfeedback --
   ausschliesslich Typografie/Abstaende/CTA-Hierarchie/Overlay, keine neue
   Sektion, keine Umordnung. Sekundaerer Button jetzt "Fachbetrieb finden",
   "Projekt anfragen" als nachgeordneter Textlink statt drittem Button.
   Trust-Zeile auf 3 belegbare Punkte gekuerzt, keine "Geprueft"-Aussage mehr
   (Statusmodell-Konsistenz, siehe Paket 2B). */
.hero-home .hero-text-panel { padding: 40px 44px; background: rgba(7,18,26,.68); }
.hero-home .hero-eyebrow { margin-bottom: 22px; }
.hero-home .hero-sub-lux { margin-bottom: 36px; }
.hero-home .hero-actions { margin-bottom: 22px; align-items: center; }
.hero-home .hero-actions .btn-ghost-light { border-color: rgba(255,255,255,.55); }
.hero-tertiary-link {
  display: inline-block; font-size: 13px; color: rgba(255,255,255,.68);
  text-decoration: underline; text-underline-offset: 3px; margin-top: 2px;
}
.hero-tertiary-link:hover { color: #fff; }
.hero-home .hero-trust-line { margin-top: 4px; font-size: 12px; color: rgba(255,255,255,.62); text-shadow: 0 1px 3px rgba(0,0,0,.55); }
@media(max-width:640px){ .hero-home .hero-text-panel { padding: 26px 22px; } }

/* ── PRODUKTWELTEN — Cinematische Vollbild-Karten ── */
.pw-section { padding: 0 0 0; }
.pw-intro { max-width: var(--cw); margin: 0 auto; padding: 72px var(--pad) 48px; }
@media(min-width:768px){ .pw-intro { padding: 80px var(--pad-lg) 52px; } }
.pw-label {
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 16px; font-weight: 600;
}
.pw-intro-h {
  font-family: var(--serif); font-size: clamp(26px, 4vw, 44px);
  color: var(--text); font-weight: 400; line-height: 1.12;
  letter-spacing: -.018em; margin-bottom: 16px;
}
.pw-intro-sub {
  font-size: 15px; color: var(--text-mid); max-width: 480px; line-height: 1.85;
}

.pw-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
}
@media(max-width:640px){
  .pw-grid { grid-template-columns: 1fr; }
}
/* CSS-Konsolidierung 20260801: die urspruengliche "Cinematische Vollbild-
   Karte" (.pw-card als dunkler Bildhintergrund selbst, .pw-content als
   Overlay, .pw-markise/.pw-pergola/.pw-lamelle als atmosphaerische
   Verlaufs-Hintergruende ohne echte Fotos) ist durch die aktuelle "Bild oben
   + weisse Textzone unten"-Anatomie (siehe .pw-card/.pw-media/.pw-content
   weiter unten in dieser Datei, Kommentar "Startseite Produktwelten 20260719")
   vollstaendig ersetzt. Grep-bestaetigt: .pw-markise/.pw-pergola/.pw-lamelle/
   .pw-schirm/.pw-glas/.pw-segel werden nirgends sonst im Projekt referenziert
   -- hier ersatzlos entfernt statt als tote, verwirrende Parallel-Definition
   stehen zu lassen. .pw-grid (Basis-Layout) bleibt unveraendert bestehen. */
.pw-finder-hint {
  max-width: var(--cw); margin: 0 auto; padding: 28px var(--pad);
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  border-top: 1px solid var(--border);
}
@media(min-width:768px){ .pw-finder-hint { padding: 28px var(--pad-lg); } }
.pw-finder-text { font-size: 14px; color: var(--text-mid); }
.pw-finder-text strong { color: var(--text); }

/* ── SECTIONS ── */
.sec { padding: 80px 0; }
.sec-sand { background: var(--sand); }
.sec-stone { background: var(--stone); }
.sec-ivory { background: var(--sun-light); }
.sec-deep { background: var(--deep); }
.sec-sm { padding: 52px 0; }
.sec-lg { padding: 104px 0; }
@media(max-width:768px){ .sec { padding: 56px 0; } .hero { padding: 60px 0 52px; } }

/* ── LABELS / TAGS ── */
.tag-label {
  display: inline-block; font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .16em;
  padding: 4px 12px; border-radius: 2px; margin-bottom: 16px;
}
.tag-sun { background: transparent; color: var(--champagne-text); padding-left: 0; }
/* Auf dunklem Sektionshintergrund (.sec-deep) ist das unveraenderte helle
   --champagne bereits WCAG-AA-konform (4.9:1) -- die fuer Weiss abgedunkelte
   --champagne-text-Variante wuerde dort umgekehrt selbst zu wenig Kontrast
   haben (Audit 20260804, Fund markisen.html). */
.sec-deep .tag-sun { color: var(--champagne); }
.tag-forest { background: transparent; color: var(--deep); padding-left: 0; }
.tag-sky { background: transparent; color: var(--deep); padding-left: 0; }
.tag-stone { background: var(--stone); color: var(--text-mid); }
.tag-dark { background: rgba(255,255,255,.1); color: rgba(255,255,255,.7); }

/* ── TYPOGRAFIE ── */
.sec-h2 {
  font-family: var(--sans); font-size: clamp(24px, 4vw, 40px);
  font-weight: 500; line-height: 1.08; letter-spacing: -.035em;
  margin-bottom: 16px; color: var(--text);
}
.sec-h3 {
  font-family: var(--sans); font-size: clamp(18px, 3vw, 24px);
  font-weight: 600; line-height: 1.16; letter-spacing: -.02em; margin-bottom: 10px;
}
.sec-sub {
  font-size: 15.5px; color: var(--text-mid); line-height: 1.9;
  max-width: 540px; margin-bottom: 44px;
}
.on-dark .sec-h2, .on-dark .sec-h3 { color: #fff; }
.on-dark .sec-sub { color: rgba(255,255,255,.62); }

/* ── PROZESS / STEPS ──
   Launch-Review 20260728: grosse Schrittnummer ergaenzt -- vorher nur
   Fliesstext ohne jede visuelle Fuehrung, wirkte laut Review "textlastig". */
.steps-h { display: flex; flex-direction: column; gap: 40px; }
@media(min-width:768px){ .steps-h { flex-direction: row; gap: 48px; } }
/* B1.26: min-width:0 -- ein Flex-Item hat per Spezifikation implizit
   min-width:auto (= sein eigener Min-Content), "flex:1" allein hebt das
   nicht auf. Ohne diese Zeile weigert sich .step, unter seine eigene
   Textbreite zu schrumpfen, und sprengt die Zeile (identischer
   Root-Cause wie bei den .g2/.g3/.g4/.q-grid-Grids oben). */
.step { flex: 1; min-width: 0; }
.step-num {
  font-family: var(--serif); font-size: 40px; font-weight: 700;
  color: var(--champagne-text); line-height: 1; margin-bottom: 14px;
}
.step h3 {
  font-family: var(--serif); font-size: 17px; font-weight: 700;
  margin-bottom: 8px; color: var(--text);
}
.step p { font-size: 13.5px; color: var(--text-mid); line-height: 1.75; }

/* ── QUALITÄTS-GRID (editorial, dezenter Akzentpunkt statt reiner Linie) ── */
.q-grid { display: grid; gap: 48px; }
/* B1.26 (Zoom-/Responsive-Remediation 20260905): minmax(0,1fr) statt
   nacktem 1fr -- ein Grid-Track mit reinem "1fr" hat implizit
   minmax(auto,1fr), d.h. sein Minimum bleibt der Min-Content der Zelle
   (nicht umbrechender Text/feste Kindbreiten). Sobald eine Zelle mehr
   Platz braucht als ihr rechnerischer Drittelanteil, sprengt sie den
   gesamten Grid-Container horizontal ueber den Viewport hinaus -- exakt
   der bei 200-%-Zoom real gemessene Fund auf mehreren Produktseiten
   (siehe Root-Cause-Matrix). minmax(0,1fr) erlaubt der Spur, unter ihren
   Min-Content zu schrumpfen; Inhalt bricht dann innerhalb der Zelle um,
   statt die Seite zu sprengen. Bei allen realen Standard-Breakpoints
   (390-1440px) ist dies ein reines No-Op, da dort genug Platz vorhanden
   ist. */
@media(min-width:768px){ .q-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } }
.q-item { border-top: 2px solid var(--champagne); padding-top: 24px; }
.q-item h3 {
  font-family: var(--serif); font-size: 18px; font-weight: 700;
  margin-bottom: 12px; color: var(--text); line-height: 1.25;
}
.q-item p { font-size: 13.5px; color: var(--text-mid); line-height: 1.75; }

/* ── GRIDS ── */
.g2 { display: grid; gap: 20px; }
.g3 { display: grid; gap: 24px; }
.g4 { display: grid; gap: 16px; }
.g2-wide { display: grid; gap: 60px; }
/* B1.26: minmax(0,1fr) statt 1fr, siehe Begruendung bei .q-grid oben --
   .g3 traegt sitewide u. a. alle .card-Vergleichsraster (Produktseiten,
   Fachhaendler-Kategorieseiten: insektenschutz.html, rollladen.html,
   sonnensegel.html, fensterladen.html, markisen.html, innenbeschattung.html,
   terrassenueberdachungen.html, alle 8 fachhaendler/*/index.html u.v.a.). */
@media(min-width:640px){ .g2 { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } .g4 { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } }
@media(min-width:900px){ .g3 { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media(min-width:1000px){ .g4 { grid-template-columns: repeat(4,minmax(0,1fr)); } }
@media(min-width:860px){ .g2-wide { grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: start; } }

/* ── PRODUKTMODUL: alternierendes Bild/Text-System ──
   Ergänzung cc_c6f58df4 (20260718), Benchmark WAREMA-Struktur (keine Uebernahme
   von Assets/Text). Ersetzt schwere Text-auf-Bild-Overlays durch eigenstaendige
   helle Textflaeche + Bild in gleicher visueller Hoehe. Nur fuer Produktseiten-
   Module -- .sec-h2/.q-item bleiben fuer alle anderen Seiten unangetastet. */
:root {
  --pd-eyebrow: 14px;
  --pd-h: clamp(28px, 3.2vw, 40px);
  --pd-h-hl: clamp(30px, 3.6vw, 42px);
  --pd-body: 18px;
  --pd-cta: 16.5px;
  --pd-pad: clamp(40px, 6vw, 72px);
}
.pd-module {
  display: grid; gap: 44px; align-items: center;
  padding: var(--pd-pad) 0;
}
@media(min-width:900px){ .pd-module { grid-template-columns: 1.05fr 1fr; gap: 64px; } }
.pd-module-media { order: 1; position: relative; border-radius: 16px; overflow: hidden;
  box-shadow: 0 14px 40px rgba(18,63,85,.09); min-height: 260px; background: var(--stone); }
.pd-module-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.pd-module-text { order: 2; }
@media(min-width:900px){
  .pd-module-media { min-height: 360px; }
  .pd-module.reverse .pd-module-media { order: 2; }
  .pd-module.reverse .pd-module-text { order: 1; }
}
.pd-module-eyebrow {
  display: block; font-size: var(--pd-eyebrow); font-weight: 600;
  text-transform: uppercase; letter-spacing: .14em; color: var(--champagne-text);
  margin-bottom: 14px;
}
.pd-module-h {
  font-family: var(--serif); font-size: var(--pd-h); font-weight: 400;
  line-height: 1.16; letter-spacing: -.015em; color: var(--text); margin-bottom: 18px;
}
.pd-module-body {
  font-size: var(--pd-body); line-height: 1.75; color: var(--text-mid);
  max-width: 46ch; margin-bottom: 16px;
}
.pd-module-body:last-of-type { margin-bottom: 22px; }
.pd-module .btn { font-size: var(--pd-cta); }
.pd-module-note { font-size: 12.5px; color: var(--muted); margin-top: -6px; margin-bottom: 18px; }

/* Highlight-Variante: volle Breite, ruhige Feature-Flaeche statt Bild/Text-Split —
   fuer dramaturgische Betonung zwischen zwei Bild/Text-Modulen, nicht mechanisch je Sektion. */
.pd-module--highlight {
  display: block; text-align: center; max-width: 760px; margin: 0 auto;
  padding: var(--pd-pad) var(--pad);
}
.pd-module--highlight .pd-module-h { font-size: var(--pd-h-hl); margin-bottom: 16px; }
.pd-module--highlight .pd-module-body { max-width: 60ch; margin-left: auto; margin-right: auto; }
@media(max-width:640px){ .pd-module-media { min-height: 220px; } }

/* ── CARDS (allgemein) ── */
.card {
  background: var(--pure); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 28px;
}
.card-hover:hover { box-shadow: 0 8px 32px rgba(22,62,82,.08); transform: translateY(-2px); transition: all .2s; }
.card-icon { font-size: 28px; margin-bottom: 14px; line-height: 1; }
/* Premium Line-Icons statt Emoji (P0-Redesign 20260715, Partnerbereich) */
.card-icon svg { width: 30px; height: 30px; color: var(--brand-gold, var(--champagne)); display: block; }
.ibox-icon svg { width: 21px; height: 21px; color: var(--brand-blue-soft, var(--deep)); display: block; }
.card h3 {
  font-family: var(--serif); font-size: 17px; font-weight: 700;
  margin-bottom: 8px; color: var(--text);
}
.card p { font-size: 13.5px; color: var(--text-mid); line-height: 1.75; }
.card-link {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 13px; font-weight: 600; color: var(--deep); margin-top: 14px;
}

/* ── PREISBEISPIEL-KARTEN (preise-planung.html, cc_8f49dd13 20260815) ──
   Vorher: 4 gleich schwere Textbloecke ohne Hierarchie, wirkte textlastig
   und wie eine scheinpraezise Marktpreisliste. Jetzt: klarer Budgetanker
   oben, 2-3 Haupttreiber als Chips, kurzer Erklaertext darunter. */
.pe-card { display: flex; flex-direction: column; gap: 12px; }
.pe-title {
  font-family: var(--serif); font-size: 18px; font-weight: 700;
  color: var(--deep); display: flex; align-items: center; gap: 7px;
}
.pe-title svg { width: 19px; height: 19px; flex: none; }
.pe-anchor {
  font-family: var(--serif); font-size: clamp(21px, 2.6vw, 25px);
  font-weight: 700; color: var(--text); line-height: 1.2;
}
.pe-anchor-sub {
  display: block; font-family: var(--sans, inherit); font-size: 12.5px;
  font-weight: 500; color: var(--champagne-text); margin-top: 3px;
  text-transform: uppercase; letter-spacing: .06em;
}
.pe-drivers { display: flex; flex-wrap: wrap; gap: 6px; }
.pe-driver {
  font-size: 11px; font-weight: 600; letter-spacing: .01em;
  padding: 4px 10px; border-radius: 999px;
  background: var(--stone); color: var(--text-mid);
}
.pe-note { font-size: 13px; color: var(--text-mid); line-height: 1.7; margin: 0; }

/* ── KOSTENTREIBER-EDITORIAL (preise-planung.html) ── */
.cost-driver-hint {
  display: grid; gap: 10px; margin: 28px 0 0; max-width: 760px;
}
@media(min-width:640px){ .cost-driver-hint { grid-template-columns: 1fr 1fr; gap: 8px 24px; } }
.cost-driver-hint span {
  font-size: 13px; color: var(--text-mid); line-height: 1.6;
  padding-left: 16px; position: relative;
}
.cost-driver-hint span::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--champagne);
}
.cost-driver-hint strong { color: var(--text); font-weight: 600; }

/* ── PHC CARDS (Produkthub-Unterseiten) ── */
.phc {
  display: block; background: var(--pure); border: 1px solid var(--border);
  border-radius: var(--r-lg); overflow: hidden;
  transition: box-shadow .2s, transform .22s;
}
.phc:hover { box-shadow: 0 12px 44px rgba(22,62,82,.12); transform: translateY(-4px); }
.phc-visual {
  height: 158px; background-size: cover; background-position: center;
}
/* Echte Produktfotos statt Emoji-auf-Gradient-Platzhalter (Design-Review 20260718).
   Bildzuordnung 1:1 zur bestehenden HTML-Reihenfolge auf gastro-outdoor-living.html. */
.phc-v1 { background-image: url('images/generated/restaurant-terrasse-seeufer-alpen.png'); }
.phc-v2 { background-image: url('images/generated/solanero-gastro-pergolamarkise-restaurant-terrasse-seeblick-tageslicht-01.jpg'); }
.phc-v3 { background-image: url('images/generated/restaurant-terrasse-sonnenuntergang-see.png'); }
.phc-v4 { background-image: url('images/generated/solanero-gastro-lamellendach-zip-screen-restaurant-terrasse-abendstimmung-01.jpg'); }
.phc-body { padding: 22px 24px; }
.phc h3 { font-family: var(--serif); font-size: 17px; font-weight: 700; margin-bottom: 7px; color: var(--text); }
.phc p { font-size: 13px; color: var(--text-mid); line-height: 1.7; margin-bottom: 14px; }
.phc-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.phc-chip {
  font-size: 11px; font-weight: 600; color: var(--deep);
  background: var(--stone); padding: 3px 9px; border-radius: 2px;
  border: 1px solid var(--border);
}
.phc-arrow {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; font-weight: 600; color: var(--deep); margin-top: 14px;
}

/* ── CTA SECTION ── */
.cta-section {
  background:
    radial-gradient(ellipse at 80% 50%, rgba(201,166,107,.12) 0%, transparent 45%),
    linear-gradient(155deg, #0a1e2c 0%, #163E52 50%, #1e4e68 100%);
  padding: 80px 0; text-align: center;
}
.cta-section .sec-h2 { color: #fff; margin-bottom: 14px; }
.cta-section .sec-sub { color: rgba(255,255,255,.62); margin: 0 auto 36px; }

/* ── MAGAZINE ARTIKEL (Homepage Ratgeber) ──
   Launch-Review 20260728: von reiner Textliste (kein Bild, wirkte wie
   unfertiger Platzhalter) zu redaktionellen Bildkarten umgebaut -- mehr
   visuelles Gewicht/Autoritaet, konsistent mit den anderen Kartenformaten
   der Seite (q-item, pw-card). */
.mag-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media(min-width:768px){ .mag-grid { grid-template-columns: repeat(3,1fr); gap: 28px; } }
.mag-article {
  display: flex; flex-direction: column; gap: 0;
  border-radius: 14px; overflow: hidden; background: #fff;
  box-shadow: 0 10px 34px rgba(18,63,85,.06); border: 1px solid rgba(18,63,85,.06);
  transition: transform .18s, box-shadow .18s;
}
.mag-article:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(18,63,85,.12); }
.mag-thumb {
  height: 170px; background-size: cover; background-position: center;
  flex-shrink: 0;
}
.mag-meta { flex: 1; padding: 22px 22px 24px; }
.mag-cat {
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--champagne-text); margin-bottom: 8px; font-weight: 600;
}
.mag-title {
  font-family: var(--serif); font-size: clamp(16px, 2.5vw, 19px);
  font-weight: 700; color: var(--text); line-height: 1.3; margin-bottom: 8px;
}
.mag-excerpt { font-size: 13.5px; color: var(--text-mid); line-height: 1.7; margin-bottom: 12px; }
.mag-link {
  font-size: 12px; font-weight: 600; color: var(--deep);
  letter-spacing: .04em; display: inline-flex; align-items: center; gap: 4px;
}

/* ── PROS / CONS ── */
.pros-cons { display: grid; gap: 16px; }
@media(min-width:580px){ .pros-cons { grid-template-columns: 1fr 1fr; } }
.pros, .cons {
  background: var(--pure); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 22px;
}
.pros { border-top: 2px solid var(--deep); }
.cons { border-top: 2px solid var(--sun); }
.pc-title { font-weight: 700; font-size: 13.5px; margin-bottom: 14px; color: var(--text); }
.pc-list { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.pc-list li {
  font-size: 13.5px; color: var(--text-mid);
  display: flex; align-items: flex-start; gap: 10px; line-height: 1.55;
}
.pros .pc-list li::before { content: '✓'; color: var(--deep); font-weight: 700; font-size: 12px; flex-shrink: 0; margin-top: 1px; }
.cons .pc-list li::before { content: '–'; color: var(--sun); font-weight: 700; flex-shrink: 0; }

/* ── ICON BOX ── */
.ibox { display: flex; gap: 16px; align-items: flex-start; }
.ibox-icon {
  width: 44px; height: 44px; background: var(--stone);
  border-radius: 8px; display: flex; align-items: center;
  justify-content: center; font-size: 20px; flex-shrink: 0;
  border: 1px solid var(--border);
}
.ibox h4 { font-family: var(--serif); font-size: 15px; font-weight: 700; margin-bottom: 5px; color: var(--text); }
/* a11y-Audit 20260804: die 30 launchkritischen Seiten nutzen jetzt <h3> statt
   <h4> in .ibox (heading-order-Fix). Andere, nicht im Launch-Scope geprüfte
   Seiten nutzen weiterhin <h4> -- daher beide Regeln parallel. Bewusst NICHT
   die spaetere ".ibox h3{font-size:21px}"-Regel (siehe unten, urspruenglich
   fuer .fp-card/.partner-card/.business-card gedacht) fuer .ibox nutzen --
   die 21px waren fuer diese Klasse nie produktiv im Einsatz und wuerden die
   bestehende Kartenoptik sprengen. */
.ibox h3 { font-family: var(--serif); font-size: 15px; font-weight: 700; margin-bottom: 5px; color: var(--text); }
.ibox p { font-size: 13px; color: var(--text-mid); line-height: 1.65; }

/* ── PRICE BANDS ── */
.price-bands { display: grid; gap: 12px; }
@media(min-width:580px){ .price-bands { grid-template-columns: 1fr 1fr; } }
@media(min-width:900px){ .price-bands { grid-template-columns: repeat(4,1fr); } }
.price-band {
  background: var(--pure); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 22px 20px;
}
.pb-label {
  font-size: 10.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .1em; color: var(--muted); margin-bottom: 9px;
}
.pb-range {
  font-family: var(--serif); font-size: 21px; font-weight: 700;
  margin-bottom: 6px; color: var(--deep);
}
.pb-desc { font-size: 12.5px; color: var(--text-mid); line-height: 1.6; }

/* ── COMPARISON / INFO TABLES ── */
.comp-wrap { overflow-x: auto; }
.comp-table { width: 100%; border-collapse: collapse; min-width: 560px; }
.comp-table th {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .08em; color: var(--muted); padding: 10px 16px;
  text-align: left; background: var(--stone); white-space: nowrap;
}
.comp-table td { padding: 13px 16px; border-bottom: 1px solid var(--border); font-size: 13.5px; vertical-align: middle; }
.comp-table tr:last-child td { border-bottom: none; }
.comp-table tr:hover td { background: var(--stone); }
.comp-table td:first-child { font-weight: 600; }
.chk { color: var(--deep); font-weight: 700; }
.neut { color: var(--text-mid); }
.cross { color: var(--muted); }

.info-table { width: 100%; border-collapse: collapse; }
.info-table tr { border-bottom: 1px solid var(--border); }
.info-table tr:last-child { border-bottom: none; }
.info-table td { padding: 13px 0; font-size: 14px; vertical-align: top; }
.info-table td:first-child { color: var(--muted); width: 44%; padding-right: 16px; font-size: 13px; }

/* ── FORMS ── */
.form-field { margin-bottom: 18px; }
.form-field label { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-mid); margin-bottom: 6px; letter-spacing: .01em; }
.form-field input, .form-field select, .form-field textarea {
  width: 100%; border: 1px solid var(--border); border-radius: var(--r);
  padding: 12px 14px; font-size: 14.5px; font-family: var(--sans);
  color: var(--text); background: var(--pure); outline: none; transition: border-color .15s;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: var(--deep); }
.form-field textarea { min-height: 100px; resize: vertical; }
.form-2col { display: grid; gap: 14px; }
@media(min-width:500px){ .form-2col { grid-template-columns: 1fr 1fr; } }
.form-note { font-size: 12px; color: var(--muted); line-height: 1.65; }
.form-error { display: none; background: #fee2e2; border: 1px solid #fca5a5; border-radius: 6px; padding: 10px 14px; font-size: 13px; color: #991b1b; margin-bottom: 16px; }
.form-error.show { display: block; }

/* ── PLZ SEARCH ── */
.plz-row { display: flex; gap: 10px; flex-wrap: wrap; }
.plz-input {
  flex: 1; min-width: 140px; border: 1px solid var(--border);
  border-radius: var(--r); padding: 13px 16px; font-size: 15px;
  font-family: var(--sans); outline: none; transition: border-color .15s;
  background: var(--pure); color: var(--text);
}
.plz-input:focus { border-color: var(--deep); }

/* ── PLZ-GEBIETSPRÜFUNG (partner-werden.html, Auftrag cc_6b2cccee) ── */
.plz-check-box {
  background: var(--pure); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 28px; max-width: 620px;
}
.plz-check-error {
  margin-top: 12px; background: #fee2e2; border: 1px solid #fca5a5; border-radius: 6px;
  padding: 10px 14px; font-size: 13px; color: #991b1b;
}
.plz-check-result { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--border); }
.plz-check-status { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.plz-check-plz { font-family: var(--serif); font-size: 20px; font-weight: 700; color: var(--text); }
.plz-check-badge {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .02em;
  padding: 5px 12px; border-radius: 999px; text-transform: uppercase;
}
.plz-check-badge { background: #e5e7eb; color: #374151; }
.is-frei .plz-check-badge { background: #dcfce7; color: #166534; }
.is-pruefung .plz-check-badge { background: #fef3c7; color: #92400e; }
.is-reserviert .plz-check-badge { background: #fef3c7; color: #92400e; }
.is-vergeben .plz-check-badge { background: #fee2e2; color: #991b1b; }
.is-warteliste .plz-check-badge { background: #e0e7ff; color: #3730a3; }
.plz-check-line { font-size: 14px; color: var(--text); margin-bottom: 6px; }
.plz-check-line strong { color: var(--muted); font-weight: 600; }
.plz-check-hint { font-size: 14px; color: var(--muted); line-height: 1.6; margin: 12px 0; }

/* ── PLZ-MEHRFACHAUSWAHL + KARTE (partner-werden.html, Auftrag Gebietsauswahl
   Partnerbereich 20260720) ── */
.plz-multi-wrap { display: grid; gap: 28px; max-width: 980px; }
@media(min-width:860px){ .plz-multi-wrap { grid-template-columns: 1fr 1fr; align-items: start; } }
.plz-check-box-multi { max-width: none; }

.plz-multi-label {
  display: block; font-size: 12.5px; font-weight: 600; color: var(--text);
  margin-bottom: 8px; letter-spacing: .01em;
}
.plz-tag-field {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  border: 1.5px solid var(--border); border-radius: 10px; padding: 10px 12px;
  background: var(--pure); transition: border-color .15s;
}
.plz-tag-field:focus-within { border-color: var(--deep); }
.plz-chip {
  display: inline-flex; align-items: center; gap: 6px; background: var(--stone);
  color: var(--deep); border-radius: 999px; padding: 6px 8px 6px 14px;
  font-size: 13.5px; font-weight: 700; font-family: var(--serif); white-space: nowrap;
}
.plz-chip button {
  border: none; background: transparent; color: var(--deep); cursor: pointer;
  font-size: 15px; line-height: 1; width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; opacity: .65;
  transition: opacity .15s, background .15s; padding: 0;
}
.plz-chip button:hover { opacity: 1; background: rgba(22,62,82,.12); }
.plz-tag-input {
  flex: 1; min-width: 200px; border: none; outline: none; padding: 6px 4px;
  font-size: 14.5px; font-family: var(--sans); color: var(--text); background: transparent;
}
.plz-multi-actions { display: flex; align-items: center; gap: 18px; margin-top: 16px; flex-wrap: wrap; }
.btn-link-reset {
  border: none; background: none; color: var(--muted); font-size: 12.5px;
  font-weight: 600; cursor: pointer; text-decoration: underline; padding: 0;
}
.btn-link-reset:hover { color: var(--text); }
.plz-check-result-list { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 18px; }
.plz-check-result-item:not(:last-child) { padding-bottom: 18px; border-bottom: 1px dashed var(--border); }

.plz-map-box {
  background: var(--pure); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 18px; display: flex; flex-direction: column; gap: 12px;
}
.plz-map-head { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; font-weight: 700; color: var(--text); }
.plz-map-hint { font-size: 11.5px; font-weight: 500; color: var(--muted); }
.plz-map-canvas { width: 100%; height: 320px; border-radius: 10px; overflow: hidden; background: var(--stone); position: relative; }
.plz-map-fineprint { font-size: 11px; color: var(--muted); line-height: 1.5; margin: 0; }
.plz-map-fallback {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; height: 100%; padding: 20px; gap: 10px; color: var(--muted); font-size: 12.5px;
}
.plz-map-fallback svg { width: 26px; height: 26px; color: var(--deep); opacity: .6; }
.plz-map-fallback p { max-width: 320px; line-height: 1.6; margin: 0; }
@media(max-width:539px){ .plz-tag-input { min-width: 140px; } .plz-map-canvas { height: 260px; } }

/* ── PRODUKTFINDER ── */
.finder-wrap { max-width: 680px; }
.finder-progress { display: flex; gap: 6px; margin-bottom: 28px; }
.finder-dot { flex: 1; height: 2px; background: var(--border); border-radius: 2px; transition: background .2s; }
.finder-dot.done { background: var(--deep); }
.finder-dot.active { background: var(--sun); }
.finder-step { display: none; }
.finder-step.active { display: block; }
.finder-q { font-family: var(--serif); font-size: 20px; font-weight: 700; line-height: 1.3; margin-bottom: 22px; color: var(--text); }
.finder-opts { display: grid; gap: 10px; }
@media(min-width:500px){ .finder-opts { grid-template-columns: 1fr 1fr; } }
.finder-opt {
  border: 1px solid var(--border); border-radius: var(--r-lg); padding: 16px 18px;
  cursor: pointer; transition: all .15s; background: var(--pure); text-align: left;
}
.finder-opt:hover { border-color: var(--deep); background: var(--stone); }
.finder-opt.sel { border-color: var(--deep); background: var(--stone); box-shadow: 0 0 0 2px rgba(22,62,82,.12); }
/* Eigenes Lineart-SVG-Icon-Set statt Emoji (Audit cc_9881fcef, 20260716) --
   gleiche Sprache wie .solicon/.ff-icon-avatar: 24x24 viewBox, stroke-only,
   rund abgesetztes Badge statt nacktem Zeichen ("Kinderquiz"-Wirkung). */
.fo-icon {
  width: 42px; height: 42px; margin-bottom: 12px; border-radius: 50%;
  background: var(--stone); color: var(--brand-blue, var(--deep));
  display: flex; align-items: center; justify-content: center;
  transition: background .15s ease, color .15s ease;
}
.fo-icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.finder-opt:hover .fo-icon, .finder-opt.sel .fo-icon { background: var(--deep); color: #fff; }
.fo-title { font-weight: 700; font-size: 14px; margin-bottom: 3px; color: var(--text); }
.fo-desc { font-size: 12px; color: var(--muted); line-height: 1.5; }
.finder-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 24px; }
.finder-result { display: none; background: var(--stone); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 28px; }
.finder-result.show { display: block; }
.fr-tag { font-size: 10px; font-weight: 600; text-transform: uppercase; color: var(--champagne); letter-spacing: .14em; margin-bottom: 10px; }
.fr-title { font-family: var(--serif); font-size: 22px; font-weight: 700; color: var(--deep); margin-bottom: 10px; }
.fr-desc { font-size: 14px; color: var(--text-mid); margin-bottom: 20px; line-height: 1.7; }

/* ── ANFRAGE MULTISTEP ── */
.anfrage-step { display: none; }
.anfrage-step.active { display: block; }
.progress-bar { height: 2px; background: var(--border); border-radius: 2px; margin-bottom: 8px; overflow: hidden; }
.progress-fill { height: 100%; background: var(--sun); border-radius: 2px; transition: width .35s; }
.progress-label { font-size: 11.5px; color: var(--muted); margin-bottom: 28px; letter-spacing: .03em; }
.step-title { font-family: var(--serif); font-size: 22px; font-weight: 700; margin-bottom: 6px; color: var(--text); }
.step-sub { font-size: 14px; color: var(--muted); margin-bottom: 24px; line-height: 1.6; }
.product-opts { display: grid; gap: 12px; }
@media(min-width:500px){ .product-opts { grid-template-columns: 1fr 1fr; } }
.product-opt {
  border: 1px solid var(--border); border-radius: var(--r-lg); padding: 18px 20px;
  cursor: pointer; background: var(--pure); text-align: left; transition: all .15s;
}
.product-opt:hover { border-color: var(--deep); }
.product-opt.sel { border-color: var(--deep); background: var(--stone); }
.po-icon { font-size: 26px; margin-bottom: 10px; }
.po-name { font-weight: 700; font-size: 15px; color: var(--text); }
.po-sub { font-size: 12px; color: var(--muted); margin-top: 3px; }
.anfrage-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 24px; gap: 12px; }
.anfrage-success { display: none; background: var(--stone); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 32px; text-align: center; }
.anfrage-success.show { display: block; }
.anfrage-success h3 { font-family: var(--serif); font-size: 22px; color: var(--deep); margin-bottom: 10px; }
.anfrage-success p { font-size: 14px; color: var(--text-mid); line-height: 1.7; }

/* ── PARTNER CARDS ── */
/* Endkunden-Redesign 20260718 (Auftrag Fachpartnersuche/Businesscards hell+
   sauber): Karten auf reines Weiss + kuehle neutrale Linie statt warmem
   Beige-Rahmen (--border ist warmtonig). Aktiv-Zustand ueber duenne Petrol-
   Linie + dezenten Schatten statt Farbflaeche (Auftrag A.6). */
.partner-card {
  background: #fff; border: 1px solid var(--border-cool);
  border-radius: 14px; padding: 20px; display: flex; gap: 14px; align-items: flex-start;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.partner-card:hover { border-color: #c3d3d9; box-shadow: 0 4px 18px rgba(22,62,82,.06); }
.partner-card.partner-card-match { border-color: var(--deep); box-shadow: 0 6px 22px rgba(22,62,82,.1); }
.partner-avatar {
  width: 52px; height: 52px; border-radius: 10px; background: #eef3f5;
  flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 22px;
  border: 1px solid var(--border-cool);
}
.partner-name { font-family: var(--serif); font-size: 16px; font-weight: 700; margin-bottom: 3px; color: var(--text); }
.partner-loc { font-size: 12.5px; color: var(--muted); margin-bottom: 9px; }
.partner-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 9px; }
.partner-tag { font-size: 11px; color: var(--deep); background: #eef3f5; padding: 2px 9px; border-radius: 20px; font-weight: 600; border: 1px solid var(--border-cool); }
.partner-meta { font-size: 12px; color: var(--muted); line-height: 1.6; }

/* Branchenportal-Umbau Phase 1 (2026-07-23): sachliche Betriebsmerkmale-Chips auf
   der Ergebniskarte -- BEWUSST neutral/grau statt Gold/Premium-Farbe, um bezahlte
   Sichtbarkeit (mitgliedschaft_stufe) klar von tatsaechlichen Qualitaetsmerkmalen
   (betriebsmerkmale/showroom, hier gerendert) zu trennen. Kein Silber/Gold/Platin,
   siehe Auftrag "keine verwirrenden Qualitaetsaussagen". */
.partner-trust-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 9px; }
.partner-trust-chip {
  font-size: 10.5px; color: var(--text-mid); background: var(--stone, #f4f2ec);
  padding: 2px 9px; border-radius: 20px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px;
}
.partner-trust-chip svg { width: 11px; height: 11px; flex-shrink: 0; }
/* Dezentes Pilot-/Freigabestatus-Badge statt dominantem Gelb-Kasten (Auftrag
   A.7: Pilotstatus dezent+rechtssicher, keine interne Sprache im Vordergrund). */
.demo-badge { background: #eef3f5; color: var(--deep); font-size: 9.5px; font-weight: 700; padding: 2px 8px; border-radius: 20px; letter-spacing: .02em; border: 1px solid var(--border-cool); }

/* Kontaktlinks (Telefon/E-Mail/Website) — gemeinsame Struktur mit den 3
   Fachpartnerseiten (assets/gruendungspartner-motion.css .sol-contact-link),
   hier fuer Fachbetriebssuche/Kartendetailpanel (Ergaenzung 20260717).
   Redesign 20260718: sekundaer/kompakt statt visuell dominant (Auftrag A.3
   -- max. 2 primaere Aktionen, Kontakt sekundaer, gut lesbar aber zurueckhaltend). */
.sol-contact-links { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 8px 0 0; }
.sol-contact-link { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 4px 2px; border-radius: 4px; color: var(--muted); text-decoration: none; font-size: 12.5px; font-weight: 600; transition: color .15s ease; }
.sol-contact-link svg { width: 15px; height: 15px; flex-shrink: 0; opacity: .8; }
.sol-contact-link span { line-height: 1.4; word-break: break-word; }
.sol-contact-link .sol-ext-icon { width: 10px; height: 10px; margin-left: 3px; opacity: .6; }
.sol-contact-link:hover { color: var(--deep); }
.sol-contact-link:focus-visible { outline: 2px solid var(--forest); outline-offset: 2px; }
@media (max-width: 480px) { .sol-contact-link { min-height: 40px; } }

/* Google-Bewertungen (Auftrag 20260718): reale, serverseitig gecachte Werte aus
   data/google_ratings_cache.json ueber assets/solanero-google-ratings.js.
   Platzhalter <a class="sol-google-rating-slot" data-partner-id="…"> wird per JS
   entweder zum echten, klickbaren Block befuellt oder komplett aus dem DOM
   entfernt, wenn kein gueltiger Cache-Eintrag vorliegt -- niemals 0,0/leere
   Sterne (Auftrag Punkt 4). Gleiches Muster wie .sol-contact-link oben
   (kompakt/sekundaer, nicht visuell dominant). */
.sol-google-rating-slot { display: none; } /* verhindert FOUC-Sprung vor JS-Fill, Entfernen passiert danach ohnehin */
.sol-google-rating { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 4px 2px; margin: 6px 0 0; border-radius: 4px; color: var(--muted); text-decoration: none; font-size: 12.5px; font-weight: 600; transition: color .15s ease; }
.sol-google-rating:hover, .sol-google-rating:focus-visible { color: var(--deep); }
.sol-google-rating:focus-visible { outline: 2px solid var(--forest); outline-offset: 2px; }
.sol-gstars { display: inline-flex; gap: 1px; flex-shrink: 0; }
.sol-gstar { position: relative; width: 14px; height: 14px; display: inline-block; flex-shrink: 0; }
.sol-gstar svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sol-gstar-bg { fill: none; stroke: #c7c7c7; stroke-width: 1.4; }
.sol-gstar-fill-wrap { position: absolute; inset: 0; overflow: hidden; display: block; }
.sol-gstar-fill-wrap svg { fill: #F2B01E; stroke: #F2B01E; stroke-width: 1.4; width: 14px; height: 14px; }
.sol-grating-text { line-height: 1.4; }
.sol-gsource { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); background: #eef3f5; padding: 2px 7px; border-radius: 20px; border: 1px solid var(--border-cool); }

/* ── DASHBOARD ── */
.dash-grid { display: grid; gap: 20px; }
@media(min-width:768px){ .dash-grid { grid-template-columns: 2fr 1fr; } }
.stat-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-bottom: 20px; }
@media(max-width:600px){ .stat-cards { grid-template-columns: 1fr 1fr; } }
.stat-card { background: var(--pure); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 20px; }
.stat-n { font-family: var(--serif); font-size: 30px; font-weight: 700; line-height: 1.1; }
.stat-label { font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.lead-title { font-weight: 700; font-size: 14px; margin-bottom: 3px; color: var(--text); }
.lead-meta { font-size: 12px; color: var(--muted); line-height: 1.55; }
.badge-status { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 2px; white-space: nowrap; }
.badge-new { background: #d4eddb; color: #1a5c30; }
.badge-pending { background: #fef9c3; color: #854d0e; }
.badge-contact { background: #dbeafe; color: #1e40af; }
.badge-done { background: var(--stone); color: var(--deep); }
.sla-bar { height: 3px; background: var(--border); border-radius: 3px; overflow: hidden; margin-top: 6px; }
.sla-fill { height: 100%; border-radius: 3px; }
.sla-ok { background: var(--deep); }
.sla-warn { background: var(--sun); }

/* ── RATGEBER CARDS (ratgeber.html) ── */
.rat-card {
  background: var(--pure); border: 1px solid var(--border);
  border-radius: var(--r-lg); overflow: hidden; transition: all .2s;
}
.rat-card:hover { box-shadow: 0 8px 28px rgba(22,62,82,.09); transform: translateY(-2px); }
.rat-img { height: 140px; display: flex; align-items: center; justify-content: center; font-size: 44px; }
.rat-img-1 { background: linear-gradient(135deg, #163E52 0%, #8EC5D8 100%); }
.rat-img-2 { background: linear-gradient(135deg, #0c2030 0%, #163E52 100%); }
.rat-img-3 { background: linear-gradient(135deg, #E9DED0 0%, #D87947 100%); }
.rat-img-4 { background: linear-gradient(135deg, #C9A66B 0%, #D87947 100%); }
.rat-img-5 { background: linear-gradient(135deg, #E9DED0 0%, #163E52 100%); }
.rat-img-6 { background: linear-gradient(135deg, #8EC5D8 0%, #163E52 100%); }
.rat-img-7 { background: linear-gradient(135deg, #163E52 0%, #C9A66B 100%); }
.rat-img-8 { background: linear-gradient(135deg, #E9DED0 0%, #D87947 100%); }
.rat-body { padding: 20px; }
.rat-cat { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .16em; color: var(--champagne-text); margin-bottom: 7px; }
.rat-card h4 { font-family: var(--serif); font-size: 15.5px; font-weight: 700; line-height: 1.3; margin-bottom: 7px; color: var(--text); }
.rat-card p { font-size: 13px; color: var(--text-mid); line-height: 1.65; }
.rat-link { font-size: 12.5px; font-weight: 600; color: var(--deep); display: inline-flex; align-items: center; gap: 4px; margin-top: 12px; }

/* ── HIGHLIGHT BOX ── */
.highlight-box {
  background: var(--stone); border: 1px solid var(--border);
  border-left: 3px solid var(--champagne); border-radius: var(--r-lg); padding: 22px 24px;
}
.highlight-box h4 { font-family: var(--serif); font-size: 15px; font-weight: 700; margin-bottom: 7px; color: var(--text); }
/* a11y-Audit 20260804: die 30 launchkritischen Seiten nutzen jetzt <h3> statt
   <h4> in .highlight-box (heading-order-Fix, korrekte Hierarchie hinter <h2>).
   Andere, nicht im Launch-Scope geprüfte Seiten (Fachpartnerprofile,
   Regionalseiten u.a.) nutzen weiterhin <h4> -- daher beide Regeln parallel,
   keine der beiden entfernt. */
.highlight-box h3 { font-family: var(--serif); font-size: 15px; font-weight: 700; margin-bottom: 7px; color: var(--text); }
.highlight-box p { font-size: 13.5px; color: var(--text-mid); line-height: 1.75; }

/* Portiert aus /fachhaendler/ (dort bislang nur inline/lokal definiert) --
   zentral hier, damit alle Seiten (inkl. generierte Partnerprofile) dieselbe Regel nutzen.
   overflow-wrap:break-word verhindert horizontalen Overflow bei langen Dateipfaden/Tokens
   ohne Leerzeichen auf schmalen Viewports (Fund aus QA-Lauf 2026-07-15). */
.info-banner { background: var(--sun-light); border: 1.5px solid #e8c49a; border-radius: 12px; padding: 14px 18px; font-size: 13px; color: #7a4a18; margin-bottom: 24px; overflow-wrap: break-word; }
.proto-note { font-size: 11.5px; color: var(--muted); border-top: 1px solid var(--border); margin-top: 40px; padding-top: 14px; overflow-wrap: break-word; }

/* ── FOOTER — Tiefes Atlantikblau ── */
.footer { background: var(--deep); padding: 64px 0 32px; }
/* Footer-Audit 20260729: reduzierte Fusszeile fuer Login-/Registrierungsseiten --
   nur Copyright + Impressum/Datenschutz/Kontakt, kein Social-Band/CTA/Spalten. */
.footer-reduced { padding: 26px 0; }
.footer-reduced .footer-bottom { padding-bottom: 0; }
.footer-top { display: grid; gap: 40px; margin-bottom: 48px; }
@media(min-width:640px){ .footer-top { grid-template-columns: 1fr 1fr; } }
@media(min-width:900px){ .footer-top { grid-template-columns: 1.8fr 1fr 1fr 1fr; } }
.footer-brand-name { font-family: var(--serif); font-size: 18px; color: #fff; font-weight: 400; margin-bottom: 8px; letter-spacing: -.01em; }
.footer-desc { font-size: 13px; color: rgba(255,255,255,.6); line-height: 1.85; max-width: 240px; }
/* Launch-Candidate Footer-Vereinheitlichung 20260731 (Paket 1c-1): sichtbarer
   SOLANERO-Kontakt (hello@solanero.de) direkt unter der Markenbeschreibung,
   gleiche gedaempfte Footer-Palette wie .footer-links, mit klarem Hover-/
   Fokuszustand statt Browser-Default-Blau. */
.footer-contact { font-size: 13px; margin-top: 10px; }
.footer-contact a { color: rgba(255,255,255,.55); text-decoration: underline; text-decoration-color: rgba(255,255,255,.25); }
.footer-contact a:hover, .footer-contact a:focus-visible { color: #fff; text-decoration-color: rgba(255,255,255,.6); }
/* Footer-Korrektur 20260722: Ueberschriften waren mit 9.5px/opacity .28 leiser als
   die Links darunter (13.5px/opacity .5) -- exakte Umkehrung der gewuenschten
   Hierarchie. Ueberschrift jetzt sichtbar staerker (Groesse+Kontrast+eigene Farbe),
   Links bewusst etwas zurueckgenommen, damit die Gruppierung sofort lesbar ist. */
.footer-col-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: rgba(255,255,255,.62); margin-bottom: 18px; }
.footer-links { display: flex; flex-direction: column; gap: 10px; }
.footer-links a { font-size: 13.5px; color: rgba(255,255,255,.62); transition: color .15s; }
.footer-links a:hover { color: rgba(255,255,255,.9); }
.footer-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: 12px; border-top: 1px solid rgba(255,255,255,.08); padding-top: 22px;
  position: relative; z-index: 2;
}
.footer-copy { font-size: 11px; color: rgba(255,255,255,.56); letter-spacing: .02em; }
.footer-legal { display: flex; flex-wrap: wrap; row-gap: 7px; column-gap: 14px; font-size: 10.5px; line-height: 1.5; max-width: 640px; }
.footer-legal a { color: rgba(255,255,255,.6); }
.footer-legal a:hover { color: rgba(255,255,255,.7); }
.footer-partner { font-size: 12px; color: rgba(255,255,255,.6); }
.footer-partner a { color: rgba(255,255,255,.62); }
.footer-partner a:hover { color: rgba(255,255,255,.85); }
.footer-links-more { font-weight: 600; color: var(--champagne) !important; margin-top: 2px; }
/* Footer-Korrektur 20260729: Produkte-Spalte zeigt ueberall dieselben 6
   Kernprodukte, die uebrigen 7 klappen per Button innerhalb des Footers auf/zu
   (kein Seitenwechsel) -- verhindert, dass einzelne Seiten dauerhaft die volle
   13er-Liste offen zeigen. Siehe assets/site-chrome.js footerProductToggle(). */
.footer-links-extra { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.footer-links-extra[hidden] { display: none !important; }
.footer-links-toggle {
  background: none; border: none; padding: 0; margin-top: 2px; font-family: inherit;
  font-size: 13.5px; font-weight: 600; color: var(--champagne); cursor: pointer; text-align: left;
}
.footer-links-toggle:hover { color: #fff; }
.footer-links-toggle:focus-visible { outline: 2px solid var(--champagne); outline-offset: 3px; }
/* Mobil/Tablet: fixe Bottom Action Bar (.action-bar, ~56px+safe-area) legt
   sich sonst dauerhaft ueber die letzte Fusszeile -- Sicherheitsabstand. */
@media(max-width:899px){ .footer-bottom { padding-bottom: 68px; } }

/* ── UTILS ── */
.text-center { text-align: center; }
.mt-2 { margin-top: 8px; }
.mt-4 { margin-top: 16px; }
.mt-6 { margin-top: 24px; }
.mt-8 { margin-top: 32px; }
.mb-4 { margin-bottom: 16px; }
.mb-6 { margin-bottom: 24px; }
.divider { height: 1px; background: var(--border); margin: 32px 0; }
.w-full { width: 100%; }
.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.max-600 { max-width: 600px; }
.max-700 { max-width: 700px; }
@media(max-width:768px){ .hide-mobile { display: none !important; } }

/* ── LEGAL ── */
.legal-content { max-width: 720px; }
.legal-content h2 { font-family: var(--serif); font-size: 20px; font-weight: 700; margin: 32px 0 10px; color: var(--deep); }
.legal-content p { font-size: 14.5px; color: var(--text-mid); line-height: 1.85; margin-bottom: 14px; }
.legal-content ul { font-size: 14.5px; color: var(--text-mid); line-height: 1.85; padding-left: 22px; margin-bottom: 14px; }
.legal-content li { margin-bottom: 7px; }


/* ── SOLANERO WHITE PREMIUM / SOFT AFFILIATE OVERRIDE ── */
:root {
  --page-white:#ffffff;
  --page-ivory:#fbfaf7;
  --page-sky:#eef7fa;
  --brand-blue:#123f55;
  --brand-blue-soft:#27667f;
  --brand-gold:#bd9760;
  /* Farbkonsolidierung 20260801: war zuvor #d97a43 -- ein zweiter, fast
     identischer aber nicht exakt gleicher Orangeton parallel zu --sun
     (#D87947). Genau diese Art Mini-Abweichung war die Ursache dafuer, dass
     "Projekt anfragen" (.nav-cta, nutzt --brand-orange) und Textakzente wie
     "in Ihrer Region" (nutzen --sun) nie exakt dieselbe Marken-Aktionsfarbe
     zeigten. Jetzt ein Wert, eine Quelle. */
  --brand-orange: var(--sun);
}

body { background:var(--page-white); }
.ribbon { background:#f3eee8; color:#72685d; border-bottom:1px solid #e7dfd4; }

/* Markantere Wortmarke */
/* Header-System-Vereinheitlichung 20260718: von .97 auf voll deckend (1)
   angehoben -- Referenz-Vergleich (ratgeber.html, Nicht-Hero-Seite) zeigte
   bei Scroll-Position noch ein sehr feines Durchscheinen des dahinterliegenden
   Inhalts (reale Browserpruefung). Gilt jetzt identisch fuer alle drei
   Sticky-/Compact-Header-Zustaende (siehe .is-compact und .menu-open-lock
   weiter unten), kein Sonderfall mehr je Seite. */
.nav { background:rgba(255,255,255,1); backdrop-filter:blur(14px); border-bottom:1px solid #e7e3dd; box-shadow:0 8px 30px rgba(18,63,85,.05); }
.nav-inner { min-height:76px; }
.nav-brand { gap:9px; }
.nav-mark { color:var(--brand-blue); }
.nav-mark svg { width:27px; height:27px; }
.nav-mark img { width:27px; height:27px; }
.nav-name { font-family:var(--sans); font-size:18px; line-height:1; font-weight:750; letter-spacing:.18em; color:var(--brand-blue); }
.nav-name small { font-size:8px; letter-spacing:.24em; color:#9c8a74; margin-top:6px; font-weight:650; }
.nav-links a { color:#53636b; }
/* Hover/Active zentral in der NAV-Basissektion (--nav-fg-strong/--nav-tint) --
   keine eigene Farbe mehr hier (Header-System-Vereinheitlichung 20260718,
   verhinderte vorher einen zweiten, abweichenden Blauton). */
/* 20260929-Fresh-Fix: diese Regel gewann bislang stillschweigend gegen die
   fruehere .nav-cta-Basisregel (Zeile ~220, dunkelblau) und setzte auf jeder
   Seite OHNE .hero-home/.hero-product-dark (Rechtliches, Ratgeber, Service,
   Hersteller, Fachbetriebe-Detail...) die alte, dunkle #AC6038-Braunorange
   als Hintergrund -- exakt das sitesweite "dunkle CTA"-Problem, nur eben in
   der Kopfzeile statt im Hero. Auf den fresh-korrigierten Ton vereinheitlicht. */
.nav-cta { background:#E89A6A; color:#173F52 !important; border-radius:999px; padding:11px 21px; box-shadow:0 7px 18px rgba(216,121,71,.20); }
.nav-cta:hover { background:#F0AA7A; color:#123747 !important; }

/* Homepage-Hero (Audit cc_9881fcef, 20260716): vorheriger heller Split-Hero
   legte einen milchigen weissen Verlauf + dunkle Textfarben ueber die
   Sliderfotos ("Wasserzeichenwirkung", nie fuer den Foto-Slider gedacht).
   Fotos bleiben jetzt scharf/unverwaschen sichtbar; Lesbarkeit ausschliesslich
   ueber .hero-text-panel (kleiner lokaler Scrim, siehe unten) mit den
   Basis-Weiss-Textstilen ab Zeile 218. */
.hero-home .hero-cw { padding-top:96px; padding-bottom:96px; }

/* Produktseiten freundlicher und heller */
.hero-product { background:linear-gradient(135deg,#ffffff 0%,#f4fafc 62%,#e4f1f5 100%); border-bottom:1px solid #dce8ec; }
.hero-product .hero-tag { color:var(--brand-blue-soft); border-color:#bdd8e3; background:#fff; }
.hero-product h1,.hero-product h1 em { color:var(--brand-blue); }
.hero-product .hero-sub { color:#617078; }

/* Dezente Affiliate-Nutzenleiste */
.benefit-strip { background:#fff; border-bottom:1px solid #ece8e2; }
.benefit-strip-inner { max-width:var(--cw); margin:0 auto; padding:20px var(--pad); display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
.benefit-item { padding:8px 22px; border-right:1px solid #ebe6df; display:flex; flex-direction:column; justify-content:center; gap:2px; text-align:center; }
.benefit-item:last-child { border-right:0; }
.benefit-item strong { font-size:12.5px; color:var(--brand-blue); }
.benefit-item small { font-size:11px; color:#6a7377; }

/* Produktwelt: echte Bilder, weiße Fassung, klarere Vergleichsführung */
.pw-section { background:var(--page-white); padding-bottom:48px; }
.pw-intro { padding-top:94px; }
.pw-grid { max-width:var(--cw); margin:0 auto; padding:0 var(--pad-lg); gap:22px; }
/* CSS-Konsolidierung 20260801: .pw-card/.pw-content/.pw-cat/.pw-title/.pw-desc
   waren HIER (dunkle Overlay-Karte, Bild als Hintergrund von .pw-card selbst)
   sowie an zwei weiteren Stellen in dieser Datei (~Zeile 458 Original-Version,
   ~Zeile 3374 aktuelle "Bild oben, Text unten"-Version) jeweils vollstaendig
   neu definiert -- drei konkurrierende Regelsaetze fuer dieselbe Kachel.
   Ursache des Nutzerfunds "Beschriftung sitzt zu nah am Kartenrand": ein
   uebrig gebliebenes .pw-card{height:330px} aus DIESEM Block (zusammen mit
   grid-auto-rows weiter unten) zwang die Karte auf eine feste, zu geringe
   Hoehe, obwohl die aktuell gueltige Kartenanatomie (Bild oben + Textzone
   unten, siehe Zeile ~3374) flexibel mitwaechst. Verifiziert: .pw-markise/
   .pw-pergola/.pw-lamelle/.pw-schirm/.pw-glas/.pw-segel sowie die reine
   Overlay-Kartenoptik werden nirgends sonst im Projekt genutzt (grep-geprueft)
   -- hier ersatzlos entfernt, einzige gueltige Definition bleibt bei Zeile
   ~3374. .pw-finder-hint bleibt (eigenstaendige, nicht betroffene Komponente). */
.pw-finder-hint { margin-top:32px; background:#f7fafb; border:1px solid #dfeaed; border-radius:12px; }

/* Mehr weiße Flächen, nur sanfte Abwechslung */
.sec-sand { background:#f7fafb; }
.sec-stone { background:#eef4f5; }
.sec-deep { background:var(--brand-blue); }
.card,.price-band,.pros,.cons,.partner-card { background:#fff; box-shadow:0 10px 34px rgba(18,63,85,.045); }
/* Launch-Review 20260728: die "mehr Weissflaechen"-Regel oben hatte die
   CTA-Sektion ("Projekt anfragen") auf ein blasses, fast unsichtbares
   Cremeband reduziert -- ausgerechnet der wichtigste Conversion-Punkt der
   Seite wirkte dadurch kleiner/schwaecher als die umgebenden Abschnitte.
   Zurueck zum dunklen, praesenten Original-Design (siehe Basisregel
   .cta-section weiter oben) statt der zu zurueckhaltenden Ueberschreibung. */
.cta-section .sec-h2 { color:#fff; }
.cta-section .sec-sub { color:rgba(255,255,255,.62); }
.footer { background:#123f55; }
.footer-brand-name { font-family:var(--sans); letter-spacing:.18em; font-weight:750; }

@media(max-width:900px){
  .hero-home { min-height:640px; }
  .benefit-strip-inner { grid-template-columns:1fr 1fr; }
  .benefit-item:nth-child(2){ border-right:0; }
  .benefit-item:nth-child(-n+2){ border-bottom:1px solid #ebe6df; }
}
@media(max-width:640px){
  .nav-inner { min-height:70px; }
  .nav-name { font-size:15px; letter-spacing:.15em; }
  .hero-home { min-height:620px; }
  .hero-home .hero-cw { padding-top:64px; padding-bottom:64px; }
  .hero-home h1 { font-size:42px; }
  .hero-home .hero-stats { display:grid; grid-template-columns:1fr 1fr; width:100%; }
  .hero-home .hero-stat { min-width:0; }
  .benefit-strip-inner { grid-template-columns:1fr; padding-top:8px; padding-bottom:8px; }
  .benefit-item { border-right:0; border-bottom:1px solid #ebe6df!important; padding:12px 6px; }
  .benefit-item:last-child { border-bottom:0!important; }
  .pw-grid { padding:0 var(--pad); }
}

/* ── V2b · 7-PRODUKTWELTEN-AUSBAU (2026-07-14) ───────────────────────── */
/* Nav-Dropdown, Bild-Slots mit Fallback, Gastro/Privat-Struktur           */

/* Nav "Produkte"-Dropdown (Desktop) */
.nav-drop { position: relative; }
.nav-drop-trigger { display: inline-flex; align-items: center; gap: 5px; }
.nav-drop-trigger::after {
  content: ''; width: 6px; height: 6px; margin-top: -2px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform .15s; opacity: .65;
}
.nav-drop:hover .nav-drop-trigger::after, .nav-drop:focus-within .nav-drop-trigger::after { transform: rotate(225deg); margin-top: 3px; }
.nav-drop-menu {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(6px);
  background: var(--pure); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 20px 48px rgba(18,63,85,.16); padding: 10px; width: 560px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
  z-index: 220;
}
.nav-drop:hover .nav-drop-menu, .nav-drop:focus-within .nav-drop-menu {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.nav-drop-item { display: flex; flex-direction: column; gap: 2px; padding: 11px 14px; border-radius: 8px; transition: background .15s; }
.nav-drop-item:hover { background: var(--stone); }
.nav-drop-item strong { font-family: var(--serif); font-size: 13.5px; color: var(--text); font-weight: 700; }
.nav-drop-item span { font-size: 11px; color: var(--muted); line-height: 1.4; }
.nav-drop-foot {
  grid-column: 1/-1; margin-top: 4px; padding: 10px 14px 4px; border-top: 1px solid var(--border);
  font-size: 12px; font-weight: 700; color: var(--brand-orange, var(--sun));
}

/* Nav-Dropdown Gruppen-Header (Branchenportal-Umbau Phase 1, 2026-07-23): 12 Hauptkategorien
   in 4 fachliche Gruppen statt einer flachen Gelbe-Seiten-Liste (Outdoor Living / Fassade &
   Fenster / Innenraum / Technik & Service), siehe docs/BRANCHENPORTAL_PHASE1_20260723.md */
.nav-drop-group-label {
  grid-column: 1 / -1; font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .13em; color: var(--muted); padding: 10px 14px 2px;
}
.nav-drop-group-label:first-child { padding-top: 2px; }

/* Mobile: Produkte-Gruppe im Ausklappmenü */
.nm-group-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .14em;
  color: var(--muted); padding: 14px 0 2px;
}
.nm-group-sub-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em;
  color: var(--muted); opacity: .75; padding: 10px 0 1px 12px;
}
.nav-mobile a.nm-sub { padding-left: 12px; font-size: 14px; color: var(--text-mid); }

/* Mobile Navigation 20260817: Produkte standardmaessig eingeklappt.
   Die Disclosure wird zentral in site-chrome.js erzeugt, damit alle historisch
   duplizierten Header dieselbe kompakte Navigation bekommen. */
.nm-products-toggle {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; appearance: none; background: transparent; border: 0;
  border-bottom: 1px solid var(--border); padding: 13px 0; margin: 0;
  color: var(--text-mid); font: inherit; font-size: 15px; font-weight: 600;
  text-align: left; cursor: pointer;
}
.nm-products-toggle:hover { color: var(--deep); }
.nm-products-toggle:focus-visible { outline: 2px solid var(--champagne); outline-offset: 3px; border-radius: 2px; }
.nm-products-chevron {
  width: 18px; height: 18px; flex: 0 0 18px; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .2s ease;
}
.nm-products-toggle[aria-expanded="true"] .nm-products-chevron { transform: rotate(180deg); }
.nm-products-panel { padding: 2px 0 5px 10px; border-bottom: 1px solid var(--border); }
.nm-products-panel[hidden] { display: none !important; }
.nm-products-panel .nm-sub:last-child { border-bottom: 0; }

/* CSS-Konsolidierung 20260801: Die urspruengliche asymmetrische Bento-
   Komposition fuer .pw-grid.systeme-6 (Audit cc_9881fcef, 20260716) stand
   hier mit eigenen grid-column/grid-row-Zuweisungen, grid-auto-rows:260px
   und festen grid-template-rows (300px 260px 300px). Sie wurde durch die
   spaetere, bewusst vereinfachte "Startseite Produktwelten 20260719"-Version
   ersetzt (gleichmaessiges 1-2-3-Spalten-Raster, siehe .pw-grid.systeme-6
   weiter unten in dieser Datei) -- DORT wird grid-column/grid-row fuer alle
   Kacheln explizit auf "auto" zurueckgesetzt. Das hier uebrig gebliebene
   grid-auto-rows:260px wurde von dieser Reset-Regel aber NICHT mit
   aufgehoben (unterschiedliche CSS-Properties) und zwang dadurch jede Karte
   auf eine feste 260px-Zeilenhoehe -- obwohl die aktuelle Kartenanatomie
   (Bild + Textzone, natuerliche Hoehe) mehr Platz braucht. Genau das hat die
   Beschriftung "Terrassenüberdachungen" etc. im Alltag fast vollstaendig
   abgeschnitten. Ersatzlos entfernt; die aktive, einzige gueltige Definition
   ist die 3-Spalten-Version weiter unten. */

/* Neue Produktwelten-Atmosphären (Fallback-Gradient, falls Foto fehlt) */
.pw-schirm {
  background:
    radial-gradient(ellipse at 72% 40%, rgba(216,121,71,.38) 0%, transparent 48%),
    radial-gradient(ellipse at 18% 76%, rgba(201,166,107,.2) 0%, transparent 40%),
    linear-gradient(148deg, #150e06 0%, #33210c 40%, #4a2e12 75%, #2e1c09 100%);
}
.pw-segel {
  background:
    radial-gradient(ellipse at 64% 28%, rgba(142,197,216,.3) 0%, transparent 45%),
    radial-gradient(ellipse at 24% 78%, rgba(201,166,107,.12) 0%, transparent 38%),
    linear-gradient(148deg, #081018 0%, #163E52 42%, #1e5878 78%, #0d1f2c 100%);
}
.pw-glas {
  background:
    radial-gradient(ellipse at 30% 30%, rgba(201,166,107,.3) 0%, transparent 46%),
    radial-gradient(ellipse at 78% 72%, rgba(142,197,216,.18) 0%, transparent 40%),
    linear-gradient(148deg, #0e1014 0%, #22262e 42%, #34302a 76%, #201c16 100%);
}

/* Gastro-Banner (Anwendungsbereich-Teaser auf Startseite & Produktseiten).
   Designreview 20260718: Foto und Text in getrennte Flaechen aufgeteilt
   (vorher Text direkt auf dem Foto mit Verlaufs-Scrim) — .gastro-banner-media
   traegt jetzt allein das Bild, .gastro-banner-body ist eine eigene, blickdichte
   Flaeche daneben. */
.gastro-banner {
  display: grid; grid-template-columns: 1fr 1fr; align-items: stretch;
  border-radius: 18px; overflow: hidden; margin: 0 auto; max-width: var(--cw);
  box-shadow: 0 18px 48px rgba(18,63,85,.14);
}
.gastro-banner-media {
  background-image: url('images/generated/solanero-sonnensegel-gastronomie-seeterrasse-01.jpg');
  background-size: cover; background-position: center; min-height: 280px;
}
.gastro-banner-body {
  background: var(--deep); display: flex; flex-direction: column; justify-content: center;
  padding: 40px 44px;
}
.gastro-banner-tag { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--champagne); font-weight: 700; margin-bottom: 12px; }
.gastro-banner-body h2 { font-family: var(--serif); font-size: clamp(22px,3vw,30px); color: #fff; font-weight: 400; margin-bottom: 12px; line-height: 1.2; }
.gastro-banner-body p { font-size: 13.5px; color: rgba(255,255,255,.72); line-height: 1.7; margin-bottom: 20px; max-width: 420px; }
@media(max-width:768px){
  .gastro-banner { grid-template-columns: 1fr; border-radius: 0; margin: 0 calc(-1 * var(--pad)); }
  .gastro-banner-media { min-height: 220px; }
  .gastro-banner-body { padding: 30px 24px; }
}

/* Bild-Module für Content-Seiten (großflächig statt viele kleine Karten) */
.media-figure { position: relative; display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; background: var(--pure); box-shadow: 0 14px 40px rgba(18,63,85,.09); }
.media-figure img { width: 100%; height: 100%; min-height: 0; flex: 1 1 auto; object-fit: cover; display: block; }
.media-duo { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media(min-width:768px){ .media-duo { grid-template-columns: 1fr 1fr; } }
.media-duo .media-figure { height: 320px; }
.media-trio { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media(min-width:768px){ .media-trio { grid-template-columns: repeat(3,1fr); } }
.media-trio .media-figure { height: 300px; }
/* Harmonisiertes 6er-Raster (2 Reihen à 3) statt getrennter 3er+2er-Sektion — konsolidiert am 20260715 */
.media-hex { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media(min-width:768px){ .media-hex { grid-template-columns: repeat(3,1fr); } }
.media-hex .media-figure { height: 300px; }
.media-caption {
  position: static; z-index: auto; flex: 0 0 auto; padding: 15px 18px 16px;
  background: var(--pure); border-top: 1px solid var(--border);
  color: var(--text); font-size: 13px; font-weight: 650; line-height: 1.45;
  letter-spacing: .005em;
}
.media-hero-strip { width: 100%; height: 380px; border-radius: 0; overflow: hidden; }
.media-hero-strip img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-figure-wide { height: 380px; }

/* Partner-Dashboard Performance-Trichter */
.funnel-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-bottom: 6px; }
@media(max-width:640px){ .funnel-grid { grid-template-columns: repeat(2,1fr); } }
.funnel-step { background: var(--sand); border-radius: 10px; padding: 12px 10px; text-align: center; }
.funnel-n { font-family: var(--serif); font-size: 22px; font-weight: 700; color: var(--forest); }
.funnel-l { font-size: 11px; color: var(--muted); margin-top: 2px; line-height: 1.3; }
@media(max-width:640px){ .media-duo .media-figure, .media-trio .media-figure, .media-hex .media-figure, .media-figure-wide { height: 220px; } .media-hero-strip { height: 260px; } }

/* Privat/Gastro Kontext-Chip (Produktseiten-Untertitel) */
.ctx-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; padding: 5px 12px; border-radius: 20px; margin-right: 8px; margin-bottom: 6px; }
.ctx-privat { background: #eef7fa; color: var(--brand-blue-soft, var(--deep)); border: 1px solid #cfe4ea; }
.ctx-gastro { background: #fbf1e7; color: #94582a; border: 1px solid #ecd3b8; }

/* ── V2c · 7-WELTEN-AUSBAU ERGÄNZUNGEN (2026-07-15) ──────────────────── */
/* Aktiver Zustand im Produkte-Dropdown */
.nav-drop-item.current { background: var(--stone); }
.nav-drop-item.current strong { color: var(--brand-blue, var(--deep)); }
/* Touch-Fallback fürs Dropdown (kein :hover auf Touch-Geräten) */
.nav-drop.force-open .nav-drop-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.nav-drop-trigger { position: relative; background: none; border: none; font: inherit; color: inherit; padding: 8px 12px; border-radius: 4px; cursor: pointer; }
/* Hover/Active zentral in der NAV-Basissektion (--nav-fg-strong/--nav-tint/
   --nav-underline, siehe .nav-links a::after weiter oben) -- deckt sowohl
   "Produkte" als auch "Partner" ab, da beide dieselbe Klasse teilen. */

/* Privat/Gastro Kontext-Toggle (Produktfinder, Anfrage) */
.ctx-toggle-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; align-items: center; }
.ctx-toggle-label { font-size: 12.5px; font-weight: 700; color: var(--muted); margin-right: 2px; }
.ctx-toggle { cursor: pointer; border: 1.5px solid var(--border); background: var(--pure); font: inherit; }
.ctx-toggle.active { border-color: currentColor; box-shadow: 0 0 0 1px currentColor inset; }

/* Kategorie "Gastro" im Ratgeber-Filter */
.cat-chip.cat-gastro-active { background: #a5622f; border-color: #a5622f; }

/* No-Results Zustand Fachbetriebsfilter */
.no-results { display: none; }
.no-results.show { display: block; }

@media(max-width:1023px){
  /* Dropdown existiert nur Desktop — force-open-Klasse hier irrelevant, aber schadet nicht */
}


/* SOLANERO P0-Redesign 20260715_154430: 6-Kachel-Grid, Bildzuordnung ohne Dopplung zum Hero-Slider (siehe auto-slider unten: M2/L4/G2/SG1/P1/S2 dort bereits vergeben) */
/* Vormals hier: milchiger 90deg-Weissverlauf ueber .hero-home als Bildquelle
   -- toter Code, .hero-home.has-slider setzt background:none!important und
   gewinnt in jedem Fall (hoehere Spezifitaet). Entfernt statt weitergepflegt
   (Audit cc_9881fcef, 20260716). */
.pw-markise { background-image:url('images/generated/solanero-markise-dachterrasse-sonnenuntergang-01.jpg')!important; }
.pw-pergola { background-image:url('images/generated/solanero-pergolamarkise-familie-lounge-garten-01.jpg')!important; }
.pw-lamelle { background-image:url('images/generated/solanero-lamellendach-whirlpool-sonnenuntergang-01.jpg')!important; }
.pw-schirm { background-image:url('images/generated/solanero-sonnenschirme-gastronomie-seeterrasse-01.jpg')!important; }
.pw-segel { background-image:url('images/generated/solanero-sonnensegel-gastronomie-seeterrasse-01.jpg')!important; }
.pw-glas { background-image:url('images/generated/solanero-kubisches-glasdach-familie-hund-02.jpg')!important; }

/* Terrasse-Mosaik "liebster Ort im Haus": Editorial-Layout statt Galerie-Raster (P0-Redesign 20260715) */
.terrasse-mosaic { display:grid; grid-template-columns:1fr; gap:16px; }
@media(min-width:901px){
  .terrasse-mosaic {
    grid-template-columns: 1.6fr 1fr 1fr;
    grid-template-rows: 320px 260px;
    grid-template-areas: "hero hero topright" "bl bm br";
  }
  .tm-hero { grid-area:hero; }
  .tm-topright { grid-area:topright; }
  .tm-bl { grid-area:bl; }
  .tm-bm { grid-area:bm; }
  .tm-br { grid-area:br; }
}
.terrasse-mosaic .media-figure { height:240px; }
@media(min-width:901px){ .terrasse-mosaic .media-figure { height:100%; } }
.solanero-media-block { padding-top:34px; padding-bottom:34px; }
.solanero-media-block .media-figure { min-height:340px; }
.hero-product { min-height:560px; display:flex; align-items:center; }
.hero-product > .cw { width: 100%; }

/* ── AUFGABE 1: Hero Lesbarkeit — Textpanel-Overlay (20260715) ──────────────
   .hero-product-dark markiert Helden mit dunklem Bild- oder Farbverlauf-
   Hintergrund. Das CSS-Override aus Zeile ~852 setzt h1/hero-sub auf blaue
   Farben (für helle Produktseiten) — diese Klasse setzt die Farben zurueck
   auf Weiss. .hero-text-panel erzeugt einen gezielten dunklen Backdrop nur
   hinter dem Textblock (nicht das ganze Bild abdunkeln), mit Blur und Radius.
   Gilt fuer: markisen, pergolamarkisen, sonnenschirme, sonnensegel,
   kubische-glasdaecher (Foto-Hintergrund), lamellendaecher, terrassenueber-
   dachungen (dunkler Farbverlauf). */
.hero-product-dark h1,
.hero-product-dark h1 em { color: #fff !important; }
.hero-product-dark h1 em { color: var(--champagne) !important; }
.hero-product-dark .hero-sub {
  color: rgba(255,255,255,.92) !important;
  font-size: clamp(15.5px,2.1vw,17.5px) !important;
  line-height: 1.9 !important;
}
.hero-product-dark .hero-tag {
  background: rgba(255,255,255,.11) !important;
  border-color: rgba(255,255,255,.26) !important;
  color: rgba(255,255,255,.88) !important;
}
/* Launch-Review 20260728: eigene transparente Variante entfernt -- die
   globale .btn-outline-w Basisregel (heller Button, dunkler Text) hat
   bereits zuverlaessigen Kontrast auf dunklem Hero-Grund und ersetzt diese
   Sonderregel. */

/* ══════════════════════════════════════════════════════════════════════
   HERO-SAFE-ZONE — EINHEITLICH FUER ALLE .hero-product-dark-SEITEN
   (Header-System-Vereinheitlichung 20260718b, Auftrag "Produktberatung
   wirkt gedrueckt"). .nav wird auf hero-product-dark/-home-Seiten per
   position:fixed OHNE Platz im Dokumentfluss ueber den Hero gelegt (112px
   Desktop / 64px <=640px, siehe :has(+ .hero-product-dark)-Block weiter
   unten in dieser Datei). Die Basis-.hero-product-Polsterung (72px/60px,
   siehe oben) liegt darunter -- Badge/Ueberschrift werden vom Header
   ueberlappt und wirken zusammengedrueckt. Bisher war das nur fuer
   /fachhaendler/ per Seiten-Klasse (.ff-hero-compact) behoben
   (P0-Fund 20260718) -- alle anderen hero-product-dark-Seiten (markisen,
   pergolamarkisen, lamellendaecher, terrassenueberdachungen, sonnenschirme,
   sonnensegel, gastro-outdoor-living, anfrage, produktfinder/"Produktbera-
   tung", alle regional-*-Seiten) hatten den Fehler weiterhin. Fix jetzt
   zentral hier (Z-930 Template-First), gilt automatisch fuer jede neue
   Seite mit dieser Klassenkombination. Werte = bisherige ff-hero-compact-
   Untergrenze + 30-50px zusaetzliche Luft, angelehnt an den grosszuegigeren
   vertikalen Rhythmus der Startseite (.hero-home). Seiten-eigene Klassen
   (.ff-hero-compact) sind dadurch obsolet und wurden entfernt.

   Nachtrag 20260718 (Paralleler Korrekturlauf, Pflichtblock 1 "Produkt-
   beratung/Safe-Zone"): reale Messung (Playwright-BoundingClientRect,
   nav-bottom vs. .hero-tag-top) ergab bereits 99-133px Abstand -- das lag
   rechnerisch bereits ueber der Startseite (.hero-home: fixe 96px, siehe
   Zeile ~986). Damals zusaetzlich +24-26px Luft ergaenzt.

   Korrektur 20260719 (Gesamt-Reconciliation, Checklistenpunkt "Produkt-
   beratung-Hero ... vertikal etwas hoeher, aber mit sauberer Safe-Zone"):
   frische Playwright-Messung ergab reale Diskrepanz zur Startseite --
   .hero-text-panel.top lag bei 1440x900 69px, bei 1920x1080 21px tiefer
   als auf index.html, weil der o.g. Nachtrag mehr Luft aufbaute als die
   Startseite selbst hat (Ziel war Angleichung, nicht Uebertreibung). Die
   +24-26px-Zugabe von 20260718 wird hier zurueckgenommen, der Wert bleibt
   aber weiterhin ueber der zuvor real gemessenen 99-133px-Untergrenze
   (>112px Header + Sicherheitsabstand) -- keine erneute Kollisionsgefahr,
   siehe Nachweis qa/reconciliation_final_20260719/. */
.hero-product.hero-product-dark { padding-top: 160px; padding-bottom: 48px; }
@media(max-width:640px){
  .hero-product.hero-product-dark { padding-top: 128px; padding-bottom: 40px; }
}
@media(min-width:768px){
  .hero-product.hero-product-dark {
    min-height: clamp(320px, 46vh, 480px);
    padding: clamp(176px, 20vh, 210px) 0 clamp(28px, 4vh, 48px);
  }
  .hero-product.hero-product-dark .hero-tag { margin-bottom: clamp(10px, 1.6vh, 20px); }
  .hero-product.hero-product-dark h1 { margin-bottom: clamp(10px, 1.6vh, 18px); }
  .hero-product.hero-product-dark .hero-sub { margin-bottom: clamp(14px, 2.6vh, 32px); }
  .hero-product.hero-product-dark .hero-actions { margin-bottom: 0; }
}

/* ══════════════════════════════════════════════════════════════════════
   HERO-COMPACT-V2 — B1.12 Produkt-Hero/UX-Pilot (20260904)
   Gemeinsame, gezielt opt-in gescopte Kompakt-Variante des obigen Safe-
   Zone-Systems (Vollaudit `docs/SOLANERO_FULL_SITE_PLAYWRIGHT_REVIEW_
   NEXT_STEPS_20260904.md`: 13/14 Produkt-Heros ueberschreiten Desktop-
   und Mobil-Zielwerte). Bewusst NICHT die Basis-.hero-product-dark-Regeln
   oben veraendert, sondern eine zusaetzliche Klasse -- dadurch bleibt der
   Piloteffekt auf die drei in B1.12 QA-geprueften Seiten begrenzt
   (markisen, rollladen, motorisierung-smarthome), bis ein eigenes
   Folgepaket nach gruenem Rollout-Gate den Klassennamen auf die
   verbleibenden hero-product-dark-Seiten ausrollt. Eine einzige geteilte
   Komponente statt drei Einzelloesungen; nur der Anwendungsbereich ist
   vorerst eingeschraenkt. */
.hero-product-dark.hero-compact-v2 { padding-bottom: 40px; }
@media(max-width:640px){
  .hero-product-dark.hero-compact-v2 { padding-top: 108px; padding-bottom: 26px; }
  .hero-product-dark.hero-compact-v2 .hero-tag { margin-bottom: 12px; }
  .hero-product-dark.hero-compact-v2 h1 { margin-bottom: 10px; }
  .hero-product-dark.hero-compact-v2 .hero-sub { margin-bottom: 18px; line-height: 1.62 !important; }
  .hero-product-dark.hero-compact-v2 .hero-actions { margin-bottom: 0; }
  .hero-product-dark.hero-compact-v2 .hero-text-panel { padding: 24px 22px; }
}
@media(min-width:768px){
  .hero-product-dark.hero-compact-v2 {
    min-height: clamp(280px, 38vh, 420px);
    padding: clamp(148px, 16vh, 176px) 0 clamp(24px, 3vh, 40px);
  }
  .hero-product-dark.hero-compact-v2 .hero-tag { margin-bottom: clamp(10px, 1.6vh, 20px); }
  .hero-product-dark.hero-compact-v2 h1 { margin-bottom: clamp(10px, 1.6vh, 18px); }
  .hero-product-dark.hero-compact-v2 .hero-sub { margin-bottom: clamp(14px, 2.6vh, 32px); }
  .hero-product-dark.hero-compact-v2 .hero-actions { margin-bottom: 0; }
  /* Breiteres Textpanel statt schmalerer 600px-Kappung: laesst mehrteilige
     H1s (z.B. Rollladen "Rollläden — Sicht-, Sonnen-") vor dem bewusst
     gesetzten <br> in einer Zeile umbrechen, statt zusaetzlich fruehzeitig
     zu falten -- eine Zeile weniger spart auf Desktop direkt Hero-Hoehe. */
  .hero-product-dark.hero-compact-v2 .hero-text-panel { max-width: 700px; }
}

/* Gezielter dunkler Text-Backdrop — nur hinter dem Textblock.
   Kein backdrop-filter/blur mehr (Audit cc_9881fcef, 20260716): der Verlauf
   dahinter soll scharf bleiben, Kontrast kommt allein aus der 76%-Deckkraft. */
.hero-text-panel {
  background: rgba(8,20,29,.76);
  border-radius: 14px;
  padding: 34px 38px;
  max-width: 600px;
  border: 1px solid rgba(255,255,255,.07);
  box-shadow: 0 8px 48px rgba(8,20,29,.28);
}
/* Homepage-Variante: etwas breiter fuer die 4er-Statleiste, gleicher Scrim */
.hero-home-panel { max-width: 660px; }
@media(max-width:640px){ .hero-home-panel { padding: 26px 22px; } }
@media(max-width:767px) {
 .hero-home { background-position:62% center!important; }
 .hero-product { min-height:520px; background-position:62% center!important; }
 .media-hero-strip { height:250px; }
 .solanero-media-block { padding-top:18px; padding-bottom:18px; }
 .solanero-media-block .media-figure { min-height:230px; height:230px; }
}

/* ── AUTO-SLIDER-KOMPONENTE (20260715) ───────────────────────────────────
   Automatisch rotierender Bild-Slider ohne manuelle Pfeile/Punkte.
   Kein-JS-Fallback: erstes .auto-slider-slide hat .is-active bereits im
   HTML markiert und bleibt ohne auto-slider.js dauerhaft statisch sichtbar.
   Genutzt in: .hero-home (Startseite) und .media-hero-strip (Fachpartnerbereich). */
.auto-slider { position: absolute; inset: 0; overflow: hidden; }
.auto-slider-slide {
  position: absolute; inset: 0; opacity: 0;
  transition: opacity 1.8s ease;
}
.auto-slider-slide.is-active { opacity: 1; z-index: 1; }
.auto-slider-slide img {
  width: 100%; height: 100%; object-fit: cover; object-position: 62% center;
  display: block;
}
.auto-slider-slide.is-active img { animation: solaneroSlowZoom 9s ease-out forwards; }
@keyframes solaneroSlowZoom { from { transform: scale(1); } to { transform: scale(1.045); } }
@media (prefers-reduced-motion: reduce) {
  .auto-slider-slide { transition: none !important; }
  .auto-slider-slide img { animation: none !important; }
}

/* Hero-Home mit Slider: Foto-Ebene liegt hinter dem hellen Text-Verlauf */
.hero-home.has-slider {
  position: relative; overflow: hidden; background: none !important;
  background-color: #123f55;
}
.hero-home.has-slider .auto-slider { z-index: 0; }
/* Kein Vollflaechen-Overlay mehr ueber dem Slider (Audit cc_9881fcef, 20260716):
   die vorherige 90deg/180deg-Weissverlauf-Ebene lag ueber ALLEN Slides und
   erzeugte die gemeldete milchige Wasserzeichenwirkung. Fotos bleiben jetzt
   scharf/kontrastreich; Lesbarkeit ausschliesslich ueber .hero-text-panel
   als kleinen lokalen Scrim hinter dem Textblock. */
.hero-home.has-slider .hero-cw { position: relative; z-index: 2; }

/* Media-Hero-Strip (Fachpartnerbereich) mit Slider */
.media-hero-strip.has-slider { position: relative; }
.media-hero-strip.has-slider .auto-slider-slide img { object-position: center; }

/* ── P0 PREMIUM-REDESIGN PARTNERBEREICH — Editorial Split-Hero (20260715b) ──
   Ersetzt den vorherigen Full-Bleed-Foto-Hero mit schwachem Verlauf: Ueberschrift
   und Fliesstext lagen dort direkt auf einem scharfen, detailreichen Innenraum-
   Foto (Fenster/Personen) und waren kaum lesbar -- Kernkritik im QA-Review
   20260715. Neue Loesung: klare 56/44-Editorial-Split-Komposition. Text steht
   auf einer massiven Navy-Flaeche (immer volle Lesbarkeit, kein Foto-Rauschen
   hinter Buchstaben), das Foto lebt in einer eigenen Spalte rechts und ist
   sofort sichtbar -- kein separater, weit abgehaengter Bildbereich mehr.
   .phero* ist ein neuer, eigenstaendiger Klassenname, der ausschliesslich auf
   partner-werden.html verwendet wird und keine andere .hero-product-Seite
   (Produkthubs, Regionalseiten, Partnerprofile) beeinflusst. */
.phero { position: relative; background: #0b2231; overflow: hidden; }
.phero-grid { display: grid; grid-template-columns: 1fr; }
@media(min-width:901px){
  .phero-grid { grid-template-columns: minmax(0,55%) minmax(0,45%); min-height: clamp(560px, 62vh, 760px); }
}

.phero-text { position: relative; z-index: 2; display: flex; align-items: center; }
.phero-text-inner {
  width: 100%; max-width: 600px;
  padding: 76px 28px 44px max(28px, calc((100vw - var(--cw)) / 2 + 20px));
}
@media(min-width:768px){
  .phero-text-inner { padding: 88px 40px 56px max(40px, calc((100vw - var(--cw)) / 2 + 20px)); }
}
/* P0-Nachbesserung 20260715c: die vorherige >=901px-Regel setzte padding-left
   ueber calc((100vw - var(--cw))/2 + 20px) -- ab Breiten > --cw (1140px) wuchs
   dieser Wert auf 300-400px+ und frass sich (border-box) in die fixe
   max-width:600px-Box hinein. Bei 1920px blieben dadurch nur noch ~150px
   Content-Breite: die Headline brach in 8-10 Kurzzeilen um, der Textblock
   wurde dadurch hoeher als der Viewport -- Kennzahlenzeile lag unterhalb des
   sichtbaren Bereichs, oben blieb praktisch kein Puffer zum Header. Fix: fixes,
   viewport-unabhaengiges clamp()-Padding auf allen Seiten statt eines
   ungebremst wachsenden vw-Werts, dazu eine an --cw angelehnte aber gedeckelte
   Content-Breite. */
@media(min-width:901px){
  .phero-text-inner {
    max-width: 640px;
    padding: clamp(64px, 9vh, 108px) clamp(40px, 4vw, 72px) clamp(56px, 8vh, 96px) clamp(48px, 6vw, 132px);
  }
}
@media(min-width:1440px){
  .phero-text-inner { max-width: 660px; }
}

.phero-media { position: relative; min-height: 300px; overflow: hidden; background: #0b2231; }
.phero-media .auto-slider { position: absolute; inset: 0; }
.phero-media .auto-slider-slide img { width: 100%; height: 100%; object-fit: cover; object-position: 60% center; }
.phero-media > img { width: 100%; height: 100%; object-fit: cover; object-position: 60% center; display: block; }
@media(min-width:901px){
  .phero-media::before {
    content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(90deg, rgba(11,34,49,.85) 0%, rgba(11,34,49,.28) 6%, rgba(11,34,49,0) 17%);
  }
}
@media(max-width:900px){
  .phero-media { aspect-ratio: 4 / 3; min-height: 0; }
  .phero-media::after {
    content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(180deg, rgba(11,34,49,.5) 0%, rgba(11,34,49,0) 24%, rgba(11,34,49,0) 76%, rgba(11,34,49,.3) 100%);
  }
}

/* Editorial Eyebrow statt Pill-Badge im Partner-Hero (ruhiger, hochwertiger) */
.hero-partner-eyebrow {
  display: flex; align-items: center; gap: 10px;
  font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--brand-gold); margin-bottom: 20px;
}
.hero-partner-eyebrow::before { content: ''; width: 26px; height: 1.5px; background: var(--brand-gold); border-radius: 2px; }

.phero-text h1 {
  font-family: var(--serif); font-weight: 400; color: #fff;
  font-size: clamp(28px, 3vw, 41px); line-height: 1.16; letter-spacing: -.012em;
  max-width: 600px; margin-bottom: 20px;
}
.phero-text h1 em { font-style: italic; color: var(--champagne); font-weight: 300; }
.phero-text .hero-sub {
  max-width: 460px; font-size: clamp(14.5px, 1.5vw, 16px);
  color: rgba(255,255,255,.66); line-height: 1.85; margin-bottom: 34px;
}
.phero-text .hero-actions { margin-bottom: 0; }
.phero-text .btn-ghost-light { color: rgba(255,255,255,.88); border-color: rgba(255,255,255,.34); }
.phero-text .btn-ghost-light:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.75); }

/* Faktenzeile im Partner-Hero -- Werte direkt aus dem Seiteninhalt (Partnerpakete/Anforderungen), keine neuen Behauptungen.
   Duenne Trennlinien statt loser Abstaende: liest sich als eine ruhige Datenzeile, nicht als drei einzelne Kacheln. */
.hero-partner-facts { display: flex; flex-wrap: wrap; margin-top: 40px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.14); }
.hero-partner-facts .hero-stat { padding-right: 26px; margin-right: 26px; border-right: 1px solid rgba(255,255,255,.14); }
.hero-partner-facts .hero-stat:last-child { border-right: none; margin-right: 0; padding-right: 0; }
.hero-partner-facts .hero-stat-n { font-family: var(--serif); font-size: 20px; font-weight: 700; color: #fff; }
.hero-partner-facts .hero-stat-l { font-size: 10.5px; color: rgba(255,255,255,.5); margin-top: 4px; letter-spacing: .03em; max-width: 136px; line-height: 1.4; }

@media(max-width:640px){
  .hero-partner-facts { margin-top: 28px; padding-top: 20px; }
  .hero-partner-facts .hero-stat { padding-right: 16px; margin-right: 16px; }
}

/* ── GLOBALE MICROINTERACTIONS / A11Y-POLISH (P0-Redesign 20260715) ──────
   Site-weit additiv und ungefaehrlich: nur :focus-visible-Ring (vorher gar
   keiner) + reduzierte Bewegung fuer Hover-Transforms. Aendert keine
   bestehende Farbe/Layout, daher sicher fuer alle Seiten. */
a:focus-visible, button:focus-visible, .btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--brand-gold, var(--champagne));
  outline-offset: 2px; border-radius: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .partner-feature, .phc, .rat-card, .card, .pw-content, .btn { transition: none !important; }
  .partner-feature:hover, .phc:hover, .rat-card:hover, .btn:hover { transform: none !important; }
}

/* ── SCROLL-REVEAL UTILITY (P0-Redesign 20260715b) ────────────────────────
   Additive, opt-in Klasse: nur Elemente mit .reveal animieren, alles andere
   ist unveraendert. Ruhiges Ein-Fade + leichtes Anheben beim Eintritt in den
   Viewport statt gestaffelter Kachel-Animationen (keine hektische Bewegung).
   Aktivierung ueber globalen IntersectionObserver in site-chrome.js
   (Design-Nachtrag 20260716 -- vorher stand hier ein Verweis auf einen
   Pro-Seiten-Observer, der nirgends existierte; jetzt einmal zentral). */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ── SCROLL-CHOREOGRAPHIE (Design-Nachtrag 20260716) ──────────────────────
   Zwei wiederverwendbare Techniken statt Einzelseiten-Spielereien
   (Referenzmatrix Abschnitt "Scroll-Inszenierung"):
   1) .chapter-pin  -- Bild bleibt stehen (position:sticky), Textblöcke
      gleiten kontrolliert darüber. Klassisches Sticky-Media-Pattern, GPU-
      billig (kein scroll-gebundenes JS).
   2) .chapter-full -- großes Bildkapitel über die volle Breite mit sauberem
      Fade/Anheben-Übergang, aktiviert über .reveal + IntersectionObserver.
   Auf Mobil (<768px) wird .chapter-pin zu einem normalen statischen Block,
   damit kein hohes Sticky-Element den mobilen Lesefluss blockiert. */
.chapter-pin { position: relative; margin: 64px 0; }
.chapter-pin-media {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  background-size: cover; background-position: center; z-index: 1;
}
.chapter-pin-media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,20,25,.05) 0%, rgba(10,20,25,.62) 100%);
}
.chapter-pin-content { position: relative; z-index: 2; margin-top: -58vh; }
.chapter-pin-block {
  min-height: 58vh; display: flex; align-items: center;
  max-width: 520px; padding: 32px var(--pad); color: #fff;
}
@media(min-width:768px){ .chapter-pin-block { padding: 40px var(--pad-lg); } }
.chapter-pin-block h3 {
  font-family: var(--serif); font-size: clamp(22px, 3vw, 30px);
  margin-bottom: 12px; color: #fff;
}
.chapter-pin-block p { font-size: 14.5px; line-height: 1.75; color: rgba(255,255,255,.82); }
@media(max-width:767px){
  .chapter-pin-media { position: static; height: 46vh; }
  .chapter-pin-content { margin-top: 0; }
  .chapter-pin-block { min-height: 0; padding: 28px var(--pad) 8px; color: var(--text); }
  .chapter-pin-block h3 { color: var(--text); }
  .chapter-pin-block p { color: var(--text-mid); }
}

/* Designreview 20260718: .chapter-full trug Ueberschrift + Fliesstext direkt auf
   dem Vollbild-Foto (nur per Verlauf lesbar). Jetzt eigenstaendiges Bild
   (.chapter-full-media, volle Breite, kein Text darauf) gefolgt von einer
   getrennten, zentrierten Textflaeche (.chapter-full-caption). */
.chapter-full-media {
  min-height: 56vh; background-size: cover; background-position: center;
  border-radius: 16px; overflow: hidden; box-shadow: 0 14px 40px rgba(18,63,85,.09);
}
.chapter-full-caption {
  max-width: 640px; margin: 32px auto 0; padding: 0 var(--pad); text-align: center;
}
.chapter-full-caption h2 {
  font-family: var(--serif); font-size: clamp(26px, 4vw, 38px);
  color: var(--text); margin-bottom: 14px;
}
.chapter-full-caption p { font-size: 15px; line-height: 1.75; color: var(--text-mid); }
@media(max-width:767px){ .chapter-full-media { min-height: 42vh; } }

/* Startseite ist ein <img loading="lazy"> statt CSS-Hintergrundbild --
   echtes natives Lazy-Loading unterhalb des Folds statt sofortigem Laden. */
.chapter-full-media { position: relative; }
.chapter-full-media img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.chapter-kicker {
  text-align: center; font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; margin-bottom: 22px;
}

/* Kompaktheits-Fix 20260720: Ueberschrift+Text unter dem Abendbild wirkten mit
   voller .sec-Polsterung (88px oben+unten) plus voller Polsterung des
   nachfolgenden Gastro-Teasers (88px oben) wie ein zu breiter Leerraum-Block
   vor dem Uebergang. .sec-chapter-atmosphaere/.sec-gastro-teaser waren im
   Markup bereits als Hooks vorhanden, hatten aber keine eigene Regel -- hier
   ergaenzt, damit nur dieser eine Uebergang dichter wird (kein Einfluss auf
   andere .sec-Bloecke der Seite). */
/* Spezifitaet .sec.sec-chapter-atmosphaere (0,2,0) statt .sec-chapter-atmosphaere
   (0,1,0) noetig: der globale ".sec { padding: 88px 0; }"-Reset im Breiten-/
   Typografie-Pass 20260719 (weiter unten in dieser Datei, ausserdem eigene
   Media-Query-Resets bei 1023px/640px) hat bei gleicher Spezifitaet per
   Source-Order gewonnen und die Kompaktheits-Fix-Werte unten wirkungslos
   gemacht (Messung 20260720 abends: computed padding-bottom blieb 88px statt
   40px). Mit der hoeheren Spezifitaet gewinnt dieser Block unabhaengig von
   seiner Position in der Datei und unabhaengig vom Breakpoint. */
.sec.sec-chapter-atmosphaere { padding-bottom: 40px; }
.chapter-full-caption { margin: 22px auto 0; }
.sec.sec-gastro-teaser { padding-top: 0; }
@media(max-width:767px){
  .sec.sec-chapter-atmosphaere { padding-bottom: 32px; }
  .chapter-full-caption { margin-top: 18px; }
}

/* ── SYSTEM-BRIDGE (Redesign 20260720b) ─────────────────────────────────
   Loest das "Bild an Bild"-Gefuehl zwischen den 6 Produktwelten-Karten und
   dem 5-teiligen Inspiration-Mosaik, ersetzt aber die vorherige
   .quiet-band-Version (108px Padding, eine einzelne Zeile), die als
   "riesige tote Weissflaeche" empfunden wurde. Kompakter Uebergang mit
   Eyebrow, Headline, kurzem Text und drei Qualitaetsmerkmalen bei deutlich
   reduzierten vertikalen Abstaenden. Bewusst weiterhin bildfrei, kein
   Hintergrundbild, keine Karte, kein Schatten. */
.sys-bridge { padding: 60px 0 44px; background: var(--page-white); }
.sys-bridge-inner { max-width: 680px; margin: 0 auto; padding: 0 var(--pad); text-align: center; }
.sys-bridge-eyebrow {
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--sun); font-weight: 600; margin-bottom: 14px;
}
.sys-bridge-h {
  font-family: var(--serif); font-size: clamp(25px, 2.9vw, 36px); font-weight: 400;
  line-height: 1.28; color: var(--text); letter-spacing: -.012em; margin-bottom: 14px;
}
.sys-bridge-sub {
  font-size: 16px; line-height: 1.72; color: var(--text-mid);
  max-width: 560px; margin: 0 auto 28px;
}
.sys-bridge-marks {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 12px 22px; padding-top: 24px; border-top: 1px solid var(--border);
}
.sys-bridge-mark {
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 600; color: var(--text-mid); position: relative;
}
.sys-bridge-mark + .sys-bridge-mark { padding-left: 22px; }
.sys-bridge-mark + .sys-bridge-mark::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 3px; border-radius: 50%; background: var(--sun);
}
@media(max-width:767px){
  .sys-bridge { padding: 40px 0 32px; }
  .sys-bridge-sub { margin-bottom: 22px; }
  .sys-bridge-marks { gap: 10px 18px; padding-top: 20px; }
}
@media(max-width:480px){
  .sys-bridge-marks { flex-direction: column; gap: 10px; }
  .sys-bridge-mark + .sys-bridge-mark { padding-left: 0; }
  .sys-bridge-mark + .sys-bridge-mark::before { display: none; }
}

/* ── PARTNER NAV DROPDOWN (Vollumbau 20260716) ──────────────────────────
   Ersetzt den einfachen nav-partner-link durch ein Dropdown-Menü mit drei
   Partnertypen: Fachpartner, Montagepartner, Hersteller.
   Visuell identisch zu Produkte-Dropdown, aber links-borded als B2B-Bereich. */
.nav-partner-drop {
  margin-left: 14px;
  padding-left: 16px;
  border-left: 1px solid var(--border);
}
.nav-partner-drop .nav-drop-trigger {
  font-size: 12.5px; font-weight: 500; color: var(--text-mid);
  padding: 8px 12px; border-radius: 4px;
}
/* Hover zentral ueber .nav-drop-trigger:hover (NAV-Basissektion) --
   Partner-Trigger teilt dieselbe Klasse, keine eigene Farbe mehr noetig. */
.nav-partner-drop .nav-drop-menu { min-width: 260px; }
/* Rollengetrennte Logins 20260717: .nav-drop-menu ist ein 2-Spalten-Grid (fuer die
   3 "werden"-Eintraege). Die 3 Login-Eintraege sollen darunter als EIN durchgaengiger
   Block erscheinen statt im Grid mit den "werden"-Zeilen zu verzahnen. */
.nav-partner-drop .nav-drop-item-login { grid-column: 1 / -1; }

/* QA-Fund 20260716 (Nachtrag-Visual-QA): .nav-partner-drop bleibt -- anders
   als die "Produkte"-Nav -- auch unterhalb 1024px sichtbar (persistenter
   Partner-Schnellzugriff neben dem Burger-Menue). Die geerbte
   .nav-drop-menu-Basisbreite (560px, zentriert per translateX(-50%)) reisst
   dadurch auf Mobil weit ueber den Viewport hinaus und erzeugt horizontalen
   Seiten-Scroll (gefunden bei Vollpruefung 390px, siehe QA-Report). Fix nur
   fuer den Partner-Dropdown, das Desktop-"Produkte"-Menu ist von diesem
   Bug nicht betroffen (immer hinter .nav-links display:none auf Mobil). */
@media(max-width:1023px){
  .nav-partner-drop .nav-drop-menu {
    width: min(260px, calc(100vw - 32px)); left: auto; right: 0;
    transform: translateY(6px);
  }
  .nav-partner-drop:hover .nav-drop-menu,
  .nav-partner-drop:focus-within .nav-drop-menu,
  .nav-partner-drop.force-open .nav-drop-menu {
    transform: translateY(0) !important;
  }
}

/* ── HERO DARK-FIX (Vollumbau 20260716) ────────────────────────────────
   Verhindert dass der helle Weiss-Gradient aus .hero-product (Line ~852)
   auf Dark-Hero-Seiten sichtbar wird. Hoehere Spezifizitaet (2 Klassen)
   schlaegt den Einzel-Klassen-Override. Inline style="background:url(...)"
   behaelt trotzdem immer Vorrang. */
.hero-product.hero-product-dark {
  background: var(--deep);
  border-bottom: none;
}

/* ── DACHMARKEN-CLAIM (Vollumbau 20260716) ─────────────────────────────
   Positioniert SOLANERO als Brücke zwischen Endkunden, Fachpartnern,
   Montagepartnern und Herstellern — direkt nach dem Hero/Benefit-Strip. */
.dachmarke-banner {
  background: var(--deep);
  padding: 28px 0;
  text-align: center;
}
.dachmarke-banner p {
  font-size: clamp(14px, 2vw, 16.5px);
  color: rgba(255,255,255,.72);
  max-width: 780px;
  margin: 0 auto;
  line-height: 1.75;
  padding: 0 var(--pad);
}
.dachmarke-banner strong {
  color: var(--champagne);
  font-weight: 700;
}
/* Rollen-Zeile (Branchenportal-Umbau Phase 1, 2026-07-23): macht die 5 vernetzten
   Akteure sichtbar, analog der Rollen-Zeile im Partner-Puzzle-Intro (partner.html),
   aber hier zusaetzlich um Architekten & Planer erweitert. */
.dachmarke-rollen {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 8px;
  margin-top: 16px; padding: 0 var(--pad);
}
.dachmarke-rolle {
  font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: rgba(255,255,255,.85); background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16); border-radius: 20px; padding: 6px 14px;
  text-decoration: none; transition: background .15s, color .15s;
}
a.dachmarke-rolle:hover { background: var(--champagne); color: var(--deep); border-color: var(--champagne); }

/* ── PARTNER PAGE SIMPLIFIED (Vollumbau 20260716) ──────────────────────
   Neue einfache partner-werden.html Struktur: weiss/clean, Business-like */
.partner-v2-hero {
  background: linear-gradient(155deg, var(--deep) 0%, #1a4f6e 60%, #0c2030 100%);
  padding: 72px 0 64px;
}
.partner-v2-hero h1 {
  font-family: var(--serif); font-size: clamp(28px, 5vw, 52px);
  color: #fff; font-weight: 400; line-height: 1.1; letter-spacing: -.018em;
  margin-bottom: 18px; max-width: 640px;
}
.partner-v2-hero h1 em { font-style: italic; color: var(--champagne); font-weight: 300; }
.partner-v2-hero .hero-sub { color: rgba(255,255,255,.7); font-size: clamp(14.5px,2vw,17px); max-width: 520px; margin-bottom: 36px; }
.benefit-world-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
}
@media(max-width:640px){ .benefit-world-grid { grid-template-columns: 1fr; } }
.benefit-world {
  background: var(--pure); border: 1.5px solid var(--border-cool);
  border-radius: 16px; padding: 28px; transition: box-shadow .2s, transform .2s;
}
.benefit-world:hover { box-shadow: 0 10px 36px rgba(22,62,82,.1); transform: translateY(-2px); }
.benefit-world h3 {
  font-family: var(--serif); font-size: 17px; font-weight: 700;
  margin-bottom: 10px; color: var(--text);
}
.benefit-world p { font-size: 13.5px; color: var(--text-mid); line-height: 1.75; }
/* Block B Revision 20260801: dezenter Status-Hinweis fuer Funktionen, die
   sichtbar aber ehrlich als im Aufbau/Pilot gekennzeichnet sind (Jobbörse,
   Fachpartner-Community) -- bewusst keine "Fertig"-Optik. */
.bw-badge {
  display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: #92400e; background: #fef3c7;
  border: 1px solid #fde68a; border-radius: 999px; padding: 3px 9px; margin-left: 8px;
  vertical-align: middle;
}
.partner-plan-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 700px;
}
@media(max-width:580px){ .partner-plan-grid { grid-template-columns: 1fr; } }
.partner-plan {
  background: var(--pure); border: 1.5px solid var(--border-cool);
  border-radius: 16px; padding: 28px;
}
.partner-plan.is-highlight {
  border-color: var(--sun); box-shadow: 0 0 0 1px var(--sun) inset, 0 18px 48px rgba(216,121,71,.12);
}
.partner-plan-name {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  color: var(--muted); margin-bottom: 6px;
}
.partner-plan.is-highlight .partner-plan-name { color: var(--sun-text); }
.partner-plan-price {
  font-family: var(--serif); font-size: 32px; font-weight: 700;
  color: var(--deep); margin-bottom: 4px; line-height: 1;
}
.partner-plan-period { font-size: 12px; color: var(--muted); margin-bottom: 14px; }
.partner-plan ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.partner-plan ul li {
  font-size: 13.5px; color: var(--text-mid);
  display: flex; align-items: flex-start; gap: 8px; line-height: 1.55;
}
.partner-plan ul li::before { content: '✓'; color: var(--deep); font-weight: 700; flex-shrink: 0; }
.partner-plan.is-highlight ul li::before { color: var(--sun); }

/* ── PARTNER-VORTEILSSEITE + FACHPARTNER-COMMUNITY-DEMO (Strategiekorrektur 20260722) ── */
.founding-plan-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 980px;
}
@media(max-width:860px){ .founding-plan-grid { grid-template-columns: 1fr 1fr; } }
@media(max-width:580px){ .founding-plan-grid { grid-template-columns: 1fr; } }
.plan-test-badge {
  display: inline-block; font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: #7a4a18; background: var(--sun-light);
  border: 1px solid #e8c49a; border-radius: 999px; padding: 3px 10px; margin-bottom: 12px;
}
.access-table { width: 100%; border-collapse: collapse; background: var(--pure); border: 1.5px solid var(--border-cool); border-radius: 14px; overflow: hidden; font-size: 13.5px; }
.access-table th, .access-table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--border-cool); vertical-align: top; }
.access-table th { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; background: var(--stone); }
.access-table tr:last-child td { border-bottom: none; }
.access-yes { color: var(--deep); font-weight: 700; }
.access-no { color: #b0463c; font-weight: 700; }
.room-card { background: var(--pure); border: 1.5px solid var(--border-cool); border-radius: 16px; padding: 24px; }
.room-card h4 { font-family: var(--serif); font-size: 15.5px; font-weight: 700; margin-bottom: 8px; color: var(--text); }
.room-card p { font-size: 13px; color: var(--text-mid); line-height: 1.65; }
.demo-status-note { background: var(--stone); border: 1.5px dashed var(--border-cool); border-radius: 12px; padding: 14px 18px; font-size: 12.5px; color: var(--text-mid); }
.step-progress { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; }
.step-progress span { font-size: 11.5px; font-weight: 700; color: var(--muted); background: var(--stone); border-radius: 999px; padding: 6px 14px; }
.step-progress span.step-now { color: var(--pure); background: var(--deep); }

/* ── ANFRAGE V2 (Vollumbau 20260716) ────────────────────────────────────
   Produktwahl als grosse Kacheln ganz am Anfang (Progressive Disclosure) */
.anfrage-v2-wrap { max-width: 820px; margin: 0 auto; }
.anfrage-v2-card { background: var(--white); border: 1.5px solid var(--border); border-radius: 20px; padding: 36px; }

/* Produktkacheln — bewusst grafikfrei (Auftrag Produktauswahl-Redesign 20260718):
   die zuvor verwendeten 30px-Linien-SVGs (Markise/Pergola/Lamellen/Glasdach als
   naive Iso-Strichzeichnung) wirkten bei dieser Groesse nicht hochwertig genug
   fuer Premium-Endkunden-UX. Ersetzt durch reine Typografie-Kacheln: Serif-
   Produktname, grosszuegiger Weissraum, klarer Hover-/Aktiv-Zustand ueber
   Rahmen/Flaeche/Schatten statt Icon-Farbwechsel. */
/* 20260814 (Aurelia cc_64e82102): Produktauswahl auf anfrage.html von 6 auf
   12 projektfaehige Produktgruppen erweitert -- Gruppen-Zwischenueberschrift
   statt 12 gleichgewichtiger Karten in einem einzigen Baukasten-Raster. */
.product-pick-group-label {
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); margin: 22px 0 8px;
}
.product-pick-group-label:first-of-type { margin-top: 18px; }
.product-pick-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; margin-top: 0;
}
@media(max-width:640px){ .product-pick-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.product-pick {
  border: 1.5px solid var(--border); background: var(--pure); border-radius: 14px;
  padding: 24px 16px; text-align: center; cursor: pointer;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-height: 84px; min-width: 0;
}
.product-pick:hover { border-color: var(--deep); background: var(--stone); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(22,62,82,.09); }
.product-pick.sel { border-color: var(--deep); background: var(--deep); box-shadow: 0 10px 28px rgba(22,62,82,.22); transform: translateY(-1px); }
.product-pick-name { font-family: var(--serif); font-size: 15px; font-weight: 700; color: var(--text); line-height: 1.28; letter-spacing: .01em; overflow-wrap: break-word; hyphens: auto; }
.product-pick.sel .product-pick-name { color: #fff; }
.product-pick-sub { font-size: 11px; color: var(--muted); line-height: 1.4; }
.product-pick.sel .product-pick-sub { color: rgba(255,255,255,.72); }
.prod-questions { display: none; margin-top: 20px; border-top: 1px solid var(--border); padding-top: 18px; }
.prod-questions.show { display: block; }
.prod-q-title { font-family: var(--serif); font-size: 15px; font-weight: 700; margin-bottom: 14px; color: var(--text); }
/* 20260814 (cc_64e82102): dezenter Hinweis auf den Service-Pfad bei defekten
   Bestandsanlagen der 6 neuen Produktwelten, statt eine Neuanlagen-Anfrage
   zu erzwingen. */
.prod-service-hint { font-size: 12.5px; color: var(--muted); background: var(--stone); border-radius: 8px; padding: 8px 12px; margin: 4px 0 16px; }
.prod-service-hint a { color: var(--deep); font-weight: 600; }
.radio-pick-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 16px; }
.radio-pick {
  border: 1.5px solid var(--border); background: var(--pure); border-radius: 8px;
  padding: 8px 14px; font-size: 13px; font-weight: 600; color: var(--text-mid);
  cursor: pointer; transition: border-color .15s, background .15s;
}
.radio-pick:hover { border-color: var(--deep); background: var(--stone); }
.radio-pick.sel { border-color: var(--deep); background: var(--stone); color: var(--deep); }
/* B1.30: .radio-pick sind teils <button>, teils <div role="radio"> (service-anfrage.html) --
   button:focus-visible (Zeile ~1930) deckt Divs nicht ab, daher eigene, additive Regel. */
.radio-pick:focus-visible { outline: 2px solid var(--deep); outline-offset: 2px; }
.radio-pick.muted-opt { font-size: 12px; color: var(--muted); border-style: dashed; }
.form-hint { font-size: 11.5px; color: var(--muted); line-height: 1.55; margin-top: 4px; }
.anfrage-v2-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--border); }
.anfrage-v2-step { display: none; }
.anfrage-v2-step.active { display: block; }

/* ── ANFRAGE V3 — Premium Projektbriefing (Umbau 20260717) ──────────────
   Bestaetigungsleiste bei Deep-Link mit vorausgewaehltem Produkt/Modell */
.anfrage-selected-bar {
  display: none; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--stone); border: 1.5px solid var(--border); border-radius: 12px;
  padding: 14px 18px; margin-top: 18px;
}
.anfrage-selected-bar.show { display: flex; }
.anfrage-selected-bar-text { font-size: 13.5px; color: var(--text); }
.anfrage-selected-bar-text strong { font-family: var(--serif); font-size: 16px; color: var(--deep); display: block; margin-top: 2px; }
.anfrage-selected-bar-change {
  background: none; border: 1.5px solid var(--border-cool); color: var(--text-mid);
  font-size: 12.5px; font-weight: 600; padding: 8px 14px; border-radius: 8px;
  cursor: pointer; white-space: nowrap; transition: border-color .15s, color .15s;
}
.anfrage-selected-bar-change:hover { border-color: var(--deep); color: var(--deep); }

/* Kompakte Info-/Fachbetrieb-Notiz innerhalb einer Frage */
.field-note { font-size: 11.5px; color: var(--muted); line-height: 1.55; margin-top: 4px; }
.field-note.field-note-locked { color: var(--text-mid); background: var(--sun-light); border: 1px solid var(--border); border-radius: 8px; padding: 8px 11px; margin-top: 6px; }

/* "Noch nicht bekannt"-Option: gleiche radio-pick-Optik, dezent abgesetzt */
.radio-pick.opt-unknown { color: var(--muted); border-style: dashed; }
.radio-pick.opt-unknown.sel { color: var(--deep); border-style: solid; }

/* Datei-Upload (1-5 Fotos, Drag&Drop + Dateiauswahl) */
.upload-zone {
  border: 1.5px dashed var(--border-cool); border-radius: 14px; background: var(--pure);
  padding: 26px 18px; text-align: center; cursor: pointer; transition: border-color .15s, background .15s;
}
.upload-zone:hover, .upload-zone.is-dragover { border-color: var(--deep); background: var(--stone); }
.upload-zone-icon { width: 30px; height: 30px; margin: 0 auto 10px; color: var(--muted); }
.upload-zone-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.upload-zone-title { font-size: 13.5px; font-weight: 700; color: var(--text); margin-bottom: 3px; }
.upload-zone-sub { font-size: 12px; color: var(--muted); }
.upload-zone input[type="file"] { display: none; }
.upload-thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.upload-thumb { position: relative; width: 78px; height: 78px; border-radius: 10px; overflow: hidden; border: 1.5px solid var(--border); background: var(--stone); }
.upload-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.upload-thumb-remove {
  position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: rgba(21,30,36,.72); color: #fff; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 12px; line-height: 1; padding: 0;
}
.upload-thumb-remove:hover { background: var(--sun); }
.upload-count { font-size: 11.5px; color: var(--muted); margin-top: 8px; }
.upload-full-note { font-size: 12px; color: var(--sun); margin-top: 8px; display: none; }
.upload-full-note.show { display: block; }

/* Lamellendach-Draufsicht: Seiten A/B/C/D */
.lam-diagram-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 14px 0 18px; }
.lam-diagram { width: 148px; height: 148px; }
.lam-diagram rect { fill: var(--stone); stroke: var(--border-cool); stroke-width: 1.5; }
.lam-diagram text { font-family: var(--sans); font-size: 11px; font-weight: 700; fill: var(--deep); }
.lam-diagram .lam-house { fill: var(--sun-light); stroke: var(--sun); stroke-width: 1.5; stroke-dasharray: 3 2; }
.lam-side-row { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; margin-bottom: 14px; }
@media(max-width:540px){ .lam-side-row { grid-template-columns: 1fr; } }
.lam-side-card { border: 1.5px solid var(--border); border-radius: 10px; padding: 12px 14px; background: var(--pure); }
.lam-side-card-label { font-size: 12.5px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.lam-side-card .radio-pick-row { margin: 0; }

/* Sonnenschirm-Skizzen (Ampel- vs. Mastschirm) statt Emoji */
.pick-sketch { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 10px; }
.pick-sketch svg { width: 56px; height: 56px; fill: none; stroke: var(--text-mid); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.radio-pick.pick-sketch-btn { display: inline-flex; }
.radio-pick.pick-sketch-btn.sel svg { stroke: var(--deep); }
.pick-sketch-label { font-size: 12.5px; font-weight: 600; }

/* Zusammenfassungsschritt vor Absenden */
.summary-section { border: 1.5px solid var(--border); border-radius: 14px; padding: 18px 20px; margin-bottom: 14px; background: var(--pure); }
.summary-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.summary-section-title { font-family: var(--serif); font-size: 15px; font-weight: 700; color: var(--deep); }
.summary-edit { font-size: 12px; font-weight: 600; color: var(--sun); background: none; border: none; cursor: pointer; padding: 0; }
.summary-edit:hover { text-decoration: underline; }
.summary-row { display: flex; justify-content: space-between; gap: 14px; font-size: 13px; padding: 5px 0; border-top: 1px solid var(--stone); }
.summary-row:first-of-type { border-top: none; }
.summary-row-label { color: var(--muted); flex-shrink: 0; }
.summary-row-value { color: var(--text); text-align: right; font-weight: 600; }
.summary-thumbs { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.summary-thumbs img { width: 46px; height: 46px; object-fit: cover; border-radius: 7px; border: 1px solid var(--border); }

/* ── MONTAGEPARTNER & HERSTELLER PAGES (Vollumbau 20260716) ─────────────*/
.mp-hero {
  background: linear-gradient(155deg, #1a3544 0%, var(--deep) 50%, #0d2030 100%);
  padding: 72px 0 64px;
}
.mp-hero h1 { font-family: var(--serif); font-size: clamp(26px, 4vw, 48px); color: #fff; font-weight: 400; line-height: 1.12; margin-bottom: 18px; max-width: 600px; }
.mp-hero h1 em { font-style: italic; color: var(--champagne); font-weight: 300; }
.mp-hero .hero-sub { color: rgba(255,255,255,.7); font-size: 16px; max-width: 500px; margin-bottom: 32px; }
.checklist { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.checklist li { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; color: var(--text-mid); line-height: 1.6; }
.checklist li::before { content: '✓'; color: var(--deep); font-weight: 800; font-size: 13px; flex-shrink: 0; margin-top: 2px; }
.bonus-box {
  background: linear-gradient(135deg, rgba(216,121,71,.06) 0%, rgba(201,166,107,.08) 100%);
  border: 1.5px solid var(--sun); border-radius: 16px; padding: 28px 32px;
}
.bonus-box h3 { font-family: var(--serif); font-size: 18px; font-weight: 700; margin-bottom: 12px; color: var(--sun); }
.bonus-box ul { list-style: none; display: flex; flex-direction: column; gap: 7px; }
.bonus-box ul li { font-size: 13.5px; color: var(--text-mid); padding-left: 16px; position: relative; }
.bonus-box ul li::before { content: '→'; position: absolute; left: 0; color: var(--sun); }
.hersteller-hero {
  background: linear-gradient(155deg, #eef4f7 0%, #f4f9fb 60%, #e8f0f4 100%);
  border-bottom: 1px solid var(--border-cool);
  padding: 64px 0 56px;
}
.hersteller-hero h1 { font-family: var(--serif); font-size: clamp(26px, 4vw, 44px); color: var(--deep); font-weight: 400; line-height: 1.12; margin-bottom: 16px; }
.hersteller-hero .hero-sub { color: var(--text-mid); font-size: 15.5px; max-width: 520px; margin-bottom: 30px; }
/* Fix (Audit cc_9881fcef, 20260716): .hero-eyebrow ist global auf weiss/40%
   fuer dunkle Foto-Hero ausgelegt -- auf dem hellen .hersteller-hero war der
   Text dadurch praktisch unsichtbar. Frueher zufaellig von einer globalen,
   nicht gescopten .hero-eyebrow-Regel im Homepage-Hero-Block kaschiert, die
   inzwischen entfernt wurde (siehe Hero-Overlay-Fix). Scoped statt global. */
.hersteller-hero .hero-eyebrow { color: var(--muted); font-weight: 700; }
.hersteller-section { background: var(--pure); border: 1.5px solid var(--border-cool); border-radius: 16px; padding: 28px; }
.hersteller-section h3 { font-family: var(--serif); font-size: 16px; font-weight: 700; margin-bottom: 10px; color: var(--text); }
.hersteller-section ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.hersteller-section ul li { font-size: 13.5px; color: var(--text-mid); padding-left: 18px; position: relative; line-height: 1.55; }
.hersteller-section ul li::before { content: '→'; position: absolute; left: 0; color: var(--deep); }
.hersteller-section.no-access ul li::before { content: '✕'; color: var(--muted); }
.nm-group-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  color: var(--muted); padding: 12px 0 6px; display: block;
}

/* ══════════════════════════════════════════════════════════════════════
   ACTION DOCK REVISION 20260801 (docs/SOLANERO_NAECHSTER_BLOCK_ACTION_DOCK_REVISION_20260801.md)
   Ersetzt die vorherige, technisch kollisionsfreie aber rein ikonbasierte
   Sechser-Saeule/-Leiste durch einen echten "SOLANERO Schnellzugriff":
   geschlossen auf JEDER Breite hoechstens zwei Einstiege (WhatsApp + ein
   Navy-Schalter mit Hover-/Fokus-Textlabel), geoeffnet ein vollstaendig
   beschriftetes Flyout (>=900px, links neben dem Dock) bzw. ein echtes
   Bottom-Sheet mit Scrim (<900px). site-chrome.js baut EIN Panel-DOM
   (".sol-panel"), das hier per Media Query unterschiedlich positioniert/
   animiert wird -- keine zwei parallelen Implementierungen. */

/* ── Geschlossener Dock: WhatsApp + Schalter, vertikal gestapelt ── */
.sol-dock {
  position: fixed; z-index: 240; display: flex; flex-direction: column; gap: 8px;
  right: max(16px, env(safe-area-inset-right));
  top: 50%; transform: translateY(-50%);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .25s ease, visibility .25s;
}
html.quicknav-visible .sol-dock { opacity: 1; visibility: visible; pointer-events: auto; }
/* >=1760px: derselbe, bereits im vorherigen Block sorgfaeltig vermessene
   Aussenraum-Puffer (52px Elementbreite + 32px Sicherheitsabstand) wie
   zuvor die Rail -- verhindert die frueher real gefundene Ueberlappung bei
   var(--cw)-Spruengen um 1680px. */
@media(min-width:1760px) {
  :root { --rail-right: max(24px, calc((100vw - var(--cw)) / 2 - 84px)); }
  .sol-dock { right: var(--rail-right); }
}
@media(max-width:899px) {
  .sol-dock {
    top: auto; bottom: max(16px, env(safe-area-inset-bottom)); transform: none;
  }
}
.sol-dock-btn {
  position: relative; width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: none; cursor: pointer; text-decoration: none;
  box-shadow: 0 10px 26px rgba(8,20,28,.26);
  transition: transform .16s ease, box-shadow .16s ease;
}
.sol-dock-btn:hover { transform: translateY(-1px); }
.sol-dock-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.sol-dock-btn .solicon { width: 22px; height: 22px; }
.sol-dock-whatsapp { background: #25D366; color: #fff; }
.sol-dock-whatsapp:hover, .sol-dock-whatsapp:focus-visible { background: #1ebe57; }
/* WhatsApp-Icon-Schaerfe-Korrektur (20260802, docs/SOLANERO_KORREKTUR_INTERNE_
   MITGLIEDSCHAFT_RECHNUNGEN_WHATSAPP_ICON_20260802.md): das Icon war zuvor in
   .solicon gewrappt -- die globale Regel ".solicon svg { fill:none;
   stroke:currentColor; ... }" ueberschreibt IMMER das inline fill="currentColor"
   des WhatsApp-Pfads (CSS gewinnt gegen SVG-Praesentationsattribute), wodurch
   das eigentlich als solide Flaeche gedachte, sehr detailreiche Icon
   stattdessen als 1.7px-Strichumriss gerendert wurde -- das erklaerte den
   gemeldeten "weich/verschwommen"-Eindruck technisch praezise, nicht nur die
   Groesse. Eigene Klasse ohne die stroke-only-Regel, feste ganzzahlige
   Groesse (~27px im 52px-Button), display:block auf dem SVG selbst, keine
   Transition/kein Filter auf dem Icon (nur der Button-Hintergrund animiert). */
.sol-whatsapp-icon {
  display: flex; align-items: center; justify-content: center;
  width: 27px; height: 27px; flex-shrink: 0;
}
.sol-whatsapp-icon svg {
  display: block; width: 27px; height: 27px;
  shape-rendering: geometricPrecision;
}
.sol-dock-toggle { background: rgba(22,62,82,.96); backdrop-filter: blur(10px); color: #fff; }
.sol-dock-toggle:hover, .sol-dock-toggle:focus-visible { background: var(--deep); }
.sol-plus-icon { display: flex; width: 20px; height: 20px; transition: transform .2s ease; }
html.sol-panel-open .sol-dock-toggle .sol-plus-icon { transform: rotate(45deg); }

/* Hover-/Fokus-Textlabel fuer die beiden geschlossenen Buttons (Anforderung 1):
   erscheinen links vom Dock, werden nie abgeschnitten (weit genug innen
   positioniert, white-space:nowrap). Auf Touch ohne Hover irrelevant --
   WhatsApp ist als Marke bekannt, der zweite Button oeffnet ohnehin immer
   zuerst das beschriftete Menue. */
.sol-dock-tip {
  position: absolute; right: calc(100% + 12px); top: 50%; transform: translateY(-50%) translateX(6px);
  background: var(--deep); color: #fff; font-size: 12.5px; font-weight: 600;
  padding: 8px 13px; border-radius: 8px; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .16s ease, transform .16s ease;
  box-shadow: 0 8px 20px rgba(8,20,28,.24);
}
.sol-dock-btn:hover .sol-dock-tip, .sol-dock-btn:focus-visible .sol-dock-tip {
  opacity: 1; transform: translateY(-50%) translateX(0);
}
/* Touch-Geraete besitzen kein echtes :hover -- Tooltip dort nie dauerhaft
   sichtbar lassen (verhindert bei manchen Browsern haengenbleibende
   Hover-Emulation nach Tap). */
@media(hover:none) { .sol-dock-tip { display: none; } }

/* Einmalige Erstnutzungs-Hilfe (Anforderung 1): dezente Sprechblase, kein
   Pulsieren, verschwindet nach kurzer Zeit oder bei jeder Interaktion. */
.sol-dock-hint {
  position: absolute; right: calc(100% + 12px); bottom: 4px;
  background: #fff; color: var(--text, #163E52); font-size: 12.5px; font-weight: 600;
  padding: 9px 14px; border-radius: 10px; white-space: nowrap;
  box-shadow: 0 10px 26px rgba(8,20,28,.2);
  opacity: 0; transform: translateY(4px); pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.sol-dock-hint.is-visible { opacity: 1; transform: translateY(0); }

/* ── Panel: EIN DOM-Baum, zwei Praesentationsformen per Media Query ── */
.sol-panel {
  position: fixed; z-index: 241; background: #fff;
  box-shadow: 0 28px 64px rgba(8,20,28,.3);
  display: flex; flex-direction: column;
  opacity: 0; pointer-events: none;
  transition: opacity .22s cubic-bezier(.4,0,.2,1), transform .22s cubic-bezier(.4,0,.2,1);
}
.sol-panel[hidden] { display: none; }
.sol-panel.is-open { opacity: 1; pointer-events: auto; }

/* Desktop/Tablet >=900px: Flyout links neben dem Dock, vertikal zentriert. */
@media(min-width:900px) {
  .sol-panel {
    top: 50%; right: calc(52px + 16px + 14px); width: 336px;
    max-height: min(560px, calc(100vh - 64px)); border-radius: 18px; overflow: hidden;
    transform: translateY(-50%) translateX(12px);
  }
  html:not([style*="--rail-right"]) .sol-panel { right: calc(52px + 16px + 14px); }
  .sol-panel.is-open { transform: translateY(-50%) translateX(0); }
}
@media(min-width:1760px) { .sol-panel { right: calc(var(--rail-right) + 66px); } }

/* Mobil <900px: echtes Bottom-Sheet mit Scrim. */
@media(max-width:899px) {
  .sol-panel {
    left: 0; right: 0; bottom: 0; top: auto; width: auto;
    border-radius: 20px 20px 0 0;
    max-height: min(78vh, calc(100vh - 48px));
    padding-bottom: env(safe-area-inset-bottom);
    transform: translateY(100%);
  }
  .sol-panel.is-open { transform: translateY(0); }
}

.sol-scrim {
  position: fixed; inset: 0; z-index: 236; background: rgba(11,34,49,.42);
  opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s;
}
.sol-scrim.is-open { opacity: 1; visibility: visible; }
@media(min-width:900px) { .sol-scrim { display: none; } } /* Anforderung 2: Desktop-Flyout ohne verdunkelnden Scrim, ruhiger als Mobil-Modal */

.sol-panel-header {
  display: flex; align-items: flex-start; gap: 10px; padding: 18px 18px 14px;
  border-bottom: 1px solid var(--border, #e2e8ed); flex-shrink: 0;
}
.sol-panel-back {
  width: 30px; height: 30px; border-radius: 50%; border: none; background: var(--stone, #f4f0e9);
  color: var(--deep); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
}
.sol-panel-back svg { width: 16px; height: 16px; }
.sol-panel-back[hidden] { display: none; }
.sol-panel-heading { flex: 1; min-width: 0; }
.sol-panel-title { font-family: var(--serif); font-size: 18px; font-weight: 700; color: var(--deep); margin-bottom: 2px; }
.sol-panel-sub { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.sol-panel-close {
  width: 30px; height: 30px; border-radius: 50%; border: none; background: var(--stone, #f4f0e9);
  color: var(--text-mid); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
}
.sol-panel-close svg { width: 14px; height: 14px; }
.sol-panel-close:hover, .sol-panel-back:hover { background: var(--border, #e2e8ed); }

.sol-panel-body { overflow-y: auto; flex: 1 1 auto; padding: 8px; }
.sol-view[hidden] { display: none; }

/* Vollstaendig beschriftete Zeile je Aktion (Anforderung 2: Icon + Haupttext
   + Unterzeile + Pfeil, kein Icon-Raetsel). */
.sol-row {
  display: flex; align-items: center; gap: 13px; padding: 12px 10px; border-radius: 12px;
  text-decoration: none; color: inherit; cursor: pointer; border: none; background: none;
  width: 100%; text-align: left; font: inherit;
  transition: background .14s ease;
}
.sol-row:hover, .sol-row:focus-visible { background: var(--stone, #f4f0e9); outline: none; }
.sol-row:focus-visible { box-shadow: inset 0 0 0 2px var(--deep); }
.sol-row-icon {
  width: 38px; height: 38px; border-radius: 10px; background: var(--stone, #f4f0e9);
  color: var(--deep); display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.sol-row-icon svg { width: 18px; height: 18px; }
.sol-row-text { flex: 1; min-width: 0; }
.sol-row-title { display: block; font-size: 14.5px; font-weight: 700; color: var(--text, #1a2e3b); }
.sol-row-sub { display: block; font-size: 12px; color: var(--muted); margin-top: 1px; line-height: 1.35; }
.sol-row-arrow { flex-shrink: 0; color: var(--muted); }
.sol-row-arrow svg { width: 16px; height: 16px; }
/* WhatsApp-Zeile bewusst abgesetzt (Anforderung 2, Punkt 6: "abgesetzte
   Kontaktzeile") -- eigene Trennlinie, gruener Icon-Akzent, Rest der Zeile
   bleibt neutral (kein grosses gruenes Feld). */
.sol-row-whatsapp { border-top: 1px solid var(--border, #e2e8ed); margin-top: 4px; padding-top: 16px; }
.sol-row-whatsapp .sol-row-icon { background: #e8f9ee; color: #128C4A; }

/* Fachbetrieb-Unteransicht: identische innere Bausteine wie zuvor
   (PLZ-Autocomplete, Produkt-Chips), nur ohne eigenes Panel-Gehaeuse --
   sitzt jetzt direkt im gemeinsamen .sol-panel-body. */
.sol-fb-sub { font-size: 12.5px; color: var(--muted); margin: 4px 6px 14px; line-height: 1.5; }
.sol-view-fachbetrieb { padding: 4px 10px 10px; }
.action-panel-plz-wrap { position: relative; margin-bottom: 10px; }
.action-panel-plz {
  width: 100%; padding: 11px 13px; border: 1.5px solid var(--border-cool);
  border-radius: 9px; font-size: 13.5px; font-family: var(--sans); background: var(--white);
}
.action-panel-plz-list {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 5;
  background: #fff; border: 1.5px solid var(--border-cool); border-radius: 9px;
  box-shadow: 0 12px 28px rgba(8,20,28,.16); max-height: 220px; overflow-y: auto;
  opacity: 0; visibility: hidden; transform: translateY(-4px); pointer-events: none;
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.action-panel-plz-list.is-open { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
.action-panel-plz-opt {
  padding: 9px 12px; font-size: 13px; cursor: pointer; display: flex; gap: 8px;
  align-items: baseline; border-bottom: 1px solid var(--stone);
}
.action-panel-plz-opt:last-child { border-bottom: none; }
.action-panel-plz-opt:hover, .action-panel-plz-opt.is-active { background: var(--sun-light); }
.plz-opt-plz { font-weight: 700; color: var(--deep); flex-shrink: 0; }
.plz-opt-ort { color: var(--text-mid); }
.action-panel-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 16px; }
.action-panel-chip {
  font-size: 11.5px; font-weight: 600; padding: 6px 11px; border-radius: 999px;
  border: 1.5px solid var(--border-cool); color: var(--text-mid); cursor: pointer;
  background: #fff; transition: all .15s;
}
.action-panel-chip.is-selected { background: var(--deep); border-color: var(--deep); color: #fff; }
.sol-view-fachbetrieb .btn { width: 100%; justify-content: center; }

/* Touch-Ziele im Mobil-Bottom-Sheet mindestens 48px hoch (Anforderung 3). */
@media(max-width:899px) {
  .sol-row { min-height: 48px; padding: 14px 10px; }
  .sol-panel-back, .sol-panel-close { width: 36px; height: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .sol-panel, .sol-scrim, .sol-dock-tip, .sol-dock-hint, .sol-plus-icon, .sol-dock-btn { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   P0-NACHTRAG 20260716 — STICKY PRODUKT-SUBNAV + INDIVIDUELLE SVG-CHECKMARKS
   Referenz: Renson/weinor Produktseiten mit horizontaler Sprungmarken-Nav
   direkt unter dem Hero (Referenzmatrix Abschnitt 4 des Nachtrags). Sitzt
   in-flow direkt nach dem Hero, wird beim Herunterscrollen selbst sticky
   (top-Offset = Hoehe des kompakten Haupt-Headers, damit beide Leisten
   nicht kollidieren). Aktiver Abschnitt wird per IntersectionObserver in
   site-chrome.js hervorgehoben (eine Quelle, jede Produktseite kann die
   Klasse einfach wiederverwenden). */
.product-subnav {
  position: sticky; top: 60px; z-index: 150;
  background: rgba(255,255,255,.97); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border); box-shadow: 0 2px 14px rgba(22,62,82,.05);
}
.product-subnav-inner {
  max-width: var(--cw); margin: 0 auto; padding: 0 var(--pad);
  display: flex; align-items: center; gap: 4px; overflow-x: auto;
  scrollbar-width: none;
}
.product-subnav-inner::-webkit-scrollbar { display: none; }
@media(min-width:768px){ .product-subnav-inner { padding: 0 var(--pad-lg); } }
.product-subnav a {
  font-size: 12.5px; font-weight: 600; color: var(--text-mid); white-space: nowrap;
  padding: 15px 14px; position: relative; transition: color .15s;
}
.product-subnav a::after {
  content: ''; position: absolute; left: 14px; right: 14px; bottom: 0; height: 2px;
  background: var(--sun); transform: scaleX(0); transition: transform .2s ease;
}
.product-subnav a:hover { color: var(--deep); }
.product-subnav a.is-active { color: var(--deep); }
.product-subnav a.is-active::after { transform: scaleX(1); }
.product-subnav-cta { margin-left: auto; flex-shrink: 0; color: var(--sun-text) !important; }
section[id] { scroll-margin-top: 128px; }

/* Individuelle SVG-Checkmarks statt Textzeichen (✓ / – / "teilw.") in
   Vergleichstabellen -- ersetzt .chk/.cross/.neut Textfarben-only Loesung.
   Eigenstaendig gezeichnet (Kreis + Pfad), keine Icon-Bibliothek. */
.cmp-icon { display: inline-flex; width: 21px; height: 21px; border-radius: 50%; align-items: center; justify-content: center; flex-shrink: 0; margin-right: 6px; vertical-align: -5px; }
.cmp-icon svg { width: 11px; height: 11px; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.cmp-icon.is-yes { background: var(--deep); }
.cmp-icon.is-yes svg { stroke: #fff; }
.cmp-icon.is-partial { background: var(--sun-yellow); }
.cmp-icon.is-partial svg { stroke: #fff; }
.cmp-icon.is-no { background: var(--stone); }
.cmp-icon.is-no svg { stroke: var(--muted); }

/* Modellvergleich (ersetzt reine Icon+Text-Karten): grosse Bildflaeche,
   kurze Positionierung, Feature-Checkliste mit .cmp-icon, klarer Auswahl-CTA. */
.model-compare { display: grid; grid-template-columns: 1fr; gap: 24px; margin-top: 28px; }
@media(min-width:860px){ .model-compare { grid-template-columns: repeat(3,1fr); } }
.model-card { background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 10px 34px rgba(22,62,82,.08); display: flex; flex-direction: column; }
.model-card-img { height: 190px; position: relative; overflow: hidden; }
.model-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.4,0,.2,1); }
.model-card:hover .model-card-img img { transform: scale(1.06); }
/* 20260813 (Aurelia-Auftrag cc_e9daed1e): ehrlicher Platzhalter statt eines
   erneut fachlich falschen Ersatzfotos, solange kein echtes Wintergarten-
   markisen-Motiv vorliegt -- macht ehrlich transparent, dass hier ein
   Motiv fehlt, statt ein falsches Bild zu zeigen. */
.model-card-img-placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; background: #f4f0e9; color: var(--text-mid); text-align: center; padding: 0 24px;
}
.model-card-img-placeholder-text { font-size: 11.5px; font-weight: 600; line-height: 1.4; }
.model-card-body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.model-card-eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--sun-text); margin-bottom: 6px; }
.model-card h3 { font-family: var(--serif); font-size: 19px; margin-bottom: 8px; color: var(--deep); }
.model-card-pos { font-size: 13px; color: var(--text-mid); line-height: 1.6; margin-bottom: 16px; }
.model-card-feats { list-style: none; margin-bottom: 20px; }
.model-card-feats li { display: flex; align-items: center; font-size: 12.5px; color: var(--text-mid); padding: 5px 0; }
.model-card-cta { margin-top: auto; }

/* ══════════════════════════════════════════════════════════════════════
   P0-NACHTRAG 20260716 — VIDEO-/CINEMAGRAPH-HERO (Startseite)
   Technisch fertige Komponente gemaess Masterbrief-Nachtrag: autoplay nur
   stumm/loop/playsinline, Posterbild (bereits vorhandenes bestes Foto),
   Aktivierung ausschliesslich per JS NACH erfolgreichem Laden einer echten
   Videoquelle (site-chrome.js). Solange keine Datei unter dem dokumentierten
   Pfad liegt (siehe SOLANERO_BILD_VIDEO_PRODUKTIONSPLAN_20260716.md), bleibt
   .hero-video-bg unsichtbar und der bestehende Auto-Slider laeuft
   unveraendert weiter -- kein Bruch, kein leerer Platzhalter-Kasten. */
.hero-video-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0; display: none;
}
.hero-home.has-video-active .hero-video-bg { display: block; }
.hero-home.has-video-active .auto-slider { display: none; }
@media(max-width:899px){ .hero-video-bg { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .hero-video-bg { display: none !important; } }

/* ══════════════════════════════════════════════════════════════════════
   P0-NACHTRAG 20260716 — FACHBETRIEBSSUCHE NEU (beratende Kaufstrecke statt
   Formular/Verzeichnis). Ersetzt Emoji-Avatare (🏠🌿☀️📍📞⏱️🧭) durch das
   bestehende eigene Lineart-SVG-Icon-Set (.solicon), fuehrt einen echten
   kompakten Suchblock unter dem Hero ein und stellt Ergebnisse als
   Karte+Liste dar statt als reine Formular-/Verzeichnis-Optik. */
.ff-search-block {
  background: #fff; border-radius: 20px; box-shadow: 0 20px 60px rgba(22,62,82,.1);
  padding: 28px 28px 26px; margin-top: -64px; position: relative; z-index: 3;
  max-width: 900px; margin-left: auto; margin-right: auto;
}
.ff-search-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.ff-search-row .plz-input { flex: 1; min-width: 200px; }
.ff-chip-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 10px; }
.ff-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ff-chip {
  font-size: 12.5px; font-weight: 600; padding: 8px 15px; border-radius: 999px;
  border: 1.5px solid var(--border-cool); background: #fff; color: var(--text-mid);
  cursor: pointer; transition: all .15s;
}
.ff-chip:hover { border-color: var(--deep); color: var(--deep); }
.ff-chip.active { background: var(--deep); border-color: var(--deep); color: #fff; }

/* .ff-results-grid (2-spaltige Liste|Karte-Variante) am 20260717 durch
   .ff-results-grid-v2 (Liste|Karte+Detailpanel) auf /fachhaendler/
   ersetzt -- Regel entfernt, keine andere Seite nutzte die Klasse (siehe
   grep-Pruefung vor Umbau, cc_9a9c037b). */
.ff-map-panel {
  position: relative; border-radius: 16px; overflow: hidden; height: 420px;
  background: linear-gradient(135deg,#e7f0f3 0%,#dbe8ec 100%);
}
@media(min-width:960px){ .ff-map-panel { position: sticky; top: 78px; } }
.ff-map-label {
  position: absolute; top: 14px; left: 14px; background: rgba(255,255,255,.92);
  font-size: 11px; font-weight: 700; color: var(--text-mid); padding: 6px 12px;
  border-radius: 999px; z-index: 3;
}
/* .ff-map-pin/.pin-dot/.ff-map-bg (SVG-Illustrationskarte) am 20260717 entfernt
   (Auftrag Google-Maps-Fachpartnersuche) -- echte Marker-Optik liegt jetzt in
   /fachhaendler/ als .ff-gmap-pin/.ff-gmap-pin-dot, da AdvancedMarkerElement-
   Content seitenspezifisch erzeugt wird (assets/solanero-maps.js). Grep vor
   Entfernung bestaetigt: keine andere Seite nutzte diese Klassen. */

.ff-icon-avatar {
  width: 46px; height: 46px; border-radius: 12px; background: #eef3f5;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--deep);
}
.ff-icon-avatar svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.partner-loc-row { display: flex; align-items: center; gap: 5px; }
.partner-loc-row svg { width: 12px; height: 12px; stroke: var(--muted); fill: none; stroke-width: 2; flex-shrink: 0; }
.ff-status-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; font-size: 12px; color: var(--text-mid); }
.ff-status-row span { display: flex; align-items: center; gap: 5px; }
.ff-status-row svg { width: 14px; height: 14px; fill: none; stroke: var(--forest); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media(max-width:640px){ .ff-search-block { margin-top: -40px; padding: 20px; } }

/* Endkunden-Redesign 20260718 (Auftrag Fachpartnersuche hell/UX-Flow): Detail-
   spalte nur anzeigen wenn ein Partner aktiv gewaehlt ist (Punkt A.5) -- ohne
   Auswahl bekommt die Karte die volle Breite statt einer leeren Detailkarte. */
.ff-map-section.ff-no-detail .ff-detail-panel { display: none; }
/* Fix 20260718: flex:1 allein hat in Spaltenrichtung flex-basis:0% zur Folge --
   ohne eigene feste Container-Hoehe kollabiert die Karte dadurch auf 0px
   (QA-Fund: Karte war im Startzustand/nach jeder Suche ohne Treffer komplett
   unsichtbar, obwohl .ff-map-panel eigentlich height:460px hat). min-height
   erhaelt die urspruengliche Groesse, flex:1 darf weiterhin nach oben wachsen. */
.ff-map-section.ff-no-detail .ff-map-panel { flex: 1; min-height: 460px; }
@media(max-width:520px){ .ff-map-section.ff-no-detail .ff-map-panel { min-height: 380px; } }
@media(min-width:1200px){ .ff-map-section.ff-no-detail { flex-direction: column; } }

/* ══════════════════════════════════════════════════════════════════════
   P0-NACHTRAG 20260716 — FACHPARTNER-VERTRAUENSSEKTION (partner-werden.html)
   Split-Section Navy/Weiss + Bild statt abstrakter Bullet-Wand, analog
   weinor "my weinor" / Brustor "Professionals" (Referenzmatrix Abschnitt 4).
   Bildhinweis: SOLANERO besitzt aktuell kein echtes Fachpartner-Portraet/
   Beratungsfoto (siehe docs/SOLANERO_BILD_VIDEO_PRODUKTIONSPLAN_20260716.md) --
   verwendet bis dahin das beste vorhandene echte Foto (kein erfundener
   Dateiname, Z-937). */
.trust-split { display: grid; grid-template-columns: 1fr; }
@media(min-width:900px){ .trust-split { grid-template-columns: 1fr 1fr; min-height: 560px; } }
.trust-split-img { position: relative; min-height: 320px; overflow: hidden; }
.trust-split-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.trust-split-text { background: var(--deep); color: #fff; padding: 56px var(--pad-lg); display: flex; flex-direction: column; justify-content: center; }
.trust-split-text .pw-label { color: var(--champagne); }
.trust-split-text h2 { font-family: var(--serif); font-size: clamp(26px,3vw,34px); margin: 12px 0 18px; }
.trust-split-text > p { color: rgba(255,255,255,.72); font-size: 14.5px; line-height: 1.8; max-width: 440px; margin-bottom: 32px; }
.trust-promises { display: flex; flex-direction: column; gap: 22px; }
.trust-promise { display: flex; gap: 16px; align-items: flex-start; }
.trust-promise-icon {
  width: 42px; height: 42px; border-radius: 11px; background: rgba(255,255,255,.1);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--champagne);
}
.trust-promise-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.trust-promise h3 { font-size: 15px; margin-bottom: 4px; color: #fff; }
.trust-promise p { font-size: 13px; color: rgba(255,255,255,.65); line-height: 1.6; margin: 0; }

/* ══════════════════════════════════════════════════════════════════════
   P0-NACHTRAG 20260716 — FOOTER ALS VOLLWERTIGER DESIGNBEREICH
   Ersetzt den reinen Link-Restbereich: Abschluss-CTA vor dem Footer, echte
   Social-Media-Sektion, klar gruppierte Zielgruppen-Navigation, dezentes
   Markenwasserzeichen (Soliday/Schenker-Storen-Prinzip, eigenstaendig statt
   Kopie), mobile Accordion ueber natives <details> (kein JS noetig). Eine
   Quelle -- zunaechst auf index.html, danach per Mass-Rollout-Skript auf
   weitere Seiten (Z-930/Z-935 Template-First). */
.footer-v2 { padding: 0 0 0; background: var(--deep); position: relative; overflow: hidden; }
.footer-cta {
  display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between;
  padding: 32px 0; border-bottom: 1px solid rgba(255,255,255,.1);
}
.footer-cta-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--champagne); margin-bottom: 8px; }
.footer-cta h3 { font-family: var(--serif); font-size: clamp(22px,2.6vw,28px); color: #fff; font-weight: 400; }
.footer-cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* Launch-Review 20260728: Footer-Skalierbarkeit -- Produkte-Spalte wuchs mit
   jedem neuen Produkt unbegrenzt weiter (12 Zeilen bei nur 6 sichtbaren
   Produktwelten) und sprengte damit die Spaltenbalance. Jetzt 4 statt 5
   Spalten (Rechtliches in die Bottom-Zeile verschoben), Produkte-Spalte fest
   auf die wichtigsten Kategorien + "Alle Produkte ->"-Link begrenzt -- bleibt
   damit auch bei 30-50 Produktwelten in der Zukunft gleich hoch. */
.footer-main { display: grid; grid-template-columns: 1fr; gap: 8px; padding: 32px 0 20px; position: relative; z-index: 2; }
@media(min-width:900px){ .footer-main { grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 28px; } }

/* ── FOOTER-SOZIAL-BAND (Nacharbeit 20260717) ──────────────────────────
   WAREMA-Referenzprinzip: eigener heller Abschnitt oberhalb des dunklen
   Footer-Hauptteils statt kleiner grauer Outline-Icons im dunklen Bereich.
   Markenfarben je Plattform, Instagram mit echtem Markenverlauf. Links
   sind bewusst <span> statt <a href="#"> -- es existieren noch keine
   echten SOLANERO-Profile, daher klar als Platzhalter (title-Tooltip,
   aria-disabled) statt toter Navigation markiert. */
.footer-social-band { background: #f7fafb; border-bottom: 1px solid rgba(22,62,82,.08); }
/* Launch-Review 20260728: "padding: Xpx 0" hat versehentlich das horizontale
   .cw-Padding (--pad/--pad-lg) auf 0 ueberschrieben -- "Folgen Sie SOLANERO"
   sass dadurch an der zentrierten Boxkante statt an der echten Content-Kante,
   44px weiter links als "Lassen Sie uns loslegen."/der Footer-Inhalt. Jetzt
   nur noch vertikales Padding hier gesetzt, horizontal kommt weiterhin aus
   .cw -- stellt die gemeinsame linke Achse wieder her. */
.footer-social-band-inner {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding-top: 18px; padding-bottom: 18px; text-align: center;
}
@media(min-width:640px){
  .footer-social-band-inner {
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
    text-align: left; padding-top: 16px; padding-bottom: 16px; gap: 16px;
  }
}
.fsb-heading { font-family: var(--serif); font-size: 15px; color: var(--brand-blue, var(--deep)); font-weight: 400; }
@media(min-width:640px){ .fsb-heading { grid-column: 1; justify-self: start; } }
.fsb-icons { display: flex; gap: 12px; align-items: center; justify-content: center; flex-wrap: wrap; }
@media(min-width:640px){ .fsb-icons { grid-column: 2; justify-self: center; flex-wrap: nowrap; } }
/* 20260814 (Restaufgaben-Checkliste, Gemini-Visual-QA-Folgepunkt "Footer-
   Social-Icons wirken klein"): von 34px auf 42px vergroessert -- naeher am
   empfohlenen 44px-Touch-Ziel und deutlicher sichtbar im sandfarbenen Band,
   ohne die kompakte Bandhoehe zu sprengen. Gap von 10px auf 12px angepasst,
   damit die groesseren Kreise nicht optisch zusammenruecken. */
.fsb-icon {
  width: 42px; height: 42px; border-radius: 50%; display: flex; cursor: default;
  box-shadow: 0 2px 8px rgba(18,63,85,.14);
  transition: transform .18s ease, box-shadow .18s ease;
}
.fsb-icon svg { width: 100%; height: 100%; display: block; }
.fsb-icon:hover, .fsb-icon:focus-visible {
  transform: translateY(-3px) scale(1.06);
  box-shadow: 0 10px 20px rgba(18,63,85,.24);
  outline: none;
}
.fsb-icon:focus-visible { box-shadow: 0 0 0 3px rgba(18,63,85,.22), 0 10px 20px rgba(18,63,85,.24); }

/* Footer-Korrektur 20260722 (siehe .footer-col-title oben): identische Schieflage
   im footer-v2-Muster (PARTNER/ENDKUNDEN/RECHTLICHES) -- Ueberschrift verstaerkt,
   Links etwas zurueckgenommen, damit die Gruppenlogik ohne Nachdenken lesbar ist. */
.footer-group { border-bottom: none; }
.footer-group summary {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .14em;
  color: rgba(255,255,255,.62); margin-bottom: 18px; cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between;
}
.footer-group summary::-webkit-details-marker { display: none; }
.footer-group summary .fg-chevron { display: block; width: 14px; height: 14px; stroke: rgba(255,255,255,.4); fill: none; stroke-width: 2; transition: transform .2s ease; }
.footer-group[open] summary .fg-chevron { transform: rotate(180deg); }
@media(max-width:899px){
  .footer-group { border-bottom: 1px solid rgba(255,255,255,.08); padding: 16px 0; }
  .footer-group summary { cursor: pointer; margin-bottom: 0; }
  .footer-group .footer-links { padding-top: 14px; }
}

/* Wasserzeichen deutlich dezenter (Auftraggeber-Korrektur 20260722): Opacity
   .045 + bis zu 160px wirkte im Zusammenspiel mit der Bottom-Zeile zu praesent
   und ueberlagerte optisch "Partner werden"/Copyright. Kleinere Maximalgroesse
   + niedrigere Opacity + etwas mehr Bodenabstand loesen den Konflikt. */
.footer-watermark {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  z-index: 1; pointer-events: none; width: 100%; text-align: center;
  font-family: var(--serif); font-weight: 700; line-height: 1;
  font-size: clamp(40px, 7vw, 120px);
  color: rgba(255,255,255,.028); white-space: nowrap; user-select: none;
}
/* <900px: fixe Bottom Action Bar (.action-bar) ueberlagert sonst das untere
   Drittel des Wordmarks (kein sauberer Umbruch moeglich) -- ausgeblendet
   statt einer Konkurrenz-Situation mit der Aktionsleiste. */
@media(max-width:899px){ .footer-watermark { display: none; } }

/* ── EIGENES SVG-ICON-SET statt Emoji/Textpfeile (P0 High-End-Redesign 20260716) ──
   Referenz: keine der 5 analysierten Marken nutzt Emoji in der Produktions-
   oberflaeche (Abschnitt 3 der Referenzmatrix). Reduzierte Lineart, 1.6px
   Stroke, an --deep/--sun angelehnt. */
.solicon { display: inline-flex; width: 1em; height: 1em; vertical-align: -0.14em; }
.solicon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn { display: inline-flex; align-items: center; gap: 6px; }
.icon-btn .solicon { width: 15px; height: 15px; }

/* ── AUTH / LOGIN-KOMPONENTEN (P0 High-End-Redesign 20260716) ─────────────
   Waren zuvor nur als Seiten-lokales <style> auf partner-login.html
   definiert (kein zentraler Bestandteil des Systems) -- jetzt zentral, damit
   jede aktuelle/zukuenftige Login-/Auth-Seite dieselbe Basis nutzt
   (Z-930 Template-First-Prinzip). */
.pw-wrap { position: relative; }
.pw-toggle { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; font-size: 12.5px; color: var(--muted); cursor: pointer; }
.divider-text { display: flex; align-items: center; gap: 12px; margin: 20px 0; }
.divider-text span { font-size: 12px; color: var(--muted); white-space: nowrap; }
.divider-text::before, .divider-text::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.btn-register { width: 100%; background: transparent; color: var(--forest); border: 1.5px solid var(--forest); border-radius: 10px; padding: 12px; font-size: 14px; font-weight: 700; cursor: pointer; }
.btn-register:hover { background: var(--mint); }
.demo-hint { background: var(--sun-light); border: 1px solid #e8c49a; border-radius: 10px; padding: 13px 16px; margin-top: 16px; font-size: 12px; color: #7a4a18; line-height: 1.65; }
.login-note { font-size: 11.5px; color: var(--muted); text-align: center; margin-top: 18px; line-height: 1.6; }
.login-note a { color: var(--sun); }

/* ── HERSTELLER-BILDKACHELN (P0 High-End-Redesign 20260716) ───────────────
   Referenz: Renson B2B-Seite zeigt reale Nutzungsfotos statt reiner Text-
   karten (Referenzmatrix Abschnitt 4). SOLANERO hat keine Buero-/Tablet-
   Fotos -- verwendet stattdessen echte, bereits vorhandene Produktfotos statt
   erfundener Stock-Platzhalter, mit Bezug "wo Ihre Marke sichtbar wird". */
.hh-tiles { display: grid; grid-template-columns: 1fr; gap: 14px; margin: 40px 0 8px; }
@media(min-width:700px){ .hh-tiles { grid-template-columns: repeat(2,1fr); max-width:760px; } }
/* Bild und Text getrennt (Qualitaetsaudit 20260719, ersetzt Gradient-Scrim mit
   Text direkt auf dem Foto) -- Bild oben, Beschriftung als eigene, blickdichte
   Flaeche darunter, gleiche Struktur wie .pw-card/.media-figure. */
.hh-tile {
  display: flex; flex-direction: column; border-radius: 14px; overflow: hidden;
  text-decoration: none; background: var(--pure); border: 1px solid var(--border);
  box-shadow: 0 14px 38px rgba(18,63,85,.10); transition: transform .22s ease, box-shadow .22s ease;
}
.hh-tile:hover { transform: translateY(-3px); box-shadow: 0 20px 48px rgba(18,63,85,.15); }
.hh-tile-media { width: 100%; aspect-ratio: 16 / 10; overflow: hidden; }
.hh-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.hh-tile:hover img { transform: scale(1.05); }
.hh-tile-label { padding: 18px 20px 20px; color: var(--text); border-top: 1px solid var(--border); }
.hh-tile-label strong { display: block; font-family: var(--serif); font-size: 18px; font-weight: 700; margin-bottom: 4px; color: var(--deep); }
.hh-tile-label span { font-size: 13px; color: var(--text-mid); line-height: 1.5; }

/* ══════════════════════════════════════════════════════════════════════
   P0-NACHTRAG 20260716 — DYNAMISCHER PREMIUM-HEADER (Weinor/Renson-Referenz)
   Ersetzt die reine Shrink-on-Scroll-Logik durch einen echten Hero-Zustand:
   Auf Seiten mit unmittelbar folgendem dunklen Bild-Hero (.hero-product-dark)
   wird der Header transparent, groesser und mit ueberstehendem Signet ueber
   das Bild gelegt (Logo "haengt" 22px unter die Nav-Leiste). Beim Scrollen
   (site-chrome.js: .is-compact) wird er weich zu einem soliden, kompakten
   Balken. .nav bleibt fuer alle anderen Seiten unveraendert (position:sticky),
   das :has()-Selektorpaar wirkt ausschliesslich additiv und seiten-spezifisch.
   Kein Layoutsprung: Uebergaenge laufen ueber transition, nie ueber display. */
.nav:has(+ .hero-product-dark),
.nav:has(+ .hero-home) {
  position: fixed; width: 100%; left: 0;
  background: transparent; border-bottom-color: transparent; box-shadow: none;
  /* P0-Korrektur 20260717 (Folgeauftrag zu cc_3d9d34a6): die globale .nav-Regel
     (Zeile ~855, SOLANERO-White-Premium-Override) setzt backdrop-filter:blur(14px)
     unconditional auf .nav. Diese Hero-Variante teilt dasselbe Element/dieselbe
     Klasse, hatte backdrop-filter aber nie selbst ueberschrieben -- der Blur
     sickerte dadurch per Kaskade weiterhin durch (hoehere Spezifitaet dieser
     :has()-Regel gewinnt fuer background/border/box-shadow, aber nicht fuer eine
     Eigenschaft, die sie selbst nie setzt). Explizit auf none, in Top- UND
     is-compact-Zustand (letzterer erbt es von hier, siehe unten), damit das
     Hero-Bild unter dem Header in jedem Scroll-Zustand scharf bleibt. */
  backdrop-filter: none; -webkit-backdrop-filter: none;
  /* Header-System-Vereinheitlichung 20260718: Hover/Active der Nav-Elemente
     laufen ausschliesslich ueber diese drei Variablen (siehe .nav-links a::after
     in der NAV-Basissektion) -- kein eigener Hover-Block mehr pro Hero-Variante. */
  --nav-fg-strong: #fff;
  --nav-tint: rgba(255,255,255,.16);
  --nav-underline: #fff;
}
.nav:has(+ .hero-product-dark) .nav-inner,
.nav:has(+ .hero-home) .nav-inner { min-height: 112px; }
/* Markenicon 20260717: kein wachsendes/absinkendes Sonnen-Badge mehr --
   das Icon bleibt flach und folgt im dunklen Hero-Zustand nur der
   Textfarbe (Weiss), wie die Wortmarke daneben. Kein Kreis, keine Box,
   kein eigener Schatten. */
.nav:has(+ .hero-product-dark) .nav-mark svg,
.nav:has(+ .hero-home) .nav-mark svg { width: 29px; height: 29px; transition: width .32s ease, height .32s ease; }
.nav:has(+ .hero-product-dark) .nav-mark img,
.nav:has(+ .hero-home) .nav-mark img { width: 29px; height: 29px; transition: width .32s ease, height .32s ease; }

/* Dunkler Hero (Produktseiten + Homepage-Fotoslider): Header-Text/Logo in
   Weiss auf transparentem Grund. .hero-home schliesst sich hier an, seit der
   milchige Weissverlauf entfernt wurde (Audit cc_9881fcef, 20260716) --
   darunter liegt jetzt ein echtes Foto, kein heller Hintergrund mehr. */
.nav:has(+ .hero-product-dark) .nav-mark,
.nav:has(+ .hero-home) .nav-mark,
.nav:has(+ .hero-product-dark) .nav-name,
.nav:has(+ .hero-product-dark) .nav-links a,
.nav:has(+ .hero-product-dark) .nav-drop-trigger,
.nav:has(+ .hero-home) .nav-mark,
.nav:has(+ .hero-home) .nav-name,
.nav:has(+ .hero-home) .nav-links a,
.nav:has(+ .hero-home) .nav-drop-trigger { color: #fff; transition: color .3s ease; }
.nav:has(+ .hero-product-dark) .nav-name small,
.nav:has(+ .hero-home) .nav-name small { color: rgba(255,255,255,.6); }
/* Hover/Active jetzt ueber --nav-tint/--nav-fg-strong (siehe oben) -- deckt
   automatisch auch .nav-drop-trigger ab, was hier vorher fehlte. */
.nav:has(+ .hero-product-dark) .nav-cta,
.nav:has(+ .hero-home) .nav-cta { background: #fff; color: var(--deep) !important; }
.nav:has(+ .hero-product-dark) .nav-burger span,
.nav:has(+ .hero-home) .nav-burger span { background: #fff; }
.nav:has(+ .hero-home) { background: rgba(255,255,255,.0); }

/* Kompakter Zustand ueberschreibt beide Hero-Varianten wieder solide
   (site-chrome.js setzt .is-compact anhand Scrollrichtung + Hero-Hoehe).
   MASTERSTANDARD-Fix (Drive 1ME6IvZba2L6WoKwA25sRBkSUW_n7hhLMixUPlHUpzkU,
   20260717): kein backdrop-filter/blur mehr -- das verwischte das Hero-Bild
   hinter dem Header sichtbar. Header-System-Vereinheitlichung 20260718:
   Deckkraft von .88 auf voll deckend (1) angehoben (identisch zur normalen,
   nicht-immersiven .nav-Flaeche, siehe White-Premium-Override weiter oben) --
   .88 liess auf kontrastreichen Hero-Fotos noch sichtbar Bildstruktur/Text
   durchscheinen ("zu transparent beim Scrollen", real im Browser gefunden).
   Bild bleibt weiterhin scharf statt milchig, da kein Blur gesetzt wird. */
.nav:has(+ .hero-product-dark).is-compact,
.nav:has(+ .hero-home).is-compact {
  background: rgba(255,255,255,1);
  border-bottom: 1px solid var(--border); box-shadow: 0 4px 22px rgba(22,62,82,.12);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  --nav-fg-strong: var(--brand-blue, var(--deep));
  --nav-tint: #f4f8fa;
  --nav-underline: var(--brand-orange, var(--sun));
}
.nav:has(+ .hero-product-dark).is-compact .nav-inner,
.nav:has(+ .hero-home).is-compact .nav-inner { min-height: 60px; }
.nav:has(+ .hero-product-dark).is-compact .nav-mark,
.nav:has(+ .hero-home).is-compact .nav-mark { color: var(--deep); }
.nav:has(+ .hero-product-dark).is-compact .nav-mark svg,
.nav:has(+ .hero-home).is-compact .nav-mark svg { width: 15px; height: 15px; }
.nav:has(+ .hero-product-dark).is-compact .nav-mark img,
.nav:has(+ .hero-home).is-compact .nav-mark img { width: 15px; height: 15px; }
.nav:has(+ .hero-product-dark).is-compact .nav-name,
.nav:has(+ .hero-product-dark).is-compact .nav-links a,
.nav:has(+ .hero-product-dark).is-compact .nav-drop-trigger,
.nav:has(+ .hero-home).is-compact .nav-name,
.nav:has(+ .hero-home).is-compact .nav-links a,
.nav:has(+ .hero-home).is-compact .nav-drop-trigger { color: var(--text-mid); text-shadow: none; }
/* Hover jetzt ueber --nav-tint/--nav-fg-strong (siehe oben). */
.nav:has(+ .hero-product-dark).is-compact .nav-cta,
.nav:has(+ .hero-home).is-compact .nav-cta { background: var(--deep); color: #fff !important; }
.nav:has(+ .hero-product-dark).is-compact .nav-burger span,
.nav:has(+ .hero-home).is-compact .nav-burger span { background: var(--text); }
.nav:has(+ .hero-product-dark).is-compact .nav-name small,
.nav:has(+ .hero-home).is-compact .nav-name small { display: none; }
/* Launch-Review 20260728 (Nachtrag): Gegenregel zur transparenten
   Hero-Variante von .nav-kunden-login (siehe Basisregel weiter oben) fehlte
   fuer den .is-compact-Zustand -- dadurch blieb "Mein SOLANERO" nach dem
   Scrollen weiss auf fast-weissem Hintergrund haengen (echt unsichtbar, per
   Screenshot + computed style bestaetigt: color:#fff, background:rgba(255,
   255,255,.18) auf dem soliden weissen Sticky-Header). Faellt jetzt exakt
   wie .nav-cta auf dunkelblauen Text/Rahmen zurueck. */
.nav:has(+ .hero-product-dark).is-compact .nav-kunden-login,
.nav:has(+ .hero-home).is-compact .nav-kunden-login {
  background: rgba(201,166,107,.12); border-color: var(--champagne); color: var(--champagne);
}
.nav:has(+ .hero-product-dark).is-compact .nav-kunden-login:hover,
.nav:has(+ .hero-home).is-compact .nav-kunden-login:hover { background: var(--champagne); color: #fff; }

/* Utility-Zeile: Login/Partnerzugang bleibt im Hero-Zustand sichtbar,
   nutzt denselben Farbwechsel wie die Hauptnav (siehe nav-partner-drop). */
.nav:has(+ .hero-product-dark) .nav-partner-drop .nav-drop-trigger,
.nav:has(+ .hero-home) .nav-partner-drop .nav-drop-trigger { color: rgba(255,255,255,.86); }
/* Hover jetzt ueber --nav-tint/--nav-fg-strong (siehe oben, deckt Produkte-
   UND Partner-Trigger gleichermassen ab). */
.nav:has(+ .hero-product-dark).is-compact .nav-partner-drop .nav-drop-trigger,
.nav:has(+ .hero-home).is-compact .nav-partner-drop .nav-drop-trigger { color: var(--text-mid); }

/* Reconciliation-Fix 20260717 (Punkt D): .nav-login und .nav-partner-link
   (Regionalseiten-Nav ohne Partner-Dropdown) nutzten fest var(--deep)/var(--text-mid)
   -- dunkler Text auf dem transparenten, dunklen Hero-Zustand war praktisch
   unsichtbar (Kontrastbug, real im Browser gefunden, nicht nur behauptet). */
.nav:has(+ .hero-product-dark) .nav-login,
.nav:has(+ .hero-home) .nav-login { color: #fff; border-color: rgba(255,255,255,.4); }
.nav:has(+ .hero-product-dark) .nav-login:hover,
.nav:has(+ .hero-home) .nav-login:hover { background: rgba(255,255,255,.14); border-color: #fff; }
.nav:has(+ .hero-product-dark).is-compact .nav-login,
.nav:has(+ .hero-home).is-compact .nav-login { color: var(--deep); border-color: var(--border-cool, var(--border)); }
.nav:has(+ .hero-product-dark) .nav-partner-link,
.nav:has(+ .hero-home) .nav-partner-link { color: rgba(255,255,255,.86); border-left-color: rgba(255,255,255,.3); }
.nav:has(+ .hero-product-dark) .nav-partner-link:hover,
.nav:has(+ .hero-home) .nav-partner-link:hover { color: #fff; background: rgba(255,255,255,.14); }
.nav:has(+ .hero-product-dark).is-compact .nav-partner-link,
.nav:has(+ .hero-home).is-compact .nav-partner-link { color: var(--text-mid); border-left-color: var(--border); }

/* ══════════════════════════════════════════════════════════════════════
   MEGA-MENU-INTEGRATION 20260718 (Header-System-Vereinheitlichung)
   Vorher wirkte das Produkte-/Partner-Dropdown wie ein loses Fremdelement,
   sobald es ueber dem noch transparenten Immersive-Header (Startseite/
   Produktberatung, ganz oben auf der Seite) geoeffnet wurde: das solide
   weisse Menu haengt sichtbar ueber dem durchscheinenden Header UND dem
   Hero-Bild. site-chrome.js setzt bei Hover/Fokus/Touch-Open JEDES
   .nav-drop sofort .menu-open-lock auf .nav -- bewusst KEIN .is-compact,
   damit sich die Header-Hoehe beim Oeffnen nicht veraendert (kein
   Layoutsprung, nur Farbe/Hintergrund wechseln). Gilt identisch fuer alle
   Seiten (auch die ohnehin schon solide Nicht-Hero-Nav, dort ohne
   sichtbaren Effekt) -- ein System statt Spezialfall. */
.nav.menu-open-lock {
  background: rgba(255,255,255,1) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  border-bottom-color: var(--border) !important;
  box-shadow: 0 4px 22px rgba(22,62,82,.12) !important;
}
.nav.menu-open-lock .nav-mark,
.nav.menu-open-lock .nav-name,
.nav.menu-open-lock .nav-links a,
.nav.menu-open-lock .nav-drop-trigger,
.nav.menu-open-lock .nav-login,
.nav.menu-open-lock .nav-partner-link,
.nav.menu-open-lock .nav-partner-drop .nav-drop-trigger { color: var(--brand-blue, var(--deep)) !important; }
.nav.menu-open-lock .nav-name small { color: var(--muted) !important; }
.nav.menu-open-lock .nav-cta { background: var(--deep) !important; color: #fff !important; }
.nav.menu-open-lock .nav-burger span { background: var(--text) !important; }
.nav.menu-open-lock .nav-login { border-color: var(--border-cool, var(--border)) !important; }
.nav.menu-open-lock .nav-partner-link { border-left-color: var(--border) !important; }

/* Fallback ohne :has()-Unterstuetzung (sehr alte Browser): Header bleibt in
   der bisherigen soliden Sticky-Form -- kein Bruch, nur kein Immersive-Effekt. */
@supports not selector(:has(a)) {
  .nav { position: sticky; background: var(--pure); }
}

@media(max-width:640px){
  .nav:has(+ .hero-product-dark) .nav-inner,
  .nav:has(+ .hero-home) .nav-inner { min-height: 64px; }
  .nav:has(+ .hero-product-dark) .nav-mark svg,
  .nav:has(+ .hero-home) .nav-mark svg { width: 19px; height: 19px; }
  .nav:has(+ .hero-product-dark) .nav-mark img,
  .nav:has(+ .hero-home) .nav-mark img { width: 19px; height: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  .nav:has(+ .hero-product-dark) .nav-mark,
  .nav:has(+ .hero-home) .nav-mark,
  .nav-inner { transition: none; }
}

/* Ehemals hier: .ff-hero-compact (Seiten-Sonderklasse fuer
   /fachhaendler/). Am 20260718b in die einheitliche
   .hero-product.hero-product-dark-Safe-Zone-Regel (siehe oben, Zeile ~1309)
   ueberfuehrt -- gilt jetzt automatisch fuer ALLE hero-product-dark-Seiten
   statt nur fuer eine einzelne Seite. Klasse aus dem HTML entfernt. */

/* Produktberatung: Hero-Panel etwas höher als der generische Produkt-Hero,
   aber weiterhin mit klarer Safe-Zone unter dem Header. */
@media(min-width:768px){
  .hero-productberatung {
    padding-top: clamp(176px, 20vh, 204px) !important;
    padding-bottom: clamp(44px, 6vh, 64px) !important;
  }
}
@media(max-width:767px){
  .hero-productberatung {
    padding-top: 136px !important;
    padding-bottom: 44px !important;
  }
}
/* Horizontale Block-Angleichung an Startseite (Auftrag 20260718): linke
   Content-Kante war ueber .cw/.hero-cw bereits identisch (beide teilen
   var(--cw)/var(--pad) -- Playwright-Messung bestaetigt 430/190/40/20px auf
   1920/1440/768/390px). Einzige reale Differenz war die Panel-Breite: 600px
   (Standard aller Produkt-Hero-Seiten) vs. 660px auf der Startseite
   (.hero-home-panel, dort wegen der 4er-Trust-Line breiter). Hier auf
   Startseiten-Breite angeglichen, damit der Block auch in der Flaeche
   vergleichbar wirkt -- nur fuer produktfinder.html, andere Produkt-Hero-
   Seiten bleiben bei 600px (dort keine Abweichung vom Standard). */
.hero-productberatung .hero-text-panel { max-width: 660px; }

/* ── PROJEKTWEITER BREITEN-/TYPOGRAFIE-/KONTRAST-PASS 20260719 ───────────
   Ziel: bessere Nutzung großer Viewports, mehr Reinweiß, höhere Lesbarkeit
   und kräftigerer Kontrast auf Endkunden-, Fachpartner- und Partnerseiten.
   Mobile bleibt bewusst kompakter und vollständig responsiv. */
:root {
  --cw: 1320px;
  --pad: 22px;
  --pad-lg: 44px;
  --white: #ffffff;
  --text: #20262a;
  --text-mid: #3f474e;
  --muted: #66727a;
  --sand: #f4f0e9;
  --stone: #f8f5f0;
  --sun-light: #fbf8f3;
}
/* Launch-Review 20260728: --cw blieb bei 1320px starr fixiert, auch auf sehr
   grossen Bildschirmen (1920px+) -- dort entstand dadurch ein durchgehender,
   ungenutzter Leerraum-Balken von ca. 300px pro Seite ueber fast die gesamte
   Seitenhoehe. Fliesstext bleibt unveraendert lesbar, da .sec-sub (Zeile
   ~3049) bereits unabhaengig davon auf max-width:720px begrenzt ist -- nur
   die Karten-/Grid-Bereiche (Produktwelten, Footer etc.) nutzen die
   zusaetzliche Breite. */
@media(min-width:1680px){ :root { --cw: 1560px; --pad-lg: 56px; } }
body { background: var(--pure); font-size: 17px; line-height: 1.72; }
.cw { width: 100%; }
.nav-inner { max-width: var(--cw); }
.nav-links a,
.nav-drop-trigger,
.nav-partner-link { font-size: 14px; }
.nav-cta { font-size: 14px; padding: 11px 22px; }
.nav-name { font-size: 18px; }

.sec { padding: 88px 0; }
.sec-lg { padding: 112px 0; }
.sec-sm { padding: 60px 0; }
.sec-h2 { font-size: clamp(34px, 3.5vw, 52px); line-height: 1.12; }
.sec-h3 { font-size: clamp(24px, 2.4vw, 32px); }
.sec-sub { font-size: 18px; line-height: 1.75; max-width: 720px; }
.tag-label,
.pw-label,
.pd-module-eyebrow { font-size: 13px; letter-spacing: .14em; }

.step h3,
.q-item h3,
.card h3 { font-size: 21px; line-height: 1.28; }
.step p,
.q-item p,
.card p,
.pw-finder-text { font-size: 17px; line-height: 1.72; color: var(--text-mid); }
.card-link { font-size: 16px; }
.card { padding: 34px; }

:root {
  --pd-eyebrow: 14px;
  --pd-h: clamp(34px, 3.1vw, 48px);
  --pd-h-hl: clamp(38px, 3.5vw, 54px);
  --pd-body: 18px;
  --pd-cta: 17px;
  --pd-pad: clamp(48px, 5.5vw, 78px);
}
.pd-module { gap: 56px; }
@media(min-width:900px){
  .pd-module { grid-template-columns: minmax(0,1.08fr) minmax(0,.92fr); gap: 76px; }
  .pd-module.reverse { grid-template-columns: minmax(0,.92fr) minmax(0,1.08fr); }
  .pd-module-media { min-height: 420px; }
}
.pd-module-body { max-width: 58ch; color: var(--text-mid); }
.pd-module-note { font-size: 15px; color: var(--muted); }
.pd-module--highlight { max-width: 960px; }

.media-caption { font-size: 16px; line-height: 1.5; padding: 17px 20px 18px; }
/* footer-main/-bottom sitzen serienweit in <div class="cw"> (siehe .cw Zeile 58) --
   .footer-main-inner/.footer-bottom-inner existierten in keiner Seite als Klasse,
   waren toter Code aus dem 20260719-Pass. Bereinigt 20260719b, keine Breitenaenderung
   (max-width:var(--cw) griff bereits ueber .cw). */
.footer-social-band-inner { max-width: var(--cw); }

/* Häufige Partner-/Business-Komponenten: Lesbarkeit zentral anheben */
.fp-card p,
.fp-card li,
.partner-card p,
.partner-card li,
.business-card p,
.business-card li,
.ibox p,
.funnel-l,
.faq-item p,
.accordion-body,
.form-help,
.field-help { font-size: 16px; line-height: 1.65; color: var(--text-mid); }
.fp-card h3,
.partner-card h3,
.business-card h3 { font-size: 21px; line-height: 1.3; }

@media(max-width:1023px){
  :root { --pad-lg: 30px; }
  body { font-size: 16.5px; }
  .sec { padding: 72px 0; }
  .sec-lg { padding: 88px 0; }
  .sec-h2 { font-size: clamp(32px, 5.4vw, 46px); }
  .pd-module { gap: 40px; }
}
@media(max-width:640px){
  :root { --pad: 18px; --pad-lg: 18px; }
  body { font-size: 16px; }
  .sec { padding: 58px 0; }
  .sec-sm { padding: 44px 0; }
  .sec-lg { padding: 68px 0; }
  .sec-h2 { font-size: clamp(29px, 9vw, 38px); }
  .sec-h3 { font-size: clamp(23px, 7vw, 30px); }
  .sec-sub { font-size: 17px; line-height: 1.7; }
  .step h4,
  .q-item h3,
  .card h3 { font-size: 20px; }
  .step p,
  .q-item p,
  .card p,
  .pw-finder-text { font-size: 16.5px; }
  .card { padding: 26px 22px; }
  .pd-module-body { font-size: 17px; }
  .pd-module-media { min-height: 240px; }
  .media-caption { font-size: 15px; }
}

/* Startseite Produktwelten 20260719: verbindliche Trennung von Bild und Text.
   Außer Hero-Bereichen liegt kein Text mehr direkt im Bild. */
.pw-grid.systeme-6 {
  max-width: var(--cw);
  margin: 0 auto;
  padding: 0 var(--pad);
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}
@media(min-width:768px){
  .pw-grid.systeme-6 { padding: 0 var(--pad-lg); grid-template-columns: 1fr 1fr; }
}
@media(min-width:1180px){
  .pw-grid.systeme-6 { grid-template-columns: repeat(3,minmax(0,1fr)); grid-template-rows: none; }
}
.pw-grid.systeme-6 .pw-card,
.pw-grid.systeme-6 .pw-feat-a,
.pw-grid.systeme-6 .pw-feat-b,
.pw-grid.systeme-6 .pw-mini-a,
.pw-grid.systeme-6 .pw-mini-b,
.pw-grid.systeme-6 .pw-mini-c,
.pw-grid.systeme-6 .pw-wide {
  grid-column: auto;
  grid-row: auto;
  height: auto;
  min-height: 0;
}
.pw-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--pure) !important;
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 14px 38px rgba(18,63,85,.10);
  transition: transform .22s ease, box-shadow .22s ease;
}
.pw-card:hover { transform: translateY(-3px); box-shadow: 0 20px 48px rgba(18,63,85,.15); }
.pw-card::after { content: none !important; }
.pw-media {
  width: 100%;
  aspect-ratio: 16 / 10;
  flex: 0 0 auto;
  background-size: cover;
  background-position: center;
  transition: transform .5s ease;
}
.pw-card:hover .pw-media { transform: scale(1.025); }
.pw-content {
  position: static;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 14px 26px 27px;
  background: var(--pure);
  border-top: 1px solid var(--border);
  transform: none !important;
}
.pw-cat {
  color: var(--sun);
  font-size: 12px;
  letter-spacing: -0.1px;
  margin-bottom: 9px;
}
.pw-title,
.pw-grid.systeme-6 .pw-feat-a .pw-title,
.pw-grid.systeme-6 .pw-feat-b .pw-title {
  color: var(--text);
  font-size: clamp(25px,2.2vw,34px);
  /* 20260814 (Aurelia cc_550f87ad): kein explizites line-height gesetzt --
     erbte den globalen Fliesstext-Wert (1.7, siehe body-Regel), viel zu
     locker fuer eine zweizeilige Display-Headline (wirkte "auseinander-
     gerissen" statt als eine kompakte typografische Einheit). Editorial-
     uebliche enge Headline-Zeilenhoehe gesetzt. */
  line-height: 1.08;
  margin-bottom: 12px;
}
.pw-desc {
  display: block;
  color: var(--text-mid);
  max-width: none;
  font-size: 16px;
  line-height: 1.65;
  margin-bottom: 18px;
}
.pw-cta { color: var(--deep); font-size: 15px; margin-top: auto; }
.pw-card:hover .pw-cta { color: var(--sun); }
@media(max-width:640px){
  .pw-grid.systeme-6 { padding: 0 var(--pad); }
  .pw-media { aspect-ratio: 4 / 3; }
  .pw-content { padding: 22px 21px 24px; }
  .pw-desc { font-size: 16px; }
}

/* Smart-Home-Hero (motorisierung-smarthome.html): finales statisches Foto
   (solanero-motorisierung-smarthome-hero.jpg — Markise, Raffstore und
   Rollladen in einem scharfen Bild). Frühere CSS/JS-Layer-Animation und
   Crossfade-Versuche vollständig entfernt (nicht abgenommen). Backup:
   backup/pre_final_static_hero_20260728_204155/
   Bild ist als Inline-Style direkt auf der Seite gesetzt — identisches
   Muster zu allen anderen Produktseiten (z.B. markisen.html). Nur die
   Bildposition bekommt auf Mobil ein gezieltes !important-Override (die
   Klasse .hero-smarthome-photo dient nur als Hook dafür), damit das
   Raffstore-Fenster nicht vom Text-Panel-Rand angeschnitten wird. */
@media(max-width:640px){
  /* B1.12 Hero/UX-Pilot 20260904: die vormalige 308px-Sonderloesung (statt
     der gemeinsamen 108px-Basis) machte diesen Hero mit Abstand am
     laengsten (audit: 1069px) und war eine reine Einzelseiten-Ausnahme.
     Jetzt gilt dieselbe kompakte Basispolsterung wie bei allen anderen
     .hero-product-dark-Seiten; die Bildposition (nur Position, kein
     neuer Crop/kein neues Bild) ruecken den sichtbaren Bildausschnitt so,
     dass das Raffstore-Fenster weiterhin im vor dem Textpanel sichtbaren
     Bereich bleibt. */
  .hero-smarthome-photo.hero-compact-v2 { background-position: 63% 32% !important; }
}

/* Projekt-/Ausschreibungsworkflow (Auftrag 20260729): einheitliche
   Status-Badges fuer Planungspartner- und Fachpartner-Seiten. Dezente
   Statusfarben statt Admin-Backend-Look, siehe
   assets/solanero-projektworkflow.js (projektBadgeClass). */
.pw-badge { display: inline-block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 5px 12px; border-radius: 20px; white-space: nowrap; }
.pw-badge--grau { background: var(--stone); color: var(--text-mid); }
.pw-badge--blau { background: #eff6ff; color: #1d4ed8; }
.pw-badge--gruen { background: #f0fdf4; color: #065f46; }
.pw-badge--gold { background: var(--sun-light); color: #7a4a18; }
.pw-badge--deep { background: var(--deep); color: #fff; }

.pw-card { background: var(--pure); border: 1.5px solid var(--border); border-radius: 14px; padding: 16px 20px; }
.pw-card-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.pw-card h4 { font-size: 14.5px; margin: 0 0 4px; }
.pw-card .pw-meta { font-size: 12px; color: var(--muted); margin: 0; }
.pw-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.pw-tags span { font-size: 10.5px; background: var(--stone); color: var(--deep); border-radius: 10px; padding: 2px 8px; }
.pw-next-action { font-size: 12px; font-weight: 600; color: var(--deep); margin-top: 8px; }
.pw-empty { border: 1.5px dashed var(--border); border-radius: 14px; padding: 28px; text-align: center; color: var(--muted); font-size: 13.5px; }
.pw-group-head { display: flex; justify-content: space-between; align-items: center; margin: 30px 0 12px; }
.pw-group-head h3 { font-size: 15.5px; margin: 0; }
.pw-group-count { font-size: 11.5px; color: var(--muted); background: var(--stone); border-radius: 10px; padding: 2px 9px; }

.pw-pipeline { display: flex; flex-direction: column; gap: 10px; }
.pw-cand { border: 1.5px solid var(--border); border-radius: 12px; padding: 14px 16px; }
.pw-cand-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.pw-cand h5 { font-size: 13.5px; margin: 0 0 2px; }
.pw-cand .pw-meta { font-size: 11.5px; color: var(--muted); margin: 0; }
.pw-cand-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.pw-btn-sm { border: 1.5px solid var(--border); background: var(--white); border-radius: 7px; padding: 6px 11px; font-size: 12px; font-weight: 600; color: var(--text-mid); cursor: pointer; }
.pw-btn-sm:hover { border-color: var(--deep); color: var(--deep); }
.pw-btn-sm.is-primary { background: var(--deep); border-color: var(--deep); color: #fff; }
.pw-btn-sm.is-danger { border-color: #f3c6c6; color: #991b1b; }
.pw-offer-box { border: 1.5px solid var(--border); border-radius: 10px; padding: 12px 14px; margin-top: 10px; font-size: 12.5px; color: var(--text-mid); background: var(--stone); }
.pw-offer-box strong { color: var(--text); }

.pw-lock-note { border: 1.5px dashed var(--border); border-radius: 12px; padding: 16px 18px; font-size: 12.5px; color: var(--muted); text-align: center; }

/* Bestaetigungsdialog (Ablehnen/Schliessen/Vergeben/Zurueckziehen) */
.pw-confirm-overlay { position: fixed; inset: 0; background: rgba(15,25,32,.55); display: none; align-items: center; justify-content: center; z-index: 400; padding: 20px; }
.pw-confirm-overlay.show { display: flex; }
.pw-confirm-box { background: var(--pure); border-radius: 16px; padding: 26px 24px; max-width: 380px; width: 100%; }
.pw-confirm-box h4 { font-size: 15.5px; margin: 0 0 8px; }
.pw-confirm-box p { font-size: 13px; color: var(--text-mid); line-height: 1.6; margin: 0 0 20px; }
.pw-confirm-actions { display: flex; gap: 10px; justify-content: flex-end; }

/* SOLANERO Upload-Widget (assets/upload-widget.js) */
.uw-widget { border: 1.5px dashed var(--border); border-radius: 12px; padding: 18px; text-align: center; margin-bottom: 10px; transition: border-color .15s, background .15s; }
.uw-widget.uw-drag-active { border-color: var(--forest); background: rgba(46,107,79,.05); }
.uw-widget label { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 8px; }
.uw-widget .uw-hint { font-size: 11px; color: var(--muted); margin-top: 6px; }
.uw-widget input[type="file"] { font-size: 12.5px; }
.uw-list { margin-top: 10px; text-align: left; }
.uw-row { border-top: 1px solid var(--border); padding: 8px 0; }
.uw-row:first-child { border-top: none; }
.uw-row-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 11.5px; }
.uw-row-name { font-weight: 600; color: var(--deep); }
.uw-row-size, .uw-row-cat { color: var(--muted); }
.uw-row-status { margin-left: auto; padding: 2px 8px; border-radius: 999px; font-size: 11px; }
.uw-status-ok { background: #eaf5ec; color: #1f6b3d; }
.uw-status-pending { background: #fdf3e0; color: #97650f; }
.uw-status-error { background: #fbe9e9; color: #a32626; }

/* Zentrale Breadcrumb-Komponente (B1.32, 2026-09-05) -- ein einziges Muster
   fuer Hub-/Kategorie-/Ratgeber-/Fachbetriebsseiten statt seitenlokal
   dupliziertem Inline-<style>. Kanonische Variante = die bereits auf
   fachhaendler/index.html und den Ratgeber-Artikeln aktive, unterstrichene
   Linkoptik (bessere Linkerkennbarkeit als reine Hover-Unterstreichung).
   .bc-cur traegt zusaetzlich overflow-wrap, damit lange Kategorie-/
   Betriebsnamen bei schmalen Viewports kontrolliert umbrechen statt zu
   ueberlaufen (identisch zum bisherigen Einzelfix auf
   fachhaendler/terrassenueberdachungen/index.html, jetzt zentral fuer alle). */
.breadcrumb { padding: 10px 0; background: var(--bg, #fff); border-bottom: 1px solid var(--border); font-size: 13px; }
.bc-link { color: var(--deep); text-decoration: underline; text-decoration-color: rgba(22, 62, 82, .35); }
.bc-link:hover { text-decoration-color: currentColor; }
.bc-sep { margin: 0 6px; color: var(--muted, #888); }
.bc-cur { color: var(--muted, #888); font-weight: 600; overflow-wrap: break-word; }

/* Sonnenschirme: bewusste Premium-Feature-Komposition direkt nach dem Hero.
   2026-09-06: ersetzt den einzigen Singleton-.media-duo-Fall, der ab 768px
   eine leere zweite Spalte erzeugte. Page-spezifisch, keine globale Grid-Änderung. */
.solanero-schirm-feature-wrap {
  padding-top: 34px;
  padding-bottom: 26px;
}
.solanero-schirm-feature {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(320px, 2fr);
  gap: 22px;
  align-items: stretch;
}
.solanero-schirm-feature .solanero-schirm-feature-media {
  min-height: 420px;
  height: 100%;
  margin: 0;
}
.solanero-schirm-feature-panel {
  min-width: 0;
  border: 1px solid rgba(18,63,85,.10);
  border-radius: 16px;
  background: linear-gradient(145deg, #fbf7f0 0%, #f7f2e9 58%, #f3eee6 100%);
  box-shadow: 0 14px 40px rgba(18,63,85,.07);
  padding: clamp(28px, 3vw, 42px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.solanero-schirm-feature-kicker {
  color: #a86536;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 11px;
}
.solanero-schirm-feature-panel h2 {
  margin: 0 0 12px;
  max-width: 460px;
  font-family: var(--serif);
  font-size: clamp(28px, 2.55vw, 38px);
  line-height: 1.08;
  font-weight: 400;
  letter-spacing: -.02em;
  color: var(--deep);
}
.solanero-schirm-feature-intro {
  margin: 0 0 22px;
  max-width: 500px;
  color: var(--text-mid);
  font-size: 14px;
  line-height: 1.65;
}
.solanero-schirm-feature-list {
  display: grid;
  gap: 0;
  border-top: 1px solid rgba(18,63,85,.10);
}
.solanero-schirm-feature-item {
  display: grid;
  grid-template-columns: minmax(110px, .8fr) minmax(0, 1.5fr);
  gap: 14px;
  align-items: start;
  padding: 13px 0;
  border-bottom: 1px solid rgba(18,63,85,.10);
}
.solanero-schirm-feature-item strong {
  color: var(--deep);
  font-size: 12.5px;
  line-height: 1.4;
}
.solanero-schirm-feature-item span {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
}
.solanero-schirm-feature-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  min-height: 44px;
  margin-top: 22px;
  color: var(--deep);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  border-bottom: 1px solid rgba(18,63,85,.24);
}
.solanero-schirm-feature-link:hover,
.solanero-schirm-feature-link:focus-visible {
  color: #a86536;
  border-bottom-color: currentColor;
}
@media (max-width: 860px) {
  .solanero-schirm-feature {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .solanero-schirm-feature .solanero-schirm-feature-media {
    min-height: 0;
    height: 360px;
  }
  .solanero-schirm-feature-panel {
    padding: 30px;
  }
}
@media (max-width: 640px) {
  .solanero-schirm-feature-wrap {
    padding-top: 18px;
    padding-bottom: 14px;
  }
  .solanero-schirm-feature {
    gap: 14px;
  }
  .solanero-schirm-feature .solanero-schirm-feature-media {
    min-height: 0;
    height: 255px;
  }
  .solanero-schirm-feature-panel {
    padding: 24px 21px;
    border-radius: 14px;
  }
  .solanero-schirm-feature-panel h2 {
    font-size: clamp(27px, 8.4vw, 34px);
  }
  .solanero-schirm-feature-intro {
    font-size: 13.5px;
    margin-bottom: 18px;
  }
  .solanero-schirm-feature-item {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 12px 0;
  }
  .solanero-schirm-feature-item strong,
  .solanero-schirm-feature-item span {
    font-size: 12.5px;
  }
  .solanero-schirm-feature-link {
    width: 100%;
    justify-content: space-between;
    margin-top: 18px;
  }
}


/* ==========================================================================
   SOLANERO FRESH DESIGN SYSTEM V1 — 2026-09-29
   Sitewide semantic palette: light, sunny, fresh outdoor-living.
   Dark navy remains text/footer/rare contrast; CTAs use peach or lagoon.
   ========================================================================== */
:root{
  --sol-fresh-navy:#123F55;
  --sol-fresh-water:#287FA2;
  --sol-fresh-water-dark:#1F6F91;
  --sol-fresh-sky:#EEF8FB;
  --sol-fresh-aqua:#EAF7F4;
  --sol-fresh-peach:#F0A06E;
  --sol-fresh-peach-hover:#F7B488;
  --sol-fresh-sand:#FFF8EF;
  --sol-fresh-border:#D9E8EC;
  --sol-fresh-shadow:0 14px 40px rgba(18,63,85,.075);
  --page-white:#fff;
  --page-ivory:#FFFCF8;
  --page-sky:var(--sol-fresh-sky);
  --brand-blue:var(--sol-fresh-navy);
  --brand-blue-soft:var(--sol-fresh-water-dark);
  --brand-orange:var(--sol-fresh-peach);
  --sand:#F8FCFD;
  --stone:#EFF8F9;
  --sun-light:var(--sol-fresh-sand);
  --mint:#EEF8F8;
  --border:var(--sol-fresh-border);
  --border-cool:#D4E6EA;
}
body{background:#fff;}
.sec-sand{background:linear-gradient(180deg,#F8FCFD 0%,#F3FAFC 100%)!important;}
.sec-stone{background:linear-gradient(180deg,#F0F8F9 0%,#ECF6F8 100%)!important;}
.sec-ivory{background:linear-gradient(180deg,#FFFCF8 0%,#FFF8EF 100%)!important;}
.card,.price-band,.pros,.cons,.partner-card{border-color:var(--sol-fresh-border);box-shadow:var(--sol-fresh-shadow);}
.btn-sun,.btn-terra{background:var(--sol-fresh-peach)!important;color:var(--sol-fresh-navy)!important;border-color:transparent!important;box-shadow:0 9px 24px rgba(18,63,85,.12);}
.btn-sun:hover,.btn-terra:hover{background:var(--sol-fresh-peach-hover)!important;color:var(--sol-fresh-navy)!important;transform:translateY(-1px);}
.btn-forest,.btn-sky{background:var(--sol-fresh-water)!important;color:#fff!important;border-color:var(--sol-fresh-water)!important;}
.btn-forest:hover,.btn-sky:hover{background:var(--sol-fresh-water-dark)!important;border-color:var(--sol-fresh-water-dark)!important;}
.btn-outline,.btn-ghost{background:#fff!important;color:var(--sol-fresh-water-dark)!important;border-color:#C8DDE3!important;}
.btn-outline:hover,.btn-ghost:hover{background:var(--sol-fresh-sky)!important;color:var(--sol-fresh-navy)!important;border-color:#9FC7D2!important;}
/* Primary conversion bands become bright instead of heavy navy blocks. */
.cta-section{background:linear-gradient(135deg,#EAF7F4 0%,#EEF8FB 48%,#FFF4E9 100%)!important;border-top:1px solid #D9E8EC;border-bottom:1px solid #E7E4DC;}
.cta-section .sec-h2{color:var(--sol-fresh-navy)!important;}
.cta-section .sec-sub{color:#49636F!important;}
.cta-section .btn-outline-w{background:var(--sol-fresh-peach)!important;color:var(--sol-fresh-navy)!important;border-color:transparent!important;}
.cta-section .btn-outline-w:hover{background:var(--sol-fresh-peach-hover)!important;color:var(--sol-fresh-navy)!important;}
/* Ratgeber imagery uses airy summer gradients instead of dark/navy blocks. */
.rat-img-1{background:linear-gradient(135deg,#EAF7F4 0%,#BFE5EF 100%)!important;}
.rat-img-2{background:linear-gradient(135deg,#EEF8FB 0%,#B7DDEA 100%)!important;}
.rat-img-3{background:linear-gradient(135deg,#FFF8EF 0%,#F6C6A7 100%)!important;}
.rat-img-4{background:linear-gradient(135deg,#F7E8CA 0%,#F0A06E 100%)!important;}
.rat-img-5{background:linear-gradient(135deg,#EFF8F9 0%,#D9EAF0 100%)!important;}
.rat-img-6{background:linear-gradient(135deg,#DDF2F4 0%,#A9D9E6 100%)!important;}
.rat-img-7{background:linear-gradient(135deg,#EAF7F4 0%,#E8D5A8 100%)!important;}
.rat-img-8{background:linear-gradient(135deg,#FFF6EA 0%,#F4B68E 100%)!important;}

/* 20260930: canonical off-canvas mobile menu fallback for fresh public pages. */
@media (max-width:1239.98px){
  .nav-mobile{display:block!important;position:fixed!important;top:65px!important;right:0!important;left:auto!important;bottom:0!important;width:clamp(320px,32vw,420px)!important;max-width:calc(100vw - 24px)!important;max-height:none!important;height:auto!important;padding:14px 20px calc(28px + env(safe-area-inset-bottom))!important;overflow-y:auto!important;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;background:rgba(255,255,255,.985)!important;border-top:0!important;border-left:1px solid var(--border-cool,var(--border))!important;box-shadow:-18px 12px 42px rgba(17,48,64,.16)!important;transform:translateX(105%);opacity:0;visibility:hidden;pointer-events:none;transition:transform .24s ease,opacity .18s ease,visibility 0s linear .24s;z-index:1200!important;}
  .nav-mobile.open{transform:translateX(0);opacity:1;visibility:visible;pointer-events:auto;transition:transform .24s ease,opacity .18s ease;}
}
@media (max-width:767.98px){.nav-mobile{width:min(88vw,380px)!important;max-width:none!important;}}
@media (max-width:420px){.nav-mobile{width:92vw!important;}}
@media (min-width:1240px){.nav-mobile{display:none!important;}}

/* 20260930 Typography integrity: Ueberschriften duerfen niemals mitten im Wort
   umbrechen. Layout/Fonthoehe muss sich dem Platz anpassen, nicht das Wort. */
h1,h2,h3,.sec-h1,.sec-h2,.sec-h3,.hero-title,.hero-product h1,.bd-heading h1{
  overflow-wrap:normal!important;
  word-break:normal!important;
  hyphens:none!important;
  -webkit-hyphens:none!important;
  text-wrap:balance;
  min-width:0;
}