/* ══ DIE STARTSEITE ═════════════════════════════════════════════════════════ Aus dem Vorschau-Entwurf `vorschau/startseite-buehne.html` uebernommen, Pascal-Freigabe 17.08.2026. ⛔ JEDE REGEL IST MIT `body.startseite` GEKAPSELT, und das ist keine Ordnung, sondern Notwendigkeit: Die Buehne benutzt `.wrap`, `.eyebrow`, `h1`, `h2`, `a`, `img` und weitere Selektoren, die in style.css schon belegt sind. Ungekapselt wuerde diese Datei die anderen 57 Seiten mitverbiegen. Wer hier eine Regel ergaenzt, setzt den Vorsatz mit. ⛔ LEISTE UND FUSSZEILE STEHEN NICHT HIER. Sie kommen aus style.css, damit es sie nur einmal gibt. Die Vorschau hatte beide nachgebaut, um allein lauffaehig zu sein. ═══════════════════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════════════════ DIE GUCKKASTENBÜHNE. Eigenständige Vorschau, kein Zugriff auf style.css. Ein Papiertheater besteht aus gemalten Kulissen, die HINTEREINANDER in Schlitzen stecken. Geht man daran vorbei, verschieben sie sich verschieden schnell. Genau daher kommt der Parallax-Effekt. Wir haben 20 gemalte Bilder im Öl-Stil der Videos. Diese Richtung setzt sie als Kulissen ein, statt sie wegzulassen. ══════════════════════════════════════════════════════════════════════════ */ :root { --navy: #0A1730; --navy-tief: #050B18; --gold: #C9A85F; --gold-hell: #E4CB92; --gold-tief: #7E6428; --papier: #F4ECDC; --creme: #FBF7EF; --tinte: #12192A; } /* ⛔ HIER STAND DER GRUNDSTIL-RESET DER VORSCHAU, UND ER MUSSTE WEG. Die Vorschau war eine eigenstaendige Seite und brauchte ihn. Gekapselt heisst er `body.startseite *` und hat damit HOEHERE Spezifitaet als das `*` in style.css. Er lief also NACH den Bauteil-Regeln und setzte Leiste, Knoepfe und Fusszeile wieder auf null Abstand zurueck. Sichtbar war das an der auf 34 Pixel geschrumpften Leiste und am gequetschten Menue-Knopf. style.css setzt denselben Reset in Zeile 40 bereits fuer die ganze Seite. */ @font-face { font-family: 'Hanken Grotesk'; src: url('/assets/HankenGrotesk.ttf') format('truetype'); font-weight: 100 900; font-style: normal; font-display: swap; } body.startseite { font-family: 'Hanken Grotesk', system-ui, sans-serif; font-size: clamp(17px, 1.05vw, 19px); line-height: 1.55; color: var(--creme); background: var(--navy-tief); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* ⛔ `padding-inline`, NICHT die Kurzschreibweise. Zum zweiten Mal derselbe Fehler an diesem Stylesheet: `.wrap` sitzt im Bestand auf Elementen, die ihren eigenen senkrechten Abstand mitbringen, naemlich `.nav-inner` und `.foot-inner`. Ein `padding: 0 X` setzt deren `padding-block` auf null. Sichtbar war es an der Leiste, die auf der Startseite 42 statt 78 Pixel hoch war und beim Wechsel von einer anderen Seite sichtbar nach oben sprang. */ body.startseite .wrap { max-width: 1180px; margin: 0 auto; padding-inline: clamp(18px, 4vw, 48px); } @media (max-width: 900px) { } /* Die Bühne beginnt hinter der Leiste, deshalb bekommt ihr Inhalt Luft nach oben. */ body.startseite .buehne .szene { padding-top: clamp(110px, 15vh, 170px); } /* ── DIE BÜHNE ──────────────────────────────────────────────────────────── Drei Kulissenebenen plus Rampenlicht. Die hinterste bewegt sich am langsamsten, die vorderste am schnellsten. */ /* ⛔ DIE BUEHNE IST ABSICHTLICH SO HOCH WIE DAS FENSTER, und das bleibt so. Pascal am 18.08.2026, nachdem ich sie faelschlich auf Artikelhoehe gekuerzt hatte: „Du kommst auf die Startseite und zack, so ein Riesenbild mit der Schrift. Und dass man dann runterscrollt, und das verschiebt sich dann nach oben. Das war schon sehr gut." ⚠️ MISSVERSTAENDNIS, DAS NICHT WIEDERKOMMEN SOLL: Seine Forderung nach gleicher Hoehe galt der LEISTE oben, nicht dem Kopf. Die Leiste ist auf jeder Seite 78 Pixel hoch, der Kopf der Startseite darf und soll sich von den uebrigen unterscheiden. Wer hier kuerzt, nimmt der Startseite ihren Auftritt. */ body.startseite .buehne { position: relative; min-height: 100svh; overflow: hidden; display: flex; align-items: center; background: radial-gradient(120% 90% at 50% 18%, #16243F 0%, var(--navy) 45%, var(--navy-tief) 100%); } /* ⛔ DER WEICHE AUSLAUF FEHLTE HIER, und das war sichtbar (Pascal 18.08.2026): „Der Weg hört auf einmal auf, da ist es braun und dann geht er runter wieder blau. Das Braune darf nicht sein." Die Kulisse endet mit der Tischkante des gemalten Motivs, ein brauner Streifen. Direkt darunter beginnt der naechste Abschnitt in Navy. Ohne Uebergang schneidet das zweimal hart um. ⚠️ DER AUSLAUF ENDET IN `--navy`, NICHT IN DER SEITENFARBE. Unter der Buehne kommt `.reihe` mit Navy, nicht der helle Bereich. Wer hier die Farbe der `.hero-bild`-Regel aus style.css kopiert, baut eine helle Kante ins Dunkle. ⚠️ Z-INDEX 2: ueber Kulissen, Rampe und Staub (die liegen bei 0 bis 2), aber unter der Szene mit dem Text (die liegt bei 3). */ body.startseite .buehne::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 34%; pointer-events: none; z-index: 2; background: linear-gradient(180deg, rgba(10, 23, 48, 0) 0%, rgba(10, 23, 48, .12) 34%, rgba(10, 23, 48, .42) 62%, rgba(10, 23, 48, .80) 84%, var(--navy) 100%); } body.startseite .kulisse { position: absolute; inset: -8% -4%; pointer-events: none; will-change: transform; } body.startseite .kulisse img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Hinterste Kulisse: weit weg, entsättigt, dunkel. Sie ist Atmosphäre. */ body.startseite .kulisse-fern img { filter: blur(7px) saturate(.55) brightness(.42); transform: scale(1.12); } /* Mittlere Kulisse: das Hauptmotiv, klar, aber ins Dunkel eingebettet. */ body.startseite .kulisse-mitte { inset: auto -2% -6% auto; width: min(62%, 720px); } body.startseite .kulisse-mitte img { border-radius: 3px; filter: brightness(.94) contrast(1.04); mask-image: linear-gradient(to left, #000 58%, transparent 100%), linear-gradient(to top, #000 68%, transparent 100%); mask-composite: intersect; -webkit-mask-image: linear-gradient(to left, #000 58%, transparent 100%), linear-gradient(to top, #000 68%, transparent 100%); -webkit-mask-composite: source-in; } /* Das Rampenlicht liegt VOR den Kulissen und wandert am schnellsten. */ body.startseite .rampe { position: absolute; inset: 0; pointer-events: none; will-change: transform; background: radial-gradient(48% 38% at 22% 62%, rgba(201,168,95,.24) 0%, transparent 70%); mix-blend-mode: screen; } /* Staubkörner im Lichtkegel, reine CSS-Punkte. */ body.startseite .staub { position: absolute; inset: 0; pointer-events: none; opacity: .5; will-change: transform; background-image: radial-gradient(1.5px 1.5px at 18% 34%, rgba(228,203,146,.7), transparent), radial-gradient(1.5px 1.5px at 31% 61%, rgba(228,203,146,.5), transparent), radial-gradient(2px 2px at 44% 24%, rgba(228,203,146,.45), transparent), radial-gradient(1.5px 1.5px at 57% 72%, rgba(228,203,146,.6), transparent), radial-gradient(1.5px 1.5px at 12% 78%, rgba(228,203,146,.4), transparent), radial-gradient(2px 2px at 68% 46%, rgba(228,203,146,.35), transparent); } /* ⚠️ `padding-block`, NICHT die Kurzschreibweise. `.szene` sitzt auf demselben Element wie `.wrap` und ueberschrieb mit `padding: X 0` dessen seitlichen Abstand auf null. Auf dem Handy klebte der Text dadurch am linken Rand. */ body.startseite .szene { position: relative; z-index: 3; padding-block: clamp(70px, 12vh, 130px); } body.startseite .eyebrow { font-size: 12px; letter-spacing: .22em; text-transform: uppercase; font-weight: 800; color: var(--gold-hell); margin-bottom: 18px; } body.startseite h1 { /* ⛔ DIE GROSSE SCHRIFT IST DER AUFTRITT DER STARTSEITE. Am 18.08.2026 hatte ich sie auf 50 Pixel gekuerzt, um den Kopf an die uebrigen Seiten anzugleichen. Das war ein Missverstaendnis und ist zurueckgenommen. */ font-size: clamp(2.6rem, 6.6vw, 5.2rem); line-height: .96; font-weight: 800; letter-spacing: -.035em; max-width: 16ch; margin-bottom: 20px; text-wrap: balance; } body.startseite h1 em { font-style: normal; color: var(--gold); } body.startseite .vorspann { font-size: clamp(1.05rem, 1.45vw, 1.28rem); max-width: 40ch; color: rgba(251,247,239,.82); } body.startseite .knoepfe { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(26px, 3.4vw, 38px); } body.startseite .knopf { display: inline-flex; align-items: center; gap: 10px; padding: 15px 26px; border-radius: 2px; text-decoration: none; font-weight: 700; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; } body.startseite .knopf-voll { background: var(--gold); color: var(--navy-tief); box-shadow: 0 0 0 rgba(201,168,95,0); } body.startseite .knopf-voll:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(201,168,95,.32); } body.startseite .knopf-leer { color: var(--creme); border: 1px solid rgba(251,247,239,.32); } body.startseite .knopf-leer:hover { background: rgba(251,247,239,.09); transform: translateY(-2px); } body.startseite .knopf:focus-visible { outline: 2px solid var(--gold-hell); outline-offset: 4px; } /* ── DIE KULISSENREIHE: die Werkzeuge als Bühnenbilder ──────────────────── Jede Kachel trägt ein gemaltes Bild. Beim Zeigen hebt sie sich an und ihr Bild fährt heran, so wie eine Kulisse nach vorn geschoben wird. */ body.startseite .reihe { background: var(--navy); padding: clamp(56px, 8vw, 110px) 0; position: relative; } /* ⛔ HIER STAND EIN GOLDENER HAARSTRICH AM OBEREN RAND DER KACHELREIHE. Er sass genau auf der Kante, die jetzt weich auslaeuft, und war der zweite sichtbare Schnitt in Pascals Screenshot vom 18.08.2026. Ein weicher Uebergang und eine Trennlinie an derselben Stelle widersprechen sich. */ body.startseite h2 { font-size: clamp(1.8rem, 3.6vw, 2.9rem); line-height: 1.04; font-weight: 800; letter-spacing: -.025em; max-width: 20ch; text-wrap: balance; } body.startseite .leitsatz { max-width: 52ch; color: rgba(251,247,239,.78); margin-top: 12px; } /* ⚠️ KEIN auto-fit HIER. Bei 1180 Pixeln ergab minmax(268px, 1fr) drei Kacheln oben und eine allein darunter, also eine Luecke von drei Vierteln der Reihe. Feste Stufen statt Automatik: vier, zwei, eins. So bleibt die Reihe immer voll. */ body.startseite .kacheln { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2vw, 26px); margin-top: clamp(30px, 4vw, 48px); } @media (max-width: 1000px) { body.startseite .kacheln { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 540px) { body.startseite .kacheln { grid-template-columns: 1fr; } } body.startseite .kachel { position: relative; overflow: hidden; border-radius: 3px; text-decoration: none; color: var(--creme); background: #101C33; display: block; aspect-ratio: 4 / 3; transition: transform .32s cubic-bezier(.16,1,.3,1), box-shadow .32s ease; } body.startseite .kachel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.16,1,.3,1), filter .32s ease; filter: brightness(.66) saturate(.9); } body.startseite .kachel-text { position: absolute; inset: auto 0 0 0; padding: 20px; background: linear-gradient(to top, rgba(5,11,24,.94) 12%, rgba(5,11,24,.55) 60%, transparent 100%); } body.startseite .kachel .frage { font-weight: 800; font-size: 1.14rem; line-height: 1.2; display: block; } body.startseite .kachel .dauer { font-size: 12.5px; letter-spacing: .08em; color: var(--gold-hell); font-weight: 700; } body.startseite .kachel:hover, body.startseite .kachel:focus-visible { transform: translateY(-6px); box-shadow: 0 18px 44px rgba(0,0,0,.5); } body.startseite .kachel:hover img, body.startseite .kachel:focus-visible img { transform: scale(1.07); filter: brightness(.8) saturate(1); } body.startseite .kachel:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } /* ── DER ZUSCHNITT: hier rechnet der Besucher ─────────────────────────────── */ body.startseite .pult { background: var(--papier); color: var(--tinte); padding: clamp(48px, 7vw, 96px) 0; } body.startseite .pult h2 { color: var(--tinte); } body.startseite .pult .leitsatz { color: rgba(18,25,42,.78); } body.startseite .rechenpult { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(22px, 3vw, 48px); margin-top: clamp(24px, 3vw, 38px); align-items: center; } @media (max-width: 820px) { body.startseite .rechenpult { grid-template-columns: 1fr; } } body.startseite .zeile { display: grid; gap: 5px; padding: 13px 0; border-bottom: 1px solid rgba(18,25,42,.16); } body.startseite .zeile label { font-weight: 600; font-size: 15.5px; } body.startseite .eintrag { display: inline-flex; align-items: baseline; gap: 6px; border-bottom: 2px solid var(--gold-tief); width: max-content; } body.startseite .eintrag input { width: 6ch; border: 0; background: transparent; color: inherit; font: inherit; font-weight: 800; font-size: 1.45rem; text-align: right; font-variant-numeric: tabular-nums; } body.startseite .eintrag input:focus { outline: 2px solid var(--gold-tief); outline-offset: 4px; } body.startseite .eintrag .einheit { font-weight: 700; opacity: .6; } body.startseite .ergebnis { background: var(--navy); color: var(--creme); padding: clamp(22px, 3vw, 34px); border-radius: 3px; } body.startseite .ergebnis .kopf { font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; font-weight: 800; color: var(--gold-hell); } body.startseite .ergebnis .wert { font-size: clamp(2.6rem, 6.4vw, 4.2rem); line-height: .92; font-weight: 800; letter-spacing: -.04em; color: var(--gold); margin: 8px 0 12px; } body.startseite .ergebnis .lesart { font-size: 15.5px; color: rgba(251,247,239,.86); } body.startseite .ergebnis .lesart b { color: var(--gold-hell); } body.startseite .beleg { margin-top: 16px; padding-top: 13px; border-top: 1px solid rgba(251,247,239,.2); font-size: 12.5px; color: rgba(251,247,239,.66); } body.startseite .beleg a { color: var(--gold-hell); } body.startseite .pult .fuss { margin-top: 26px; font-size: 13px; color: rgba(18,25,42,.6); } /* ── WER DAHINTERSTECKT ──────────────────────────────────────────────────── ⛔ HIER STEHT KEIN VERTRAUENSBLOCK IM ÜBLICHEN SINN, UND ZWAR MIT ABSICHT. Wir haben keine Kundenstimmen, keine Nutzerzahlen, keine Bewertungen, keine Presse und keine Auszeichnungen. Ein Kasten, der Platz für so etwas vorsieht, erzeugt den Druck, welche zu erfinden (PRODUCT.md, Evidence on Hand). Was wir haben, ist nachprüfbar: fünf öffentliche Prinzipien, vierzehn laufende Werkzeuge, einundzwanzig Artikel mit Quelle und Stand, ein Kanal mit Gesicht. Der Block zeigt genau das und behauptet nichts darüber hinaus. */ body.startseite .dahinter { background: var(--navy-tief); padding: clamp(56px, 8vw, 104px) 0; position: relative; } body.startseite .dahinter::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(201,168,95,.36), transparent); } body.startseite .dahinter-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(28px, 4vw, 64px); align-items: center; } @media (max-width: 900px) { body.startseite .dahinter-grid { grid-template-columns: 1fr; } } body.startseite .dahinter-bild { position: relative; } /* ⛔ DER GOLDRAND IST MARKE, DIE RUNDUNG WAR ES NICHT (Pascal 17.08.2026). Im Bestand stehen beide in derselben Regel: .serie-duo picture img { border-radius: 18px; border: 4px solid var(--gold) } Beim Neuschreiben dieses Abschnitts sind beide zusammen verschwunden, obwohl nur die Rundung weg sollte. Der Rand kommt zurueck, die Ecke bleibt bei 3px. ⚠️ Beim Ausrollen gilt das fuer JEDES freistehende gemalte Bild: Artikel- Aufmacher, Duo, Video-Standbilder. Kacheln und Karten tragen ihn nicht, sonst wird die Seite ein Gitter aus Goldrahmen. */ body.startseite .dahinter-bild img { width: 100%; height: auto; display: block; border-radius: 3px; border: 4px solid var(--gold); box-shadow: 0 14px 44px rgba(4, 10, 24, .35); } body.startseite .bildunterschrift { margin-top: 12px; font-size: 13.5px; line-height: 1.45; color: rgba(251, 247, 239, .58); } body.startseite .belege { display: grid; gap: 2px; margin-top: clamp(22px, 3vw, 32px); } body.startseite .beleg-zeile { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: baseline; padding: 14px 0; border-top: 1px solid rgba(201,168,95,.18); } body.startseite .beleg-zahl { font-size: 1.9rem; font-weight: 800; color: var(--gold); letter-spacing: -.03em; min-width: 2.4ch; font-variant-numeric: tabular-nums; } body.startseite .beleg-was { color: rgba(251,247,239,.8); font-size: 15.5px; line-height: 1.4; } body.startseite .beleg-was a { color: var(--gold-hell); } body.startseite .dahinter .knoepfe { margin-top: clamp(24px, 3vw, 34px); } /* ── DIE ARTIKEL ──────────────────────────────────────────────────────────── */ body.startseite .lesen { background: var(--creme); color: var(--tinte); padding: clamp(56px, 8vw, 104px) 0; } body.startseite .lesen h2 { color: var(--tinte); } body.startseite .lesen .leitsatz { color: rgba(18,25,42,.74); } body.startseite .artikel-reihe { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 30px); margin-top: clamp(30px, 4vw, 48px); } @media (max-width: 900px) { body.startseite .artikel-reihe { grid-template-columns: 1fr; } } body.startseite .artikel-karte { display: flex; flex-direction: column; text-decoration: none; color: inherit; background: #fff; border: 1px solid rgba(18,25,42,.1); border-radius: 3px; overflow: hidden; transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease; } /* ⚠️ `height: auto` ist hier PFLICHT, nicht Kosmetik. Das Bild traegt height="614" als Attribut (gegen Layout-Sprünge), und dieses Attribut wirkt wie eine CSS-Deklaration. Ohne `height: auto` gewinnt es gegen aspect-ratio, und die Karte zeigt ein 339 auf 614 Pixel hohes Hochformat statt des 16-zu-9-Ausschnitts. Genau so stand es im ersten Bau. */ body.startseite .artikel-karte img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block; } /* Der Zoom braucht einen Rahmen, der schneidet. Ohne ihn waechst das Bild ueber die Karte hinaus, statt sich darin zu vergroessern. */ body.startseite .artikel-karte .bildrahmen { overflow: hidden; display: block; } body.startseite .artikel-karte .bildrahmen img { transition: transform .5s cubic-bezier(.16,1,.3,1), filter .32s ease; } body.startseite .artikel-karte:hover .bildrahmen img, body.startseite .artikel-karte:focus-visible .bildrahmen img { transform: scale(1.06); } body.startseite .artikel-karte .inhalt { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 9px; flex: 1; } body.startseite .artikel-karte .datum { font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; font-weight: 800; color: var(--gold-tief); } /* ---------- Neu-Marker auf der obersten Artikel-Karte ---------- */ /* ⛔ ZWECK IST NEUGIER, NICHT ORDNUNG (Pascal 09.09.2026): „damit die Leute das auch sehen, so dass die auch neugierig werden". Deshalb Gold auf Navy wie der Marker in der Rechner-Navigation, nicht dezent. ⚠️ Die Auszeichnung sitzt IN der Datumszeile, die bereits `uppercase` und `letter-spacing` traegt. Beides wird hier zurueckgenommen, sonst erbt das Wort die Sperrung der Datumszeile und laeuft optisch aus dem Kaestchen heraus. ⚠️ Der Marker gilt nur, solange der Artikel wirklich neu ist. Bei einem Artikel pro Woche ist die oberste Karte hoechstens sieben Tage alt. `tools/artikel_check.py` schlaegt Alarm, wenn sie aelter als 21 Tage wird. */ body.startseite .artikel-karte .karte-neu { display: inline-block; margin-left: 8px; padding: 2px 8px 3px; background: var(--gold); color: var(--navy); font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; border-radius: 2px; vertical-align: middle; } body.startseite .artikel-karte h3 { font-size: 1.18rem; line-height: 1.24; font-weight: 800; letter-spacing: -.015em; } body.startseite .artikel-karte p { font-size: 15px; color: rgba(18,25,42,.72); line-height: 1.5; } body.startseite .artikel-karte .weiter { margin-top: auto; padding-top: 10px; font-weight: 700; font-size: 14.5px; color: var(--gold-tief); } body.startseite .artikel-karte:hover, body.startseite .artikel-karte:focus-visible { transform: translateY(-5px); box-shadow: 0 16px 40px rgba(18,25,42,.14); } body.startseite .artikel-karte:focus-visible { outline: 2px solid var(--gold-tief); outline-offset: 3px; } /* ── DER NEWSLETTER ──────────────────────────────────────────────────────── ⚠️ BEWUSST KLEIN UND GANZ UNTEN (Pascal-Entscheid 14.08.2026). Erfolg auf dieser Seite ist, dass jemand ein Werkzeug benutzt, nicht dass er sich anmeldet. Und das Anmelde-Paket wird gerade neu aufgebaut, weil vier PDFs aus den ersten Kanalwochen kein Grund zum Eintragen sind. Solange das so ist, wird hier nichts versprochen, was das Paket nicht hält. */ body.startseite .post { background: var(--papier); color: var(--tinte); padding: clamp(48px, 6vw, 84px) 0; } body.startseite .post-innen { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(22px, 3vw, 48px); align-items: center; } @media (max-width: 820px) { body.startseite .post-innen { grid-template-columns: 1fr; } } body.startseite .post h2 { color: var(--tinte); font-size: clamp(1.6rem, 2.8vw, 2.2rem); } body.startseite .post p { color: rgba(18,25,42,.76); margin-top: 10px; max-width: 46ch; } body.startseite .post-form { display: flex; flex-wrap: wrap; gap: 10px; } body.startseite .post-form input { flex: 1 1 220px; padding: 15px 16px; border: 1px solid rgba(18,25,42,.24); border-radius: 2px; font: inherit; background: #fff; color: var(--tinte); } body.startseite .post-form input:focus { outline: 2px solid var(--gold-tief); outline-offset: 2px; } /* Der Eintragen-Knopf war so hoch wie das Eingabefeld und halb so breit. Neben einem vollbreiten Feld liest sich das wie ein Systemknopf aus den Neunzigern statt wie unsere Handlung. Er bekommt jetzt mehr Fläche und dieselbe Schriftgröße wie der Text daneben. */ body.startseite .post-form .knopf-voll { color: var(--navy-tief); padding: 17px 34px; font-size: 1.02rem; letter-spacing: .01em; } body.startseite .post .klein { font-size: 12.5px; color: rgba(18,25,42,.6); margin-top: 12px; max-width: 46ch; } /* Auf dem Handy steht der Knopf unter dem vollbreiten Feld. Halb so breit daneben sieht aus, als waere er abgeschnitten. */ body.startseite @media (max-width: 520px) { .post-form .knopf { width: 100%; justify-content: center; } } body.startseite .post .klein a { color: var(--gold-tief); } /* ── BEWEGUNG ───────────────────────────────────────────────────────────── Die Kulissen laufen über eine Scroll-Zeitachse. Wo der Browser das nicht kann, steht das Bild still und es fehlt nichts Inhaltliches. */ /* Die Ebenen werden von Javascript geschoben, siehe unten. Hier steht nur, dass sie ueberhaupt verschoben werden duerfen. Bei reduzierter Bewegung passiert nichts. */ body.startseite @media (prefers-reduced-motion: reduce) { .kulisse-fern, .kulisse-mitte, .rampe, .staub { transform: none !important; } } @media (prefers-reduced-motion: reduce) { body.startseite .kachel, body.startseite .kachel img, body.startseite .knopf { transition: none; } } @media (max-width: 760px) { body.startseite .kulisse-mitte { width: 92%; inset: auto -6% -2% auto; opacity: .5; } body.startseite .buehne { min-height: 92svh; } } /* ══ DER NEWSLETTER-KNOPF ═══════════════════════════════════════════════════ Pascal am 17.08.2026: „Das sieht aus wie Windows 98 oder 95." ⛔ ZWEI URSACHEN, BEIDE HIER BEHOBEN: 1. `