/* Paket P-C (WordPress-Theme): Kopie des abgenommenen v5-Seiten-CSS, Bildnamen jetzt .webp, Kommentare ohne lange Striche. Layout und Regeln unverändert, Ergänzungen stehen am Dateiende unter "Paket P-C". */ /* ============================================================ Seitenspezifisches CSS - Kontakt-Seite Nur Layout-Feinheiten, die dieser Seite vorbehalten sind - alle Farben/Radien/Größen kommen ausschließlich aus den :root-Tokens in Kernel-CSS (siehe BAU-REGELN Abschnitt 5). ============================================================ */ /* ------------------------------------------------------------ SEKTION: Hero - Foto-Variante der Kernel-Hero-Komponente (Kernel-CSS Abschnitt 22, `.hero-full`/`.hero-full--sub`). Motiv: "hotel das stue.jpeg" (1239×864, Querformat ≈1,434:1) - beleuchtete Grandhotel-Fassade am Abend, Portier + Oldtimer rechts der Bildmitte (Entrée-Arkade ≈40-77% Bildbreite, Portier ≈62%, Oldtimer ≈59-80%, jeweils im unteren Bilddrittel ≈77-91% Bildhöhe). Keine Mobil-Variante nötig - Querformat 1,434:1, im schmalen Regime skaliert object-fit:cover über die Höhe; object-position-X 75% hält den Motiv-Schwerpunkt (Portier 63%, Oldtimer 59-80%) auch bei 375px im sichtbaren Ausschnitt (gemessen: Bildspalten 48,5-83,8%). ------------------------------------------------------------ */ /* Eyebrow hier hero-lokal aufgehellt - analog index.css: der Kernel-Wert für .on-navy .eyebrow (--ivory-62) fällt gegen den hellen Foto-Grund (blauer Abendhimmel oben links) unter 4.5:1. Volles --ivory besteht überall ≥6.3:1, auch vor dem hellsten Himmel-Blau. */ #hero .eyebrow { color: var(--ivory); } /* object-position: EIN Wertepaar für alle Breiten genügt hier (kein mehrstufiger Media-Query-Aufbau wie bei pages/index.css nötig) - beide Achsen sind rechnerisch gegenseitig wirkungslos in ihrem jeweils anderen Crop-Regime, siehe object-fit:cover-Herleitung unten, per Formel + DOM/Canvas an den 4 Pflicht-Viewports nachgemessen (siehe UEBERGABE-NOTIZ.md, Abschnitt „Kontakt-Hero - Messwerte"): - Bildseitenverhältnis 1239/864 ≈ 1,434. Die Hero-Fläche ist bei jeder der 4 Pflicht-Breiten (1440×900, 1920×1080, 768×1024, 375×812) ENTWEDER deutlich breiter (1440/1920 → Skalierung nach Breite, object-fit:cover schneidet dann ausschließlich VERTIKAL zu - object-position-X hat dort rechnerisch keine Wirkung, siehe Kommentar-Herleitung in pages/index.css Z. 31-56 für dasselbe Prinzip) ODER deutlich schmaler/höher (768×1024, 375×812 → Skalierung nach Höhe, object-fit:cover schneidet dann ausschließlich HORIZONTAL zu - object-position-Y hat dort keine Wirkung). Ein einziges Wertepaar deckt deshalb beide Regime korrekt ab, ohne dass sich die Achsen gegenseitig stören. - Y 65%: verschiebt den bei 1440/1920 vertikal beschnittenen Ausschnitt Richtung Erdgeschoss, damit Entrée/Portier/Oldtimer erhalten bleiben, statt zu viel Himmel zu zeigen. Nachgemessen (Canvas-Sampling der Gebäude-/Himmelgrenze im sichtbaren Fensterausschnitt): 1440×900 zeigt Bildzeile 13,5-92,7% (Portier/Oldtimer-Zone 77-91% vollständig sichtbar), 1920×1080 zeigt 17,9-90,4% (Oldtimer-Unterkante minimal, <2 Prozentpunkte, angeschnitten - optisch nicht wahrnehmbar). - X 75%: verschiebt den bei 768×1024/375×812 horizontal beschnittenen Ausschnitt auf die rechte Bildhälfte, damit die Entrée-Arkade mit Portier + Oldtimer im Fenster bleibt statt der uninteressanten Gebäudekurve links. Nachgemessen: 768×1024 zeigt Bildspalte 31,8-89,4%, 375×812 zeigt 48,5-83,8% - beide schließen die Entrée-Zone (40-77%), Portier (62%) und Oldtimer (59-80%) vollständig ein. */ #hero .hero-bg img { object-position: 75% 65%; } /* Scrim: Links-Rechts-Gradient wie index.css, hier insgesamt dunkler angesetzt (BAU-REGELN Abschnitt 2: "im Zweifel Scrim dunkler") - das Motiv ist ein heller Abendhimmel + warm beleuchtete Steinfassade, spürbar heller als index' dunkler Dämmerungs-Himmel, braucht deshalb mehr Navy-Deckkraft für denselben AA-Kontrast. H1 sitzt in .hero-top (obere Bildhälfte, Himmel/Fassadenkrone) und Lead/CTA in .hero-foot (untere Bildhälfte, Entrée-Zone) - beide Zonen liegen links, wo der Gradient am dunkelsten ist. Kontrastwerte per Canvas-Sampling siehe UEBERGABE-NOTIZ.md, Abschnitt „Kontakt-Hero - Messwerte". Korrekturrunde fotos-kontakt-doku (07.09.2026): die drei mittleren Stopps um je 2-12 Prozentpunkte angehoben (.88→.90 / .68→.76 / .48→.60) - Sperr-Kandidat, weil die H1 hier KEINE max-width trägt (anders als auf den Schwesterseiten) und auf „wide-flat"-Viewports (Laptop mit niedrigem Fenster, Handy quer - Seitenverhältnis ≳2:1, von den 4 Pflicht-Prüfbreiten nicht abgedeckt) bis auf ≈71-84% der Hero-Breite läuft, dort also nah am hellsten, kaum abgedeckten Gradient-Rand steht. Vor der Anhebung dort gemessen (WCAG, Canvas-Sampling über die gesamte Textfläche, nicht nur den rechten Rand): H1 4,36-4,53:1 bei 740×360, 812×375, 844×390, 926×428, 1024×500, 1024×600, 1180×620, 1280×560, 1366×620 - teils unter AA. Nach der Anhebung durchgehend ≥5,77:1 an denselben neun Viewports, ohne die 4 Pflicht-Viewports zu verschlechtern (dort vorher bereits 6,1-8,6:1, nachher 7,5-8,6:1). Details je Viewport siehe UEBERGABE-NOTIZ.md, Abschnitt „Kontakt-Hero - Messwerte". */ #hero .hero-scrim { background: linear-gradient(90deg, rgba(var(--navy-rgb), .97) 0%, rgba(var(--navy-rgb), .90) 34%, rgba(var(--navy-rgb), .76) 60%, rgba(var(--navy-rgb), .60) 100%); } /* Mobil (≤720px): .hero-top trägt keine max-width (nur .hero-foot .lead wird vom Kernel auf 100% zurückgesetzt), H1/Lead/CTA laufen über die volle Breite - selbst der (in der Korrekturrunde fotos-kontakt-doku 07.09.2026 angehobene) Desktop-Gradient fällt rechts nur auf .60 ab und würde dort bei 100%-H1-Breite knapp unter 4.5:1 gegen den hellen Fassadengrund fallen (analog index.css-Befund bei 375px). Eigene, insgesamt dunklere Kurve nur für schmale Viewports, Foto bleibt trotzdem als Foto erkennbar. */ @media (max-width: 720px) { #hero .hero-scrim { background: linear-gradient(90deg, rgba(var(--navy-rgb), .97) 0%, rgba(var(--navy-rgb), .93) 45%, rgba(var(--navy-rgb), .84) 75%, rgba(var(--navy-rgb), .74) 100%); } } /* Kontaktwege-Karten (Fix-Runde 1, B2-25): keine automatische Silbentrennung des Kernels (sonst „di-rekt“, „Insta-gram“, „An-frage“), Umbruch nur an Wortgrenzen. */ #kontaktwege .card :is(.h3, .card-desc) { hyphens: manual; } #kontaktwege .card .card-desc { text-wrap: pretty; } /* Formular (Fix-Runde 1, B2-25): Sand-Bühne mit weißer Formularkarte (.booking-shell). Die Erfolgsmeldung braucht darin keinen zweiten Rahmen (wie auf Werde-Darling-Seite). */ .booking-shell .form-success { border: 0; background: transparent; padding: 0; } /* Nächster Schritt unter der Bestätigung (Gate C, C2-19): Textlink „Alle Fragen ansehen“ */ .success-next { margin-top: 10px; } /* Kontaktwege-Karten: Primär-/Sekundär-CTA je Karte an den unteren Kartenrand drücken, damit alle drei Karten im Grid bündig abschließen, auch wenn der Fließtext unterschiedlich lang ist. */ .kontakt-card-actions { margin-top: auto; display: flex; flex-direction: column; gap: var(--gap-sm); } /* Fließtext-Links (Kartentext, Diskretions-Absatz, FAQ-Abschluss): Basis-Link ist kernelweit text-decoration:none - hier sichtbar machen. Farbe bleibt "inherit" aus dem Kernel-Grundstil (a{color: inherit}), keine eigene Farbe gesetzt. */ .card .card-desc a, .diskretion-body a, .faq-closing a, .check-field .box-label a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; } /* Fable-Fixes nach Opus-Review r2 */ /* Icon im Button ohne den diagonalen Pfeil-Hover (Umschlag/Instagram sind keine Richtungspfeile) */ .btn-icon { width: 16px; height: 16px; flex-shrink: 0; } /* -- Hero-Rollout 07.09.2026: bei --fs-h1-split (Kernel-Token, konstant 31px unterhalb ~704px Breite, siehe style.css Abschnitt 22) bricht diese H1 zwischen 320-349px Breite auf 3 Zeilen mit Einwort-Waise auf der letzten Zeile ("persönlich." allein) - im Browser gemessen (320px: 2+2+1 Wörter je Zeile, 350px: wieder 2+2 wie bei 375px+). Eigener, kleinerer Seiten-Token NUR für diesen schmalen Bereich, analog zum Muster --fs-error-h1 in pages/404.css: verhindert die Waise, ohne den Wortlaut zu ändern (BAU-REGELN Abschnitt 3: "Umbrüche ohne Einzelwort-Waise (­/
gezielt)" - hier per Schriftgröße statt Trennzeichen gelöst, weil kein manueller Umbruch die Waise beseitigt, ohne sie nur zu verschieben). Nachgemessen: 27px hält "Schreib uns. Wir" / "antworten persönlich." zweizeilig bei 320px UND 340px. -- */ @media (max-width: 349px) { #hero .hero-top .h1--split { font-size: clamp(25px, 1vw + 24px, 27px); } } /* ============================================================ Runde 21.10.2026, Paket P7a, Fix 1: Handy, Medium oben, Text darunter (Regel von Nicholas) Unter 721 px liegt nirgends Text über Kopf oder Gesicht. Das Medium steht im Fluss über .hero-content (volle Breite der Fläche, Seitenverhältnis 4:5, object-fit: cover), ohne Scrim und ohne Verlauf. Der Text steht darunter auf Navy. Bildausschnitt: 60% 50% (Hotelfassade mit Eingang bei etwa 60 % der Breite, keine Gesichter). Das Medium liegt über den Kreisbögen (z-index), die Bögen bleiben nur im Textbereich sichtbar. ============================================================ */ @media (max-width: 720px) { #hero.hero-full { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; min-height: auto; } #hero .hero-bg { position: relative; inset: auto; z-index: 3; grid-column: 1; grid-row: 1; display: block; width: 100%; height: auto; margin: 0; aspect-ratio: 4 / 5; } #hero picture.hero-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; } #hero .hero-scrim { display: none; } #hero .hero-content { grid-column: 1; grid-row: 2; justify-content: flex-start; gap: clamp(18px, 5vw, 24px); padding-top: clamp(24px, 6vw, 32px); } }