@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/inter-400-latinext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/inter-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/inter-500-latinext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/inter-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/inter-600-latinext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/inter-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/jakarta-600-latinext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/jakarta-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:700;font-display:swap;
  src:url('fonts/jakarta-700-latinext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:700;font-display:swap;
  src:url('fonts/jakarta-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:800;font-display:swap;
  src:url('fonts/jakarta-800-latinext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:800;font-display:swap;
  src:url('fonts/jakarta-800-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

:root{
  /* Marke */
  --mint:#BAD6D0;
  --mint-soft:#EAF3F1;
  --orange:#ED6300;

  /* Flächen */
  --ground:#FCFCFB;          /* 70–80 % — Off-White */
  --ground-2:#EAF3F1;        /* 10–20 % — Mint-Tint für Karten und Boxen */
  --ground-3:#BAD6D0;        /* Mint voll — Tabellenkopf, Badges */
  --line:#CBDEDA;
  --line-soft:#E3EDEB;

  /* Schrift */
  --ink:#0D0D0D;             /* Soft Black */
  --ink-2:#3C4442;
  --muted:#6E7A77;

  /* Akzent — ca. 5 % */
  --accent:#ED6300;
  --accent-hover:#D45900;
  --accent-text:#C24E00;     /* dunklere Variante für kleinen Text, siehe Doku */
  --accent-line:rgba(194,78,0,.35);
  --accent-soft:rgba(237,99,0,.08);
  --on-accent:#FFFFFF;

  --header-bg:rgba(252,252,251,.9);
  --glow:radial-gradient(1000px 600px at 82% -12%, rgba(186,214,208,.42), transparent 62%);
  --ph-fill:rgba(13,13,13,.014);
  --ph-hatch:rgba(13,13,13,.05);
  --shadow:0 10px 30px rgba(13,13,13,.1);

  --display:"Plus Jakarta Sans","Inter",system-ui,sans-serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;

  --t-hero:clamp(2.1rem,4.1vw,3.5rem);
  --t-h2:clamp(1.6rem,2.7vw,2.4rem);
  --t-h3:clamp(1.15rem,1.6vw,1.45rem);
  --t-lead:clamp(1.05rem,1.45vw,1.28rem);
  --t-body:1.0625rem;
  --t-label:.6875rem;

  /* Radius-Skala, abgeleitet vom Logo-Lockup (~20 % der Höhe) */
  --r-xl:28px;   /* Prinzip-Panel */
  --r-lg:18px;   /* Karten, Tabelle, Formular, Bildflächen */
  --r-md:10px;   /* Buttons, Eingabefelder */
  --r-sm:7px;    /* Chips, Badges */

  --rail:170px;
  --maxw:1200px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
section[id],article[id]{scroll-margin-top:104px}
body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--t-body);
  line-height:1.7;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:"";
  position:fixed;inset:0;pointer-events:none;z-index:0;
  background:var(--glow);
}
main,header,footer{position:relative;z-index:1}

h1,h2,h3{font-family:var(--display);margin:0;text-wrap:balance}
h1{font-size:var(--t-hero);font-weight:800;line-height:1.08;letter-spacing:-.022em}
h2{font-size:var(--t-h2);font-weight:700;line-height:1.16;letter-spacing:-.018em}
h3{font-size:var(--t-h3);font-weight:700;line-height:1.28;letter-spacing:-.014em}
p{margin:0}
a{color:inherit}
ul{margin:0;padding:0;list-style:none}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(20px,5vw,56px)}

.label{
  font-family:var(--sans);font-size:var(--t-label);font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);line-height:1.5;
}
.lead{font-size:var(--t-lead);line-height:1.6;color:var(--ink-2);max-width:58ch}
.body{color:var(--ink-2);max-width:64ch}
.body + .body{margin-top:1.1em}
.body strong{font-weight:600;color:var(--ink)}
.body em{font-style:normal;font-weight:600;color:var(--ink)}

/* ---------- header ---------- */
.site{
  position:sticky;top:0;z-index:40;
  border-top:3px solid var(--accent);
  background:var(--header-bg);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft);
}
.site__in{display:flex;align-items:center;gap:clamp(18px,4vw,48px);height:80px}
.logo{display:block;flex:none;line-height:0}
.logo img{height:21px;width:auto;max-width:none;display:block}
.nav{display:flex;gap:clamp(12px,1.8vw,24px);margin-left:auto;align-items:center}
.nav a{
  text-decoration:none;font-size:.8125rem;font-weight:500;color:var(--ink-2);white-space:nowrap;
  padding-block:6px;border-bottom:1px solid transparent;
  transition:color .18s ease,border-color .18s ease;
}
.nav a:hover{color:var(--ink);border-bottom-color:var(--accent)}
.btn{
  display:inline-flex;align-items:center;gap:.6em;
  background:var(--accent);color:var(--on-accent);
  font-family:var(--sans);font-size:.75rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;
  padding:.95em 1.35em;border:1px solid var(--accent);border-radius:var(--r-md);white-space:nowrap;
  text-decoration:none;transition:background .18s ease,border-color .18s ease;
}
.btn svg{width:12px;height:12px;flex:none}
.btn:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.btn--sm{padding:.8em 1.1em;font-size:.7rem}
.menu-btn{
  display:none;margin-left:auto;background:none;border:1px solid var(--line);color:var(--ink);
  font-family:var(--sans);font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  padding:.75em 1em;border-radius:var(--r-md);cursor:pointer;
}
.menu-panel{display:none;border-top:1px solid var(--line-soft);padding-block:14px 22px}
.menu-panel ul{display:grid;gap:2px}
.menu-panel a{text-decoration:none;color:var(--ink-2);font-size:.95rem;padding-block:9px;display:block;border-bottom:1px solid var(--line-soft)}

/* ---------- Sprachumschalter ----------
   Steht als Geschwister von .nav im Kopf und bleibt deshalb auch sichtbar,
   wenn die Navigation unter 920px im Menue verschwindet - ein englischer
   Besucher soll nicht erst das Hamburger-Menue oeffnen muessen.
   Muss nach .nav a stehen: gleiche Spezifitaet, spaetere Regel gewinnt. */
.langsw{display:flex;align-items:center;gap:.45em;flex:none;line-height:1}
.langsw a,.langsw strong{
  font-family:var(--sans);font-size:.6875rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;text-decoration:none;
  padding-block:6px;border-bottom:1px solid transparent;
}
.langsw a{color:var(--muted);transition:color .18s ease,border-color .18s ease}
.langsw a:hover{color:var(--ink);border-bottom-color:var(--accent)}
.langsw strong{color:var(--ink)}
.langsw span{color:var(--line);font-size:.6875rem;font-weight:400}

/* ---------- arrow link ---------- */
.arrow{
  display:inline-flex;align-items:center;gap:.5em;
  font-size:.75rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent-text);text-decoration:none;
  padding-bottom:4px;border-bottom:1px solid var(--accent-line);
  transition:border-color .18s ease,gap .18s ease;
}
.arrow:hover{border-bottom-color:var(--accent-text);gap:.85em}
.arrow svg{width:12px;height:12px;flex:none}
.links{display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center}

/* ---------- section grid ---------- */
.sec{border-top:1px solid var(--line-soft)}
.sec--tint{background:var(--mint-soft);--ground-2:#FFFFFF;--line-soft:#D8E6E2}
.sec__in{
  display:grid;grid-template-columns:var(--rail) minmax(0,1fr);
  gap:clamp(22px,4vw,60px);padding-block:clamp(58px,8vw,124px);
}
.sec__rail{padding-top:.5em}
.sec__rail .label{color:var(--accent-text)}
.sec__body{display:flex;flex-direction:column;gap:clamp(26px,3.4vw,48px);min-width:0;align-items:flex-start}
.sec__body > *{max-width:100%;width:100%}
.sec__body > .arrow{width:auto}

/* ---------- hero ---------- */
.hero__in{padding-block:clamp(64px,9vw,132px) clamp(56px,7vw,100px);display:flex;flex-direction:column;gap:clamp(28px,4vw,52px)}
.hero h1 .hl{color:var(--accent)}
.hero__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.78fr);gap:clamp(28px,4vw,64px);align-items:end}
.hero__actions{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center;margin-top:30px}

/* ---------- placeholders ---------- */
.ph{
  position:relative;border:1px solid var(--line);border-radius:var(--r-lg);
  background:
    linear-gradient(var(--ph-fill),var(--ph-fill)),
    repeating-linear-gradient(135deg,transparent 0 9px,var(--ph-hatch) 9px 10px);
  display:flex;align-items:flex-end;padding:16px;overflow:hidden;
}
.ph--portrait{aspect-ratio:4/5}
.ph__tag{
  position:absolute;top:14px;left:14px;
  font-size:.625rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:.35em .6em;background:var(--mint);
}
.ph__cap{font-size:.8125rem;color:var(--muted);max-width:46ch;line-height:1.5}

/* ---------- services ---------- */
.svc{
  display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.72fr);gap:clamp(22px,3.4vw,56px);
  padding-block:clamp(32px,3.6vw,46px);border-top:1px solid var(--line-soft);
}
.svc:first-of-type{border-top:0;padding-top:0}
.svc--full{grid-template-columns:minmax(0,1fr)}
.svc__main{display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.svc__side{display:flex;flex-direction:column;gap:14px}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chips li{
  font-size:.78rem;font-weight:500;color:var(--ink-2);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:.38em .68em;background:var(--ground-2);
}

/* ---------- matrix ---------- */
.matrix-wrap{overflow:auto hidden;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--ground-2)}
table{border-collapse:collapse;width:100%;min-width:720px;font-variant-numeric:tabular-nums}
caption{text-align:left;padding:15px 18px 0}
th,td{text-align:left;padding:14px 18px;border-bottom:1px solid var(--line-soft);vertical-align:top}
thead th{
  font-size:.625rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);
  background:var(--ground-3);border-bottom:1px solid var(--line);white-space:nowrap;
}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--ground)}
td.ch{font-family:var(--display);font-weight:700;font-size:.95rem;color:var(--ink);white-space:nowrap;letter-spacing:-.004em}
td.role span{display:inline-block;background:var(--mint);color:var(--ink);font-size:.625rem;letter-spacing:.1em;
  text-transform:uppercase;font-weight:600;padding:.34em .6em;border-radius:var(--r-sm);white-space:nowrap}
td.role{white-space:nowrap}
td.txt{color:var(--ink-2);font-size:.9375rem}

/* ---------- manifest ---------- */
.manifest{background:transparent;color:var(--ink);padding-block:clamp(10px,2vw,24px) clamp(50px,6vw,88px)}
.manifest__panel{
  background:var(--mint);border-radius:var(--r-xl);
  padding:clamp(34px,5vw,68px) clamp(24px,4vw,56px);
}
.manifest__in{
  display:grid;grid-template-columns:var(--rail) minmax(0,1fr);gap:clamp(22px,4vw,60px);
}
.manifest .label{color:rgba(13,13,13,.55)}
.manifest h2{font-weight:800;max-width:18ch;letter-spacing:-.024em}
.manifest p{color:rgba(13,13,13,.78);max-width:62ch;margin-top:24px}
.manifest .btn{margin-top:34px}

/* ---------- people ---------- */
.people{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,36px)}
.person{display:flex;flex-direction:column;gap:16px}
.person__name{font-family:var(--display);font-size:1.28rem;font-weight:700;line-height:1.24;letter-spacing:-.014em}
.person__role{margin-top:6px}

/* ---------- Funnel-Grafik ----------
   Drei Trapeze, die sich zu einem durchgehenden Trichter zusammensetzen.
   Die Mintskala traegt den Verlauf, die unterste Stufe steht in Soft Black.
   Einzige Akzentflaeche ist der Auslauf an der Spitze: dort kommt an, was
   der Trichter durchgelassen hat. Alle Beschriftungen sind echter Text -
   als Bild waere die Grafik fuer Suchmaschinen und KI-Systeme wertlos.
   Die Kachel steht hell, weil Stufe 1 auf vollem Mint unsichtbar waere. */
.funnel{background:var(--ground);border:1px solid var(--line);
  border-radius:var(--r-xl);padding:clamp(24px,3.4vw,44px)}
.funnel__body{display:flex;flex-direction:column;gap:6px}
.funnel__stufe,.funnel__auslauf-reihe{
  display:grid;grid-template-columns:clamp(250px,30%,340px) minmax(0,1fr);
  gap:clamp(16px,2.4vw,36px);align-items:center}
.funnel__band{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;text-align:center;min-height:96px;padding:16px 6px}
.funnel__band--1{clip-path:polygon(0 0,100% 0,91% 100%,9% 100%);background:#DCEAE7;color:var(--ink)}
.funnel__band--2{clip-path:polygon(9% 0,91% 0,82% 100%,18% 100%);background:var(--mint);color:var(--ink)}
.funnel__band--3{clip-path:polygon(18% 0,82% 0,73% 100%,27% 100%);background:var(--ink);color:#fff}
.funnel__rolle{font-size:.625rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.funnel__band--2 .funnel__rolle{color:#4A5755}
.funnel__band--3 .funnel__rolle{color:rgba(255,255,255,.62)}
.funnel__name{font-family:var(--display);font-size:1.0625rem;font-weight:700;letter-spacing:-.01em}
.funnel__auslauf{height:30px;clip-path:polygon(27% 0,73% 0,50% 100%);
  background:linear-gradient(180deg,var(--accent),rgba(237,99,0,.25))}
.funnel__info p{margin:0 0 12px;font-size:.9375rem;color:var(--ink-2);line-height:1.55;max-width:46ch}
.funnel__info .chips li{background:var(--mint-soft);border-color:var(--line);font-size:.72rem}
.funnel__fuss{margin-top:clamp(18px,2.4vw,26px);font-size:.9375rem;color:var(--ink-2);
  max-width:62ch;line-height:1.6}
.funnel__fuss b{font-weight:600;color:var(--ink)}
@media (max-width:760px){
  /* Die Verjuengung steckt in der Form selbst, nicht in der Spaltenbreite -
     sie bleibt deshalb auch einspaltig erhalten. */
  .funnel__stufe,.funnel__auslauf-reihe{grid-template-columns:minmax(0,1fr);gap:12px}
  .funnel__body{gap:20px}
  .funnel__info p{max-width:none}
}

/* ---------- case anatomy ---------- */
.anatomy{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line-soft);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.anatomy > div{background:var(--ground-2);padding:20px}
.anatomy dt{font-size:.625rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);margin-bottom:8px}
.anatomy dd{margin:0;color:var(--ink-2);font-size:.9375rem;line-height:1.55}
.metrics{display:flex;flex-wrap:wrap;gap:12px 36px;align-items:baseline}
.metric{font-family:var(--display);font-size:clamp(1.7rem,3.1vw,2.4rem);font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.022em;line-height:1.12}
.metric span{font-family:var(--sans);font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);display:block;font-weight:600;margin-top:6px}


/* ---------- contact ---------- */
.contact__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:clamp(28px,4vw,64px);align-items:start}
.form{display:flex;flex-direction:column;gap:16px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--ground-2);padding:clamp(20px,3vw,32px)}
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-size:.625rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.field input,.field textarea{
  background:var(--ground);border:1px solid var(--line);border-radius:var(--r-md);color:var(--ink);
  font-family:var(--sans);font-size:.9375rem;padding:.72em .8em;width:100%;
}
.field input:focus,.field textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
.field textarea{min-height:96px;resize:vertical}
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line);background:var(--ground-2)}
.foot__in{display:grid;grid-template-columns:1.25fr minmax(0,1fr) minmax(0,1fr) minmax(0,1.15fr);gap:clamp(24px,3vw,44px);padding-block:clamp(44px,5vw,68px)}
.foot__logo img{display:block;width:100%;max-width:300px;height:auto}
.foot h4{font-size:.625rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 14px}
.foot li{padding-block:5px}
.foot a{text-decoration:none;color:var(--ink-2);font-size:.9375rem;transition:color .18s ease;overflow-wrap:anywhere}
.foot a.mail{overflow-wrap:normal}
.foot a:hover{color:var(--accent-text)}
.foot__bottom{border-top:1px solid var(--line-soft);padding-block:20px;display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;align-items:center}
.foot__bottom span{font-size:.8125rem;color:var(--muted)}

:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

@media (max-width:920px){
  .nav{display:none}
  .menu-btn{display:block}
  .menu-panel[data-open="true"]{display:block}
  /* .nav traegt sonst das margin-left:auto. Faellt sie weg, uebernimmt es
     der Sprachumschalter, sonst klebt er links am Logo. */
  .langsw{margin-left:auto}
  .menu-btn{margin-left:14px}
}
@media (max-width:900px){
  :root{--rail:0px}
  .sec__in,.manifest__in{grid-template-columns:minmax(0,1fr);gap:20px}
  .sec__rail{padding-top:0}
  .hero__grid,.svc,.contact__grid{grid-template-columns:minmax(0,1fr)}
  .hero__grid{align-items:start}
  .anatomy{grid-template-columns:minmax(0,1fr)}
  .foot__in{grid-template-columns:repeat(2,minmax(0,1fr))}
  .site__in{height:68px}
  .logo img{height:18px}
  .foot__logo img{max-width:260px}
}
@media (max-width:720px){
  .people{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  .foot__in{grid-template-columns:minmax(0,1fr)}
  .two{grid-template-columns:1fr}
  /* Im Kopf wird es eng: Wortmarke, Sprache und Menuetaste muessen
     nebeneinander passen, sonst scrollt die Seite waagrecht. Deshalb bleibt
     hier nur die Zielsprache stehen - welche Sprache gerade laeuft, sagt
     die Seite selbst. */
  .langsw strong,.langsw span{display:none}
  .site__in{gap:12px}
  .menu-btn{margin-left:8px;padding:.75em .85em}
}
@media (max-width:420px){
  .logo img{height:16px}
}
/* Auf sehr schmalen Geraeten (iPhone SE der ersten Generation, 320px) lief die
   Kopfzeile schon vor dem Sprachumschalter ueber und erzeugte waagrechtes
   Scrollen auf der ganzen Seite. Die Wortmarke ist dort der groesste Posten. */
@media (max-width:380px){
  .logo img{height:14px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}

/* ---------- Formular: Honeypot und Hinweis ---------- */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__note{font-size:.8125rem;line-height:1.55;color:var(--muted)}
.form__note a{color:var(--accent-text)}

/* ---------- Rechtstexte ---------- */
.legal{max-width:68ch}
.legal h2{margin-top:clamp(32px,4vw,52px)}
.legal h3{margin-top:28px}
.legal p,.legal ul{color:var(--ink-2);margin-top:14px}
.legal ul{list-style:disc;padding-left:1.3em}
.legal li{margin-top:6px}
.legal a{color:var(--accent-text)}
.legal .ph-note{background:var(--mint-soft);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 20px;color:var(--ink);margin-top:20px}
.legal dl{margin-top:14px}
.legal dt{font-weight:600;color:var(--ink);margin-top:14px}
.legal dd{margin:4px 0 0;color:var(--ink-2)}

/* ---------- Statusseiten ---------- */
.status{display:flex;flex-direction:column;gap:20px;align-items:flex-start;padding-block:clamp(72px,12vw,160px)}

/* height:auto ist noetig, weil die width/height-Attribute am <img> sonst als
   Praesentationshinweis eine feste Hoehe setzen und aspect-ratio aushebeln. */
.person__img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r-lg)}

.legal mark{background:var(--accent-soft);color:var(--accent-text);padding:.1em .3em;border-radius:4px}

/* ---------- Cookie-Banner (CookieConsent v3) ----------
   Bindet die Bibliothek an die Marken-Tokens. Die Datei
   assets/cookieconsent.css bleibt unveraendert, damit ein Update
   der Bibliothek nichts ueberschreibt. */
#cc-main{
  --cc-font-family:var(--sans);
  --cc-bg:var(--ground);
  --cc-primary-color:var(--ink);
  --cc-secondary-color:var(--ink-2);
  --cc-link-color:var(--accent-text);

  --cc-btn-primary-bg:var(--accent);
  --cc-btn-primary-border-color:var(--accent);
  --cc-btn-primary-color:var(--on-accent);
  --cc-btn-primary-hover-bg:var(--accent-hover);
  --cc-btn-primary-hover-border-color:var(--accent-hover);
  --cc-btn-primary-hover-color:var(--on-accent);

  --cc-btn-secondary-bg:var(--ground-2);
  --cc-btn-secondary-border-color:var(--line);
  --cc-btn-secondary-color:var(--ink);
  --cc-btn-secondary-hover-bg:var(--mint);
  --cc-btn-secondary-hover-border-color:var(--line);
  --cc-btn-secondary-hover-color:var(--ink);

  --cc-cookie-category-block-bg:var(--ground-2);
  --cc-cookie-category-block-border:var(--line);
  --cc-cookie-category-block-hover-bg:var(--mint-soft);
  --cc-cookie-category-block-hover-border:var(--line);
  --cc-cookie-category-expanded-block-bg:var(--ground);
  --cc-cookie-category-expanded-block-hover-bg:var(--ground-2);

  --cc-separator-border-color:var(--line-soft);
  --cc-section-category-border:var(--line);
  --cc-footer-bg:var(--ground-2);
  --cc-footer-color:var(--muted);
  --cc-footer-border-color:var(--line-soft);

  --cc-toggle-on-bg:var(--accent);
  --cc-toggle-off-bg:var(--muted);
  --cc-toggle-on-knob-bg:var(--ground);
  --cc-toggle-off-knob-bg:var(--ground);
  --cc-toggle-readonly-bg:var(--line);
  --cc-toggle-readonly-knob-bg:var(--ground);
  --cc-toggle-readonly-knob-icon-color:var(--ink-2);
  --cc-toggle-enabled-icon-color:var(--on-accent);
  --cc-toggle-disabled-icon-color:var(--ground);

  --cc-overlay-bg:rgba(13,13,13,.55);
  --cc-btn-border-radius:var(--r-md);
  --cc-modal-border-radius:var(--r-lg);
  --cc-pm-toggle-border-radius:20px;
  --cc-webkit-scrollbar-bg:var(--line);
  --cc-webkit-scrollbar-hover-bg:var(--muted);
}
/* Rahmen statt Schatten, wie im Rest der Marke */
#cc-main .cm,
#cc-main .pm{border:1px solid var(--line);box-shadow:none}
/* Buttons wie die uebrigen: versal, gesperrt, 600 */
#cc-main .cm__btn,
#cc-main .pm__btn{
  font-size:.75rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
}
/* Zustimmen und Ablehnen sind bewusst GLEICH gestaltet - gleiche Groesse,
   gleiche Farbe, gleiche Stelle. Das ist die Anforderung an eine wirksame
   Einwilligung und zugleich markenkonform: Orange bleibt dem einen Button
   der Seite vorbehalten, nicht zwei gleichrangigen Entscheidungen. */
#cc-main .cm__btn--close,
#cc-main .cm__btn[data-role="all"],
#cc-main .cm__btn[data-role="necessary"],
#cc-main .pm__btn[data-role="all"],
#cc-main .pm__btn[data-role="necessary"],
#cc-main .pm__btn[data-role="save"]{
  background:var(--ground-2);
  border-color:var(--line);
  color:var(--ink);
}
#cc-main .cm__btn[data-role="all"]:hover,
#cc-main .cm__btn[data-role="necessary"]:hover,
#cc-main .pm__btn[data-role="all"]:hover,
#cc-main .pm__btn[data-role="necessary"]:hover,
#cc-main .pm__btn[data-role="save"]:hover{
  background:var(--mint);
  border-color:var(--line);
  color:var(--ink);
}
/* Die dritte Schaltflaeche ist leiser, aber vollwertig erreichbar */
#cc-main .cm__btn[data-role="show"]{
  background:transparent;
  border-color:transparent;
  color:var(--accent-text);
  text-decoration:underline;
  text-underline-offset:4px;
}
#cc-main .cm__btn[data-role="show"]:hover{
  background:transparent;
  color:var(--accent-text);
}
#cc-main .cm__title,
#cc-main .pm__title{font-family:var(--display);letter-spacing:-.014em;line-height:1.28}
/* Etwas mehr Raum als die Voreinstellung: der Kasten steht mittig auf
   abgedunkelter Seite und darf dort Gewicht haben. */
/* Hoehere Spezifitaet als die Bibliothek, weil style.css VOR
   cookieconsent.css geladen wird und sonst die Voreinstellung gewinnt. */
#cc-main .cm.cm--box{max-width:30rem}
#cc-main .cm.cm--box .cm__texts{padding-block:1.4rem}
/* Trennzeichen im Fuss nicht an den Link kleben */
#cc-main .cm__links{display:flex;gap:.5em;align-items:center}