/* Baustellenseite GEO / GVO — eigenständiges Stylesheet, kein Build. Alle Werte sind aus dem Projekt übernommen: Farben und Raster aus scss/config/_tokens.scss, Fläche, Keil, Fuss und Wasserzeichen aus scss/sections/_section-stage.scss. Die dortigen ramp()- und clamped()-Aufrufe stehen hier als fertiges clamp() — die SCSS-Formel ist jeweils im Kommentar genannt, damit sich jeder Wert zurückverfolgen lässt. Die Datei ist in BEIDEN Varianten identisch. Die Flatterband-Regeln am Ende greifen nur, wenn das Markup die Bänder und `class="has-tape"` am mitbringt — also in mit-flatterband/index.html. */ /* Outfit trägt alles, Kulim Park Light Italic nur die Kursiv-Betonung in der Überschrift — Outfit hat keine echte Kursive. */ @font-face { font-family: "Outfit Variable"; font-style: normal; font-display: swap; font-weight: 100 900; src: url("assets/fonts/outfit-latin-wght-normal.woff2") format("woff2-variations"); 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: "Kulim Park"; font-style: italic; font-display: swap; font-weight: 300; src: url("assets/fonts/kulim-park-latin-300-italic.woff2") format("woff2"); 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; } :root { /* Farbtoken, 1:1 aus den Figma-Variablen (config/_tokens.scss). */ --color-white: #ffffff; --color-black: #000000; --color-graphite-100: #474c59; --color-amethyst-100: #53346f; --color-amethyst-5: #f6f5f8; --color-arctic-100: #407f93; --color-lavendar-100: #747bbc; /* Der Hauch, mit dem der Entwurf Inhaltsflächen unterlegt (Rechteck 1080:8964). */ --color-lavendar-10: #f1f2f8; /* Endwert zum Ausblenden: derselbe Farbton MIT Deckkraft 0. Nicht `transparent` und nicht `color-mix(… 0%, transparent)` — letzteres löst zu `color(srgb 0 0 0 / 0)` auf, gibt den Farbton also preis, und der Verlauf hängt dann daran, wie der Browser gegen transparentes Schwarz interpoliert. Mit dem Farbton am Endwert steht er fest. */ --color-legal-fade: #d5d7eb00; /* 90 und 60 tragen den Zustandswechsel der Sprungmarken (Komponente 1037:7906): Text 90 -> 60, Strich 100 -> 80. */ --color-lavendar-90: #8288c3; --color-lavendar-80: #9095c9; --color-lavendar-60: #acb0d7; --color-porcelain: #d9d9d9; /* Raster. clamped(min, max) läuft von 320px bis 2560px Viewportbreite. */ --page-width: clamp(320px, 100vw, 2560px); --page-indent: clamp(16px, 1.071429vw + 12.5714px, 40px); --content-indent: clamp(16px, 11.78571vw - 21.7143px, 280px); --grid-gutter: clamp(16px, 0.1785714vw + 15.4286px, 20px); /* Breite EINER von zwölf Spalten. Gegenprobe bei 2560: (2560 − 2·40 − 2·280 − 11·20) / 12 = 141.67. */ --grid-column-width: calc( (var(--page-width) - 2 * var(--page-indent) - 2 * var(--content-indent) - 11 * var(--grid-gutter)) / 12 ); /* Abstand der Seite zur Viewportkante. Erst über 2560 ungleich null, dort ist die Seite gedeckelt. `100%` und nicht `100vw`: mit Scrollbalken wäre die Differenz negativ, das fängt max() ab. */ --viewport-indent: max(0px, calc((100% - var(--page-width)) / 2)); /* Von der Viewportkante bis zur linken Rasterkante. Darauf sitzt jeder Inhalt, und daraus rechnet die Fusskante ihre Spalte. */ --page-inset: calc(var(--viewport-indent) + var(--page-indent) + var(--content-indent)); /* Schrift. Die Stage-Überschrift hat im Entwurf eine eigene Rampe (40 / 44 / 64), nicht die der globalen Skala. */ --font-family-default: "Outfit Variable", "Outfit", sans-serif; --font-family-italic: "Kulim Park", "Outfit Variable", sans-serif; --font-copy-size: clamp(16px, 0.0892857vw + 15.7143px, 18px); --font-copy-small-size: 16px; /* clamped(30px, 48px) und clamped(21px, 28px) — heading-2 und heading-4. */ --font-heading-2-size: clamp(30px, 0.803571vw + 27.4286px, 48px); --font-heading-4-size: clamp(21px, 0.3125vw + 20px, 28px); /* ramp(40px, 44px, 375px, 768px) */ --stage-headline-size: clamp(40px, 1.017812vw + 36.1832px, 44px); --grain-image: url("assets/grain.png"); } /* Lokaler Reset, so knapp wie möglich. */ *, *::before, *::after { box-sizing: border-box; } html { /* Kein Zoom-Sprung bei Textgrössen in iOS Safari. */ -webkit-text-size-adjust: 100%; /* Die Sprungmarke soll gleiten, nicht springen. Abgewählte Bewegung siehe unten. */ scroll-behavior: smooth; } body { margin: 0; background: var(--color-white); color: var(--color-graphite-100); font-family: var(--font-family-default); font-size: var(--font-copy-size); line-height: 1.2; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, p, dl, dd { margin: 0; } address { font-style: normal; } /* Träger des Logos: es steht einmal im Dokument und wird zweimal per geholt — als Absender im Inhalt und als Wasserzeichen auf der Fläche. Kein `display: none`: das nähme die Referenz. */ .sprite { position: absolute; width: 0; height: 0; overflow: hidden; } /* Die Bühne — Kopfsektion aus dem Entwurf (Frame 1286:3547), hier eine Bildschirmhöhe hoch. EINE Fläche, keine zwei: der Hintergrund ist ein voller Kasten mit dem Verlauf, aus dem unten rechts der Fussausschnitt geschnitten ist. Keinen Keil und keine Grundfläche darunter gibt es dort. Marke ist `global` — GEO und GVO gemeinsam, also der dreistufige lineare Verlauf, genau wie auf einer Seite ohne Entry. Die Masse sind an drei Breiten belegt (375, 768, 2560). Dazwischen läuft eine lineare Rampe mit dem Knick bei 768px — deshalb steht fast jedes Token zweimal. */ .stage { /* Lage des Inhaltsblocks unter der Kopfleiste, oben verankert. ramp(136px, 264px, 375px, 768px) */ --stage-content-offset: clamp(136px, 32.56997vw + 13.8626px, 264px); --stage-content-gap: 22px; /* Die weisse Leiste. Unter 768px steht sie als Rechteck im Fluss und verlängert die Bühne, ab 768px liegt sie im Fussausschnitt und trägt dessen Schräge. ramp(68px, 92px, 375px, 768px) Unter 768px gibt es deshalb KEINEN Ausschnitt: er schnitt die Fläche schräg an, während die Leiste darunter ein Rechteck ist — dazwischen blieb ein Streifen weisser Grund mit einer Schrägkante stehen, die zu nichts gehört. */ --stage-jumpmark-height: clamp(68px, 6.10687vw + 45.0992px, 92px); --stage-notch-height: 0px; --stage-bar-height: var(--stage-jumpmark-height); /* Die EINZIGE Schräge der Bühne ist der Fussausschnitt. Einen Keil gibt es im Hintergrund nicht: die Fläche (Subtract auf 1286:3341) ist ein voller Kasten über den ganzen Frame, ihre rechte Kante läuft senkrecht, und die Grundfläche `Rectangle 40` darunter ist ausgeblendet. M2560 981.494 H838.66 L768.83 1151 H0 V0 H2560 L2560 981.494 Z Fussschräge dort: 69.83 / 169.506 = 0.41196. Übernommen ist der Wert der Website (0.4197, _section-stage.scss) — 2 % daneben, dafür schneidet die Kante wie im Live-Betrieb. */ --stage-foot-slope: 0.4197; /* Wasserzeichen: Breite und Lage aus der Wortmarke des Entwurfs übernommen — hier trägt sie das gemeinsame Logo, siehe unten. ramp(330px, 740px, 375px, 768px) */ --stage-watermark-width: clamp(330px, 104.3257vw - 61.2214px, 740px); /* Abstand der Mitte zur UNTERKANTE, nicht zum Kopf: der Bezug ist der Fuss. ramp(201.5px, 338px, 375px, 768px) */ --stage-watermark-inset-block-end: clamp(201.5px, 34.73282vw + 71.2519px, 338px); /* Nicht markenabhängig: GEO nutzt amethyst/5, GVO graphite/5 — bei 0.7 Deckkraft im Blend nicht unterscheidbar. */ --stage-watermark-color: var(--color-amethyst-5); --stage-watermark-opacity: 0.7; /* Die Fläche der Bühne trägt den Paint-Style `global/gradients/linear` aus dem Entwurf: arctic oben rechts, lavendar in der Mitte, amethyst unten links. Eine Ebene, kein Stapel — der Style deckt beide Marken ab. */ --stage-background: linear-gradient( 235.5deg, var(--color-arctic-100) 0%, var(--color-lavendar-100) 50%, var(--color-amethyst-100) 100% ); /* Grund, den der Fussausschnitt freigibt: dieselbe weisse Fläche, die auch die Sprungmarkenleiste trägt. */ --stage-foot-background: var(--color-white); /* Flatterband. Steht an der Bühne und nicht am Band: der Inhaltsblock rechnet daraus seinen Freiraum, und er ist kein Nachfahre des Bandes. Signalrot wie am echten Band; die Streifen laufen quer zur Bandrichtung. */ --tape-red: #e30613; --tape-height: clamp(30px, 1.428571vw + 25.4286px, 62px); /* Streifenbreite waagerecht gemessen — die Neigung macht daraus die Schräge. */ --tape-stripe: clamp(26px, 1.294643vw + 21.8571px, 55px); /* Höhenversatz zwischen linkem und rechtem Ende. GEDECKELT, und darum keine Drehung: ein fester Winkel hebt das rechte Ende bei 2560 um über 360px und schiebt das Band aus dem Bild. */ --tape-rise: clamp(40px, 3vw, 120px); /* Luft zwischen dem unteren Band und der weissen Leiste. */ --tape-foot-gap: calc(0.25 * var(--tape-height)); /* Sprungmarken. Markenunabhängig: auf allen drei Themes dieselben Werte. Der Hover geht HELLER, nicht dunkler — die Komponente kennt genau diese zwei Zustände. */ --stage-jumpmark-background: var(--color-white); --stage-jumpmark-color: var(--color-lavendar-90); --stage-jumpmark-border-color: var(--color-lavendar-100); --stage-jumpmark-color--hover: var(--color-lavendar-60); --stage-jumpmark-border-color--hover: var(--color-lavendar-80); /* Abstand der Liste zur Schräge. Nicht skaliert: die Kante ist ein fester Winkel, skaliert liefe die Liste auf breiten Schirmen davon. */ --stage-jumpmark-slant-padding: 20px; /* Abstand der fünften Rasterspalte von der linken Rasterkante. Dort liegt die Fusskante, und dort beginnen auch die Sprungmarken. Gegenprobe bei 2560: 320 + 4 · 161.67 = 966.7. */ --stage-foot-column-offset: calc(4 * (var(--grid-column-width) + var(--grid-gutter))); --stage-foot-inline-start: calc(var(--page-inset) + var(--stage-foot-column-offset)); /* Das Wasserzeichen liegt IN der Hintergrundfläche und misst von derselben Kante. */ --stage-watermark-inset-start: var(--stage-foot-inline-start); --stage-foot-height: calc(var(--stage-notch-height) + var(--stage-bar-height)); --stage-foot-slant: calc(var(--stage-foot-slope) * var(--stage-foot-height)); --stage-foot-top: calc(100% - var(--stage-foot-height)); /* Unter 768px ein voller Kasten ohne Ausschnitt: die Leiste sitzt darunter im Fluss. Den Ausschnitt setzt erst der md-Block. */ --stage-surface-shape: none; /* Fuss und Sprungmarkenleiste teilen die Form. 1px Überstand, weil die Bühnenhöhe selten auf einem Gerätepixel liegt. */ --stage-foot-shape: polygon( var(--stage-foot-inline-start) 0, 100% 0, 100% calc(100% + 1px), calc(var(--stage-foot-inline-start) - var(--stage-foot-slant)) calc(100% + 1px) ); /* Freiraum, den der Inhalt unter sich lässt: der Ausschnitt. Die Leiste darunter steht im Fluss und braucht keinen. */ --stage-content-reserve: calc(var(--stage-notch-height) + var(--stage-content-gap)); position: relative; /* Eine Zeile über die freie Höhe für Fläche, Wasserzeichen und Inhalt; die Leiste landet unter 768px in der zweiten. */ display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr; /* Eine Bildschirmhöhe. `svh` und nicht `vh`: auf Mobilgeräten sonst ein Sprung, sobald die Adressleiste einfährt. Reicht die Höhe für den Inhalt nicht, WÄCHST die Bühne darüber hinaus. */ min-height: 100svh; /* Eigene Stapelebene, sonst mischt sich das Wasserzeichen in die Seite statt in die Fläche der Bühne. */ isolation: isolate; /* Auch senkrecht: das Wasserzeichen ragt über die Fläche hinaus. */ overflow: hidden; color: var(--color-white); } /* Grund unter der Fläche: sichtbar nur im Fussausschnitt, und dort deckt ihn ab 768px die weisse Leiste. Unter 768px liegt die Leiste im Fluss, und der Ausschnitt über ihr zeigt denselben weissen Grund — beide bilden zusammen den Fuss. */ .stage__bg { position: absolute; inset: 0; z-index: 0; background: var(--stage-foot-background); /* Beschneidet das Wasserzeichen darin. Nur waagerecht, und `clip` statt `hidden`: senkrecht schneidet die Bühne selbst ab, und `clip` darf neben `visible` stehen, ohne dass daraus `auto` wird. */ overflow-x: clip; overflow-y: visible; } .stage__surface { position: absolute; inset: 0; background: var(--stage-background); clip-path: var(--stage-surface-shape); } /* Das Korn wie der NOISE-Effekt auf der Verlaufsfläche — im Entwurf ein Filter auf der Fläche selbst, also über ihre ganze Ausdehnung. `pixelated` ist Pflicht, nicht Geschmack: sonst glättet der Browser die Kachel auf Retina hoch und nimmt ihr 40 % Kontrast. */ .stage__surface::before { content: ""; position: absolute; inset: 0; background-image: var(--grain-image); image-rendering: pixelated; } /* Wasserzeichen. Im Entwurf steht hier die Wortmarke einer Marke; die Baustellenseite gehört beiden, deshalb trägt sie das gemeinsame Lock-up GEO / GVO. Die Breite ist dieselbe wie die der Wortmarke (1441 bei 2560), die Höhe folgt dem Seitenverhältnis des Logos. ABWEICHUNG vom Entwurf, mit Absicht: dort läuft die Wortmarke über den Rand hinaus und wird beschnitten — ein einzelnes Wort verträgt das. Das Lock-up nicht, ihm fehlte sonst das letzte O. Deshalb deckelt min() die Breite auf den Platz bis zur Seitenkante; erst über 2200px greift der Entwurfswert. Kind der Hintergrundfläche: liegt über den Flächen, wird mit ihnen beschnitten und bleibt hinter dem Text. */ .stage__watermark { position: absolute; inset-block-end: var(--stage-watermark-inset-block-end); /* Unter 768px hängt die Marke rechts, im Seitenrand statt darüber hinaus. */ inset-inline-end: var(--page-indent); /* Verschiebt die Marke um ihre halbe Höhe nach unten: damit sitzt ihre MITTE auf dem gemessenen Abstand zur Unterkante. */ translate: 0 50%; display: block; width: min(var(--stage-watermark-width), calc(100% - 2 * var(--page-indent))); height: auto; color: var(--stage-watermark-color); /* Seiten auf Ebene 1 liegen hell auf. */ mix-blend-mode: soft-light; opacity: var(--stage-watermark-opacity); user-select: none; } /* Inhalt: Logo, Überschrift, Text. Liegt in derselben Rasterzelle wie die Fläche und darüber. */ .stage__content { grid-row: 1; position: relative; z-index: 2; display: grid; justify-items: start; align-content: start; gap: var(--stage-content-gap); padding-block: var(--stage-content-offset) var(--stage-content-reserve); /* Rasterspur statt Polster: der Inhalt beginnt an der Rasterkante. */ margin-inline: var(--page-inset); /* Der Entwurf führt 12 / 8 / 6 / 4 Spalten (311 bei 375, 464 bei 768, 626.5 bei 2560). */ max-width: calc(12 * var(--grid-column-width) + 11 * var(--grid-gutter)); } /* Das gemeinsame Logo, gestochen scharf über dem Verlauf. Grösser als in der Kopfleiste (26–33px): auf dieser Seite ist es der Absender, nicht Beiwerk. */ .stage__logo { display: block; width: auto; height: clamp(34px, 0.892857vw + 31.1429px, 54px); color: var(--color-white); } .stage__headline { font-weight: 700; font-size: var(--stage-headline-size); line-height: 1.1; /* Lange Wörter brechen mit, statt die Spur zu sprengen. */ word-break: break-word; } /* Die Betonung in der Überschrift: Kulim Park Light Italic, im gleichen Grad. */ .stage__headline em { font-family: var(--font-family-italic); font-weight: 300; font-style: italic; } .stage__copy { font-weight: 400; max-width: 62ch; } /* Weisse Leiste unten mit der Sprungmarke ins Impressum. Unter 768px steht sie im Fluss als Rechteck und verlängert die Bühne, ab 768px liegt sie im Fussausschnitt und trägt dessen Schräge. */ .stage__jumpmarks { grid-row: 2; position: relative; z-index: 2; display: flex; align-items: center; min-height: var(--stage-jumpmark-height); background: var(--stage-jumpmark-background); } .stage__jumpmark-list { display: flex; flex-wrap: wrap; gap: clamp(16px, 0.892857vw + 13.1429px, 36px); margin: 0; /* Dieselbe Spur wie der Inhaltsblock darüber. */ padding: 0 var(--page-inset); list-style: none; } .stage__jumpmark { /* Block, nicht inline: als inline hingen Polster und Unterstrich ausserhalb der Zeilenbox. */ display: block; font-size: var(--font-copy-small-size); color: var(--stage-jumpmark-color); text-decoration: none; white-space: nowrap; padding-block-end: 4px; border-block-end: 1px solid var(--stage-jumpmark-border-color); transition: color 150ms ease, border-color 150ms ease; } .stage__jumpmark:hover, .stage__jumpmark:focus-visible { color: var(--stage-jumpmark-color--hover); border-block-end-color: var(--stage-jumpmark-border-color--hover); } @media (min-width: 768px) { :root { /* ramp(44px, 64px, 768px, 2560px) */ --stage-headline-size: clamp(44px, 1.116071vw + 35.4286px, 64px); } .stage { /* Läuft zurück: 264 bei 768, 210 bei 2560. */ --stage-content-offset: clamp(210px, -3.013393vw + 287.1429px, 264px); --stage-content-gap: 32px; /* ramp(92px, 170px, 768px, 2560px). Ab hier deckt der Ausschnitt genau die aufgelegte Leiste, und die Leiste verlängert die Bühne nicht mehr. */ --stage-jumpmark-height: clamp(92px, 4.352679vw + 58.5714px, 170px); /* Ab hier deckt der Ausschnitt genau die aufgelegte Leiste, und die verlängert die Bühne nicht mehr. */ --stage-notch-height: var(--stage-jumpmark-height); --stage-bar-height: 0px; /* Die Fläche: voller Kasten minus Fussausschnitt — Punkt für Punkt der Pfad aus dem Entwurf (Subtract auf 1286:3341). */ --stage-surface-shape: polygon( 0 0, 100% 0, 100% var(--stage-foot-top), var(--stage-foot-inline-start) var(--stage-foot-top), calc(var(--stage-foot-inline-start) - var(--stage-foot-slant)) 100%, 0 100% ); --stage-watermark-width: clamp(740px, 39.11272vw + 439.6143px, 1441px); --stage-watermark-inset-block-end: clamp(338px, 9.542411vw + 264.7143px, 509px); } /* Ab hier beginnt die Marke LINKS an der Schräge des Fusses — dieselbe Rasterspur, die fünfte Spalte. Der Deckel misst von dort bis zur Seitenkante. */ .stage__watermark { inset-inline: var(--stage-watermark-inset-start) auto; width: min( var(--stage-watermark-width), calc(100% - var(--stage-watermark-inset-start) - var(--page-indent)) ); } .stage__content { max-width: calc(8 * var(--grid-column-width) + 7 * var(--grid-gutter)); } /* Aufgelegt statt im Fluss: die Leiste füllt den Ausschnitt und übernimmt seine Form. */ .stage__jumpmarks { position: absolute; inset-block-end: 0; inset-inline: 0; clip-path: var(--stage-foot-shape); } /* Die Liste beginnt an der Fusskante plus Abstand zur Schräge. */ .stage__jumpmark-list { padding-inline: calc(var(--stage-foot-inline-start) + var(--stage-jumpmark-slant-padding)) 0; } } @media (min-width: 1280px) { .stage__content { max-width: calc(6 * var(--grid-column-width) + 5 * var(--grid-gutter)); } } @media (min-width: 1920px) { .stage__content { max-width: calc(4 * var(--grid-column-width) + 3 * var(--grid-gutter)); } } /* Rechtsabschnitte. Beide teilen Raster und Typo und unterscheiden sich nur im Grund: das Impressum bleibt weiss, damit der Fuss der Bühne ohne Kante in es übergeht, der Datenschutz trägt einen Verlauf und hebt sich davon ab. Der Datenschutzverlauf ist senkrecht und hell: lavendar/10 oben, nach unten ins Weiss ausgeblendet. Graphit darauf liegt zwischen 8.1:1 (auf lavendar/10) und 8.59:1 (auf Weiss). */ .legal { padding-block: 42px; background: var(--legal-background); } .legal--imprint { --legal-background: var(--color-white); } .legal--privacy { /* Vorgabe des Nutzers, Richtung gedreht: oben der Hauch, nach unten ins Weiss der Seite ausgeblendet. Die Kante zum weissen Impressum darüber ist damit sichtbar, das Ende des Abschnitts läuft weich aus. */ --legal-background: linear-gradient( to top, var(--color-legal-fade) 0%, var(--color-lavendar-10) 100% ); } .legal__inner { margin-inline: var(--page-inset); /* Dieselbe Spur wie der Stage-Inhalt in seiner breitesten Fassung. */ max-width: calc(12 * var(--grid-column-width) + 11 * var(--grid-gutter)); display: grid; gap: clamp(26px, 1.5vw, 42px); } .legal__headline { font-weight: 700; font-size: var(--font-heading-2-size); line-height: 1.1; color: var(--color-graphite-100); } .legal__companies { display: grid; gap: clamp(26px, 1.5vw, 42px); } .legal__company h3, .legal__note h3 { font-weight: 700; font-size: var(--font-heading-4-size); line-height: 1.1; margin-block-end: 16px; } /* Bezeichnung und Wert in zwei Spuren, ab 768px nebeneinander. Beide in Graphit: Lavendar liegt auf Weiss bei 3.8:1 und reisst AA für Fliesstext, und die zwei Spuren trennen ohnehin schon. */ .legal__facts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px 20px; margin-block-start: 16px; } .legal__note p + h3 { margin-block-start: 26px; } .legal__note p + p { margin-block-start: 16px; } .legal__note p { max-width: 78ch; } /* Unterstrich in Lavendar wie die Interaktionsfarbe des Projekts: auf beiden Gründen sind das 3.8:1 und damit über den 3:1 für nichttextliche Kontraste. */ .legal a { color: var(--color-graphite-100); text-decoration-color: var(--color-lavendar-100); text-decoration-thickness: 1px; text-underline-offset: 3px; } .legal a:hover, .legal a:focus-visible { text-decoration-color: currentColor; } /* Rücksprung an den Seitenanfang, wie im Fuss der Website. */ .legal__top { justify-self: start; font-size: var(--font-copy-small-size); padding-block-start: 26px; border-block-start: 1px solid var(--color-porcelain); width: 100%; } @media (min-width: 768px) { .legal { padding-block: 68px; } .legal__facts { grid-template-columns: auto minmax(0, 1fr); } .legal__facts dt { grid-column: 1; } .legal__facts dd { grid-column: 2; } } @media (min-width: 1024px) { .legal__companies { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 42px clamp(20px, 2vw, 68px); } } @media (min-width: 1280px) { .legal { padding-block: 110px; } } /* Flatterband — nur mit `class="has-tape"` am und den Bändern im Markup. Zwei gekreuzte Absperrbänder aus einem repeating-linear-gradient. EINE Stapelregel, auf allen Breiten dieselbe: das Band liegt über der Fläche und unter allem, was Text trägt — Stapelebene 1 gegen die 2 von Inhalt und Sprungmarkenleiste. Damit bleibt der Baustellentext lesbar und die Impressum-Marke sichtbar. Damit das Band deswegen nicht halb verschwindet, endet es oberhalb der Leiste statt in sie hineinzulaufen: ab md ist die Leiste auf die Fussform beschnitten, das Band lag links der Schräge frei und rechts davon hinter dem Weiss. Jetzt hört es auf beiden Seiten an derselben Kante auf. */ .stage__tape { position: absolute; z-index: 1; inset-inline: 0; /* Der Kasten ist so hoch wie Band plus Versatz; den Streifen daraus schneidet der clip-path. Steigung damit gesetzt, nicht aus einem Winkel gerechnet. */ height: calc(var(--tape-height) + var(--tape-rise)); background-image: repeating-linear-gradient( 118deg, var(--tape-red) 0 var(--tape-stripe), var(--color-white) var(--tape-stripe) calc(2 * var(--tape-stripe)) ); /* Schatten als Filter und nicht als box-shadow: der clip-path schnitte einen box-shadow mit ab, drop-shadow folgt der geschnittenen Form. */ filter: drop-shadow( 0 clamp(6px, 0.4vw, 14px) clamp(10px, 0.9vw, 26px) color-mix(in srgb, var(--color-black) 32%, transparent) ); /* Vorgabe des Nutzers: das Band liegt zurückgenommen auf der Fläche, damit Verlauf und Wortmarke darunter durchkommen. */ opacity: 0.6; pointer-events: none; } /* Beide Lagen hängen an den Massen der Bühne, nicht an Prozenten: das obere Band endet links über dem Logo und steigt nach rechts, das untere fällt nach rechts in den Fussausschnitt. Die Faktoren sind gesetzt, nicht aus dem Entwurf belegt. */ .stage__tape--top { /* Faktor 3 statt 1.5 — Vorgabe des Nutzers, das Band sitzt damit deutlich höher über dem Logo. */ top: calc(var(--stage-content-offset) - 3 * var(--tape-height) - var(--tape-rise)); clip-path: polygon(0 var(--tape-rise), 100% 0, 100% var(--tape-height), 0 100%); } .stage__tape--bottom { /* Der Kasten endet ein Stück über der Leiste; sein tiefster Punkt ist die rechte Bandkante. */ top: calc( 100% - var(--stage-foot-height) - var(--tape-foot-gap) - var(--tape-height) - var(--tape-rise) ); clip-path: polygon(0 0, 100% var(--tape-rise), 100% 100%, 0 var(--tape-height)); } /* Der Inhalt hält zusätzlich den unteren Streifen frei. Ohne das läuft er auf flachen Fenstern durch die Copy, und weisser Text auf weissem Streifen ist weg. */ .has-tape .stage__content { --stage-content-reserve: calc( var(--stage-notch-height) + var(--tape-height) + var(--tape-rise) + var(--stage-content-gap) ); } /* Bewegung abgewählt: die Sprungmarke springt hart statt zu gleiten. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }