/* ============================================================================
BOILERRAVE — Design und Layout
----------------------------------------------------------------------------
Übernahme der bestehenden boilerrave.de (WordPress mit Elementor und den
Clubinio-Plugins, dasselbe Theme wie roxy-hp; technische Vorlage drip-hp,
Karte, Formular und Eventseite aus famous-hp, Fotoseite aus roxy-hp).
Maße und Farben der übernommenen Bereiche sind an boilerrave.de gemessen
und stehen in referenz/*.json; tools/abgleich.py vergleicht dagegen.
Wo ein Wert aus der Vorlage stammt und hier nicht nachgemessen werden
konnte (FAQ, Albumkarte — beides heute ohne Inhalt), steht es dabei.
**Struktur vom System, Marke vom Original.** Die Klassen sind die des
Systems (cosmopolar-hp ∩ top10-singen-hp: .huelle, .abschnitt*,
.kopfzeile, .knopf*, .karte*, .seitenkopf*, .form/.feld, .faq, .fuss*).
Was das System nicht hat, steht unter einem Namen nach seiner Aufgabe
und ist in docs/README.md als Rückgabe an die Vorlage vermerkt. Die
Werte des Themes (dasselbe wie auf roxy.club) kommen aus der Messung.
Schwarzer Grund, weiße Schrift, Milker in Versalien für Titel und Menü,
Titillium für Text, Akzent Gelb #ffea00 mit schwarzer Schrift, eckige
Knöpfe, Karten mit 20px Rundung.
Keine Inline-Styles. Die Content-Security-Policy führt style-src 'self'
ohne unsafe-inline; was aus der API kommt, wird als oder
textContent gesetzt, nie als style-Attribut.
========================================================================== */
/* ------------------------------------------------------------- Schriften -- */
/* **Dieselben Dateien und dieselben Deklarationen wie auf boilerrave.de**
(`/wp-content/uploads/2026/04/`). Siehe assets/fonts/LIZENZEN.md.
**Milker hat nur einen Schnitt und ist als `normal` deklariert** — wie im
Original. Wo 800 oder 900 verlangt wird (Menü, Titel, Knöpfe), malt der
Browser künstlich fett, dort wie hier; eine eigene Deklaration mit
Gewicht 900 schaltete das ab und machte jede Zeile schmaler.
Titillium 500 (Datumszeile der Eventseite) fällt wie im Original auf 400. */
@font-face { font-family: 'Milker'; src: url('../fonts/milker.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Titillium'; src: url('../fonts/titillium-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Titillium'; src: url('../fonts/titillium-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
/* ----------------------------------------------------------------- Token -- */
:root {
/* Flächen — gemessen auf boilerrave.de (referenz/*.json). */
--nacht: #000000; /* Seitengrund */
--kopf: #141414; /* Kopfleiste */
--menu: #161616; /* aufgeklapptes Menü auf dem Telefon */
--karte: #111111; /* Eventkarte */
--karte-bild: #0a0a0a; /* Fläche hinter dem Flyer */
--fuss: #0c0c0c; /* Fußbereich */
/* **Zwei Hausschriften, gemessen:** Milker für Menü, Titel und Knöpfe,
Titillium Web (im Original unter dem Familiennamen „Titillium") für
jeden Text. Wo das Theme des Originals Poppins verlangt, lädt es keine
Datei — dort malt der Browser eine Ersatzschrift (Sprunglink,
Zwischentitel der Datenschutzerklärung, Albumseite). Ein Versehen,
keine Gestaltung: --schrift-poppins zeigt hier auf Titillium
(.auftrag.md, „Poppins im Original"). */
--schrift-grund: 'Titillium', sans-serif;
--schrift-display: 'Milker', sans-serif;
--schrift-poppins: 'Titillium', sans-serif;
--schrift-text: 'Titillium', sans-serif;
--tinte: #ffffff;
--tinte-rgb: 255 255 255;
--tinte-still: #9a9a9a; /* Standzeile, Etiketten */
/* **Akzent Gelb `#ffea00`, nicht der Clubinio-Wert `#eeff00`.** Gemessen
an Menü, Knöpfen, Unterzeilen und Fußlinks (44 Textstellen, 6 Flächen
bei 1440) — das ist, was ein Gast sieht. Der Clubinio-Wert steuert nur
die Shop-Widgets. **Schwarze Schrift auf den Knöpfen**, wie im
Original (18,9:1). */
--akzent: #ffea00;
--akzent-rgb: 255 234 0;
--akzent-tinte: #000000;
/* Gelb als Schrift auf Schwarz: 17,6:1 — keine Abdunklung nötig, Fläche
und Schrift tragen denselben Ton. */
--akzent-text: #ffea00;
--akzent-flaeche: #ffea00;
/* Aktiver Menüpunkt, der auf dem Foto steht (schwebende Kopfzeile wie
cosmopolar.com). Geprüft mit tools/bildkontrast.js an den gemalten
Pixeln aller Seitenköpfe. */
--akzent-hell: #ffea00;
--link-text: #cc3366;
/* Systemtoken der Eventkarte (cosmopolar-hp ∩ top10-singen-hp). Rundung
gemessen (20px), Leise-Schrift weiß wie im Original („zzgl.
Systemgebühr", Termin), Abriss und Schatten wie im Kanon. */
--r-karte: 20px;
--abriss: 46px;
--linie: #2a2a2a;
--tinte-leise: #ffffff;
--schatten: 0 1px 2px rgb(0 0 0 / 30%), 0 8px 24px rgb(0 0 0 / 35%);
--schatten-hoch: 0 2px 4px rgb(0 0 0 / 35%), 0 16px 40px rgb(0 0 0 / 45%);
--t-h3: 1.5625rem; /* 25px — Kartentitel, gemessen (boilerrave.de) */
--t-klein: 0.8125rem; /* 13px — Ort und Termin, gemessen (boilerrave.de) */
/* Seitenrand von Kopf und Fuß: 8 % der Breite, unter 1025px 5 %. */
--rand-kopf: 8%;
/* Hülle: Breite und Seitenrand. Jeder Abschnitt setzt beides für sich —
das Original fährt je Abschnitt eigene Spaltenbreiten (1080 im
„Über uns", 1140 in der Eventliste, volle Breite unter den Karten). */
--breite: 1160px;
--gutter: 10px;
--kurve: cubic-bezier(0.32, 0.72, 0, 1);
--ausruf: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23ffffff' d='M7 2h2v7H7zM7 11h2v2H7z'/%3E%3C/svg%3E");
--haken: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' d='M3.2 8.6l3.1 3.1 6.5-6.9'/%3E%3C/svg%3E");
/* Pfeil der Knöpfe — Pfad des Originals (Font Awesome „long-arrow-alt-right"). */
--pfeil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M313.941 216H12c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h301.941v46.059c0 21.382 25.851 32.09 40.971 16.971l86.059-86.059c9.373-9.373 9.373-24.569 0-33.941l-86.059-86.059c-15.119-15.119-40.971-4.411-40.971 16.971V216z'/%3E%3C/svg%3E");
/* Kopfhöhe wie auf cosmopolar.com: 82px, unter 900px 80px. Hero,
Seitenkopf und Ankersprung rechnen damit — weicht der Wert von der
tatsächlichen Höhe ab, verschiebt sich der Inhalt um die Differenz. */
--kopf-hoehe: 82px;
}
@media (max-width: 1024px) { :root { --rand-kopf: 5%; } }
@media (max-width: 899px) { :root { --kopf-hoehe: 80px; } }
/* --------------------------------------------------------------- Grundlage -- */
*, *::before, *::after { box-sizing: border-box; }
/* Sicherheitsnetz gegen seitliches Verschieben. `clip`, nicht `hidden`:
`overflow: hidden` an einem Vorfahren setzt `position: sticky` außer
Kraft, und die Kopfzeile klebt nicht mehr. */
html, body { overflow-x: clip; }
/* `hidden` muss gewinnen. Der Browser setzt dafür nur `display: none` mit
schwacher Spezifität — jede eigene display-Regel schlägt es. Genau das
ist passiert: `.knopf { display: inline-flex }` hat ein `hidden` am
Lounge-Knopf überstimmt, und der stand auf jeder Eventseite. */
[hidden] { display: none !important; }
html {
scroll-behavior: smooth;
/* Anker sollen nicht unter der festen Kopfzeile landen. */
scroll-padding-top: calc(var(--kopf-hoehe) + 1rem);
}
/* Wer Bewegung abbestellt hat, bekommt auch kein sanftes Scrollen. */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
body {
margin: 0;
background: var(--nacht);
color: var(--tinte);
font-family: var(--schrift-grund);
/* 16px/24px — gemessen an jedem Container des Originals. */
font-size: 16px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
/* Menü offen oder Lightbox aktiv: der Hintergrund darf nicht mitscrollen. */
html.menu-offen { overflow: hidden; }
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, summary:focus-visible,
[tabindex]:focus-visible {
outline: 2px solid var(--akzent);
outline-offset: 3px;
}
/* Überschriften: Montserrat Black, Versalien. Größe, Zeilenhöhe und
Sperrung setzt jede Stelle selbst — das Original fährt dafür sechs
verschiedene Kombinationen, eine gemeinsame Grundgröße träfe keine. */
h1, h2, h3, h4 {
margin: 0;
font-family: var(--schrift-display);
font-weight: 900;
text-transform: uppercase;
}
/* Fließtext: Montserrat 15px/22,5px. Abstand 0,9rem wie Elementor — in
rem, nicht em: bei 14px-Text wären es sonst 12,6 statt 14,4px. */
p {
margin: 0 0 0.9rem;
font-family: var(--schrift-text);
font-size: 15px;
line-height: 1.5;
}
p:last-child { margin-bottom: 0; }
/* Nur für Lesegeräte — etwa die H1 der Startseite. */
.nur-sr {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
.sprung {
position: absolute;
left: -9999px;
z-index: 100;
padding: 0.75rem 1.25rem;
background: var(--akzent-flaeche);
color: var(--akzent-tinte);
font-weight: 700;
}
.sprung:focus { left: 1rem; top: 1rem; }
.icon { flex: none; }
/* ---------------------------------------------------------------- Raster -- */
/* Die Hülle begrenzt die Breite und hält den Rand. Breite und Rand sind
Token, damit jeder Abschnitt seine gemessene Spalte setzen kann, ohne
die Hülle nachzubauen. */
.huelle {
width: 100%;
max-width: var(--breite);
margin-inline: auto;
padding-inline: var(--gutter);
}
/* Schmale Spalte: die Eventseite, 820px wie im Original. */
.huelle-schmal { --breite: 820px; --gutter: 0px; }
/* Abschnitt: 100px oben und unten, wie die Bänder der Startseite. */
.abschnitt {
position: relative;
padding-block: 100px;
isolation: isolate;
}
/* Eventabschnitt: Foto DSC00137 `cover`, ab 1025px feststehend (Parallaxe
des Originals), Schleier Schwarz 0,48 — aus post-23.css von
boilerrave.de (Element bcdfb1d). Dasselbe Bild auf allen Breiten. */
.abschnitt-bild {
--breite: 100%;
--gutter: 100px;
background: url('../img/events-grund.webp') center / cover no-repeat;
}
@media (min-width: 1025px) { .abschnitt-bild { background-attachment: fixed; } }
@media (max-width: 767px) { .abschnitt-bild { --gutter: 30px; } }
.abschnitt-bild::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
background: rgb(0 0 0 / 48%);
}
/* Abschnittskopf „NEXT EVENTS", „FOTOS": 50px/50px, ohne Sperrung, ohne
Umformung (Versalien stehen im Text) — gemessen auf boilerrave.de. Über
die volle Breite zentriert, 70px Abstand darunter. */
.kopfzeile { margin-bottom: 25px; padding: 10px; text-align: center; }
.kopfzeile h2 {
font-size: 50px;
line-height: 1;
text-transform: none;
text-wrap: balance;
}
@media (max-width: 767px) {
.kopfzeile { margin-bottom: 50px; }
.kopfzeile h2 { font-size: 40px; }
}
.unterzeile { margin: 0; }
/* Knopfreihe. `data-mitte`: zentriert unter Karten und Bildband, 70px
Abstand darüber, auf dem Telefon 50px. */
.knopf-reihe { display: flex; flex-wrap: wrap; gap: 10px; }
.knopf-reihe[data-mitte] { justify-content: center; margin-top: 70px; }
@media (max-width: 767px) { .knopf-reihe[data-mitte] { margin-top: 50px; } }
/* ---------------------------------------------------------------- Knoepfe -- */
/* Knopf: 12px/24px Polster, Montserrat Black 15px/15px, Rundung 15px,
roter Schein `0 0 10px rgba(255,0,0,.26)` — alles gemessen (259×39 bei
„ALLE EVENTS ANSEHEN"). **Der Schein ist auch auf boilerrave.de rot**
(post-23.css, 01.11.2026), ein Rest aus dem Theme (wie in roxy-hp). Übernommen
wie gemessen und dem Betreiber vorgelegt; Grün wäre
`rgb(var(--akzent-rgb) / 26%)`. Die Beschriftung steht in Versalien im Markup,
nicht per text-transform: so im Original.
**`line-height` nach `font: inherit`.** Die Kurzschrift setzt die
Zeilenhöhe zurück; davor notiert, wäre der Knopf 6px höher. */
.knopf {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
padding: 12px 24px;
border: 0;
/* Eckig wie auf boilerrave.de (gemessen 0px; in drip-hp 15px). */
border-radius: 0;
background: var(--akzent-flaeche);
color: var(--akzent-tinte);
font: inherit;
font-family: var(--schrift-display);
line-height: 1;
font-size: 15px;
font-weight: 900;
/* Roter Schein: auch auf boilerrave.de (post-23.css, alle vier Knöpfe
der Startseite) — Theme-Rest (wie in roxy-hp), übernommen wie
gemessen (.auftrag.md). */
box-shadow: 0 0 10px rgb(255 0 0 / 26%);
cursor: pointer;
transition: transform 0.25s var(--kurve), filter 0.2s ease;
}
.knopf:hover { filter: brightness(1.1); transform: translateY(-1px); }
.knopf:active { transform: translateY(0) scale(0.98); }
.knopf[disabled] { opacity: 0.5; cursor: not-allowed; }
/* Pfeil am Ende, 15px — als Maske, damit er `currentColor` übernimmt. */
.knopf::after {
content: '';
width: 15px;
height: 15px;
flex: none;
background: currentColor;
-webkit-mask: var(--pfeil) center / contain no-repeat;
mask: var(--pfeil) center / contain no-repeat;
}
.knopf-ohne-pfeil::after { content: none; }
/* Zweite Stufe: dunkle Fläche statt Akzent, ohne Schein — Lounge und
U18-Formular auf den Eventseiten, „Startseite" auf der 404. */
.knopf-leer { background: #242424; color: var(--tinte); box-shadow: none; }
/* Weiße Schrift: Die Knopfschrift ist hier schwarz (auf Gelb), auf #242424
wären das 1,35:1 — gefunden von tools/kontrast.js an der 404. */
/* ---------------------------------------------------------------- Kopf --- */
/* **Kopf, Menü, Start-Hero und Seitenkopf wie auf cosmopolar.com** —
optisch, nicht inhaltlich (Betreiber, 01.11.2026). Aufbau, Maße und
Verhalten aus cosmopolar-hp, Farben, Schriften, Logo und Texte bleiben
BOILERRAVE. Der übrige Abgleich gegen boilerrave.de bleibt bestehen; diese drei
Bereiche nimmt tools/abgleich.py benannt aus (ERSETZT).
Die Zeile steht frei im Bild und bekommt erst beim Scrollen einen Grund
(`data-fest`, ui.js). **Nur die Farbe ändert sich, nicht die Höhe** — die
klebende Zeile belegt ihren Platz im Fluss, sonst ruckte alles darunter. */
.kopf {
position: sticky;
top: 0;
z-index: 50;
background: transparent;
isolation: isolate;
transition: background 0.25s ease;
}
.kopf[data-fest='ja'] {
background: rgb(20 20 20 / 92%);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
/* Weichzeichner aus, solange das Menü offen ist: `backdrop-filter` erzeugt
einen umgebenden Block für `position: fixed`, und das Vollbildmenü wäre
dann nur so hoch wie die Kopfzeile (in cosmopolar-hp so passiert). */
.kopf[data-offen='ja'] {
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
/* Oben mehr Luft als unten (28 + 8), gescrollt mittig (18 + 18) — die
Summe bleibt gleich, die Höhe auch. Seitlich so breit wie der Rand neben
einer 1200px-Spalte, nie unter dem Seitenabstand. */
.kopf-innen {
--breite: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
min-height: 56px;
padding: 1.75rem max(clamp(1rem, 4vw, 2.5rem), calc((100% - 1200px) / 2)) 0.5rem;
transition: padding 0.25s ease;
}
.kopf[data-fest='ja'] .kopf-innen { padding-top: 1.125rem; padding-bottom: 1.125rem; }
/* Logo in der Höhe von cosmopolar.com (46px, Telefon 34px). Die
BOILERRAVE-Wortmarke ist 8,2:1 breit — dieselbe Höhe, nicht dieselbe Breite. */
.logo { display: flex; align-items: center; }
.logo img { height: 46px; width: auto; }
@media (max-width: 899px) { .logo img { height: 34px; } }
.menu-knopf {
display: inline-flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 6px;
width: 44px;
height: 44px;
padding: 0;
border: 0;
background: transparent;
cursor: pointer;
}
.menu-knopf span {
display: block;
width: 26px;
height: 2px;
border-radius: 2px;
background: var(--tinte);
transition: transform 0.28s var(--kurve), opacity 0.2s ease;
}
/* 8px = halbe Balkenhöhe plus Abstand — so treffen sich beide in der Mitte. */
.kopf[data-offen='ja'] .menu-knopf span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.kopf[data-offen='ja'] .menu-knopf span:nth-child(2) { opacity: 0; transform: scaleX(0.4); }
.kopf[data-offen='ja'] .menu-knopf span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
.menu ul {
display: flex;
align-items: center;
gap: clamp(1rem, 2.2vw, 1.75rem);
margin: 0;
padding: 0;
list-style: none;
}
@media (min-width: 900px) { .menu li { display: flex; align-items: center; } }
/* Montserrat Black 16px, Versalien, leicht gesperrt. Keine Unterstreichung
— der aktive Punkt ist eingefärbt, das genügt als Signal. Die Farbe ist
die Textvariante des Akzents: 16px zählt als kleine Schrift. */
.menu a {
font-family: var(--schrift-display);
font-size: 1rem;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.04em;
/* 1,7 wie die Grundzeile von cosmopolar.com (dort 25,5/15). */
line-height: 1.7;
padding-block: 0.5rem;
transition: color 0.15s ease;
}
.menu a:hover,
.menu a[aria-current='page'] { color: var(--akzent-hell); }
/* Der Menüfuß gehört nur ins aufgeklappte Menü auf schmalen Geräten. */
.menu-fuss { display: none; }
/* Schmale Geräte: das Menü füllt den Bildschirm, Punkte groß und mittig,
darunter Anschrift, E-Mail und Symbole. Aufblenden statt Einschieben. */
@media (max-width: 899px) {
.kopf[data-offen='ja'] { background: var(--kopf); }
.menu {
position: fixed;
inset: var(--kopf-hoehe) 0 0;
display: flex;
flex-direction: column;
justify-content: center;
padding: 1rem clamp(1rem, 4vw, 2.5rem) 3rem;
overflow-y: auto;
background: var(--kopf);
/* Ein sehr leiser Schein in der Markenfarbe nimmt der Fläche das
Tafelhafte, ohne sie einzufärben. */
background-image: radial-gradient(70% 40% at 50% 0%, rgb(var(--akzent-rgb) / 7%), transparent 70%);
opacity: 0;
transform: scale(1.03);
/* Geschlossen auch für Tastatur und Lesegerät weg. */
visibility: hidden;
transition: opacity 0.28s ease, transform 0.35s var(--kurve), visibility 0.28s ease;
}
.kopf[data-offen='ja'] .menu { opacity: 1; transform: none; visibility: visible; }
/* Abstand deutlich enger als cosmopolar.com (1,5rem) — Betreiber 01.11. */
.menu ul { flex: none; flex-direction: column; align-items: center; gap: 0.25rem; }
/* Block, nicht Flex: Als Flex-Element würde der Verweis zum Block samt
Polster (58 statt 47,6px je Punkt, gegen cosmopolar.com gemessen). */
.menu li { display: block; text-align: center; }
.menu a { font-size: clamp(1.75rem, 7vw, 2.25rem); letter-spacing: -0.01em; }
/* Ab 24px große Schrift — dort trägt das Originalrot. */
.menu a:hover,
.menu a[aria-current='page'] { color: var(--akzent); }
.menu-fuss {
display: grid;
justify-items: center;
gap: 0.35rem;
margin-top: 2.5rem;
text-align: center;
}
.menu-fuss p { margin: 0; font-size: 14px; color: var(--tinte-still); }
.menu-fuss a { font-size: 14px; color: #b4b4b4; }
.menu-fuss .fuss-social { justify-content: center; margin-top: 0.75rem; }
/* Die Punkte laufen nacheinander ein. Die Verzögerung steht je Position
im CSS, weil ein Inline-Style unter `style-src 'self'` nicht erlaubt ist. */
.menu li { opacity: 0; transform: translateY(14px); transition: opacity 0.3s ease, transform 0.4s var(--kurve); }
.kopf[data-offen='ja'] .menu li { opacity: 1; transform: none; }
.kopf[data-offen='ja'] .menu li:nth-child(1) { transition-delay: 0.08s; }
.kopf[data-offen='ja'] .menu li:nth-child(2) { transition-delay: 0.13s; }
.kopf[data-offen='ja'] .menu li:nth-child(3) { transition-delay: 0.18s; }
.kopf[data-offen='ja'] .menu li:nth-child(4) { transition-delay: 0.23s; }
.kopf[data-offen='ja'] .menu li:nth-child(5) { transition-delay: 0.28s; }
@media (prefers-reduced-motion: reduce) {
.menu li { opacity: 1; transform: none; transition: none; }
.menu { transition: visibility 0.01s; transform: none; }
}
}
@media (min-width: 900px) { .menu-knopf { display: none; } }
/* Im Vollbildmenü steht das Untermenü offen, der Knopf ist dort nur
Überschrift der Gruppe (wie tropi-hp). */
@media (max-width: 899px) {
}
/* ----------------------------------------------------------------- Hero -- */
/* Wie auf cosmopolar.com: feste Höhe, die mit dem Fenster wächst (keine
vh — sonst springt sie auf dem Telefon mit der Adressleiste), unter die
schwebende Kopfzeile geschoben, Verlaufsschleier oben und unten dunkler. */
.hero {
position: relative;
height: clamp(500px, 71svh, 790px);
margin-top: calc(var(--kopf-hoehe) * -1);
display: grid;
place-items: center;
overflow: hidden;
background: var(--nacht);
text-align: center;
}
/* Medienfeld: Video wie im Original, darunter das Standbild als
Hintergrund — es trägt, bis das Video läuft, und bleibt allein stehen
bei reduzierter Bewegung oder Datensparen (home.js). Das Video ist
hochkant (1080×1920); `cover` schneidet auf dem Schreibtisch den
Mittelstreifen, wie Elementor es tat. Das Standbild ist dieser Streifen
(hero.webp), auf dem Telefon das ganze Bild (hero-mobil.webp). */
.hero-medium {
position: absolute;
inset: 0;
z-index: 0;
background: url('../img/hero.webp') center / cover no-repeat;
}
@media (max-width: 767px) {
.hero-medium { background-image: url('../img/hero-mobil.webp'); }
}
.hero-medium video {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
/* **Schleier für das Video, nicht für ein Standbild.** cosmopolar.com
deckt oben 55 %, in der Mitte 35 %. Gemessen (tools/bildkontrast.js):
der grüne aktive Menüpunkt schon auf dem Standbild 4,00:1, die große
Zeile im laufenden Video bis 2,78:1 — das Video hat Lichtblitze.
Gerechnet für den schlechtesten Fall — reines Weiß unter dem Schleier,
Mischung in sRGB:
grüner aktiver Punkt, 16px (4,5:1) braucht ≥ 78 % Deckung
weiße Menüpunkte, 16px (4,5:1) braucht ≥ 54 %
Hero-Zeile, groß (3:1) braucht ≥ 42 %
Deshalb hinter der Kopfzeile (bis 82px) 80–78 %, darunter wie dort
auslaufend, in der Mitte 50 % statt 35 %. So hält der Kontrast bei
jedem Bild des Videos, nicht nur bei den gemessenen. Sichtbare
Abweichung — dem Betreiber vorgelegt. */
.hero::after {
content: '';
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(180deg, rgb(0 0 0 / 80%) 0, rgb(0 0 0 / 78%) 82px,
rgb(0 0 0 / 55%) 170px, rgb(0 0 0 / 50%) 45%, rgb(0 0 0 / 75%) 100%);
}
.hero-text {
--breite: 1200px;
--gutter: clamp(1rem, 4vw, 2.5rem);
position: relative;
z-index: 2;
padding-top: var(--kopf-hoehe);
}
/* Logo über der Zeile. **Bewusst nicht wie cosmopolar.com:** Dort steht ein
fast quadratisches Zeichen, 100 / 220 / 112px hoch bei 1440 / 768 /
390 (gemessen). Die BOILERRAVE-Wortmarke ist 8,2:1 — in derselben Höhe wäre
sie auf dem Telefon über 600px breit. Sie bleibt deshalb 44–72px hoch;
die Zeile darunter steht dadurch höher als dort. */
.hero-logo { display: block; margin: 0 auto 1rem; }
.hero-logo img { width: auto; height: clamp(44px, 6vw, 72px); margin-inline: auto; }
.hero-titel {
margin: 0 0 1.25rem;
font-size: clamp(2.75rem, 9vw, 5.3125rem);
font-weight: 900;
line-height: 1.02;
letter-spacing: 0;
text-transform: uppercase;
text-wrap: balance;
}
.hero-titel span { display: block; }
/* Der Knopf als Pille wie dort, knapper als die übrigen. Fläche und Schrift
bleiben BOILERRAVE (Schwarz auf Gelb, AA). */
.hero-text .knopf {
gap: 0.5rem;
padding: 0.7rem 1.4rem;
border: 1.5px solid var(--akzent-flaeche);
border-radius: 980px;
font-size: 0.8125rem;
font-weight: 800;
/* 1,7 wie dort geerbt (46px hoch, nicht 37). */
line-height: 1.7;
letter-spacing: 0.01em;
box-shadow: none;
}
.hero-text .knopf::after { width: 1em; height: 1em; }
/* ------------------------------------------------------------- Ueber uns -- */
/* Zwei gleiche Spalten, 60px Abstand, höchstens 1080px — Text links,
Bildstrecke rechts, senkrecht mittig. 80px oben und unten, 30px seitlich. */
#ueber { padding-block: 80px; }
/* Auf dem Telefon beginnt der Abschnitt 5px tiefer — gemessen (Logo 724
statt 719 bei gleichem Hero). */
@media (max-width: 767px) { #ueber { padding-top: 85px; } }
.ueber {
--breite: 1140px;
--gutter: 30px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}
@media (max-width: 767px) { .ueber { grid-template-columns: 1fr; } }
.ueber-text {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 20px;
}
.ueber-text > * { width: 100%; }
.ueber-text h2 {
font-size: 50px;
line-height: 1;
/* Kein `text-wrap: balance`: boilerrave.de bricht gierig um
(„MEHR ALS NUR / EIN EVENT. EIN / …") — ausgeglichen war die längste
Zeile 419 statt 472px breit. */
}
@media (max-width: 767px) { .ueber-text h2 { font-size: 36px; } } /* gemessen 36/36 */
.ueber-text p { text-align: justify; }
.ueber-text strong { font-weight: 700; }
/* Logo über der Überschrift „Über uns" — Systemregel (cosmopolar-hp ∩
top10-singen-hp), unverändert; Maße zieht der Abgleich nach. */
.ueber-logo { width: 230px; min-width: 80px; margin-bottom: 0; }
@media (max-width: 767px) { .ueber-logo { width: 155px; } }
/* Auf dem Tablet blendet das Original das Logo aus (Elementor „auf Tablet
verbergen": bei 768 gemessen kein Bild, bei 390 und 1440 schon). */
@media (min-width: 768px) and (max-width: 1024px) { .ueber-logo { display: none; } }
/* Bildstrecke neben dem Text: ohne Rundung, Schatten und Verlauf — so auf
boilerrave.de gemessen (Rundung 0; drip-hp hatte 28px mit Schatten und
Verlauf). */
.ueber .slider-band img { aspect-ratio: 4 / 5; }
/* --------------------------------------------------------------- Karten -- */
/* Drei Spalten, Abstand 20px — ab Tablet abwärts eine Spalte, höchstens
400px breit und mittig. Das Original schaltet bei 1024px direkt auf
einspaltig, nicht stufenweise. Raster wie beachhouse-hp (dort dieselben
Maße gemessen). */
.karten {
display: grid;
gap: 20px;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
/* **Variante: die Eventliste.** Auf /events/ ist das Raster schmaler als
auf der Startseite — 3 × 367 + 2 × 20 = 1141px ab x = 150 —, am Telefon
dagegen breiter (10px Rand statt 20). Gemessen; das Original setzt beide
Raster getrennt. */
@media (min-width: 1025px) {
}
@media (max-width: 767px) {
}
/* 3 × 387 + 2 × 20 = 1201px, mittig — gemessen. Schmaler als die Hülle. */
@media (min-width: 1025px) {
.karten { max-width: 1201px; margin-inline: auto; }
}
@media (max-width: 1024px) {
.karten { grid-template-columns: minmax(0, 400px); justify-content: center; }
}
/* **Karte wie im Kanon** (Betreiber, 01.11.2026, wie beachhouse-hp):
gestanzt wie eine Eintrittskarte. Das Original zeigt die schlichte
Fläche des Clubinio-Plugins ohne Perforation und Schatten.
Kartenfläche und Rundung (20px) wie auf boilerrave.de gemessen.
Die Kerben sind **Aussparungen im Kartenhintergrund**, keine farbigen
Kreise. Der Eventabschnitt der Startseite liegt auf einem Foto — zwei
Kreise in der Grundfarbe stünden dort als dunkle Punkte. So stanzen sie
wirklich, und es zeigt sich, was immer dahinterliegt. */
.karte {
display: flex;
flex-direction: column;
background:
radial-gradient(circle 11px at 0 calc(100% - var(--abriss)),
transparent 11px, var(--karte) 11.5px) left / 51% 100% no-repeat,
radial-gradient(circle 11px at 100% calc(100% - var(--abriss)),
transparent 11px, var(--karte) 11.5px) right / 51% 100% no-repeat;
border-radius: var(--r-karte);
/* Damit der Flyer die Rundung der Karte übernimmt. */
overflow: hidden;
box-shadow: var(--schatten);
font-family: var(--schrift-poppins);
transition: transform 0.3s var(--kurve), box-shadow 0.3s var(--kurve);
}
.karte:hover {
transform: translateY(-6px);
box-shadow: var(--schatten-hoch);
}
.karte:active { transform: translateY(-2px); }
.karte-bild { background: var(--karte-bild); overflow: hidden; }
/* Flyer sind 16:9 — ein quadratischer Beschnitt schneidet den Titel weg. */
.karte-bild img {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
transition: transform 0.55s var(--kurve);
}
.karte:hover .karte-bild img { transform: scale(1.05); }
.karte-text {
display: flex;
flex-direction: column;
gap: 0.375rem;
padding: 0.875rem 0.9375rem 1rem;
flex: 1;
}
/* Titel in Bodoni 25px, Versalien — wie im Original gemessen (beachhouse-hp
schreibt ihn auf Wunsch des dortigen Betreibers ohne Versalien). */
.karte-titel {
font-size: var(--t-h3);
line-height: 1.3;
text-transform: uppercase;
}
/* Ortszeile in der Akzentfarbe, Versalien. */
.karte-ort {
margin: 0;
color: var(--akzent-text);
font-size: var(--t-klein);
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.04em;
}
/* Termin in der Schrift des Abrisses — im Kanon steht er dort; hier
trägt der Abriss den Preis. */
.karte-termin {
margin: 0;
color: var(--tinte-leise);
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
white-space: nowrap;
}
/* Der Abschnitt unter der Perforation, wie bei einer Eintrittskarte.
Feste Höhe aus `--abriss`, damit die Trennlinie genau dort sitzt, wo die
Kerben im Kartenhintergrund ausgespart sind. Wüchse der Abschnitt mit
seinem Inhalt, wanderte die Linie und die Stanzung passte nicht mehr. */
.karte-abriss {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
height: var(--abriss);
margin: 0;
padding-inline: 0.9375rem;
border-top: 2px dashed var(--linie);
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
}
/* Einstiegspreis, darunter klein „zzgl. Systemgebühr" (9px wie im
Original). Fehlt ein kaufbares Ticket, bleibt das Feld leer (cards.js). */
.karte-preis {
display: flex;
flex-direction: column;
min-width: 0;
line-height: 1.25;
}
.karte-preis strong { font-weight: 700; }
.karte-preis small {
font-size: 9px;
font-weight: 400;
letter-spacing: 0.02em;
text-transform: none;
white-space: nowrap;
color: var(--tinte-leise);
}
.karte-infos {
display: inline-flex;
align-items: center;
gap: 0.3rem;
color: var(--akzent-text);
transition: gap 0.22s var(--kurve);
}
/* Der Pfeil rückt beim Darüberfahren ein Stück weiter — die Karte ist
ein Link, und das zeigt sie damit. */
.karte:hover .karte-infos { gap: 0.6rem; }
/* Leerzustand (keine Termine, keine Alben, Formular aus) — Systemregel.
Das Original zeigt nie einen, gemessen werden kann er nicht. */
.leer {
color: var(--tinte-still);
text-align: center;
padding-block: 3rem;
}
/* Monatsüberschrift der Eventliste: 32px, 800, zentriert. */
.monat {
margin: 40px 0 20px;
font-size: 32px;
font-weight: 800;
line-height: 1.2;
letter-spacing: 1px;
text-align: center;
}
.monat:first-child { margin-top: 0; }
/* ------------------------------------------------------- Schieberegler -- */
/* Wie viele Folien gleichzeitig zu sehen sind, sagt `data-zeigen`
(slider.js setzt die Folienbreite). Punkte 6px, Abstand 12px, Akzent;
der aktive weiß. Punktreihe 24px hoch, 8px unter dem Bild. Pfeile 25px
in Akzentfarbe, 10px vom Rand. Alles gemessen.
`touch-action: pan-y` gibt das senkrechte Scrollen an die Seite weiter
und behält die waagerechte Geste für das Blättern. 5px unter der
Punktreihe als Polster, nicht als Rand: Ein Rand fiele mit dem des
Knopfes darunter zusammen. */
.slider { position: relative; padding-bottom: 5px; }
.slider-spur {
position: relative;
overflow: hidden;
touch-action: pan-y;
}
.slider-band { display: flex; }
.slider-band > figure { margin: 0; flex: 0 0 100%; }
.slider-band img { width: 100%; height: auto; object-fit: cover; }
.slider-pfeil {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 2;
display: grid;
place-items: center;
width: 25px;
height: 25px;
padding: 0;
border: 0;
background: transparent;
color: var(--akzent);
cursor: pointer;
}
.slider-pfeil svg { width: 25px; height: 25px; }
.slider-rueck { left: 10px; }
.slider-vor { right: 10px; }
.slider-punkte {
display: flex;
justify-content: center;
align-items: center;
height: 24px;
margin-top: 8px;
}
.slider-punkt {
width: 6px;
height: 6px;
margin: 0 6px;
padding: 0;
border: 0;
border-radius: 50%;
background: var(--akzent);
cursor: pointer;
}
.slider-punkt[aria-current='true'] { background: var(--tinte); }
/* Randloses Band: ohne Rundung, Kante an Kante, jedes Bild in seinem
eigenen Verhältnis (4:5 und 2:3 gemischt). Das Band ist so hoch wie das
höchste Bild, die Folien stehen oben — so misst es das Original (720px
bei 1440, obwohl die sichtbaren drei 600px hoch sind). */
.slider-randlos .slider-band { align-items: flex-start; }
/* **Variante: Querformat** („FOTOS") — dieselbe Strecke mit Bildern im
Verhältnis der Dateien: 3:2 (1920×1280), auf boilerrave.de 480×320 bei
1440 gemessen (drip-hp: 16:9). */
.slider--quer .slider-band img { aspect-ratio: 3 / 2; }
/* Das Band der Startseite: Überschrift 30px über dem Band (gemessen), Knopf
20px unter den Punkten. */
#fotos .kopfzeile { margin-bottom: 20px; }
#fotos .knopf-reihe[data-mitte] { margin-top: 20px; }
/* ------------------------------------------------------- Seitenkopf (Unter) -- */
/* Wie auf cosmopolar.com: Höhe wächst mit der Breite (320–460px), der
Banner läuft unter die schwebende Kopfzeile — negativer Rand und Polster
gehören zusammen —, gleichmäßiger Schleier 58 %, unten eine feine Linie.
Auf dem Telefon ein festes Seitenverhältnis 3:2 statt Mindesthöhe. */
.seitenkopf {
min-height: clamp(320px, 34vw, 460px);
display: grid;
align-content: center;
margin-top: calc(var(--kopf-hoehe) * -1);
padding: calc(var(--kopf-hoehe) + clamp(2.5rem, 7vw, 4rem)) 0 clamp(2.5rem, 7vw, 4rem);
/* `background-color`, nicht die Kurzschreibweise: Sie setzte
`background-size: cover` aus .seitenkopf-bild zurück. */
background-color: #181818;
border-bottom: 1px solid #2a2a2a;
text-align: center;
}
.seitenkopf .huelle { --breite: 1200px; --gutter: clamp(1rem, 4vw, 2.5rem); }
.seitenkopf-bild {
position: relative;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
isolation: isolate;
}
.seitenkopf-bild::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
/* 58 % wie cosmopolar.com, oben hinter der Kopfzeile 75 %: Dort steht das
Menü direkt auf dem Foto, und der aktive Punkt in Rot (16px) kam auf
/jobs/ und /kontakt/ nur auf 4,30 bzw. 3,49:1 (tools/bildkontrast.js).
cosmopolar.com dunkelt im Start-Hero oben ebenso ab (55 %). Allein reicht
das nicht (bei 90 % noch 4,47:1) — dazu --akzent-hell am Menü. */
background: linear-gradient(180deg, rgb(0 0 0 / 75%) 0, rgb(0 0 0 / 58%) 160px);
}
.seitenkopf[data-banner='events'] { background-image: url('../img/banner/events.webp'); }
.seitenkopf[data-banner='fotos'] { background-image: url('../img/banner/fotos.webp'); }
.seitenkopf[data-banner='kontakt'] { background-image: url('../img/banner/kontakt.webp'); }
.seitenkopf h1 {
font-size: clamp(3rem, 13vw, 4.5rem);
line-height: 1.08;
letter-spacing: -0.02em;
text-transform: none;
}
/* Unterzeile im Akzent, 15–18px, 1rem unter der Zeile.
**Abweichung, für WCAG AA:** Rot direkt auf dem Foto hat an den
gemalten Pixeln weniger als 4,5:1 (tools/bildkontrast.js). Deshalb ein
schmaler Grund aus 92 % Schwarz nur hinter dem Text. Rückbau: die drei
Zeilen ab `display` streichen. */
.seitenkopf .unterzeile {
display: table;
margin: 1rem auto 0;
padding: 0 8px;
border-radius: 4px;
background: rgb(0 0 0 / 92%);
font-size: clamp(0.9375rem, 2.6vw, 1.125rem);
font-weight: 400;
line-height: 1.7;
color: var(--akzent-text);
}
.seitenkopf[data-banner='events'] .unterzeile { font-family: var(--schrift-poppins); }
@media (max-width: 759px) {
.seitenkopf-bild { min-height: 0; aspect-ratio: 3 / 2; }
}
/* ------------------------------------------------------------ Eventliste -- */
/* Monatsgruppen in einer Spalte von höchstens 1140px, 10px Rand. 75px
unter dem Seitenkopf, 80px bis zum Fuß. */
.seite-events .abschnitt { padding: 75px 0 80px; }
.seite-events .karte { font-size: 15px; }
/* 20px fett zählt als große Schrift — dort trägt die Originalfarbe. */
.seite-events .karte-termin { font-size: 20px; color: var(--akzent); }
.seite-events .karte-titel { font-size: 26px; }
@media (max-width: 1024px) { .seite-events .karte-titel { font-size: 21px; } }
@media (max-width: 767px) { .seite-events .karte-titel { font-size: 24px; } }
/* ------------------------------------------------------------------ FAQ -- */
/* Kontaktseite: zwei gleich breite Spalten mit 20px Abstand in höchstens
1120px, auf dem Telefon untereinander. Ohne FAQ (Clubinio führt derzeit
keine) steht das Formular allein in der Mitte. */
.seite-kontakt .abschnitt { padding: 85px 0 35px; } /* Formular 85px unter dem Seitenkopf, Fuß 35px unter dem Knopf — gemessen */
.kontakt-raster {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
align-items: start;
}
/* Untereinander 50px zwischen FAQ und Formular — Wert aus drip-hp; hier
nicht messbar (boilerrave.de hat keine FAQ, Clubinio führt 0). */
@media (max-width: 767px) { .kontakt-raster { grid-template-columns: 1fr; row-gap: 50px; } }
.kontakt-raster[data-ohne-faq='ja'] { grid-template-columns: minmax(0, 550px); justify-content: center; } /* 550px, gemessen */
/* Bis 1024px über die volle Breite (748px bei 768, Rand 10px) — gemessen. */
@media (max-width: 1024px) { .kontakt-raster[data-ohne-faq='ja'] { grid-template-columns: minmax(0, 1fr); } }
.kontakt-raster > div { display: flex; flex-direction: column; gap: 20px; }
.kontakt-raster h2 { font-size: 32px; line-height: 1; text-transform: none; }
/* Aufklapper im Stil des Clubinio-FAQ-Widgets (Werte aus drip-hp, hier
ohne FAQ nicht nachgemessen)
(clubinio-faq) — `` wie im System, ohne JavaScript bedienbar.
Übernommen aus haase-hp, wo dasselbe Widget vermessen wurde; roxy-hp
hatte hier ein Elementor-Akkordeon (roxy.club führte keine Clubinio-FAQ).
Eintrag über die volle Spalte, Linie unten in Akzentfarbe 26 %. Frage
Poppins 600 16,8/23,52 in Weiß, Polster 20/8/20/20; Symbol 20×20 aus
zwei 2px-Strichen in Akzentfarbe, 3px unter der Oberkante der ersten
Zeile, 18px vor dem Text. Offen: Minus statt Plus und ein Balken 3×28
am linken Rand. Antwort Poppins 15,68/25,09 in #9aa6b5, Polster
0/8/22/44. Auf dem Telefon dieselben Werte (gemessen bei 390). */
.faq {
position: relative;
border-bottom: 1px solid rgb(var(--akzent-rgb) / 26%);
}
.faq[open]::before {
content: '';
position: absolute;
left: 0;
top: 18px;
width: 3px;
height: 28px;
background: var(--akzent);
}
.faq summary {
position: relative;
display: flex;
align-items: flex-start;
gap: 18px;
padding: 20px 8px 20px 20px;
font-family: var(--schrift-poppins);
font-size: 16.8px;
font-weight: 600;
line-height: 1.4;
color: var(--tinte);
list-style: none;
cursor: pointer;
}
.faq summary::-webkit-details-marker { display: none; }
/* Das Symbol: ein 20px-Kasten vor dem Text, darin zwei Striche. */
.faq summary::before {
content: '';
flex: none;
width: 20px;
height: 20px;
margin-top: 3px;
background:
linear-gradient(var(--akzent), var(--akzent)) center / 20px 2px no-repeat,
linear-gradient(var(--akzent), var(--akzent)) center / 2px 20px no-repeat;
}
.faq[open] summary::before {
background: linear-gradient(var(--akzent), var(--akzent)) center / 20px 2px no-repeat;
}
/* Geschlossen ausdrücklich `display: none` wie im Original: Chrome legt
den Inhalt geschlossener sonst trotzdem aus und meldet Maße,
die niemand sieht — der Abgleich zählte sie mit. */
.faq:not([open]) .faq-text { display: none; }
.faq summary span { flex: 1; min-width: 0; }
/* Das Polster sitzt an den Absätzen, nicht am Kasten: Im Original stehen
Text und Polster im selben Element (clubinio-faq__a-inner). */
.faq-text p {
margin: 0;
padding: 0 8px 0 44px;
/* Werte aus drip-hp; haase-hp misst dort die
Grundschrift — das Widget erbt sie vom Theme. */
font-family: var(--schrift-poppins);
font-size: 15.68px;
line-height: 1.6;
color: #9aa6b5;
overflow-wrap: anywhere;
}
.faq-text p + p { margin-top: 15px; }
.faq-text p:last-child { padding-bottom: 22px; }
/* ------------------------------------------------------------ Formulare -- */
/* Formular wie das Elementor-Formular der bestehenden Seite — gemessen auf
/kontakt/ und im Elementor-CSS: ohne Rahmen und Fläche, 22px zwischen
den Feldern, 16px zwischen Spalten, Poppins 15px. */
.form {
position: relative;
display: grid;
gap: 22px;
font-family: var(--schrift-poppins);
font-size: 15px;
line-height: 1.5;
}
.form > h2 {
font-size: 25.6px;
font-weight: 800;
line-height: 1.15;
color: var(--akzent);
}
.form-reihe {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 22px 16px;
align-content: start;
}
@media (max-width: 767px) { .form-reihe { grid-template-columns: 1fr; } }
/* Beschriftung über dem Feld: Poppins 15px/15px in Weiß, 13px darunter
(Elementor „labels above"), so breit wie ihr Text. */
.feld { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; border: 0; min-width: 0; }
.feld > span,
.feld legend {
display: block;
align-self: flex-start;
padding: 0 0 13px;
font-family: var(--schrift-poppins);
font-size: 15px;
font-weight: 400;
line-height: 1;
color: var(--tinte);
}
/* Die Legende einer Gruppe („Bereiche"): über die volle Breite, Zeilenhöhe
1,5 und 6px Abstand — eine