/* ============================================================================ Diskothek Garage Buxtehude — Design und Layout ---------------------------------------------------------------------------- **Neubau im Clubmuster, kein Nachbau.** Eine Vorlage zum Vermessen gab es nicht: Die laufende www.diskothek-garage.de ist ein CM4all-Baukasten und diente allein als Textquelle, nicht als Gestaltungsvorbild. Es gibt deshalb kein referenz/ und keinen Abgleich dagegen — an seine Stelle tritt tools/sichtpruefung.js (Phase E). **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*). Technische Vorlage ist foreveryoung-hp, gemessen gewählt: 78 der 95 Systemklassen genutzt, 24 Eigenbau — die beste Quote unter fünf geprüften Kandidaten. Die 17 Klassen, die sie nicht nutzt, sind fast genau das, was die Garage braucht (.u18-hinweis, .jobs-intro, .stelle, .anfahrt, .hero-logo); sie kommen aus cosmopolar-hp. Schwarzer Grund, weiße Schrift, Poppins in Versalien für Überschriften, Inter im Fließtext, Akzent #BC2025 — das Rot aus dem Logo, von drei Quellen bestätigt. 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 www.diskothek-garage.de** (`/wp-content/ uploads/2026/04/Poppins-*-1.woff2`), nicht nur dieselbe Familie — eine andere Fassung setzt dieselben Wörter messbar anders breit. Siehe assets/fonts/LIZENZEN.md. **Es gibt nur 400 und 700**, wie im Original. Das Original verlangt an Überschriften, Menü und Knöpfen 900 — gezeichnet wird der 700er-Schnitt. Weil die Anfrage (900) über dem Schnitt (700) liegt, setzt Chrome keinen künstlichen Fettdruck darauf: Der entsteht nur, wenn der Schnitt unter 600 liegt. */ @font-face { font-family: 'Poppins'; src: url('../fonts/poppins-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Poppins'; src: url('../fonts/poppins-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } /* Inter als Fliesstextschrift — Systemvorgabe, solange der Kunde keine eigene Schrift vorgibt; das Kundenmaterial nennt keine. Eine Datei, alle Schnitte von 100 bis 900. **`format('woff2')`, nicht `format('woff2-variations')`.** Das zweite Wort stammt aus einem fruehen Entwurf von CSS Fonts 4; ein Browser, der es nicht kennt, ueberspringt die ganze `src`-Komponente und laedt die Schrift dann gar nicht. Auf vier Livesites des Bestands steht es noch so. */ @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 aus der Vorlage foreveryoung-hp, unveraendert. Schwarz als Grund stand so im Kundenexport („Design-Stil: Dunkel") und im WhatsApp-Export („auf jeden Fall auch so dunkel und schwarz"). */ --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 Rollen wie im System: Inter traegt den Fliesstext, Poppins die Ueberschriften und Knoepfe. Der Kunde gibt keine Schrift vor. */ --schrift-grund: 'Inter', system-ui, sans-serif; --schrift-display: 'Poppins', sans-serif; --tinte: #ffffff; --tinte-rgb: 255 255 255; --tinte-still: #9a9a9a; /* Standzeile, Etiketten */ /* Akzent `#BC2025` — das Rot aus dem Logo. Drei Quellen sind sich einig: `primaryColor` im Kundenexport, `designAccentColor` in den Stammdaten und `accentColor` am Formularendpunkt. Marcel im WhatsApp-Export (07.10.2026): „wenn es geht das rot aus unserem Logo". */ --akzent: #BC2025; --akzent-rgb: 188 32 37; --akzent-tinte: #ffffff; /* **Zwei Rollen fuer eine Markenfarbe, wegen WCAG AA.** Gerechnet, nicht geschaetzt (02.11.2026, gegen jeden tatsaechlich gemalten Grund): - Weiss auf #BC2025: **6,23:1** — die Knopfflaeche traegt unveraendert. - #BC2025 als kleine Schrift: #000 3,37 · #0c0c0c 3,14 · #111 3,03 · #141414 2,96 · #181818 2,85 — **auf keinem Grund ausreichend**. - #E14D52 ist der kleinste hellere Ton derselben Marke mit >= 4,5:1 auf jedem Grund bis #181818 (schlechtester Fall 4,55:1). Linien, Punkte und grosse Schrift behalten #BC2025 — dort gilt 3:1. */ --akzent-text: #E14D52; --akzent-flaeche: #BC2025; /* Aktiver Menuepunkt auf dem Foto. Die schwebende Kopfzeile des Systems steht ueber dem Seitenkopfbild, der Grund ist also kein Farbwert — gemessen wird mit tools/bildkontrast.js gegen die gemalten Pixel. **Gemessen, nicht geschaetzt** (02.11.2026, neun Seiten): Mein erster Wert #EC6B6F kam auf dem Kopfbild von /kontakt/ nur auf 3,66:1 und auf /fotos/ auf 4,15:1 — beide unter AA. #F07B7F schaffte acht von neun. #F58F92 ist die kleinste geprueffte Stufe ohne rote Stelle. Das Bild von /kontakt/ ist der schwierigste Grund: eine hell ausgeleuchtete Bar. Wird ein Kopfbild getauscht, gehoert diese Messung wiederholt — der Wert haengt am Bild, nicht an der Palette. */ --akzent-hell: #F58F92; --link-text: #E14D52; /* 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 wie auf cosmopolar.com: 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-grund); /* 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; } /* Der Vorgabewert des Browsers ist `16px 40px`. Die 40px rueckten das Zitat auf `/ueber-uns/` um genau diesen Betrag aus der Seitenspalte heraus — gemessen am 03.11.2026: linke Kante 242,5 statt 202,5. Eine Einrueckung, die niemand gesetzt hat. */ blockquote { margin: 0; } 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: Poppins, 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: Poppins 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-grund); font-size: 15px; line-height: 1.5; } p:last-child { margin-bottom: 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); } /* Auf dem Telefon 16px statt 10. Gemessen am 03.11.2026: Mit 10px stand blanker Text 10px von der Bildschirmkante, der Text in einer Karte aber 25px (10 Huelle + 15 Kartenpolster). Dieselbe Seite hatte damit zwei Raender. 16px ist kein neuer Wert — der Seitenkopf faehrt ihn schon (`clamp(1rem, 4vw, 2.5rem)` ergibt bei 390px genau 16). Die Grenze liegt bei 1024px, der Tablet-Grenze des Originals, die auch `.rechtstext` schon benutzt. Darueber ist der Rand ohnehin unsichtbar: Die Huelle hoert bei 1160px auf, der Platz daneben ist leer. */ @media (max-width: 1024px) { .huelle { --gutter: 16px; } } /* Schmale Spalte: 820px Text — **links in der Seitenspalte**, nicht in der Seite zentriert. Gemessen am 03.11.2026 bei 1545px Breite, linke Innenkante je Block: .huelle 203 .huelle.ueber 233 .huelle.huelle-schmal 363 Auf `/leistungen/` und `/ueber-uns/` sprang die Kante damit innerhalb einer Seite zwischen drei Werten. Die Huelle traegt jetzt ueberall dieselbe Seitenspalte; schmal ist, was in ihr steht. Damit faellt auch der alte Rand von 0px weg, der bei 390px Breite den Text auf vier Seiten an beide Bildschirmkanten stellte. Die Sichtpruefung findet beides nicht und kann es nicht: Sie misst Ueberlauf, und weder 0px Rand noch eine springende Kante ist Ueberlauf. Dafuer gibt es jetzt `tools/kanten.js`. */ .huelle-schmal > * { max-width: 820px; } /* Die Eventseite ist von oben bis unten eine einzige 820er-Spalte; dort stimmt die alte Bedeutung, und `main` traegt den Rand selbst (20px, gemessen, Zeile `.seite-event main`). */ .seite-event .huelle-schmal { --breite: 820px; --gutter: 0px; } .seite-event .huelle-schmal > * { max-width: none; } /* Abschnitt: 100px oben und unten, wie die Bänder der Startseite. */ .abschnitt { position: relative; padding-block: 100px; isolation: isolate; } /* Abschnitt mit Bild („EVENTS" auf der Startseite): Tanzfläche unter 48 % Schwarz, auf jeder Breite dasselbe Bild, ab 1025px feststehend — Werte aus dem Elementor-Stylesheet des Originals (post-23.css). */ .abschnitt-bild { background: url('../img/events-grund.webp') center / cover no-repeat; } @media (min-width: 1025px) { .abschnitt-bild { background-attachment: fixed; } } .abschnitt-bild::before { content: ''; position: absolute; inset: 0; z-index: -1; background: rgb(0 0 0 / 48%); } /* Die Überschrift steht 10px unter der Abschnittskante (110 statt 100) und hält 10px Seitenrand. Nur hier: .kopfzeile trägt auch den Kopf der Albumseite, und der läuft im Original ohne Rand über die Spalte. */ .abschnitt-bild .kopfzeile, #fotos .kopfzeile { padding: 10px 10px 0; } /* Fotoband der Startseite: Überschrift 30px über dem Band, Knopf 20px unter den Punkten (roxy-hp: 50 / 20 — hier gemessen). */ #fotos .kopfzeile { margin-bottom: 30px; } #fotos .knopf-reihe[data-mitte] { margin-top: 20px; } /* Abschnittskopf „EVENTS": 50px/50px, Versalien im Text (nicht per CSS), über die volle Breite mit 10px Rand zentriert, 35px Abstand darunter. Auf dem Telefon 40px und 40px Abstand. */ .kopfzeile { margin-bottom: 35px; text-align: center; } .kopfzeile h2 { font-size: 50px; line-height: 1; text-transform: none; text-wrap: balance; } @media (max-width: 767px) { .kopfzeile { margin-bottom: 40px; } .kopfzeile h2 { font-size: 40px; } } .unterzeile { margin: 0; } /* Knopfreihe. `data-mitte`: zentriert unter den Karten, 40px Abstand darüber, im Tablet-Bereich des Originals (768–1024px) 66px. */ .knopf-reihe { display: flex; flex-wrap: wrap; gap: 10px; } /* Eine Knopfreihe, die als eigener Block in der Huelle steht, haelt 40px Abstand nach oben — derselbe Wert, den `[data-mitte]` unter den Karten der Startseite schon fuehrt. Gemessen am 03.11.2026 waren es vorher fuenf verschiedene Werte, je nachdem was darueber stand: 14px nach `.jobs-intro`, 16px nach dem Zitat, 20px im Textblock, 30px nach der Haken-Liste, 40px auf `/u18/`. Eine Knopfreihe innerhalb von `.ueber-text` ist nicht gemeint; dort gilt der 20px-Takt des Textblocks. */ .huelle > .knopf-reihe { margin-top: 40px; } .knopf-reihe[data-mitte] { justify-content: center; margin-top: 40px; } @media (min-width: 768px) and (max-width: 1024px) { .knopf-reihe[data-mitte] { margin-top: 66px; } } /* ---------------------------------------------------------------- Knoepfe -- */ /* Knopf: 12px/24px Polster, Poppins 15px/15px, eckig, ohne Schein — alles gemessen (254×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: 0; background: var(--akzent-flaeche); color: var(--akzent-tinte); font: inherit; font-family: var(--schrift-display); line-height: 1; font-size: 15px; font-weight: 900; 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 im Auftrag; Aufbau, Maße und Verhalten aus cosmopolar-hp über die Vorlage roxy-hp). Farben, Schriften, Logo und Texte sind die der Garage. Maße und Verhalten bleiben beim Systemmaß — es gibt kein Original, gegen das sie zu rechtfertigen wären. 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 Wortmarke von Das Garage-Badge ist fast quadratisch (253×237) — dieselbe Höhe, nicht dieselbe Breite wie das fast quadratische Zeichen in cosmopolar-hp. */ .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; /* Rot wie das Menüsymbol des Originals (Elementor: globale Textfarbe #ee0000) — Marke vom Original, Gerüst vom System. */ background: var(--akzent); 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 von cosmopolar.com (dort 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); } /* 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; } /* Punkte dicht untereinander (Betreiber 31.10.; System 1.5rem). */ .menu ul { flex: none; flex-direction: column; align-items: center; gap: 0.25rem; } /* Block, nicht Flex: Als Flex-Element würde der Verweis zum Block samt Polster (58 statt 47,6px je Punkt, gegen cosmopolar.com gemessen). */ .menu li { display: block; text-align: center; } .menu a { font-size: clamp(1.75rem, 7vw, 2.25rem); letter-spacing: -0.01em; } /* Ab 24px große Schrift — dort trägt das Originalrot. */ .menu a:hover, .menu a[aria-current='page'] { 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 -- */ /* Wie auf cosmopolar.com: 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; } /* Das Video füllt die Fläche (Regel aus baggi-hp). Es ist hochkant (720×1280, wie im Original, wo Elementor es ebenso füllt) — ohne diese Regel stand es in natürlicher Breite links und das Standbild schaute rechts daneben heraus. */ .hero-medium video { width: 100%; height: 100%; object-fit: cover; object-position: center; } .hero::after { content: ''; position: absolute; inset: 0; z-index: 1; /* Oben fast deckend (95 % bis 90px), dann bis 220px auf die 55 % des Systems: Der aktive Menüpunkt in Rot liegt über dem laufenden Video, und dessen helle Szenen drückten ihn auf 2,2:1 (gemessen über die Laufzeit; das Standbild allein kam mit 75 % auf 4,71:1). Für 4,5:1 braucht es rund 93 % — so dunkel war die Kopfleiste des Originals ohnehin (feste schwarze Leiste). */ background: linear-gradient(180deg, rgb(0 0 0 / 82%) 0, rgb(0 0 0 / 82%) 72px, rgb(0 0 0 / 28%) 170px, rgb(0 0 0 / 34%) 45%, rgb(0 0 0 / 45%) 100%); } .hero-text { --breite: 1200px; --gutter: clamp(1rem, 4vw, 2.5rem); position: relative; z-index: 2; padding-top: var(--kopf-hoehe); } /* Kein `.hero-logo`: Der Hero des Originals zeigt nur Zeile und Knopf. */ .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 im Hero als Pille (System), knapper als die übrigen. Fläche und Schrift sind die der Garage. Das System zeigt ihn eckig wie alle Knöpfe — Teil der vorgelegten Kopf/Hero-Entscheidung. */ .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 { /* **Abweichung vom gemessenen Original:** dort 1140px Huelle mit 30px Rand, also 1080px Inhalt. Das setzte die linke Kante 30px weiter nach innen als jeder andere Abschnitt (233 statt 203 bei 1545px Breite). Seit dieses Raster mit `.merkmale` und `.bildraster` auf derselben Seite steht, ist das eine zweite Spalte neben der ersten. Darum setzt es Breite und Rand nicht mehr selbst, sondern erbt beides von `.huelle`; die beiden Saeulen und ihre 60px bleiben. */ 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 { font-size: 50px; line-height: 1; text-wrap: balance; } @media (max-width: 767px) { .ueber-text h2 { font-size: 46px; } } /* Blocksatz auf jeder Breite, auch auf dem Telefon — gemessen. */ .ueber-text p { text-align: justify; } .ueber-text strong { font-weight: 700; } .ueber .slider-band img { aspect-ratio: 4 / 5; } /* --------------------------------------------------------------- Karten -- */ /* Drei Spalten, 20px Abstand; bis 1024px eine (Elementor-Tablet). */ .karten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } @media (max-width: 1024px) { .karten { grid-template-columns: 1fr; } } /* Karte: #111, Rundung 20, Flyer 16:9 auf #0a0a0a — das Bild darin in natürlichem Verhältnis, nicht beschnitten. Text 15px. Die Startseite trägt eine Variante (unten, `#events .karte`). */ .karte { display: flex; flex-direction: column; overflow: hidden; border-radius: 20px; background: var(--karte); font-family: var(--schrift-grund); font-size: 15px; line-height: 1.5; } .karte-bild { aspect-ratio: 16 / 9; background: var(--karte-bild); } .karte-bild img { width: 100%; height: auto; } /* Textblock: Datum, Titel, Ort, je 10px Abstand — Polster 10/15. Die Summe trifft die gemessene Kartenhöhe (217 + 10 + 20 + 10 + 63 + 10 + 18 + 10 + 36 = 394). */ .karte-text { display: flex; flex-direction: column; gap: 10px; padding: 10px 15px 0; } .karte-termin { margin: 0; font-family: var(--schrift-grund); font-size: 13px; font-weight: 700; line-height: 1.5; letter-spacing: 0.4px; text-transform: uppercase; color: var(--akzent-text); } /* Titel: 25px/1,25, höchstens zwei Zeilen mit Auslassung, immer zwei Zeilen hoch — so stehen „Mehr erfahren" und die Kartenunterkante einer Reihe auf einer Linie. Auf jeder Breite gleich (gemessen). */ .karte-titel { font-size: 25px; 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: 24px; } } /* Ort unter dem Titel: Poppins 700 12px/18px, Versalien, Akzent. */ .karte-ort { margin: 0; font-size: 12px; font-weight: 700; line-height: 1.5; letter-spacing: 0.05em; text-transform: uppercase; color: var(--akzent-text); } /* Der Abschnitt unten. Im System eine Perforation — das Original hat keine; 10px unter dem Ort. Die 27px bis zur Kartenkante trägt die Zeile selbst als Polster, so wie die Messung sie sieht (Höhe 45). */ .karte-abriss { margin: 0; padding: 10px 15px 0; } /* „MEHR ERFAHREN" weiß — verlangt ist 900, geladen ist 700 (wie im Original). */ .karte-infos { display: flex; align-items: center; gap: 8px; padding-bottom: 27px; font-family: var(--schrift-display); font-size: 12px; font-weight: 900; line-height: 1.5; letter-spacing: 0.05em; text-transform: uppercase; color: var(--tinte); } /* **Variante Startseite** — das Original nutzt dort einen anderen Baustein des Plugins: Fläche #0c0c0c, Grundschrift 16px, und die Reihe hält statt der Hülle einen festen Rand (120 / 45 / 20px bei Desktop / Tablet / Telefon). Gemessen: Karte 387 × 403 bei 1440px. */ #events .huelle { --breite: none; --gutter: 120px; } @media (max-width: 1024px) { #events .huelle { --gutter: 45px; } } @media (max-width: 767px) { #events .huelle { --gutter: 20px; } } #events .karte { background: var(--fuss); font-size: 16px; } /* Titel auch auf dem Telefon 25px (auf /events/ dort 24px). */ @media (max-width: 767px) { #events .karte-titel { font-size: 25px; } } /* 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 (Systemklasse, aus roxy-hp; in der Vorlage klangwelten-hp ungenutzt). Werte gemessen auf www.diskothek-garage.de/events/. */ .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; } /* Randlos (Systemklasse aus cosmopolar-hp): Das Band läuft über die volle Fensterbreite, auch wenn es in einer Hülle steht. `--sb` ist die Breite der Scrollleiste (page-common.js). Das Fotoband „FOTOS" der Startseite steht außerhalb jeder Hülle — die Regel ändert dort nichts, hält aber die Klasse ehrlich. Die Pfeile bleiben 10px vom Rand wie im Original (das System setzt sie auf 0). */ .slider-randlos { width: calc(100vw - var(--sb, 0px)); margin-left: calc(50% - (100vw - var(--sb, 0px)) / 2); } .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); } /* ------------------------------------------------------------ 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) -- */ /* Wie auf cosmopolar.com: 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 cosmopolar.com, 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.com 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='kontakt'] { background-image: url('../img/banner/kontakt.webp'); } /* Zuordnung ehemals nach .auftrag.md E7 — sieben gelieferte Kopfbilder auf neun Unterseiten, zwei Seiten gingen leer aus. Seit `fotoarchiv/` als Bildquelle feststeht (E11), ist die Knappheit weg: `/ueber-uns/` bekommt ein eigenes Kopfbild aus dem Archiv. `/u18/` behaelt den schlichten Kopf — ein Partyfoto ueber dem Jugendschutzformular waere die falsche Ansage. */ .seitenkopf[data-banner='leistungen'] { background-image: url('../img/banner/leistungen.webp'); } .seitenkopf[data-banner='jobs'] { background-image: url('../img/banner/jobs.webp'); } .seitenkopf[data-banner='ueber-uns'] { background-image: url('../img/banner/ueber-uns.webp'); } .seitenkopf h1 { font-size: clamp(3rem, 13vw, 4.5rem); line-height: 1.08; letter-spacing: -0.02em; text-transform: none; } /* Unterzeile im Akzent, 15–18px, 1rem unter der Zeile. **Abweichung, für WCAG AA:** Rot direkt auf dem Foto hat an den gemalten Pixeln weniger als 4,5:1 (tools/bildkontrast.js). Deshalb ein schmaler Grund aus 92 % Schwarz nur hinter dem Text. Rückbau: die drei Zeilen ab `display` streichen. */ .seitenkopf .unterzeile { margin: 1rem auto 0; font-size: clamp(0.9375rem, 2.6vw, 1.125rem); font-weight: 400; line-height: 1.7; color: var(--akzent-text); } /* **Die Platte nur ueber dem Foto.** Sie ist eine Kontrastmassnahme, keine Gestaltung: Rot auf einem Partyfoto erreicht an den gemalten Pixeln keine 4,5:1. Auf `/u18/` und `/ueber-uns/` gibt es kein Kopfbild (sieben gelieferte Bilder auf neun Unterseiten, .auftrag.md E7) — dort stand der Kasten auf einfarbigem Grund und las sich wie ein Versehen. Auf einfarbigem Grund traegt #E14D52 ohnehin mit 4,55:1. */ .seitenkopf-bild .unterzeile { display: table; padding: 0 8px; border-radius: 4px; background: rgb(0 0 0 / 92%); } .seitenkopf[data-banner='events'] .unterzeile { font-family: var(--schrift-grund); } @media (max-width: 759px) { .seitenkopf-bild { min-height: 0; aspect-ratio: 3 / 2; } } /* ------------------------------------------------------------ Eventliste -- */ /* Monatsgruppen in der Systemhülle (1140px Inhalt, 10px Rand), die erste Monatszeile 75px unter dem Seitenkopf, 80px bis zum Fuß — gemessen. Die Karte selbst ist die Grundform (siehe Karten). */ .seite-events .abschnitt { padding: 75px 0 80px; } /* ------------------------------------------------------------------ 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. */ /* 85px unter dem Seitenkopf, 35px bis zum Fuß — gemessen. */ .seite-kontakt .abschnitt { padding: 85px 0 35px; } .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; } } /* Ohne FAQ: Formular in einer Spalte von 550px, bis 1024px volle Breite — gemessen. */ .kontakt-raster[data-ohne-faq='ja'] { grid-template-columns: minmax(0, 550px); justify-content: center; } @media (max-width: 1024px) { .kontakt-raster[data-ohne-faq='ja'] { grid-template-columns: minmax(0, 1fr); } } .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. */ #faq [data-faqs] { margin-right: 100px; } .faq { border-bottom: 1px solid rgb(255 255 255 / 8%); } .faq summary { position: relative; display: flex; align-items: center; gap: 0 10px; padding: 18px 4px; font-family: var(--schrift-display); font-size: 15px; line-height: 1.35; letter-spacing: -0.02em; /* Die Zeile trägt #1f2124 wie im Original, sichtbar ist die Frage. */ color: #1f2124; list-style: none; cursor: pointer; transition: background 0.3s cubic-bezier(0.22, 1, 0.36, 1), padding 0.3s cubic-bezier(0.22, 1, 0.36, 1); } .faq summary::-webkit-details-marker { display: none; } .faq summary span { color: rgb(255 255 255 / 88%); } .faq summary::before { content: ''; flex: none; width: 18px; height: 18px; margin: 5px 5px 5px 21px; background: var(--akzent); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z'/%3E%3C/svg%3E") center / contain no-repeat; } .faq[open] summary { padding-left: 12px; background: linear-gradient(90deg, rgb(var(--akzent-rgb) / 9%) 0%, rgb(var(--akzent-rgb) / 2.5%) 55%, rgb(0 0 0 / 0%) 100%); } .faq[open] summary::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z'/%3E%3C/svg%3E"); } .faq[open] summary::after { content: ''; position: absolute; left: 0; bottom: 4px; width: 3px; height: 28px; border-radius: 99px; background: var(--akzent); box-shadow: 0 0 14px rgb(var(--akzent-rgb) / 30%); } /* 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 12px 24px 16px; color: rgb(255 255 255 / 64%); background: linear-gradient(90deg, rgb(var(--akzent-rgb) / 3.5%), rgb(0 0 0 / 0%) 75%); } .faq-text p { margin: 0 0 15px; font-size: 15px; line-height: 1.7; letter-spacing: -0.012em; color: rgb(255 255 255 / 64%); overflow-wrap: anywhere; } .faq-text p:last-child { margin-bottom: 0; } @media (max-width: 1024px) { .faq summary { padding-block: 16px; } } /* Telefon: Liste über die volle Spalte, knapperes Polster, Symbol 6px eingerückt, Antwort mit Zeilenhöhe 1,65. */ @media (max-width: 767px) { #faq [data-faqs] { margin-right: 0; } .faq summary { padding: 15px 2px; } .faq[open] summary { padding-left: 7px; } /* Symbol 15px im 24px-Kasten, 10px eingerückt — gemessen. Die Zeile ist trotzdem 26px hoch (Eintrag 57px); das Polster des Symbols trägt die 2px. */ .faq summary::before { width: 15px; height: 15px; margin: 5.5px 4.5px 5.5px 14.5px; } .faq-text { padding: 0 6px 20px 8px; } .faq-text p { line-height: 1.65; } } /* ------------------------------------------------------------ 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; 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-grund); 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-grund); font-size: 13.6px; font-weight: 600; line-height: 1; color: #cfd6e0; } /* `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-grund); font-size: 15px; line-height: 1.5; padding: 8px 16px; } .feld textarea { padding: 12px 14px; min-height: 135px; resize: vertical; border-color: #333a47; } .feld input:focus, .feld textarea:focus { outline: 2px solid var(--akzent); outline-offset: 0; } .feld textarea::placeholder { color: rgb(255 255 255 / 45%); } /* Pflichtfeld-Sternchen (System). */ .feld-pflicht { font-style: normal; color: #f43f5e; } /* Einwilligung: Kästchen vor dem Text, 9px Abstand. */ .zustimmung { display: flex; align-items: flex-start; gap: 9px; cursor: pointer; } .zustimmung { font-family: var(--schrift-grund); 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; } /* **Variante: Kontaktformular** in der Formsprache von cosmopolar.com (Betreiber 01.11.; vorher das Elementor-Formular des Originals mit Umrissen): kein Kasten, Spalte 550px; Felder gefüllt (6 % Weiß), ohne Rahmen, Rundung 14, 56px hoch; Fokus als Ring außen, der nichts verschiebt; Etiketten leise in Normalschrift; eigenes Kästchen, gefüllt wie die Felder; Knopf als volle Pille. **An #kontaktformular gebunden, nicht an .seite-kontakt:** Auf derselben Seite steht im Fuß das Newsletter-Formular, ebenfalls .form mit .zustimmung — Seitenregeln trafen es mit. */ #kontaktformular .form { gap: 18px; padding: 0; border: 0; border-radius: 0; background: none; } #kontaktformular .form-reihe { gap: 18px; } #kontaktformular .feld { gap: 8px; } #kontaktformular .feld > span, #kontaktformular .feld legend { padding: 0 0 8px; font-size: 14px; font-weight: 400; line-height: 1.3; color: #d0d0d0; } #kontaktformular .feld legend { padding-bottom: 12px; } #kontaktformular .feld-pflicht { padding-inline-start: 2px; color: var(--akzent-text); } #kontaktformular .feld input:not([type='checkbox']), #kontaktformular .feld textarea { padding: 16px 18px; border: 0; border-radius: 14px; background: rgb(255 255 255 / 6%); font-size: 15px; line-height: 1.5; transition: box-shadow 0.2s ease, background 0.2s ease; } #kontaktformular .feld textarea { min-height: 150px; } #kontaktformular .feld :is(input, textarea):hover:not(:focus) { background: rgb(255 255 255 / 8%); } #kontaktformular .feld :is(input, textarea):focus { outline: 0; background: rgb(255 255 255 / 10%); box-shadow: 0 0 0 2px rgb(var(--akzent-rgb) / 55%); } #kontaktformular .feld ::placeholder { color: var(--tinte-still); } #kontaktformular .zustimmung { gap: 12px; font-size: 14px; line-height: 1.5; color: #d0d0d0; } /* Eigenes Kästchen (Systemkanon): gefüllt statt Systemquadrat. */ #kontaktformular .zustimmung input { appearance: none; -webkit-appearance: none; flex: none; width: 20px; height: 20px; margin: 1px 0 0; border: 0; border-radius: 7px; background: rgb(255 255 255 / 10%); cursor: pointer; transition: background 0.2s ease; } #kontaktformular .zustimmung:hover input:not(:checked) { background: rgb(255 255 255 / 16%); } #kontaktformular .zustimmung input:checked { background: var(--haken) var(--akzent-flaeche) center / 13px 13px no-repeat; } #kontaktformular .zustimmung input:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; } #kontaktformular .zustimmung a { color: var(--akzent-text); text-decoration: underline; } #kontaktformular .form > .knopf-reihe { margin-top: 12px; } #kontaktformular .form > .knopf-reihe .knopf { height: 56px; padding: 0 28px; border-radius: 999px; font-family: var(--schrift-display); font-size: 16px; font-weight: 900; letter-spacing: 0.04em; line-height: 1; } /* 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); } /* ---------------------------------------------------------------- Fotos -- */ /* Albenliste: Spalte höchstens 1140px, 10px Rand, 35px unter dem Seitenkopf. Drei Spalten mit 30px Abstand, bis 1024px zwei, auf dem Telefon eine — gemessen. */ /* Bis zum Fuß 130px, bis 1024px 230px — gemessen (390 und 768). */ .seite-fotos .abschnitt { padding: 35px 0 130px; } @media (max-width: 1024px) { .seite-fotos .abschnitt { padding-bottom: 230px; } } .alben-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; } /* Bis 1024px eine Spalte (bei 768 eine 748px breite Karte — gemessen). */ @media (max-width: 1024px) { .alben-raster { grid-template-columns: 1fr; } } /* Karte wie im Plugin des Originals (clubinio-fotos, neuere Fassung als bei klangwelten-hp): #0e0e0e, Rundung 12, Deckblatt quadratisch auf #f0f0f0 mit der Bildzahl unten rechts (`.album-zahl`, Systemklasse aus halloween-hannover-hp / born4korn-hp), darunter Datum und Titel zentriert. **Kein Ort** — das Original zeigt keinen. */ .album-karte { display: block; overflow: hidden; border-radius: 12px; background: #0e0e0e; font-family: var(--schrift-grund); font-size: 15px; line-height: 1.5; } /* Deckblatt als Verweis; Verweisfarbe des Themes wie am des Originals (unsichtbar, gemessen als Kantenfarbe). */ .album-bild { position: relative; display: block; aspect-ratio: 1 / 1; background: #f0f0f0; color: var(--link-text); } .album-bild img { width: 100%; height: 100%; object-fit: cover; } /* Bildzahl in einer Verlaufsleiste unten im Bild: 70 % Schwarz nach durchsichtig, 20px Polster, Zahl rechts in 600 16px/24px rot. */ .album-zahl { position: absolute; inset: auto 0 0; display: flex; justify-content: flex-end; padding: 20px; background: linear-gradient(to top, rgb(0 0 0 / 70%), rgb(0 0 0 / 0%)); font-size: 16px; font-weight: 600; line-height: 1.5; } .album-zahl > span { color: var(--akzent-text); } /* 26px über dem Datum, 14px zum Titel, 60px darunter, 30px seitlich — gemessen (Karte 360 × 547 bei 1440). Das Datum ist so breit wie sein Text und mittig (`display: table`), wie der Inline-Text des Originals. */ .album-text { padding: 26px 30px 60px; text-align: center; } .album-zeile { display: table; margin: 0 auto 14px; font-size: 15.2px; font-weight: 400; line-height: 1.8; color: var(--akzent-text); } .album-titel { color: var(--tinte); text-transform: none; font-family: var(--schrift-grund); font-size: 25px; font-weight: 800; line-height: 1.2; } .album-titel a { color: inherit; } /* Albumseite: Titel Poppins (verlangt 900, geladen 700), Angaben ohne Symbole, darunter die Bilder als quadratisches Raster — 4 Spalten, unter 1025px 3, 15px Abstand, Rundung 8 auf #f0f0f0. So die neuere Fassung des Fotoplugins auf www.diskothek-garage.de (gemessen); klangwelten-hp hatte die ältere mit Symbolen und Mauerwerk. */ .seite-album .abschnitt { padding: 25px 0 0; font-family: var(--schrift-grund); } /* Unter dem Kopf eine 2px-Linie in #f0f0f0 — vom Fotoplugin des Originals. */ .seite-album .kopfzeile { margin-bottom: 40px; padding-bottom: 30px; border-bottom: 2px solid #f0f0f0; } .seite-album .kopfzeile h1 { margin: 0 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; font-family: var(--schrift-grund); font-size: 15.2px; line-height: 1.5; } @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; } } @media (max-width: 767px) { .seite-album .abschnitt .huelle { --gutter: 10px; } .seite-album .abschnitt { padding-bottom: 25px; } .seite-album .kopfzeile h1 { font-size: 24px; } } .fotoraster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; margin-block: 50px; } @media (max-width: 1024px) { .fotoraster { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .fotoraster figure { position: relative; margin: 0; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 8px; background: #f0f0f0; /* Verweisfarbe des Themes wie am des Originals — unsichtbar, die Kachel hat keinen Text; gemessen als Kantenfarbe (currentColor). */ color: var(--link-text); cursor: zoom-in; } .fotoraster img { width: 100%; height: 100%; object-fit: cover; } .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, Poppins 900 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; font-family: var(--schrift-grund); 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-grund); 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 (Betreiber 31.10.; das Original nimmt die Linkfarbe des Themes #cc3366). */ .event-text { margin-top: 26px; font-family: var(--schrift-grund); font-size: 15px; line-height: 27px; color: #cccccc; } /* **Neu: Emoji-Kasten.** Im Original ein 1em-Bild mit 0,07em Rand je Seite (WordPress). Hier das Zeichen der Systemschrift in einem Kasten derselben Breite — so bricht der Text an denselben Stellen um. */ .event-text .emoji { display: inline-block; width: 1em; margin: 0 0.07em; text-align: center; line-height: 1; vertical-align: -0.1em; } .event-text a { font-family: var(--schrift-grund); 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-grund); 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-grund); font-size: 15px; font-weight: 800; line-height: 1; text-transform: uppercase; } /* „Einlass" steht im Original als einziges Etikett in der Textschrift. */ .infopaar:nth-child(3) dt { font-family: var(--schrift-grund); } .infopaar dd small { display: block; margin-top: 3px; font-family: var(--schrift-grund); font-size: 14px; font-weight: 400; line-height: 1.5; text-transform: none; color: var(--tinte-still); } /* „Zurück": grau, Poppins 900 13px, Pfeil davor, mittig, 26px unter dem Newsletter-Kasten. Das Original verlangt hier Montserrat, lädt sie aber nicht (gezeichnet wird eine Systemschrift). */ .zurueck { display: inline-flex; align-items: center; gap: 8px; margin: 26px auto 0; padding-top: 20px; font-family: var(--schrift-grund); 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); } /* ------------------------------------------------------------ Rechtstext -- */ /* Impressum und Datenschutz wie die bestehende Seite (gemessen): Fließtext in der Systemhülle (1140px), 50px unter dem Kopf; Titel Poppins 32px in Akzentfarbe, 20px darunter der Text; Absätze Poppins 15/22,5 mit 0,9rem Abstand; Gliederung h3/h4/h5 in Poppins 500, 28/24/20px, Rand 8/16; Verweise in Akzentfarbe. */ .seite-recht .abschnitt { padding: 50px 0 49px; } @media (max-width: 1024px) { .rechtstext { --gutter: 20px; } } .rechtstext h1 { margin-bottom: 20px; font-size: 32px; font-weight: 600; line-height: 1; color: var(--akzent); } /* Trennlinie wie der Elementor-Divider des Originals: 1px Akzent über 30 % der Spalte, 15px Polster und 20px Abstand je Seite (71px Text zu Text, gemessen). Der Absatz davor endet ohne Rand. */ .rechtstext hr { width: 30%; margin: 35px 0; border: 0; border-top: 1px solid var(--akzent); } .rechtstext p:has(+ hr) { margin-bottom: 0; } .rechtstext h3, .rechtstext h4, .rechtstext h5 { margin: 8px 0 16px; font-family: var(--schrift-grund); font-weight: 500; line-height: 1.2; text-transform: none; } .rechtstext h3 { font-size: 28px; } .rechtstext h4 { font-size: 24px; } .rechtstext h5 { font-size: 20px; } .rechtstext p, .rechtstext li { font-family: var(--schrift-grund); font-size: 15px; line-height: 1.5; } /* **Variante: Blocksatz** wie im Original — die ganze Datenschutzerklärung (82 von 83 Absätzen, auch die Überschriften), im Impressum nur der Fließtext unter der Trennlinie; die Adressblöcke darüber stehen linksbündig. */ .rechtstext--blocksatz :is(p, li, h3, h4, h5), .rechtstext hr ~ p { text-align: justify; } .rechtstext ul { margin: 0; padding-left: 40px; } .rechtstext strong, .rechtstext u { font-weight: 700; } .rechtstext a { color: var(--akzent-text); } .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-grund); 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; font-family: var(--schrift-grund); border-radius: 3px; font-size: 13.6px; font-weight: 800; line-height: 1.5; text-transform: uppercase; box-shadow: none; } .newsletter .zustimmung { max-width: 460px; margin-top: 9px; font-family: var(--schrift-grund); font-size: 11.52px; color: #7a8595; } .newsletter .rueckmeldung { margin-top: 12px; max-width: 460px; } /* Auf der Eventseite 26px unter dem Infokasten — gemessen. */ .event .newsletter { margin-top: 26px; } /* Als eigener Kasten auf der Eventseite (Baustein aus drip-hp, dasselbe Plugin auf www.diskothek-garage.de gemessen): #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%)), /* Dasselbe Bild wie auf www.diskothek-garage.de (Bild 118 des WordPress-Albums). Der Kasten steht nur auf den Eventseiten. */ url('../img/newsletter.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