/* =========================================================================
   FÖN-X Friseur & Beauty Salon, Website V2, Rezept „Ladenschild“
   Fast schwarz, zwei helle Anker, ein Rot aus dem Logo. Haarlinien statt
   Karten. Bewegung „Solide“: 10 px, drei Dauern, zwei Kurven.
   ========================================================================= */

/* ── Schriften (lokal) ─────────────────────────────────────────────────── */
@font-face{ font-family:"Archivo"; font-style:normal; font-weight:600; font-display:swap; src:url("../fonts/archivo-600-latin.woff2") format("woff2"); 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; }
@font-face{ font-family:"Archivo"; font-style:normal; font-weight:600; font-display:swap; src:url("../fonts/archivo-600-latin-ext.woff2") format("woff2"); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face{ font-family:"Inter"; font-style:normal; font-weight:400; font-display:swap; src:url("../fonts/inter-latin-400-normal.woff2") format("woff2"); 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; }
@font-face{ font-family:"Inter"; font-style:normal; font-weight:400; font-display:swap; src:url("../fonts/inter-latin-ext-400-normal.woff2") format("woff2"); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face{ font-family:"Inter"; font-style:normal; font-weight:500; font-display:swap; src:url("../fonts/inter-latin-500-normal.woff2") format("woff2"); 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; }
@font-face{ font-family:"Inter"; font-style:normal; font-weight:500; font-display:swap; src:url("../fonts/inter-latin-ext-500-normal.woff2") format("woff2"); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face{ font-family:"Inter"; font-style:normal; font-weight:600; font-display:swap; src:url("../fonts/inter-latin-600-normal.woff2") format("woff2"); 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; }
@font-face{ font-family:"Inter"; font-style:normal; font-weight:600; font-display:swap; src:url("../fonts/inter-latin-ext-600-normal.woff2") format("woff2"); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

/* ── Tokens ────────────────────────────────────────────────────────────── */
:root{
  /* Flächen */
  --schwarz:#0E0D0D;
  --flaeche-2:#161414;
  --flaeche-3:#1F1C1C;
  --hell:#F2F2F0;
  --blatt:#FBFBF9;
  /* Schrift */
  --text:#F4F2EF;
  --text-2:#BDB6B0;
  --text-3:#948D87;
  --text-fliess:#fff;   /* Fließtext auf dunklem Grund (Florian 07.10.2026, #fff auf #0E0D0D ≈ 19 : 1) */
  --tinte:#121111;
  --tinte-2:#55504B;
  /* Akzent: nur das Logo-Rot */
  --rot:#C8281A;
  --rot-tief:#A91F12;
  --rot-text:#F0533F;
  /* Zustand „geöffnet“ (semantisch, nur im Statuspunkt) */
  --offen:#4FB477;
  /* Linien */
  --linie:rgba(255,255,255,.12);
  --linie-2:rgba(255,255,255,.26);
  --linie-hell:rgba(18,17,17,.14);
  --linie-hell-2:rgba(18,17,17,.32);
  --schleier:rgba(14,13,13,.94);
  /* Formen */
  --r-1:4px;
  --r-2:10px;
  --r-3:18px;
  --r-pille:999px;
  /* Bewegung */
  --d-1:160ms;
  --d-2:320ms;
  --d-3:640ms;
  --d-zeichnen:1100ms;
  --e-aus:cubic-bezier(.22,.61,.36,1);
  --e-feder:cubic-bezier(.34,1.28,.64,1);
  --rv-weg:10px;
  /* Raster */
  --wrap:1240px;
  --rand:clamp(16px,4vw,40px);
  --kopf-h:72px;
  --sek:clamp(76px,9vw,136px);
  /* Schriften */
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --display:"Archivo","Inter",system-ui,-apple-system,sans-serif;
}
@supports (transition-timing-function:linear(0,1)){
  :root{ --e-feder:linear(0,.0492,.1613,.2979,.4356,.5617,.6701,.759,.8294,.8833,.9233,.9521,.9721,.9857,.9944,.9996,1.0026,1.0039,1.0043,1.0042,1.0037,1.0031,1.0025,1); }
}
@media (max-width:760px){ :root{ --rv-weg:6px; --kopf-h:64px; } }

/* ── Grundlagen ────────────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-padding-top:calc(var(--kopf-h) + 16px); }
@media (prefers-reduced-motion:no-preference){ html{ scroll-behavior:smooth; } }
body{ margin:0; background:var(--schwarz); color:var(--text); font:400 1.0625rem/1.65 var(--sans); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:clip; }
img,svg,picture,video,iframe{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:inherit; text-decoration-thickness:1px; text-underline-offset:.24em; }
h1,h2,h3,h4{ margin:0; font-family:var(--display); font-weight:600; letter-spacing:-.03em; line-height:1.08; text-wrap:balance; }
p,figure,blockquote,dl,dd{ margin:0; }
p,li,dd{ text-wrap:pretty; }
ul,ol{ margin:0; padding:0; list-style:none; }
button{ font:inherit; color:inherit; }
small{ font-size:.875em; }
::selection{ background:var(--rot); color:#fff; }
:focus-visible{ outline:2px solid var(--rot-text); outline-offset:3px; border-radius:var(--r-1); }
input,textarea,select{ accent-color:var(--rot); caret-color:var(--rot); }
.wrap{ width:100%; max-width:calc(var(--wrap) + 2 * var(--rand)); margin-inline:auto; padding-inline:var(--rand); }
.visually-hidden{ position:absolute!important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.skip{ position:absolute; left:12px; top:-80px; z-index:200; background:var(--rot); color:#fff; padding:12px 18px; font-weight:600; text-decoration:none; border-radius:var(--r-2); }
.skip:focus{ top:12px; }
.nw{ white-space:nowrap; }
.rot{ color:var(--rot-text); }
.zahl,.p{ font-variant-numeric:tabular-nums; }
.g-logo{ width:20px; height:20px; flex:none; }
.sterne{ display:inline-flex; gap:2px; color:currentColor; }
.sterne svg{ width:15px; height:15px; }

/* ── Knöpfe ────────────────────────────────────────────────────────────── */
.knopfreihe{ display:flex; flex-wrap:wrap; gap:12px; }
.knopf{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:52px; padding:0 24px; border-radius:var(--r-2); border:1px solid transparent;
  font:600 1rem/1.1 var(--sans); letter-spacing:-.005em; text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:transform var(--d-1) var(--e-aus), background-color var(--d-1) var(--e-aus), border-color var(--d-1) var(--e-aus), color var(--d-1) var(--e-aus);
}
.knopf svg{ width:20px; height:20px; flex:none; }
.knopf:active{ transform:translateY(1px); transition:transform 60ms linear; }
.knopf--rot{ background:var(--rot); color:#fff; }
.knopf--rand{ border-color:var(--linie-2); color:var(--text); background:transparent; }
.knopf--hell{ border-color:var(--linie-2); color:#fff; background:transparent; }
.knopf--dunkel{ background:var(--tinte); color:#fff; }
.knopf--weiss{ background:#fff; color:var(--tinte); }
.knopf--klein{ min-height:44px; padding:0 18px; font-size:.9375rem; }
@media (hover:hover){ .knopf--rot:hover{ background:var(--rot-tief); transform:translateY(-2px); } .knopf--rand:hover,.knopf--hell:hover{ border-color:var(--text); transform:translateY(-2px); } .knopf--dunkel:hover{ background:#000; transform:translateY(-2px); } .knopf--weiss:hover{ background:var(--hell); transform:translateY(-2px); } }
.sek--hell .knopf--rand,.rechtsseite .knopf--rand{ border-color:var(--linie-hell-2); color:var(--tinte); }
@media (hover:hover){ .sek--hell .knopf--rand:hover{ border-color:var(--tinte); } }

/* ── Kopfleiste ────────────────────────────────────────────────────────── */
.kopf{ position:fixed; inset:0 0 auto; z-index:60; height:var(--kopf-h); border-bottom:1px solid transparent; transition:background-color var(--d-2) var(--e-aus), border-color var(--d-2) var(--e-aus); }
.kopf.is-fest,.kopf--solid,.kopf.is-menue{ background:var(--schleier); border-bottom-color:var(--linie); }
.kopf__innen{ display:flex; align-items:center; gap:20px; height:100%; }
.kopf__logo{ display:block; flex:none; }
.kopf__logo img{ height:36px; width:auto; }
.kopf__nav{ display:none; margin-left:auto; }
.kopf__nav > ul{ display:flex; align-items:center; gap:2px; }
.kopf__nav > ul > li{ display:flex; align-items:center; }
.kopf__nav a{ display:inline-flex; align-items:center; min-height:44px; padding:0 12px; font-size:.9375rem; font-weight:500; color:var(--text-2); text-decoration:none; transition:color var(--d-1) var(--e-aus); }
@media (hover:hover){ .kopf__nav a:hover{ color:var(--text); } }
.kopf__nav a[aria-current="page"]{ color:var(--text); }
.hat-menue{ position:relative; }
.menue__knopf{ display:grid; place-items:center; width:32px; height:44px; margin-left:-8px; background:none; border:0; color:var(--text-2); cursor:pointer; transition:color var(--d-1) var(--e-aus); }
.menue__knopf svg{ width:16px; height:16px; transition:transform var(--d-2) var(--e-aus); }
.hat-menue.is-auf .menue__knopf svg{ transform:rotate(180deg); }
@media (hover:hover){ .menue__knopf:hover{ color:var(--text); } }
.menue{ position:absolute; top:calc(100% + 10px); left:-8px; width:380px; padding:8px; background:var(--flaeche-2); border:1px solid var(--linie); border-radius:var(--r-3); opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity var(--d-1) var(--e-aus), transform var(--d-2) var(--e-aus), visibility 0s linear var(--d-2); }
.hat-menue.is-auf .menue{ opacity:1; visibility:visible; transform:none; transition:opacity var(--d-1) var(--e-aus), transform var(--d-2) var(--e-feder), visibility 0s; }
@media (hover:hover){ .hat-menue:hover .menue{ opacity:1; visibility:visible; transform:none; transition:opacity var(--d-1) var(--e-aus), transform var(--d-2) var(--e-feder), visibility 0s; } }
.menue li + li{ border-top:1px solid var(--linie); }
.menue a{ display:grid; grid-template-columns:1fr auto; align-items:baseline; gap:2px 16px; min-height:0; padding:12px 12px; color:var(--text); border-radius:var(--r-2); }
.menue a b{ font-weight:600; font-size:.98rem; }
.menue a small{ grid-column:1; color:var(--text-3); font-size:.84rem; }
.menue .menue__alle{ display:flex; color:var(--rot-text); font-weight:600; font-size:.9rem; }
@media (hover:hover){ .menue a:hover{ background:var(--flaeche-3); color:var(--text); } }
.kopf__cta{ display:flex; align-items:center; gap:8px; margin-left:auto; }
.kopf__anruf .lang{ display:none; }
.kopf__menue{ display:inline-flex; align-items:center; gap:10px; min-height:44px; min-width:44px; padding:0 12px; background:none; border:1px solid var(--linie-2); border-radius:var(--r-2); color:var(--text); font-weight:600; font-size:.9375rem; cursor:pointer; transition:border-color var(--d-1) var(--e-aus); }
.kopf__menue i{ position:relative; display:block; width:16px; height:10px; }
.kopf__menue i::before,.kopf__menue i::after{ content:""; position:absolute; left:0; right:0; height:1.5px; background:currentColor; transition:transform var(--d-2) var(--e-aus); }
.kopf__menue i::before{ top:1px; } .kopf__menue i::after{ bottom:1px; }
.kopf__menue[aria-expanded="true"] i::before{ transform:translateY(3.5px) rotate(45deg); }
.kopf__menue[aria-expanded="true"] i::after{ transform:translateY(-3.5px) rotate(-45deg); }
@media (hover:hover){ .kopf__menue:hover{ border-color:var(--text); } }
@media (min-width:600px){ .kopf__anruf .kurz{ display:none; } .kopf__anruf .lang{ display:inline; } }
@media (min-width:1080px){
  .kopf__nav{ display:block; }
  .kopf__nav + .kopf__cta{ margin-left:8px; }
  .kopf__menue{ display:none; }
  .kopf__logo img{ height:40px; }
}

/* Handy-Menü */
.blatt{ position:fixed; inset:var(--kopf-h) 0 0; z-index:55; display:none; overflow-y:auto; overscroll-behavior:contain; background:var(--schwarz); border-top:1px solid var(--linie); }
.blatt.is-auf{ display:block; animation:blatt-rein var(--d-2) var(--e-aus) both; }
@keyframes blatt-rein{ from{ opacity:0; transform:translateY(-8px); } }
.blatt__innen{ display:grid; gap:28px; padding-block:20px 40px; }
.blatt__nav > li{ border-bottom:1px solid var(--linie); }
.blatt__nav > li > a{ display:flex; align-items:center; justify-content:space-between; min-height:58px; font:600 1.5rem/1.1 var(--display); letter-spacing:-.025em; text-decoration:none; }
.blatt__unter{ display:grid; padding:0 0 14px; }
.blatt__unter a{ display:flex; justify-content:space-between; gap:16px; align-items:baseline; min-height:44px; padding:10px 0; color:var(--text-2); text-decoration:none; font-size:1rem; }
.blatt__fuss{ display:grid; gap:14px; }
.blatt__fuss .knopf{ width:100%; }
.blatt__fuss p{ color:var(--text-3); font-size:.95rem; }
body.menue-offen{ overflow:hidden; }
@media (min-width:1080px){ .blatt{ display:none!important; } }

/* ── Sektionen ─────────────────────────────────────────────────────────── */
.sek{ position:relative; padding-block:var(--sek); }
.sek--zwei{ background:var(--flaeche-2); }
.sek--hell{ background:var(--hell); color:var(--tinte); }
.sek--hell ::selection{ background:var(--tinte); color:#fff; }
.sek--hell :focus-visible{ outline-color:var(--rot); }
.sek--hell .rot{ color:var(--rot); }
.sek__kopf{ display:grid; gap:18px; max-width:760px; margin-bottom:clamp(36px,5vw,64px); }
.sek__kopf p{ color:var(--text-fliess); font-size:1.125rem; max-width:60ch; }
.sek--hell .sek__kopf p{ color:var(--tinte-2); }
.kicker{ font:600 .8125rem/1.2 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--rot-text); }
.sek--hell .kicker{ color:var(--rot); }
h2{ font-size:clamp(2rem,1.25rem + 2.5vw,3.35rem); }
h3{ font-size:clamp(1.2rem,1.05rem + .5vw,1.45rem); letter-spacing:-.02em; line-height:1.18; }

/* ── Reveal (genau einmal) ─────────────────────────────────────────────── */
.js .rv{ opacity:0; transform:translateY(var(--rv-weg)); }
.js .rv.is-da{ opacity:1; transform:none; transition:opacity var(--d-3) var(--e-aus) var(--rv-d,0ms), transform var(--d-3) var(--e-feder) var(--rv-d,0ms); }

/* ── Hero (Startseite) ─────────────────────────────────────────────────── */
/* Start-Hero aus V1 (Florian 07.10.2026). Unter 1280 px wie V1: Text auf dem Vollbildfoto mit Verlauf.
   Ab 1280 px: Text links, Foto rechts (60 %), alle drei Stühle im Bild. */
.hero{ position:relative; isolation:isolate; overflow:hidden; display:flex; align-items:center; min-height:min(100svh,940px);
  padding-block:calc(var(--kopf-h) + 48px) clamp(56px,6vw,88px); background:var(--schwarz); }
.hero__bild{ position:absolute; inset:0; z-index:-2; }
.hero__bild img{ width:100%; height:100%; object-fit:cover; object-position:100% 62%; transform:scale(1.05); transition:transform 2.4s cubic-bezier(.22,1,.36,1); }
.hero.is-da .hero__bild img{ transform:none; }
.hero::before{ content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg, rgba(14,13,13,.94) 0%, rgba(14,13,13,.8) 40%, rgba(14,13,13,.42) 70%, rgba(14,13,13,.5) 100%),
             linear-gradient(0deg, var(--schwarz) 0%, rgba(14,13,13,0) 34%); }
.hero__gitter{ display:grid; gap:44px; align-items:center; }
.hero__text{ max-width:640px; }
.hero .h1{ margin-bottom:22px; font-size:clamp(2.3rem,1.3rem + 3vw,3.6rem); line-height:1.06; color:#fff; }
.hero .h1 .rot{ display:block; color:var(--rot-text); }
.hero__lead{ max-width:58ch; margin-bottom:24px; font-size:1rem; line-height:1.65; color:var(--text-fliess); }
.hero .haken{ gap:10px; margin:0 0 30px; }
.hero .haken li{ align-items:center; font-size:1.02rem; color:var(--text-fliess); }
.hero__google{ display:inline-flex; align-items:center; gap:10px; margin-top:30px; padding:8px 14px 8px 10px; border:1px solid var(--linie-2); border-radius:var(--r-pille); background:rgba(14,13,13,.55); color:#fff; text-decoration:none; font-size:.9rem; }
.hero__google b{ font-weight:600; }
.hero__google .sterne svg{ width:14px; height:14px; }
@media (hover:hover){ .hero__google:hover{ border-color:rgba(255,255,255,.35); } }
@media (max-width:760px){
  .hero{ min-height:auto; padding-top:calc(var(--kopf-h) + 40px); }
  /* Foto über die ganze Hero-Höhe: oben dunkel genug für die H1 (auch die rote Zeile ≥ 4,5 : 1), unten sind die Stühle hinter Haken und Knöpfen zu sehen */
  .hero::before{ background:linear-gradient(90deg, rgba(14,13,13,.5) 0%, rgba(14,13,13,.2) 60%, rgba(14,13,13,0) 100%),
    linear-gradient(180deg, rgba(14,13,13,.6) 0, rgba(14,13,13,.8) 220px, rgba(14,13,13,.62) 340px, rgba(14,13,13,.5) 78%, rgba(14,13,13,.92) 100%); }
  .hero__bild img{ object-position:48% 50%; }
  .hero .knopfreihe{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hero .knopf{ padding:0 12px; }
}
@media (max-width:440px){
  .hero .h1{ font-size:min(2.3rem,8.6vw); }
  .hero__google{ font-size:.86rem; }
  .hero__google span{ white-space:nowrap; }
  .hero__google .nur-breit{ display:none; }
}
@media (min-width:1280px){
  .hero{ min-height:min(80svh,760px); padding-block:calc(var(--kopf-h) + 40px) 56px; }
  .hero::before{ display:none; }
  .hero__bild{ left:auto; width:60vw;
    -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 14%); mask-image:linear-gradient(90deg, transparent 0%, #000 14%); }
  .hero__bild img{ object-position:5% 50%; }  /* alle drei Stühle im Bild */
  .hero__bild::after{ content:""; position:absolute; inset:0; background:linear-gradient(to bottom, rgba(14,13,13,.88) 0, rgba(14,13,13,.45) 90px, rgba(14,13,13,0) 200px), linear-gradient(to top, rgba(14,13,13,.6) 0%, rgba(14,13,13,0) 30%); }
  .hero__gitter{ width:100%; }
  .hero__text{ max-width:min(560px, calc(40vw - 32px - var(--rand) - max(0px, (100vw - var(--wrap) - 2 * var(--rand)) / 2))); }
  .hero .h1{ font-size:clamp(2.2rem,.8rem + 2.9vw,3.3rem); }
}
@media (prefers-reduced-motion:reduce){ .hero__bild img{ transform:none!important; transition:none; } }

/* ── Kopfbild der Kontaktseite (.held, .held--klein) ──────────────────── */
.held{ position:relative; isolation:isolate; display:flex; align-items:flex-end; min-height:min(94svh,940px); padding:calc(var(--kopf-h) + 56px) 0 clamp(44px,6vw,80px); overflow:hidden; background:var(--schwarz); }
.held__bild{ position:absolute; inset:0; z-index:-2; }
.held__bild img{ width:100%; height:100%; object-fit:cover; object-position:58% 40%; }
.held::before{ content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to top, rgba(14,13,13,.97) 0%, rgba(14,13,13,.8) 30%, rgba(14,13,13,.35) 64%, rgba(14,13,13,.55) 100%), linear-gradient(90deg, rgba(14,13,13,.8) 0%, rgba(14,13,13,.42) 46%, rgba(14,13,13,0) 78%); }  /* R9: Rot auf Foto auch 761–1279 px ≥ 3 : 1 */
.held__inhalt{ display:grid; gap:28px; width:100%; }
.unterstrich{ position:relative; display:inline-block; white-space:nowrap; }
/* R3: Pinselstrich nur unter dem Wort, unter den Unterlängen, Aufbau per clip-path (Fehlerliste 16.09.2026) */
.unterstrich svg{ position:absolute; left:-1%; top:calc(100% + .01em); width:102%; height:.28em; overflow:visible; pointer-events:none; }
.unterstrich path{ fill:var(--rot); }
.js .unterstrich svg{ clip-path:inset(0 100% 0 0); }
.js .is-da .unterstrich svg{ animation:wisch var(--d-zeichnen) var(--e-aus) var(--d-3) both; }
@keyframes wisch{ from{ clip-path:inset(0 100% 0 0); } to{ clip-path:inset(0 0 0 0); } }
@keyframes strich{ to{ stroke-dashoffset:0; } }
.held__lead{ max-width:50ch; font-size:clamp(1.0625rem,1rem + .3vw,1.25rem); line-height:1.6; color:var(--text-fliess); }
.haken{ display:grid; gap:12px; }
.haken li{ display:flex; gap:12px; align-items:flex-start; font-weight:500; line-height:1.45; }
.ck{ flex:none; display:grid; place-items:center; width:26px; height:26px; margin-top:-1px; border-radius:50%; background:var(--rot); }
.ck svg{ width:16px; height:16px; fill:none; stroke:#fff; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.js .ck path{ stroke-dasharray:16; stroke-dashoffset:16; }
.js .is-da .ck path{ transition:stroke-dashoffset var(--d-3) var(--e-aus) calc(var(--rv-d,0ms) + var(--d-2)); stroke-dashoffset:0; }
.gpille{ display:inline-flex; flex-direction:column; align-items:center; gap:6px; justify-self:start; min-height:44px; padding:12px 26px 13px; border:1px solid var(--linie-2); border-radius:var(--r-pille); color:var(--text); text-decoration:none; text-align:center; transition:border-color var(--d-1) var(--e-aus); }
.gpille__oben{ display:inline-flex; align-items:center; gap:10px; }
.gpille__text{ font-size:.8125rem; line-height:1.3; color:var(--text-fliess); }
.gpille__text b{ color:var(--text); }
.gpille b{ font-weight:600; }
@media (hover:hover) and (max-width:959px){ .gpille:hover{ border-color:var(--text); } }
@media (min-width:960px){
  .gpille{ flex-direction:row; gap:12px; padding:0; border:0; border-radius:0; text-align:left; }
  .gpille__text{ font-size:.9375rem; }
  @media (hover:hover){ .gpille:hover .gpille__text{ color:var(--text); } }
}
@media (max-width:760px){
  .held{ min-height:auto; padding-top:calc(var(--kopf-h) + 34vh); }
  .held__bild img{ object-position:50% 0; height:72%; }
  .held::before{ background:linear-gradient(to top, var(--schwarz) 0%, var(--schwarz) 34%, rgba(14,13,13,.9) 52%, rgba(14,13,13,.82) 64%, rgba(14,13,13,.4) 82%, rgba(14,13,13,.22) 100%); }  /* R9: „Komm rein.“ auf dem Foto ≥ 3 : 1 */
  .knopfreihe .knopf{ flex:1 1 auto; }
}

/* ── Leistungen: redaktionelle Liste mit Bild ──────────────────────────── */
.lbox{ display:grid; gap:40px; }
.lliste{ border-top:1px solid var(--linie-hell); }
.lzeile{ position:relative; display:grid; grid-template-columns:72px minmax(0,1fr) auto; grid-template-areas:"bild name preis" "bild info info"; align-items:center; column-gap:16px; row-gap:4px; padding:18px 0; border-bottom:1px solid var(--linie-hell); }
.lzeile__bild{ grid-area:bild; width:72px; height:72px; object-fit:cover; border-radius:var(--r-1); align-self:start; }
.lzeile__name{ grid-area:name; font-size:clamp(1.3rem,1.05rem + 1vw,2rem); letter-spacing:-.03em; }
.lzeile__name a{ text-decoration:none; }
.lzeile__name a::after{ content:""; position:absolute; inset:0; }
.lzeile__info{ grid-area:info; color:var(--tinte-2); font-size:.98rem; line-height:1.5; }
.lzeile__preis{ grid-area:preis; font-weight:600; white-space:nowrap; font-variant-numeric:tabular-nums; }
.lzeile__pfeil{ display:none; }
.lzeile:focus-within{ outline:2px solid var(--rot); outline-offset:4px; border-radius:var(--r-1); }
.lzeile a:focus-visible{ outline:none; }
.lvorschau{ display:none; }
.lbox__fuss{ display:flex; flex-wrap:wrap; gap:12px; margin-top:36px; }
@media (min-width:1080px){
  .lbox{ grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); column-gap:clamp(40px,5vw,80px); align-items:start; }
  .lzeile{ grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) 8.5em 28px; grid-template-areas:"name info preis pfeil"; column-gap:24px; padding:24px 8px; transition:background-color var(--d-1) var(--e-aus); }
  .lzeile__bild{ display:none; }
  .lzeile__preis{ text-align:right; }
  .lzeile__pfeil{ display:block; grid-area:pfeil; width:24px; height:24px; color:var(--tinte-2); transition:transform var(--d-2) var(--e-feder), color var(--d-1) var(--e-aus); }
  .lzeile.is-an{ background:var(--blatt); }
  .lzeile.is-an .lzeile__pfeil{ transform:translateX(4px); color:var(--rot); }
  .lvorschau{ display:block; position:sticky; top:calc(var(--kopf-h) + 32px); aspect-ratio:4/5; border-radius:var(--r-2); overflow:hidden; background:var(--hell); }
  .lvorschau img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.02); transition:opacity var(--d-2) var(--e-aus), transform var(--d-3) var(--e-aus); }
  .lvorschau img.is-an{ opacity:1; transform:none; }
  .lvorschau figcaption{ position:absolute; left:12px; bottom:12px; padding:6px 10px; border-radius:var(--r-1); background:var(--schleier); color:var(--text); font-size:.8125rem; }
}

/* ── Über uns ──────────────────────────────────────────────────────────── */
.ueber{ display:grid; gap:48px; }
.ueber__text{ display:grid; gap:24px; align-content:start; }
.text-gross{ font-size:clamp(1.125rem,1.02rem + .4vw,1.32rem); line-height:1.6; color:var(--text); }
.regeln{ border-top:1px solid var(--linie); margin-top:8px; }
.regeln > div{ display:grid; grid-template-columns:8.5em minmax(0,1fr); gap:16px; padding:16px 0; border-bottom:1px solid var(--linie); }
.regeln dt{ font:600 1.05rem/1.4 var(--display); letter-spacing:-.01em; }
.regeln dd{ color:var(--text-fliess); }
.ueber__bilder{ display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:start; }
.ueber__bilder figure{ border-radius:var(--r-2); overflow:hidden; background:var(--flaeche-2); }
.ueber__bilder img{ width:100%; aspect-ratio:3/4.6; object-fit:cover; }
.ueber__bilder figure:nth-child(2){ grid-row:span 2; margin-top:56px; }
@media (min-width:1000px){
  .ueber{ grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); column-gap:clamp(48px,6vw,96px); align-items:start; }
  .ueber__bilder figure:nth-child(2){ margin-top:96px; }
}
@media (max-width:480px){ .regeln > div{ grid-template-columns:1fr; gap:4px; } }

/* ── Salon: Galerie ────────────────────────────────────────────────────── */
.galerie{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.galerie figure{ position:relative; overflow:hidden; border-radius:var(--r-2); background:var(--flaeche-3); }
.galerie img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/3; }
.galerie__a{ grid-column:1/-1; }
.galerie__a img{ aspect-ratio:3/2; }
@media (min-width:900px){
  .galerie{ grid-template-columns:repeat(12,minmax(0,1fr)); grid-auto-rows:minmax(0,clamp(200px,20vw,290px)); gap:12px; }
  .galerie img,.galerie__a img{ aspect-ratio:auto; }
  .galerie__a{ grid-column:1/8; grid-row:1/3; }
  .galerie__b{ grid-column:8/13; grid-row:1; }
  .galerie__c{ grid-column:8/13; grid-row:2; }
  .galerie__d{ grid-column:1/6; grid-row:3; }
  .galerie__e{ grid-column:6/10; grid-row:3; }
  .galerie__f{ grid-column:10/13; grid-row:3; }
}

/* ── Preise: Aushang ───────────────────────────────────────────────────── */
.pbox{ display:grid; gap:36px; }
.pbox__kopf{ display:grid; gap:18px; align-content:start; }
.pbox__kopf p{ color:var(--tinte-2); font-size:1.0625rem; max-width:46ch; }
.pbox__kopf .preise__hinweis{ font-size:.95rem; }
.preisblatt{ padding:clamp(18px,3vw,36px); background:var(--blatt); border:1px solid var(--linie-hell); border-radius:var(--r-2); }
.reiter{ position:relative; display:grid; grid-auto-flow:column; grid-auto-columns:1fr; padding:4px; margin-bottom:28px; background:var(--hell); border:1px solid var(--linie-hell); border-radius:var(--r-2); }
.reiter[hidden]{ display:none; }
.reiter button{ position:relative; z-index:1; min-height:46px; padding:0 10px; background:none; border:0; border-radius:calc(var(--r-2) - 3px); color:var(--tinte-2); font-weight:600; font-size:.9375rem; cursor:pointer; transition:color var(--d-1) var(--e-aus); }
.reiter button[aria-selected="true"]{ color:#fff; }
.reiter__schieber{ position:absolute; top:4px; bottom:4px; left:0; width:0; border-radius:calc(var(--r-2) - 3px); background:var(--tinte); transition:transform var(--d-2) var(--e-feder); }
.preise__panel[hidden]{ display:none; }
.preise__panel.is-rein{ animation:panel-rein var(--d-2) var(--e-aus) both; }
@keyframes panel-rein{ from{ opacity:0; transform:translateY(6px); } }
.preise__titel{ font-size:1.2rem; margin:0 0 10px; }
.preise__titel--tab{ margin:0 0 14px; }
.js .preise__titel--tab{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.preise__titel--zwei{ margin-top:30px; }
.liste__kopf{ display:grid; grid-template-columns:minmax(0,1fr) repeat(3,5.4em); gap:8px; padding:0 0 8px; font-size:.8125rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--tinte-2); text-align:right; }
.liste li{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px 16px; align-items:baseline; padding:12px 0; border-top:1px solid var(--linie-hell); }
.liste--drei li{ grid-template-columns:minmax(0,1fr) repeat(3,5.4em); gap:8px; }
.liste li > span:first-child{ font-weight:500; }
.liste small{ color:var(--tinte-2); font-weight:400; }
.liste .p{ text-align:right; font-weight:600; white-space:nowrap; font-variant-numeric:tabular-nums; }
.liste .leer{ color:var(--linie-hell-2); font-weight:400; }
.liste + .liste{ margin-top:22px; }
.preise__zusatz{ margin-top:22px; padding-top:16px; border-top:1px solid var(--linie-hell); color:var(--tinte-2); font-size:.95rem; }
.preise__zusatz a{ color:var(--tinte); }
@media (min-width:1000px){
  .pbox{ grid-template-columns:minmax(0,.85fr) minmax(0,1.4fr); column-gap:clamp(40px,6vw,96px); align-items:start; }
  .pbox__kopf{ position:sticky; top:calc(var(--kopf-h) + 32px); }
}
@media (max-width:520px){
  .liste__kopf,.liste--drei li{ grid-template-columns:minmax(0,1fr) repeat(3,4.3em); gap:4px; }
  .liste--drei .p{ font-size:.9rem; }
}

/* ── Bewertungen ───────────────────────────────────────────────────────── */
.bew{ display:grid; gap:40px; margin-bottom:clamp(40px,5vw,64px); }
.bew__note{ display:grid; gap:10px; align-content:start; }
.bew__zahl{ display:flex; align-items:center; gap:.18em; font:600 clamp(5rem,3.6rem + 6vw,9.5rem)/.9 var(--display); letter-spacing:-.05em; color:#fff; font-variant-numeric:tabular-nums; }
.bew__meta{ display:grid; gap:4px; color:var(--text-fliess); }
.bew__sterne{ display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.bew__meta .sterne{ color:var(--text); }
.bew__meta .sterne svg{ width:20px; height:20px; }
.bew__meta b{ color:var(--text); font-weight:600; }
.bew__link{ justify-self:start; margin-top:10px; }
.bew .sek__kopf{ margin-bottom:0; align-content:end; }
@media (min-width:960px){ .bew{ grid-template-columns:auto minmax(0,1fr); column-gap:clamp(48px,7vw,120px); align-items:end; } }
.laufband{ position:relative; overflow:hidden; border-block:1px solid var(--linie); -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); }
.laufband__spur{ display:flex; width:max-content; }
.stimme{ display:grid; gap:14px; align-content:space-between; width:min(440px,82vw); padding:32px clamp(22px,3vw,40px); border-right:1px solid var(--linie); }
.stimme blockquote{ font:600 clamp(1.1rem,1rem + .45vw,1.35rem)/1.38 var(--display); letter-spacing:-.015em; }
.stimme__quelle{ display:flex; align-items:center; gap:8px; color:var(--text-3); font-size:.875rem; }
.stimme__quelle .g-logo{ width:16px; height:16px; }
.laufband--still{ -webkit-mask-image:none; mask-image:none; }
.laufband--still .laufband__spur{ width:auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.laufband--still .stimme{ width:auto; }

/* ── Häufige Fragen ────────────────────────────────────────────────────── */
.fpaar{ display:grid; gap:36px; }
.fpaar .sek__kopf{ margin-bottom:0; align-content:start; }
.fpaar .sek__kopf a{ color:var(--text); font-weight:600; }
.fragen{ border-top:1px solid var(--linie); }
.frage{ border-bottom:1px solid var(--linie); }
.frage__f{ display:flex; justify-content:space-between; align-items:center; gap:20px; width:100%; min-height:64px; padding:18px 0; background:none; border:0; text-align:left; font:600 clamp(1.05rem,1rem + .3vw,1.2rem)/1.35 var(--sans); letter-spacing:-.01em; color:var(--text); cursor:pointer; transition:color var(--d-1) var(--e-aus); }
@media (hover:hover){ .frage__f:hover{ color:#fff; } }
.frage__ic{ position:relative; flex:none; width:28px; height:28px; border:1px solid var(--linie-2); border-radius:var(--r-pille); }
.frage__ic::before,.frage__ic::after{ content:""; position:absolute; left:50%; top:50%; width:11px; height:1.5px; margin:-.75px 0 0 -5.5px; background:currentColor; transition:transform var(--d-2) var(--e-feder); }
.frage__ic::after{ transform:rotate(90deg); }
.frage.is-auf .frage__ic::after{ transform:rotate(0deg); }
.frage__a{ display:grid; grid-template-rows:0fr; transition:grid-template-rows var(--d-2) var(--e-aus); }
.frage.is-auf .frage__a{ grid-template-rows:1fr; }
.frage__a > div{ overflow:hidden; }
.frage__a p{ padding:0 48px 22px 0; color:var(--text-fliess); }
.frage__a a{ color:var(--text); }
@media (min-width:960px){
  .fpaar{ grid-template-columns:minmax(0,.8fr) minmax(0,1.3fr); column-gap:clamp(40px,6vw,96px); align-items:start; }
  .fpaar .sek__kopf{ position:sticky; top:calc(var(--kopf-h) + 32px); }
}
@media (max-width:600px){ .frage__a p{ padding-right:0; } }

/* ── Anfahrt ───────────────────────────────────────────────────────────── */
.anfahrt{ display:grid; gap:40px; }
.anfahrt__bild{ border-radius:var(--r-2); overflow:hidden; background:var(--flaeche-3); }
.anfahrt__bild img{ width:100%; height:100%; aspect-ratio:3/2; object-fit:cover; }
.anfahrt__text{ display:grid; gap:24px; align-content:start; }
.anfahrt__text > p{ color:var(--text-fliess); font-size:1.0625rem; }
.daten{ border-top:1px solid var(--linie); }
.daten > div{ display:grid; grid-template-columns:44px minmax(0,1fr); gap:4px 14px; padding:16px 0; border-bottom:1px solid var(--linie); }
.daten dt{ grid-column:2; font-size:.8125rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--text-3); }
.daten dd{ grid-column:2; color:var(--text); }
.daten .ic{ grid-row:1/3; grid-column:1; }
.daten a{ color:var(--text); }
.ic{ display:grid; place-items:center; width:44px; height:44px; border:1px solid var(--linie); border-radius:var(--r-2); }
.ic lord-icon{ width:28px; height:28px; }
.zeiten-tab{ display:grid; grid-template-columns:auto auto; justify-content:start; gap:2px 22px; margin-bottom:8px; font-variant-numeric:tabular-nums; }
.zeiten-tab span:nth-child(even){ color:var(--text-fliess); }
.status{ display:inline-flex; align-items:center; gap:8px; font-size:.9375rem; font-weight:500; color:var(--text-fliess); }
.status::before{ content:""; flex:none; width:8px; height:8px; border-radius:var(--r-pille); background:var(--text-3); }
.status.is-offen{ color:var(--text); }
.status.is-offen::before{ background:var(--offen); }
.anfahrt__alle a{ color:var(--text); font-weight:500; }
@media (min-width:960px){ .anfahrt{ grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); column-gap:clamp(40px,6vw,96px); align-items:stretch; } .anfahrt__bild img{ aspect-ratio:auto; min-height:100%; } }

/* ── Instagram ─────────────────────────────────────────────────────────── */
.insta__kopf{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:end; gap:24px; margin-bottom:clamp(28px,4vw,44px); }
.insta__kopf .sek__kopf{ margin-bottom:0; }
.insta__raster{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.insta__raster[hidden]{ display:none; }
.insta__post{ position:relative; display:block; aspect-ratio:1; overflow:hidden; border-radius:var(--r-1); background:var(--flaeche-3); }
.insta__post img{ width:100%; height:100%; object-fit:cover; transition:transform var(--d-3) var(--e-aus), opacity var(--d-2) var(--e-aus); }
@media (hover:hover){ .insta__post:hover img{ transform:scale(1.03); opacity:.85; } }
.insta__typ{ position:absolute; top:10px; right:10px; width:22px; height:22px; }
.insta__text{ display:none; }
@media (min-width:760px){ .insta__raster{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; } }
.insta__leer{ display:grid; gap:18px; padding-top:28px; border-top:1px solid var(--linie); }
.insta__leer[hidden]{ display:none; }
.insta__handle{ justify-self:start; font:600 clamp(2.6rem,1.4rem + 5vw,5.6rem)/1 var(--display); letter-spacing:-.045em; color:#fff; text-decoration:none; transition:color var(--d-1) var(--e-aus); }
@media (hover:hover){ .insta__handle:hover{ color:var(--rot-text); } }
.insta__leer p{ color:var(--text-fliess); max-width:52ch; }

/* ── Fuß ───────────────────────────────────────────────────────────────── */
.fuss{ padding-block:clamp(56px,7vw,96px) 28px; background:var(--schwarz); border-top:1px solid var(--linie); color:var(--text-fliess); font-size:.9375rem; }
.fuss__oben{ display:grid; gap:44px; padding-bottom:44px; }
.fuss__marke{ display:grid; gap:18px; align-content:start; max-width:42ch; }
.fuss__logo img{ height:44px; width:auto; }
.fuss__gitter{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px 24px; }
.fuss h2{ margin-bottom:12px; font:600 .8125rem/1.3 var(--sans); letter-spacing:.1em; text-transform:uppercase; color:var(--text); }
.fuss li{ padding:3px 0; }
.fuss a{ color:var(--text-fliess); text-decoration:none; transition:color var(--d-1) var(--e-aus); }
@media (hover:hover){ .fuss a:hover{ color:var(--text); text-decoration:underline; } }
.fuss__unten{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px 24px; padding-top:22px; border-top:1px solid var(--linie); font-size:.875rem; color:var(--text-3); }
.fuss__recht{ display:flex; flex-wrap:wrap; gap:4px 20px; }
.fuss__recht a{ display:inline-flex; align-items:center; min-height:44px; color:var(--text-3); }
@media (min-width:1000px){ .fuss__oben{ grid-template-columns:minmax(0,1fr) minmax(0,2fr); column-gap:64px; } .fuss__gitter{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (min-width:1000px) and (max-width:1099px){ .fuss__oben{ column-gap:40px; } .fuss__gitter{ column-gap:16px; } .fuss h2{ letter-spacing:.07em; } }  /* R11: Firmenname im Fuß höchstens 2 Zeilen */
@media (max-width:420px){ .fuss__gitter{ grid-template-columns:1fr; } }

/* ── Brotkrümel ────────────────────────────────────────────────────────── */
.krumen{ display:flex; flex-wrap:wrap; align-items:center; column-gap:8px; font-size:.875rem; color:var(--text-3); }
.krumen li{ display:inline-flex; align-items:center; gap:8px; }
.krumen li + li::before{ content:"/"; color:var(--text-3); }
.krumen a{ display:inline-flex; align-items:center; min-height:44px; color:var(--text-2); text-decoration:none; transition:color var(--d-1) var(--e-aus); }
@media (hover:hover){ .krumen a:hover{ color:var(--text); } }
.krumen [aria-current]{ color:var(--text); }

/* ── Hero der Leistungsseiten ──────────────────────────────────────────── */
.uheld{ position:relative; isolation:isolate; overflow:hidden; background:var(--schwarz); }
.uheld__bild{ position:relative; display:block; margin-top:var(--kopf-h); aspect-ratio:4/3; }
.uheld__bild img{ width:100%; height:100%; object-fit:cover; }
.uheld__bild::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, var(--schwarz) 0%, rgba(14,13,13,.5) 32%, rgba(14,13,13,0) 60%); }
.uheld__text{ position:relative; display:grid; gap:22px; margin-top:-56px; padding-block:0 56px; }
.uheld__titel{ font-size:clamp(2.6rem,1.5rem + 3.6vw,3.6rem); letter-spacing:-.035em; line-height:1.02; color:#fff; }
.uheld__titel .rot{ display:block; }
.uheld__lead{ max-width:54ch; font-size:clamp(1.0625rem,1rem + .3vw,1.22rem); line-height:1.6; color:var(--text-fliess); }
@media (min-width:960px){
  .uheld{ display:flex; align-items:center; min-height:min(86svh,820px); }
  .uheld__bild{ position:absolute; top:0; right:0; bottom:0; width:50vw; margin:0; aspect-ratio:auto; -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 30%); mask-image:linear-gradient(90deg, transparent 0%, #000 30%); }
  .uheld__bild::after{ background:linear-gradient(to bottom, rgba(14,13,13,.88) 0, rgba(14,13,13,.5) 90px, rgba(14,13,13,0) 200px), linear-gradient(to top, rgba(14,13,13,.55) 0%, rgba(14,13,13,0) 36%); }
  .uheld__text{ margin:0 auto; padding-block:calc(var(--kopf-h) + 56px) 80px; }
  .uheld__text > *{ max-width:min(600px, calc(50vw - 56px - var(--rand) - max(0px, (100vw - var(--wrap) - 2 * var(--rand)) / 2))); }
}

/* ── Was es ist ────────────────────────────────────────────────────────── */
.was{ display:grid; gap:28px; }
.was__kopf{ display:grid; gap:18px; align-content:start; }
.was__text{ display:grid; gap:18px; }
.was__text p{ font-size:clamp(1.0625rem,1rem + .3vw,1.2rem); color:var(--text); }
.was__text p + p{ color:var(--text-fliess); }
@media (min-width:960px){ .was{ grid-template-columns:minmax(0,.85fr) minmax(0,1.2fr); column-gap:clamp(48px,7vw,120px); } }

/* ── Preise der Leistungsseiten: Liste links, Detail rechts ────────────── */
.lreiter{ display:grid; gap:20px; }
.lreiter__liste{ display:grid; align-content:start; border-top:1px solid var(--linie-hell); }
.lreiter__knopf{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; min-height:60px; padding:16px 14px; background:none; border:0; border-bottom:1px solid var(--linie-hell); text-align:left; color:var(--tinte); cursor:pointer; transition:background-color var(--d-1) var(--e-aus), color var(--d-1) var(--e-aus); }
.lreiter__knopf b{ font-weight:600; font-size:1.0625rem; line-height:1.3; }
.lreiter__knopf span{ flex:none; color:var(--tinte-2); font-size:.9rem; font-variant-numeric:tabular-nums; text-align:right; }
.lreiter__knopf[aria-selected="true"]{ background:var(--tinte); color:#fff; border-radius:var(--r-2); border-bottom-color:transparent; }
.lreiter__knopf[aria-selected="true"] span{ color:rgba(255,255,255,.74); }
@media (hover:hover){ .lreiter__knopf:hover{ background:var(--blatt); } .lreiter__knopf[aria-selected="true"]:hover{ background:var(--tinte); } }
.lreiter__detail{ order:-1; overflow:hidden; background:var(--blatt); border:1px solid var(--linie-hell); border-radius:var(--r-2); scroll-margin-top:calc(var(--kopf-h) + 12px); }
.lreiter__bild img{ width:100%; aspect-ratio:16/9; object-fit:cover; }
.lreiter__panels{ padding:clamp(20px,3vw,34px); }
.lreiter__panel[data-aus]{ display:none; }
.lreiter__panel.is-rein{ animation:panel-rein var(--d-2) var(--e-aus) both; }
.lreiter__panel h3{ margin-bottom:10px; font-size:clamp(1.5rem,1.2rem + 1vw,2.1rem); letter-spacing:-.03em; }
.lreiter__panel p{ color:var(--tinte-2); max-width:56ch; }
.lreiter__fuss{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px; margin-top:22px; padding-top:18px; border-top:1px solid var(--linie-hell); }
.lreiter__preis{ font-weight:600; font-size:1.15rem; font-variant-numeric:tabular-nums; }
.lreiter__hinweis{ max-width:72ch; margin-top:28px; color:var(--tinte-2); }
.lreiter__hinweis a{ color:var(--tinte); font-weight:600; }
@media (min-width:960px){
  .lreiter{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:clamp(32px,4vw,56px); align-items:start; }
  .lreiter__detail{ order:0; position:sticky; top:calc(var(--kopf-h) + 24px); }
  .lreiter__bild img{ aspect-ratio:2/1; }
}

/* ── Ablauf: Linie zeichnet sich einmal ────────────────────────────────── */
.ablauf{ position:relative; display:grid; gap:30px; padding-left:34px; }
.ablauf::before,.ablauf::after{ content:""; position:absolute; left:6px; top:10px; bottom:10px; width:1px; background:var(--linie-2); }
.ablauf::after{ width:2px; left:5.5px; background:var(--rot-text); transform-origin:top; transform:scaleY(0); }
.ablauf.is-da::after{ transform:none; transition:transform var(--d-zeichnen) var(--e-aus) var(--d-1); }
.ablauf li{ position:relative; display:grid; gap:8px; }
.ablauf li::before{ content:""; position:absolute; left:-34px; top:.3em; width:13px; height:13px; border-radius:var(--r-pille); background:var(--schwarz); box-shadow:inset 0 0 0 2px var(--rot-text); }
.ablauf h3{ font-size:clamp(1.2rem,1.05rem + .5vw,1.4rem); }
.ablauf p{ color:var(--text-fliess); }
@media (min-width:960px){
  .ablauf{ grid-template-columns:repeat(4,minmax(0,1fr)); column-gap:clamp(24px,3vw,44px); padding:38px 0 0; }
  .ablauf::before,.ablauf::after{ left:0; right:0; top:6px; bottom:auto; width:auto; height:1px; }
  .ablauf::after{ height:2px; top:5.5px; transform-origin:left; transform:scaleX(0); }
  .ablauf li::before{ left:0; top:-38px; }
}

/* ── Anruf-Band: rote Fläche, die Nummer als Schrift ───────────────────── */
.anruf{ padding-block:clamp(64px,8vw,120px); background:var(--rot); color:#fff; }
.anruf ::selection{ background:var(--tinte); color:#fff; }
.anruf :focus-visible{ outline-color:#fff; }
.anruf__innen{ display:grid; gap:26px; }
.anruf h2{ font-size:clamp(1.6rem,1.2rem + 1.5vw,2.5rem); color:#fff; }
.anruf__nummer{ display:inline-flex; flex-wrap:wrap; column-gap:.24em; justify-self:start; font:600 clamp(3.1rem,1.2rem + 7.6vw,8rem)/.94 var(--display); letter-spacing:-.05em; color:#fff; font-variant-numeric:tabular-nums; text-decoration:underline; text-decoration-color:transparent; text-decoration-thickness:.045em; text-underline-offset:.1em; transition:text-decoration-color var(--d-1) var(--e-aus); }
@media (hover:hover){ .anruf__nummer:hover{ text-decoration-color:#fff; } }
.anruf__unten{ display:grid; gap:22px; padding-top:24px; border-top:1px solid rgba(255,255,255,.4); }
.anruf__unten p{ max-width:54ch; color:#fff; }
.anruf__zeile{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 18px; font-size:.95rem; }
.anruf .status{ color:#fff; }
.anruf .status::before,.anruf .status.is-offen::before{ background:#fff; }
.anruf .knopf--rand{ border-color:rgba(255,255,255,.6); color:#fff; }
@media (hover:hover){ .anruf .knopf--rand:hover{ border-color:#fff; } }
@media (min-width:960px){ .anruf__unten{ grid-template-columns:minmax(0,1fr) auto; align-items:end; column-gap:56px; } }
@media (max-width:600px){ .anruf__nummer span{ display:block; } }

/* ── Weitere Leistungen: Textliste ─────────────────────────────────────── */
.mliste{ border-top:1px solid var(--linie); }
.mliste a{ display:grid; grid-template-columns:minmax(0,1fr) 28px; align-items:center; gap:4px 24px; padding:22px 0; border-bottom:1px solid var(--linie); text-decoration:none; }
.mliste b{ font:600 clamp(1.35rem,1.05rem + 1.1vw,2.1rem)/1.12 var(--display); letter-spacing:-.03em; transition:color var(--d-1) var(--e-aus); }
.mliste small{ grid-column:1; color:var(--text-fliess); font-size:1rem; }
.mliste svg{ grid-column:2; grid-row:1/3; width:24px; height:24px; color:var(--text-2); transition:transform var(--d-2) var(--e-feder), color var(--d-1) var(--e-aus); }
@media (hover:hover){ .mliste a:hover b{ color:var(--rot-text); } .mliste a:hover svg{ transform:translateX(4px); color:var(--text); } }
@media (min-width:960px){ .mliste a{ grid-template-columns:minmax(0,1fr) minmax(0,1fr) 28px; } .mliste small{ grid-column:2; grid-row:1; } .mliste svg{ grid-column:3; grid-row:1; } }

/* ── Kontakt ───────────────────────────────────────────────────────────── */
.held--klein{ min-height:min(66svh,640px); }
.held__h1{ font-size:clamp(2.6rem,1.5rem + 3.6vw,3.6rem); letter-spacing:-.035em; line-height:1.02; color:#fff; }
.held__h1 .rot{ display:block; }
.wege{ display:grid; border-top:1px solid var(--linie); }
.weg{ display:grid; gap:10px; align-content:start; padding:28px 0; border-bottom:1px solid var(--linie); color:var(--text); text-decoration:none; }
.weg__art{ font-size:.8125rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--text-3); }
.weg h3{ font-size:clamp(1.45rem,1.15rem + 1.1vw,2.1rem); letter-spacing:-.03em; overflow-wrap:anywhere; }
.weg p{ color:var(--text-fliess); max-width:40ch; }
.weg__mehr{ display:inline-flex; align-items:center; gap:8px; min-height:44px; color:var(--rot-text); font-weight:600; }
.weg__mehr svg{ width:20px; height:20px; transition:transform var(--d-2) var(--e-feder); }
@media (hover:hover){ .weg:hover .weg__mehr svg{ transform:translateX(4px); } }
@media (min-width:960px){
  .wege{ grid-template-columns:repeat(3,minmax(0,1fr)); border-bottom:1px solid var(--linie); }
  .weg{ padding:32px 32px 28px; border-bottom:0; border-left:1px solid var(--linie); }
  .weg:first-child{ padding-left:0; border-left:0; }
}
.kontakt-paar{ display:grid; gap:14px; }
.kformular{ display:grid; gap:16px; padding:clamp(20px,3vw,36px); background:var(--blatt); border:1px solid var(--linie-hell); border-radius:var(--r-2); color:var(--tinte); }
.kfeld{ display:grid; gap:6px; align-content:start; }
.kfeld label{ font-weight:600; font-size:.9375rem; }
.kfeld label small{ font-weight:400; color:var(--tinte-2); }
.kfeld input,.kfeld select,.kfeld textarea{ width:100%; min-height:50px; padding:12px 14px; font:inherit; font-size:1rem; color:var(--tinte); background:#fff; border:1px solid var(--linie-hell-2); border-radius:var(--r-2); transition:border-color var(--d-1) var(--e-aus), box-shadow var(--d-1) var(--e-aus); }
.kfeld textarea{ min-height:150px; resize:vertical; }
.kfeld input:focus-visible,.kfeld select:focus-visible,.kfeld textarea:focus-visible{ outline:none; border-color:var(--tinte); box-shadow:0 0 0 3px rgba(200,40,26,.22); }
.kfeld.is-fehler input,.kfeld.is-fehler textarea{ border-color:var(--rot); }
.kfeld__fehler{ color:var(--rot); font-size:.875rem; }
.kfeld--falle{ position:absolute!important; left:-9999px; width:1px; height:1px; overflow:hidden; }
.kformular__hinweis{ font-size:.875rem; color:var(--tinte-2); }
.kformular__hinweis a,.kformular__fehler a,.kformular__danke a{ color:var(--tinte); }
.kformular__fehler,.kformular__danke{ padding:14px 16px; border-radius:var(--r-2); background:var(--hell); font-size:.95rem; }
.kformular__fehler{ border:1px solid var(--rot); }
.kformular__danke{ border:1px solid var(--linie-hell-2); }
.kformular button[type="submit"]{ justify-self:start; }
.kformular.is-sendet button[type="submit"]{ opacity:.72; pointer-events:none; }
@media (min-width:640px){ .kformular{ grid-template-columns:1fr 1fr; } .kfeld--breit{ grid-column:1/-1; } }
.karte-map{ position:relative; min-height:440px; overflow:hidden; border-radius:var(--r-2); background:var(--schwarz); color:var(--text); }
.karte-map__platz{ display:grid; gap:14px; align-content:center; height:100%; padding:clamp(24px,4vw,44px); }
.karte-map__platz h3{ font-size:clamp(1.9rem,1.4rem + 1.8vw,2.8rem); letter-spacing:-.035em; }
.karte-map__ort{ color:var(--text); font-size:1.0625rem; }
.karte-map__platz p{ color:var(--text-fliess); font-size:.95rem; max-width:44ch; }
.karte-map a{ color:var(--text); }
.karte-map .knopf--rand{ border-color:var(--linie-2); color:var(--text); }
@media (hover:hover){ .karte-map .knopf--rand:hover{ border-color:var(--text); } }
.karte-map iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
@media (min-width:960px){ .kontakt-paar{ grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); align-items:stretch; } }

/* ── Rechtsseiten und 404 ──────────────────────────────────────────────── */
.rechtsseite{ background:var(--hell); color:var(--tinte); }
.rechtsseite ::selection{ background:var(--tinte); color:#fff; }
.rechtsseite main :focus-visible{ outline-color:var(--rot); }
.seite{ padding-block:calc(var(--kopf-h) + clamp(48px,6vw,88px)) clamp(72px,8vw,120px); }
.seite .wrap{ max-width:calc(820px + 2 * var(--rand)); }
.titel{ margin-bottom:clamp(24px,3vw,40px); font-size:clamp(2.4rem,1.6rem + 3vw,3.6rem); letter-spacing:-.035em; }
.einleitung{ max-width:52ch; font-size:clamp(1.0625rem,1rem + .35vw,1.25rem); color:var(--tinte-2); }
.recht{ color:var(--tinte); }
.recht h2{ margin:44px 0 12px; font-size:clamp(1.35rem,1.2rem + .6vw,1.75rem); letter-spacing:-.025em; }
.recht h3{ margin:26px 0 8px; font-size:1.15rem; letter-spacing:-.015em; }
.recht p,.recht ul,.recht ol{ margin:0 0 14px; }
.recht ul,.recht ol{ padding-left:1.25em; list-style:disc; }
.recht li{ margin-bottom:4px; }
.recht a:not(.knopf){ color:var(--rot); overflow-wrap:anywhere; }
.recht strong,.recht b{ font-weight:600; }
.tabelle{ overflow-x:auto; margin:8px 0 22px; border:1px solid var(--linie-hell); border-radius:var(--r-2); background:var(--blatt); }
.tabelle table{ width:100%; min-width:560px; border-collapse:collapse; font-size:.9375rem; }
.tabelle th,.tabelle td{ padding:11px 14px; border-bottom:1px solid var(--linie-hell); text-align:left; vertical-align:top; }
.tabelle th{ font-weight:600; background:var(--hell); }
.tabelle tr:last-child td{ border-bottom:0; }
.rechtsseite .fuss{ padding-block:0 28px; }
.rechtsseite .fuss__unten{ border-top:0; }

/* ── Abschaltblock: reduzierte Bewegung zeigt den Endzustand ───────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:1ms!important; animation-iteration-count:1!important; transition-duration:1ms!important; transition-delay:0ms!important; }
  .js .rv{ opacity:1; transform:none; }
  .js .ck path{ stroke-dashoffset:0; animation:none; }
  .js .unterstrich svg{ clip-path:none; animation:none; }
  .ablauf::after{ transform:none; }
  .knopf:active{ transform:none; }
}

/* ── Ergänzungen: Leistungsliste, Kopf mobil, Galerie, Anfahrt ── */
html:not(.js) .preise__panel + .preise__panel{ margin-top:36px; }

.lzeile{ grid-template-columns:72px minmax(0,1fr); grid-template-areas:"bild name" "bild preis" "bild info"; row-gap:2px; }
.lzeile__preis{ color:var(--rot); font-size:.95rem; }
@media (min-width:1080px){
  .lzeile{ grid-template-columns:minmax(0,1fr) auto 28px; grid-template-areas:"name preis pfeil" "info info pfeil"; column-gap:24px; row-gap:6px; padding:22px 12px; }
  .lzeile__preis{ color:var(--tinte); font-size:1.0625rem; }
  .lzeile__pfeil{ align-self:center; }
  .lzeile__info{ max-width:56ch; }
}

@media (max-width:420px){
  .kopf__innen{ gap:12px; }
  .kopf__logo img{ height:32px; }
  .kopf__cta{ gap:6px; }
  .kopf__anruf{ padding:0 14px; }
}
/* Kopf: Telefon- und WhatsApp-Icon auf allen Seiten (Florian 07.10.2026); Menü unter 600 px nur als Icon */
.kopf__icon{ display:inline-grid; place-items:center; flex:none; width:44px; height:44px; border:1px solid var(--linie-2); border-radius:var(--r-2); color:var(--text); text-decoration:none; transition:color var(--d-1) var(--e-aus), border-color var(--d-1) var(--e-aus), background-color var(--d-1) var(--e-aus); }
.kopf__icon svg{ width:20px; height:20px; }
.kopf__icon--rot{ background:var(--rot); border-color:var(--rot); color:#fff; }
@media (hover:hover){
  .kopf__wa:hover{ color:#25D366; border-color:#25D366; }
  .kopf__icon--rot:hover{ background:var(--rot-tief); border-color:var(--rot-tief); }
}
@media (max-width:599px){
  .kopf__menue{ width:44px; padding:0; justify-content:center; }
  .kopf__menue span{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
}
@media (max-width:480px){ .kopf__start{ display:none; } }
@media (max-width:359px){
  .kopf__anruf{ width:44px; padding:0; justify-content:center; }
  .kopf__anruf .kurz{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
}

@media (max-width:899px){ .galerie__f{ grid-column:1/-1; } .galerie__f img{ aspect-ratio:3/2; } }

.daten > div{ display:block; position:relative; min-height:77px; padding:16px 0 16px 60px; }
.daten dt{ display:block; }
.daten dt .ic{ position:absolute; left:0; top:16px; }
@media (max-width:520px){ .liste--drei li > span:first-child{ font-size:.9375rem; line-height:1.35; } .liste--drei small{ display:block; } }
@media (min-width:960px){ .frage__a p{ font-size:1rem; } }
@media (min-width:960px){ .frage__a p{ padding-right:24px; } .was__text p + p{ font-size:1.0625rem; } }
@media (max-width:600px){ .mliste svg{ grid-row:1; } .mliste small{ grid-column:1/-1; font-size:.9375rem; } }
@media (min-width:960px){ .frage__a p{ max-width:33em; padding-right:0; } .was__text p{ max-width:33em; } }
.kopf__logo{ display:inline-flex; align-items:center; min-height:44px; }
.insta__handle{ min-height:44px; }
/* Preisliste mit drei Spalten: auf schmalen Handys steht die Leistung über ihren Preisen */
@media (max-width:480px){
  .liste__kopf,.liste--drei li{ grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:8px; }
  .liste__kopf span:first-child{ display:none; }
  .liste--drei li{ row-gap:4px; }
  .liste--drei li > span:first-child{ grid-column:1/-1; font-size:1rem; }
}
@media (max-width:480px){ .liste--drei small{ display:inline; } }
/* Preis-Reiter der Leistungsseiten: Preis rutscht in die nächste Zeile, wenn beides nicht passt */
.lreiter__knopf{ flex-wrap:wrap; row-gap:4px; }
.lreiter__knopf b{ min-width:0; }
.lreiter__knopf span{ flex:0 1 auto; }
@media (max-width:359px){ .lzeile{ grid-template-columns:56px minmax(0,1fr); column-gap:12px; } .lzeile__bild{ width:56px; height:56px; } .lzeile__info{ font-size:.9375rem; } }
@media (max-width:359px){ .mliste small{ font-size:.875rem; } }
@media (min-width:600px) and (max-width:1079px){ .lzeile__info{ max-width:34em; } }
@media (min-width:600px) and (max-width:959px){ .was__text p, .ablauf p, .frage__a p{ max-width:32em; } }
@media (min-width:600px){ .frage__a p{ font-size:1rem; } }
.einleitung{ max-width:44ch; }
@media (min-width:600px) and (max-width:959px){ .frage__a p{ padding-right:0; } }

/* Kicker: nur Text in der Akzentfarbe, kein Versal-Sperrsatz (rgn-fehlerliste-sektionen).
   Selektor stärker als .sek__kopf p, sonst erbt der Kicker Größe und Grau des Lead-Absatzes */
.kicker, .sek__kopf p.kicker{ font:600 .9375rem/1.3 var(--sans); letter-spacing:0; text-transform:none; color:var(--rot-text); max-width:none; }
.sek--hell .kicker, .sek--hell .sek__kopf p.kicker{ color:var(--rot); }

/* Zweispaltige Köpfe: H2 höchstens zweizeilig (rgn-ueberschriften-zweizeilig).
   Größe gemessen: größte zweizeilige Schrift je Breite × 0,95, engste Stelle gibt den Wert vor */
@media (min-width:1000px){ .ueber__text h2, .pbox__kopf h2{ font-size:clamp(2rem, 3.4vw - 2px, 2.65rem); } }
@media (min-width:960px){ .was__kopf h2{ font-size:clamp(2rem, 4.4vw - 4px, 3.35rem); } }

/* Abschluss der Unterseiten (ersetzt die rote Anruf-Fläche, Kunde 09.10.2026: „wirkt scammy“) */
.abschluss{ padding-block:clamp(16px,3vw,40px) clamp(56px,7vw,96px); }
.abschluss__karte{ position:relative; isolation:isolate; overflow:hidden; display:flex; align-items:center; min-height:clamp(420px,44vw,540px); border-radius:var(--r-2); }
.abschluss__bild{ position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; }
.abschluss__karte::before{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg, rgba(14,13,13,.9) 0%, rgba(14,13,13,.74) 42%, rgba(14,13,13,.28) 78%, rgba(14,13,13,.12) 100%); }
.abschluss__inhalt{ display:grid; gap:20px; max-width:560px; padding:clamp(28px,5vw,64px); }
.abschluss h2{ font-size:clamp(1.8rem,1.3rem + 1.6vw,2.75rem); color:#fff; }
.abschluss__inhalt > p{ max-width:44ch; color:#fff; }
.abschluss__info{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 20px; font-size:.9rem; color:rgba(255,255,255,.86); }
.abschluss .status{ color:#fff; }
@media (max-width:759px){
  .abschluss__karte{ align-items:flex-end; min-height:560px; }
  .abschluss__karte::before{ background:linear-gradient(0deg, rgba(14,13,13,.94) 0%, rgba(14,13,13,.86) 48%, rgba(14,13,13,.4) 78%, rgba(14,13,13,.15) 100%); }
  .abschluss .knopfreihe .knopf{ flex:1 1 100%; }
}

/* Google-Pille am Handy mittig (Florian 09.10.2026) */
@media (max-width:959px){ .gpille{ justify-self:center; } }

/* Leistungsliste bis 1079 px: Tags weg, dafür „Mehr erfahren →“ unter dem Text (Florian 09.10.2026) */
.lzeile__mehr{ display:none; }
@media (max-width:1079px){
  .lzeile{ grid-template-areas:"bild name" "bild info" "bild mehr"; }
  .lzeile__preis{ display:none; }
  .lzeile__mehr{ grid-area:mehr; justify-self:start; display:inline-flex; align-items:center; gap:6px; margin-top:8px; font-size:.9375rem; font-weight:600; color:var(--rot); }
  .lzeile__mehr svg{ width:18px; height:18px; flex:none; transition:transform var(--d-2) var(--e-feder); }
  .lzeile:hover .lzeile__mehr svg, .lzeile:active .lzeile__mehr svg{ transform:translateX(4px); }
}