/* ==========================================================================
   process & people – gemeinsames Stylesheet
   Breakpoints: 600px (Mobil), 900px (Tablet), 1200px (Desktop groß)
   ========================================================================== */

/* Schrift lokal gehostet (keine Verbindung zu Google): Plus Jakarta Sans, variable Schrift 400–800 */
@font-face{
  font-family:'Plus Jakarta Sans'; font-style:normal; font-weight:400 800; font-display:swap;
  src:url('fonts/plus-jakarta-sans-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:'Plus Jakarta Sans'; font-style:normal; font-weight:400 800; font-display:swap;
  src:url('fonts/plus-jakarta-sans-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;
}

:root{
  --navy:#1c2e5d;
  --steel:#517ca0;
  --steel-dark:#3f6a8f;
  --green:#4ea38c;
  --green-dark:#3d8873;
  --green-deeper:#326f5e;
  --mint-tint:#dff1e8;
  --mint-deep:#cfeadd;
  --steel-tint:#e2ebf3;

  --bg:#f6f6f6;         /* Hintergrund 1 */
  --white:#ffffff;      /* Hintergrund 2 */
  --ink:#1c2e5d;
  --body:#4a5c50;
  --line:#c9e3d5;
  --border:rgba(28,46,93,.12);

  --radius:18px;
  --shadow-sm:0 8px 20px -14px rgba(28,46,93,.22);
  --shadow-md:0 20px 40px -20px rgba(28,46,93,.30), 0 4px 12px -6px rgba(28,46,93,.10);

  --container:1200px;
  --gutter:28px;
  --header-h:72px;

  color-scheme:light;
}

/* ---------- Basis ---------- */
*,*::before,*::after{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 16px); -webkit-text-size-adjust:100%;}
body{
  font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--bg); color:var(--body);
  line-height:1.6; -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%; display:block;}
a{color:inherit;}
:focus-visible{outline:3px solid var(--green); outline-offset:3px; border-radius:6px;}
.visually-hidden{position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}

.wrap{width:100%; max-width:var(--container); margin:0 auto; padding:0 var(--gutter);}

/* 12-Spalten-Raster */
.grid-12{display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:32px; row-gap:40px;}
.span-7{grid-column:span 7;}
.span-5{grid-column:span 5;}
.span-6{grid-column:span 6;}
.span-8{grid-column:span 8;}
.span-4{grid-column:span 4;}

/* Flexibles Kartenraster (kein Überlauf möglich) */
.card-grid{display:grid; gap:20px; grid-template-columns:repeat(auto-fit, minmax(min(240px,100%), 1fr));}
.card-grid.wide{grid-template-columns:repeat(auto-fit, minmax(min(300px,100%), 1fr));}
/* Startseite „Woran euer Team Zeit verliert“: 6 Karten immer vollständige Reihen – 3+3 / 2+2+2 / 1 */
#problem .card-grid{grid-template-columns:repeat(3, minmax(0,1fr));}
@media (max-width:900px){ #problem .card-grid{grid-template-columns:repeat(2, minmax(0,1fr));} }
@media (max-width:600px){ #problem .card-grid{grid-template-columns:1fr;} }
/* 4 Karten: 4 / 2 / 1 Spalten – nie eine einzelne Karte allein in der Zeile */
.card-grid.grid-4{grid-template-columns:repeat(4, minmax(0,1fr));}
@media (max-width:1100px){ .card-grid.grid-4{grid-template-columns:repeat(2, minmax(0,1fr));} }
@media (max-width:600px){ .card-grid.grid-4{grid-template-columns:1fr;} }
/* 3 Karten: 3 Spalten ab 700px, darunter untereinander – nie 2+1 */
.card-grid.grid-3{grid-template-columns:repeat(3, minmax(0,1fr));}
@media (max-width:700px){ .card-grid.grid-3{grid-template-columns:1fr;} }
/* Startseite-Säulen: lange Titel neben Icon brauchen mehr Breite */
@media (max-width:900px){ .card-grid.grid-3.pillars{grid-template-columns:1fr; gap:28px;} }

/* ---------- Typografie ---------- */
h1,h2,h3{color:var(--ink); letter-spacing:-0.01em; text-wrap:balance;}
h1{font-size:clamp(2.1rem, 4.4vw, 3.4rem); font-weight:700; line-height:1.16;}
h1 em, h2 em{color:var(--green-dark); font-style:italic; font-weight:600;}
h2{font-size:clamp(1.65rem, 3vw, 2.25rem); font-weight:800; line-height:1.25;}
h3{font-size:1.1rem; font-weight:700; line-height:1.35;}
p{text-wrap:pretty;}
.lead{font-size:1.15rem; max-width:32em;}
.prose{max-width:36em;}  /* ca. 65 Zeichen */
.prose p + p{margin-top:16px;}
.prose strong{color:var(--ink);}
.section-head{max-width:38em; margin-bottom:36px;}
.section-head p{margin-top:14px; font-size:1.05rem;}
.eyebrow{
  display:flex; align-items:center; gap:10px;
  color:var(--green-dark); font-weight:700; font-size:0.92rem; margin-bottom:18px;
}
.eyebrow::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--green); flex:none;}
.nobr{white-space:nowrap;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:48px; padding:12px 26px; border-radius:999px; border:2px solid transparent;
  background:var(--green-dark); color:#fff; text-decoration:none;
  font:inherit; font-weight:700; font-size:0.98rem; line-height:1.2; cursor:pointer;
  transition:background .18s ease, box-shadow .18s ease, transform .18s ease;
  box-shadow:0 6px 16px -8px rgba(61,136,115,.6);
}
.btn:hover{background:var(--green-deeper); transform:translateY(-1px); box-shadow:0 12px 24px -10px rgba(61,136,115,.6);}
.btn-secondary{background:var(--white); color:var(--navy); border-color:var(--navy); box-shadow:none;}
.btn-secondary:hover{background:var(--navy); color:#fff; box-shadow:none;}
.btn-sm{min-height:44px; padding:9px 20px; font-size:0.92rem;}
.btn .arrow{transition:transform .18s ease;}
.btn:hover .arrow{transform:translateX(3px);}

.text-link{color:var(--navy); font-weight:700; text-decoration:underline; text-decoration-color:var(--green); text-underline-offset:4px; text-decoration-thickness:2px;}
.text-link:hover{color:var(--green-dark);}

/* ---------- Header ---------- */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:50; background:var(--white);
  box-shadow:0 1px 0 rgba(28,46,93,.06), 0 4px 16px rgba(28,46,93,.05);
}
.site-header .wrap{display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:var(--header-h);}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none;}
.brand img{width:38px; height:38px;}
.brand-name{font-size:1.12rem; font-weight:700; color:var(--ink); white-space:nowrap;}
.header-actions{display:flex; align-items:center; gap:28px;}
.mainnav{display:flex; gap:28px; align-items:center;}
.mainnav a{font-size:0.94rem; font-weight:600; color:var(--body); text-decoration:none; padding:8px 0; border-bottom:2px solid transparent;}
.mainnav a:hover{color:var(--green-dark);}
.mainnav a[aria-current="page"]{color:var(--ink); border-bottom-color:var(--green);}

.nav-toggle{
  display:none; align-items:center; justify-content:center;
  width:44px; height:44px; margin-right:-8px; background:none; border:none; border-radius:10px; cursor:pointer;
}
.nav-toggle-bars{position:relative; width:24px; height:2px; background:var(--ink); border-radius:2px; transition:background .2s ease;}
.nav-toggle-bars::before,.nav-toggle-bars::after{
  content:""; position:absolute; left:0; width:24px; height:2px; background:var(--ink); border-radius:2px; transition:transform .2s ease;
}
.nav-toggle-bars::before{top:-7px;}
.nav-toggle-bars::after{top:7px;}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars{background:transparent;}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before{transform:translateY(7px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after{transform:translateY(-7px) rotate(-45deg);}

.mobile-nav{
  position:absolute; top:100%; left:0; right:0; background:var(--white);
  box-shadow:0 12px 24px rgba(28,46,93,.14); padding:4px var(--gutter) 16px;
}
.mobile-nav[hidden]{display:none;}
.mobile-nav a{
  display:flex; align-items:center; min-height:52px; font-weight:600; color:var(--ink); text-decoration:none;
  border-bottom:1px solid var(--line);
}
.mobile-nav a:last-child{border-bottom:none;}
.mobile-nav a[aria-current="page"]{color:var(--green-dark);}

/* ---------- Sektionen ---------- */
main{display:block;}
/* Abstände zwischen den Blöcken zentral: --section-y (Sektionen), --closing-y (weißer Abschluss);
   Werte für Tablet/Handy unten in den Breakpoints */
:root{--section-y:76px; --closing-y:72px;}
.section{padding:var(--section-y) 0;}
/* mehr Luft vor dem weißen Abschlussbereich */
.section:has(+ .closing){padding-bottom:calc(var(--section-y) * 1.5);}
.section-sm{padding:64px 0;}
.bg-white{background:var(--white);}
.bg-base{background:var(--bg);}
.page-top{padding-top:calc(var(--header-h) + 56px);}
.page-top h1 + .lead{margin-top:18px;}
.pt-0{padding-top:0 !important;}
.mb-0{margin-bottom:0 !important;}

/* ---------- Karten ---------- */
.card{background:var(--white); border-radius:var(--radius); border:1px solid var(--border); box-shadow:var(--shadow-sm); padding:24px;}
.icon-circle{
  width:44px; height:44px; border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center; background:var(--mint-tint);
}
.icon-circle svg{width:22px; height:22px;}
.icon-circle.steel{background:var(--steel-tint);}
.icon-circle.deep{background:var(--mint-deep);}

/* ---------- Fotos ---------- */
.photo{
  position:relative; overflow:hidden; border-radius:24px;
  background:var(--mint-tint); box-shadow:var(--shadow-md);
}
.photo img{width:100%; height:100%; object-fit:cover;}
/* feiner Rahmen in Markenfarbe, damit die Fotos ruhig in die Flächen eingebettet wirken */
.photo::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(28,46,93,.08);
}

/* ---------- Abschluss-CTA (einziger zentrierter Block) ---------- */
.closing{background:var(--white); border-top:1px solid var(--line); border-bottom:1px solid var(--line); text-align:center; padding:var(--closing-y) 0;}
.closing .wrap{max-width:680px;}
.closing p{margin:16px auto 0; font-size:1.06rem; max-width:52ch;}
.closing .btn{margin-top:30px;}
.closing .closing-alt{margin-top:28px; font-size:0.95rem;}
.closing .closing-alt .text-link{display:inline-block; margin-top:6px;}

/* ---------- Footer (auf allen Seiten gleich) ---------- */
.site-footer{background:var(--bg); padding:48px 0 40px; text-align:center; font-size:0.88rem;}
.site-footer .footer-logo{width:56px; height:56px; margin:0 auto 10px;}
.site-footer .footer-name{font-weight:700; color:var(--ink); font-size:1.02rem;}
.site-footer .footer-tagline{margin-top:6px; color:var(--body);}
.site-footer .footer-owner{margin-top:2px; color:var(--body);}
.site-footer .footer-meta{margin-top:18px; font-size:0.82rem; opacity:0.8;}
.site-footer .footer-legal{margin-top:6px; display:flex; justify-content:center; gap:18px;}
.site-footer .footer-legal a{text-decoration:none; color:var(--body); padding:6px 0;}
.site-footer .footer-legal a:hover{text-decoration:underline; color:var(--ink);}

/* ---------- Animation ---------- */
.fade-in{animation:fadeUp .7s ease both;}
.fade-in.d1{animation-delay:.1s;}
.fade-in.d2{animation-delay:.2s;}
.fade-in.d3{animation-delay:.3s;}
@keyframes fadeUp{from{opacity:0; transform:translateY(12px);} to{opacity:1; transform:none;}}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .fade-in{animation:none;}
  .btn,.btn .arrow{transition:none;}
}

/* ==========================================================================
   STARTSEITE
   ========================================================================== */
.hero{padding:calc(var(--header-h) + 80px) 0 var(--section-y); overflow-x:hidden; overflow-x:clip; overflow-y:visible;}
.hero .grid-12{align-items:center;}
.hero h1{max-width:18ch;}
.hero h1 .line{display:block; text-wrap:balance;}  /* jeder Satz beginnt in einer neuen Zeile */
.hero .lead{margin-top:24px;}
.hero-actions{margin-top:34px; display:flex; flex-wrap:wrap; align-items:center; gap:14px 16px;}

.hero{position:relative;}
.hero .wrap{position:relative; z-index:1;}
/* Logo-Bildzeichen als Hintergrundmotiv: fest am Porträt verankert (gleiche Größe auf allen Bildschirmen),
   leicht gedreht, ragt unten unter Foto und Karte hervor */
.hero-logo{
  position:absolute; z-index:0; pointer-events:none;
  top:-256px; left:-96px;
  width:950px; max-width:none; height:auto; opacity:.24;
  transform:rotate(9deg);
}
.hero + .section{position:relative; z-index:2;}  /* Logo läuft hinter dem nächsten Abschnitt aus */
/* schmale Laptops: etwas kleiner und näher am Foto, damit es den Text nicht berührt; Tablet/Handy: ausgeblendet */
@media (max-width:1199px){ .hero-logo{width:800px; left:-30px; top:-200px;} }
@media (max-width:900px){ .hero-logo{display:none;} }
/* Tablet: Logo klein oben rechts im freien Platz neben der Überschrift (unter 740px ausgeblendet) */
@media (min-width:740px) and (max-width:900px){
  .hero::before{content:""; position:absolute; z-index:0; pointer-events:none;
    width:clamp(270px, calc(270px + (100vw - 740px) * .875), 340px); aspect-ratio:700/688; right:-80px; top:60px;
    background:url(img/ringe.png) no-repeat center/contain; opacity:.24; transform:rotate(9deg);}
}
/* Porträt mit Stunden-Karte: Karte liegt mittig auf der Unterkante des Fotos */
.hero-visual{position:relative; padding:0 0 0 24px;}
.hero-portrait{position:relative; margin:0 auto; width:min(100%, 380px); padding-bottom:58px;}
.hero-portrait-frame{position:relative;}
.hero-portrait-frame > img{display:block; width:100%; height:auto; aspect-ratio:380/480; object-fit:cover; border-radius:24px; box-shadow:0 30px 60px -28px rgba(28,46,93,.45);}
.hero-stats{
  position:absolute; left:50%; bottom:-58px; transform:translateX(-50%);
  width:calc(100% + 38px); box-sizing:border-box;
  display:grid; grid-template-columns:1fr 1fr; column-gap:0;
  background:var(--white); color:var(--ink); border-radius:18px; padding:18px 22px;
  box-shadow:0 26px 50px -22px rgba(28,46,93,.35);
}
.hero-stat{grid-column:1; grid-row:1; display:flex; flex-direction:column; gap:3px; padding:0 14px 0 8px;}
.hero-stat + .hero-stat{grid-column:2; grid-row:1 / span 2; border-left:1px solid var(--line); padding:0 0 0 16px;}
.hero-stat-pre{font-size:0.75rem; font-weight:600; color:var(--steel);}
.hero-stat-num{font-size:1.9rem; font-weight:800; line-height:1; color:var(--green-dark);}
.hero-stat-label{font-size:0.82rem; font-weight:600; line-height:1.35; color:var(--ink);}
.hero-stat-source{grid-column:1; grid-row:2; padding:0 14px 0 8px; font-size:0.7rem; font-weight:600; line-height:1.35; color:var(--steel); white-space:nowrap;}
/* schmalere Bildschirme: „Erfahrungswert“ als eigene Zeile über die ganze Kartenbreite */
@media (max-width:1199px){
  .hero-stat + .hero-stat{grid-row:1;}
  .hero-stat-source{grid-column:1 / -1; margin-top:10px;}
  .hero-portrait{width:min(calc(100% - 19px), 380px); margin:0 19px 0 auto;}  /* Karte endet bündig mit der Spalte statt am Bildschirmrand */
}
.hero-portrait figcaption{position:absolute; left:0; right:0; bottom:-34px; text-align:center; font-size:0.82rem; font-weight:600; color:var(--steel); letter-spacing:.01em;}

.approach-grid{align-items:center;}
.approach-photo{aspect-ratio:1;}
.approach-photo img{object-position:47% 30%;}

.problem-card{display:flex; flex-direction:column; gap:10px;}
.problem-card-head{display:flex; align-items:center; gap:12px;}
.problem-card h3{font-size:1rem;}
.problem-card p{font-size:0.94rem;}

.approach .prose p{font-size:1.06rem;}
.approach-quote{
  border-left:3px solid var(--green); padding-left:22px; margin-top:72px;  /* = Abstand zu den Säulen darunter */
  font-size:clamp(1.2rem, 1.8vw, 1.32rem); font-weight:600; color:var(--ink); max-width:34em;
}

.pillars{margin-top:72px;}
.approach .prose{margin-top:24px;}
/* Nutzen-Blöcke: Icon als linke Spalte, Titel + Text bündig daneben (auf allen Geräten) */
.pillar{display:grid; grid-template-columns:56px minmax(0,1fr); column-gap:18px; row-gap:6px; align-items:start;}
.pillar-head{display:contents;}
.pillar-icon{grid-column:1; grid-row:1 / span 2; width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--mint-tint);}
.pillar-icon.steel{background:var(--steel-tint);}
.pillar-icon.deep{background:var(--mint-deep);}
.pillar-icon svg{width:28px; height:28px;}
.pillar h3{grid-column:2; grid-row:1; padding-top:4px;}
.pillar p{grid-column:2; grid-row:2; font-size:0.98rem;}

.compare-head h2{max-width:none;}
.compare{display:grid; grid-template-columns:1fr 1fr; gap:24px; max-width:920px; margin:64px auto 0;}
.compare-col{padding:30px 28px; border-radius:24px; background:var(--white);}
.compare-col-title{font-weight:800; font-size:0.98rem; margin-bottom:20px; display:flex; align-items:center; gap:10px;}
.compare-col ul{list-style:none; display:grid; gap:14px;}
.compare-col li{display:flex; align-items:flex-start; gap:10px; line-height:1.45;}
.compare-col li svg{flex:none; width:19px; height:19px; margin-top:2px;}
.compare-typical{border:1px solid var(--border); box-shadow:var(--shadow-sm);}
.compare-typical .compare-col-title{color:var(--steel-dark);}
.compare-mine{border:2px solid var(--green); box-shadow:var(--shadow-md);}
.compare-mine .compare-col-title{color:var(--green-dark);}
.compare-mine .compare-col-title img{width:24px; height:24px;}
.compare-mine li{font-weight:700; color:var(--ink);}
.after-compare{margin-top:88px; text-align:center;}

/* ==========================================================================
   ABLAUF
   ========================================================================== */
.ablauf-hero .grid-12{align-items:start;}
.steps{list-style:none; margin-top:44px; max-width:640px;}
.step{display:flex; gap:22px; position:relative; padding-bottom:36px;}
.step:last-child{padding-bottom:0;}
.step::before{content:""; position:absolute; left:23px; top:52px; bottom:4px; width:2px; background:var(--line);}
.step:last-child::before{display:none;}
.step-num{
  flex:none; width:48px; height:48px; border-radius:50%; background:var(--green-dark); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:1.05rem;
}
.step h3{margin:10px 0 6px;}
.step p{font-size:0.98rem; max-width:52ch;}

.fact-card{position:relative; overflow:hidden; background:var(--white); border-radius:24px; box-shadow:var(--shadow-md); padding:30px 28px;}
/* Logo im Seitenhintergrund (wie Startseite); clip statt hidden, damit die Faktenkarte sticky bleibt */
.ablauf-hero{position:relative; overflow:hidden; overflow:clip;}
.ablauf-hero .wrap{position:relative; z-index:1;}
/* Ablauf: Zahnrad-Grafik als Hintergrundmotiv oben rechts */
.hero-gears{
  position:absolute; z-index:0; pointer-events:none;
  /* 600px groß; oberes Rad wird an der Header-Kante zu ca. einem Viertel angeschnitten */
  top:calc(var(--header-h) - 147px); right:-110px;
  width:600px; height:600px; opacity:.45;
}
@media (max-width:900px){ .hero-gears{width:400px; height:400px; right:-120px; top:calc(var(--header-h) - 104px); opacity:.3;} }
@media (max-width:600px){ .hero-gears{display:none;} }
.fact-card h2{font-size:1.15rem; position:relative;}
.fact-list{list-style:none; margin:18px 0 24px; display:grid; gap:14px; position:relative;}
.fact-list li{display:flex; gap:14px; align-items:center;}
.fact-list strong{display:block; color:var(--ink); font-size:1.02rem; line-height:1.3;}
.fact-list span.sub{display:block; font-size:0.88rem;}
/* kompakter, Text bleibt einzeilig (vorher Umbruch in der schmalen Karte) */
.fact-card .btn{width:100%; min-height:44px; padding:10px 18px; font-size:0.92rem; text-align:center;}  /* längerer CTA-Text darf in schmalen Karten umbrechen */

/* KI-Seite: kompaktere Abstände zwischen den Abschnitten, Kopf bleibt wie auf den anderen Seiten */
.ki-page .section{padding:calc(var(--section-y) * .6) 0;}
.ki-page .page-top{padding-top:calc(var(--header-h) + 56px);}
.ki-page .section:has(+ .closing){padding-bottom:var(--section-y);}
/* Kernaussage im Kopfbereich unter dem Lead */
.ki-why{margin-top:60px;}
.ki-why .statement{font-size:clamp(1.15rem, 2vw, 1.35rem);}
.ki-why .prose{margin-top:16px; font-size:1.15rem; max-width:32em;}  /* gleiche Größe wie der Lead darüber */
/* Ablauf-Schritte als Karten nebeneinander */
.ki-steps .card{display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:14px; row-gap:14px; align-content:start;}  /* Zahl und Überschrift nebeneinander, Text darunter */
.ki-steps .step-num{grid-column:1; grid-row:1;}
.ki-steps p{grid-column:1 / -1;}
.ki-steps h3{grid-column:2; grid-row:1; align-self:center; font-size:1.02rem;}
.ki-steps p{font-size:0.95rem;}
.ki-note{margin-top:18px; font-size:0.9rem; color:var(--body); opacity:.85;}
.closing .closing-note{margin-top:8px; font-size:0.92rem; opacity:.8;}
/* KI-Seite: hervorgehobenes Zusatzangebot (KI-Einführung) */
/* KI-Seite: hervorgehobenes Zusatzangebot (KI-Einführung) */
.ki-offer{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:24px 40px; align-items:center;
  background:var(--white); border:2px solid var(--green); border-radius:24px; box-shadow:var(--shadow-md);
  padding:32px 36px;
}
.ki-offer-badge{display:inline-block; font-size:0.78rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--green-dark); background:var(--mint-tint); padding:5px 12px; border-radius:999px; margin-top:16px;}
.ki-offer h2{font-size:clamp(1.3rem, 2.4vw, 1.6rem);}
.ki-offer p{margin-top:10px; font-size:1.05rem; max-width:42em;}
.ki-offer-actions{display:flex; flex-direction:column; gap:12px;}
.ki-offer-actions .btn{justify-content:center; white-space:nowrap;}
@media (max-width:900px){
  .ki-offer{grid-template-columns:minmax(0,1fr); padding:26px 22px;}  /* minmax(0,…) verhindert, dass lange Buttons die Karte sprengen */
  .ki-offer-actions{flex-direction:row; flex-wrap:wrap;}
}
@media (max-width:600px){ .ki-offer-actions .btn{width:100%; white-space:normal; text-align:center;} .ki-offer-badge{max-width:100%; white-space:normal; line-height:1.4;} }

.example{display:grid; grid-template-columns:1fr 1fr; gap:24px; max-width:760px; margin:36px auto 0;}
.flow-card{background:var(--white); border-radius:20px; border:1px solid var(--border); box-shadow:var(--shadow-sm); padding:22px 24px 26px; display:flex; flex-direction:column;}
.flow-card.after{border:2px solid var(--green); box-shadow:var(--shadow-md);}
.flow-card-head{display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:16px; flex-wrap:wrap;}
.flow-label{font-size:0.78rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#fff; padding:6px 14px; border-radius:999px; background:var(--steel-dark);}
.flow-card.after .flow-label{background:var(--green-dark);}
.flow-badge{font-size:0.82rem; font-weight:800; color:var(--green-dark); background:var(--mint-tint); padding:4px 12px; border-radius:999px;}
.flow-steps{list-style:none; display:flex; flex-direction:column; text-align:center;}
.flow-count{
  margin-top:auto; padding-top:18px; border-top:1px solid var(--border);
  text-align:center; font-size:0.9rem; font-weight:600; color:var(--steel-dark);
}
.flow-steps + .flow-count{margin-top:auto;}
.flow-card .flow-steps{margin-bottom:18px;}
.flow-card.after .flow-count{color:var(--green-dark);}
.flow-card.after .flow-count strong{font-weight:800;}
/* mobil: Ersparnis in eigener, kleinerer Zeile; beide Kartenfüße gleich hoch, damit „7“ und „4 Schritte“ auf einer Linie stehen */
@media (max-width:600px){ .flow-sub{display:block; font-size:0.75rem;} .flow-dot{display:none;} .flow-count{min-height:80px;} }
.flow-steps li{font-weight:600; color:var(--ink); font-size:0.95rem; padding:2px 0;}
.flow-steps li + li::before{content:"↓"; display:block; color:var(--steel); font-weight:700; line-height:1.3; margin-bottom:2px;}
.flow-steps li.removed{color:#8793a8;}
.flow-steps li.removed s{text-decoration-color:#c0506a; text-decoration-thickness:2px;}
.example-result{margin:28px auto 0; max-width:36em; font-size:1.05rem; color:var(--ink); font-weight:600; text-align:center;}
.example-result strong{color:var(--green-dark);}
.stat-callout{
  margin:56px auto 0; border-left:3px solid var(--green); padding-left:24px; width:fit-content;
  font-size:clamp(1.1rem, 2vw, 1.3rem); font-weight:700; color:var(--ink); max-width:30em;
}
.stat-callout span{color:var(--green-dark);}

/* Bildstreifen randlos oben in der FAQ-Karte (wie Erstgespräch-Karte auf Kontakt) */
.faq{overflow:hidden;}
.faq-photo{aspect-ratio:23/7; margin:-8px -30px 8px; background:var(--mint-tint);}
/* Ausschnitt etwas nach unten verschoben: gekürzt wird oben (Decke/Regal), der untere Bildrand bleibt */
.faq-photo img{width:100%; height:100%; object-fit:cover; object-position:50% 48%;}
.faq-photo img.faq-photo-tisch{object-position:50% 58%;}  /* Ablauf: Tischfoto */

.workstyle{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px; margin-top:8px;}
.workstyle-item{background:var(--white); border-radius:var(--radius); padding:22px 20px; box-shadow:var(--shadow-sm); display:flex; align-items:center; gap:14px;}
.workstyle-item p{font-weight:700; color:var(--ink); line-height:1.4; font-size:0.95rem;}

.faq{margin:48px auto 0; max-width:800px; background:var(--white); border-radius:24px; padding:8px 30px; box-shadow:var(--shadow-md);}
.faq-item{border-bottom:1px solid var(--border);}
.faq-item:last-child{border-bottom:none;}
.faq-question{
  all:unset; box-sizing:border-box; cursor:pointer; width:100%; min-height:44px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:20px 2px; font-weight:700; color:var(--ink); font-size:1.02rem;
}
.faq-question:focus-visible{outline:3px solid var(--green); outline-offset:2px;}
.faq-chevron{flex:none; width:18px; height:18px; transition:transform .3s ease;}
.faq-item.open .faq-chevron{transform:rotate(180deg);}
.faq-answer-wrap{display:grid; grid-template-rows:0fr; transition:grid-template-rows .35s ease;}
.faq-item.open .faq-answer-wrap{grid-template-rows:1fr;}
.faq-answer-inner{overflow:hidden;}
.faq-answer{padding:0 36px 22px 2px; font-size:0.98rem;}
.faq-answer p + p{margin-top:10px;}  /* mehrteilige Antworten */
.faq-answer strong{color:var(--ink);}

/* ==========================================================================
   ÜBER MICH
   ========================================================================== */
.about-hero .grid-12{align-items:center;}
.portrait{position:relative; padding:14px; max-width:400px;}
.portrait::before{
  content:""; position:absolute; inset:3.5% 11.5% 6.5% -3.5%;  /* Kontur ragt links oben heraus */
  border:2.5px solid var(--steel); opacity:.5;
  border-radius:58% 42% 61% 39% / 45% 55% 45% 55%;
}
.portrait img{
  position:relative; width:100%; height:auto; aspect-ratio:1;
  object-fit:cover;
  border-radius:58% 42% 61% 39% / 45% 55% 45% 55%;
  box-shadow:0 24px 50px -22px rgba(28,46,93,.3);
}
.about-hero h1{font-size:clamp(1.9rem, 3.8vw, 2.7rem); line-height:1.22;}
.role{color:var(--green-dark); font-weight:700; margin-top:12px;}
.about-hero .lead{margin-top:24px; font-size:1.08rem;}

.statement{border-left:3px solid var(--green); padding-left:24px; font-size:clamp(1.2rem, 2.3vw, 1.5rem); font-weight:700; color:var(--ink); max-width:26em; line-height:1.35;}
.statement + .prose{margin-top:24px; font-size:1.05rem;}
/* Über mich: Statement-Abschnitt nutzt die volle Inhaltsbreite */
.statement-section .statement,
.statement-section .prose,
.why .prose,
.approach .prose,
.approach .approach-quote{max-width:none;}
.approach .span-8{grid-column:1 / -1;}

.skill-head{display:flex; align-items:center; gap:20px; margin-bottom:36px;}
.skill-head img{width:64px; height:auto; flex:none;}
.skill-title{display:flex; align-items:center; gap:14px;}
.skill-card h3{font-size:1rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase;}
.skill-card .skill-tags{font-weight:600; color:var(--ink); margin-top:14px; font-size:0.95rem;}
.skill-card p.desc{margin-top:10px; font-size:1rem;}
.skill-card.people h3{color:var(--green-dark);}
.skill-card.process h3{color:var(--steel-dark);}
.skill-card.change h3{color:var(--navy);}
.skill-card{border-top:4px solid var(--green);}
.skill-card.process{border-top-color:var(--steel);}
.skill-card.change{border-top-color:var(--navy);}

.competency-card .comp-head{display:flex; align-items:center; gap:12px; margin-bottom:12px;}
.competency-card h3{font-size:1rem; font-weight:800;}
.competency-card p{font-size:0.94rem;}

/* Variante „Lebenslauf-Liste“ (Über mich → fachlicher Hintergrund): offene Zeilen mit feinen Linien statt Karten.
   Rückgängig: Klasse „competency-list“ im HTML entfernen */
.competency-list{display:block; border-top:1px solid var(--line);}
.competency-list .card{background:none; border:0; box-shadow:none; border-radius:0;}
.competency-list .competency-card{
  /* linke Spalte wächst mit der Breite (Text beginnt weiter rechts), Text läuft bis zum Linienende */
  display:grid; grid-template-columns:minmax(260px, 32%) minmax(0,1fr); column-gap:clamp(32px, 4vw, 64px); align-items:center;
  padding:26px 0; border-bottom:1px solid var(--line);
}
.competency-list .comp-head{margin-bottom:0;}
.competency-list .competency-card h3{font-size:1.05rem;}
/* Text endet etwas vor dem Linienende */
.competency-list .competency-card p{font-size:1rem; max-width:none; text-wrap:wrap; padding-right:clamp(48px, 7%, 120px);}
/* Tablet/Handy: wie die Nutzen-Blöcke – Icon als linke Spalte, Titel + Text bündig daneben */
@media (max-width:900px){
  .competency-list .competency-card{grid-template-columns:40px minmax(0,1fr); column-gap:16px; row-gap:6px; align-items:start; padding:22px 0;}
  .competency-list .comp-head{display:contents;}
  .competency-list .comp-head .icon-circle{grid-column:1; grid-row:1 / span 2; width:40px; height:40px;}
  .competency-list .comp-head .icon-circle svg{width:20px; height:20px;}
  .competency-list .competency-card h3{grid-column:2; grid-row:1; padding-top:9px;}
  .competency-list .competency-card p{grid-column:2; grid-row:2; padding-right:0; font-size:0.95rem;}
}

.why-head{display:flex; align-items:center; gap:20px;}
.why-head img{width:64px; height:auto; flex:none;}
.why .prose{margin-top:20px; font-size:1.05rem;}
.why-grid{align-items:center;}
/* Porträt hochkant; über den Haaren bleibt etwas Hintergrund sichtbar */
/* organische Form wie das Porträt oben (.portrait), gespiegelt; hochkant */
.why-photo{
  width:100%; max-width:270px; padding:12px;
  overflow:visible; background:none; box-shadow:none; border-radius:0;
}
.why-photo::after{display:none;}
/* Konturlinie seitlich über das Foto hinaus, oben/unten kürzer: wirkt breiter statt höher */
.why-photo::before{
  content:""; position:absolute; inset:8% -5% 7% -4%;
  border:2.5px solid var(--steel); opacity:.5;
  border-radius:42% 58% 39% 61% / 55% 45% 55% 45%;
}
.why-photo img{
  position:relative; aspect-ratio:4/5; height:auto; object-position:50% 20%;
  border-radius:42% 58% 39% 61% / 55% 45% 55% 45%;
  box-shadow:0 24px 50px -22px rgba(28,46,93,.3);
}
/* Desktop: Foto links, Text rechts – mobil bleibt der Text zuerst */
@media (min-width:901px){
  .why-photo{grid-column:1 / span 3; grid-row:1;}
  .why-grid .span-7{grid-column:4 / span 8; grid-row:1; padding-left:16px;}  /* Luft zur Konturlinie */
}

/* ==========================================================================
   KONTAKT
   ========================================================================== */
.contact-layout{margin-top:36px; align-items:start;}
.contact-primary{border:2px solid var(--green); box-shadow:var(--shadow-md); padding:32px;}
.contact-primary .icon-circle{width:52px; height:52px;}
.contact-primary .icon-circle svg{width:26px; height:26px;}
.contact-primary-top{display:flex; align-items:center; gap:16px;}
.contact-primary h2{font-size:1.35rem; margin-top:0;}
.contact-primary p{margin-top:16px;}
.contact-primary .btn{margin-top:22px;}
.contact-alt{margin-top:28px;}
.contact-alt-title{font-size:0.82rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--steel-dark); margin-bottom:6px;}
.contact-row{
  display:flex; align-items:center; gap:14px; min-height:72px; padding:12px 4px;
  text-decoration:none; border-bottom:1px solid var(--border); color:var(--ink);
}
.contact-row:last-child{border-bottom:none;}
.contact-row strong{display:block; font-size:1rem;}
.contact-row span.sub{display:block; font-size:0.88rem; color:var(--body);}
.contact-row .chev{margin-left:auto; width:20px; height:20px; flex:none; color:var(--green-dark); transition:transform .18s ease;}
.contact-row:hover strong{color:var(--green-dark);}
.contact-row:hover .chev{transform:translateX(3px);}

/* Bildstreifen randlos oben in der Erstgespräch-Karte */
.contact-primary{overflow:hidden;}
/* Erstgespräch-Karte: Foto füllt das linke Viertel, Text und Button rechts daneben */
.contact-primary{display:grid; grid-template-columns:25% minmax(0,1fr); padding:0; align-content:start;}
.contact-photo{grid-column:1; grid-row:1 / span 3; margin:0; height:100%; background:var(--mint-tint);}
.contact-photo img{width:100%; height:100%; object-fit:cover; object-position:62% 45%;}
.contact-primary > :not(.contact-photo){grid-column:2; margin-left:28px; margin-right:28px;}
.contact-primary-top{margin-top:30px;}
.contact-primary .btn{justify-self:start; align-self:start; margin-bottom:30px;}

.form-card{padding:28px 32px;}
.form-card h2{font-size:1.35rem;}
.form-card > p{margin-top:6px; margin-bottom:20px;}
.form-row{margin-bottom:14px;}
.form-row label{display:block; font-size:0.9rem; font-weight:700; color:var(--ink); margin-bottom:6px;}
.form-row input,.form-row textarea,.form-row select{
  width:100%; font:inherit; font-size:16px; color:var(--ink);
  padding:12px 14px; border:1.5px solid rgba(28,46,93,.22); border-radius:12px; background:var(--white);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.form-row textarea{resize:vertical; min-height:104px;}
/* Auswahlfeld: eigener Pfeil statt Browser-Standard */
.form-row select{
  appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:44px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%233d8873' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:20px;
}
.form-row select:invalid{color:rgba(28,46,93,.55);}
.form-row select option{color:var(--ink);}
.form-row input:focus,.form-row textarea:focus,.form-row select:focus{outline:none; border-color:var(--green-dark); box-shadow:0 0 0 4px rgba(78,163,140,.28);}
.form-row input:focus-visible,.form-row textarea:focus-visible,.form-row select:focus-visible{outline:none;}
.hp-field{position:absolute; left:-9999px;}
.form-foot{display:flex; flex-wrap:wrap; align-items:center; gap:14px 20px; margin-top:6px;}
.form-privacy{font-size:0.85rem; flex:1 1 220px;}
.form-privacy a{color:var(--navy); font-weight:600;}

/* ==========================================================================
   RECHTLICHES
   ========================================================================== */
.legal h1{font-size:clamp(1.9rem, 4vw, 2.6rem); font-weight:800; margin-bottom:24px;}
.legal h2{font-size:1.25rem; font-weight:700; margin-top:38px; margin-bottom:12px;}
.legal p,.legal li{max-width:40em; margin-bottom:14px;}
.legal ul{padding-left:22px; margin-bottom:14px;}
.legal strong{color:var(--ink);}
.legal a{color:var(--steel-dark); overflow-wrap:anywhere;}
.legal{overflow-wrap:break-word;}
.legal .legal-sub{font-size:1.1rem; font-weight:700; color:var(--ink); margin-top:-12px; margin-bottom:22px;}
.legal h3{font-size:1.05rem; font-weight:700; color:var(--ink); margin-top:28px; margin-bottom:10px;}
.legal h4{font-size:.98rem; font-weight:700; color:var(--ink); margin-top:20px; margin-bottom:8px;}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* >= 1200px: etwas mehr Luft */
@media (min-width:901px){
  /* Ablauf-Beispiel und Kontakt: Einleitung jeweils einzeilig */
  #beispiel .section-head,
  .contact-intro{max-width:none;}
  .contact-intro p{white-space:nowrap;}
  /* Startseite „Woran euer Team Zeit verliert“: jeder Satz in eigener Zeile */
  #problem .section-head{max-width:none;}
  #problem .section-head .line{display:block;}
  #beispiel .section-head h2,
  #beispiel .section-head p{white-space:nowrap;}
  /* Ablauf: Faktenkarte beginnt auf Höhe des Einleitungstexts */
  .ablauf-hero .fact-card{margin-top:123px;}
}
/* große Desktops: Inhalt breiter, damit die Seite nicht in der Mitte gequetscht wirkt */
@media (min-width:1440px){
  :root{--container:1320px; --gutter:40px;}
  /* Startseite oben: breitere Textspalte, größere Überschrift, Einleitung läuft länger */
  .hero .span-7{grid-column:span 8;}
  .hero .span-5{grid-column:span 4;}
  .hero-visual{padding-left:0;}
  .hero h1{font-size:3.9rem;}
  .hero .lead{max-width:40em; font-size:1.22rem;}
  /* „Nicht für euch optimieren“: Foto kleiner und vom Text begrenzt –
     oben auf Höhe der Mitte der ersten Überschriftenzeile, unten bündig mit dem Zitat */
  .approach-grid{align-items:stretch;}
  .approach-photo{
    aspect-ratio:auto; align-self:stretch; justify-self:end; width:88%;
    margin-top:calc(clamp(1.65rem, 3vw, 2.25rem) * 1.25 / 2);  /* halbe Zeilenhöhe der Überschrift */
  }
  .approach-photo img{position:absolute; inset:0;}  /* Bild bestimmt die Höhe nicht mit – die Textspalte tut es */
  /* Über mich oben: Einleitung endet etwa unter „steht“ der Überschrift */
  .about-hero .lead{max-width:37em;}
  /* Kontakt, Erstgespräch-Karte: erste Zeile voll ausnutzen statt ausgewogen umbrechen */
  .contact-primary > p{text-wrap:wrap;}
}
@media (min-width:1760px){
  :root{--container:1440px;}
  .competency-list .competency-card p{padding-right:12%;}  /* sehr breite Zeilen etwas früher umbrechen */
}

@media (min-width:1200px){
  /* Kontakt: mehr Luft zwischen Einleitungssatz und Karten */
  .contact-layout{margin-top:56px;}
  /* Ablauf: Faktenkarte schmaler und rechtsbündig */
  .ablauf-hero .fact-card{max-width:340px; margin-left:auto; margin-top:144px;}
}

/* <= 900px: Tablet */
@media (max-width:900px){
  :root{--header-h:64px;}
  .mainnav{display:none;}
  .nav-toggle{display:flex;}
  .header-actions{gap:12px;}

  :root{--section-y:60px; --closing-y:64px;}
  .grid-12{grid-template-columns:minmax(0,1fr); row-gap:36px;}
  .span-7,.span-5,.span-6,.span-8,.span-4{grid-column:1 / -1;}

  .hero{padding-top:calc(var(--header-h) + 56px);}
  .hero h1{max-width:20ch;}
  .hero-visual{padding:0;}
  .approach-photo{aspect-ratio:16/10;}
  /* „Warum“: kleines Porträt neben der Überschrift, Text darunter über die volle Breite */
  .why .why-grid{grid-template-columns:140px minmax(0,1fr); column-gap:24px; row-gap:24px; align-items:center;}
  .why .why-grid > .span-7{display:contents;}
  .why .why-grid h2{grid-column:2; grid-row:1;}
  .why .why-grid .prose{grid-column:1 / -1; grid-row:2; margin-top:0;}
  .why .why-grid .rechner-link{grid-column:1 / -1; grid-row:3; justify-self:start; margin-top:0;}
  .why-photo{grid-column:1; grid-row:1; width:140px; max-width:none; padding:8px;}
  .approach-photo img{object-position:47% 30%;}
  .hero .grid-12{row-gap:48px;}
  .hero-portrait{width:min(100%, 340px); margin:0 auto;}

  .fact-list{grid-template-columns:1fr 1fr;}

  .workstyle{grid-template-columns:1fr 1fr;}

  .portrait{max-width:300px; margin:0 auto;}

  .contact-layout{margin-top:32px;}
}

/* <= 600px: Mobil */
@media (max-width:600px){
  :root{--gutter:18px;}
  .brand img{width:32px; height:32px;}
  .brand-name{font-size:1rem;}
  .header-cta{display:none;}

  :root{--section-y:48px; --closing-y:52px;}
  .section-head{margin-bottom:28px;}
  .card{padding:18px;}
  .card-grid{gap:12px;}
  .page-top{padding-top:calc(var(--header-h) + 40px);}

  /* Startseite */
  .hero{padding-top:calc(var(--header-h) + 32px);}
  .hero-logo{display:none;}
  .hero .eyebrow{display:none;}  /* grüne Zeile über der Überschrift mobil ausgeblendet */
  .hero h1{font-size:clamp(1.45rem, 6.55vw, 1.85rem); line-height:1.2; max-width:none; font-weight:800;}  /* Überschrift mobil: volle Breite nutzen */
  .hero h1 .line{text-wrap:wrap;}
  .hero .lead{margin-top:18px; font-size:1.06rem;}
  .hero-actions{margin-top:26px;}
  .hero-actions{flex-direction:column; align-items:stretch; gap:16px;}
  .hero-actions .btn{width:100%;}
  .hero-actions .text-link{align-self:center;}
  /* Handy: Überschrift → Foto mit Karte → Einleitung → Buttons */
  .hero .grid-12{row-gap:0;}
  .hero .span-7{display:contents;}
  .hero h1{order:1;}
  .hero-visual{order:2; margin-top:20px;}
  .hero .lead{order:3;}
  .hero-actions{order:4;}
  .hero-portrait{width:min(290px, calc(100% - 28px)); padding-bottom:0;}
  .hero-portrait-frame > img{border-radius:20px; box-shadow:0 20px 40px -22px rgba(28,46,93,.45);}
  .hero-stats{
    position:relative; left:auto; bottom:auto; transform:none;
    width:calc(100% + 28px); margin:-82px 0 0 -14px;
    border-radius:16px; padding:13px 16px; box-shadow:0 20px 40px -20px rgba(28,46,93,.35);
  }
  .hero-stat{gap:2px; padding:0 12px 0 8px;}
  .hero-stat + .hero-stat{grid-row:1; padding:0 0 0 12px;}
  .hero-stat-pre{font-size:0.69rem;}
  .hero-stat-num{font-size:1.38rem; line-height:1.05;}
  .hero-stat-label{font-size:0.75rem;}
  .hero-stat-source{grid-column:1 / -1; margin-top:10px; padding-left:8px; font-size:0.69rem; white-space:nowrap;}
  .hero-portrait figcaption{position:static; margin-top:12px; font-size:0.75rem;}
  .hide-mobile{display:none;}
  .photo{border-radius:18px;}
  .approach-photo{aspect-ratio:4/3;}
  .why .why-grid{grid-template-columns:108px minmax(0,1fr); column-gap:22px; row-gap:20px;}
  /* „process & people?“ bricht nicht um – Überschrift so groß, dass sie auch bei 360 px passt */
  .why .why-grid h2{font-size:1.25rem;}
  .why-photo{width:108px; padding:6px;}
  .why-photo::before{border-width:2px;}
  .faq-photo{aspect-ratio:21/8; margin:-4px -18px 4px;}
  /* schmaler Ausschnitt: Laptop mit Videocall in der Mitte halten */

  .pillars{margin-top:44px; gap:24px;}
  .approach-quote{margin-top:44px;}
  /* Nutzen-Blöcke mobil: etwas kleiner */
  .pillar{grid-template-columns:48px minmax(0,1fr); column-gap:16px;}
  .pillar-icon{width:48px; height:48px;}
  .pillar-icon svg{width:24px; height:24px;}
  .pillar h3{padding-top:2px;}
  .pillar p{font-size:0.95rem;}

  .compare{grid-template-columns:1fr; gap:16px; margin-top:40px;}
  .after-compare{margin-top:60px;}
  .compare-col{padding:24px 22px;}
  .after-compare .btn{width:100%;}

  /* Ablauf */
  .steps{margin-top:32px;}
  .step{gap:16px; padding-bottom:28px;}
  .step-num{width:40px; height:40px; font-size:0.95rem;}
  .step::before{left:19px; top:44px;}
  .step h3{margin-top:7px;}
  .fact-card{padding:24px 20px;}
  .fact-list{grid-template-columns:1fr;}
  .example{gap:12px;}
  .flow-card{padding:16px 10px 18px;}
  .flow-card-head{margin-bottom:12px;}
  .flow-label{font-size:0.7rem; padding:5px 10px;}
  .flow-badge{font-size:0.75rem; padding:3px 9px;}
  .flow-steps li{font-size:0.86rem; line-height:1.35;}
  .stat-callout{margin-top:40px; padding-left:18px;}
  .workstyle{gap:12px;}
  .workstyle{grid-template-columns:1fr;}
  .workstyle-item{padding:14px 16px; gap:14px;}
  .workstyle-item .icon-circle{width:38px; height:38px;}
  .workstyle-item p{font-size:0.88rem;}
  .faq{padding:4px 18px; margin-top:32px;}
  .faq-question{font-size:0.98rem; padding:18px 0;}
  .faq-answer{padding-right:8px;}

  /* Über mich */
  .about-hero .grid-12{row-gap:20px;}
  .portrait{max-width:200px; padding:10px;}
  .statement{padding-left:18px;}
  .skill-head,.why-head{gap:14px;}
  .skill-head img,.why-head img{width:44px;}
  .skill-head h2{font-size:1.4rem;}

  /* Kontakt */
  /* Handy: Foto links bis zum unteren Rand, Button liegt quer über der ganzen Karte */
  .contact-primary{grid-template-columns:36% minmax(0,1fr); padding:0;}
  .contact-primary > :not(.contact-photo){margin-left:16px; margin-right:16px;}
  .contact-primary-top{margin-top:18px; flex-direction:column; align-items:flex-start; gap:10px;}
  .contact-primary-top .icon-circle{width:40px; height:40px;}
  .contact-primary h2{margin-top:0; font-size:1.15rem;}
  .contact-primary p{font-size:.92rem; margin-top:10px; margin-bottom:18px;}
  .contact-primary .btn{grid-column:1 / -1; grid-row:3; position:relative; z-index:1; justify-self:stretch; width:auto; margin:4px 14px 16px; padding:14px 18px; font-size:.9rem; white-space:nowrap; justify-content:center;}
  .contact-alt{margin-top:16px;}
  .form-card{padding:24px 20px;}
  .form-foot .btn{width:100%;}

  .closing .btn{width:100%;}
}

/* KI-Seite: Faktenkarte oben bündig mit der Überschrift (überschreibt den Versatz der Ablauf-Seite) und etwas breiter, damit sie weniger hoch wird */
.ki-hero .fact-card{margin-top:20px;}
@media (min-width:1200px){ .ki-hero .fact-card{max-width:420px;} }
/* KI-Seite: Abschnittsüberschriften am Desktop einzeilig statt auf 38em begrenzt */
@media (min-width:901px){ .ki-page .section-head{max-width:none;} }
/* Link, der wie normaler Fließtext aussieht (z. B. interner Verweis auf der KI-Seite) */
.plain-link{color:inherit; font-weight:inherit; text-decoration:none;}
/* KI-Seite: Foto als ruhiger Bildstreifen oben in der FAQ-Box; Ausschnitt auf die Hände */
.ki-faq-photo{aspect-ratio:16/5; margin:8px -30px -8px;}  /* Bildstreifen unten in der FAQ-Box */
.ki-faq-photo img{object-position:50% 46%;}  /* oben knapp über Kreis und Glühbirne, unten mit einem Teil der Arme */
@media (max-width:600px){ .ki-faq-photo{aspect-ratio:3/1; margin:4px -18px -4px;} .ki-faq-photo img{object-position:50% 52%;} }
/* KI-Seite: Überschrift am Desktop zweizeilig, jeder Satz in eigener Zeile */
@media (min-width:901px){ .ki-hero h1 .h1-line{display:block;} }
/* Sehr schmale Handys (320 px): „Warum process & people?“ passt sonst nicht in eine Zeile */
@media (max-width:360px){ .why .why-grid h2{font-size:1.1rem;} }

/* Danke-Seite nach dem Kontaktformular */
.legal.danke .btn{margin-top:26px; color:#fff; text-decoration:none; overflow-wrap:normal;}

/* ---------- Zeitfresser-Rechner (Startseite) ---------- */
.hero-stat-link{grid-column:1 / -1; justify-self:stretch; display:flex; align-items:center; justify-content:center; gap:8px; margin:18px 0 4px; padding:10px 16px; border-radius:999px; background:var(--mint-tint); text-align:center; font-size:0.88rem; font-weight:800; line-height:1.2; color:var(--green-deeper); text-decoration:none; transition:background .18s ease, color .18s ease;}
.hero-stat-link span{font-size:1rem; transition:transform .18s ease;}
.hero-stat-link:hover{background:var(--green-dark); color:#fff;}
.hero-stat-link:hover span{transform:translateY(2px);}

.rechner .rechner-titel{margin:0 0 -8px;}  /* Titel oben in der weißen Karte */
.rechner-grid{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,3fr); gap:24px; align-items:stretch;}
.rechner-eingabe{background:var(--white); border:1px solid var(--border); border-radius:24px; box-shadow:var(--shadow-md); padding:34px 34px 28px; display:flex; flex-direction:column; gap:30px;}
.rechner-feld-kopf{display:flex; justify-content:space-between; align-items:baseline; gap:16px; margin-bottom:14px;}
.rechner-feld-kopf label{font-weight:700; color:var(--ink); line-height:1.35;}
.rechner-feld-kopf output{flex:none; font-size:1.5rem; font-weight:800; line-height:1; color:var(--green-dark);}
.rechner-skala{display:flex; justify-content:space-between; margin-top:0; font-size:0.78rem; font-weight:600; color:var(--steel);}
.rechner-hinweis{margin-top:10px; font-size:0.85rem; line-height:1.45; color:var(--body);}
.rechner-annahme{margin-top:auto; padding-top:18px; border-top:1px solid var(--line); font-size:0.85rem; line-height:1.45; color:var(--steel-dark);}

/* Regler in Grün, Füllung bis zum Griff (Wert --p setzt rechner.js) */
.rechner input[type=range]{--p:50%; -webkit-appearance:none; appearance:none; display:block; width:100%; height:28px; margin:0; background:transparent; cursor:pointer;}
.rechner input[type=range]::-webkit-slider-runnable-track{height:8px; border-radius:999px; background:linear-gradient(to right, var(--green) 0 var(--p), var(--mint-tint) var(--p) 100%);}
.rechner input[type=range]::-moz-range-track{height:8px; border-radius:999px; background:var(--mint-tint);}
.rechner input[type=range]::-moz-range-progress{height:8px; border-radius:999px; background:var(--green);}
.rechner input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; appearance:none; width:26px; height:26px; margin-top:-9px; border-radius:50%; background:var(--white); border:4px solid var(--green-dark); box-shadow:0 4px 10px -3px rgba(28,46,93,.35); transition:transform .15s ease;}
.rechner input[type=range]::-moz-range-thumb{width:18px; height:18px; border-radius:50%; background:var(--white); border:4px solid var(--green-dark); box-shadow:0 4px 10px -3px rgba(28,46,93,.35);}
.rechner input[type=range]:active::-webkit-slider-thumb{transform:scale(1.1);}
.rechner input[type=range]:focus-visible{outline:3px solid var(--green); outline-offset:4px;}

.rechner-ergebnis{background:var(--navy); color:#fff; border-radius:24px; box-shadow:var(--shadow-md); padding:34px 30px 28px; display:flex; flex-direction:column; text-align:center;}
.rechner-label{font-size:0.85rem; font-weight:700; line-height:1.35; letter-spacing:.01em; color:var(--mint-deep);}
.rechner-stunden{margin:6px 0 26px; padding-bottom:24px; border-bottom:1px solid rgba(255,255,255,.14); font-size:0.9rem; font-weight:600; line-height:1.1; color:rgba(255,255,255,.75);}
.rechner-stunden span{display:block; margin-top:6px; font-size:clamp(2rem, 3.2vw, 2.4rem); font-weight:800; color:var(--green); letter-spacing:-.01em;}
.rechner-monat{margin-top:6px; font-size:0.9rem; font-weight:600; line-height:1.1; color:rgba(255,255,255,.75);}
.rechner-monat span{display:block; margin-top:6px; font-size:clamp(2.4rem, 4vw, 3rem); font-weight:800; color:#fff; letter-spacing:-.01em;}
.rechner-jahr{margin-top:10px; padding-bottom:26px; font-size:0.95rem; color:rgba(255,255,255,.8);}
.rechner-jahr span{font-weight:700; color:#fff;}
.rechner-ergebnis .btn{margin-top:auto; width:100%; padding:12px 16px; font-size:0.9rem; white-space:normal; text-align:center; background:var(--green-dark); box-shadow:none;}
.rechner-ergebnis .btn:hover{background:var(--green); box-shadow:none;}
.rechner-note{margin-top:12px; text-align:center; font-size:0.78rem; color:rgba(255,255,255,.65);}

@media (max-width:900px){
  .rechner-grid{grid-template-columns:1fr;}
}
/* Tablet: Zeit und Kosten in der blauen Karte nebeneinander */
@media (min-width:601px) and (max-width:900px){
  .rechner-ergebnis{display:grid; grid-template-columns:1fr 1fr; align-items:start;}
  .rechner-block-zeit{padding-right:24px; border-right:1px solid rgba(255,255,255,.14); align-self:stretch;}
  .rechner-block-kosten{padding-left:24px;}
  .rechner-stunden{margin-bottom:0; padding-bottom:0; border-bottom:0;}
  .rechner-stunden span{font-size:clamp(2.4rem, 4vw, 3rem);}
  .rechner-jahr{padding-bottom:0;}
  .rechner-ergebnis .btn,
  .rechner-note{grid-column:1 / -1;}
  .rechner-ergebnis .btn{margin-top:28px; width:auto; justify-self:center; padding:12px 28px;}
}
@media (max-width:600px){
  .rechner-eingabe{padding:24px 20px 22px; gap:26px;}
  .rechner-ergebnis{padding:26px 22px 22px;}
  .rechner-feld-kopf{flex-direction:column; gap:6px;}
  .rechner-feld-kopf output{font-size:1.35rem;}
}
/* Rechner-Überschrift und Einleitung auf großen Bildschirmen je in einer Zeile */
#rechner{padding-top:calc(var(--section-y) * .6);}  /* etwas weniger Abstand zum Abschnitt davor */
#rechner .section-head{max-width:none;}
@media (min-width:901px){ #rechner .section-head h2{white-space:nowrap;} }
@media (min-width:990px){ #rechner .section-head p{white-space:nowrap;} }

/* Link zum Zeitfresser-Rechner auf Unterseiten (gleiche Optik wie in der Zahlenkarte) */
.rechner-link{display:inline-flex; align-items:center; justify-content:center; gap:8px; margin-top:14px; padding:10px 18px; border-radius:999px; background:var(--mint-tint); text-align:center; font-size:0.88rem; font-weight:800; line-height:1.2; color:var(--green-deeper); text-decoration:none; transition:background .18s ease, color .18s ease;}
.rechner-link span{font-size:1rem; transition:transform .18s ease;}
.rechner-link:hover{background:var(--green-dark); color:#fff;}
.rechner-link:hover span{transform:translateX(3px);}
/* in den Karten nur als Textlink über dem Erstgespräch-Button */
.fact-card .rechner-link{display:flex; width:100%; margin:4px 0 16px; padding:14px 0 0; border-radius:0; border-top:1px solid var(--line); background:none; font-size:0.85rem; font-weight:700; color:var(--green-dark);}
.fact-card .rechner-link:hover{background:none; color:var(--green-deeper); text-decoration:underline;}
.why .rechner-link{margin-top:22px;}