/* wuwAIvibe: Skizzenbuch auf dem Tisch (Richtung A). Gestaltungsvorgabe: design/DESIGN.md */
@font-face { font-family: "Instrument Serif"; src: url(/fonts/InstrumentSerif-Regular.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Schibsted Grotesk"; src: url(/fonts/SchibstedGrotesk-VF.woff2) format("woff2"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "Shadows Into Light Two"; src: url(/fonts/ShadowsIntoLightTwo-Regular.woff2) format("woff2"); font-display: swap; }

:root {
  --papier: #E4E8E1; --seite: #EEF1EB; --raster: #B3BCB0; --linie: #BCC6D4;
  --tinte: #1D2226; --graphit: #515955; --kuli: #2A44C4; --einband: #2C3B38; --signal: #DFFF3A;
  --titel: "Instrument Serif", Georgia, serif;
  --sans: "Schibsted Grotesk", system-ui, sans-serif;
  --hand: "Shadows Into Light Two", "Segoe Print", cursive;
  color-scheme: light;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  min-height: 100vh; min-height: 100dvh;
  background-color: var(--papier);
  background-image: radial-gradient(circle, var(--raster) 1.1px, transparent 1.3px);
  background-size: 24px 24px; background-position: 12px 12px;
  color: var(--tinte); font-family: var(--sans); font-size: 18px; line-height: 1.5;
  overflow-x: clip;
}
a { color: inherit; }
a, button { touch-action: manipulation; -webkit-tap-highlight-color: rgba(42,68,196,.15); }
h1, h2, h3 { text-wrap: balance; }
:focus-visible { outline: 3px solid var(--kuli); outline-offset: 4px; }
.skip { position: absolute; left: 16px; top: -100px; z-index: 100; background: var(--tinte); color: var(--papier); padding: 12px 18px; border-radius: 999px; }
.skip:focus { top: 12px; }
.nur-leser { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- Bausteine ---------- */
.hand { font-family: var(--hand); color: var(--kuli); line-height: 1; }
.knopf {
  display: inline-block; background: var(--tinte); color: var(--papier); font-family: var(--sans); font-weight: 600; font-size: 17px;
  line-height: 1; padding: 16px 26px; min-height: 44px; border-radius: 999px; text-decoration: none; border: 0; cursor: pointer; white-space: nowrap;
}
.knopf:hover { background: #2d353a; }
.link { color: var(--tinte); font-weight: 600; font-size: 17px; text-decoration: underline; text-decoration-color: var(--kuli); text-decoration-thickness: 2px; text-underline-offset: 5px; }

/* Textmarker: ein schräger, an den Enden ausgefranster Strich hinter dem Text */
.marker {
  color: inherit; padding: 0 .1em; margin: 0 -.04em;
  background: linear-gradient(100deg, transparent .08em, var(--signal) .16em, var(--signal) calc(100% - .14em), transparent calc(100% - .04em)) 0 64% / 100% 56% no-repeat;
  border-radius: .2em .5em .3em .6em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.marke { font-family: var(--titel); font-size: 28px; line-height: 1; letter-spacing: -.005em; color: var(--tinte); text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center; min-height: 44px; }
.marke .marker { background-size: 100% 80%; background-position: 0 72%; padding: 0 .06em; margin: 0 .02em; letter-spacing: .04em; }

/* Markerstrich hinter „verschmelzen.“: zieht beim Laden einmal von links nach rechts */
.marker-h1 { position: relative; isolation: isolate; display: inline-block; white-space: nowrap; }
.marker-h1::before {
  content: ""; position: absolute; z-index: -1; left: -.05em; right: -.06em; bottom: .13em; height: .44em;
  background: linear-gradient(100deg, transparent .05em, var(--signal) .14em, var(--signal) calc(100% - .12em), transparent calc(100% - .02em));
  border-radius: .12em .4em .2em .5em; transform-origin: 0 50%;
}
@media (prefers-reduced-motion: no-preference) {
  .js .marker-h1::before { animation: marker-zug 700ms cubic-bezier(.2,.7,.2,1) 300ms both; }
}
@keyframes marker-zug { from { transform: scaleX(0); } }

/* ---------- Kopf und Fuß ---------- */
.kopf {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: 72px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 56px; background: linear-gradient(var(--papier) 62%, rgba(228,232,225,0));
}
.kopf nav { display: flex; gap: 28px; align-items: center; font-size: 16px; }
.kopf nav a:not(.knopf) { color: var(--tinte); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; }
.kopf nav a:not(.knopf):hover { text-decoration: underline; text-decoration-color: var(--kuli); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.kopf .knopf { font-size: 16px; padding: 12px 20px; }
.fuss { display: flex; gap: 8px 22px; flex-wrap: wrap; padding: 28px 56px 40px; font-size: 15px; }
.fuss a { color: var(--graphit); display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- Startblock (ohne Bühne: ganz normaler Fluss) ---------- */
.hero { padding: 120px 56px 48px; }
.hero h1 { font-family: var(--titel); font-weight: 400; font-size: clamp(64px, 11vw, 124px); letter-spacing: -.02em; line-height: .94; max-width: 9.5em; }
.intro { margin-top: 36px; max-width: 30em; }
.intro p { font-size: 21px; line-height: 1.45; }
.aktionen { margin-top: 28px !important; display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; }
.notiz-start { display: none; }

.textblock { max-width: 640px; padding: 40px 56px; }
.textblock h2 { font-family: var(--titel); font-weight: 400; font-size: clamp(40px, 6vw, 54px); line-height: 1; letter-spacing: -.015em; }
.textblock p { margin-top: 20px; font-size: 18px; line-height: 1.55; max-width: 34em; }
.textblock .wuwei { margin-top: 14px; font-size: 26px; line-height: 1.1; }
.projekt { margin-top: 30px; padding-top: 22px; border-top: 2px solid var(--tinte); }
.projekt h3 { font-family: var(--titel); font-weight: 400; font-size: 32px; line-height: 1.1; }
.projekt p { margin-top: 8px; }

/* Ideenseite als liniertes Blatt */
.liniert {
  --rand: 58px; --linien-start: 0px;
  background-color: var(--seite);
  background-image:
    linear-gradient(90deg, transparent var(--rand), rgba(42,68,196,.35) var(--rand), rgba(42,68,196,.35) calc(var(--rand) + 2px), transparent calc(var(--rand) + 2px)),
    repeating-linear-gradient(to bottom, transparent 0 39px, var(--linie) 39px 40px);
  background-position: 0 0, 0 var(--linien-start);
}
.idee { margin: 24px 56px 56px; max-width: 560px; padding: 44px 36px 40px 92px; border-radius: 3px 10px 10px 3px; box-shadow: 2px 3px 0 #D6DBD2, 4px 6px 0 #CBD1C7, 6px 9px 0 #D6DBD2; --linien-start: 0px; }
.idee h2 { font-family: var(--titel); font-weight: 400; font-size: 44px; line-height: 1; letter-spacing: -.01em; }
.idee h2:focus { outline: none; }
.idee h2:focus-visible { outline: 3px solid var(--kuli); outline-offset: 4px; }
.idee label { display: block; margin-top: 22px; font-size: 15px; font-weight: 600; }
.idee textarea {
  display: block; width: 100%; height: 200px; margin-top: 6px; border: 0; resize: none; background: transparent; border-radius: 2px;
  font-family: var(--hand); font-size: 26px; line-height: 40px; color: var(--kuli); padding: 0; caret-color: var(--kuli);
}
@supports (field-sizing: content) { .idee textarea { field-sizing: content; height: auto; min-block-size: 5lh; max-block-size: 8lh; } }
.idee textarea::placeholder { color: var(--graphit); opacity: 1; }
.idee textarea:focus { outline: 2px dashed var(--kuli); outline-offset: 6px; }
.idee textarea[aria-invalid="true"] { outline: 2px dashed #9b1c1c; outline-offset: 6px; }
.idee .fehler { min-height: 0; margin-top: 6px; font-size: 15px; font-weight: 600; color: #9b1c1c; background: var(--seite); }
.idee .fehler:empty { display: none; }
.idee .hilfe { margin-top: 16px; font-size: 14px; line-height: 1.45; color: var(--graphit); max-width: 34em; background: var(--seite); }
.idee .hilfe a { color: var(--graphit); }
.idee .knopf { margin-top: 18px; }
.idee .danach { margin-top: 16px; font-size: 14px; line-height: 1.45; background: var(--seite); display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
.idee .danach[hidden] { display: none; }
.idee .danach p { max-width: 30em; }
.idee .kopieren { font: 600 14px var(--sans); min-height: 44px; padding: 10px 18px; border-radius: 999px; border: 2px solid var(--tinte); background: transparent; color: var(--tinte); cursor: pointer; }

/* Kurz gefragt */
.rest { padding: 40px 56px 40px; }
.rest-innen { max-width: 720px; }
.rest h2 { font-family: var(--titel); font-weight: 400; font-size: clamp(40px, 6vw, 54px); line-height: 1; margin-bottom: 18px; }
.rest details { border-top: 1px solid var(--raster); }
.rest details:last-child { border-bottom: 1px solid var(--raster); }
.rest summary { cursor: pointer; list-style: none; font-weight: 600; font-size: 18px; padding: 14px 40px 14px 0; min-height: 44px; position: relative; }
.rest summary::-webkit-details-marker { display: none; }
.rest summary::after { content: "+"; position: absolute; right: 6px; top: 50%; translate: 0 -50%; font: 400 28px var(--titel); color: var(--kuli); }
.rest details[open] summary::after { content: "\2212"; }
.rest details p { padding: 0 0 18px; max-width: 34em; color: var(--tinte); }

/* ---------- Unterseiten ---------- */
.blattseite { max-width: 760px; margin: 110px auto 40px; padding: 48px 56px 56px; background: var(--seite); border-radius: 3px 10px 10px 3px; box-shadow: 2px 3px 0 #D6DBD2, 4px 6px 0 #CBD1C7, 6px 9px 0 #D6DBD2; }
.prosa h1 { font-family: var(--titel); font-weight: 400; font-size: 64px; line-height: 1; letter-spacing: -.015em; margin-bottom: 18px; }
.prosa h2 { font-family: var(--titel); font-weight: 400; font-size: 34px; line-height: 1.1; margin: 36px 0 10px; }
.prosa h3 { font-size: 19px; font-weight: 600; margin: 26px 0 6px; }
.prosa p, .prosa li { font-size: 17px; line-height: 1.6; }
.prosa p { margin-top: 10px; max-width: 40em; }
.prosa ul { margin: 10px 0 0 1.3em; }
.prosa li { margin-top: 4px; }
.prosa a { text-decoration-color: var(--kuli); text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* ---------- Bühne (nur mit Skript) ---------- */
html:not(.js) .strecke { display: none; }
.js .strecke { position: relative; height: calc(var(--strecke, 7) * 100vh); }
.js .halter { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: clip; }
.ruhig .strecke { height: auto; }
.ruhig .halter { position: relative; }
.buehne {
  --bw: 440px; --bh: 580px; --ih: 580px; --iy: 0px; --bx: 930px; --by: 170px;
  position: absolute; left: 0; top: 0; width: 1440px; height: 900px; transform-origin: 0 0; perspective: 2200px; perspective-origin: 70% 40%;
}
[data-modus="hoch"] .buehne { --bw: 358px; --bh: 472px; --ih: 640px; --iy: -84px; --bx: 16px; --by: 186px; width: 390px; height: 844px; perspective: 1400px; perspective-origin: 60% 80%; }
/* Noch ohne Skript-Start: nichts flackern lassen */
.js:not(.szene):not(.ruhig) .buehne { visibility: hidden; }

.buehne .hero { position: absolute; inset: 0; padding: 0; pointer-events: none; }
.buehne .hero > * { pointer-events: auto; }
.buehne .hero h1 { position: absolute; left: 52px; top: 118px; width: 800px; max-width: none; font-size: 124px; }
.buehne .intro { position: absolute; left: 56px; top: 588px; width: 480px; margin: 0; }
.buehne .notiz-start { display: block; position: absolute; left: 990px; top: 100px; font-size: 34px; white-space: nowrap; transform: rotate(-6deg); pointer-events: none; }
.buehne .notiz-start svg { position: absolute; left: 40px; top: 44px; }
[data-modus="hoch"] .buehne .hero h1 { left: 14px; top: 84px; width: 362px; font-size: 68px; }
[data-modus="hoch"] .buehne .intro { left: 16px; top: 314px; width: 358px; }
[data-modus="hoch"] .buehne .intro p { font-size: 18px; }
[data-modus="hoch"] .buehne .notiz-start { left: 22px; top: 514px; width: 150px; font-size: 26px; line-height: 1.25; white-space: normal; }
[data-modus="hoch"] .buehne .notiz-start svg { left: 120px; top: 62px; width: 60px; height: 70px; }

.buehne .textblock { position: absolute; left: 56px; top: 176px; width: 340px; max-width: none; padding: 0; }
.buehne .textblock h2 { font-size: 54px; }

/* Buch: die rechte Seite ist der Anker, Einband und Blatt klappen an ihrer linken Kante auf */
.buch { position: absolute; left: var(--bx); top: var(--by); width: var(--bw); height: var(--bh); transform-style: preserve-3d; }
.buch > * { position: absolute; }
.unterlage { left: calc(var(--bw) * -1 - 12px); right: -12px; top: -12px; bottom: -14px; background: var(--einband); border-radius: 16px; box-shadow: 0 4px 0 #1C2826; transform: translateZ(-3px); opacity: 0; }
.schatten { top: 0; bottom: 0; left: 0; width: var(--bw); border-radius: 10px; box-shadow: 30px 50px 70px rgba(29,34,38,.28); transform: translateZ(-2px); }
[data-modus="hoch"] .schatten { box-shadow: 18px 30px 44px rgba(29,34,38,.28); }

.papier-seite {
  background-color: var(--seite);
  background-image: radial-gradient(circle, #B9C2B6 1px, transparent 1.25px); background-size: 20px 20px; background-position: 10px 10px;
}
.ideen-seite { left: 0; top: var(--iy); width: var(--bw); height: var(--ih); border-radius: 2px 8px 8px 2px; overflow: hidden; box-shadow: 2px 3px 0 #D6DBD2, 4px 6px 0 #CBD1C7, 6px 9px 0 #D6DBD2; }
.buch .ideen-seite { opacity: 0; transition: opacity 200ms 650ms; }
.buch.umgeblaettert .ideen-seite { opacity: 1; transition: opacity 150ms 100ms; }
.ideen-seite::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 70px; background: linear-gradient(270deg, transparent, rgba(29,34,38,.18)); pointer-events: none; z-index: 1; }
.ideen-seite .idee { position: absolute; inset: 0; margin: 0; max-width: none; padding: 44px 36px 0 78px; border-radius: 0; box-shadow: none; background: none; overflow: auto; }
.ideen-seite .idee textarea { height: 200px; }
@supports (field-sizing: content) { .ideen-seite .idee textarea { height: auto; } }
[data-modus="hoch"] .ideen-seite .idee { padding: 14px 18px 0 54px; overflow: auto; }
[data-modus="hoch"] .ideen-seite .idee h2 { font-size: 38px; line-height: 1.02; }
[data-modus="hoch"] .ideen-seite .idee label { margin-top: 14px; }
[data-modus="hoch"] .ideen-seite .idee textarea { height: 200px; font-size: 25px; }
[data-modus="hoch"] .ideen-seite .idee .knopf { width: 100%; text-align: center; }
[data-modus="hoch"] .ideen-seite { --rand: 38px; }
.ideen-seite { --rand: 58px; --linien-start: 23px; }
[data-modus="hoch"] .ideen-seite { --rand: 38px; --linien-start: 14px; }

.blatt { left: 0; top: 0; width: 100%; height: 100%; transform-origin: left center; transform-style: preserve-3d; transform: translateZ(2px) rotateY(0deg); transition: transform 700ms cubic-bezier(.3,.7,.2,1); }
.blatt.gewendet { transform: translateZ(2px) rotateY(-180deg); transition-duration: 900ms; }
.blatt > div, .einband > div { position: absolute; inset: 0; backface-visibility: hidden; }
.blatt .vorn {
  background-color: var(--seite); border-radius: 2px 8px 8px 2px; box-shadow: 2px 3px 0 #D6DBD2, 4px 6px 0 #CBD1C7, 6px 9px 0 #D6DBD2;
  background-image: radial-gradient(circle, #B9C2B6 1px, transparent 1.25px), linear-gradient(270deg, transparent, transparent); background-size: 20px 20px, auto; background-position: 10px 10px, 0 0;
}
.blatt .vorn::after, .blatt .hinten::after { content: ""; position: absolute; top: 0; bottom: 0; width: 70px; pointer-events: none; }
.blatt .vorn::after { left: 0; background: linear-gradient(270deg, transparent, rgba(29,34,38,.18)); }
.blatt .hinten { transform: rotateY(180deg); border-radius: 8px 2px 2px 8px; background-color: var(--seite); background-image: radial-gradient(circle, #B9C2B6 1px, transparent 1.25px); background-size: 20px 20px; background-position: 10px 10px; box-shadow: -2px 3px 0 #D6DBD2, -4px 6px 0 #CBD1C7, -6px 9px 0 #D6DBD2; }
.blatt .hinten::after { right: 0; background: linear-gradient(90deg, transparent, rgba(29,34,38,.16)); }
.zeichnung { pointer-events: none; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.blatt-knopf { position: absolute; inset: 0; width: 100%; height: 100%; background: none; border: 0; border-radius: 2px 8px 8px 2px; cursor: default; z-index: 3; }
.bereit .blatt-knopf { cursor: pointer; }
.blatt-knopf:focus-visible { outline: 3px solid var(--kuli); outline-offset: 4px; }
.eselsohr { right: 0; bottom: 0; width: 64px; height: 64px; position: absolute; opacity: 0; transition: transform 200ms ease-out, opacity 300ms; z-index: 2; pointer-events: none; }
.eselsohr::before { content: ""; position: absolute; inset: 0; background: #D3D9CF; clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.eselsohr::after { content: ""; position: absolute; inset: 0; background: var(--signal); clip-path: polygon(0 0, 100% 0, 0 100%); border-radius: 0 0 0 4px; filter: drop-shadow(-3px -3px 3px rgba(29,34,38,.18)); }
.umblaettern-text { position: absolute; right: 74px; bottom: 28px; font-size: 27px; transform: rotate(-4deg); opacity: 0; transition: opacity 300ms; z-index: 2; pointer-events: none; }
.bereit .eselsohr, .bereit .umblaettern-text { opacity: 1; }
.bereit .blatt-knopf:hover ~ .eselsohr { transform: translate(-6px, -6px); }
.gehoben .eselsohr { animation: heben 400ms ease-in-out 1; }
@keyframes heben { 50% { transform: translate(-10px, -10px); } }
.geist { position: absolute; left: 16px; top: 20px; width: 440px; opacity: .07; transform: scaleX(-1); }
[data-modus="hoch"] .geist { width: 358px; height: auto; left: 0; }
.zurueck { font-size: 27px; background: none; border: 0; display: flex; gap: 10px; align-items: center; min-height: 44px; cursor: pointer; padding: 0 6px; }
.zurueck-blatt { position: absolute; left: 40px; bottom: 30px; transform: rotate(-3deg); }
.zurueck-seite { display: none; position: absolute; z-index: 2; left: 40px; top: 10px; font-size: 26px; }
[data-modus="hoch"] .zurueck-seite, .ruhig .zurueck-seite { display: flex; }
[data-modus="hoch"] .zurueck-seite { left: 46px; top: 4px; }
[data-modus="hoch"] .ideen-seite .idee { padding-top: 54px; }
.ruhig .zurueck-seite { top: auto; bottom: 14px; left: 36px; }
html:not(.js) .zurueck { display: none; }

.einband { left: 0; top: 0; width: 100%; height: 100%; transform-origin: left center; transform-style: preserve-3d; transform: translateZ(6px); }
.einband .vorne { background: linear-gradient(135deg, #3d4e4a, var(--einband) 45%, #243230); border-radius: 3px 12px 12px 3px; box-shadow: inset 8px 0 12px rgba(0,0,0,.25); }
.einband .wort { position: absolute; left: 44px; bottom: 90px; font-family: var(--titel); font-size: 44px; color: #A9B8B2; transform: rotate(-4deg); white-space: nowrap; }
.einband .wort .marker { color: var(--tinte); background-size: 100% 80%; background-position: 0 72%; letter-spacing: .04em; }
[data-modus="hoch"] .einband .wort { left: 32px; bottom: 70px; font-size: 38px; }
.einband .links { transform: rotateY(180deg); border-radius: 10px 3px 3px 10px; background-color: var(--seite); background-image: radial-gradient(circle, #B9C2B6 1px, transparent 1.25px), linear-gradient(to left, rgba(29,34,38,.12), transparent 50px); background-size: 20px 20px, auto; background-position: 10px 10px, 0 0; box-shadow: -2px 3px 0 #D6DBD2, -4px 6px 0 #CBD1C7, -6px 9px 0 #D6DBD2; }
.notizen { position: absolute; left: 40px; top: 40px; right: 30px; display: grid; gap: 18px; font-size: 29px; }
.notizen .titel-hand { color: var(--tinte); font-size: 40px; margin-bottom: 8px; }
.kringel { text-decoration: underline wavy var(--kuli); text-underline-offset: 6px; }
.strich-hinweis { position: absolute; left: 40px; top: 296px; font-size: 23px; color: var(--graphit); }
.links canvas { position: absolute; left: 20px; top: 330px; width: 400px; height: 230px; cursor: crosshair; touch-action: none; }
.leeren { position: absolute; right: 30px; bottom: 10px; font: 600 14px var(--sans); background: none; border: 0; color: var(--graphit); text-decoration: underline; cursor: pointer; padding: 10px; }
[data-modus="hoch"] .links canvas, [data-modus="hoch"] .leeren { display: none; }

.band { left: 68%; top: -8px; width: 14px; height: calc(100% + 16px); border-radius: 8px; background: linear-gradient(to right, #1B2E94, #4A62DD 45%, #18287F); transform: translateZ(8px); pointer-events: none; }
.stift { left: 0; top: 0; width: 34px; height: 250px; transform-origin: 50% 100%; opacity: 0; transform: translateZ(10px); pointer-events: none; }
.band-lose { position: absolute; left: 520px; top: 800px; opacity: 0; pointer-events: none; }
[data-modus="hoch"] .band-lose { left: 60px; top: 730px; width: 280px; height: auto; }

.ruhig .blatt { transform: none !important; transition: opacity 150ms, visibility 0s 150ms; }
.ruhig .blatt.gewendet { opacity: 0; visibility: hidden; }

/* ---------- Handy ---------- */
@media (max-width: 820px) {
  body { font-size: 17px; }
  .kopf { height: 60px; padding: 0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)); }
  .marke { font-size: 24px; }
  .kopf nav { gap: 14px; }
  .kopf .knopf { font-size: 15px; padding: 11px 16px; }
  .kopf-knopf { display: none; }
  .kopf-knopf.zeigen { display: inline-block; }
  .hero { padding: 84px 16px 32px; }
  .hero h1 { font-size: clamp(52px, 17.4vw, 68px); }
  .intro p { font-size: 18px; }
  .textblock { padding: 40px 16px; }
  .idee { margin: 16px 16px 40px; padding: 30px 18px 32px 54px; --rand: 38px; }
  .idee h2 { font-size: 38px; line-height: 1.02; }
  .idee .knopf { width: 100%; text-align: center; }
  .rest { padding: 32px 16px; }
  .fuss { padding: 16px 16px 32px; }
  .blattseite { margin: 76px 16px 24px; padding: 28px 20px 36px; }
  .prosa h1 { font-size: 48px; }
  .prosa h2 { font-size: 30px; }
}