/* ============================================================
   Safety Club — Self-hosted webfonts (Manrope + IBM Plex Mono)
   Served locally from /assets/fonts — no third-party requests.
   ============================================================ */
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/ibm-plex-mono-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/ibm-plex-mono-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/ibm-plex-mono-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/ibm-plex-mono-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/ibm-plex-mono-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/ibm-plex-mono-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/manrope-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/manrope-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/manrope-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/manrope-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/manrope-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/manrope-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/manrope-700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/manrope-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/manrope-800-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/manrope-800-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* ============================================================
   Safety Club — Brand System
   Colours & type from the Safety Club Brand Guidelines (Notion)
   ============================================================ */

:root {
  /* Core brand blues */
  --signal: #0057FF;
  --deep:   #0042CC;
  /* Supporting blues */
  --ice:    #D6E2FF;
  --sky:    #7FA0FF;
  --navy:   #0A1A47;
  /* Neutrals — white to ink */
  --white:  #FFFFFF;
  --paper:  #F1F4F9;
  --mist:   #E4E9F2;
  --line:   #D0D8E4;
  --steel:  #98A2B3;
  --slate:  #5C6574;
  --graphite:#2C333F;
  --ink:    #10131A;

  /* Semantic */
  --bg:        var(--paper);
  --surface:   var(--white);
  --border:    var(--line);
  --text:      var(--navy);
  --text-soft: var(--slate);
  --accent:    var(--signal);

  /* Type */
  --font-sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Layout */
  --maxw: 1200px;
  --radius: 12px;
  --radius-lg: 12px;
  --radius-sm: 10px;
  /* Flach: keine Ruhe-/Hover-Schatten, keine Glows. Trennung ueber 1px-Raender.
     Interaktive Elemente heben nur leicht an (transform), ohne Schatten. */
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
  --shadow-blue: none;

  --ease: cubic-bezier(.22,.61,.36,1);
  --nav-h: 74px;
}

/* ---------- Reset / base ---------- */
*,*::before,*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; -webkit-text-size-adjust: 100%; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
/* Einheitlicher, klar sichtbarer Tastatur-Fokus (nur bei Tastatur, nicht bei Maus).
   outline-offset legt den Ring auf den Untergrund, so bleibt er auch auf
   gefuellten Buttons und dunklen Panels sichtbar. */
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
.btn:focus-visible, .filter-dd__btn:focus-visible, .filter-dd__opt:focus-visible { outline-offset: 2px; }
/* Auf dunklen/blau gefuellten Flaechen einen hellen Ring, damit er kontrastiert */
.btn-primary:focus-visible, .problem :focus-visible, .contact :focus-visible, .trigger:focus-visible, .toolcta :focus-visible, .lang-toggle__opt:focus-visible { outline-color: var(--sky); }
/* Einheitliche Icon-Strichstaerke ueber die ganze Seite */
svg[stroke] { stroke-width: 2; }
/* Einheitliche Unterstreichung fuer Inline-Links im Fliesstext */
.legal a, .form__check a, .toolreport__check a, .cc-banner__text a, .section-lead a, .ecard__body a, .about__lead a { color: var(--signal); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.legal a:hover, .form__check a:hover, .toolreport__check a:hover, .cc-banner__text a:hover, .section-lead a:hover, .ecard__body a:hover, .about__lead a:hover { text-decoration-thickness: 2px; }

/* ---------- Typography ---------- */
h1,h2,h3,h4 { margin: 0; font-weight: 600; letter-spacing: -.02em; line-height: 1.08; text-wrap: balance; }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); letter-spacing: -.025em; }
h3 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); font-weight: 600; letter-spacing: -.02em; }
p  { margin: 0; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: .55rem;
}
.eyebrow::before { content: none; }
.eyebrow--muted { color: var(--slate); }
.eyebrow--muted::before { background: var(--steel); box-shadow: 0 0 0 4px rgba(152,162,179,.18); }

.section-lead {
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  color: var(--text-soft);
  max-width: 800px;
}

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 24px; }
section { position: relative; }
.section-pad { padding-block: clamp(44px, 4.6vw, 70px); }
.section-head { max-width: 800px; margin-bottom: 44px; }
.section-head .eyebrow { margin-bottom: 18px; }
.text-center { text-align: center; }
.mx-auto { margin-inline: auto; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: 11px 22px;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: .92rem;
  letter-spacing: -.01em;
  border: 1px solid transparent;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .2s var(--ease), color .2s var(--ease);
  white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; transition: transform .25s var(--ease); }
.btn-primary { background: var(--signal); color: #fff; }
.btn-primary:hover { background: var(--deep); transform: translateY(-2px); }
.btn-primary:hover svg { transform: translateX(3px); }
.btn-ghost { background: var(--white); color: var(--navy); border-color: var(--border); box-shadow: var(--shadow-sm); }
.btn-ghost:hover { transform: translateY(-2px); border-color: var(--sky); }
.btn-lg { padding: 14px 28px; font-size: 1rem; }

/* ---------- Logo ---------- */
.logo { display: inline-flex; align-items: center; gap: 12px; flex: none; }
.logo__img { height: 30px; width: auto; flex: none; display: block; transition: transform .4s var(--ease); }
.logo:hover .logo__img { transform: scale(1.03); }
.footer .logo__img { height: 30px; }
/* legacy inline-svg logo fallback (unused when image present) */
.logo__mark { width: 30px; height: 30px; flex: none; }
.logo__word { font-weight: 600; font-size: 1.28rem; letter-spacing: -.03em; color: var(--navy); }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--nav-h);
  display: flex; align-items: center;
  transition: background .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(241,244,249,.96);
  border-bottom-color: var(--border);
  box-shadow: var(--shadow-sm);
}
/* Frosted-glass blur only on desktop — backdrop-filter repaints every scroll
   frame and is the main cause of scroll jank on mobile Safari. */
@media (min-width: 901px) {
  .nav.scrolled {
    background: rgba(241,244,249,.78);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
  }
}
.nav__inner { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.nav__links { display: flex; align-items: center; gap: 28px; }
.nav__links a {
  font-size: .92rem; font-weight: 600; color: var(--navy);
  position: relative; transition: color .2s var(--ease);
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: -6px; height: 2px; width: 100%;
  background: var(--signal); transform: scaleX(0); transform-origin: left; transition: transform .28s var(--ease);
}
.nav__links a:hover { color: var(--signal); }
.nav__links a:hover::after { transform: scaleX(1); }
.nav__cta { display: flex; align-items: center; gap: 14px; }
.nav__burger { display: none; flex-direction: column; gap: 5px; background: none; border: 0; padding: 8px; }
.nav__burger span { width: 24px; height: 2px; background: var(--ink); border-radius: 2px; transition: .3s var(--ease); }
.nav.open .nav__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.open .nav__burger span:nth-child(2) { opacity: 0; }
.nav.open .nav__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1024px) {
  .nav__links, .nav__cta .btn-ghost { display: none; }
  .nav__burger { display: flex; }
  /* compact CTA on tablet so it doesn't crowd the logo */
  .nav__cta { gap: 8px; }
  .nav__cta .btn-primary { padding: 9px 17px; font-size: .84rem; }
}
@media (max-width: 600px) {
  /* phones: no top-bar CTA (no room next to the full logo) — it moves into the menu */
  .nav__cta .btn-primary { display: none; }
  .logo__img { height: 28px; }
}
@media (max-width: 1024px) {
  .nav__links {
    position: fixed; inset: var(--nav-h) 0 auto 0;
    flex-direction: column; align-items: flex-start; gap: 4px;
    background: var(--white); padding: 20px 24px 28px;
    border-bottom: 1px solid var(--border); box-shadow: var(--shadow-lg);
    transform: translateY(-120%); transition: transform .35s var(--ease);
  }
  .nav.open .nav__links { display: flex; transform: translateY(0); }
  .nav__links a { font-size: 1.1rem; padding: 10px 0; width: 100%; }
}
/* CTA inside the mobile menu (only on phones, where the top-bar button is hidden) */
.nav__menu-cta { display: none; }
@media (max-width: 600px) {
  .nav__links .nav__menu-cta {
    display: inline-flex; width: 100%; justify-content: center;
    margin-top: 14px; padding: 13px 20px; font-size: 1rem; color: #fff;
  }
  .nav__links .nav__menu-cta:hover { color: #fff; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero { position: relative; padding-top: calc(var(--nav-h) + clamp(40px, 7vw, 90px)); padding-bottom: clamp(44px, 4.6vw, 70px); overflow: hidden; }
.hero__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 72%, transparent 100%); }
.hero__glow {
  position: absolute; width: 900px; height: 900px; border-radius: 50%;
  top: -420px; right: -260px;
  background: radial-gradient(circle, rgba(0,87,255,.18), rgba(127,160,255,.06) 45%, transparent 70%);
}
.hero__glow2 {
  position: absolute; width: 620px; height: 620px; border-radius: 50%;
  bottom: -340px; left: -220px;
  background: radial-gradient(circle, rgba(214,226,255,.7), transparent 68%);
}
.dot-grid {
  display: none; /* Punkte-Motiv site-weit entfernt */
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(10,26,71,.16) 2.2px, transparent 2.2px);
  background-size: 20px 20px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 70% 20%, #000 0%, transparent 75%);
  mask-image: radial-gradient(ellipse 80% 70% at 70% 20%, #000 0%, transparent 75%);
}
.hero__grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 56px; align-items: center;
}
.hero__badge {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--white); border: 1px solid var(--border);
  padding: 7px 14px 7px 8px; border-radius: 999px;
  font-size: .84rem; font-weight: 600; color: var(--slate);
  box-shadow: var(--shadow-sm); margin-bottom: 26px;
}
.hero__badge b { color: var(--navy); font-weight: 600; }
.hero__badge .pill {
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .08em;
  background: var(--ice); color: var(--deep); padding: 3px 9px; border-radius: 999px; text-transform: uppercase;
}
.hero h1 {
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  letter-spacing: -.03em; line-height: 1.02;
  margin-bottom: 22px;
}
.hero h1 .accent { color: var(--signal); white-space: nowrap; }
/* English hero title is longer than the German one; size it down a touch and
   force the accent onto its own line so it reads "Occupational safety" /
   "now uncomplicated." and never overflows the text column into the image. */
html[lang="en"] .hero h1 { font-size: clamp(2.05rem, 4.4vw, 3.1rem); }
html[lang="en"] .hero h1 .accent { display: block; }
/* On phones a long accent phrase (e.g. partner hero) must wrap, not overflow the viewport */
@media (max-width: 760px) { .hero h1 .accent { white-space: normal; } }
.hero__sub { font-size: clamp(1.08rem, 1.7vw, 1.28rem); color: var(--text-soft); max-width: 40ch; margin-bottom: 34px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 34px; }
.hero__trust { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.hero__trust-item { display: flex; align-items: center; gap: 9px; font-size: .92rem; color: var(--slate); font-weight: 600; }
.hero__trust-item svg { width: 18px; height: 18px; color: var(--signal); flex: none; }

/* hero visual — floating glass stack */
.hero__visual { position: relative; height: 100%; min-height: 440px; }
.hero__photo {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-lg); border: 1px solid rgba(255,255,255,.6);
  aspect-ratio: 4/5; background: linear-gradient(135deg, var(--navy), var(--deep));
}
.hero__photo--video { aspect-ratio: 4 / 4.4; height: auto; min-height: 0; }
.hero__visual { display: flex; }
.hero__visual .hero__photo { width: 100%; }
.hero__photo img, .hero__photo video { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero__photo::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,87,255,.14), transparent 42%, rgba(10,26,71,.34));
}
.float-card {
  position: absolute; z-index: 3;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  padding: 14px 16px; display: flex; align-items: center; gap: 12px;
}
.float-card__icon {
  width: 40px; height: 40px; border-radius: 11px; flex: none;
  display: grid; place-items: center; color: #fff; background: var(--signal);
}
.float-card__icon svg { width: 20px; height: 20px; }
.float-card__icon.green { background: var(--signal); }
.float-card__t { font-size: .84rem; font-weight: 600; color: var(--navy); line-height: 1.2; }
.float-card__s { font-size: .72rem; color: var(--slate); font-family: var(--font-mono); letter-spacing: .02em; }
.float-card--tl { top: 26px; left: -34px; animation: floaty 6s ease-in-out infinite; }
.float-card--br { bottom: 44px; right: -30px; animation: floaty 7s ease-in-out infinite .8s; }
.float-card--ml { bottom: -18px; left: 20px; animation: floaty 6.5s ease-in-out infinite .4s; }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; gap: 44px; }
  .hero__visual { min-height: 380px; max-width: 420px; }
  .float-card--tl { left: -12px; }
  .float-card--br { right: -12px; }
}

/* ============================================================
   FUNNEL (Startseite: interaktive Kurz-Qualifizierung)
   ============================================================ */
.funnel__head { margin: 0 auto 36px; max-width: 640px; text-align: center; }
.funnel__head .eyebrow { justify-content: center; }
.funnel__head .section-lead { margin-inline: auto; }
.funnel__card {
  max-width: 720px; margin: 0 auto;
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); padding: clamp(26px, 4vw, 44px);
}
.funnel__progress { display: flex; gap: 8px; margin-bottom: 30px; }
.funnel__progress-seg { flex: 1; height: 4px; border-radius: 2px; background: var(--mist); transition: background .3s var(--ease); }
.funnel__progress-seg.is-done, .funnel__progress-seg.is-current { background: var(--signal); }

.funnel__step { display: none; }
.funnel__step.is-active { display: block; }
.funnel__step h3 { margin-bottom: 20px; font-size: clamp(1.15rem, 2vw, 1.4rem); }

.funnel__options { display: grid; gap: 10px; }
.funnel__option {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; text-align: left; padding: 14px 18px;
  background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-family: inherit; font-size: 1rem; font-weight: 600; color: var(--navy);
  cursor: pointer; transition: border-color .2s var(--ease), background .2s var(--ease);
}
.funnel__option:hover { border-color: var(--sky); background: var(--white); }
.funnel__option svg { width: 18px; height: 18px; flex: none; color: var(--steel); transition: transform .2s var(--ease), color .2s var(--ease); }
.funnel__option:hover svg { color: var(--signal); transform: translateX(3px); }

.funnel__back {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 18px;
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--slate); background: none; border: 0; padding: 0; cursor: pointer;
}
.funnel__back:hover { color: var(--signal); }

.funnel__result h3 { margin: 14px 0 10px; }
.funnel__result-lead { color: var(--text-soft); font-size: 1rem; margin-bottom: 26px; max-width: 62ch; }
.funnel__result-actions { text-align: center; margin-bottom: 26px; }
.funnel__divider {
  display: flex; align-items: center; gap: 14px; margin: 0 0 22px;
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--steel);
}
.funnel__divider::before, .funnel__divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }

.funnel__hint { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--steel); margin: -8px 0 16px; }
.funnel__option.is-selected { border-color: var(--signal); background: var(--ice); color: var(--deep); }
.funnel__options--multi .funnel__option svg { opacity: 0; transform: none; }
.funnel__options--multi .funnel__option:hover svg { opacity: .45; transform: none; }
.funnel__options--multi .funnel__option.is-selected svg { opacity: 1; color: var(--signal); transform: none; }
.funnel__next { width: 100%; margin-top: 18px; }
.funnel__group-label { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--steel); font-weight: 600; margin: 12px 0 2px; }
.funnel__options--multi .funnel__group-label:first-child { margin-top: 0; }
@media (max-width: 560px) {
  .funnel__option { padding: 13px 15px; font-size: .92rem; }
}

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee {
  border-block: 1px solid var(--border);
  background: var(--white);
  padding-block: 20px; overflow: hidden;
}
.marquee__label { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--steel); text-align: center; margin-bottom: 14px; }
.marquee__track { display: flex; gap: 0; width: max-content; animation: scrollx 34s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item { display: flex; align-items: center; font-weight: 600; font-size: 1rem; color: var(--navy); white-space: nowrap; }
.marquee__item::before { content: "•"; color: var(--signal); margin: 0 30px; font-size: .78em; line-height: 1; }
@keyframes scrollx { to { transform: translateX(-50%); } }

/* ============================================================
   STATS
   ============================================================ */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.stat { padding: 8px 22px 8px 0; }
.stat + .stat { border-left: 1px solid var(--border); padding-left: 26px; }
.stat__num { font-size: clamp(2.2rem, 3.6vw, 3rem); font-weight: 600; letter-spacing: -.03em; color: var(--navy); line-height: 1; }
.stat__num .u { color: var(--signal); }
.stat__label { margin-top: 10px; font-size: .92rem; color: var(--slate); }
@media (max-width: 820px) { .stats { grid-template-columns: repeat(2,1fr); gap: 28px 20px; } .stat + .stat { border-left: none; padding-left: 0; } }

/* ============================================================
   CLIENTS — Begleitete Firmen
   ============================================================ */
.clients { padding-block: clamp(30px, 5vw, 56px) clamp(50px, 7vw, 90px); }
.clients__title {
  text-align: center; font-family: var(--font-mono);
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--slate); margin-bottom: 34px;
}
.logos-marquee {
  overflow: hidden;
  -webkit-mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.logos-track { display: flex; align-items: center; gap: 20px; width: max-content; animation: scrollx 55s linear infinite reverse; }
.logos-marquee:hover .logos-track { animation-play-state: paused; }
.client {
  width: 180px; height: 104px; flex: none;
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius);
  display: grid; place-items: center; padding: 20px 26px;
  box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.client:hover { border-color: var(--sky); }
.client { align-content: center; }
.client img {
  max-width: 100%; max-height: 64px; width: auto; object-fit: contain; object-position: center; margin: auto;
  filter: grayscale(1); opacity: .66;
  transition: filter .35s var(--ease), opacity .35s var(--ease);
}
.client:hover img { filter: none; opacity: 1; }
@media (max-width: 560px) { .client { width: 150px; height: 92px; padding: 16px 20px; } }

/* ============================================================
   PROBLEM
   ============================================================ */
.problem { background: var(--ink); color: #fff; }
.problem .dot-grid {
  background-image: radial-gradient(rgba(127,160,255,.18) 2.2px, transparent 2.2px);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 30% 10%, #000, transparent 70%);
  mask-image: radial-gradient(ellipse 70% 60% at 30% 10%, #000, transparent 70%);
}
.problem h2 { color: #fff; }
.problem .eyebrow { color: var(--signal); }
.problem .eyebrow::before { background: var(--signal); box-shadow: 0 0 0 4px rgba(0,87,255,.25); }
.problem .section-lead { color: #c3cbd9; }
.trigger-heading { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--signal); margin-bottom: 20px; }
.trigger-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; margin-top: 12px; }
.trigger h3 { margin-top: 0; }
.trigger {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(127,160,255,.16);
  border-radius: var(--radius); padding: 28px;
  transition: transform .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease);
}
.trigger:hover { border-color: var(--sky); }
.trigger__k { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em; color: var(--signal); text-transform: uppercase; }
.trigger h3 { color: #fff; margin: 12px 0 8px; font-size: 1.18rem; }
.trigger p { color: #aab4c8; font-size: .92rem; }
@media (max-width: 980px) { .trigger-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px) { .trigger-grid { grid-template-columns: 1fr; } }

/* ============================================================
   FEATURES / SOLUTION
   ============================================================ */
.feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.feature {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 28px; position: relative; overflow: hidden;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.feature::before {
  content: ""; position: absolute; inset: 0; opacity: 0;
  background: radial-gradient(600px circle at var(--mx,50%) var(--my,0%), rgba(0,87,255,.06), transparent 40%);
  transition: opacity .3s var(--ease);
}
.feature:hover { border-color: var(--sky); }
.feature__icon {
  width: 46px; height: 46px; border-radius: var(--radius-sm); display: grid; place-items: center;
  background: var(--ice); color: var(--deep);
  margin-bottom: 20px;
}
.feature__icon svg { width: 22px; height: 22px; }
.feature h3 { margin-bottom: 10px; }
.feature p { color: var(--text-soft); font-size: 1rem; }
.feature__list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 9px; }
.feature__list li { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; color: var(--navy); }
.feature__list svg { width: 18px; height: 18px; color: var(--signal); flex: none; margin-top: 2px; }
@media (max-width: 820px) { .feature-grid { grid-template-columns: 1fr; } }

/* wide split feature */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; margin-top: 22px; }
.split__media { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 5/4; background: linear-gradient(135deg, var(--mist), var(--ice)); }
.split__media img { width: 100%; height: 100%; object-fit: cover; }
.split__badge {
  position: absolute; left: 20px; bottom: 20px; z-index: 2;
  background: rgba(255,255,255,.96);
  border-radius: var(--radius); padding: 12px 16px; box-shadow: var(--shadow-md);
  display: flex; align-items: center; gap: 10px;
}
.split__badge svg { width: 22px; height: 22px; color: var(--signal); }
.split__badge b { font-size: .92rem; }
.split__badge span { display:block; font-size: .72rem; color: var(--slate); font-family: var(--font-mono); }
@media (max-width: 820px) { .split { grid-template-columns: 1fr; gap: 30px; } .split--rev .split__media { order: -1; } }

/* ============================================================
   PROCESS / STEPS
   ============================================================ */
.process { background: var(--paper); }
.process-head { max-width: none; display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
.process-head__text { max-width: 640px; }
.process-head__cta { flex: none; margin-bottom: 6px; }
@media (max-width: 820px) { .process-head { flex-direction: column; align-items: flex-start; gap: 24px; } }
/* Ablauf (seit v=61): Mittellinie, Zeitmarke links, Schritt rechts. Die Linie fuellt sich beim
   Scrollen (--p aus main.js), Schritte werden nacheinander scharf (.is-on). Gilt fuer alle Seiten
   mit .timeline/.tstep. Ohne JavaScript ist alles sofort sichtbar (Dimmen nur mit .is-anim). */
.timeline { max-width: 860px; margin: 8px auto 0; position: relative; }
.timeline::before, .timeline::after { content: ""; position: absolute; left: 50%; top: 10px; width: 1px; }
.timeline::before { bottom: 10px; background: var(--line); }
.timeline::after { height: calc(var(--p, 0) * (100% - 20px)); background: var(--signal); }
.tstep { display: grid; grid-template-columns: 1fr 40px 1fr; grid-template-rows: auto 1fr; column-gap: 0; padding-bottom: 56px; position: relative; }
.tstep:last-child { padding-bottom: 0; }
.tstep__marker { grid-column: 2; grid-row: 1 / span 2; display: flex; justify-content: center; }
.tstep__num {
  width: 11px; height: 11px; margin-top: 9px; border-radius: 50%; overflow: hidden;
  background: var(--white); border: 2px solid var(--line); position: relative; z-index: 1;
  font-size: 0; color: transparent; line-height: 0;
  transition: background .4s var(--ease), border-color .4s var(--ease);
}
.tstep.is-on .tstep__num { background: var(--signal); border-color: var(--signal); }
.tstep__content { display: contents; }
.tstep__k {
  grid-column: 1; grid-row: 1; justify-self: end; align-self: start; margin: 2px 18px 0 0;
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--slate); background: var(--white); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px;
  text-align: right; max-width: 100%;
}
.tstep__content h3 { grid-column: 3; grid-row: 1; margin: 0 0 6px 18px; font-size: 1.2rem; }
.tstep__content p { grid-column: 3; grid-row: 2; margin: 0 0 0 18px; color: var(--text-soft); font-size: 1rem; max-width: 40ch; }
.timeline.is-anim .tstep { transition: opacity .6s var(--ease), filter .6s var(--ease), transform .6s var(--ease); }
.timeline.is-anim .tstep:not(.is-on) { opacity: .22; filter: blur(2px); transform: translateY(14px); }
@media (max-width: 760px) {
  .timeline::before, .timeline::after { left: 5px; }
  .tstep { grid-template-columns: 11px 1fr; grid-template-rows: auto auto auto; column-gap: 18px; padding-bottom: 40px; }
  .tstep__marker { grid-column: 1; grid-row: 1 / span 3; }
  .tstep__num { margin-top: 6px; }
  .tstep__k { grid-column: 2; grid-row: 1; justify-self: start; margin: 0 0 10px; text-align: left; }
  .tstep__content h3 { grid-column: 2; grid-row: 2; margin-left: 0; }
  .tstep__content p { grid-column: 2; grid-row: 3; margin-left: 0; }
}

/* ============================================================
   ABOUT
   ============================================================ */
.about__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.about__media { position: relative; }
.about__media .img-reveal { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4/5; background: linear-gradient(135deg,var(--navy),var(--deep)); }
.about__media img { width: 100%; height: 100%; object-fit: cover; }
.about__quote {
  position: absolute; right: -22px; bottom: 34px; max-width: 260px; z-index: 2;
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px; box-shadow: var(--shadow-lg);
}
.about__quote p { font-size: 1rem; font-weight: 600; color: var(--navy); }
.about__quote span { display: block; margin-top: 8px; font-size: .72rem; color: var(--slate); font-family: var(--font-mono); }
.vision-card {
  margin-top: 28px; background: linear-gradient(135deg, var(--signal), var(--deep));
  color: #fff; border-radius: var(--radius-lg); padding: 30px 32px; box-shadow: var(--shadow-blue);
  position: relative; overflow: hidden;
}
.vision-card .dot-grid { background-image: radial-gradient(rgba(255,255,255,.22) 2px, transparent 2px); -webkit-mask-image:none; mask-image:none; opacity:.5; }
.vision-card .eyebrow { color: rgba(255,255,255,.85); }
.vision-card .eyebrow::before { background: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,.25); }
.vision-card h3 { color: #fff; font-size: 1.5rem; margin: 14px 0 0; position: relative; }
.about__values { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 14px; }
.about__values li { display: flex; gap: 14px; align-items: flex-start; }
.about__values .ic { width: 40px; height: 40px; border-radius: 11px; flex: none; display: grid; place-items: center; background: var(--ice); color: var(--deep); }
.about__values .ic svg { width: 20px; height: 20px; }
.about__values b { display: block; font-size: 1rem; }
.about__values span { font-size: .92rem; color: var(--text-soft); }
@media (max-width: 900px) { .about__grid { grid-template-columns: 1fr; gap: 40px; } .about__media { max-width: 420px; } }

/* ============================================================
   GUARANTEES
   ============================================================ */
.guarantees { background: var(--paper); }
.guar-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.guar {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 28px; transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.guar:hover { border-color: var(--sky); }
.guar__ic { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--ice); color: var(--deep); margin-bottom: 18px; }
.guar__ic svg { width: 23px; height: 23px; }
.guar h3 { font-size: 1.1rem; margin-bottom: 8px; }
.guar p { font-size: .92rem; color: var(--text-soft); }
@media (max-width: 900px) { .guar-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .guar-grid { grid-template-columns: 1fr; } }

/* ============================================================
   GALLERY (slide-in band)
   ============================================================ */
.gallery { display: grid; grid-template-columns: 1.4fr 1fr 1fr; grid-template-rows: 220px 220px; gap: 16px; margin-top: 12px; }
.gallery figure { margin: 0; border-radius: var(--radius); overflow: hidden; position: relative; box-shadow: var(--shadow-sm); background: linear-gradient(135deg,var(--mist),var(--ice)); }
.gallery figure:nth-child(1) { grid-row: span 2; }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.gallery figure:hover img { transform: scale(1.06); }
.gallery figcaption {
  position: absolute; left: 14px; bottom: 12px; z-index: 2; color: #fff;
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
  text-shadow: 0 1px 8px rgba(0,0,0,.5);
}
.gallery figure::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, transparent 55%, rgba(10,26,71,.5)); }
@media (max-width: 820px) { .gallery { grid-template-columns: 1fr 1fr; grid-template-rows: 180px 180px 180px; } .gallery figure:nth-child(1) { grid-row: span 1; grid-column: span 2; } }

/* ============================================================
   CTA + CONTACT
   ============================================================ */
.contact { background: var(--ink); color: #fff; }
.contact .dot-grid { background-image: radial-gradient(rgba(127,160,255,.18) 2.2px, transparent 2.2px); -webkit-mask-image: radial-gradient(ellipse 60% 80% at 80% 50%, #000, transparent 72%); mask-image: radial-gradient(ellipse 60% 80% at 80% 50%, #000, transparent 72%); }
.contact__grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 40px; align-items: stretch; position: relative; z-index: 1; }
.contact__head { text-align: center; max-width: 680px; margin: 0 auto 40px; position: relative; z-index: 1; }
.contact__head .eyebrow { display: inline-flex; }
.contact__head h2 { margin: 16px 0 14px; }
.contact__head .contact__lead { margin: 0 auto; }
.contact__col { position: relative; z-index: 1; display: flex; flex-direction: column; }
/* Calendly-Karte und Formular fuellen die Spalte, damit beide Karten unabhaengig
   von der Textlaenge (DE/EN) exakt gleich hoch abschliessen. */
.contact__col > .calendly-card, .contact__col > .form { flex: 1 1 auto; }
.contact__coltag { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 14px; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--signal); }
.contact__coltag svg { width: 18px; height: 18px; }
.calendly-card { background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; padding: 6px; }
.calendly-card .calendly-inline-widget { border-radius: calc(var(--radius-lg) - 6px); overflow: hidden; }
.contact__points--row { display: flex; justify-content: center; gap: 22px 48px; flex-wrap: wrap; margin: 44px auto 0; }
.contact h2 { color: #fff; }
.contact .eyebrow { color: var(--signal); }
.contact .eyebrow::before { background: var(--signal); box-shadow: 0 0 0 4px rgba(0,87,255,.25); }
.contact__lead { color: #c3cbd9; margin: 18px 0 30px; font-size: 1.1rem; }
.contact__points { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.contact__points li { display: flex; gap: 14px; align-items: center; }
.contact__points .ic { width: 44px; height: 44px; border-radius: 12px; flex: none; display: grid; place-items: center; background: rgba(0,87,255,.16); color: var(--signal); }
.contact__points .ic svg { width: 21px; height: 21px; }
.contact__points b { display: block; font-size: 1rem; color: #fff; }
.contact__points a, .contact__points span { color: #aab4c8; font-size: .92rem; }
.contact__points a:hover { color: var(--sky); }

.form {
  background: var(--white); color: var(--navy); border-radius: var(--radius-lg);
  padding: 34px; box-shadow: var(--shadow-lg);
}
.tool-cta { margin: 26px 0 0; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { margin-bottom: 16px; }
.field label { display: block; font-size: .84rem; font-weight: 600; margin-bottom: 7px; color: var(--navy); }
.field label .req { color: var(--signal); }
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 15px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-family: inherit; font-size: .92rem; color: var(--navy); background: var(--paper);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.field textarea { resize: vertical; min-height: 110px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--signal); background: #fff;
  box-shadow: 0 0 0 4px rgba(0,87,255,.14);
}
.form__check { display: flex; gap: 10px; align-items: flex-start; font-size: .84rem; color: var(--slate); margin-bottom: 20px; }
.form__check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--signal); flex: none; }
.form__check a { color: var(--signal); text-decoration: underline; }
.form .btn-primary { width: 100%; }
.form__legal { font-size: .72rem; line-height: 1.5; color: var(--slate); margin: -10px 0 18px; }
.form__note { text-align: center; font-size: .72rem; color: var(--slate); margin-top: 14px; font-family: var(--font-mono); }
@media (max-width: 900px) { .contact__grid { grid-template-columns: 1fr; gap: 40px; } }
@media (max-width: 560px) { .form__row { grid-template-columns: 1fr; } }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: var(--navy); color: #c3cbd9; padding-block: 64px 34px; position: relative; overflow: hidden; }
.footer .container { position: relative; z-index: 1; }
.footer__top { display: grid; grid-template-columns: 1.4fr repeat(5, minmax(0, 1fr)); gap: 28px; padding-bottom: 30px; }
.footer .logo__word { color: #fff; }
.footer__blurb { margin-top: 18px; font-size: .92rem; max-width: 30ch; color: #94a0ba; }
.footer__col h4 { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--signal); margin-bottom: 16px; font-weight: 500; }
.footer__col a, .footer__col p { display: block; font-size: .92rem; color: #c3cbd9; margin-bottom: 10px; transition: color .2s var(--ease); }
.footer__col a:hover { color: #fff; }
.footer__bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 26px; flex-wrap: wrap; gap: 12px; }
.footer__bottom p { font-size: .84rem; color: #7f8aa6; }
.footer__legal { display: flex; align-items: center; gap: 22px; }
.footer__legal a { font-size: .84rem; color: #94a0ba; }
.footer__legal a:hover { color: #fff; }
@media (max-width: 1099px) { .footer__top { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; } .footer__brand { grid-column: 1 / -1; } }
@media (max-width: 820px) { .footer__top { grid-template-columns: 1fr 1fr; gap: 30px; } }
@media (max-width: 520px) { .footer__top { grid-template-columns: 1fr; } }

/* ============================================================
   FOUNDERS
   ============================================================ */
/* Zwei Gruender seit 04.10.2026: zwei Spalten ueber die volle Breite, buendig mit der
   Vision-Karte darueber, mit mehr Luft dazwischen. */
.founders { display: grid; grid-template-columns: repeat(2, 1fr); gap: 64px; }
.founder {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.founder:hover { border-color: var(--sky); }
.founder__photo {
  /* 1:1 wie die Portraits selbst (800 x 800): das ganze Foto, mit dem meisten Oberkoerper.
     Hoeher als breit braechte nichts, cover wuerde dann nur links und rechts beschneiden. */
  position: relative; aspect-ratio: 1/1; overflow: hidden; display: grid; place-items: center;
  background: linear-gradient(140deg, var(--navy), var(--deep));
  background-repeat: no-repeat;
}
.founder__photo:not(.founder__photo--img)::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.16) 2px, transparent 2px);
  background-size: 20px 20px; opacity: .55;
}
/* photo cards link straight to LinkedIn (whole image is the link, no visible badge) */
.founder__photo--img { transition: filter .3s var(--ease); }
.founder:hover .founder__photo--img { filter: brightness(1.05) saturate(1.05); }
.founder__mono { position: relative; font-weight: 600; font-size: 2.9rem; letter-spacing: -.03em; color: rgba(255,255,255,.94); }
.founder__ph { position: absolute; bottom: 12px; left: 0; right: 0; text-align: center; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.founder__body { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.founder__body h3 { font-size: 1.2rem; }
.founder__role { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--signal); margin-top: 7px;
  /* Feste Hoehe von zwei Zeilen, damit die Beschreibungen aller Gruenderkarten
     auf gleicher Hoehe beginnen, auch wenn ein Rollenlabel nur einzeilig ist. */
  display: block; line-height: 1.5; min-height: 3em; }
.founder__bio { color: var(--text-soft); font-size: .92rem; line-height: 1.6; margin: 13px 0 0; flex: 1; }
@media (max-width: 820px) { .founders { grid-template-columns: 1fr; max-width: 400px; margin-inline: auto; } }

/* ============================================================
   CHROME ORB — metallic accent
   ============================================================ */
/* ============================================================
   CHROME — Chrome.mp4 as clean, self-contained video boxes
   (no blended / flowing edges into the video)
   ============================================================ */
/* full-container-width box (same width as the other content elements) */
.chrome-box {
  position: relative; margin: 0 auto clamp(34px, 3.6vw, 48px); width: calc(100% - 48px);
  max-width: calc(var(--maxw) - 48px); height: clamp(160px, 18vw, 220px);
  border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid rgba(255,255,255,.55);
}
.chrome-box video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* first divider: same width & edges as the box, only slimmer */
.chrome-box--band { height: clamp(92px, 9vw, 122px); }

/* chrome video panel inside the vision card */
.vision-chrome { position: absolute; top: 0; right: 0; bottom: 0; width: 40%; z-index: 0; overflow: hidden; }
.vision-chrome video { width: 100%; height: 100%; object-fit: cover; display: block; }
.vision-chrome { border-left: 1px solid rgba(255,255,255,.25); }
@media (max-width: 700px) { .vision-chrome { width: 55%; } }

.vision-card > .eyebrow, .vision-card > h3 { position: relative; z-index: 1; }
.vision-card > h3 { max-width: 620px; }

/* ============================================================
   CONTACT BOOKING + FOOTER SOCIAL
   ============================================================ */
.contact__book { margin-bottom: 12px; }
.contact__book svg { width: 19px; height: 19px; }
.contact__book-note { color: #aab4c8; font-size: .84rem; margin-bottom: 30px; }
.footer__social {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 20px;
  padding: 9px 16px; border: 1px solid rgba(255,255,255,.16); border-radius: var(--radius-sm);
  font-size: .84rem; font-weight: 600; color: #c3cbd9;
  transition: color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
}
.footer__social svg { width: 18px; height: 18px; }
.footer__social:hover { color: #fff; border-color: var(--sky); background: rgba(127,160,255,.12); }
.footer__li { display: inline-flex; align-items: center; color: #94a0ba; transition: color .2s var(--ease); }
.footer__li svg { width: 18px; height: 18px; }
.footer__li:hover { color: #fff; }

/* ============================================================
   COHESIVE TRANSITIONS — dark sections as rising rounded panels
   ============================================================ */
.problem, .contact {
  overflow: hidden; z-index: 2;
}
/* both dark panels sit below their previous section with clear breathing room
   (rounded top corners reveal the paper gap above) */
.problem { margin-top: clamp(22px, 3vw, 38px); }
.contact { margin-top: clamp(26px, 3.4vw, 44px); }

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal-l { opacity: 0; transform: translateX(-40px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal-l.in { opacity: 1; transform: none; }
.reveal-r { opacity: 0; transform: translateX(40px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal-r.in { opacity: 1; transform: none; }
.reveal-scale { opacity: 0; transform: scale(.94); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal-scale.in { opacity: 1; transform: none; }
[data-delay="1"] { transition-delay: .08s; }
[data-delay="2"] { transition-delay: .16s; }
[data-delay="3"] { transition-delay: .24s; }
[data-delay="4"] { transition-delay: .32s; }
[data-delay="5"] { transition-delay: .40s; }

/* image reveal clip */
.img-reveal { position: relative; }
.img-reveal img { clip-path: inset(0 100% 0 0); transition: clip-path 1.1s var(--ease); }
.img-reveal.in img { clip-path: inset(0 0 0 0); }

/* legal pages */
.legal { padding-top: calc(var(--nav-h) + 60px); }
.legal .container { max-width: 820px; }
.legal h1 { font-size: clamp(2rem,4vw,3rem); margin-bottom: 10px; }
.legal .updated { font-family: var(--font-mono); font-size: .72rem; color: var(--steel); margin-bottom: 40px; display:block; }
.legal h2 { font-size: 1.4rem; margin: 40px 0 14px; }
.legal h3 { font-size: 1.1rem; margin: 26px 0 8px; }
.legal p, .legal li { color: var(--navy); margin-bottom: 12px; }
.legal a { color: var(--signal); text-decoration: underline; }
.legal .card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px 30px; box-shadow: var(--shadow-sm); }
.legal .ph { color: var(--steel); font-style: italic; }
.backlink { display:inline-flex; align-items:center; gap:8px; font-weight:600; color:var(--signal); margin-bottom: 30px; }
.backlink svg { width:18px;height:18px; transition: transform .25s var(--ease);}
.backlink:hover svg { transform: translateX(-3px); }


/* Language toggle — segmented control (footer) */
.lang-toggle{display:inline-flex;align-items:center;gap:2px;background:var(--signal);border-radius:999px;padding:3px;line-height:1;vertical-align:middle}
.lang-toggle .lang-toggle__opt{display:inline-block;font-family:var(--font-mono);font-size:.72rem;font-weight:600;letter-spacing:.06em;padding:5px 13px;border-radius:999px;color:rgba(255,255,255,.9);text-decoration:none;transition:background .2s var(--ease),color .2s var(--ease)}
.lang-toggle a.lang-toggle__opt:hover{background:rgba(255,255,255,.16);color:#fff}
.lang-toggle .lang-toggle__opt.is-active{background:#fff;color:var(--signal);cursor:default}

/* ============================================================
   MOBILE PERFORMANCE
   Kill continuous animations for reduced-motion users, and skip
   the decorative Chrome.mp4 accents on phones (video decode is a
   real scroll-jank source on mobile Safari). Purely decorative,
   all aria-hidden — no content is lost.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .float-card, .marquee__track, .logos-track { animation: none !important; }
}

/* ============================================================
   Motion layer (2024): Ablauf scale-reveal, feature border-settle,
   magnetic CTA, marquee/region hover. Reduced-motion path below.
   ============================================================ */
/* Ablauf: Schritte bleiben in ihrer Spur, das Erscheinen regelt .is-on (siehe Ablauf-Block oben) */
.timeline .tstep.reveal-l { transform: none; }

/* Feature card: the 1px frame settles in just after the card arrives */
.feature.reveal { border-color: transparent; transition: opacity .7s var(--ease), transform .7s var(--ease), border-color .5s var(--ease) .18s; }
.feature.reveal.in { border-color: var(--line); }

/* Marquee + region band: highlight the item under the cursor */
.marquee__item { transition: color .25s var(--ease); }
.marquee__item:hover { color: var(--signal); }

@media (prefers-reduced-motion: reduce) {
  .timeline .tstep.reveal-l { transform: none; transition: none; }
  .timeline.is-anim .tstep:not(.is-on) { opacity: 1; filter: none; transform: none; }
}
@media (max-width: 760px) {
  .chrome-box, .vision-chrome { display: none; }
}

/* Hero badge — on phones keep pill + label on ONE line by trimming the type a
   touch; both stay nowrap so the badge reads as a single tidy pill (fits ≥320px).
   Die Pille bleibt hier bei .58rem: mit 11 px bricht die deutsche Zeile bei 375 px um (geprueft 27.10.2026).
   Am Desktop hat sie .72rem wie alle Eyebrows. */
@media (max-width: 600px) {
  .hero__badge { gap: 7px; padding: 6px 12px 6px 6px; font-size: .72rem; }
  .hero__badge .pill { white-space: nowrap; font-size: .58rem; padding: 3px 8px; flex: none; }
  .hero__badge b { white-space: nowrap; }
}

/* iOS Safari renders input[type=date] at an intrinsic native width and ignores
   width:100%, so the field overflows its card. Normalising the appearance makes
   it respect the set width. Scoped to mobile so desktop keeps its native date UI. */
@media (max-width: 760px) {
  input[type="date"] { -webkit-appearance: none; appearance: none; min-width: 0; max-width: 100%; }
}

/* Footer trust badges — brand-toned chips under the footer description */
.footer__trust { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.footer__trust-item { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius-sm); background: rgba(255,255,255,.04); font-size: .72rem; font-weight: 600; color: #94a0ba; }
.footer__trust-item svg { width: 14px; height: 14px; color: var(--signal); flex: none; }
.footer__ai { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 4px 0 22px; border-bottom: 1px solid rgba(255,255,255,.1); }
.footer__ai-h { font-size: .84rem; color: #7f8aa6; }
.footer__ai-links { display: flex; gap: 16px; }
.footer__ai-btn { display: inline-flex; align-items: center; justify-content: center; color: #94a0ba; transition: color .2s var(--ease); }
.footer__ai-btn svg { width: 18px; height: 18px; }
.footer__ai-btn:hover { color: #fff; }

/* ============================================================
   FILTER BAR (Tools- & Blog-Übersicht)
   ============================================================ */
.filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 0 0 34px; }
.filter-search { position: relative; flex: 1 1 260px; min-width: 0; }
.filter-search svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--steel); pointer-events: none; }
.filter-search input { width: 100%; padding: 12px 18px 12px 44px; border: 1px solid var(--border); border-radius: var(--radius); font: inherit; font-size: .92rem; background: var(--white); color: var(--ink); }
.filter-search input:focus { outline: none; border-color: var(--signal); box-shadow: 0 0 0 3px rgba(0,87,255,.15); }
.filter-group { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-chip { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .04em; font-weight: 600; padding: 8px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--white); color: var(--slate); cursor: pointer; transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
.filter-chip:hover { border-color: var(--sky); color: var(--navy); }
.filter-chip.is-active { background: var(--signal); border-color: var(--signal); color: #fff; }
/* Filter-Dropdown (Button zeigt aktuelle Auswahl, Menue zum Anhaken) */
.filter-dd { position: relative; }
.filter-dd__btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .04em; font-weight: 600; padding: 9px 15px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--white); color: var(--navy); cursor: pointer; transition: border-color .2s var(--ease); }
.filter-dd__btn:hover { border-color: var(--sky); }
.filter-dd.is-open .filter-dd__btn { border-color: var(--signal); }
.filter-dd__btn .lbl { white-space: nowrap; }
.filter-dd__chev { width: 14px; height: 14px; flex: 0 0 auto; transition: transform .25s var(--ease); }
.filter-dd.is-open .filter-dd__chev { transform: rotate(180deg); }
.filter-dd__menu { position: absolute; top: calc(100% + 8px); left: 0; min-width: 210px; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: 0 8px 20px rgba(10,26,71,.10); padding: 6px; z-index: 60; display: flex; flex-direction: column; gap: 2px; }
.filter-dd__menu[hidden] { display: none; }
.filter-dd__opt { display: flex; align-items: center; justify-content: space-between; gap: 14px; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .04em; font-weight: 600; padding: 9px 12px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--navy); text-align: left; cursor: pointer; width: 100%; }
.filter-dd__opt:hover { background: var(--mist); }
.filter-dd__opt.is-active { color: var(--signal); }
.filter-dd__opt svg { width: 15px; height: 15px; flex: 0 0 auto; opacity: 0; }
.filter-dd__opt.is-active svg { opacity: 1; }
@media (max-width: 640px) { .filter-dd, .filter-dd__btn { width: 100%; } .filter-dd__btn { justify-content: space-between; } .filter-dd__menu { left: 0; right: 0; } }
.filter-empty { display: none; padding: 26px 2px; color: var(--text-soft); font-size: 1rem; }
.filter-empty.show { display: block; }
@media (max-width: 640px) { .filter-search { flex-basis: 100%; } }

/* ============================================================
   TOOL-CTA BAND (Startseite)
   Ein einzelner Einstieg in den Tool-Bereich, bewusst ohne
   Deep-Links auf einzelne Rechner.
   ============================================================ */
.toolcta__inner {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--signal) 0%, var(--deep) 62%, #0034A3 100%);
  color: #fff; border-radius: var(--radius-lg);
  padding: clamp(30px, 4vw, 52px);
  box-shadow: var(--shadow-blue);
}
.toolcta__inner .dot-grid {
  background-image: radial-gradient(rgba(255,255,255,.22) 2.2px, transparent 2.2px);
  -webkit-mask-image: radial-gradient(ellipse 70% 90% at 88% 20%, #000 0%, transparent 72%);
  mask-image: radial-gradient(ellipse 70% 90% at 88% 20%, #000 0%, transparent 72%);
}
.toolcta__chrome { position: absolute; top: 0; right: 0; bottom: 0; width: 34%; z-index: 0; overflow: hidden; border-left: 1px solid rgba(255,255,255,.25); }
.toolcta__chrome video { width: 100%; height: 100%; object-fit: cover; display: block; }
.toolcta__text { position: relative; z-index: 1; max-width: 60%; }
.toolcta__text .eyebrow { color: #fff; }
.toolcta__text .eyebrow::before { background: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,.22); }
.toolcta__text h2 { color: #fff; margin: 14px 0 12px; font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.toolcta__text p { color: rgba(255,255,255,.86); margin: 0; font-size: 1rem; }
.toolcta__cta { position: absolute; top: 50%; right: 0; width: 34%; transform: translateY(-50%); display: flex; justify-content: center; z-index: 1; }
.toolcta__inner .btn-ghost { background: #fff; color: var(--deep); border-color: transparent; }
.toolcta__inner .btn-ghost:hover { background: #fff; color: var(--signal); transform: translateY(-2px); }
@media (max-width: 860px) {
  .toolcta__text { max-width: 100%; }
  .toolcta__chrome { display: none; }
  .toolcta__cta { position: static; transform: none; width: auto; justify-content: flex-start; margin-top: 22px; }
}

/* ============================================================
   TOOL-REPORT (Ergebnis als PDF per E-Mail)
   ============================================================ */
.toolreport {
  margin-top: 26px; background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: clamp(24px, 3vw, 34px);
  box-shadow: var(--shadow-sm);
}
.toolreport__eyebrow {
  display: inline-flex; align-items: center; font-family: var(--font-mono);
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--signal);
}
.toolreport__head h2 { font-size: 1.24rem; margin: 10px 0 8px; color: var(--navy); }
.toolreport__lead { color: var(--text-soft); margin: 0 0 22px; font-size: 1rem; max-width: 62ch; }
.toolreport__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.toolreport__field { display: flex; flex-direction: column; gap: 6px; }
.toolreport__field label { font-size: .84rem; font-weight: 600; color: var(--navy); }
.toolreport__field input {
  width: 100%; padding: 12px 14px; font: inherit; font-size: .92rem; color: var(--navy);
  background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius-sm);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.toolreport__field input:focus-visible {
  outline: none; border-color: var(--signal); box-shadow: 0 0 0 3px rgba(0,87,255,.16); background: var(--white);
}
.toolreport__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.toolreport__check { display: flex; gap: 11px; align-items: flex-start; margin: 18px 0 20px; cursor: pointer; }
.toolreport__check input { margin-top: 3px; flex: none; width: 17px; height: 17px; accent-color: var(--signal); }
.toolreport__check span { font-size: .84rem; color: var(--text-soft); line-height: 1.5; }
.toolreport__check a { color: var(--signal); text-decoration: underline; }
.toolreport button[disabled] { opacity: .6; cursor: not-allowed; }
.toolreport__status { margin: 14px 0 0; font-size: .92rem; min-height: 1.2em; color: var(--text-soft); }
.toolreport__status.is-ok { color: #0F7B3F; font-weight: 600; }
.toolreport__status.is-err { color: #B42318; font-weight: 600; }
@media (max-width: 620px) { .toolreport__row { grid-template-columns: 1fr; } }

/* ============================================================
   COOKIE-CONSENT-BANNER
   ============================================================ */
.cc-banner {
  position: fixed; left: 20px; right: 20px; bottom: 20px; z-index: 999;
  display: flex; justify-content: flex-end;
  opacity: 0; transform: translateY(16px);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
  pointer-events: none;
}
.cc-banner.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.cc-banner__card {
  width: 100%; max-width: 420px; background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: 24px 26px;
}
.cc-banner__eyebrow {
  display: inline-flex; align-items: center; font-family: var(--font-mono);
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--signal);
}
.cc-banner__text { color: var(--text-soft); font-size: .92rem; line-height: 1.55; margin: 10px 0 20px; }
.cc-banner__text a { color: var(--signal); text-decoration: underline; }
.cc-banner__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.cc-banner__actions .btn { padding: 12px 22px; }
@media (max-width: 480px) {
  .cc-banner { left: 12px; right: 12px; bottom: 12px; }
  .cc-banner__card { padding: 20px; }
  .cc-banner__actions { flex-direction: column-reverse; }
  .cc-banner__actions .btn { width: 100%; }
}

/* ============================================================
   TOOL-PROSA UND TOOL-FAQ
   Erklaertext unter den Rechnern. Global, weil die uebrigen
   Tool-Styles inline je Seite liegen und sonst 13-fach zu
   pflegen waeren.
   ============================================================ */
/* Titel und Lead bleiben in der schmalen Spalte, der Inhalt darunter nutzt
   die volle Containerbreite. */
.tool-prose { margin: 40px 0 0; }
.tool-prose h2 { font-size: 1.35rem; letter-spacing: -.01em; margin: 34px 0 12px; color: var(--navy); }
.tool-prose h2:first-child { margin-top: 0; }
.tool-prose h3 { font-size: 1rem; margin: 24px 0 8px; color: var(--navy); }
.tool-prose p { margin: 0 0 18px; line-height: 1.7; color: var(--navy); }
.tool-prose ul { margin: 0 0 22px; padding-left: 0; list-style: none; display: grid; gap: 14px; }
.tool-prose ul li { position: relative; padding-left: 26px; line-height: 1.65; color: var(--navy); }
.tool-prose ul li::before {
  content: ""; position: absolute; left: 2px; top: 9px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--signal);
}
.tool-prose a { color: var(--signal); text-decoration: underline; text-underline-offset: 2px; }
.tool-prose .prose-shot {
  margin: 0 0 22px; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; background: var(--mist);
}
.tool-prose .prose-shot { aspect-ratio: 16 / 10; }
.tool-prose .prose-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.tool-prose figure { margin: 0 0 22px; }
.tool-prose figcaption {
  margin: 10px 0 0; font-family: var(--font-mono); font-size: .72rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--slate);
}
.tool-prose .formula {
  background: var(--paper); border-left: 3px solid var(--signal);
  border-radius: var(--radius-sm); padding: 16px 20px; margin: 0 0 18px;
  font-family: var(--font-mono); font-size: .92rem; line-height: 1.6; color: var(--navy);
}
.tool-prose .tool-note {
  background: var(--paper); border-left: 3px solid var(--signal);
  border-radius: var(--radius-sm); padding: 14px 18px; margin: 0 0 22px;
  color: var(--navy); line-height: 1.6;
}
/* Generierte Seiten: Folgeabschnitte ohne eigenes oberes Padding, sonst
   summieren sich zwei Paddings zu einem Loch zwischen zwei Textbloecken. */
.genpage > section + section:not(.contact) { padding-top: 0; }



/* ============================================================
   HANDLUNGSBLOCK IM SEITENKOPF (.lead-cta)
   Steht direkt unter H1 und Lead der Landingpage. Grund: die Seite
   ist auf dem Telefon knapp zwoelf Bildschirme lang, der naechste
   CTA kam vorher erst auf Bildschirm sechs.
   ============================================================ */
.lead-cta { margin: 28px 0 0; }

/* Wegweiser fuer Fachkraefte, die selbst Arbeit suchen. Steht direkt unter dem
   Handlungsblock, weil genau dort sonst das Kontaktformular angesteuert wird.
   Anlass: die einzige Anfrage aus ChatGPT-Ads Runde 1 war ein Jobsuchender.
   Bewusst ruhig gehalten, damit es dem Erstgespraech keine Aufmerksamkeit nimmt. */
.lead-aside {
  margin: 20px 0 0; padding: 14px 18px;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  font-size: .92rem; line-height: 1.6; color: var(--slate);
}
.lead-aside strong { color: var(--navy); font-weight: 600; }
.lead-aside a { color: var(--signal); text-decoration: underline; text-underline-offset: 2px; }
.lead-aside a:hover { text-decoration-thickness: 2px; }
.lead-cta__row { display: flex; flex-wrap: wrap; gap: 12px; }
.lead-cta__note {
  margin: 14px 0 0; font-size: .92rem; line-height: 1.55; color: var(--text-soft);
}

/* ============================================================
   STICKY HANDLUNGSLEISTE AUF TELEFONEN (.mcta)
   Erscheint erst, wenn .lead-cta nach oben aus dem Bild gelaufen
   ist, geschaltet in assets/js/main.js. Ohne JS bleibt sie aus,
   deshalb darf nie Inhalt darin stehen, den es nur hier gibt.
   ============================================================ */
.mcta { display: none; }
@media (max-width: 600px) {
  .lead-cta__row .btn { width: 100%; justify-content: center; }
  .mcta {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: var(--white); border-top: 1px solid var(--border);
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    transform: translateY(115%); transition: transform .28s var(--ease);
  }
  .mcta.is-in { transform: translateY(0); }
  .mcta .btn { width: 100%; justify-content: center; }
  body.has-mcta { padding-bottom: 76px; }
}
@media (prefers-reduced-motion: reduce) {
  .mcta { transition: none; }
}

/* ============================================================
   SEITENKOPF DER GENERIERTEN SEITEN
   Regionen, Branchen und Landingpages teilen sich denselben Kopf
   wie die Tool-Seiten. Die Werte sind identisch zu deren Inline-CSS,
   damit beide Seitenfamilien exakt gleich aussehen.
   ============================================================ */
.tool-wrap { width: 100%; }
.tool-head { max-width: 800px; }
.tool-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--signal); font-weight: 600;
}
.tool-head h1 { font-size: clamp(1.9rem, 3.6vw, 2.6rem); letter-spacing: -.02em; margin: 14px 0 12px; line-height: 1.12; }
.tool-head p { font-size: 1.1rem; line-height: 1.65; color: var(--text-soft); margin: 0; }

/* Faktentabelle in der Prosa: Schwellenwerte, Fristen, Vergleiche. */
.tool-prose table {
  width: 100%; border-collapse: collapse; margin: 0 0 22px;
  font-size: .92rem; font-variant-numeric: tabular-nums;
}
.tool-prose thead th {
  text-align: left; font-family: var(--font-mono); font-size: .72rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--steel);
  font-weight: 600; padding: 0 14px 10px 0; border-bottom: 1px solid var(--border);
}
.tool-prose tbody td { padding: 12px 14px 12px 0; border-bottom: 1px solid var(--border); color: var(--navy); line-height: 1.55; vertical-align: top; }
.tool-prose tbody tr:last-child td { border-bottom: none; }
.tool-prose tbody td:first-child { white-space: nowrap; font-family: var(--font-mono); font-size: .84rem; color: var(--slate); }
.tool-prose .tablewrap { overflow-x: auto; margin: 0 0 22px; }
.tool-prose .tablewrap table { margin: 0; }

/* ============================================================
   REGIONS- UND BRANCHENSEITEN
   ============================================================ */
.region-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin: 30px 0 6px; }
.region-card {
  display: flex; flex-direction: column; gap: 6px; padding: 20px 22px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  transition: border-color .25s var(--ease);
}
.region-card, .tool-prose .region-card { text-decoration: none; }
.region-card:hover { border-color: var(--sky); }
.region-card__name { font-weight: 600; color: var(--navy); line-height: 1.3; }
.region-card:hover .region-card__name { color: var(--signal); }
.region-card__cities { font-size: .92rem; line-height: 1.55; color: var(--navy); }

/* Ortsliste als Chips statt als Textblock: gleiche Optik wie die
   Branchen-Tags auf /leistungen. */
.chiprow, .tool-prose ul.chiprow {
  list-style: none; margin: 0 0 22px; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.chiprow li, .tool-prose ul.chiprow li {
  padding: 7px 13px; background: var(--surface); color: var(--navy);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: .92rem; font-weight: 600; line-height: 1.3;
}
.chiprow li::before, .tool-prose ul.chiprow li::before { content: none; }
.chiprow li.is-more, .tool-prose ul.chiprow li.is-more {
  background: none; border-style: dashed; color: var(--text-soft); font-weight: 500;
}

.region-others, .tool-prose ul.region-others {
  list-style: none; padding: 0; margin: 0; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px 20px;
}
.region-others li, .tool-prose ul.region-others li { padding-left: 0; }
.region-others li::before, .tool-prose ul.region-others li::before { content: none; }
.region-others a, .tool-prose ul.region-others a { color: var(--signal); font-weight: 600; text-decoration: none; }
.region-others a:hover, .tool-prose ul.region-others a:hover { text-decoration: underline; }
.tool-lead { color: var(--text-soft); font-size: 1rem; line-height: 1.7; max-width: 68ch; margin: 0 0 8px; }

/* FAQ-Karten: Design der FAQ-Seite, seit v=59 global, seit v=60 auch fuer Rechner, Regionen und Branchen, damit Blogbeitraege dieselbe Darstellung nutzen. */
.faq-wrap{max-width:840px;margin:0 auto}
.faq-list{display:grid;gap:14px;margin-top:8px}
.faq-item{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden;transition:border-color .25s var(--ease),box-shadow .25s var(--ease)}
.faq-item[open]{border-color:rgba(0,87,255,.35);box-shadow:var(--shadow-md)}
.faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:22px 24px;font-weight:600;font-size:clamp(1rem,1.4vw,1.12rem);color:var(--navy);line-height:1.35}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{color:var(--signal)}
.faq-ico{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgba(0,87,255,.10);color:var(--signal);transition:background .25s var(--ease),color .25s var(--ease)}
.faq-ico svg{width:18px;height:18px;transition:transform .3s var(--ease)}
.faq-item[open] .faq-ico{background:var(--signal);color:#fff}
.faq-item[open] .faq-ico svg{transform:rotate(180deg)}
.faq-answer{padding:0 24px 24px;color:var(--text-soft);font-size:1rem;line-height:1.7}
.faq-answer p{margin:0 0 14px}
.faq-answer p:last-child{margin-bottom:0}
.faq-answer strong{color:var(--navy)}
.faq-answer a:not(.btn){color:var(--signal);text-decoration:underline;text-underline-offset:2px}
.faq-answer a:not(.btn):hover{text-decoration-thickness:2px}
.faq-answer .btn{margin-top:6px}
.faq-cta{margin-top:40px;text-align:center}
.faq-cta p{color:var(--text-soft);margin-bottom:16px}

/* Laptop-Rahmen fuer Portal-Screenshots (seit v=61). Zeigt den oberen Teil des Dashboards im
   16:10-Bildschirm, bewusst kleiner als der fruehere Vollbild-Screenshot. */
.laptop { position: relative; width: 100%; max-width: 520px; margin-inline: auto; }
.laptop__screen { position: relative; aspect-ratio: 16 / 10; border: 9px solid #1B2130; border-bottom-width: 13px; border-radius: 14px 14px 4px 4px; overflow: hidden; background: #fff; }
.laptop__screen img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.laptop__base { height: 12px; margin: 0 -6%; background: linear-gradient(180deg, #D5DAE3, #AEB6C4); border-radius: 0 0 14px 14px; }
.split__media--laptop { aspect-ratio: auto; overflow: visible; background: none; border-radius: 0; padding-bottom: 28px; }
.split__media--laptop .split__badge { left: 0; bottom: 0; border: 1px solid var(--line); }
.prose-shot-wrap .laptop { max-width: 560px; margin: 0; }


/* ============================================================
   MOTION-EBENE 2026-10 (nach Authenac-Referenz, Fragebogen 20.10.2026)
   - Einblenden mit Unschaerfe, automatisch gestaffelt (main.js setzt --stg)
   - Listen mit [data-stagger]: Punkte erscheinen nacheinander (nur mit JS versteckt)
   - Abschnittskopf geteilt: Titel links, Untertitel rechts, volle Breite
   - Reiter mit Fortschrittsbalken (.atabs), rollende Ziffern (.odo),
     wechselndes Wort (.rot), Fenster richtet sich beim Scrollen auf (.tilt),
     lebende Portal-Karten (.live)
   Alles respektiert prefers-reduced-motion (Inhalt sofort sichtbar).
   ============================================================ */
:root { --ease-out: cubic-bezier(.23,1,.32,1); --ease-io: cubic-bezier(.77,0,.175,1); }

/* --- Einblenden: weich, mit Unschaerfe --- */
.reveal, .reveal-l, .reveal-r, .reveal-scale {
  filter: blur(6px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out), filter .9s var(--ease-out);
  transition-delay: var(--stg, 0s);
}
.reveal { transform: translateY(18px); }
.reveal-l { transform: translateX(-24px); }
.reveal-r { transform: translateX(24px); }
.reveal-scale { transform: scale(.96); }
.reveal.in, .reveal-l.in, .reveal-r.in, .reveal-scale.in { filter: none; }
.feature.reveal { transition: opacity .9s var(--ease-out), transform .9s var(--ease-out), filter .9s var(--ease-out), border-color .5s var(--ease) .18s; }
/* Hero-Einstieg beim Laden (ohne Scroll) */
.hero-in { animation: heroIn .9s var(--ease-out) both; animation-delay: var(--d, 0s); }
@keyframes heroIn { from { opacity: 0; filter: blur(6px); transform: translateY(14px); } to { opacity: 1; filter: none; transform: none; } }

/* --- Listen: Punkte nacheinander --- */
.stg > * { opacity: 0; filter: blur(4px); transform: translateY(10px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out), filter .7s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms + 80ms); }
.stg.in > * { opacity: 1; filter: none; transform: none; }

/* --- Breite: Titel und Untertitel laufen ueber die volle Breite --- */
.section-head { max-width: 1000px; }
.section-lead { max-width: 880px; }
.process-head__text { max-width: 760px; }
/* Runde 3 (Hugo, 20.10.2026): Titel ueber die volle Breite, Untertitel darunter, ebenfalls volle Breite.
   Gilt auf allen Seiten; Hero und Fragebogen oben behalten ihr eigenes Layout. */
.section-head, .section-head h1, .section-head h2, .process-head__text, .section-lead { max-width: none; }
.process-head { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 0; }
.process-head__cta { margin: 26px 0 0; }
.funnel__head { max-width: 640px; }
.tool-head, .blog-head { max-width: none !important; }
.tool-head h1, .blog-head h1 { max-width: 1040px; }
.tool-head p, .blog-head p { max-width: none; }

/* --- Wechselndes Wort --- */
.rot { display: inline-grid; vertical-align: bottom; }
.rot__w { grid-area: 1 / 1; justify-self: start; align-self: end; white-space: nowrap; transition: opacity .55s var(--ease-out), transform .55s var(--ease-out), filter .55s var(--ease-out); }
.rot.is-js .rot__w { opacity: 0; transform: translateY(.45em); filter: blur(6px); }
.rot.is-js .rot__w.is-on { opacity: 1; transform: none; filter: none; }
.rot.is-js .rot__w.is-out { opacity: 0; transform: translateY(-.45em); filter: blur(6px); }

/* --- Rollende Ziffern --- */
.odo { display: inline-flex; }
.odo__d { display: inline-block; height: 1.1em; line-height: 1.1em; overflow: hidden; }
.odo__s { display: flex; flex-direction: column; transition: transform 1.6s var(--ease-out); transition-delay: var(--od, 0s); }
.odo__s > span { height: 1.1em; }

/* --- Kennzahlen im Hero --- */
.kz { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.kz__i { padding: 20px 20px 18px 0; border-bottom: 1px solid var(--line); }
.kz__i:nth-child(2n) { padding-left: 22px; border-left: 1px solid var(--line); }
.kz__n { display: flex; align-items: baseline; gap: 8px; font-size: clamp(2.2rem, 3.6vw, 3rem); font-weight: 600; letter-spacing: -.03em; color: var(--navy); line-height: 1.1; }
.kz__n .u { font-size: .42em; letter-spacing: 0; color: var(--signal); font-weight: 600; }
.kz__l { display: block; margin-top: 6px; font-size: .92rem; color: var(--slate); line-height: 1.4; }

/* --- Hero (Startseite 2026-10) --- */
.hero--v2 .hero__grid2 { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(32px, 5vw, 72px); align-items: end; }
.hero--v2 h1 { font-size: clamp(2.5rem, 5.6vw, 4.1rem); letter-spacing: -.035em; line-height: 1; margin-bottom: 24px; }
.hero--v2 h1 .l { display: block; }
.hero--v2 .hero__sub { max-width: 46ch; }
.hero--v2 .hero__cta { margin-bottom: 18px; }
.hero__checks { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.hero__checks .hero__trust-item { font-size: .84rem; }
@media (max-width: 900px) { .hero--v2 .hero__grid2 { grid-template-columns: 1fr; } }

/* --- Fenster richtet sich auf --- */
.tilt-wrap { perspective: 1600px; }
.tilt { transform-origin: 50% 0%; will-change: transform;
  transform: rotateX(calc((1 - var(--tp, 1)) * 14deg)) scale(calc(.93 + var(--tp, 1) * .07)) translateY(calc((1 - var(--tp, 1)) * 28px)); }

/* --- Reiter mit Fortschritt --- */
.atabs__list { display: flex; gap: 10px; }
.atabs__tab { position: relative; flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 10px; text-align: left;
  padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--white);
  color: var(--slate); font: inherit; font-size: .92rem; font-weight: 600; overflow: hidden; cursor: pointer;
  transition: color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease); }
.atabs__tab:hover { color: var(--navy); border-color: var(--sky); }
.atabs__tab.is-active { color: var(--navy); border-color: var(--sky); }
.atabs__k { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em; color: var(--steel); font-weight: 500; }
.atabs__tab.is-active .atabs__k { color: var(--signal); }
.atabs__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: transparent; }
.atabs__bar i { display: block; height: 100%; background: var(--signal); transform: scaleX(0); transform-origin: left; }
.atabs__tab.is-active .atabs__bar i { transform: scaleX(1); }
.atabs.is-auto .atabs__tab.is-active .atabs__bar i { transform: scaleX(0); animation: tabProg var(--dur, 7s) linear forwards; }
.atabs.is-paused .atabs__tab.is-active .atabs__bar i { animation-play-state: paused; }
@keyframes tabProg { to { transform: scaleX(1); } }
.atabs.is-js .atabs__panel { display: none; }
.atabs.is-js .atabs__panel.is-active { display: block; animation: tabIn .6s var(--ease-out) both; }
@keyframes tabIn { from { opacity: 0; filter: blur(5px); transform: translateY(8px); } to { opacity: 1; filter: none; transform: none; } }
.atabs__panel + .atabs__panel { margin-top: 18px; }
.atabs.is-js .atabs__panel + .atabs__panel { margin-top: 0; }
@media (max-width: 760px) {
  .atabs__list { overflow-x: auto; scrollbar-width: none; margin-inline: -24px; padding-inline: 24px; }
  .atabs__list::-webkit-scrollbar { display: none; }
  .atabs__tab { flex: 0 0 auto; }
}

/* Hero-Fenster (Startseite) */
.hwin { margin-top: clamp(40px, 6vw, 72px); }
.hwin .atabs__list { margin-bottom: 14px; }
.hwin__panel { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(14px, 2vw, 22px);
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(12px, 1.6vw, 18px); }
.hwin__vis { position: relative; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; background: var(--paper);
  display: flex; flex-direction: column; min-height: 420px; }
.hwin__bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--white);
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--steel); }
.hwin__bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.hwin__bar span { margin-left: 8px; }
.hwin__media { position: relative; flex: 1; min-height: 0; }
.hwin__media video, .hwin__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hwin__media img.top { object-position: top left; }
.hwin__pad { padding: clamp(16px, 2.4vw, 28px); flex: 1; display: flex; flex-direction: column; justify-content: center; }
.hwin__copy { display: flex; flex-direction: column; padding: clamp(20px, 2.6vw, 34px); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper); }
.hwin__copy h3 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin: 14px 0 12px; }
.hwin__copy p { color: var(--text-soft); }
.hwin__copy .feature__list { margin-top: 20px; }
.hwin__foot { margin-top: auto; padding-top: 24px; display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em; color: var(--steel); }
.hwin__foot a { color: var(--signal); font-family: var(--font-sans); font-size: .92rem; letter-spacing: 0; font-weight: 600; }
.hwin__note { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--steel); margin-top: 12px; }
@media (max-width: 860px) { .hwin__panel { grid-template-columns: 1fr; } .hwin__vis { min-height: 320px; } }

/* Branchen-Chips im Fenster */
.bchips { display: flex; flex-wrap: wrap; gap: 8px; }
.bchips a { display: inline-flex; align-items: center; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--white); color: var(--navy); font-size: .92rem; font-weight: 600; transition: border-color .2s var(--ease), color .2s var(--ease); }
.bchips a:hover { border-color: var(--sky); color: var(--signal); }

/* Portal-Attrappe (auch auf /portal genutzt) */
.pmock__win { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 15px 16px 16px; }
.pmock__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; gap: 10px; }
.pmock__ttl { font-weight: 600; color: var(--navy); font-size: 1rem; }
.pmock__pill { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; font-weight: 600; padding: 4px 9px; border-radius: 999px; white-space: nowrap; }
.pmock__pill.ok { background: #e7f6ee; color: #1a7a44; }
.pmock__pill.warn { background: #fdeede; color: #8a4a10; }
.pmock__pill.info { background: var(--ice); color: var(--deep); }
.pmock__row { display: flex; align-items: center; gap: 11px; padding: 10px 0; border-top: 1px solid var(--line); }
.pmock__ico { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--ice); color: var(--deep); }
.pmock__ico svg { width: 16px; height: 16px; }
.pmock__txt { flex: 1; min-width: 0; }
.pmock__txt b { display: block; font-size: .84rem; color: var(--navy); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pmock__txt span { font-size: .72rem; color: var(--steel); }
.pmock__chk { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; background: var(--signal); color: #fff; display: grid; place-items: center; }
.pmock__chk svg { width: 12px; height: 12px; }
.pmock__bar { height: 9px; border-radius: 999px; background: var(--ice); overflow: hidden; margin: 10px 0 6px; }
.pmock__bar i { display: block; height: 100%; border-radius: 999px; background: var(--signal); }
.pmock__meta { display: flex; justify-content: space-between; font-size: .72rem; color: var(--steel); margin-bottom: 4px; }
/* Balken fuellt sich, sobald das Panel aktiv ist */
.atabs.is-js .atabs__panel .pmock__bar i { transform: scaleX(0); transform-origin: left; }
.atabs.is-js .atabs__panel.is-active .pmock__bar i { animation: barFill 1.6s .3s var(--ease-out) forwards; }
@keyframes barFill { to { transform: scaleX(1); } }

/* --- Lebende Portal-Karten --- */
.live-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 8px; }
.live { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; transition: border-color .3s var(--ease); }
.live:hover { border-color: var(--sky); }
.live__vis { position: relative; height: 230px; background: var(--paper); border-bottom: 1px solid var(--line); padding: 22px; overflow: hidden; }
.live__vis .pmock__win { height: 100%; }
.live__txt { padding: 20px 22px 24px; }
.live__txt h3 { font-size: 1.1rem; line-height: 1.3; }
.live__txt p { margin-top: 8px; font-size: .92rem; color: var(--text-soft); }
.live:not(.is-vis) * { animation-play-state: paused !important; }
@media (max-width: 900px) { .live-grid { grid-template-columns: 1fr; } }
/* 1: Bericht baut sich auf, dann geprueft */
.lv-doc__ln { height: 8px; border-radius: 4px; background: var(--mist); margin: 9px 0; transform-origin: left; animation: lnGrow 7s var(--ease-out) infinite; }
.lv-doc__ln:nth-child(2) { width: 92%; animation-delay: .25s; } .lv-doc__ln:nth-child(3) { width: 78%; animation-delay: .5s; }
.lv-doc__ln:nth-child(4) { width: 86%; animation-delay: .75s; } .lv-doc__ln:nth-child(5) { width: 60%; animation-delay: 1s; }
@keyframes lnGrow { 0% { transform: scaleX(0); } 14%, 88% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
.lv-doc__stamp { position: absolute; right: 22px; bottom: 20px; animation: stampIn 7s var(--ease-out) infinite; }
@keyframes stampIn { 0%, 30% { opacity: 0; transform: scale(.8); } 38%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; } }
/* 2: Massnahme wird erledigt */
.lv-flip { display: inline-grid; } .lv-flip > * { grid-area: 1 / 1; }
.lv-flip > :first-child { animation: flipA 6s infinite; } .lv-flip > :last-child { animation: flipB 6s infinite; }
@keyframes flipA { 0%, 45% { opacity: 1; } 52%, 94% { opacity: 0; } 100% { opacity: 1; } }
@keyframes flipB { 0%, 45% { opacity: 0; transform: scale(.85); } 52%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
/* 3: Sprache wechselt (main.js setzt data-lang am .live, Schalter und Texte bleiben synchron) */
.lv-lang { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 3px; position: relative; font-family: var(--font-mono); font-size: .72rem; font-weight: 600; }
.lv-lang b { position: relative; z-index: 1; padding: 3px 9px; color: var(--steel); transition: color .4s var(--ease); }
.lv-lang::before { content: ""; position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 999px; background: var(--ice); transition: transform .5s var(--ease-io); }
.live[data-lang="de"] .lv-lang b:first-child, .live[data-lang="en"] .lv-lang b:last-child { color: var(--deep); }
.live[data-lang="en"] .lv-lang::before { transform: translateX(100%); }
.lv-tx { display: inline-grid; } .lv-tx > * { grid-area: 1 / 1; transition: opacity .45s var(--ease); }
.lv-tx > :last-child { opacity: 0; }
.live[data-lang="en"] .lv-tx > :first-child { opacity: 0; } .live[data-lang="en"] .lv-tx > :last-child { opacity: 1; }

/* --- Anlaesse als Reiter (dunkler Abschnitt) --- */
.atabs--v { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.atabs--v .atabs__list { flex-direction: column; gap: 0; }
.atabs--v .atabs__tab { flex: none; border: 0; border-radius: 0; background: none; padding: 18px 0 18px 22px; color: rgba(255,255,255,.42);
  font-size: clamp(1.1rem, 1.8vw, 1.4rem); letter-spacing: -.015em; }
.atabs--v .atabs__tab:hover, .atabs--v .atabs__tab.is-active { color: #fff; }
.atabs--v .atabs__tab .atabs__k { color: rgba(255,255,255,.35); }
.atabs--v .atabs__tab.is-active .atabs__k { color: var(--sky); }
.atabs--v .atabs__bar { left: 0; top: 0; bottom: 0; right: auto; width: 2px; height: auto; background: rgba(127,160,255,.18); }
.atabs--v .atabs__bar i { width: 100%; height: 100%; transform: scaleY(0); transform-origin: top; background: var(--sky); }
.atabs--v .atabs__tab.is-active .atabs__bar i { transform: scaleY(1); }
.atabs--v.is-auto .atabs__tab.is-active .atabs__bar i { transform: scaleY(0); animation: tabProgY var(--dur, 7s) linear forwards; }
@keyframes tabProgY { to { transform: scaleY(1); } }
.anlass { border: 1px solid rgba(127,160,255,.16); border-radius: var(--radius-lg); background: rgba(255,255,255,.04); padding: clamp(24px, 3.4vw, 44px); }
.anlass__n { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em; color: var(--sky); text-transform: uppercase; }
.anlass h3 { color: #fff; font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin: 14px 0 14px; }
.anlass p { color: #c3cbd9; font-size: 1rem; line-height: 1.65; max-width: 52ch; }
.anlass .btn { margin-top: 28px; }
@media (max-width: 860px) { .atabs--v { grid-template-columns: 1fr; } .atabs--v .atabs__list { flex-direction: row; } .atabs--v .atabs__tab { padding: 12px 16px 14px; font-size: 1rem; }
  .atabs--v .atabs__bar { top: auto; left: 0; right: 0; width: auto; height: 2px; } .atabs--v .atabs__bar i { transform-origin: left; }
  .atabs--v .atabs__tab.is-active .atabs__bar i { transform: scaleX(1); } .atabs--v.is-auto .atabs__tab.is-active .atabs__bar i { transform: scaleX(0); animation-name: tabProg; } }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-l, .reveal-r, .reveal-scale, .stg > *, .rot__w { filter: none !important; }
  .tilt { transform: none !important; }
  .lv-doc__ln, .lv-doc__stamp, .lv-flip > * { animation: none !important; }
  .lv-flip > :last-child { opacity: 0; }
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.live-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin: clamp(48px, 6vw, 72px) 0 22px; }
.live-head h3 { margin-top: 12px; font-size: clamp(1.4rem, 2.4vw, 1.9rem); max-width: 30ch; }
@media (max-width: 700px) { .live-head { flex-direction: column; align-items: flex-start; } }
html[lang="en"] .hero--v2 h1 { font-size: clamp(2.3rem, 5.2vw, 3.9rem); }
html[lang="en"] .hero--v2 h1 .accent { display: block; }
.hero--v2 .hero__copy { min-width: 0; }
.kz__n .kz__p { margin-left: -8px; }
.hero__sub { max-width: 46ch; }
.atabs--v > *, .atabs > * { min-width: 0; }
@media (max-width: 480px) { .hero--v2 h1 { font-size: clamp(2.2rem, 10vw, 2.6rem); } .kz__i { padding-right: 12px; } .kz__i:nth-child(2n) { padding-left: 14px; } }

/* --- Runde 2 (Hugo, 20.10.2026): Hero wieder mit Video, Kennzahlen als Zeile, keine Nummern --- */
.hero--v2 .hero__grid { align-items: center; }
.hero--v2 h1 { font-size: clamp(2.2rem, 4.5vw, 3.45rem); }
html[lang="en"] .hero--v2 h1 { font-size: clamp(2.1rem, 4.2vw, 3.2rem); }
.kz--row { grid-template-columns: repeat(4, minmax(0, 1fr)); border: 0; gap: 24px; margin-top: clamp(40px, 5vw, 64px); position: relative; z-index: 1; }
.kz--row .kz__i, .kz--row .kz__i:nth-child(2n) { padding: 0; border: 0; }
.kz--row .kz__l { max-width: 30ch; }
@media (max-width: 820px) { .kz--row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; } }
.hwin__foot { justify-content: flex-end; }
/* Helle Variante der senkrechten Reiter (Leistungen) */
.atabs--light .atabs__tab { color: var(--steel); }
.atabs--light .atabs__tab:hover, .atabs--light .atabs__tab.is-active { color: var(--navy); }
.atabs--light .atabs__bar { background: var(--line); }
.atabs--light .atabs__bar i { background: var(--signal); }
.svc-panel { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(24px, 3.2vw, 40px); }
.svc-panel__t { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--signal); }
.svc-panel h3 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin: 12px 0 14px; }
.svc-panel p { color: var(--text-soft); line-height: 1.65; }
.svc-panel__lbl { display: block; margin-top: 24px; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--slate); }
.svc-panel .feature__list { margin-top: 12px; }
.svc-panel__link { display: inline-flex; align-items: center; gap: 6px; margin-top: 24px; color: var(--signal); font-weight: 600; }
.svc-panel__link svg { width: 16px; height: 16px; }
@media (min-width: 861px) { .atabs--light .atabs__panels { position: sticky; top: calc(var(--nav-h) + 24px); } }
.pmock__txt .lv-tx, .pmock__txt .lv-tx > span { font-size: inherit; color: inherit; }
@media (max-width: 480px) { .hero__badge { max-width: 100%; } .hero__badge b { white-space: normal; line-height: 1.3; } }

/* --- Runde 3 --- */
/* Kennzahlen (Hugo, 27.10.2026): ueber die volle Breite verteilt, erster Text buendig links, letzter buendig
   rechts. Die Texte brechen nicht um, sonst bleibt der Block breiter als der Text und endet vor dem Rand.
   Unter 1100 px passen vier Spalten ohne Umbruch nicht, dort 2x2 wie am Handy. */
.kz--row { display: flex; justify-content: space-between; gap: 32px; }
.kz--row .kz__i { flex: 0 0 auto; }
.kz--row .kz__l { white-space: nowrap; max-width: none; }
@media (max-width: 1099px) {
  .kz--row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
  .kz--row .kz__l { white-space: normal; }
}
/* Grosse Ziffern haben links Weissraum im Zeichen, die 1 (gleichbreite Ziffern fuer die Zaehlanimation) am meisten.
   Ausgleich je Anfangsziffer (data-d im HTML), damit Zahl und Text darunter auf derselben Kante beginnen.
   Am 27.10.2026 per Pixelmessung bestimmt (Abweichung danach unter 0,5 px). */
.kz__n[data-d="1"] { margin-left: -.135em; }
.kz__n[data-d="3"] { margin-left: -.04em; }
.kz__n[data-d="5"] { margin-left: -.065em; }
.hwin__panel--text { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 72px); padding: clamp(26px, 3.6vw, 48px); align-items: start; }
.hwin__panel--text h3 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin: 0 0 14px; }
.hwin__panel--text p { color: var(--text-soft); font-size: 1rem; }
.hwin__panel--text .feature__list { margin-top: 0; }
.hwin__panel--text .bchips { margin-top: 22px; }
.hwin__panel--text .hwin__foot { justify-content: flex-start; padding-top: 22px; }
@media (max-width: 860px) { .hwin__panel--text { grid-template-columns: 1fr; } }
.live-grid--six .live__vis { height: 320px; padding: 18px; }
.live .pmock__bar i { transform: scaleX(0); transform-origin: left; }
.live.is-vis .pmock__bar i { animation: barFill 1.6s .4s var(--ease-out) forwards; }
.live__txt p { line-height: 1.6; }
.section-head > .section-lead { margin-top: 20px; }
/* Ablauf: Punkt mittig zur Zeitmarke (Marke: 2px Abstand + ca. 33px Hoehe, Punkt 11px) */
.tstep__num { margin-top: 13px; }
.process-head__text > .section-lead { margin-top: 20px; }
.process-head__text { width: 100%; }
@media (max-width: 760px) { .tstep__num { margin-top: 11px; } }

/* --- Runde 4 --- */
/* Portal: alle sechs Fenster gleich (Inline-Regeln der Portalseite ueberstimmen) */
.live-grid--six .pmock__win { height: 100%; min-height: 0; border-radius: var(--radius); overflow: hidden; }
.live-grid--six .pmock__row:last-child { border-bottom: 0; }
/* Fristen: Erinnerung faehrt ein */
.lv-toast { position: absolute; left: 30px; right: 30px; bottom: 26px; display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  background: var(--white); border: 1px solid var(--sky); border-radius: var(--radius-sm); font-size: .84rem; font-weight: 600; color: var(--navy);
  opacity: 0; animation: toastIn 7s var(--ease-out) infinite; }
.lv-toast .pmock__ico { width: 26px; height: 26px; }
@keyframes toastIn { 0%, 30% { opacity: 0; transform: translateY(12px); } 38%, 82% { opacity: 1; transform: none; } 90%, 100% { opacity: 0; transform: translateY(6px); } }
/* Dokumente: neuer Bericht kommt an */
.lv-new { animation: newRow 7s var(--ease-out) infinite; }
.lv-new .pmock__pill { animation: newPill 7s var(--ease-out) infinite; }
@keyframes newRow { 0%, 6% { opacity: 0; transform: translateY(-10px); } 16%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes newPill { 0%, 18% { opacity: 0; transform: scale(.8); } 26%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .lv-toast { animation: none !important; opacity: 1; position: static; margin-top: 10px; } .lv-new, .lv-new .pmock__pill { animation: none !important; } }
/* Hero: Hinweis auf die Vorgaben der BG (Platz fuer das BG-Logo) */
.bgnote { display: inline-flex; align-items: center; gap: 12px; margin-top: 4px; }
.bgnote__ic { width: 38px; height: 38px; border-radius: var(--radius-sm); background: var(--ice); color: var(--deep); display: grid; place-items: center; flex: none; }
.bgnote__ic svg { width: 20px; height: 20px; }
.bgnote__ic img { width: 100%; height: 100%; object-fit: contain; }
.bgnote__t { display: flex; flex-direction: column; line-height: 1.25; font-size: .84rem; color: var(--slate); }
.bgnote__t b { color: var(--navy); font-weight: 600; }
@media (max-width: 480px) { .hero--v2 h1, html[lang="en"] .hero--v2 h1 { font-size: clamp(1.9rem, 8.3vw, 2.6rem); } }
@media (max-width: 900px) { .hero__grid { grid-template-columns: minmax(0, 1fr); } .hero__grid > * { min-width: 0; } }

/* --- Runde 5 (Hugo, 21.10.2026) --- */
/* BG-Bildzeichen statt Symbol, in Signal-Blau */
.bgnote__ic { width: auto; height: auto; background: none; border-radius: 0; color: var(--signal); }
.bgnote__ic svg { width: 46px; height: auto; display: block; }
/* Karten in den Reitern: etwas mehr Luft zwischen Text, Punkten und Link */
.svc-panel .feature__list { margin-top: 18px; }
/* Einheitlicher Abstand zwischen Abschnitten: nur das Abschnitts-Padding, keine Zusatz-Abstaende */
.problem, .contact { margin-top: 0; }

/* --- Runde 6 (Hugo, 21.10.2026) --- */
/* Hero wie eine Box: Pille oben buendig mit dem Video, BG-Hinweis unten buendig, Inhalt dazwischen */
@media (min-width: 901px) {
  .hero--v2 .hero__grid { align-items: stretch; }
  .hero--v2 .hero__copy { display: flex; flex-direction: column; align-items: flex-start; }
  .hero--v2 .hero__copy > h1 { margin-top: auto; align-self: stretch; }
  .hero--v2 .hero__copy > .bgnote { margin-top: auto; }
  .hero--v2 .hero__copy > .hero__cta:last-child { margin-bottom: auto; }
  .hero--v2 .hero__sub { max-width: none; }
  .hero--v2 .hero__visual { align-self: stretch; min-height: 0; }
  .hero--v2 .hero__photo--video { aspect-ratio: auto; height: 100%; min-height: 460px; }
  .hero--v2 .hero__photo--video video { position: absolute; inset: 0; }
}
.bgnote__t b { font-weight: inherit; color: inherit; }
/* Laufband nicht direkt am Problem-Block */
.problem { margin-top: clamp(22px, 3vw, 38px); }
/* Partner: Karte ist hoeher als der Text, deshalb Block mittig statt Pille oben */
@media (min-width: 901px) {
  .hero--flip.hero--v2 .hero__copy { justify-content: center; }
  .hero--flip.hero--v2 .hero__copy > h1, .hero--flip.hero--v2 .hero__copy > .hero__cta:last-child { margin-top: 0; margin-bottom: 0; }
}

/* --- Runde 7 (Hugo, 21.10.2026): Hero links mit gleichmaessigen Abstaenden, Video wieder laenger --- */
@media (min-width: 901px) {
  .hero.hero--v2 .hero__copy > * { margin-top: 0; margin-bottom: 0; }
  .hero--v2:not(.hero--flip) .hero__copy { justify-content: space-between; }
  .hero--v2:not(.hero--flip) .hero__photo--video { min-height: clamp(560px, 46vw, 660px); }
  .hero--flip.hero--v2 .hero__copy { justify-content: center; gap: clamp(28px, 3vw, 44px); }
}

/* ============================================================
   TYPO-SYSTEM (Hugo, 21.10.2026): weniger Groessen, duenner, ruhiger.
   Genau diese Stufen gelten auf allen Seiten. Inline-Groessen auf einzelnen Seiten
   werden hier bewusst ueberstimmt (!important), damit nichts mehr ausschert.
   - Hero-Titel (Startseite, Partner)      --fs-hero
   - Seitentitel aller anderen Seiten       --fs-h1
   - Abschnittstitel                        --fs-h2
   - Titel in Karten und Reiter-Panels      --fs-h3
   - Zwischenueberschriften im Fliesstext   --fs-prose-h2 (= --fs-h3) / --fs-prose-h3
   Text unter den Ueberschriften (seit 27.10.2026, Hugo: nicht zu viele Groessen), genau fuenf Stufen:
   - Label (Mono, Eyebrows, Hinweise)      --fs-label  .72rem  11,5 px
   - Klein (Formular-Labels, Rechtstext)   --fs-small  .84rem  13,4 px
   - UI (Knoepfe, Navigation, Tabellen)    --fs-ui     .92rem  14,7 px
   - Text (Fliesstext, Panels)             --fs-body   1rem    16 px
   - Lead (Einleitung unter Titeln)        --fs-lead   1.1rem  17,6 px, zugleich kleine Kartentitel
   Keine Zwischenwerte (.85, .88, .95, .98 ...). Einzige Ausnahme: Siegel im Hero am Handy (.58rem).
   Gewicht: Ueberschriften 600, Knoepfe 600, Navigation 500, Text 400.
   ============================================================ */
:root {
  --fs-hero: clamp(2.2rem, 4.1vw, 3.1rem);
  --fs-h1: clamp(1.85rem, 3vw, 2.4rem);
  --fs-h2: clamp(1.55rem, 2.3vw, 2rem);
  --fs-h3: clamp(1.2rem, 1.6vw, 1.4rem);
  --fs-prose-h2: var(--fs-h3);
  --fs-prose-h3: 1.1rem;
  --fs-label: .72rem;
  --fs-small: .84rem;
  --fs-ui: .92rem;
  --fs-body: 1rem;
  --fs-lead: 1.1rem;
  --nav-h: 64px;
}
@media (max-width: 480px) { :root { --fs-hero: clamp(1.9rem, 8.3vw, 2.6rem); } }
h1, h2, h3, h4 { font-weight: 600; }
h2 { font-size: var(--fs-h2); }
main h1 { font-size: var(--fs-h1) !important; line-height: 1.1; }
.hero h1, html[lang="en"] .hero h1 { font-size: var(--fs-hero) !important; line-height: 1.04; }
.section-head h2, .process-head h2, .contact__head h2, .funnel__head h2, .toolcta h2,
.live-head h3, .vision-card > h3 { font-size: var(--fs-h2) !important; line-height: 1.12; }
.svc-panel h3, .anlass h3, .hwin__copy h3, .founder__body h3, .funnel__step h3, .geo-box h3 { font-size: var(--fs-h3) !important; line-height: 1.2; }
.related > h2, .post-cluster > h2 { font-size: var(--fs-prose-h2) !important; }
.section-lead, .tool-head p, .blog-head p { font-size: var(--fs-lead) !important; }
.split__copy > h3 { font-size: var(--fs-h2) !important; line-height: 1.12; }
.pf-hero p { font-size: var(--fs-lead) !important; }
.tool-prose h2, .post-body h2, .post-sources h2, .post-faq h2, .post-cta h2 { font-size: var(--fs-prose-h2) !important; }
.tool-prose h3, .post-body h3 { font-size: var(--fs-prose-h3) !important; }
.kz__n { font-size: clamp(2rem, 3vw, 2.5rem); font-weight: 600; }
.stat__num, .founder__mono, .logo__word { font-weight: 600; }
/* Knoepfe: genau zwei Groessen */
.btn { min-height: 44px; padding: 0 20px; font-size: .92rem; font-weight: 600; line-height: 1.2; }
.btn-lg { min-height: 50px; padding: 0 26px; font-size: 1rem; }
/* Navigation: schlanker */
.nav__links a { font-weight: 500; }
/* Reiter-Liste links: kleines Klick-Element, nicht so praesent */
.atabs--v .atabs__tab { font-size: 1rem; font-weight: 600; letter-spacing: -.005em; padding: 12px 0 12px 20px; }
.faq-item summary { font-weight: 600; }
/* Hero etwas niedriger, gleiche Abstaende bleiben */
@media (min-width: 901px) { .hero--v2:not(.hero--flip) .hero__photo--video { min-height: clamp(480px, 38vw, 560px); } }
/* FAQ wie bei Fabi: links Kopf mit Knopf, rechts schlichte Liste mit Trennlinien */
.faq-wrap--split { max-width: none; display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.faq-wrap--split .faq-head { margin: 0; }
.faq-head .btn { margin-top: 26px; }
@media (min-width: 901px) { .faq-wrap--split .faq-head { position: sticky; top: calc(var(--nav-h) + 32px); } }
@media (max-width: 900px) { .faq-wrap--split { grid-template-columns: 1fr; } }
.faq-list { gap: 0; border-top: 1px solid var(--line); }
.faq-item { background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; }
.faq-item[open] { border-color: var(--line); box-shadow: none; }
.faq-item summary { padding: 20px 0; font-size: 1rem; }
.faq-ico { width: 28px; height: 28px; }
.faq-ico svg { width: 16px; height: 16px; }
.faq-answer { padding: 0 0 22px; }
main h1 { font-weight: 600 !important; }
/* Kartentitel in Rastern (Tools, Blog): eine Groesse */
.tool-tile h2, .post-card h2 { font-size: 1.1rem !important; line-height: 1.3; }
/* Kastentitel innerhalb von Inhaltsseiten wie Zwischenueberschriften */
.toolreport__head h2, .post-cluster h2, .post-nl h2 { font-size: var(--fs-prose-h2) !important; }
/* Newsletter-Zeile: Feld und Knopf in der grossen Knopfhoehe */
.post-nl__row input, .post-nl__row .btn { min-height: 50px; height: 50px; padding-top: 0; padding-bottom: 0; }
/* Kleine Kartentitel (Ablauf, Portal-Karten, Kacheln): eine Groesse */
.tstep__content h3, .live__txt h3, .feature h3, .trigger h3, .guar h3 { font-size: 1.1rem !important; line-height: 1.3; }
/* Fettdruck im Text und Labels im selben Gewicht wie Ueberschriften (Hugo, 21.10.2026: ueberall 600) */
b, strong { font-weight: 600; }
/* Hero-Untertitel etwa in Knopfgroesse, damit er nicht rechts ueber die Knoepfe hinausragt */
.hero--v2 .hero__sub { font-size: 1rem; line-height: 1.6; }
.hero--flip.hero--v2 .hero__sub { max-width: 26em; }
html[lang="en"] .hero--flip.hero--v2 .hero__sub { max-width: 20em; }

/* ============================================================
   RUNDE 8 (Hugo, 21.10.2026)
   ============================================================ */
/* Reiter mit Karte: Liste und Karte senkrecht zueinander zentriert. Alle Panels liegen in einer
   Zelle, die Karte ist so hoch wie das laengste Panel und springt beim Wechsel nicht. */
.atabs--v.is-js .atabs__panels { display: grid; }
.atabs--v.is-js .atabs__panel { display: flex; flex-direction: column; justify-content: center; grid-area: 1 / 1; visibility: hidden; }
.atabs--v.is-js .atabs__panel.is-active { display: flex; visibility: visible; }
.atabs--v .atabs__panel > a { align-self: flex-start; }
@media (min-width: 861px) {
  .atabs--v { align-items: center; }
  .atabs--light .atabs__panels { position: static; }
}

/* Ein Chip-Stil fuer alle Listen (Branchen, Orte, Betriebsarten) */
.geo-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.geo-tags li::before { content: none; }
.chiprow li, .tool-prose ul.chiprow li, .geo-tags li, .bchips a {
  padding: 8px 14px; background: var(--white); color: var(--navy); border: 1px solid var(--line);
  border-radius: var(--radius-sm); font-size: .92rem; font-weight: 600; line-height: 1.3;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.chiprow li:has(> a), .tool-prose ul.chiprow li:has(> a), .geo-tags li:has(> a) { padding: 0; border-color: var(--line); }
.chiprow li > a, .tool-prose ul.chiprow li > a, .geo-tags li > a { display: block; padding: 8px 14px; color: var(--navy); text-decoration: none; }
.chiprow li:has(> a):hover, .geo-tags li:has(> a):hover, .bchips a:hover { border-color: var(--sky); }
.chiprow li > a:hover, .geo-tags li > a:hover, .bchips a:hover { color: var(--signal); }
.chiprow--links { margin: 30px 0 6px; }

/* Ein Stil fuer Pfeil-Links in Karten und Panels */
.rd, .svc-panel__link { display: inline-flex; align-items: center; gap: 6px; color: var(--signal); font-size: 1rem !important; font-weight: 600; text-decoration: none; }
.rd svg, .svc-panel__link svg { width: 16px; height: 16px; flex: none; transition: transform .2s var(--ease); }
.rd:hover svg, .svc-panel__link:hover svg { transform: translateX(3px); }

/* Zwei Innenabstaende fuer Karten: gross (Panels, Formulare, Kaesten) und klein (Kacheln im Raster) */
:root { --pad-card: clamp(24px, 3vw, 40px); --pad-tile: 24px; }
.svc-panel, .anlass, .funnel__card, .form, .toolreport, .tool-card, .post-nl, .duo__card, .geo-box { padding: var(--pad-card) !important; }
.tool-tile, .post-card__inner, .region-card { padding: var(--pad-tile) !important; }

/* Kontaktkopf linksbuendig, darunter der Ansprechpartner (Hugo, 21.10.2026) */
.contact__head { text-align: left; max-width: none; margin: 0 0 40px; }
.contact__head h2 { margin-bottom: 0; }
.contact__person { display: flex; align-items: center; gap: 14px; margin-top: 22px; text-align: left; }
.contact__person img { width: 56px; height: 56px; border-radius: var(--radius-sm); object-fit: cover; flex: none; }
.contact__person b { display: block; color: #fff; font-weight: 600; line-height: 1.35; }
.contact__person span { display: block; color: #c3cbd9; font-size: .92rem; line-height: 1.45; }

/* Fehlerseite */
.nf { min-height: calc(100vh - 260px); display: flex; align-items: center; }
.nf > .container { width: 100%; }
.nf .tool-head p { margin-bottom: 28px; }
.nf .chiprow { margin-top: 34px; }
.nf .tool-head .btn + .btn { margin-left: 10px; }

/* Hero: oben weniger Abstand, damit die Kennzahlen beim Laden mit Luft nach unten im Bild stehen */
.hero { padding-top: calc(var(--nav-h) + clamp(28px, 4vw, 56px)); }
/* Auf niedrigen Bildschirmen (Laptops) wird die Videobox etwas flacher, damit die Kennzahlen ebenfalls ganz im Bild stehen */
@media (min-width: 901px) { .hero--v2:not(.hero--flip) .hero__photo--video { min-height: clamp(460px, min(38vw, 100svh - 340px), 560px); } }

/* ============================================================
   RUNDE 9 (Hugo, 21.10.2026): Abstaende auf der visuellen Ebene
   ============================================================ */
/* Navigation etwas hoeher, damit Logo, Links und Knopf oben Luft haben */
:root { --nav-h: 72px; }
/* Seitenkoepfe aller Seiten mit demselben Abstand unter der Navigation wie der Hero */
main > section:first-of-type, .legal { padding-top: calc(var(--nav-h) + clamp(28px, 4vw, 56px)) !important; }
/* Reiter mit Karte direkt unter einem Abschnittskopf: Knopf und Liste ruecken zusammen,
   die Liste ist etwas luftiger, darunter mehr Abstand zum naechsten Block */
.process-head:has(+ .atabs--v), .section-head:has(+ .atabs--v) { margin-bottom: 28px; }
@media (min-width: 861px) { .atabs--v .atabs__tab { padding: 17px 0 17px 20px; }
  .atabs--v .atabs__list:not(:has(> .atabs__tab:nth-child(6))) .atabs__tab { padding: 22px 0 22px 20px; } }
.atabs--v + .split { margin-top: clamp(64px, 7vw, 100px); }
/* Kontakt: dunkle Flaeche ueber dem Kopf so hoch wie unter dem Formular wirkt */
.contact { padding-top: clamp(32px, 3.2vw, 48px); }
/* Regionen-Liste auf /dienstleistungen: Link zur Region in eigener Zeile */
.geo-cities .region-more { display: flex; width: fit-content; margin-top: 10px; }

/* 26.10.2026: Tabellen-Beschriftung in Rechnern wie im Blog (.post-body caption in blog/build.py).
   27.10.2026: ohne seitlichen Einzug, weil die Zellen hier (anders als im gerahmten Blog-Kasten) buendig links
   beginnen. Beschriftung, Kopfzeile und Zellen stehen auf derselben Kante. */
.tool-prose caption{text-align:left;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--steel);font-weight:600;padding:0 0 12px}

/* ===================== ANGEBOTSRECHNER (seit 27.10.2026) =====================
   Startseite #funnel und /tools/kostenrechner-arbeitsschutz, DE und EN. Markup aus
   blog/build_angebot.py, Logik in assets/js/main.js ("Angebotsrechner"). Abstaende: 16px zwischen
   allen Kaesten und Feldern, 32px vor dem Vergleich. */
.funnel__card--wide { max-width: 860px; }
.angebot .field select { appearance: none; -webkit-appearance: none; padding-right: 46px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2398A2B3' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; background-size: 16px; }
.angebot .field { margin-bottom: 16px; }
.angebot .form__row { gap: 16px; }
.angebot #a-ma { font-variant-numeric: tabular-nums; }
.angebot .fopt { display: flex; flex-direction: column; gap: 4px; text-align: left; }
.angebot .fopt small { font-size: .84rem; font-weight: 400; color: var(--text-soft); }
.angebot .funnel__option.is-selected .fopt small { color: var(--deep); }
.angebot .ahint { background: var(--ice); color: var(--deep); border-radius: 10px; padding: 12px 14px; font-size: .92rem; line-height: 1.5; margin: 0 0 16px; }
.angebot .aerr { color: #B42318; font-size: .92rem; margin: 0 0 16px; }
.angebot .aerr:empty, .angebot .toolreport__status:empty, .angebot .ahint[hidden] { display: none; }
.angebot .funnel__next { margin-top: 0; }
.angebot .funnel__hint { margin: -8px 0 16px; }
.angebot [data-step="3"] .funnel__options { margin-bottom: 16px; }
.angebot .funnel__result > .funnel__back { display: flex; margin-bottom: 12px; }
.angebot .apreis-teile { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: -2px 0 12px; }
.angebot .apreis-teile span { font-size: var(--fs-ui); color: var(--slate); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm, 10px); padding: 5px 10px; font-variant-numeric: tabular-nums; }
.angebot .apreis-note { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--steel); margin: -4px 0 20px; }
.angebot .aoben { margin: 0 0 16px; }
.angebot .aoben .btn, .angebot [data-mailform] .btn { width: 100%; }
.angebot .funnel__result .funnel__divider { margin: 0 0 16px; }
.angebot .funnel__result .toolreport__field { margin-bottom: 16px; }
.angebot .funnel__result .toolreport__field label { margin-bottom: 2px; }
.angebot .funnel__result .toolreport__check { margin: 0 0 16px; }
.angebot .funnel__result .toolreport__status { margin: 12px 0 0; min-height: 0; }
.angebot .toolreport__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.angebot .asub { margin: 32px 0 12px !important; font-size: .72rem; }
.angebot .avgl { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; font-size: .92rem; }
.angebot .avgl__row { display: grid; grid-template-columns: 28% 36% 36%; border-top: 1px solid var(--border); }
.angebot .avgl__row:first-child { border-top: 0; }
.angebot .avgl__row span { min-width: 0; padding: 11px 14px; line-height: 1.45; hyphens: manual; -webkit-hyphens: manual; overflow-wrap: normal; word-break: normal; }
.angebot .avgl__row span:first-child { color: var(--navy); }
.angebot .avgl__row span:nth-child(2) { background: var(--ice); color: var(--deep); }
.angebot .avgl__row span:nth-child(3) { background: #FDF1F3; }
.angebot .avgl__head span { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 400; color: var(--steel); padding-top: 10px; padding-bottom: 10px; }
.angebot .avgl__head span:nth-child(2) { color: var(--deep); font-weight: 600; }
@media (max-width: 560px) { .angebot .form__row { gap: 0; } }
@media (max-width: 640px) {
  .angebot .avgl__row { grid-template-columns: 1fr; }
  .angebot .avgl__head { display: none; }
  .angebot .avgl__row span:first-child { padding-bottom: 0; font-weight: 600; }
}

/* Ueber uns: Gruenderfoto statt Chrome-Video in der Vision-Karte (Hugo, 30.10.2026: Foto breit, wenig Wand, wenig Blau) */
.vision-card--foto { min-height: 340px; display: flex; flex-direction: column; justify-content: center; padding-right: calc(60% + 32px); }
.vision-card--foto > h3 { max-width: none; }
.vision-foto { position: absolute; top: 0; right: 0; bottom: 0; width: 60%; overflow: hidden; margin: 0; }
.vision-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 80%; display: block; }
@media (max-width: 760px) {
  .vision-card--foto { padding: 0 0 26px; min-height: 0; }
  .vision-foto { position: relative; width: auto; height: 300px; margin: 0 0 22px; }
  .vision-card--foto > .eyebrow, .vision-card--foto > h3 { margin-left: 24px; margin-right: 24px; }
}

/* ============ PROVENEXPERT-SIEGEL (Hugo, 02.11.2026) ============ */
/* Eigenes Siegel ohne Drittanbieter-Skript: Logo-Zeichen liegt lokal, Werte von Hand aus dem Profil
   (provenexpert.com/safety-club). Im Hero ueber dem BG-Hinweis, im selben Aufbau (Zeichen links, zwei Zeilen rechts);
   im Footer als Kachel exakt wie die uebrigen (grau, kein Hover-Leuchten). Kein margin-top:auto am Block: der Hero verteilt per space-between. */
.hero__proof { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.hero__proof .bgnote { margin-top: 0; }
.hero__proof .bgnote__ic { width: 46px; display: flex; justify-content: center; }
.bgnote--pe { text-decoration: none; }
.bgnote--pe .bgnote__ic img { width: 34px; height: 34px; display: block; }
.bgnote--pe .bgnote__t b { color: var(--navy); font-weight: 600; font-variant-numeric: tabular-nums; }
.bgnote--pe:hover .bgnote__t b, .bgnote--pe:focus-visible .bgnote__t b { color: var(--signal); }
.pestars { position: relative; display: inline-block; margin: 0 2px; color: var(--line); letter-spacing: 1px; line-height: 1; }
.pestars__on { position: absolute; top: 0; left: 0; overflow: hidden; white-space: nowrap; color: var(--navy); }
.footer__pe { text-decoration: none; }
.footer__pe .pestars { color: rgba(148,160,186,.35); }
.footer__pe .pestars__on { color: #94a0ba; }