/* ==========================================================================
   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:hidden;}
.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 reines Hintergrundmotiv: groß, oben rechts angeschnitten, zurückhaltend */
.hero-logo{
  position:absolute; z-index:0; pointer-events:none;
  top:calc(var(--header-h) - 110px); right:-220px;
  width:680px; height:auto; opacity:.22;
}
.hero-visual{position:relative; padding:56px 0 56px 24px;}
.stat-card{position:relative; z-index:1; background:var(--white); border-radius:24px; box-shadow:var(--shadow-md); padding:30px 30px 26px; max-width:400px; margin-left:auto; text-align:center;}
/* Bildstreifen unten in der Stunden-Karte: nur mobil (<= 600px), am Desktop ausgeblendet */
.hero-photo{display:none;}
.stat-card-title{font-size:0.82rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--steel-dark);}
.stat{padding:18px 0; border-bottom:1px solid var(--line);}
.stat:last-of-type{border-bottom:none;}
.stat-num{display:block; font-size:clamp(2rem, 3.4vw, 2.6rem); font-weight:800; color:var(--green-dark); line-height:1.1;}
.stat-num small{display:block; font-size:0.8rem; font-weight:700; color:var(--ink); text-transform:uppercase; letter-spacing:.05em; margin-bottom:2px;}
.stat-label{display:block; margin-top:4px; font-weight:600; color:var(--ink);}
.stat-note{margin-top:8px; font-size:0.9rem;}
.stat-source{margin-top:10px; font-size:0.75rem; color:#6b7a70; letter-spacing:.02em;}

.approach-grid{align-items:center;}
.approach-photo{aspect-ratio:1;}
.approach-photo img{object-position:60% 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%;}

.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;}
.contact-photo{aspect-ratio:11/3; margin:-32px -32px 26px; background:var(--mint-tint);}
.contact-photo img{width:100%; height:100%; object-fit:cover; object-position:50% 35%;}

.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;}

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

/* >= 1200px: etwas mehr Luft */
@media (min-width:901px){
  /* Startseite: Karte nur so breit wie ihre Überschrift */
  .stat-card{width:min-content;}
  /* Karte leicht tiefer: Oberkante auf Höhe der Überschrift statt der Eyebrow-Zeile */
  .hero-visual .stat-card{top:28px;}
  .stat-card-title{white-space:nowrap;}
  /* 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){
  .hero-visual{padding-left:48px;}
  /* 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-photo{grid-column:1; grid-row:1; width:140px; max-width:none; padding:8px;}
  .approach-photo img{object-position:55% 35%;}
  .hero-logo{width:420px; right:-160px; top:calc(var(--header-h) - 80px); opacity:.18;}
  .stat-card{margin-left:0; max-width:none; display:grid; grid-template-columns:1fr 1fr; column-gap:0;}
  .stat-card-title,.stat-note,.stat-source{grid-column:1 / -1;}
  /* zwei Werte nebeneinander: klar getrennt durch senkrechte Linie */
  .stat{border-bottom:1px solid var(--line); padding-right:28px;}
  .stat + .stat{border-left:1px solid var(--line); padding-left:28px; padding-right:0;}

  .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 .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: Werte untereinander, getrennt durch waagerechte Linie */
  .stat-card{padding:22px 20px 18px; grid-template-columns:1fr;}
  .stat{padding:14px 0; border-bottom:1px solid var(--line);}
  .stat + .stat{border-left:none; padding-left:0;}
  .stat-num{font-size:1.75rem;}
  .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;}
  .contact-photo{aspect-ratio:22/9; margin:-22px -20px 20px;}
  /* schmaler Ausschnitt: Laptop mit Videocall in der Mitte halten */
  .contact-photo img{object-position:48% 40%;}
  .hero .grid-12{row-gap:60px;}  /* mehr Luft zwischen „So läuft’s ab“ und der Karte */
  .hero-visual .stat-card{overflow:hidden;}
  .hero-photo{display:block; grid-column:1 / -1; aspect-ratio:20/9; margin:18px -20px -18px; background:var(--mint-tint);}
  .hero-photo img{width:100%; height:100%; object-fit:cover; object-position:50% 40%;}
  .stat-label{font-size:0.9rem; line-height:1.35;}

  .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 */
  .contact-primary{padding:22px 20px;}
  .contact-primary-top{display:flex; align-items:center; gap:14px;}
  .contact-primary h2{margin-top:0; font-size:1.15rem;}
  .contact-primary .btn{width:100%; margin-top:16px;}
  .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;} }