/* ==========================================================================
   NeoVital — Designsystem · site.css
   Eine Schrift (IBM Plex Sans, variable) · Navy + Weiß + zwei Graus + ein
   gedeckter Akzent · 12-Spalten-Raster · randlinierte Karten (4 px) ·
   nummerierte Abläufe · mobile-first (320–1920 px) · keine externen Requests
   ==========================================================================
   Inhalt
    1  Schrift (@font-face)
    2  Tokens (Farben, Typo, Abstände, Radien, Layout)
    3  Base / Reset
    4  Typografie (Überschriften, Eyebrow, Lead, Hilfsklassen)
    5  Layout-Utilities (container, grid-12, grid, stack, flow, cluster)
    6  Buttons & Links
    7  Header (Service-Zeile, Hauptzeile, Navigation, Mobilmenü, Connect-Dropdown)
    8  Ankündigungsleiste
    9  Hero (mit Bild · ohne Bild · Split/Produktkopf · Stellenkopf)
   10  Sektionen & Sektionskopf (Eyebrow / H2 / Intro)
   11  Karten (cards 2/3/4, Link-Karten, Foto-Karten) & Index-Liste (ohne Box)
   12  Schritte (steps), verbundene Schritte, Stepper, Timeline
   13  Split Bild+Text, Checklisten, Bullets
   14  Band (Kicker + Zitat + Bild | Rollen-Liste), Rollen, Leitsätze, Fakten
   15  Einsatzgebiete (Map-Karten), Stats-dl, Definitionslisten, Tabellen
   16  Wundnotdienst (dunkel), Statement-Band
   17  Schluss-Kontaktband „So erreichen Sie uns“
   18  Karriere-Band
   19  App-Band + statisches Mockup, Store-Zeilen, Badges
   20  Karriere: Stellenkarten, Stellenkopf, Zwei Listen, Vorteile, Werte, Foto-Raster, Personenblock
   21  Formulare (alle Feldtypen), Hinweise, Aside-Karten, Formular-Layout
   22  Shop: Breadcrumb, Chips, Kategorie-Kacheln, Produkt-Platzhalter, Related-Box
   23  Dashboard-Mock (NeoVital Connect), KPI, Aufgabenliste
   24  Rechtstexte / Prosa
   25  Footer
   26  Fokus, Bewegung, Druck
   ========================================================================== */

/* 1 ▸ Schrift ---------------------------------------------------------------
   Eine variable Datei deckt 400–700 ab (genutzt: 400 Fließtext, 500 UI, 600 Titel). */
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400 700;font-display:swap;src:url("/assets/fonts/ibm-plex-sans.woff2") format("woff2")}

/* 2 ▸ Tokens ----------------------------------------------------------------- */
:root{
  /* Farben — Navy-Familie (Logo #1a4278), Graus im Navy-Hue, ein Akzent. 14 Werte gesamt. */
  --c-white:#ffffff;
  --c-grey-100:#f3f5f8;          /* getönte Sektionen, Hero-Fläche, Aside-Karten */
  --c-grey-200:#e4e9ef;          /* Ankündigungsleiste, Flächen 2. Ordnung */
  --c-border:#cfd6df;            /* Hairlines, Kartenränder */
  --c-border-strong:#aeb8c6;     /* Oberlinien von Listen, Tabellenkopf, Chip-Rand – NICHT für Eingabefelder (2:1) */
  --c-muted:#55627a;             /* Sekundärtext (6.2:1 auf Weiß, 5.6:1 auf Grey-100); Rahmen von Eingabefeldern (≥ 3:1) */
  --c-ink:#1b2638;               /* Fließtext (15:1) */
  --c-navy-700:#1a4278;          /* Primär: Buttons, aktive Navigation, Nummern */
  --c-navy-900:#0b2545;          /* Überschriften, Wundnotdienst-Band, Footer, Hover */
  --c-accent:#2a6496;            /* Eyebrows, Textlinks, Fokusring (6.3:1 auf Weiß) */
  --c-on-dark-muted:#d3dce9;     /* Sekundärtext auf Navy (7:1 auf Navy-700, 10:1 auf Navy-900) */
  --c-success:#1f6b3a;           /* nur Formular-Erfolg */
  --c-error:#b3261e;             /* nur Formular-Fehler */
  --c-on-dark-rule:var(--c-navy-700);   /* Hairlines auf Navy-900 */
  --shadow-pop:0 4px 16px rgba(11,37,69,.14);   /* einziger Schatten: Dropdown / Mobilmenü */

  /* Typografie */
  --ff-sans:"IBM Plex Sans","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --fs-micro:.8125rem;                                  /* 13 px – Eyebrow, Captions, Badges (nie darunter) */
  --fs-small:.9375rem;                                  /* 15 px – Nav, Meta, Hinweise, Footer */
  --fs-body:1rem;                                       /* 16 px → 17 px ab 1024 */
  --fs-lead:clamp(1.0625rem,1rem + .4vw,1.25rem);       /* 17–20 px */
  --fs-h4:1.0625rem;
  --fs-h3:clamp(1.125rem,1.05rem + .3vw,1.3125rem);     /* 18–21 px */
  --fs-h2:clamp(1.5rem,1.2rem + 1.1vw,2.125rem);        /* 24–34 px, max 32ch → ≤ 2 Zeilen ab 1024 */
  --fs-h1:clamp(1.875rem,1.45rem + 1.6vw,2.75rem);      /* 30–44 px, max 22ch → 2 Zeilen ab 1280 */
  --fs-display:clamp(2.125rem,1.6rem + 2.2vw,3.25rem);  /* nur Statement-Band */
  --fs-num:2rem;                                        /* Schrittnummern */
  --fs-num-sm:1.5rem;                                   /* Rollen-Nummern */
  --fs-ui:1rem;                                         /* Buttons, Eingabefelder, Desktop-Nav ab 1280 – bleibt 16 px */
  --fs-nav-mobile:1.125rem;                             /* Mobilmenü-Links */
  --lh-tight:1.15; --lh-heading:1.25; --lh-body:1.6;

  /* Abstände (4er-Raster) */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px;
  --section-y:clamp(3rem,2rem + 4vw,6rem);              /* 48 → 96 px, für JEDE Sektion */
  --head-gap:var(--s-6);                                /* Sektionskopf → Inhalt */

  /* Form */
  --r-1:2px;                                            /* Inputs, Chips, Badges */
  --r-2:4px;                                            /* Buttons, Karten, Panels */
  --r-3:8px;                                            /* Bilder, große Rahmen */

  /* Layout */
  --container:1200px; --container-narrow:800px; --container-form:640px;
  --gutter:16px; --gap:24px;
  --header-h:56px; --meta-h:32px; --announce-h:44px;
  --t-fast:150ms;
}
@media (min-width:480px){:root{--gutter:24px}}
@media (min-width:1024px){:root{--gutter:32px;--gap:32px;--fs-body:1.0625rem;--head-gap:var(--s-7);--announce-h:32px}}

/* 3 ▸ Base / Reset ------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
html.menu-open{overflow:hidden}
body{margin:0;font-family:var(--ff-sans);font-size:var(--fs-body);line-height:var(--lh-body);color:var(--c-ink);background:var(--c-white);-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd,ul,ol{margin:0}
ul,ol{padding:0}
ul[class],ol[class],nav ul{list-style:none}
img,svg,video{display:block;max-width:100%}
img{height:auto}
svg{flex:none}
a{color:var(--c-accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;transition:color var(--t-fast) ease-out}
a:hover{color:var(--c-navy-700)}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
address{font-style:normal}
hr{border:0;border-top:1px solid var(--c-border);margin:var(--s-6) 0}
strong,b{font-weight:600}
em{font-style:italic}
[id]{scroll-margin-top:calc(var(--header-h) + var(--s-5))}
::selection{background:var(--c-navy-700);color:var(--c-white)}

/* 4 ▸ Typografie --------------------------------------------------------------- */
h1,h2,h3,h4{font-weight:600;color:var(--c-navy-900);text-wrap:balance;hyphens:manual}
h1,.h1{font-size:var(--fs-h1);line-height:var(--lh-tight);letter-spacing:-.01em;max-width:22ch}
h2,.h2{font-size:var(--fs-h2);line-height:1.18;letter-spacing:-.005em;max-width:32ch}
h3,.h3{font-size:var(--fs-h3);line-height:var(--lh-heading)}
h4,.h4{font-size:var(--fs-h4);line-height:var(--lh-heading)}
h1 em,h2 em,h3 em{font-style:normal}        /* kursive Serif-Akzente des Originals → ruhig, gleiches Gewicht */
p{max-width:65ch}
.lead{font-size:var(--fs-lead);line-height:1.5;max-width:60ch}
.small{font-size:var(--fs-small)}
.micro{font-size:var(--fs-micro)}
.muted{color:var(--c-muted)}
.eyebrow{display:block;font-size:var(--fs-micro);font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--c-accent);margin:0 0 var(--s-3);max-width:none}
.eyebrow--on-dark{color:var(--c-on-dark-muted)}
.text-center{text-align:center}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.nobr{white-space:nowrap}                    /* unteilbare Wörter: „E-Mail“, „Groß-Gerau“, mehrteilige Ortsnamen */
@media (max-width:479px){.lead,.hero__lead{font-size:var(--fs-body)}}

/* 5 ▸ Layout-Utilities ---------------------------------------------------------- */
.container{width:100%;max-width:calc(var(--container) + 2*var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.container--narrow{max-width:calc(var(--container-narrow) + 2*var(--gutter))}
.container--form{max-width:calc(var(--container-form) + 2*var(--gutter))}
.grid-12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap)}
.grid-12>*{grid-column:1 / -1;min-width:0}
.grid{display:grid;gap:var(--gap)}
.grid>*{min-width:0}
@media (min-width:640px){.grid--2,.grid--3,.grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:1024px){
  .col-3{grid-column:span 3}.col-4{grid-column:span 4}.col-5{grid-column:span 5}.col-6{grid-column:span 6}
  .col-7{grid-column:span 7}.col-8{grid-column:span 8}.col-9{grid-column:span 9}.col-12{grid-column:1 / -1}
  .col-start-7{grid-column:7 / -1}.col-start-8{grid-column:8 / -1}   /* „ab Spalte N bis zum Rand“ – ein nachfolgendes col-N würde die Endlinie zurücksetzen */
}
.stack>*+*{margin-top:var(--stack,var(--s-4))}
.stack--sm{--stack:var(--s-2)}.stack--lg{--stack:var(--s-6)}
.flow>*+*{margin-top:var(--flow,var(--s-4))}
.cluster{display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-4);align-items:center}
.cluster--between{justify-content:space-between}
/* Bildausschnitt-Hilfsklassen: setzen --focus (object-position) für Hero-/Split-/Band-Bilder */
.img-focus-left{--focus:25% 35%}
.img-focus-center{--focus:50% 35%}
.img-focus-top{--focus:50% 15%}
.img-focus-right{--focus:85% 30%}

/* 6 ▸ Buttons & Links ----------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);min-height:48px;padding:var(--s-2) var(--s-5);border:1px solid transparent;border-radius:var(--r-2);font-size:var(--fs-ui);font-weight:500;line-height:1.3;text-decoration:none;text-align:center;cursor:pointer;touch-action:manipulation;transition:background-color var(--t-fast) ease-out,border-color var(--t-fast) ease-out,color var(--t-fast) ease-out}
.btn svg{width:20px;height:20px}
.btn--primary{background:var(--c-navy-700);border-color:var(--c-navy-700);color:var(--c-white)}
.btn--primary:hover{background:var(--c-navy-900);border-color:var(--c-navy-900);color:var(--c-white)}
.btn--secondary{background:var(--c-white);border-color:var(--c-navy-700);color:var(--c-navy-700)}
.btn--secondary:hover{background:var(--c-grey-100);color:var(--c-navy-900)}
/* auf dunklen Flächen (Wundnotdienst-Text, Band dunkel) */
.btn--on-dark.btn--primary{background:var(--c-white);border-color:var(--c-white);color:var(--c-navy-700)}
.btn--on-dark.btn--primary:hover{background:var(--c-grey-100);border-color:var(--c-grey-100);color:var(--c-navy-900)}
.btn--on-dark.btn--secondary{background:transparent;border-color:var(--c-on-dark-muted);color:var(--c-white)}
.btn--on-dark.btn--secondary:hover{background:var(--c-navy-700);border-color:var(--c-white);color:var(--c-white)}
.btn--block{display:flex;width:100%;padding-inline:var(--s-4)}
.btn--sm{min-height:44px;padding:var(--s-2) var(--s-4);font-size:var(--fs-small)}
.btn-icon{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--c-border);border-radius:var(--r-2);color:var(--c-navy-700);background:var(--c-white);text-decoration:none;touch-action:manipulation}
.btn-icon svg{width:22px;height:22px}
.btn-icon:hover{border-color:var(--c-navy-700);color:var(--c-navy-900)}
/* Tertiär: Textlink mit Pfeil – inline, damit der Pfeil beim Umbruch dem letzten Wort folgt; 44-px-Tapfläche wie bei Inline-Links */
.link-arrow{display:inline-block;padding-block:var(--s-3);margin-block:calc(-1 * var(--s-3));font-weight:500;color:var(--c-navy-700);text-decoration:none}
.link-arrow svg{display:inline-block;width:18px;height:18px;vertical-align:-.2em;margin-left:var(--s-1)}
.link-arrow:hover{color:var(--c-accent);text-decoration:underline;text-underline-offset:.25em}
.back-link{display:inline-flex;align-items:center;gap:var(--s-2);min-height:44px;font-size:var(--fs-small);font-weight:500;color:var(--c-muted);text-decoration:none}
.back-link svg{width:18px;height:18px}
.back-link:hover{color:var(--c-navy-700);text-decoration:underline}
/* Inline-Links im Fließtext: ≥ 44 px Tap-Fläche ohne Layoutänderung */
main p a:not([class]),main li a:not([class]),main dd a:not([class]),.note a{display:inline-block;padding-block:var(--s-3);margin-block:calc(-1 * var(--s-3));overflow-wrap:anywhere}
/* Button-Zeilen (Hero, Band, Split, Sektionsfuß, Karriere-Band, Formular): unter 480 px volle Breite, darüber natürliche Breite */
@media (max-width:479px){.hero__actions .btn,.band__actions .btn,.split__actions .btn,.section__foot .btn,.career-band__body .btn,.form__actions .btn{width:100%}}

/* 7 ▸ Header --------------------------------------------------------------------- */
.skip-link{position:absolute;top:0;left:0;z-index:100;min-height:44px;padding:var(--s-3) var(--s-4);background:var(--c-navy-700);color:var(--c-white);font-weight:500;text-decoration:none;transform:translateY(-130%);border-radius:0 0 var(--r-2) var(--r-2)}
.skip-link:focus{transform:none;outline:2px solid var(--c-white);outline-offset:-4px}

.site-header{position:sticky;top:0;z-index:50;background:var(--c-white)}
/* Service-Zeile (nur ≥ 1024): Telefon · Neovital Connect ▾ · Karriere · Shop */
.site-header__meta{display:none;background:var(--c-grey-100);border-bottom:1px solid var(--c-border);height:var(--meta-h)}
.site-header__meta-row{position:relative;display:flex;justify-content:flex-end;align-items:center;height:100%;gap:var(--s-2)}
.meta-link{display:inline-flex;align-items:center;gap:var(--s-2);min-height:var(--meta-h);padding:0 var(--s-3);font-size:var(--fs-small);font-weight:500;color:var(--c-ink);text-decoration:none;cursor:pointer;white-space:nowrap}
.meta-link svg{width:16px;height:16px;color:var(--c-navy-700)}
.meta-link:hover{color:var(--c-navy-700);text-decoration:underline;text-underline-offset:.25em}
.meta-link[aria-current="page"]{color:var(--c-navy-700);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.3em}
.meta-link:focus-visible{outline-offset:-3px}
/* Hauptzeile (sticky) */
.site-header__row{height:var(--header-h);border-bottom:1px solid var(--c-border);background:var(--c-white)}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);height:100%}
.logo{display:inline-flex;align-items:center;min-height:44px;padding-block:var(--s-1);text-decoration:none;flex:none}
.logo img{height:40px;width:auto}   /* Unterzeile „Innovative Wundversorgung“ muss lesbar bleiben: 40 px, ab 1280 48 px */
.nav{display:none}
.site-header__actions{display:flex;align-items:center;gap:var(--s-2)}
.site-header__cta{display:none}
.nav-toggle{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);min-width:44px;height:44px;padding:0 var(--s-3);border:1px solid var(--c-border);border-radius:var(--r-2);color:var(--c-navy-700);font-size:var(--fs-small);font-weight:500;background:var(--c-white);touch-action:manipulation}
.nav-toggle svg{width:22px;height:22px}
.nav-toggle[aria-expanded="true"]{background:var(--c-navy-700);border-color:var(--c-navy-700);color:var(--c-white)}
.nav-toggle svg[hidden]{display:none}
/* Mobilmenü (< 1024): fixiertes, scrollbares Panel unter der Hauptzeile */
.mobile-nav{position:fixed;left:0;right:0;top:var(--header-h);bottom:0;z-index:49;overflow-y:auto;background:var(--c-white);border-top:1px solid var(--c-border);padding-block:var(--s-4) var(--s-7);box-shadow:var(--shadow-pop)}
.js .mobile-nav{display:none}
.js .mobile-nav.is-open{display:block}
.no-js .mobile-nav{position:static;box-shadow:none;padding-block:var(--s-3) var(--s-5)}   /* ohne JS: Menü inline unter dem Kopf */
.no-js .nav-toggle{display:none}
.mobile-nav__list{border-top:1px solid var(--c-border)}
.mobile-nav__list li{border-bottom:1px solid var(--c-border)}
.mobile-nav__list a{display:flex;align-items:center;min-height:52px;padding:var(--s-3) 0;font-size:var(--fs-nav-mobile);font-weight:500;color:var(--c-ink);text-decoration:none}
.mobile-nav__list a[aria-current="page"]{color:var(--c-navy-700);border-left:3px solid var(--c-navy-700);padding-left:var(--s-4)}
.mobile-nav__actions{display:grid;gap:var(--s-3);margin-top:var(--s-5)}
.mobile-nav__app{margin-top:var(--s-6);padding-top:var(--s-5);border-top:1px solid var(--c-border)}
.mobile-nav__app .store-list{margin-bottom:var(--s-3)}
.mobile-nav__app .link-arrow{margin-top:0}
/* Connect-Dropdown (details/summary): Panel hängt UNTER der Hauptzeile (rechts bündig mit dem Primärbutton), verdeckt nie Navigation oder CTA */
.connect-menu{position:static;display:flex}             /* Panel richtet sich an der Container-Kante aus (.site-header__meta-row) */
.connect-menu summary{list-style:none}
.connect-menu summary::-webkit-details-marker{display:none}
.connect-menu summary svg:last-child{color:var(--c-muted);transition:transform var(--t-fast) ease-out}
.connect-menu[open] summary svg:last-child{transform:rotate(180deg)}
.connect-menu[open] summary{color:var(--c-navy-700)}
.connect-panel{position:absolute;right:var(--gutter);top:calc(100% + var(--header-h) + 1px);z-index:60;width:22rem;padding:var(--s-5);background:var(--c-white);border:1px solid var(--c-border);border-radius:var(--r-2);box-shadow:var(--shadow-pop)}
.connect-panel__head{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:var(--s-3);align-items:center;margin-bottom:var(--s-4)}
.connect-panel__head img{grid-row:1 / span 2;width:40px;height:40px;border-radius:var(--r-2)}
.connect-panel__title{font-weight:600;color:var(--c-navy-900)}
.connect-panel__status{font-size:var(--fs-small);color:var(--c-muted)}
.connect-panel .store-list{margin-bottom:var(--s-3)}
.connect-panel .link-arrow{display:block;min-height:44px;padding-block:10px;margin-block:0;white-space:nowrap}
@media (min-width:1024px){
  .site-header{top:calc(-1 * var(--meta-h))}      /* Service-Zeile scrollt weg, Hauptzeile bleibt (56 px) */
  .site-header__meta{display:block}
  .nav{display:block;flex:1;min-width:0}
  .nav__list{display:flex;justify-content:center;gap:var(--s-4);height:var(--header-h)}
  .nav__list a{display:inline-flex;align-items:center;height:100%;padding:0 var(--s-1);font-size:var(--fs-small);font-weight:500;color:var(--c-ink);text-decoration:none;white-space:nowrap;position:relative}
  .nav__list a::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:transparent;transition:background-color var(--t-fast) ease-out}
  .nav__list a:hover{color:var(--c-navy-700)}
  .nav__list a:hover::after{background:var(--c-border-strong)}
  .nav__list a[aria-current="page"]{color:var(--c-navy-700)}
  .nav__list a[aria-current="page"]::after{background:var(--c-navy-700)}
  .site-header__cta{display:inline-flex;min-height:44px;padding:var(--s-2) var(--s-4);font-size:var(--fs-small)}
  .site-header__phone,.nav-toggle,.mobile-nav{display:none!important}
}
@media (min-width:1280px){.logo img{height:48px}.nav__list{gap:var(--s-6)}.nav__list a{font-size:var(--fs-ui)}.site-header__cta{padding:var(--s-2) var(--s-5);font-size:var(--fs-ui)}}

/* 8 ▸ Ankündigungsleiste (unter dem Kopf, NICHT sticky; linksbündig, Pfeil rechts fixiert) */
.announce{display:block;background:var(--c-grey-200);color:var(--c-navy-900);font-size:var(--fs-small);line-height:1.4;text-decoration:none;border-bottom:1px solid var(--c-border)}
.announce__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);min-height:var(--announce-h);padding-block:var(--s-1)}
.announce strong{font-weight:600}
.announce svg{width:18px;height:18px;flex:none;color:var(--c-accent)}
.announce:hover{color:var(--c-navy-700);text-decoration:underline;text-underline-offset:.2em}
@media (min-width:1024px){.announce__inner{justify-content:flex-start}}

/* 9 ▸ Hero ---------------------------------------------------------------------- */
/* Hero mit Bild: helle Fläche, Text 7/12 links, Foto 5/12 rechts (ab 1024 füllt es die Texthöhe) */
.hero{background:var(--c-grey-100);border-bottom:1px solid var(--c-border);padding-block:var(--section-y)}
.hero__grid{align-items:stretch}
.hero__title{color:var(--c-navy-900);max-width:26ch}
.hero__lead{color:var(--c-muted);font-size:var(--fs-lead);line-height:1.5;max-width:58ch;margin-top:var(--s-5)}
.hero__actions{margin-top:var(--s-6)}
.hero__media{position:relative;margin:0}
.hero__media img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:var(--focus,50% 35%);border-radius:var(--r-3);border:1px solid var(--c-border);background:var(--c-grey-200)}
.hero__stats{margin-top:var(--s-2)}
@media (min-width:480px){.hero__actions .btn{min-width:12rem}}
@media (min-width:768px){.hero__media img{aspect-ratio:3/2}}
@media (min-width:1024px){
  .hero__body{grid-column:1 / span 7;grid-row:1;align-self:center;padding-right:var(--s-5)}
  .hero__stats{grid-column:1 / span 7;grid-row:2;align-self:end;margin-top:0}
  .hero__media{grid-column:8 / -1;grid-row:1 / span 2;min-height:24rem}
  .hero__media img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto}
}
@media (min-width:1024px) and (max-width:1279px){
  .hero .img-focus-right{--focus:70% 30%}   /* 5/12-Spalte ist ein schmales Hochformat-Fenster: Fokus Richtung Mitte, Gesichter bleiben sichtbar */
  .hero .img-focus-left{--focus:30% 35%}
}
/* Hero ohne Bild: Textkopf (Pflegebox, Shop, Impressum, Datenschutz) */
.hero--plain{background:var(--c-white);border-bottom:1px solid var(--c-border)}
.hero--plain .hero__body{max-width:62ch}
.hero--plain .hero__lead{margin-top:var(--s-4)}
/* Hero-Split: Produktkopf (Connect, Mock rechts) und Stellenkopf (Foto 4/3 rechts) */
.hero--split{background:var(--c-grey-100)}
.hero--split .hero__grid{align-items:center}
.hero--split .hero__media{margin-top:var(--s-6)}
.hero--split .hero__media img{position:static;aspect-ratio:4/3;height:auto}
.hero--split .hero__subline{font-size:var(--fs-h3);font-weight:500;color:var(--c-navy-700);margin-top:var(--s-3)}
.hero--white{background:var(--c-white)}
.job-header__location{display:flex;align-items:center;gap:var(--s-2);color:var(--c-muted);font-weight:500;margin-top:var(--s-3)}
.job-header__location svg{width:18px;height:18px;color:var(--c-accent)}
.hero .back-link{margin-bottom:var(--s-4)}
.hero .checklist{margin-top:var(--s-5)}
@media (min-width:1024px){
  .hero--split .hero__body{grid-column:1 / span 6;grid-row:auto;align-self:center}
  .hero--split .hero__media{grid-column:7 / -1;grid-row:auto;margin-top:0;min-height:0}
}

/* 10 ▸ Sektionen & Sektionskopf ---------------------------------------------------- */
.section{padding-block:var(--section-y);background:var(--c-white)}
.section--tint{background:var(--c-grey-100)}
.section--dark{background:var(--c-navy-900);color:var(--c-white)}
.section--dark h2,.section--dark h3,.section--dark h4{color:var(--c-white)}
.section--dark p,.section--dark li{color:var(--c-on-dark-muted)}
.section--dark .eyebrow{color:var(--c-on-dark-muted)}
.section--dark a:not(.btn){color:var(--c-white)}
.section--rule{border-top:1px solid var(--c-border)}          /* zwischen zwei gleichfarbigen Sektionen */
.section__head{display:grid;gap:var(--s-4);margin-bottom:var(--head-gap)}
.section__head--center{text-align:center;justify-items:center}
.section__head--center h2,.section__head--center .section__lead{margin-inline:auto}
.section__title{margin:0}
.section__lead{font-size:var(--fs-lead);line-height:1.5;color:var(--c-muted);max-width:60ch}
.section--dark .section__lead{color:var(--c-on-dark-muted)}
.section__foot{margin-top:var(--s-6);display:flex;flex-wrap:wrap;gap:var(--s-3)}
.section__head--center~.section__foot{justify-content:center}   /* unter einem zentrierten Kopf steht auch der CTA zentriert */
.section__note{margin-top:var(--s-6);color:var(--c-muted)}
@media (min-width:1024px){
  .section__head{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:start}
  .section__heading{grid-column:1 / span 6}
  .section__lead{grid-column:8 / -1;margin-top:calc(var(--fs-micro) * 1.6 + var(--s-3))}   /* Oberkante = H2; 5 Spalten ≈ 41ch */
  .section__heading:not(:has(.eyebrow))+.section__lead{margin-top:0}   /* Kopf ohne Eyebrow (Shop „Produktübersicht“): Intro bündig mit der H2 */
  .section__head:not(.section__head--center):not(:has(.section__lead)) .section__heading{grid-column:1 / span 8}   /* Kopf ohne Intro: H2 darf 8 Spalten nutzen (≤ 2 Zeilen), max-width 32ch bleibt */
  .section__head--center .section__heading{grid-column:3 / span 8}
  .section__head--center .section__lead{grid-column:3 / span 8;margin-top:0}
  .section__foot{margin-top:var(--s-7)}
}
@media (min-width:1024px) and (max-width:1279px){.section__lead{font-size:var(--fs-body)}}

/* 11 ▸ Karten & Index-Liste ----------------------------------------------------------- */
.cards{display:grid;gap:var(--s-4);counter-reset:card}
.cards>*{min-width:0}
.card{display:flex;flex-direction:column;gap:var(--s-3);padding:var(--s-4);background:var(--c-white);border:1px solid var(--c-border);border-radius:var(--r-2);color:var(--c-ink);text-decoration:none;height:100%;transition:border-color var(--t-fast) ease-out}
.card__title{font-size:var(--fs-h3);line-height:var(--lh-heading);letter-spacing:0;max-width:none;color:var(--c-navy-900)}   /* gilt für jede Überschriftenebene (Kontakt-Karten: h2) */
.card__text{color:var(--c-muted);max-width:45ch}
.card__more{display:inline-flex;align-items:center;gap:var(--s-2);margin-top:auto;padding-top:var(--s-3);font-weight:500;color:var(--c-navy-700)}
.card__more svg{width:18px;height:18px}
.card--link:hover{border-color:var(--c-navy-700)}
.card--link:hover .card__more{color:var(--c-accent);text-decoration:underline;text-underline-offset:.25em}
.card--index{counter-increment:card}
.card--index::before{content:counter(card,decimal-leading-zero);display:inline-block;font-size:var(--fs-small);font-weight:600;letter-spacing:.04em;color:var(--c-accent)}
.card--photo{padding:0;overflow:hidden}
.card--photo .card__media img{width:100%;aspect-ratio:16/10;object-fit:cover;border-bottom:1px solid var(--c-border)}
.card--photo .card__body{display:flex;flex-direction:column;gap:var(--s-3);padding:var(--s-4);flex:1}
.section--tint .card{border-color:var(--c-border)}
@media (min-width:640px){.cards--2,.cards--3,.cards--4{grid-template-columns:repeat(2,minmax(0,1fr))}.cards{gap:var(--gap)}.card{padding:var(--s-5)}.card--photo{padding:0}.card--photo .card__body{padding:var(--s-5)}}   /* Karten-Padding 16 → 24 → 32 (1280) */
@media (min-width:1024px){.cards--3{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1280px){.cards--4{grid-template-columns:repeat(4,minmax(0,1fr))}.card{padding:var(--s-6)}.card--photo{padding:0}.card--photo .card__body{padding:var(--s-6)}}
/* Index-Liste: kastenlos, Hairline oben, Zähler, H3, Text (Vorteile, Werte, Leitsätze, Prinzipien) */
.index{display:grid;gap:var(--s-5) var(--gap);counter-reset:idx}
.index>li{counter-increment:idx;display:flex;flex-direction:column;min-width:0;padding-top:var(--s-4);border-top:1px solid var(--c-border-strong);color:inherit;text-decoration:none}
.index>li::before{content:counter(idx,decimal-leading-zero);font-size:var(--fs-small);font-weight:600;letter-spacing:.04em;line-height:1;color:var(--c-accent)}
.index--plain>li::before{display:none}
.index h3{margin-top:var(--s-3)}
.index h3+p,.index__text{margin-top:var(--s-2);color:var(--c-muted);max-width:46ch}
.index__more{display:inline-flex;align-items:center;gap:var(--s-2);margin-top:auto;padding-top:var(--s-4);min-height:44px;font-weight:500;color:var(--c-navy-700)}
.index__more svg{width:18px;height:18px}
a.index__item{display:flex;flex-direction:column;flex:1;color:inherit;text-decoration:none}
a.index__item:hover h3{color:var(--c-navy-700)}
a.index__item:hover .index__more{text-decoration:underline;text-underline-offset:.2em}
.section--dark .index>li,.band--dark .index>li{border-top-color:var(--c-on-dark-rule)}
.section--dark .index>li::before,.band--dark .index>li::before{color:var(--c-on-dark-muted)}
.section--dark .index h3+p,.band--dark .index h3+p{color:var(--c-on-dark-muted)}
.section--dark .index h3,.band--dark .index h3{color:var(--c-white)}
@media (min-width:640px){.index--2,.index--3,.index--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.index{row-gap:var(--s-6)}.index--3,.index--4{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1280px){.index--4{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* 12 ▸ Schritte, Stepper, Timeline ----------------------------------------------------- */
/* Schritte: <ol class="steps steps--4">, große Nummer 32 px/600 Navy, Oberlinie */
.steps{counter-reset:step;display:grid;gap:0;border-top:1px solid var(--c-border-strong)}
.steps__item{counter-increment:step;display:grid;grid-template-columns:3.25rem minmax(0,1fr);column-gap:var(--s-4);padding:var(--s-5) 0;border-bottom:1px solid var(--c-border)}
.steps__item::before{content:counter(step,decimal-leading-zero);font-size:var(--fs-num);font-weight:600;line-height:1;letter-spacing:-.02em;color:var(--c-navy-700);padding-top:2px}
.steps__item>*{grid-column:2}
.steps__title{margin-top:0}
.steps__text{color:var(--c-muted);margin-top:var(--s-2);max-width:45ch}
.section--dark .steps,.section--dark .steps__item{border-color:var(--c-on-dark-rule)}
.section--dark .steps__item::before{color:var(--c-white)}
@media (min-width:768px){
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-5) var(--gap);border-top:0}
  .steps__item{grid-template-columns:minmax(0,1fr);padding:var(--s-4) 0 0;border-top:1px solid var(--c-border-strong);border-bottom:0}
  .steps__item>*{grid-column:1}
  .steps__item::before{margin-bottom:var(--s-4)}
}
@supports (grid-template-rows:subgrid){
  @media (min-width:768px){.steps__item{grid-row:span 3;grid-template-rows:subgrid;row-gap:0}}   /* Nummer, Titel, Text fluchten über alle Schritte */
}
@media (min-width:1024px){
  .steps--4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .steps--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .steps--5{grid-template-columns:repeat(5,minmax(0,1fr))}
}
/* Stepper (Pflegebox-Bestellung): Fortschrittsbalken + Label. Die Schrittnummer steht als Text im Markup
   (<span class="stepper__num">1</span>Produkte wählen – der Content-Check erwartet „1Produkte wählen“), kein CSS-Zähler. */
.stepper{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-2)}
.stepper li{display:grid;gap:var(--s-2)}
.stepper__bar{height:4px;border-radius:var(--r-1);background:var(--c-border)}
.stepper li[aria-current="step"] .stepper__bar{background:var(--c-navy-700)}
.stepper__label{display:none;font-size:var(--fs-micro);font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--c-muted)}
.stepper li[aria-current="step"] .stepper__label{color:var(--c-navy-700)}
.stepper__num{margin-right:.4em}
.stepper__current{font-weight:500;margin-bottom:var(--s-4)}   /* „Schritt 1: …“ nur unter 640, darüber zeigt der Stepper seine Labels */
@media (min-width:640px){.stepper__label{display:block}.stepper__current{display:none}}
/* Timeline (Entwicklungsphasen, Connect) */
.timeline{display:grid;gap:var(--s-5);counter-reset:phase}
.timeline li{counter-increment:phase;padding-top:var(--s-4);border-top:2px solid var(--c-border)}
.timeline__phase{font-size:var(--fs-micro);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--c-accent)}
.timeline li h3{font-size:var(--fs-h4);margin-top:var(--s-2)}
.timeline li p{margin-top:var(--s-2);color:var(--c-muted);font-size:var(--fs-small)}
@media (min-width:768px){.timeline{grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--gap)}}

/* 13 ▸ Split Bild+Text, Checklisten ------------------------------------------------------ */
/* Split: Text 5/12 | Bild 6/12 (eine Leerspalte); Bild-links-Variante dreht nur ab 1024 */
.split{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);align-items:center}
.split>*{grid-column:1 / -1;min-width:0}
.split__body h2+*{margin-top:var(--s-5)}
.split__text{color:var(--c-muted)}
.split__text>*+*{margin-top:var(--s-4)}
.split__actions{margin-top:var(--s-6);display:flex;flex-wrap:wrap;gap:var(--s-3)}
.split__media{margin:0}
.split__media img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:var(--focus,50% 50%);border-radius:var(--r-3);border:1px solid var(--c-border);background:var(--c-grey-200)}
.split__media--portrait img{aspect-ratio:4/5;object-position:50% 20%}
.split__media--contain{display:flex;align-items:center;justify-content:center;padding:var(--s-6);background:var(--c-grey-100);border:1px solid var(--c-border);border-radius:var(--r-3)}
.section--tint .split__media--contain{background:var(--c-white)}
.split__media--contain img{width:100%;max-width:420px;aspect-ratio:3/2;object-fit:contain;border:0;border-radius:0;background:transparent}
/* Infografik (Hochformat mit Text, Ärzte „Ablauf“): ungeschnitten in Porträtbreite 28 rem, linksbündig wie alle anderen Elemente */
.split__media--infographic{display:flex;justify-content:flex-start}
.split__media--infographic img{aspect-ratio:auto;object-fit:contain;max-width:28rem}
@media (min-width:1024px){
  .split__body{grid-column:1 / span 6}
  .split__media{grid-column:7 / -1}
  .split--media-left>*{grid-row:1}
  .split--media-left .split__media{grid-column:1 / span 6}
  .split--media-left .split__body{grid-column:7 / -1}
  .split--wide-text .split__body{grid-column:1 / span 6}
  .split--wide-text .split__media{grid-column:8 / -1}
  .split--media-left.split--wide-text .split__media{grid-column:1 / span 5}
  .split--media-left.split--wide-text .split__body{grid-column:7 / -1}
}
@media (min-width:1280px){
  .split__body{grid-column:1 / span 5}
  .split--media-left .split__body{grid-column:8 / -1}
}
/* Checkliste: ein schlichter Haken (mask, currentColor), keine Kreise */
.checklist{display:grid;gap:var(--s-3)}
.checklist li{position:relative;padding-left:32px;color:var(--c-ink)}
.checklist li::before{content:"";position:absolute;left:0;top:.2em;width:20px;height:20px;background:var(--c-navy-700);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/20px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/20px no-repeat}
.checklist--strong li{font-weight:500}
.section--dark .checklist li,.band--dark .checklist li{color:var(--c-white)}
.section--dark .checklist li::before,.band--dark .checklist li::before{background:var(--c-white)}
.bullets{display:grid;gap:var(--s-2);padding-left:var(--s-5);list-style:disc}
.bullets li::marker{color:var(--c-navy-700)}
.dots{display:grid;gap:var(--s-3)}
.dots li{position:relative;padding-left:var(--s-5)}
.dots li::before{content:"";position:absolute;left:4px;top:.6em;width:7px;height:7px;border-radius:50%;background:var(--c-navy-700)}

/* 14 ▸ Band, Rollen, Leitsätze, Fakten ----------------------------------------------------- */
/* Band: links Eyebrow/H2/Zitat/Bild (5/12), rechts nummerierte Rollen-Liste (6/12) */
.band{border-top:1px solid var(--c-border)}
.band__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap)}
.band__grid>*{grid-column:1 / -1;min-width:0}
.band__media{margin:var(--s-6) 0 0}
.band__media img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:var(--focus,50% 50%);border-radius:var(--r-3);border:1px solid var(--c-border);background:var(--c-grey-200)}
@media (min-width:768px){.band__media img{aspect-ratio:4/3}}   /* einspaltig 16:10 (Seitenlänge), ab 768 4:3 */
.band__actions{margin-top:var(--s-5);display:flex;flex-wrap:wrap;gap:var(--s-3)}
.statement{margin-top:var(--s-5);padding-left:var(--s-5);border-left:2px solid var(--c-navy-700);font-size:var(--fs-lead);font-weight:500;line-height:1.45;color:var(--c-ink);max-width:40ch}
.statement p{max-width:none}
.band--dark{background:var(--c-navy-900);color:var(--c-white);border-top:0}
.band--dark h2,.band--dark h3{color:var(--c-white)}
.band--dark .statement{border-color:var(--c-on-dark-muted);color:var(--c-white)}
.band--dark .eyebrow{color:var(--c-on-dark-muted)}
.band--dark .band__media img{border-color:var(--c-on-dark-rule)}
.band--dark p{color:var(--c-on-dark-muted)}
/* Rollen: Nr | Begriff | Beschreibung mit Hairlines (große Nummer) */
.roles{counter-reset:role;border-top:1px solid var(--c-border-strong)}
.roles__item{counter-increment:role;display:grid;grid-template-columns:3.25rem minmax(0,1fr);column-gap:var(--s-4);padding:var(--s-5) 0;border-bottom:1px solid var(--c-border)}
.roles__item::before{content:counter(role,decimal-leading-zero);font-size:var(--fs-num-sm);font-weight:600;line-height:1.1;letter-spacing:-.02em;color:var(--c-navy-700)}
.roles__item h3{margin:0;align-self:center}
.roles__item p{grid-column:2;color:var(--c-muted);margin-top:var(--s-2);max-width:52ch}
.band--dark .roles,.band--dark .roles__item{border-color:var(--c-on-dark-rule)}
.band--dark .roles__item::before{color:var(--c-white)}
.band--dark .roles__item p{color:var(--c-on-dark-muted)}
@media (min-width:768px) and (max-width:1023px),(min-width:1280px){
  .roles__item{grid-template-columns:3.25rem minmax(0,13.5rem) minmax(0,1fr);column-gap:var(--s-5)}
  .roles__item h3{align-self:start;padding-top:.15em}
  .roles__item p{grid-column:3;margin-top:0}
}
@media (min-width:1024px){
  .band__intro{grid-column:1 / span 5}
  .band__list{grid-column:7 / -1;align-self:start}
}
@media (min-width:1280px){.band__intro{grid-column:1 / span 6}}   /* 6 | 6: lange Band-Titel bleiben zweizeilig, Primär- + Telefonbutton stehen nebeneinander */
/* Leitsätze-/Zeilenliste ohne Nummern */
.rules{border-top:1px solid var(--c-border-strong)}
.rules>li{padding:var(--s-5) 0;border-bottom:1px solid var(--c-border)}
.rules p{color:var(--c-muted);margin-top:var(--s-2)}
/* Fakten-Karte (Unternehmen) */
.facts{padding:var(--s-5);background:var(--c-white);border:1px solid var(--c-border);border-radius:var(--r-2)}
.facts__foot{margin-top:var(--s-4);color:var(--c-muted);font-size:var(--fs-small)}
@media (min-width:768px){.facts{padding:var(--s-6)}}
.figure{margin:0}
.figure img{width:100%;border-radius:var(--r-3);border:1px solid var(--c-border)}
.figure figcaption{margin-top:var(--s-2);font-size:var(--fs-micro);color:var(--c-muted)}

/* 15 ▸ Einsatzgebiete, Stats, Definitionslisten, Tabellen ------------------------------------- */
.map-grid{display:grid;gap:var(--s-4)}
.map-card{display:flex;flex-direction:column;background:var(--c-white);border:1px solid var(--c-border);border-radius:var(--r-2);overflow:hidden;height:100%}
.map-card__media{margin:0}
.map-card__media img{width:100%;aspect-ratio:2/1;object-fit:cover;border-bottom:1px solid var(--c-border)}   /* einspaltig 2:1 (Seitenlänge), ab 640 16:10 */
.map-card__body{display:flex;flex-direction:column;gap:var(--s-2);padding:var(--s-4)}
.map-card__body p{color:var(--c-muted);font-size:var(--fs-small);line-height:1.55}
@media (min-width:640px){.map-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap)}.map-card__media img{aspect-ratio:16/10}.map-card__body{padding:var(--s-5)}}
@media (min-width:1280px){.map-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* Stats-dl (Hero-Fakten): mobil Begriff|Wert-Zeilen, ab 640 drei Spalten mit senkrechten Trennern */
.stats{display:grid;border-top:1px solid var(--c-border-strong)}
.stats__item{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-4);min-height:44px;padding:var(--s-2) 0;border-bottom:1px solid var(--c-border)}
.stats dt{font-size:var(--fs-micro);font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--c-muted)}
.stats dd{font-weight:600;color:var(--c-navy-900);text-align:right;text-wrap:balance}
@media (min-width:640px){
  .stats{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:0}
  .stats__item{display:block;border-bottom:0;padding:var(--s-4) var(--s-4) 0 0}
  .stats__item+.stats__item{border-left:1px solid var(--c-border);padding-left:var(--s-4)}
  .stats dd{font-size:var(--fs-h4);text-align:left;margin-top:var(--s-1)}
}
@media (min-width:1280px){.stats dd{font-size:var(--fs-h3)}}
/* Definitionsliste (Fakten, Produktdaten, Zusammenfassung) */
.dl{display:grid;border-top:1px solid var(--c-border)}
.dl__row{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-1) var(--s-5);padding:var(--s-3) 0;border-bottom:1px solid var(--c-border)}
.dl dt{font-size:var(--fs-small);font-weight:500;color:var(--c-muted)}
.dl dd{font-weight:500;overflow-wrap:anywhere}
@media (min-width:480px){.dl__row{grid-template-columns:minmax(0,11rem) minmax(0,1fr)}}
/* Tabelle (immer in .table-wrap) */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--c-border);border-radius:var(--r-2)}
.table{width:100%;min-width:34rem;border-collapse:collapse;font-size:var(--fs-small);text-align:left}
.table th{padding:var(--s-3) var(--s-4);border-bottom:1px solid var(--c-border-strong);font-size:var(--fs-micro);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--c-muted);background:var(--c-grey-100)}
.table td{padding:var(--s-3) var(--s-4);border-bottom:1px solid var(--c-border);vertical-align:middle}
.table tr:last-child td{border-bottom:0}

/* 16 ▸ Wundnotdienst (dunkel), Statement-Band ------------------------------------------- */
.emergency__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);align-items:center}
.emergency__grid>*{grid-column:1 / -1;min-width:0}
.emergency__title{color:var(--c-white)}
.emergency__text{margin-top:var(--s-5);max-width:58ch}
.emergency__card{display:grid;gap:var(--s-3);padding:var(--s-4);background:var(--c-white);border-radius:var(--r-2);color:var(--c-ink)}
.emergency__card h3{color:var(--c-navy-900);margin-bottom:var(--s-2)}
.emergency__card .note{font-size:var(--fs-small);color:var(--c-muted);margin-top:var(--s-2)}
.emergency__card .btn{overflow-wrap:anywhere}
@media (min-width:480px){.emergency__card{padding:var(--s-5)}}
@media (min-width:768px){.emergency__card{padding:var(--s-6)}}
@media (min-width:1024px){.emergency__body{grid-column:1 / span 6}.emergency__card{grid-column:8 / -1}}
@media (min-width:1280px){.emergency__body{grid-column:1 / span 7}.emergency__card{grid-column:9 / -1}}
.statement-band{text-align:center}
.statement-band .display{font-size:var(--fs-display);font-weight:600;line-height:1.1;color:var(--c-white);max-width:none}
.statement-band p{margin-inline:auto}

/* 17 ▸ Schluss-Kontaktband „So erreichen Sie uns“ ------------------------------------------ */
.contact-band__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);align-items:center}
.contact-band__grid>*{grid-column:1 / -1;min-width:0}
.contact-band__body .lead{margin-top:var(--s-5);color:var(--c-muted)}
.signature{margin-top:var(--s-6);padding-top:var(--s-4);border-top:1px solid var(--c-border);font-weight:500;color:var(--c-navy-900);max-width:28ch}
.signature__place{display:block;font-size:var(--fs-small);font-weight:400;color:var(--c-muted)}
.contact-card{padding:var(--s-4);background:var(--c-white);border:1px solid var(--c-border);border-radius:var(--r-2)}
.contact-card__label{font-size:var(--fs-micro);font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--c-accent)}
.contact-list{margin-top:var(--s-3);border-top:1px solid var(--c-border)}
.contact-row{display:grid;grid-template-columns:40px minmax(0,1fr) 20px;align-items:center;column-gap:var(--s-3);min-height:64px;padding:var(--s-3) 0;border-bottom:1px solid var(--c-border);color:var(--c-ink);text-decoration:none}
.contact-row>svg:first-child{width:40px;height:40px;padding:10px;border-radius:var(--r-2);background:var(--c-grey-100);color:var(--c-navy-700)}
.contact-row>svg:last-child{width:20px;height:20px;color:var(--c-muted)}
.contact-row__label{display:block;font-size:var(--fs-micro);color:var(--c-muted)}
.contact-row__value{display:block;font-weight:600;color:var(--c-navy-900);overflow-wrap:anywhere}
.contact-row:hover .contact-row__value{color:var(--c-accent);text-decoration:underline;text-underline-offset:.2em}
.contact-card .btn{margin-top:var(--s-5)}
.contact-card .note{margin-top:var(--s-4);font-size:var(--fs-small);color:var(--c-muted)}
.contact-card .note a{font-weight:500}
@media (min-width:480px){.contact-card{padding:var(--s-5)}}
@media (min-width:768px){.contact-card{padding:var(--s-6)}}
@media (min-width:1024px){.contact-band__body{grid-column:1 / span 6}.contact-card{grid-column:8 / -1}}

/* 18 ▸ Karriere-Band (Porträt im 4:5-Rahmen, unten bündig) --------------------------------------- */
.career-band__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);align-items:center}
.career-band__grid>*{grid-column:1 / -1;min-width:0}
.career-band__body h2{color:var(--c-navy-900)}
.career-band__text{margin-top:var(--s-5);color:var(--c-muted)}
.career-band__text>*+*{margin-top:var(--s-4)}
.career-band__text strong{color:var(--c-ink)}
.career-band__body .btn{margin-top:var(--s-6)}
.career-band__photo{margin:var(--s-4) 0 0;width:min(100%,18rem);aspect-ratio:4/5;background:var(--c-grey-100);border:1px solid var(--c-border);border-radius:var(--r-3);overflow:hidden}
.section--tint .career-band__photo{background:var(--c-white)}
.career-band__photo img{width:100%;height:100%;object-fit:cover;object-position:50% 100%}
@media (min-width:768px){
  .career-band__body{grid-column:1 / span 7}
  .career-band__photo{grid-column:8 / -1;margin:0 0 0 auto;width:min(100%,22rem)}
}
@media (min-width:1024px){.career-band__photo{grid-column:9 / -1}}

/* 19 ▸ App-Band + Mockup, Store-Zeilen, Badges ----------------------------------------------------- */
.app-band__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);align-items:center}
.app-band__grid>*{grid-column:1 / -1;min-width:0}
.app-band__text{margin-top:var(--s-5);color:var(--c-muted)}
.app-band .store-list{margin-top:var(--s-5);max-width:22rem}
.app-band__body .link-arrow{margin-top:var(--s-4)}
@media (min-width:1024px){.app-band__body{grid-column:1 / span 7}.mock{grid-column:8 / -1}}
@media (min-width:1280px){.app-band__body{grid-column:1 / span 5}.mock{grid-column:6 / -1}}
/* Store-Zeilen (App-Band, Connect-Panel, Mobilmenü) */
.store-list{display:grid;gap:var(--s-2)}
.store-row{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;column-gap:var(--s-3);padding:var(--s-2) var(--s-3);border:1px solid var(--c-border);border-radius:var(--r-2);background:var(--c-white);min-height:56px}
.store-row__icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--r-2);background:var(--c-navy-700);color:var(--c-white)}
.store-row__icon svg{width:20px;height:20px}
.store-row__caption{display:block;font-size:var(--fs-micro);letter-spacing:.06em;text-transform:uppercase;color:var(--c-muted);white-space:nowrap}
.store-row__name{display:block;font-weight:600;color:var(--c-navy-900)}
/* Badge / Status-Chip: monochrom, nur umrandet (Demnächst, Konzeptansicht, Bundesweit, Unterwegs …) */
.badge{display:inline-flex;align-items:center;gap:var(--s-1);min-height:24px;padding:0 var(--s-2);border:1px solid var(--c-border-strong);border-radius:var(--r-1);background:var(--c-white);font-size:var(--fs-micro);font-weight:500;line-height:1.3;color:var(--c-ink);white-space:nowrap}
.badge--muted{color:var(--c-muted)}
/* Statisches App-Mockup: EIN gerahmtes <figure>, Tablet + Phone als flache Panels, Caption innen */
.mock{margin:0;padding:var(--s-4);background:var(--c-grey-100);border:1px solid var(--c-border);border-radius:var(--r-3)}
.section--tint .mock{background:var(--c-white)}
.mock__stage{display:grid;gap:var(--s-4);align-items:start}
.mock__panel{background:var(--c-white);border:1px solid var(--c-border);border-radius:var(--r-2);overflow:hidden;font-size:var(--fs-micro);line-height:1.4;color:var(--c-ink)}
.mock__tablet{display:none}
.mock__bar{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);padding:var(--s-3) var(--s-4);border-bottom:1px solid var(--c-border);background:var(--c-grey-100)}
.mock__brand{display:flex;align-items:center;gap:var(--s-2);font-weight:600;color:var(--c-navy-900)}
.mock__brand img{width:20px;height:20px;border-radius:var(--r-1)}
.mock__body{padding:var(--s-4);display:grid;gap:var(--s-3)}
.mock__head{display:flex;justify-content:space-between;gap:var(--s-3);align-items:baseline}
.mock__head p:first-child{font-weight:600;color:var(--c-navy-900);font-size:var(--fs-small)}
.mock__head p+p{color:var(--c-muted)}
.mock__rows{display:grid;gap:var(--s-2)}
.mock__row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--s-1) var(--s-3);padding:var(--s-2) var(--s-3);border:1px solid var(--c-border);border-radius:var(--r-2)}
.mock__row span:first-child{font-weight:500;color:var(--c-navy-900)}
.mock__row span:nth-child(2){color:var(--c-muted);grid-row:2}
.mock__row .badge{grid-column:2;grid-row:1 / span 2}
.mock__kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-2)}
.mock__kpi{padding:var(--s-3) var(--s-2);border:1px solid var(--c-border);border-radius:var(--r-2);background:var(--c-grey-100)}
.mock__kpi p:first-child{font-size:var(--fs-h3);font-weight:600;color:var(--c-navy-900);line-height:1.1}
.mock__kpi p+p{color:var(--c-muted);white-space:normal}
.mock__phone{width:min(100%,19rem);margin-inline:auto}
.mock__status{display:flex;justify-content:space-between;padding:var(--s-2) var(--s-4);border-bottom:1px solid var(--c-border);color:var(--c-muted);font-weight:500}
.mock__greeting{font-weight:600;color:var(--c-navy-900);font-size:var(--fs-small)}
.mock__card{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-1) var(--s-2);padding:var(--s-3);border:1px solid var(--c-border);border-radius:var(--r-2)}
.mock__card p:first-child{font-weight:500;color:var(--c-navy-900);white-space:nowrap}
.mock__card .badge{margin-left:auto}
.mock__card p:nth-of-type(2){flex-basis:100%;color:var(--c-muted)}
.mock__tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--c-border);background:var(--c-grey-100)}
.mock__tabs p{padding:var(--s-2) 0;border-top:2px solid transparent;text-align:center;color:var(--c-muted);white-space:nowrap;letter-spacing:-.01em;overflow:hidden}
.mock__tabs p:first-child{color:var(--c-navy-700);font-weight:600;border-top-color:var(--c-navy-700)}
.mock figcaption{margin-top:var(--s-3);font-size:var(--fs-micro);font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--c-muted)}
@media (max-width:479px){.mock{padding:0;border:0;background:transparent}.mock__phone{width:100%}}   /* 320 px: Panel braucht die volle Breite (4 × 72 px Tabs) */
@media (min-width:768px){.mock__tablet{display:flex;flex-direction:column}.mock__stage{grid-template-columns:minmax(0,1fr) 18.5rem}.mock__phone{margin:0}}
@media (min-width:1024px) and (max-width:1279px){.mock__tablet{display:none}.mock__stage{grid-template-columns:minmax(0,1fr)}.mock__phone{margin-inline:auto}}   /* 5/12-Spalte: nur das Smartphone */
@media (min-width:1280px){.mock__stage{grid-template-columns:minmax(0,1fr) 17rem;align-items:end}.mock__tablet .mock__body{flex:none;align-content:start}}   /* beide Panels unten bündig, Tablet ungestreckt (kein Loch zwischen Zeilen und Kacheln) */

/* 20 ▸ Karriere: Stellenkarten, Zwei Listen, Vorteile, Werte, Foto-Raster, Personenblock ------------- */
.job-list{display:grid;gap:var(--s-4)}
.job-card{display:flex;flex-direction:column;background:var(--c-white);border:1px solid var(--c-border);border-radius:var(--r-2);overflow:hidden;height:100%}
.job-card__media{position:relative;margin:0}
.job-card__media img{width:100%;aspect-ratio:3/2;object-fit:cover;border-bottom:1px solid var(--c-border)}
.job-card__badge{position:absolute;top:var(--s-3);left:var(--s-3)}
.job-card__body{display:flex;flex-direction:column;gap:var(--s-3);padding:var(--s-5);flex:1}
.job-card__meta{display:flex;align-items:center;gap:var(--s-2);color:var(--c-muted);font-size:var(--fs-small)}
.job-card__meta svg{width:18px;height:18px;color:var(--c-accent)}
.job-card .btn{margin-top:auto;align-self:flex-start}
@media (min-width:640px){.job-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap)}}
@media (min-width:1024px){.job-list{grid-template-columns:repeat(3,minmax(0,1fr))}}
.two-lists{display:grid;gap:var(--s-7)}
.two-lists h3{margin-bottom:var(--s-4)}
@media (min-width:1024px){.two-lists{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-8)}}
/* Foto-Raster (Inside NeoVital, dunkel) */
.photo-grid{display:grid;gap:var(--s-5)}
.photo-grid__item img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-3);border:1px solid var(--c-on-dark-rule)}
.photo-grid__item h3{margin-top:var(--s-4);font-size:var(--fs-h4)}
.photo-grid__item p{margin-top:var(--s-1);font-size:var(--fs-small)}
@media (min-width:640px){.photo-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap)}}
@media (min-width:1024px){.photo-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* Personenblock (Über uns: Porträt | Zitat, Name, Kontakte, Formular) */
.person{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);align-items:start}
.person>*{grid-column:1 / -1;min-width:0}
.person__portrait{margin:0}
.person__portrait img{width:min(100%,22rem);aspect-ratio:4/5;object-fit:cover;border-radius:var(--r-3);border:1px solid var(--c-border)}
.person__quote{margin-top:var(--s-5);padding-left:var(--s-5);border-left:2px solid var(--c-navy-700);color:var(--c-muted);font-size:var(--fs-lead);line-height:1.5}
.person__name{margin-top:var(--s-4);font-weight:600;color:var(--c-navy-900)}
.person__role{color:var(--c-muted);font-size:var(--fs-small)}
.person__name .person__role{display:block;font-weight:400;margin-top:var(--s-1)}   /* Rolle als Span im Namens-Absatz (Content-Check: „Marcel ScherresHead of Sales“ ist EIN Block) */
.person__divider{margin-top:var(--s-6);padding-top:var(--s-5);border-top:1px solid var(--c-border)}
.contact-pairs{display:grid;gap:0;margin-top:var(--s-5)}
.contact-pairs a{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);min-height:56px;padding:var(--s-3) 0;border-top:1px solid var(--c-border);color:var(--c-ink);text-decoration:none}
.contact-pairs a:last-child{border-bottom:1px solid var(--c-border)}
.contact-pairs a svg{width:20px;height:20px;color:var(--c-muted)}
.contact-pairs a:hover .contact-row__value{color:var(--c-accent);text-decoration:underline}
@media (min-width:640px){.contact-pairs{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s-7)}.contact-pairs a{border-bottom:1px solid var(--c-border)}}
@media (min-width:1024px){.person__portrait{grid-column:1 / span 4}.person__body{grid-column:6 / -1}}

/* 21 ▸ Formulare -------------------------------------------------------------------------------- */
.form{display:grid;gap:var(--s-5);max-width:var(--container-form)}
.form--card{padding:var(--s-5);background:var(--c-white);border:1px solid var(--c-border);border-radius:var(--r-2);max-width:none}
.form__row{display:grid;gap:var(--s-5)}
@media (min-width:480px){.form__row{grid-template-columns:repeat(2,minmax(0,1fr))}.form__row--zip{grid-template-columns:minmax(0,.5fr) minmax(0,1fr)}}
@media (min-width:768px){.form--card{padding:var(--s-6)}}
.form__intro{color:var(--c-muted)}
.form__intro strong{color:var(--c-ink)}
.field{display:grid;gap:var(--s-2)}
.field__label{font-size:var(--fs-small);font-weight:500;color:var(--c-ink)}
.field__label .req{color:var(--c-error);margin-left:2px}
.field input:not([type=checkbox]):not([type=radio]):not([type=file]),.field select,.field textarea{width:100%;min-height:48px;padding:var(--s-3) var(--s-4);border:1px solid var(--c-muted);border-radius:var(--r-1);background:var(--c-white);color:var(--c-ink);font-size:var(--fs-ui);line-height:1.4}
.field textarea{min-height:8rem;resize:vertical}
/* Datei-Feld: feste 48 px wie alle Felder; Statustext 13 px, damit „Keine ausgewählt“ ab 375 px nicht gekürzt wird (Chrome kürzt mittig) */
.field input[type=file]{display:flex;align-items:center;width:100%;height:48px;padding:0 var(--s-3);border:1px solid var(--c-muted);border-radius:var(--r-1);background:var(--c-white);font-size:var(--fs-micro);line-height:1.3;color:var(--c-muted)}
.field input[type=file]::file-selector-button{font:inherit;font-size:var(--fs-small);font-weight:500;color:var(--c-navy-700);background:var(--c-grey-100);border:1px solid var(--c-border);border-radius:var(--r-1);padding:var(--s-1) var(--s-3);margin-right:var(--s-3);cursor:pointer}
.field input[type=date]{min-width:0}
/* Select: Wrapper trägt den Pfeil (mask, currentColor) */
.select{position:relative}
.select select{appearance:none;-webkit-appearance:none;padding-right:var(--s-7)}
.select::after{content:"";position:absolute;right:var(--s-4);top:50%;width:18px;height:18px;margin-top:-9px;pointer-events:none;background:var(--c-muted);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/18px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/18px no-repeat}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{border-color:var(--c-accent);outline:2px solid var(--c-accent);outline-offset:1px}
.field input[aria-invalid="true"],.field select[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:var(--c-error)}
.field__hint{font-size:var(--fs-micro);color:var(--c-muted)}
.field__error{font-size:var(--fs-small);color:var(--c-error);font-weight:500}
.checkbox{display:grid;grid-template-columns:24px minmax(0,1fr);gap:var(--s-3);align-items:start;min-height:44px;color:var(--c-muted);font-size:var(--fs-small);line-height:1.5;cursor:pointer}
.checkbox input{width:24px;height:24px;margin:2px 0 0;accent-color:var(--c-navy-700)}
.checkbox a{color:var(--c-navy-700);padding-block:var(--s-3)}   /* bleibt inline (bricht im Satz um); das vertikale Padding ergibt ≈ 44 px Trefffläche ohne Zeilenabstand zu ändern */
.radio-cards{display:grid;gap:var(--s-3)}
.radio-cards label{display:flex;align-items:center;gap:var(--s-3);min-height:56px;padding:var(--s-3) var(--s-4);border:1px solid var(--c-border);border-radius:var(--r-2);font-weight:500;cursor:pointer}
.radio-cards label:has(input:checked){border-color:var(--c-navy-700);outline:1px solid var(--c-navy-700);outline-offset:-2px}
.radio-cards input{width:20px;height:20px;margin:0;flex:none;accent-color:var(--c-navy-700)}   /* schrumpft neben langen Labels nicht */
@media (min-width:480px){.radio-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
.form__actions{display:flex;flex-wrap:wrap;gap:var(--s-3)}
.form__note{font-size:var(--fs-small);color:var(--c-muted)}
.honeypot{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
fieldset{border:0;padding:0;margin:0;min-width:0}
fieldset+fieldset{margin-top:var(--s-4);padding-top:var(--s-5);border-top:1px solid var(--c-border)}
legend{float:left;width:100%;padding:0;font-size:var(--fs-h3);font-weight:600;color:var(--c-navy-900);margin-bottom:var(--s-4)}   /* float: Legende ist normaler Block, die Hairline (fieldset+fieldset) läuft über die volle Breite */
fieldset>*:not(legend){clear:both}
.alert{display:flex;gap:var(--s-3);padding:var(--s-3) var(--s-4);border:1px solid var(--c-border);border-left:3px solid var(--c-error);border-radius:var(--r-1);background:var(--c-white);color:var(--c-error);font-size:var(--fs-small);font-weight:500}
.alert--success{border-left-color:var(--c-success);color:var(--c-success)}
/* Mengen-Stepper (Pflegebox-Produkte) */
.qty{display:inline-grid;grid-template-columns:44px 3rem 44px;align-items:center;border:1px solid var(--c-muted);border-radius:var(--r-1);background:var(--c-white)}
.qty button{height:44px;color:var(--c-navy-700);font-weight:600;font-size:var(--fs-h3)}
.qty button:disabled{color:var(--c-border-strong);cursor:default}
.qty output,.qty input{text-align:center;font-weight:600;border:0;min-height:0;height:44px;padding:0;width:100%}   /* Feld selbst 44 px Tap-Ziel */
/* Produktkarte: Name/Einheit oben, Mengenwahl darunter – in allen Breiten gleich (kein Umbruch je nach Namenslänge) */
.product-choice{display:grid;justify-items:start;align-content:start;gap:var(--s-3);padding:var(--s-4);border:1px solid var(--c-border);border-radius:var(--r-2);background:var(--c-white)}
.product-choice__unit{display:block;font-size:var(--fs-small);color:var(--c-muted)}
/* Hinweisbox, Aside-Karte, Formular | Aside */
.notice{display:flex;gap:var(--s-3);padding:var(--s-4) var(--s-5);background:var(--c-grey-100);border:1px solid var(--c-border);border-radius:var(--r-2);color:var(--c-muted)}
.notice svg{width:22px;height:22px;color:var(--c-navy-700);margin-top:2px}
.notice strong{color:var(--c-ink)}
.section--tint .notice{background:var(--c-white)}
.aside-card{padding:var(--s-4);background:var(--c-grey-100);border:1px solid var(--c-border);border-radius:var(--r-2)}   /* Padding 16 → 24 (480) → 32 (768) wie Notdienst-/Kontakt-Karte; bei 320 px bleibt „bewerbung@neo-vital.de“ einzeilig */
.aside-card>*+*{margin-top:var(--s-4)}
.aside-card h2,.aside-card h3{font-size:var(--fs-h3)}
.aside-card p{color:var(--c-muted)}
.aside-card .btn{width:100%}
.aside-card>svg:first-child{width:24px;height:24px;color:var(--c-navy-700)}   /* nur das Karten-Icon (direktes Kind), nicht die Icons der Buttons */
.section--tint .aside-card{background:var(--c-white)}
@media (min-width:480px){.aside-card{padding:var(--s-5)}}
@media (min-width:768px){.aside-card{padding:var(--s-6)}}
.aside-card--sticky{position:sticky;top:calc(var(--header-h) + var(--s-5))}
.form-layout{display:grid;gap:var(--s-6);align-items:start}
.steps+.form-layout{margin-top:var(--s-6)}   /* Schritte → Formular: 32/48 px wie Inhalt → CTA (1.5) */
@media (min-width:1024px){.form-layout{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:var(--s-7)}.form-layout--wizard{grid-template-columns:minmax(0,1fr) 20rem}.steps+.form-layout{margin-top:var(--s-7)}}

/* 22 ▸ Shop ------------------------------------------------------------------------------------- */
.breadcrumb ol{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-1) var(--s-2);font-size:var(--fs-small);color:var(--c-muted)}
.breadcrumb a{display:inline-flex;align-items:center;min-height:44px;padding-inline:var(--s-2);margin-inline:calc(-1 * var(--s-2));color:var(--c-muted)}   /* 8 px seitliche Tap-Fläche (kurze Labels wie „Shop“), optisch unverändert */
.breadcrumb li{display:inline-flex;align-items:center;min-height:44px}
/* Trenner hängt am VORHERIGEN Eintrag (::after): eine umgebrochene Zeile beginnt mit dem Label, nicht mit dem Pfeil */
.breadcrumb li:not(:last-child)::after{content:"";display:inline-block;width:14px;height:14px;margin-left:var(--s-2);background:var(--c-border-strong);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center/contain no-repeat}
.breadcrumb [aria-current="page"]{color:var(--c-ink);font-weight:500}
.chips{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.chips li{display:inline-flex;align-items:center;min-height:36px;padding:var(--s-1) var(--s-3);border:1px solid var(--c-border);border-radius:var(--r-1);background:var(--c-white);font-size:var(--fs-small);color:var(--c-ink)}
.tiles{display:grid;gap:var(--s-3)}
.tiles>li{display:flex}   /* Kachel füllt die Rasterzeile: bricht ein Nachbartitel zweizeilig um (1024–1279), bleiben alle Rahmen einer Reihe gleich hoch */
.tile{flex:1 1 auto;display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);min-height:64px;padding:var(--s-3) var(--s-4);background:var(--c-white);border:1px solid var(--c-border);border-radius:var(--r-2);color:var(--c-navy-900);font-weight:500;text-decoration:none;transition:border-color var(--t-fast) ease-out}
.tile svg{width:18px;height:18px;color:var(--c-muted)}
.tile:hover{border-color:var(--c-navy-700);color:var(--c-navy-700)}
.tile[aria-current="page"],.tile--active{background:var(--c-navy-700);border-color:var(--c-navy-700);color:var(--c-white)}
.tile[aria-current="page"] svg,.tile--active svg{color:var(--c-white)}
@media (min-width:640px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4)}}
@media (min-width:1024px){.tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
.product-card{display:flex;flex-direction:column;gap:var(--s-2);padding:var(--s-4);background:var(--c-white);border:1px dashed var(--c-border-strong);border-radius:var(--r-2);height:100%}
.product-card__media{aspect-ratio:1;border-radius:var(--r-1);background:var(--c-grey-100);border:1px solid var(--c-border);display:flex;align-items:center;justify-content:center;color:var(--c-border-strong)}
.product-card__media svg{width:32px;height:32px}
.product-card .dl{margin-top:auto;font-size:var(--fs-small)}
.product-card .dl__row{grid-template-columns:minmax(0,1fr) auto;padding:var(--s-2) 0}
@media (max-width:639px){.product-card__media{aspect-ratio:16/10}}   /* einspaltig kein 309-px-Quadrat (Seitenlänge), wie card--photo */
@media (min-width:1024px) and (max-width:1279px){.cards--4:has(.product-card){grid-template-columns:repeat(3,minmax(0,1fr))}}   /* Produktraster 1024–1279 dreispaltig (3 + 3 + 2), bündig mit den Kacheln; 4 Spalten ab 1280 */
.related{padding:var(--s-5);background:var(--c-grey-100);border:1px solid var(--c-border);border-radius:var(--r-2)}
.related ul{display:flex;flex-wrap:wrap;gap:var(--s-5) var(--s-6);margin-top:var(--s-2);list-style:none}   /* auch klassenlos ohne Punkt; Zeilenabstand 24 px, damit sich die 44-px-Tapflächen gestapelter link-arrows nicht überlappen */
.section--tint .related{background:var(--c-white)}
.category-head{display:flex;flex-direction:column;gap:var(--s-5)}
.category-head__icon{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:var(--r-2);background:var(--c-grey-100);border:1px solid var(--c-border);color:var(--c-navy-700);flex:none}
.category-head__icon svg{width:28px;height:28px}
@media (min-width:768px){.category-head{flex-direction:row;align-items:center}}

/* 23 ▸ Dashboard-Mock (NeoVital Connect) ---------------------------------------------------------- */
.dashboard{position:relative;background:var(--c-white);border:1px solid var(--c-border);border-radius:var(--r-3);overflow:hidden}
.dashboard__chrome{display:flex;align-items:center;gap:var(--s-2);padding:var(--s-3) var(--s-4);border-bottom:1px solid var(--c-border);background:var(--c-grey-100)}
.dashboard__chrome i{width:10px;height:10px;border-radius:50%;background:var(--c-border-strong)}
.dashboard__url{margin-left:var(--s-2);padding:2px var(--s-3);border:1px solid var(--c-border);border-radius:var(--r-1);background:var(--c-white);font-size:var(--fs-micro);color:var(--c-muted)}
.dashboard__badge{margin-left:auto}
@media (max-width:479px){.dashboard__chrome{flex-wrap:wrap}.dashboard__badge{margin-left:0}}   /* Badge passt nicht mehr neben Punkte + URL → zweite Zeile */
.dashboard__body{padding:var(--s-4);display:grid;gap:var(--s-4);font-size:var(--fs-small)}
/* Vorschau-Layout: unter 1024 umbrechende Tab-Zeile ÜBER dem Panel (die Bestellhistorie-Tabelle braucht ≥ 34 rem),
   640–1023 zwei gleichmäßige Dreierreihen, ab 1024 Seitenleiste 13 rem */
.dashboard__layout{display:grid;gap:var(--s-4)}
.dashboard__nav{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.dashboard__nav button,.dashboard__nav span{flex:none;min-height:44px;padding:var(--s-2) var(--s-3);border:1px solid var(--c-border);border-radius:var(--r-2);font-size:var(--fs-small);font-weight:500;color:var(--c-ink);background:var(--c-white);text-align:center}
.dashboard__nav button[aria-selected="true"],.dashboard__nav .is-current{background:var(--c-navy-700);border-color:var(--c-navy-700);color:var(--c-white)}
.dashboard [role="tabpanel"][hidden]{display:none}
@media (min-width:640px) and (max-width:1023px){.dashboard__nav button,.dashboard__nav span{flex:1 1 calc(33.333% - var(--s-2))}}
@media (min-width:1024px){
  .dashboard__layout{grid-template-columns:13rem minmax(0,1fr)}
  .dashboard__nav{flex-direction:column}
  .dashboard__nav button,.dashboard__nav span{text-align:left}
}
.kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-3)}
.kpi{padding:var(--s-4);border:1px solid var(--c-border);border-radius:var(--r-2);background:var(--c-grey-100)}
.kpi__value{font-size:var(--fs-h2);font-weight:600;color:var(--c-navy-900);line-height:1.1;max-width:none}
.kpi__label{font-size:var(--fs-micro);color:var(--c-muted);margin-top:var(--s-1)}
@media (min-width:1024px){.kpis{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:640px){.kpis--3{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:639px){.kpis--3>.kpi:last-child:nth-child(odd){grid-column:1 / -1}}   /* 2 + 1: die letzte Kachel füllt die zweite Reihe statt halbbreit allein zu stehen */
.label-row{font-size:var(--fs-micro);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--c-muted)}
.task-list{display:grid;gap:var(--s-2)}
.task-list li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s-1) var(--s-3);padding:var(--s-3) var(--s-4);border:1px solid var(--c-border);border-radius:var(--r-2);font-size:var(--fs-small)}
.task-list li span:last-child{color:var(--c-muted)}
.message-list{display:grid;gap:var(--s-2)}
.message-list li{display:grid;grid-template-columns:36px minmax(0,1fr);gap:var(--s-3);padding:var(--s-3) var(--s-4);border:1px solid var(--c-border);border-radius:var(--r-2);font-size:var(--fs-small)}
.message-list__avatar{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:var(--c-grey-200);color:var(--c-navy-700);font-size:var(--fs-micro);font-weight:600}
.message-list p{color:var(--c-muted)}
.message-list strong{color:var(--c-navy-900)}
/* Verbundene Schritte (5, Connect): Nummernkreis + gestrichelte Linie ab 768 */
.steps--connected{border-top:0;counter-reset:cstep}
.steps--connected .steps__item{counter-increment:cstep;grid-template-columns:40px minmax(0,1fr);border:0;padding:var(--s-3) 0;position:relative}
.steps--connected .steps__item::before{content:counter(cstep);display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--c-navy-700);background:var(--c-white);font-size:var(--fs-h4);font-weight:600;line-height:1;color:var(--c-navy-700);padding:0;letter-spacing:0}
.steps--connected .steps__title{font-size:var(--fs-h4)}
@media (max-width:767px){.steps--connected .steps__item::before{grid-row:1 / span 2}}   /* einspaltig: der 40-px-Kreis spannt Titel- und Textzeile, ein einzeiliger Titel zieht die erste Zeile nicht auf 40 px */
@media (min-width:768px){
  .steps--connected{grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s-5)}
  .steps--connected .steps__item{grid-template-columns:minmax(0,1fr);padding:0;border:0}
  .steps--connected .steps__item:not(:last-child)::after{content:"";position:absolute;top:20px;left:48px;right:calc(-1 * var(--s-5));border-top:1px dashed var(--c-border-strong)}
}

/* 24 ▸ Rechtstexte / Prosa --------------------------------------------------------------------- */
.prose{max-width:65ch}
.prose>*+*{margin-top:var(--s-4)}
.prose h2{font-size:var(--fs-h3);max-width:none;margin-top:var(--s-7);padding-top:var(--s-5);border-top:1px solid var(--c-border)}   /* volle Spaltenbreite (Basis-h2 kappt bei 32ch): Oberlinie über die ganze 65ch-Spalte, lange Rechtstext-Titel einzeilig */
.prose h2:first-child{margin-top:0;padding-top:0;border-top:0}
.prose h3{font-size:var(--fs-h4);margin-top:var(--s-5)}
.prose p,.prose li,.prose address{color:var(--c-muted)}
.prose ul,.prose ol{padding-left:var(--s-5);display:grid;gap:var(--s-2)}
.prose ul{list-style:disc}
.prose ol{list-style:decimal}
.prose a,.prose address,.prose td{overflow-wrap:anywhere}
.prose .notice{margin-top:var(--s-6)}
.prose .btn{margin-top:var(--s-7)}
.prose strong{color:var(--c-ink)}

/* 25 ▸ Footer ------------------------------------------------------------------------------------ */
.footer{background:var(--c-navy-900);color:var(--c-on-dark-muted);padding-block:var(--section-y) var(--s-6);font-size:var(--fs-small)}
.footer a{color:var(--c-white);text-decoration:none}
.footer a:hover{text-decoration:underline;text-underline-offset:.2em;color:var(--c-white)}
.footer__grid{display:grid;gap:var(--s-7)}
.footer__brand img{height:48px;width:auto}
.footer__brand p{margin-top:var(--s-5);max-width:48ch}
.footer__brand address{margin-top:var(--s-5);display:grid;gap:var(--s-2)}
.footer__brand address p{display:grid;grid-template-columns:20px minmax(0,1fr);gap:var(--s-3);margin:0;align-items:start}
.footer__brand address svg{width:20px;height:20px;margin-top:3px;color:var(--c-on-dark-muted)}
.footer__brand address a{display:inline-flex;align-items:center;min-height:44px}
.footer__brand address p:has(a){align-items:center}
.footer__brand address p:has(a) svg{margin-top:0}
.footer__nav{display:grid;gap:var(--s-6)}
.footer__title{font-size:var(--fs-micro);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--c-white);margin-bottom:var(--s-3);padding-bottom:var(--s-3);border-bottom:1px solid var(--c-on-dark-rule);max-width:none}
.footer__nav ul{display:grid}
.footer__nav li a{display:inline-block;padding-block:10px;min-height:44px}
.footer__bottom{display:flex;flex-direction:column;gap:var(--s-3);margin-top:var(--s-7);padding-top:var(--s-5);border-top:1px solid var(--c-on-dark-rule)}
.footer__bottom p{font-size:var(--fs-micro);text-wrap:balance}
.footer__legal ul{display:flex;flex-wrap:wrap;gap:0 var(--s-5)}
.footer__legal a{display:inline-block;padding-block:12px;min-height:44px;font-size:var(--fs-micro)}
@media (min-width:480px){.footer__nav{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:768px){.footer__nav{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1024px){
  .footer__grid{grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:var(--s-8)}
  .footer__nav{gap:var(--gap)}
  .footer__title{white-space:nowrap}
  .footer__bottom{flex-direction:row;justify-content:space-between;align-items:center}
}
@media (min-width:1280px){.footer__grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}}

/* 26 ▸ Fokus, Bewegung, Druck -------------------------------------------------------------------- */
:focus-visible{outline:2px solid var(--c-accent);outline-offset:2px}
.section--dark :focus-visible,.band--dark :focus-visible,.footer :focus-visible{outline-color:var(--c-white)}
.btn--primary:focus-visible{outline:2px solid var(--c-navy-700);outline-offset:3px}
.section--dark .btn--primary:focus-visible,.band--dark .btn--primary:focus-visible{outline-color:var(--c-white)}
/* weiße Karten auf Navy (Notdienst-Karte, Kontakt-, Fakten-, Formular-, Aside-Karten): Fokusring wieder dunkel */
.emergency__card :focus-visible,.section--dark .contact-card :focus-visible,.section--dark .facts :focus-visible,.band--dark .facts :focus-visible,.section--dark .form--card :focus-visible,.section--dark .aside-card :focus-visible,.section--dark .card :focus-visible{outline-color:var(--c-accent)}
.emergency__card .btn--primary:focus-visible,.section--dark .contact-card .btn--primary:focus-visible,.section--dark .form--card .btn--primary:focus-visible,.section--dark .aside-card .btn--primary:focus-visible{outline-color:var(--c-navy-700)}
@media (hover:none){.btn:hover{transition:none}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:0s!important;animation:none!important}
}
@media print{
  .site-header__meta,.announce,.nav-toggle,.mobile-nav,.site-header__actions,.skip-link,.career-band,.app-band{display:none!important}
  .site-header{position:static}
  body{color:var(--c-ink);background:var(--c-white);font-size:11pt}
  .hero,.section,.section--tint,.section--dark,.band--dark,.footer{background:var(--c-white)!important;color:var(--c-ink)!important;padding-block:16pt}
  .section--dark *,.band--dark *,.footer *{color:var(--c-ink)!important}
  .card,.map-card,.contact-card,.emergency__card,.job-card{border:1px solid var(--c-border-strong);break-inside:avoid}
  .btn{background:none!important;border:1px solid var(--c-ink)!important;color:var(--c-ink)!important}
  a{color:var(--c-ink);text-decoration:underline}
  main a[href^="http"]::after{content:" (" attr(href) ")";font-size:90%}
  img{max-height:60mm}
  .hero__media img{position:static;height:auto;aspect-ratio:3/2}
}