/* ═══════════════════════════════════════════════════════════════════════════ ARVELA · GASTGEBERINNEN-BLOCK ═══════════════════════════════════════════════════════════════════════════ EINZIGE Quelle der Regeln fuer partials/gastgeberin.hbs. Jede Seite, die das Partial einbindet, verlinkt diese Datei im Kopf: Heute: views/demand.hbs (Anfrage) und views/buchen.hbs (Buchung). HERKUNFT. Unveraendert aus dem Kopf von views/demand.hbs herausgeloest (Block .intro). Die Werte sind Zahl fuer Zahl dieselben, nur die Klassen- namen tragen das Praefix gg-: die Buchungsseite bringt eigene .intro-Regeln fuer ihren Titelblock mit, mit den alten Namen haetten sich Seite und Modul gegenseitig ueberschrieben. ABHAENGIGKEITEN, bewusst nicht hier: · .eyebrow (Goldlinie plus Versalien) traegt auf beiden Seiten ALLE Sektionskoepfe und gehoert der Seite, nicht diesem Modul. · Farb- und Schrift-Token (--oro, --gold, --creme-deep, --ink-soft, --stone, --serif-display, --nav-h) definiert die einbindende Seite. ═══════════════════════════════════════════════════════════════════════════ */ /* Wurzel. Ohne eigenen Abstand: den bringt die Seite mit, je nachdem, ob der Block ganz oben steht oder unter einem Titelblock. */ .gg{ --gg-title-lift:0.29em; } /* FREIRAUM UNTER DER FIXEN LEISTE (nur wenn der Block der erste ist). Die Kopfzeile ist position:fixed und liegt damit ausserhalb des Flusses; ohne diesen Anlauf startet das Gastgeberinnen-Bild darunter. Leistenhoehe plus Atemraum, damit das Bild nicht an der Goldlinie klebt: 88 + 64 auf Desktop, 76 + 40 ab 768px abwaerts. */ .gg-anfrage{ padding:calc(var(--nav-h) + 64px) 0 56px; } @media(max-width:768px){ .gg-anfrage{ padding-top:calc(var(--nav-h) + 40px); } } /* Die Eyebrow steht AUSSERHALB des Rasters, linksbuendig ueber dem gesamten Block und damit buendig mit der linken Kante des Bildes: beide sitzen auf der Fluchtachse des Containers. Innerhalb der Textspalte haette sie den Block optisch in der Mitte begonnen statt an seiner Kante. */ .gg-eyebrow{ margin-bottom:32px; } @media(max-width:820px){ .gg-eyebrow{ margin-bottom:24px; } } /* align-items:start statt center: beide Spalten beginnen auf der Zeilenober- kante, damit die Ueberschrift auf der Bildoberkante ansetzen kann (siehe --gg-title-lift). Die Spaltenbreite folgt der Bildbreite (240px), damit der versetzte Goldrahmen rechts nicht in die Textspalte laeuft. */ .gg-inner{ display:grid; grid-template-columns:240px minmax(0,1fr); gap:64px; align-items:start; } @media(max-width:820px){ .gg-inner{ grid-template-columns:1fr; gap:44px; justify-items:center; } .gg-text{ text-align:left; } } /* Bild der Gastgeberin. Masse und Rahmenbehandlung 1:1 aus .host-photo der Micropage: 240x300, Deckbild, versetzter Goldrahmen ueber ::after (16px). BEWUSST ohne eigenen Stapelkontext (kein isolation, kein z-index auf .gg-photo): erst dadurch faellt der Rahmen per z-index:-1 hinter die Bildflaeche und bleibt nur ausserhalb sichtbar. Ein Stapelkontext zoege die Linie ueber das Foto und ergaebe einen anderen Rahmen als auf der Micropage. Flex-Zentrierung traegt nur den Initial-Platzhalter, bei gesetztem Foto ohne sichtbare Wirkung. margin:0 hebt den figure-Default des Browsers (1em 40px) auf, sonst saesse das Bild eingerueckt und 16px tiefer als die Textspalte. */ .gg-figure{ display:flex; flex-direction:column; align-items:center; margin:0; } .gg-photo{ width:240px; height:300px; background:var(--creme-deep) center/cover no-repeat; position:relative; display:flex; align-items:center; justify-content:center; font-family:var(--serif-display); font-size:56px; color:var(--oro); line-height:1; } .gg-photo::after{ content:''; position:absolute; top:16px; left:16px; right:-16px; bottom:-16px; border:1px solid var(--gold); z-index:-1; } @media(max-width:820px){ .gg-photo{ width:200px; height:250px; font-size:46px; } } /* OPTISCHE BUENDIGKEIT der Ueberschrift mit der Bildoberkante. align-items:start legt den KASTEN der Textspalte auf die Bildoberkante, nicht die sichtbare Schrift. Zwischen Kastenoberkante und dem Scheitel des "D" liegen zwei Anteile: die halbe Durchschusslücke (line-height minus Schriftkegel) und der Abstand von der Oberlaenge zur Versalhoehe. Zusammen rund 0.29 der Schriftgroesse bei Playfair Display in 1.18er Durchschuss. Als em notiert, damit der Ausgleich die clamp-Groesse mitwandert, und als Variable (oben an .gg), damit es EINE Stellschraube gibt statt eines verstreuten Wertes. Der Messwert kommt aus dem CDP-Lauf (Ink-Oberkante per canvas actualBoundingBoxAscent gegen die Bildoberkante). */ .gg-title{ font-family:var(--serif-display); font-weight:400; font-size:clamp(28px,3.6vw,42px); line-height:1.18; letter-spacing:-0.01em; max-width:16em; margin-top:calc(var(--gg-title-lift) * -1); } .gg-title em{ font-style:italic; } /* Gestapelt gilt die Ausrichtung nicht: dort beginnt der Text im normalen Fluss. */ @media(max-width:820px){ .gg-title{ margin-top:0; } } /* Der Anlauf traegt den Abstand allein: bis 08/2026 stand zwischen Ueberschrift und Begruessungstext die Ortszeile mit eigenem Vorlauf (18px). Ohne sie waeren die bisherigen 24px zu knapp unter einer 42px-Zeile, deshalb 28px. */ .gg-note{ max-width:34em; margin-top:28px; color:var(--ink-soft); font-size:16px; } /* Ohne Ueberschrift darueber (Buchungsseite) beginnt die Ansprache oben buendig mit dem Bild. Der Vorlauf haette dort nichts, wovon er abruecken koennte. */ .gg-buchung .gg-note{ margin-top:0; } /* Signatur der Gastgeberin: EINE Zeile unter dem Begruessungstext, beide Werte aus der Datenbank (hosts.display_name, hosts.provider_name). Der Name traegt die Auszeichnung von .host-provider der Micropage (Playfair kursiv 18px, Oro), der Firmenname bleibt in derselben Zeile eine Spur leiser, damit die Zeile nicht zweistimmig wird. Fehlt ein Wert, faellt er samt Mittelpunkt weg. */ .gg-signature{ margin-top:28px; font-family:var(--serif-display); font-style:italic; font-size:18px; line-height:1.4; color:var(--oro); } .gg-signature .gg-brand{ color:var(--stone); } @media(max-width:820px){ .gg-signature{ margin-top:20px; } }