/* Papier: alles unterhalb der Bühne und alle Unterseiten. Farben und Schrift nach Inhaltspaket, Abschnitt 2. */
:root{--paper:#F7F2E9;--surface:#FFFCF6;--ink:#173844;--muted:#4F6468;--action:#285F4F;--action-h:#1F4B3F;--ochre:#D9AC62;--coral:#DF705F;--night:#0e252d;--night2:#22474d;--line:#e2dcd1}
.papier{background:var(--paper);color:var(--ink);font:18px/1.6 Arial,Helvetica,sans-serif}
.papier a{color:var(--action)}
.papier a:hover{color:var(--action-h)}
.papier a:visited:not(.knopf):not(.marke){color:#1F4B3F}
.wrap{max-width:1100px;margin:auto;padding:0 16px}
.schmal{max-width:760px}
h1,h2,h3{font-family:Fraunces,Georgia,serif;font-weight:600;line-height:1.1;letter-spacing:-.01em;text-wrap:balance}
.papier h1{font-size:clamp(32px,4.4vw,56px);margin-bottom:16px}
.papier h2{font-size:clamp(28px,3.4vw,44px);margin-bottom:16px}
.papier h3{font-size:clamp(22px,2.2vw,28px);margin-bottom:8px}
.papier p+p{margin-top:14px}
.lead{font:400 clamp(18px,1.4vw,21px)/1.55 Fraunces,Georgia,serif;max-width:60ch}
.knopf{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:12px 24px;border-radius:10px;background:var(--ochre);color:var(--ink)!important;font:700 17px/1.2 Arial,Helvetica,sans-serif;text-decoration:none;transition:background .14s,transform .14s}
.knopf:hover{background:#e6bd78;transform:translateY(-1px)}
.knopf:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.knopf.leise{background:transparent;color:var(--action)!important;border:2px solid var(--action)}
.knopf.leise:hover{background:#285f4f14}
.weiter{display:inline-block;margin-top:24px;font-weight:700}
.papier :focus-visible{outline:3px solid var(--action);outline-offset:3px}
/* Kopfzeile der Unterseiten */
.kopf{background:var(--paper);border-bottom:1px solid var(--line)}
.kopf .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px;min-height:72px;padding-top:10px;padding-bottom:10px}
.marke{font:600 clamp(17px,1.6vw,21px)/1.2 Fraunces,Georgia,serif;color:var(--ink)!important;text-decoration:none}
.kopf nav{display:flex;flex-wrap:wrap;gap:6px 22px;align-items:center;font:700 15px/1.3 Arial,Helvetica,sans-serif}
.kopf nav a{text-decoration:none;padding:8px 0}
.kopf nav a[aria-current]{background-image:linear-gradient(var(--coral),var(--coral));background-repeat:no-repeat;background-position:0 100%;background-size:100% 3px}
.kopf .knopf{min-height:44px;padding:10px 18px;font-size:15px}
/* Beweisleiste unter der Bühne */
.beweise{list-style:none;margin:0;padding:20px 16px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px 24px;max-width:1100px;margin-inline:auto;border-bottom:1px solid var(--line)}
.beweise li{display:flex;align-items:center;gap:12px;font:700 15px/1.35 Arial,Helvetica,sans-serif}
.beweise img{height:44px;width:auto;flex-shrink:0}
/* Marken im Abschnitt Wer das baut: gleiche optische Höhe, Originale */
.marken{display:flex;flex-wrap:wrap;align-items:center;gap:24px 32px;margin-top:24px}
.marken a,.marken span{display:inline-flex;align-items:center}
.wer .marken img,.marken img{height:44px;width:auto;max-width:200px;display:block;object-fit:contain}
.wer .marken img.quadratisch,.marken img.quadratisch{height:56px}
.marken a:focus-visible{outline:3px solid var(--action);outline-offset:4px;border-radius:6px}
/* Offene Punkte */
.offen{padding-left:20px;display:grid;gap:6px;margin:16px 0}
.situationen h3{font-size:clamp(20px,2vw,26px)}
/* Stationen */
.station{position:relative;padding:clamp(56px,9vw,112px) 0}
.station+.station{border-top:1px solid var(--line)}
.station .text{max-width:62ch}
.drei{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,56px);margin-top:clamp(32px,4vw,56px);align-items:start}
.szene img{width:100%;height:auto;max-height:360px;object-fit:contain;object-position:bottom}
.szene h3{margin-top:20px}
.zitat{margin:16px 0 0;font:italic 500 clamp(19px,1.7vw,24px)/1.35 Fraunces,Georgia,serif;color:var(--ink)}
.zitat b{display:block;font:700 12px/1 Arial,Helvetica,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--coral);margin-bottom:8px;font-style:normal}
.tage{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,56px);margin-top:clamp(32px,4vw,56px)}
.tag img{width:100%;height:auto;max-height:320px;object-fit:contain;object-position:bottom}
.tag h3{margin-top:20px}
.fakten{list-style:none;padding:0;margin:clamp(40px,5vw,64px) 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px 32px;font-weight:700}
.fakten li{padding-top:14px;border-top:3px solid var(--coral)}
.fakten .zitat{margin-top:12px;font-size:17px;font-weight:500}
.wer{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,5vw,72px);align-items:center}
.wer img{width:100%;height:auto}
.absender{margin-top:24px;font:600 clamp(17px,1.4vw,20px)/1.5 Fraunces,Georgia,serif}
/* Figurenreaktion: eine je Station beim Erreichen */
.figur{position:absolute;right:16px;bottom:24px;height:clamp(56px,7vw,96px);pointer-events:none;opacity:.95}
.figur img{height:100%;width:auto;transform-origin:50% 100%}
.figur.links{right:auto;left:16px}
.js .station.in .figur img{animation:figur-hop .9s cubic-bezier(.3,.7,.4,1) .3s 1}
@keyframes figur-hop{30%{transform:translateY(-16%) rotate(-3deg)}62%{transform:translateY(0) scaleY(.94)}80%{transform:translateY(-4%)}}
/* Fragen */
.fragen{display:grid;gap:12px;margin-top:clamp(24px,3vw,40px);max-width:860px}
.fragen details{background:var(--surface);border:1px solid var(--line);border-radius:14px}
.fragen summary{cursor:pointer;padding:16px 20px;font:700 17px/1.5 Arial,Helvetica,sans-serif;list-style:none;display:flex;justify-content:space-between;gap:16px}
.fragen summary::-webkit-details-marker{display:none}
.fragen summary::after{content:"+";font-size:24px;line-height:1;color:var(--action);flex-shrink:0;transition:transform .14s}
.fragen details[open] summary::after{transform:rotate(45deg)}
.fragen .antwort{padding:0 20px 20px}
/* Bilderbuch */
.buch{display:grid;gap:clamp(48px,7vw,88px);margin-top:clamp(32px,4vw,56px)}
.buch figure{margin:0}
.buch img{width:100%;height:auto;border-radius:6px}
.buch figcaption{margin-top:18px;font:400 clamp(19px,1.7vw,24px)/1.6 Fraunces,Georgia,serif;max-width:60ch}
.buch .nr{font:700 12px/1 Arial,Helvetica,sans-serif;letter-spacing:.14em;color:var(--coral);margin-bottom:10px}
/* Besuch */
.besuch{display:grid;gap:clamp(40px,6vw,72px);margin-top:clamp(32px,4vw,56px)}
.besuch section{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:clamp(20px,4vw,48px);align-items:center}
.besuch img{width:100%;height:auto;max-height:260px;object-fit:contain}
/* Pflichtseiten */
.recht{padding:clamp(48px,7vw,88px) 0;overflow-wrap:anywhere}
.papier{overflow-wrap:break-word}
.recht h2{font-size:24px;margin:32px 0 8px}
.recht address{font-style:normal}
/* Fuß */
.fuss{background:var(--ink);color:#dfe6e2;padding:40px 16px;font-size:15px}
.fuss .wrap{display:grid;gap:16px}
.fuss nav{display:flex;flex-wrap:wrap;gap:8px 22px}
.fuss a{color:var(--ochre)}
.fuss .plan{color:#cfd9d6}
/* Einblenden beim Scrollen; ohne JS und bei reduzierter Bewegung sofort da */
.js .reveal{opacity:0;translate:0 26px;transition:opacity .8s ease,translate .8s cubic-bezier(.2,.7,.2,1)}
.js .reveal.in{opacity:1;translate:0 0}
.js .reveal.gruppe>*{transition-delay:calc(var(--i,0)*90ms)}
@media (max-width:860px){
 .beweise{grid-template-columns:1fr 1fr}
 .wer .marken img,.marken img{height:36px}.wer .marken img.quadratisch,.marken img.quadratisch{height:46px}
 .drei,.tage{grid-template-columns:1fr}
 .fakten{grid-template-columns:1fr 1fr}
 .wer{grid-template-columns:1fr}
 .besuch section{grid-template-columns:1fr}
 .besuch img{max-height:200px;object-position:left}
 .figur{height:48px;bottom:12px}
}
@media (max-width:480px){
 .beweise{grid-template-columns:1fr}
 .fakten{grid-template-columns:1fr}
 .kopf nav{gap:6px 14px;font-size:14px}
}
@media (prefers-reduced-motion:reduce){
 .js .reveal{opacity:1;translate:none;transition:none}
 .figur img{animation:none!important}
}
/* Redaktion */
.redaktion .login{display:grid;gap:14px;max-width:460px}
.redaktion .login input{min-height:52px;border:1.5px solid #788586;border-radius:10px;padding:12px 14px;font:17px Arial,Helvetica,sans-serif;background:var(--surface);width:100%}
.redaktion label{display:grid;gap:6px;font:700 15px/1.3 Arial,Helvetica,sans-serif}
.redaktion .note{font-size:15px;color:var(--muted)}
.redaktion .note.fehler{color:#7a2e27}
.redaktion .wer-bin-ich{display:flex;flex-wrap:wrap;gap:12px;align-items:center;font-size:15px;color:var(--muted)}
.redaktion .knopf.klein{min-height:40px;padding:8px 14px;font-size:14px}
.redaktion .seiten{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0}
.redaktion .seiten button{min-height:40px;padding:8px 14px;border-radius:999px;border:1.5px solid var(--action);background:transparent;color:var(--action);font:700 14px/1 Arial,Helvetica,sans-serif;cursor:pointer}
.redaktion .seiten button.aktiv{background:var(--action);color:#fff}
.redaktion .seiten b{display:inline-block;min-width:20px;padding:2px 6px;border-radius:999px;background:var(--coral);color:#fff;font-size:12px;margin-left:4px}
.redaktion .kopfzeile{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between;margin-bottom:20px}
.redaktion .kopfzeile h2{margin:0}
.redaktion .aktionen{display:flex;flex-wrap:wrap;gap:10px}
.redaktion .knopf[disabled]{opacity:.5;cursor:default}
.redaktion .feld{padding:16px 0;border-top:1px solid var(--line)}
.redaktion .feld.geaendert{background:#fff7e6;margin:0 -12px;padding:16px 12px;border-radius:10px}
.redaktion .feld .label em{font-style:normal;color:var(--coral);font-size:12px;letter-spacing:.1em;text-transform:uppercase;margin-left:8px}
.redaktion .feld textarea,.redaktion .feld input{width:100%;border:1.5px solid #788586;border-radius:10px;padding:10px 12px;font:17px/1.5 Arial,Helvetica,sans-serif;background:var(--surface);color:var(--ink)}
.redaktion .feld textarea{resize:vertical}
.redaktion .feld-aktionen{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin-top:8px;font-size:14px;color:var(--muted)}
.redaktion .feld-aktionen button{min-height:36px;padding:6px 12px;border-radius:8px;border:1.5px solid var(--action);background:transparent;color:var(--action);font:700 14px/1 Arial,Helvetica,sans-serif;cursor:pointer}
.redaktion .vergleich{margin-top:8px;font-size:15px;color:var(--muted)}
.redaktion .vergleich summary{cursor:pointer}