/* ==========================================================================
   TDS – Tomaselli Digital Solutions · Version 4
   Konzept: "Dark Editorial" – tiefes Anthrazit, warmes Papier als Gegenpol,
            Instrument Serif als Signatur, TDS-Violett als Markenanker.
   Schriften: lokal (fonts/webfonts.css) – kein Request an Google.
   ========================================================================== */

/* ---------------------------------------------------------------- Tokens */
:root {
  /* ─────────────────────────────────────────────────── Flächen (v6: durchgehend dunkel)
     v5 wechselte zwischen dunklen und hellen Abschnitten. v6 ist durchgehend
     dunkel - aber NICHT in einem einzigen Schwarz. Eine Seite, auf der jeder
     Block dieselbe Fläche hat, verliert ihre Gliederung: Alles fließt zu einem
     Brei zusammen, und genau die Blöcke, die ohnehin schon ruhig sind, wirken
     dann noch beliebiger.

     Deshalb eine Leiter aus vier Tiefen. Der Unterschied zwischen zwei Stufen
     ist klein genug, dass es nicht gestreift aussieht, und groß genug, dass
     das Auge die Kante findet:

       --ink        #08080B   die tiefste Fläche, Hero und Abschluss
       --ink-2      #0E0E13   Grundfläche der meisten Abschnitte
       --ink-3      #16161D   erhobene Flächen: Karten, Kästen
       --paper      #12121A   die ehemals hellen Abschnitte - eine eigene
                              Stufe, damit der Wechsel im Seitenfluss bleibt

     Warum überhaupt noch "paper" heißt, was jetzt dunkel ist: Der Name steckt
     in rund achtzig Regeln. Ihn umzubenennen wäre eine große Änderung ohne
     einen einzigen sichtbaren Vorteil - und jede davon eine Gelegenheit für
     einen Fehler. Der Name meint jetzt "die andere Fläche", nicht "hell". */
  --ink:        #08080B;
  --ink-2:      #0E0E13;
  --ink-3:      #16161D;
  --ink-line:   #262630;
  --paper:      #12121A;
  --paper-2:    #191922;
  --paper-line: #2C2C38;
  /* Höchste Stufe: Karten, die auf der wärmsten Fläche (--paper-2) liegen.
     Auf hellem Grund war eine Karte dunkler als ihr Untergrund und wirkte
     dadurch erhoben. Auf dunklem Grund kehrt sich das um - was tiefer liegt,
     liest sich als Loch. Erhoben heißt hier: heller. */
  --ink-4:      #21212B;

  /* ---------------------------------------------------------------- Marke
     Weg vom Violett: #6A0DE8 lag genau in dem Blau-Violett-Bereich, den fast
     jede generierte Landingpage benutzt – ein geübtes Auge erkennt das, bevor
     es den ersten Satz liest. Die Variablennamen heissen aus Kompatibilitaets-
     gruenden weiter --violet*, der Wert kommt jetzt aus --brand*.

     UMSCHALTEN: unten genau EINEN der vier Bloecke aktiv lassen.
       Petrol      ruhig, technisch-seriös          (aktiv)
       Terrakotta  warm, handwerklich
       Bernstein   hell, sehr praesent auf dunkel
       Waldgruen   zurueckhaltend, vertrauenswuerdig                        */

  /* --- Petrol (aktiv) --- */
  --brand:      #0E6E7C;
  --brand-rgb:  14, 110, 124;
  --brand-lt:   #5FC7D6;
  --brand-dk:   #0A5462;

  /* --- Terrakotta ---
  --brand:      #B4482A;
  --brand-lt:   #E8917A;
  --brand-rgb:  180, 72, 42;
  --brand-dk:   #8C3520;   */

  /* --- Bernstein ---
  --brand:      #B87514;
  --brand-lt:   #F0B65C;
  --brand-rgb:  184, 117, 20;
  --brand-dk:   #8E590E;   */

  /* --- Waldgruen ---
  --brand:      #2C6047;
  --brand-lt:   #7FC0A2;
  --brand-rgb:  44, 96, 71;
  --brand-dk:   #1E4432;   */

  --violet:     var(--brand);
  --violet-lt:  var(--brand-lt);
  --violet-dk:  var(--brand-dk);
  --signal:     #F5003E;

  /* Text auf den ehemals hellen Flächen - jetzt ebenfalls hell auf dunkel.
     Nicht reines Weiß: #FFFFFF auf fast schwarzem Grund flimmert beim Lesen
     längerer Absätze. Ein leicht gedämpftes Warmweiß liest sich ruhiger und
     erreicht auf --paper trotzdem über 15:1 Kontrast (Vorgabe wären 4,5:1). */
  --text:       #EDEBE6;
  --muted:      #A0A0AC;
  /* Text auf den tiefsten Flächen */
  --text-i:     #F4F2EE;
  --muted-i:    #A0A0AC;

  /* Typo */
  --serif: 'IBM Plex Serif', 'Iowan Old Style', Georgia, serif;
  --sans:  'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Maße */
  --shell:  1280px;
  --gutter: 40px;
  --head-h: 78px;
  --r-sm:   0;      /* eckig statt abgerundet (09.08.) */
  --r-md:   0;
  --r-lg:   0;

  /* Motion */
  --ease:     cubic-bezier(.22, 1, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* ------------------------------------------------------------- Grundlagen */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Muss ganz oben stehen: sonst gewinnt jede spätere display-Regel gegen das
   hidden-Attribut – Buchungsfenster, Player-Icons und Wissenspunkte wären
   dauerhaft sichtbar. */
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scrollbar-gutter: stable;
  scroll-padding-top: calc(var(--head-h) + 20px);
}

body {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--text-i);
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  font-feature-settings: "cv02", "cv03", "cv04", "ss01";
}

img, video, svg { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

::selection { background: var(--violet); color: #fff; }

:focus-visible {
  outline: 2px solid var(--violet-lt);
  outline-offset: 3px;
  border-radius: 0;
}
.section-paper :focus-visible { outline-color: var(--violet); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
  position: relative;
}

.skip-link {
  position: fixed; left: 16px; top: -80px; z-index: 200;
  background: var(--violet); color: #fff;
  padding: 12px 22px; border-radius: 0;
  font-weight: 600; transition: top .2s var(--ease);
}
.skip-link:focus { top: 0; }

/* ------------------------------------------------------------- Typografie */
h1, h2, h3, h4 { font-weight: 500; line-height: 1.06; letter-spacing: -.028em; }

h1 { font-size: clamp(2.9rem, 8.2vw, 6.6rem); font-weight: 600; letter-spacing: -.04em; }
h2 { font-size: clamp(2.1rem, 5vw, 4rem); font-weight: 600; letter-spacing: -.035em; }
h3 { font-size: clamp(1.25rem, 2.1vw, 1.6rem); font-weight: 600; letter-spacing: -.02em; }
h4 { font-size: .82rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }

/* Die Signatur des Auftritts: EIN kursives Serif-Wort pro Seite, in der h1.
   In v4 stand es in jeder Überschrift (43× über 8 Seiten) – bei so vielen
   Wiederholungen wird aus einer Signatur eine Schablone, und genau diese
   mechanische Gleichförmigkeit lässt eine Seite generiert wirken.
   Deshalb am 09.08. auf die h1 beschränkt; h2/h3 tragen es nicht mehr. */
h1 em, .serif-it {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.01em;
}

p { color: var(--muted-i); }
.section-paper p { color: var(--muted); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: .74rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted-i);
}
.eyebrow-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--violet-lt); }

.fineprint { font-size: .82rem; color: var(--muted-i); margin-top: 22px; }
.section-paper .fineprint { color: var(--muted); }

.is-placeholder { color: var(--signal) !important; font-style: italic; }

/* ---------------------------------------------------------------- Buttons */
/* Buttons bewusst NICHT vollrund, ohne farbigen Leuchtschein, ohne Hebe-Effekt
   beim Hover und ohne Pfeil-Symbol im Knopf. Diese vier Merkmale zusammen sind
   die typische Signatur generierter Seiten – Marcis Einwand vom 09.08.
   Das Violett bleibt als Markenfarbe, nur die Effekte sind raus. */
.btn {
  --btn-bg: transparent;
  --btn-fg: currentColor;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 28px;
  border-radius: 0;
  font-size: .95rem; font-weight: 600; letter-spacing: -.01em;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1px solid transparent;
  transition: background-color .2s, color .2s, border-color .2s;
  text-align: center;
}
.btn-lg { padding: 17px 34px; font-size: 1.02rem; }
.btn-sm { padding: 10px 18px; font-size: .85rem; }

.btn-solid { --btn-bg: var(--violet); --btn-fg: #fff; }
.btn-solid:hover { --btn-bg: var(--violet-dk); }

.btn-ghost { border-color: rgba(255, 255, 255, .3); color: var(--text-i); }
.btn-ghost:hover { border-color: var(--text-i); background: rgba(255, 255, 255, .07); }
.section-paper .btn-ghost { border-color: rgba(0, 0, 0, .22); color: var(--text); }
.section-paper .btn-ghost:hover { border-color: var(--text); background: rgba(0, 0, 0, .04); }

.btn-line { border-color: rgba(255, 255, 255, .28); }
.btn-line:hover { border-color: var(--text-i); background: rgba(255, 255, 255, .06); }

.btn-light { --btn-bg: var(--paper); --btn-fg: var(--ink); }
.btn-light:hover { --btn-bg: #fff; }

.btn-arrow {
  width: 18px; height: 10px; flex: none;
  background: currentColor;
  -webkit-mask: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10'%3E%3Cpath d='M0 5h15.5M12 1l4 4-4 4' stroke='%23000' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10'%3E%3Cpath d='M0 5h15.5M12 1l4 4-4 4' stroke='%23000' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  transition: transform .3s var(--ease);
}
.btn:hover .btn-arrow, .cell:hover .btn-arrow, a:hover > .btn-arrow { transform: translateX(5px); }

/* --------------------------------------------------------- Scroll-Balken */
.scroll-progress {
  position: fixed; inset: 0 auto auto 0; z-index: 120;
  height: 2px; width: 0;
  background: linear-gradient(90deg, var(--violet), var(--violet-lt));
}

/* ----------------------------------------------------------------- Header */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 110;
  height: var(--head-h);
  display: flex; align-items: center;
  transition: background-color .35s var(--ease), border-color .35s, height .35s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.is-stuck {
  height: 66px;
  background: rgba(11, 11, 15, .78);
  backdrop-filter: blur(18px) saturate(140%);
  border-bottom-color: var(--ink-line);
}
.nav-row { display: flex; align-items: center; gap: 28px; }

.brand { display: inline-flex; align-items: center; gap: 11px; flex: none; }
/* Eigenes Logo (25.09., Marcis Entscheidung vom 23.09.: "j - App-Kachel", Amboss
   auf Petrol-Kachel, liegt als favicon.svg) statt der frueheren abstrakten
   Drei-Balken-CSS-Marke. */
.brand-mark { display: block; width: 30px; height: 30px; border-radius: 22%; flex: none; transition: transform .35s var(--ease); }
.brand:hover .brand-mark { transform: scale(1.06); }
/* Wortmarke zweizeilig: »Digitalschmiede« ist zu lang, um einzeilig neben der
   Navigation zu stehen. Ortsname darunter, kleiner und gesperrt gesetzt. */
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-name { font-weight: 700; font-size: 1.08rem; letter-spacing: -.01em; }
.brand-sub {
  font-size: .62rem; font-weight: 600; letter-spacing: .26em;
  text-transform: uppercase; color: var(--brand-lt); margin-top: 3px;
}
.section-paper .brand-sub { color: var(--brand); }
@media (max-width: 420px) {
  .brand-name { font-size: .95rem; }
  .brand-sub  { font-size: .56rem; letter-spacing: .18em; }
}

.nav { margin-left: auto; }
.nav > ul { display: flex; align-items: center; gap: 4px; }
.nav a, .sub-toggle {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 15px; border-radius: 0;
  font-size: .93rem; font-weight: 500; color: var(--muted-i);
  transition: color .2s, background-color .2s;
}
.nav a:hover, .sub-toggle:hover { color: var(--text-i); background: rgba(255, 255, 255, .06); }
.nav a.is-current { color: var(--text-i); }
/* Nur die FLACHEN Nav-Punkte (Start, Website-Check, ...) bekommen den Punkt -
   ".nav a" traf frueher auch den aktiven Eintrag IM Untermenue (papierlos.html:
   "Papierlose Buchhaltung"). Dort ist .subnav a aber display:block statt
   inline-flex, der generierte Punkt landete als eigene Zeile UNTER der
   Beschreibung "Belege ohne Aktenordner" - der Eintrag wurde dadurch rund
   25px hoeher als seine Geschwister und die ganze Liste geriet aus dem Takt
   (25.09., Absatzfehler-Fund). Deshalb jetzt nur die direkten Kinder von
   .nav > ul > li. */
.nav > ul > li > a.is-current::after {
  content: ""; width: 4px; height: 4px; border-radius: 50%;
  background: var(--violet-lt); margin-left: 2px;
}
.caret {
  width: 8px; height: 8px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .3s var(--ease);
}

.has-sub { position: relative; }
.subnav {
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translate(-50%, 8px);
  width: 320px; padding: 10px;
  background: rgba(20, 20, 26, .92);
  backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid var(--ink-line); border-radius: var(--r-md);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .95);
  opacity: 0; visibility: hidden; pointer-events: none;
  /* Verzoegerung nur beim Schliessen: streift die Maus kurz daneben,
     bleibt das Menue offen. Beim Oeffnen sofort (Regel unten setzt delay 0). */
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
  transition-delay: .22s;
}
/* Unsichtbare Bruecke ueber die 10px Luecke zum Menuepunkt. Ohne sie verlaesst
   die Maus auf dem Weg nach unten den Hover-Bereich und das Menue klappt zu.
   Bewusst als Pseudo-Element und NICHT als Padding am <li> – Padding wuerde
   die Menuezeile verschieben (Lesson aus v3). */
.subnav::before {
  content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px;
}
.has-sub:hover .subnav, .has-sub:focus-within .subnav, .has-sub.is-open .subnav {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0);
  transition-delay: 0s;
}
.has-sub:hover .caret, .has-sub:focus-within .caret, .has-sub.is-open .caret { transform: rotate(225deg) translate(-2px, -2px); }
.subnav a {
  display: block; padding: 12px 14px; border-radius: var(--r-sm);
  color: var(--text-i);
}
.subnav a b { display: block; font-size: .95rem; font-weight: 600; }
.subnav a span { display: block; font-size: .82rem; color: var(--muted-i); line-height: 1.4; }
.subnav a:hover { background: var(--violet); }
.subnav a:hover span { color: rgba(255, 255, 255, .8); }

.nav-actions { display: flex; align-items: center; gap: 12px; flex: none; }

.nav-toggle {
  display: none; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--ink-line);
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.nav-toggle span {
  display: block; width: 17px; height: 1.6px; background: var(--text-i); border-radius: 0;
  transition: transform .3s var(--ease), opacity .2s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(3.3px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3.3px) rotate(-45deg); }

/* ------------------------------------------------------------------- Hero */
.hero {
  position: relative;
  min-height: min(100svh, 940px);
  display: flex; flex-direction: column; justify-content: center;
  padding: calc(var(--head-h) + 70px) 0 90px;
  overflow: hidden;
}
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media video { width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.hero-scrim {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 15% 25%, rgba(var(--brand-rgb), .28), transparent 60%),
    linear-gradient(180deg, rgba(11, 11, 15, .82) 0%, rgba(11, 11, 15, .68) 45%, var(--ink) 97%);
}
.hero-grain {
  position: absolute; inset: 0; opacity: .35; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
.hero-inner { z-index: 1; }

.hero-title { margin: 26px 0 44px; max-width: 15ch; }
.hero-title .line { display: block; overflow: hidden; padding-bottom: .06em; }
.hero-title .w {
  display: inline-block;
  transform: translateY(105%);
  animation: wordUp .95s var(--ease-out) forwards;
}
.hero-title .line:nth-child(1) .w { animation-delay: .12s; }
.hero-title .line:nth-child(2) .w { animation-delay: .22s; }
.hero-title .line:nth-child(3) .w { animation-delay: .32s; }
.hero-title .serif-it { color: var(--violet-lt); padding-right: .08em; }
@keyframes wordUp { to { transform: translateY(0); } }

.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 46px; align-items: end;
}
.hero-lead { font-size: 1.16rem; color: #C9C6D2; max-width: 52ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; }

.hero-facts {
  display: flex; flex-wrap: wrap; gap: 14px 56px;
  margin-top: 64px; padding-top: 30px;
  border-top: 1px solid var(--ink-line);
}
.hero-facts li { display: flex; align-items: baseline; gap: 12px; }
.hero-facts b {
  font-family: var(--serif); font-weight: 400; font-size: 2.1rem;
  letter-spacing: -.02em; color: var(--text-i); line-height: 1;
}
.hero-facts span { font-size: .88rem; color: var(--muted-i); max-width: 16ch; line-height: 1.35; }

/* ------------------------------------------------- Werkzeug-Band ("Womit wir arbeiten")
   Eigenstaendig gebaut, NICHT portiert: Die Anregung (LogoLoop von React Bits)
   steht unter MIT + Commons Clause, die portierte Fassungen untersagt. Ein
   endlos laufendes Band ist ohnehin eine allgemeine Technik - Liste doppeln,
   um genau eine Listenbreite verschieben, von vorn beginnen. Kein JavaScript:
   Die Animation laeuft in CSS, die Breite ergibt sich aus dem Inhalt. */
.tools {
  background: var(--ink-2);
  border-block: 1px solid var(--ink-line);
  padding: 34px 0 30px;
  overflow: hidden;
}
.tools-titel {
  font: 600 11px/1 var(--sans);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted-i);
  margin-bottom: 22px;
}
.tools-band {
  position: relative;
  /* Weiche Kanten statt hartem Abschnitt - ohne das wirkt es abgehackt. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.tools-lauf {
  display: flex; width: max-content;
  animation: toolsLauf 30s linear infinite;
  /* Kein Anhalten beim Darüberfahren (bewusst, 12.08.): Die Einträge sind
     nichts zum Anklicken, es gibt also nichts zu treffen. Ein Band, das
     stehenbleibt, sobald die Maus zufällig darüberzieht, wirkt kaputt. */
  pointer-events: none;
}

/* EIN Wert für beide Abstände: Innerhalb einer Liste wirkt `gap`, an der Naht
   zur kopierten Liste dagegen nur das `padding-right` - stehen dort zwei
   verschiedene Zahlen, entsteht bei jedem Durchlauf einmal eine engere Stelle.
   Genau das war der Fall (32 statt 64 px, also exakt die Hälfte). */
.tools-liste {
  --band-abstand: clamp(30px, 5vw, 64px);
  display: flex; align-items: center;
  gap: var(--band-abstand);
  margin: 0; padding: 0 var(--band-abstand) 0 0;
  list-style: none;
}
.tools-liste li {
  display: flex; align-items: center; gap: 10px;
  flex: 0 0 auto;
  font: 500 14px/1 var(--sans);
  color: #B9BDC6;          /* --muted-i war zu blass, die Namen verschwanden */
  white-space: nowrap;
}
.tools-liste img {
  width: 24px; height: 24px;
  opacity: .82;            /* .55 war zu schwach - die Symbole waren kaum zu erkennen */
  filter: invert(1);       /* die SVGs sind schwarz, der Grund ist dunkel */
}

/* Vier gleiche Listen nebeneinander, verschoben wird um genau eine davon
   (25 %): Danach steht Kopie 2 exakt dort, wo Kopie 1 begonnen hat - der
   Sprung zurueck auf 0 ist deshalb nicht zu sehen. Vier statt zwei, damit
   auf breiten Monitoren nie eine Luecke aufreisst (eine Liste allein ist
   schmaler als 1920 px). */
@keyframes toolsLauf {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-25%, 0, 0); }
}

.tools-fuss {
  margin-top: 24px; max-width: 70ch;
  font: 400 13px/1.6 var(--sans);
  color: var(--muted-i);
}
.tools-fuss b { color: var(--text-i); font-weight: 600; }

/* Wer Bewegung abgestellt hat, bekommt die Liste ruhig stehend. */
@media (prefers-reduced-motion: reduce) {
  .tools-lauf { animation: none; }
  .tools-band { -webkit-mask-image: none; mask-image: none; }
  .tools-liste { flex-wrap: wrap; gap: 18px 34px; }
}

@media (max-width: 620px) {
  .tools { padding: 26px 0 24px; }
  .tools-liste li { font-size: 13px; }
}

/* ----------------------------------------------------------------- Ticker */
.ticker {
  overflow: hidden; border-block: 1px solid var(--ink-line);
  background: var(--ink-2); padding: 17px 0;
}
.ticker-track {
  display: flex; align-items: center; gap: 34px; width: max-content;
  animation: tick 38s linear infinite;
}
.ticker-track span {
  font-family: var(--serif); font-size: 1.55rem; letter-spacing: -.01em;
  color: var(--muted-i); white-space: nowrap;
}
.ticker-track i { color: var(--violet); font-size: .6rem; font-style: normal; }
@keyframes tick { to { transform: translateX(-50%); } }

/* -------------------------------------------------------------- Sektionen */
.section { padding: clamp(72px, 10vw, 140px) 0; position: relative; }
.section-ink { background: var(--ink); }
/* Feines Konstruktionsraster statt leerer Flaeche (13.08., Marci: "einfach
   weiss, einfach oede"). Zwei Stufen: alle 34 px ein zartes Netz, alle 170 px
   eine kraeftigere Linie - das ergibt Struktur, ohne dass es je vor den Text
   tritt. Rein aus Farbverlaeufen erzeugt: nichts nachzuladen, scharf auf
   jeder Aufloesung, und es passt zum Namen der Firma besser als Zierwerk.
   ACHTUNG: Hier `background-color` + `background-image` getrennt, nicht die
   Kurzform `background`. Sonst loescht jede spaetere `background`-Angabe
   (z. B. .section-warm) das Raster gleich wieder mit. */
.section-paper {
  background-color: var(--paper);
  /* v6: Das Raster zeichnet jetzt mit Licht statt mit Schatten - auf dunklem
     Grund wären dunkle Linien unsichtbar. Die Deckkraft ist deutlich
     niedriger als in der hellen Fassung (.022 statt .07): Helle Linien auf
     Schwarz treten von sich aus stärker hervor, mit den alten Werten sähe
     die Fläche aus wie kariertes Papier. */
  background-image:
    linear-gradient(rgba(255, 255, 255, .012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .012) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, .022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .022) 1px, transparent 1px);
  background-size: 34px 34px, 34px 34px, 170px 170px, 170px 170px;
  color: var(--text);
}
.section-paper h1, .section-paper h2, .section-paper h3, .section-paper h4 { color: var(--text); }

/* Dritte Fläche: wärmeres Papier. Bricht den starren Hell-Dunkel-Takt, ohne
   einen harten Kontrast zu setzen – die Seiten laufen zum Abschluss hin
   wärmer aus, statt bis zuletzt zwischen Schwarz und Weiß zu springen.
   Immer ZUSAMMEN mit .section-paper setzen, damit alle Textregeln greifen. */
/* Nur die Farbe wechseln, nicht die Kurzform benutzen - das Raster aus
   .section-paper soll stehen bleiben. */
.section-warm { background-color: var(--paper-2); }
.section-warm .card,
.section-warm .incl { background: var(--ink-4); }

.sec-head { max-width: 62ch; margin-bottom: clamp(44px, 6vw, 74px); }
.sec-head p { font-size: 1.1rem; margin-top: 20px; max-width: 56ch; }
.sec-num {
  display: block; font-family: var(--serif); font-size: 1rem;
  color: var(--violet-lt); margin-bottom: 16px; letter-spacing: .08em;
}
.section-paper .sec-num { color: var(--violet); }
.sec-head-split {
  max-width: none;
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: 40px; align-items: end;
}
.sec-head-split p { margin-top: 0; }

/* ---------------------------------------------- Vergleich Vorher/Nachher */
.compare { position: relative; }
.compare-stage {
  position: relative; overflow: hidden;
  border-radius: var(--r-lg);
  /* 9.6 war zu flach, seit beide Seiten mehr Inhalt haben - die Fusszeile der
     neuen Seite wurde unten abgeschnitten (overflow: hidden faellt nicht auf,
     es sieht einfach nach schlechtem Satz aus). */
  aspect-ratio: 16 / 10.6;
  background: #fff;
  box-shadow: 0 40px 90px -50px rgba(0, 0, 0, .6);
  border: 1px solid var(--paper-line);
  user-select: none;
  cursor: ew-resize;
  /* Senkrecht darf der Finger weiterscrollen, waagerecht gehoert die Geste
     uns. Ohne diese Zeile nimmt der Browser das Ziehen mitten in der Bewegung
     wieder an sich (pointercancel) - das war der Handy-Bug vom 13.08. */
  touch-action: pan-y;
}
/* Spalten-Layout, damit die Seite unter der Browserleiste genau den Rest der
   Buehne bekommt. Vorher hatten .old-page/.new-page schlicht height:100% -
   also die volle Buehnenhoehe PLUS die Leiste daruber, und der Inhalt lief
   unten um genau diesen Betrag heraus (die Fusszeile war angeschnitten). */
.cmp-old, .cmp-new { position: absolute; inset: 0; display: flex; flex-direction: column; }
.old-page, .new-page { flex: 1; min-height: 0; }
/* Wieder mittig (13.08.): Die 38 % waren noetig, solange links eine riesige
   Zahl der Blickfang war. Die neue Demo traegt ihre Aussage ueber die ganze
   Breite - Kopfzeile, Kacheln, Leistungen sind auch halbiert als moderne
   Seite zu erkennen. Halbe-halbe ist fuer einen Vergleich das ehrlichere Bild. */
.cmp-new { clip-path: inset(0 0 0 50%); will-change: clip-path; }

.cmp-handle {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 3px;
  background: #fff; transform: translateX(-50%); z-index: 5;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .12), 0 0 24px rgba(0, 0, 0, .3);
  /* Am Griff selbst gehoert jede Richtung uns - hier will niemand scrollen. */
  touch-action: none;
}
.cmp-grip {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 54px; height: 54px; border-radius: 50%;
  background: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
  display: grid; place-items: center;
  touch-action: none;
}
/* Der sichtbare Knopf ist 54 px gross, die Trefferflaeche fuer den Daumen
   aber 88 px - unsichtbar nach allen Seiten erweitert. Ein Finger trifft
   keinen 3-px-Strich, und genau daneben zu greifen fuehlte sich an, als
   wuerde der Regler haengen. */
.cmp-grip::before, .cmp-grip::after, .cmp-grip { will-change: transform; }
.cmp-handle::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 88px; height: 88px; transform: translate(-50%, -50%);
  border-radius: 50%;
  touch-action: none;
}
.cmp-grip::before, .cmp-grip::after {
  content: ""; position: absolute;
  width: 7px; height: 7px;
  border-top: 2px solid var(--ink); border-right: 2px solid var(--ink);
}
.cmp-grip::before { transform: rotate(-135deg) translate(-4px, -4px); }
.cmp-grip::after  { transform: rotate(45deg) translate(-4px, -4px); }
.cmp-handle:focus-visible { outline: 3px solid var(--violet); outline-offset: 2px; }

.cmp-label {
  position: absolute; top: 16px; z-index: 4;
  padding: 6px 14px; border-radius: 0;
  font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  background: rgba(11, 11, 15, .72); color: #fff; backdrop-filter: blur(8px);
}
.cmp-label-l { left: 16px; }
.cmp-label-r { right: 16px; background: var(--violet); }

/* ALT – bewusst hässlich, Web um 2005 */
.cmp-old { background: #fff; font-family: 'Times New Roman', Times, serif; color: #000; }
.old-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 12px; background: #d8d8d8; border-bottom: 1px solid #aaa;
  font-family: var(--sans); font-size: .7rem; color: #444;
}
.old-bar i { width: 9px; height: 9px; border-radius: 50%; background: #b4b4b4; }
.old-bar span { margin-left: 8px; background: #fff; border: 1px solid #b0b0b0; padding: 2px 10px; border-radius: 0; }
.old-page { padding: 14px 18px; background: #fff; }
.old-head { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 3px double #003399; padding-bottom: 8px; }
.old-logo { font-size: clamp(.9rem, 2.1vw, 1.6rem); font-weight: 700; color: #003399; line-height: 1.05; }
.old-logo small { font-size: .5em; font-weight: 400; color: #666; }
.old-counter { font-family: 'Courier New', monospace; font-size: .6rem; background: #000; color: #0f0; padding: 3px 6px; }
.old-nav { margin: 9px 0; font-size: clamp(.6rem, 1.1vw, .8rem); color: #999; }
.old-nav a { color: #0000EE; text-decoration: underline; padding: 0 5px; }
.old-body h3 { font-family: inherit; font-size: clamp(.85rem, 1.8vw, 1.25rem); color: #003399; font-weight: 700; margin-bottom: 7px; letter-spacing: 0; }
.old-body p { font-size: clamp(.6rem, 1.15vw, .82rem); color: #222; line-height: 1.45; margin-bottom: 6px; }
.old-blink { color: #cc0000 !important; font-weight: 700; animation: oldBlink 1.1s steps(1) infinite; }
@keyframes oldBlink { 50% { opacity: .25; } }
.old-table { margin-top: 8px; border-collapse: collapse; font-size: clamp(.55rem, 1vw, .76rem); }
.old-table td { border: 1px solid #999; padding: 2px 9px; background: #f0f0f0; }
.old-sub { margin-top: 12px; font-weight: 700; color: #003399 !important; font-size: clamp(.6rem, 1.15vw, .82rem) !important; }
/* Winzige Bildchen in fester Groesse, wie sie damals ueblich waren - alle
   gleich hoch, egal was drauf ist, und viel zu klein zum Erkennen. */
.old-thumbs { display: flex; gap: 6px; margin-top: 5px; }
.old-thumbs i {
  display: block; width: clamp(34px, 6vw, 66px); height: clamp(26px, 4.4vw, 48px);
  border: 1px solid #999; background: repeating-linear-gradient(135deg, #d8d8d8 0 6px, #c8c8c8 6px 12px);
}
.old-mini { margin-top: 9px; font-size: clamp(.55rem, 1.05vw, .74rem) !important; color: #222 !important; }
.old-mini a { color: #0000EE; text-decoration: underline; }
.old-foot { margin-top: 10px; font-size: .58rem !important; color: #888 !important; border-top: 1px solid #ccc; padding-top: 5px; line-height: 1.5; }

/* ═══════════ NEU – die Mueller-Demo ═══════════
   Dritte Fassung (13.08.), nach einer Vorlage, die Marci gezeigt hat.

   Davor stand hier erst ein Baukasten-Hero (zu Recht als Slop erkannt), dann
   ein dunkler Editorial-Entwurf mit einer riesigen 90 - eigenstaendig, aber
   eben auch: ein Entwurf, den kein Handwerksbetrieb bestellt haette.

   Diese Fassung ist bewusst konventionell und hell: Kopfzeile mit
   Notdienst-Kachel, grosses Hero-Foto mit Text darauf, eine Reihe
   Vertrauens-Kacheln, darunter drei Leistungen mit Bild. Genau der Aufbau,
   den ein Betrieb tatsaechlich kauft - und im Vergleich mit der Seite von
   2009 daneben trotzdem Welten entfernt.

   Alle Groessen in clamp(): Die Buehne ist mal 1200 px breit und mal 390 -
   feste Pixel wuerden auf dem Handy zu Klotzen. */
.cmp-new {
  --dm-navy: #1E2A6E;
  --dm-text: #14161C;
  --dm-grau: #6A7180;
  --dm-linie: #E3E6EC;
  background: #FFFFFF; font-family: var(--sans); color: var(--dm-text);
}
.new-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 12px; background: #EDEFF3; border-bottom: 1px solid #D8DCE4;
  font-size: .7rem; color: #6A7180;
}
.new-bar i { width: 9px; height: 9px; border-radius: 50%; background: #C3C8D2; }
.new-bar span { margin-left: 8px; background: #fff; padding: 2px 12px; border: 1px solid #DDE1E8; }

.new-page {
  display: flex; flex-direction: column;
  background: #FFFFFF;
  overflow: hidden;
}

/* ---- Kopfzeile ---- */
.dm-kopf {
  display: flex; align-items: center; gap: clamp(8px, 2vw, 22px);
  padding: clamp(7px, 1.3vw, 13px) clamp(10px, 2vw, 22px);
  border-bottom: 1px solid var(--dm-linie);
}
.dm-logo {
  font-weight: 800; letter-spacing: .1em;
  font-size: clamp(.56rem, 1.2vw, .84rem); color: var(--dm-navy);
}
.dm-nav { display: flex; gap: clamp(7px, 1.4vw, 16px); margin-left: clamp(6px, 2vw, 26px); }
.dm-nav em {
  font-style: normal; font-size: clamp(.4rem, .82vw, .6rem); color: var(--dm-grau);
}
.dm-nav em:first-child { color: var(--dm-navy); font-weight: 600; }
@media (max-width: 900px) { .dm-nav em:nth-child(n+3) { display: none; } }

.dm-kopf-info { margin-left: auto; display: flex; gap: clamp(5px, 1vw, 10px); }
.dm-chip {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(3px, .6vw, 6px) clamp(6px, 1.1vw, 12px);
  border: 1px solid var(--dm-linie); background: #F7F8FA;
  line-height: 1.25;
}
.dm-chip b { font-size: clamp(.36rem, .74vw, .55rem); color: var(--dm-grau); font-weight: 500; }
.dm-chip i { font-style: normal; font-size: clamp(.4rem, .84vw, .62rem); font-weight: 700; color: var(--dm-text); }
.dm-chip-tel { border-color: rgba(30, 42, 110, .3); background: rgba(30, 42, 110, .05); }
.dm-chip-tel i { color: var(--dm-navy); }
@media (max-width: 760px) { .dm-chip:not(.dm-chip-tel) { display: none; } }

/* ---- Hero ---- */
.dm-hero {
  position: relative; flex: 1; min-height: 0;
  display: flex; align-items: center;
  padding: clamp(12px, 2.6vw, 34px) clamp(12px, 2.4vw, 30px);
}
.dm-hero-bild {
  position: absolute; inset: 0;
  background: #DDE1E6 url("img/demo/hero.webp") center/cover;
}
/* Von links dunkel nach rechts frei: Der Text steht auf der ruhigen Seite,
   das Motiv bleibt rechts sichtbar. Ohne den Verlauf ist weisse Schrift auf
   einer hellen Armatur nicht zu lesen. */
.dm-hero-bild::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(10, 14, 32, .88) 0%, rgba(10, 14, 32, .74) 34%, rgba(10, 14, 32, .3) 68%, rgba(10, 14, 32, .12) 100%);
}
.dm-hero-text { position: relative; z-index: 2; max-width: 62%; }
/* Auf schmalen Displays zeigt der Vergleich von der neuen Seite nur rund
   190 px. Bliebe der Text auf 62 % begrenzt, laege er komplett hinter der
   Schnittkante und der Hero waere dort eine leere Flaeche. Also volle
   Breite - und der dunkle Verlauf reicht entsprechend weiter, sonst steht
   weisse Schrift auf hellen Fliesen. */
@media (max-width: 760px) {
  .dm-hero-text { max-width: 100%; }
  .dm-hero-bild::after {
    background: linear-gradient(90deg, rgba(10, 14, 32, .9) 0%, rgba(10, 14, 32, .82) 50%, rgba(10, 14, 32, .62) 100%);
  }
}
.cmp-new .dm-eyebrow {
  margin: 0 0 clamp(5px, 1vw, 10px);
  font-size: clamp(.38rem, .8vw, .58rem); font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: rgba(255, 255, 255, .82);
}
.dm-hero h3 {
  margin: 0; color: #fff;
  font-size: clamp(.8rem, 2.3vw, 1.75rem); font-weight: 700;
  line-height: 1.16; letter-spacing: -.025em;
}
.cmp-new .dm-lead {
  margin: clamp(6px, 1.2vw, 12px) 0 clamp(9px, 1.8vw, 18px);
  font-size: clamp(.42rem, .88vw, .68rem); line-height: 1.55;
  color: rgba(255, 255, 255, .84); max-width: 40ch;
}
.dm-btn {
  display: inline-block;
  padding: clamp(5px, 1vw, 10px) clamp(10px, 2vw, 20px);
  background: var(--dm-navy); color: #fff;
  font-size: clamp(.4rem, .84vw, .64rem); font-weight: 600;
}

/* ---- Vertrauens-Kacheln ---- */
.dm-vorteile {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(6px, 1.2vw, 13px);
  padding: clamp(9px, 1.8vw, 18px) clamp(12px, 2.4vw, 30px);
  background: #F7F8FA; border-bottom: 1px solid var(--dm-linie);
}
.dm-vorteil {
  display: flex; align-items: center; gap: clamp(5px, 1vw, 10px);
  padding: clamp(6px, 1.1vw, 12px) clamp(7px, 1.3vw, 14px);
  background: #fff; border: 1px solid var(--dm-linie);
  font-size: clamp(.36rem, .76vw, .58rem); font-weight: 600; line-height: 1.3;
  color: var(--dm-text);
}
.dm-ico {
  width: clamp(11px, 1.8vw, 17px); height: clamp(11px, 1.8vw, 17px); flex: none;
  background: var(--dm-navy);
  -webkit-mask: no-repeat center/contain; mask: no-repeat center/contain;
}
.dm-ico-1 { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2 4 5v6c0 5 3.4 9.4 8 11 4.6-1.6 8-6 8-11V5z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2 4 5v6c0 5 3.4 9.4 8 11 4.6-1.6 8-6 8-11V5z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); }
.dm-ico-2 { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.dm-ico-3 { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4 12 22l-9-9V3h10z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4 12 22l-9-9V3h10z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.3'/%3E%3C/svg%3E"); }
.dm-ico-4 { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M8 3v4M16 3v4M3 11h18'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M8 3v4M16 3v4M3 11h18'/%3E%3C/svg%3E"); }
@media (max-width: 760px) { .dm-vorteil:nth-child(n+3) { display: none; } .dm-vorteile { grid-template-columns: repeat(2, 1fr); } }

/* ---- Leistungen ---- */
.dm-leistungen { padding: clamp(10px, 2.2vw, 24px) clamp(12px, 2.4vw, 30px) clamp(12px, 2.4vw, 26px); }
.dm-lkopf {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; margin-bottom: clamp(8px, 1.6vw, 16px);
}
.dm-lkopf h4 {
  /* `text-transform` muss ausdruecklich zurueck: Die globale h4-Regel setzt
     Versalien mit weiter Sperrung - fuer die Zwischentitel der eigenen Seite
     gedacht, hier falsch. Stand "UNSERE LEISTUNGEN" statt "Unsere Leistungen". */
  margin: 0; font-size: clamp(.62rem, 1.5vw, 1.15rem); font-weight: 700;
  text-transform: none; letter-spacing: -.02em; color: var(--dm-text);
}
.cmp-new .dm-lkopf p {
  margin: 0; max-width: 34ch; text-align: right;
  font-size: clamp(.36rem, .76vw, .58rem); line-height: 1.5; color: var(--dm-grau);
}
@media (max-width: 760px) { .cmp-new .dm-lkopf p { display: none; } }

.dm-karten { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(6px, 1.3vw, 15px); }
.dm-karte {
  display: flex; flex-direction: column;
  border: 1px solid var(--dm-linie); background: #fff;
  overflow: hidden;
}
.dm-kbild {
  display: block; width: 100%; aspect-ratio: 2 / 1;
  background: #DDE1E6 center/cover;
}
.dm-kbild-bad    { background-image: url("img/demo/bad.webp"); }
.dm-kbild-therme { background-image: url("img/demo/therme.webp"); }
.dm-kbild-rohr   { background-image: url("img/demo/rohr.webp"); }
.dm-karte b {
  padding: clamp(6px, 1.1vw, 11px) clamp(7px, 1.2vw, 13px) 0;
  font-size: clamp(.42rem, .88vw, .68rem); font-weight: 700; color: var(--dm-text);
}
.dm-karte em {
  padding: clamp(3px, .6vw, 6px) clamp(7px, 1.2vw, 13px) 0;
  font-style: normal; font-size: clamp(.34rem, .72vw, .55rem);
  line-height: 1.5; color: var(--dm-grau);
}
.dm-karte s {
  margin: clamp(6px, 1.1vw, 11px) clamp(7px, 1.2vw, 13px) clamp(7px, 1.2vw, 13px);
  text-decoration: none; align-self: flex-start;
  padding: clamp(3px, .6vw, 6px) clamp(7px, 1.2vw, 13px);
  border: 1px solid var(--dm-linie);
  font-size: clamp(.34rem, .72vw, .54rem); font-weight: 600; color: var(--dm-text);
}
/* Die mittlere Karte hebt sich ab - wie in der Vorlage, wo eine Leistung
   den gefuellten Knopf traegt. Fuehrt das Auge, ohne Getue. */
.dm-karte:nth-child(2) s { background: var(--dm-navy); border-color: var(--dm-navy); color: #fff; }
@media (max-width: 760px) {
  .dm-karte em { display: none; }
  .dm-karte:nth-child(3) { display: none; }
  .dm-karten { grid-template-columns: repeat(2, 1fr); }
}

/* --- Befundliste (Ueber uns: die 172 geprueften Seiten) ---
   Die Zahl traegt die Aussage, der Satz erklaert sie. Bewusst keine Kacheln
   mit Prozentkreisen: Vier nuechterne Zeilen wirken wie ein Pruefprotokoll,
   und genau das sollen sie sein. */
.befunde { list-style: none; margin: 0 0 18px; padding: 0; }
.befunde li {
  display: flex; align-items: baseline; gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--paper-line);
}
.befunde li:first-child { border-top: 1px solid var(--paper-line); }
.befunde b {
  flex: none; min-width: 2.4ch; text-align: right;
  font-family: var(--serif); font-weight: 400;
  font-size: 1.75rem; line-height: 1; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.befunde span { font-size: .92rem; line-height: 1.55; color: var(--muted); }
.befunde-fuss {
  font-size: .8rem !important; line-height: 1.6;
  color: var(--muted-i) !important;
}

/* ------------------------------------------------------------------ Bento */
.bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px;
}
.cell {
  position: relative; overflow: hidden;
  grid-column: span 2;
  min-height: 300px;
  padding: 30px;
  display: flex; flex-direction: column;
  border-radius: var(--r-lg);
  background: var(--ink-2);
  border: 1px solid var(--ink-line);
  transition: border-color .35s var(--ease), transform .5s var(--ease), background-color .35s;
  transform-style: preserve-3d;
}
a.cell:hover { border-color: rgba(var(--brand-rgb), .55); }
.cell-lg { grid-column: span 4; grid-row: span 2; min-height: 420px; justify-content: flex-end; }
.cell-violet { grid-column: span 2; grid-row: span 2; background: var(--violet); border-color: transparent; }
.cell-violet p { color: rgba(255, 255, 255, .82); }
.cell-quote { grid-column: span 2; background: var(--paper); color: var(--text); border-color: transparent; justify-content: center; }
.cell-cta { grid-column: span 2; justify-content: space-between; }

.cell-media { position: absolute; inset: 0; z-index: 0; }
.cell-media video { width: 100%; height: 100%; object-fit: cover; opacity: .42; transition: transform .8s var(--ease), opacity .5s; }
.cell:hover .cell-media video { transform: scale(1.05); opacity: .5; }
.cell-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11, 11, 15, .35) 0%, rgba(11, 11, 15, .82) 55%, rgba(11, 11, 15, .96) 100%);
}
.cell-body { position: relative; z-index: 1; }

.cell-tag {
  display: inline-block; font-size: .68rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--violet-lt);
  margin-bottom: 14px;
}
.cell-violet .cell-tag { color: rgba(255, 255, 255, .78); }
.cell h3 { margin-bottom: 12px; }
.cell p { font-size: .98rem; }
.cell-link {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: auto; padding-top: 22px;
  font-size: .9rem; font-weight: 600; color: var(--text-i);
}
.cell-quote .cell-link { color: var(--text); }

.mini-list { margin: 18px 0 0; display: grid; gap: 8px; }
.mini-list li { position: relative; padding-left: 20px; font-size: .92rem; color: var(--muted-i); }
.mini-list li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 7px; height: 7px; border-radius: 0; background: var(--violet-lt);
}
.cell-violet .mini-list li { color: rgba(255, 255, 255, .86); }
.cell-violet .mini-list li::before { background: #fff; }

.cell-deco { position: relative; z-index: 1; margin-top: auto; padding-top: 26px; }
.chat-preview { display: grid; gap: 8px; }
.chat-preview span {
  font-size: .78rem; line-height: 1.4; padding: 9px 13px; border-radius: 0;
  max-width: 92%; background: rgba(255, 255, 255, .16); color: #fff;
}
.cp-me { margin-left: auto; background: rgba(0, 0, 0, .28) !important; border-bottom-right-radius: 4px; }
.cp-bot { border-bottom-left-radius: 4px; }

.doc-stack { position: relative; height: 92px; }
.doc-stack i {
  position: absolute; left: 0; top: 8px; width: 62px; height: 80px;
  border-radius: 0; border: 1px solid var(--ink-line); background: var(--ink-3);
  transition: transform .5s var(--ease);
}
.doc-stack i:nth-child(1) { transform: rotate(-8deg) translateX(4px); }
.doc-stack i:nth-child(2) { transform: rotate(3deg) translateX(26px); }
.doc-stack i:nth-child(3) { transform: rotate(-2deg) translateX(50px); background: var(--violet); border-color: var(--violet); }
.cell:hover .doc-stack i:nth-child(1) { transform: rotate(-14deg) translateX(0); }
.cell:hover .doc-stack i:nth-child(3) { transform: rotate(2deg) translateX(58px); }
.doc-stack b {
  position: absolute; left: 60px; top: 44px; z-index: 2;
  font-size: .62rem; font-weight: 700; letter-spacing: .1em; color: #fff;
}

.cell-quote blockquote p {
  font-family: var(--serif); font-size: clamp(1.3rem, 2.2vw, 1.75rem);
  line-height: 1.24; color: var(--text); letter-spacing: -.02em;
}
.cell-quote footer {
  margin-top: 18px; font-size: .78rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); font-weight: 600;
}
.cell-cta h3 { font-size: clamp(1.6rem, 3vw, 2.2rem); }

/* ---------------------------------------------- Interaktiver Video-Player */
.ivideo { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 22px; align-items: start; }

.iv-stage {
  position: relative; overflow: hidden;
  border-radius: var(--r-lg); background: #000;
  aspect-ratio: 16 / 9;
  box-shadow: 0 40px 90px -50px rgba(0, 0, 0, .7);
}
.iv-stage video { width: 100%; height: 100%; object-fit: cover; }

.iv-bigplay {
  position: absolute; inset: 0; z-index: 4;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: rgba(11, 11, 15, .42); backdrop-filter: blur(2px);
  color: #fff; font-size: .88rem; font-weight: 600; letter-spacing: .04em;
  transition: opacity .4s var(--ease), visibility .4s;
}
.iv-bigplay svg { width: 30px; height: 30px; fill: var(--ink); }
.iv-bigplay::before {
  content: ""; position: absolute; width: 84px; height: 84px; border-radius: 50%;
  background: #fff; transition: transform .4s var(--ease);
  top: calc(50% - 56px); left: calc(50% - 42px);
}
.iv-bigplay svg { position: relative; z-index: 1; margin-left: 4px; }
.iv-bigplay:hover::before { transform: scale(1.09); }
.ivideo.is-playing .iv-bigplay { opacity: 0; visibility: hidden; }

.iv-bar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  display: flex; align-items: center; gap: 14px;
  padding: 30px 18px 16px;
  background: linear-gradient(transparent, rgba(0, 0, 0, .82));
  opacity: 0; transform: translateY(8px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.ivideo.is-playing .iv-bar, .iv-stage:hover .iv-bar, .iv-bar:focus-within { opacity: 1; transform: translateY(0); }

.iv-btn {
  width: 38px; height: 38px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .14); color: #fff;
  transition: background-color .2s;
}
.iv-btn:hover { background: rgba(255, 255, 255, .28); }
.iv-btn svg { width: 17px; height: 17px; fill: currentColor; }
.icon-sound { fill: currentColor; }
.icon-sound .wave { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.iv-btn.is-muted .wave { opacity: .2; }

.iv-timeline {
  position: relative; flex: 1; height: 22px; cursor: pointer;
  display: flex; align-items: center;
}
.iv-timeline::before {
  content: ""; position: absolute; left: 0; right: 0; height: 3px;
  background: rgba(255, 255, 255, .26); border-radius: 0;
}
.iv-progress {
  position: absolute; left: 0; height: 3px; width: 0;
  background: var(--violet-lt); border-radius: 0;
}
.iv-progress::after {
  content: ""; position: absolute; right: -5px; top: -3.5px;
  width: 10px; height: 10px; border-radius: 50%; background: #fff;
}
.iv-marks { position: absolute; left: 0; right: 0; height: 3px; }
.iv-chapter-mark {
  position: absolute; top: -2px; width: 2px; height: 7px;
  background: rgba(255, 255, 255, .85); border-radius: 0;
}
.iv-time { font-size: .8rem; font-variant-numeric: tabular-nums; color: #fff; flex: none; }

.iv-hotspots { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.iv-hotspot {
  position: absolute; transform: translate(-50%, -50%); pointer-events: auto;
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(var(--brand-rgb), .9); color: #fff;
  font-family: var(--serif); font-size: 1.1rem; font-style: italic;
  box-shadow: 0 0 0 0 rgba(var(--brand-rgb), .6);
  animation: pulse 2.4s var(--ease) infinite;
}
.iv-hotspot:hover { background: var(--violet-lt); }
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(var(--brand-rgb), .55); }
  70%  { box-shadow: 0 0 0 18px rgba(var(--brand-rgb), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--brand-rgb), 0); }
}

.iv-popup {
  position: absolute; inset: 0; z-index: 6;
  /* safe center: bei hohem Inhalt oben ausrichten statt oben abschneiden */
  display: grid; place-items: safe center; overflow-y: auto; padding: 4%;
  background: rgba(11, 11, 15, .74); backdrop-filter: blur(8px);
}
.iv-card {
  width: min(560px, 100%);
  background: var(--paper); color: var(--text);
  border-radius: var(--r-md); padding: 24px;
  animation: cardIn .4s var(--ease-out);
}
@keyframes cardIn { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.iv-card h4 {
  font-family: var(--serif); font-size: 1.4rem; font-weight: 400;
  text-transform: none; letter-spacing: -.02em; color: var(--text); margin-bottom: 10px;
}
.iv-card p { color: var(--muted); font-size: .95rem; line-height: 1.55; }
.iv-quiz-options { display: grid; gap: 7px; margin: 13px 0; }
.iv-quiz-options button {
  text-align: left; padding: 11px 15px; border-radius: var(--r-sm);
  border: 1px solid var(--paper-line); background: #fff; font-size: .91rem;
  transition: border-color .2s, background-color .2s;
}
.iv-quiz-options button:hover:not(:disabled) { border-color: var(--violet); }
.iv-quiz-options button.is-right { border-color: #1B8A4B; background: #E8F6EE; }
.iv-quiz-options button.is-wrong { border-color: var(--signal); background: #FDE9EE; }
.iv-feedback { font-size: .93rem; padding: 12px 0; }
.iv-feedback.right { color: #14713C; }
.iv-feedback.wrong { color: #B00030; }
.iv-close-card {
  margin-top: 8px; padding: 12px 22px; border-radius: 0;
  background: var(--violet); color: #fff; font-weight: 600; font-size: .9rem;
}

.iv-side { display: grid; gap: 18px; }
.iv-block {
  background: #fff; border: 1px solid var(--paper-line);
  border-radius: var(--r-md); padding: 20px;
}
.iv-block h4 { color: var(--muted); margin-bottom: 14px; }
.iv-chapters { display: grid; gap: 5px; }
.iv-chapter-btn {
  text-align: left; padding: 10px 13px; border-radius: var(--r-sm);
  font-size: .9rem; font-weight: 500; color: var(--muted);
  transition: background-color .2s, color .2s;
}
.iv-chapter-btn:hover { background: var(--paper-2); color: var(--text); }
.iv-chapter-btn.is-current { background: var(--violet); color: #fff; }

.iv-playlist { display: grid; gap: 8px; }
.pl-item {
  display: flex; align-items: center; gap: 12px; text-align: left;
  padding: 8px; border-radius: var(--r-sm); transition: background-color .2s;
}
.pl-item:hover { background: var(--paper-2); }
.pl-item.is-active { background: var(--paper-2); box-shadow: inset 3px 0 0 var(--violet); }
.pl-thumb {
  width: 62px; height: 40px; flex: none; border-radius: 0;
  background-size: cover; background-position: center; background-color: var(--ink-3);
}
.pl-item b { display: block; font-size: .88rem; font-weight: 600; color: var(--text); line-height: 1.25; }
.pl-item small { display: block; font-size: .76rem; color: var(--muted); }
.iv-erklaer { font-size: .9rem; line-height: 1.6; color: var(--muted-i); }
.iv-note { font-size: .8rem; color: var(--muted); line-height: 1.5; }

/* ---------------------------------------------------------------- Schritte */
.steps { display: grid; gap: 0; border-top: 1px solid var(--ink-line); }
.step {
  display: grid; grid-template-columns: 92px minmax(0, 1fr) 220px;
  gap: 28px; align-items: start;
  padding: 34px 0; border-bottom: 1px solid var(--ink-line);
  transition: background-color .4s var(--ease), padding-inline .4s var(--ease);
}
.step:hover { background: var(--ink-2); padding-inline: 22px; }
.step-n { font-family: var(--serif); font-size: 2.4rem; color: var(--violet-lt); line-height: 1; }
.step h3 { margin-bottom: 9px; }
.step p { max-width: 62ch; }
.step-meta {
  font-size: .8rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted-i); text-align: right; padding-top: 6px;
}

/* ------------------------------------------------------------- Live-Karten */
.live-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.live-card {
  /* v6: erhobene Fläche statt Weiß. --ink-3 liegt eine Stufe über der
     Abschnittsfläche - dadurch steht die Karte auch ohne Schatten sichtbar
     auf dem Grund, und der Rahmen muss die Arbeit nicht allein machen. */
  background: var(--ink-3); border: 1px solid var(--paper-line);
  border-radius: var(--r-lg); padding: 40px 38px;
  display: flex; flex-direction: column;
}
/* Der Hebe-Effekt mit Schatten ist raus (15.08.): Die Karten sind seit dem
   Entfernen des Film-Players der Inhalt dieses Abschnitts, nicht mehr die
   Beigabe darunter - und eine Fläche, die auf Mausnähe reagiert, ohne dass
   sich etwas ändert, ist genau die Sorte Bewegung, die hier keinen Platz hat.
   Angefasst wird der Knopf, nicht die Karte. */
.live-card h3 { font-size: clamp(1.45rem, 2.4vw, 1.9rem); line-height: 1.15; }
.live-card .btn { font-size: 1rem; padding: 15px 26px; }
/* Wo genau das Werkzeug zu finden ist - der Satz nimmt dem Besucher die
   Suche ab, statt ihn nur aufzufordern, etwas auszuprobieren. */
.live-wo {
  margin: 14px 0 0; font-size: .85rem; color: var(--muted);
  border-top: 1px solid var(--paper-line); padding-top: 14px;
}
.live-badge {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--violet); background: rgba(var(--brand-rgb), .08);
  padding: 6px 13px; border-radius: 0; margin-bottom: 18px;
}
.live-badge::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: #1B8A4B;
  animation: blip 1.9s var(--ease) infinite;
}
@keyframes blip { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.live-card h3 { margin-bottom: 12px; }
.live-card .btn { align-self: flex-start; margin-top: auto; }

.check-list { display: grid; gap: 11px; margin: 20px 0 26px; }
.check-list li { position: relative; padding-left: 30px; font-size: .96rem; color: var(--muted); }
.section-ink .check-list li { color: var(--muted-i); }
.check-list li::before {
  content: ""; position: absolute; left: 0; top: .28em;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--violet);
  -webkit-mask: none;
}
.check-list li::after {
  content: ""; position: absolute; left: 5px; top: .62em;
  width: 8px; height: 4.5px;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
}

/* -------------------------------------------------------------------- FAQ */
.faq { border-top: 1px solid var(--ink-line); }
.faq-item { border-bottom: 1px solid var(--ink-line); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 26px 0; cursor: pointer; list-style: none;
  font-size: clamp(1.05rem, 1.8vw, 1.3rem); font-weight: 600; letter-spacing: -.02em;
  transition: color .25s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--violet-lt); }
.faq-ico {
  position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--ink-line); transition: background-color .3s, border-color .3s, transform .35s var(--ease);
}
.faq-ico::before, .faq-ico::after {
  content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: currentColor; border-radius: 0;
}
.faq-ico::before { width: 13px; height: 1.6px; }
.faq-ico::after  { width: 1.6px; height: 13px; transition: transform .35s var(--ease), opacity .25s; }
.faq-item[open] .faq-ico { background: var(--violet); border-color: var(--violet); transform: rotate(180deg); }
.faq-item[open] .faq-ico::after { transform: translate(-50%, -50%) scaleY(0); opacity: 0; }
.faq-item p { padding: 0 60px 28px 0; max-width: 78ch; animation: faqIn .35s var(--ease-out); }
@keyframes faqIn { from { opacity: 0; transform: translateY(-6px); } }

/* --------------------------------------------------------------- CTA final */
.cta-final { position: relative; overflow: hidden; padding: clamp(90px, 12vw, 170px) 0; }
.cta-media { position: absolute; inset: 0; }
.cta-media video { width: 100%; height: 100%; object-fit: cover; opacity: .4; }
.cta-scrim {
  position: absolute; inset: 0;
  background: radial-gradient(90% 120% at 50% 50%, rgba(var(--brand-rgb), .5), rgba(11, 11, 15, .93) 68%);
}
.cta-inner { text-align: center; z-index: 1; }
.cta-inner h2 { font-size: clamp(2.4rem, 6.4vw, 5rem); }
.cta-inner h2 em { color: var(--paper); }
.cta-inner p { font-size: 1.14rem; max-width: 50ch; margin: 24px auto 38px; color: #C9C6D2; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* ----------------------------------------------------------------- Footer */
.site-footer { background: var(--ink-2); border-top: 1px solid var(--ink-line); padding: 70px 0 34px; }
.foot-top {
  display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 40px;
  padding-bottom: 48px; border-bottom: 1px solid var(--ink-line);
}
.foot-brand p { font-size: .93rem; margin-top: 18px; max-width: 38ch; }
.foot-col { display: flex; flex-direction: column; align-items: flex-start; gap: 11px; }
.foot-col h4 { color: var(--muted-i); margin-bottom: 4px; }
.foot-col a, .foot-col span { font-size: .93rem; color: #CFCDD8; transition: color .2s; }
.foot-col a:hover { color: var(--violet-lt); }
.foot-col .btn { margin-top: 8px; }
/* Mittig statt auseinandergezogen: Rechtsstand rechts unten kollidierte mit dem
   schwebenden Chat-Knopf (der sitzt fest in derselben Ecke). Impressum und
   Datenschutz waren dadurch nicht anklickbar - bei Pflichtangaben ein echter
   Mangel, nicht nur ein Schönheitsfehler. Das padding-bottom hält zusätzlich
   Abstand, falls der Knopf auf schmalen Fenstern tiefer rutscht. */
.foot-bottom {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 10px clamp(18px, 3vw, 40px);
  /* Reichlich Luft nach unten, damit der fest schwebende Chat-Knopf (rund 56 px
     hoch plus Abstand zum Rand) IMMER unterhalb der Textzeile bleibt. Zentrieren
     allein genügte nicht: Bei mittleren Fensterbreiten rutschte "Datenschutz"
     wieder unter den Knopf. */
  padding-top: 26px; padding-bottom: clamp(96px, 12vw, 116px);
  font-size: .84rem; color: var(--muted-i);
  text-align: center;
}
.foot-legal { display: flex; gap: 20px; }
.foot-legal a:hover { color: var(--violet-lt); }

/* --------------------------------------------------------- Scroll-Reveal */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .09s; }
.reveal.d2 { transition-delay: .18s; }
.reveal.d3 { transition-delay: .27s; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* ═══════════════════════════════════════════════════════════════════════
   TERMINVERGABE (per booking.js in jede Seite injiziert)
   ═══════════════════════════════════════════════════════════════════════ */
.bk-overlay {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center; padding: 20px;
  background: rgba(6, 6, 9, .78); backdrop-filter: blur(10px);
  animation: fadeIn .3s var(--ease);
}
@keyframes fadeIn { from { opacity: 0; } }
.bk-modal {
  width: min(760px, 100%); max-height: min(88vh, 860px);
  display: flex; flex-direction: column;
  background: var(--paper); color: var(--text);
  border-radius: var(--r-lg); overflow: hidden;
  box-shadow: 0 50px 120px -40px rgba(0, 0, 0, .9);
  animation: modalIn .45s var(--ease-out);
}
@keyframes modalIn { from { opacity: 0; transform: translateY(24px) scale(.97); } }

.bk-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  padding: 24px 26px 18px; border-bottom: 1px solid var(--paper-line);
}
.bk-head h3 { font-size: 1.35rem; }
.bk-head p { font-size: .88rem; margin-top: 3px; }
.bk-close {
  width: 40px; height: 40px; flex: none; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.5rem; line-height: 1;
  color: var(--muted); transition: background-color .2s, color .2s;
}
.bk-close:hover { background: var(--paper-2); color: var(--text); }

/* War #fff - ein weisses Terminfenster mitten in der dunklen Seite passte
   nicht zum Rest ("im selben Design wie Webseite", Marci 23.09.). Jetzt
   dieselbe Tiefen-Leiter wie ueberall sonst: die Leiste sitzt EINE Stufe
   dunkler als .bk-modal (--paper), die Karten darunter eine Stufe HELLER
   (--ink-3) - genau das Muster von .card / .section-paper .card weiter unten. */
.bk-steps { display: flex; gap: 6px; padding: 16px 26px; background: var(--ink-2); border-bottom: 1px solid var(--paper-line); }
.bk-steps li { flex: 1; display: grid; gap: 7px; font-size: .72rem; color: var(--muted); font-weight: 500; }
.bk-steps li::before { content: ""; height: 3px; border-radius: 0; background: var(--paper-line); transition: background-color .35s; }
.bk-steps li.is-done::before { background: var(--violet-lt); }
.bk-steps li.is-active::before { background: var(--violet); }
.bk-steps li.is-active { color: var(--violet); font-weight: 600; }

.bk-body { padding: 26px; overflow-y: auto; flex: 1; }
.bk-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 18px 26px; border-top: 1px solid var(--paper-line); background: var(--ink-2);
}
.bk-hint { font-size: .8rem; color: var(--muted); }
.bk-foot .btn:disabled { opacity: .4; cursor: not-allowed; transform: none; box-shadow: none; }

.bk-services { display: grid; gap: 9px; }
.bk-service {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  width: 100%; text-align: left; padding: 16px 18px;
  border: 1px solid var(--paper-line); border-radius: var(--r-md); background: var(--ink-3);
  color: var(--text);
  transition: border-color .2s, box-shadow .2s, transform .2s var(--ease);
}
.bk-service:hover { border-color: var(--violet); transform: translateY(-1px); }
.bk-service.is-selected { border-color: var(--violet); box-shadow: 0 0 0 2px rgba(var(--brand-rgb), .18); }
.bk-service b { display: block; font-size: 1rem; font-weight: 600; }
.bk-service small { display: block; font-size: .84rem; color: var(--muted); margin-top: 2px; }
.bk-dur {
  flex: none; font-size: .82rem; font-weight: 600; color: var(--violet);
  background: rgba(var(--brand-rgb), .08); padding: 6px 12px; border-radius: 0;
}

.bk-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.bk-cal-head b { font-size: 1.05rem; font-weight: 600; }
.bk-cal-nav {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--paper-line);
  background: var(--ink-3); font-size: 1.1rem; color: var(--text);
  transition: border-color .2s, background-color .2s;
}
.bk-cal-nav:hover:not(:disabled) { border-color: var(--violet); color: var(--violet); }
.bk-cal-nav:disabled { opacity: .3; cursor: not-allowed; }

.bk-calendar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.bk-dow { text-align: center; font-size: .74rem; font-weight: 600; color: var(--muted); padding-bottom: 6px; }
.bk-day {
  aspect-ratio: 1; border-radius: var(--r-sm); background: var(--ink-3);
  border: 1px solid var(--paper-line); font-size: .92rem; font-weight: 500;
  color: var(--text);
  transition: border-color .2s, background-color .2s, color .2s;
}
.bk-day:hover:not(:disabled) { border-color: var(--violet); color: var(--violet); }
.bk-day:disabled { background: transparent; border-color: transparent; color: #B9B2A6; cursor: not-allowed; }
.bk-day.is-empty { pointer-events: none; }
.bk-day.is-selected { background: var(--violet); border-color: var(--violet); color: #fff; }
.bk-legend { margin-top: 16px; font-size: .82rem; color: var(--muted); }

.bk-when { font-size: .92rem; color: var(--muted); margin-bottom: 16px; }
.bk-when b { color: var(--text); }
.bk-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 9px; }
.bk-slot {
  padding: 13px 8px; border-radius: var(--r-sm); background: var(--ink-3);
  border: 1px solid var(--paper-line); font-weight: 600; font-size: .98rem;
  color: var(--text);
  transition: border-color .2s, background-color .2s, color .2s;
}
.bk-slot small { display: block; font-size: .72rem; font-weight: 500; color: var(--muted); margin-top: 2px; }
/* 25.09.: Frei/belegt stand bisher NUR im Kleintext ("frei"/"belegt") - beide
   Zustaende sahen sonst gleich aus, man musste jeden Slot einzeln lesen.
   Jetzt zusaetzlich farblich: gruener Rand + gruenes Label fuer freie Zeiten,
   dasselbe Gruen wie der "online"-Punkt im Chat-Fenster (--text-i-unabhaengig
   #35C46A). Belegte Zeiten bleiben wie bisher gedimmt + durchgestrichen. */
.bk-slot:not(:disabled) { border-color: rgba(53, 196, 106, .4); }
.bk-slot:not(:disabled) small { color: #35C46A; font-weight: 600; }
.bk-slot:hover:not(:disabled) { border-color: var(--violet); }
.bk-slot:hover:not(:disabled) small { color: var(--violet); }
.bk-slot:disabled { opacity: .45; cursor: not-allowed; text-decoration: line-through; }
.bk-slot.is-selected { background: var(--violet); border-color: var(--violet); color: #fff; }
.bk-slot.is-selected small { color: rgba(255, 255, 255, .8); }

.bk-summary {
  display: grid; gap: 4px; padding: 16px 18px; margin-bottom: 20px;
  background: var(--ink); color: var(--text-i); border-radius: var(--r-md);
}
.bk-summary b { font-size: 1rem; }
.bk-summary span { font-size: .88rem; color: var(--muted-i); }

.field { display: grid; gap: 6px; margin-bottom: 14px; }
.field label { font-size: .85rem; font-weight: 600; }
.field input, .field textarea, .field select {
  width: 100%; padding: 13px 15px; border-radius: var(--r-sm);
  border: 1px solid var(--paper-line); background: var(--ink-2); font-size: .96rem;
  transition: border-color .2s, box-shadow .2s;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--violet); box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .14);
}
.field textarea { resize: vertical; min-height: 120px; line-height: 1.55; }
.field small { font-size: .8rem; color: var(--muted); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field-error { color: var(--signal); font-size: .82rem; }
.field.has-error input { border-color: var(--signal); }

.consent { display: flex; gap: 11px; align-items: flex-start; font-size: .85rem; color: var(--muted); }
.consent input { width: 20px; height: 20px; flex: none; margin-top: 1px; accent-color: var(--violet); }

.bk-confirm { text-align: center; padding: 14px 0 6px; }
.bk-check {
  width: 74px; height: 74px; margin: 0 auto 20px; border-radius: 50%;
  display: grid; place-items: center; background: var(--violet);
  animation: pop .5s var(--ease-out);
}
@keyframes pop { from { transform: scale(.5); opacity: 0; } }
.bk-check svg { width: 34px; height: 34px; stroke: #fff; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.bk-confirm h4 { font-family: var(--serif); font-size: 1.7rem; font-weight: 400; text-transform: none; letter-spacing: -.02em; margin-bottom: 12px; }
.bk-confirm .bk-summary { text-align: left; margin: 22px 0; }
.bk-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

/* ═══════════════════════════════════════════════════════════════════════
   KI-CHATBOT (per chatbot.js injiziert)
   ═══════════════════════════════════════════════════════════════════════ */
.bot-fab {
  position: fixed; right: 24px; bottom: 24px; z-index: 250;
  height: 56px; padding: 0 22px 0 18px; border-radius: 0;
  display: inline-flex; align-items: center; gap: 11px;
  background: var(--violet); color: #fff; font-weight: 600; font-size: .93rem;
  box-shadow: 0 14px 40px -14px rgba(var(--brand-rgb), .95);
  transition: transform .35s var(--ease), opacity .3s, visibility .3s, box-shadow .3s;
}
.bot-fab:hover { transform: translateY(-3px); box-shadow: 0 22px 50px -16px rgba(var(--brand-rgb), 1); }
.bot-fab svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.bot-fab.is-hidden { opacity: 0; visibility: hidden; transform: scale(.85); }
.bot-fab .bot-ping {
  position: absolute; top: -3px; right: -3px; width: 13px; height: 13px;
  border-radius: 50%; background: var(--signal); border: 2px solid var(--ink);
}

.bot-panel {
  position: fixed; right: 24px; bottom: 24px; z-index: 251;
  width: min(408px, calc(100vw - 32px)); height: min(620px, calc(100vh - 48px));
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--paper); color: var(--text);
  border-radius: var(--r-lg);
  box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .8);
  opacity: 0; visibility: hidden; transform: translateY(20px) scale(.97);
  transition: opacity .35s var(--ease), transform .35s var(--ease), visibility .35s;
}
.bot-panel.is-open { opacity: 1; visibility: visible; transform: none; }

.bot-head {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 18px; background: var(--ink); color: var(--text-i);
}
.bot-avatar {
  width: 40px; height: 40px; flex: none; border-radius: 50%;
  display: grid; place-items: center; background: var(--violet);
  font-family: var(--serif); font-size: 1.15rem;
}
.bot-head strong { display: block; font-size: .96rem; font-weight: 600; }
.bot-head small { display: flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--muted-i); }
.bot-head small::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #35C46A; }
.bot-close {
  margin-left: auto; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; color: var(--muted-i); font-size: 1.4rem; line-height: 1;
  transition: background-color .2s, color .2s;
}
.bot-close:hover { background: rgba(255, 255, 255, .1); color: #fff; }

.bot-body { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.bot-msg {
  max-width: 86%; padding: 11px 15px; border-radius: 0;
  font-size: .93rem; line-height: 1.5; white-space: pre-wrap; word-break: break-word;
  animation: msgIn .3s var(--ease-out);
}
@keyframes msgIn { from { opacity: 0; transform: translateY(7px); } }
/* 25.09.: Diese vier Regeln stammten noch aus der hellen v4-Fassung (vor dem
   Dunkel-Umbau) und wurden beim Flowise-Umbau nie mitgezogen, weil der
   eigene Chat zwischenzeitlich abgeschaltet war - genau die "Falle" aus dem
   README (heller Text ueber var(--text) auf hart weissem Grund, hier
   unbemerkt weil das Widget lange gar nicht lief). "Chatbot nicht lesbar". */
.bot-msg.bot { align-self: flex-start; background: var(--ink-3); color: var(--text); border: 1px solid var(--paper-line); border-bottom-left-radius: 5px; }
.bot-msg.me { align-self: flex-end; background: var(--violet); color: #fff; border-bottom-right-radius: 5px; }
.bot-typing { display: flex; gap: 4px; align-items: center; padding: 15px; }
.bot-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: dot 1.3s var(--ease) infinite; }
.bot-typing i:nth-child(2) { animation-delay: .18s; }
.bot-typing i:nth-child(3) { animation-delay: .36s; }
@keyframes dot { 0%, 60%, 100% { opacity: .25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-4px); } }

.bot-chips { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 18px 12px; }
.bot-chip {
  font-size: .82rem; font-weight: 500; padding: 8px 14px; border-radius: 0;
  border: 1px solid var(--paper-line); background: var(--ink-3); color: var(--text);
  transition: border-color .2s, background-color .2s, color .2s;
}
.bot-chip:hover { border-color: var(--violet); background: var(--violet); color: #fff; }

.bot-form { display: flex; gap: 9px; padding: 13px 14px; border-top: 1px solid var(--paper-line); background: var(--ink-2); }
.bot-form input {
  flex: 1; padding: 12px 16px; border-radius: 0;
  border: 1px solid var(--paper-line); background: var(--ink-3); color: var(--text); font-size: .93rem;
}
.bot-form input:focus { outline: none; border-color: var(--violet); }
.bot-send {
  width: 44px; height: 44px; flex: none; border-radius: 50%;
  display: grid; place-items: center; background: var(--violet); color: #fff;
  transition: background-color .2s, transform .2s;
}
.bot-send:hover { background: var(--brand-dk); transform: scale(1.05); }
.bot-send svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bot-legal { font-size: .7rem; color: var(--muted-i); text-align: center; padding: 0 18px 10px; background: var(--ink-2); }

/* ═══════════════════════════════════════════════════════════════════════
   Unterseiten-Bausteine
   ═══════════════════════════════════════════════════════════════════════ */
.page-hero {
  position: relative; overflow: hidden;
  padding: calc(var(--head-h) + 96px) 0 clamp(70px, 9vw, 120px);
}
.page-hero .hero-media video { opacity: .34; }
.page-hero-inner { z-index: 1; max-width: 66ch; }
.page-hero h1 { font-size: clamp(2.5rem, 6.4vw, 5rem); margin: 22px 0 24px; }
.page-hero .lead { font-size: 1.18rem; color: #C9C6D2; max-width: 56ch; }
.page-hero .hero-cta { margin-top: 36px; }

.breadcrumb { display: flex; gap: 10px; font-size: .82rem; color: var(--muted-i); }
.breadcrumb a:hover { color: var(--violet-lt); }

.prose { max-width: 68ch; }
.prose p + p { margin-top: 18px; }
.prose h3 { margin: 38px 0 12px; }

.split-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(30px, 5vw, 70px); align-items: start; }
.split-2.is-center { align-items: center; }

.cards-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.card {
  padding: 30px; border-radius: var(--r-lg);
  background: var(--ink-2); border: 1px solid var(--ink-line);
  transition: transform .4s var(--ease), border-color .3s;
}
.card:hover { transform: translateY(-4px); border-color: rgba(var(--brand-rgb), .45); }
.section-paper .card { background: var(--ink-3); border-color: var(--paper-line); }
.card h3 { margin-bottom: 10px; }
.card p { font-size: .95rem; }
.card-ico {
  width: 46px; height: 46px; border-radius: 0; margin-bottom: 18px;
  display: grid; place-items: center;
  background: rgba(var(--brand-rgb), .14); color: var(--violet-lt);
  font-family: var(--serif); font-size: 1.3rem;
}
.section-paper .card-ico { background: rgba(var(--brand-rgb), .09); color: var(--violet); }

/* Preis-/Paketzeilen */
.plans { display: grid; gap: 14px; }
.plan {
  display: grid; grid-template-columns: 58px minmax(0, 1.2fr) minmax(0, 1fr) auto;
  gap: 26px; align-items: center;
  padding: 28px; border-radius: var(--r-lg);
  background: var(--ink-2); border: 1px solid var(--ink-line);
  transition: border-color .3s, transform .4s var(--ease);
}
.plan:hover { border-color: var(--violet-lt); transform: translateX(5px); }
.plan.is-featured { background: linear-gradient(140deg, rgba(var(--brand-rgb), .22), var(--ink-2) 60%); border-color: rgba(var(--brand-rgb), .5); }
.plan-letter { font-family: var(--serif); font-size: 2.6rem; color: var(--violet-lt); line-height: 1; }
.plan h3 { margin-bottom: 6px; }
.plan p { font-size: .93rem; }
.plan-for { font-size: .88rem; color: var(--muted-i); }
.plan-for b { display: block; color: var(--text-i); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 5px; }
.plan-badge {
  position: absolute; top: -11px; left: 28px;
  font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  background: var(--violet); color: #fff; padding: 5px 13px; border-radius: 0;
}
.plan { position: relative; }

/* Startpreis in der Paketzeile.
   Achtung Spezifitaet: .plan p (0,1,1) schlaegt .plan-price (0,1,0) –
   deshalb hier bewusst .plan p.plan-price, sonst bleibt der Preis winzig. */
.plan p.plan-price {
  font-family: var(--serif); font-size: 2.15rem; line-height: 1.1;
  color: var(--text-i); margin: 2px 0 12px;
}
.plan p.plan-price span {
  font-family: var(--sans); font-size: .8rem; font-weight: 500;
  color: var(--muted-i); margin-right: 8px; vertical-align: middle;
}

/* Laufende Pflege unter den Paketen */
.care { margin-top: 52px; padding-top: 40px; border-top: 1px solid var(--ink-line); }
.care-head h3 { font-size: clamp(1.3rem, 2.4vw, 1.75rem); margin-bottom: 10px; }
.care-head h3 em { font-family: var(--serif); font-style: italic; color: var(--violet-lt); }
.care-head p { max-width: 68ch; }
.care-list {
  list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px; margin: 30px 0 0;
}
.care-list li { display: grid; gap: 7px; padding-left: 18px; border-left: 2px solid var(--ink-line); }
.care-list b { font-family: var(--serif); font-size: 1.75rem; font-weight: 400; color: var(--text-i); line-height: 1; }
.care-list b span { font-family: var(--sans); font-size: .82rem; color: var(--muted-i); }
.care-list li > span { font-size: .9rem; color: var(--muted-i); line-height: 1.55; }

/* Klartext: enthalten vs. kommt dazu */
.incl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.incl { padding: clamp(26px, 3.5vw, 34px); border-radius: var(--r-lg); border: 1px solid var(--paper-line); background: var(--ink-3); }
.incl h3 { font-size: 1.15rem; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--paper-line); }
.incl ul { list-style: none; display: grid; gap: 14px; }
.incl li { position: relative; padding-left: 28px; font-size: .95rem; color: var(--muted); line-height: 1.6; }
.incl li b { color: var(--text); font-weight: 600; }
.incl li::before { position: absolute; left: 0; top: 0; font-weight: 700; }
.incl-yes li::before { content: "\2713"; color: var(--violet); }
.incl-no { background: var(--paper-2); }
.incl-no li::before { content: "+"; color: var(--muted); }

@media (max-width: 900px) {
  .care-list { grid-template-columns: 1fr; gap: 18px; }
  .incl-grid { grid-template-columns: 1fr; }
}

/* Zellenraster (KI-Arten) */
.type-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--ink-line); border: 1px solid var(--ink-line); border-radius: var(--r-lg); overflow: hidden; }
.type { background: var(--ink); padding: 30px; transition: background-color .3s; }
.type:hover { background: var(--ink-2); }
/* Vier Zellen gehoeren in ein 2x2-Raster, nicht in drei Spalten mit Loch
   unten rechts (ueber.html, »Vier Saetze, an denen Sie uns messen duerfen«). */
.type-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Die Kacheln sind IMMER dunkel (`.type { background: var(--ink) }`), auch in
   einem hellen Abschnitt - der Kontrast ist gewollt. Dann muss der Text dort
   aber ausdruecklich hell gesetzt werden: Sonst gewinnen `.section-paper h3`
   und `.section-paper p` per Spezifitaet, und es steht dunkelgrauer Text auf
   fast schwarzem Grund. Auf "Ueber uns" genau so passiert (13.08.).
   Derselbe Stolperstein wie bei `.cmp-new .nlead` - immer wenn eine dunkle
   Flaeche in einem hellen Abschnitt liegt, zwei Klassen in den Selektor. */
.section-paper .type h3 { color: var(--text-i); }
.section-paper .type p  { color: #A8AEBA; }
.type-n { font-family: var(--serif); color: var(--violet-lt); font-size: 1rem; }
.type h3 { font-size: 1.15rem; margin: 10px 0 8px; }
.type p { font-size: .9rem; }

/* Kontakt */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(30px, 5vw, 60px); align-items: start; }
.contact-panel {
  background: var(--ink-3); border: 1px solid var(--paper-line);
  border-radius: var(--r-lg); padding: clamp(26px, 4vw, 38px);
}
.contact-aside { display: grid; gap: 18px; }
.contact-block { padding: 26px; border-radius: var(--r-lg); background: var(--paper-2); }
.contact-block h4 { color: var(--muted); margin-bottom: 12px; }
.contact-block a, .contact-block p { display: block; font-size: .96rem; color: var(--text); }
.form-note { padding: 14px 16px; border-radius: var(--r-sm); font-size: .9rem; margin-top: 16px; }
.form-note.ok { background: #E8F6EE; color: #14713C; }
.form-note.err { background: #FDE9EE; color: #B00030; }

/* Schritte auf hellem Grund */
.section-paper .steps { border-top-color: var(--paper-line); }
.section-paper .step { border-bottom-color: var(--paper-line); }
.section-paper .step:hover { background: #fff; }
.section-paper .step-n { color: var(--violet); }
.section-paper .step-meta { color: var(--muted); }
.step-link {
  display: inline-flex; align-items: center; gap: 9px; justify-content: flex-end;
  font-weight: 600; text-transform: none; letter-spacing: 0; font-size: .88rem;
  color: var(--violet) !important; transition: gap .3s var(--ease);
}
.section-ink .step-link { color: var(--violet-lt) !important; }
.step-link:hover { gap: 14px; }

/* Teilleistungen als Chips unter einer Bereichszeile */
.svc-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
.svc-tags li {
  font-size: .8rem; font-weight: 500; padding: 6px 13px; border-radius: 0;
  border: 1px solid var(--paper-line); background: #fff; color: var(--muted);
}
.section-ink .svc-tags li { border-color: var(--ink-line); background: var(--ink-2); color: var(--muted-i); }

/* Chips, die ins Klartext-Lexikon führen. Die Bereichszeile selbst ist kein Link
   (Link im Link wäre ungültig) – der Titel-Pfeil rechts führt zur Detailseite. */
.svc-tags.is-linked li { padding: 0; border: 0; background: none; }
.svc-tags.is-linked a {
  display: inline-block; font-size: .8rem; font-weight: 500; padding: 6px 13px;
  border-radius: 0; border: 1px solid var(--paper-line); background: #fff; color: var(--muted);
  transition: border-color .25s, color .25s, background-color .25s;
}
.svc-tags.is-linked a:hover,
.svc-tags.is-linked a:focus-visible { border-color: var(--violet); color: var(--violet); background: #fff; }
.section-ink .svc-tags.is-linked a { border-color: var(--ink-line); background: var(--ink-2); color: var(--muted-i); }
.section-ink .svc-tags.is-linked a:hover,
.section-ink .svc-tags.is-linked a:focus-visible { border-color: var(--violet-lt); color: var(--violet-lt); }

/* ---------------------------------------------------------- Klartext-Lexikon */
.lex-jump { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lex-jump > span { font-size: .82rem; color: var(--muted); margin-right: 4px; }
.lex-jump a {
  font-size: .82rem; padding: 6px 13px; border-radius: 0;
  border: 1px solid var(--paper-line); background: #fff; color: var(--muted);
  transition: border-color .25s, color .25s;
}
.lex-jump a:hover { border-color: var(--violet); color: var(--text); }

.lex-list { border-top: 1px solid var(--paper-line); }
.lex-entry {
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr);
  gap: 26px; padding: 34px 0; border-bottom: 1px solid var(--paper-line);
  scroll-margin-top: calc(var(--head-h) + 24px);
}
.lex-entry h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); }
.lex-entry h3::before {
  content: ""; display: block; width: 26px; height: 2px;
  background: var(--violet); margin-bottom: 14px;
}
.lex-entry p { max-width: 68ch; }
.lex-entry p + p { margin-top: 14px; }
.lex-note {
  font-size: .9rem; color: var(--muted); padding-left: 16px;
  border-left: 2px solid var(--paper-line);
}
.lex-entry:target h3::before { width: 60px; transition: width .5s var(--ease); }

@media (max-width: 860px) {
  .lex-entry { grid-template-columns: 1fr; gap: 14px; padding: 28px 0; }
}

/* ------------------------------------------------- Rechtsseiten (Impressum, Datenschutz) */
.legal { max-width: 75ch; }
.legal h2 {
  font-size: clamp(1.15rem, 2vw, 1.45rem); margin: 44px 0 14px;
  padding-top: 22px; border-top: 1px solid var(--paper-line);
}
.legal h2:first-of-type { margin-top: 0; }
.legal p { margin-bottom: 14px; }
.legal a { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.legal-list { list-style: none; display: grid; gap: 11px; margin: 0 0 18px; }
.legal-list li { position: relative; padding-left: 20px; color: var(--muted); line-height: 1.6; }
.legal-list li::before { content: "–"; position: absolute; left: 0; color: var(--brand); }
.legal-list b, .legal p b { color: var(--text); font-weight: 600; }
.legal-meta {
  font-size: .88rem; padding: 14px 18px; background: var(--paper-2);
  border-left: 2px solid var(--paper-line);
}
.legal-hint {
  font-size: .9rem; padding: 16px 18px; margin-bottom: 40px;
  border: 1px dashed var(--signal); line-height: 1.6;
}
.legal-updated { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--paper-line); font-size: .88rem; }
/* Kürzerer Kopfbereich für Seiten ohne Hintergrundfilm */
.page-hero-tight { min-height: auto; padding: calc(var(--head-h) + 60px) 0 60px; }
.foot-legal a.is-current { color: var(--text-i); }

/* Karten untereinander */
.cards-stack { display: grid; gap: 14px; }

/* Person (Über uns) */
.person { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(30px, 5vw, 64px); align-items: start; }
.person-photo { position: sticky; top: calc(var(--head-h) + 30px); }
/* Statt Porträtfoto (auf Wunsch des Inhabers) trägt diese Fläche das Versprechen
   als typografische Aussage – bewusst gesetzt, nicht als Notlösung erkennbar. */
.person-quote {
  margin: 0; padding: clamp(30px, 4vw, 44px);
  background: var(--ink); color: var(--text-i);
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 340px;
}
.person-quote p {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.25;
  color: var(--text-i); margin: 0;
}
.person-quote p::before { content: "»"; color: var(--brand-lt); }
.person-quote p::after  { content: "«"; color: var(--brand-lt); }
.person-quote cite {
  display: block; margin-top: 28px; font-style: normal;
  font-size: .72rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--brand-lt);
}
.person-text h2 { margin: 14px 0 22px; }

/* Kontakt: drei Wege */
.ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: clamp(40px, 6vw, 70px); }
.way {
  display: flex; align-items: flex-start; gap: 16px; text-align: left;
  padding: 26px; border-radius: var(--r-lg);
  background: var(--ink-3); border: 1px solid var(--paper-line); color: var(--text);
  transition: border-color .25s, transform .4s var(--ease), box-shadow .4s var(--ease);
}
.way:hover { border-color: var(--violet); transform: translateY(-3px); box-shadow: 0 24px 50px -36px rgba(0, 0, 0, .55); }
.way-main { background: var(--ink); color: var(--text-i); border-color: transparent; }
.way-main .way-body span { color: var(--muted-i); }
.way-n { font-family: var(--serif); font-size: 1.1rem; color: var(--violet); flex: none; padding-top: 2px; }
.way-main .way-n { color: var(--violet-lt); }
.way-body { display: grid; gap: 5px; }
.way-body b { font-size: 1.05rem; font-weight: 600; }
.way-body span { font-size: .9rem; color: var(--muted); line-height: 1.5; }
.way .btn-arrow { margin-left: auto; align-self: center; flex: none; }

.contact-block-accent { background: var(--ink); color: var(--text-i); }
.contact-block-accent h4 { color: var(--muted-i); }
.contact-block-accent p { color: var(--muted-i); }

/* Honigtopf: fuer Menschen unsichtbar, fuer Bots verlockend */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.page-hero-tight { padding-bottom: clamp(50px, 6vw, 80px); }

/* ═════════════════════════════════════════════════════════════ Responsive */
@media (max-width: 1080px) {
  .ivideo { grid-template-columns: 1fr; }
  .foot-top { grid-template-columns: 1fr 1fr; gap: 34px; }
  .plan { grid-template-columns: 48px 1fr; gap: 16px 20px; }
  .plan-for, .plan .btn { grid-column: 2; }
}

@media (max-width: 900px) {
  :root { --gutter: 24px; }
  .nav-toggle { display: flex; }
  .nav {
    position: fixed; inset: var(--head-h) 0 auto 0; margin: 0;
    background: rgba(11, 11, 15, .97); backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--ink-line);
    padding: 14px var(--gutter) 26px;
    max-height: calc(100vh - var(--head-h)); overflow-y: auto;
    opacity: 0; visibility: hidden; transform: translateY(-12px);
    transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .nav > ul { flex-direction: column; align-items: stretch; gap: 2px; }
  .nav a, .sub-toggle { width: 100%; justify-content: space-between; padding: 15px 14px; font-size: 1.05rem; }
  .subnav {
    position: static; transform: none; width: auto; opacity: 1; visibility: visible;
    pointer-events: auto; background: none; border: 0; box-shadow: none;
    padding: 0 0 0 14px; max-height: 0; overflow: hidden;
    transition: max-height .35s var(--ease);
  }
  .has-sub:hover .subnav { transform: none; }
  .has-sub.is-open .subnav { max-height: 420px; }
  .nav-actions .btn-sm { display: none; }

  .hero-grid { grid-template-columns: 1fr; gap: 30px; }
  .hero-title { max-width: none; }
  .hero-facts { gap: 18px 34px; margin-top: 46px; }
  .sec-head-split { grid-template-columns: 1fr; gap: 22px; align-items: start; }
  .bento { grid-template-columns: repeat(2, 1fr); }
  .cell, .cell-lg, .cell-violet, .cell-quote, .cell-cta { grid-column: span 2; grid-row: auto; min-height: 260px; }
  .cell-lg { min-height: 340px; }
  .step { grid-template-columns: 60px 1fr; gap: 14px 20px; padding: 26px 0; }
  .step-meta { grid-column: 2; text-align: left; padding-top: 0; }
  .live-grid, .split-2, .cards-3, .contact-grid, .ways, .person { grid-template-columns: 1fr; }
  .type-grid { grid-template-columns: 1fr 1fr; }
  .person-photo { position: static; max-width: 340px; }
  .step-link { justify-content: flex-start; }
  .faq-item p { padding-right: 0; }
  .compare-stage { aspect-ratio: 4 / 3.4; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .hero { min-height: auto; padding-top: calc(var(--head-h) + 48px); padding-bottom: 70px; }
  .hero-cta .btn, .cta-actions .btn { width: 100%; }
  .hero-facts { flex-direction: column; gap: 14px; }
  .cell { padding: 24px; }
  .type-grid { grid-template-columns: 1fr; }
  .foot-top { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .bk-steps li { font-size: 0; gap: 0; }
  .bk-steps li::before { height: 4px; }
  .bk-modal { max-height: 94vh; }
  .bot-panel { right: 8px; bottom: 8px; width: calc(100vw - 16px); height: calc(100vh - 16px); border-radius: var(--r-md); }
  .bot-fab { right: 16px; bottom: 16px; height: 52px; padding: 0 18px 0 15px; }
  /* Auf schmalen Fenstern sitzt der Knopf naeher am Rand, der Abstand aus der
     Grundregel reicht dort aus - keine Sonderbehandlung noetig. */
  .ticker-track span { font-size: 1.2rem; }
  .iv-side { grid-template-columns: 1fr; }
  .compare-stage { aspect-ratio: 3 / 3.5; }
  .cmp-grip { width: 44px; height: 44px; }
}

/* Grobmotorik / Touch: Hover-Effekte, die sonst hängen bleiben, abschalten */
@media (hover: none) {
  .cell:hover, .live-card:hover, .card:hover, .plan:hover { transform: none; }
  .step:hover { padding-inline: 0; background: none; }
  .iv-bar { opacity: 1; transform: none; }
}

/* ==================================================================
   Website-Check (check.html)
   Ampel statt Punktzahl. Bewusst keine Note und kein Prozentbalken:
   eine erfundene "42/100" waere Verkaufsdruck, kein Befund.
   ================================================================== */

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.chk-form {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin-top: 30px; max-width: 620px;
}
.chk-form input {
  flex: 1 1 260px; min-width: 0;
  padding: 15px 16px;
  font: 400 16px/1.3 var(--sans);
  color: var(--text-i);
  background: rgba(255,255,255,.06);
  border: 1px solid var(--ink-line);
  border-radius: 0;
}
.chk-form input::placeholder { color: var(--muted-i); }
.chk-form input:focus {
  outline: none;
  border-color: var(--brand-lt);
  background: rgba(255,255,255,.09);
}
.chk-form .btn { flex: 0 0 auto; }

.chk-klein {
  margin-top: 12px;
  font: 400 13px/1.55 var(--sans);
  color: var(--muted-i);
  max-width: 620px;
}
.section-paper .chk-klein { color: var(--muted); }

.chk-laeuft {
  margin-top: 18px;
  font: 400 15px/1.4 var(--sans);
  color: var(--brand-lt);
}
.chk-laeuft::after {
  content: ''; display: inline-block; vertical-align: -1px;
  width: 8px; height: 8px; margin-left: 10px;
  background: var(--brand-lt);
  animation: chk-puls 1s steps(2) infinite;
}
@keyframes chk-puls { 50% { opacity: .2; } }

.chk-klein a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.chk-klein a:hover { color: var(--brand-lt); }
.section-paper .chk-klein a:hover { color: var(--brand); }

/* --- Ergebnis --- */
/* scroll-margin: die Kopfzeile steht fest oben und wuerde sonst genau das
   Fazit verdecken, zu dem gerade gescrollt wurde. */
#checkErgebnis { margin-bottom: 70px; scroll-margin-top: 110px; }

.chk-kopf {
  padding: 26px 28px;
  background: var(--paper-2);
  border-left: 4px solid var(--muted);
}
.chk-kopf.gut     { border-left-color: #2C6047; }
.chk-kopf.mittel  { border-left-color: #B87514; }
.chk-kopf.schwach { border-left-color: #B4482A; }

.chk-geprueft {
  display: block;
  font: 400 13px/1.4 var(--sans);
  color: var(--muted);
  word-break: break-all;
}
.chk-fazit {
  margin-top: 10px;
  font: 400 20px/1.45 var(--serif);
  color: var(--text);
}

.chk-liste { list-style: none; margin: 0; padding: 0; }
.chk-punkt {
  display: flex; gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--paper-line);
}
.chk-punkt > div { min-width: 0; }
.chk-ampel {
  flex: 0 0 26px; width: 26px; height: 26px;
  display: grid; place-items: center;
  font: 700 15px/1 var(--sans);
  color: #fff;
}
.chk-punkt.gut     .chk-ampel { background: #2C6047; }
.chk-punkt.hinweis .chk-ampel { background: #B87514; }
.chk-punkt.problem .chk-ampel { background: #B4482A; }

.chk-punkt b {
  font: 600 16px/1.3 var(--sans);
  color: var(--text);
}
.chk-status {
  margin-left: 10px;
  font: 400 12px/1 var(--sans);
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted);
}
.chk-punkt p {
  margin-top: 6px;
  font: 400 15px/1.6 var(--sans);
  color: var(--text);
}
.chk-punkt .chk-bedeutung {
  margin-top: 4px;
  font-size: 14px;
  color: var(--muted);
}

/* Ergebnisliste und Handy-Bild nebeneinander, solange Platz ist. */
.chk-koerper { display: grid; grid-template-columns: 1fr; gap: 34px; }
@media (min-width: 900px) {
  .chk-koerper { grid-template-columns: 1fr 300px; align-items: start; }
}

.chk-bild { margin: 0; position: sticky; top: 100px; }
.chk-bild img {
  display: block; width: 100%; max-width: 300px; height: auto;
  border: 1px solid var(--paper-line);
  background: #fff;
}
.chk-bild figcaption {
  margin-top: 10px; max-width: 300px;
  font: 400 13px/1.55 var(--sans);
  color: var(--muted);
}

.chk-meinung {
  margin-top: 22px; padding: 18px 20px;
  max-width: 300px;
  background: var(--paper-2);
  border-left: 3px solid var(--brand);
}
.chk-meinung.ruhig { border-left-color: #2C6047; }
.chk-meinung b {
  display: block;
  font: 600 12px/1 var(--sans);
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted);
}
.chk-meinung-kern {
  margin-top: 10px;
  font: 400 17px/1.4 var(--serif);
  color: var(--text);
}
.chk-meinung ul {
  margin: 12px 0 0; padding-left: 18px;
  font: 400 14px/1.55 var(--sans);
  color: var(--text);
}
.chk-meinung li { margin-bottom: 4px; }
.chk-meinung-fuss {
  margin-top: 14px;
  font: 400 12px/1.5 var(--sans);
  color: var(--muted);
}

.chk-abschluss {
  margin-top: 34px; padding: 28px;
  background: var(--ink); color: var(--text-i);
}
.chk-abschluss.ruhig {
  background: var(--paper-2); color: var(--text);
  border: 1px solid var(--paper-line);
}
.chk-abschluss b {
  display: block;
  font: 600 13px/1 var(--sans);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--brand-lt);
}
.chk-abschluss.ruhig b { color: var(--brand); }
.chk-abschluss p {
  margin: 12px 0 20px;
  font: 400 16px/1.65 var(--sans);
  color: var(--text-i);          /* sonst gewinnt die Textfarbe des hellen Abschnitts */
  max-width: 60ch;
}
.chk-abschluss.ruhig p { color: var(--text); }
.chk-aktionen { display: flex; gap: 12px; flex-wrap: wrap; }

/* Vertrauens-Block: bewusst schlicht und ohne Siegel-Optik. Ein Kasten, der
   nach Zertifikat aussieht, weckt genau das Misstrauen, das er ausraeumen soll. */
.chk-vertrauen {
  margin-top: 60px; padding: 30px 32px;
  background: var(--paper-2);
  border-left: 3px solid var(--brand);
}
.chk-vertrauen h3 {
  font: 400 22px/1.3 var(--serif);
  color: var(--text);
}
.chk-vertrauen ul { list-style: none; margin: 20px 0 0; padding: 0; }
.chk-vertrauen li {
  position: relative; padding-left: 22px; margin-bottom: 12px;
  font: 400 15px/1.65 var(--sans); color: var(--text);
  max-width: 78ch;
}
.chk-vertrauen li::before {
  content: ''; position: absolute; left: 0; top: 9px;
  width: 8px; height: 8px; background: var(--brand);
}
.chk-vertrauen-ehrlich {
  margin-top: 20px; padding-top: 16px;
  border-top: 1px solid var(--paper-line);
  font: 400 14px/1.6 var(--sans); color: var(--muted);
  max-width: 78ch;
}
.chk-vertrauen-ehrlich a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 560px) { .chk-vertrauen { padding: 22px 20px; } }

.chk-fehler {
  padding: 24px 26px;
  background: var(--paper-2);
  border-left: 4px solid #B4482A;
}
.chk-fehler b { font: 600 16px/1.3 var(--sans); color: var(--text); }
.chk-fehler p { margin-top: 8px; font: 400 15px/1.6 var(--sans); color: var(--muted); }

@media (max-width: 560px) {
  .chk-form .btn { width: 100%; }
  .chk-status { display: block; margin: 4px 0 0; }
  .chk-abschluss .btn { width: 100%; }
}

/* Druck */
@media print {
  .site-header, .bot-fab, .bot-panel, .hero-media, .cta-media, .ticker, .scroll-progress { display: none !important; }
  body { background: #fff; color: #000; }
  .section, .cta-final { padding: 20px 0; }
}