/* Facility Service Salanov, Embsen — stil.css (Besitzer kleim-bau)
   Grundlayout, Bausteine, Farben, Typografie. KEINE Breitenabfrage hier:
   Handy -> handy.css (kleim-mobile), ab 1200px -> desktop.css (kleim-desktop).
   Leitidee: die Visitenkarte wird zur Seite. Vorderseite = Tinte-Bänder,
   Rückseite = Kartengrund mit Dreistreifen-Leiste Tinte/Rost/Bronze.
   Farbquellen (Datei + Objekt) stehen in inhalt/auftrag.json -> markenfarben.
   Kontrast (gerechnet): Tinte auf Karte 17:1 · Rost auf Karte 5,2:1 ·
   Weiß auf Rost 5,5:1 · Bronze-Text auf Karte 6,4:1 · Ocker auf Tinte 7,6:1 ·
   Leinen auf Tinte 14:1 · Grau auf Karte 7:1 · Grau auf Leinen 6:1. */

@font-face{font-family:'Outfit';src:url(/assets/fonts/outfit-var.woff2) format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Karla';src:url(/assets/fonts/karla-var.woff2) format('woff2');font-weight:400 800;font-style:normal;font-display:swap}

:root{
  --karte:#FBF8F3;        /* Seitengrund: Visitenkarte Rückseite */
  --weiss:#FFFFFF;
  --leinen:#EFE8DA;       /* getönte Fläche, abgeleitet aus Leinen #E8E2D6 */
  --leinen-linie:#DCD2BF;
  --leinen-hell:#E8E2D6;  /* Text auf Tinte, logo-dunkel F */
  --tinte:#1A1A1A;        /* Logo F, Kartenvorderseite */
  --tinte-2:#2A2927;      /* Linien und Karten auf Tinte */
  --rost:#B34700;         /* Logo S: NUR Handlung + Rostband */
  --rost-tief:#8F3900;    /* Knopf gedrückt/überfahren */
  --bronze:#8A6F3E;       /* Logo S: Grafik, Streifen */
  --bronze-text:#6E5830;  /* Kicker auf Hell */
  --ocker:#D9A05B;        /* logo-dunkel S: Kicker/Ziffern auf Tinte */
  --grau:#57524A;         /* Nebentext auf Hell */
  --grau-hell:#B9B1A2;    /* Nebentext auf Tinte */
  --linie:rgba(26,26,26,.13);
  --linie-hell:rgba(232,226,214,.18);
  --kopf:'Outfit','Avenir Next','Segoe UI',Arial,sans-serif;
  --text:'Karla','Helvetica Neue',Arial,sans-serif;
  --wrapw:1200px;
  --sp:clamp(18px,5vw,56px);
  --abst:clamp(64px,8vw,120px);
  --kopfh:76px;
  --rad:4px;
  --sanft:cubic-bezier(.22,.68,.34,1);
}

/* Umschaltung der Handy-Kurzfassungen: Grundregel VOR jeder Breitenabfrage */
.m-only.m-only{display:none}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:var(--kopfh)}
body{margin:0;background:var(--karte);color:var(--tinte);font-family:var(--text);font-size:18px;line-height:1.6;overflow-x:clip}
h1,h2,h3,p,ul,ol,figure{margin:0;padding:0}
ul,ol{list-style:none}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:var(--rost)}
a:hover{color:var(--rost-tief)}
:focus-visible{outline:2px solid var(--rost);outline-offset:3px}
.sr{position:absolute;left:8px;top:-60px;z-index:300;background:var(--tinte);color:var(--karte);padding:10px 14px}
.sr:focus{top:8px}
.wrap{width:min(var(--wrapw),100% - 2*var(--sp));margin-inline:auto}

/* ---------------------------------------------------------- Typo */
.h1,.h2,.h3,h3{font-family:var(--kopf);font-weight:600;letter-spacing:-.02em;line-height:1.08;color:inherit}
.h1{font-size:clamp(42px,5.4vw,80px);font-weight:600}
.h2{font-size:clamp(32px,3.6vw,54px)}
.h3,h3{font-size:clamp(21px,1.5vw,26px);line-height:1.2;letter-spacing:-.01em}
.kicker{display:flex;align-items:center;gap:10px;font-family:var(--kopf);font-weight:600;font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--bronze-text);margin-bottom:16px}
.kicker::before{content:"";flex:0 0 12px;width:12px;height:12px;background:var(--gruppe,var(--rost))}

/* Dreistreifen-Leiste der Visitenkarte */
.streifen{display:flex;height:6px}
.streifen i{flex:1;background:var(--tinte)}
.streifen i:nth-child(2){background:var(--rost)}
.streifen i:nth-child(3){background:var(--bronze)}

/* ---------------------------------------------------------- Knöpfe */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:12px 24px;border-radius:var(--rad);
  font-family:var(--kopf);font-weight:600;font-size:17px;line-height:1.1;text-decoration:none;cursor:pointer;border:2px solid transparent}
.knopf-voll{background:var(--rost);color:var(--weiss)}
.knopf-voll:hover{background:var(--rost-tief);color:var(--weiss)}
.knopf-rand{background:transparent;color:var(--tinte);border-color:var(--tinte)}
.knopf-rand:hover{background:var(--tinte);color:var(--karte)}
.knopf-hell{background:var(--karte);color:var(--tinte)}
.knopf-hell:hover{background:var(--leinen);color:var(--tinte)}
.knopf-rand-hell{background:transparent;color:var(--leinen-hell);border-color:var(--leinen-hell)}
.knopf-rand-hell:hover{background:var(--leinen-hell);color:var(--tinte)}
.knopfreihe{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.pfeil{display:inline-flex;align-items:center;gap:8px;font-family:var(--kopf);font-weight:600;text-decoration:none}
.pfeil::after{content:"";width:18px;height:2px;background:currentColor;transition:width .2s var(--sanft)}
.pfeil:hover::after{width:28px}

/* Klick-Feedback (Tim 15.10.2026) */
.knopf,.kachel,.modal-zu,[data-modal],.weg,.karte-weg,.wege-kachel,.weiter-kachel{-webkit-tap-highlight-color:transparent;
  touch-action:manipulation;transition:transform .12s ease,background-color .12s ease,color .12s ease}
.knopf:active,.kachel:active,.modal-zu:active,[data-modal]:active,.weg:active,.karte-weg:active,.wege-kachel:active,.weiter-kachel:active{transform:translateY(1px) scale(.97)}
.knopf-voll:active{background:var(--rost-tief)}

/* ---------------------------------------------------------- Kopfleiste */
.kopf{position:sticky;top:0;z-index:100;background:var(--karte);border-bottom:1px solid var(--linie)}
.kopf .streifen{height:4px}
.kopf-in{display:flex;align-items:center;gap:20px;min-height:72px;flex-wrap:wrap}
.marke{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--tinte);margin-right:auto}
.marke-zeichen .fss{height:38px;width:auto}
.marke-name b{display:block;font-family:var(--kopf);font-weight:700;font-size:17px;line-height:1.1;letter-spacing:-.01em}
.marke-name small{display:block;font-size:13px;color:var(--grau);letter-spacing:.04em}
.nav{display:flex;flex-wrap:wrap;gap:4px 22px}
.nav a{font-family:var(--kopf);font-weight:500;font-size:16px;color:var(--tinte);text-decoration:none;padding:6px 0;border-bottom:2px solid transparent}
.nav a:hover,.nav a.hier{border-bottom-color:var(--rost)}
.kopf-akt{display:flex;gap:8px;margin-left:28px}
.kopf-akt .knopf{min-height:44px;padding:8px 18px;font-size:16px}
.menue-striche{width:16px;height:10px;border-block:2px solid currentColor;position:relative}

/* ---------------------------------------------------------- Held (Start) */
.held{background:var(--karte);padding-block:clamp(44px,6vw,96px) clamp(28px,3vw,44px);overflow:clip}
.held-in{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:clamp(36px,5vw,80px);align-items:center}
.held-satz{font-size:clamp(19px,1.4vw,22px);color:var(--grau);max-width:34em;margin-top:22px}
.held-karte{position:relative;aspect-ratio:10/8;width:100%;max-width:620px;justify-self:end}
.vk{position:absolute;width:78%;aspect-ratio:85/55;border-radius:10px;box-shadow:0 18px 40px -22px rgba(26,26,26,.55)}
.vk-hinten{right:0;bottom:0;background:var(--karte);border:1px solid var(--leinen-linie);overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-end;text-align:right;padding:0 8% 9%;transform:rotate(2.5deg)}
.vk-hinten .streifen{position:absolute;left:0;right:0;top:0;height:7%}
.vk-name{font-family:var(--kopf);font-weight:700;font-size:clamp(20px,2.2vw,32px);letter-spacing:-.01em;line-height:1.1}
.vk-rolle{font-family:var(--kopf);font-size:clamp(10px,.9vw,13px);letter-spacing:.18em;text-transform:uppercase;color:var(--rost);margin-top:6px}
.vk-tel{font-size:clamp(14px,1.3vw,19px);margin-top:14px}
.vk-vorn{left:0;top:0;z-index:2;background:var(--tinte);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6%;transform:rotate(-4deg)}
.vk-zeichen .fss{width:42%;height:auto;margin-inline:auto}
.vk-zeichen{width:100%;display:block}
.vk-zeile{font-family:var(--kopf);font-weight:500;font-size:clamp(9px,.85vw,12px);letter-spacing:.28em;text-transform:uppercase;color:var(--grau-hell)}
.anker{display:flex;flex-wrap:wrap;gap:10px 40px;margin-top:clamp(36px,4vw,56px);padding-top:18px;border-top:1px solid var(--linie);color:var(--grau);font-size:16px}
.anker b{font-family:var(--kopf);font-weight:600;color:var(--tinte);margin-right:6px}

/* ---------------------------------------------------------- Drei Bereiche (Tinte-Band) */
.bereiche{background:var(--tinte);color:var(--leinen-hell);padding-block:var(--abst)}
.bereiche .kicker,.kontakt-teil .kicker,.schluss .kicker,.alex-kontakt .kicker{color:var(--ocker)}
.bereiche-kopf{max-width:720px;margin-bottom:clamp(36px,4vw,60px)}
.bereiche-liste{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:clamp(18px,2vw,28px)}
.bereich{position:relative;display:flex;flex-direction:column;gap:12px;padding:30px 28px 28px;background:var(--tinte-2);border-top:6px solid var(--gruppe-dunkel)}
.bereich-garten{--gruppe:var(--tinte);--gruppe-dunkel:var(--leinen-hell);--gruppe-flaeche:var(--tinte)}
.bereich-renovierung{--gruppe:var(--rost);--gruppe-dunkel:var(--rost);--gruppe-flaeche:var(--rost)}
.bereich-umzug{--gruppe:var(--bronze);--gruppe-dunkel:var(--ocker);--gruppe-flaeche:var(--bronze)}
.bereich-nr{font-family:var(--kopf);font-weight:600;font-size:15px;letter-spacing:.14em;color:var(--ocker)}
.bereich-motiv{height:150px;background:var(--karte);border-radius:var(--rad);display:flex;align-items:center;justify-content:center;padding:12px}
.bereich-motiv:empty{display:none}
.bereich-motiv img,.bereich-motiv svg{height:100%;width:auto;max-width:100%;object-fit:contain}
.bereich h3{color:var(--weiss)}
.bereich p{color:var(--grau-hell);flex:1}
.bereich .pfeil{color:var(--ocker)}
.bereich .pfeil:hover{color:var(--leinen-hell)}

/* ---------------------------------------------------------- Ablauf (Leinen) */
.ablauf{background:var(--leinen);padding-block:var(--abst)}
.ablauf .h2{margin-bottom:clamp(36px,4vw,56px);max-width:16em}
.schritte{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:28px 24px}
.schritt{position:relative}
.schritt-nr{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;background:var(--tinte);color:var(--karte);
  font-family:var(--kopf);font-weight:600;font-size:20px;margin-bottom:18px;position:relative;z-index:1}
.schritt:not(:last-child)::after{content:"";position:absolute;top:23px;left:60px;right:0;height:2px;background:var(--bronze)}
.schritt h3{margin-bottom:6px}
.schritt p{color:var(--grau)}

/* ---------------------------------------------------------- Satzband (Rost) */
.satzband{background:var(--rost);color:var(--weiss);padding-block:clamp(52px,6vw,88px)}
.satzband-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:28px}
.satzband-satz{font-family:var(--kopf);font-weight:600;font-size:clamp(30px,3.6vw,52px);line-height:1.1;letter-spacing:-.02em}

/* ---------------------------------------------------------- Über Alex */
.alex{background:var(--weiss);padding-block:var(--abst)}
.alex-in{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:clamp(32px,5vw,80px);align-items:center}
.alex-bild{position:relative;max-width:460px}
.alex-bild:empty{display:none}
.alex-bild::after{content:"";position:absolute;left:0;right:0;bottom:0;height:8px;background:linear-gradient(90deg,var(--tinte) 0 33.3%,var(--rost) 33.3% 66.6%,var(--bronze) 66.6%)}
.alex-bild img{display:block}
.alex-text .h2{margin-bottom:20px}
.alex-text p{max-width:32em;color:var(--grau)}
.versprechen{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:18px;margin-top:30px}
.versprechen li{padding-top:14px;border-top:2px solid var(--tinte);color:var(--grau)}
.versprechen b{display:block;font-family:var(--kopf);font-weight:600;font-size:20px;color:var(--tinte)}
.alex-kontakt{background:var(--tinte);color:var(--leinen-hell)}
.alex-kontakt .alex-text p{color:var(--grau-hell)}

/* ---------------------------------------------------------- Einsatzgebiet (Leinen) */
.gebiet{background:var(--leinen);padding-block:var(--abst)}
.gebiet-in{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));gap:clamp(32px,5vw,80px);align-items:center}
.gebiet-text p:not(.kicker){color:var(--grau);margin-top:18px}
.gebiet-skizze img,.gebiet-skizze svg{width:100%;height:auto}
.gebiet-skizze:empty{display:none}

/* ---------------------------------------------------------- Kontakt (Tinte) + Kartenrückseite */
.kontakt-teil{background:var(--tinte);color:var(--leinen-hell);padding-block:var(--abst)}
.kontakt-in{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:clamp(36px,5vw,80px);align-items:center}
.kontakt-text p:not(.kicker){color:var(--grau-hell);margin-top:18px;max-width:30em}
.karte-hinten{position:relative;background:var(--karte);color:var(--tinte);border-radius:10px;padding:clamp(34px,4vw,48px) clamp(24px,3.5vw,44px) clamp(24px,3vw,34px);overflow:hidden}
.karte-hinten .streifen{position:absolute;left:0;right:0;top:0;height:10px}
.karte-name{font-family:var(--kopf);font-weight:700;font-size:clamp(28px,2.6vw,38px);letter-spacing:-.01em;line-height:1.1}
.karte-rolle{font-family:var(--kopf);font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--rost);margin:6px 0 22px}
.karte-weg{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;padding:12px 0;border-top:1px solid var(--linie);color:var(--tinte);text-decoration:none;
  font-size:clamp(18px,1.4vw,21px);word-break:break-word}
.karte-weg span{flex:0 0 84px;font-family:var(--kopf);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--grau)}
.karte-weg:hover{color:var(--rost)}
.karte-legende{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:20px;font-size:14px;color:var(--grau)}
.karte-legende i{width:9px;height:9px;background:var(--tinte)}
.karte-legende .lg-renovierung{background:var(--rost)}
.karte-legende .lg-umzug{background:var(--bronze);margin-left:2px}
.karte-legende .lg-renovierung{margin-left:2px}

/* ---------------------------------------------------------- Unterseiten */
.seitenkopf{background:var(--karte);padding-block:clamp(40px,5vw,84px)}
.seitenkopf-garten{--gruppe:var(--tinte);--gruppe-flaeche:var(--tinte)}
.seitenkopf-renovierung{--gruppe:var(--rost);--gruppe-flaeche:var(--rost)}
.seitenkopf-umzug{--gruppe:var(--bronze);--gruppe-flaeche:var(--bronze)}
.seitenkopf-kontakt{--gruppe:var(--rost)}
.seitenkopf-in{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:clamp(32px,5vw,80px);align-items:center}
.seitenkopf-text p:not(.kicker){color:var(--grau);font-size:clamp(19px,1.4vw,22px);margin-top:22px;max-width:32em}
.seitenkopf-motiv{position:relative;aspect-ratio:4/3;background:var(--leinen);border-top:8px solid var(--gruppe-flaeche);border-radius:var(--rad);display:flex;align-items:center;justify-content:center;padding:10%;overflow:hidden}
.seitenkopf-motiv::after{content:"";position:absolute;left:0;right:0;bottom:0;height:10px;background:linear-gradient(90deg,var(--tinte) 0 33.3%,var(--rost) 33.3% 66.6%,var(--bronze) 66.6%)}
.seitenkopf-motiv img,.seitenkopf-motiv svg{width:100%;height:100%;object-fit:contain}

.posten{background:var(--weiss);padding-block:var(--abst)}
.posten .h2,.gewerke .h2,.wege .h2,.ablauf-kurz .h2{margin-bottom:clamp(30px,3.5vw,52px)}
.posten-liste{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:24px}
.posten-liste li{padding-top:18px;border-top:4px solid var(--tinte)}
.posten-nr{font-family:var(--kopf);font-weight:600;color:var(--bronze-text);letter-spacing:.1em}
.posten-liste h3{margin:4px 0 8px}
.posten-liste p{color:var(--grau)}

.takt{background:var(--leinen);padding-block:var(--abst)}
.takt-in .h2{margin-bottom:32px}
.takt-paar{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:20px}
.takt-feld{background:var(--karte);padding:30px 28px;border-left:6px solid var(--tinte)}
.takt-feld + .takt-feld{border-left-color:var(--bronze)}
.takt-feld h3{margin-bottom:8px}
.takt-feld p{color:var(--grau)}

.gewerke{background:var(--weiss);padding-block:var(--abst)}
.gewerk{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 32px;padding:26px 0;border-top:1px solid var(--linie)}
.gewerk:last-child{border-bottom:1px solid var(--linie)}
.gewerk-nr{flex:0 0 56px;font-family:var(--kopf);font-weight:600;font-size:28px;color:var(--rost)}
.gewerk h3{flex:1 1 220px}
.gewerk p{flex:2 1 320px;color:var(--grau)}

.gegenueber{background:var(--weiss);padding-block:var(--abst)}
.gegenueber-in{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));gap:20px}
.gegenueber-feld{background:var(--karte);border:1px solid var(--leinen-linie);border-top:8px solid var(--bronze);padding:clamp(28px,3.5vw,48px)}
.gegenueber-feld .h2{font-size:clamp(28px,2.6vw,40px);margin-bottom:14px}
.gegenueber-feld p:not(.kicker){color:var(--grau)}
.gegenueber-dunkel{background:var(--tinte);border-color:var(--tinte);border-top-color:var(--ocker);color:var(--leinen-hell)}
.gegenueber-dunkel .kicker{color:var(--ocker)}
.gegenueber-dunkel p:not(.kicker){color:var(--grau-hell)}

.wege{background:var(--weiss);padding-block:var(--abst)}
.wege-raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:16px}
.wege-kachel{display:flex;flex-direction:column;gap:8px;min-height:150px;padding:26px;background:var(--karte);border:1px solid var(--leinen-linie);border-radius:var(--rad);color:var(--tinte);text-decoration:none}
.wege-kachel b{font-family:var(--kopf);font-weight:600;font-size:24px}
.wege-kachel span{color:var(--grau)}
.wege-kachel:hover{border-color:var(--tinte);color:var(--tinte)}
.wege-wa{background:var(--rost);border-color:var(--rost);color:var(--weiss)}
.wege-wa span{color:var(--weiss)}
.wege-wa:hover{background:var(--rost-tief);color:var(--weiss)}

.weiter{background:var(--karte);padding-block:clamp(40px,5vw,64px);border-top:1px solid var(--linie)}
.weiter-in{display:flex;flex-wrap:wrap;align-items:center;gap:18px 40px}
.weiter-liste{display:flex;flex-wrap:wrap;gap:10px}
.weiter-kachel{display:flex;align-items:center;gap:12px;min-height:52px;padding:10px 20px;border:1px solid var(--leinen-linie);background:var(--weiss);border-radius:var(--rad);
  color:var(--tinte);text-decoration:none;font-family:var(--kopf);font-weight:600}
.weiter-kachel span{font-weight:500;color:var(--bronze-text)}
.weiter-kachel::before{content:"";width:10px;height:10px;background:var(--gruppe,var(--leinen-linie))}
.weiter-kachel:hover{border-color:var(--tinte);color:var(--tinte)}

.schluss{background:var(--tinte);color:var(--leinen-hell);padding-block:var(--abst)}
.schluss-in p{color:var(--grau-hell);margin-top:16px}

/* ---------------------------------------------------------- Fußzeile */
.fuss{background:var(--karte);color:var(--grau);font-size:15px}
.fuss-in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px;padding-block:36px 20px}
.fuss-name{color:var(--tinte)}
.fuss-name b{font-family:var(--kopf);font-weight:700}
.fuss-marke p + p{margin-top:4px}
.fuss a{color:var(--tinte)}
.fuss-nav{display:flex;flex-wrap:wrap;gap:6px 22px}
.fuss-nav a{text-decoration:none;font-family:var(--kopf);font-weight:500}
.fuss-unten{display:flex;flex-wrap:wrap;gap:8px 22px;padding-block:16px 28px;border-top:1px solid var(--linie);font-size:14px}
.fuss-recht{text-decoration:none}
.credit{margin-left:auto}
.bodenleiste{display:none}

/* ---------------------------------------------------------- Modale */
.modal{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:clamp(12px,3vw,32px);
  background:rgba(26,26,26,.64);overflow-y:auto;overscroll-behavior:contain;opacity:0;transition:opacity .28s ease}
.modal.ist-offen,.modal:target{display:flex;opacity:1}
body.ist-starr{overflow:hidden}
.modal-karte{position:relative;width:min(520px,100%);margin:auto;background:var(--karte);color:var(--tinte);border-radius:10px;padding:clamp(30px,3.5vw,42px) clamp(22px,3vw,40px) clamp(24px,3vw,36px);
  text-align:left;outline:0;overflow:hidden;transform:translateY(22px) scale(.97);transition:transform .28s var(--sanft)}
.modal-karte::before{content:"";position:absolute;left:0;right:0;top:0;height:7px;background:linear-gradient(90deg,var(--tinte) 0 33.3%,var(--rost) 33.3% 66.6%,var(--bronze) 66.6%)}
.modal.ist-offen .modal-karte{transform:none}
@starting-style{.modal.ist-offen{opacity:0}.modal.ist-offen .modal-karte{transform:translateY(22px) scale(.97)}}
.modal-karte.breit{width:min(860px,100%)}
.modal-zu{position:absolute;right:12px;top:16px;width:44px;height:44px;border:0;border-radius:50%;background:var(--leinen);font-size:26px;line-height:1;cursor:pointer;color:var(--tinte)}
.modal-vor{font-family:var(--kopf);font-weight:600;font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:var(--bronze-text);margin-bottom:8px}
.modal-karte h2{font-family:var(--kopf);font-weight:600;font-size:clamp(26px,1vw + 20px,34px);line-height:1.15;margin-bottom:12px;padding-right:44px}
.modal-text{color:var(--grau);margin-bottom:20px}
.weg{display:flex;align-items:center;gap:16px;min-height:64px;padding:12px 18px;border-radius:var(--rad);background:var(--leinen);color:var(--tinte);text-decoration:none;margin-top:10px}
.weg:hover{background:var(--leinen-linie);color:var(--tinte)}
.weg-wa{background:var(--rost);color:var(--weiss)}
.weg-wa:hover{background:var(--rost-tief);color:var(--weiss)}
.weg svg,.kachel svg{width:26px;height:26px;flex:0 0 26px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.weg b{display:block;font-family:var(--kopf);font-weight:600;font-size:19px;line-height:1.2;word-break:break-word}
.weg small{font-size:14.5px;color:var(--grau)}
.weg-wa small{color:var(--weiss)}
.modal-lang{color:var(--grau)}
.modal-lang h2,.modal-lang h3{color:var(--tinte);margin:22px 0 10px}
.modal-lang h2:first-child{margin-top:0}
.modal-lang p{margin-bottom:12px}
.menue-rubrik{font-family:var(--kopf);font-weight:600;font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:var(--bronze-text);margin:6px 0 10px}
.menue-rubrik + .menue-liste{margin-bottom:22px}
.menue-liste{display:grid;border-top:1px solid var(--linie)}
.menue-liste a{display:flex;align-items:center;gap:16px;min-height:56px;padding:8px 4px;border-bottom:1px solid var(--linie);color:var(--tinte);text-decoration:none}
.menue-liste a span{font-family:var(--kopf);font-weight:500;color:var(--rost);width:26px}
.menue-liste a b{font-family:var(--kopf);font-weight:600;font-size:21px;line-height:1.2}
.menue-liste a small{display:block;font-family:var(--text);font-weight:400;font-size:14px;color:var(--grau)}
.menue-kacheln{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.kachel{display:flex;align-items:center;gap:12px;min-height:64px;padding:10px 14px;border-radius:var(--rad);background:var(--leinen);color:var(--tinte);text-decoration:none}
.kachel b{display:block;font-family:var(--kopf);font-weight:600}
.kachel small{font-size:13.5px;color:var(--grau);word-break:break-word}
.kachel-breit{grid-column:1/-1}

/* ---------------------------------------------------------- Einblendungen (erst nach dem Gate) */
html.js .rv{opacity:0;transform:translateY(16px);transition:opacity .6s var(--sanft),transform .6s var(--sanft)}
html.js .rv.in{opacity:1;transform:none}
.ln{display:block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}
html.js .ln>span{display:block;transform:translateY(108%);transition:transform .75s var(--sanft)}
html.js .ln.in>span{transform:none}
html.js .vz2{transition-delay:.08s}
html.js .vz3,html.js .vz3>span{transition-delay:.16s}
html.js .ln.vz2>span{transition-delay:.08s}
html.js .vz4{transition-delay:.26s}
html.js .vz5{transition-delay:.34s}
html.js .vz6{transition-delay:.42s}
/* Visitenkarten im Held: kommen versetzt herein */
html.js .held-karte.rv .vk-vorn{transform:rotate(-9deg) translateY(18px);transition:transform .9s var(--sanft) .25s}
html.js .held-karte.rv .vk-hinten{transform:rotate(7deg) translateY(18px);transition:transform .9s var(--sanft) .35s}
html.js .held-karte.rv.in .vk-vorn{transform:rotate(-4deg)}
html.js .held-karte.rv.in .vk-hinten{transform:rotate(2.5deg)}
/* Dreistreifen-Leiste wächst nach dem Gate von links */
html.js .kopf .streifen i{transform:scaleX(0);transform-origin:left;transition:transform .7s var(--sanft)}
html.js.on .kopf .streifen i{transform:none}
html.js.on .kopf .streifen i:nth-child(2){transition-delay:.12s}
html.js.on .kopf .streifen i:nth-child(3){transition-delay:.24s}

@media (prefers-reduced-motion:reduce){
  html.js .rv,html.js .ln>span,html.js .kopf .streifen i,html.js .held-karte.rv .vk-vorn,html.js .held-karte.rv .vk-hinten,
  .knopf,.kachel,.modal,.modal .modal-karte{transition:none}
  html.js .rv{opacity:1;transform:none}
  html.js .ln>span,html.js .kopf .streifen i{transform:none}
}

/* ===================== KW VORSCHAU-GATE =====================
   Skill kleim-vorschau-disclaimer, Bauteil aus der erprobten Vorlage.
   Nur die --kw-* Töne an diese Seite gebunden: Grund Tinte der
   Visitenkarte, Akzent Rost, Knopf Rost mit weisser Schrift (5,5:1).
   Das CSS gehört zwingend zum Partial — ohne
   "#kw-gate-ok:checked ~ .kw-gate{display:none}" lässt sich das Gate
   nicht wegklicken. */
.kw-gate-toggle{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.kw-gate{
  --kw-g1:#2A2927; --kw-g2:#121212;
  --kw-acc:#B34700; --kw-acc-soft:#E8E2D6; --kw-logo:#FFFFFF;
  --kw-sans:'Karla',Arial,sans-serif; --kw-disp:'Outfit',Arial,sans-serif;
  position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;
  padding:clamp(14px,4vw,40px);
  background:radial-gradient(120% 100% at 50% 0%, var(--kw-g1), var(--kw-g2) 72%);
  overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
}
#kw-gate-ok:checked ~ .kw-gate{display:none}
.kw-card{width:min(560px,100%);text-align:center;color:var(--kw-logo);
  font-family:var(--kw-sans);animation:kwIn .8s cubic-bezier(.2,.9,.3,1) both;margin:auto}
@keyframes kwIn{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
.kw-mark{width:104px;height:104px;margin:0 auto 26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(232,226,214,.34);
  background:radial-gradient(60% 60% at 50% 40%, rgba(232,226,214,.18), transparent 70%);
  box-shadow:0 0 60px -14px rgba(232,226,214,.4)}
.kw-mark img{width:54%;height:auto;opacity:.94}
.kw-eyebrow{font-size:.95rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  color:var(--kw-acc-soft);font-family:var(--kw-sans)}
.kw-title{font-family:var(--kw-disp);font-size:clamp(32px,5.6vw,50px);font-weight:600;
  margin:14px 0 0;line-height:1.08;color:var(--kw-logo);letter-spacing:-.02em}
.kw-card p{margin:16px auto 0;max-width:44ch;font-size:.95rem;line-height:1.72;color:rgba(250,246,242,.86)}
.kw-card p b{color:var(--kw-logo);font-weight:600}
.kw-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;margin-top:28px;
  padding:15px 34px;border-radius:6px;border:0;cursor:pointer;
  background:var(--kw-acc);color:#FFFFFF;
  font-family:var(--kw-sans);font-size:1.05rem;font-weight:600;
  transition:filter .25s}
.kw-btn:hover{filter:brightness(1.08)}
.kw-btn:focus-visible{outline:2px solid var(--kw-logo);outline-offset:3px}
.kw-fine{margin:22px auto 0;max-width:48ch;font-size:.78rem;line-height:1.68;color:rgba(250,246,242,.74)}
.kw-sig{margin-top:26px;padding-top:18px;border-top:1px solid rgba(250,246,242,.16);
  font-family:var(--kw-sans);font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(250,246,242,.74);font-weight:600}
.kw-sig b{color:var(--kw-acc-soft);font-weight:600}
.kw-sig .d{color:var(--kw-acc);margin-right:8px}
@media (prefers-reduced-motion:reduce){.kw-card{animation:none}}
/* ===================== /KW VORSCHAU-GATE ===================== */


/* Fakten im Einsatzgebiet (Start) */
.fakten{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:0 24px;margin-top:26px}
.fakten div{padding:12px 0;border-top:1px solid var(--leinen-linie)}
.fakten dt{font-family:var(--kopf);font-weight:600;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--bronze-text)}
.fakten dd{margin:2px 0 0;font-size:18px}

/* Ablauf: Kopf mit Leitmotiv (Hauskontur aus den drei Markenstreifen, kleim-bilder).
   Zeichnet sich als Wischblende am <svg> selbst ein — nicht per dashoffset
   (Falle Physio Nothnick 06.10.2026: pathLength-Zeichnung blieb bei 1px stehen). */
.ablauf-kopf{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:24px 48px;align-items:end;margin-bottom:clamp(36px,4vw,56px)}
.ablauf-kopf .h2{margin-bottom:0}
.ablauf-motiv{max-width:440px;justify-self:end;width:100%}
.ablauf-motiv svg{width:100%;height:auto}
html.js .ablauf-motiv svg{clip-path:inset(0 100% 0 0);transition:clip-path 1.6s var(--sanft) .2s}
html.js .ablauf-motiv.in svg{clip-path:inset(0 0 0 0)}
.alex-foto img{width:100%;height:auto;aspect-ratio:860/1062;object-fit:cover;object-position:50% 26%;border-radius:var(--rad)}
.gebiet-karte{width:100%;height:auto;border-radius:var(--rad)}
@media (prefers-reduced-motion:reduce){html.js .ablauf-motiv svg{clip-path:none;transition:none}}