/* 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: 300;
  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 { 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. */

.hdrwrap { z-index: 60; }
.hdrwrap-sticky { position: sticky; top: 0; }

.hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  box-sizing: border-box;
  height: 90px;
  padding: 0 60px;
  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);
}
.hdrwrap.is-scrolled .hdr {
  background: rgba(255, 255, 255, .72);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  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; }

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

.ftr { background: #080C14; padding: 80px 80px 28px; }
.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: 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);
}
.chip.is-open { z-index: 20; }
.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; }
.zg-inner { flex: 1; 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; }

/* --- 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); }

.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; }
/* 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; } }

/* ------------------------------------------------------ 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 { grid-template-columns: 1fr; gap: 32px; }
  .split-action { margin-top: 0; }

  .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 { padding: 0 16px; }
}

/* ----------------------------------------------------------- 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; }
}