/* =====================================================================
   J.A. Share – flagship.css   (Spektakel-Layer für die Startseite)
   Lädt NACH styles.css. WebGL-Hero, Masken-Reveal, Grain, Cursor,
   Horizontal-Pin, dunkle Luxus-Bänder. Alles DSGVO-sauber/self-hosted.
   ===================================================================== */

/* ---------- Grundzustand für sanften Auftritt ---------- */
.brand{font-family:var(--font-display)}
.no-js [data-anim]{opacity:1 !important;transform:none !important}

/* Nav transparent über dem dunklen Hero (nur Startseite); wird beim Scrollen wieder hell */
body.dark-hero #hd:not(.scrolled){background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border-color:transparent}
body.dark-hero #hd:not(.scrolled) .nav a,body.dark-hero #hd:not(.scrolled) .brand,body.dark-hero #hd:not(.scrolled) .burger{color:#fff}
body.dark-hero #hd:not(.scrolled) .brand .slogan{color:rgba(255,255,255,.72)}
body.dark-hero #hd:not(.scrolled) .nav a{opacity:.92}
body.dark-hero #hd:not(.scrolled) .cta-mini{background:rgba(255,255,255,.16);color:#fff;backdrop-filter:blur(6px)}
body.dark-hero #hd:not(.scrolled) .cta-mini:hover{background:rgba(255,255,255,.28)}

/* Scroll-Fortschrittsbalken oben */
#progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:300;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--accent),var(--accent-l));will-change:transform}

/* Globales Film-Korn (das „teuer"-Signal) */
body::after{content:"";position:fixed;inset:0;z-index:400;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}

/* Seitenübergang */
body{transition:opacity .28s var(--ease)}
body.leaving{opacity:0}
::view-transition-old(root),::view-transition-new(root){animation-duration:.45s}

/* ---------- Custom-Cursor ENTFERNT (2026-06-01, User-Wunsch: normaler Maus-Zeiger) ---------- */

/* =====================================================================
   HERO mit WebGL-Mesh-Gradient
   ===================================================================== */
.hero-fx{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;color:#fff;padding:0;
  /* CSS-Fallback-Verlauf, falls kein WebGL/Reduced-Motion */
  background:radial-gradient(120% 120% at 20% 30%,#0e7c7b 0%,#0a2a29 45%,#0a1413 100%)}
#gl{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity 1.2s ease}
#gl.on{opacity:1}
.hero-fx .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,16,16,.35) 0%,rgba(8,16,16,0) 30%,rgba(8,16,16,.5) 100%);z-index:1}
.hero-fx .wrap{position:relative;z-index:2;width:100%;max-width:1180px;padding-top:64px}
.hero-eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-body);font-weight:600;
  font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.82);margin-bottom:1.4rem;
  opacity:0;transform:translateY(14px);transition:.9s var(--ease) .1s}
.hero-eyebrow::before{content:"";width:30px;height:1px;background:var(--accent-l)}
body.ready .hero-eyebrow{opacity:1;transform:none}

.hero-fx h1{font-family:var(--font-display);font-weight:600;color:#fff;letter-spacing:-.03em;line-height:.98;
  font-size:clamp(2.9rem,8vw,6.6rem);max-width:16ch;margin:0}
.hero-fx h1 .line{display:block;overflow:hidden}
.hero-fx h1 .line > span{display:block;transform:translateY(110%);transition:transform 1.05s var(--ease)}
body.ready .hero-fx h1 .line > span{transform:none}
.hero-fx h1 .line:nth-child(2) > span{transition-delay:.10s}
.hero-fx h1 .line:nth-child(3) > span{transition-delay:.20s}
.hero-fx h1 em{font-style:normal;color:var(--accent-l)}

/* Sub-Hero (Unterseiten): kürzer, etwas kleinere Headline */
.hero-fx.sub{min-height:clamp(440px,64vh,640px)}
.hero-fx.sub h1{font-size:clamp(2.2rem,5.6vw,4.2rem);max-width:20ch;line-height:1.0}
.hero-fx.sub .wrap{padding-top:84px}
.hero-fx .crumb{font-size:.85rem;color:rgba(255,255,255,.72);margin-bottom:1.1rem}
.hero-fx .crumb a{color:rgba(255,255,255,.72)}
.hero-fx .crumb a:hover{color:#fff}

/* Foto-Hero (Startseite): Gebäudefoto statt WebGL, langsamer Ken-Burns-Zoom */
.hero-shot .shot{position:absolute;inset:0;z-index:0;background:#0c1413 center/cover no-repeat;animation:kenburns 24s var(--ease) infinite alternate}
.hero-shot .veil{background:linear-gradient(105deg,rgba(8,16,16,.86) 0%,rgba(8,16,16,.5) 52%,rgba(8,16,16,.62) 100%)}
@keyframes kenburns{from{transform:scale(1.02)}to{transform:scale(1.1)}}
@media (prefers-reduced-motion:reduce){.hero-shot .shot{animation:none}}

.hero-fx .sub{font-family:var(--font-body);font-size:clamp(1.1rem,1.7vw,1.45rem);color:rgba(255,255,255,.9);
  max-width:46ch;margin:1.8rem 0 0;font-weight:400;opacity:0;transform:translateY(16px);transition:.9s var(--ease) .5s}
body.ready .hero-fx .sub{opacity:1;transform:none}
.hero-fx .cta-row{opacity:0;transform:translateY(16px);transition:.9s var(--ease) .62s}
body.ready .hero-fx .cta-row{opacity:1;transform:none}
.hero-fx .btn{background:#fff;color:var(--ink)}
.hero-fx .btn:hover{background:#eafafa}
.hero-fx .link{color:#fff}
.hero-fx .ghost{display:inline-flex;align-items:center;gap:8px;color:#fff;font-weight:500;border:1px solid rgba(255,255,255,.35);
  padding:13px 24px;border-radius:980px;transition:.25s var(--ease)}
.hero-fx .ghost:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.6)}
.scrollhint{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:2;color:rgba(255,255,255,.7);
  font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:8px;
  opacity:0;transition:opacity 1s ease 1s}
body.ready .scrollhint{opacity:1}
.scrollhint .bar{width:1px;height:42px;background:linear-gradient(180deg,var(--accent-l),transparent);animation:hintpulse 2.2s var(--ease) infinite}
@keyframes hintpulse{0%{transform:scaleY(.3);transform-origin:top;opacity:.4}50%{transform:scaleY(1);opacity:1}100%{transform:scaleY(.3);transform-origin:bottom;opacity:.4}}

/* ---------- Reveal-System ([data-anim]) ---------- */
[data-anim]{opacity:0;transform:translateY(34px);transition:opacity 1s var(--ease),transform 1s var(--ease);will-change:opacity,transform}
[data-anim="fade"]{transform:none}
[data-anim="left"]{transform:translateX(-44px)}
[data-anim="right"]{transform:translateX(44px)}
[data-anim="scale"]{transform:scale(.94)}
[data-anim].in{opacity:1;transform:none}

/* ---------- Manifesto / großer Editorial-Satz ---------- */
.manifesto{background:var(--bg);text-align:center}
.manifesto .wrap{max-width:1100px}
.manifesto p.kicker{font-family:var(--font-body);font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);font-size:.85rem;margin-bottom:1.6rem}
.manifesto h2{font-size:clamp(2rem,5.2vw,4rem);line-height:1.04;max-width:20ch;margin:0 auto;letter-spacing:-.03em}
.manifesto h2 .mut{color:var(--grey)}

/* =====================================================================
   GEPINNTER HORIZONTAL-SCROLL durch die Gewerke
   ===================================================================== */
.hpin{position:relative;height:420vh;padding:0;background:var(--ink)}            /* Scroll-Strecke = Anzahl Panels */
.hpin .sticky{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.hpin .hpin-head{position:absolute;top:clamp(70px,10vh,120px);left:0;right:0;text-align:center;z-index:3;color:#fff;pointer-events:none}
.hpin .hpin-head p{color:var(--accent-l);font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:.82rem;margin-bottom:.5rem}
.hpin .hpin-head h2{color:#fff;font-size:clamp(1.6rem,3.4vw,2.6rem)}
.hpin-track{display:flex;gap:34px;padding:0 8vw;will-change:transform}
.hcard{flex:0 0 min(78vw,520px);background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.12);border-radius:28px;padding:0;overflow:hidden;color:#fff;
  display:flex;flex-direction:column;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.hcard .pic{height:230px;overflow:hidden}
.hcard .pic img{width:100%;height:100%;object-fit:cover;transform:scale(1.05);transition:transform .8s var(--ease)}
.hcard:hover .pic img{transform:scale(1.12)}
.hcard .body{padding:28px 30px 32px}
.hcard .no{font-family:var(--font-display);font-size:.95rem;color:var(--accent-l);font-weight:600;letter-spacing:.05em}
.hcard h3{color:#fff;font-size:1.7rem;margin:.5rem 0 .7rem}
.hcard p{color:rgba(255,255,255,.74);font-size:1.02rem}
.hcard .link{color:var(--accent-l);margin-top:1.1rem;display:inline-block}
.hpin-bar{position:absolute;left:8vw;right:8vw;bottom:46px;height:2px;background:rgba(255,255,255,.16);z-index:3}
.hpin-fill{position:absolute;inset:0;background:linear-gradient(90deg,var(--accent),var(--accent-l));transform-origin:0 50%;transform:scaleX(0)}

/* =====================================================================
   DUNKLES LUXUS-BILDBAND (Parallax)
   ===================================================================== */
.lux{position:relative;min-height:78vh;display:flex;align-items:center;overflow:hidden;color:#fff;background:var(--ink)}
.lux .bg{position:absolute;inset:-12% 0;z-index:0;background-size:cover;background-position:center;will-change:transform}
.lux::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(8,16,16,.82) 0%,rgba(8,16,16,.5) 55%,rgba(8,16,16,.2) 100%)}
.lux .wrap{position:relative;z-index:2;max-width:1180px}
.lux h2{color:#fff;font-size:clamp(2.1rem,5vw,3.8rem);max-width:18ch}
.lux h2 em{font-style:normal;color:var(--accent-l)}
.lux p{color:rgba(255,255,255,.85);max-width:46ch;margin-top:1.2rem;font-size:clamp(1.05rem,1.6vw,1.3rem)}

/* ---------- Split (asymmetrisch, Innenausbau) ---------- */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2.5rem,6vw,5.5rem);align-items:center}
.split .pic{border-radius:var(--radius);overflow:hidden;aspect-ratio:4/5;box-shadow:0 50px 90px -50px rgba(14,124,123,.6)}
.split .pic img{width:100%;height:100%;object-fit:cover}
.split .num{font-family:var(--font-display);font-weight:600;color:var(--accent);font-size:.9rem;letter-spacing:.12em;text-transform:uppercase}

/* ---------- Region mit pulsierenden Pins ---------- */
.geo{position:relative}
.geo .map{position:relative;max-width:680px;margin:2.5rem auto 0;aspect-ratio:1/1}
.geo svg{width:100%;height:auto;display:block}
.geo a{cursor:pointer}
.geo a text{transition:fill .2s}
.geo a:hover text{fill:var(--accent);font-weight:700}
.geo a:hover circle{fill:var(--accent-l);r:6.5}
.pin{fill:var(--accent)}
.pulse{transform-box:fill-box;transform-origin:center;animation:pulse 2.6s var(--ease) infinite}
@keyframes pulse{0%{opacity:.55;r:4}70%{opacity:0;r:26}100%{opacity:0;r:26}}

/* Mobile-Stadtliste (Touch-freundliche Alternative zu den kleinen Karten-Pins) */
.geo-list{display:none;flex-wrap:wrap;justify-content:center;gap:.55rem;max-width:560px;margin:1.8rem auto 0;padding:0}
.geo-list li{list-style:none}
.geo-list a{display:block;padding:11px 16px;border:1px solid var(--line);border-radius:980px;color:var(--accent);font-weight:600;font-size:.95rem;text-decoration:none;line-height:1;transition:background .2s,color .2s,border-color .2s}
.geo-list a:hover,.geo-list a:active{background:var(--accent);color:#fff;border-color:var(--accent)}

/* ---------- Reduced-Motion: alle Bewegung aus ---------- */
@media (prefers-reduced-motion: reduce){
  #gl{display:none}
  .hero-fx h1 .line > span,.hero-fx .sub,.hero-fx .cta-row,.hero-eyebrow,[data-anim]{transition:none;transform:none;opacity:1}
  .scrollhint .bar,.pulse,.hcard .pic img{animation:none}
  body::after{display:none}
}

/* ---------- Mobile ---------- */
@media (max-width:820px){
  .split{grid-template-columns:1fr}
  .geo-list{display:flex}
  .geo .map{max-width:440px}
  /* Scroll-Reveal-Elemente (data-anim="left/right") sind vor dem Einblenden seitlich versetzt
     -> kein horizontales Scrollen/Abschneiden auf dem Handy (kein position:sticky auf Mobile). */
  html{overflow-x:hidden}
  .hpin{height:auto;background:var(--ink)}
  .hpin .sticky{position:static;height:auto;padding:5rem 0}
  .hpin-track{flex-direction:column;transform:none !important;padding:0 24px;gap:22px}
  .hcard{flex:1 1 auto}
  .hpin-bar{display:none}
  .hpin .hpin-head{position:static;margin-bottom:2rem}
  .cursor,.cursor-ring{display:none}
  @media (pointer:fine){body,a,button{cursor:auto}}
}

/* ---------- Kleine Handys: Hero-Typo verkleinern, damit nichts abgeschnitten wird ---------- */
@media (max-width:560px){
  .hero-fx h1{font-size:clamp(1.9rem,8.5vw,3.4rem)}
  .hero-fx.sub h1{font-size:clamp(1.7rem,7vw,2.6rem)}
  .hero-fx .sub{font-size:1.05rem}
  .hero-eyebrow{font-size:.78rem;flex-wrap:wrap;max-width:100%}
}

/* ---------- "In der Nähe" – Nachbarort-Links (Stadt-Seiten) ---------- */
.nearby{margin:2rem auto 0;max-width:62ch;display:flex;flex-wrap:wrap;justify-content:center;
        align-items:center;gap:.55rem .9rem;line-height:1.6}
.nearby a{color:var(--accent);text-decoration:none;font-weight:600;
          border-bottom:1px solid transparent;transition:border-color .2s,color .2s}
.nearby a:hover{color:var(--accent-d);border-bottom-color:currentColor}
.nearby span{color:var(--grey);opacity:.5}

/* ---------- Standorte-Liste im Footer (Startseite) ---------- */
.foot-locs{margin-top:6px;margin-bottom:30px;padding-top:26px;border-top:1px solid var(--line)}
.foot-locs h4{color:var(--black);margin:0 0 12px;font-size:.85rem;font-weight:600}
.foot-locs .locs{display:flex;flex-wrap:wrap;gap:.4rem .8rem;font-size:.82rem;line-height:1.7}
.foot-locs .locs a{color:var(--grey);text-decoration:none;transition:color .2s}
.foot-locs .locs a:hover{color:var(--accent)}

/* ---------- Fließtexte & Inhaltskarten zentrieren (Wunsch 2026-06-01) ----------
   Überschriften/Heroes waren bereits mittig; hier kommen die Absatztexte dazu.
   Listen werden als zentrierte Blöcke ausgerichtet (Marker + Text bleiben zusammen).
   Formular (.field), Rechtstexte (.legal) und FAQ-Antworten bleiben bewusst links. */
.ftext,.dcard,.step,.lcard{text-align:center}
.ftext ul,.lcard ul{align-items:center}
.step .num{margin-inline:auto}

/* ---------- WebGL-Sub-Hero zentrieren (Korrektur 2026-06-01) ----------
   .hero-fx war linksbündig; H1/.sub haben max-width ohne auto-Ränder.
   Jetzt: Brotkrume, Headline, Untertitel und CTA mittig (wie die übrigen Heroes). */
.hero-fx .wrap{text-align:center}
.hero-fx h1,.hero-fx .sub{margin-left:auto;margin-right:auto}
.hero-fx .cta-row{justify-content:center}

/* ---------- VOLLZENTRIERUNG aller Bild-neben-Text-Sektionen (2026-06-02) ----------
   User-Wunsch: ausnahmslos alle Texte in der Seitenmitte. Side-by-side-Layouts werden
   zu gestapelten, zentrierten Blöcken; Bilder zentriert + breitenbegrenzt.
   Formular (.field), Rechtstexte (.legal) und FAQ bleiben links (Lesbarkeit). */
.feature,.feature.rev{grid-template-columns:1fr;justify-items:center;text-align:center;gap:2.6rem}
.feature .ftext,.feature.rev .ftext{order:0;max-width:62ch;margin:0 auto}
.feature .fimg,.feature.rev .fimg{order:0;width:100%;max-width:760px;margin:0 auto}

.split{grid-template-columns:1fr;justify-items:center;text-align:center;gap:2.6rem}
.split .pic{width:100%;max-width:760px;margin:0 auto}
.split [data-anim="right"]{max-width:62ch;margin:0 auto}

.lux .wrap{text-align:center}
.lux h2,.lux p{margin-left:auto;margin-right:auto}
.lux::before{background:linear-gradient(180deg,rgba(8,16,16,.5),rgba(8,16,16,.72))}

.person{grid-template-columns:1fr;justify-items:center;text-align:center}

.hcard .body{text-align:center}