/* ========================================================================== * NEUES REDESIGN — PRESSESEITE, Scope `live80-v2` * -------------------------------------------------------------------------- * 🔴 ERZEUGTE DATEI — NICHT VON HAND AENDERN. * Quelle : exports/wp-builds/live80-v2/presse/presse-extra.css * Bauweg : python exports/wp-builds/live80-v2/presse/scope-css-presse.py * * ERGAENZUNG zu live80-v2.css, kein Ersatz. Hero-Grundform, Kopf- und * Fusszeile, Sektionskopf, Knoepfe, Reveal und Toast stehen dort und werden * auf jeder `_live80_v2`-Seite geladen — auch hier. * * Teil 1 = das Pressekapitel (Hero-Abwandlung, Formularkarte, Fluent Forms) * Teil 2 = die WordPress-Bruecke * ========================================================================== */ /* ---------- Teil 1: Pressekapitel ---------- */ /* ========================================================================== * PRESSESEITE — eigenes Kapitel (Quelle, UNGESCOPT) * -------------------------------------------------------------------------- * 🔴 Diese Datei ist die QUELLE und steht bewusst OHNE `.live80-v2`-Praefix. * Gescopt wird maschinell von `scope-css-presse.py`. * * Warum nicht handgeschrieben gescopt wie die Eventkapitel: genau daraus ist * am 2026-08-07 die doppelte Scopung entstanden (`.live80-v2 .live80-v2 X` * greift NIE, weil die Klasse genau einmal am haengt) — Peter * Illmanns Portraet lief dadurch auf drei Seiten von 74x74 auf 920x500 px * auf. Der Scoper ist zwar seither idempotent, aber die Fehlerquelle * verschwindet ganz, wenn die Quelle gar keinen Praefix traegt. * → Checkliste 305 * * Die Presseseite braucht KEIN Eventkapitel: sie hat weder Hero-Kulisse noch * Line-up, Countdown, Stadion oder Ticket-Abriss. Alles, was sie benutzt * (Hero-Grundform, Kopf-/Fusszeile, Sektionskopf, Knoepfe, Reveal), steht * bereits in `live80-v2.css` und wird auf jeder `_live80_v2`-Seite geladen. * Hier steht nur, was es NUR auf der Presseseite gibt: * 1. Hero-Abwandlung (niedriger, laengere Ueberschrift) * 2. Die Formularkarte * 3. Fluent Forms im Look des Redesigns * ========================================================================== */ /* --------------------------------------------------------------------------- 1. HERO --------------------------------------------------------------------------- Der Startseiten-Hero ist mit `min-height:min(94svh,880px)` eine volle Bildschirmseite. Das ist auf einer Formularseite falsch: der Besucher kommt mit EINER Absicht (Anfrage stellen) und muesste erst an einer Bildwand vorbeiscrollen. Deshalb rund zwei Drittel — gross genug, dass der Look traegt, klein genug, dass das Formular am Desktop im ersten Scrollschritt erreichbar ist (gemessen, siehe Doku). --------------------------------------------------------------------------- */ .live80-v2 .presse-hero{min-height:min(66svh,600px);padding-block:var(--s8) var(--s8)} /* „PRESSE- / AKKREDITIERUNG" ist deutlich laenger als „DIE GRÖSSTE 80ER PARTY DER WELT" pro Zeile. `--fs-4xl` waere bei 1920 px zu breit fuer die Satzbreite und braeche das zweite Wort um. ⚠️ Eigene Rampe statt eines festen Wertes — fluide Typografie ist Hub-Regel. */ .live80-v2 .presse-hero .hero-title{font-size:clamp(34px,5.4vw,86px)} /* Das Logo darf kleiner sein: es ist hier Absender, nicht Hauptmotiv. */ .live80-v2 .presse-hero .hero-logo{width:min(52vw,300px)} .live80-v2 .presse-eyebrow{color:var(--c-cyan);margin:0} /* Vorspann unter der Ueberschrift. `.lead` bringt Farbe und Zeilenhoehe mit, hier nur die Satzbreite — ohne sie laeuft der Satz bei 1920 px auf eine einzige sehr lange Zeile. */ .live80-v2 .presse-hero .presse-sub{max-width:56ch;margin:0 auto} /* --------------------------------------------------------------------------- 2. FORMULARSEKTION --------------------------------------------------------------------------- */ .live80-v2 .presse-sec{padding-block:var(--s8) var(--s9)} /* Die Karte. Gleiche Bauart wie die uebrigen dunklen Flaechen des Redesigns (`--c-card`, `--c-line`), plus die Neon-Zierlinie oben, die im Rest der Site Sektionsflaechen einleitet. ⚠️ `overflow:hidden` wegen der Zierlinie: sie sitzt auf der Kante und wuerde sonst ueber die abgerundete Ecke hinauslaufen. */ .live80-v2 .presse-card{ position:relative;overflow:hidden; max-width:760px;margin-inline:auto; background:var(--c-card); border:1px solid var(--c-line); border-radius:var(--r-md); padding:clamp(20px,3.4vw,44px); box-shadow:0 24px 60px rgba(var(--c-shadow-deep),.45)} .live80-v2 .presse-card::before{ content:"";position:absolute;left:0;right:0;top:0;height:3px; background:linear-gradient(90deg,var(--c-pink),var(--c-cyan)); box-shadow:var(--glow-pink)} /* --------------------------------------------------------------------------- 3. FLUENT FORMS --------------------------------------------------------------------------- 🔴 Bewusst NICHT `.dwd-ffform` weiterverwenden. Die Regeln dort (dwd.css, 2026er Dark-Look) arbeiten mit `!important` auf dem Absendeknopf; zwei konkurrierende Regelsaetze auf demselben Formular waeren ein Kampf, den man nur mit weiteren `!important` gewinnt. Die Presseseite bekommt deshalb einen eigenen Wrapper `.presse-form`, und die alten Regeln greifen gar nicht erst. ⚠️ Damit werden `.dwd-ffform`, `.dwd-presseanfragen-intro`, `.dwd-presse-*` in dwd.css gegenstandslos — sie bleiben stehen (kein Eingriff in die Datei, die die sieben Altseiten versorgt) und sind in der Doku als Aufraeumpunkt vermerkt. --------------------------------------------------------------------------- */ .live80-v2 .presse-form .ff-el-group{margin-bottom:var(--s5)} .live80-v2 .presse-form .ff-el-group:last-child{margin-bottom:0} /* Beschriftungen */ .live80-v2 .presse-form .ff-el-input--label label{ color:#fff;font-family:'Core Sans M','Asap',sans-serif; font-size:var(--fs-sm);letter-spacing:.06em;font-weight:600;margin-bottom:var(--s2);display:inline-block} .live80-v2 .presse-form .ff-el-is-required label::after,.live80-v2 .presse-form .ff-el-input--label.ff-el-is-required label::after{color:var(--c-pink-soft)} /* Eingabefelder */ .live80-v2 .presse-form input[type=text],.live80-v2 .presse-form input[type=email],.live80-v2 .presse-form input[type=tel],.live80-v2 .presse-form input[type=url],.live80-v2 .presse-form input[type=number],.live80-v2 .presse-form textarea{ width:100%;box-sizing:border-box; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.3); border-radius:var(--r-sm); color:#fff;font-family:'Asap',sans-serif;font-size:var(--fs-md); padding:.72em .95em; transition:border-color .2s var(--ease),box-shadow .2s var(--ease),background-color .2s var(--ease)} .live80-v2 .presse-form textarea{min-height:150px;resize:vertical} .live80-v2 .presse-form input::placeholder,.live80-v2 .presse-form textarea::placeholder{color:rgba(255,255,255,.45)} .live80-v2 .presse-form input[type=text]:hover,.live80-v2 .presse-form input[type=email]:hover,.live80-v2 .presse-form input[type=tel]:hover,.live80-v2 .presse-form textarea:hover{border-color:rgba(255,255,255,.5)} .live80-v2 .presse-form input[type=text]:focus,.live80-v2 .presse-form input[type=email]:focus,.live80-v2 .presse-form input[type=tel]:focus,.live80-v2 .presse-form input[type=url]:focus,.live80-v2 .presse-form input[type=number]:focus,.live80-v2 .presse-form textarea:focus{ outline:none;background:rgba(255,255,255,.11); border-color:var(--c-pink);box-shadow:0 0 0 3px rgba(255,45,149,.28)} /* Ankreuzfelder. Der Text steht in einem neben dem , beides im — deshalb Flex statt Zeilenfluss, sonst rutscht mehrzeiliger Text unter das Kaestchen. */ .live80-v2 .presse-form .ff-el-form-check{margin-bottom:var(--s3)} .live80-v2 .presse-form .ff-el-form-check-label{ display:flex;align-items:flex-start;gap:var(--s3); color:#fff;font-family:'Asap',sans-serif;font-size:var(--fs-sm);line-height:1.55; cursor:pointer} .live80-v2 .presse-form input[type=checkbox]{ accent-color:var(--c-pink-deep); width:20px;height:20px;flex:0 0 auto;margin-top:.12em;cursor:pointer} /* „Art des Mediums" laeuft als Knopfleiste (`ff_list_buttons`, Kundenwunsch 2026-07-09 — die anderen beiden Ankreuzfelder waren als Knoepfe unverstaendlich und wurden zurueckgestellt). Hier als Chips im Sitestil. 🔴 DAS SICHTBARE ELEMENT IST DAS , NICHT DAS . In diesem Modus blendet Fluent Forms das Kaestchen aus (`opacity:0; position:absolute`) und macht aus dem im einen Knopf: weisser Grund, graue Schrift, 4 px Radius, an den Raendern zu einem Segment-Schalter zusammengezogen. Ein erster Anlauf hat die Pille auf das gelegt — die Messung am meldete brav „Radius 999 px, Grund rgba(255,255,255,.05)" und war trotzdem falsch: sichtbar blieb FF's weisser Kasten INNERHALB der Pille. Gefunden hat es der Screenshot bei 375 px, nicht die Zahl. ⚠️ Eine Messung am Elternteil sagt nichts ueber das Kind, das die Optik traegt. Spezifitaet: FF adressiert mit `.fluentform .ff-el-group.ff_list_buttons .ff-el-form-check label > span` (0,4,2). Unsere Regeln nehmen `.ff-el-group` mit auf und liegen damit sicher darueber — nicht nur „spaeter notiert". */ .live80-v2 .presse-form .ff_list_buttons .ff-el-input--content{ display:flex;flex-wrap:wrap;gap:var(--s3)} .live80-v2 .presse-form .ff_list_buttons .ff-el-form-check{margin-bottom:0} /* Das ist nur noch Huelle — keine eigene Optik. */ .live80-v2 .presse-form .ff-el-group.ff_list_buttons .ff-el-form-check-label{ display:block;padding:0;border:0;background:none} .live80-v2 .presse-form .ff-el-group.ff_list_buttons .ff-el-form-check label > span,.live80-v2 .presse-form .ff-el-group.ff_list_buttons .ff-el-form-check:first-child label > span,.live80-v2 .presse-form .ff-el-group.ff_list_buttons .ff-el-form-check:last-child label > span{ display:inline-flex;align-items:center;justify-content:center; min-height:44px;padding:0 1.15em; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.3); /* ⚠️ `!important` ist hier nicht Bequemlichkeit: Fluent Forms setzt unter `@media only screen and (max-width:768px)` ein `border-radius:4px !important` auf genau dieses . Ohne den Zusatz sind die Chips am Desktop Pillen und am Handy Kaesten — und genau so stand es im Screenshot, waehrend die Messung am Desktop „999 px" meldete. Eine Breite allein genuegt als Messpunkt nicht, wenn das Fremd-CSS Breakpoints hat. */ border-radius:var(--r-pill)!important; box-shadow:none; color:#fff;font-family:'Asap',sans-serif;font-size:var(--fs-sm); transition:border-color .2s var(--ease),background-color .2s var(--ease), box-shadow .2s var(--ease)} .live80-v2 .presse-form .ff-el-group.ff_list_buttons .ff-el-form-check label > span:hover{ color:#fff;border-color:var(--c-pink-soft);background:rgba(255,45,149,.16)} /* 🔴 Der ausgewaehlte Zustand ist Pflicht, nicht Kosmetik: das Kaestchen ist ausgeblendet, die Chipfarbe ist die EINZIGE Rueckmeldung, was angekreuzt ist. FF faerbt hier blau (`#1a7efb`) — das ist auf dieser Site ein Fremdkoerper. */ .live80-v2 .presse-form .ff-el-group.ff_list_buttons .ff-el-form-check.ff_item_selected label > span,.live80-v2 .presse-form .ff-el-group.ff_list_buttons .ff-el-form-check.ff_item_selected:first-child label > span{ background:var(--c-pink-deep);border-color:var(--c-pink-soft); color:#fff;box-shadow:var(--glow-pink)} /* Tastaturfokus: FF setzt hier ein helles Blau. */ .live80-v2 .presse-form .ff-el-group.ff_list_buttons .ff-el-form-check label:focus-within > span{ background:rgba(255,45,149,.2);border-color:var(--c-cyan); outline:3px solid var(--c-cyan);outline-offset:2px} /* Datenschutz-Zustimmung: Text liegt in `.ff_t_c`, das Kaestchen in `.ff_tc_checkbox`. 🔴 Diese eine Zeile baut Fluent Forms als TABELLE — `.ff-el-tc` ist `display:table`, das `table-row`, Kaestchen und Text `table-cell`. Die Regel dafuer (`.fluentform .ff-el-tc label.ff_tc_label`) hat 0,3,1 und schlaegt unsere 0,3,0: unser `display:flex` greift dort NICHT, und damit bleibt auch `gap` wirkungslos. Gemessen: 0 px zwischen Kaestchen und Text, im Screenshot als zusammengeklebte Zeile sichtbar. Statt die Spezifitaet hochzuschrauben (und damit gegen das Plugin zu arbeiten) wird die Tabellenzelle bepolstert — das ist die Eigenschaft, die in beiden Layoutmodellen dasselbe tut. */ .live80-v2 .presse-form .ff-el-tc .ff_tc_checkbox{padding-right:var(--s3);vertical-align:top} .live80-v2 .presse-form .ff_t_c{color:var(--c-ink-2);font-size:var(--fs-sm);line-height:1.55} .live80-v2 .presse-form .ff_t_c a,.live80-v2 .presse-form .ff-el-form-check-label a{color:var(--c-cyan);text-decoration:underline} .live80-v2 .presse-form .ff_t_c a:hover,.live80-v2 .presse-form .ff-el-form-check-label a:hover{color:#fff} /* Absendeknopf — dieselbe Pille wie `.btn.btn--primary` im Rest der Site. ⚠️ Fluent Forms setzt eigene Inline-/Plugin-Styles auf `.ff-btn-submit` (`wpf_has_custom_css`), deshalb hier `!important` — genau wie schon in dwd.css. Ohne das bleibt der blaue Standardknopf des Plugins stehen. */ .live80-v2 .presse-form .ff_submit_btn_wrapper{margin-top:var(--s6);text-align:center} .live80-v2 .presse-form .ff-btn-submit{ display:inline-flex;align-items:center;justify-content:center; min-height:52px;padding:0 var(--s8)!important; background:linear-gradient(135deg,var(--c-pink-deep),#a3006a)!important; color:#fff!important; border:2px solid var(--c-pink-soft)!important;border-radius:var(--r-pill)!important; font-family:'Core Sans M','Asap',sans-serif!important;font-size:var(--fs-sm)!important; letter-spacing:.12em;text-transform:uppercase;font-weight:600; box-shadow:var(--glow-pink);cursor:pointer; transition:transform .18s var(--ease),box-shadow .25s var(--ease)} .live80-v2 .presse-form .ff-btn-submit:hover,.live80-v2 .presse-form .ff-btn-submit:focus-visible{ transform:translateY(-2px);box-shadow:var(--glow-pink-lg)} .live80-v2 .presse-form .ff-btn-submit:active{transform:translateY(0) scale(.98)} /* Rueckmeldungen */ .live80-v2 .presse-form .ff-message-success,.live80-v2 .presse-form .ff_submit_success{ color:#fff;background:rgba(38,224,255,.14); border:1px solid var(--c-cyan);border-radius:var(--r-sm);padding:var(--s5); font-size:var(--fs-md)} .live80-v2 .presse-form .ff-el-is-error input,.live80-v2 .presse-form .ff-el-is-error textarea{border-color:#ff7b7b} .live80-v2 .presse-form .error,.live80-v2 .presse-form .text-danger,.live80-v2 .presse-form .ff-el-form-check .error{color:#ffb0b0;font-size:var(--fs-sm)} /* Turnstile steht ohne Beschriftung im Fluss — etwas Luft davor, sonst klebt das Kaestchen an der Datenschutz-Zeile. */ .live80-v2 .presse-form .ff-el-turnstile{margin-top:var(--s2)} /* ⚠️ Der Honigtopf ist per Inline-Style versteckt (`translateX(1000%)`). NICHT anfassen: er darf fuer Menschen unsichtbar bleiben, und jede eigene Regel darauf riskiert, ihn sichtbar oder fuer Autofill attraktiv zu machen. */ /* --------------------------------------------------------------------------- 4. MOBIL --------------------------------------------------------------------------- */ /* 🔴 Tippziele am EINGABEGERAET festmachen, nicht an der Breite (Regel 139). Die Ankreuzzeilen sind 25 px hoch — mit der Maus voellig ausreichend, mit dem Finger nicht. Auf Touch bekommen sie 44 px. ⚠️ Die Datenschutz-Zeile ist ausgenommen: sie ist eine Tabellenzeile, dort wirkt `min-height` nicht verlaesslich, und ihr Text ist ohnehin mehrzeilig und damit hoch genug. */ /* ⚠️ `(hover:none)` ODER schmal — nicht nur `(hover:none)`. Die Geraete-Emulation von agent-browser meldet `hover:none` als FALSE (geprueft mit „iPhone 16": `matchMedia('(hover:none)').matches` = false, obwohl `maxTouchPoints` 10 ist). Eine Regel, die sich hier nicht nachmessen laesst, ist eine Regel, von der man nur hofft, dass sie greift. Die Breitenbedingung ist messbar; dass ein schmales Desktop-Fenster dabei ebenfalls groessere Ankreuzflaechen bekommt, schadet niemandem. Dasselbe Doppelmuster benutzt `live80-v2.css` schon fuer den Hero-Auftritt. */ @media (hover:none),(max-width:700px){.live80-v2 .presse-form .ff-el-form-check:not(.ff-el-tc) .ff-el-form-check-label{ min-height:44px;padding-block:var(--s1)}} @media (max-width:700px){.live80-v2 .presse-hero{min-height:0;padding-block:var(--s8) var(--s7)} .live80-v2 .presse-card{border-radius:var(--r-sm)} /* Tippziel: der Absendeknopf steht am Handy ueber die volle Breite — das Formular ist lang, ein zentrierter Knopf in Textbreite wird uebersehen. */ .live80-v2 .presse-form .ff-btn-submit{width:100%} .live80-v2 .presse-form .ff-el-group.ff_list_buttons .ff-el-form-check label > span{padding:0 .95em}} /* ---- WordPress-Bruecke PRESSE (nicht aus einem Mockup, siehe scope-css-presse.py) ---- */ /* `core/image` schiebt eine

zwischen Container und . Die Groessenregel `.hero-logo{width:…}` sitzt auf der

selbst (so wie auf der Startseite), das darin muss sie ausfuellen. */ .live80-v2 .presse-hero .hero-logo img{width:100%;height:auto;display:block} /* Der Hero ist ein Grid mit `gap`; die Absaetze duerfen keine eigenen Abstaende mitbringen — dieselbe Zeile steht in den vier Eventkapiteln. */ .live80-v2 .presse-hero .hero-inner > p{margin:0} /* 🔴 KEIN Abstands-Reset auf die Ueberschriften. Ein Reset „vorsichtshalber" (0,2,0) schlaegt den gewollten negativen Abstand aus `.chrome` (0,1,0) — bei Koeln war die Ticket-Sektion dadurch 8 px zu hoch. → Checkliste 199 */ /* `core/shortcode` rendert das Formular ohne eigenen Wrapper direkt in die Gruppe. Fluent Forms bringt ein

mit Inline-Styles mit; das ist per Inline-Style ausgeblendet und bleibt unangetastet. */ .live80-v2 .presse-form fieldset{border:0;margin:0;padding:0;min-inline-size:100%}