/* =========================================================================== Schräg „Terminal trifft Mech" — die angeschnittenen Farbflächen Portiert aus Schräg v1.0 (1337.kiwi), umgefärbt auf Signalrot und auf Dark-first umgestellt. Braucht tokens.css und components.css. Alles hängt unter `body.schraeg`: Klasse vom nehmen, und die Variante ist weg. DIE IDEE bleibt: Ein Winkel, überall derselbe. Farbflächen sind Bänder über die volle Bildschirmbreite, schräg abgeschnitten. Alle Schnitte steigen nach rechts an, nur die Fußkante läuft dagegen. Für diese Marke liest sich derselbe Mechanismus anders — weniger Aufkleberbogen, mehr angeschrägte Panzerplatte. Der Winkel gehört jetzt zur selben Familie wie die Warnstreifen-Schraffur (.hazard in components.css). UMGEFÄRBT gegenüber dem Original (die drei dokumentierten Stellen): 1. tokens.css — die Akzentwerte (dort erledigt). 2. Die Füllfarbe im SVG des Textmarkers, zweimal (Standard dunkel + [data-theme="light"]). Sie ist url-kodiert, %23 steht für #. 3. --band-bg — sehr dunkles, ins Rot gedrehtes Braun statt Grünschwarz. Dazu die Dark-first-Mechanik: Der Standard ist dunkel, hell hängt an `:root[data-theme="light"]` statt an prefers-color-scheme. =========================================================================== */ body.schraeg { /* Ein einziger Wert steuert die Steilheit ALLER Schnitte. */ --tilt: 3.4rem; /* Grund des dunklen Bandes: fast schwarz, ins Rot gedreht — neutral grau wirkte wie ein Fremdkörper. Gilt für beide Themen, das Band ist immer dunkel. */ --band-bg: #26120E; /* `clip` statt `hidden`: schneidet den 100vw-Überstand ab, ohne einen Scroll-Container zu erzeugen (der bräche position: sticky). */ overflow-x: clip; } /* --- Der Mechanismus ------------------------------------------------------ Jedes Band ist ein ::before hinter dem Inhalt (z-index: -1), 100vw breit und aus der Mitte heraus gezogen. */ body.schraeg .stage::before, body.schraeg .band-dark::before, body.schraeg .site-foot::before { content: ""; position: absolute; z-index: -1; left: 50%; width: 100vw; transform: translateX(-50%); } /* --- Bühne: Kopfzeile und Hero auf einer Fläche --------------------------- */ body.schraeg .stage { position: relative; padding-bottom: 3.2rem; margin-bottom: 3rem; } body.schraeg .stage::before { top: -60rem; bottom: 0; background: var(--accent-tint); clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--tilt)), 0 100%); } /* Seiten ohne .stage: der freistehende Hero bekommt dasselbe Band. Greift nur auf DIREKTE Kinder von
— steckt der Hero in einer .stage, lägen sonst zwei Flächen übereinander. */ body.schraeg main > .hero { position: relative; padding-bottom: 3rem; margin-bottom: 2.4rem; } body.schraeg main > .hero::before { content: ""; position: absolute; z-index: -1; left: 50%; width: 100vw; transform: translateX(-50%); top: -60rem; bottom: 0; background: var(--accent-tint); clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--tilt)), 0 100%); } body.schraeg .hero { margin-top: 1.8rem; } body.schraeg .hero h1 { font-size: 2.4rem; letter-spacing: -0.03em; } /* Auf der getönten Fläche bekommt die Karte den Seitengrund zurück und einen harten Schlagschatten IM AKZENT — dieselbe Sprache wie die Hauptschaltfläche. */ body.schraeg .stage .card { background: var(--paper); border-color: var(--ink); box-shadow: 6px 6px 0 var(--accent); } /* --- Der Textmarker hinter dem Akzentwort --------------------------------- Hintergrundbild statt clip-path oder Maske, box-decoration-break: clone gegen Schieflage beim Umbruch — die Gründe stehen im Original und gelten unverändert. Preis: Die Farbe steht IM SVG und existiert deshalb zweimal, einmal je Thema. Beim Umfärben BEIDE Stellen anfassen (%23 = #). */ body.schraeg .hero .accent { color: var(--ink); -webkit-box-decoration-break: clone; -moz-box-decoration-break: clone; box-decoration-break: clone; margin: 0 -0.14em 0 -0.1em; padding: 0 0.14em 0 0.1em; background-image: url('data:image/svg+xml;utf8,'); background-size: 100% 100%; background-repeat: no-repeat; } :root[data-theme="light"] body.schraeg .hero .accent { background-image: url('data:image/svg+xml;utf8,'); } /* --- Das dunkle Band ------------------------------------------------------ Der stärkste Inhalt bekommt die stärkste Fläche. Die Variablen werden für den Teilbaum neu belegt — alles darin dreht sich von selbst mit. Die Familie ist jetzt Rotbraun statt Grünschwarz; sie gilt für beide Themen, denn das Band ist immer dunkel. */ body.schraeg .band-dark { --paper: #170B09; --surface: #26120E; --ink: #F3E7E3; --muted: #B79A91; --line: #40241E; --accent-deep: #EE8578; --accent-tint: #2E1512; position: relative; color: var(--ink); background: transparent; border: 0; padding: 3.4rem 0 3.8rem; margin: 3rem 0; } body.schraeg .band-dark::before { top: 0; bottom: 0; background: var(--band-bg); clip-path: polygon(0 var(--tilt), 100% 0, 100% calc(100% - var(--tilt)), 0 100%); } body.schraeg .band-dark > * { position: relative; } /* --- Fuß: die einzige gegenläufige Kante ---------------------------------- */ body.schraeg .site-foot { position: relative; border-top: 0; margin-top: 5rem; padding-top: 4.4rem; padding-bottom: 2.6rem; } body.schraeg .site-foot::before { top: 0; bottom: 0; background: var(--accent-tint); clip-path: polygon(0 0, 100% var(--tilt), 100% 100%, 0 100%); } /* Die Fläche endet exakt an der Unterkante des Fußes — die Hülle nimmt unten ihren Innenabstand zurück, statt die Scrollfläche zu verlängern. */ body.schraeg .wrap { padding-bottom: 0; } /* --- Kleinteile, die die Sprache mitsprechen ----------------------------- */ /* Die Marke bekommt denselben Schnitt wie die Bänder. */ body.schraeg .brand-name::after { transform: skewX(-12deg); }