/* ============================================================ SDO — Seekda-Widget Integrations-Layer (token-getrieben) Das Inline-Widget ist Light-DOM → wir ziehen Schrift + Grundton auf unser CD. Farben-Vollangleich + Hosted-Checkout laufen ZUSÄTZLICH über Seekdas Styling-Konfig (Hotel Manager). Hier: Seiten-Integration + Schrift-Angleich (killt den Lato-Fremdkörper). ============================================================ */ /* ============================================================ EINWILLIGUNGS-GATE (Click-to-Load) — steht vor dem Widget auf /buchen/. Ohne Klick lädt kein Seekda-Code: keine 10 fremden Hosts, keine 2 Cookies. min-height ≈ Höhe der späteren Suchleiste → beim Freischalten kein Layout-Sprung. Nur /buchen/ trägt das Gate; die Wohnungsseiten verlinken hart (kein Widget). ============================================================ */ .seekda-gate{ position:relative; overflow:hidden; background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-soft); min-height:260px; display:flex; align-items:center; } .seekda-gate[hidden]{ display:none; } /* Solange das Gate steht, sind die Widget-Container leer — ohne das hier stünde eine leere weiße Karte unter dem Gate. Freigabe setzt .seekda-frei auf . */ .seekda-slot{ display:none; } body.seekda-frei .seekda-slot{ display:block; } /* Vorschau des echten Widgets: unscharf + entsättigt hinter dem Text. Der Gast sieht, dass dort eine Suchleiste mit Ergebnissen wartet — statt vor einer leeren Fläche zu entscheiden. Statisches, selbst gehostetes Bild (2,5 KB) — kein Fremdkontakt, das ist der ganze Punkt. */ /* Überskaliert (scale 1.18): so fallen die Kartenkanten der Vorschau AUSSERHALB des Gates — sonst steht im Bild eine Naht (gerundete Ecke, Kartenrand) und es sieht aus wie ein schlecht beschnittener Screenshot statt wie ein Hintergrund. */ .seekda-gate__vorschau{ position:absolute; inset:0; z-index:0; overflow:hidden; background:url(../img/buchungstool-vorschau.webp) center center/cover no-repeat; filter:blur(2.5px) saturate(1); opacity:1; transform:scale(1.18); } /* Gerichteter Schleier statt Flächen-Nebel: links dicht (der Text muss tragen), nach rechts offen (dort darf die Vorschau wirken). Gleiche Mechanik wie .cover::after im Haupt-Stylesheet. Die dichte Zone deckt exakt --gate-text (die Textspalte) ab — der Text kann also nicht in die offene Zone hineinwachsen, egal wie lang die Copy wird. Sicher durch Konstruktion, nicht durch Nachmessen. */ .seekda-gate{ --gate-text:50%; } .seekda-gate::after{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(90deg, rgba(252,251,248,.97) 0%, rgba(252,251,248,.95) var(--gate-text), rgba(252,251,248,.30) 74%, rgba(252,251,248,.06) 100%); } .seekda-gate__in{ position:relative; z-index:2; padding:clamp(1.6rem,4vw,2.6rem); max-width:var(--gate-text); display:flex; flex-direction:column; align-items:flex-start; gap:.7rem; } /* Kein eigenes h2 im Gate (das h1 der Seite trägt) → der Lead-Absatz ist der Textanker und darf entsprechend größer stehen. */ .seekda-gate__p{ font-size:1.15rem; line-height:1.55; color:var(--ink); margin:0; } .seekda-gate__p a{ color:var(--gold-deep); text-decoration:underline; text-underline-offset:2px; } .seekda-gate__btns{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:.3rem; } /* Die Vollauskunft: einen Klick entfernt, nicht im Weg. */ .seekda-gate__mehr{ margin-top:.2rem; max-width:62ch; } .seekda-gate__mehr summary{ cursor:pointer; font-family:var(--font-b); font-weight:500; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--meta); } .seekda-gate__mehr summary:hover{ color:var(--gold-deep); } .seekda-gate__mehr p{ margin:.7rem 0 0; font-size:.85rem; line-height:1.6; color:var(--meta); } .seekda-gate__mehr a{ color:var(--gold-deep); text-decoration:underline; text-underline-offset:2px; } /* Mobil trägt die Vorschau nicht mehr — bei 390px ist von der Suchleiste nichts zu erahnen, sie würde nur den Text stören. Also: Textspalte über die volle Breite, Schleier deckt durch, Vorschau bleibt als leiser Rest stehen. */ @media(max-width:760px){ .seekda-gate{ --gate-text:100%; min-height:0; } .seekda-gate::after{ background:rgba(252,251,248,.93); } .seekda-gate__vorschau{ opacity:.5; } .seekda-gate__btns .btn{ width:100%; justify-content:center; } } .sdo-seekda{ width:100%; color:var(--body); } /* Schrift-Angleich: das Widget erzwingt sonst Lato — wir überschreiben mit unserer Hanken. Bewusst NUR Text-Elemente; svg/i (Icon-Glyphen) ausgenommen, damit nichts bricht. */ .sdo-seekda, .sdo-seekda div, .sdo-seekda span, .sdo-seekda p, .sdo-seekda a, .sdo-seekda button, .sdo-seekda input, .sdo-seekda select, .sdo-seekda textarea, .sdo-seekda label, .sdo-seekda h1, .sdo-seekda h2, .sdo-seekda h3, .sdo-seekda h4, .sdo-seekda li{ font-family:var(--font-b) !important; } /* Icon-Fonts zurückgeben — sonst Tofu (□). Seekda-Glyphen liegen auf .bf-icon / .kbe-icon (Font 'bf-icons') bzw. den Slider-Pfeilen (Font 'slick'). NICHT mit Hanken überschreiben. */ .sdo-seekda [class*="bf-icon"], .sdo-seekda [class*="kbe-icon"]{ font-family:'bf-icons' !important; } .sdo-seekda [class*="slick"]{ font-family:'slick' !important; } /* Searchbar = ruhige, souveräne Karte auf Naturweiß (Galerie, nicht Marktschreier) */ .sdo-seekda--searchbar{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); padding:clamp(1rem,2.4vw,1.5rem); } /* Rates/Offers: großzügig, aber ohne riesige Leer-Reserve (Inventar folgt von den Grafs) */ .sdo-seekda--rates, .sdo-seekda--offers{ margin-top:clamp(1.4rem,3.5vw,2.6rem); } .sdo-seekda__widget{ min-height:52px; } /* No-JS-Fallback */ .sdo-seekda__fallback{ display:inline-flex; margin-top:1rem; } /* Detailseite: Seekdas Default-„Gesamtpreis" (7-Nächte-Total ohne Datumswahl) ausblenden. Der Nachtpreis steht als eigene Headline direkt über dem Button; der native Buchen-Button und der Zimmerkalender bleiben. So ist „Preis wie vorne + Button einzeln" umgesetzt. */ .detail-book .kbe-room-card-price{ display:none; } /* ============================================================ CD-Angleich (Weg A: Widget branden) — 2026-07-09 Farbe/Font kommen bereits aus Seekdas Styling-Konfig (Gold + Schiefer) — das bleibt die dauerhafte Heimat und wird hier NICHT dupliziert. Hier NUR was Seekda nicht kann: Zeile füllen, Lesbarkeit, und der Pill→leicht-eckig-Radius (unsere --radius-Tokens). ⚠️ Override auf Seekda-Interna (.bf-*/.kbe-*): nach Seekda-Widget-Updates kurz gegenprüfen. Bewusst minimal + strukturell gehalten. ============================================================ */ /* ── Suchleiste: volle Zeile statt zentriertem 900px-Klumpen ── Seekda deckelt den Params-Container bei max-width:900px + zentriert ihn. Cap lösen → die inneren flex-grow-Items (Datum/Belegung/Aktion) spreizen über die Zeile. !important, weil Seekdas Property-Theme diese Werte injiziert (schlägt sonst unser CSS). */ .sdo-seekda--searchbar .kbe-search-bar-wrapper{ justify-content:stretch !important; } .sdo-seekda--searchbar .kbe-booking-params-wrapper{ max-width:none !important; width:100% !important; flex:1 1 auto !important; border-radius:var(--radius) !important; } .sdo-seekda--searchbar .bf-date-range-picker-inputs-wrapper{ flex:1 1 auto; } /* ── Lesbarkeit: Feldwerte + Labels raus aus dem Kleingedruckten ── */ .sdo-seekda--searchbar .kbe-search-bar-content, .sdo-seekda--searchbar .bf-search-bar-content{ font-size:1rem !important; height:auto !important; min-height:42px; } .sdo-seekda--searchbar .bf-date-range-picker-input{ font-size:1rem !important; } .sdo-seekda--searchbar .kbe-header-occupancy-selector{ font-size:1rem !important; height:auto !important; min-height:42px; } .sdo-seekda--searchbar .kbe-search-bar-item-label, .sdo-seekda--searchbar .bf-search-bar-item-label{ font-size:.8125rem !important; opacity:.7 !important; letter-spacing:.01em; } /* ── Radien: Seekda-Pill (12–15px, per Theme injiziert) → unser leicht eckiges CD ── */ .sdo-seekda .kbe-search-bar-content, .sdo-seekda .bf-search-bar-content, .sdo-seekda .bf-date-range-picker-input, .sdo-seekda .bf-button, .sdo-seekda .kbe-card-button, .sdo-seekda .kbe-room-card-selection-button .bf-button{ border-radius:var(--radius) !important; } .sdo-seekda .kbe-room-card, .sdo-seekda .kbe-card{ border-radius:var(--radius-lg) !important; } /* ── Karten auf unser Naturweiß, komplett flach (kein Rahmen, KEIN Schatten) ── Der Schatten las sich als „grauer Rahmen". Weiß auf Creme + Abstand = genug Trennung. */ .sdo-seekda .kbe-card{ background:var(--surface) !important; border:none !important; box-shadow:none !important; } .sdo-seekda .kbe-room-card-image{ box-shadow:none !important; } /* ── Eigener „Anwenden"-Button im Belegung-Popup (Seekda liefert keinen) ── */ .sdo-belegung-apply{ display:block; width:fit-content; min-width:180px; margin:1rem 0 .25rem auto; padding:.7rem 1.4rem; background:var(--blue); color:#fff; border:none; border-radius:var(--radius); cursor:pointer; font-family:var(--font-b); font-size:.72rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase; transition:background .15s ease; } .sdo-belegung-apply:hover{ background:var(--blue-deep); } /* ============================================================ CD-Angleich Runde 2 — Karten-Vertikalrhythmus + Suchleisten-Grundlinie + Mobile-Kalender — 2026-07-09 ============================================================ */ /* ── Raten-Karte, beide Breakpoints ── */ /* Bild kleiner + statischer Neutralton statt Endlos-Ladeschimmer (die Einheiten haben in Seekda noch keine Fotos → Shimmer läuft ewig). */ /* Bild = einheitliche 3:2-Landscape-Kachel. Feste Höhe auf Container UND (das echte Foto ist 273px hoch → sprengte sonst die Karte / verdeckte mobil die Überschrift). object-fit:cover füllt sauber, kein grauer Reststreifen. Der --line-Ton bleibt Fallback für Einheiten ohne Foto. */ .sdo-seekda .kbe-room-card-image{ height:200px !important; align-self:start !important; overflow:hidden !important; border-radius:var(--radius-lg) !important; animation:none !important; background:var(--line) !important; } .sdo-seekda .kbe-room-card-image img{ height:200px !important; width:100% !important; object-fit:cover !important; display:block; } /* Titel in Marcellus (wie die Seiten-Headings = „aus einem Guss"). weight:400, weil Marcellus nur 400 mitbringt → 700 wäre klobiges Faux-Bold. */ .sdo-seekda .kbe-room-card-title{ font-family:var(--font-h) !important; font-weight:400 !important; } /* „Alle Ausstattungsmerkmale anzeigen" war 11px → lesbar. */ .sdo-seekda .bf-amenities-show-more-link{ font-size:.875rem !important; } /* Preis nicht mehr über die Titel-Oberkante rutschen lassen. */ .sdo-seekda .kbe-room-card-price{ margin-top:0 !important; } /* ── Desktop (≥721px): Grid-Rhythmus ── */ @media (min-width:721px){ /* Suchleiste: Belegung/DE saßen zu hoch → alle Werte auf eine Grundlinie. */ .sdo-seekda--searchbar .kbe-booking-params-wrapper{ align-items:flex-end !important; } .sdo-seekda--searchbar .kbe-search-bar-action-button-wrapper{ align-items:flex-end !important; } .sdo-seekda--searchbar .kbe-header-occupancy-selector-wrapper{ display:flex !important; flex-direction:column; justify-content:flex-end; } /* DE-Sprachwähler saß 14px zu tief → auf die Feld-Grundlinie heben. */ .sdo-seekda--searchbar .kbe-header-user-preferences-wrapper{ margin-bottom:12px !important; } /* Bildspalte schmaler; Preis oben (bündig Titel), Buchen-Button nach unten. */ .sdo-seekda .kbe-room-card{ grid-template-columns:300px minmax(0,1fr) 220px 0px !important; } .sdo-seekda .kbe-room-card-price-and-selection-wrapper{ justify-content:space-between !important; } } /* ── Mobile (≤720px): Kalender-Popup eindampfen ── Seekda-Zellen sind 60px hoch + zeigen unter JEDEM Tag „ab / € …" → viel zu groß. Preis-pro-Tag ausblenden (Preis erscheint eh nach Auswahl), Zellen niedriger. Kalender wird ggf. an portaliert → hier BEWUSST ungescopet (die Datei lädt nur auf Buchungsseiten, die Klassen gibt es nur durch Seekda). */ @media (max-width:720px){ /* td.CalendarDay: höhere Spezifität als Seekdas `.CalendarDay{height:60px!important}` (das sonst — gleiche Spezifität, später geladen — gewinnt). */ td.CalendarDay{ height:46px !important; max-height:46px !important; min-height:0 !important; width:14.285% !important; font-size:.9rem !important; } /* Kalender bricht per Inline-JS auf volle Viewport-Breite aus (DayPicker width:390px; left:-41px). Alle Container auf 100% des Overlays + Zellen/Kopf auf 1/7 (%) → Kalender bleibt in der Karte, Wochentags-Kopf und Tage-Raster proportional deckungsgleich. */ .DayPicker{ width:100% !important; left:0 !important; } .DayPicker_focusRegion, .DayPicker_transitionContainer, .CalendarMonthGrid, .CalendarMonthGrid_month__horizontal, .CalendarMonth, .CalendarMonth_table{ width:100% !important; } .DayPicker_weekHeader{ width:100% !important; left:0 !important; padding:0 !important; } .DayPicker_weekHeader_ul{ width:100% !important; } .DayPicker_weekHeader_li{ width:14.285% !important; } .bf-date-range-picker-day-price-wrapper, .bf-date-range-picker-day-price, .bf-date-range-picker-day-price-qualifier, .day-price{ display:none !important; } .CalendarMonth_caption{ font-size:1rem !important; padding:1rem 0 1.4rem !important; } /* Preisblock war 109px hoch mit riesigen Lücken zwischen Ab/Preis/Gesamtpreis → packen. */ .sdo-seekda .kbe-room-card-price-and-selection-wrapper{ margin-top:8px !important; } .sdo-seekda .kbe-room-card-price{ height:auto !important; justify-content:flex-start !important; gap:2px !important; } .sdo-seekda .kbe-room-card-selection-button{ margin-top:12px !important; } } /* ============================================================ Runde 4 — Bild-Radius, Belegung-Konsistenz, Datepicker entkanten, Header-Stacking (Header-z-index in style.css) — 2026-07-09 ============================================================ */ /* Belegung-Feld: flach + 4px wie unsere Felder, aber OHNE sichtbaren Rahmen. Nativ hat border:transparent; unser --line-Rahmen las sich als „grauer Kasten" (Marcel 13.07.). Der graue Feld-Fill (Seekda) reicht als Feld-Grenze. */ .sdo-seekda .kbe-header-occupancy-selector{ border-radius:var(--radius) !important; border:none !important; } /* Durch die Vollbreiten-Suchleiste ist das Feld breiter als der Wert → Wert füllt das Feld, Chevron an den rechten Rand (statt mittig „gestrandet" mit Leerraum). */ .sdo-seekda .kbe-header-occupancy-selector .kbe-dropdown{ width:100% !important; } .sdo-seekda .kbe-header-occupancy-selector .kbe-dropdown-click{ justify-content:space-between !important; } /* Datepicker war ein Tabellengitter (1px-Rahmen je Zelle, „kantig") → Rahmen weg, BEIDE Breakpoints. Seekdas `wrapper .CalendarDay{border:…!important}` hat 0,2,0 → wir brauchen ≥ Spezifität. Kalender wird an portaliert → bewusst ungescopet (Datei lädt nur auf Buchungsseiten). */ .CalendarMonth td.CalendarDay, .CalendarMonth_table td.CalendarDay{ border:none !important; } .CalendarMonth td.CalendarDay__selected_start{ border-top-left-radius:var(--radius) !important; border-bottom-left-radius:var(--radius) !important; } .CalendarMonth td.CalendarDay__selected_end{ border-top-right-radius:var(--radius) !important; border-bottom-right-radius:var(--radius) !important; } /* ============================================================ Runde 6 — Belegung-Zentrierung, Amenities-Modal, /wohnung-Kompaktkarte — 2026-07-09 ============================================================ */ /* Belegung-Wert saß oben im Feld (display:block) → vertikal zentrieren. */ .sdo-seekda .kbe-header-occupancy-selector{ display:flex !important; align-items:center !important; } /* Amenities-Modal war generisch-eckig (radius:0) → auf unser CD runden. */ .bf-modal-wrapper{ border-radius:var(--radius-lg) !important; overflow:hidden; } .bf-modal-wrapper .bf-modal-header, .bf-modal-wrapper h2, .bf-modal-wrapper h3{ font-family:var(--font-h) !important; } /* Button-Typografie auf UNSER CD-Rezept (Seekda: 16px/700/Satzform ≠ unsere 11,5px/500/0,18em/UPPERCASE). Das war der „Buttons passen nicht"-Bruch. Gilt für alle Seekda-Buttons. */ .sdo-seekda .kbe-card-button, .sdo-seekda .bf-button, .sdo-seekda .bf-button-primary{ font-size:.72rem !important; font-weight:500 !important; letter-spacing:.18em !important; text-transform:uppercase !important; } /* Preis-Zeilen enger (Seekda gibt jeder Zeile margin-top:10px → wirkt gerissen). */ .sdo-seekda .kbe-card-price-from-tag, .sdo-seekda .kbe-card-price, .sdo-seekda .kbe-card-price-reference{ margin-top:2px !important; } /* ============================================================ KONTRASTE im Widget — 2026-07-17 30 axe-Verstöße, zwei Ursachen: unser Markengold (das WIR in Seekdas Styling-Konfig gesetzt haben) und Seekdas eigenes #999999. Die Konfig im Hotel Manager bleibt die saubere Quelle — bis sie nachgezogen ist, ziehen wir hier gerade: Wir liefern die Seite aus, also haften wir für sie (§ 1 Abs. 4 Nr. 4 BFSG greift für den Kernprozess Vertragsschluss nicht). ⚠️ Hängt an Seekda-Klassennamen → nach Widget-Updates gegenprüfen. ============================================================ */ /* Seekdas #999999 auf Weiß = 2,84:1 (24×). Zwei Klassen von Text, zwei Antworten: 1. FAKTEN (Personen · m²) — Entscheidungsdaten, kein Kleingedrucktes. Bekommen dasselbe Rezept wie .u-card .meta auf der Übersicht (12,8px/500/--ink) → ein Bild über Widget und Website. Standen bei Seekda als 14px/300/#999999 = 2,84:1 (echter AA-Fail). ⚠️ Gekoppelt an .u-card .meta in style.css — dort steht der kanonische Wert. Ändert sich der, muss er hier mit. Beide weichen aktuell vom Manual ab (offener Punkt). */ .sdo-seekda .kbe-card-spec span{ font-size:.8rem !important; font-weight:500 !important; color:var(--ink) !important; } /* 2. ECHTE LABELS („Ab", „Gesamtpreis") — die dürfen zurücktreten, aber lesbar: var(--meta) = 5,30:1. */ .sdo-seekda .text-muted, .sdo-seekda .kbe-card-price-from-tag span, .sdo-seekda .kbe-card-price-reference span{ color:var(--meta) !important; } /* Unser Markengold auf #f5f5f5 = 2,64:1 (5×: Datumsfelder + Belegung-Anzeige). → var(--gold-deep) = 4,79:1. Gleicher Ton (85,5°), nur tief genug. ⚠️ Hohe Spezifität nötig: Seekdas Stylesheet kommt von kube-styling.seekda.com, wird zur LAUFZEIT nach unserem injiziert und trägt selbst !important. Bei gleicher Spezifität gewinnt das spätere — deshalb hier Element + zwei Klassen (0,3,1) statt nur einer Klasse. */ .sdo-seekda .kbe-dropdown-details span{ color:var(--gold-deep) !important; } .sdo-seekda input.bf-date-range-picker-input.search-bar-input-custom-class{ color:var(--gold-deep) !important; } /* „Suchen" — derselbe Knopf wie überall auf der Website: var(--gold-btn), der Verlauf aus den Tokens. Gilt für BEIDE Zustände: · aktiv → weiß auf dem Verlauf, Kern 4,83:1 (Seekdas #B8933D lag bei 2,89:1) · disabled → derselbe Verlauf, von Seekda auf opacity .4 gedimmt = blasses Markengold statt blassem Fremdgold. Kein Kontrast-Thema (WCAG 1.4.3 nimmt inaktive Elemente aus), aber der Knopf steht im Ausgangszustand da und muss zur Marke gehören. ⚠️ axe meldet den aktiven Zustand NIE (beim Laden ist der Knopf disabled → ausgenommen). Verläufe kann axe ohnehin nicht messen → nach Änderungen an echten Pixeln nachmessen. */ .sdo-seekda .bf-button-primary{ background:var(--gold-btn) !important; color:var(--white) !important; } /* ============================================================ Runde 11 — Belegung-Popup: Lesbarkeit + Alters-Auswahl aufs CD — 2026-07-09 ⚠️ Belegung-Popup = Seekda-Interna (react-select + Custom-Stepper) = Weg-A-Ceiling. Branden ist ok; für pixel-genaue Kontrolle wäre Weg B (eigene Belegung-UI) fällig. ============================================================ */ /* A) Belegung-Zusammenfassung nicht mehr abschneiden. Seekda erzwingt white-space:nowrap auf .kbe-dropdown-details → „1 Zimmer für 2 Erwachsene und 2 Kinder" wird im ~330px-Feld zu „…" gekürzt (mit Kindern immer, mobil sowieso). NUR die Zusammenfassung umbrechen lassen (Feld wächst in der Höhe, align-items:flex-end). ⚠️ Bewusst eng auf .kbe-dropdown-details gescopet — das Popup (.bf-occupancy-selector-content) ist ein separater Teilbaum und darf NICHT umbrechen (sonst „Zimmer Nr. 1" / react-select-Werte brechen ebenfalls um). */ .sdo-seekda .kbe-header-occupancy-selector .kbe-dropdown-details, .sdo-seekda .kbe-header-occupancy-selector .kbe-dropdown-details *{ white-space:normal !important; text-overflow:clip !important; } .sdo-seekda--searchbar .kbe-header-occupancy-selector{ line-height:1.25 !important; } /* B) Alters-Auswahl (react-select) auf unser CD. Seekda-Default: 0px-Ecken + graue rgba(0,0,0,.12)-Linie + vertikaler Trenner = Fremdkörper. Stabile Seekda-Klasse .children-age-select; react-select-Suffixe (-control/-menu/-option/ -indicator…) sind versionsstabiler als die emotion-css-Hashes → darüber targeten. */ .sdo-seekda .children-age-select [class*="-control"]{ border-radius:var(--radius) !important; border-color:var(--line) !important; min-height:42px !important; } .sdo-seekda .children-age-select [class*="-control"]:hover{ border-color:var(--blue) !important; } /* grauer Trenner-Strich vor dem Chevron raus; Chevron in Schieferblau. */ .sdo-seekda .children-age-select [class*="-indicatorSeparator"]{ display:none !important; } .sdo-seekda .children-age-select [class*="-indicatorContainer"]{ color:var(--blue) !important; } /* offenes Options-Menü ebenfalls auf CD (falls nicht an portaliert). */ .sdo-seekda .children-age-select [class*="-menu"]{ border-radius:var(--radius) !important; border:1px solid var(--line) !important; box-shadow:var(--shadow-sm) !important; overflow:hidden; } /* Mobil: das Alters-Feld ist eng (~80px seitlich neben dem Label) → „unter einem Jahr" wird zu „u…". Label über das Feld stapeln (Feld wird breiter) + den Wert notfalls umbrechen lassen statt abschneiden. react-selects interne Breiten-Logik lässt sich nicht zuverlässig voll aufziehen (Weg-A-Ceiling) → Umbruch ist der robuste, immer lesbare Weg. */ @media (max-width:720px){ .sdo-seekda .children-age-selector-wrapper > div{ flex-direction:column !important; align-items:stretch !important; gap:.25rem !important; } .sdo-seekda .children-age-select{ width:100% !important; min-width:100% !important; } .sdo-seekda .children-age-select [class*="-singleValue"], .sdo-seekda .children-age-select [class*="-option"]{ white-space:normal !important; line-height:1.2 !important; font-size:.9rem !important; } .sdo-seekda .children-age-select [class*="-control"]{ min-height:42px !important; height:auto !important; } } /* ============================================================ Runde 12 — Mobil-WORKAROUND: Belegung-Popup als sauberer Vollbild-Modal — 2026-07-09 ROOT CAUSE (gemessen): Seekdas Mobil-Popup-Wrapper .kbe-occupancy-selector-wrap ist position:fixed über die volle Höhe (100vh), ABER transparent + z-index:5 + nur ~308px breit (left:-12px) → die Suchleiste dahinter scheint durch = der scheinbare „Overlap". Fix an der Ursache: opaker Hintergrund + volle Breite + z-index ÜBER den Header (1100). Damit wird aus dem kaputt wirkenden Overlay ein sauberer Vollbild-Modal. Nur ≤720px (auf Desktop öffnet dasselbe Element korrekt als Panel unter dem Feld). ⚠️ Seekda-Interna → nach Widget-Update gegenprüfen. */ @media (max-width:720px){ /* Höhere Spezifität (3 Klassen), weil Seekdas Regel gleicher Stärke SPÄTER lädt und sonst gewinnt (s. Referenz §4.1). .sdo-seekda-Prefix + beide Wrap-Klassen. Klasse ist .kbe-occupancy-selector-WRAPPER (nicht -wrap). */ .sdo-seekda .kbe-dropdown-menu.kbe-occupancy-selector-wrapper{ left:0 !important; right:0 !important; width:100vw !important; max-width:100vw !important; background:#fff !important; z-index:1200 !important; overflow-y:auto !important; padding:1.25rem 1rem 2rem !important; box-sizing:border-box !important; } } /* /wohnung-Detailseite: das eingebettete Raten-Widget ist eine SCHMALE Sidebar-Karte. Unser breites 3-Spalten-Grid (für die /buchen-Liste) sprengt sie → Whitespace. Bild + Ausstattung stehen schon auf der Seite → hier nur Preis + Buchen-Button, gestapelt. */ .single-wohnung .sdo-seekda--rates .kbe-card, .single-wohnung .sdo-seekda--rates .kbe-room-card{ display:block !important; grid-template-columns:none !important; padding:0 !important; border:none !important; background:transparent !important; box-shadow:none !important; } .single-wohnung .sdo-seekda--rates .kbe-room-card-image, .single-wohnung .sdo-seekda--rates .kbe-room-card-main-info-wrapper{ display:none !important; } .single-wohnung .sdo-seekda--rates .kbe-room-card-price-and-selection-wrapper{ width:100% !important; } .single-wohnung .sdo-seekda--rates .kbe-room-card-selection-button .bf-button, .single-wohnung .sdo-seekda--rates .kbe-card-button{ width:100% !important; } /* Preis links + kompakt (schwebte rechts in leerer Box). */ .single-wohnung .sdo-seekda--rates .kbe-room-card-price{ height:auto !important; text-align:left !important; align-items:flex-start !important; } .single-wohnung .sdo-seekda--rates .kbe-card-price, .single-wohnung .sdo-seekda--rates .kbe-card-price-from-tag, .single-wohnung .sdo-seekda--rates .kbe-card-price-reference{ text-align:left !important; } /* Inline-Zimmerkalender raus (ging unschön „auf") — Datumswahl passiert im Seekda-Checkout. */ .single-wohnung .sdo-seekda--rates .kbe-room-card-calendar-buttons, .single-wohnung .sdo-seekda--rates .kbe-room-card-calendar{ display:none !important; } /* Button-Abstand in der Kompaktkarte kleiner (Seekda mt:20px). */ .single-wohnung .sdo-seekda--rates .kbe-card-button-wrapper{ margin-top:12px !important; } /* ============================================================ Runde 13 — Belegung-Popup endlich sauber — 2026-07-13 ROOT CAUSE (live gemessen 13.07., 1440px + 390px): • DESKTOP: Seekda rendert das Popup als VOLLBREITE zentrierte Platte — Klasse .kbe-dropdown-center, inline `width:1126px; left:-448px` — mit einem 1px-Schatten-Ring (`box-shadow: … 0 0 0 1px`). Das ist „dieser Rahmen" + „nicht am Rand, sondern mittig"; zusätzlich poppt es ÜBER die Searchbar (verdeckt SUCHEN). • MOBIL: erzwungenes 100vh-Overlay → Inhalt 242px, darunter ~520px leerer Weißraum; CTA + Zusammenfassung gequetscht. FIX: Desktop → kompakte, unter dem Belegung-Feld verankerte Dropdown-Karte (Seekdas Inline-Breite/-Position gekillt, eigenes Card-Chrome statt Ring, klar UNTER das Feld gesetzt). Mobil → Bottom-Sheet (height:auto, unten angedockt, Griff + gerundete Oberkante) + Vollbreite-„Anwenden". ⚠️ Override auf Seekdas Inline-Positionierung + späten Inject → nach jedem Seekda-Widget-Update gegenprüfen (s. seekda-widget-styling.md §4). ============================================================ */ /* ── Stepper-Buttons (+/−) aufs CD (beide Breakpoints) ── Waren graue Default-Kästchen (bg #eaeaea, Rand #aeaeae). Stabile Klasse .number-picker-button (Minus trägt zusätzlich Seekdas Typo-Klasse „number-pucker-button-minus" → wir targeten die gemeinsame Basisklasse). Naturweiß + Hairline, +/− in Schieferblau, Hover blau, disabled gedimmt. */ .sdo-seekda .number-picker-button.bf-button{ background:var(--surface) !important; border:1px solid var(--line) !important; color:var(--blue) !important; border-radius:var(--radius) !important; } .sdo-seekda .number-picker-button.bf-button:hover:not(:disabled){ border-color:var(--blue) !important; background:#fff !important; } .sdo-seekda .number-picker-button.bf-button:disabled{ opacity:.45 !important; } /* ── Desktop (≥721px): Vollbreit-Platte → verankerte Dropdown-Karte ── */ @media (min-width:721px){ .sdo-seekda .kbe-dropdown-menu.kbe-occupancy-selector-wrapper{ width:min(460px, 46vw) !important; max-width:460px !important; left:0 !important; /* Seekdas -448px killen → unter dem Belegung-Feld statt Vollbreite */ right:auto !important; top:calc(100% + 10px) !important; /* klar UNTER das Feld → kein Overlap über SUCHEN mehr */ border:1px solid var(--line) !important; border-radius:var(--radius-lg) !important; box-shadow:0 14px 34px rgba(64,98,119,.15) !important; /* ersetzt Seekdas 1px-Ring */ padding:1.3rem 1.4rem 1.2rem !important; overflow:visible !important; } /* Eigener „Anwenden"-Button nimmt in der schmalen Karte volle Breite. */ .sdo-seekda .kbe-dropdown-menu.kbe-occupancy-selector-wrapper .sdo-belegung-apply{ width:100% !important; min-width:0 !important; margin:1.1rem 0 0 !important; } /* Kinder-Fall: Seekda reiht [Zimmer-Titel · Erwachsene · Kinder · Alters-Block] in EINER Flex-Zeile (.selectors-center-wrapper, nowrap) → ~643px, sprengt die 460px-Karte, Select nur 80px = „u…". Fix: die Flex-Zeile umbrechen lassen + Alters-Block auf volle Breite in die nächste Zeile UNTER die Stepper. Wie Mobil. */ .sdo-seekda .kbe-occupancy-selector-wrapper .selectors-center-wrapper{ flex-wrap:wrap !important; } .sdo-seekda .kbe-occupancy-selector-wrapper .children-age-selector-wrapper{ flex-basis:100% !important; width:100% !important; margin-top:.7rem !important; } .sdo-seekda .kbe-occupancy-selector-wrapper .children-age-select{ min-width:160px !important; } } /* ── Mobil (≤720px): aus dem leeren 100vh-Void ein Bottom-Sheet ── */ @media (max-width:720px){ .sdo-seekda .kbe-dropdown-menu.kbe-occupancy-selector-wrapper{ top:auto !important; bottom:0 !important; height:auto !important; max-height:88vh !important; border-radius:18px 18px 0 0 !important; box-shadow:0 -10px 34px rgba(0,0,0,.20) !important; padding:1.6rem 1.15rem 1.5rem !important; } /* Sheet-Griff oben mittig als Affordance. */ .sdo-seekda .kbe-dropdown-menu.kbe-occupancy-selector-wrapper::before{ content:""; position:absolute; top:.6rem; left:50%; transform:translateX(-50%); width:42px; height:4px; border-radius:2px; background:var(--line); } /* CTA volle Breite statt 180px rechts gequetscht. */ .sdo-seekda .kbe-dropdown-menu.kbe-occupancy-selector-wrapper .sdo-belegung-apply{ width:100% !important; min-width:0 !important; margin:1.2rem 0 0 !important; padding:.9rem 1.4rem !important; } }