/* * home.css — die oeffentliche KUNDEN-Startseite (Route "/"). * * Warum eine eigene Datei und nicht landing.css: die beiden Seiten sprechen zwei * verschiedene Zielgruppen und haben deshalb zwei verschiedene Rhythmen. landing.css * ist 113 KB fuer eine Seite mit vierzehn Modulkarten; hier traegt die erste * Bildschirmseite ein Formular mit drei Feldern. Eine gemeinsame Datei haette beiden * Seiten die Zwaenge der jeweils anderen auferlegt. * * DIE TOKENS SIND ABSICHTLICH DIESELBEN WIE IN templates/directory.html. Die * Kundenkette ist "/" -> "/djs" -> "/dj/{slug}" -> Anfrage; sie muss sich wie EINE * Oberflaeche anfuehlen. Die DJ-Verkaufsseite (/fuer-djs) behaelt ihre eigene Palette, * weil sie ein anderes Publikum bedient. */ /* Die Schrift wird im per geladen, NICHT hier per @import. Ein @import am Kopf einer Stylesheet-Datei ist ein SERIELLER Wasserfall: der Browser muss erst home.css holen und parsen, dann das Font-CSS, dann die Schriftdateien - drei Runden hintereinander, bevor der erste Buchstabe in der richtigen Schrift steht. Als laufen die ersten beiden parallel. */ :root { --bg: #07070b; --bg-raised: #0d0d14; --bg-white: rgba(255, 255, 255, 0.055); --bg-white-2: rgba(255, 255, 255, 0.085); --border: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.18); --text: #f7f7fb; --text-secondary: #c7c5d0; --text-muted: #8f8a9b; --accent: #8B1538; --accent-hover: #a41a44; --accent-soft: rgba(139, 21, 56, 0.22); /* Der Akzent als TEXT. #8B1538 auf #07070b misst 2,2:1 und faellt damit durch AA; die aufgehellte Stufe derselben Farbe misst 8,4:1. Es ist kein zweiter Akzent, sondern derselbe Farbton in der Helligkeit, die lesbarer Text braucht. Auf getoenten Flaechen gilt weiterhin: weisses Label, nicht Akzent-auf-Akzent. */ --accent-ink: #e08199; --radius: 14px; --radius-lg: 24px; --radius-pill: 999px; --shadow-md: 0 18px 58px rgba(0, 0, 0, 0.28); --shadow-lg: 0 28px 90px rgba(0, 0, 0, 0.38); --shell: 1200px; --header-h: 72px; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } body { margin: 0; background: var(--bg); color: var(--text); font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; /* KEIN `overflow-x: hidden` hier. Es wuerde waagerechten Ueberlauf nicht verhindern, sondern verstecken - und damit den rendernden Waechter (tests-visual/oeffentliche-flaechen.spec.mjs) fuer die ganze Seite blind machen: unter einem klemmenden Body gilt jedes Element als beschnitten. Ueberlauf wird dort behoben, wo er entsteht. */ } img { max-width: 100%; } a { color: var(--accent-ink); } :focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; border-radius: 6px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--accent); color: #fff; padding: 12px 18px; border-radius: 10px; font-weight: 600; text-decoration: none; transition: top .18s ease; } .skip-link:focus { top: 12px; } .shell { width: 100%; max-width: var(--shell); margin: 0 auto; padding: 0 22px; } /* ── Buttons ──────────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: inherit; font-weight: 600; font-size: 15px; padding: 12px 22px; min-height: 48px; border-radius: 12px; text-decoration: none; border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: background .2s ease, border-color .2s ease, transform .2s ease; } .btn-primary { background: var(--accent); color: #fff; } .btn-primary:hover { background: var(--accent-hover); color: #fff; } .btn-secondary { background: var(--bg-white); color: var(--text); border-color: var(--border); } .btn-secondary:hover { background: var(--bg-white-2); border-color: var(--border-strong); color: var(--text); } .btn-large { padding: 15px 28px; font-size: 16px; min-height: 54px; } .btn-header { min-height: 42px; padding: 9px 18px; font-size: 14px; } /* ── Kopfzeile ────────────────────────────────────────────────────────────── */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(7, 7, 11, 0.86); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--border); } .header-shell { display: flex; align-items: center; gap: 18px; min-height: var(--header-h); } .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); /* Hier stand bis 2026-08-27 die Zusicherung, der Tap-Diebstahl unter 356px sei mit `flex: 0 1 auto; min-width: 0` behoben. Er war es nicht - die Zusicherung war das eigentliche Problem, weil sie die naechste Messung ueberfluessig erscheinen liess. Gemessen bei 320px: a.brand hatte Breite 0, das 34px-Logobild wurde ausserhalb seines Kastens gezeichnet (x 16..50), und div.lang-switch begann bei x 26. Ein Klick auf die Logomitte schaltete die SPRACHE um statt zu navigieren - in DE bis 344px, in EN bis 342px, in ES bis 348px hinauf. `min-width: 0` war dabei NICHT die Ursache: die Kopfzeile war ueberbucht (Bedarf 342px gegen 288px Inhaltsbreite bei 320px in ES), und der Markenblock war nur das einzige nachgiebige Kind. Behoben wird das dort, wo die Ueberbuchung entsteht - siehe die 420px-Regel weiter unten. `min-width: auto` steht hier nur noch, weil es der Standardwert fuer Flex-Kinder ist und damit nichts behauptet - das vorherige `min-width: 0` sah nach Absicht aus, ohne je eine zu haben. WIRKUNG HAT ES KEINE: eine Gegenprobe hat die Regel entfernt und dieselbe Seite gemessen, das Ergebnis war identisch. Hier stand bis 2026-08-27 die Behauptung, sie sei ein "harter Boden" gegen kuenftige Stauchung; sie war es nicht, und eine Zusicherung ohne Messung ist genau der Fehler, den der Absatz darueber beschreibt. Was diese Klasse WIRKLICH deckt, ist ein Waechter, nicht eine CSS-Zeile: tests-visual/kopfzeile-drei-sprachen.spec.mjs prueft drei Seiten x drei Sprachen ueber ein dichtes Breitenraster von 280 bis 1920 auf drei Formen - was an der Stelle des Logos wirklich getroffen wird, ob ein Block aus seiner eigenen Spur quillt, und ob zwei Kopfzeilenbloecke einander ueberlappen. Die frueher hier genannte tests-visual/oeffentliche-flaechen.spec.mjs kann es nicht: sie faehrt zwei Breiten und nur Deutsch. Widerlegen: node tests-visual/kopfzeile-drei-sprachen-probe.mjs (beide Richtungen, `fail=0`). */ flex: 0 1 auto; min-width: auto; } .brand-mark { display: flex; flex: none; } .brand-mark img { border-radius: 8px; display: block; } .brand-copy { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; } .brand-copy strong { font-size: 16px; font-weight: 700; letter-spacing: -.01em; } .brand-copy span { font-size: 11px; color: var(--text-muted); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .site-nav { display: flex; align-items: center; gap: 4px; margin-left: auto; } .nav-link { color: var(--text-secondary); text-decoration: none; font-size: 14px; font-weight: 500; white-space: nowrap; padding: 9px 12px; border-radius: 9px; min-height: 44px; display: inline-flex; align-items: center; transition: color .2s ease, background .2s ease; } .nav-link:hover { color: var(--text); background: var(--bg-white); } .header-actions { display: flex; align-items: center; gap: 10px; flex: none; } .nav-crossdoor { color: var(--text-muted); text-decoration: none; /* Gleiche Groesse wie der Knopf daneben (.btn-header, 14px). Unterschieden wird ueber Gewicht und Farbe, nicht ueber die Groesse - ein kleinerer Text neben einem Knopf liest sich als Fussnote, nicht als zweite Tuer. */ font-size: 14px; font-weight: 500; padding: 9px 10px; border-radius: 9px; min-height: 44px; display: inline-flex; align-items: center; white-space: nowrap; transition: color .2s ease; } .nav-crossdoor:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; } .menu-toggle { display: none; width: 44px; height: 44px; flex: none; background: var(--bg-white); border: 1px solid var(--border); border-radius: 10px; cursor: pointer; padding: 0; align-items: center; justify-content: center; flex-direction: column; gap: 5px; } .menu-toggle span { display: block; width: 17px; height: 2px; background: var(--text); border-radius: 2px; transition: transform .22s ease, opacity .22s ease; } .menu-toggle.is-open span:first-child { transform: translateY(3.5px) rotate(45deg); } .menu-toggle.is-open span:last-child { transform: translateY(-3.5px) rotate(-45deg); } .mobile-menu { display: none; border-top: 1px solid var(--border); background: var(--bg); } .mobile-menu.is-open { display: block; /* CM501: the open menu locks the page (body.menu-open) -- so it has to scroll itself. Without a bound it grew past a low viewport (812x375 landscape: "Du bist DJ?" at y 384-434) and nothing could bring its last link into view. The header column below caps header + menu at the viewport height; the menu takes the rest and scrolls. */ min-height: 0; overflow-y: auto; overscroll-behavior: contain; } .mobile-menu-inner { display: flex; flex-direction: column; gap: 4px; padding: 14px 22px 20px; max-width: var(--shell); margin: 0 auto; } .mobile-link { color: var(--text); text-decoration: none; font-size: 16px; font-weight: 500; padding: 13px 4px; min-height: 48px; display: flex; align-items: center; border-bottom: 1px solid var(--border); } .mobile-link--crossdoor { color: var(--text-muted); font-size: 15px; border-bottom: none; } .mobile-actions { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; } .mobile-actions .btn { width: 100%; } body.menu-open { overflow: hidden; } body.menu-open .site-header { display: flex; flex-direction: column; max-height: 100vh; max-height: 100dvh; } body.menu-open .header-shell { flex: none; } /* ── Hero ─────────────────────────────────────────────────────────────────── */ .hero { position: relative; padding: 72px 0 64px; /* Die Bildflaeche liegt HINTER dem Text, nicht daneben. Das Motiv traegt seinen Inhalt rechts und ist links fast schwarz; der Verlauf darueber zieht die linke Haelfte zusaetzlich auf fast volle Deckung, damit die Ueberschrift dort auf einer ruhigen Flaeche steht statt auf Bilddetail. Reihenfolge beachten: der Verlauf steht VOR dem Bild, liegt also darueber. */ background-color: var(--bg); /* `background-image` steht NICHT hier, sondern im