/* =========================================================================
   FormFunk — Ideen in bester Form
   Stylesheet
   Reihenfolge: Tokens · Basis · Layout · Komponenten · Bewegung · Seiten
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Farb- und Design-Tokens  —  einzige Stelle mit Farbwerten
   ------------------------------------------------------------------------- */
:root {
  /* Vorgegebene Marken-Farben */
  --brand:        #3155d9;
  --accent:       #e83e8c;
  --ink:          #11142a;

  /* Aus den Marken-Farben abgeleitet */
  --brand-soft:   #8ea1ea;   /* Blau fuer Text auf dunklem Grund  (7.4:1) */
  --brand-deep:   #2442ad;   /* Blau fuer Hover / Links auf hell  (8.5:1) */
  --ink-1:        #1a1e3a;   /* dunkle Flaeche, etwas heller */
  --ink-2:        #4a4c5d;   /* ruhiger Text auf hell             (7.7:1) */
  --line:         #d5d9e6;
  --line-dark:    #2c3152;

  /* Flaechen */
  --bg:           #f3f4f8;   /* helles Grau — Grundton der Seite */
  --bg-2:         #e7e9f1;
  --surface:      #ffffff;
  --on-dark:      #f3f4f8;   /* Text auf dunkel                  (16.9:1) */
  --on-dark-2:    #b9bdd0;   /* ruhiger Text auf dunkel           (9.9:1) */

  --focus:        #e83e8c;

  /* Schatten, Schleier, Verlaeufe */
  --sh-1:  0 1px 2px rgba(17, 20, 42, .05), 0 2px 8px rgba(17, 20, 42, .04);
  --sh-2:  0 2px 6px rgba(17, 20, 42, .06), 0 12px 32px rgba(17, 20, 42, .08);
  --sh-3:  0 8px 20px rgba(17, 20, 42, .10), 0 30px 70px rgba(17, 20, 42, .14);
  --sh-brand:  0 16px 40px rgba(49, 85, 217, .28);
  --sh-accent: 0 16px 40px rgba(232, 62, 140, .28);
  --veil:       rgba(17, 20, 42, .55);
  --glass:      rgba(243, 244, 248, .78);
  --glass-dark: rgba(17, 20, 42, .72);
  --hair:       rgba(17, 20, 42, .08);
  --hair-light: rgba(243, 244, 248, .14);
  --glare:      rgba(255, 255, 255, .5);
  --shade:      rgba(17, 20, 42, .18);

  /* Weiche Farbflaechen — als Verlauf statt als Weichzeichner: gleiche
     Wirkung, deutlich weniger Rechenaufwand beim Zeichnen. */
  --wolke-blau: radial-gradient(circle closest-side, rgba(49, 85, 217, .38), rgba(49, 85, 217, 0));
  --wolke-pink: radial-gradient(circle closest-side, rgba(232, 62, 140, .34), rgba(232, 62, 140, 0));
  --wolke-hell: radial-gradient(circle closest-side, rgba(142, 161, 234, .42), rgba(142, 161, 234, 0));

  /* Schrift — Systemschriften, nichts wird nachgeladen */
  --f-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, "SF Mono", Menlo, monospace;

  /* Groessen — fluid */
  --t-hero:  clamp(2.75rem, 1.2rem + 7.2vw, 7.5rem);
  --t-h1:    clamp(2.25rem, 1.3rem + 4.4vw, 4.75rem);
  --t-h2:    clamp(1.75rem, 1.15rem + 2.6vw, 3.25rem);
  --t-h3:    clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);
  --t-h4:    clamp(1.05rem, 0.98rem + 0.4vw, 1.25rem);
  --t-lead:  clamp(1.05rem, 0.98rem + 0.5vw, 1.35rem);
  --t-body:  1rem;
  --t-small: 0.875rem;
  --t-label: 0.75rem;

  /* Raster und Abstaende */
  --wrap: 1240px;
  --wrap-narrow: 820px;
  --gut: clamp(1.25rem, 4vw, 3rem);
  --s-1: .5rem;  --s-2: .75rem; --s-3: 1rem;   --s-4: 1.5rem;
  --s-5: 2rem;   --s-6: 3rem;   --s-7: 4.5rem; --s-8: 6.5rem;
  --sec: clamp(4rem, 9vw, 9rem);

  /* Ecken — leicht abgerundet */
  --r-1: 8px;  --r-2: 14px; --r-3: 22px; --r-4: 34px; --r-pill: 999px;

  /* Bewegung */
  --e-out:  cubic-bezier(.22, 1, .36, 1);
  --e-soft: cubic-bezier(.4, 0, .2, 1);
  --e-back: cubic-bezier(.34, 1.4, .64, 1);
  --d-1: .18s; --d-2: .34s; --d-3: .6s; --d-4: .9s;

  /* Von JavaScript gesetzt (Startwerte, damit es ohne JS ruhig bleibt) */
  --scroll: 0;
  --pointer-x: 50%;
  --pointer-y: 50%;
}

/* -------------------------------------------------------------------------
   2. Basis
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 7rem;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-sans);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

h1, h2, h3, h4 {
  margin: 0 0 var(--s-3);
  font-weight: 800;
  line-height: 1.03;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); line-height: 1.18; letter-spacing: -0.02em; }
h4 { font-size: var(--t-h4); line-height: 1.3; letter-spacing: -0.01em; font-weight: 600; }

p { margin: 0 0 var(--s-3); }
p:last-child { margin-bottom: 0; }

a { color: var(--brand-deep); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--brand); }

img, svg { max-width: 100%; }
img { height: auto; display: block; }

ul, ol { margin: 0 0 var(--s-3); padding-left: 1.25em; }
li { margin-bottom: .35em; }
li:last-child { margin-bottom: 0; }

strong, b { font-weight: 600; }

hr { border: 0; border-top: 1px solid var(--line); margin: var(--s-6) 0; }

::selection { background: var(--accent); color: var(--ink); }

/* Sichtbarer Fokusrahmen — ueberall */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--r-1);
}

/* Nur fuer Screenreader */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Sprungmarke zum Inhalt */
.skip {
  position: fixed; top: -100px; left: var(--s-3); z-index: 300;
  background: var(--ink); color: var(--on-dark);
  padding: .8rem 1.2rem; border-radius: var(--r-2);
  font-weight: 600; text-decoration: none;
  transition: top var(--d-1) var(--e-out);
}
.skip:focus { top: var(--s-3); color: var(--on-dark); }

/* -------------------------------------------------------------------------
   3. Layout
   ------------------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.wrap--narrow { max-width: var(--wrap-narrow); }

.sec { position: relative; padding-block: var(--sec); }
.sec--tight { padding-block: clamp(2.5rem, 6vw, 5rem); }
.sec--flush-top { padding-top: 0; }

.sec--dark { background: var(--ink); color: var(--on-dark); }
.sec--dark h1, .sec--dark h2, .sec--dark h3, .sec--dark h4 { color: var(--on-dark); }
.sec--dark a { color: var(--brand-soft); }
.sec--dark a:hover { color: var(--accent); }
.sec--dark .lead, .sec--dark .muted { color: var(--on-dark-2); }
.sec--dark :focus-visible { outline-color: var(--accent); }

.sec--alt { background: var(--bg-2); }
.sec--round { border-radius: var(--r-4); }

.grid { display: grid; gap: var(--s-4); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.grid--aside { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }

@media (max-width: 960px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--split, .grid--aside { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
}

.stack > * + * { margin-top: var(--s-3); }
.stack-lg > * + * { margin-top: var(--s-5); }
.center { text-align: center; }
.mt-4 { margin-top: var(--s-4); }
.mt-5 { margin-top: var(--s-5); }
.mt-6 { margin-top: var(--s-6); }

/* -------------------------------------------------------------------------
   4. Typo-Bausteine
   ------------------------------------------------------------------------- */
.label {
  font-family: var(--f-mono);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brand-deep);
  display: inline-flex; align-items: center; gap: .6em;
  margin: 0 0 var(--s-3);
}
.label::before {
  content: ""; width: 1.9em; height: 2px; background: var(--accent); border-radius: 2px;
  flex: none;
}
.sec--dark .label { color: var(--brand-soft); }

.lead { font-size: var(--t-lead); line-height: 1.55; color: var(--ink-2); max-width: 62ch; }
.muted { color: var(--ink-2); }
.small { font-size: var(--t-small); }
.mono { font-family: var(--f-mono); }

.display {
  font-size: var(--t-hero);
  font-weight: 800;
  line-height: .92;
  letter-spacing: -0.045em;
  margin: 0;
}
.display--outline { color: transparent; -webkit-text-stroke: 2px var(--ink); }
.sec--dark .display--outline { -webkit-text-stroke-color: var(--on-dark); }

.hl { color: var(--brand); }
.sec--dark .hl { color: var(--brand-soft); }

/* Farbige Flaeche hinter einem Wort — Akzent traegt dunkle Schrift */
.mark { position: relative; display: inline-block; z-index: 0; color: var(--ink); padding-inline: .14em; }
.mark::after {
  content: ""; position: absolute; inset: 14% -.08em 10%; z-index: -1;
  background: var(--accent); border-radius: var(--r-1);
  transform: scaleX(0); transform-origin: left center;
  transition: transform var(--d-3) var(--e-out) .2s;
}
.is-in .mark::after { transform: scaleX(1); }

.sec-head { max-width: 46rem; margin-bottom: var(--s-6); }
.sec-head--wide { max-width: 62rem; }
.sec-head--center { margin-inline: auto; text-align: center; }
.sec-head--center .label { justify-content: center; }
.sec-head--center .lead { margin-inline: auto; }

/* -------------------------------------------------------------------------
   5. Knoepfe und Links
   ------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--brand);
  --btn-fg: var(--surface);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  padding: .95rem 1.7rem;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: inherit; font-weight: 600; line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  isolation: isolate;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
  transition: transform var(--d-2) var(--e-back), box-shadow var(--d-2) var(--e-out),
              color var(--d-2) var(--e-out), border-color var(--d-2) var(--e-out);
}
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--accent);
  transform: translate3d(0, 101%, 0);
  transition: transform var(--d-2) var(--e-out);
}
.btn:hover { box-shadow: var(--sh-brand); transform: translate3d(0, -3px, 0); color: var(--ink); }
.btn:hover::after { transform: translate3d(0, 0, 0); }
.btn:active { transform: translate3d(0, -1px, 0) scale(.985); }

.btn--accent { --btn-bg: var(--accent); --btn-fg: var(--ink); }
.btn--accent::after { background: var(--brand); }
.btn--accent:hover { box-shadow: var(--sh-accent); color: var(--surface); }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); border-color: var(--line); }
.btn--ghost::after { background: var(--ink); }
.btn--ghost:hover { color: var(--on-dark); border-color: var(--ink); box-shadow: var(--sh-2); }

.sec--dark .btn--ghost { --btn-fg: var(--on-dark); border-color: var(--line-dark); }
.sec--dark .btn--ghost::after { background: var(--on-dark); }
.sec--dark .btn--ghost:hover { color: var(--ink); border-color: var(--on-dark); }

.btn--sm { padding: .6rem 1.1rem; font-size: var(--t-small); }
.btn--block { display: flex; width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; pointer-events: none; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.btn-row--center { justify-content: center; }

.arrow-link {
  display: inline-flex; align-items: center; gap: .5em;
  font-weight: 600; text-decoration: none;
  color: var(--brand-deep);
  padding-bottom: 2px;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-size: 0% 2px; background-position: 0 100%; background-repeat: no-repeat;
  transition: background-size var(--d-2) var(--e-out), color var(--d-2) var(--e-out);
}
.arrow-link:hover { background-size: 100% 2px; }
.arrow-link .ar { transition: transform var(--d-2) var(--e-back); }
.arrow-link:hover .ar { transform: translateX(.35em); }
.sec--dark .arrow-link { color: var(--brand-soft); }

/* -------------------------------------------------------------------------
   6. Kopfzeile und Navigation
   ------------------------------------------------------------------------- */
.hdr {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  padding-block: var(--s-3);
  transition: transform var(--d-3) var(--e-out), background-color var(--d-2) var(--e-out),
              box-shadow var(--d-2) var(--e-out), padding var(--d-2) var(--e-out);
}
.hdr::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--glass);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--hair);
  opacity: 0; transition: opacity var(--d-2) var(--e-out);
}
.hdr.is-stuck::before { opacity: 1; }
.hdr.is-stuck { padding-block: var(--s-2); }
.hdr.is-hidden { transform: translate3d(0, -110%, 0); }

.hdr__in { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }

.brand {
  display: inline-flex; align-items: center; gap: .65rem;
  text-decoration: none; color: var(--ink);
  font-weight: 800; letter-spacing: -0.04em; font-size: 1.3rem;
  flex: none;
}
.brand__mark {
  width: 2.15rem; height: 2.15rem; flex: none;
  border-radius: var(--r-1);
  transform-style: preserve-3d;
  transition: transform var(--d-3) var(--e-back);
}
.brand:hover .brand__mark { transform: perspective(600px) rotateY(180deg) rotateZ(-8deg); }
.brand__txt { display: inline-block; }

.nav { display: flex; align-items: center; gap: var(--s-1); }
.nav__link {
  position: relative;
  padding: .55rem .85rem;
  border-radius: var(--r-pill);
  color: var(--ink);
  font-weight: 600; font-size: .95rem;
  text-decoration: none;
  transition: color var(--d-1) var(--e-out);
}
.nav__link::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: var(--r-pill); background: var(--bg-2);
  transform: scale(.7); opacity: 0;
  transition: transform var(--d-2) var(--e-back), opacity var(--d-2) var(--e-out);
}
.nav__link:hover::before, .nav__link:focus-visible::before { transform: scale(1); opacity: 1; }
.nav__link[aria-current="page"] { color: var(--brand-deep); }
.nav__link[aria-current="page"]::after {
  content: ""; position: absolute; left: .85rem; right: .85rem; bottom: .25rem;
  height: 2px; border-radius: 2px; background: var(--accent);
}
.nav__cta { margin-left: var(--s-2); }

.burger {
  display: none;
  width: 3rem; height: 3rem;
  align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: var(--r-2);
  background: var(--surface); color: var(--ink);
  cursor: pointer; flex: none;
}
.burger__box { display: block; width: 20px; height: 14px; position: relative; }
.burger__box span {
  position: absolute; left: 0; height: 2px; width: 100%;
  background: currentColor; border-radius: 2px;
  transition: transform var(--d-2) var(--e-out), opacity var(--d-1) var(--e-out), width var(--d-2) var(--e-out);
}
.burger__box span:nth-child(1) { top: 0; }
.burger__box span:nth-child(2) { top: 6px; width: 70%; }
.burger__box span:nth-child(3) { top: 12px; }
.burger[aria-expanded="true"] .burger__box span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__box span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] .burger__box span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1040px) {
  .burger { display: inline-flex; }
  .nav {
    position: fixed; inset: 0; z-index: 99;
    flex-direction: column; align-items: stretch; justify-content: center;
    gap: var(--s-2);
    padding: 6rem var(--gut) 3rem;
    background: var(--ink);
    overflow-y: auto;
    opacity: 0; visibility: hidden;
    clip-path: circle(0% at calc(100% - 3.5rem) 3rem);
    transition: clip-path var(--d-3) var(--e-out), opacity var(--d-2) var(--e-out), visibility var(--d-2);
  }
  .nav.is-open { opacity: 1; visibility: visible; clip-path: circle(150% at calc(100% - 3.5rem) 3rem); }
  .nav__link {
    color: var(--on-dark); font-size: 1.6rem; font-weight: 800; letter-spacing: -0.03em;
    padding: .5rem 0; border-bottom: 1px solid var(--line-dark); border-radius: 0;
    opacity: 0; transform: translate3d(0, 1.2rem, 0);
    transition: opacity var(--d-2) var(--e-out), transform var(--d-2) var(--e-out), color var(--d-1) var(--e-out);
  }
  .nav.is-open .nav__link { opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * 45ms + 120ms); }
  .nav__link::before { display: none; }
  .nav__link[aria-current="page"] { color: var(--brand-soft); }
  .nav__link[aria-current="page"]::after { left: 0; right: auto; width: 2rem; bottom: 0; }
  .nav__cta { margin: var(--s-4) 0 0; align-self: flex-start; }
  .nav.is-open .nav__cta { opacity: 1; transform: none; }
  .nav__cta.nav__link { border: 0; }
}

/* Fortschritts-Balken oben */
.progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 101;
  background: transparent; pointer-events: none;
}
.progress__bar {
  height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--brand), var(--accent));
  transform: scaleX(var(--scroll, 0)); transform-origin: left center;
}

/* -------------------------------------------------------------------------
   7. Platzhalter fuer Bilder
   ------------------------------------------------------------------------- */
.ph {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .5rem;
  width: 100%;
  aspect-ratio: var(--ph-ratio, 4 / 3);
  padding: var(--s-4);
  border-radius: var(--r-3);
  background: var(--bg-2);
  border: 1px dashed var(--line);
  color: var(--ink-2);
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}
.ph::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(var(--hair) 1px, transparent 1px),
    linear-gradient(90deg, var(--hair) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: .8;
}
.ph::after {
  content: ""; position: absolute; z-index: -1;
  width: 80%; aspect-ratio: 1; border-radius: 50%;
  background: var(--wolke-blau); opacity: .5;
  top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0);
}
.ph__icon { width: 2rem; height: 2rem; color: var(--brand); opacity: .75; }
.ph__txt { font-family: var(--f-mono); font-size: var(--t-small); line-height: 1.4; max-width: 30ch; }
.ph__note {
  font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: .1em;
  text-transform: uppercase; color: var(--brand-deep);
}
.ph--dark { background: var(--ink-1); border-color: var(--line-dark); color: var(--on-dark-2); }
.ph--dark .ph__note { color: var(--brand-soft); }
.ph--dark::after { background: var(--wolke-pink); }
.ph--wide  { --ph-ratio: 16 / 9; }
.ph--sq    { --ph-ratio: 1; }
.ph--port  { --ph-ratio: 3 / 4; }
.ph--tall  { --ph-ratio: 2 / 3; }
.ph--panorama { --ph-ratio: 21 / 9; }

/* Wenn im Admin ein Bild hinterlegt wurde, ersetzt cms.js den Platzhalter */
.ph-img {
  width: 100%; aspect-ratio: var(--ph-ratio, 4 / 3);
  object-fit: cover; border-radius: var(--r-3); background: var(--bg-2);
}

/* -------------------------------------------------------------------------
   8. Karten und Flaechen
   ------------------------------------------------------------------------- */
.card {
  position: relative;
  padding: var(--s-5);
  border-radius: var(--r-3);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--sh-1);
  transition: transform var(--d-3) var(--e-out), box-shadow var(--d-3) var(--e-out),
              border-color var(--d-2) var(--e-out);
}
.card:hover { box-shadow: var(--sh-2); border-color: var(--brand); }
.card > :last-child { margin-bottom: 0; }
.card--dark { background: var(--ink-1); border-color: var(--line-dark); color: var(--on-dark); }
.card--dark h3, .card--dark h4 { color: var(--on-dark); }
.card--dark .muted { color: var(--on-dark-2); }
.card--brand { background: var(--brand); border-color: var(--brand); color: var(--surface); }
.card--brand h3, .card--brand h4 { color: var(--surface); }
.card--brand .muted, .card--brand .lead { color: var(--surface); }
.card--accent { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.card--accent h2, .card--accent h3, .card--accent h4 { color: var(--ink); }
/* Auf der Akzentflaeche traegt der Text immer die dunkle Farbe (4.8:1) */
.card--accent .muted, .card--accent .lead, .card--accent a { color: var(--ink); }
.card--accent .card__num { color: var(--ink); }
.card--flat { box-shadow: none; }
.card--pad-lg { padding: clamp(1.75rem, 4vw, 3rem); }

.card__num {
  font-family: var(--f-mono); font-size: var(--t-label); font-weight: 600;
  letter-spacing: .14em; color: var(--brand-deep); display: block; margin-bottom: var(--s-2);
}
.card--dark .card__num, .card--brand .card__num { color: var(--brand-soft); }
.card--accent .card__num { color: var(--ink); }

.chip {
  display: inline-flex; align-items: center; gap: .4em;
  padding: .35rem .8rem;
  border-radius: var(--r-pill);
  background: var(--bg-2); border: 1px solid var(--line);
  font-family: var(--f-mono); font-size: var(--t-label); font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2);
}
.chip--brand { background: var(--brand); border-color: var(--brand); color: var(--surface); }
.chip--accent { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.sec--dark .chip { background: var(--ink-1); border-color: var(--line-dark); color: var(--on-dark-2); }
.chip-row { display: flex; flex-wrap: wrap; gap: var(--s-1); }

.pill-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-1); }
.pill-list li { margin: 0; }

/* Liste mit Haken */
.ticks { list-style: none; margin: 0; padding: 0; }
.ticks li { position: relative; padding-left: 1.9rem; margin-bottom: .6rem; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .5em;
  width: 1.1rem; height: .55rem;
  border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}
.sec--dark .ticks li::before { border-color: var(--accent); }

/* -------------------------------------------------------------------------
   9. 3D-Bausteine
   ------------------------------------------------------------------------- */
/* Die Perspektive sitzt bewusst am einzelnen 3D-Element, nicht am ganzen
   Abschnitt: sonst landen auch Ueberschriften und Flaechentexte in der
   3D-Ebene, was das Zeichnen unnoetig teuer macht. */
.scene { position: relative; }

.d3 { transform-style: preserve-3d; will-change: transform; }

/* Karte, die sich unter dem Zeiger neigt */
.tilt {
  transform-style: preserve-3d;
  transition: transform var(--d-3) var(--e-out), box-shadow var(--d-3) var(--e-out);
  will-change: transform;
}
.tilt.is-tilting { transition: transform 80ms linear, box-shadow var(--d-3) var(--e-out); }
.tilt__inner { transform: translate3d(0, 0, 40px); transform-style: preserve-3d; }
.tilt__glare {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  border-radius: inherit; opacity: 0;
  background: radial-gradient(circle at var(--pointer-x) var(--pointer-y), var(--glare), transparent 55%);
  transition: opacity var(--d-2) var(--e-out);
}
.tilt:hover .tilt__glare { opacity: 1; }

/* Ebenen, die beim Scrollen unterschiedlich weit wandern */
.plx { will-change: transform; }

/* Wuerfel */
.cube {
  position: relative;
  width: var(--cube, 190px); height: var(--cube, 190px);
  transform-style: preserve-3d;
  margin-inline: auto;
  animation: cube-spin 26s linear infinite;
}
.cube__f {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  border-radius: var(--r-2);
  border: 1px solid var(--hair-light);
  font-family: var(--f-mono); font-size: var(--t-label); font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  backface-visibility: visible;
}
.cube__f:nth-child(1) { background: var(--brand);  color: var(--surface); transform: translate3d(0,0,calc(var(--cube, 190px) / 2)); }
.cube__f:nth-child(2) { background: var(--accent);  color: var(--ink);    transform: rotateY(90deg)  translate3d(0,0,calc(var(--cube, 190px) / 2)); }
.cube__f:nth-child(3) { background: var(--ink-1);   color: var(--on-dark);transform: rotateY(180deg) translate3d(0,0,calc(var(--cube, 190px) / 2)); }
.cube__f:nth-child(4) { background: var(--brand-deep); color: var(--surface); transform: rotateY(-90deg) translate3d(0,0,calc(var(--cube, 190px) / 2)); }
.cube__f:nth-child(5) { background: var(--bg);      color: var(--ink);    transform: rotateX(90deg)  translate3d(0,0,calc(var(--cube, 190px) / 2)); }
.cube__f:nth-child(6) { background: var(--brand-soft); color: var(--ink); transform: rotateX(-90deg) translate3d(0,0,calc(var(--cube, 190px) / 2)); }

@keyframes cube-spin {
  from { transform: perspective(900px) rotateX(-22deg) rotateY(0deg); }
  to   { transform: perspective(900px) rotateX(-22deg) rotateY(360deg); }
}

/* Weiche Farbflaechen im Hintergrund */
.blobs { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.blob { position: absolute; border-radius: 50%; }
.blob--1 { width: 46vw; height: 46vw; min-width: 340px; min-height: 340px; background: var(--wolke-blau); top: -16%; left: -12%; }
.blob--2 { width: 40vw; height: 40vw; min-width: 300px; min-height: 300px; background: var(--wolke-pink); top: 34%;  right: -14%; }
.blob--3 { width: 32vw; height: 32vw; min-width: 240px; min-height: 240px; background: var(--wolke-hell); bottom: -12%; left: 24%; }
.sec--dark .blobs { opacity: .55; }

/* Raster-Boden in der Tiefe */
.floor {
  position: absolute; left: 50%; bottom: -12%;
  width: 190%; height: 55%;
  transform: translate3d(-50%, 0, 0) rotateX(72deg);
  transform-origin: 50% 100%;
  background-image:
    linear-gradient(var(--hair-light) 1px, transparent 1px),
    linear-gradient(90deg, var(--hair-light) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to top, rgba(0,0,0,1), transparent 72%);
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1), transparent 72%);
  pointer-events: none; z-index: 0;
}

/* -------------------------------------------------------------------------
   10. Aufmacher (Hero)
   ------------------------------------------------------------------------- */
.hero {
  position: relative;
  padding-top: clamp(8rem, 15vh, 11rem);
  padding-bottom: var(--sec);
  overflow: hidden;
}
.hero--tall { min-height: 100svh; display: flex; align-items: center; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; width: 100%; }
@media (max-width: 1040px) { .hero__grid { grid-template-columns: minmax(0, 1fr); } }

.hero__title { margin: 0 0 var(--s-4); }
.hero__lead { max-width: 46ch; margin-bottom: var(--s-5); }

.hero__scroll {
  display: inline-flex; align-items: center; gap: .7rem;
  margin-top: var(--s-6);
  font-family: var(--f-mono); font-size: var(--t-label);
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2);
  text-decoration: none;
}
.hero__scroll .dot {
  width: 1.6rem; height: 2.6rem; border: 1px solid var(--line); border-radius: var(--r-pill);
  position: relative; flex: none;
}
.hero__scroll .dot::after {
  content: ""; position: absolute; left: 50%; top: .5rem;
  width: 4px; height: 4px; border-radius: 50%; background: var(--accent);
  transform: translateX(-50%);
  animation: scroll-dot 1.9s var(--e-soft) infinite;
}
@keyframes scroll-dot {
  0%   { transform: translate3d(-50%, 0, 0); opacity: 0; }
  25%  { opacity: 1; }
  75%  { transform: translate3d(-50%, 1rem, 0); opacity: 1; }
  100% { transform: translate3d(-50%, 1.2rem, 0); opacity: 0; }
}

/* Gestapelte Karten in 3D — Aufmacher rechts */
.stack3d { position: relative; aspect-ratio: 4 / 5; perspective: 1400px; perspective-origin: 50% 45%; }
.stack3d__card {
  position: absolute; inset: 0;
  border-radius: var(--r-3);
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--sh-3);
  overflow: hidden;
  display: flex; flex-direction: column;
  will-change: transform;
}
.stack3d__card:nth-child(1) { --z: -160px; --ry: 14deg;  --tx: -14%; background: var(--ink); border-color: var(--line-dark); }
.stack3d__card:nth-child(2) { --z: -80px;  --ry: 8deg;   --tx: -6%;  background: var(--brand); border-color: var(--brand); }
.stack3d__card:nth-child(3) { --z: 0px;    --ry: 0deg;   --tx: 0%; }
.stack3d__card { transform: translate3d(var(--tx), 0, var(--z)) rotateY(var(--ry)); }

.stack3d__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--line);
}
.stack3d__card:nth-child(1) .stack3d__head { border-color: var(--line-dark); color: var(--on-dark); }
.stack3d__card:nth-child(2) .stack3d__head { border-color: var(--hair-light); color: var(--surface); }
.stack3d__body { flex: 1; padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-3); }
.stack3d__body .ph { flex: 1; aspect-ratio: auto; }

.dots { display: inline-flex; gap: .3rem; }
.dots i { width: .5rem; height: .5rem; border-radius: 50%; background: var(--line); display: block; }
.dots i:nth-child(2) { background: var(--accent); }
.dots i:nth-child(3) { background: var(--brand); }

/* -------------------------------------------------------------------------
   11. Laufband
   ------------------------------------------------------------------------- */
.marquee {
  position: relative; overflow: hidden;
  padding-block: var(--s-4);
  border-block: 1px solid var(--line);
  background: var(--surface);
  --mq-dur: 34s;
}
.marquee--dark { background: var(--ink); border-color: var(--line-dark); }
.marquee--brand { background: var(--brand); border-color: var(--brand); }
.marquee--accent { background: var(--accent); border-color: var(--accent); }
.marquee__track { display: flex; width: max-content; animation: mq var(--mq-dur) linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__group { display: flex; align-items: center; gap: var(--s-5); padding-right: var(--s-5); flex: none; }
.marquee__item {
  display: inline-flex; align-items: center; gap: var(--s-3);
  font-size: clamp(1.4rem, 3vw, 2.6rem); font-weight: 800; letter-spacing: -0.035em;
  color: var(--ink); white-space: nowrap;
}
.marquee--dark .marquee__item { color: var(--on-dark); }
.marquee--brand .marquee__item { color: var(--surface); }
.marquee--accent .marquee__item { color: var(--ink); }
.marquee__item .sep { color: var(--accent); font-size: .7em; }
.marquee--accent .marquee__item .sep { color: var(--brand); }
.marquee--brand .marquee__item .sep { color: var(--accent); }
@keyframes mq { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }

.marquee--tilt { transform: rotate(-2deg) scale(1.04); }

/* -------------------------------------------------------------------------
   12. Leistungs-Kacheln
   ------------------------------------------------------------------------- */
.svc {
  position: relative;
  display: flex; flex-direction: column; gap: var(--s-3);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: var(--r-3);
  background: var(--surface);
  border: 1px solid var(--line);
  overflow: hidden;
  isolation: isolate;
  transform-style: preserve-3d;
  transition: transform var(--d-3) var(--e-out), box-shadow var(--d-3) var(--e-out), color var(--d-3) var(--e-out);
}
.svc::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--ink);
  transform: translate3d(0, 100%, 0);
  transition: transform var(--d-3) var(--e-out);
}
.svc:hover { box-shadow: var(--sh-3); color: var(--on-dark); }
.svc:hover::before { transform: translate3d(0, 0, 0); }
.svc:hover h3 { color: var(--on-dark); }
.svc:hover .svc__num { color: var(--accent); }
.svc:hover .muted { color: var(--on-dark-2); }
.svc:hover .svc__icon { border-color: var(--accent); background: var(--accent); color: var(--ink); }
.svc__num {
  font-family: var(--f-mono); font-size: var(--t-label); font-weight: 600; letter-spacing: .16em;
  color: var(--brand-deep); transition: color var(--d-3) var(--e-out);
}
.svc__icon {
  width: 3.1rem; height: 3.1rem; flex: none;
  display: grid; place-items: center;
  border-radius: var(--r-2);
  border: 1px solid var(--line);
  background: var(--bg-2); color: var(--brand);
  transition: background-color var(--d-3) var(--e-out), color var(--d-3) var(--e-out),
              border-color var(--d-3) var(--e-out), transform var(--d-3) var(--e-back);
}
.svc:hover .svc__icon { transform: perspective(700px) translate3d(0, 0, 30px) rotate(-8deg); }
.svc__icon svg { width: 1.5rem; height: 1.5rem; }
.svc h3 { margin: 0; transition: color var(--d-3) var(--e-out); }
.svc p { margin: 0; }
.svc__more { margin-top: auto; padding-top: var(--s-2); }

/* -------------------------------------------------------------------------
   13. Projekte
   ------------------------------------------------------------------------- */
.proj {
  position: relative;
  display: block;
  border-radius: var(--r-3);
  background: var(--surface);
  border: 1px solid var(--line);
  overflow: hidden;
  text-decoration: none; color: inherit;
  transform-style: preserve-3d;
  transition: transform var(--d-3) var(--e-out), box-shadow var(--d-3) var(--e-out), border-color var(--d-2) var(--e-out);
}
.proj:hover { box-shadow: var(--sh-3); border-color: var(--brand); color: inherit; }
.proj__media { position: relative; overflow: hidden; }
.proj__media .ph { border-radius: 0; border: 0; border-bottom: 1px dashed var(--line); }
.proj__media .ph-img { border-radius: 0; }
.proj__media::after {
  content: ""; position: absolute; inset: 0;
  background: var(--brand); opacity: 0; mix-blend-mode: multiply;
  transition: opacity var(--d-3) var(--e-out);
  pointer-events: none;
}
.proj:hover .proj__media::after { opacity: .12; }
.proj__body { padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-2); }
.proj__top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.proj__title { margin: 0; font-size: var(--t-h3); }
.proj__go {
  width: 2.5rem; height: 2.5rem; flex: none;
  display: grid; place-items: center;
  border-radius: 50%; border: 1px solid var(--line);
  color: var(--brand-deep);
  transition: transform var(--d-2) var(--e-back), background-color var(--d-2) var(--e-out),
              color var(--d-2) var(--e-out), border-color var(--d-2) var(--e-out);
}
.proj:hover .proj__go { background: var(--accent); border-color: var(--accent); color: var(--ink); transform: perspective(700px) rotate(45deg) translate3d(0,0,20px); }

.proj--wide { grid-column: span 2; }
@media (max-width: 620px) { .proj--wide { grid-column: span 1; } }

/* Filter-Leiste */
.filters { display: flex; flex-wrap: wrap; gap: var(--s-1); margin-bottom: var(--s-5); }
.filter {
  padding: .5rem 1.05rem; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--surface);
  font: inherit; font-size: var(--t-small); font-weight: 600; color: var(--ink-2);
  cursor: pointer;
  transition: background-color var(--d-1) var(--e-out), color var(--d-1) var(--e-out),
              border-color var(--d-1) var(--e-out), transform var(--d-1) var(--e-back);
}
.filter:hover { border-color: var(--brand); color: var(--brand-deep); transform: translateY(-2px); }
.filter[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--on-dark); }

/* -------------------------------------------------------------------------
   14. Ablauf / Zeitstrahl
   ------------------------------------------------------------------------- */
.steps { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); }
.steps::before {
  content: ""; position: absolute; left: 1.65rem; top: 1.5rem; bottom: 1.5rem;
  width: 2px; background: var(--line);
}
.sec--dark .steps::before { background: var(--line-dark); }
.step { position: relative; display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); gap: var(--s-4); align-items: start; margin: 0; }
.step__dot {
  width: 3.4rem; height: 3.4rem; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--surface); border: 2px solid var(--line);
  font-family: var(--f-mono); font-weight: 600; font-size: .9rem; color: var(--brand-deep);
  transition: transform var(--d-3) var(--e-back), background-color var(--d-3) var(--e-out),
              border-color var(--d-3) var(--e-out), color var(--d-3) var(--e-out);
  z-index: 1;
}
.sec--dark .step__dot { background: var(--ink-1); border-color: var(--line-dark); color: var(--brand-soft); }
.step.is-in .step__dot { background: var(--brand); border-color: var(--brand); color: var(--surface); transform: scale(1.06); }
.step__body { padding-top: .35rem; }
.step__body h3 { margin-bottom: .35rem; }
@media (max-width: 620px) {
  .steps::before { left: 1.35rem; }
  .step { grid-template-columns: 2.8rem minmax(0, 1fr); gap: var(--s-3); }
  .step__dot { width: 2.8rem; height: 2.8rem; font-size: .8rem; }
}

/* Ablauf als klebende 3D-Karten */
.sticky-steps { display: grid; gap: var(--s-4); }
.sticky-card {
  position: sticky; top: clamp(6rem, 14vh, 9rem);
  border-radius: var(--r-3);
  padding: clamp(1.75rem, 4vw, 3rem);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--sh-2);
  transform-origin: 50% 0;
  will-change: transform;
}
.sticky-card:nth-child(2) { background: var(--bg-2); }

.sticky-card:nth-child(3) { background: var(--ink); color: var(--on-dark); border-color: var(--ink); }
.sticky-card:nth-child(3) h2, .sticky-card:nth-child(3) h3 { color: var(--on-dark); }
.sticky-card:nth-child(3) .muted, .sticky-card:nth-child(3) .lead { color: var(--on-dark-2); }
.sticky-card:nth-child(3) .label { color: var(--brand-soft); }

.sticky-card:nth-child(4) { background: var(--brand); color: var(--surface); border-color: var(--brand); }
.sticky-card:nth-child(4) h2, .sticky-card:nth-child(4) h3 { color: var(--surface); }
.sticky-card:nth-child(4) .muted, .sticky-card:nth-child(4) .lead { color: var(--surface); }
.sticky-card:nth-child(4) .label { color: var(--surface); }

.sticky-card:nth-child(5) { background: var(--accent); color: var(--ink); border-color: var(--accent); }
.sticky-card:nth-child(5) h2, .sticky-card:nth-child(5) h3 { color: var(--ink); }
.sticky-card:nth-child(5) .muted, .sticky-card:nth-child(5) .lead { color: var(--ink); }
.sticky-card:nth-child(5) .label { color: var(--ink); }
.sticky-card:nth-child(5) .ticks li::before { border-color: var(--ink); }
.sticky-card:nth-child(4) .ticks li::before { border-color: var(--accent); }
.sticky-card:nth-child(5) .label::before { background: var(--ink); }

/* -------------------------------------------------------------------------
   15. Klappbereich (FAQ)
   ------------------------------------------------------------------------- */
.acc { border-top: 1px solid var(--line); }
.sec--dark .acc { border-color: var(--line-dark); }
.acc__item { border-bottom: 1px solid var(--line); }
.sec--dark .acc__item { border-color: var(--line-dark); }
.acc__btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-4) 0;
  background: none; border: 0;
  font: inherit; font-size: var(--t-h4); font-weight: 600; letter-spacing: -0.01em;
  color: inherit; text-align: left; cursor: pointer;
  transition: color var(--d-1) var(--e-out);
}
.acc__btn:hover { color: var(--brand-deep); }
.sec--dark .acc__btn:hover { color: var(--brand-soft); }
.acc__sign { position: relative; width: 1.15rem; height: 1.15rem; flex: none; }
.acc__sign::before, .acc__sign::after {
  content: ""; position: absolute; inset: 50% 0 auto 0; height: 2px; background: var(--accent);
  border-radius: 2px; transform: translateY(-50%);
  transition: transform var(--d-2) var(--e-back), opacity var(--d-2) var(--e-out);
}
.acc__sign::after { transform: translateY(-50%) rotate(90deg); }
.acc__btn[aria-expanded="true"] .acc__sign::after { transform: translateY(-50%) rotate(0deg); opacity: 0; }
.acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--d-3) var(--e-out); }
.acc__panel[data-open="true"] { grid-template-rows: 1fr; }
.acc__panel > div { overflow: hidden; }
.acc__panel .muted { padding-bottom: var(--s-4); max-width: 68ch; }

/* -------------------------------------------------------------------------
   16. Formulare
   ------------------------------------------------------------------------- */
.form { display: grid; gap: var(--s-4); }
.field { display: grid; gap: .4rem; }
.field > label { font-weight: 600; font-size: .95rem; }
.field .hint { font-size: var(--t-small); color: var(--ink-2); }
.sec--dark .field .hint { color: var(--on-dark-2); }
.req { color: var(--brand-deep); }
.sec--dark .req { color: var(--brand-soft); }

.input, .select, .textarea {
  width: 100%;
  padding: .85rem 1rem;
  border-radius: var(--r-2);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  transition: border-color var(--d-1) var(--e-out), box-shadow var(--d-1) var(--e-out),
              transform var(--d-1) var(--e-out);
}
.input:hover, .select:hover, .textarea:hover { border-color: var(--brand-soft); }
.input:focus, .select:focus, .textarea:focus {
  outline: 3px solid var(--focus); outline-offset: 2px;
  border-color: var(--brand);
}
.textarea { min-height: 9rem; resize: vertical; }
.select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--brand) 50%),
                    linear-gradient(135deg, var(--brand) 50%, transparent 50%);
  background-position: calc(100% - 1.15rem) 1.35rem, calc(100% - .8rem) 1.35rem;
  background-size: .35rem .35rem, .35rem .35rem;
  background-repeat: no-repeat;
  padding-right: 2.5rem;
}
.select:disabled, .input:disabled { background: var(--bg-2); color: var(--ink-2); cursor: not-allowed; }

.field--row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
@media (max-width: 620px) { .field--row { grid-template-columns: minmax(0, 1fr); } }

/* Ehrlichkeitsfalle — fuer Menschen unsichtbar, fuer Skripte sichtbar */
.trap {
  position: absolute !important; left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden;
}

.check { display: grid; grid-template-columns: 1.35rem minmax(0, 1fr); gap: .75rem; align-items: start; }
.check input { width: 1.35rem; height: 1.35rem; margin: .15rem 0 0; accent-color: var(--brand); }
.check label { font-size: var(--t-small); line-height: 1.5; font-weight: 400; }

.form__note { font-size: var(--t-small); color: var(--ink-2); }
.sec--dark .form__note { color: var(--on-dark-2); }

.notice {
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-2);
  border: 1px solid var(--line);
  background: var(--bg-2);
  font-size: .95rem;
}
.notice--ok { border-color: var(--brand); background: var(--surface); border-left: 4px solid var(--brand); }
.notice--err { border-color: var(--accent); background: var(--surface); border-left: 4px solid var(--accent); }
.notice[hidden] { display: none !important; }
.sec--dark .notice { background: var(--ink-1); border-color: var(--line-dark); color: var(--on-dark); }

.err-msg { font-size: var(--t-small); color: var(--brand-deep); font-weight: 600; }
.sec--dark .err-msg { color: var(--brand-soft); }
.err-msg:empty { display: none; }

/* -------------------------------------------------------------------------
   17. Buchung
   ------------------------------------------------------------------------- */
.booking { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); }
@media (max-width: 900px) { .booking { grid-template-columns: minmax(0, 1fr); } }

.cal { border-radius: var(--r-3); border: 1px solid var(--line); background: var(--surface); padding: var(--s-4); }
.cal__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); margin-bottom: var(--s-3); }
.cal__month { font-weight: 700; font-size: 1.05rem; letter-spacing: -0.02em; }
.cal__nav { display: flex; gap: .35rem; }
.cal__btn {
  width: 2.4rem; height: 2.4rem; display: grid; place-items: center;
  border-radius: var(--r-2); border: 1px solid var(--line); background: var(--surface);
  color: var(--ink); cursor: pointer; font: inherit;
  transition: background-color var(--d-1) var(--e-out), color var(--d-1) var(--e-out), border-color var(--d-1) var(--e-out);
}
.cal__btn:hover:not(:disabled) { background: var(--ink); color: var(--on-dark); border-color: var(--ink); }
.cal__btn:disabled { opacity: .4; cursor: not-allowed; }
.cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .3rem; }
.cal__dow {
  text-align: center; font-family: var(--f-mono); font-size: var(--t-label);
  letter-spacing: .06em; color: var(--ink-2); padding-bottom: .35rem; text-transform: uppercase;
}
.cal__day {
  aspect-ratio: 1; display: grid; place-items: center;
  border-radius: var(--r-1); border: 1px solid transparent; background: var(--bg-2);
  font: inherit; font-size: .9rem; font-weight: 600; color: var(--ink);
  cursor: pointer;
  transition: transform var(--d-1) var(--e-back), background-color var(--d-1) var(--e-out),
              color var(--d-1) var(--e-out), border-color var(--d-1) var(--e-out);
}
.cal__day:hover:not(:disabled) { background: var(--brand); color: var(--surface); transform: translateY(-2px); }
.cal__day:disabled { background: transparent; color: var(--line); cursor: not-allowed; }
.cal__day[aria-pressed="true"] { background: var(--accent); color: var(--ink); border-color: var(--ink); }
.cal__day.is-empty { background: transparent; border: 0; cursor: default; }

.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: .5rem; }
.slot {
  padding: .7rem .5rem; border-radius: var(--r-2);
  border: 1px solid var(--line); background: var(--surface);
  font: inherit; font-size: .95rem; font-weight: 600; font-family: var(--f-mono);
  color: var(--ink); cursor: pointer;
  transition: transform var(--d-1) var(--e-back), background-color var(--d-1) var(--e-out),
              color var(--d-1) var(--e-out), border-color var(--d-1) var(--e-out);
}
.slot:hover:not(:disabled) { border-color: var(--brand); color: var(--brand-deep); transform: translateY(-2px); }
.slot[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: var(--surface); }
.slot:disabled { opacity: .4; cursor: not-allowed; text-decoration: line-through; }

.book-summary {
  border-radius: var(--r-2); border: 1px dashed var(--line);
  background: var(--bg-2); padding: var(--s-3) var(--s-4);
  font-size: .95rem;
}
.book-summary dl { display: grid; grid-template-columns: auto 1fr; gap: .35rem var(--s-3); margin: 0; }
.book-summary dt { font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); align-self: center; }
.book-summary dd { margin: 0; font-weight: 600; }

.book-steps { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-4); list-style: none; padding: 0; }
.book-steps li {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-2); margin: 0;
}
.book-steps li b {
  width: 1.7rem; height: 1.7rem; display: grid; place-items: center; border-radius: 50%;
  background: var(--bg-2); border: 1px solid var(--line); font-size: .7rem;
}
.book-steps li[data-done="true"] { color: var(--brand-deep); }
.book-steps li[data-done="true"] b { background: var(--brand); border-color: var(--brand); color: var(--surface); }

/* -------------------------------------------------------------------------
   18. Kontakt-Bloecke
   ------------------------------------------------------------------------- */
.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.contact-list li { margin: 0; display: grid; grid-template-columns: 2.8rem minmax(0, 1fr); gap: var(--s-3); align-items: start; }
.contact-list .ico {
  width: 2.8rem; height: 2.8rem; display: grid; place-items: center;
  border-radius: var(--r-2); background: var(--bg-2); border: 1px solid var(--line); color: var(--brand);
  flex: none;
}
.sec--dark .contact-list .ico { background: var(--ink-1); border-color: var(--line-dark); color: var(--brand-soft); }
.contact-list .ico svg { width: 1.25rem; height: 1.25rem; }
.contact-list b { display: block; font-weight: 600; }
.contact-list a { font-weight: 600; }

/* -------------------------------------------------------------------------
   19. Fusszeile
   ------------------------------------------------------------------------- */
.ftr { background: var(--ink); color: var(--on-dark); padding-top: var(--sec); padding-bottom: var(--s-5); position: relative; overflow: hidden; }
.ftr h2, .ftr h3 { color: var(--on-dark); }
.ftr a { color: var(--on-dark-2); text-decoration: none; }
.ftr a:hover { color: var(--accent); }
.ftr__top { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: var(--s-5); padding-bottom: var(--s-6); }
@media (max-width: 900px) { .ftr__top { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ftr__top { grid-template-columns: minmax(0, 1fr); } }
.ftr__brand { display: inline-flex; align-items: center; gap: .65rem; font-weight: 800; font-size: 1.3rem; letter-spacing: -0.04em; color: var(--on-dark); text-decoration: none; margin-bottom: var(--s-3); }
.ftr__brand:hover { color: var(--on-dark); }
.ftr__col h3 { font-size: var(--t-label); font-family: var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--brand-soft); font-weight: 600; margin-bottom: var(--s-3); }
.ftr__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.ftr__list li { margin: 0; }
.ftr__bottom {
  display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; justify-content: space-between;
  padding-top: var(--s-4); border-top: 1px solid var(--line-dark);
  font-size: var(--t-small); color: var(--on-dark-2);
}
.ftr__legal { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* Grosser Aufruf oberhalb der Fusszeile */
.cta-big { position: relative; text-align: center; padding-bottom: var(--s-7); }
.cta-big .display { margin-bottom: var(--s-4); }

/* -------------------------------------------------------------------------
   20. Bewegung — Einblenden beim Scrollen
   ------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 2.2rem, 0);
  transition: opacity var(--d-4) var(--e-out), transform var(--d-4) var(--e-out);
  transition-delay: var(--rd, 0ms);
}
[data-reveal="left"]  { transform: translate3d(-2.5rem, 0, 0); }
[data-reveal="right"] { transform: translate3d(2.5rem, 0, 0); }
[data-reveal="scale"] { transform: scale(.92); }
[data-reveal="flip"]  { transform: perspective(1200px) rotateX(28deg) translate3d(0, 2.5rem, 0); transform-origin: 50% 100%; }
[data-reveal="deep"]  { transform: perspective(1200px) translate3d(0, 3rem, -220px) rotateX(12deg); }
[data-reveal].is-in { opacity: 1; transform: none; }

/* Ueberschrift, die wortweise hereinklappt */
.split-word { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .06em; }
.split-word > span {
  display: inline-block;
  transform: translate3d(0, 110%, 0) rotateX(-45deg);
  transform-origin: 50% 0;
  opacity: 0;
  transition: transform .85s var(--e-out), opacity .5s var(--e-out);
  transition-delay: var(--wd, 0ms);
}
.is-in .split-word > span { transform: none; opacity: 1; }

/* Linie, die aufzieht */
.rule { height: 1px; background: var(--line); transform: scaleX(0); transform-origin: left; transition: transform var(--d-4) var(--e-out); }
.sec--dark .rule { background: var(--line-dark); }
.is-in .rule, .rule.is-in { transform: scaleX(1); }

/* Zeiger-Schein */
.spot {
  position: fixed; top: 0; left: 0; z-index: 1; pointer-events: none;
  width: 34rem; height: 34rem; margin: -17rem 0 0 -17rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232, 62, 140, .16), transparent 62%);
  opacity: 0;
  transition: opacity var(--d-3) var(--e-out);
  will-change: transform;
}
.spot.is-on { opacity: 1; }

/* -------------------------------------------------------------------------
   21. Kleinteile
   ------------------------------------------------------------------------- */
.badge-note {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .45rem .9rem;
  border-radius: var(--r-pill);
  background: var(--bg-2); border: 1px dashed var(--line);
  font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-2);
}
.badge-note::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--accent); flex: none; }
.sec--dark .badge-note { background: var(--ink-1); border-color: var(--line-dark); color: var(--on-dark-2); }

/* Deutlich erkennbarer Platzhalter fuer Inhalte, die der Kunde liefert */
.todo {
  border: 2px dashed var(--accent);
  border-radius: var(--r-2);
  padding: var(--s-3) var(--s-4);
  background: var(--surface);
  font-size: .95rem;
}
.todo b { display: block; font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: .12em; text-transform: uppercase; color: var(--brand-deep); margin-bottom: .35rem; }
.sec--dark .todo { background: var(--ink-1); color: var(--on-dark-2); }
.sec--dark .todo b { color: var(--brand-soft); }

.kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .5rem var(--s-4); margin: 0; }
.kv dt { font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); padding-top: .2rem; }
.kv dd { margin: 0; font-weight: 600; }
.sec--dark .kv dt { color: var(--on-dark-2); }

.crumbs { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; font-size: var(--t-small); color: var(--ink-2); margin-bottom: var(--s-3); padding: 0; list-style: none; }
.crumbs li { margin: 0; display: inline-flex; align-items: center; gap: .5rem; }
.crumbs li + li::before { content: "/"; color: var(--line); }
.crumbs a { color: var(--ink-2); text-decoration: none; font-weight: 600; }
.crumbs a:hover { color: var(--brand-deep); }
.sec--dark .crumbs, .sec--dark .crumbs a { color: var(--on-dark-2); }

.social { display: flex; gap: .5rem; }
.social a {
  width: 2.6rem; height: 2.6rem; display: grid; place-items: center;
  border-radius: var(--r-2); border: 1px solid var(--line-dark);
  color: var(--on-dark-2);
  transition: transform var(--d-2) var(--e-back), background-color var(--d-2) var(--e-out),
              color var(--d-2) var(--e-out), border-color var(--d-2) var(--e-out);
}
.social a:hover { background: var(--accent); border-color: var(--accent); color: var(--ink); transform: translate3d(0, -3px, 0) rotate(-6deg); }
.social svg { width: 1.15rem; height: 1.15rem; }

.legal-doc { max-width: 72ch; }
.legal-doc h2 { font-size: var(--t-h3); margin-top: var(--s-6); }
.legal-doc h3 { font-size: var(--t-h4); margin-top: var(--s-5); }
.legal-doc address { font-style: normal; }

/* Tabelle */
.table-wrap { overflow-x: auto; border-radius: var(--r-2); border: 1px solid var(--line); }
table.tbl { width: 100%; border-collapse: collapse; font-size: .95rem; background: var(--surface); }
table.tbl th, table.tbl td { text-align: left; padding: .75rem 1rem; border-bottom: 1px solid var(--line); }
table.tbl th { font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); background: var(--bg-2); }
table.tbl tr:last-child td { border-bottom: 0; }

/* Anleitungs-Seite */
.doc-nav { position: sticky; top: 7rem; align-self: start; }
.doc-nav ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; counter-reset: dn; }
.doc-nav li { margin: 0; counter-increment: dn; }
.doc-nav a {
  display: block; padding: .5rem .75rem; border-radius: var(--r-1);
  text-decoration: none; color: var(--ink-2); font-weight: 600; font-size: .92rem;
  border-left: 2px solid var(--line);
  transition: background-color var(--d-1) var(--e-out), color var(--d-1) var(--e-out), border-color var(--d-1) var(--e-out);
}
.doc-nav a::before { content: counter(dn) ". "; font-family: var(--f-mono); color: var(--brand-deep); }
.doc-nav a:hover { background: var(--bg-2); color: var(--ink); border-left-color: var(--accent); }
@media (max-width: 960px) { .doc-nav { position: static; } }

.doc-step { counter-increment: ds; }
.doc-sec { scroll-margin-top: 7rem; }
.doc-sec + .doc-sec { margin-top: var(--s-7); }

.code {
  display: block; font-family: var(--f-mono); font-size: .85rem;
  background: var(--ink); color: var(--on-dark);
  padding: var(--s-3) var(--s-4); border-radius: var(--r-2);
  overflow-x: auto; white-space: pre; margin: 0 0 var(--s-3);
}

/* 404 */
.oops { min-height: 78svh; display: grid; place-items: center; text-align: center; }
.oops__num {
  font-size: clamp(6rem, 26vw, 18rem); font-weight: 800; line-height: .85; letter-spacing: -0.06em;
  color: transparent; -webkit-text-stroke: 2px var(--brand);
  margin: 0 0 var(--s-3);
}

/* -------------------------------------------------------------------------
   22. Reduzierte Bewegung — ruhige Fassung
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .split-word > span { transform: none !important; opacity: 1 !important; }
  .rule, .is-in .rule { transform: scaleX(1) !important; }
  .mark::after { transform: scaleX(1) !important; }
  .cube { animation: none; transform: perspective(900px) rotateX(-18deg) rotateY(-28deg); }
  .marquee__track { animation: none; transform: none; }
  .blob { display: none; }
  .spot { display: none; }
  .floor { display: none; }
  .hero__scroll .dot::after { animation: none; opacity: 1; }
  .stack3d__card { transform: translate3d(var(--tx), 0, 0) !important; }
  .stack3d__card:nth-child(1), .stack3d__card:nth-child(2) { display: none; }
  .sticky-card { position: static; transform: none !important; }
  .progress { display: none; }
}