/* * Design-Tokens: die einzige Stelle, an der Werte stehen. * * Alle anderen Stylesheets lesen nur diese Custom Properties. Quelle der * Farben ist das Logo-SVG; Herkunft und Regeln stehen in * docs/planung/seitenaufbau-und-verlinkung.md (Gestaltung). Rollen und Mint * sind ergänzt. * * Reihenfolge der Ebenen (Cascade Layers): später genannt gewinnt. Die * Skeleton-Ebene liegt bewusst unter Basis, Layout und Komponenten, damit * deren Regeln (zum Beispiel der Fokusring) sie überstimmen und das Skelett * als Ganzes durch Entfernen von `data-skeleton` am verschwindet. */ @layer tokens, reset, skeleton, base, layout, components; @layer tokens { :root { /* ---- Farben: Rohwerte aus dem Logo ---- */ --color-school-navy: #24376C; --color-school-violet: #74529D; --color-school-blue: #3C8CCB; --color-school-green: #5AB992; --color-school-yellow: #F4C85B; --color-school-orange: #EE723D; --color-school-red: #E51848; /* Stopps des Regenbogenbands hinter dem Claim (weichen minimal ab). */ --color-gradient-blue: #3D8CCC; --color-gradient-violet: #75529D; --color-gradient-red: #E61B49; --color-gradient-orange: #EE733E; --color-gradient-yellow: #F4C85B; --color-gradient-green: #5CB992; /* Vereinsrot: nur für den Förderverein. */ --color-support-red: #A61A2D; /* Neutrale Werte. Papier ist der warme Grund (Dunkelblau darauf 10,7 : 1); Tinte ist Fließtext. */ --color-white: #FFFFFF; --color-paper: #F8F7F4; --color-paper-deep: #EDEBE4; /* Keine schwarze Schrift: Text ist überall das Dunkelblau aus dem Logo. */ --color-ink: var(--color-school-navy); /* Schrift auf Orange, ebenfalls Dunkelblau. Achtung: Dort erreicht es nur 3,9 : 1, AA für kleine Schrift ist das nicht; Text auf dieser Fläche nur groß und fett oder die Fläche nur als Marke nutzen (offen, siehe docs/architecture.md). */ --color-ink-deep: var(--color-school-navy); --color-ink-muted: #4B5575; /* Mint als Akzentschrift. Auf Papier nur für große Schrift (ab 24 px oder 19 px fett, Kontrast 3,7:1); kleine Akzente bleiben Dunkelblau. */ --color-mint-on-light: #2E8F6E; --color-mint-on-dark: #8FE0C6; /* ---- Farben: Rollen ---- */ --color-surface: var(--color-paper); --color-surface-raised: var(--color-white); --color-surface-sunken: var(--color-paper-deep); --color-surface-brand: var(--color-school-navy); --color-text: var(--color-ink); --color-text-muted: var(--color-ink-muted); --color-text-on-brand: var(--color-white); --color-accent-text: var(--color-mint-on-light); --color-accent-text-on-brand: var(--color-mint-on-dark); --color-link: var(--color-school-navy); --color-line: var(--color-school-navy); --color-line-soft: #C9CCD8; --color-focus: var(--color-school-navy); --color-placeholder: var(--color-paper-deep); /* Papierschnipsel im Menü: weiß, auch auf jeder Bandfarbe. */ --color-paper-scrap: var(--color-white); /* Abdunklung hinter dem Galerie-Modal. */ --color-backdrop: rgb(0 0 0 / 80%); /* Volle Maske (die Farbe zählt nicht, nur die Deckkraft). */ --mask-solid: linear-gradient(#000 0 0); /* ---- Kapitelfarben und passende Schrift darauf ---- Kontrast der Schrift auf der Fläche (Pills, Kacheln): Violett/Weiß 6,1 · Blau/Weiß 3,6 · Grün/Dunkelblau 4,8 · Gelb/Dunkelblau 7,2 · Orange/Dunkelblau 3,9 · Rot/Weiß 4,6. Blau und Orange bleiben für kleine Schrift unter AA (offen, siehe docs/architecture.md). Die Werte im Band mit Verlauf stehen dort. Farbe trägt nie allein Bedeutung: jedes Kapitel hat zusätzlich seinen Namen. */ --color-chapter-selber-machen: var(--color-school-violet); --color-chapter-frei-lernen: var(--color-school-blue); --color-chapter-in-bewegung: var(--color-school-green); --color-chapter-digital-lernen: var(--color-school-yellow); --color-chapter-zusammen-wachsen: var(--color-school-orange); --color-chapter-gemeinsam-schule: var(--color-school-red); --color-on-chapter-selber-machen: var(--color-white); /* Weiß auf Blau: 3,6 : 1, angenehmer als Dunkelblau (3,2 : 1), aber erst ab großer Schrift AA (offen, siehe docs/architecture.md). */ --color-on-chapter-frei-lernen: var(--color-white); --color-on-chapter-in-bewegung: var(--color-school-navy); --color-on-chapter-digital-lernen: var(--color-school-navy); --color-on-chapter-zusammen-wachsen: var(--color-ink-deep); --color-on-chapter-gemeinsam-schule: var(--color-white); /* Vorgabe, wenn eine Seite keinem Kapitel gehört. */ --color-chapter: var(--color-school-navy); --color-on-chapter: var(--color-white); /* ---- Regenbogenband (exakt wie im Logo) ---- */ --rainbow-height: 0.5rem; /* Streifen oben: weicher Verlauf in der Folge der Buchelemente im Logo bzw. der Kapitel (violett, blau, grün, gelb, orange, rot). Das letzte Sechstel bleibt rot, damit der weiße Sprachumschalter dort lesbar ist. */ --stripe-books: linear-gradient(90deg, var(--color-chapter-selber-machen) 0%, var(--color-chapter-frei-lernen) 16.667%, var(--color-chapter-in-bewegung) 33.333%, var(--color-chapter-digital-lernen) 50%, var(--color-chapter-zusammen-wachsen) 66.667%, var(--color-chapter-gemeinsam-schule) 83.333% 100%); /* Vorschau 09.10.2026: Regenbogen als Grund des Navbar-Bands (mit dem leichten Glanz oben wie beim einfarbigen Band). */ --bar-rainbow: linear-gradient(to bottom, color-mix(in srgb, var(--color-white) var(--bar-highlight), transparent), transparent), var(--stripe-books); --gradient-rainbow: linear-gradient(90deg, var(--color-gradient-blue) 0%, var(--color-gradient-violet) 20%, var(--color-gradient-red) 40%, var(--color-gradient-orange) 60%, var(--color-gradient-yellow) 80%, var(--color-gradient-green) 100%); /* ---- Schrift (Entscheidung 9. Oktober 2026), beide selbst gehostet: Überschriften Asap, Fließtext und Bedienelemente M PLUS Rounded 1c (deckt neben Lateinisch auch Kyrillisch, Griechisch, Hebräisch und Vietnamesisch ab, hat aber keine Kursive) ---- */ --font-heading: "Asap", system-ui, -apple-system, "Segoe UI", sans-serif; /* Laufweite der Überschriftschrift (Breitenachse der variablen Schrift). */ --font-heading-stretch: 100%; /* OpenType-Funktionen der Überschriftschrift: ss01 = einstöckiges g. */ --font-heading-features: "ss01"; --font-body: "M PLUS Rounded 1c", system-ui, -apple-system, "Segoe UI", sans-serif; --weight-regular: 400; --weight-medium: 500; --weight-bold: 700; --weight-extrabold: 800; --leading-body: 1.6; --leading-heading: 1.2; /* Kompakte Zeilen in Bedienelementen (Menü, Servicemenü) und einzeilige Ziele (Sprachumschalter). */ --leading-tight: 1.2; --leading-none: 1; /* Unterstreichungen: Abstand zur Grundlinie und Stärke, in em, damit sie mit der Schrift wachsen. */ --underline-offset-s: 0.15em; --underline-offset-m: 0.2em; --underline-offset-l: 0.25em; --underline-offset-xl: 0.3em; --underline-thickness-em: 0.1em; --tracking-caps: 0.06em; /* Engere Sperrung für große, fette Versalien (Bereichsüberschriften). */ --tracking-caps-tight: 0.03em; /* Fluide Stufen: der rem-Anteil hält die Skalierbarkeit durch die Nutzereinstellung, der vi-Anteil sorgt für das Mitwachsen. */ /* xs, s und m am 9. Oktober 2026 um gut ein Pixel verkleinert: xs 11,5 bis 12 px, s 12,5 bis 14 px, m (Fließtext) 15 bis 17 px; das Minimum gilt bis 320 px Fensterbreite, das Maximum ab 1200 px (m) bzw. 1390 px (s, xs). Zwei Pixel weniger wurden ausprobiert und waren zu klein. */ --text-xs: clamp(0.71875rem, 0.709rem + 0.047vi, 0.75rem); /* nur Kleingedrucktes */ --text-s: clamp(0.78125rem, 0.753rem + 0.14vi, 0.875rem); --text-m: clamp(0.9375rem, 0.892rem + 0.2273vi, 1.0625rem); --text-l: clamp(1.2rem, 1.1rem + 0.5vi, 1.45rem); --text-xl: clamp(1.45rem, 1.25rem + 0.95vi, 1.9rem); --text-xxl: clamp(1.75rem, 1.4rem + 1.6vi, 2.5rem); --text-xxxl: clamp(2.1rem, 1.5rem + 2.8vi, 3.4rem); --text-display: clamp(2.6rem, 1.7rem + 4.2vi, 4.8rem); /* nur großer Kopf */ /* ---- Abstände: modulare Skala, Verhältnis 1,5 ---- */ --ratio: 1.5; --space-m: 1rem; --space-s: calc(var(--space-m) / var(--ratio)); --space-xs: calc(var(--space-s) / var(--ratio)); --space-xxs: calc(var(--space-xs) / var(--ratio)); --space-l: calc(var(--space-m) * var(--ratio)); --space-xl: calc(var(--space-l) * var(--ratio)); --space-xxl: calc(var(--space-xl) * var(--ratio)); --space-xxxl: calc(var(--space-xxl) * var(--ratio)); --space-display: calc(var(--space-xxxl) * var(--ratio)); /* Eckenrundung aller Kästen, nach dem Claim-Band im Logo: Dort ist der Radius 5,18 von 38,92 Einheiten Bandhöhe (gut 13 Prozent), beim großen Logo auf dem Desktop gut 4 px. Das entspricht fast der kleinsten Abstandsstufe (--space-xxs, rund 4,7 px), deshalb dieselbe Stufe. Kein Prozentwert, weil border-radius in Prozent an Breite und Höhe des Kastens hängt und große Kästen elliptisch rundet. Randständige Kästen runden nur die dem Inhalt zugewandte Seite. */ --radius-box: var(--space-xxs); /* Seitenrand der Bedienleisten (Navbar, Telefon-Menü): wächst mit dem Fenster, bleibt rem-gebunden. */ --gutter: clamp(1rem, 0.5rem + 3vi, 2.5rem); /* Randabstand des Inhalts: fest je Fensterbreite, der Inhalt wird so breit, wie dazwischen Platz ist (keine Höchstbreite; Fließtext bleibt durch --measure lesbar). Telefon: --space-l. Ab 48rem (Randspalte "Auf einen Blick") die Breite der Randspalte plus eine Stufe, die fließend von --space-s (bei 48rem, Tablet) bis --space-xxl (bei 90rem, Desktop) wächst: Tablet gut 106 px, Desktop 150 px, also gut das Anderthalbfache der Randspalte. Die Gerade durch beide Punkte: Steigung (3,375 - 0,667) rem / 42 rem = 6,448vi, Achsenabschnitt 0,667rem - 48 × 0,06448rem = -2,428rem. Beidseitig gleich, damit der Inhalt mittig bleibt. */ --content-edge: var(--space-l); /* ---- Breiten ---- */ --measure: 65ch; --measure-narrow: 42ch; --tap-target: 2.75rem; /* Vorgaben der Every-Layout-Primitive; einzelne Stellen überschreiben sie mit einem der Tokens darunter. */ --layout-sidebar: 18rem; --layout-threshold: 30rem; --layout-grid-min: 16rem; --layout-reel-item: 22rem; --layout-reel-item-max: 85%; /* Kacheln im Raster (Footer-Baum, Weiter, Mehr in diesem Kapitel) und Bildspalte neben Text. */ --grid-min-tile: 14rem; /* Mindestbreite einer Meldung in "Gut zu wissen": darunter bricht sie in die nächste Zeile um. */ --news-item-min: var(--layout-grid-min); --sidebar-media: 20rem; /* Mindestbreite der Kapitel-Dropdowns unter dem Band. */ --dropdown-min: 20rem; /* Galerie und Audio in Beiträgen. */ --gallery-caption-max: 20rem; --modal-max-inline: min(90vi, 60rem); --modal-max-block: 90vh; --audio-max: 40rem; /* Visuell versteckt, aber vorgelesen (Standardmuster). */ --visually-hidden-size: 1px; /* ---- Maße des Grundgerüsts ---- */ /* Navbar mit Wiege für das Signet, nach der Vorlage der Nutzerin: Die Signet-Scheibe drückt die Unterkante des Bands nach unten heraus wie ein Gummiband; die Oberkante bleibt gerade, über der Scheibe bleibt Luft (mindestens 5 px). Die Kontur ist img/form/navbar-wiege.svg, erzeugt mit scripts/navbar_wiege.py aus denselben Maßen (ändert man sie, dort mitändern und neu erzeugen). */ --navbar-height: 3.5rem; --navbar-cradle-lift: 0rem; --navbar-cradle-width: 32.14rem; --navbar-cradle-height: 6.825rem; /* So weit ragt die Wiege unter das Band; der folgende Bereich hält diesen Abstand frei, damit sie nie Text überdeckt. */ --navbar-cradle-overhang: calc(var(--navbar-cradle-height) - var(--navbar-cradle-lift) - var(--navbar-height)); /* Papierscheibe mit dem Signet; ihre Mitte liegt so weit unter der Oberkante des Bands, dass über ihr 0,375rem Luft bleibt. */ --signet-circle: 6rem; --signet-center: 3.375rem; --logo-height-small: 3rem; --logo-aspect: calc(988 / 386); --service-bar-size: 4.5rem; --service-bar-inset: env(safe-area-inset-bottom, 0px); /* Breite der Randspalte "Auf einen Blick" ab Tablet. */ --service-edge-size: 6rem; /* Höhe eines Links in der Randspalte (Symbol und Beschriftung) und der Abstand, mit dem die Spalte beim Scrollen unter dem Band klebt. */ --service-link-height: calc(var(--tap-target) + var(--icon-size) + var(--space-s)); --service-stuck-top: calc(var(--navbar-height) + var(--space-m)); --icon-size: 1.5rem; /* Kapitelmarken im Menü (Buch und Dreieck aus dem Logo), in em, damit sie mit dem Menütext wachsen; Seitenverhältnisse aus den SVG. */ --menu-book-size: 1.4em; --menu-book-aspect: calc(108.25 / 84.95); --menu-triangle-size: 0.75em; --menu-triangle-aspect: calc(78.8 / 48.37); /* Sprachumschalter im Streifen oben. */ --language-target-min: 1.25rem; --language-padding: 0.15em; /* Fensterhöhe: svh, wo bekannt (mobile Adressleiste), sonst vh. Die dynamische Höhe (dvh) folgt der Adressleiste, für Mindesthöhen und das Vollbild-Menü. */ --viewport-block: 100vh; --viewport-block-dynamic: 100vh; /* Platz, den der Kopf des News-Bereichs im ersten View braucht. Der Kopf der Startseite (Hero) füllt, was nach Navbar, News-Kopf und (auf dem Telefon) Daumenleiste von der Fensterhöhe bleibt; rem-gebunden, wächst also mit der Schrift. */ --news-head-height: 7rem; --hero-height: max(calc(var(--logo-height-small) * 4), calc(var(--viewport-block) - var(--navbar-height) - var(--navbar-cradle-overhang) - var(--news-head-height) - var(--bar-clearance))); /* Großes Logo: breit, solange der Platz reicht (Telefon: fast die ganze Breite), gedeckelt durch ein ruhiges Maximum und durch die Höhe des Heros, damit Luft um das Logo bleibt. */ --logo-width-large: max(calc(var(--logo-height-small) * var(--logo-aspect) * var(--ratio)), min(100vi - 2 * var(--content-edge), 52rem, (var(--hero-height) - 2 * var(--space-xl)) * var(--logo-aspect))); --logo-height-large: calc(var(--logo-width-large) / var(--logo-aspect)); /* Regenbogen oben: mindestens so dick wie das Band im großen Logo (38,92 von 386,05 Einheiten, gut 10 Prozent der Logohöhe). */ --rainbow-stripe: max(1.5rem, calc(var(--logo-height-large) * 0.101)); /* Großes Logo optisch mittig: das runde Mandala links wirkt leichter als der Wortblock, das Logo ist rechnerisch mittig, wirkt aber nach rechts gerückt. Verschiebung nach links, in Prozent der Logobreite (zum Abstimmen: -2% bis -6%). Nur eine Transformation, sie verändert das Layout nicht. */ --logo-optical-shift: -4%; /* Signet in der Navbar (Seitenverhältnis 500 / 447,97). Gut erkennbar, etwa so hoch wie das Innenmaß der Navbar. */ --signet-height: 3rem; --signet-aspect: calc(500 / 447.97); /* Heldentier des Fördervereins (Vogel, Seitenverhältnis 470,5 / 532,5). Die Höhe ist ein Anteil des Heros (--hero-animal-share), begrenzt durch den freien Platz: entweder unterhalb des Logos (Telefon, Tablet) oder rechts neben dem Logo, links der Randspalte (breite Fenster). Es überdeckt das Logo nie. Zum Abstimmen: Anteil und Abstand. */ --hero-animal-aspect: calc(470.5 / 532.5); --hero-animal-share: 0.5; --hero-animal-gap: var(--space-m); --hero-animal-overlap: 0.5rem; --hero-animal-inset-end: var(--gutter); --hero-animal-room-below: max(0px, calc((var(--hero-height) - var(--logo-height-large)) / 2 + var(--hero-animal-overlap) - var(--hero-animal-gap))); --hero-animal-room-beside: max(0px, calc(50vi - var(--hero-animal-inset-end) - var(--logo-width-large) / 2 - var(--hero-animal-gap))); --hero-animal-height: min(calc(var(--hero-height) * var(--hero-animal-share)), max(var(--hero-animal-room-below), calc(var(--hero-animal-room-beside) / var(--hero-animal-aspect)))); /* ---- Formen ---- */ --radius-pill: 999px; --border-thin: 1px; --border-thick: 3px; --focus-ring-width: 3px; --focus-ring-offset: 2px; /* Tiefe, ruhig und nur an Navbar und Signetkreis (und ihrem Dropdown): weiche Schatten in Dunkelblau und ein sehr leichter Verlauf, oben heller. Der Verlauf entsteht aus der aktuellen Bandfarbe (--bar-bg, gesetzt in frame.css, dort stehen auch die Verläufe, weil var() in Custom Properties am Element der Definition aufgelöst wird) und folgt deshalb der Kapitelfarbe. Der Anteil Weiß ist klein gewählt, damit Schrift auf jeder Bandfarbe lesbar bleibt (gemessen am ungünstigsten Punkt, siehe docs/architecture.md). */ /* Papierschnipsel der Kapitel im Menü: sechs unregelmäßige Zuschnitte ("von Hand ausgeschnitten") und sechs leichte Schräglagen, fest je Kapitel (base.css), dazu ein kurzer Schatten, der der Schnittkante folgt. Kein Zettel gleicht einem anderen. Jede Ecke ist durch drei dicht liegende Punkte leicht gerundet (rund 2 px Radius bei einem typischen Zettel), wie mit der Schere nicht ganz spitz geschnitten. */ --paper-cut-1: polygon(1.14% 11.52%, 1.35% 7.32%, 2.25% 5.77%, 31.75% 0.23%, 33.00% 0.09%, 34.25% 0.14%, 68.75% 3.86%, 70.00% 3.92%, 71.25% 3.83%, 97.75% 0.17%, 98.72% 1.43%, 99.11% 5.53%, 99.89% 44.47%, 99.91% 49.98%, 99.76% 55.45%, 98.24% 90.55%, 97.75% 94.67%, 96.75% 96.15%, 65.25% 99.85%, 64.00% 99.92%, 62.75% 99.82%, 31.25% 95.18%, 30.00% 95.10%, 28.75% 95.21%, 1.25% 99.79%, 0.36% 98.58%, 0.20% 94.52%, 1.80% 51.48%, 1.91% 45.99%, 1.86% 40.48%); --paper-cut-2: polygon(0.00% 7.56%, 0.31% 3.41%, 1.25% 2.08%, 43.75% 4.92%, 45.00% 4.95%, 46.25% 4.89%, 98.75% 0.11%, 99.60% 1.37%, 99.67% 5.35%, 97.33% 42.65%, 97.16% 48.01%, 97.31% 53.38%, 99.69% 94.62%, 99.61% 98.62%, 98.75% 99.87%, 53.25% 95.13%, 52.00% 95.06%, 50.75% 95.13%, 4.25% 99.87%, 3.22% 98.64%, 2.64% 94.67%, 0.36% 60.33%, 0.09% 54.94%, 0.00% 49.44%); --paper-cut-3: polygon(2.72% 5.41%, 3.24% 1.37%, 4.25% 0.07%, 55.75% 2.93%, 57.00% 3.01%, 58.25% 3.09%, 96.75% 5.91%, 97.74% 7.35%, 98.20% 11.49%, 99.80% 56.51%, 99.81% 61.87%, 99.45% 66.98%, 96.55% 93.02%, 95.83% 96.77%, 94.75% 98.05%, 43.25% 99.95%, 42.00% 99.95%, 40.75% 99.85%, 1.25% 95.15%, 0.34% 93.65%, 0.10% 89.46%, 0.90% 43.54%, 1.05% 38.03%, 1.28% 32.59%); --paper-cut-4: polygon(0.09% 5.54%, 0.33% 1.44%, 1.25% 0.23%, 20.75% 3.77%, 22.00% 3.92%, 23.25% 3.90%, 59.75% 1.10%, 61.00% 1.07%, 62.25% 1.19%, 98.75% 6.81%, 99.59% 8.28%, 99.62% 12.30%, 98.38% 29.70%, 98.14% 35.05%, 98.19% 40.49%, 99.81% 88.51%, 99.64% 92.68%, 98.75% 94.22%, 78.25% 97.78%, 77.00% 97.93%, 75.75% 97.94%, 39.25% 96.06%, 38.00% 96.05%, 36.75% 96.15%, 5.25% 99.85%, 4.21% 98.66%, 3.58% 94.77%, 1.42% 68.23%, 1.08% 62.92%, 0.91% 57.46%); --paper-cut-5: polygon(2.15% 8.52%, 2.35% 4.36%, 3.25% 2.92%, 48.75% 0.08%, 50.00% 0.03%, 51.25% 0.05%, 94.75% 1.95%, 95.86% 3.13%, 96.71% 6.59%, 99.29% 23.41%, 99.73% 28.18%, 99.63% 33.31%, 97.37% 65.69%, 97.18% 71.00%, 97.37% 76.31%, 98.63% 94.69%, 98.60% 98.64%, 97.75% 99.88%, 59.25% 96.12%, 58.00% 96.06%, 56.75% 96.12%, 19.25% 99.88%, 18.00% 99.83%, 16.76% 99.45%, 1.24% 92.55%, 0.39% 90.79%, 0.32% 86.63%, 2.68% 46.37%, 2.88% 40.96%, 2.85% 35.48%); --paper-cut-6: polygon(3.15% 9.06%, 4.10% 5.99%, 5.25% 4.89%, 37.75% 2.11%, 39.00% 2.01%, 40.25% 1.94%, 80.75% 0.06%, 82.00% 0.08%, 83.25% 0.28%, 98.75% 3.72%, 99.66% 5.31%, 99.90% 9.54%, 99.10% 51.46%, 98.91% 56.90%, 98.52% 62.13%, 95.48% 94.87%, 94.81% 98.70%, 93.75% 99.92%, 48.25% 97.08%, 47.00% 97.03%, 45.75% 97.05%, 1.25% 98.95%, 0.40% 97.66%, 0.37% 93.69%, 1.63% 75.31%, 1.85% 69.96%, 1.76% 64.55%, 0.24% 29.45%, 0.27% 24.35%, 0.85% 19.94%); --paper-tilt-1: -2deg; --paper-tilt-2: 1.5deg; --paper-tilt-3: -1deg; --paper-tilt-4: 2deg; --paper-tilt-5: -1.5deg; --paper-tilt-6: 1deg; --paper-pad-block: var(--space-xs); --paper-pad-inline: var(--space-s); --shadow-paper: drop-shadow(0 0.1rem 0.15rem rgb(18 29 61 / 40%)); --shadow-raised: 0 1px 2px rgb(18 29 61 / 12%), 0 4px 12px rgb(18 29 61 / 10%); /* Schatten der ganzen Form (Band und Wölbung) als drop-shadow-Filter, damit er der Kontur folgt; innen leicht vertieft die Scheibe. */ --shadow-bar: drop-shadow(0 0.15rem 0.3rem rgb(18 29 61 / 35%)); --shadow-disc: inset 0 0.1rem 0.3rem rgb(18 29 61 / 22%); /* Ring um die Signet-Scheibe: keine Farbfläche, das Band scheint durch. Erhaben wirkt die Scheibe durch einen weichen Schattenring rundherum und ein Licht oben auf dem Rand, das nach unten ausläuft. Dazu eine sehr zarte Einfassungslinie (6 % Deckkraft). */ --signet-ring: 0.25rem; /* Grund der Scheibe hinter dem Signet: der helle Papiergrund, deckend. Halb durchsichtig (Bücher verschwimmen mit der Bandfarbe) und Dunkelblau mit weißem L wurden am 9. Oktober 2026 verworfen. */ --signet-disc: var(--color-surface); /* Abstand der Bücherelemente zum Rand der Scheibe (links, rechts, oben). */ --signet-gap: 0.25rem; --signet-ring-glow: color-mix(in srgb, var(--color-white) 55%, transparent); --signet-ring-glow-end: 45%; --shadow-ring: 0 0.15rem 0.45rem rgb(18 29 61 / 35%), 0 0 0 var(--border-thin) rgb(18 29 61 / 6%); --bar-highlight: 10%; --bar-shade: 10%; /* ---- Z-Ebenen ---- */ --z-base: 0; --z-navbar: 10; --z-panel: 20; --z-service: 30; --z-skip: 100; /* ---- Bewegung ---- */ --duration-fast: 120ms; --duration-base: 240ms; --duration-slow: 600ms; --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1); /* ---- Skelett: dünne dunkelblaue Linien um jeden Bereich ---- Eigene Ebene (`@layer skeleton`, Datei skeleton.css). Abschalten: das Attribut `data-skeleton` am entfernen (Block `html_attributes` in base.html) oder die Breite auf 0 setzen. */ --skeleton-line-width: 1px; --skeleton-line-color: var(--color-school-navy); --skeleton-line: var(--skeleton-line-width) solid var(--skeleton-line-color); } } @layer tokens { @media (min-width: 48rem) { :root { --content-edge: calc(var(--service-edge-size) + clamp(var(--space-s), -2.428rem + 6.448vi, var(--space-xxl))); --hero-animal-inset-end: var(--content-edge); } } @supports (block-size: 100svh) { :root { --viewport-block: 100svh; } } @supports (block-size: 100dvh) { :root { --viewport-block-dynamic: 100dvh; } } }