/* ============================================================================= Kopfzeile, Vollbildmenü und Fußzeile — nach dem Design-Entwurf. Erzeugt aus assets/startseite.css; Änderungen gehören in den Entwurf, nicht hierher. Diese Datei lädt auf ALLEN Seiten (auch Shop, Warenkorb, Kasse). Sie enthält deshalb ausschließlich Regeln für Kopf, Menü und Fuß — nichts vom Seiteninhalt. ============================================================================= */ /* Kopf und Fuß sind eigene .kw-neu-Blöcke. Sie dürfen NICHT wie der Startseiteninhalt aus der Themenbreite ausbrechen — sie stehen ohnehin außerhalb von .site-main. */ /* display:contents statt einer eigenen Box: der Wrapper war genau so hoch wie die Kopfzeile (85 px). Ein sticky-Element kann seinen Containing Block nie verlassen — der Kopf scrollte deshalb sofort mit weg, statt oben zu kleben. Ohne eigene Box greift sticky gegen das Dokument; die CSS-Variablen vererben sich weiterhin. */ .kw-neu.kw-rahmen{display:contents} /* Das Warenkorb-Symbol wurde bei 375 px von Logo und Termin-Knopf auf 4x4 px zusammengedrueckt — bei dieser Groesse ist der Weg zur Kasse nicht mehr treffbar. */ .kw-neu .kopf-warenkorb{flex:0 0 auto;min-width:44px;min-height:44px; display:inline-flex;align-items:center;justify-content:center;position:relative; color:var(--bordeaux);text-decoration:none} .kw-neu .kopf-warenkorb svg{width:22px;height:22px;flex:0 0 auto} .kw-neu .kopf-warenkorb-zahl{position:absolute;top:2px;right:2px;min-width:17px;height:17px; border-radius:9px;background:var(--oliv);color:#fff;font-size:11px;line-height:17px; text-align:center;padding-inline:4px} /* PFLICHTREGEL — ohne sie ist die gesamte Website unbedienbar. .menue setzt display:flex als Autoren-Regel und hebt damit die Browser-Regel [hidden]{display:none} auf. Das geschlossene Vollbildmenue liegt dann unsichtbar (opacity:0, inset:0, z-index:100) ueber JEDER Seite und schluckt jeden Klick — auch im Shop und im Kontaktformular. Beim Herausloesen dieser Datei aus startseite.css war die Regel verlorengegangen, weil sie im Dateikopf stand und nicht im gefilterten Regelbestand. */ .kw-neu [hidden]{display:none!important} /* ============================================================================= 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: 100vw zaehlt die Scrollleiste mit, dadurch sass der gesamte Inhalt 7,5 px links neben der Flucht von Kopf und Fuss und ragte ueber beide Viewport-Kanten. Der Elementor-Container ist ohnehin schon 100 % breit. */ .kw-neu{width:100%;max-width:100%;margin-left:0;margin-right:0}.kw-neu{font-family:'Montserrat','Helvetica Neue',Arial,sans-serif;line-height:1.7; color:var(--text);background:#fff;-webkit-font-smoothing:antialiased}@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}@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); }.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 .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}.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)}/* ---------- 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 .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}}@media (max-width:400px){.kw-neu .kopf img{height:32px}.kw-neu .kopf .spalte{gap:var(--s3)}.kw-neu .kopf-rechts{gap:var(--s2)}}/* ---------- 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}.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}}/* ---------- 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}/* ---------- 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)}@keyframes menueEin{to{opacity:1;transform:none}} /* ---------- Vorgaben des Elementor-Kits zurueckdraengen ---------- Das Kit (post-17.css, .elementor-kit-17) setzt eigene Werte fuer Schriftgroesse, Linkfarbe und Formularfelder. Sie sind spezifischer als die Grundregeln des Entwurfs und haben sich in den Baustein hineingezogen. Gemessene Abweichungen: */ /* Fliesstext war unter 1024 px live 14 px statt 16 px — das Kit setzt @media(max-width:1024px){.elementor-kit-17{font-size:14px;line-height:1.8em}}. Der Entwurf vererbt aus body; hier uebernimmt das der Baustein selbst. */ .kw-neu{font-size:16px;line-height:1.7} /* Das Kit faerbt alle Links oliv und nimmt ihnen die Unterstreichung. In der Fusszeile soll die Schriftfarbe gelten, bei Telefon und E-Mail die Unterstreichung bleiben. */ .kw-neu .fuss a{color:inherit} /* Kein Unterstrich — er zerschneidet Telefonnummer und Adresse optisch. Beim Ueberfahren erscheint er, damit die Verweise erkennbar bleiben. */ .kw-neu .kontakt dd a{text-decoration:none} .kw-neu .kontakt dd a:hover{text-decoration:underline} /* Das Kit legt jedem Eingabefeld einen olivfarbenen Rahmen und 12/20 px Polster an. Im Vollbildmenue soll nur die feine Unterlinie des Formulars zu sehen sein. */ .kw-neu .menue-suche input{border:0!important;background:none!important;padding:8px 2px!important} /* "Praxis ansehen" ist ein