/* =========================================================================
   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
   ======================================================================= */
.hero{position:relative;height:100vh;min-height:700px;overflow:hidden;background:var(--bg);}
/* 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%;}
.hero-veil-1{position:absolute;inset:0;background:linear-gradient(180deg,rgba(26,25,23,.5) 0%,rgba(26,25,23,.06) 30%,rgba(26,25,23,.46) 74%,#1A1917 100%);}
/* Zwei Lagen: die Verlaufsschicht von links traegt die Schlagzeile, die
   radiale Ecke oben rechts den Claim. Ohne die Ecke steht der sandfarbene
   Claim auf hellen Motiven (Dunst, Himmel, Feld) fast ohne Kontrast. */
.hero-veil-2{
  position:absolute;inset:0;
  background:
    radial-gradient(125% 85% at 100% 0%, rgba(26,25,23,.60) 0%, rgba(26,25,23,.26) 44%, rgba(26,25,23,0) 70%),
    linear-gradient(90deg,rgba(26,25,23,.52) 0%,rgba(26,25,23,0) 58%);
}
.hero-veil-3{position:absolute;left:0;right:0;bottom:0;height:56%;background:linear-gradient(180deg,rgba(26,25,23,0),rgba(26,25,23,.72) 52%,rgba(26,25,23,.93));}

.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:52px 0 30px;}
.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:0 0 10px;}
.usps-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));
  column-gap:56px;row-gap:8px;border-top:1px solid rgba(255,255,255,.14);padding-top:14px;
}
.usp{padding:34px 0 40px;}
.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:#F4F1EC;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:70px 0 96px;}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1px;background:rgba(255,255,255,.1);}
.stat{background:var(--surface);padding:38px 32px;}
.stat .label{margin-bottom:16px;}
.stat b{font-family:var(--display);font-weight:300;font-size:50px;line-height:1;color:#fff;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:40px 0 0;}
.areas-head{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad) 62px;}
.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 rgba(255,255,255,.2);
  transition:color .2s,background .2s,border-color .2s;
}
.chip:hover{border-color:rgba(255,255,255,.5);}
.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 */
.area-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:26px;
  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;opacity:.95;
  transition:transform 1.1s cubic-bezier(.16,.84,.24,1),opacity .6s ease;
}
.area-card:hover .pic{transform:scale(1.06);opacity:1;}
/* Der Textblock der Kachel beginnt bei 52 % der Hoehe. Der alte Verlauf hatte
   dort erst 26 % Deckkraft - ueber einem hellen Motiv (Wiese, Himmel) stand die
   Schrift damit praktisch auf dem Foto. Jetzt ist ab 46 % kraeftig abgedunkelt,
   die obere Haelfte bleibt unveraendert frei. */
.area-card .veil{
  position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(26,25,23,.45) 0%,
    rgba(26,25,23,.06) 26%,
    rgba(26,25,23,.66) 46%,
    rgba(26,25,23,.92) 66%,
    rgba(26,25,23,.96) 100%);
}
.area-card .in{position:relative;height:100%;display:flex;flex-direction:column;justify-content:space-between;padding:30px;}
/* Beide Chips tragen nowrap und schrumpfen als Flex-Elemente nicht unter ihre
   Mindestbreite. Zusammen brauchen sie bis zu 430 px („Nur noch 2 frei“ +
   „Mecklenburgische Seenplatte“); im dreispaltigen Raster ist eine Karte aber
   nur 353 px breit. Ohne Umbruch lief der Regions-Chip aus der Karte heraus
   und wurde von deren overflow:hidden abgeschnitten. Passt es nicht in eine
   Zeile, rutscht der Chip jetzt in die zweite und bleibt rechts ausgerichtet. */
.area-card .top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px 14px;flex-wrap:wrap;}
.area-card .top .tag{flex:none;}
.area-card .top .tag-quiet{font-size:10.5px;text-align:right;white-space:normal;margin-left:auto;}
/* 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;}
.area-card .figures .preis span{font-size:13.5px;letter-spacing:.08em;color:var(--ink-70);}
.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:1px;}
.band-pic{position:absolute;left:0;right:0;top:-14%;bottom:-14%;}
.band-pic .pic{width:100%;height:100%;opacity:.62;}
.band-veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(26,25,23,.9),rgba(26,25,23,.42));}
.band-in{
  position:relative;max-width:var(--wrap);margin:0 auto;padding:130px var(--pad);
  display:flex;align-items:flex-end;justify-content:space-between;gap:64px;flex-wrap:wrap;
}
.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;}

/* 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%;}
.d-hero-veil-1{position:absolute;inset:0;background:linear-gradient(180deg,rgba(26,25,23,.42),rgba(26,25,23,.08) 40%,rgba(26,25,23,.6) 76%,#1A1917);}
.d-hero-veil-2{position:absolute;left:0;right:0;bottom:0;height:62%;background:linear-gradient(180deg,rgba(26,25,23,0),rgba(26,25,23,.8) 58%,rgba(26,25,23,.96));}
.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:96px var(--pad) 110px;
  display:grid;grid-template-columns:minmax(0,1.6fr) minmax(300px,.75fr);gap:80px;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);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);
}
.merkmale{list-style:none;margin:0 0 72px;padding:0;display:grid;gap:1px;background:rgba(255,255,255,.1);}
.merkmale li{background:var(--bg);padding:20px 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:#fff;}

/* --------------------------------------------------------------- Galerie */
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1px;background:rgba(255,255,255,.1);}
.gallery button{
  border:0;padding:0;background:var(--surface);cursor:zoom-in;display:block;
  overflow:hidden;aspect-ratio:4/3;opacity:.92;transition:opacity .5s;
  background-size:cover;background-position:center;position:relative;
}
.gallery button:hover{opacity:1;}
.gallery button[disabled]{cursor:default;}
.gallery-note{font-family:var(--body);font-size:15px;color:var(--ink-70);margin:18px 0 0;}

/* ----------------------------------------------------------- Fakten-Karte */
.facts-card{position:sticky;top:calc(var(--nav-h) + 32px);border:1px solid rgba(255,255,255,.14);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;}
.facts-card .preis{font-family:var(--display);font-weight:200;font-size:42px;line-height:1;color:#fff;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:#fff;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:#fff;margin-top:6px;}
.facts-card .tel:hover b{color:var(--orange-light);}

/* =======================================================================
   Lightbox
   ======================================================================= */
.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;
}
.lb-close:hover,.lb-nav:hover{background:var(--orange);border-color:var(--orange);}
.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;}
.lb-thumbs{position:absolute;bottom:30px;left:0;right:0;display:flex;gap:10px;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(255,255,255,.04),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){
  .hero{height:auto;min-height:0;padding-top:calc(var(--nav-h) + 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:18px;}
  /* 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;}
  /* Lange Regionsnamen wie "Mecklenburgische Seenplatte" passen hier nicht
     mehr in eine Zeile – sonst ragt das Label aus der Kachel. */
  .area-card .top{flex-direction:column;align-items:flex-start;gap:8px;}
  .area-card .top .tag-quiet{white-space:normal;text-align:left;max-width:100%;}
  .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;}
  .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:#fff;margin:52px 0 18px;
}
.legal h3{
  font-family:var(--display);font-weight:500;
  font-size:18px;line-height:1.3;letter-spacing:.04em;
  color:#fff;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-light);}
.legal a:hover{color:#fff;}
/* 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:#fff;}
.legal-back{margin-top:8px;}

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