/* ==========================================================================
   MA IT Solutions — Website Stylesheet
   Basis: MAIT Design System (Tokens, Komponenten, Light/Dark)
   Dark Mode: html[data-mode="dark"] (manuell) oder prefers-color-scheme (ohne Wahl)
   ========================================================================== */

:root {
  /* Primitive */
  --navy-50:#EAF1FA;  --navy-100:#DCE8F5; --navy-200:#CFDBEA; --navy-300:#95ADC6;
  --navy-400:#6E8BAA; --navy-500:#516F90; --navy-600:#395674; --navy-700:#26425E;
  --navy-800:#182F47; --navy-900:#0E2033;
  --neutral-0:#FFFFFF; --neutral-50:#F8F9F9; --neutral-100:#F0F1F2; --neutral-200:#E3E5E8;
  --neutral-300:#CDD1D5; --neutral-400:#A1A8AF; --neutral-500:#5C6B7A; --neutral-600:#4E5A66;
  --neutral-700:#48515B; --neutral-800:#34383D; --neutral-900:#262626;
  --amber-50:#FFF5E0; --amber-100:#FFE7B2; --amber-200:#FFD170; --amber-300:#FFBE33;
  --amber-400:#FFB10A; --amber-500:#EBA000; --amber-600:#C78700; --amber-700:#A36F00;
  --amber-800:#805700; --amber-900:#5C3F00;
  --success:#00C777; --success-text:#00854F; --success-tint:#E8F8F0;
  --warning:#EBA000; --warning-text:#805700; --warning-tint:#FFF5E0;
  --danger:#E64823;  --danger-text:#C63A18;  --danger-tint:#FCE8E4;
  --info:#2998E3;    --info-text:#197ABB;    --info-tint:#E4F2FB;

  /* Typografie */
  --font-sans:"Bierstadt",Calibri,Arial,system-ui,sans-serif;
  --text-display:clamp(2.25rem,1.5rem + 3.2vw,3.5rem); --text-h1:clamp(1.875rem,1.4rem + 2vw,2.5rem); --text-h2:clamp(1.5rem,1.25rem + 1vw,1.75rem); --text-h3:1.25rem;
  --text-body-lg:1.125rem; --text-body:1rem; --text-body-sm:.875rem; --text-caption:.75rem;
  --leading-body:1.5; --leading-heading:1.2; --tracking-label:.08em; --measure:68ch;

  /* Abstand / Radius / Schatten / Motion */
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-6:1.5rem;
  --space-8:2rem; --space-12:3rem; --space-16:4rem; --space-24:6rem;
  --radius-sm:.25rem; --radius-md:.5rem; --radius-lg:.625rem; --radius-xl:1rem; --radius-full:999px;
  --shadow-sm:0 1px 2px rgba(14,32,51,.06);  --shadow-md:0 2px 7px rgba(14,32,51,.13);
  --shadow-lg:0 8px 24px rgba(14,32,51,.16); --shadow-xl:0 16px 48px rgba(14,32,51,.20);
  --duration-fast:120ms; --duration-base:200ms; --duration-slow:320ms;
  --easing-standard:cubic-bezier(.2,0,0,1);
  --container-max:1280px; --tap-target:2.75rem;
  --section-y:clamp(3rem,2rem + 5vw,6rem);
  --nav-h:72px;
}

/* ---- Semantische Tokens: Light (Default) ---- */
:root, [data-theme="light"] {
  --color-bg:var(--neutral-0); --color-bg-subtle:var(--neutral-50);
  --color-surface:var(--navy-50); --color-surface-accent:var(--navy-100);
  --color-card:var(--neutral-0); --color-card-on-surface:var(--neutral-0);
  --color-border:var(--navy-200); --color-border-interactive:var(--navy-400);
  --color-text:var(--neutral-900); --color-text-heading:var(--navy-900);
  --color-text-body:var(--neutral-700);
  --color-text-muted:var(--neutral-500); --color-text-inverse:var(--neutral-0);
  --color-text-accent:var(--amber-800); --color-text-link:var(--navy-600);
  --color-action:var(--navy-900); --color-action-hover:var(--navy-700);
  --color-action-text:var(--neutral-0); --color-accent:var(--amber-500);
  --color-focus:var(--info); --color-overlay:rgba(14,32,51,.5);
  --color-header:rgba(255,255,255,.92);
  --color-icon:var(--navy-900);
  --color-tag-bg:var(--navy-900); --color-tag-text:var(--neutral-0);
  --color-tag-soft-bg:var(--navy-100); --color-tag-soft-text:var(--navy-900);
  --color-input-bg:var(--neutral-0);
  --logo-filter:grayscale(1) brightness(.55) contrast(1.1);
  color-scheme:light;
}

/* ---- Semantische Tokens: Dark ---- */
[data-theme="dark"], html[data-mode="dark"] {
  --color-bg:var(--navy-900); --color-bg-subtle:#0A1826;
  --color-surface:var(--navy-800); --color-surface-accent:var(--navy-700);
  --color-card:var(--navy-800); --color-card-on-surface:#1E3852;
  --color-border:#2C4056; --color-border-interactive:var(--navy-400);
  --color-text:var(--navy-50); --color-text-heading:var(--navy-50);
  --color-text-body:var(--navy-100);
  --color-text-muted:var(--navy-300); --color-text-inverse:var(--navy-900);
  --color-text-accent:var(--amber-500); --color-text-link:var(--amber-500);
  --color-action:var(--amber-500); --color-action-hover:var(--amber-400);
  --color-action-text:var(--navy-900);
  --success-text:#4ADE9B; --danger-text:#E85735; --info-text:#67B7EC;
  --success-tint:rgba(0,199,119,.12); --danger-tint:rgba(230,72,35,.14); --info-tint:rgba(41,152,227,.14);
  --color-overlay:rgba(5,12,20,.65);
  --color-header:rgba(14,32,51,.9);
  --color-icon:var(--navy-50);
  --color-tag-bg:var(--navy-50); --color-tag-text:var(--navy-900);
  --color-tag-soft-bg:var(--navy-700); --color-tag-soft-text:var(--navy-50);
  --color-input-bg:var(--navy-800);
  --logo-filter:grayscale(1) brightness(1.6) contrast(.9);
  color-scheme:dark;
}
/* Systemeinstellung greift nur, wenn der Nutzer nichts gewählt hat */
@media (prefers-color-scheme:dark){
  html:not([data-mode="light"]) {
    --color-bg:var(--navy-900); --color-bg-subtle:#0A1826;
    --color-surface:var(--navy-800); --color-surface-accent:var(--navy-700);
    --color-card:var(--navy-800); --color-card-on-surface:#1E3852;
    --color-border:#2C4056; --color-border-interactive:var(--navy-400);
    --color-text:var(--navy-50); --color-text-heading:var(--navy-50);
    --color-text-body:var(--navy-100);
    --color-text-muted:var(--navy-300); --color-text-inverse:var(--navy-900);
    --color-text-accent:var(--amber-500); --color-text-link:var(--amber-500);
    --color-action:var(--amber-500); --color-action-hover:var(--amber-400);
    --color-action-text:var(--navy-900);
    --success-text:#4ADE9B; --danger-text:#E85735; --info-text:#67B7EC;
    --success-tint:rgba(0,199,119,.12); --danger-tint:rgba(230,72,35,.14); --info-tint:rgba(41,152,227,.14);
    --color-overlay:rgba(5,12,20,.65);
    --color-header:rgba(14,32,51,.9);
    --color-icon:var(--navy-50);
    --color-tag-bg:var(--navy-50); --color-tag-text:var(--navy-900);
    --color-tag-soft-bg:var(--navy-700); --color-tag-soft-text:var(--navy-50);
    --color-input-bg:var(--navy-800);
    --logo-filter:grayscale(1) brightness(1.6) contrast(.9);
    color-scheme:dark;
  }
}
/* Dunkle Sektionen setzen sich im Page-Dark-Mode leicht ab */
html[data-mode="dark"] [data-theme="dark"]{--color-bg:#0A1826;--color-surface:var(--navy-800)}
@media (prefers-color-scheme:dark){html:not([data-mode="light"]) [data-theme="dark"]{--color-bg:#0A1826}}
[data-theme="dark"]{background:var(--color-bg);color:var(--color-text)}

/* Logo-Tausch je Modus */
.logo-light{display:none}
html[data-mode="dark"] .logo-dark{display:none}
html[data-mode="dark"] .logo-light{display:block}
@media (prefers-color-scheme:dark){
  html:not([data-mode="light"]) .logo-dark{display:none}
  html:not([data-mode="light"]) .logo-light{display:block}
}

/* --------------------------------------------------------------------------
   Reset & Basis
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + var(--space-4))}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
body{
  margin:0;font-family:var(--font-sans);font-size:var(--text-body);line-height:var(--leading-body);
  color:var(--color-text);background:var(--color-bg);overflow-x:hidden;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  transition:background var(--duration-base) var(--easing-standard),color var(--duration-base) var(--easing-standard);
}
img,svg{display:block;max-width:100%;height:auto}
a{color:var(--color-text-link);text-decoration:underline;text-underline-offset:.15em;text-decoration-thickness:1px}
a:hover{color:var(--color-text-heading)}
:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px;border-radius:var(--radius-sm)}
ul,ol{margin:0;padding:0}
p{margin:0 0 var(--space-4)}
p:last-child{margin-bottom:0}
strong{font-weight:600}

h1,h2,h3,h4{margin:0 0 var(--space-4);color:var(--color-text-heading);font-weight:700;line-height:var(--leading-heading);text-wrap:balance}
h1{font-size:var(--text-h1);line-height:1.1}
h2{font-size:var(--text-h2)}
h3{font-size:var(--text-h3);font-weight:600;line-height:1.3}
h4{font-size:var(--text-body);font-weight:600}
.display{font-size:var(--text-display);line-height:1.05;font-weight:700}
.lead{font-size:var(--text-body-lg)}
.muted{color:var(--color-text-muted)}
.small{font-size:var(--text-body-sm)}
.measure{max-width:var(--measure)}
.label{
  display:block;margin:0 0 var(--space-3);font-size:var(--text-caption);font-weight:700;
  letter-spacing:var(--tracking-label);text-transform:uppercase;line-height:1.2;
  color:var(--color-text-accent);
}
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:var(--space-4);top:-100px;z-index:100;padding:var(--space-2) var(--space-4);background:var(--navy-900);color:#fff;border-radius:var(--radius-md)}
.skip-link:focus{top:var(--space-4)}

@media (max-width:359px){
  :root{--text-display:2rem;--text-h1:1.75rem}
  .container{padding-inline:var(--space-4)}
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
.container{width:100%;max-width:var(--container-max);margin-inline:auto;padding-inline:max(var(--space-6),env(safe-area-inset-left))}
@media (min-width:1024px){.container{padding-inline:var(--space-8)}}
.section{padding-block:var(--section-y);background:var(--color-bg);color:var(--color-text)}
.section--surface{background:var(--color-surface)}
.section-head{max-width:var(--measure);margin-bottom:var(--space-12)}
.section-head h2{margin-bottom:var(--space-3)}
.grid{display:grid;gap:var(--space-6)}
@media (min-width:768px){
  .grid-2{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(3,1fr)}
  .grid-4{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:1024px){.grid-4{grid-template-columns:repeat(4,1fr)}}

/* --------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */
.site-header{
  position:sticky;top:0;z-index:50;height:var(--nav-h);
  background:var(--color-header);backdrop-filter:saturate(1.2) blur(8px);-webkit-backdrop-filter:saturate(1.2) blur(8px);
  border-bottom:1px solid var(--color-border);
}
.site-header .container{height:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--space-4)}
.brand{display:inline-flex;align-items:center;min-height:var(--tap-target);flex:none}
.brand img{height:36px;width:auto}
.header-tools{display:flex;align-items:center;gap:var(--space-2);order:3}
@media (min-width:1024px){.nav{order:2;margin-left:auto}.header-tools{margin-left:var(--space-2)}}
.nav{display:flex;align-items:center;gap:var(--space-2)}
.nav-list{display:flex;align-items:center;gap:var(--space-1);list-style:none}
.nav-link{
  display:inline-flex;align-items:center;min-height:var(--tap-target);padding:0 var(--space-3);
  font-size:var(--text-body-sm);font-weight:600;color:var(--color-text-heading);text-decoration:none;
  border-bottom:2px solid transparent;transition:color var(--duration-fast) var(--easing-standard);
}
.nav-link:hover{color:var(--color-text-link)}
.nav-link[aria-current="page"],.nav-link.is-active{border-bottom-color:var(--amber-500)}
.nav-cta{margin-left:var(--space-2)}
.icon-btn{
  display:inline-flex;align-items:center;justify-content:center;width:var(--tap-target);height:var(--tap-target);
  padding:0;border:1px solid var(--color-border);border-radius:var(--radius-md);background:transparent;color:var(--color-icon);cursor:pointer;
  transition:background var(--duration-fast) var(--easing-standard),border-color var(--duration-fast) var(--easing-standard);
}
.icon-btn:hover{background:var(--color-surface);border-color:var(--color-border-interactive)}
.icon-btn svg{width:20px;height:20px}
.lang-switch{font-size:var(--text-caption);font-weight:700;letter-spacing:var(--tracking-label);text-decoration:none;width:auto;padding-inline:var(--space-3)}
.mode-toggle .icon-sun{display:none}
html[data-mode="dark"] .mode-toggle .icon-moon{display:none}
html[data-mode="dark"] .mode-toggle .icon-sun{display:block}
@media (prefers-color-scheme:dark){
  html:not([data-mode="light"]) .mode-toggle .icon-moon{display:none}
  html:not([data-mode="light"]) .mode-toggle .icon-sun{display:block}
}
.nav-toggle{display:none}
.nav-toggle svg{width:24px;height:24px}
.nav-toggle .icon-close{display:none}
.nav-toggle[aria-expanded="true"] .icon-menu{display:none}
.nav-toggle[aria-expanded="true"] .icon-close{display:block}

@media (max-width:1023px){
  .nav-toggle{display:inline-flex}
  .nav{
    position:absolute;left:0;right:0;top:var(--nav-h);flex-direction:column;align-items:stretch;gap:0;
    padding:var(--space-4) var(--space-6) var(--space-6);background:var(--color-bg);border-bottom:1px solid var(--color-border);
    box-shadow:var(--shadow-lg);display:none;
  }
  .nav.is-open{display:flex;animation:fade-down var(--duration-base) var(--easing-standard)}
  .nav-list{flex-direction:column;align-items:stretch;gap:0}
  .nav-link{width:100%;padding:var(--space-3) var(--space-2);border-bottom:1px solid var(--color-border)}
  .nav-link[aria-current="page"],.nav-link.is-active{border-bottom-color:var(--amber-500)}
  .nav-cta{margin:var(--space-4) 0 0}
}
@keyframes fade-down{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  min-height:40px;padding:0 var(--space-6);border-radius:var(--radius-md);border:1px solid transparent;
  font:inherit;font-size:var(--text-body-sm);font-weight:600;line-height:1;text-decoration:none;cursor:pointer;
  transition:background var(--duration-fast) var(--easing-standard),color var(--duration-fast) var(--easing-standard),border-color var(--duration-fast) var(--easing-standard),transform var(--duration-fast) var(--easing-standard),box-shadow var(--duration-fast) var(--easing-standard);
}
.btn svg{width:18px;height:18px;transition:transform var(--duration-fast) var(--easing-standard)}
.btn:hover svg{transform:translateX(3px)}
.btn:active{transform:translateY(1px)}
.btn-lg{min-height:48px;padding-inline:var(--space-8);font-size:var(--text-body)}
.btn-primary{background:var(--color-action);color:var(--color-action-text)}
.btn-primary:hover{background:var(--color-action-hover);color:var(--color-action-text);box-shadow:var(--shadow-md)}
.btn-accent{background:var(--amber-500);color:var(--navy-900)}
.btn-accent:hover{background:var(--amber-400);color:var(--navy-900);box-shadow:0 6px 20px rgba(235,160,0,.28)}
.btn-secondary{background:transparent;border-color:var(--color-border-interactive);color:var(--color-text-heading)}
.btn-secondary:hover{background:var(--color-surface);color:var(--color-text-heading)}
.btn-ghost{background:transparent;color:var(--color-text-link)}
.btn-ghost:hover{background:var(--color-surface);color:var(--color-text-heading)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.6;cursor:not-allowed}
.text-link{display:inline-flex;align-items:center;gap:var(--space-1);font-weight:600;text-decoration:none;color:var(--color-text-link)}
.text-link svg{width:18px;height:18px;transition:transform var(--duration-fast) var(--easing-standard)}
.text-link:hover svg{transform:translateX(3px)}

/* --------------------------------------------------------------------------
   Hero (Dark)
   -------------------------------------------------------------------------- */
.hero{position:relative;overflow:hidden;padding-block:clamp(3rem,2rem + 6vw,8rem)}
.hero-grid{display:grid;gap:var(--space-12);align-items:center}
@media (min-width:1024px){.hero-grid{grid-template-columns:7fr 5fr}}
.hero h1{margin-bottom:var(--space-6);max-width:18ch}
.hero .lead{max-width:var(--measure);margin-bottom:var(--space-8);color:var(--color-text-muted)}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--space-3)}
@media (max-width:479px){.hero-actions .btn,.cta-actions .btn{width:100%}}
.hero-mark{position:absolute;right:-4%;bottom:-12%;width:min(44vw,560px);opacity:.06;pointer-events:none;animation:drift 18s ease-in-out infinite alternate}
@media (max-width:1023px){.hero-mark{width:70vw;right:-20%;bottom:-10%}}
@keyframes drift{from{transform:translateY(0) rotate(0)}to{transform:translateY(-18px) rotate(-2deg)}}
.hero-facts{position:relative;display:grid;gap:var(--space-4);list-style:none}
.fact{
  padding:var(--space-6);border-radius:var(--radius-lg);
  background:var(--color-surface);border:1px solid var(--color-border);
  transition:transform var(--duration-base) var(--easing-standard),border-color var(--duration-base) var(--easing-standard);
}
.fact:hover{transform:translateX(4px);border-color:var(--navy-400)}
.fact-title{display:block;font-size:var(--text-h3);font-weight:600;line-height:1.3;color:var(--amber-500)}
.fact-label{display:block;margin-top:var(--space-2);font-size:var(--text-body-sm);color:var(--color-text-muted)}

/* Hero-Einstieg */
.hero [data-enter]{opacity:0;transform:translateY(14px);animation:enter .6s var(--easing-standard) forwards}
.hero [data-enter="2"]{animation-delay:.1s}
.hero [data-enter="3"]{animation-delay:.2s}
.hero [data-enter="4"]{animation-delay:.3s}
.hero [data-enter="5"]{animation-delay:.45s}
@keyframes enter{to{opacity:1;transform:none}}

/* Scroll-Reveal */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .55s var(--easing-standard),transform .55s var(--easing-standard)}
.reveal.is-visible{opacity:1;transform:none}
.reveal[data-delay="1"]{transition-delay:.08s}.reveal[data-delay="2"]{transition-delay:.16s}.reveal[data-delay="3"]{transition-delay:.24s}
.reveal[data-delay="4"]{transition-delay:.32s}.reveal[data-delay="5"]{transition-delay:.4s}
@media (prefers-reduced-motion:reduce){
  .reveal,.hero [data-enter]{opacity:1;transform:none;animation:none;transition:none}
  .hero-mark{animation:none}
}
html.no-js .reveal{opacity:1;transform:none}

/* --------------------------------------------------------------------------
   Karten
   -------------------------------------------------------------------------- */
.card{
  padding:var(--space-6);border-radius:var(--radius-lg);
  background:var(--color-surface);border:1px solid var(--color-border);
  transition:transform var(--duration-base) var(--easing-standard),box-shadow var(--duration-base) var(--easing-standard),border-color var(--duration-base) var(--easing-standard);
}
.section--surface .card{background:var(--color-card-on-surface)}
@media (hover:hover){
  .card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--navy-300)}
}
.card h3{margin-bottom:var(--space-2)}
.card p{font-size:var(--text-body-sm);color:var(--color-text-body)}
.card-icon{
  display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;margin-bottom:var(--space-4);
  border-radius:var(--radius-md);background:var(--color-card);border:1px solid var(--color-border);color:var(--color-icon);
  transition:background var(--duration-base) var(--easing-standard),color var(--duration-base) var(--easing-standard),transform var(--duration-base) var(--easing-standard);
}
.section--surface .card-icon{background:var(--color-surface)}
.card:hover .card-icon{background:var(--amber-500);color:var(--navy-900);border-color:var(--amber-500);transform:rotate(-6deg)}
.card-icon svg{width:24px;height:24px}

/* Leistungen */
.services{display:grid;gap:var(--space-6)}
@media (min-width:768px){.services{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.services{grid-template-columns:repeat(3,1fr)}}
.service-tags{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-4)}
.tag{
  display:inline-flex;align-items:center;height:24px;padding:0 var(--space-2);border-radius:var(--radius-sm);
  font-size:var(--text-caption);font-weight:700;letter-spacing:var(--tracking-label);text-transform:uppercase;
  background:var(--color-tag-bg);color:var(--color-tag-text);
}
.tag-soft{background:var(--color-tag-soft-bg);color:var(--color-tag-soft-text)}

/* Ablauf */
.steps{display:grid;gap:var(--space-6);list-style:none}
@media (min-width:640px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.steps{grid-template-columns:repeat(4,1fr)}}
.step{
  position:relative;padding:var(--space-6);border-radius:var(--radius-lg);background:var(--color-card);border:1px solid var(--color-border);
  transition:transform var(--duration-base) var(--easing-standard),box-shadow var(--duration-base) var(--easing-standard);
}
@media (hover:hover){.step:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}}
.step-num{display:block;margin-bottom:var(--space-4);font-size:var(--text-h2);font-weight:700;line-height:1;color:var(--color-text-accent)}
.step h3{margin-bottom:var(--space-2)}
.step p{font-size:var(--text-body-sm);color:var(--color-text-body)}

/* Referenzen */
.sectors{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-8)}

/* Warum */
.why{display:grid;gap:var(--space-12);align-items:start}
@media (min-width:1024px){.why{grid-template-columns:5fr 7fr}}
.checklist{list-style:none;display:grid;gap:var(--space-4)}
.checklist li{display:grid;grid-template-columns:24px 1fr;gap:var(--space-3);align-items:start}
.checklist svg{width:24px;height:24px;color:var(--color-icon);margin-top:2px}
.checklist strong{display:block;color:var(--color-text-heading)}
.checklist span{font-size:var(--text-body-sm);color:var(--color-text-body)}

/* FAQ (Akkordeon) */
.faq{display:grid;gap:var(--space-3);max-width:var(--measure)}
.faq details{border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-card);overflow:hidden;transition:border-color var(--duration-fast) var(--easing-standard)}
.faq details[open]{border-color:var(--navy-400)}
.faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);cursor:pointer;list-style:none;
  padding:var(--space-4) var(--space-6);font-weight:600;color:var(--color-text-heading);min-height:var(--tap-target);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{flex:none;width:20px;height:20px;color:var(--color-icon);transition:transform var(--duration-base) var(--easing-standard)}
.faq details[open] summary svg{transform:rotate(45deg)}
.faq summary:hover{background:var(--color-surface)}
.faq .faq-body{padding:0 var(--space-6) var(--space-6);color:var(--color-text-body);font-size:var(--text-body-sm)}
.faq details[open] .faq-body{animation:fade-down var(--duration-base) var(--easing-standard)}

/* Abschluss-CTA */
.cta{padding-block:var(--space-24)}
.cta-inner{display:grid;gap:var(--space-8);align-items:center}
@media (min-width:1024px){.cta-inner{grid-template-columns:1fr auto}}
.cta h2{font-size:var(--text-h1);line-height:1.1;margin-bottom:var(--space-3)}
.cta p{color:var(--color-text-muted);max-width:var(--measure)}
.cta-actions{display:flex;flex-wrap:wrap;gap:var(--space-3)}

/* --------------------------------------------------------------------------
   Footer (Dark)
   -------------------------------------------------------------------------- */
.site-footer{padding-block:var(--space-16) var(--space-8);border-top:1px solid var(--color-border)}
.footer-grid{display:grid;gap:var(--space-8)}
@media (min-width:480px){.footer-grid{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1/-1}}
@media (min-width:1024px){.footer-grid{grid-template-columns:2fr 1fr 1fr 1fr}.footer-brand{grid-column:auto}}
.footer-brand img{height:40px;width:auto;margin-bottom:var(--space-4)}
.footer-brand p{font-size:var(--text-body-sm);color:var(--color-text-muted);max-width:36ch}
.site-footer h4{color:var(--navy-50);margin-bottom:var(--space-3)}
.footer-list{list-style:none;display:grid;gap:0}
.footer-list a,.site-footer address a{display:inline-block;padding-block:var(--space-2);min-height:var(--tap-target);line-height:1.75;color:var(--navy-50);text-decoration:none;font-size:var(--text-body-sm)}
.footer-list a:hover,.site-footer address a:hover{color:var(--amber-500)}
.site-footer address{font-style:normal;font-size:var(--text-body-sm);color:var(--color-text-muted);line-height:1.75}
.footer-bottom{
  display:flex;flex-wrap:wrap;gap:var(--space-4);justify-content:space-between;
  margin-top:var(--space-12);padding-top:var(--space-6);border-top:1px solid var(--color-border);
  font-size:var(--text-caption);color:var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   Formulare
   -------------------------------------------------------------------------- */
.form{display:grid;gap:var(--space-6)}
.form-row{display:grid;gap:var(--space-6)}
@media (min-width:768px){.form-row{grid-template-columns:1fr 1fr}}
.field{display:grid;gap:var(--space-2)}
.field label{font-size:var(--text-body-sm);font-weight:600;color:var(--color-text-heading)}
.field .hint{font-size:var(--text-caption);color:var(--color-text-muted)}
.field .req{color:var(--color-text-muted);font-weight:400}
.input,.textarea,.select{
  width:100%;min-height:40px;padding:0 var(--space-3);font:inherit;color:var(--color-text);
  background:var(--color-input-bg);border:1px solid var(--color-border-interactive);border-radius:var(--radius-md);
  transition:border-color var(--duration-fast) var(--easing-standard);
}
.textarea{min-height:160px;padding-block:var(--space-3);resize:vertical}
.input:hover,.textarea:hover,.select:hover{border-color:var(--navy-600)}
.input:focus-visible,.textarea:focus-visible,.select:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px;border-color:var(--navy-600)}
.field.is-invalid .input,.field.is-invalid .textarea{border-color:var(--danger-text)}
.error{display:none;align-items:flex-start;gap:var(--space-2);font-size:var(--text-caption);color:var(--danger-text)}
.error svg{width:16px;height:16px;flex:none}
.field.is-invalid .error{display:flex}
.checkbox{display:grid;grid-template-columns:auto 1fr;gap:var(--space-3);align-items:start;font-size:var(--text-body-sm)}
.checkbox input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--navy-900)}
.checkbox.is-invalid input{outline:2px solid var(--danger-text);outline-offset:1px}
.honeypot{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}

.alert{
  display:grid;grid-template-columns:24px 1fr;gap:var(--space-3);align-items:start;
  padding:var(--space-4);border-radius:var(--radius-md);border:1px solid;color:var(--color-text);
}
.alert svg{width:24px;height:24px}
.alert-success{background:var(--success-tint);border-color:var(--success)}
.alert-danger{background:var(--danger-tint);border-color:var(--danger)}
.alert-info{background:var(--info-tint);border-color:var(--info)}
.alert strong{display:block;color:var(--color-text-heading)}

.contact-grid{display:grid;gap:var(--space-12)}
@media (min-width:1024px){.contact-grid{grid-template-columns:5fr 7fr}}
.contact-aside .card{margin-bottom:var(--space-4)}
.contact-aside a{word-break:break-word}
.contact-line{display:grid;grid-template-columns:24px 1fr;gap:var(--space-3);align-items:start;margin-bottom:var(--space-4)}
.contact-line svg{width:24px;height:24px;color:var(--color-icon)}

/* --------------------------------------------------------------------------
   Textseiten (Impressum, Datenschutz)
   -------------------------------------------------------------------------- */
.page-head{padding-block:var(--space-16) var(--space-8);background:var(--color-surface)}
.page-head h1{margin-bottom:var(--space-2)}
.prose{max-width:var(--measure)}
.prose h2{margin-top:var(--space-12)}
.prose h3{margin-top:var(--space-8)}
.prose h4{margin-top:var(--space-6)}
.prose ul,.prose ol{padding-left:1.25em;margin-bottom:var(--space-4)}
.prose li{margin-bottom:var(--space-2)}
.prose a{overflow-wrap:anywhere}
.prose table{width:100%;border-collapse:collapse;font-size:var(--text-body-sm)}
.prose th{background:var(--color-surface);color:var(--color-text-heading);text-align:left;padding:var(--space-3)}
.prose td{padding:var(--space-3);border-top:1px solid var(--color-border);vertical-align:top}

/* Hilfsklassen */
.mt-4{margin-top:var(--space-4)}.mt-6{margin-top:var(--space-6)}.mt-8{margin-top:var(--space-8)}.mt-12{margin-top:var(--space-12)}
.mb-0{margin-bottom:0}.mb-4{margin-bottom:var(--space-4)}.mb-8{margin-bottom:var(--space-8)}
.center{text-align:center}

/* --------------------------------------------------------------------------
   Logo-Laufband (Referenzen)
   -------------------------------------------------------------------------- */
.marquee{
  position:relative;overflow:hidden;padding-block:var(--space-4);
  -webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);
}
.marquee-track{display:flex;width:max-content;animation:marquee 48s linear infinite}
.marquee:hover .marquee-track,.marquee:focus-within .marquee-track{animation-play-state:paused}
.marquee-group{display:flex;align-items:center;gap:var(--space-12);list-style:none;padding-inline:var(--space-6)}
.logo-item{flex:none;display:flex;align-items:center;justify-content:center;height:64px;padding-inline:var(--space-2)}
.logo-item img{
  height:36px;width:auto;max-width:200px;
  filter:var(--logo-filter);opacity:.75;
  transition:filter var(--duration-base) var(--easing-standard),opacity var(--duration-base) var(--easing-standard),transform var(--duration-base) var(--easing-standard);
}
@media (hover:hover){.logo-item:hover img{filter:none;opacity:1;transform:translateY(-2px)}}
.logo-item:focus-within img{filter:none;opacity:1}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (max-width:767px){
  .marquee-track{animation-duration:32s}
  .marquee-group{gap:var(--space-8)}
  .logo-item img{height:28px;max-width:150px}
}
@media (prefers-reduced-motion:reduce){
  .marquee{mask-image:none;-webkit-mask-image:none}
  .marquee-track{animation:none;width:auto}
  .marquee-group{flex-wrap:wrap;justify-content:center;row-gap:var(--space-6)}
  .marquee-group[aria-hidden="true"]{display:none}
}
/* Im Dark Mode Logos auf heller Kachel, damit dunkle Marken lesbar bleiben */
html[data-mode="dark"] .logo-item{background:var(--navy-50);border-radius:var(--radius-md);padding-inline:var(--space-4);height:56px}
html[data-mode="dark"] .logo-item img{filter:grayscale(1) brightness(.55) contrast(1.1)}
@media (prefers-color-scheme:dark){
  html:not([data-mode="light"]) .logo-item{background:var(--navy-50);border-radius:var(--radius-md);padding-inline:var(--space-4);height:56px}
  html:not([data-mode="light"]) .logo-item img{filter:grayscale(1) brightness(.55) contrast(1.1)}
}

/* --------------------------------------------------------------------------
   Bewegung v2: Fortschritt, rotierendes Wort, Spotlight, Tilt, Gitter
   -------------------------------------------------------------------------- */
.progress{position:fixed;top:0;left:0;height:3px;width:100%;transform:scaleX(0);transform-origin:left;background:var(--amber-500);z-index:60;pointer-events:none}

/* Rotierendes Wort in der Headline */
.rotate{display:inline-block;position:relative;color:var(--amber-500);white-space:nowrap}
.rotate::after{content:"";position:absolute;left:0;right:0;bottom:.04em;height:.08em;background:var(--amber-500);opacity:.5;transform:scaleX(0);transform-origin:left;animation:underline 3s var(--easing-standard) infinite}
.rotate.is-out{animation:word-out .28s var(--easing-standard) forwards}
.rotate.is-in{animation:word-in .38s var(--easing-standard)}
@keyframes word-out{to{opacity:0;transform:translateY(-.35em)}}
@keyframes word-in{from{opacity:0;transform:translateY(.35em)}to{opacity:1;transform:none}}
@keyframes underline{0%{transform:scaleX(0)}15%{transform:scaleX(1)}85%{transform:scaleX(1);transform-origin:right}100%{transform:scaleX(0);transform-origin:right}}

/* Hero: feines Gitter, das langsam wandert */
.hero-grid-bg{
  position:absolute;inset:0;pointer-events:none;opacity:.35;
  background-image:linear-gradient(rgba(149,173,198,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(149,173,198,.12) 1px,transparent 1px);
  background-size:48px 48px;animation:grid-move 40s linear infinite;
  -webkit-mask-image:radial-gradient(ellipse at 30% 50%,#000 20%,transparent 70%);mask-image:radial-gradient(ellipse at 30% 50%,#000 20%,transparent 70%);
}
@keyframes grid-move{from{background-position:0 0,0 0}to{background-position:48px 48px,48px 48px}}
.hero-mark{transition:transform .6s var(--easing-standard)}

/* Spotlight + Tilt auf Karten */
[data-tilt]{position:relative;transform-style:preserve-3d;will-change:transform;transition:transform .25s var(--easing-standard),box-shadow .25s var(--easing-standard),border-color .25s var(--easing-standard)}
[data-tilt]::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(235,160,0,.14),transparent 60%);
  transition:opacity .25s var(--easing-standard);
}
[data-tilt]:hover::before{opacity:1}
[data-tilt] > *{position:relative}

/* Überschriften: Linie wächst beim Einblenden */
.section-head h2{position:relative;padding-bottom:var(--space-3)}
.section-head h2::after{content:"";position:absolute;left:0;bottom:0;width:48px;height:3px;border-radius:2px;background:var(--amber-500);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--easing-standard) .25s}
.section-head.is-visible h2::after{transform:scaleX(1)}

/* Buttons: Lichtstreifen beim Hover */
.btn{overflow:hidden}
.btn::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.28),transparent);transform:skewX(-20deg);transition:left .5s var(--easing-standard);pointer-events:none}
.btn:hover::after{left:120%}

/* Schritte: Verbindungslinie zeichnet sich */
.steps{position:relative}
.step-num{position:relative;display:inline-block;padding-right:var(--space-3)}
.step-num::after{content:"";position:absolute;left:0;bottom:-6px;height:2px;width:100%;background:var(--amber-500);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--easing-standard) .2s}
.step.is-visible .step-num::after{transform:scaleX(1)}

/* Logos im Laufband: leichte Bewegung */
.logo-item img{transition:filter var(--duration-base) var(--easing-standard),opacity var(--duration-base) var(--easing-standard),transform .35s var(--easing-standard)}
@media (hover:hover){.logo-item:hover img{transform:translateY(-4px) scale(1.06)}}

@media (prefers-reduced-motion:reduce){
  .progress,.hero-grid-bg{display:none}
  .rotate::after,.rotate.is-out,.rotate.is-in{animation:none}
  [data-tilt],[data-tilt]::before,.btn::after{transition:none;animation:none}
  .section-head h2::after,.step-num::after{transform:scaleX(1)}
}