/* css/fonts-local.css */
/* Self-hosted web fonts — generated by build/fetch-fonts.js, do not edit.
   Subsets: latin, latin-ext. See the README on why these are not
   loaded from Google. */

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/plus-jakarta-sans-400i-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: 'Plus Jakarta Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/plus-jakarta-sans-400i-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/plus-jakarta-sans-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: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/plus-jakarta-sans-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: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/plus-jakarta-sans-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: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/plus-jakarta-sans-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: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/plus-jakarta-sans-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: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/plus-jakarta-sans-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/plus-jakarta-sans-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: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/plus-jakarta-sans-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/assets/fonts/plus-jakarta-sans-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: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/assets/fonts/plus-jakarta-sans-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;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/jetbrains-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/jetbrains-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/jetbrains-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/jetbrains-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;
}

/* css/tokens/fonts.css */
:root{
  --font-sans:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --font-display:var(--font-sans);
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* css/tokens/colors.css */
:root{
  /* Brand blue — sampled from the Exchange Experten landing page */
  --blue-50:#f2f6fe;
  --blue-100:#e4edfd;
  --blue-200:#c3d8fb;
  --blue-300:#93b8f7;
  --blue-400:#5b90f9;
  --blue-500:#266cf8;
  --blue-600:#1b54d6;
  --blue-700:#0865ba;
  --blue-800:#0b4b94;
  --blue-900:#0a2e63;
  --navy-950:#071b3d;

  /* Neutrals */
  --white:#ffffff;
  --gray-50:#f7f7f7;
  --gray-100:#efeff0;
  --gray-200:#e6e7e9;
  --gray-300:#d6d8da;
  --gray-400:#aeb2b6;
  --gray-500:#8a8f94;
  --gray-600:#6b7075;
  --ink-700:#3a3b3c;
  --ink-800:#242424;
  --ink-900:#171818;

  /* Semantic — editorial category colour */
  --green-50:#e8f3ed;
  --green-600:#1b7c4a;
  --green-700:#16643a;

  /* Microsoft product glow tints (hero icon halos) */
  --glow-purple:#ebe0f8;
  --glow-green:#e2efe7;
  --glow-red:#f7e4e0;
  --glow-blue:#dce7f7;
  --glow-cyan:#dcf0fa;

  /* ---- Semantic aliases ---- */
  --brand:var(--blue-500);
  --brand-hover:var(--blue-600);
  --brand-soft:var(--blue-50);

  --text-heading:var(--ink-900);
  --text-body:var(--gray-600);
  --text-muted:var(--gray-500);
  --text-accent:var(--blue-500);
  --text-inverse:var(--white);

  --surface-page:var(--white);
  --surface-subtle:var(--gray-50);
  --surface-card:var(--gray-50);
  --surface-card-alt:var(--white);
  --surface-inverse:var(--ink-900);
  --surface-brand-soft:var(--blue-50);

  --border-subtle:var(--gray-200);
  --border-strong:var(--gray-300);
  --border-brand:var(--blue-200);

  --action-solid:var(--ink-900);
  --action-solid-hover:#000000;
  --action-solid-text:var(--white);
}

/* css/tokens/typography.css */
:root{
  --text-display-size:52px;   --text-display-lh:1.12;  --text-display-ls:-0.02em;  --text-display-weight:500;
  --text-h1-size:44px;        --text-h1-lh:1.14;       --text-h1-ls:-0.02em;       --text-h1-weight:500;
  --text-h2-size:40px;        --text-h2-lh:1.18;       --text-h2-ls:-0.018em;      --text-h2-weight:500;
  --text-h3-size:28px;        --text-h3-lh:1.24;       --text-h3-ls:-0.012em;      --text-h3-weight:500;
  --text-h4-size:20px;        --text-h4-lh:1.35;       --text-h4-ls:-0.008em;      --text-h4-weight:600;
  --text-lead-size:16px;      --text-lead-lh:1.65;     --text-lead-ls:0;           --text-lead-weight:400;
  --text-body-size:15px;      --text-body-lh:1.65;     --text-body-ls:0;           --text-body-weight:400;
  --text-small-size:13px;     --text-small-lh:1.55;    --text-small-ls:0;          --text-small-weight:400;
  --text-eyebrow-size:13px;   --text-eyebrow-lh:1.2;   --text-eyebrow-ls:0;        --text-eyebrow-weight:500;
  --text-label-size:14px;     --text-label-lh:1.2;     --text-label-ls:0;          --text-label-weight:500;
}

/* css/tokens/spacing.css */
:root{
  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px; --space-5:20px;
  --space-6:24px; --space-7:32px; --space-8:40px; --space-9:48px; --space-10:64px;
  --space-11:80px;--space-12:96px;--space-13:120px;--space-14:160px;
  --layout-page-width:1440px;
  --layout-container:1200px;
  --layout-gutter:120px;
  --layout-section-y:120px;
  --layout-grid-gap:24px;
}

/* css/tokens/radius.css */
:root{
  --radius-xs:6px;
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:16px;
  --radius-xl:24px;
  --radius-pill:999px;
  --radius-circle:50%;
}

/* css/tokens/elevation.css */
:root{
  --shadow-none:none;
  --shadow-chip:0 8px 24px rgba(16,24,40,0.10);
  --shadow-card:0 1px 2px rgba(16,24,40,0.04);
  --shadow-raised:0 12px 32px rgba(16,24,40,0.10);
  --shadow-solid:0 2px 10px rgba(0,0,0,0.16);
  --ring-focus:0 0 0 3px rgba(38,108,248,0.28);
}

/* css/tokens/motion.css */
:root{
  --ease-standard:cubic-bezier(0.4,0,0.2,1); /* @kind other */
  --ease-out:cubic-bezier(0.16,1,0.3,1); /* @kind other */
  --duration-fast:120ms; /* @kind other */
  --duration-base:200ms; /* @kind other */
  --duration-slow:400ms; /* @kind other */
  --hover-lift:translateY(-2px); /* @kind other */
  --press-scale:scale(0.985); /* @kind other */
}

/* css/base.css */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-family:var(--font-sans);font-size:var(--text-body-size);line-height:var(--text-body-lh);color:var(--text-body);background:var(--surface-page);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5,h6{margin:0;color:var(--text-heading);font-weight:500}
p{margin:0}
a{color:var(--brand);text-decoration:none;transition:color var(--duration-fast) var(--ease-standard)}
a:hover{color:var(--brand-hover)}
img{max-width:100%;display:block}
button{font-family:inherit}

/* css/site.css */
/* Exchange Experten — site stylesheet.

   Everything below is the design prototype's inline styling, lifted into real
   rules. Values come from the prototype and from _ds/tokens/*.css, which are
   the source of truth — no hex literal appears here unless the design uses a
   raw one (the project-specific dark surfaces #080C14 / #0B111B / #111926 /
   #06183C, which are not part of the base token set).

   Layout order:
     1  page shell            7  header
     2  motion primitives     8  footer
     3  buttons               9  cookie consent
     4  primitives           10  home page sections
     5  cards                11  responsive
     6  cta bar              12  touch (hover:none)                           */

/* ------------------------------------------------------- 1. page shell --- */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--surface-page);
  font-family: var(--font-sans);
  color: var(--text-heading);
}

a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-hover); }

:focus-visible { outline: none; box-shadow: var(--ring-focus); }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 500;              /* skip link stays reachable above everything */
  padding: 12px 18px;
  background: var(--white);
  color: var(--ink-900);
  border-radius: 0 0 var(--radius-sm) 0;
  font-size: 14px;
  font-weight: 500;
}
.skip:focus { left: 0; }

/* Anchor offsets: 90px header + 48px air. Sections that already carry a large
   top padding need less, hence the per-section values. */
main > section { scroll-margin-top: 138px; }
#themen, #ablauf, #stimmen, #blog, #faq, #standort { scroll-margin-top: 28px; }
#kontakt { scroll-margin-top: 8px; }

.accent { color: var(--brand); }
.accent-light { color: var(--blue-300); }

/* ------------------------------------------------ 2. motion primitives --- */

@keyframes heroIn  { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes chipFly { from { opacity: 0; transform: translate(var(--dx, 0), var(--dy, 0)) scale(.55); } to { opacity: 1; transform: translate(0, 0) scale(1); } }
@keyframes coreIn  { from { opacity: 0; transform: translateX(-50%) scale(.92); } to { opacity: 1; transform: translateX(-50%) scale(1); } }
@keyframes lineDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes headerIn { from { transform: translateY(-100%); } to { transform: none; } }
@keyframes softIn  { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.a {
  opacity: 0;
  animation-duration: 1000ms;
  animation-timing-function: var(--ease-standard);
  animation-fill-mode: forwards;
}
.a-hero { animation-name: heroIn; }
.a-fly  { animation-name: chipFly; animation-duration: 1400ms; }
.a-core { animation-name: coreIn;  animation-duration: 1200ms; }
.a-line {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: lineDraw 1800ms var(--ease-standard) 1700ms forwards;
}
.a-header {
  transform: translateY(-100%);
  animation: headerIn 900ms var(--ease-standard) 120ms forwards;
}

/* Second visit inside the session: skip the choreography, soft-fade the hero. */
html.seen .a,
html.seen .a-header { animation: none !important; opacity: 1 !important; transform: none !important; }
html.seen .a-core   { transform: translateX(-50%) !important; }
html.seen .a-line   { stroke-dashoffset: 0 !important; animation: none !important; }
html.seen .hero     { animation: softIn 700ms var(--ease-standard) 60ms both !important; }

@media (prefers-reduced-motion: reduce) {
  .a, .a-header { opacity: 1 !important; animation: none !important; transform: none !important; }
  .a-line { stroke-dashoffset: 0 !important; animation: none !important; }
  /* the core is centred by its own translate — restore it after the reset above */
  .a-core { transform: translateX(-50%) !important; }
  html.seen .hero { animation: none !important; }
}

/* Scroll reveal. The .r class is added by JS, never in the markup, so content
   is visible when scripting is unavailable. */
.r {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1100ms var(--ease-standard), transform 1100ms var(--ease-standard);
}
.r.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .r { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---------------------------------------------------------- 3. buttons ---
   Primary is near-black, never blue. Left icon sits 16px from the label, the
   right arrow badge 48px. */

.btn {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  height: 48px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition:
    background var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard),
    transform 160ms var(--ease-standard),
    box-shadow var(--duration-base) var(--ease-standard);
}
.btn-lg { height: 48px; font-size: 14px; }
.btn-sm { height: 40px; font-size: 13px; }
.btn-r  { gap: 48px; }
.btn-l  { gap: 16px; }

.btn-primary { background: var(--action-solid); border-color: var(--action-solid); color: var(--action-solid-text); }
.btn-primary:hover { background: var(--action-solid-hover); color: var(--action-solid-text); box-shadow: 0 8px 22px rgba(16, 24, 40, .18); }

.btn-stroke { background: var(--white); border-color: var(--border-subtle); color: var(--ink-900); }
.btn-stroke:hover { border-color: var(--border-strong); color: var(--ink-900); box-shadow: 0 6px 18px rgba(16, 24, 40, .10); }

.btn-outline { background: transparent; border-color: rgba(255, 255, 255, .35); color: var(--white); }
.btn-outline:hover { border-color: var(--white); color: var(--white); }

.btn-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--badge, 28px);
  height: var(--badge, 28px);
  flex-shrink: 0;
  border-radius: var(--radius-circle);
  background: var(--white);
  color: var(--ink-900);
  transition: transform var(--duration-base) var(--ease-standard);
}
.btn-dark-badge .btn-badge { background: var(--ink-900); color: var(--white); }

.btn:hover  { transform: var(--hover-lift); }
.btn:active { transform: var(--press-scale); }
.btn-r:hover .btn-badge { transform: translateX(3px); }
.btn-l > svg { flex-shrink: 0; transition: transform var(--duration-base) var(--ease-standard); }
.btn-l:hover > svg { transform: translateX(-2px); }

@media (prefers-reduced-motion: reduce) {
  .btn, .btn-badge, .btn-l > svg { transition: none; transform: none !important; }
}

/* ------------------------------------------------------ 4. primitives --- */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  padding: 7px 14px;
  border: 1px solid;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: var(--text-eyebrow-size);
  font-weight: var(--text-eyebrow-weight);
  line-height: var(--text-eyebrow-lh);
}
.eyebrow-neutral { background: var(--white);   color: var(--gray-600); border-color: var(--border-subtle); }
.eyebrow-brand   { background: var(--blue-50); color: var(--blue-700); border-color: var(--blue-100); }
.eyebrow-diamond {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  background: var(--brand);
  border-radius: 1px;
  transform: rotate(45deg);
}

.tag {
  display: inline-block;
  padding: 5px 10px;
  border-radius: var(--radius-xs);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
}
.tag-green   { background: var(--green-50); color: var(--green-700); }
.tag-blue    { background: var(--blue-50);  color: var(--blue-700); }
.tag-neutral { background: var(--gray-100); color: var(--gray-600); }

/* AppIconChip — white disc, soft radial halo behind it. */
.chipicon { position: relative; display: inline-flex; }
.chipicon-glow {
  position: absolute;
  border-radius: var(--radius-circle);
  background: radial-gradient(circle, var(--glow) 0%, rgba(255, 255, 255, 0) 68%);
}
.chipicon-disc {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--chipicon);
  height: var(--chipicon);
  border-radius: var(--radius-circle);
  background: var(--white);
  box-shadow: var(--shadow-chip);
}
.chipicon-disc img { width: calc(var(--chipicon) * .46); height: auto; }

/* ----------------------------------------------------------- 6. cta bar ---
   Wide image-backed strip, used under the process steps and the FAQ list. */

.ctabar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-radius: var(--radius-md);
  background-image: url(/assets/img/img-6-cta-bg.png);
  background-size: cover;
  background-position: center;
  color: var(--white);
  transition: transform 160ms var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard);
}
.ctabar:hover { transform: var(--hover-lift); color: var(--white); box-shadow: 0 8px 22px rgba(16, 24, 40, .18); }
.ctabar-lg { height: 112px; padding: 0 28px; }
.ctabar-sm { height: 56px;  padding: 0 24px; }
.ctabar-lg .ctabar-label { font-size: 17px; font-weight: 500; }
.ctabar-sm .ctabar-label { font-size: 15px; font-weight: 500; }
.ctabar-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: var(--radius-circle);
  background: var(--white);
  color: #06183C;
}
.ctabar-lg .ctabar-badge { width: 38px; height: 38px; }
.ctabar-sm .ctabar-badge { width: 30px; height: 30px; }

/* ----------------------------------------------------------- 7. header ---
   90px, white. Sticky only on the pages that ask for it; from 8px of scroll it
   picks up a translucent blurred backdrop. */

/* Stacking order, per the handoff: content stays at or below 50, the header
   sits at 100 and its dropdown at 200. Nothing in the page content may go
   above 100, otherwise the menu disappears behind it on subpages. */
.hdrwrap { position: relative; z-index: 100; }
.hdrwrap-sticky { position: sticky; top: 0; }

.hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  box-sizing: border-box;
  height: 90px;
  /* The white bar spans the full width, its contents do not: logo and button
     sit on the same 1280px column as every section and the footer, so the three
     share one edge at any window size. Two things were off before — the header
     had no cap at all and drifted away from the centred page on wide screens
     (253px apart at 1920), and its gutter was 60px where every section and the
     footer use 80px. The prototype was only ever drawn at one canvas width, so
     neither showed up there. */
  padding: 0 max(80px, calc((100% - 1280px) / 2));
  background: var(--white);
  transition:
    background var(--duration-base) var(--ease-standard),
    box-shadow var(--duration-base) var(--ease-standard),
    backdrop-filter var(--duration-base) var(--ease-standard);
}
/* Scrolled state is fully opaque now — no translucency, no backdrop-filter.
   Only a thin shadow edge separates the header from the content. (A
   backdrop-filter would also create a stacking context on the header, which
   the dropdown must not be trapped in.) */
.hdrwrap.is-scrolled .hdr {
  background: var(--white);
  box-shadow: 0 1px 0 rgba(16, 24, 40, .08), 0 8px 24px rgba(16, 24, 40, .06);
}

.hdr-logo { display: inline-flex; align-items: center; border-radius: 6px; }
.hdr-logo img { display: block; height: 32px; width: auto; }

.hdr-nav { display: flex; align-items: center; gap: 38px; }
.hdr-nav a {
  position: relative;
  font-size: 13px;
  color: var(--gray-600);
  transition: color var(--duration-fast) var(--ease-standard);
}
.hdr-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 1.5px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 220ms var(--ease-standard);
}
.hdr-nav a:hover { color: var(--ink-900); }
.hdr-nav a:hover::after { transform: scaleX(1); }
.hdr-nav a.is-active { color: var(--ink-900); }

.hdr-actions { display: flex; align-items: center; gap: 12px; }
.hdr-burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  color: var(--ink-900);
  cursor: pointer;
}

.hdr-menu {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 24px 24px;
  background: var(--white);
  border-bottom: 1px solid var(--border-subtle);
}
.hdr-menu[hidden] { display: none; }
.hdr-menu a { padding: 12px 8px; font-size: 14px; color: var(--ink-900); }
.hdr-menu-cta { margin-top: 14px; }

/* --- Leistungen dropdown ---
   The 18px padding-top on .ddrop is a deliberate hover bridge: it keeps the
   pointer inside the element while travelling from the label down to the
   panel, so the menu does not close in the gap. */
.hasdrop { position: relative; display: inline-flex; }
.hdr-nav .hasdrop > a { display: inline-flex; align-items: center; gap: 6px; }
.hdr-nav .hasdrop > a > svg { transition: transform var(--duration-base) var(--ease-standard); }
.hasdrop.is-open > a > svg { transform: rotate(180deg); }

.ddrop {
  position: absolute;
  left: -18px;
  top: 100%;
  padding-top: 18px;
  z-index: 200;
}
.ddrop[hidden] { display: none; }
.ddrop-panel {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 264px;
  padding: 10px;
  background: var(--white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: 0 18px 44px rgba(16, 24, 40, .14);
  animation: ddIn 200ms var(--ease-out) both;
}
@keyframes ddIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ddrop-panel { animation: none; } }

.dd {
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--ink-900);
  transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}
.dd:hover { background: var(--surface-card); color: var(--brand); }
/* the animated underline belongs to the top-level nav only */
.ddrop a::after { display: none; }
.dd-sep { height: 1px; margin: 6px 12px; background: var(--border-subtle); }
.dd-all {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-weight: 500;
  color: var(--brand);
}
.hdr-menu-sub { padding-left: 22px !important; color: var(--gray-600) !important; }

/* ----------------------------------------------------------- 8. footer ---
   Runs straight on from the dark CTA band with no dividing rule. */

/* overflow:hidden — the reveal animation starts 40px lower; without this the
   offset extends the document and leaves a white strip under the footer. */
.ftr { background: #080C14; padding: 80px 80px 28px; overflow: hidden; }
.fgrid {
  width: 1280px;
  max-width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 64px;
  align-items: start;
}
.fbrand { display: flex; flex-direction: column; gap: 20px; }
.fbrand-logo { display: inline-flex; align-items: center; gap: 12px; }
.fbrand-logo img { width: 34px; height: 34px; }
.fbrand-logo span { font-size: 17px; font-weight: 700; letter-spacing: -.01em; color: var(--white); }
.fbrand-text {
  margin: 0;
  max-width: 320px;
  font-size: 13px;
  line-height: 1.75;
  color: rgba(255, 255, 255, .62);
}

.fcol { display: flex; flex-direction: column; gap: 12px; }
.fcontact { gap: 14px; }
.fcol a,
.fcol .fline,
.flink {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .62);
  transition: color var(--duration-fast) var(--ease-standard);
}
.fcol a:hover, .flink:hover { color: var(--white); }
.flink { padding: 0; background: none; border: none; text-align: left; cursor: pointer; }
.fhead {
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
}
.fdisc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: var(--radius-circle);
  background: var(--white);
  color: #080C14;
  transition: transform var(--duration-base) var(--ease-standard);
}
.fcontact a:hover .fdisc { transform: scale(1.08); }
.fcta { margin-top: 12px; }

.fbottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  width: 1280px;
  max-width: 100%;
  margin: 64px auto 0;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .08);
}
.fcopy { font-size: 12px; color: rgba(255, 255, 255, .45); }
.fcopy a { color: var(--brand); font-weight: 500; }
.fcopy a:hover { color: var(--blue-300); }
.fkeywords { font-size: 12px; color: rgba(255, 255, 255, .62); }
.ftop {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 40px;
  padding: 0 16px 0 6px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--white);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-standard), transform 160ms var(--ease-standard);
}
.ftop:hover { border-color: var(--white); transform: var(--hover-lift); }

/* -------------------------------------------------- 9. cookie consent ---
   Refusing has to be as easy as consenting (GDPR): "Nur notwendige" and
   "Alle akzeptieren" sit side by side. Do not restyle one to win. */

@keyframes ccIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes ccUp { from { opacity: 0; transform: translateY(24px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }

.cc[hidden] { display: none; }
.cc-ov {
  position: fixed;
  inset: 0;
  z-index: 400;              /* modal — above header (100) and dropdown (200) */
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 24px;
  background: rgba(8, 12, 20, .55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: ccIn 320ms var(--ease-standard) both;
}
.cc-card {
  width: 560px;
  max-width: 100%;
  max-height: 86vh;
  overflow: auto;
  background: var(--white);
  border-radius: 20px;
  box-shadow: 0 30px 80px rgba(8, 12, 20, .32);
  padding: 36px 38px 30px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  animation: ccUp 420ms var(--ease-out) both;
}
.cc-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-circle);
  background: var(--blue-50);
  color: var(--brand);
}
.cc-card h2 { margin: 0; font-size: 21px; line-height: 1.3; letter-spacing: -.01em; font-weight: 600; color: var(--ink-900); }
.cc-intro { margin: 0; font-size: 14px; line-height: 1.75; color: var(--text-body); text-wrap: pretty; }
.cc-details { display: flex; flex-direction: column; margin-top: 2px; }
.cc-details[hidden] { display: none; }
.cc-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 0;
  border-top: 1px solid var(--border-subtle);
}
.cc-rowtext { display: flex; flex-direction: column; gap: 4px; }
.cc-rowtitle { font-size: 14px; font-weight: 600; color: var(--ink-900); }
.cc-rowbody { font-size: 13px; line-height: 1.6; color: var(--text-body); }
.cc-always {
  flex-shrink: 0;
  margin-top: 2px;
  padding: 5px 12px;
  background: var(--surface-card);
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 500;
  color: var(--gray-600);
}
.cc-switch {
  flex-shrink: 0;
  margin-top: 2px;
  width: 46px;
  height: 26px;
  padding: 3px;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--gray-300);
  cursor: pointer;
  display: flex;
  justify-content: flex-start;
  transition: background var(--duration-base) var(--ease-standard);
}
.cc-switch[aria-checked="true"] { background: var(--brand); justify-content: flex-end; }
.cc-knob {
  display: block;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-circle);
  background: var(--white);
  box-shadow: 0 1px 3px rgba(8, 12, 20, .3);
}
.cc-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 6px;
}
.cc-btn {
  display: inline-flex;
  align-items: center;
  height: 44px;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 180ms var(--ease-standard), border-color 180ms var(--ease-standard), transform 160ms var(--ease-standard);
}
.cc-btn:hover { transform: var(--hover-lift); }
.cc-btn-ghost { padding: 0 20px; background: var(--white); border: 1px solid var(--border-subtle); color: var(--ink-900); }
.cc-btn-ghost:hover { border-color: var(--border-strong); }
.cc-btn-solid { gap: 14px; padding: 0 8px 0 20px; background: var(--action-solid); border: 1px solid var(--action-solid); color: var(--white); }
.cc-btn-solid:hover { background: var(--action-solid-hover); }
.cc-save[hidden] { display: none; }
.cc-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-circle);
  background: var(--white);
  color: var(--ink-900);
}
.cc-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border-subtle);
}
.cc-foot a, .cc-link {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--gray-600);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cc-foot a:hover, .cc-link:hover { color: var(--ink-900); }
.cc-link { padding: 0; background: none; border: none; cursor: pointer; }
.cc-link[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .cc-ov, .cc-card { animation: none !important; }
  .cc-btn:hover { transform: none; }
}

/* ------------------------------------------- 10. home page sections ------ */

/* --- hero (#start) --- */

.hero {
  position: relative;
  overflow: hidden;
  background: var(--surface-subtle);
  padding: 64px 60px 40px;
  min-height: 1024px;
  display: flex;
  align-items: flex-start;
}
.hero-inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 22px;
}
.hero h1 {
  margin: 0;
  max-width: 900px;
  font-size: var(--text-display-size);
  line-height: var(--text-display-lh);
  letter-spacing: var(--text-display-ls);
  font-weight: 500;
}
.hero-lead {
  margin: 0;
  max-width: 620px;
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
  color: var(--text-body);
}
.btnrow { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 8px; }

.constellation { position: relative; width: 100%; height: 440px; margin-top: 72px; }
.constellation svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.constellation img { position: absolute; }
.a-core { left: 50%; top: 152px; transform: translateX(-50%); }
.const-chip {
  position: absolute;
  display: inline-flex;
  width: 114px;
  height: 114px;
  align-items: center;
  justify-content: center;
}

/* --- typische Themen (#themen) --- */

.themen { padding: 110px 60px 100px; }
.themen-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.themen h2 {
  margin: 8px 0 0;
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-lh);
  letter-spacing: var(--text-h3-ls);
  font-weight: 500;
}
.themen > .themen-inner > p { margin: 0; font-size: var(--text-small-size); color: var(--text-muted); }

.orbit { position: relative; width: 100%; max-width: 1000px; height: 720px; margin-top: 8px; }
.ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--ring);
  height: var(--ring);
  transform: translate(-50%, -50%);
  border-radius: var(--radius-pill);
  background: rgba(38, 108, 248, var(--ring-a));
  animation: ringPulse 6000ms cubic-bezier(.4, 0, .6, 1) infinite;
}
@keyframes ringPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(.94); opacity: .35; }
  50%      { transform: translate(-50%, -50%) scale(1.09); opacity: 1; }
}
/* offset 480ms each, running outermost inward */
.ring:nth-of-type(1) { animation-delay: 0ms; }
.ring:nth-of-type(2) { animation-delay: 480ms; }
.ring:nth-of-type(3) { animation-delay: 960ms; }
.ring:nth-of-type(4) { animation-delay: 1440ms; }
@media (prefers-reduced-motion: reduce) { .ring { animation: none !important; } }

.orbit .core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 108px;
  height: 108px;
  transform: translate(-50%, -50%);
}

.chip {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  white-space: nowrap;
  z-index: 1;
  transition: transform var(--duration-fast) var(--ease-standard);
}
/* Raising the hovered chip is done in CSS alone — never with an inline z-index
   from JavaScript. An inline value beats this rule and drops out on any render
   path that does not carry the state, which slides the panel behind its
   neighbours. :focus-within keeps the order right for keyboard use. */
.orbit .chip:hover,
.orbit .chip:focus-within,
.orbit .chip.is-open { z-index: 30; }
.chip-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  background: var(--white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-card);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-900);
  cursor: pointer;
  transition: background var(--duration-base) var(--ease-standard),
              border-color var(--duration-base) var(--ease-standard),
              color var(--duration-base) var(--ease-standard);
}
.chip-diamond {
  width: 9px;
  height: 9px;
  flex-shrink: 0;
  background: var(--brand);
  border-radius: 1px;
  transform: rotate(45deg);
}
.chip:hover .chip-btn,
.chip.is-open .chip-btn { background: #06183C; border-color: #06183C; color: var(--white); }
.chip:hover .chip-btn svg,
.chip.is-open .chip-btn svg { stroke: var(--white); }
.chip:hover { transform: translate(-50%, -50%) translateY(-1px); }

/* Hidden in CSS rather than with the `hidden` attribute, so hover and keyboard
   focus open it with no JavaScript involved. */
.chip-detail {
  display: none;
  position: absolute;
  left: 50%;
  top: calc(100% + 12px);
  transform: translateX(-50%);
  width: 300px;
  padding: 16px 18px;
  background: #06183C;
  color: var(--white);
  border-radius: var(--radius-md);
  font-size: 13px;
  line-height: 1.65;
  text-align: left;
  white-space: normal;
  z-index: 5;
}
.chip:hover .chip-detail,
.chip:focus-within .chip-detail,
.chip.is-open .chip-detail { display: block; }

/* --- Leistungen (#leistungen) --- */

.leistungen { padding: 0 80px 120px; }
.g4 {
  width: 1280px;
  max-width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  grid-auto-rows: minmax(209px, auto);
  align-items: stretch;
}
.lead {
  grid-column: 1 / span 2;
  grid-row: 1;
  margin-top: -73px;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-right: 60px;
}
.lead h2 {
  margin: 0;
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-lh);
  letter-spacing: var(--text-h2-ls);
  font-weight: 500;
}
.lead p { margin: 0; max-width: 330px; font-size: var(--text-small-size); line-height: 1.7; color: var(--text-body); }

.svc {
  grid-column: var(--col);
  grid-row: var(--row);
  display: grid;
  border-radius: var(--radius-md);
  transition: transform var(--duration-base) var(--ease-standard);
}
.svc:hover { transform: var(--hover-lift); }
.svc-card {
  height: 100%;
  overflow: hidden;
  padding: 20px 22px;
  background: var(--surface-card);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  transition: background var(--duration-base) var(--ease-standard);
}
.svc-card h3 { margin: 0; color: var(--brand); font-size: 15px; font-weight: 600; letter-spacing: -.005em; }
.svc-card p { margin: 0; color: var(--text-body); font-size: 13px; line-height: 1.55; }

.tile {
  grid-column: var(--col);
  grid-row: var(--row);
  align-self: stretch;
  display: grid;
  min-height: 200px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--blue-100);
}
.tile img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --- Technische Tiefe (#tiefe) --- */

.tiefe { padding: 0 60px 120px; }
.tiefe-inner { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.tiefe h2 {
  margin: 20px 0 0;
  text-align: center;
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-lh);
  letter-spacing: var(--text-h2-ls);
  font-weight: 500;
}
.tiefe-lead {
  margin: 18px 0 48px;
  max-width: 470px;
  text-align: center;
  font-size: var(--text-small-size);
  line-height: 1.7;
  color: var(--text-body);
}
.depth {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  width: 886px;
  max-width: 100%;
}
/* White type sits straight on the photograph — no scrim, no gradient. */
.feat {
  position: relative;
  overflow: hidden;
  height: var(--feat-h);
  padding: 26px;
  border-radius: var(--radius-md);
  background: var(--blue-800);
  color: var(--white);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.feat-tall { grid-row: span 2; }
.feat img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.feat h3 { position: relative; margin: 0; color: var(--white); font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.feat p  { position: relative; margin: 0; max-width: 300px; color: rgba(255, 255, 255, .92); font-size: 13px; line-height: 1.65; }

/* --- Security (#security) --- */

.security { padding: 0 80px 120px; }
.security-inner { width: 1280px; max-width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 40px; }
.split { display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.split-text { display: flex; flex-direction: column; gap: 16px; }
.split-action { margin-top: 47px; }
.security h2 {
  margin: 0;
  max-width: 640px;
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-lh);
  letter-spacing: var(--text-h2-ls);
  font-weight: 500;
}
.security .split-text p { margin: 0; max-width: 520px; font-size: var(--text-small-size); line-height: 1.7; color: var(--text-body); }

.g3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.seccard {
  background: var(--white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 24px 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.seccard-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: var(--radius-circle);
  background: var(--brand);
  color: var(--white);
}
.seccard h3 { margin: 0; color: #06183C; font-size: 15px; font-weight: 600; letter-spacing: -.005em; }
.seccard p { margin: 0; font-size: 13px; line-height: 1.7; color: var(--text-body); }

/* --- Ablauf (#ablauf) --- */

.ablauf { overflow: hidden; background: var(--surface-subtle); padding: 110px 80px; }
.mark { position: absolute; width: 420px; height: auto; pointer-events: none; }
.ablauf .mark {
  left: -105px;
  bottom: 40px;
  transform: translateY(var(--py, 0)) rotate(15deg);
  transform-origin: left bottom;
}
.sec { position: relative; }
.split.ablauf-grid {
  position: relative;
  width: 1280px;
  max-width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}
.ablauf .split-text { gap: 18px; }
.ablauf h2 {
  margin: 0;
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-lh);
  letter-spacing: var(--text-h2-ls);
  font-weight: 500;
}
.ablauf .split-text p { margin: 0; max-width: 330px; font-size: var(--text-small-size); line-height: 1.7; color: var(--text-body); }
.steps { display: flex; flex-direction: column; gap: 32px; }
.step {
  box-sizing: border-box;
  height: 112px;
  display: flex;
  gap: 20px;
  align-items: center;
  background: var(--white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 22px 24px;
}
.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: var(--radius-circle);
  background: var(--blue-50);
  color: var(--brand);
  font-size: 15px;
  font-weight: 600;
}
.step-text { display: flex; flex-direction: column; gap: 6px; }
.step-text h3 { margin: 0; font-size: 15px; font-weight: 600; color: var(--ink-900); }
.step-text p { margin: 0; font-size: 13px; line-height: 1.65; color: var(--text-body); }

/* --- Zielgruppen (#zielgruppen) --- */

.zg { background: #080C14; padding: 110px 80px; min-height: 1024px; display: flex; align-items: stretch; }
/* No flex-grow here: the prototype declares `flex:1` and `width:1280px` in the
   same rule, and flex-grow wins — so the band stretched to the full window
   while every other section stayed on the 1280px column. At the canvas width
   the design was drawn at, both produce 1280px, which is why it never showed.
   The declared width is the intent, so that is what is kept; `align-items:
   stretch` on .zg still gives the column its full height. */
.zg-inner { width: 1280px; max-width: 100%; margin: 0 auto; display: flex; flex-direction: column; }
.zg-head { margin-bottom: 56px; }
.zg h2 {
  margin: 0;
  max-width: 640px;
  color: var(--white);
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-lh);
  letter-spacing: var(--text-h2-ls);
  font-weight: 500;
}
.zg-head p { margin: 0; max-width: 520px; font-size: var(--text-small-size); line-height: 1.7; color: rgba(255, 255, 255, .7); }
.zrow {
  flex: 1;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 48px;
  align-content: center;
  align-items: center;
  padding: 28px 32px;
  margin-bottom: 16px;
  background: #0B111B;
  border-radius: var(--radius-md);
  /* keeps the reveal transition when .r is added on top */
  transition: background var(--duration-base) var(--ease-standard),
              opacity 1100ms var(--ease-standard),
              transform 1100ms var(--ease-standard);
}
.zrow:hover { background: #111926; }
.znum {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-circle);
  background: var(--brand);
  color: var(--white);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -.01em;
  transition: transform var(--duration-base) var(--ease-standard);
}
.zrow:hover .znum { transform: scale(1.06); }
.ztext { display: flex; flex-direction: column; gap: 24px; }
.ztext h3 {
  margin: 0;
  font-size: var(--text-h4-size);
  line-height: var(--text-h4-lh);
  letter-spacing: var(--text-h4-ls);
  font-weight: 600;
  color: var(--white);
  transition: color var(--duration-base) var(--ease-standard);
}
.zrow:hover h3 { color: var(--blue-300); }
.ztext p {
  margin: 0;
  max-width: 360px;
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
  color: rgba(255, 255, 255, .72);
  text-wrap: pretty;
}
.zlist { display: flex; flex-direction: column; gap: 24px; margin: 0; padding: 0; list-style: none; }
.zlist li { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.6; color: rgba(255, 255, 255, .72); }
.zdot { width: 8px; height: 8px; flex-shrink: 0; margin-top: 6px; background: var(--brand); border-radius: 1px; transform: rotate(45deg); }

/* --- Über uns (#ueber-uns) --- */

.about { padding: 120px 80px 0; }
.about-inner { width: 1280px; max-width: 100%; margin: 0 auto; }
.abouttop {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: 64px;
  align-items: end;
  padding-bottom: 56px;
}
.abouttop-text { display: flex; flex-direction: column; gap: 22px; }
.abouth { margin: 0; max-width: 900px; font-size: 52px; line-height: 1.1; letter-spacing: -.03em; font-weight: 500; text-wrap: pretty; }
.abouth a {
  color: var(--brand);
  border-bottom: 2px solid rgba(38, 108, 248, .25);
  transition: border-color var(--duration-fast) var(--ease-standard);
}
.abouth a:hover { border-color: var(--brand); }
.abouttop-lead { margin: 0 0 6px; font-size: var(--text-body-size); line-height: 1.8; color: var(--text-body); text-wrap: pretty; }

.aboutband {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #06183C;
}
.aboutpanel {
  position: relative;
  overflow: hidden;
  min-height: 340px;
  padding: 56px 56px 60px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 44px;
}
.aboutpanel-mark { position: absolute; right: -90px; bottom: -70px; width: 340px; height: auto; opacity: .07; transform: rotate(15deg); pointer-events: none; }
.aboutpanel-top { position: relative; display: flex; flex-direction: column; gap: 18px; }
.aboutpanel-label { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .5); }
.aboutpanel-addr { margin: 0; max-width: 420px; font-size: 26px; line-height: 1.35; letter-spacing: -.02em; font-weight: 500; color: var(--white); text-wrap: pretty; }
.aboutpanel-bottom { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.aboutpanel-note { font-size: 13px; color: rgba(255, 255, 255, .55); }

.aboutfacts { background: var(--white); padding: 48px 46px; display: grid; grid-template-columns: 1fr 1fr; gap: 38px 34px; align-content: center; }
.fact { display: flex; flex-direction: column; gap: 10px; }
.fact-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-circle);
  background: var(--brand);
  color: var(--white);
}
.fact-label { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.fact-value { font-size: 15px; line-height: 1.5; font-weight: 600; color: var(--ink-900); }

/* --- Kundenstimmen (#stimmen) --- */

.stimmen { padding: 110px 80px 120px; overflow: hidden; }
.stimmen-inner { width: 1280px; max-width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 48px; }
.stimmen-head { display: flex; flex-direction: column; gap: 16px; }
.quotemark {
  display: block;
  margin-top: 22px;
  font-size: 104px;
  line-height: .55;
  font-weight: 700;
  color: var(--gray-300);
  transform: rotate(15deg);
  transform-origin: left center;
}
.stimmen h2 {
  margin: 0;
  max-width: 560px;
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-lh);
  letter-spacing: var(--text-h3-ls);
  font-weight: 500;
}
.stimmen-head p { margin: 0; max-width: 420px; font-size: var(--text-small-size); line-height: 1.7; color: var(--text-body); }

.trailclip { overflow: visible; }
.trail {
  display: flex;
  gap: 16px;
  align-items: stretch;
  transform: translateX(calc(var(--t, 0) * -416px));
  transition: transform 520ms var(--ease-standard);
}
.tcard {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
  margin: 0;
  flex: 0 0 400px;
  min-width: 0;
  min-height: 236px;
  padding: 30px 32px;
  background: var(--surface-card);
  border-radius: var(--radius-md);
  transition: background var(--duration-base) var(--ease-standard), transform 220ms var(--ease-standard);
}
.tcard:hover { transform: translateY(-3px); }
.tq { margin: 0; font-size: 17px; line-height: 1.5; letter-spacing: -.01em; color: var(--ink-900); text-wrap: pretty; transition: color var(--duration-base) var(--ease-standard); }
.tcard figcaption { display: flex; align-items: center; gap: 12px; }
.tav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: var(--radius-circle);
  background: var(--brand);
  color: var(--white);
  font-size: 13px;
  font-weight: 600;
  transition: background var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard);
}
.tmeta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tname { font-size: 13px; font-weight: 600; color: var(--ink-900); transition: color var(--duration-base) var(--ease-standard); }
.trole { font-size: 12px; color: var(--text-muted); transition: color var(--duration-base) var(--ease-standard); }

.tcard.is-active { background: var(--action-solid); }
.tcard.is-active .tq    { color: var(--white); }
.tcard.is-active .tav   { background: var(--white); color: var(--ink-900); }
.tcard.is-active .tname { color: var(--white); }
.tcard.is-active .trole { color: rgba(255, 255, 255, .6); }

.trailnav { display: flex; flex-direction: column; gap: 24px; }
.trailbar { position: relative; height: 3px; background: var(--border-subtle); border-radius: 3px; }
.trailbar-fill { position: absolute; left: 0; top: 0; height: 3px; border-radius: 3px; background: var(--brand); transition: width 520ms var(--ease-standard); }
.trailbtns { display: flex; gap: 10px; }
.nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--brand);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  color: var(--white);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard),
              transform 160ms var(--ease-standard);
}
.nav:hover { transform: translateY(-1px); }
.nav:active { transform: scale(.96); }
.nav[disabled] { background: transparent; color: #c9ccd0; cursor: default; transform: none; }

/* --- Wissen & Praxis (#blog) --- */

.blog { padding: 110px 80px; }
.blog-inner { width: 1280px; max-width: 100%; margin: 0 auto; }
.blog-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 34px; }
.blog-head .split-text { gap: 12px; }
.blog h2 {
  margin: 0;
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-lh);
  letter-spacing: var(--text-h3-ls);
  font-weight: 500;
}

.pcard {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface-card);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard);
}
.pcard::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-md);
  border: 1.5px solid transparent;
  pointer-events: none;
  transition: border-color var(--duration-base) var(--ease-standard);
}
.pcard:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(16, 24, 40, .10); }
.pcard:hover::after { border-color: var(--brand); }
.pcard:hover h3 { color: var(--brand); }
.pcard-media { position: relative; width: 100%; height: 200px; overflow: hidden; }
.pcard-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 600ms var(--ease-standard); }
.pcard:hover .pcard-media img { transform: scale(1.06); }
.pcard-body { display: flex; flex-direction: column; gap: 16px; padding: 20px 22px 24px; flex: 1; }
.pcard-meta { display: flex; align-items: center; gap: 12px; }
.pcard-meta time { font-size: 12px; color: var(--text-muted); }
.pcard h3 {
  margin: 0;
  font-size: 17px;
  line-height: 1.35;
  font-weight: 600;
  color: var(--ink-900);
  letter-spacing: -.01em;
  transition: color var(--duration-base) var(--ease-standard);
}
.pcard-body p { margin: 0; font-size: 13px; line-height: 1.7; color: var(--text-body); flex: 1; }
.pcard-more { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--brand); }

@media (prefers-reduced-motion: reduce) {
  .pcard:hover, .pcard:hover .pcard-media img, .tcard:hover, .svc:hover { transform: none; }
}

/* --- FAQ (#faq) --- */

.faq { background: var(--surface-subtle); padding: 110px 80px; }
.split.faq-grid {
  width: 1280px;
  max-width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 80px;
  align-items: stretch;
}
.faq-side { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; }
.faq-head { display: flex; flex-direction: column; gap: 16px; }
.faq h2 {
  margin: 0;
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-lh);
  letter-spacing: var(--text-h3-ls);
  font-weight: 500;
}
.faq-ask {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 28px 30px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
}
.faq-ask p { margin: 0; max-width: 280px; font-size: var(--text-lead-size); line-height: var(--text-lead-lh); color: var(--ink-700); text-wrap: pretty; }

.faqlist { display: flex; flex-direction: column; gap: 24px; }
/* Built on <details> so the answers ship in the HTML and work without JS. */
.acc {
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 18px 22px;
  transition: padding var(--duration-base) var(--ease-standard);
}
.acc[open] { padding: 18px 22px 22px; }
.acc summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  list-style: none;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--ink-900);
}
.acc summary::-webkit-details-marker { display: none; }
.acc-sign { display: inline-flex; flex-shrink: 0; color: var(--brand); }
.acc[open] .acc-bar { display: none; }   /* plus becomes minus */
.acc p { margin: 14px 0 0; max-width: 620px; font-size: 13px; line-height: 1.75; color: var(--text-body); }

/* --- CTA band (#kontakt) --- */

.cta { overflow: hidden; background: #080C14; padding: 130px 80px; }
.cta-mark { right: -90px; top: -60px; opacity: .06; transform: translateY(var(--py, 0)) rotate(-15deg); }
.cta-inner {
  position: relative;
  width: 1280px;
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 20px;
}
.cta h2 {
  margin: 0;
  max-width: 680px;
  color: var(--white);
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-lh);
  letter-spacing: var(--text-h2-ls);
  font-weight: 500;
}
.cta-inner > p { margin: 0; max-width: 520px; font-size: var(--text-body-size); line-height: var(--text-body-lh); color: rgba(255, 255, 255, .7); }
.cta-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 24px; margin-top: 12px; }

/* ------------------------------------------ 10b. inner pages ------------- */

/* Inner pages fade up as a whole instead of running the home choreography. */
@keyframes pageIn  { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes crumbIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
.a-page  { animation: pageIn 900ms var(--ease-standard) 60ms both; }
.a-crumb { animation: crumbIn 700ms var(--ease-standard) both; }
.a-page > .crumbsec { animation: crumbIn 700ms var(--ease-standard) 260ms both; }
@media (prefers-reduced-motion: reduce) {
  .a-page, .a-crumb, .a-page > .crumbsec { animation: none !important; }
}

/* --- breadcrumb --- */
.crumbsec { padding: 24px 80px 0; }
.crumbs { width: 1280px; max-width: 100%; margin: 0 auto; }
.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
  color: var(--text-muted);
}
.crumbs a { color: var(--gray-600); }
.crumbs a:hover { color: var(--ink-900); }

/* --- inner page hero --- */
.pagehero { padding: 44px 80px 56px; }
.pagehero-inner { width: 1280px; max-width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }
.pagehero h1 {
  margin: 0;
  max-width: 760px;
  font-size: var(--text-h1-size);
  line-height: var(--text-h1-lh);
  letter-spacing: var(--text-h1-ls);
  font-weight: 500;
}
.pagehero p {
  margin: 0;
  max-width: 600px;
  font-size: var(--text-lead-size);
  line-height: var(--text-lead-lh);
  color: var(--text-body);
  text-wrap: pretty;
}

/* --- white button + reversed badge (dark CTA bands, form submit) --- */
.btn-white { background: var(--white); border-color: var(--white); color: var(--ink-900); }
.btn-white:hover { background: var(--white); color: var(--ink-900); box-shadow: 0 8px 22px rgba(8, 12, 20, .28); }
.btn-rev { flex-direction: row; padding: 0 22px 0 6px; }
.btn-rev.btn-r { gap: 48px; }
.btn-rev.btn-sm { height: 44px; padding: 0 20px 0 6px; gap: 16px; }
.btn-rev:hover .btn-badge { transform: translateX(-3px); }
.btn-inline { font-size: 13px; }

/* --- dark CTA band, shared by blog / faq / articles --- */
.darkcta { background: #080C14; padding: 110px 80px; }
.darkcta-inner {
  width: 1280px;
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 20px;
}
.darkcta h2 {
  margin: 0;
  max-width: 640px;
  color: var(--white);
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-lh);
  letter-spacing: var(--text-h2-ls);
  font-weight: 500;
}
.darkcta p { margin: 0; max-width: 520px; font-size: var(--text-body-size); line-height: var(--text-body-lh); color: rgba(255, 255, 255, .72); }
.darkcta .btnrow { margin-top: 8px; }

/* --- filter chips --- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fchip {
  height: 36px;
  padding: 0 16px;
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-600);
  transition: background var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard),
              transform 160ms var(--ease-standard);
}
.fchip:hover { border-color: var(--border-strong); color: var(--ink-900); transform: translateY(-1px); }
.fchip.is-on { background: var(--action-solid); border-color: var(--action-solid); color: var(--white); }
.fchip.is-on:hover { background: var(--action-solid-hover); border-color: var(--action-solid-hover); color: var(--white); }
.filter-empty { margin: 0; padding: 40px 0; text-align: center; font-size: 14px; color: var(--text-muted); }
.filter-empty[hidden] { display: none; }

/* --- blog overview: featured slider --- */
.fsec { padding: 0 80px 64px; }
.fsec-inner { width: 1280px; max-width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 24px; }
.fsec-nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.dots { display: flex; gap: 8px; }
.dot {
  width: 28px;
  height: 6px;
  padding: 0;
  background: var(--border-subtle);
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard), width var(--duration-base) var(--ease-standard);
}
.dot:hover { background: var(--border-strong); }
.dot.is-on { width: 40px; background: var(--brand); }
.dot:active { transform: scale(.96); }

/* padding/margin pair keeps the card's hover shadow from being clipped */
.fclip { overflow: hidden; padding: 8px 0; margin: -8px 0; }
.ftrack { display: flex; transform: translateX(calc(var(--f, 0) * -100%)); transition: transform 520ms var(--ease-standard); }
.fslide { flex: 0 0 100%; min-width: 0; display: block; color: inherit; }
.fslide-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  background: var(--surface-card);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.fslide-media { position: relative; min-height: 380px; overflow: hidden; }
.fslide-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 600ms var(--ease-standard); }
.fslide:hover .fslide-media img { transform: scale(1.06); }
.fslide-text { display: flex; flex-direction: column; gap: 20px; padding: 48px 52px; justify-content: center; }
.fslide-text h2 {
  margin: 0;
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-lh);
  letter-spacing: var(--text-h3-ls);
  font-weight: 500;
  color: var(--ink-900);
  transition: color var(--duration-base) var(--ease-standard);
}
.fslide:hover h2 { color: var(--brand); }
.fslide-text p { margin: 0; max-width: 440px; font-size: 14px; line-height: 1.75; color: var(--text-body); text-wrap: pretty; }
.fslide .pcard-meta span { font-size: 12px; color: var(--text-muted); }
.fslide .pcard-more { gap: 10px; }

/* --- blog overview: grid --- */
.bloggrid { padding: 0 80px 120px; }
.bloggrid-inner { width: 1280px; max-width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 32px; }
.bloggrid-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.bloggrid-head h2 { margin: 0; font-size: var(--text-h4-size); line-height: var(--text-h4-lh); font-weight: 600; }
.pcard[hidden] { display: none; }

/* Placeholder for artwork that has not been delivered yet. Keeps the frame and
   says so plainly, instead of a broken image icon. */
.imgslot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 160px;
  background: repeating-linear-gradient(-45deg, var(--gray-100) 0 10px, var(--gray-50) 10px 20px);
  color: var(--gray-500);
}
.imgslot-label {
  padding: 6px 12px;
  background: var(--white);
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .02em;
}

/* --- article --- */
.measure { width: 720px; max-width: 100%; margin: 0 auto; }
.posthead { padding: 48px 80px 0; }
.posthead .measure { display: flex; flex-direction: column; gap: 18px; }
.posthead h1 {
  margin: 0;
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-lh);
  letter-spacing: var(--text-h2-ls);
  font-weight: 500;
}
.post-lede { margin: 0; font-size: 14px; line-height: 1.75; color: var(--text-body); text-wrap: pretty; }

.pmeta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding: 18px 0;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}
.pmeta-author { display: flex; align-items: center; gap: 12px; }
.pmeta-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: var(--radius-circle);
  background: var(--brand);
  color: var(--white);
  font-size: 12px;
  font-weight: 600;
}
.pmeta-who { display: flex; flex-direction: column; gap: 2px; }
.pmeta-label { font-size: 12px; color: var(--text-muted); }
.pmeta-name { font-size: 13px; font-weight: 600; color: var(--ink-900); }
.pmeta-pills { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pill {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 14px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  font-size: 12px;
  color: var(--text-muted);
}
.pill-strong { color: var(--ink-900); }

.posthero { padding: 32px 80px 0; }
.posthero-frame { position: relative; height: 400px; border-radius: var(--radius-md); overflow: hidden; }
.posthero-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }

.postbody { padding: 40px 80px 96px; }
.summary { margin: 0 0 32px; padding: 22px 24px; background: var(--surface-card); border-radius: var(--radius-md); }
.summary-label {
  display: block;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.summary p { margin: 0; font-size: 14px; line-height: 1.75; color: var(--ink-700); }

/* Prose. Mono is reserved for configuration values — DNS records, connector
   names — never for emphasis. */
.prose h2 { margin: 48px 0 16px; font-size: 24px; line-height: 1.3; letter-spacing: -.015em; font-weight: 600; color: var(--ink-900); }
.prose h3 { margin: 32px 0 12px; font-size: 17px; line-height: 1.4; font-weight: 600; color: var(--ink-900); }
.prose p  { margin: 0 0 18px; font-size: 15px; line-height: 1.8; color: var(--text-body); text-wrap: pretty; }
.prose ul { margin: 0 0 18px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.prose li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.7; color: var(--text-body); }
.prose li::before {
  content: "";
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  margin-top: 9px;
  background: var(--brand);
  border-radius: 1px;
  transform: rotate(45deg);
}
.prose code { font-family: var(--font-mono); font-size: 13px; padding: 2px 6px; background: var(--surface-card); border-radius: 4px; color: var(--ink-900); }
.prose strong { font-weight: 600; color: var(--ink-900); }

.svcrefs { margin-top: 44px; }
.svcrefs-label {
  display: block;
  margin-bottom: 16px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.svcrefs-list { display: flex; flex-direction: column; gap: 10px; }
.svcref {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 20px;
  background: var(--surface-card);
  border-radius: var(--radius-md);
  color: var(--ink-900);
  transition: background var(--duration-base) var(--ease-standard), transform 160ms var(--ease-standard);
}
.svcref:hover { background: var(--blue-50); color: var(--ink-900); transform: translateY(-2px); }
.svcref svg { flex-shrink: 0; }
.svcref-text { display: flex; flex-direction: column; gap: 4px; }
.svcref-title { font-size: 14px; font-weight: 600; }
.svcref-body { font-size: 13px; line-height: 1.6; color: var(--text-body); }
@media (hover: none) { .svcref:hover { background: var(--surface-card); transform: none; } }

.inlinecta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 44px;
  padding: 26px 28px;
  background: var(--surface-card);
  border-radius: var(--radius-md);
}
.inlinecta > span { max-width: 340px; font-size: 14px; line-height: 1.65; color: var(--ink-700); }

.sharerow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 44px;
  padding-top: 26px;
  border-top: 1px solid var(--border-subtle);
}
.sharerow-label { font-size: 13px; font-weight: 500; color: var(--ink-900); }
.sharerow-btns { display: flex; gap: 10px; }
.share {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-circle);
  cursor: pointer;
  color: var(--gray-600);
  transition: background var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard),
              transform 160ms var(--ease-standard);
}
.share:hover { background: var(--brand); border-color: var(--brand); color: var(--white); }
.share:active { transform: scale(.95); }
.copied { margin: 14px 0 0; font-size: 12px; color: var(--brand); }
.copied[hidden] { display: none; }

/* --- related posts --- */
.related { padding: 0 80px 120px; }
.related-inner { width: 1280px; max-width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 32px; }
.related-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border-subtle);
}
.related-head h2 { margin: 0; font-size: var(--text-h4-size); line-height: var(--text-h4-lh); font-weight: 600; }
.rcard .pcard-media { height: 180px; }
.rcard .pcard-body { gap: 12px; }
.rcard-meta { font-size: 12px; color: var(--text-muted); }
.rcard h3 { font-size: 16px; line-height: 1.4; }

/* --- FAQ page --- */
.faqpage { padding: 80px; background: var(--surface-subtle); }
.faq-side-top { justify-content: flex-start; }
.faq-side-top .faq-head { gap: 22px; }
.faq-side-top h2 {
  margin: 0;
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-lh);
  letter-spacing: var(--text-h3-ls);
  font-weight: 500;
}
.faqpage .split.faq-grid { align-items: start; }
.acc[hidden] { display: none; }
/* FAQ numbering follows the filtered list: the counter only advances over
   items that are actually visible, so every tab starts at 1. */
.faqlist { counter-reset: faq; }
.faqlist .acc:not([hidden]) { counter-increment: faq; }
.faqlist .acc > summary > span:first-child::before { content: counter(faq) ". "; }


/* on the contact page the panels sit on grey instead of white */
.faqlist-grey .acc { background: var(--surface-card); }

/* --- contact page --- */
.contact { padding: 40px 80px 110px; }
.contact-inner { width: 1280px; max-width: 100%; margin: 0 auto; padding: 32px 0 0; }
.split.contact-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 80px; align-items: center; }
.contact-text { display: flex; flex-direction: column; gap: 22px; }
.contact-text h1 {
  margin: 0;
  max-width: 420px;
  font-size: var(--text-h1-size);
  line-height: var(--text-h1-lh);
  letter-spacing: var(--text-h1-ls);
  font-weight: 500;
}
.contact-text h1 strong { font-weight: 700; }
.contact-text > p { margin: 0; max-width: 380px; font-size: var(--text-body-size); line-height: var(--text-body-lh); color: var(--text-body); text-wrap: pretty; }
.clines { display: flex; flex-direction: column; gap: 32px; margin-top: 18px; }
.cline { display: inline-flex; align-items: center; gap: 16px; color: var(--ink-900); }
a.cline:hover { color: var(--brand); }
.cline-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: var(--radius-circle);
  background: var(--brand);
  color: var(--white);
  transition: transform var(--duration-base) var(--ease-standard);
}
a.cline:hover .cline-icon { transform: scale(1.08); }
.cline-text { display: flex; flex-direction: column; gap: 2px; }
.cline-label { font-size: 12px; color: var(--text-muted); }
.cline-value { font-size: 15px; font-weight: 500; }

.cform {
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: var(--surface-subtle);
  border-radius: var(--radius-md);
  padding: 34px 36px 36px;
}
.cform .g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: 13px; font-weight: 500; color: var(--ink-900); }
.req { color: var(--brand); }
.opt { color: var(--text-muted); font-weight: 400; }
.fld {
  width: 100%;
  box-sizing: border-box;
  height: 46px;
  padding: 0 14px;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--ink-900);
  background: var(--white);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
}
textarea.fld { height: 132px; padding: 12px 14px; line-height: 1.6; resize: vertical; }
select.fld {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236b7075' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 20px 20px;
}
.fld::placeholder { color: var(--gray-400); }
.fld:focus { outline: none; border-color: var(--brand); box-shadow: var(--ring-focus); }
.err .fld { border-color: #b42318; }
.fielderr { font-size: 12px; color: #b42318; }
.fielderr[hidden] { display: none; }

.checkline { display: flex; align-items: flex-start; gap: 12px; font-size: 13px; line-height: 1.6; color: var(--text-body); font-weight: 400; }
.cbx { position: absolute; opacity: 0; width: 0; height: 0; }
.cbx-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  flex-shrink: 0;
  background: var(--white);
  border: 1.5px solid var(--border-subtle);
  border-radius: 6px;
  color: var(--white);
  transition: background var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}
.cbx-box svg { opacity: 0; transform: scale(.6); transition: opacity var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); }
.cbx:checked + .cbx-box { background: var(--brand); border-color: var(--brand); }
.cbx:checked + .cbx-box svg { opacity: 1; transform: scale(1); }
.cbx:focus-visible + .cbx-box { box-shadow: var(--ring-focus); }
.err .cbx-box { border-color: #b42318; }

.cform-foot { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 6px; }
.cform-hint { font-size: 12px; color: var(--text-muted); }
.formstatus {
  margin: 0;
  padding: 14px 16px;
  background: var(--blue-50);
  border: 1px solid var(--blue-100);
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-700);
}
.formstatus[hidden] { display: none; }

.steps-sec { padding: 0 80px 120px; }
.split.steps-grid { width: 1280px; max-width: 100%; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.35fr; gap: 80px; align-items: start; }
.steps-sec h2 { margin: 0; font-size: var(--text-h3-size); line-height: var(--text-h3-lh); letter-spacing: var(--text-h3-ls); font-weight: 500; }
.steps-sec .split-text p { margin: 0; max-width: 300px; font-size: var(--text-small-size); line-height: 1.7; color: var(--text-body); }
.stepwrap { display: flex; flex-direction: column; gap: 16px; }
.stepwrap .step { height: auto; align-items: flex-start; }
.contact-faq { padding: 110px 80px; background: var(--surface-page); }
.contact-faq .faq-head p { margin: 0; max-width: 280px; font-size: var(--text-small-size); line-height: 1.7; color: var(--text-body); }

/* --- legal pages --- */
.legalsec { padding: 44px 80px 100px; }
.legal h1 { margin: 0 0 12px; font-size: var(--text-h2-size); line-height: var(--text-h2-lh); letter-spacing: var(--text-h2-ls); font-weight: 500; }
.legal-kicker { font-size: 14px; color: var(--text-muted); }
.legal h2 { margin: 44px 0 14px; font-size: 20px; line-height: 1.35; font-weight: 600; color: var(--ink-900); }
.legal h3 { margin: 28px 0 10px; font-size: 15px; font-weight: 600; color: var(--ink-900); }
.legal h4 { margin: 20px 0 8px; font-size: 14px; font-weight: 600; color: var(--ink-700); }
.legal p  { margin: 0 0 14px; font-size: 15px; line-height: 1.8; color: var(--text-body); text-wrap: pretty; }
.legal ul { margin: 0 0 14px; padding-left: 20px; }
.legal li { margin-bottom: 10px; font-size: 15px; line-height: 1.8; color: var(--text-body); }
.legal a { word-break: break-word; }
/* the Art. 21 objection notice is set in caps by the generator */
.legal .caps { font-size: 13px; line-height: 1.75; }

/* --- error pages ---
   Red lives in the graphic only: the badge stays brand blue and the buttons
   stay neutral. */
.errpage .page { min-height: 100vh; display: flex; flex-direction: column; }
.errpage main { flex: 1; display: flex; }
.esec { flex: 1; padding: 80px 80px 110px; display: flex; align-items: center; }
.egrid {
  width: 1180px;
  max-width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: 80px;
  align-items: center;
}
.eart { position: relative; display: flex; align-items: center; justify-content: center; min-height: 280px; }
.e-glow {
  position: absolute;
  width: 290px;
  height: 290px;
  border-radius: var(--radius-circle);
  background: radial-gradient(circle, #F7DCD9 0%, rgba(247, 220, 217, 0) 68%);
  animation: eGlow 6s ease-in-out infinite;
}
@keyframes eGlow { 0%, 100% { opacity: .55; transform: scale(1); } 50% { opacity: .85; transform: scale(1.04); } }
.ering { position: absolute; border: 1px solid #F7DCD9; border-radius: var(--radius-circle); }
.ering-sm { width: 230px; height: 230px; }
.ering-lg { width: 300px; height: 300px; opacity: .6; }
.ecode {
  position: relative;
  z-index: 1;
  font-size: 210px;
  line-height: .82;
  letter-spacing: -.06em;
  font-weight: 600;
  color: transparent;
  -webkit-text-stroke: 2px #C3352B;
}
.edisc {
  position: absolute;
  right: 34px;
  top: 26px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-circle);
  background: #C3352B;
  color: var(--white);
  box-shadow: 0 12px 30px rgba(195, 53, 43, .28);
  animation-delay: 200ms;
}
@keyframes eIn { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.e-el { animation: eIn 700ms var(--ease-out) both; }
@media (prefers-reduced-motion: reduce) { .e-el, .e-glow { animation: none !important; } }

.etext { display: flex; flex-direction: column; gap: 20px; }
.ebadge {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 16px 7px 12px;
  background: var(--blue-50);
  border: 1px solid var(--blue-100);
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--brand);
}
.ebadge-diamond { width: 7px; height: 7px; background: var(--brand); transform: rotate(45deg); }
.eh1 { margin: 0; max-width: 560px; font-size: 44px; line-height: 1.12; letter-spacing: -.03em; font-weight: 500; text-wrap: pretty; animation-delay: 80ms; }
.etext > p { margin: 0; max-width: 500px; font-size: var(--text-body-size); line-height: 1.8; color: var(--text-body); text-wrap: pretty; animation-delay: 160ms; }
.ebtns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; animation-delay: 240ms; }
.ebtn {
  display: inline-flex;
  align-items: center;
  gap: 48px;
  height: 48px;
  padding: 0 8px 0 20px;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background 180ms var(--ease-standard), border-color 180ms var(--ease-standard), transform 180ms var(--ease-standard);
}
.ebtn:hover { transform: var(--hover-lift); }
.ebtn-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: var(--radius-circle);
}
.ebtn-p { background: var(--action-solid); border: 1px solid var(--action-solid); color: var(--white); }
.ebtn-p:hover { background: var(--action-solid-hover); border-color: var(--action-solid-hover); color: var(--white); }
.ebtn-p .ebtn-badge { background: var(--white); color: var(--ink-900); }
.ebtn-s { background: var(--white); border: 1px solid var(--border-subtle); color: var(--ink-900); }
.ebtn-s:hover { border-color: var(--border-strong); color: var(--ink-900); }
.ebtn-s .ebtn-badge { background: var(--ink-900); color: var(--white); }

.elinks { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.elink {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 17px 20px;
  background: var(--white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  color: var(--ink-900);
  font-size: 14px;
  font-weight: 500;
  transition: border-color 200ms var(--ease-standard), transform 200ms var(--ease-standard), box-shadow 200ms var(--ease-standard);
}
.elink:hover { border-color: var(--brand); transform: translateY(-3px); box-shadow: 0 12px 28px rgba(16, 24, 40, .08); color: var(--ink-900); }
.elink svg { color: var(--brand); flex-shrink: 0; }
@media (hover: none) { .elink:hover, .ebtn:hover { transform: none; box-shadow: none; } }

/* --- Leistungen: detail pages -------------------------------------------
   All six share one skeleton, so these rules serve every service page. */
.svc-inner { width: 1280px; max-width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 48px; }
.svc-head { display: flex; flex-direction: column; gap: 16px; }
.svc-head h2 {
  margin: 0;
  max-width: 760px;
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-lh);
  letter-spacing: var(--text-h2-ls);
  font-weight: 500;
}

.svc-hero { padding: 40px 80px 96px; }
.split.svc-herogrid {
  width: 1280px;
  max-width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 64px;
  align-items: start;
}
.svc-herotext { display: flex; flex-direction: column; gap: 20px; }
.svc-herotext h1 {
  margin: 0;
  max-width: 620px;
  font-size: var(--text-h1-size);
  line-height: var(--text-h1-lh);
  letter-spacing: var(--text-h1-ls);
  font-weight: 500;
  text-wrap: pretty;
}
.svc-herotext > p { margin: 0; max-width: 620px; font-size: var(--text-body-size); line-height: 1.8; color: var(--text-body); text-wrap: pretty; }
.svc-herotext .btnrow { justify-content: flex-start; margin-top: 8px; }

.svc-scope {
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: var(--white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 30px 32px;
}
.svc-scope-label { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.svc-scope ul { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; }
.svc-scope li { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.6; color: var(--text-body); }
.svc-check { display: inline-flex; flex-shrink: 0; margin-top: 2px; }

.svc-umfang { background: var(--surface-subtle); padding: 110px 80px; }
/* Cards on tinted bands are white with a hairline, and the hairline turns
   brand blue on hover — the fill no longer carries the state. */
.scard {
  background: var(--white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 26px 26px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform var(--duration-base) var(--ease-standard),
              border-color var(--duration-base) var(--ease-standard);
}
.scard:hover { transform: translateY(-3px); border-color: var(--brand); }
.scard h3 {
  margin: 0;
  font-size: var(--text-h4-size);
  line-height: var(--text-h4-lh);
  letter-spacing: var(--text-h4-ls);
  font-weight: 600;
  color: var(--brand);
}
.scard p { margin: 0; font-size: 14px; line-height: 1.7; color: var(--text-body); text-wrap: pretty; }

.svc-ausgang { background: #080C14; padding: 110px 80px; }
.svc-ausgang h2 { color: var(--white); }
.zgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
/* align-items:flex-start is required: .zrow (the home page variant) sets
   align-items:center for its 3-column grid, and in a flex column that would
   centre the number and heading horizontally. */
.zrow-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 28px 32px;
}
/* Outlined numerals; the fill arrives on hover. Only on the dark rows of the
   service pages — the home page keeps its brand-blue disc. */
.zrow-num {
  display: block;
  margin-bottom: 4px;
  font-size: 52px;
  line-height: 1;
  letter-spacing: -.03em;
  font-weight: 600;
  color: transparent;
  -webkit-text-stroke: 1.4px var(--blue-300);
  transition: color var(--duration-base) var(--ease-standard),
              -webkit-text-stroke-color var(--duration-base) var(--ease-standard);
}
.zrow-col:hover .zrow-num { color: var(--blue-300); }
@media (hover: none) {
  .zrow-col:hover .zrow-num { color: transparent; }
  .zrow-col:active .zrow-num { color: var(--blue-300); }
}
.zrow-col h3 { margin: 0; font-size: var(--text-h4-size); line-height: var(--text-h4-lh); letter-spacing: var(--text-h4-ls); font-weight: 600; color: var(--white); }
.zrow-col p { margin: 0; font-size: 14px; line-height: 1.7; color: rgba(255, 255, 255, .72); text-wrap: pretty; }

.svc-ablauf { padding: 110px 80px; }
.g4s { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; align-items: stretch; }
.g4s .step { height: auto; align-items: flex-start; }

.svc-faq { background: var(--surface-subtle); padding: 110px 80px; }
/* Section rhythm on the subpages is 110px top and bottom, like every other
   band. The related blocks inherit .related from the article pages, where the
   prose above already carries the spacing — so they get their own top padding
   back here. When both blocks appear, the first one ends flush and the second
   supplies the 110px between them. */
.related-sub { padding: 110px 80px 0; }
.related-sub.svc-others { padding: 110px 80px; }
.lcard {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px;
  background: var(--surface-card);
  border-radius: var(--radius-md);
  color: var(--ink-900);
  font-size: 15px;
  font-weight: 500;
  transition: transform var(--duration-base) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}
.lcard:hover { transform: translateY(-2px); color: var(--brand); }
.lcard svg { flex-shrink: 0; }
@media (hover: none) { .scard:hover, .lcard:hover { transform: none; } }
@media (prefers-reduced-motion: reduce) { .scard:hover, .lcard:hover { transform: none; } }

/* --- Leistungen: overview ---
   Note: the detail pages carry a small horizontal .lcard link row; this is a
   different component with its own name so the two never collide. */
.svcindex { padding: 0 80px 120px; }
.svcindex .g2 {
  width: 1280px;
  max-width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
}
.svccard {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px 34px 34px;
  background: var(--surface-card);
  border-radius: var(--radius-md);
  color: inherit;
  transition: transform var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard);
}
.svccard::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-md);
  border: 1.5px solid transparent;
  pointer-events: none;
  transition: border-color var(--duration-base) var(--ease-standard);
}
.svccard:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(16, 24, 40, .10); }
.svccard:hover::after { border-color: var(--brand); }
.svccard:hover .go { transform: translateX(4px); }
.go { transition: transform 200ms var(--ease-standard); }
.svccard-num { font-family: var(--font-mono); font-size: 12px; color: var(--gray-500); }
.svccard h2 {
  margin: 0;
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-lh);
  letter-spacing: var(--text-h3-ls);
  font-weight: 500;
  color: var(--brand);
}
.svccard p { margin: 0; font-size: 14px; line-height: 1.75; color: var(--text-body); text-wrap: pretty; }
.svccard-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.svccard-chips span {
  padding: 5px 12px;
  background: var(--white);
  border-radius: var(--radius-pill);
  font-size: 12px;
  color: var(--gray-600);
}
.svccard-go { display: inline-flex; align-items: center; gap: 10px; margin-top: 6px; font-size: 13px; font-weight: 500; color: var(--ink-900); }
.pagehero .btnrow { justify-content: flex-start; margin-top: 8px; }
@media (hover: none), (prefers-reduced-motion: reduce) {
  .svccard:hover { transform: none; box-shadow: none; }
  .svccard:hover .go { transform: none; }
}

/* --- Standort (#standort) --- */
.standort { padding: 110px 80px 0; }
.split.standort-grid {
  width: 1280px;
  max-width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 72px;
  align-items: start;
  padding-bottom: 110px;
}
.standort-text { display: flex; flex-direction: column; gap: 16px; }
.standort-text h2 {
  margin: 0;
  max-width: 440px;
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-lh);
  letter-spacing: var(--text-h3-ls);
  font-weight: 500;
}
.standort-text p { margin: 0; max-width: 400px; font-size: var(--text-body-size); line-height: 1.8; color: var(--text-body); text-wrap: pretty; }
.standort-panel {
  display: flex;
  flex-direction: column;
  gap: 26px;
  background: var(--surface-card);
  border-radius: var(--radius-md);
  padding: 32px 34px;
}
.stdrow { display: flex; gap: 16px; align-items: flex-start; }
.stdrow-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: var(--radius-circle);
  background: var(--brand);
  color: var(--white);
}
.stdrow-text { display: flex; flex-direction: column; gap: 6px; }
.stdrow-title { font-size: 14px; font-weight: 600; color: var(--ink-900); }
.stdrow-body { font-size: 13px; line-height: 1.7; color: var(--text-body); }

/* home service cards link through to their detail page */
.svclink { position: relative; color: inherit; }
.svclink::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-md);
  border: 1.5px solid transparent;
  pointer-events: none;
  transition: border-color var(--duration-base) var(--ease-standard);
}
.svclink:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(16, 24, 40, .10); color: inherit; }
.svclink:hover::after { border-color: var(--brand); }
@media (hover: none) {
  .svclink:hover { transform: none; box-shadow: none; }
  .svclink:hover::after { border-color: transparent; }
  .svclink:active { transform: scale(.99); }
  .svclink:active::after { border-color: var(--brand); }
}

/* --- Danke (Formular-Erfolgsseite) --- */
.danke { padding: 72px 80px 96px; }
.split.danke-grid {
  width: 1280px;
  max-width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 72px;
  align-items: start;
}
.danke-text { display: flex; flex-direction: column; gap: 20px; }
/* Own name on purpose: .mark is already the rotated grey wordmark watermark on
   the home page, and that rule is position:absolute. */
.dankemark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-circle);
  background: var(--brand);
  color: var(--white);
  animation: markIn 620ms var(--ease-out) 200ms both;
}
.dankemark path { stroke-dasharray: 30; animation: strokeIn 620ms var(--ease-standard) 620ms both; }
@keyframes markIn { from { opacity: 0; transform: scale(.86); } to { opacity: 1; transform: none; } }
@keyframes strokeIn { from { stroke-dashoffset: 30; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .dankemark, .dankemark path { animation: none !important; }
  .dankemark path { stroke-dasharray: none; }
}
.danke-text h1 {
  margin: 0;
  max-width: 560px;
  font-size: var(--text-h1-size);
  line-height: var(--text-h1-lh);
  letter-spacing: var(--text-h1-ls);
  font-weight: 500;
}
.danke-text > p { margin: 0; max-width: 560px; font-size: var(--text-body-size); line-height: 1.8; color: var(--text-body); text-wrap: pretty; }
.danke-text .btnrow { justify-content: flex-start; gap: 12px; margin-top: 10px; }
.danke-next {
  display: flex;
  flex-direction: column;
  gap: 26px;
  background: var(--surface-subtle);
  border-radius: var(--radius-md);
  padding: 34px 36px;
}
.danke-next-label { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.danke-next .step { height: auto; align-items: flex-start; }

.danke-more { padding: 0 80px 120px; }
.danke-more-inner { width: 1280px; max-width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 24px; }
.danke-more .related-head h2 { margin: 0; font-size: var(--text-h4-size); line-height: var(--text-h4-lh); font-weight: 600; }
.danke-more .related-head > span { font-size: 13px; color: var(--text-muted); }
.lnk {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  background: var(--surface-card);
  border-radius: var(--radius-md);
  color: var(--ink-900);
  transition: transform var(--duration-base) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}
.lnk:hover { transform: translateY(-2px); color: var(--brand); }
.lnk svg { flex-shrink: 0; }
.lnk-text { display: flex; flex-direction: column; gap: 4px; }
.lnk-title { font-size: 14px; font-weight: 600; }
.lnk-body { font-size: 13px; line-height: 1.6; color: var(--text-body); }
@media (hover: none), (prefers-reduced-motion: reduce) { .lnk:hover { transform: none; } }

/* submit button while the browser is posting */
.btn[disabled] { opacity: .6; cursor: default; transform: none !important; box-shadow: none !important; }

/* ------------------------------------------------------ 11. responsive --- */

@media (max-width: 1100px) {
  .abouttop { grid-template-columns: 1fr; gap: 24px; align-items: start; }
  .aboutband { grid-template-columns: 1fr; }
}

@media (max-width: 1024px) {
  /* the testimonial track becomes a native scroller */
  .trail { transform: none; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px; }
  .trail::-webkit-scrollbar { display: none; }
  .tcard { flex: 0 0 86%; scroll-snap-align: start; }
  .trailbar { display: none; }
}

@media (max-width: 960px) {
  .sec { padding-left: 24px; padding-right: 24px; }

  .hdr { height: 72px; padding: 0 24px; }
  .hdr-logo img { height: 26px; }
  .hdr-nav { display: none; }
  .hdr-actions > .btn { display: none; }
  .hdr-burger { display: inline-flex; }

  .hero { min-height: auto; padding: 40px 24px 64px; }
  .hero h1 { font-size: 34px; }
  h2 { font-size: 28px; }
  .constellation { display: none; }
  .a { animation-delay: 80ms !important; animation-duration: 500ms; }
  .a-header { animation-delay: 0ms; animation-duration: 500ms; }

  .btnrow { flex-direction: column; align-items: stretch; width: 100%; max-width: 420px; margin-left: auto; margin-right: auto; }
  .btnrow > * { width: 100%; max-width: none; }
  .btnrow .btn { display: flex; width: 100%; justify-content: space-between; }

  .themen { padding-top: 64px; padding-bottom: 64px; }
  .orbit { position: static; height: auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 24px; }
  .orbit .ring { display: none; }
  .orbit .core { position: static; transform: none; margin: 0 auto 8px; flex-basis: 100%; }
  .chip { position: relative; left: auto; top: auto; transform: none; z-index: auto; }
  .chip:hover { transform: none; }
  .chip-detail { position: static; width: auto; max-width: calc(100vw - 48px); transform: none; margin-top: 12px; }

  .g4 > *, .depth > * { grid-column: auto; grid-row: auto; }
  .tile { display: none; }
  .g4, .g3, .depth { grid-template-columns: 1fr; gap: 16px; width: auto; }
  .g4 .lead { margin-top: 0; padding-right: 0; }
  .depth { width: auto; }

  .split, .split.ablauf-grid, .split.faq-grid, .split.standort-grid { grid-template-columns: 1fr; gap: 32px; }
  .standort { padding-top: 64px; }
  .split.standort-grid { padding-bottom: 64px; }
  .split-action { margin-top: 0; }

  .split.svc-herogrid, .zgrid, .g4s, .svcindex .g2, .split.danke-grid { grid-template-columns: 1fr; gap: 24px; }
  .danke { padding-top: 40px; padding-bottom: 64px; }
  .zrow-col { padding: 22px 22px; }
  .zrow-num { font-size: 42px; }
  .svc-umfang, .svc-ausgang, .svc-ablauf, .svc-faq { padding-top: 64px; padding-bottom: 64px; }
  .svc-hero { padding-top: 24px; padding-bottom: 56px; }
  .zg { min-height: auto; padding: 64px 24px; }
  .zrow { grid-template-columns: 1fr; gap: 16px; flex: none; padding: 24px 22px; }

  .abouth { font-size: 34px; }
  .aboutpanel { padding: 36px 28px 40px; min-height: 0; }
  .aboutfacts { padding: 34px 28px; gap: 28px 22px; }

  .tcard { min-height: auto; }

  .fgrid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .fpad { padding-left: 24px; padding-right: 24px; }
  .fbrand { grid-column: span 2; }
}

@media (min-width: 961px) {
  .hdr-menu { display: none !important; }
}

@media (max-width: 640px) {
  .trailnav { display: none; }
  .fgrid { grid-template-columns: 1fr; gap: 32px; }
  .fbrand { grid-column: auto; }
  .ftr { padding: 56px 24px 24px; }
  .cc-card { padding: 28px 22px 24px; border-radius: 16px; }
  .cc-actions { flex-direction: column-reverse; align-items: stretch; }
  .cc-actions > * { width: 100%; justify-content: center; }
}

@media (max-width: 520px) {
  /* .hdr keeps the 24px from the 960px block — same gutter as .sec, so the
     logo stays flush with the content on phones too. */
}

/* ----------------------------------------------------------- 12. touch ---
   No hover lift on touch devices — a visible press state instead. */

@media (hover: none) {
  .btn:hover, .ctabar:hover, .chip:hover, .nav:hover, .pcard:hover,
  .tcard:hover, .zrow:hover, .svc:hover, .ftop:hover, .cc-btn:hover {
    transform: none;
    box-shadow: none;
  }
  .hdr-nav a:hover::after { transform: scaleX(0); }
  .hdr-nav a:active::after { transform: scaleX(1); }
  .chip:hover .chip-btn { background: var(--white); border-color: var(--border-subtle); color: var(--ink-900); }
  .chip:hover .chip-btn svg { stroke: var(--gray-500); }
  .pcard:hover::after { border-color: transparent; }
  .pcard:hover .pcard-media img { transform: none; }
  .pcard:hover h3 { color: var(--ink-900); }
  .btn-r:hover .btn-badge, .btn-l:hover > svg, .fcontact a:hover .fdisc { transform: none; }

  .btn:active, .ctabar:active { transform: scale(.97); opacity: .9; }
  .btn-primary:active { background: var(--action-solid-hover); }
  .btn-stroke:active  { background: var(--surface-card); border-color: var(--border-strong); }
  .btn-outline:active { background: rgba(255, 255, 255, .14); }
  .chip:active .chip-btn { background: #06183C; border-color: #06183C; color: var(--white); }
  .chip:active .chip-btn svg { stroke: var(--white); }
  .nav:active { transform: scale(.94); }
  .pcard:active { transform: scale(.985); }
  .pcard:active::after { border-color: var(--brand); }
  .zrow:active { background: #111926; }
  .tcard:active { transform: scale(.99); }
  .acc summary:active { color: var(--brand); }
  a:active { opacity: .75; }
}