/* Schriften lokal — keine Verbindung zu Google-Servern. Ersetzt den früheren auf fonts.googleapis.com. */ /* Cormorant Garamond kommt als variabler Font — eine Datei deckt alle Schnitte von 300 bis 700 ab. Zuvor waren vier Dateien unter verschiedenen Namen hinterlegt, die byte-identisch waren: Jeder Erstbesucher lud dieselbe Schrift mehrfach. */ @font-face{font-family:'Cormorant Garamond';src:url('/assets/fonts/cormorant-400.woff2') format('woff2');font-weight:300 700;font-style:normal;font-display:swap} @font-face{font-family:'Cormorant Garamond';src:url('/assets/fonts/cormorant-400i.woff2') format('woff2');font-weight:300 700;font-style:italic;font-display:swap} @font-face{font-family:'Inter';src:url('/assets/fonts/inter.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap} /* ============================================================ LA COIFFEUR & COSMETIC — Noir Couture Tokens & reference lock: warm near-black canvas, ivory text, champagne gold used only as punctuation (< 5% of any view). ============================================================ */ :root{ /* ACCENT per page: dark-section value / light-section value (legible on white) */ /* accentL ist der Goldton für helle Sektionen. Mit #8A6B28 lagen die Preise dort bei 4,1:1 und damit unter der Lesbarkeitsschwelle; #745823 bringt 5,6–6,1:1 bei praktisch gleicher Anmutung. */ --accentD:#C8A86B; --accentL:#745823; --accent-grad:linear-gradient(120deg,#C8A86B,#E4C98C); --accent-soft:rgba(200,168,107,.14); /* DEFAULT = dark theme (header, footer, hero, modals, body) */ --canvas:#121214; --canvas-2:#1A1A1C; --canvas-3:#212124; /* --ivory-soft trug bis 28.07.26 nur 40 % Deckkraft und kam damit auf 3,6:1 — unter der Lesbarkeitsschwelle von 4,5:1. Betroffen waren ausgerechnet die Pflichthinweise (Preisfussnoten, Bewertungshinweis). Mit 55 % sind es 5,7:1; die Abstufung zu --ivory-dim bleibt sichtbar. */ --ivory:#F4F3F0; --ivory-dim:rgba(244,243,240,.62); --ivory-soft:rgba(244,243,240,.55); --line:rgba(244,243,240,.14); --line-2:rgba(244,243,240,.08); --gold:var(--accentD); --gold-muted:var(--accentD); --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif; --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; /* ---------- Schriftskala ---------- Drei Stufen für Fließtext, mehr braucht die Seite nicht. Vorher trug dieselbe Rolle je nach Sektion .9 / .92 / .94 / .95rem und die Zeilenhöhe 1.55 / 1.6 / 1.62 / 1.65 / 1.7 / 1.72 / 1.8 / 1.9 — acht Werte für denselben Zweck, verteilt auf Stylesheet und Inline-Angaben. Wer hier etwas ändert, ändert es für alle Seiten zugleich; genau das ist der Sinn. Einzelwerte gehören nicht mehr ins Markup. heraus — herausgehobene Absätze in Statement-Sektionen koerper — Grundgröße: Fließtext in Sektionen, FAQ-Antworten kompakt — Karten, Schritte, Faktenlisten, Aufzählungen klein — Hinweise, Fußnoten, Preis- und Rechtsangaben Die Grundgröße steht in Pixeln, weil sie schon immer so trägt; die kleineren Stufen in rem, damit sie der Schriftgrößen-Einstellung des Browsers folgen. */ --fs-heraus:1.12rem; --fs-koerper:17px; --lh-koerper:1.7; --fs-kompakt:.94rem; --lh-kompakt:1.62; --fs-klein:.8rem; --lh-klein:1.6; --ease:cubic-bezier(.16,1,.3,1); --gutter:clamp(1.25rem,6vw,7rem); --maxw:1240px; --section-y:clamp(5.5rem,13vh,11.5rem); --fallback:linear-gradient(135deg,#0C0C0E 0%,#161618 55%,#26262A 120%); } /* ---- SCHWARZ-WEISS-WECHSEL: section-level theming ---- */ .sec--dark{ --canvas:#121214; --canvas-2:#1A1A1C; --canvas-3:#212124; /* --ivory-soft trug bis 28.07.26 nur 40 % Deckkraft und kam damit auf 3,6:1 — unter der Lesbarkeitsschwelle von 4,5:1. Betroffen waren ausgerechnet die Pflichthinweise (Preisfussnoten, Bewertungshinweis). Mit 55 % sind es 5,7:1; die Abstufung zu --ivory-dim bleibt sichtbar. */ --ivory:#F4F3F0; --ivory-dim:rgba(244,243,240,.62); --ivory-soft:rgba(244,243,240,.55); --line:rgba(244,243,240,.14); --line-2:rgba(244,243,240,.08); --gold:var(--accentD); --gold-muted:var(--accentD); background:var(--canvas); color:var(--ivory); } .sec--light{ --canvas:#F6F5F2; --canvas-2:#FFFFFF; --canvas-3:#ECEBE6; /* Helle Sektionen lagen mit 44 % bei nur 2,8:1 — noch schlechter als die dunklen. 62 % ergeben rund 4,8:1 auf dem dunkelsten hellen Grund. */ --ivory:#16161A; --ivory-dim:rgba(22,22,26,.72); --ivory-soft:rgba(22,22,26,.62); --line:rgba(22,22,26,.14); --line-2:rgba(22,22,26,.08); --gold:var(--accentL); --gold-muted:var(--accentL); background:var(--canvas); color:var(--ivory); } *{box-sizing:border-box;margin:0;padding:0} /* Nur für Vorlesehilfen bestimmt — sichtbar bleibt nichts. */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0} /* Sprung direkt zum Inhalt. Er wird erst sichtbar, wenn er den Fokus erhält — wer mit der Tastatur arbeitet, muss sonst auf jeder Seite erst sieben Menüpunkte durchlaufen. */ .skip-link{position:absolute;left:1rem;top:-4rem;z-index:100; padding:.85rem 1.4rem;background:var(--canvas-2,#1A1A1C);color:#F4F3F0; border:1px solid var(--accentD);border-radius:2px; font-family:var(--sans);font-size:.85rem;letter-spacing:.08em;text-decoration:none; transition:top .2s ease} .skip-link:focus{top:1rem} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ background:var(--canvas); color:var(--ivory); font-family:var(--sans); font-size:var(--fs-koerper); line-height:var(--lh-koerper); font-weight:400; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } ::selection{background:var(--gold);color:#14110F} a{color:inherit;text-decoration:none} img{display:block;max-width:100%} h1,h2,h3,h4{font-family:var(--serif);font-weight:400;line-height:1.06;letter-spacing:.005em;text-wrap:balance} /* film grain */ .grain{position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.04;mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");} /* ---------- shared atoms ---------- */ .shell{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)} .eyebrow{display:inline-flex;align-items:center;gap:.85rem;font-family:var(--sans);font-size:.72rem; font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-muted)} .eyebrow::before{content:"";width:30px;height:1px;background:var(--gold);flex:none} .eyebrow--center{justify-content:center} .eyebrow--center::after{content:"";width:30px;height:1px;background:var(--gold);flex:none} .rule{height:1px;width:100%;overflow:hidden} .rule span{display:block;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left; transition:transform 1s var(--ease)} .rule.in span{transform:scaleX(1)} .rule--ivory span{background:var(--line)} .lead{font-size:clamp(1.05rem,1.6vw,1.28rem);color:var(--ivory-dim);max-width:62ch;line-height:var(--lh-koerper)} .section-head{display:flex;flex-direction:column;gap:1.4rem;margin-bottom:clamp(2.5rem,5vw,4.5rem)} .section-head h2{font-size:clamp(2.1rem,5vw,3.7rem)} .section-head .idx{font-family:var(--sans);font-size:.72rem;letter-spacing:.3em;color:var(--ivory-soft); font-weight:600} /* buttons */ .btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6rem; font-family:var(--sans);font-size:.76rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase; padding:1.05rem 2.1rem;border-radius:2px;cursor:pointer;border:1px solid transparent; transition:transform .4s var(--ease),background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease); white-space:nowrap} .btn--primary{background:var(--ivory);color:var(--canvas)} .btn--primary:hover{transform:translateY(-2px)} .btn--ghost{background:transparent;color:var(--ivory);border-color:var(--line)} .btn--ghost:hover{border-color:var(--gold)} .btn--ghost::after{content:"";position:absolute;left:50%;bottom:-1px;width:0;height:1px;background:var(--gold); transition:width .4s var(--ease),left .4s var(--ease)} .btn--ghost:hover::after{left:0;width:100%} /* link with gold underline wipe */ .ulink{position:relative;display:inline-flex;align-items:center;gap:.55rem;font-family:var(--sans); font-size:.78rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ivory);padding-bottom:.4rem} .ulink::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--line)} .ulink::before{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--gold);z-index:1; transition:width .45s var(--ease)} .ulink:hover::before{width:100%} .ulink .arw{transition:transform .45s var(--ease)} .ulink:hover .arw{transform:translateX(5px)} /* reveal on scroll */ /* Nur ausblenden, wenn JavaScript läuft — sonst bliebe die Seite ohne Skript vollständig leer. Die Kennung setzt der Kopfbereich. WICHTIG: Die Einblend-Regel muss dieselbe Herkunft tragen wie die Ausblend-Regel. Stand vorher nur ".reveal.in" da, war sie schwächer als "html.js .reveal" — die Elemente blieben dauerhaft unsichtbar, obwohl das Skript die Kennung "in" korrekt gesetzt hat. */ html.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform .9s var(--ease)} html.js .reveal.in{opacity:1;transform:none} .reveal.in{opacity:1;transform:none} /* Der erste Bildschirm blendet per CSS-Animation ein und wartet nicht auf das Skript. Vorher hingen Hero und Subhero ebenfalls an der Regel darüber: Sie standen auf opacity:0, bis der IntersectionObserver sie freigab. Auf einem gedrosselten Mobilgerät dauerte das lange genug, dass der größte Textblock — und damit der als „Largest Contentful Paint" gemessene Wert — erst nach 7,2 Sekunden zählte, obwohl der Server nach 5 ms geantwortet hatte. Eine Animation startet dagegen mit dem ersten gezeichneten Bild. Bewegungsreduktion greift weiterhin: Der Block am Dateiende schaltet mit `*{animation:none!important}` auch diese Animation ab. */ @keyframes einblenden{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}} html.js .hero .reveal, html.js .subhero .reveal{animation:einblenden .9s var(--ease) both;transition:none} /* media wrapper with dark overlay + fallback gradient */ .media{position:relative;overflow:hidden;background:var(--fallback)} /* Das sanfte Aufblenden hängt an der Kennung "loaded", die allein das Skript vergibt. Ohne Skript blieben sonst sämtliche Bilder dauerhaft unsichtbar — deshalb gilt die Ausgangsdurchsichtigkeit nur, wenn JavaScript tatsächlich läuft (gleiche Vorsichtsregel wie bei .reveal). */ .media img{width:100%;height:100%;object-fit:cover;transition:opacity 1s var(--ease),transform 1.6s var(--ease)} html.js .media img{opacity:0} html.js .media img.loaded{opacity:1} .media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,12,.28),rgba(8,8,10,.42));pointer-events:none} /* ============================================================ HEADER ============================================================ */ .head{position:fixed;top:0;left:0;right:0;z-index:40;transition:background .5s var(--ease),padding .5s var(--ease),border-color .5s var(--ease); border-bottom:1px solid transparent;padding:1.5rem 0} .head.scrolled{background:rgba(16,16,18,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); border-bottom-color:rgba(244,243,240,.08);padding:.95rem 0} .head__bar{display:flex;align-items:center;justify-content:space-between;gap:2rem} .brand{display:flex;flex-direction:column;line-height:1;cursor:pointer} .brand b{font-family:var(--serif);font-weight:500;font-size:1.5rem;letter-spacing:.16em} .brand small{font-family:var(--sans);font-size:.56rem;font-weight:600;letter-spacing:.46em;text-transform:uppercase; color:var(--gold-muted);margin-top:.42rem;padding-left:.16em} .nav{display:flex;align-items:center;gap:clamp(1.2rem,2vw,1.9rem)} .nav a{position:relative;font-size:.74rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ivory-dim); padding:.3rem 0;transition:color .4s var(--ease)} .nav a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:1px;background:var(--nav-accent,var(--gold));transition:width .4s var(--ease)} /* Nav-Balken folgt der Akzentwelt der aktiven Seite (Router setzt data-page auf ) */ body[data-page="kosmetik"]{--nav-accent:#FF8E72} body[data-page="pmu"]{--nav-accent:#D98784} body[data-page="laser"]{--nav-accent:#F5C06A} .nav a:hover{color:var(--ivory)} .nav a:hover::after,.nav a.active::after{width:100%} .nav a.active{color:var(--ivory)} .head__cta{display:flex;align-items:center;gap:1.3rem} .head__phone{font-size:.78rem;letter-spacing:.08em;color:var(--ivory-dim);transition:color .4s;white-space:nowrap} .head__phone:hover{color:var(--gold)} .burger{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:44px;height:44px;background:none;border:none;cursor:pointer;padding:10px} .burger span{display:block;height:1.5px;width:100%;background:var(--ivory);transition:transform .4s var(--ease),opacity .3s} .burger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)} .burger.open span:nth-child(2){opacity:0} .burger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)} /* mobile menu overlay */ .mnav{position:fixed;inset:0;z-index:39;background:var(--canvas);display:flex;flex-direction:column;justify-content:center; padding:var(--gutter);gap:.2rem;opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility .5s} .mnav.open{opacity:1;visibility:visible} .mnav a{font-family:var(--serif);font-size:clamp(1.6rem,6.5vw,2.5rem);color:var(--ivory);padding:.42rem 0;border-bottom:1px solid var(--line-2)} .mnav a .n{font-family:var(--sans);font-size:.7rem;color:var(--gold-muted);letter-spacing:.3em;margin-right:1rem;vertical-align:.6rem} .mnav .m-foot{margin-top:2.5rem;color:var(--ivory-dim);font-size:.85rem;letter-spacing:.04em} /* ============================================================ PAGE / ROUTER ============================================================ */ .page{display:none} .page.active{display:block} .subhero{padding:calc(var(--section-y) + 4rem) 0 clamp(3.5rem,8vh,7rem)} .subhero .eyebrow{margin-bottom:1.6rem} .subhero h1{font-size:clamp(1.9rem,5.6vw,4.8rem);overflow-wrap:break-word} .subhero .lead{margin-top:1.8rem} /* ============================================================ HERO ============================================================ */ .hero{position:relative;min-height:100svh;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden} .hero__media{position:absolute;inset:0} .hero__media::after{background:none} .hero__media img{filter:brightness(.6) saturate(.9) contrast(1.06)} .hero__scrim{position:absolute;inset:0;background: linear-gradient(to top,#121214 0%,rgba(16,16,18,.80) 23%,rgba(16,16,18,.58) 54%,rgba(16,16,18,.74) 100%), radial-gradient(125% 82% at 50% 44%,rgba(16,16,18,.16) 0%,rgba(9,9,11,.72) 100%)} .hero__inner{position:relative;z-index:3;max-width:920px;padding:7rem var(--gutter) 0} .hero h1{font-size:clamp(1.9rem,5.6vw,4.6rem);font-weight:400;margin:1.7rem auto 0;letter-spacing:.01em; overflow-wrap:break-word;text-shadow:0 2px 50px rgba(0,0,0,.5)} /* :not(.gtext) ist noetig: Diese Regel hat die hoehere Spezifitaet und hat den Farbverlauf im Hero mit einem festen Elfenbein ueberschrieben — das Signaturwort jeder Leistungsseite stand dadurch schlicht weiss. */ .hero h1 em:not(.gtext){font-style:italic;color:var(--ivory)} .hero__sub{margin:1.7rem auto 0;max-width:60ch;color:var(--ivory-dim);font-size:clamp(1rem,1.5vw,1.18rem);text-wrap:pretty; text-shadow:0 1px 30px rgba(0,0,0,.55)} .hero__cta{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-top:2.2rem} .hero__micro{margin-top:1.1rem;font-family:var(--sans);font-size:.8rem;letter-spacing:.02em;color:var(--ivory-soft);text-align:center} .hero__proof{margin-top:1.9rem;display:flex;align-items:center;justify-content:center;gap:.6rem;flex-wrap:wrap; font-family:var(--sans);font-size:.82rem;letter-spacing:.02em;color:var(--ivory-dim);text-shadow:0 1px 20px rgba(0,0,0,.6)} .hero__proof a{color:var(--ivory);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(245,240,232,.35)} .hero__proof a:hover{text-decoration-color:var(--gold)} .hero__proof-sep{opacity:.45} .hero .rule{max-width:64px;margin:0 auto} .hero__badge{position:absolute;left:var(--gutter);bottom:2.2rem;z-index:3;display:flex;align-items:center;gap:.7rem; font-size:.74rem;letter-spacing:.1em;color:var(--ivory-dim)} .hero__badge .dot{width:7px;height:7px;border-radius:50%;background:#7CCB8E;box-shadow:0 0 0 4px rgba(124,203,142,.16)} .hero__badge .dot.closed{background:#C97B6B;box-shadow:0 0 0 4px rgba(201,123,107,.16)} .hero__scroll{position:absolute;right:var(--gutter);bottom:2.2rem;z-index:3;font-size:.68rem;letter-spacing:.28em; text-transform:uppercase;color:var(--ivory-soft);display:flex;align-items:center;gap:.7rem} .hero__scroll::after{content:"";width:46px;height:1px;background:var(--gold);animation:scrollpulse 2.4s var(--ease) infinite} @keyframes scrollpulse{0%,100%{transform:scaleX(.4);opacity:.5;transform-origin:right}50%{transform:scaleX(1);opacity:1;transform-origin:right}} /* ============================================================ TRUST STRIP ============================================================ */ .trust{border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)} .trust .shell{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-2);padding-inline:0;max-width:none} .trust__item{background:var(--canvas);padding:2.6rem clamp(1.25rem,3vw,2.4rem);display:flex;flex-direction:column;gap:.5rem;align-items:flex-start} /* Die Vertrauensleiste trägt Wörter, keine Zahlen („Friseurhandwerk", „Seit 2015"). Die frühere Angabe 2.7rem/1 war auf Ziffern ausgelegt und wurde deshalb an allen sechs Stellen inline überschrieben — die Regel galt nirgends. Jetzt steht der tatsächlich verwendete Wert hier. */ .trust__num{font-family:var(--serif);font-size:1.9rem;line-height:1.3;color:var(--ivory)} .trust__lbl{font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ivory-soft)} .trust__link{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(20,20,20,.25)} .trust__link:hover{color:var(--gold);text-decoration-color:currentColor} .tq-cta__note{font-size:.82rem;color:var(--ivory-soft)} .tq-cta__note a{color:inherit;text-decoration:underline;text-underline-offset:3px} .stars{display:inline-block;font-size:.95rem;letter-spacing:2px;line-height:1} .stars::before{content:"★★★★★";background:linear-gradient(90deg,var(--gold) var(--pct,90%),rgba(245,240,232,.22) var(--pct,90%)); -webkit-background-clip:text;background-clip:text;color:transparent} /* ============================================================ STATEMENT ============================================================ */ .statement{padding:var(--section-y) 0;text-align:center} .statement .shell{max-width:1000px} .statement h2{font-size:clamp(2rem,4.6vw,3.6rem);margin:1.8rem auto 0;line-height:1.1} /* :not(.eyebrow) ist nötig: Diese Regel hat die höhere Spezifität (0,1,1) als .eyebrow (0,1,0) und hat die Kicker in Statement-Sektionen bisher von 11,5 auf 17,9 px aufgeblasen — dieselbe Zeile war je nach Sektion verschieden groß. */ .statement p:not(.eyebrow){margin:2.2rem auto 0;color:var(--ivory-dim);max-width:58ch;font-size:var(--fs-heraus);text-wrap:pretty} .statement .ulink{margin-top:2.6rem} /* ============================================================ SERVICES OVERVIEW ============================================================ */ .services{padding:var(--section-y) 0} .svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.3rem} .svc{position:relative;cursor:pointer;display:flex;flex-direction:column} .svc__media{aspect-ratio:3/4;border:1px solid var(--line-2)} .svc:hover .svc__media img{transform:scale(1.06)} .svc__num{position:absolute;top:1rem;left:1rem;z-index:3;font-size:.72rem;letter-spacing:.2em;color:var(--ivory); font-weight:600;mix-blend-mode:difference} .svc__body{padding:1.5rem .2rem 0} .svc h3{font-size:1.7rem} .svc p{margin-top:.6rem;color:var(--ivory-dim);font-size:.96rem;line-height:1.6} .svc .svc__link{margin-top:1.1rem;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-muted); display:inline-flex;gap:.5rem;align-items:center;transition:gap .4s var(--ease)} .svc:hover .svc__link{gap:.9rem;color:var(--gold)} /* ============================================================ SPLIT (about / editorial) ============================================================ */ .split{padding:var(--section-y) 0} .split__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,6rem);align-items:center} .split__grid.flip .split__media{order:2} .split__media{aspect-ratio:4/5;border:1px solid var(--line-2)} .split__media.tall{aspect-ratio:3/4} /* Variante: Bild füllt die volle Höhe der Textspalte */ .split--stretch .split__grid{align-items:stretch} .split--stretch .split__media{aspect-ratio:auto;height:100%;min-height:26rem} .split__text h2{font-size:clamp(2.1rem,4.6vw,3.6rem);margin:1.5rem 0} .split__text p:not(.eyebrow){color:var(--ivory-dim);margin-bottom:1.15rem;max-width:54ch} .split__text .ulink{margin-top:1.2rem} /* ============================================================ GALLERY ============================================================ */ .gallery{padding:var(--section-y) 0} .masonry{columns:3;column-gap:1.2rem} .masonry .gitem{break-inside:avoid;margin-bottom:1.2rem;cursor:pointer;position:relative;border:1px solid var(--line-2)} .masonry .gitem .media{width:100%} .masonry .gitem:hover img{transform:scale(1.05)} .masonry .gitem::before{content:"";position:absolute;inset:0;z-index:4;background:rgba(20,17,15,.0);transition:background .5s var(--ease)} .masonry .gitem:hover::before{background:rgba(20,17,15,0)} /* Content-Bilder: immer volle, natürliche Helligkeit — Hover-Feedback kommt allein vom sanften Zoom */ .gteaser .gitem .media img,.masonry .gitem .media img,.svc__media img,.speccard .media img,.split__media img{filter:none;transition:opacity 1s var(--ease),transform 1.6s var(--ease)} .gteaser{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem} .gteaser .gitem{cursor:pointer;border:1px solid var(--line-2);overflow:hidden} .gteaser .gitem .media{aspect-ratio:3/4} .gteaser .gitem:hover img{transform:scale(1.06)} /* ============================================================ PRICELIST ============================================================ */ .pricing{padding:var(--section-y) 0} .price-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,6vw,6rem)} .price-group h3{font-size:1.9rem;margin-bottom:.4rem} .price-group .grp-eyebrow{margin-bottom:2rem} .price-row{display:flex;align-items:baseline;gap:1rem;padding:1.15rem 0;border-bottom:1px solid var(--line-2);transition:transform .28s var(--ease),padding-left .28s var(--ease)} /* Preiszeilen: bei Hover/Touch leicht anheben + Name goldig — zeigt aktive Zeile, wirkt dynamischer */ .price-row:hover,.price-row:active,.price-mrow:hover,.price-mrow:active{transform:translateY(-2px);padding-left:.5rem} .price-row:hover .pr-name,.price-row:active .pr-name,.price-mrow:hover .pr-name,.price-mrow:active .pr-name{color:var(--gold-muted)} .price-row .pr-name{font-family:var(--serif);font-size:1.4rem;color:var(--ivory);flex:none} .price-row .pr-dots{flex:1;border-bottom:1px dotted var(--line);transform:translateY(-4px)} .price-row .pr-price{font-family:var(--sans);font-size:.95rem;font-weight:500;letter-spacing:.04em;color:var(--gold-muted);flex:none} .price-row .pr-desc{display:block;font-family:var(--sans);font-size:.86rem;color:var(--ivory-soft);margin-top:.35rem;line-height:1.5;max-width:46ch} .price-row .pr-main{flex:none;min-width:0} .price-note{margin-top:3rem;font-size:var(--fs-klein);line-height:var(--lh-klein);color:var(--ivory-soft);max-width:60ch} /* Paket-Vorteil (Laser) — prominente Rabattstaffel, Rosé-Akzentwelt via .acc-rose */ .pkg-deal{position:relative;margin-top:clamp(3rem,6vw,4.5rem);border:1px solid var(--line);background:var(--canvas-2);padding:clamp(1.8rem,4vw,3rem)} .pkg-deal.acc-rose::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#F6D2D6,#E8B4B8,#E9C9A0)} /* Buchungs-CTA bleibt seitenweit gold (eine Conversion-Farbe) — Rosé trägt nur die Paketlogik */ .pkg-deal.acc-rose .btn--grad{background:linear-gradient(135deg,#FFD15C,#F5A623,#E8870C)} .pkg-deal__head h3{font-family:var(--serif);font-size:clamp(1.6rem,3vw,2.4rem);font-weight:500;margin:.5rem 0 .7rem} .pkg-deal__sub{color:var(--ivory-dim);max-width:60ch;line-height:1.6} .pkg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1.9rem} .pkg-card{position:relative;border:1px solid var(--line);background:var(--canvas);padding:1.9rem 1.4rem;text-align:center;display:flex;flex-direction:column;align-items:center;gap:.55rem;transition:transform .4s var(--ease),border-color .4s var(--ease)} .pkg-card:hover{transform:translateY(-4px);border-color:var(--gold)} .pkg-card__zones{font-family:var(--sans);font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ivory-soft)} .pkg-card__off{font-family:var(--serif);font-size:clamp(2.6rem,5.5vw,3.6rem);font-weight:600;line-height:1;background:var(--accent-grad);-webkit-background-clip:text;background-clip:text;color:transparent} .pkg-card--best{border-color:var(--gold)} .pkg-card__tag{position:absolute;top:-.7rem;left:50%;transform:translateX(-50%);background:var(--accent-grad);color:#14110F;font-family:var(--sans);font-size:.6rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:.28em .8em;border-radius:2px;white-space:nowrap} .pkg-deal__note{margin-top:1.9rem;font-size:.82rem;color:var(--ivory-soft);line-height:1.6;max-width:70ch} /* Heller Farbwechsel: Rabatt-Prozente auf weißem Grund satt statt heller Gradient */ .pkg-deal.sec--light .pkg-card__off{-webkit-text-fill-color:var(--accentL);color:var(--accentL);background:none} @media(max-width:640px){.pkg-grid{grid-template-columns:1fr}} /* Zonen-Preiskalkulator (im Paket-Vorteil) */ .calc{margin-top:2.6rem;border-top:1px solid var(--line-2);padding-top:2.4rem} .calc__title{font-family:var(--serif);font-size:clamp(1.4rem,2.4vw,1.9rem);font-weight:500} .calc__sub{margin:.5rem 0 1.5rem;font-size:.92rem;color:var(--ivory-dim);max-width:60ch} .calc-seg{display:inline-flex;border:1px solid var(--line);border-radius:2px;overflow:hidden} .calc-seg button{font-family:var(--sans);font-size:.74rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase; padding:.8rem 1.7rem;background:transparent;border:none;color:var(--ivory-dim);cursor:pointer; transition:background .3s var(--ease),color .3s var(--ease)} .calc-seg button[aria-pressed="true"]{background:var(--accent-grad);color:#14110F} .calc-chips{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.4rem} .calc-chip{display:inline-flex;align-items:baseline;gap:.6rem;border:1px solid var(--line);border-radius:2px; padding:.8rem 1.2rem;font-family:var(--sans);font-size:.9rem;color:var(--ivory-dim);background:transparent;cursor:pointer; transition:border-color .3s var(--ease),background .3s var(--ease),color .3s var(--ease)} .calc-chip:hover{border-color:var(--gold)} .calc-chip[aria-pressed="true"]{border-color:var(--gold);background:var(--accent-soft);color:var(--ivory)} .calc-chip__p{font-size:.78rem;color:var(--gold-muted);font-weight:600} .calc-chip:focus-visible,.calc-seg button:focus-visible{outline:2px solid var(--gold);outline-offset:2px} .calc-result{margin-top:2rem;border:1px solid var(--line);background:var(--canvas);padding:1.7rem 1.6rem; display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap} .calc-result__nums{display:flex;align-items:baseline;gap:.9rem;flex-wrap:wrap} .calc-sum{font-family:var(--serif);font-size:clamp(2rem,3.4vw,2.7rem);font-weight:600;color:var(--gold);line-height:1} .calc-per{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ivory-soft)} .calc-empty,.calc-next{flex-basis:100%;font-size:.88rem;color:var(--ivory-dim);margin:0} .calc-result .deal-save{margin-top:0} .calc-result .btn:disabled{opacity:.45;cursor:not-allowed;pointer-events:none;transform:none} @media(max-width:640px){ .calc-seg{display:flex;width:100%} .calc-seg button{flex:1} .calc-result{flex-direction:column;align-items:stretch;text-align:left} } /* Preis-Matrix (Kurz/Mittel/Lang) — additiv zur price-row */ .price-sub{font-family:var(--sans);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-muted);font-weight:600;margin:2.6rem 0 .4rem} .price-sub:first-child{margin-top:0} .price-mhead{display:grid;grid-template-columns:1fr repeat(3,4.5rem);gap:1rem;padding:0 0 .7rem;border-bottom:1px solid var(--line);align-items:end} .price-mhead span{font-family:var(--sans);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ivory-soft);text-align:right} .price-mhead span:first-child{text-align:left} .price-mrow{display:grid;grid-template-columns:1fr repeat(3,4.5rem);gap:1rem;align-items:baseline;padding:1.05rem 0;border-bottom:1px solid var(--line-2);transition:transform .28s var(--ease),padding-left .28s var(--ease)} .price-mrow .pr-name{font-family:var(--serif);font-size:1.28rem;color:var(--ivory)} .price-mrow .pr-desc{display:block;font-family:var(--sans);font-size:.82rem;color:var(--ivory-soft);margin-top:.3rem;line-height:1.5;max-width:42ch} .price-mrow .pm-val{font-family:var(--sans);font-size:.95rem;font-weight:500;letter-spacing:.04em;color:var(--gold-muted);text-align:right} .price-mrow .pm-val.pm-na{color:var(--ivory-soft)} @media(max-width:600px){ .price-mhead,.price-mrow{grid-template-columns:1fr repeat(3,2.9rem);gap:.45rem} .price-mrow .pr-name{font-size:1.12rem} .price-mrow .pr-desc{max-width:none} .price-mrow .pm-val{font-size:.85rem} .price-mhead span{font-size:.58rem;letter-spacing:.1em} /* Preiszeilen mit Beschreibung: Preis nicht mehr rechts abschneiden */ .price-row{flex-wrap:wrap} .price-row .pr-main{flex:1 1 100%;min-width:0} .price-row .pr-desc{max-width:none} .price-row .pr-dots{display:none} .price-row .pr-price{margin-left:auto} } /* ============================================================ TEAM ============================================================ */ .team{padding:var(--section-y) 0} .team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem} .tcard{border:1px solid var(--line-2);background:var(--canvas-2);padding:0} .tcard__ph{aspect-ratio:3/4;position:relative;display:flex;align-items:center;justify-content:center;background: radial-gradient(120% 90% at 50% 30%,rgba(200,168,107,.12),transparent 60%),var(--canvas-3);overflow:hidden} .tcard__ph::after{content:"";position:absolute;inset:0;opacity:.5; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");mix-blend-mode:overlay} .tcard__mono{font-family:var(--serif);font-size:3.4rem;color:var(--gold);position:relative;z-index:2; width:96px;height:96px;border:1px solid var(--gold);border-radius:50%;display:flex;align-items:center;justify-content:center} .tcard__foto{position:absolute;bottom:1rem;left:0;right:0;text-align:center;font-size:.62rem;letter-spacing:.28em; text-transform:uppercase;color:var(--ivory-soft);z-index:2} .tcard__body{padding:1.5rem 1.4rem 1.8rem} .tcard h2{font-size:1.55rem} .tcard .role{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-muted);margin-top:.5rem} .tcard .spec{font-size:.92rem;color:var(--ivory-dim);margin-top:.9rem;line-height:1.55} .tcard__quote{font-family:var(--serif);font-style:italic;font-size:1.12rem;line-height:1.5;color:var(--ivory);margin-top:1.15rem;padding-top:1.15rem;border-top:1px solid var(--line-2)} .team-note{margin-top:2.6rem;font-size:.9rem;color:var(--ivory-soft);max-width:64ch} /* ============================================================ TESTIMONIALS ============================================================ */ .tquotes{padding:var(--section-y) 0} .tq-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem} .tq{border:1px solid var(--line-2);padding:2.4rem 2rem 2.2rem;background:var(--canvas-2);display:flex;flex-direction:column;gap:1.4rem} .tq__mark{font-family:var(--serif);font-size:3.4rem;line-height:.5;color:var(--gold);height:1.2rem} .tq__text{font-family:var(--serif);font-size:1.35rem;line-height:1.5;color:var(--ivory)} .tq__foot{margin-top:auto;display:flex;flex-direction:column;gap:.55rem} .tq__author{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ivory-dim)} /* ============================================================ CONTACT / KONTAKT ============================================================ */ .contact{padding:var(--section-y) 0} .c-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,6vw,5.5rem);align-items:start} .c-block{margin-bottom:2.6rem} .c-block .c-lbl{font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-muted);margin-bottom:.9rem;display:block} .c-block .c-big{font-family:var(--serif);font-size:1.7rem;color:var(--ivory);line-height:1.35} .c-block a.c-big:hover{color:var(--gold)} .hours{width:100%;border-collapse:collapse} /* Der Wochentag steht als . Ohne ihn endete die Trennlinie in der Zeilenmitte, und der Tagesname blieb fett, zentriert und groesser als die Uhrzeit daneben. */ .hours th,.hours td{padding:.7rem 0;border-bottom:1px solid var(--line-2);font-size:.96rem} .hours th{font-weight:400;text-align:left;color:var(--ivory-dim)} .hours td:last-child{text-align:right;color:var(--ivory);font-variant-numeric:tabular-nums} .hours tr.today th,.hours tr.today td{color:var(--gold)} .c-map{aspect-ratio:4/3;border:1px solid var(--line);width:100%;filter:grayscale(1) contrast(1.05) brightness(.78);transition:filter .6s var(--ease)} .c-map:hover{filter:grayscale(.3) contrast(1) brightness(.92)} .map-consent{display:flex;align-items:center;justify-content:center;text-align:center;background:var(--canvas-2);filter:none;padding:2rem} .map-consent__inner{max-width:36ch;display:flex;flex-direction:column;align-items:center;gap:1.1rem} .map-consent__inner p{color:var(--ivory-dim);font-size:.9rem;line-height:1.6} .mvv{margin-top:1.4rem;font-size:.88rem;color:var(--ivory-soft);display:flex;gap:.7rem;align-items:flex-start} .mvv b{color:var(--ivory-dim);font-weight:600} /* booking form */ .bform{display:grid;gap:1.2rem} .field{display:flex;flex-direction:column;gap:.55rem} .field label{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ivory-soft)} .field input,.field select,.field textarea{background:var(--canvas-2);border:1px solid var(--line);color:var(--ivory); font-family:var(--sans);font-size:1rem;padding:.95rem 1.1rem;border-radius:2px;transition:border-color .4s var(--ease)} .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--gold)} .field textarea{resize:vertical;min-height:96px} .field-row{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem} .bform__ok{display:none;text-align:center;padding:2.5rem 1rem} .bform__ok.show{display:block} .bform.hide{display:none} .bform__ok .ok-mark{width:62px;height:62px;border:1px solid var(--gold);border-radius:50%;display:flex;align-items:center;justify-content:center; margin:0 auto 1.4rem;color:var(--gold);font-size:1.6rem} .bform__ok h3{font-size:1.9rem;margin-bottom:.8rem} .bform__ok p{color:var(--ivory-dim);max-width:40ch;margin:0 auto} .bform__ok.is-fallback .ok-mark{border-color:var(--ivory-soft);color:var(--ivory-soft)} .bform__ok .ok-ways{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;margin-top:1.6rem} .bform__ok .ok-ways a{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;padding:.85rem 1.4rem; border:1px solid var(--line);color:var(--ivory);text-decoration:none;transition:border-color .3s var(--ease)} .bform__ok .ok-ways a:hover{border-color:var(--gold)} /* Kein opacity: Die Beschriftung trägt bereits --ivory-soft (55 % auf dunklem, 62 % auf hellem Grund). Eine zusätzliche Deckkraft von 60 % multipliziert sich darauf und ließ „(optional)" bei 2,81:1 landen — klar unter der Lesbarkeitsschwelle. Abgesetzt wird der Zusatz jetzt allein über Kleinschreibung und Laufweite, was in beiden Farbwelten funktioniert. */ .fld-opt{text-transform:none;letter-spacing:.04em} /* Rückmeldung zu einem einzelnen Feld. Erscheint im Formular, das dabei sichtbar bleibt — die eingetippte Nachricht darf nicht verloren gehen. Die Kennzeichnung trägt neben der Farbe eine Umrandung, damit sie nicht allein über Rot erkennbar ist. */ .form-fehler{margin:0 0 1rem;padding:.85rem 1rem;border:1px solid #E5484D;border-left-width:3px; border-radius:2px;font-size:var(--fs-kompakt);line-height:var(--lh-kompakt);color:var(--ivory)} .sec--light .form-fehler{color:var(--ivory);border-color:#C4292E} .field [aria-invalid="true"]{border-color:#E5484D} .form-note{font-size:var(--fs-klein);line-height:var(--lh-klein);color:var(--ivory-soft);margin-top:-.2rem} .form-note a{color:inherit;text-decoration:underline;text-underline-offset:3px} .bform button[type=submit][disabled]{opacity:.6;cursor:progress} /* Honeypot: für Menschen unsichtbar, für Bots ein Köder — nicht display:none, das erkennen manche Bots */ .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} /* ============================================================ CTA BAND ============================================================ */ .ctaband{position:relative;padding:clamp(5rem,12vh,9rem) 0;text-align:center;overflow:hidden;border-top:1px solid var(--line-2)} .ctaband__media{position:absolute;inset:0} .ctaband__scrim{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(20,17,15,.86),rgba(20,17,15,.78))} .ctaband .shell{position:relative;z-index:3} .ctaband h2{font-size:clamp(2.4rem,6vw,4.6rem);margin:1.6rem auto 0} .ctaband p:not(.eyebrow){margin:1.4rem auto 0;color:var(--ivory-dim);max-width:48ch} .ctaband .hero__cta{margin-top:2.6rem} /* ============================================================ FOOTER ============================================================ */ /* Die schwebende Anruf-Schaltflaeche liegt fest ueber der rechten unteren Ecke — auf JEDER Breite, nicht nur mobil. Der untere Abstand war bisher nur unter 560 px gesetzt; auf den haeufigen Laptop-Breiten zwischen rund 1000 und 1400 px lag die Schaltflaeche dadurch genau ueber dem Link zu Impressum und Bildnachweisen, der sich dort nicht mehr anklicken liess. Pflichtangaben muessen erreichbar bleiben. */ .foot{border-top:1px solid var(--line-2);padding:clamp(3.5rem,7vw,5.5rem) 0 6rem} .foot__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:2.5rem} .foot .brand b{font-size:1.7rem} .foot__about{margin-top:1.4rem;color:var(--ivory-soft);font-size:var(--fs-kompakt);max-width:34ch;line-height:var(--lh-kompakt)} .foot h2{font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase; color:var(--gold-muted);margin-bottom:1.3rem} .foot ul{list-style:none;display:flex;flex-direction:column;gap:.8rem} .foot ul a,.foot ul li{font-size:.92rem;color:var(--ivory-dim);transition:color .4s} .foot ul a:hover{color:var(--gold);cursor:pointer} .foot__bottom{margin-top:clamp(3rem,6vw,4.5rem);padding-top:1.8rem;border-top:1px solid var(--line-2); display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;font-size:.78rem;color:var(--ivory-soft)} .foot__bottom a:hover{color:var(--gold);cursor:pointer} .foot__legal{display:flex;gap:1.6rem;flex-wrap:wrap} .foot__social{display:flex;align-items:center;gap:.9rem} .foot__ig{display:inline-flex;align-items:center;gap:.55rem;color:var(--ivory-dim);letter-spacing:.04em} .foot__ig svg{width:30px;height:30px;padding:5px;border:1px solid var(--line);border-radius:8px;transition:border-color .4s var(--ease),color .4s var(--ease),background .4s var(--ease)} .foot__ig:hover{color:var(--gold)} .foot__ig:hover svg{border-color:var(--gold);color:var(--gold)} /* ============================================================ WHATSAPP FLOATING BUTTON ============================================================ */ .wa-fab{position:fixed;right:clamp(1rem,3vw,2.2rem);bottom:clamp(1rem,3vw,2.2rem);z-index:38; display:inline-flex;align-items:center;gap:.6rem;background:var(--accentD,#C8A86B);color:#141110; padding:.9rem 1.25rem .9rem 1rem;border-radius:100px;box-shadow:0 12px 34px rgba(0,0,0,.34); font-family:var(--sans);font-size:.82rem;font-weight:600;letter-spacing:.03em; transition:transform .4s var(--ease),box-shadow .4s var(--ease)} .wa-fab:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(200,168,107,.42)} .wa-fab svg{flex:none;width:26px;height:26px} .wa-inline{display:inline-flex;align-items:center;gap:.6rem;background:var(--accentD,#C8A86B);color:#141110; padding:1.05rem 1.9rem;border-radius:2px;font-family:var(--sans);font-size:.76rem;font-weight:600; letter-spacing:.16em;text-transform:uppercase;transition:transform .4s var(--ease),filter .4s var(--ease)} .wa-inline:hover{transform:translateY(-2px);filter:brightness(1.05)} .wa-inline svg{width:20px;height:20px;flex:none} @media(max-width:560px){ .wa-fab__label{display:none} .wa-fab{padding:1rem;border-radius:50%} } /* ============================================================ MODAL (booking) & LIGHTBOX ============================================================ */ .modal{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:1.25rem; opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility .45s} .modal.open{opacity:1;visibility:visible} .modal__bg{position:absolute;inset:0;background:rgba(8,7,6,.78);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)} .modal__box{position:relative;z-index:2;background:var(--canvas);border:1px solid var(--line);width:min(560px,100%); max-height:92vh;overflow:auto;padding:clamp(2rem,4vw,3.2rem);transform:translateY(18px);transition:transform .5s var(--ease)} .modal.open .modal__box{transform:none} .modal__close{position:absolute;top:1.1rem;right:1.1rem;background:none;border:none;color:var(--ivory-dim);cursor:pointer; font-size:1.4rem;width:40px;height:40px;display:flex;align-items:center;justify-content:center;transition:color .3s} .modal__close:hover{color:var(--gold)} .modal h3.m-title{font-size:2rem;margin-bottom:.5rem} .modal .m-sub{color:var(--ivory-dim);font-size:.95rem;margin-bottom:1.6rem} .m-or{display:flex;align-items:center;gap:1rem;margin:1.3rem 0;color:var(--ivory-soft);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase} .m-or::before,.m-or::after{content:"";flex:1;height:1px;background:var(--line-2)} .lightbox{position:fixed;inset:0;z-index:70;display:flex;align-items:center;justify-content:center; background:rgba(9,8,7,.94);opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility .45s} .lightbox.open{opacity:1;visibility:visible} .lightbox img{max-width:88vw;max-height:84vh;object-fit:contain;border:1px solid var(--line)} .lb-btn{position:absolute;background:none;border:1px solid var(--line);color:var(--ivory);width:54px;height:54px;cursor:pointer; font-size:1.3rem;display:flex;align-items:center;justify-content:center;transition:border-color .3s,color .3s} .lb-btn:hover{border-color:var(--gold);color:var(--gold)} .lb-prev{left:clamp(1rem,4vw,3rem)}.lb-next{right:clamp(1rem,4vw,3rem)} .lb-close{top:clamp(1rem,3vw,2rem);right:clamp(1rem,4vw,3rem)} .lb-count{position:absolute;bottom:clamp(1.2rem,4vw,2.4rem);left:50%;transform:translateX(-50%);font-size:.78rem; letter-spacing:.2em;color:var(--ivory-soft)} /* ============================================================ HOME — SPEZIALGEBIETE TEASER (two color worlds) ============================================================ */ .spec2{display:grid;grid-template-columns:1fr 1fr;gap:1.3rem} .spec3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem} .spec3 .speccard .media{aspect-ratio:4/5} .speccard{position:relative;border:1px solid var(--line-2);overflow:hidden;cursor:pointer;display:flex;flex-direction:column; background:var(--canvas-2);transition:border-color .5s var(--ease),transform .5s var(--ease)} .speccard:hover{transform:translateY(-3px)} .speccard .media{aspect-ratio:16/10} .speccard:hover .media img{transform:scale(1.05)} .speccard__body{padding:1.9rem 1.8rem 2rem;display:flex;flex-direction:column;gap:.7rem} .speccard__kick{font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;font-weight:600} .speccard h3{font-size:1.8rem} .speccard p{color:var(--ivory-dim);font-size:var(--fs-kompakt);line-height:var(--lh-kompakt)} .speccard__link{margin-top:.5rem;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;display:inline-flex;gap:.5rem; align-items:center;transition:gap .4s var(--ease)} .speccard:hover .speccard__link{gap:.95rem} .speccard::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;z-index:5} .spec--rose::before{background:linear-gradient(90deg,#FF4D7E,#FF7E6B,#FFB347)} .spec--rose:hover{border-color:#FF7E6B} .spec--rose .speccard__kick,.spec--rose .speccard__link{color:#FF9078} .spec--sun::before{background:linear-gradient(90deg,#FFD15C,#F5A623,#E8870C)} .spec--sun:hover{border-color:#F5A623} .spec--sun .speccard__kick,.spec--sun .speccard__link{color:#F5C06A} .spec--gold::before{background:linear-gradient(90deg,#E8C87A,#C8A86B,#B8945A)} .spec--gold:hover{border-color:#C8A86B} .spec--gold .speccard__kick,.spec--gold .speccard__link{color:#C8A86B} /* ============================================================ THEMED SPECIALTY PAGES — accent layer only; dark canvas kept Kosmetik = pink-orange · Laser = sun-yellow ============================================================ */ /* accentL trägt die Preise und Auszeichnungen in den hellen Sektionen. Die früheren Töne (#D63E63 / #B8730A) kamen dort auf 4,1 bzw. 3,5:1 und blieben damit unter der Lesbarkeitsschwelle. Die dunkleren Fassungen halten die jeweilige Farbwelt — Pink für Kosmetik, Bernstein für die Haarentfernung — und erreichen 5,0 bis 5,7:1. accentD (dunkle Sektionen) bleibt unverändert. */ #page-kosmetik{--gold:#FF8E72;--gold-muted:#FF8E72;--accentD:#FF8E72;--accentL:#B82B4E;--accent-grad:linear-gradient(120deg,#FF4D7E,#FF7E6B,#FFB347);--accent-soft:rgba(255,138,101,.14)} #page-laser{--gold:#F5C06A;--gold-muted:#F5C06A;--accentD:#F5C06A;--accentL:#8A5507;--accent-grad:linear-gradient(135deg,#FFD15C,#F5A623,#E8870C);--accent-soft:rgba(255,196,84,.14)} /* Permanent Make-up = Rosé/Weinrot (Entwicklerbriefing V1.1). accentD #D98784 liegt auf dunklem Grund bei 6,9:1, accentL #7D3B52 auf hellem Grund bei 7,3:1 — beides deutlich über der Schwelle. Der Verlauf läuft bewusst in Champagner aus statt ins Weinrot: Die Schrift auf .btn--grad ist dunkel und wäre auf #7D3B52 nicht mehr lesbar (2,3:1). */ #page-pmu{--gold:#D98784;--gold-muted:#D98784;--accentD:#D98784;--accentL:#7D3B52;--accent-grad:linear-gradient(135deg,#EFB5A2,#D98784,#E9C9A0);--accent-soft:rgba(217,135,132,.14)} /* hero glow orb (signature: Sunrise Glow / Rising Sun) */ .glow-orb{position:absolute;z-index:2;width:min(820px,124vw);aspect-ratio:1;left:50%;top:40%;transform:translate(-50%,-50%); border-radius:50%;filter:blur(48px);mix-blend-mode:screen;pointer-events:none} #page-kosmetik .glow-orb{background:radial-gradient(circle,rgba(255,122,107,.34) 0%,rgba(255,154,90,.20) 28%,rgba(255,92,138,.10) 50%,transparent 72%)} #page-laser .glow-orb{background:radial-gradient(circle,rgba(255,209,92,.42) 0%,rgba(255,194,71,.26) 22%,rgba(245,166,35,.12) 44%,transparent 70%)} #page-laser .glow-orb::after{content:"";position:absolute;left:50%;top:50%;width:150px;height:150px;transform:translate(-50%,-50%); border-radius:50%;background:radial-gradient(circle,rgba(255,224,150,.5) 0%,transparent 70%);filter:blur(18px)} /* gradient display word + gradient CTA */ .gtext{background:var(--accent-grad);-webkit-background-clip:text;background-clip:text; color:transparent;-webkit-text-fill-color:transparent;font-style:italic} .btn--grad{background:var(--accent-grad);color:#14110F;border:none} .btn--grad::after{display:none} .btn--grad:hover{transform:translateY(-2px);filter:brightness(1.06)} /* benefit grid */ .bgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.3rem} .bgrid.cols3{grid-template-columns:repeat(3,1fr)} .bcard{border:1px solid var(--line-2);background:var(--canvas-2);padding:2.1rem 1.9rem;display:flex;flex-direction:column;gap:.85rem; transition:border-color .5s var(--ease),background .5s var(--ease)} .bcard:hover{border-color:var(--gold);background:linear-gradient(var(--accent-soft),var(--accent-soft)),var(--canvas-2)} .bcard .bnum{font-family:var(--sans);font-size:.72rem;letter-spacing:.2em;color:var(--gold-muted);font-weight:600} .bcard h3{font-size:1.45rem} .bcard p{color:var(--ivory-dim);font-size:var(--fs-kompakt);line-height:var(--lh-kompakt)} /* how-it-works steps */ .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1.6rem} .step{display:flex;flex-direction:column;gap:.9rem} .step__n{font-family:var(--serif);font-size:2.8rem;line-height:1;background:var(--accent-grad);-webkit-background-clip:text;background-clip:text;color:transparent} .step h3{font-family:var(--sans);font-size:1.06rem;font-weight:600;letter-spacing:-.01em;line-height:1.32} .step p{color:var(--ivory-dim);font-size:var(--fs-kompakt);line-height:var(--lh-kompakt)} /* treatment-area chips */ .areas{display:flex;flex-wrap:wrap;gap:.8rem;max-width:920px} .area-chip{border:1px solid var(--line);border-radius:2px;padding:.85rem 1.4rem;font-size:.92rem;color:var(--ivory-dim); transition:border-color .4s var(--ease),color .4s var(--ease)} .area-chip:hover{border-color:var(--gold);color:var(--ivory)} /* trust stats — Werte bold in Inter (Sans), solides Gold; Gradient lebt im Akzent-Tick über dem Wert weiter */ .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-2);border-block:1px solid var(--line-2)} /* Dreispaltige Variante — ohne sie bliebe bei drei Fakten die vierte Spalte als leere Kachel stehen. Steht bewusst VOR den Medienabfragen weiter unten, damit deren Zwei- und Einspalter bei gleicher Spezifitaet gewinnen und die Leiste mobil normal umbricht. */ .stats--3{grid-template-columns:repeat(3,1fr)} .stat{background:var(--canvas);padding:2.6rem 1.25rem;text-align:center;display:flex;flex-direction:column;gap:.55rem} .stat::before{content:"";width:1.5rem;height:2px;margin:0 auto .4rem;background:var(--accent-grad);border-radius:1px} .stat__n{font-family:var(--sans);font-weight:700;font-size:clamp(1.25rem,1vw + 1rem,1.5rem);line-height:1.1;letter-spacing:.02em;color:var(--gold);font-variant-numeric:lining-nums tabular-nums;text-wrap:balance} .stat__l{font-weight:500;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ivory-soft)} /* FAQ accordion (native details) */ .faq-list{max-width:880px;margin-top:.5rem} .faq-item{border-bottom:1px solid var(--line-2)} .faq-item summary{list-style:none;cursor:pointer;padding:1.7rem 0;display:flex;justify-content:space-between;gap:1.5rem; font-family:var(--serif);font-size:clamp(1.25rem,2.2vw,1.6rem);color:var(--ivory);transition:color .4s var(--ease)} .faq-item summary::-webkit-details-marker{display:none} .faq-item summary:hover{color:var(--gold)} .faq-item .q-ico{flex:none;font-family:var(--sans);font-weight:400;font-size:1.5rem;color:var(--gold-muted);line-height:1; transition:transform .4s var(--ease)} .faq-item[open] .q-ico{transform:rotate(45deg)} .faq-a{padding:0 0 1.8rem;color:var(--ivory-dim);max-width:74ch;line-height:var(--lh-koerper)} /* page intro/statement glow wrapper + fine note */ .glow-wrap{position:relative;overflow:hidden} .glow-soft{position:absolute;left:50%;top:50%;width:760px;height:520px;transform:translate(-50%,-50%);pointer-events:none;z-index:0; filter:blur(50px);mix-blend-mode:screen} #page-kosmetik .glow-soft{background:radial-gradient(circle,rgba(255,122,107,.14),transparent 65%)} #page-laser .glow-soft{background:radial-gradient(circle,rgba(255,194,71,.16),transparent 65%)} .glow-wrap .shell{position:relative;z-index:1} .finenote{margin-top:2.6rem;font-size:var(--fs-klein);color:var(--ivory-soft);max-width:74ch;line-height:var(--lh-klein)} /* ---------- wiederkehrende Textbausteine ---------- Diese Muster standen vorher als Inline-Angaben in den Seiten und liefen dabei auseinander. Als Klasse sind sie an einer Stelle gepflegt. */ /* Aufzählung ohne Punkte — Faktenlisten im Hero und in Textspalten. */ .faktenliste{list-style:none;margin:0;padding:0;display:grid;gap:.55rem; font-family:var(--sans);font-size:var(--fs-kompakt);line-height:var(--lh-kompakt);color:var(--ivory-dim)} .faktenliste b{color:var(--ivory);font-weight:600} /* Einleitungsabsatz direkt unter einem Sektionskopf. Der negative obere Abstand schließt die Lücke zur Überschrift. */ .sec-intro{max-width:72ch;margin:-1.5rem 0 clamp(2.2rem,4vw,3.2rem); color:var(--ivory-dim);line-height:var(--lh-koerper)} .sec-intro--breit{max-width:74ch;display:grid;gap:.9rem} .sec-intro b{color:var(--ivory);font-weight:600} /* Kleine Blocküberschrift innerhalb einer Textspalte. Übernimmt bewusst die Werte von .step h3 — beide erfüllen dieselbe Rolle, vorher trugen sie 1.05 / 1.06 / 1.15rem in drei verschiedenen Schriftarten. */ .block-titel{font-family:var(--sans);font-size:1.06rem;font-weight:600; letter-spacing:-.01em;line-height:1.32;margin:0 0 .9rem} /* Anschrift und Erreichbarkeit als Textblock. */ .kontaktzeile{line-height:var(--lh-koerper);margin:0 0 1.4rem} .kontaktzeile--weit{line-height:2;margin:0 0 1.8rem} /* Zusatz am großen Preis („inkl. Nachbehandlung", „/ Sitzung"). */ .deal-new small{font-size:.42em;font-weight:400} /* Die E-Mail-Adresse ist länger als die übrigen Kontaktzeilen und bekommt deshalb eine Stufe weniger, damit sie auf schmalen Geräten nicht bricht. */ .c-block .c-big--mail{font-size:1.25rem;overflow-wrap:anywhere} /* ---- Aktions-/Deal-Komponenten (Laser-Kampagne) ---- */ /* Sonnengelb-Akzentwelt auch außerhalb der Laser-Seite (z.B. Startseiten-Band) */ .acc-sun{--gold:#F5C06A;--gold-muted:#F5C06A;--accentD:#F5C06A;--accentL:#B8730A;--accent-grad:linear-gradient(135deg,#FFD15C,#F5A623,#E8870C);--accent-soft:rgba(255,196,84,.14)} /* Puder-Rosé-Zweitakzent — NUR für das Zonenpakete-Modul der Laser-Seite. Rollenregel: Gold = Marke & Buchung, Rosé = Paket-/Sparprogramm. Chroma bewusst gedeckt halten (S ≤ 55 %, kein Bonbon-/Korallenrosa — Koralle gehört der Kosmetik-Welt); Gradient läuft in Champagner aus (Rosé-Gold-Brücke zum Sonnengold). accentL #9E5260 = 5,48:1 auf Weiß (WCAG AA). */ .acc-rose{--gold:#E8B4B8;--gold-muted:#E8B4B8;--accentD:#E8B4B8;--accentL:#9E5260;--accent-grad:linear-gradient(135deg,#F6D2D6,#E8B4B8,#E9C9A0);--accent-soft:rgba(232,180,184,.14)} /* Volle Deal-Sektion (Laser-Seite) */ .deal{position:relative;overflow:hidden;background:var(--canvas-2);border-block:1px solid var(--line-2);padding-block:clamp(4.5rem,9vw,7.5rem)} .deal .glow-soft{background:radial-gradient(circle,rgba(255,194,71,.18),transparent 65%)} .deal .shell{position:relative;z-index:1} .deal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:2rem;margin-bottom:clamp(2.5rem,5vw,4rem)} .deal-badge{flex:none;width:clamp(88px,11vw,116px);height:clamp(88px,11vw,116px);border-radius:50%; display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1; background:var(--accent-grad);color:#14110F;box-shadow:0 10px 34px rgba(245,166,35,.24);transform:rotate(6deg)} .deal-badge b{font-family:var(--serif);font-size:clamp(1.5rem,2.6vw,2rem);font-weight:600} .deal-badge span{font-family:var(--sans);font-size:.56rem;letter-spacing:.18em;text-transform:uppercase;margin-top:.25em} .deal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem} .deal-card{position:relative;border:1px solid var(--line);background:var(--canvas);padding:2.2rem 1.9rem; display:flex;flex-direction:column;gap:.7rem;transition:border-color .5s var(--ease),transform .5s var(--ease)} .deal-card:hover{border-color:var(--gold);transform:translateY(-3px)} .deal-card__kick{font-family:var(--sans);font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-muted);font-weight:600} .deal-card__area{font-family:var(--serif);font-size:1.55rem;font-weight:500;line-height:1.2} .deal-card__sub{font-size:var(--fs-kompakt);color:var(--ivory-dim);line-height:var(--lh-kompakt);min-height:2.6em} .deal-card__prices{margin-top:auto;padding-top:1.3rem;display:flex;align-items:baseline;gap:.9rem;flex-wrap:wrap;border-top:1px solid var(--line-2)} .deal-old{font-size:.9rem;color:var(--ivory-dim);text-decoration:line-through;text-decoration-color:rgba(200,168,107,.5);text-decoration-thickness:1px} .deal-new{font-family:var(--serif);font-size:clamp(2rem,3.4vw,2.7rem);font-weight:600; background:var(--accent-grad);-webkit-background-clip:text;background-clip:text;color:transparent} .deal-save{display:inline-flex;align-items:center;gap:.45rem;margin-top:1.1rem;padding:.5em 1.05em;border-radius:100px;background:var(--accent-soft);border:1px solid var(--gold);font-family:var(--sans);font-size:.8rem;font-weight:700;letter-spacing:.04em;color:var(--gold-muted);text-transform:uppercase} .deal-save::before{content:"✓";font-size:.95em;line-height:1} .deal-terms{margin-top:2.4rem;font-size:.82rem;color:var(--ivory-soft);line-height:1.6} /* München-Preisvergleich (Laser-Seite) */ .cmp-lead{max-width:66ch;color:var(--ivory-dim);line-height:var(--lh-koerper);margin:-1.2rem 0 clamp(2.2rem,4vw,3.2rem)} .cmp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem} .cmp-card{border:1px solid var(--line);background:var(--canvas-2);padding:2.1rem 1.8rem;display:flex;flex-direction:column;gap:.55rem;transition:border-color .5s var(--ease),transform .5s var(--ease)} .cmp-card:hover{border-color:var(--gold);transform:translateY(-3px)} .cmp-mkt{font-size:.9rem;color:var(--ivory-dim);line-height:1.5} .cmp-card .deal-new{font-size:clamp(1.9rem,3.2vw,2.5rem)} .cmp-card .deal-save{margin-top:auto;align-self:flex-start} .cmp-why{margin-top:clamp(2.5rem,5vw,3.5rem);border:1px solid var(--line-2);background:var(--canvas-2);padding:clamp(1.8rem,4vw,2.6rem)} .cmp-why h3{font-family:var(--serif);font-size:clamp(1.45rem,2.4vw,1.8rem);margin-bottom:1.4rem} .cmp-why ul{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;padding:0;margin:0} .cmp-why li{font-size:.95rem;color:var(--ivory-dim);line-height:1.65} .cmp-why li b{display:block;color:var(--ivory);font-weight:600;margin-bottom:.4rem;font-size:1rem} .cmp-note{margin-top:2.2rem;font-size:var(--fs-klein);color:var(--ivory-soft);line-height:var(--lh-klein);max-width:84ch} @media(max-width:900px){.cmp-grid{grid-template-columns:1fr}.cmp-why ul{grid-template-columns:1fr}} /* Kompaktes Angebots-Band (Startseite) */ .dealband{position:relative;overflow:hidden;background:var(--canvas-2);border-block:1px solid var(--line-2);padding-block:clamp(3rem,6vw,4.75rem)} .dealband .glow-soft{background:radial-gradient(circle,rgba(255,194,71,.18),transparent 62%)} .dealband__inner{position:relative;z-index:1;display:flex;align-items:center;gap:clamp(1.6rem,4vw,3.2rem);flex-wrap:wrap} .dealband__text{flex:1 1 340px;min-width:0} .dealband__text .eyebrow{margin-bottom:1rem} .dealband__text h2{font-size:clamp(1.8rem,3.6vw,2.9rem);line-height:1.1} .dealband__text p:not(.eyebrow){margin-top:1rem;color:var(--ivory-dim);max-width:60ch} .dealband .deal-badge{flex:none} .dealband .btn{flex:none} @media(max-width:640px){ .deal-head{flex-direction:column-reverse;align-items:flex-start} .dealband__inner{justify-content:center;text-align:center} .dealband__text{flex-basis:100%} .dealband .btn{width:100%} } /* legal pages */ .legal{max-width:840px} .legal h2{font-family:var(--serif);font-size:clamp(1.35rem,2.4vw,1.7rem);margin:2.6rem 0 .8rem;color:var(--ivory)} .legal h2:first-child{margin-top:0} .legal p{color:var(--ivory-dim);margin-bottom:1rem;line-height:var(--lh-koerper);max-width:74ch} .legal a{color:var(--gold);text-decoration:underline;text-underline-offset:3px} .legal .ph{display:inline-block;background:var(--accent-soft);color:var(--gold-muted);padding:.05em .5em;border-radius:2px;font-size:.92em} .legal .note{margin-top:2.6rem;padding:1.3rem 1.5rem;border:1px solid var(--line);border-radius:2px;font-size:.9rem;color:var(--ivory-soft)} /* ============================================================ RESPONSIVE ============================================================ */ @media(max-width:1440px){ .head__phone{display:none} } @media(max-width:1080px){ .trust .shell{grid-template-columns:repeat(2,1fr)} .svc-grid,.team-grid{grid-template-columns:repeat(2,1fr)} .masonry{columns:2} .steps{grid-template-columns:repeat(2,1fr)} .stats{grid-template-columns:repeat(2,1fr)} } @media(max-width:1000px){ .nav,.head__phone{display:none} .burger{display:flex} .split__grid,.split__grid.flip,.price-cols,.c-grid{grid-template-columns:1fr} .split__grid.flip .split__media{order:0} .tq-grid,.gteaser,.bgrid,.bgrid.cols3,.spec2,.spec3,.steps,.deal-grid{grid-template-columns:1fr} .foot__grid{grid-template-columns:1fr 1fr} .field-row{grid-template-columns:1fr} .hero__scroll{display:none} } @media(max-width:560px){ body{font-size:16px} .trust .shell{grid-template-columns:1fr} .svc-grid,.team-grid,.masonry{grid-template-columns:1fr;columns:1} .foot__grid{grid-template-columns:1fr} .stats{grid-template-columns:1fr} .btn{width:100%} .hero__cta{flex-direction:column} .foot{padding-bottom:6rem} } @media(prefers-reduced-motion:reduce){ *{animation:none!important} .reveal{opacity:1!important;transform:none!important} .rule span{transform:scaleX(1)!important} html{scroll-behavior:auto} } /* ===================================================================== KORREKTUREN — 27.07.2026 ===================================================================== Nachträglich ergänzt, um Überläufe zu beheben, die bei der Prüfung an echten Geräteauflösungen aufgefallen sind. Der Block steht am Ende, damit die gewachsenen Regeln darüber unangetastet bleiben und jede Änderung nachvollziehbar ist. Am Erscheinungsbild ändert sich dadurch nichts — es geht nur um Breiten, die vorher über den Bildschirmrand hinausliefen. ===================================================================== */ /* --- Vergleichskarten: Überlauf ab etwa 1000 px -------------------- Die drei Spalten sind je 1fr breit. Rasterelemente bekommen standardmäßig min-width:auto und können deshalb nicht unter ihre Inhaltsbreite schrumpfen — bei 1024 px lief die dritte Karte 83 px über den Rand hinaus. Betraf auch die bisherige Website. */ .cmp-card, .pkg-card, .deal-card, .bcard { min-width: 0; } /* --- Kopfleiste auf sehr schmalen Geräten ------------------------- Unter etwa 380 px standen Telefonnummer, Terminschaltfläche und Menüknopf nebeneinander breiter als der Bildschirm. Die Nummer entfällt dort; sie ist im Menü und im Fußbereich weiterhin erreichbar, der Anruf-Weg geht also nicht verloren. */ @media (max-width: 380px) { .head__cta { gap: .6rem; } .head__phone { display: none; } .head__bar { gap: .5rem; } } /* --- Leuchtflächen dürfen nicht über den Rand hinauswirken -------- Die weichen Farbverläufe sind bewusst größer als ihr Container. Ohne Begrenzung erzeugen sie auf schmalen Geräten aber eine waagerechte Bildlaufleiste. */ .page, .glow-wrap, .hero, .statement { overflow-x: clip; } /* Ältere Browser kennen clip noch nicht. */ @supports not (overflow-x: clip) { .page, .glow-wrap, .hero, .statement { overflow-x: hidden; } } /* --- Darstellungsfehler an mittleren Breiten ---------------------- Bei der Prüfung an echten Auflösungen gemessen. Die Ursachen lagen alle in fehlendem min-width:0 — Raster- und Flex-Elemente können sonst nicht unter ihre Inhaltsbreite schrumpfen. */ /* Auswahlfeld im Buchungsfenster: Die längste Option ("Sommer-Aktion: Ganzkörper Classic …") erzwang 525 px und riss das Formular auf jedem Telefon auseinander. */ .field, .field-row > .field { min-width: 0; } .field select, .field input, .field textarea { max-width: 100%; } /* Preiszeilen: Zwischen 861 und 1600 px schob der Preis der linken Spalte sich in den Text der rechten. */ .price-row { flex-wrap: wrap; } .price-row .pr-name, .price-row .pr-main { flex: 1 1 auto; min-width: 0; } /* Schaltflächen dürfen auf schmalen Geräten umbrechen. Zuvor bestimmte "Kostenlose Beratung vereinbaren" mit 367 px die Spaltenbreite und schnitt darunter den gesamten Textblock ab. */ @media (max-width: 560px) { .btn, .wa-inline { white-space: normal; } } /* Menüknopf darf nicht schrumpfen — er lag bei 33,5 statt 44 px und ist auf dem Telefon das einzige Navigationselement. */ .burger { flex: none; } /* Bildkacheln der Galerie: feste Seitenverhältnisse gegen den Layoutsprung beim Nachladen. */ .masonry .gitem .media { aspect-ratio: 3 / 4; } /* ===================================================================== KORREKTUREN — 28.07.2026 ===================================================================== Aus der Vollprüfung (Mobil 320–430 px, Desktop 1024–1920 px, Tastaturbedienung, Kontrastmessung aller Textknoten). Der Block steht am Ende, damit die gewachsenen Regeln darüber unangetastet bleiben. ===================================================================== */ /* --- Lesbarkeit der schwebenden Schaltfläche ---------------------- Sie führte bis 28.07.2026 zu WhatsApp und trug weiße Schrift auf Markengrün — nur 1,98:1. Jetzt ruft sie an und trägt dunkle Schrift auf Gold. Die Farbwerte stehen oben bei .wa-fab. */ .wa-fab, .wa-inline { color: #0A2E18; } .wa-fab svg, .wa-inline svg { color: #0A2E18; } /* --- Spezialkarten auf hellem Grund ------------------------------- Die Akzenttöne sind für dunkle Sektionen gemacht (dort 8–11:1). Auf der hellen Leistungsseite kamen sie auf 2,2:1. Dort daher gedeckte Varianten derselben Farbfamilie. */ .sec--light .spec--rose .speccard__kick, .sec--light .spec--rose .speccard__link { color: #B03A0A; } .sec--light .spec--sun .speccard__kick, .sec--light .spec--sun .speccard__link { color: #7C5E1B; } .sec--light .spec--gold .speccard__kick, .sec--light .spec--gold .speccard__link { color: #745823; } /* --- Mobilmenü im Querformat -------------------------------------- Sieben Menüpunkte à 58 px plus Fußzeile brauchen mehr Höhe, als ein quer gehaltenes Telefon bietet. Ohne Bildlauf waren die unteren Punkte — darunter „Kontakt" — schlicht nicht erreichbar. */ .mnav { overflow-y: auto; -webkit-overflow-scrolling: touch; padding-block: 5.5rem 2rem; } @media (max-height: 560px) { .mnav { justify-content: flex-start; } .mnav a { padding-block: .75rem; } } /* --- Telefonnummer in der Kopfleiste ------------------------------ Sie verschwand bereits ab 1440 px. Zwischen 1200 und 1440 px ist jedoch Platz für Menü, Rufnummer und Schaltfläche — nachgemessen. Darunter wird es eng (bei 1024 px lief die Zeile 113 px über), dort bleibt sie deshalb ausgeblendet. Für einen Salon ist die Rufnummer der wichtigste Weg zum Termin, sie steht jetzt auf jedem Laptop. */ @media (min-width: 1200px) { .head__phone { display: inline-block; } } /* --- Preiszeilen auf schmalen Geräten ----------------------------- Die Korrektur vom 27.07. setzte pr-main auf "1 1 auto" und hob damit die ältere Mobilregel ("1 1 100 %") auf, weil beide gleich stark sind und die spätere gewinnt. Dadurch stand der Preis wieder neben dem Namen statt darunter. */ @media (max-width: 600px) { .price-row .pr-main { flex: 1 1 100%; } } /* --- Bewegung wirklich reduzieren --------------------------------- Bisher wurden nur Keyframe-Animationen abgeschaltet. Die weichen Übergänge und der Zoom auf Bildern liefen weiter. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } .masonry .gitem:hover img, .gteaser .gitem:hover img, .media img { transform: none !important; } } /* --- Wortmarke nicht umbrechen ------------------------------------ „La Coiffeur" brach auf jedem gängigen Telefon zweizeilig um und drückte die Kopfleiste auseinander. */ .brand b { white-space: nowrap; } /* Zwischen 1000 und 1200 px stehen sieben Menüpunkte, die Wortmarke und die Terminschaltfläche nebeneinander. Weil die Wortmarke jetzt nicht mehr umbricht, wird es dort um wenige Pixel zu eng — die Abstände rücken deshalb in diesem Fenster zusammen. */ @media (min-width: 1001px) and (max-width: 1200px) { .head__bar { gap: 1.1rem; } .nav { gap: 1rem; } .nav a { font-size: .7rem; letter-spacing: .08em; } .head__cta { gap: .9rem; } } @media (max-width: 430px) { .brand b { font-size: 1.16rem; letter-spacing: .1em; } .brand small { font-size: .5rem; letter-spacing: .28em; } } @media (max-width: 350px) { .brand b { font-size: 1rem; letter-spacing: .06em; } .brand small { letter-spacing: .2em; } .head__bar { gap: .4rem; } .head__cta .btn { padding: .8rem 1rem; font-size: .68rem; } } /* --- Wirkungslose Bildabdeckung entfernen ------------------------- Die Fläche liegt mit z-index 4 über jedem Galeriebild, ist aber in beiden Zuständen vollständig durchsichtig — ein Rest der früheren Hover-Abdunklung, die bewusst entfernt wurde. */ .masonry .gitem::before { content: none; } /* Nicht ladbares Bild: Fläche bleibt erhalten, Verlauf tritt an die Stelle. Besser eine ruhige Fläche als ein zusammenfallendes Layout. */ .media--fehlt { background: var(--fallback); } .media img.bild-fehlt { opacity: 0 !important; } /* ===================================================================== KORREKTUREN — 29.07.2026 (Textfassung V2.1) ===================================================================== --- Öffnungszeiten-Status überlappte die Schaltflächen -------------- Die neue Überschrift im ersten Bildschirm ist deutlich länger als die frühere („Friseur, Kosmetik und dauerhafte Haarentfernung in München-Neuperlach" statt „Ihr Salon für Haar & Schönheit"). Sie braucht auf dem Telefon vier bis fünf Zeilen statt drei und schiebt die Schaltflächen so weit nach unten, dass sie unter dem absolut gesetzten Status und dem Scroll-Hinweis lagen — gemessen bei 320, 360, 375, 390, 430 und 1024 px. Der Innenbereich hält den Streifen jetzt frei. */ .hero__inner { padding-bottom: 5.5rem; } @media (max-width: 560px) { /* Auf schmalen Geräten stehen die Schaltflächen untereinander und brauchen zusätzlich Luft nach unten. */ .hero__inner { padding-bottom: 6.5rem; } } /* --- Lange Wörter in Überschriften sauber trennen ------------------ „Gesichtsbehandlungen" ist 20 Zeichen lang und passte weder auf dem Telefon noch ab 1280 px in eine Zeile. Ohne Trennregel brach der Browser mitten im Wort um — „Gesichtsbehandlun / gen", ohne Strich. Zwei Ursachen kamen zusammen: 1. hyphens:auto war nur für .subhero h1 gesetzt, nicht für .hero h1. 2. text-wrap:balance (aus der Grundregel für alle Überschriften) gleicht die Zeilenlängen an und macht die Zeile dadurch schmaler als den Container — ein langes Wort passt dann selbst dort nicht mehr hinein, wo eigentlich Platz wäre. Jetzt trennt der Browser mit Strich an einer erlaubten Stelle; der harte Umbruch bleibt nur als letzte Reserve bestehen. Zusätzlich wurde die Schriftgröße der Überschriften von 8vw auf 5,6vw zurückgenommen (Obergrenze 6,2rem auf 5rem). Die neuen Überschriften sind deutlich länger als die früheren — bei der alten Größe brauchte „Gesichtsbehandlungen" allein mehr Platz, als eine Zeile hergibt. Nachgerechnet: Das Wort ist rund das Neunfache der Schriftgröße breit; bei 5,6vw passt es von 320 bis 1920 px in eine Zeile, sodass die Trennung gar nicht erst greifen muss. */ .hero h1, .subhero h1 { /* Keine automatische Silbentrennung: Sie zerlegte „Gesichtsbehandlungen" auch dann, wenn das Wort längst in eine Zeile gepasst hätte — der Browser trennt, sobald die ZEILE voll ist, nicht erst wenn das WORT nicht mehr passt. Da die Schriftgröße oben so bemessen ist, dass das längste Wort von 320 bis 1920 px hineinpasst, rutscht es jetzt geschlossen in die nächste Zeile. */ hyphens: manual; -webkit-hyphens: manual; text-wrap: pretty; } /* --- Lange Fachwörter in kleineren Überschriften ------------------- „Wimpernkranzverdichtung" und „Umsatzsteuer-Identifikationsnummer" passen in schmale Karten und Spalten nicht in eine Zeile. Anders als in der großen Überschrift ist eine Trennung mit Strich hier richtig: Der Text steht im Fließtext-Zusammenhang, und ein Trennstrich liest sich besser als ein Wort, das an beliebiger Stelle abreißt. */ h2, h3, h4 { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; } /* --- Preiszeile führt direkt zur Anfrage -------------------------- Wer den Preis gelesen hat, ist im Entscheidungsmoment. Die Zeile ist deshalb anklickbar und öffnet das Buchungsfenster mit der passenden Leistung. Der Hinweis sitzt in der Punktlinie zwischen Name und Preis — dort ist ohnehin nur Dekoration. Ein erster Entwurf setzte ihn an den rechten Rand; dort verdeckte er beim Zeigen den Preis, also genau die Information, wegen der jemand hinsieht. */ [data-buchen] { cursor: pointer; } [data-buchen] .pr-dots { position: relative; } [data-buchen] .pr-dots::after { content: "Termin anfragen →"; position: absolute; right: .9rem; bottom: -.55em; padding: 0 .5rem; background: var(--canvas); font-family: var(--sans); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; color: var(--gold-muted); opacity: 0; transition: opacity .28s var(--ease); pointer-events: none; } [data-buchen]:hover .pr-dots::after, [data-buchen]:focus-visible .pr-dots::after { opacity: 1; } [data-buchen]:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; } /* Ohne Zeigegerät gibt es kein Überfahren — dort bliebe der Hinweis unsichtbar. Die Zeile hebt sich beim Antippen ohnehin hervor, und der erste Fingertipp löst genau diesen Zustand aus, erst der zweite den Klick. Das ist Rückmeldung genug. */ @media (hover: none) { [data-buchen] .pr-dots::after { content: none; } } /* Sichtbarer Fokus fuer die Tastaturbedienung. Es gab nur punktuelle Regeln (Rechner-Chips, Preiszeilen); Links, Schaltflaechen, FAQ-Zeilen und die Bildansicht hingen am Browserstandard. Die Formularfelder ersetzten ihn sogar durch einen 1px-Farbwechsel, der bei Blendung kaum auffaellt. */ :focus-visible{outline:2px solid var(--gold);outline-offset:3px} .field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{ outline:2px solid var(--gold);outline-offset:2px;border-color:var(--gold)} main:focus{outline:none}