/* ============================================================================
TROPI Albstadt — Design und Layout
----------------------------------------------------------------------------
Uebernahme der bestehenden WordPress-Seite tropi.de: schwarzer Grund,
deckende Kopfzeile in #141414, Montserrat Black in Versalien, Akzent in
Signalrot (#F1001C). Knoepfe als abgerundete Rechtecke (15px).
**Geruest aus top10-singen-hp**, Marke und Masse aus der Vermessung von
tropi.de (referenz/*.json). Wo ein gemessener Wert vom Systemmass
abweicht, steht der Grund daneben.
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 -- */
/* **Dieselben Dateien wie tropi.de** — Montserrat Regular/Medium/Bold/Black
und Poppins Regular/Bold, siehe assets/fonts/LIZENZEN.md. Eine andere
Fassung derselben Familie setzt dieselben Woerter messbar anders breit.
Medium steht auf `font-weight: 600`, wie im Original. Montserrat 800 und
Poppins 900 verlangt das Original stellenweise, laedt aber keine Datei
dafuer; der Browser nimmt dann den naechsten Schnitt (900 bzw. 700).
Hier gilt dieselbe Regel, weil dieselben Dateien fehlen. */
@font-face { font-family: 'Montserrat'; src: url('../fonts/montserrat-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('../fonts/montserrat-500.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('../fonts/montserrat-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('../fonts/montserrat-900.woff2') format('woff2'); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../fonts/poppins-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../fonts/poppins-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
/* Fließtext in Inter — Entscheidung des Betreibers 31.10.2026, wie in
arena-ihpohl-hp. Das Original setzt ihn in Montserrat 400. */
@font-face { font-family: 'Inter'; src: url('../fonts/inter-var.woff2') format('woff2'); font-weight: 100 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. */
--nacht: #000000; /* Seitengrund — tropi.de faehrt reines Schwarz */
--box: #161616; /* Karten, Kaesten */
--box-hell: #202020; /* abgesetzte Flaeche in einer Box */
--flaeche: #181818; /* Abschnittsgrund, wo er sich abheben soll */
--karte: #111111; /* Eventkarten — gemessen */
--kopf: #141414; /* Kopfzeile, immer deckend — gemessen */
--fuss: #0c0c0c; /* Fussflaeche — gemessen */
--linie: #2a2a2a; /* Trenner und Rahmen */
/* Schrift: zwei Ebenen mit klarer Aufgabe. */
/* tropi.de setzt beides in Montserrat — anders als top10-singen-hp
(Inter im Fliesstext). Gemessen: Absaetze Montserrat 400 15px/22.5px.
Poppins traegt nur die kleinen Verweise (Karte, U18 im Fuss). */
--schrift-display: 'Montserrat', system-ui, sans-serif;
--schrift-text: 'Inter', system-ui, -apple-system, sans-serif;
--schrift-klein: 'Poppins', system-ui, 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. */
/* **Drei Rottoene statt einem — alle aus demselben Farbton.** Gemessen
faehrt tropi.de #f1001c fuer Flaechen und Schrift. Nachgerechnet nach
WCAG 2.1 (Rechnung in tools/kontrast.py):
Weiss auf #f1001c ............ 4,41:1 (AA verlangt 4,5)
#f1001c auf #111 / #141414 ... 4,28 / 4,17
Die kleinste Verschiebung, die besteht:
Flaeche #ee001c 0,5 % dunkler Weiss darauf 4,51
Schrift #fc001d 2,1 % heller 4,52 … 5,16 auf allen dunklen Gruenden
tools/abgleich.py wertet genau diese Paare als gleich. */
--akzent: #ee001c; /* gemessen #f1001c, siehe oben */
--akzent-text: #fc001d;
/* Akzent als Schrift auf rotem Schein (Augenbraue im Anfragekasten):
#fc001d kam dort an den gemalten Pixeln auf 4,06–4,14:1
(tools/bildkontrast.js). Reines Rot erreicht hoechstens L 0,21, fuer
4,5:1 braucht es 0,23 — also heller, nicht roter.
Seit die Kopfzeile frei ueber dem Bild steht (wie cosmopolar-hp), traegt
es auch den aktiven Menuepunkt: #fc001d kam dort auf 3,51:1, #ff3b4a
haette 4,07 ergeben; der Hero ist oben heller als der rote Schein. */
--akzent-hell: #ff5a66;
/* Schrift auf dem Akzent. */
--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 0 28;
/* Rundungen. Gestaffelt nach Flaechengroesse — ein einheitlicher Radius
laesst kleine Elemente verspielt und grosse Flaechen hart wirken. */
--r-knopf: 15px; /* abgerundete Rechtecke, keine Pille — gemessen */
--r-feld: 14px; /* Eingabefelder */
--r-karte: 20px; /* Eventkarten, Kaesten — gemessen */
--r-klein: 10px; /* Chips, Symbole, kleine Flaechen */
/* Hoehe des Abschnitts unter der Perforation. Kerben und Trennlinie
haengen beide daran — ein Wert, damit sie nicht auseinanderlaufen. */
--abriss: 46px;
/* 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: 74%; /* Elementor `--overlay-opacity: 0.74` */
/* 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. */
--haken: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%230b0b0e' 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. */
/* Inhaltsbreite der Eventkarten (1240), Kopf und Fuss laufen enger
(1210), der Ueber-Abschnitt noch enger (1080) — je gemessen bei 1440. */
--breite: 1300px; /* 1240 Inhalt + 2 x 30 Rand (.huelle zieht ab) */
--breite-rahmen: 1210px;
--breite-ueber: 1080px;
/* Inhalt: 30px auf Tablet und Telefon (gemessen). Kopf und Fuss laufen
mit eigenem Rand: 8 % der Fensterbreite ab 1025px, 5 % darunter. */
--gutter: 30px;
--rand-rahmen: 8vw;
/* 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: 82px; /* 80px unter 900px */
/* Typografie. Die Skala ist die der bestehenden Seite (36/50/60/85 px),
hier als clamp(), damit sie auf dem Telefon nicht ueberlaeuft. */
--t-hero: clamp(2.75rem, 9vw, 5.3125rem); /* 44px … 85px, wie cosmopolar-hp */
--t-h1: clamp(2rem, 6vw, 3.75rem); /* bis 60px */
--t-h2: 3.125rem; /* 50px bis 768px, 35px darunter — gemessen */
--t-h3: clamp(1.25rem, 3vw, 1.5rem);
--t-text: 0.9375rem; /* 15px — Originalwert */
--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(--nacht);
color: var(--tinte);
font-family: var(--schrift-text);
font-size: var(--t-text);
line-height: 1.5; /* 15px/22.5px, gemessen */
-webkit-font-smoothing: antialiased;
}
/* Nur Fliesstext in Inter (Betreiber, 31.10.2026). Was die Textschrift
erbt, aber Beschriftung ist — Termine, Augenbrauen, Merkmale,
Formularbeschriftungen, FAQ-Fragen, Fussverweise —, bleibt in Montserrat
wie im Original. */
.karte-termin, .augenbraue, .merkmal-zeile, .merkmal-liste li, .merkmal-punkte dt,
.feld > span, .feld legend > span, .faq summary, .fuss-recht a {
font-family: var(--schrift-display);
}
/* 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: 900;
line-height: 0.9; /* 50px/45px, gemessen */
text-transform: uppercase;
/* Montserrat laeuft breit, im schwersten Schnitt noch mehr. Gemessen:
-2px bei 50px, -1,4px bei 35px — also -0,04em. */
letter-spacing: -0.04em;
}
/* **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.
Betroffen waeren: der Abriss der Eventkarte samt Termin, die Datumszeile
und der Infokasten der Eventseite, die FAQ-Frage, der Zurueck-Verweis,
die Kennzahl der Fehlerseite und der Sprunglink. Alles kurze, laute
Zeilen — genau das, wofuer Montserrat gezeichnet ist. */
.event-datum,
.infokasten dt,
.infokasten dd,
.zurueck,
.fehlerseite .kennzahl,
.sprung {
font-family: var(--schrift-display);
}
/* 14,4px fest, auch bei kleinerer Schrift — das Elementor-Theme setzt
`.9rem`. Vorher 0.96em (aus 15px zurueckgerechnet): bei 14px Text auf
dem Telefon 13,44px, auf /jobs/ fast 2px Versatz bis zum Formular. */
p { margin: 0 0 0.9rem; }
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);
}
/* 100px oben und unten — gemessen an Events und Eindruecke, auf allen
drei Breiten gleich. */
.abschnitt { padding-block: 100px; }
.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;
background: url('../img/events-bg.webp') center center / cover no-repeat;
isolation: isolate;
}
/* Das Foto steht beim Scrollen still (Elementor `background-attachment:
fixed`). Nur ab 1025px: iOS kennt `fixed` nicht und zeichnet dann das
ganze Bild auf die Abschnittshoehe gestreckt. */
@media (min-width: 1025px) { .abschnitt-bild { background-attachment: fixed; } }
.abschnitt-bild::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
background: rgb(0 0 0 / var(--bild-schleier));
}
/* Abschnittskopf: Ueberschrift plus Unterzeile, zentriert. */
/* 70px unter der Ueberschrift bis zu den Karten, 50 bis zum Fotostreifen
— gemessen; der Fotostreifen holt die Differenz selbst. */
.kopfzeile { text-align: center; margin-bottom: 70px; }
.kopfzeile h2 { font-size: var(--t-h2); }
.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); font-weight: 400; }
/* ---------------------------------------------------------------- Knoepfe -- */
.knopf {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
/* Gemessen: 12px 24px Polster, kein Rahmen, 15px Black, Zeilenhoehe 1
— ergibt 39px. `line-height` steht NACH `font: inherit`, sonst setzt
die Kurzschrift sie zurueck (Knoepfe fielen so einmal von 50 auf 44). */
padding: 12px 24px;
border: 0;
border-radius: var(--r-knopf);
background: var(--akzent);
color: var(--akzent-tinte);
font: inherit;
font-family: var(--schrift-display);
font-weight: 900;
font-size: 0.9375rem;
line-height: 1;
text-transform: uppercase;
letter-spacing: 0;
cursor: pointer;
/* Roter Schein wie im Original. */
box-shadow: 0 0 10px rgb(255 0 0 / 26%);
transition: transform 0.25s var(--kurve), box-shadow 0.25s var(--kurve),
background 0.2s ease, color 0.2s ease;
}
/* Beim Darueberfahren weiss mit roter Schrift — so im Original. */
.knopf:hover {
background: var(--tinte);
color: var(--akzent);
transform: translateY(-1px);
}
/* 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; }
/* **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. */
.knopf-leer {
background: rgb(var(--tinte-rgb) / 7%);
color: var(--tinte);
border-color: rgb(var(--tinte-rgb) / 14%);
}
.knopf-leer:hover {
background: rgb(var(--tinte-rgb) / 14%);
color: var(--tinte);
border-color: rgb(var(--tinte-rgb) / 28%);
}
.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;
}
.icon { flex: none; }
/* ---------------------------------------------------------------- Kopf --- */
/* **Betreiberentscheidung 31.10.2026: Kopf, Menue und beide Heros wie
cosmopolar-hp** (optisch, nicht inhaltlich). Die Zeile steht frei ueber
dem Bild und wird erst beim Scrollen deckend — tropi.de setzt sie
dagegen als #141414-Balken ueber dem Hero. Farben, Marke und Schriften
bleiben die von tropi; Masse und Verhalten aus cosmopolar-hp. */
.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: rgb(11 11 14 / 92%);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
/* **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: Marke und letzter Menuepunkt stehen an den Kanten der
Inhaltsspalte (100px bei 1440), nie unter dem Seitenabstand.
`--breite` schliesst hier die beiden Raender der Huelle ein, deshalb
`+ var(--gutter)` — in cosmopolar-hp steht die Formel ohne, weil dort
`--breite` die reine Inhaltsbreite ist. */
.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. Hoehen wie in cosmopolar-hp (46/34); die
Wortmarke ist breiter (3,2:1), bleibt aber in ihrem Seitenverhaeltnis. */
.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; }
}
/* 16px Black mit 0,04em Sperrung, wie cosmopolar-hp. `font: inherit` und
die Knopfwerte gelten dem „Mehr"-Knopf, der sonst wie ein Formularknopf
aussaehe. */
.menu a,
.menu-unter-knopf {
position: relative;
display: block;
padding: 0.5rem 0;
border: 0;
background: none;
color: var(--tinte);
font: inherit;
font-family: var(--schrift-display);
font-size: 1rem;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.04em;
cursor: pointer;
transition: color 0.15s ease;
}
/* Keine Unterstreichung — weder fest noch beim Darueberfahren. Der aktive
Punkt ist eingefaerbt, das genuegt als Signal. */
.menu a:hover, .menu-unter-knopf:hover { color: var(--akzent-hell); }
.menu a[aria-current='page'] { color: var(--akzent-hell); }
/* --- Untermenue „Mehr" ----------------------------------------------------
**Neu im System**, weil tropi.de sechs Ziele hinter „Mehr" fuehrt. Auf
dem Schreibtisch ein Aufklapper unter dem Punkt, auf schmalen Geraeten
steht die Liste im Vollbildmenue offen untereinander. Der Knopf traegt
das Dreieck des Originals als ::after. */
.menu-gruppe { position: relative; }
/* Dreieck samt Abstand = 10px + 1em, gemessen (30px bei 20px Schrift,
24px bei 14px). */
.menu-unter-knopf {
display: inline-flex;
align-items: center;
gap: 10px;
}
.menu-unter-knopf::after {
content: '';
margin-inline: 0.2em;
border: 0.3em solid transparent;
border-top-color: currentColor;
border-bottom: 0;
transition: transform 0.2s ease;
}
.menu-unter-knopf[aria-expanded='true']::after { transform: rotate(180deg); }
.menu .menu-unter {
position: absolute;
top: calc(100% + 10px);
right: 0;
display: none;
flex-direction: column;
align-items: stretch;
gap: 0;
min-width: 13rem;
padding: 0.5rem 0;
background: var(--kopf);
border-radius: 0 0 var(--r-klein) var(--r-klein);
box-shadow: var(--schatten);
}
.menu-unter-knopf[aria-expanded='true'] + .menu-unter,
.menu-gruppe:hover > .menu-unter { display: flex; }
.menu .menu-unter a {
padding: 0.7rem 1.25rem;
font-size: 0.875rem;
}
.menu .menu-unter a:hover { background: var(--akzent); color: var(--akzent-tinte); }
/* 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. */
/* Umbruch auf das Vollbildmenue unter 900px, wie cosmopolar-hp — mit vier
Punkten samt „Mehr" wird die Zeile bei 768 sonst eng. */
@media (max-width: 1024px) { :root { --rand-rahmen: 5vw; } }
@media (max-width: 767px) { :root { --t-h2: 2.1875rem; } }
@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: 0; /* eng gesetzt — Betreiber, 31.10.2026 (vorher 1.5rem) */
}
.menu li { justify-content: center; }
.menu a {
padding: 0.25rem 0;
font-size: clamp(1.75rem, 7vw, 2.25rem);
line-height: 1.15;
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; }
/* 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; }
}
/* Im Vollbildmenue steht das Untermenue offen, der Knopf ist dort nur
Ueberschrift der Gruppe. */
@media (max-width: 899px) {
.menu-gruppe { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.menu-unter-knopf { pointer-events: none; color: var(--tinte-still); font-size: 1rem; }
.menu-unter-knopf::after { content: none; }
.menu .menu-unter {
position: static; display: flex; align-items: center; gap: 0.25rem;
min-width: 0; padding: 0; background: none; box-shadow: none;
}
.menu .menu-unter a { padding: 0; font-size: 1.25rem; }
.menu .menu-unter a:hover { background: none; color: var(--akzent-hell); }
}
/* ----------------------------------------------------------------- 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. */
/* Wie cosmopolar-hp: Der Hero laeuft unter die freie Kopfzeile. */
height: clamp(500px, 71svh, 790px);
margin-top: calc(var(--kopf-hoehe) * -1);
display: grid;
place-items: center;
overflow: hidden;
background: var(--nacht);
text-align: center;
}
.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;
/* Verlauf wie cosmopolar-hp: oben dunkler, damit die freie Kopfzeile
traegt, unten dunkler fuer den Uebergang in den Seitengrund. */
background: linear-gradient(180deg, rgb(0 0 0 / 55%) 0%, rgb(0 0 0 / 35%) 45%, rgb(0 0 0 / 75%) 100%);
}
.hero-text {
position: relative;
z-index: 2;
display: grid;
justify-items: center;
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. */
/* 10 % der Fensterbreite bei 1440 (144px), 186px bei 768, 163px bei
390 — gemessen auf tropi.de. Die Breiten bleiben: cosmopolar-hp setzt ein
fast quadratisches Zeichen, tropi eine Wortmarke 3,2:1 — mit
den 8 % aus cosmopolar-hp waere sie 27px hoch. Abstand zum Titel 1rem. */
.hero-logo {
width: 144px;
margin: 0 auto 1rem;
}
@media (max-width: 1024px) { .hero-logo { width: 186px; } }
@media (max-width: 767px) { .hero-logo { width: 163px; } }
/* Der Hero-Titel ist ein
, kein
— die H1 der Seite steht statisch
und fuer Lesegeraete unsichtbar im Markup. Sonst waeren es zwei. */
/* Skala und Zeilenhoehe wie cosmopolar-hp (44 … 85px, 1,02). */
.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;
}
@media (max-width: 767px) {
/* 370px Platz — mit dem Inhaltsrand (30px) braeche „BEGINNT HIER." in
drei Zeilen. */
.hero-text { padding-inline: 10px; }
}
/* Zeilenbruch per im Markup — wie im Original ein Textknoten. */
/* 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. */
/* Wie cosmopolar-hp; tropi.de setzt ihn so gross wie alle anderen. */
.hero-text .knopf {
padding: 0.7rem 1.4rem;
font-size: 0.8125rem;
}
/* ------------------------------------------------------------- Ueber uns -- */
/* Zwei Spalten zu je 510px mit 60px Abstand bei 1440 (1080 gesamt),
zwei Spalten noch bei 768, eine darunter — gemessen. Oben 80px Luft,
unten der gewohnte Abschnittsabstand. */
.ueber {
display: grid;
gap: 60px;
align-items: center;
max-width: calc(var(--breite-ueber) + 2 * var(--gutter));
}
/* `minmax(0, 1fr)`: Bei 768 ist „PARTYNAECHTE" in 50px breiter als die
Spalte (380 zu 324). Das Original laesst das Wort in den Spaltenabstand
ragen, statt die Spalten zu verschieben — hier ebenso. */
@media (min-width: 768px) {
.ueber { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
#ueber { padding-block: 80px; }
/* Unter der Ueberschrift 20px, der Balken (6px), noch einmal 20px. */
.ueber-text h2 {
position: relative;
font-size: var(--t-h2);
margin-bottom: 46px;
}
/* Der Balken unter der Ueberschrift: 6px, ganz gerundet, eine helle Spur
mit rotem Anteil — so im Original. Als ::after, er traegt keinen Inhalt. */
.ueber-text h2::after {
content: '';
position: absolute;
left: 0; right: 0;
top: calc(100% + 20px);
height: 6px;
border-radius: 999px;
background: linear-gradient(90deg, var(--akzent) 0 38%, rgb(var(--tinte-rgb) / 8%) 38%);
}
/* Blocksatz wie im Original. */
/* Kein Blocksatz. Auf schmalen Spalten reisst er Loecher zwischen die
Woerter — auf dem Telefon bis zu 45 Pixel in einer Zeile. */
/* Weiss und im Blocksatz, wie im Original. */
.ueber-text p { color: var(--tinte); text-align: justify; }
.ueber-text .knopf-reihe { margin-top: 20px; }
/* **Auf dem Telefon richtet sich der Abschnitt nach den anderen.**
Sobald `.ueber` einspaltig steht, sitzt diese Ueberschrift direkt ueber
„Next Events" und „Get the Vibe" — und war mit 22px sichtbar kleiner als
deren 28px. Auf der bestehenden Seite sind alle drei gleich gross
(gemessen: je 35px bei 390px Breite).
Der Knopf steht aus demselben Grund mittig: In den anderen Abschnitten
macht das `[data-mitte]`, hier geht es nicht ueber das Markup, weil der
Knopf auf dem Schreibtisch in der linken Spalte bleiben soll.
Der Haltepunkt ist derselbe wie der des Rasters oben — zwei Werte, die
zusammengehoeren. Wer einen aendert, muss den anderen mitziehen. */
/* Auf dem Telefon bleibt der Knopf links — so im Original. */
/* --------------------------------------------------------------- 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));
}
/* **Abweichung vom Original, bewusst:** tropi.de zeigt bei 768px drei
176px schmale Karten nebeneinander, Titel in 27px laufen dort aus der
Karte. Hier bleibt es beim Systemumbruch: eine Spalte unter 1025px. */
@media (max-width: 1024px) {
.karten { grid-template-columns: 1fr; }
}
.karte {
display: flex;
flex-direction: column;
/* Glatte Flaeche #111 — tropi.de hat keine Kerben und keine Perforation
(die Eintrittskarten-Form der Geschwister ist dort nicht Marke). */
background: var(--karte);
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); }
/* Feste 16:9-Flaeche in #0a0a0a; der Flyer steht darin in seinem eigenen
Seitenverhaeltnis, oben buendig — ein flacherer Flyer laesst unten Grund
frei (gemessen: 400x209 in 400x225). So schneidet das Original nichts ab. */
.karte-bild { aspect-ratio: 16 / 9; overflow: hidden; background: #0a0a0a; }
.karte-bild img { width: 100%; height: auto; }
/* 22px 24px oben und seitlich — gemessen. */
.karte-text {
display: flex;
flex-direction: column;
padding: 22px 24px 0;
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. */
/* Bei tropi ohne Perforation: nur der Verweis „Mehr erfahren", links
unten, 18px Luft darueber, 24px darunter. Poppins 12px, 0,6px Sperrung
— gemessen. Das Original verlangt Poppins 900 und bekommt 700, weil es
keine Datei fuer 900 laedt; hier dieselbe Datei, also dasselbe Bild. */
.karte-abriss {
display: flex;
align-items: center;
gap: 0.5rem;
margin: 9.5px 0 0; /* 77 = 67,5 + 9,5 bei 1440, gemessen */
padding: 0 24px 24px;
font-family: var(--schrift-klein);
font-size: 0.75rem;
font-weight: 900;
line-height: 1.5;
text-transform: uppercase;
letter-spacing: 0.6px;
}
.karte-infos {
display: flex;
flex: 1;
align-items: center;
gap: 10px;
padding-top: 18px;
color: var(--akzent-text);
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; }
/* 27px/1,25 bei 1440 und 768, 22px bei 390, hoechstens zwei Zeilen —
gemessen. */
.karte-titel {
min-height: 2.5em; /* immer zwei Zeilen Platz, gemessen 68px */
font-size: 1.6875rem;
line-height: 1.25;
letter-spacing: -0.01em;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
@media (max-width: 767px) { .karte-titel { font-size: 1.375rem; } }
/* Termin unter dem Titel. Stand hier vorher der Ort, der bei allen
Veranstaltungen gleich lautete — jetzt die Angabe, nach der man auf einer
Eventkarte zuerst sucht, und entsprechend betont. */
/* Datum rot und schwarz, darunter die Zeitspanne — beide 15px mit 0,4px
Sperrung, gemessen. */
.karte-termin {
margin: 0 0 10px;
color: var(--akzent-text);
font-size: 0.9375rem;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.4px;
}
.karte-termin span { display: block; margin-top: 4px; color: var(--tinte); font-weight: 400; }
/* --- Eventliste (/events/) ----------------------------------------------
**Varianten der Systemklassen, keine eigene Sprache.** tropi.de fuehrt
die Liste enger (1140px, 10px Rand), dreispaltig bis 768px, und setzt
in der Karte Datum 20px/30, Zeit 14px Light (dieselbe Regel wie beim
Original: Light ist nicht geladen, es erscheint Regular), Titel 26px,
21px bei 768, 24px auf dem Telefon — alles gemessen. */
.huelle--liste { max-width: calc(1140px + 20px); padding-inline: 10px; }
.abschnitt-liste { padding-block: 35px 80px; }
@media (max-width: 1024px) {
.karten--liste { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
.karten--liste { grid-template-columns: 1fr; }
}
.karten--liste .karte-termin { font-size: 1.25rem; line-height: 1.5; }
.karten--liste .karte-termin span { font-size: 0.875rem; font-weight: 300; }
.karten--liste .karte-titel { font-size: 1.625rem; }
.karten--liste .karte-abriss { margin-top: 10px; }
@media (max-width: 1024px) { .karten--liste .karte-titel { font-size: 1.3125rem; } }
@media (max-width: 767px) { .karten--liste .karte-titel { font-size: 1.5rem; } }
/* Monatsueberschrift der Eventliste. */
/* Zentriert und weiss, ohne Trennlinie — wie im Original. */
/* 32px/1,2, 1px Sperrung, 40px darueber, 20px darunter — gemessen bzw.
aus dem Plugin-CSS (`margin: 40px 0 20px`). Das Original verlangt 800
und bekommt Black (900), weil keine 800er-Datei geladen ist. */
.monat {
font-size: 2rem;
font-weight: 800;
line-height: 1.2;
letter-spacing: 1px;
color: var(--tinte);
text-align: center;
margin: 40px 0 20px;
}
/* Auch der erste Monat traegt 40px darueber — so im Original. */
.leer {
color: var(--tinte-leise);
text-align: center;
padding-block: 3rem;
}
/* ------------------------------------------------------- Schieberegler -- */
/* Ersetzt Swiper. Das Band wird verschoben, die Folien teilen sich die
Breite — wie viele gleichzeitig zu sehen sind, sagt `data-zeigen`. */
.slider { position: relative; }
/* Die Spur umfasst **nur das Band**, nicht die Punktreihe. Daran haengen
zwei Dinge: Das Beschneiden (frueher am Regler) und die senkrechte Mitte
fuer die Pfeile — die sassen vorher auf der Mitte von Bild plus Punkten
und damit zu tief.
`touch-action: pan-y` gibt das senkrechte Scrollen an die Seite weiter
und behaelt die waagerechte Geste fuer das Blaettern. Ohne das verschluckt
der Browser entweder das Wischen oder das Scrollen. */
.slider-spur {
position: relative;
overflow: hidden;
touch-action: pan-y;
}
.slider-band {
display: flex;
/* `transition` setzt slider.js, damit eine Strecke ohne JavaScript nicht
erst leer dasteht und dann springt. */
}
.slider-band > figure {
margin: 0;
flex: 0 0 100%;
padding-inline: 0.3125rem;
box-sizing: border-box;
}
.slider-band img {
width: 100%;
object-fit: cover;
background: var(--box);
border-radius: var(--r-karte);
}
/* Die Einblick-Strecke zeigt Querformate und laesst sich vergroessern. */
/* An der Klasse, nicht an der Abschnitts-ID. Die ID heisst je Projekt
anders (`einblick`, `fotos`); haengt die Regel daran, faellt sie beim
Umbenennen lautlos aus — dann folgt die Folienbreite dem Bild statt der
Spur und vom Nachbarbild schaut ein Streifen hervor. */
.slider-randlos .slider-band > figure { cursor: zoom-in; }
/* 16:9 — das Format der Dateien im Streifen (1400x788). Die Deckblaetter
auf /fotos/ tragen 2:3, weil ihre Quellen Hochformate sind: Jede Flaeche
folgt ihrer eigenen Quelle, statt beide auf ein gemeinsames Mass zu
zwingen und eine davon zu beschneiden. */
/* tropi: 4:3, Kante an Kante, ohne Rundung (480x360 bei 1440 — gemessen). */
.slider-randlos .slider-band > figure { padding-inline: 0; }
.slider-randlos .slider-band img { border-radius: 0; } /* eigenes Format, ~4:3 */
.slider-randlos { margin-top: -20px; } /* 50px statt 70 unter der Kopfzeile */
/* Die Ueber-uns-Strecke zeigt Hochformate, 4:5 mit 28px Rundung (510x638). */
.ueber .slider-band > figure { padding-inline: 0; }
.ueber .slider-band img { aspect-ratio: 4 / 5; border-radius: 28px; }
.slider-pfeil {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 2;
display: grid;
place-items: center;
width: 42px; height: 42px;
border: 0;
border-radius: 50%;
background: rgb(0 0 0 / 45%);
backdrop-filter: blur(8px);
color: var(--akzent);
cursor: pointer;
transition: background 0.15s ease;
}
.slider-pfeil:hover { background: rgb(0 0 0 / 75%); }
.slider-rueck { left: 0.3125rem; }
.slider-vor { right: 0.3125rem; }
/* 6px-Punkte, 19px unter dem Bild, 12px Flaeche darunter — gemessen
(Pixel des Bildschirmfotos, die Punkte stehen in keinem Messeintrag). */
.slider-punkte {
display: flex;
justify-content: center;
gap: 12px;
margin-top: 19px;
padding-bottom: 12px;
}
/* Trefferflaeche groesser als der Punkt: 6px allein waeren auf dem
Telefon nicht zu treffen. Gezeichnet wird der Punkt als ::before. */
.slider-punkt {
display: grid;
place-items: center;
width: 6px; height: 6px;
padding: 0;
border: 0;
background: none;
cursor: pointer;
position: relative;
}
.slider-punkt::before {
content: '';
width: 6px; height: 6px;
border-radius: 50%;
/* tropi: aktiver Punkt weiss, die uebrigen rot — umgekehrt zum System. */
background: var(--akzent-text);
transition: background 0.15s ease;
}
.slider-punkt::after { content: ''; position: absolute; inset: -9px; }
.slider-punkt[aria-current='true']::before { background: var(--tinte); }
/* Die Einblick-Strecke laeuft im Original randlos ueber die volle
Fensterbreite. Sie steht im Markup trotzdem in der Huelle, damit die
Ueberschrift darueber ausgerichtet bleibt — der negative Rand holt sie
wieder heraus. `100vw` statt `100%`, weil die Huelle schmaler ist; der
Ausgleich nach links ist die halbe Differenz. */
.slider-randlos {
/* `--sb` ist die Breite der Scrollleiste, gesetzt von page-common.js.
Ohne den Abzug ist die Flaeche auf dem Schreibtisch genau um diese
Breite zu breit und die ganze Seite laesst sich quer schieben. */
width: calc(100vw - var(--sb, 0px));
margin-left: calc(50% - (100vw - var(--sb, 0px)) / 2);
}
.slider-randlos .slider-rueck { left: 0; }
.slider-randlos .slider-vor { right: 0; }
/* ------------------------------------------------------------ Lightbox -- */
.lightbox {
position: fixed;
inset: 0;
z-index: 200;
display: none;
place-items: center;
background: rgb(0 0 0 / 92%);
padding: clamp(1rem, 5vw, 3rem);
}
.lightbox[data-offen='ja'] { display: grid; }
.lb-bild {
max-width: 100%;
max-height: 82vh;
object-fit: contain;
border-radius: var(--r-karte);
}
.lb-zaehler {
position: absolute;
bottom: 1.25rem;
left: 50%;
transform: translateX(-50%);
margin: 0;
color: var(--tinte-still);
font-size: var(--t-klein);
}
.lb-knopf {
position: absolute;
display: grid;
place-items: center;
width: 48px; height: 48px;
border: 0;
border-radius: 50%;
background: rgb(255 255 255 / 10%);
backdrop-filter: blur(8px);
color: var(--tinte);
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease;
}
.lb-knopf:hover { background: var(--akzent); color: var(--akzent-tinte); }
.lb-zu { top: 1rem; right: 1rem; }
.lb-melden { top: 1rem; right: calc(1rem + 56px); }
.lb-knopf[hidden] { display: none; }
.lb-rueck { left: 1rem; top: 50%; transform: translateY(-50%); }
.lb-vor { right: 1rem; top: 50%; transform: translateY(-50%); }
/* --------------------------------------------------------------- Anfahrt -- */
/* /anfahrt/: ein Kasten (1140px, 1px Rahmen in 6 % Weiss, Rundung 20,
Polster 48 — 8 auf dem Telefon), darin „So erreichst du uns:" und zwei
Spalten Auto / Bus zu je 491px, 20px Einzug. Gemessen am Pixel bzw. an
den Textlagen; der Kasten selbst ist im Original eine transparente
Flaeche mit Rahmen und taucht in den Messdaten nicht auf. */
/* 35px unter dem Banner (51 auf dem Telefon), 60px bis zum Fuss. */
.abschnitt-anfahrt { padding-block: 35px 60px; }
@media (max-width: 767px) { .abschnitt-anfahrt { padding-top: 51px; } }
/* Unten 20px mehr als oben: Der Kasten endet im Original 70px unter der
letzten Zeile (48 + 22) — gemessen bei allen drei Breiten. */
.anfahrt-kasten {
padding: 48px 48px 68px;
border: 1px solid rgb(255 255 255 / 6%);
border-radius: 20px;
}
.anfahrt-kasten > h2 {
font-size: 2rem;
line-height: 1;
letter-spacing: 0;
margin-bottom: 40px;
}
.anfahrt {
display: grid;
gap: 20px;
padding-inline: 20px;
}
@media (min-width: 768px) {
.anfahrt { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.anfahrt h3 {
margin-bottom: 20px;
color: var(--akzent-text);
font-size: 2rem;
font-weight: 800;
line-height: 1;
letter-spacing: 0;
}
.anfahrt a:not(.knopf) { color: var(--akzent-text); font-family: var(--schrift-klein); }
.anfahrt-karte { margin-bottom: 24px; }
@media (max-width: 767px) {
.abschnitt-anfahrt .huelle--liste { padding-inline: 20px; }
.anfahrt-kasten { padding: 8px 8px 34px; }
.anfahrt { padding-inline: 10px; }
.anfahrt h3 { font-size: 1.375rem; }
}
/* ------------------------------------------------------- Seitenkopf (Unter) -- */
/* Bildbanner der Unterseiten — je Seite ein anderes Clubfoto, mit
dunklem Schleier darueber. Masse, Schleier und Schrift wie
cosmopolar-hp (Betreiberentscheidung 31.10.2026, siehe Kopf). */
.seitenkopf-bild {
position: relative;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
isolation: isolate;
}
.seitenkopf-bild::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
background: rgb(0 0 0 / 58%);
}
.seitenkopf-bild[data-banner='events'] { background-image: url('../img/banner/events.webp'); }
.seitenkopf-bild[data-banner='fotos'] { background-image: url('../img/banner/fotos.webp'); }
.seitenkopf-bild[data-banner='jobs'] { background-image: url('../img/banner/jobs.webp'); }
.seitenkopf-bild[data-banner='kontakt'] { background-image: url('../img/banner/kontakt.webp'); }
.seitenkopf-bild[data-banner='anfahrt'] { background-image: url('../img/banner/anfahrt.webp'); }
.seitenkopf-bild[data-banner='vermietung'] { background-image: url('../img/banner/vermietung.webp'); }
.seitenkopf-bild[data-banner='car-branding'] { background-image: url('../img/banner/car-branding.webp'); }
.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 freie Leiste auch
hier auf einem Bild sitzt. Negativer Rand **und** Polster gehoeren
zusammen: Der Rand schiebt den Banner unter die Leiste, das Polster
holt den Inhalt wieder in die sichtbare Flaeche. */
margin-top: calc(var(--kopf-hoehe) * -1);
padding: calc(var(--kopf-hoehe) + clamp(2.5rem, 7vw, 4rem)) 10px clamp(2.5rem, 7vw, 4rem);
border-bottom: 1px solid var(--linie);
text-align: center;
}
/* Grund nur ohne Bild — der Bildbanner traegt keinen eigenen. */
.seitenkopf:not(.seitenkopf-bild) { background-color: var(--flaeche); }
/* Auf dem Telefon ein festes Seitenverhaeltnis statt Mindesthoehe — 3:2
laesst nach Abzug der Kopfzeile gut 40px Luft ueber und unter dem Text
(in cosmopolar-hp gemessen und begruendet). */
@media (max-width: 759px) {
.seitenkopf-bild { min-height: 0; aspect-ratio: 3 / 2; }
}
/* `min-width: 0`: Die Huelle ist ein Rasterelement und koennte sonst nicht
unter die Breite eines langen Worts schrumpfen — „DATENSCHUTZ" wurde in
top10-singen-hp am Rand abgeschnitten. `overflow-wrap` faengt noch
laengere Woerter ab. */
.seitenkopf > .huelle { min-width: 0; padding-inline: 0; }
/* Eigene Skala wie cosmopolar-hp: Die Bannerueberschrift steht allein auf
einer grossen Flaeche — 13vw heisst rund 51px auf einem 390px-Geraet. */
.seitenkopf h1 {
font-size: clamp(3rem, 13vw, 4.5rem);
line-height: 1;
letter-spacing: 0;
overflow-wrap: anywhere;
}
.seitenkopf p {
margin: 1rem auto 0;
max-width: 54ch;
text-transform: none;
}
/* Schrift wie cosmopolar-hp: Akzent, normal, 15 … 18px. Montserrat auf
allen Bannerseiten (tropi.de setzt /events/ als einzige in Poppins). */
.seitenkopf .unterzeile {
color: var(--akzent-text);
font-weight: 400;
font-size: clamp(0.9375rem, 2.6vw, 1.125rem);
line-height: 1.5;
}
/* **Abweichung von cosmopolar-hp, fuer WCAG AA:** Rot direkt auf dem Foto
kam an den gemalten Pixeln auf 1,05–4,36:1, auch `--akzent-hell` auf
dem 58-%-Schleier noch auf 1,74–4,10:1 (tools/bildkontrast.js,
31.10.2026) — an hellen Stellen der Banner ist mit keinem Rot etwas zu
holen; das Gelb in cosmopolar-hp ist hell genug, tropis Rot nicht. Deshalb ein
schmaler Grund aus 92 % Schwarz nur hinter dem Text, wie in roxy-hp. */
.seitenkopf-bild .unterzeile {
display: table;
margin-inline: auto;
padding: 0 8px;
border-radius: 4px;
background: rgb(0 0 0 / 92%);
}
/* ------------------------------------------------------------------ FAQ -- */
/* Zwei Spalten zu 550px mit 20px Abstand bei 1440, ab 768 nebeneinander,
darunter untereinander — gemessen. Ueberschriften 32px Black ohne
Sperrung, 20px darunter. */
.kontakt-raster {
display: grid;
gap: 50px 20px;
align-items: start;
}
@media (min-width: 768px) {
.kontakt-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
/* Ist die FAQ leer, faellt die linke Spalte weg und das Formular rueckt
in die Mitte. */
.kontakt-raster[data-ohne-faq='ja'] {
grid-template-columns: minmax(0, 640px);
justify-content: center;
}
}
.kontakt-raster h2 {
font-size: 2rem;
line-height: 1;
letter-spacing: 0;
margin-bottom: 20px;
}
/* 40px unter dem letzten Element der Spalte — gemessen bei allen drei
Breiten (VIP-Frage bzw. Absendeknopf bis zum Fuss). */
.abschnitt-seite.abschnitt-kontakt { padding-bottom: 40px; } /* nach .abschnitt-seite (71px) */
/* Akkordeon nach dem eigenen CSS der bestehenden Seite („Clean / Apple
Style"): Fragen in 88 % Weiss, Antworten in 64 %, Trennlinien 8 %;
offene Frage mit rotem Verlauf und 3px-Balken links; Plus/Minus in Rot
links vor der Frage. 100px Rand rechts ab 768px. */
@media (min-width: 768px) { .faq-liste { padding-right: 100px; } }
.faq { border-bottom: 1px solid rgb(255 255 255 / 8%); }
.faq:last-child { border-bottom: 0; }
.faq summary {
position: relative;
display: flex;
align-items: center;
gap: 10px;
min-height: 64px;
padding: 18px 4px;
color: rgb(255 255 255 / 88%);
font-size: 0.9375rem;
font-weight: 400;
line-height: 1.35;
letter-spacing: -0.02em;
list-style: none;
cursor: pointer;
transition: background 0.25s ease, padding 0.3s cubic-bezier(0.22, 1, 0.36, 1), color 0.22s ease;
}
.faq summary::-webkit-details-marker { display: none; }
/* Plus, offen Minus: 28px-Kasten mit 16px davor, Zeichen 18px. */
.faq summary::before {
content: '';
flex: none;
width: 28px; height: 28px;
margin-left: 16px;
background:
linear-gradient(currentColor, currentColor) center / 14px 2.5px no-repeat,
linear-gradient(currentColor, currentColor) center / 2.5px 14px no-repeat;
color: var(--akzent-text);
}
.faq[open] summary::before {
background: linear-gradient(currentColor, currentColor) center / 14px 2.5px no-repeat;
}
.faq summary:hover {
padding-left: 10px;
color: var(--tinte);
background: linear-gradient(90deg, rgb(var(--akzent-rgb) / 4.5%), transparent 75%);
}
.faq[open] summary {
padding-left: 12px;
background: linear-gradient(90deg, rgb(var(--akzent-rgb) / 9%) 0%, rgb(var(--akzent-rgb) / 2.5%) 55%, transparent 100%);
}
.faq[open] summary::after {
content: '';
position: absolute;
left: 0; top: 50%;
width: 3px; height: 28px;
transform: translateY(-50%);
border-radius: 99px;
background: var(--akzent);
box-shadow: 0 0 14px rgb(var(--akzent-rgb) / 30%);
}
.faq-text {
padding: 0 12px 24px 16px;
background: linear-gradient(90deg, rgb(var(--akzent-rgb) / 3.5%), transparent 75%);
color: rgb(255 255 255 / 64%);
line-height: 1.7;
letter-spacing: -0.012em;
}
.faq-text p { margin: 0 0 1em; }
.faq-text p:last-child { margin-bottom: 0; }
.faq-text a { color: var(--akzent-text); font-family: var(--schrift-klein); }
/* Antworten aus Clubinio kommen als reiner Text mit Umbruechen
(`textContent`). `pre-line` erhaelt sie — nicht `pre-wrap`, das liesse
das Leerzeichen am weichen Umbruch in der Zeile stehen. */
.faq-text p { white-space: pre-line; overflow-wrap: anywhere; }
@media (max-width: 1024px) {
.faq summary { min-height: 60px; padding: 16px 4px; }
}
@media (max-width: 767px) {
.faq summary { min-height: 56px; padding: 15px 2px; }
.faq summary:hover, .faq[open] summary { padding-left: 7px; }
.faq summary::before { width: 24px; height: 24px; margin-left: 10px; background-size: 12px 2px, 2px 12px; }
.faq[open] summary::before { background-size: 12px 2px; }
.faq-text { padding: 0 6px 20px 8px; line-height: 1.65; }
}
/* Emoji in einem Kasten von der Breite des WordPress-Emojibilds (1em plus
0,07em je Seite) — fuer Eventtexte und FAQ-Fragen gleich. */
.emoji {
display: inline-block;
width: 1em;
margin: 0 0.07em;
text-align: center;
line-height: 1;
vertical-align: -0.1em;
}
/* Kontaktformular: dasselbe Plugin, auf /kontakt/ groesser eingestellt —
Felder 52px (Polster 13/16, Zeilenhoehe 1,4), Rundung 13, Sperrung
−0,01em; das Textfeld 145px. Gemessen. */
.form--kontakt input[type='text'], .form--kontakt input[type='email'],
.form--kontakt textarea {
min-height: 52px;
padding: 13px 16px;
border: 1px solid rgb(255 255 255 / 9%);
border-radius: 13px;
background: rgb(255 255 255 / 2.4%);
line-height: 1.4;
letter-spacing: -0.01em;
}
.form--kontakt textarea { min-height: 145px; }
@media (max-width: 767px) {
.form--kontakt input[type='text'], .form--kontakt input[type='email'],
.form--kontakt textarea { min-height: 50px; padding: 12px 14px; font-size: 1rem; }
.form--kontakt textarea { min-height: 130px; }
}
/* Einwilligung hier in Weiss (auf /jobs/ grau) — Einstellung der Seite. */
.form--kontakt .zustimmung { color: var(--tinte); }
/* ---------------------------------------------------------------- Fotos -- */
/* **Aus atriumkiel-hp uebernommen** — das Original ist dasselbe Fotos-
Plugin (clubinio-fotos), und die dort gemessenen Masse treffen tropi.de
genau: Karten 360px = (1140 − 2 × 30) / 3, Deckblatt 4:5, 60px bis zum
Fuss (160 unter 1025px). Die Albumseiten stehen unter /fotos//
wie im Original (top10-singen-hp fuehrte sie als #/). Gehoert
zurueck in die Vorlage.
Der Rahmen ist die Eventliste (.abschnitt-liste + .huelle--liste: 1160,
Rand 10, 35 oben) — atriumkiel-hp fuehrte dafuer `.albenliste` mit
denselben Massen, eine Dublette. Nur der Abstand zum Fuss weicht ab. */
.abschnitt-liste--fotos { padding-bottom: 60px; }
@media (max-width: 1024px) { .abschnitt-liste--fotos { padding-bottom: 160px; } }
.alben-raster {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 30px;
}
@media (max-width: 1024px) { .alben-raster { grid-template-columns: 1fr; } }
/* Karte wie im Plugin: #0e0e0e, Rundung 14, Deckblatt 4:5 auf #222,
darunter eine 5px-Kante. Kante und Datum im Seitenakzent statt im
eigenen Rot des Plugins (#e11d48) — Betreiber, 31.10.2026. */
.album-karte {
display: block;
overflow: hidden;
border-radius: 14px;
background: #0e0e0e;
font-family: var(--schrift-klein);
font-size: 15px;
line-height: 1.5;
}
.album-bild { aspect-ratio: 4 / 5; background: #222; }
.album-bild img { width: 100%; height: 100%; object-fit: cover; }
.album-text {
padding: 16px 18px;
border-left: 5px solid var(--akzent);
}
.album-datum {
display: block;
margin-bottom: 6px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--akzent-text);
}
.album-titel {
margin-bottom: 8px;
font-family: var(--schrift-klein);
font-size: 25px;
font-weight: 800;
line-height: 1.2;
letter-spacing: 0;
}
.album-ort {
display: inline-block;
font-weight: 700;
color: #c9d2de;
}
/* Albumseite: Titel Poppins (verlangt 900, geladen 700), Angaben mit
Symbolen, darunter die Bilder in CSS-Spalten — 4, bis 1024px 3, 15px
Abstand, Rundung 8. */
.albumseite {
max-width: 1160px;
margin-inline: auto;
padding: 25px 10px 0;
font-family: var(--schrift-klein);
}
.album-kopf {
margin-bottom: 40px;
padding-bottom: 30px;
text-align: center;
}
.album-kopf h1 {
margin: 8px 0 20px;
font-family: var(--schrift-klein);
font-size: 40px;
line-height: 1.2;
letter-spacing: 0;
text-transform: none;
}
.album-meta {
display: flex;
justify-content: center;
gap: 20px;
margin-bottom: 20px;
font-size: 15.2px;
line-height: 1.5;
}
.album-meta-eintrag { display: flex; align-items: center; gap: 5px; }
.album-meta-eintrag .icon { width: 18px; height: 18px; color: var(--akzent-text); }
@media (max-width: 1024px) {
.albumseite { padding-inline: 0; }
.album-kopf h1 { font-size: 32px; }
.album-meta { flex-direction: column; gap: 10px; }
.album-meta-eintrag { justify-content: center; }
}
@media (max-width: 767px) {
.albumseite { padding-inline: 10px; padding-bottom: 25px; }
.album-kopf h1 { font-size: 24px; }
}
.galerie {
margin-block: 50px;
column-count: 4;
column-gap: 15px;
}
@media (max-width: 1024px) { .galerie { column-count: 3; } }
.galerie-bild {
position: relative;
margin: 0 0 15px;
overflow: hidden;
border-radius: 8px;
background: #171a21;
break-inside: avoid;
cursor: zoom-in;
}
@media (max-width: 767px) {
.galerie-bild { margin-bottom: 10px; }
.galerie { margin-top: 52px; } /* 102px unter den Angaben, gemessen */
}
.galerie-bild img { width: 100%; height: auto; }
.galerie-bild:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
/* ---------------------------------------------------------------- Jobs -- */
/* Im Original steht die Ansprache linksbuendig und in normaler Schriftlage,
nicht als zentrierte Versalueberschrift. Einleitung wie auf tropi.de:
fette Frage, zwei Absaetze in Weiss, 14px auf dem Telefon. */
.jobs-ansprache { margin-bottom: 0.9rem; }
.jobs-intro { color: var(--tinte); }
@media (max-width: 767px) {
.jobs-ansprache, .jobs-intro { font-size: 0.875rem; }
}
.jobs-intro + .form, .jobs-intro + .leer + .form { margin-top: 19px; }
/* --- Seiten mit Fliesstext und Formular (/jobs/, /kontakt/ …) -------------
1120px Inhalt bei 1440 (x=160), 20px Rand darunter; 46px unter dem
Banner, 71px bis zum Fuss — gemessen auf /jobs/. */
.huelle--seite { max-width: calc(1120px + 40px); padding-inline: 20px; }
.abschnitt-seite { padding-block: 46px 71px; }
/* ------------------------------------------------------------ Formulare -- */
/* **Die Optik des Clubinio-Formular-Plugins**, das tropi.de auf /jobs/,
/kontakt/, /vermietung/ und /car-branding/ zeigt — gemessen auf /jobs/:
Kasten mit 1px-Rahmen #262b36, Rundung 16, Polster 32 (24/20 auf dem
Telefon); Felder 39px hoch in 8 % Weiss, Rundung 15; Beschriftung 13,6px
halbfett in #cfd6e0, Sternchen #f43f5e; 16px zwischen den Gruppen, 5px
zwischen Beschriftung und Feld; zwei Spalten mit 16px Abstand.
**Variante `.form--kontakt`** (siehe dort): /kontakt/ stellt dasselbe
Plugin groesser ein (Felder 52px, Rundung 13). */
.form {
display: grid;
gap: 16px;
padding: 32px;
border: 1px solid #262b36;
border-radius: 16px;
}
@media (max-width: 767px) { .form { padding: 24px 20px; } }
/* Ueberschrift im Kasten: Montserrat 800 25,6px, rot, Versalien. */
.form > h2 {
margin: 0 0 1px;
color: var(--akzent-text);
font-size: 1.6rem;
font-weight: 800;
line-height: 1.15;
letter-spacing: 0;
}
/* Ab 768px fest zweispaltig, darunter eine Spalte — wie das Plugin.
`auto-fit` mit Mindestbreite stapelte auf /kontakt/ bei 768 (288px
Platz) Name und E-Mail, das Original stellt sie dort zu je 136px
nebeneinander. */
.form-reihe {
display: grid;
gap: 16px;
grid-template-columns: 1fr;
}
@media (min-width: 768px) {
.form-reihe { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
/* 6px — am Original mit Nachkommastellen gemessen (Beschriftung 13,59,
Feld 38,5: 13,59 + 6 + 38,5 + 16 = 74,09 Reihenabstand). Vorher aus
ganzzahligen Lagen auf 5,4 zurueckgerechnet; das liess /car-branding/
bei 768 um 3px zurueckfallen. */
.feld { display: grid; gap: 6px; align-content: start; }
.feld > span, .feld legend > span {
color: #cfd6e0;
font-size: 0.85rem;
font-weight: 600;
line-height: 1;
}
.feld-pflicht { color: #f43f5e; font-style: normal; }
/* `line-height` NACH `font: inherit` — sonst setzt die Kurzschrift sie
zurueck (Formularfelder fielen so einmal von 66 auf 46px). */
input[type='text'], input[type='email'], input[type='tel'],
input[type='number'], input[type='date'], input[type='file'], textarea, select {
width: 100%;
padding: 8px 16px;
border: 0;
border-radius: 15px;
background: rgb(255 255 255 / 8%);
color: var(--tinte);
font: inherit;
font-family: var(--schrift-text);
font-size: 0.9375rem;
line-height: 1.5;
transition: box-shadow 0.2s ease, background 0.2s ease;
}
textarea {
min-height: 137px;
padding: 12px 14px;
resize: vertical;
}
input:focus, textarea:focus, select:focus {
outline: 0;
background: rgb(255 255 255 / 11%);
box-shadow: 0 0 0 2px rgb(var(--akzent-rgb) / 45%);
}
::placeholder { color: #8a94a3; }
/* Dateifeld wie im Plugin: kein eigener Kasten, nur der Knopf. */
input[type='file'] {
height: 39px;
padding: 0;
background: none;
font-family: var(--schrift-klein);
font-size: 0.88rem;
color: #cfd6e0;
}
input[type='file']:focus { background: none; box-shadow: none; }
input[type='file']::file-selector-button {
margin-right: 0.75rem;
height: 100%;
padding: 0 14px;
border: 1px solid #333a47;
border-radius: 8px;
background: rgb(255 255 255 / 8%);
color: var(--tinte);
font: inherit;
cursor: pointer;
}
input[type='file']:focus-visible::file-selector-button {
outline: 2px solid var(--akzent);
outline-offset: 2px;
}
/* Bereiche: untereinander, Kaestchen 13px, 9px zum Text, Poppins 14,72px.
Reihen 28,5px. */
.auswahl { display: grid; gap: 8px; margin-top: 6px; }
.auswahl label {
display: flex;
align-items: center;
gap: 9px;
color: #cfd6e0;
font-family: var(--schrift-klein);
font-size: 0.92rem;
line-height: 1.4;
cursor: pointer;
}
fieldset.feld { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.feld legend { padding: 0; margin-bottom: 0; width: 100%; }
fieldset.feld legend > span { display: block; line-height: 1.5; }
/* Einwilligung: Kaestchen 13px, Text 12,8px in #9aa6b5. */
.zustimmung {
display: flex;
align-items: flex-start;
gap: 9px;
color: #9aa6b5;
font-size: 0.8rem;
line-height: 1.45;
}
.auswahl input, .zustimmung input {
appearance: none;
-webkit-appearance: none;
flex: none;
width: 13px; height: 13px;
margin: 2px 0 0;
border: 1px solid #6b7280;
border-radius: 3px;
background: transparent;
cursor: pointer;
}
.auswahl input { margin: 0; }
.auswahl input:checked, .zustimmung input:checked {
border-color: var(--akzent);
background: var(--haken) var(--akzent) center / 9px 9px no-repeat;
}
.auswahl input:focus-visible, .zustimmung input:focus-visible {
outline: 2px solid var(--akzent);
outline-offset: 2px;
}
/* Der Verweis steht im Original in Poppins (Plugin-Voreinstellung). */
.zustimmung a { color: inherit; font-family: var(--schrift-klein); text-decoration: underline; }
/* Absenden ueber die volle Breite: 51px, Rundung 10, 15px Montserrat 800. */
.form .knopf-reihe { display: block; }
.form .knopf-reihe .knopf {
width: 100%;
padding: 14px 30px;
border-radius: 10px;
font-weight: 800;
line-height: 1.5;
box-shadow: none;
}
/* 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: #ff6b5e; }
.rueckmeldung[data-state='laeuft'] { color: var(--tinte-still); }
/* Leer nimmt sie keinen Platz — sonst klafft im Formular eine Zeile plus
Abstand zwischen Einwilligung und Knopf, die das Original nicht hat. */
.form .rueckmeldung:empty { display: none; }
/* ------------------------------------------------------------- Eventseite -- */
/* Flaeche #0f0f0f ueber die volle Breite, Spalte 820px, 40px oben —
gemessen. Titel 40px/1,1, 32px bei 768, 26px auf dem Telefon. */
:root { --flaeche: #0f0f0f; }
.abschnitt-event { padding: 0 20px; }
.event { max-width: 820px; padding: 40px 0 87px; }
.event h1 {
font-size: 2.5rem;
font-weight: 800;
line-height: 1.1;
letter-spacing: 0;
}
@media (max-width: 1024px) { .event h1 { font-size: 2rem; } }
@media (max-width: 767px) { .event h1 { font-size: 1.625rem; } }
/* Flyer im eigenen Format, 16px Rundung. */
.event-flyer {
width: 100%;
border-radius: 16px;
margin-bottom: 36px;
}
/* Knoepfe untereinander, je 10px eingerueckt, 50px hoch, 10px Abstand,
Symbol vor dem Text — gemessen. `knopf-ticket` ist die Groesse dieser
Knoepfe (14px, 1px Sperrung, Polster 18/24, Rundung 10). */
.event .knopf-reihe {
display: grid;
gap: 10px;
margin: 0 10px 46px;
}
.knopf-ticket {
gap: 8px;
padding: 18px 24px;
border-radius: 10px;
font-size: 0.875rem;
letter-spacing: 1px;
box-shadow: none;
}
.knopf-ticket.knopf-leer { background: #242424; border: 0; }
/* Symbole davor: Font Awesome Free ticket-alt und couch (CC BY 4.0), als
Maske gezeichnet wie der Pfeil — nicht als