/* RJ Design, „Daumenkino“. Unterer Teil und Rechtsseiten: Pause als Drehbuchseite (Papier, Courier), ab den Referenzen modern
   (Bau-Runde 6: Outfit sehr groß, Referenzen auf Graphit mit hellem Text, Kontakt und Fußzeile auf hellem Papierweiß, Goldpunkt
   als einziger Farbakzent), Impressum und Datenschutz. */

.papier { position: relative; z-index: 2; background-color: var(--papier); color: var(--graphit); color-scheme: light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='p' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .18  0 0 0 0 .17  0 0 0 0 .15  0 0 0 .085 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E"); }
.papier a { text-decoration: underline; text-underline-offset: .28em; text-decoration-thickness: 1px; }
@media (hover: hover) { .papier a:hover { text-decoration-thickness: 2px; } }

.drehbuch { max-width: 80rem; margin-inline: auto; padding: clamp(4.5rem, 12svh, 9rem) var(--rand) clamp(4rem, 10svh, 7rem); }
.drehbuch--knapp { padding-top: clamp(3rem, 8svh, 6rem); }
.abschnittskopf { font: 700 var(--fs-kopf)/1.5 var(--courier); letter-spacing: .14em; text-transform: uppercase; margin-bottom: clamp(1.4rem, 4svh, 2.4rem); }
.abschnittskopf::before { content: ""; display: inline-block; width: 2.2em; height: 1px; background: currentColor; vertical-align: middle; margin-right: .9em; }

/* ---------- Pause: „Das war ein Daumenkino.“ (Drehbuchseite; Bau-Runde 6: Kopf links, die zwei Absätze daneben, die drei Tafeln
   nebeneinander mit Begriff über Satz, die Notiz einmal klein darunter; Ziel am Desktop höchstens 1,3 Bildschirme) ---------- */
.pause .drehbuch { padding-top: clamp(3.5rem, 7svh, 5rem); padding-bottom: clamp(2.5rem, 5.5svh, 4rem); }
/* Kopfspalte knapp breiter als die Textspalten, damit „Daumenkino.“ ab 1025 px in einer Zeile bleibt (Courier: 0,6 em je Zeichen) */
.pause__kopfzeile { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem clamp(2rem, 3.6vw, 4rem); align-items: start; }
.pause__kopf { font: 700 clamp(1.9rem, 1rem + 2.85vw, 3.5rem)/1.1 var(--courier); letter-spacing: -.005em; text-wrap: balance; }
.pause__text { margin: 0; max-width: 52ch; }
.pause__tafeln { margin-top: clamp(2rem, 4.5svh, 3rem); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem clamp(1.6rem, 3vw, 3rem); align-items: start; }
.tafel__titel { margin: 0; padding-bottom: .6rem; border-bottom: 1px solid var(--graphit); font: 700 var(--fs-kopf)/1.5 var(--courier); letter-spacing: .14em; text-transform: uppercase; }
.tafel dl { margin: 0; }
.tafel__zeile { padding: .55rem 0 .65rem; border-bottom: 1px solid var(--graphit); }
.tafel dt { font-weight: 700; }
.tafel dd { margin: .1rem 0 0; font-size: .95em; line-height: 1.45; }
.pause__notiz { margin: clamp(1.4rem, 3svh, 2rem) 0 0; font: italic 400 var(--fs-klein)/1.5 var(--courier); letter-spacing: .01em; max-width: 72ch; }
@media (max-width: 64em) {
  .pause__kopfzeile { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pause__kopf { grid-column: 1 / -1; }
  .pause__tafeln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 40em) { .pause__kopfzeile, .pause__tafeln { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Ab hier modern (Bau-Runde 6): Outfit, große selbstbewusste Typografie mit kleinen gesperrten Labels als Gegenpol,
   klare Raster, viel Raum. Die Referenzen liegen auf Graphit mit hellem Text (der Schnitt nach der Papierseite), Kontakt und Fußzeile
   auf hellem, klarem Papierweiß ohne Struktur. Der einzige Farbakzent ist der Goldpunkt (die Kugel aus dem Logo) vor den Labels.
   Bewegung: Abschnitte blenden nur in der Deckkraft ein (--dur-blende, --ease-film), nichts schiebt sich herein. ---------- */
.modern { font-family: var(--outfit); font-weight: 400; background-image: none; background-color: var(--papier-hell); color: var(--graphit); }
.modern--dunkel { background-color: var(--graphit); color: var(--papier-hell); color-scheme: dark; }
.modern--dunkel ::selection { background: var(--papier-hell); color: var(--graphit); }
.modern .drehbuch { padding: clamp(5rem, 14svh, 10rem) var(--rand) clamp(5rem, 12svh, 9rem); }
.modern__label { display: flex; align-items: center; gap: .7em; margin: 0; font: 600 var(--fs-kopf)/1.4 var(--outfit); letter-spacing: .16em; text-transform: uppercase; }
.modern__label::before { content: ""; flex: none; width: .85em; height: .85em; background: url("../marke/gold-128.png") center / contain no-repeat; }
.modern__titel { margin-top: .4em; font: 300 var(--fs-riesig)/.98 var(--outfit); letter-spacing: -.03em; text-wrap: balance; max-width: 12ch; }
.modern__unter { margin-top: clamp(1.2rem, 3svh, 2rem); max-width: 46ch; font-size: clamp(1.1rem, 1rem + .45vw, 1.4rem); line-height: 1.5; }
.modern a { text-underline-offset: .22em; }
.js .einblenden { opacity: 0; transition: opacity var(--dur-blende) var(--ease-film); }
.js .einblenden.ist-da { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .js .einblenden { opacity: 1; transition: none; } }

/* ---------- Referenzen (dunkel; Bildschirm und Handy wie in einer Produktpräsentation) ---------- */
.programm__liste { list-style: none; margin: clamp(3.5rem, 9svh, 6rem) 0 0; padding: 0; display: grid; gap: clamp(4rem, 10svh, 7rem); }
.eintrag { display: grid; grid-template-columns: minmax(0, 7fr) minmax(16rem, 4fr); gap: 1.6rem clamp(2rem, 4vw, 4rem); align-items: center; }
.eintrag:nth-child(even) { grid-template-columns: minmax(16rem, 4fr) minmax(0, 7fr); }
.eintrag:nth-child(even) .geraete { order: 2; }

/* Referenzen in Bildschirm und Handy (Riccardo, 08.10.2026: „in einem iMac und einem iPhone“). Schlicht gezeichnete Geräte ohne
   Marke: Bildschirm mit schmalem schwarzem Rand, hellem Kinn und Standfuß aus Aluminium, davor rechts unten das Handy mit
   Kamera-Insel. Die Schirme sind erst dunkel und gehen an, wenn das Paar ins Bild kommt (.ist-an, js/programm.js); beim Scrollen
   gleitet das Handy ein Stück am Bildschirm vorbei (--lage 0..1). Ohne JS und bei „Bewegung reduzieren“: Standbilder, keine Bewegung.
   Auf dem dunklen Grund werfen die Geräte schwarze Schatten und ein weicher Lichtschein des Bildschirms liegt dahinter, sobald er an ist. */
.geraete { --rahmen: #111113; --alu-hell: #ecedef; --alu: #c9cbcf; --alu-dunkel: #a7aaaf;
  --schatten-a: rgba(47, 44, 40, .28); --schatten-b: rgba(47, 44, 40, .5); --schatten-c: rgba(47, 44, 40, .22);
  position: relative; width: min(100%, 118svh); margin: 0 auto; padding-bottom: clamp(.8rem, 2.4vw, 2rem); }
.modern--dunkel .geraete { --schatten-a: rgba(0, 0, 0, .55); --schatten-b: rgba(0, 0, 0, .7); --schatten-c: rgba(0, 0, 0, .4); }
.modern--dunkel .geraete::before { content: ""; position: absolute; z-index: 0; inset: -14% -10% -6%; pointer-events: none; opacity: 0;
  background: radial-gradient(58% 54% at 48% 42%, rgba(244, 237, 225, .14), rgba(244, 237, 225, 0) 72%); transition: opacity 1.4s var(--ease-film); }
.modern--dunkel .geraete.ist-an::before { opacity: 1; }
.geraete__desktop { position: relative; z-index: 1; width: 86%; filter: drop-shadow(0 24px 26px var(--schatten-a)); }
.geraete__schirm { position: relative; overflow: hidden; background: var(--kino); }
.geraete__schirm img, .geraete__schirm video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.geraete__schirm--desktop { aspect-ratio: 16 / 10; border: clamp(5px, .85vw, 12px) solid var(--rahmen);
  border-radius: clamp(7px, 1.1vw, 16px) clamp(7px, 1.1vw, 16px) 0 0; }
.geraete__kinn { height: clamp(15px, 3vw, 42px); border-radius: 0 0 clamp(7px, 1.1vw, 16px) clamp(7px, 1.1vw, 16px);
  background: linear-gradient(180deg, var(--alu-hell), var(--alu)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7); }
.geraete__fuss { position: relative; width: 20%; height: clamp(22px, 4.4vw, 62px); margin: 0 auto;
  background: linear-gradient(90deg, var(--alu-dunkel), var(--alu-hell) 48%, var(--alu)); clip-path: polygon(16% 0, 84% 0, 100% 100%, 0 100%); }
.geraete__fuss::after { content: ""; position: absolute; left: -2%; right: -2%; bottom: 0; height: 12%; background: linear-gradient(90deg, var(--alu-dunkel), var(--alu-hell) 50%, var(--alu-dunkel)); }
/* Handy etwas breiter und größer (Riccardo 08.10.: „sieht sehr hoch aus, aber sehr schmal“): die Höhe ergibt sich aus dem Display
   im Seitenverhältnis der Aufnahme (390×844), damit links und rechts nichts abgeschnitten wird; schmalere Ränder */
.geraete__handy { position: absolute; z-index: 2; right: 0; bottom: 0; width: 27%;
  padding: clamp(7px, 1.2vw, 17px) clamp(4px, .55vw, 8px) clamp(4px, .55vw, 8px);   /* oben ein schmaler Rand für die Kamera, damit sie keine Logos verdeckt */
  border-radius: clamp(9px, 1.6vw, 22px); background: var(--rahmen);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08) inset, 0 26px 36px -14px var(--schatten-b), 0 6px 12px var(--schatten-c);
  transform: translateY(calc((.5 - var(--lage, .5)) * 22%)); will-change: transform; }
.geraete__handy::before { content: ""; position: absolute; z-index: 2; top: clamp(2px, .4vw, 6px); left: 50%; width: 20%; height: clamp(3px, .42vw, 6px);
  transform: translateX(-50%); border-radius: 999px; background: #2a2a2e; }
/* Eckiger Schirm (Riccardo: in den runden Ecken wurden die Logos oben links abgeschnitten); Aufnahme oben bündig */
.geraete__schirm--handy { width: 100%; aspect-ratio: 390 / 844; border-radius: clamp(3px, .6vw, 8px); }
.geraete__schirm--handy img, .geraete__schirm--handy video { object-position: top center; }
/* Schirm aus (dunkel), dann an: kurzes Aufhellen wie ein Bildschirm, der eingeschaltet wird */
.geraete__schirm img { filter: brightness(.18) saturate(.6); transition: filter .9s var(--ease-film); }
.geraete.ist-an .geraete__schirm img { filter: none; }
.geraete__handy .geraete__schirm img { transition-delay: .25s; }
.geraete__schirm video { opacity: 0; transition: opacity .5s var(--ease-film); }
.geraete__schirm video.spielt { opacity: 1; }
.no-js .geraete__schirm img { filter: none; }
@media (prefers-reduced-motion: reduce) { .geraete__handy { transform: none; } .geraete__schirm img { transition: none; } .modern--dunkel .geraete::before { transition: none; } }

/* Text knapp unter dem Gerätepaar: Nummer, Name, Gewerk · Ort, die eine Zeile, Ansehen, Adresse */
.eintrag__text { padding-top: .2rem; }
.eintrag__nr { font: 300 clamp(1.1rem, 1rem + .4vw, 1.4rem)/1.2 var(--outfit); letter-spacing: .08em; opacity: .55; font-variant-numeric: tabular-nums; }
.eintrag__name { margin-top: .2em; font: 400 clamp(1.7rem, 1.2rem + 1.6vw, 2.7rem)/1.1 var(--outfit); letter-spacing: -.02em; overflow-wrap: anywhere; }
.eintrag__meta { margin-top: .6em; font: 600 var(--fs-klein)/1.4 var(--outfit); letter-spacing: .14em; text-transform: uppercase; opacity: .72; }
.eintrag__zeile { margin-top: 1em; max-width: 44ch; line-height: 1.5; font-size: clamp(1rem, .95rem + .3vw, 1.15rem); }
.eintrag__link { display: inline-flex; align-items: center; min-height: 44px; margin-top: .4em; font-weight: 600; }
.eintrag__adresse { display: block; margin-top: -.3em; font-size: var(--fs-klein); letter-spacing: .02em; opacity: .62; overflow-wrap: anywhere; }
@media (max-width: 54em) { .eintrag, .eintrag:nth-child(even) { grid-template-columns: 1fr; } .eintrag:nth-child(even) .geraete { order: 0; } }
/* Desktop (Riccardo, 08.10.2026): zwei Gerätepaare nebeneinander, Text knapp darunter; bei drei wären die Geräte zu klein */
@media (min-width: 54.01em) {
  .programm__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(4rem, 10svh, 7rem) clamp(2.5rem, 5vw, 5.5rem); }
  .eintrag, .eintrag:nth-child(even) { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 1.4rem; }
  .eintrag:nth-child(even) .geraete { order: 0; }
  .eintrag .geraete { width: 100%; }
  .eintrag__zeile { max-width: 48ch; }
}

/* ---------- Kontakt (hell; das Daumenkino-Foto mit dem gedruckten Namen bleibt als einziger kleiner Gruß an den Film) ---------- */
.anfrage__kopfzeile { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2rem clamp(2rem, 5vw, 5rem); align-items: end; }
.anfrage__person { margin: 0; max-width: 36ch; font-size: clamp(1.05rem, 1rem + .35vw, 1.25rem); line-height: 1.55; padding-bottom: .15em; }
.anfrage__raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem clamp(2rem, 5vw, 5rem); margin-top: clamp(3rem, 7svh, 5rem); align-items: start; }
.anfrage__bild { position: sticky; top: calc(var(--kopf-hoehe) + 1rem); }
@media (max-width: 54em) { .anfrage__kopfzeile, .anfrage__raster { grid-template-columns: minmax(0, 1fr); } .anfrage__kopfzeile { align-items: start; } .anfrage__bild { position: static; } }

.daumenkino { position: relative; overflow: hidden; isolation: isolate; background: var(--kino); border-radius: 6px;
  box-shadow: 0 1px 0 rgba(47, 44, 40, .12), 0 30px 50px -30px rgba(47, 44, 40, .6); }
.daumenkino img { width: 100%; height: auto; }
.daumenkino picture { display: block; }
/* Die Titelkarte liegt wie gedruckt auf der rechten Seite des Daumenkinos: js/anfrage.js setzt Breite und Höhe des Textfelds auf die
   Seitengröße im Foto und legt es per matrix3d (Homographie aus den vier Ecken) perspektivisch auf die Seite. Multiply macht aus
   Graphit auf dem Papierfoto Tinte auf Papier. Ohne JS bleibt das Feld leer (aria-hidden, Titel leer). */
.daumenkino__seite { position: absolute; left: 0; top: 0; width: 40%; height: 30%; transform-origin: 0 0; transform-style: flat;
  display: grid; align-content: center; justify-items: center; text-align: center; color: var(--graphit); pointer-events: none;
  padding: calc(var(--seite-b, 240px) * .07) calc(var(--seite-b, 240px) * .06);
  mix-blend-mode: multiply; backface-visibility: hidden; }
.titel-live { display: block; width: 100%; font-size: clamp(.6rem, calc(var(--seite-b, 240px) * .125 * var(--titel-skal, 1)), 4rem); line-height: 1.05; hyphens: auto; overflow-wrap: anywhere; text-wrap: balance; transition: opacity .3s var(--ease-film); }
.titel-live:empty { opacity: 0; }
.titel-live__unter { display: block; margin-top: .9em; font: 400 clamp(.4rem, calc(var(--seite-b, 240px) * .046), 1.1rem)/1.3 var(--courier); letter-spacing: .14em; text-transform: uppercase; text-wrap: balance; opacity: .85; transition: opacity .3s var(--ease-film); }
.titel-live:empty + .titel-live__unter { opacity: 0; }
.schrift-salon { font-family: var(--bodoni); font-style: italic; font-weight: 400; font-optical-sizing: auto; }
.schrift-werkstatt { font-family: var(--shoulders); font-weight: 900; text-transform: uppercase; letter-spacing: .03em; }
.schrift-handwerk { font-family: var(--fraunces); font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 1; font-weight: 400; }
.schrift-gastro { font-family: var(--shrikhand); font-weight: 400; }
.schrift-anderes { font-family: var(--bodoni); font-style: normal; font-weight: 400; font-optical-sizing: auto; }
/* Erfolg: das Daumenkino blättert einmal durch (Schattenwisch, 4 Blätter) */
.daumenkino__wisch { position: absolute; inset: -20% -40%; pointer-events: none; opacity: 0;
  background: linear-gradient(104deg, transparent 0 44%, rgba(7, 8, 7, .55) 49%, rgba(236, 227, 210, .9) 50.2%, transparent 50.8% 100%); }
.daumenkino.blaettert .daumenkino__wisch { animation: wisch 130ms linear 4; }
@keyframes wisch { from { opacity: 1; transform: translateX(42%); } to { opacity: 1; transform: translateX(-42%); } }

/* Formular in Outfit: das Betriebsfeld groß und leicht, kleine gesperrte Labels, Linienfelder, Gewerk als schlichte Pillen, Knopf als Graphitpille */
.formular { display: grid; gap: clamp(1.6rem, 3.6svh, 2.6rem); }
.kopfzeile { margin: 0; }
.kopfzeile__feld { display: block; }
.kopfzeile input { display: block; width: 100%; min-height: 48px; border: 0; border-bottom: 1px solid var(--graphit); border-radius: 0; background: transparent; padding: .1em 0 .25em;
  font: 300 clamp(1.5rem, 1.1rem + 1.6vw, 2.6rem)/1.2 var(--outfit); letter-spacing: -.02em; }
.kopfzeile input::placeholder { color: var(--graphit); opacity: .5; }
.feld label, .feld legend { display: block; font: 600 var(--fs-klein)/1.4 var(--outfit); letter-spacing: .14em; text-transform: uppercase; }
.feld small { font-weight: 400; letter-spacing: .01em; text-transform: none; font-size: 1em; opacity: .75; margin-left: .5em; }
.feld input, .feld textarea { display: block; width: 100%; min-height: 44px; border: 0; border-bottom: 1px solid var(--linie-stark); border-radius: 0; background: transparent; padding: .5em 0; margin-top: .25em;
  font: 400 var(--fs-text)/1.5 var(--outfit); }
.feld textarea { resize: vertical; min-height: 6.5em; }
.feld input:focus-visible, .feld textarea:focus-visible, .kopfzeile input:focus-visible { outline: none; border-bottom-color: var(--graphit); box-shadow: 0 1px 0 var(--graphit); }
.feld [aria-invalid="true"], .kopfzeile [aria-invalid="true"] { border-bottom-color: var(--graphit); border-bottom-style: double; border-bottom-width: 3px; }
.fehler { display: none; margin-top: .5em; font: 400 var(--fs-klein)/1.45 var(--outfit); letter-spacing: .01em; }
.fehler.ist-da { display: block; }
.gewerke { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .8rem; }
.gewerke label { position: relative; display: block; }
.gewerke input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.gewerke span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.15em; border: 1px solid var(--linie-stark); border-radius: 999px; font: 400 var(--fs-text)/1 var(--outfit); white-space: nowrap;
  transition: background-color var(--dur-schnitt) linear, color var(--dur-schnitt) linear, border-color var(--dur-schnitt) linear; }
.gewerke input:checked + span { background: var(--graphit); color: var(--papier-hell); border-color: var(--graphit); }
.gewerke input:focus-visible + span { outline: 2px solid var(--graphit); outline-offset: 3px; }
@media (hover: hover) { .gewerke label:hover span { background: rgba(47, 44, 40, .08); } .gewerke label:hover input:checked + span { background: var(--graphit); } }
.honig { position: absolute; left: -200vw; top: 0; width: 1px; height: 1px; overflow: hidden; }
.hinweis { max-width: 46ch; line-height: 1.5; }
.knopf { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: .9em 2em; background: var(--graphit); color: var(--papier-hell);
  border: 1px solid var(--graphit); border-radius: 999px; font: 600 var(--fs-text)/1 var(--outfit); letter-spacing: .01em; justify-self: start; white-space: nowrap;
  transition: background-color var(--dur-schnitt) linear, border-color var(--dur-schnitt) linear; }
@media (hover: hover) { .knopf:hover { background: var(--kino); border-color: var(--kino); } }
.knopf:focus-visible { outline: 2px solid var(--graphit); outline-offset: 3px; }
.knopf[disabled] { opacity: .65; cursor: progress; }
@media (max-width: 40em) { .knopf { width: 100%; justify-self: stretch; } }
.status { line-height: 1.5; }
.status:empty { display: none; }
.direkt { margin-top: clamp(1.5rem, 4svh, 2.5rem); }
.direkt a { font-weight: 600; overflow-wrap: anywhere; display: inline-block; padding: .3em 0; }
.anfrage.ist-erfolg .formular, .anfrage.ist-erfolg .anfrage__hinweis { display: none; }
.anfrage__erfolg { display: none; max-width: 22ch; font: 300 clamp(1.5rem, 1.1rem + 1.6vw, 2.6rem)/1.2 var(--outfit); letter-spacing: -.02em; text-wrap: balance; }
.anfrage.ist-erfolg .anfrage__erfolg { display: block; }

/* ---------- Fußzeile (modern und knapp; „Nach oben“ spult die Seite sichtbar zurück, main.js) ---------- */
.abspann { position: relative; z-index: 2; background: var(--papier-hell); color: var(--graphit); color-scheme: light; font-family: var(--outfit);
  padding: 0 var(--rand) calc(clamp(1.6rem, 4svh, 2.6rem) + env(safe-area-inset-bottom, 0px)); }
.abspann__innen { max-width: 80rem; margin-inline: auto; padding-top: clamp(2.2rem, 5svh, 3.2rem); border-top: 1px solid var(--linie);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "marke knopf" "links copy"; gap: clamp(1.8rem, 4.5svh, 3rem) 2rem; align-items: center; }
.abspann__marke { grid-area: marke; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.6rem; }
.logo--abspann { --logo-h: clamp(2.4rem, 1.9rem + 1.4vw, 3.4rem); }
.abspann__zeile { margin: 0; font-size: clamp(1.05rem, 1rem + .35vw, 1.25rem); }
.abspann__links { grid-area: links; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1.2rem; }
.abspann__links a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-underline-offset: .22em; text-decoration-thickness: 1px; white-space: nowrap; }
.abspann__links > a { font-weight: 600; }
.abspann__recht { display: inline-flex; align-items: center; gap: .7rem; white-space: nowrap; }   /* Impressum · Datenschutz brechen nur gemeinsam um */
.abspann__recht span { opacity: .45; }
@media (hover: hover) { .abspann__links a:hover { text-decoration-thickness: 2px; } }
.zurueckspulen { grid-area: knopf; justify-self: end; display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: .75em 1.5em;
  border: 1px solid var(--graphit); border-radius: 999px; color: var(--graphit); font: 600 var(--fs-text)/1 var(--outfit); letter-spacing: .01em; white-space: nowrap;
  transition: background-color var(--dur-schnitt) linear, color var(--dur-schnitt) linear; }
@media (hover: hover) { .zurueckspulen:hover { background: var(--graphit); color: var(--papier-hell); } }
.zurueckspulen:focus-visible { outline: 2px solid var(--graphit); outline-offset: 3px; }
.abspann__copy { grid-area: copy; margin: 0; justify-self: end; font-size: var(--fs-klein); letter-spacing: .04em; opacity: .7; white-space: nowrap; }
@media (max-width: 40em) {
  .abspann__innen { grid-template-columns: minmax(0, 1fr); grid-template-areas: "marke" "links" "knopf" "copy"; gap: 1.4rem; }
  .zurueckspulen, .abspann__copy { justify-self: start; }
}

/* ---------- Rechtsseiten (Impressum, Datenschutz) ---------- */
html[data-seite="rechts"], html[data-seite="rechts"] body { background: var(--papier); color-scheme: light; }
.rechtsseite { min-height: 100svh; }
.rechtsseite h2 + ul { margin-top: .6em; }
.rechtsseite ul { padding-left: 1.2em; }
.rechtsseite li + li { margin-top: .3em; }
.rechtsseite address + p { margin-top: 1em; }
.rechtsseite .drehbuch { max-width: 72ch; margin: 0; padding-top: calc(var(--kopf-hoehe) + clamp(2rem, 8svh, 5rem)); }
.rechtsseite h1 { font: 700 clamp(1.8rem, 1.2rem + 2.6vw, 3.4rem)/1.12 var(--courier); }
.rechtsseite h2 { margin-top: clamp(2rem, 5svh, 3rem); font: 700 var(--fs-kopf)/1.5 var(--courier); letter-spacing: .14em; text-transform: uppercase; }
.rechtsseite h2 + p, .rechtsseite p + p, .rechtsseite h2 + address, .rechtsseite p + address, .rechtsseite ul { margin-top: 1em; }
.rechtsseite address { font-style: normal; }
.rechtsseite a { overflow-wrap: anywhere; }
.fuss { margin-top: clamp(3rem, 8svh, 5rem); padding-top: 1.2rem; border-top: 1px solid var(--graphit); display: flex; flex-wrap: wrap; gap: .5rem 2rem; font-size: var(--fs-klein); letter-spacing: .08em; }
.fuss a { display: inline-flex; align-items: center; min-height: 44px; }