/* =========================================================
   SINNWÄRTS – MASTER CSS (vNEXT, clean & unified)
   Datum: 2025-11-28 (bereinigt, Option B)
   Struktur: Tokens → Base → Layout → Header → Hero (+Badge)
             → Subhero → Zickzack → Buttons → Cards/Blog
             → Sections/Legal → Footer → Page Overrides → Utils
   ========================================================= */

/* ===== Tokens ===== */
:root{
  /* Farben */
  --bg:#0b0f12;           /* Seite */
  --bg-soft:#10151b;      /* Flächen dunkel */
  --card:#0e1216;         /* Karten */
  --ink:#e8e6e3;          /* Text */
  --muted:#a7a7a7;        /* Sekundär */
  --accent:#d4af37;       /* Gold */
  --ring:#2a2f36;         /* Linien */

  /* Layout */
  --maxw:1000px;
  --nav-h:72px;

  /* Hero */
  --hero-min:70svh;
  --hero-brightness:1.15; /* 1.00 = original, 1.20 = deutlich heller */
  --hero-contrast:1.05;   /* leichte Leuchtkraft */
}

/* ===== Base ===== */
*{ box-sizing:border-box }
html,body{ margin:0; padding:0 }
html{ scroll-behavior:smooth }
img{ display:block; max-width:100%; height:auto }
a{ color:var(--accent); text-decoration:none }
a:hover{ text-decoration:underline }
a:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }

body{
  background:var(--bg); color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:1.05rem; line-height:1.65;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  padding-top:var(--nav-h);
}

/* ===== Layout ===== */
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 24px }
.block{ padding:40px 0; border-bottom:1px solid var(--ring) }
.grid-2{ display:grid; gap:32px; grid-template-columns:1fr 1fr; align-items:center }
@media (max-width:880px){ .grid-2{ grid-template-columns:1fr } }

/* ===== Header (sticky oben, über Hero klickbar) ===== */
.site-header{
  position:sticky;
  top:0;
  inset:0 0 auto 0;
  z-index:9999;
  background:rgba(11,15,18,.95);
  border-bottom:1px solid var(--ring);
}
.site-header .nav-container{
  max-width:var(--maxw); margin:0 auto; padding:10px 24px;
  display:flex; align-items:center; gap:2rem;
}
.site-header .brand{
  margin-right:auto; font-weight:700;
  text-transform:uppercase; color:var(--accent);
}
.site-header nav{ flex:1 }
.site-header .nav-list{
  display:flex; justify-content:center; gap:2rem;
  list-style:none; margin:0; padding:0;
}
.site-header .nav-list a{
  position:relative; color:var(--ink); padding:8px 0; text-decoration:none;
}
.site-header .nav-list a::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px;
  border-radius:2px; background:transparent; transform:scaleX(0); transform-origin:left;
  transition:transform .18s ease, background-color .18s ease;
}
.site-header .nav-list a:hover::after{
  background:rgba(255,255,255,.85); transform:scaleX(1);
}
.site-header .nav-list a[aria-current="page"]::after{
  background:var(--accent); transform:scaleX(1);
}
@media (max-width:760px){
  .site-header .nav-container{ flex-wrap:wrap }
  .site-header .nav-list{ gap:1rem 1.1rem }
}

/* ===== Hero – Universal (focal lock + unten) ===== */
.hero{
  position:relative;
  min-height:var(--hero-min);
  overflow:hidden;
  border-bottom:1px solid var(--ring, #2a2f36);
  padding-top:72px; /* Sicherheitsabstand unter Header */
}

.hero::before{ /* sanftes Overlay für Lesbarkeit */
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(to bottom,
      rgba(11,15,18,.28) 0%,
      rgba(11,15,18,.16) 32%,
      rgba(11,15,18,0) 60%),
    linear-gradient(to top,
      rgba(11,15,18,.45) 0%,
      rgba(11,15,18,0) 35%);
  pointer-events:none;
  z-index:0;
}

.hero .hero-bg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover;
  object-position:center var(--focal, 20%); /* Fokus-Höhe */
  z-index:-1;
  pointer-events:none;
}

.hero .inner{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  justify-content:flex-end; align-items:center; /* unten + zentriert */
  padding:72px 1rem var(--pb,16vh);          /* Texttiefe */
  text-align:center; z-index:1;
}

/* Typo */
.hero h1{
  margin:0; line-height:1.08;
  color:var(--accent);
  font-size:clamp(2rem,1.3rem + 2.6vw,2.8rem);
  text-shadow:0 3px 10px rgba(0,0,0,.55);
}
.hero .sub{ margin:.5rem 0 0; opacity:.95; }

/* Mobile Hero */
@media (max-width:640px){
  .hero{ min-height:76svh; }
  .hero .hero-bg{
    object-position:center var(--focal-m, var(--focal,22%));
  }
  .hero .inner{
    padding-bottom:var(--pb-m, calc(var(--pb,16vh) + 2vh));
  }
}

/* ===== Badge – global ===== */
.hero-badge{
  position:absolute;
  right:18px;
  top:18px;
  width:88px;
  height:auto;
  border-radius:12px;
  padding:6px;
  background:rgba(0,0,0,.12);
  box-shadow:0 8px 24px rgba(0,0,0,.35);
  opacity:.9;
  backdrop-filter:saturate(120%) blur(1px);
  z-index:2;
}
@media (max-width:640px){
  .hero-badge{ right:10px; top:10px; width:70px }
}

/* ===== Subhero ===== */
.subhero{ padding:14px 0 8px }
.subhero p{
  margin:.35rem auto; max-width:820px;
  line-height:1.55; text-align:center;
}
.subhero strong{ color:var(--accent) }

/* ===== Zickzack ===== */
.zz{ max-width:1160px; margin:56px auto; padding:0 24px }
.zz-row{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(18px,3vw,36px); align-items:start; margin:56px 0;
}
.zz-row .zz-text{ grid-column:1; max-width:65ch }
.zz-row .zz-media{ grid-column:2 }
.zz-row.rev .zz-text{ grid-column:2 }
.zz-row.rev .zz-media{ grid-column:1 }
.zz-text h2{
  margin:0 0 .35rem; color:var(--accent);
  font-size:clamp(1.35rem,1.05rem + .8vw,1.8rem); line-height:1.15;
}
.zz-text p{ margin:.5rem 0; line-height:1.55 }
.zz-media picture{ display:contents }
.zz-media img{
  width:100%; height:auto; border-radius:12px;
  border:1px solid var(--ring); vertical-align:top;
}
@media (max-width:750px){
  .zz-row{ grid-template-columns:1fr; gap:18px; margin:32px 0 }
  .zz-row .zz-text,.zz-row.rev .zz-text{ order:1 }
  .zz-row .zz-media,.zz-row.rev .zz-media{ order:2 }
}

/* ===== Buttons ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.85rem 1.2rem; min-height:42px; border-radius:999px;
  font-weight:700; line-height:1;
  border:1px solid transparent;
  cursor:pointer; text-decoration:none; white-space:nowrap;
  transition:transform .08s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  box-shadow:0 0 0 1px rgba(0,0,0,.15), 0 6px 16px rgba(0,0,0,.25);
}
.btn:active{ transform:translateY(1px) }
.btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }
.btn:hover{ filter:brightness(1.02) }

.btn-gold{
  background:#d4af37; color:#0b0f12;
  border-color:rgba(0,0,0,.25);
}
.btn-gold:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 22px rgba(0,0,0,.3);
  filter:brightness(1.02);
}
.btn-outline{
  background:transparent; color:var(--accent); border-color:var(--accent);
}
.btn-outline:hover{ background:rgba(212,175,55,.08) }

.btn-row{
  display:flex; flex-wrap:wrap; gap:12px 16px;
  justify-content:center; margin:40px 0;
}
.zz-text .btn-row{
  margin-top:14px; margin-bottom:0; justify-content:flex-start;
}

/* ===== Cards / Blog ===== */
.post-grid{
  list-style:none; margin:0; padding:0;
  display:grid; gap:2rem;
}
.cards{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(12px,2.4vw,18px) }
.cards--3{ grid-template-columns:repeat(auto-fit,minmax(300px,1fr)) }

.post-grid .card{
  background:var(--card); border:1px solid var(--ring);
  border-top:3px solid var(--accent);
  border-radius:1rem; overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform .2s ease, box-shadow .2s ease;
}
.post-grid .card:hover{
  transform:translateY(-4px);
  box-shadow:0 8px 20px rgba(0,0,0,.25);
}
.card-media{
  margin:0; overflow:hidden; background:#1a1f24;
  display:flex; align-items:center; justify-content:center;
  min-height:200px;
}
.card-media img{ width:100%; height:auto; object-fit:cover }
.card-hd{ padding:1rem 1.25rem 0 }
.card-hd .eyebrow{
  color:var(--accent); font-size:.9rem;
  text-transform:uppercase; letter-spacing:.5px;
}
.card-hd h3{
  margin:.25rem 0; font-size:1.25rem;
  line-height:1.3; color:var(--ink);
}
.card-hd .meta{ color:var(--muted); font-size:.9rem }
.card-txt{
  padding:0 1.25rem 1rem;
  color:var(--muted); flex-grow:1;
}
.card-cta{ display:inline-block; margin:0 1.25rem 1.25rem }
.card h3{ margin:.1rem 0 .3rem 0; font-size:1.05rem }
.card p{ margin:.2rem 0 .4rem 0; line-height:1.55 }

/* Lesen-Buttons im Card-Kontext immer schwarz auf Gold */
.post-grid .card a.btn-gold,
.post-grid .card .btn-gold,
.post-grid .card a.btn.btn-gold,
.post-grid .card .btn.btn-gold,
.post-grid .card a.btn-gold:visited,
.post-grid .card .btn-gold:visited,
.post-grid .card a.btn-gold:hover,
.post-grid .card .btn-gold:hover{
  color:#0b0f12 !important;
  background:#d4af37 !important;
  border-color:#d4af37 !important;
}

/* ===== Sections / Legal ===== */
.benefits{
  max-width:var(--maxw); margin:60px auto;
  padding:0 20px; text-align:center;
}
.benefits h2{
  font-size:2rem; margin-bottom:24px;
  color:var(--accent);
}
.benefits ul{
  list-style:none; padding:0; margin:0;
  display:grid; gap:16px;
}
.benefits li{ font-size:1.1rem; line-height:1.6 }

.legal .container.max{ max-width:800px }
.legal section{
  background:#111519; border:1px solid var(--ring);
  border-radius:12px; padding:1.5rem; margin:1.25rem 0;
  box-shadow:0 2px 6px rgba(0,0,0,.25);
}
.legal h2{
  margin:.1rem 0 .5rem;
  color:var(--accent); font-size:1.3rem;
}
.legal p{ margin:.5rem 0 0; line-height:1.55 }
.legal .small{ color:var(--muted); margin-top:24px }

/* ===== Footer ===== */
html,body{ height:100%; display:flex; flex-direction:column }
main{ flex:1 }
.site-footer{
  text-align:center; color:var(--muted);
  padding:2rem 1rem;
  border-top:1px solid var(--ring);
  margin-top:40px; font-size:.9rem;
}
.site-footer a{
  color:var(--muted); text-decoration:none; margin:0 .5rem;
}
.site-footer a:hover{ color:var(--accent) }

/* ===== Page Overrides ===== */

/* Startseite – mehr Bild unten zeigen + moderater Titel */
body.index .hero .hero-bg{ object-position:50% 68% !important; }
body.index .hero .inner h1{
  font-size:clamp(2rem,4.8vw,3.6rem);
}
body.index .cta-bottom,
body.index #was-du-bekommst,
body.index .was-du-bekommst{
  width:min(1000px,92vw); margin:0 auto; text-align:center;
}
body.index #was-du-bekommst > *,
body.index .was-du-bekommst > *,
body.index .cta-bottom > *{
  margin-left:auto; margin-right:auto; max-width:860px;
}

/* Über mich – H1 gold & größer, Bildausschnitt höher */
body.ueber-mich .hero{ min-height:74svh !important; }
body.ueber-mich .hero .hero-bg{ object-position:50% 22% !important; }
body.ueber-mich .hero .inner h1{
  color:var(--accent) !important;
  font-size:clamp(2.2rem,5.6vw,4.4rem) !important;
  line-height:1.06 !important;
}

/* Angebote – H1 gold & größer */
body.page-angebote .hero{ min-height:68svh !important; }
body.page-angebote .hero .hero-bg{ object-position:50% 35% !important; }
body.page-angebote .hero .inner h1{
  color:var(--accent) !important;
  font-size:clamp(2.4rem,6vw,4.6rem) !important;
  line-height:1.05 !important;
}

/* Kontakt – H1 gold & größer */
body.kontakt .hero,
body.page-kontakt .hero,
body.contact .hero{ min-height:66svh !important; }
body.kontakt .hero .hero-bg,
body.page-kontakt .hero .hero-bg,
body.contact .hero .hero-bg{ object-position:50% 40% !important; }
body.kontakt .hero .inner h1,
body.page-kontakt .hero .inner h1,
body.contact .hero .inner h1{
  color:var(--accent) !important;
  font-size:clamp(2.2rem,5.4vw,4.2rem) !important;
}

/* Resonanzraum – Top-Fokus, H1 gold, etwas weniger Höhe */
body.resonanzraum .hero{ min-height:62svh !important; }
body.resonanzraum .hero .hero-bg{ object-position:50% 18% !important; }
body.resonanzraum .hero .inner h1{ color:var(--accent) !important; }

/* ===== Utils ===== */
.to-top{
  position:fixed; right:1rem; bottom:1rem; display:none;
  padding:.55rem .7rem; border-radius:.75rem;
  line-height:1; font-size:1.1rem;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.25);
  backdrop-filter:blur(6px);
  opacity:.9; z-index:50;
}
.to-top.show{ display:inline-flex }
.to-top:hover{ opacity:1; transform:translateY(-2px) }
.to-top:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  .to-top{ transition:none }
}

/* Atemkurve: mehr Ruhe, bessere Lesbarkeit */
.section-spacer{ padding:clamp(24px,4vw,48px) 0 }
.kicker{
  letter-spacing:.06em;
  text-transform:uppercase;
  color:rgba(232,230,227,.9);
  font-weight:700;
  font-size:.9rem;
  text-shadow:0 2px 8px rgba(0,0,0,.35);
  margin:0 0 .3rem 0;
}
.lead{
  font-size:clamp(1rem,.9rem + .5vw,1.2rem);
  line-height:1.6;
  margin:.6rem auto 0;
  max-width:820px;
}
.divider{
  height:1px; background:var(--ring); opacity:.7;
  margin:clamp(16px,3vw,28px) auto;
  max-width:880px;
}
@media (max-width:900px){
  .cards{ grid-template-columns:1fr }
}

/* Frauen / Männer – Hero tiefer + Gesicht frei */
body.frauen .hero,
body.maenner .hero{
  min-height:70svh;
}
body.frauen .hero .hero-inner,
body.maenner .hero .hero-inner{
  place-items:end center;
  padding:72px 1rem 14vh;
  text-align:center;
}
body.frauen .hero .hero-bg{ object-position:center 18%; }
body.maenner .hero .hero-bg{ object-position:center 20%; }
body.frauen .hero-badge,
body.maenner .hero-badge{ top:14px; right:14px; width:78px; }
@media (max-width:640px){
  body.frauen .hero, body.maenner .hero{ min-height:74svh; }
  body.frauen .hero .hero-inner, body.maenner .hero .hero-inner{ padding-bottom:15vh; }
}

/* Soft-Hero-Variante */
.hero.hero--soft{
  min-height:72svh;
  position:relative;
  overflow:hidden;
  border-bottom:1px solid var(--ring);
}
.hero.hero--soft .hero-bg{
  object-fit:cover;
  object-position:center 22%;
  filter:brightness(1.06) contrast(1.03) saturate(1.04);
}

/* ===== Start-Hero (Portrait + Wellen) ===== */
.start-hero{
  position:relative;
  width:100%;
  min-height:92vh;
  overflow:hidden;
  display:flex;
  align-items:center;
  border-bottom:1px solid var(--ring);
  background:#000;
}
.start-hero-bg{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  z-index:1;
  filter:brightness(1.05) contrast(1.08) saturate(1.03);
}
.start-hero-content{
  position:relative;
  z-index:3;
  max-width:580px;
  padding-left:6vw;
  padding-top:12vh;
}
.start-hero-topline{
  font-size:1rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 .8rem 0;
}
.start-hero-title{
  margin:0 0 1rem 0;
  font-size:2.8rem;
  line-height:1.1;
  color:var(--accent);
  font-weight:700;
  text-shadow:0 3px 10px rgba(0,0,0,.55);
}
.start-hero-sub{
  margin:0;
  font-size:1.27rem;
  color:var(--ink);
  line-height:1.45;
  opacity:.9;
}
.start-hero-portrait{
  position:absolute;
  right:5vw;
  bottom:0;
  height:86vh;
  width:auto;
  z-index:3;
  object-fit:contain;
  filter:drop-shadow(0 18px 22px rgba(0,0,0,.45));
}
.start-hero-siegel{
  position:absolute;
  right:2.4vw;
  bottom:2.4vw;
  width:84px;
  height:auto;
  z-index:4;
  opacity:.95;
}
@media (max-width:780px){
  .start-hero{ min-height:88vh; }
  .start-hero-content{
    padding-left:5vw;
    padding-top:20vh;
    max-width:90vw;
  }
  .start-hero-title{ font-size:2.1rem; }
  .start-hero-portrait{
    height:54vh;
    right:50%;
    transform:translateX(50%);
    opacity:.72;
  }
  .start-hero-siegel{
    width:70px;
    bottom:5vw;
    right:5vw;
  }
}

/* ===== Hero Welle (Start-Seite Alternative) ===== */
.hero-welle{
  position:relative;
  min-height:82vh;
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
  overflow:hidden;
  padding:0;
}
.hero-welle .hero-bg{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center;
  z-index:0;
}
.hero-welle .hero-badge{
  position:absolute;
  right:3vw;
  bottom:3vw;
  width:84px;
  height:auto;
  z-index:5;
  opacity:.9;
}
.hero-welle .hero-inner{
  position:relative;
  z-index:3;
  width:100%;
  max-width:880px;
  padding:10vh 1rem 0;
  margin:0 auto;
  text-align:center;
}
.hero-welle .hero-kicker{
  color:var(--accent);
  font-size:clamp(1.6rem,1rem + 2.4vw,3rem);
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  margin-bottom:1.6rem;
  text-shadow:0 4px 16px rgba(0,0,0,.55);
}
.hero-welle .hero-title{
  color:var(--accent);
  font-size:clamp(1.9rem,1.2rem + 1.6vw,2.7rem);
  font-weight:600;
  line-height:1.35;
  margin:2.2rem 0 1.2rem 0;
  opacity:.95;
  text-shadow:0 3px 10px rgba(0,0,0,.35);
}
.hero-welle .hero-sub{
  color:var(--ink);
  font-size:clamp(1.3rem,1rem + 1vw,1.65rem);
  line-height:1.5;
  margin-top:1.4rem;
  opacity:.95;
  text-shadow:0 3px 12px rgba(0,0,0,.45);
  position:relative;
  top:-0.6vh;
}
@media (max-width:700px){
  .hero-welle{ min-height:88vh; }
  .hero-welle .hero-inner{ padding-top:14vh; }
  .hero-welle .hero-badge{
    width:72px;
    right:4vw;
    bottom:4vw;
  }
  .hero-welle .hero-title{ margin-top:-1vh; }
}

/* Intro-Absatz unter Hero */
.intro-text{
  max-width:760px;
  margin:3rem auto 2.5rem;
  padding:0 1rem;
  font-size:1.1rem;
  line-height:1.65;
  color:var(--ink);
  opacity:.92;
  text-align:center;
}

/* ===== Hero – Über mich (Welle-Variante) ===== */
.hero-welle-ueber{
  position:relative;
  min-height:60vh;
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
  overflow:hidden;
}
.hero-welle-ueber .hero-bg{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  z-index:0;
}
.hero-welle-ueber .hero-badge{
  position:absolute;
  right:3vw;
  bottom:3vw;
  width:82px;
  z-index:4;
  opacity:.9;
}
.hero-welle-ueber .hero-inner{
  position:relative;
  z-index:5;
  max-width:800px;
  padding:10vh 1rem 0;
  margin:0 auto;
  text-align:center;
}
.hero-welle-ueber .hero-kicker{
  color:var(--accent);
  font-size:clamp(1.1rem,1vw + .9rem,1.8rem);
  font-weight:600;
  letter-spacing:.12em;
  opacity:.92;
  margin-bottom:1.2rem;
  text-transform:uppercase;
}
.hero-welle-ueber .hero-title{
  color:var(--accent);
  font-size:clamp(2.4rem,2vw + 2rem,4rem);
  font-weight:700;
  line-height:1.18;
  margin:0 0 1rem 0;
  text-shadow:0 4px 14px rgba(0,0,0,.55);
}
.hero-welle-ueber .hero-sub{
  color:var(--ink);
  font-size:clamp(1.1rem,.8vw + 1rem,1.4rem);
  line-height:1.45;
  opacity:.92;
  margin:0;
}

/* ===== Hero – Über mich (eigene Klasse) ===== */
.hero-uebermich{
  position:relative;
  min-height:78vh;
  display:flex;
  justify-content:flex-start;
  align-items:flex-start;
  text-align:center;
  overflow:hidden;
  padding-top:14vh;
}
.hero-uebermich .hero-bg{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center;
  z-index:0;
}
.hero-uebermich .hero-badge{
  position:absolute;
  right:3vw;
  bottom:3vw;
  width:82px;
  z-index:5;
  opacity:.9;
}
.hero-uebermich .hero-inner{
  position:relative;
  z-index:3;
  max-width:880px;
  margin:0 auto;
  width:100%;
}
.hero-uebermich .hero-kicker{
  color:var(--accent);
  font-size:clamp(1rem,.5rem + 1.1vw,1.6rem);
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  opacity:.95;
  margin-bottom:1.4rem;
}
.hero-uebermich .hero-title{
  color:var(--accent);
  font-size:clamp(2rem,1.4rem + 2.4vw,3.4rem);
  font-weight:700;
  margin:0 0 1rem 0;
  text-shadow:0 4px 14px rgba(0,0,0,.55);
}
.hero-uebermich .hero-sub{
  color:var(--ink);
  font-size:clamp(1.2rem,.8rem + 1vw,1.45rem);
  font-weight:300;
  opacity:.92;
}
@media (max-width:700px){
  .hero-uebermich{ padding-top:18vh; }
}

/* ===== Hero – Universal für Unterseiten ===== */
.hero-universal{
  position:relative;
  min-height:78vh;
  display:flex;
  justify-content:flex-start;
  align-items:flex-start;
  text-align:center;
  overflow:hidden;
  padding-top:14vh;
}
.hero-universal .hero-bg{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center;
  z-index:0;
}
.hero-universal .hero-badge{
  position:absolute;
  right:3vw;
  bottom:3vw;
  width:82px;
  z-index:5;
  opacity:.9;
}
.hero-universal .hero-inner{
  position:relative;
  z-index:3;
  max-width:880px;
  margin:0 auto;
  width:100%;
}
.hero-universal .hero-kicker{
  color:var(--accent);
  font-size:clamp(1rem,.5rem + 1.1vw,1.6rem);
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  opacity:.95;
  margin-bottom:1.4rem;
}
.hero-universal .hero-title{
  color:var(--accent);
  font-size:clamp(2rem,1.4rem + 2.4vw,3.4rem);
  font-weight:700;
  margin:0 0 1rem 0;
  text-shadow:0 4px 14px rgba(0,0,0,.55);
}
.hero-universal .hero-sub{
  color:var(--ink);
  font-size:clamp(1.2rem,.8rem + 1vw,1.45rem);
  font-weight:300;
  opacity:.92;
}
@media (max-width:700px){
  .hero-universal{ padding-top:18vh; }
}

/* ===== Königin-Hero ===== */
.hero-koenigin{
  background-image:url("images/koenigin-hero.png");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  min-height:60vh;
  position:relative;
}
.hero-koenigin::before{
  content:"";
  position:absolute; inset:0;
  background:rgba(0,0,0,.25);
  z-index:1;
}
.hero-koenigin .hero-inner{
  position:relative;
  z-index:2;
  text-align:center;
  padding-top:10vh;
}
.hero-koenigin h1{
  color:var(--accent);
  font-size:3rem;
  margin:0;
  text-shadow:0 0 12px rgba(0,0,0,.55);
}
.hero-koenigin p{
  color:var(--muted);
  font-size:1.4rem;
  max-width:640px;
  margin:.8rem auto 0;
  text-shadow:0 0 10px rgba(0,0,0,.45);
}

/* ===== Samurai-Hero ===== */
.hero-samurai{
  background-image:url("images/schwert-hero.png");
  background-size:cover;
  background-position:center right;
  background-repeat:no-repeat;
  min-height:72vh;
  position:relative;
}
.hero-samurai::before{
  content:"";
  position:absolute; inset:0;
  background:rgba(0,0,0,.25);
  z-index:1;
}
.hero-samurai .hero-inner{
  position:absolute;
  left:26%;
  top:30%;
  transform:translate(-50%,-50%);
  width:min(92vw,1100px);
  text-align:center;
  z-index:2;
  padding:0 1rem;
}
.hero-pre{
  margin:0 0 .6rem;
  color:var(--muted);
  font-size:1.1rem;
  letter-spacing:.06em;
  opacity:.85;
  text-transform:uppercase;
  text-shadow:0 2px 12px rgba(0,0,0,.5);
}
.hero-samurai h1{
  color:var(--accent);
  font-size:3.4rem;
  font-weight:700;
  margin:0 0 1rem 0;
  max-width:520px;
  text-shadow:0 0 18px rgba(0,0,0,.6);
}
.hero-samurai p{
  color:var(--muted);
  font-size:1.6rem;
  max-width:520px;
  margin:0;
  text-shadow:0 0 10px rgba(0,0,0,.45);
}

/* ===== Kontaktseite – Inhalt zentriert ===== */
body.kontakt .wrap.block{
  max-width:900px;
  margin:0 auto;
  padding:2rem 1.5rem;
}
body.kontakt .wrap.block h2{
  text-align:center;
  margin-bottom:1.2rem;
}
body.kontakt .wrap.block p{
  text-align:center;
}

/* ===== Resonanzraum – Badge-Position (unten rechts) ===== */
body.resonanzraum .hero-badge{
  top:auto !important;
  bottom:4vh !important;
  right:2vw !important;

  width:96px;
  height:auto;
  padding:6px;

  background:rgba(0,0,0,.10);
  border:1px solid rgba(255,255,255,.15);
  border-radius:12px;
  box-shadow:0 8px 26px rgba(0,0,0,.45);
  backdrop-filter:blur(2px) saturate(120%);
  z-index:3;
}
@media (max-width:640px){
  body.resonanzraum .hero-badge{
    width:78px;
    bottom:5vh !important;
    right:4vw !important;
  }
}