/* AtemTape – gemeinsames Aussehen aller Seiten.
   Die Seite ist ein Werktisch: Papier als Grund, darauf die echten Dinge aus der App
   (Gerät, Kassetten mit Einleger, Bon, Polaroid, Holz und Messing vom AtemSender).
   Text in Spectral wie AtemFlow, Geist nur für Bedienelemente, Geist Mono für Etiketten und Bon.
   Alle Schriften liegen auf diesem Server (keine Google-Verbindung). */

@font-face { font-family: "Geist"; src: url("schriften/geist.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("schriften/geist-mono.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Doto"; src: url("schriften/doto.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Spectral"; src: url("schriften/spectral-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Spectral"; src: url("schriften/spectral-400-kursiv.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Spectral"; src: url("schriften/spectral-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Spectral"; src: url("schriften/spectral-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Spectral"; src: url("schriften/spectral-500-kursiv.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Spectral"; src: url("schriften/spectral-600-kursiv.woff2") format("woff2"); font-weight: 600; font-style: italic; font-display: swap; }

:root {
  --papier: #F0E7D6;
  --papier-2: #E5D9C3;
  --tinte: #2A221B;
  --tinte-2: #5E5244;
  --glut: rgba(244,165,85,.55);
  --korn: .4; --korn-mix: multiply;
  --stempel: #B8361F;
  --start: #C9501F;
  --start-text: #FFF8F0;
  --gold: #8F7330;
  --titel: #16323A;
  --lcd: #B9C7A6; --lcd-tinte: #263022; --lcd-rand: #1B1C1E;
  --petrol: #1C4A50;
  --band: #1C4A50;
  --linie: rgba(70,45,20,.16);
  --perfo: rgba(70,45,20,.38);
  --schatten: rgba(60,35,10,.45);
  --bonpapier: #F7F3EA;
  --gewicht: 400;
  --lampe: rgba(255,250,236,.55);
  --bleistift: rgba(70,62,54,.7);
  --praegung: 0 1px 0 rgba(255,253,245,.7);
  --krepp: repeating-linear-gradient(90deg, rgba(120,95,50,.07) 0 1px, transparent 1px 3px), linear-gradient(180deg, rgba(60,45,20,.16), rgba(255,255,255,.2) 12%, rgba(255,255,255,0) 45%, rgba(90,70,30,.1) 88%, rgba(60,45,20,.2)), linear-gradient(100deg, transparent 30%, rgba(255,255,255,.18) 42%, transparent 55%), rgba(226,212,178,.78);
  --krepp-form: polygon(3.1% 0.0%, 3.7% 11.1%, 4.0% 22.2%, 4.7% 33.3%, 3.7% 44.4%, 4.6% 55.6%, 0.1% 66.7%, 2.3% 77.8%, 4.7% 88.9%, 3.2% 100.0%, 95.5% 100.0%, 99.4% 88.9%, 97.7% 77.8%, 98.8% 66.7%, 97.3% 55.6%, 97.1% 44.4%, 99.9% 33.3%, 98.9% 22.2%, 98.6% 11.1%, 95.4% 0.0%);
  --hell-an: block; --dunkel-an: none;
  --f-text: "Spectral", Georgia, "Times New Roman", serif;
  --f-ui: "Geist", "Helvetica Neue", Arial, sans-serif;
  --f-titel: "Spectral", Georgia, "Times New Roman", serif;
  --f-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --f-pixel: "Doto", "Geist Mono", ui-monospace, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papier: #2A241F; --papier-2: #221D19; --tinte: #F2E9DB; --tinte-2: #C2B4A1;
    --glut: rgba(244,160,80,.22); --korn: .16; --korn-mix: screen; --stempel: #F2875A;
    --start: #EA7440; --start-text: #1E120A; --gold: #D9BC72; --titel: #CFE0DD; --linie: rgba(242,233,219,.14);
    --band: #2D6168; --perfo: rgba(242,233,219,.32); --schatten: rgba(0,0,0,.6); --gewicht: 500; --tinte-2: #D6CAB8; --lampe: rgba(255,196,130,.075); --bleistift: rgba(222,210,192,.62);
    --hell-an: none; --dunkel-an: block; color-scheme: dark; --praegung: none;
  }
}
:root[data-theme="dark"] {
  --papier: #2A241F; --papier-2: #221D19; --tinte: #F2E9DB; --tinte-2: #C2B4A1;
  --glut: rgba(244,160,80,.22); --korn: .16; --korn-mix: screen; --stempel: #F2875A;
  --start: #EA7440; --start-text: #1E120A; --gold: #D9BC72; --titel: #CFE0DD; --linie: rgba(242,233,219,.14);
  --band: #2D6168; --perfo: rgba(242,233,219,.32); --schatten: rgba(0,0,0,.6); --gewicht: 500; --tinte-2: #D6CAB8; --lampe: rgba(255,196,130,.075); --bleistift: rgba(222,210,192,.62);
  --hell-an: none; --dunkel-an: block; color-scheme: dark; --praegung: none;
}

* { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background-color: var(--papier);
  background-image:
    radial-gradient(130% 70% at 50% -8%, var(--lampe), transparent 62%),
    url("bilder/material/flecken.png");
  background-size: 100% 1400px, 640px 640px;
  background-repeat: no-repeat, repeat;
  color: var(--tinte);
  font: var(--gewicht) 19px/1.55 var(--f-text);
  padding: 0 max(16px, env(safe-area-inset-right, 0px)) 48px max(16px, env(safe-area-inset-left, 0px));
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
/* Papierkorn über der ganzen Seite */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 50; opacity: var(--korn); mix-blend-mode: var(--korn-mix); background-size: 180px 180px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .32 0 0 0 0 .18 0 0 0 1.4 -.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E");
}
img { max-width: 100%; height: auto; }
/* !important: sonst gewinnt z. B. „.telefon img { display:block }“ und beide Fassungen erscheinen */
.nur-hell { display: var(--hell-an) !important; }
.nur-dunkel { display: var(--dunkel-an) !important; }
a { color: inherit; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--start); outline-offset: 3px; border-radius: 4px; }
.rahmen { max-width: 1100px; margin: 0 auto; }
.schmal { max-width: 720px; margin: 0 auto; }
.sprung { position: absolute; left: -9999px; }
.sprung:focus { left: 16px; top: 16px; z-index: 60; background: var(--papier); padding: 10px 14px; border-radius: 4px; font-family: var(--f-ui); }

/* Abschnittsmarke als Prägeband (Beschriftungsgerät): erhabene helle Buchstaben auf glänzendem Band */
.zeile-klein {
  display: inline-block; margin: 0 0 10px; padding: 7px 12px 6px;
  font: 700 12.5px/1 var(--f-mono); letter-spacing: .17em; text-transform: uppercase;
  color: rgba(246,243,236,.94);
  background: linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,.04) 42%, rgba(0,0,0,.12) 58%, rgba(0,0,0,.22)), var(--band);
  border-radius: 2px; transform: rotate(-1.4deg); transform-origin: left center;
  text-shadow: 0 1px 0 rgba(0,0,0,.5), 0 -1px 0 rgba(255,255,255,.22);
  box-shadow: 0 1px 1px rgba(0,0,0,.25), 0 2px 5px -2px rgba(0,0,0,.35);
}
h1, h2, h3 { text-wrap: balance; text-shadow: var(--praegung, none); }
h1 em, h2 em { font-style: italic; font-weight: 500; color: var(--gold); }
h2 { font: 600 clamp(32px, 4.2vw, 48px)/1.1 var(--f-titel); letter-spacing: -.015em; color: var(--titel); margin: 4px 0 14px; }
h3 { font: 600 23px/1.25 var(--f-titel); letter-spacing: -.01em; margin: 0; }
.leise { color: var(--tinte-2); }
section { padding-top: 96px; scroll-margin-top: 24px; }
.kopf-abschnitt { max-width: 660px; margin-bottom: 36px; }
.kopf-abschnitt p { margin: 0; color: var(--tinte-2); }

/* Kopf */
.kopf { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 22px 36px; position: relative; z-index: 5; }
.marke { display: grid; gap: 6px; text-decoration: none; }
.marke .wortmarke { height: 38px; width: auto; }
.absender { display: flex; align-items: center; gap: 8px; font: italic 500 15px/1 var(--f-titel); color: var(--tinte-2); }
.absender img { height: 30px; width: auto; }
.navi { display: flex; gap: 20px; font: 500 16px/1 var(--f-ui); flex-wrap: wrap; justify-content: flex-end; }
.navi a { text-decoration: none; color: var(--tinte-2); }
.navi a:hover, .navi a[aria-current="page"] { color: var(--tinte); text-decoration: underline; }

/* Knöpfe zu den Stores */
.stores { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.store { display: inline-flex; align-items: center; gap: 10px; font: 600 15px/1.1 var(--f-ui); padding: 12px 18px; border-radius: 9px; background: var(--tinte); color: var(--papier); text-decoration: none; }
.store small { display: block; font: 500 12px/1 var(--f-ui); opacity: .75; }
.store svg { width: 22px; height: 22px; flex: none; }
.store[aria-disabled="true"] { opacity: .78; cursor: default; }

/* Bildschirmfotos zeigen das Gerät selbst, ohne Handyrahmen: Statusleiste oben abgeschnitten */
.geraet-foto, .telefon img, .schritt img, .bon-bilder img, .sender-bilder img {
  display: block; width: 100%; aspect-ratio: 640 / 1268; object-fit: cover; object-position: 50% 78%;
  border-radius: 18px;
  box-shadow: 0 1px 1px rgba(0,0,0,.25), 0 3px 6px rgba(0,0,0,.18), 0 34px 54px -26px var(--schatten);
}

/* LCD zum Mitatmen */
.lcd { border-radius: 14px; padding: 10px; background: var(--lcd-rand); box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 14px 30px -12px rgba(0,0,0,.45); }
.lcd-innen {
  border-radius: 7px; overflow: hidden; background-color: var(--lcd); color: var(--lcd-tinte); padding: 14px 18px 12px;
  background-image: linear-gradient(rgba(38,48,34,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(38,48,34,.07) 1px, transparent 1px), linear-gradient(160deg, rgba(255,255,255,.28), transparent 45%);
  background-size: 4px 4px, 4px 4px, 100% 100%;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.25);
}
.lcd-zeile { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font: 700 15px/1 var(--f-pixel); letter-spacing: .1em; }
.lcd-gross { display: flex; align-items: baseline; gap: 12px; margin-top: 8px; font: 900 clamp(46px, 7vw, 64px)/1 var(--f-pixel); letter-spacing: .04em; min-height: 1em; }
.lcd-gross small { font-size: .42em; opacity: .65; }
.lcd canvas { display: block; width: 100%; height: 96px; }
.lcd-fuss { display: flex; justify-content: space-between; align-items: center; gap: 12px; font: 700 14px/1.2 var(--f-pixel); letter-spacing: .08em; min-height: 34px; }
.lcd-fuss button { font: 600 13px/1 var(--f-ui); color: var(--lcd-tinte); background: transparent; border: 1px solid rgba(38,48,34,.45); border-radius: 4px; padding: 8px 12px; cursor: pointer; flex: none; }

/* Fakten als Kassenbon */
.fakten {
  list-style: none; margin: 8px auto 0; padding: 22px 22px 26px; width: min(100%, 380px); position: relative;
  background: url("bilder/material/papier.jpg") center / 220px, var(--bonpapier); background-blend-mode: multiply; color: #35302A; font: 500 14.5px/1.35 var(--f-mono);
  transform: rotate(1deg);
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.18)) drop-shadow(0 22px 22px var(--schatten));
}
.fakten::before { content: "ATEMTAPE"; display: block; text-align: center; font: 700 15px/1 var(--f-mono); letter-spacing: .3em; padding-bottom: 14px; margin-bottom: 6px; border-bottom: 1.5px dashed rgba(43,38,33,.45); }
.fakten::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -9px; height: 10px;
  background: linear-gradient(135deg, var(--bonpapier) 50%, transparent 50%) 0 0 / 12px 10px repeat-x,
              linear-gradient(-135deg, var(--bonpapier) 50%, transparent 50%) 0 0 / 12px 10px repeat-x;
}
.fakten li { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 9px 0; text-transform: uppercase; letter-spacing: .03em; }
.fakten li span:first-child { flex: none; }
.fakten li span:first-child::after { content: ""; }
.fakten li span:last-child { text-align: right; font-weight: 700; }
.fakten li + li { border-top: 1px dotted rgba(43,38,33,.35); }

/* Textseiten (Hilfe, Datenschutz, Impressum) */
.textseite h1 { font: 600 clamp(36px, 5vw, 56px)/1.08 var(--f-titel); letter-spacing: -.02em; color: var(--titel); margin: 8px 0 18px; }
.textseite h2 { font-size: clamp(24px, 2.6vw, 30px); margin-top: 48px; }
.textseite h3 { font-size: 20px; margin: 28px 0 6px; }
.textseite p, .textseite li { color: var(--tinte-2); }
.textseite p { margin: 0 0 14px; max-width: 64ch; }
.textseite ul { padding-left: 22px; max-width: 64ch; }
.textseite li { margin-bottom: 6px; }
.textseite strong { color: var(--tinte); font-weight: 600; }
.stand { font: 500 14px/1.4 var(--f-mono); color: var(--tinte-2); letter-spacing: .02em; }
.adresse { font-style: normal; line-height: 1.6; margin: 0 0 14px; color: var(--tinte); }

/* Fragen und Antworten */
.fragen details { border-bottom: 1px solid var(--linie); padding: 4px 0; }
.fragen details:first-of-type { border-top: 1px solid var(--linie); }
.fragen summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 0; font: 600 20px/1.3 var(--f-titel); color: var(--tinte); }
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after { content: "+"; font: 400 26px/1 var(--f-ui); color: var(--start); flex: none; transition: transform .2s; }
.fragen details[open] summary::after { transform: rotate(45deg); }
.fragen details > div { padding: 0 0 18px; }
.fragen details > div p:last-child { margin-bottom: 0; }

/* Kontaktkarte als Zettel */
.kontakt { margin-top: 56px; border-radius: 2px; background: var(--papier-2); padding: 26px clamp(20px, 3vw, 32px); display: grid; gap: 8px; box-shadow: 0 16px 26px -20px var(--schatten); }
.kontakt h2 { margin: 0; font-size: 26px; }
.kontakt p { margin: 0; }
.kontakt a.mail { font: 600 18px/1.3 var(--f-ui); color: var(--titel); }

/* Fuß */
.fuss { margin-top: 96px; padding-top: 28px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px 32px; align-items: center; color: var(--tinte-2); font-size: 15px; font-family: var(--f-ui);
  background: radial-gradient(circle, var(--perfo) 1.3px, transparent 1.7px) 0 0 / 10px 4px repeat-x; }
.fuss .absender img { height: 30px; }
.fuss nav { display: flex; gap: 18px; flex-wrap: wrap; justify-content: flex-end; }
.fuss nav a { color: var(--tinte-2); }
.fuss small { grid-column: 1 / -1; font-size: 13px; }

@media (max-width: 860px) {
  section { padding-top: 72px; }
  .kopf { flex-wrap: wrap; }
  .navi { gap: 14px; font-size: 15px; justify-content: flex-start; }
  .fuss { grid-template-columns: minmax(0, 1fr); }
  .fuss nav { justify-content: flex-start; }
}

/* ---------- Startseite ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 52px; align-items: start; }
.hero h1 { font: 600 clamp(42px, 6.6vw, 80px)/1.02 var(--f-titel); letter-spacing: -.02em; color: var(--titel); margin: 10px 0 20px; }
.hero .unter { font-size: clamp(20px, 2vw, 23px); line-height: 1.5; color: var(--tinte-2); max-width: 36ch; margin: 0 0 26px; text-wrap: pretty; }
.hero .unter:has(+ .wozu) { margin-bottom: 10px; }
.hero .wozu { font-size: clamp(17px, 1.6vw, 19px); color: var(--tinte); max-width: 42ch; }
.telefon { justify-self: center; width: min(100%, 340px); position: relative; isolation: isolate; transform: rotate(2deg); margin-top: 8px; }
.lcd-im-geraet { position: absolute; z-index: 2; left: 11.25%; width: 77.5%; top: 17.05%; height: 78.1%; padding: 0; border-radius: 3.2% / 1.6%; background: none; box-shadow: none; overflow: hidden; container-type: inline-size;
  --lcd: #BAC8A6; --lcd-tinte: #243021; }
/* Neue Bildschirmfotos (EN/ES, bilder/en, bilder/es): Display füllt fast die ganze Höhe */
.telefon.neu .lcd-im-geraet { left: 10.45%; width: 79%; top: .5%; height: 78.5%; }
.lcd-im-geraet .lcd-innen { height: 100%; border-radius: 0; display: flex; flex-direction: column; padding: 5.5cqi 6cqi 0; box-shadow: inset 0 0 0 2px rgba(0,0,0,.55), inset 0 6px 14px rgba(0,0,0,.28);
  background-size: 3px 3px, 3px 3px, 100% 100%; }
.lcd-im-geraet .lcd-innen::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(155deg, rgba(255,255,255,.16), transparent 38%); }
.lcd-im-geraet .lcd-zeile { font-size: 4.6cqi; }
.lcd-im-geraet .lcd-gross { font-size: 21cqi; margin-top: 3cqi; }
.lcd-im-geraet canvas { flex: 1; height: auto; min-height: 0; margin: 2cqi 0; }
.lcd-im-geraet .lcd-fuss { margin: 0 -6cqi; padding: 2.6cqi 4cqi 2.6cqi 6cqi; font-size: 4.3cqi; min-height: 0; background: rgba(36,48,33,.14); }
.lcd-im-geraet .lcd-fuss span { white-space: nowrap; overflow: hidden; text-overflow: clip; }
.lcd-im-geraet .lcd-fuss button { font-size: 3.6cqi; padding: 1.6cqi 2.6cqi; border-radius: 3px; }
:root[data-theme="dark"] .lcd-im-geraet { --lcd: #150D06; --lcd-tinte: #F3A54C; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lcd-im-geraet { --lcd: #150D06; --lcd-tinte: #F3A54C; } }
.lcd-im-geraet .lcd-innen { text-shadow: var(--lcd-glimmen, none); }
:root[data-theme="dark"] .lcd-im-geraet { --lcd-glimmen: 0 0 6px rgba(243,165,76,.55); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lcd-im-geraet { --lcd-glimmen: 0 0 6px rgba(243,165,76,.55); } }
:root[data-theme="dark"] .lcd-im-geraet .lcd-innen { background-image: linear-gradient(rgba(243,165,76,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(243,165,76,.06) 1px, transparent 1px), linear-gradient(160deg, rgba(255,255,255,.05), transparent 45%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lcd-im-geraet .lcd-innen { background-image: linear-gradient(rgba(243,165,76,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(243,165,76,.06) 1px, transparent 1px), linear-gradient(160deg, rgba(255,255,255,.05), transparent 45%); } }
:root[data-theme="dark"] .lcd-im-geraet .lcd-fuss { background: #EA9447; color: #2A1606; text-shadow: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lcd-im-geraet .lcd-fuss { background: #EA9447; color: #2A1606; text-shadow: none; } }
:root[data-theme="dark"] .lcd-im-geraet .lcd-fuss button { color: #2A1606; border-color: rgba(42,22,6,.5); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lcd-im-geraet .lcd-fuss button { color: #2A1606; border-color: rgba(42,22,6,.5); } }
.telefon::before { content: ""; position: absolute; inset: -18% -38%; z-index: -1; pointer-events: none; background: radial-gradient(closest-side, var(--glut), transparent 72%); }
.stempel { flex: none; width: 160px; margin: -50px 0 -50px auto; color: var(--stempel); transform: rotate(-12deg); pointer-events: none; }
.stempel svg { display: block; width: 100%; height: auto; overflow: visible; }
.probier { margin-top: 34px; display: flex; align-items: center; gap: 6px; }
.probier > p { margin: 0; flex: 0 1 auto; max-width: 300px; font: italic 500 21px/1.35 var(--f-titel); color: var(--tinte); }
.pfeil { flex: none; width: 190px; height: auto; margin-top: 46px; overflow: visible; }
.pfeil path { fill: none; stroke: var(--bleistift); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; filter: url(#bleistift); }
@media (max-width: 860px) { .pfeil { width: 90px; margin: 30px 0 -40px; transform: rotate(70deg); } }

/* Warum: Text rechts, links eine echte Kassette, deren Spulen sich drehen */
.warum { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 56px; align-items: start; }
.warum-text p { margin: 0 0 18px; color: var(--tinte-2); max-width: 58ch; }
.warum-text .anfang { font-size: clamp(21px, 2vw, 24px); line-height: 1.5; color: var(--tinte); font-weight: 500; }
.mini-kassette { position: relative; margin-top: 26px; width: 280px; max-width: 100%; aspect-ratio: 528 / 336; background: url("bilder/material/kassette-1.png") center / contain no-repeat; transform: rotate(-3deg); filter: drop-shadow(0 16px 16px var(--schatten)); }
.mini-etikett { position: absolute; left: 11%; right: 11%; top: 11%; display: flex; justify-content: space-between; align-items: baseline; color: #23201C; }
.mini-etikett b { font: 700 15px/1 var(--f-mono); letter-spacing: .12em; }
.mini-etikett span { font: 600 10.5px/1 var(--f-mono); letter-spacing: .06em; opacity: .7; }
.mini-fenster { position: absolute; inset: 0; }
.mini-fenster .spule { position: absolute; top: 41.5%; width: 8.5%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  background: repeating-conic-gradient(rgba(238,232,220,.95) 0 16deg, transparent 16deg 60deg);
  -webkit-mask: radial-gradient(circle, transparent 34%, #000 36%); mask: radial-gradient(circle, transparent 34%, #000 36%);
  animation: spule 7s linear infinite; }
.mini-fenster .spule:first-child { left: 35.2%; }
.mini-fenster .spule:last-child { left: 64.4%; animation-duration: 9s; }
@keyframes spule { to { rotate: 360deg; } }
@media (prefers-reduced-motion: reduce) { .mini-fenster .spule { animation: none; } }
.mini-unter { margin: 10px 0 0; font-size: 16px; font-style: italic; color: var(--tinte-2); }
.retro-titel { margin: 64px 0 18px; font-size: clamp(24px, 2.6vw, 30px); letter-spacing: -.02em; }
.retro { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.retro > div { padding-top: 18px; display: grid; gap: 8px; align-content: start;
  background: radial-gradient(circle, var(--perfo) 1.3px, transparent 1.7px) 0 0 / 10px 4px repeat-x; }
.retro h4 { margin: 0; font: 600 22px/1.25 var(--f-titel); }
.retro p { margin: 0; color: var(--tinte-2); font-size: 17px; }

/* Maria: echtes Polaroid, vergilbt, mit Unterschrift im Rand */
.maria { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 60px; align-items: center; }
.foto {
  margin: 0; position: relative; padding: 14px 14px 78px; border-radius: 2px; transform: rotate(-1.8deg);
  background:
    radial-gradient(ellipse 40% 26% at 82% 88%, rgba(150,110,40,.14), transparent 70%),
    radial-gradient(ellipse 30% 18% at 12% 8%, rgba(140,100,40,.12), transparent 70%),
    radial-gradient(ellipse 120% 90% at 50% 45%, transparent 55%, rgba(120,85,35,.22) 100%),
    url("bilder/material/papier.jpg") center / 260px,
    #EDE3CC;
  background-blend-mode: normal, normal, normal, multiply, normal;
  box-shadow: inset 0 0 0 1px rgba(120,90,50,.18), inset 0 0 14px rgba(130,95,40,.18),
              0 1px 2px rgba(60,35,10,.2), 0 30px 50px -22px var(--schatten);
}
.foto img { width: 100%; display: block; aspect-ratio: 4 / 3.4; object-fit: cover; object-position: 62% 30%;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.2); outline: 1px solid rgba(60,40,20,.25); outline-offset: -1px; }
.foto figcaption { position: absolute; left: 22px; bottom: 6px; }
.foto figcaption img { width: 120px; aspect-ratio: auto; object-fit: initial; box-shadow: none; outline: 0; mix-blend-mode: multiply; opacity: .9; transform: rotate(-3deg); }
.maria-text p { margin: 0 0 16px; color: var(--tinte-2); max-width: 50ch; }
.maria-text .anfang { color: var(--tinte); font-size: clamp(20px, 1.9vw, 22px); font-weight: 500; }
.ansage { font: 700 15px/1.3 var(--f-pixel); letter-spacing: .08em; color: var(--lcd-tinte); background: var(--lcd); border-radius: 4px; padding: 9px 12px; display: inline-block; margin: 4px 0 18px; box-shadow: inset 0 0 0 4px var(--lcd-rand), inset 0 2px 8px 4px rgba(0,0,0,.2); padding: 12px 16px; }

/* Schritte: Gerät pur, Nummern wie das Zählwerk am Rekorder */
.schritte { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.schritt { display: grid; gap: 12px; align-content: start; }
.schritt img { border-radius: 14px; }
.schritt .nr { justify-self: start; margin-top: 6px; padding: 6px 8px 5px; border-radius: 3px; background: #151516; color: #F2EEE6; font: 700 16px/1 var(--f-mono); letter-spacing: .14em;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), inset 0 7px 6px -5px rgba(0,0,0,.9), inset 0 -7px 6px -5px rgba(0,0,0,.9), 0 1px 0 rgba(255,255,255,.1); }
.schritt .nr::before { content: "000"; opacity: .45; }
.schritt p { margin: 0; color: var(--tinte-2); font-size: 17px; }

/* Kassetten: echte Kassette auf ihrem Papier-Einleger */
.tapes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
.tape {
  position: relative; display: grid; align-content: start; padding: 0 14px 20px; margin-top: 18px; border-radius: 2px;
  background: url("bilder/material/papier.jpg") center / 240px, #F3ECDD; background-blend-mode: multiply;
  color: #2B2621;
  box-shadow: 0 1px 1px rgba(0,0,0,.18), 0 18px 26px -18px var(--schatten);
}
.tape:nth-child(even) { transform: rotate(.6deg); }
.tape:nth-child(odd) { transform: rotate(-.5deg); }
.etikett { position: relative; margin: -18px -8px 4px; aspect-ratio: 528 / 336; background: url("bilder/material/kassette-1.png") center / contain no-repeat; filter: drop-shadow(0 6px 6px rgba(0,0,0,.35)); }
.tape:nth-child(even) .etikett { background-image: url("bilder/material/kassette-2.png"); }
.etikett::after { content: ""; position: absolute; left: 7%; right: 7%; top: 56%; height: 4.5%; background: var(--etikett); mix-blend-mode: multiply; filter: saturate(1.6) brightness(.86); }
.etikett b { position: absolute; left: 12%; right: 12%; top: 13%; font: 700 clamp(13px, 1.25vw, 16px)/1 var(--f-mono); letter-spacing: .14em; color: #23201C; }
.spulen { display: none; }
.tape h3 { color: #2B2621; font-size: 19px; margin: 10px 0 6px; padding-bottom: 6px; border-bottom: 1px solid rgba(176,64,40,.4); }
.tape p { color: #5A5048; margin: 0; font-size: 16px; line-height: 1.45; }
.seiten { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 7px; font: 600 13px/1.35 var(--f-mono); color: #3A332B; letter-spacing: .02em; }
.seiten span { display: inline-block; min-width: 1.7em; font: 700 12px/1 var(--f-mono); color: #F3ECDD; background: #2B2621; border-radius: 2px; padding: 3px 5px; margin-right: 6px; text-align: center; }
.tapes-fuss { margin-top: 22px; color: var(--tinte-2); font-size: 17px; max-width: 70ch; }

/* Bon */
.bon-band { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.bon-band p { color: var(--tinte-2); margin: 0 0 14px; max-width: 52ch; }
.bon-bilder { display: flex; gap: 20px; justify-content: center; }
.bon-bilder img { width: min(46%, 240px); border-radius: 14px; transform: rotate(-1.5deg); }
.bon-bilder img:last-child { transform: translateY(36px) rotate(1.5deg); }

/* AtemSender: das Holzgehäuse mit Schrauben und Messing */
.sender {
  margin-top: 104px; border-radius: 16px; color: #F3EAD9; padding: clamp(32px, 4.5vw, 56px); display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 44px; align-items: center; position: relative; overflow: hidden; isolation: isolate;
  background: url("bilder/material/holz.jpg") center / cover, #5A3B22;
  box-shadow: inset 0 2px 0 rgba(255,235,200,.16), inset 0 -3px 0 rgba(0,0,0,.4), inset 0 0 0 1px rgba(0,0,0,.35), inset 0 0 40px rgba(0,0,0,.35), 0 34px 54px -28px var(--schatten);
}
.sender::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(100deg, rgba(28,16,6,.62), rgba(28,16,6,.18) 70%); }
.sender::before { content: ""; position: absolute; inset: 12px; z-index: 0; pointer-events: none;
  background: url("bilder/material/schraube.png") left top / 18px no-repeat, url("bilder/material/schraube.png") right top / 18px no-repeat,
              url("bilder/material/schraube.png") left bottom / 18px no-repeat, url("bilder/material/schraube.png") right bottom / 18px no-repeat; }
.sender > * { position: relative; z-index: 1; }
.sender h2 { color: #F6EEDD; text-shadow: 0 1px 2px rgba(0,0,0,.45); }
.sender h2 em { color: #E9C77E; }
.sender .zeile-klein, .probe {
  color: #3A2810; background: url("bilder/material/messing.png") center / 100% 100%, #C9A55A;
  text-shadow: 0 1px 0 rgba(255,238,195,.55), 0 -1px 0 rgba(70,45,10,.25);
  box-shadow: 0 1px 1px rgba(0,0,0,.4), 0 3px 6px -2px rgba(0,0,0,.45);
}
.sender p { color: rgba(243,234,217,.9); margin: 0 0 14px; max-width: 50ch; text-shadow: 0 1px 1px rgba(0,0,0,.35); }
.sender ul { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.sender li { padding-left: 26px; position: relative; color: rgba(243,234,217,.94); text-shadow: 0 1px 1px rgba(0,0,0,.35); }
.sender li::before { content: ""; position: absolute; left: 0; top: .35em; width: 14px; height: 14px; background: url("bilder/material/schraube.png") center / contain no-repeat; }
.sender-bilder { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.5fr) minmax(0, .72fr); gap: 12px; align-items: center; margin-right: -8px; }
.sender-bilder img { border-radius: 12px; box-shadow: 0 0 0 1px rgba(0,0,0,.35), 0 22px 40px -18px rgba(0,0,0,.75); }
.probe { display: inline-block; margin-top: 20px; font: 700 12.5px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; border-radius: 2px; padding: 10px 16px 9px; }

/* Kosten */
.band { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.paket { margin: 22px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.paket li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: start; color: var(--tinte-2); }
.paket li b { color: var(--tinte); }
.paket li::before { content: "✦"; color: var(--gold); font-size: 18px; line-height: 1.4; }

.hinweis { margin-top: 64px; padding: 18px 0 0; max-width: 70ch; color: var(--tinte-2); font-size: 17px;
  background: radial-gradient(circle, var(--perfo) 1.3px, transparent 1.7px) 0 0 / 10px 4px repeat-x; }
.hinweis b { color: var(--tinte); }

.studio {
  margin: 104px auto 0; max-width: 860px; position: relative; transform: rotate(-.8deg);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 26px; align-items: center;
  padding: 30px clamp(22px, 4vw, 40px); color: #16323A; border-radius: 1px;
  background: url("bilder/material/papier.jpg") center / 260px, #EFE6D3; background-blend-mode: multiply;
  box-shadow: inset 0 0 0 7px #EFE6D3, inset 0 0 0 8.5px rgba(22,50,58,.75), inset 0 0 0 11px #EFE6D3, inset 0 0 0 11.8px rgba(22,50,58,.5),
              0 1px 1px rgba(0,0,0,.18), 0 22px 30px -20px var(--schatten);
}
.studio::before { content: ""; position: absolute; top: -12px; right: 70px; width: 96px; height: 26px; transform: rotate(5deg); background: var(--krepp); clip-path: var(--krepp-form); opacity: .9; }
.studio h2 { color: #16323A; font-size: clamp(26px, 3vw, 34px); margin: 2px 0 8px; text-shadow: none; }
.studio h2 em { color: #8A6A28; }
.studio p { margin: 0; color: #3D4F52; max-width: 52ch; font-weight: 400; }
.studio .zeile-klein { --band: #16323A; }
.studio > div:first-child { display: grid; grid-template-columns: 140px minmax(0, 1fr); column-gap: 28px; align-items: start; justify-items: start; }
.studio > div:first-child > * { grid-column: 2; }
.studio-logo { grid-column: 1 !important; grid-row: 1 / span 4; align-self: center; width: 140px; height: auto; display: block; }
@media (max-width: 560px) { .studio > div:first-child { grid-template-columns: minmax(0, 1fr); } .studio-logo { grid-row: auto; width: 130px; margin-bottom: 12px; } .studio > div:first-child > * { grid-column: 1; } }
.knopf-gold { font: 700 14px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: #F3EDE0; background: #16323A; padding: 15px 18px 14px; border-radius: 2px; text-decoration: none; white-space: nowrap; box-shadow: 0 2px 0 #0B1E22; }
.knopf-gold:hover { background: #1C4A50; }

@media (max-width: 860px) {
  .hero, .band, .studio, .warum, .maria, .bon-band, .sender { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .telefon { width: min(74%, 300px); }
  .stempel { width: 132px; margin: -24px 0 -36px auto; }
  .schritte { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 18px; }
  .retro { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .retro-titel { margin-top: 48px; }
  .bon-bilder img:last-child { transform: translateY(20px) rotate(1.5deg); }
  .sender { margin-top: 80px; }
  .studio { margin-top: 80px; grid-template-columns: minmax(0, 1fr); }
  .sender-bilder { margin-right: 0; }
  /* Kassetten als waagrechte Reihe zum Wischen */
  .tapes { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(72%, 270px); overflow-x: auto; scroll-snap-type: x mandatory;
    margin-inline: -16px; padding: 4px 16px 22px; scrollbar-width: none; }
  .tapes::-webkit-scrollbar { display: none; }
  .tape { scroll-snap-align: start; }
  .etikett b { font-size: 15px; }
}
@media (max-width: 1000px) and (min-width: 861px) { .tapes { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 34px; } }

/* Sprachleiste wie bei lowflow.app: DE · EN · ES, ohne Flaggen */
.sprachen { display: inline-flex; align-items: center; gap: 2px; padding-left: 16px; border-left: 1.5px solid var(--linie); color: var(--tinte-2); }
.sprachen svg { margin-right: 6px; flex: none; }
.navi .sprachen a { padding: 4px 5px; text-decoration: none; border-bottom: 2px solid transparent; font: 600 14px/1 var(--f-mono); letter-spacing: .04em; }
.navi .sprachen a[aria-current="true"] { color: var(--tinte); border-bottom-color: var(--gold); }
/* Hinweis zur Sprache (nur ES: Stimme folgt, bis dahin Signalton) */
/* als Zettel mit Klebestreifen, Papier bleibt in beiden Modi hell */
.app-sprache { position: relative; margin: 22px 0 0; font-size: 17px; line-height: 1.5; color: #2A221B; background: #F3E4BC; border-radius: 1px; padding: 18px 20px 16px; max-width: 54ch; transform: rotate(-.7deg); box-shadow: 0 1px 1px rgba(0,0,0,.15), 0 16px 22px -16px var(--schatten); }
.app-sprache::before { content: ""; position: absolute; top: -11px; left: 28px; width: 86px; height: 22px; transform: rotate(-4deg); background: rgba(236,220,185,.75); box-shadow: 0 1px 1px rgba(0,0,0,.08); }
.app-sprache b { display: block; font-size: 18px; margin-bottom: 2px; }
.app-sprache a { color: #16323A; }
@media (max-width: 860px) { .sprachen { padding-left: 0; border-left: 0; } }
.stores + .app-sprache { margin-top: 44px; }
@media (max-width: 860px) { .stores + .app-sprache { margin-top: 52px; } }

/* Prägeband-Schrift gewinnt gegen „.textseite p“, „.kopf-abschnitt p“ usw. (Messing im Sender ist spezifischer) */
body .zeile-klein { color: rgba(246,243,236,.94); }

/* Retro-Punkte stehen jetzt links unter der Kassette, kompakt untereinander */
.warum .retro-titel { margin: 40px 0 12px; font-size: 22px; }
.warum .retro { grid-template-columns: minmax(0, 1fr); gap: 14px; max-width: 360px; }
.warum .retro > div { padding-top: 12px; gap: 4px; }
.warum .retro h4 { font-size: 19px; }
.warum .retro p { font-size: 16px; }