/* ── Schriften (self-hosted, kein Google-CDN) ── */
@font-face{font-family:'Literata';font-weight:600;font-style:normal;font-display:swap;src:url('fonts/Literata-600.woff2') format('woff2')}
@font-face{font-family:'Source Sans 3';font-weight:400;font-style:normal;font-display:swap;src:url('fonts/SourceSans3-400.woff2') format('woff2')}
@font-face{font-family:'Source Sans 3';font-weight:600;font-style:normal;font-display:swap;src:url('fonts/SourceSans3-600.woff2') format('woff2')}

:root{
  --green:#7DB928; --green-h:#689B1F; --green-d:#527A18; --tint:#F4F9EB; --tint-2:#E6F2D2;
  --ink:#2B2B28; --body:#5F5E5E; --line:#E3E2DE; --white:#fff;
  /* Flaechentoene ausschliesslich aus dem Logo-Gruen abgeleitet (kein Beige) */
  --surface:#F4F9EB;
  --serif:'Literata',Georgia,serif; --sans:'Source Sans 3',system-ui,-apple-system,sans-serif;
  --r-sm:4px; --r-md:6px; --r-lg:10px;
  --sh-card:0 1px 2px rgba(43,43,40,.04),0 1px 3px rgba(43,43,40,.06);
  --sh-raise:0 8px 24px rgba(43,43,40,.10);
  --hdr-h:86px;
  --w:1200px; --w-narrow:720px; --w-wide:1280px;   /* Header/Footer leicht breiter als der Inhalt (+80) */
  --ease:cubic-bezier(.16,.84,.44,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--white)}
body{margin:0;font-family:var(--sans);font-size:1rem;line-height:1.65;color:var(--body);background:var(--white);overflow-x:hidden}
h1,h2,h3,h4{overflow-wrap:break-word;hyphens:manual;font-family:var(--serif);font-weight:600;color:var(--ink);line-height:1.18;margin:0 0 .5em;letter-spacing:-.01em}
h1{font-size:clamp(2rem,1.4rem + 2.6vw,3.25rem)}
h2{font-size:clamp(1.5rem,1.2rem + 1.3vw,2.25rem)}
h3{font-size:clamp(1.15rem,1.05rem + .5vw,1.4rem)}
p{margin:0 0 1em}
a{color:var(--green-d);text-decoration:none;transition:color .18s}
a:hover{color:var(--green-h)}
img{max-width:100%;height:auto;display:block}
ul{margin:0 0 1em;padding-left:0;list-style:none}
:focus-visible{outline:2px solid var(--green);outline-offset:2px;border-radius:var(--r-sm)}
.wrap{width:100%;max-width:var(--w);margin:0 auto;padding:0 24px}
.wrap.wide{max-width:var(--w-wide)}
.narrow{max-width:var(--w-narrow)}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:12px 18px;z-index:100}
.skip:focus{left:8px;top:8px}

/* ── 17°-Slash ── */
.slash{display:inline-block;width:20px;height:3px;background:var(--green);transform:skewX(-17deg);border-radius:2px}
.eb-nr{color:#a9a8a4;font-weight:600;font-variant-numeric:tabular-nums}
.merkmale{display:flex;flex-wrap:wrap;gap:7px;margin:6px 0 0}
.merkmale span{padding:4px 11px;border-radius:999px;background:var(--tint-2);color:var(--green-d);font-size:.8125rem;font-weight:600}
.eyebrow{display:flex;align-items:center;gap:10px;font-size:.8125rem;font-weight:600;letter-spacing:.04em;color:var(--green-d);margin:0 0 14px;text-transform:none}
.divider{height:32px;display:flex;gap:9px;align-items:center;justify-content:center;opacity:.5}
.divider i{width:3px;height:16px;background:var(--tint-2);transform:skewX(-17deg);border-radius:2px}

/* ── Header ── */
.hdr{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--line);transition:padding .25s var(--ease),box-shadow .25s}
.hdr.small{box-shadow:0 1px 12px rgba(43,43,40,.07)}
.hdr .row{display:flex;align-items:center;gap:24px;height:86px;transition:height .25s var(--ease)}
.hdr.small .row{height:66px}
.hdr .logo{flex:0 0 auto;display:flex;align-items:center}
.hdr .logo img{height:36px;width:auto;flex-shrink:0}
.hdr .logo .l-mark{display:none}
nav.main{margin-left:auto;display:flex;align-items:center;gap:8px}
nav.main{flex-shrink:0}
nav.main a{position:relative;padding:11px 14px;font-size:1.0625rem;font-weight:500;color:var(--ink);border-radius:var(--r-md)}
nav.main a::after{content:'';position:absolute;left:14px;right:14px;bottom:5px;height:2px;background:var(--green);transform:skewX(-17deg) scaleX(0);transform-origin:left;transition:transform .25s var(--ease)}
nav.main a:hover::after,nav.main a[aria-current]::after{transform:skewX(-17deg) scaleX(1)}
.tel{display:flex;align-items:center;gap:7px;font-weight:600;color:var(--ink);font-size:1rem;white-space:nowrap}
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);font-weight:600;font-size:.9375rem;border:1px solid transparent;border-radius:var(--r-md);padding:11px 20px;cursor:pointer;transition:transform .18s var(--ease),background .18s,box-shadow .18s;white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn-p{background:var(--green-d);color:#fff!important}
.btn-p:hover{background:var(--green-h);box-shadow:0 6px 18px rgba(125,185,40,.32)}
.btn-d{background:var(--ink);color:#fff!important}
.btn-d:hover{background:#1f1f1d;box-shadow:0 6px 18px rgba(43,43,40,.25)}
.btn-o{background:#fff;border-color:var(--line);color:var(--ink)!important}
.btn-o:hover{border-color:var(--ink)}
.btn-lg{padding:14px 26px;font-size:1rem}
.burger{display:none;flex:0 0 auto;margin-left:auto;background:none;border:1px solid var(--line);border-radius:var(--r-md);width:44px;height:44px;cursor:pointer;align-items:center;justify-content:center}
.burger span{display:block;width:18px;height:2px;background:var(--ink);position:relative}
.burger span::before,.burger span::after{content:'';position:absolute;left:0;width:18px;height:2px;background:var(--ink);transition:transform .22s var(--ease)}
.burger span::before{top:-6px}.burger span::after{top:6px}
body.nav-open .burger span{background:transparent}
body.nav-open .burger span::before{transform:translateY(6px) rotate(45deg)}
body.nav-open .burger span::after{transform:translateY(-6px) rotate(-45deg)}
.drawer{position:fixed;inset:86px 0 0;background:#fff;transform:translateX(100%);transition:transform .3s var(--ease);z-index:45;padding:24px;overflow-y:auto}
body.nav-open{overflow:hidden}
body.nav-open .drawer{transform:none}
.drawer > a{display:block;padding:14px 4px;font-size:1.125rem;font-weight:500;color:var(--ink);border-bottom:1px solid var(--line)}
.drawer .d-tel{display:flex;align-items:center;gap:10px;margin-top:18px;padding:14px 16px;border:0;border-radius:var(--r-md);
  background:var(--tint);color:var(--ink);font-weight:600}
.drawer .d-tel svg{color:var(--green-d);flex:0 0 auto}
.drawer .btn{width:100%;justify-content:center}

/* ── Header: stufenweise verdichten, damit nie etwas gestaucht wird ──
 * Gemessener Bedarf mit 5 Nav-Punkten (seit "Mandantenbereich", 21.08.2026):
 * alles 1303 px (Kopf-Umschlag ab 1400 auf 1380 geweitet); ohne Telefon 1163 + 48 Rand → ab 1240; nur Signet 865 + 48 → ab 940.
 * Haltepunkte mit ~30 px Reserve. (Mit 4 Punkten waren es 1162 / 1023 / 743.)
 */
/* Mit fuenf Punkten passen Wortmarke, Nav, Telefon und Knopf nicht mehr in die 1232 px
   Inhaltsbreite des Umschlags (Bedarf 1303). Ab 1400 darf der Kopf darum 100 px breiter
   laufen als der Fusszeilen-Umschlag; darunter faellt das Telefon weg. */
@media(min-width:1400px){ .hdr .wrap.wide{max-width:1380px} }
@media(max-width:1399px){ .hdr .tel{display:none} }
@media(max-width:1239px){
  .hdr .logo .l-full{display:none}
  .hdr .logo .l-mark{display:block;height:38px}
}
@media(max-width:939px){
  nav.main,.hdr .tel,.hdr .btn{display:none}
  .burger{display:flex}
  /* Im Burger-Modus wirkt das Signet allein verloren. Deshalb die lange Wortmarke,
     mitwachsend: reserviert werden Burger (42) + Abstand (16) + Innenabstand (2x16). */
  .hdr .logo .l-mark{display:none}
  .hdr .logo .l-full{display:block;height:auto;width:min(calc(100vw - 96px),268px)}
}
@media(max-width:779px){
  .hero .hero-badge{display:none}   /* mobil steht die Adresse ohnehin im Footer */
  .wrap{padding:0 16px}
}

/* ── Banner-Nachrichten (Backoffice): schmale Leiste zwischen Kopf und Hero ── */
.hinweis-band{background:var(--green-d);color:#fff;font-size:.9375rem;line-height:1.4}
/* Im Hero liegt das Band ueber dem Bild statt davor: die Seite rutscht nicht. */
.hero > .hinweis-band{position:absolute;top:0;left:0;right:0;z-index:4}
.hinweis-band + .hinweis-band{border-top:1px solid rgba(255,255,255,.18)}
.hb-in{display:flex;align-items:center;gap:14px;padding:11px 24px}
.hb-mark{flex:0 0 auto;width:3px;height:18px;background:var(--green);transform:skewX(-17deg);border-radius:2px}
.hinweis-band p{margin:0;flex:1 1 auto;min-width:0}
.hb-link{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;color:#fff;font-weight:600;white-space:nowrap;
  border-bottom:1px solid rgba(255,255,255,.5);padding-bottom:1px}
.hb-link:hover{color:#fff;border-color:#fff}
@media(max-width:768px){.hb-in{flex-wrap:wrap;gap:8px 12px;padding:10px 16px;font-size:.875rem}
  .hinweis-band p{flex:1 1 0}.hb-link{flex:0 0 auto;margin-left:15px}}

/* ── Hero: Vollbild, Hintergrund spaeter Video ── */
.hero{position:relative;padding:0;min-height:calc(100svh - var(--hdr-h));display:flex;align-items:center;
  overflow:hidden;background:var(--ink)}
.hero-bg{position:absolute;inset:-8% 0 -8% 0;z-index:0;will-change:transform}
.hero-bg .hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  opacity:0;transition:opacity 1.1s var(--ease)}
.hero-bg .hero-img.is-on{opacity:1}
.hero-veil{position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(20,20,18,.86) 0%,rgba(20,20,18,.66) 46%,rgba(20,20,18,.34) 100%)}
.hero-inner{position:relative;z-index:2;width:100%;max-width:var(--w-wide);
  padding:clamp(52px,7.5vh,92px) 24px clamp(60px,9vh,96px)}

/* rotierende Aussage: alle Folien uebereinander, damit die Hoehe nicht springt */
.hero-slides{position:relative;min-height:250px;margin-bottom:38px}
.hslide{position:absolute;inset:0;opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.hslide.is-on{opacity:1;transform:none;pointer-events:auto}
.hslide .eyebrow{color:var(--green)}
.hslide h1,.hslide .h1{font-family:var(--serif);font-weight:600;color:#fff;margin:0 0 14px;
  font-size:clamp(2.25rem,1.5rem + 3.2vw,4rem);line-height:1.1;letter-spacing:-.015em}
.hslide .lead{color:#e6e5e1;font-size:clamp(1.0625rem,1rem + .45vw,1.375rem);margin:0;max-width:34ch}

.hero-foot{display:flex;align-items:center;gap:20px;margin-top:26px;flex-wrap:wrap}
.hero-dots{display:flex;gap:9px}
.hero-dots button{position:relative;width:34px;height:24px;box-sizing:border-box;border:0;padding:10px 0;margin:-10px 0;
  border-radius:2px;cursor:pointer;background:rgba(255,255,255,.3);background-clip:content-box;
  transform:skewX(-17deg);overflow:hidden;transition:background .3s,width .35s var(--ease)}
/* Die Punkte sind 4 px hohe Balken. Als Tippziel waren sie damit unbrauchbar (Ticket
   2507): der Knopf ist jetzt 24 px hoch, gemalt wird nur der Inhaltsbereich, und der
   negative Aussenabstand laesst die Zeile dort stehen, wo sie war. */
.hero-dots button::after{content:'';position:absolute;inset:10px 0;transform-origin:left;transform:scaleX(0);
  background:var(--green)}
.hero-dots button[aria-selected="true"]{width:64px;background:rgba(255,255,255,.22)}
.hero-dots button[aria-selected="true"]::after{animation:dotfill var(--dot-dauer,10s) linear forwards}
.hero.is-pause .hero-dots button::after{animation-play-state:paused}
@keyframes dotfill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.hero-badge{position:absolute;right:26px;bottom:22px;z-index:3;display:inline-flex;align-items:center;gap:7px;
  padding:8px 15px;border-radius:999px;background:rgba(255,255,255,.12);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.18);color:#dedcd8;font-size:.75rem;font-weight:600;letter-spacing:.01em;
  transition:background .22s,color .22s,border-color .22s}
.hero-badge:hover{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.4);color:#fff}
.hero-badge svg{color:var(--green)}

/* ── Zwei Wege ── */
.paths{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:900px}
.paths > .path-slot{min-width:0}
.path{position:relative;display:flex;flex-direction:column;padding:28px 34px 30px;border-radius:20px;
  color:var(--body);background:linear-gradient(150deg,#fff 0%,#fbfdf6 100%);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.5);border-top:4px solid transparent;
  box-shadow:0 14px 40px rgba(10,12,8,.26);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)}
/* Als Rahmenlinie statt als Pseudo-Element: die Linie folgt damit automatisch der
   Rundung. Ein absolut gesetzter Balken stand ausserhalb der abgerundeten Ecken. */
/* Trefferflaeche und bewegter Inhalt sind getrennt: .path-slot bleibt stehen und faengt
   das Ueberfahren, nur die .path darin hebt sich. Ein Puffer half hier nicht, weil er sich
   mit der Kachel hob und unten genau der Hub als Flacker-Zone stehen blieb. */
.path-slot{position:relative;display:flex}
.path-slot > .path{flex:1;min-width:0}

.path-kopf{display:flex;align-items:center;margin-bottom:22px}
.path .scard-i{width:52px;height:52px;border-radius:15px;background:var(--tint-2);color:var(--green-d)}

.path-n{font-family:var(--serif);font-size:.875rem;font-weight:600;color:#a9a8a4;letter-spacing:.14em}
.path h2{font-size:1.5rem;margin:0 0 6px;color:var(--ink)}
.path p{margin:0 0 22px;font-size:.9375rem;color:var(--body);max-width:30ch}
.path-go{margin-top:auto;display:flex;align-items:center;gap:12px;font-weight:600;font-size:.9375rem;color:var(--green-d)}
.path-pfeil{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:999px;
  background:var(--tint);color:var(--green-d);transition:background .28s var(--ease),color .28s var(--ease),transform .28s var(--ease)}


/* ── Mandantenbereich (Downloads) ──
 * Jede Zeile ist ein Link mit download-Attribut. Dateityp als Marke links, Titel und
 * Groesse in der Mitte, Pfeil rechts. Karten der obersten Reihe sind komplett klickbar. */
.dl-typ{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;min-width:44px;height:24px;padding:0 7px;
  border-radius:5px;background:var(--tint-2);color:var(--green-d);font-family:var(--sans);font-size:.75rem;font-weight:700;letter-spacing:.06em}
.dl-card{display:flex;flex-direction:column;gap:0;color:var(--body)}
.dl-card .dl-typ{align-self:flex-start;margin-bottom:14px}
.dl-card h3{font-size:1.125rem;hyphens:manual}
.dl-card p{margin-bottom:18px}
.dl-card .card-link{margin-top:auto;color:var(--green-d);gap:8px}
.dl-card:hover h3{color:var(--green-d)}
.dl-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.dl-list li{border-bottom:1px solid var(--line)}
.dl{position:relative;display:flex;align-items:center;gap:14px;margin:0 -10px;padding:12px 10px;color:var(--body);border-radius:var(--r-sm);transition:background .18s,color .18s}
/* Hover: gruener Akzentbalken links faehrt aus, der Kreis fuellt sich, der Pfeil nickt nach unten. */
.dl::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:3px;border-radius:3px;background:var(--green);transform:scaleY(0);transition:transform .2s var(--ease)}
.dl-go svg{transition:transform .22s var(--ease)}
.dl .dl-t{display:flex;flex-direction:column;min-width:0;flex:1}
.dl .dl-t b{color:var(--ink);font-weight:600;font-size:1rem;line-height:1.35;overflow-wrap:break-word;hyphens:manual}
.dl .dl-t small{font-size:.8125rem;color:var(--body)}
.dl-go{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:34px;height:34px;border-radius:999px;
  background:var(--tint);color:var(--green-d);transition:background .22s var(--ease),color .22s var(--ease),transform .22s var(--ease)}
.dl-block-t{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 14px;margin:48px 0 18px;font-size:1.25rem}
.dl-block-t:first-of-type{margin-top:0}
.dl-block-t span{font-family:var(--sans);font-weight:400;font-size:.9375rem;color:var(--body)}
.dl-jahre{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.dl-jahr{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 20px 8px;box-shadow:var(--sh-card)}
.dl-jahr h3{font-size:1.0625rem;margin:0 0 8px;color:var(--green-d)}
.dl-jahr .dl-list{border-top:0}
.dl-jahr li:last-child{border-bottom:0}
.dl-jahr .dl{padding:10px 10px}
/* Archiv-Aufklapper fuer aeltere Jahrgaenge: dezenter Summary-Button im Kachel-Stil,
   Klapp-Pfeil rechts, gleiche Farben/Radien wie .dl-jahr. Rein nativ, kein JavaScript. */
.dl-archiv{margin-top:20px}
.dl-archiv summary{display:flex;align-items:center;gap:10px;cursor:pointer;list-style:none;
  padding:14px 20px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-card);
  font-family:var(--sans);font-weight:600;font-size:.9375rem;color:var(--green-d);
  transition:background .18s,border-color .18s,color .18s}
.dl-archiv summary::-webkit-details-marker{display:none}
.dl-archiv summary::after{content:"";flex:0 0 auto;width:9px;height:9px;margin-left:auto;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg);transition:transform .22s var(--ease)}
.dl-archiv[open] summary::after{transform:rotate(-135deg)}
.dl-archiv[open] summary{margin-bottom:20px}
.dl-archiv summary:hover{background:var(--tint);border-color:var(--green);box-shadow:0 6px 18px rgba(0,0,0,.07)}
.dl-archiv:not([open]) summary:hover::after{transform:rotate(45deg) translate(2px,2px)}
.dl-archiv summary:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.dl-vorlagen{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:6px 22px;box-shadow:var(--sh-card)}
.dl-vorlagen .dl-list{border-top:0}
.dl-vorlagen li:last-child{border-bottom:0}
.dl-vorlagen .dl{padding:14px 10px}
/* Abstand zur Box oben = Restpadding des Vorlagen-Abschnitts (76 - 28), unten dasselbe. */
.phead-sec.dl-hinweis-sec{margin-top:-28px;padding:0 0 48px}
.dl-hinweis{display:flex;gap:18px;align-items:flex-start;padding:26px 28px;border:1px solid var(--tint-2);border-left:4px solid var(--green);
  border-radius:var(--r-lg);background:var(--tint)}
.dl-hinweis svg{flex:0 0 auto;color:var(--green-d);margin-top:2px}
.dl-hinweis h3{font-size:1.125rem;margin-bottom:6px}
.dl-hinweis p{margin:0;max-width:64ch;font-size:.9375rem}
.dl-hinweis-k{margin-top:10px!important;font-weight:600}
@media (hover:hover) and (pointer:fine){
  .dl:hover{background:var(--tint)}
  .dl:hover::before{transform:scaleY(1)}
  .dl:hover .dl-t b{color:var(--green-d)}
  .dl:hover .dl-go,.dl-card:hover .dl-go{background:var(--green-d);color:#fff;box-shadow:0 5px 14px rgba(82,122,24,.28)}
  .dl:hover .dl-go svg,.dl-card:hover .dl-go svg{transform:translateY(2px)}
}
@media(max-width:1000px){
  .dl-jahre{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  .dl-jahre{grid-template-columns:1fr}
  .dl-card h3{font-size:1.0625rem}
  .dl-vorlagen{padding:4px 16px}
  .dl{gap:12px}
  .dl-hinweis{padding:20px 18px;gap:14px}
  .phead-sec.dl-hinweis-sec{margin-top:-16px;padding-bottom:40px}
}
@media(max-width:600px){
  .cards.dl-cards{grid-template-columns:1fr}
}
@media(max-width:430px){
  .dl-typ{min-width:40px;font-size:.625rem}
  .dl .dl-t b{font-size:.9375rem}
}

/* Flache Fenster (Notebooks): Hero verdichten, damit er nicht ueber den Falz ragt */
@media(min-width:780px) and (max-height:840px){
  .hero-slides{min-height:186px;margin-bottom:26px}
  .hslide h1,.hslide .h1{font-size:clamp(1.85rem,1.1rem + 2.3vw,2.9rem)}
  .hslide .lead{font-size:1.0625rem}
  .path{padding:22px 26px 20px}
  .path .scard-i{width:40px;height:40px}
  .path h2{font-size:1.3125rem}
  .path p{margin-bottom:16px}
  .hero-foot{margin-top:18px}
}

/* ── Kennzahlen ── */
.zahlen{background:var(--ink);color:#c9c8c4;position:relative;overflow:hidden;padding:64px 0}
.zahlen::before{content:'';position:absolute;top:-30%;bottom:-30%;left:-70px;width:150px;
  background:rgba(125,185,40,.13);transform:skewX(-17deg)}
.zahlen::after{content:'';position:absolute;top:-30%;bottom:-30%;right:-90px;width:220px;
  background:rgba(125,185,40,.07);transform:skewX(-17deg)}
.kpis{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.kpi{position:relative;padding:16px 34px;border-left:1px solid rgba(255,255,255,.12);border-radius:var(--r-lg);
  transition:background .3s var(--ease),transform .3s var(--ease)}
.kpi:hover{background:rgba(125,185,40,.1);transform:translateY(-4px)}
.kpi b{transition:color .3s var(--ease)}
.kpi:hover b{color:#9ed13f}
.kpi::after{content:'';position:absolute;left:34px;right:34px;bottom:6px;height:2px;background:var(--green);
  transform:skewX(-17deg) scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.kpi:hover::after{transform:skewX(-17deg) scaleX(1)}
.kpi:first-child{border-left:0}
.kpi b{display:block;font-family:var(--serif);font-weight:600;color:var(--green);line-height:.95;
  font-size:clamp(3rem,2rem + 4.2vw,5.25rem);letter-spacing:-.02em;margin-bottom:14px}
.kpi-t{display:block;color:#fff;font-weight:600;font-size:1.0625rem;margin-bottom:4px}
.kpi-s{display:block;color:#9b9a96;font-size:.875rem;line-height:1.5}


/* ── Leistungs-Karten: 3 oben, 2 unten, Link buendig am Fuss ── */
.svc-cards{display:grid;grid-template-columns:repeat(6,1fr);gap:20px}
.svc-cards .scard:nth-child(-n+3){grid-column:span 2}
.svc-cards .scard:nth-child(n+4){grid-column:span 3}
.scard{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-lg);padding:26px 26px 22px;overflow:hidden;color:var(--body);
  transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s}
.scard::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:var(--green);
  transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.scard:hover{transform:translateY(-5px);box-shadow:var(--sh-raise);border-color:transparent}
.scard:hover::before{transform:scaleX(1)}
.scard-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.scard-n{font-family:var(--serif);font-size:.8125rem;font-weight:600;color:var(--green-d);letter-spacing:.1em}
.scard-i{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:12px;
  background:var(--tint);color:var(--green-d);transition:background .28s var(--ease),color .28s var(--ease),transform .28s var(--ease)}

.scard h3{margin:0 0 8px;hyphens:none}
.scard p{margin:0 0 18px;font-size:.9375rem}
.scard .card-link{margin-top:auto}

/* ── Drei Schritte als Zeitstrahl ── */
.steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin:0;padding:0;position:relative}
.step{position:relative;padding:0;background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:0 24px 22px;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}

.step-n{position:relative;top:-26px;display:flex;align-items:center;justify-content:center;width:52px;height:52px;
  border-radius:999px;background:var(--green);color:#fff;font-family:var(--serif);font-size:1.375rem;font-weight:600;
  box-shadow:0 0 0 8px var(--tint)}
.step b{display:block;font-family:var(--serif);color:var(--ink);font-size:1.1875rem;margin:-12px 0 8px}
.step p{margin:0;font-size:.9375rem}

/* ── Parallaxe ── */
[data-par]{will-change:translate}

/* ── Leistungen: Bild und Text wechseln die Seite ── */
.svc-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.svc.flip .svc-text{order:2}
.svc.flip .svc-media{order:1}
.svc-media{display:block;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-card);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.svc-media{position:relative}
.svc-par{display:block;overflow:hidden;border-radius:var(--r-lg)}
.svc-media img{display:block;width:100%}
/* Der ganze Abschnitt ist anfassbar: Bild und Link reagieren gemeinsam.
   Bewusst KEIN nur-bei-Hover sichtbarer Knopf, das gibt es auf Touch nicht. */
.svc:hover .svc-media{transform:translateY(-5px);box-shadow:var(--sh-raise)}

.svc-link{display:inline-flex;align-items:center;gap:8px;margin-top:6px;font-weight:600;font-size:.9375rem;color:var(--green-d)}
.svc-link svg{transition:transform .22s var(--ease)}
.svc:hover .svc-link{color:var(--green-h)}
.svc:hover .svc-link svg{transform:translateX(5px)}

/* ── Kontakt: zwei direkte Wege statt eines vollen Datenblocks ──
 * Adresse und Zeiten stehen weiter unten im Anfahrt-Abschnitt, hier waeren sie doppelt. */
.direkt{display:grid;gap:12px;margin-bottom:20px}
.direkt-z{display:flex;align-items:center;gap:14px;padding:16px 18px;border:1px solid var(--line);
  border-radius:var(--r-lg);background:#fff;color:var(--body);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s}
.direkt-z:hover{transform:translateY(-2px);box-shadow:var(--sh-card);border-color:var(--tint-2);color:var(--body)}
.direkt-z b{transition:color .2s}

.direkt-z svg{color:var(--green-d);flex:0 0 auto}
.direkt-z b{display:block;color:var(--ink);font-size:1.0625rem;margin-bottom:1px}
.direkt-z span{font-size:.875rem}
.kontakt-foto{margin:0;border-radius:var(--r-lg);overflow:hidden;background:var(--tint)}
.kontakt-foto img{display:block;width:100%}
.kontakt-foto figcaption{padding:12px 16px 14px;font-size:.8125rem;color:#8a8985}

.kontaktbox{border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;background:#fff}
.kontaktbox .direkt-z{border:0;padding:0 0 16px;border-bottom:1px solid var(--line);border-radius:0}
.kontaktbox .direkt-z:hover{transform:none;box-shadow:none}
.kb-adr{margin:16px 0 0;font-size:1.0625rem}
.kb-adr strong{color:var(--ink)}
.kontaktbox .oz{margin:16px 0 0;border:0;padding:0;background:none}

/* Formularfuss: Zurueck links, Absenden rechts, gleiche Hoehe und Breite */
.frm-fuss{margin-top:26px}
.frm-fuss-b{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.frm-notiz{flex:1 1 300px}
.frm-notiz .dsg{margin:0 0 6px}
.frm-fuss-b .frm-notiz .dsg:last-child{margin-bottom:0}
.frm-notiz .dsg:last-child{margin-bottom:0}
.frm-fuss-b .btn{flex:0 0 auto}
.frm-reihe{display:flex;gap:12px;align-items:stretch;flex-wrap:wrap}
.frm-reihe .btn{flex:1 1 0;min-width:160px;justify-content:center}
.zaehler{float:right;font-weight:400;font-size:.75rem;color:#a9a8a4;font-variant-numeric:tabular-nums}
.zaehler.voll{color:#c2434a}
.dsg{margin:0 0 14px;font-size:.8125rem;color:#8a8985}
/* Unter dem Knopf statt darueber: der Abstand gehoert dann nach unten, sonst klebt
   der Satz am Knopf und die Luft steht an der falschen Stelle. */
.dsg-fuss{margin:14px 0 0}

/* Kontaktseite: die beiden Spalten sollen unten auf einer Linie enden. Statt einer
   geratenen Mindesthoehe streckt sich das Textfeld auf den Rest der Spaltenhoehe. */
.k-reihe{align-items:stretch}
.card-hoch{display:flex;flex-direction:column}
.card-hoch form{display:flex;flex-direction:column;flex:1}
.card-hoch .field:has(textarea){display:flex;flex-direction:column;flex:1}
.card-hoch textarea{flex:1;min-height:150px}
.k-reihe > .rv{display:flex;flex-direction:column}
/* Die beiden Kontaktkacheln an den Spaltenfuss, sonst endet die rechte Spalte
   knapp ueber der linken und die Unterkanten stehen nicht auf einer Linie. */
.k-reihe .direkt{margin-top:auto;margin-bottom:0}
@media (max-width:1000px){.card-hoch textarea{min-height:140px}}
.dsg a{color:var(--green-d);text-decoration:underline}

/* Bildunterschrift der Kontaktaufnahme. Gruen statt Dunkelgrau: der graue Balken
   wirkte wie ein Fremdkoerper unter dem Foto. Weiss auf --green-d liegt bei 5,1:1
   und damit ueber der Anforderung fuer Fliesstext. */
.kontakt-foto{margin:0 0 20px}
.kontakt-foto figcaption{display:flex;align-items:center;justify-content:center;
  padding:15px 18px;background:var(--green-d);color:#fff;font-family:var(--serif);font-size:1rem;font-weight:600}
.zusammen{white-space:nowrap}
.adr-link{color:inherit}
.adr-link{transition:color .2s}
.adr-link:hover,.adr-link:hover strong{color:var(--green-d)}
.adr-link strong{transition:color .2s}

/* Zeitstrahl reagiert auf den Zeiger */
.step-n{transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s}

.step b{transition:color .25s}

.step-alt-strich{content:'';position:absolute;left:24px;right:24px;bottom:0;height:3px;background:var(--green);
  transform:skewX(-17deg) scaleX(0);transform-origin:left;transition:transform .38s var(--ease)}


/* ── Eigene Auswahl ──
 * Ein natives <select> laesst nur das geschlossene Feld gestalten, die Aufklappliste
 * zeichnet das Betriebssystem. Deshalb hier Knopf plus eigene Liste.
 */
.cbox{position:relative}
.cbox-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-family:inherit;font-size:16px;text-align:left;color:var(--ink);background:#fff;cursor:pointer;
  border:1px solid var(--line);border-radius:var(--r-md);padding:11px 14px;transition:border-color .18s,box-shadow .18s}
.cbox-btn:hover{border-color:var(--tint-2)}
.cbox-btn[aria-expanded="true"]{border-color:var(--green);box-shadow:0 0 0 3px rgba(125,185,40,.16)}
.cbox-btn svg{color:var(--green-d);flex:0 0 auto;transition:transform .22s var(--ease)}
.cbox-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.cbox-liste{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:90;margin:0;padding:6px;
  list-style:none;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:0 16px 40px rgba(43,43,40,.16);max-height:280px;overflow:auto}
.cbox-liste li{padding:11px 13px;border-radius:var(--r-md);font-size:.9375rem;cursor:pointer;
  display:flex;align-items:center;gap:10px;transition:background .14s,color .14s}
.cbox ul.cbox-liste li::before{content:'';position:static;width:7px;height:7px;border-radius:999px;
  background:transparent;transform:none;flex:0 0 auto}
.cbox-liste li:hover,.cbox-liste li.markiert{background:var(--tint);color:var(--ink)}
.cbox-liste li[aria-selected="true"]{color:var(--green-d);font-weight:600}
.cbox ul.cbox-liste li[aria-selected="true"]::before{background:var(--green)}

/* Auswahlfeld mit eigenem Pfeil statt Systemdarstellung */
.sel{position:relative}
.sel select{appearance:none;-webkit-appearance:none;padding-right:42px;cursor:pointer}
.sel-p{position:absolute;right:15px;top:50%;margin-top:-7px;pointer-events:none;color:var(--green-d)}
.sel select:focus + .sel-p{color:var(--green)}

/* Stimmen aus dem Team */
/* Zitate. Vorher standen sie in einem 720 px schmalen Container: bei 320 px
   Kachelbreite blieben 230 px fuer den Satz, also drei Woerter je Zeile. Jetzt volle
   Breite, und das Anfuehrungszeichen liegt als Verzierung in der Ecke, statt oben
   50 px Platz zu belegen. */
/* Zitate mit Hochkant-Foto links, Text rechts. Die kleine runde Variante gefiel weniger;
   das Portraet im 4:5-Format neben dem Zitat wirkt persoenlicher. Breite bleibt zweispaltig. */
.stimmen{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.stimme{margin:0;padding:28px 30px;background:#fff;border:1px solid var(--line);border-radius:18px;
  box-shadow:var(--sh-card);display:flex;gap:22px;align-items:flex-start;
  transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s}
.stimme-foto{flex:0 0 128px;width:128px;aspect-ratio:4/5;object-fit:cover;object-position:top;
  border-radius:12px;align-self:flex-start}
.stimme-in{flex:1;min-width:0;display:flex;flex-direction:column;align-self:stretch}
.stimme blockquote{margin:0 0 16px;font-family:var(--serif);font-size:1.1875rem;line-height:1.5;color:var(--ink);hyphens:none}
.stimme figcaption{margin-top:auto;padding-top:14px;border-top:1px solid var(--line)}
.stimme figcaption b{display:block;color:var(--ink);font-size:.9375rem}
.stimme figcaption em{font-style:normal;font-size:.8125rem}

/* Kennenlern-Bereich: beide Spalten beginnen mit einer Ueberschrift auf gleicher
 * Grundlinie, die Karten darunter sind gleich hoch. Vorher standen sie versetzt. */
.kl{display:grid;grid-template-columns:1.15fr .85fr;gap:32px;align-items:stretch}
.kl-spalte{display:flex;flex-direction:column}
.kl-t{margin:0 0 16px;font-size:1.25rem;min-height:1.9em}
.kl-spalte > .wizard,.kl-spalte > .kontaktbox{flex:1;display:flex;flex-direction:column}
.wizard .wpane.on{display:flex;flex-direction:column}
.kontaktbox{display:flex;flex-direction:column;justify-content:flex-start}

/* Zielgruppen-Karte ganzflaechig klickbar */
.zg-karte{color:var(--body)}
.zg-karte:hover{color:var(--body)}
.zg-karte .card-link{color:var(--green-d)}
.zg-karte:hover .card-link svg{transform:translateX(4px)}

/* ── Anfahrt ── */
/* Beide Spalten enden unten auf einer Linie: die jeweils letzte Flaeche wird an den
   Spaltenfuss geschoben. Welche Spalte laenger ist, haengt vom Inhalt ab, deshalb
   steht die Regel auf beiden Seiten. */
.anfahrt{display:grid;grid-template-columns:1fr 1.15fr;gap:48px;align-items:stretch}
.anfahrt > div{display:flex;flex-direction:column}
.anfahrt .oz,.anfahrt .route{margin-top:auto}
.anfahrt .oz{margin-bottom:0}
.anfahrt .adr{font-size:1.125rem;margin:0 0 .5em}
.anfahrt .adr strong{color:var(--ink)}
.anfahrt .adr .adr-link:hover,.anfahrt .adr .adr-link:hover strong{color:var(--green-d)}
.tel-big{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:1.125rem;color:var(--ink)}
.tel-big:hover{color:var(--green-d)}
.oz{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px 22px;margin:22px 0 14px}
.oz-t{font-family:var(--serif);font-weight:600;color:var(--ink);font-size:1.0625rem;margin:0 0 10px}
.oz-d{margin:0;font-weight:600;color:var(--ink);font-size:.9375rem}
.oz-h{margin:0 0 10px;color:var(--green-d);font-size:1.0625rem;font-weight:600}
.oz-h:last-child{margin-bottom:0}
.karte{position:relative;display:block;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-card);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.karte img{display:block;width:100%;aspect-ratio:2/1;object-fit:cover}
.karte:hover{transform:translateY(-3px);box-shadow:var(--sh-raise)}
.karte-pin{position:absolute;left:14px;bottom:12px;background:rgba(255,255,255,.94);color:var(--ink);
  font-size:.8125rem;font-weight:600;padding:6px 11px;border-radius:999px;box-shadow:var(--sh-card)}
.karte-cc{margin:8px 0 14px;font-size:.75rem;color:#8a8985}
.karte-cc a{color:#8a8985;text-decoration:underline}
.route{width:100%;justify-content:center}


/* Sprungziele unter dem klebenden Header freihalten */
section[id],[id^="anfrage"],[id^="stellen"],[id^="bewerbung"],[id^="anfahrt"]{scroll-margin-top:104px}

/* ── Seitenkopf als gruene Flaeche ──
 * Grundton --green-d, weil Weiss darauf 5,05:1 erreicht. Auf dem hellen --green
 * waere Weiss nur 2,37:1 und damit unlesbar. Eyebrow in --tint (4,72:1).
 * Deko: 17°-Streifen und ein weicher Lichtkegel, beides aus dem Logo abgeleitet.
 */
.pagehead{position:relative;margin:0;padding:96px 64px 92px;border-radius:24px;overflow:hidden;
  background:var(--green-d);color:#eaf3dc;isolation:isolate}
.pagehead::before{content:'';position:absolute;top:-40%;bottom:-40%;left:8%;width:190px;
  background:rgba(255,255,255,.07);transform:skewX(-17deg);z-index:-1}
.pagehead::after{content:'';position:absolute;top:-40%;bottom:-40%;right:-4%;width:300px;
  background:rgba(255,255,255,.05);transform:skewX(-17deg);z-index:-1}
.pagehead .glow{position:absolute;right:-140px;top:-180px;width:520px;height:520px;border-radius:999px;z-index:-1;
  background:radial-gradient(circle,rgba(255,255,255,.16),rgba(255,255,255,0) 68%)}
.pagehead .eyebrow{display:inline-flex;align-items:center;gap:9px;margin-bottom:20px;padding:7px 14px 7px 12px;
  border-radius:999px;background:var(--line);color:var(--ink);font-size:.8125rem;letter-spacing:.02em}
.pagehead .slash{background:var(--green-d)}
.pagehead h1{color:#fff;margin:0 0 16px;max-width:20ch}
.pagehead p{color:#eaf3dc;font-size:1.125rem;max-width:56ch;margin:0}
.pagehead .ph-cta{margin-top:26px;display:flex;gap:12px;flex-wrap:wrap}
.pagehead .ph-list{margin:22px 0 0;max-width:58ch}
.pagehead .ph-list li{position:relative;padding-left:20px;margin:.45em 0;color:#eaf3dc;font-size:1rem}
.pagehead .ph-list li::before{content:'';position:absolute;left:0;top:.62em;width:11px;height:3px;
  background:#fff;transform:skewX(-17deg);border-radius:2px}
.pagehead .ph-list b{color:#fff;font-weight:600}

/* Kopf mit Bild: kraeftiger Schleier, damit Weiss sicher ueber 5:1 bleibt */
/* Kanzleiseite: Text links, Foto rechts. Bewusst kein Hintergrundbild wie bei
   Karriere, das Motiv soll ganz zu sehen sein. */
.pagehead-neben{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,.62fr);
  gap:clamp(28px, 4vw, 56px);align-items:center;padding-right:clamp(28px, 3.5vw, 48px)}
.pagehead-neben h1{max-width:20ch}
.pagehead-neben p,.pagehead-neben .ph-list{max-width:46ch}
.ph-foto{margin:0;border-radius:18px;overflow:hidden;box-shadow:0 24px 60px rgba(10,12,8,.34)}
.ph-foto img{display:block;width:100%;height:auto}
@media (max-width:960px){
  .pagehead-neben{grid-template-columns:1fr;padding-right:0}
  .pagehead-neben .ph-foto{max-width:320px}
  .pagehead-neben h1,.pagehead-neben p,.pagehead-neben .ph-list{max-width:none}
}
.pagehead-img{background:var(--ink)}
.pagehead-img .ph-bg{position:absolute;inset:0;z-index:-2;display:block}
.pagehead-img .ph-bg img{width:100%;height:100%;object-fit:cover;display:block}
.pagehead-img::before{content:'';position:absolute;inset:0;z-index:-1;background:
  linear-gradient(100deg,rgba(20,22,17,.94) 0%,rgba(24,32,12,.90) 34%,rgba(34,48,14,.62) 58%,rgba(52,78,18,.24) 100%);
  transform:none;width:auto}
.pagehead-img::after{display:none}
.pagehead .btn-w{background:#fff;color:var(--green-d)!important;font-weight:600}
.pagehead .btn-w:hover{background:var(--tint);box-shadow:0 8px 22px rgba(0,0,0,.18)}
.pagehead .btn-ghost{background:transparent;border:1px solid rgba(255,255,255,.5);color:#fff!important}
.pagehead .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.1)}

/* ── Einwilligungsleiste ──
 * Die Seite laedt nichts von Dritten, deshalb ist sie normalerweise ausgeblendet.
 * Zur Ansicht: ?cookie=demo an die Adresse haengen.
 */
.cbar{position:fixed;left:0;right:0;bottom:0;z-index:80;background:#fff;border-top:1px solid var(--line);
  box-shadow:0 -8px 32px rgba(43,43,40,.14);animation:cbarauf .45s var(--ease)}
@keyframes cbarauf{from{transform:translateY(100%)}to{transform:none}}
.cbar-in{max-width:var(--w-wide);margin:0 auto;padding:20px 24px;display:flex;gap:28px;align-items:center;flex-wrap:wrap}
.cbar b{display:block;font-family:var(--serif);color:var(--ink);font-size:1.0625rem;margin-bottom:4px}
.cbar p{margin:0;font-size:.875rem;max-width:70ch}
.cbar-btn{display:flex;gap:10px;margin-left:auto;flex-wrap:wrap}

/* ── Offene Fragen an die Kanzlei: bewusst rot, damit sie beim Durchsehen auffallen ── */
.offen{margin:16px 0 0;color:#c2434a;font-size:.8125rem;font-weight:500;max-width:62ch}
.offen-dunkel{position:relative;margin-top:34px;color:#f3a6a6}
.offen-i{color:#c2434a!important;font-weight:600}
.ph-bild{aspect-ratio:3/2;border-radius:var(--r-lg);background:#efeeeb;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.ph-bild-t{font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#9a9995}
.ph-bild-u{font-size:.9375rem;color:#8a8985}

/* ── Sektionen ── */
section{padding:76px 0}
/* Kopf-Sektionen: weniger Luft zwischen der Kopfbox und dem folgenden Inhalt. */
.phead-sec{padding-bottom:24px}
/* rote Rueckfragen ueberall rot, auch wo ein Container die Textfarbe setzt */
.acc .inner .offen,.card .offen,.step .offen{color:#c2434a}
section.alt{background:var(--surface)}
section.tinted{background:var(--tint-2)}
.sec-head{margin-bottom:40px}
.sec-head h2{max-width:30ch}
.sec-head p{max-width:58ch}
.sec-head p{font-size:1.0625rem}

/* ── Karten ── */
.cards{display:grid;gap:20px}
.c-2{grid-template-columns:repeat(2,1fr)}
.c-3{grid-template-columns:repeat(3,1fr)}
.c-4{grid-template-columns:repeat(4,1fr)}
.c-5{grid-template-columns:repeat(5,1fr)}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;box-shadow:var(--sh-card);transition:transform .28s var(--ease),box-shadow .28s,border-color .28s;position:relative;overflow:hidden}
/* overflow:hidden beschneidet sonst die Aufklappliste des Auswahlfeldes. */
.card-offen{overflow:visible}
.card:hover{transform:translateY(-4px);box-shadow:var(--sh-raise);border-color:var(--tint-2)}
.card h3{margin-bottom:8px}
.card p{font-size:.9375rem;margin-bottom:0;color:var(--body)}
/* rote Rueckfragen in Karten schlagen die graue Kartenschrift */
.card p.offen,.card .offen{color:#c2434a}
.card .num{font-family:var(--serif);font-size:.875rem;color:var(--green-d);font-weight:600;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:99px;background:var(--tint);margin-bottom:12px}
.card ul li{position:relative;padding-left:18px;font-size:.9375rem;margin:.3em 0}
.card ul li::before{content:'';position:absolute;left:0;top:.62em;width:9px;height:2.5px;background:var(--green);transform:skewX(-17deg);border-radius:2px}
.card-link{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-weight:600;font-size:.9375rem}
.card-link svg{transition:transform .2s var(--ease)}
.card:hover .card-link svg{transform:translateX(4px)}

/* Flache Fenster (Notebooks): Hero verdichten, damit er nicht ueber den Falz ragt */
@media(min-width:780px) and (max-height:840px){
  .hero-slides{min-height:186px;margin-bottom:26px}
  .hslide h1,.hslide .h1{font-size:clamp(1.85rem,1.1rem + 2.3vw,2.9rem)}
  .hslide .lead{font-size:1.0625rem}
  .path{padding:22px 26px 20px}
  .path .scard-i{width:40px;height:40px}
  .path h2{font-size:1.3125rem}
  .path p{margin-bottom:16px}
  .hero-foot{margin-top:18px}
}

/* ── Kennzahlen ── */

/* ── Team ── */
.team{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.person{border-radius:var(--r-lg);overflow:hidden;background:var(--surface);position:relative}
.person img{aspect-ratio:4/5;object-fit:cover;width:100%;transition:transform .5s var(--ease),filter .5s}
.person:hover img{transform:scale(1.04)}
/* "Steuerfachangestellter" passt in keine schmale Spalte. Mit Sprachangabe im
   html-Element trennt der Browser korrekt nach deutschen Regeln. */
.person{position:relative}
/* Rote Rueckfragen als Marke auf dem Bild. Heller Grund, damit sie auf jedem
   Portraet lesbar bleiben; ohne Zeigerereignisse, damit sie nichts blockieren. */
.notiz{position:absolute;left:9px;top:9px;right:9px;z-index:2;display:flex;flex-direction:column;
  align-items:flex-start;gap:5px;pointer-events:none}
.notiz i{font-style:normal;background:rgba(255,255,255,.93);color:#c2434a;font-size:.75rem;
  font-weight:600;line-height:1.25;padding:3px 9px;border-radius:999px;box-shadow:0 2px 9px rgba(20,22,16,.2)}
.person figcaption{padding:12px 14px 14px;font-size:.875rem;hyphens:manual;overflow-wrap:break-word}
.person figcaption b{display:block;color:var(--ink);font-weight:600}
/* Zwei Zeilen Platz fuer die Rolle, damit ein zweizeiliger Titel wie
   "Kaufmann für Büromanagement" die Grid-Zeile nicht hoeher zieht als die anderen.
   Gemessen: eine Zeile 21 px, zwei 43 px. */
.person figcaption span{display:block;color:#8a8985;font-size:.8125rem;line-height:1.35;min-height:2.7em}

/* ── Team-Teaser: versetzte Portraets, Beschriftung im Bild ── */
.team.team-teaser{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;align-items:start}
.team-teaser .person{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--tint);margin:0}
.team-teaser .person:nth-child(even){margin-top:34px}
.team-teaser .person img{aspect-ratio:4/5;object-fit:cover;width:100%;display:block;transition:transform .6s var(--ease)}

.team-teaser figcaption{position:absolute;left:0;right:0;bottom:0;padding:52px 15px 14px;color:#fff;hyphens:manual;overflow-wrap:break-word;
  background:linear-gradient(to top,rgba(18,18,16,.94) 0%,rgba(18,18,16,.82) 38%,rgba(18,18,16,.42) 70%,transparent 100%);
  text-shadow:0 1px 3px rgba(0,0,0,.55);transition:padding .3s var(--ease)}

.team-teaser figcaption b{display:block;color:#fff;font-weight:600;font-size:.9375rem}
.team-teaser figcaption span{color:#d6d5d1;font-size:.75rem}
.team-teaser .person-more{display:flex;flex-direction:column;justify-content:center;gap:8px;aspect-ratio:4/5;padding:22px;
  background:var(--ink);color:#c9c8c4;text-align:left;transition:transform .25s var(--ease)}
.person-more:hover{transform:translateY(-4px)}
.pm-n{font-family:var(--serif);font-size:2.25rem;font-weight:600;color:var(--green);line-height:1}
.pm-t{font-size:.875rem;line-height:1.4}
.pm-go{margin-top:6px;display:inline-flex;align-items:center;gap:7px;color:var(--green);font-weight:600;font-size:.8125rem}
.person-more:hover .pm-go svg{transform:translateX(4px)}
.pm-go svg{transition:transform .22s var(--ease)}

.zielgruppen .card{display:flex;flex-direction:column}
.zielgruppen .card .scard-i,.card > .scard-i{margin-bottom:18px}
.zielgruppen .card .card-link{margin-top:auto}


/* ── Prozess ── */
/* Hier stand ein schraeger gruener Akzent an der linken oberen Kartenecke. Er sass
   auf top:0;left:0 und ragte dadurch 2 bis 7 px aus der Rundung heraus. Entfernt,
   samt dem Innenabstand, der nur Platz dafuer freigehalten hat. */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;position:relative}
.step b{display:block;font-family:var(--serif);color:var(--ink);font-size:1.125rem;margin:12px 0 6px}

/* ── Banner ── */
.banner{background:var(--ink);color:#d8d7d3;position:relative;overflow:hidden}
.banner h2{color:#fff}
/* padding-block statt der Kurzschreibweise: sonst faellt der seitliche Abstand des
   Umschlags weg und der Text klebt auf schmalen Geraeten am Bildschirmrand. */
.banner .grid{display:grid;grid-template-columns:1.4fr auto;gap:32px;align-items:center;padding-block:56px}
.banner::before{content:'';position:absolute;top:0;bottom:0;left:-60px;width:120px;background:rgba(125,185,40,.14);transform:skewX(-17deg)}

/* ── Accordion ── */
.acc{border-top:1px solid var(--line)}
.acc details{border-bottom:1px solid var(--line)}
.acc summary{cursor:pointer;list-style:none;padding:18px 0;display:flex;align-items:center;gap:14px;font-family:var(--serif);font-size:1.0625rem;color:var(--ink);font-weight:600}
.acc summary::-webkit-details-marker{display:none}
/* Das um 45 Grad gedrehte Quadrat misst ueber die Diagonale 14 px und stand dadurch
   2 px ueber die rechte Kante hinaus. Der Rand faengt das ab. */
.acc summary::after{content:'';margin-left:auto;margin-right:3px;width:10px;height:10px;border-right:2px solid var(--green);border-bottom:2px solid var(--green);transform:rotate(45deg);transition:transform .25s var(--ease);flex:none}
.acc details[open] summary::after{transform:rotate(-135deg)}
.acc .inner{padding:0 0 18px;font-size:.9375rem;max-width:70ch}

/* ── Formular ── */
form .field{margin-bottom:16px}
label{display:block;font-size:.875rem;font-weight:600;color:var(--ink);margin-bottom:6px}
label .req{color:var(--green-d)}
input,textarea,select{width:100%;font-family:inherit;font-size:16px;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:11px 13px;transition:border-color .18s,box-shadow .18s}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(125,185,40,.16)}
textarea{min-height:120px;max-height:340px;resize:none}
input[type=file]{padding:7px 10px;font-size:.9375rem;cursor:pointer;color:var(--body)}
input[type=file]::file-selector-button{font:inherit;font-weight:600;color:var(--green-d);background:#F4F9EB;border:1px solid #E6F2D2;border-radius:4px;padding:6px 12px;margin-right:12px;cursor:pointer}
input[type=file]::file-selector-button:hover{background:#E6F2D2}
.dsg-datei{margin:6px 0 0}
.check{display:flex;gap:10px;align-items:flex-start;font-size:.875rem;font-weight:400;color:var(--body)}
.check span{flex:1}
.check input{width:auto;margin-top:3px}
.form-note{font-size:.8125rem;color:#8a8985}
/* Bestaetigung nach dem Absenden (Max, 28.09.: "eine sehr schoene Bestaetigung"): das Formular
   verschwindet, an seiner Stelle steht eine Karte mit gezeichnetem Haken. */
form.is-gesendet > *:not(.form-erfolg){display:none}
.form-erfolg{scroll-margin-top:110px;text-align:center;padding:34px 18px 26px;animation:erfolg-in .5s var(--ease) both}
.form-erfolg .haken{width:76px;height:76px;border-radius:50%;background:var(--tint-2);color:var(--green-d);
  display:inline-flex;align-items:center;justify-content:center;margin-bottom:18px;
  box-shadow:0 8px 24px rgba(82,122,24,.18)}
.form-erfolg .haken path{stroke-dasharray:34;stroke-dashoffset:34;animation:haken-zeichnen .45s .3s var(--ease) forwards}
.form-erfolg h3{font-family:var(--serif);font-size:1.5rem;margin:0 0 8px;color:var(--ink)}
.form-erfolg p{margin:0 auto;max-width:44ch;color:var(--body)}
.form-erfolg .erfolg-tel{margin-top:16px;font-size:.9375rem}
.form-erfolg .erfolg-tel a{color:var(--green-d);font-weight:600}
.form-erfolg .erfolg-neu{display:inline-block;margin-top:18px;font-size:.875rem;color:var(--body);
  background:none;border:0;padding:6px 0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.form-erfolg .erfolg-neu:hover{color:var(--green-d)}
@keyframes erfolg-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes haken-zeichnen{to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){.form-erfolg{animation:none}.form-erfolg .haken path{animation:none;stroke-dashoffset:0}}
/* Honeypot-Feld "website": fuer Menschen unsichtbar und nicht fokussierbar,
 * Spam-Skripte fuellen es trotzdem und fliegen serverseitig raus. */
form .hp{position:absolute !important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

/* ── Wizard ── */
.wizard{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;box-shadow:var(--sh-card)}
.wsteps{display:flex;gap:8px;margin-bottom:20px}
.wsteps i{flex:1;height:4px;background:var(--line);border-radius:2px;transition:background .3s}
.wsteps i.on{background:var(--green)}
.wpane{display:none}.wpane.on{display:block;animation:fadeUp .4s var(--ease) both}
.opts{display:grid;gap:10px;grid-template-columns:repeat(3,1fr);margin-bottom:18px}
.opt{border:1px solid var(--line);background:#fff;border-radius:var(--r-md);padding:14px 12px;text-align:left;cursor:pointer;font:inherit;font-size:.9375rem;color:var(--ink);transition:border-color .18s,background .18s,transform .18s}
.opt:hover{border-color:var(--green);transform:translateY(-2px)}
.opt[aria-pressed=true]{border-color:var(--green);background:var(--tint);font-weight:600}
.wnav{display:flex;gap:12px;align-items:center;margin-top:auto;padding-top:20px}

/* ── Click-to-load (DSGVO) ── */
.ctl{position:relative;border:1px dashed var(--line);border-radius:var(--r-lg);background:var(--surface);min-height:320px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:28px}
.ctl p{max-width:46ch;font-size:.9375rem;margin:0}

/* ── Footer ── */
/* Der Ueberscroll-Bereich unter der Seite zeigt sonst Weiss auf. Ein Verlauf auf html
 * hilft nicht: der kachelt, nach der dunklen Haelfte kaeme wieder Weiss. Stattdessen
 * zieht der Footer seine Farbe per Schatten nach unten weiter, ohne Layout-Wirkung. */
footer{background:var(--ink);color:#b9b8b4;padding:60px 0 28px;font-size:.9375rem;
  box-shadow:0 50vh 0 50vh var(--ink)}
footer h4{color:#fff;font-family:var(--sans);font-size:.8125rem;letter-spacing:.1em;text-transform:uppercase;margin:0 0 14px}
footer a{color:#d8d7d3}
footer a:hover{color:var(--green)}
/* letzte Spalte schmaler, damit der Text buendig zum rechten Rand steht */
footer .cols{display:grid;grid-template-columns:1.55fr 1fr 1fr .92fr;gap:36px}
footer .mark img{height:38px;margin-bottom:14px}
footer li{margin:.4em 0}
footer .bottom{margin-top:40px;padding-top:20px;border-top:1px solid #3a3a35;display:flex;gap:16px;flex-wrap:wrap;font-size:.8125rem}
footer .bottom span{margin-right:auto}

/* ── Reveal-Animation ── */
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
/* Seitliches Einblenden nur, wo zwei Spalten nebeneinander stehen. Einspaltig wuerde
 * die Verschiebung die Seite breiter machen als das Fenster. */
@media(min-width:1001px){
  .js .rv-l{translate:-28px 0}
  .js .rv-r{translate:28px 0}
}
.rv.in{translate:0 0}
.js .rv{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.08s}.rv-d2{transition-delay:.16s}.rv-d3{transition-delay:.24s}
.rv-d4{transition-delay:.32s}.rv-d5{transition-delay:.4s}

/* ── Prose (Recht) ── */
.prose h2{margin-top:1.8em}
.prose h3{margin-top:1.4em;font-size:1.125rem}
.prose p,.prose li{font-size:.9375rem}
.prose li{padding-left:16px;position:relative;margin:.35em 0}
.prose li::before{content:'';position:absolute;left:0;top:.6em;width:8px;height:2px;background:var(--green);transform:skewX(-17deg)}

/* ── Responsive ── */
@media(max-width:1000px){
  .c-5,.c-4{grid-template-columns:repeat(2,1fr)}
  .team{grid-template-columns:repeat(3,1fr)}
  .hero .grid{grid-template-columns:1fr;gap:32px;padding:48px 0 60px}
  footer .cols{grid-template-columns:1fr 1fr}
}
@media(max-width:1000px){
  .hero-inner{padding-top:104px}
  .hero-slides{min-height:200px}
  .svc-cards{grid-template-columns:repeat(2,1fr)}
  .svc-cards .scard:nth-child(-n+3),.svc-cards .scard:nth-child(n+4){grid-column:span 1}
  .team-teaser{grid-template-columns:repeat(3,1fr)}
  .stimmen{grid-template-columns:1fr}
  .stimme{padding:22px 22px;flex-direction:column;gap:16px}
  .stimme-foto{flex:0 0 auto;width:132px}
  .team-teaser .person:nth-child(even){margin-top:0}
  .steps{grid-template-columns:1fr}
  .svc-grid,.anfahrt,.kl{grid-template-columns:1fr;gap:28px}
  .kl-t{min-height:0}
  .svc.flip .svc-text,.svc.flip .svc-media{order:0}
  .paths{grid-template-columns:1fr}
  .hero-top{padding:38px 0 24px}
  .vslot{margin-bottom:-70px}
  .hero-after{padding-top:100px}
}
@media(max-width:768px){
  :root{--hdr-h:72px}
  .pagehead{padding:56px 26px 52px;border-radius:16px}
  .hdr .row{height:72px}
  .drawer{inset:72px 0 0}
  .hero-top .lead{font-size:1.125rem}
  .path{padding:24px 22px}
  .path h2{font-size:1.3125rem}
  .vslot-play{width:58px;height:58px;margin:-29px 0 0 -29px}
  .vslot-play::before{left:23px;top:19px;border-width:10px 0 10px 16px}

  .c-3,.c-2,.steps,.opts{grid-template-columns:1fr}
  .kpis{grid-template-columns:1fr;gap:26px}
  .kpi{border-left:0;border-top:1px solid rgba(255,255,255,.12);padding:20px 0 0}
  .kpi:first-child{border-top:0;padding-top:0}
  .svc-cards{grid-template-columns:1fr}
  /* Fuenf Spalten ergaben auf 390 px Kacheln von 59 px. Die Grundregel ist
     spezifischer als diese hier und hat den alten Zweispalter nie greifen lassen.
     Als Schiebereihe bleibt jede Kachel lesbar. */
  .team.team-teaser{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(58vw,190px);
    overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-left:16px;scrollbar-width:none;
    margin-inline:-16px;padding:0 16px 8px}
  .team.team-teaser::-webkit-scrollbar{display:none}
  .team-teaser .person{scroll-snap-align:start}
  .team-teaser .person:nth-child(even){margin-top:0}
  .paths{grid-template-columns:1fr}
  .hero-inner{padding-top:92px;padding-bottom:64px}
  .team{grid-template-columns:repeat(2,1fr)}
  @media(max-width:430px){.team{grid-template-columns:1fr;gap:16px}}

  /* Kopfkacheln flacher: das Symbol steht neben der Ueberschrift statt darueber.
     Das spart je Kachel eine Zeile, und der Kopfbereich passt wieder in den
     sichtbaren Bereich, statt ihn um 127 px zu ueberschreiten. */
  .path{display:grid;grid-template-columns:auto 1fr;column-gap:14px;
    grid-template-areas:'ikon titel' 'ikon text' 'link link';padding:20px 22px 18px}
  .path-kopf{grid-area:ikon;margin:0;align-self:start}
  .path h2{grid-area:titel;align-self:center;margin:0;font-size:1.25rem}
  .path p{grid-area:text;margin:6px 0 0;font-size:.9375rem}
  .path-go{grid-area:link;margin-top:16px}
  .banner .grid{grid-template-columns:1fr}
  section{padding:56px 0}
  footer .cols{grid-template-columns:1fr}
}
/* Unter 361 px, also iPhone SE und aehnlich schmal. Bei 36 px passt
   "Steuerberatung," nicht in die 272 px Textbreite und wurde mitten im Wort
   umbrochen. Gemessen: 28 px ergeben rund 212 px. */
@media(max-width:360px){
  .hslide h1,.hslide .h1{font-size:1.75rem}
  .hero-inner{padding-top:80px}
  .path{padding:18px 18px 16px}
  .path h2{font-size:1.1875rem}
  .pagehead{padding:44px 20px 40px}
}
/* TIPPZIELE AUF TELEFONEN (Ticket 2507, 18.09.): Apple und Google verlangen
   44 px hohe Ziele. Die Textlinks der Seite waren 22 bis 25 px hoch, ein Daumen
   traf also oft daneben. Die Flaeche waechst ueber Innenabstand, nicht ueber
   Schriftgroesse: bei Fliesstext-Links (inline) legt sich der senkrechte
   Innenabstand ueber die Nachbarzeilen, ohne die Zeile zu bewegen; bei den
   Pfeil-Links (inline-flex) gleicht ein negativer Aussenabstand den Zuwachs
   aus, damit die Karten nicht hoeher werden. Die Fusszeile wird dadurch je
   Link 10 px hoeher, das ist gewollt. */
@media(max-width:768px){
  main p a,main li a,main small a,main address a{padding:12px 0}
  .karte-cc a{padding:14px 0}
  .hdr .logo{padding:10px 0;margin:-10px 0}
  /* bsl-tax.com in einer Ueberschrift bricht sonst am Bindestrich in zwei Zeilen. */
  h2 a{white-space:nowrap}
  .svc-link,.card-link{padding:10px 0;margin-bottom:-10px}
  .card-link{margin-top:4px}
  .scard .card-link,.dl-card .card-link,.zielgruppen .card .card-link{margin-top:auto}
  footer li{margin:0}
  footer li a,footer .bottom a{display:inline-block;padding:12px 0}
  .dl-go{width:44px;height:44px}
  /* Dateityp-Marke: 10 px waren unter 430 px nicht mehr lesbar. */
  .dl-typ{font-size:.75rem}
}
/* Footer auf dem Telefon: die 12 px Tippflaeche je Link machten den Block doppelt so hoch
   wie noetig (Max: "die abstaende im dock sind komisch"). 9 px reichen fuer 40 px Zeilen.
   Die Schlusszeile mit Copyright und Impressum steht zentriert untereinander. */
@media(max-width:600px){
  footer{padding:44px 0 22px}
  footer .cols{gap:26px}
  footer h4{margin:0 0 4px}
  footer li{margin:0}
  footer li a{display:inline-block;padding:9px 0}
  footer .bottom{flex-direction:column;align-items:center;text-align:center;gap:2px;margin-top:28px;padding-top:18px}
  footer .bottom span{margin-right:0}
  footer .bottom a{display:inline-block;padding:8px 10px}
}
@media print{.js .rv{opacity:1!important;transform:none!important}}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;transition-duration:.001s!important}
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none}
  .hero-media img{transform:none}
  /* Kein Autowechsel im Kopf (siehe app.js), der Balken steht voll statt in 1 ms zu laufen */
  .hero-dots button[aria-selected="true"]::after{animation:none;transform:scaleX(1)}
}

/* Zeigezustaende nur dort, wo es einen Zeiger gibt. Auf Beruehrungsgeraeten bleibt
   :hover nach dem Antippen haengen: die angetippte Kachel behielt sichtbar den
   gruenen Rand und das gefuellte Symbol, bis woanders hingetippt wurde. */
@media (hover:hover) and (pointer:fine){
.path-slot:hover .path{transform:translateY(-8px);box-shadow:0 26px 60px rgba(10,12,8,.4);border-top-color:var(--green)}
.path-slot:hover .scard-i{background:var(--green);color:#fff;transform:translateY(-2px) rotate(-4deg)}
.path-slot:hover .path-pfeil{background:var(--green);color:#fff;transform:translateX(5px)}
.scard:hover .scard-i{background:var(--green);color:#fff;transform:translateY(-2px) rotate(-3deg)}
.zielgruppen .card:hover .scard-i,.card:hover > .scard-i{background:var(--green);color:#fff;transform:translateY(-2px) rotate(-3deg)}
.step:hover{transform:translateY(-4px);box-shadow:var(--sh-card)}
.step:hover .step-n{transform:scale(1.12);background:var(--green-h);box-shadow:0 0 0 10px var(--tint-2)}
.step:hover b{color:var(--green-d)}
.stimme:hover{transform:translateY(-4px);box-shadow:0 20px 44px rgba(43,43,40,.11);border-color:var(--tint-2)}
.direkt-z:hover b{color:var(--green-d)}
.team-teaser .person:hover img{transform:scale(1.05)}
.team-teaser .person:hover figcaption{padding-bottom:18px}
}