/* =========================================================================
   SÜSS GRUPPE · STARTSEITE + DETAILSEITE
   Umsetzung von "Suess Gruppe Website.dc.html". Setzt base.css voraus.
   ========================================================================= */

section{scroll-margin-top:var(--nav-h);}

/* =======================================================================
   STARTSEITE · Bildbühne über die ganze Höhe
   ======================================================================= */
/* Beginnt unter der Kopfzeile, nicht dahinter: die Leiste ist in der hellen
   Fassung deckend (siehe .site-hd in base.css) und wuerde den oberen Rand des
   Fotos sonst abschneiden. Die Hoehe faellt entsprechend um --nav-h. */
.hero{
  position:relative;margin-top:var(--nav-h);
  height:calc(100vh - var(--nav-h));min-height:640px;
  overflow:hidden;background:var(--surface-2);
}
/* Die Bildebene ist oben und unten größer als der Rahmen, damit die
   Parallaxverschiebung keine Kanten freilegt. */
.hero-pic{position:absolute;left:0;right:0;top:-12%;bottom:-12%;}
.hero-pic .pic{width:100%;height:100%;}
/* Schleier deutlich duenner (Kundenfeedback 03.09.2026: „viel zu dunkel“).
   Oben bleibt nur ein Hauch fuer Logo und Menue, die Mitte des Fotos ist frei;
   erst im unteren Drittel, wo der Text steht, dunkelt es ab. */
.hero-veil-1{position:absolute;inset:0;background:linear-gradient(180deg,rgba(26,25,23,.28) 0%,rgba(26,25,23,0) 28%,rgba(26,25,23,.18) 68%,rgba(26,25,23,.9) 100%);}
/* Die Verlaufsschicht von links traegt die Schlagzeile, die radiale Ecke oben
   rechts den Claim – beide nur noch halb so kraeftig, der Text bekommt dafuer
   einen weichen Schatten. */
.hero-veil-2{
  position:absolute;inset:0;
  background:
    radial-gradient(125% 85% at 100% 0%, rgba(26,25,23,.34) 0%, rgba(26,25,23,.12) 44%, rgba(26,25,23,0) 70%),
    linear-gradient(90deg,rgba(26,25,23,.3) 0%,rgba(26,25,23,0) 52%);
}
.hero-veil-3{position:absolute;left:0;right:0;bottom:0;height:52%;background:linear-gradient(180deg,rgba(26,25,23,0),rgba(26,25,23,.5) 52%,rgba(26,25,23,.86));}
.hero-in h1,.hero-bottom .lede{text-shadow:0 2px 28px rgba(26,25,23,.7),0 1px 3px rgba(26,25,23,.5);}

/* ------------------------------------------------- Schrift über den Fotos
   Die Seite ist hell: dunkle Schrift auf weissem Grund. Ueber den drei
   Bildbuehnen (Startseite, Werbeband, Detailseite) und auf den Bildkacheln
   bleibt es umgekehrt – weisse Schrift auf dem abgedunkelten Foto. Die
   Umkehrung ist Absicht: ein heller Schleier mit dunkler Schrift war
   probiert und wieder verworfen, er nimmt den Luftbildern genau die Tiefe,
   die sie tragen sollen. base.css stellt .dsp, .lede und .label auf dunkle
   Tinte; die Regeln hier holen fuer diese Flaechen das Weiss zurueck.
   .band-flat (Detailseite, ohne Foto) ist ausgenommen – dort gilt Hell. */
.hero-in .dsp,.hero-in .lede,.hero-in .label,
.d-hero-in .dsp,.d-hero-in .lede,.d-hero-in .label,
.band:not(.band-flat) .band-in .dsp,
.band:not(.band-flat) .band-in .lede,
.band:not(.band-flat) .band-in .label,
.area-card .bd .label{color:#fff;}
.hero-in .rule,.d-hero-in .rule,
.band:not(.band-flat) .band-in .rule{background:rgba(255,255,255,.30);}
/* Umriss- und Textlinks auf den Bildflaechen: weiss statt Tinte. */
.hero-in .btn-line,.d-hero-in .btn-line,
.band:not(.band-flat) .band-in .btn-line{color:#fff;border-color:rgba(255,255,255,.40);}
.hero-in .btn-line:hover,.d-hero-in .btn-line:hover,
.band:not(.band-flat) .band-in .btn-line:hover{
  color:#fff;border-color:#fff;background:rgba(255,255,255,.10);
}
.hero-in .btn-under,.d-hero-in .btn-under,
.band:not(.band-flat) .band-in .btn-under{color:#fff;border-bottom-color:rgba(255,255,255,.42);}
.hero-in .btn-under:hover,.d-hero-in .btn-under:hover,
.band:not(.band-flat) .band-in .btn-under:hover{color:#fff;border-bottom-color:#fff;}

.hero-in{
  position:relative;height:100%;max-width:var(--wrap);margin:0 auto;
  padding:0 var(--pad) 76px;display:flex;flex-direction:column;justify-content:flex-end;
}
.hero-top{display:flex;align-items:flex-end;justify-content:space-between;gap:60px;flex-wrap:wrap;}
.hero-top h1{max-width:1000px;}
.hero-claim{
  font-family:var(--display);font-weight:400;
  font-size:clamp(20px,2vw,34px);line-height:1.14;letter-spacing:.05em;
  /* Weiss statt Sand: der Claim steht ueber dem hellsten Teil des Fotos.
     Sand erreicht auf dunklem Grund 8,7:1, ueber dem hellen Feld aber deutlich
     weniger - und dort ist keine Schleierlage, die das auffangen wuerde. */
  text-transform:uppercase;color:#fff;margin:0 0 10px;text-align:right;
  text-shadow:0 1px 26px rgba(26,25,23,.75);
}
.hero-in .rule{margin:64px 0 38px;}
.hero-bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:48px;flex-wrap:wrap;}
.hero-bottom .lede{max-width:620px;}
.hero-actions{display:flex;align-items:center;gap:26px;flex-wrap:wrap;}

/* ------------------------------------------------------------ USP-Streifen */
.usps{background:var(--bg);padding:24px 0 20px;}
.usps-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));
  column-gap:64px;row-gap:16px;border-top:1px solid var(--line);padding-top:20px;
}
.usp{padding:40px 0 48px;}
.usp .mark{display:block;width:26px;height:1px;background:var(--orange);margin-bottom:26px;}
.usp h3{font-family:var(--display);font-weight:500;font-size:30px;line-height:1.1;letter-spacing:.005em;color:var(--ink-strong);margin:0 0 12px;}
.usp p{font-family:var(--body);font-weight:400;font-size:17px;line-height:1.62;color:var(--ink-70);margin:0;max-width:23ch;}

/* --------------------------------------------------------------- Kennzahlen */
.stats{background:var(--bg);padding:90px 0 120px;}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;}
.stat{background:var(--surface);padding:42px 34px;border:1px solid var(--line-soft);}
.stat .label{margin-bottom:16px;}
.stat b{font-family:var(--display);font-weight:300;font-size:50px;line-height:1;color:var(--ink-strong);display:block;}
.stat b.sm{font-size:33px;line-height:1.2;}
.stat b span{font-size:18px;color:var(--ink-70);}

/* =======================================================================
   STARTSEITE · Baugebiete
   ======================================================================= */
.areas{background:var(--bg);padding:56px 0 40px;}
.areas-head{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad) 80px;}
.areas-head .row{display:flex;align-items:flex-end;justify-content:space-between;gap:60px;flex-wrap:wrap;}
.areas-head p.lede{max-width:430px;font-size:17.5px;color:var(--ink-70);}
.filters{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:34px;padding-top:26px;border-top:1px solid var(--line);}
.filters .label{margin-right:12px;font-size:11.5px;color:var(--ink-70);}
.chip{
  cursor:pointer;font-family:var(--display);font-weight:500;font-size:12.5px;
  letter-spacing:.16em;text-transform:uppercase;padding:13px 21px;
  color:var(--ink-70);background:transparent;border:1px solid var(--line-strong);
  transition:color .2s,background .2s,border-color .2s;
}
.chip:hover{border-color:var(--ink);}
.chip[aria-pressed="true"]{color:#fff;background:var(--orange-dark);border-color:var(--orange-dark);}
.chip .n{opacity:.78;}                        /* .55 ergab 2,10:1 */
/* Im aktiven Chip steht Weiss auf Orange - dort kostet jede zusaetzliche
   Transparenz Lesbarkeit (2,88:1 statt 3,84:1). */
.chip[aria-pressed="true"] .n{opacity:1;}

/* ------------------------------------------------------------- Bildkacheln */
/* Abstand zwischen den Kacheln vergroessert (26 → 44 px), Kundenfeedback. */
.area-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:44px;
  max-width:var(--wrap);margin:0 auto;padding:0 var(--pad);
}
/* Die erste Kachel liegt doppelt breit – gibt dem Raster einen Anfang. */
.area-card.is-wide{grid-column:span 2;}
.area-card{
  position:relative;display:block;height:520px;overflow:hidden;
  background:var(--surface);text-decoration:none;
}
.area-card .pic{
  position:absolute;inset:0;
  transition:transform 1.1s cubic-bezier(.16,.84,.24,1);
}
.area-card:hover .pic{transform:scale(1.06);}
/* Die oberen rund 45 % der Kachel zeigen das Foto praktisch ungefiltert
   (Kundenfeedback 03.09.2026: heller und freundlicher), erst hinter dem
   Textblock am Fuss dunkelt es ab. Die Schrift bekommt zusaetzlich einen
   Schatten.
   07.09.2026 nachgezogen: der Textblock beginnt je nach Titellaenge schon bei
   etwa 55 % der Kartenhoehe, dort lag der Schleier aber erst bei .12-.27. Auf
   der Luetzschena-Kachel – helle Wiese im Abendlicht – erreichte die
   Statuszeile damit nur 3,80:1. Die Rampe setzt jetzt bei 46 % ein und ist
   bei 64 % durch. Gemessen gegen die echten Bildpixel aller sieben
   Titelbilder, 95. Perzentil der Grundhelligkeit: schlechtester Wert jetzt
   4,79:1. */
.area-card .veil{
  position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(26,25,23,.22) 0%,
    rgba(26,25,23,0) 24%,
    rgba(26,25,23,.16) 46%,
    rgba(26,25,23,.60) 64%,
    rgba(26,25,23,.90) 100%);
}
.area-card .bd{text-shadow:0 1px 18px rgba(26,25,23,.65),0 1px 2px rgba(26,25,23,.6);}
.area-card .in{position:relative;height:100%;display:flex;flex-direction:column;justify-content:space-between;padding:34px;}
/* Seit 07.09.2026 steht hier nur noch der Status-Chip – der dunkle
   Regions-Chip oben rechts ist auf Kundenwunsch entfernt. Die Region geht
   dadurch nicht verloren: sie steht weiter im Textblock am Kartenfuss
   (.loc, z. B. „Göhren-Lebbin · Mecklenburgische Seenplatte“) und in den
   Filter-Chips über dem Raster.
   Mit nur einem Chip braucht die Zeile keine Umbruch-Behandlung mehr; die
   Regeln dafür sind mit entfallen. */
.area-card .top{display:flex;align-items:flex-start;}
.area-card .top .tag{flex:none;}
/* Beim Überfahren hebt sich der Textblock und die Nebenangaben treten hervor.
   Ausgangswert bewusst hoch: bei opacity .4 lag der Kontrast von Status (2,44:1)
   und Ort (2,26:1) weit unter den geforderten 4,5:1 – und auf Touch-Geräten
   gibt es kein Überfahren, dort blieb es dauerhaft dabei. */
.area-card .bd{transform:translateY(0);transition:transform .55s cubic-bezier(.16,.84,.24,1);}
.area-card:hover .bd{transform:translateY(-10px);}
/* Weiss statt Sand: Sand erreicht ueber einem hellen Motiv selbst mit
   kraeftigem Schleier nur rund 3,2:1 - Weiss dagegen 6,5:1. */
.area-card .bd .label{color:#fff;opacity:1;transition:opacity .45s ease;margin-bottom:12px;}
.area-card .bd h3{font-family:var(--display);font-weight:400;font-size:28px;line-height:1.16;letter-spacing:.03em;text-transform:uppercase;color:#fff;margin:0 0 8px;}
.area-card .bd .loc{font-family:var(--body);font-size:15.5px;color:#fff;margin:0 0 22px;opacity:.9;transition:opacity .45s ease .06s;}
.area-card:hover .bd .loc{opacity:1;}
.area-card .bd .rule{background:rgba(255,255,255,.18);margin-bottom:18px;}
.area-card .figures{display:flex;align-items:baseline;justify-content:space-between;gap:16px;}
.area-card .figures .preis{font-family:var(--display);font-weight:400;font-size:27px;color:#fff;margin:0;}
/* Steht auf dem Foto, nicht auf dem Seitengrund – daher ausgeschriebenes
   halbtransparentes Weiss statt --ink-70. */
.area-card .figures .preis span{font-size:13.5px;letter-spacing:.08em;color:rgba(255,255,255,.86);}
.area-card .figures .groesse{font-family:var(--body);font-size:15px;color:#fff;margin:0;text-align:right;}

.areas-empty{
  grid-column:1/-1;border:1px solid var(--line);background:var(--surface);
  padding:70px 30px;text-align:center;color:var(--ink-62);
}

/* =======================================================================
   Werbeband mit Bildhintergrund (beide Seiten)
   ======================================================================= */
.band{position:relative;overflow:hidden;background:var(--bg);margin-top:72px;}
.band-pic{position:absolute;left:0;right:0;top:-14%;bottom:-14%;}
.band-pic .pic{width:100%;height:100%;opacity:.9;}
/* Heller: der Verlauf traegt nur noch den Text links, rechts bleibt das Foto
   weitgehend frei. */
.band-veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(26,25,23,.78) 0%,rgba(26,25,23,.5) 55%,rgba(26,25,23,.2) 100%);}
.band-in{
  position:relative;max-width:var(--wrap);margin:0 auto;padding:150px var(--pad);
  display:flex;align-items:flex-end;justify-content:space-between;gap:72px;flex-wrap:wrap;
}
/* Der Schatten traegt die weisse Schrift auf dem Foto. Die flache Variante
   .band-flat hat kein Foto und dunkle Schrift – dort waere er ein Schmutz-
   fleck, deshalb ausgenommen. */
.band:not(.band-flat) .band-in .txt,
.band:not(.band-flat) .band-in .side{text-shadow:0 1px 22px rgba(26,25,23,.7);}
.band-in .txt{max-width:720px;}
.band-in .txt h2{margin-bottom:26px;}
.band-in .side{display:flex;flex-direction:column;gap:16px;}
.band-in .side .note{font-family:var(--body);font-size:13px;color:var(--ink-55);margin:0;text-align:center;}
.band:not(.band-flat) .band-in .side .note{color:rgba(255,255,255,.84);}

/* Flache Variante ohne Bild – auf der Detailseite */
.band-flat{background:var(--surface);border-top:1px solid var(--line);}
.band-flat .band-in{padding:104px var(--pad);}

/* =======================================================================
   DETAILSEITE
   ======================================================================= */
.detail-main{padding-top:var(--nav-h);}
.d-hero{position:relative;height:64vh;min-height:460px;overflow:hidden;background:var(--surface);}
.d-hero-pic{position:absolute;left:0;right:0;top:-12%;bottom:-12%;}
.d-hero-pic .pic{width:100%;height:100%;}
/* Duenne Schleier (Kundenfeedback): das Baugebiet soll zu sehen sein. Nur der
   Streifen hinter Titel und Chips am unteren Rand dunkelt kraeftig ab.
   07.09.2026: der Streifen setzt etwas frueher ein – auf dem Luetzschena-Bild
   erreichte die Ortszeile vorher nur 4,21:1, jetzt 4,58:1. Der obere Teil des
   Fotos ist unveraendert. */
.d-hero-veil-1{position:absolute;inset:0;background:linear-gradient(180deg,rgba(26,25,23,.22),rgba(26,25,23,0) 35%,rgba(26,25,23,.18) 68%,rgba(26,25,23,.9));}
.d-hero-veil-2{position:absolute;left:0;right:0;bottom:0;height:48%;background:linear-gradient(180deg,rgba(26,25,23,0),rgba(26,25,23,.54) 42%,rgba(26,25,23,.9));}
/* Rote Jahne: Bild nach oben versetzen, weniger Himmel und hellerer Verlauf. */
.d-hero[data-area="rotejahne"] .d-hero-pic{top:-20%;bottom:-4%;}
.d-hero[data-area="rotejahne"] .d-hero-veil-1{background:linear-gradient(180deg,rgba(26,25,23,.14),rgba(26,25,23,0) 35%,rgba(26,25,23,.1) 68%,rgba(26,25,23,.72));}
.d-hero[data-area="rotejahne"] .d-hero-veil-2{background:linear-gradient(180deg,rgba(26,25,23,0),rgba(26,25,23,.38) 42%,rgba(26,25,23,.72));}
.d-hero-in h1,.d-hero-in .loc{text-shadow:0 2px 26px rgba(26,25,23,.7),0 1px 3px rgba(26,25,23,.5);}
.d-hero-in{
  position:relative;height:100%;max-width:var(--wrap);margin:0 auto;
  padding:0 var(--pad) 60px;display:flex;flex-direction:column;justify-content:flex-end;
}
.d-back{
  font-family:var(--display);font-weight:500;font-size:11.5px;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(255,255,255,.9);
  margin-bottom:auto;margin-top:40px;align-self:flex-start;
  background:rgba(26,25,23,.5);border:1px solid rgba(255,255,255,.22);padding:11px 16px;
  transition:color .2s,border-color .2s,background .2s;
}
.d-back:hover{color:#fff;border-color:#fff;background:rgba(26,25,23,.72);}
/* Der Hinweis „Foto folgt" liegt in der Flex-Spalte der Bildbuehne. Der
   Zurueck-Link nimmt mit margin-bottom:auto den freien Raum; die auto-Raender
   hier teilen ihn, sodass der Hinweis mittig zwischen beiden steht. */
.d-hero-in .ph-note.ph-flow{margin:auto 0;}
.d-hero-in h1{margin-bottom:18px;font-size:clamp(34px,5vw,78px);line-height:1;letter-spacing:.015em;}
.d-hero-in .loc{font-family:var(--body);font-size:17.5px;color:#fff;margin:0 0 24px;}
.d-tags{display:flex;gap:10px;flex-wrap:wrap;}

.d-body{
  max-width:var(--wrap);margin:0 auto;padding:112px var(--pad) 130px;
  display:grid;grid-template-columns:minmax(0,1.6fr) minmax(300px,.75fr);gap:96px;align-items:start;
}
.d-lede{
  font-family:var(--display);font-weight:300;font-size:clamp(20px,2vw,30px);
  line-height:1.42;letter-spacing:.02em;color:var(--sand-ink);margin:0 0 56px;text-wrap:pretty;
}
.d-h2{
  font-family:var(--display);font-weight:300;font-size:13px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--ink-55);margin:0 0 28px;
  padding-bottom:18px;border-bottom:1px solid var(--line);
}
/* Die Trennlinien der Liste entstehen aus dem 1-px-Raster: der Grund
   scheint durch die Luecken. */
.merkmale{list-style:none;margin:0 0 88px;padding:0;display:grid;gap:1px;background:var(--line);}
.merkmale li{background:var(--bg);padding:22px 4px;display:flex;gap:18px;align-items:baseline;}
.merkmale li::before{content:"";width:6px;height:6px;background:var(--orange);flex:none;display:block;}
.merkmale span{font-family:var(--body);font-size:17.5px;color:var(--ink);}

/* --------------------------------------------------------------- Galerie */
/* Galerie mit echten Zwischenraeumen statt 1-px-Linien (Kundenfeedback:
   „Abstaende vergroessern“); die Fotos liegen ungefiltert bei voller Deckkraft. */
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;}
.gallery button{
  border:0;padding:0;background:var(--surface);cursor:zoom-in;display:block;
  overflow:hidden;aspect-ratio:4/3;opacity:1;transition:transform .5s,filter .5s;
  background-size:cover;background-position:center;position:relative;
  filter:brightness(1.05) saturate(1.06);
}
.gallery button:hover{transform:scale(1.02);filter:brightness(1.1) saturate(1.08);}
.gallery button[disabled]{cursor:default;}
.gallery-note{font-family:var(--body);font-size:15px;color:var(--ink-70);margin:24px 0 0;}

/* ----------------------------------------------------------- Fakten-Karte */
.facts-card{position:sticky;top:calc(var(--nav-h) + 32px);border:1px solid var(--line);background:var(--surface);}
.facts-card .head{padding:34px 30px;border-bottom:1px solid var(--line);}
.facts-card .head .label{margin-bottom:14px;font-size:11px;}
/* Gewicht 200 traegt in dunkler Tinte auf Weiss nicht mehr: die Haarstriche
   der Jost brechen bei 42 px optisch weg. 300 ist der duennste Schnitt, der
   auf hellem Grund noch als Zahl steht. */
.facts-card .preis{font-family:var(--display);font-weight:300;font-size:42px;line-height:1;color:var(--ink-strong);margin:0;}
.facts-card .hint{font-family:var(--body);font-size:15px;color:var(--ink-70);margin:10px 0 0;}
.facts-card dl{margin:0;padding:8px 30px 24px;}
.facts-card dl>div{padding:18px 0;border-bottom:1px solid var(--line-soft);}
.facts-card dl>div:last-child{border-bottom:0;}
.facts-card dt{font-family:var(--display);font-weight:500;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-70);margin-bottom:8px;}
.facts-card dd{font-family:var(--body);font-size:17.5px;color:var(--ink);margin:0;}
.facts-card .actions{padding:0 30px 30px;display:flex;flex-direction:column;gap:12px;}
.facts-card .tel{
  display:block;text-align:center;font-family:var(--body);font-size:15px;
  color:var(--ink-55);padding-top:16px;margin-top:4px;border-top:1px solid var(--line-soft);
}
.facts-card .tel b{display:block;font-family:var(--display);font-weight:400;font-size:17px;letter-spacing:.06em;color:var(--ink);margin-top:6px;}
.facts-card .tel:hover b{color:var(--orange-ink);}

/* =======================================================================
   Lightbox
   ======================================================================= */
/* Die Lightbox bleibt dunkel, auch in der hellen Fassung. Sie zeigt ein
   einzelnes Foto bildschirmfuellend; ein weisser Grund wuerde es ueberstrahlen
   und die Augen bei jedem Oeffnen blenden. Alles darin – Schrift, Rahmen,
   Bedienknoepfe – ist deshalb weiterhin weiss auf Dunkel. */
.lb{position:fixed;inset:0;z-index:200;background:rgba(20,19,17,.96);animation:sg-fade .3s ease;}
.lb[hidden]{display:none;}
.lb-close,.lb-nav{
  position:absolute;z-index:2;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.2);color:#fff;cursor:pointer;
  display:grid;place-items:center;transition:background .2s,border-color .2s;
}
/* Wie bei .btn-pri: die weissen Zeichen brauchen den tieferen Ton. */
.lb-close:hover,.lb-nav:hover{background:var(--orange-dark);border-color:var(--orange-dark);}
.lb-close{top:26px;right:30px;width:46px;height:46px;font-size:17px;}
.lb-nav{top:50%;width:52px;height:52px;margin-top:-60px;font-size:22px;}
.lb-prev{left:24px;}
.lb-next{right:24px;}
.lb-stage{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:70px 96px 150px;}
.lb-img{flex:1;width:100%;background-size:contain;background-position:center;background-repeat:no-repeat;transition:background-image .25s ease;}
.lb-cap{display:flex;align-items:baseline;gap:20px;flex-wrap:wrap;justify-content:center;}
.lb-cap p{font-family:var(--body);font-size:16px;color:#fff;margin:0;text-align:center;max-width:720px;}
.lb-cap .n{font-family:var(--display);font-weight:500;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--orange-light);white-space:nowrap;}
/* Ohne Miniaturleiste braucht die Buehne den Platz unten nicht (siehe
   .is-einzel in baugebiet.js). */
.lb.is-einzel .lb-stage{padding-bottom:70px;}
.lb-thumbs{position:absolute;bottom:30px;left:0;right:0;display:flex;gap:14px;justify-content:center;padding:0 24px;flex-wrap:wrap;}
.lb-thumbs button{
  width:104px;height:66px;cursor:pointer;background-size:cover;background-position:center;
  border:1px solid rgba(255,255,255,.2);opacity:.45;transition:opacity .25s,border-color .25s;
}
.lb-thumbs button:hover{opacity:1;}
.lb-thumbs button[aria-current="true"]{opacity:1;border-color:var(--orange);}

/* =======================================================================
   Ladezustand / Fehler
   ======================================================================= */
.skeleton{border:1px solid var(--line);background:var(--surface);min-height:420px;position:relative;overflow:hidden;}
.skeleton::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(26,25,23,.06),transparent);animation:sg-shim 1.4s infinite;}
@keyframes sg-shim{from{transform:translateX(-100%)}to{transform:translateX(100%)}}

.pagefail{border:1px solid var(--line);background:var(--surface);padding:70px 34px;text-align:center;}
.pagefail h2{margin-bottom:16px;}
.pagefail p{font-family:var(--body);color:var(--ink-62);max-width:52ch;margin:0 auto 32px;}
.pagefail .actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}

/* =======================================================================
   Responsive
   ======================================================================= */
@media(max-width:1100px){
  .d-body{grid-template-columns:1fr;gap:56px;padding-top:64px;}
  .facts-card{position:static;}
  .area-card.is-wide{grid-column:auto;}
  .band-in{padding:96px var(--pad);}
}
@media(max-width:860px){
  .hero{min-height:620px;}
  .hero-in{padding-bottom:52px;}
  .hero-claim{text-align:left;}
  .hero-in .rule{margin:34px 0 24px;}
  .area-card{height:440px;}
  .stats{padding:52px 0 70px;}
  .usp{padding:26px 0 30px;}
  .usp h3{font-size:24px;}
  .lb-stage{padding:64px 20px 132px;}
  .lb-nav{width:44px;height:44px;margin-top:-40px;}
  .lb-prev{left:10px;} .lb-next{right:10px;}
  .lb-thumbs button{width:74px;height:48px;}
}
@media(max-width:560px){
  /* Den Platz fuer die Kopfzeile schafft schon das margin-top der Buehne –
     hier bleibt nur der eigentliche Innenabstand. */
  .hero{height:auto;min-height:0;padding-top:40px;}
  .hero-pic{top:0;bottom:0;}
  .hero-in{padding-bottom:44px;height:auto;}
  .hero-top{gap:22px;}
  .hero-actions{width:100%;}
  .hero-actions .btn{width:100%;}
  .area-grid{grid-template-columns:1fr;gap:28px;}
  /* Höhe wächst mit dem Inhalt statt fest 400 px: bei 320 px Breite und drei
     Titelzeilen plus dem Hinweis „Foto folgt“ wurde die Preiszeile am
     Kartenfuß abgeschnitten. Hier steht jede Karte allein in ihrer Zeile,
     unterschiedliche Höhen fallen also nicht auf. */
  .area-card{height:auto;min-height:400px;}
  .areas-head{padding-bottom:40px;}
  .band-in{padding:70px var(--pad);}
  .band-in .side{width:100%;}
  .d-body{padding:52px var(--pad) 70px;}
  .merkmale{margin-bottom:52px;}
  /* Die Bildbuehne richtet ihren Inhalt unten aus. Mit der groesseren Schrift
     ist der Inhalt bei 320 px hoeher als die feste Hoehe von 64vh – er wurde
     dann nach OBEN hinausgedraengt und der Zurueck-Link verschwand hinter der
     Kopfzeile. Die Buehne waechst hier deshalb mit ihrem Inhalt. */
  .d-hero{height:auto;min-height:60vh;}
  .gallery{grid-template-columns:1fr 1fr;gap:12px;}
  .lb-thumbs{display:none;}
}

/* =======================================================================
   RECHTSSEITEN (Impressum, Datenschutz)
   Bewusst schmale Textspalte: Fließtext liest sich ab etwa 70 Zeichen je
   Zeile schlechter. Gleiche Schrift und Farben wie der Rest der Seite.
   ======================================================================= */
.legal-main{padding-top:var(--nav-h);background:var(--bg);}
.legal{max-width:820px;margin:0 auto;padding:80px var(--pad) 90px;}
.legal .label{margin-bottom:18px;}
.legal h1{margin:0 0 22px;}
.legal .lede{margin-bottom:26px;}
.legal .rule{margin:44px 0;}
.legal h2{
  font-family:var(--display);font-weight:500;
  font-size:26px;line-height:1.2;letter-spacing:.02em;
  color:var(--ink-strong);margin:52px 0 18px;
}
.legal h3{
  font-family:var(--display);font-weight:500;
  font-size:18px;line-height:1.3;letter-spacing:.04em;
  color:var(--ink-strong);margin:34px 0 12px;
}
.legal p{font-family:var(--body);font-size:17px;line-height:1.75;color:var(--ink-70);margin:0 0 18px;}
.legal ul{margin:0 0 20px;padding-left:22px;}
.legal li{font-family:var(--body);font-size:17px;line-height:1.75;color:var(--ink-70);margin-bottom:6px;}
.legal a{color:var(--orange-ink);}
.legal a:hover{color:var(--ink);}
/* Wortumbruch für lange Adressen und Links auf schmalen Geräten */
.legal a{overflow-wrap:anywhere;}

/* Blöcke, in denen die Zeilenfuehrung des Originaltexts erhalten bleibt
   (Adressen, Kontaktzeilen, die Aufzaehlungen mit Gedankenstrich). */
.legal-block{color:var(--ink);}
.legal-back{margin-top:8px;}

@media(max-width:860px){
  .legal{padding:56px var(--pad) 70px;}
  .legal h2{font-size:23px;margin:44px 0 16px;}
}