/* ==========================================================================
   REINHART Strafverteidigung - Stylesheet
   Farbwelt: Tannengruen / Kohle / Gold. Titel Montserrat, Text Manrope.
   ========================================================================== */
:root{
  --gruen:#2E3E39; --gruen-tief:#243130; --kohle:#14191A; --kohle-tief:#0C0F0F;
  --gold:#EFC463; --gold-hell:#F7D889; --gold-tief:#D9AC45;
  --tinte:#14181A; --grau:#5C6469; --grau-hell:#98A1A5; --linie:#DFE2E3;
  --papier:#FFFFFF; --nebel:#F2F3F3;
  --titel:'Montserrat',system-ui,sans-serif;
  --text:'Manrope',system-ui,sans-serif;
  --serif:Georgia,'Iowan Old Style','Times New Roman',serif;
  --breite:1180px; --kopfhoehe:76px; --rund:10px;
  --schwung:cubic-bezier(.22,.61,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--kopfhoehe) + 20px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papier);color:var(--tinte);font-family:var(--text);
  font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
figure{margin:0}
picture{display:contents}
a{color:inherit}
h1,h2,h3,h4{margin:0;font-family:var(--titel);text-transform:uppercase;line-height:1.06;
  letter-spacing:-.005em;font-weight:900}
p{margin:0}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:3px}
.nur-vorleser{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.zum-inhalt{position:absolute;left:16px;top:-70px;z-index:99;background:var(--gold);color:var(--tinte);
  padding:12px 20px;border-radius:6px;font-weight:800;transition:top .2s}
.zum-inhalt:focus{top:14px}
.bahn{width:100%;max-width:var(--breite);margin-inline:auto;padding-inline:24px}
.abschnitt{padding:96px 0}
.abschnitt--dunkel{background:radial-gradient(120% 85% at 50% 35%,#1F2A27 0%,#141A19 55%,#0C0F0F 100%);color:#fff;position:relative;overflow:hidden}
.abschnitt--dunkel::before{content:"";position:absolute;left:50%;top:50%;width:1180px;height:1180px;
  transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:repeating-radial-gradient(circle at 50% 50%,rgba(255,255,255,.028) 0 1px,transparent 1px 74px);}
.abschnitt--hell{background:var(--nebel)}
.abschnitt--verlauf{background:linear-gradient(158deg,#31423C 0%,#1D2724 52%,#101413 100%);color:#fff;position:relative;overflow:hidden}
.titel{font-size:clamp(29px,4.3vw,50px)}
.titel--hell{color:#fff}
.vorspann{margin-top:22px;max-width:52ch;color:var(--grau);font-size:16.5px}
.abschnitt--dunkel .vorspann,.abschnitt--verlauf .vorspann{color:var(--grau-hell)}

/* --- Punkteraster + Zierflaechen ---------------------------------------- */
.punkte{position:absolute;pointer-events:none;
  background-image:radial-gradient(currentColor 1.6px,transparent 1.7px);
  background-size:17px 17px;opacity:.5}
.punkte--hell{color:rgba(255,255,255,.34)}
.punkte--dunkel{color:#C3C9CB}

/* --- Knoepfe ------------------------------------------------------------ */
.knopf{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:11px;
  isolation:isolate;overflow:hidden;background:var(--gold);color:var(--tinte);text-decoration:none;
  font-family:var(--titel);font-weight:800;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;
  padding:19px 34px;border-radius:6px;transition:transform .3s var(--schwung),box-shadow .3s var(--schwung)}
.knopf::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--gold-hell);
  transform:translateY(101%);transition:transform .38s var(--schwung)}
.knopf--voll{width:100%}
.knopf--geist{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.34)}
.knopf--geist::before{background:var(--gold)}
@media (hover:hover) and (pointer:fine){
  .knopf:hover{transform:translateY(-3px);box-shadow:0 14px 30px -12px rgba(239,196,99,.7)}
  .knopf:hover::before{transform:translateY(0)}
  .knopf--geist:hover{color:var(--tinte);border-color:var(--gold)}
}
.knopf:active{transform:translateY(-1px)}

/* --- Kopfzeile ---------------------------------------------------------- */
.kopf{position:sticky;top:0;z-index:60;background:var(--gruen);
  border-bottom:1px solid rgba(255,255,255,.09)}
.kopf__bahn{display:flex;align-items:center;gap:26px;min-height:var(--kopfhoehe);max-width:1340px}
.marke{display:flex;align-items:center;gap:12px;text-decoration:none;color:#fff;flex:none}
.marke__zeichen{width:34px;height:44px;color:var(--gold);flex:none}
.marke__wort{font-family:var(--titel);font-weight:800;font-size:14px;letter-spacing:.18em;line-height:1.1}
.marke__zusatz{display:block;font-family:var(--text);font-weight:500;font-size:8.5px;letter-spacing:.24em;
  color:var(--gold);margin-top:3px}
.nav{display:flex;gap:21px;margin-inline:auto}
.knopf--nav{display:none}
.nav a{position:relative;text-decoration:none;color:#fff;font-family:var(--titel);font-weight:700;
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:6px 0;white-space:nowrap}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--gold);
  transform:scaleX(0);transform-origin:left;transition:transform .3s var(--schwung)}
@media (hover:hover){.nav a:hover::after{transform:scaleX(1)}.nav a:hover{color:var(--gold)}}
.kopf__draht{display:flex;flex-direction:column;gap:5px;flex:none}
.draht{display:flex;align-items:center;gap:9px;color:#fff;text-decoration:none;font-size:13px;font-weight:600;white-space:nowrap}
.draht svg{width:15px;height:15px;color:var(--gold);flex:none;transition:transform .3s var(--schwung)}
@media (hover:hover){.draht:hover{color:var(--gold)}.draht:hover svg{transform:rotate(-14deg) scale(1.14)}}
.kopf .knopf{padding:15px 20px;font-size:10.5px;flex:none;white-space:nowrap}
.klapper{display:none;width:44px;height:44px;align-items:center;justify-content:center;color:#fff;flex:none}
.klapper svg{width:24px;height:24px}

/* --- Held (Startbereich) ------------------------------------------------ */
.held{position:relative;background:var(--gruen);color:#fff;overflow:hidden}
.held__flaeche{position:absolute;left:calc(50% - 640px);top:34px;width:290px;height:210px;
  border:2px solid rgba(255,255,255,.045);border-radius:34px 4px 34px 4px;pointer-events:none}
.held .punkte{left:0;bottom:36px;width:116px;height:120px}
@media (max-width:1420px){.held .punkte,.aufruf .punkte,.ablauf .punkte,.vorteile .punkte{display:none}}
.held__raster{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,500px);
  gap:34px;align-items:center;padding-block:78px 96px}
.held__text{position:relative;z-index:2}
.held h1{font-size:clamp(31px,3.5vw,50px);letter-spacing:-.018em}
.held__name{margin-top:14px;font-family:var(--titel);font-weight:800;color:var(--gold);
  font-size:clamp(13.5px,1.42vw,17.5px);letter-spacing:.05em;text-transform:uppercase;line-height:1.4}
.punkteliste{list-style:none;margin:32px 0 0;padding:0;display:grid;gap:13px;max-width:600px}
.punkteliste li{position:relative;padding-left:26px;font-size:15.5px;line-height:1.5;color:#EBEFEE}
.punkteliste li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:9px;
  border-radius:50%;background:var(--gold)}
.punkteliste strong{font-weight:800;color:#fff}
.held__fuss{display:flex;align-items:flex-start;gap:56px;margin-top:40px}
.rollhinweis{display:inline-flex;flex-direction:column;align-items:center;gap:14px;text-decoration:none;
  color:rgba(255,255,255,.75);font-size:9.5px;letter-spacing:.28em;text-transform:uppercase;
  font-family:var(--titel);font-weight:700}
.rollhinweis span{writing-mode:vertical-rl}
.rollhinweis i{display:block;width:1px;height:86px;background:linear-gradient(rgba(255,255,255,.55),rgba(255,255,255,0))}
@media (hover:hover){.rollhinweis:hover{color:var(--gold)}}
.held__bild{position:relative;z-index:1;border-radius:30px 0 0 30px;overflow:hidden;
  box-shadow:0 40px 80px -50px rgba(0,0,0,.85);
  margin-right:calc(-1 * clamp(0px,(100vw - var(--breite))/2,210px) - 24px)}
.held__bild img{width:100%}
@media (min-width:1620px){.held__bild{border-radius:30px}}

/* --- Schwerpunkt (Bild + Text) ----------------------------------------- */
.paar{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1fr);gap:70px;align-items:center}
.paar__bild{border-radius:18px;overflow:hidden;box-shadow:0 32px 60px -40px rgba(0,0,0,.55)}
.paar__bild img{width:100%;height:auto}
.merkliste{list-style:none;margin:34px 0 0;padding:0;display:grid;gap:22px;max-width:56ch}
.merkliste li{position:relative;padding-left:30px;color:var(--grau);font-size:15.5px;line-height:1.62}
.merkliste li::before{content:"";position:absolute;left:0;top:.52em;width:13px;height:11px;
  border:2px solid var(--gold);border-right:0;border-bottom:0;border-radius:2px 0 0 0}
.abschnitt--verlauf .merkliste li{color:#D2D9D7}

/* --- Leistungen --------------------------------------------------------- */
.kacheln{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:44px}
.kachel{display:flex;flex-direction:column;justify-content:space-between;gap:34px;min-height:238px;
  background:var(--papier);color:var(--tinte);border-radius:var(--rund);padding:26px 24px 28px;
  text-decoration:none;transition:transform .35s var(--schwung),box-shadow .35s var(--schwung)}
.kachel__zeile{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.abzeichen{width:62px;height:62px;border-radius:50%;background:var(--gruen);color:#fff;flex:none;
  display:grid;place-items:center;transition:background .35s var(--schwung),transform .35s var(--schwung)}
.abzeichen svg{width:27px;height:27px}
.kachel__nr{font-family:var(--titel);font-weight:700;font-size:13px;color:#6E7477;letter-spacing:.04em}
.kachel h3{font-size:13.5px;font-weight:800;letter-spacing:.035em;line-height:1.5}
.kachel p{margin-top:9px;font-size:13.5px;line-height:1.55;color:var(--grau)}
@media (hover:hover) and (pointer:fine){
  .kachel:hover{transform:translateY(-7px);box-shadow:0 26px 44px -24px rgba(0,0,0,.62)}
  .kachel:hover .abzeichen{background:var(--gold);color:var(--gruen);transform:rotate(-7deg) scale(1.06)}
  .kachel:hover h3{color:var(--gruen)}
}

/* --- Urkunde ------------------------------------------------------------ */
.urkunde{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
  gap:64px;align-items:start;margin-top:46px}
.urkunde h3{font-size:15px;font-weight:800;letter-spacing:.03em}
.urkunde__serif{margin-top:16px;font-family:var(--serif);font-size:13.6px;line-height:1.78;color:#C9D1CE}
.urkunde__quelle{display:inline-flex;align-items:flex-start;gap:12px;margin-top:14px;
  font-family:var(--serif);font-size:13.6px;color:#C9D1CE}
.urkunde__quelle::before{content:"";flex:none;margin-top:.45em;width:12px;height:10px;
  border:2px solid var(--gold);border-right:0;border-bottom:0;border-radius:2px 0 0 0}
.urkunde__bild{border-radius:16px;overflow:hidden;box-shadow:0 34px 64px -40px rgba(0,0,0,.7)}
.urkunde .punkte{color:rgba(255,255,255,.3)}
.urkunde__p1{right:8px;top:-24px;width:130px;height:132px}
.urkunde__p2{left:6px;bottom:0;width:112px;height:114px}

/* --- Ablauf ------------------------------------------------------------- */
.buehne{position:relative;margin-top:46px}
.buehne__bild{border-radius:30px;overflow:hidden;width:min(100%,900px)}
.buehne__bild img{width:100%}
.schritte{position:absolute;right:-24px;top:26px;bottom:26px;width:min(48%,478px);
  display:flex;flex-direction:column;justify-content:space-between;gap:14px}
.schritte::before{content:"";position:absolute;right:36px;top:34px;bottom:34px;
  border-left:2px dotted #BFC6C8}
.schritt{position:relative;z-index:1;display:flex;align-items:center;gap:20px;background:var(--papier);
  border-radius:30px;padding:20px 74px 20px 30px;box-shadow:0 18px 38px -26px rgba(0,0,0,.5)}
.schritt p{font-family:var(--serif);font-size:13.4px;line-height:1.62;color:#2A3033}
.schritt__nr{position:absolute;right:14px;top:50%;transform:translateY(-50%);width:46px;height:46px;
  border-radius:50%;background:var(--gruen);color:#fff;display:grid;place-items:center;
  font-family:var(--titel);font-weight:800;font-size:12.5px;letter-spacing:.02em}
.ablauf__fuss{display:flex;justify-content:flex-end;margin-top:34px}
.ablauf .punkte{left:0;top:34%;width:132px;height:118px}

/* --- Zahlen ------------------------------------------------------------- */
.zahlen{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:44px}
.zahl{background:var(--papier);color:var(--tinte);border-radius:var(--rund);padding:26px 24px 30px;
  transition:transform .35s var(--schwung),box-shadow .35s var(--schwung)}
.zahl h3{margin-top:30px;font-size:15px;font-weight:800;letter-spacing:.02em}
.zahl p{margin-top:11px;font-size:13.5px;line-height:1.58;color:var(--grau)}
@media (hover:hover) and (pointer:fine){
  .zahl:hover{transform:translateY(-7px);box-shadow:0 26px 44px -24px rgba(0,0,0,.6)}
  .zahl:hover .abzeichen{background:var(--gold);color:var(--gruen);transform:rotate(-7deg) scale(1.06)}
}
.titel__gold{color:var(--gold)}

/* --- Vorteile (Aufklapper) ---------------------------------------------- */
.vorteile{background:linear-gradient(126deg,#E6E8E8 0%,#F7F8F8 34%,#FFFFFF 72%);position:relative;overflow:hidden}
.vorteile .punkte{left:22px;top:44%;width:120px;height:104px}
.klappliste{position:relative;z-index:1;margin-top:44px;border-top:1px solid var(--linie)}
.klapp{border-bottom:1px solid var(--linie)}
.klapp__knopf{display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%;
  text-align:left;padding:26px 4px;font-family:var(--titel);font-weight:800;font-size:14px;
  letter-spacing:.03em;color:var(--tinte);transition:color .25s}
.klapp__kreuz{position:relative;width:26px;height:26px;flex:none}
.klapp__kreuz::before,.klapp__kreuz::after{content:"";position:absolute;left:50%;top:50%;
  background:var(--tinte);transition:transform .35s var(--schwung),background .25s}
.klapp__kreuz::before{width:22px;height:2px;transform:translate(-50%,-50%)}
.klapp__kreuz::after{width:2px;height:22px;transform:translate(-50%,-50%)}
.klapp__knopf[aria-expanded="true"] .klapp__kreuz::after{transform:translate(-50%,-50%) rotate(90deg)}
.klapp__knopf[aria-expanded="true"]{color:var(--gruen)}
@media (hover:hover){.klapp__knopf:hover{color:var(--gruen)}
  .klapp__knopf:hover .klapp__kreuz::before,.klapp__knopf:hover .klapp__kreuz::after{background:var(--gruen)}}
.klapp__inhalt{display:grid;grid-template-rows:0fr;transition:grid-template-rows .38s var(--schwung)}
.klapp__knopf[aria-expanded="true"] + .klapp__inhalt{grid-template-rows:1fr}
.klapp__inhalt > div{overflow:hidden}
.klapp__inhalt p{padding:0 60px 28px 0;color:var(--grau);font-size:15px;max-width:70ch}

/* --- Aufruf mit Formular ------------------------------------------------ */
.aufruf{display:grid;grid-template-columns:1fr 1fr;background:var(--gruen);color:#fff;position:relative;overflow:hidden}
.aufruf__text{padding:92px 60px 92px max(24px,calc((100vw - var(--breite))/2 + 24px));
  display:flex;flex-direction:column;justify-content:center}
.aufruf h2{font-size:clamp(28px,3.6vw,44px);max-width:12ch}
.aufruf p{margin-top:20px;color:#B4BDBA;font-size:15.5px;max-width:46ch}
.formular{margin-top:30px;max-width:400px}
.feld{width:100%;background:#fff;color:var(--tinte);border:1.5px solid transparent;border-radius:6px;
  padding:21px 22px;font:600 15.5px/1.3 var(--text);transition:border-color .25s,box-shadow .25s}
.feld::placeholder{color:#98A0A4;font-weight:500}
.feld:focus{outline:0;border-color:var(--gold);box-shadow:0 0 0 4px rgba(239,196,99,.3)}
.formular .knopf{margin-top:14px}
.einwilligung{display:flex;gap:11px;align-items:flex-start;margin-top:16px;font-size:12.5px;
  line-height:1.55;color:#B4BDBA}
.einwilligung input{margin-top:3px;width:16px;height:16px;accent-color:var(--gold);flex:none}
.einwilligung a{color:#fff}
.hinweis{margin-top:14px;font-size:13.5px;font-weight:700;color:var(--gold)}
.hinweis[hidden]{display:none}
.aufruf__bild{position:relative;min-height:430px}
.aufruf__bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.aufruf .punkte{left:24px;bottom:40px;width:132px;height:120px;z-index:2}

/* --- Kontakt / Karte ---------------------------------------------------- */
.karte{position:relative;background:var(--nebel)}
.karte__bild{height:440px}
.karte__bild img{width:100%;height:100%;object-fit:cover}
.karte__bahn{position:absolute;inset:0;pointer-events:none;display:flex;align-items:center}
.karte__bahn > *{pointer-events:auto}
.visite{font-style:normal;margin-left:auto;width:min(430px,46%);background:#fff;border-radius:6px;padding:36px 34px;
  box-shadow:0 26px 54px -30px rgba(0,0,0,.4);display:grid;gap:22px}
.visite__zeile{display:flex;align-items:center;gap:18px;text-decoration:none;font-size:15px;font-weight:600}
.visite__zeile svg{width:20px;height:20px}
.visite__kreis{width:46px;height:46px;border-radius:50%;background:var(--gruen);color:#fff;flex:none;
  display:grid;place-items:center;transition:background .3s var(--schwung),transform .3s var(--schwung)}
@media (hover:hover){.visite__zeile:hover{color:var(--gruen)}
  .visite__zeile:hover .visite__kreis{background:var(--gold);color:var(--gruen);transform:scale(1.08)}}

/* --- Fusszeile ---------------------------------------------------------- */
.fuss{background:var(--kohle-tief);color:#9AA3A6}
.fuss__bahn{display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding-block:30px;font-size:13.5px}
.fuss__links{display:flex;gap:26px}
.fuss a{position:relative;text-decoration:none}
.fuss a::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:var(--gold);
  transform:scaleX(0);transform-origin:left;transition:transform .3s var(--schwung)}
@media (hover:hover){.fuss a:hover{color:var(--gold)}.fuss a:hover::after{transform:scaleX(1)}}

/* --- Rechtstexte -------------------------------------------------------- */
.text-seite{padding-block:70px 96px;max-width:74ch}
.text-seite h1{font-size:clamp(28px,4vw,42px);margin-bottom:26px}
.text-seite h2{font-size:17px;margin:38px 0 12px}
.text-seite p{margin-bottom:14px;color:var(--grau)}
.text-seite a{color:var(--gruen);font-weight:700}
.mitte{text-align:center;padding-block:120px}
.mitte .knopf{margin-top:30px}

/* --- Einblenden --------------------------------------------------------- */
.zeigen{opacity:0;transform:translateY(24px);transition:opacity .7s var(--schwung),transform .7s var(--schwung)}
.zeigen.da{opacity:1;transform:none}

/* --- Schmalere Fenster -------------------------------------------------- */
@media (max-width:1160px){
  .nav{gap:18px}.nav a{font-size:10.5px}.kopf__bahn{gap:20px}
  .kopf__draht{display:none}
  .kacheln,.zahlen{grid-template-columns:repeat(2,1fr)}
  .held__raster{gap:34px}
}
@media (max-width:940px){
  .abschnitt{padding:72px 0}
  .nav,.kopf .knopf{display:none}
  .klapper{display:flex}
  .kopf__bahn{justify-content:space-between}
  .nav--offen{position:absolute;left:0;right:0;top:100%;display:flex;flex-direction:column;gap:0;
    background:var(--gruen-tief);border-bottom:1px solid rgba(255,255,255,.1);padding:8px 24px 22px;
    box-shadow:0 24px 40px -26px rgba(0,0,0,.8)}
  .nav--offen a{padding:14px 0;border-bottom:1px solid rgba(255,255,255,.08);font-size:12.5px}
  .nav--offen a::after{display:none}
  .kopf .knopf--nav{display:inline-flex;margin-top:18px;width:100%}
  .held__raster{grid-template-columns:1fr;padding-block:56px 72px}
  .held__bild{margin-right:0;border-radius:22px;order:-1}
  .held__flaeche{display:none}
  .paar,.urkunde{grid-template-columns:1fr;gap:34px}
  .buehne__bild{width:100%}
  .schritte{position:static;width:100%;margin-top:-40px;padding-inline:14px;gap:12px}
  .schritte::before{display:none}
  .aufruf{grid-template-columns:1fr}
  .aufruf__text{padding:64px 24px}
  .aufruf__bild{min-height:300px}
  .karte__bild{height:320px}
  .karte__bahn{position:static;padding:0 24px 56px}
  .visite{margin:-90px auto 0;width:min(430px,100%);position:relative}
}
@media (max-width:640px){
  .abschnitt{padding:60px 0}
  .kacheln,.zahlen{grid-template-columns:1fr}
  .kachel{min-height:0;gap:22px}
  .held__fuss{flex-direction:column;align-items:flex-start;gap:26px}
  .rollhinweis{display:none}
  .fuss__bahn{flex-direction:column;text-align:center}
  .schritt{padding:18px 66px 18px 22px}
  .klapp__inhalt p{padding-right:0}
  .visite{padding:28px 22px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
  .zeigen{opacity:1;transform:none}
}