/* maerchenklang.de · Bastelbogen mit Scherenschnitt. Gestaltung: DESIGN.md */
@font-face { font-family: 'Fell'; src: url(/assets/fonts/im-fell-english-latin-400-normal.woff2) format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Fell'; src: url(/assets/fonts/im-fell-english-latin-400-italic.woff2) format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Sans3'; src: url(/assets/fonts/source-sans-3-latin-400-normal.woff2) format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Sans3'; src: url(/assets/fonts/source-sans-3-latin-400-italic.woff2) format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Sans3'; src: url(/assets/fonts/source-sans-3-latin-600-normal.woff2) format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  --buetten: #f6f1e7;
  --pappe: #cbc5b8;
  --pappe-dunkel: #b3ac9e;
  --tinte: #221c19;
  --tinte-weich: #4a403a;
  --lack: #a3271f;
  --lack-dunkel: #7f1c16;
  --ocker: #b9822b;
  --moos: #4e5a3c;
  --s1: 4px; --s2: 8px; --s3: 16px; --s4: 24px; --s5: 40px; --s6: 64px; --s7: 104px;
  --text: 40rem;
  --blatt: 60rem;
  --kopf: 'Fell', 'Iowan Old Style', Georgia, serif;
  --lauf: 'Sans3', 'Source Sans Pro', system-ui, sans-serif;
  /* Papierfaser als feines Rauschen */
  --faser: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .13 0 0 0 0 .11 0 0 0 0 .1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  /* gerissene Kanten (oben und unten), drei Varianten */
  --riss-o1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 12' preserveAspectRatio='none'%3E%3Cpath d='M0 12V6 L6.1 7.6 L17.2 4.0 L26.1 5.2 L36.4 7.2 L42.1 2.7 L53.8 5.1 L64.9 2.5 L73.5 6.8 L80.3 8.2 L92.5 2.7 L97.7 5.7 L110.2 4.8 L117.0 5.0 L122.2 3.8 L130.7 5.5 L137.6 3.9 L144.3 5.3 L151.6 2.6 L163.3 5.8 L173.5 3.6 L186.4 7.7 L192.4 4.5 L203.1 6.8 L215.6 5.0 L227.3 6.5 L234.7 6.0 L246.8 7.6 L255.8 6.0 L261.1 4.0 L272.5 5.0 L278.8 5.8 L289.5 6.5 L297.5 5.1 L306.5 7.2 L315.7 4.9 L324.6 2.7 L330.0 6.7 L342.8 6.1 L351.0 3.5 L360.0 8.4 L371.2 5.7 L383.0 3.9 L392.1 8.2 L400 5.3 V12z'/%3E%3C/svg%3E");
  --riss-o2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 12' preserveAspectRatio='none'%3E%3Cpath d='M0 12V6 L12.6 8.2 L18.1 3.0 L29.8 6.9 L40.1 4.3 L50.0 6.1 L59.6 3.5 L68.1 4.9 L78.9 8.5 L91.5 5.8 L100.0 4.1 L105.3 2.7 L114.0 4.4 L122.1 7.9 L131.3 5.9 L138.2 2.6 L145.8 3.3 L154.8 8.5 L165.2 3.6 L177.4 7.3 L188.3 7.9 L199.4 7.2 L207.2 8.4 L219.9 3.5 L230.9 6.8 L239.6 5.7 L248.5 8.0 L257.5 7.5 L265.4 7.8 L277.6 5.3 L287.1 8.0 L297.9 5.4 L304.7 4.4 L315.3 3.5 L327.5 4.1 L339.8 4.4 L352.5 6.7 L361.5 5.6 L371.7 6.0 L379.2 3.7 L388.3 8.1 L398.3 3.0 L400 6.9 V12z'/%3E%3C/svg%3E");
  --riss-u1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 12' preserveAspectRatio='none'%3E%3Cpath d='M0 0V6 L6.9 5.8 L14.9 6.1 L24.9 2.9 L30.0 7.5 L37.0 3.9 L50.0 5.3 L61.7 5.4 L71.8 3.4 L81.9 7.7 L91.1 6.9 L101.5 2.9 L112.5 6.0 L119.9 2.7 L131.9 5.3 L142.6 7.8 L153.3 8.0 L161.5 7.3 L170.0 8.1 L182.1 3.1 L188.2 3.8 L200.9 5.1 L210.9 4.3 L219.9 4.8 L227.8 6.0 L237.4 7.9 L247.9 8.1 L259.7 8.4 L270.1 3.5 L282.0 8.3 L294.2 5.9 L304.9 3.8 L316.6 5.9 L323.9 2.9 L335.7 8.4 L341.4 7.3 L349.7 3.4 L357.0 7.1 L369.0 2.8 L378.9 2.8 L389.7 4.5 L400 8.4 V0z'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; }
body {
  margin: 0; color: var(--tinte); font-family: var(--lauf); font-size: 1.0625rem; line-height: 1.65;
  background-color: var(--pappe); background-image: var(--faser);
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--lack); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--lack-dunkel); text-decoration-thickness: 2px; }
:focus-visible { outline: 2px dashed var(--lack); outline-offset: 3px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--tinte); color: var(--buetten); padding: 8px 14px; z-index: 50; }
.skip:focus { left: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

h1, h2, h3, h4 { font-family: var(--kopf); font-weight: 400; line-height: 1.12; margin: 0 0 var(--s3); text-wrap: balance; hyphens: manual; letter-spacing: .005em; }
h1 { font-size: clamp(2.2rem, 5.2vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); margin-top: var(--s5); }
h3 { font-size: 1.4rem; margin-top: var(--s4); }
h4 { font-size: 1.15rem; margin-top: var(--s4); }
p, ul, ol { margin: 0 0 var(--s3); }
.mitte { text-align: center; }
em.schwung { font-family: var(--kopf); font-style: italic; font-size: 1.15em; }
.gross { font-family: var(--kopf); font-size: 1.45em; line-height: 1.2; }
strong { font-weight: 600; }

/* ---------- Kopf */
.hinweisleiste { background: var(--tinte); color: var(--buetten); text-align: center; padding: 8px 16px; font-size: .95rem; }
.hinweisleiste p { margin: 0; } .hinweisleiste a { color: #f0c98a; }
.kopf { position: sticky; top: 0; z-index: 20; background: var(--buetten); background-image: var(--faser); }
.kopf::after { content: ''; position: absolute; left: 0; right: 0; bottom: -10px; height: 10px; background: var(--buetten); -webkit-mask: var(--riss-u1) 0 0/100% 100%; mask: var(--riss-u1) 0 0/100% 100%; filter: drop-shadow(0 2px 1px rgba(34,28,25,.12)); }
.kopf-in { max-width: 76rem; margin: 0 auto; padding: 10px 24px; display: flex; align-items: center; gap: var(--s4); min-height: 72px; }
.marke { position: relative; display: flex; align-items: center; gap: 12px; color: var(--tinte); text-decoration: none; flex: none; }
.marke:hover { color: var(--tinte); }
.marke-zeichen { width: 46px; height: 46px; display: block; } .marke-zeichen svg { width: 100%; height: 100%; }
.marke-text { display: flex; flex-direction: column; line-height: 1; }
.marke-name { font-family: var(--kopf); font-size: 1.85rem; letter-spacing: .01em; }
.marke-zeile { font-size: .82rem; color: var(--tinte-weich); letter-spacing: .14em; margin-top: 4px; }
.stern { position: absolute; width: 11px; height: 11px; color: var(--ocker); }
.stern-a { top: -2px; right: -16px; transform: rotate(12deg); }
.stern-b { top: 18px; right: -26px; width: 7px; height: 7px; transform: rotate(-20deg); }
@media (prefers-reduced-motion: no-preference) {
  .stern { animation: funkeln .9s ease-out .3s both; }
  .stern-b { animation-delay: .55s; }
  @keyframes funkeln { 0% { opacity: 0; transform: scale(.2) rotate(-40deg); } 70% { opacity: 1; transform: scale(1.25) rotate(8deg); } 100% { opacity: 1; } }
}
.hauptnav { margin-left: auto; }
.hauptnav > ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.hauptnav li { position: relative; }
.hauptnav a { display: block; padding: 8px 10px; color: var(--tinte); text-decoration: none; font-size: 1.02rem; white-space: nowrap; }
.hauptnav a:hover, .hauptnav a[aria-current="page"], .hauptnav a.aktiv { color: var(--lack); }
.hauptnav a[aria-current="page"], .hauptnav > ul > li > a.aktiv { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'%3E%3Cpath d='M2 5 Q20 2 38 5 T70 4 T98 3' fill='none' stroke='%23a3271f' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") 10px calc(100% - 2px)/calc(100% - 20px) 7px no-repeat; }
.mit-unter { display: flex; align-items: center; }
.unter-knopf { background: none; border: 0; padding: 6px 4px 6px 0; color: var(--tinte-weich); cursor: pointer; }
.unter-knopf svg { width: 11px; height: 8px; display: block; }
.unter { list-style: none; margin: 0; padding: 10px 0; position: absolute; top: 100%; left: 0; min-width: 14rem; background: var(--buetten); background-image: var(--faser); box-shadow: 0 12px 22px -14px rgba(34,28,25,.55), 0 0 0 1px var(--pappe-dunkel); transform: rotate(-.6deg); display: none; z-index: 5; }
.mit-unter:hover .unter, .mit-unter:focus-within .unter, .unter.offen { display: block; }
.unter a { padding: 7px 18px; }
.menu-knopf { display: none; margin-left: auto; background: none; border: 0; font: inherit; color: var(--tinte); align-items: center; gap: 10px; padding: 10px 4px; cursor: pointer; }
.menu-strich { width: 24px; height: 12px; border-top: 2px solid; border-bottom: 2px solid; position: relative; }

/* ---------- Blätter */
main { display: block; padding: var(--s5) 16px var(--s6); }
.bogen { max-width: var(--blatt); margin: 0 auto; }
.blatt-schatten { filter: drop-shadow(0 1px 0 rgba(34,28,25,.18)) drop-shadow(0 12px 14px rgba(34,28,25,.16)); margin: 0 auto; }
.blatt {
  position: relative; background: var(--buetten); background-image: var(--faser);
  padding: calc(var(--s5) + 8px) clamp(20px, 6vw, 72px) calc(var(--s5) + 8px);
  -webkit-mask: var(--riss-o1) 0 0/100% 12px no-repeat, linear-gradient(#000 0 0) 0 11px/100% calc(100% - 22px) no-repeat, var(--riss-u1) 0 100%/100% 12px no-repeat;
  mask: var(--riss-o1) 0 0/100% 12px no-repeat, linear-gradient(#000 0 0) 0 11px/100% calc(100% - 22px) no-repeat, var(--riss-u1) 0 100%/100% 12px no-repeat;
}
.blatt.b1 { -webkit-mask: var(--riss-o2) 0 0/100% 12px no-repeat, linear-gradient(#000 0 0) 0 11px/100% calc(100% - 22px) no-repeat, var(--riss-u1) 0 100%/100% 12px no-repeat; mask: var(--riss-o2) 0 0/100% 12px no-repeat, linear-gradient(#000 0 0) 0 11px/100% calc(100% - 22px) no-repeat, var(--riss-u1) 0 100%/100% 12px no-repeat; }
.blatt-schatten:nth-of-type(3n+1) { transform: rotate(-.45deg); }
.blatt-schatten:nth-of-type(3n+2) { transform: rotate(.35deg); max-width: 97%; }
.blatt-schatten:nth-of-type(3n) { transform: rotate(-.15deg); max-width: 98.5%; }
.blatt > :first-child { margin-top: 0; }
.blatt > :last-child { margin-bottom: 0; }
.blatt > p, .blatt > ul, .blatt > ol, .blatt > h2, .blatt > h3, .blatt > h4, .blatt > blockquote, .blatt .spalte > p { max-width: var(--text); margin-left: auto; margin-right: auto; }
.blatt > p.mitte, .blatt > h2.mitte, .blatt > h3.mitte { max-width: 44rem; }
.blatt h1 { text-align: center; max-width: 48rem; margin: 0 auto var(--s4); }
.blatt h2:first-child, .blatt h3:first-child { margin-top: 0; }
.zwischen { max-width: 22rem; margin: 6px auto; color: var(--tinte-weich); opacity: .55; height: 26px; display: flex; align-items: center; }
.handlinie { width: 100%; height: 9px; }

/* Startseite: erstes Blatt größer mit Scherenschnitt */
.bogen-start .erstes .blatt { padding-bottom: 0; }
.bogen-start .erstes .blatt h1 .schwung, .blatt h1 em.schwung { color: var(--lack); }
.bogen-start .erstes .blatt::after { content: ''; display: block; height: clamp(70px, 12vw, 120px); margin: var(--s4) calc(-1 * clamp(20px, 6vw, 72px)) 0; background: var(--tinte); -webkit-mask: url(/assets/svg/scherenschnitt.svg) 50% 100%/auto 100% no-repeat; mask: url(/assets/svg/scherenschnitt.svg) 50% 100%/auto 100% no-repeat; }

/* Zitate der Gäste: die alte Seite setzt sie als Absatz in Anführungszeichen */
.blatt p.zitat, .blatt blockquote { font-family: var(--kopf); font-style: italic; font-size: 1.35rem; line-height: 1.35; color: var(--moos); text-align: center; max-width: 36rem; margin: var(--s5) auto var(--s3); position: relative; }

/* Fotos: Abzug mit weißem Rand und Klebeband */
.foto { position: relative; margin: var(--s5) auto; max-width: min(var(--max, 880px), 100%); background: #fffdf8; padding: 10px 10px 12px; box-shadow: 0 1px 0 rgba(34,28,25,.15), 0 10px 18px -12px rgba(34,28,25,.5); }
.foto img { width: 100%; }
.foto::before { content: ''; position: absolute; top: -12px; left: 50%; width: 92px; height: 24px; margin-left: -46px; background: rgba(185,130,43,.42); transform: rotate(-3deg); -webkit-mask: var(--riss-o2) 0 0/100% 4px repeat-x, linear-gradient(#000 0 0) 0 3px/100% calc(100% - 6px) no-repeat, var(--riss-u1) 0 100%/100% 4px no-repeat; mask: var(--riss-o2) 0 0/100% 4px repeat-x, linear-gradient(#000 0 0) 0 3px/100% calc(100% - 6px) no-repeat, var(--riss-u1) 0 100%/100% 4px no-repeat; }
.foto.dreh0 { transform: rotate(-1deg); } .foto.dreh1 { transform: rotate(.8deg); } .foto.dreh2 { transform: rotate(-.4deg); } .foto.dreh3 { transform: rotate(1.2deg); }
.foto.dreh1::before { transform: rotate(4deg); left: 30%; } .foto.dreh3::before { left: 70%; transform: rotate(-6deg); }
.foto figcaption { font-family: var(--kopf); font-style: italic; text-align: center; padding-top: 8px; color: var(--tinte-weich); }
.foto-klein { padding: 6px 6px 8px; margin: var(--s4) auto; }
.foto-klein::before { width: 54px; height: 16px; margin-left: -27px; top: -8px; }
.foto-rechts { float: right; margin: var(--s2) 0 var(--s3) var(--s4); max-width: min(var(--max, 320px), 45%); }
.foto-links { float: left; margin: var(--s2) var(--s4) var(--s3) 0; max-width: min(var(--max, 320px), 45%); }
.blatt::after { content: ''; display: table; clear: both; }
.foto a { display: block; }

/* Spalten aus den alten Tabellen */
.spalten { display: grid; gap: var(--s4) var(--s5); margin: var(--s4) 0; align-items: start; }
.spalten.s2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.spalten.s3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.spalten.s4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.spalte > :first-child { margin-top: 0; } .spalte > :last-child { margin-bottom: 0; }
.spalte .foto { margin: var(--s3) auto; }

/* Knöpfe: Papierschild mit Handlinie */
.knopfzeile { text-align: center; margin: var(--s4) auto; }
.knopf, button.knopf {
  display: inline-block; font: 600 1rem/1.2 var(--lauf); color: var(--tinte); background: #fffdf8; text-decoration: none; cursor: pointer;
  padding: 12px 22px; border: 1.8px solid var(--tinte); border-radius: 255px 14px 225px 14px / 14px 225px 14px 255px;
  box-shadow: 2px 3px 0 -1px var(--lack); transition: transform .15s ease, box-shadow .15s ease;
}
.knopf:hover { color: var(--lack-dunkel); transform: translate(-1px, -1px) rotate(-.5deg); box-shadow: 3px 4px 0 -1px var(--lack); }
.knopf:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 -1px var(--lack); }
.knopfzeile + .knopfzeile { margin-top: calc(-1 * var(--s2)); }

/* Katalog (Stimmen, Portfolio) */
.katalog { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--s4); margin: var(--s4) 0; }
.katalog-eintrag { padding: var(--s3) var(--s3) var(--s2); border-top: 1px dashed var(--tinte-weich); }
.katalog-eintrag h3 { font-size: 1.2rem; margin-top: var(--s2); }
.katalog-eintrag .foto { margin: var(--s2) auto var(--s3); }
.katalog-eintrag p { font-size: 1rem; }

/* Seitenliste (Unterseiten) */
.seitenliste { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 14px; justify-content: center; }
.seitenliste a { display: inline-block; padding: 6px 12px; border: 1px dashed var(--tinte-weich); text-decoration: none; color: var(--tinte); }

/* Externe Inhalte erst nach Klick */
.extern { margin: var(--s4) auto; max-width: 44rem; text-align: center; padding: var(--s4); border: 1.5px dashed var(--tinte-weich); background: rgba(255,253,248,.6); }
.extern-text { font-size: .95rem; color: var(--tinte-weich); }
.extern.geladen { border: 0; padding: 0; max-width: none; background: none; }
.extern iframe { width: 100%; border: 0; }
.extern-video.geladen { aspect-ratio: 16/9; }
.extern-video.geladen iframe { height: 100%; }
.notiz { max-width: 40rem; margin: var(--s4) auto; padding: var(--s3) var(--s4); background: #fbf3d9; box-shadow: 0 8px 14px -10px rgba(34,28,25,.5); transform: rotate(-.6deg); }
.notiz p:last-child { margin-bottom: 0; }

/* Formulare */
.formular { max-width: 44rem; margin: var(--s4) auto 0; }
.felder { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3) var(--s4); }
.feld { display: flex; flex-direction: column; gap: 4px; }
.feld-breit { grid-column: 1 / -1; }
.feld label { font-weight: 600; font-size: .95rem; }
.feld input, .feld select, .feld textarea { font: inherit; color: var(--tinte); background: #fffdf8; border: 0; border-bottom: 1.6px solid var(--tinte); padding: 10px 8px; border-radius: 0; width: 100%; }
.feld textarea { border: 1.6px solid var(--tinte); border-radius: 4px 10px 6px 12px / 12px 4px 10px 6px; }
.feld input:focus, .feld select:focus, .feld textarea:focus { outline: 2px dashed var(--lack); outline-offset: 2px; }
.feld-haken { flex-direction: row; align-items: flex-start; gap: 10px; }
.feld-haken input { width: 20px; height: 20px; margin-top: 3px; flex: none; accent-color: var(--lack); }
.feld-haken label { font-weight: 400; }
.feld.ungueltig input, .feld.ungueltig select, .feld.ungueltig textarea { border-color: var(--lack); background: #fbe9e6; }
.feld-falle { position: absolute; left: -9999px; }
.form-hinweis { font-size: .9rem; color: var(--tinte-weich); margin-top: var(--s3); }
.form-status { margin-top: var(--s2); }
.form-status.fehler { color: var(--lack); }
.formular-erfolg { padding: var(--s4); background: #eef0e4; }
.formular-erfolg h2 { margin-top: 0; font-size: 1.6rem; }

/* Zettelwand (alte Randspalte) */
.zettelwand { max-width: var(--blatt); margin: var(--s6) auto 0; display: flex; flex-wrap: wrap; gap: var(--s4); justify-content: center; }
.zettel { background: #fffdf8; background-image: var(--faser); padding: var(--s3) var(--s4); width: 16.5rem; text-align: center; box-shadow: 0 10px 16px -12px rgba(34,28,25,.55); position: relative; font-size: .98rem; }
.zettel.z0 { transform: rotate(-1.4deg); } .zettel.z1 { transform: rotate(1deg); background-color: #f4ead1; } .zettel.z2 { transform: rotate(-.4deg); }
.zettel::before { content: ''; position: absolute; top: -9px; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--lack); box-shadow: inset -2px -2px 0 rgba(0,0,0,.25); }
.zettel .foto { margin: 0 auto var(--s2); padding: 0; box-shadow: none; transform: none; background: none; max-width: 110px; }
.zettel .foto::before { display: none; }
.zettel p { margin-bottom: 6px; }
.zettel .gross { font-size: 1.3em; }

/* ---------- Fuß: Scherenschnitt geht in die schwarze Fläche über */
.fuss { color: #e9e1d2; margin-top: var(--s5); }
.fuss-silhouette { color: var(--tinte); height: clamp(90px, 16vw, 200px); overflow: hidden; margin-bottom: -2px; }
.fuss-silhouette svg { width: 100%; height: 100%; display: block; }
.fuss-in { background: var(--tinte); padding: var(--s4) 24px var(--s4); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); max-width: none; }
.fuss-in > div { max-width: 24rem; }
.fuss-kontakt { justify-self: start; } .fuss-links { justify-self: center; } .fuss-andere { justify-self: end; text-align: right; }
.fuss a { color: #f0c98a; }
.fuss-h { font-family: var(--kopf); font-size: 1.7rem; margin-bottom: 6px; }
.fuss-h a { color: #f6f1e7; text-decoration: none; }
.fuss ul { list-style: none; padding: 0; margin: 0; }
.fuss li { margin: 4px 0; }
.fuss-zeile { background: var(--tinte); margin: 0; padding: 0 24px var(--s4); font-size: .85rem; color: #a99f91; text-align: center; }
.handyleiste { display: none; }

/* ---------- Bewegung */
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .blatt-schatten { transition: transform .35s ease; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---------- Schmal */
@media (max-width: 1080px) {
  .menu-knopf { display: flex; }
  .hauptnav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--buetten); background-image: var(--faser); padding: 8px 16px 20px; box-shadow: 0 14px 20px -14px rgba(34,28,25,.6); max-height: calc(100vh - 80px); overflow: auto; }
  .hauptnav.offen { display: block; }
  .hauptnav > ul { flex-direction: column; align-items: stretch; }
  .hauptnav a { font-size: 1.15rem; padding: 10px 6px; }
  .mit-unter { flex-wrap: wrap; }
  .mit-unter > a { flex: 1; }
  .unter-knopf { padding: 12px; }
  .unter { position: static; transform: none; box-shadow: none; background: none; padding: 0 0 6px 16px; min-width: 0; width: 100%; border-left: 1.5px solid var(--pappe-dunkel); }
  .mit-unter:hover .unter { display: none; }
  .mit-unter .unter.offen, .mit-unter:focus-within .unter.offen { display: block; }
}
@media (max-width: 760px) {
  body { font-size: 1.03rem; }
  .kopf-in { padding: 8px 16px; min-height: 62px; }
  .marke-zeichen { width: 38px; height: 38px; }
  .marke-name { font-size: 1.55rem; }
  main { padding: var(--s4) 10px var(--s5); }
  .blatt { padding: 36px 18px 36px; }
  .blatt-schatten:nth-of-type(n) { max-width: 100%; transform: rotate(-.3deg); }
  .blatt-schatten:nth-of-type(2n) { transform: rotate(.3deg); }
  .spalten.s2, .spalten.s3, .spalten.s4 { grid-template-columns: 1fr; }
  .felder { grid-template-columns: 1fr; }
  .foto-rechts, .foto-links { float: none; margin: var(--s4) auto; max-width: min(var(--max, 320px), 100%); }
  .fuss-in { grid-template-columns: 1fr; text-align: center; padding-bottom: 90px; }
  .fuss-in > div, .fuss-andere { justify-self: center; text-align: center; }
  .fuss-zeile { padding-bottom: 80px; }
  .handyleiste { display: grid; grid-template-columns: 1fr 1fr 1.3fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--tinte); padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); gap: 8px; }
  .handyleiste a { color: var(--buetten); text-align: center; text-decoration: none; padding: 9px 4px; border: 1px solid #5b514a; font-weight: 600; }
  .handyleiste a.handyleiste-haupt { background: var(--lack); border-color: var(--lack); }
  .zettel { width: 100%; max-width: 20rem; }
}
@media print { .kopf, .fuss, .handyleiste, .zettelwand { display: none; } body { background: #fff; } .blatt { -webkit-mask: none; mask: none; } }