@font-face{font-family:"Instrument Serif";src:url("type/instrument-serif.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url("type/instrument-serif-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Geist";src:url("type/geist-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Geist";src:url("type/geist-600.woff2") format("woff2");font-weight:600;font-display:swap}
:root{--nacht:#141311;--flaeche:#1f1d1a;--flaeche2:#2a2723;--papier:#ece6da;--grau:#a9a193;--bernstein:#f2a93b;--bernstein-d:#d48a17;--linie:#36322c;--serif:"Instrument Serif",Georgia,serif;--sans:"Geist",system-ui,-apple-system,"Segoe UI",sans-serif}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--nacht);color:var(--papier);font:400 1.04rem/1.7 var(--sans)}
img,svg{display:block;max-width:100%}
a{color:var(--bernstein)}
a:hover{color:#ffc56a}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.02;margin:0 0 .45em;letter-spacing:-.01em;color:#fff}
h1{font-size:clamp(3rem,1.6rem + 6vw,7rem)}
h2{font-size:clamp(2.2rem,1.4rem + 3vw,4rem)}
h3{font-size:1.75rem;line-height:1.1}
h1 em,h2 em,h3 em{color:var(--bernstein)}
p{margin:0 0 1em}
button,input,select,textarea{font:inherit;color:inherit}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--bernstein);outline-offset:3px}
.rahmen{width:min(100% - 32px,1220px);margin-inline:auto}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.springen{position:fixed;top:-200px;left:16px;z-index:400;background:var(--bernstein);color:var(--nacht);padding:.6rem 1rem}
.springen:focus{top:16px;color:var(--nacht)}
.zeile-klein{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--grau)}
.sym{width:20px;height:20px;flex:none}

/* Kopf */
.kopf{position:sticky;top:0;z-index:60;background:rgba(20,19,17,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--linie)}
.kopf-in{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:70px}
.wortmarke{display:flex;align-items:center;gap:.55rem;color:#fff;text-decoration:none;font-family:var(--serif);font-size:1.9rem;line-height:1}
.wortmarke svg{width:30px;height:30px}
.menue ul{display:flex;gap:1.6rem;list-style:none;margin:0;padding:0;align-items:center}
.menue a{color:var(--papier);text-decoration:none;font-size:.94rem}
.menue a:hover,.menue a[aria-current="page"]{color:var(--bernstein)}
.menue .ruf{border:1px solid var(--bernstein);color:var(--bernstein);padding:.5rem 1rem;border-radius:999px}
.menue .ruf:hover{background:var(--bernstein);color:var(--nacht)}
.menue-knopf{display:none;align-items:center;gap:.4rem;background:none;border:1px solid var(--linie);color:var(--papier);border-radius:999px;padding:.45rem .95rem;cursor:pointer}
@media (max-width:920px){
  .menue-knopf{display:inline-flex}
  .menue{display:none;position:absolute;left:0;right:0;top:100%;background:var(--nacht);border-bottom:1px solid var(--linie);padding:1.2rem 16px 1.6rem}
  .menue.ist-offen{display:block}
  .menue ul{flex-direction:column;align-items:flex-start;gap:1.1rem}
}

/* Knöpfe */
.taste{display:inline-flex;align-items:center;gap:.6rem;padding:.95rem 1.5rem;border-radius:999px;background:var(--bernstein);color:var(--nacht);border:1px solid var(--bernstein);font-weight:600;text-decoration:none;cursor:pointer;line-height:1.2}
.taste:hover{background:#ffc56a;border-color:#ffc56a;color:var(--nacht)}
.taste.hohl{background:transparent;color:var(--papier);border-color:var(--linie)}
.taste.hohl:hover{border-color:var(--papier);color:#fff}
.taste:disabled{opacity:.6;cursor:wait}

/* Auftakt */
.auftakt{padding:clamp(3rem,7vw,6rem) 0 clamp(3rem,6vw,5rem);border-bottom:1px solid var(--linie)}
.auftakt-grid{display:grid;grid-template-columns:1.55fr .85fr;gap:clamp(2rem,5vw,5rem);align-items:end}
.auftakt .vorspann{font-size:1.2rem;color:var(--grau);max-width:36rem}
.auftakt .tasten{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.8rem}
.kapitel{list-style:none;margin:0;padding:0;border-top:1px solid var(--linie)}
.kapitel li{border-bottom:1px solid var(--linie)}
.kapitel a{display:grid;grid-template-columns:2.4rem 1fr auto;gap:.6rem;align-items:center;padding:.85rem 0;color:var(--papier);text-decoration:none}
.kapitel a:hover{color:var(--bernstein)}
.kapitel span{font-family:var(--serif);font-size:1.3rem;color:var(--bernstein)}
@media (max-width:880px){.auftakt-grid{grid-template-columns:1fr}}

/* Zitat-Band */
.band{background:var(--flaeche);border-bottom:1px solid var(--linie)}
.band-in{display:grid;grid-template-columns:repeat(3,1fr)}
.band-in div{padding:1.6rem 1.4rem;border-right:1px solid var(--linie)}
.band-in div:last-child{border-right:0}
.band-in b{display:block;font-family:var(--serif);font-weight:400;font-size:1.6rem;color:#fff;line-height:1.1;margin-bottom:.3rem}
.band-in span{color:var(--grau);font-size:.93rem}
@media (max-width:800px){.band-in{grid-template-columns:1fr}.band-in div{border-right:0;border-bottom:1px solid var(--linie)}}

/* Abschnitte */
.teil{padding:clamp(4rem,9vw,7rem) 0;border-bottom:1px solid var(--linie)}
.teil.hell{background:var(--papier);color:#2a2620}
.teil.hell h2,.teil.hell h3{color:#141311}
.teil.hell h2 em{color:#b5650a}
.teil-kopf{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:end;margin-bottom:3rem}
.teil-kopf p{color:var(--grau);margin:0;max-width:30rem}
.teil.hell .teil-kopf p{color:#5d564b}
@media (max-width:820px){.teil-kopf{grid-template-columns:1fr}}

/* Anwendungen */
.reiter-leiste{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1.4rem}
.reiter-leiste button{background:transparent;border:1px solid var(--linie);color:var(--papier);border-radius:999px;padding:.45rem .95rem;font-size:.9rem;cursor:pointer}
.reiter-leiste button[aria-pressed="true"]{background:var(--papier);color:var(--nacht);border-color:var(--papier)}
.liste{border-top:1px solid var(--linie)}
.eintrag{position:relative;display:grid;grid-template-columns:5rem 1.1fr 1.4fr 3rem;gap:1.5rem;align-items:center;padding:1.8rem 0;border-bottom:1px solid var(--linie)}
.eintrag:hover h3{color:var(--bernstein)}
.eintrag .zahl{font-family:var(--serif);font-size:3rem;line-height:1;color:var(--grau)}
.eintrag h3{margin:0;transition:color .2s}
.eintrag h3 a{color:inherit;text-decoration:none}
.eintrag h3 a::after{content:"";position:absolute;inset:0}
.eintrag small{display:block;color:var(--grau);margin-top:.35rem;font-size:.85rem;letter-spacing:.06em;text-transform:uppercase}
.eintrag p{margin:0;color:var(--grau)}
.eintrag .pfeil{width:3rem;height:3rem;border:1px solid var(--linie);border-radius:50%;display:grid;place-items:center;color:var(--bernstein)}
@media (max-width:860px){.eintrag{grid-template-columns:3rem 1fr;gap:.6rem 1rem}.eintrag p{grid-column:2}.eintrag .pfeil{display:none}.eintrag .zahl{font-size:2rem}}

/* Notizblock-Demo */
.werkbank{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.faelle{list-style:none;margin:1.6rem 0;padding:0;border-top:1px solid #cfc6b6}
.faelle li{border-bottom:1px solid #cfc6b6}
.faelle button{width:100%;text-align:left;background:none;border:0;padding:1rem 0;cursor:pointer;display:flex;justify-content:space-between;gap:1rem;color:#2a2620;font-size:1rem}
.faelle button span{color:#7a7266;font-size:.88rem}
.faelle button[aria-pressed="true"]{color:#b5650a;font-weight:600}
.block{background:#fffdf7;border:1px solid #d8cfbf;border-radius:4px;box-shadow:0 30px 50px -35px rgba(0,0,0,.45);background-image:repeating-linear-gradient(transparent 0 31px,#efe7d8 31px 32px)}
.block-teil{padding:1.2rem 1.4rem}
.block-teil+.block-teil{border-top:2px dashed #d8cfbf;background:rgba(242,169,59,.08)}
.block h3{font-family:var(--sans);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:#7a7266;margin-bottom:.6rem}
.block-teil+.block-teil h3{color:#b5650a}
.block pre{margin:0;font:inherit;white-space:pre-wrap;color:#2a2620;line-height:2}
.block-fuss{display:flex;justify-content:space-between;align-items:center;gap:.6rem;flex-wrap:wrap;padding:.8rem 1.4rem;border-top:1px solid #d8cfbf;font-size:.86rem;color:#7a7266}
.block-fuss button{background:#141311;color:#fff;border:0;border-radius:999px;padding:.45rem .95rem;cursor:pointer}
@media (max-width:860px){.werkbank{grid-template-columns:1fr}}

/* Wochen */
.wochen{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--linie);border:1px solid var(--linie)}
.wochen div{background:var(--nacht);padding:1.5rem}
.wochen .zeile-klein{color:var(--bernstein);display:block;margin-bottom:.8rem}
.wochen h3{font-size:1.6rem}
.wochen p{color:var(--grau);margin:0;font-size:.96rem}
@media (max-width:900px){.wochen{grid-template-columns:1fr 1fr}}
@media (max-width:540px){.wochen{grid-template-columns:1fr}}

/* Regeln */
.regeln{display:grid;grid-template-columns:1fr 1fr;gap:3rem}
.regeln ol{margin:0;padding:0;list-style:none;counter-reset:rg}
.regeln li{counter-increment:rg;display:grid;grid-template-columns:3rem 1fr;gap:.6rem;padding:1rem 0;border-bottom:1px solid var(--linie)}
.regeln li::before{content:counter(rg,upper-roman);font-family:var(--serif);font-size:1.6rem;color:var(--bernstein);line-height:1.1}
.regeln p{margin:0;color:var(--grau)}
@media (max-width:820px){.regeln{grid-template-columns:1fr;gap:1rem}}

/* Journal */
.journal{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem}
.beitrag{display:block;text-decoration:none;color:var(--papier);border-top:1px solid var(--linie);padding-top:1.4rem}
.beitrag .zeile-klein{color:var(--bernstein)}
.beitrag h3{font-size:2.2rem;margin:.8rem 0 .6rem}
.beitrag:hover h3{color:var(--bernstein)}
.beitrag p{color:var(--grau);margin:0}
@media (max-width:760px){.journal{grid-template-columns:1fr}}

/* FAQ */
.fragen{max-width:860px}
.fragen details{border-top:1px solid #cfc6b6}
.fragen details:last-child{border-bottom:1px solid #cfc6b6}
.fragen summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:1rem;padding:1.3rem 0;font-family:var(--serif);font-size:1.6rem;line-height:1.15;color:#141311}
.fragen summary::-webkit-details-marker{display:none}
.fragen summary::after{content:"+";font-family:var(--sans);font-size:1.4rem;color:#b5650a}
.fragen details[open] summary::after{content:"−"}
.fragen details p{color:#4b453c;padding-bottom:1.3rem;margin:0}
.teil:not(.hell) .fragen details{border-color:var(--linie)}
.teil:not(.hell) .fragen summary{color:#fff}
.teil:not(.hell) .fragen details p{color:var(--grau)}

/* Anfrage */
.anfrage{padding:clamp(4rem,9vw,7rem) 0;border-bottom:1px solid var(--linie);background:radial-gradient(circle at 15% 20%,rgba(242,169,59,.16),transparent 45%),var(--nacht)}
.anfrage-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
.kanaele{list-style:none;margin:1.8rem 0 0;padding:0;border-top:1px solid var(--linie)}
.kanaele li{border-bottom:1px solid var(--linie)}
.kanaele a,.kanaele .z{display:flex;gap:.8rem;align-items:center;padding:1rem 0;color:var(--papier);text-decoration:none}
.kanaele a:hover{color:var(--bernstein)}
.kanaele .zeile-klein{display:block}
.kanaele svg{color:var(--bernstein)}
@media (max-width:860px){.anfrage-grid{grid-template-columns:1fr}}
.formular{background:var(--flaeche);border:1px solid var(--linie);border-radius:6px;padding:clamp(1.2rem,3vw,2.2rem)}
.formular h3{font-size:2.1rem}
.feld{margin-bottom:1.1rem}
.feld label{display:block;font-size:.88rem;color:var(--grau);margin-bottom:.3rem}
.feld input,.feld select,.feld textarea{width:100%;padding:.75rem .9rem;background:var(--nacht);border:1px solid var(--linie);border-radius:4px;color:var(--papier)}
.feld select option{background:var(--nacht)}
.feld input:focus,.feld select:focus,.feld textarea:focus{outline:none;border-color:var(--bernstein);box-shadow:0 0 0 3px rgba(242,169,59,.25)}
.feld textarea{min-height:120px;resize:vertical}
.feld small{display:block;font-size:.8rem;color:var(--grau);margin-top:.3rem}
.feld [aria-invalid="true"]{border-color:#ff6b4a}
.doppel{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
@media (max-width:540px){.doppel{grid-template-columns:1fr}}
.zustimmung{display:flex;gap:.6rem;align-items:flex-start;font-size:.88rem;color:var(--grau);margin:.3rem 0 1.1rem}
.zustimmung input{width:20px;height:20px;flex:none;margin-top:.15rem;accent-color:var(--bernstein)}
.honig{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.f-status{min-height:1.4em;margin:.8rem 0 0;font-size:.9rem;font-weight:600;color:#ff8a6b}
.f-status.ok{color:#9fdc8a}
.kleingedruckt{font-size:.78rem;color:var(--grau);line-height:1.55;margin:1rem 0 0}

/* Innenseiten */
.innen-kopf{padding:clamp(3rem,7vw,5.5rem) 0 clamp(2rem,4vw,3rem);border-bottom:1px solid var(--linie)}
.innen-kopf h1{font-size:clamp(2.6rem,1.6rem + 4vw,5rem);max-width:18ch}
.innen-kopf p{font-size:1.18rem;color:var(--grau);max-width:42rem;margin:0}
.krumen{margin-bottom:1.2rem}
.krumen a{color:var(--grau);text-decoration:none}
.lesetext{max-width:44rem}
.lesetext h2{font-size:2.2rem;margin-top:2.6rem}
.lesetext h2:first-child{margin-top:0}
.lesetext ul,.lesetext ol{padding-left:1.25rem}
.lesetext li{margin-bottom:.45rem}
.lesetext p,.lesetext li{color:#d9d2c4}
.spalten{display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.spalten>*,.werkbank>*,.anfrage-grid>*,.auftakt-grid>*{min-width:0}
.randnotiz{position:sticky;top:90px;border-left:1px solid var(--bernstein);padding-left:1.4rem}
.randnotiz h2{font-size:1.8rem;margin-top:0}
.randnotiz ul{padding-left:1.1rem;color:var(--grau)}
@media (max-width:900px){.spalten{grid-template-columns:1fr}.randnotiz{position:static}}
.merke{border:1px solid var(--linie);background:var(--flaeche);padding:1.1rem 1.3rem;margin:1.6rem 0;border-radius:4px}
.merke.warn{border-color:#5a3d16;background:#2a1f10}
.merke p:last-child{margin:0}
.vorher-nachher{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--linie);margin:1rem 0}
.vorher-nachher>div{padding:1.2rem}
.vorher-nachher>div+div{background:var(--papier);color:#2a2620}
.vorher-nachher h3{font-family:var(--sans);font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--grau);margin-bottom:.6rem}
.vorher-nachher>div+div h3{color:#b5650a}
.vorher-nachher pre{margin:0;white-space:pre-wrap;font:inherit;font-size:.96rem}
@media (max-width:640px){.vorher-nachher{grid-template-columns:1fr}}
.tabelle-wrap{overflow-x:auto;border:1px solid var(--linie);margin:1rem 0 1.4rem}
.tabelle-wrap table{width:100%;border-collapse:collapse;font-size:.9rem;min-width:600px}
.tabelle-wrap th,.tabelle-wrap td{text-align:left;vertical-align:top;padding:.7rem .85rem;border-bottom:1px solid var(--linie);color:#d9d2c4}
.tabelle-wrap thead th{background:var(--flaeche2);color:#fff}
.tabelle-wrap code{color:var(--bernstein)}
.zentriert{text-align:center;max-width:40rem;margin-inline:auto}
.riesenzahl{font-family:var(--serif);font-style:italic;font-size:clamp(6rem,16vw,11rem);line-height:.9;color:var(--bernstein);margin:0 0 .4rem}
.tastenreihe{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.8rem}
.zentriert .tastenreihe{justify-content:center}

/* Fuß */
.fuss{padding:3.4rem 0 1.6rem;font-size:.94rem;color:var(--grau)}
.fuss a{color:var(--papier)}
.fuss-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2rem}
.fuss h2{font-family:var(--sans);font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--grau);margin-bottom:.9rem}
.fuss ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.fuss .knopftext{background:none;border:0;padding:0;color:var(--papier);text-decoration:underline;cursor:pointer}
.fuss-schluss{margin-top:2.6rem;padding-top:1.2rem;border-top:1px solid var(--linie);display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem;font-size:.82rem}
@media (max-width:900px){.fuss-grid{grid-template-columns:1fr 1fr}}
@media (max-width:540px){.fuss-grid{grid-template-columns:1fr}}

/* Einwilligung */
.cb{position:fixed;left:0;right:0;bottom:0;z-index:200;background:var(--papier);color:#2a2620;border-top:3px solid var(--bernstein);padding:1.1rem 0}
.cb-in{display:grid;grid-template-columns:1fr auto;gap:1rem 2rem;align-items:center}
.cb h2{font-family:var(--serif);font-size:1.6rem;color:#141311;margin:0 0 .2rem}
.cb p{margin:0;font-size:.9rem;color:#4b453c}
.cb a{color:#8a4b05}
.cb-knoepfe{display:grid;grid-template-columns:repeat(3,auto);gap:.5rem}
.cb-knoepfe button{border:1px solid #141311;background:transparent;color:#141311;border-radius:999px;padding:.6rem 1.1rem;font-weight:600;font-size:.9rem;cursor:pointer}
.cb-knoepfe button:hover{background:#141311;color:#fff}
@media (max-width:820px){.cb-in{grid-template-columns:1fr}.cb-knoepfe{grid-template-columns:1fr 1fr 1fr}}
@media (max-width:460px){.cb-knoepfe{grid-template-columns:1fr}}
.cb-dialog{border:1px solid var(--linie);background:var(--flaeche);color:var(--papier);border-radius:8px;padding:0;width:calc(100% - 32px);max-width:540px}
.cb-dialog::backdrop{background:rgba(0,0,0,.7)}
.cb-dialog-in{padding:1.6rem}
.cb-dialog h2{font-size:2rem}
.cb-dialog .cb-knoepfe button{border-color:var(--papier);color:var(--papier)}
.cb-dialog .cb-knoepfe button:hover{background:var(--papier);color:var(--nacht)}
.cb-zeile{display:flex;justify-content:space-between;gap:1rem;padding:.9rem 0;border-top:1px solid var(--linie)}
.cb-zeile h3{font-family:var(--sans);font-size:1rem;margin:0 0 .2rem}
.cb-zeile p{font-size:.86rem;color:var(--grau);margin:0}
.cb-zeile input{width:22px;height:22px;flex:none;accent-color:var(--bernstein)}
.cb-zu{float:right;border:1px solid var(--linie);background:transparent;color:var(--papier);width:36px;height:36px;border-radius:50%;cursor:pointer;font-size:1.2rem}
.cb-info{position:fixed;left:16px;bottom:16px;z-index:210;background:var(--bernstein);color:var(--nacht);padding:.75rem 1.1rem;border-radius:999px;font-size:.9rem;max-width:calc(100% - 32px)}

/* Lange deutsche Wörter sauber umbrechen */
h1,h2,h3{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}