/* ========================================================= BUCHUNGSMASKE (easybooking, Direkt-Variante) Stand: alle vier Schritte, Schritt 2 nach dem Zurückklicken ("Seite 2"), Preisfeld mit Warenkorb-Fenster, Footer und Verfügbarkeitskalender in Schritt 1 fertig gestaltet. Aufbau: 0–0f gemeinsame Werte und Regeln für alle Schritte (Variablen, Trennstriche, Spaltenabstand, Felder und Labels, Feldabstände), 1–6 Reiter, Buttons, Buttonleiste und Preisfeld samt Warenkorb-Fenster, 7 Schritt 1, 8–9 Scrollbar, Schrift, Links, 10 Schritt 2, 11 Kalender, 12 Galerie, 13 Schritt 3, 14 Schritt 4, 15 Ladeanzeige, 16 Hinweis-Meldungen, 17 Footer der Maske, 18 Verfügbarkeitskalender (Schritt 1). Schriftformate zentral in 0b: Box-Überschrift (--fr-heading-*), Titel (--fr-title-*) und Fließtext (--fr-text-*). Englische Seite: eigene Texte per html:lang(en) jeweils direkt nach der deutschen Regel (1c, 13, 18e). Dazu gehören fünf Scripts (buchungsmaske.js): Platzhalter im Anmerkungsfeld (Schritt 3), Mindestdauer der Ladeanzeige (15d), Schließen des Warenkorb-Fensters per Klick aufs Glas/Esc (6e), Verfügbarkeitskalender in Schritt 1 (18) und "Ihre persönlichen Daten" in Schritt 4 beim Laden zugeklappt (14d). ========================================================= */ /* --------------------------------------------------------- 0. GRUNDLAYOUT (Breite der gesamten Maske, alle Schritte) --------------------------------------------------------- */ /* Ab 576px: easybooking begrenzt die Maske sonst stufenweise auf 546 / 738 / 962 / 1170px (Bootstrap-Stufen minus 30px), wodurch sie beim Verkleinern sprunghaft schmaler wird. Stattdessen wächst sie hier fließend mit (volle Breite, je 15px Rand) bis max. 1170px. Handy (unter 576px) und große Bildschirme (ab ca. 1200px) sehen dadurch genauso aus wie bisher. */ @media (min-width: 576px) { #ebFrontEndFrame #ebbeContainer { max-width: min(calc(100% - 30px), 1170px); } } /* Handy (bis 767px, wie Elementors Handy-Ansicht): Maske ohne den seitlichen Rand von je 15px, damit sie genauso breit ist wie die übrigen Elemente der Seite. Den Rand gibt Elementor vor. Steht nach der Regel darüber und gewinnt dadurch zwischen 576 und 767px. */ @media (max-width: 767.98px) { #ebFrontEndFrame #ebbeContainer { max-width: 100%; margin-left: 0 !important; margin-right: 0 !important; } } /* --------------------------------------------------------- 0b. GEMEINSAME WERTE (alle Schritte) Aussehen und Abstände der grauen Boxen und der Trennstriche an einer Stelle, Vorlage sind die Werte aus Schritt 3. Eine Änderung hier wirkt auf alle Boxen und Striche, die diese Variablen verwenden. --------------------------------------------------------- */ #ebFrontEndFrame { --fr-box-bg: #ecebe8; /* Hintergrund (auch aktiver Reiter und Hover, 1a) */ --fr-box-radius: 10px; /* Eckenrundung */ --fr-box-pad-y: 30px; /* Innenabstand oben und unten */ --fr-box-pad-x: 40px; /* Innenabstand links und rechts */ /* Innenabstand unten bei Boxen, die mit einem Feld enden (Schritt 1, Anmerkungen in Schritt 3, persönliche Daten und Gäste Daten in Schritt 4): das Feld wirkt sonst zu nah am Boxende */ --fr-box-pad-bottom-fields: calc(var(--fr-box-pad-y) + 10px); --fr-box-gap: 15px; /* Abstand zwischen Box, Strich, Buttons */ --fr-box-heading-gap: 20px; /* Abstand unter Box-Überschriften */ --fr-heading-size: 20px; /* Schriftgröße der Box-Überschriften */ --fr-heading-weight: 800; /* Schriftstärke der Box-Überschriften */ --fr-heading-line: 1.2; /* Zeilenhöhe der Box-Überschriften */ /* Titel-Format (Muster "Titel + Text": Gäste Daten, Zahlungs- optionen, Buchungsdetails, Zustimmung, Seite 2 in 10f, Warenkorb-Fenster in 6d) */ --fr-title-size: 1em; --fr-title-weight: 600; --fr-title-line: 1.3; --fr-gutter: 15px; /* Abstand zwischen Feldern in einer Zeile */ /* Heller Button: Zurück (3), Zurück-Hover, "Auswählen" (13) */ --fr-btn-light-bg: #ecebe8; /* Formularfelder (Textfelder, Dropdowns, Textbereiche), Aussehen wie die Produktkarten in Schritt 3. Schatten ausschalten: --fr-field-shadow: none */ --fr-field-bg: #ffffff; --fr-field-radius: .25rem; --fr-field-shadow: 0 2px 15px 0 rgba(0, 0, 0, .06); --fr-field-color: #262933; --fr-field-font-size: 16px; /* mind. 16px: iPhone zoomt sonst beim Antippen */ --fr-field-height: 46px; --fr-field-border-width: 2px; /* Rahmen immer da, nur bei Fehler sichtbar */ --fr-field-pad-x: 15px; --fr-field-pad-y: 10px; /* nur Textbereiche (mehrzeilig) */ --fr-field-row-gap: 16px; /* Abstand zwischen Feldzeilen untereinander (Vorlage Schritt 4) */ --fr-field-error: #dc3545; /* Markierung bei fehlender/falscher Eingabe */ /* Overlay (Galerie 12a, Pop-ups 13q, Ladeanzeige 15a, Warenkorb-Fenster 6e): dunkler Glas-Hintergrund wie die Elementor-Lightbox "LightboxGlass" */ --fr-overlay-bg: hsla(226, 15%, 17%, 0.9); --fr-overlay-filter: blur(20px) saturate(180%); /* Trennstrich: 10px Strich, 5px Lücke, 1px hoch, #cccccc. Nachbau der easybooking-Grafik single_dash_2x20.svg, hier eingebettet, damit nichts mehr vom easybooking-Server geladen wird (Update-Risiko). */ --fr-divider-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='1'%3E%3Crect width='10' height='1' fill='%23cccccc'/%3E%3C/svg%3E"); } /* Fließtext: CI-Schrift von easybooking in der Größe der Beschreibungstexte aus Schritt 2 (Versicherungsfeld 13f, Schritt 4 14j). Am #ebbeContainer, weil easybooking --ebCiFontFamily erst dort bereitstellt. */ #ebFrontEndFrame #ebbeContainer { --fr-text-font: var(--ebCiFontFamily); --fr-text-size: .9375em; --fr-text-weight: 400; /* Fließtext: Schriftstärke */ --fr-text-line: 1.5; /* Fließtext: Zeilenhöhe */ } /* Handy (bis 767px): seitlich gleich viel wie oben und unten, also rundum 30px */ @media (max-width: 767.98px) { #ebFrontEndFrame { --fr-box-pad-x: 30px; } } /* --------------------------------------------------------- 0c. TRENNSTRICHE (alle Schritte) Muster überall: Box, 15px, Strich, 15px, nächste Box bzw. abschließende Buttons. Alle Striche an einer Stelle, damit Aussehen und Abstände überall gleich bleiben. --------------------------------------------------------- */ /* 0c-a. Aussehen aller Striche */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepOne .stepOneRooms::after, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepTwo #ebbeStepTwoRooms .stepTwoRoomChoose .stepTwoRoomOverview::after, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepTwo .stepTwoCatList > .stepTwoOneRoom + .stepTwoOneRoom::before, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepTwo .stepTwoButtons.stepButtons::before, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepThree .stepThreeHeader::after, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepThree .stepThreeButtons.stepButtons::before, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepFour form.ebForm header.form-header::after, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepFour form.ebForm aside footer.buttons::before { content: "" !important; display: block !important; height: 1px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: var(--fr-divider-image) left top / 15px 1px repeat-x !important; } /* 0c-b. Strich nach der Übersichtsbox (Schritte 2 bis 4). Er hängt an der Übersichtsbox selbst (unterhalb, außerhalb der Box), damit er immer an derselben Stelle steht, egal welche Box easybooking danach ein- oder ausblendet. Die Box hält unten Platz für 15px + Strich + 15px frei. Folgt eine Box mit eigenen 15px Außenabstand oben, fallen die beiden Außenabstände zusammen (es gilt der größere). */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepTwo #ebbeStepTwoRooms .stepTwoRoomChoose .stepTwoRoomOverview, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepThree .stepThreeHeader, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepFour form.ebForm header.form-header { position: relative !important; margin-bottom: calc(var(--fr-box-gap) * 2 + 1px) !important; } #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepTwo #ebbeStepTwoRooms .stepTwoRoomChoose .stepTwoRoomOverview::after, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepThree .stepThreeHeader::after, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepFour form.ebForm header.form-header::after { position: absolute !important; left: 0 !important; right: 0 !important; bottom: calc(-1 * (var(--fr-box-gap) + 1px)) !important; } /* 0c-c. Strich vor den abschließenden Buttons */ /* Schritt 1: hinter der letzten Appartement-Box (als ::after am Container aller Appartement-Boxen, auch bei mehreren Appartements). Abstand zum Weiter-Button siehe 7j. */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepOne .stepOneRooms::after { clear: both; margin-top: var(--fr-box-gap) !important; } /* Schritte 2 bis 4: Strich an der Oberkante der Buttonleiste, darüber und darunter je 15px */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepTwo .stepTwoButtons.stepButtons, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepThree .stepThreeButtons.stepButtons, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepFour form.ebForm aside footer.buttons { position: relative !important; margin-top: var(--fr-box-gap) !important; padding-top: var(--fr-box-gap) !important; } #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepTwo .stepTwoButtons.stepButtons::before, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepThree .stepThreeButtons.stepButtons::before, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepFour form.ebForm aside footer.buttons::before { position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; } /* Buttons ohne eigenen Abstand nach oben, damit es genau 15px bleiben (gilt für alle Buttons der Leiste). Schritt 4 siehe Abschnitt 5. */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepTwo .stepTwoButtons.stepButtons button.eb-button, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepThree .stepThreeButtons.stepButtons button.eb-button { margin-top: 0 !important; } /* 0c-d. Strich zwischen den Appartement-Karten (Schritt 2): oben an jedem weiteren Appartement, darüber und darunter je 15px. Ersetzt die ausgeblendeten dashed-spacer von easybooking (10). Steht dadurch nur zwischen zwei Karten, nie nach der letzten (dort folgt der Strich vor den Buttons, 0c-c). */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepTwo .stepTwoCatList > .stepTwoOneRoom + .stepTwoOneRoom { position: relative !important; margin-top: var(--fr-box-gap) !important; padding-top: calc(var(--fr-box-gap) + 1px) !important; } #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepTwo .stepTwoCatList > .stepTwoOneRoom + .stepTwoOneRoom::before { position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; } /* --------------------------------------------------------- 0d. SPALTENABSTAND (alle Schritte) Felder nebeneinander in einer Zeile stehen genau --fr-gutter auseinander (Bootstrap: 30px, je 15px links und rechts an jeder Spalte). Jede Spalte bekommt die Hälfte links und rechts, die Zeile gleicht das mit der Hälfte nach außen aus, dadurch bleiben die Felder außen bündig mit dem Innenabstand der Box. Spezifität bewusst niedriger als die Regeln, die Zeilen oder Spalten gezielt auf null setzen (7h, 13k, 14a, 14e). --------------------------------------------------------- */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper .row { margin-left: calc(var(--fr-gutter) / -2); margin-right: calc(var(--fr-gutter) / -2); } #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper .row > .col, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper .row > [class*="col-"] { padding-left: calc(var(--fr-gutter) / 2); padding-right: calc(var(--fr-gutter) / 2); } /* --------------------------------------------------------- 0e. FORMULARFELDER UND LABELS (alle Schritte) Textfelder, Dropdowns und Textbereiche in der ganzen Maske einheitlich: weiß, ohne sichtbaren Rahmen, weicher Schatten, Rundung wie die Produktkarten in Schritt 3. Werte aus 0b. Nicht betroffen: Checkboxen, Radiobuttons, versteckte Felder, Buttons und der Kalender (#ebbe-datepicker-div, Abschnitt 11). Jedes Feld hat immer einen Rahmen in der Farbe des Hintergrunds (unsichtbar). Bei einem Fehler wird nur seine Farbe rot, die Größe bleibt gleich, nichts im Layout verschiebt sich. Die Pfeile der Dropdowns und die Kalender-Icons bleiben von easybooking (hier nur background-color, nie background). --------------------------------------------------------- */ /* 0e-a. Aussehen, auch beim Anklicken/Tippen und bei schreibgeschützten Feldern (Geburtsdatum öffnet den Kalender) */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="file"]), select, textarea):not(#ebbe-datepicker-div *), #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="file"]), select, textarea):not(#ebbe-datepicker-div *):focus { background-color: var(--fr-field-bg) !important; border: var(--fr-field-border-width) solid var(--fr-field-bg) !important; border-radius: var(--fr-field-radius) !important; box-shadow: var(--fr-field-shadow) !important; outline: 0 !important; color: var(--fr-field-color) !important; font-family: var(--fr-font-family) !important; font-size: var(--fr-field-font-size) !important; font-weight: 400 !important; } /* 0e-b. Einzeilige Felder (Textfelder, Dropdowns): einheitliche Höhe, Text senkrecht mittig, seitlicher Innenabstand (abzüglich Rahmen, damit der Text genau --fr-field-pad-x vom Rand steht). Rechts bei Dropdowns kein Wert, damit der Pfeil seinen Platz behält. Links nicht beim Telefonfeld (Schritt 4), dort sitzt die Länderflagge. */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="file"]), select):not(#ebbe-datepicker-div *) { height: var(--fr-field-height) !important; min-height: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; line-height: normal !important; } #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="file"]):not([type="tel"]), select, textarea):not(#ebbe-datepicker-div *) { padding-left: calc(var(--fr-field-pad-x) - var(--fr-field-border-width)) !important; } #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="file"]), textarea):not(#ebbe-datepicker-div *) { padding-right: calc(var(--fr-field-pad-x) - var(--fr-field-border-width)) !important; } /* 0e-c. Platzhalter: gleiche Farbe, halb transparent, damit er sich vom echten Text abhebt */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="file"]), select, textarea):not(#ebbe-datepicker-div *)::placeholder { color: var(--fr-field-color) !important; opacity: .5 !important; } /* 0e-d. Fehlende oder falsche Eingabe: der immer vorhandene Rahmen (0e-a) wird rot, damit der Gast sieht, welches Feld fehlt. Größe und Schatten bleiben gleich. Deckt die üblichen Markierungen ab (Bootstrap und easybooking). */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper .was-validated :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="file"]), select, textarea):not(#ebbe-datepicker-div *):invalid, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper .has-error :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="file"]), select, textarea):not(#ebbe-datepicker-div *), #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="file"]), select, textarea):not(#ebbe-datepicker-div *):is(.is-invalid, .error, [aria-invalid="true"]) { border-color: var(--fr-field-error) !important; } /* Kein zusätzliches Warn-Icon (rotes X von Bootstrap) in Textfeldern: roter Rahmen und Hinweistext darunter reichen, und das Icon läge sonst über dem Text. Nur Textfelder, bei Dropdowns könnte background-image der Pfeil sein. */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper input.is-invalid:not([type="checkbox"]):not([type="radio"]), #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper .was-validated input:invalid:not([type="checkbox"]):not([type="radio"]) { background-image: none !important; } /* 0e-e. Labels über den Feldern: Aussehen aus Schritt 1, in allen Schritten gleich. Schritt 1 bis 3: label.control-label. Schritt 4: Labels ohne eigene Klasse in den Formularbereichen (ohne Checkbox- und Radiobutton-Beschriftungen). Immer als Block mit fester Zeilenhöhe (wie in Schritt 4), damit das Label überall gleich viel Höhe einnimmt. In Schritt 1 war es sonst ein Inline-Element mit der Zeilenhöhe der Umgebung (24px), die Felder standen dadurch 10px weiter auseinander. */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeContent label.control-label, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeContent #ebbeStepFour fieldset.form-section .form-group > label:not(.eb-checkbox):not(.eb-radio) { display: block !important; font-family: var(--fr-font-family) !important; font-size: 0.8em !important; font-weight: 500 !important; line-height: 1 !important; letter-spacing: 0 !important; text-transform: none !important; color: #262933 !important; padding-left: 1px !important; margin-top: 0 !important; margin-bottom: 10px !important; } /* Schritt 4: easybooking blendet diese Labels aus. Hier wieder sichtbar und normal über dem Feld, egal auf welchem Weg sie versteckt werden (ausgeblendet, unsichtbar, auf 1px verkleinert oder über das Feld gelegt). */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeContent #ebbeStepFour fieldset.form-section .form-group > label:not(.eb-checkbox):not(.eb-radio) { display: block !important; position: static !important; visibility: visible !important; opacity: 1 !important; width: auto !important; height: auto !important; clip: auto !important; clip-path: none !important; overflow: visible !important; transform: none !important; white-space: normal !important; } /* 0e-f. Aufgeklappte Auswahllisten: Schrift wie im Feld (Signika), kleiner (0.8em), Stärke 500. Normale Dropdowns (select): Die Liste zeichnet der Browser selbst. Chrome und Edge am Desktop übernehmen diese Regeln. Firefox zeichnet die Liste außerhalb der Seite und hat dort keinen Zugriff auf die Webschrift, Safari und Handys zeigen ihre eigene Systemliste. Dort bleibt die Liste, wie sie ist (ohne Nachteil für die Bedienung). Länderliste im Telefonfeld (Schritt 4): vom Plugin gebaut, greift überall. Der Kalender ist nicht betroffen. */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper select:not(#ebbe-datepicker-div *) option, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper select:not(#ebbe-datepicker-div *) optgroup, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper .iti__country-list, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper .iti__country-list * { font-family: var(--fr-font-family) !important; font-weight: 500 !important; } /* Größe nur an den Einträgen bzw. an der Liste selbst, nicht an allen Elementen darin: em würde sich sonst bei jeder Verschachtelung erneut verkleinern (Ländername und Vorwahl stecken in eigenen Spans). */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper select:not(#ebbe-datepicker-div *) option, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper .iti__country-list { font-size: 0.8em !important; } /* --------------------------------------------------------- 0f. SENKRECHTER ABSTAND ZWISCHEN FELDERN (alle Schritte) Vorlage ist Schritt 4: 16px zwischen dem Ende eines Felds und dem Label darunter (--fr-field-row-gap, 0b). Der Abstand sitzt nur ZWISCHEN den Zeilen (row-gap bzw. Abstand zur vorherigen Zeile), nie nach der letzten. Am Ende einer Box bleibt dadurch genau ihr Innenabstand. Stehen Felder nebeneinander, gibt es keinen Abstand; rutschen sie auf kleineren Bildschirmen untereinander, kommt er automatisch dazu. Ausgeblendete Zeilen zählen nicht mit. --------------------------------------------------------- */ /* 0f-a. Schritt 4: Feldgruppen ohne eigenen Abstand nach unten (Bootstrap: 1rem), der Abstand kommt aus den Zeilen */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeContent #ebbeStepFour fieldset.form-section .row > [class*="col"] > .form-group { margin-bottom: 0 !important; } /* Felder einer Zeile, die untereinander umbrechen */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeContent #ebbeStepFour fieldset.form-section .row { row-gap: var(--fr-field-row-gap); } /* Jede Zeile nach einer sichtbaren Zeile: Abstand nach oben. Die erste sichtbare Zeile bekommt keinen, auch wenn davor eine ausgeblendete steht (z. B. Privat/Geschäftlich, Firma). */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeContent #ebbeStepFour fieldset.form-section .row:not([style*="display: none"]) ~ .row { margin-top: var(--fr-field-row-gap) !important; } /* Datencontainer "Ihre persönlichen Daten": easybooking gibt ihm oben und unten 24px. Weg damit, oben gilt der Überschriftenabstand der Box (14d), unten ihr Innenabstand. */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeContent #ebbeStepFour fieldset.form-section #ebbeStepFourCustomerData { margin-top: 0 !important; margin-bottom: 0 !important; } /* "Gäste Daten": letztes Appartement ohne Abstand nach unten */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeContent #ebbeStepFour fieldset.form-section .room:last-child { margin-bottom: 0 !important; } /* 0f-b. Schritt 1: Felder, die umbrechen (Reisedaten auf Handy und Tablet, Erwachsene/Kinder auf dem Handy) */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeContent #ebbeStepOne .stepOneDates > .row, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeContent #ebbeStepOne .stepOneRooms .oneRoom > .row { row-gap: var(--fr-field-row-gap); } /* Titel "1. Appartement" steht immer in eigener Zeile (7f) und hat seinen eigenen Abstand nach unten (7i). Der Zeilenabstand wird hier mit einem gleich großen negativen Außenabstand aufgehoben, damit der Titel nicht weiter von den Feldern wegrückt. */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeContent #ebbeStepOne .stepOneRooms .oneRoom > .row > .rooms { margin-bottom: calc(-1 * var(--fr-field-row-gap)) !important; } /* --------------------------------------------------------- 1. REITER UND KOPFZEILE (ul#topnav, Preisfeld-Position) --------------------------------------------------------- */ /* 1a. Reiter: Grundform, inaktive und aktive Reiter, Hover/Fokus */ #ebbeContainer #ebbeAppWrapper #ebbeHeader #ebbeUserNav .navbar #topnav li button { border-top: 0px !important; border-left: 0px !important; border-right: 0px !important; border-radius: 10px 10px 0px 0px !important; padding: 20px 15px 15px 15px !important; border-bottom-width: 3px !important; /* Linie unter den Reitern (easybooking: .25rem) */ } /* Reiter-Leiste: Hintergrund und Rundung wie die Boxen (0b) */ #ebbeContainer #ebbeAppWrapper #ebbeHeader #ebbeUserNav .navbar #topnav { background-color: #ffffff; border-radius: var(--fr-box-radius); } /* Nur Smartphone: Icon+Text sitzen dadurch mittiger im Reiter */ @media (max-width: 575.98px) { #ebbeContainer #ebbeAppWrapper #ebbeHeader #ebbeUserNav .navbar #topnav li button { padding: 20px 5px 7px 5px !important; } } #ebbeContainer #ebbeAppWrapper #ebbeHeader #ebbeUserNav .navbar #topnav li button:disabled { border: 0px !important; } /* Inaktive Reiter (deaktiviert oder bereits besucht): Text und Icon in Einheitsfarbe statt Grau. Der aktive Reiter und Hover bleiben wie in den Regeln darunter. */ #ebbeContainer #ebbeAppWrapper #ebbeHeader #ebbeUserNav .navbar #topnav li:not(.active) button { color: #262933 !important; } #ebbeContainer #ebbeAppWrapper #ebbeHeader #ebbeUserNav .navbar #topnav li.active button { color: var(--ebCiBgColor, var(--ebLColor)); background-color: #ffffff; } #ebbeContainer #ebbeAppWrapper #ebbeHeader #ebbeUserNav .navbar #topnav li button:not(:disabled):focus-visible, #ebbeContainer #ebbeAppWrapper #ebbeHeader #ebbeUserNav .navbar #topnav li button:not(:disabled):hover { background-color: var(--fr-box-bg); color: var(--ebCiBgColor, var(--ebLColor)); } /* Linie unter den kommenden Reitern (nach dem aktiven): dunkler als bei easybooking (#e6eaee), damit sie auf der Leiste sichtbar bleibt. Hover und Fokus behalten die Farbe von easybooking. */ #ebbeContainer #ebbeAppWrapper #ebbeHeader #ebbeUserNav .navbar #topnav li.active ~ * button:not(:hover):not(:focus-visible) { border-color: #a4a49b !important; } /* 1b. Reiter-Text (.mobilehide) auf allen Geräten zeigen; die Maske blendet ihn sonst unter 992px aus */ #ebbeContainer #ebbeAppWrapper #ebbeHeader #ebbeUserNav .navbar #topnav li button .description.mobilehide { display: inline-block !important; } @media (max-width: 991.98px) { #ebbeContainer #ebbeAppWrapper #ebbeHeader #ebbeUserNav .navbar #topnav li button .description.mobilehide { font-size: 10px; } } @media (max-width: 575.98px) { #ebbeContainer #ebbeAppWrapper #ebbeHeader #ebbeUserNav .navbar #topnav li button .description.mobilehide { font-size: 8px; letter-spacing: 0; } } /* 1c. Text ersetzen (nur Reiter 3 und 4). Der Original-Text bleibt per visibility:hidden im Layout, Farbe/Größe vererben sich dadurch normal weiter (Aktiv-/Hover-Farbe wird nicht doppelt gepflegt). ::after zeigt den neuen Text an derselben Stelle. */ #ebbeContainer #ebbeAppWrapper #ebbeHeader #ebbeUserNav .navbar #topnav li[data-stepnum="3"] button .description.mobilehide, #ebbeContainer #ebbeAppWrapper #ebbeHeader #ebbeUserNav .navbar #topnav li[data-stepnum="4"] button .description.mobilehide { visibility: hidden; position: relative; } #ebbeContainer #ebbeAppWrapper #ebbeHeader #ebbeUserNav .navbar #topnav li[data-stepnum="3"] button .description.mobilehide::after, #ebbeContainer #ebbeAppWrapper #ebbeHeader #ebbeUserNav .navbar #topnav li[data-stepnum="4"] button .description.mobilehide::after { visibility: visible; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; } #ebbeContainer #ebbeAppWrapper #ebbeHeader #ebbeUserNav .navbar #topnav li[data-stepnum="3"] button .description.mobilehide::after { content: "Leistungen"; } #ebbeContainer #ebbeAppWrapper #ebbeHeader #ebbeUserNav .navbar #topnav li[data-stepnum="4"] button .description.mobilehide::after { content: "Buchen"; } /* Englische Seite (WPML setzt lang="en-…" im -Tag) */ html:lang(en) #ebbeContainer #ebbeAppWrapper #ebbeHeader #ebbeUserNav .navbar #topnav li[data-stepnum="3"] button .description.mobilehide::after { content: "Extras"; } html:lang(en) #ebbeContainer #ebbeAppWrapper #ebbeHeader #ebbeUserNav .navbar #topnav li[data-stepnum="4"] button .description.mobilehide::after { content: "Book"; } /* 1d. Kopfzeile insgesamt: Abstand nach unten, und ab Tablet/Handy werden Reiter und Preisfeld in eine gemeinsame Reihenfolge gebracht (zuerst Reiter, dann Preisfeld). Gilt für jeden Schritt. */ #ebbeContainer #ebbeAppWrapper #ebbeHeader { margin: 0 0 15px 0 !important; } @media (max-width: 991.98px) { #ebbeContainer #ebbeAppWrapper #ebbeHeader #ebbeUserNav { order: 1; } #ebbeContainer #ebbeAppWrapper #ebbeHeader #ebbeShoppingCart { order: 2; margin: 15px 0 0 0 !important; } } /* --------------------------------------------------------- 2. WEITER-BUTTON (dunkel, Kreis rechts, alle Schritte) Gilt auch für "Überspringen" in Schritt 3 (button.skip, derzeit per 13c ausgeblendet) und "Hinzufügen" im Pop-up der Zusatzleistungen (button#submitSelection), die von easybooking nicht die Klasse eb-button-next bekommen. --------------------------------------------------------- */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent button.eb-button.eb-button-next.eb-button-ci, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepThree .stepThreeHeader button.skip, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepThree dialog.eb-dialog button#submitSelection { --paddingNormal: 1.5rem; --paddingExtended: 1.5rem; display: inline-flex; align-items: center; justify-content: center; gap: .75rem; font-family: var(--fr-font-family); font-weight: 600; font-size: 14px; line-height: 1; text-transform: uppercase; letter-spacing: .03em; color: #ffffff; background-color: #2d313b; border: 0; border-radius: 10px; padding: 1rem 1.5rem; } #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent button.eb-button.eb-button-next.eb-button-ci::before, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepThree .stepThreeHeader button.skip::before, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepThree dialog.eb-dialog button#submitSelection::before { display: none; } /* "Überspringen": eigenes Pfeil-Icon von easybooking ausblenden, stattdessen erscheint der Kreis unten */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepThree .stepThreeHeader button.skip > i { display: none !important; } /* Kreis: gleiche Werte im Normal- und im Hover-Zustand */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent button.eb-button.eb-button-next.eb-button-ci::after, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent button.eb-button.eb-button-next.eb-button-ci:hover::after, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepThree .stepThreeHeader button.skip::after, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepThree .stepThreeHeader button.skip:hover::after, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepThree dialog.eb-dialog button#submitSelection::after, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepThree dialog.eb-dialog button#submitSelection:hover::after { content: ""; position: static; top: auto; right: auto; bottom: auto; left: auto; margin: 0; transform: none; opacity: 1; flex: 0 0 25px; width: 25px; height: 25px; border-radius: 50%; background-color: #ffffff; background-repeat: no-repeat; background-size: 10px auto; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 15'%3E%3Cpath d='M13.376 11.552l-.264-10.44-10.44-.24.024 2.28 6.96-.048L.2 12.56l1.488 1.488 9.432-9.432-.048 6.912 2.304.024z' fill='%23262933'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 15'%3E%3Cpath d='M13.376 11.552l-.264-10.44-10.44-.24.024 2.28 6.96-.048L.2 12.56l1.488 1.488 9.432-9.432-.048 6.912 2.304.024z' fill='%23262933'/%3E%3C/svg%3E"); transition: background-position .3s ease-in-out; } /* Ruhezustand: erster Pfeil im Kreis, zweiter links unten außerhalb */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent button.eb-button.eb-button-next.eb-button-ci::after, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepThree .stepThreeHeader button.skip::after, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepThree dialog.eb-dialog button#submitSelection::after { background-position: 7.5px 7px, -12px 26px; } /* Hover: erster Pfeil rechts oben hinaus, zweiter gleitet hinein ("Hinzufügen" nur, wenn der Button aktiv ist) */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent button.eb-button.eb-button-next.eb-button-ci:hover::after, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepThree .stepThreeHeader button.skip:hover::after, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepThree dialog.eb-dialog button#submitSelection:not(:disabled):hover::after { background-position: 30px -16px, 7.5px 7px; } /* "Hinzufügen" deaktiviert (solange keine Anzahl gewählt ist): gleiches Design, halb durchsichtig */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepThree dialog.eb-dialog button#submitSelection:disabled { opacity: .5 !important; cursor: not-allowed !important; } /* --------------------------------------------------------- 3. ZURÜCK-BUTTON (hell, Kreis links, gespiegelt) --------------------------------------------------------- */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent button.eb-button.eb-button-previous.eb-button-large.prevStep { align-items: center; justify-content: center; gap: .75rem; font-family: var(--fr-font-family); font-weight: 600; font-size: 14px; line-height: 1; text-transform: uppercase; letter-spacing: .03em; color: #2d3038; background-color: var(--fr-btn-light-bg); border: 0; border-radius: 10px; padding: 1rem 1.5rem; } #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent button.eb-button.eb-button-previous.eb-button-large.prevStep:hover { color: #2d3038; background-color: var(--fr-btn-light-bg); } /* Bootstrap setzt display bei d-lg-inline-block mit !important, daher hier ebenfalls */ @media (min-width: 992px) { #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent button.eb-button.eb-button-previous.eb-button-large.prevStep { display: inline-flex !important; } } #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent button.eb-button.eb-button-previous.eb-button-large.prevStep::after, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent button.eb-button.eb-button-previous.eb-button-large.prevStep:hover::after { display: none; } /* Kreis links: gleiche Werte im Normal- und im Hover-Zustand */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent button.eb-button.eb-button-previous.eb-button-large.prevStep::before, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent button.eb-button.eb-button-previous.eb-button-large.prevStep:hover::before { content: ""; display: block; position: static; top: auto; right: auto; bottom: auto; left: auto; margin: 0; transform: none; opacity: 1; flex: 0 0 25px; width: 25px; height: 25px; border-radius: 50%; background-color: #2d3038; background-repeat: no-repeat; background-size: 10px auto; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 15'%3E%3Cpath transform='translate(14 0) scale(-1 1)' d='M13.376 11.552l-.264-10.44-10.44-.24.024 2.28 6.96-.048L.2 12.56l1.488 1.488 9.432-9.432-.048 6.912 2.304.024z' fill='%23ffffff'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 15'%3E%3Cpath transform='translate(14 0) scale(-1 1)' d='M13.376 11.552l-.264-10.44-10.44-.24.024 2.28 6.96-.048L.2 12.56l1.488 1.488 9.432-9.432-.048 6.912 2.304.024z' fill='%23ffffff'/%3E%3C/svg%3E"); transition: background-position .3s ease-in-out; } /* Ruhezustand: erster Pfeil im Kreis, zweiter rechts unten außerhalb */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent button.eb-button.eb-button-previous.eb-button-large.prevStep::before { background-position: 7.5px 7px, 27px 26px; } /* Hover: erster Pfeil links oben hinaus, zweiter gleitet hinein */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent button.eb-button.eb-button-previous.eb-button-large.prevStep:hover::before { background-position: -15px -16px, 7.5px 7px; } /* --------------------------------------------------------- 3b. HINZUFÜGEN-BUTTON (Schritt 2, dunkel wie Weiter, Kreis rechts mit Plus statt Pfeil) --------------------------------------------------------- */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepTwo button.eb-button.eb-button-shopping-cart.select-item { display: inline-flex; align-items: center; justify-content: center; gap: .75rem; font-family: var(--fr-font-family); font-weight: 600; font-size: 14px; line-height: 1; text-transform: uppercase; letter-spacing: .03em; color: #ffffff; background-color: #262933; border: 0; border-radius: 10px; padding: 1rem 1.5rem; } #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepTwo button.eb-button.eb-button-shopping-cart.select-item::before { display: none; } /* Kreis: gleiche Werte im Normal- und im Hover-Zustand */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepTwo button.eb-button.eb-button-shopping-cart.select-item::after, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepTwo button.eb-button.eb-button-shopping-cart.select-item:hover::after { content: ""; position: static; top: auto; right: auto; bottom: auto; left: auto; margin: 0; transform: none; opacity: 1; flex: 0 0 25px; width: 25px; height: 25px; border-radius: 50%; background-color: #ffffff; background-repeat: no-repeat; background-size: 10px auto; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M5 0h2v5h5v2H7v5H5V7H0V5h5z' fill='%23262933'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M5 0h2v5h5v2H7v5H5V7H0V5h5z' fill='%23262933'/%3E%3C/svg%3E"); transition: background-position .3s ease-in-out; } /* Ruhezustand: erstes Icon im Kreis, zweites links unten außerhalb */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepTwo button.eb-button.eb-button-shopping-cart.select-item::after { background-position: 7.5px 7.5px, -12px 26px; } /* Hover: erstes Icon rechts oben hinaus, zweites gleitet hinein */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepTwo button.eb-button.eb-button-shopping-cart.select-item:hover::after { background-position: 30px -16px, 7.5px 7.5px; } /* --------------------------------------------------------- 4. BUTTONLEISTE SCHRITT 2 UND 3 (alle Größen): Zurück + Weiter nebeneinander, je 50 %, 15px Abstand. Ist nur Zurück sichtbar (Schritt 2 normal), volle Breite (siehe 10). Schritt 1 (nur Weiter): 7j, Schritt 4 (untereinander): Abschnitt 5. --------------------------------------------------------- */ /* Raster: zwei gleiche Spalten, Abstand wie zwischen Boxen, Strichen und Buttons (easybooking: je Größe unterschiedlich). Kein Zeilenabstand: Die zweite Rasterzeile "ratings" ist leer, ihr Abstand hing sonst unsichtbar unter den Buttons und vergrößerte den Abstand zum Footer (17a). */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent .stepButtons { grid-template-columns: 1fr 1fr !important; grid-template-rows: auto auto !important; grid-template-areas: "prevStep nextStep" "ratings ratings" !important; column-gap: var(--fr-box-gap) !important; row-gap: 0 !important; } /* Beide Buttons füllen ihre Spalte. Abstand nach oben: 0c. */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent .stepButtons button.eb-button.eb-button-previous.eb-button-large.prevStep, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent .stepButtons button.eb-button.eb-button-next.eb-button-ci { width: 100% !important; min-width: 0; float: none !important; clear: none !important; justify-self: stretch !important; margin: 0 !important; } /* Tablet und Handy: kompakteres Innenleben, damit Text und Kreis auch in schmalen Spalten Platz haben */ @media (max-width: 991.98px) { #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent .stepButtons button.eb-button.eb-button-previous.eb-button-large.prevStep, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent .stepButtons button.eb-button.eb-button-next.eb-button-ci { gap: .5rem; padding: 1rem .75rem; } } /* --------------------------------------------------------- 5. SCHRITT 4 (#ebbeStepFour): Buttons untereinander "Buchung abschließen" und "Zurück" auf allen Breiten in voller Breite untereinander, 15px Abstand. Der Strich darüber kommt aus 0c. Beide Footer (Buchen-Button in der aside, Zurück in footer.col-12 bzw. mobil in der aside) sind erfasst. --------------------------------------------------------- */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepFour footer button.eb-button { width: 100% !important; margin: 0 !important; float: none !important; } #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepFour footer button.eb-button.eb-button-previous.prevStep { margin-top: var(--fr-box-gap) !important; } /* --------------------------------------------------------- 6. PREISFELD (Warenkorb-Summe, button.shoppingCartSum) --------------------------------------------------------- */ /* 6a. Alle Größen: kein Farbwechsel bei Hover, Aktiv und Fokus */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeHeader #ebbeShoppingCart #ebbeShoppingCartWrapper button.shoppingCartSum:hover, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeHeader #ebbeShoppingCart #ebbeShoppingCartWrapper button.shoppingCartSum:active, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeHeader #ebbeShoppingCart #ebbeShoppingCartWrapper button.shoppingCartSum:focus { background-color: var(--ebCiBgColor) !important; color: var(--ebCiColor) !important; border-color: var(--ebCiBgColor) !important; box-shadow: none !important; transition: none !important; } /* Tastaturfokus bleibt sichtbar (Barrierefreiheit) */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeHeader #ebbeShoppingCart #ebbeShoppingCartWrapper button.shoppingCartSum:focus-visible { outline: 2px solid var(--ebCiColor); outline-offset: -5px; } /* Beschriftung "Ihr Gesamtpreis:": kleiner und kräftiger als bei easybooking (.875em, normal), damit der Preis klar dominiert. Alle Größen. */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeHeader #ebbeShoppingCart #ebbeShoppingCartWrapper button.shoppingCartSum .totalPriceLabel { font-size: .7em; font-weight: 600; } /* 6b. Desktop (ab 992px): Feld passt sich dem Inhalt an. */ @media (min-width: 992px) { /* Container: Breite folgt dem Inhalt, 30px Abstand zu den Reitern */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeHeader #ebbeShoppingCart { flex: 0 0 auto !important; width: auto !important; max-width: none !important; margin-left: 30px !important; } /* Button: Raster aus Beschriftung (oben), Preis und Pfeil (darunter), Warnsymbol rechts */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeHeader #ebbeShoppingCart #ebbeShoppingCartWrapper button.shoppingCartSum { width: auto !important; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; grid-template-areas: "title title alert" "price icon alert"; justify-content: start; align-content: center; align-items: center; column-gap: 0; row-gap: 0rem; padding: .75rem 1.2rem .35rem 1.5rem; line-height: 1.2; text-align: left; } /* Pfeil: normal im Grid, mit 1rem Abstand direkt hinter dem Preis */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeHeader #ebbeShoppingCart #ebbeShoppingCartWrapper button.shoppingCartSum::after { position: static !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; margin: 0 0 0 1rem !important; justify-self: start; align-self: center; } /* Warnsymbol (falls sichtbar): Abstand nach links */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeHeader #ebbeShoppingCart #ebbeShoppingCartWrapper button.shoppingCartSum .selfAdminPriceChanged { margin-left: .75rem; } #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeHeader #ebbeShoppingCart #ebbeShoppingCartWrapper button.shoppingCartSum .totalPriceLabel, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeHeader #ebbeShoppingCart #ebbeShoppingCartWrapper button.shoppingCartSum .totalPrice { white-space: nowrap; } } /* 6c. Tablet und Handy (bis 991.98px): Leiste über die volle Breite. easybooking ordnet Beschriftung, Preis und Pfeil in einer Rasterzeile an, streckt sie aber auf die volle Höhe, der Text steht dann jeweils oben. Der größere Preis wirkt dadurch höher als Beschriftung und Pfeil. Hier alle drei senkrecht mittig. */ @media (max-width: 991.98px) { /* Alle Elemente der Leiste senkrecht mittig */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeHeader #ebbeShoppingCart #ebbeShoppingCartWrapper button.shoppingCartSum { align-items: center; } /* Preis wie am Desktop (dort Werte von easybooking ab 992px: 1.25rem, 600, Zeilenhöhe 1.5em). Bei Änderungen am Desktop-Preis hier mitziehen. */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeHeader #ebbeShoppingCart #ebbeShoppingCartWrapper button.shoppingCartSum .totalPrice { font-size: 1.25rem; font-weight: 600; line-height: 1.5em; } } /* 6d. Warenkorb-Fenster (.cartOverlay, öffnet über den Pfeil im Preisfeld). Weiß mit dunklen Elementen (Textfarbe der Maske), ohne Rahmen, Schatten wie die Formularfelder, Rundung und Innenabstand wie die Boxen. 15px unter der Leiste, damit es mit dem ersten Container der Seite bündig ist. Desktop: 400px von easybooking, darunter volle Breite wie die Leiste. "display" bleibt bei easybooking (Inline-Style). */ /* --- Fenster: Schatten wie die Formularfelder (0b), damit sich das weiße Fenster auch über weißen Seitenbereichen abhebt --- */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeHeader #ebbeShoppingCart #ebbeShoppingCartWrapper .cartOverlay { --fr-cart-thumb: 70px; /* Breite Vorschaubild (wie easybooking) */ margin: var(--fr-box-gap) 0 0 0; border: 0; border-radius: var(--fr-box-radius); background: #fff; box-shadow: var(--fr-field-shadow); overflow: hidden; /* Inhalt folgt der Rundung */ } /* Unter 992px volle Breite wie die Leiste (easybooking: 510px ab 576px, 690px ab 768px) */ @media (max-width: 991.98px) { #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeHeader #ebbeShoppingCart #ebbeShoppingCartWrapper .cartOverlay { width: 100%; left: 0; right: auto; } } /* Innenabstand wie die Boxen (easybooking: 15px 10px) */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeHeader #ebbeShoppingCart #ebbeShoppingCartWrapper .cartOverlay .shoppingCartContents { padding: var(--fr-box-pad-y) var(--fr-box-pad-x); background: transparent; } /* Alles in der Textfarbe der Maske, auch Icons (::before) */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeHeader #ebbeShoppingCart #ebbeShoppingCartWrapper .cartOverlay, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeHeader #ebbeShoppingCart #ebbeShoppingCartWrapper .cartOverlay *, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeHeader #ebbeShoppingCart #ebbeShoppingCartWrapper .cartOverlay *::before { color: #262933 !important; } /* --- Appartement: Bild links, daneben Titel + Text wie die Buchungsdetails in Schritt 4 (14k), Mülleimer rechts --- */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeHeader #ebbeShoppingCart #ebbeShoppingCartWrapper .cartOverlay .shoppingCartOneRoom { align-items: center; gap: var(--fr-gutter); } /* Bild vollständig statt auf 70 × 70 zugeschnitten */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeHeader #ebbeShoppingCart #ebbeShoppingCartWrapper .cartOverlay .shoppingCartOneRoom .roomImage { flex: 0 0 var(--fr-cart-thumb); width: var(--fr-cart-thumb); margin: 0; padding: 0; line-height: 0; /* kein Leerraum unter dem Bild */ } #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeHeader #ebbeShoppingCart #ebbeShoppingCartWrapper .cartOverlay .shoppingCartOneRoom img.shoppingCartThumb { width: 100%; height: auto; max-width: none; object-fit: contain; } /* Titel und Angaben untereinander, ohne Abstände */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeHeader #ebbeShoppingCart #ebbeShoppingCartWrapper .cartOverlay .shoppingCartRoomDesc { flex: 1 1 auto; min-width: 0; flex-direction: column; align-items: flex-start; gap: 0; margin: 0; padding: 0; } /* Name: Titel-Format (Schriftart, Stärke, Zeilenhöhe; Größe bleibt) */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeHeader #ebbeShoppingCart #ebbeShoppingCartWrapper .cartOverlay .shoppingCartRoomDesc .roomTitle { margin: 0; font-family: var(--fr-font-family); font-weight: var(--fr-title-weight); font-style: normal; line-height: var(--fr-title-line); letter-spacing: 0; } /* Zeitraum, Preis und Hinweistexte: Fließtext, nicht kursiv (Größe bleibt) */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeHeader #ebbeShoppingCart #ebbeShoppingCartWrapper .cartOverlay .shoppingCartRoomDesc .shoppingCartDates, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeHeader #ebbeShoppingCart #ebbeShoppingCartWrapper .cartOverlay .shoppingCartRoomDesc .shoppingCartDates *, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeHeader #ebbeShoppingCart #ebbeShoppingCartWrapper .cartOverlay .shoppingCartRoomDesc .shoppingCartPrice, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeHeader #ebbeShoppingCart #ebbeShoppingCartWrapper .cartOverlay .shoppingCartRoomDesc .shoppingCartPrice * { margin: 0; font-family: var(--fr-text-font); font-weight: var(--fr-text-weight); font-style: normal; line-height: var(--fr-text-line); letter-spacing: 0; } /* --- Mülleimer (Appartement und Zusatzleistungen): wie auf Seite 2 (10f), nur das Icon, ohne Kreis, Klickfläche mind. 32px. easybooking steuert Farben über eigene Variablen, die werden hier umgesetzt. --- */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeHeader #ebbeShoppingCart #ebbeShoppingCartWrapper .cartOverlay button.eb-button-remove { --textColor: #262933; --textColorHover: #262933; --backgroundColor: transparent; --backgroundColorHover: transparent; flex: 0 0 auto; justify-content: flex-end; align-items: center; width: auto; height: auto; min-width: 32px; min-height: 32px; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; } #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeHeader #ebbeShoppingCart #ebbeShoppingCartWrapper .cartOverlay button.eb-button-remove:hover, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeHeader #ebbeShoppingCart #ebbeShoppingCartWrapper .cartOverlay button.eb-button-remove:focus-visible { background: transparent; opacity: .7; } /* --- Trennstriche: wie überall, je 15px darüber und darunter --- */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeHeader #ebbeShoppingCart #ebbeShoppingCartWrapper .cartOverlay .sc_room_spacer { height: 1px; margin: var(--fr-box-gap) 0; padding: 0; border: 0; background: var(--fr-divider-image) left top / 15px 1px repeat-x; } /* --- Zusatzleistungen und Versicherung --- */ /* Überschrift: Titel-Schrift wie "Zusatzleistungen" in den Buchungsdetails (Schritt 4), Größe bleibt */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeHeader #ebbeShoppingCart #ebbeShoppingCartWrapper .cartOverlay .shoppingCartAllExtras h5 { margin: 0; font-family: var(--fr-font-family); font-weight: var(--fr-title-weight); line-height: var(--fr-title-line); letter-spacing: 0; } #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeHeader #ebbeShoppingCart #ebbeShoppingCartWrapper .cartOverlay .shoppingCartAllExtras ul { margin: 0; padding: 0; list-style: none; } /* Einträge: Name + Preis links, Mülleimer rechts bündig mit dem des Appartements (easybooking: 10px Abstand rechts) */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeHeader #ebbeShoppingCart #ebbeShoppingCartWrapper .cartOverlay .shoppingCartAllExtras li.onePriceDetail { margin: var(--fr-box-gap) 0 0 0; gap: var(--fr-gutter); } #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeHeader #ebbeShoppingCart #ebbeShoppingCartWrapper .cartOverlay .shoppingCartAllExtras .onePriceDetailExtra { flex: 1 1 auto; min-width: 0; } /* Name: Titel-Format wie der Appartement-Name */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeHeader #ebbeShoppingCart #ebbeShoppingCartWrapper .cartOverlay .shoppingCartAllExtras .onePriceDetailLabel, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeHeader #ebbeShoppingCart #ebbeShoppingCartWrapper .cartOverlay .shoppingCartAllExtras .onePriceDetailLabel * { font-family: var(--fr-font-family); font-weight: var(--fr-title-weight); line-height: var(--fr-title-line); letter-spacing: 0; } /* Preis: Fließtext wie Zeitraum und Preis des Appartements */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeHeader #ebbeShoppingCart #ebbeShoppingCartWrapper .cartOverlay .shoppingCartAllExtras .onePriceDetailPrice { font-family: var(--fr-text-font); font-weight: var(--fr-text-weight); line-height: var(--fr-text-line); letter-spacing: 0; } /* --- Gesamt: Schrift wie "Gesamt" in Schritt 4 (14k, Format der Box-Überschriften), Größe bleibt --- */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeHeader #ebbeShoppingCart #ebbeShoppingCartWrapper .cartOverlay .sc_total > * { font-family: var(--fr-font-family); font-weight: var(--fr-heading-weight); line-height: var(--fr-heading-line); letter-spacing: 0; } /* 6e. Glas-Hintergrund beim Warenkorb-Fenster: solange es offen ist, liegt über der ganzen Seite (samt Kopfzeile) das Glas wie bei Galerie und Ladeanzeige (Variablen aus 0b), Leiste und Fenster bleiben darüber. Weich ein- und ausgeblendet: Das Glas ist immer vorhanden, aber unsichtbar, und wird beim Öffnen sichtbar. Erkennung über den Inline-Style, mit dem easybooking das Fenster einblendet. Klick aufs Glas oder Esc schließt das Fenster (Script im HTML-Widget). */ /* Container: Dauer zum Anpassen. Ebene erst nach dem Ausblenden zurück auf easybookings 101, sonst rutscht das noch sichtbare Glas unter die Kopfzeile */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeHeader #ebbeShoppingCart { --fr-cart-fade: .4s; /* Dauer Ein-/Ausblenden */ transition: z-index 0s linear var(--fr-cart-fade); } /* Fenster offen: Container sofort über alles (über der Ladeanzeige, 99999) */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeHeader #ebbeShoppingCart:has(.cartOverlay[style*="display: block"]) { z-index: 100000; transition: z-index 0s; } /* Glas: über den ganzen Bildschirm, unter Leiste und Fenster. Unsichtbar und ohne Klicks, solange das Fenster zu ist */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeHeader #ebbeShoppingCart::before { content: ""; position: fixed; inset: 0; z-index: -1; background: var(--fr-overlay-bg); backdrop-filter: var(--fr-overlay-filter); -webkit-backdrop-filter: var(--fr-overlay-filter); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--fr-cart-fade) ease, visibility 0s linear var(--fr-cart-fade); } /* Fenster offen: Glas weich einblenden. Es fängt Klicks ab, damit nichts auf der Seite darunter ausgelöst wird; das Script schließt das Fenster bei einem Klick darauf. */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeHeader #ebbeShoppingCart:has(.cartOverlay[style*="display: block"])::before { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity var(--fr-cart-fade) ease, visibility 0s; } /* Fenster selbst: beim Öffnen weich einblenden und leicht von oben hereingleiten. Läuft jedes Mal, wenn easybooking es einblendet. Ausblenden geht per CSS nicht (easybooking setzt schlagartig display: none). */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeHeader #ebbeShoppingCart #ebbeShoppingCartWrapper .cartOverlay { animation: fr-cart-in var(--fr-cart-fade) ease; } @keyframes fr-cart-in { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } } /* --------------------------------------------------------- 7. SCHRITT 1: BOXEN UND FORMULARBEREICHE --------------------------------------------------------- */ /* 7a. Gemeinsame Werte: siehe Abschnitt 0b */ /* 7b. Radius der grauen Boxen: Schritt 1 in 7c, Versicherungsbox in 13g */ /* 7c. Graue Boxen in Schritt 1 (An-/Abreise, Appartement): Aussehen und Innenabstand nach den gemeinsamen Werten aus 0b. Der Innenabstand ersetzt easybookings Standardwert (25px) und sitzt an der Box selbst, die Bootstrap-Zeilen darin bleiben unberührt. Hintergrund fest gesetzt, weil easybooking bei den Reisedaten ein halb durchsichtiges Schwarz verwendet (wirkt nur auf Weiß gleich). */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepOne .stepOneDates, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepOne .stepOneRooms .oneRoom { background-color: var(--fr-box-bg) !important; border-radius: var(--fr-box-radius) !important; box-shadow: none !important; padding: var(--fr-box-pad-y) var(--fr-box-pad-x) !important; } /* Beide Boxen enden mit Feldern: unten etwas mehr Innenabstand (0b) */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepOne .stepOneDates, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepOne .stepOneRooms .oneRoom { padding-bottom: var(--fr-box-pad-bottom-fields) !important; } /* 7d. Abstände zwischen den Boxen: Reisedaten ohne Außenabstand, jede Appartement-Box (auch bei mehreren Appartements) genau --fr-box-gap unter der vorherigen, nach unten keiner. Danach folgen Trennstrich (0c) und Weiter-Button (7j). */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepOne .stepOneDates { margin: 0 !important; } #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepOne .stepOneRooms .oneRoom { margin: var(--fr-box-gap) 0 0 0 !important; } /* 7e. Reisedaten-Zeile (Anreise/Abreise/Nächte/Anzahl): Nächte-Feld ist ausgeblendet, die restlichen drei Felder teilen sich die Breite. Ab 768px in einer Zeile zu gleichen Teilen, zwischen 576 und 767px nimmt "Anzahl Appartements" die ganze zweite Zeile ein. */ #ebbeContainer #ebbeAppWrapper .stepOneDates .row:nth-child(2) > .col-md-2 { display: none !important; } @media (min-width: 768px) { #ebbeContainer #ebbeAppWrapper .stepOneDates .row:nth-child(2) > [class*="col-"] { flex: 1 1 0; max-width: none; } } @media (min-width: 576px) and (max-width: 767.98px) { #ebbeContainer #ebbeAppWrapper .stepOneDates .row:nth-child(2) > .col-md-4 { flex: 0 0 100%; max-width: 100%; } } /* Nächte-Zähler (+/-): minimal nach unten, damit er mittig sitzt */ #ebbeContainer #ebbeAppWrapper #ebbeContent #ebbeStepOne .stepOneDates #ebbeNumNights .addNights, #ebbeContainer #ebbeAppWrapper #ebbeContent #ebbeStepOne .stepOneDates #ebbeNumNights .subtractNights { margin-top: 1px; } /* 7f. Appartement-Zeile in Schritt 1: Titel oben in eigener Zeile, darunter die beiden Auswahlfelder gestreckt über die volle Breite (statt aller drei Spalten nebeneinander). Nur ab 768px, darunter (Bootstrap col-12) steht ohnehin schon jede Spalte für sich. */ @media (min-width: 768px) { #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepOne .stepOneRooms .oneRoom .row > .rooms { flex: 0 0 100%; max-width: 100%; } #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepOne .stepOneRooms .oneRoom .row > .col-md-4.col-lg-5, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepOne .stepOneRooms .oneRoom .row > .col-md-4.col-lg-4 { flex: 0 0 50%; max-width: 50%; } } /* 7g. Geburtsdatum-Zeile (Kinder): nutzt sonst nur 8/12 bzw. 9/12 der Breite (justify-content-end lässt links Platz frei). Auf 100% strecken. */ @media (min-width: 768px) { #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepOne .stepOneRooms .oneRoom .row.justify-content-end > .childrenAge { flex: 0 0 100%; max-width: 100%; } } /* Nur Smartphone: Geburtsdatum-Zeile ohne eigenen Außenabstand. Zeile und Spalte gleichen sich über den einheitlichen Spaltenabstand (0d) aus. 0 bewusst gesetzt, damit kein Abstand von easybooking zurückkommt. */ @media (max-width: 575.98px) { #ebbeContainer #ebbeAppWrapper #ebbeContent #ebbeStepOne .stepOneRooms .oneRoom .childrenAge .childrenAgeInputs { margin: 0 !important; } } /* 7h. Die Geburtsdatum-Felder selbst: statt der easybooking-eigenen Prozent-/nth-child-Logik (für 2 Felder pro Zeile gebaut) gleichmäßige Verteilung per Flexbox, unabhängig von der Anzahl der Kinder. Abstand zwischen Feldern in einer Zeile: --fr-gutter (0d), zwischen den Zeilen (wenn sie umbrechen): --fr-field-row-gap (0f). */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepOne .stepOneRooms .oneRoom .childrenAgeInputs .container > .row { display: flex; flex-wrap: wrap; gap: var(--fr-field-row-gap) var(--fr-gutter); margin: 0 !important; } /* Bootstraps .container bringt eigenen Innenabstand (15px links und rechts) und je nach Bildschirmbreite eine Maximalbreite mit (z. B. 1140px), die er mittig ausrichtet. Beides rückt die Felder gegenüber Beschriftung und Dropdowns nach innen. Hier auf volle Breite ohne Innenabstand. */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepOne .stepOneRooms .oneRoom .childrenAgeInputs .container { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepOne .stepOneRooms .oneRoom .childrenAgeInputs .container > .row > input.childDOB { width: auto !important; flex: 1 1 160px !important; margin: 0 !important; } /* Nur Handy: volle Breite direkt erzwingen (flex-grow allein füllt hier nicht zuverlässig die Zeile bei einem Feld pro Zeile). Die Klasse doppelt angegeben (.childDOB.childDOB) erhöht bewusst die Spezifität, weil eine easybooking-eigene Regel bei gleicher Spezifität sonst durch spätere Ladereihenfolge gewinnt. */ @media (max-width: 575.98px) { #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepOne .stepOneRooms .oneRoom .childrenAgeInputs .container > .row > input.childDOB.childDOB { width: 100% !important; flex-basis: 100% !important; min-width: 100% !important; max-width: 100% !important; } } /* 7i. Überschriften und Feldtitel in Schritt 1 (Anreise, Abreise, Anzahl Appartements, Erwachsene, Kinder, "An- und Abreisetag" ...) */ #ebbeContainer #ebbeAppWrapper #ebbeContent #ebbeStepOne .stepOneDates .arrDep-title { font-size: var(--fr-heading-size) !important; font-weight: var(--fr-heading-weight) !important; font-family: var(--fr-font-family) !important; color: #262933 !important; } /* Überschrift "An- und Abreisetag": liegt in einer Bootstrap-Zeile, ist selbst aber keine Spalte. Seitlicher Abstand daher wie bei einer Spalte (halber Spaltenabstand aus 0d), damit sie bündig mit den Feldern darunter steht. easybooking setzt hier sonst 15px passend zum alten Bootstrap-Abstand. */ #ebbeContainer #ebbeAppWrapper #ebbeContent #ebbeStepOne .stepOneDates .arrDep-title { margin-left: 0 !important; margin-right: 0 !important; padding-left: calc(var(--fr-gutter) / 2) !important; padding-right: calc(var(--fr-gutter) / 2) !important; } #ebbeContainer #ebbeAppWrapper #ebbeContent #ebbeStepOne .stepOneRooms .oneRoom .rooms p { font-size: .7em; padding-bottom: 20px !important; color: #262933 !important; font-weight: 500; } /* Feldtitel (label.control-label): für alle Schritte in 0e-e */ /* Farbe auch für Beschriftungen, die nicht label.control-label sind (Nächte-Label, übrige Labels im Formular von Schritt 1) */ #ebbeContainer #ebbeAppWrapper #ebbeContent #ebbeStepOne .stepOneDates .numNightsLabel, #ebbeContainer #ebbeAppWrapper #ebbeContent #ebbeStepOne .stepOneDates label, .ebContainer #ebbeStepOne #ebbeStepOneForm label { color: #262933 !important; } /* 7j. Weiter-Button in Schritt 1: Abstand nach oben zum Trennstrich darüber (0c) */ #ebbeContainer #ebbeAppWrapper #ebbeContent #ebbeStepOne #ebbeContinue { margin: var(--fr-box-gap) 0 0 0 !important; width: 100%; } /* --------------------------------------------------------- 8. SCROLLBAR --------------------------------------------------------- */ html:has(#ebFrontEndFrame) { scrollbar-width: thin; } /* --------------------------------------------------------- 9. SCHRIFT UND LINKS (für die gesamte Maske) --------------------------------------------------------- */ /* 9a. Schriftart: zentral als Variable, wird überall verwendet */ #ebFrontEndFrame { --fr-font-family: 'SignikaLocal', sans-serif; font-family: var(--fr-font-family); } /* Überschriften, Absätze und Spans setzen bei easybooking teils eine eigene Schrift, daher hier zusätzlich direkt erzwungen */ #ebbeContainer h1, #ebbeContainer h2, #ebbeContainer h3, #ebbeContainer h4, #ebbeContainer h5, #ebbeContainer h6, #ebbeContainer p, #ebbeContainer span { font-family: var(--fr-font-family) !important; } /* Alte Tags in Beschreibungstexten (z.B. Appartement- Beschreibung) bringen ihre eigene Formatierung mit und werden durch die Vererbung NICHT erfasst. Diese Regel fängt sie gezielt ab. */ #ebFrontEndFrame font[face] { font-family: var(--fr-font-family) !important; } /* 9b. Alle h4-Überschriften in der Maske: einheitliche Größe, Farbe und Zeilenhöhe (u. a. Überschriften der grauen Boxen in Schritt 3) */ #ebbeContainer h4 { font-size: var(--fr-heading-size) !important; font-weight: var(--fr-heading-weight) !important; font-family: var(--fr-font-family) !important; color: #262933 !important; letter-spacing: 0 !important; line-height: var(--fr-heading-line) !important; } /* 9c. Alle Links in der Buchungsmaske: Farbe fest in allen Zuständen */ #ebFrontEndFrame a, #ebFrontEndFrame a:hover, #ebFrontEndFrame a:focus, #ebFrontEndFrame a:active { color: #262933 !important; font-family: var(--fr-font-family) !important; font-weight: 500 !important; font-size: 0.8em !important; } /* Ausnahme: Links im Footer der Maske (Datenschutz, Versicherungsvertrag widerrufen) kleiner und kräftiger. Übrige Gestaltung des Footers: 17. */ #ebbeContainer #ebbeAppWrapper #ebbeFooter .information a { font-size: 10px !important; font-weight: 600 !important; } /* --------------------------------------------------------- 10. SCHRITT 2: APPARTEMENT-LISTE --------------------------------------------------------- */ /* 10a. Graues Übersichtsfeld oben ("1. Appartement, 2 Erwachsene ..."). Werte aus 0b, Trennstrich darunter siehe 0c. */ #ebbeContainer #ebbeAppWrapper #ebbeContent #ebbeSelfAdmin #ebbeStepTwoRooms .selfAdminOneRoom .stepTwoRoomOverview, #ebbeContainer #ebbeAppWrapper #ebbeContent #ebbeSelfAdmin #ebbeStepTwoRooms .stepTwoRoomChoose .stepTwoRoomOverview, #ebbeContainer #ebbeAppWrapper #ebbeContent #ebbeSelfAdmin .selfAdminRoomInfo .selfAdminOneRoom .stepTwoRoomOverview, #ebbeContainer #ebbeAppWrapper #ebbeContent #ebbeSelfAdmin .selfAdminRoomInfo .stepTwoRoomChoose .stepTwoRoomOverview, #ebbeContainer #ebbeAppWrapper #ebbeContent #ebbeStepTwo #ebbeStepTwoRooms .selfAdminOneRoom .stepTwoRoomOverview, #ebbeContainer #ebbeAppWrapper #ebbeContent #ebbeStepTwo #ebbeStepTwoRooms .stepTwoRoomChoose .stepTwoRoomOverview, #ebbeContainer #ebbeAppWrapper #ebbeContent #ebbeStepTwo .selfAdminRoomInfo .selfAdminOneRoom .stepTwoRoomOverview, #ebbeContainer #ebbeAppWrapper #ebbeContent #ebbeStepTwo .selfAdminRoomInfo .stepTwoRoomChoose .stepTwoRoomOverview { box-shadow: none; color: #262933; padding: var(--fr-box-pad-y) var(--fr-box-pad-x); font-family: var(--fr-font-family) !important; margin: 0; background-color: var(--fr-box-bg); border-radius: var(--fr-box-radius); } #ebbeContainer #ebbeAppWrapper #ebbeContent #ebbeStepTwo #ebbeStepTwoRooms .stepTwoRoomChoose .stepTwoRoomOverview .title { font-size: var(--fr-heading-size); margin: 0; line-height: var(--fr-heading-line); font-family: var(--fr-font-family) !important; font-weight: var(--fr-heading-weight); } #ebbeContainer #ebbeAppWrapper .stepTwoRoomOverview .row { display: block; } /* 10b. Filter- und Info-Zeile über der Liste ausblenden */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepTwo .stepTwoRoomOfferFilter { display: none !important; } #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepTwo .stepTwoRoomBasics { display: none !important; } /* Kartenliste ohne eigenen Abstand oben: Das Übersichtsfeld hält darunter Platz für Strich und Abstände frei (0c). easybooking lässt die Liste links "fließen" (float). Die Elemente danach (Buttonleiste mit Strich) rutschen dadurch hinter die Liste, Strich und Abstand darüber verschwinden. Daher normal im Fluss. */ #ebbeContainer #ebbeAppWrapper #ebbeContent #ebbeStepTwo #ebbeStepTwoRooms .stepTwoRoomChoose .stepTwoCatList { margin: 0; padding-top: 0 !important; float: none !important; } /* 10c. Appartement-Karte: Aussehen der Inhalte (gilt für alle Breiten). Die Anordnung übernehmen 10d (Desktop) und 10e (Handy). */ /* --- Karte (Werte aus 0b) --- --fr-card-badge-space: Abstand über und unter den Badges (Text → Badges, Badges → Preis). Etwas größer als der übrige Abstand, damit die Badges optisch sauber zwischen Text und Preis stehen. Verwendet in 10d und 10e. */ #ebbeContainer #ebbeAppWrapper #ebbeContent #ebbeStepTwo .stepTwoRoomDescription { --fr-card-badge-space: calc(var(--fr-box-heading-gap) + 5px); background-color: var(--fr-box-bg) !important; border-radius: var(--fr-box-radius) !important; padding: var(--fr-box-pad-y) var(--fr-box-pad-x) !important; } /* --- Name: Format wie die Box-Überschriften (0b), Zeilenhöhe eng, damit der Abstand zum Text genau --fr-box-heading-gap wirkt --- */ #ebbeContainer #ebbeAppWrapper #ebbeContent #ebbeStepTwo #ebbeStepTwoRooms .stepTwoRoomChoose .stepTwoCatList .stepTwoOneRoom .stepTwoRoomDescription .stepTwoRoomDescriptionMiddle .stepTwoRoomHeading .category { font-size: var(--fr-heading-size); font-family: var(--fr-font-family) !important; font-weight: var(--fr-heading-weight); line-height: var(--fr-heading-line) !important; margin: 0 !important; padding: 0 !important; } #ebbeContainer #ebbeAppWrapper #ebbeContent #ebbeStepTwo .stepTwoRoomHeading { align-items: flex-start !important; text-align: left !important; margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; } /* Beschreibungstext: erstes Element ohne eigenen Abstand nach oben (easybooking-Texte enthalten teils

mit Außenabstand), sonst stünde der Text weiter vom Namen weg als --fr-box-heading-gap */ #ebbeContainer #ebbeAppWrapper #ebbeContent #ebbeStepTwo .stepTwoRoomDescriptionText, #ebbeContainer #ebbeAppWrapper #ebbeContent #ebbeStepTwo .stepTwoRoomDescriptionText .moreText, #ebbeContainer #ebbeAppWrapper #ebbeContent #ebbeStepTwo .stepTwoRoomDescriptionText .moreText .allcontent, #ebbeContainer #ebbeAppWrapper #ebbeContent #ebbeStepTwo .stepTwoRoomDescriptionText .moreText .allcontent > :first-child { padding-top: 0 !important; } #ebbeContainer #ebbeAppWrapper #ebbeContent #ebbeStepTwo .stepTwoRoomDescriptionText .moreText, #ebbeContainer #ebbeAppWrapper #ebbeContent #ebbeStepTwo .stepTwoRoomDescriptionText .moreText .allcontent, #ebbeContainer #ebbeAppWrapper #ebbeContent #ebbeStepTwo .stepTwoRoomDescriptionText .moreText .allcontent > :first-child { margin-top: 0 !important; } /* --- Beschreibungstext: immer vollständig, ohne "mehr/weniger" --- */ #ebbeContainer #ebbeAppWrapper #ebbeContent #ebbeStepTwo .stepTwoRoomDescriptionText .moreText .shortcontent { display: none !important; } #ebbeContainer #ebbeAppWrapper #ebbeContent #ebbeStepTwo .stepTwoRoomDescriptionText .moreText .allcontent { display: block !important; } #ebbeContainer #ebbeAppWrapper #ebbeContent #ebbeStepTwo .stepTwoRoomDescriptionText .moreText .allcontent .morelink, #ebbeContainer #ebbeAppWrapper #ebbeContent #ebbeStepTwo .stepTwoRoomDescriptionText .moreText .allcontent .lesslink { display: none !important; } /* Schriftfarbe, inkl. aller Unterelemente (fett, alte -Tags mit eigener Farbe) */ #ebbeContainer #ebbeAppWrapper #ebbeContent #ebbeStepTwo .stepTwoRoomDescriptionText .moreText .allcontent, #ebbeContainer #ebbeAppWrapper #ebbeContent #ebbeStepTwo .stepTwoRoomDescriptionText .moreText .allcontent * { color: #262933 !important; } /* --- Preisblock: Preis, "für X Nächte", "Preis Details" --- */ /* div.price als Flex-Spalte, damit "order" bei den drei Kindern greift */ #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepTwo .stepTwoRoomDescriptionRight div.price { display: flex !important; flex-direction: column !important; margin-bottom: 0 !important; padding-bottom: 0 !important; } /* Reihenfolge: zuerst Preis, dann Nächte, dann Link. Der Link ist das letzte Element links in der Karte: ohne eigenen Abstand nach unten (easybooking), damit unten genau der Innenabstand bleibt */ #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepTwo .stepTwoRoomDescriptionRight div.price > div.currentPrice { order: 1 !important; } #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepTwo .stepTwoRoomDescriptionRight div.price > div.nights { order: 2 !important; } #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepTwo .stepTwoRoomDescriptionRight div.price > a.showPriceDetailsInPopover { order: 3 !important; align-self: flex-start !important; margin-top: 5px !important; margin-bottom: 0 !important; } #ebbeContainer #ebbeAppWrapper #ebbeContent #ebbeStepTwo #ebbeStepTwoRooms .stepTwoRoomChoose .stepTwoCatList .stepTwoOneRoom .stepTwoRoomDescription .stepTwoRoomDescriptionRight .price .currentPrice { font-weight: 800 !important; color: #262933 !important; font-family: var(--fr-font-family) !important; } /* "für X Nächte / ohne Verpflegung": Schrift und Farbe */ #ebbeContainer #ebbeAppWrapper #ebbeContent #ebbeStepTwo .stepTwoRoomDescriptionRight .price div.nights { color: #262933 !important; font-family: var(--fr-font-family) !important; font-weight: 500 !important; font-size: 0.8em !important; } /* --- Badges "Vor kurzem gebucht" und "Nur 1 verfügbar" --- */ /* "Vor kurzem gebucht": aus der absoluten Positionierung lösen, weiße Box mit Icon, nur so breit wie nötig. Position und Abstände kommen aus 10d (Desktop) und 10e (Handy). */ #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepTwo .stepTwoRoomDescriptionRight div.recentlyBooked { position: static !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; height: auto !important; width: auto !important; display: inline-flex !important; align-items: center !important; gap: 5px !important; text-align: left !important; padding: 10px !important; border-radius: 5px !important; color: #262933 !important; background-color: #ffffff !important; font-weight: 600 !important; } /* Icon: gleiche Form wie bei "Nur 1 verfügbar" (mdi-information-outline), als Maske, Farbe = Textfarbe */ #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepTwo .stepTwoRoomDescriptionRight div.recentlyBooked::before { content: ""; flex: 0 0 14px; width: 14px; height: 14px; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z'/%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 24 24'%3E%3Cpath d='M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z'/%3E%3C/svg%3E") center / contain no-repeat; } /* "Nur 1 verfügbar": gleiches Aussehen wie "Vor kurzem gebucht" */ #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepTwo .stepTwoRoomDescriptionMiddle div.stepTwoAvailabiltyAlert { display: inline-flex !important; align-items: center !important; gap: 5px !important; width: auto !important; height: auto !important; min-height: 0 !important; padding: 0px 10px 0px 10px !important; border-radius: 5px !important; background-color: #ffffff !important; color: #262933 !important; font-size: 12px !important; font-weight: 600 !important; line-height: 1 !important; text-transform: uppercase !important; } /* Inhalte des Badges: Icon und Textteile ohne eigene Zeilenhöhe, alles in Großbuchstaben (auch der "capitalize"-Teil "Nur") */ #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepTwo .stepTwoRoomDescriptionMiddle div.stepTwoAvailabiltyAlert > * { display: inline-flex !important; align-items: center !important; line-height: 1 !important; margin: 0 !important; text-transform: uppercase !important; } /* Info-Icon im Badge: Icon-Schrift auf Textgröße bringen und ohne eigene Zeilenhöhe/Verschiebung, damit es mittig zum Text sitzt */ #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepTwo .stepTwoRoomDescriptionMiddle div.stepTwoAvailabiltyAlert i.mdi, #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepTwo .stepTwoRoomDescriptionMiddle div.stepTwoAvailabiltyAlert i.mdi::before { font-size: 14px !important; line-height: 1 !important; height: auto !important; position: static !important; top: auto !important; vertical-align: middle !important; } /* --- Fußleiste unter der Karte (Icons + Hinzufügen-Button) --- */ /* Kein Rahmen oben/unten, Icons und Button senkrecht mittig zueinander */ #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepTwo div.stepTwoRoomFooter { border-top: 0 !important; border-bottom: 0 !important; padding-top: 5px !important; align-items: center !important; } /* Icon-Gruppe: easybooking setzt unter 660px eine Zeilenhöhe von 46px auf die Fußleiste (legacy.scss), dadurch rutschen die Icons nach oben. Hier als Flex-Zeile ohne geerbte Zeilenhöhe, senkrecht mittig. */ #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepTwo div.stepTwoRoomFooter div.stepTwoRoomIcons2 { display: flex !important; align-items: center !important; align-self: center !important; line-height: 1 !important; margin-top: 0 !important; margin-bottom: 0 !important; } /* Icons: kein Hover-, Active- oder Focus-Effekt, nur Grundlook */ #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepTwo div.stepTwoRoomIcons2 button.eb-button, #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepTwo div.stepTwoRoomIcons2 button.eb-button:hover, #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepTwo div.stepTwoRoomIcons2 button.eb-button:active, #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepTwo div.stepTwoRoomIcons2 button.eb-button:focus, #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepTwo div.stepTwoRoomIcons2 button.eb-button:focus-visible { background-color: transparent !important; border: 0 !important; color: inherit !important; outline: 0 !important; } /* Icon "Zeige Bilder" (Galerie) ausblenden, die übrigen Icons rücken nach */ #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepTwo div.stepTwoRoomIcons2 button.roomImages { display: none !important; } /* --- Merkmalsliste (Ausstattung, aufklappbar über das Listen-Icon) --- */ /* Nebeneinander statt untereinander, linksbündig */ #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepTwo div.stepTwoRoomDetails.row-fluid ul.clearer { display: flex !important; flex-wrap: wrap !important; column-count: initial !important; justify-content: flex-start !important; gap: 10px 20px !important; font-family: var(--fr-font-family) !important; font-size: 12px !important; font-weight: 400 !important; margin-left: -21px !important; margin-top: 15px !important; } /* Einzelne Einträge: natürliche Breite, Original-Icon ausgeblendet */ #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepTwo div.stepTwoRoomDetails.row-fluid ul.clearer li { width: auto !important; flex: 0 0 auto; background-image: none !important; list-style: none !important; padding-left: 0 !important; float: none !important; margin: 0 !important; } /* Eigenes Häkchen-Icon statt Original */ #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepTwo div.stepTwoRoomDetails.row-fluid ul.clearer li::before { content: "" !important; font-family: initial !important; display: inline-block !important; width: 18px !important; height: 18px !important; margin-right: 8px !important; border-radius: 50%; background-color: #f2f2f2 !important; color: transparent !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M5.2 10.6L1.6 7l1.2-1.2 2.4 2.4L11 2.4l1.2 1.2z' fill='%23262933'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 10px 10px; vertical-align: middle; } /* --- Abstände zwischen den Appartements --- */ /* Striche von easybooking zwischen den Appartement-Karten ausblenden. Ersetzt durch den Strich aus 0c-d, der Strich vor den Buttons kommt aus 0c-c. */ #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepTwo div.dashed-spacer { display: none !important; } /* Appartements ohne eigene Außenabstände (easybooking: 40px unten). Abstand und Strich zwischen den Appartements siehe 0c-d. */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepTwo .stepTwoCatList > .stepTwoOneRoom { margin: 0 !important; } /* Zurück-Button: volle Breite, solange der Weiter-Button ausgeblendet ist (Normalfall). Ist Weiter sichtbar (z. B. nach dem Zurückgehen), bleiben beide 50/50 nebeneinander (Abschnitt 4). */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepTwo .stepTwoButtons.stepButtons:has(> button.eb-button-next[style*="display: none"]) > button.prevStep { grid-column: 1 / -1; } /* 10d. Appartement-Karte Desktop (ab 768px): links untereinander Name, Text, beide Badges nebeneinander und zum Schluss der Preis; rechts das Bild über die ganze Höhe. Text- und Preisbereich werden per display: contents aufgelöst, damit ihre Inhalte frei im Raster platziert werden können. Leere Zeilen oben/unten halten den linken Block senkrecht mittig zum Bild. Abstände Name → Text → Badges → Preis einheitlich --fr-box-heading-gap, über und unter den Badges --fr-card-badge-space (10c), wie 10e. */ @media (min-width: 768px) { #ebbeContainer #ebbeAppWrapper #ebbeContent #ebbeStepTwo .stepTwoRoomDescription { display: grid !important; grid-template-columns: max-content minmax(0, 1fr) 40px minmax(0, 40%); grid-template-rows: 1fr auto auto auto auto 1fr; grid-template-areas: ". . . image" "heading heading . image" "text text . image" "alert booked . image" "price price . image" ". . . image"; column-gap: 0; row-gap: 0; align-items: center; } /* Alle Spalten von ebbe-Breiten befreien */ #ebbeContainer #ebbeAppWrapper #ebbeContent #ebbeStepTwo .stepTwoRoomDescription > div { width: auto !important; max-width: 100% !important; flex: none !important; float: none !important; } /* Text- und Preisbereich auflösen: ihre Inhalte werden direkt Teil des Rasters */ #ebbeContainer #ebbeAppWrapper #ebbeContent #ebbeStepTwo .stepTwoRoomDescriptionMiddle, #ebbeContainer #ebbeAppWrapper #ebbeContent #ebbeStepTwo .stepTwoRoomDescriptionRight { display: contents !important; } /* Name */ #ebbeContainer #ebbeAppWrapper #ebbeContent #ebbeStepTwo .stepTwoRoomHeading { grid-area: heading; margin-left: 0 !important; } /* Beschreibungstext */ #ebbeContainer #ebbeAppWrapper #ebbeContent #ebbeStepTwo .stepTwoRoomDescriptionText { grid-area: text; margin: var(--fr-box-heading-gap) 15px 0 0 !important; } /* Badge "Nur 1 verfügbar" (links in der Badge-Zeile) */ #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepTwo .stepTwoRoomDescriptionMiddle div.stepTwoAvailabiltyAlert { grid-area: alert; justify-self: start; align-self: center !important; margin: var(--fr-card-badge-space) 0 0 0 !important; } /* Badge "Vor kurzem gebucht" (rechts daneben, 10px Abstand) */ #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepTwo .stepTwoRoomDescriptionRight div.recentlyBooked { grid-area: booked; justify-self: start; align-self: center !important; margin: var(--fr-card-badge-space) 0 0 10px !important; } /* Preisblock (zum Schluss) */ #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepTwo .stepTwoRoomDescriptionRight div.price { grid-area: price; margin: var(--fr-card-badge-space) 0 0 0 !important; } /* Bild rechts, vertikal mittig über die ganze Höhe, ohne Abstände */ #ebbeContainer #ebbeAppWrapper #ebbeContent #ebbeStepTwo .stepTwoRoomDescriptionLeft { grid-area: image; align-self: center; padding: 0 !important; margin: 0 !important; height: auto !important; } /* Bild vollständig zeigen, nicht beschneiden */ #ebbeContainer #ebbeAppWrapper #ebbeContent #ebbeStepTwo .stepTwoRoomDescriptionLeft .swiper, #ebbeContainer #ebbeAppWrapper #ebbeContent #ebbeStepTwo .stepTwoRoomDescriptionLeft .swiper-wrap { height: auto !important; max-height: none !important; padding: 0 !important; margin: 0 !important; } #ebbeContainer #ebbeAppWrapper #ebbeContent #ebbeStepTwo .stepTwoRoomDescriptionLeft img { display: block; width: 100% !important; height: auto !important; max-height: none !important; object-fit: contain !important; margin: 0 !important; padding: 0 !important; } } /* 10e. Appartement-Karte Handy (bis 767px): alles untereinander, Bild oben, dann Name, Text, beide Badges nebeneinander und zum Schluss der Preis. Schließt nahtlos an 10d (ab 768px) an. */ @media (max-width: 767.98px) { /* Karte als umbrechende Zeile; Text- und Preisbereich auflösen, damit ihre Inhalte frei sortiert werden können */ #ebbeContainer #ebbeAppWrapper #ebbeContent #ebbeStepTwo .stepTwoRoomDescription { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: center; column-gap: 10px; } #ebbeContainer #ebbeAppWrapper #ebbeContent #ebbeStepTwo .stepTwoRoomDescriptionMiddle, #ebbeContainer #ebbeAppWrapper #ebbeContent #ebbeStepTwo .stepTwoRoomDescriptionRight { display: contents !important; } /* Bild ganz zeigen: volle Breite, Höhe nach Seitenverhältnis */ #ebbeContainer #ebbeAppWrapper #ebbeContent #ebbeStepTwo .stepTwoRoomDescriptionLeft img { width: 100% !important; height: auto !important; object-fit: contain !important; } /* Rahmen um das Bild wachsen mit (easybooking setzt sonst eine feste Höhe, das Bild würde über den Text darunter ragen) */ #ebbeContainer #ebbeAppWrapper #ebbeContent #ebbeStepTwo .stepTwoRoomDescriptionLeft, #ebbeContainer #ebbeAppWrapper #ebbeContent #ebbeStepTwo .stepTwoRoomDescriptionLeft .swiper, #ebbeContainer #ebbeAppWrapper #ebbeContent #ebbeStepTwo .stepTwoRoomDescriptionLeft .swiper-wrap { height: auto !important; max-height: none !important; } /* Reihenfolge: 1. Bild, 2. Name, 3. Text, 4./5. Badges, 6. Preis. Alle Inhalte bündig am Innenabstand der Karte (0b), ohne eigene seitliche Einrückung. Abstände Bild → Name → Text einheitlich --fr-box-heading-gap, über und unter den Badges --fr-card-badge-space (10c), wie 10d. Die Badges tragen je 10px Abstand nach oben, der Text unten den Rest: so stehen sie nebeneinander wie untereinander (zweites Badge in eigener Zeile) 10px auseinander. Nebeneinander: column-gap. */ /* 1. Bild: breiter als der Textbereich (ragt links/rechts je 13px in den Innenabstand der Karte), 5px Abstand oben */ #ebbeContainer #ebbeAppWrapper #ebbeContent #ebbeStepTwo .stepTwoRoomDescriptionLeft { order: 1 !important; width: calc(100% + 26px) !important; max-width: none !important; flex: none !important; margin: 5px -13px var(--fr-box-heading-gap) -13px !important; border-radius: 10px 10px 0 0; overflow: hidden; } /* 2. Name */ #ebbeContainer #ebbeAppWrapper #ebbeContent #ebbeStepTwo .stepTwoRoomHeading { order: 2 !important; flex: 0 0 100% !important; padding-left: 0 !important; padding-right: 0 !important; } /* 3. Beschreibungstext */ #ebbeContainer #ebbeAppWrapper #ebbeContent #ebbeStepTwo .stepTwoRoomDescriptionText { order: 3 !important; flex: 0 0 100% !important; margin-top: var(--fr-box-heading-gap) !important; margin-bottom: calc(var(--fr-card-badge-space) - 10px) !important; padding-left: 0 !important; padding-right: 0 !important; } /* 4. Badge "Nur 1 verfügbar" */ #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepTwo .stepTwoRoomDescriptionMiddle div.stepTwoAvailabiltyAlert { order: 4 !important; flex: 0 0 auto !important; align-self: center !important; margin: 10px 0 0 0 !important; } /* 5. Badge "Vor kurzem gebucht" */ #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepTwo .stepTwoRoomDescriptionRight div.recentlyBooked { order: 5 !important; flex: 0 0 auto !important; align-self: center !important; margin: 10px 0 0 0 !important; } /* 6. Preisblock */ #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepTwo .stepTwoRoomDescriptionRight > div.price { order: 6 !important; flex: 0 0 100% !important; margin-top: var(--fr-card-badge-space) !important; padding-left: 0 !important; padding-right: 0 !important; } } /* 10f. Schritt 2 nach dem Zurückklicken ("Seite 2"): easybooking blendet die Appartement-Liste aus und zeigt stattdessen #ebbeStepTwoAllChosen (Hinweis + Warenkorb). Alle Regeln hängen an diesem Container und wirken nur auf diese Ansicht. "display" am Container selbst nicht setzen, easybooking schaltet ihn per Inline-Style. Aufbau wie die übrigen Schritte: graue Box (Hinweis), Trennstrich, graue Box (Warenkorb). Schriften aus den Formaten in 0b (Überschrift, Titel, Fließtext). */ /* Grundwerte: linksbündig, Textfarbe (easybooking: zentriert, #313d4f) */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepTwo #ebbeStepTwoAllChosen, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepTwo #ebbeStepTwoAllChosen * { text-align: left !important; color: #262933 !important; } /* Container ohne die 50px oben und unten von easybooking: oben gilt der übliche Abstand unter den Reitern (1d), unten folgt direkt die Buttonleiste mit Trennstrich (0c-c). "display" bleibt bei easybooking (Inline-Style). */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepTwo #ebbeStepTwoAllChosen { margin: 0 !important; } /* --- Hinweis-Box ("Möchten Sie wirklich …"). Grundschrift wie der übrige Container, easybooking setzt der Hülle sonst eine eigene, kleinere Größe, Titel und Text wären dadurch kleiner als im Warenkorb (em-Falle) --- */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepTwo #ebbeStepTwoAllChosen .stepTwoAllChosenMessage { margin: 0 !important; padding: var(--fr-box-pad-y) var(--fr-box-pad-x) !important; background-color: var(--fr-box-bg) !important; border-radius: var(--fr-box-radius) !important; font-size: inherit !important; } /* "Möchten Sie wirklich …": Titel-Format (0b) wie der Name im Warenkorb, Text direkt darunter ohne Abstand (Muster Titel + Text) */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepTwo #ebbeStepTwoAllChosen .stepTwoAllChosenMessageHeadline { margin: 0 !important; padding: 0 !important; font-family: var(--fr-font-family) !important; font-size: var(--fr-title-size) !important; font-weight: var(--fr-title-weight) !important; line-height: var(--fr-title-line) !important; letter-spacing: 0 !important; text-transform: none !important; } /* Hinweistext: Fließtext (0b) */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepTwo #ebbeStepTwoAllChosen .stepTwoAllChosenMessageDescription { margin: 0 !important; padding: 0 !important; font-family: var(--fr-text-font) !important; font-size: var(--fr-text-size) !important; font-weight: var(--fr-text-weight) !important; line-height: var(--fr-text-line) !important; } /* --- Trennstrich: statt des kurzen Strichs wie überall (0c), volle Breite, darüber und darunter --fr-box-gap --- */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepTwo #ebbeStepTwoAllChosen .stepTwoDivider { width: 100% !important; max-width: none !important; height: 1px !important; margin: var(--fr-box-gap) 0 !important; padding: 0 !important; border: 0 !important; background: var(--fr-divider-image) left top / 15px 1px repeat-x !important; } #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepTwo #ebbeStepTwoAllChosen .stepTwoDivider::before, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepTwo #ebbeStepTwoAllChosen .stepTwoDivider::after { content: none !important; } /* --- Warenkorb-Box: Überschrift und Liste sind bei easybooking Geschwister ohne gemeinsame Hülle. Beide bekommen den grauen Hintergrund, die Überschrift die oberen, die Liste die unteren Ecken, zusammen wirken sie wie eine Box. Die Überschrift "Ihr Warenkorb" im Format der Box-Überschriften (0b), ohne Großbuchstaben und Sperrung von easybooking. --- */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepTwo #ebbeStepTwoAllChosen .stepTwoCartHeadline { font-family: var(--fr-font-family) !important; font-size: var(--fr-heading-size) !important; font-weight: var(--fr-heading-weight) !important; line-height: var(--fr-heading-line) !important; letter-spacing: 0 !important; text-transform: none !important; margin: 0 !important; padding: var(--fr-box-pad-y) var(--fr-box-pad-x) var(--fr-box-heading-gap) !important; background-color: var(--fr-box-bg) !important; border-radius: var(--fr-box-radius) var(--fr-box-radius) 0 0 !important; } /* Liste: block statt inline-block (sonst entsteht unten ein kleiner Spalt wie unter Bildern), ohne Schatten und 5px von easybooking */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepTwo #ebbeStepTwoAllChosen .stepTwoCartRoomsList { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 var(--fr-box-pad-x) var(--fr-box-pad-y) !important; background-color: var(--fr-box-bg) !important; border-radius: 0 0 var(--fr-box-radius) var(--fr-box-radius) !important; box-shadow: none !important; } /* --- Eintrag: links Name und Angaben, rechts Preis und Löschen, Aufbau wie die Buchungsdetails in Schritt 4 (14k). "3 Nächte" steht bei easybooking frei in der Mitte (am Handy ausgeblendet) und kommt hier als letzte Angabe unter die Personen. Vorschaubild ausgeblendet: nur 70px groß (beim Vergrößern unscharf), am Handy blendet easybooking es ohnehin aus. --- */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepTwo #ebbeStepTwoAllChosen .stepTwoCartRoomsList .shoppingCartOneRoom { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; column-gap: var(--fr-gutter) !important; row-gap: 0 !important; align-items: start !important; width: 100% !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } /* Mehrere Appartements: abgesetzt wie in "Gäste Daten" (14h) */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepTwo #ebbeStepTwoAllChosen .stepTwoCartRoomsList .shoppingCartOneRoom + .shoppingCartOneRoom { margin-top: var(--fr-box-pad-y) !important; } #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepTwo #ebbeStepTwoAllChosen .shoppingCartOneRoom .roomImage { display: none !important; } /* Anordnung im Raster: Angaben links (Zeile 1), Nächte darunter (Zeile 2), Preisspalte rechts über beide Zeilen */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepTwo #ebbeStepTwoAllChosen .shoppingCartOneRoom .shoppingCartRoomDesc, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepTwo #ebbeStepTwoAllChosen .shoppingCartOneRoom .nights, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepTwo #ebbeStepTwoAllChosen .shoppingCartOneRoom .shoppingCartPrice { float: none !important; flex: none !important; width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepTwo #ebbeStepTwoAllChosen .shoppingCartOneRoom .shoppingCartRoomDesc { grid-column: 1 !important; grid-row: 1 !important; } #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepTwo #ebbeStepTwoAllChosen .shoppingCartOneRoom .nights { display: block !important; /* am Handy sonst ausgeblendet */ grid-column: 1 !important; grid-row: 2 !important; } /* Preisspalte: Preis und Löschen rechtsbündig untereinander. Die beiden Hinweistexte darin (chooseOtherText, chooseNowText) blendet easybooking selbst ein und aus, die bleiben unangetastet. */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepTwo #ebbeStepTwoAllChosen .shoppingCartOneRoom .shoppingCartPrice { grid-column: 2 !important; grid-row: 1 / span 2 !important; display: flex !important; flex-direction: column !important; align-items: flex-end !important; } /* Name und Preis: Titel-Format (0b) */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepTwo #ebbeStepTwoAllChosen .shoppingCartOneRoom .roomTitle, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepTwo #ebbeStepTwoAllChosen .shoppingCartOneRoom .scPriceDetails { margin: 0 !important; padding: 0 !important; font-family: var(--fr-font-family) !important; font-size: var(--fr-title-size) !important; font-weight: var(--fr-title-weight) !important; line-height: var(--fr-title-line) !important; letter-spacing: 0 !important; } /* Preis: rechtsbündig, einzeilig, etwas kräftiger als der Name (Titel-Format sonst 600) */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepTwo #ebbeStepTwoAllChosen .shoppingCartOneRoom .scPriceDetails { text-align: right !important; white-space: nowrap !important; font-weight: 700 !important; } /* Zeitraum, Personen, Nächte: Fließtext direkt unter dem Namen. Schriftgröße an allem darin vererbt, sonst greift die em-Falle (easybooking setzt dem Datum eine eigene Größe und Stärke) */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepTwo #ebbeStepTwoAllChosen .shoppingCartOneRoom .shoppingCartDates, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepTwo #ebbeStepTwoAllChosen .shoppingCartOneRoom .persons, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepTwo #ebbeStepTwoAllChosen .shoppingCartOneRoom .nights { margin: 0 !important; padding: 0 !important; font-size: var(--fr-text-size) !important; line-height: var(--fr-text-line) !important; } #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepTwo #ebbeStepTwoAllChosen .shoppingCartOneRoom .shoppingCartDates, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepTwo #ebbeStepTwoAllChosen .shoppingCartOneRoom .shoppingCartDates *, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepTwo #ebbeStepTwoAllChosen .shoppingCartOneRoom .persons, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepTwo #ebbeStepTwoAllChosen .shoppingCartOneRoom .nights { font-family: var(--fr-text-font) !important; font-weight: var(--fr-text-weight) !important; letter-spacing: 0 !important; } #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepTwo #ebbeStepTwoAllChosen .shoppingCartOneRoom .shoppingCartDates * { font-size: inherit !important; line-height: inherit !important; } /* Löschen (Mülleimer): nur das Icon in Textfarbe, ohne Button-Optik, rechtsbündig unter dem Preis, Klickfläche mind. 32px. "display" bleibt bei easybooking (inline-flex). */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepTwo #ebbeStepTwoAllChosen .shoppingCartOneRoom .removeRoom { justify-content: flex-end !important; align-items: center !important; min-width: 32px !important; min-height: 32px !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; cursor: pointer; } #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepTwo #ebbeStepTwoAllChosen .shoppingCartOneRoom .removeRoom::before { color: #262933 !important; } /* Rückmeldung beim Darüberfahren und bei Tastatur-Fokus */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepTwo #ebbeStepTwoAllChosen .shoppingCartOneRoom .removeRoom:hover, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepTwo #ebbeStepTwoAllChosen .shoppingCartOneRoom .removeRoom:focus-visible { opacity: .7; } /* "Buchungsvorgang fortsetzen" ausblenden: macht dasselbe wie der Weiter-Button in der Buttonleiste darunter. Kein Eingriff in die Funktion, Weiter bleibt der Weg zu Schritt 3. */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepTwo #ebbeStepTwoAllChosen button.continue { display: none !important; } /* --------------------------------------------------------- 11. KALENDER (DATEPICKER) --------------------------------------------------------- */ /* Grundgröße: Desktop und Tablet */ #ebbe-datepicker-div { font-size: 16px !important; line-height: 1.4 !important; } /* Grundgröße: Handy */ @media (max-width: 767.98px) { #ebbe-datepicker-div { font-size: 14px !important; } } /* Monats- und Jahres-Dropdowns wie normalen Titeltext darstellen (nur im Reisedaten-Kalender, nicht beim Geburtsdatum) */ #ebbe-datepicker-div.ebbe-datepicker-multi .ebbe-datepicker-title { display: flex; justify-content: center; align-items: center; gap: 0.3em; } #ebbe-datepicker-div.ebbe-datepicker-multi select.ebbe-datepicker-month, #ebbe-datepicker-div.ebbe-datepicker-multi select.ebbe-datepicker-year { -webkit-appearance: none; appearance: none; background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; width: auto !important; height: auto !important; field-sizing: content; font: inherit; font-weight: inherit; color: inherit; text-align: center; pointer-events: none; } /* Kalender auf Breite eines Monats reduzieren */ #ebbe-datepicker-div.ebbe-datepicker-multi { width: 17em !important; } #ebbe-datepicker-div .ebbe-datepicker-group-first { width: 100% !important; float: none !important; } /* Zweiten Monat ausblenden, aber den Weiter-Pfeil behalten */ #ebbe-datepicker-div .ebbe-datepicker-group-last { position: static !important; float: none !important; width: 0 !important; height: 0 !important; padding: 0 !important; border: 0 !important; } #ebbe-datepicker-div .ebbe-datepicker-group-last .ebbe-datepicker-header { position: static !important; height: 0 !important; padding: 0 !important; border: 0 !important; } #ebbe-datepicker-div .ebbe-datepicker-group-last .ebbe-datepicker-title, #ebbe-datepicker-div .ebbe-datepicker-group-last .ebbe-datepicker-calendar { display: none !important; } /* Kopfzeile des Kalenders: Abstand nach unten */ .ebbe-datepicker .ebbe-datepicker-header { padding: 0px 0px 3px 0px !important; } /* Pfeile für den Monatswechsel einheitlich ausrichten */ #ebbe-datepicker-div .ebbe-datepicker-prev, #ebbe-datepicker-div .ebbe-datepicker-next { top: 0.2em !important; width: 1.8em !important; height: 1.8em !important; display: flex !important; align-items: center; justify-content: center; } #ebbe-datepicker-div .ebbe-datepicker-prev span, #ebbe-datepicker-div .ebbe-datepicker-next span { position: static !important; margin: 0 !important; top: auto !important; left: auto !important; } #ebbe-datepicker-div .ebbe-datepicker-prev { left: 0.4em !important; top: -0.15em !important; } #ebbe-datepicker-div .ebbe-datepicker-group-last .ebbe-datepicker-next { top: 0em !important; right: 0.6em !important; } /* Weiter-Pfeil im Einzelmonat-Modus (mobil) */ #ebbe-datepicker-div:not(.ebbe-datepicker-multi) .ebbe-datepicker-next { top: -0.15em !important; } /* Wählbare und vergangene Tage gleich groß darstellen */ #ebbe-datepicker-div .ebbe-datepicker-calendar td a, #ebbe-datepicker-div .ebbe-datepicker-calendar td span { font-size: 1em !important; line-height: inherit !important; } /* Geburtstags-Kalender: Pfeile ausblenden */ #ebbe-datepicker-div:not(.ebbe-datepicker-multi):has(select.ebbe-datepicker-month) .ebbe-datepicker-prev, #ebbe-datepicker-div:not(.ebbe-datepicker-multi):has(select.ebbe-datepicker-month) .ebbe-datepicker-next { display: none !important; } /* Geburtstags-Kalender: Dropdowns nebeneinander (50/50), immer hell */ #ebbe-datepicker-div:not(.ebbe-datepicker-multi):has(select.ebbe-datepicker-month) .ebbe-datepicker-title { display: flex !important; gap: 0.2em; margin: 0 !important; } #ebbe-datepicker-div:not(.ebbe-datepicker-multi):has(select.ebbe-datepicker-month) .ebbe-datepicker-title select { flex: 1 1 0; width: auto !important; min-width: 0; margin: 0 !important; color-scheme: light; background-color: #ffffff !important; color: #262933 !important; border: 1px solid #c4c4c4 !important; } #ebbe-datepicker-div:not(.ebbe-datepicker-multi):has(select.ebbe-datepicker-month) .ebbe-datepicker-title select option { background-color: #ffffff !important; border: 1px solid #c4c4c4 !important; color: #262933; } /* --------------------------------------------------------- 12. GALERIE (Bilder zur Unterkunft, Schritt 2) Optik übernommen von der Elementor-Lightbox (Elementor → Custom Elements → Code "LightboxGlass"). Bei Änderungen dort diesen Abschnitt und die Pop-ups in 13q ebenfalls anpassen. Hinweis: Das Icon "Zeige Bilder" ist in 10c ausgeblendet. --------------------------------------------------------- */ /* 12a. Overlay: vollflächig, dunkel, Glas-Effekt. "display" wird bewusst nicht gesetzt, easybooking öffnet/schließt per Inline-Style. */ #ebFrontEndFrame #ebbeContainer #ebbeImageOverlay { position: fixed !important; inset: 0 !important; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: var(--fr-overlay-bg) !important; backdrop-filter: var(--fr-overlay-filter); -webkit-backdrop-filter: var(--fr-overlay-filter); align-items: center; justify-content: center; } /* Browser-eigene Abdunklung hinter dem Dialog aus, sonst doppelt dunkel */ #ebFrontEndFrame #ebbeContainer #ebbeImageOverlay::backdrop { background: transparent; } /* 12b. Weiße Box um das Bild entfernen (ID hat zufällige Endung, daher [id^="imageGallery-"]) */ #ebFrontEndFrame #ebbeContainer #ebbeImageOverlay [id^="imageGallery-"], #ebFrontEndFrame #ebbeContainer #ebbeImageOverlay .galleryWrapper { background: transparent !important; box-shadow: none !important; border: 0 !important; padding: 0 !important; max-width: 90vw; } /* Wrapper waagrecht und senkrecht mittig im Overlay (easybooking setzt ihn sonst oben an: top: var(--ebPadding)) */ #ebFrontEndFrame #ebbeContainer #ebbeImageOverlay .galleryWrapper { top: 50%; left: 50%; transform: translate(-50%, -50%); } /* 12c. Großes Bild: ganz sichtbar, passt sich dem Bildschirm an, Ecken wie in der Lightbox */ #ebFrontEndFrame #ebbeContainer #ebbeImageOverlay .galleryOneBigImage img { width: auto; height: auto; max-width: 90vw; max-height: 80vh; border-radius: 8px; box-shadow: none; } /* 12d. Schließen-Button: gleiches X wie in der Lightbox, oben rechts */ #ebFrontEndFrame #ebbeContainer #ebbeImageOverlay button.closeGallery, #ebFrontEndFrame #ebbeContainer #ebbeImageOverlay button.closeGallery:hover, #ebFrontEndFrame #ebbeContainer #ebbeImageOverlay button.closeGallery:focus { position: fixed !important; top: 20px !important; right: 20px !important; left: auto !important; width: 20px !important; height: 20px !important; min-width: 0 !important; padding: 0 !important; margin: 0 !important; border: 0 !important; box-shadow: none !important; background-color: #ffffff !important; -webkit-mask: url("/wp-content/uploads/2024/01/freiraum-close.svg") center / contain no-repeat; mask: url("/wp-content/uploads/2024/01/freiraum-close.svg") center / contain no-repeat; z-index: 5001; } /* Original-Icon im Button ausblenden */ #ebFrontEndFrame #ebbeContainer #ebbeImageOverlay button.closeGallery > *, #ebFrontEndFrame #ebbeContainer #ebbeImageOverlay button.closeGallery::before, #ebFrontEndFrame #ebbeContainer #ebbeImageOverlay button.closeGallery::after { display: none !important; } /* 12e. Pfeile: weiß, ohne Hintergrund, am Bildschirmrand mittig. "display" bewusst nicht gesetzt (easybooking blendet sie bei nur einem Bild selbst aus). */ #ebFrontEndFrame #ebbeContainer #ebbeImageOverlay button.galleryPrev, #ebFrontEndFrame #ebbeContainer #ebbeImageOverlay button.galleryPrev:hover, #ebFrontEndFrame #ebbeContainer #ebbeImageOverlay button.galleryNext, #ebFrontEndFrame #ebbeContainer #ebbeImageOverlay button.galleryNext:hover { position: fixed !important; top: 50% !important; transform: translateY(-50%) !important; width: 48px !important; height: 48px !important; min-width: 0 !important; padding: 0 !important; margin: 0 !important; border: 0 !important; box-shadow: none !important; background-color: transparent !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 24px 24px !important; z-index: 5001; } #ebFrontEndFrame #ebbeContainer #ebbeImageOverlay button.galleryPrev, #ebFrontEndFrame #ebbeContainer #ebbeImageOverlay button.galleryPrev:hover { left: 20px !important; right: auto !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 4l-8 8 8 8' fill='none' stroke='%23ffffff' stroke-width='2'/%3E%3C/svg%3E") !important; } #ebFrontEndFrame #ebbeContainer #ebbeImageOverlay button.galleryNext, #ebFrontEndFrame #ebbeContainer #ebbeImageOverlay button.galleryNext:hover { right: 20px !important; left: auto !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 4l8 8-8 8' fill='none' stroke='%23ffffff' stroke-width='2'/%3E%3C/svg%3E") !important; } /* Original-Pfeil-Icons ausblenden */ #ebFrontEndFrame #ebbeContainer #ebbeImageOverlay button.galleryPrev::before, #ebFrontEndFrame #ebbeContainer #ebbeImageOverlay button.galleryPrev::after, #ebFrontEndFrame #ebbeContainer #ebbeImageOverlay button.galleryNext::before, #ebFrontEndFrame #ebbeContainer #ebbeImageOverlay button.galleryNext::after { display: none !important; } /* 12f. Vorschaubilder unter dem großen Bild komplett ausblenden (es wird pro Appartement nur ein Bild verwendet) */ #ebFrontEndFrame #ebbeContainer #ebbeImageOverlay .galleryWrapper .galleryThumbs { display: none !important; } /* --------------------------------------------------------- 13. SCHRITT 3: ZUSATZLEISTUNGEN Reihenfolge der grauen Boxen: Kopfbereich (13a–13c), Versicherung (13d–13h, 13o), Anmerkungen (13i), Zusatzleistungen (13j–13l, 13p), Abstände zwischen den Boxen (13n), Pop-ups (13q). Innenabstände (auch Handy) aus 0b, Trennstriche und Buttonleiste aus 0c. --------------------------------------------------------- */ /* Abstände in Schritt 3, zentral am ganzen Schritt definiert und in allen grauen Boxen (Versicherung, Anmerkungen, Zusatzleistungen) sowie in den Pop-ups verwendet: --fr-ins-gap: zwischen Blöcken, --fr-ins-heading-gap: unter Überschriften */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeStepThree { --fr-ins-gap: 6px; --fr-ins-heading-gap: var(--fr-box-heading-gap); } /* 13a. Kopfbereich ("Wählen Sie Ihre Zusatzleistungen" + Überspringen): graue Box mit den Werten aus 0b, Trennstrich darunter siehe 0c */ #ebbeContainer #ebbeAppWrapper #ebbeContent #ebbeStepThree .stepThreeHeader { background-color: var(--fr-box-bg) !important; border-radius: var(--fr-box-radius) !important; padding: var(--fr-box-pad-y) var(--fr-box-pad-x) !important; } /* 13b. Überschrift im Kopfbereich ("Wählen Sie Ihre Zusatzleistungen"). Außenabstände von easybooking und Elementor entfernen, damit der Text senkrecht mittig in der grauen Box sitzt */ #ebbeContainer #ebbeAppWrapper #ebbeContent #ebbeStepThree .stepThreeHeader h3 { font-size: var(--fr-heading-size) !important; font-weight: var(--fr-heading-weight) !important; line-height: var(--fr-heading-line) !important; margin: 0 !important; } /* 13c. Button "Überspringen" im Kopfbereich ausblenden (alle Breiten). Sein Design steckt weiterhin in Abschnitt 2, falls er wieder eingeblendet werden soll: dann nur diese Regel löschen. */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepThree .stepThreeHeader button.skip { display: none !important; } /* 13d. Versicherungsbereich (Reiserücktrittsversicherung): sämtlicher Text inkl. Links in Einheitsfarbe */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeStepThree #ebbeStepThreeInsurance #ebbeInsuranceBox, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeStepThree #ebbeStepThreeInsurance #ebbeInsuranceBox * { color: #262933 !important; } /* 13e. Versicherungsbereich: Auswahl (Radiobuttons + Checkbox) einheitlich aufgebaut und sauber untereinander. Icon links oben auf Höhe der ersten Textzeile. Schriftgrößen siehe 13f. */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeStepThree #ebbeStepThreeInsurance #ebbeInsuranceBox label.eb-radio, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeStepThree #ebbeStepThreeInsurance #ebbeInsuranceBox label.eb-checkbox { display: flex !important; align-items: flex-start !important; gap: 10px !important; width: 100% !important; margin: 0 !important; padding-left: 0 !important; line-height: 1.5 !important; justify-content: flex-start !important; text-align: left !important; } /* Icon (Kreis bzw. Kästchen): feste Größe, Zeilenhöhe so gewählt, dass es mittig zur ersten Textzeile sitzt */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeStepThree #ebbeStepThreeInsurance #ebbeInsuranceBox label.eb-radio::before, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeStepThree #ebbeStepThreeInsurance #ebbeInsuranceBox label.eb-checkbox::before { flex: 0 0 auto; position: static !important; margin: 0 !important; font-size: 1.25em !important; line-height: 1.2 !important; color: #262933 !important; } /* Name/Preis und "mehr Infos" als Flex-Zeile: Abstand genau 5px (das Leerzeichen im HTML fällt dadurch weg), auf schmalen Bildschirmen rutscht der Link bei Bedarf in die nächste Zeile */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeStepThree #ebbeStepThreeInsurance #ebbeInsuranceBox label.eb-radio > span { display: inline-flex !important; flex-wrap: wrap !important; align-items: baseline !important; gap: 5px !important; } /* "mehr Infos": eigene Abstände von easybooking entfernen */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeStepThree #ebbeStepThreeInsurance #ebbeInsuranceBox a.insurance-link { margin-left: 0 !important; padding-left: 0 !important; } /* Grundabstand unter jeder Option. Wird für die Radiobuttons (13f) und die Checkbox (13g) gezielt überschrieben. */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeStepThree #ebbeStepThreeInsurance #ebbeInsuranceBox .form-group { margin: 0 0 15px 0 !important; } /* Checkbox (Zustimmung) auf Tablet und Handy (unter 992px): Kästchen oben, Text darunter, beide linksbündig. Abstand dazwischen wie zwischen den übrigen Blöcken im Versicherungsfeld (--fr-ins-gap) */ @media (max-width: 991.98px) { #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeStepThree #ebbeStepThreeInsurance #ebbeInsuranceBox label.eb-checkbox { flex-direction: column !important; align-items: flex-start !important; gap: var(--fr-ins-gap) !important; } } /* 13f. Versicherungsbereich: Schrift und Abstände. Schriftgröße nur am äußeren Element (em würde sich sonst bei jeder Verschachtelung erneut verkleinern), Schriftart auch an allen Elementen darin (Abschnitt 9a setzt sie sonst direkt auf Spans). */ /* Intro-Text und Checkbox: Fließtext aus 0b (CI-Schrift von easybooking, Größe wie die Beschreibungen in Schritt 2) */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeStepThree #ebbeStepThreeInsurance #ebbeInsuranceBox p.general-description, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeStepThree #ebbeStepThreeInsurance #ebbeInsuranceBox label.eb-checkbox { font-size: var(--fr-text-size) !important; } #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeStepThree #ebbeStepThreeInsurance #ebbeInsuranceBox p.general-description, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeStepThree #ebbeStepThreeInsurance #ebbeInsuranceBox p.general-description *, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeStepThree #ebbeStepThreeInsurance #ebbeInsuranceBox label.eb-checkbox, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeStepThree #ebbeStepThreeInsurance #ebbeInsuranceBox label.eb-checkbox * { font-family: var(--fr-text-font) !important; } /* Radiobuttons (Versicherungen + Verzicht): Größe, Signika */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeStepThree #ebbeStepThreeInsurance #ebbeInsuranceBox label.eb-radio { font-size: .875em !important; } #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeStepThree #ebbeStepThreeInsurance #ebbeInsuranceBox label.eb-radio, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeStepThree #ebbeStepThreeInsurance #ebbeInsuranceBox label.eb-radio * { font-family: var(--fr-font-family) !important; } /* Radiobutton-Texte (Versicherungsname, Verzicht) halbfett, Preis extrafett. Der Link "mehr Infos" liegt außerhalb dieses Spans und behält seine Schriftstärke. */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeStepThree #ebbeStepThreeInsurance #ebbeInsuranceBox label.eb-radio > span > span { font-weight: 600 !important; } #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeStepThree #ebbeStepThreeInsurance #ebbeInsuranceBox label.eb-radio strong { font-weight: 800 !important; } /* Radiobuttons enger zusammen: nur so viel Abstand wie zwischen Textzeilen, ohne zusätzliche Innen- oder Mindesthöhen */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeStepThree #ebbeStepThreeInsurance #ebbeInsuranceBox .form-group.insurance-element { margin: 0 0 5px 0 !important; padding: 0 !important; min-height: 0 !important; } #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeStepThree #ebbeStepThreeInsurance #ebbeInsuranceBox label.eb-radio { padding-top: 0 !important; padding-bottom: 0 !important; min-height: 0 !important; height: auto !important; } /* 13g. Versicherungsfeld: graue Box mit den Werten aus 0b (easybooking: #f3f3f3, eigener Innenabstand) */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeStepThree #ebbeStepThreeInsurance #ebbeInsuranceBox { padding: var(--fr-box-pad-y) var(--fr-box-pad-x) !important; background-color: var(--fr-box-bg) !important; border-radius: var(--fr-box-radius); } /* Letzte Option (Checkbox) ohne Abstand nach unten, damit unten genau der Innenabstand bleibt */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeStepThree #ebbeStepThreeInsurance #ebbeInsuranceBox .showERbox .form-group { margin-bottom: 0 !important; } /* 13h. Einheitliche Abstände zwischen den Blöcken im Versicherungsfeld (Überschrift, Text, Radiobuttons, Checkbox), über die Variablen oben in Abschnitt 13. Alle übrigen Außenabstände auf null. */ /* Zwischen-Container ohne eigene Abstände */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeStepThree #ebbeStepThreeInsurance #ebbeInsuranceBox .row-fluid, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeStepThree #ebbeStepThreeInsurance #ebbeInsuranceBox form, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeStepThree #ebbeStepThreeInsurance #ebbeInsuranceBox fieldset { margin: 0 !important; padding: 0 !important; } /* Überschrift: eigener, etwas größerer Abstand nach unten */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeStepThree #ebbeStepThreeInsurance #ebbeInsuranceBox h4 { margin: 0 0 var(--fr-ins-heading-gap) 0 !important; } /* Text: Abstand nach unten wie zwischen den übrigen Blöcken */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeStepThree #ebbeStepThreeInsurance #ebbeInsuranceBox p.general-description { margin: 0 0 var(--fr-ins-gap) 0 !important; } /* Checkbox: Abstand nach oben (minus 5px, die der letzte Radiobutton aus 13f schon nach unten mitbringt) */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeStepThree #ebbeStepThreeInsurance #ebbeInsuranceBox .showERbox { margin-top: calc(var(--fr-ins-gap) - 5px) !important; } /* 13i. Anmerkungen & Wünsche: graue Box wie das Versicherungsfeld (Hintergrund, Radius, Innenabstand), Überschrift mit demselben Abstand nach unten wie dort (--fr-ins-heading-gap) plus eigenem Zusatz (--fr-comments-extra-gap). Textfeld im einheitlichen Aussehen aus 0e, unten Innenabstand für Boxen mit Feld am Ende (0b). */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeStepThree #ebbeStepThreeCommentsWrapper { --fr-comments-extra-gap: 10px; background-color: var(--fr-box-bg) !important; border-radius: var(--fr-box-radius) !important; padding: var(--fr-box-pad-y) var(--fr-box-pad-x) var(--fr-box-pad-bottom-fields) var(--fr-box-pad-x) !important; } /* Innere Container ohne eigene Abstände und Rahmen */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeStepThree #ebbeStepThreeCommentsWrapper fieldset, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeStepThree #ebbeStepThreeCommentsWrapper .fieldset-header, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeStepThree #ebbeStepThreeCommentsWrapper .form-group { margin: 0 !important; padding: 0 !important; border: 0 !important; min-width: 0 !important; } #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeStepThree #ebbeStepThreeCommentsWrapper h4 { margin: 0 0 calc(var(--fr-ins-heading-gap) + var(--fr-comments-extra-gap)) 0 !important; } /* Textfeld: Aussehen und Platzhalter aus 0e. Hier die Höhe von genau 5 Textzeilen (5 × Zeilenhöhe 1.5 + Innenabstand oben und unten), Innenabstand abzüglich Rahmen (0e-a), damit der Text an derselben Stelle steht wie ohne Rahmen, und die Schrift wie die Texte der Reiserücktrittsversicherung (13f). Größe bleibt bei 16px aus 0e (iPhone zoomt sonst beim Antippen). */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeStepThree #ebbeStepThreeCommentsWrapper textarea { line-height: 1.5 !important; padding-top: calc(var(--fr-field-pad-y) - var(--fr-field-border-width)) !important; padding-bottom: calc(var(--fr-field-pad-y) - var(--fr-field-border-width)) !important; height: calc(5 * 1.5em + 2 * var(--fr-field-pad-y)) !important; font-family: var(--fr-text-font) !important; } /* 13j. Zusatzleistungen (Produktgruppen, z. B. "Verpflichtende Zusatzleistungen", "Sonstiges"): graue Box wie Versicherung und Anmerkungen. Abstand zur Box darüber siehe 13n. Aufklappbar: Der Abstand unter der Überschrift sitzt am aufklappbaren Inhalt, damit die Box zugeklappt oben und unten gleich hoch ist. */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeStepThree #ebbeStepThreeProducts section.form-section { background-color: var(--fr-box-bg) !important; border-radius: var(--fr-box-radius) !important; padding: var(--fr-box-pad-y) var(--fr-box-pad-x) !important; border: 0 !important; } /* Kopfzeile: Überschrift links, Toggle-Icon rechts, senkrecht mittig */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeStepThree #ebbeStepThreeProducts header.section-header { display: flex !important; justify-content: space-between !important; align-items: center !important; margin: 0 !important; padding: 0 !important; border: 0 !important; } #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeStepThree #ebbeStepThreeProducts header.section-header h4 { margin: 0 !important; } /* Aufklappbarer Inhalt: Abstand zur Überschrift wie bei den anderen Boxen (--fr-ins-heading-gap), sonst ohne eigene Abstände */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeStepThree #ebbeStepThreeProducts main.section-content { margin: var(--fr-ins-heading-gap) 0 0 0 !important; padding: 0 !important; border: 0 !important; } /* Toggle-Icon (Minus/Plus): nur Grundlook, kein Hover-, Active- oder Fokus-Effekt (auch nicht der Rahmen aus dem Elementor-Theme); ohne Innenabstand rechts, damit es bündig mit den Karten abschließt */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeStepThree #ebbeStepThreeProducts button.toggle-button, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeStepThree #ebbeStepThreeProducts button.toggle-button:hover, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeStepThree #ebbeStepThreeProducts button.toggle-button:active, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeStepThree #ebbeStepThreeProducts button.toggle-button:focus, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeStepThree #ebbeStepThreeProducts button.toggle-button:focus-visible { background-color: transparent !important; border: 0 !important; box-shadow: none !important; outline: 0 !important; color: #262933 !important; transition: none !important; padding-right: 0 !important; } /* 13k. Produktkarten in den Zusatzleistungen: statt Bootstrap-Spalten ein Grid mit einer Spalte (eine Karte pro Zeile, alle Breiten), 15px Abstand zwischen den Karten. Außen kein Versatz. */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeStepThree #ebbeStepThreeProducts .row.stepThreeProductGroupContent { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 15px !important; margin: 0 !important; padding: 10px 0 !important; } /* Spalten: Bootstrap-Breiten und eigenes Polster entfernen */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeStepThree #ebbeStepThreeProducts .stepThreeProductOne { flex: none !important; width: auto !important; max-width: none !important; padding: 0 !important; } /* Karte füllt die ganze Höhe ihrer Zeile (optionale Leistungen: siehe 13p) */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeStepThree #ebbeStepThreeProducts .stepThreeProductOne > .card { height: 100% !important; margin: 0 !important; } /* Kartenbereich: Titel links, Preis rechts in einer Zeile. Darf umbrechen (auf dem Handy rutscht der Auswählen-Button aus 13p in eine eigene Zeile, 10px darunter). */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeStepThree #ebbeStepThreeProducts .card-body { display: flex !important; flex-wrap: wrap !important; justify-content: space-between !important; align-items: center !important; gap: 20px !important; row-gap: 10px !important; padding: 20px 25px !important; } #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeStepThree #ebbeStepThreeProducts .card-body h5.card-title, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeStepThree #ebbeStepThreeProducts .card-body h5.card-title .productTitle { font-weight: 600 !important; } /* Titel nimmt den restlichen Platz ein und schiebt Preis (und Button) nach rechts */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeStepThree #ebbeStepThreeProducts .card-body h5.card-title { margin: 0 !important; flex: 1 1 auto; } /* Preisblock: Bootstrap-Zeile/-Spalte neutralisieren, rechtsbündig */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeStepThree #ebbeStepThreeProducts .card-body .card-detail.row { flex: 0 0 auto !important; margin: 0 !important; } #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeStepThree #ebbeStepThreeProducts .card-body .productPrice { flex: none !important; width: auto !important; max-width: none !important; padding: 0 !important; text-align: right !important; white-space: nowrap; } /* Preis in der Produktkarte: gleiche Optik wie der Appartement-Preis in Schritt 2 (10c: extrafett, Signika, Einheitsfarbe) */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeStepThree #ebbeStepThreeProducts .card-body .productPrice > div { font-family: var(--fr-font-family) !important; font-weight: 800 !important; color: #262933 !important; } /* 13l. "Details einblenden" auf dem Produktbild (a.card-tag): Aussehen wie das Badge "Vor kurzem gebucht" aus Schritt 2 (10c). Position bleibt wie von easybooking (oben links auf dem Bild). */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeStepThree #ebbeStepThreeProducts .card .card-img-top a.card-tag { display: inline-flex !important; align-items: center !important; gap: 5px !important; padding: 10px !important; border-radius: 5px !important; background-color: #ffffff !important; color: #262933 !important; font-family: var(--fr-font-family) !important; font-size: 12px !important; font-weight: 600 !important; line-height: 1 !important; text-transform: uppercase !important; text-decoration: none !important; } /* Info-Icon davor: gleiche Form wie beim Badge (Maske, Farbe = Textfarbe) */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeStepThree #ebbeStepThreeProducts .card .card-img-top a.card-tag::before { content: ""; flex: 0 0 14px; width: 14px; height: 14px; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z'/%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 24 24'%3E%3Cpath d='M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z'/%3E%3C/svg%3E") center / contain no-repeat; } /* Hover, Klick, Fokus: Farben umgedreht (Icon folgt automatisch) */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeStepThree #ebbeStepThreeProducts .card .card-img-top a.card-tag:hover, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeStepThree #ebbeStepThreeProducts .card .card-img-top a.card-tag:active, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeStepThree #ebbeStepThreeProducts .card .card-img-top a.card-tag:focus, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeStepThree #ebbeStepThreeProducts .card .card-img-top a.card-tag:focus-visible { background-color: #262933 !important; color: #ffffff !important; outline: 0 !important; } /* 13n. Abstände zwischen den grauen Boxen in Schritt 3: alle Trenner und Zwischenabstände entfernen, stattdessen hat jede Box genau 15px Abstand zur vorherigen. Der Abstand sitzt an den Boxen selbst, damit leere Container (z. B. Extras, Partner) keine unsichtbaren Lücken erzeugen. Der Trennstrich vor den Buttons (0c) bleibt bestehen. */ /* Zwischen-Container: ohne eigene Abstände und Rahmen */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepThree #ebbeStepThreeExtrasWrapper, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepThree #ebbeStepThreeProducts, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepThree #ebbeStepThreeProducts .stepThreeProductGroup, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepThree #ebbeStepThreeInsurance, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepThree #ebbeStepThreeInsurance [id^="insuranceView-"], #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepThree #ebbeStepThreePartner { margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; border-top: 0 !important; border-bottom: 0 !important; } /* Kopfbereich: oben ohne Außenabstand, sein Innenabstand bleibt (13a). Abstand nach unten (Strich) siehe 0c. */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepThree .stepThreeHeader { margin-top: 0 !important; } /* Trennlinien zwischen den Boxen ausblenden (gestrichelt vor der Versicherung, durchgezogen im Partner-Bereich vor den Anmerkungen) */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepThree .dashed-spacer, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepThree .line-spacer, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepThree hr { display: none !important; } /* Extras-Bereich ausblenden, solange keine Extras angeboten werden (kein slick-slide im Karussell). Sobald easybooking Extras anzeigt, erscheint er automatisch wieder. */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepThree #ebbeStepThreeExtrasWrapper:not(:has(.slick-slide)) { display: none !important; } /* Lade-Animation nach abgeschlossenem Laden ausblenden (sie bleibt sonst mit ihrer Höhe im Layout stehen) */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepThree #ebbeStepThreeExtrasWrapper .loading-overlay.done { display: none !important; } /* Jede graue Box: genau --fr-box-gap Abstand zur vorherigen, nach unten keiner */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeStepThree #ebbeStepThreeProducts section.form-section, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeStepThree #ebbeStepThreeInsurance #ebbeInsuranceBox, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeStepThree #ebbeStepThreeCommentsWrapper { margin: var(--fr-box-gap) 0 0 0 !important; border-top: 0 !important; border-bottom: 0 !important; } /* 13o. Logo im Versicherungsfeld: eigenes Logo statt des easybooking- Bildes (Original- ausgeblendet, neues Logo als Hintergrund des Containers). Auf allen Breiten sichtbar. Tablet und Handy (unter 992px): eigener Block über der Überschrift. Desktop (ab 992px): oben rechts in der Box. */ /* Logo: Breite fest, Höhe ergibt sich aus dem Seitenverhältnis des Bildes (404 × 100 px) */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeStepThree #ebbeStepThreeInsurance #ebbeInsuranceBox { --fr-ins-logo-width: 130px; --fr-ins-logo-ratio: 404 / 100; } /* Original-Bild ausblenden */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeStepThree #ebbeStepThreeInsurance #ebbeInsuranceBox .insurance-logo img { display: none !important; } /* Container mit neuem Logo (Tablet und Handy): linksbündig über der Überschrift, 2px nach rechts für bündigen Abschluss mit dem Text, Abstand zur Überschrift 2px mehr als zwischen Überschrift und Text */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeStepThree #ebbeStepThreeInsurance #ebbeInsuranceBox .insurance-logo { display: block !important; position: static !important; float: none !important; width: var(--fr-ins-logo-width) !important; height: auto !important; aspect-ratio: var(--fr-ins-logo-ratio) !important; margin: 0 0 calc(var(--fr-ins-heading-gap) + 2px) 2px !important; padding: 0 !important; background: url("/wp-content/uploads/2026/10/erv-logo.png") left center / contain no-repeat !important; } /* Desktop (ab 992px): Logo oben rechts, am Innenabstand der Box ausgerichtet (3px über dem Innenabstand oben, damit es auf Höhe der Überschrift sitzt; 40px rechts) */ @media (min-width: 992px) { #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeStepThree #ebbeStepThreeInsurance #ebbeInsuranceBox { position: relative !important; } #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeStepThree #ebbeStepThreeInsurance #ebbeInsuranceBox .insurance-logo { position: absolute !important; top: 27px !important; right: 40px !important; left: auto !important; margin: 0 !important; background-position: right center !important; } } /* 13p. Optionale Zusatzleistungen (.stepThreeEditableProducts): Beschreibung nicht in der Karte (erscheint nur im Pop-up, wie bei den verpflichtenden Leistungen), dazu ein Button "Auswählen". Der Button ist rein optisch ein Pseudo-Element in der Karte: Die ganze Karte öffnet bei easybooking bereits das Pop-up mit Anzahl und "Hinzufügen", ein Klick auf den Button ist daher ein Klick auf die Karte. Design hell wie der Zurück-Button, ohne Hover-Effekt. Tablet/Desktop: Titel links, Preis und Button rechts in einer Zeile. Handy: Button in eigener Zeile über die volle Breite. */ /* Karte wächst mit dem Inhalt mit (easybooking begrenzt die Höhe und schneidet den Rest ab) */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeStepThree #ebbeStepThreeProducts .stepThreeEditableProducts .card { height: auto !important; max-height: none !important; overflow: visible !important; -webkit-mask-image: none !important; mask-image: none !important; } #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeStepThree #ebbeStepThreeProducts .stepThreeEditableProducts .card::before, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeStepThree #ebbeStepThreeProducts .stepThreeEditableProducts .card::after { display: none !important; } /* Beschreibung in der Karte ausblenden (bleibt im Pop-up sichtbar) */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeStepThree #ebbeStepThreeProducts .stepThreeEditableProducts .card-body .product-description { display: none !important; } /* Button "Auswählen": Grunddesign */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeStepThree #ebbeStepThreeProducts .stepThreeEditableProducts .card .card-body::after { content: "Ausw\00E4hlen"; display: inline-flex; align-items: center; justify-content: center; padding: 1rem 1.5rem; border-radius: 10px; background-color: var(--fr-btn-light-bg); color: #2d3038; font-family: var(--fr-font-family); font-weight: 600; font-size: 14px; line-height: 1; text-transform: uppercase; letter-spacing: .03em; } /* Englische Seite */ html:lang(en) #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeStepThree #ebbeStepThreeProducts .stepThreeEditableProducts .card .card-body::after { content: "Select"; } /* Tablet und Desktop (ab 768px): Titel links, Preis und Button rechts in einer Zeile */ @media (min-width: 768px) { #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeStepThree #ebbeStepThreeProducts .stepThreeEditableProducts .card-body { flex-wrap: nowrap !important; } #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeStepThree #ebbeStepThreeProducts .stepThreeEditableProducts .card .card-body::after { order: 3; flex: 0 0 auto; align-self: center; margin: 0; } } /* Handy (bis 767px): Button in eigener Zeile über die volle Breite */ @media (max-width: 767.98px) { #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeStepThree #ebbeStepThreeProducts .stepThreeEditableProducts .card .card-body::after { order: 4; flex: 0 0 100%; width: 100%; margin: 10px 0 5px 0; } } /* 13q. Pop-ups in Schritt 3 (Detailansicht und Auswahl von Zusatzleistungen, dialog.eb-dialog). Hintergrund mit Blur wie bei der Galerie (12a), Schließen-Icon wie dort, aber dunkel auf dem weißen Pop-up. "display" wird nicht gesetzt, easybooking öffnet/schließt per Inline-Style. Design des Hinzufügen-Buttons siehe Abschnitt 2. */ /* Overlay: vollflächig, dunkel, Glas-Effekt */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeStepThree dialog.eb-dialog { position: fixed !important; inset: 0 !important; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: var(--fr-overlay-bg) !important; backdrop-filter: var(--fr-overlay-filter); -webkit-backdrop-filter: var(--fr-overlay-filter); align-items: center; justify-content: center; } /* Browser-eigene Abdunklung hinter dem Dialog aus, sonst doppelt dunkel */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeStepThree dialog.eb-dialog::backdrop { background: transparent; } /* Normaler Zeilenumbruch statt text-wrap: balance aus dem Custom CSS der Website (nur in den Pop-ups) */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeStepThree dialog.eb-dialog, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeStepThree dialog.eb-dialog * { text-wrap: wrap !important; } /* Einheitlicher Innenabstand für alle drei Bereiche (Kopf, Auswahl, Button), Abstände dazwischen über --fr-ins-heading-gap */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeStepThree dialog.eb-dialog .modal-content { --fr-popup-pad: 30px; } /* Alle Texte zentriert, auch der gewählte Wert im Dropdown */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeStepThree dialog.eb-dialog .modal-content, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeStepThree dialog.eb-dialog .modal-content * { text-align: center !important; text-align-last: center !important; } /* Kopfbereich: oben und seitlich Innenabstand, unten keiner */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeStepThree dialog.eb-dialog .modal-header { padding: var(--fr-popup-pad) var(--fr-popup-pad) 0 var(--fr-popup-pad) !important; margin: 0 !important; border: 0 !important; } /* Überschrift: volle Breite (easybooking verschmälert sie sonst, dann sitzt sie nicht in der Mitte), Abstand zur Beschreibung wie unter Überschriften in Schritt 3 */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeStepThree dialog.eb-dialog .modal-header .modal-title { flex: 0 0 100% !important; width: 100% !important; max-width: none !important; padding: 0 !important; margin: 0 0 var(--fr-ins-heading-gap) 0 !important; font-weight: 600 !important; } /* Beschreibung: ohne eigenen seitlichen Innenabstand von easybooking (40px), damit nur der einheitliche Innenabstand des Pop-ups gilt; Abstand zur Auswahl wie unter der Überschrift */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeStepThree dialog.eb-dialog .modal-sub-heading { padding: 0 !important; margin: 0 0 var(--fr-ins-heading-gap) 0 !important; } #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeStepThree dialog.eb-dialog .modal-sub-heading .ql-container, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeStepThree dialog.eb-dialog .modal-sub-heading .ql-editor { padding: 0 !important; margin: 0 !important; border: 0 !important; } /* Auswahl ("Anzahl" + Dropdown): seitlich Innenabstand, oben und unten keiner; Bootstrap-Spalte ohne eigenes Polster */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeStepThree dialog.eb-dialog .modal-body { padding: 0 var(--fr-popup-pad) !important; margin: 0 !important; } #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeStepThree dialog.eb-dialog .modal-body .card-detail-amount { flex: 1 1 100% !important; max-width: 100% !important; padding: 0 !important; margin: 0 !important; } /* Dropdown über die volle Breite */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeStepThree dialog.eb-dialog .modal-body select { width: 100% !important; } /* Button-Bereich: genau 15px Abstand zum Dropdown, seitlich und unten Innenabstand */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeStepThree dialog.eb-dialog .modal-footer { padding: 15px var(--fr-popup-pad) var(--fr-popup-pad) var(--fr-popup-pad) !important; margin: 0 !important; border: 0 !important; } /* Hinzufügen-Button über die volle Breite */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepThree dialog.eb-dialog button#submitSelection { width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } /* Pop-up mit Auswahl: 13px mehr Abstand zwischen Beschreibung und "Anzahl"/Dropdown */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeStepThree dialog.eb-dialog .modal-content:has(button#submitSelection) .modal-sub-heading { margin-bottom: calc(var(--fr-ins-heading-gap) + 13px) !important; } /* Pop-up ohne Auswahl (verpflichtende Leistungen, kein Hinzufügen- Button): unten derselbe Innenabstand wie oben und seitlich, ohne zusätzlichen Abstand unter der Beschreibung */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeStepThree dialog.eb-dialog .modal-content:not(:has(button#submitSelection)) .modal-header { padding-bottom: var(--fr-popup-pad) !important; } #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeStepThree dialog.eb-dialog .modal-content:not(:has(button#submitSelection)) .modal-sub-heading { margin-bottom: 0 !important; } /* Schließen-Button: X aus der Galerie, dunkel. Position wie von easybooking, nur optisch 5px tiefer (Layout unverändert) */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeStepThree dialog.eb-dialog button.close-popup, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeStepThree dialog.eb-dialog button.close-popup:hover, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeStepThree dialog.eb-dialog button.close-popup:focus { width: 20px !important; height: 20px !important; min-width: 0 !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; background-color: #262933 !important; transform: translateY(5px) !important; -webkit-mask: url("/wp-content/uploads/2024/01/freiraum-close.svg") center / contain no-repeat; mask: url("/wp-content/uploads/2024/01/freiraum-close.svg") center / contain no-repeat; } /* Original-Icon im Schließen-Button ausblenden */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeStepThree dialog.eb-dialog button.close-popup > *, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeStepThree dialog.eb-dialog button.close-popup::before, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeStepThree dialog.eb-dialog button.close-popup::after { display: none !important; } /* Nur Smartphone (unter 576px): Pop-up über die volle Breite ohne Abstand links/rechts und ohne Eckenrundung; Höhe nur so viel wie der Inhalt braucht, senkrecht mittig */ @media (max-width: 575.98px) { #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeStepThree dialog.eb-dialog .modal-dialog { width: 100% !important; max-width: none !important; margin: 0 !important; } #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeStepThree dialog.eb-dialog .modal-content { border-radius: 0 !important; height: auto !important; min-height: 0 !important; } } /* --------------------------------------------------------- 14. SCHRITT 4: BUCHEN (Grundlayout) Aufbau wie Schritt 3: Kopfbereich als Übersichtsbox, jeder Formularbereich eine graue Box, Buchungsdetails und Zustimmung darunter als eigene Boxen. Alles auf allen Breiten untereinander (wie auf Tablet und Handy). Werte aus 0b, Trennstriche aus 0c, Buttons aus Abschnitt 5, Felder und Labels aus 0e, Abstände zwischen den Feldern aus 0f. 14f–14i die einzelnen Container von oben nach unten, 14j Fließtexte, 14k Buchungsdetails, 14l Zustimmung. --------------------------------------------------------- */ /* 14a. Layout: Formular (main), Buchungsdetails (aside) und Zurück-Button (footer) immer untereinander in voller Breite. Die Bootstrap-Spalten sind sonst ab 1200px nebeneinander (8/4) und rücken ihren Inhalt je 15px nach innen. */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepFour form.ebForm { margin-left: 0 !important; margin-right: 0 !important; } #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepFour form.ebForm > main, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepFour form.ebForm > aside, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepFour form.ebForm > footer { flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; } /* Buchungsdetails: easybooking lässt sie auf dem Desktop beim Scrollen mitlaufen (neben dem Formular). Untereinander nicht mehr nötig, daher normal im Fluss. */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepFour form.ebForm > aside > #ebbeBookingSummary { position: static !important; top: auto !important; margin: 0 !important; padding: 0 !important; } /* 14b. Graue Boxen: Kopfbereich, Formularbereiche, Buchungsdetails, Zustimmung (Checkbox + AGB-Text) */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepFour form.ebForm header.form-header, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepFour form.ebForm fieldset.form-section, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepFour form.ebForm #ebbeStepFourBookingSummary, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepFour form.ebForm aside fieldset.box.no-divider { background-color: var(--fr-box-bg) !important; border: 0 !important; border-radius: var(--fr-box-radius) !important; box-shadow: none !important; padding: var(--fr-box-pad-y) var(--fr-box-pad-x) !important; } /* Abstände: Kopfbereich oben ohne Außenabstand (unten Strich, 0c), jede weitere Box genau --fr-box-gap unter der vorherigen */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepFour form.ebForm header.form-header { margin-top: 0 !important; } #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepFour form.ebForm fieldset.form-section, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepFour form.ebForm #ebbeStepFourBookingSummary, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepFour form.ebForm aside fieldset.box.no-divider { margin: var(--fr-box-gap) 0 0 0 !important; } /* Innere Hülle der Buchungsdetails ohne eigenen Hintergrund und Abstand (easybooking verwendet dieselbe ID außen und innen) */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepFour form.ebForm #ebbeStepFourBookingSummary > .bookingSummary { margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } /* 14c. Überschriften der Boxen "Ihre persönlichen Daten" (Kopfbereich) und "Buchungsdetails": gleiche Größe wie die übrigen Box- Überschriften (9b, 13b), Abstand zum Text darunter wie in Schritt 3 */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepFour form.ebForm header.form-header h3, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepFour form.ebForm #ebbeStepFourBookingSummary h3 { font-family: var(--fr-font-family) !important; font-size: var(--fr-heading-size) !important; font-weight: var(--fr-heading-weight) !important; line-height: var(--fr-heading-line) !important; letter-spacing: 0 !important; color: #262933 !important; margin: 0 0 var(--fr-box-heading-gap) 0 !important; } /* Letzter Text in einer Box ohne Abstand nach unten, damit unten genau der Innenabstand bleibt */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepFour form.ebForm header.form-header > :last-child, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepFour form.ebForm #ebbeStepFourBookingSummary .taxes p, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepFour form.ebForm aside fieldset.box.no-divider > .form-group:last-child { margin-bottom: 0 !important; } /* 14d. Formularbereiche aufklappbar (wie 13j): Kopfzeile mit Überschrift links und Toggle-Icon rechts, Abstand unter der Überschrift am aufklappbaren Inhalt, damit die Box zugeklappt oben und unten gleich hoch ist */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepFour form.ebForm fieldset.form-section header.section-header { display: flex !important; justify-content: space-between !important; align-items: center !important; margin: 0 !important; padding: 0 !important; border: 0 !important; } #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepFour form.ebForm fieldset.form-section header.section-header h4 { margin: 0 !important; } #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepFour form.ebForm fieldset.form-section > main { margin: var(--fr-box-heading-gap) 0 0 0 !important; padding: 0 !important; border: 0 !important; } /* "Ihre persönlichen Daten" und "Gäste Daten" enden mit Feldern: unten etwas mehr Innenabstand (0b), nur aufgeklappt (zugeklappt bleibt die Box oben und unten gleich) */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepFour form.ebForm fieldset.form-section:has(> main#ebbeStepFourPersonalData.show), #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepFour form.ebForm fieldset.insurance-form:has(> main.show) { padding-bottom: var(--fr-box-pad-bottom-fields) !important; } /* Letztes Element im aufklappbaren Inhalt ohne Abstand nach unten (easybooking: 1.5rem), damit unten genau der Innenabstand der Box bleibt */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepFour form.ebForm fieldset.form-section > main > :last-child { margin-bottom: 0 !important; } /* Toggle-Icon (Minus/Plus): nur Grundlook, ohne Hover-, Active- und Fokus-Effekt, rechts bündig */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepFour form.ebForm fieldset.form-section button.toggle-button, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepFour form.ebForm fieldset.form-section button.toggle-button:hover, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepFour form.ebForm fieldset.form-section button.toggle-button:active, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepFour form.ebForm fieldset.form-section button.toggle-button:focus, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepFour form.ebForm fieldset.form-section button.toggle-button:focus-visible { background-color: transparent !important; border: 0 !important; box-shadow: none !important; outline: 0 !important; color: #262933 !important; transition: none !important; padding-right: 0 !important; } /* 14e. Buttonleiste in der aside (Buchen-Button, mobil auch Zurück): Bootstrap-Zeile und -Spalten ohne Versatz, jede Spalte volle Breite. Strich und Abstand darüber siehe 0c, Buttons siehe 5. */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepFour form.ebForm aside footer.buttons { margin-bottom: 0 !important; padding-bottom: 0 !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepFour form.ebForm aside footer.buttons > [class*="col"] { flex: 0 0 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; } /* Footer mit Zurück-Button (Desktop) ohne eigene Abstände */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepFour form.ebForm > footer { margin: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; } /* 14f. Kopfbereich: Einleitungstext ("Geben Sie zum Abschluss ...") linksbündig, Schrift aus 14j */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepFour form.ebForm header.form-header p { text-align: left !important; } /* Desktop (ab 992px): Text nur halb so breit wie der verfügbare Platz, damit die Zeilen nicht zu lang werden */ @media (min-width: 992px) { #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepFour form.ebForm header.form-header p { max-width: 50% !important; } } /* 14g. Ihre persönlichen Daten, Telefonfeld mit Länderauswahl (intl-tel-input): Die Flagge sitzt über dem linken Rand des Felds. Das Plugin schiebt den Text dafür nach rechts, die Formularregeln des Website-Themes überschreiben das aber, der Text begann deshalb unter der Flagge. Flagge mit demselben Abstand zum Rand wie der Text in den übrigen Feldern (--fr-field-pad-x), der Text beginnt rechts daneben. Flaggenbereich laut DevTools: 47.8px bei 8px Abstand links, mit unserem Abstand links (13px) also rund 53px. Dazu 10px Luft bis zum Text = 63px vom linken Rand. */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepFour form.ebForm .iti .iti__selected-flag { padding-left: calc(var(--fr-field-pad-x) - var(--fr-field-border-width)) !important; } #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepFour form.ebForm .iti input[type="tel"], #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepFour form.ebForm .iti input.form-control { padding-left: calc(63px - var(--fr-field-border-width)) !important; } /* 14h. Gäste Daten: je Appartement Titel (h5, "Appartement 1: ..."), direkt darunter der Zeitraum ohne Abstand, dann Abstand, Personen- Überschrift (h6, "Erwachsene"/"Kinder"), Abstand, Felder. Abstand unter der Box-Überschrift kommt aus 14d; easybooking gibt dem ersten Appartement sonst zusätzlich 1.5rem nach oben. */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepFour form.ebForm fieldset.insurance-form .room { margin-top: 0 !important; } /* Mehrere Appartements: deutlich abgesetzt voneinander */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepFour form.ebForm fieldset.insurance-form .room + .room { margin-top: var(--fr-box-pad-y) !important; } #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepFour form.ebForm fieldset.insurance-form .room h5 { font-family: var(--fr-font-family) !important; font-size: var(--fr-title-size) !important; font-weight: var(--fr-title-weight) !important; line-height: var(--fr-title-line) !important; letter-spacing: 0 !important; color: #262933 !important; margin: 0 !important; } #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepFour form.ebForm fieldset.insurance-form .room p.room-interval { margin: 0 !important; } /* Personen-Überschrift: oben etwas mehr als der Überschriften-Abstand, unten fast direkt am ersten Label, damit sie zur Feldgruppe gehört */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepFour form.ebForm fieldset.insurance-form .room h6 { font-family: var(--fr-font-family) !important; font-size: var(--fr-title-size) !important; font-weight: var(--fr-title-weight) !important; line-height: var(--fr-title-line) !important; letter-spacing: 0 !important; color: #262933 !important; margin: calc(var(--fr-box-heading-gap) + 2px) 0 calc(var(--fr-box-heading-gap) - 18px) 0 !important; } /* Erste Feldzeile nach "Erwachsene"/"Kinder": Abstand kommt schon von der Überschrift, nicht zusätzlich aus 0f */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepFour form.ebForm fieldset.insurance-form .room > h6 + .row { margin-top: 0 !important; } /* 14i. Zahlungsoptionen: Radiobuttons wie im Versicherungsfeld (13e/13f), Titel und Inhalt wie Titel und Zeitraum in "Gäste Daten" (14h), Inhalt darunter bündig mit dem Titel (eingerückt um Icon + Abstand), Häkchen wie die Ausstattung in Schritt 2 (10c), hier ohne Kreis. */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepFour form.ebForm main.ebbeStepFourConditions { --fr-pay-icon: 18px; /* Größe Radiobutton-Icon */ --fr-pay-icon-gap: 10px; /* Abstand Icon zu Titel */ --fr-pay-indent: calc(var(--fr-pay-icon) + var(--fr-pay-icon-gap)); } /* Alle Texte in der Einheitsfarbe (die Titel waren sonst unsichtbar) */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepFour form.ebForm main.ebbeStepFourConditions, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepFour form.ebForm main.ebbeStepFourConditions * { color: #262933 !important; } /* Abstand zwischen den beiden Optionen, Feldgruppen ohne eigenen */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepFour form.ebForm main.ebbeStepFourConditions .bookingStatusOption + .bookingStatusOption { margin-top: var(--fr-box-heading-gap) !important; } #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepFour form.ebForm main.ebbeStepFourConditions .bookingStatusOption .form-group { margin: 0 !important; padding: 0 !important; min-height: 0 !important; } /* Radiobutton: Icon links, Titel daneben, beide mittig zueinander */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepFour form.ebForm main.ebbeStepFourConditions label.eb-radio { display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: var(--fr-pay-icon-gap) !important; width: 100% !important; margin: 0 !important; padding: 0 !important; min-height: 0 !important; height: auto !important; font-size: var(--fr-title-size) !important; line-height: var(--fr-title-line) !important; text-align: left !important; } #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepFour form.ebForm main.ebbeStepFourConditions label.eb-radio::before { flex: 0 0 auto; position: static !important; width: var(--fr-pay-icon) !important; margin: 0 !important; font-size: var(--fr-pay-icon) !important; line-height: 1 !important; color: #262933 !important; } /* Titel der Option ("Standard Buchung", "Als unverbindliches Angebot erhalten"): Format wie der Appartement-Titel (h5) in "Gäste Daten" (14h) */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepFour form.ebForm main.ebbeStepFourConditions label.eb-radio > span { font-family: var(--fr-font-family) !important; font-size: var(--fr-title-size) !important; font-weight: var(--fr-title-weight) !important; line-height: var(--fr-title-line) !important; } /* Inhalt unter dem Titel: bündig mit dem Titel, direkt darunter ohne Abstand (wie der Zeitraum unter dem Appartement-Titel in 14h), Schrift aus 14j */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepFour form.ebForm main.ebbeStepFourConditions .bookingStatusOption > p { margin: 0 !important; padding-left: var(--fr-pay-indent) !important; font-size: var(--fr-text-size) !important; line-height: var(--fr-text-line) !important; } #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepFour form.ebForm main.ebbeStepFourConditions .bookingStatusOption > p * { font-size: inherit !important; } /* Vorteile ("Keine Kreditkarte nötig", "Bezahlung: ..."): untereinander, Zeilenabstand wie der Text unter der zweiten Option (Zeilenhöhe aus der Regel darüber, kein zusätzlicher Abstand) */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepFour form.ebForm main.ebbeStepFourConditions p.check-list { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 0 !important; } /* Einträge ohne eigenen Abstand links (easybooking rückt sonst jeden weiteren Eintrag ein, gedacht für nebeneinander) */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepFour form.ebForm main.ebbeStepFourConditions p.check-list > span { display: inline-flex !important; align-items: center !important; margin: 0 !important; padding: 0 !important; } /* Häkchen-Icon wie in Schritt 2 (10c), hier ohne Kreis: nur das Häkchen, links bündig mit dem Titel darüber */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepFour form.ebForm main.ebbeStepFourConditions p.check-list i.mdi-check { display: inline-block !important; flex: 0 0 auto; width: 10px !important; height: 10px !important; margin: 0 8px 0 0 !important; position: relative; top: 1px; /* optisch mittig zur Schrift */ border-radius: 0; background-color: transparent !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M5.2 10.6L1.6 7l1.2-1.2 2.4 2.4L11 2.4l1.2 1.2z' fill='%23262933'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: left center !important; background-size: 10px 10px !important; } /* Ursprüngliches Häkchen-Zeichen (Icon-Schrift) ausblenden */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepFour form.ebForm main.ebbeStepFourConditions p.check-list i.mdi-check::before { content: none !important; display: none !important; } /* 14j. Fließtexte (

) in Schritt 4: CI-Schrift von easybooking in Fließtextgröße (0b), wie die Beschreibungen in Schritt 2 und das Versicherungsfeld (13f). Betrifft Einleitungstext, Zeitraum in "Gäste Daten", Zahlungsoptionen und Steuerhinweis in den Buchungsdetails. Schrift auch an allem darin (9a setzt sonst Signika direkt auf Spans). */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepFour form.ebForm p, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepFour form.ebForm p * { font-family: var(--fr-text-font) !important; } #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepFour form.ebForm p { font-size: var(--fr-text-size) !important; } /* 14k. Buchungsdetails: Aufbau wie "Gäste Daten" und Zahlungs- optionen. Blöcke (Appartement, Zusatzleistungen) mit Titel (h5) und Angaben direkt darunter, gestrichelter Trennstrich (Aussehen wie 0c), Preiszeilen mit Betrag rechts, "Gesamt" im Format der Box-Überschriften, Steuerhinweis direkt darunter. Alle Abstände und Rahmen hier ausdrücklich gesetzt (easybooking bringt eigene Rahmen, Innen- und Außenabstände mit). */ /* Einheitsfarbe für alle Texte (Steuerhinweis sonst grau) */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepFour form.ebForm #ebbeStepFourBookingSummary, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepFour form.ebForm #ebbeStepFourBookingSummary * { color: #262933 !important; } /* Grundgerüst ohne eigene Abstände und Rahmen von easybooking */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepFour form.ebForm #ebbeStepFourBookingSummary .details, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepFour form.ebForm #ebbeStepFourBookingSummary .block, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepFour form.ebForm #ebbeStepFourBookingSummary .prices, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepFour form.ebForm #ebbeStepFourBookingSummary .taxes { margin: 0 !important; padding: 0 !important; border: 0 !important; } #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepFour form.ebForm #ebbeStepFourBookingSummary hr { display: none !important; } /* Blöcke untereinander: Abstand wie überall in den Boxen */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepFour form.ebForm #ebbeStepFourBookingSummary .block + .block { margin-top: var(--fr-box-heading-gap) !important; } /* Titel der Blöcke ("Appartement FINN", "Zusatzleistungen"): wie der Appartement-Titel in "Gäste Daten" (14h) */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepFour form.ebForm #ebbeStepFourBookingSummary .block h5 { font-family: var(--fr-font-family) !important; font-size: var(--fr-title-size) !important; font-weight: var(--fr-title-weight) !important; line-height: var(--fr-title-line) !important; letter-spacing: 0 !important; margin: 0 !important; padding: 0 !important; } /* Angaben darunter (Zeitraum, Personen, Zusatzleistungen): direkt unter dem Titel, Fließtext (0b) wie der Zeitraum in "Gäste Daten" */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepFour form.ebForm #ebbeStepFourBookingSummary .block > :not(h5) { font-size: var(--fr-text-size) !important; line-height: var(--fr-text-line) !important; margin: 0 !important; padding: 0 !important; } #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepFour form.ebForm #ebbeStepFourBookingSummary .block > :not(h5), #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepFour form.ebForm #ebbeStepFourBookingSummary .block > :not(h5) * { font-family: var(--fr-text-font) !important; font-weight: var(--fr-text-weight) !important; } /* Trennstrich zwischen Details und Preisen: gleiches Aussehen wie alle Trennstriche (0c), darüber und darunter --fr-summary-divider-space (Überschriften-Abstand + 10px). Schriftgröße wie im Detailbereich: easybooking gibt dem Preisbereich sonst eine größere Grundschrift, die Preiszeilen wären dadurch trotz gleicher Werte größer als die Titel darüber. */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepFour form.ebForm #ebbeStepFourBookingSummary { --fr-summary-divider-space: calc(var(--fr-box-heading-gap) + 10px); } #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepFour form.ebForm #ebbeStepFourBookingSummary .prices, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepFour form.ebForm #ebbeStepFourBookingSummary .prices .row { font-size: inherit !important; } #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepFour form.ebForm #ebbeStepFourBookingSummary .prices { position: relative !important; margin-top: var(--fr-summary-divider-space) !important; padding-top: var(--fr-summary-divider-space) !important; } #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepFour form.ebForm #ebbeStepFourBookingSummary .prices::before { content: "" !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; height: 1px !important; background: var(--fr-divider-image) left top / 15px 1px repeat-x !important; } /* Preiszeilen: Bezeichnung links, Betrag rechts, Zeilen direkt untereinander. Bootstrap-Zeile und -Spalten ohne Versatz (0d). */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepFour form.ebForm #ebbeStepFourBookingSummary .prices .row { display: flex !important; flex-wrap: nowrap !important; justify-content: space-between !important; align-items: baseline !important; gap: var(--fr-gutter) !important; margin: 0 !important; padding: 0 !important; border: 0 !important; } /* Preiszeilen (Appartement, Zusatzleistungen, jeweils mit Betrag): 1:1 im Format der Block-Titel über dem Trennstrich (h5, siehe oben) */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepFour form.ebForm #ebbeStepFourBookingSummary .prices .row > * { flex: 0 1 auto !important; width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; font-family: var(--fr-font-family) !important; font-size: var(--fr-title-size) !important; font-weight: var(--fr-title-weight) !important; line-height: var(--fr-title-line) !important; letter-spacing: 0 !important; } #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepFour form.ebForm #ebbeStepFourBookingSummary .prices .row > .price { flex: 0 0 auto !important; text-align: right !important; white-space: nowrap !important; } /* Gesamt: Format der Box-Überschriften (0b), abgesetzt von den Zeilen darüber durch einen zweiten Trennstrich, darüber und darunter derselbe Abstand wie beim ersten (--fr-summary-divider-space) */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepFour form.ebForm #ebbeStepFourBookingSummary .prices .row.total-price { position: relative !important; margin-top: var(--fr-summary-divider-space) !important; padding-top: var(--fr-summary-divider-space) !important; } #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepFour form.ebForm #ebbeStepFourBookingSummary .prices .row.total-price::before { content: "" !important; display: block !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; width: auto !important; height: 1px !important; margin: 0 !important; background: var(--fr-divider-image) left top / 15px 1px repeat-x !important; } #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepFour form.ebForm #ebbeStepFourBookingSummary .prices .row.total-price > * { font-family: var(--fr-font-family) !important; font-size: var(--fr-heading-size) !important; font-weight: var(--fr-heading-weight) !important; line-height: var(--fr-heading-line) !important; } /* Steuerhinweis: direkt unter "Gesamt", Fließtext (14j) */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepFour form.ebForm #ebbeStepFourBookingSummary .taxes p { margin: 0 !important; padding: 0 !important; } /* 14l. Zustimmung (Newsletter-Checkbox + AGB-Text): Checkbox wie im Versicherungsfeld (13e), Aufbau wie die Zahlungsoptionen (14i): Checkbox-Text im Titel-Format, AGB-Text direkt darunter im Fließtext-Format, bündig mit dem Checkbox-Text (eingerückt um Icon + Abstand). Box selbst: 14b. */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepFour form.ebForm aside fieldset.box.no-divider { --fr-check-icon: 18px; /* Größe Checkbox-Icon */ --fr-check-icon-gap: 10px; /* Abstand Icon zu Text */ --fr-check-indent: calc(var(--fr-check-icon) + var(--fr-check-icon-gap)); } /* Zeilenhöhe des Checkbox-Texts als feste Länge: wird am Label in px umgerechnet (Titel-Zeilenhöhe × Textgröße) und so an das Icon (::before) vererbt. Ohne Registrierung würde em erst am Icon mit dessen 18px Schriftgröße gerechnet. Verwendet in der Checkbox-Regel unten. */ @property --fr-check-line { syntax: ''; inherits: true; initial-value: 0px; } #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepFour form.ebForm aside fieldset.box.no-divider, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepFour form.ebForm aside fieldset.box.no-divider * { color: #262933 !important; } #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepFour form.ebForm aside fieldset.box.no-divider .form-group { margin: 0 !important; padding: 0 !important; min-height: 0 !important; } /* Checkbox: Icon links, Text daneben. Icon oben ausgerichtet und mittig zur ersten Textzeile (siehe ::before), damit es bei umbrechendem Text nicht zwischen die Zeilen rutscht */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepFour form.ebForm aside fieldset.box.no-divider label.eb-checkbox { --fr-check-line: calc(var(--fr-title-line) * 1em); /* Zeilenhöhe des Texts, siehe line-height */ display: flex !important; align-items: flex-start !important; justify-content: flex-start !important; gap: var(--fr-check-icon-gap) !important; width: 100% !important; margin: 0 !important; padding: 0 !important; min-height: 0 !important; height: auto !important; font-size: var(--fr-title-size) !important; line-height: var(--fr-title-line) !important; text-align: left !important; } /* Icon um (Zeilenhöhe - Icon) / 2 nach unten, also mittig zur ersten Zeile */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepFour form.ebForm aside fieldset.box.no-divider label.eb-checkbox::before { flex: 0 0 auto; position: static !important; width: var(--fr-check-icon) !important; margin: calc((var(--fr-check-line) - var(--fr-check-icon)) / 2) 0 0 0 !important; font-size: var(--fr-check-icon) !important; line-height: 1 !important; color: #262933 !important; } /* Checkbox-Text: Titel-Format wie die Zahlungsoptionen */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepFour form.ebForm aside fieldset.box.no-divider label.eb-checkbox > span, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepFour form.ebForm aside fieldset.box.no-divider label.eb-checkbox > span * { font-family: var(--fr-font-family) !important; font-weight: var(--fr-title-weight) !important; } #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepFour form.ebForm aside fieldset.box.no-divider label.eb-checkbox > span { font-size: var(--fr-title-size) !important; line-height: var(--fr-title-line) !important; } /* AGB-Text: direkt darunter, bündig mit dem Checkbox-Text, Fließtext (0b) */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepFour form.ebForm aside fieldset.box.no-divider .gtcAndGdprAgreements { padding-left: var(--fr-check-indent) !important; text-align: left !important; } #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepFour form.ebForm aside fieldset.box.no-divider .gtcAndGdprAgreementsText { display: block !important; margin: 0 !important; padding: 0 !important; font-size: var(--fr-text-size) !important; line-height: var(--fr-text-line) !important; } #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepFour form.ebForm aside fieldset.box.no-divider .gtcAndGdprAgreementsText, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepFour form.ebForm aside fieldset.box.no-divider .gtcAndGdprAgreementsText * { font-family: var(--fr-text-font) !important; font-weight: var(--fr-text-weight) !important; } /* Links im Checkbox-Text ("Informationen") und im AGB-Text: gleiche Schrift wie der umgebende Satz. 9c setzt Links sonst maskenweit auf 0.8em. Schriftart und -stärke kommen schon aus den Regeln oben, die Unterstreichung bleibt. */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepFour form.ebForm aside fieldset.box.no-divider label.eb-checkbox > span a, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepFour form.ebForm aside fieldset.box.no-divider .gtcAndGdprAgreementsText a { font-size: inherit !important; line-height: inherit !important; letter-spacing: inherit !important; } /* --------------------------------------------------------- 15. LADEANZEIGE (#ebbeLoading, alle Schritte) Erscheint kurz beim Wechsel zwischen den Schritten. Statt der Box oben in der Maske: vollflächiges Overlay im Glas-Look wie Galerie (12a) und Pop-ups (13q), Ladeanimation genau in der Bildschirmmitte. "display" wird bewusst nicht gesetzt, easybooking blendet die Anzeige per Inline-Style ein und aus. --------------------------------------------------------- */ /* 15a. Overlay: ganzer Bildschirm, über allem (auch Kopfzeile der Website), Hintergrund abgedunkelt und verschwommen */ #ebFrontEndFrame #ebbeContainer #ebbeLoading { position: fixed !important; inset: 0 !important; width: 100% !important; height: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; z-index: 99999 !important; background: var(--fr-overlay-bg) !important; backdrop-filter: var(--fr-overlay-filter); -webkit-backdrop-filter: var(--fr-overlay-filter); } /* 15b. Inhalt (Animation, ggf. Text) genau in der Mitte, ohne die weiße Box mit Rahmen von easybooking */ #ebFrontEndFrame #ebbeContainer #ebbeLoading #ebbeLoadingText { position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; width: auto !important; max-width: calc(100% - 60px) !important; height: auto !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; text-align: center !important; } /* Leere Zeilenumbrüche zwischen Überschrift, Animation und Text würden die Animation aus der Mitte schieben */ #ebFrontEndFrame #ebbeContainer #ebbeLoading #ebbeLoadingText br { display: none !important; } /* Texte (falls easybooking welche einsetzt) weiß auf dem dunklen Overlay */ #ebFrontEndFrame #ebbeContainer #ebbeLoading #ebbeLoadingText, #ebFrontEndFrame #ebbeContainer #ebbeLoading #ebbeLoadingText * { color: #ffffff !important; } /* 15c. Animierte Punkte weiß, damit sie auf dem dunklen Overlay sichtbar sind */ #ebFrontEndFrame #ebbeContainer #ebbeLoading .ball-pulse > div { background-color: #ffffff !important; } /* 15d. Mindestdauer: Lädt der nächste Schritt sehr schnell, blitzt die Anzeige sonst nur kurz auf. Das Script im HTML-Widget (Ladeanzeige-Mindestdauer) merkt sich, wann die Anzeige erscheint. Blendet easybooking sie früher aus, hält das Script sie mit der Klasse fr-loading-hold sichtbar, bis die Mindestdauer erreicht ist, und blendet sie dann mit fr-loading-fade weich aus. Rein optisch, die Buchung läuft darunter normal weiter. Dauer der Ausblendung hier und im Script gleich halten (FADE). Deckkraft fest auf 1: easybooking blendet selbst weich ein und aus (jQuery fadeIn/fadeOut über die Deckkraft). Sonst wäre die Anzeige kurz verschwunden, bevor das Script sie wieder hält. Ein- und Ausblenden übernimmt damit allein unsere Regel. */ #ebFrontEndFrame #ebbeContainer #ebbeLoading { opacity: 1 !important; } #ebFrontEndFrame #ebbeContainer #ebbeLoading.fr-loading-hold { display: block !important; } #ebFrontEndFrame #ebbeContainer #ebbeLoading.fr-loading-fade { opacity: 0 !important; transition: opacity .4s ease; } /* --------------------------------------------------------- 16. HINWEIS-MELDUNGEN (iziToast, alle Schritte) Kurze Einblendungen von easybooking, z. B. "Super, Appartement ... wurde erfolgreich in den Warenkorb gelegt" nach dem Hinzufügen in Schritt 2. Aussehen wie Felder und Produktkarten (0b): weiß, weicher Schatten, gleiche Rundung, dunkle Schrift. Bild links vollständig (nicht beschnitten), Text senkrecht mittig daneben. Wird der Text länger, wächst die Meldung mit, das Bild bleibt mittig. Einige Werte setzt iziToast per Inline-Style, daher !important. Ein- und Ausblend-Animation bleiben. --------------------------------------------------------- */ /* 16a. Meldung: Karte in #cccec4, Bild und Text nebeneinander, Rundung wie die grauen Boxen (10px) */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper .iziToast { display: flex !important; align-items: center !important; gap: 15px !important; padding: 12px 15px 12px 12px !important; background: #cccec4 !important; border: 0 !important; border-radius: var(--fr-box-radius) !important; box-shadow: var(--fr-field-shadow) !important; } /* iziToast legt Hintergrund und Schatten zusätzlich auf eine eigene Ebene dahinter, die würde den weichen Schatten überdecken */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper .iziToast::before, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper .iziToast::after { display: none !important; } /* 16b. Bild: nicht mehr über den ganzen linken Rand gestreckt und beschnitten, sondern vollständig (Seitenverhältnis 4:3 wie die Appartementbilder), senkrecht mittig. Ohne eigene Hintergrund- farbe von iziToast, sichtbar ist nur das PNG selbst. */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper .iziToast .iziToast-cover { position: static !important; order: -1 !important; flex: 0 0 auto !important; align-self: center !important; width: 100px !important; height: auto !important; aspect-ratio: 4 / 3 !important; margin: 0 !important; background-color: transparent !important; background-size: contain !important; background-repeat: no-repeat !important; background-position: center !important; border-radius: var(--fr-field-radius) !important; } /* Zusätzliche Ebene über/unter dem Bild (iziToast) ebenfalls weg */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper .iziToast .iziToast-cover::before, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper .iziToast .iziToast-cover::after { display: none !important; } /* 16c. Textbereich: nimmt den restlichen Platz, ohne den Abstand, den iziToast für das Bild links freihält */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper .iziToast .iziToast-body { flex: 1 1 auto !important; min-width: 0 !important; min-height: 0 !important; height: auto !important; margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; } #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper .iziToast .iziToast-body .iziToast-texts { float: none !important; display: block !important; margin: 0 !important; padding: 0 !important; } /* 16d. Titel und Text: untereinander, dunkel, Signika */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper .iziToast .iziToast-title, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper .iziToast .iziToast-message { float: none !important; display: block !important; margin: 0 !important; padding: 0 !important; font-family: var(--fr-font-family) !important; color: #262933 !important; text-align: left !important; white-space: normal !important; } #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper .iziToast .iziToast-title { font-weight: 800 !important; } /* 16e. Text unter dem Titel: etwas kleiner und leichter als der Titel */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper .iziToast .iziToast-message { font-size: 0.8em !important; font-weight: 500 !important; } /* 16f. Nur Smartphone (bis 575px): Meldung so breit wie die grauen Boxen der Maske, also bis auf den äußeren Rand volle Breite. iziToast setzt Breite und Position der Hülle (Capsule) sonst fest rechtsbündig mit 350px. */ @media (max-width: 575.98px) { #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebbeHeader .iziToast-capsule { left: 0 !important; right: 0 !important; width: auto !important; } #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper .iziToast { width: 100% !important; max-width: none !important; } } /* --------------------------------------------------------- 17. FOOTER DER MASKE (#ebbeFooter, alle Schritte) Nur die beiden Links (Datenschutz, Versicherungsvertrag widerrufen), ohne Icons, in einer grauen Box wie die Container, so hoch wie die Buttons, 15px darunter. Inhalt immer waagrecht und senkrecht mittig. Das Barrierefreiheits-Menü (Auge) ist ausgeblendet: Graustufen und Link-Hervorhebung bieten Browser und Betriebssystem selbst. Schriftgröße der Links: 9c. --------------------------------------------------------- */ /* 17a. Footer: graue Box wie die Container (Hintergrund, Rundung, seitlicher Innenabstand aus 0b), mindestens so hoch wie die Buttons, Inhalt waagrecht und senkrecht mittig. Abstand nach oben wie zwischen den Boxen (easybooking: 30px). Die Buttons darüber haben keinen eigenen Abstand nach unten (unter 992px siehe Abschnitt 4, row-gap). */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeFooter { --fr-footer-gap: var(--fr-box-gap); /* Abstand zu Buttons bzw. Inhaltsende */ --fr-footer-height: 57px; /* Höhe der Buttons (Box-Modell) */ --fr-footer-link-gap: var(--fr-box-heading-gap); /* zwischen den beiden Links */ display: flex; justify-content: center; align-items: center; min-height: var(--fr-footer-height); margin: var(--fr-footer-gap) 0 0 0; padding: 0 var(--fr-box-pad-x); background-color: var(--fr-box-bg); border-radius: var(--fr-box-radius); line-height: 1; } /* 17b. Barrierefreiheits-Menü (Auge samt Dialog) ausblenden */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeFooter .accessibility-menu { display: none; } /* 17c. Link-Reihe: beide Links mittig zueinander, auf schmalen Geräten untereinander, ebenfalls mittig. Ohne eigene Abstände, auch an den Hüllen um die Links (bei Datenschutz doppelt verschachtelt). */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeFooter .information { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: calc(var(--fr-footer-link-gap) / 2) var(--fr-footer-link-gap); margin: 0; padding: 0; line-height: 1; } #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeFooter .information div { margin: 0; padding: 0; } /* 17d. Icons (Schloss, Schild) ausblenden */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeFooter .information i { display: none !important; } /* 17e. Links: keine Hover-, Aktiv- oder Klick-Effekte, Unterstreichung bleibt. Beim Klicken mit der Maus kein Umriss. Ohne Zeilen-Leerraum und eigene Abstände (easybooking setzt bei Links teils margin-bottom). */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeFooter .information a, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeFooter .information a:hover, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeFooter .information a:active, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeFooter .information a:focus { color: #262933 !important; text-decoration: underline !important; background: transparent !important; box-shadow: none !important; opacity: 1 !important; outline: none; margin: 0 !important; padding: 0 !important; line-height: 1 !important; } /* Ausnahme Tastatur: Wer mit Tab navigiert, sieht weiterhin, welcher Link gerade ausgewählt ist (Barrierefreiheit). Erscheint nur bei Tastaturbedienung, nicht beim Klicken. */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeFooter .information a:focus-visible { outline: 2px solid #262933; outline-offset: 2px; } /* --------------------------------------------------------- 18. VERFÜGBARKEITSKALENDER (Schritt 1, direkt eingebunden) Script 4 in buchungsmaske.js setzt den Verfügbarkeitskalender von easybooking direkt über die Reisedaten-Box und startet ihn sofort. easybooking wählt die Ansicht nach der Breite, die der Kalender beim Start hat: ab 700px ganzer Monat in einer Zeile (18d), unter 700px nutzen Handy und Tablet dasselbe Layout (18e): easybooking baut dafür immer sein Handy-Gerüst, über 480px vergrößert das Script es maßstabsgetreu (zoom). Das CSS fragt dieselbe Breite über eine Container-Abfrage ab und schaltet dadurch immer gleichzeitig mit easybooking um. Breiten, Positionen und Blättern gehören easybooking (Inline-Styles), hier nur Gestaltung. 18a Platz in Schritt 1, 18b Container und Werte, 18c alle Ansichten, 18d Monatsansicht, 18e Handy und Tablet. --------------------------------------------------------- */ /* 18a. Kalender direkt über der Reisedaten-Box, ohne graue Box, Überschrift und Aufklappen (wie auf der Appartement-Seite); darunter der übliche Abstand zur nächsten Box (0b) */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepOne #frAvailabilityBox { margin: 0 0 16px 0; } /* 18b. Container und Werte. Der Inhaltsbereich der Box misst als Container den Platz für den Kalender (Container-Abfragen in 18d/18e). */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepOne #frAvailabilityBox .fr-availability-content { container: fr-calendar / inline-size; } /* Kalender und Werte. flow-root: easybooking lässt den Kalender schweben (float: left), dadurch zählt er nicht zur Höhe der Box; flow-root umschließt ihn wieder. Am Kalender selbst, nicht am Inhaltsbereich, damit das Zuklappen über "hidden" weiter funktioniert. Neutrale Farben auf die graue Box abgestimmt: Trennlinien in der Farbe der Umgebung (Box), Wochentage, leere und vergangene Felder weiß. */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepOne #frAvailabilityBox #ebAvailability { display: flow-root; --fr-cal-free: #5B6B49; /* Übernachtung möglich */ --fr-cal-blocked: #a4a49b; /* Übernachtung nicht möglich */ --fr-cal-surface: var(--fr-box-bg); /* Umgebung des Kalenders */ --fr-cal-separator: #ECEBE8; /* Trennlinien zwischen den Feldern */ --fr-cal-head-bg: #ffffff; /* Wochentage, "Tag", leere Felder, Namensfeld */ --fr-cal-past: #ffffff; /* vergangene Tage */ --fr-cal-day-text: #ffffff; /* Zahl in den Tageszellen */ --fr-cal-inset: 10px; /* Abstand links (Monatsauswahl, Namen) bzw. rechts (Legende) */ --fr-cal-legend-h: 40px; /* Höhe der Legenden-Leiste (wie eine Kalenderzeile) */ --fr-cal-nav-color: #262933; /* Farbe der Pfeile */ --fr-cal-nav-w: 5px; /* Breite eines Pfeils (Winkel passt sich ein, Seitenverhältnis 4 : 7) */ --fr-cal-nav-h: 14px; /* Höhe eines Pfeils */ --fr-cal-nav-space: 10px; /* zwischen den Pfeilen und zwischen Pfeil und Monat (Monatsansicht) */ --fr-cal-chevron-prev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 14'%3E%3Cpath d='M7 1L1 7l6 6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --fr-cal-chevron-next: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 14'%3E%3Cpath d='M1 1l6 6-6 6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --fr-cal-legend-gap: 15px; /* Abstand zwischen den Einträgen der Legende */ --fr-cal-legend-swatch: 12px; /* Größe der Farbfelder in der Legende */ } /* 18c. ALLE ANSICHTEN: Farben, Schrift, Legende, Hintergründe */ /* Übernachtung möglich */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepOne #frAvailabilityBox #ebAvailability .eb-availability .eb-oneday.arrival-free.departure-free { background: var(--fr-cal-free) !important; } /* Übernachtung nicht möglich */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepOne #frAvailabilityBox #ebAvailability .eb-availability .eb-oneday.arrival-blocked.departure-blocked { background: var(--fr-cal-blocked) !important; } /* Mischtage wie bei easybooking: Die Farbe zeigt die Nacht, die an diesem Tag beginnt. Anreisetag (Nacht danach frei): frei-Farbe, Abreisetag (Nacht danach belegt): belegt-Farbe. */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepOne #frAvailabilityBox #ebAvailability .eb-availability .eb-oneday.departure-blocked.arrival-free { background: var(--fr-cal-free) !important; } #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepOne #frAvailabilityBox #ebAvailability .eb-availability .eb-oneday.departure-free.arrival-blocked { background: var(--fr-cal-blocked) !important; } /* Vergangene Tage: neutral, unabhängig vom Zustand. .past doppelt geschrieben, damit diese Regel so stark ist wie die Zustands- Regeln (zwei Klassen); sie steht zuletzt und gewinnt dadurch. */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepOne #frAvailabilityBox #ebAvailability .eb-availability .eb-oneday.past.past { background: var(--fr-cal-past) !important; } /* Zahlen in den Tageszellen: weiß, Titel-Stärke */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepOne #frAvailabilityBox #ebAvailability .eb-availability .eb-onecat-onemonth .eb-oneday .eb-date-day { color: var(--fr-cal-day-text) !important; font-weight: var(--fr-title-weight) !important; } /* Trennlinien der Tage in der Farbe der Umgebung wie bei Wochentagen und Namensfeldern (easybooking: weiß, auf den weißen vergangenen und leeren Feldern unsichtbar) */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepOne #frAvailabilityBox #ebAvailability .eb-availability .eb-onecat-onemonth .eb-oneday { border-right: 1px solid var(--fr-cal-separator) !important; border-bottom: 1px solid var(--fr-cal-separator) !important; } /* Vergangene Tage: dunkle, gedämpfte Zahl */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepOne #frAvailabilityBox #ebAvailability .eb-availability .eb-onecat-onemonth .eb-oneday.past.past .eb-date-day { color: #262933 !important; opacity: .4; } /* Wochentag-Zeile ohne Hintergrund, Rahmen und Trennlinien von easybooking (eigene Gestaltung der Wochentage weiter unten) */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepOne #frAvailabilityBox #ebAvailability .eb-availability .eb-availability-months, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepOne #frAvailabilityBox #ebAvailability .eb-availability .eb-availability-months *, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepOne #frAvailabilityBox #ebAvailability .eb-availability .eb-availability-months::before, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepOne #frAvailabilityBox #ebAvailability .eb-availability .eb-availability-months::after, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepOne #frAvailabilityBox #ebAvailability .eb-availability .eb-availability-months *::before, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepOne #frAvailabilityBox #ebAvailability .eb-availability .eb-availability-months *::after { background: transparent !important; border: 0 !important; box-shadow: none !important; outline: 0 !important; } /* Wochentage: Großbuchstaben, Titel-Stärke */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepOne #frAvailabilityBox #ebAvailability .eb-availability .eb-availability-months .eb-day-headings .eb-date-day { text-transform: uppercase !important; font-weight: var(--fr-title-weight) !important; } /* Wochentage: eigener Hintergrund und dieselbe Trennung wie die Tage (1px Rand rechts und unten). Liegt innerhalb der Breite, dadurch stehen Wochentage und Tage exakt übereinander. */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepOne #frAvailabilityBox #ebAvailability .eb-availability .eb-availability-months .eb-day-headings .eb-oneday { background: var(--fr-cal-head-bg) !important; border-right: 1px solid var(--fr-cal-separator) !important; border-bottom: 1px solid var(--fr-cal-separator) !important; } /* Appartement-Namen: Stärke wie die Box-Überschriften */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepOne #frAvailabilityBox #ebAvailability .eb-availability .eb-availability-onecat-name h3 { font-weight: var(--fr-heading-weight) !important; background: transparent !important; } /* Rahmen um den Kalender und Linien zwischen den Appartements entfernen */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepOne #frAvailabilityBox #ebAvailability .eb-availability .eb-availability-categories, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepOne #frAvailabilityBox #ebAvailability .eb-availability .eb-availability-onecat { border: 0 !important; } /* Keine Hintergründe: Kopfzeile mit Monatsauswahl, Kalender- Bereich, Einträge der Legende (die Legenden-Leiste selbst ist weiß, siehe unten) */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepOne #frAvailabilityBox #ebAvailability .eb-availability .eb-availability-month-header, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepOne #frAvailabilityBox #ebAvailability .eb-availability .eb-availability-month-nav, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepOne #frAvailabilityBox #ebAvailability .eb-availability .eb-availability-categories, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepOne #frAvailabilityBox #ebAvailability .eb-availability .eb-availability-onecat, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepOne #frAvailabilityBox #ebAvailability .eb-availability .eb-availability-legend p { background: transparent !important; } /* --- Legende: "Übernachtung möglich" und "nicht möglich" nebeneinander in einer weißen Leiste unter dem Kalender, Schrift wie die Wochentage (9px wie easybooking, Titel-Stärke), ohne Großbuchstaben und ohne die gepunkteten Linien von easybooking --- */ /* Kalender darüber ohne eigenen Abstand nach unten (easybooking: 20px), damit die Legende direkt anschließt */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepOne #frAvailabilityBox #ebAvailability .eb-availability .eb-availability-categories { margin-bottom: 0 !important; } /* Legende als Leiste in voller Breite, direkt unter dem Kalender (getrennt nur durch die Linie unter der letzten Zeile), weiß wie die Wochentage, so hoch wie eine Kalenderzeile, Einträge rechtsbündig mit Abstand rechts. Trennlinie rechts wie die Zeilen darüber (Handy/Tablet ohne, siehe 18e). */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepOne #frAvailabilityBox #ebAvailability .eb-availability .eb-availability-legend { display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: flex-end !important; gap: var(--fr-cal-legend-gap) !important; min-height: var(--fr-cal-legend-h) !important; margin: 0 !important; padding: 0 var(--fr-cal-inset) !important; border: 0 !important; border-right: 1px solid var(--fr-cal-separator) !important; background: var(--fr-cal-head-bg) !important; } #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepOne #frAvailabilityBox #ebAvailability .eb-availability .eb-availability-legend p { display: flex !important; align-items: center !important; clear: none !important; height: auto !important; margin: 0 !important; padding: 0 !important; font-size: 9px !important; font-weight: var(--fr-title-weight) !important; line-height: 1 !important; text-transform: none !important; white-space: nowrap !important; } /* Farbfelder: klein und quadratisch statt 40 × 40px, ohne die weißen Ränder von easybooking. Farbe aus den Tagesregeln oben. */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepOne #frAvailabilityBox #ebAvailability .eb-availability .eb-availability-legend .eb-oneday, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepOne #frAvailabilityBox #ebAvailability .eb-availability .eb-availability-legend .eb-oneday .eb-date-day { flex: 0 0 var(--fr-cal-legend-swatch) !important; width: var(--fr-cal-legend-swatch) !important; height: var(--fr-cal-legend-swatch) !important; border: 0 !important; } /* --- Pfeile (beide Ansichten; Position in 18d/18e): nur das Zeichen, eigener Winkel (Größe --fr-cal-nav-w/-h) in der Pfeilfarbe, ohne Hintergrund, vergrößerte Klickfläche --- */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepOne #frAvailabilityBox #ebAvailability .eb-availability .eb-availability-month-nav-button { position: absolute !important; top: 50% !important; width: var(--fr-cal-nav-w) !important; height: var(--fr-cal-nav-h) !important; margin: 0 !important; padding: 0 !important; transform: translateY(-50%) !important; } #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepOne #frAvailabilityBox #ebAvailability .eb-availability a.eb-availability-month-nav-button, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepOne #frAvailabilityBox #ebAvailability .eb-availability a.eb-availability-month-nav-button:hover, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepOne #frAvailabilityBox #ebAvailability .eb-availability a.eb-availability-month-nav-button:focus { border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } /* Font-Awesome-Zeichen von easybooking ausblenden */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepOne #frAvailabilityBox #ebAvailability .eb-availability a.eb-availability-month-nav-button i { display: none !important; } /* Pfeilzeichen über eine Maske eingefärbt; feste Breite, dadurch exakte Abstände */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepOne #frAvailabilityBox #ebAvailability .eb-availability a.eb-availability-month-nav-button::after { content: ""; position: absolute; inset: 0; background-color: var(--fr-cal-nav-color); -webkit-mask: var(--fr-cal-chevron-next) center / contain no-repeat; mask: var(--fr-cal-chevron-next) center / contain no-repeat; } #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepOne #frAvailabilityBox #ebAvailability .eb-availability a.eb-availability-prev::after { -webkit-mask-image: var(--fr-cal-chevron-prev); mask-image: var(--fr-cal-chevron-prev); } /* Größere Klickfläche (unsichtbar, 5px rundum) */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepOne #frAvailabilityBox #ebAvailability .eb-availability a.eb-availability-month-nav-button::before { content: ""; position: absolute; inset: -5px; } #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepOne #frAvailabilityBox #ebAvailability .eb-availability a.eb-availability-month-nav-button:focus-visible { outline: 2px solid var(--fr-cal-nav-color) !important; outline-offset: 3px; } /* Erster bzw. letzter Monat: easybooking blendet den Pfeil aus. Hier stattdessen blass und nicht klickbar. Nur wenn die Ladeanimation daneben ebenfalls ausgeblendet ist, sonst wird gerade geblättert. */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepOne #frAvailabilityBox #ebAvailability .eb-availability img.eb-availability-prev-loader[style*="display: none"] + a.eb-availability-prev[style*="display: none"], #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepOne #frAvailabilityBox #ebAvailability .eb-availability img.eb-availability-next-loader[style*="display: none"] + a.eb-availability-next[style*="display: none"] { display: block !important; opacity: .25; pointer-events: none !important; cursor: default; } /* --- Gesamtes Element: Rundung wie die Boxen (10px), Schatten wie die Textfelder. Die Ecken werden am ganzen Kalender abgeschnitten (overflow: hidden); dadurch sind die jeweils äußeren Zellen jeder Ansicht automatisch rund (Desktop: Feld der Monatsauswahl, letzter Wochentag, Legende; Handy/Tablet: Monatszeile, Legende). --- */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepOne #frAvailabilityBox #ebAvailability .eb-availability { overflow: hidden !important; border-radius: var(--fr-box-radius) !important; box-shadow: 0 2px 15px 0 rgba(0, 0, 0, .12) !important; } /* 18d. MONATSANSICHT (Platz ab 700px, wie easybooking) */ @container fr-calendar (min-width: 700px) { /* Wochentage über den Tagen: Reihe in derselben Lage wie die Tage (Start bei 25 %, Breite 75 %); die Spalten verteilen sich in den Regeln darunter nach der Zahl der Tage im Monat. */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepOne #frAvailabilityBox #ebAvailability .eb-availability .eb-availability-months .eb-day-headings { left: 25% !important; width: 75% !important; display: flex !important; overflow: hidden !important; } /* Wochentage gleichmäßig verteilt, wie die Tage darunter. easybooking verteilt die Tage eines Monats immer über die volle Breite (31, 30 oder 28 Spalten) und baut die Wochentag-Reihe bei jedem Monatswechsel neu, mit einem Wochentag mehr, als der Monat Tage hat. */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepOne #frAvailabilityBox #ebAvailability .eb-availability .eb-availability-months .eb-day-headings .eb-oneday { flex: 1 1 0 !important; width: auto !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; } /* Den überzähligen letzten Wochentag ausblenden: Dann gibt es genau so viele Spalten wie Tage im Monat */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepOne #frAvailabilityBox #ebAvailability .eb-availability .eb-availability-months .eb-day-headings .eb-oneday:last-child { display: none !important; } #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepOne #frAvailabilityBox #ebAvailability .eb-availability .eb-availability-months .eb-day-headings .eb-date-day { display: block !important; width: 100% !important; text-align: center !important; } /* Monatsauswahl auf Höhe der Wochentage, in der linken Spalte. Die Navigationsleiste bleibt volle Breite (easybooking verschiebt die Monatsnamen beim Blättern um die volle Breite), liegt aber unsichtbar über der Wochentag-Zeile. Nur die Pfeile sind klickbar. */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepOne #frAvailabilityBox #ebAvailability .eb-availability .eb-availability-month-header { position: relative !important; } #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepOne #frAvailabilityBox #ebAvailability .eb-availability .eb-availability-month-nav { position: absolute !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; z-index: 20; height: auto !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; pointer-events: none; } #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepOne #frAvailabilityBox #ebAvailability .eb-availability .eb-availability-month-headings { height: 100% !important; background: transparent !important; } #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepOne #frAvailabilityBox #ebAvailability .eb-availability .eb-availability-month-headings-onemonth { display: flex !important; align-items: center !important; height: 100% !important; background: transparent !important; } /* Monatsname: wie die Appartement-Namen (13px wie easybooking, Überschriften-Stärke), linksbündig nach Abstand und den beiden Pfeilen */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepOne #frAvailabilityBox #ebAvailability .eb-availability .eb-availability-month-headings-onemonth h2 { margin: 0 !important; padding: 0 0 0 calc(var(--fr-cal-inset) + (var(--fr-cal-nav-w) + var(--fr-cal-nav-space)) * 2) !important; font-size: 13px !important; font-weight: var(--fr-heading-weight) !important; line-height: 1.2 !important; letter-spacing: 0 !important; text-transform: none !important; text-align: left !important; white-space: nowrap !important; } /* Pfeile: oberste Ebene, klickbar trotz durchlässiger Leiste */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepOne #frAvailabilityBox #ebAvailability .eb-availability .eb-availability-month-nav-button { right: auto !important; z-index: 30 !important; pointer-events: auto !important; } /* Zurück: links mit Abstand, bündig mit den Appartement-Namen darunter */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepOne #frAvailabilityBox #ebAvailability .eb-availability .eb-availability-prev, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepOne #frAvailabilityBox #ebAvailability .eb-availability .eb-availability-prev-loader { left: var(--fr-cal-inset) !important; } /* Weiter: neben dem Zurück-Pfeil */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepOne #frAvailabilityBox #ebAvailability .eb-availability .eb-availability-next, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepOne #frAvailabilityBox #ebAvailability .eb-availability .eb-availability-next-loader { left: calc(var(--fr-cal-inset) + var(--fr-cal-nav-w) + var(--fr-cal-nav-space)) !important; } /* Feld unter Monatsauswahl und Pfeilen (linke Spalte der Wochentag-Zeile): wie eine Wochentag-Zelle. Ebene unter der Monatsleiste (easybooking: z-index 98), sonst verdeckt das Feld Pfeile und Monatsnamen. */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepOne #frAvailabilityBox #ebAvailability .eb-availability .eb-availability-months .eb-availability-onecat-name { z-index: 0 !important; background: var(--fr-cal-head-bg) !important; border-right: 1px solid var(--fr-cal-separator) !important; border-bottom: 1px solid var(--fr-cal-separator) !important; } /* Appartement-Zeilen exakt so hoch wie die Tage (40px). easybooking setzt Zeile, Kalenderbereich und Namensfeld per Script auf 40,58px; dadurch lagen Namensspalte und Tage um bis zu 1,5px versetzt, die Trennlinien passten nicht zusammen. */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepOne #frAvailabilityBox #ebAvailability .eb-availability .eb-availability-onecat, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepOne #frAvailabilityBox #ebAvailability .eb-availability .eb-availability-onecat-calendar, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepOne #frAvailabilityBox #ebAvailability .eb-availability .eb-availability-categories .eb-availability-onecat-name { height: 40px !important; } /* Appartement-Namen: Feld wie die Wochentag-Zellen (weiß), Name mit Abstand links, bündig mit dem Zurück-Pfeil darüber. Trennlinien rechts und unten wie die Tage; unten als Rand möglich, weil die Höhe oben fest auf 40px steht (easybooking kann den Rand dadurch nicht mehr in die Höhe einrechnen). Bleibt deckend und verdeckt beim Blättern weiter den durchgleitenden Monat. */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepOne #frAvailabilityBox #ebAvailability .eb-availability .eb-availability-categories .eb-availability-onecat-name { padding-left: var(--fr-cal-inset) !important; background: var(--fr-cal-head-bg) !important; border-right: 1px solid var(--fr-cal-separator) !important; border-bottom: 1px solid var(--fr-cal-separator) !important; } /* Wochentag-Zeile durchlässig für Klicks: ihr Platzhalter über der Namensspalte fing sonst die Pfeil-Klicks ab */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepOne #frAvailabilityBox #ebAvailability .eb-availability .eb-availability-months, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepOne #frAvailabilityBox #ebAvailability .eb-availability .eb-availability-months * { pointer-events: none !important; } } /* 18e. HANDY UND TABLET (Platz unter 700px) easybooking baut den Kalender hier immer im Handy-Gerüst (eine Woche pro Zeile, Monat so breit wie der Kalender); über 480px vergrößert ihn Script 4 maßstabsgetreu. Hier: zwei Wochen nebeneinander, Namen gedreht links (von unten nach oben lesbar) in einem Feld, Feld "Tag" darüber, Monatszeile als Zelle mit den Pfeilen links und rechts außen. easybooking misst die Monatshöhe beim Start mit diesem CSS, die Höhen passen dadurch automatisch. */ @container fr-calendar (max-width: 699.98px) { #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepOne #frAvailabilityBox #ebAvailability { --fr-cal-day-height-narrow: 30px; /* Höhe der Tage und Wochentage */ --fr-cal-name-col: 32px; /* Breite der Namensspalte (zwei Zeilen) */ --fr-cal-name-gap: 0px; /* Abstand Namensspalte zu den Tagen */ --fr-cal-eb-name-offset: 40px; /* Platz, den easybooking über dem Kalender für den Namen lässt */ --fr-cal-row-gap: 0px; /* Abstand Wochentage → Appartement → Appartement */ --fr-cal-legend-h: var(--fr-cal-day-height-narrow); /* Legenden-Leiste so hoch wie die Tage */ --fr-cal-nav-edge: 10px; /* Abstand der Pfeile vom Rand */ } /* --- Tage: Höhe --- */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepOne #frAvailabilityBox #ebAvailability .eb-availability .eb-onecat-onemonth .eb-oneday { height: var(--fr-cal-day-height-narrow) !important; } #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepOne #frAvailabilityBox #ebAvailability .eb-availability .eb-onecat-onemonth .eb-oneday .eb-date-day { line-height: var(--fr-cal-day-height-narrow) !important; } /* --- Monat: nach oben (easybooking: 40px tiefer für den Namen), links Platz für den Namen. Breite fest auf die volle Zeile: easybooking setzt sie per jQuery, und jQuery rechnet einen Innenabstand automatisch dazu (Monat wäre sonst zu breit und würde rechts abgeschnitten). Positionen und Blättern bleiben unberührt. --- */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepOne #frAvailabilityBox #ebAvailability .eb-availability .eb-onecat-onemonth { top: 0 !important; width: 100% !important; padding-left: calc(var(--fr-cal-name-col) + var(--fr-cal-name-gap)) !important; } /* Zwei Wochen nebeneinander (easybooking: volle Breite inline) */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepOne #frAvailabilityBox #ebAvailability .eb-availability .eb-onecat-onemonth .eb-oneweek { flex: 0 0 50% !important; width: 50% !important; } /* Appartement-Zeile: oben Abstand zur Wochentag-Zeile bzw. zum vorigen Appartement; unten den von easybooking eingerechneten Platz über dem Kalender wieder abziehen */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepOne #frAvailabilityBox #ebAvailability .eb-availability .eb-availability-onecat { margin-top: var(--fr-cal-row-gap) !important; margin-bottom: calc(var(--fr-cal-eb-name-offset) * -1) !important; } /* --- Namen: gedreht links in einem Feld, so hoch wie die Tage des Monats, mit denselben Trennlinien rechts und unten wie die Tage, Name mittig darin --- */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepOne #frAvailabilityBox #ebAvailability .eb-availability .eb-availability-categories .eb-availability-onecat-name { position: absolute !important; top: 0 !important; bottom: var(--fr-cal-eb-name-offset) !important; left: 0 !important; z-index: 2; display: flex !important; align-items: center !important; justify-content: center !important; width: var(--fr-cal-name-col) !important; height: auto !important; overflow: hidden !important; background: var(--fr-cal-head-bg) !important; border-right: 1px solid var(--fr-cal-separator) !important; border-bottom: 1px solid var(--fr-cal-separator) !important; } /* Von unten nach oben lesbar, 8px; darf zweizeilig umbrechen ("Appartement" / "NAOMI"), falls der Monat niedrig ist */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepOne #frAvailabilityBox #ebAvailability .eb-availability .eb-availability-categories .eb-availability-onecat-name h3 { writing-mode: vertical-rl !important; transform: rotate(180deg); height: auto !important; max-height: 100% !important; margin: 0 !important; padding: 0 !important; font-size: 8px !important; line-height: 1.2 !important; text-align: center !important; white-space: normal !important; } /* --- Wochentage: gleiche Höhe wie die Tage, gleicher Einzug wie die Monate, zwei Wochen nebeneinander --- */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepOne #frAvailabilityBox #ebAvailability .eb-availability .eb-availability-months, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepOne #frAvailabilityBox #ebAvailability .eb-availability .eb-availability-months .eb-day-headings, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepOne #frAvailabilityBox #ebAvailability .eb-availability .eb-availability-months .eb-day-headings .eb-oneday { height: var(--fr-cal-day-height-narrow) !important; } #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepOne #frAvailabilityBox #ebAvailability .eb-availability .eb-availability-months .eb-day-headings { display: flex !important; left: calc(var(--fr-cal-name-col) + var(--fr-cal-name-gap)) !important; width: calc(100% - var(--fr-cal-name-col) - var(--fr-cal-name-gap)) !important; overflow: hidden !important; } /* easybooking liefert sechs Wochen Wochentage, sichtbar sind die ersten zwei */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepOne #frAvailabilityBox #ebAvailability .eb-availability .eb-availability-months .eb-day-headings .eb-oneweek { display: flex !important; flex: 0 0 50% !important; width: 50% !important; } #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepOne #frAvailabilityBox #ebAvailability .eb-availability .eb-availability-months .eb-day-headings .eb-oneday, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepOne #frAvailabilityBox #ebAvailability .eb-availability .eb-availability-months .eb-day-headings .eb-date-day { flex: 1 1 0 !important; width: auto !important; min-width: 0 !important; } #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepOne #frAvailabilityBox #ebAvailability .eb-availability .eb-availability-months .eb-day-headings .eb-date-day { line-height: var(--fr-cal-day-height-narrow) !important; text-align: center !important; } /* --- Lücken am Monatsanfang und -ende füllen --- */ /* Leere Felder, mit denen easybooking die Wochen auffüllt */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepOne #frAvailabilityBox #ebAvailability .eb-availability .eb-onecat-onemonth .eb-oneday.empty { background: var(--fr-cal-head-bg) !important; } /* Ungerade Zahl an Wochen: Die letzte steht allein in ihrer Zeile. Daneben eine Ersatzwoche aus sieben Feldern mit derselben Trennung wie die Tage (gezeichnet als Hintergrund). */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepOne #frAvailabilityBox #ebAvailability .eb-availability .eb-onecat-onemonth:has(> .eb-oneweek:last-child:nth-child(odd))::after { content: ""; flex: 0 0 50%; width: 50%; height: var(--fr-cal-day-height-narrow); border-bottom: 1px solid var(--fr-cal-separator); background: repeating-linear-gradient( to right, var(--fr-cal-head-bg) 0, var(--fr-cal-head-bg) calc(100% / 7 - 1px), var(--fr-cal-separator) calc(100% / 7 - 1px), var(--fr-cal-separator) calc(100% / 7) ); } /* --- Feld "Tag" links in der Wochentag-Zeile, über der Namensspalte: so breit wie die Namen, so hoch wie die Wochentage, Gestaltung wie ein Wochentag, ohne Großbuchstaben. Nutzt den leeren Platzhalter von easybooking (z-index 98 zurückgesetzt). --- */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepOne #frAvailabilityBox #ebAvailability .eb-availability .eb-availability-months .eb-availability-onecat-name { position: absolute !important; top: 0 !important; left: 0 !important; z-index: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; width: var(--fr-cal-name-col) !important; height: var(--fr-cal-day-height-narrow) !important; background: var(--fr-cal-head-bg) !important; border-right: 1px solid var(--fr-cal-separator) !important; border-bottom: 1px solid var(--fr-cal-separator) !important; } #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepOne #frAvailabilityBox #ebAvailability .eb-availability .eb-availability-months .eb-availability-onecat-name::before { content: "Tag"; font-size: 9px; font-weight: var(--fr-title-weight); line-height: 1; text-transform: none; } /* Englische Seite */ html:lang(en) #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepOne #frAvailabilityBox #ebAvailability .eb-availability .eb-availability-months .eb-availability-onecat-name::before { content: "Day"; } /* --- Monatszeile als Zelle: weiß wie die Wochentage, so hoch wie die Tage, Trennlinie unten zur Wochentag-Zeile --- */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepOne #frAvailabilityBox #ebAvailability .eb-availability .eb-availability-month-header { min-height: 0 !important; } #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepOne #frAvailabilityBox #ebAvailability .eb-availability .eb-availability-month-nav { height: var(--fr-cal-day-height-narrow) !important; background: var(--fr-cal-head-bg) !important; border-bottom: 1px solid var(--fr-cal-separator) !important; } #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepOne #frAvailabilityBox #ebAvailability .eb-availability .eb-availability-month-headings, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepOne #frAvailabilityBox #ebAvailability .eb-availability .eb-availability-month-headings-onemonth { height: 100% !important; } /* Monatsname: mittig, Überschriften-Stärke, gleiche Größe wie in der Monatsansicht (13px), senkrecht mittig in der Zelle */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepOne #frAvailabilityBox #ebAvailability .eb-availability .eb-availability-month-headings-onemonth h2 { margin: 0 !important; padding: 0 !important; font-size: 13px !important; font-weight: var(--fr-heading-weight) !important; line-height: var(--fr-cal-day-height-narrow) !important; letter-spacing: 0 !important; text-transform: none !important; text-align: center !important; white-space: nowrap !important; } /* Pfeile links und rechts außen, mit Abstand zum Rand */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepOne #frAvailabilityBox #ebAvailability .eb-availability .eb-availability-prev, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepOne #frAvailabilityBox #ebAvailability .eb-availability .eb-availability-prev-loader { left: var(--fr-cal-nav-edge) !important; right: auto !important; } #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepOne #frAvailabilityBox #ebAvailability .eb-availability .eb-availability-next, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepOne #frAvailabilityBox #ebAvailability .eb-availability .eb-availability-next-loader { left: auto !important; right: var(--fr-cal-nav-edge) !important; } /* --- Keine Trennlinie rechts am Ende einer Zeile --- In der Zwei-Wochen-Ansicht endet jede Zeile mit dem letzten Tag einer geraden Woche (auch leere Felder). Ebenso die Wochentage und die Legende. */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepOne #frAvailabilityBox #ebAvailability .eb-availability .eb-onecat-onemonth .eb-oneweek:nth-child(even) .eb-oneday:last-child, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepOne #frAvailabilityBox #ebAvailability .eb-availability .eb-availability-months .eb-day-headings .eb-oneweek:nth-child(2) .eb-oneday:last-child, #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepOne #frAvailabilityBox #ebAvailability .eb-availability .eb-availability-legend { border-right: 0 !important; } /* Ersatzwoche (letzte Zeile bei ungerader Wochenzahl): Muster 1px breiter als das Feld, dadurch fällt die letzte Trennlinie rechts über den Rand hinaus und ist nicht sichtbar */ #ebFrontEndFrame #ebbeContainer #ebbeAppWrapper #ebApp #ebbeContent #ebbeStepOne #frAvailabilityBox #ebAvailability .eb-availability .eb-onecat-onemonth:has(> .eb-oneweek:last-child:nth-child(odd))::after { background-size: calc(100% + 1px) 100%; } }