/* launchwr.com, Vorschau Runde 4 (16.10.2026): Aufbau, Maße und Farben 1:1 nach twain.ai (Benjamin: „mach das mal 1:1
   wie auf der seite“), vermessen bei 1440 px. Twains Kaufschriften Produkt und Graphik sind durch die freien Newsreader
   und Instrument Sans ersetzt; Twains Blau am Absendeknopf durch Schwarz (Benjamin: „dieses blau is scheiße“). */

/* Schriften unter SIL OFL 1.1; die Lizenztexte reisen mit (veroeffentlichen.py nimmt sie über diese Verweise mit):
   ../schrift/newsreader-OFL.txt ../schrift/instrument-sans-OFL.txt */

@font-face { font-family: "Newsreader"; src: url("../schrift/newsreader.woff2?v=6e4f2958c3a7") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Newsreader"; src: url("../schrift/newsreader-latin-ext.woff2?v=45683de03de3") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Newsreader"; src: url("../schrift/newsreader-kursiv.woff2?v=5dfcd10d24af") format("woff2"); font-weight: 200 800; font-style: italic; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Newsreader"; src: url("../schrift/newsreader-kursiv-latin-ext.woff2?v=bb24f6648f75") format("woff2"); font-weight: 200 800; font-style: italic; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Instrument Sans"; src: url("../schrift/instrument-sans.woff2?v=2ee17598a98d") format("woff2"); font-weight: 400 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Instrument Sans"; src: url("../schrift/instrument-sans-latin-ext.woff2?v=c4fcfea41f2c") format("woff2"); font-weight: 400 700; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF; }

/* Farben wie gemessen auf twain.ai. */
:root {
  --weiss: #FFFFFF;
  --grund: #FCFCFC;
  --tafel: #E8ECEE;
  --text: #16181D;
  --titel: #061A28;
  --weich: #383E42;
  --leise: #5C646A;
  --blass: #5F676D;   /* 4,5:1 auf der Manifest-Fläche, auch bevor ein Wort aufhellt */
  --linie: #E1E5E8;
  --dunkel: #2A2F33;
  --gruen: #D9F2DF; --gruen-text: #2D582C; --gruen-tief: #1D371B;
  --lila: #E4E4FA; --lila-text: #143B71; --lila-tief: #0B2947;
  --grau: #E7EAED; --grau-text: #2A3C4C; --grau-tief: #1D2E39;
  --rot-tief: #5F0109;
  --fokus: #16181D;

  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Consolas, "Courier New", monospace;
  --rand: clamp(16px, 4.45vw, 64px);
  --kopf: 88px;
  --kurve: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--weiss); -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
body { margin: 0; color: var(--text); background: var(--weiss); font: 400 14px/20px var(--sans); overflow-x: clip; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
img, video { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--fokus); outline-offset: 3px; }
.sprung { position: fixed; left: 16px; top: -80px; z-index: 100; padding: 10px 14px; background: var(--dunkel); color: #fff; border-radius: 8px; }
.sprung:focus { top: 16px; }
.klein { font-size: 12px; color: var(--leise); }
.unterzeile { font: 400 clamp(18px, 1.6vw + 4px, 26px)/1.32 var(--sans); color: var(--text); max-width: 30ch; }
.titel { font: 400 clamp(40px, 3.2vw + 14px, 60px)/1.06 var(--serif); letter-spacing: -0.025em; color: var(--text); }
.titel-klein { font: 400 clamp(30px, 2vw + 10px, 40px)/1.08 var(--serif); letter-spacing: -0.02em; }
.textlink { font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.chip { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: 6px; background: rgb(22 24 29 / 0.06); font: 500 12px/1 var(--sans); }
.knopf-dunkel { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 8px; background: var(--dunkel); color: #F2F3F3; font: 600 14px/1 var(--sans); text-decoration: none; box-shadow: 0 1px 2px rgb(0 0 0 / 0.2), inset 0 1px 0 rgb(255 255 255 / 0.08); transition: background 200ms; }
.knopf-dunkel:hover { background: #16181D; }
.knopf-discord { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 20px 0 16px; border-radius: 10px; background: var(--dunkel); color: #fff; font: 600 15px/1 var(--sans); text-decoration: none; box-shadow: 0 6px 20px -6px rgb(22 24 29 / 0.45), inset 0 1px 0 rgb(255 255 255 / 0.1); transition: transform 300ms var(--kurve), box-shadow 300ms var(--kurve), background 200ms; }
.knopf-discord svg { width: 20px; height: 20px; flex: none; }
.knopf-discord:hover { background: #16181D; transform: translateY(-1px); box-shadow: 0 10px 28px -8px rgb(22 24 29 / 0.55), inset 0 1px 0 rgb(255 255 255 / 0.1); }
.knopf-hell { height: 36px; padding: 0 14px; border-radius: 8px; background: #fff; border: 1px solid var(--linie); font-weight: 600; }

/* Kopf: Zeichen und Name links, Links daneben, rechts Textlink und dunkler Knopf. */
.kopf { position: fixed; inset: 0 0 auto; z-index: 30; height: var(--kopf); display: flex; align-items: center; gap: 48px; padding-inline: var(--rand); background: rgb(255 255 255 / 0.8); backdrop-filter: blur(12px); transition: box-shadow 300ms; }
.kopf.gescrollt { box-shadow: 0 1px 0 var(--linie); }
.marke { display: flex; align-items: center; gap: 12px; font: 400 20px/1 var(--sans); letter-spacing: -0.01em; text-decoration: none; color: var(--text); }
.marke-zeichen { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 6px; background: var(--dunkel); color: #fff; font: 500 15px/1 var(--serif); }
.kopf-links { display: flex; gap: 36px; font-weight: 500; color: var(--weich); }
.kopf-links a, .kopf-text { text-decoration: none; color: var(--weich); font-weight: 500; transition: color 200ms; }
.kopf-links a:hover, .kopf-text:hover { color: var(--text); }
.kopf-rechts { margin-left: auto; display: flex; align-items: center; gap: 24px; }

/* Held: zweizeiliger Satz links, Reiter-Feld darunter, Glasstapel rechts, Leiste unten. */
.held { position: relative; overflow-x: clip; min-height: 100svh; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto; align-items: center; padding: var(--kopf) var(--rand) 0; background: linear-gradient(#FFFFFF, #FCFCFC); }
.held-text { display: grid; gap: 52px; }
.held-titel { display: flex; flex-direction: column; font: 400 clamp(48px, 4.6vw + 18px, 84px)/0.88 var(--serif); letter-spacing: -0.01em; color: var(--titel); }
.held-titel .zeile { display: block; white-space: nowrap; }
.wechsel { display: inline-block; overflow: clip; padding-block: 0.14em; margin-block: -0.14em; vertical-align: top; }
.wechsel-wort { display: inline-block; }
.eingabe { width: min(464px, 100%); padding: 0 8px 8px; border-radius: 24px; background: #EEF0F4; box-shadow: inset 0 0 0 1px rgb(22 24 29 / 0.04); }
.eingabe-reiter { display: flex; gap: 4px; }
.eingabe-reiter button { display: flex; align-items: center; gap: 8px; height: 52px; padding: 0 16px; border-radius: 16px 16px 0 0; font-weight: 500; color: var(--weich); }
.eingabe-reiter button[aria-selected="true"] { color: var(--text); }
.eingabe-feld { display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 4px 0 18px; border-radius: 16px; background: #fff; box-shadow: 0 1px 2px rgb(22 24 29 / 0.06); color: var(--leise); text-decoration: none; font-size: 15px; }
[role="tabpanel"][hidden] { display: none; }
.eingabe-zeichen { color: var(--text); font-weight: 600; }
.eingabe-los { display: grid; place-items: center; width: 48px; height: 48px; margin-left: auto; border-radius: 12px; background: var(--dunkel); color: #fff; font-size: 16px; transition: transform 300ms var(--kurve); }
.eingabe-feld:hover .eingabe-los { transform: translateX(3px); }

.glas { position: relative; cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none; justify-self: center; width: min(520px, 90%); aspect-ratio: 1; }
.glas-stapel { position: absolute; inset: 0; }
.glas-karte { position: absolute; left: 12%; right: 12%; top: 16%; margin: 0; padding: 10px 10px 14px; border-radius: 24px; background: #fff; box-shadow: 0 40px 80px -30px rgb(30 40 55 / 0.35), 0 0 0 1px rgb(22 24 29 / 0.05); transform-origin: 50% 90%; will-change: transform; }
.glas-karte img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; background: var(--tafel); }
.glas-karte figcaption { padding: 12px 6px 0; font: 400 18px/1.2 var(--serif); color: var(--text); }
.leiste { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 24px; padding: 48px 0 40px; overflow: hidden; }
.leiste li { font: 400 24px/1 var(--serif); color: #8A9096; white-space: nowrap; letter-spacing: -0.01em; }

/* Karten: drei Pastellkarten, vorn Kennzahl, beim Scrollen drehen sie auf die Rückseite. */
.karten { padding: 120px var(--rand) 140px; background: var(--grund); perspective: 1400px; }
.karten-reihe { display: grid; grid-template-columns: repeat(3, minmax(0, 336px)); justify-content: center; gap: 16px; }
.karte { position: relative; height: 420px; transform-style: preserve-3d; }
.karte-vorn, .karte-hinten { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 32px; border-radius: 32px; backface-visibility: hidden; }
.karte-vorn { justify-content: space-between; }
.karte-hinten { transform: rotateY(180deg); justify-content: space-between; font-size: 16px; line-height: 24px; }
.karte-vorn .chip { align-self: flex-start; background: rgb(255 255 255 / 0.55); }
.karte-zahl { margin-top: auto; font: 400 38px/1.05 var(--serif); letter-spacing: -0.02em; }
.karte-unter { margin-top: 8px; }
.karte-fuss { font-weight: 500; font-size: 14px; }
.karte-gruen > * { background: var(--gruen); color: var(--gruen-text); }
.karte-gruen .karte-zahl, .karte-gruen .karte-hinten p:first-child { color: var(--gruen-tief); }
.karte-lila > * { background: var(--lila); color: var(--lila-text); }
.karte-lila .karte-zahl, .karte-lila .karte-hinten p:first-child { color: var(--lila-tief); }
.karte-grau > * { background: var(--grau); color: var(--grau-text); }
.karte-grau .karte-zahl, .karte-grau .karte-hinten p:first-child { color: var(--grau-tief); }

/* Manifest: Titel links, rechts hellen sich die Absätze Wort für Wort mit dem Scroll auf. */
.manifest { background: var(--tafel); }
.manifest-kleber { min-height: 100svh; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; padding: calc(var(--kopf) + 24px) var(--rand) 80px; }
.manifest-titel { display: flex; flex-direction: column; font: 400 clamp(40px, 3.2vw + 14px, 60px)/1.06 var(--serif); letter-spacing: -0.025em; color: var(--text); }
.manifest-text { display: grid; gap: 24px; font: 400 clamp(20px, 1.6vw + 8px, 32px)/1.4 var(--sans); color: var(--text); max-width: 30em; }
.manifest-text .w { color: var(--blass); }

/* Tafel (Twain „Deep research“): gerundete graue Großfläche, Reiter wechseln mit dem Scroll. */
.tafel { padding: 16px; background: var(--grund); }
.tafel-strecke { min-height: 300svh; border-radius: 48px; background: var(--tafel); }
.tafel-kleber { position: sticky; top: 0; height: 100svh; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; padding: var(--kopf) calc(var(--rand) - 16px) 48px; }
.tafel-liste { position: relative; align-self: center; min-height: 340px; }
.tafel-liste li { position: absolute; inset: 0 0 auto; display: grid; gap: 28px; opacity: 0; transform: translateY(24px); transition: opacity 900ms var(--kurve), transform 1200ms var(--kurve); pointer-events: none; }
.tafel-liste li.aktiv { opacity: 1; transform: none; pointer-events: auto; }
.tafel-liste .etikett { display: none; }
.tafel-liste h3 { font: 400 clamp(40px, 3.2vw + 14px, 60px)/1.06 var(--serif); letter-spacing: -0.02em; }
.tafel-liste li:nth-child(1) h3 { color: var(--text); }
.tafel-liste li:nth-child(2) h3 { color: var(--rot-tief); }
.tafel-liste li:nth-child(3) h3 { color: var(--titel); }
.tafel-liste li:nth-child(4) h3 { color: var(--gruen-tief); }
.tafel-liste p { font: 400 clamp(18px, 1.6vw + 4px, 26px)/1.32 var(--sans); max-width: 26ch; }
.tafel-bild { position: relative; aspect-ratio: 1116 / 720; border-radius: 24px; overflow: hidden; background: #fff; padding: 10px; box-shadow: 0 40px 80px -30px rgb(30 40 55 / 0.3); }
.tafel-bild video { position: absolute; inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); object-fit: cover; border-radius: 16px; opacity: 0; transform: scale(1.03); transition: opacity 1000ms var(--kurve), transform 1400ms var(--kurve); }
.tafel-bild video.sichtbar { opacity: 1; transform: none; }
.tafel-stand { position: absolute; left: calc(var(--rand) - 16px); bottom: 40px; font-variant-numeric: tabular-nums; color: var(--leise); }

/* Arbeiten (Twain „Automation“): Titel und Unterzeile, Karten fahren waagerecht mit dem Scroll. */
.werke { background: var(--grund); overflow: hidden; }
.werke-kleber { display: flex; flex-direction: column; gap: 48px; padding: 120px var(--rand) 80px; }
.werke-kopf { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: end; }
.werkliste { display: flex; gap: 16px; width: max-content; will-change: transform; }
.werkliste li { width: clamp(260px, 24vw, 360px); flex: none; }
.werkliste button { display: flex; flex-direction: column; gap: 12px; width: 100%; text-align: left; }
.werk-bild { order: 1; position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 24px; background: var(--tafel); }
.werk-bild img, .werk-bild video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--kurve); }
.werkliste button:hover .werk-bild img, .werkliste button:hover .werk-bild video { transform: scale(1.04); }
.werkliste button > .etikett:first-child { order: 2; font-size: 12px; color: var(--leise); }
.werkliste button > span:nth-child(2) { order: 3; font: 400 22px/1.15 var(--serif); letter-spacing: -0.01em; }
.werk-art { order: 4; font-size: 12px; color: var(--leise); }
.werke-stand { display: flex; align-items: center; gap: 12px; font-variant-numeric: tabular-nums; color: var(--leise); }
.werke-balken { flex: 1; height: 2px; border-radius: 2px; background: var(--linie); }
.werke-balken span { display: block; height: 100%; background: var(--text); transform-origin: left; transform: scaleX(0); }

/* Leistungen (Twain „Integrations“): Akkordeon mit großen Titeln links, Terminal rechts. */
.leistungen-abschnitt { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; padding: 120px calc(var(--rand) + 24px) 140px; background: var(--weiss); }
.akkordeon-eintrag + .akkordeon-eintrag { margin-top: 40px; }
.akkordeon-titel { font: 400 clamp(40px, 3.2vw + 14px, 60px)/1.06 var(--serif); letter-spacing: -0.02em; color: var(--leise); text-align: left; transition: color 300ms; }
.akkordeon-titel[aria-expanded="true"], .akkordeon-titel:hover { color: var(--text); }
.akkordeon-inhalt { display: grid; gap: 24px; padding-top: 16px; }
.akkordeon-inhalt[hidden] { display: none; }
.leistungen .leistung > h3 { display: none; }
.leistung { display: grid; gap: 20px; }
.leistung-text { display: grid; gap: 12px; color: var(--weich); font-size: 15px; line-height: 22px; }
.leistung-text .merkmale { display: grid; gap: 6px; color: var(--text); font-size: 14px; }
.leistung-text .merkmale li::before { content: "✓ "; color: var(--gruen-text); }
.leistung-text a, .preis > a { font-weight: 600; text-underline-offset: 4px; }
.preis { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 24px; border-radius: 24px; background: var(--grund); box-shadow: inset 0 0 0 1px var(--linie); }
.preis .etikett { font-size: 12px; color: var(--leise); }
.preis-umschalter { display: inline-flex; padding: 3px; gap: 2px; border-radius: 10px; background: #EEF0F4; }
.preis-umschalter button { height: 30px; padding: 0 12px; border-radius: 8px; font-weight: 500; color: var(--leise); }
.preis-umschalter button[aria-pressed="true"] { background: #fff; color: var(--text); box-shadow: 0 1px 2px rgb(22 24 29 / 0.08); }
.betrag { display: flex; align-items: baseline; gap: 6px; font: 400 44px/1 var(--serif); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.betrag small { font: 400 14px/1 var(--sans); color: var(--leise); }
.stufen li { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; padding-block: 10px; border-top: 1px solid var(--linie); }
.stufe-name { font-weight: 600; color: var(--text); }
.stufe-preis { color: var(--text); font-variant-numeric: tabular-nums; }
.stufe-inhalt, .stufe-netto { font-size: 13px; color: var(--leise); }
.stufe-netto { text-align: right; }
.terminal { position: sticky; top: calc(var(--kopf) + 24px); justify-self: center; width: min(560px, 100%); border-radius: 18px; background: #fff; box-shadow: 0 50px 100px -40px rgb(30 40 55 / 0.35), 0 0 0 1px var(--linie); overflow: hidden; }
.terminal-kopf { display: flex; align-items: center; gap: 6px; padding: 14px 18px; border-bottom: 1px solid var(--linie); font: 500 11px/1 var(--sans); color: var(--leise); }
.terminal-kopf span { width: 10px; height: 10px; border-radius: 50%; background: var(--linie); }
.terminal-kopf span:last-of-type { margin-right: 10px; }
.terminal-zeilen { display: grid; gap: 10px; padding: 22px 22px 28px; font: 400 13.5px/1.5 var(--mono); color: var(--text); min-height: 300px; }
.terminal-zeilen .dim { color: var(--leise); }
.terminal-zeilen .akz { color: var(--text); font-weight: 700; }
.terminal-zeilen .ok { color: #4FA157; }
.terminal-zeilen .fett { font-weight: 700; color: #4FA157; }
.js .terminal-zeilen li { opacity: 0; transform: translateY(6px); transition: opacity 300ms, transform 300ms var(--kurve); }
.js .terminal-zeilen li.da { opacity: 1; transform: none; }

/* Abschluss (Twain „Onboarding“ + FAQ): Karte mit Schritten links, Fragen rechts. */
.abschluss { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; padding: 120px var(--rand) 140px; background: var(--grund); }
.abschluss-karte { display: grid; gap: 24px; justify-items: start; padding: 40px; border-radius: 32px; background: var(--tafel); }
.schritte { display: grid; gap: 14px; font-size: 16px; line-height: 24px; }
.schritte li { display: grid; grid-template-columns: 32px 1fr; }
.schritte span { color: var(--leise); font-variant-numeric: tabular-nums; }
.fragen h3 { margin-bottom: 16px; font: 400 clamp(30px, 2vw + 10px, 40px)/1.08 var(--serif); letter-spacing: -0.02em; }
.fragen details { border-bottom: 1px solid var(--linie); interpolate-size: allow-keywords; }
.fragen summary { display: flex; justify-content: space-between; gap: 16px; padding: 18px 0; font-size: 16px; font-weight: 500; cursor: pointer; list-style: none; }
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after { content: "+"; font-size: 20px; line-height: 1; color: var(--leise); transition: transform 300ms var(--kurve); }
.fragen details[open] summary::after { transform: rotate(45deg); }
.fragen details::details-content { block-size: 0; overflow: clip; transition: block-size 400ms var(--kurve), content-visibility 400ms allow-discrete; }
.fragen details[open]::details-content { block-size: auto; }
.fragen details p { padding-bottom: 20px; font-size: 14px; line-height: 22px; color: var(--weich); max-width: 62ch; }

/* Fuß. */
.fuss { padding: 80px var(--rand) 40px; background: var(--weiss); border-top: 1px solid var(--linie); }
.fuss-spalten { display: grid; grid-template-columns: repeat(3, minmax(0, 220px)); gap: 48px; }
.fuss-spalten > div { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.fuss-titel { font-weight: 600; margin-bottom: 4px; }
.fuss-spalten a { color: var(--leise); text-decoration: none; }
.fuss-spalten a:hover { color: var(--text); }
.sprachwahl { display: flex; gap: 10px; }
.kopf .sprachwahl { gap: 12px; font-weight: 500; }
.kopf .sprachwahl a { color: var(--leise); text-decoration: none; }
.kopf .sprachwahl a[aria-current] { color: var(--text); }
.sprachwahl a[aria-current] { color: var(--text); font-weight: 600; }
.fuss-zeile { margin-top: 64px; color: var(--leise); font-size: 12px; }

/* Großansicht. */
.grossansicht { width: min(1100px, 100vw - 32px); padding: 0; border: 0; border-radius: 24px; background: #fff; }
.grossansicht::backdrop { background: rgb(22 24 29 / 0.6); backdrop-filter: blur(4px); }
.gross-buehne video, .gross-buehne img { width: 100%; max-height: 70svh; object-fit: contain; background: var(--tafel); }
.gross-info { display: grid; gap: 6px; padding: 20px 24px 24px; }
.gross-info h3 { font: 400 28px/1.1 var(--serif); }
.gross-info p:last-child { color: var(--leise); }
.grossansicht .knopf-hell { position: absolute; top: 12px; right: 12px; }

.zeiger { position: fixed; left: 0; top: 0; z-index: 40; pointer-events: none; padding: 8px 12px; margin: 14px 0 0 14px; border-radius: 8px; background: var(--dunkel); color: #fff; font-weight: 500; opacity: 0; transition: opacity 200ms; }
.zeiger.an { opacity: 1; }

.js:not(.bereit) .held-titel, .js:not(.bereit) .eingabe, .js:not(.bereit) .glas { visibility: hidden; }

@media (max-width: 1023px) {
  .kopf-links, .kopf .nur-breit { display: none; }
  .held, .manifest-kleber, .tafel-kleber, .werke-kopf, .leistungen-abschnitt, .abschluss { grid-template-columns: 1fr; }
  .held { padding-top: calc(var(--kopf) + 40px); gap: 40px; }
  .held-titel .zeile { white-space: normal; }
  .glas { width: min(420px, 100%); }
  .leiste { flex-wrap: wrap; justify-content: flex-start; gap: 16px 28px; }
  .karten-reihe { grid-template-columns: minmax(0, 420px); }
  .tafel-strecke { min-height: 0; border-radius: 32px; }
  .tafel-kleber { position: static; height: auto; padding: 48px 20px; }
  .tafel-liste { min-height: 0; display: grid; gap: 40px; }
  .tafel-liste li { position: static; opacity: 1; transform: none; }
  .tafel-liste video { width: 100%; aspect-ratio: 1116 / 720; object-fit: cover; border-radius: 16px; }
  .tafel-bild, .tafel-stand { display: none; }
  .werkliste { width: auto; margin-inline: calc(-1 * var(--rand)); padding-inline: var(--rand); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .werkliste li { width: 72vw; scroll-snap-align: start; }
  .werke-stand { display: none; }
  .terminal { position: static; }
  .fuss-spalten { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .kopf { gap: 16px; }
  .knopf-discord { height: 42px; padding: 0 14px 0 12px; font-size: 14px; }
  .kopf-text { display: none; }
  .karte { height: 360px; }
  .held-titel { font-size: 42px; }
  .eingabe-reiter button { height: 44px; padding: 0 10px; font-size: 13px; white-space: nowrap; }
  .eingabe-reiter .chip { display: none; }
  .eingabe-feld { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 1ms !important; }
  .js:not(.bereit) .held-titel, .js:not(.bereit) .eingabe, .js:not(.bereit) .glas { visibility: visible; }
  .js .terminal-zeilen li { opacity: 1; transform: none; }
  .manifest-text .w { color: var(--text) !important; }
}