:root{
  --grund:#1A1512;
  --flaeche:#26201B;
  --text:#F0EAE2;
  --akzent:#D89A5B;
  --gedaempft:#8C837A;
  --kante:rgba(240,234,226,.14);
}
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--grund);
  color:var(--text);
  font-family:"Roboto Slab",Georgia,serif;
  font-weight:400;
  font-size:1.02rem;
  line-height:1.72;
}
@media(min-width:901px){
  body{font-size:1.06rem;}
}
img{max-width:100%;height:auto;display:block;}
a{color:var(--akzent);text-decoration:none;}
a:hover{color:#E6AE73;}
p{margin:0 0 1em;}
p:last-child{margin-bottom:0;}
h1,h2,h3{
  font-family:Barlow,"Segoe UI",Arial,sans-serif;
  font-weight:700;
  letter-spacing:-0.01em;
  line-height:1.18;
  margin:0 0 .6em;
  text-transform:none;
}
h1{font-size:clamp(2.1rem,4.4vw,3.4rem);}
h2{font-size:clamp(1.5rem,2.4vw,2.1rem);}
h3{font-size:1.18rem;font-weight:600;}
ul,ol{margin:0 0 1em;padding-left:1.2em;}
table{width:100%;border-collapse:collapse;font-family:"Roboto Slab",Georgia,serif;}
th,td{border-bottom:1px solid var(--kante);padding:12px 10px;text-align:left;vertical-align:top;}
th{font-family:Barlow,"Segoe UI",Arial,sans-serif;font-weight:600;letter-spacing:-0.01em;color:var(--akzent);}

/* Seitengerüst: Seitenleiste + Inhalt */
.rahmen{
  display:grid;
  grid-template-columns:248px 1fr;
  min-height:100vh;
}
.rail{
  position:sticky;
  top:0;
  height:100vh;
  background:var(--flaeche);
  border-right:1px solid var(--kante);
  padding:28px 22px;
  display:flex;
  flex-direction:column;
  gap:26px;
  overflow-y:auto;
}
.rail__marke{
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--text);
  font-family:Barlow,"Segoe UI",Arial,sans-serif;
  font-weight:700;
  font-size:1.02rem;
  letter-spacing:-0.01em;
  line-height:1.15;
}
.rail__marke:hover{color:var(--text);}
.rail__marke svg{flex-shrink:0;}
.rail__gruppe{
  margin:0;
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gedaempft);
  font-family:Barlow,"Segoe UI",Arial,sans-serif;
  font-weight:600;
  line-height:1.45;
}
.rail__nav ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.rail__nav{flex:1;}
.rail__link{
  display:block;
  color:var(--text);
  font-family:Barlow,"Segoe UI",Arial,sans-serif;
  font-weight:600;
  letter-spacing:-0.01em;
  padding:7px 0;
}
.rail__link:hover{color:var(--akzent);}
.rail__link--aktiv{
  color:var(--akzent);
  border-left:3px solid var(--akzent);
  padding-left:11px;
}
.rail__ruf{width:100%;text-align:center;}
.rail__fuss{
  font-size:.88rem;
  color:var(--gedaempft);
  line-height:1.55;
}
.rail__fuss p{margin:0;}
.rail__fuss a{color:var(--gedaempft);}
.haupt{
  padding:clamp(28px,4vw,64px);
  max-width:1180px;
  width:100%;
}
a[href="#inhalt"]:focus{
  position:fixed !important;
  left:16px !important;
  top:16px !important;
  z-index:30;
  padding:8px 14px;
  background:var(--flaeche);
}

.knopf{
  display:inline-block;
  font-family:Barlow,"Segoe UI",Arial,sans-serif;
  font-weight:600;
  letter-spacing:-0.01em;
  font-size:.98rem;
  line-height:1.2;
  padding:12px 20px;
  border-radius:8px;
  border:1px solid transparent;
  cursor:pointer;
  text-decoration:none;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.knopf--voll{
  background:var(--akzent);
  color:#1F2937;
  border-color:var(--akzent);
}
.knopf--voll:hover{
  background:#E6AE73;
  color:#1F2937;
  border-color:#E6AE73;
}
.knopf--linie{
  background:transparent;
  color:var(--text);
  border-color:var(--akzent);
}
.knopf--linie:hover{
  background:rgba(216,154,91,.16);
  color:var(--text);
}
.buehne__text p + .knopf,
.buehne__text .knopf + .knopf,
.band .knopf{margin-top:8px;}
.buehne__text .knopf + .knopf,
.knopf + .knopf{margin-left:10px;}

/* Zweispaltige Grundfigur */
.duo{
  display:grid;
  grid-template-columns:2fr 3fr;
  gap:clamp(24px,3.4vw,54px);
  align-items:center;
}
.duo--gedreht{grid-template-columns:3fr 2fr;}

/* Bühne und Kennzahlen */
.buehne{margin-bottom:clamp(20px,3vw,36px);}
.buehne__text p{color:var(--text);}
.buehne__bild img,
.fall__bild img{
  width:100%;
  height:100%;
  min-height:280px;
  max-height:460px;
  object-fit:cover;
  border-radius:12px;
}
.buehne__zahlen{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
  margin-top:32px;
}
.zahl{
  padding:4px 0;
}
.zahl__wert{
  font-family:Barlow,"Segoe UI",Arial,sans-serif;
  font-weight:700;
  font-size:clamp(1.8rem,3vw,2.4rem);
  color:var(--akzent);
  letter-spacing:-0.01em;
  line-height:1.1;
}
.zahl__text{
  display:block;
  margin-top:6px;
  color:var(--gedaempft);
  font-size:.88rem;
  line-height:1.4;
}
.band{
  padding-block:clamp(40px,5vw,78px);
  border-top:1px solid var(--kante);
}
.band--flaeche{
  background:var(--flaeche);
  border-radius:14px;
  padding:clamp(28px,4vw,48px);
  border-top:none;
  margin-block:8px;
}
.band__kopf{margin-bottom:28px;max-width:42rem;}
.band__titel{margin-bottom:.4em;}
.band__intro{color:var(--text);}

/* Kacheln und Fälle */
.kachelfeld{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(265px,1fr));
  gap:20px;
}
.kachel{
  background:var(--flaeche);
  border:1px solid var(--kante);
  border-radius:12px;
  padding:22px 20px;
}
.band--flaeche .kachel{background:var(--grund);}
.kachel__titel{margin-bottom:.45em;}
.kachel__text{margin-bottom:.8em;}
.kachel__meta{
  color:var(--gedaempft);
  font-size:.88rem;
  font-family:Barlow,"Segoe UI",Arial,sans-serif;
  font-weight:600;
  letter-spacing:-0.01em;
}
.fall{margin-bottom:clamp(28px,4vw,48px);}
.fall:last-child{margin-bottom:0;}
.fall__fakten{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(110px,1fr));
  gap:14px;
  margin:22px 0;
}
.faktum{
  border-top:1px solid var(--kante);
  padding-top:10px;
}
.faktum__wert{
  display:block;
  font-family:Barlow,"Segoe UI",Arial,sans-serif;
  font-weight:700;
  color:var(--akzent);
  letter-spacing:-0.01em;
  font-size:1.15rem;
}
.schritte{display:flex;flex-direction:column;gap:22px;}
.schritt{
  display:grid;
  grid-template-columns:140px 1fr;
  gap:22px;
  align-items:start;
}
.schritt__nr{
  font-family:Barlow,"Segoe UI",Arial,sans-serif;
  font-weight:700;
  color:var(--akzent);
  letter-spacing:-0.01em;
  font-size:1.02rem;
}
.schritt__text p{margin-bottom:.7em;}
.tarif{
  background:var(--grund);
  border:1px solid var(--kante);
  border-radius:12px;
  padding:24px 22px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.band:not(.band--flaeche) .tarif{background:var(--flaeche);}
.tarif--hervor{border-color:var(--akzent);}
.tarif__preis{
  font-family:Barlow,"Segoe UI",Arial,sans-serif;
  font-weight:700;
  font-size:clamp(1.8rem,3vw,2.3rem);
  color:var(--akzent);
  letter-spacing:-0.01em;
  line-height:1;
}
.tarif__einheit{color:var(--gedaempft);font-size:.88rem;}
.tarif__liste{margin:0;padding-left:1.1em;}
.tarif__hinweis{color:var(--gedaempft);font-size:.88rem;}
.frage{
  border-top:1px solid var(--kante);
  padding:14px 0;
}
.frage:last-of-type{border-bottom:1px solid var(--kante);}
.frage__titel{
  cursor:pointer;
  font-family:Barlow,"Segoe UI",Arial,sans-serif;
  font-weight:600;
  letter-spacing:-0.01em;
  list-style:none;
  color:var(--text);
}
.frage__titel::-webkit-details-marker{display:none;}
.frage__antwort{margin-top:10px;padding-bottom:6px;}
.hinweis{color:var(--gedaempft);font-size:.88rem;}

/* Formular und Dankeblock */
.formular{display:grid;gap:16px;max-width:36rem;}
.feld{display:flex;flex-direction:column;gap:6px;}
.feld__label{
  font-family:Barlow,"Segoe UI",Arial,sans-serif;
  font-weight:600;
  font-size:.92rem;
  letter-spacing:-0.01em;
}
.feld__eingabe{
  background:var(--grund);
  color:var(--text);
  border:1px solid var(--kante);
  border-radius:8px;
  padding:11px 12px;
  font-family:"Roboto Slab",Georgia,serif;
  font-size:1rem;
  width:100%;
}
.feld__eingabe:focus{
  outline:2px solid var(--akzent);
  outline-offset:1px;
}
textarea.feld__eingabe{min-height:140px;resize:vertical;}
.feld__fehler{color:#E6AE73;font-size:.86rem;min-height:1em;}
.falle{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}
.danke{
  background:var(--flaeche);
  border:1px solid var(--akzent);
  border-radius:12px;
  padding:22px 20px;
}
.kartenbox{
  aspect-ratio:16/10;
  border-radius:12px;
  overflow:hidden;
  border:1px solid var(--kante);
}
.kartenbox iframe{width:100%;height:100%;border:0;}

/* Cookie-Leiste */
.keks{
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  z-index:40;
  background:var(--flaeche);
  border-top:2px solid var(--akzent);
  padding:18px 22px;
  display:flex;
  gap:20px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
}
.keks[hidden="false"]{display:flex !important;}
.keks[hidden=""]{display:none !important;}
.keks__text{margin:0;max-width:52rem;font-size:.95rem;}
.keks__knoepfe{display:flex;gap:10px;flex-wrap:wrap;}
.leiste{
  border-top:1px solid var(--kante);
  padding:18px 22px 28px;
  color:var(--gedaempft);
  font-size:.88rem;
  display:flex;
  flex-wrap:wrap;
  gap:6px 0;
  align-items:center;
}
.leiste a{color:var(--gedaempft);}
.leiste a:hover{color:var(--akzent);}
.leiste__punkt{margin:0 8px;color:var(--gedaempft);}

/* Sichtbarkeit ohne Skript */
.anheben{opacity:1;transform:none;transition:opacity .5s ease,transform .5s ease;}
html.js .anheben{opacity:0;transform:translateY(14px);}
html.js .anheben--sichtbar{opacity:1;transform:none;}
html.no-js .anheben{opacity:1 !important;transform:none !important;}
@media (prefers-reduced-motion: reduce){
  .anheben,html.js .anheben{opacity:1 !important;transform:none !important;transition:none;}
}

/* Schmale Ansicht */
@media(max-width:900px){
  .rahmen{grid-template-columns:1fr;}
  .rail{
    position:static;
    height:auto;
    border-right:none;
    border-bottom:1px solid var(--kante);
  }
  .rail__nav ul{
    display:flex;
    flex-direction:row;
    gap:18px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .rail__link{white-space:nowrap;}
  .duo,.duo--gedreht{grid-template-columns:1fr;}
  .buehne__zahlen{grid-template-columns:repeat(2,1fr);}
  .schritt{grid-template-columns:1fr;gap:8px;}
  .knopf + .knopf{margin-left:0;margin-top:10px;}
  .buehne__text .knopf{margin-right:8px;}
}