:root{
  --ink:#0D0D0D; --tafel:#080807; --tafel-2:#141310;
  --line:rgba(201,164,92,.18); --line-2:rgba(201,164,92,.34); --line-n:rgba(255,255,255,.08);
  --fg:#F2F0EA; --fg-2:#9C968A; --fg-3:#8A8477;
  --gold:#C9A45C; --gold-hell:#EBD9A8; --gold-tief:#8A6F3C;
  --ok:#7FBE95; --stop:#DE6F64;
  --r:18px; --r-gross:28px; --r-pille:999px;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Segoe UI",system-ui,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-aus:cubic-bezier(.23,1,.32,1);
  --schein:0 0 0 1px rgba(201,164,92,.07), inset 0 1px 0 rgba(235,217,168,.06),
           0 24px 56px -24px rgba(201,164,92,.28);
  --mass:1120px;
}

*{box-sizing:border-box; margin:0; padding:0}
[hidden]{display:none !important}
html{scroll-behavior:smooth; scroll-padding-top:88px}
body{background:var(--ink); color:var(--fg); font-family:var(--font); font-size:17px; line-height:1.6;
  letter-spacing:-.011em; -webkit-font-smoothing:antialiased; overflow-x:hidden}
img{max-width:100%; display:block}
a{color:var(--gold); text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px; border-radius:6px}

h1,h2,h3{font-weight:700; text-wrap:balance}
h2{font-size:clamp(29px, 4.2vw, 52px); line-height:1.06; letter-spacing:-.038em}
h3{font-size:clamp(19px, 1.9vw, 23px); line-height:1.2; letter-spacing:-.026em; font-weight:650}
.betont{color:var(--gold)}
.eyebrow{font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); font-weight:600}
.body{color:var(--fg-2); max-width:58ch; line-height:1.62}
.mass{max-width:var(--mass); margin:0 auto; padding:0 24px}
.schmal{max-width:820px}
.block{padding:clamp(64px, 8vw, 120px) 0}
.kopfzeile{display:flex; flex-direction:column; gap:16px; margin-bottom:clamp(30px, 4vw, 52px); max-width:52ch}
.kopfzeile.breit{max-width:none}
.kopfzeile.breit h2{max-width:21em}
.fein{font-size:13.5px; color:var(--fg-3); line-height:1.6; margin-top:14px; letter-spacing:-.004em}
.fein a{color:var(--gold-hell); text-decoration:underline; text-underline-offset:3px}
.fein.mitte{text-align:center; margin-top:24px}
.textlink{color:var(--gold); font-weight:600; font-size:15.5px; gap:7px; letter-spacing:-.012em}
.pfeil{display:inline-block; transition:transform .35s var(--ease)}


.kopf{position:sticky; top:0; z-index:40; height:68px; display:flex; align-items:center;
  background:rgba(13,13,13,.72); backdrop-filter:saturate(180%) blur(22px);
  -webkit-backdrop-filter:saturate(180%) blur(22px); border-bottom:1px solid var(--line-n)}
.kopf .mass{display:flex; align-items:center; gap:14px; width:100%}
.marke{display:flex; align-items:center; gap:11px; color:var(--fg)}
.marke img{width:34px; height:auto; filter:drop-shadow(0 3px 14px rgba(201,164,92,.3))}
.marke b{display:block; font-size:13px; letter-spacing:-.015em; font-weight:650}
.marke i{display:block; font-size:11px; color:var(--fg-3); font-style:normal; letter-spacing:-.005em}
.kopf .rechts{margin-left:auto; display:flex; align-items:center; gap:10px}
@media (max-width:560px){.kopf .marke i{display:none} .kopf .nur-breit{display:none}}

@media (max-width:440px){.kopf .marke span{display:none} .kopf .rechts{gap:8px}}
@media (max-width:380px){.kopf .cta.sm{padding:9px 14px; font-size:13.5px}}
@media (max-width:360px){.hero .eyebrow{letter-spacing:.1em; font-size:11.5px} .leitsatz{max-width:none; font-size:22px}}


.cta{display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 28px; border-radius:var(--r-pille); font-size:16px; font-weight:600;
  letter-spacing:-.015em; white-space:nowrap;
  transition:transform .16s var(--ease-aus), filter .2s var(--ease-aus), color .2s var(--ease-aus)}
.cta.gold{background:var(--gold); color:#171309}
.cta.geist{color:var(--fg); box-shadow:inset 0 0 0 1px var(--line-2)}
.cta.sm{padding:9px 18px; font-size:14px}
.cta.gross{padding:17px 36px; font-size:18px}
@media (max-width:420px){.cta.gross{padding:16px 26px; font-size:17px; white-space:normal; text-align:center}}
.cta:active{transform:scale(.97)}
.cta:disabled{opacity:.6; cursor:progress}


.hero{position:relative; overflow:hidden; min-height:min(84vh, 800px); display:flex; align-items:center;
  padding:clamp(56px,8vw,110px) 0 clamp(64px,8vw,110px)}
.hero-bild{position:absolute; inset:0; z-index:0}
.hero-bild img{width:100%; height:100%; object-fit:cover; object-position:70% 50%; opacity:.72}
.hero-bild::after{content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, var(--ink) 0%, rgba(13,13,13,.92) 30%, rgba(13,13,13,.45) 62%, rgba(13,13,13,.55) 100%),
             linear-gradient(180deg, rgba(13,13,13,.55) 0%, rgba(13,13,13,0) 22%, rgba(13,13,13,0) 72%, var(--ink) 100%)}
.hero .mass{position:relative; z-index:2; width:100%}
.hero-text{max-width:640px}
.wortmarke{font-size:clamp(52px, 6vw, 92px); font-weight:800; line-height:.88; letter-spacing:-.03em;
  text-transform:uppercase; margin-top:16px}
.wortmarke span{display:block}
.leitsatz{font-size:clamp(24px,2.7vw,36px); font-weight:650; letter-spacing:-.03em; line-height:1.16;
  margin-top:clamp(22px,2.6vw,30px); max-width:24ch}
.hero .body{margin-top:18px; font-size:18px}
.hero-knoepfe{display:flex; gap:12px; flex-wrap:wrap; margin-top:30px}

.vertrauen{display:flex; flex-wrap:wrap; align-items:center; gap:6px 0; margin-top:24px;
  font-size:14.5px; color:var(--fg-2); letter-spacing:-.008em}
.vertrauen span + span::before{content:""; display:inline-block; width:4px; height:4px; border-radius:50%;
  background:var(--gold); margin:0 12px 0 12px; vertical-align:middle; position:relative; top:-1px}
@media (max-width:860px){
  .hero{min-height:0; align-items:flex-end; padding-top:clamp(220px, 62vw, 380px)}
  .hero-bild img{object-position:77% 38%; opacity:.8}
  .hero-bild::after{background:linear-gradient(180deg, rgba(13,13,13,.25) 0%, rgba(13,13,13,.35) 30%, rgba(13,13,13,.9) 58%, var(--ink) 78%)}
  .wortmarke{font-size:clamp(46px, 14vw, 92px)}
}
@media (max-width:420px){
  
  .vertrauen{flex-direction:column; align-items:flex-start; gap:4px}
  .vertrauen span::before, .vertrauen span + span::before{content:""; display:inline-block; width:4px; height:4px;
    border-radius:50%; background:var(--gold); margin:0 10px 0 0; vertical-align:middle; position:relative; top:-1px}
}


.bereiche{list-style:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px}
@media (max-width:980px){.bereiche{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.bereiche{grid-template-columns:1fr; gap:12px}}
.bereich{background:var(--tafel); border:1px solid var(--line); border-radius:var(--r-gross);
  padding:26px 24px 26px; box-shadow:var(--schein); display:flex; flex-direction:column}
@media (max-width:600px){.bereich{padding:22px 20px 22px}}
.bereich-kopf{display:flex; align-items:center; justify-content:space-between}
.ikon{width:46px; height:46px; padding:11px; border-radius:15px; flex:none;
  background:rgba(201,164,92,.08); box-shadow:inset 0 0 0 1px var(--line-2);
  fill:none; stroke:var(--gold); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.nr{font-size:13px; color:var(--gold); font-weight:700; letter-spacing:.12em; font-variant-numeric:tabular-nums}
.bereich-kopf .nr{color:var(--fg-3)}
.bereich h3{font-size:clamp(20px,2vw,23px); letter-spacing:-.028em; margin-top:18px}
.stichworte{list-style:none; display:flex; flex-wrap:wrap; gap:7px; margin-top:16px}
.stichworte li{font-size:13.5px; line-height:1.3; color:var(--fg-2); padding:6px 11px; border-radius:var(--r-pille);
  background:rgba(255,255,255,.03); border:1px solid var(--line-n); letter-spacing:-.006em}

.bereich-offen{grid-column:1 / -1}
.idee{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:22px; align-items:center;
  padding:28px 30px; border-radius:var(--r-gross); color:var(--fg);
  border:1px solid var(--line-2); box-shadow:var(--schein);
  background:linear-gradient(115deg, rgba(201,164,92,.16) 0%, rgba(201,164,92,.05) 42%, rgba(201,164,92,0) 75%), var(--tafel)}
.idee .ikon{width:54px; height:54px; padding:13px; background:rgba(201,164,92,.14)}
.idee .nr{display:block}
.idee h3{font-size:clamp(22px,2.3vw,28px); letter-spacing:-.03em; margin-top:6px}
.idee p{color:var(--fg-2); font-size:16px; line-height:1.6; margin-top:8px; max-width:64ch}
.idee .textlink{white-space:nowrap}
@media (max-width:760px){
  .idee{grid-template-columns:1fr; gap:14px; padding:24px 22px}
}


.hand{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:clamp(28px,4.5vw,68px); align-items:center}

@media (max-width:1120px){.hand{grid-template-columns:1fr} .hand-text{max-width:68ch}}
.vergleich{display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1.15fr); gap:12px; align-items:stretch}
.vg-sonst, .vg-uns{border-radius:var(--r-gross); padding:24px 22px}
.vg-sonst{border:1px dashed rgba(255,255,255,.14); background:rgba(255,255,255,.012)}

.vg-uns{align-self:center}
.vg-uns{border:1px solid var(--line-2); box-shadow:var(--schein);
  background:linear-gradient(165deg, rgba(201,164,92,.13) 0%, rgba(201,164,92,.02) 60%), var(--tafel)}
.vg-titel{display:block; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; font-weight:600; color:var(--fg-3)}
.vg-uns .vg-titel{color:var(--gold)}
.vg-liste{list-style:none; display:flex; flex-direction:column; gap:8px; margin-top:14px}
.vg-liste li{font-size:15px; color:var(--fg-2); padding:10px 14px; border-radius:13px;
  border:1px solid var(--line-n); background:#0B0B0A; display:flex; align-items:center; gap:10px}
.vg-liste li::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--fg-3); flex:none}
.vg-fuss{font-size:13px; color:var(--fg-3); margin-top:14px; line-height:1.5}
.vg-pfeil{display:grid; place-items:center}
.vg-pfeil svg{width:26px; height:26px; fill:none; stroke:var(--gold); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.ein-kontakt{display:flex; align-items:center; gap:12px; margin-top:14px; padding:14px 16px; border-radius:16px;
  background:rgba(201,164,92,.1); box-shadow:inset 0 0 0 1px var(--line-2)}
.ein-kontakt img{width:24px; height:auto; filter:drop-shadow(0 2px 10px rgba(201,164,92,.35))}
.ein-kontakt b{font-size:17px; font-weight:650; letter-spacing:-.02em}
.disziplinen{list-style:none; display:flex; flex-wrap:wrap; gap:7px; margin-top:16px}
.disziplinen li{font-size:13.5px; line-height:1.3; color:var(--gold-hell); padding:6px 11px; border-radius:var(--r-pille);
  background:rgba(201,164,92,.07); border:1px solid var(--line)}
@media (max-width:640px){
  .vergleich{grid-template-columns:1fr; gap:10px}
  .vg-sonst, .vg-uns{padding:22px 20px}
  .vg-pfeil svg{transform:rotate(90deg)}
}
.hand-text .body{font-size:18px}
.ansage{margin-top:26px; padding-left:20px; border-left:2px solid var(--gold)}
.ansage p{font-size:clamp(19px,1.9vw,23px); font-weight:600; letter-spacing:-.024em; line-height:1.3; color:var(--fg)}
.ansage p + p{margin-top:10px}
.ansage p.betont{color:var(--gold)}
.kopfzeile.breit .body{max-width:68ch}


.belege{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(18px,3vw,30px); align-items:start}
@media (max-width:860px){.belege{grid-template-columns:1fr}}
.fenster{border-radius:16px; overflow:hidden; background:#0A0908;
  box-shadow:0 0 0 1px var(--line-2), 0 44px 90px -44px rgba(201,164,92,.5), 0 18px 40px -24px rgba(0,0,0,.8)}
.fenster .leiste{height:28px; display:flex; gap:7px; align-items:center; padding:0 12px;
  border-bottom:1px solid var(--line-n); background:#0F0E0C}
.fenster .leiste i{width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.13)}
.fenster img{width:100%; height:auto}
.unterschrift{font-size:13px; color:var(--fg-3); margin-top:12px; line-height:1.5}


.kachel{background:var(--tafel); border:1px solid var(--line); border-radius:var(--r-gross);
  padding:28px 26px 30px; box-shadow:var(--schein)}
@media (max-width:600px){.kachel{padding:24px 22px 26px}}
.schritte{list-style:none; display:grid; grid-template-columns:repeat(var(--spalten,3),minmax(0,1fr)); gap:14px}
@media (max-width:860px){.schritte{grid-template-columns:1fr; gap:12px}}
.schritt .ziffer{width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  font-size:15px; font-weight:700; color:var(--gold); box-shadow:inset 0 0 0 1px var(--line-2);
  background:rgba(201,164,92,.07); font-variant-numeric:tabular-nums}
.schritt h3{margin:18px 0 8px}
.schritt p{color:var(--fg-2); font-size:15.5px; line-height:1.58}


.anmeldung{border:1px solid var(--line-2); border-radius:var(--r-gross); background:var(--tafel);
  padding:clamp(24px,3.6vw,48px); box-shadow:var(--schein)}
.anmeldung > .fertig{display:none}
.anmeldung.ab > .form{display:none}
.anmeldung.ab > .fertig{display:block}
.reihe{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media (max-width:640px){.reihe{grid-template-columns:1fr}}
label.f, span.f{display:block; font-size:13px; color:var(--fg-2); margin-bottom:9px; font-weight:500; letter-spacing:-.008em}
label.f small, span.f small{color:var(--fg-3); font-size:12px; font-weight:400}
.feldgruppe > span.f, .feldgruppe > label.f{font-size:15px; color:var(--fg); font-weight:600; letter-spacing:-.016em; margin-bottom:12px}
input.i, textarea.i{width:100%; background:#050504; border:1px solid var(--line-n); color:var(--fg);
  padding:15px 17px; border-radius:14px; font-size:16px; font-family:var(--font); outline:none;
  transition:border-color .2s var(--ease-aus); letter-spacing:-.01em}
textarea.i{min-height:112px; resize:vertical; line-height:1.5}
textarea.i.gross{min-height:172px}
input.i::placeholder, textarea.i::placeholder{color:var(--fg-3)}
input.i:focus, textarea.i:focus{border-color:var(--gold)}
.feldgruppe{margin-top:24px}
.feldgruppe.erste{margin-top:0}
.form > .bs-band + .feldgruppe.erste{margin-top:18px}
.segment{display:flex; flex-wrap:wrap; gap:8px}
.segment button{border:1px solid var(--line-n); border-radius:var(--r-pille); padding:10px 17px; font-size:15px;
  font-weight:550; color:var(--fg-2); letter-spacing:-.012em; background:rgba(255,255,255,.02);
  line-height:1.3; text-align:left;
  transition:background-color .15s var(--ease-aus), border-color .15s var(--ease-aus), color .15s var(--ease-aus), transform .14s var(--ease-aus)}
.segment button[aria-pressed="true"]{background:var(--gold); border-color:var(--gold); color:#171309; font-weight:650}
.segment button:active{transform:scale(.97)}
@media (max-width:420px){.segment button{font-size:14.5px; padding:10px 15px}}
.haken{display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:start; margin-top:24px;
  font-size:15px; color:var(--fg-2); line-height:1.55; cursor:pointer}
.haken input{width:21px; height:21px; margin-top:1px; accent-color:var(--gold); cursor:pointer}
.haken a{color:var(--gold-hell); text-decoration:underline; text-underline-offset:3px}
.haken input[aria-invalid="true"]{outline:2px solid var(--stop); outline-offset:2px}
.honig{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.absenden{margin-top:26px; display:flex; gap:16px; align-items:center; flex-wrap:wrap}
.absenden .neben{font-size:14px; color:var(--fg-3)}
.fehler{color:var(--stop); font-size:14px; margin-top:14px; display:none}
.fehler.an{display:block}
.form > .fein{margin-top:18px}
.fertig{text-align:center; padding:18px 0}
.fertig .symbol{width:64px; height:64px; margin:0 auto 20px; border-radius:50%; display:grid; place-items:center;
  background:rgba(201,164,92,.1); box-shadow:inset 0 0 0 1px var(--line-2), 0 18px 50px -18px rgba(201,164,92,.6)}
.fertig .symbol svg{width:28px; height:28px}
.fertig h3{font-size:clamp(24px,2.8vw,32px); letter-spacing:-.032em; margin-bottom:12px}
.fertig h3:focus{outline:none}
.fertig p{color:var(--fg-2); max-width:50ch; margin:0 auto; font-size:16px}
.fertig p + p{margin-top:12px}


details{border-bottom:1px solid var(--line-n)}
summary{list-style:none; cursor:pointer; padding:22px 40px 22px 0; position:relative; font-size:19px;
  font-weight:600; letter-spacing:-.022em}
summary::-webkit-details-marker{display:none}
summary::after{content:"+"; position:absolute; right:8px; top:19px; color:var(--gold); font-size:24px; font-weight:300; line-height:1}
details[open] summary::after{content:"–"}
details p{color:var(--fg-2); font-size:16px; padding:0 40px 0 0; max-width:68ch; line-height:1.62}
details p + p{margin-top:12px}
details > p:last-child{padding-bottom:26px}
details .faq-knopf{margin-top:20px}


footer{border-top:1px solid var(--line-n); padding:52px 0 64px}
.fussnav{display:flex; gap:28px; flex-wrap:wrap; align-items:center; font-size:14px; color:var(--fg-2)}
.fussnav a{color:var(--fg-2)}
.fuss-note{font-size:13px; color:var(--fg-3); line-height:1.7; margin-top:26px; max-width:88ch}


.auf{transform:translateY(14px); transition:transform .7s var(--ease)}
.auf.da{transform:none}
@media (hover:hover) and (pointer:fine){
  .cta.gold:hover{filter:brightness(1.07)}
  .fussnav a:hover{color:var(--gold)}
  .segment button:hover{border-color:var(--line-2); color:var(--fg)}
  .segment button[aria-pressed="true"]:hover{color:#171309}
}

.anmeldung.schwebt:hover, .anmeldung.schwebt:active, .anmeldung.schwebt:focus-visible{
  transform:none; border-color:var(--line-2); box-shadow:var(--schein)}
.anmeldung.schwebt::after, .anmeldung.bs-rand::before{display:none}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
  html{scroll-behavior:auto}
  .auf{transform:none}
}