/*
 * ap.css — Gestaltung der neuen Seite (Apple-Stil).
 *
 * Entstanden aus der Demo public/demo-apple.php und dort erprobt.
 * Bauplan und Regeln: docs/ap-bauplan.md. Bewegung liegt in ap.js.
 */

/* ============================================================
   1. Grundlagen
   ============================================================ */
:root{
  --bg:#0B121B;
  --bg-tief:#070C13;
  --flaeche:rgba(255,255,255,.055);
  --flaeche-2:rgba(255,255,255,.085);
  --kante:rgba(255,255,255,.10);
  --kante-hell:rgba(255,255,255,.20);
  --text:#F0F5FA;
  --text-2:#9DAFC2;
  --text-3:#6E8095;
  --teal:#2FD3C9;
  --orange:#FF8A1F;
  --r-xl:26px; --r-l:20px; --r-m:14px; --r-s:10px;
  --maxw:1120px;
  --nav-h:64px;
  /* Vom Scrollen gesetzt, steuert Deckkraft und Unschärfe der Navigation. */
  --navP:0;
}
/* Inter, selbst ausgeliefert (12.09.2026, Inhaber: Schrift des Vorbilds).
   Bewusst NICHT von fonts.googleapis.com nachgeladen: das schickt die
   IP-Adresse jedes Besuchers zu Google. Eine variable Datei je Zeichensatz
   deckt alle Stärken von 300 bis 700 ab. Herkunft: Google Fonts, Inter v20,
   SIL Open Font License. */
@font-face{
  font-family:'Inter';font-style:normal;font-weight:300 700;font-display:swap;
  src:url('/assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:300 700;font-display:swap;
  src:url('/assets/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* Manrope, selbst ausgeliefert (12.09.2026): die Schrift der Design-Vorlage
   „COMNIC-IT Landingpage". Die Vorlage lädt sie von fonts.googleapis.com, das
   kommt hier nicht auf die Seite. Eine variable Datei je Zeichensatz deckt 400
   bis 800 ab. Herkunft: Google Fonts, Manrope v20, SIL Open Font License.
   Diese Angabe allein ändert nichts: erst eine Regel mit font-family holt sie. */
@font-face{
  font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;
  src:url('/assets/fonts/manrope-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;
  src:url('/assets/fonts/manrope-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* ============================================================
   Design-Tokens aus der Vorlage „COMNIC-IT Landingpage" (Design-Projekt
   169a56c4, Stand 12.09.2026). Präfix --dc-, damit keine bestehende
   Variable überschrieben wird: dieser Block allein ändert nichts am Bild,
   er stellt nur die Werte bereit.
   ============================================================ */
:root{
  /* --- Flächen --- */
  --dc-bg:#0A1217;
  --dc-bg-hero:#070F13;
  --dc-bg-fuss:#0D171D;
  --dc-karte:#101B21;
  --dc-karte-hell:#0F1F23;
  --dc-karte-verlauf:linear-gradient(135deg,#12222A 0%,#101B21 60%);
  --dc-band-verlauf:linear-gradient(135deg,#0F2027 0%,#101B21 55%);
  --dc-flaeche:rgba(232,240,243,.06);
  --dc-flaeche-2:rgba(232,240,243,.07);

  /* --- Schrift --- */
  --dc-text:#E8F0F3;
  --dc-text-voll:#FFFFFF;
  --dc-text-86:rgba(232,240,243,.86);
  --dc-text-78:rgba(232,240,243,.78);
  --dc-text-70:rgba(232,240,243,.70);
  --dc-text-62:rgba(232,240,243,.62);
  --dc-text-55:rgba(232,240,243,.55);
  --dc-text-45:rgba(232,240,243,.45);
  --dc-text-nav:#D9E4E8;

  /* --- Akzente --- */
  --dc-gruen:#A6CE39;
  --dc-cyan:#3EC6E8;
  --dc-orange:#F2A23C;
  --dc-bernstein:#E8A33D;
  --dc-gruen-16:rgba(166,206,57,.16);
  --dc-cyan-16:rgba(62,198,232,.16);

  /* --- Kanten --- */
  --dc-kante-08:rgba(232,240,243,.08);
  --dc-kante-09:rgba(232,240,243,.09);
  --dc-kante-12:rgba(232,240,243,.12);
  --dc-kante-14:rgba(232,240,243,.14);
  --dc-kante-18:rgba(232,240,243,.18);
  --dc-kante-22:rgba(232,240,243,.22);
  --dc-kante-35:rgba(232,240,243,.35);

  /* --- Schriftfamilie (selbst ausgeliefert, nichts von Google) --- */
  --dc-ff:'Manrope','Inter',-apple-system,'Helvetica Neue',Arial,sans-serif;
  --dc-ff-mono:ui-monospace,SFMono-Regular,Menlo,monospace;

  /* --- Schriftgrade --- */
  --dc-h1:clamp(40px,6vw,86px);
  --dc-h1-zeile:1.04;
  --dc-h1-laufweite:-.035em;
  --dc-h2:clamp(30px,3.8vw,50px);
  --dc-h2-klein:clamp(28px,3.2vw,44px);
  --dc-h2-zeile:1.1;
  --dc-h3:25px;
  --dc-h3-klein:23px;
  --dc-preis:clamp(40px,5vw,64px);
  --dc-preis-karte:34px;
  --dc-lead:18px;
  --dc-text-gross:17px;
  --dc-text-basis:16px;
  --dc-text-klein:15px;
  --dc-text-winzig:14px;
  --dc-augenbraue:13px;
  --dc-marke:12px;
  --dc-marke-laufweite:.16em;

  /* --- Abstände --- */
  --dc-maxw:1120px;
  --dc-rand:clamp(20px,4vw,56px);
  --dc-rand-hero:clamp(20px,3.4vw,50px);
  --dc-abschnitt:clamp(64px,9vw,130px);
  --dc-abschnitt-klein:clamp(40px,6vw,90px);
  --dc-karte-polster:clamp(24px,2.4vw,34px);
  --dc-block-polster:clamp(26px,3vw,44px);
  --dc-luecke-s:10px;
  --dc-luecke-m:18px;
  --dc-luecke-l:22px;
  --dc-luecke-xl:clamp(28px,4vw,56px);

  /* --- Radien --- */
  --dc-r-knopf:8px;
  --dc-r-knopf-klein:7px;
  --dc-r-feld:10px;
  --dc-r-menue:14px;
  --dc-r-karte:18px;
  --dc-r-block:22px;
  --dc-r-pille:999px;

  /* --- Tiefe: die Vorlage arbeitet mit Flächen und Kanten, ohne
         Schlagschatten. Nur die Bühne trägt zwei Schleier. --- */
  --dc-schleier-senkrecht:linear-gradient(180deg,rgba(7,15,19,.80) 0%,rgba(7,15,19,.40) 30%,rgba(7,15,19,.68) 72%,rgba(7,15,19,.97) 100%);
  --dc-schleier-waagerecht:linear-gradient(95deg,rgba(7,15,19,.93) 0%,rgba(7,15,19,.74) 36%,rgba(7,15,19,.22) 76%,rgba(7,15,19,.04) 100%);

  /* --- Umbruchpunkte --- */
  --dc-bp-menue:1040px;
  --dc-bp-karten:290px;
  --dc-bp-preis:300px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  /* Manrope aus der Design-Vorlage, danach Inter und die Systemschrift als
     Notnagel, solange die Datei lädt oder nicht ankommt. */
  font-family:var(--dc-ff);
  font-size:var(--dc-text-basis);
  line-height:1.55;
  letter-spacing:0;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* height:auto ist Pflicht: Bilder tragen width/height im Markup (gut gegen
   Layoutsprünge). Wird die Breite per CSS begrenzt, bliebe die Höhe sonst am
   Attributwert kleben und das Bild wird in die Länge gezogen. */
img,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;margin:0;padding:0}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:6px}

/* Laufweite und Zeilenabstand je Größe, nicht ein Wert für alles.
   Zeilenabstand nicht enger als 1.14: darunter schneidet die Zeilenbox dem
   „g" in „Überraschungen" die Unterlänge ab und drückt oben gegen die
   Umlautpunkte. Deutsche Überschriften haben beides fast immer in einer
   Zeile — was im englischen Vorbild noch passte, passt hier nicht mehr. */
.d1{font-size:var(--dc-h1);line-height:var(--dc-h1-zeile);letter-spacing:var(--dc-h1-laufweite);font-weight:600;color:var(--dc-text-voll);margin:0}
.d1 .zweite{display:block;margin-top:.18em;font-size:.78em;letter-spacing:-.03em;color:var(--dc-gruen)}
.d2{font-size:var(--dc-h2);line-height:var(--dc-h2-zeile);letter-spacing:-.03em;font-weight:600;color:var(--dc-text-voll);margin:0}
.d3{font-size:var(--dc-h3-klein);line-height:1.25;letter-spacing:-.02em;font-weight:600;color:var(--dc-text-voll);margin:0}
.lead{font-size:var(--dc-lead);line-height:1.55;letter-spacing:0;color:var(--dc-text-62);margin:0}
.klein{font-size:var(--dc-text-klein);line-height:1.5;letter-spacing:0;color:var(--dc-text-55)}
.marke{font-size:var(--dc-marke);font-weight:700;letter-spacing:var(--dc-marke-laufweite);text-transform:uppercase;color:var(--dc-text-70)}

.huelle{max-width:var(--dc-maxw);margin:0 auto;padding:0 var(--dc-rand)}
section{padding:var(--dc-abschnitt) 0}
.kopf{max-width:760px;margin:0 0 clamp(36px,5vw,60px)}
.kopf .lead{margin-top:22px}

/* ============================================================
   2. Navigation: schwebende, durchscheinende Ebene
   ============================================================ */
.nav{
  position:fixed;top:var(--band-h,0px);left:0;right:0;z-index:60;height:var(--nav-h);
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:0 24px;
}
/* Material und weiche Kante liegen auf einer eigenen Ebene HINTER dem Inhalt.
   Läge die Maske auf .nav selbst, würde sie alles beschneiden, was aus der
   Leiste herausragt: die Aufklappmenüs wären unsichtbar. */
.nav::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:rgba(11,18,27,calc(.42 + .40 * var(--navP)));
  backdrop-filter:blur(calc(12px + 14px * var(--navP))) saturate(180%);
  -webkit-backdrop-filter:blur(calc(12px + 14px * var(--navP))) saturate(180%);
  -webkit-mask-image:linear-gradient(#000 78%,rgba(0,0,0,.55) 92%,transparent);
          mask-image:linear-gradient(#000 78%,rgba(0,0,0,.55) 92%,transparent);
  transition:background .25s linear;
}
.nav .marke-zeile{display:flex;align-items:center;gap:10px}
.nav img{height:26px;width:auto}
.nav > .marke-zeile img{filter:brightness(0) invert(1);transition:filter .2s ease-out}
.nav.ist-gescrollt > .marke-zeile img{filter:none}
@media(prefers-reduced-motion:reduce){.nav > .marke-zeile img{transition:none}}
.nav-links{display:flex;align-items:center;gap:26px;font-size:14.5px;font-weight:520;color:var(--text-2)}
.nav-links a{transition:color .16s ease-out}
.nav-links a:hover{color:var(--text)}
@media (max-width:820px){.nav-links{display:none}}
/* Breit stehen die Menüpunkte am Logo, nicht mittig zwischen Logo und Knopf
   (Inhaber, 12.09.2026). Schmal ist .nav-links ein festes Aufklappfeld, dort
   würde ein Rand es verschieben, deshalb erst ab 1181 px. */
@media (min-width:1181px){.nav-links{margin:0 auto 0 clamp(32px,4vw,56px)}}

/* Knöpfe. Rückmeldung sitzt auf dem Drücken, nicht auf dem Loslassen. */
.knopf{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:16px 26px;border-radius:var(--dc-r-knopf);font-size:var(--dc-text-basis);font-weight:700;letter-spacing:0;
  cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:manipulation;
  transform:translateZ(0);
  transition:transform 110ms cubic-bezier(.25,.8,.35,1),background .18s ease-out,border-color .18s ease-out;
}
.knopf.gedrueckt{transform:scale(.965)}
.knopf-voll{background:var(--dc-cyan);color:#07161C;border:1px solid var(--dc-cyan)}
.knopf-voll:hover{background:#5FD4F0;color:#07161C}
.knopf-glas{
  background:var(--dc-flaeche-2);border:1px solid var(--dc-kante-22);color:var(--dc-text-voll);
}
.knopf-glas:hover{background:rgba(232,240,243,.12);color:var(--dc-text-voll)}
.knopf-klein{padding:11px 18px;font-size:var(--dc-text-winzig)}
.knopf-orange{background:var(--dc-orange);color:var(--dc-bg)}

/* Kleiner Textlink statt Knopf: öffnet dasselbe Blatt wie .knopf[data-blatt],
   soll aber neben zwei Absätzen nicht wie eine Handlungsaufforderung wirken.
   Als <button> gebaut, weil es kein Ziel gibt, sondern ein Blatt aufgeht. */
.mehr{
  display:inline-flex;align-items:center;gap:6px;margin-top:16px;
  background:none;border:0;padding:0;
  font-family:inherit;font-size:var(--dc-text-klein);font-weight:700;letter-spacing:0;
  color:var(--dc-cyan);cursor:pointer;
}
.mehr:hover{color:var(--dc-gruen)}
.mehr::after{content:"›";font-size:17px;line-height:1;transition:transform .16s ease-out}
.mehr:hover{text-decoration:underline;text-underline-offset:3px}
.mehr:hover::after{transform:translateX(3px)}

/* ============================================================
   3. Bühne
   ============================================================ */
.buehne{position:relative;min-height:min(92vh,860px);display:flex;align-items:flex-end;overflow:hidden}
.buehne-bild{position:absolute;inset:-8% 0 0;will-change:transform}
.buehne-bild img,.buehne-bild video{width:100%;height:100%;object-fit:cover;object-position:center 44%}
/* Zwei Schleier statt einem: der senkrechte trägt den Übergang zur Seite, der
   waagerechte hält den Text lesbar, egal wie hell das Foto an der Stelle ist.
   Auf schmalen Schirmen steht der Text über der Bildmitte, dort muss der
   senkrechte Schleier kräftiger sein. */
.buehne-schleier{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(7,12,19,.86) 0 30%,rgba(7,12,19,.46) 58%,rgba(7,12,19,.12)),
    linear-gradient(180deg,rgba(7,12,19,.66) 0,rgba(7,12,19,.30) 30%,rgba(9,15,23,.82) 74%,var(--bg) 100%),
    radial-gradient(70% 60% at 78% 22%,rgba(47,211,201,.14),transparent 68%);
}
@media (max-width:720px){
  .buehne-schleier{
    background:
      linear-gradient(180deg,rgba(7,12,19,.74) 0,rgba(7,12,19,.62) 42%,rgba(9,15,23,.88) 76%,var(--bg) 100%);
  }
}
.buehne-inhalt{position:relative;z-index:2;width:100%;padding:0 0 clamp(48px,7vw,84px)}
.buehne .d1{max-width:19ch}
.buehne .d1 em{font-style:normal;color:var(--teal)}
/* Über wechselndem Bild ein Tick heller und schwerer als im Fließtext, sonst
   fällt die Schrift auf hellen Bildstellen weg. */
.buehne .lead{max-width:56ch;margin-top:22px;color:#C8D6E4}
.buehne .d1 .zweite{color:rgba(240,245,250,.86)}
.buehne-tasten{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.punkt{width:7px;height:7px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 0 rgba(47,211,201,.5);animation:puls 2.6s ease-out infinite}
@keyframes puls{0%{box-shadow:0 0 0 0 rgba(47,211,201,.45)}70%{box-shadow:0 0 0 9px rgba(47,211,201,0)}100%{box-shadow:0 0 0 0 rgba(47,211,201,0)}}
.marke-zeile-buehne{display:flex;align-items:center;gap:10px;margin-bottom:20px}

/* Vertrauenszeile unter der Bühne */
.fakten{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px}
.fakt{
  display:inline-flex;align-items:center;gap:9px;padding:9px 15px;border-radius:999px;
  background:rgba(255,255,255,.05);border:1px solid var(--kante);
  font-size:13.5px;color:var(--text-2);letter-spacing:.004em;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.fakt b{color:var(--text);font-weight:620}

/* ============================================================
   4. Karten
   ============================================================ */
.raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(272px,100%),1fr));gap:16px}
/* Vier Karten: fest 2×2 statt auto-fit, sonst bleibt bei drei Spalten eine
   Karte allein in der zweiten Reihe (Inhaber, 11.10.2026, /webseiten). */
.raster.raster-2x2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:640px){.raster.raster-2x2{grid-template-columns:1fr}}
.karte{
  position:relative;padding:26px 24px 28px;border-radius:var(--r-l);
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.028));
  border:1px solid var(--kante);
  /* Helle Oberkante: das Licht, das sich im Material fängt. */
  box-shadow:inset 0 1px 0 rgba(255,255,255,.13),0 18px 40px -28px rgba(0,0,0,.9);
  transition:transform 180ms cubic-bezier(.25,.8,.35,1),background 180ms ease-out,border-color 180ms ease-out;
}
.karte:hover{transform:translateY(-3px);background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.04));border-color:var(--kante-hell)}
.karte.gedrueckt{transform:scale(.985)}
.karte .d3{margin-bottom:9px}
.karte p{margin:0;color:var(--text-2);font-size:15.5px;line-height:1.6}
.karte-nr{font-size:12px;font-weight:620;letter-spacing:.1em;color:var(--teal);margin-bottom:16px;display:block}

/* Kachel als Tür: die ganze Fläche ist der Weg zur Unterseite. */
.tuer{display:flex;flex-direction:column;padding-bottom:24px}
.tuer .weiter{margin-top:20px;font-size:14.5px;font-weight:620;color:var(--teal);display:inline-flex;align-items:center;gap:8px}
.tuer .weiter i{font-style:normal;transition:transform 220ms cubic-bezier(.25,.8,.35,1)}
.tuer:hover .weiter i{transform:translateX(4px)}

/* Stichwortzeile */
.worte{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px}
.worte span{
  font-size:12px;letter-spacing:.006em;color:var(--text-2);
  padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.055);border:1px solid var(--kante);
}

/* Die beiden Personen-Absätze sind Fließtext, kein Vorspann: 21 px lasen sich
   dort wie eine Ansage. Nur hier kleiner, .lead bleibt auf allen anderen
   Seiten wie es ist. Steht bewusst in ap.css und nicht im Seitenkopf. */
#florian .lead,#philipp .lead{font-size:clamp(16px,1.45vw,18px);line-height:1.6}

/* ============================================================
   5. Regler: alles folgt dem Finger, sofort und durchgehend
   ============================================================ */
.rechner{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(24px,4vw,52px);align-items:center;
  padding:clamp(26px,4vw,42px);border-radius:var(--r-xl);
  background:linear-gradient(160deg,rgba(47,211,201,.10),rgba(255,255,255,.03) 46%,rgba(255,255,255,.02));
  border:1px solid var(--kante);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.13);
}
@media (max-width:860px){.rechner{grid-template-columns:minmax(0,1fr)}}
.regler{margin-top:30px;touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab}
.regler.zieht{cursor:grabbing}
.regler-bahn{position:relative;height:46px;display:flex;align-items:center}
.regler-schiene{position:absolute;left:0;right:0;height:8px;border-radius:999px;background:rgba(255,255,255,.10);overflow:hidden}
.regler-fuell{position:absolute;inset:0;transform-origin:left center;background:linear-gradient(90deg,var(--teal),#5FE7DE);border-radius:999px}
.regler-griff{
  position:absolute;top:50%;left:0;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;
  background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.45),0 0 0 1px rgba(0,0,0,.06);
  transition:box-shadow .18s ease-out;
}
.regler.zieht .regler-griff{box-shadow:0 4px 18px rgba(0,0,0,.55),0 0 0 8px rgba(47,211,201,.16)}
.regler-marken{display:flex;justify-content:space-between;margin-top:6px}
.regler-wert{display:flex;align-items:baseline;gap:10px;margin-top:4px}
.regler-wert b{font-size:34px;font-weight:700;letter-spacing:-.03em;line-height:1}
.empfehlung{text-align:center}
.empfehlung .empf-marke{display:block;font-size:13px;font-weight:620;letter-spacing:.1em;text-transform:uppercase;color:var(--teal)}
.empfehlung .preis{font-size:clamp(46px,8vw,68px);font-weight:700;letter-spacing:-.04em;line-height:1;margin:12px 0 6px}
/* Nur die Zusätze werden kleiner, nicht die Zahl: sonst überragt das Eurozeichen
   den Betrag, den es begleiten soll. */
.empfehlung .preis .ab{font-size:.42em;font-weight:620;letter-spacing:-.015em;color:var(--text-2)}
.empfehlung .preis .je{font-size:.28em;font-weight:560;letter-spacing:-.005em;color:var(--text-2)}
.empfehlung p{color:var(--text-2);font-size:15px;margin:10px auto 0;max-width:34ch}

/* ============================================================
   6. Preisschiene: ziehen, Schwung übergeben, einrasten
   ============================================================ */
/* Oben Luft fuer das „BELIEBT"-Abzeichen: es haengt 11px ueber der Karte
   (.abzeichen{top:-11px}), der Rahmen kappt mit overflow:hidden alles
   darueber. Bei 6px Polsterung fehlte dem Abzeichen die obere Haelfte.
   Der negative Rand haelt die Schiene trotzdem an ihrem Platz. */
.schiene-rahmen{overflow:hidden;margin:-12px -24px 0;padding:18px 24px 8px}
.schiene{
  display:flex;gap:16px;will-change:transform;touch-action:pan-y;
  cursor:grab;user-select:none;-webkit-user-select:none;
}
.schiene.zieht{cursor:grabbing}
.preiskarte{
  flex:0 0 min(340px,82vw);display:flex;flex-direction:column;
  padding:30px 28px;border-radius:var(--r-xl);
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.028));
  border:1px solid var(--kante);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.13),0 24px 50px -34px #000;
  transition:border-color .22s ease-out,background .22s ease-out,transform 180ms cubic-bezier(.25,.8,.35,1);
}
.preiskarte.aktiv{border-color:rgba(47,211,201,.55);background:linear-gradient(180deg,rgba(47,211,201,.14),rgba(255,255,255,.03))}
/* Auf breiten Schirmen genau drei Karten plus ein Streifen der vierten: der
   Streifen sagt „hier geht es weiter", ohne einen Betrag abzuschneiden. */
@media (min-width:900px){.preiskarte{flex:0 0 calc((100% - 32px) / 3 - 16px)}}
/* Passt der Inhalt ohne Ziehen (ap.js setzt dann .fest), gibt es keine vierte
   Karte, von der ein Streifen hervorlugen könnte: die drei Karten füllen dann
   die Schiene aus. Sonst endet die Reihe 48px vor dem Regler darüber, und die
   Kanten fluchten nicht (Inhaber, 12.09.2026). */
@media (min-width:900px){.schiene.fest .preiskarte{flex:1 1 0;min-width:0}}
.preiskarte .betrag{font-size:clamp(30px,3.1vw,37px);font-weight:700;letter-spacing:-.035em;line-height:1;margin:16px 0 0}
.preiskarte .betrag span{font-size:.36em;font-weight:540;letter-spacing:-.005em;color:var(--text-2)}
.preiskarte ul{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:11px}
.preiskarte li{display:flex;gap:11px;font-size:15px;color:var(--text-2);line-height:1.45}
.haken{flex:0 0 auto;width:18px;height:18px;margin-top:2px;border-radius:50%;background:rgba(47,211,201,.16);color:var(--teal);display:grid;place-items:center;font-size:11px;font-weight:800}
.preiskarte .knopf{margin-top:26px;width:100%}
.abzeichen{position:absolute;top:-11px;left:28px;background:var(--orange);color:#1A0C00;font-size:11px;font-weight:700;letter-spacing:.08em;padding:4px 11px;border-radius:999px}
.schiene-fuss{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:22px;flex-wrap:wrap}
.punkte{display:flex;gap:7px}
.punkte i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.22);transition:background .2s ease-out,transform .2s cubic-bezier(.25,.8,.35,1)}
.punkte i.an{background:var(--teal);transform:scale(1.45)}

/* Hosting: eigenes Band unter der Schiene, andere Einheit, anderer Käufer. */
.hosting{
  margin-top:26px;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr);gap:clamp(20px,3vw,44px);align-items:center;
  padding:clamp(22px,3vw,32px);border-radius:var(--r-l);
  border:1px solid var(--kante);background:linear-gradient(150deg,rgba(255,138,31,.09),rgba(255,255,255,.02));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}
@media (max-width:760px){.hosting{grid-template-columns:minmax(0,1fr)}}
.hosting .betrag{font-size:clamp(30px,3.4vw,38px);font-weight:700;letter-spacing:-.035em;line-height:1}
.hosting .betrag span{font-size:.36em;font-weight:540;color:var(--text-2)}
.hosting-preis{text-align:right}
@media (max-width:760px){.hosting-preis{text-align:left}}

/* ============================================================
   6b. Produkte
   ============================================================ */
.produkt{
  /* minmax(0,…): sonst wächst die Spalte am breitesten Kind (dem Zahlweise-
     Schalter) über den Bildschirm hinaus, statt es scrollen zu lassen. */
  display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:clamp(24px,4vw,48px);align-items:center;
  padding:clamp(26px,4vw,44px);border-radius:var(--r-xl);
  background:linear-gradient(155deg,rgba(47,211,201,.12),rgba(255,255,255,.03) 52%,rgba(255,255,255,.02));
  border:1px solid var(--kante);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 30px 60px -44px #000;
}
@media (max-width:900px){.produkt{grid-template-columns:minmax(0,1fr)}}
.produkt-kopf{display:flex;align-items:center;gap:12px}
.neu{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#1A0C00;background:var(--orange);padding:3px 10px;border-radius:999px}
.produkt-preis{margin-top:26px}
.betrag.gross{font-size:clamp(40px,6vw,56px);font-weight:700;letter-spacing:-.04em;line-height:1}
.betrag.gross .je{font-size:.30em;font-weight:560;letter-spacing:-.005em;color:var(--text-2)}
.preis-kopf{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.preis-marke{font-size:13px;font-weight:620;letter-spacing:.02em;color:var(--teal);background:rgba(47,211,201,.13);border-radius:999px;padding:5px 12px}

/* Stufenleiste: der Preis ist ein Ablauf, kein Entweder-oder. */
.stufen{list-style:none;margin:22px 0 0;padding:0;counter-reset:none}
.stufe{
  position:relative;display:grid;grid-template-columns:30px 1fr auto;gap:4px 14px;align-items:center;
  padding:13px 0;border-bottom:1px solid var(--kante);
}
.stufe:first-child{border-top:1px solid var(--kante)}
.stufe-punkt{grid-row:span 2;display:grid;place-items:center}
.stufe-punkt i{
  width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-style:normal;
  font-size:12.5px;font-weight:700;color:var(--text-3);
  background:rgba(255,255,255,.06);border:1px solid var(--kante);
}
.stufe-an .stufe-punkt i{background:var(--teal);color:#04211F;border-color:transparent}
.stufe-zeit{font-size:15.5px;font-weight:620;letter-spacing:-.01em}
.stufe-was{grid-column:2;font-size:13.5px;color:var(--text-3);line-height:1.4}
.stufe-preis{grid-row:span 2;grid-column:3;font-size:20px;font-weight:700;letter-spacing:-.02em;white-space:nowrap;text-align:right}
.stufe-preis small{font-size:.62em;font-weight:540;color:var(--text-3);margin-left:2px}

/* ── Preisblock mit Zahlweise-Schalter ────────────────────────────────────
   Der Schalter aendert sechs Dinge auf einmal (grosser Betrag, seine Marke,
   Stufe 2 mit Text, Stufe 3 mit Text, Ersparnis). Damit dabei nichts springt,
   bekommt JEDE wechselnde Stelle einen Slot in der Groesse ihrer laengsten
   Fassung. Ohne das wandert die halbe Seite, sobald eine Zeile umbricht.
   Gemessen, nicht geschaetzt: die Werte unten sind die breiteste bzw.
   hoechste der beiden Fassungen. */
.betrag.gross,
.stufe-preis,
#beSparen{font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1}

/* Zwei Zeilen reserviert: der laengere Text laeuft auf schmalen Fenstern um. */
.stufe-was{min-height:2.8em}

/* Die Ersparnis steht IMMER da, auch in der monatlichen Stellung — sie ist
   das Argument fuer den Wechsel. Feste Hoehe, damit der Knopfbereich darunter
   nicht wandert. */
/* Ersparnis als flache Karte NEBEN dem Schalter, im Material der Seite
   (Verlauf, Kante, helle Oberkante wie .karte) — im Orange-Akzent, weil hier
   ein Vorteil steht und nicht bloss eine Angabe.
   FLACH ist die Bedingung, nicht der Geschmack: sie belegt ihren Platz immer
   (sonst springt das Layout beim Umschalten), und alles, was hoeher ist als
   der Schalter daneben, steht als Leerraum unter ihm, solange sie unsichtbar
   ist. Auf Schalterhoehe faellt nichts auf. */
.spar-tafel{
  margin:0;display:flex;align-items:baseline;gap:7px 12px;flex-wrap:wrap;
  /* Genau der Platz, der neben dem Schalter frei ist: Block 495 minus Schalter
     208 minus Abstand 14 = 273. Breiter, und sie rutscht darunter; schmaler,
     und die zweite Zeile bricht. */
  width:273px;max-width:100%;padding:9px 14px;border-radius:var(--r-s);
  background:linear-gradient(180deg,rgba(255,138,31,.11),rgba(255,138,31,.035));
  border:1px solid rgba(255,138,31,.26);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 12px 26px -24px rgba(0,0,0,.9);
  font-size:12.5px;line-height:1.25
}
.spar-tafel dt{
  flex:0 0 100%;font-size:9.5px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--orange);margin:0 0 1px
}
.spar-tafel dd{display:flex;align-items:baseline;gap:6px;margin:0;white-space:nowrap}
.spar-tafel dd+dd::before{content:'·';color:var(--text-3);margin-right:6px}
.spar-tafel dd span{color:var(--text-2)}
.spar-tafel dd b{
  color:var(--text);font-weight:680;font-size:13.5px;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1
}

.stufe-an .stufe-preis{color:var(--teal)}
@media (max-width:420px){.stufe{grid-template-columns:26px 1fr}.stufe-preis{grid-row:auto;grid-column:2;text-align:left;margin-top:2px}}

/* Schalter und Ersparnis stehen NEBENEINANDER: die Karte zeigt, was der
   Schalter bewirkt, und Zusammengehoeriges gehoert nebeneinander (Proximity
   implies relationship). Beschriftung, Schalter und Karte brauchen zusammen
   556px, der Block ist aber nur 495px breit — also nimmt die Beschriftung die
   erste Zeile allein und die beiden Bedienteile ruecken darunter zusammen. */
.zahlweise{display:flex;align-items:center;gap:12px 14px;flex-wrap:wrap;margin-top:18px}
.zahlweise .klein{flex:0 0 100%;margin-bottom:-2px}
.zahlweise #segment{margin-top:0}

/* Die Ersparnis erscheint, wenn jaehrlich gewaehlt ist: sie gehoert zu dieser
   Wahl und beantwortet genau die Frage, die der Klick stellt.
   ABER sie belegt ihren Platz IMMER. Ein echtes Aufklappen (grid 0fr -> 1fr)
   aendert die Zeilenhoehe und schiebt alles darunter weg — auf einer Seite, auf
   der man zwischen zwei Zahlweisen hin und her vergleicht, wandert dann bei
   jedem Klick der halbe Block. Reservierter Platz kostet etwas Luft neben dem
   Schalter und ist jede Bewegung wert, die er verhindert.
   Die Karte materialisiert dabei (Massstab, Verschiebung und Deckkraft
   zusammen), statt bloss einzublenden. Kurve mit sanftem Auslauf, kein
   Ueberschwingen: hier kommt kein Schwung aus einer Geste, sondern ein
   Zustandswechsel. */
.spar-huelle .spar-tafel{
  opacity:0;transform:scale(.97) translateY(-4px);transform-origin:left center;
  pointer-events:none;
  transition:opacity 200ms ease-out,transform 340ms cubic-bezier(.25,.8,.35,1);
}
.zahlweise.zeigt-ersparnis .spar-huelle .spar-tafel{opacity:1;transform:none;pointer-events:auto}

@media (prefers-reduced-motion:reduce){
  /* Nur noch da oder nicht da, ohne Bewegung. */
  .spar-huelle .spar-tafel{transition:opacity 120ms linear;transform:none}
}


/* Segmentschalter: der Läufer wird von einer Feder bewegt, nicht von einer
   festen Laufzeit, deshalb lässt sich schnelles Hin und Her nicht abwürgen. */
.segment{
  position:relative;display:inline-flex;margin-top:26px;padding:4px;gap:2px;
  background:rgba(255,255,255,.06);border:1px solid var(--kante);border-radius:999px;
  max-width:100%;overflow:hidden;
}
.segment button{
  position:relative;z-index:2;padding:9px 16px;border-radius:999px;white-space:nowrap;
  font-size:13.5px;font-weight:600;color:var(--text-2);cursor:pointer;
  transition:color .2s ease-out;
}
.segment button[aria-selected="true"]{color:#04211F}
.segment-laeufer{
  position:absolute;top:4px;left:0;height:calc(100% - 8px);border-radius:999px;
  background:var(--teal);z-index:1;will-change:transform,width;
}
.segment .kurz{display:none}
/* Schmal: drei gleich breite Felder mit kurzen Wörtern, statt einer Leiste,
   die seitlich weggeschnitten wird. */
@media (max-width:560px){
  .segment{display:grid;grid-template-columns:repeat(3,1fr);width:100%}
  .segment button{padding:10px 4px;font-size:13px;text-align:center}
  .segment .lang{display:none}
  .segment .kurz{display:inline}
}

/* Schaubild statt Bildschirmfoto */
.produkt-bild{display:flex;justify-content:center;align-items:center}
/* Echtes Bildschirmfoto statt Schaubild (05.09.2026, Ticketsystem): ein 16:10-Bild
   ist deutlich flacher als die Textspalte daneben und stand sonst oben angeklebt. */
.produkt-bild img{width:100%;height:auto;border-radius:var(--r-l);border:1px solid var(--kante);box-shadow:0 30px 60px -40px #000}
.mock{
  width:100%;max-width:420px;border-radius:var(--r-l);overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.035));
  border:1px solid var(--kante-hell);box-shadow:0 30px 60px -34px #000,inset 0 1px 0 rgba(255,255,255,.18);
  font-size:13px;
}
.mock-leiste{display:flex;align-items:center;gap:6px;padding:11px 14px;background:rgba(0,0,0,.28);border-bottom:1px solid var(--kante)}
.mock-leiste i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.22)}
.mock-leiste span{margin-left:8px;font-size:11.5px;letter-spacing:.05em;color:var(--text-3)}
.mock-zeile{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;color:var(--text-2)}
.mock-kopf{border-bottom:1px solid var(--kante);color:var(--text)}
.mock-kopf b{font-size:14px;letter-spacing:-.01em}
.mock-block{padding:4px 0;border-bottom:1px solid var(--kante)}
.mock-block .mock-zeile{padding:8px 16px}
.mock-block b{color:var(--text);font-weight:620}
.mock-zeile b{white-space:nowrap}   /* Beträge brechen nicht zwischen Zahl und Zeichen um */
.mock-summe{border-top:1px solid var(--kante);margin-top:4px;padding-top:12px !important}
.mock-zahlung,.mock-beleg{border-top:1px solid var(--kante)}
.mock-klein{font-size:11.5px;color:var(--text-3);text-align:right;max-width:60%;line-height:1.4}
.chip{font-size:11px;font-weight:620;letter-spacing:.04em;padding:4px 9px;border-radius:999px;background:rgba(255,255,255,.09);color:var(--text-2);white-space:nowrap}
.chip-gruen{background:rgba(47,211,201,.18);color:var(--teal)}
.chip-teal{background:rgba(47,211,201,.18);color:var(--teal)}

/* Die beiden kleineren Programme */
.produkt-klein{padding:0;overflow:hidden;display:flex;flex-direction:column}
.produkt-klein img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top left;border-bottom:1px solid var(--kante)}
.produkt-klein-text{padding:24px}
.produkt-klein .karte-nr{margin-bottom:10px}

/* ============================================================
   7. Zahlen
   ============================================================ */
.zahlen{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:760px){.zahlen{grid-template-columns:1fr}}
.zahl{padding:36px 32px;border-radius:var(--r-xl);border:1px solid var(--kante);background:linear-gradient(150deg,rgba(255,255,255,.07),rgba(255,255,255,.02));box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.zahl .wert{font-size:clamp(40px,7vw,64px);font-weight:700;letter-spacing:-.04em;line-height:1}
.zahl.a .wert{color:var(--orange)}
.zahl.b .wert{color:var(--teal)}
.zahl p{margin:14px 0 0;color:var(--text-2);font-size:15.5px;max-width:38ch}

/* Bildband */
.band{position:relative;height:clamp(280px,42vw,420px);border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--kante)}
.band-bild{position:absolute;inset:-22% 0;will-change:transform}
.band-bild img{width:100%;height:100%;object-fit:cover;object-position:66% 50%}
.band-text{position:absolute;inset:auto 0 0 0;padding:clamp(24px,4vw,42px);background:linear-gradient(transparent,rgba(7,12,19,.86) 58%)}
.band-text p{margin:12px 0 0;color:var(--text-2);max-width:52ch}

/* ============================================================
   8. Fragen: Höhe federt, jederzeit umkehrbar
   ============================================================ */
.frage{border-bottom:1px solid var(--kante)}
.frage:first-child{border-top:1px solid var(--kante)}
.frage-kopf{
  width:100%;display:flex;align-items:center;gap:18px;padding:22px 4px;text-align:left;cursor:pointer;
  font-size:17.5px;font-weight:600;letter-spacing:-.012em;
  transition:color .16s ease-out;
}
.frage-kopf:hover{color:var(--teal)}
.frage-kopf .zeichen{
  margin-left:auto;flex:0 0 auto;width:26px;height:26px;border-radius:50%;
  background:var(--flaeche);border:1px solid var(--kante);display:grid;place-items:center;
  font-size:15px;color:var(--teal);will-change:transform;
}
.frage-blatt{overflow:hidden;height:0}
.frage-blatt p{margin:0;padding:0 60px 24px 4px;color:var(--text-2);font-size:16px;line-height:1.65}

/* ============================================================
   9. Blatt von unten (Sheet)
   ============================================================ */
.schleier{
  position:fixed;inset:0;z-index:70;background:rgba(4,8,13,.55);
  opacity:0;pointer-events:none;
  backdrop-filter:blur(0px);-webkit-backdrop-filter:blur(0px);
}
.schleier.an{pointer-events:auto}
.blatt{
  position:fixed;left:0;right:0;bottom:0;z-index:80;
  max-height:min(84vh,760px);
  border-radius:24px 24px 0 0;
  background:rgba(22,31,43,.86);
  backdrop-filter:blur(30px) saturate(180%);-webkit-backdrop-filter:blur(30px) saturate(180%);
  border-top:1px solid var(--kante-hell);
  box-shadow:0 -30px 80px -30px #000;
  transform:translate3d(0,100%,0);
  display:flex;flex-direction:column;
  touch-action:none;will-change:transform;
}
.blatt[hidden]{display:none}
@media (min-width:720px){.blatt{left:50%;right:auto;width:min(620px,92vw);transform:translate3d(-50%,100%,0);border-radius:26px 26px 0 0}}
/* Kopf ist die Ziehfläche, Inhalt scrollt: sonst frisst die Geste das Scrollen. */
.blatt-kopf{padding:12px 28px 14px;display:flex;flex-direction:column;align-items:center;gap:12px;cursor:grab;touch-action:none;flex:0 0 auto}
.blatt-kopf.zieht{cursor:grabbing}
.blatt-kopf .strich{width:40px;height:5px;border-radius:999px;background:rgba(255,255,255,.28);display:block}
.blatt-kopf .d3{margin:0;align-self:flex-start}
.blatt-inhalt{padding:4px 28px 24px;overflow:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y;flex:1 1 auto}
.blatt-inhalt p{color:var(--text-2);font-size:16px;line-height:1.66;margin:0}
.blatt-gruppe{margin:24px 0 10px;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--teal)}
.blatt-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.blatt-liste li{position:relative;padding-left:22px;color:var(--text-2);font-size:15.5px;line-height:1.55}
.blatt-liste li::before{content:"";position:absolute;left:2px;top:9px;width:6px;height:6px;border-radius:50%;background:var(--teal)}
.blatt-fuss{
  flex:0 0 auto;padding:14px 28px calc(20px + env(safe-area-inset-bottom));
  border-top:1px solid var(--kante);background:rgba(255,255,255,.03);
}
.blatt-fuss .knopf{width:100%}
/* Hintergrund tritt zurück, während das Blatt oben liegt. */
#seite{will-change:transform;transform-origin:50% 0}

/* ============================================================
   10. Abschluss und Fuß
   ============================================================ */
/* overflow:clip statt hidden: beides beschneidet den Verlauf an der gerundeten
   Ecke, aber `hidden` macht den Kasten zum Scroll-Container und damit jedes
   sticky darin wirkungslos. Die Kontaktkarte klebte deshalb nicht (05.09.2026). */
.abschluss{
  position:relative;overflow:clip;border-radius:var(--r-xl);
  padding:clamp(38px,6vw,72px);border:1px solid var(--kante);
  background:linear-gradient(150deg,rgba(47,211,201,.14),rgba(255,138,31,.07) 60%,rgba(255,255,255,.02));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
}
.abschluss .d2{max-width:18ch}
.abschluss-raster{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,4vw,56px)}
@media (max-width:880px){.abschluss-raster{grid-template-columns:minmax(0,1fr)}}

/* Formular */
#kontaktForm{margin-top:26px;position:relative}
.feldpaar{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:560px){.feldpaar{grid-template-columns:1fr}}
.feld{display:block;margin-bottom:14px}
.feld > span{display:block;font-size:var(--dc-text-winzig);font-weight:600;letter-spacing:0;color:var(--dc-text-86);margin-bottom:8px}
.feld input,.feld select,.feld textarea{
  width:100%;font:inherit;font-size:var(--dc-text-basis);color:var(--dc-text-voll);
  background:rgba(232,240,243,.05);border:1px solid var(--dc-kante-12);border-radius:var(--dc-r-feld);
  padding:14px 16px;outline:none;
  transition:border-color .16s ease-out,background .16s ease-out,box-shadow .16s ease-out;
}
.feld textarea{resize:vertical;min-height:110px;line-height:1.55}
.feld input::placeholder,.feld textarea::placeholder{color:var(--dc-text-45)}
.feld input:hover,.feld select:hover,.feld textarea:hover{background:rgba(232,240,243,.075)}
.feld input:focus,.feld select:focus,.feld textarea:focus{
  border-color:var(--dc-cyan);background:rgba(232,240,243,.08);box-shadow:0 0 0 3px var(--dc-cyan-16);
}
.feld select{appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--text-2) 50%),linear-gradient(135deg,var(--text-2) 50%,transparent 50%);
  background-position:calc(100% - 20px) 22px,calc(100% - 14px) 22px;background-size:6px 6px,6px 6px;background-repeat:no-repeat;
}
.feld select option{background:#141C27;color:var(--text)}
.fehler{display:block;font-style:normal;font-size:12.5px;color:#FFB169;margin-top:6px;min-height:0;opacity:0;
  transform:translateY(-3px);transition:opacity .18s ease-out,transform .18s ease-out}
.feld.hat-fehler input,.feld.hat-fehler textarea,.feld.hat-fehler select{border-color:rgba(255,138,31,.7)}
.feld.hat-fehler .fehler,.fehler.an{opacity:1;transform:none}
.haken-zeile{display:flex;gap:12px;align-items:flex-start;font-size:13.5px;line-height:1.55;color:var(--text-2);margin-top:4px;cursor:pointer}
.haken-zeile input{margin-top:2px;width:18px;height:18px;accent-color:var(--teal);flex:0 0 auto}
.haken-zeile a{color:var(--teal)}
.form-stand{margin:14px 0 0;font-size:14.5px;min-height:1.2em}
.form-stand.gut{color:var(--teal)}
.form-stand.schlecht{color:#FFB169}

/* Kontaktangaben daneben */
/* Die Karte laeuft beim Scrollen mit, solange das Formular daneben noch im Bild
   ist (Wunsch 05.09.2026): wer unten im Formular tippt, hat Telefonnummer und
   Adresse weiterhin vor Augen. Der Abstand nach oben ist die schwebende
   Navigationsleiste plus Luft. Einspaltig (unter 880 px) steht sie wieder
   still: dort liegt sie UNTER dem Formular, ein klebender Block wuerde beim
   Hochscrollen ueber dem Text stehen bleiben. */
.kontaktkarte{
  display:flex;flex-direction:column;gap:26px;align-self:start;
  position:sticky;top:calc(var(--nav-h) + 20px);
  padding:28px;border-radius:var(--r-l);
  background:rgba(255,255,255,.05);border:1px solid var(--kante);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
/* Muss NACH .kontaktkarte stehen: bei gleicher Spezifitaet gewinnt die spaetere
   Regel, weiter oben im Stylesheet blieb das sticky auf dem Telefon stehen. */
@media (max-width:880px){.kontaktkarte{position:static}}
.kontaktkarte .karte-nr{margin-bottom:8px}
.kontaktkarte .tel{display:inline-block;font-size:clamp(22px,2.6vw,27px);font-weight:700;letter-spacing:-.02em;color:var(--teal)}
.kontaktkarte .mail{font-size:17px;font-weight:600;color:var(--text)}
.kontaktzeile{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.fuss{padding:44px 0 70px;color:var(--text-3);font-size:14px;border-top:1px solid var(--kante);margin-top:60px}
.fuss a{color:var(--text-2)}
.hinweis{
  margin-top:22px;padding:20px 22px;border-radius:var(--r-m);
  border:1px dashed rgba(47,211,201,.35);background:rgba(47,211,201,.05);color:var(--text-2);font-size:14.5px;line-height:1.6;
}
.hinweis b{color:var(--text)}
.hinweis ul{margin:10px 0 0;padding-left:20px}
.hinweis li{margin:4px 0}

/* ============================================================
   11. Einblenden beim Scrollen (Weg hin und zurück gespiegelt)
   ============================================================ */
.rv{opacity:0;transform:translate3d(0,20px,0);transition:opacity .55s cubic-bezier(.22,.61,.36,1),transform .62s cubic-bezier(.22,.61,.36,1)}
.rv.da{opacity:1;transform:none}

/* ============================================================
   12. Systemeinstellungen des Besuchers achten
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.12s !important}
  .rv{transform:none}
  .karte:hover{transform:none}
  .punkt{animation:none}
}
@media (prefers-reduced-transparency:reduce){
  .nav::before{background:#0B121B;backdrop-filter:none;-webkit-backdrop-filter:none;-webkit-mask-image:none;mask-image:none}
  .nav{border-bottom:1px solid var(--kante)}
  .menue{background:#101823;backdrop-filter:none;-webkit-backdrop-filter:none}
  .blatt{background:#161F2B;backdrop-filter:none;-webkit-backdrop-filter:none}
  .knopf-glas,.fakt{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(255,255,255,.10)}
  .schleier{backdrop-filter:none !important;-webkit-backdrop-filter:none !important}
}
@media (prefers-contrast:more){
  :root{--text-2:#C8D6E4;--text-3:#A6B6C7;--kante:rgba(255,255,255,.34);--kante-hell:rgba(255,255,255,.5)}
  .karte,.preiskarte,.zahl,.rechner,.abschluss{background:#131C27}
  .nav::before{background:#0B121B}
}

/* ============================================================
   13. Bausteine der Unterseiten
   ============================================================
   Alles hier ist für mehrere Seiten gedacht. Wer eine neue Seite baut, nimmt
   diese Klassen und erfindet keine eigenen: sonst driften zwanzig Seiten
   auseinander. Bauplan mit Beispielen: docs/ap-bauplan.md
   ============================================================ */

/* ---- Navigation: Aufklappmenü, aktiver Punkt, Menü auf schmalen Schirmen ---- */
.nav-links a,.nav-knopf{font-size:14.5px;font-weight:450;color:rgba(240,245,250,.84);transition:color .16s ease-out}
.nav-links a:hover,.nav-knopf:hover{color:var(--text)}
.nav-links .an,.nav-knopf.an{color:var(--teal)}
.nav-rechts{display:flex;align-items:center;gap:22px}
/* Rechts wie im Vorbild der Startseite (12.09.2026): ein leiser Textlink zum
   Kundenportal und ein dunkler, fast eckiger Knopf statt der türkisen Pille. */
.nav-anmelden{font-size:14.5px;font-weight:450;color:rgba(240,245,250,.84);transition:color .16s ease-out}
.nav-anmelden:hover{color:var(--text)}
.knopf-nav{background:var(--dc-bg);color:#FFFFFF;border:1px solid var(--dc-kante-12);border-radius:var(--dc-r-knopf-klein);padding:13px 18px;font-size:var(--dc-text-klein);font-weight:600}
.knopf-nav:hover{background:#12222A;color:#FFFFFF}
@media (max-width:720px){
  .nav-anmelden{display:none}
  /* Der Knopf bleibt auch auf der Startseite oben stehen. Vorher war er dort
     ausgeblendet, weil die Bühne ihn schon trägt; hinter der Bühne gab es
     dann auf rund 12.000 px keinen Weg zur Erstberatung (Prüfung 29.09.2026). */
}

.nav-punkt{position:relative}
.nav-knopf{display:inline-flex;align-items:center;gap:7px;cursor:pointer;padding:6px 0;white-space:nowrap}
.nav-knopf .pfeil{width:6px;height:6px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:translateY(-2px) rotate(45deg);transition:transform .22s cubic-bezier(.25,.8,.35,1)}
.nav-punkt.offen .pfeil{transform:translateY(1px) rotate(-135deg)}

/* Das Menü wächst aus seinem Knopf heraus, nicht aus der Mitte des Fensters:
   die räumliche Beziehung zwischen Auslöser und Inhalt bleibt sichtbar. */
.menue{
  position:absolute;top:calc(100% + 13px);left:-14px;min-width:296px;padding:8px;
  border-radius:20px;background:rgba(14,21,31,.88);
  backdrop-filter:blur(26px) saturate(180%);-webkit-backdrop-filter:blur(26px) saturate(180%);
  border:1px solid var(--kante-hell);
  box-shadow:0 34px 64px -30px #000,inset 0 1px 0 rgba(255,255,255,.14);
  opacity:0;transform:scale(.965) translateY(-6px);transform-origin:26px -8px;pointer-events:none;
  transition:opacity .16s ease-out,transform .24s cubic-bezier(.25,.8,.35,1);
}
.nav-punkt.offen .menue{opacity:1;transform:none;pointer-events:auto}
.menue a{display:block;padding:10px 12px;border-radius:13px;color:var(--text)}
.menue a:hover,.menue a:focus-visible{background:rgba(255,255,255,.07)}
.menue b{display:block;font-size:14.5px;font-weight:620;letter-spacing:-.01em}
.menue span{display:block;margin-top:2px;font-size:12.5px;line-height:1.35;color:var(--text-3)}
.menue-alle{border-bottom:1px solid var(--kante);border-radius:13px 13px 0 0;margin-bottom:4px;padding-bottom:12px}
.menue-alle b{color:var(--teal)}

.burger{display:none;width:42px;height:42px;border-radius:12px;border:0;background:none;
  flex-direction:column;justify-content:center;align-items:center;gap:5px;cursor:pointer}
.burger span{display:block;width:17px;height:1.5px;background:var(--text);border-radius:2px;transition:transform .22s cubic-bezier(.25,.8,.35,1),opacity .18s ease-out}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

@media (max-width:1180px){
  .burger{display:flex}
  .nav-links{
    position:fixed;top:var(--nav-h);left:0;right:0;max-height:calc(100vh - var(--nav-h));overflow-y:auto;
    display:flex;flex-direction:column;align-items:stretch;gap:0;padding:8px 18px 24px;
    background:rgba(11,18,27,.94);backdrop-filter:blur(26px) saturate(180%);-webkit-backdrop-filter:blur(26px) saturate(180%);
    border-bottom:1px solid var(--kante);
    transform:translateY(-14px);opacity:0;pointer-events:none;visibility:hidden;
    transition:opacity .2s ease-out,transform .26s cubic-bezier(.25,.8,.35,1);
  }
  /* Versteckt auch die Untermenüs: deren pointer-events:auto darf im
     geschlossenen Zustand keine Berührungen auf dem Seiteninhalt abfangen. */
  .nav-links.offen{transform:none;opacity:1;pointer-events:auto;visibility:visible}
  /* Schmal wird nichts aufgeklappt: alles steht offen da, das erspart eine
     zweite Ebene Bedienung auf dem kleinsten Schirm. */
  .nav-eintrag{padding:15px 6px;font-size:16.5px;border-bottom:1px solid var(--kante)}
  .nav-punkt{border-bottom:1px solid var(--kante);padding:6px 0 12px}
  .nav-knopf{width:100%;padding:12px 6px;font-size:12px;font-weight:700;letter-spacing:.09em;
    text-transform:uppercase;color:var(--text-3);pointer-events:none}
  .nav-knopf .pfeil{display:none}
  .menue{position:static;opacity:1;transform:none;pointer-events:auto;min-width:0;padding:0;
    background:none;backdrop-filter:none;-webkit-backdrop-filter:none;border:0;box-shadow:none}
  .menue a{padding:11px 6px}
  .menue-alle{border-bottom:0;margin-bottom:0}
  .nav-links .nav-mobil{display:flex;flex-direction:column;gap:10px;padding:18px 0 4px}
}
/* Die Wege zu uns stehen nur im aufgeklappten Menü. Farben je Variante mit
   eigener, spezifischerer Regel: das allgemeine .nav-links a färbt sonst
   auch die Knöpfe um. */
.nav-mobil{display:none}
.nav-links .nav-mobil .knopf{width:100%;font-size:var(--dc-text-basis)}
.nav-links .nav-mobil .knopf-voll,.nav-links .nav-mobil .knopf-voll:hover{color:#07161C}
.nav-links .nav-mobil .knopf-glas,.nav-links .nav-mobil .knopf-glas:hover{color:var(--dc-text-voll)}
.nav-links .nav-mobil-anmelden{align-self:center;padding:10px 6px;color:var(--dc-text-nav)}

/* ---- Bühne der Unterseiten: flacher als auf der Startseite ---- */
/* Kopfabstand ist Pflicht: die Leiste schwebt über dem Inhalt, ohne Reserve
   rutschen Brotkrumen und Augenbraue darunter und schimmern als blauer Schleier
   durch das Glas. Das Hintergrundbild darf weiter bis unter die Leiste laufen. */
.buehne-klein{position:relative;min-height:min(58vh,520px);display:flex;align-items:flex-end;overflow:hidden;
  padding-top:calc(var(--nav-h) + 18px)}
.buehne-klein .buehne-inhalt{padding-bottom:clamp(34px,5vw,58px)}
.buehne{padding-top:var(--nav-h)}
.buehne .buehne-bild{top:calc(-1 * var(--nav-h) - 8%)}
.buehne-klein .d1{max-width:20ch}
.buehne-klein .lead{max-width:56ch;margin-top:18px;color:#C8D6E4}
.buehne-ohne-bild{padding:calc(var(--nav-h) + clamp(48px,7vw,92px)) 0 0}

/* ---- Bühne als Karte (Startseite, seit 11.09.2026) ----
   Vorbild vom Inhaber als Bildschirmfoto vorgegeben: das Bild als abgerundete
   Karte mit Rand zur Seite, darin eine kleine Zeile, eine große dünne
   Überschrift, ein weißer Knopf mit Randnotiz und unten ein dunkles Band.
   Wo das Vorbild Kundenlogos und Sterne zeigt, stehen bei uns die belegbaren
   Eckdaten: erfundene Referenzen oder Bewertungen sind verboten (§ 5 UWG).
   Die Regeln stehen hinter .buehne .buehne-bild, sonst gewänne die gleich
   spezifische Regel darüber. */
/* Rand 0 seit 12.09.2026 (Inhaber: bis zum Rand, nur oben abgerundet). Die
   Variable bleibt, Leiste und Höhe rechnen weiter mit ihr. */
:root{--karte-rand:0px;--karte-innen:clamp(22px,5vw,76px)}
.buehne-karte{
  margin:var(--karte-rand) var(--karte-rand) 0;
  border-radius:clamp(20px,2vw,28px) clamp(20px,2vw,28px) 0 0;
  min-height:max(620px,calc(100svh - var(--band-h,0px) - 2 * var(--karte-rand)));
  flex-direction:column;align-items:stretch;
  background:var(--bg-tief);isolation:isolate;
}
.buehne-karte .buehne-bild{top:-8%}
/* Das Bild steckt jetzt in einem <picture>: ohne eigene Höhe fiele das <img>
   auf seine Eigenhöhe zurück und die Bühne bliebe halb leer. */
.buehne-bild picture{display:block;width:100%;height:100%}
/* Die Kennzeichnung sitzt oben rechts, nicht unten: unten liegt das Band mit den
   Kundenlogos, dort ginge sie unter. Sie ist Pflicht und darf nicht verschwinden. */
.buehne-ki{top:calc(var(--nav-h) + 16px);right:18px;bottom:auto;z-index:4}
/* Bildausschnitt: das Gesicht sitzt rechts der Mitte, deshalb nicht mittig
   beschneiden. Schmal noch etwas weiter nach rechts, sonst bleibt nur Schulter. */
.buehne-karte .buehne-bild img{object-position:66% 32%}
@media (max-width:720px){.buehne-karte .buehne-bild img{object-position:62% 26%}}
.buehne-karte .buehne-schleier{
  background:
    linear-gradient(90deg,rgba(7,12,19,.80) 0,rgba(7,12,19,.50) 42%,rgba(7,12,19,.16) 76%),
    linear-gradient(180deg,rgba(7,12,19,.55) 0,rgba(7,12,19,.10) 26%,rgba(7,12,19,.24) 60%,rgba(7,12,19,.84) 100%);
}
.buehne-karte .buehne-inhalt{flex:1;display:flex;align-items:center;padding:clamp(28px,6vh,72px) var(--karte-innen)}
.buehne-karte .buehne-inhalt .huelle{max-width:none;margin:0;padding:0}
.buehne-augenbraue{margin:0 0 20px;font-size:12.5px;line-height:1.4;color:rgba(240,245,250,.8)}
/* Dünn und groß wie im Vorbild. Zeilenabstand bleibt bei 1.14 (siehe .d1). */
.buehne-karte .d1{max-width:none;font-size:clamp(40px,6.4vw,88px);font-weight:300;letter-spacing:-.042em;color:#fff;text-wrap:balance}
.buehne-karte .lead{max-width:40ch;margin-top:28px;font-size:clamp(16px,1.3vw,17.5px);line-height:1.52;color:rgba(240,245,250,.88)}
.buehne-karte .buehne-tasten{align-items:center;gap:14px 20px;margin-top:40px}
.knopf-weiss{background:#FFFFFF;color:var(--dc-bg);border-radius:var(--dc-r-knopf);padding:16px 26px;font-size:var(--dc-text-basis);font-weight:700}
.knopf-weiss:hover{background:#E4ECF4;color:var(--dc-bg)}
.knopf-weiss::after{content:"›";font-size:19px;line-height:1;margin-top:-2px;transition:transform .16s ease-out}
.knopf-weiss:hover::after{transform:translateX(3px)}
.buehne-notiz{font-size:13px;color:rgba(240,245,250,.62)}

.buehne-fuss{position:relative;z-index:2}
.buehne-fuss-kopf{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px;padding:0 var(--karte-innen) 16px}
.buehne-fuss-titel{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(240,245,250,.8)}
.buehne-standort{display:inline-flex;align-items:center;gap:9px;font-size:13px;color:rgba(240,245,250,.8)}
.buehne-fuss-rechts{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 18px}
/* Sterne anteilig zur echten Note gefüllt: 4,6 zeigt keine fünf vollen Sterne. */
.buehne-bewertung{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:rgba(240,245,250,.8)}
.buehne-bewertung b{font-weight:600;color:#fff}
.buehne-bewertung:hover span:last-child{text-decoration:underline;text-underline-offset:3px}
.sterne{position:relative;display:inline-block;font-size:14px;letter-spacing:2px;line-height:1;color:rgba(255,255,255,.22)}
.sterne::before{content:"★★★★★";position:absolute;inset:0 auto 0 0;width:var(--anteil,0%);overflow:hidden;white-space:nowrap;color:var(--orange)}
.buehne-leiste{
  display:flex;align-items:center;gap:clamp(20px,3vw,48px);padding:18px var(--karte-innen);
  background:rgba(244,247,250,.96);border-top:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
/* Helle Leiste seit 12.09.2026: die fünf Kundenlogos vertragen kein flächiges
   Weiß. Hinderlich ist eine feine Strichzeichnung, Camp & Event hat weiße
   Flächen (Bus, Zelt), die beim Umkehren schwarz würden. Auf Hell bleibt jedes
   Logo so, wie sein Inhaber es kennt. Gleiches Feld je Logo, sonst springen die
   Größen: die Dateien sind unterschiedlich beschnitten. */
.buehne-leiste .knopf-rahmen{border-color:rgba(11,18,27,.28);color:#0B121B}
.buehne-leiste .knopf-rahmen:hover{background:rgba(11,18,27,.06);color:#0B121B}
.buehne-logos{display:flex;flex:1;align-items:center;justify-content:space-between;gap:clamp(22px,3vw,52px);min-width:0}
.buehne-logos a{display:flex;align-items:center;flex:0 0 auto}
/* Volle Entsättigung bei geringer Deckkraft ließ die feine Strichzeichnung von
   Hinderlich fast verschwinden: deshalb kräftiger und mit etwas mehr Kontrast. */
.buehne-logos img{width:clamp(88px,9vw,128px);height:38px;object-fit:contain;
  filter:grayscale(1) contrast(1.25);opacity:.82;transition:opacity .2s ease-out,filter .2s ease-out}
.buehne-logos a:hover img{filter:none;opacity:1}
/* Die Eckdaten stehen jetzt leise unter dem Knopf, damit das Band den Kunden
   gehört (12.09.2026). */
.buehne-fakten{margin:26px 0 0;font-size:13px;line-height:1.6;color:rgba(240,245,250,.62)}
.knopf-rahmen{border:1px solid var(--dc-kante-35);border-radius:var(--dc-r-knopf);padding:11px 22px;font-size:var(--dc-text-klein);font-weight:600;color:var(--dc-text);white-space:nowrap}
.knopf-rahmen:hover{background:var(--dc-flaeche);color:var(--dc-text-voll)}

/* Die Leiste steht auf der Startseite oben durchsichtig in der Karte und fluchtet
   mit deren Inhalt; beim Scrollen rückt sie an den Rand und bekommt ihr Glas. */
body:has(.buehne-karte) .nav{
  top:calc(var(--band-h,0px) + var(--karte-rand) * (1 - var(--navP)));
  padding:0 calc(var(--karte-rand) + var(--karte-innen));
}
body:has(.buehne-karte) .nav::before{
  background:rgba(11,18,27,calc(.84 * var(--navP)));
  backdrop-filter:blur(calc(26px * var(--navP))) saturate(180%);
  -webkit-backdrop-filter:blur(calc(26px * var(--navP))) saturate(180%);
}
@media (max-width:1180px){
  body:has(.buehne-karte) .nav-links{top:calc(var(--band-h,0px) + var(--nav-h) + var(--karte-rand) * (1 - var(--navP)))}
}
@media (max-width:720px){
  .buehne-karte .buehne-schleier{background:linear-gradient(180deg,rgba(7,12,19,.64) 0,rgba(7,12,19,.50) 45%,rgba(7,12,19,.88) 100%)}
  .buehne-karte .buehne-inhalt{align-items:flex-start;padding-top:clamp(24px,7vh,64px)}
  .buehne-fuss-kopf{flex-direction:column;align-items:center;text-align:center;gap:8px}
  .buehne-leiste{flex-direction:column;align-items:stretch;gap:16px;padding:16px var(--karte-innen) 18px}
  /* Schmal laufen die Eckdaten seitlich weiter, wie die Logos im Vorbild. */
  /* scroll-padding ist Pflicht: ohne rastet der Schnapp den ersten Wert an die
     Kante des Scrollbereichs statt an die Inhaltskante. */
  .buehne-logos{justify-content:flex-start;gap:34px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
    margin:0 calc(-1 * var(--karte-innen));padding:0 var(--karte-innen);scroll-padding-inline:var(--karte-innen);
    -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);
            mask-image:linear-gradient(90deg,#000 88%,transparent)}
  .buehne-logos::-webkit-scrollbar{display:none}
  .buehne-logos a{scroll-snap-align:start}
  .knopf-rahmen{width:100%}
}

/* ---- Brotkrumen ---- */
.brotkrumen{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;color:var(--text-3);margin-bottom:18px}
.brotkrumen a{color:var(--text-2)}
.brotkrumen a:hover{color:var(--teal)}
.brotkrumen span[aria-current]{color:var(--text-3)}

/* ---- Fließtext (Ratgeber, Recht, lange Erklärungen) ---- */
.prosa{max-width:68ch;font-size:17px;line-height:1.68;color:var(--text-2)}
.prosa > * + *{margin-top:18px}
.prosa h2{margin:44px 0 0;font-size:clamp(23px,3vw,30px);line-height:1.16;letter-spacing:-.022em;font-weight:700;color:var(--text)}
.prosa h3{margin:32px 0 0;font-size:19.5px;line-height:1.3;letter-spacing:-.014em;font-weight:660;color:var(--text)}
.prosa h2 + p,.prosa h3 + p{margin-top:12px}
.prosa strong,.prosa b{color:var(--text);font-weight:640}
.prosa a{color:var(--teal);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(47,211,201,.4)}
.prosa a:hover{text-decoration-color:var(--teal)}
.prosa ul,.prosa ol{padding-left:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.prosa ul li{position:relative;padding-left:24px}
.prosa ul li::before{content:"";position:absolute;left:4px;top:11px;width:6px;height:6px;border-radius:50%;background:var(--teal)}
.prosa ol{counter-reset:pos}
.prosa ol li{position:relative;padding-left:34px;counter-increment:pos}
.prosa ol li::before{content:counter(pos);position:absolute;left:0;top:1px;width:22px;height:22px;border-radius:50%;
  background:rgba(47,211,201,.16);color:var(--teal);font-size:12px;font-weight:700;display:grid;place-items:center}
.prosa blockquote{margin:26px 0;padding:18px 22px;border-left:2px solid var(--teal);
  background:rgba(47,211,201,.06);border-radius:0 var(--r-m) var(--r-m) 0;color:var(--text);font-size:17.5px;line-height:1.6}
.prosa figure{margin:28px 0}
.prosa figure img{width:100%;border-radius:var(--r-l);border:1px solid var(--kante)}
.prosa figcaption{margin-top:10px;font-size:13.5px;color:var(--text-3)}

/* Artikel-Gerüst: Inhaltsverzeichnis bleibt neben dem Text stehen */
.artikel{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:clamp(28px,4vw,56px);align-items:start}
@media (max-width:960px){.artikel{grid-template-columns:minmax(0,1fr)}}
.artikel-neben{position:sticky;top:calc(var(--nav-h) + 24px);display:flex;flex-direction:column;gap:18px}
@media (max-width:960px){.artikel-neben{position:static}}
.tocbox{padding:20px;border-radius:var(--r-l);background:var(--flaeche);border:1px solid var(--kante)}
.tocbox .fuss-kopf{margin-bottom:12px}
.tocbox a{display:block;padding:7px 0;font-size:14px;color:var(--text-2);border-bottom:1px solid var(--kante)}
.tocbox a:last-child{border-bottom:0}
.tocbox a:hover{color:var(--teal)}
.artikel-meta{display:flex;flex-wrap:wrap;gap:14px;font-size:13.5px;color:var(--text-3);margin-top:14px}

/* ---- Tabellen (Kostenvergleich) ---- */
.tabelle-rahmen{overflow-x:auto;border-radius:var(--r-l);border:1px solid var(--kante);background:var(--flaeche)}
.tabelle{width:100%;border-collapse:collapse;font-size:15px;min-width:520px}
.tabelle th,.tabelle td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--kante)}
.tabelle thead th{font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);
  background:rgba(255,255,255,.04);white-space:nowrap}
.tabelle tbody tr:last-child td{border-bottom:0}
.tabelle td.zahl,.tabelle th.zahl{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.tabelle .hebt{color:var(--teal);font-weight:640}
.tabelle .summe td{background:rgba(47,211,201,.08);font-weight:700;color:var(--text)}

/* ---- Hinweiskästen ---- */
.info,.warnung{padding:20px 22px;border-radius:var(--r-l);font-size:15.5px;line-height:1.6;color:var(--text-2)}
.info{background:rgba(47,211,201,.07);border:1px solid rgba(47,211,201,.28)}
.warnung{background:rgba(255,138,31,.07);border:1px solid rgba(255,138,31,.3)}
.info b,.warnung b{color:var(--text)}

/* ---- Text neben Bild ---- */
.zwei{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,52px);align-items:center}
.zwei.schmal-bild{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
@media (max-width:860px){.zwei,.zwei.schmal-bild{grid-template-columns:minmax(0,1fr)}}
.bildkarte{position:relative;border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--kante);box-shadow:0 30px 60px -40px #000}
.bildkarte img,.bildkarte video{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:16/10}
.bildkarte .bild-text{position:absolute;inset:auto 0 0 0;padding:22px 24px;background:linear-gradient(transparent,rgba(7,12,19,.9) 62%)}
.bildkarte .bild-text p{margin:8px 0 0;color:var(--text-2);font-size:14.5px;line-height:1.5}

/* ---- Ablauf in Schritten ---- */
.schritte{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:16px;counter-reset:schritt}
.schritt{position:relative;padding:26px 24px;border-radius:var(--r-l);background:var(--flaeche);border:1px solid var(--kante);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);counter-increment:schritt}
.schritt::before{content:counter(schritt);display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:rgba(47,211,201,.16);color:var(--teal);font-size:14px;font-weight:700;margin-bottom:14px}
.schritt h3{margin:0 0 8px;font-size:18px;font-weight:640;letter-spacing:-.014em}
.schritt p{margin:0;color:var(--text-2);font-size:15px;line-height:1.55}

/* ---- Merkmale mit Haken ---- */
.merkmale{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr));gap:16px 30px}
.merkmale li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:2px 12px;align-items:start;
  font-size:15.5px;line-height:1.45;color:var(--text-2)}
.merkmale li .haken{grid-row:span 2;margin-top:2px}
.merkmale li b{color:var(--text);font-weight:620}
/* Zweizeilige Fassung: Name oben, Erklärung darunter. Der Umbruch sieht dann
   gewollt aus, statt dass jeder Eintrag zufällig irgendwo umbricht. */
.merkmale li em{display:block;font-style:normal;font-size:13.5px;line-height:1.4;color:var(--text-3)}

/* ---- Referenzen ---- */
.logo-band{background:#F1F5F8;border-radius:var(--r-l);padding:26px 30px;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:26px;align-items:center}
.logo-band img{max-height:44px;max-width:100%;width:auto;object-fit:contain;margin:0 auto;
  filter:grayscale(1);opacity:.72;transition:filter .2s ease-out,opacity .2s ease-out}
.logo-band a:hover img{filter:none;opacity:1}
.zitat{padding:30px 32px;border-radius:var(--r-xl);background:linear-gradient(160deg,rgba(47,211,201,.10),rgba(255,255,255,.03));
  border:1px solid var(--kante);box-shadow:inset 0 1px 0 rgba(255,255,255,.13)}
.zitat p{margin:0;font-size:19px;line-height:1.55;letter-spacing:-.012em;color:var(--text)}
.zitat footer{margin-top:18px;font-size:14px;color:var(--text-3)}
.zitat footer b{display:block;color:var(--text-2);font-weight:620;font-size:15px}

/* ---- Person (Über uns) ---- */
.person{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:clamp(22px,3vw,40px);align-items:center}
@media (max-width:620px){.person{grid-template-columns:minmax(0,1fr)}}
.person img{width:100%;border-radius:var(--r-xl);border:1px solid var(--kante)}

/* ---- Abschlussband der Unterseiten ---- */
.cta-band{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(20px,3vw,40px);align-items:center;
  padding:clamp(26px,4vw,40px);border-radius:var(--r-xl);border:1px solid var(--kante);
  background:linear-gradient(150deg,rgba(47,211,201,.13),rgba(255,255,255,.02));box-shadow:inset 0 1px 0 rgba(255,255,255,.13)}
@media (max-width:760px){.cta-band{grid-template-columns:minmax(0,1fr)}}
.cta-band .knopf-reihe{display:flex;flex-wrap:wrap;gap:12px}

/* ---- Seitenfuß ----
   Alle Regeln des Fußes stehen im Abschnitt „Sektion: fuss“ weiter unten.
   Hier bleibt nur .fuss-kopf: Ratgeber (.tocbox), AGB und Datenschutz
   nutzen die Klasse außerhalb des Fußes. */
.fuss-kopf{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--text-3);margin-bottom:4px}

/* ── Fenster: Bild oder Video mit Titelzeile ─────────────────────────────────
   Uebernommen aus der Live-Fassung (.rd-fenster in rd-seiten.css), 05.09.2026
   fuer /vorschau/ueber-uns. Die Titelzeile traegt eine echte Angabe, etwa den
   Ort. Keine erfundene Technik-Deko: was aussieht wie ein Messwert, muss einer
   sein.

   Kein Schlussbild wie in der Live-Fassung: ap.js laesst das Video von sich aus
   im letzten Bild stehen, eine zweite Ebene braucht es dafuer nicht. */
.fenster{border:1px solid var(--kante);border-radius:var(--r-l);overflow:hidden;background:var(--flaeche)}
.fenster-kopf{display:flex;align-items:center;gap:10px;padding:9px 14px;background:var(--bg-tief);
  border-bottom:1px solid var(--kante);font-size:10.5px;font-weight:620;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-3)}
.fenster-kopf .punkt{flex:none;width:7px;height:7px;border-radius:50%;background:var(--teal);
  box-shadow:0 0 8px rgba(47,211,201,.8)}
/* Schwarzer Grund: waehrend das Video laedt steht hier das poster-Bild, ein
   schwarzer Rand faellt an einem Schirm weniger auf als ein blauer. */
.fenster-schirm{position:relative;background:#000}
.fenster video,.fenster img{width:100%;height:auto;display:block;aspect-ratio:16/9;object-fit:cover}
/* Schlussbild als eigene Ebene über dem Video, übernommen aus der Live-Fassung
   (.rd-fenster-schluss). Es ist der RUHEZUSTAND: sichtbar, solange nichts läuft,
   blendet beim Anspielen weich weg und am Ende wieder ein. Ohne diese Ebene
   steht der Clip auf einem beliebigen letzten Videobild und der Wechsel vom
   Standbild zum Anfang wirkt wie ein Sprung (gemeldet 05.09.2026). */
.fenster-schluss{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.4s ease-in-out}
.fenster-schluss.da{opacity:1}
@media (prefers-reduced-motion: reduce){.fenster-schluss{transition:none}}
/* KI-Kennzeichnung, unten rechts IM Bild. Bilder und Videos, die eine echte
   Person zeigen und maschinell erzeugt wurden, sind nach Art. 50 Abs. 4
   KI-Verordnung offenzulegen. Nie ausblenden, nie so verkleinern, dass sie
   verschwindet, nie durch ein Symbol ersetzen: das ist eine Pflichtangabe,
   keine Verzierung. Kein Kasten, dafuer Schatten, damit sie auch auf hellen
   Motiven lesbar bleibt. */
.fenster-ki{position:absolute;right:11px;bottom:9px;z-index:2;font-size:9.5px;font-weight:620;
  letter-spacing:.1em;text-transform:uppercase;color:rgba(240,245,250,.66);white-space:nowrap;
  text-shadow:0 1px 3px rgba(0,0,0,.92),0 0 10px rgba(0,0,0,.65);pointer-events:none}

/* Module im Rechner: Haken unter dem Regler, der Aufpreis landet im Betrag
   daneben (05.09.2026). Abgesetzt durch eine Linie, damit klar ist, dass hier
   etwas anderes gewaehlt wird als die Zahl darueber. */
.module{margin-top:22px;padding-top:18px;border-top:1px solid var(--kante)}
.module > .klein{display:block;margin-bottom:8px;color:var(--text-3)}
.module .haken-zeile{margin-top:10px}
.module .haken-zeile .klein{color:var(--text-3)}
.modul-preis{color:var(--teal);font-weight:620;margin-left:6px;white-space:nowrap}
.empf-aufschluss{margin:0 0 10px;font-size:13.5px;color:var(--text-3)}
.empf-aufschluss[hidden]{display:none}

/* Preiskarten in einer Reihe fluchten lassen: ohne das rutschen Liste und Knopf
   je nach Umbruch des Betrags („ab 1.399 €" braucht zwei Zeilen, „499 €" eine)
   um bis zu 80 px gegeneinander (gemeldet 05.09.2026). Mit subgrid teilt sich
   jede Karte dieselben Zeilen wie das Raster, Zeile fuer Zeile. Wo subgrid
   fehlt, bleibt es beim bisherigen Verhalten, nichts bricht. */
@supports (grid-template-rows: subgrid){
  .pakete{grid-template-rows:auto auto auto auto auto}
  .pakete > .preiskarte{grid-row:span 5;display:grid;grid-template-rows:subgrid;align-content:start}
  .pakete > .preiskarte > ul{grid-row:span 1}
}

/* Umzugshinweis (ab 01.12.2026, siehe includes/umzug.php). Ein ruhiger Streifen
   über der Navigation: er soll gelesen, aber nicht weggeklickt werden müssen.
   Verschwindet zum Stichtag von selbst. */
/* Umzugsband ganz oben. Die schwebende Navigation lag sonst darüber und ließ
   nur einen orangen Rand sehen; deshalb misst ap.js die Höhe des Bandes und
   legt sie als --band-h ab, Navigation und Seiteninhalt rücken um genau diesen
   Betrag nach unten. Ohne JS bleibt das Band versteckt: dann fehlte auch der
   Schließen-Knopf. */
.umzug-schild{position:fixed;top:0;left:0;right:0;z-index:70;
  display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;
  padding:10px 52px 10px clamp(16px,4vw,40px);
  background:#FF8A1F;color:#1A1204;font-size:14px;line-height:1.5}
.umzug-schild .umzug-wort{font-weight:700;letter-spacing:.01em;white-space:nowrap}
.umzug-karte{color:inherit;font-weight:620;white-space:nowrap;
  text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
.umzug-karte:hover,.umzug-karte:focus-visible{text-decoration-thickness:2.5px}
.umzug-zu{position:absolute;top:50%;right:10px;transform:translateY(-50%);
  width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  border:0;background:none;color:inherit;font-size:22px;line-height:1;
  cursor:pointer;border-radius:8px;opacity:.7}
.umzug-zu:hover,.umzug-zu:focus-visible{opacity:1;background:rgba(0,0,0,.10)}
body{padding-top:var(--band-h,0px)}
@media (max-width:560px){.umzug-schild{font-size:13.5px;padding:9px 46px 9px 16px}}
.umzug-band .umzug-wort{font-weight:700;letter-spacing:.01em;white-space:nowrap}
@media (max-width:560px){.umzug-band{font-size:13.5px;padding:9px 16px}}


/* ============================================================
   ETAPPE 2: Angleichung an die Design-Vorlage „COMNIC-IT Landingpage“
   (Design-Projekt 169a56c4), Sektion fuer Sektion, 12.09.2026.
   Nur Gestaltung. Markup, Klassennamen, Kennungen und ap.js sind
   unberuehrt. Die Bloecke stehen bewusst am Dateiende: viele Regeln
   haben dieselbe Spezifitaet wie ihre Grundregeln und gewinnen nur
   ueber die spaetere Stellung.
   ============================================================ */

/* ----- Sektion: kopf ----- */
/* ============================================================
   Etappe 2: Kopf und Navigation an die Vorlage „COMNIC-IT Landingpage"
   (Design-Projekt 169a56c4). Nur Farbe, Groesse, Abstand und Radius:
   Markup, Klassen und ap.js bleiben unberuehrt.

   REIHENFOLGE: Dieser Block gehoert ans ENDE von public/assets/css/ap.css,
   hinter Abschnitt 13 („Bausteine der Unterseiten") und hinter den
   Umzugsstreifen. Die Regeln ab Zeile 817 und die Schmal-Regeln ab Zeile 866
   setzen dieselben Eigenschaften mit gleicher Spezifitaet; bei Gleichstand
   gewinnt die spaetere Regel.

   FALLE, die den ersten Entwurf zerlegt hat: eine Media-Query erhoeht die
   Spezifitaet NICHT. Weil dieser Block ganz hinten steht, schlaegt hier jede
   Regel OHNE Media-Query auch die Regeln aus „@media (max-width:1180px)"
   weiter oben. Alles, was das Aufklappmenue auf schmalen Schirmen flach
   haelt, muss unten im Schmal-Block deshalb noch einmal ausdruecklich
   gesetzt werden. Die Blockfolge ist darum fest:
   breit, dann Durchsichtigkeit, dann schmal, dann schmal mit
   Durchsichtigkeit, dann Umzugsstreifen.
   ============================================================ */

/* Kopfleiste: Polster und Abstand wie in der Vorlage
   (padding:22px clamp(20px,3.4vw,50px), gap:clamp(18px,3vw,44px)).
   Die Hoehe bleibt bei --nav-h (64px statt der 70px der Vorlage): die
   Variable wird an mehreren Stellen weiterverrechnet (Buehne, Aufklappfeld,
   Sprungmarken) und darf hier nicht neu gesetzt werden. Der seitliche Wert
   kommt aus --dc-rand-hero, also genau der Vorlagenwert.
   Auf der Startseite bleibt das Polster der Kartenbuehne stehen: die Regel
   „body:has(.buehne-karte) .nav" ist spezifischer und fluchtet bewusst mit
   der Karte. */
.nav{
  padding-inline:var(--dc-rand-hero);
  gap:clamp(18px,3vw,44px); /* Vorlagenwert, kein Token vorhanden */
}

/* Menuepunkte: 15px im Farbton der Vorlage, Abstand clamp(12px,1.6vw,26px).
   Schriftgrad und Farbe stehen nur an den Kindern, nicht zusaetzlich an
   .nav-links: zwei Stellen fuer denselben Wert laufen frueher oder spaeter
   auseinander. */
.nav-links{
  gap:clamp(12px,1.6vw,26px); /* Vorlagenwert, kein Token vorhanden */
}
.nav-links a,.nav-knopf,.nav-anmelden{
  font-size:var(--dc-text-klein);
  color:var(--dc-text-nav);
}
.nav-links a:hover,.nav-knopf:hover,.nav-anmelden:hover{color:var(--dc-text-voll)}
.nav-eintrag{white-space:nowrap}
/* Der aktive Punkt traegt jetzt das Cyan der Vorlage, wie schon die
   Hauptknoepfe und die Textlinks aus Etappe 1. */
.nav-links .an,.nav-knopf.an{color:var(--dc-cyan)}

/* Breit sitzen die Punkte am Logo. Der Abstand kommt jetzt allein aus dem
   gap der Leiste, sonst zaehlen Rand und gap doppelt. Das streicht den am
   12.09.2026 gesetzten Rand von clamp(32px,4vw,56px): bewusst so, der
   Abstand faellt damit von rund 76px auf hoechstens 44px. Wer den groesseren
   Abstand behalten will, laesst Zeile 231 stehen und streicht diesen Block.
   Rechts schiebt der auto-Rand die Gruppe an den Rand, ein zweiter auto-Rand
   an .nav-rechts waere ueberfluessig. */
@media (min-width:1181px){
  .nav-links{margin:0 auto 0 0}
}

/* Rechte Gruppe: Abstand 18px, Anmelden als leiser Textlink, daneben der
   dunkle, fast eckige Knopf (background:#0A1217, radius:7px, 13px/18px).
   Kein line-height:1: das ist in der Vorlage nicht belegt und wuerde den
   Knopf um rund 8px flacher machen, mit knapper Unterlaenge bei „g". */
.nav-rechts{gap:var(--dc-luecke-m)}
.knopf-nav{
  background:var(--dc-bg);
  color:var(--dc-text-voll);
  border:1px solid var(--dc-kante-12);
  border-radius:var(--dc-r-knopf-klein);
  padding:13px 18px;
  font-size:var(--dc-text-klein);
  font-weight:600;
}
.knopf-nav:hover{background:var(--dc-karte);color:var(--dc-text-voll)}

/* Aufklappmenue BREIT: Flaeche und Kante der Vorlage
   (background:rgba(10,18,23,.96) = --dc-bg bei 96 Prozent,
   border:1px solid rgba(232,240,243,.12), border-radius:14px).
   Die erste Zeile ist der Notnagel fuer Browser ohne color-mix.
   Die Vorlage arbeitet ohne Schlagschatten, deshalb faellt er weg.
   ACHTUNG: diese vier Eigenschaften werden im Schmal-Block unten wieder
   zurueckgenommen, sonst steckt auf dem Telefon eine Karte in der Karte. */
.menue{
  border-radius:var(--dc-r-menue);
  background:var(--dc-bg);
  background:color-mix(in srgb,var(--dc-bg) 96%,transparent);
  border:1px solid var(--dc-kante-12);
  box-shadow:none;
}
.menue a{border-radius:var(--dc-r-feld);color:var(--dc-text)}
.menue a:hover,.menue a:focus-visible{background:var(--dc-flaeche-2)}
.menue b{font-size:var(--dc-text-klein)}
.menue span{font-size:var(--dc-augenbraue);color:var(--dc-text-55)}
.menue-alle{border-bottom:1px solid var(--dc-kante-08);border-radius:var(--dc-r-feld) var(--dc-r-feld) 0 0}
.menue-alle b{color:var(--dc-cyan)}

/* Burger: 44 mal 44, durchsichtig, Striche in Weiss.
   44px ist kein Vorlagenwert, sondern das empfohlene Mindestmass fuer eine
   Tippflaeche; ein Token dafuer gibt es nicht. */
.burger{width:44px;height:44px;border-radius:var(--dc-r-feld)}
.burger span{background:var(--dc-text-voll)}

/* ---- Wer Durchsichtigkeit abbestellt hat, bekommt volle Flaechen ---------
   Diese Wiederholung ist noetig, weil der gleichlautende Block in Zeile 794
   frueher steht als die Regeln hier und sonst ueberschrieben wuerde.
   Steht bewusst VOR dem Schmal-Block: schmal soll das Untermenue flach
   bleiben, auch ohne Durchsichtigkeit. */
@media (prefers-reduced-transparency:reduce){
  .menue{background:var(--dc-bg);backdrop-filter:none;-webkit-backdrop-filter:none}
}

/* ---- Schmale Schirme ----------------------------------------------------
   Die Vorlage zeigt das Aufklappmenue als schwebende Karte:
   background:rgba(10,18,23,.96), border:1px solid rgba(232,240,243,.12),
   border-radius:14px, padding:18px 20px, Schriftgrad 17px.
   Der Umbruchpunkt bleibt bei 1180px: ap.js hoert in Zeile 1039 auf genau
   diese Breite (matchMedia '(max-width:1180px)'), eine Verschiebung wuerde
   Leiste und Sperre des Seitenscrollens auseinanderlaufen lassen. Das Token
   --dc-bp-menue (1040px) bleibt deshalb hier ungenutzt.
   Dieser Block steht hinter dem Durchsichtigkeits-Block, damit sein
   Zuruecknehmen des Untermenues in beiden Faellen greift. */
@media (max-width:1180px){
  .nav-links{
    /* Das Band ueber der Leiste muss mitgerechnet werden: .nav sitzt auf
       top:var(--band-h,0px), das Feld haengt darunter. Ohne --band-h stuende
       die Karte mit gesetztem Umzugsband um die Bandhoehe zu hoch und deckte
       das Logo zu. Ohne Band ist der Wert 0, es aendert sich nichts.
       Die Startseite bleibt bei ihrer eigenen Regel (Zeile 998), die ist
       spezifischer und rechnet zusaetzlich den Kartenrand ein. */
    top:calc(var(--band-h,0px) + var(--nav-h));
    left:var(--dc-rand-hero);right:var(--dc-rand-hero);
    margin-top:8px;
    padding:18px 20px;
    max-height:calc(100vh - var(--band-h,0px) - var(--nav-h) - 26px);
    background:var(--dc-bg);
    background:color-mix(in srgb,var(--dc-bg) 96%,transparent);
    border:1px solid var(--dc-kante-12);
    border-radius:var(--dc-r-menue);
    font-size:var(--dc-text-gross);
  }
  /* Auf der Startseite fluchtet die Karte mit dem Polster der Kartenbuehne,
     sonst stuende sie neben dem Burger. Gleiches Muster wie die bestehende
     Regel, die dort das top nachzieht. */
  body:has(.buehne-karte) .nav-links{
    left:calc(var(--karte-rand) + var(--karte-innen));
    right:calc(var(--karte-rand) + var(--karte-innen));
  }
  .nav-eintrag{
    padding:13px 2px;
    border-bottom:1px solid var(--dc-kante-08);
  }
  .nav-punkt{border-bottom:1px solid var(--dc-kante-08)}
  /* Die Ueberschrift der Gruppe bleibt Versalie und wird nur umgetoent;
     12px sind genau --dc-marke, der Wert aendert sich also nicht. Breite,
     Polster, Laufweite und pointer-events aus Zeile 881 bleiben stehen. */
  .nav-knopf{font-size:var(--dc-marke);color:var(--dc-text-55)}
  /* Und hier das Zuruecknehmen: schmal ist das Untermenue eine Liste von
     Zeilen im Feld, keine eigene Karte. Ohne diese vier Zeilen gewinnen die
     Regeln ohne Media-Query von weiter oben, weil sie spaeter im Blatt
     stehen (Media-Queries zaehlen bei der Spezifitaet nicht mit). */
  .menue{background:none;border:0;border-radius:0;box-shadow:none}
  .menue-alle{border-bottom:0}
  .menue a{padding:11px 2px}
}
/* Schmal und ohne Durchsichtigkeit: volle Flaeche fuer das Feld, das
   Untermenue darin bleibt flach. Muss hinter dem Schmal-Block stehen. */
@media (max-width:1180px) and (prefers-reduced-transparency:reduce){
  .nav-links{background:var(--dc-bg);backdrop-filter:none;-webkit-backdrop-filter:none}
}

/* ---- Umzugsstreifen ------------------------------------------------------
   Die Vorlage kennt den Streifen nicht. Er wird nur auf die Tokens gehoben:
   Bernsteinton statt des alten Orange, dunkle Schrift der Vorlage, seitliches
   Polster wie die Kopfleiste. Rechts bleiben 52px fuer den Schliessen-Knopf,
   das ist die Breite des Knopfes plus Luft, kein Vorlagenwert.
   Kontrast --dc-orange auf --dc-bg: rund 9:1, weit ueber der Anforderung.
   ap.js misst die Hoehe dieses Streifens und legt sie als --band-h ab; das
   Polster bleibt bei 10px oben und unten, damit sich an der Hoehe nichts
   Unerwartetes aendert. */
.umzug-schild{
  padding:10px 52px 10px var(--dc-rand-hero);
  background:var(--dc-orange);
  color:var(--dc-bg);
  font-size:var(--dc-text-winzig);
}
.umzug-zu{border-radius:var(--dc-r-knopf-klein)}
@media (max-width:560px){
  /* Auf dem Handy klare Zeilen statt zufällig umbrechender Flex-Elemente.
     Nur die Überschrift spart den Schließen-Knopf aus; der Hinweistext
     bekommt die volle Breite und der Knopf bleibt oben erreichbar. */
  .umzug-schild{
    display:grid;grid-template-columns:minmax(0,1fr);gap:6px;
    padding:12px max(16px,env(safe-area-inset-right)) 6px max(16px,env(safe-area-inset-left));
    padding-top:calc(12px + env(safe-area-inset-top));
    font-size:14px;line-height:1.45;
  }
  .umzug-schild .umzug-wort{padding-right:44px;font-size:15px;line-height:24px}
  .umzug-text{min-width:0;text-wrap:pretty}
  .umzug-karte{justify-self:start;display:inline-flex;align-items:center;min-height:44px;white-space:normal}
  .umzug-zu{top:calc(2px + env(safe-area-inset-top));right:max(6px,env(safe-area-inset-right));transform:none;width:44px;height:44px;opacity:1}
}

/* ----- Sektion: buehne ----- */
/* ============================================================
   Bühne (Hero) samt Band: Angleichung an die Vorlage
   „COMNIC-IT Landingpage“ (Design-Projekt 169a56c4).
   Etappe 2, baut auf den schon umgestellten Grundregeln auf.

   EINFÜGESTELLE: ans Ende von public/assets/css/ap.css, auf jeden Fall
   hinter die schließende Klammer des @media (max-width:720px) im
   Abschnitt „Bühne als Karte“ (das @media endet mit der Regel
   .knopf-rahmen{width:100%}). Innerhalb dieses @media eingefügt, wäre
   der ganze Block verschachtelt und die Grundregeln hier gälten nur
   noch bis 720px Breite.

   Alle Regeln gewinnen über ihre spätere Stellung, die meisten
   zusätzlich über die höhere Spezifität. Kein !important nötig: im
   Markup der Bühne steht kein Inline-Stil, der eine Media-Query
   schlagen könnte. Die einzige style-Angabe ist --anteil auf .sterne,
   eine Variable, und sie steht in einem Zweig, der wegen note=null
   nicht gerendert wird.

   NICHT übernommen aus der Vorlage: die Bewertungszeile („4,9 / 5,0“,
   Google) und die Zeile „ÜBER 120 BETRIEBE“. Beides ist unbelegt und
   wäre irreführende Werbung (§ 5 UWG). Auch keine Vorratsregeln dafür.
   ============================================================ */

/* ---- Fläche, Maß und Höhe ---- */
/* Seitenmaß der Vorlage: clamp(20px,3.4vw,50px) statt clamp(22px,5vw,76px).
   Bewusst als EIGENE Variable auf der Karte und nicht als Neufassung von
   --karte-innen: die ist eine bestehende Variable und wird auch außerhalb
   der Bühne gelesen (Polsterung der schwebenden Leiste, Maske und
   scroll-padding der Logoreihe). Jede Stelle, die das Maß braucht, zieht
   es unten ausdrücklich nach.
   --karte-rand bleibt bei 0 (Inhaber, 12.09.2026: bis zum Rand).
   Höhe: Vorlage nennt min 680px, Höhe 100vh, gedeckelt bei 1040px. Statt
   100vh weiter 100svh minus Umzugsband, weil vh auf dem Telefon die
   eingeblendete Adressleiste mitrechnet und das Band aus dem Bild schiebt.
   Die Deckelung steht IM clamp und nicht als eigene Zeile max-height:
   gerechnet wird max(min-height, min(max-height, Höhe)), eine getrennte
   max-height:1040px wäre neben dieser min-height wirkungslos. */
.buehne-karte{
  --buehne-innen:var(--dc-rand-hero);
  background:var(--dc-bg-hero);
  min-height:clamp(680px,calc(100svh - var(--band-h,0px) - 2 * var(--karte-rand)),1040px);
}

/* Die schwebende Leiste fluchtet mit dem Inhalt der Karte, also dasselbe
   Maß. Gleiche Spezifität wie die Fassung weiter oben im Blatt, gewinnt
   durch die spätere Stellung. Nur die Polsterung: top rechnet dort mit
   --navP aus dem Skript und bleibt unangetastet. */
body:has(.buehne-karte) .nav{padding:0 calc(var(--karte-rand) + var(--dc-rand-hero))}

/* Bildausschnitt der Vorlage. Auf .buehne-karte eingegrenzt, damit die
   Unterseiten (.buehne-klein) ihren Ausschnitt behalten. Der schmale Fall
   steht weiter unten und muss dort wiederholt werden. */
.buehne-karte .buehne-bild img{object-position:70% 30%}

/* Zwei Schleier der Vorlage, beide als fertiges Token. Reihenfolge wie
   dort: der senkrechte liegt oben und trägt den Übergang zum Band, der
   waagerechte darunter hält die linke Textspalte lesbar. */
.buehne-karte .buehne-schleier{
  background:
    var(--dc-schleier-senkrecht),
    var(--dc-schleier-waagerecht);
}

/* ---- Textspalte ---- */
/* Vorlage: Polsterung clamp(40px,14vh,150px) an den Seiten das Kartenmaß,
   unten 0, Inhalt oben angeschlagen. Bisher stand er mittig; mit dem Band
   unten und dem Bild dazwischen ist oben die Stellung der Vorlage. */
.buehne-karte .buehne-inhalt{
  align-items:flex-start;
  padding:clamp(40px,14vh,150px) var(--buehne-innen) 0;
}
.buehne-karte .buehne-augenbraue{
  margin:0 0 20px;
  font-size:var(--dc-augenbraue);
  line-height:1.4;
  color:var(--dc-text-70);
}
/* Vorlage: clamp(40px,6vw,86px)/1.04, -0.035em, Stärke 600, also genau die
   Grundwerte von .d1. Die bisherige Sonderfassung (6.4vw/88px, Stärke 300)
   fällt damit weg. ACHTUNG: das ist der eine Punkt, an dem Vorlage und die
   Ansage des Inhabers vom 12.09.2026 („dünn und groß“) auseinandergehen.
   Soll die dünne Fassung bleiben, sind es zwei Werte: font-weight 300 und
   letter-spacing -.042em. */
.buehne-karte .d1{
  max-width:none;
  font-size:var(--dc-h1);
  line-height:var(--dc-h1-zeile);
  letter-spacing:var(--dc-h1-laufweite);
  font-weight:600;
  color:var(--dc-text-voll);
  text-wrap:balance;
}
/* Vorlage: max-width 440px (kein Token dafür, Maß aus der Vorlage),
   17px/1.55, Deckkraft .86. */
.buehne-karte .lead{
  max-width:440px;
  margin-top:28px;
  font-size:var(--dc-text-gross);
  line-height:1.55;
  color:var(--dc-text-86);
}
/* Randnotiz neben dem weißen Knopf. Der Knopf selbst trifft die Vorlage
   bereits (.knopf-weiss) und bleibt unangetastet. Die Vorlage nennt
   Deckkraft .72, ein Token dafür gibt es nicht; die Nachbarn sind .70 und
   .78, genommen ist .70. */
.buehne-karte .buehne-notiz{
  font-size:var(--dc-text-klein);
  color:var(--dc-text-70);
}
/* Unsere Eckdaten. In der Vorlage steht an dieser Stelle „ÜBER 120
   BETRIEBE“, das ist unbelegt und bleibt weg. Der Satz bekommt nur
   Schriftgrad und Farbe der Vorlagenwerte, damit er leise unter dem Knopf
   steht und dem Band nicht die Aufmerksamkeit nimmt. */
.buehne-karte .buehne-fakten{
  margin:26px 0 0;
  font-size:var(--dc-augenbraue);
  line-height:1.6;
  color:var(--dc-text-62);
}

/* ---- Band unten ---- */
/* Titelzeile und Standort sitzen im Kopf des Bandes; dessen Seitenmaß zieht
   das Kartenmaß nach, sonst flüchtet die Zeile nicht mit der Überschrift. */
.buehne-karte .buehne-fuss-kopf{padding:0 var(--buehne-innen) 16px}
/* Vorlage: 12px, Laufweite .16em, Stärke 700, Versalien. Das sind genau die
   drei Marken-Token, wie sie auch .marke benutzt. */
.buehne-karte .buehne-fuss-titel{
  font-size:var(--dc-marke);
  font-weight:700;
  letter-spacing:var(--dc-marke-laufweite);
  text-transform:uppercase;
  color:var(--dc-text-70);
}
.buehne-karte .buehne-standort{
  font-size:var(--dc-augenbraue);
  color:var(--dc-text-70);
}
/* Trennlinie der Vorlage als Oberkante der hellen Leiste. Die helle Fläche
   selbst bleibt (Entscheidung 12.09.2026: die Kundenlogos vertragen kein
   flächiges Weiß und keine Umkehrung). Der dunkle Knopf auf der hellen
   Leiste ist schon geregelt und wird hier nicht wiederholt. */
.buehne-karte .buehne-leiste{
  padding:18px var(--buehne-innen);
  border-top:1px solid var(--dc-kante-14);
}

/* ---- Schmale Schirme ----
   Muss NACH den Regeln oben stehen: die bisherigen Fassungen für
   Bildausschnitt, Schleier, Textspalte, Leiste und Logoreihe stehen im
   Blatt weiter oben in einem @media und verlieren bei gleicher Spezifität
   gegen jede spätere Regel. Ohne diese Wiederholung stünde auf dem Telefon
   der breite Bildausschnitt (vom Gesicht bliebe die Schulter), der
   waagerechte Schleier, der dort nichts abdeckt, die Leiste mit der
   falschen Polsterung und die Logoreihe mit dem alten Seitenmaß. */
@media (max-width:720px){
  .buehne-karte .buehne-bild img{object-position:62% 26%}
  .buehne-karte .buehne-schleier{background:var(--dc-schleier-senkrecht)}
  .buehne-karte .buehne-inhalt{
    align-items:flex-start;
    padding:clamp(28px,9vh,64px) var(--buehne-innen) 0;
  }
  .buehne-karte .lead{max-width:100%}
  .buehne-karte .buehne-leiste{padding:16px var(--buehne-innen) 18px}
  /* Nur die drei Maße; Schnapp, Maske und verstecktes Rollband bleiben, wie
     sie sind. Die Maske läuft weiterhin allein nach rechts: links würde sie
     im Ruhezustand das erste Kundenlogo anschneiden. */
  .buehne-karte .buehne-logos{
    margin:0 calc(-1 * var(--buehne-innen));
    padding:0 var(--buehne-innen);
    scroll-padding-inline:var(--buehne-innen);
  }
}

/* ----- Sektion: leistungen ----- */
/* ============================================================
   Etappe 2: Abschnitt „Leistungen“ (drei Türen) auf die Vorlage
   ============================================================
   Alles unter #leistungen gebunden. Grund: .raster, .karte, .tuer,
   .karte-nr, .worte und .weiter sind geteilte Bausteine. In /vorschau
   benutzen elf Seiten .karte (index, produkte, ratgeber, software,
   infrastruktur, ueber-uns, webseiten, referenzen, ticketsystem,
   buchhaltung-easy, starten), .tuer und .weiter zusätzlich produkte,
   ratgeber und infrastruktur. Ungebunden geschrieben würde diese Etappe
   zehn weitere Seiten mitverändern, die noch nicht angeglichen sind.

   Die Bindung an die id trägt zugleich die Reihenfolge gegenüber den
   Grundregeln: jede Regel hier schlägt ihre Grundregel unabhängig davon,
   wo im Blatt der Block steht. Deshalb kommt kein einziges !important vor.
   Innerhalb dieses Blocks gilt das nicht: der Kontrastnachtrag ganz unten
   hat dieselbe Spezifität wie die Regeln darüber und gewinnt nur, weil er
   zuletzt steht. Der Block gehört also am Stück ins Blatt.
   ============================================================ */

/* Raster. Die Vorlage nennt 290 px Mindestbreite; der Wert steht schon als
   --dc-bp-karten bereit. min(…,100%) bleibt zwingend: bei 320 px Schirm ist
   die Spalte nach dem Seitenrand nur noch rund 280 px breit, eine nackte
   Mindestbreite von 290 px würde die Karte über den Rand schieben.
   Die Lücke wächst von 16 auf 22 px. Das ist gefahrlos: die einzige Stelle
   im Skript, die eine Lücke von 16 px fest annimmt, misst #schiene (die
   Logo-Schiene weiter unten), nicht .raster. */
#leistungen .raster{
  grid-template-columns:repeat(auto-fit,minmax(min(var(--dc-bp-karten),100%),1fr));
  gap:var(--dc-luecke-l);
}

/* Karte. Die Vorlage legt eine ruhige Fläche an statt des bisherigen
   Weißverlaufs: voller Ton, feine Kante, kein Schlagschatten und keine helle
   Oberkante. Beides steckt in der einen box-shadow-Zeile der Grundregel
   (inset-Lichtkante plus Schlagschatten), box-shadow:none räumt also beides.
   Der Innenabstand ist derselbe Wert wie in der Vorlage
   (clamp(24px,2.4vw,34px)), er steht als --dc-karte-polster bereit und ersetzt
   auch das padding-bottom:24px der Grundregel .tuer.
   Die 16 px Lücke der Vorlage haben keinen eigenen Abstands-Token
   (--dc-luecke-s ist 10, --dc-luecke-m ist 18), deshalb hier als Zahl. */
#leistungen .karte{
  display:flex;flex-direction:column;gap:16px;
  padding:var(--dc-karte-polster);
  border-radius:var(--dc-r-karte);
  background:var(--dc-karte);
  border:1px solid var(--dc-kante-08);
  box-shadow:none;
}
/* Die Grundregel .karte:hover verliert gegen die id und färbte deshalb nichts
   mehr. Das Anheben um 3 px bleibt dort und wirkt weiter, weil hier bewusst
   kein transform steht: so greift auch die Rücksicht auf
   „prefers-reduced-motion“ unverändert. Die Vorlage kennt keinen Hover
   (sie ist ein starrer Auszug), also nur die Kante eine Spur heller. */
#leistungen .karte:hover{
  background:var(--dc-karte);
  border-color:var(--dc-kante-18);
}

/* Nummer: in der Vorlage schmale Schreibmaschinenschrift, 13 px, fett, Cyan.
   Der untere Abstand fällt weg, den trägt jetzt die Lücke der Karte. */
#leistungen .karte-nr{
  font-family:var(--dc-ff-mono);
  font-size:var(--dc-augenbraue);
  font-weight:700;
  letter-spacing:0;
  color:var(--dc-cyan);
  margin-bottom:0;
}

/* Titel. .d3 bringt Größe, Zeilenabstand und Farbe der Vorlage schon mit
   (23 px, 1.25, weiß). Hier bleibt nur der Eigenabstand zu räumen. */
#leistungen .karte .d3{margin-bottom:0}

/* Fließtext: 16 px, Zeilenabstand 1.55. Die Vorlage nennt Deckkraft .60,
   dafür gibt es keinen Token; --dc-text-62 ist der nächstliegende. */
#leistungen .karte p{
  font-size:var(--dc-text-basis);
  line-height:1.55;
  color:var(--dc-text-62);
}

/* Stichwortzeile. Abstand nach oben übernimmt die Lücke der Karte.
   Die Vorlage nennt für die Schrift Deckkraft .72, es gibt .70 und .78;
   --dc-text-70 liegt näher. Der Abstand zwischen den Stichworten bleibt,
   wie er ist: die Vorlage sagt dazu nichts. Opacity und transform der
   Stichworte gehören dem Skript (gestaffeltes Einblenden), hier steht
   deshalb weder das eine noch das andere. */
#leistungen .worte{margin-top:0}
#leistungen .worte span{
  font-size:var(--dc-augenbraue);
  letter-spacing:0;
  color:var(--dc-text-70);
  padding:7px 13px;
  border-radius:var(--dc-r-pille);
  background:var(--dc-flaeche);
  border:1px solid var(--dc-kante-09);
}

/* Weiter-Zeile: 15 px, fett, Cyan, und sie sitzt am Fuß der Karte.
   margin-top:auto ist der eigentliche Gewinn: die drei Karten sind
   verschieden lang, die Links fluchten trotzdem auf einer Linie. */
#leistungen .tuer .weiter{
  margin-top:auto;
  font-size:var(--dc-text-klein);
  font-weight:700;
  color:var(--dc-cyan);
}

/* Rücksicht auf „mehr Kontrast“: die Grundregeln dafür stehen auf Klassen und
   verlieren gegen die id oben, ohne diesen Nachtrag wäre die Einstellung im
   Abschnitt wirkungslos. #131C27 ist nicht erfunden, es ist der Wert, den das
   Blatt in seinem eigenen Kontrastblock für .karte schon benutzt.
   Ruhe und Hover brauchen hier zwei verschiedene Kanten. Die Grundregel
   unterscheidet in diesem Modus .34 (Ruhe) von .5 (Hover); gäbe man beiden
   denselben Wert, bliebe beim Überfahren nur noch das Anheben, und wer
   zusätzlich „weniger Bewegung“ eingestellt hat, bekäme gar keine Rückmeldung
   mehr. Einen helleren Kante-Token als .35 gibt es nicht, deshalb steht für
   den Hover --dc-text-55: rgba(232,240,243,.55) liegt dicht an den .5, die
   die Grundregel dort verwendet. */
@media (prefers-contrast:more){
  #leistungen .karte{background:#131C27;border-color:var(--dc-kante-35)}
  #leistungen .karte:hover{background:#131C27;border-color:var(--dc-text-55)}
  #leistungen .karte p{color:var(--dc-text-86)}
  #leistungen .worte span{color:var(--dc-text-86);border-color:var(--dc-kante-35)}
}

/* ----- Sektion: warum ----- */
/* ============================================================
   Abschnitt „Warum wir" (#warum) nach der Vorlage
   „COMNIC-IT Landingpage"
   ------------------------------------------------------------
   Gehört ans Ende von public/assets/css/ap.css, nach Block 13
   („Merkmale mit Haken", Zeilen 1093 bis 1100) und nach der
   Grundregel .haken aus Block 6 (Zeile 414). Das Dateiende ist dafür
   geprüft: die Klammerbilanz stimmt und die letzte Regel ist eine
   geschlossene Media-Query, der Block landet also nicht versehentlich
   in einer Abfrage.
   Alle Selektoren tragen #warum, damit .merkmale in software.php,
   ueber-uns.php, ticketsystem.php und kostenvergleich.php sowie .haken
   in webseiten.php und in den Preiskarten der Startseite unberührt
   bleiben. Die beiden <h2 id="warum"> der Ratgeber-Seiten haben weder
   .marke noch .merkmale unter sich und bleiben außen vor.
   Kein !important nötig: die zwei Inline-Stile des Abschnitts stehen
   auf <section> (padding-top) und auf <h2> (margin-top), also auf
   Eigenschaften, die hier niemand anfasst.
   ============================================================ */

/* Augenbraue: 13px und Stärke 500 nach der Vorlage.
   Bewusste Abweichung von der übrigen Seite: .marke ist sonst 12px und
   Stärke 700 (Zeile 195). Der Kopf von „Preise" steht direkt unter
   diesem Abschnitt, die beiden Augenbrauen sehen danach verschieden
   groß aus. Großschreibung und Laufweite bleiben aus .marke stehen,
   die Vorlage sagt dazu nichts. Soll die Reihe der Abschnittsköpfe
   geschlossen bleiben, fallen diese zwei Zeilen ersatzlos weg; das ist
   eine Entscheidung des Inhabers, keine technische Frage.
   Die Farbe wird nicht wiederholt: .marke trägt bereits --dc-text-70,
   und die Vorlage nennt denselben Wert. */
#warum .kopf .marke{
  font-size:var(--dc-augenbraue);
  font-weight:500;
}

/* Liste. Die Vorlage nennt repeat(auto-fit,minmax(280px,1fr)).
   min(280px,100%) ist Absicht und keine Abweichung vom Bild: ohne die
   Deckelung schiebt die feste Mindestbreite auf sehr schmalen Geräten
   die Spalte aus der Hülle und die ganze Seite bekommt einen
   waagerechten Scrollbalken.
   Zwischenraum: die Vorlage nennt clamp(24px,3vw,44px); dafür gibt es
   keinen eigenen Token, --dc-luecke-xl (clamp(28px,4vw,56px)) ist der
   vorgesehene große Abstand und liegt nah daran, auf breiten Schirmen
   12px darüber.
   Der eine Wert gilt für BEIDE Achsen und ersetzt deshalb auch den
   Zeilenabstand der Grundregel (16px, Zeile 1093). Die fünf Einträge
   stehen in drei Spalten, also in zwei Zeilen: zwischen diesen beiden
   Zeilen werden aus 16px bis zu 56px. Das ist so gewollt, die Vorlage
   nennt ebenfalls nur einen Wert für beide Richtungen. */
#warum .merkmale{
  grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));
  gap:var(--dc-luecke-xl);
}

/* Eintrag. Die erste Spalte trägt genau die Kreisgröße der Vorlage.
   24px ist ein Maß aus der Vorlage, für das es keinen Abstands-Token
   gibt; es muss mit der Breite des Hakens darunter übereinstimmen.
   Zeilenabstand, Schriftgrad und die Lücke von 2px/12px bleiben aus
   der Grundregel stehen. */
#warum .merkmale li{
  grid-template-columns:24px minmax(0,1fr);
}

/* Haken: grüner Kreis der Vorlage statt des türkisen der Grundregel.
   margin-top:0 statt der 2px aus Zeile 1096, die für den kleineren
   18px-Kreis gedacht waren und den größeren nach unten drücken würden.
   grid-row:span 2 aus der Grundregel bleibt, der Kreis sitzt durch
   align-items:start oben im Eintrag. Die erste Zeile ist dort 24,65px
   hoch (17px mal Zeilenabstand 1.45, geerbt von .merkmale li), der
   24px-Kreis steht darin von selbst mittig. */
#warum .merkmale li .haken{
  width:24px;
  height:24px;
  margin-top:0;
  background:var(--dc-gruen-16);
  color:var(--dc-gruen);
  font-size:var(--dc-augenbraue);  /* 13px der Vorlage */
  font-weight:700;
}

/* Titel: 17px, fett, volles Weiß. */
#warum .merkmale li b{
  font-size:var(--dc-text-gross);
  font-weight:700;
  color:var(--dc-text-voll);
}

/* Erklärung darunter: 15px, Zeilenabstand 1.55, 55 Prozent Deckkraft.
   Die 1.55 nennt die Vorlage ausdrücklich; Zeilenabstände liegen in
   :root nicht als Token vor. */
#warum .merkmale li em{
  font-size:var(--dc-text-klein);
  line-height:1.55;
  color:var(--dc-text-55);
}

/* ----- Sektion: preise ----- */
/* ============================================================
   Etappe 2: Preise. Rechner, Schiene, Preiskarten und Hosting auf die
   Design-Vorlage „COMNIC-IT Landingpage“ gebracht.

   Dieser Block gehört ans ENDE von ap.css. Mehrere Regeln haben dieselbe
   Spezifität wie ihre Grundregeln in Abschnitt 5 und 6 und gewinnen nur,
   weil sie später stehen. Die Seite bindet sonst kein weiteres Blatt ein:
   /vorschau/index.php hat keinen eigenen style-Block, ap.css ist also
   das letzte Wort.
   ============================================================ */

/* ── Rechnerblock ─────────────────────────────────────────────
   Vorlage: Verlauf 135 Grad, Kante .09, Radius 22, Polster 26 bis 44,
   Lücke 28 bis 56, Spalten als auto-fit ab 300 px.
   min(300px,100%) ist Pflicht. Ohne das steht die 300-px-Spalte auf einem
   360-px-Schirm über den Rand hinaus (body kappt es dann still). */
.rechner{
  grid-template-columns:repeat(auto-fit,minmax(min(var(--dc-bp-preis),100%),1fr));
  gap:var(--dc-luecke-xl);
  padding:var(--dc-block-polster);
  border-radius:var(--dc-r-block);
  background:var(--dc-karte-verlauf);
  border:1px solid var(--dc-kante-09);
  /* Die Vorlage arbeitet mit Flächen und Kanten, ohne Schlagschatten. */
  box-shadow:none;
}
/* Die Einspaltigkeit unter 860 px wird hier nachgezogen. Die Regel steht in
   Abschnitt 5 weiter oben und hätte gegen das auto-fit darüber verloren,
   allein wegen der Reihenfolge. Sie ist bewusst gesetzt: zwei enge Spalten
   auf dem Tablett quetschen die Empfehlung samt Preis. auto-fit bleibt für
   alles darüber, geändert wird nur, was ohnehin schon so aussah. */
@media (max-width:860px){
  .rechner{grid-template-columns:minmax(0,1fr)}
}

/* ── Regler ───────────────────────────────────────────────────
   Die Vorlage benutzt einen Systemregler mit accent-color #3EC6E8. Unserer
   ist aus eigenen Bausteinen gebaut, also bekommt die Füllung dieselbe Farbe
   flach statt als Verlauf. Die Farbe der leeren Bahn nennt die Vorlage nicht
   (dort zeichnet sie der Browser), .12 ist der nächstliegende Kantenwert. */
.regler-schiene{background:var(--dc-kante-12)}
.regler-fuell{background:var(--dc-cyan)}
.regler.zieht .regler-griff{box-shadow:0 4px 18px rgba(0,0,0,.55),0 0 0 8px var(--dc-cyan-16)}
.regler-marken.klein{font-size:var(--dc-augenbraue);color:var(--dc-text-45)}
/* Vorlage: 26 px. Der nächste Grad im Satz ist --dc-h3 mit 25 px, dabei
   bleibt es, statt eine 26 zu erfinden. */
.regler-wert b{font-size:var(--dc-h3);color:var(--dc-text-voll)}
/* !important mit Begründung: die Einheit trägt im Markup
   style="color:var(--text-2)" (index.php Zeile 460 und 690). Ein Inline-Stil
   schlägt jede Regel im Blatt, und am Markup darf hier nichts geändert
   werden. --text-2 ist das alte, bläuliche Grau; die Vorlage will das warme
   Grau bei .62 Deckkraft. Nur deshalb, und nur für diese eine Farbe. */
.regler-wert .klein{color:var(--dc-text-62) !important}

/* Der Aufpreis der Module und die Ankreuzfelder im Rechner des Ticketsystems
   standen noch im alten Türkis. Beide liegen in .rechner, also gilt für sie
   dieselbe Akzentfarbe wie für den Regler darüber.
   accent-color muss am Feld selbst stehen, nicht am .rechner: geerbt würde
   der Wert von .haken-zeile input (Zeile 741) geschlagen. */
.rechner .modul-preis{color:var(--dc-cyan)}
.rechner .haken-zeile input{accent-color:var(--dc-cyan)}

/* ── Empfehlung (rechte Spalte, mittig) ───────────────────────
   Marke 12 px mit .16em in Cyan, Preis 40 bis 64 px bei -.03em, die Zusätze
   bei 0.34em, Hinweistext 16 px bei .62.
   Der Knopf braucht nichts: .knopf-glas trägt seit Etappe 1 genau die
   Fläche .07, die Kante .22 und den Radius 8 der Vorlage. */
.empfehlung .empf-marke{
  font-size:var(--dc-marke);font-weight:700;
  letter-spacing:var(--dc-marke-laufweite);color:var(--dc-cyan);
}
.empfehlung .preis{font-size:var(--dc-preis);letter-spacing:-.03em}
.empfehlung .preis .je{font-size:.34em;color:var(--dc-text-62)}
.empfehlung .preis .ab{color:var(--dc-text-62)}
/* Bewusst .empf-text und nicht .empfehlung p: die Aufschlüsselung im
   Ticket-Rechner ist ebenfalls ein p in .empfehlung und soll klein bleiben. */
.empfehlung .empf-text{
  font-size:var(--dc-text-basis);line-height:1.5;color:var(--dc-text-62);
}
/* Mit .empfehlung davor, sonst wirkt die Regel nicht: .empf-aufschluss allein
   hat 0,1,0 und verliert gegen .empfehlung p aus Zeile 378 mit 0,2,0,
   gleichgültig wie weit unten sie steht. */
.empfehlung .empf-aufschluss{color:var(--dc-text-45)}

/* ── Schiene und Preiskarten ──────────────────────────────────
   Vorlage: Lücke 22, Radius 18, Polster 26 bis 34, Kante .08, Fläche
   #101B21; hervorgehoben Kante in Cyan bei .28 auf Fläche #0F1F23.

   Die Lücke der Schiene bleibt bei 16 px und wird hier NICHT auf die 22 der
   Vorlage gezogen. Grund: ap.js rechnet die Rasterpunkte zum Einrasten mit
   einer fest eingetragenen 16 (Zeile 597, summe += offsetWidth + lueck).
   Die Kartenbreite misst das Skript live, die Lücke nicht. Bei 22 px rasten
   die Karten 6, 12 und 18 px versetzt ein und der Punkt unten zeigt am
   rechten Anschlag die falsche Karte. Das lässt sich nur zusammen mit dem
   Skript ändern, und das ist hier nicht erlaubt. Aus demselben Grund bleibt
   auch die Breitenformel in Zeile 404 unangetastet: sie rechnet mit
   derselben 16. */
.preiskarte{
  padding:var(--dc-karte-polster);
  border-radius:var(--dc-r-karte);
  background:var(--dc-karte);
  border:1px solid var(--dc-kante-08);
  box-shadow:none;
}
/* rgba(62,198,232,.28) nennt die Vorlage für die Kante der hervorgehobenen
   Karte. Diesen Wert gibt es nicht als Token: --dc-cyan-16 liegt bei .16.
   Deshalb hier ausgeschrieben, es ist das Cyan --dc-cyan bei 28 Prozent. */
.preiskarte.aktiv{border-color:rgba(62,198,232,.28);background:var(--dc-karte-hell)}
.preiskarte .d3{font-size:var(--dc-h3)}
.preiskarte .betrag{font-size:var(--dc-preis-karte);letter-spacing:-.03em}
.preiskarte .betrag span{color:var(--dc-text-62)}
.preiskarte li{font-size:var(--dc-text-klein);line-height:1.45;color:var(--dc-text-78)}
/* Der Haken ist ein geteilter Baustein: er steht auch in der Liste unter
   „Warum wir“. Dort wechselt er mit, das ist richtig so, beide sind
   dieselbe Sache. */
.haken{background:var(--dc-cyan-16);color:var(--dc-cyan)}
/* Das Abzeichen hängt in der Vorlage 13 px über der Karte. Der Rahmen
   darüber lässt 18 px Luft, das reicht. Waagerecht sitzt es jetzt auf dem
   Polster der Karte, damit es mit dem Kartentitel fluchtet, auch wenn das
   Polster mit der Fensterbreite wächst. */
.abzeichen{
  top:-13px;left:var(--dc-karte-polster);
  background:var(--dc-orange);color:var(--dc-bg);
  letter-spacing:.1em;border-radius:var(--dc-r-pille);
}

/* ── Fuß der Schiene ──────────────────────────────────────────
   Punkte: 8 hoch, der aktive 26 breit in Cyan, die übrigen bei .22.
   Breite statt Vergrößerung, deshalb muss das alte transform:scale weg. */
.schiene-fuss .klein{line-height:1.6;color:var(--dc-text-45)}
.punkte i{
  width:8px;height:8px;border-radius:var(--dc-r-pille);
  background:var(--dc-kante-22);
  transition:background .2s ease-out,width .2s cubic-bezier(.25,.8,.35,1);
}
.punkte i.an{width:26px;background:var(--dc-cyan);transform:none}

/* ── Hosting ──────────────────────────────────────────────────
   Eigenes Band, in der Vorlage nicht enthalten. Es bekommt das Material der
   Vorlage: Bandverlauf, Kante .08, Kartenradius, kein Schlagschatten. Der
   orange Schimmer geht dabei weg, denn in der Vorlage ist Orange der Akzent
   des Abzeichens und keine Fläche.
   grid-template-columns bleibt bewusst unangetastet: die Regel
   @media (max-width:760px) weiter oben würde sonst verlieren und das Band
   auf dem Telefon zweispaltig stehen bleiben. */
.hosting{
  padding:var(--dc-karte-polster);
  border-radius:var(--dc-r-karte);
  background:var(--dc-band-verlauf);
  border:1px solid var(--dc-kante-08);
  box-shadow:none;
}
.hosting .betrag{font-size:var(--dc-preis-karte);letter-spacing:-.03em}
.hosting .betrag span{color:var(--dc-text-62)}

/* ── Mehr Kontrast angefordert ────────────────────────────────
   Der Block @media (prefers-contrast:more) steht weiter oben und hat
   dieselbe Spezifität, verliert hier also. Er setzt zweierlei, und beides
   muss nachgezogen werden: die kräftige Kante und die deckende Fläche
   #131C27. Dieser Wert ist nicht neu erfunden, er steht bereits in Zeile 804
   desselben Blattes; ein Token dafür gibt es nicht, --dc-karte ist für
   diesen Zweck zu dunkel. Die hervorgehobene Karte trägt ihren Unterschied
   dort über die Cyan-Kante, nicht über eine eigene Fläche. */
@media (prefers-contrast:more){
  .rechner,.preiskarte,.hosting{background:#131C27;border-color:var(--dc-kante-35)}
  .preiskarte.aktiv{background:#131C27;border-color:var(--dc-cyan)}
}

/* ----- Sektion: produkte ----- */
/* ============================================================
   Etappe 2: Abschnitt „Produkte und Ticketsystem“ auf die Vorlage
   ============================================================
   Gilt NUR fuer #produkte. Alles ist mit der Kennung des Abschnitts
   geschrieben, damit dieser Block ans Ende von ap.css kann, ohne die
   Preisschiene (#preise), die Unterseiten oder das Kontaktformular zu
   beruehren, die dieselben Klassen benutzen (.karte, .haken,
   .haken-zeile, .rechner, .preiskarte, .worte).

   Die Vorlage kennt diesen Abschnitt nicht. Uebertragen sind nur ihre
   Bausteine: Flaeche var(--dc-karte), Kante var(--dc-kante-08), Radius
   var(--dc-r-karte), Polster var(--dc-karte-polster), Akzent
   var(--dc-cyan), Haken auf var(--dc-cyan-16), Marken 12px/.16em/700,
   Fliesstext var(--dc-text-62). Die Vorlage arbeitet mit Flaechen und
   Kanten, nicht mit Schlagschatten: die inneren Lichtkanten und die
   grossen Schatten fallen deshalb weg.

   Keine Aussage, keine Zahl und kein Wort aendert sich hier.
   ============================================================ */

/* ---- 1. Der grosse Produktblock ---- */
/* Grosse Blocks tragen den Blockradius und das Blockpolster, Karten den
   Kartenradius. Die Spaltenaufteilung bleibt unberuehrt: sie haengt an
   einer Media-Query, und eine Regel mit Kennung wuerde die auf schmalen
   Schirmen aushebeln. */
#produkte .produkt{
  background:var(--dc-karte-verlauf);
  border:1px solid var(--dc-kante-08);
  border-radius:var(--dc-r-block);
  padding:var(--dc-block-polster);
  box-shadow:none;
}
#produkte .produkt-kopf{gap:var(--dc-luecke-s)}
/* „Neu“ als Marke der Vorlage: 12px, 700, weite Laufweite. Bernstein
   statt Cyan, weil daneben schon der cyanfarbene Akzent steht. */
#produkte .neu{
  font-size:var(--dc-marke);font-weight:700;letter-spacing:var(--dc-marke-laufweite);
  color:var(--dc-bg);background:var(--dc-bernstein);
  border-radius:var(--dc-r-pille);padding:3px 10px;
}

/* ---- 2. Stichwortzeile ---- */
/* var(--dc-marke) steht hier nur fuer die Groesse 12px, nicht fuer eine
   Versalienmarke: die Woerter bleiben in Gross- und Kleinschreibung. */
#produkte .worte span{
  font-size:var(--dc-marke);letter-spacing:0;color:var(--dc-text-62);
  background:var(--dc-flaeche);border:1px solid var(--dc-kante-08);
  border-radius:var(--dc-r-pille);padding:5px 10px;
}

/* ---- 3. Preisblock im Produktblock ---- */
#produkte .betrag.gross{font-size:var(--dc-preis);color:var(--dc-text-voll)}
#produkte .betrag.gross .je{color:var(--dc-text-55)}
#produkte .preis-marke{
  font-size:var(--dc-augenbraue);font-weight:700;letter-spacing:0;
  color:var(--dc-cyan);background:var(--dc-cyan-16);
  border-radius:var(--dc-r-pille);padding:5px 12px;
}

/* ---- 4. Stufenleiste (Buchhaltung-Easy, derzeit ausgeblendet) ---- */
/* Der Block bleibt vollstaendig eingekleidet, damit er beim Zurueckholen
   nicht im alten Gewand steht. Die Rasterspalten der Stufe bleiben
   unangetastet: sie haengen an einer Media-Query fuer 420px. */
#produkte .stufe{border-bottom-color:var(--dc-kante-08)}
#produkte .stufe:first-child{border-top-color:var(--dc-kante-08)}
#produkte .stufe-punkt i{
  color:var(--dc-text-55);background:var(--dc-flaeche);border:1px solid var(--dc-kante-12);
}
#produkte .stufe-an .stufe-punkt i{background:var(--dc-cyan);color:var(--dc-bg);border-color:transparent}
#produkte .stufe-zeit{font-size:var(--dc-text-klein);color:var(--dc-text)}
#produkte .stufe-was{font-size:var(--dc-text-winzig);color:var(--dc-text-55)}
#produkte .stufe-preis{color:var(--dc-text-voll)}
#produkte .stufe-an .stufe-preis{color:var(--dc-cyan)}
#produkte .stufe-preis small{color:var(--dc-text-45)}

/* ---- 5. Zahlweise: Segmentschalter und Ersparnis ---- */
#produkte .segment{
  background:var(--dc-flaeche);border:1px solid var(--dc-kante-12);border-radius:var(--dc-r-pille);
}
/* KEIN font-size hier. Die Vorlage haette 14px, aber unter 560px setzt
   ap.css 13px auf .segment button, und eine Regel mit Kennung schlaegt
   diese Media-Query. Der Schalter ist dort ein Raster mit
   overflow:hidden, und ap.js misst die Knopfbreite fuer den Laeufer:
   eine halbe Stufe Schriftgroesse ist das Risiko nicht wert. Die
   Grundgroesse 13,5px bleibt also stehen. */
#produkte .segment button{color:var(--dc-text-62)}
#produkte .segment button[aria-selected="true"]{color:var(--dc-bg)}
#produkte .segment-laeufer{background:var(--dc-cyan)}
/* Die Ersparnis behaelt ihre gemessene Breite von 273px und ihre flache
   Bauform: beides haelt das Layout beim Umschalten ruhig. Nur Material
   und Farben kommen aus der Vorlage. */
#produkte .spar-tafel{
  background:var(--dc-flaeche);border:1px solid var(--dc-kante-12);
  border-radius:var(--dc-r-feld);box-shadow:none;
}
#produkte .spar-tafel dt{color:var(--dc-bernstein)}
#produkte .spar-tafel dd span{color:var(--dc-text-62)}
#produkte .spar-tafel dd+dd::before{color:var(--dc-text-45)}
#produkte .spar-tafel dd b{color:var(--dc-text-voll)}

/* ---- 6. Bild und Schaubild neben dem Text ---- */
#produkte .produkt-bild img{
  border:1px solid var(--dc-kante-08);border-radius:var(--dc-r-karte);box-shadow:none;
}
#produkte .mock{
  background:var(--dc-karte-hell);border:1px solid var(--dc-kante-12);
  border-radius:var(--dc-r-karte);box-shadow:none;
}
#produkte .mock-leiste{background:var(--dc-bg-hero);border-bottom-color:var(--dc-kante-08)}
#produkte .mock-leiste i{background:var(--dc-kante-22)}
#produkte .mock-leiste span{color:var(--dc-text-45)}
#produkte .mock-zeile{color:var(--dc-text-62)}
#produkte .mock-kopf{color:var(--dc-text);border-bottom-color:var(--dc-kante-08)}
#produkte .mock-block{border-bottom-color:var(--dc-kante-08)}
#produkte .mock-block b{color:var(--dc-text-voll)}
#produkte .mock-summe{border-top-color:var(--dc-kante-08)}
#produkte .mock-zahlung,#produkte .mock-beleg{border-top-color:var(--dc-kante-08)}
#produkte .mock-klein{color:var(--dc-text-45)}
#produkte .chip{background:var(--dc-flaeche);color:var(--dc-text-62)}
/* Bisher waren beide Kennzeichen gleich eingefaerbt. „Festgeschrieben“
   bekommt das Gruen der Vorlage, die Zahlung das Cyan: zwei Zustaende,
   zwei Farben, gleicher Wortlaut. */
#produkte .chip-gruen{background:var(--dc-gruen-16);color:var(--dc-gruen)}
#produkte .chip-teal{background:var(--dc-cyan-16);color:var(--dc-cyan)}

/* ---- 7. Rechner des Ticketsystems (#ts-rechner) ---- */
/* Flache Flaeche statt tuerkisem Verlauf. grid-template-columns bleibt
   aussen vor: das Umklappen auf eine Spalte unter 860px steht in einer
   Media-Query und wuerde von einer Regel mit Kennung geschlagen. */
#produkte .rechner{
  background:var(--dc-karte);
  border:1px solid var(--dc-kante-08);
  border-radius:var(--dc-r-block);
  padding:var(--dc-block-polster);
  box-shadow:none;
}
#produkte .regler-schiene{background:var(--dc-kante-12)}
#produkte .regler-fuell{background:var(--dc-cyan)}
/* Einzige Ausnahme von „ohne Schlagschatten“: ein Griff ohne jede Tiefe
   sieht auf dem Balken aus wie ein Klecks. rgba(7,15,19,…) ist die
   Grundfarbe var(--dc-bg-hero) mit Deckkraft; ein Schattentoken gibt es
   in der Vorlage nicht, deshalb steht der Wert hier ausgeschrieben. */
#produkte .regler-griff{background:var(--dc-text-voll);box-shadow:0 2px 10px rgba(7,15,19,.55)}
#produkte .regler.zieht .regler-griff{box-shadow:0 4px 18px rgba(7,15,19,.65),0 0 0 8px var(--dc-cyan-16)}
#produkte .regler-wert b{font-size:var(--dc-preis-karte);color:var(--dc-text-voll)}
/* Das Wort „Anwender“ neben der Zahl traegt im Markup ein style-Attribut
   mit color. Inline schlaegt jede Regel, deshalb ist !important hier die
   einzige Moeglichkeit; ohne es bliebe genau diese Stelle im alten Blau
   stehen. Kein Text und kein Attribut aendert sich dadurch. */
#produkte .regler-wert .klein{color:var(--dc-text-62) !important}

/* Modulauswahl unter dem Regler */
#produkte .module{border-top-color:var(--dc-kante-08)}
#produkte .module > .klein{color:var(--dc-text-70)}
#produkte .module .haken-zeile{font-size:var(--dc-text-winzig);color:var(--dc-text-62)}
#produkte .module .haken-zeile input{accent-color:var(--dc-cyan)}
#produkte .module .haken-zeile .klein{color:var(--dc-text-45)}
#produkte .modul-preis{color:var(--dc-cyan)}

/* Empfehlung rechts im Rechner */
#produkte .empfehlung .empf-marke{
  font-size:var(--dc-marke);font-weight:700;letter-spacing:var(--dc-marke-laufweite);color:var(--dc-cyan);
}
#produkte .empfehlung .preis{font-size:var(--dc-preis);color:var(--dc-text-voll)}
#produkte .empfehlung .preis .ab,
#produkte .empfehlung .preis .je{color:var(--dc-text-55)}
#produkte .empfehlung p{font-size:var(--dc-text-klein);color:var(--dc-text-62)}
/* Muss NACH der p-Regel stehen UND ueber die Huelle laufen: „#produkte
   .empfehlung p“ wiegt schwerer als „#produkte .empf-aufschluss“, die
   Aufschluss-Zeile verlor sonst Farbe und ihre kleinere Grundgroesse und
   stand so gross wie der Text daneben. Die Regel
   .empf-aufschluss[hidden]{display:none} bleibt unberuehrt: hier steht
   kein display. */
#produkte .empfehlung .empf-aufschluss{font-size:var(--dc-augenbraue);color:var(--dc-text-55)}

/* ---- 8. Paketkarten (.pakete .preiskarte) ---- */
/* Das Kartenmass der Vorlage: 18px Radius, Polster clamp(24,2.4vw,34),
   Kante .08, keine Lichtkante, kein Schatten. Die Breitenverteilung und
   das subgrid der Reihe bleiben, wie sie sind. */
#produkte .preiskarte{
  background:var(--dc-karte);
  border:1px solid var(--dc-kante-08);
  border-radius:var(--dc-r-karte);
  padding:var(--dc-karte-polster);
  box-shadow:none;
}
/* Die getroffene Stufe muss man sehen: ap.js setzt .aktiv aus dem
   Reglerstand, das ist die einzige Rueckmeldung darauf. var(--dc-karte-hell)
   waere gegen var(--dc-karte) fast kein Unterschied, deshalb die
   Akzentflaeche der Vorlage. */
#produkte .preiskarte.aktiv{border-color:var(--dc-cyan);background:var(--dc-cyan-16)}
#produkte .preiskarte .betrag{font-size:var(--dc-preis-karte);color:var(--dc-text-voll)}
#produkte .preiskarte .betrag span{color:var(--dc-text-55)}
#produkte .preiskarte li{font-size:var(--dc-text-klein);color:var(--dc-text-62)}
#produkte .haken{background:var(--dc-cyan-16);color:var(--dc-cyan)}
/* Das Abzeichen haengt ueber der Karte und war auf das alte feste
   Polster von 28px gesetzt. Mit dem Kartenpolster als Wert fluchtet es
   weiter mit dem Text darunter, auch wenn das Polster mitwaechst. */
#produkte .abzeichen{
  left:var(--dc-karte-polster);
  background:var(--dc-bernstein);color:var(--dc-bg);
  font-size:var(--dc-marke);font-weight:700;letter-spacing:var(--dc-marke-laufweite);
  border-radius:var(--dc-r-pille);padding:4px 11px;
}

/* ---- 9. Die beiden kleinen Produktkarten ---- */
#produkte .karte{
  background:var(--dc-karte);
  border:1px solid var(--dc-kante-08);
  border-radius:var(--dc-r-karte);
  box-shadow:none;
}
/* Nur Flaeche und Kante werden angefasst; das Anheben beim Zeigen bleibt
   in der Grundregel und damit auch die Ausnahme fuer Besucher, die
   weniger Bewegung eingestellt haben. */
#produkte .karte:hover{background:var(--dc-karte-hell);border-color:var(--dc-kante-14)}
#produkte .karte p{font-size:var(--dc-text-klein);color:var(--dc-text-62)}
#produkte .karte-nr{
  font-size:var(--dc-marke);font-weight:700;letter-spacing:var(--dc-marke-laufweite);color:var(--dc-cyan);
}
#produkte .produkt-klein img{border-bottom-color:var(--dc-kante-08)}
#produkte .produkt-klein-text{padding:var(--dc-karte-polster)}

/* ---- 10. Hoher Kontrast ---- */
/* Die bestehende Regel fuer „prefers-contrast: more“ hebt --kante auf .34
   und setzt eine feste Flaeche auf .karte, .preiskarte und .rechner. Sie
   hat weniger Gewicht als die Regeln oben und greift dort nicht mehr.
   Deshalb steht sie hier noch einmal mit der Kennung, und zwar mit
   var(--dc-kante-35): mit einer schwaecheren Kante waere der Abschnitt
   in dieser Einstellung kontrastaermer als vorher. Die Flaechen der
   Vorlage sind ohnehin deckend. */
@media (prefers-contrast:more){
  #produkte .produkt,
  #produkte .rechner,
  #produkte .preiskarte,
  #produkte .karte{background:var(--dc-karte);border-color:var(--dc-kante-35)}
  #produkte .preiskarte.aktiv{border-color:var(--dc-cyan)}
  /* Das !important oben sperrt hier das aufgehellte --text-2 aus, das die
     bestehende Kontrastregel setzt. Deshalb die hellere Stufe, wieder
     mit !important, weil weiter der Inline-Stil dagegensteht. */
  #produkte .regler-wert .klein{color:var(--dc-text-86) !important}
}

/* ----- Sektion: fragen ----- */
/* ============================================================
   14. Fragen: Angleichung an die Vorlage „COMNIC-IT Landingpage"
   ============================================================
   Gilt dem Baustein .frage / .frage-kopf / .frage-blatt, nicht nur dem
   Abschnitt #fragen der Startseite: dieselben Klassen tragen die
   Aufklapper auf zwölf Seiten (Ratgeber, Ticketsystem, Webseiten,
   Kostenvergleich, Standortseiten aus ap-location-page.php). Eine
   Angleichung nur auf #fragen würde den Baustein spalten.

   Vorgabe der Vorlage: Trennlinien --dc-kante-08, Frage 17px/600 weiß,
   Antwort 16px/1.55 in --dc-text-62, Pluszeichen --dc-cyan auf
   --dc-cyan-16 mit voller Rundung.

   Das Auf- und Zuklappen bleibt Sache von ap.js: .frage-blatt behält
   height und overflow unverändert, .zeichen behält transform und
   will-change. Hier wird nur gefärbt und bemaßt.

   Dieser Block gehört ans ENDE des Blattes, hinter Abschnitt 8 und
   hinter die bestehenden Medienabfragen: gleiche Spezifität, die
   spätere Regel gewinnt.
   ============================================================ */

/* Trennlinien. Bisher --kante (rgba(255,255,255,.10)), die Vorlage
   zieht sie eine Spur feiner und in ihrem Grundton. */
.frage{border-bottom:1px solid var(--dc-kante-08)}
.frage:first-child{border-top:1px solid var(--dc-kante-08)}

/* Frage: 17px, halbfett, volles Weiß statt des etwas kühleren --text.
   Laufweite auf 0, wie alle Textgrade der Vorlage: die bisherigen
   -.012em stammen aus dem Apple-Vorbild und ziehen Manrope in dieser
   Größe zu eng zusammen.
   Polsterung und Abstand behalten ihre bisherigen Werte, stehen aber
   jetzt als Token da (22px = --dc-luecke-l, 18px = --dc-luecke-m). */
.frage-kopf{
  gap:var(--dc-luecke-m);
  padding:var(--dc-luecke-l) 4px;
  font-size:var(--dc-text-gross);
  font-weight:600;
  letter-spacing:0;
  color:var(--dc-text-voll);
}
.frage-kopf:hover{color:var(--dc-cyan)}

/* Der Ring aus der Grundeinstellung ist türkis (--teal). In diesem
   Abschnitt ist Cyan die Akzentfarbe, sonst blitzt beim Tabben die alte
   Palette auf. Nur die Farbe, Stärke und Abstand bleiben wie überall. */
.frage-kopf:focus-visible{outline-color:var(--dc-cyan)}

/* Pluszeichen: Cyan auf getönter Cyan-Fläche, volle Rundung, ohne
   eigene Kante. Die Kante wird durchsichtig gesetzt statt entfernt,
   damit die 26px sicher stehen bleiben, egal ob box-sizing später
   einmal anders gesetzt wird. Größe, transform und will-change bleiben
   unberührt, daran hängt die Drehung beim Öffnen. Der Schriftgrad ist
   derselbe wie bisher und steht hier nur als Token. */
.frage-kopf .zeichen{
  background:var(--dc-cyan-16);
  border-color:transparent;
  border-radius:var(--dc-r-pille);
  font-size:var(--dc-text-klein);
  color:var(--dc-cyan);
}

/* Offene Frage bleibt farbig markiert. Gelesen wird aria-expanded, das
   ap.js im Fragen-Baustein bei jedem Klick umschaltet; hier wird nichts
   gesetzt, nur gestaltet. */
.frage-kopf[aria-expanded="true"]{color:var(--dc-cyan)}

/* Antwort: 16px auf 1.55 in --dc-text-62. Der rechte Freiraum von 60px
   bleibt, er hält den Fließtext von der Spalte des Pluszeichens frei.
   Unten 24px auf 22px (--dc-luecke-l) gerundet, damit hier kein Wert
   ohne Token steht. */
.frage-blatt p{
  padding:0 60px var(--dc-luecke-l) 4px;
  font-size:var(--dc-text-basis);
  line-height:1.55;
  color:var(--dc-text-62);
}

/* Schmale Schirme: 60px rechts sind dort fast ein Viertel der Zeile,
   der Antworttext bricht sonst nach wenigen Wörtern um. Das Pluszeichen
   bleibt dabei in jeder Breite in der Zeile der Frage, es hängt an
   margin-left:auto im Flex des Knopfes. Der Antworttext steht als
   eigener Block darunter, neben ihm liegt nichts, das Platz braucht.
   Muss NACH den Grundregeln oben stehen, gleiche Spezifität. Kein
   !important nötig: an .frage-kopf und .frage-blatt p hängt kein
   Inline-Stil. */
@media (max-width:560px){
  .frage-kopf{gap:var(--dc-luecke-s);padding:var(--dc-luecke-m) 2px}
  .frage-blatt p{padding:0 2px var(--dc-luecke-m)}
}

/* Wer mehr Kontrast eingestellt hat, bekam die Trennlinien bisher über
   das dort angehobene --kante kräftiger, nämlich rgba(255,255,255,.34).
   Die Vorlagen-Token kennen diese Anhebung nicht, deshalb hier von Hand
   nachgezogen. Es muss --dc-kante-35 sein, das trifft den bisherigen
   Wert; --dc-kante-22 wäre schwächer als heute und damit ein
   Rückschritt für genau die Nutzer, die mehr Kontrast angefordert
   haben. */
@media (prefers-contrast:more){
  .frage,.frage:first-child{border-color:var(--dc-kante-35)}
}

/* Die Telefonnummer im Kopf des Abschnitts trägt ihre Farbe als
   Inline-Stil im Markup (style="color:var(--teal)"). Ein Inline-Stil
   schlägt jede Regel aus dem Blatt, deshalb ist !important hier der
   einzige Weg, ohne das Markup anzufassen. Sauberer wäre, den
   Inline-Stil zu entfernen; dann kann diese Regel ersatzlos weg (siehe
   Notizen). #fragen gibt es auf acht Seiten, die Eingrenzung grenzt
   also nicht auf die Startseite ein; nachgeprüft ist, dass in keinem
   der anderen Fragen-Abschnitte ein tel:-Link steht, die Regel trifft
   damit nur die eine Stelle. */
#fragen .kopf .lead a[href^="tel:"]{color:var(--dc-cyan) !important}

/* ----- Sektion: kontakt ----- */
/* ============================================================
   14. Kontakt: Abschlussblock und Kontaktkarte
   Angeglichen an die Design-Vorlage „COMNIC-IT Landingpage“.
   Gehoert ans ENDE von ap.css. Mehrere Regeln hier haben dieselbe
   Spezifitaet wie die Grundregeln aus Abschnitt 10 und gewinnen nur,
   weil sie spaeter stehen. Weiter oben eingefuegt wirken sie nicht.
   Der Baustein traegt zwei Seiten: den Abschnitt #kontakt der
   Startseite und /vorschau/starten.php, das dieselben Klassen nutzt.
   ============================================================ */

/* --- Der Block --- */
/* Vorlage: ruhiger Band-Verlauf statt Tuerkis auf Orange, feine Kante,
   groesserer Radius, keine helle Oberkante und kein Schlagschatten.
   Die Vorlage arbeitet in diesem Block nur mit Flaeche und Kante. */
.abschluss{
  background:var(--dc-band-verlauf);
  border-color:var(--dc-kante-08);
  border-radius:var(--dc-r-block);
  padding:var(--dc-block-polster);
  box-shadow:none;
}

/* Vorlage: zwei gleich gewichtete Spalten ab 320 px Mindestbreite,
   oben ausgerichtet. Das min(320px,100%) ist die uebliche Sicherung,
   damit die Spalte auf sehr schmalen Schirmen nicht breiter wird als
   der Platz. */
.abschluss-raster{
  grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));
  gap:var(--dc-luecke-xl);
  align-items:start;
}
/* Wiederholung der bestehenden Regel, absichtlich: die Zeile darueber
   steht ohne Media-Query und haette den einspaltigen Umbruch bei 880 px
   sonst geschluckt. Genau bei 880 px hoert auch das Mitlaufen der
   Kontaktkarte auf, beide Schwellen muessen zusammenbleiben. */
@media (max-width:880px){
  .abschluss-raster{grid-template-columns:minmax(0,1fr)}
}

/* --- Textsatz im Block --- */
/* Die Vorlage setzt hier eine leise Augenbraue, keine gesperrte
   Versalzeile: 13 px, halbfett, ohne Sperrung. Nur in diesem Block,
   .marke bleibt auf der uebrigen Seite wie sie ist. */
.abschluss .marke{
  font-size:var(--dc-augenbraue);
  font-weight:500;
  letter-spacing:0;
  text-transform:none;
  color:var(--dc-text-70);
}
/* Die Ueberschrift des Abschlusses ist in der Vorlage der kleinere der
   beiden H2-Grade. Zeilenabstand, Gewicht und Farbe stehen schon in .d2. */
.abschluss .d2{font-size:var(--dc-h2-klein)}

/* --- Formular ---
   Flaeche, Rand, Radius, Polsterung und Beschriftung der Felder liegen
   seit Etappe 1 auf den Tokens und treffen die Vorlage bereits. Hier
   kommen nur die Zustaende und der Knopf dazu. */

/* Fehlerfarbe auf den Bernstein der Vorlage; das alte #FFB169 stammt
   aus der vorherigen Palette. Nur die Farbe: das Ein- und Ausblenden
   der Meldung bleibt unberuehrt. */
.fehler{color:var(--dc-bernstein)}
.feld.hat-fehler input,
.feld.hat-fehler textarea,
.feld.hat-fehler select{border-color:var(--dc-bernstein)}

/* Einwilligungszeile auf die Tokens der Vorlage. */
.haken-zeile{font-size:var(--dc-text-winzig);color:var(--dc-text-62)}
.haken-zeile input{accent-color:var(--dc-cyan)}
.haken-zeile a{color:var(--dc-cyan)}

/* Vorlage: der Senden-Knopf ist weiss mit dunkler Schrift, nicht cyan.
   Groesse, Polsterung und Radius stimmen schon ueber .knopf und .knopf-voll.
   Die Klasse im Markup bleibt .knopf-voll, deshalb nur ueberschrieben und
   nur im Kontaktformular. Achtung: dieser Selektor ist spezifischer als
   .knopf-voll:hover, darum muss der Hover-Zustand hier neu gesetzt werden,
   sonst faellt er ersatzlos aus. */
#kontaktForm .knopf-voll{
  background:var(--dc-text-voll);
  color:var(--dc-bg);
  border-color:var(--dc-text-voll);
}
#kontaktForm .knopf-voll:hover{
  background:#E4ECF4; /* dieselbe Aufhellung wie bei .knopf-weiss, dafuer gibt es kein Token */
  color:var(--dc-bg);
}

/* Rueckmeldezeile unter dem Knopf: 14 px, zurueckgenommen.
   Gut und schlecht auf Gruen und Bernstein der Vorlage. */
.form-stand{font-size:var(--dc-text-winzig);color:var(--dc-text-55)}
.form-stand.gut{color:var(--dc-gruen)}
.form-stand.schlecht{color:var(--dc-bernstein)}

/* --- Kontaktkarte daneben --- */
/* Vorlage: sehr leise Flaeche, feine Kante, Radius 18, Kartenpolster.
   Ohne helle Oberkante und ohne Milchglas, wie der Block darum herum.
   Das Mitlaufen beim Scrollen (sticky) und der Abstand von 26 px
   zwischen den drei Angaben bleiben, wie sie sind. */
.kontaktkarte{
  background:rgba(232,240,243,.04); /* Wert der Vorlage, als Token nicht vorhanden: --dc-flaeche ist .06 */
  border-color:var(--dc-kante-09);
  border-radius:var(--dc-r-karte);
  padding:var(--dc-karte-polster);
  box-shadow:none;
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
/* Ueberschrift je Angabe: 12 px, gesperrt, fett, in Cyan.
   Der Abstand nach unten bleibt bei den 8 px aus Abschnitt 10. */
.kontaktkarte .karte-nr{
  font-size:var(--dc-marke);
  font-weight:700;
  letter-spacing:var(--dc-marke-laufweite);
  color:var(--dc-cyan);
}
/* Nur die Farbe: der Schriftgrad bleibt der bestehende clamp aus
   Abschnitt 10. Ein eigener clamp waere ein Grad ausserhalb der Tokens
   und haette am oberen Ende nur 1 px Unterschied gebracht. */
.kontaktkarte .tel{color:var(--dc-cyan)}
.kontaktkarte .mail{font-size:var(--dc-text-gross);color:var(--dc-text)}

/* --- Erhoehter Kontrast ---
   Muss NACH allen Regeln oben stehen, sonst ueberstimmen diese den
   Kontrastmodus. Zwei Dinge sind hier nachzuziehen:
   1. Die deckende Flaeche aus Abschnitt 12, sonst gewinnt der Verlauf.
      Der Wert bleibt bewusst #131C27 wie bisher. --dc-karte waere
      dunkler und damit naeher am Seitengrund, also weniger Kontrast.
   2. Die Rahmen: Abschnitt 12 hebt --kante auf rgba(255,255,255,.34) an.
      Weil beide Bausteine oben eine feste Kantenfarbe bekommen, ginge
      diese Verstaerkung verloren. Hier also zurueck auf var(--kante). */
@media (prefers-contrast:more){
  .abschluss{
    background:#131C27; /* unveraendert aus Abschnitt 12, dafuer gibt es kein Token */
    border-color:var(--kante);
  }
  .kontaktkarte{border-color:var(--kante)}
}

/* ----- Sektion: fuss ----- */
/* ============================================================
   Seitenfuß, Neuordnung vom 29.09.2026 (Inhaber: „moderner, ordentlicher").

   Aufbau von oben nach unten:
     1. .fuss-raster    Marke mit Telefon, darunter die vier Linkspalten.
     2. .fuss-zeile     © und Anschrift, Rechtliches, Vorschau-Hinweis.
   Eine eigene grüne Kontaktfläche im Fuß war nicht gewollt (Inhaber,
   29.09.2026); der Kontaktbereich steht auf der Startseite.

   Alle Regeln des Fußes stehen NUR hier. Die älteren Blöcke (Grundregeln
   bei „Seitenfuß", Berührungsziele bei 860px, Angleichung Etappe 2) sind
   in diesen Block aufgegangen. Geblieben ist oben nur die allgemeine
   .fuss-kopf-Regel, weil Ratgeber (.tocbox), AGB und Datenschutz sie
   außerhalb des Fußes nutzen. Deshalb heißen die Spaltenköpfe hier
   .fuss-titel und greifen nicht auf .fuss-kopf zurück.

   Keine Inline-Stile im Markup: Media-Queries können sie nicht schlagen.
   Jeder Link setzt seine Hover-Farbe selbst.
   ============================================================ */
.fuss-bereich{
  margin-top:clamp(60px,8vw,110px);
  padding:clamp(40px,5vw,64px) 0 clamp(28px,3vw,40px);
  background:var(--dc-bg-fuss);
  border-top:1px solid var(--dc-kante-08);
  color:var(--dc-text-78);
}

/* 1. Marke und Linkspalten. Links Logo, Text und Telefon untereinander,
   rechts die vier Linkspalten (Inhaber, 29.09.2026: Logo nicht allein
   über den Spalten). Ab 980px stehen Marke und Spalten untereinander. */
.fuss-raster{
  display:grid;
  grid-template-columns:minmax(220px,1fr) minmax(0,3fr);
  gap:clamp(28px,4vw,56px);
  align-items:start;
}
.fuss-marke{
  display:flex;flex-direction:column;align-items:flex-start;
  gap:14px;
  min-width:0;
}
.fuss-logo{height:26px;width:auto}
.fuss-text{
  margin:0;
  max-width:34ch;
  font-size:var(--dc-text-klein);
  line-height:1.6;
  color:var(--dc-text-62);
}
.fuss-ruf{
  display:flex;flex-direction:column;gap:2px;
  margin:0;
  font-size:var(--dc-text-winzig);
  color:var(--dc-text-62);
}
.fuss-tel{
  font-size:var(--dc-text-basis);
  font-weight:600;
  color:var(--dc-text);
  text-decoration:none;
}
.fuss-tel:hover{color:var(--dc-gruen);text-decoration:underline;text-underline-offset:3px}
.fuss-spalten{
  display:grid;
  /* Spalten so breit wie ihr längster Link, Rest als Abstand: bei gleich
     breiten Vierteln brach „IT-Service Oranienburg" in zwei Zeilen. */
  grid-template-columns:repeat(4,max-content);
  justify-content:space-between;
  gap:32px 24px;
}
.fuss-spalte{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0}
.fuss-titel{
  margin:0 0 8px;
  font-size:var(--dc-marke);
  font-weight:700;
  letter-spacing:var(--dc-marke-laufweite);
  text-transform:uppercase;
  color:var(--dc-text-55);
}
.fuss-spalte a{
  padding:4px 0;
  font-size:var(--dc-text-klein);
  line-height:1.4;
  color:var(--dc-text-78);
  transition:color .16s ease-out;
}
.fuss-spalte a:hover{color:var(--dc-cyan)}
/* Nur für Vorleseprogramme: „öffnet neues Fenster" bei Links nach draußen. */
.fuss-leise{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.fuss-extern{display:inline-block;margin-left:3px;font-size:.85em;opacity:.7}

/* 3. Schlusszeile: links © und Anschrift, in der Mitte Rechtliches, rechts
   der Vorschau-Hinweis. Bricht auf schmalen Schirmen untereinander. */
.fuss-zeile{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:10px 24px;
  margin-top:clamp(36px,4vw,56px);
  padding-top:22px;
  border-top:1px solid var(--dc-kante-08);
  font-size:var(--dc-text-winzig);
  color:var(--dc-text-55);
}
.fuss-copy{margin:0}
.fuss-recht{display:flex;flex-wrap:wrap;gap:4px 20px}
.fuss-recht a{padding:4px 0;color:var(--dc-text-78);transition:color .16s ease-out}
.fuss-recht a:hover{color:var(--dc-cyan)}
.fuss-hinweis{
  margin:0;
  padding:4px 10px;
  border:1px solid rgba(242,162,60,.4);
  border-radius:var(--dc-r-pille);
  color:var(--dc-orange);
  font-size:var(--dc-marke);
  font-weight:600;
}

/* Tablet: drei gleich breite Wege, Linkspalten zu zweit. */
@media (max-width:980px){
  .fuss-raster{grid-template-columns:minmax(0,1fr)}
  .fuss-spalten{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 24px}
}
@media (max-width:720px){
  .fuss-spalten{gap:28px 20px}
  /* Berührungsziele: mindestens rund 40px Höhe je Link. */
  .fuss-spalte a,.fuss-recht a{padding:9px 0}
  .fuss-zeile{flex-direction:column;align-items:flex-start;gap:12px}
}
@media (max-width:340px){
  .fuss-spalten{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .fuss-spalte a,.fuss-recht a{transition:none}
}

/* ----- Sektion: bausteine ----- */
/* ============================================================
   14. Geteilte Bausteine an die Vorlage angeglichen (Etappe 2)
   ============================================================
   Blatt, Fenster, Zitat, Abschlussband, Brotkrumen, Prosa, Logo-Band
   und Schleier laufen ab hier auf den --dc-*-Tokens der Vorlage
   „COMNIC-IT Landingpage".

   Flächenlogik der Vorlage, einmal für alle Bausteine hier:
     Fläche      var(--dc-karte) bzw. var(--dc-flaeche)
     Kante       var(--dc-kante-08) bis var(--dc-kante-12)
     Radius      var(--dc-r-karte) für Karten, var(--dc-r-block) für Blöcke
     Überschrift var(--dc-text-voll), Gewicht 600
     Fließtext   var(--dc-text-62)
     Nebentext   var(--dc-text-45)
     Akzent      var(--dc-cyan), Zustimmung var(--dc-gruen)

   Dieser Block gehört ans ENDE von ap.css. Er lebt davon, später zu
   stehen als Abschnitt 9, 10 und 13: gleiche Spezifität, spätere Regel
   gewinnt. Deshalb kommt kein !important vor. Wer ihn nach vorn
   schiebt, dreht die Wirkung wieder ab.
   ============================================================ */

/* ---- Schleier unter dem Blatt ----
   Nur die Farbe wird angefasst. Unschärfe und Deckkraft bewegt ap.js,
   die stehen hier bewusst nicht drin.
   color-mix statt eines neuen Hex-Werts: --dc-bg-hero ist der Grund der
   Vorlage. Kennt ein Browser color-mix nicht, fällt die Zeile aus und es
   bleibt beim rgba(4,8,13,.55) der Grundregel, also beim Bisherigen. */
.schleier{
  background:color-mix(in srgb, var(--dc-bg-hero) 62%, transparent);
}

/* ---- Blatt von unten ----
   Fläche der Vorlage mit etwas Durchlass, damit das Glas hinter dem
   Blatt noch trägt. transform, max-height und position bleiben
   unberührt: die gehören der Ziehgeste in ap.js. Die Kante bleibt 1px
   breit, damit die Höhenmessung blatt.offsetHeight gleich bleibt. */
.blatt{
  background:color-mix(in srgb, var(--dc-karte) 88%, transparent);
  border-top:1px solid var(--dc-kante-18);
  border-radius:var(--dc-r-block) var(--dc-r-block) 0 0;
}
/* Pflicht-Wiederholung, kein Versehen: Abschnitt 9 setzt den Radius für
   breite Schirme in einer Media-Query (min-width:720px). Die steht weiter
   oben, unsere Regel ohne Media-Query würde sie sonst stillschweigend
   überschreiben. Beide Wege tragen jetzt denselben Token. */
@media (min-width:720px){
  .blatt{border-radius:var(--dc-r-block) var(--dc-r-block) 0 0}
}
.blatt-kopf .strich{background:var(--dc-kante-35)}
.blatt-inhalt p{
  color:var(--dc-text-62);
  font-size:var(--dc-text-basis);
  line-height:1.66;
}
/* Gruppenüberschrift im Blatt in der Marken-Typografie der Vorlage. */
.blatt-gruppe{
  font-size:var(--dc-marke);
  font-weight:700;
  letter-spacing:var(--dc-marke-laufweite);
  color:var(--dc-cyan);
}
.blatt-liste li{
  color:var(--dc-text-62);
  font-size:var(--dc-text-klein);
}
.blatt-liste li::before{background:var(--dc-cyan)}
.blatt-fuss{
  border-top:1px solid var(--dc-kante-08);
  background:var(--dc-flaeche);
}

/* ---- Fenster: Bild oder Video mit Titelzeile ---- */
.fenster{
  border:1px solid var(--dc-kante-12);
  border-radius:var(--dc-r-karte);
  background:var(--dc-karte);
}
/* Die Lücke von 10px steht schon im Baustein, sie wird hier nicht
   wiederholt: eine Zeile, die nichts ändert, verschleiert beim nächsten
   Lesen, was dieser Block wirklich tut.
   Die Farbe ist --dc-text-62 und nicht der Nebentext --dc-text-45:
   .45 ergibt auf --dc-bg-hero nur rund 4,1:1 und bliebe damit unter den
   geforderten 4,5:1. Heute steht hier --text-3 mit rund 5,2:1, die
   Titelzeile darf dabei nicht verlieren. --dc-text-62 bringt rund 6,8:1. */
.fenster-kopf{
  background:var(--dc-bg-hero);
  border-bottom:1px solid var(--dc-kante-08);
  font-size:var(--dc-marke);
  font-weight:700;
  letter-spacing:var(--dc-marke-laufweite);
  color:var(--dc-text-62);
}
/* Das Lämpchen sagt „läuft", deshalb Grün und nicht Türkis. Der Schein
   muss MIT umgehängt werden: der Baustein setzt an dieser Stelle
   box-shadow:0 0 8px rgba(47,211,201,.8), also Türkis. Solange die
   Animation läuft, deckt sie den Wert zu; sobald sie steht, etwa bei
   weniger Bewegung, käme der türkise Schein um einen grünen Punkt
   zurück. */
.fenster-kopf .punkt{
  background:var(--dc-gruen);
  box-shadow:0 0 8px var(--dc-gruen);
}
/* Eigener Puls, weil @keyframes puls ein türkises box-shadow animiert und
   eine Animation jede normale box-shadow-Angabe schlägt. Ohne diesen
   Ring pulste Türkis um einen grünen Punkt. Nur hier umgehängt, der
   Punkt in der Bühne und in der Markenzeile behält seinen Puls. */
@keyframes dc-puls-gruen{
  0%{box-shadow:0 0 0 0 var(--dc-gruen-16)}
  70%{box-shadow:0 0 0 9px rgba(166,206,57,0)}   /* --dc-gruen, ausgelaufen */
  100%{box-shadow:0 0 0 0 rgba(166,206,57,0)}
}
.fenster-kopf .punkt{animation-name:dc-puls-gruen}

/* KI-Kennzeichnung: Pflichtangabe nach Art. 50 Abs. 4 KI-Verordnung.
   Sie wird hier GRÖSSER und heller, nicht kleiner: 12px statt 9,5px und
   .78 statt .66. Der Schatten bleibt, sie liegt auf wechselnden Motiven.
   Position, z-index und white-space bleiben unberührt, damit die
   Sonderstellung in der Bühne (.buehne-ki) weiter greift; die setzt nur
   top, right, bottom und z-index, die größere Schrift gilt dort also
   ebenfalls, und das ist bei einer Pflichtangabe richtig so. */
.fenster-ki{
  font-size:var(--dc-marke);
  color:var(--dc-text-78);
}

/* ---- Zitat ----
   Vorlage kennt keine getönten Verläufe für Zitate: eine ruhige Fläche
   mit Kante, der Satz selbst trägt. */
.zitat{
  padding:var(--dc-karte-polster);
  border-radius:var(--dc-r-block);
  background:var(--dc-karte);
  border:1px solid var(--dc-kante-12);
  /* Ohne Schlagschatten und ohne helle Oberkante: die Vorlage arbeitet
     mit Flächen und Kanten. */
  box-shadow:none;
}
.zitat p{
  font-size:var(--dc-lead);
  color:var(--dc-text-86);
}
.zitat footer{
  font-size:var(--dc-text-winzig);
  color:var(--dc-text-45);
}
.zitat footer b{
  color:var(--dc-text-78);
  font-size:var(--dc-text-klein);
  font-weight:600;
}

/* ---- Abschlussband ----
   Zwei Bauformen, eine Sprache: .abschluss auf Startseite und
   Registrierung, .cta-band auf den Unterseiten. Fläche, Kante und Radius
   teilen sie sich, das Polster NICHT: .abschluss hat heute
   clamp(38px,6vw,72px) und trägt das Kontaktformular, --dc-block-polster
   würde es bei 1120px von 72px auf rund 34px zusammenziehen. Der Token
   passt zu .cta-band, dort steht heute fast derselbe Wert. Einen
   größeren Block-Token gibt es in der Vorlage nicht, also bleibt das
   Polster von .abschluss unangetastet. */
.abschluss,
.cta-band{
  border-radius:var(--dc-r-block);
  border:1px solid var(--dc-kante-12);
  background:var(--dc-band-verlauf);
  box-shadow:none;
}
.cta-band{
  padding:var(--dc-block-polster);
  gap:var(--dc-luecke-xl);
}
.cta-band .knopf-reihe{gap:var(--dc-luecke-s)}

/* ---- Brotkrumen ---- */
.brotkrumen{
  gap:var(--dc-luecke-s);
  margin-bottom:var(--dc-luecke-m);
  font-size:var(--dc-text-winzig);
  color:var(--dc-text-45);
}
.brotkrumen a{color:var(--dc-text-62)}
.brotkrumen a:hover{color:var(--dc-cyan)}
.brotkrumen span[aria-current]{color:var(--dc-text-45)}

/* ---- Prosa: Ratgeber, Recht, lange Erklärungen ----
   Kein margin und kein max-width von hier: mehrere Seiten setzen beides
   als Inline-Stil am Element (siehe Notizen). Was hier stünde, verlöre
   dort ohnehin. */
.prosa{
  font-size:var(--dc-text-gross);
  line-height:1.68;
  color:var(--dc-text-62);
}
.prosa h2,
.prosa h3{
  color:var(--dc-text-voll);
  font-weight:600;
}
/* Zwischen den beiden muss eine Stufe bleiben. --dc-h3 und --dc-h3-klein
   liegen nur zwei Pixel auseinander, bei gleichem Gewicht sieht man den
   Unterschied nicht mehr. Die zweite Ebene bekommt deshalb --dc-lead:
   18px steht klar unter 25px und immer noch über dem Fließtext. */
.prosa h2{font-size:var(--dc-h3)}
.prosa h3{font-size:var(--dc-lead)}
.prosa strong,
.prosa b{color:var(--dc-text-86);font-weight:600}
.prosa a{
  color:var(--dc-cyan);
  text-decoration-color:var(--dc-cyan);
  text-decoration-thickness:1px;
}
.prosa a:hover{text-decoration-thickness:2px}
.prosa ul li::before{background:var(--dc-cyan)}
.prosa ol li::before{
  background:var(--dc-cyan-16);
  color:var(--dc-cyan);
}
.prosa blockquote{
  border-left:2px solid var(--dc-cyan);
  background:var(--dc-flaeche);
  border-radius:0 var(--dc-r-karte) var(--dc-r-karte) 0;
  color:var(--dc-text-86);
  font-size:var(--dc-lead);
}
.prosa figure img{
  border-radius:var(--dc-r-karte);
  border:1px solid var(--dc-kante-12);
}
.prosa figcaption{
  font-size:var(--dc-text-winzig);
  color:var(--dc-text-45);
}

/* ---- Logo-Band ----
   Der helle Grund bleibt, und zwar aus demselben Grund wie bei der
   Bühnenleiste: die Kundenlogos sind teils feine Strichzeichnungen,
   teils haben sie weiße Flächen. Auf dunklem Grund kippt jedes zweite.
   Angeglichen werden nur Radius und Polster. Eine --dc-kante-* wäre auf
   Hell unsichtbar, deshalb steht hier keine. */
.logo-band{
  border-radius:var(--dc-r-block);
  padding:var(--dc-block-polster);
  gap:var(--dc-luecke-l);
}

/* ---- Systemeinstellungen des Besuchers, nachgezogen ----
   Abschnitt 12 steht VOR diesem Block. Ohne diese Wiederholung hätten
   die Regeln oben die Ausnahmen für weniger Bewegung, weniger
   Transparenz und mehr Kontrast wieder aufgehoben, ohne dass es jemandem
   auffällt. */

/* Weniger Bewegung: .punkt{animation:none} aus Abschnitt 12 hat nur
   Spezifität (0,1,0) und verliert gegen .fenster-kopf .punkt (0,2,0)
   weiter oben. Ohne diese Zeile bekäme der Punkt seinen Animationsnamen
   zurück, obwohl der Besucher weniger Bewegung eingestellt hat. */
@media (prefers-reduced-motion:reduce){
  .fenster-kopf .punkt{animation-name:none}
}
@media (prefers-reduced-transparency:reduce){
  .blatt{background:var(--dc-karte);backdrop-filter:none;-webkit-backdrop-filter:none}
}
/* Mehr Kontrast: Abschnitt 12 hebt dort --text-2, --text-3 und --kante an.
   Die --dc-*-Tokens hebt niemand an, deshalb muss hier JEDE Stelle stehen,
   die vorher von dieser Anhebung gelebt hat, die Kanten eingeschlossen. */
@media (prefers-contrast:more){
  .abschluss,
  .cta-band,
  .zitat{background:var(--dc-karte)}
  .abschluss,
  .cta-band,
  .zitat,
  .fenster{border-color:var(--dc-kante-35)}
  .blatt{border-top-color:var(--dc-kante-35)}
  .blatt-fuss{border-top-color:var(--dc-kante-35)}
  .fenster-kopf{border-bottom-color:var(--dc-kante-35)}
  .brotkrumen,
  .prosa,
  .blatt-inhalt p,
  .blatt-liste li{color:var(--dc-text-86)}
  .brotkrumen a,
  .brotkrumen span[aria-current],
  .zitat footer,
  .prosa figcaption,
  .fenster-kopf{color:var(--dc-text-78)}
  .zitat footer b,
  .fenster-ki{color:var(--dc-text-voll)}
}

/* ----- Nachlese 12.09.2026 (im Browser gemessen) ----- */
/* 1. Schmale Schirme: die Fakten-Zeile stiess ohne Abstand an den Kopf des
      Bandes (gemessen 0px). Die Bühne steht dort oben angeschlagen, deshalb
      traegt der Bandkopf die Luft, nicht der Inhalt darüber. */
@media (max-width:720px){
  .buehne-karte .buehne-fuss-kopf{padding-top:26px}
}
/* 2. Der kleine Punkt vor Augenbrauen und im Band stand noch im alten Tuerkis
      samt tuerkisem Puls. @keyframes puls animiert eine feste Farbe, deshalb
      braucht die Vorlagenfarbe einen eigenen Puls. Gruen gibt es schon als
      dc-puls-gruen fuer den Fensterkopf; hier ist es das Cyan der Vorlage. */
@keyframes dc-puls-cyan{
  0%{box-shadow:0 0 0 0 rgba(62,198,232,.45)}
  70%{box-shadow:0 0 0 9px rgba(62,198,232,0)}
  100%{box-shadow:0 0 0 0 rgba(62,198,232,0)}
}
.punkt{background:var(--dc-cyan);box-shadow:0 0 0 0 rgba(62,198,232,.5);animation-name:dc-puls-cyan}
/* Wer weniger Bewegung angefordert hat, bekommt sie auch hier nicht: die
   Regel in Abschnitt 12 hat dieselbe Spezifitaet und steht weiter oben. */
@media (prefers-reduced-motion:reduce){
  .punkt{animation-name:none}
}
/* 3. Kartennummern, Zahlen-Baustein und Vergleichstabelle trugen ausserhalb
      der Startseite noch das alte Tuerkis. Die Vorlage kennt fuer Nummern und
      hervorgehobene Zahlen das Cyan (#3EC6E8), siehe Leistungskarten. */
.karte-nr{color:var(--dc-cyan)}
.zahl.b .wert{color:var(--dc-cyan)}
.preis-marke{color:var(--dc-cyan);background:var(--dc-cyan-16)}
.chip-gruen,.chip-teal{background:var(--dc-cyan-16);color:var(--dc-cyan)}
.blatt-gruppe{color:var(--dc-cyan)}
.blatt-liste li::before{background:var(--dc-cyan)}
.haken-zeile a{color:var(--dc-cyan)}
.haken-zeile input{accent-color:var(--dc-cyan)}
.form-stand.gut{color:var(--dc-cyan)}
.frage-kopf:hover{color:var(--dc-cyan)}
:focus-visible{outline-color:var(--dc-cyan)}
/* 4. Summenzeile der Vergleichstabelle: die Flaeche war das alte Tuerkis bei
      8 Prozent. Dieselbe Deckkraft im Cyan der Vorlage; ein Token gibt es nur
      fuer 16 Prozent (--dc-cyan-16), deshalb hier ausgeschrieben. */
.tabelle .summe td{background:rgba(62,198,232,.08)}
/* 5. Letzte Tuerkis-Reste ausserhalb der Startseite: der Weiter-Pfeil der
      Karten (gilt auch auf /produkte, /software, /webseiten) und der
      Info-Kasten. Beide bekommen das Cyan der Vorlage. Die Deckkraft .07 und
      .28 des Kastens gibt es nicht als Token, deshalb ausgeschrieben. */
.tuer .weiter{color:var(--dc-cyan)}
.info{background:rgba(62,198,232,.07);border-color:rgba(62,198,232,.28)}

/* ----- Nachbau der Vorlage: Ueberschriften, Abzeichen, Laufband (12.09.2026) --- */
/* 1. Zweite Zeile der Ueberschriften in Gruen, gleiche Groesse wie die erste.
      Die Vorlage macht das bei Buehne, Leistungen, Warum wir, Preise und
      Kontakt. Die alte Fassung von .d1 .zweite war kleiner und grau. */
.d1 .zweite,.d2 .zweite{
  display:block;margin-top:0;font-size:1em;letter-spacing:inherit;color:var(--dc-gruen);
}
.gruen{color:var(--dc-gruen)}

/* 2. Kennzeichnung als runde Marke oben rechts, wie das Abzeichen der Vorlage.
      Der Wortlaut bleibt „KI-generiert“: die Abkuerzung „AI“ sagt nicht, dass
      der Inhalt kuenstlich erzeugt wurde, und genau das verlangt Art. 50
      Abs. 4 KI-VO. Form und Platz sind aus der Vorlage uebernommen. */
.buehne-ki{
  top:clamp(84px,11vh,110px);right:clamp(12px,2vw,20px);bottom:auto;z-index:4;
  display:inline-flex;align-items:center;
  padding:7px 13px;border-radius:var(--dc-r-pille);
  background:rgba(7,15,19,.6);border:1px solid var(--dc-kante-18);
  font-size:9.5px;font-weight:700;letter-spacing:.1em;
  color:var(--dc-text-78);text-shadow:none;
}

/* 3. Band unten: dunkel wie die Vorlage statt heller Leiste, und die Logos
      laufen als Streifen durch. Die Logos bleiben in hellen Kacheln: sie
      vertragen weder flaechiges Weiss noch Umkehrung (gemessen 12.09.2026,
      Hinderlich ist eine feine Strichzeichnung, Camp & Event hat weisse
      Flaechen). Die Kachel ist der Kompromiss, der die Vorlage trifft und
      die Logos lesbar haelt. */
.buehne-karte .buehne-leiste{
  background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;
  border-top:1px solid var(--dc-kante-14);
  padding:16px var(--buehne-innen) 20px;
  gap:clamp(14px,2vw,32px);
}
.buehne-logos-fenster{
  flex:1;min-width:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
/* Die Liste steht zweimal im Markup, deshalb ist der halbe Weg genau eine
   Runde: bei -50% sieht das Bild aus wie am Anfang, der Sprung faellt nicht auf. */
@keyframes dc-laufband{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.buehne-karte .buehne-logos{
  display:flex;width:max-content;flex:none;justify-content:flex-start;
  gap:clamp(20px,2.6vw,44px);margin:0;padding:0;overflow:visible;
  -webkit-mask-image:none;mask-image:none;
  animation:dc-laufband 32s linear infinite;
}
.buehne-logos a{
  flex:none;background:rgba(232,240,243,.94);border-radius:var(--dc-r-knopf);
  padding:9px 16px;
}
.buehne-logos img{width:auto;max-width:150px;height:26px;filter:grayscale(1) contrast(1.2);opacity:.9}
.buehne-logos a:hover img{filter:none;opacity:1}
/* Wer weniger Bewegung angefordert hat, bekommt den Streifen stehend und
   zum Schieben. Ohne diesen Nachtrag liefe er dort weiter. */
@media (prefers-reduced-motion:reduce){
  .buehne-karte .buehne-logos{animation:none}
  .buehne-logos-fenster{overflow-x:auto}
}
@media (max-width:720px){
  .buehne-karte .buehne-leiste{padding:14px var(--buehne-innen) 18px}
  .buehne-karte .buehne-logos{margin:0;padding:0;scroll-padding-inline:0}
}
/* 4. Nachtrag: .buehne .d1 .zweite (0,3,0) aus dem alten Buehnen-Abschnitt
      schlaegt .d1 .zweite (0,2,0), die zweite Zeile blieb deshalb grau.
      Gleiche Spezifitaet, spaetere Stellung, jetzt gewinnt Gruen. */
.buehne .d1 .zweite,.buehne-karte .d1 .zweite{color:var(--dc-gruen);font-size:1em;margin-top:0}
/* 5. Korrektur 12.09.2026: die hellen Kacheln unter den Logos sahen schlecht
      aus (verschieden breite weisse Kaestchen). Jetzt wie in der Vorlage ohne
      Kachel auf dunklem Grund. brightness(0) invert(1) macht aus jeder
      Zeichnung eine helle Marke, unabhaengig von ihrer Originalfarbe. */
.buehne-logos a{background:none;border-radius:0;padding:0}
.buehne-logos img{
  width:auto;max-width:160px;height:30px;
  filter:grayscale(1) brightness(0) invert(1);opacity:.62;
  transition:opacity .2s ease-out;
}
.buehne-logos a:hover img{filter:grayscale(1) brightness(0) invert(1);opacity:1}
/* 6. Folgefehler des dunklen Bandes: der Knopf „Alle Referenzen“ trug noch die
      dunkle Fassung fuer die frueher helle Leiste und stand dunkel auf dunkel.
      Zurueck auf die helle Fassung der Vorlage (Rand .35, weisse Schrift). */
.buehne-leiste .knopf-rahmen{border-color:var(--dc-kante-35);color:var(--dc-text)}
.buehne-leiste .knopf-rahmen:hover{background:var(--dc-flaeche);color:var(--dc-text-voll)}
/* 7. Seitlicher Ueberlauf auf schmalen Schirmen (gemessen: 394 statt 390 px):
      .schiene-rahmen zog mit festen -24px ueber die Huelle hinaus. Deren
      Polster kommt seit Etappe 1 aus --dc-rand und ist schmal nur 20px.
      Jetzt rechnet der Rahmen mit demselben Wert. */
.schiene-rahmen{margin-inline:calc(-1 * var(--dc-rand));padding-inline:var(--dc-rand)}
/* 8. Endlos-Band: die Liste steht jetzt viermal im Markup, deshalb ist eine
      Runde ein Viertel der Breite. Bei -50% war rechts eine Luecke zu sehen,
      weil eine einzelne Runde schmaler ist als das Fenster. */
@keyframes dc-laufband{from{transform:translateX(0)}to{transform:translateX(-25%)}}
.buehne-karte .buehne-logos{animation-duration:44s}
/* 9. Endlos-Band, zweiter Anlauf: acht Runden im Markup, die Bewegung laeuft
      die halbe Breite. Damit sind vier Runden (rund 2210px) unterwegs, das
      fuellt auch einen 2040px breiten Schirm ohne Luecke. */
@keyframes dc-laufband{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.buehne-karte .buehne-logos{animation-duration:64s}
/* Logos: gleiche optische Groesse statt gleicher Hoehe. Quadratische Marken
   wie „Praxis UrSprung“ wirken bei gleicher Hoehe winzig neben breiten
   Schriftzuegen, deshalb duerfen sie hoeher werden. */
.buehne-logos img{height:auto;max-height:32px;max-width:148px;width:auto}
.buehne-logos img[src*="praxis"]{max-height:44px}
.buehne-logos img[src*="camp-event"]{max-height:38px}
.buehne-logos img[src*="trinz"]{max-height:36px}
/* 10. Der Kopf des Preisblocks wanderte beim Ziehen des Reglers: das Raster
       richtet seine Spalten mittig aus, und sobald der Empfehlungstext rechts
       laenger oder kuerzer wird, rutscht die linke Spalte mit. Beide Spalten
       stehen jetzt oben, und der Hinweistext haelt eine Mindesthoehe frei,
       genau wie in der Vorlage (dort min-height 72px am Text). */
.rechner{align-items:start}
.empfehlung .empf-text{min-height:72px}
/* 11. Die Knoepfe in den Preiskarten standen unterschiedlich hoch (gemessen
       455, 379 und 433px), weil sie direkt an der Hakenliste hingen und die
       Listen verschieden lang sind. Die Vorlage schiebt den Knopf ans
       Kartenende (margin-top:auto), dann fluchten sie ueber alle Karten.
       Gilt auch fuer die Paketkarten des Ticketsystems. */
.preiskarte .knopf{margin-top:auto;padding-top:16px;padding-bottom:16px}
.preiskarte ul{margin-bottom:26px}
/* 12. Hero heller (Inhaber, 12.09.2026). Nicht die Bilddatei wird veraendert,
       sondern die beiden Schleier darueber werden schwaecher. Unten bleibt der
       Verlauf kraeftig, sonst steht der Text des Bandes im Bild. Links bleibt
       genug Deckung, damit Ueberschrift und Absatz lesbar sind. */
.buehne-karte .buehne-schleier{
  background:
    linear-gradient(180deg,rgba(7,15,19,.58) 0%,rgba(7,15,19,.20) 30%,rgba(7,15,19,.52) 72%,rgba(7,15,19,.95) 100%),
    linear-gradient(95deg,rgba(7,15,19,.82) 0%,rgba(7,15,19,.55) 36%,rgba(7,15,19,.12) 76%,rgba(7,15,19,0) 100%);
}
@media (max-width:720px){
  .buehne-karte .buehne-schleier{
    background:linear-gradient(180deg,rgba(7,15,19,.52) 0%,rgba(7,15,19,.40) 45%,rgba(7,15,19,.86) 100%);
  }
}
/* 13. Kennzeichnung als Kreis wie in der Vorlage (dort 30px, Rand .18, Flaeche
       rgba(7,15,19,.6)), daneben das Wort „generiert“. Die Pille von vorher
       faellt damit weg: kein eigener Hintergrund, kein Rahmen am Aeusseren. */
.buehne-ki{
  display:inline-flex;align-items:center;gap:8px;
  padding:0;background:none;border:0;border-radius:0;
  font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dc-text-78);text-shadow:0 1px 4px rgba(0,0,0,.7);
}
.buehne-ki i{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:var(--dc-r-pille);
  background:rgba(7,15,19,.6);border:1px solid var(--dc-kante-18);
  font-style:normal;font-size:11px;font-weight:700;letter-spacing:.04em;
  color:var(--dc-text-78);text-shadow:none;
}
/* 14. Bewertungszeile im Band, Stelle und Aufbau wie in der Vorlage: Sterne,
       Note, Quelle. Die Sterne fuellen sich anteilig zur echten Note, eine 4,6
       zeigt also keine fuenf vollen. Solange keine Zahlen vorliegen, steht die
       Zeile ungefuellt und ohne Note da. */
.buehne-karte .buehne-bewertung{
  display:inline-flex;align-items:center;gap:9px;
  font-size:var(--dc-text-winzig);color:var(--dc-text-78);
}
.buehne-karte .buehne-bewertung b{font-weight:700;color:var(--dc-text-voll)}
.buehne-karte .buehne-bewertung-quelle{color:var(--dc-text-55)}
.buehne-karte .buehne-bewertung-leer{color:var(--dc-text-55)}
.buehne-karte .sterne{font-size:var(--dc-text-winzig);letter-spacing:2px;color:rgba(232,240,243,.22)}
.buehne-karte .sterne::before{color:var(--dc-gruen)}
/* 15. Im Kreis steht nur noch „AI“ (Inhaber, 12.09.2026), deshalb faellt das
       Wort daneben weg und der Kreis steht fuer sich. Der Bildnachweis am
       Seitenende traegt die vollstaendige Kennzeichnung. */
.buehne-ki{gap:0}
.bildnachweis{
  max-width:var(--dc-maxw);margin:0 auto;padding:0 var(--dc-rand) clamp(24px,3vw,40px);
  font-size:var(--dc-augenbraue);line-height:1.5;color:var(--dc-text-45);
}
/* 16. Die Logos im Band sind jetzt eigene Weiss-Fassungen (Deckkraft aus der
       Tinte des Originals gerechnet). Der pauschale Umfaerbe-Filter faellt
       damit weg: er hatte aus Zeichnungen wie Camp & Event eine weisse Flaeche
       gemacht. Beim Ueberfahren wird die Marke nur heller, nicht bunt, denn
       die Datei traegt keine Farben mehr. */
.buehne-logos img{filter:none;opacity:.72}
.buehne-logos a:hover img{filter:none;opacity:1}
/* 17. Logos im Band heller (Inhaber, 12.09.2026: „kaum zu erkennen“). Die
       Weiss-Fassungen tragen jetzt kraeftigere Mitteltoene, dazu hier mehr
       Deckkraft. Beim Ueberfahren volle Deckung. */
.buehne-logos img{opacity:.92}
.buehne-logos a:hover img{opacity:1}
/* 18. Kennzeichnung in den Fenstern auf „Über uns“ als runde Marke, gleiche
       Form wie in der Bühne (Inhaber, 12.09.2026). Die Lage kommt weiter von
       .fenster-ki (unten rechts im Fenster), nur Form und Inhalt aendern sich.
       Die vollstaendige Angabe steht im Bildnachweis am Seitenende. */
.fenster-ki-kreis{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;padding:0;border-radius:var(--dc-r-pille);
  background:rgba(7,15,19,.6);border:1px solid var(--dc-kante-18);
  letter-spacing:0;text-shadow:none;
}
.fenster-ki-kreis i{
  font-style:normal;font-size:11px;font-weight:700;letter-spacing:.04em;
  color:var(--dc-text-78);
}
/* 18b. Kennzeichnung „KI-Bild“ statt „AI“ (Inhaber, 29.09.2026). Zwei
       englische Buchstaben sagen einem Laien nicht, dass das Bild künstlich
       erzeugt ist (Art. 50 Abs. 4 KI-VO); der Bildnachweis am Seitenende ist
       dafür entfallen. Aus dem Kreis wird eine kleine Pille, Lage und Farben
       bleiben. */
.buehne-ki i,.fenster-ki-kreis{width:auto;height:28px;padding:0 11px}
.buehne-ki i,.fenster-ki-kreis i{text-transform:none;letter-spacing:.02em;white-space:nowrap}
/* 19. Tiefe in der Bühne (Inhaber, 12.09.2026): ein sehr langsamer Zoom, damit
       das Bild nicht tot wirkt. Der Zoom liegt auf dem Bild, NICHT auf
       .buehne-bild: dort sitzt bereits die Verschiebung der Scroll-Parallaxe
       aus ap.js, beide zusammen auf einem Element wuerden sich aufheben.
       30 Sekunden, hin und zurueck, ohne Sprung. */
@keyframes dc-buehne-zoom{
  from{transform:scale(1.02)}
  to{transform:scale(1.10)}
}
.buehne-karte .buehne-bild img{
  will-change:transform;
  animation:dc-buehne-zoom 30s ease-in-out infinite alternate;
}
/* Wer weniger Bewegung angefordert hat, bekommt ein stehendes Bild. */
@media (prefers-reduced-motion:reduce){
  .buehne-karte .buehne-bild img{animation:none}
}
/* 20. Kamerafahrt statt Zoom (Inhaber, 12.09.2026). Das Bild faehrt langsam
       hinein und dabei seitlich, wie eine ruhig gefuehrte Kamera. 48 Sekunden
       fuer einen Umlauf, Anfang und Ende sind gleich, deshalb kein Sprung.
       Die Grundskalierung von 1.06 ist Pflicht: sie schafft die Reserve, aus
       der geschwenkt wird, sonst liefe ein Rand ins Bild. Der Schwenk bleibt
       mit gut einem Prozent klar darunter. */
@keyframes dc-buehne-fahrt{
  0%   {transform:scale(1.06) translate3d(-1.2%,  0.7%, 0)}
  50%  {transform:scale(1.12) translate3d( 1.1%, -0.9%, 0)}
  100% {transform:scale(1.06) translate3d(-1.2%,  0.7%, 0)}
}
.buehne-karte .buehne-bild img{
  animation:dc-buehne-fahrt 48s ease-in-out infinite;
}
@media (prefers-reduced-motion:reduce){
  .buehne-karte .buehne-bild img{animation:none}
}
/* 21. Zoom statt Kamerafahrt (Inhaber, 12.09.2026: „einfach nur ein Zoom, der
       etwas ranfaehrt“). Kein Schwenk mehr, nur Skalierung, sehr langsam.
       Der Schwenk lag im transform des Bildes; die Parallaxe beim Scrollen
       sitzt dagegen am Container .buehne-bild und bleibt davon unberuehrt. */
@keyframes dc-buehne-zoom{
  from{transform:scale(1.00)}
  to  {transform:scale(1.07)}
}
.buehne-karte .buehne-bild img{
  animation:dc-buehne-zoom 60s ease-in-out infinite alternate;
}
/* Mehr Ueberstand nach oben, damit die kraeftigere Parallaxe (0.45) nicht nach
   kurzem Scrollen einen Spalt oben freilegt. 18 Prozent reichen fuer rund 170px
   Verschiebung, also fuer die gesamte sichtbare Strecke der Buehne. */
.buehne-karte .buehne-bild{top:-18%}
@media (prefers-reduced-motion:reduce){
  .buehne-karte .buehne-bild img{animation:none}
}
/* 22. Bewegung laeuft IMMER (Inhaber, 12.09.2026: „nix abschalten, soll immer
       angezeigt werden“). Diese Regeln stehen bewusst am Dateiende und heben
       die frueheren Abschaltungen bei „Bewegung reduzieren“ wieder auf.
       Bewusste Abweichung von der ueblichen Ruecksicht auf Menschen, denen
       Bewegung Beschwerden bereitet. Wer das zurueckdrehen will, loescht
       diesen Block. */
@media (prefers-reduced-motion:reduce){
  .buehne-karte .buehne-bild img{animation:dc-buehne-zoom 60s ease-in-out infinite alternate}
  .buehne-karte .buehne-logos{animation:dc-laufband 64s linear infinite}
  .buehne-logos-fenster{overflow:hidden}
  .punkt{animation-name:dc-puls-cyan}
  .fenster-kopf .punkt{animation-name:dc-puls-gruen}
}
/* 23. Kraeftigere Parallaxe (0.80 statt 0.45): das Bild bleibt beim Scrollen
       fast stehen. Dafuer muss es hoeher sein als die Buehne und weiter oben
       ansetzen, sonst laeuft nach wenigen hundert Pixeln von oben ein Spalt
       herein. 140 Prozent Hoehe bei 40 Prozent Ueberstand decken die gesamte
       Strecke, auf der die Buehne sichtbar ist. */
.buehne-karte .buehne-bild{top:-40%;height:140%}
/* 24. Parallaxe raus (Inhaber, 12.09.2026). Damit entfallen auch Ueberstand
       und Uebergroesse des Bildes: die waren nur die Reserve, aus der heraus
       verschoben wurde. Ohne sie war das Bild zu nah herangerueckt. Das Bild
       fuellt die Buehne jetzt wieder genau aus. Der sanfte Zoom bleibt. */
.buehne-karte .buehne-bild{inset:0;top:0;height:100%}
/* 25. Bühne mit Video (Inhaber, 12.09.2026): der Clip liegt unten, das Standbild
       als Ebene darüber (.fenster-schluss). Beide brauchen denselben Ausschnitt,
       sonst springt das Bild beim Übergang. Der langsame Zoom bleibt auf dem
       Standbild; das Video bringt seine eigene Kamerafahrt mit. */
.buehne-karte .buehne-bild video{width:100%;height:100%;object-fit:cover;object-position:66% 32%}
.buehne-karte .buehne-bild .fenster-schluss{object-position:66% 32%}
/* Beim Start sofort das Video zeigen: die bisherige Ausblendung verdeckte
   die ersten 1,4 Sekunden. Nur am Ende weich zum Standbild zurückkehren. */
.buehne-karte .fenster-schluss{transition:none}
.buehne-karte .fenster-schluss.da{transition:opacity 1.4s ease-in-out}
@media (prefers-reduced-motion:reduce){
  .buehne-karte .fenster-schluss.da{transition:none}
}
/* Den vorhandenen Videoausschnitt weiter zeigen (Inhaber, 12.09.2026).
   cover vergrößerte den 16:9-Clip auf die volle Hero-Höhe und beschnitt ihn.
   Auf Videobreiten bleibt jetzt das ganze Bild in einer kleineren Fläche
   rechts sichtbar. Die weichen Ränder gehen in den dunklen Header über.
   Das Schlussbild bekommt denselben Rahmen und keinen zusätzlichen Zoom. */
@media (min-width:761px){
  .buehne-karte .buehne-bild video,
  .buehne-karte .buehne-bild .fenster-schluss{
    position:absolute;inset:50% 0 auto auto;width:72%;height:auto;max-height:100%;aspect-ratio:16/9;
    object-fit:contain;object-position:center;transform:translateY(-50%);animation:none;
    mask-image:linear-gradient(90deg,transparent,#000 28%),linear-gradient(180deg,transparent,#000 8% 90%,transparent);
    mask-composite:intersect;
  }
}
@media (max-width:720px){
  .buehne-karte .buehne-bild video{object-position:62% 26%}
  .buehne-karte .buehne-bild .fenster-schluss{object-position:62% 26%}
}

/* Gemeinsame Hero-Maße der Unterseiten. Die Startseite verwendet
   .buehne-karte und behält ihre eigene Höhe und Bildgestaltung. */
.buehne-klein{min-height:640px;align-items:center;padding-top:var(--nav-h)}
.buehne-klein .buehne-inhalt{padding:36px 0 44px}
.buehne-klein .d1{max-width:1050px;font-size:clamp(34px,4.4vw,64px);line-height:1.08}
.buehne-klein .lead{max-width:64ch;font-size:17px;line-height:1.6;margin-top:20px}
.buehne-klein .buehne-tasten{margin-top:24px}
.buehne-klein .fakten{margin-top:24px}
.buehne-kino .buehne-bild img{object-position:72% 48%;filter:brightness(1.12)}
.buehne-kino .buehne-schleier{background:linear-gradient(90deg,rgba(7,12,19,.8),rgba(7,12,19,.5) 40%,rgba(7,12,19,.08) 72%),linear-gradient(180deg,rgba(7,12,19,.12),transparent 65%,var(--bg))}
.kino-bild{display:block}
.kino-bild img{display:block}
.bildkarte .kino-bild,.band-bild .kino-bild{width:100%;height:100%}
.buehne-personen .buehne-bild{inset:0}
.buehne-personen .buehne-bild img{object-fit:cover;object-position:right center;filter:none}
.buehne-personen .buehne-schleier{background:linear-gradient(90deg,rgba(7,12,19,.7),rgba(7,12,19,.42) 38%,transparent 72%),linear-gradient(180deg,rgba(7,12,19,.18),transparent 35%,transparent 78%,var(--bg))}
.buehne-infrastruktur .d1{font-size:clamp(34px,3.6vw,52px)}
@media(max-width:720px){
  .buehne-klein{min-height:640px}
  .buehne-klein .buehne-inhalt{padding:28px 0 36px}
  .buehne-klein .d1{font-size:36px}
  .buehne-klein .lead{font-size:16px}
  .buehne-kino .buehne-bild img{object-position:50% 50%}
  .buehne-kino .buehne-schleier{background:linear-gradient(180deg,rgba(7,12,19,.36),rgba(7,12,19,.5) 55%,var(--bg))}
  .buehne-personen .buehne-bild img{object-fit:contain;object-position:center}
  .buehne-personen .buehne-schleier{background:linear-gradient(180deg,rgba(7,12,19,.38),rgba(7,12,19,.5) 50%,rgba(7,12,19,.22))}
}

/* ----- Anfragen-Führung (29.09.2026) -----
   Preis im ersten Bildschirm und Vertrauen am Formular, nach der
   Prüfung der Vorschau. Farben je Link-Art mit eigener Hover-Regel. */
.buehne-fakten a.buehne-preis{color:var(--dc-gruen);font-weight:650;text-decoration:none;border-bottom:1px solid rgba(166,206,57,.45)}
.buehne-fakten a.buehne-preis:hover{color:var(--dc-gruen);border-bottom-color:var(--dc-gruen)}
.abschluss-person{margin:18px 0 0;font-size:var(--dc-text-klein);color:var(--dc-text-78)}
.abschluss-person b{color:var(--dc-text-voll);font-weight:650}
.abschluss-schritte{list-style:none;counter-reset:schritt;margin:16px 0 26px;padding:0;display:grid;gap:10px}
.abschluss-schritte li{counter-increment:schritt;display:grid;grid-template-columns:26px minmax(0,1fr);gap:12px;align-items:start;
  font-size:var(--dc-text-klein);line-height:1.5;color:var(--dc-text-62)}
.abschluss-schritte li::before{content:counter(schritt);display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:var(--dc-r-pille);background:rgba(166,206,57,.14);color:var(--dc-gruen);font-weight:700;font-size:13px}
.abschluss-schritte b{color:var(--dc-text-86);font-weight:600}

/* ----- Helle Bühnenbilder (01.10.2026) -----
   Seit den Tagesbüro-Szenen (Über uns, FloppyOps, Ticketsystem) liegt der
   Text links auf hellen Fenstern und Wänden statt auf einer Nachtszene.
   Der Schleier wird im Textbereich dichter und läuft erst bei 80 % aus,
   damit die Gesichter rechts frei bleiben. Pillen und Glasknopf bekommen
   einen eigenen dunklen Grund, der Fließtext einen leichten Schatten.
   Am Handy liegt der Text über den Personen, dort ist der Schleier oben
   gleichmäßig dicht. Steht bewusst am Dateiende: die Regeln sollen die
   Bühnen-Grundwerte weiter oben überstimmen. */
.buehne-personen .buehne-schleier{background:linear-gradient(90deg,rgba(7,12,19,.86),rgba(7,12,19,.66) 36%,rgba(7,12,19,.28) 62%,transparent 80%),linear-gradient(180deg,rgba(7,12,19,.22),transparent 35%,transparent 78%,var(--bg))}
.buehne-personen .lead{color:#DCE6F0;text-shadow:0 1px 2px rgba(7,12,19,.55)}
.buehne-personen .fakt{background:rgba(7,12,19,.58);border-color:rgba(240,245,250,.22);color:rgba(240,245,250,.84)}
.buehne-personen .fakt b{color:#fff}
.buehne-personen .knopf-glas{background:rgba(7,12,19,.5);border-color:rgba(240,245,250,.3)}
.buehne-personen .knopf-glas:hover{background:rgba(7,12,19,.68)}
@media(max-width:720px){
  .buehne-personen .buehne-schleier{background:linear-gradient(180deg,rgba(7,12,19,.78),rgba(7,12,19,.7) 48%,rgba(7,12,19,.36) 76%,rgba(7,12,19,.24))}
}

/* 20. Kennzeichnung dezenter (Inhaber, 11.10.2026: die Pille oben rechts war zu
       auffällig). Jetzt schlichter Text unten rechts im Bild, wie eine
       Bildquelle. Das Wort bleibt ausgeschrieben („KI-Bild“, „KI-Video“) und
       immer sichtbar, auch am Telefon: das verlangt Art. 50 Abs. 4 KI-VO.
       Nicht weiter abschwächen (kein Überfahren, kein reines Symbol). */
.buehne-ki{top:auto;bottom:14px;right:clamp(16px,2vw,24px);gap:0;padding:0;
  background:none;border:0;border-radius:0;z-index:4}
.buehne-ki i{width:auto;height:auto;padding:0;background:none;border:0;border-radius:0;
  font-size:11px;font-weight:500;letter-spacing:.03em;color:rgba(232,240,243,.62);
  text-shadow:0 1px 3px rgba(0,0,0,.85)}
/* Startseite: oben rechts statt unten (Inhaber, 11.10.2026). Unten stünde
   „KI-Video“ neben der Google-Bewertung und läse sich wie ein Hinweis auf
   KI-Bewertungen. */
.buehne > .buehne-ki.ki-oben{top:clamp(84px,11vh,110px);bottom:auto}
/* 20b. Dieselbe dezente Form in den Bildfenstern auf „Über uns“ (Inhaber,
        11.10.2026): schlichter Text unten rechts statt Pille. Lage kommt
        weiter von .fenster-ki; das Wort bleibt ausgeschrieben und sichtbar. */
.fenster-ki-kreis{width:auto;height:auto;padding:0;background:none;border:0;border-radius:0;
  text-shadow:0 1px 3px rgba(0,0,0,.85)}
.fenster-ki-kreis i{font-size:11px;font-weight:500;letter-spacing:.03em;color:rgba(232,240,243,.62)}
/* 20c. Auf hellen Stellen (Philipps grauer Pullover, Inhaber 11.10.2026) ging
        der Text unter. Leichte dunkle Unterlage statt Pille: kein Rahmen,
        kleiner Radius, damit der Hinweis auf jedem Bild lesbar bleibt. */
.buehne-ki i,.fenster-ki-kreis i{padding:2px 7px;border-radius:4px;
  background:rgba(7,12,19,.55);color:rgba(240,245,250,.85);text-shadow:none}

/* 21. Kontaktbereich (Inhaber, 11.10.2026: „etwas viel groß“): Ablauf und
       Ansprechpartner stehen rechts unter der Kontaktkarte statt links über
       dem Formular. */
.abschluss-rechts{display:flex;flex-direction:column;gap:clamp(20px,2.4vw,28px)}
.abschluss-ablauf{padding:0 clamp(4px,1vw,12px)}
.abschluss-ablauf .abschluss-person{margin-top:10px}
.abschluss-ablauf .abschluss-schritte{margin-bottom:0}
/* Die Karte lief per sticky mit und schob sich beim Scrollen über den Ablauf
   darunter (11.10.2026). Beide Spalten sind jetzt etwa gleich hoch, das
   Mitlaufen bringt nichts mehr. */
.abschluss-rechts .kontaktkarte{position:static}
/* Formularende aufgeräumt (Inhaber, 11.10.2026): Häkchen bündig mit den Feldern
   (der Browser rückte es 4 px ein), Text eine Spur kleiner, Absendeknopf über
   die volle Breite des Formulars. */
#kontaktForm .haken-zeile{margin-top:16px;gap:10px;font-size:13px;line-height:1.5}
#kontaktForm .haken-zeile input{margin:1px 0 0;width:17px;height:17px}
#kontaktForm button[type=submit]{width:100%;justify-content:center}