/* ======================================================================= Domresidenz – Buchen-/Telefon-Block + Sprachauswahl (Mai 2026) Additive Ergaenzung. Wird NUR in index.php eingebunden. CI: Cool Gray 11 #53575A. Buttons scharfkantig (border-radius:0). ======================================================================= */ :root{ --dr-cool11:#53575A; } /* Gemeinsame Typo + Maße: Eck-Block oben rechts == weisser Block im Menue */ .dr-corner, .dr-wblock{ font-size:.75rem; letter-spacing:.15em; } .dr-corner *, .dr-wblock *{ box-sizing:border-box; } /* Feste, gemeinsame Button-Hoehe; Telefon-Button quadratisch (3em x 3em) */ .dr-phone, .dr-wphone, .dr-book, .dr-wbook{ height:3em; border-radius:0; } .dr-phone, .dr-wphone{ position:relative; flex:0 0 3em; width:3em; padding:0; display:flex; align-items:center; justify-content:center; cursor:pointer; text-decoration:none; transition:.2s; } .dr-book, .dr-wbook{ display:flex; align-items:center; justify-content:center; padding:0 1.15em; line-height:1; font-weight:400; text-transform:uppercase; white-space:nowrap; cursor:pointer; text-decoration:none; transition:.2s; } .dr-phone svg, .dr-wphone svg{ width:1.4em; height:1.4em; display:block; fill:none; stroke-width:1.8; } /* Telefon-Popover: Schriftgroesse = Buchen-Button (.75rem), Nummer normal gesetzt */ .dr-pop{ position:absolute; top:calc(100% + 10px); right:0; background:var(--dr-cool11); color:#fff; border-radius:0; padding:.75em 1em; font-size:.75rem; font-weight:400; letter-spacing:normal; text-transform:none; white-space:nowrap; box-shadow:0 12px 26px -10px rgba(0,0,0,.4); opacity:0; transform:translateY(-6px); pointer-events:none; transition:.25s; z-index:11; } .dr-pop.dr-show{ opacity:1; transform:translateY(0); pointer-events:auto; } /* ----------------------------------------------------------------------- 1) Fester Eck-Block oben rechts (dunkel auf Weiss) ----------------------------------------------------------------------- */ .dr-corner{ position:fixed; top:26px; right:24px; z-index:9999; display:flex; align-items:stretch; gap:8px; font-family:inherit; -webkit-tap-highlight-color:transparent; } /* Eck-Block beim Seitenstart sanft einfaden – analog zum Fade-in der Startseite. 'both' + Delay: bleibt auch ohne JS sichtbar (Fallback). */ .dr-corner{ animation:dr-corner-fade 1.1s ease both; animation-delay:1.3s; } @keyframes dr-corner-fade{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:translateY(0); } } @media (prefers-reduced-motion:reduce){ .dr-corner{ animation:none; } } .dr-phone{ border:1px solid var(--dr-cool11); background:transparent; } .dr-phone svg{ stroke:var(--dr-cool11); transition:stroke .2s; } .dr-phone:hover{ background:var(--dr-cool11); } .dr-phone:hover svg{ stroke:#fff; } /* Buchen-Button als Outline-Variante: grauer Rahmen, graue Schrift, transparenter Hintergrund – analog zum Telefon-Button. .dr-corner-Praefix + :link/:visited, damit die globale a-Farbe (weiss) nicht gewinnt. */ .dr-book{ border:1px solid var(--dr-cool11); background:transparent; } .dr-corner .dr-book, .dr-corner .dr-book:link, .dr-corner .dr-book:visited{ color:var(--dr-cool11); } .dr-corner .dr-book:hover{ background:var(--dr-cool11); } .dr-corner .dr-book:hover, .dr-corner .dr-book:hover span{ color:#fff; } /* ----------------------------------------------------------------------- 2) Mobil – bei offenem Menue ausblenden (weisser Block uebernimmt) ----------------------------------------------------------------------- */ @media (max-width:768px){ .dr-corner{ top:18px; right:14px; gap:7px; } /* Bei offenem Mobil-Menue Eck-Block ausblenden. visibility zusaetzlich zu opacity, da die Einfade-Animation sonst opacity ueberschreibt. */ body.dr-menu-open .dr-corner{ opacity:0; visibility:hidden; pointer-events:none; } } /* ----------------------------------------------------------------------- 3) Weisser Block im offenen Menue (nach KONTAKT) ----------------------------------------------------------------------- */ li.dr-wblock-li{ list-style:none; } .dr-wblock{ display:inline-flex; align-items:stretch; gap:8px; margin:.6em 0; } .dr-wphone{ border:1px solid rgba(255,255,255,.85); background:transparent; } .dr-wphone svg{ stroke:#fff; } .dr-wphone:hover{ background:rgba(255,255,255,.14); } .dr-wbook{ border:1px solid rgba(255,255,255,.85); background:transparent; color:#fff; } .dr-wbook:hover{ background:rgba(255,255,255,.14); color:#fff; } /* Popover des Menue-Telefons: nach links/unten oeffnen, auf dunklem Grund sichtbar */ .dr-wphone .dr-pop{ left:0; right:auto; border:1px solid rgba(255,255,255,.4); } /* Alten einfachen Menue-Eintrag "Buchen" ausblenden – der weisse Block ersetzt ihn */ #menu-con li#l_buchen, #mobile-menu-con li#l_buchen{ display:none; } /* ----------------------------------------------------------------------- 4) Sprachauswahl + feine Trennlinie unten im Menue ----------------------------------------------------------------------- */ li.dr-lang-li{ list-style:none; } .dr-sep{ height:1px; background:rgba(255,255,255,.22); margin:.4em 0 1.1em; } .dr-langmenu{ display:flex; align-items:center; gap:.6em; font-size:.75rem; letter-spacing:.15em; text-transform:uppercase; } .dr-langmenu a{ color:#fff; text-decoration:none; opacity:.6; transition:.2s; } .dr-langmenu a:hover{ opacity:.85; } .dr-langmenu a.active{ opacity:1; border-bottom:1px solid #fff; padding-bottom:2px; } .dr-langmenu .dr-langsep{ opacity:.4; } html[lang="de"] .dr-langmenu .change_de, html[lang="en"] .dr-langmenu .change_en{ opacity:1; border-bottom:1px solid #fff; padding-bottom:2px; } /* ----------------------------------------------------------------------- 5) Initiale Sprachsichtbarkeit der NEUEN Elemente (Label DE/EN) ----------------------------------------------------------------------- */ html[lang="de"] .dr-corner [lang="en"], html[lang="de"] .dr-wblock [lang="en"]{ display:none; } html[lang="en"] .dr-corner [lang="de"], html[lang="en"] .dr-wblock [lang="de"]{ display:none; } /* ----------------------------------------------------------------------- 6) Prominentes "DE | EN" oben in der Mitte entfaellt ----------------------------------------------------------------------- */ .aside-top.language-select{ display:none !important; } /* ----------------------------------------------------------------------- 7) Oberer Abschnittslink (scroll-up / banderole-next) mehrzeilig erlauben, damit er nicht unter den festen Eck-Block laeuft ----------------------------------------------------------------------- */ .aside-top.scroll-up .sidemenu-text{ white-space:normal; max-width:7.5em; line-height:1.25; } /* Mobil: oberes Abschnitts-Label (scroll-up) horizontal zentrieren. WICHTIG: Pfeil-Icon des scroll-up NICHT ausblenden – es ist zugleich der untere "naechste Suite"-Pfeil (fixierter Klon, banderole-next-fixed). */ @media (max-width:768px){ body.mobileOnly .aside-top:not(.language-select){ left:50%; right:auto; transform:translate3d(-50%,0,0); padding-right:0; } body.mobileOnly .aside-top.scroll-up li{ padding-left:0; text-align:center; } body.mobileOnly .aside-top.scroll-up .sidemenu-text{ margin:0; } /* (Punkt 4) unteren, fixierten "naechste Suite"-Link zentrieren */ body.mobileOnly .banderole .banderole-next-fixed{ left:50%; right:auto; transform:translate3d(-50%,0,0); } } /* ----------------------------------------------------------------------- 8) FIX mobile Startseite: Schnellnavigation (Suite 1-3 / Kontakt) Nach Entfernen des mittleren Eintrags war die