/* ==========================================================================
SCHAMLOS Design-System
Farben, Fonts und Bausteine aus den Mockups (v6 / v15)
========================================================================== */
/* --------------------------------------------------------------------------
Lokal gehostete Schriften (DSGVO)
--------------------------------------------------------------------------
Ersetzen das frühere auf fonts.googleapis.com in
schamlos-event-design.php (Handle sed-google-fonts) und in
templates/maintenance-page.php. Beide luden die Schriften ungated VOR
jeder Consent-Entscheidung und übertrugen damit die IP jedes Besuchers an
Google. Lokal gehostet entfällt das komplett: keine Einwilligung nötig,
kein Content-Blocker, kein FOUT durch eine Blockade.
Es sind exakt die Schnitte, die vorher auch von Google angefordert wurden
(Anton 400; Plus Jakarta Sans 400–800; IBM Plex Mono 400/500/600;
Permanent Marker 400) — nicht mehr, nicht weniger, damit sich am
Schriftbild nichts ändert.
Subsets: nur latin + latin-ext. Google lieferte zusätzlich cyrillic,
cyrillic-ext und vietnamese aus, die für eine deutschsprachige Seite ohne
Nutzen sind. Per unicode-range lädt der Browser latin-ext ohnehin nur
dann, wenn ein Zeichen aus diesem Bereich tatsächlich vorkommt — für rein
deutschen Text bleibt es bei den latin-Dateien.
font-display:swap entspricht dem &display=swap der alten Google-URL.
Alle vier Familien stehen unter der SIL Open Font License 1.1, das
Selbsthosten ist also ausdrücklich erlaubt.
-------------------------------------------------------------------------- */
/* Anton */
@font-face{
font-family:'Anton';
font-style:normal;
font-weight:400;
font-display:swap;
src:url('../fonts/anton-latin-400.woff2') format('woff2');
unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
font-family:'Anton';
font-style:normal;
font-weight:400;
font-display:swap;
src:url('../fonts/anton-latin-ext-400.woff2') format('woff2');
unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Plus Jakarta Sans */
@font-face{
font-family:'Plus Jakarta Sans';
font-style:normal;
font-weight:400;
font-display:swap;
src:url('../fonts/plus-jakarta-sans-latin-400.woff2') format('woff2');
unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
font-family:'Plus Jakarta Sans';
font-style:normal;
font-weight:400;
font-display:swap;
src:url('../fonts/plus-jakarta-sans-latin-ext-400.woff2') format('woff2');
unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
font-family:'Plus Jakarta Sans';
font-style:normal;
font-weight:500;
font-display:swap;
src:url('../fonts/plus-jakarta-sans-latin-500.woff2') format('woff2');
unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
font-family:'Plus Jakarta Sans';
font-style:normal;
font-weight:500;
font-display:swap;
src:url('../fonts/plus-jakarta-sans-latin-ext-500.woff2') format('woff2');
unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
font-family:'Plus Jakarta Sans';
font-style:normal;
font-weight:600;
font-display:swap;
src:url('../fonts/plus-jakarta-sans-latin-600.woff2') format('woff2');
unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
font-family:'Plus Jakarta Sans';
font-style:normal;
font-weight:600;
font-display:swap;
src:url('../fonts/plus-jakarta-sans-latin-ext-600.woff2') format('woff2');
unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
font-family:'Plus Jakarta Sans';
font-style:normal;
font-weight:700;
font-display:swap;
src:url('../fonts/plus-jakarta-sans-latin-700.woff2') format('woff2');
unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
font-family:'Plus Jakarta Sans';
font-style:normal;
font-weight:700;
font-display:swap;
src:url('../fonts/plus-jakarta-sans-latin-ext-700.woff2') format('woff2');
unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
font-family:'Plus Jakarta Sans';
font-style:normal;
font-weight:800;
font-display:swap;
src:url('../fonts/plus-jakarta-sans-latin-800.woff2') format('woff2');
unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
font-family:'Plus Jakarta Sans';
font-style:normal;
font-weight:800;
font-display:swap;
src:url('../fonts/plus-jakarta-sans-latin-ext-800.woff2') format('woff2');
unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* IBM Plex Mono */
@font-face{
font-family:'IBM Plex Mono';
font-style:normal;
font-weight:400;
font-display:swap;
src:url('../fonts/ibm-plex-mono-latin-400.woff2') format('woff2');
unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
font-family:'IBM Plex Mono';
font-style:normal;
font-weight:400;
font-display:swap;
src:url('../fonts/ibm-plex-mono-latin-ext-400.woff2') format('woff2');
unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
font-family:'IBM Plex Mono';
font-style:normal;
font-weight:500;
font-display:swap;
src:url('../fonts/ibm-plex-mono-latin-500.woff2') format('woff2');
unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
font-family:'IBM Plex Mono';
font-style:normal;
font-weight:500;
font-display:swap;
src:url('../fonts/ibm-plex-mono-latin-ext-500.woff2') format('woff2');
unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
font-family:'IBM Plex Mono';
font-style:normal;
font-weight:600;
font-display:swap;
src:url('../fonts/ibm-plex-mono-latin-600.woff2') format('woff2');
unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
font-family:'IBM Plex Mono';
font-style:normal;
font-weight:600;
font-display:swap;
src:url('../fonts/ibm-plex-mono-latin-ext-600.woff2') format('woff2');
unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Permanent Marker */
@font-face{
font-family:'Permanent Marker';
font-style:normal;
font-weight:400;
font-display:swap;
src:url('../fonts/permanent-marker-latin-400.woff2') format('woff2');
unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root{
--sed-bg:#120A17;
--sed-bg-panel:#1D1023;
--sed-bg-panel-2:#2B1530;
--sed-coral:#FF4F3F;
--sed-pink:#FF2E7E;
--sed-cyan:#3FF0D6;
--sed-purple:#B23FF0;
--sed-cream:#FFF6EC;
--sed-muted:#C7B4CE;
--sed-line: rgba(255,246,236,0.14);
--sed-grid: repeating-radial-gradient(circle at 0 0, rgba(255,246,236,0.025) 0px, rgba(255,246,236,0.025) 1px, transparent 1px, transparent 8px);
/* Gesamthöhe der klebenden Kopfzeile: 72px Mindesthöhe (.sed-nav-inner)
plus 2px untere Linie (.sed-nav). Daran hängt der Ticker, der sich
direkt darunter festsetzt — siehe .sed-ticker. Fest verdrahtet und
nicht per JavaScript gemessen, weil die Höhe rein aus diesen beiden
CSS-Werten folgt: Der Inhalt der Kopfzeile (Logo 36px, Menüpunkte 39px,
Ticket-Button ~40px) bleibt unter der Mindesthöhe und kann sie nicht
aufdrücken. Ändert sich eine der beiden Zahlen, gehört dieser Wert
mitgeändert. */
--sed-nav-h:74px;
}
/* Ursache des horizontalen Wackelns auf Mobile (live per Browser-Inspektion
verifiziert, nicht geraten): .sed-hero-bg blutet per Design absichtlich
über den Hero-Rand hinaus (inset:-20% -10% auto -10%, weiter unten in
dieser Datei) für den weichen Verlauf-Glow-Effekt — .sed-hero selbst hat
overflow:visible (ebenfalls Absicht, sonst würde der Glow oben/unten
abgeschnitten). Kein Vorfahre hat bislang overflow-x:hidden, wodurch
dieser gewollte Rand-Überstand die gesamte Seite horizontal aufgezogen
hat (bestätigt: Ausblenden von .sed-hero-bg allein brachte scrollWidth
exakt auf Viewport-Breite zurück). Die Ticker-Leiste (.sed-ticker-track)
war NICHT die Ursache — sie wird bereits korrekt von .sed-ticker (hat
eigenes overflow:hidden) auf Viewport-Breite geclippt. overflow-x:hidden
hier auf html/body ist daher kein Kaschieren, sondern die korrekte,
übliche Lösung für absichtlich über den Rand hinausblutende Deko-Elemente
wie diesen Glow.
NACHTRAG (Sticky-Kopfzeile): "hidden" war hier die falsche Zutat und hat
die klebende Navigation stillgelegt. overflow-x:hidden zwingt die andere
Achse auf overflow-y:auto — damit wird selbst zu einem
Scroll-Container. position:sticky richtet sich immer nach dem NÄCHSTEN
scrollenden Vorfahren, und der war ab da nicht mehr das Fenster, sondern
dieser body-Kasten, der von sich aus nie scrollt (er wächst einfach mit
dem Inhalt). Ergebnis: .sed-nav blieb nirgends kleben, obwohl
position:sticky sauber gesetzt war — live nachgemessen, die Kopfzeile
wanderte beim Scrollen um exakt den Scrollweg nach oben aus dem Bild.
overflow-x:clip schneidet genauso ab, erzeugt dabei aber KEINEN
Scroll-Container und lässt die andere Achse in Ruhe. Beide Zeilen bleiben
bewusst stehen: Browser ohne "clip" (Safari vor 16) verwerfen die zweite
Deklaration und behalten das bisherige Verhalten — dort ist die Kopfzeile
dann wie bisher nicht klebend, aber nichts wird schlechter. */
html, body{ overflow-x:hidden; overflow-x:clip; }
/* Weißer Rand oben + "durchscheinendes" Weiß beim Overscroll-Bounce auf
iOS Safari: Unser dunkler Seiten-Ton (var(--sed-bg)) war bislang NUR
auf den inneren Wrapper (.sed-event/.sed-home) gesetzt, nicht auf
html/body selbst. iOS Safari zeigt beim Bounce (elastisches
Überscrollen oben/unten) und in schmalen Rand-Bereichen aber den
Hintergrund von html/body, nicht den eines inneren Divs — ohne eigene
Hintergrundfarbe dort blitzt der Browser-Standard (Weiß) durch.
min-height:100% (body) bzw. 100% (html) stellt zusätzlich sicher, dass
der Hintergrund auch dann die volle sichtbare Höhe abdeckt, wenn der
eigentliche Seiteninhalt kürzer ist als der Viewport.
!important nötig: live geprüft, das Theme setzt body{ background:#fff }
selbst über eine spezifischere Regel — unsere einfache body{}-Deklaration
wurde dadurch überschrieben (computed background blieb rgb(255,255,255)
trotz dieser Regel). Gleiches Muster wie bei den bereits bestehenden
Theme-Override-Schutz-Regeln weiter unten in dieser Datei. */
html{ background-color:var(--sed-bg) !important; min-height:100% !important; }
body{ background-color:var(--sed-bg) !important; min-height:100vh !important; }
/* Typografie */
.sed-h1, .sed-h2, .sed-h3,
.sed-event h1, .sed-event h2, .sed-event h3,
.sed-home h1, .sed-home h2, .sed-home h3,
.sed-maintenance h1, .sed-maintenance h2, .sed-maintenance h3,
.sed-404 h1, .sed-404 h2, .sed-404 h3{
font-family:'Anton', sans-serif; font-weight:400; line-height:1.04;
letter-spacing:-0.01em; text-transform:uppercase;
}
.sed-eyebrow{
font-family:'IBM Plex Mono', monospace; font-size:12px; font-weight:700;
letter-spacing:0.16em; text-transform:uppercase; color:var(--sed-cyan);
}
.sed-marker{ font-family:'Permanent Marker', cursive; }
/* Buttons */
.sed-btn{
display:inline-flex; align-items:center; gap:8px; padding:16px 32px;
font-weight:700; font-size:15px; cursor:pointer; border:none;
transition:transform 0.15s ease; text-decoration:none;
}
.sed-btn:hover{ transform:translateY(-2px) scale(1.02); }
.sed-btn-primary{
background:linear-gradient(120deg, var(--sed-coral), var(--sed-pink));
color:#1A0806 !important; border-radius:4px 22px 4px 22px; transform:rotate(-1deg);
}
.sed-btn-primary:hover{ transform:rotate(-1deg) translateY(-2px) scale(1.02); }
.sed-btn-ghost{
border:1.5px solid var(--sed-line); color:var(--sed-cream) !important; border-radius:100px;
}
/* Regenbogen-Ticker
Klebt zusammen mit der Navigation: Die Kopfzeile setzt sich bei 0 fest,
das Laufband exakt eine Kopfzeilenhöhe darunter. Damit bleibt die
Reihenfolge Navigation → Laufband beim Scrollen unverändert erhalten und
beide wandern als ein Block mit.
Bewusst hier am Ticker selbst statt über einen gemeinsamen Rahmen um
beide Elemente: Das Laufband steht in den Vorlagen INNERHALB von
.sed-home bzw. .sed-event (auf der Event-Seite mit eigenem, aus Titel und
Datum gebautem Text) und ist dort jeweils das erste Element. Es in die
Kopfzeilen-Funktion zu ziehen, hätte es auf allen übrigen Seiten
(Galerie, Rechtstexte, /tickets/) neu erscheinen lassen, wo es bisher
keins gibt.
z-index knapp unter .sed-nav (1000): Klappt auf schmalen Bildschirmen das
Burger-Menü auf, wächst die Kopfzeile über das Laufband hinweg und soll
es dabei verdecken, nicht darunter durchscheinen lassen. */
.sed-ticker{
background:linear-gradient(90deg, #FF4F3F, #FF9F3F, #FFE93F, #3FF07A, #3FA0F0, #B23FF0, #FF2E7E);
background-size:200% 100%; animation:sed-ticker-hue 12s linear infinite;
color:#1A0806; overflow:hidden; white-space:nowrap;
position:sticky; top:var(--sed-nav-h); z-index:999;
padding:9px 0; font-family:'IBM Plex Mono', monospace; font-weight:700; font-size:13px;
}
@keyframes sed-ticker-hue{ 0%{background-position:0% 0;} 100%{background-position:200% 0;} }
.sed-ticker-track{ display:inline-block; padding-left:100%; animation:sed-scroll-left 42s linear infinite; }
.sed-ticker-track span{ margin:0 28px; }
@keyframes sed-scroll-left{ 0%{transform:translateX(0);} 100%{transform:translateX(-100%);} }
/* Event-Hero-Bereich (auch Basis für die Startseite, siehe .sed-home, für
die /tickets/-Übergangsseite, siehe .sed-tickets, für die
Rechtstext-Seiten, siehe .sed-legal, und für die Wartungsseite, siehe
.sed-maintenance — jeweils weiter unten) */
.sed-event, .sed-home, .sed-tickets, .sed-legal, .sed-maintenance, .sed-404, .sed-contact{ background:var(--sed-bg); color:var(--sed-cream); font-family:'Plus Jakarta Sans', sans-serif; line-height:1.6; }
.sed-wrap{ max-width:1100px; margin:0 auto; padding:0 32px; }
/* padding-bottom auf Desktop reduziert (war 48px) — Teil der Feinjustierung
der rechten Plakat-Spalte (siehe .sed-poster-frame weiter unten): das
Plakat ist per aspect-ratio:3/4 spürbar höher als die linke Textspalte,
wodurch die (durch CSS Grid auf die höhere Spalte gestreckte) Zeile
unterhalb des "Tickets sichern"-Buttons deutlich mehr Leerraum ließ, als
nötig — live gemessen (getBoundingClientRect): Abstand Button→Datum-Box
schrumpfte dadurch von 357px auf 228px bei 1280px Viewport-Breite. Auf
Mobile per Media Query weiter unten bewusst auf die ursprünglichen 48px
zurückgesetzt, siehe dortige Begründung. */
.sed-hero{ position:relative; padding:64px 0 24px; overflow:visible; }
.sed-hero-bg{
position:absolute; inset:-20% -10% auto -10%; height:120%;
background:
radial-gradient(circle at 20% 20%, rgba(255,79,63,0.4), transparent 42%),
radial-gradient(circle at 80% 10%, rgba(255,46,126,0.35), transparent 38%),
radial-gradient(circle at 60% 80%, rgba(63,240,214,0.26), transparent 42%);
z-index:0;
}
/* Event-Detailseite: flache, einfarbige Hero-Fläche statt des mehrfarbigen
Verlaufs oben — NUR body.single-event überschrieben, damit .sed-hero-bg
auf der Startseite (front-page.php nutzt dieselbe Klasse für ihren
eigenen Hero, siehe .sed-home-hero) unangetastet beim bisherigen
Mehrfarb-Verlauf bleibt. Farbwert bewusst identisch zu var(--sed-bg)
(der Hintergrundfarbe von .sed-event selbst) statt z. B.
var(--sed-bg-panel), damit sie nahtlos mit dem übrigen Seitenhintergrund
verschmilzt.
inset/height zusätzlich auf 0/100% zurückgesetzt (Bugfix): Die
Basisregel oben lässt .sed-hero-bg absichtlich über den Hero-Rand
bluten (inset:-20% -10% auto -10%; height:120%) — bei den früheren,
fast komplett transparenten Verlaufs-Blobs unsichtbar, aber bei einer
VOLL DECKENDEN Flächenfarbe reicht dieser Bleed live nachweislich
(Y-Achse gemessen: Box von ca. -178px bis 1124px) bis über den
Ticker (.sed-ticker, 0-38.8px) hinaus nach oben. Da .sed-hero-bg im
DOM später steht als der Ticker und beide im selben Stacking-Kontext
landen (weder .sed-wrap noch .sed-hero spannen einen eigenen auf),
malt sich die Fläche über den Ticker statt dahinter — Ticker wirkt
"unterbrochen". Fix: kein Bleed mehr auf Event-Seiten (inset:0;
height:100% deckt exakt die Fläche von .sed-hero ab, die bereits
oberhalb von .sed-wrap liegende Ticker-Zeile wird geometrisch gar
nicht mehr erreicht). Bei einer FLACHEN, zu ihrer Umgebung
identischen Farbe hat der Bleed ohnehin keinen sichtbaren Zweck mehr
(anders als beim weichen Verlauf-Glow auf der Startseite, dort
bewusst unverändert gelassen) — der Verzicht darauf hat also auch
keine optische Nebenwirkung im Hero-Bereich selbst. */
body.single-event .sed-hero-bg{
background:var(--sed-bg);
inset:0;
height:100%;
}
.sed-hero-grid{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; position:relative; z-index:2; }
.sed-hero h1{ font-size:clamp(38px, 6.4vw, 68px); margin:6px 0 8px; }
.sed-hero .sed-sub-h1{ font-size:clamp(15px, 2.4vw, 26px); color:var(--sed-muted); font-family:'Anton', sans-serif; text-transform:uppercase; margin-bottom:20px; white-space:nowrap; }
.sed-hero p.sed-sub{ font-size:17px; font-weight:600; color:var(--sed-muted); max-width:520px; margin-bottom:30px; }
.sed-hero-top{ display:flex; align-items:center; gap:14px; margin-bottom:16px; }
.sed-live-dot{ width:9px; height:9px; border-radius:50%; background:var(--sed-pink); box-shadow:0 0 0 5px rgba(255,46,126,0.25); animation:sed-pulse-dot 1.4s ease-in-out infinite; }
@keyframes sed-pulse-dot{ 0%,100%{ opacity:1; } 50%{ opacity:0.4; } }
@media (max-width:860px){ .sed-hero-grid{ grid-template-columns:1fr; } }
/* Plakat-Rahmen
Größe bewusst über width:100% + aspect-ratio:3/4 gelöst, NICHT über
einen festen max-height-Wert (wie zuvor: max-height:660px + width:auto)
— width:auto kombiniert mit aspect-ratio ließ die Box in der rechten
Grid-Spalte auf Desktop kleiner rendern, als die Spalte tatsächlich
hergibt (die Höhen-Obergrenze griff, bevor die Spaltenbreite
ausgeschöpft war, dadurch die gemeldete ungenutzte Fläche daneben/
darunter). width:100% füllt dagegen IMMER exakt die verfügbare
Spaltenbreite von .sed-hero-grid (1fr-Spur, durch .sed-wrap
max-width:1100px ohnehin nach oben begrenzt, siehe dortige Regel) —
kein zusätzlicher fester max-width/-height-Wert nötig, die Größe
skaliert dadurch automatisch mit dem tatsächlich verfügbaren Platz statt
mit einer geschätzten Pixelzahl. Da .sed-hero-grid { align-items:start }
nutzt, können beide Spalten unterschiedlich hoch werden (z. B. bei
langen Headlines) — das erzeugt keine Überschneidung, CSS-Grid-Spalten
können sich nicht gegenseitig überlappen. margin-left:auto entfällt,
da die Box bei 100% Breite ohnehin keinen Rand-Spielraum mehr hat.
Feinjustierung: width auf 85% reduziert (war 100%) — bei voller
Spaltenbreite wirkte das Plakat im direkten Vergleich zur linken
Textspalte zu dominant/groß. 85% lokal mit echtem Millennium-Edition-
Inhalt gegen 88%/90%/100% verglichen (Screenshots + gemessene Höhen bei
1280px Breite: 100% → 759px, 90% → 688px, 85% → 653px Plakat-Höhe
gegenüber 440px linker Spalte) — 85% war der niedrigste getestete Wert
aus der vorgegebenen 85–90%-Spanne, reduziert also zugleich den
Höhenüberschuss (und damit den Leerraum vor der Datum-Box, siehe
.sed-hero oben) am stärksten, wirkt dabei aber weiterhin als
eigenständiges, prominentes Plakat statt zu klein. */
.sed-poster-frame{
position:relative; aspect-ratio:3/4; width:85%;
border-radius:4px; border:2px solid var(--sed-cream);
background:var(--sed-grid), linear-gradient(160deg, rgba(255,79,63,0.35), rgba(178,63,240,0.3)), var(--sed-bg-panel);
display:flex; align-items:flex-end; padding:22px; overflow:hidden;
box-shadow:0 24px 50px rgba(0,0,0,0.4); transform:rotate(1deg);
}
.sed-poster-frame img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* Mobile bewusst unverändert gelassen (betrifft nur Desktop, s.o.):
width hier wieder explizit auf auto zurückgesetzt, damit exakt dieselbe
max-height-gesteuerte Größenberechnung wie vor dieser Änderung greift
(.sed-hero-grid bricht ab 860px auf eine Spalte um, die Box stünde ohne
dieses Reset sonst plötzlich auf 85% der vollen Spaltenbreite statt
der bisherigen, kompakteren Größe). padding-bottom von .sed-hero (s.o.)
hier ebenfalls auf den ursprünglichen Wert zurückgesetzt, da die
Desktop-Reduzierung nur die zweispaltige Ansicht betrifft — auf Mobile
liegt das Plakat im normalen Textfluss zwischen Button und Datum-Box,
dort war der bisherige Abstand nicht Teil der Beschwerde. */
@media (max-width:860px){
.sed-poster-frame{ width:auto; max-width:320px; max-height:420px; margin:0 auto; }
.sed-hero{ padding-bottom:48px; }
}
/* Tape-Sticker (DIY-Optik) */
.sed-tape{
position:absolute; background:rgba(255,246,236,0.9); color:#120A17;
font-family:'IBM Plex Mono', monospace; font-weight:700; font-size:10px;
letter-spacing:0.06em; text-transform:uppercase; padding:5px 14px;
box-shadow:1px 2px 6px rgba(0,0,0,0.35); z-index:10; text-align:center;
}
/* Meta-Infos (Datum/Einlass/Location/Preis) */
.sed-meta-row{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:28px; }
.sed-meta-pill{
background:var(--sed-grid), var(--sed-bg-panel); border:1px solid var(--sed-line); border-radius:14px;
padding:12px 18px;
}
.sed-meta-pill .sed-label{ font-size:11px; font-weight:600; color:var(--sed-muted); font-family:'IBM Plex Mono', monospace; letter-spacing:0.05em; text-transform:uppercase; }
.sed-meta-pill .sed-value{ font-size:16px; font-weight:800; margin-top:2px; }
/* Countdown-Widget */
.sed-countdown-wrap{
display:flex; align-items:center; gap:22px; flex-wrap:wrap;
background:var(--sed-grid), var(--sed-bg-panel); border:1px solid var(--sed-line); border-radius:20px;
padding:22px 28px; margin-bottom:28px;
}
.sed-countdown-label{ font-family:'IBM Plex Mono', monospace; font-size:12px; font-weight:600; color:var(--sed-muted); letter-spacing:0.05em; }
.sed-countdown-nums{ display:flex; gap:10px; }
.sed-cd-box{ text-align:center; min-width:58px; }
.sed-cd-box .sed-n{ font-family:'Anton', sans-serif; font-size:30px; color:var(--sed-cyan); }
.sed-cd-box .sed-u{ font-size:10px; color:var(--sed-muted); text-transform:uppercase; letter-spacing:0.08em; }
.sed-hero-actions{ display:flex; gap:14px; flex-wrap:wrap; }
/* Detail-Bereich unterhalb des Hero-Grids (Datum/Einlass-, Location- und
Preis-Boxen sowie die Veranstaltungstext-Box, siehe single-event.php).
Bewusst AUSSERHALB von .sed-hero-grid platziert (eigener Block nach
), nicht innerhalb von .sed-hero-inner: Auf Mobile (Grid bricht
ab 860px auf eine Spalte um, siehe .sed-hero-grid-Regel oben) steht das
Plakat als zweites Grid-Kind sonst NACH dem gesamten Hero-Inner-Inhalt —
läge dieser Block noch in .sed-hero-inner, würde die lange
Veranstaltungstext-Box das Plakat auf Mobile weit nach unten schieben.
Als eigenständiger Block nach dem Grid erscheint er auf Mobile dagegen
sauber NACH dem Plakat (Badge/Headline/Countdown/Button, dann Plakat,
dann diese Detail-Boxen) — auf Desktop bleibt das Plakat unverändert
rechts neben Headline/Countdown/Button stehen. */
.sed-event-details{ padding-top:4px; }
/* Veranstaltungstext-Box: gleicher Karten-Hintergrund/-Radius wie
.sed-meta-pill (Datum/Location-Box), nur mit mehr Innenabstand für
längeren Fließtext. */
.sed-event-text{
background:var(--sed-grid), var(--sed-bg-panel); border:1px solid var(--sed-line); border-radius:14px;
padding:32px 28px; font-size:15px; line-height:1.75; color:var(--sed-cream); margin-bottom:28px;
}
.sed-event-text p{ margin:0 0 20px; }
.sed-event-text p:last-child{ margin-bottom:0; }
/* Sicherheitsnetz gegen versehentlich mitgeschleppte
-Tags in
den WYSIWYG-Feldern (z. B. beim Einfügen von Text aus einer bereits
formatiert dargestellten Quelle wie einer gerenderten Chat-Antwort — der
Rich-Paste übernimmt dabei die HTML-Formatierung inklusive blockquote).
Das Theme stylt blockquote global mit farbigem Rand/Einzug; innerhalb
dieser Box soll ein blockquote optisch nicht von einem normalen Absatz
zu unterscheiden sein. !important nötig, da die Theme-Regel eine
unbekannte Spezifität hat. */
.sed-event-text blockquote{
margin:0 0 20px !important; padding:0 !important; border:0 !important;
background:none !important; color:inherit !important; font:inherit !important;
font-style:normal !important; quotes:none !important;
}
.sed-event-text blockquote:last-child{ margin-bottom:0 !important; }
.sed-event-text blockquote > p{ margin:0 !important; }
/* Intro-Absätze (bis "...wie du bist.") etwas prominenter als der übrige
Fließtext gesetzt, damit der Text erkennbar in Abschnitte gegliedert
wirkt — kein --sed-font-voice im Design-System vorhanden, daher wie im
Auftrag als Fallback vorgesehen über eine leicht größere Schriftgröße
plus etwas mehr Gewicht gelöst, statt einer eigenen Font-Family. */
.sed-event-text-intro p{ font-size:17px; font-weight:600; line-height:1.7; }
/* Floor-Namen farblich an die 4 Floor-Karten der Startseite angelehnt
(.sed-cl1-4 / .sed-floor-note--*, siehe Abschnitt "Startseite" weiter
unten in dieser Datei): Halle=Coral, Club=Cyan, Kneipe=Pink,
Biergarten=Purple — dieselben CSS-Variablen, kein neuer Farbton. Auch
als Titelfarbe der Floor-Karten unten wiederverwendet. */
.sed-text-floor-halle{ color:var(--sed-coral); font-weight:700; }
.sed-text-floor-club{ color:var(--sed-cyan); font-weight:700; }
.sed-text-floor-kneipe{ color:var(--sed-pink); font-weight:700; }
.sed-text-floor-biergarten{ color:var(--sed-purple); font-weight:700; }
/* Floor-Übersicht als kompaktes 2x2-Karten-Raster statt reiner
Fließtext-Zeilen — aus dem Fließtext herausgehoben, damit Genre und
DJ-Namen auf einen Blick erfassbar sind. Eigene, seitenlokale Klassen
(statt der bestehenden .sed-floor-row/-item/-name/-genre von der
Startseiten-Event-Karte): dort ist der Titel einheitlich cremefarben
und das Raster 3-spaltig — beides passt nicht zu den hier geforderten
4 farbcodierten Karten in 2x2, eine Wiederverwendung hätte entweder die
Startseiten-Klassen verändert oder viele Overrides gebraucht. */
.sed-event-text-floors{
display:grid; grid-template-columns:1fr 1fr; gap:14px;
margin:20px 0;
}
.sed-event-text-floor-card{
background:rgba(255,246,236,0.03); border:1px solid var(--sed-line); border-radius:10px;
padding:18px 18px 16px;
}
/* Schriftgrößen gegenüber der ersten Version spürbar angehoben (15/13/10.5px
waren in der Karte kaum lesbar) — Karten-Padding leicht erhöht, damit der
größere Text nicht beengt wirkt; 2x2-Raster bleibt bis 480px erhalten
(Breakpoint unverändert, s.u.), Anton ist als schmale Display-Schrift auch
bei "BIERGARTEN" bei dieser Größe noch problemlos einspaltig lesbar. */
.sed-event-text-floor-name{
font-family:'Anton', sans-serif; font-size:19px; text-transform:uppercase; letter-spacing:0.01em; margin-bottom:5px;
}
.sed-event-text-floor-genre{ font-size:15px; font-weight:600; color:var(--sed-muted); margin-bottom:4px; line-height:1.3; }
.sed-event-text-floor-dj{
font-family:'IBM Plex Mono', monospace; font-size:12px; color:rgba(199,180,206,0.65);
text-transform:uppercase; letter-spacing:0.03em; line-height:1.4;
}
/* Schlusssatz ("Wir sehen uns am 26. September.") optisch abgesetzt: der
Zeilenumbruch davor kommt aus einem im Template (siehe
single-event.php), diese Klasse sitzt auf dem danach folgenden
und ergänzt Trennlinie + dieselbe prominentere Typografie wie
.sed-event-text-intro. display:inline-block statt block, damit
border-top nur über die Breite des Satzes selbst läuft (schmale,
editorial wirkende Linie) statt über die volle Boxbreite. */
.sed-event-text-signoff{
display:inline-block; margin-top:16px; padding-top:14px; border-top:1px solid var(--sed-line);
font-size:17px; font-weight:600;
}
@media (max-width:600px){
.sed-event-text{ padding:24px 20px; font-size:14.5px; }
.sed-event-text-intro p{ font-size:16px; }
.sed-event-text-signoff{ font-size:16px; }
}
@media (max-width:480px){
.sed-event-text-floors{ grid-template-columns:1fr; }
}
/* ==========================================================================
Startseite (front-page.php)
========================================================================== */
/* Hero-Titelbild: volle Breite, festes Standbild als dauerhafter Fallback
unter/hinter dem Hero-Video (siehe .sed-hero-video). min-height zusätzlich
zu aspect-ratio, damit auch bei schmaleren Seitenverhältnissen (Mobile)
genug Raum für das Text-Overlay bleibt, ohne dass etwas abgeschnitten
wirkt. Reduzierte Höhe auf kleinen Screens, damit der "Tickets
sichern"-Button auf dem Smartphone nicht zu weit unten landet. */
.sed-hero-image{
width:100%; aspect-ratio:16/9; min-height:460px; border-radius:8px; overflow:hidden;
margin-bottom:32px; border:2px solid var(--sed-line); position:relative; z-index:2;
}
.sed-hero-image img{ width:100%; height:100%; object-fit:cover; display:block; }
/* Hero-Hintergrundvideo (Desktop UND Mobile, wird per hero-video.js
erzeugt und eingefügt): liegt exakt wie das Bild an, object-fit:cover
für dieselbe Ausfüllung/Positionierung auf jeder Breite. Startet
unsichtbar (opacity:0) und wird erst eingeblendet, sobald hero-video.js
das Video für bereit hält (.is-loaded — siehe dort für die Trigger:
'loadeddata', 'playing' oder Timeout-Fallback), damit bis dahin
weiterhin das statische Bild darunter sichtbar bleibt. z-index zwischen
Bild (static, unten) und Scrim (z-index:1, oben) einsortiert. */
.sed-hero-video{
position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
z-index:0; opacity:0; transition:opacity 0.4s ease;
}
.sed-hero-video.is-loaded{ opacity:1; }
/* Dunkler Verlauf über dem gesamten Titelbild, damit der helle Text-Overlay
unabhängig vom Bildinhalt (hell oder dunkel) immer gut lesbar bleibt. */
.sed-hero-image-scrim{
position:absolute; inset:0; z-index:1; pointer-events:none;
background:linear-gradient(180deg, transparent 0%, rgba(18,10,23,0.35) 45%, rgba(18,10,23,0.9) 100%);
}
/* Text-Overlay: liegt unten links auf dem Titelbild/-video statt danach
im Fließtext. */
.sed-hero-image-text{
position:absolute; left:0; right:0; bottom:0; z-index:2;
padding:28px 32px 32px;
}
@media (max-width:860px){
.sed-hero-image{ aspect-ratio:21/9; min-height:420px; margin-bottom:20px; }
.sed-hero-image-text{ padding:22px 24px 26px; }
.sed-home-hero .sed-hero-image-text .sed-home-statement{ font-size:clamp(34px, 7vw, 70px); margin:8px 0 10px; }
.sed-home-hero .sed-hero-image-text p.sed-sub{ margin-bottom:0; }
}
@media (max-width:600px){
.sed-hero-image{ aspect-ratio:16/7; min-height:400px; margin-bottom:16px; }
.sed-hero-image-text{ padding:18px 18px 22px; }
.sed-home-hero .sed-hero-image-text .sed-home-statement{ font-size:clamp(28px, 9vw, 48px); margin:6px 0 8px; }
.sed-home-hero .sed-hero-image-text p.sed-sub{ font-size:14px; margin-bottom:0; }
}
/* Hero-Statement ("Sei schamlos." / "Ohne Kompromisse.")
Selektor bewusst mit .sed-home-hero-Präfix statt nur .sed-home-statement:
.sed-hero h1 (Event-Detailseite-Regel, siehe oben) hat sonst durch den
zusätzlichen Tag-Selektor höhere Spezifität und würde die hier gesetzte
Schriftgröße auf der Startseite überschreiben, da unser h1 ebenfalls
innerhalb von .sed-hero verschachtelt ist (gemeinsame Hero-Basiskomponente).
Margin bewusst kompakter als früher (10px/14px statt 14px/26px), da das
Statement jetzt als Overlay auf dem Titelbild sitzt statt freistehend.
"Ohne Kompromisse." ist EIN (beide Wörter gehören zum zweiten
Satz und sollen komplett pink sein) — der Extra-Abstand zum ersten Satz
kommt über margin-top auf genau dieses Element, ohne den (engen)
Wortabstand innerhalb von "Ohne Kompromisse." selbst zu beeinflussen,
da das nur ein einziger Textlauf ist. */
.sed-home-hero .sed-home-statement{ font-size:clamp(44px, 9vw, 108px); line-height:0.96; margin:10px 0 14px; }
.sed-home-statement span{ display:block; }
.sed-home-statement .sed-accent{ color:var(--sed-pink) !important; margin-top:0.25em; }
.sed-home-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-top:4px; }
/* Countdown-Label auf der Startseite an die Button-Schriftgröße (.sed-btn:
font-size:15px) angleichen — wirkte sichtbar kleiner als "Tickets sichern".
Kontextspezifisch über .sed-home-hero skaliert, damit die Event-
Detailseite (nutzt dieselbe .sed-countdown-label-Klasse) unverändert
bei 12px bleibt. */
.sed-home-hero .sed-countdown-label{ font-size:15px; }
/* Non-breaking Space zwischen "Jahre" und "Schamlos" im Template
verhindert bereits, dass "Schamlos" isoliert auf einer eigenen Zeile
landet. Auf sehr schmalen Screens zusätzlich etwas kleiner, damit der
gesamte Text insgesamt komfortabler umbricht. */
@media (max-width:400px){ .sed-home-hero .sed-countdown-label{ font-size:13px; } }
/* Gezielter 3-zeiliger Umbruch NUR auf Mobile ("Countdown" / "Millennium
Edition -" / "20 Jahre Schamlos") über zwei
im Template — auf Desktop per display:none unsichtbar (Text bleibt dort
einzeilig, br erzeugt dann keinen Umbruch), ab 600px per display:block
sichtbar und erzwingt den Zeilenumbruch an genau dieser Stelle. Die
Leerzeichen direkt nach jedem im Template sorgen dafür, dass auf
Desktop trotzdem ein normaler Wortabstand steht (br selbst fügt keinen
Leerraum ein) — am Zeilenanfang auf Mobile wird dieses Leerzeichen von
allen gängigen Browsern automatisch ignoriert. */
.sed-countdown-label .sed-mobile-break{ display:none; }
@media (max-width:600px){
.sed-countdown-label .sed-mobile-break{ display:block; }
}
/* Mehr Weißraum zwischen Label und Countdown-Zahlen, UND der rechte Rand
der Zahlengruppe näher am rechten Rand des Headline-Texts ("Ohne
Kompromisse.") statt am Kartenrand. Live vermessen bei 1280px: der
Headline-Text endet bei ca. 82,9% der Kartenbreite — zusätzliches
padding-right von ~17% (statt der bisherigen festen 28px) auf die
Karte zieht den verfügbaren Innenraum entsprechend zusammen; Prozent
statt fixer px, weil H1-Schriftgröße UND Kartenbreite im "fluiden"
Bereich des H1-clamp() beide mit der Viewport-Breite mitskalieren
(9vw) und ein Prozentwert dieses Verhältnis über mehrere Breakpoints
robuster abbildet als ein fixer Pixelwert.
WICHTIG: margin-left:auto auf .sed-countdown-nums selbst (statt nur
justify-content:space-between auf dem Wrap) — Grund: das Label ist
lang ("Countdown Millennium Edition - 20 Jahre Schamlos") und bricht
bei schmaleren Breiten (z. B. Tablet 768px) auf eine eigene Zeile um;
bei space-between richtet sich ein EINZELNES Element auf seiner Zeile
per CSS-Spezifikation aber links aus (kein "between" ohne zweites
Element) — das riss die Zahlengruppe beim Live-Test auf Tablet nach
links. margin-left:auto auf das Element selbst funktioniert dagegen
zuverlässig rechtsbündig, ob mit Label auf einer Zeile oder alleine
auf der zweiten. Keine hundertprozentige Fluchtlinie bei jeder
Fensterbreite garantiert (abweichende vw-Faktoren im mobilen
H1-clamp()), aber spürbar näher an der Headline als vorher. */
.sed-home-hero .sed-countdown-wrap{ padding-right:17%; }
.sed-home-hero .sed-countdown-nums{ margin-left:auto; }
/* Die 17%-Näherung passt gut im Desktop-Fluidbereich (H1 clamp() mit
9vw), aber die H1-Regel wechselt unterhalb 860px auf eine ANDERE
Formel (clamp(34px, 7vw, 70px) bzw. clamp(28px, 9vw, 48px) ab 600px,
siehe .sed-hero-image-text-Media-Queries weiter oben) — die Headline
nimmt dort proportional WENIGER Breite ein. Live am Tablet-Breakpoint
(768px) geprüft: mit den 17% ragte die Zahlengruppe sichtbar über den
Headline-Rand hinaus; 36% bringt sie wieder in dieselbe Nähe wie am
Desktop. */
@media (max-width:860px){
.sed-home-hero .sed-countdown-wrap{ padding-right:36%; }
}
/* Social-Proof-Zeile unter den Hero-CTAs */
.sed-social-proof{
display:flex; justify-content:center; gap:36px; flex-wrap:wrap; margin-top:44px; padding-top:28px;
border-top:1px solid var(--sed-line);
}
.sed-social-proof-item{ font-family:'IBM Plex Mono', monospace; font-size:13px; font-weight:600; color:var(--sed-muted); max-width:180px; text-align:center; }
.sed-social-proof-item strong{
display:block; font-family:'Anton', sans-serif; font-size:28px; font-weight:400;
color:var(--sed-cyan); text-transform:uppercase; letter-spacing:-0.01em; margin-bottom:2px;
}
/* Abschnitt "Die Floors": 4 rotierte, überlappende Farbflächen als
Foto-Platzhalter (eigenständiger Abschnitt, nicht mehr im Hero — siehe
front-page.php). Werte 1:1 aus dem Mockup übernommen. Größerer Abstand
zur Headline als bei den anderen Section-Heads: .sed-section-head hat
bereits margin-bottom:44px — zwei benachbarte Block-Margins (dieses
margin-bottom UND ein margin-top auf .sed-collage) collapsen in CSS
aber zum GRÖSSEREN der beiden Werte, statt sich zu addieren. Ein
kleinerer margin-top (z. B. 32px) hätte also gar keine sichtbare
Wirkung gehabt — deshalb hier bewusst 80px, klar über den 44px, damit
der Abstand tatsächlich wächst. */
.sed-floors{ padding:56px 0 64px; }
.sed-floors .sed-collage{ margin-top:80px; }
.sed-collage{ position:relative; height:440px; }
.sed-collage-item{
position:absolute; border-radius:4px; border:2px solid var(--sed-cream);
display:flex; align-items:flex-end; padding:12px; overflow:hidden;
}
/* Rahmenfarbe je Karte auf die eigene Akzentfarbe umgestellt (statt
einheitlich Creme), damit jede Karte auch nach Foto-Upload klar ihrer
Farbfamilie zuordenbar bleibt — dieselben Akzentfarben wie bei den
Why-Cards (.sed-why-coral/-cyan/-pink/-purple). */
.sed-cl1{ width:36%; height:250px; left:-2%; top:6px; background:linear-gradient(150deg,#FF4F3F,#3d0f0a); border-color:var(--sed-coral); transform:rotate(-7deg); z-index:3; }
.sed-cl2{ width:32%; height:200px; left:26%; top:150px; background:linear-gradient(150deg,#3FF0D6,#0c332e); border-color:var(--sed-cyan); transform:rotate(6deg); z-index:2; }
.sed-cl3{ width:30%; height:240px; left:52%; top:-14px; background:linear-gradient(150deg,#FF2E7E,#3a0a20); border-color:var(--sed-pink); transform:rotate(-4deg); z-index:4; }
.sed-cl4{ width:28%; height:180px; left:73%; top:210px; background:linear-gradient(150deg,#8c6bff,#20153f); border-color:var(--sed-purple); transform:rotate(9deg); z-index:1; }
/* Foto füllt die Karte, sobald im ACF-Feld hinterlegt (siehe
sed_get_floor_image_url() in schamlos-event-design.php); der
Farbverlauf der jeweiligen .sed-cl1-4-Klasse bleibt als Hintergrund
erhalten und ist damit automatisch der Fallback, solange kein Bild
gesetzt ist. Scrim sorgt für Label-Kontrast auf echten Fotos. */
.sed-collage-photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.sed-collage-scrim{
position:absolute; inset:0; z-index:1; pointer-events:none;
background:linear-gradient(180deg, transparent 40%, rgba(18,10,23,0.85) 100%);
}
.sed-collage-image-placeholder{
position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:1;
font-family:'IBM Plex Mono', monospace; font-size:11px; font-weight:600;
letter-spacing:0.06em; text-transform:uppercase; color:var(--sed-cream); opacity:0.7;
white-space:nowrap;
}
.sed-collage-label{
position:relative; z-index:2;
font-family:'IBM Plex Mono', monospace; font-size:11px; font-weight:600;
color:var(--sed-cream); text-transform:uppercase; letter-spacing:0.04em;
}
/* Je Karte eine eigene handschriftliche Notiz — echte Handschrift-Optik
(.sed-marker: Permanent Marker, kursiv) statt der vorherigen soliden
Tape-Box, nur der Text selbst in der jeweiligen Akzentfarbe der Kachel,
kein Hintergrundkasten mehr. Halle/Kneipe bleiben oberhalb ihrer Karte
(dort ist Platz); Club/Biergarten sitzen UNTERHALB ihrer Karte, damit
sie nicht mit der jeweils überlappenden Nachbarkarte kollidieren:
Club-Karte (cl2) endet bei top 150px + height 200px = 350px, Biergarten
(cl4) bei top 210px + height 180px = 390px — beide Notizen starten
knapp darunter. */
.sed-collage-note{ position:absolute; z-index:5; font-size:18px; line-height:1.25; max-width:210px; }
.sed-floor-note--halle{ top:-14px; left:-2%; transform:rotate(-6deg); color:var(--sed-coral); }
.sed-floor-note--club{ top:358px; left:26%; transform:rotate(5deg); color:var(--sed-cyan); }
.sed-floor-note--kneipe{ top:-34px; left:52%; transform:rotate(-4deg); color:var(--sed-pink); }
.sed-floor-note--biergarten{ top:398px; left:73%; transform:rotate(7deg); color:var(--sed-purple); }
@media (max-width:860px){ .sed-collage{ height:340px; margin-top:8px; } }
/* Auf schmalen Mobile-Breiten funktioniert die diagonale, überlappende
Foto-Collage nicht — Karten und Notizen verdecken sich gegenseitig.
Ab hier stattdessen ein gerader, senkrechter Stapel ohne Rotation.
.sed-collage-item bleibt bewusst position:relative (nicht static),
damit es weiterhin als Containing Block für sein eigenes Foto/Scrim/
Platzhalter (position:absolute; inset:0) funktioniert — nur die
Positionierung RELATIV ZUR COLLAGE (top/left/rotate) wird entfernt.
Die handschriftlichen Notizen liegen dank der bestehenden Dokument-
Reihenfolge (Karte, dann ihre Notiz, dann die nächste Karte, ...) im
Template bereits automatisch direkt nach der passenden Karte —
position:static reicht, keine Umsortierung im PHP nötig. Das behebt
nebenbei auch die Kollision der Biergarten-Notiz mit dem "Nicht
verpassen"-Badge der darunterliegenden Event-Karte: als normales
Blockelement im Dokumentfluss kann nichts mehr absolut in die nächste
Sektion hineinragen. */
@media (max-width:600px){
.sed-collage{ height:auto; }
.sed-collage-item,
.sed-cl1, .sed-cl2, .sed-cl3, .sed-cl4{
position:relative; width:100%; height:220px; left:0; top:0; transform:none;
}
.sed-collage-note{
position:static; display:block; max-width:none; transform:none;
margin:10px 0 28px;
}
}
/* Pitch-Strip: dreispaltige Kernaussagen-Zeile direkt unter dem Hero */
.sed-pitch-strip{ border-top:1px solid var(--sed-line); padding:26px 0; }
.sed-pitch-strip-inner{ display:flex; flex-wrap:wrap; }
/* Die drei Sätze stehen mittig in ihrer Spalte, nicht mehr linksbündig:
justify-content zentriert den Satz als Ganzes in der Spalte,
text-align:center fängt den Fall ab, dass er auf zwei Zeilen umbricht.
Alle drei Spalten haben denselben Innenabstand (0 28px). Früher stand
hier zusätzlich padding-left:0 auf der ersten und padding-right:0 auf
der letzten Spalte — sinnvoll, solange der Text LINKSBÜNDIG war (so
begann der erste Satz bündig mit dem Seitenraster). Mit der Zentrierung
kehrt sich das ins Gegenteil: justify-content zentriert im INHALTS-
kasten, und der saß bei den äußeren Spalten um die fehlenden 28px
versetzt zur sichtbaren Zelle. Nachgemessen waren die beiden äußeren
Sätze dadurch 29px bzw. 28px aus der Mitte, nur der mittlere stimmte.
Deshalb sind die beiden Ausnahmen weg — bis auf border-right:none, das
die Trennlinie hinter der letzten Spalte weiterhin unterdrückt. */
.sed-pitch-item{
flex:1 1 0; min-width:220px; padding:0 28px;
display:flex; align-items:baseline; justify-content:center; gap:10px;
border-right:1px solid var(--sed-line); text-align:center;
}
.sed-pitch-item:last-child{ border-right:none; }
.sed-pitch-text{ font-size:14px; font-weight:600; color:var(--sed-muted); }
@media (max-width:760px){
.sed-pitch-item{ flex:1 1 100%; border-right:none; border-bottom:1px solid var(--sed-line); padding:14px 0; }
.sed-pitch-item:last-child{ border-bottom:none; }
}
/* Nächstes-Event-Card (Abschnitt 2) */
.sed-next-event{ padding:64px 0 88px; }
.sed-next-event-card{
background:var(--sed-grid), var(--sed-bg-panel); border:1px solid var(--sed-line); border-radius:24px;
padding:40px; display:grid; grid-template-columns:1fr auto; gap:32px; align-items:center;
position:relative;
}
.sed-next-event-card h2{ font-size:clamp(28px, 4vw, 44px); margin:6px 0 4px; }
/* Größerer Abstand unter der Unterzeile (.sed-sub-h1) als auf der
Event-Detailseite — kontextspezifisch über den Karten-Selektor gelöst,
ohne die Regel .sed-hero .sed-sub-h1 (Event-Detailseite) anzufassen. */
.sed-next-event-card .sed-sub-h1{
font-size:clamp(15px, 2.4vw, 26px); color:var(--sed-muted); font-family:'Anton', sans-serif;
text-transform:uppercase; margin-bottom:28px; white-space:nowrap;
}
.sed-next-event-cta{ flex-shrink:0; }
.sed-next-event-empty{
text-align:center; padding:60px 20px; color:var(--sed-muted);
font-family:'IBM Plex Mono', monospace; font-size:14px;
background:var(--sed-grid), var(--sed-bg-panel); border:1px dashed var(--sed-line); border-radius:24px;
}
/* Floor-Row innerhalb der Event-Card (verschachtelt in .sed-next-event-info) */
.sed-floor-row{ display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; margin-top:20px; }
.sed-floor-item{ background:var(--sed-grid), rgba(255,246,236,0.03); border:1px solid var(--sed-line); border-radius:10px; padding:12px 14px; }
.sed-floor-name{ font-family:'Anton', sans-serif; font-size:15px; text-transform:uppercase; color:var(--sed-cream); }
.sed-floor-genre{ font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--sed-muted); margin-top:2px; }
/* Genre-Text und DJ-Namen sind zwei statt eines durchgehenden
Strings — auf Desktop bleiben sie inline (Standard-span-Verhalten,
unverändertes Umbruchverhalten wie bisher), erst ab 600px erzwingt
display:block auf .sed-floor-genre-artists einen sauberen, immer
gleichen Umbruch vor "mit [DJ-Name(n)]". */
@media (max-width:600px){
.sed-floor-genre-artists{ display:block; margin-top:2px; }
}
.sed-next-event-tape{ position:absolute; top:-12px; left:32px; transform:rotate(-5deg); z-index:5; }
.sed-next-event-marker{ position:absolute; top:-30px; right:32px; z-index:5; transform:rotate(-3deg); color:var(--sed-pink); font-size:16px; }
@media (max-width:760px){
.sed-next-event-card{ grid-template-columns:1fr; text-align:center; }
.sed-social-proof{ gap:24px; }
.sed-floor-row{ grid-template-columns:1fr; }
.sed-next-event-marker{ right:50%; transform:translateX(50%) rotate(-3deg); }
}
/* Rotations-Utilities für den DIY-Look (Stat-Boxen, Why-Cards, Partner-Strip) */
.sed-rotate-1{ transform:rotate(-2deg); }
.sed-rotate-2{ transform:rotate(1.5deg); }
.sed-rotate-3{ transform:rotate(-1deg); }
.sed-rotate-4{ transform:rotate(2deg); }
/* Wiederverwendbarer, zentrierter Section-Head (Eyebrow + Überschrift) */
.sed-section-head{ text-align:center; max-width:640px; margin:0 auto 44px; }
.sed-section-head h2{ margin:8px 0 0; font-size:clamp(30px, 4.5vw, 48px); }
/* Abschnitt 3: Story ("Mehr als eine Party") */
.sed-story{ padding:64px 0; }
.sed-story-grid{ display:grid; grid-template-columns:1.2fr 1fr; gap:56px; align-items:start; }
.sed-story-text h2{ margin:8px 0 18px; font-size:clamp(30px, 4.5vw, 48px); }
.sed-pull-quote{
margin:28px 0 0; padding-left:20px; border-left:3px solid var(--sed-pink);
font-size:19px; font-style:italic; color:var(--sed-cream); line-height:1.5;
}
.sed-stat-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.sed-stat-box{
background:var(--sed-grid), var(--sed-bg-panel); border:1px solid var(--sed-line); border-radius:16px;
padding:26px 20px; text-align:center;
}
.sed-stat-num{ font-family:'Anton', sans-serif; font-size:clamp(30px, 4vw, 44px); color:var(--sed-cyan); line-height:1; margin-bottom:8px; }
.sed-stat-label{ font-family:'IBM Plex Mono', monospace; font-size:11px; font-weight:600; color:var(--sed-muted); text-transform:uppercase; letter-spacing:0.05em; }
@media (max-width:860px){ .sed-story-grid{ grid-template-columns:1fr; } }
/* Abschnitt 4: Warum dabei sein.
Karten enthalten jetzt nur noch eine kurze Headline (keine Nummer, kein
Subtext mehr) — display:flex + align-items:center zentriert die
Headline vertikal in der Karte. Gleiche Kartenhöhe trotz
unterschiedlich langer Texte kommt automatisch vom umgebenden CSS-Grid
(.sed-why-grid): Grid-Items strecken sich per Default auf die Höhe des
höchsten Items in der Zeile (align-items:stretch), die längste Karte
(aktuell "Günstiger kommst du an kein Bier...") bestimmt also die Höhe
für alle vier. Padding und Schriftgröße gegenüber vorher leicht erhöht,
damit die jetzt textärmeren Karten nicht zu leer wirken (live geprüft). */
.sed-why{ padding:64px 0; }
.sed-why-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:24px; }
.sed-why-card{
background:var(--sed-grid), var(--sed-bg-panel); border:1px solid var(--sed-line);
border-left:3px solid var(--sed-coral); border-radius:4px 18px 4px 18px; padding:34px 26px;
display:flex; align-items:center;
}
/* Textfarbe auf dasselbe Pink wie die Hero-Headline ("Ohne Kompromisse.")
umgestellt — dieselbe Variable var(--sed-pink), kein neuer Ton. Der
linke Akzentrand (Coral/Cyan/Pink/Purple je Karte) bleibt unverändert,
da border-left-color über die separaten .sed-why-coral/-cyan/-pink/
-purple-Klassen gesetzt wird, hier nicht angefasst. Selektor bewusst
mit .sed-why-Präfix (2 Klassen + Tag) statt nur .sed-why-card h3,
damit die Regel zuverlässig gegen den globalen Theme-Override-Schutz
(.sed-home h3{ color:var(--sed-cream) !important }) gewinnt, statt sich
auf die Reihenfolge im Stylesheet zu verlassen. */
.sed-why .sed-why-card h3{ font-size:24px; line-height:1.3; margin:0; color:var(--sed-pink) !important; }
.sed-why-coral{ border-left-color:var(--sed-coral); }
.sed-why-cyan{ border-left-color:var(--sed-cyan); }
.sed-why-pink{ border-left-color:var(--sed-pink); }
.sed-why-purple{ border-left-color:var(--sed-purple); }
@media (max-width:960px){ .sed-why-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .sed-why-grid{ grid-template-columns:1fr; } }
/* Abschnitt 5: Galerie-Teaser (Platzhalter-Karten im Plakat-Rahmen-Stil) */
.sed-gallery{ padding:64px 0; }
/* Instagram/Facebook mittig zwischen Headline und Kacheln, mit Abstand zu
beiden Seiten. Diese Klasse regelt NUR Ausrichtung und Außenabstand der
Leiste — wie die Knöpfe selbst aussehen, steht bei .sed-social-pill und
gilt seitenweit gleich. Bis 08/2026 standen hier nackte 44px-Icons ohne
Beschriftung; ein Icon allein sagt aber nicht, wohin es führt. Die
Kontaktseite hatte die Pille bereits, sie ist jetzt der Standard. */
.sed-gallery-social{ display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin:36px 0 40px; }
.sed-gallery-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; }
.sed-gallery-card{
aspect-ratio:3/4; border-radius:4px; border:2px solid var(--sed-line); position:relative; overflow:hidden;
background:var(--sed-grid), linear-gradient(160deg, rgba(255,79,63,0.35), rgba(178,63,240,0.3)), var(--sed-bg-panel);
display:flex; align-items:flex-end; padding:16px; text-decoration:none; color:inherit;
transition:border-color 0.18s ease, transform 0.18s ease;
}
/* Überfahr-Zustand bewusst identisch zu den Zeilen der Galerie-Übersicht
(.sed-gal-row in gallery.css): rosa Rand, zwei Pixel anheben, Foto zieht
leicht an. Beide führen an dasselbe Ziel — sie sollten sich auch gleich
anfühlen. Bis 08/2026 hatten die Kacheln gar keinen Überfahr-Zustand;
dass sie überhaupt anklickbar sind, war nur am Zeiger zu erkennen. */
.sed-gallery-card:hover{
border-color:rgba(255,46,126,0.55); transform:translateY(-2px);
}
.sed-gallery-card:hover .sed-gallery-photo{ transform:scale(1.04); }
/* Vier leicht unterschiedliche Verläufe (Coral/Pink, Cyan/Purple, Pink/Purple,
Coral/Cyan) statt eines identischen Gradients, damit die Platzhalter-Karten
optisch auseinanderzuhalten sind, in Anlehnung an die Why-Card-Akzentfarben.
:nth-child zählt nach Position, nicht nach Tag — greift also unverändert,
ob die Kachel als (mit Link) oder