/* ==========================================================================
   Sani-Consult Design GmbH — Website Stylesheet
   Selbst gehostete Schrift, keine externen Dienste (DSGVO-konform).
   ========================================================================== */

/* --- Fonts (self-hosted) -------------------------------------------------- */
@font-face{font-family:"Jakarta";src:url("../fonts/pjs-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Jakarta";src:url("../fonts/pjs-400-ext.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,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:"Jakarta";src:url("../fonts/pjs-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Jakarta";src:url("../fonts/pjs-500-ext.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,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:"Jakarta";src:url("../fonts/pjs-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Jakarta";src:url("../fonts/pjs-600-ext.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,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:"Jakarta";src:url("../fonts/pjs-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Jakarta";src:url("../fonts/pjs-700-ext.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,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:"Jakarta";src:url("../fonts/pjs-800.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Jakarta";src:url("../fonts/pjs-800-ext.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap;unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* --- Tokens --------------------------------------------------------------- */
:root{
  /* Markenfarben direkt aus dem Original-Logo abgenommen */
  --navy:#0A1E45;          /* dunkle Flächen */
  --navy-800:#0D2452;
  --navy-700:#122C60;
  --blue:#013581;          /* Logo-Blau — Akzente, Buttons */
  --blue-700:#012A66;
  --gold:#F7B629;          /* Logo-Gold */
  --gold-300:#FAD06B;
  --cream:#EFF2F9;
  --cream-200:#E4E9F4;
  --white:#fff;
  --ink:#0A1E45;
  --muted:#5E6B85;
  --muted-on-navy:#AFBCD6;
  --line:#DCE2EE;
  --line-on-navy:rgba(255,255,255,.14);

  --maxw:1440px;
  --gutter:clamp(1.25rem,5vw,5.5rem);
  --sec-y:clamp(4.5rem,9vw,9rem);
  --r:2px;

  --shadow-lg:0 30px 70px -30px rgba(10,30,69,.45);
  --shadow-md:0 18px 40px -22px rgba(10,30,69,.4);
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* --- Reset ---------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:5.5rem}
body{
  margin:0; background:var(--white); color:var(--ink);
  font-family:"Jakarta",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:clamp(1rem,.96rem + .2vw,1.0625rem); line-height:1.65; font-weight:400;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%;height:auto}
/* <picture> ist nur eine Huelle fuer die Formatauswahl. `display:contents`
   nimmt sie aus dem Layout heraus, damit das Bild darin sich genau so
   verhaelt wie ein einzelnes <img> — sonst muessten alle Bildregeln
   angefasst werden. */
picture{display:contents}
h1,h2,h3,h4,p,figure,blockquote,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
/* Gold auf Weiss erreicht nur etwa 1,8:1 und ist als alleiniger Fokusrahmen
   zu schwach. Der Doppelring aus dunklem Kern und hellem Saum ist auf jedem
   Untergrund sichtbar — auf Weiss traegt das Navy, auf Navy das Gold. */
:focus-visible{outline:3px solid var(--navy);outline-offset:2px;border-radius:2px;
  box-shadow:0 0 0 6px var(--gold)}
.hero :focus-visible,.split--navy :focus-visible,.refs :focus-visible,
.intl :focus-visible,.ftr :focus-visible,.docs :focus-visible{
  outline-color:#fff;box-shadow:0 0 0 6px var(--gold)}
::selection{background:var(--gold);color:var(--navy)}

/* --- Layout helpers ------------------------------------------------------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--sec-y)}
.skip{position:absolute;left:-9999px;top:0;z-index:999;background:var(--gold);color:var(--navy);padding:.85rem 1.35rem;font-weight:700}
.skip:focus{left:1rem;top:1rem}

/* --- Typography ----------------------------------------------------------- */
/* Überschriften bewusst in SemiBold (600) statt ExtraBold — ruhiger, weniger massiv */
.h1{font-size:clamp(2.75rem,7.4vw,5.5rem);line-height:1.02;letter-spacing:-.03em;font-weight:600}
.h2{font-size:clamp(2.1rem,4.9vw,3.9rem);line-height:1.07;letter-spacing:-.025em;font-weight:600}
.h3{font-size:clamp(1.3rem,1.85vw,1.6rem);line-height:1.25;letter-spacing:-.015em;font-weight:600}
.lead{font-size:clamp(1.05rem,1.15vw,1.2rem);line-height:1.65;color:var(--muted)}
.lead--onNavy{color:var(--muted-on-navy)}
.gold{color:var(--gold)}
.blue{color:var(--blue)}

.eyebrow{
  display:inline-flex;align-items:center;gap:.85rem;
  font-size:.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
}
.eyebrow::before{content:"";width:2.75rem;height:3px;background:var(--gold);flex:none}
.eyebrow--plain::before{display:none}
.eyebrow--num{color:var(--blue);letter-spacing:.14em}
.eyebrow--num.on-navy{color:var(--gold)}

/* --- Buttons -------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:1rem 1.6rem;font-size:.9375rem;font-weight:700;letter-spacing:.005em;
  border:2px solid transparent;border-radius:var(--r);cursor:pointer;
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease);
  will-change:transform;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--primary{background:var(--blue);color:#fff}
.btn--primary:hover{background:var(--blue-700)}
.btn--gold{background:var(--gold);color:var(--navy)}
.btn--gold:hover{background:var(--gold-300)}
.btn--ghost{border-color:var(--line);color:var(--ink);background:transparent}
.btn--ghost:hover{border-color:var(--ink);background:var(--ink);color:#fff}
.btn--ghostLight{border-color:rgba(255,255,255,.35);color:#fff}
.btn--ghostLight:hover{background:#fff;color:var(--navy);border-color:#fff}
.btn .arw{transition:transform .25s var(--ease)}
.btn:hover .arw{transform:translate(3px,-3px)}

/* --- Logo (Originaldatei) -------------------------------------------------- */
.logo{display:inline-block;flex:none}
.logo img{height:3.35rem;width:auto;display:block}
.logo--light img{height:3.6rem}

@media (max-width:1279px){.logo img{height:2.9rem}}
@media (max-width:400px){.logo img{height:2.6rem}}

/* --- Header --------------------------------------------------------------- */
.hdr{position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid transparent;transition:box-shadow .3s var(--ease),border-color .3s var(--ease)}
.hdr.is-stuck{box-shadow:0 8px 30px -18px rgba(10,30,69,.45);border-bottom-color:var(--line)}
.hdr__in{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-height:5.25rem}
.nav{display:flex;align-items:center;gap:clamp(1.25rem,2.6vw,2.75rem)}
.nav a{font-size:.9375rem;font-weight:600;position:relative;padding-block:.35rem;color:var(--ink)}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--gold);transition:right .3s var(--ease)}
.nav a:hover::after,.nav a.is-active::after{right:0}
.hdr__right{display:flex;align-items:center;gap:clamp(.85rem,1.8vw,1.75rem)}

/* language switch */
.lang{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.lang a{padding:.42rem .68rem;font-size:.75rem;font-weight:700;letter-spacing:.06em;color:var(--muted);transition:background .2s,color .2s}
.lang a[aria-current="true"]{background:var(--navy);color:#fff}
.lang a:not([aria-current="true"]):hover{background:var(--cream);color:var(--ink)}

/* burger */
.burger{display:none;width:2.9rem;height:2.9rem;align-items:center;justify-content:center;background:none;border:1px solid var(--line);border-radius:var(--r);cursor:pointer}
.burger span{display:block;width:19px;height:2px;background:var(--ink);position:relative;transition:background .2s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:19px;height:2px;background:var(--ink);transition:transform .3s var(--ease)}
.burger span::before{top:-6px}.burger span::after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}

/* --- Hero ----------------------------------------------------------------- */
.hero{position:relative;background:var(--navy);color:#fff;isolation:isolate}
/* Das Raster wird als Ganzes eingerückt, damit die Textspalte auf breiten
   Bildschirmen mitwächst. Vorher wuchs nur der Einzug — die Spalte blieb bei 50 %
   und die Überschrift lief hinter das Bild. `100%` statt `100vw`: sonst rechnet
   der Browser die Scrollleiste mit und erzeugt seitlichen Überlauf. */
.hero__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch;
  min-height:min(84vh,52rem);padding-left:max(0px,calc((100% - var(--maxw))/2))}
.hero__text{padding:clamp(3rem,6.5vw,6rem) clamp(1.25rem,4vw,4.5rem) clamp(3.5rem,7vw,6.5rem);
  padding-left:var(--gutter);
  display:flex;flex-direction:column;justify-content:center;gap:1.75rem;width:100%}
.hero__media{position:relative;overflow:hidden;background:var(--navy-700);min-height:22rem}
.hero__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__actions{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:.5rem}
.hero .lead{max-width:34rem}

/* --- Stats ---------------------------------------------------------------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--line);background:var(--cream)}
.stat{display:flex;align-items:center;gap:1rem;padding:clamp(1.4rem,2.4vw,2.1rem) clamp(1.1rem,2.4vw,2.25rem);border-right:1px solid var(--line);min-width:0}
.stat:last-child{border-right:0}
.stat__n{font-size:clamp(1.85rem,3vw,2.6rem);font-weight:800;color:var(--blue);line-height:1;letter-spacing:-.03em;flex:none}
.stat__l{font-size:.8125rem;font-weight:600;line-height:1.35;color:var(--ink)}
.stat--accent{background:var(--blue);border-right:0}
.stat--accent .stat__l{color:#fff;font-size:.875rem}

/* --- Section head --------------------------------------------------------- */
.secHead{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr) minmax(0,22rem);gap:clamp(1.5rem,3vw,3rem);align-items:start;margin-bottom:clamp(2.75rem,5vw,4.5rem)}
.secHead--2{grid-template-columns:minmax(0,15rem) minmax(0,1fr)}
.secHead__t{grid-column:2}

/* --- Cards (Full service) ------------------------------------------------- */
.cards{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line)}
.card{padding:clamp(1.75rem,2.6vw,2.5rem);border-right:1px solid var(--line);display:flex;flex-direction:column;gap:1rem;min-height:17rem;position:relative;transition:background .3s var(--ease)}
.card:last-child{border-right:0}
.card:hover{background:var(--cream)}
.card__n{font-size:.75rem;font-weight:700;color:var(--blue);letter-spacing:.14em}
.card h3{margin-top:auto}
.card p{font-size:.9375rem;color:var(--muted);line-height:1.6}

/* --- Split (image + list) ------------------------------------------------- */
/* gleiche Logik wie beim Hero, nur spiegelverkehrt: Bild links, Text rechts */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch;
  padding-right:max(0px,calc((100% - var(--maxw))/2))}
.split--navy{background:var(--navy);color:#fff}
.split__media{position:relative;overflow:hidden;min-height:26rem;background:var(--navy-700)}
.split__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.split__body{padding:clamp(3rem,6vw,6rem) clamp(1.25rem,4vw,4.5rem);
  padding-right:var(--gutter);
  display:flex;flex-direction:column;justify-content:center;gap:1.5rem}
.tag{position:absolute;bottom:0;left:0;background:var(--gold);color:var(--navy);font-size:.8125rem;font-weight:700;padding:.7rem 1.15rem;z-index:2}

.steps{margin-top:.75rem}
.steps li{display:grid;grid-template-columns:2.75rem 1fr;gap:1rem;align-items:baseline;padding-block:1.05rem;border-top:1px solid var(--line-on-navy)}
.steps li:last-child{border-bottom:1px solid var(--line-on-navy)}
.steps b{color:var(--gold);font-size:.8125rem;font-weight:700;letter-spacing:.06em}
.steps span{font-size:1.0625rem;font-weight:600}

/* --- Roles (in your project structure) ------------------------------------ */
.roles{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.role{background:#fff;padding:1.35rem clamp(1.1rem,2vw,1.75rem);display:flex;align-items:center;gap:.85rem;
  font-weight:600;font-size:clamp(.9375rem,1.05vw,1.0625rem);line-height:1.3;transition:background .3s var(--ease)}
.role:hover{background:var(--cream)}
.role::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:var(--gold);flex:none}

/* --- Checks (evidence & documentation) ------------------------------------ */
.docs{background:var(--navy);color:#fff}
.checks{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(2rem,4.5vw,4.5rem);margin-top:.5rem}
.checks li{display:grid;grid-template-columns:1.4rem 1fr;gap:.9rem;align-items:start;
  padding-block:1.15rem;border-bottom:1px solid var(--line-on-navy)}
.checks svg{margin-top:.3rem;color:var(--gold);flex:none}
.checks span{font-size:1.0625rem;font-weight:600;line-height:1.4}

/* --- Timeline (Ablauf eines Programms) ------------------------------------ */
.tl{display:grid;grid-template-columns:repeat(5,1fr);gap:0;position:relative;margin-top:clamp(2.5rem,4vw,3.5rem)}
.tl::before{content:"";position:absolute;left:.5rem;right:.5rem;top:.5rem;height:1px;background:var(--line-on-navy)}
.tl li{position:relative;padding:0 clamp(1rem,1.8vw,1.75rem) 0 0}
.tl li::before{content:"";position:absolute;left:0;top:0;width:1rem;height:1rem;border-radius:50%;
  background:var(--navy);border:2px solid var(--gold);box-sizing:border-box;z-index:1}
.tl li:nth-child(n+2)::before{border-color:rgba(247,182,41,.45)}
.tl b{display:block;margin-top:1.85rem;font-size:.75rem;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--gold)}
.tl h3{font-size:1.0625rem;font-weight:600;letter-spacing:-.01em;margin:.55rem 0 .5rem;line-height:1.25}
.tl p{font-size:.875rem;line-height:1.55;color:var(--muted-on-navy)}
.tlNote{margin-top:2.25rem;font-size:.8125rem;color:var(--muted-on-navy)}

/* --- Checks: helle Variante ------------------------------------------------ */
.checks--light li{border-bottom-color:var(--line)}
.checks--light svg{color:var(--blue)}
.checks--light span{color:var(--ink)}

/* --- Downloadzeile unter den Referenzen ------------------------------------ */
/* Eigener Klassenname statt `.dl`: auf den Rechtsseiten ist `.dl` bereits eine
   Definitionsliste (Impressum/Datenschutz) und wuerde die Rahmen hier erben. */
.dlRow{display:flex;flex-wrap:wrap;align-items:center;gap:.85rem 1.5rem;
  margin-top:clamp(2.5rem,4vw,3.5rem)}
.dlRow span{font-size:.875rem;color:var(--muted-on-navy);max-width:26rem;line-height:1.55}

/* --- Detail (scale) ------------------------------------------------------- */
.scale{background:var(--cream);overflow:hidden}
.scale__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(2.5rem,5vw,4.5rem);align-items:center}
.scale__body{display:flex;flex-direction:column;gap:1.5rem;max-width:34rem}
.chips{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.5rem}
.chips li{border:1px solid var(--line);background:#fff;padding:.6rem 1.05rem;font-size:.875rem;font-weight:600;border-radius:var(--r)}
.scale__media{position:relative;padding-bottom:4.5rem;padding-left:3rem}
.scale__media .m1{box-shadow:var(--shadow-lg);width:100%;aspect-ratio:4/3;object-fit:cover}
.scale__media .m2{position:absolute;left:0;bottom:0;width:52%;max-width:20rem;border:8px solid var(--cream);box-shadow:var(--shadow-md);aspect-ratio:4/3;object-fit:cover}
.scale__media .tag{bottom:4.5rem;left:auto;right:0;background:var(--blue);color:#fff}

/* --- References ----------------------------------------------------------- */
.refs{background:var(--navy);color:#fff}
.refList{border-top:1px solid var(--line-on-navy)}
.refList li{border-bottom:1px solid var(--line-on-navy)}
/* Der Downloadblock bringt seinen eigenen Abstand mit — sonst stuenden zwei
   Linien mit Luft dazwischen unter dem letzten Haus. */
.refList li:last-child{border-bottom:0}
.refList .row{
  display:grid;grid-template-columns:3.25rem minmax(0,1fr) auto;
  gap:1rem 1.5rem;align-items:baseline;padding-block:1.5rem;
  transition:padding-inline .35s var(--ease),background .35s var(--ease)
}
.refList li:hover .row{background:rgba(255,255,255,.045);padding-inline:1.15rem}
.refList .n{font-size:.75rem;font-weight:600;color:var(--gold)}
.refList .nm{font-size:clamp(1.15rem,1.85vw,1.6rem);font-weight:600;letter-spacing:-.015em}
.refList .lo{font-size:.9375rem;color:var(--muted-on-navy);justify-self:end;text-align:right}

/* --- International band --------------------------------------------------- */
.intl{background:var(--navy);color:#fff;padding-bottom:clamp(3rem,6vw,5.5rem)}
.intl__media{position:relative;margin-top:clamp(2rem,4vw,3rem);overflow:hidden}
.intl__media::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,30,69,.45) 0%,rgba(10,30,69,0) 38%,rgba(10,30,69,.55) 100%)}
.intl__media img{width:100%;aspect-ratio:11/4;object-fit:cover;opacity:.92}
.intl__cap{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;font-size:.8125rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--gold);margin-bottom:1.25rem}

/* --- Contact -------------------------------------------------------------- */
.contact{background:var(--cream);border-top:5px solid var(--gold)}
.contact__grid{display:grid;grid-template-columns:minmax(0,12.5rem) minmax(0,1.6fr) minmax(0,1fr);gap:clamp(2rem,3.5vw,3rem);align-items:start}
.contact__form{display:grid;gap:1rem;margin-top:2rem}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.field{display:grid;gap:.4rem}
.field label{font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.field input,.field textarea,.field select{
  width:100%;padding:.85rem 1rem;background:#fff;border:1px solid var(--line);border-radius:var(--r);
  transition:border-color .2s,box-shadow .2s
}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(1,53,129,.15);outline:none}
.field textarea{min-height:7rem;resize:vertical}
.formNote{font-size:.8125rem;color:var(--muted);line-height:1.55}
/* Hinweis, wenn JavaScript fehlt — sichtbar, aber nicht alarmierend */
.formNote--warn{background:#FFF8E8;border-left:4px solid var(--gold);
  padding:.9rem 1.1rem;font-size:.9375rem;color:var(--ink);line-height:1.55}
/* Pflichtfeld-Stern: Farbe allein traegt keine Bedeutung, das Sternchen steht
   zusaetzlich im Text und wird in der Legende ueber dem Formular erklaert. */
.req{color:#B3261E;font-weight:700}
/* Fehlermeldungen: Farbe allein reicht nicht — das Feld bekommt zusaetzlich
   einen deutlich staerkeren Rahmen, damit es auch ohne Farbsehen auffaellt. */
.fieldErr{font-size:.8125rem;line-height:1.45;color:#B3261E;font-weight:600}
.formErr{font-size:.9375rem;line-height:1.5;color:#B3261E;font-weight:700}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{
  border-color:#B3261E;border-width:2px;background:#FEF6F5}
.field input[aria-invalid="true"]:focus{box-shadow:0 0 0 3px rgba(179,38,30,.18)}
.cInfo{display:grid;gap:0;margin-top:2rem}
.cInfo a{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:1.1rem;border-top:1px solid var(--line);font-weight:600;color:var(--blue);transition:padding-left .3s var(--ease)}
.cInfo a:hover{padding-left:.6rem}
.cInfo div{display:block;padding-block:1.1rem;border-top:1px solid var(--line);color:var(--muted);font-weight:400;font-size:.9375rem;line-height:1.55}
.cInfo :last-child{border-bottom:1px solid var(--line)}
.cInfo .arw{color:var(--muted)}

/* --- Footer --------------------------------------------------------------- */
.ftr{background:var(--navy);color:#fff;padding-block:clamp(3rem,5vw,4.5rem) 2rem}
.ftr__grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr));gap:2.5rem;padding-bottom:2.75rem;border-bottom:1px solid var(--line-on-navy)}
.ftr .ftrH{font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:1.1rem}
.ftr p,.ftr li{font-size:.9375rem;color:var(--muted-on-navy);line-height:1.75}
.ftr li a:hover{color:#fff}
.ftr__bot{display:flex;flex-wrap:wrap;gap:.75rem 1.75rem;justify-content:space-between;padding-top:1.75rem;font-size:.8125rem;color:var(--muted-on-navy)}
.ftr__bot nav{display:flex;flex-wrap:wrap;gap:1.25rem}
.ftr__bot a:hover{color:#fff;text-decoration:underline}

/* --- Legal pages ---------------------------------------------------------- */
.legal{padding-block:clamp(3rem,6vw,5.5rem)}
.legal__in{max-width:48rem}
.legal h2{font-size:clamp(1.5rem,2.4vw,1.9rem);font-weight:800;letter-spacing:-.02em;margin-top:2.75rem;margin-bottom:.85rem}
.legal h3{font-size:1.0625rem;font-weight:700;margin-top:1.75rem;margin-bottom:.4rem}
.legal p{margin-bottom:1rem;color:#38445c}
.legal ul{list-style:disc;padding-left:1.25rem;margin-bottom:1rem;color:#38445c}
.legal li{margin-bottom:.4rem}
.legal a{color:var(--blue);text-decoration:underline;text-underline-offset:2px}
.legal .dl{display:grid;grid-template-columns:minmax(9rem,auto) 1fr;gap:.45rem 1.5rem;margin-bottom:1.25rem}
.legal .dl dt{font-weight:700}
.legal .dl dd{margin:0;color:#38445c}
.pageHero{background:var(--navy);color:#fff;padding-block:clamp(3rem,6vw,5rem)}

/* --- Feinschliff ----------------------------------------------------------- */
/* Sanfter Zoom auf großen Bildflächen */
.split__media img{transition:transform 1s var(--ease)}
.split:hover .split__media img{transform:scale(1.03)}
.scale__media .m1{transition:transform 1s var(--ease)}
.scale__media:hover .m1{transform:scale(1.02)}

/* Deutsche Silbentrennung auf schmalen Screens (lange Komposita) */
@media (max-width:720px){
  :lang(de) .lead,:lang(de) .card p,:lang(de) .steps span,
  :lang(de) .checks span,:lang(de) .tl p{hyphens:auto;overflow-wrap:break-word}
  /* Lange Komposita wie „Datenschutzerklärung" passen sonst nicht in eine
     Überschriftenzeile und werden abgeschnitten. Trennen ist besser als beschneiden. */
  .pageHero .h1{hyphens:auto}
  .h1,.h2,.h3,.refList .nm{overflow-wrap:break-word}
}

/* --- Reveal animation ----------------------------------------------------- */
/* Nur mit aktivem JavaScript ausblenden — sonst bliebe der Inhalt fuer
   immer unsichtbar, weil ihn niemand wieder einblendet. */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .rv.in{opacity:1;transform:none}
.js .rv-d1{transition-delay:.08s}.js .rv-d2{transition-delay:.16s}.js .rv-d3{transition-delay:.24s}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1180px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(2){border-right:0}
  .stat:nth-child(1),.stat:nth-child(2){border-bottom:1px solid var(--line)}
  .cards{grid-template-columns:repeat(2,1fr)}
  .card:nth-child(2){border-right:0}
  .card:nth-child(1),.card:nth-child(2){border-bottom:1px solid var(--line)}
  .secHead{grid-template-columns:minmax(0,11rem) minmax(0,1fr);gap:1.5rem 2rem}
  .secHead__d{grid-column:2}
  .refList .row{grid-template-columns:2.5rem minmax(0,1fr) auto}
  .roles{grid-template-columns:repeat(2,1fr)}
  .tl{grid-template-columns:repeat(3,1fr);row-gap:2.75rem}
  .tl::before{display:none}
  .tl li{padding-top:0;border-top:1px solid var(--line-on-navy);padding-right:1.5rem}
  .tl li::before{top:-.5rem}
  .tl b{margin-top:1.5rem}
}
/* Der Header klappt deutlich frueher um als das uebrige Layout: sechs Reiter
   plus Sprachumschalter und Button brauchen viel Platz. Gemessen bricht die
   englische Fassung bis einschliesslich 1200 px (dreizeiliges "How we work",
   zweizeiliger Knopf). Der Umschaltpunkt liegt daher bei 1279 px — mit Luft
   fuer spaetere Textaenderungen. Wird er geaendert, muss der Wert in app.js
   (resize-Handler) mitwandern. */
@media (max-width:1279px){
  html{scroll-padding-top:4.75rem}
  .hdr__in{min-height:4.5rem}
  .nav{
    position:fixed;inset:4.5rem 0 auto;background:#fff;flex-direction:column;align-items:stretch;
    gap:0;padding:.5rem var(--gutter) 1.5rem;border-bottom:1px solid var(--line);
    box-shadow:0 24px 40px -30px rgba(10,30,69,.5);
    transform:translateY(-115%);visibility:hidden;
    transition:transform .35s var(--ease),visibility 0s .35s;z-index:-1
  }
  .nav.is-open{transform:none;visibility:visible;transition:transform .35s var(--ease),visibility 0s 0s}
  .nav a{padding-block:1rem;border-bottom:1px solid var(--line);font-size:1.05rem}
  .nav a::after{display:none}
  /* im Klappmenü zeigt die Farbe den aktiven Abschnitt, nicht die Unterstreichung */
  .nav a.is-active{color:var(--blue)}
  .burger{display:inline-flex}
  .hdr__cta{display:none}
}

@media (max-width:940px){

  .hero__grid{grid-template-columns:1fr;padding-left:0}
  .hero__text{max-width:none;padding-inline:var(--gutter);padding-block:clamp(2.75rem,8vw,4rem) clamp(3rem,8vw,4rem)}
  .hero__media{min-height:min(62vw,26rem);order:2}

  .split{grid-template-columns:1fr;padding-right:0}
  .split__media{min-height:min(72vw,24rem);order:2}
  .split__body{padding-inline:var(--gutter);order:1}
  .split--navy .split__media{order:1}
  .split--navy .split__body{order:2}

  .scale__grid{grid-template-columns:1fr;gap:2.5rem}
  .scale__media{padding-left:0;padding-bottom:3.5rem;margin-top:.5rem}
  .scale__media .m2{width:46%;border-width:6px}
  .scale__media .tag{bottom:3.5rem}

  .contact__grid{grid-template-columns:1fr;gap:1.5rem}
  .ftr__grid{grid-template-columns:1fr 1fr}
  .ftr__grid > :first-child{grid-column:1/-1}
}
@media (max-width:720px){
  .secHead,.secHead--2{grid-template-columns:1fr}
  .secHead__t,.secHead__d{grid-column:1}
  .cards{grid-template-columns:1fr}
  .card{border-right:0;border-bottom:1px solid var(--line);min-height:0}
  .card:last-child{border-bottom:0}
  .card h3{margin-top:0}
  .stats{grid-template-columns:1fr}
  .stat{border-right:0;border-bottom:1px solid var(--line)}
  .stat--accent{border-bottom:0}

  .refList .row{grid-template-columns:1.75rem 1fr;gap:.25rem .85rem;padding-block:1.15rem;align-items:start}
  .refList .n{grid-row:1;align-self:center}
  .refList .nm{grid-column:2;font-size:1.0625rem}
  .refList .lo{grid-column:2;grid-row:2;justify-self:start;text-align:left;font-size:.8125rem}
  .refList li:hover .row{padding-inline:0;background:none}

  .roles{grid-template-columns:1fr}
  .checks{grid-template-columns:1fr;gap:0}
  .tl{grid-template-columns:1fr;row-gap:0;margin-left:.5rem;padding-left:1.75rem;border-left:1px solid var(--line-on-navy)}
  .tl li{border-top:0;padding:1.5rem 0}
  .tl li::before{left:-2.25rem;top:1.75rem}
  .tl b{margin-top:0}
  .f2{grid-template-columns:1fr}
  .ftr__grid{grid-template-columns:1fr;gap:2rem}
  .ftr__grid > :first-child{grid-column:1}
  .intl__media img{aspect-ratio:16/10}
  .legal .dl{grid-template-columns:1fr;gap:.15rem}
  .legal .dl dd{margin-bottom:.6rem}
}
@media (max-width:400px){
  .logo b{font-size:1.6rem}.logo span{font-size:.92rem;letter-spacing:.2em}
}

/* ==========================================================================
   Telefon — Feinschliff
   Alles unterhalb dieser Marke betrifft ausschliesslich Smartphones. Die
   Reihenfolge ist Absicht: erst Verhalten (Touch, iOS-Eigenheiten), dann
   Bedienelemente, dann Typografie und Abstaende.
   ========================================================================== */

/* --- 1) Touch statt Maus -------------------------------------------------- */
/* Beim Antippen legt iOS sonst ein graues Rechteck ueber das Element. */
a,button,input,textarea,select,summary{-webkit-tap-highlight-color:rgba(1,53,129,.14)}

/* Ohne Maus gibt es kein "Verlassen" eines Elements: Der Hover-Zustand bleibt
   nach dem Antippen haengen. Auf Touchgeraeten daher komplett abschalten. */
@media (hover:none){
  .btn:hover{transform:none}
  .btn--gold:hover{background:var(--gold)}
  .btn--primary:hover{background:var(--blue)}
  .btn--ghost:hover{background:transparent;color:var(--ink);border-color:var(--line)}
  .btn--ghostLight:hover{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
  .btn:hover .arw{transform:none}
  .card:hover{background:transparent}
  .role:hover{background:#fff}
  .cInfo a:hover{padding-left:0}
  .refList li:hover .row{padding-inline:0;background:none}
  .split:hover .split__media img,.scale__media:hover .m1{transform:none}
  .ftr__bot a:hover{text-decoration:none}
  .lang a:not([aria-current="true"]):hover{background:transparent;color:var(--muted)}
}

/* --- 2) iOS-Eigenheiten --------------------------------------------------- */
/* 100vh rechnet in Safari die Adressleiste mit: Der Hero waere beim Laden zu
   hoch und wuerde beim Scrollen springen. dvh misst den sichtbaren Bereich. */
@supports (height:100dvh){
  .hero__grid{min-height:min(84dvh,52rem)}
}

/* Ein Eingabefeld unter 16px laesst Safari beim Antippen in das Formular
   hineinzoomen — die Seite steht danach verschoben da. */
@media (max-width:940px){
  .field input,.field textarea,.field select{font-size:16px;padding:.95rem 1rem}
  .field textarea{min-height:8.5rem}
}

/* Randlose Anzeige (viewport-fit=cover): Flaechen laufen unter Notch und
   Home-Indikator durch, Text haelt Abstand. Wirkt vor allem im Querformat. */
@supports (padding:max(0px)){
  @media (max-width:1279px){
    .wrap,.hero__text,.split__body{
      padding-left:max(var(--gutter),env(safe-area-inset-left));
      padding-right:max(var(--gutter),env(safe-area-inset-right));
    }
    .ftr{padding-bottom:max(2rem,env(safe-area-inset-bottom))}
    .nav{padding-left:max(var(--gutter),env(safe-area-inset-left));
         padding-right:max(var(--gutter),env(safe-area-inset-right))}
  }
}

/* --- 3) Klappmenue -------------------------------------------------------- */
/* Ausserhalb des Klappmenues existieren beide Bausteine nicht. Diese beiden
   Zeilen stehen VOR dem Media-Block: stuenden sie danach, wuerde `display:none`
   die Anzeige im Menue wieder ueberschreiben. */
.hdr__scrim{display:none}
.nav__foot{display:none}

@media (max-width:1279px){
  /* Das Menue reicht bis zum unteren Rand und scrollt bei Bedarf selbst.
     Vorher endete es mitten im Hero und wirkte wie abgeschnitten. */
  .nav{
    inset:4.5rem 0 0;height:auto;
    max-height:calc(100dvh - 4.5rem);overflow-y:auto;-webkit-overflow-scrolling:touch;
    padding-bottom:max(2rem,env(safe-area-inset-bottom));
    justify-content:flex-start;
  }
  .nav a{padding-block:1.15rem;font-size:1.0625rem;font-weight:600}
  /* Abdunkelung dahinter — sonst laeuft der Hero optisch ins Menue hinein.
     Sichtbar nur ohne `hidden`-Attribut: eine Regel ohne diese Bedingung
     ueberschreibt die Browservorgabe `[hidden]{display:none}`, und der
     unsichtbare Vorhang faengt dann saemtliche Klicks der Seite ab. */
  .hdr__scrim:not([hidden]){display:block}
  .hdr__scrim{
    position:fixed;inset:0;background:rgba(10,30,69,.45);
    z-index:90;                 /* unter dem Header (100), ueber der Seite */
    opacity:0;transition:opacity .35s var(--ease);
  }
  .hdr__scrim.is-on{opacity:1}
  /* Der Vorhang schluckt auch Wischgesten — ohne das scrollt in Safari die
     Seite hinter dem offenen Menue weiter. */
  .hdr__scrim{touch-action:none}
  /* Am Ende der Menueliste soll das Wischen nicht auf die Seite durchschlagen. */
  .nav{overscroll-behavior:contain}
  /* Body fixiert = die Seite steht still, auch in Safari auf dem iPhone.
     Der Header haengt dann nicht mehr am Scrollport und wuerde mit nach oben
     wandern — deshalb solange fest ans Fenster. */
  html.nav-locked body{position:fixed;left:0;right:0;width:100%;overflow:hidden}
  html.nav-locked .hdr{position:fixed;top:0;left:0;right:0}
  .nav__foot{display:flex;flex-direction:column;gap:.35rem;margin-top:2rem}
  .nav__foot .btn{width:100%;margin-bottom:.75rem}
  /* Hoehere Auswahlschaerfe als `.nav a` noetig — sonst erben Telefon und
     E-Mail die Trennlinien der Menuepunkte und sehen aus wie zwei weitere
     Reiter statt wie ein Kontaktblock. */
  .nav .nav__tel{
    display:block;padding-block:.6rem;border-bottom:0;
    font-size:.9375rem;font-weight:600;color:var(--blue);
  }
  /* Der Sprachumschalter ist mit 12px Schrift sonst kaum zu treffen. */
  .lang a{padding:.78rem .85rem}
  .burger{width:2.9rem;height:2.9rem}
}


/* --- 4) Bedienelemente gross genug --------------------------------------- */
/* Apples Richtwert sind 44 x 44 Punkt. Reine Textlinks in Fusszeile und
   Rechtsleiste lagen darunter — sie bekommen Innenabstand statt groesserer
   Schrift, damit das Schriftbild ruhig bleibt. */
@media (max-width:940px){
  .ftr li a,.ftr p a{display:inline-block;padding-block:.6rem}
  .ftr__bot{gap:.25rem 1.5rem}
  .ftr__bot nav{gap:.25rem 1.5rem}
  .ftr__bot nav a{display:inline-block;padding-block:.7rem}
  .cInfo a{padding-block:1.25rem}
}

/* --- 5) Aufteilung und Typografie ---------------------------------------- */
@media (max-width:720px){
  /* Zahlenblock: feste Spaltenbreite fuer die Zahl, damit die Beschriftungen
     untereinander auf einer Kante stehen. Vorher tanzten sie mit der
     Zahlenbreite mit, was unruhig wirkte. */
  .stat{padding-block:1.35rem;gap:1.1rem;align-items:center}
  .stat__n{font-size:2.15rem;min-width:5.25rem}
  .stat__l{font-size:.9375rem;line-height:1.4}
  .stat--accent{padding-block:1.65rem}
  .stat--accent .stat__l{font-size:1.0625rem;line-height:1.45;font-weight:700}

  /* Fliesstext im Ablauf und in den Karten war mit 14px auf dem Telefon
     spuerbar kleiner als der uebrige Text. */
  .tl p{font-size:.9375rem;line-height:1.6}
  .tl h3{font-size:1.125rem}
  .card p{font-size:1rem}

  /* Das kleine ueberlagerte Bild schrumpft mit — sonst deckt es auf dem
     Telefon fast die Haelfte des grossen Bildes ab. */
  .scale__media .m2{width:42%;border-width:5px}

  .intl__cap{gap:.4rem 1.1rem;font-size:.75rem}
}

/* --- 6) Knoepfe ueber die volle Breite ------------------------------------ */
/* Auf schmalen Geraeten sind unterschiedlich breite Knoepfe untereinander
   unruhig. Volle Breite ist auf dem Telefon der ruhigere und sicherere Weg. */
@media (max-width:560px){
  .hero__actions{flex-direction:column;align-items:stretch;gap:.75rem}
  .hero__actions .btn,.dlRow .btn,.contact__form .btn{width:100%}
  .dlRow{gap:1rem}
  .btn{padding:1.05rem 1.3rem}
  .chips li{padding:.55rem .95rem}
}

/* --- Motion / print ------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .js .rv{opacity:1;transform:none}
}
@media print{
  .hdr,.burger,.lang,.hero__media,.split__media,.intl__media,.contact__form,.draftbar{display:none!important}
  body{color:#000}
  .hero,.refs,.intl,.ftr,.split--navy{background:#fff!important;color:#000!important}
}