/* ============================================================================
Emsland Beach Festival — Design und Layout
----------------------------------------------------------------------------
**Systemstylesheet aus baggi-hp, nur die Marke getauscht.** Token (Farben,
Schriften) stehen weiter unten mit Emsland-Werten; die Bausteine selbst
sind unverändert die der Vorlage. Wo ein Kommentar von „der bestehenden
Seite" oder „dem Original" spricht und Maße begründet, meint er die
Vorlage baggi-hp — das sind Systemmaße, hier nicht nachgemessen.
Neu in diesem Projekt: `.hero--vollbild` (Abschnitt Hero) und
`body:not(:has(.kopf))` (Grundlage). Beides zurück in die Vorlage.
Keine Inline-Styles. Die Content-Security-Policy fuehrt style-src 'self'
ohne unsafe-inline; was aus der API kommt, wird als oder
textContent gesetzt, nie als style-Attribut.
========================================================================== */
/* ------------------------------------------------------------- Schriften -- */
/* **Zwei Familien mit klarer Aufgabenteilung**, beide variabel, zusammen
105 KB.
Die Displayschrift (hier Nexa, in baggi-hp Montserrat) ist als geometrische Display-Schrift gezeichnet und traegt
grosse Versalien — Ueberschriften, Knoepfe, Navigation und die fetten
Etiketten. Inter ist als Oberflaechenschrift gezeichnet und bleibt im
Absatz ruhig; Montserrat wirkt dort auf Dauer unruhig, weil ihre runden
Formen und weiten Punzen fuer grosse Grade gemacht sind.
Die bestehende WordPress-Seite nennt im `body` die Familie „Titillium",
laedt aber nie eine passende Datei — gerendert wird dort ueberall
Montserrat, auch im Fliesstext.
**Beide Dateien werden vorgeladen.** Fliesstext und Hero-Titel stehen
gleichzeitig ueber der Falz; eine der beiden nachzuladen hiesse, dass
genau dort umgebrochen wird. Wer die Familien tauscht, muss die
`` in allen Seiten **und** in `tools/build.py`
mitziehen — sonst laedt die Seite eine Datei vor, die sie nicht nutzt,
und die, die sie braucht, erst spaet.
Nicht enthalten sind Emoji; die kommen ohnehin aus der Systemschrift.
Ebenso wenig der Pfeil U+2192, deshalb zeichnet das CSS ihn selbst
(siehe `.knopf::after`). Kyrillisch fehlt in beiden Dateien gleichermassen
— einzelne Eventtexte aus Clubinio fallen dort auf die Systemschrift,
wie bisher schon. */
@font-face {
font-family: 'Inter';
src: url('../fonts/inter-var.woff2') format('woff2');
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
/* Nexa Text Black — die Displayschrift der bestehenden Seite, von dort
übernommen (wp-content/uploads/2025/09/). Nur der schwarze Schnitt: Er
ist der einzige, den Überschriften tragen. Lizenz liegt beim
Veranstalter, siehe fonts/LIZENZEN.md. */
@font-face {
font-family: 'Nexa';
src: url('../fonts/nexa-black.woff2') format('woff2');
font-weight: 800 900;
font-style: normal;
font-display: swap;
}
/* ----------------------------------------------------------------- Token -- */
:root {
/* Flaechen. Die Werte stammen aus dem Elementor-Kit der bestehenden Seite. */
/* Seitengrund. **Nicht reines Schwarz.** Die bestehende Seite fuehrt
durchgehend ein sehr dunkles Grau; reines #000 wirkt besonders auf
OLED-Displays wie ein Loch, weil die Pixel dort wirklich aus sind und
es keinerlei Abstufung zum Inhalt gibt. Ein paar Punkte Helligkeit
geben der Flaeche Tiefe, ohne sie aufzuhellen. */
/* Emsland Beach Festival: Grund und Box aus den Clubinio-Designwerten
(designBackgroundColor / designBoxColor). Die bestehende Seite ist auf
der Startseite vollflächig pink; Impressum und Datenschutz stehen hier
dunkel, weil weiße Fließschrift auf dem Pink nur 3,93:1 erreicht. */
--nacht: #0a0a0f; /* Seitengrund — Clubinio designBackgroundColor */
--box: #16161d; /* Karten, Kaesten — Clubinio designBoxColor */
--box-hell: #202028; /* abgesetzte Flaeche in einer Box */
--flaeche: #16161d; /* Abschnittsgrund, wo er sich abheben soll */
--karte: #16161d; /* Eventkarten */
--kopf: #0a0a0f; /* Kopfzeile, sobald sie deckend wird */
--linie: #2a2a33; /* Trenner und Rahmen */
/* Schrift: zwei Ebenen mit klarer Aufgabe. */
--schrift-display: 'Nexa', 'Inter', system-ui, sans-serif;
--schrift-text: 'Inter', system-ui, -apple-system, sans-serif;
/* Schrift. */
--tinte: #ffffff;
--tinte-leise: #b4b4b4;
--tinte-still: #7d7d7d;
/* Dieselbe Tinte als Zahlentripel. Getoente Flaechen — der graue
Zweitknopf, Eingabefelder — mischen sich daraus mit Alpha, statt
festes Weiss zu nennen. Dieselbe Rolle wie in top10-balingen-hp. */
--tinte-rgb: 255 255 255;
/* Akzent der Marke. */
/* **Zwei Rottoene im Bestand.** Clubinio fuehrt fuer diesen Shop
`#F0011D`, die Knoepfe der bestehenden Seite messen `#cc2026`. Hier
gilt der gemessene Knopfwert, weil er das ist, was ein Gast sieht;
der Clubinio-Wert steuert nur Widgets, die wir nicht benutzen. */
/* Emsland Beach Festival: **gemessen** `rgb(238 48 124)` als Seitengrund
von emslandbeachfestival.de. Clubinio führt `#EB3E77` — dieselbe Farbe
einen Hauch heller; es gilt der gemessene Wert, weil ihn der Gast sieht.
Weiß darauf: 3,93:1 — reicht für große Schrift und Knöpfe in Versalien
nicht für Fließtext. Deshalb der Schleier in `.hero--vollbild`. */
--akzent: #ee307c;
/* Schrift auf dem Akzent — Schwarz, weil Gelbgruen sonst nichts traegt. */
--akzent-tinte: #ffffff;
/* Derselbe Akzent als reines Zahlentripel. `rgb()` mit Alpha laesst sich
nicht aus einem Hex-Token bauen — ohne das hier stuenden Verlaeufe und
Fokusringe mit fest verdrahteter Farbe im Stylesheet und blieben beim
naechsten Projekt gelbgruen stehen. */
--akzent-rgb: 238 48 124;
/* **Derselbe Akzent als Schriftfarbe — und das ist nicht derselbe Wert.**
Als Flaeche traegt `#cc2026` muehelos: Weiss darauf messe ich 5,52:1.
Als Schrift auf dem Seitengrund kippt es: 3,52:1 gegen `#0d0d0d`,
3,02:1 gegen den Fuss `#1e1e1e` — beides unter den 4,5:1, die WCAG AA
fuer Fliesstext fordert. Das steht an 25 Stellen im Stylesheet, vom
Fussverweis bis zum Pflichtsternchen.
Deshalb zwei Token statt einem Kompromiss. Gleicher Farbton (358 Grad),
gleiche Saettigung, nur angehoben: 5,46:1 auf dem Grund, 4,69:1 im
Fuss. Wer eine Flaeche faerbt, nimmt `--akzent`; wer Schrift faerbt,
`--akzent-text`. Ein einziger Wert fuer beides geht nicht, ohne dass
eine der beiden Rollen leidet. */
/* Emsland: #ff5c9a — 6,82:1 auf --nacht, 6,21:1 auf --box. */
--akzent-text: #ff5c9a;
/* **Die zweite Markenfarbe.** Die bestehende Seite fuehrt den Clubbetrieb
in Rot und die Vermietung in Gruen — im geteilten Hero stehen beide
nebeneinander, Augenbraue und Knopf je Haelfte. Gemessen `#00a878`.
Weiss darauf ergibt **3,06:1** — zu wenig fuer die 14px-Knopfschrift,
die das Original dort setzt. Die Fuellung bleibt der gemessene Wert,
die Schrift darauf wird der Seitengrund: **6,36:1**. Derselbe Griff
wie beim Partnerknopf auf /business/.
Als Schriftfarbe auf dem abgedunkelten Foto braucht `#00a878` dagegen
keine Korrektur — gegen `#0d0d0d` sind es ebenfalls 6,36:1. Es gibt
hier also kein `--gruen-text`; anders als beim Rot faellt Fuellung und
Schrift zusammen. */
--gruen: #00a878;
--gruen-rgb: 0 168 120;
--gruen-tinte: #0d0d0d;
/* Gruen des Veranstaltungspartners Trend ID. Siehe `.knopf-partner`:
gemessen `#4caf50`, hier eine Stufe dunkler, damit weisse Schrift
darauf traegt (5,13:1 statt 2,78:1). */
--gruen-partner: #2e7d32;
/* Rundungen. Gestaffelt nach Flaechengroesse — ein einheitlicher Radius
laesst kleine Elemente verspielt und grosse Flaechen hart wirken. */
/* **Scharfe Ecken, durchgehend.** Die bestehende Seite setzt ueberall
`border-radius: 0` — Knoepfe, Eventkarten, Eingabefelder. Das ist kein
Versehen, sondern der Charakter der Marke: kantig statt freundlich.
Die Token bleiben trotzdem stehen, damit eine spaetere Rundung an
einer Stelle entschieden wird und nicht an fuenfzig. */
--r-knopf: 0;
--r-feld: 0;
--r-karte: 0;
--r-klein: 0;
/* Weiche Schatten statt Rahmen, wo etwas abheben soll. */
--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%);
/* Deckung des dunklen Schleiers ueber dem Bildabschnitt.
**Projekteigen, weil das Foto es ist.** Die Regel in `.abschnitt-bild`
ist in allen Projekten dieselbe; wie stark sie abdunkeln muss, haengt
am Bild darunter und an der Farbe der Schrift darauf.
Wert der bestehenden Seite. */
--bild-schleier: 48%;
/* Uebergang mit leichtem Ueberschwingen — nicht linear, nicht traege. */
--kurve: cubic-bezier(0.32, 0.72, 0, 1);
/* Haken fuer die eigenen Kaestchen. Als data:-Adresse im Stylesheet und
nicht als eigene Datei: 200 Byte sind keinen zweiten Abruf wert. */
/* Gegenstueck zum Haken, fuer die Fehlermeldung. */
--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");
/* Masse. */
/* **Gemessen, nicht uebernommen.** Die bestehende Seite fuehrt eine
Spalte von 1280px mit 32px Polster — innen also 1216px, linke Kante
bei 144px in einem 1504er Fenster. Mit den 1200/40 der Vorlage waren
es 1120px innen und die Kante bei 156: der ganze Inhalt stand 12
Pixel weiter innen und war 96 Pixel schmaler. Das faellt auf jeder
Seite auf, auch ohne Vergleichsbild daneben. */
--breite: 1280px;
--breite-schmal: 760px;
--gutter: clamp(1rem, 4vw, 2rem);
/* Hoehe der Kopfzeile. Hero, Bannerversatz, Menue und Ankersprung
rechnen damit — weicht der Wert von der tatsaechlichen Hoehe ab,
verschiebt sich der Inhalt um die Differenz.
**Zwei Werte, weil die Zeile nicht ueberall gleich hoch ist.** Ihre
Hoehe ergibt sich aus dem hoechsten Kind plus Polster: auf dem
Schreibtisch das Logo (46px), auf dem Telefon der Menueknopf (44px).
Mit einem einzigen Wert klaffte zwischen Kopfzeile und aufgeklapptem
Menue eine Luecke von 2px, durch die das Bild schien.
Nachgemessen: 82px / 80px. */
--kopf-hoehe: 80px;
/* Typografie. Die Skala ist die der bestehenden Seite (36/50/60/85 px),
hier als clamp(), damit sie auf dem Telefon nicht ueberlaeuft. */
/* Gemessen auf baggi-hp: Hero und Seitentitel 72px,
Abschnittsueberschriften 60px, Fliesstext-Ueberschriften 36px,
Kartentitel 20px. Als clamp(), damit nichts auf dem Telefon
ueberlaeuft. */
--t-hero: clamp(2.75rem, 8vw, 4.5rem); /* bis 72px */
--t-h1: clamp(2.25rem, 7vw, 4.5rem); /* bis 72px */
--t-h2: clamp(1.75rem, 5.5vw, 3.75rem); /* bis 60px */
/* **Zweite H2-Groesse fuer Ueberschriften im Fliesstext.** Die lange
Satzueberschrift in baggi-hp ist ein ganzer Satz; auf 60px nimmt er sieben Zeilen ein und
erschlaegt den Absatz, den er einleitet. Das Original setzt ihn auf
36px — eine halb so grosse Stufe fuer eine andere Aufgabe. */
--t-h2-text: clamp(1.5rem, 3.6vw, 2.25rem); /* bis 36px */
--t-h3: clamp(1.125rem, 3vw, 1.25rem); /* bis 20px */
--t-text: 1rem; /* 16px — gemessen */
--t-klein: 0.875rem;
}
/* --------------------------------------------------------------- Grundlage -- */
*, *::before, *::after { box-sizing: border-box; }
/* Gegenstueck zur festen Kopfzeile: Sie belegt keinen Platz im Fluss, also
muss der Inhalt ihn selbst mitbringen. Die beiden Werte gehoeren
zusammen — siehe `.kopf`. */
body { padding-top: var(--kopf-hoehe); }
/* Seite ohne Kopfzeile (emslandbeach-hp, `.hero--vollbild`): kein Versatz. */
body:not(:has(.kopf)) { padding-top: 0; }
/* Sicherheitsnetz gegen seitliches Verschieben. Die randlose Bildstrecke
rechnet die Scrollleiste bereits heraus (`--sb`); das hier faengt ab, was
kuenftig dazukommt, ohne dass es jemandem auffaellt.
`clip`, nicht `hidden`: `overflow: hidden` an einem Vorfahren setzt
`position: sticky` ausser Kraft, und die Kopfzeile klebt. */
html, body { overflow-x: clip; }
/* `hidden` muss gewinnen. Der Browser setzt dafuer nur `display: none` mit
schwacher Spezifitaet — jede eigene display-Regel schlaegt es. Genau das
ist passiert: `.knopf { display: inline-flex }` hat ein `hidden` am
Lounge-Knopf ueberstimmt, und der stand auf jeder Eventseite, obwohl ihn
nichts eingeblendet hatte. */
[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-text);
font-size: var(--t-text);
/* 26px auf 16px — gemessen. Vorher 1,7, was bei 15px 25,5px ergab und
den Text zugleich kleiner und luftiger machte als im Original. */
line-height: 1.625;
-webkit-font-smoothing: antialiased;
}
/* Menue offen oder Lightbox aktiv: der Hintergrund darf nicht mitscrollen. */
html.menu-offen, html.lb-aktiv { 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;
}
h1, h2, h3, h4 {
margin: 0;
font-family: var(--schrift-display);
/* **800, nicht 900.**
Die bestehende Seite laedt die Schnittdatei unter dem eigenen Namen
„Montserrat-ExtraBold" und setzt sie mit `font-weight: 400` — das
sieht nach Normalgewicht aus, ist aber ExtraBold, also 800. Wir
fahren dieselbe Familie als variable Schrift und mussten die Stufe
deshalb selbst benennen; die Vorlage nannte 900.
Nachgemessen in baggi-hp bei 36px: live 366,7px, bei
uns 370,5px mit 900 und **366,7px mit 800** — auf die Nachkommastelle
derselbe Wert. Das ist der Unterschied, der die Ueberschriften breiter
und schwerer wirken liess, ohne dass man sagen konnte, woran es liegt. */
font-weight: 800;
/* **Zwei Zeilenhoehen, nach Aufgabe getrennt.**
Grosse Ueberschriften stehen im Original auf **1,0** — „EVENTS" mit
72px/72px, „DEMNÄCHST" mit 60px/60px. Das sind ein bis zwei Woerter,
die als Block wirken sollen.
Ueberschriften im Fliesstext stehen auf **1,25** (36px/45px), ebenso
die Kartentitel (20px/25px). Das sind ganze Saetze, und auf 1,0
kleben ihre Zeilen aneinander.
Die Vorlage fuhr pauschal 1,08 — zu eng fuer die Saetze und zu weit
fuer die Schlagworte. Der Grundwert hier ist die kleine Stufe; die
grossen setzen ihn bei sich auf 1 zurueck. */
line-height: 1.25;
text-transform: uppercase;
/* **Positiv gesperrt, nicht negativ.** Die Geschwisterprojekte ziehen
ihre Versalueberschriften mit `-0.02em` zusammen, weil Montserrat im
schwersten Schnitt breit laeuft. Die Vorlage baggi-hp macht das
Gegenteil und sperrt auf: gemessen 3,6px auf 72px und 3px auf 60px —
beides 0,05em. Das ist der Charakter der Marke, kein Versehen, und
einer der Unterschiede, die man sofort sieht. */
letter-spacing: 0.05em;
}
/* **Fette Etiketten tragen ebenfalls Montserrat.**
Die Ueberschriftenregel oben deckt nur h1 bis h4. Alles andere, was fett
und in Versalien steht, haengt sonst am Fliesstext und faellt auf Inter —
still, weil es weiter fett bleibt und nur die Formen wechseln.
**`.infokasten dd` gehoert nicht dazu.** Das sind die Werte — „21.
November 2026", „Einlass ab 18 Jahren", die Anschrift —, also
Fliesstext in ganzen Woertern. Die bestehende Seite setzt sie in
Inter; nur die Beschriftung darueber ist Montserrat. Mit der
Vorlagenregel standen hier drei Zeilen Anschrift in einer Schrift, die
fuer kurze Versalien gezeichnet ist.
Was bleibt: der Termin und der Ort auf der Eventkarte, die Datumszeile
der Eventseite, die Feldbeschriftung im Infokasten, die FAQ-Frage, der
Zurueck-Verweis, die Kennzahl der Fehlerseite und der Sprunglink.
Alles kurze, laute Zeilen — genau das, wofuer Montserrat gezeichnet
ist. */
.karte-datum,
.karte-ort,
.karte-mehr,
.event-datum,
.infokasten dt,
.faq summary,
.zurueck,
.fehlerseite .kennzahl,
.sprung {
font-family: var(--schrift-display);
}
/* Gegenstueck dazu: Der Infokasten erbt seine Schrift sonst vom Etikett
darueber, sobald jemand die Liste oben wieder ergaenzt. */
.infokasten dd { font-family: var(--schrift-text); }
/* 20px zwischen Absaetzen — gemessen. Die Vorlage fuhr 16px; bei drei
Absaetzen untereinander summiert sich das sichtbar. */
p { margin: 0 0 1.25rem; }
p:last-child { margin-bottom: 0; }
/* Nur fuer Lesegeraete — 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);
color: var(--akzent-tinte);
font-weight: 700;
}
.sprung:focus { left: 1rem; top: 1rem; }
/* ---------------------------------------------------------------- Raster -- */
.huelle {
width: 100%;
max-width: var(--breite);
margin-inline: auto;
padding-inline: var(--gutter);
}
.huelle-schmal { max-width: var(--breite-schmal); }
.abschnitt { padding-block: clamp(3.5rem, 9vw, 7rem); }
.abschnitt-flaeche { background: var(--flaeche); }
/* Der Eventabschnitt liegt im Original auf einem Clubfoto mit dunklem
Schleier (Deckung 0,48). Das Bild steht im CSS und nicht als im
Markup, weil es Zierde ist und keinen Inhalt traegt. */
.abschnitt-bild {
position: relative;
padding-block: clamp(3.5rem, 9vw, 6.25rem);
/* Dasselbe Foto wie der Seitenkopf von /events/ — eine Datei, zwei
Verwendungen. Wer von der Startseite weitergeht, hat sie schon. */
background: url('../img/banner/events.webp') center center / cover no-repeat;
isolation: isolate;
}
.abschnitt-bild::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
background: rgb(0 0 0 / var(--bild-schleier));
}
/* Abschnittskopf: Ueberschrift plus Unterzeile, zentriert. */
.kopfzeile { text-align: center; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.kopfzeile h2 { font-size: var(--t-h2); line-height: 1; }
.kopfzeile p {
margin: 0.75rem 0 0;
color: var(--tinte-leise);
text-transform: none;
}
/* Die Unterzeilen unter „Next Events" und „Einblick" stehen im Original in
der Akzentfarbe, nicht gedaempft. */
.kopfzeile .unterzeile { color: var(--akzent-text); font-weight: 400; }
/* ---------------------------------------------------------------- Knoepfe -- */
.knopf {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
/* 12px/24px Polster, Zeilenhoehe 20px, **kein Rahmen** — alles gemessen.
Zusammen ergibt das die 44px Hoehe des Originals; mit dem 1,5px-Rahmen
der Vorlage waren es 50.
Die beiden helleren Varianten unten brauchen trotzdem eine Kante. Die
bekommen sie als `box-shadow: inset` statt als `border` — ein Rahmen
wuerde sie wieder hoeher machen als den gefuellten Knopf daneben, und
dann stehen zwei Knoepfe einer Reihe nicht mehr auf einer Linie. */
padding: 0.75rem 1.5rem;
border: 0;
border-radius: var(--r-knopf);
background: var(--akzent);
color: var(--akzent-tinte);
font: inherit;
font-family: var(--schrift-display);
/* **Nach `font: inherit`, nicht davor.** Die Kurzschreibweise setzt
`line-height` mit zurueck — davor notiert, erbte der Knopf wieder die
1,625 des Fliesstexts und war 47 statt 44 Pixel hoch. */
line-height: 20px;
font-weight: 800;
font-size: var(--t-klein);
text-transform: uppercase;
/* Weniger Sperrung als vorher: in der Pille wirkt enge Laufweite ruhiger. */
letter-spacing: 0.01em;
cursor: pointer;
transition: transform 0.25s var(--kurve), box-shadow 0.25s var(--kurve),
background 0.2s ease, color 0.2s ease;
}
/* **Beim Ueberfahren nur abdunkeln, nicht entleeren.**
Die Vorlage nimmt dem Knopf die Fuellung und laesst einen Umriss
stehen. Auf dieser durchgehend dunklen Seite heisst das: Aus einem
roten Knopf wird fast-schwarz mit duennem Rand — der Betreiber hat es
als „grau auf grau" beschrieben, und das trifft es.
Die bestehende Seite setzt `hover:bg-accent/90`, dunkelt also
dieselbe Farbe leicht ab. `filter: brightness(0.9)` macht genau das
und gilt zugleich fuer alle Spielarten — rot, gruen, weiss —, ohne
dass jede ihren eigenen Hoverwert braucht.
Die beiden helleren Varianten bringen ihre eigenen Regeln mit: Auf
einer fast durchsichtigen Flaeche richtet Abdunkeln nichts aus. */
.knopf:hover {
filter: brightness(0.9);
transform: translateY(-1px);
box-shadow: var(--schatten);
}
/* Beim Druecken wieder herunter — das macht den Knopf greifbar. */
.knopf:active { transform: translateY(0) scale(0.98); box-shadow: none; }
/* Pfeil am Ende, wie bei allen Knoepfen des Originals. Als ::after und nicht
im Markup: eine Zierde gehoert nicht in den Quelltext, und Lesegeraete
sollen „Alle Events ansehen" vorlesen, nicht „Alle Events ansehen Pfeil".
**Gezeichnet, nicht gesetzt.** Inter fuehrt U+2192 nicht; als Textzeichen
fiele der Pfeil auf die Systemschrift zurueck und passte in Strichstaerke
und Groesse nicht zur Beschriftung daneben. Als Maske uebernimmt er
`currentColor` und skaliert mit der Schriftgroesse. */
.knopf::after {
content: '';
width: 1em;
height: 1em;
flex: none;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 11h12.17l-5.58-5.59L12 4l8 8-8 8-1.41-1.41L16.17 13H4v-2Z'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 11h12.17l-5.58-5.59L12 4l8 8-8 8-1.41-1.41L16.17 13H4v-2Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.knopf-ohne-pfeil::after { content: none; }
/* **Zwei Stufen unter dem Hauptknopf, nicht eine.**
Vorher trugen beide Zweitknoepfe dieselbe getoente Akzentflaeche. Auf
der hellen Eventseite standen „Lounge reservieren" und „U18-Formular"
damit nebeneinander in demselben blassen Ton — als Flaeche zu schwach,
als Umriss zu unruhig, und ununterscheidbar.
Jetzt: grau gefuellt fuer die zweite Handlung, reiner Umriss fuer die
dritte. Beide aus `--tinte-rgb`, also tonabhaengig — auf hellem Grund
ein helles Grau, auf dunklem ein aufgehelltes. */
/* **Deckend, nicht durchscheinend.** Gemessen am Lounge-Knopf der
bestehenden Eventseite: `#1e1e1e` als volle Flaeche, Rahmen in
derselben Farbe. Eine Flaeche aus 10 % Weiss nimmt die Farbe dessen
an, was dahinter liegt — auf einem Flyerbild sah derselbe Knopf anders
aus als auf dem Seitengrund.
Die Kante kommt als `box-shadow: inset`, nicht als `border` — sonst
waeren diese Knoepfe 3px hoeher als der gefuellte daneben. Siehe
`.knopf`. */
.knopf-leer {
background: #1e1e1e;
color: var(--tinte);
box-shadow: inset 0 0 0 1px rgb(var(--tinte-rgb) / 12%);
}
.knopf-leer:hover {
filter: none;
background: #2a2a2a;
color: var(--tinte);
box-shadow: inset 0 0 0 1px rgb(var(--tinte-rgb) / 24%);
}
/* Dritte Stufe: nur Umriss. Fuer Wege, die daneben stehen duerfen, ohne
um Aufmerksamkeit zu werben — das U18-Formular etwa, das nur eine
Minderheit der Gaeste braucht. */
.knopf-umriss {
background: transparent;
color: var(--tinte);
box-shadow: inset 0 0 0 1px rgb(var(--tinte-rgb) / 28%);
}
.knopf-umriss:hover {
filter: none;
background: rgb(var(--tinte-rgb) / 7%);
color: var(--tinte);
box-shadow: inset 0 0 0 1px rgb(var(--tinte-rgb) / 45%);
}
/* Knopf mit eigenem Symbol davor — dann entfaellt der Pfeil dahinter.
Beides zusammen waere ein Knopf mit zwei Zeichen fuer eine Handlung. */
.knopf-ohne-pfeil::after { content: none; }
.knopf-symbol { display: inline-flex; margin-right: 0.125rem; }
/* **Der Ticketknopf ist der einzige mit Rundung.**
Gemessen auf der Eventseite der bestehenden Seite: volle Spaltenbreite,
16px Polster oben und unten (52px hoch), `rounded-lg` = 8px, Sperrung
0,1em. Die Klasse stand bisher im Markup, ohne dass irgendeine Regel
daran hing — `tools/build.py` setzt sie seit jeher, das Stylesheet
kannte sie nicht. */
.knopf-ticket {
width: 100%;
padding-block: 1rem;
border-radius: 8px;
letter-spacing: 0.1em;
}
.knopf[disabled] { opacity: 0.5; cursor: not-allowed; }
.knopf[disabled]:hover { filter: none; background: var(--akzent); color: var(--akzent-tinte); }
.knopf-reihe {
display: flex;
flex-wrap: wrap;
gap: 0.875rem;
}
/* Die Absendeknoepfe laufen im Original ueber die volle Formularbreite. */
.form .knopf-reihe { display: block; }
.form .knopf-reihe .knopf { width: 100%; }
.icon { flex: none; }
/* ---------------------------------------------------------------- Kopf --- */
/* **Die Kopfzeile steht fest und ist immer deckend.**
Die Geschwisterprojekte lassen sie ueber dem Hero frei im Bild stehen
und erst beim Scrollen einen Grund bekommen. Die Vorlage baggi-hp
macht das nicht: Dort ist die Leiste von der ersten Bildschirmzeile an
schwarz, 80px hoch und bleibt beim Scrollen stehen (gemessen: `fixed`,
`rgb(0,0,0)`, `blur(8px)`).
`fixed` statt `sticky` bedeutet, dass sie keinen Platz im Fluss belegt —
deshalb das `padding-top` auf `body` weiter unten. Beides gehoert
zusammen; wer eines aendert, muss das andere mitziehen. */
.kopf {
position: fixed;
top: 0;
inset-inline: 0;
z-index: 50;
background: #000;
/* Der Weichzeichner traegt bei deckendem Schwarz nichts bei, steht aber
im Original und kostet nichts. Er bleibt, damit eine spaetere
Durchsichtigkeit nur eine Zeile braucht. */
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
isolation: isolate;
}
/* **Kein `[data-fest]`-Umschalter.** `page-common.js` setzt das Attribut
beim Scrollen weiterhin, aber hier haengt nichts mehr daran: Die Leiste
ist oben wie unten dieselbe. Das Attribut bleibt im Markup, weil andere
Projekte dieselbe Datei benutzen — eine tote Regel im Stylesheet waere
schlechter als ein ungenutztes Attribut im DOM.
**Der Weichzeichner muss aus, solange das Menue offen ist.** Nicht aus
Geschmack, sondern weil `backdrop-filter` — wie `transform`, `filter`
und `perspective` — einen umgebenden Block fuer `position: fixed`
erzeugt. `.menu` liegt im Markup innerhalb von `.kopf`; mit
Weichzeichner bezieht sich sein `inset: var(--kopf-hoehe) 0 0` nicht
mehr auf das Sichtfeld, sondern auf die 80 Pixel hohe Kopfzeile. Das
Menue waere dann 0 statt 759 Pixel hoch und der Seiteninhalt schiene
darunter durch. */
.kopf[data-offen='ja'] {
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
/* Die Leiste darunter ist halbdurchsichtig, damit das Bild durchscheint —
deckend wuerde sie zusammen mit dem Streifen daruber einen dicken Block
ergeben. */
/* Kein Grund, kein Schatten — die Zeile steht frei im Bild. Stattdessen
Luft nach oben: Sie rueckt vom Fensterrand weg und bekommt Raum, statt
sich mit einer Flaeche vom Bild abzusetzen.
Oben mehr als unten, damit die Zeile optisch nicht klebt und der Blick
trotzdem zuerst aufs Bild faellt. */
/* Genau `--kopf-hoehe` hoch, Polster symmetrisch. Die Leiste hat oben wie
unten denselben Grund — die Asymmetrie der Geschwisterprojekte war fuer
eine frei im Bild stehende Zeile gedacht und wirkt auf einer Flaeche wie
ein Fehler. */
.kopf-innen {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
height: var(--kopf-hoehe);
}
/* `.huelle` begrenzt die Breite, die Flaeche soll aber ueber die ganze
Fensterbreite laufen. Statt der Begrenzung uebernimmt das Polster die
Zentrierung: Es ist so breit wie der Rand neben der Inhaltsspalte, und
faellt nie unter den Seitenabstand.
**Mit `+ var(--gutter)`.** Die Vorlage laesst ihn weg, weil ihre
Kopfzeile eine schmale, schwebende Pille ist, die bewusst weiter aussen
sitzt als der Inhalt. Hier ist die Leiste eine durchgehende Flaeche, und
die bestehende Seite setzt Marke und Inhalt auf **dieselbe** Kante
(beide bei 144px). Ohne den Zuschlag stand unser Logo 32 Pixel weiter
links als alles darunter. */
.kopf-innen {
max-width: none;
padding-inline: max(var(--gutter),
calc((100% - var(--breite)) / 2 + var(--gutter)));
}
.logo { display: flex; align-items: center; }
/* Auf dem Telefon deutlich kleiner — bei voller Groesse nimmt die Wortmarke
dort die halbe Kopfzeile ein. */
/* 40px — gemessen. Die Vorlage fuehrt 46, was die Wortmarke in der 80px
hohen Leiste zu breit werden liess (192 statt 167 Pixel). */
.logo img { height: 40px; width: auto; }
/* Emsland: Das Festivallogo ist fast quadratisch (813 x 510) und steht
bei 40px Höhe unleserlich klein. 56px passen noch in --kopf-hoehe. */
.logo img { height: 56px; }
@media (max-width: 899px) {
.logo img { height: 34px; }
}
.menu-knopf {
display: inline-flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 6px;
/* 44px bleibt die Trefferflaeche — die Balken sind schmaler. Ohne eigene
Breite zogen sie sich auf die vollen 44px und das Kreuz wirkte wie ein
Scheibenwischer. */
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 Balkenhoehe 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); }
/* **Der Abstand steckt im Punkt, nicht zwischen den Punkten.**
Gemessen am Original: „Home" ist 88px breit bei 55,7px reiner Schrift —
also **16px** Polster je Seite — und zwischen zwei Punkten bleiben nur
5px, in denen der Trennstrich sitzt. (Die Schriftbreite ist auf beiden
Seiten dieselbe 55,7px; nachgemessen mit einem Range um den Textknoten,
nicht aus der Kastenbreite geschaetzt.)
Das ist nicht dasselbe wie eine grosse `gap`: Die Flaeche zum Anklicken
reicht bis dicht an den Nachbarn, statt dass zwischen zwei Punkten ein
toter Streifen liegt. Mit der `gap` der Vorlage (28px, plus 28px vor dem
Strich) war unser Menue 43 Pixel breiter als das Original. */
.menu ul {
display: flex;
align-items: center;
gap: 0;
margin: 0; padding: 0;
list-style: none;
}
/* **Trennstriche zwischen den Punkten.**
Die Geschwisterprojekte haben sie abgeschafft, weil ihre Kopfzeile eine
schmale Pille ist, in der Striche den knappen Raum zerhacken. Hier ist
die Leiste wieder ueber die volle Breite schwarz, und die bestehende
Seite setzt die Striche — in einer langen Zeile geben sie den Punkten
Halt.
Als `::after` und nicht als Zeichen im Markup: ein Lesegeraet soll
„Events" vorlesen und nicht „Events senkrechter Strich". */
@media (min-width: 900px) {
.menu li:not(:last-child)::after {
content: '';
width: 1px;
/* 24px hoch, mittig in der 5px-Luecke — beides gemessen. */
height: 24px;
margin-inline: 2px;
background: rgb(var(--tinte-rgb) / 22%);
}
/* Drei Spalten mit gleich breiten Aussenspalten — nur so stehen die
Punkte wirklich mittig in der Pille. Mit `space-between` verteilten
sie sich zwischen schmalem Logo und breitem Knopf und landeten
rechts; die Marke wirkte dadurch eingequetscht.
Die dritte Spalte bleibt leer: Sie haelt den Platz, den die Marke
links einnimmt, und haelt damit die Mitte. */
/* Punkte rechtsbuendig. Die Grundregel traegt das bereits
(`justify-content: space-between` mit Marke und Navigation als
einzigen Kindern) — hier stand vorher eine Rasterueberschreibung fuer
die mittige Fassung. */
.menu li { display: flex; align-items: center; }
}
/* **`.menu ul a`, nicht `.menu a`.**
Der Menuefuss mit Anschrift und Social-Symbolen liegt im Markup
innerhalb von `.menu`. Mit dem weiteren Selektor bekamen auch seine
Verweise das Polster der Menuepunkte (8px/16px) — und weil die
Symbolkreise 40px breit sind, blieben davon 8px Innenbreite uebrig.
Das 20px-Symbol lief ueber, und Chrome setzte es wie beim Hero auf
linksbuendig statt mittig: alle drei Zeichen sassen 6 Pixel zu weit
rechts in ihrem Kreis.
Derselbe Mechanismus, derselbe Tag — es lohnt, danach zu suchen, wenn
etwas „verschoben" aussieht statt falsch bemessen. */
.menu ul a {
font-family: var(--schrift-display);
font-size: 1rem;
font-weight: 800;
text-transform: uppercase;
/* 0,8px auf 16px — gemessen am Original. */
letter-spacing: 0.05em;
/* 16px seitlich — siehe `.menu ul`. */
padding: 0.5rem 1rem;
transition: color 0.15s ease;
}
/* Keine Unterstreichung — weder fest noch beim Darueberfahren. Der aktive
Punkt ist eingefaerbt, das genuegt als Signal. */
.menu ul a:hover { color: var(--akzent-text); }
.menu ul a[aria-current='page'] { color: var(--akzent-text); }
/* Der Menuefuss gehoert nur ins aufgeklappte Menue auf schmalen Geraeten.
Ohne diese Zeile laeuft er auf dem Schreibtisch ungestaltet im Fluss
unter den Punkten mit — dort gibt es kein Vollbildmenue, in das er
gehoerte. Die Mobilabfrage schaltet ihn wieder ein. */
.menu-fuss { display: none; }
/* Schmale Geraete: das Menue fuellt den Bildschirm. */
@media (max-width: 899px) {
:root { --kopf-hoehe: 80px; }
/* Solange das Menue offen ist, muss die Kopfzeile decken. Auf der
Startseite ist sie ueber dem Hero durchsichtig — ohne das hier stand
ueber dem Menue ein Streifen, durch den das Hero-Video schien. */
.kopf[data-offen='ja'] { background: var(--kopf); }
.menu {
position: fixed;
inset: var(--kopf-hoehe) 0 0;
background: var(--kopf);
padding: 1rem var(--gutter) 3rem;
/* Statt von rechts einzuschieben: aufblenden und leicht aufziehen. Das
Einschieben liess den Inhalt dahinter kurz wandern. */
opacity: 0;
transform: scale(1.03);
/* Geschlossen auch fuer Tastatur und Lesegeraet weg — sonst wandert der
Fokus in Menuepunkte, die niemand sieht. */
visibility: hidden;
transition: opacity 0.28s ease, transform 0.35s var(--kurve),
visibility 0.28s ease;
overflow-y: auto;
display: flex;
flex-direction: column;
}
/* Punkte und Fuss bilden einen Block, den die Flaeche mittig setzt.
Vorher nahm die Liste per `flex: 1` den ganzen Raum und schob den Fuss
an den unteren Rand — dazwischen klaffte ein Loch. */
.menu { justify-content: center; }
.menu ul { flex: none; }
.kopf[data-offen='ja'] .menu {
opacity: 1;
transform: none;
visibility: visible;
}
/* Punkte mittig, gross und untereinander — mit Platz, nicht gedraengt. */
/* Punkte oben beginnen lassen, nicht im freien Raum zentrieren.
Mit `flex: 1` nimmt die Liste die ganze Hoehe zwischen Kopfzeile und
Fuss ein; zentriert darin rutschten die Punkte in die Mitte dieser
Flaeche und standen dadurch weit unterhalb der Kopfzeile.
`min-height: 100%` ist raus — zusammen mit `flex: 1` zog es die Liste
zusaetzlich auf und verstaerkte den Effekt. */
.menu ul {
flex-direction: column;
align-items: center;
gap: 1.5rem;
}
.menu li { justify-content: center; }
.menu ul a {
font-size: clamp(1.75rem, 7vw, 2.25rem);
letter-spacing: 0.05em;
}
/* U18 steht auf dem Telefon in der Kopfzeile neben der Marke, nicht im
aufgeklappten Menue — es braucht dort also keine eigene Regel. */
/* Fuss im aufgeklappten Menue: Anschrift und Symbole. Vier Punkte
allein lassen die Vollbildflaeche leer wirken — hier steht, was man
sonst erst im Seitenfuss findet. */
.menu-fuss {
margin-top: 2.5rem;
display: grid;
justify-items: center;
gap: 0.35rem;
text-align: center;
}
.menu-fuss p { color: var(--tinte-still); font-size: var(--t-klein); margin: 0; }
.menu-fuss a { font-size: var(--t-klein); color: var(--tinte-leise); }
.menu-fuss .fuss-social { margin-top: 0.75rem; }
/* Ein sehr leiser Schein in der Markenfarbe nimmt der Flaeche das
Tafelhafte, ohne sie einzufaerben. */
.menu {
background-image: radial-gradient(70% 40% at 50% 0%,
rgb(var(--akzent-rgb) / 7%), transparent 70%);
}
/* Die Punkte laufen nacheinander ein, statt alle gleichzeitig
aufzutauchen. Die Verzoegerung 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; }
/* Wer Bewegung abbestellt hat, bekommt sie auch hier nicht. */
@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; }
}
/* ----------------------------------------------------------------- Hero -- */
.hero {
position: relative;
/* Feste Hoehe als `height`, nicht als `aspect-ratio` mit `max-height`:
bei dieser Kombination zieht Chrome die Breite mit und laesst auf einem
breiten, flachen Fenster rechts eine dunkle Flaeche stehen.
Auch keine `vh`-Einheiten — sonst springt die Hoehe auf dem Telefon,
wenn die Adressleiste ein- und ausfaehrt. */
height: clamp(500px, 71svh, 790px);
display: grid;
place-items: center;
overflow: hidden;
background: var(--nacht);
text-align: center;
}
.hero-medium {
position: absolute;
inset: 0;
z-index: 0;
}
.hero-medium img, .hero-medium video {
width: 100%; height: 100%;
object-fit: cover;
object-position: center;
}
/* Schleier, damit die Schrift auf dem Video traegt. Dunkel, nicht hell —
die bestehende Seite setzt weisse Schrift auf das Clubvideo. */
.hero::after {
content: '';
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(180deg, rgb(0 0 0 / 55%) 0%, rgb(0 0 0 / 35%) 45%, rgb(0 0 0 / 75%) 100%);
}
/* **Variante: wechselnder Hintergrund** — aus excalibur-hp zurueck in die
Vorlage (Auftrag R9). Hier ungenutzt. Elementors Hintergrund-Diashow
als reines CSS: Bilder als uebereinander in `.hero-medium`, jedes
mit derselben Animation, um ein Viertel versetzt (5 s Standzeit, 0,5 s
Blende). Ohne Bewegungswunsch steht das erste Bild allein. */
.hero--diashow .hero-medium img {
position: absolute;
inset: 0;
opacity: 0;
animation: hero-diashow 20s linear infinite;
}
.hero--diashow .hero-medium img:first-child { opacity: 1; }
.hero--diashow .hero-medium img:nth-child(2) { animation-delay: 5s; }
.hero--diashow .hero-medium img:nth-child(3) { animation-delay: 10s; }
.hero--diashow .hero-medium img:nth-child(4) { animation-delay: 15s; }
@keyframes hero-diashow {
0% { opacity: 0; }
2.5% { opacity: 1; }
25% { opacity: 1; }
27.5% { opacity: 0; }
100% { opacity: 0; }
}
/* `animation: none`, nicht nur kurz: Die allgemeine Regel kuerzt jede
Animation auf 0,01 ms — sie liefe sofort bis 100 % durch und liesse auch
das erste Bild auf Deckung 0 stehen. */
@media (prefers-reduced-motion: reduce) {
.hero--diashow .hero-medium img { animation: none; }
}
/* **Variante: Vollbild-Pause** — aus emslandbeach-hp (01.11.2026), Auftrag
R9. Für eine Seite, die nur aus dem Hero besteht: zwischen zwei
Festivals, vor dem ersten Termin. Füllt den Bildschirm, steht auf der
Markenfarbe statt auf `--nacht`, und der Knopf dreht sich um — ein
Akzentknopf auf Akzentgrund wäre unsichtbar.
Der Schleier ist dunkel und gleichmäßig, nicht der Verlauf von `.hero`:
Das Foto ist schon in die Markenfarbe eingefärbt. Er hebt weiße Schrift
auf dem Pink von 3,93:1 über 4,5:1. Die Startseite hat keine
Kopfzeile — siehe `body:not(:has(.kopf))` in der Grundlage. */
.hero--vollbild {
height: auto;
min-height: 100svh;
padding-block: clamp(3rem, 8vw, 5rem);
background: var(--akzent);
}
.hero--vollbild .hero-medium img { object-position: left top; }
.hero--vollbild::after { background: rgb(0 0 0 / 24%); }
.hero--vollbild .hero-logo {
width: min(420px, 78%);
min-width: 0;
margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}
.hero--vollbild .hero-satz {
max-width: 34rem;
margin: 0 auto 2rem;
font-size: 1.0625rem;
line-height: 1.6;
/* Volle Tinte statt `--tinte-leise`: Das Grau verschwimmt auf dem
Foto. Der Schatten trägt die Zeilen dort, wo sie auf dem Telefon über
der hellen Bühne liegen — der Schleier allein reicht da nicht. */
color: var(--tinte);
text-shadow: 0 1px 12px rgb(0 0 0 / 55%);
}
.hero--vollbild .hero-titel { text-shadow: 0 2px 24px rgb(0 0 0 / 35%); }
.hero--vollbild .knopf {
background: var(--tinte);
color: var(--nacht);
}
.hero--vollbild .knopf:hover { background: var(--tinte); color: var(--akzent); }
.hero-text {
position: relative;
z-index: 2;
}
/* Logo ueber der Ueberschrift. Die Breiten sind die des Originals: 10 % der
Spalte auf dem Schreibtisch, 28 % ab Tablet abwaerts. */
.hero-logo {
width: 8%;
min-width: 78px;
margin: 0 auto 1rem;
}
@media (max-width: 1024px) {
.hero-logo { width: 28%; }
}
/* Der Hero-Titel ist ein