/* ==========================================================================
   Steuerberatung Thomas Flüch — Design System
   Grundfarben aus dem bestehenden Markenauftritt (Logo, Mandanten-Tools):
   #b22600 (Primär), #993300 (Sekundär), #3f7a52 (Akzent), Grautöne.
   ========================================================================== */

/* Fraunces + Inter — selbst gehostet (kein externer Aufruf an fonts.googleapis.com, DSGVO-konform) */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/fraunces-variable-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/fraunces-variable-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/inter-variable-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/inter-variable-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root{
  /* Markenfarben — unverändert aus dem bestehenden Auftritt */
  --brand:#b22600;
  --brand-mid:#993300;
  --brand-ink:#7a2900;
  --brand-strong:#951f00;
  --brand-soft:rgba(178,38,0,0.08);
  --brand-soft-2:rgba(178,38,0,0.14);
  --teal:#3f7a52;
  --teal-ink:#2e5c3d;
  --teal-soft:rgba(63,122,82,0.12);
  --warn:#c07f00;
  --danger:#b3261e;
  --danger-ink:#8c1d17;
  --danger-soft:rgba(179,38,30,0.09);

  /* Flammen-Gradient, abgeleitet aus dem Logo */
  --flame-1:#f7a83c;
  --flame-2:#e35a1c;
  --flame-3:#b22600;
  --flame-4:#7a1f0a;
  --flame-grad:linear-gradient(135deg,var(--flame-1) 0%,var(--flame-2) 42%,var(--flame-3) 72%,var(--flame-4) 100%);
  /* Horizontlinie ("Weitblick"): neutral links, Morgenglühen rechts */
  --horizon:linear-gradient(90deg, var(--border) 0%, var(--border-strong) 48%, var(--flame-2) 84%, rgba(227,90,28,0.15) 100%);

  /* Neutrale */
  --ink:#2b2a29;
  --ink-2:#5b5957;
  --muted:#73706d;   /* Grauton: auf Papier 4,9:1, auf Sand 4,5:1 (AA für kleine Schrift) */
  --paper:#ffffff;
  --surface:#ffffff;
  --surface-2:#f8f5f2;
  --surface-3:#f1ece7;
  /* Dunkle Flächen (Hero mobil, Titelkacheln, Footer) */
  --espresso:#241c17;
  --kaminschwarz:#211d1a;
  --footer-ink:#cfc9c3;
  --footer-muted:#9b948d;  /* 5,3:1 auf Kaminschwarz */
  /* Schrift und Linien auf dunklen und roten Flächen */
  --on-brand:#fff;                          /* Text, Rahmen, Fokusring auf Markenrot, CTA-Band, Hero-Foto */
  --on-dark:#f6ede4;                        /* Papierton auf Espresso: Lesetext in Titelkacheln und Rechenbeispiel */
  --on-dark-figure:#fff6ee;                 /* Kennzahlen auf Espresso */
  --on-dark-2:rgba(246,237,228,0.84);       /* Zweitrangiger Text auf Espresso, auch über dem Glühen ≥ 4,5:1 */
  --on-dark-3:rgba(246,237,228,0.72);       /* Labels und Notizen auf Espresso */
  --on-dark-line:rgba(246,237,228,0.18);    /* Trennlinien auf Espresso */
  --glow-light:#ffc27a;                     /* Helles Morgenglühen: hervorgehobene Zahl, Beginn des „Weitblick“-Verlaufs */
  --border:rgba(43,42,41,0.11);
  --border-strong:rgba(43,42,41,0.22);

  --shadow-s:0 1px 2px rgba(43,42,41,0.06);
  --shadow-m:0 10px 30px -14px rgba(43,42,41,0.25);
  --shadow-l:0 24px 60px -20px rgba(43,42,41,0.30);

  --radius-s:8px;
  --radius-m:14px;
  --radius-l:22px;
  --radius-pill:999px;

  --font-display:'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:'Inter', Arial, Helvetica, "Segoe UI", sans-serif;

  --maxw:1240px;
  color-scheme: light;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth; scroll-padding-top:96px;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
/* <picture> nur als Format-Hülle: das <img> darin verhält sich wie ohne Hülle (Positionierung, 100%-Höhen) */
picture{display:contents;}
a{color:inherit; text-decoration:none;}
ul{margin:0; padding:0; list-style:none;}
h1,h2,h3,h4{font-family:var(--font-display); margin:0; color:var(--ink); font-weight:600; line-height:1.15; text-wrap:balance; letter-spacing:-0.01em;}
h1{letter-spacing:-0.02em;}
p{margin:0; text-wrap:pretty;}
/* Lange deutsche Komposita („Einnahmenüberschussrechnung“, „Beitragsbemessungsgrenzen“) dürfen die Spalte nie sprengen */
:is(h1,h2,h3,h4,p,li,dt,dd,summary){overflow-wrap:break-word;}
/* Handy: Silbentrennung statt Notumbruch mitten im Wort (lang="de" ist gesetzt) */
@media (max-width:640px){
  :is(main, .site-footer) :is(h1,h2,h3,h4,p,li,dd,summary){hyphens:auto; -webkit-hyphens:auto;}
}
button{font-family:inherit;}
::selection{background:var(--brand-soft-2); color:var(--brand-ink);}
:focus-visible{outline:2px solid var(--brand); outline-offset:3px;}
/* Dunkle und rote Flächen: zweifarbiger Ring (Espresso innen, Weiß außen). Einer der beiden Töne
   hebt sich immer ab, auch über dem Glut-Verlauf des CTA-Bands (WCAG 1.4.11, mind. 3:1). */
:is(.hero, .cta-band, .booking-panel, .site-footer) :focus-visible{
  outline:2px solid var(--on-brand); outline-offset:2px; box-shadow:0 0 0 2px var(--espresso);
}
/* Reduzierte Bewegung: siehe Ende der Datei (gestaltete Alternative statt Komplettabschaltung) */

/* Nur für Screenreader: z. B. Hinweis „öffnet in einem neuen Fenster“ */
.sr-only{position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;}

/* Sprunglink für Tastatur- und Screenreader-Nutzer — erst bei Fokus sichtbar */
.skip-link{
  position:absolute; left:16px; top:12px; z-index:200;
  padding:10px 18px; border-radius:var(--radius-s); background:var(--ink); color:var(--on-brand); font-size:14px; font-weight:600;
  transform:translateY(-160%); transition:transform .2s ease;
}
.skip-link:focus{transform:translateY(0);}

.container{max-width:var(--maxw); margin:0 auto; padding:0 28px;}
@media (max-width:640px){ .container{padding:0 20px;} }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12.5px; font-weight:700; letter-spacing:0.10em; text-transform:uppercase;
  color:var(--brand-mid);
}
.eyebrow::before{content:""; width:22px; height:2px; background:var(--brand); display:inline-block; border-radius:2px;}

.section{padding:96px 0;}
.section-tight{padding:64px 0;}
@media (max-width:780px){ .section{padding:64px 0;} .section-tight{padding:48px 0;} }
.section-alt{background:var(--surface-2);}

.lede{font-size:18px; line-height:1.7; color:var(--ink-2); max-width:62ch;}
.center{text-align:center; margin-left:auto; margin-right:auto;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--font-body); font-weight:700; font-size:14.5px; letter-spacing:0.01em;
  padding:14px 26px; border-radius:var(--radius-pill); border:1.5px solid transparent;
  cursor:pointer; white-space:nowrap; transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}
.btn-primary{background:var(--brand); color:var(--on-brand); box-shadow:var(--shadow-m);}
.btn-primary:hover{background:var(--brand-strong); transform:translateY(-2px); box-shadow:0 18px 34px -14px rgba(178,38,0,0.45);}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--border-strong);}
.btn-ghost:hover{border-color:var(--brand); color:var(--brand-ink); transform:translateY(-2px);}
.btn-light{background:var(--surface); color:var(--brand-ink); box-shadow:var(--shadow-m);}
.btn-light:hover{transform:translateY(-2px);}
.btn:active{transform:translateY(0) scale(0.98); transition-duration:.06s;}
.btn[aria-busy="true"]{opacity:.7; cursor:progress; pointer-events:none;}
.btn-sm{padding:10px 18px; font-size:13px;}
.btn svg{width:16px; height:16px; flex:none;}

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,0.86); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
}
.site-header-inner{
  max-width:var(--maxw); margin:0 auto; padding:10px 28px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.brand-logo{display:flex; align-items:center; gap:10px; flex:none;}
.brand-logo img{height:54px; width:auto;}
@media (max-width:640px){ .brand-logo img{height:44px;} }
.main-nav{display:flex; align-items:center; gap:6px;}
.main-nav a{
  padding:10px 16px; border-radius:var(--radius-pill); font-size:14.5px; font-weight:600; color:var(--ink-2);
  transition:background .15s, color .15s;
}
.main-nav a:hover{background:var(--surface-3); color:var(--ink);}
.main-nav a.active{color:var(--brand-ink); background:var(--surface-3);}
.header-actions{display:flex; align-items:center; gap:10px;}
.nav-toggle{display:none; width:44px; height:44px; border-radius:var(--radius-s); border:1px solid var(--border-strong); background:var(--surface); align-items:center; justify-content:center; cursor:pointer;}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{content:""; display:block; width:20px; height:2px; background:var(--ink); position:relative; transition:transform .2s, opacity .2s;}
.nav-toggle span::before{position:absolute; top:-6px;}
.nav-toggle span::after{position:absolute; top:6px;}
.nav-toggle.open span{background:transparent;}
.nav-toggle.open span::before{transform:translateY(6px) rotate(45deg);}
.nav-toggle.open span::after{transform:translateY(-6px) rotate(-45deg);}

/* Schmaler Desktop: Navigation passt nur ohne Zweitbutton und mit engeren Pillen in eine Zeile */
@media (min-width:961px) and (max-width:1140px){
  .site-header-inner{gap:16px;}
  .main-nav{gap:4px;}
  .main-nav a{padding:10px 10px;}
  .header-actions .btn-ghost{display:none;}
}
/* DATEV-Fernbetreuung als 44px-Symbol, nur wenn der Text-Button keinen Platz hat */
.header-remote{
  display:inline-flex; width:44px; height:44px; flex:none; border-radius:var(--radius-pill);
  border:1.5px solid var(--border-strong); color:var(--ink-2); align-items:center; justify-content:center;
  transition:border-color .15s ease, color .15s ease;
}
.header-remote:hover{border-color:var(--brand); color:var(--brand-ink);}
.header-remote svg{width:19px; height:19px;}
@media (max-width:960px), (min-width:1141px){ .header-remote{display:none;} }

@media (max-width:960px){
  .js .main-nav{
    position:fixed; inset:70px 16px auto 16px; flex-direction:column; align-items:stretch; gap:2px;
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-m); padding:10px; box-shadow:var(--shadow-l);
    transform:translateY(-12px); opacity:0; pointer-events:none;
    /* visibility erst nach dem Ausblenden umschalten: geschlossen ist das Menü weder per Tab erreichbar
       noch für Screenreader vorhanden */
    visibility:hidden; transition:transform .2s ease, opacity .2s ease, visibility 0s linear .2s;
    /* Handy quer: Panel auf die Bildschirmhöhe begrenzen, sonst sind die unteren Einträge unerreichbar */
    max-height:calc(100vh - 86px); max-height:calc(100dvh - 86px); overflow-y:auto; overscroll-behavior:contain;
  }
  .js .main-nav.open{transform:translateY(0); opacity:1; pointer-events:auto; visibility:visible; transition-delay:0s;}
  .js .main-nav a{padding:13px 14px;}
  .js .nav-toggle{display:inline-flex;}
  .header-actions .btn-primary-desktop{display:none;}
  /* Ohne JavaScript (oder wenn main.js nicht lädt): Menü als umbrechende Zeile unter dem Logo, kein Umschalter */
  html:not(.js) .site-header{position:static;}
  html:not(.js) .site-header-inner{flex-wrap:wrap;}
  html:not(.js) .main-nav{order:3; width:100%; flex-wrap:wrap; gap:4px; padding-bottom:6px;}
  html:not(.js) .main-nav a{padding:10px 12px;}
}
/* Anrufen im mobilen Header: bleibt beim Scrollen in Reichweite (Header ist sticky) */
.header-call{
  display:inline-flex; width:44px; height:44px; flex:none; border-radius:var(--radius-s);
  border:1px solid var(--border-strong); background:var(--surface); color:var(--brand-ink);
  align-items:center; justify-content:center; transition:border-color .15s ease, background .15s ease;
}
.header-call:hover{border-color:var(--brand); background:var(--brand-soft);}
.header-call svg{width:20px; height:20px;}
@media (min-width:961px){ .header-call{display:none;} }

/* ---------- Hero: Foto aus der Kanzlei als Einstieg ---------- */
.hero{
  position:relative; overflow:hidden; isolation:isolate;
  min-height:clamp(520px,74vh,700px); min-height:clamp(520px,74svh,700px); display:flex; align-items:center;
  background:var(--espresso); color:var(--on-brand);
}
.hero-bg{position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; object-position:0% 50%;}
/* Abdunklung links (Textseite) und unten (Dächer) — die Sonne rechts bleibt frei */
.hero::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(90deg, rgba(24,17,13,0.82) 0%, rgba(24,17,13,0.62) 34%, rgba(24,17,13,0.10) 62%, rgba(24,17,13,0) 78%),
    linear-gradient(0deg, rgba(24,17,13,0.55) 0%, rgba(24,17,13,0) 38%);
}
.hero-inner{position:relative; width:100%; padding-top:72px; padding-bottom:72px;}
.hero-copy{max-width:760px;}
.hero-copy .lede{max-width:620px;}
/* Ortsname ab Tablet-Breite ungetrennt; auf dem Handy darf er am Bindestrich umbrechen */
@media (min-width:700px){ .hero-place{white-space:nowrap;} }
.hero .eyebrow{color:#ffd8b8;}
.hero .eyebrow::before{background:rgba(255,255,255,0.85);}
.hero h1{color:var(--on-brand); font-size:clamp(38px,5.6vw,68px); line-height:1.04; margin-top:14px;}
.hero h1 em{font-style:normal; background:linear-gradient(135deg,var(--glow-light) 0%, var(--flame-1) 35%, var(--flame-2) 100%); -webkit-background-clip:text; background-clip:text; color:transparent;}
.hero .lede{margin-top:20px; color:rgba(255,255,255,0.86);}
.hero-cta{display:flex; gap:14px; margin-top:32px; flex-wrap:wrap;}
/* Rahmenbedingungen des Kennenlerngesprächs direkt unter den Buchungs-Buttons */
.cta-note{margin-top:16px; font-size:13.5px; line-height:1.5; letter-spacing:.01em; color:rgba(255,255,255,0.78); text-wrap:balance;}
.hero-caption{position:absolute; right:28px; bottom:22px; font-size:12px; letter-spacing:.04em; color:rgba(255,255,255,0.62);}
/* Mobil: Foto als Band oben (Sonne sichtbar), Text darunter auf Espresso */
@media (max-width:780px){
  .hero{display:block; min-height:0;}
  /* Fotoband flacher als zuvor (72vw), damit „Beratungstermin buchen“ auch auf kleinen Handys
     (375×667 mit Browserleisten) ohne Scrollen sichtbar ist */
  .hero-bg{height:clamp(190px,50vw,300px); object-position:40% 50%;}
  .hero::before{background:linear-gradient(180deg, rgba(36,28,23,0) 0px, rgba(36,28,23,0) calc(clamp(190px,50vw,300px) - 130px), var(--espresso) clamp(190px,50vw,300px));}
  .hero-inner{padding-top:calc(clamp(190px,50vw,300px) - 56px); padding-bottom:44px;}
  .hero h1{font-size:clamp(31px,8.6vw,40px); margin-top:10px;}
  .hero .lede{margin-top:14px; font-size:16.5px; line-height:1.6;}
  .hero-cta{margin-top:22px; gap:10px;}
  /* Mobil stünde die Bildunterschrift weit unter dem Fotoband; der Alt-Text trägt die Beschreibung */
  .hero-caption{display:none;}
}

/* Kennzahlen direkt unter dem Hero */
.hero-stats-band{padding:44px 0 8px;}
.hero-stats{position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:24px; padding-top:30px;}
.hero-stats::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px; background:var(--horizon);
  /* Fokusmoment „Weitblick“: Die Linie zieht sich einmal von links ins Morgenglühen, sobald sie ins Bild kommt (main.js setzt .is-drawn) */
  transform-origin:left center; transition:transform 1.6s cubic-bezier(.16,1,.3,1) .15s;
}
.js [data-horizon]:not(.is-drawn)::before{transform:scaleX(0);}
.hero-stats b{display:block; font-family:var(--font-display); font-weight:600; font-size:clamp(34px,4.4vw,52px); line-height:1; color:var(--ink); letter-spacing:-0.02em; font-variant-numeric:lining-nums tabular-nums;}
.hero-stats span{display:block; margin-top:10px; font-size:14.5px; line-height:1.45; color:var(--ink-2); max-width:24ch;}
@media (max-width:640px){ .hero-stats{gap:14px;} .hero-stats b{font-size:30px;} .hero-stats span{font-size:12.5px;} }

/* ---------- Photo banner (real photography) ---------- */
.photo-banner{position:relative; width:100%; height:clamp(240px,34vw,440px); border-radius:28px; overflow:hidden; border:1px solid var(--border); box-shadow:var(--shadow-l);}
.photo-banner img{width:100%; height:100%; object-fit:cover; display:block;}
.photo-banner::after{content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(20,15,10,0.55) 0%, rgba(20,15,10,0.05) 45%, rgba(20,15,10,0) 65%);}
.photo-banner.short{height:clamp(180px,24vw,300px);}
/* Echtes Teamfoto: höher, Ausschnitt auf die Gesichter, ohne Abdunklung (keine Bildunterschrift) */
.photo-banner-team{height:clamp(200px,48vw,500px);}
.photo-banner-team img{object-position:50% 32%;}
.photo-banner-team::after{display:none;}
.photo-banner-teaser{height:clamp(200px,36vw,420px);}
.photo-banner-devices{height:clamp(240px,46vw,540px);}
.photo-banner-devices img{object-position:50% 57%;}
.photo-banner-devices::after{display:none;}

/* ---------- Photo cards (post media / thumbnails) ---------- */
.post-card .post-media{position:relative;}
.post-card .post-media img{width:100%; height:100%; object-fit:cover; display:block;}
.post-card .post-media::after{content:""; position:absolute; inset:0; background:linear-gradient(160deg, rgba(178,38,0,0.28), rgba(122,31,10,0.05) 60%);}


/* ---------- Cards ---------- */
.grid{display:grid; gap:24px;}
/* minmax(0,1fr): lange deutsche Komposita ("Finanzbuchhaltung") dürfen die Spalten nicht aufsprengen */
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr));}
@media (max-width:1100px){ .grid-4{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:960px){ .grid-3{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:640px){ .grid-3, .grid-4, .grid-2{grid-template-columns:1fr;} }
:is(.card, .team-card, .post-card) :is(h3, p){hyphens:auto; -webkit-hyphens:auto; overflow-wrap:break-word;}

.card{
  position:relative;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-l);
  padding:30px; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
/* Nur Karten mit genau einem Ziel (.card-link) sind als Ganzes klickbar und heben sich an */
.card:has(.card-link):hover, .team-card:has(.card-link):hover{transform:translateY(-4px); box-shadow:var(--shadow-m); border-color:transparent;}
.card .card-link::after, .team-card .card-link::after{content:""; position:absolute; inset:0; border-radius:inherit;}
.card .card-link:focus-visible, .team-card .card-link:focus-visible{outline:none;}
.card:has(.card-link:focus-visible), .team-card:has(.card-link:focus-visible){outline:2px solid var(--brand); outline-offset:3px;}
.card-icon{
  width:50px; height:50px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  background:var(--surface-3); color:var(--brand-ink); margin-bottom:18px;
}
.card-icon svg{width:24px; height:24px;}
.card h3{font-size:20px; margin-bottom:10px;}
.card p{color:var(--ink-2); font-size:14.5px; line-height:1.65;}
.card .tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:16px;}
.tag{font-size:11.5px; font-weight:600; color:var(--ink-2); background:var(--surface); border:1px solid var(--border); padding:5px 11px; border-radius:var(--radius-pill); letter-spacing:0.01em;}
.card-link{display:inline-flex; align-items:center; gap:6px; margin-top:18px; font-size:13.5px; font-weight:700; color:var(--brand-ink);}
.card-link svg{width:14px; height:14px; transition:transform .15s;}
:is(.card,.team-card):hover .card-link svg{transform:translateX(3px);}

/* ---------- Leistungen-Teaser (Startseite): nummerierte Liste statt vier gleicher Karten ---------- */
.services-split{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:72px; align-items:start;}
.services-intro{position:sticky; top:120px;}
@media (max-width:900px){ .services-split{grid-template-columns:1fr; gap:36px;} .services-intro{position:static;} }
.service-list{border-top:1px solid var(--border-strong);}
.service-row{
  position:relative; display:grid; grid-template-columns:44px minmax(0,1fr) 44px; gap:8px 24px; align-items:start;
  padding:28px 12px 30px; border-bottom:1px solid var(--border);
  transition:background .25s ease;
}
.service-row::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px; background:var(--horizon);
  transform:scaleX(0); transform-origin:left; transition:transform .45s cubic-bezier(.2,.7,.2,1);
}
.service-row:hover{background:var(--surface-2);}
.service-row:hover::after, .service-row:focus-visible::after{transform:scaleX(1);}
.service-row-num{padding-top:7px; font-family:var(--font-display); font-size:15px; color:var(--muted); font-variant-numeric:lining-nums tabular-nums;}
.service-row h3{font-size:clamp(22px,2.2vw,27px); transition:color .2s ease;}
.service-row p{margin-top:8px; color:var(--ink-2); font-size:15px; line-height:1.65; max-width:54ch; hyphens:auto; -webkit-hyphens:auto; overflow-wrap:break-word;}
.service-row-arrow{
  width:44px; height:44px; border-radius:50%; border:1px solid var(--border-strong); color:var(--ink);
  display:flex; align-items:center; justify-content:center; transition:background .2s ease, border-color .2s ease, color .2s ease, transform .25s ease;
}
.service-row-arrow svg{width:17px; height:17px;}
.service-row:hover h3, .service-row:focus-visible h3{color:var(--brand-ink);}
.service-row:hover .service-row-arrow, .service-row:focus-visible .service-row-arrow{background:var(--brand); border-color:var(--brand); color:var(--on-brand); transform:translateX(3px);}
.service-row:active .service-row-arrow{transform:translateX(3px) scale(.94);}
@media (max-width:560px){
  .service-row{grid-template-columns:minmax(0,1fr) 40px; padding:24px 4px;}
  .service-row-num{grid-column:1 / -1; padding-top:0;}
  .service-row-arrow{width:40px; height:40px; grid-column:2; grid-row:2;}
}

/* Leistungen sections */
.service-block{position:relative; padding:56px 0; scroll-margin-top:110px;}
.service-block + .service-block::before{content:""; position:absolute; top:0; left:0; right:0; height:1px; background:var(--horizon);}
.service-head{display:grid; grid-template-columns:0.85fr 1.15fr; gap:40px; align-items:start;}
@media (max-width:820px){ .service-head{grid-template-columns:minmax(0,1fr);} }
.service-num{font-family:var(--font-display); font-size:15px; color:var(--muted); letter-spacing:0.05em;}
.service-block h2{font-size:clamp(24px,3vw,32px); margin-top:8px;}
.check-list{display:flex; flex-direction:column; gap:12px; margin-top:8px;}
.check-list li{display:flex; align-items:flex-start; gap:12px; font-size:15px; color:var(--ink-2); line-height:1.55;}
.check-list li svg{flex:none; width:20px; height:20px; margin-top:1px; color:var(--teal);}
.check-list li > :not(svg){min-width:0;}
/* align-self:start — sonst streckt das Grid die Leiste auf volle Spaltenhöhe und sticky greift nie */
.side-jump{position:sticky; top:110px; align-self:start; display:flex; flex-direction:column; gap:4px;}
.side-jump a{padding:10px 14px; border-radius:var(--radius-s); font-size:13.5px; font-weight:600; color:var(--ink-2); border-left:2px solid transparent;}
.side-jump a:hover{color:var(--ink); background:var(--surface-2);}
.side-jump a.active{color:var(--brand-ink); border-left-color:var(--brand); background:var(--surface-2);}

.leistungen-layout{display:grid; grid-template-columns:260px 1fr; gap:56px;}
@media (max-width:860px){
  .leistungen-layout{grid-template-columns:minmax(0,1fr); gap:8px;}
  /* Mobil: Pillenleiste klebt direkt unter dem Header, bei Platzmangel seitlich scrollbar */
  .leistungen-layout .side-jump{
    position:sticky; top:75px; z-index:50; flex-direction:row; flex-wrap:nowrap; gap:8px;
    margin:0 -28px; padding:10px 28px; overflow-x:auto; scrollbar-width:none;
    background:rgba(255,255,255,0.92); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid var(--border);
  }
  .leistungen-layout .side-jump::-webkit-scrollbar{display:none;}
  .leistungen-layout .side-jump a{
    flex:none; white-space:nowrap; background:var(--surface);
    border-left:none; border:1px solid var(--border); border-radius:var(--radius-pill);
  }
  .leistungen-layout .side-jump a.active{background:var(--brand); border-color:var(--brand); color:var(--on-brand);}
  .service-block{scroll-margin-top:150px;}
}
@media (max-width:640px){
  .leistungen-layout .side-jump{top:65px; margin:0 -20px; padding:10px 20px;}
  .service-block{scroll-margin-top:135px;}
}

/* ---------- Team ---------- */
.team-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-l); padding:26px;
  position:relative; display:flex; flex-direction:column; gap:14px; transition:transform .2s ease, box-shadow .2s ease;
}
.avatar{
  width:58px; height:58px; border-radius:16px; display:flex; align-items:center; justify-content:center;
  background:var(--surface-3); color:var(--brand-ink); font-family:var(--font-display); font-weight:600; font-size:19px;
}
.team-card h3{font-size:18px;}
.team-card .role{display:block; margin-top:3px; font-size:13.5px; font-weight:600; color:var(--brand-mid);}
.team-card .since{display:block; margin-top:2px; font-size:12.5px; color:var(--muted);}
.team-card p{font-size:14px; color:var(--ink-2);}

/* Profil Thomas Flüch (Team-Seite): Text links, Werdegang rechts; einspaltig unter 960px */
.profile-section{scroll-margin-top:100px;}
.profile-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:56px; align-items:start;}
@media (max-width:960px){ .profile-grid{grid-template-columns:minmax(0,1fr); gap:36px;} }
.profile-text{margin-top:14px; color:var(--ink-2); line-height:1.7;}
.profile-quote{margin:26px 0 0; padding-left:20px; border-left:3px solid var(--brand);}
.profile-quote p{font-family:var(--font-display); font-size:19px; line-height:1.5; color:var(--ink);}
.profile-sub{font-size:20px; margin-bottom:14px;}
.profile-section .cal-table td.month{white-space:nowrap;}
.profile-section .cal-table td{hyphens:auto; -webkit-hyphens:auto; overflow-wrap:break-word;}

/* ---------- Testimonial ---------- */
.testimonial-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px;}
/* Drei Stimmen: unter 960px untereinander statt 2 + 1 */
@media (max-width:960px){ .testimonial-grid{grid-template-columns:1fr;} }
@media (min-width:961px){ .testimonial-grid .testimonial{padding:34px 30px;} .testimonial-grid .testimonial p.quote{font-size:18px;} }
/* Zwei Stimmen: zwei Spalten statt drei */
@media (min-width:961px){ .testimonial-grid.is-two{grid-template-columns:repeat(2,minmax(0,1fr));} }
.testimonial{
  position:relative; background:var(--surface-2); border-radius:var(--radius-l); padding:40px;
  border:1px solid var(--border); display:flex; flex-direction:column;
}
.testimonial .quote-mark{font-family:var(--font-display); font-size:64px; line-height:1; color:var(--brand-mid); opacity:.35;}
.testimonial p.quote{font-family:var(--font-display); font-size:19px; line-height:1.5; color:var(--ink); margin-top:6px;}
.stars{display:inline-flex; gap:2px; vertical-align:-1px; margin-right:4px;}
.stars svg{width:12px; height:12px; color:var(--warn);}
.testimonial .attrib{margin-top:auto; padding-top:22px; display:flex; align-items:center; gap:12px;}
.testimonial .attrib b{display:block; font-size:14.5px;}
.testimonial .attrib .attrib-source{display:block; font-size:12.5px; color:var(--muted);}
.testimonial .attrib .attrib-source a{color:var(--brand-ink); font-weight:700;}
.testimonial .attrib .attrib-source a:hover{text-decoration:underline; text-underline-offset:2px;}
@media (max-width:640px){ .testimonial{padding:32px 24px;} }

/* ---------- Blog ---------- */
.post-card{display:flex; flex-direction:column; border:1px solid var(--border); border-radius:var(--radius-l); overflow:hidden; background:var(--surface); transition:transform .2s ease, box-shadow .2s ease;}
.post-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-m);}
.post-card .post-media{height:150px; background:var(--flame-grad); position:relative; overflow:hidden;}
.post-card .post-media svg{position:absolute; inset:0; width:100%; height:100%; opacity:.55;}
.post-card .post-body{padding:24px; display:flex; flex-direction:column; gap:10px; flex:1;}
.post-meta{display:flex; flex-wrap:wrap; gap:4px 8px; font-size:13px; font-weight:500; color:var(--muted);}
.post-meta span:first-child{color:var(--brand-mid); font-weight:600;}
.post-meta a{color:inherit; text-decoration:underline; text-decoration-color:var(--border); text-underline-offset:3px;}
.post-meta a:hover{color:var(--brand-ink); text-decoration-color:currentColor;}
.post-card h3{font-size:19px; line-height:1.3;}
.post-card p{font-size:14px; color:var(--ink-2); flex:1;}

/* ---------- Typografische Titelkacheln (Blog) ----------
   Ersetzen Stockfotos: Stichwort, Kennzahl, Horizontlinie mit Morgenglühen
   ("Weitblick"-Motiv aus dem Hero-Foto). */
.cover{
  --cover-pad:22px;
  position:relative; overflow:hidden; isolation:isolate;
  display:flex; flex-direction:column; padding:18px var(--cover-pad) 16px;
  background:var(--espresso); color:var(--on-dark);
}
.cover::after, .post-card .post-media.cover::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(55% 60% at 84% 86%, rgba(235,98,30,0.62) 0%, rgba(178,38,0,0.22) 45%, rgba(36,28,23,0) 72%);
  opacity:.85; transition:opacity .3s ease;
}
.post-card:hover .cover::after{opacity:1;}
.cover-kicker{font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#e9a878;}
.cover-figure{
  margin-top:auto; padding-bottom:6px;
  font-family:var(--font-display); font-weight:600; font-size:50px; line-height:1; letter-spacing:-0.02em;
  color:var(--on-dark-figure); white-space:nowrap; font-variant-numeric:lining-nums;
}
.cover-note{position:relative; padding-top:10px; font-size:12.5px; color:var(--on-dark-3);}
.cover-note::before{
  content:""; position:absolute; top:0; height:1px;
  left:calc(var(--cover-pad) * -1); right:calc(var(--cover-pad) * -1);
  background:linear-gradient(90deg, rgba(246,237,228,0.10) 0%, rgba(246,237,228,0.28) 45%, var(--flame-1) 84%, rgba(247,168,60,0.25) 100%);
}
.post-card .post-media.cover{height:170px; background:var(--espresso);}

.cover-lg{--cover-pad:40px; height:clamp(210px,24vw,300px); padding:30px var(--cover-pad) 24px; border-radius:28px; box-shadow:var(--shadow-l);}
.cover-lg .cover-kicker{font-size:12.5px;}
.cover-lg .cover-figure{font-size:clamp(60px,9vw,118px); padding-bottom:10px;}
.cover-lg .cover-note{font-size:14.5px; padding-top:14px;}
@media (max-width:640px){ .cover-lg{--cover-pad:24px; border-radius:22px;} }

.article-hero{padding:52px 0 20px;}
.article-body{max-width:74ch; margin:0 auto; padding:0 28px;}
.article-body h2{font-size:24px; margin-top:40px; margin-bottom:14px;}
.article-body h3{font-size:19px; margin-top:28px; margin-bottom:10px;}
.article-body p{color:var(--ink-2); font-size:16.5px; line-height:1.8; margin-bottom:18px;}
.article-body ul{margin:0 0 18px; display:flex; flex-direction:column; gap:10px;}
/* Block statt Flex: Fett gesetzte Begriffe (<b>…</b>) laufen im Satz mit, statt eine eigene Spalte zu bilden */
.article-body ul li{position:relative; padding-left:28px; color:var(--ink-2); font-size:16px; line-height:1.6;}
.article-body ul li svg{position:absolute; left:0; top:4px; width:18px; height:18px; color:var(--teal);}
.article-body a.inline-link{color:var(--brand-ink); font-weight:700; border-bottom:1.5px solid var(--brand-soft-2);}
/* Hinweisbox: Akzent trägt die rote Einleitung („Gut zu wissen:“), kein farbiger Seitenstreifen */
.callout{background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-m); padding:22px 24px; margin:28px 0;}
.callout b{color:var(--brand-ink);}

/* ---------- Resource / tool list ---------- */
.resource-row{display:flex; align-items:center; gap:16px; padding:18px 22px; border:1px solid var(--border); border-radius:var(--radius-m); background:var(--surface); transition:border-color .15s, transform .15s;}
/* Nur echte Links reagieren auf Hover — reine Info-Zeilen sollen nicht klickbar wirken */
a.resource-row:hover{border-color:var(--brand); transform:translateX(3px);}
a.resource-row:active{transform:translateX(3px) scale(0.99);}
.resource-row .r-icon{width:42px; height:42px; border-radius:11px; background:var(--surface-3); display:flex; align-items:center; justify-content:center; flex:none; color:var(--brand-ink);}
.resource-row .r-icon svg{width:20px; height:20px;}
.resource-row .r-body{flex:1;}
.resource-row .r-body b{display:block; font-size:14.5px;}
.resource-row .r-body span{font-size:13px; color:var(--muted);}
.resource-row .r-arrow{width:16px; height:16px; color:var(--muted); flex:none;}

/* ---------- Steuerkalender table ---------- */
.cal-table{width:100%; border-collapse:collapse; font-size:14px; font-variant-numeric:tabular-nums;}
.cal-table th{text-align:left; font-size:11.5px; letter-spacing:0.05em; text-transform:uppercase; color:var(--muted); padding:12px 14px; border-bottom:1px solid var(--border-strong);}
.cal-table td{padding:14px; border-bottom:1px solid var(--border); vertical-align:top; color:var(--ink-2);}
.cal-table tr:hover td{background:var(--surface-2);}
.cal-table td.month{font-weight:700; color:var(--ink); font-family:var(--font-display);}
.cal-table .dates{color:var(--brand-ink); font-weight:600; white-space:nowrap;}
.table-wrap{overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius-m);}
.table-wrap .cal-table th:first-child, .table-wrap .cal-table td:first-child{padding-left:20px;}

/* ---------- Steuerkalender: interaktive Steuerung ---------- */
.cal-controls{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; margin-bottom:20px;}
.cal-filter{display:flex; flex-wrap:wrap; gap:8px;}
.cal-filter-btn{padding:8px 16px; border-radius:var(--radius-pill); border:1px solid var(--border); background:var(--surface); color:var(--ink-2); font-size:13px; font-weight:600; font-family:inherit; cursor:pointer; transition:border-color .15s ease, color .15s ease, background .15s ease;}
.cal-filter-btn:hover{border-color:var(--brand); color:var(--brand-ink);}
.cal-filter-btn.active{background:var(--brand); border-color:var(--brand); color:var(--on-brand);}

.cal-toggle{display:inline-flex; align-items:center; gap:10px; cursor:pointer; font-size:13.5px; font-weight:600; color:var(--ink-2); user-select:none;}
.cal-toggle input{position:absolute; opacity:0; width:1px; height:1px;}
.cal-toggle-track{position:relative; width:38px; height:22px; border-radius:var(--radius-pill); background:var(--surface-3); border:1px solid var(--border); transition:background .15s ease; flex:none;}
.cal-toggle-track::before{content:""; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:var(--surface); box-shadow:var(--shadow-s); transition:transform .15s ease;}
.cal-toggle input:checked + .cal-toggle-track{background:var(--brand);}
.cal-toggle input:checked + .cal-toggle-track::before{transform:translateX(16px);}
.cal-toggle input:focus-visible + .cal-toggle-track{outline:2px solid var(--brand); outline-offset:2px;}

.cal-next{display:flex; align-items:center; gap:16px; width:100%; font:inherit; color:inherit; background:var(--brand-soft); border:1px solid var(--brand-soft-2); border-radius:var(--radius-m); padding:16px 20px; margin-bottom:20px; cursor:pointer; transition:transform .15s ease, border-color .15s ease; text-align:left;}
.cal-next[hidden]{display:none;}
.cal-next:hover{transform:translateY(-2px); border-color:var(--brand);}
.cal-next-eyebrow, .cal-next-text{display:block;}
/* Ziel des Sprungs „Nächster Termin“: sichtbarer Fokus innerhalb der Tabelle */
.cal-table tr:focus{outline:2px solid var(--brand); outline-offset:-2px;}
.cal-next-icon{width:40px; height:40px; border-radius:50%; background:var(--brand); color:var(--on-brand); display:flex; align-items:center; justify-content:center; flex:none;}
.cal-next-icon svg{width:20px; height:20px;}
.cal-next-eyebrow{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--brand-mid);}
.cal-next-text{margin-top:2px; color:var(--ink); font-size:14.5px;}

.cal-table tr.is-past td{color:var(--muted); opacity:.6;}
.cal-table tr.is-next{background:var(--brand-soft);}
.cal-table tr.is-next td.month{color:var(--brand-ink);}
.cal-table tr.is-next td.month::after{content:"nächster Termin"; display:block; font-size:10.5px; font-weight:700; color:var(--brand); text-transform:uppercase; letter-spacing:.04em; margin-top:3px;}
.cal-table tr.flash{animation:calFlash 1.6s ease;}
@keyframes calFlash{0%,100%{background:var(--brand-soft);} 30%{background:var(--brand-soft-2);}}
.cal-empty-row td{text-align:center; color:var(--muted); padding:24px;}

@media (max-width:640px){
  .cal-controls{flex-direction:column; align-items:flex-start;}
}

/* ---------- CTA banner ---------- */
.cta-band{
  border-radius:32px; padding:64px 56px 72px; color:var(--on-brand); position:relative; overflow:hidden; isolation:isolate;
  /* Glut rechts unten statt gleichmäßigem 135°-Verlauf — dasselbe Morgenglühen wie im Hero-Foto.
     Glühen in die Ecke gerückt und Verlaufsende abgedunkelt (#cf4812 statt Glut-Orange),
     damit weißer Text und Buttons überall mindestens 4,5:1 erreichen. */
  background:
    radial-gradient(40% 50% at 100% 120%, rgba(247,168,60,0.45) 0%, rgba(227,90,28,0) 55%),
    radial-gradient(60% 80% at 0% 0%, rgba(122,31,10,0.55) 0%, rgba(122,31,10,0) 70%),
    linear-gradient(160deg, var(--flame-3) 0%, #cf4812 100%);
  box-shadow:0 30px 60px -30px rgba(122,31,10,0.55);
}
/* Feines Korn gegen die digitale Glätte des Verlaufs */
.cta-band::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.22; mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.cta-band h2{color:var(--on-brand); font-size:clamp(26px,3.4vw,38px);}
.cta-band .eyebrow::before{background:rgba(255,255,255,0.85);}
.cta-band p{color:var(--on-brand); max-width:56ch; margin-top:12px; font-size:16px;}
.cta-band .cta-actions{margin-top:28px; display:flex; gap:14px; flex-wrap:wrap;}
@media (max-width:640px){ .cta-band{padding:40px 26px;} }

/* ---------- Footer ---------- */
.site-footer{position:relative; background:var(--kaminschwarz); color:var(--footer-ink); padding:72px 0 28px;}
.site-footer::before{content:""; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.10) 45%, var(--flame-1) 82%, rgba(247,168,60,0) 100%);}
.footer-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr 1.1fr; gap:40px;}
@media (max-width:860px){ .footer-grid{grid-template-columns:1fr 1fr;} }
/* Handy: Navigation und Leistungen nebeneinander, Marke und Kontakt über die volle Breite – hält den Footer kurz,
   obwohl die Links auf Touch-Geräten 44px hohe Tap-Flächen bekommen */
@media (max-width:560px){
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px 20px;}
  .footer-grid > :first-child, .footer-grid > :last-child{grid-column:1 / -1;}
}
/* Sehr schmale Handys (320px): „Unternehmensnachfolge“ passt nicht in eine halbe Spalte */
@media (max-width:360px){ .footer-grid{grid-template-columns:minmax(0,1fr);} }
.footer-logo-chip{background:var(--surface); display:inline-flex; padding:12px 16px; border-radius:var(--radius-m); margin-bottom:16px;}
.footer-logo-chip img{height:40px; width:auto;}
.site-footer p.blurb{font-size:14px; line-height:1.7; color:var(--footer-muted); max-width:34ch;}
.site-footer .footer-heading{color:var(--on-brand); font-family:var(--font-body); font-size:12.5px; text-transform:uppercase; letter-spacing:0.08em; margin-bottom:16px;}
.site-footer ul{display:flex; flex-direction:column; gap:11px; font-size:14px; line-height:1.55;}
.site-footer a{font-size:14px; color:var(--footer-ink); transition:color .15s;}
.site-footer a:hover{color:var(--on-brand);}
.footer-bottom{margin-top:56px; padding-top:24px; border-top:1px solid rgba(255,255,255,0.10); display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; font-size:13px; color:var(--footer-muted);}
.footer-social{display:flex; gap:10px;}
.footer-social a{width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,0.16); display:flex; align-items:center; justify-content:center;}
.footer-social a:hover{border-color:var(--on-brand);}
.footer-social svg{width:16px; height:16px;}
.footer-badge-chip{background:var(--surface); display:inline-flex; padding:10px 14px; border-radius:var(--radius-m); margin-top:18px; transition:transform .15s ease;}
.footer-badge-chip:hover{transform:translateY(-2px);}
.footer-badge-chip img{height:54px; width:auto; display:block;}
.footer-badges{display:flex; flex-wrap:wrap; gap:10px;}
.footer-badges .footer-badge-chip{margin-top:0; height:72px; min-width:92px; padding:0 14px; align-items:center; justify-content:center;}
.footer-badges .footer-badge-chip img{height:auto; max-height:54px; max-width:230px;}
.footer-badges .footer-badge-chip img[src$=".svg"]{height:44px;}
.footer-memberships{margin-top:48px; padding-top:28px; border-top:1px solid rgba(255,255,255,0.10); display:flex; align-items:center; gap:14px 28px; flex-wrap:wrap;}
.footer-memberships .footer-kicker{margin:0;}
.footer-memberships + .footer-bottom{margin-top:28px;}

/* ---------- Reveal animation ----------
   Versteckt wird nur, wenn JavaScript läuft (html.js, gesetzt im <head>). Ohne Skript bleibt alles sichtbar. */
/* Ruhiges Ankommen mit natürlichem Auslaufen statt linearem ease; kürzerer Weg */
.reveal{transition:opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1);}
.js .reveal:not(.in){opacity:0; transform:translateY(14px);}

/* ---------- Misc pages (Impressum/Datenschutz) ---------- */
.legal-body{max-width:76ch; margin:0 auto; padding:0 28px;}
.legal-body h2{font-size:20px; margin-top:34px; margin-bottom:10px;}
.legal-body p, .legal-body li{color:var(--ink-2); font-size:15px; line-height:1.75;}
.legal-body ul{margin:10px 0 10px 20px; list-style:disc;}
.legal-body a{color:var(--brand-ink); font-weight:600;}

/* ---------- Page hero (subpages) ---------- */
.page-hero{padding:64px 0 40px; position:relative;}
.page-hero .eyebrow{margin-bottom:14px;}
.page-hero h1{font-size:clamp(30px,4.6vw,46px);}
.page-hero .lede{margin-top:16px;}

/* ---------- Kontaktformular ---------- */
.contact-form{display:grid; gap:18px;}
.contact-form .form-row{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
@media (max-width:640px){ .contact-form .form-row{grid-template-columns:1fr;} }
.contact-form label{display:block; font-size:13.5px; font-weight:700; color:var(--ink-2); margin-bottom:7px;}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea{
  /* 16px: darunter zoomt iOS Safari beim Antippen eines Feldes in die Seite */
  width:100%; font:inherit; font-size:16px; color:var(--ink);
  background:var(--surface); border:1.5px solid var(--border-strong); border-radius:var(--radius-s);
  padding:12px 14px; transition:border-color .15s ease, box-shadow .15s ease;
}
.contact-form input:focus,
.contact-form textarea:focus{border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft); outline:none;}
.contact-form textarea{resize:vertical; min-height:130px;}
.contact-form :is(input,textarea)[aria-invalid="true"]{border-color:var(--danger); background:#fffafa;}
.contact-form :is(input,textarea)[aria-invalid="true"]:focus{box-shadow:0 0 0 3px var(--danger-soft); border-color:var(--danger);}
.field-error{display:flex; align-items:flex-start; gap:7px; margin-top:6px; font-size:13px; line-height:1.45; font-weight:500; color:var(--danger-ink);}
.field-error::before{content:""; width:5px; height:5px; margin-top:.5em; border-radius:50%; background:currentColor; flex:none;}
.form-consent + .field-error{margin-top:-8px; margin-left:24px;}
.contact-form .form-consent{display:flex; align-items:flex-start; gap:10px; font-size:13.5px; color:var(--ink-2); line-height:1.5;}
/* 22px statt Browser-Standard 13px: besser zu treffen (WCAG 2.5.8), in Markenfarbe */
.contact-form .form-consent input{width:22px; height:22px; margin:0; flex:none; accent-color:var(--brand); cursor:pointer;}
.contact-form .form-consent a{color:var(--brand-ink); font-weight:600;}
.hp-field{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}
.form-alert{border-radius:var(--radius-m); padding:16px 20px; font-size:14.5px; line-height:1.6; margin-bottom:20px;}
.form-alert-success{background:var(--teal-soft); border:1px solid rgba(63,122,82,0.3); color:var(--teal-ink);}
.form-alert-error{background:var(--danger-soft); border:1px solid rgba(179,38,30,0.28); color:var(--danger-ink);}
.form-alert-error ul{margin:6px 0 0 18px; list-style:disc;}


/* ==========================================================================
   Utility-Klassen
   Ersetzen wiederkehrende inline style="..."-Attribute aus den Templates,
   damit Abstände/Größen zentral im Stylesheet gepflegt werden.
   ========================================================================== */
.flex{display:flex;}
/* Kurzfassungen für sehr schmale Bildschirme */
.show-xs{display:none !important;}
@media (max-width:480px){ .hide-xs{display:none !important;} .show-xs{display:inline !important;} .hero-stats .show-xs{display:block !important;} }
.text-brand{color:var(--brand-ink); font-weight:600;}
.text-16{font-size:16px;}
.text-note{font-size:13px; color:var(--muted);}
.text-white-85{color:rgba(255,255,255,0.85);}

.mt-0{margin-top:0;}
.mt-8{margin-top:8px;}
.mt-12{margin-top:12px;}
.mt-14{margin-top:14px;}
.mt-16{margin-top:16px;}
.mt-18{margin-top:18px;}
.mt-20{margin-top:20px;}
.mt-22{margin-top:22px;}
.mt-28{margin-top:28px;}
.mt-36{margin-top:36px;}
.mt-48{margin-top:48px;}
.mb-8{margin-bottom:8px;}
.mb-10{margin-bottom:10px;}
.mb-28{margin-bottom:28px;}
.mb-48{margin-bottom:48px;}
.my-28{margin:28px 0;}

.gap-8{gap:8px;}
.gap-10{gap:10px;}
.gap-16{gap:16px;}
.gap-20{gap:20px;}

.mw-120{max-width:120px;}
.mw-360{max-width:360px;}
.mw-560{max-width:560px;}
.mw-640{max-width:640px;}
.mw-680{max-width:680px;}
.mw-720{max-width:720px;}
.mw-760{max-width:760px;}

.smt-100{scroll-margin-top:100px;}

.h2-32{font-size:clamp(24px,3vw,32px);}
.h2-36{font-size:clamp(26px,3.4vw,36px);}
.h2-38{font-size:clamp(26px,3.4vw,38px);}
.h2-42{font-size:clamp(28px,4.4vw,42px);}

/* ---------- Kleinere Bauteile, vorher als inline style dupliziert ---------- */
.btn-ghost-dark{background:rgba(255,255,255,0.14); color:var(--on-brand); border-color:rgba(255,255,255,0.4);}
.btn-ghost-dark:hover{background:rgba(255,255,255,0.22); border-color:var(--on-brand); transform:translateY(-2px);}
/* Im CTA-Band dunkle statt helle Füllung: sonst sinkt Weiß über dem Glühen unter 4,5:1 */
.cta-band .btn-ghost-dark{background:rgba(60,12,2,0.34); border-color:rgba(255,255,255,0.5);}
.cta-band .btn-ghost-dark:hover{background:rgba(60,12,2,0.5); border-color:var(--on-brand);}
.actions-row{display:flex; gap:10px; margin-top:16px; flex-wrap:wrap;}
.pill-outline{border:1px solid var(--border); border-radius:var(--radius-pill);}
.section-header-row{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:40px;}
.footer-kicker{font-size:12px; color:var(--footer-muted); text-transform:uppercase; letter-spacing:.06em; margin-top:20px; margin-bottom:10px;}
.card-dashed{background:var(--surface-2); border-style:dashed; justify-content:center; align-items:flex-start;}
.btn-dashed{background:none; border:1.5px dashed var(--border-strong); color:var(--muted);}
.grid-center-56{align-items:center; gap:56px;}
.side-jump-row{position:static; flex-direction:row; flex-wrap:wrap; gap:8px; margin-top:28px;}

/* ---------- Online-Terminbuchung im Header ---------- */
.main-nav .nav-booking, .main-nav .nav-extra{display:none;}
.main-nav .nav-extra svg{display:inline; width:13px; height:13px; margin-left:6px; vertical-align:-1px;}
.main-nav .nav-booking svg{display:inline; width:14px; height:14px; margin-left:6px; vertical-align:-2px;}
@media (max-width:960px){
  .main-nav .nav-extra{display:block;}
  .main-nav .nav-booking{display:block; margin-top:6px; text-align:center; background:var(--brand); color:var(--on-brand);}
  .main-nav .nav-booking:hover{background:var(--brand-strong); color:var(--on-brand);}
}

/* ---------- Kontaktseite ---------- */
.contact-section{padding:8px 0 96px;}
@media (max-width:780px){ .contact-section{padding-bottom:64px;} }
.contact-layout{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:32px; align-items:start;}
@media (max-width:900px){ .contact-layout{grid-template-columns:minmax(0,1fr);} }
/* Sehr schmale Handys: Buchungsbutton darf umbrechen statt aus dem Panel zu ragen */
@media (max-width:360px){ .booking-panel .btn{white-space:normal; text-align:center;} }
.contact-aside{display:grid; gap:20px;}

.booking-panel{background:var(--brand); color:var(--on-brand); border-radius:var(--radius-l); padding:32px; box-shadow:var(--shadow-m);}
.booking-panel-icon{
  width:48px; height:48px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,0.18); margin-bottom:18px;
}
.booking-panel-icon svg{width:24px; height:24px;}
.booking-panel h2{color:var(--on-brand); font-size:clamp(22px,2.4vw,26px);}
.booking-panel p{color:rgba(255,255,255,0.88); font-size:15px; line-height:1.6; margin-top:8px;}
.booking-panel .btn{margin-top:22px;}
/* 0,9 statt 0,75: kleine Schrift auf Markenrot braucht mind. 4,5:1 */
.booking-panel .booking-panel-note{font-size:12.5px; color:rgba(255,255,255,0.9); margin-top:14px;}
.booking-panel-note a{color:var(--on-brand); text-decoration:underline; text-underline-offset:2px;}

.contact-details{background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-l); padding:8px 24px;}
.contact-details li{display:flex; gap:14px; align-items:center; padding:16px 0;}
.contact-details li + li{border-top:1px solid var(--border);}
.contact-details-icon{
  width:40px; height:40px; flex:none; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background:var(--surface-3); color:var(--brand-ink);
}
.contact-details-icon svg{width:19px; height:19px;}
.contact-details-label{display:block; font-size:13px; font-weight:500; color:var(--muted); margin-bottom:1px;}
.contact-details a, .contact-details address, .contact-details-text{font-style:normal; font-size:15px; font-weight:600; color:var(--ink); line-height:1.5; overflow-wrap:anywhere;}
.contact-details a:hover{color:var(--brand-ink);}
.contact-details-hint{display:block; font-size:13px; color:var(--muted); line-height:1.4;}

.contact-form-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-l); padding:36px; box-shadow:var(--shadow-s); scroll-margin-top:100px;}
@media (max-width:640px){ .contact-form-card, .booking-panel{padding:24px;} }
.contact-form-card h2{font-size:clamp(22px,2.4vw,26px);}
.contact-form-intro{color:var(--ink-2); font-size:14.5px; margin:6px 0 24px;}

/* ---------- Touch-Geräte: Tap-Flächen mind. 44px (WCAG 2.5.5) ----------
   Nur bei grobem Zeiger; mit Maus bleibt der dichtere Rhythmus erhalten. */
@media (pointer:coarse){
  .site-footer ul{gap:0;}
  .site-footer ul a, .footer-bottom a{display:inline-flex; align-items:center; min-height:44px; min-width:44px;}
  .site-footer ul li:not(:has(a)){padding-block:10px;}
  .card-link{min-height:44px;}
  .testimonial .attrib .attrib-source a{display:inline-flex; align-items:center; min-height:44px;}
  /* Kontaktdaten: Telefon und E-Mail als 44px-Tap-Fläche, Zeilenhöhe bleibt durch weniger Innenabstand gleich */
  .contact-details li:has(a){padding-block:6px;}
  .contact-details a{display:inline-flex; align-items:center; min-height:44px;}
  .cal-filter-btn{min-height:44px;}
}

/* ---------- Rechenbeispiel „Firmenwagen oder Gehalt“ (Startseite) ----------
   Dieselbe Sprache wie die Titelkacheln: Espresso-Grund, Fraunces-Zahlen, Horizontlinie mit Morgenglühen. */
.calc-example{
  --cover-pad:32px; margin:0; border-radius:28px; padding:28px var(--cover-pad) 26px; box-shadow:var(--shadow-l);
}
.calc-example .cover-kicker{font-size:12px;}
.calc-lead{margin-top:12px; font-size:15px; line-height:1.6; color:var(--on-dark-2); max-width:46ch;}
.calc-compare{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin:24px 0 0;}
.calc-compare > div{display:flex; flex-direction:column; gap:2px; padding-top:14px; border-top:1px solid var(--on-dark-line);}
@supports (grid-template-rows:subgrid){
  .calc-compare{grid-template-rows:repeat(4,auto); row-gap:0;}
  .calc-compare > div{display:grid; grid-row:span 4; grid-template-rows:subgrid; row-gap:2px; align-content:start;}
}
.calc-compare > div.is-lead{border-top-color:var(--flame-1);}
.calc-compare dt{font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--on-dark-3);}
.calc-compare .calc-figure{
  font-family:var(--font-display); font-weight:600; font-size:clamp(34px,4vw,46px); line-height:1.05; letter-spacing:-0.02em;
  color:var(--on-dark-figure); font-variant-numeric:lining-nums tabular-nums; margin-top:6px;
}
.calc-compare .is-lead .calc-figure{color:var(--glow-light);}
.calc-compare dd{margin:0; font-size:13.5px; line-height:1.5; color:var(--on-dark-2);}
.calc-compare dd.calc-unit{margin-top:2px; color:var(--on-dark); font-weight:600;}
.calc-compare dd.calc-detail{margin-top:10px;}
.calc-example .cover-note{margin-top:22px; font-size:14.5px; color:var(--on-dark);}
.calc-assumptions{margin-top:12px; font-size:12.5px; line-height:1.6; color:var(--on-dark-2);}
/* Glühen im Rechenbeispiel schwächer als bei den Blogkacheln: Die Annahmen stehen rechts unten und bleiben so ≥ 4,5:1 */
.calc-example.cover::after{background:radial-gradient(55% 60% at 84% 86%, rgba(235,98,30,0.45) 0%, rgba(178,38,0,0.16) 45%, rgba(36,28,23,0) 72%);}
/* Handy: der Vergleich bleibt nebeneinander, die Zahlen werden kleiner */
@media (max-width:640px){
  .calc-example{--cover-pad:22px; padding:24px var(--cover-pad) 22px;}
  .calc-compare{gap:14px;}
  .calc-compare .calc-figure{font-size:clamp(26px,8.4vw,34px);}
  .calc-compare dt{font-size:12px; letter-spacing:.05em;}
  .calc-compare dd{font-size:13px;}
}

/* Handy: gestapelte Buttons in Hero und CTA-Band einheitlich über die volle Breite statt Pillen unterschiedlicher Länge */
@media (max-width:560px){
  .hero-cta .btn, .cta-band .cta-actions .btn{flex:1 1 100%;}
}

/* Zwei ruhige Links unter der Einleitung des Rechenbeispiels (kein zweiter roter Button) */
.section-links{display:flex; flex-wrap:wrap; gap:0 24px; margin-top:16px;}
.section-links .card-link{margin-top:0; display:inline-block;}
.section-links .card-link svg{display:inline; vertical-align:-2px; margin-left:4px;}
.nowrap{white-space:nowrap;}
/* Branchen als ruhige Zeile unter den Kennzahlen */
.stats-note{margin-top:22px; font-size:14.5px; line-height:1.6; color:var(--ink-2); max-width:58ch;}
/* Faktenzeile im CTA-Band: reines Weiß, da über dem Verlauf */
.cta-band .cta-note{color:var(--on-brand); margin-top:18px; max-width:56ch; font-size:13.5px; line-height:1.55;}

/* Gesamtwert des Google-Profils unter den Stimmen */
.rating-note{margin-top:20px; font-size:14px; color:var(--ink-2);}
.rating-note .stars svg{width:14px; height:14px;}
.rating-note a{color:var(--brand-ink); font-weight:700;}
.rating-note a:hover{text-decoration:underline; text-underline-offset:2px;}
@media (pointer:coarse){ .rating-note a{display:inline-flex; align-items:center; min-height:44px;} }

/* Häufige Fragen (includes/faq.php): natives <details>, ohne JavaScript */
.faq-layout{display:grid; grid-template-columns:0.8fr 1.2fr; gap:48px; align-items:start;}
@media (max-width:860px){ .faq-layout{grid-template-columns:minmax(0,1fr); gap:24px;} }
.faq-list{border-top:1px solid var(--border);}
.faq-item{border-bottom:1px solid var(--border);}
/* Block statt Flex: Lange Komposita in der Frage umbrechen innerhalb der Zeile, das Plus sitzt absolut rechts */
.faq-item summary{display:block; position:relative; padding:20px 48px 20px 0; cursor:pointer; list-style:none; font-family:var(--font-display); font-size:18px; font-weight:600; line-height:1.35; color:var(--ink);}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"+"; position:absolute; right:0; top:20px; width:28px; height:28px; border-radius:50%; display:grid; place-items:center; font-family:var(--font-body); font-size:20px; font-weight:400; line-height:1; color:var(--brand-ink); background:var(--brand-soft); transition:transform .2s;}
.faq-item[open] summary::after{transform:rotate(45deg);}
.faq-item summary:hover{color:var(--brand-ink);}
.faq-item summary:focus-visible{outline:2px solid var(--brand); outline-offset:4px; border-radius:4px;}
.faq-answer{padding:0 48px 22px 0;}
.faq-answer p{color:var(--ink-2); font-size:15.5px; line-height:1.75;}
.faq-answer a.inline-link, .audience-card a.inline-link, .team-card a.inline-link{color:var(--brand-ink); font-weight:700; border-bottom:1.5px solid var(--brand-soft-2);}
@media (max-width:640px){ .faq-answer{padding-right:0;} .faq-item summary{font-size:17px;} }

/* Zielgruppen auf der Leistungsseite */
.audience-card h3{font-size:19px;}
.audience-card p + p{margin-top:10px;}

/* ---------- Reduzierte Bewegung (prefers-reduced-motion) ----------
   Gestaltete Alternative statt Komplettabschaltung: Wege und Verschiebungen entfallen,
   Zustandswechsel (Farbe, Deckkraft, Rahmen, Schatten) bleiben kurz sichtbar, damit Rückmeldungen lesbar bleiben. */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *, *::before, *::after{transition-duration:.15s !important; transition-delay:0s !important; animation-duration:.01ms !important; animation-iteration-count:1 !important;}
  /* Einblenden ja, Aufsteigen nein; die Horizontlinie steht sofort */
  .js .reveal:not(.in){transform:none;}
  .js [data-horizon]:not(.is-drawn)::before{transform:none;}
  /* Kein Anheben, Schieben oder Schrumpfen bei Hover und Klick */
  .btn:hover, .btn:active, .card:has(.card-link):hover, .team-card:has(.card-link):hover, .post-card:hover,
  a.resource-row:hover, a.resource-row:active, .cal-next:hover, .footer-badge-chip:hover,
  .service-row:is(:hover, :focus-visible, :active) .service-row-arrow, :is(.card, .team-card):hover .card-link svg{transform:none;}
  .js .main-nav{transform:none;}
  /* Das Aufleuchten der Zielzeile im Steuerkalender ist Rückmeldung, keine Bewegung: bleibt */
  .cal-table tr.flash{animation-duration:1.6s !important;}
}