/* ================================================================
   Immeditech — Design-System
   ================================================================
   ALLE Gestaltungswerte stehen hier in :root. Wer die Optik der Site
   aendert, aendert sie hier — nicht in den Regeln darunter und schon gar
   nicht im Content. Die Regeln unten duerfen keine Farbe, keinen Radius,
   keinen Schatten und keinen Abstand als Literal enthalten.
   ================================================================ */

/* TOKENS-ANFANG — erzeugt aus design/tokens.json, nicht von Hand aendern */
:root{
  /* --- Markenfarben ------------------------------------------
     Die einzigen Rohwerte der Site. Jeder Wert nennt seinen Einsatz.
     Wer eine Farbe braucht, die hier nicht steht, hat entweder eine
     Rolle uebersehen oder braucht eine neue Zeile.
     */
  --blue:#004991;     /* Hauptfarbe: Flaechen, Schaltflaechen, Titelakzent */
  --blue-d:#003a73;   /* gedrueckter Zustand einer blauen Flaeche */
  --blue-dd:#012a55;  /* dunkelste Flaeche: Zitat, CTA-Band */
  --blue-l:#2f6fb3;   /* aufgehellt: Referenznamen, stille Akzente */
  --accent:#00a6c9;   /* Vital-Cyan: Eyebrow-Strich, Linien, Marker */
  --accent-d:#0089a8; /* Cyan als Text — die helle Variante ist zu schwach */
  --green:#13a06f;    /* bestaetigt: Haken, Erfolgsmeldung */
  --green-d:#0c7a52;  /* Erfolgstext auf hellgruenem Grund */
  --red:#d64545;      /* Fehlerflaeche */
  --red-d:#b3322f;    /* Fehlertext */
  --white:#ffffff;
  --on-accent:#04303b; /* Text auf Vital-Cyan */
  --surface-ghost:rgba(255,255,255,.1);
  --line-ghost:rgba(255,255,255,.32);

  /* --- Flaechen ---------------------------------------------- */
  --bg:var(--white);                     /* Seitengrund */
  --surface:var(--white);                /* Felder, hervorgehobene Zeilen */
  --surface-sunken:#f3f7fc;              /* abgesetzte Sektion */
  --surface-accent:#e8f1fa;              /* Pill, Sprachumschalter aktiv */
  --surface-invert:var(--blue);          /* Kennzahlen-Band */
  --surface-footer:#072744;
  --surface-header:rgba(255,255,255,.86); /* Kopfzeile mit Unschaerfe */
  --surface-tinted:var(--surface-sunken); /* hervorgehobene Spalte */

  /* --- Text -------------------------------------------------- */
  --ink:#0e2138;           /* Ueberschriften, Spaltenlinie */
  --body:#42566e;          /* Fliesstext */
  --muted:#6c7e95;         /* Legenden, Brotkrumen, Hinweise */
  --on-invert:var(--white); /* Text auf blauer Flaeche */
  --on-invert-muted:rgba(255,255,255,.85);
  --on-footer:#a9c2da;
  --on-footer-muted:#7e9ab5;

  /* --- Linien ------------------------------------------------ */
  --line:#e1e9f2;
  --line-strong:#cfe0f1;
  --line-invert:rgba(255,255,255,.12);
  --line-invert-strong:rgba(255,255,255,.25);
  --bw:1px;      /* Standard-Linienstaerke */
  --bw-thick:2px; /* Akzentkanten, Nav-Underline */

  /* --- Form -------------------------------------------------- */
  --radius:0;
  --radius-sm:0;
  --radius-lg:0;
  --radius-pill:999px; /* nur noch fuer runde Elemente (Avatare) */

  /* --- Stapelebenen ------------------------------------------
     Leaflet vergibt seinen Panes bis 1000 — alles Eigene liegt
     darueber.
     */
  --z-header:1200; /* ueber Leaflet (max. 1000) */
  --z-chat:1300;

  /* --- Schatten und Fokus ------------------------------------
     Im aktuellen Entwurf tragen Haarlinien die Trennung; die Schatten
     stehen auf none, bleiben aber als Rolle bestehen.
     */
  --shadow:none;
  --shadow-lg:none;
  --shadow-btn:none;
  --shadow-btn-hover:none;
  --shadow-btn-accent:none;
  --focus-ring:0 0 0 4px rgba(0,73,145,.1);

  /* --- Dekor -------------------------------------------------
     Verlaeufe und Bewegung an einer Stelle, damit sie sich zentral
     abschalten lassen.
     */
  --grad-brand:var(--blue);           /* war ein Verlauf im Text */
  --grad-icon:none;                   /* Icons ohne Kachel */
  --grad-invert:var(--blue-dd);       /* Zitat, CTA-Band */
  --grad-line:var(--line);            /* Prozess-Linie */
  --wash-hero:var(--white);           /* keine Farbwolken mehr */
  --wash-subhero:var(--surface-sunken);
  --wash-cta:var(--grad-invert);
  --card-lift:none;                   /* keine schwebenden Karten */
  --dauer-linie:.55s;                 /* Einlaufen der Spaltenlinie */
  --dauer-zahl:900;                   /* Hochzaehlen der Kennzahlen in ms (von site.js gelesen) */
  --kurve:cubic-bezier(.22,.61,.36,1); /* Beschleunigung aller Bewegungen */

  /* --- Raum --------------------------------------------------
     Vielfache von 4px (0.25rem), benannt nach dem Vielfachen.
     Zwischenwerte vermeiden — wer 22px braucht, nimmt 20 oder 24.
     */
  --sp-1:.25rem; /* 4px  Feinjustierung, Icon zu Text */
  --sp-2:.5rem;  /* 8px  innerhalb einer Zeile */
  --sp-3:.75rem; /* 12px  Titel zu Text */
  --sp-4:1rem;   /* 16px  Absatz zu Absatz */
  --sp-5:1.25rem; /* 20px  Innenabstand kleiner Flaechen */
  --sp-6:1.5rem; /* 24px  Innenabstand Spalten und Felder */
  --sp-8:2rem;   /* 32px  Block zu Block */
  --sp-10:2.5rem; /* 40px  Spalte zu Spalte */
  --sp-12:3rem;  /* 48px  Sektionskopf zu Inhalt */
  --sp-16:4rem;  /* 64px  grosse Zaesur innerhalb einer Sektion */
  --sp-24:6rem;  /* 96px  Sektion zu Sektion (mobil) */

  /* --- Raster ------------------------------------------------ */
  --section-y:clamp(56px,8vw,104px); /* Aussenabstand einer Sektion */
  --gap-grid:var(--sp-10);          /* zwischen Spalten */
  --gap-split:var(--sp-16);         /* zwischen Bild und Text */
  --maxw:1180px;                    /* Inhaltsbreite */
  --maxw-prose:820px;               /* Lesetext, ~85 Zeichen */
  --maxw-prose-wide:900px;          /* Magazin-Artikelkopf */
  --seitenrand:24px;                /* Innenabstand des Containers */
  --maxw-lead:60ch;                 /* Lead unter einer Ueberschrift */
  --portrait-fokus:50% 22%;         /* Bildausschnitt der Portraits — Kopf sitzt oben, nicht mittig */
  --hero-fokus:58% 50%;             /* Bildausschnitt im Hero — das Motiv sitzt rechts der Mitte */

  /* --- Schrift ----------------------------------------------- */
  --ff:"Inter",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  --fh:"Manrope",var(--ff);
  --fs-body:17px;
  --fs-body-sm:16px;
  --lh-body:1.65;
  --lh-head:1.12;
  --track-head:-.03em;
  --fw-head:800;
  --h1:clamp(2.4rem,5.6vw,4.2rem);        /* traegt die Seite */
  --h2:clamp(1.55rem,2.8vw,2.15rem);      /* klar unter h1 */
  --h3:1.1rem;
  --fs-eyebrow:.72rem;
  --track-eyebrow:.18em;
  --fs-lead:1.14rem;
  --rule:var(--bw-thick) solid var(--ink); /* die Spaltenlinie */
}
/* TOKENS-ENDE */

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:var(--ff);color:var(--body);background:var(--bg);
  font-size:var(--fs-body);line-height:var(--lh-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:var(--blue);text-decoration:none}
h1,h2,h3,h4{font-family:var(--fh);color:var(--ink);line-height:var(--lh-head);margin:0 0 .5em;font-weight:var(--fw-head);letter-spacing:var(--track-head)}
h1{font-size:var(--h1)}
h2{font-size:var(--h2)}
h3{font-size:var(--h3)}
p{margin:0 0 1rem}
.container{max-width:var(--maxw);margin:0 auto;padding:0 var(--seitenrand)}
section{padding:var(--section-y) 0}
.section-soft{background:var(--surface-sunken)}
.section-head{max-width:52ch}
.section-head h2{max-width:20ch}
.section-head .lead{margin-top:var(--sp-4);max-width:56ch}
.eyebrow{font-family:var(--fh);font-weight:700;font-size:var(--fs-eyebrow);letter-spacing:var(--track-eyebrow);
  text-transform:uppercase;color:var(--accent-d);margin:0 0 14px;display:flex;align-items:center;gap:10px}

.eyebrow::before{content:"";width:26px;height:2px;background:var(--accent);border-radius:2px}

.lead{font-size:var(--fs-lead);color:var(--body);max-width:var(--maxw-lead)}

.muted{color:var(--muted)}
.grad{background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--fh);font-weight:700;
  font-size:1rem;padding:14px 26px;border-radius:var(--radius);border:var(--bw) solid transparent;
  cursor:pointer;transition:.22s ease;white-space:nowrap;line-height:1}
.btn svg{width:18px;height:18px}
.btn-primary{background:var(--blue);color:var(--on-invert);box-shadow:var(--shadow-btn)}
.btn-primary:hover{background:var(--blue-d)}
.btn-accent{background:var(--accent);color:var(--on-accent);box-shadow:var(--shadow-btn-accent)}
.btn-accent:hover{background:var(--accent-d);color:var(--on-invert)}
.btn-ghost{background:var(--surface);color:var(--blue);border-color:var(--line-strong)}
.btn-ghost:hover{border-color:var(--blue)}
.btn-light{background:var(--surface-ghost);color:var(--on-invert);border-color:var(--line-ghost)}
.btn-light:hover{background:var(--surface);color:var(--blue)}
.btn-lg{padding:17px 32px;font-size:1.06rem}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:var(--z-header);background:var(--surface-header);
  backdrop-filter:saturate(160%) blur(12px);border-bottom:var(--bw) solid var(--line);transition:.3s}
.nav{display:flex;align-items:center;gap:20px;height:88px}
.brand{display:flex;align-items:center;gap:10px;margin-right:auto}
.brand img{height:52px;width:auto}
.nav-links{display:flex;gap:21px;align-items:center;list-style:none;margin:0;padding:0}
.nav-links a{font-family:var(--fh);font-weight:600;font-size:.96rem;color:var(--ink);
  padding:6px 0;position:relative;white-space:nowrap}
.nav-links a:hover{color:var(--blue)}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:var(--bw-thick);
  background:var(--accent);transition:.25s}
.nav-links a:hover::after{width:100%}
.nav-cta{display:flex;align-items:center;gap:14px}
.langs{display:flex;gap:4px;align-items:center}
.langs button,.langs a{font-family:var(--fh);font-weight:700;font-size:.8rem;color:var(--muted);
  background:none;border:none;cursor:pointer;padding:5px 8px;border-radius:7px;text-transform:uppercase;letter-spacing:.04em}
.langs button.active,.langs a.active{color:var(--blue);background:var(--surface-accent)}
.langs button:hover,.langs a:hover{color:var(--blue)}
.burger{display:none;background:none;border:none;cursor:pointer;width:42px;height:42px;padding:8px}
.burger span{display:block;height:2.5px;background:var(--ink);border-radius:2px;margin:5px 0;transition:.3s}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;background:var(--wash-hero)}
.hero .container{display:grid;grid-template-columns:1.08fr .92fr;gap:56px;align-items:center;
  padding-top:clamp(44px,6vw,80px);padding-bottom:clamp(36px,4.5vw,60px)}
.hero h1{margin-bottom:.35em}
.hero-sub{font-size:1.2rem;max-width:46ch;margin-bottom:28px}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:30px}
.hero-trust{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;color:var(--muted);font-size:.9rem;font-weight:600}
.hero-trust b{color:var(--ink)}
.hero-trust .dot{width:5px;height:5px;border-radius:50%;background:var(--accent)}
.hero-visual{position:relative}
.hero-visual img{border-radius:var(--radius);width:100%;object-fit:cover;
  object-position:var(--hero-fokus);aspect-ratio:4/3.2}

/* animated EKG/pulse line */
.pulse-svg{position:absolute;left:0;right:0;bottom:0;width:100%;height:54px;opacity:.5;pointer-events:none}
.pulse-svg path{fill:none;stroke:var(--accent);stroke-width:3;
  stroke-dasharray:1400;stroke-dashoffset:1400;animation:draw 4s ease forwards .3s}
@keyframes draw{to{stroke-dashoffset:0}}

/* Die scroll-gesteuerte Variante (animation-timeline: view()) stand hier
   einmal. Sie ist wieder raus: Firefox kennt die Eigenschaft nicht, und in
   Chromium blieb die Linie bei rund 12 Prozent stehen, statt dem Scrollen zu
   folgen. Eine Animation, die in der einen Engine fehlt und in der anderen
   nicht laeuft, ist nur Risiko — die Zeichnung beim Laden funktioniert
   ueberall. */

/* ---------- stat / trust strip ---------- */
.stripe{background:var(--surface-invert);color:var(--on-invert)}
.stripe .container{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
  padding-top:var(--sp-12);padding-bottom:var(--sp-12)}
.stripe .st{padding:0;border-top:var(--bw) solid var(--line-invert-strong);padding-top:var(--sp-5)}
.stripe .st b{display:block;font-family:var(--fh);font-size:2.6rem;font-weight:var(--fw-head);
  letter-spacing:var(--track-head);font-variant-numeric:tabular-nums}
.stripe .st span{font-size:.92rem;opacity:.82}
.logos{margin:var(--sp-8) 0 var(--sp-12);display:flex;flex-wrap:wrap;gap:var(--sp-4) var(--sp-12);align-items:center}
.logos .logo-name{font-family:var(--fh);font-weight:var(--fw-head);color:var(--blue-l);font-size:1.05rem;
  letter-spacing:.01em;display:flex;align-items:center;gap:9px}
.logos .logo-name::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--accent)}

/* ---------- generic grids/cards ---------- */
.grid{display:grid;gap:var(--gap-grid)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{background:none;border:0;border-radius:0;position:relative;
  padding:var(--sp-6) 0 0;height:100%}
/* Die Oberlinie ist ein Pseudo-Element, damit sie einlaufen kann. Ohne
   JavaScript (kein .reveal) steht sie sofort. */
.card::before{content:"";position:absolute;top:0;left:0;right:0;
  height:var(--bw-thick);background:var(--ink);transform-origin:left;
  transition:transform var(--dauer-linie) var(--kurve), background-color .25s}
.card.reveal::before{transform:scaleX(0)}
.card.reveal.in::before{transform:scaleX(1)}
.card:hover::before{background:var(--accent-d)}
/* Icons in den Spalten: die Oberlinie traegt die Gliederung, ein
   zusaetzliches Piktogramm waere Dekor ohne Aufgabe. */
.card .ic{display:none}
.card h3{margin-bottom:var(--sp-3)}
.card p{font-size:.98rem;margin-bottom:var(--sp-4);max-width:38ch}
.card .kicker{font-family:var(--fh);font-weight:var(--fw-head);color:var(--line-strong);font-size:1.4rem;line-height:1;
  position:absolute;top:calc(var(--sp-6) * -1 + 2px);right:0}
.card-num{position:relative}
.card .more{font-family:var(--fh);font-weight:700;color:var(--blue);font-size:.94rem;display:inline-flex;align-items:center;gap:6px}
.card .more svg{width:16px;height:16px;transition:.2s}
.card:hover .more svg{transform:translateX(4px)}

ul.ticks{list-style:none;padding:0;margin:0 0 16px}
ul.ticks > li{position:relative;padding-left:30px;margin-bottom:10px;font-size:.97rem}
ul.ticks > li::before{content:"";position:absolute;left:0;top:3px;width:19px;height:19px;border-radius:50%;
  background:color-mix(in srgb,var(--green) 13%,transparent);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2313a06f' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;background-size:13px}

/* ---------- segment cards ---------- */
.seg{display:flex;flex-direction:column;gap:var(--sp-2);background:none;border:0;
  border-radius:0;padding:var(--sp-6) 0 0;position:relative}
.seg::before{content:"";position:absolute;top:0;left:0;right:0;height:var(--bw-thick);
  background:var(--blue);transform-origin:left;
  transition:transform var(--dauer-linie) var(--kurve), background-color .25s}
.seg.reveal::before{transform:scaleX(0)}
.seg.reveal.in::before{transform:scaleX(1)}
.seg:hover::before{background:var(--accent-d)}
.seg--accent::before{background:var(--accent)}
.seg--light::before{background:var(--blue-l)}
.seg--featured::before{background:var(--blue)}
.seg.partner::before{background:var(--accent)}
.seg .ic{width:auto;height:auto;display:block;color:var(--accent-d);margin-bottom:var(--sp-2)}
.seg .ic svg{width:25px;height:25px}

/* ---------- split feature ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-split);align-items:center}
.split.rev .split-media{order:2}
.split-media img{border-radius:var(--radius);width:100%;aspect-ratio:4/3;object-fit:cover}

/* ---------- process timeline ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;position:relative}

.step{position:relative;border-top:var(--bw) solid var(--line);padding-top:var(--sp-5)}
.step .n{font-family:var(--fh);font-weight:var(--fw-head);font-size:1.05rem;color:var(--accent-d);
  display:block;margin-bottom:var(--sp-3);letter-spacing:.06em}
.step h3{font-size:var(--h3)}
.step p{font-size:.92rem;margin:0}

/* ---------- team ---------- */
.member{text-align:left}
.member img{width:100%;max-width:none;margin:0 0 var(--sp-4);border-radius:var(--radius);
  aspect-ratio:1;object-fit:cover;object-position:var(--portrait-fokus)}
.member h3{font-size:var(--h3);margin-bottom:2px}
.member span{color:var(--accent-d);font-weight:600;font-size:.9rem;font-family:var(--fh)}

/* ---------- quote ---------- */
.quote{background:none;color:var(--ink);border-top:var(--rule);border-radius:0;
  padding:var(--sp-8) 0 0;display:grid;grid-template-columns:auto 1fr;gap:var(--sp-8);align-items:start}
.quote img{width:88px;height:88px;border-radius:var(--radius-pill);object-fit:cover;
  object-position:var(--portrait-fokus);border:0}
.quote blockquote{margin:0;font-family:var(--fh);font-size:clamp(1.3rem,2.4vw,1.9rem);font-weight:600;
  line-height:1.32;letter-spacing:var(--track-head);max-width:30ch}
.quote blockquote::before{content:"«"}
.quote blockquote::after{content:"»"}
.quote cite{display:block;margin-top:var(--sp-5);font-style:normal;font-size:.95rem;color:var(--muted);font-weight:600}

/* ---------- FAQ ---------- */
.faq{max-width:var(--maxw-prose)}
.qa{border-bottom:var(--bw) solid var(--line)}
.qa button{width:100%;background:none;border:none;cursor:pointer;text-align:left;padding:22px 44px 22px 0;
  font-family:var(--fh);font-weight:700;font-size:1.08rem;color:var(--ink);position:relative}
.qa button::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);
  font-size:1.6rem;color:var(--accent);font-weight:400;transition:.25s}
.qa.open button::after{transform:translateY(-50%) rotate(45deg)}
.qa .a{max-height:0;overflow:hidden;transition:max-height .35s ease}
.qa .a p{padding:0 0 22px;margin:0;color:var(--body)}
.qa.open .a{max-height:420px}

/* ---------- CTA band ---------- */
.cta-band{background:var(--wash-cta);color:var(--on-invert);border-radius:var(--radius);
  padding:clamp(40px,6vw,72px) clamp(24px,4vw,56px);position:relative;overflow:hidden}
.cta-band h2{color:var(--on-invert);max-width:22ch}
.cta-band p{color:var(--on-invert-muted);max-width:56ch;margin:var(--sp-4) 0 var(--sp-8);font-size:var(--fs-lead)}


/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:48px;align-items:start}
.contact-info .ci{display:flex;gap:14px;margin-bottom:22px;align-items:flex-start}
.contact-info .ci .ic{width:22px;height:22px;color:var(--accent-d);display:grid;place-items:center;flex:none;margin-top:2px}
.contact-info .ci .ic svg{width:22px;height:22px}
.contact-info .ci b{color:var(--ink);font-family:var(--fh)}
form .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
form label{display:block;font-family:var(--fh);font-weight:600;font-size:.88rem;color:var(--ink);margin:14px 0 6px}
form input,form select,form textarea{width:100%;padding:13px 15px;border:var(--bw) solid var(--line-strong);
  border-radius:var(--radius);font:inherit;font-size:.97rem;color:var(--ink);background:var(--surface);transition:.2s}
form input:focus,form select:focus,form textarea:focus{outline:none;border-color:var(--blue);
  box-shadow:var(--focus-ring)}
form textarea{min-height:120px;resize:vertical}
.hp{position:absolute;left:-9999px}
.form-note{font-size:.84rem;color:var(--muted);margin-top:12px}
.form-msg{display:none;padding:14px 16px;border-radius:var(--radius);margin-top:14px;font-weight:600}
.form-msg.ok{display:block;background:color-mix(in srgb,var(--green) 12%,transparent);color:var(--green-d)}
.form-msg.err{display:block;background:color-mix(in srgb,var(--red) 10%,transparent);color:var(--red-d)}

/* ---------- footer ---------- */
.site-footer{background:var(--surface-footer);color:var(--on-footer);padding:64px 0 28px;font-size:.94rem}
.site-footer .container{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px}
.site-footer img.flogo{height:32px;margin-bottom:16px}
.site-footer h4{color:var(--on-invert);font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:16px}
.site-footer a{color:var(--on-footer);display:block;margin-bottom:9px}
.site-footer a:hover{color:var(--on-invert)}
.site-footer .fbottom{grid-column:1/-1;border-top:var(--bw) solid var(--line-invert);margin-top:20px;
  padding-top:22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:.86rem;color:var(--on-footer-muted)}

/* ---------- breadcrumb / subpage hero ---------- */
.subhero{background:var(--wash-subhero);padding:clamp(40px,6vw,76px) 0 clamp(34px,5vw,60px)}
.crumb{font-size:.86rem;color:var(--muted);margin-bottom:18px;font-weight:600}
.crumb a{color:var(--muted)}.crumb a:hover{color:var(--blue)}
.subhero h1{max-width:18ch}
.subhero .lead{margin-top:6px}
.pill{display:inline-flex;align-items:center;gap:8px;background:var(--surface-accent);color:var(--blue-d);
  font-family:var(--fh);font-weight:700;font-size:.8rem;padding:7px 14px;border-radius:999px;margin-bottom:18px}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}


/* ================================================================
   Hilfsklassen — ersetzen die frueheren Inline-Styles im Content.
   Content beschreibt WAS etwas ist, nicht wie es aussieht; alle Werte
   kommen aus :root. Wer Abstaende aendert, aendert sie hier.
   ================================================================ */

/* Vertikaler Rhythmus */
.mt-xs{margin-top:var(--sp-3)}
.mt-s{margin-top:var(--sp-5)}
.mt-m{margin-top:var(--sp-6)}
.mt-l{margin-top:var(--sp-10)}
.mt-xl{margin-top:var(--sp-12)}
.mb-xs{margin-bottom:var(--sp-3)}
.ml-xs{margin-left:var(--sp-2)}

/* Textbreiten */
.prose{max-width:var(--maxw-prose)}
.prose-wide{max-width:var(--maxw-prose-wide)}
.prose h2{margin-top:1.3em}
.lead-under{max-width:62ch;margin-top:var(--sp-6)}

/* Sektionsvarianten */
.section-tight{padding-top:var(--sp-2);padding-bottom:var(--sp-2)}
.section-flush{padding:0}
.section-fade{background:linear-gradient(180deg,var(--white),var(--surface-accent))}

/* Segment-Karten: farbige Oberkante */
.seg--featured{background:var(--surface-tinted)}

/* Pill in Vollfarbe */
.pill--solid{background:var(--blue);color:var(--on-invert);margin-bottom:var(--sp-3)}

/* Kontaktzeile mit hinterlegter Flaeche (Ansprechpartner) */
.ci--boxed{align-items:center;background:var(--surface);border:var(--bw) solid var(--line);
  border-radius:var(--radius);padding:var(--sp-4) var(--sp-5);margin-top:var(--sp-2)}
.avatar-sm{width:52px;height:52px;border-radius:var(--radius-pill);object-fit:cover;
  object-position:var(--portrait-fokus);flex:none}

/* Magazin-Karte mit randlosem Bild */
.card--media{padding:0;overflow:hidden;display:block}
.card__body{padding:var(--sp-6)}

/* Medien-Seitenverhaeltnisse */
.media-5x4{aspect-ratio:5/4}
.media-16x9{width:100%;aspect-ratio:16/9;object-fit:cover}
.media-16x7{border-radius:var(--radius);box-shadow:var(--shadow-lg);width:100%;aspect-ratio:16/7;object-fit:cover}

/* ---------- Bewegung ----------
   Wer im Betriebssystem weniger Bewegung wuenscht, bekommt die Endzustaende
   sofort. Das ist keine Kuer: die Reveal-Animation blendet Inhalte ein, ohne
   sie waere die Seite fuer diese Nutzer teilweise unsichtbar. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1!important;transform:none!important}
  .card.reveal::before,.seg.reveal::before{transform:scaleX(1)!important}
  .pulse-svg path{stroke-dashoffset:0!important}
}

/* ---------- responsive ---------- */
@media(max-width:980px){
  .hero .container{grid-template-columns:1fr;gap:40px}
  .hero-visual{max-width:560px}
  .split,.contact-grid{grid-template-columns:1fr;gap:34px}
  .split.rev .split-media{order:0}
  .g4{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr);gap:30px}
  .steps::before{display:none}
  .site-footer .container{grid-template-columns:1fr 1fr}
  .quote{grid-template-columns:1fr}
}
@media(max-width:940px){
  .nav-links,.nav-cta .btn,.nav-cta .langs{display:none}
  .burger{display:block}
  .nav-cta{margin-left:auto}
  .mobile-open .nav-links{display:flex;position:absolute;top:88px;left:0;right:0;background:var(--surface);
    flex-direction:column;padding:18px 24px;gap:6px;border-bottom:var(--bw) solid var(--line);box-shadow:var(--shadow-lg)}
  .mobile-open .nav-links a{padding:11px 0;border-bottom:var(--bw) solid var(--surface-sunken);width:100%}
  .mobile-open .nav-cta .btn,.mobile-open .nav-cta .langs{display:flex}
  .mobile-open .nav{flex-wrap:wrap}
}
@media(max-width:760px){
  .g2,.g3,.g4,.stripe .container{grid-template-columns:1fr}
  .stripe .container{gap:26px}
  form .row{grid-template-columns:1fr}
    .site-footer .container{grid-template-columns:1fr 1fr}
  body{font-size:var(--fs-body-sm)}
}
@media(max-width:460px){
  .site-footer .container{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  /* Die Nummer steht sonst ueber der Oberlinie der vorigen Karte. */
  .card .kicker{position:static;display:block;margin-bottom:var(--sp-2)}
}

/* Hinweisbalken fuer draft-Seiten — erscheint nur im Staging-Build. */
.draft-banner{background:var(--accent);color:var(--on-accent);text-align:center;font-weight:600;padding:var(--sp-2) var(--sp-4)}

/* «MedTech-Experten» nicht am Bindestrich umbrechen */
.hero h1 .grad{white-space:nowrap}