/* =========================================================
   TerrassenGlück — Design System
   ========================================================= */

/* Manrope selbst gehostet (SIL Open Font License). Vorher kam die Schrift von
   fonts.googleapis.com — das war vor jeder Cookie-Einwilligung ein Request an
   Google und damit eine Übertragung der Besucher-IP an einen Dritten. Nur die
   Subsets latin und latin-ext, mehr braucht eine deutsche Seite nicht. */
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/manrope-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/manrope-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/manrope-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/manrope-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/manrope-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/manrope-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/manrope-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/manrope-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:800;font-display:swap;src:url(/assets/fonts/manrope-800-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:800;font-display:swap;src:url(/assets/fonts/manrope-800-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}

:root {
  /* Brand colors */
  --color-anthracite: #252525;
  --color-anthracite-soft: #3a3a38;
  --color-sand: #D8C7AE;
  --color-sand-light: #F1EAE0;
  --color-green: #7A8B6A;
  --color-green-dark: #5E6E51;
  --color-white: #FFFFFF;
  --color-off-white: #FAF8F5;
  --color-gray: #7B7B78;
  --color-gray-light: #E7E3DC;
  --color-border: #DDD7CC;
  --color-gold-light: #EBDFB9;
  --color-gold: #C9A961;
  --color-gold-dark: #A9823F;

  /* Semantic */
  --bg-page: var(--color-off-white);
  --bg-dark: var(--color-anthracite);
  --text-main: var(--color-anthracite);
  --text-muted: var(--color-gray);
  --text-on-dark: #F5F2EC;
  --accent: var(--color-green);
  --cta-bg: linear-gradient(135deg, var(--color-gold-light), var(--color-gold) 55%, var(--color-gold-dark));
  --cta-bg-hover: linear-gradient(135deg, var(--color-gold), var(--color-gold-dark) 55%, #8a6b32);
  --cta-text: var(--color-anthracite);

  /* Type */
  --font-main: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --step-1: clamp(0.85rem, 0.82rem + 0.15vw, 0.95rem);
  --step-2: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --step-3: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);
  --step-4: clamp(1.75rem, 1.5rem + 1vw, 2.25rem);
  --step-5: clamp(2.25rem, 1.8rem + 1.8vw, 3.25rem);
  --step-6: clamp(2.75rem, 2.1rem + 2.8vw, 4.5rem);

  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.75rem;
  --space-lg: 3rem;
  --space-xl: 5rem;
  --space-xxl: 8rem;

  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --shadow-sm: 0 2px 10px rgba(37,37,37,0.06);
  --shadow-md: 0 12px 40px rgba(37,37,37,0.12);
  --container-w: 1240px;
  --container-narrow: 820px;
  --header-h: 84px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* Ohne das überstimmt jede eigene display-Regel (z. B. .btn oder .consent-details)
   das hidden-Attribut, und per JS versteckte Elemente bleiben sichtbar. */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
body {
  margin: 0;
  font-family: var(--font-main);
  color: var(--text-main);
  background: var(--bg-page);
  font-size: var(--step-2);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
button { font: inherit; background: none; border: none; cursor: pointer; color: inherit; }
h1, h2, h3, h4 { font-weight: 800; line-height: 1.15; margin: 0 0 var(--space-sm); letter-spacing: -0.01em; overflow-wrap: break-word; word-break: break-word; hyphens: auto; }
/* Silbentrennung in Überschriften nur auf schmalen Bildschirmen, wo lange
   Wörter sonst überlaufen. Auf Desktop trennte der Browser lieber
   "au-tomatisch", statt das Wort in die nächste Zeile zu nehmen. */
@media (min-width: 861px) { h1, h2, h3 { hyphens: manual; -webkit-hyphens: manual; } }
h1 { font-size: var(--step-6); }
h2 { font-size: var(--step-5); }
h3 { font-size: var(--step-4); }
p { margin: 0 0 var(--space-sm); }
p:last-child { margin-bottom: 0; }

.skip-link { position: absolute; left: -999px; top: 0; background: var(--color-anthracite); color: #fff; padding: 12px 20px; z-index: 200; }
.skip-link:focus { left: 12px; top: 12px; }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--container-w); margin: 0 auto; padding: 0 var(--space-md); }
.container-narrow { max-width: var(--container-narrow); }
.section { padding: var(--space-xl) 0; }
.section-tight { padding: var(--space-lg) 0; }
.text-center { text-align: center; }
.section-head { max-width: 720px; margin: 0 0 var(--space-lg); }
.section-head.text-center { margin-left: auto; margin-right: auto; }
.section-title { font-size: var(--step-5); margin-bottom: var(--space-xs); }
.section-subtitle { color: var(--text-muted); font-size: var(--step-3); margin: 0; }
.eyebrow { text-transform: uppercase; letter-spacing: 0.14em; font-size: var(--step-1); font-weight: 700; color: var(--color-sand); margin: 0 0 var(--space-xs); }
.eyebrow-dark { color: var(--accent); }
.bg-dark { background: var(--bg-dark); color: var(--text-on-dark); }
.bg-sand { background: var(--color-sand-light); }
.bg-white { background: var(--color-white); }

.grid { display: grid; gap: var(--space-md); }
.grid > * { min-width: 0; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 980px) { .grid-3, .grid-4, .grid-5 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid-2, .grid-3, .grid-4, .grid-5 { grid-template-columns: 1fr; } }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 15px 30px; border-radius: 999px; font-weight: 700;
  font-size: var(--step-1); letter-spacing: 0.04em; text-transform: uppercase;
  transition: background .2s ease, color .2s ease, transform .15s ease, border-color .2s ease, box-shadow .2s ease;
  border: 2px solid transparent; white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--cta-bg); color: var(--cta-text); box-shadow: 0 4px 14px rgba(169,130,63,0.35); }
.btn-primary:hover { background: var(--cta-bg-hover); box-shadow: 0 6px 18px rgba(169,130,63,0.45); }
.btn-outline { border-color: var(--color-gold-dark); color: var(--color-gold-dark); }
.btn-outline:hover { background: var(--cta-bg); border-color: var(--color-gold); color: var(--color-anthracite); box-shadow: 0 4px 14px rgba(169,130,63,0.3); }
.btn-outline-light { border-color: var(--color-gold-light); color: var(--color-gold-light); }
.btn-outline-light:hover { background: var(--cta-bg); border-color: var(--color-gold); color: var(--color-anthracite); }
.btn-lg { padding: 18px 36px; font-size: var(--step-2); }
.btn-sm { padding: 10px 18px; font-size: 0.8rem; }
.btn-block { width: 100%; }
.btn-icon { padding: 12px; width: 48px; height: 48px; flex: none; display: inline-flex; align-items: center; justify-content: center; }
/* Echte Symbole statt Emoji: Emoji werden je nach Gerät völlig anders gezeichnet,
   und das Sprechblasen-Emoji war vom KI-Berater daneben nicht zu unterscheiden. */
.btn-icon svg { width: 20px; height: 20px; }
.link-arrow { font-weight: 700; color: var(--accent); font-size: var(--step-1); }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 100; background: rgba(250,248,245,0.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--color-border); }
.header-inner { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); }
.logo { display: flex; align-items: center; flex: none; background: var(--color-anthracite); padding: 8px 16px; border-radius: var(--radius-md); }
.logo-img { height: 34px; width: auto; display: block; }
.footer-logo-img { height: 44px; background: none; padding: 0; }
.main-nav { flex: 1; display: flex; justify-content: center; }
.main-nav > ul { display: flex; gap: 2px; }
.nav-item { position: relative; }
.nav-link { padding: 10px 14px; font-weight: 600; font-size: 0.94rem; border-radius: var(--radius-sm); display: inline-flex; align-items: center; gap: 6px; }
.nav-link:hover, .nav-link.is-active { color: var(--color-green-dark); }
.chev { width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin-top: -3px; }
/* Die gesamte Aufklapp-Mechanik gilt ausdrücklich nur ab Desktop-Breite.
   Ohne diese Kapselung griff die Mittigstellung (translate(-50%)) auch auf dem
   Handy: Touch-Geräte lösen beim Antippen den Hover-Zustand aus, das Untermenü
   sprang dadurch um seine halbe Breite nach links aus dem Bild und schnitt die
   Einträge ab. */
/* 1101px = Gegenstück zur Hamburger-Schwelle (max-width: 1100px) weiter
   unten. Beide müssen zusammenpassen: Greift die schwebende Desktop-Variante
   auch im Hamburger-Bereich, hängt das Untermenü im mobilen Menü absolut
   positioniert in der Luft. */
@media (min-width: 1101px) {
  .nav-dropdown {
    position: absolute; top: calc(100% + 6px); left: 50%; transform: translate(-50%, 6px);
    background: #fff; border-radius: var(--radius-md);
    box-shadow: 0 18px 48px rgba(37,37,37,.16), 0 2px 8px rgba(37,37,37,.06);
    border: 1px solid var(--color-border);
    padding: 12px; min-width: 268px;
    opacity: 0; visibility: hidden; transition: opacity .18s ease, transform .18s ease, visibility .18s;
  }
  /* Unsichtbare Brücke zum Menüpunkt: Ohne sie klappt das Menü zu, sobald die
     Maus den Spalt zwischen Beschriftung und Panel überquert. */
  .nav-dropdown::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
  .nav-item.has-children:hover .nav-dropdown,
  .nav-item.has-children:focus-within .nav-dropdown { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
  .nav-dropdown--wide { min-width: 520px; }
  .nav-dropdown--wide ul { grid-template-columns: 1fr 1fr; column-gap: 6px; }
}
.nav-dropdown ul { display: grid; gap: 1px; }
.nav-dropdown li a {
  display: block; padding: 10px 13px; border-radius: var(--radius-sm);
  font-weight: 500; font-size: 0.92rem; line-height: 1.3;
  transition: background .14s ease, color .14s ease;
}
.nav-dropdown li a:hover { background: var(--color-sand-light); color: var(--color-green-dark); }
.nav-dropdown-all {
  display: block; margin-top: 8px; padding: 9px 13px;
  border-top: 1px solid var(--color-border);
  font-size: 0.82rem; font-weight: 700; letter-spacing: .02em;
  color: var(--color-green-dark);
}
.nav-dropdown-all:hover { color: var(--color-gold-dark); }
@media (max-width: 1100px) { .nav-dropdown--wide { min-width: 420px; } }
.header-actions { display: flex; align-items: center; gap: var(--space-sm); flex: none; }
.phone-link { font-weight: 700; white-space: nowrap; }
/* Logo, neun Menüpunkte, Telefonnummer und CTA passen zusammen nicht in die
   Kopfzeile: Sie brauchen rund 1450px, der Inhaltsbereich ist aber auf 1240px
   begrenzt — ein breiterer Bildschirm hilft deshalb nicht. Ohne diese Regel
   lief die Kopfzeile über und erzeugte waagerechtes Scrollen der ganzen Seite,
   am deutlichsten auf verbreiteten 1280er-Laptops. Die Telefonnummer weicht
   (sie bleibt im Fuß, im mobilen Menü und im Beraterfenster erreichbar), die
   Menüabstände werden enger. Sollen Nummer und volle Abstände zurück, müssten
   Menüpunkte zusammengelegt werden. */
@media (min-width: 1101px) {
  /* Statt die Nummer ganz zu entfernen, bleibt der Anrufweg als Symbol stehen —
     für ein Handwerksunternehmen ist der Telefonkontakt zu wichtig, um ihn aus
     der Kopfzeile zu verbannen. Ab 1560px ist wieder Platz für die Ziffern. */
  .phone-link-number { display: none; }
  .phone-link { display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--color-border); }
  .phone-link:hover { background: var(--color-sand-light); }
  .nav-link { padding: 10px 9px; font-size: 0.89rem; }
}
@media (min-width: 1561px) {
  .phone-link-number { display: inline; }
  .phone-link { width: auto; height: auto; border: 0; border-radius: 0; gap: 7px; }
  .phone-link:hover { background: none; }
  .nav-link { padding: 10px 14px; font-size: 0.94rem; }
}
.phone-link-icon { width: 17px; height: 17px; flex: none; }
.nav-toggle { display: none; flex-direction: column; gap: 5px; width: 34px; }
.nav-toggle span { display: block; height: 2px; background: var(--color-anthracite); border-radius: 2px; }
.mobile-nav { display: none; }

/* 1100 statt 980: Logo, sechs Menüpunkte, Telefonsymbol und CTA brauchen
   rund 1120px. Zwischen 981 und 1100px (iPad quer, kleine Laptops) lief die
   Kopfzeile über - der CTA ragte aus dem Fenster, alle Menüpunkte brachen
   zweizeilig um. */
@media (max-width: 1100px) {
  .main-nav, .phone-link, .header-actions .btn-primary { display: none; }
  .nav-toggle { display: flex; }
  .mobile-nav { display: block; position: fixed; inset: var(--header-h) 0 0 0; background: var(--bg-page); z-index: 99; padding: var(--space-md); overflow-y: auto; transform: translateX(100%); transition: transform .25s ease; }
  /* Offen liegt das Menue ueber dem Cookie-Dialog (z-index 200). Vorher lag
     der Dialog darueber, in derselben dunklen Farbe: Wer im Menue auf
     "Modelle vergleichen" tippte, traf das "Impressum" des Dialogs. Der
     Dialog ist nach dem Schliessen des Menues wieder da. */
  .mobile-nav.is-open { transform: translateX(0); z-index: 210; }
  .mobile-nav ul { display: flex; flex-direction: column; margin-bottom: var(--space-md); }
  .mobile-nav .nav-link, .mobile-nav > ul > li > a { padding: 14px 4px; border-bottom: 1px solid var(--color-border); font-weight: 700; font-size: 1.05rem; width: 100%; text-align: left; }
  /* Aufklappen im Fluss, einspaltig. Die schwebende Desktop-Variante samt
     Mittigstellung greift hier nicht mehr — sie liegt in ihrer eigenen
     Media Query. */
  .mobile-nav .nav-dropdown { display: none; padding-left: var(--space-sm); }
  .mobile-nav .nav-item.is-expanded .nav-dropdown { display: block; }
  .mobile-nav .nav-dropdown ul { margin-bottom: 0; }
  .mobile-nav .nav-dropdown-all { padding-left: 4px; }
  .mobile-nav .phone-link { display: block; margin-top: var(--space-md); text-align: center; font-size: 1.1rem; }
}

/* ---------- Hero ---------- */
@media (max-width: 600px) {
  :root {
    --step-5: clamp(1.5rem, 1.1rem + 3.5vw, 2.1rem);
    --step-6: clamp(1.6rem, 1.1rem + 4vw, 2.25rem);
  }
}

.hero { position: relative; min-height: 92vh; display: flex; align-items: flex-end; overflow: hidden; }
.hero-media { position: absolute; inset: 0; background: linear-gradient(135deg, #3d4a35 0%, var(--color-anthracite) 55%, #1c1c1c 100%); overflow: hidden; }
.hero-media::after { content:""; position:absolute; inset:0; background: radial-gradient(circle at 75% 30%, rgba(216,199,174,0.28), transparent 55%); }
.hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-media.hero-media-slider img.hero-slide {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; animation-name: hero-slide-cycle; animation-duration: 15s;
  animation-iteration-count: infinite; animation-timing-function: ease-in-out;
}
@keyframes hero-slide-cycle {
  0% { opacity: 0; }
  4% { opacity: 1; }
  29% { opacity: 1; }
  35% { opacity: 0; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-media.hero-media-slider img.hero-slide { animation: none; opacity: 0; }
  .hero-media.hero-media-slider img.hero-slide:first-child { opacity: 1; }
}
.hero-rain { position: absolute; inset: 0; pointer-events: none; }
.hero-scrim { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.05) 55%); }
.hero-content { position: relative; color: #fff; padding-bottom: var(--space-xl); max-width: 760px; }
.hero .eyebrow { color: var(--color-sand); }
.hero h1 { color: #fff; }
.hero-subtitle { font-size: var(--step-3); color: rgba(255,255,255,0.88); max-width: 560px; }
.hero .cta-row { display: flex; gap: var(--space-sm); flex-wrap: wrap; margin-top: var(--space-md); }
/* Auf schmalen Handys ragte "MEINEN LIEBLINGSPLATZ PLANEN" (nowrap, 36px
   Innenabstand) über den Rand und wurde vom Hero abgeschnitten. Volle Breite,
   Umbruch erlaubt, weniger Innenabstand. */
@media (max-width: 480px) {
  .hero .cta-row .btn { width: 100%; white-space: normal; text-align: center; padding-left: 20px; padding-right: 20px; line-height: 1.3; }
}
/* Modellnamen nicht trennen: "Ul-traline Classic" im H1 sah nach Tippfehler aus. */
.no-hyphen { hyphens: manual; -webkit-hyphens: manual; }

.hero-weather { margin-top: var(--space-md); }
.hero-weather-btn {
  display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.35); color: #fff; border-radius: 999px; padding: 10px 18px;
  font-size: 0.85rem; font-weight: 600; cursor: pointer; font-family: inherit; transition: background .2s ease;
}
.hero-weather-btn:hover { background: rgba(255,255,255,0.2); }
.hero-weather-btn:disabled { opacity: 0.7; cursor: default; }
.hero-weather-btn svg { width: 18px; height: 18px; flex: none; }
.hero-weather-result { color: rgba(255,255,255,0.92); font-size: 0.9rem; margin: 0; max-width: 520px; }
.hero-weather-result a { color: var(--color-gold-light); text-decoration: underline; }
.hero-weather-result a:hover { color: var(--color-gold); }
.hero-page { min-height: 56vh; }
@media (max-width: 620px) { .hero { min-height: 78vh; } }

/* per-page hero art variation via data-image (placeholder gradients) */
.hero[data-image="hero-designline"] .hero-media,
.product-card-media[data-image="product-designline"] { background: linear-gradient(135deg, #52604a, #252525 60%); }
.hero[data-image="hero-trendline"] .hero-media,
.product-card-media[data-image="product-trendline"] { background: linear-gradient(135deg, #6b5d47, #252525 60%); }
.hero[data-image="hero-skyline"] .hero-media,
.product-card-media[data-image="product-skyline"] { background: linear-gradient(135deg, #4a5560, #1b1b1b 60%); }
.hero[data-image="hero-orangeline"] .hero-media,
.product-card-media[data-image="product-orangeline"] { background: linear-gradient(135deg, #7a8b6a, #24291f 60%); }
.hero[data-image="hero-gartenzimmer-topline"] .hero-media,
.product-card-media[data-image="product-gartenzimmer-topline"] { background: linear-gradient(135deg, #8a7256, #252525 60%); }

/* ---------- Trust bar ---------- */
.trust-line { padding: var(--space-sm) var(--space-md); font-size: 0.8rem; letter-spacing: 0.03em; color: var(--text-muted); background: var(--bg-page); }
.trust-bar { background: var(--color-anthracite); color: #fff; padding: var(--space-sm) 0; }
.trust-bar ul { display: flex; flex-wrap: wrap; gap: var(--space-lg); justify-content: center; font-size: 0.9rem; font-weight: 600; }
.trust-bar li { display: flex; align-items: center; gap: 8px; }
.trust-check { color: var(--color-green); font-weight: 800; }

/* ---------- Cards ---------- */
.product-card, .region-card, .article-card, .path-card {
  background: #fff; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm);
  display: block; transition: transform .2s ease, box-shadow .2s ease; border: 1px solid var(--color-border);
}
.product-card:hover, .region-card:hover, .article-card:hover, .path-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.product-card-media { aspect-ratio: 4/3; background: linear-gradient(135deg,#5c6b52,#252525); overflow: hidden; }
.product-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Image gallery ---------- */
.image-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.image-gallery .gallery-item {
  display: block; width: 100%; padding: 0; border: none; background: none; cursor: zoom-in;
  border-radius: var(--radius-md); overflow: hidden;
}
.image-gallery img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius-md); display: block; transition: transform .3s ease; }
.image-gallery .gallery-item:hover img { transform: scale(1.04); }
.image-gallery .gallery-item:first-child img { aspect-ratio: auto; }
.image-gallery .gallery-item:first-child { grid-column: span 2; grid-row: span 2; }
.image-gallery .gallery-item:first-child img { height: 100%; aspect-ratio: 8/7; }
@media (max-width: 720px) { .image-gallery { grid-template-columns: repeat(2, 1fr); } .image-gallery .gallery-item:first-child { grid-column: span 2; grid-row: span 1; } .image-gallery .gallery-item:first-child img { aspect-ratio: 16/9; } }

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center;
  background: rgba(15,15,15,0.94); padding: var(--space-md);
}
.lightbox.is-open { display: flex; }
.lightbox-img { max-width: min(92vw, 1100px); max-height: 86vh; object-fit: contain; border-radius: var(--radius-sm); display: block; }
.lightbox-close, .lightbox-prev, .lightbox-next {
  position: absolute; background: rgba(255,255,255,0.1); color: #fff; border: 1px solid rgba(255,255,255,0.3);
  border-radius: 999px; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .2s ease;
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover { background: rgba(255,255,255,0.22); }
.lightbox-close { top: var(--space-md); right: var(--space-md); width: 44px; height: 44px; font-size: 1.5rem; line-height: 1; }
.lightbox-prev, .lightbox-next { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; font-size: 1.75rem; }
.lightbox-prev { left: var(--space-md); }
.lightbox-next { right: var(--space-md); }
.lightbox-counter { position: absolute; bottom: var(--space-md); left: 50%; transform: translateX(-50%); color: rgba(255,255,255,0.75); font-size: 0.85rem; letter-spacing: 0.04em; }
@media (max-width: 620px) {
  .lightbox-prev, .lightbox-next { width: 42px; height: 42px; font-size: 1.4rem; }
  .lightbox-close { width: 38px; height: 38px; }
}
.product-card-body, .article-card { padding: var(--space-md); }
.product-tagline { color: var(--text-muted); font-size: var(--step-1); }
.region-card { padding: var(--space-md); }
.article-cat { text-transform: uppercase; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; color: var(--accent); margin-bottom: 6px; }
.path-card { padding: var(--space-lg) var(--space-md); text-align: center; }
.path-icon { margin-bottom: var(--space-sm); display: block; color: var(--color-green); }
.path-icon svg { width: 32px; height: 32px; }
.article-card .path-icon { margin-left: auto; margin-right: auto; }

/* ---------- CTA band ---------- */
.cta-band { padding: var(--space-xl) 0; }
.cta-band-dark { background: var(--color-anthracite); color: #fff; }
.cta-band-sand { background: var(--color-sand-light); }
.cta-band-green { background: var(--color-green); color: #fff; }
.cta-band-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); flex-wrap: wrap; }
.cta-band-inner h2 { margin-bottom: 6px; }
.cta-band-inner p { opacity: 0.85; margin: 0; max-width: 480px; }

/* ---------- FAQ ---------- */
.faq-list { border-top: 1px solid var(--color-border); }
.faq-item { border-bottom: 1px solid var(--color-border); }
.faq-question { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: var(--space-sm) 0; font-weight: 700; font-size: var(--step-2); text-align: left; }
.faq-icon { font-size: 1.4rem; color: var(--accent); transition: transform .2s ease; flex: none; margin-left: var(--space-sm); }
.faq-question[aria-expanded="true"] .faq-icon { transform: rotate(45deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height .25s ease; }
.faq-answer p { padding-bottom: var(--space-sm); color: var(--text-muted); }

.faq-search { margin-bottom: var(--space-lg); }
.faq-search input {
  width: 100%; padding: 14px 18px; border: 1px solid var(--color-border); border-radius: 999px;
  font-size: var(--step-1); font-family: inherit; background: #fff;
}
.faq-search input:focus { outline: 2px solid var(--color-gold); outline-offset: 2px; }
.faq-search-empty { text-align: center; color: var(--text-muted); margin-bottom: var(--space-lg); }
.faq-category { margin-bottom: var(--space-lg); }
.faq-category-title { font-size: var(--step-2); margin-bottom: var(--space-xs); }
.faq-category-count { color: var(--text-muted); font-weight: 400; font-size: 0.8em; }

/* ---------- Standort-Widget ---------- */
.standort-select {
  margin-top: var(--space-md); padding: 14px 40px 14px 20px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.3); background: rgba(255,255,255,0.08); color: #fff;
  font-size: var(--step-1); font-family: inherit; font-weight: 600; cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 18px;
}
.standort-select:focus { outline: 2px solid var(--color-gold); outline-offset: 2px; }
.standort-select option { color: var(--color-anthracite); }
.standort-result a { color: var(--color-gold-light); }
.standort-result a:hover { color: var(--color-gold); }
.daylight-readout { font-size: 0.9rem; color: var(--color-gold-light); font-weight: 600; margin-top: var(--space-xs); }

/* ---------- Breadcrumbs ---------- */
.breadcrumbs { padding: var(--space-sm) var(--space-md); font-size: 0.85rem; color: var(--text-muted); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 6px; }
.breadcrumbs li:not(:last-child)::after { content: "/"; margin-left: 6px; color: var(--color-border); }
.breadcrumbs a:hover { color: var(--color-green-dark); }

/* ---------- Footer ---------- */
.site-footer { background: var(--color-anthracite); color: #d9d6cf; padding-top: var(--space-xl); }
.footer-top { display: grid; grid-template-columns: 1.4fr repeat(5, 1fr); gap: var(--space-lg); padding-bottom: var(--space-lg); border-bottom: 1px solid rgba(255,255,255,0.1); }
.footer-claim { font-style: italic; color: var(--color-sand); margin: var(--space-xs) 0; }
.footer-contact a { text-decoration: underline; text-underline-offset: 3px; }
.footer-social { margin-top: var(--space-sm); }
.footer-social-link {
  display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
  border-radius: 50%; background: rgba(255,255,255,0.1); color: #fff; transition: background .2s ease;
}
.footer-social-link:hover { background: var(--color-gold); color: var(--color-anthracite); }

.share-row { margin-top: var(--space-md); display: flex; align-items: center; justify-content: center; gap: var(--space-sm); flex-wrap: wrap; }
.share-btn {
  display: inline-flex; align-items: center; gap: 8px; background: none; border: 1px solid var(--color-border);
  border-radius: 999px; padding: 10px 18px; font-size: 0.85rem; font-weight: 600; font-family: inherit;
  color: var(--color-anthracite); cursor: pointer; transition: background .2s ease, border-color .2s ease;
}
.share-btn:hover { background: var(--bg-page); border-color: var(--color-gold); }
.share-btn svg { width: 18px; height: 18px; flex: none; }
.share-copied { font-size: 0.85rem; color: var(--color-green-dark); font-weight: 600; }
.footer-col h2 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-sand); margin-bottom: var(--space-sm); }
.footer-col li { margin-bottom: 8px; }
.footer-col a:hover { color: #fff; }
.footer-regions { padding: var(--space-md) 0; border-bottom: 1px solid rgba(255,255,255,0.1); font-size: 0.85rem; display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-md); }
.footer-regions a { text-decoration: underline; text-underline-offset: 3px; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding: var(--space-md) 0; font-size: 0.82rem; flex-wrap: wrap; gap: var(--space-sm); }
.footer-legal { display: flex; gap: var(--space-md); }
/* Sechs Spalten passen erst ab ~1300px: Bei 1024px (iPad quer) drückte der
   Footer mit seinen langen Linktexten die Seite auf 1246px Breite und
   erzeugte waagerechtes Scrollen. Dazwischen drei Spalten, Marke oben quer. */
@media (max-width: 1300px) { .footer-top { grid-template-columns: repeat(3, 1fr); } .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 980px) { .footer-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .footer-top { grid-template-columns: 1fr; } }

/* ---------- Mobile sticky CTA ---------- */
.mobile-sticky-cta { display: none; }
@media (max-width: 720px) {
  .mobile-sticky-cta { display: flex; gap: 8px; position: fixed; bottom: 0; left: 0; right: 0; z-index: 90; padding: 10px; background: rgba(250,248,245,0.96); backdrop-filter: blur(8px); border-top: 1px solid var(--color-border); }
  body { padding-bottom: 70px; }
}

/* ---------- Forms ---------- */
.field { margin-bottom: var(--space-md); text-align: left; }
.field label { display: block; font-weight: 700; font-size: 0.85rem; margin-bottom: 6px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 14px; border: 1.5px solid var(--color-border); border-radius: var(--radius-sm);
  font: inherit; background: #fff; color: var(--text-main);
}
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--color-green); outline-offset: 1px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }
.field-hint { font-size: 0.8rem; color: var(--text-muted); margin-top: var(--space-xs); }

.sketch-tool { margin-top: var(--space-md); }
.sketch-canvas {
  width: 100%; max-width: 400px; height: auto; aspect-ratio: 320 / 220; display: block;
  border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: #fff;
  cursor: crosshair; touch-action: none;
}
.sketch-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); margin-top: var(--space-xs); flex-wrap: wrap; }
.sketch-readout { font-size: 0.85rem; color: var(--text-muted); margin: 0; }

/* ---------- Option cards (configurator choices) ---------- */
/* 190px statt 150px: Bei vier Spalten waren die Kacheln so schmal, dass auch
   mittellange Begriffe wie "Glas-Schiebewände" getrennt wurden. Drei Spalten
   lassen alles bis auf die laengsten Komposita in einer Zeile stehen. */
.option-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); grid-auto-rows: 1fr; gap: 12px; }
.option-card { position: relative; display: flex; }
.option-card input { position: absolute; opacity: 0; }
.option-card label {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: var(--space-sm); border: 2px solid var(--color-border); border-radius: var(--radius-md);
  cursor: pointer; font-weight: 700; text-align: center; transition: border-color .15s ease, background .15s ease;
  /* Lange deutsche Komposita wie "Terrassenüberdachung" sind breiter als eine
     Rasterspalte und liefen sonst aus der Kachel heraus über die Nachbarkachel.
     flex sorgt zugleich dafuer, dass alle Kacheln einer Reihe gleich hoch sind
     statt je nach Zeilenumbruch unterschiedlich. */
  overflow-wrap: break-word; hyphens: auto;
}
.option-card input:checked + label { border-color: var(--color-green); background: #F1F4EE; color: var(--color-green-dark); }
.option-card label:hover { border-color: var(--color-green); }
.option-desc { display: block; font-weight: 500; font-size: 0.78rem; color: var(--text-muted); margin-top: 4px; }

/* ---------- Configurator ---------- */
.configurator { background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); max-width: 780px; margin: 0 auto; overflow: hidden; border: 1px solid var(--color-border); }
.configurator-header { padding: var(--space-md) var(--space-lg) 0; }
.progress-track { height: 6px; background: var(--color-gray-light); border-radius: 4px; overflow: hidden; margin: var(--space-sm) 0 var(--space-md); }
.progress-bar { height: 100%; background: var(--color-green); width: 10%; transition: width .3s ease; }
.progress-label { font-size: 0.8rem; color: var(--text-muted); font-weight: 700; }
.configurator-body { padding: 0 var(--space-lg) var(--space-lg); min-height: 320px; }
.config-step { display: none; }
.config-step.is-active { display: block; animation: fadein .25s ease; }
@keyframes fadein { from { opacity: 0; transform: translateY(6px);} to { opacity: 1; transform: translateY(0);} }
.config-step h2 { font-size: var(--step-4); margin-bottom: var(--space-md); }
.configurator-nav { display: flex; justify-content: space-between; align-items: center; padding: var(--space-md) var(--space-lg); border-top: 1px solid var(--color-border); background: var(--color-sand-light); }
/* Auf schmalen Displays fressen 48px Innenabstand je Seite ein Drittel der
   Breite: von 317px blieben nur 221px fuer die Antwortkacheln. */
@media (max-width: 600px) {
  .configurator-header { padding: var(--space-md) var(--space-sm) 0; }
  .configurator-body { padding: 0 var(--space-sm) var(--space-md); }
  .configurator-nav { padding: var(--space-sm); }
}
.config-note { text-align: center; font-size: 0.82rem; color: var(--text-muted); margin-top: var(--space-sm); }
.summary-list { list-style: none; padding: 0; margin: 0 0 var(--space-md); }
.summary-list li { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px dashed var(--color-border); font-size: 0.92rem; }
.summary-list li strong { color: var(--text-main); }
.config-success { text-align: center; padding: var(--space-lg) 0; }
.config-success .icon-check { width: 64px; height: 64px; border-radius: 50%; background: var(--color-green); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 2rem; margin: 0 auto var(--space-md); }
.config-success .icon-error { background: #c0392b; }
.hp-field { position: absolute !important; left: -9999px !important; top: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Comparison table ---------- */
.compare-table-wrap { overflow-x: auto; }
.compare-table { width: 100%; border-collapse: collapse; min-width: 680px; }
.compare-table th, .compare-table td { padding: 14px 18px; border-bottom: 1px solid var(--color-border); text-align: left; font-size: 0.92rem; }
.compare-table th { background: var(--color-sand-light); font-weight: 800; }
.compare-table td:first-child, .compare-table th:first-child { font-weight: 700; background: var(--color-off-white); position: sticky; left: 0; }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .5s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ---------- Storytelling / split sections ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl); align-items: center; }
.split-media { aspect-ratio: 4/3; border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--color-sand), var(--color-green)); }
.split.reverse { direction: rtl; }
.split.reverse > * { direction: ltr; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } .split.reverse { direction: ltr; } }
blockquote.story-quote { font-size: var(--step-4); font-style: italic; font-weight: 600; max-width: 780px; margin: 0 auto; text-align: center; line-height: 1.4; }
blockquote.story-quote cite { display: block; font-style: normal; font-weight: 500; font-size: var(--step-1); color: var(--text-muted); margin-top: var(--space-sm); }

/* ---------- Feature list ---------- */
.feature-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-sm) var(--space-lg); }
.feature-list li { display: flex; gap: 10px; align-items: flex-start; }
.feature-list li::before { content: "✓"; color: var(--color-green); font-weight: 800; flex: none; }
@media (max-width: 620px) { .feature-list { grid-template-columns: 1fr; } }

.fit-check { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); align-items: start; }
.fit-no-list { display: flex; flex-direction: column; gap: var(--space-sm); list-style: none; }
.fit-no-list li { display: flex; gap: 10px; align-items: flex-start; }
.fit-no-list li::before { content: "→"; color: var(--text-muted); font-weight: 800; flex: none; }
.fit-no-list a { font-weight: 600; }
@media (max-width: 780px) { .fit-check { grid-template-columns: 1fr; gap: var(--space-md); } }

/* ---------- Spec table ---------- */
.spec-table { width: 100%; border-collapse: collapse; }
.spec-table tr { border-bottom: 1px solid var(--color-border); }
.spec-table th, .spec-table td { text-align: left; padding: 12px 0; font-size: 0.92rem; }
.spec-table th { width: 40%; color: var(--text-muted); font-weight: 600; }

.zone-table { width: 100%; border-collapse: collapse; margin-top: var(--space-md); }
.zone-table th, .zone-table td { text-align: left; padding: 10px 12px; font-size: 0.92rem; border-bottom: 1px solid var(--color-border); }
.zone-table thead th { color: var(--text-muted); font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; }
.zone-table-wrap { overflow-x: auto; }
.spec-disclaimer { background: var(--color-sand-light); border-radius: var(--radius-md); padding: var(--space-sm) var(--space-md); font-size: 0.85rem; color: var(--text-muted); margin-top: var(--space-md); }

/* ---------- Steps (how it works) ---------- */
.season-message { color: var(--text-muted); font-size: var(--step-1); }

.steps-list { counter-reset: step; display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-md); }
.steps-list li { counter-increment: step; position: relative; padding-top: 50px; }
.steps-list li::before { content: counter(step); position: absolute; top: 0; left: 0; width: 38px; height: 38px; border-radius: 50%; background: var(--color-anthracite); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; }
@media (max-width: 980px) { .steps-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .steps-list { grid-template-columns: 1fr; } }

/* ---------- Consent banner ---------- */
/* Nur der Textbereich scrollt, die Entscheidungs-Buttons bleiben immer sichtbar:
   Mit aufgeklappten Details ist der Dialog auf dem Handy über 1700px hoch —
   sonst müsste man alles durchlesen, um überhaupt ablehnen zu können. */
.consent-banner { position: fixed; bottom: 0; left: 0; right: 0; z-index: 200; background: var(--color-anthracite); color: #fff; padding: var(--space-md); box-shadow: 0 -8px 32px rgba(0,0,0,0.28); max-height: 92vh; display: flex; }
.consent-scroll { overflow-y: auto; min-height: 0; display: flex; flex-direction: column; gap: var(--space-sm); }
.consent-inner { max-width: 820px; width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-sm); min-height: 0; }
.consent-inner p { margin: 0; font-size: 0.88rem; line-height: 1.6; color: rgba(255,255,255,0.85); }
.consent-head h2 { font-size: var(--step-2); margin: 0 0 8px; color: #fff; }
/* Klebend am unteren Rand: Mit aufgeklappten Details ist der Dialog auf dem
   Handy über 1700px hoch — ohne sticky müsste man erst alles durchscrollen,
   um überhaupt ablehnen zu können. */
.consent-actions { display: flex; gap: 10px; flex-wrap: wrap; flex: none; }
/* Gleiche Breite für alle Optionen: Ablehnen darf nicht kleiner oder schwerer
   erreichbar sein als Zustimmen. */
.consent-actions .btn { flex: 1 1 150px; justify-content: center; text-align: center; padding-left: 14px; padding-right: 14px; font-size: 0.78rem; letter-spacing: 0.04em; }
.consent-banner .btn-outline { border-color: rgba(255,255,255,0.5); color: #fff; }
.consent-banner .btn-outline:hover { background: rgba(255,255,255,0.15); }
.consent-links { font-size: 0.8rem; }
.consent-links a { color: rgba(255,255,255,0.85); text-decoration: underline; }

/* Aufklappbare Kategorienauswahl */
.consent-details { border-top: 1px solid rgba(255,255,255,0.18); border-bottom: 1px solid rgba(255,255,255,0.18); padding: var(--space-sm) 0; display: flex; flex-direction: column; gap: var(--space-sm); }
.consent-cat { background: rgba(255,255,255,0.06); border-radius: 10px; padding: 14px 16px; }
.consent-cat-head { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 0.95rem; color: #fff; margin-bottom: 6px; }
.consent-cat-head input { width: 18px; height: 18px; accent-color: var(--color-sand); flex: none; }
.consent-cat-head input:disabled { opacity: 0.6; cursor: default; }
.consent-cat > p { font-size: 0.85rem; }
.consent-facts { margin: 10px 0 0; font-size: 0.8rem; color: rgba(255,255,255,0.72); display: grid; grid-template-columns: minmax(110px, auto) 1fr; gap: 4px 14px; }
.consent-facts dt { font-weight: 600; color: rgba(255,255,255,0.9); }
.consent-facts dd { margin: 0; }
.consent-facts code { background: rgba(255,255,255,0.12); border-radius: 4px; padding: 1px 5px; font-size: 0.95em; }
.consent-note { font-size: 0.8rem; }
.consent-note a { color: #fff; text-decoration: underline; }
@media (max-width: 560px) {
  .consent-facts { grid-template-columns: 1fr; gap: 2px; }
  .consent-facts dt { margin-top: 6px; }
  .consent-actions .btn { flex: 1 1 100%; }
}

/* ---------- Content / prose (Ratgeber articles) ---------- */
.prose h2 { font-size: var(--step-4); margin-top: var(--space-lg); }
.prose h3 { font-size: var(--step-3); margin-top: var(--space-md); }
.prose p, .prose ul, .prose ol { color: var(--text-main); }
.prose ul, .prose ol { padding-left: 1.3em; margin-bottom: var(--space-sm); }
.prose li { margin-bottom: 6px; }
.prose a { color: var(--color-green-dark); text-decoration: underline; text-underline-offset: 2px; }
.callout { background: var(--color-sand-light); border-left: 4px solid var(--color-green); border-radius: var(--radius-sm); padding: var(--space-sm) var(--space-md); margin: var(--space-md) 0; }
.article-meta { color: var(--text-muted); font-size: 0.85rem; margin-bottom: var(--space-sm); }
.article-hero-img { aspect-ratio: 21/9; border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--color-sand), var(--color-anthracite)); margin-bottom: var(--space-lg); }

/* ---------- Cost calc results ---------- */
.cost-result { background: var(--color-anthracite); color: #fff; border-radius: var(--radius-lg); padding: var(--space-lg); text-align: center; }
.cost-result .cost-range { font-size: var(--step-6); font-weight: 800; color: var(--color-sand); margin: var(--space-xs) 0; }
.cost-result p.disclaimer { font-size: 0.8rem; color: rgba(255,255,255,0.7); max-width: 520px; margin: var(--space-sm) auto 0; }

/* ---------- 404 ---------- */
.page-404 { text-align: center; padding: var(--space-xxl) 0; }
.page-404 h1 { font-size: var(--step-6); }

/* ---------- Utility ---------- */
.mt-0{margin-top:0} .mb-0{margin-bottom:0}
.text-muted{color:var(--text-muted)}
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.badge { display: inline-block; padding: 4px 12px; border-radius: 20px; background: var(--color-sand-light); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--color-green-dark); }

/* ---------- KI-Verkaufsberater ---------- */
/* Muss vor den display-Regeln stehen: sonst gewinnt ein eigenes display
   gegen das hidden-Attribut, und Panel bzw. Hinweis wären immer sichtbar. */
.ai-advisor [hidden] { display: none !important; }
.ai-advisor { position: fixed; right: 20px; bottom: 20px; z-index: 95; font-size: var(--step-1); }
@media (max-width: 860px) { .ai-advisor { right: 12px; bottom: 76px; } }

.ai-launcher {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 20px; border-radius: 40px;
  background: var(--color-anthracite); color: var(--color-sand);
  font-weight: 700; letter-spacing: .02em;
  box-shadow: var(--shadow-md); transition: transform .2s ease, background .2s ease;
}
.ai-launcher:hover { transform: translateY(-2px); background: var(--color-anthracite-soft); }
.ai-launcher:focus-visible { outline: 3px solid var(--color-gold); outline-offset: 3px; }
.ai-launcher-icon { width: 18px; height: 18px; flex: none; color: var(--color-gold); }
.is-open .ai-launcher { display: none; }
/* Label bleibt auch mobil stehen: Ohne Text war der Knopf nur ein Symbol neben
   dem WhatsApp-Knopf der Sticky-Leiste — beide rund, beide gleich groß, keiner
   erklärte sich. Der kompaktere Zuschnitt hält ihn trotzdem schmal. */
@media (max-width: 860px) {
  .ai-launcher { padding: 11px 16px; font-size: 0.78rem; gap: 7px; }
  .ai-launcher-icon { width: 16px; height: 16px; }
}

.ai-nudge {
  position: absolute; right: 0; bottom: 62px; width: min(300px, calc(100vw - 32px));
  background: var(--color-white); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-md); padding: var(--space-sm);
}
.ai-nudge p { margin: 0 0 10px; line-height: 1.45; }
.ai-nudge-close { position: absolute; top: 4px; right: 8px; color: var(--text-muted); font-size: 1.1rem; line-height: 1; }

.ai-panel {
  display: flex; flex-direction: column;
  width: min(390px, calc(100vw - 24px)); height: min(600px, calc(100vh - 120px));
  background: var(--color-off-white); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow: hidden;
}
@media (max-width: 860px) {
  /* dvh statt vh: vh rechnet auf dem Handy immer mit dem vollen Bildschirm und
     ignoriert die eingeblendete Tastatur — das Panel behielt seine Höhe und
     rutschte zur Hälfte darunter. dvh folgt dem tatsächlich sichtbaren Bereich.
     Die vh-Zeile bleibt als Rückfall für ältere Browser davor stehen.
     --ai-vh wird zusätzlich per JS aus visualViewport gesetzt, weil iOS die
     Tastatur bei dvh nicht zuverlässig einrechnet. */
  .ai-panel { width: calc(100vw - 24px); height: min(78vh, calc(100vh - 140px)); }
  .ai-panel { height: min(78dvh, calc(100dvh - 140px)); }
  .ai-panel { height: var(--ai-panel-h, min(78dvh, calc(100dvh - 140px))); }
}

.ai-panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm);
  padding: 14px 16px; background: var(--color-anthracite); color: var(--text-on-dark);
}
.ai-panel-head p { margin: 0; font-weight: 700; }
.ai-panel-head span { display: block; font-weight: 400; font-size: 0.78rem; color: rgba(255,255,255,0.72); }
.ai-close { color: var(--color-sand); font-size: 1.4rem; line-height: 1; padding: 4px 8px; }
.ai-close:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 2px; }

.ai-messages { flex: 1; overflow-y: auto; padding: var(--space-sm); display: flex; flex-direction: column; gap: 10px; }
.ai-msg { display: flex; }
.ai-msg-user { justify-content: flex-end; }
.ai-bubble { max-width: 85%; padding: 11px 14px; border-radius: var(--radius-md); line-height: 1.5; white-space: pre-wrap; }
.ai-msg-model .ai-bubble { background: var(--color-white); border: 1px solid var(--color-border); }
.ai-msg-user .ai-bubble { background: var(--color-sand-light); border: 1px solid var(--color-sand); }

.ai-typing .ai-bubble { display: flex; gap: 5px; align-items: center; }
.ai-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--color-gray); animation: ai-blink 1.2s infinite ease-in-out; }
.ai-typing span:nth-child(2) { animation-delay: .2s; }
.ai-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes ai-blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }

.ai-product, .ai-price {
  background: var(--color-white); border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-gold); border-radius: var(--radius-md); padding: 13px 15px;
}
.ai-product-alt { border-left-color: var(--color-sand); }
.ai-product-name { margin: 0 0 6px; font-weight: 800; }
.ai-product-reason { margin: 0 0 8px; color: var(--text-muted); line-height: 1.45; }
.ai-product-points { margin: 0 0 10px; display: flex; flex-direction: column; gap: 3px; }
.ai-product-points li { padding-left: 16px; position: relative; line-height: 1.4; }
.ai-product-points li::before { content: "–"; position: absolute; left: 0; color: var(--color-gold-dark); }
.ai-product-link { font-weight: 700; color: var(--color-gold-dark); text-decoration: underline; }

.ai-price { border-left-color: var(--color-green); }
.ai-price-label { margin: 0 0 2px; font-size: 0.72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.ai-price-range { margin: 0; font-size: var(--step-3); font-weight: 800; }
/* Transparenzhinweis als erste Zeile im Verlauf (Art. 50 KI-VO). */
.ai-notice { margin: 0 0 4px; font-size: 0.78rem; color: var(--text-muted); line-height: 1.45; text-align: center; padding: 0 8px; }
.ai-price-note { margin: 4px 0 0; font-size: 0.78rem; color: var(--text-muted); line-height: 1.45; }

.ai-quick { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 var(--space-sm) var(--space-xs); }
.ai-quick-btn {
  padding: 8px 14px; border-radius: 20px; border: 1px solid var(--color-border);
  background: var(--color-white); font-size: 0.82rem; font-weight: 600;
  transition: border-color .15s ease, background .15s ease;
}
.ai-quick-btn:hover { border-color: var(--color-gold); background: var(--color-sand-light); }
.ai-quick-btn:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 2px; }

.ai-cta { display: flex; gap: 8px; padding: 0 var(--space-sm) var(--space-xs); }
.ai-cta-btn { flex: 1; padding: 12px 16px; font-size: 0.8rem; text-align: center; }

.ai-form { display: flex; gap: 8px; padding: var(--space-xs) var(--space-sm) var(--space-sm); border-top: 1px solid var(--color-border); }
.ai-form textarea {
  flex: 1; resize: none; padding: 11px 13px; font: inherit; line-height: 1.4;
  border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-white);
}
.ai-form textarea:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 0; border-color: var(--color-gold); }
.ai-send { padding: 0 16px; border-radius: var(--radius-md); background: var(--color-anthracite); color: var(--color-sand); font-weight: 700; }
.ai-send:disabled { opacity: .5; cursor: default; }
.ai-send:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 2px; }

.ai-panel-foot { padding: 0 var(--space-sm) var(--space-sm); font-size: 0.74rem; color: var(--text-muted); text-align: center; }
.ai-panel-foot a { text-decoration: underline; }
.ai-panel-note { display: inline-block; margin-top: 0.35rem; font-size: 0.68rem; line-height: 1.4; opacity: 0.85; }

/* Hinweis auf den digitalen Berater (Startseite, Abschnitt "Ihr Ziel").
   Weiß statt sandfarben, weil der umgebende Abschnitt selbst sandfarben ist —
   sonst hebt sich der Kasten nicht ab. */
.advisor-hint {
  display: flex; align-items: center; gap: clamp(16px, 3vw, 32px);
  margin-top: var(--space-md); padding: clamp(18px, 3vw, 26px);
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: #fff; text-align: left;
}
.advisor-hint-title { display: flex; align-items: center; gap: 9px; margin: 0 0 .4rem; font-weight: 700; }
.advisor-hint-icon { width: 19px; height: 19px; flex: none; color: var(--color-gold); }
.advisor-hint p:last-of-type { margin-bottom: 0; }
.advisor-hint .btn { flex: none; }
@media (max-width: 700px) {
  .advisor-hint { flex-direction: column; align-items: stretch; }
  .advisor-hint .btn { width: 100%; }
  .advisor-hint-title { align-items: flex-start; }
}
/* Sticky-Leiste ausblenden, solange der Chat offen ist: Auf dem Handy standen
   sonst Chatfenster und CTA-Balken übereinander und nahmen dem Gespräch die
   halbe Höhe. Der Chat hat eigene Kontaktwege im Fuß. */
@media (max-width: 860px) {
  body.ai-open .mobile-sticky-cta { display: none; }
  body.ai-open .ai-advisor { bottom: 12px; }
}

/* Herstellerhinweis an Produktgalerien. Pflicht aus der Foto-Nutzungs-
   vereinbarung: bei jeder Nutzung muss erkennbar sein, dass ein ALUXE-Produkt
   gezeigt wird. Leise gesetzt, aber lesbar - ein Hinweis, den man nicht
   findet, erfuellt die Auflage nicht. */
.image-credit {
  margin-top: var(--space-md);
  font-size: 0.8125rem;
  color: var(--color-text-muted, #6B6F62);
  text-align: center;
}

/* ---------- AGB ---------- */
.agb h2 { font-size: var(--step-3); margin-top: var(--space-lg); }
.agb ol, .agb ul { padding-left: 1.6em; margin: 0 0 var(--space-sm); }
.agb ol { list-style: decimal; }
.agb ul { list-style: disc; }
.agb li { margin-bottom: 0.5em; }
.agb ol.agb-alpha { list-style: lower-alpha; margin-top: 0.5em; }
.agb-untertitel { color: var(--text-muted); }
.agb-fuss { margin-top: var(--space-lg); padding-top: var(--space-sm); border-top: 1px solid var(--color-border); color: var(--text-muted); }
.widerruf-formular { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-md); background: #fff; }
.widerruf-feld { display: flex; gap: 10px; align-items: baseline; }
.widerruf-linie { flex: 1; border-bottom: 1px solid var(--color-gray); min-width: 120px; }

/* Regionsliste auf den Regionsseiten */
.region-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 24px; list-style: none; padding: 0; }
.region-links a { display: block; padding: 8px 0; border-bottom: 1px solid var(--color-border); font-weight: 600; }
.region-links a:hover { color: var(--color-green-dark); }

/* Produktvideo */
.product-video video { width: 100%; height: auto; aspect-ratio: 16/9; border-radius: var(--radius-md); background: var(--color-anthracite); display: block; }

/* Herstellerblock */
.hersteller-inner { display: grid; grid-template-columns: 300px 1fr; gap: var(--space-lg); align-items: start; }
.hersteller-logo { display: block; padding: 24px; background: #fff; border-radius: var(--radius-md); border: 1px solid var(--color-border); }
.hersteller-logo img { width: 100%; height: auto; display: block; }
.hersteller h2 { font-size: var(--step-4); }
.hersteller p a { text-decoration: underline; }
@media (max-width: 860px) { .hersteller-inner { grid-template-columns: 1fr; } .hersteller-logo { max-width: 260px; } }
.footer-hersteller { display: inline-flex; flex-direction: column; gap: 6px; margin-top: var(--space-sm); font-size: 0.78rem; color: rgba(255,255,255,0.6); }
.footer-hersteller img { height: 22px; width: auto; opacity: 0.85; }
.footer-hersteller:hover img { opacity: 1; }
.footer-bildnachweis { font-size: 0.72rem; color: rgba(255,255,255,0.5); margin-top: 6px; }

/* Anfrage direkt unter der Kostenschätzung */
.cost-lead { margin-top: var(--space-md); padding: var(--space-md); background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.cost-lead h3 { text-align: left; }

/* Vertrauenszeile unter Hauptknöpfen */
.cta-note { font-size: 0.8rem; opacity: 0.75; margin: 10px 0 0; letter-spacing: 0.01em; }
.hero .cta-note { color: rgba(255,255,255,0.8); }
.cta-band-action { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.cta-band-action .cta-note { text-align: center; }


/* Rundum-Paket: benanntes Komplettpaket (Startseite, Produktseiten, Landingpage) */
.rundum-inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-xl); align-items: start; }
.rundum-text h2 { margin-top: var(--space-xs); }
.rundum-lead { max-width: 52ch; }
.rundum-text .cta-band-action { align-items: flex-start; margin-top: var(--space-md); }
.rundum-text .cta-band-action .cta-note { text-align: left; }
.rundum-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-sm); }
.rundum-list li { display: flex; gap: var(--space-sm); align-items: flex-start; background: #fff; border-radius: var(--radius-md); padding: var(--space-sm) var(--space-md); box-shadow: var(--shadow-sm); }
.rundum-list li p { margin: 0.2rem 0 0; font-size: 0.95rem; color: var(--color-text-muted, #6B6F62); }
.rundum-list .trust-check { flex: 0 0 auto; margin-top: 0.15rem; }
.bg-dark .rundum-list li { background: rgba(255,255,255,0.06); }
@media (max-width: 900px) {
  .rundum-inner { grid-template-columns: 1fr; gap: var(--space-lg); }
}

/* Zwei Linien: Premium (ALUXE) und Eigenmarke EcoLine */
.product-card-media { position: relative; }
.product-card-media .badge-linie { position: absolute; left: 12px; top: 12px; background: rgba(250,248,245,0.94); }
.product-card-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.9); font-weight: 800; font-size: var(--step-2); letter-spacing: .04em; text-transform: uppercase; }
.product-card-media[data-image="product-ecoline"] { background: linear-gradient(135deg, #7a8b6a, #24291f 60%); }
.linien-grid { margin-top: var(--space-md); }
.linie-card { display: block; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-lg); box-shadow: var(--shadow-sm); color: inherit; transition: transform .2s ease, box-shadow .2s ease; }
.linie-card:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(37,37,37,0.10); }
.linie-card h3 { margin: var(--space-xs) 0 var(--space-sm); }
.linie-card .link-arrow { display: inline-block; margin-top: var(--space-sm); }
.bg-sand .linie-card { background: #fff; }
.bausatz-table-wrap { overflow-x: auto; margin-top: var(--space-md); }
.bausatz-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; min-width: 640px; }
.bausatz-table th, .bausatz-table td { padding: 10px 12px; border-bottom: 1px solid var(--color-border); text-align: right; white-space: nowrap; }
.bausatz-table th:first-child, .bausatz-table td:first-child { text-align: left; font-weight: 700; }
.bausatz-table thead th { background: var(--color-sand-light); font-weight: 700; }
.bausatz-note { font-size: 0.9rem; color: var(--color-text-muted, #6B6F62); margin-top: var(--space-sm); }
.technik-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); margin-top: var(--space-md); }
.technik-tile { margin: 0; background: var(--color-sand-light); border-radius: var(--radius-md); overflow: hidden; }
.technik-tile img { width: 100%; aspect-ratio: 52/45; object-fit: cover; display: block; }
.technik-tile figcaption { padding: var(--space-sm) var(--space-md) var(--space-md); display: grid; gap: 4px; }
.technik-tile figcaption span { font-size: 0.92rem; color: var(--color-text-muted, #6B6F62); }
@media (max-width: 1100px) { .technik-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .technik-grid { grid-template-columns: 1fr; } }