/* ============================================================================
maus geht aus — Design und Layout
----------------------------------------------------------------------------
Neubau auf dem Clubinio-Stack, technische Vorlage bosporus-hp (Systemvokabular
aus velvet-hp und cosmopolar-hp). Plakativ wie die beiden A3-Flyer: Weinrot
und Koralle im Wechsel, Montserrat Bold für den großen Spruch, Montserrat
Medium für die kleinen Angaben (Veranstalterin, über den Betreiber am
11.11.2026). Eckige Kanten, keine Rundungen.
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 -- */
/* Eine Familie für alles, Vorgabe der Veranstalterin. Der Latin-Auszug deckt
Umlaute und ß ab. Lizenz: assets/fonts/LIZENZEN.md */
@font-face {
font-family: 'Montserrat';
src: url('../fonts/montserrat-latin.woff2') format('woff2');
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
/* ----------------------------------------------------------------- Token -- */
:root {
/* Marke, gemessen am 11.11.2026:
Weinrot #5d0504 Logo IMG_8212 (Kreis) und IMG_8218 (Wortmarke)
Koralle #eb6f6c Grund des hellen Flyers (Koralle-Struktur)
Rosa #eda1a4 Schrift des dunklen Flyers
Die Logo-Koralle #d15b5b steckt nur in den Bildern; als Fläche trägt
Weinrot darauf 3,4 : 1, die Flyer-Koralle 4,7 : 1 — deshalb die. */
--weinrot: #5d0504;
--weinrot-tief: #3f0302; /* Fuß, Termin auf der Eventkarte */
--koralle: #eb6f6c;
--rosa: #eda1a4;
--papier: #fbf4ef; /* Rand der Polaroids */
/* Systemtoken, für den weinroten Grund belegt. Koralle-Abschnitte belegen
sie lokal um (.abschnitt--koralle). */
--grund: var(--weinrot);
--flaeche: #6f0d0b; /* Felder auf Weinrot */
--box-hell: #7a1714; /* Flyer beim Laden, Feld beim Darüberfahren */
--karte: var(--rosa);
--kopf: var(--weinrot);
--linie: #8a2c2a;
--schrift-display: 'Montserrat', 'Arial Black', Arial, sans-serif;
--schrift-text: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
--tinte: var(--rosa);
--tinte-leise: #d99596; /* 5,8 : 1 auf Weinrot */
--tinte-still: #c98a8c; /* 5,0 : 1 auf Weinrot */
--akzent: var(--koralle); /* 4,7 : 1 auf Weinrot */
--akzent-tinte: var(--weinrot); /* Schrift auf Koralle */
--akzent-tief: #f08481; /* Überfahren */
--akzent-hell: var(--rosa);
--r-knopf: 0;
--r-feld: 0;
--r-karte: 0;
--r-klein: 0;
/* Hoehe des Abschnitts unter der Perforation (Systemmaß der Eventkarte). */
--abriss: 46px;
--schatten: none;
--schatten-hoch: none;
/* Schatten der Polaroids: sie liegen auf der Fläche, nicht in ihr. */
--schatten-abzug: 0 14px 34px rgb(30 0 0 / 0.38), 0 2px 6px rgb(30 0 0 / 0.25);
--kurve: cubic-bezier(0.32, 0.72, 0, 1);
--kurve-weich: cubic-bezier(0.22, 0.61, 0.36, 1);
/* Haken fuer die eigenen Kaestchen. */
--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");
/* Der Vierstrahlstern aus dem Logo, als Maske: er nimmt `currentColor`
bzw. die Hintergrundfarbe des Elements an. */
--stern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C12.9 7.1 16.9 11.1 24 12C16.9 12.9 12.9 16.9 12 24C11.1 16.9 7.1 12.9 0 12C7.1 11.1 11.1 7.1 12 0Z'/%3E%3C/svg%3E");
--breite: 1320px;
--breite-schmal: 760px;
--gutter: clamp(1rem, 4vw, 2.5rem);
/* Hoehe der Kopfzeile, nachgemessen in der Sichtprüfung. */
--kopf-hoehe: 72px;
--laufband: 56px;
/* Typografie. Der Hero rechnet mit der längsten Zeile „WANNA HAVE“: Sie
muss bei 390 px in der Hülle einzeilig bleiben. */
--t-hero: clamp(2.75rem, 9vw, 8.25rem);
--t-h1: clamp(2.5rem, 7vw, 5rem);
--t-h2: clamp(2.75rem, 8vw, 6.5rem);
--t-h3: clamp(1.125rem, 1rem + 0.5vw, 1.5rem);
--t-text: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
--t-klein: 0.875rem;
}
/* --------------------------------------------------------------- Grundlage -- */
*, *::before, *::after { box-sizing: border-box; }
/* 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(--grund);
color: var(--tinte);
font-family: var(--schrift-text);
font-size: var(--t-text);
line-height: 1.55;
-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);
font-weight: 800;
line-height: 1;
text-transform: uppercase;
letter-spacing: -0.04em;
}
p { margin: 0 0 1rem; }
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. */
/* Abschnittskopf: Ueberschrift plus Unterzeile, zentriert. */
.kopfzeile { text-align: center; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.kopfzeile h2 { font-size: var(--t-h2); }
.kopfzeile p {
margin: 0.75rem 0 0;
color: var(--tinte-leise);
text-transform: none;
}
/* ---------------------------------------------------------------- Knoepfe -- */
.knopf {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.85rem 1.75rem;
border: 1.5px solid var(--akzent);
border-radius: var(--r-knopf);
background: var(--akzent);
color: var(--akzent-tinte);
font: inherit;
font-family: var(--schrift-display);
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;
}
.knopf:hover {
background: transparent;
color: var(--akzent);
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='M5 12h12.2l-4.6-4.6L14 6l6 6-6 6-1.4-1.4 4.6-4.6H5v-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='M5 12h12.2l-4.6-4.6L14 6l6 6-6 6-1.4-1.4 4.6-4.6H5v-2Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.knopf-ohne-pfeil::after { content: none; }
.knopf-leer {
background: transparent;
color: var(--tinte);
/* Gedaempfter Rahmen statt voller Kontrast — ein zweiter Knopf soll den
ersten nicht ueberschreien. */
border-color: var(--linie);
}
.knopf-leer:hover {
background: var(--tinte);
color: var(--grund);
border-color: var(--tinte);
}
.knopf[disabled] { opacity: 0.5; cursor: not-allowed; }
.knopf[disabled]:hover { 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 --- */
.kopf {
position: sticky;
top: 0;
z-index: 50;
background: transparent;
isolation: isolate;
transition: background 0.25s ease;
}
/* Ueber dem Hero steht die Zeile frei im Bild. Sobald gescrollt wird,
bekommt sie einen Grund — darunter liegen Text und Karten, und ohne
Grund staende die Schrift mitten darin.
**Nur die Farbe aendert sich, nicht die Hoehe.** Eine klebende Zeile
belegt weiterhin ihren Platz im Fluss; aenderte sich dabei die Hoehe,
ruckte der gesamte Inhalt darunter. */
.kopf[data-fest='ja'] {
background: var(--grund);
}
/* **Weichzeichner 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 war dann 64 statt
764 Pixel hoch und der Seiteninhalt schien darunter durch — aber nur im
gescrollten Zustand, weil `data-fest` erst dort gesetzt wird.
Die Zeile darueber gibt der Kopfzeile bei offenem Menue ohnehin eine
deckende Flaeche; der Weichzeichner hat dann nichts mehr zu tun. */
.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. */
.kopf-innen {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
min-height: 56px;
padding-top: 1.75rem;
padding-bottom: 0.5rem;
transition: padding 0.25s ease;
}
/* Gescrollt sitzt die Schrift mittig in der Leiste statt tief darin. Oben
steht sie frei im Bild und darf nach unten haengen; auf einem Grund
wirkt dieselbe Asymmetrie wie ein Fehler.
**Die Summe bleibt gleich** (28+8 oben, 18+18 gescrollt — beides 36px).
Eine klebende Zeile belegt weiter ihren Platz im Fluss; aenderte sich
die Hoehe, ruckte der gesamte Inhalt darunter beim Umschalten. */
.kopf[data-fest='ja'] .kopf-innen {
padding-top: 1.125rem;
padding-bottom: 1.125rem;
}
/* `.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.
**Ohne `+ var(--gutter)`.** Mit dem Zuschlag war die Leiste 80px
schmaler als der Inhalt darunter — die Marke stand 40px weiter innen
als alles auf der Seite und die Zeile wirkte verzogen. */
.kopf-innen {
max-width: none;
padding-inline: max(var(--gutter), calc((100% - var(--breite)) / 2));
}
.logo { display: flex; align-items: center; }
/* Auf dem Telefon deutlich kleiner — bei voller Groesse nimmt die Wortmarke
dort die halbe Kopfzeile ein. */
.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;
/* 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); }
.menu ul {
display: flex;
align-items: center;
gap: clamp(1rem, 2.2vw, 1.75rem);
margin: 0; padding: 0;
list-style: none;
}
/* Keine Trennstriche. Sie stammen aus der fruheren Vollbreitenleiste, wo
sie Ordnung in eine lange Zeile brachten. In der Pille zerhacken sie den
knappen Raum — der Entwurf kommt ohne sie aus. */
@media (min-width: 900px) {
/* 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 a {
font-family: var(--schrift-display);
font-size: 1rem;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.04em;
padding-block: 0.5rem;
transition: color 0.15s ease;
}
/* Keine Unterstreichung — weder fest noch beim Darueberfahren. Der aktive
Punkt ist eingefaerbt, das genuegt als Signal. */
.menu a:hover { color: var(--akzent); }
.menu a[aria-current='page'] { color: var(--akzent); }
/* 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 a {
font-size: clamp(1.75rem, 7vw, 2.25rem);
letter-spacing: -0.01em;
}
/* 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; }
/* 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);
margin-top: calc(var(--kopf-hoehe) * -1);
display: grid;
place-items: center;
overflow: hidden;
background: var(--grund);
text-align: center;
}
.hero-text {
position: relative;
z-index: 2;
padding-top: var(--kopf-hoehe);
}
/* Logo ueber der Ueberschrift. Die Breiten sind die des Originals: 10 % der
Spalte auf dem Schreibtisch, 28 % ab Tablet abwaerts. */
/* Der Hero-Titel ist ein , kein
— die H1 der Seite steht statisch
und fuer Lesegeraete unsichtbar im Markup. Sonst waeren es zwei. */
.hero-titel {
margin: 0 0 1.25rem;
font-family: var(--schrift-display);
font-size: var(--t-hero);
font-weight: 900;
line-height: 1.02;
text-transform: uppercase;
letter-spacing: 0;
}
.hero-titel span { display: block; }
/* Knapper als die uebrigen Knoepfe. Die bestehende Seite macht es ebenso —
im Hero steht der Knopf unter einer sehr grossen Ueberschrift und muss
sie nicht noch einmal ueberbieten. */
.hero-text .knopf {
padding: 0.7rem 1.4rem;
font-size: 0.8125rem;
}
/* --------------------------------------------------------------- Karten -- */
/* Drei Spalten, Abstand 20px — und ab Tablet abwaerts eine Spalte. Das
Original schaltet bei 1024 px direkt auf einspaltig, nicht stufenweise. */
.karten {
display: grid;
gap: 20px;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 1024px) {
.karten { grid-template-columns: 1fr; }
}
.karte {
display: flex;
flex-direction: column;
/* Die Kerben sind **Aussparungen im Kartenhintergrund**, keine farbigen
Kreise. Zwei Kreise in der Hintergrundfarbe waeren nur auf schwarzem
Grund unsichtbar — der Eventabschnitt der Startseite liegt aber auf
einem Foto, dort staenden sie als dunkle Punkte. So stanzen sie
wirklich, und es zeigt sich, was immer dahinterliegt. */
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 uebernimmt, ohne ihn einzeln zu
runden — sonst steht an der Oberkante eine Ecke ueber. */
overflow: hidden;
box-shadow: var(--schatten);
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(--box-hell); }
/* Flyer sind 16:9 — ein quadratischer Beschnitt schneidet den Titel weg. */
.karte-bild img {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
}
.karte-text {
display: flex;
flex-direction: column;
gap: 0.375rem;
padding: 0.875rem 0.9375rem 1rem;
flex: 1;
}
/* Der Abschnitt unter der Perforation, wie bei einer Eintrittskarte:
links Termin und Uhrzeit, rechts der Weg zur Veranstaltung.
Feste Hoehe aus `--abriss`, damit die Trennlinie genau dort sitzt, wo die
Kerben im Kartenhintergrund ausgespart sind. Waechst der Abschnitt mit
seinem Inhalt, wandert die Linie und die Stanzung passt 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;
/* Plakat-Fassung: keine Strichlinie; der Abriss setzt sich als eigene
Tonstufe ab (siehe .karte-abriss im Abschnitt Plakat). */
border-top: 0;
font-size: 0.75rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.karte-termin { color: var(--tinte-leise); white-space: nowrap; }
.karte-infos {
display: inline-flex;
align-items: center;
gap: 0.3rem;
color: var(--akzent);
transition: gap 0.22s var(--kurve);
}
/* Der Pfeil rueckt beim Darueberfahren ein Stueck weiter — die Karte ist
ein Link, und das zeigt sie damit. */
.karte:hover .karte-infos { gap: 0.6rem; }
.karte-titel {
font-size: var(--t-h3);
line-height: 1.2;
}
/* Ortszeile zwischen Titel und „mehr erfahren" — im Original in der
Akzentfarbe, wie die Datumszeile. */
.karte-ort {
margin: 0;
color: var(--akzent);
font-size: var(--t-klein);
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.04em;
}
/* Monatsueberschrift der Eventliste. */
/* ------------------------------------------------------- Seitenkopf (Unter) -- */
/* Feste Hoehe. Ohne sie richtet sich jeder Kopf nach der Laenge seines
Einleitungssatzes und die Unterseiten stehen unterschiedlich hoch. */
.seitenkopf {
/* Hoehe waechst mit der Fensterbreite, statt auf dem Telefon als flacher
Streifen dazustehen, durch den das Bild stark beschnitten wird. */
min-height: clamp(320px, 34vw, 460px);
display: grid;
align-content: center;
/* Der Banner laeuft unter die Kopfzeile, damit die schwebende Leiste
auch hier auf einem Bild sitzt und nicht auf leerer Flaeche.
Negativer Rand **und** Polster gehoeren zusammen: Der Rand schiebt den
Banner unter die Leiste, das Polster holt den Inhalt wieder in die
sichtbare Flaeche. Eines ohne das andere drueckt ihn aus der Mitte —
genau das war hier frueher der Fall, als das Polster ohne Gegenstueck
stand. */
margin-top: calc(var(--kopf-hoehe) * -1);
padding-top: calc(var(--kopf-hoehe) + clamp(2.5rem, 7vw, 4rem));
padding-bottom: clamp(2.5rem, 7vw, 4rem);
/* `background-color`, nicht die Kurzschreibweise `background`. Das
Element traegt beide Klassen (`seitenkopf seitenkopf-bild`), und die
Kurzschreibweise setzt alle uebrigen background-Werte zurueck — damit
fiel `background-size: cover` aus `.seitenkopf-bild` auf `auto`
zurueck und das Bannerbild lag in Originalgroesse in der Flaeche,
also dreifach vergroessert. Das Bild ueberlebte nur, weil die
Banner-Regeln hoehere Spezifitaet haben. */
background-color: var(--flaeche);
border-bottom: 1px solid var(--linie);
text-align: center;
}
/* Eigene Skala, nicht `--t-h1`: Die Bannerueberschrift steht allein auf
einer grossen Flaeche und darf deutlich groesser anfangen als eine
Ueberschrift im Fliesstext. */
/* Auf dem Telefon traegt die Ueberschrift den ganzen Banner — sie darf
dort deutlich groesser anfangen. 13vw heisst rund 51px auf einem
390px-Geraet statt der vorherigen 40px. */
.seitenkopf h1 {
font-size: clamp(3rem, 13vw, 4.5rem);
/* „Datenschutzerklärung" ist bei 51px in Versalien 759px breit und lief
bei 390 aus dem Bild (gemessen 03.11.2026, in der Vorlage genauso).
Silbentrennung nach lang="de", nur wo das Wort sonst nicht passt. */
hyphens: auto;
overflow-wrap: break-word;
}
.seitenkopf p {
margin: 1rem auto 0;
max-width: 54ch;
color: var(--tinte-leise);
text-transform: none;
}
.seitenkopf .unterzeile {
color: var(--akzent);
font-weight: 400;
font-size: clamp(0.9375rem, 2.6vw, 1.125rem);
}
/* Auf dem Telefon traegt der Banner ein festes Seitenverhaeltnis statt einer
Mindesthoehe. Der Umweg ueber eigene Hochformat-Zuschnitte war falsch: Ein
schmaler Ausschnitt aus einem Breitbild heisst staerker vergroessern, nicht
schwaecher. Und eine feste Mindesthoehe bei schmaler Breite erzwingt genau
diese Vergroesserung, weil `cover` die Hoehe fuellen muss.
**3:2 statt 16:9 — gemessen, nicht geschaetzt.** Mit dem Verhaeltnis des
Bildes (16:9, die Datei ist 1536x864) war das Band bei 390 Pixel Breite
219 Pixel hoch. Davon gehen 80 fuer die schwebende Kopfzeile ab, es
bleiben 139 fuer 96 Pixel Text: 21 Pixel Luft ueber der Ueberschrift,
22 darunter. Die Schrift klebte oben an der Leiste und unten an der
Kante — genau das wirkte gequetscht.
Das Polster ist hier **nicht** der Hebel: `align-content: center`
zentriert den Inhalt, sobald er die Inhaltsbox ueberlaeuft, und das tut
er auf jeder Telefonbreite. Ein kleineres Polster verschiebt deshalb
nichts. Nur mehr Hoehe hilft.
3:2 ergibt 260 Pixel, also 180 nutzbare statt 139 — die Luft verdoppelt
sich auf gut 40 Pixel. Der Preis sind rund 16 Prozent seitlicher
Beschnitt. Das ist der Tausch: etwas weniger Bild gegen Text, der nicht
zwischen zwei Kanten klemmt. */
@media (max-width: 759px) {
}
/* ------------------------------------------------------------ Formulare -- */
.form { display: grid; gap: 1.125rem; }
/* h2 traegt global keinen Abstand; ueber einem Formular braucht sie einen,
sonst sitzt sie auf der ersten Feldbeschriftung. */
#kontaktformular h2 { margin-bottom: 1.5rem; }
/* Im Original stehen kurze Felder nebeneinander, nicht alle untereinander.
`auto-fit` statt fester Spalten: unter ~420px je Feld bricht die Reihe
von selbst um, ohne eigene Abfrage. */
.form-reihe {
display: grid;
gap: 1.125rem;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
}
.feld { display: grid; gap: 0.4rem; }
/* Im Original stehen die Beschriftungen in Normalschrift und gemischter
Schreibung, nicht als fette Versalien. */
.feld > span {
font-size: var(--t-klein);
font-weight: 400;
color: var(--tinte-leise);
}
.feld-pflicht { color: var(--akzent); }
input[type='text'], input[type='email'], input[type='tel'],
input[type='number'], textarea, select {
width: 100%;
padding: 0.95rem 1.05rem;
/* Kein Rahmen. Die Flaeche allein zeigt, wo geschrieben wird — eine Linie
um jedes Feld zieht das Formular in Kaestchen auseinander. */
border: 0;
border-radius: var(--r-feld);
background: var(--flaeche);
color: var(--tinte);
font: inherit;
transition: box-shadow 0.2s ease, background 0.2s ease;
}
:is(input[type='text'], input[type='email'], input[type='tel'],
input[type='number'], textarea, select):hover:not(:focus) {
background: var(--box-hell);
}
textarea {
min-height: 150px;
resize: vertical;
border-radius: var(--r-feld);
}
/* Fokus als schmaler Ring aussen. Er liegt ueber dem Rand, nicht darin,
und verschiebt deshalb nichts. */
input:focus, textarea:focus, select:focus {
outline: 0;
background: var(--flaeche);
box-shadow: 0 0 0 2px var(--akzent);
}
::placeholder { color: var(--tinte-still); }
/* Das Fieldset traegt im Original keinen Rahmen — nur die Beschriftung
darueber, wie bei jedem anderen Feld. */
fieldset.feld {
border: 0;
padding: 0;
margin: 0;
min-width: 0;
}
fieldset.feld legend { padding: 0; }
.zustimmung {
display: flex;
align-items: flex-start;
gap: 0.7rem;
font-size: var(--t-klein);
color: var(--tinte-leise);
}
.zustimmung input { margin-top: 0.1rem; }
/* Ein eigenes Kaestchen fuer beide Stellen. Das Systemkaestchen ist ein
weisses Quadrat und passt zu nichts hier; gefuellt statt umrandet spricht
es dieselbe Sprache wie die Eingabefelder. */
.auswahl input, .zustimmung input {
appearance: none;
-webkit-appearance: none;
flex: none;
width: 20px; height: 20px;
border: 0;
border-radius: 0;
background: var(--linie);
cursor: pointer;
transition: background 0.2s ease;
}
.auswahl label:hover input:not(:checked),
.zustimmung:hover input:not(:checked) { background: var(--tinte-still); }
.auswahl input:checked, .zustimmung input:checked {
background: var(--haken) var(--akzent) center / 13px 13px no-repeat;
}
.auswahl input:focus-visible, .zustimmung input:focus-visible {
outline: 2px solid var(--akzent);
outline-offset: 2px;
}
.zustimmung a { color: var(--akzent); text-decoration: underline; }
/* Honigtopf. Fuer Menschen unsichtbar, fuer Skripte verlockend.
Nicht `display: none` — manche Skripte ueberspringen genau das. */
.honigtopf {
position: absolute;
left: -9999px;
width: 1px; height: 1px;
overflow: hidden;
}
.rueckmeldung {
margin: 0;
font-size: var(--t-klein);
min-height: 1.4em;
}
.rueckmeldung[data-state='ok'] { color: var(--akzent); }
.rueckmeldung[data-state='fehler'] { color: var(--akzent); font-weight: 600; }
.rueckmeldung[data-state='laeuft'] { color: var(--tinte-still); }
/* ------------------------------------------------------------ Rechtstext -- */
.rechtstext { max-width: 72ch; }
.rechtstext h2 {
font-size: var(--t-h3);
margin: 2.5rem 0 0.875rem;
text-transform: none;
}
.rechtstext h3 {
font-size: 1.0625rem;
margin: 1.75rem 0 0.5rem;
text-transform: none;
}
.rechtstext p, .rechtstext li { color: var(--tinte-leise); }
.rechtstext a { color: var(--akzent); text-decoration: underline; }
.rechtstext ul { padding-left: 1.25rem; }
.rechtstext address { font-style: normal; margin-bottom: 1.5rem; }
/* ------------------------------------------------------------- Newsletter -- */
/* Baustein aus garage-hp (dort nach dem Clubinio-Plugin gemessen), hier
als Kasten auf der Startseite (Betreiber, 03.11.2026). Geht als
Systembaustein in die Vorlage zurück, siehe docs/README.md. */
.newsletter .form {
display: block;
padding: 0;
border: 0;
border-radius: 0;
background: none;
}
.newsletter-zeile {
display: flex;
max-width: 460px;
height: 48px;
overflow: hidden;
border: 0;
border-radius: 0;
background: none;
}
.newsletter-zeile input {
flex: 1;
min-width: 0;
padding: 0 18px;
border: 0;
background: transparent;
color: var(--tinte);
font: inherit;
font-family: var(--schrift-text);
font-size: 15px;
line-height: 1.5;
}
.newsletter-zeile input:focus { outline: none; }
.newsletter-zeile:focus-within { outline: 2px solid var(--akzent); outline-offset: 2px; }
.newsletter-zeile .knopf {
padding: 12px 22px;
font-family: var(--schrift-text);
border-radius: 3px;
font-size: 13.6px;
font-weight: 800;
line-height: 1.5;
text-transform: uppercase;
box-shadow: none;
}
.newsletter .zustimmung {
max-width: 460px;
margin-top: 9px;
font-family: var(--schrift-text);
font-size: 11.52px;
color: var(--tinte-leise);
}
.newsletter .rueckmeldung { margin-top: 12px; max-width: 460px; }
/* ------------------------------------------------------------------ Fuss -- */
/* Zwei Spalten wie im Original: links Marke und Rechtslinks, rechts die
Anfahrt samt Social-Symbolen und dem Clubinio-Zeichen. */
.fuss {
background: var(--kopf);
padding-block: clamp(2.5rem, 6vw, 4rem);
}
.fuss-raster {
display: grid;
gap: clamp(2rem, 5vw, 4rem);
grid-template-columns: 1fr;
}
@media (min-width: 760px) {
.fuss-raster { grid-template-columns: 1.4fr 1fr; }
}
.fuss p, .fuss li { color: var(--tinte-leise); font-size: var(--t-klein); }
.fuss a:hover { color: var(--akzent); }
/* Impressum und Datenschutz stehen im Original nebeneinander unter dem
Text, in der Akzentfarbe — keine eigene Spalte mit Ueberschrift. */
.fuss-recht {
display: flex;
flex-wrap: wrap;
gap: 1.25rem;
margin-top: 1.25rem;
}
.fuss-recht a { color: var(--akzent); }
/* Symbole ohne Rahmen, in der Akzentfarbe — so stehen sie im Original. */
.fuss-social { display: flex; gap: 0.75rem; margin: 1.25rem 0; }
.fuss-social a { color: var(--akzent); }
.fuss-social a:hover { color: var(--tinte); }
.clubinio { display: inline-block; }
.clubinio img { height: 38px; width: auto; }
/* ---------------------------------------------------------- maus geht aus -- */
/* Plakatfassung (Betreiber, 11.11.2026). Alles hier sind Varianten der
Systemklassen (`.hero--plakat`, `.abschnitt--weinrot`, `.abschnitt--koralle`,
`.newsletter--leiste`) oder neue Bausteine mit Namen nach ihrer Aufgabe
(`.laufband`, `.fotostreifen`, `.pinnwand`, `.polaroid`, `.spruchband`). */
body { font-weight: 500; }
/* Überschriften: Montserrat Bold in Versalien, leicht gesperrt wie auf dem
Flyer. */
h1, h2, h3, h4 {
font-weight: 700;
line-height: 1;
text-transform: uppercase;
letter-spacing: 0.01em;
}
/* Kopfzeile: weinrote Leiste, die Wortmarke in Rosa. */
.kopf,
.kopf[data-fest='ja'] {
background: var(--weinrot);
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
.kopf { transition: translate 0.4s var(--kurve); }
.kopf[data-weg='ja'] { translate: 0 -100%; }
.kopf-innen,
.kopf[data-fest='ja'] .kopf-innen { padding-top: 0.875rem; padding-bottom: 0.875rem; }
.logo img { height: 30px; }
.menu-knopf span { background: var(--rosa); }
.menu a {
font-size: 0.9375rem;
font-weight: 700;
letter-spacing: 0.12em;
}
.menu a:hover { color: var(--koralle); }
.menu .knopf { padding: 0.6rem 1.1rem; letter-spacing: 0.12em; }
.menu .knopf:hover { color: var(--koralle); }
@media (max-width: 899px) {
:root { --kopf-hoehe: 72px; }
.logo img { height: 24px; }
.menu a { font-size: clamp(2rem, 10vw, 3rem); letter-spacing: 0.02em; }
.menu .knopf { font-size: 1.125rem; padding: 0.9rem 1.75rem; }
}
/* Menü auf dem Telefon (Betreiber, 11.11.2026: „kreativer, wie clubvelvet
mit Bild, nicht 1:1“): die tiefrote Pinselstruktur, riesige Punkte
linksbündig, der Stern markiert den Punkt unter dem Finger, unten rechts
ein Polaroid mit Klebestreifen. */
.menu-abzug { display: none; }
@media (max-width: 899px) {
.menu {
justify-content: flex-start;
padding: clamp(1.5rem, 5vh, 2.75rem) var(--gutter) 2.5rem;
background: var(--weinrot-tief) url('../img/textur/tiefrot-hoch.webp') center / cover no-repeat;
}
.menu ul { align-items: flex-start; gap: 0.2rem; }
.menu li { justify-content: flex-start; }
.menu li:not(.menu-aktion) a {
display: inline-flex;
align-items: center;
gap: 0.25em;
font-size: clamp(2.75rem, 13vw, 4.25rem);
line-height: 1.08;
letter-spacing: 0.01em;
}
/* Hinter dem Wort, nicht davor: davor nähme er auch unsichtbar Platz ein
und die Punkte stünden eingerückt neben dem Tickets-Knopf. */
.menu li:not(.menu-aktion) a::after {
content: '';
width: 0.42em;
height: 0.42em;
background: var(--koralle);
-webkit-mask: var(--stern) center / contain no-repeat;
mask: var(--stern) center / contain no-repeat;
scale: 0;
transition: scale 0.25s var(--kurve);
}
.menu li:not(.menu-aktion) a:is(:hover, :active, :focus-visible, [aria-current])::after { scale: 1; }
.menu li:not(.menu-aktion) a:is(:hover, :active) { color: var(--rosa); }
.menu .menu-aktion { margin-top: 1.5rem; }
.menu-fuss { position: relative; z-index: 1; justify-items: start; margin-top: 2rem; text-align: left; }
.menu-fuss .menu-mail { color: var(--rosa); font-size: var(--t-klein); letter-spacing: 0.14em; text-transform: uppercase; }
.menu-fuss .menu-mail:empty { display: none; }
.menu-abzug {
display: block;
position: absolute;
right: -4vw;
bottom: 3.5vh;
width: min(40vw, 210px);
margin: 0;
padding: 8px 8px 30px;
background: var(--papier);
box-shadow: var(--schatten-abzug);
rotate: 8deg;
translate: 0 40px;
opacity: 0;
transition: translate 0.6s var(--kurve) 0.2s, opacity 0.4s ease 0.2s;
}
.menu-abzug::before {
content: '';
position: absolute;
top: -12px;
left: 50%;
width: 84px;
height: 24px;
background: rgb(237 161 164 / 0.78);
translate: -50% 0;
rotate: -6deg;
}
.menu-abzug img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.kopf[data-offen='ja'] .menu-abzug { translate: 0 0; opacity: 1; }
/* Niedrige Fenster (Querformat): kein Platz neben den Punkten. */
@media (max-height: 640px) { .menu-abzug { display: none; } }
}
/* Knöpfe: flach, eckig, fett, gesperrt. */
.knopf {
padding: 1rem 1.75rem;
font-size: 0.9375rem;
font-weight: 700;
line-height: 1.2;
letter-spacing: 0.14em;
white-space: nowrap;
transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.knopf:hover { transform: none; box-shadow: none; }
.knopf::after { transition: translate 0.3s var(--kurve); }
.knopf:hover::after { translate: 0.25em 0; }
.knopf:active { transform: scale(0.98); }
/* Kleine Angaben in Montserrat Medium, gesperrt wie „GIRLS ONLY“ auf dem
Flyer. Eine Regel für Hero, Termin und Laufband. */
.hero-zeile,
.hero-termin p {
margin: 0;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.24em;
}
/* Hero: die tiefrote Pinselstruktur, mittig der Spruch, darunter Marke,
GIRLS ONLY und der nächste Termin — der dunkle Flyer als Seite. Die
Struktur ist Zierde und steht deshalb im CSS, nicht als ![]()
. */
.hero--plakat {
height: auto;
min-height: min(calc(100svh - var(--kopf-hoehe) - var(--laufband)), 880px);
margin-top: 0;
padding-block: clamp(3.5rem, 9vh, 6.5rem);
background: var(--weinrot-tief) url('../img/textur/tiefrot-quer.webp') center / cover no-repeat;
color: var(--rosa);
}
@media (max-width: 759px) {
.hero--plakat { background-image: url('../img/textur/tiefrot-hoch.webp'); }
}
.hero--plakat .hero-text {
display: grid;
justify-items: center;
padding-top: 0;
}
.hero--plakat .hero-titel {
margin: 0;
font-size: var(--t-hero);
font-weight: 700;
line-height: 1.04;
letter-spacing: 0.02em;
}
.hero-logo {
width: clamp(210px, 30vw, 400px);
height: auto;
margin-top: clamp(2.5rem, 7vh, 4.5rem);
}
.hero--plakat .hero-zeile {
margin-top: 1.25rem;
font-size: clamp(1rem, 0.9rem + 0.5vw, 1.375rem);
letter-spacing: 0.3em;
}
/* Datum und Ort, dazwischen ein kurzer Strich wie auf dem Flyer. */
.hero-termin {
display: grid;
justify-items: center;
margin-top: 0.75rem;
font-size: clamp(0.9375rem, 0.88rem + 0.3vw, 1.125rem);
}
.hero-termin [data-hero-ort] {
margin-top: 0.75rem;
padding-top: 0.75rem;
border-top: 1.5px solid currentColor;
font-weight: 700;
letter-spacing: 0.08em;
}
.hero-termin [data-hero-ort]:empty { display: none; }
.hero--plakat .hero-text .knopf {
margin-top: 2rem;
border-color: var(--koralle);
background: var(--koralle);
color: var(--weinrot);
}
.hero--plakat .hero-text .knopf:hover { background: transparent; color: var(--koralle); }
/* Laufband: zwei gleiche Hälften, die Bewegung um genau eine Hälfte ergibt
die Schleife. Ohne Bewegung steht der Anfang. Zwischen den Einträgen der
Stern aus dem Logo. */
.laufband {
overflow: hidden;
height: var(--laufband);
background: var(--koralle);
color: var(--weinrot);
}
.laufband-spur {
display: flex;
align-items: center;
width: max-content;
height: 100%;
font-family: var(--schrift-display);
font-size: 1.125rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
white-space: nowrap;
}
.laufband-spur span {
display: inline-flex;
align-items: center;
gap: 2.25rem;
padding-right: 2.25rem;
}
.laufband-spur span::after {
content: '';
width: 0.9em;
height: 0.9em;
background: currentColor;
-webkit-mask: var(--stern) center / contain no-repeat;
mask: var(--stern) center / contain no-repeat;
}
@keyframes laufband { to { transform: translateX(-50%); } }
html.anim .laufband-spur { animation: laufband 30s linear infinite; }
/* Abschnitte: Weinrot und Koralle im Wechsel (Betreiber, 11.11.2026). Die
Koralle-Fassung belegt die Systemtoken um, damit Formular, FAQ und Knöpfe
darin ohne eigene Regeln stimmen. */
.abschnitt { padding-block: clamp(4.5rem, 10vw, 8rem); }
.abschnitt--weinrot { background: var(--weinrot); color: var(--rosa); }
.abschnitt--koralle {
--tinte: var(--weinrot);
--tinte-leise: #4a0403; /* 5,4 : 1 auf Koralle */
--tinte-still: #4a0403;
--akzent: var(--weinrot);
--akzent-tinte: var(--rosa);
--akzent-tief: var(--weinrot-tief);
--flaeche: #f7b3b1; /* Felder: Weinrot darauf 7,9 : 1 */
--box-hell: #f9c4c2;
--linie: #c9504e;
background: var(--koralle);
color: var(--weinrot);
}
.kopfzeile { text-align: center; }
.kopfzeile h2 { font-size: var(--t-h2); }
/* Eventkarten: rosa Karte auf Weinrot, unten der Abriss mit Termin in
Tiefrot und dem Ticket-Feld in Koralle. Zwei nebeneinander. */
.karten { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 2rem); }
@media (max-width: 899px) { .karten { grid-template-columns: 1fr; } }
.karte { background: var(--karte); color: var(--weinrot); }
.karte:hover { transform: none; box-shadow: none; }
.karte:active { transform: none; }
.karte-text { padding: 1.25rem; gap: 0.5rem; }
.karte-titel { font-size: clamp(1.25rem, 1.05rem + 0.75vw, 1.625rem); line-height: 1.1; }
.karte-ort { color: var(--weinrot); font-size: 1rem; font-weight: 500; letter-spacing: 0.08em; }
.karte-abriss {
height: auto;
padding: 0;
align-items: stretch;
gap: 0;
font-family: var(--schrift-display);
font-size: 1rem;
font-weight: 700;
letter-spacing: 0.1em;
}
.karte-termin {
flex: 1;
display: flex;
align-items: center;
padding: 1.1rem 1.25rem;
background: var(--weinrot-tief);
color: var(--rosa);
}
.karte-infos {
flex: none;
padding: 1.1rem 1.5rem;
background: var(--koralle);
color: var(--weinrot);
transition: background 0.2s ease, gap 0.22s var(--kurve);
}
.karte:hover .karte-infos { background: var(--akzent-tief); }
@media (max-width: 519px) {
/* Termin und „Tickets“ müssen nebeneinander passen (390 px gemessen). */
.karte-abriss { font-size: 0.875rem; letter-spacing: 0.04em; }
.karte-termin { padding: 1rem; }
.karte-infos { padding: 1rem; }
}
/* Ein einzelnes Event steht mittig, nicht in der linken Spalte. */
.karten:has(> .karte:only-child) { grid-template-columns: minmax(0, 620px); justify-content: center; }
/* Fotos: zwei verschiedene Bilder statt zweimal derselben Reihe (Betreiber,
11.11.2026: „immer im 4er stack … ohne liebe“). Oben ein Fotostreifen wie
aus dem Automaten, unten eine Pinnwand. Drehung und Versatz stehen je
Position hier, weil ein Inline-Style unter `style-src 'self'` nicht
erlaubt ist; `rotate`/`translate` statt `transform`, damit die
Einblendung (transform) sie nicht überschreibt. */
/* Klebestreifen: halbdurchsichtiges Rosa, schief aufgeklebt. Eine Regel
für Streifen und Pinnwand; die Lage setzt `--klebe-dreh`. */
.fotostreifen::before,
.pinnwand .polaroid::before {
content: '';
position: absolute;
top: -14px;
left: 50%;
z-index: 1;
width: 96px;
height: 28px;
background: rgb(237 161 164 / 0.78);
translate: -50% 0;
rotate: var(--klebe-dreh, -4deg);
}
/* Der Anker hat keine Höhe: Der Streifen hängt über der Kante zwischen
Events und FAQ, egal ob einer der beiden Abschnitte ausgeblendet ist. */
.streifen-anker { position: relative; z-index: 5; height: 0; }
.fotostreifen {
--klebe-dreh: 3deg;
position: absolute;
top: -300px;
right: max(var(--gutter), calc((100% - var(--breite)) / 2 + 2.5rem));
display: grid;
gap: 10px;
width: 210px;
margin: 0;
padding: 12px 12px 14px;
background: var(--papier);
box-shadow: var(--schatten-abzug);
rotate: 4deg;
}
.fotostreifen > img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.fotostreifen figcaption { display: grid; justify-items: center; padding-top: 6px; }
.fotostreifen figcaption img { width: 78%; height: auto; }
/* Unter 1280 px reicht der Rand neben der FAQ nicht: Der Streifen liegt
quer über der Kante, die Bilder nebeneinander. Der Anker bekommt dann
Höhe und malt die Kante selbst (Weinrot oben, Koralle unten). */
@media (max-width: 1279px) {
.streifen-anker {
display: flex;
justify-content: center;
height: auto;
/* Luft über und unter dem Bogen (Betreiber, 11.11.2026: „gequetscht“). */
padding: clamp(2.5rem, 9vw, 4rem) var(--gutter);
background: linear-gradient(to bottom, var(--weinrot) 50%, var(--koralle) 50%);
}
.fotostreifen {
position: relative;
top: auto;
right: auto;
grid-template-columns: repeat(4, minmax(0, 1fr));
width: min(100%, 640px);
padding: 10px;
rotate: -2deg;
}
.fotostreifen figcaption { grid-column: 1 / -1; padding-top: 2px; }
.fotostreifen figcaption img { width: 34%; }
}
/* Abstand zur Kante, die der Anker auf dem Telefon selbst trägt. */
@media (max-width: 1279px) {
#events { padding-bottom: clamp(1.5rem, 4vw, 2.5rem); }
#faq { padding-top: clamp(3rem, 8vw, 4.5rem); }
}
/* Pinnwand: ein großer Abzug links, drei kleine rechts versetzt. */
.pinnwand {
overflow: hidden;
padding-block: clamp(4.5rem, 10vw, 8rem);
background: var(--weinrot);
}
.pinnwand-raster {
display: grid;
grid-template-columns: 1.3fr 1fr 1fr;
gap: 2.5rem 2rem;
align-items: start;
max-width: 1120px;
margin: 0 auto;
list-style: none;
}
.polaroid {
--dreh: 0deg;
--hub: 0px;
position: relative;
padding: 12px 12px 52px;
background: var(--papier);
box-shadow: var(--schatten-abzug);
rotate: var(--dreh);
translate: 0 var(--hub);
transition: rotate 0.35s var(--kurve), scale 0.35s var(--kurve);
}
.polaroid img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.polaroid:hover { --dreh: 0deg; scale: 1.03; z-index: 4; }
.pinnwand .polaroid:nth-child(1) { --dreh: -3deg; --klebe-dreh: -6deg; grid-row: 1 / span 2; }
.pinnwand .polaroid:nth-child(2) { --dreh: 5deg; --hub: 2.5rem; --klebe-dreh: 4deg; }
.pinnwand .polaroid:nth-child(3) { --dreh: -4deg; --hub: -0.5rem; --klebe-dreh: -2deg; }
.pinnwand .polaroid:nth-child(4) { --dreh: 3deg; --hub: 1rem; --klebe-dreh: 7deg; grid-column: 2 / span 2; justify-self: center; width: 52%; }
/* Der Stern sparsam: an der Ecke des großen Abzugs. */
.polaroid--gross::after {
content: '';
position: absolute;
right: 14px;
bottom: 10px;
width: 30px;
height: 30px;
background: var(--koralle);
-webkit-mask: var(--stern) center / contain no-repeat;
mask: var(--stern) center / contain no-repeat;
}
/* Telefon (Betreiber, 11.11.2026: die vier einzelnen Abzüge „sehen kacke
aus“): eine wischbare Reihe großer Polaroids. Das nächste schaut am Rand
hervor, das zeigt, dass es weitergeht. Ein bewusst scrollendes Band —
die Sichtprüfung nimmt `overflow-x: auto` aus. */
@media (max-width: 699px) {
.pinnwand { padding-block: clamp(3rem, 12vw, 4.5rem); }
.pinnwand-raster {
display: flex;
gap: 1.25rem;
max-width: none;
padding: 1.75rem 14vw 2.5rem;
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scrollbar-width: none;
}
.pinnwand-raster::-webkit-scrollbar { display: none; }
.pinnwand .polaroid,
.pinnwand .polaroid:nth-child(n) {
flex: 0 0 72vw;
width: auto;
padding: 10px 10px 42px;
scroll-snap-align: center;
--hub: 0px;
}
.pinnwand .polaroid:nth-child(1) { --dreh: -2.5deg; }
.pinnwand .polaroid:nth-child(2) { --dreh: 2deg; }
.pinnwand .polaroid:nth-child(3) { --dreh: -1.5deg; }
.pinnwand .polaroid:nth-child(4) { --dreh: 3deg; }
.polaroid--gross::after { width: 26px; height: 26px; bottom: 8px; }
/* Fotostreifen als 2×2-Bogen, die Bilder doppelt so groß wie in der
Viererreihe (390 px gemessen: 80 px → rund 150 px). */
.fotostreifen {
grid-template-columns: repeat(2, minmax(0, 1fr));
width: min(84vw, 380px);
rotate: -3deg;
}
.fotostreifen figcaption img { width: 54%; }
}
/* FAQ: Aufklapper auf Weinrot (Baustein aus velvet-hp). */
.faqs { border-top: 1.5px solid var(--linie); }
.faq { border-bottom: 1.5px solid var(--linie); }
.faq summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1.25rem 0;
cursor: pointer;
font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.3125rem);
font-weight: 700;
list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
/* Das Plus dreht sich beim Aufklappen zum Kreuz. */
.faq summary::after {
content: '';
flex: none;
width: 16px; height: 16px;
background:
linear-gradient(var(--akzent), var(--akzent)) center / 100% 2px no-repeat,
linear-gradient(var(--akzent), var(--akzent)) center / 2px 100% no-repeat;
transition: transform 0.2s ease;
}
.faq[open] summary::after { transform: rotate(45deg); }
.faq[open] summary { color: var(--akzent); }
.faq-text { padding-bottom: 1.5rem; color: var(--tinte-leise); }
/* Die Antwort kommt als reiner Text mit Zeilenumbrüchen aus Clubinio. */
.faq-text p { white-space: pre-wrap; overflow-wrap: anywhere; }
/* Spruchband: die Koralle-Struktur des hellen Flyers, darauf GIRLS ONLY so
groß wie möglich, eingefasst von zwei Sternen. */
.spruchband {
padding-block: clamp(3.5rem, 10vw, 7.5rem);
padding-inline: var(--gutter);
background: var(--koralle) url('../img/textur/koralle-quer.webp') center / cover no-repeat;
color: var(--weinrot);
text-align: center;
}
@media (max-width: 759px) {
.spruchband { background-image: url('../img/textur/koralle-hoch.webp'); }
}
.spruchband-text {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 0.15em 0.3em;
margin: 0;
font-family: var(--schrift-display);
/* Bis 10vw passen Sterne und GIRLS ONLY bei 1440 in eine Zeile; schmal
passt es ab 2.5rem ebenfalls (390 px gemessen). */
font-size: clamp(2.5rem, 10vw, 11rem);
font-weight: 700;
line-height: 0.95;
letter-spacing: 0.02em;
text-transform: uppercase;
}
.spruchband-text::before,
.spruchband-text::after {
content: '';
flex: none;
width: 0.38em;
height: 0.38em;
background: currentColor;
-webkit-mask: var(--stern) center / contain no-repeat;
mask: var(--stern) center / contain no-repeat;
}
/* Kontakt: Formular mittig auf Koralle. */
#kontaktformular { max-width: 640px; margin-inline: auto; }
.kontakt-aus { margin: 0; padding: 1.5rem; background: var(--flaeche); text-align: center; }
.feld > span { font-weight: 500; }
.abschnitt--koralle .zustimmung input:checked { background-color: var(--weinrot); }
.abschnitt--koralle .knopf:hover { background: transparent; color: var(--weinrot); }
/* Newsletter: weinroter Streifen, Überschrift links, Formular rechts. */
.newsletter--leiste { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 900px) {
.newsletter--leiste { grid-template-columns: 1fr 1.2fr; gap: 4rem; }
}
.newsletter--leiste h2 { margin-bottom: 0.75rem; font-size: var(--t-h2); }
.newsletter--leiste p { margin: 0; }
.newsletter--leiste .newsletter-zeile {
display: grid;
grid-template-columns: 1fr auto;
max-width: none;
height: auto;
}
.newsletter--leiste .newsletter-zeile input {
height: 56px;
padding: 0 1.125rem;
background: var(--flaeche);
color: var(--tinte);
font-family: var(--schrift-text);
font-size: 1rem;
}
.newsletter--leiste .newsletter-zeile input::placeholder { color: var(--tinte-leise); }
.newsletter--leiste .newsletter-zeile .knopf {
height: 56px;
padding: 0 1.75rem;
border-color: var(--akzent);
border-radius: 0;
background: var(--akzent);
color: var(--akzent-tinte);
font-family: var(--schrift-display);
font-size: 0.9375rem;
font-weight: 700;
line-height: 1.2;
letter-spacing: 0.14em;
}
.newsletter--leiste .newsletter-zeile .knopf:hover { background: transparent; color: var(--akzent); }
.newsletter--leiste .zustimmung,
.newsletter--leiste .rueckmeldung { max-width: none; margin-top: 1rem; font-family: var(--schrift-text); font-size: var(--t-klein); }
.newsletter--leiste .newsletter-zeile:focus-within { outline-color: var(--akzent); }
@media (max-width: 519px) {
.newsletter--leiste .newsletter-zeile { grid-template-columns: 1fr; gap: 0.5rem; }
}
/* Fuß: Tiefrot, die gestapelte Marke in Koralle, die Links in Rosa. */
.fuss { background: var(--weinrot-tief); color: var(--rosa); padding-block: clamp(2.5rem, 5vw, 4rem); }
.fuss > .huelle { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2rem 3rem; }
.fuss-logo { width: clamp(150px, 16vw, 220px); height: auto; }
.fuss-raster { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2rem; }
.fuss-recht { align-items: center; margin: 0; }
.fuss p { font-size: 0.9375rem; }
.fuss-recht a,
.fuss-social a { color: var(--rosa); letter-spacing: 0.06em; }
.fuss a:hover,
.fuss-social a:hover { color: var(--koralle); }
.fuss-social { margin: 0; }
.fuss-social:empty { display: none; }
/* Unterseiten: der Seitenkopf auf der Pinselstruktur wie der Hero. */
.seitenkopf {
margin-top: 0;
padding-block: clamp(3rem, 8vw, 5.5rem);
border-bottom: 0;
background: var(--weinrot-tief) url('../img/textur/tiefrot-quer.webp') center / cover no-repeat;
color: var(--rosa);
}
.seitenkopf h1 { font-size: var(--t-h1); }
.rechtstext p, .rechtstext li { color: var(--tinte); }
.rechtstext a { color: var(--koralle); }
.rechtstext h2, .rechtstext h3 { line-height: 1.15; text-transform: none; letter-spacing: 0; }
/* ----------------------------------------------------------- Eventseite -- */
/* Eventseite /event// (Betreiber, 11.11.2026), einspaltig wie bei
velvet-hp: Flyer als Aufmacher im Papierrahmen, darunter der Ticketknopf
über die volle Breite, dann Termin, Titel, Ort, Text und Infokasten. */
.event-abschnitt { padding-top: clamp(2rem, 5vw, 3.5rem); }
.event { max-width: 920px; }
.event-flyer {
width: 100%;
height: auto;
aspect-ratio: 1672 / 941;
object-fit: cover;
border: 10px solid var(--papier);
box-shadow: var(--schatten-abzug);
}
.event .knopf-reihe { margin-top: 1.25rem; }
.knopf-ticket { width: 100%; min-height: 56px; }
.knopf-ticket:hover { background: transparent; color: var(--koralle); }
.event-preis {
margin: 0.75rem 0 0;
color: var(--tinte-leise);
font-size: var(--t-klein);
letter-spacing: 0.16em;
text-align: center;
text-transform: uppercase;
}
.event-kopf { margin-top: clamp(2.75rem, 7vw, 4.5rem); }
.event-datum {
margin: 0 0 1rem;
color: var(--koralle);
font-size: clamp(0.875rem, 0.84rem + 0.25vw, 1rem);
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
}
.event-kopf h1 { font-size: clamp(2.5rem, 8vw, 5.75rem); line-height: 1.02; letter-spacing: 0.01em; overflow-wrap: anywhere; }
.event-ort {
margin: 1.25rem 0 0;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.event-kopf + .event-raster { margin-top: clamp(2.5rem, 6vw, 3.5rem); }
.event-raster { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 900px) {
.event-raster { grid-template-columns: 1fr 1fr; gap: 3rem; }
/* Ohne Eventtext steht der Infokasten allein und mittig. */
.event-raster:has(> .infokasten:only-child) { grid-template-columns: minmax(0, 560px); justify-content: center; }
}
/* Der Text kommt als reiner Text aus Clubinio, mit Zeilenumbrüchen. */
.event-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--t-text); line-height: 1.65; }
.event-text a { color: var(--koralle); text-decoration: underline; }
.infokasten {
padding: clamp(1.5rem, 3vw, 2rem);
background: var(--koralle);
color: var(--weinrot);
}
.infokasten h2 { margin-bottom: 1.25rem; font-size: var(--t-h3); letter-spacing: 0.14em; }
.infokasten dl { display: grid; gap: 0.9rem; margin: 0; }
.infopaar { display: grid; grid-template-columns: 6.5rem 1fr; gap: 1rem; }
.infopaar dt { font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; font-size: var(--t-klein); padding-top: 0.15em; }
.infopaar dd { margin: 0; }
.event + .zurueck, .event .zurueck { margin-top: clamp(2.5rem, 6vw, 3.5rem); }
/* ---------------------------------------------------------------- Fotos -- */
/* Fotoseite aus beachhouse-hp (Betreiber, 11.11.2026: „trotzdem schon mal
mitbauen“, obwohl noch kein Album online ist). Optik dieser Seite:
eckig, Text unten auf dem Bild, Zahl als koralle Marke. */
.leer {
margin: 0;
padding-block: 3rem;
color: var(--tinte-leise);
text-align: center;
}
.alben-raster {
display: grid;
gap: 20px;
/* Höchstens 367px je Spalte und mittig: Ein einzelnes Album stünde sonst
links in einer leeren Reihe. */
grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 367px));
justify-content: center;
}
.album-karte {
position: relative;
display: block;
aspect-ratio: 4 / 5;
overflow: hidden;
background: var(--box-hell);
isolation: isolate;
}
.album-karte img {
position: absolute;
inset: 0;
z-index: -2;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s var(--kurve);
}
.album-karte::after {
content: '';
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(to top, rgb(40 0 0 / 90%) 0%, rgb(40 0 0 / 45%) 38%, transparent 62%);
}
.album-karte:hover img { transform: scale(1.04); }
.album-zahl {
position: absolute;
top: 14px;
right: 14px;
padding: 0.3rem 0.7rem;
background: var(--koralle);
color: var(--weinrot);
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.album-text {
position: absolute;
inset: auto 0 0;
display: flex;
flex-direction: column;
gap: 0.35rem;
padding: 1.25rem;
}
.album-datum { font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.2em; }
.album-titel { margin: 0; font-size: var(--t-h3); line-height: 1.1; }
.album-ort { color: var(--tinte-leise); font-size: var(--t-klein); }
/* Albumseite: Rücksprung, Titel, Angaben mittig; darunter das Raster. */
.album-kopf { text-align: center; margin-bottom: clamp(2rem, 5vw, 3rem); }
.zurueck {
display: inline-flex;
margin: 0 0 1.25rem;
color: var(--koralle);
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.zurueck:hover { color: var(--rosa); }
.album-kopf h1 { font-size: var(--t-h1); line-height: 1.05; overflow-wrap: anywhere; }
.album-angaben {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.5rem 1.5rem;
margin: 1.25rem 0 0;
color: var(--tinte-leise);
font-size: var(--t-klein);
}
.album-angaben span { display: inline-flex; align-items: center; gap: 0.4rem; }
.album-angaben .icon { color: var(--koralle); }
/* Gleich große Kacheln statt Mauerwerk: Die Lightbox blättert in der
Reihenfolge, in der das Auge die Bilder liest. */
.fotoraster {
display: grid;
gap: 10px;
grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1024px) { .fotoraster { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .fotoraster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } }
.fotoraster figure {
margin: 0;
aspect-ratio: 4 / 5;
overflow: hidden;
background: var(--box-hell);
cursor: zoom-in;
}
.fotoraster img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s var(--kurve); }
.fotoraster figure:hover img { transform: scale(1.04); }
.fotoraster figure:focus-visible { outline: 2px solid var(--koralle); outline-offset: 2px; }
/* Lightbox (lightbox.js). */
.lightbox {
position: fixed;
inset: 0;
z-index: 200;
display: none;
place-items: center;
padding: clamp(1rem, 5vw, 3rem);
background: rgb(30 0 0 / 94%);
}
.lightbox[data-offen='ja'] { display: grid; }
.lb-bild { max-width: 100%; max-height: 82vh; object-fit: contain; }
.lb-zaehler {
position: absolute;
bottom: 1.25rem;
left: 50%;
transform: translateX(-50%);
margin: 0;
color: var(--rosa);
font-size: 14px;
letter-spacing: 0.14em;
}
.lb-knopf {
position: absolute;
display: grid;
place-items: center;
width: 48px;
height: 48px;
border: 0;
background: var(--weinrot);
color: var(--rosa);
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease;
}
.lb-knopf:hover { background: var(--koralle); color: var(--weinrot); }
.lb-knopf[hidden] { display: none; }
.lb-zu { top: 1rem; right: 1rem; }
.lb-melden { top: 1rem; right: calc(1rem + 56px); }
.lb-rueck { left: 1rem; top: 50%; transform: translateY(-50%); }
.lb-vor { right: 1rem; top: 50%; transform: translateY(-50%); }
.lb-rueck .icon { transform: scaleX(-1); }
/* Am Telefon blättert das Wischen; die Pfeile rücken nach unten. */
@media (max-width: 600px) {
.lb-rueck, .lb-vor { top: auto; bottom: 0.75rem; transform: none; }
}
/* ------------------------------------------------------------- Bewegung -- */
/* **Alles haengt an `html.anim`.** Diese Klasse setzt `assets/js/anim.js`,
und zwar nur, wenn das Modul wirklich laeuft und `prefers-reduced-motion`
nicht gesetzt ist. Faellt das Skript aus, bleibt die Klasse weg — und
damit auch jede Regel, die etwas unsichtbar macht. Die Seite steht dann
vollstaendig da, nur ohne Bewegung.
Bewegt wird ausschliesslich `transform` und `opacity`. Beides laeuft im
Compositor; alles andere (Hoehe, Position, Filter) erzwingt eine
Neuberechnung des Layouts und ruckelt auf dem Telefon. */
html.anim [data-reveal] {
opacity: 0;
transform: translateY(22px);
transition: opacity 0.55s ease, transform 0.75s var(--kurve);
}
html.anim [data-reveal][data-sichtbar='ja'] {
opacity: 1;
transform: none;
}
/* Karten laufen versetzt ein, statt als Block aufzutauchen. Die
Verzoegerung steht je Position im CSS, weil ein Inline-Style unter
`style-src 'self'` nicht erlaubt waere. */
html.anim .karten [data-reveal]:nth-child(2) { transition-delay: 0.09s; }
html.anim .karten [data-reveal]:nth-child(3) { transition-delay: 0.18s; }
html.anim .karten [data-reveal]:nth-child(4) { transition-delay: 0.27s; }
html.anim .karten [data-reveal]:nth-child(5) { transition-delay: 0.36s; }
html.anim .karten [data-reveal]:nth-child(6) { transition-delay: 0.45s; }
/* Polaroids fallen beim Hereinscrollen schräg ein und kommen auf ihrer
eigenen Drehung zur Ruhe. Spezifischer als die Grundregel, deshalb hier
samt sichtbarem Zustand. */
html.anim .polaroid[data-reveal] {
transform: translateY(-46px);
rotate: calc(var(--dreh) - 11deg);
transition: opacity 0.5s ease, transform 0.8s var(--kurve), rotate 0.9s var(--kurve), scale 0.35s var(--kurve);
}
html.anim .polaroid[data-reveal][data-sichtbar='ja'] { transform: none; rotate: var(--dreh); }
html.anim .polaroid:nth-child(2) { transition-delay: 0.15s; }
html.anim .polaroid:nth-child(3) { transition-delay: 0.3s; }
html.anim .polaroid:nth-child(4) { transition-delay: 0.45s; }
/* Nach dem Einfallen soll das Überfahren ohne Verzögerung reagieren. */
html.anim .polaroid[data-sichtbar='ja']:hover { transition-delay: 0s; }
/* Der Flyer zieht beim Darueberfahren leicht an. Die Karte selbst hebt
schon ab — zusammen wirkt es, als laege das Bild tiefer in der Karte. */
.karte-bild { overflow: hidden; }
.karte-bild img { transition: transform 0.55s var(--kurve); }
.karte:hover .karte-bild img { transform: scale(1.05); }
/* Der Hero laeuft beim Laden auf: Titel, Marke, Knopf nacheinander. Kein
Scroll-Ausloeser noetig — er steht ohnehin sofort im Bild. */
@keyframes hero-auf {
from { opacity: 0; transform: translateY(26px); }
to { opacity: 1; transform: none; }
}
html.anim .hero-titel,
html.anim .hero-logo,
html.anim .hero-zeile,
html.anim .hero-text .knopf {
animation: hero-auf 0.9s var(--kurve) both;
}
html.anim .hero-titel { animation-delay: 0.15s; }
html.anim .hero-logo { animation-delay: 0.35s; }
html.anim .hero-zeile { animation-delay: 0.45s; }
html.anim .hero-text .knopf { animation-delay: 0.55s; }
/* ---------------------------------------------------------------- Fehler -- */
.fehlerseite {
min-height: 70svh;
display: grid;
place-items: center;
text-align: center;
padding-block: 4rem;
}
.fehlerseite .kennzahl {
font-size: clamp(5rem, 18vw, 10rem);
font-weight: 800;
line-height: 1;
color: var(--akzent);
}
.knopf-reihe[data-mitte] { justify-content: center; }