/* ============================================================
   HUBER CONSULT — Finales Designsystem
   Basis: „Modernes Handwerk". Dunkelblau als wiederkehrende
   Markenfläche (Hero, QM, CTA). Genau ein heller Beige-Grau-Ton
   als zusätzliche Neutralfläche. Desktop-first, ab 1100px abwaerts responsiv.
   Typografie: Source Serif 4 (Display) + Instrument Sans (UI/Text)
   ============================================================ */

:root{
  /* --- Markenfarben (unverändert) --- */
  --navy:#203876;
  --navy-700:#1B2F63;
  --navy-900:#111E42;
  --navy-950:#0B1430;
  --red:#BE1717;            /* auf Weiss 6,32:1 */
  --red-on-dark:#E96E62;    /* auf Navy 5,33:1, nur fuer Text auf dunklem Grund */

  /* --- Neutrale: EIN Beige-Grau, sonst nur Weiß und Tinte --- */
  --white:#FFFFFF;
  --sand:#F8F7F4;          /* der einzige helle Beige-Grau-Ton */
  --ink:#191C22;
  --body:#4C525C;
  --muted:#696F79;          /* auf Weiss 5,06:1, auf Sand 4,72:1 */
  --muted-on-dark:#949CB0;  /* auf Navy 5,93:1, der helle Grauton fuer dunkle Flaechen */
  --line:#E9E7E1;
  --line-strong:#D9D6CE;
  --on-dark:#B9C3DB;
  --line-dark:rgba(255,255,255,.15);

  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --sans:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  --r:6px;
  --r-lg:14px;
  --r-xl:22px;
  --shadow:0 1px 2px rgba(25,28,34,.05), 0 14px 34px -18px rgba(25,28,34,.26);
  --shadow-lg:0 2px 6px rgba(25,28,34,.07), 0 40px 70px -30px rgba(17,30,66,.42);

  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:72px; --s7:104px; --s8:144px;
  --wrap:1240px;
  --hdr:92px;
}

*,*::before,*::after{box-sizing:border-box}
/* Bewusst kein overflow-x auf html: das macht die Wurzel zum Scroll-Container
   und blockiert das Scrollen des Viewports. Horizontaler Ueberlauf wird dort
   begrenzt, wo er entsteht — Hero, dunkle Sections und CTA sind overflow:hidden. */
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--white); color:var(--body);
  font-family:var(--sans); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
/* height:auto ist noetig, sobald die Bilder width/height als Attribut tragen:
   sonst gewinnt die Attributhoehe und jedes aspect-ratio wird ignoriert. */
img{max-width:100%; height:auto; display:block}
a{color:inherit}
button{font:inherit}
:focus-visible{outline:2px solid var(--navy); outline-offset:3px; border-radius:3px}
.sec-dark :focus-visible{outline-color:#fff}
::selection{background:var(--navy); color:#fff}

/* ---------------- Typografie ---------------- */
h1,h2,h3,h4{
  font-family:var(--serif); color:var(--ink); margin:0;
  font-weight:600; line-height:1.12; letter-spacing:-.018em; text-wrap:balance;
}
h1{font-size:clamp(2.6rem,3.6vw,3.85rem); line-height:1.06; letter-spacing:-.025em}
h2{font-size:clamp(2rem,2.7vw,2.85rem)}
h3{font-size:1.32rem; line-height:1.25}
h4{font-family:var(--sans); font-size:1.02rem; font-weight:600; letter-spacing:-.008em; line-height:1.35}
p{margin:0 0 1.05em}
h1+.lead,h2+.lead,h3+.lead{margin-top:var(--s3)}
h1+p,h2+p{margin-top:var(--s3)}
.lead{font-size:clamp(1.08rem,1.25vw,1.24rem); line-height:1.62; color:var(--body); max-width:60ch}
strong{font-weight:600; color:var(--ink)}
em{font-style:italic}
.serif{font-family:var(--serif)}

.eyebrow{
  font-family:var(--sans); font-size:.74rem; font-weight:600; letter-spacing:.15em;
  text-transform:uppercase; color:var(--red); display:flex; align-items:center;
  gap:12px; margin:0 0 var(--s3);
}
.eyebrow::before{content:""; width:26px; height:2px; background:var(--red); flex:none}
.eyebrow.center{justify-content:center}

/* ---------------- Layout ---------------- */
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 40px}
.wrap-text{max-width:840px; margin:0 auto; padding:0 40px}
.sec{padding:var(--s7) 0}
.sec-sm{padding:var(--s6) 0}
.sec-sand{background:var(--sand)}
.sec-dark{background:var(--navy-900); color:var(--on-dark); position:relative; overflow:hidden}
.sec-dark h1,.sec-dark h2,.sec-dark h3,.sec-dark h4{color:#fff}
.sec-dark .lead{color:var(--on-dark)}
.sec-dark strong{color:#fff}
/* Rot traegt auf Dunkelblau nur 2,58:1 und faellt damit durch. Auf dunklen
   Flaechen uebernimmt der aufgehellte Ton, das Markenrot bleibt fuer helle
   Flaechen sowie fuer Striche und Punkte, wo Kontrast keine Rolle spielt.
   Vorher war die Farbe uneinheitlich: im Hero rot, in der QM-Section weiss. */
.sec-dark .eyebrow,.cta-sec .eyebrow,.hero .eyebrow,.page-hero .eyebrow{color:var(--red-on-dark)}
.sec-dark .eyebrow::before,.cta-sec .eyebrow::before,
.hero .eyebrow::before,.page-hero .eyebrow::before{background:var(--red-on-dark)}
.hero .cta-note,.page-hero .crumb,.sec-dark .muted{color:var(--muted-on-dark)}

/* feines Punktraster für dunkle Flächen — aus Richtung 5 übernommen,
   hier deutlich zurückgenommen, damit es warm und nicht technisch wirkt */
.dots::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.4;
  background-image:radial-gradient(rgba(255,255,255,.22) 1px,transparent 1px);
  background-size:28px 28px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 78% 12%,#000,transparent 70%);
  mask-image:radial-gradient(ellipse 80% 70% at 78% 12%,#000,transparent 70%);
}
.sec-dark > *{position:relative; z-index:1}

.grid{display:grid; gap:var(--s4)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.split{display:grid; grid-template-columns:1fr 1fr; gap:var(--s6); align-items:center}
.split-wide{display:grid; grid-template-columns:1.15fr .85fr; gap:var(--s6); align-items:center}
.head-split{display:grid; grid-template-columns:1.05fr .95fr; gap:var(--s6); align-items:end; margin-bottom:var(--s6)}
.sec-head{max-width:64ch; margin-bottom:var(--s6)}
.sec-head.center{margin-left:auto; margin-right:auto; text-align:center}
.sec-head.center .eyebrow{justify-content:center}
.sec-head.center .lead{margin-left:auto; margin-right:auto}

/* ---------------- Header ---------------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:90; height:var(--hdr);
  display:flex; align-items:center; transition:background .3s ease, border-color .3s ease, box-shadow .3s ease;
  background:transparent; border-bottom:1px solid transparent;
}
.site-header.solid{background:rgba(255,255,255,.94); backdrop-filter:saturate(180%) blur(14px);
  border-bottom-color:var(--line); box-shadow:0 1px 0 rgba(25,28,34,.03)}
.hdr{display:flex; align-items:center; gap:var(--s5); width:100%; max-width:var(--wrap); margin:0 auto; padding:0 40px}
.logo-link{flex:none; display:block; line-height:0}
.logo{height:58px; width:auto}
.logo-dark{display:block}
.logo-light{display:none}
.site-header.solid .logo-dark{display:none}
.site-header.solid .logo-light{display:block}

.nav{display:flex; align-items:center; gap:4px; margin-left:auto}
.nav > a,.nav > .has-menu > .menu-trigger{
  display:inline-flex; align-items:center; gap:7px; text-decoration:none; font-size:.95rem;
  font-weight:500; color:rgba(255,255,255,.86); padding:9px 14px; border-radius:var(--r);
  white-space:nowrap; transition:color .2s ease, background .2s ease;
}
.site-header.solid .nav > a,.site-header.solid .nav > .has-menu > .menu-trigger{color:var(--ink)}
.nav > a:hover,.nav > .has-menu > .menu-trigger:hover{color:#fff; background:rgba(255,255,255,.1)}
.site-header.solid .nav > a:hover,.site-header.solid .nav > .has-menu > .menu-trigger:hover{color:var(--navy); background:var(--sand)}
.nav a.current{font-weight:600}
.nav .caret{width:9px; height:9px; border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor;
  transform:translateY(-2px) rotate(45deg); opacity:.6; transition:transform .2s ease}
.menu-trigger{background:none; border:0; font:inherit; cursor:pointer}
.menu-trigger[aria-expanded="true"] .caret{transform:translateY(0) rotate(225deg)}

.hdr-cta{
  margin-left:var(--s2); display:inline-flex; align-items:center; gap:9px; text-decoration:none;
  font-size:.93rem; font-weight:600; padding:12px 20px; border-radius:var(--r);
  background:#fff; color:var(--navy-900); transition:background .2s ease,color .2s ease;
}
.hdr-cta:hover{background:var(--sand)}
.site-header.solid .hdr-cta{background:var(--navy); color:#fff}
.site-header.solid .hdr-cta:hover{background:var(--navy-700)}

/* Mega-Menü Leistungen */
.has-menu{position:relative}
.menu{
  position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%) translateY(-6px);
  width:660px; background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg); padding:var(--s3); opacity:0; visibility:hidden;
  transition:opacity .2s ease, transform .2s ease; display:grid; grid-template-columns:1fr 1fr; gap:6px;
}
/* Die 10 Pixel zwischen Auslöser und Panel sind eine tote Zone: der Zeiger
   verliert dort beide Elemente. Das Pseudoelement ueberbrueckt sie, damit die
   Maus das Menue erreicht, ohne dass es zwischendurch schliesst. */
.menu::before{content:""; position:absolute; left:0; right:0; top:-12px; height:12px}
/* Ohne JavaScript bleibt das Menue ueber Hover und Tastaturfokus erreichbar.
   Sobald das Skript laeuft, steuert es den Zustand und bringt die Verzoegerung
   beim Schliessen mit. */
.has-menu:hover > .menu,
.has-menu:focus-within > .menu,
.has-menu.open > .menu{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0)}
.js .has-menu:hover > .menu,
.js .has-menu:focus-within > .menu{opacity:0; visibility:hidden; transform:translateX(-50%) translateY(-6px)}
.js .has-menu.open > .menu{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0)}
.has-menu:hover .caret{transform:translateY(0) rotate(225deg)}
.js .has-menu:hover .caret{transform:translateY(-2px) rotate(45deg)}
.js .menu-trigger[aria-expanded="true"] .caret{transform:translateY(0) rotate(225deg)}
.menu a{
  display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start; padding:13px 14px;
  border-radius:var(--r); text-decoration:none; transition:background .18s ease;
}
.menu a:hover{background:var(--sand)}
.menu a .mi{width:34px; height:34px; border-radius:8px; background:rgba(32,56,118,.08); display:grid; place-items:center; flex:none}
.menu a .mi svg{width:17px; height:17px; stroke:var(--navy); fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.menu b{display:block; font-size:.94rem; font-weight:600; color:var(--ink); margin-bottom:2px}
.menu span{display:block; font-size:.83rem; color:var(--muted); line-height:1.45}
.menu a.feature{grid-column:1/-1; background:var(--navy-900); color:#fff; align-items:center}
.menu a.feature:hover{background:var(--navy-700)}
.menu a.feature .mi{background:rgba(255,255,255,.14)}
.menu a.feature .mi svg{stroke:#fff}
.menu a.feature b{color:#fff}
.menu a.feature span{color:var(--on-dark)}

/* ---------------- Buttons ---------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px; font-family:var(--sans);
  font-size:1rem; font-weight:600; text-decoration:none; padding:15px 28px; border-radius:var(--r);
  border:1.5px solid transparent; cursor:pointer; letter-spacing:-.006em;
  transition:background .2s ease,border-color .2s ease,color .2s ease,transform .2s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn .arw{transition:transform .2s ease}
.btn:hover .arw{transform:translateX(3px)}
.btn-primary{background:var(--navy); color:#fff}
.btn-primary:hover{background:var(--navy-700)}
.btn-ghost{background:transparent; color:var(--navy); border-color:var(--line-strong)}
.btn-ghost:hover{border-color:var(--navy); background:var(--sand)}
.btn-light{background:#fff; color:var(--navy-900)}
.btn-light:hover{background:var(--sand)}
.btn-outline-light{background:transparent; color:#fff; border-color:rgba(255,255,255,.38)}
.btn-outline-light:hover{background:rgba(255,255,255,.12)}
.btn-lg{padding:18px 34px; font-size:1.06rem}
.btn-row{display:flex; flex-wrap:wrap; gap:14px; align-items:center}
.cta-note{font-size:.9rem; color:var(--muted); margin:0}
.sec-dark .cta-note{color:var(--on-dark)}
.tlink{
  display:inline-flex; align-items:center; gap:9px; text-decoration:none; font-weight:600;
  font-size:.95rem; color:var(--navy); border-bottom:1.5px solid var(--line-strong); padding-bottom:4px;
  transition:border-color .2s ease,gap .2s ease;
}
.tlink:hover{border-color:var(--navy); gap:13px}
.sec-dark .tlink{color:#fff; border-color:rgba(255,255,255,.35)}
.sec-dark .tlink:hover{border-color:#fff}

/* ---------------- Hero ---------------- */
.hero{background:var(--navy-900); color:var(--on-dark); position:relative; overflow:hidden;
  padding:calc(var(--hdr) + var(--s5)) 0 var(--s6)}
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.45;
  background-image:radial-gradient(rgba(255,255,255,.24) 1px,transparent 1px);
  background-size:30px 30px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 88% 8%,#000,transparent 68%);
  mask-image:radial-gradient(ellipse 70% 60% at 88% 8%,#000,transparent 68%);
}
.hero::after{
  content:""; position:absolute; left:-12%; bottom:-45%; width:60%; aspect-ratio:1;
  border-radius:50%; background:radial-gradient(circle,rgba(32,56,118,.55),transparent 66%); pointer-events:none;
}
.hero > *{position:relative; z-index:1}
.hero h1{color:#fff}
.hero .lead{color:var(--on-dark); max-width:52ch}
.hero-grid{display:grid; grid-template-columns:1.06fr .94fr; gap:var(--s6); align-items:center}
.hero-media{position:relative}
.hero-media img{border-radius:var(--r-lg); aspect-ratio:4/3.35; object-fit:cover; width:100%;
  box-shadow:0 40px 80px -34px rgba(0,0,0,.7)}
.hero-chip{
  position:absolute; left:-26px; bottom:30px; background:var(--white); border-radius:var(--r-lg);
  padding:18px 22px; box-shadow:var(--shadow-lg); max-width:238px; border-left:3px solid var(--red);
}
.hero-chip b{display:block; font-family:var(--serif); font-size:2.1rem; line-height:1; color:var(--navy); font-weight:600}
.hero-chip span{display:block; font-size:.85rem; color:var(--muted); line-height:1.45; margin-top:6px}
/* Startseite: Karte ragt unten ueber das Foto hinaus. Das Polster unter dem
   Bild gleicht den Ueberstand aus, damit Foto und Karte gemeinsam zur
   Textspalte zentriert sind. */
.hero-chip--dezent{padding:15px 22px; max-width:none; width:max-content; bottom:0; left:-22px; border-radius:12px}
.hero-chip--dezent b{font-family:var(--sans); font-size:1.12rem; font-weight:600; line-height:1.2}
.hero-chip--dezent span{font-size:.88rem; margin-top:4px; line-height:1.4}
.hero-media:has(.hero-chip--dezent){padding-bottom:36px}
.hero-facts{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4); margin-top:var(--s5);
  padding-top:var(--s4); border-top:1px solid var(--line-dark)}
.hero-facts b{display:block; font-family:var(--serif); font-size:1.5rem; color:#fff; line-height:1; font-weight:600}
.hero-facts span{display:block; font-size:.84rem; color:var(--on-dark); margin-top:7px; line-height:1.45}

/* ---------------- Trust ---------------- */
.trustbar{background:var(--white); border-bottom:1px solid var(--line); padding:var(--s4) 0}
.trustbar-inner{display:flex; align-items:center; gap:var(--s5); justify-content:space-between; flex-wrap:wrap}
.trustbar p{margin:0; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:600}
.logos{display:flex; align-items:center; gap:46px; flex-wrap:wrap}
.logos img{height:44px; width:auto; opacity:.82; transition:opacity .25s ease}
.logos img:hover{opacity:1}

/* ---------------- Karten ---------------- */
.card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s4);
  display:flex; flex-direction:column; transition:box-shadow .25s ease, transform .25s ease, border-color .25s ease;
  text-decoration:none;
}
a.card:hover,.card.hoverable:hover{box-shadow:var(--shadow); transform:translateY(-3px); border-color:var(--line-strong)}
.sec-sand .card{background:var(--white)}
.card h3{margin-bottom:10px}
/* .card-meta ist ein p und wurde von .card p ueberschrieben: gleiche Klasse,
   aber ein Element mehr im Selektor. Daher hier .card p.card-meta. */
.card p.card-meta{
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--s2);
  font-size:.72rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); margin:0 0 20px; padding-bottom:13px;
  border-bottom:1px solid var(--line); line-height:1.3;
}
.card p.card-meta b{color:var(--ink); font-weight:600}
.card p.card-meta span{flex:none; color:var(--muted); font-variant-numeric:tabular-nums}
/* zwei Zeilen reservieren, damit die Fliesstexte aller Kacheln auf einer Linie beginnen */
.card-meta + h3{font-size:1.36rem; line-height:1.24; margin-bottom:14px; min-height:2.48em}
.card p{font-size:.97rem; color:var(--body); margin-bottom:0}
.card .more{margin-top:auto; padding-top:var(--s3); font-size:.93rem; font-weight:600; color:var(--navy);
  display:inline-flex; gap:8px; align-items:center; transition:gap .2s ease}
a.card:hover .more{gap:13px}
.ico{width:46px; height:46px; border-radius:11px; background:rgba(32,56,118,.075); display:grid;
  place-items:center; margin-bottom:var(--s3); flex:none}
.ico svg{width:22px; height:22px; stroke:var(--navy); fill:none; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round}
.sec-dark .ico{background:rgba(255,255,255,.12)}
.sec-dark .ico svg{stroke:#fff}

/* Leistungen: Fotokarten, QM als Schwerpunkt markiert */
.services{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4)}
.svc{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  display:flex; flex-direction:column; text-decoration:none;
  transition:box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.svc:hover{box-shadow:var(--shadow); transform:translateY(-3px); border-color:var(--line-strong)}
.svc-img{position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--sand)}
.svc-img img{width:100%; height:100%; object-fit:cover; transition:transform .55s cubic-bezier(.2,.7,.3,1)}
.svc:hover .svc-img img{transform:scale(1.045)}
.svc-badge{
  position:absolute; left:16px; top:16px; display:inline-flex; align-items:center; gap:9px;
  background:var(--navy-900); color:#fff; border-radius:999px; padding:8px 15px;
  font-size:.68rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
}
.svc-badge .dot{width:6px; height:6px; border-radius:50%; background:var(--red); flex:none}
.svc-body{padding:var(--s4); display:flex; flex-direction:column; flex:1}
.svc h3{margin-bottom:11px}
.svc p{font-size:.97rem; color:var(--body); margin:0}
.svc .more{
  margin-top:auto; padding-top:var(--s4); font-size:.93rem; font-weight:600; color:var(--navy);
  display:inline-flex; gap:8px; align-items:center; transition:gap .2s ease;
}
.svc:hover .more{gap:13px}
.svc.is-focus{border-color:var(--navy); box-shadow:0 0 0 1px var(--navy)}

/* Person: links Bild + kompaktes Zitat, rechts Vita — in der Hoehe ausgeglichen */
.person{display:grid; grid-template-columns:.88fr 1.12fr; gap:var(--s6); align-items:start}
.person-media img{
  width:100%; aspect-ratio:5/4; object-fit:cover; object-position:50% 50%;
  border-radius:var(--r-lg); box-shadow:var(--shadow);
}
.quote-sm{
  margin-top:var(--s3); background:var(--sand); border:1px solid var(--line);
  border-left:3px solid var(--red); border-radius:var(--r-lg); padding:var(--s4);
}
.quote-sm blockquote{
  margin:0 0 var(--s3); font-family:var(--serif); font-size:1.14rem; line-height:1.42;
  color:var(--ink); font-weight:600; letter-spacing:-.012em;
}
.quote-sm .byline b{font-size:.92rem}
.quote-sm .byline span{font-size:.83rem}
.quote-sm .avatar{width:42px; height:42px}

/* Expertise: Nachweiszeilen. Marken stehen frei auf der Flaeche,
   keine Kacheln — das nimmt der Liste die Unruhe. */
.creds{border-top:1px solid var(--line)}
.cred{
  display:grid; grid-template-columns:132px minmax(0,1fr); gap:var(--s5);
  /* 44px statt 32px: gleicht die Spaltenhoehe an die linke Spalte an
     und gibt der Liste gleichzeitig mehr Luft */
  align-items:start; padding:44px 0; border-bottom:1px solid var(--line);
}
/* Marke und Text beginnen beide oben, nicht vertikal zentriert */
.cred-mark{display:flex; align-items:flex-start; justify-content:flex-start; padding-top:3px}
/* Querformat-Logos in der Breite begrenzen, das hochformatige Cover in der Hoehe,
   damit alle Marken optisch etwa gleich schwer wiegen */
.cred-mark img{max-height:60px; max-width:118px; width:auto; height:auto; object-fit:contain}
.cred-mark.cover img{max-height:78px; max-width:74px}
.cred-mark .wm{
  font-family:var(--serif); font-size:1.55rem; font-weight:600; color:var(--ink);
  letter-spacing:-.025em; line-height:1;
}
.cred-lbl{
  display:block; font-size:.68rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase;
  color:var(--muted); margin-bottom:8px;
}
.cred b{
  display:block; font-family:var(--serif); font-size:1.18rem; font-weight:600; color:var(--ink);
  letter-spacing:-.014em; line-height:1.25; margin-bottom:7px;
}
.cred span.txt{display:block; font-size:.94rem; color:var(--body); line-height:1.55}

/* Video: Titel und Video tragen die Section allein */
.video-wide{max-width:1040px; margin:0 auto}
.video-meta{
  display:flex; justify-content:center; gap:var(--s3); flex-wrap:wrap; margin:var(--s3) 0 0;
  font-size:.88rem; color:var(--muted);
}
.video-meta span{display:inline-flex; align-items:center; gap:8px}
.video-meta span::before{content:""; width:5px; height:5px; border-radius:50%; background:var(--red); flex:none}

/* Formular in der CTA-Section */
.form-card{background:var(--white); border-radius:var(--r-lg); padding:var(--s5); box-shadow:var(--shadow-lg)}
.field{margin-bottom:16px}
.field label{display:block; font-size:.84rem; font-weight:600; color:var(--ink); margin-bottom:7px}
.field input,.field select,.field textarea{
  width:100%; font-family:var(--sans); font-size:1rem; padding:13px 15px; color:var(--ink);
  border:1px solid var(--line-strong); border-radius:var(--r); background:var(--white);
}
.field textarea{resize:vertical; min-height:88px}
.field input::placeholder,.field textarea::placeholder{color:#A7A9AE}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--navy); outline-offset:0; border-color:var(--navy)}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:0 16px}
/* Zeilenabstand kommt allein aus .field{margin-bottom}, sonst doppelt, sobald die Felder untereinander stehen */
.consent{display:flex; gap:11px; align-items:flex-start; font-size:.84rem; color:var(--muted); line-height:1.55; margin:18px 0}
.consent input{margin-top:4px; flex:none}
.cta-phone{margin-top:var(--s5); padding-top:var(--s4); border-top:1px solid var(--line-dark)}
.cta-phone p{margin:0 0 6px; font-size:.9rem; color:var(--on-dark)}
.cta-phone a{font-family:var(--serif); font-size:1.75rem; font-weight:600; color:#fff; text-decoration:none; letter-spacing:-.02em}
.cta-phone a:hover{text-decoration:underline}

/* ---------------- Listen ---------------- */
.ticks{list-style:none; margin:0; padding:0; display:grid; gap:13px}
.ticks li{display:flex; gap:13px; align-items:flex-start; font-size:1rem; line-height:1.55}
.ticks li::before{
  content:""; flex:none; width:21px; height:21px; margin-top:3px; border-radius:50%;
  background:rgba(32,56,118,.09);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23203876' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-position:center; background-size:12px; background-repeat:no-repeat;
}
/* auch in der Kontaktsektion: navy Haken auf navy Grund waren kaum sichtbar */
.sec-dark .ticks li::before,.cta-sec .ticks li::before{
  background-color:rgba(255,255,255,.15);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
.dashes{list-style:none; margin:0; padding:0}
.dashes li{padding:15px 0 15px 30px; border-bottom:1px solid var(--line); position:relative; font-size:1rem; line-height:1.6}
.dashes li:first-child{border-top:1px solid var(--line)}
.dashes li::before{content:""; position:absolute; left:0; top:26px; width:16px; height:1.5px; background:var(--red)}
.sec-dark .dashes li{border-color:var(--line-dark); color:var(--on-dark)}

/* ---------------- Ablauf ---------------- */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s4); counter-reset:st; position:relative}
.steps::before{content:""; position:absolute; left:0; right:0; top:23px; height:1px; background:var(--line)}
.sec-dark .steps::before{background:var(--line-dark)}
.step{position:relative; padding-top:var(--s6)}
.step::before{
  counter-increment:st; content:counter(st,decimal-leading-zero); position:absolute; top:0; left:0;
  width:46px; height:46px; border-radius:50%; background:var(--white); border:1.5px solid var(--navy);
  color:var(--navy); font-family:var(--serif); font-size:.95rem; font-weight:600; display:grid; place-items:center;
}
.sec-dark .step::before{background:var(--navy-900); border-color:rgba(255,255,255,.4); color:#fff}
.sec-sand .step::before{background:var(--sand)}
.step h4{margin-bottom:9px}
.step p{font-size:.95rem; margin:0}

/* ---------------- Zahlen ---------------- */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s4)}
.stat{border-top:2px solid var(--red); padding-top:var(--s3)}
.stat b{display:block; font-family:var(--serif); font-size:clamp(2.1rem,3vw,2.9rem); line-height:1;
  color:var(--navy); font-weight:600}
.sec-dark .stat b{color:#fff}
.stat span{display:block; margin-top:11px; font-size:.92rem; color:var(--muted); line-height:1.45}
.sec-dark .stat span{color:var(--on-dark)}

/* ---------------- Zitat / Person ---------------- */
.quote{background:var(--white); border:1px solid var(--line); border-left:3px solid var(--red);
  border-radius:var(--r-lg); padding:var(--s5); box-shadow:var(--shadow)}
.sec-dark .quote{background:rgba(255,255,255,.06); border-color:var(--line-dark); border-left-color:var(--red); box-shadow:none}
.quote blockquote{margin:0 0 var(--s3); font-family:var(--serif); font-size:clamp(1.3rem,1.9vw,1.65rem);
  line-height:1.38; color:var(--ink); font-weight:600; letter-spacing:-.015em}
.sec-dark .quote blockquote{color:#fff}
.byline{display:flex; align-items:center; gap:14px}
.avatar{width:52px; height:52px; border-radius:50%; object-fit:cover; flex:none; border:1px solid var(--line)}
.byline b{display:block; font-size:.97rem; color:var(--ink); font-weight:600}
.byline span{font-size:.87rem; color:var(--muted)}
.sec-dark .byline b{color:#fff}
.sec-dark .byline span{color:var(--on-dark)}

/* ---------------- Video ---------------- */
.video-card{position:relative; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-lg);
  cursor:pointer; display:block; border:0; padding:0; background:none; width:100%}
.video-card img{width:100%; aspect-ratio:16/9; object-fit:cover; transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.video-card:hover img{transform:scale(1.03)}
.video-card::after{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(11,20,48,.05) 0%,rgba(11,20,48,.55) 100%)}
.video-play{
  position:absolute; z-index:2; left:26px; bottom:26px; display:flex; align-items:center; gap:14px;
  background:rgba(255,255,255,.95); border-radius:999px; padding:10px 22px 10px 12px;
  transition:background .2s ease, gap .2s ease;
}
.video-card:hover .video-play{background:#fff; gap:17px}
.video-play .tri{width:38px; height:38px; border-radius:50%; background:var(--navy); display:grid; place-items:center; flex:none}
.video-play .tri svg{width:14px; height:14px; fill:#fff; margin-left:2px}
.video-play b{display:block; font-size:.94rem; font-weight:600; color:var(--ink)}
.video-play span{display:block; font-size:.8rem; color:var(--muted)}
.video-card.small .video-play{left:18px; bottom:18px; padding:8px 18px 8px 10px}
.video-card.small .video-play .tri{width:32px; height:32px}

/* Modal */
.modal{position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center; padding:44px}
.modal.open{display:flex}
.modal-bg{position:absolute; inset:0; background:rgba(11,20,48,.86); backdrop-filter:blur(6px)}
.modal-inner{position:relative; width:min(1060px,100%); z-index:1}
.modal-head{display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s4); margin-bottom:16px}
.modal-head h3{color:#fff; font-size:1.35rem}
.modal-head p{margin:5px 0 0; font-size:.88rem; color:var(--on-dark)}
.modal-close{background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.24); color:#fff;
  width:42px; height:42px; border-radius:50%; cursor:pointer; display:grid; place-items:center; flex:none;
  transition:background .2s ease}
.modal-close:hover{background:rgba(255,255,255,.24)}
.modal-close svg{width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round}
.modal-stage{background:#000; border-radius:var(--r-lg); overflow:hidden; aspect-ratio:16/9; position:relative}
.modal-stage video{width:100%; height:100%; display:block; object-fit:contain; background:#000}
.ext{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:var(--s3); text-align:center; padding:var(--s5); background-size:cover; background-position:center}
.ext::before{content:""; position:absolute; inset:0; background:rgba(11,20,48,.82)}
.ext > *{position:relative}
.ext p{max-width:46ch; color:var(--on-dark); font-size:.95rem; margin:0}

/* ---------------- Phoenix / Expert Proof ---------------- */
.proof{display:grid; grid-template-columns:1.1fr .9fr; gap:var(--s6); align-items:center}
.proof-quote{font-family:var(--serif); font-size:clamp(1.6rem,2.35vw,2.25rem); line-height:1.28;
  color:var(--ink); font-weight:600; letter-spacing:-.02em; margin:0 0 var(--s4)}
.sec-dark .proof-quote{color:#fff}
.proof-src{display:flex; align-items:center; gap:16px; padding-top:var(--s3); border-top:1px solid var(--line)}
.sec-dark .proof-src{border-color:var(--line-dark)}
.proof-src .mark{font-family:var(--serif); font-weight:700; font-size:1.05rem; letter-spacing:.02em;
  color:var(--ink); border:1.5px solid var(--line-strong); border-radius:var(--r); padding:6px 12px}
.sec-dark .proof-src .mark{color:#fff; border-color:rgba(255,255,255,.35)}
.panel-list{display:grid; gap:11px; margin-top:var(--s4)}
.panel-list div{display:grid; grid-template-columns:auto 1fr; gap:12px; font-size:.94rem; align-items:baseline}
.panel-list b{color:var(--ink); font-weight:600; white-space:nowrap}
.sec-dark .panel-list b{color:#fff}
.panel-list span{color:var(--muted)}
.sec-dark .panel-list span{color:var(--on-dark)}

/* ---------------- Branchen ---------------- */
/* Branchen: Aufzaehlung, bewusst ohne Verweis und ohne Schaltflaechen-Optik */
.chips{display:flex; flex-wrap:wrap; gap:10px; list-style:none; margin:0; padding:0}
.chip{display:inline-flex; align-items:center; gap:9px; color:var(--ink);
  font-size:.93rem; font-weight:500; padding:2px 0; margin-right:14px}
.chip .dot{width:6px; height:6px; border-radius:50%; background:var(--red); flex:none}

/* ---------------- FAQ ---------------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer; list-style:none; padding:var(--s3) 52px var(--s3) 0; position:relative;
  font-family:var(--serif); font-size:1.2rem; font-weight:600; color:var(--ink); letter-spacing:-.012em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:""; position:absolute; right:10px; top:50%; width:11px; height:11px;
  border-right:2px solid var(--navy); border-bottom:2px solid var(--navy);
  transform:translateY(-70%) rotate(45deg); transition:transform .2s ease}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq .faq-body{padding:0 var(--s6) var(--s4) 0; color:var(--body); font-size:1rem; max-width:74ch}
.faq .faq-body p:last-child{margin-bottom:0}

/* ---------------- Callout / Notiz ---------------- */
.callout{background:var(--sand); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s4);
  display:flex; gap:var(--s3); align-items:flex-start}
.callout .ico{margin:0; background:rgba(32,56,118,.09)}
.callout h4{margin-bottom:7px}
.callout p{margin:0; font-size:.96rem}
.sec-dark .callout{background:rgba(255,255,255,.06); border-color:var(--line-dark)}

/* ---------------- CTA-Section ---------------- */
.cta-sec{position:relative; overflow:hidden; background:var(--navy-900); color:var(--on-dark); padding:var(--s8) 0}
.cta-grid{display:grid; grid-template-columns:1fr 1fr; gap:var(--s6); align-items:center}
.cta-sec h2{color:#fff; max-width:17ch}

/* ---------------- Unterseiten-Rail ---------------- */
.page-hero{background:var(--navy-900); color:var(--on-dark); position:relative; overflow:hidden;
  padding:calc(var(--hdr) + var(--s6)) 0 var(--s6)}
.page-hero > *{position:relative; z-index:1}
.page-hero h1{color:#fff; max-width:20ch}
.page-hero .lead{color:var(--on-dark)}
.crumb{font-size:.86rem; color:var(--on-dark); margin:0 0 var(--s3); opacity:.85}
.crumb a{text-decoration:none}
.crumb a:hover{color:#fff; text-decoration:underline}
.layout{display:grid; grid-template-columns:236px minmax(0,1fr); gap:var(--s7); align-items:start}
.rail{position:sticky; top:calc(var(--hdr) + 24px)}
.rail h5{font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:0 0 16px; font-weight:600}
.rail ul{list-style:none; margin:0; padding:0; display:grid; gap:2px; border-left:1px solid var(--line)}
/* nur die Sprungmarken der Liste, nicht der Button darunter */
.rail ul a{display:block; padding:10px 0 10px 20px; margin-left:-1px; border-left:2px solid transparent;
  text-decoration:none; font-size:.93rem; color:var(--muted); line-height:1.4; transition:color .2s ease}
.rail ul a:hover{color:var(--navy)}
.rail ul a.on{border-left-color:var(--red); color:var(--ink); font-weight:600}
/* Abstand zwischen den Sektionen der Leistungsunterseiten: die Trennlinie
   gliedert schon, deshalb reichen je 48px darueber und darunter */
.block{padding-bottom:var(--s5); border-bottom:1px solid var(--line); margin-bottom:var(--s5)}
.block:last-child{border-bottom:0; margin-bottom:0; padding-bottom:0}

/* Fachliche Detailbausteine für Unterseiten */
.deftable{width:100%; border-collapse:collapse; font-size:.97rem; margin-top:var(--s4)}
.deftable th{text-align:left; font-size:.72rem; letter-spacing:.13em; text-transform:uppercase; color:var(--muted);
  font-weight:600; padding:0 18px 12px 0; border-bottom:2px solid var(--navy)}
.deftable td{padding:16px 18px 16px 0; border-bottom:1px solid var(--line); vertical-align:top}
.deftable td:first-child{font-weight:600; color:var(--ink); width:30%}
.bars{background:var(--sand); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s4); margin-top:var(--s4)}
.bar{display:grid; grid-template-columns:150px 1fr 58px; gap:16px; align-items:center; margin-bottom:12px; font-size:.93rem}
.bar:last-of-type{margin-bottom:0}
.bar .track{height:22px; background:rgba(32,56,118,.09); border-radius:4px; overflow:hidden}
.bar .fill{height:100%; border-radius:4px; background:var(--navy)}
.bar .fill.mid{background:#7E8CAF}
.bar .fill.warn{background:var(--red)}
.bar b{text-align:right; font-variant-numeric:tabular-nums; color:var(--ink); font-weight:600}
.barcap{font-size:.88rem; color:var(--muted); line-height:1.6; margin:var(--s3) 0 0; padding-top:var(--s3);
  border-top:1px solid var(--line)}

/* ---------------- Footer ---------------- */
.foot{background:var(--navy-950); color:var(--on-dark); padding:var(--s6) 0 var(--s4); font-size:.94rem}
.foot-grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:var(--s5); margin-bottom:var(--s5)}
.foot h5{font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:#fff; margin:0 0 16px; font-weight:600}
.foot ul{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.foot a{color:var(--on-dark); text-decoration:none; transition:color .2s ease}
.foot a:hover{color:#fff}
.foot .logo{height:64px; margin-bottom:var(--s3)}
.foot-bottom{border-top:1px solid var(--line-dark); padding-top:var(--s3); display:flex; gap:var(--s3);
  flex-wrap:wrap; justify-content:space-between; font-size:.86rem}


/* ---------------- Förderung: kompaktes Band ---------------- */
.funding{
  display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr); gap:var(--s5);
  align-items:center; background:var(--sand); border:1px solid var(--line);
  border-left:3px solid var(--red); border-radius:var(--r-lg); padding:var(--s4) var(--s5);
}
.sec-sand .funding{background:var(--white)}
.funding h3{font-size:1.34rem; margin-bottom:8px}
.funding > div > p{font-size:.96rem; color:var(--body); margin:0 0 var(--s3)}
.tags{display:flex; flex-wrap:wrap; gap:8px; margin:0}
.tags span{
  display:inline-flex; align-items:center; gap:8px; background:var(--white);
  border:1px solid var(--line-strong); border-radius:999px; padding:6px 13px;
  font-size:.81rem; font-weight:500; color:var(--ink); white-space:nowrap;
}
.sec-sand .tags span{background:var(--sand)}
.tags span::before{content:""; width:5px; height:5px; border-radius:50%; background:var(--red); flex:none}
.funding-side{border-left:1px solid var(--line); padding-left:var(--s5)}
/* nur die direkten Kinder: sonst erwischt der Selektor auch das Pfeil-Span im Button */
.funding-side > b{
  display:block; font-family:var(--serif); font-size:2.5rem; font-weight:600; color:var(--navy);
  line-height:1; letter-spacing:-.03em;
}
.funding-side > span{display:block; margin:10px 0 var(--s3); font-size:.85rem; color:var(--muted); line-height:1.4}
.funding-side .btn{width:100%; padding:13px 18px; font-size:.93rem; white-space:nowrap}


/* ============================================================
   Zugänglichkeit
   ============================================================ */
.skip-link{
  position:absolute; top:0; left:0; z-index:200;
  background:var(--navy); color:#fff; padding:14px 22px; border-radius:0 0 var(--r) 0;
  font-size:.94rem; font-weight:600; text-decoration:none;
  /* verschiebt nicht nach links: das wuerde die Dokumentbreite aufblaehen */
  transform:translateY(-110%);
}
.skip-link:focus{transform:none}
.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ============================================================
   Navigation für kleine Viewports
   ============================================================ */
.nav-toggle{
  display:none; width:44px; height:44px; margin-left:var(--s2); padding:0;
  background:none; border:0; cursor:pointer; flex-direction:column;
  justify-content:center; gap:5px; align-items:stretch;
}
.nav-toggle span{
  display:block; height:2px; background:#fff; border-radius:2px;
  transition:transform .22s ease, opacity .16s ease;
}
.site-header.solid .nav-toggle span{background:var(--ink)}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ============================================================
   Formulare: Zustände für echte Eingaben
   ============================================================ */
.field input:user-invalid,
.field textarea:user-invalid{border-color:var(--red)}
.field input::placeholder,
.field textarea::placeholder{color:var(--muted)}
.form-note{margin:var(--s2) 0 0; font-size:.82rem; color:var(--muted); line-height:1.5}
.form-note a{color:var(--navy); font-weight:500}

/* Klick-zum-Laden statt automatischer Einbettung: vor der Einwilligung
   wird keine Verbindung zu YouTube aufgebaut. */
.embed-consent{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:var(--s3); text-align:center; padding:var(--s5); height:100%;
  background:var(--navy-950); color:var(--on-dark);
}
.embed-consent p{max-width:46ch; margin:0; font-size:.95rem}

/* ============================================================
   Responsiv
   ============================================================ */
@media (max-width:1180px){
  .wrap,.hdr{padding-left:26px; padding-right:26px}
  .nav{gap:0}
  .nav > a,.nav > .has-menu > .menu-trigger{padding:10px 12px; font-size:.92rem}
}

@media (max-width:1024px){
  :root{--hdr:78px; --s6:56px; --s7:76px; --s8:96px}
  .nav-toggle{display:flex}
  .nav{
    position:fixed; inset:var(--hdr) 0 auto; display:none; flex-direction:column;
    align-items:stretch; gap:0; margin:0; padding:var(--s3) 26px var(--s5);
    background:var(--white); border-bottom:1px solid var(--line);
    box-shadow:var(--shadow-lg); max-height:calc(100vh - var(--hdr)); overflow-y:auto;
  }
  .nav.open{display:flex}
  .nav > a,.nav > .has-menu > .menu-trigger{
    color:var(--ink); padding:14px 4px; font-size:1.02rem;
    border-bottom:1px solid var(--line); border-radius:0;
  }
  .nav > a:hover,.nav > .has-menu > .menu-trigger:hover{color:var(--navy); background:transparent}
  .has-menu > .menu-trigger{width:100%; text-align:left; justify-content:flex-start}
  .has-menu > .menu-trigger .caret{display:none}
  /* in der Schublade ist das Untermenue immer aufgeklappt */
  .nav .has-menu > .menu{opacity:1; visibility:visible; transform:none}
  .menu::before{display:none}
  .menu{
    position:static; display:block; opacity:1; visibility:visible; transform:none;
    box-shadow:none; border:0; padding:var(--s2) 0 var(--s2) var(--s2);
    min-width:0; width:auto; background:transparent;
  }
  /* Seitlicher Innenabstand, damit das Symbol beim hervorgehobenen Punkt
     im blauen Feld liegt; alle Symbole stehen dadurch auf einer Linie */
  .menu a{padding:10px 14px}
  .hdr-cta{margin-left:auto; padding:10px 16px; font-size:.9rem}
  .hero-grid,.split,.split-wide,.head-split,.proof,.cta-grid,.services,.person,
  .g4,.g3,.funding{grid-template-columns:1fr}
  .services{gap:var(--s3)}
  .layout{grid-template-columns:1fr; gap:var(--s5)}
  .rail{position:static}
  .rail ul{display:flex; flex-wrap:wrap; gap:var(--s2)}
  .funding-side{border-left:0; padding-left:0; padding-top:var(--s3); border-top:1px solid var(--line)}
  .hero-media img{aspect-ratio:16/9}
  .video-wide{grid-template-columns:1fr}
}

@media (max-width:760px){
  :root{--s5:36px; --s6:48px; --s7:60px; --s8:72px}
  body{font-size:16px}
  .wrap,.hdr{padding-left:20px; padding-right:20px}
  .hdr-cta{display:none}
  .stats,.steps,.g2,.field-row,.hero-facts{grid-template-columns:1fr}
  .steps::before{display:none}
  .step{padding-top:0; padding-left:56px}
  .cred{grid-template-columns:72px minmax(0,1fr); gap:var(--s3)}
  .btn-row{flex-direction:column; align-items:stretch}
  .btn-row .btn{justify-content:center}
  .deftable{display:block; overflow-x:auto}
  .foot-grid{grid-template-columns:1fr; gap:var(--s4)}
  .modal-inner{width:calc(100% - 32px)}
  .hero-media img{aspect-ratio:4/3}
  .hero-chip{position:static; max-width:none; margin-top:calc(var(--s2) * -1.5);
    margin-left:var(--s2); margin-right:var(--s2); left:auto; bottom:auto}
  .quote-sm{position:static; margin-top:var(--s3); max-width:none}
  .rail ul{display:flex; flex-wrap:wrap; gap:10px}
}

/* ============================================================
   Bewegung, Druck
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important}
}

@media print{
  .site-header,.nav-toggle,.skip-link,.modal,.cta-sec,.rail,.video-card{display:none !important}
  body{font-size:11pt; color:#000}
  .sec,.sec-dark,.sec-sand{background:#fff !important; color:#000 !important; padding:12pt 0}
  h1,h2,h3,h4,.lead,p,li{color:#000 !important}
  a[href^="http"]::after{content:" (" attr(href) ")"; font-size:9pt; color:#444}
  .foot{background:#fff !important; color:#000 !important}
}

/* ============================================================
   Kontaktleiste auf kleinen Viewports
   Die Zielgruppe ruft im Zweifel an. Ohne diese Leiste steht die
   Telefonnummer erst am Ende einer sehr langen Seite.
   ============================================================ */
.callbar{display:none}
@media (max-width:760px){
  .callbar{
    display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:stretch;
    position:fixed; left:0; right:0; bottom:0; z-index:60; padding:10px 16px;
    background:rgba(255,255,255,.97); backdrop-filter:saturate(180%) blur(12px);
    border-top:1px solid var(--line-strong);
  }
  .callbar a{
    display:inline-flex; align-items:center; justify-content:center; gap:9px;
    font-size:.94rem; font-weight:600; text-decoration:none; padding:12px 16px;
    border-radius:var(--r); min-height:48px; white-space:nowrap; line-height:1.2;
  }
  .callbar-tel{border:1px solid var(--line-strong); color:var(--ink); background:var(--white)}
  .callbar-tel svg{width:18px; height:18px; fill:none; stroke:var(--navy); stroke-width:1.8;
    stroke-linecap:round; stroke-linejoin:round}
  .callbar-cta{background:var(--navy); color:#fff}
  /* Platz, damit die Leiste die Fusszeile nicht verdeckt */
  body{padding-bottom:76px}
}

/* Textweg mitten im Lesefluss, ohne den Rhythmus zu stoeren */
.tlink-wrap{margin:var(--s4) 0 0}


/* ============================================================
   Rhythmus: nicht jede Section wiegt gleich viel
   Vorher hatten alle elf denselben Innenabstand, dadurch klang die
   Startseite wie ein Text ohne Betonung.
   ============================================================ */
#leistungen,#qm-teaser,#kontakt{padding-top:var(--s8); padding-bottom:var(--s8)}
#branchen{padding-top:var(--s6); padding-bottom:var(--s6)}
@media (max-width:1024px){
  #leistungen,#qm-teaser,#kontakt{padding-top:var(--s7); padding-bottom:var(--s7)}
}

/* Rückmeldung des Kontaktformulars */
.form-status{
  margin:var(--s2) 0 0; padding:12px 16px; border-radius:var(--r);
  font-size:.92rem; line-height:1.5; border-left:3px solid;
}
.form-status.ok{background:rgba(32,56,118,.06); border-color:var(--navy); color:var(--ink)}
.form-status.fehler{background:rgba(190,23,23,.06); border-color:var(--red); color:var(--ink)}
.form-card button[type="submit"][disabled]{opacity:.6; cursor:progress}

/* Zusatzzeile in der Trustbar: die Logos allein erklaeren sich nicht */
.trustbar p .tb-sub{display:block; margin-top:5px; font-size:.74rem; letter-spacing:.02em;
  text-transform:none; font-weight:400; color:var(--muted); max-width:26ch}

/* Hinweis unter den vier Schritten: die Frage nach der Dauer kommt immer */
.steps-note{margin:var(--s4) 0 0; font-size:.94rem; color:var(--body); max-width:78ch}

/* Sprungmarken: die Kopfzeile liegt fest ueber der Seite und verdeckt sonst
   die Ueberschrift des angesprungenen Abschnitts. */
:target,[id]{scroll-margin-top:calc(var(--hdr) + var(--s3))}

/* Kennzeichnung KI-erzeugter Bilder nach Art. 50 Abs. 4 AI Act: direkt am Bild
   und beim ersten Sehen erkennbar, aber zurueckhaltend. Der leichte Schatten
   haelt die helle Schrift auch auf hellen Bildstellen lesbar. */
.ki-hinweis{
  position:absolute; top:10px; left:12px; z-index:2;
  font-family:var(--sans); font-size:.66rem; font-weight:500; letter-spacing:.02em;
  color:rgba(255,255,255,.88); text-shadow:0 1px 2px rgba(0,0,0,.45);
  line-height:1.2; pointer-events:none;
}

/* Startseite: breiteres Hero-Bild im Querformat. Die QM-Seite behaelt das
   bisherige, fast quadratische Format.
   Die Textspalte bleibt so breit wie bisher, sonst rutschen die beiden Knoepfe
   untereinander. Die zusaetzliche Bildbreite kommt aus dem kleineren
   Spaltenabstand und, sobald der Inhalt seine Hoechstbreite erreicht, aus dem
   freien Rand rechts neben dem Inhaltsbereich. */
.hero-grid--breit{column-gap:var(--s5)}
.hero-grid--breit .hero-media img{aspect-ratio:1290/1064}
@media (min-width:1320px){ .hero-grid--breit .hero-media{margin-right:-40px} }
/* Zahlenreihe der Startseite ohne Trennlinie und naeher an den Knoepfen */
.hero-grid--breit .hero-facts{border-top:0; padding-top:0; margin-top:var(--s5)}

/* Startseite: mehr Luft ueber und unter dem Hero. Die Abstaende skalieren
   ueber --s7 mit, auf kleineren Bildschirmen werden sie automatisch kleiner. */
.hero--luftig{padding:calc(var(--hdr) + var(--s7)) 0 calc(var(--s7) + var(--s2))}
/* Above the fold komplett dunkelblau: der Hero fuellt mindestens den
   Bildschirm, der Inhalt sitzt vertikal in der Mitte. */
@media (min-width:1025px){
  .hero--luftig{min-height:100vh; min-height:100svh; display:flex; align-items:center;
    padding-top:calc(var(--hdr) + var(--s5)); padding-bottom:var(--s6)}
  .hero--luftig > .wrap{width:100%}
}
/* Fallbeispiele auf der Startseite im Beige-Ton hervorgehoben */
.card.card-sand{background:var(--sand)}
@media (max-width:760px){ .hero-media:has(.hero-chip--dezent){padding-bottom:0} .hero-chip--dezent{width:auto} }

/* ============================================================
   Mobil-Audit (Handy bis 760px): kompakter, horizontal statt gestapelt,
   nichts ragt ueber den Bildschirmrand. Steht bewusst am Ende, damit es
   die allgemeinen Regeln oben ueberschreibt.
   ============================================================ */
/* Seiten mit Inhaltsnavigation: das Grid darf nicht breiter werden als der
   Bildschirm, auch wenn eine Tabelle oder Tag-Reihe mehr Platz haben will */
@media (max-width:1024px){
  .layout{grid-template-columns:minmax(0,1fr)}
  .layout > *{min-width:0}
}

@media (max-width:760px){
  /* Menue-Symbol: kleiner und am rechten Rand. Die Klickflaeche bleibt
     44px gross, nur die Striche werden kuerzer und sitzen rechtsbuendig. */
  .nav-toggle{margin-left:auto; margin-right:-10px; width:44px; align-items:center}
  .nav-toggle span{width:24px; height:2px}
  /* Wischleisten reichen bis an den Bildschirmrand, die Seite selbst darf
     dadurch nicht seitlich verschiebbar werden */
  .sec,.trustbar{overflow-x:clip}
  /* Hero: Kennzahlen dreispaltig nebeneinander */
  .hero-facts{grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; text-align:center}
  .hero-facts b{font-size:1.45rem}
  .hero-facts span{font-size:.72rem; line-height:1.35; margin-top:6px}
  /* Karte am Hero-Foto liegt ueber der Unterkante des Fotos, nicht darunter */
  .hero-chip{position:relative; z-index:2; margin:-30px 14px 0; padding:14px 18px}
  .hero-chip--dezent{width:auto}
  .hero-chip b{font-size:1.7rem}
  .hero-chip--dezent b{font-size:1.02rem}
  .hero-chip span{font-size:.82rem}

  /* Verbandslogos: eine Zeile, seitlich wischbar, rechts ausgeblendet */
  .trustbar{padding:22px 0}
  .trustbar-inner{flex-direction:column; align-items:stretch; gap:14px}
  .trustbar p .tb-sub{max-width:none}
  .logos{flex-wrap:nowrap; gap:30px; overflow-x:auto; margin:0 -20px; padding:4px 20px;
    scroll-snap-type:x proximity; scroll-padding-left:20px; scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 48px),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - 48px),transparent)}
  .logos::-webkit-scrollbar{display:none}
  .logos img{height:34px; flex:none; scroll-snap-align:start}

  /* Karten allgemein: weniger Innenabstand, Symbol links neben dem Text */
  .grid{gap:12px}
  .card{padding:20px}
  .card h3{font-size:1.12rem; margin-bottom:6px}
  .card p{font-size:.92rem}
  .card .more{padding-top:12px; font-size:.9rem}
  .card-meta + h3{min-height:0; font-size:1.16rem}
  .card:has(> .ico){display:grid; grid-template-columns:36px minmax(0,1fr); column-gap:14px; align-content:start}
  .card:has(> .ico) > *{grid-column:2}
  .card > .ico{grid-column:1; grid-row:1 / span 4; width:36px; height:36px; border-radius:9px; margin:0}
  .card > .ico svg{width:18px; height:18px}

  /* Branchen: zwei versetzte Reihen Pillen, seitlich wischbar. Die feste
     Breite der Liste erzwingt genau zwei Reihen, die zweite ist eingerueckt. */
  #branchen .split{gap:var(--s4)}
  .chips-scroll{overflow-x:auto; margin:0 -20px; padding:2px 20px 6px; scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}
  .chips-scroll::-webkit-scrollbar{display:none}
  /* 1100px: Reihe 1 (fuenf Pillen) braucht rund 1030px, die sechste passt erst
     ab rund 1210px dazu. Dazwischen ergeben sich sicher genau zwei Reihen. */
  .chips{gap:8px; width:1100px}
  .chips li:nth-child(6){margin-left:28px}
  .chip{margin:0; padding:6px 12px; gap:7px; font-size:.84rem; background:var(--white);
    border:1px solid var(--line-strong); border-radius:999px}

  /* Leistungen: flachere Fotos, kompakterer Text */
  .services{gap:14px}
  .svc-img{aspect-ratio:2/1}
  .svc-body{padding:16px 20px 20px}
  .svc h3{font-size:1.14rem; margin-bottom:6px}
  .svc p{font-size:.92rem}
  .svc .more{padding-top:12px; font-size:.9rem}
  .svc-badge{left:12px; top:12px; padding:6px 12px; font-size:.62rem}

  /* QM-Abschnitt der Startseite: ohne Foto */
  .qm-teaser-bild{display:none}
  #qm-teaser .callout{margin-top:0 !important}
  /* Hinweisboxen: kleines Symbol neben der Ueberschrift, Text darunter ueber
     die volle Breite statt in einer schmalen Spalte rechts vom Symbol */
  .callout{padding:18px; display:grid; grid-template-columns:30px minmax(0,1fr);
    column-gap:12px; row-gap:8px; align-items:center}
  .callout > div:not(.ico){display:contents}
  .callout > .ico{grid-column:1; grid-row:1; width:30px; height:30px; border-radius:8px}
  .callout > .ico svg{width:16px; height:16px}
  .callout h4{grid-column:2; grid-row:1; margin:0; font-size:1rem; line-height:1.3}
  .callout > div:not(.ico) > :not(h4){grid-column:1 / -1; margin:0; font-size:.92rem}

  /* Ablauf: kleinere Nummern, dichter */
  .steps{gap:18px}
  .step{padding-left:48px}
  .step::before{width:34px; height:34px; font-size:.8rem}
  .step h4{font-size:1rem; margin-bottom:4px}
  .step p{font-size:.9rem}
  .steps-note{font-size:.86rem; margin-top:var(--s3)}

  /* Foerderung: kompakt, Quote und Text nebeneinander, Knopf darunter */
  .funding{padding:20px; gap:14px}
  .funding .eyebrow{margin-bottom:10px}
  .funding h3{font-size:1.14rem; margin-bottom:6px}
  .funding > div > p{font-size:.9rem; margin-bottom:12px}
  .tags{gap:6px}
  .tags span{font-size:.76rem; padding:5px 10px; gap:6px}
  .funding-side{display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:14px; align-items:center; padding-top:14px}
  .funding-side > b{font-size:1.8rem}
  .funding-side > span{margin:0; font-size:.8rem}
  .funding-side .btn{grid-column:1 / -1; margin-top:14px; white-space:normal}

  /* Person */
  .person{gap:var(--s4)}
  .person-media img{aspect-ratio:4/3; object-position:50% 25%}
  .quote-sm{padding:18px 20px}
  .quote-sm blockquote{font-size:1.02rem}

  /* Expertise: Nachweise als wischbare Karten, Marke oben, nichts ueberlappt */
  .creds{display:flex; gap:12px; overflow-x:auto; border-top:0; margin:var(--s4) -20px 0;
    padding:2px 20px 12px; scroll-snap-type:x mandatory; scrollbar-width:none}
  .creds::-webkit-scrollbar{display:none}
  .cred{flex:0 0 78%; display:flex; flex-direction:column; gap:12px; padding:20px;
    background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg);
    scroll-snap-align:start; scroll-margin-left:20px}
  .cred-mark{height:44px; align-items:center; padding:0}
  .cred-mark img{max-height:40px; max-width:130px}
  .cred-mark.cover img{max-height:56px; max-width:48px}
  .cred-mark .wm{font-size:1.4rem}
  .cred b{font-size:1.04rem}
  .cred span.txt{font-size:.86rem}
  .video-meta span{align-items:flex-start}
  .video-meta span::before{margin-top:.6em}

  /* Kennzahlen: 2 x 2 */
  .stats{grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 16px}
  .stat b{font-size:1.75rem}
  .stat span{font-size:.82rem; margin-top:8px; hyphens:auto; -webkit-hyphens:auto; overflow-wrap:break-word}
  .hero-facts span{hyphens:auto; -webkit-hyphens:auto}

  /* Unterseiten: Inhaltsnavigation als wischbare Leiste, Tabellen gestapelt */
  .rail h5{margin-bottom:10px}
  .rail ul{flex-wrap:nowrap; gap:8px; overflow-x:auto; border-left:0; margin:0 -20px;
    padding:2px 20px 6px; scroll-padding-left:20px; scrollbar-width:none}
  .rail ul::-webkit-scrollbar{display:none}
  .rail ul a{white-space:nowrap; margin:0; padding:8px 14px; font-size:.86rem;
    border:1px solid var(--line-strong); border-radius:999px}
  .rail ul a.on{border-color:var(--navy); background:var(--navy); color:#fff}
  .rail > div{display:none}
  .block{padding-bottom:var(--s6); margin-bottom:var(--s6)}
  .deftable{overflow:visible; font-size:.92rem}
  .deftable thead{display:none}
  .deftable tbody,.deftable tr,.deftable td{display:block; width:auto}
  .deftable tr{padding:14px 0; border-bottom:1px solid var(--line)}
  .deftable td{padding:0; border:0}
  .deftable td:first-child{width:auto; margin-bottom:4px}
  .bars{padding:18px}

  /* FAQ: Antworten ueber die volle Breite */
  .faq summary{font-size:1.06rem; padding-right:40px}
  .faq .faq-body{padding-right:0; font-size:.95rem}

  /* Kontakt und Fusszeile */
  .form-card{padding:24px 20px}
  .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px 20px}
  .foot-grid > div:first-child{grid-column:1 / -1}
  .foot{font-size:.88rem}
  .foot .logo{height:52px}
  /* Formularfelder duerfen schmaler werden als ihre Standardbreite */
  .field-row{grid-template-columns:minmax(0,1fr)}
  .field input,.field select,.field textarea{min-width:0; max-width:100%}
}
/* Sehr kleine Handys: untere Leiste passt ohne Ueberstand */
@media (max-width:360px){
  .callbar{grid-template-columns:auto minmax(0,1fr); gap:8px; padding:10px 12px}
  .callbar a{font-size:.86rem; padding:12px 12px}
}

/* ---------------- QM-Seite: Wege der Zusammenarbeit, Umfang ---------------- */
.weg ul.ticks,.umfang ul.ticks{margin-top:var(--s3); gap:9px}
.weg ul.ticks li,.umfang ul.ticks li{font-size:.92rem; line-height:1.5}
.weg ul.ticks li::before,.umfang ul.ticks li::before{width:18px; height:18px; margin-top:2px; background-size:10px}
/* Die dauerhafte Betreuung ist das wichtigste Angebot fuer kleine Betriebe */
.weg--fokus{border-color:var(--navy); box-shadow:0 0 0 1px var(--navy)}
.sec-sand .weg{background:var(--white)}
.wege-cta{margin-top:var(--s5); justify-content:center}
.umfang .card > .ico{margin-bottom:var(--s3)}
.umfang h3{font-size:1.2rem}
/* Querverweise im Fliesstext statt Kachelblock vor dem Formular */
.querlink-hell{color:#fff; text-decoration:underline; text-underline-offset:3px}
.querverweis{margin:var(--s4) 0 0; font-size:.96rem; color:var(--body)}
.querverweis a{color:var(--navy); font-weight:600; text-decoration:underline; text-underline-offset:3px}
@media (max-width:760px){
  .wege-cta{margin-top:var(--s4)}
  .umfang .card > .ico{margin-bottom:0; grid-row:1}
  .umfang .card > h3{align-self:center; margin:0}
  .umfang .card > ul{grid-column:1 / -1}
}