/* =========================================================================== Schräg v1.0 — die Gestaltungsvariante mit angeschnittenen Farbflächen Braucht tokens.css und components.css. Alles hängt unter `body.schraeg`: Nimmt man die Klasse vom , ist die ganze Variante weg, ohne dass eine Zeile gelöscht werden muss. Das ist Absicht — so lässt sie sich ausprobieren und wieder zurücknehmen. DIE IDEE Ein Winkel, überall derselbe. Farbflächen sind nicht Kästen in der Inhaltsspalte, sondern Bänder über die volle Bildschirmbreite, schräg abgeschnitten. Die Spalte bleibt, wo sie war — nur der Grund unter ihr bewegt sich. Die Seite bekommt dadurch eine Gliederung über die Form statt nur über Schriftgrößen. Alle Schnitte steigen nach rechts an; sie sind parallel, wie mit einem einzigen Schnitt durch den Stapel. Nur die Fußkante läuft dagegen — als Schlusspunkt. Eine Ausnahme von einer strengen Regel fällt auf, drei Ausnahmen wären Beliebigkeit. WAS MAN IM MARKUP BRAUCHT Siehe markup.md. Kurz: , ein .stage um Kopf und Hero, optional .band-dark um den wichtigsten Abschnitt, und ein .site-foot. =========================================================================== */ body.schraeg { /* Ein einziger Wert steuert die Steilheit ALLER Schnitte. Größer = frecher. 3.4rem ist der Wert von 1337.kiwi. */ --tilt: 3.4rem; /* Grund des dunklen Bandes. Kein Token, weil er nur hier vorkommt. */ --band-bg: #16220C; /* Ein 100vw breites Band ist minimal breiter als der Inhaltsbereich, sobald eine Bildlaufleiste da ist. `clip` schneidet den Überstand ab, ohne — anders als `hidden` — einen Scroll-Container zu erzeugen. Der Unterschied ist wichtig: Ein Scroll-Container bricht `position: sticky` bei allem, was darin liegt. */ overflow-x: clip; } @media (prefers-color-scheme: dark) { body.schraeg { --band-bg: #1D2E10; } } /* --- Der Mechanismus ------------------------------------------------------ Jedes Band ist ein ::before hinter dem Inhalt (z-index: -1), 100vw breit und aus der Mitte heraus gezogen. Es ist damit für Text und Klicks nicht im Weg. `left: 50%` plus `translateX(-50%)` statt `left: 0; right: 0`, weil das Elternelement die schmale Inhaltsspalte ist — das Band soll aber über den ganzen Bildschirm laufen. */ 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 --------------------------- Die Fläche beginnt weit oberhalb der Seite (top: -60rem). Ihre Oberkante ist gerade und liegt außerhalb des Sichtfelds — nur die Unterkante ist geschnitten. Das erspart es, die Höhe der Kopfzeile zu kennen, die je nach Anmeldestatus und Fensterbreite anders ausfällt. */ 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 haben trotzdem einen Hero. Damit die Kopfzeile überall auf einer Fläche sitzt, bekommt auch der freistehende Hero das Band. Der Selektor greift bewusst nur auf DIREKTE Kinder von
: Steckt der Hero in einer .stage, ist er ausgenommen — sonst lägen zwei Flächen übereinander und die Kante würde doppelt. */ 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 wäre eine Karte in --surface fast unsichtbar. Sie bekommt den hellen Grund zurück und einen harten Schlagschatten IM AKZENT — das hebt sie ab und wiederholt die Sprache der 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 -------------------------------- Ein sauberes Rechteck sähe aus wie eine Browser-Textmarkierung. Die leicht schiefen Kanten machen daraus einen Strich, den jemand gezogen hat. Drei Entscheidungen, die zusammenhängen und je einen Fehler vermeiden: 1. Der Strich ist der HINTERGRUND des Wortes, kein Kasten dahinter. Bricht die Überschrift um, zerfällt ein Inline-Element in mehrere Zeilenfragmente — einen Hintergrund bekommt jedes davon einzeln. Ein absolut gesetztes ::before kennt dagegen nur EIN Rechteck über alle Fragmente, und am Telefon lag der Strich dann schräg über dem Umbruch. 2. `box-decoration-break: clone`, sonst wird die Dekoration über die Fragmente „aufgeschnitten" statt je Fragment wiederholt — dieselbe Schieflage käme zurück. 3. Die Form kommt aus einem Hintergrundbild, nicht aus clip-path oder einer Maske: clip-path schneidet das Element als Ganzes, eine Maske läge über der Schrift und würde sie blass machen. Preis: Die Farbe steht im SVG und muss für den dunklen Modus ein zweites Mal gesetzt werden. Beim Umfärben also BEIDE Stellen anfassen — die Füllfarbe ist url-kodiert (%23 statt #). */ body.schraeg .hero .accent { color: var(--ink); -webkit-box-decoration-break: clone; -moz-box-decoration-break: clone; box-decoration-break: clone; /* Seitlich über den Text hinaus wie ein echter Marker – über negative Ränder, damit der Textfluss nicht verrutscht. */ 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; } @media (prefers-color-scheme: dark) { 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. Beide Kanten sind geschnitten und laufen parallel zur Bühne darüber; dazwischen bleibt ein gleichmäßig breites Band Papier stehen. Der Trick: Die Farben werden nicht einzeln überschrieben, sondern die VARIABLEN für diesen Teilbaum neu belegt. Alles darin — Karten, Links, Nebentext, Tabellen — dreht sich von selbst mit, ohne dass ein einziges Element eigens angefasst wird. Wer das Band woanders einsetzt, muss nichts nachziehen. */ body.schraeg .band-dark { --paper: #0E1608; --surface: #16220C; --ink: #EDF6E0; --muted: #9CB183; --line: #2E4020; --accent-deep: #A9E35A; --accent-tint: #1B2A0E; 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); /* Beide Kanten geschnitten, parallel zur Bühne darüber. */ clip-path: polygon(0 var(--tilt), 100% 0, 100% calc(100% - var(--tilt)), 0 100%); } /* Der Inhalt braucht Luft zu den Schnitten, sonst rutscht Text in die Spitze. */ body.schraeg .band-dark > * { position: relative; } /* --- Fuß: die Seite endet, wie sie angefangen hat ------------------------- Die einzige gegenläufige Kante der Seite. Alle anderen Schnitte steigen nach rechts an — hier fällt er, und das liest sich als Schlusspunkt statt als weitere Wiederholung. */ 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. Sie darüber hinaus zu ziehen, damit unten sicher kein Papier durchblitzt, wäre der bequeme Weg — aber ein absolut positioniertes Element unterhalb des Inhalts verlängert die Scrollfläche, und die Seite ließe sich ins Leere weiterscrollen. Stattdessen nimmt die Hülle unten ihren Innenabstand zurück. */ 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); }