/* ============================================================================= Startseite — Die Schönheits-Praxis Erzeugt aus content/design-vorschlag/design.css. Quelle dort ändern, nicht hier. ALLE Regeln liegen im Namensraum .kw-neu. Grund: Elementor und hello-elementor bringen eigene Regeln für dieselben Elemente mit, und Elementor-CSS lädt NACH dem Child-Theme — ohne Kapselung greift entweder unseres nicht, oder wir zerlegen den Rest der Seite. Der Shortcode umschließt seinen Inhalt mit
. Die folgenden Regeln standen im Entwurf global (html, *, body, a, img, [hidden]) und sind hier bewusst auf den Namensraum begrenzt. ============================================================================= */ .kw-neu, .kw-neu *{box-sizing:border-box;margin:0;padding:0;min-width:0} /* Grundschrift und Grundfarben des Bereichs — standen im Entwurf auf body. Die Variablen dazu werden weiter unten auf demselben Element definiert. */ /* Aus der Inhaltsbreite des Themes ausbrechen. hello-elementor begrenzt .site-main auf die globale Elementor-Inhaltsbreite (1000 px). Die farbigen Baender (Auftakt, Laufband, Gutschein, Kontakt) sollen aber randlos ueber die volle Fensterbreite laufen; die Spaltenbreite regelt .spalte selbst (max 1180 px). Bewusst hier statt in den Elementor-Globaleinstellungen: die gelten fuer ALLE Seiten, auch Shop, Warenkorb und Kasse — daran wird nichts angefasst. */ /* Kein 100vw-Ausbruch mehr: Der Elementor-Container ist inzwischen selbst 100 % breit (boxed_width wurde auf 100 % gesetzt). 100vw enthaelt zusaetzlich die 15 px der Scrollleiste — dadurch standen alle Inhaltsabschnitte 7,5 px links neben der Flucht von Logo und Fusszeile, und Karten wie Slider waren 15 px zu breit. */ .kw-neu{width:auto;max-width:none;margin-left:0;margin-right:0} /* 100vw schliesst die Breite der Scrollleiste mit ein und erzeugt sonst ein paar Pixel Ueberlauf. Diese Datei laedt ausschliesslich auf der Startseite, der Eingriff am Dokument bleibt also auf sie begrenzt. */ body.home{overflow-x:hidden} .kw-neu{font-family:'Montserrat','Helvetica Neue',Arial,sans-serif;line-height:1.7; color:var(--text);background:#fff;-webkit-font-smoothing:antialiased} .kw-neu img{max-width:100%;height:auto;display:block} .kw-neu a{color:inherit} /* Pflichtregel: .menue, .galerie und .g-gross setzen display:flex als Autoren-Regel und heben damit die Browser-Regel [hidden]{display:none} auf. Ohne diese Zeile liegt das geschlossene Großbild unsichtbar über der Seite und schluckt jeden Klick. */ .kw-neu [hidden]{display:none!important}@media (prefers-reduced-motion:reduce){.kw-neu *{animation:none!important;transition:none!important}} @font-face{font-family:'Marcellus';src:url('fonts/marcellus-weo_ebrok8hqldviaf81vvok.woff2') format('woff2');font-display:swap}/* Montserrat war nur ueber den Namen aufgerufen und deshalb allein auf Rechnern sichtbar, auf denen sie installiert ist — sonst fiel der ganze Fliesstext auf Arial zurueck. Variable Schrift, deckt 100-900 in einer Datei ab. Quelle: die Datei, die Elementor auf der Live-Site selbst hostet (Google Fonts, SIL Open Font License). Latin-Ausschnitt. */@font-face{font-family:'Montserrat';src:url('fonts/montserrat-latin-var.woff2') format('woff2'); font-weight:100 900;font-style:normal;font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329, U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}/* ============================================================ Design-Vorschlag — Die Schönheits-Praxis Marke unverändert: Bordeaux #701020, Oliv #8D9E5A, Marcellus für Überschriften, Montserrat für Text. Neu: Struktur, Hierarchie, Abstandssystem, echte Navigation. ============================================================ */.kw-neu{ --bordeaux:#701020; --bordeaux-dunkel:#5A0D19; --oliv:#8D9E5A; --oliv-dunkel:#78884A; --creme:#F5F3EE; --creme-warm:#FBF8F3; --text:#3F3F3F; --text-leise:#6B6B6B; --linie:#E5DFD6; /* Abstandsskala 4/8/16/24/40/64/96 — keine krummen Zwischenwerte */ --s1:4px; --s2:8px; --s3:16px; --s4:24px; --s5:40px; --s6:64px; --s7:96px; --spalte:1180px; --rand:clamp(20px, 5vw, 48px); --radius:2px; --aus:cubic-bezier(.22,1,.36,1); }/* Der Kopf ist sticky und 85 px hoch — ohne scroll-padding landet jedes Anker-Ziel dahinter *//* Pflicht: .menue, .galerie und .g-gross setzen display:flex als Autoren-Regel und heben damit die Browser-Regel [hidden]{display:none} auf. Ohne diese Zeile liegt das geschlossene Grossbild unsichtbar ueber der ganzen Seite und schluckt jeden Klick. */.kw-neu .serif{font-family:'Marcellus',Georgia,serif;font-weight:400;letter-spacing:.01em}.kw-neu .spalte{max-width:var(--spalte);margin-inline:auto;padding-inline:var(--rand)}/* ---------- Kopfbereich ---------- */.kw-neu .kopf{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--linie)}.kw-neu .kopf .spalte{display:flex;align-items:center;justify-content:space-between;gap:var(--s4); padding-block:var(--s3)}.kw-neu .kopf img{height:52px;width:auto}.kw-neu .nav{display:flex;align-items:center;gap:var(--s4)}.kw-neu .nav a{font-size:13px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none; color:var(--bordeaux);padding-block:var(--s2);position:relative;transition:color .3s var(--aus)}.kw-neu .nav a::after{content:"";position:absolute;left:0;right:100%;bottom:2px;height:1px; background:var(--oliv);transition:right .35s var(--aus)}.kw-neu .nav a:hover::after{right:0}.kw-neu .kopf-aktion{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2); background:var(--oliv);color:#fff;text-decoration:none;padding:12px 22px;border-radius:var(--radius); font-size:12px;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap; flex:0 0 auto; /* darf im Kopf-Flex nicht schrumpfen, sonst laeuft die Schrift heraus */ transition:background .3s var(--aus),transform .3s var(--aus)}.kw-neu .kopf-aktion:hover{background:var(--oliv-dunkel);transform:translateY(-1px)}.kw-neu .burger{display:none;flex-direction:column;gap:5px;background:none;border:0;padding:10px;cursor:pointer}.kw-neu .burger i{width:24px;height:2px;background:var(--bordeaux);display:block}/* ---------- Auftakt ---------- */.kw-neu .auftakt{background:var(--bordeaux);color:#fff;position:relative;overflow:hidden}/* Der Text gibt die Hoehe vor, der Slider folgt ihr — die Breite ergibt sich aus dieser Hoehe mal 2 (Bildformat). Das ist eine echte Rueckkopplung (Sliderbreite bestimmt die Textbreite bestimmt die Texthoehe), die CSS Grid allein nicht aufloest: mit `auto` als Track berechnete Chrome die Spalte zu schmal und die Buehne lief ueber ihren Rahmen hinaus. Deshalb setzt ein ResizeObserver --slider-breite, gedeckelt auf den Platz, der neben einer noch lesbaren Textspalte uebrig bleibt. */.kw-neu .auftakt .spalte{display:grid;grid-template-columns:minmax(0,1fr) var(--slider-breite,58%); gap:var(--s6);align-items:center;padding-block:var(--s6)}/* 46 px waren fuer die schmalere Textspalte zu gross — die Zeile trug nur noch neun Zeichen. Der feste Umbruch im Markup setzt die zweite Zeile bewusst nach "Zeuthen". */.kw-neu .auftakt h1{font-size:clamp(26px,2.4vw,34px);line-height:1.2;margin-bottom:var(--s3)}.kw-neu .auftakt .claim{font-family:'Marcellus',Georgia,serif;font-size:clamp(16px,1.5vw,20px); color:#EFD3D8;line-height:1.5;margin-bottom:var(--s3)}.kw-neu .auftakt p{font-size:15px;color:rgba(255,255,255,.9);margin-bottom:var(--s4);max-width:46ch}.kw-neu .aktionen{display:flex;flex-wrap:wrap;gap:var(--s3)}.kw-neu .knopf{display:inline-flex;align-items:center;justify-content:center;text-decoration:none; padding:15px 30px;border-radius:var(--radius);font-size:12.5px;letter-spacing:.11em; text-transform:uppercase;transition:all .35s var(--aus)}.kw-neu .knopf-voll{background:var(--oliv);color:#fff}.kw-neu .knopf-voll:hover{background:var(--oliv-dunkel);transform:translateY(-2px); box-shadow:0 10px 26px rgba(0,0,0,.28)}.kw-neu .knopf-kontur{border:1.5px solid rgba(255,255,255,.75);color:#fff}.kw-neu .knopf-kontur:hover{background:rgba(255,255,255,.12);border-color:#fff;transform:translateY(-2px)}/* ---------- Auftakt-Slider ---------- *//* height:100% nimmt die vom Text vorgegebene Zeilenhoehe auf; die Buehne darin haelt 2:1 und leitet daraus ihre Breite ab. box-sizing:content-box, damit der Rahmen die Bildflaeche nicht anknabbert. */.kw-neu .auftakt-slider{position:relative;border:16px solid #fff;box-shadow:0 24px 60px rgba(0,0,0,.34)}/* 2:1 — genau das Seitenverhaeltnis der Bilder, damit der Rahmen bei jeder Breite dieselbe Form behaelt und nichts beschnitten wird. overflow:hidden haelt zusaetzlich den Ken-Burns-Zoom (scale 1.06) hinter dem Rahmen. */.kw-neu .a-buehne{position:relative;aspect-ratio:2/1;overflow:hidden}.kw-neu .a-bild{position:absolute;inset:0;background:center/cover no-repeat;opacity:0; transition:opacity 1.1s var(--aus);animation:aZoom 10s linear infinite alternate;will-change:transform}.kw-neu .a-bild.an{opacity:1}@keyframes aZoom{from{transform:scale(1)}to{transform:scale(1.06)}}.kw-neu .a-pfeil{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px; border:0;border-radius:50%;padding:0;cursor:pointer;z-index:3; background:rgba(255,255,255,.9);color:var(--bordeaux);font-size:22px;line-height:1; display:flex;align-items:center;justify-content:center; box-shadow:0 4px 14px rgba(0,0,0,.2); transition:transform .35s var(--aus),background .35s var(--aus)}.kw-neu .a-pfeil::before{content:attr(data-zeichen);display:block;margin-top:-3px}.kw-neu .a-pfeil.a-l{left:16px}.kw-neu .a-pfeil.a-r{right:16px}.kw-neu .a-pfeil:hover{transform:translateY(-50%) scale(1.1);background:#fff}.kw-neu .a-pfeil:focus-visible{outline:3px solid #fff;outline-offset:3px}/* Eingerueckt und abgerundet statt randlos in der Ecke — dieselbe Kante wie die Punkte rechts daneben, damit die beiden Elemente auf einer Linie sitzen. */.kw-neu .a-titel{position:absolute;left:var(--s3);bottom:var(--s3);background:rgba(112,16,32,.9);color:#fff; font-family:'Marcellus',Georgia,serif;font-size:15px;padding:var(--s2) var(--s3);z-index:3; border-radius:var(--radius);transition:opacity .4s var(--aus)}.kw-neu .a-titel.wechselt{opacity:0}.kw-neu .a-punkte{position:absolute;right:var(--s3);bottom:var(--s3);z-index:3}.kw-neu .a-punkte span{display:inline-block;width:9px;height:9px;border-radius:50%;margin-left:8px; background:rgba(255,255,255,.55);box-shadow:0 0 3px rgba(0,0,0,.4)}.kw-neu .a-punkte span.an{background:#fff}/* Vertrauenszeile direkt unter dem Auftakt */.kw-neu .vertrauen{background:var(--bordeaux-dunkel);color:rgba(255,255,255,.86)}.kw-neu .vertrauen .spalte{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s3) var(--s5); padding-block:var(--s3);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;text-align:center}.kw-neu .vertrauen b{color:#fff;font-weight:600}/* ---------- Zwei-Spalten-Block ---------- *//* auto-fit brach erst bei 664 px Inhaltsbreite um und liess zwischen 760 und 900 px 115 px Leere ueber und unter dem Bild stehen. Jetzt derselbe Haltepunkt wie ueberall: 900 px. align-items:start statt center — center erzeugte einen gegenlaeufigen 6-px-Versatz zwischen Ueberschrift und Bild, weil die Spalten unterschiedlich hoch sind. */.kw-neu .duo{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s5);align-items:start}@media (min-width:900px){.kw-neu .duo{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s6)}}.kw-neu .duo img{border:12px solid #fff;box-shadow:0 18px 46px rgba(0,0,0,.16);aspect-ratio:4/3;object-fit:cover}.kw-neu .duo h2{font-size:clamp(24px,2.4vw,32px);color:var(--bordeaux);line-height:1.25;margin-bottom:var(--s3)}.kw-neu .duo p{margin-bottom:var(--s3);color:var(--text)}.kw-neu .duo .zitat{border-left:3px solid var(--oliv);padding-left:var(--s3);font-family:'Marcellus',Georgia,serif; font-size:18px;line-height:1.5;color:var(--bordeaux);margin-block:var(--s4)}/* ---------- Gutschein ---------- */.kw-neu .gutschein{background:var(--creme)}.kw-neu .gutschein .spalte{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between; gap:var(--s4);padding-block:var(--s5)}.kw-neu .gutschein .worte{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap}.kw-neu .gutschein .zeichen{font-size:34px;line-height:1}.kw-neu .gutschein h2{font-family:'Marcellus',Georgia,serif;font-weight:400;font-size:clamp(21px,2.2vw,28px); color:var(--bordeaux);line-height:1.3}.kw-neu .gutschein small{display:block;font-family:'Montserrat',sans-serif;font-size:13.5px; color:var(--text-leise);margin-top:var(--s1)}/* ---------- Kontakt ---------- */.kw-neu .kontakt{background:var(--bordeaux);color:#fff}.kw-neu .kontakt .spalte{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:var(--s5);padding-block:var(--s6)}.kw-neu .kontakt h2{font-family:'Marcellus',Georgia,serif;font-weight:400;font-size:28px;margin-bottom:var(--s3)}.kw-neu .kontakt dl{display:grid;grid-template-columns:auto 1fr;gap:var(--s2) var(--s3);font-size:14.5px}.kw-neu .kontakt dt{color:#EFD3D8;letter-spacing:.06em}.kw-neu .kontakt a{color:#fff}/* ---------- Fuß ---------- */.kw-neu .fuss{background:#fff;border-top:1px solid var(--linie)}.kw-neu .fuss .spalte{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center; gap:var(--s3);padding-block:var(--s4);font-size:12.5px;color:var(--text-leise)}.kw-neu .fuss nav{display:flex;flex-wrap:wrap;gap:var(--s3)}.kw-neu .fuss a{text-decoration:none}.kw-neu .fuss a:hover{color:var(--bordeaux)}@media (max-width:900px){.kw-neu .auftakt .spalte{grid-template-columns:1fr;gap:var(--s5);padding-block:var(--s5)}.kw-neu .auftakt-slider{order:-1;border-width:10px}.kw-neu .nav{display:none}.kw-neu .burger{display:flex}}@media (max-width:600px){.kw-neu .kopf img{height:40px}.kw-neu .kopf .spalte{padding-block:var(--s2)}.kw-neu .kopf-aktion{padding:10px 14px;font-size:11px}.kw-neu .kopf-aktion .nur-breit{display:none}.kw-neu .auftakt .spalte{padding-block:var(--s4)}.kw-neu .aktionen .knopf{flex:1 1 100%}.kw-neu .gutschein .spalte{flex-direction:column;align-items:flex-start;text-align:left}.kw-neu .gutschein .knopf{width:100%}}@media (max-width:400px){.kw-neu .kopf img{height:32px}.kw-neu .kopf .spalte{gap:var(--s3)}.kw-neu .kopf-rechts{gap:var(--s2)}}/* ---------- Laufband statt statischer Vertrauenszeile ---------- Zwei identische Spuren laufen nahtlos hintereinander; sobald die erste durch ist, steht die zweite exakt an ihrer Stelle. */.kw-neu .laufband{background:var(--bordeaux-dunkel);color:rgba(255,255,255,.9); overflow:hidden;position:relative;padding-block:14px}/* Weiche Kanten links und rechts, damit nichts hart abgeschnitten wirkt */.kw-neu .laufband::before, .kw-neu .laufband::after{content:"";position:absolute;top:0;bottom:0;width:80px;z-index:2; pointer-events:none}.kw-neu .laufband::before{left:0;background:linear-gradient(90deg,var(--bordeaux-dunkel),transparent)}.kw-neu .laufband::after{right:0;background:linear-gradient(270deg,var(--bordeaux-dunkel),transparent)}.kw-neu .laufband-spur{display:flex;width:max-content;animation:laufen 51s linear infinite}.kw-neu .laufband:hover .laufband-spur{animation-play-state:paused}@keyframes laufen{from{transform:translateX(0)}to{transform:translateX(-50%)}}.kw-neu .laufband-teil{display:flex;align-items:center;flex-shrink:0}.kw-neu .laufband-teil > *{display:inline-flex;align-items:center;gap:10px;padding-inline:26px; font-size:13px;white-space:nowrap}.kw-neu .laufband .trenn{color:var(--oliv);padding-inline:0;font-size:9px;opacity:.8}.kw-neu .laufband .marke{font-family:'Marcellus',Georgia,serif;font-size:15px;letter-spacing:.14em; text-transform:uppercase;color:#fff}.kw-neu .laufband .jahr{font-family:'Marcellus',Georgia,serif;font-size:16px;letter-spacing:.16em; text-transform:uppercase;color:#fff}.kw-neu .laufband .sterne{color:#E8C45F;letter-spacing:2px;font-size:13px}.kw-neu .laufband .stimme{font-style:italic;color:rgba(255,255,255,.92)}.kw-neu .laufband-fussnote{text-align:center;font-size:10.5px;color:var(--text-leise); padding-block:8px;background:#fff;letter-spacing:.04em}@media (prefers-reduced-motion:reduce){.kw-neu .laufband-spur{animation:none;width:auto;overflow-x:auto}}@media (max-width:600px){.kw-neu .laufband-teil > *{padding-inline:16px;font-size:12px}.kw-neu .laufband .marke, .kw-neu .laufband .jahr{font-size:13px}}.kw-neu .laufband .wer{padding-inline:0 0;margin-left:8px;font-size:11px;letter-spacing:.1em; text-transform:uppercase;color:rgba(255,255,255,.55)}/* ---------- Kopfbereich: nur Logo, Termin-Button, Burger ---------- */.kw-neu .kopf .spalte{justify-content:space-between}.kw-neu .kopf-logo{display:block}.kw-neu .kopf-rechts{display:flex;align-items:center;gap:var(--s3)}.kw-neu .burger{display:flex;flex-direction:column;justify-content:center;gap:6px; background:none;border:0;padding:12px 6px;cursor:pointer;min-width:44px;min-height:44px}.kw-neu .burger i{width:28px;height:2px;background:var(--bordeaux);display:block; transition:transform .35s var(--aus),opacity .25s var(--aus)}.kw-neu .burger:hover i:nth-child(1){transform:translateY(-1px)}.kw-neu .burger:hover i:nth-child(3){transform:translateY(1px)}/* ---------- Vollbildmenü mit Weichzeichner ---------- *//* Der Inhalt ist 800-820 px hoch und passte auf ein MacBook Air (~780 px) und aufs iPhone (~667 px) nicht. align-items:center schnitt ihn dann oben UND unten ab, ohne Scrollweg: Oeffnungszeiten, Adresse und der Termin-Knopf waren unerreichbar. Jetzt oben ausgerichtet und scrollbar; auf hohen Schirmen zentriert justify-content den Block weiterhin optisch. */.kw-neu .menue{position:fixed;inset:0;z-index:100;display:flex;align-items:flex-start;justify-content:center; overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch; background:rgba(112,16,32,.82); -webkit-backdrop-filter:blur(18px) saturate(120%);backdrop-filter:blur(18px) saturate(120%); opacity:0;transition:opacity .35s var(--aus)}.kw-neu .menue.offen{opacity:1}/* fixed statt absolute: seit .menue scrollt, wuerde das Kreuz sonst mit nach oben wandern */.kw-neu .menue-zu{position:fixed;top:18px;right:22px;z-index:2;background:none;border:0;color:#fff; font-size:44px;line-height:1;cursor:pointer;padding:8px 14px;min-width:44px;min-height:44px; transition:transform .3s var(--aus),opacity .3s var(--aus);opacity:.85}.kw-neu .menue-zu:hover{transform:rotate(90deg);opacity:1}/* margin:auto 0 zentriert den Block, solange er passt, und laesst ihn sonst einfach von oben laufen. padding-top haelt Abstand zum Schliesskreuz (bis y=62). */.kw-neu .menue-inhalt{display:flex;flex-direction:column;align-items:center;gap:var(--s3); text-align:center;padding:var(--s6) var(--rand) var(--s5);margin:auto 0;width:100%}.kw-neu .menue-inhalt > a{font-family:'Marcellus',Georgia,serif;font-size:clamp(26px,4.4vw,42px); color:#fff;text-decoration:none;letter-spacing:.02em;line-height:1.2; opacity:0;transform:translateY(18px); transition:color .3s var(--aus);position:relative}.kw-neu .menue.offen .menue-inhalt > a{animation:menueEin .55s var(--aus) forwards}.kw-neu .menue.offen .menue-inhalt > a:nth-child(1){animation-delay:.06s}.kw-neu .menue.offen .menue-inhalt > a:nth-child(2){animation-delay:.12s}.kw-neu .menue.offen .menue-inhalt > a:nth-child(3){animation-delay:.18s}.kw-neu .menue.offen .menue-inhalt > a:nth-child(4){animation-delay:.24s}.kw-neu .menue.offen .menue-inhalt > a:nth-child(5){animation-delay:.30s}.kw-neu .menue.offen .menue-inhalt > a:nth-child(6){animation-delay:.36s}@keyframes menueEin{to{opacity:1;transform:none}}.kw-neu .menue-inhalt > a::after{content:"";position:absolute;left:50%;right:50%;bottom:-6px;height:1px; background:var(--oliv);transition:left .35s var(--aus),right .35s var(--aus)}.kw-neu .menue-inhalt > a:hover::after{left:0;right:0}.kw-neu .menue-fuss{margin-top:var(--s5);display:flex;flex-direction:column;gap:var(--s1); color:rgba(255,255,255,.78);font-size:14px;opacity:0; animation:menueEin .55s var(--aus) .46s forwards}.kw-neu .menue-fuss a{color:#fff;text-decoration:none;font-size:19px;letter-spacing:.04em}@media (prefers-reduced-motion:reduce){.kw-neu .menue-inhalt > a, .kw-neu .menue-fuss{opacity:1;transform:none;animation:none}}@media (max-width:600px){.kw-neu .auftakt-slider{border-width:8px}.kw-neu .a-pfeil{width:36px;height:36px;font-size:18px}.kw-neu .a-pfeil.a-l{left:10px}.kw-neu .a-pfeil.a-r{right:10px}.kw-neu .a-titel{font-size:13px;padding:8px 12px}}@media (prefers-reduced-motion:reduce){.kw-neu .a-bild{animation:none}}/* ---------- Shore-Buchungswidget ---------- Das Widget setzt einen eigenen schwebenden Knopf an den rechten Rand — grasgruen (#2ec671), was neben Bordeaux und Oliv wie ein Fremdkoerper wirkt, und der Entwurf hat ohnehin drei eigene Termin-Knoepfe. Deshalb aus dem Bild geschoben statt display:none: der programmatische Klick, mit dem unsere Knoepfe das Popup oeffnen, braucht ihn noch. *//* Nur verstecken, solange das Popup ZU ist: derselbe Knopf schliesst es wieder. Mit einer Regel ohne :not() liess sich das Buchungsfenster nicht mehr schliessen. */ .SBW-button:not(.SBW-button--opened){position:fixed!important;left:-9999px!important;top:0!important;opacity:0!important;pointer-events:none!important}/* ---------- Praxis-Galerie ---------- */.kw-neu .galerie{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center; background:rgba(90,13,25,.86); -webkit-backdrop-filter:blur(20px) saturate(120%);backdrop-filter:blur(20px) saturate(120%); opacity:0;transition:opacity .35s var(--aus);padding:var(--s4)}.kw-neu .galerie.offen{opacity:1}.kw-neu .galerie-zu{position:absolute;top:16px;right:22px;background:none;border:0;color:#fff; font-size:44px;line-height:1;cursor:pointer;padding:6px 14px;min-width:44px;min-height:44px; opacity:.85;transition:transform .3s var(--aus),opacity .3s var(--aus);z-index:2}.kw-neu .galerie-zu:hover{transform:rotate(90deg);opacity:1}/* Neun Bilder als 3x3, vollstaendig sichtbar — kein Scrollbalken mehr. Deshalb keine feste Breite und kein overflow: der Inhalt bestimmt seine Groesse. */.kw-neu .galerie-inhalt{width:auto;max-width:94vw;padding:var(--s2)}.kw-neu .galerie-kopf{font-family:'Marcellus',Georgia,serif;color:#fff;font-size:clamp(20px,2.4vw,28px); text-align:center;margin-bottom:var(--s4)}/* Drei feste Spalten. Die Kachelhoehe leitet sich aus der Fensterhoehe ab (drei Reihen plus zwei Luecken muessen hineinpassen), die Breite folgt daraus ueber das Bildformat 3:4 — so ist das Raster immer komplett zu sehen, ohne zu scrollen. min(26vw, …) haelt es auf breiten Schirmen zusaetzlich in Zaum. */.kw-neu .galerie-raster{display:grid;gap:var(--s3);justify-content:center; grid-template-columns:repeat(3, min(26vw, calc((72vh - 2 * var(--s3)) / 3 * 0.75)))}.kw-neu .g-kachel{padding:0;border:0;background:none;cursor:pointer;overflow:hidden;border-radius:var(--radius); aspect-ratio:3/4;box-shadow:0 6px 20px rgba(0,0,0,.3); /* 3:4 = Format der Dateien, sonst faellt ein Viertel weg */ transition:transform .35s var(--aus),box-shadow .35s var(--aus)}.kw-neu .g-kachel img{width:100%;height:100%;object-fit:cover;display:block; transition:transform .6s var(--aus)}.kw-neu .g-kachel:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(0,0,0,.42)}.kw-neu .g-kachel:hover img{transform:scale(1.07)}.kw-neu .g-kachel:focus-visible{outline:3px solid #fff;outline-offset:3px}.kw-neu .g-gross{position:fixed;inset:0;z-index:130;display:flex;align-items:center;justify-content:center; background:rgba(20,4,8,.92);padding:var(--s4)}/* Die Dateien sind 390 px breit — 1100 px hiesse 170 % Hochskalierung und sichtbar weich. 390 px ist die native Breite; groesser wird erst wieder mit groesseren Dateien sinnvoll. */.kw-neu .g-gross img{max-width:min(94vw,390px);max-height:88vh;object-fit:contain; box-shadow:0 30px 70px rgba(0,0,0,.6);border:10px solid #fff}.kw-neu .g-gross-zu{position:absolute;top:16px;right:22px;background:none;border:0;color:#fff; font-size:44px;cursor:pointer;padding:6px 14px;min-width:44px;min-height:44px}@media (max-width:600px){.kw-neu .galerie-raster{gap:var(--s2); grid-template-columns:repeat(3, min(28vw, calc((70vh - 2 * var(--s2)) / 3 * 0.75)))}.kw-neu .g-gross img{border-width:6px}}/* ---------- Menü: Suche, Aktionen, Zeiten ---------- */.kw-neu .nur-vorlesen{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap;border:0}.kw-neu .menue-suche{display:flex;align-items:center;gap:8px;width:min(420px,86vw); border-bottom:1px solid rgba(255,255,255,.45);padding-bottom:10px;margin-bottom:var(--s4); opacity:0;animation:menueEin .5s var(--aus) .04s forwards}.kw-neu .menue-suche input{flex:1;background:none;border:0;color:#fff;font:inherit;font-size:17px; padding:8px 2px;min-width:0}.kw-neu .menue-suche input::placeholder{color:rgba(255,255,255,.6)}.kw-neu .menue-suche input:focus{outline:none}.kw-neu .menue-suche input:focus-visible{outline:2px solid #fff;outline-offset:4px;border-radius:2px}.kw-neu .menue-suche button{background:none;border:0;color:#fff;cursor:pointer;padding:8px; min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center; transition:opacity .3s var(--aus)}.kw-neu .menue-suche button:hover{opacity:.7}.kw-neu .menue-aktionen{display:flex;flex-wrap:wrap;gap:var(--s3);justify-content:center; margin-top:var(--s4);opacity:0;animation:menueEin .55s var(--aus) .42s forwards}.kw-neu .menue-aktionen .knopf{gap:10px;min-height:52px}.kw-neu .menue-anruf{background:var(--oliv);color:#fff}.kw-neu .menue-anruf:hover{background:var(--oliv-dunkel)}.kw-neu .menue-fuss{margin-top:var(--s5);display:flex;flex-direction:column;gap:2px;text-align:center; color:rgba(255,255,255,.8);font-size:14px;line-height:1.6; opacity:0;animation:menueEin .55s var(--aus) .5s forwards}.kw-neu .menue-fuss span:first-child{font-family:'Marcellus',Georgia,serif;font-size:15px; letter-spacing:.14em;text-transform:uppercase;color:#fff;margin-bottom:4px}.kw-neu .menue-adresse{margin-top:10px;font-size:13px;color:rgba(255,255,255,.65)}@media (max-width:600px){.kw-neu .menue-inhalt > a{font-size:clamp(22px,7vw,30px)}.kw-neu .menue-aktionen{flex-direction:column;width:min(320px,84vw)}.kw-neu .menue-aktionen .knopf{width:100%}} /* ---------- Ergänzungen für die Live-Fassung ---------- Im Entwurf standen diese Regeln als Inline-Styles im HTML. Aufgelöst, damit es eine erkennbare Button-Logik gibt: knopf-voll = Buchung/Kauf (Konversion), knopf-fuehrung = Weiterführung innerhalb der Seite. */ .kw-neu .knopf-fuehrung{background:var(--bordeaux);color:#fff;border:0;cursor:pointer; font-family:inherit} .kw-neu .knopf-fuehrung:hover{background:var(--bordeaux-dunkel);transform:translateY(-2px); box-shadow:0 10px 26px rgba(0,0,0,.28)} .kw-neu .kontakt-vorspann{color:rgba(255,255,255,.9);margin-bottom:var(--s4)} /* Gezeichnetes Geschenk-Zeichen statt Emoji — nimmt die Markenfarbe an. */ .kw-neu .gutschein .zeichen{color:var(--bordeaux);flex:0 0 auto} /* ---------- Knopf-Zustaende gegen fremdes CSS absichern ---------- Gemessen am 2026-08-18 auf der Live-Seite: `.elementor-kit-17 a:hover` faerbt JEDE Verlinkung im Mouseover schwarz — also auch alle Knoepfe, deren Schrift weiss auf Bordeaux oder Oliv steht. Zusaetzlich setzt eine `reset.css` fuer `button:hover` einen pinken Hintergrund (#cc3366), was "Praxis ansehen" traf, weil das als