/* ============================================================================
Arena Ihlpohl — Design und Layout
----------------------------------------------------------------------------
Übernahme der bestehenden arena-ihlpohl.de (WordPress mit Elementor und
den Clubinio-Plugins). Gestaltung aus roxy-hp — dasselbe Theme. Alle Maße und Farben sind an der laufenden Seite
gemessen und stehen in referenz/*.json; tools/abgleich.py vergleicht
dagegen.
**Struktur vom System, Marke vom Original.** Die Klassen sind die des
Systems (cosmopolar-hp ∩ top10-singen-hp: .huelle, .abschnitt*,
.kopfzeile, .knopf*, .karte*, .seitenkopf*, .form/.feld, .faq, .fuss*).
Was das System nicht hat, steht unter einem Namen nach seiner Aufgabe
und ist in docs/README.md als Rückgabe an die Vorlage vermerkt. Die
Werte des Themes (dasselbe wie in atriumkiel-hp und roxy-hp) kommen aus
der Messung.
Schwarzer Grund, weiße Schrift, Montserrat Black in Versalien, Akzent
Pink #E6007E mit Leuchtschatten, runde Knöpfe (15 px) und Karten (20 px).
Keine Inline-Styles. Die Content-Security-Policy führt style-src 'self'
ohne unsafe-inline; was aus der API kommt, wird als ![]()
oder
textContent gesetzt, nie als style-Attribut.
========================================================================== */
/* ------------------------------------------------------------- Schriften -- */
/* **Dieselben Dateien wie auf dem Original** (`/wp-content/uploads/2026/0x/`),
nicht nur dieselben Familien — eine andere Fassung setzt dieselben
Wörter messbar anders breit. Siehe docs/SCHRIFTEN.md; Lizenztexte
liegen als assets/fonts/OFL-*.txt bei den Schriften.
**Gewicht 600 ist Medium.** So legt es das Original an; wer hier eine
echte SemiBold einsetzt, macht jeden 600er-Text breiter. Fehlende
Gewichte (Montserrat 800, Poppins 600/800/900) fehlen auch im Original —
der Browser nimmt dort wie hier den nächsten Schnitt. */
@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; }
/* Fließtext in Inter, wie im System (baggi-hp) — Entscheidung des
Betreibers 31.10.: Das Original setzt ihn in Montserrat 400, Knöpfe und
Karten in Poppins; hier keine dritte Schrift. Kommentare unten, die
„Poppins" nennen, beschreiben das Original. */
@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 {
/* Flächen — gemessen am Original (referenz/*.json). */
--nacht: #000000; /* Seitengrund */
--kopf: #141414; /* Kopfleiste */
--menu: #161616; /* aufgeklapptes Menü auf dem Telefon */
--karte: #111111; /* Eventkarte */
--karte-bild: #0a0a0a; /* Fläche hinter dem Flyer */
--fuss: #0c0c0c; /* Fußbereich */
/* Zwei Schriften, wie im System: Montserrat für Überschriften, Knöpfe,
Karten und Menü, Inter für Fließtext. Das Original setzt Fließtext in
Montserrat 400 und Knöpfe/Karten in Poppins; der Betreiber hat das
Systemmaß gewählt (.auftrag.md, 31.10.). Der „Titillium"-Grundwert der
Vorlage roxy-hp war nur der geerbte, nie geladene Wert des Originals. */
--schrift-display: 'Montserrat', system-ui, sans-serif;
--schrift-text: 'Inter', system-ui, -apple-system, sans-serif;
--tinte: #ffffff;
--tinte-rgb: 255 255 255;
--tinte-still: #9a9a9a; /* Standzeile, Etiketten */
/* **Akzent `#E6007E`, nicht der Clubinio-Wert `#e61b7e`.** Gemessen auf
arena-ihlpohl.de (Elementor `--e-global-color-accent`, Knöpfe,
Kartendatum, Fußlinks) — das ist, was ein Gast sieht. */
--akzent: #e6007e;
--akzent-rgb: 230 0 126;
--akzent-tinte: #ffffff;
/* **Eine Abweichung vom Original, für WCAG AA** (gerechnet 31.10.):
- Weiß auf #e6007e: 4,50:1 — die Knopffläche bleibt das Original.
- Kleine pinke Schrift auf den dunklen Flächen (#0a0a0a bis #181818)
erreicht mit #e6007e nur 3,95–4,40:1. --akzent-text ist derselbe
Farbton, 18 % zu Weiß gemischt — der kleinste Schritt auf ≥ 4,5:1.
Große Schrift (Menü, Datumszeile, Überschriften) behält das Original.
abgleich.py kennt genau diese Paare (FARBTAUSCH). */
--akzent-text: #ea2e95;
--akzent-flaeche: #e6007e;
/* Aktiver Menüpunkt, der auf dem Foto steht (schwebende Kopfzeile):
#ea2e95 kam an den gemalten Pixeln nur auf 2,95–4,28:1
(tools/bildkontrast.js, 31.10.). #f27dbd = 49 % zu Weiß, gerechnet
gegen den dunkelsten gemessenen Fall: 4,68:1. */
--akzent-hell: #f27dbd;
/* Das eigene Rot des Fotoplugins (#e11d48) als Schrift: 4,11:1 → #e64266. */
--rot-text: #e64266;
/* Linkfarbe des Themes #cc3366: auf #0f0f0f nur 3,86:1 — 16 % zu Weiß
gemischt für AA (4,9:1). abgleich.py kennt das Paar (FARBTAUSCH). */
--link-text: #d4547e;
/* Seitenrand von Kopf und Fuß: 8 % der Breite, unter 1025px 5 %. */
--rand-kopf: 8%;
/* Hülle: Breite und Seitenrand. Jeder Abschnitt setzt beides für sich —
das Original fährt je Abschnitt eigene Spaltenbreiten (1080 im
„Über uns", 1140 in der Eventliste, volle Breite unter den Karten). */
--breite: 1160px;
--gutter: 10px;
--kurve: cubic-bezier(0.32, 0.72, 0, 1);
--ausruf: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23ffffff' d='M7 2h2v7H7zM7 11h2v2H7z'/%3E%3C/svg%3E");
--haken: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' d='M3.2 8.6l3.1 3.1 6.5-6.9'/%3E%3C/svg%3E");
/* Pfeil der Knöpfe — Pfad des Originals (Font Awesome „long-arrow-alt-right"). */
--pfeil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M313.941 216H12c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h301.941v46.059c0 21.382 25.851 32.09 40.971 16.971l86.059-86.059c9.373-9.373 9.373-24.569 0-33.941l-86.059-86.059c-15.119-15.119-40.971-4.411-40.971 16.971V216z'/%3E%3C/svg%3E");
/* Kopfhöhe des Systems (cosmopolar-hp): 82px, unter 900px 80px. Hero,
Seitenkopf und Ankersprung rechnen damit — weicht der Wert von der
tatsächlichen Höhe ab, verschiebt sich der Inhalt um die Differenz. */
--kopf-hoehe: 82px;
}
@media (max-width: 1024px) { :root { --rand-kopf: 5%; } }
@media (max-width: 899px) { :root { --kopf-hoehe: 80px; } }
/* --------------------------------------------------------------- Grundlage -- */
*, *::before, *::after { box-sizing: border-box; }
/* Sicherheitsnetz gegen seitliches Verschieben. `clip`, nicht `hidden`:
`overflow: hidden` an einem Vorfahren setzt `position: sticky` außer
Kraft, und die Kopfzeile klebt nicht mehr. */
html, body { overflow-x: clip; }
/* `hidden` muss gewinnen. Der Browser setzt dafür nur `display: none` mit
schwacher Spezifität — jede eigene display-Regel schlägt es. Genau das
ist passiert: `.knopf { display: inline-flex }` hat ein `hidden` am
Lounge-Knopf überstimmt, und der stand auf jeder Eventseite. */
[hidden] { display: none !important; }
html {
scroll-behavior: smooth;
/* Anker sollen nicht unter der festen Kopfzeile landen. */
scroll-padding-top: calc(var(--kopf-hoehe) + 1rem);
}
/* Wer Bewegung abbestellt hat, bekommt auch kein sanftes Scrollen. */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
body {
margin: 0;
background: var(--nacht);
color: var(--tinte);
font-family: var(--schrift-text);
/* 16px/24px — gemessen an jedem Container des Originals. */
font-size: 16px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
/* Menü offen oder Lightbox aktiv: der Hintergrund darf nicht mitscrollen. */
html.menu-offen, 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;
}
/* Überschriften: Montserrat Black, Versalien. Größe, Zeilenhöhe und
Sperrung setzt jede Stelle selbst — das Original fährt dafür sechs
verschiedene Kombinationen, eine gemeinsame Grundgröße träfe keine. */
h1, h2, h3, h4 {
margin: 0;
font-family: var(--schrift-display);
font-weight: 900;
text-transform: uppercase;
}
/* Fließtext: Montserrat 15px/22,5px. Abstand 0,9rem wie Elementor — in
rem, nicht em: bei 14px-Text wären es sonst 12,6 statt 14,4px. */
p {
margin: 0 0 0.9rem;
font-family: var(--schrift-text);
font-size: 15px;
line-height: 1.5;
}
p:last-child { margin-bottom: 0; }
/* Nur für Lesegeräte — etwa die H1 der Startseite. */
.nur-sr {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
.sprung {
position: absolute;
left: -9999px;
z-index: 100;
padding: 0.75rem 1.25rem;
background: var(--akzent-flaeche);
color: var(--akzent-tinte);
font-weight: 700;
}
.sprung:focus { left: 1rem; top: 1rem; }
.icon { flex: none; }
/* ---------------------------------------------------------------- Raster -- */
/* Die Hülle begrenzt die Breite und hält den Rand. Breite und Rand sind
Token, damit jeder Abschnitt seine gemessene Spalte setzen kann, ohne
die Hülle nachzubauen. */
.huelle {
width: 100%;
max-width: var(--breite);
margin-inline: auto;
padding-inline: var(--gutter);
}
/* Schmale Spalte: die Eventseite, 820px wie im Original. */
.huelle-schmal { --breite: 820px; --gutter: 0px; }
/* Abschnitt: 100px oben und unten, wie die Bänder der Startseite. */
.abschnitt {
position: relative;
padding-block: 100px;
isolation: isolate;
}
/* **Variante: Schein.** Ein sehr leiser Schein in der Markenfarbe hinter
dem Abschnitt — gemessen am „Über uns" und an den Bildbändern. */
.abschnitt--schein::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
background: radial-gradient(circle, rgb(var(--akzent-rgb) / 12%) 0%,
rgb(var(--akzent-rgb) / 5%) 35%, transparent 75%);
}
/* Eventabschnitt: Clubfoto `cover`, ab 1025px feststehend (Parallaxe des
Originals), Schleier 0,74 — alles gemessen. Karten und Knopf halten
100px Rand, auf dem Telefon 30px; die Überschrift läuft über die volle
Breite. */
.abschnitt-bild {
--breite: 100%;
--gutter: 100px;
background: url('../img/club-grund.webp') center / cover no-repeat;
}
@media (min-width: 1025px) { .abschnitt-bild { background-attachment: fixed; } }
@media (max-width: 767px) { .abschnitt-bild { --gutter: 30px; } }
.abschnitt-bild::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
background: rgb(0 0 0 / 74%);
}
/* Abschnittskopf „VISIT US.", „GET THE VIBE.": 50px/45px, Sperrung
-0,04em (gemessen -2px), über die volle Breite zentriert, 70px Abstand
darunter. Auf dem Telefon 35px/31,5px und 50px. */
.kopfzeile { margin-bottom: 70px; text-align: center; }
.kopfzeile h2 {
font-size: 50px;
line-height: 0.9;
letter-spacing: -0.04em;
text-wrap: balance;
}
@media (max-width: 767px) {
.kopfzeile { margin-bottom: 50px; }
.kopfzeile h2 { font-size: 35px; }
}
.unterzeile { margin: 0; }
/* Knopfreihe. `data-mitte`: zentriert unter Karten und Bildband, 70px
Abstand darüber, auf dem Telefon 50px. */
.knopf-reihe { display: flex; flex-wrap: wrap; gap: 10px; }
.knopf-reihe[data-mitte] { justify-content: center; margin-top: 70px; }
@media (max-width: 767px) { .knopf-reihe[data-mitte] { margin-top: 50px; } }
/* ---------------------------------------------------------------- Knoepfe -- */
/* Knopf: 12px/24px Polster, Montserrat Black 15px/15px, Rundung 15px,
roter Schein `0 0 10px rgba(255,0,0,.26)` — alles gemessen (259×39 bei
„ALLE EVENTS ANSEHEN"). Die Beschriftung steht in Versalien im Markup,
nicht per text-transform: so im Original.
**`line-height` nach `font: inherit`.** Die Kurzschrift setzt die
Zeilenhöhe zurück; davor notiert, wäre der Knopf 6px höher. */
.knopf {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
padding: 12px 24px;
border: 0;
border-radius: 15px;
background: var(--akzent-flaeche);
color: var(--akzent-tinte);
font: inherit;
font-family: var(--schrift-display);
line-height: 1;
font-size: 15px;
font-weight: 900;
box-shadow: 0 0 10px rgb(255 0 0 / 26%);
cursor: pointer;
transition: transform 0.25s var(--kurve), filter 0.2s ease;
}
.knopf:hover { filter: brightness(1.1); transform: translateY(-1px); }
.knopf:active { transform: translateY(0) scale(0.98); }
.knopf[disabled] { opacity: 0.5; cursor: not-allowed; }
/* Pfeil am Ende, 15px — als Maske, damit er `currentColor` übernimmt. */
.knopf::after {
content: '';
width: 15px;
height: 15px;
flex: none;
background: currentColor;
-webkit-mask: var(--pfeil) center / contain no-repeat;
mask: var(--pfeil) center / contain no-repeat;
}
.knopf-ohne-pfeil::after { content: none; }
/* Zweite Stufe: dunkle Fläche statt Akzent, ohne Schein — Lounge und
U18-Formular auf den Eventseiten, „Startseite" auf der 404. */
.knopf-leer { background: #242424; box-shadow: none; }
/* ---------------------------------------------------------------- Kopf --- */
/* **Kopf, Menü, Start-Hero und Seitenkopf vom System** (Systemkanon;
Fassung aus cosmopolar-hp über roxy-hp). Aufbau, Maße und Verhalten vom
System, Farben, Schriften, Logo und Texte vom Original. Diese drei
Bereiche nimmt tools/abgleich.py benannt aus (kopf_versetzen); alles
darunter wird gegen das Original geprüft.
Die Zeile steht frei im Bild und bekommt erst beim Scrollen einen Grund
(`data-fest`, ui.js). **Nur die Farbe ändert sich, nicht die Höhe** — die
klebende Zeile belegt ihren Platz im Fluss, sonst ruckte alles darunter. */
.kopf {
position: sticky;
top: 0;
z-index: 50;
background: transparent;
isolation: isolate;
transition: background 0.25s ease;
}
.kopf[data-fest='ja'] {
background: rgb(20 20 20 / 92%);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
/* Weichzeichner aus, solange das Menü offen ist: `backdrop-filter` erzeugt
einen umgebenden Block für `position: fixed`, und das Vollbildmenü wäre
dann nur so hoch wie die Kopfzeile (in cosmopolar-hp so passiert). */
.kopf[data-offen='ja'] {
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
/* Oben mehr Luft als unten (28 + 8), gescrollt mittig (18 + 18) — die
Summe bleibt gleich, die Höhe auch. Seitlich so breit wie der Rand neben
einer 1200px-Spalte, nie unter dem Seitenabstand. */
.kopf-innen {
--breite: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
min-height: 56px;
padding: 1.75rem max(clamp(1rem, 4vw, 2.5rem), calc((100% - 1200px) / 2)) 0.5rem;
transition: padding 0.25s ease;
}
.kopf[data-fest='ja'] .kopf-innen { padding-top: 1.125rem; padding-bottom: 1.125rem; }
/* Logo in der Systemhöhe (46px, Telefon 34px). Die Arena-Wortmarke ist knapp
4:1 breit (1000 × 260) — dieselbe Höhe, nicht dieselbe Breite. */
.logo { display: flex; align-items: center; }
.logo img { height: 46px; width: auto; }
@media (max-width: 899px) { .logo img { height: 34px; } }
.menu-knopf {
display: inline-flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 6px;
width: 44px;
height: 44px;
padding: 0;
border: 0;
background: transparent;
cursor: pointer;
}
.menu-knopf span {
display: block;
width: 26px;
height: 2px;
border-radius: 2px;
background: var(--tinte);
transition: transform 0.28s var(--kurve), opacity 0.2s ease;
}
/* 8px = halbe Balkenhöhe plus Abstand — so treffen sich beide in der Mitte. */
.kopf[data-offen='ja'] .menu-knopf span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.kopf[data-offen='ja'] .menu-knopf span:nth-child(2) { opacity: 0; transform: scaleX(0.4); }
.kopf[data-offen='ja'] .menu-knopf span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
.menu ul {
display: flex;
align-items: center;
gap: clamp(1rem, 2.2vw, 1.75rem);
margin: 0;
padding: 0;
list-style: none;
}
@media (min-width: 900px) { .menu li { display: flex; align-items: center; } }
/* Montserrat Black 16px, Versalien, leicht gesperrt. Keine Unterstreichung
— der aktive Punkt ist eingefärbt, das genügt als Signal. Die Farbe ist
die Textvariante des Akzents: 16px zählt als kleine Schrift. */
.menu a {
font-family: var(--schrift-display);
font-size: 1rem;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.04em;
/* 1,7 wie die Grundzeile des Systems (cosmopolar-hp: 25,5/15). */
line-height: 1.7;
padding-block: 0.5rem;
transition: color 0.15s ease;
}
.menu a:hover,
.menu a[aria-current='page'] { color: var(--akzent-hell); }
/* Untermenü „Mehr" — Baustein aus tropi-hp (`.menu-gruppe`,
`.menu-unter-knopf`, `.menu-unter`), Werte an dieses Menü angepasst.
Arena führt darin Fotos und Jobs, wie im Original. Auf dem Schreibtisch
ein Aufklapper (Klick oder Zeiger), im Vollbildmenü offen. */
.menu-gruppe { position: relative; }
.menu-unter-knopf {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 0.5rem 0;
border: 0;
background: none;
color: var(--tinte);
font: inherit;
/* Nach `font: inherit` — die Kurzschrift setzt sonst alles zurück. */
font-family: var(--schrift-display);
font-size: 1rem;
font-weight: 900;
line-height: 1.7;
text-transform: uppercase;
letter-spacing: 0.04em;
cursor: pointer;
transition: color 0.15s ease;
}
.menu-unter-knopf:hover { color: var(--akzent-hell); }
.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: 100%;
right: 0;
display: none;
flex-direction: column;
align-items: stretch;
gap: 0;
min-width: 13rem;
padding: 0.5rem 0;
background: var(--kopf);
box-shadow: 0 12px 30px rgb(0 0 0 / 45%);
}
.menu-unter-knopf[aria-expanded='true'] + .menu-unter,
.menu-gruppe:hover > .menu-unter { display: flex; }
.menu .menu-unter li { display: block; }
.menu .menu-unter a { display: block; padding: 0.7rem 1.25rem; font-size: 0.875rem; }
.menu .menu-unter a:hover { background: var(--akzent); color: var(--akzent-tinte); }
/* Der Menüfuß gehört nur ins aufgeklappte Menü auf schmalen Geräten. */
.menu-fuss { display: none; }
/* Schmale Geräte: das Menü füllt den Bildschirm, Punkte groß und mittig,
darunter Anschrift, E-Mail und Symbole. Aufblenden statt Einschieben. */
@media (max-width: 899px) {
.kopf[data-offen='ja'] { background: var(--kopf); }
.menu {
position: fixed;
inset: var(--kopf-hoehe) 0 0;
display: flex;
flex-direction: column;
justify-content: center;
padding: 1rem clamp(1rem, 4vw, 2.5rem) 3rem;
overflow-y: auto;
background: var(--kopf);
/* Ein sehr leiser Schein in der Markenfarbe nimmt der Fläche das
Tafelhafte, ohne sie einzufärben. */
background-image: radial-gradient(70% 40% at 50% 0%, rgb(var(--akzent-rgb) / 7%), transparent 70%);
opacity: 0;
transform: scale(1.03);
/* Geschlossen auch für Tastatur und Lesegerät weg. */
visibility: hidden;
transition: opacity 0.28s ease, transform 0.35s var(--kurve), visibility 0.28s ease;
}
.kopf[data-offen='ja'] .menu { opacity: 1; transform: none; visibility: visible; }
/* Eng gestaffelt (Betreiber 31.10.2026): vorher 1,5rem Lücke plus
Zeilenhöhe 1,7, gut 70px je Punkt — jetzt rund 45px. */
.menu ul { flex: none; flex-direction: column; align-items: center; gap: 0; }
/* Block, nicht Flex: Als Flex-Element würde der Verweis zum Block samt
Polster (58 statt 47,6px je Punkt, in cosmopolar-hp gemessen). */
.menu li { display: block; text-align: center; }
.menu a { font-size: clamp(1.75rem, 7vw, 2.25rem); letter-spacing: -0.01em; line-height: 1.2; padding-block: 0.3rem; }
/* Ab 24px große Schrift — dort trägt das Originalrot. */
.menu a:hover,
.menu a[aria-current='page'] { color: var(--akzent); }
/* Im Vollbildmenü steht das Untermenü offen, der Knopf ist dort nur
Überschrift der Gruppe. */
.menu-gruppe { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; margin-top: 0.75rem; }
.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;
min-width: 0; padding: 0; background: none; box-shadow: none;
}
.menu .menu-unter a { padding: 0; font-size: clamp(1.25rem, 5vw, 1.5rem); }
.menu .menu-unter a:hover { background: none; color: var(--akzent); }
.menu-fuss {
display: grid;
justify-items: center;
gap: 0.35rem;
margin-top: 2.5rem;
text-align: center;
}
.menu-fuss p { margin: 0; font-size: 14px; color: var(--tinte-still); }
.menu-fuss a { font-size: 14px; color: #b4b4b4; }
.menu-fuss .fuss-social { justify-content: center; margin-top: 0.75rem; }
/* Die Punkte laufen nacheinander ein. Die Verzögerung steht je Position
im CSS, weil ein Inline-Style unter `style-src 'self'` nicht erlaubt ist. */
.menu li { opacity: 0; transform: translateY(14px); transition: opacity 0.3s ease, transform 0.4s var(--kurve); }
.kopf[data-offen='ja'] .menu li { opacity: 1; transform: none; }
.kopf[data-offen='ja'] .menu li:nth-child(1) { transition-delay: 0.08s; }
.kopf[data-offen='ja'] .menu li:nth-child(2) { transition-delay: 0.13s; }
.kopf[data-offen='ja'] .menu li:nth-child(3) { transition-delay: 0.18s; }
.kopf[data-offen='ja'] .menu li:nth-child(4) { transition-delay: 0.23s; }
.kopf[data-offen='ja'] .menu li:nth-child(5) { transition-delay: 0.28s; }
@media (prefers-reduced-motion: reduce) {
.menu li { opacity: 1; transform: none; transition: none; }
.menu { transition: visibility 0.01s; transform: none; }
}
}
@media (min-width: 900px) { .menu-knopf { display: none; } }
/* ----------------------------------------------------------------- Hero -- */
/* System (cosmopolar-hp): feste Höhe, die mit dem Fenster wächst (keine
vh — sonst springt sie auf dem Telefon mit der Adressleiste), unter die
schwebende Kopfzeile geschoben, Verlaufsschleier oben und unten dunkler. */
.hero {
position: relative;
height: clamp(500px, 71svh, 790px);
margin-top: calc(var(--kopf-hoehe) * -1);
display: grid;
place-items: center;
overflow: hidden;
background: var(--nacht);
text-align: center;
}
/* Das Bild als Hintergrund des Medienfelds: auf dem Schreibtisch das
Clubfoto, auf dem Telefon das Hochformat. */
.hero-medium {
position: absolute;
inset: 0;
z-index: 0;
background: url('../img/hero.webp') center / cover no-repeat;
}
@media (max-width: 767px) {
.hero-medium { background-image: url('../img/hero-mobil.webp'); }
}
/* Video über dem Standbild — Systemregel (cosmopolar-hp). Das Standbild
bleibt Hintergrund und trägt, solange das Video nicht läuft. */
.hero-medium video {
width: 100%; height: 100%;
object-fit: cover;
object-position: center;
}
.hero::after {
content: '';
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(180deg, rgb(0 0 0 / 55%) 0%, rgb(0 0 0 / 35%) 45%, rgb(0 0 0 / 75%) 100%);
}
.hero-text {
--breite: 1200px;
--gutter: clamp(1rem, 4vw, 2.5rem);
position: relative;
z-index: 2;
padding-top: var(--kopf-hoehe);
}
/* Logo über der Zeile. **Bewusst nicht wie in cosmopolar-hp:** Dort steht ein
fast quadratisches Zeichen, 100 / 220 / 112px hoch bei 1440 / 768 /
390 (gemessen). Eine Wortmarke von knapp 4:1 (Arena) wäre in derselben
Höhe auf dem Telefon über 400px breit. Sie bleibt deshalb 44–72px hoch; die Zeile
darunter steht dadurch 9–83px höher als dort. */
.hero-logo { display: block; margin: 0 auto 1rem; }
.hero-logo img { width: auto; height: clamp(44px, 6vw, 72px); margin-inline: auto; }
.hero-titel {
margin: 0 0 1.25rem;
font-size: clamp(2.75rem, 9vw, 5.3125rem);
font-weight: 900;
line-height: 1.02;
letter-spacing: 0;
text-transform: uppercase;
text-wrap: balance;
}
.hero-titel span { display: block; }
/* Der Knopf als Pille wie dort, knapper als die übrigen. Fläche und Schrift
bleiben die Marke (Weiß auf Pink, AA). */
.hero-text .knopf {
gap: 0.5rem;
padding: 0.7rem 1.4rem;
border: 1.5px solid var(--akzent-flaeche);
border-radius: 980px;
font-size: 0.8125rem;
font-weight: 800;
/* 1,7 wie dort geerbt (46px hoch, nicht 37). */
line-height: 1.7;
letter-spacing: 0.01em;
box-shadow: none;
}
.hero-text .knopf::after { width: 1em; height: 1em; }
/* ------------------------------------------------------------- Ueber uns -- */
/* Zwei gleiche Spalten, 60px Abstand, höchstens 1080px — Text links,
Bildstrecke rechts, senkrecht mittig. 80px oben und unten, 30px seitlich. */
#ueber { padding-block: 80px; }
.ueber {
--breite: 1140px;
--gutter: 30px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}
@media (max-width: 767px) { .ueber { grid-template-columns: 1fr; } }
.ueber-text {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 20px;
}
.ueber-text > * { width: 100%; }
.ueber-text h2 {
/* 58px — gemessen auf arena-ihlpohl.de (in roxy-hp: 50). */
font-size: 58px;
line-height: 0.9;
letter-spacing: -0.04em;
text-wrap: balance;
}
@media (max-width: 767px) { .ueber-text h2 { font-size: 35px; } }
.ueber-text p { text-align: justify; opacity: 0.88; } /* Deckkraft gemessen (Start, Mieten) */
.ueber-text strong { font-weight: 700; }
/* **Neu: Trennbalken.** Schiene 6px mit 8 % Weiß, darauf der Akzent auf
38 % der Breite mit Leuchtschatten — nachgemessen am Original. */
.trenner {
position: relative;
height: 6px;
border-radius: 999px;
background: rgb(var(--tinte-rgb) / 8%);
}
.trenner::before,
.trenner > span {
content: '';
position: absolute;
inset: 0 auto 0 0;
width: 38%;
border-radius: 999px;
background: var(--akzent);
box-shadow: 0 0 12px rgb(var(--akzent-rgb) / 50%), 0 0 30px rgb(var(--akzent-rgb) / 20%);
}
/* Akzentanteil als echtes Element (Kind ): Wo er im Original ein
eigenes Element ist, misst der Abgleich ihn — ein Pseudo-Element sähe er
nicht. Dann entfällt ::before. */
.trenner:has(> span)::before { content: none; }
/* Kurze Schiene unter Kopfzeilen (/mieten/): 320px, mittig, Akzent in der
Mitte (31–69 %). Ersetzt das h2::after der Angebotsbausteine. */
.trenner--kurz { width: 320px; max-width: 100%; margin: 25px auto 0; }
.trenner--kurz::before, .trenner--kurz > span { left: 31%; width: 38%; }
/* Bildstrecke neben dem Text: Rundung 28px, tiefer Schatten, unten ein
Verlauf nach Schwarz (unteres Viertel, 0,42). */
.ueber .slider::after {
content: '';
position: absolute;
inset: auto 0 29px;
height: 28%;
border-radius: 0 0 28px 28px;
background: linear-gradient(to top, rgb(0 0 0 / 42%), transparent);
pointer-events: none;
}
.ueber .slider-band img {
aspect-ratio: 4 / 5;
border-radius: 28px;
box-shadow: 0 30px 80px rgb(0 0 0 / 55%);
}
/* --------------------------------------------------------------- Karten -- */
/* Drei Spalten, 20px Abstand; auf dem Telefon eine. */
.karten {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
}
@media (max-width: 767px) { .karten { grid-template-columns: 1fr; } }
/* Karte: #111, Rundung 20, Flyer 16:9 auf #0a0a0a — das Bild darin in
natürlichem Verhältnis, nicht beschnitten. Der Verweis erbt im Original
Poppins 16/24 vom Plugin-Stylesheet. */
.karte {
display: flex;
flex-direction: column;
overflow: hidden;
border-radius: 20px;
background: var(--karte);
font-family: var(--schrift-display);
font-size: 16px;
line-height: 1.5;
}
.karte-bild { aspect-ratio: 16 / 9; background: var(--karte-bild); }
.karte-bild img { width: 100%; height: auto; }
/* Textblock: Datum, 10px, Titel — Polster 22/24. */
.karte-text {
display: flex;
flex-direction: column;
gap: 10px;
padding: 22px 24px 0;
}
.karte-termin {
margin: 0;
font-family: var(--schrift-display);
font-size: 15px;
font-weight: 900;
line-height: 1.5;
letter-spacing: 0.4px;
text-transform: uppercase;
color: var(--akzent-text);
}
/* Titel: 27px/1,25, höchstens zwei Zeilen mit Auslassung, immer zwei
Zeilen hoch — so stehen „Mehr erfahren" und die Kartenunterkante einer
Reihe auf einer Linie. 22px auf dem Telefon. */
.karte-titel {
font-size: 27px;
line-height: 1.25;
letter-spacing: -0.01em;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
min-height: 2.5em;
}
@media (max-width: 767px) { .karte-titel { font-size: 22px; } }
/* Der Abschnitt unten. Im System eine Perforation — das Original hat
keine; hier nur 10px Abstand, 24px Polster. Die 18px über der Zeile
trägt die Zeile selbst, so wie die Messung sie sieht. */
.karte-abriss { margin: 0; padding: 10px 24px 24px; }
/* „MEHR ERFAHREN" in Poppins — verlangt ist 900, geladen ist 700 (wie im
Original). */
.karte-infos {
display: flex;
align-items: center;
gap: 8px;
padding-top: 18px;
font-family: var(--schrift-display);
font-size: 12px;
font-weight: 900;
line-height: 1.5;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--akzent-text);
}
/* Leerzustand (keine Termine, keine Alben, Formular aus) — Systemregel.
Das Original zeigt nie einen, gemessen werden kann er nicht. */
.leer {
color: var(--tinte-still);
text-align: center;
padding-block: 3rem;
}
/* Monatsüberschrift der Eventliste: 32px, 800, zentriert. */
.monat {
margin: 40px 0 20px;
font-size: 32px;
font-weight: 800;
line-height: 1.2;
letter-spacing: 1px;
text-align: center;
}
.monat:first-child { margin-top: 0; }
/* ------------------------------------------------------- Schieberegler -- */
/* Wie viele Folien gleichzeitig zu sehen sind, sagt `data-zeigen`
(slider.js setzt die Folienbreite). Punkte 6px, Abstand 12px, Akzent;
der aktive weiß. Punktreihe 24px hoch, 8px unter dem Bild. Pfeile 25px
in Akzentfarbe, 10px vom Rand. Alles gemessen.
`touch-action: pan-y` gibt das senkrechte Scrollen an die Seite weiter
und behält die waagerechte Geste für das Blättern. 5px unter der
Punktreihe als Polster, nicht als Rand: Ein Rand fiele mit dem des
Knopfes darunter zusammen. */
.slider { position: relative; padding-bottom: 5px; }
.slider-spur {
position: relative;
overflow: hidden;
touch-action: pan-y;
}
.slider-band { display: flex; }
.slider-band > figure { margin: 0; flex: 0 0 100%; }
.slider-band img { width: 100%; height: auto; object-fit: cover; }
.slider-pfeil {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 2;
display: grid;
place-items: center;
width: 25px;
height: 25px;
padding: 0;
border: 0;
background: transparent;
color: var(--akzent);
cursor: pointer;
}
.slider-pfeil svg { width: 25px; height: 25px; }
.slider-rueck { left: 10px; }
.slider-vor { right: 10px; }
.slider-punkte {
display: flex;
justify-content: center;
align-items: center;
height: 24px;
margin-top: 8px;
}
.slider-punkt {
width: 6px;
height: 6px;
margin: 0 6px;
padding: 0;
border: 0;
border-radius: 50%;
background: var(--akzent);
cursor: pointer;
}
.slider-punkt[aria-current='true'] { background: var(--tinte); }
/* Die Bänder der Startseite: Überschrift 50px über dem Band, Knopf 20px
unter den Punkten. */
#fotos .kopfzeile,
#club .kopfzeile { margin-bottom: 50px; }
#fotos .knopf-reihe[data-mitte] { margin-top: 20px; }
/* ------------------------------------------------------------ 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: 20px;
}
.lb-zaehler {
position: absolute;
bottom: 1.25rem;
left: 50%;
transform: translateX(-50%);
margin: 0;
color: var(--tinte-still);
font-size: 14px;
}
.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; }
/* **Neu: „Foto melden"** neben dem Schließen-Knopf (Plugin clubinio-fotos). */
.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%); }
/* ------------------------------------------------------- Seitenkopf (Unter) -- */
/* System (cosmopolar-hp): Höhe wächst mit der Breite (320–460px), der
Banner läuft unter die schwebende Kopfzeile — negativer Rand und Polster
gehören zusammen —, gleichmäßiger Schleier 58 %, unten eine feine Linie.
Auf dem Telefon ein festes Seitenverhältnis 3:2 statt Mindesthöhe. */
.seitenkopf {
min-height: clamp(320px, 34vw, 460px);
display: grid;
align-content: center;
margin-top: calc(var(--kopf-hoehe) * -1);
padding: calc(var(--kopf-hoehe) + clamp(2.5rem, 7vw, 4rem)) 0 clamp(2.5rem, 7vw, 4rem);
/* `background-color`, nicht die Kurzschreibweise: Sie setzte
`background-size: cover` aus .seitenkopf-bild zurück. */
background-color: #181818;
border-bottom: 1px solid #2a2a2a;
text-align: center;
}
.seitenkopf .huelle { --breite: 1200px; --gutter: clamp(1rem, 4vw, 2.5rem); }
.seitenkopf-bild {
position: relative;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
isolation: isolate;
}
.seitenkopf-bild::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
/* 58 % wie in cosmopolar-hp, oben hinter der Kopfzeile 75 %: Dort steht das
Menü direkt auf dem Foto, und der aktive Punkt in Rot (16px) kam auf
/jobs/ und /kontakt/ nur auf 4,30 bzw. 3,49:1 (tools/bildkontrast.js).
cosmopolar-hp dunkelt im Start-Hero oben ebenso ab (55 %). Allein reicht
das nicht (bei 90 % noch 4,47:1) — dazu --akzent-hell am Menü. */
background: linear-gradient(180deg, rgb(0 0 0 / 75%) 0, rgb(0 0 0 / 58%) 160px);
}
.seitenkopf[data-banner='events'] { background-image: url('../img/banner/events.webp'); }
.seitenkopf[data-banner='fotos'] { background-image: url('../img/banner/fotos.webp'); }
.seitenkopf[data-banner='jobs'] { background-image: url('../img/banner/jobs.webp'); }
.seitenkopf[data-banner='kontakt'] { background-image: url('../img/banner/kontakt.webp'); }
.seitenkopf[data-banner='mieten'] { background-image: url('../img/banner/mieten.webp'); }
.seitenkopf h1 {
font-size: clamp(3rem, 13vw, 4.5rem);
line-height: 1.08;
letter-spacing: -0.02em;
text-transform: none;
}
/* Unterzeile: Slogan in Versalien, fett, ohne eigenen Grund.
Betreiber 31.10.2026: weder schwarzer Balken noch Glasscheibe. Der
Slogan steht direkt auf dem Schleier des Fotos (::before), in Weiß:
Pink fiel dort auf bis 2,7:1 (tools/bildkontrast.js). Abstand wie zuvor die Zeile mit 1rem: Bei 768 ist der
Seitenkopf höher als seine Mindesthöhe und wüchse sonst mit. */
.seitenkopf .unterzeile {
margin: 1rem auto 0;
font-family: var(--schrift-display);
font-size: clamp(0.8125rem, 2.4vw, 1.125rem);
font-weight: 800;
letter-spacing: clamp(0.04em, 0.6vw, 0.08em);
line-height: 1.7;
text-transform: uppercase;
color: #fff;
}
@media (max-width: 759px) {
.seitenkopf-bild { min-height: 0; aspect-ratio: 3 / 2; }
}
/* ------------------------------------------------------------ Eventliste -- */
/* Monatsgruppen in einer Spalte von höchstens 1140px, 10px Rand. 75px
unter dem Seitenkopf, 80px bis zum Fuß. */
.seite-events .abschnitt { padding: 75px 0 80px; }
.seite-events .karte { font-size: 15px; }
/* 20px fett zählt als große Schrift — dort trägt die Originalfarbe. */
.seite-events .karte-termin { font-size: 20px; color: var(--akzent); }
.seite-events .karte-titel { font-size: 26px; }
@media (max-width: 1024px) { .seite-events .karte-titel { font-size: 21px; } }
@media (max-width: 767px) { .seite-events .karte-titel { font-size: 24px; } }
/* ------------------------------------------------------------------ FAQ -- */
/* Kontaktseite: zwei gleich breite Spalten mit 20px Abstand in höchstens
1120px, auf dem Telefon untereinander. Ohne FAQ (Clubinio führt derzeit
keine) steht das Formular allein in der Mitte. */
.seite-kontakt .abschnitt { padding: 45px 0 39px; }
.kontakt-raster {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
align-items: start;
}
/* Untereinander 49px zwischen FAQ und Formular — gemessen. */
@media (max-width: 767px) { .kontakt-raster { grid-template-columns: 1fr; row-gap: 49px; } }
.kontakt-raster[data-ohne-faq='ja'] { grid-template-columns: minmax(0, 560px); justify-content: center; }
.kontakt-raster > div { display: flex; flex-direction: column; gap: 20px; }
.kontakt-raster h2 { font-size: 32px; line-height: 1; text-transform: none; }
/* Aufklapper wie das Elementor-Akkordeon des Originals — ``
wie dort, ohne JavaScript bedienbar. Höchstens 450px breit, Linie 8 %
Weiß unter jedem Eintrag. Zeile 64px: Polster 18/4, Symbol (Plus oder
Minus, Font Awesome, 18px in einem 28px-Kasten, 16px eingerückt), 10px,
Frage in Montserrat 15/20,25 mit 88 % Weiß. Offen: 8px mehr Polster
links, ein Verlauf im Akzent und ein 3px-Balken mit Schein. Die Antwort
in Montserrat 15/25,5 mit 64 % Weiß, Absätze 15px auseinander. */
/* Die Liste lässt rechts 100px frei (450 von 550, 254 von 354) — auf dem
Telefon nicht. */
/* Die FAQ füllt ihre Spalte (gemessen 484 von 550 bei 1440). */
/* Werte des Clubinio-FAQ-Widgets (Plugin clubinio-shop-events, faq.css),
die Arena auf Start- und Kontaktseite unverändert zeigt: Zeile mit
Linie 10 % Weiß, Frage 1,05rem/600/1,4 in Weiß, Polster 20/8/20/20,
Plus-Symbol 20px aus zwei 2px-Balken, 18px Abstand; offen ein 3×28px-
Balken links. Antwort 0,98rem/1,6 in #9aa6b5, 44px eingerückt. Gemessen
bei 1440: Zeile 64px hoch, Text ab x+58. Die Schrift ist die Display-
schrift (Original: geerbt Montserrat bzw. Poppins), die Antwort
Fließtext in Inter (Betreiber 31.10.). */
.faq { position: relative; border-bottom: 1px solid rgb(255 255 255 / 10%); }
.faq summary {
display: flex;
align-items: flex-start;
gap: 18px;
padding: 20px 8px 20px 20px;
font-family: var(--schrift-display);
font-size: 1.05rem;
font-weight: 600;
line-height: 1.4;
color: var(--tinte);
list-style: none;
cursor: pointer;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary span { flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; hyphens: auto; }
.faq summary::before {
content: '';
flex: 0 0 auto;
width: 20px;
height: 20px;
margin-top: 3px;
background:
linear-gradient(var(--akzent), var(--akzent)) center / 100% 2px no-repeat,
linear-gradient(var(--akzent), var(--akzent)) center / 2px 100% no-repeat;
}
.faq[open] summary::before {
background: linear-gradient(var(--akzent), var(--akzent)) center / 100% 2px no-repeat;
}
.faq[open]::before {
content: '';
position: absolute;
left: 0;
top: 14px;
width: 3px;
height: 28px;
border-radius: 2px;
background: var(--akzent);
}
/* „Noch Fragen?" auf der Startseite: 1140er-Spalte ohne Seitenrand — unter
1140px läuft die Liste randlos, wie im Original (gemessen 390/768/1440). */
#fragen { --breite: 1140px; --gutter: 0px; }
/* 20px zwischen Überschrift und erster Zeile (gemessen auf allen Breiten). */
#fragen .kopfzeile { margin-bottom: 20px; }
/* Geschlossen ausdrücklich `display: none` wie im Original: Chrome legt
den Inhalt geschlossener sonst trotzdem aus und meldet Maße,
die niemand sieht — der Abgleich zählte sie mit. */
.faq:not([open]) .faq-text { display: none; }
.faq-text {
padding: 0 8px 22px 44px;
color: #9aa6b5;
font-family: var(--schrift-text);
font-size: 0.98rem;
line-height: 1.6;
overflow-wrap: anywhere;
}
@media (max-width: 767px) {
}
/* ------------------------------------------------------------ Formulare -- */
/* Formular wie das Clubinio-Plugin der bestehenden Seite — gemessen auf
/jobs/ und /kontakt/: Rahmen 1px #262b36, Rundung 16, Polster 32 (Telefon
24/20), Poppins als Grundschrift, Etiketten Montserrat Medium 13,6px in
#cfd6e0, Felder 8 % Weiß ohne Rahmen mit Rundung 15. */
.form {
position: relative;
display: grid;
gap: 16px;
/* Im zweispaltigen Kontaktraster wird das Formular auf die Höhe der
FAQ-Spalte gestreckt; ohne `start` verteilt es den Platz auf seine
Zeilen (Einwilligung 25px zu tief, gemessen 1440). */
align-content: start;
padding: 32px;
border: 1px solid #262b36;
border-radius: 16px;
/* Unsichtbar, steht aber so am Formular des Plugins. */
background: rgb(2 1 1 / 0%);
font-family: var(--schrift-display);
font-size: 15px;
line-height: 1.5;
}
@media (max-width: 767px) { .form { padding: 24px 20px; } }
.form > h2 {
font-size: 25.6px;
font-weight: 800;
line-height: 1.15;
color: var(--akzent);
}
.form-reihe {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
align-content: start;
}
@media (max-width: 767px) { .form-reihe { grid-template-columns: 1fr; } }
.feld { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }
.feld > span,
.feld legend {
display: block;
padding: 0;
font-family: var(--schrift-display);
font-size: 13.6px;
font-weight: 600;
line-height: 1;
color: #cfd6e0;
}
/* Gruppenüberschrift über die volle Breite, Zeilenhöhe 1,5 — gemessen
„Bereiche" auf /jobs/ (1054×20 bei 1440). Nur die Legende; die
Feldbeschriftungen bleiben bei 1. */
.feld legend { width: 100%; line-height: 1.5; }
/* Die Legende steht außerhalb des Flex-Abstands des Fieldsets — der Abstand
zur ersten Option (6px) deshalb an ihr selbst. */
.feld legend + * { margin-top: 6px; }
.feld-pflicht { font-style: normal; color: #f43f5e; }
/* `line-height` nach `font: inherit` — die Kurzschrift setzt sie zurück. */
.feld input:not([type='checkbox']):not([type='file']),
.feld textarea {
display: block;
width: 100%;
/* Kein Rahmen; die Farbe steht trotzdem wie im Original (#666, an der
Textfläche #333a47). */
border: none;
border-color: #666666;
border-radius: 15px;
background: rgb(255 255 255 / 8%);
color: var(--tinte);
font: inherit;
font-family: var(--schrift-display);
font-size: 15px;
line-height: 1.5;
padding: 8px 16px;
}
.feld textarea { padding: 12px 14px; min-height: 137px; resize: vertical; border-color: #333a47; } /* 137 gemessen (/jobs/, alle Breiten) */
.feld input:focus, .feld textarea:focus { outline: 2px solid var(--akzent); outline-offset: 0; }
.feld textarea::placeholder { color: rgb(255 255 255 / 45%); }
/* Dateifeld: Der Knopf darin trägt Polster und Rahmen — so ist das Feld
wie im Original 39px hoch statt der 21px des Browserknopfs. */
.feld input[type='file'] {
display: block;
width: 100%;
font-family: var(--schrift-display);
font-size: 14.08px;
line-height: 1.5;
color: #cfd6e0;
}
.feld input[type='file']::file-selector-button {
margin-right: 12px;
padding: 8px 14px;
border: 1px solid #2f3644;
border-radius: 10px;
background: rgb(255 255 255 / 6%);
color: #cfd6e0;
font: inherit;
cursor: pointer;
}
/* Ankreuzfelder (Stellen) untereinander, 9px Abstand zum Text. */
.auswahl { display: flex; flex-direction: column; gap: 8px; }
.auswahl label,
.zustimmung {
display: flex;
align-items: flex-start;
gap: 9px;
cursor: pointer;
}
.auswahl label {
font-family: var(--schrift-display);
font-size: 14.72px;
line-height: 1.4;
color: #cfd6e0;
}
.auswahl input { margin: 2px 0 0; accent-color: var(--akzent); }
.zustimmung {
/* Textschrift wie aller Fließtext (Betreiber 31.10.2026; Original
Poppins). Sie bricht schmaler um als die Displayschrift. */
font-family: var(--schrift-text);
font-size: 12.8px;
line-height: 1.45;
color: #9aa6b5;
}
.zustimmung input { margin: 3px 0 0; accent-color: var(--akzent); }
/* Absendeknopf über die volle Breite, Rundung 10, ohne Pfeil. */
.form > .knopf-reihe .knopf {
width: 100%;
padding: 14px 30px;
border-radius: 10px;
font-weight: 800;
line-height: 1.5;
text-transform: uppercase;
box-shadow: none;
}
.form > .knopf-reihe .knopf::after { content: none; }
/* Felder des Kontaktformulars: anders als bei der Bewerbung — 2,4 % Weiß,
Rahmen 9 % Weiß, Rundung 13, 52px hoch (Telefon 50px, Schrift 16px). */
.seite-kontakt .feld input:not([type='checkbox']),
.seite-kontakt .feld textarea {
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;
}
.seite-kontakt .feld input:not([type='checkbox']) { min-height: 52px; }
.seite-kontakt .feld textarea { min-height: 145px; }
.seite-kontakt .zustimmung { color: var(--tinte); }
@media (max-width: 767px) {
.seite-kontakt .feld input:not([type='checkbox']),
.seite-kontakt .feld textarea { font-size: 16px; padding: 12px 14px; line-height: 1.5; }
.seite-kontakt .feld input:not([type='checkbox']) { min-height: 0; }
.seite-kontakt .feld textarea { min-height: 138px; }
}
/* Honigtopf. Für Menschen unsichtbar, für Skripte verlockend.
Nicht `display: none` — manche Skripte überspringen genau das. */
.honigtopf {
position: absolute;
left: -9999px;
width: 1px; height: 1px;
overflow: hidden;
}
/* **Die Rückmeldung ist ein Kasten, keine Textzeile.** Rot ist hier die
Akzentfarbe und zugleich die Fehlerfarbe — eine Erfolgsmeldung in
derselben roten Zeile wie „Bitte stimme … zu" wäre übersehbar oder
beunruhigend. Im Ruhezustand nimmt die Meldung keinen Platz ein. */
.rueckmeldung { margin: 0; font-size: 14px; }
.rueckmeldung:empty { display: none; }
.rueckmeldung[data-state='ok'],
.rueckmeldung[data-state='fehler'] {
display: grid;
grid-template-columns: auto 1fr;
gap: 0.875rem;
align-items: center;
padding: 1.125rem 1.25rem;
border-radius: 8px;
font-size: 1rem;
line-height: 1.5;
}
/* Das Zeichen als ::before, damit es nicht vorgelesen wird. */
.rueckmeldung[data-state='ok']::before,
.rueckmeldung[data-state='fehler']::before {
content: '';
width: 26px;
height: 26px;
border-radius: 50%;
background-position: center;
background-repeat: no-repeat;
background-size: 15px 15px;
}
/* Grün, nicht in der Akzentfarbe: Das Rot ist schon der Fehlerfall. */
.rueckmeldung[data-state='ok'] {
background: rgb(46 125 50 / 18%);
box-shadow: inset 0 0 0 1px #2e7d32;
color: var(--tinte);
font-weight: 500;
}
.rueckmeldung[data-state='ok']::before {
background-color: #2e7d32;
background-image: var(--haken);
}
.rueckmeldung[data-state='fehler'] {
background: rgb(var(--akzent-rgb) / 16%);
box-shadow: inset 0 0 0 1px var(--akzent);
color: var(--tinte);
}
.rueckmeldung[data-state='fehler']::before {
background-color: var(--akzent);
background-image: var(--ausruf);
}
.rueckmeldung[data-state='laeuft'] { color: var(--tinte-still); }
/* ---------------------------------------------------------------- Jobs -- */
/* Ansprache und Formular in einer Spalte von 1120px, 45px unter dem Kopf. */
/* Spalte 1140px mit 10px Rand (1120px Inhalt) — wie die Kontaktseite. */
.seite-jobs .abschnitt .huelle,
.seite-kontakt .abschnitt .huelle { --breite: 1140px; }
.seite-jobs .abschnitt { padding: 45px 0 70px; }
@media (max-width: 1024px) { .seite-jobs .abschnitt .huelle, .seite-kontakt .abschnitt .huelle { --gutter: 20px; } }
.jobs-ansprache { margin-bottom: 19px; }
.jobs-intro { font-family: var(--schrift-display); font-weight: 700; } /* fett: kein Fließtext */
@media (max-width: 767px) { .jobs-ansprache p { font-size: 14px; } }
/* ---------------------------------------------------------------- Fotos -- */
/* Albenliste: Spalte höchstens 1140px, 10px Rand, 35px unter dem
Seitenkopf. Drei Spalten mit 30px Abstand, unter 1025px eine. */
.seite-fotos .abschnitt { padding: 35px 0 60px; }
@media (max-width: 1024px) { .seite-fotos .abschnitt { 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 des Originals: #0e0e0e, Rundung 14, Deckblatt 4:5
auf #222, darunter 5px-Kante in #e11d48 — dem eigenen Rot des
Clubinio-Fotoplugins, nicht dem Seitenakzent (gemessen). */
.album-karte {
display: block;
overflow: hidden;
border-radius: 14px;
background: #0e0e0e;
font-family: var(--schrift-display);
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 #e11d48;
}
.album-zeile {
display: block;
margin-bottom: 6px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--rot-text);
}
.album-titel {
margin-bottom: 8px;
font-family: var(--schrift-display);
font-size: 25px;
font-weight: 800;
line-height: 1.2;
}
.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, unter 1025px 3, 15px
Abstand, Rundung 8. */
.seite-album .abschnitt { padding: 25px 0 0; font-family: var(--schrift-display); }
/* Unter dem Kopf eine 2px-Linie — im Original #f0f0f0 (Fotoplugin), hier
im Akzent (Betreiber 31.10.2026). */
.seite-album .kopfzeile { margin-bottom: 40px; padding-bottom: 30px; border-bottom: 2px solid var(--akzent); }
.seite-album .kopfzeile h1 {
margin: 8px 0 20px;
font-family: var(--schrift-display);
font-size: 40px;
line-height: 1.2;
text-transform: none;
}
.seite-album .unterzeile {
display: flex;
justify-content: center;
gap: 20px;
margin-bottom: 20px;
/* Textschrift wie aller Fließtext (Betreiber 31.10.2026). */
font-family: var(--schrift-text);
font-size: 15.2px;
line-height: 1.5;
}
.seite-album .unterzeile span { display: flex; align-items: center; gap: 5px; }
.seite-album .unterzeile .icon { width: 18px; height: 18px; color: var(--akzent); }
@media (max-width: 1024px) {
.seite-album .abschnitt .huelle { --gutter: 0px; }
.seite-album .kopfzeile h1 { font-size: 32px; }
.seite-album .unterzeile { flex-direction: column; gap: 10px; }
.seite-album .unterzeile span { justify-content: center; }
}
@media (max-width: 767px) {
.seite-album .abschnitt .huelle { --gutter: 10px; }
.seite-album .abschnitt { padding-bottom: 25px; }
.seite-album .kopfzeile h1 { font-size: 24px; }
}
.fotoraster {
margin-block: 50px;
column-count: 4;
column-gap: 15px;
}
@media (max-width: 1024px) { .fotoraster { column-count: 3; } }
.fotoraster figure {
position: relative;
margin: 0 0 15px;
overflow: hidden;
border-radius: 8px;
background: #171a21;
break-inside: avoid;
cursor: zoom-in;
}
@media (max-width: 767px) { .fotoraster figure { margin-bottom: 10px; } }
.fotoraster img { width: 100%; height: auto; }
.fotoraster figure:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
/* ------------------------------------------------------------- Eventseite -- */
/* Grund #0f0f0f über den ganzen Inhalt, Spalte höchstens 820px, 20px
Rand, 40px oben, 87px unten — gemessen. */
.seite-event main { background: #0f0f0f; padding-inline: 20px; }
.seite-event .abschnitt { padding: 40px 0 87px; }
.event-flyer { width: 100%; height: auto; border-radius: 16px; }
/* Knöpfe untereinander, 10px eingerückt, 10px Abstand, 36px unter dem
Flyer. 50px hoch, Rundung 10, Montserrat Black 14px mit 1px Sperrung;
Tickets in Akzentfarbe, die anderen #242424. Symbol 14px, 10px davor. */
.event .knopf-reihe {
flex-direction: column;
gap: 10px;
margin-top: 36px;
padding-inline: 10px;
}
.event .knopf-reihe .knopf {
justify-content: center;
gap: 10px;
height: 50px;
padding: 18px 24px;
border-radius: 10px;
font-size: 14px;
line-height: 1;
letter-spacing: 1px;
text-transform: uppercase;
box-shadow: none;
transition: transform 0.3s;
}
.event .knopf-reihe .knopf::after { content: none; }
/* Eventknöpfe „schweben" beim Überfahren (Elementor-Hover „float"). */
.event .knopf-reihe .knopf:hover { transform: translateY(-8px); filter: none; }
.event .knopf .icon { width: 14px; height: 14px; }
/* Datumszeile: „SA 31.OKT • 22:00 UHR", Montserrat Bold 20px, 46px unter
den Knöpfen. Der Punkt dazwischen steht in Poppins 13px. */
.event-datum {
display: flex;
align-items: center;
gap: 8px;
margin-top: 46px;
font-family: var(--schrift-display);
font-size: 20px;
font-weight: 700;
line-height: 1;
letter-spacing: 0.5px;
text-transform: uppercase;
color: var(--akzent);
}
.event-datum span[aria-hidden] {
color: var(--akzent-text);
font-family: var(--schrift-display);
font-size: 13px;
letter-spacing: normal;
text-transform: none;
}
.event h1 {
margin-top: 26px;
font-size: 40px;
font-weight: 800;
line-height: 1.1;
}
@media (max-width: 1024px) { .event h1 { font-size: 32px; } }
@media (max-width: 767px) { .event h1 { font-size: 26px; } }
/* Beschreibung: ein Block mit
, 15px/27px in #ccc. Verweise in der
Akzentfarbe und in der Textschrift (Betreiber 31.10.2026; das Original
setzt sie in der Linkfarbe des Themes und in Poppins). */
.event-text {
margin-top: 26px;
font-family: var(--schrift-text);
font-size: 15px;
line-height: 27px;
color: #cccccc;
}
/* **Neu: Emoji-Kasten** (Eventtext, FAQ). Im Original ein 1em-Bild mit
0,07em Rand je Seite (WordPress). Hier das Zeichen der Systemschrift in
seiner eigenen Breite: Ein fester 1em-Kasten war schmaler als die
Farb-Emojis von Apple und Google, das Zeichen ragte heraus und deckte
das folgende Leerzeichen zu (Betreiber 31.10.2026: „schluckt ein
Leerzeichen"). */
.emoji {
margin: 0 0.07em;
line-height: 1;
}
.event-text a {
/* --akzent-text: der Akzent, so weit aufgehellt, dass 15px auf dem
dunklen Grund AA halten (#e6007e selbst bleibt darunter). */
color: var(--akzent-text);
overflow-wrap: anywhere;
}
/* Infokasten: Rahmen #262626, Rundung 14, Grund #181818. Die Paare in zwei
Spalten zu 47 %, Etikett 11px in Grau, Wert 15px 800. */
.infokasten {
display: flex;
flex-direction: column;
gap: 18px;
margin-top: 26px;
padding: 24px;
border: 1px solid #262626;
border-radius: 14px;
background: #181818;
}
.infokasten h2 {
font-size: 16px;
font-weight: 800;
line-height: 1;
letter-spacing: 1px;
}
.infokasten dl {
display: flex;
flex-wrap: wrap;
gap: 18px;
margin: 0;
padding: 10px;
}
.infopaar {
display: flex;
flex-direction: column;
gap: 3px;
width: 47%;
padding: 10px;
}
@media (max-width: 767px) { .infopaar { width: 100%; } }
.infopaar dt {
font-family: var(--schrift-display);
font-size: 11px;
font-weight: 600;
line-height: 1;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--tinte-still);
}
.infopaar dd { margin: 0; }
.infopaar dd span {
display: block;
font-family: var(--schrift-display);
font-size: 15px;
font-weight: 800;
line-height: 1;
text-transform: uppercase;
}
/* „Einlass" steht im Original als einziges Etikett in Poppins. */
.infopaar:nth-child(3) dt { font-family: var(--schrift-display); }
.infopaar dd small {
display: block;
margin-top: 3px;
font-family: var(--schrift-text);
font-size: 14px;
font-weight: 400;
line-height: 1.5;
text-transform: none;
color: var(--tinte-still);
}
/* Newsletter-Kasten der Eventseite, dann „Zurück": grau, Montserrat Black
13px, Pfeil davor, mittig, 26px unter dem Kasten. */
.event .newsletter { margin-top: 26px; }
.zurueck {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 26px auto 0;
padding-top: 20px;
font-family: var(--schrift-display);
font-size: 13px;
font-weight: 900;
line-height: 1;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--tinte-still);
border-radius: 3px;
}
.event > .zurueck { display: flex; width: max-content; }
.zurueck .icon { width: 13px; height: 13px; }
.zurueck:hover { color: var(--tinte); }
/* ---------------------------------------------------------- Angebotsseiten -- */
/* Baustein aus tropi-hp (/vermietung/, /car-branding/) — dieselbe Hand
hat Arenas /mieten/ gebaut. Werte aus tropi-hp, gemessen dort bei 1440: Spalte 1100px,
Abschnitte 100px auseinander (je 50 oben und unten), der erste 75px
unter dem Banner, die Anfrage 100px ueber dem Fuss.
**Neu im System:** .augenbraue (kleine rote Zeile ueber einer
Ueberschrift), .kopfzeile--strich, .merkmale/.merkmal (Name aus
baggi-hp), .bildraster, .anfrage, .form--anfrage. Zurueck in die
Vorlage. */
.huelle--angebot { max-width: calc(1100px + 40px); padding-inline: 20px; }
.abschnitt-angebot { padding-block: 50px; }
/* Nach dem Banner — `:first-of-type` traefe den Banner selbst. */
.seitenkopf + .abschnitt-angebot { padding-top: 75px; }
#anfrage { padding-bottom: 100px; }
/* Kleine rote Zeile ueber einer Ueberschrift: 15px fett, Versalien;
13px in den Karten. */
/* Spezifitaet wie `.ueber-text p` und `.kopfzeile p`, sonst faerben die
sie weiss bzw. grau und nehmen die Versalien weg. */
.augenbraue, .ueber-text .augenbraue, .kopfzeile .augenbraue {
margin: 0 0 20px;
font-family: var(--schrift-display);
color: var(--akzent-text);
font-size: 0.9375rem;
font-weight: 700;
text-transform: uppercase;
}
/* Einleitung: .ueber mit 520 | 60 | 520, Ueberschrift 58px, Text 16px/1,7,
Bild 4:3 mit Rundung 28. Der Strich wie auf der Startseite. */
.huelle--angebot.ueber { max-width: calc(1100px + 40px); }
/* Bis 1024 einspaltig, das Bild unter dem Text — anders als die
Startseite, die bei 768 zweispaltig bleibt (gemessen). */
@media (max-width: 1024px) {
.huelle--angebot.ueber { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}
.abschnitt-angebot .ueber-text h2 {
font-size: 3.625rem;
line-height: 1;
margin-bottom: 56px;
}
.abschnitt-angebot .ueber-text h2::after { top: calc(100% + 25px); }
.abschnitt-angebot .ueber-text p:not(.augenbraue) {
font-size: 1rem;
line-height: 1.7;
text-align: left;
margin-bottom: 20px; /* 20,00 am Original, nicht 1,2em (19,2) */
}
.abschnitt-angebot .ueber-text .knopf-reihe { margin-top: 34px; }
.ueber-bild {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
border-radius: 28px;
}
/* Groesserer Knopf: 16px fett, 0,03em Sperrung, Polster 17/32 — 58px. */
.knopf--gross {
padding: 17px 32px;
font-size: 1rem;
font-weight: 700;
line-height: 1.5;
letter-spacing: 0.03em;
}
/* Kopfzeile mit Augenbraue und mittigem Strich (320px, roter Teil 38 %
in der Mitte). */
.kopfzeile .augenbraue { margin-bottom: 19.5px; }
.kopfzeile--strich h2, .anfrage .kopfzeile h2 { line-height: 1; }
/* `flow-root`: Sonst faellt der Abstand unter der Ueberschrift (31) mit
dem der Kopfzeile (40) zusammen, statt sich zu den gemessenen 71 zu
addieren. */
.kopfzeile--strich { display: flow-root; margin-bottom: 40px; }
/* Der Strich unter der Ueberschrift ist bei Arena eine echte Schiene
(.trenner--kurz) — siehe „Trennbalken". */
.kopfzeile .kopfzeile-satz {
margin: 20px auto 0;
max-width: 620px;
color: var(--tinte);
font-size: 1rem;
line-height: 1.7;
}
.kopfzeile--strich .kopfzeile-satz { font-size: 1.125rem; font-weight: 700; line-height: 1.5; }
/* Merkmale: Karten mit 1px-Rahmen (9 % Weiss), Grund 2,4 %, Rundung 28,
Polster 36/32, Inhalt mit 12px Abstand. Drei Spalten, als Paar zwei. */
.merkmale {
display: grid;
gap: 24px;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.merkmale--zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.merkmal {
display: flex;
flex-direction: column;
gap: 12px;
padding: 36px 32px;
border: 1px solid rgb(255 255 255 / 9%);
border-radius: 28px;
background: rgb(255 255 255 / 2.4%);
}
.merkmal .augenbraue { margin: 0; font-size: 0.8125rem; line-height: 1.5; }
.merkmal h3 {
font-size: 1.75rem;
line-height: 1.05;
letter-spacing: -0.03em;
}
.merkmal p { margin: 0; font-size: 0.9375rem; line-height: 1.7; }
/* Liste „Perfekt fuer": fette Versalien, getrennt durch Linien. */
/* In den zwei Kaesten steht der Titel 36px unter der Augenbraue (32 in
den drei Karten) — gemessen. */
.merkmale--zwei .augenbraue { margin-bottom: 4px; }
.merkmal-liste { margin: 8px 0 0; padding: 0; list-style: none; }
.merkmal-liste li {
padding: 15px 0;
font-size: 1rem;
line-height: 1.5;
border-bottom: 1px solid rgb(255 255 255 / 9%);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.02em;
}
.merkmal-liste li:last-child { padding-bottom: 0; border-bottom: 0; }
/* Punkte „Alles dabei": roter Balken links, Titel 17px Versalien. */
/* Bildraster: 3 Spalten (6 Bilder) bzw. 2 (2 Bilder), 20px Abstand,
4:3, Rundung 28. */
.bildraster { display: grid; gap: 20px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bildraster img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 28px; }
/* Anfrage: Kasten nach dem eigenen CSS der bestehenden Seite — 1100px,
Rundung 28, Polster 70/40 (44/16 auf dem Telefon), Rand rot 35 %,
roter Schein von oben. */
.anfrage {
width: calc(100% - 40px);
max-width: 1100px;
margin: 0 auto;
padding: 70px 40px;
border: 1px solid rgb(var(--akzent-rgb) / 35%);
border-radius: 28px;
background-color: #0c0c0c;
background-image: radial-gradient(circle at 50% 0%, rgb(var(--akzent-rgb) / 26%) 0%, rgb(var(--akzent-rgb) / 7%) 40%, rgb(12 12 12 / 0%) 75%);
box-shadow: 0 0 70px rgb(var(--akzent-rgb) / 12%);
}
.anfrage .kopfzeile { margin-bottom: 40px; }
.anfrage .kopfzeile .augenbraue { color: var(--akzent-text); } /* Kontrast auf dem Kasten, siehe --akzent-text */
.anfrage .kopfzeile h2 { max-width: 800px; margin-inline: auto; }
.anfrage .form { max-width: 720px; margin-inline: auto; }
@media (max-width: 767px) {
.anfrage { width: calc(100% - 32px); padding: 44px 16px; }
}
/* Felder hier transparent mit Rahmen (14 % Weiss), Rundung 20. */
.form--anfrage input[type='text'], .form--anfrage input[type='email'],
.form--anfrage input[type='date'], .form--anfrage select, .form--anfrage textarea {
border: 1px solid rgb(255 255 255 / 14%);
border-radius: 20px;
background: transparent;
}
/* Auswahl mit eigenem Pfeil (das Original zeichnet ihn ebenso als
Hintergrund), 49px hoch. */
.form--anfrage select {
padding: 12px 40px 12px 14px;
appearance: none;
-webkit-appearance: none;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23cfd6e0' stroke-width='2' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") right 16px center / 12px 8px no-repeat;
}
.form--anfrage select option { color: #111111; }
.form--anfrage input[type='date'] { height: 46px; color-scheme: dark; } /* gemessen 46px */
/* Einwilligung im Anfragekasten weiss, Verweis rot — auf beiden Seiten. */
.anfrage .zustimmung { color: var(--tinte); }
@media (max-width: 1024px) {
.merkmale { grid-template-columns: 1fr; }
}
/* Telefon: Rand 16, erster Abschnitt 55px unter dem Banner, Ueberschrift
der Einleitung 35px, Augenbraue 12px, Knopf ueber die volle Breite,
Kaesten mit Polster 28/22 — gemessen bei 390. */
@media (max-width: 767px) {
.huelle--angebot { padding-inline: 16px; }
.seitenkopf + .abschnitt-angebot { padding-top: 55px; }
.abschnitt-angebot .ueber-text h2 { font-size: 2.1875rem; }
.augenbraue, .ueber-text .augenbraue, .kopfzeile .augenbraue { font-size: 0.75rem; }
.abschnitt-angebot .knopf--gross { display: flex; justify-content: center; width: 100%; padding-inline: 16px; font-size: 0.9375rem; }
.merkmal { padding: 28px 22px; }
.abschnitt-angebot { padding-block: 30px; }
#anfrage { padding-bottom: 60px; }
.merkmal-liste li { padding-block: 13px; font-size: 0.9375rem; }
/* Doppelte Klasse: `.kopfzeile` bekommt weiter unten fuer das Telefon
50px — hier bleibt es bei den 40 vom Desktop (gemessen). */
.kopfzeile.kopfzeile--strich { margin-bottom: 40px; }
.bildraster img { border-radius: 18px; }
.kopfzeile--strich .kopfzeile-satz { font-size: 1rem; }
/* Sechs Bilder zweispaltig mit 12px Abstand, zwei Bilder untereinander. */
.bildraster { gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* ----------------------------------------------------------------- Mieten -- */
/* /mieten/ — Varianten der Angebotsbausteine für Arena, gemessen auf
arena-ihlpohl.de/mieten/ (referenz/mieten-*.json). Jede nach ihrer
Aufgabe benannt; Rückgabe an die Vorlage in docs/README.md. Grau
entsteht im Original durch Deckkraft, nicht durch Farbe — hier ebenso
(gemessen über `deck`). */
.seite-mieten .huelle--angebot { max-width: calc(1100px + 40px); }
/* Kopfzeilen: Etikett, Überschrift und Satz nur so breit wie ihr Text,
mittig gestapelt; der Satz fett in der Displayschrift. */
.seite-mieten .kopfzeile { display: flex; flex-direction: column; align-items: center; }
/* Umbruch wie im Original — ohne Ausgleich der Zeilenlängen. */
.seite-mieten .kopfzeile h2 { text-wrap: wrap; }
/* Im Anfragekasten ist der Satz Fließtext (16px/1,7, gedämpft). */
.seite-mieten .anfrage .kopfzeile-satz { font-family: var(--schrift-text); font-size: 16px; font-weight: 400; line-height: 1.7; opacity: 0.88; }
.seite-mieten .anfrage .kopfzeile h2 { text-wrap: wrap; }
.seite-mieten .anfrage .knopf { width: 100%; justify-content: center; font-size: 16px; }
/* Einwilligung wie das Plugin: Verweis in Textfarbe (gemessen /kontakt/,
/jobs/, /mieten/). */
.zustimmung a { color: inherit; }
.seite-mieten .anfrage .kopfzeile { margin-bottom: 20px; }
/* Felder im Anfragekasten wie das Plugin dort: durchsichtig, Rahmen 18 %
Weiß, Rundung 20; Eingaben 42px (8/16), Auswahl 50px (12/40/12/14),
Nachricht 146px. Doppelte Klasse gegen die .feld-Regeln des Systems. */
.seite-mieten .form--anfrage .feld input:not([type='checkbox']),
.seite-mieten .form--anfrage .feld select,
.seite-mieten .form--anfrage .feld textarea {
border: 1px solid rgb(255 255 255 / 18%);
border-radius: 20px;
background-color: rgb(2 1 1 / 0%);
line-height: 24px;
}
.seite-mieten .form--anfrage .feld input:not([type='checkbox']) { height: 42px; padding: 8px 16px; }
/* Spalten auf die Formularbreite begrenzen: Das Datumsfeld hat eine große
Mindestbreite und blähte die automatische Rasterspalte bei 390px auf
306 statt 282px auf. */
.form--anfrage, .form--anfrage .form-reihe { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .form--anfrage .form-reihe { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.seite-mieten .form--anfrage .feld input[type='date'] { height: 46px; }
.seite-mieten .form--anfrage .feld select { height: 50px; padding: 12px 40px 12px 14px; }
.seite-mieten .form--anfrage .feld textarea { height: 146px; padding: 12px 14px; }
.seite-mieten .knopf--gross { text-transform: uppercase; letter-spacing: 0.03em; }
/* Erster Abschnitt 70px unter dem Seitenkopf (tropi-hp: 75). */
.seite-mieten .seitenkopf + .abschnitt-angebot { padding-top: 70px; }
.seite-mieten .kopfzeile-satz {
font-family: var(--schrift-display);
font-size: 17px;
font-weight: 700;
line-height: 1.5;
opacity: 0.9;
}
/* Einleitung: Spalten 520 | 520, 60 Abstand, mittig. */
.seite-mieten .huelle--angebot.ueber { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 60px; align-items: center; }
.seite-mieten .ueber-text h2 { font-size: 58px; line-height: 1; letter-spacing: -0.04em; margin-bottom: 0; text-wrap: wrap; }
.seite-mieten .ueber-text p:not(.augenbraue) { font-size: 16px; line-height: 1.7; }
.seite-mieten .ueber-text .augenbraue, .seite-mieten .ueber-text .eckdaten p { opacity: 1; }
.ueber-bild--quadrat { aspect-ratio: 1 / 1; }
/* Abstände der Einleitung gemessen: Etikett 20, Strich 25/6/25, Eckdaten
28 unter dem Text, Knopf 30 darunter. Die Spalte ist Flex mit gap 20
(tropi-hp) — hier ohne gap, sonst addieren sich gap und Außenabstand. */
.seite-mieten .ueber-text { gap: 0; }
.seite-mieten .ueber-text .augenbraue { margin: 0 0 20px; }
.seite-mieten .ueber-text .trenner { margin: 25px 0; }
.seite-mieten.seite-mieten .ueber-text p:not(.augenbraue) { margin: 0; }
.seite-mieten .ueber-text .eckdaten { margin-top: 28px; }
.seite-mieten .abschnitt-angebot .ueber-text .knopf-reihe { margin-top: 30px; }
/* Eckdaten unter dem Einleitungstext: zwei Spalten (244 + 32 + 244),
Linie oben, Wert 28px in Versalien; der Preis im Akzent. */
.eckdaten {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 22px 32px;
margin: 30px 0 0;
}
.eckdaten > div { padding-top: 16px; border-top: 1px solid rgb(255 255 255 / 12%); }
.eckdaten dt {
font-family: var(--schrift-display);
font-size: 28px;
font-weight: 900;
line-height: 1.05;
letter-spacing: -0.02em;
text-transform: uppercase;
}
.eckdaten > div:nth-child(3) dt { color: var(--akzent); }
.eckdaten dd { margin: 6px 0 0; font-size: 13px; line-height: 1.5; opacity: 0.7; }
/* Areas: Karte mit Bild oben, randlos in der Karte. */
.merkmal--bild { gap: 0; padding: 0; overflow: hidden; }
.merkmal--bild > :last-child { margin-bottom: 32px; }
.merkmal--bild > :not(.merkmal-bild) { margin-inline: 30px; }
.merkmal-bild { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin-bottom: 29px; }
.merkmal--bild .augenbraue { margin-bottom: 9px; font-size: 13px; }
.merkmal--bild h3 { margin-bottom: 10px; font-size: 28px; line-height: 1.05; letter-spacing: -0.03em; }
.merkmal--bild p:not(.augenbraue) { font-size: 15px; line-height: 1.7; opacity: 0.88; }
/* Ein Satz in einem flachen Kasten unter den Areas. */
.hinweis {
margin: 40px 0 0;
padding: 14px 20px;
border: 1px solid rgb(var(--akzent-rgb) / 35%);
border-radius: 14px;
background: rgb(var(--akzent-rgb) / 10%);
font-family: var(--schrift-display);
font-size: 14px;
font-weight: 700;
line-height: 1.5;
text-align: center;
}
/* Getränkepakete: Preis 30px im Akzent, darunter Text und die Liste
zweispaltig, durch eine Linie abgesetzt. Das teuerste hervorgehoben. */
.merkmal--paket { padding: 34px 32px; gap: 0; }
.merkmal--paket h3 { font-size: 26px; line-height: 1.05; letter-spacing: -0.02em; }
.merkmal .preis {
margin: 10px 0 10px;
font-family: var(--schrift-display);
font-size: 30px;
font-weight: 900;
line-height: 1.1;
color: var(--akzent);
}
.seite-mieten .merkmal.merkmal--paket > p:not(.preis) { margin: 0; padding-bottom: 14px; border-bottom: 1px solid rgb(255 255 255 / 9%); font-size: 15px; line-height: 1.6; opacity: 0.88; }
.merkmal-teil { margin-top: 0; padding-top: 14px; }
.merkmal-teil .augenbraue { margin: 0 0 10px; font-size: 12px; }
.merkmal .merkmal-liste--spalten { columns: 2; column-gap: 24px; margin: 0; font-size: 14px; line-height: 1.85; opacity: 1; }
.merkmal--hervor {
border-color: rgb(var(--akzent-rgb) / 45%);
background: rgb(var(--akzent-rgb) / 7%);
}
/* Kleingedrucktes unter einem Block. */
.fussnote {
max-width: 820px;
margin: 40px auto 0;
font-size: 13px;
line-height: 1.7;
text-align: center;
opacity: 0.65;
}
/* Miet- und Nebenkosten: Zeilen mit Linie, Bezeichnung links fett in
Versalien, Betrag rechts gedämpft. */
.merkmal--kosten { padding: 30px 32px; gap: 0; }
/* Unter den Kosten steht die Fußnote 29px tiefer, unter den Paketen 40. */
#kosten .fussnote { margin-top: 29px; }
.preisliste > div:last-child { padding-bottom: 0; }
.merkmal--kosten .augenbraue { margin: 0 0 8px; font-size: 13px; }
.preisliste { margin: 0; }
.preisliste > div {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 16px;
padding: 15px 0 17px;
border-top: 1px solid rgb(255 255 255 / 9%);
}
.preisliste dt {
font-family: var(--schrift-display);
font-size: 18px;
font-weight: 900;
line-height: 1.5;
text-transform: uppercase;
}
.preisliste dd {
margin: 0;
font-family: var(--schrift-display);
font-size: 15px;
font-weight: 500;
line-height: 1.45;
color: rgb(255 255 255 / 70%);
white-space: nowrap;
}
/* Vier Bilder in einer Reihe, hochkant, Rundung 24. */
.bildraster--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bildraster--4 img { aspect-ratio: 4 / 5; border-radius: 24px; }
/* Fragen zur Anmietung: 860px-Kasten, Frage im Akzent in Versalien. */
.merkmal--schmal { max-width: 860px; margin-inline: auto; padding: 12px 32px; }
.fragenliste { margin: 0; }
.fragenliste > div { padding: 22px 0; border-top: 1px solid rgb(255 255 255 / 9%); }
.fragenliste > div:first-child { border-top: 0; }
.fragenliste dt {
font-family: var(--schrift-display);
font-size: 16px;
font-weight: 700;
line-height: 1.2;
color: var(--akzent-text);
text-transform: uppercase;
}
.fragenliste dd { margin: 8px 0 0; font-size: 15px; line-height: 1.7; opacity: 0.88; }
/* Unter 1025px (gemessen bei 768): Einleitung und Kosten einspaltig,
Pakete zweispaltig, Bilder 2 × 2. */
@media (max-width: 1024px) {
.seite-mieten .huelle--angebot.ueber { grid-template-columns: minmax(0, 1fr); gap: 40px; }
.seite-mieten #pakete .merkmale { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.seite-mieten #kosten .merkmale { grid-template-columns: minmax(0, 1fr); }
.bildraster--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
/* Bild 726px breit in 4:3 = 544,5px hoch: mit 28,5px Abstand liegt das
Etikett je Karte auf derselben Rundung wie im Original. */
.merkmal-bild { margin-bottom: 28.5px; }
}
@media (max-width: 767px) {
.seite-mieten .ueber-text h2 { font-size: 35px; }
.seite-mieten #pakete .merkmale { grid-template-columns: minmax(0, 1fr); }
.seite-mieten .abschnitt-angebot .knopf--gross { padding-inline: 16px; }
.seite-mieten .seitenkopf + .abschnitt-angebot { padding-top: 40px; }
.seite-mieten .anfrage .form.form--anfrage { padding: 24px 20px; }
.seite-mieten .kopfzeile .augenbraue { margin-bottom: 20px; }
.eckdaten { grid-template-columns: minmax(0, 1fr); gap: 16px; }
.merkmal-bild { margin-bottom: 24px; }
/* 19,5px Etikett + 9,5 = 29 wie gemessen; mit 9 rundet Chrome hier auf 28. */
.merkmal--bild .augenbraue { margin-bottom: 9.5px; }
.merkmal--bild > :last-child { margin-bottom: 26px; }
.seite-mieten .kopfzeile-satz { font-size: 15px; }
.seite-mieten .anfrage .knopf { padding: 14px 30px; white-space: nowrap; }
.merkmal--kosten { padding: 26px 22px; }
.bildraster--4 img { border-radius: 18px; }
.eckdaten dt { font-size: 22px; }
.merkmal--bild > :not(.merkmal-bild) { margin-inline: 22px; }
.merkmal--paket { padding: 28px 22px; }
.merkmal-liste--spalten { columns: 1; }
.bildraster--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.merkmal--schmal { padding: 6px 22px; }
}
/* ------------------------------------------------------------ Rechtstext -- */
/* Impressum und Datenschutz wie der Clubinio-Rechtsbaustein des Originals:
Spalte halb so breit wie das Fenster (700px bei 1440), 50px unter dem
Kopf; Titel 32px in Akzentfarbe, 20px darunter die Abschnitte (32px
Abstand); Zwischenüberschrift 14px fett, 7px darüber zum Text; Text
14px/21px; Verweise in Poppins. Auf dem Telefon volle Breite, 20px Rand. */
.seite-recht .abschnitt { padding: 50px 0 49px; }
.rechtstext { --breite: 50%; --gutter: 10px; }
@media (max-width: 767px) { .rechtstext { --breite: 100%; --gutter: 20px; } }
.rechtstext h1 {
margin-bottom: 20px;
font-size: 32px;
font-weight: 800;
line-height: 1;
color: var(--akzent);
}
.rechtstext section { margin-bottom: 32px; }
.rechtstext section:last-child { margin-bottom: 0; }
.rechtstext h2 {
margin-bottom: 7px;
font-size: 14px;
font-weight: 700;
line-height: 1.2;
text-transform: none;
}
/* Absatzabstand 14px — der Rechtsbaustein rechnet in px, nicht wie
Elementor in rem. */
.rechtstext p { margin-bottom: 14px; }
.rechtstext p:last-child { margin-bottom: 0; }
.rechtstext p,
.rechtstext li {
font-family: var(--schrift-text);
font-size: 14px;
line-height: 1.5;
}
.rechtstext ul { margin: 0 0 0.9rem; padding-left: 20px; }
.rechtstext li + li { margin-top: 0.3rem; }
.rechtstext a { font-family: var(--schrift-display); color: var(--akzent); } /* Original Poppins → Montserrat */
.rechtstext a:hover { text-decoration: underline; }
/* ------------------------------------------------------------- Newsletter -- */
/* **Neu: Newsletter** wie das Clubinio-Plugin der bestehenden Seite. Im
Fuß: Feld und Knopf als eine Pille (Feld #12151c, Knopf in Akzentfarbe),
darunter die Einwilligung 11,5px. */
.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: 1px solid #2a2f3a;
border-radius: 999px;
background: #12151c;
}
.newsletter-zeile input {
flex: 1;
min-width: 0;
padding: 0 18px;
border: 0;
background: transparent;
color: var(--tinte);
font: inherit;
font-family: var(--schrift-display);
font-size: 15px;
line-height: 1.5;
}
.newsletter-zeile input::placeholder { color: rgb(255 255 255 / 45%); }
.newsletter-zeile input:focus { outline: none; }
.newsletter-zeile:focus-within { outline: 2px solid var(--akzent); outline-offset: 2px; }
.newsletter-zeile .knopf {
padding: 12px 22px;
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-size: 11.52px;
color: var(--tinte);
}
.newsletter .rueckmeldung { margin-top: 12px; max-width: 460px; }
/* Als eigener Kasten (/newsletter/ und Eventseite), gemessen am Plugin:
#111, Rundung 22, Polster 80/40, mittig. Darüber das Foto mit 40 %
Deckung und ein Verlauf 0,55 → 0,85 (#0a0b0e). Das Original legt Foto
und Verlauf als zwei leere hinein; hier sind es Hintergrund-
schichten desselben Kastens — der 60-%-Schleier in #111 über dem Foto
ergibt rechnerisch dasselbe wie das Foto mit 40 % über #111. */
.newsletter-kasten {
overflow: hidden;
padding: 80px 40px;
border-radius: 22px;
background:
linear-gradient(rgb(10 11 14 / 55%), rgb(10 11 14 / 85%)),
linear-gradient(rgb(17 17 17 / 60%), rgb(17 17 17 / 60%)),
url('../img/club-grund.webp') center / cover no-repeat,
#111111;
text-align: center;
}
/* Überschrift 41,6px/1,1 — auf der Eventseite 800, auf /newsletter/ 700. */
.newsletter-kasten h1,
.newsletter-kasten h2 {
font-size: 41.6px;
font-weight: 800;
line-height: 1.1;
text-transform: uppercase;
}
.newsletter-kasten h1 { font-weight: 700; }
.newsletter-kasten > p {
max-width: 560px;
margin: 10px auto 26px;
font-size: 16.8px;
line-height: 1.5;
color: #cfd6e0;
}
.newsletter-kasten .newsletter-zeile {
max-width: 540px;
height: auto;
margin-inline: auto;
gap: 10px;
overflow: visible;
border: 0;
border-radius: 0;
background: transparent;
}
.newsletter-kasten .newsletter-zeile input {
height: 56px;
padding: 16px 20px;
border-radius: 999px;
background: rgb(255 255 255 / 96%);
color: #111111;
font-size: 16px;
}
.newsletter-kasten .newsletter-zeile input::placeholder { color: #757575; }
.newsletter-kasten .newsletter-zeile .knopf {
padding: 16px 32px;
border-radius: 999px;
font-size: 16px;
line-height: 1.5;
}
.newsletter-kasten .zustimmung {
max-width: 540px;
margin: 14px auto 0;
font-size: 12.8px;
line-height: 1.45;
color: #c3ccd8;
}
/* Telefon: Polster 54/24, Überschrift 32px, Feld und Knopf untereinander
über die volle Breite. */
@media (max-width: 767px) {
.newsletter-kasten { padding: 54px 24px; }
.newsletter-kasten h1,
.newsletter-kasten h2 { font-size: 32px; }
.newsletter-kasten .newsletter-zeile { flex-direction: column; }
/* `flex: 1` würde das Feld in der Spalte auf die Inhaltshöhe drücken. */
.newsletter-kasten .newsletter-zeile input { flex: none; }
}
/* ------------------------------------------------------------------ Fuss -- */
/* Grund #0c0c0c, Polster 72px / 8 %. Drei Spalten 40 / 30 / 30 %: links
Marke, Text, Rechtliches und Newsletter, die mittlere bleibt leer,
rechts Social, Anfahrt, U18-Formular und „powered by Clubinio". Bis
1024px untereinander — die rechte Spalte zuerst, wie im Original.
Grund und Linie sitzen auf dem Raster, nicht auf