/* ══ KapFixIT — Prototyp nach Vorbild-Mechanik ══════════════════════ */
:root{
  --nacht:#141326;      /* dunkler Block, indigo-gestochen statt Navy */
  --nacht-2:#1E1C38;
  --grund:#F3F3F7;      /* helle Sektionsfläche */
  --weiss:#FFFFFF;
  --ink:#16151C;
  --ink-2:#54515F;
  --ink-3:#84818F;
  --akzent:#4B3FBF;        /* Violett — Markenfarbe, 7,6:1 auf Weiß */
  --akzent-tief:#372C99;
  --akzent-hell:#A9A0F0;
  --gold:#FFD98C;          /* Sternschimmer, nur dort */
  --linie:#DEDCE7;
  --gut:clamp(20px,5vw,72px);
  --bahn:1240px;
  --f-d:'Bebas Neue','Arial Narrow',Impact,sans-serif;
  --f-b:'DM Sans',system-ui,-apple-system,sans-serif;
  --f-m:ui-monospace,'SF Mono',Consolas,monospace;
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--weiss);color:var(--ink);font-family:var(--f-b);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
:focus-visible{outline:3px solid var(--akzent);outline-offset:3px}
.bahn{max-width:var(--bahn);margin:0 auto;padding:0 var(--gut)}

/* Display: Versalien, optional schräg — der Charakterzug */
h1,h2,h3,h4{font-family:var(--f-d);font-weight:400;text-transform:uppercase;margin:0;line-height:.93;letter-spacing:.012em;hyphens:none}
h1{font-size:clamp(3.4rem,9.5vw,7.4rem)}
h2{font-size:clamp(2.6rem,6vw,4.6rem)}
h3{font-size:clamp(1.5rem,2.6vw,2.05rem)}
h4{font-size:clamp(1.9rem,3.6vw,2.8rem)}
.schraeg{display:inline-block;transform:skewX(-9deg)}
p{margin:0}
.lede{font-size:clamp(1.05rem,1.6vw,1.2rem);color:var(--ink-2);max-width:58ch;line-height:1.68}
.klein{font-family:var(--f-m);font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}

/* ── Kopfleiste ── */
.kopf{position:fixed;top:0;left:0;right:0;z-index:50;background:rgba(20,19,38,.92);backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.09)}
.kopf-in{display:flex;align-items:center;gap:22px;padding-block:13px}
.marke{display:flex;align-items:center;gap:11px;margin-right:auto;text-decoration:none;color:#fff}
.marke img{width:30px}
.marke b{font-family:var(--f-d);font-size:1.5rem;letter-spacing:.02em}
.kopf nav{display:flex;gap:24px}
.kopf nav a{color:rgba(255,255,255,.76);text-decoration:none;font-size:13px;font-family:var(--f-m);letter-spacing:.09em;text-transform:uppercase}
.kopf nav a:hover{color:#fff}
@media(max-width:940px){.kopf nav{display:none}}
.kopf-tel{display:flex;align-items:center;gap:9px;background:var(--akzent);color:#fff;text-decoration:none;padding:10px 18px;border-radius:3px;font-family:var(--f-d);font-size:1.25rem;letter-spacing:.03em;white-space:nowrap}
.kopf-tel:hover{background:var(--akzent-tief)}

/* ── Hero mit Bild ── */
.hero{position:relative;min-height:min(94svh,860px);display:flex;align-items:flex-end;padding:150px 0 clamp(48px,7vw,90px);overflow:hidden;background:var(--nacht)}
.hero-bild{position:absolute;inset:0;object-fit:cover;width:100%;height:100%;opacity:.42}
.hero::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,19,38,.72) 0%,rgba(20,19,38,.45) 42%,rgba(20,19,38,.96) 100%)}
.hero .bahn{position:relative;z-index:2;width:100%}
.hero h1{color:#fff;max-width:16ch}
.hero h1 em{font-style:normal;color:var(--akzent-hell)}
.hero-unter{display:flex;gap:clamp(20px,4vw,56px);align-items:flex-end;flex-wrap:wrap;margin-top:30px}
.hero p{color:rgba(255,255,255,.84);max-width:46ch;font-size:clamp(1rem,1.5vw,1.15rem)}
.hero-tel{display:inline-flex;flex-direction:column;gap:3px;text-decoration:none;color:#fff}
.hero-tel .lbl{font-family:var(--f-m);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--akzent-hell)}
.hero-tel .nr{font-family:var(--f-d);font-size:clamp(2.2rem,5.4vw,3.6rem);letter-spacing:.02em;line-height:1}
.hero-tel:hover .nr{color:var(--akzent-hell)}
.hero-leiste{display:flex;flex-wrap:wrap;gap:0 30px;margin-top:34px;padding-top:20px;border-top:1px solid rgba(255,255,255,.18);font-family:var(--f-m);font-size:12px;color:rgba(255,255,255,.7);letter-spacing:.04em}
.hero-leiste span{padding:5px 0}
.hero-leiste b{color:#fff;font-weight:400}

/* ── Abschnitte ── */
.sek{padding:clamp(64px,8vw,124px) 0}
.sek-grund{background:var(--grund)}
.sek-nacht{background:var(--nacht);color:#fff}
.sek-nacht h2,.sek-nacht h3{color:#fff}
.sek-nacht p,.sek-nacht .lede{color:rgba(255,255,255,.78)}
.sek-kopf{text-align:center;max-width:44ch;margin:0 auto clamp(40px,5vw,64px)}
.sek-kopf .klein{margin-bottom:14px;color:var(--akzent-tief)}
.sek-nacht .sek-kopf .klein{color:var(--akzent-hell)}
.sek-kopf p{margin-top:16px;color:var(--ink-2)}
.sek-nacht .sek-kopf p{color:rgba(255,255,255,.74)}

/* ── Drei Zielgruppen ── */
.drei{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,30px)}
@media(max-width:900px){.drei{grid-template-columns:1fr}}
.ziel{background:var(--weiss);border:1px solid var(--linie);border-radius:4px;padding:clamp(26px,3vw,38px);display:flex;flex-direction:column;gap:12px;text-decoration:none;transition:border-color .18s,transform .18s}
.ziel:hover{border-color:var(--akzent);transform:translateY(-3px)}
.ziel .ik{width:52px;height:52px;color:var(--akzent);fill:currentColor;margin-bottom:8px;flex:none}
.ziel p{font-size:15px;color:var(--ink-2)}
.ziel .mehr{font-family:var(--f-m);font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--akzent-tief);margin-top:auto;padding-top:14px}

/* ── Drei Claims ── */
.claims{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,60px);text-align:center}
@media(max-width:820px){.claims{grid-template-columns:1fr;gap:38px}}
.claim h4{color:var(--akzent-tief)}
.sek-nacht .claim h4{color:var(--akzent-hell)}
.claim p{margin-top:12px;font-size:15px;color:var(--ink-2)}
.sek-nacht .claim p{color:rgba(255,255,255,.72)}

/* ── Riesenzeile ── */
.riese{text-align:center;padding:clamp(52px,7vw,96px) 0}
.riese h2{font-size:clamp(2.8rem,8vw,6.2rem);line-height:.92}
.riese .hi{color:var(--akzent)}
.riese p{margin:20px auto 0;max-width:52ch;color:var(--ink-2)}

/* ── Leistungen mit großen Icons ── */
.leist{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,42px);text-align:center}
@media(max-width:1000px){.leist{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.leist{grid-template-columns:1fr}}
.leistung{display:flex;flex-direction:column;align-items:center;gap:10px;text-decoration:none}
.leistung .ik{width:78px;height:78px;color:var(--akzent);fill:currentColor;margin-bottom:8px;transition:transform .22s;flex:none}
.leistung:hover .ik{transform:translateY(-4px)}
.leistung p{font-size:14.5px;color:var(--ink-2);max-width:30ch}
.leistung .preis{font-family:var(--f-m);font-size:13px;color:var(--akzent-tief);margin-top:4px}

/* ── Ablauf als Akzent-Balken ── */
.ablauf{max-width:940px;margin:0 auto;display:flex;flex-direction:column;gap:10px}
.stufe{background:var(--akzent);border-radius:3px;overflow:hidden}
.stufe summary{list-style:none;cursor:pointer;padding:20px clamp(20px,3vw,30px);display:flex;align-items:center;gap:18px;color:#fff}
.stufe summary::-webkit-details-marker{display:none}
.stufe .nr{font-family:var(--f-m);font-size:12px;letter-spacing:.1em;opacity:.75;flex:none}
.stufe h3{flex:1;color:#fff}
.stufe .pf{width:22px;height:22px;flex:none;stroke:#fff;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s}
.stufe[open] .pf{transform:rotate(180deg)}
.stufe .inhalt{background:var(--weiss);padding:24px clamp(20px,3vw,30px) 28px;color:var(--ink-2);font-size:15.5px;line-height:1.7}
.stufe:hover summary{background:var(--akzent-tief)}

/* ── Bilder-Duo ── */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.5vw,32px);align-items:center}
@media(max-width:860px){.duo{grid-template-columns:1fr}}
.duo img{border-radius:4px;width:100%}
.duo-text h2{margin-bottom:18px}

/* ── Stimmen ── */
.stimmen{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.2vw,26px)}
@media(max-width:900px){.stimmen{grid-template-columns:1fr}}
.stimme{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15);border-radius:4px;padding:24px;display:flex;flex-direction:column;gap:12px}
.stimme .st{color:var(--akzent-hell);letter-spacing:.14em;font-size:13px}
.stimme p{font-size:15px;color:rgba(255,255,255,.82);line-height:1.6}
.stimme .wer{font-family:var(--f-m);font-size:11.5px;color:rgba(255,255,255,.55);margin-top:auto;padding-top:10px;border-top:1px solid rgba(255,255,255,.12)}

/* ── Person ── */
.person{display:grid;grid-template-columns:260px 1fr;gap:clamp(28px,4vw,60px);align-items:center;max-width:1000px;margin:0 auto}
@media(max-width:760px){.person{grid-template-columns:1fr;text-align:center;justify-items:center}}
.person img{width:100%;max-width:260px;border-radius:4px}
.person .unter{font-family:var(--f-m);font-size:12px;color:var(--ink-3);margin-top:12px;letter-spacing:.05em}
.person .sig{font-family:var(--f-d);font-size:1.9rem;color:var(--akzent-tief);margin-top:18px}

/* ── Kontakt ── */
.kontakt{background:var(--akzent);color:#fff;border-radius:4px;padding:clamp(32px,5vw,62px);text-align:center}
.kontakt h2{color:#fff}
.kontakt p{color:rgba(255,255,255,.88);max-width:48ch;margin:16px auto 0}
.kontakt-nr{display:inline-block;font-family:var(--f-d);font-size:clamp(2.6rem,8vw,5.2rem);color:#fff;text-decoration:none;letter-spacing:.02em;margin-top:22px;line-height:1}
.kontakt-nr:hover{text-decoration:underline;text-underline-offset:.1em;text-decoration-thickness:3px}
.kontakt-wege{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:26px}
.kontakt-wege a{display:inline-flex;align-items:center;gap:9px;background:rgba(255,255,255,.14);border:1.5px solid rgba(255,255,255,.4);color:#fff;text-decoration:none;padding:12px 22px;border-radius:3px;font-size:15px}
.kontakt-wege a:hover{background:#fff;color:var(--akzent-tief);border-color:#fff}
.kontakt-wege svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.kontakt-zeit{font-family:var(--f-m);font-size:12.5px;color:rgba(255,255,255,.8);margin-top:20px;letter-spacing:.05em}

/* ── Fuß ── */
.fuss{background:var(--nacht);color:rgba(255,255,255,.7);padding:clamp(48px,6vw,74px) 0 32px}
.fuss-gitter{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:34px}
@media(max-width:860px){.fuss-gitter{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.fuss-gitter{grid-template-columns:1fr}}
.fuss h4{font-family:var(--f-m);font-size:11.5px;letter-spacing:.11em;color:rgba(255,255,255,.5);margin-bottom:14px;text-transform:uppercase}
.fuss ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.fuss a{color:rgba(255,255,255,.72);text-decoration:none;font-size:14.5px}
.fuss a:hover{color:#fff}
.fuss-marke p{font-size:14px;max-width:34ch;margin-top:12px;color:rgba(255,255,255,.6)}
.fuss-unten{margin-top:40px;padding-top:22px;border-top:1px solid rgba(255,255,255,.14);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-family:var(--f-m);font-size:12px;color:rgba(255,255,255,.5)}

/* ── Mobil ── */
@media(max-width:820px){
  .kopf-tel{padding:9px 14px;font-size:1.1rem}
  .hero{min-height:auto;padding-top:120px}
  .hero-unter{flex-direction:column;align-items:flex-start;gap:24px}
  .leistung .ik{width:62px;height:62px}
  .ziel .ik{width:46px;height:46px}
  .sek{padding:clamp(48px,9vw,72px) 0}
}
/* ── Reduzierte Bewegung: Bewegung raus, Leben drin ───────────────
   Frueher stand hier `*{animation:none;transition:none}`. Das ist zu
   grob: die Richtlinie zielt auf Bewegung im Raum — Verschieben,
   Skalieren, Drehen, Parallax —, weil die Gleichgewichtsbeschwerden
   ausloest. Ein weiches Ein- und Ausblenden tut das nicht. Mit der
   Holzhammer-Regel fuehlte sich die Seite fuer jeden mit aktiviertem
   Schalter tot an: Kacheln sprangen auf, nichts blendete mehr.
   Jetzt: alles was sich BEWEGT wird abgeschaltet, alles was nur die
   Deckkraft oder Farbe aendert bleibt — und laeuft kuerzer.
   ───────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  /* Kein Element bewegt sich mehr im Raum */
  *{transform:none!important;scroll-behavior:auto!important}
  /* Laufende und dekorative Animationen aus */
  .hero-bild,.st i,.stimme,.stimme.rein,.stufe .inhalt,
  .kfc-fab,.kfc-fab .kfc-badge-dot,.kfc-panel .msg,.kfc-panel .typing span{
    animation:none!important
  }
  /* Uebergaenge bleiben, aber nur fuer Deckkraft und Farbe, und kurz */
  *{transition-property:opacity,color,background-color,border-color,fill,stroke!important;
    transition-duration:.2s!important;transition-delay:0s!important}
  /* Die Kachel klappt weiter auf — nur ohne Wachstumsanimation */
  .kachel-text{transition:none!important}
  .kachel[aria-expanded="true"] .kachel-text{grid-template-rows:1fr}
  .kachel[aria-expanded="true"] .kachel-text p,
  .kachel[aria-expanded="true"] .kachel-text li{opacity:1}
  .kachel[aria-expanded="true"] .kachel-text li::before{transform:none!important}
  /* Reveal: sofort sichtbar, nichts bleibt versteckt */
  .js [data-auf]{opacity:1!important}
  /* Sterne behalten ihr Gold, nur ohne Schimmerlauf */
  .st i{color:var(--gold)!important;text-shadow:none!important}
}


/* ══ Portrait: rund, ohne Kasten ═══════════════════════════════════ */
.portraet{margin:0;text-align:center}
.portraet img{
  width:100%;max-width:280px;aspect-ratio:1;border-radius:50%;
  background:var(--weiss);object-fit:cover;margin:0 auto;
  box-shadow:0 0 0 1px var(--linie), 0 18px 44px -22px rgba(20,19,38,.4);
}
.portraet figcaption{
  margin-top:18px;font-family:var(--f-m);font-size:13px;color:var(--ink);letter-spacing:.04em;line-height:1.6;
}
.portraet figcaption span{color:var(--ink-3);font-size:11.5px;letter-spacing:.09em;text-transform:uppercase}

/* ══ Bewertungen: rotierender Dreierblock ══════════════════════════ */
/* Sichtbar per Voreinstellung. Frueher stand hier opacity:0 mit einer
   Animation — unter prefers-reduced-motion (globales animation:none)
   waeren damit ALLE Bewertungen unsichtbar geblieben. */
/* Rotation blendet um, sie erzeugt nicht — die Karten stehen im HTML.
   .rein setzt die Einblendung bei jedem Wechsel neu an. */
.stimme[hidden]{display:none}
.stimme.rein{animation:stimmeRein .5s cubic-bezier(.22,.72,.24,1) both}
.stimme.rein:nth-of-type(3n+2){animation-delay:.09s}
.stimme.rein:nth-of-type(3n+3){animation-delay:.18s}
@keyframes stimmeRein{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.stimmen-fuss{
  display:flex;align-items:center;justify-content:center;gap:22px;flex-wrap:wrap;margin-top:32px;
}
.stimmen-halt{
  display:inline-flex;align-items:center;gap:8px;background:transparent;
  border:1px solid rgba(255,255,255,.28);color:rgba(255,255,255,.8);
  border-radius:100px;padding:7px 16px;font-family:var(--f-m);font-size:12px;cursor:pointer;letter-spacing:.05em;
}
.stimmen-halt:hover{border-color:#fff;color:#fff}
.stimmen-halt svg{width:9px;height:9px;fill:currentColor}
.punkte{display:flex;gap:7px}
.punkte i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.26);transition:background .3s,transform .3s}
.punkte i.an{background:var(--akzent-hell);transform:scale(1.35)}
.stimmen-fuss .alle{
  font-family:var(--f-m);font-size:12px;color:rgba(255,255,255,.72);text-decoration:none;letter-spacing:.04em;
}
.stimmen-fuss .alle:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}



/* ══════════════════════════════════════════════════════════════════
   BEWEGUNG — fließend, nicht störend
   Grundsatz: Jede Animation hat eine Aufgabe. Nichts fliegt durch
   die Seite. Ohne JavaScript ist alles sofort sichtbar.
   ══════════════════════════════════════════════════════════════════ */

/* ── Scroll-Reveal ─────────────────────────────────────────────────
   Nur wenn JS läuft (html.js), sonst bleibt alles sichtbar — das war
   der Fehler der alten Seite: leere Bildschirme beim schnellen Scrollen. */
.js [data-auf]{opacity:0;transform:translateY(18px);
  transition:opacity .62s cubic-bezier(.22,.61,.36,1), transform .62s cubic-bezier(.22,.61,.36,1)}
.js [data-auf].da{opacity:1;transform:none}
.js [data-auf][data-verzug="1"]{transition-delay:.08s}
.js [data-auf][data-verzug="2"]{transition-delay:.16s}
.js [data-auf][data-verzug="3"]{transition-delay:.24s}

/* ── Bild-Kacheln mit weichem Übergang ─────────────────────────
   Die Kachel schaltet NICHT zwischen zwei Höhen um, sie wächst.
   Ein unsichtbares Raum-Element hält die geschlossene Proportion,
   der Text darunter fährt über grid-template-rows 0fr → 1fr auf.
   Weil beide in derselben Rasterzelle liegen, folgt die Höhe der
   Kachel stufenlos dem Inhalt — kein Sprung, kein Umschalten.
   ───────────────────────────────────────────────────────────── */
@property --schnitt{syntax:'<length>';inherits:true;initial-value:30px}

.kacheln{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.8vw,22px);align-items:start}
@media(max-width:1080px){.kacheln{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.kacheln{grid-template-columns:1fr}}

.kachel{
  --schnitt:30px;
  position:relative;border:none;padding:0;margin:0;text-align:left;
  overflow:hidden;cursor:pointer;background:var(--nacht);
  display:grid;width:100%;color:#fff;font-family:inherit;
  /* Oben rechts und unten links angeschnitten — nimmt dem Rechteck die Härte */
  clip-path:polygon(
    0 0,
    calc(100% - var(--schnitt)) 0,
    100% var(--schnitt),
    100% 100%,
    var(--schnitt) 100%,
    0 calc(100% - var(--schnitt))
  );
}
/* Hält die geschlossene Proportion 4:5 offen, ohne die Höhe zu deckeln */
/* Muss `.js [data-auf]` schlagen — sonst überschreibt die Reveal-Regel
   Hover-Lift, Schatten und Schnittkante und alles springt hart. */
.kachel[data-auf],.kachel{
  transition:opacity .62s cubic-bezier(.22,.61,.36,1),
             transform .5s cubic-bezier(.22,.61,.36,1),
             box-shadow .5s ease,
             --schnitt .74s cubic-bezier(.22,.72,.24,1);
}
.kachel-raum{grid-area:1/1;display:block;width:100%;padding-top:125%;pointer-events:none}
@media(max-width:600px){.kachel{--schnitt:22px}.kachel-raum{padding-top:62.5%}}

.kachel:hover{transform:translateY(-5px);box-shadow:0 22px 48px -22px rgba(20,19,38,.55)}
.kachel-bild{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s cubic-bezier(.22,.72,.24,1),
             opacity .8s cubic-bezier(.4,0,.2,1),
             filter .8s cubic-bezier(.4,0,.2,1);
}
.kachel:hover .kachel-bild{transform:scale(1.05)}
.kachel::after{
  content:'';position:absolute;inset:0;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.045) 0 1px, transparent 1px 9px),
    linear-gradient(180deg,rgba(20,19,38,.12) 0%,rgba(20,19,38,.84) 100%);
  transition:background .8s cubic-bezier(.4,0,.2,1);
}
/* Akzentdreieck innen an der Schnittfläche — liegt im sichtbaren Bereich */
.kachel::before{
  content:'';position:absolute;top:0;right:0;z-index:3;
  width:var(--schnitt);height:var(--schnitt);
  background:var(--akzent-hell);
  clip-path:polygon(100% 0, 100% 100%, 0 0);
  transition:background .45s ease;
}
.kachel:hover::before{background:#fff}
.kachel[aria-expanded="true"]::before{background:var(--akzent-hell)}

.kachel-inhalt{
  grid-area:1/1;position:relative;z-index:2;min-width:0;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(18px,2vw,26px);
}
.kachel .ik{width:44px;height:44px;color:#fff;fill:currentColor;margin-bottom:auto;
  transition:transform .68s cubic-bezier(.22,.72,.24,1), opacity .55s ease}
.kachel h3{color:#fff;margin-bottom:6px}
.kachel .preis{font-family:var(--f-m);font-size:12.5px;color:var(--akzent-hell);letter-spacing:.05em}
.kachel .mehr{
  font-family:var(--f-m);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.72);margin-top:12px;display:flex;align-items:center;gap:7px;
  transition:color .3s ease;
}
.kachel:hover .mehr{color:#fff}
.kachel .mehr svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.2;
  transition:transform .58s cubic-bezier(.22,.72,.24,1)}
.kachel[aria-expanded="true"] .mehr svg{transform:rotate(180deg)}

/* Geöffnet: Bild tritt zurück, Text nach vorn */
.kachel[aria-expanded="true"]{--schnitt:40px}
.kachel[aria-expanded="true"] .kachel-bild{opacity:.16;filter:saturate(.5);transform:scale(1.03)}
.kachel[aria-expanded="true"]::after{
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 1px, transparent 1px 9px),
    linear-gradient(180deg,var(--akzent) 0%,var(--nacht) 100%);
}
.kachel[aria-expanded="true"] .ik{transform:scale(.72) translateY(-4px);opacity:.5}

/* Das Aufziehen selbst: eine einzige stufenlose Bewegung */
.kachel-text{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .46s cubic-bezier(.4,0,.2,1);
}
.kachel-text-in{overflow:hidden;min-height:0;padding-top:12px}
.kachel[aria-expanded="true"] .kachel-text{
  grid-template-rows:1fr;
  transition:grid-template-rows .82s cubic-bezier(.17,.84,.28,1);
}

/* Inhalt kommt zeitversetzt hinterher, Zeile für Zeile */
.kachel-text p{
  font-size:14px;line-height:1.6;color:rgba(255,255,255,.86);
  opacity:0;transform:translateY(12px);
  transition:opacity .28s ease, transform .28s ease;
}
.kachel[aria-expanded="true"] .kachel-text p{
  opacity:1;transform:none;
  transition:opacity .5s ease .26s, transform .58s cubic-bezier(.22,.72,.24,1) .26s;
}
.kachel-text ul{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:7px}
.kachel-text li{
  font-size:13px;color:rgba(255,255,255,.78);padding-left:15px;position:relative;
  opacity:0;transform:translateX(-9px);
  transition:opacity .22s ease, transform .22s ease;
}
.kachel-text li::before{content:'';position:absolute;left:0;top:.62em;width:7px;height:1.5px;
  background:var(--akzent-hell);transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
.kachel[aria-expanded="true"] .kachel-text li{
  opacity:1;transform:none;
  transition:opacity .44s ease, transform .5s cubic-bezier(.22,.72,.24,1);
}
.kachel[aria-expanded="true"] .kachel-text li::before{transform:none;transition:transform .42s cubic-bezier(.22,.72,.24,1)}
.kachel[aria-expanded="true"] .kachel-text li:nth-child(1),
.kachel[aria-expanded="true"] .kachel-text li:nth-child(1)::before{transition-delay:.40s}
.kachel[aria-expanded="true"] .kachel-text li:nth-child(2),
.kachel[aria-expanded="true"] .kachel-text li:nth-child(2)::before{transition-delay:.48s}
.kachel[aria-expanded="true"] .kachel-text li:nth-child(3),
.kachel[aria-expanded="true"] .kachel-text li:nth-child(3)::before{transition-delay:.56s}
.kachel[aria-expanded="true"] .kachel-text li:nth-child(4),
.kachel[aria-expanded="true"] .kachel-text li:nth-child(4)::before{transition-delay:.64s}
.kachel[aria-expanded="true"] .kachel-text li:nth-child(5),
.kachel[aria-expanded="true"] .kachel-text li:nth-child(5)::before{transition-delay:.72s}
.kachel[aria-expanded="true"] .kachel-text li:nth-child(n+6),
.kachel[aria-expanded="true"] .kachel-text li:nth-child(n+6)::before{transition-delay:.80s}

/* ── Weiche Übergänge an den bestehenden Bausteinen ─────────────── */
.ziel,.leistung .ik,.stufe summary,.kontakt-wege a,.kopf-tel{transition:all .3s cubic-bezier(.22,.61,.36,1)}
.stufe .inhalt{animation:aufklappen .42s cubic-bezier(.22,.61,.36,1)}
@keyframes aufklappen{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.hero-bild{animation:heranziehen 12s ease-out forwards}
@keyframes heranziehen{from{transform:scale(1.07)}to{transform:scale(1)}}

/* ── Alles aus, wenn der Nutzer es so will ─────────────────────── */
/* Reduzierte Bewegung: siehe der gesammelte Block weiter oben. */

/* ══════════════════════════════════════════════════════════════════
   STERNE — größer, mit durchlaufendem Schimmer
   Der Glanz wandert von links nach rechts durch die fünf Sterne,
   wie ein Pegel. Lang genug getaktet, dass er nicht flackert.
   ══════════════════════════════════════════════════════════════════ */
.st{display:inline-flex;gap:3px;line-height:1}
.st i{
  font-style:normal;font-size:17px;color:var(--akzent-hell);
  animation:schimmer 3.4s ease-in-out infinite;
  animation-delay:calc(var(--n) * .13s);
  will-change:color,text-shadow;
}
@keyframes schimmer{
  0%, 62%, 100%{ color:var(--akzent-hell); text-shadow:none; transform:none }
  28%          { color:var(--gold); text-shadow:0 0 11px rgba(255,217,140,.65); transform:translateY(-1px) }
}
/* Auf hellem Grund brauchen die Sterne einen dunkleren Grundton */
.sek:not(.sek-nacht) .st i{color:var(--akzent)}


/* ── Ortsliste (Einzugsgebiet auf Landingpages) ─────────────────── */
.orte{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:8px}
.orte span{
  font-family:var(--f-m);font-size:12.5px;color:var(--ink-2);
  border:1px solid var(--linie);border-radius:100px;padding:6px 14px;background:var(--weiss);
}
.sek-nacht .orte span{border-color:rgba(255,255,255,.24);color:rgba(255,255,255,.8);background:transparent}

/* ── Icons aus übernommenem Markup (.ic im Anfrage-Formular) ────── */
.ic{width:1.05em;height:1.05em;display:inline-block;vertical-align:-.16em;flex:none;
    fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ic--fill{fill:currentColor;stroke:none}
svg{max-width:100%}
.ik,.ic,.pf,.kontakt-wege svg,.stimmen-halt svg{max-width:none}

/* ── Briefing-Formular (Seite /website-anfrage) ─────────────────── */
.form-card{background:var(--weiss);border:1px solid var(--linie);border-radius:4px;padding:clamp(22px,3vw,36px);margin-top:34px}
.form-card .sec-h{font-family:var(--f-d);text-transform:uppercase;font-size:1.4rem;color:var(--ink);margin:34px 0 16px;padding-top:22px;border-top:1px solid var(--linie)}
.form-card .sec-h:first-child{margin-top:0;padding-top:0;border-top:none}
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:18px}
.field>label{font-family:var(--f-m);font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.field input[type=text],.field input[type=email],.field input[type=tel],.field textarea,.field select{
  font-family:var(--f-b);font-size:15.5px;color:var(--ink);background:var(--grund);
  border:1px solid var(--linie);border-radius:4px;padding:11px 13px;width:100%;
}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--akzent);outline:none;box-shadow:0 0 0 3px rgba(75,63,191,.16)}
.field textarea{min-height:120px;resize:vertical}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
@media(max-width:600px){.frow{grid-template-columns:1fr}}
.req{color:var(--akzent)}
.form-note{font-size:13px;color:var(--ink-3);margin:-10px 0 16px}
.chip-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.wb-chip{position:relative;display:inline-flex}
.wb-chip input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.wb-chip .chip,.chip-row .chip{
  font-family:var(--f-m);font-size:12.5px;color:var(--ink-2);background:var(--grund);
  border:1px solid var(--linie);border-radius:100px;padding:7px 14px;cursor:pointer;transition:all .16s;
}
.wb-chip:hover .chip{border-color:var(--akzent);color:var(--akzent)}
.wb-chip input:checked+.chip{background:var(--akzent);border-color:var(--akzent);color:#fff}
.wb-chip input:focus-visible+.chip{outline:3px solid var(--akzent);outline-offset:3px}
.form-card .btn{display:inline-flex;align-items:center;gap:9px;background:var(--akzent);color:#fff;
  border:none;border-radius:4px;padding:13px 24px;font-family:var(--f-b);font-size:15px;text-decoration:none;cursor:pointer}
.form-card .btn:hover{background:var(--akzent-tief)}
.form-card .btn-outline{background:transparent;color:var(--ink);border:1.5px solid var(--linie)}
.form-card .btn-outline:hover{background:var(--grund);color:var(--akzent)}

/* ── Fließtext (Blog, Rechtstexte) ──────────────────────────────── */
.prose{max-width:68ch;font-size:17px;line-height:1.75;color:var(--ink-2);overflow-wrap:anywhere}
.prose>*+*{margin-top:1.1em}
.prose h2{font-family:var(--f-d);text-transform:uppercase;font-size:clamp(1.7rem,3vw,2.3rem);color:var(--ink);margin-top:2em;line-height:1.02}
.prose h3{font-family:var(--f-d);text-transform:uppercase;font-size:1.35rem;color:var(--ink);margin-top:1.7em}
.prose h4{font-size:1rem;color:var(--ink);margin-top:1.5em;font-family:var(--f-b);font-weight:700;text-transform:none}
.prose a{color:var(--akzent);text-decoration:underline;text-underline-offset:3px}
.prose strong,.prose b{color:var(--ink);font-weight:700}
.prose ul,.prose ol{padding-left:1.35em;margin-top:.9em}
.prose li+li{margin-top:.5em}
.prose ul{list-style:none;padding-left:0}
.prose ul>li{padding-left:1.4em;position:relative}
.prose ul>li::before{content:'';position:absolute;left:0;top:.72em;width:8px;height:2px;background:var(--akzent)}
.prose blockquote{margin:1.6em 0;padding:18px 22px;background:var(--weiss);border:1px solid var(--linie);
  border-left:3px solid var(--akzent);border-radius:0 4px 4px 0;color:var(--ink-2)}
.prose code{font-family:var(--f-m);font-size:.88em;background:var(--weiss);border:1px solid var(--linie);border-radius:3px;padding:1px 5px;color:var(--ink)}
.prose pre{background:var(--nacht);color:#E6E7EE;border-radius:4px;padding:18px;overflow-x:auto;font-family:var(--f-m);font-size:13.5px}
.prose pre code{background:none;border:none;padding:0;color:inherit}
.prose img{border-radius:4px;border:1px solid var(--linie);margin:1.6em 0}
.prose hr{border:none;border-top:1px solid var(--linie);margin:2.4em 0}
.prose table{width:100%;border-collapse:collapse;font-size:14.5px;margin:1.6em 0}
.prose th,.prose td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--linie)}
.prose th{font-family:var(--f-m);font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);font-weight:400}
.prose-scroll{overflow-x:auto;max-width:100%}

/* ── Artikelkopf und -liste ─────────────────────────────────────── */
.artikel-kopf{padding-block:clamp(90px,10vw,130px) clamp(24px,3vw,40px)}
.artikel-kopf h1{font-size:clamp(2.4rem,6vw,4.4rem);max-width:22ch}
.artikel-meta{display:flex;flex-wrap:wrap;gap:0 22px;margin-top:22px;font-family:var(--f-m);font-size:12px;color:var(--ink-3)}
.artikel-meta span{padding:4px 0}
.toc{background:var(--weiss);border:1px solid var(--linie);border-radius:4px;padding:20px 24px;margin:0 0 36px;max-width:68ch}
.toc h2{font-family:var(--f-m);font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);margin:0 0 12px;font-weight:400}
.toc ol,.toc ul{margin:0;padding-left:1.3em;font-size:14.5px}
.toc ul{list-style:none;padding-left:0}
.toc li+li{margin-top:7px}
.toc a{color:var(--ink-2);text-decoration:none}
.toc a:hover{color:var(--akzent);text-decoration:underline;text-underline-offset:3px}
.artikel-liste{display:flex;flex-direction:column;border-top:2px solid var(--ink)}
.artikel-zeile{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 28px;align-items:baseline;
  padding:20px 4px;border-bottom:1px solid var(--linie);text-decoration:none;transition:background .18s,padding .18s}
.artikel-zeile:hover{background:var(--weiss);padding-left:14px;padding-right:14px}
.artikel-zeile h3{color:var(--ink);font-size:1.25rem}
.artikel-zeile:hover h3{color:var(--akzent)}
.artikel-zeile p{grid-column:1;font-size:14.5px;color:var(--ink-2);margin-top:4px;max-width:70ch}
.artikel-zeile .datum{font-family:var(--f-m);font-size:12px;color:var(--ink-3);white-space:nowrap;grid-row:1;grid-column:2}
@media(max-width:600px){
  .artikel-zeile{grid-template-columns:1fr}
  .artikel-zeile .datum{grid-row:auto;grid-column:1;margin-top:2px}
}

/* ── Krümelpfad, Sprungmarke ────────────────────────────────────── */
.crumb{font-family:var(--f-m);font-size:11.5px;color:var(--ink-3);padding:96px 0 0;letter-spacing:.03em}
.crumb a{color:var(--ink-3);text-decoration:none}
.crumb a:hover{color:var(--akzent);text-decoration:underline;text-underline-offset:3px}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--akzent);color:#fff;padding:12px 18px;border-radius:0 0 4px 0}
.skip:focus{left:0}
.lede{font-size:clamp(1.05rem,1.6vw,1.2rem);color:var(--ink-2);max-width:62ch;line-height:1.68}

/* ══ Hinweis auf die KI-Assistenz ══════════════════════════════════
   Steht bewusst als eigener Abschnitt auf der Startseite: eine sichtbare
   KI auf der Seite eines Ein-Mann-Betriebs muss erklaert werden, sonst
   widerspricht sie dem Versprechen „du sprichst mit mir". */
.ki-hinweis{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,4vw,60px);align-items:center}
@media(max-width:860px){.ki-hinweis{grid-template-columns:1fr;gap:30px}}
.ki-fakten{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px;background:var(--linie)}
.ki-fakten li{background:var(--weiss);padding:16px 20px;font-size:14px;color:var(--ink-2);line-height:1.5}
.ki-fakten b{display:block;font-family:var(--f-m);font-size:11.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--akzent);margin-bottom:4px;font-weight:500}