/* General Sans wird über die Fontshare-API geladen; die @font-face-Regel kommt von dort. Siehe in index.html und verantwortlich.html. */ :root { --ink: #14181d; --ink-hoch: #1c2127; --paper: #fafafa; --teal: #539fa1; --yellow: #f3b816; --red: #e75a3c; --paper-dim: rgba(250, 250, 250, 0.66); --paper-schwach: rgba(250, 250, 250, 0.7); --linie-dunkel: rgba(250, 250, 250, 0.16); --linie-hell: rgba(20, 24, 29, 0.18); --ink-70: #565b61; --teal-text: #2f6f71; --rot-text: #a63a20; --gelb-text: #5c4706; --rand: clamp(1.25rem, 7vw, 8rem); --weit: 70rem; --satz: 46rem; --fs-mikro: 0.75rem; --fs-klein: 0.9375rem; --fs-body: clamp(1rem, 0.975rem + 0.12vw, 1.0625rem); --fs-lead: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); --fs-titel: clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem); --fs-setzung: clamp(1.375rem, 0.95rem + 1.7vw, 2.375rem); --fs-kopf: clamp(1.625rem, 1.2rem + 1.9vw, 3rem); --fs-zahl: clamp(2rem, 1.4rem + 2.8vw, 4rem); --fs-ruf: clamp(2.25rem, 1.3rem + 4.6vw, 5.75rem); --luft: clamp(5.5rem, 11vw, 11rem); --luft-klein: clamp(2.75rem, 4.5vw, 5rem); --leiste-h: 3.75rem; /* Startwert; das Skript misst die echte Höhe */ } @media (max-width: 40rem) { :root { --rand: 1.25rem; } } *, *::before, *::after { box-sizing: border-box; } /* Kein scroll-behavior: smooth auf html. Chrome legt diese Kurve nicht nur auf Sprungziele, sondern auch auf Rad und Trackpad: jede kleine Bewegung startet eine neue Animation auf ein wanderndes Ziel, und die Kurven addieren sich — der Scroll faengt zaeh an und wird dann hastig. Die Seite scrollt jetzt so, wie der Browser scrollt. Das Gleiten zu einem Sprungziel macht dafuer der Klick selbst (siehe Skript). */ html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--ink); color: var(--paper); font-family: "General Sans", system-ui, sans-serif; font-weight: 400; font-size: var(--fs-body); line-height: 1.65; -webkit-font-smoothing: antialiased; } img, svg { max-width: 100%; display: block; } img { height: auto; } h1, h2, h3 { margin: 0; font-weight: 600; line-height: 1.08; letter-spacing: -0.025em; } p { margin: 0; } /* figure traegt sonst die 40px Seitenrand des Browsers — die Buehne stuende damit schmaler als die Kette darunter. */ figure { margin: 0; } a { color: inherit; } ol, ul, dl, dd { margin: 0; padding: 0; } li { list-style: none; } .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--red); color: var(--ink); padding: 0.85rem 1.25rem; font-weight: 600; } .skip:focus { left: 0; } :where(a, button):focus-visible { outline: 2px solid var(--red); outline-offset: 3px; } .pos { scroll-margin-top: var(--leiste-h); } /* Die Spalte. Sektionen sind randlos, jeder Inhaltsblock trägt denselben Innenrand, damit alles auf einer Kante sitzt. */ .deck__blatt, .deck__unten-index, .platte, .kontakt__innen, .fuss__innen, .leiste, .hinweis, .kat__kopf { padding-inline: max(var(--rand), (100% - var(--weit)) / 2); } .mikro { font-size: var(--fs-mikro); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--paper-schwach); } /* ══ Registerleiste ══════════════════════════════════ */ .leiste { position: sticky; top: 0; z-index: 60; display: flex; align-items: center; gap: clamp(0.75rem, 2vw, 2rem); padding-block: 0.7rem; background: var(--ink); border-bottom: 1px solid var(--linie-dunkel); } .leiste__plate { flex: none; display: grid; place-items: center; width: 3.5rem; height: 3.5rem; color: var(--ink); transition: background 160ms ease, color 160ms ease; padding: 0.3rem; } .leiste__plate svg { width: 78%; height: auto; } .leiste__plate:hover { background: var(--red); } /* Der Stand nimmt den freien Platz und gibt ihn auch wieder her: flex-basis 0 heisst, ein langer Titel kann die Leiste weder umbrechen noch das Verzeichnis zusammenschieben — er kuerzt sich selbst. Sonst wandert die Leistenhoehe beim Scrollen mit der Titellaenge, und alles daran haengende springt. */ .leiste__stand { flex: 1 1 0; display: flex; align-items: baseline; gap: 0.55rem; min-width: 0; } .leiste__nr { font-size: var(--fs-klein); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--red); } .leiste__titel { font-size: var(--fs-mikro); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .spur { flex: none; display: flex; gap: 2px; } .spur a { width: 1.75rem; height: 1.5rem; display: grid; place-items: center; font-size: 0.6875rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--paper-schwach); text-decoration: none; border-top: 2px solid var(--linie-dunkel); transition: color 160ms ease, border-color 160ms ease; } .spur a:hover { color: var(--paper); border-top-color: var(--paper-dim); } .spur a.ist { color: var(--ink); background: var(--red); border-top-color: var(--red); } .leiste__cta { flex: none; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.4rem 1rem; font-size: var(--fs-mikro); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; border: 1px solid var(--paper-schwach); transition: background 160ms ease, color 160ms ease, border-color 160ms ease; } .leiste__cta:hover { background: var(--red); border-color: var(--red); color: var(--ink); } .leiste__cta-icon { display: none; width: 1rem; height: 1rem; } /* Unter 60rem bricht das Verzeichnis als voller Streifen um. Die echte Leistenhöhe misst das Skript, daran hängen Sprungziele und Klebeköpfe. */ @media (max-width: 60rem) { .leiste { flex-wrap: wrap; padding-bottom: 0; } .spur { /* Als eigener Streifen darf das Verzeichnis wieder nachgeben: die negativen Raender machen es breiter als die Zeile. */ flex: 0 1 auto; order: 9; width: 100%; margin-inline: calc(-1 * max(var(--rand), (100% - var(--weit)) / 2)); padding-inline: max(var(--rand), (100% - var(--weit)) / 2); gap: 1px; margin-top: 0.7rem; border-top: 1px solid var(--linie-dunkel); } .spur a { flex: 1; width: auto; height: 1.6rem; border-top: 0; } /* Eng wird es in der oberen Zeile: dort steht der Knopf nur als Zeichen, damit der Titel den Platz bekommt. */ .leiste__cta { padding: 0.5rem; } .leiste__cta-icon { display: block; } .leiste__cta-wort { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } } /* ══ Chevron-Marsch: die durchgehende Wegmarke ═══════ */ .marsch { display: flex; gap: clamp(1rem, 3vw, 3rem); color: var(--red); overflow: hidden; } .marsch svg { flex: none; width: clamp(4rem, 10vw, 8rem); height: auto; transform: translate3d(var(--schub, 0%), 0, 0); } .marsch--trenner { padding-block: clamp(1.5rem, 3vw, 2.25rem); opacity: 0.3; border-top: 1px solid var(--linie-dunkel); border-bottom: 1px solid var(--linie-dunkel); } .marsch--rueck { color: var(--ink); opacity: 0.4; margin-top: var(--luft-klein); } /* ══ POS 00 · Deckblatt ══════════════════════════════ */ .deck { padding-bottom: var(--luft); } .deck__blatt { min-height: calc(100svh - var(--leiste-h)); display: flex; flex-direction: column; justify-content: center; gap: clamp(2rem, 5vw, 3.5rem); padding-block: clamp(2rem, 5vw, 4rem); } /* Die gezeichnete Wortmarke, nicht gesetzter Text. */ .deck__marke { width: clamp(10rem, 30vw, 28rem); } .deck__fuss { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); row-gap: clamp(6rem, 8vw, 14rem); column-gap: clamp(1.25rem, 2.5vw, 1.75rem); } .deck__these { align-self: end; font-size: var(--fs-titel); font-weight: 500; line-height: 1.45; max-width: 52ch; } .deck__ort { font-size: var(--fs-klein); line-height: 1.65; color: var(--paper-schwach); padding-top: 1.1rem; } .deck__unten { grid-column: -1 / 1; display: grid; gap: clamp(1.25rem, 2.5vw, 1.75rem); align-items: start; padding-top: var(--luft-klein); } @media (min-width: 62rem) { .deck__unten { gap: clamp(1.25rem, 2.5vw, 1.75rem); } } .deck__unten-index { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: start; padding-top: var(--luft-klein); } @media (min-width: 62rem) { .deck__unten-index { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); gap: clamp(3rem, 6vw, 5rem); } } .titelblock { display: grid; gap: 0; /* Definite Breite, sonst laeuft der Block voll und das Zentrieren bliebe wirkungslos. */ width: min(100%, 40rem); justify-self: center; align-content: start; } /* Kein justify-self hier: die Zeilen sollen die Breite vom Block erben, nicht vom eigenen Inhalt — nur so werden die Linien gleich lang. */ .titelblock > div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 0.25rem 10rem; padding: 0.7rem 0; border-top: 1px solid var(--linie-dunkel); } .titelblock > div:last-child { border-bottom: 1px solid var(--linie-dunkel); } /* Der Spaltenabstand von 10rem plus 7.5rem Beschriftung ergibt eine Mindestbreite von rund 440px — auf dem Telefon schob das die ganze Seite quer. Schmaler Schirm, schmalere Spalte, kleiner Abstand. */ @media (max-width: 46rem) { .titelblock > div { grid-template-columns: 5.75rem minmax(0, 1fr); gap: 0.25rem 1.25rem; } } .titelblock dt { font-size: var(--fs-mikro); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--paper-schwach); padding-top: 0.15rem; } .titelblock dd { font-size: var(--fs-klein); line-height: 1.45; } .deck__index { display: grid; gap: 0.9rem; } .index { display: grid; gap: 0; } .index a { display: grid; grid-template-columns: 3rem minmax(0, 1fr); align-items: baseline; gap: 0.1rem 1rem; padding: 0.7rem 0; border-top: 1px solid var(--linie-dunkel); text-decoration: none; transition: color 160ms ease; } /* Beim Hover rückt nur der Zeileninhalt ein, nicht die Zeile selbst: die Trennlinie bleibt auf der Spaltenkante, und die Bewegung läuft über transform statt über padding — kein Layout pro Frame. */ .index a > * { transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1); } .index a:hover > * { transform: translateX(0.5rem); } @media (prefers-reduced-motion: reduce) { .index a > * { transition: none; } .index a:hover > * { transform: none; } } .index li:last-child a { border-bottom: 1px solid var(--linie-dunkel); } .index a:hover { color: var(--red); } .index b { font-size: var(--fs-klein); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--red); } .index span { font-size: var(--fs-titel); font-weight: 600; letter-spacing: -0.02em; } .index i { grid-column: 2; font-style: normal; font-size: var(--fs-klein); color: var(--paper-schwach); } /* ══ Positionsköpfe ══════════════════════════════════ */ .kopf { font-size: var(--fs-kopf); display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.4em; } .kopf__nr { font-variant-numeric: tabular-nums; color: var(--red); letter-spacing: 0; } .kontur { -webkit-text-fill-color: transparent; -webkit-text-stroke: 0.03em currentColor; paint-order: stroke fill; } @supports not (-webkit-text-stroke: 1px black) { .kontur { -webkit-text-fill-color: currentColor; opacity: 0.45; } } .spec { margin-top: 0.9rem; font-size: var(--fs-mikro); font-weight: 300; letter-spacing: 0.14em; text-transform: uppercase; color: var(--red); } .lead { margin-top: 1.4rem; font-size: var(--fs-lead); line-height: 1.55; max-width: 48ch; color: var(--paper-dim); } .fliess { display: grid; gap: 1.4rem; max-width: 58ch; color: var(--paper-dim); } .fliess q { quotes: "»" "«"; color: var(--paper); font-style: normal; } .platte { padding-block: var(--luft); } /* ══ Kategorien: Kopf klebt, Inhalt zieht darüber ════ */ .kat { position: relative; } .kat__kopf { position: sticky; top: var(--leiste-h); z-index: 1; overflow: hidden; min-height: min(34svh, 21rem); display: flex; flex-direction: column; justify-content: center; padding-block: clamp(2.25rem, 4.5vw, 3.5rem); color: var(--ink); } /* Die gekappte Riesenziffer: dasselbe Gerät wie die angeschnittenen Konturlettern auf den gedruckten Außenflächen. */ .kat__kopf::after { content: attr(data-nr); position: absolute; right: -0.06em; bottom: -0.05em; font-size: clamp(7rem, 24vw, 20rem); font-weight: 600; line-height: 0.7; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; -webkit-text-fill-color: transparent; -webkit-text-stroke: 0.011em var(--ink); opacity: 0.8; pointer-events: none; } .kat__kopf > * { position: relative; z-index: 1; } .kat__lauf { position: relative; z-index: 2; background: var(--ink); } .kat--idee { --kat: var(--red); } .kat--werkstatt { --kat: var(--teal); } .kat--events { --kat: var(--yellow); } .kat--projekte { --kat: var(--red); } /* Nur eine Position trägt eine Farbfläche. */ .kat--werkstatt .kat__kopf { background: var(--kat); } .kat--werkstatt .kopf__nr { color: var(--ink); opacity: 0.75; } /* Die übrigen stehen auf dem Registergrund: die Kategoriefarbe trägt dort die Schrift, nicht den Hintergrund. */ .kat__kopf--offen { background: none; color: var(--paper); border-top: 2px solid var(--kat); } .kat__kopf--offen .kopf__nr { color: var(--kat); } .kat__kopf--offen .kontur { color: var(--kat); } .kat__kopf--offen .setzung { color: var(--kat); } .kat__kopf--offen .spec { color: var(--paper-schwach); } .kat__kopf--offen::after { -webkit-text-stroke-color: var(--kat); opacity: 0.8; } .setzung { margin-top: clamp(1.1rem, 2.5vw, 1.75rem); font-size: var(--fs-setzung); font-weight: 600; line-height: 1.14; letter-spacing: -0.025em; max-width: 24ch; text-wrap: balance; } /* ══ Inhalt der Positionen ═══════════════════════════ */ /* Der Lauf: das Rendering der Gebäudeseite bleibt stehen, der Text zieht daran vorbei. Erst wenn er durch ist, kommt die nächste Position. */ .lauf { display: grid; gap: var(--luft-klein); } @media (min-width: 62rem) { .lauf { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 4.5rem); align-items: start; } .lauf > .seite { position: sticky; top: calc(var(--leiste-h) + clamp(1.5rem, 4vw, 3rem)); margin-bottom: 0; max-width: none; } } .lauf__text { display: grid; gap: var(--luft-klein); align-content: start; } .lauf__text > * { margin-top: 0; } /* der Grid-Abstand zählt, nicht die Eigenabstände */ /* ── Das wechselnde Belegbild ──────────────────────── Neben den Punkten klebt ein Bild, das mit ihnen umschlägt: ein Blatt je Punkt. Ohne JS stehen die Blätter als Bildreihe untereinander — dieselbe Bauweise wie die Bühne der Idee, nur an die Spalte gebunden. */ .wechsel__rahmen { display: grid; gap: var(--luft-klein); } .wechsel__bild img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; } .wechsel__bild figcaption { margin-top: 0.85rem; font-size: var(--fs-klein); font-weight: 400; letter-spacing: 0.01em; line-height: 1.55; color: var(--paper-schwach); min-height: 3.2rem; } .wechsel__bild figcaption b { color: var(--kat, var(--red)); margin-right: 0.4rem; } /* Mit JS: gestapelt. Der Rahmen traegt die Hoehe, die Blaetter liegen deckungsgleich darin und loesen einander ab. */ .js-wechsel .wechsel__rahmen { display: block; position: relative; aspect-ratio: 16 / 9; } .js-wechsel .wechsel__bild { position: absolute; inset: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; opacity: 0; visibility: hidden; transition: opacity 520ms cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 520ms; } .js-wechsel .wechsel__bild.ist { opacity: 1; visibility: visible; transition: opacity 520ms cubic-bezier(0.16, 1, 0.3, 1), visibility 0s; } .js-wechsel .wechsel__bild img { height: 100%; aspect-ratio: auto; } /* Die Unterschrift haengt unter dem Rahmen, nicht darin, sonst deckte sie das Bild ab. Deshalb bekommt der Rahmen unten ihren Platz reserviert. Beide Werte haengen an derselben Groesse: sonst laeuft die Unterschrift aus dem reservierten Feld heraus, und durch den Ueberhang scrollt der Text der Liste sichtbar hindurch. Drei Zeilen plus Abstand. */ .js-wechsel .wechsel { --unterschrift: 5.2rem; padding-bottom: var(--unterschrift); } .js-wechsel .wechsel__bild figcaption { min-height: calc(var(--unterschrift) - 0.85rem); } /* Wo keine Unterschrift steht, wird auch kein Platz dafuer freigehalten. Betrifft das modulare Mehrwerk und die Eventbilder: dort zeigen die Bilder beispielhaft, was passiert, und tragen keine eigene Zeile. */ .js-wechsel .wechsel:not(:has(figcaption)) { --unterschrift: 0rem; } .js-wechsel .wechsel__bild figcaption { position: absolute; top: 100%; left: 0; right: 0; } /* Auf schmalen Schirmen steht das Bild ueber der Liste statt daneben. Damit der Wechsel ueberhaupt zu sehen ist, klebt es dort auch, sonst waere es aus dem Bild, sobald man den zweiten Punkt liest. Der Lauf war hier ein Grid, und ein klebendes Element ist im Grid auf seine eigene Zeile beschraenkt: das Bild loeste sich, sobald die Liste begann. Als Block reicht sein Klebebereich ueber den ganzen Lauf. */ @media (max-width: 61.999rem) { .lauf { display: block; } .lauf > * + * { margin-top: var(--luft-klein); } /* Buendig unter der Leiste samt Spur, kein Spalt dazwischen. Die Luft ueber dem Bild liegt als Innenabstand im klebenden Block selbst und traegt damit dessen Grund — sonst scrollte der Text durch den Spalt. */ .js-wechsel .lauf > .wechsel { position: sticky; top: var(--leiste-h); z-index: 1; background: var(--ink); padding-top: clamp(0.75rem, 2vw, 1.25rem); padding-bottom: calc(var(--unterschrift) + clamp(0.75rem, 2vw, 1.25rem)); } } /* Der aktive Punkt traegt die Kategoriefarbe, die ruhenden treten zurueck — dieselbe Markierungsregel wie in der Kette. */ .js-wechsel [data-wechsel-liste] .teile__nr { color: var(--paper-schwach); transition: color 420ms cubic-bezier(0.16, 1, 0.3, 1); } .js-wechsel [data-wechsel-liste] li.ist .teile__nr { color: var(--kat, var(--red)); } .js-wechsel [data-wechsel-liste] li { transition: border-color 420ms cubic-bezier(0.16, 1, 0.3, 1); } .js-wechsel [data-wechsel-liste] li.ist { border-top-color: var(--kat, var(--red)); } @media (prefers-reduced-motion: reduce) { .js-wechsel .wechsel__bild, .js-wechsel [data-wechsel-liste] .teile__nr, .js-wechsel [data-wechsel-liste] li { transition: none; } } /* Belegbild: ein Rendering der jeweiligen Gebäudeseite, in der Spalte, nicht über die volle Breite. */ .seite { margin: 0 0 var(--luft-klein); max-width: var(--satz); } .seite img { width: 100%; } .seite--breit { max-width: none; margin-top: var(--luft-klein); } .seite figcaption, .paar figcaption, .risse figcaption { margin-top: 0.8rem; font-size: var(--fs-klein); font-weight: 400; letter-spacing: 0.01em; line-height: 1.6; color: var(--paper-schwach); } .seite figcaption b, .paar figcaption b, .risse figcaption b { font-weight: 400; font-variant-numeric: tabular-nums; color: var(--red); margin-right: 0.4rem; } /* Statusvermerk in einer Bildunterschrift: muss lesbar sein. */ .seite figcaption strong { display: block; margin-top: 0.5rem; font-size: var(--fs-klein); font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--paper); max-width: 56ch; } .gegen { margin-top: var(--luft-klein); } .gegen > div { display: grid; gap: 0.4rem 3.5rem; padding: 1.5rem 0 1.7rem; border-bottom: 1px solid var(--linie-dunkel); } .gegen > div:first-child { border-top: 1px solid var(--linie-dunkel); } @media (min-width: 52rem) { .gegen > div { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); align-items: baseline; } } .gegen dt { font-size: var(--fs-titel); font-weight: 600; letter-spacing: -0.015em; line-height: 1.3; } .gegen dd { font-size: var(--fs-klein); line-height: 1.6; color: var(--paper-dim); max-width: 46ch; } /* ══ Position 01 · Bühne und Kette ═══════════════════ Die einzige Sektion, die nicht dem Lauf folgt: statt eines klebenden Bildes neben Text eine breite Bühne, die vier Zustände desselben Ortes durchschaltet, darunter die Kette, die sie schaltet. Das ist der Einstieg — er darf sich vom Register unterscheiden. */ /* Der Vorspann laeuft ueber die ganze Spalte. Damit das Mass nicht auf 110 Zeichen aufgeht, teilt er sich ab 62rem in zwei Saetze; der Schlusssatz liegt darunter und nimmt beide. */ .idee__fliess { max-width: none; } @media (min-width: 62rem) { .idee__fliess { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2.5rem, 5vw, 4.5rem); align-items: start; } .idee__fliess .schluss { grid-column: 1 / -1; } } .idee__fliess .schluss { margin-top: clamp(0.5rem, 1.5vw, 1.25rem); max-width: 100%; color: var(--paper); } /* Buehne und Kette sollen zusammen auf einen Bildschirm gehen. Deshalb traegt die Buehne eine Hoehe in svh statt eines festen Seitenformats: der Ausschnitt gibt nach, die Kette darunter bleibt sichtbar. */ .buehne { margin-top: clamp(2rem, 4vw, 3rem); } /* Die Szene haelt Buehne und Kette fest, waehrend der Scrollweg darunter die vier Zustaende durchschaltet. Ein Zustand kostet 66svh Weg — genug, dass der Wechsel wie ein Einrasten wirkt und nicht wie ein Ruckeln. Ohne JS oder auf niedrigen Fenstern ist .szene ein gewoehnlicher Kasten. */ /* Kein scroll-snap-type. Die Eigenschaft muss auf dem Scrollcontainer stehen, also auf html — und sobald sie dort steht, laesst Chrome jede Radbewegung animiert auf ihre Zielposition laufen, auf der ganzen Seite. Das las sich wie ein Ease auf dem Scroll, und die Reichweite von proximity laesst sich nicht einstellen. Das Einrasten macht deshalb das Skript: nur in der Szene, und nur wenn man ohnehin schon dicht an einem Zustand stehenbleibt. */ .js-szene .szene { position: relative; --zustaende: 4; height: calc((100svh - var(--leiste-h)) + (var(--zustaende) - 1) * 66svh); } .js-szene .szene__halt { position: sticky; top: var(--leiste-h); height: calc(100svh - var(--leiste-h)); display: flex; flex-direction: column; justify-content: center; padding-block: clamp(0.75rem, 2.5vw, 2rem); } /* Im Halt zaehlt jeder Millimeter. Statt der Buehne eine Hoehe zu geben und zu hoffen, dass die Kette darunter noch passt, bekommt die Kette ihre Hoehe und die Buehne den Rest: so haelt die Szene auch auf niedrigen Fenstern, ohne unten abzuschneiden. */ .js-szene .szene__halt .buehne { margin-top: 0; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } .js-idee.js-szene .buehne__rahmen { flex: 1 1 auto; min-height: 9rem; height: auto; } /* Auf schmalen Schirmen ist unter der Bühne kein Platz für vier Glieder nebeneinander — und untereinander wäre es eine Liste, die mit dem Bild nichts mehr zu tun hat. Also liegen sie gestapelt und lösen einander ab, genau wie die Bilder darüber. */ @media (max-width: 61.999rem) { .js-szene .szene__halt .kette { grid-template-columns: minmax(0, 1fr); gap: 0; } .js-szene .szene__halt .kette__glied { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity 420ms cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 420ms; } .js-szene .szene__halt .kette__glied.ist { opacity: 1; visibility: visible; transition: opacity 420ms cubic-bezier(0.16, 1, 0.3, 1), visibility 0s; } } @media (prefers-reduced-motion: reduce) { .js-szene .szene__halt .kette__glied { transition: none; } } .js-szene .szene__halt .kette { flex: none; margin-top: clamp(1.25rem, 2.4vw, 1.9rem); gap: clamp(1.25rem, 2.4vw, 1.9rem) clamp(1.5rem, 3vw, 2.5rem); } /* Ohne JS: die vier Zustände als gewöhnliche Bildreihe. */ .buehne__rahmen { display: grid; gap: var(--luft-klein); } .buehne__bild img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; } .buehne__bild figcaption { margin-top: 0.85rem; font-size: var(--fs-klein); font-weight: 400; letter-spacing: 0.01em; line-height: 1.55; color: var(--paper-schwach); min-height: 3.2rem; } .buehne__bild figcaption b { font-weight: 400; font-variant-numeric: tabular-nums; color: var(--kat); margin-right: 0.4rem; } /* Mit JS: gestapelt, das erste Blatt trägt die Höhe. */ .js-idee .buehne__rahmen { display: block; position: relative; height: clamp(15rem, 48svh, 32rem); } .js-idee .buehne__bild { display: grid; grid-template-rows: minmax(0, 1fr) auto; } .js-idee .buehne__bild img { height: 100%; aspect-ratio: auto; } .js-idee .buehne__bild { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 520ms cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 520ms; } .js-idee .buehne__bild.ist { opacity: 1; visibility: visible; transition: opacity 520ms cubic-bezier(0.16, 1, 0.3, 1), visibility 0s; } /* Das eintreffende Bild kommt eine Spur zu gross herein und setzt sich. Kein Effekt um seiner selbst willen: es macht den Wechsel lesbar. */ .js-idee .buehne__bild img { transform: scale(1.035); transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1); } .js-idee .buehne__bild.ist img { transform: scale(1); } /* ── Die Pfeile auf dem Bild ─────────────────────── */ /* Ohne JS schalten sie nichts, also stehen sie auch nicht da. */ .buehne__pfeil { display: none; } /* Die Fusshoehe der Bildunterschrift: der Rahmen traegt Bild und Zeile, die Pfeile sollen aber auf der Bildmitte sitzen, nicht auf der Mitte von beidem. */ .js-idee .buehne__rahmen { --bu-fuss: 3.65rem; } .js-idee .buehne__pfeil { position: absolute; top: calc(50% - var(--bu-fuss) / 2); z-index: 2; display: grid; place-items: center; width: 2.9rem; height: 2.9rem; transform: translateY(-50%); border: 1px solid rgba(250, 250, 250, 0.28); background: rgba(10, 10, 10, 0.55); backdrop-filter: blur(6px); color: var(--paper); cursor: pointer; opacity: 0.62; transition: opacity 200ms ease, background-color 200ms ease, border-color 200ms ease, color 200ms ease; } .js-idee .buehne__pfeil--zurueck { left: clamp(0.6rem, 1.6vw, 1.1rem); } .js-idee .buehne__pfeil--vor { right: clamp(0.6rem, 1.6vw, 1.1rem); } .js-idee .buehne__pfeil svg { width: 0.85rem; height: 0.85rem; } .js-idee .buehne__pfeil--zurueck svg { transform: scaleX(-1); } .js-idee .buehne__rahmen:hover .buehne__pfeil { opacity: 1; } .js-idee .buehne__pfeil:hover, .js-idee .buehne__pfeil:focus-visible { opacity: 1; background: var(--kat); border-color: var(--kat); color: var(--paper); } .js-idee .buehne__rahmen .buehne__pfeil:disabled { opacity: 0.16; cursor: default; background: rgba(10, 10, 10, 0.55); border-color: rgba(250, 250, 250, 0.28); color: var(--paper); } /* ── Die Kette ───────────────────────────────────── */ .kette { list-style: none; margin-top: clamp(1.5rem, 3vw, 2.25rem); display: grid; gap: clamp(1.75rem, 4vw, 2.5rem) clamp(1.5rem, 3vw, 2.5rem); } @media (min-width: 34rem) { .kette { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 62rem) { .kette { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* Linie auf dem Glied, nicht auf der Kette — sonst beginnt sie an der Polsterkante statt an der Textkante. */ .kette__glied { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: start; align-items: baseline; gap: 0.3rem 0.45rem; padding-top: 0.7rem; border-top: 1px solid var(--linie-dunkel); } /* Der Strich, der das aktive Glied markiert: 2px in der Kategoriefarbe, von links aufgezogen. Die Markierungsregel, in Bewegung. */ .kette__glied::before { content: ""; position: absolute; top: -1px; left: 0; width: 100%; height: 2px; background: var(--kat); transform: scaleX(0); transform-origin: left; transition: transform 520ms cubic-bezier(0.16, 1, 0.3, 1); } .js-idee .kette__glied.ist::before { transform: scaleX(1); } .kette__nr { grid-column: 1; font-size: calc(var(--fs-klein) * 1.2); font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.25; letter-spacing: -0.03em; color: var(--kat); transition: color 420ms cubic-bezier(0.16, 1, 0.3, 1); } /* Mit JS trägt die Farbe den Zustand: das aktive Glied rot, die ruhenden in gedämpftem Paper. Beide bleiben lesbar. */ .js-idee .kette__nr { color: var(--paper-schwach); } .js-idee .kette__glied.ist .kette__nr { color: var(--kat); } .kette__glied h3 { grid-column: 2; font-size: var(--fs-klein); font-weight: 600; letter-spacing: -0.01em; line-height: 1.45; } .kette__satz { grid-column: 1 / -1; font-size: var(--fs-mikro); line-height: 1.55; letter-spacing: 0; text-transform: none; color: var(--paper-dim); max-width: 34ch; } /* Der Zeiger verrät, dass das Glied die Bühne schaltet. */ .js-idee .kette__glied { cursor: pointer; transition: border-color 200ms ease; } /* Der Hover sagt nur: hier ist etwas anklickbar. Geschaltet wird erst beim Klick — sonst risse jeder Zeiger, der beim Lesen über die Kette streift, die Bühne mit. Deshalb auch kein Rot: die Kategoriefarbe gehört dem aktiven Glied, der Hover bleibt in Paper darunter. */ .js-idee .kette__glied:hover { border-top-color: var(--paper-schwach); } .js-idee .kette__glied:hover h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; text-decoration-color: rgba(250, 250, 250, 0.45); } .js-idee .kette__glied:hover .kette__nr { color: var(--paper); } /* Das aktive Glied behält seine Farbe, auch unter dem Zeiger. */ .js-idee .kette__glied.ist:hover .kette__nr { color: var(--kat); } @media (prefers-reduced-motion: reduce) { .js-idee .buehne__bild, .js-idee .buehne__bild img, .js-idee .buehne__pfeil, .js-idee .kette__glied, .kette__glied::before, .kette__nr { transition: none; } } .teile { display: grid; gap: 0; } @media (min-width: 56rem) { .teile { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(2rem, 4vw, 3.5rem); } } @media (min-width: 56rem) { .teile--zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Im Lauf steht die Liste einspaltig, damit sie am Bild vorbeiziehen kann. */ .teile--liste { grid-template-columns: minmax(0, 1fr); } @media (min-width: 56rem) { .teile--liste { grid-template-columns: minmax(0, 1fr); } } .teile--liste li > p:last-child { max-width: 48ch; } .teile li { padding: 1.5rem 0 1.75rem; border-top: 1px solid var(--linie-dunkel); } .teile__nr { font-size: var(--fs-mikro); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: 0.14em; color: var(--red); margin-bottom: 0.9rem; } .teile h3 { font-size: var(--fs-titel); margin-bottom: 0.6rem; } .teile li > p:last-child { font-size: var(--fs-klein); line-height: 1.6; color: var(--paper-dim); max-width: 36ch; } /* Keyline statt Passepartout. */ .paar { margin-top: var(--luft-klein); display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); } @media (min-width: 52rem) { .paar { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .paar figure { margin: 0; } .paar__bild--beschnitt { aspect-ratio: 16 / 9; overflow: hidden; } .paar__bild--beschnitt img { width: 100%; height: 100%; object-fit: cover; } .paar img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; outline-offset: -1px; } /* Das Brett: Formate als Zeilen mit festen Spalten. */ .brett__kopf, .brett__zeilen li { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: 1rem; align-items: baseline; } .brett__kopf { padding-bottom: 0.6rem; font-size: var(--fs-mikro); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--paper-schwach); border-bottom: 2px solid var(--yellow); } .brett__zeilen li { padding: 0.9rem 0; border-bottom: 1px solid var(--linie-dunkel); } .brett__zeilen b { font-size: var(--fs-klein); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--yellow); } .brett__zeilen span { font-size: var(--fs-titel); font-weight: 500; letter-spacing: -0.015em; } .brett__fuss { margin-top: 1rem; font-size: var(--fs-klein); color: var(--paper-schwach); } .nachsatz { margin-top: var(--luft-klein); font-size: var(--fs-klein); line-height: 1.65; color: var(--paper-dim); max-width: 52ch; } .hinweis { padding-block: 1.4rem 1.5rem; border-top: 1px solid var(--linie-dunkel); border-bottom: 1px solid var(--linie-dunkel); } .hinweis p { font-size: var(--fs-klein); line-height: 1.6; color: var(--paper-dim); max-width: 68ch; } .hinweis b { color: var(--red); font-weight: 600; } /* ══ POS 05 · Öffnungsfolge ══════════════════════════ */ .folge { padding-inline: max(var(--rand), (100% - var(--weit)) / 2); } .folge__liste { display: grid; gap: clamp(3rem, 6vw, 5rem); } .schritt { display: grid; gap: 1.5rem; } .schritt__bild { margin: 0; } /* Die Modellfotos sind teils hoch, teils quer. In der Folge liegen sie gestapelt uebereinander, deshalb brauchen sie ein gemeinsames Format, sonst springt die Hoehe bei jedem Wechsel. */ .schritt__bild img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; } .schritt__nr { display: flex; align-items: baseline; gap: 0.4rem; font-variant-numeric: tabular-nums; margin-bottom: 0.9rem; } .schritt__nr b { font-size: var(--fs-zahl); font-weight: 600; line-height: 0.9; letter-spacing: -0.04em; color: var(--red); } .schritt__nr span { font-size: var(--fs-mikro); font-weight: 600; letter-spacing: 0.14em; color: var(--paper-schwach); } .schritt__text h3 { font-size: var(--fs-titel); margin-bottom: 0.6rem; } .schritt__text > p:last-child { font-size: var(--fs-klein); line-height: 1.65; color: var(--paper-dim); max-width: 62ch; } .folge__track { display: none; } /* Der Vorspann des Baukoerpers stoesst direkt an die Folge, und die bringt als klebende Buehne ihre eigene Luft mit. Die volle Platte darunter waere die Luft ein zweites Mal — auf schmalen Schirmen stand dadurch ein leeres Band zwischen Tabelle und erstem Bild. */ .bau .platte { padding-bottom: var(--luft-klein); } /* Mit JS wird die Folge zur klebenden Bühne. */ .js-folge .folge { height: calc(100svh + (var(--schritte) - 1) * 72svh); padding-block: 0; } .js-folge .folge__buehne { position: sticky; top: var(--leiste-h); height: calc(100svh - var(--leiste-h)); display: flex; flex-direction: column; justify-content: center; padding-block: clamp(1rem, 3vw, 2rem); } .js-folge .folge__liste { position: relative; flex: 1; display: block; gap: 0; } /* Die Textzeile bekommt die Hoehe der laengsten (--text-h, von JS gemessen), die Bildzeile den Rest. Sonst verschoebe jeder Schritt mit kuerzerem Text sein Bild nach unten — dann liegen die Blaetter beim Wischen nicht mehr deckungsgleich. */ .js-folge .schritt { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) var(--text-h, auto); align-content: stretch; gap: 0; } /* Das Blatt fuellt die Bildzeile, das Bild sitzt darin unten links. So begrenzt die Zeile die Hoehe — auf niedrigen Fenstern lief das Bild sonst oben aus der klebenden Buehne heraus. */ .js-folge .schritt__bild { grid-area: 1 / 1; align-self: stretch; min-height: 0; display: flex; align-items: center; opacity: 0; will-change: opacity, clip-path; } /* Frueher stand hier contain mit object-position: left bottom. Zwei der acht Modellfotos sind hochkant; die belegten damit nur die halbe Breite der Flaeche, waehrend der Wisch ueber die ganze Breite laeuft. Der Uebergang war deshalb schon fertig, wenn der Scrollweg noch lief, und blieb sichtbar stehen. Mit cover fuellt jedes Blatt dieselbe Flaeche, und der Wisch braucht ueberall gleich lang. */ .js-folge .schritt__bild img { width: 100%; height: 100%; object-fit: cover; object-position: center; } .js-folge .schritt:first-child .schritt__bild { opacity: 1; } .js-folge .schritt__text { grid-area: 2 / 1; align-self: start; opacity: 0; padding-top: clamp(1rem, 2.5vw, 1.6rem); transition: opacity 200ms cubic-bezier(0.16, 1, 0.3, 1); } .js-folge .schritt:first-child .schritt__text { opacity: 1; } .js-folge .schritt__nr { flex-direction: column; align-items: flex-start; gap: 0; margin-bottom: 0.5rem; } @media (min-width: 60rem) { /* Zwei Spalten statt drei: der Titel traegt den ganzen Satz, ein eigener Absatz steht nicht mehr daneben. */ .js-folge .schritt__text { display: grid; grid-template-columns: 7rem minmax(0, 1fr); column-gap: clamp(1.5rem, 3vw, 2.5rem); align-items: baseline; border-top: 1px solid var(--linie-dunkel); padding-top: 1.1rem; } .js-folge .schritt__nr { margin-bottom: 0; } } .js-folge .folge__track { display: flex; gap: 4px; margin-top: clamp(0.75rem, 2vw, 1.25rem); } .js-folge .folge__track i { height: 3px; flex: 1; background: var(--linie-dunkel); transition: background 260ms cubic-bezier(0.16, 1, 0.3, 1); } .js-folge .folge__track i.ist { background: var(--red); } .risse { margin-top: var(--luft-klein); display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); } @media (min-width: 52rem) { .risse { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .risse figure { margin: 0; } .risse img { width: 100%; background: var(--paper); } .tabelle { margin-top: var(--luft-klein); display: grid; gap: 0; } @media (min-width: 52rem) { .tabelle { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 5vw, 4rem); } } @media (min-width: 76rem) { .tabelle { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (min-width: 52rem) { .tabelle--drei { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Vier Punkte auf zwei Spalten: zwei Reihen zu zweit lesen sich ruhiger als drei plus einer allein. */ .tabelle--zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .tabelle > div { padding: 1.4rem 0 1.6rem; border-top: 2px solid var(--red); } .tabelle dt { font-size: var(--fs-titel); font-weight: 600; margin-bottom: 0.45rem; letter-spacing: -0.015em; } .tabelle dd { font-size: var(--fs-klein); line-height: 1.6; color: var(--paper-dim); max-width: 34ch; } /* Die Tabelle des Baukoerpers im Schnitt der Kette: duenne Linie statt Balken, kleiner Titel, Satz darunter. Nur das Aussehen — hier wird nichts geschaltet, also auch kein Hover und kein Zeiger. */ .tabelle--kette { gap: clamp(1.75rem, 4vw, 2.5rem) clamp(1.5rem, 3vw, 2.5rem); } @media (min-width: 34rem) { .tabelle--kette { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 62rem) { .tabelle--kette { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .tabelle--kette > div { display: grid; align-content: start; gap: 0.3rem; padding: 0.7rem 0 0; border-top: 1px solid var(--linie-dunkel); } .tabelle--kette dt { font-size: var(--fs-klein); font-weight: 600; letter-spacing: -0.01em; line-height: 1.45; margin-bottom: 0; } .tabelle--kette dd { font-size: var(--fs-mikro); line-height: 1.55; color: var(--paper-dim); max-width: 34ch; } /* ══ POS 06 · Standort ═══════════════════════════════ */ .masse { margin-top: var(--luft-klein); display: grid; gap: 0; } .masse > div { display: grid; grid-template-columns: minmax(6.5rem, 9rem) minmax(0, 1fr); align-items: baseline; gap: 0.2rem 1.5rem; padding: 0.9rem 0 1rem; border-bottom: 1px solid var(--linie-dunkel); } .masse > div:first-child { border-top: 1px solid var(--linie-dunkel); } @media (min-width: 46rem) { .masse > div { grid-template-columns: minmax(9rem, 11rem) minmax(0, 1fr); gap: 0.2rem 2.5rem; } } .masse dt { font-size: var(--fs-titel); font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; text-align: right; } .masse dd { font-size: var(--fs-klein); line-height: 1.5; color: var(--paper-dim); } .gewuenscht { margin-top: var(--luft-klein); display: grid; gap: 0.9rem; } .gewuenscht__liste { font-size: var(--fs-lead); line-height: 1.5; max-width: 44ch; } .frage { background: var(--yellow); color: var(--ink); } .frage blockquote, .frage__antwort { padding-inline: max(var(--rand), (100% - var(--weit)) / 2); } .frage blockquote { margin: 0; padding-top: var(--luft); } .frage blockquote p { font-size: var(--fs-setzung); font-weight: 600; line-height: 1.14; letter-spacing: -0.025em; max-width: 20ch; text-wrap: balance; } .frage blockquote p::before { content: "„"; } .frage blockquote p::after { content: "“"; } .frage footer { margin-top: 1.5rem; padding-top: 1.2rem; border-top: 1px solid rgba(20, 24, 29, 0.32); max-width: 52ch; font-size: var(--fs-klein); line-height: 1.6; color: var(--gelb-text); } .frage__antwort { padding-top: clamp(2.25rem, 4.5vw, 3.5rem); padding-bottom: var(--luft); font-size: var(--fs-titel); font-weight: 600; letter-spacing: -0.015em; } /* ══ POS 07 · Stand ══════════════════════════════════ */ .stand { background: var(--paper); color: var(--ink); } .stand .lead, .stand .fliess { color: var(--ink-70); } .stand .spec, .stand .kopf__nr { color: var(--rot-text); } .stand .tabelle > div { border-top-color: var(--ink); } .stand .tabelle dd { color: var(--ink-70); } .stand .unter { margin-top: var(--luft); font-size: var(--fs-titel); padding-bottom: 0.8rem; border-bottom: 1px solid var(--linie-hell); } .bilanz { margin-top: var(--luft-klein); display: grid; gap: clamp(2rem, 4vw, 3.5rem); } @media (min-width: 52rem) { .bilanz { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .bilanz__spalte[data-marke="teal"] { --marke: var(--teal); --marke-text: var(--teal-text); } .bilanz__spalte[data-marke="rot"] { --marke: var(--red); --marke-text: var(--rot-text); } .bilanz__spalte h3 { font-size: var(--fs-titel); color: var(--marke-text); padding-bottom: 0.7rem; margin-bottom: 1.1rem; border-bottom: 2px solid var(--marke); } .bilanz__spalte li { position: relative; padding: 0 0 0 1.5rem; font-size: var(--fs-klein); line-height: 1.55; margin-bottom: 0.85rem; } .bilanz__spalte li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 0.7rem; height: 2px; background: var(--marke); } .schluss { margin-top: var(--luft-klein); font-size: var(--fs-titel); line-height: 1.45; letter-spacing: -0.01em; max-width: 38ch; } /* ══ POS 08 · Kontakt ════════════════════════════════ */ .kontakt { background: var(--red); color: var(--ink); } .kontakt__innen { padding-block: var(--luft); } .kontakt .kopf__nr { color: var(--ink); opacity: 0.75; } .kontakt__ruf { margin-top: clamp(1.25rem, 3vw, 2rem); font-size: var(--fs-ruf); font-weight: 600; line-height: 0.98; letter-spacing: -0.035em; } .kontakt .lead { color: var(--ink); max-width: 46ch; } .wege { margin-top: var(--luft-klein); display: grid; gap: 0; } @media (min-width: 52rem) { .wege { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2.5rem, 5vw, 4rem); } } .wege > div { padding: 1.4rem 0 1.6rem; border-top: 1px solid rgba(20, 24, 29, 0.34); border-bottom: 1px solid rgba(20, 24, 29, 0.34); } .wege dt { font-size: var(--fs-mikro); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 0.4rem; } .wege dd { font-size: var(--fs-titel); font-weight: 600; letter-spacing: -0.015em; line-height: 1.3; word-break: break-word; } .wege a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; transition: text-decoration-color 160ms ease; } .wege a:hover { text-decoration-color: var(--paper); } /* ══ Fuß ═════════════════════════════════════════════ */ .fuss { background: var(--ink); color: var(--paper); } .fuss__innen { padding-block: clamp(3rem, 6vw, 5rem); display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; } @media (min-width: 52rem) { .fuss__innen { grid-template-columns: minmax(0, 8rem) minmax(0, 1fr); gap: clamp(3rem, 6vw, 5rem); } } .fuss__marke { display: block; width: 6.5rem; aspect-ratio: 652 / 370; background: currentColor; -webkit-mask: url("assets/wortmarke.svg") no-repeat left center / contain; mask: url("assets/wortmarke.svg") no-repeat left center / contain; } .fuss__meta { display: grid; gap: 1.4rem; } .fuss__meta p { font-size: var(--fs-klein); line-height: 1.65; color: var(--paper-dim); max-width: 58ch; } .fuss__links { display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; align-items: baseline; } .fuss__links a { font-weight: 600; color: var(--paper); text-underline-offset: 0.2em; } .fuss__links a:hover { color: var(--red); } .fuss__links span { color: var(--paper-schwach); } /* ══ Seite: Wer dahintersteckt ═══════════════════════ */ .person { padding-inline: max(var(--rand), (100% - var(--weit)) / 2); padding-block: clamp(3rem, 7vw, 5.5rem) var(--luft); } .person h1 { font-size: var(--fs-kopf); max-width: 18ch; } .person__kopf { display: grid; gap: clamp(2rem, 4vw, 3rem); align-items: start; } @media (min-width: 46rem) { .person__kopf { grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); } } .portrait { margin: 0; aspect-ratio: 3 / 4; background: var(--ink-hoch); border: 1px solid var(--linie-dunkel); display: grid; place-items: center; padding: 1.5rem; } .portrait img { width: 100%; height: 100%; object-fit: cover; } .portrait figcaption { font-size: var(--fs-klein); font-weight: 400; letter-spacing: 0.01em; text-align: center; color: var(--paper-schwach); } .person__rolle { margin-top: 1rem; font-size: var(--fs-lead); line-height: 1.5; color: var(--paper-dim); } .person__text { display: grid; gap: 1.5rem; max-width: 60ch; margin-top: 1.5rem; } .person__text p { color: var(--paper-dim); } .person__text h2 { font-size: var(--fs-titel); margin-top: clamp(1.75rem, 3.5vw, 2.75rem); margin-bottom: -0.4rem; padding-bottom: 0.8rem; border-bottom: 1px solid var(--linie-dunkel); color: var(--paper); } .person__text a { color: var(--paper); text-underline-offset: 0.2em; } .zurueck { display: inline-block; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); font-size: var(--fs-mikro); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; text-underline-offset: 0.25em; } /* Pos 06: die Zahlen stehen neben dem Satz, nicht darunter — sie sind Beleg zum Text, keine eigene Etappe. Unter 58rem wieder untereinander. */ .standort__satz { display: grid; gap: var(--luft-klein); } @media (min-width: 58rem) { .standort__satz { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(2.5rem, 5vw, 5rem); align-items: start; } .standort__satz .masse { margin-top: 0.35rem; } } /* Pos 07 trägt nur noch eine Spalte: den Bedarf. Die Spalte behält ihre Breite, statt über die ganze Platte zu laufen — sonst liest sie sich wie eine Aufzählung ohne Gegenüber. */ @media (min-width: 52rem) { .bilanz--einzeln { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } /* ══ Ansage · Pos 01 ═════════════════════════════════════ */ /* Der Satz, auf den die Kette hinausläuft. Er steht allein auf der Platte, damit das Tippen nicht neben etwas anderem passiert. */ .ansage { margin-top: var(--luft); padding-top: var(--luft-klein); border-top: 1px solid var(--linie-dunkel); } .ansage__satz { max-width: 34ch; font-size: var(--fs-setzung); font-weight: 600; line-height: 1.16; letter-spacing: -0.025em; text-wrap: balance; } /* Waehrend getippt wird, darf die Zeile nicht springen: der Platz fuer den fertigen Satz wird vorher reserviert. --zeilen setzt das Skript. */ .ansage__satz--tippt::after { content: ""; display: inline-block; width: 0.08em; height: 0.9em; margin-left: 0.06em; vertical-align: -0.06em; background: var(--red); animation: blinken 1s steps(2, start) infinite; } @keyframes blinken { to { visibility: hidden; } } @media (prefers-reduced-motion: reduce) { .ansage__satz--tippt::after { animation: none; } } /* ══ Modulares Mehrwerk · Pos 03 ═════════════════════════ */ .modular { margin-bottom: var(--luft); } /* Seitenverkehrt zu .lauf: hier klebt das Bild rechts, der Text laeuft links. Nur ab zwei Spalten — darunter steht ohnehin alles untereinander. */ @media (min-width: 52rem) { .lauf--kehrt > .wechsel { order: 2; } } .modular__text { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(3rem, 12vh, 9rem); } .modular__text li p { font-size: calc(var(--fs-setzung) * 0.62); font-weight: 600; line-height: 1.24; letter-spacing: -0.02em; color: var(--yellow); max-width: 26ch; opacity: 0.34; transition: opacity 0.35s ease; } .modular__text li.ist p { opacity: 1; } /* Ohne JS traegt kein Punkt die Markierung — dann muessen alle lesbar sein. */ html:not(.js-wechsel) .modular__text li p { opacity: 1; } @media (prefers-reduced-motion: reduce) { .modular__text li p { opacity: 1; transition: none; } } /* ══ Formate · Pos 03 ════════════════════════════════════ */ .formate__liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linie-dunkel); } .formate__liste li { padding: 1.1rem 0 1.2rem; border-bottom: 1px solid var(--linie-dunkel); display: grid; grid-template-columns: minmax(3.5rem, auto) minmax(0, 1fr); gap: 0.25rem 1.25rem; } .formate__nr { grid-row: 1 / span 2; font-size: var(--fs-klein); font-variant-numeric: tabular-nums; color: var(--kat, var(--paper-dim)); padding-top: 0.15em; } .formate__liste h4 { margin: 0; font-size: var(--fs-titel); font-weight: 600; letter-spacing: -0.015em; } .formate__liste li > p:last-child { font-size: var(--fs-klein); line-height: 1.6; color: var(--paper-dim); max-width: 52ch; } .formate__fuss { margin-top: 1.1rem; font-size: var(--fs-mikro); letter-spacing: 0.06em; text-transform: uppercase; color: var(--paper-dim); } /* ══ Das digitale Mehrwerk · Pos 04 ══════════════════════ */ .digital { margin-top: var(--luft); } .digital .lead { margin-top: 1.1rem; max-width: 54ch; } .digital .tabelle { margin-top: var(--luft-klein); } /* .unter war bisher nur in Pos 07 gesetzt; die Zwischenueberschrift wird inzwischen in 03, 04 und 05 gebraucht, also gilt sie allgemein. Die hellere Fassung fuer den Papiergrund steht weiter oben bei .stand und sticht diese hier per Spezifitaet. */ .unter { margin: 0 0 var(--luft-klein); font-size: var(--fs-titel); padding-bottom: 0.8rem; border-bottom: 1px solid var(--linie-dunkel); } /* ══ Impressum ═══════════════════════════════════════════ */ /* Pflichtangabe, kein Gestaltungsstueck: eine Spalte, keine Auszeichnung ausser den Zwischenueberschriften. Erbt Satzbreite und Rhythmus von .person, damit die Anhaenge zusammengehoeren. */ .recht { padding-inline: max(var(--rand), (100% - var(--weit)) / 2); padding-block: clamp(3rem, 7vw, 5.5rem) var(--luft); } .recht h1 { font-size: var(--fs-kopf); } .recht__text { display: grid; gap: 1.5rem; max-width: 62ch; margin-top: clamp(1.75rem, 3.5vw, 2.75rem); } .recht__text p { color: var(--paper-dim); line-height: 1.7; } .recht__text h2 { font-size: var(--fs-titel); margin-top: clamp(1.5rem, 3vw, 2.25rem); margin-bottom: -0.4rem; padding-bottom: 0.8rem; border-bottom: 1px solid var(--linie-dunkel); color: var(--paper); } .recht__text a { color: var(--paper); text-underline-offset: 0.2em; } /* Die offenen Stellen sollen wehtun, solange sie offen sind. */ .fehlt { background: var(--red); color: var(--paper); padding: 0.05em 0.4em; font-weight: 600; } /* Die Formatliste bekommt keine Markierung: die Bilder daneben sind Beispiele fuer das, was hier stattfindet, und nicht einzelnen Punkten zugeordnet. Ein mitlaufendes Highlight wuerde eine Zuordnung behaupten, die es nicht gibt. */ /* ══ Nachtrag: Ausschnitt, Luft, klebende Bloecke ════════ */ /* 01.d zeigt den Bildschirm in der Wand. Der sitzt unten im Bild, beim Beschnitt auf 16:9 fiel er sonst heraus. */ .buehne__bild--unten img { object-position: bottom; } /* Die Listen in 02 und 04 liefen bis zum Rand der Position: der letzte Punkt stand noch nicht mittig, da war die Sektion schon zu Ende und der Blick sprang weiter. Der Nachlauf gibt ihm seinen Auftritt. */ @media (min-width: 62rem) { .teile--liste { padding-bottom: 34vh; } } /* Modulares Mehrwerk: ein Satz fuellt einen Schirm. So steht nie mehr als einer im Bild, das Bild daneben hat Zeit, und unten schaut der naechste schon herein. */ @media (min-width: 62rem) { .modular__text { gap: 0; } .modular__text li { min-height: 88vh; display: flex; align-items: center; } .modular__text li:last-child { min-height: 60vh; } } /* Wenn direkt Text folgt, braucht die Zwischenueberschrift oben Luft und unten weniger. */ .unter--eng { margin-top: var(--luft); margin-bottom: 1.4rem; } /* ══ Die Screens des digitalen Mehrwerks ═════════════════ */ .schirme { margin-top: var(--luft-klein); display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); } @media (min-width: 56rem) { .schirme { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); /* stretch statt start: beide Spalten bekommen dieselbe Hoehe, naemlich die der langen Seite. Erst dadurch hat die Reihe daneben etwas zu verteilen. */ align-items: stretch; } /* Kein gap: auto in CSS, aber space-between tut genau das: der Rest, der nach den drei Bildern uebrig bleibt, wird gleichmaessig auf die beiden Luecken verteilt. Oben und unten schliessen die Spalten damit buendig mit der langen Seite ab. Das gap bleibt als Untergrenze stehen, falls die Bilder einmal hoeher sind als die Spalte. */ .schirme__reihe { justify-content: space-between; } } .schirme figure { margin: 0; } .schirme img { display: block; width: 100%; border: 1px solid var(--linie-dunkel); } /* Die lange Seite laeuft ueber ihre volle Hoehe: abgeschnitten sah sie aus wie ein Fehler, nicht wie eine Absicht. */ .schirme__lang img { height: auto; } .schirme figcaption { margin-top: 0.7rem; font-size: var(--fs-klein); line-height: 1.6; color: var(--paper-schwach); } .schirme__reihe { display: flex; flex-direction: column; gap: clamp(1.5rem, 3vw, 2.5rem); } /* ══ 07: der Bedarf steht neben dem Vorspann ═════════════ */ .stand__satz { margin-top: var(--luft-klein); display: grid; gap: var(--luft-klein); } @media (min-width: 58rem) { .stand__satz { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 4.5rem); align-items: start; } .stand__satz .lead { margin-top: 0; } .stand__satz .bilanz { margin-top: 0; } /* In der Spalte steht der Bedarf einspaltig, nicht noch einmal geteilt. */ .stand__satz .bilanz--einzeln { grid-template-columns: minmax(0, 1fr); } } /* Die Zeichenspur der Ansage. Der Satz steht vollstaendig da, getippt wird nur die Sichtbarkeit — deshalb ruckt beim Schreiben nichts. */ .ansage__spur span { visibility: hidden; } /* Fuer Vorlesegeraete, nicht fuers Auge. */ .nur-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* Die Axonometrien sind freigestellt und sollen auf dem Grund stehen, nicht in einem weissen Kasten. Also nicht beschneiden, sondern einpassen. */ .modular .wechsel__bild img { object-fit: contain; aspect-ratio: 16 / 10; } /* ══ Nachtrag: Pos 05 als Absatz, laengere Folge-Titel ═══ */ /* Der Absatz, der die vier Eigenschaften zusammenfasst. Etwas breiter als ein Listentext, aber nicht so breit wie der Vorspann darueber. */ .fliess__satz { max-width: 64ch; font-size: var(--fs-body); line-height: 1.75; color: var(--paper-dim); } /* Die Titel der Folge tragen jetzt den ganzen Satz. Damit sie nicht ueber die halbe Breite laufen, bekommen sie ein Mass und etwas engeren Satz. */ .schritt__text h3 { max-width: 52ch; line-height: 1.28; text-wrap: balance; margin-bottom: 0; } /* ══ Folge: Bild und Text nebeneinander ══════════════════ */ /* Bis hierher lagen Bild und Text uebereinander, die Textzeile bekam von JS eine feste Hoehe (--text-h), damit die Blaetter deckungsgleich blieben. Nebeneinander braucht es das nicht mehr: das Bild fuellt die linke Spalte, der Text steht rechts auf halber Hoehe. */ @media (min-width: 60rem) { .js-folge .schritt { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); column-gap: clamp(2rem, 4vw, 4rem); align-items: center; } .js-folge .schritt__bild { grid-area: 1 / 1; align-self: stretch; } .js-folge .schritt__text { grid-area: 1 / 2; align-self: center; display: block; border-top: 0; padding-top: 0; } .js-folge .schritt__nr { flex-direction: row; align-items: baseline; gap: 0.4rem; margin-bottom: 1.1rem; } .js-folge .schritt__text h3 { max-width: 22ch; } /* Der Balken unter der Buehne stand als Fortschritt unter dem Text. Nebeneinander gehoert er unter beides. */ .js-folge .folge__buehne { justify-content: center; } } /* ══ Deckblatt auf schmalen Schirmen ═════════════════════ */ /* Zwei Spalten waren fuer das Telefon zu eng: die Marke schrumpfte auf Daumennagelgroesse, der Absatz daneben brach nach jedem zweiten Wort um. Untereinander bekommt beides seine Breite. */ @media (max-width: 46rem) { .deck__fuss { grid-template-columns: minmax(0, 1fr); row-gap: clamp(1.75rem, 6vw, 3rem); } .deck__marke { width: min(100%, 20rem); } } /* ══ Modulares Mehrwerk auf schmalen Schirmen ════════════ */ /* Nebeneinander bekommt jeder Satz einen Schirm fuer sich (siehe oben, ab 62rem). Uebereinander galt das nicht: die drei Saetze zusammen hatten knapp 370px Scrollweg, auf die sich fuenf Bildzustaende verteilen mussten. Das sah aus wie Flackern, nicht wie eine Bewegung. Also bekommen die Saetze auch hier ihren Weg, nur kuerzer, weil das klebende Bild oben schon ein Drittel des Schirms einnimmt. */ @media (max-width: 61.999rem) { .modular__text { gap: 0; } .modular__text li { min-height: 62svh; display: flex; align-items: center; } .modular__text li:last-child { min-height: 42svh; } }