/* Schriften lokal — nie von Google. Liegen unter fonts/titillium-web/ */
@font-face{font-family:"Titillium Web";src:url("fonts/TitilliumWeb-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Titillium Web";src:url("fonts/TitilliumWeb-600.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Titillium Web";src:url("fonts/TitilliumWeb-700.woff2") format("woff2");font-weight:700;font-display:swap}

:root{
  /* Farben, Schrift und Maße stammen aus dem Theme-Studio auf kit.kandlen-it.de
     (theme_mods_kit-kandlen-theme → kit_brand_tokens, gelesen 27.07.2026).
     Nichts hier ist frei gewählt — Änderungen gehören ins Studio, nicht hierher. */
  --ci:#274C90;        /* primary                */
  --ci-2:#4C5261;      /* secondary · cta_hover  */
  --ci-3:#727A92;      /* accent                 */
  --grund:#fafafa;     /* bg                     */
  --text-hell:#212529; /* text                   */
  --ueber:#274C90;     /* heading_color          */
  /* Jakob 27.07.: Kopf- und Fussleiste in der Primaerfarbe. Im Theme-Studio
     steht top_bar_bg noch auf #f4f4f5 — das muss dort nachgezogen werden. */
  --topbar-bg:#274C90; --topbar-text:#E8EEF9;
  /* Fuss hell (Jakob 28.07.): der Kontaktabschnitt darueber ist CI-blau —
     ein blauer Fuss verschmolz damit zu einer Flaeche ohne Kante. */
  --fuss-bg:#fff;      --fuss-text:#4A5568;
  --unten-bg:#4C5261;  --unten-text:#ffffff;
  --w:1320px;          /* container_max          */
  --radius:8px;        /* radius                 */
  --luft:4rem;         /* section_padding        */

  /* Abgeleitet, nicht aus dem Studio: helle Flaechen und Linien fuer die
     Vorschau, plus eine dunklere CI-Stufe fuer den Knopf-Hover. */
  --ci-d:#1D3A6E; --weiss:#fff; --hell:#F4F7FB;
  /* Grauer Abschnittsgrund: #F4F7FB hob sich vom Seitengrund #fafafa kaum ab. */
  --grau-abschnitt:#E8EDF5;
  --text-mild:#4A5568; --text-leise:#5D6B84;
  --linie:rgba(255,255,255,.16); --linie-hell:#dde2ee;
  --blau:#274C90;

  /* Wuerfelseiten — feste Farben, nicht aendern (final 22.07.) */
  --d1:#274C90; --d2:#4C5261; --d3:#636B82; --d4:#0F766E; --d5:#0C6E8F; --d6:#9D174D;
}

/* Sprungmarke: liegt ausserhalb des Sichtfelds und kommt erst bei Tastaturfokus
   hervor. Ohne das steht sie sichtbar ueber der Kopfzeile. */
.skip{position:absolute;left:-9999px;background:var(--ci);color:#fff;padding:10px 16px;
  z-index:99;border-radius:0 0 var(--radius) 0;text-decoration:none}
.skip:focus{left:0;top:0}

/* Fokus sichtbar halten — Tastaturbedienung ist Baustein 1.5 im Wuerfel. */
a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,textarea:focus-visible{outline:3px solid var(--ci);outline-offset:2px}
.dunkel a:focus-visible,.dunkel button:focus-visible{outline-color:#fff}

/* Sanftes Scrollen — gilt auch fuer die Ankersprünge im Menü, die sonst hart
   springen. Wer im Betriebssystem weniger Bewegung eingestellt hat, bekommt
   weiterhin den harten Sprung; das ist die Regel, nicht die Ausnahme. */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}
/* Die Kopfzeile klebt oben — ohne Abstand verschwindet der Anfang eines
   angesprungenen Abschnitts darunter. */
/* Sprungziele muessen unter dem klebenden Kopf landen. #formular, #termin und
   sind divs, keine sections — ohne diesen Eintrag springt der CTA-Knopf
   „Erstgespraech buchen" (kopf.php -> /#formular) hinter den Kopf. (29.07.2026) */
section[id],#anfrage,#formular,#termin{scroll-margin-top:5.5rem}

*{box-sizing:border-box}
body{margin:0;font-family:"Titillium Web",system-ui,sans-serif;background:var(--grund);
     color:var(--text-hell);line-height:1.65;font-size:17px;-webkit-font-smoothing:antialiased}
/* Container nach Bootstrap-5-Staffelung statt einer festen Breite.
   Deren xxl (1320px) ist genau der container_max aus dem Theme-Studio.
   Seitenabstand 0.75rem = Bootstrap-Gutter. */
.wrap{width:100%;margin-inline:auto;padding-inline:.75rem}
@media(min-width: 576px){.wrap{max-width:540px}}
@media(min-width: 768px){.wrap{max-width:720px}}
@media(min-width: 992px){.wrap{max-width:960px}}
@media(min-width:1200px){.wrap{max-width:1140px}}
@media(min-width:1400px){.wrap{max-width:var(--w)}}
section{padding:clamp(3.2rem,7vw,5.5rem) 0}
h1,h2,h3{line-height:1.2;margin:0 0 .9rem;font-weight:700}
h1{font-size:clamp(2rem,5vw,3.2rem);letter-spacing:-.02em}
h2{font-size:clamp(1.5rem,3.4vw,2.1rem);letter-spacing:-.01em}
h3{font-size:1.1rem}
p{margin:0 0 1rem}
a{color:var(--blau)}

/* dunkle Abschnitte */
.dunkel{background:var(--ci);color:#E8EEF9}
.dunkel h2,.dunkel h3{color:#fff}
.dunkel a{color:#C7D6F0}
.grau{background:var(--grau-abschnitt)}

/* Kopf */
.topbar{background:var(--topbar-bg);color:var(--topbar-text);font-size:.84rem;padding:.5rem 0;
  border-bottom:1px solid rgba(255,255,255,.16)}
/* Ohne Unterstreichung (Jakob 01.08.). Die Fettung ersetzt sie als Merkmal:
   Kopfzeilentext ist #E8EEF9, die Links #fff — das sind 1,17:1, also viel zu
   wenig, um Farbe allein die Unterscheidung tragen zu lassen (WCAG 1.4.1
   verlangt 3:1). Bei Mauszeiger und Tastaturfokus kommt die Linie zurück. */
.topbar a{color:#fff;font-weight:600;text-decoration:none}
.topbar a:hover,.topbar a:focus-visible{text-decoration:underline;text-underline-offset:.18em}
/* align-items:center, damit beide Seiten auf einer Linie sitzen (Jakob 01.08.).
   Ohne die Angabe gilt „stretch“: der 32px hohe Barrierefreiheits-Schalter zieht
   die Zeile auf, der linke Text klebt oben, der rechte steht mittig am Knopf —
   gemessen 3px Versatz. */
.topbar .wrap{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;justify-content:space-between;align-items:center}
/* Eigene Klassen statt nackter span (Jakob 01.08.): ohne sie ist keine der
   beiden Seiten gezielt ansprechbar.
   Bewusst KEIN display:flex hier — der Trenner „·“ zwischen Mail und Telefon ist
   ein Textknoten; als Flex-Element verliert er die Leerzeichen ringsum und klebt
   am Text. Die Ausrichtung macht bereits align-items der Zeile. */
.topbar-zeiten,.topbar-kontakt{min-height:32px;line-height:32px}
.nav{background:var(--weiss);border-bottom:1px solid var(--linie-hell);position:sticky;top:0;z-index:20}
.nav .wrap{display:flex;align-items:center;gap:1.4rem;padding-top:.9rem;padding-bottom:.9rem}
.marke{display:flex;align-items:center;flex:0 0 auto}
.marke img{display:block;height:38px;width:auto}
.menu{display:flex;gap:1.3rem;margin-left:auto;list-style:none;padding:0;flex-wrap:wrap}
.menu a{color:var(--text-hell);text-decoration:none;font-size:.95rem;padding:.2rem 0;border-bottom:2px solid transparent}
.menu a:hover,.menu a[aria-current]{color:var(--ci);border-bottom-color:var(--ci)}
.knopf{display:inline-block;background:var(--ci);color:#fff;font-weight:700;
       text-decoration:none;padding:.65rem 1.3rem;border-radius:7px;font-size:.95rem;border:0}
.knopf:hover{background:var(--ci-d)}
/* Auf CI-farbenem Grund kehrt der Knopf um — blau auf blau ist unsichtbar. */
.dunkel .knopf{background:var(--weiss);color:var(--ci)}
.dunkel .knopf:hover{background:#E8EEF9;color:var(--ci-d)}
.dunkel .knopf-hell{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.45)}
.dunkel .knopf-hell:hover{background:rgba(255,255,255,.12);color:#fff}
.knopf-hell{background:transparent;color:#CBD5E1;border:1px solid var(--linie)}
.knopf-hell:hover{background:rgba(255,255,255,.06);color:#fff}


/* Aufmacher */
.hero{padding:5.5rem 0 4.5rem}
/* Weiss, nicht #4C5261: Der Hero steht auf CI-Blau. Dunkelgrau darauf kommt
   auf 1,07:1 und waere unlesbar, das bisherige #94A3B8 auf 3,25:1 — beides
   unter AA. Weiss erreicht 8,32:1. */
.hero p.gross{font-size:1.15rem;max-width:44rem;color:#fff}
.hero-nachsatz{font-size:.98rem;max-width:44rem;margin-top:.8rem}
/* Zielgruppe als eigene, leisere Zeile — sie ordnet ein, sie wirbt nicht. */
.hero-zielgruppe{font-size:.92rem;max-width:44rem;margin-top:.6rem;color:#C7D6F0}
/* Haltungssatz am Ende des Hero-Textes (0.7.4). Linke Kante statt fetter
   Schrift: die H1 soll die lauteste Stimme bleiben. Etwas groesser als der
   Nachsatz, damit er als Abschluss wirkt und nicht als Fussnote. */
.hero-haltung{font-size:1.15rem;line-height:1.45;max-width:44rem;color:#fff;
  margin:1.3rem 0 0;padding-left:.9rem;border-left:3px solid rgba(255,255,255,.55)}
@media(max-width:640px){.hero-haltung{font-size:1.04rem}}
.hero .knoepfe{display:flex;flex-wrap:wrap;gap:.7rem;margin:1.8rem 0 0}
.belege{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;margin:2.2rem 0 0;font-size:.9rem;color:#E8EEF9}
.belege span::before{content:"✓";color:#C7D6F0;font-weight:700;margin-right:.4rem}

/* Karten */
.karten{display:grid;gap:1.6rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.karte{background:var(--weiss);border:1px solid var(--linie-hell);border-radius:10px;padding:1.7rem}
.dunkel .karte{background:rgba(255,255,255,.08);border-color:var(--linie)}
.karte h3{display:flex;align-items:center;gap:.65rem;margin-bottom:.7rem}
.karte h4{font-size:1.02rem;margin:0 0 .35rem}
/* Bereichszeile über dem Werkzeugnamen — Zuordnung zum Würfel ohne Farbkasten. */
.test-bereich{font-size:.74rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--text-leise);margin:0 0 .45rem}
/* Die Werkzeugkarten tragen kurze Texte. Die 15px-Polster der Leistungskarten
   lassen sie darin verloren wirken — hier enger setzen. */
.tests-karten .karte{padding:1.4rem}
.tests-karten .karte p{padding-top:0;padding-bottom:0}
.tests-karten .test-bereich{margin-bottom:.35rem;padding-bottom:0}
.tests-karten .karte h4{margin-bottom:.9rem}
.karte p{font-size:.93rem;color:var(--text-mild);margin:0;
  padding-top:15px;padding-bottom:15px}
.dunkel .karte p{color:#E8EEF9}

.problem{background:#fdeceb;border-left:4px solid #B91C1C}
.loesung{background:#e6f3ec;border-left:4px solid #0B7A3B}
/* Leistungskarten erzaehlen vom Problem her: der Satz des Kunden zuerst,
   farblich abgesetzt, darunter die Antwort. Farben wie im Problem-Abschnitt. */
.karte-problem{background:#fdeceb;border-left:4px solid #B91C1C;border-radius:0 6px 6px 0;
  margin:0 0 1rem;padding:.75rem .9rem;font-size:.92rem;font-style:italic;color:#7F1D1D}
.kasten .karte .karte-problem{color:#7F1D1D}
/* Hoechstens vier je Reihe — bei sieben Karten also 4 + 3. */
@media(min-width:1060px){.karten-pl{grid-template-columns:repeat(4,1fr)}}
/* Leistungs-Symbol: Strichzeichnung, erbt die Abschnittsfarbe. */
.karte-icon{display:block;width:30px;height:30px;flex:0 0 auto;
  color:var(--kasten,var(--ci));stroke:currentColor;fill:none;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* Würfel-Seiten */
.dims{display:grid;gap:.7rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,165px),1fr));margin:1.8rem 0 0}
.dim{padding:.9rem 1rem;border-radius:9px;color:#fff}
.dim b,.dim strong{display:block;font-size:1.6rem;line-height:1;opacity:.55}
.dim span{display:block;font-weight:700;margin:.2rem 0 .15rem}
.dim small{font-size:.82rem;opacity:.85;line-height:1.4;display:block}
.dim1{background:var(--d1)}.dim2{background:var(--d2)}.dim3{background:var(--d3)}
.dim4{background:var(--d4)}.dim5{background:var(--d5)}.dim6{background:var(--d6)}

/* Gesetze */
.gesetze{margin:1.4rem 0 0;display:grid;gap:.8rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
/* Drei Spalten: heute 3+2, mit einem sechsten Gesetz sauber 3+3. Es kommen
   erfahrungsgemäß welche dazu — bei fünf nebeneinander wären die Spalten
   schon eng, bei sechs unlesbar. */
@media (min-width:992px){.gesetze{grid-template-columns:repeat(3,1fr)}}

/* Sechste Karte: die Einordnung. Kein Gesetz, sondern die Einordnung dazu —
   deshalb abgesetzt, Marke ohne Jahreszahl. Damit steht das Raster sauber 3+3.
   Grund in der Sekundaerfarbe (--ci-2), nicht im CI-Blau: sie soll sich von den
   Gesetzeskarten abheben, ohne mit Kopf- und Fussleiste um Aufmerksamkeit zu
   ringen. Jakob 28.07.
   Selektor mit .kasten davor, sonst gewinnt .kasten .gesetz{background:weiss}. */
.kasten .gesetz-einordnung{background:var(--ci-2);border-color:var(--ci-2);color:#fff}
.gesetz-einordnung b,.gesetz-einordnung strong{color:#fff}
.gesetz-einordnung .paragraf{background:rgba(255,255,255,.20);color:#fff;
  letter-spacing:.03em;font-size:.78rem;text-transform:uppercase}
.gesetz-einordnung p i{color:#E8EEF9}
.einordnung-liste{list-style:none;padding:0;margin:.2rem 0 .6rem;display:grid;gap:.45rem}
.einordnung-liste li{position:relative;padding-left:1.1rem;font-size:.9rem;
  line-height:1.5;color:#fff}
.einordnung-liste li::before{content:"›";position:absolute;left:0;font-weight:700;color:#C7D6F0}
.gesetz-einordnung .rahmen-fuss{font-size:.86rem;color:#E8EEF9;margin:auto 0 0;
  padding-top:.6rem;border-top:1px dashed rgba(255,255,255,.3)}
/* Gesetzeskarten im selben Zuschnitt wie die Leistungskarten. Statt eines
   Bildplatzhalters trägt jede den Paragrafen — bei der Barrierefreiheit das
   Jahr, ab dem sie gilt. Die Marke ist aria-hidden, die Angabe steht im Text. */
.gesetz{background:var(--weiss);border:1px solid var(--linie-hell);
  border-radius:var(--radius);padding:1.2rem 1.4rem;display:flex;flex-direction:column}
.paragraf{display:inline-flex;align-items:center;justify-content:center;
  min-width:38px;height:38px;padding:0 .5rem;margin-bottom:.6rem;align-self:flex-start;
  border-radius:8px;background:rgba(39,76,144,.10);color:var(--ci);
  font-weight:700;font-size:.92rem;letter-spacing:.01em}
.gesetz a{margin-top:auto;padding-top:.5rem}
.gesetz b,.gesetz strong{display:block;margin-bottom:.15rem}
.gesetz p{font-size:.93rem;color:var(--text-mild);margin:0 0 .4rem}
.gesetz a{font-size:.88rem;font-weight:600;overflow-wrap:anywhere}

/* Selbsttests */
.tests{width:100%;border-collapse:collapse;margin:1.2rem 0 0;font-size:.93rem;background:var(--weiss);
       border-radius:10px;overflow:hidden}
.tests th{background:var(--blau);color:#fff;text-align:left;padding:.6rem .8rem;
          font-size:.74rem;text-transform:uppercase;letter-spacing:.05em}
.tests td{padding:.65rem .8rem;border-bottom:1px solid var(--linie-hell);vertical-align:top}
.tests tr:last-child td{border-bottom:0}
.tests a{font-weight:600;overflow-wrap:anywhere}
.marke-dim{display:inline-block;color:#fff;font-size:.76rem;font-weight:700;
           padding:.1rem .45rem;border-radius:4px;white-space:nowrap}

/* Auf schmalen Geräten wird die Test-Tabelle zu Blöcken. Drei Spalten passen
   nicht in 320px, und waagerecht scrollen ist auf einer Verkaufsseite die
   schlechtere Lösung als untereinander lesen. */
@media(max-width:640px){
  .tests,.tests tbody,.tests tr,.tests td{display:block;width:100%}
  .tests thead{display:none}
  .tests tr{border-bottom:1px solid var(--linie-hell);padding:.6rem .8rem}
  .tests tr:last-child{border-bottom:0}
  .tests td{border:0;padding:.15rem 0}
  .tests td:first-child{margin-bottom:.3rem}
}

/* Preise */
.preise{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.preis{background:var(--weiss);border:1px solid var(--linie-hell);border-radius:10px;padding:1.4rem}
.preis .zahl{font-size:1.9rem;font-weight:700;color:var(--blau);line-height:1.1}
.preis .zusatz{font-size:.85rem;color:var(--text-leise);display:block;margin-bottom:.7rem}
.preis ul{margin:0;padding-left:1.1rem}
.preis li{margin:.3rem 0;font-size:.93rem;color:var(--text-mild)}

/* Schritte */
.schritte{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
.schritt{background:var(--ci-2);border-radius:10px;padding:1.2rem}
/* Die Kachel bringt ihren eigenen dunklen Grund mit — die Ueberschrift muss
   deshalb selbst hell sein und darf nicht davon abhaengen, ob der Abschnitt
   ringsum dunkel ist. Sonst kippt sie auf 1,97:1, sobald jemand den Abschnitt
   umfaerbt (passiert am 28.07. beim Wechsel auf weiss). */
.schritt h3{color:#fff}
/* Ablauf-Schritte: stand viermal als Inline-Style im HTML, mit #94A3B8 auf
   #4C5261 = 3,05:1. #E5E9F0 erreicht 6,42:1. */
.schritt p{font-size:.92rem;color:#E5E9F0;margin:0}
/* Die Schrittzahl stand auf var(--ci) — dieselbe Farbe wie der Abschnittsgrund,
   also 1,00:1 und praktisch unsichtbar. #C7D6F0 erreicht 5,67:1. */
.schritt b,.schritt strong{display:block;font-size:1.9rem;color:#C7D6F0;line-height:1;margin-bottom:.3rem}

/* Stimmen */
.stimmen{display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.stimme{background:var(--weiss);border:1px solid var(--linie-hell);border-radius:10px;padding:1.2rem}
.stimme p{font-size:.95rem;font-style:italic;color:var(--text-mild)}
/* --- Kundenstimmen: Look wie kit-kundenstimmen, Technik ohne Swiper ------ */
.kit-ks-wrap{position:relative;margin-top:1.2rem}
/* scroll-snap statt Slider-Bibliothek. Ohne JS voll bedienbar: wischen,
   Mausrad, Tabulator — der Browser scrollt fokussierte Karten selbst ins Bild. */
/* Drei Karten je Ansicht auf dem Rechner, darunter zwei, auf dem Handy eine. */
.kit-ks-spur{list-style:none;margin:0;padding:.25rem;display:grid;grid-auto-flow:column;
  grid-auto-columns:calc((100% - 2rem)/3);gap:1rem;overflow-x:auto;
  scroll-snap-type:x mandatory;scrollbar-width:thin;overscroll-behavior-x:contain}
@media(max-width:1000px){.kit-ks-spur{grid-auto-columns:calc((100% - 1rem)/2)}}
@media(max-width:680px){.kit-ks-spur{grid-auto-columns:100%}}
.kit-ks-slide{scroll-snap-align:start}
.kit-ks-karte{height:100%;display:flex;flex-direction:column;background:var(--weiss);
  border:1px solid var(--linie-hell);border-radius:10px;padding:1.5rem}
.kit-ks-kopf{display:flex;align-items:center;gap:.7rem;margin-bottom:.5rem}
/* Marke statt Initiale: die Bewertungen stammen aus dem Google-Konto von
   Kandlen IT, das Zeichen steht fuer die Quelle — nicht fuer die Person. */
.kit-ks-avatar{display:block;width:38px;height:38px;flex:0 0 auto;border-radius:50%;
  object-fit:contain;background:var(--hell);padding:3px}
.kit-ks-meta strong{display:block;font-size:.95rem}
.kit-ks-ort{display:block;font-size:.8rem;color:var(--text-leise)}
.kit-ks-sterne{display:inline-flex;gap:.1rem;margin-bottom:.5rem}
.kit-ks-stern{fill:#B45309}
.kit-ks-text{margin:0;flex:1 1 auto}
.kit-ks-text p{font-size:.95rem;font-style:italic;color:var(--text-mild);margin:0}
.kit-ks-mehr{align-self:start;margin-top:.6rem;padding:0;border:0;background:none;
  color:var(--ci);font:inherit;font-size:.9rem;font-weight:700;cursor:pointer;
  text-decoration:underline;text-underline-offset:3px}
.kit-ks-quelle{margin:.7rem 0 0;font-size:.8rem;color:var(--text-leise)}
.kit-ks-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:40px;height:40px;border-radius:50%;border:1px solid var(--linie-hell);
  background:var(--weiss);color:var(--ci);font-size:1.1rem;line-height:1;cursor:pointer}
.kit-ks-nav[data-ks-nav="-1"]{left:-8px}
.kit-ks-nav[data-ks-nav="1"]{right:-8px}
.kit-ks-nav[hidden]{display:none}
.kit-ks-pause{margin-top:.8rem;padding:.35rem .8rem;border:1px solid var(--linie-hell);
  border-radius:7px;background:var(--weiss);color:var(--ci);font:inherit;font-size:.85rem;
  font-weight:600;cursor:pointer}
.kit-ks-pause[hidden]{display:none}
.kit-ks-dialog{max-width:min(92vw,44rem);border:0;border-radius:12px;padding:1.6rem;
  color:var(--text-hell)}
.kit-ks-dialog::backdrop{background:rgba(15,23,42,.55)}
.kit-ks-dialog-text{font-style:italic;color:var(--text-mild);margin:.4rem 0 0}
.kit-ks-dialog-zu{position:absolute;top:.5rem;right:.7rem;border:0;background:none;
  font-size:1.6rem;line-height:1;color:var(--text-leise);cursor:pointer}
@media(max-width:900px){.kit-ks-nav{display:none}}

.stimme{margin:0;display:flex;flex-direction:column}
.stimme blockquote{margin:0;flex:1 1 auto}
.stimme figcaption{margin-top:.8rem}
.stimme cite{display:block;font-style:normal;font-weight:600;font-size:.9rem}
.stimme-quelle{display:block;font-size:.8rem;color:var(--text-leise);margin-top:.15rem}
.sterne{color:#B45309;letter-spacing:.1em}

/* FAQ */
details{background:var(--weiss);border:1px solid var(--linie-hell);border-radius:9px;
        padding:.9rem 1.1rem;margin:0 0 .6rem}
summary{font-weight:600;cursor:pointer}
details p{margin:.7rem 0 0;font-size:.94rem;color:var(--text-mild)}

/* Kontakt */
.kontakt{display:grid;gap:1.6rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.kontakt ul{list-style:none;padding:0;margin:1rem 0 0}
.kontakt li{margin:.5rem 0}
.feld input,.feld textarea{width:100%;padding:.6rem .7rem;border-radius:7px;
  border:1px solid var(--linie);background:var(--ci-2);color:#fff;font:inherit;font-size:.95rem}

/* Fuß */
/* Unten links sitzt das CCM19-Widget, unten rechts die Knopfgruppe — beide
   fest im Fenster. Der Fuss braucht darunter Luft, sonst liegen sie auf den
   Rechtslinks und dem Copyright. */
footer{background:var(--fuss-bg);color:var(--fuss-text);padding:3.4rem 0 0;font-size:.92rem}
.fspalten{display:grid;gap:1.6rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
footer h3{color:var(--ci);font-size:.95rem;margin-bottom:.5rem}
footer a,footer .kit-cookie-oeffnen{color:var(--text-hell);text-decoration:none}
footer a:hover,footer .kit-cookie-oeffnen:hover{color:var(--ci)}
footer a:hover,footer .kit-cookie-oeffnen:hover{text-decoration:underline}
/* Kein zusaetzlicher Zeilenabstand: die line-height traegt ihn schon. Mit gap
   standen die Leistungen 30px auseinander, der Kontaktblock daneben 24 — zwei
   Rhythmen bei gleicher Schriftgroesse. */
.fliste{list-style:none;margin:0;padding:0;display:grid;gap:0}
.fuss-block{margin:0}
.frecht{margin-top:0;padding-top:0;
        display:flex;flex-wrap:wrap;gap:.5rem 1.2rem;font-size:.88rem;align-items:center}
/* Sichtbare Tastaturmarke — der Fuß ist dunkel, der globale Fokusring ginge unter. */
footer a:focus-visible,footer .kit-cookie-oeffnen:focus-visible{outline:3px solid var(--ci);outline-offset:3px;border-radius:2px}
.frecht [aria-current="page"]{text-decoration:underline;text-underline-offset:3px}
/* Cookie-Schalter ist ein <button> (loest eine Aktion aus, navigiert nicht).
   Nur die Button-Optik wird abgeraeumt — Farbe, Hover und Fokus kommen aus den
   footer-a-Regeln oben, damit er sich nicht auseinanderentwickelt. (29.07.2026) */
.kit-cookie-oeffnen{background:none;border:0;padding:0;margin:0;font:inherit;cursor:pointer}

   

.wuerfel-grid{display:grid;gap:1.6rem;grid-template-columns:1fr 1fr;align-items:center}
@media(max-width:820px){
  .wuerfel-grid{grid-template-columns:1fr}
    }
@media(prefers-reduced-motion:reduce){  }

/* Bildplätze — bewusst als Skizze, nicht als Stockfoto.
   Ein hübsches Platzhalterbild verführt dazu, es stehen zu lassen. */
.bildplatz{position:relative;border:2px dashed rgba(148,163,184,.55);border-radius:10px;
  background:repeating-linear-gradient(45deg,rgba(148,163,184,.07) 0 10px,transparent 10px 20px);
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;padding:1.4rem 1.1rem;min-height:200px;gap:.3rem}
.bildplatz b,.bildplatz strong{font-size:.95rem;color:#4A5568}
.dunkel .bildplatz b,.dunkel .bildplatz strong{color:#E8EEF9}
.bildplatz small{font-size:.82rem;color:var(--text-leise);line-height:1.5;max-width:26rem}
.dunkel .bildplatz small{color:#E8EEF9}
.bildplatz .format{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:#92400E;background:#FDE9C8;padding:.1rem .5rem;border-radius:4px}
/* Auf farbigem Grund kehrt die Marke um — das Braun daerauf kaeme nur auf 2,6:1. */
.dunkel .bildplatz .format{color:#3B2200;background:#FDE68A}
/* Aufmacher ohne Bild: der Text nimmt die volle Breite, bleibt aber lesbar
   begrenzt. Die H1 traegt den Abschnitt allein (Jakob 28.07.). */
/* Hero: H1 ueber die volle Breite, darunter Text und Bild je zur Haelfte
   (Jakob 28.07.). Auf dem Handy gestapelt — Text zuerst, das Bild danach.
   align-items:center haelt die kuerzere Spalte auf Hoehe der laengeren. */
.hero-grid{display:grid;gap:1.2rem 2.5rem;max-width:var(--w)}
.hero-grid>.knoepfe,.hero-grid>.belege{grid-column:1/-1}
/* Hoechstens 450px (Jakob 29.07.): in der 40%-Spalte wurde das Portrait sonst
   ueber 500px breit und dominierte den Hero. Grenze auf der figure, damit die
   Bildunterschrift dieselbe Breite behaelt. Die Datei hat 900px — bei 450px
   Anzeige also genau die doppelte Aufloesung fuer scharfe Displays. */
.hero-bild{margin:0;max-width:450px}
.hero-bild img{width:100%;height:auto;border-radius:var(--radius);
  box-shadow:0 18px 40px rgba(0,0,0,.28)}
.hero-bild figcaption{margin:.7rem 0 0;font-size:.88rem;line-height:1.45;
  color:#E8EEF9}
@media(min-width:1000px){
  /* 60/40 statt halbe-halbe: der Text traegt die Botschaft, das Bild begleitet
     sie nur — und ein Portrait braucht weniger Breite als ein Mockup. */
  .hero-grid{grid-template-columns:3fr 2fr;align-items:center}
  /* Ohne Bild bleibt der Text auf lesbarer Zeilenlaenge statt auf 1320px. */
  .hero-grid:not(:has(.hero-bild)){display:block;max-width:min(var(--w),58rem)}
}
/* Aufmacherbild. width/height stehen im Markup gegen das Nachrutschen,
   hier wird nur skaliert — deshalb height:auto. */
.portraet{width:104px;height:104px;border-radius:50%;flex:0 0 auto;
  display:block;object-fit:cover}
.ueber-kopf{display:flex;gap:1.1rem;align-items:center;margin:0 0 1rem}
/* Ersetzt frueheres Inline-CSS im Markup (Jakob 28.07.: gehoert ins Stylesheet). */
/* Symbol-Sprites liegen ausserhalb des Flusses, damit sie keinen Platz belegen. */
.sprite{position:absolute}
.ueber-name{font-size:1.05rem}
.ueber-rolle{font-size:.9rem;color:#C7D6F0}
.abstand-gross{margin-top:1.6rem}
.abstand-mittel{margin-top:1.2rem}
/* Wortmarken-Leiste „Womit ich arbeite“ — Trennzeichen kommt aus dem CSS,
   damit Vorleseprogramme keine Mittelpunkte vorlesen. */
.systeme{list-style:none;display:flex;flex-wrap:wrap;align-items:center;
  gap:.5rem 1.4rem;margin:1.4rem 0 1.8rem;padding:0}
.systeme li{font-size:clamp(1.1rem,2.4vw,1.5rem);font-weight:700;color:var(--ci);
  letter-spacing:-.01em}
.systeme li + li::before{content:"·";margin-right:1.4rem;color:var(--text-leise);
  font-weight:400}

/* Werte im Ueber-mich: jeder Punkt traegt seinen eigenen Beleg — ohne den
   waere es die Liste, die jede Agenturseite hat. */
.werte{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:1.2rem 2rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))}
.werte li{position:relative;padding-left:1.5rem;font-size:.97rem;color:#E8EEF9}
.werte li::before{content:"";position:absolute;left:0;top:.55em;width:.55rem;height:.55rem;
  border-radius:50%;background:#C7D6F0}
.werte b,.werte strong{color:#fff}

.ueber-bild{margin:0;align-self:start}
.ueber-bild img{display:block;width:100%;height:auto;border-radius:10px}
@media(max-width:820px){.hero-grid{grid-template-columns:1fr}}

/* Vorschau-Hinweis */
.marker{background:rgba(217,119,6,.14);border-left:3px solid #D97706;padding:.7rem .9rem;
        border-radius:0 7px 7px 0;font-size:.88rem;color:var(--text-mild);margin:1rem 0 0}
.dunkel .marker{color:#FDE68A}

/* Textseiten laufen auf voller Containerbreite (Jakob 01.08.2026) — wie die
   Startseite, damit Kopf, Inhalt und Fuss dieselbe Kante haben. Vorher 820px:
   das war als Lesebreite gedacht, sah neben dem breiten Kopf aber aus wie eine
   halb gefuellte Seite. */
.text .wrap{max-width:var(--w)}
/* Ausgeschriebene URLs in den Rechtstexten brechen sonst nicht um und schieben
   die Seite auf. Gemessen 30.07. auf /datenschutzerklaerung/ bei 390px:
   scrollWidth 452 statt 390, verursacht vom netcup-Link (436px breit).
   Gleiche Regel wie schon bei .gesetz a und .tests a. */
.text a{overflow-wrap:anywhere}
/* „Freiwillig"-Hinweis in der Barrierefreiheitserklaerung: eine Aussage, keine
   Fussnote — deshalb ein Balken in CI-Blau statt kleinerer Schrift. */
.hinweis-frei{border-left:4px solid var(--ci);background:#F4F6FA;
  border-radius:0 8px 8px 0;padding:.9rem 1.1rem;margin:0 0 1.4rem}
.text h1{margin-bottom:.8rem}
.text h2{margin-top:2rem}

/* --- Themen-Knöpfe: tragen Betreff und Textvorschlag ins Formular --- */
.themen{display:flex;flex-wrap:wrap;gap:.5rem;margin:.9rem 0 0}
.thema-knopf{font:inherit;font-size:.92rem;font-weight:600;cursor:pointer;
  background:rgba(255,255,255,.10);color:#fff;border:1px solid rgba(255,255,255,.35);
  border-radius:var(--radius);padding:.5rem 1rem}
.thema-knopf:hover{background:rgba(255,255,255,.20)}
.thema-knopf[aria-pressed="true"]{background:#fff;color:var(--ci);border-color:#fff}

/* --- Kontaktformular --- */
#anfrage{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.20);
  border-radius:var(--radius);padding:1.5rem 1.6rem}
#anfrage h3{margin-top:0}
/* #C7D6F0 stammte vom blauen Grund; das Formular steht auf weisser Karte.
   Der Selektor traegt eine ID und schlaegt jede Klassenregel — die Farbe muss
   deshalb hier stehen, nicht weiter unten. --text-leise = 5,4:1. */
#anfrage .klein{font-size:.86rem;color:var(--text-leise);margin-bottom:1.2rem}
.feld{margin-bottom:.9rem}
.feld label{display:block;font-weight:600;font-size:.92rem;margin-bottom:.3rem;color:#fff}
.feld input[type=text],.feld input[type=email],.feld input[type=tel],.feld textarea{
  width:100%;font:inherit;padding:.6rem .75rem;border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.35);background:#fff;color:var(--text-hell)}
/* #C7D6F0 stammte vom blauen Grund und lag auf der weissen Karte bei
   1,47:1 — praktisch unsichtbar. --text-leise ergibt 5,9:1. */
.feld .opt{font-weight:400;color:var(--text-leise)}
/* Sternchen und "(optional)" gehoeren in die Label-Zeile, nicht darunter. */
.feld label span{display:inline;font-size:inherit;margin:0}

/* Zustimmung: Kästchen und Text nebeneinander, Text bleibt normal gewichtet. */
.feld-zustimmung{display:flex;gap:.7rem;align-items:flex-start;margin:1.2rem 0}
.feld-zustimmung input{margin-top:.25rem;flex:0 0 auto;width:1.05rem;height:1.05rem}
.feld-zustimmung label{font-weight:400;font-size:.9rem;line-height:1.45}
.feld-zustimmung a{color:#fff;text-decoration:underline}

/* Rückmeldungen nach dem Absenden. */
.meldung{border-radius:var(--radius);padding:.7rem .9rem;font-size:.93rem;margin:0 0 1rem}
.meldung--ok{background:#DCFCE7;color:#14532D;border-left:4px solid #15803D}
.meldung--fehler{background:#FEE2E2;color:#7F1D1D;border-left:4px solid #B91C1C}

/* Honigtopf gegen Spam — für Menschen unsichtbar, für Skripte verlockend. */
/* Honigtopf: umschliesst jetzt Label + Feld (29.07.2026), deshalb overflow
   statt opacity. Off-Screen und NICHT display:none — viele Bots erkennen
   display:none und lassen das Feld leer, dann wirkt der Koeder nicht.
   opacity:0 ist raus: off-screen reicht, und opacity ist fuer Bots ein Signal. */
.honigtopf{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

#anfrage button[type=submit]{margin-top:.3rem}
#anfrage button[type=submit]:disabled{opacity:.6;cursor:progress}

/* --- Problem / Lösung -------------------------------------------------- */
.problem-grid{display:grid;gap:1.6rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
  margin:1.6rem 0 0}
/* Rot und Grün wie in der alten .gegen-Regel aus v0005 — die Werte waren dort
   schon erprobt: #B91C1C auf #fdeceb (6,47:1) und #0B7A3B auf #e6f3ec (5,44:1). */
.problem-card{background:#fdeceb;border:1px solid rgba(185,28,28,.18);
  border-left:4px solid #B91C1C;border-radius:var(--radius);padding:1.4rem 1.6rem}
.solution-card{background:#e6f3ec;border-color:rgba(11,122,59,.18);
  border-left-color:#0B7A3B}
.card-label{display:block;font-size:.78rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-leise);margin-bottom:.9rem}
.problem-card .card-label{color:#B91C1C}
.solution-card .card-label{color:#0B7A3B}

.check-list{list-style:none;padding:0;margin:0}
.check-list li{position:relative;padding-left:1.9rem;margin-bottom:.7rem;font-size:.96rem;
  color:var(--text-hell)}
.check-list li:last-child{margin-bottom:0}
/* Das Zeichen ist Schmuck — Bedeutung steht im Text, nicht im Haken. Deshalb
   aria-hidden über content und keine Aussage, die nur farblich transportiert wird. */
.check-list li::before{content:"✓";position:absolute;left:0;top:0;width:1.25rem;
  text-align:center;font-weight:700;color:#0B7A3B}
.check-list.negative li::before{content:"✗";color:#B91C1C}

/* --- Farbkasten: Abschnitt als abgesetzte Fläche ----------------------- */
/* Die Farbe kommt per --kasten aus der Würfelpalette. Karten und Tabellen
   darin bleiben weiß, damit die Fläche nicht erdrückt. Weißer Text erreicht
   auf allen sechs Würfelfarben mindestens 5,31:1. */
/* Die Farbfläche geht über die volle Fensterbreite, der Inhalt bleibt im
   Container-Raster — sonst sitzt der Text anders als in den Abschnitten darüber. */
.kasten{background:var(--kasten);color:#fff}
.kasten > .wrap{background:transparent}
.kasten h2,.kasten h3,.kasten b,.kasten strong{color:#fff}
.kasten > .wrap > p{color:#fff}
/* Die Einordnungskarte ist ausgenommen — sie trägt bewusst CI-Blau. */
.kasten .karte,.kasten .gesetz:not(.gesetz-einordnung),.kasten .tests{background:var(--weiss)}
/* h4 muss mit: ohne diese Regel erbt eine Kartenueberschrift ohne Link das
   Weiss des Abschnitts und steht weiss auf weiss (Fund Jakob, 28.07.). */
.kasten .karte h3,.kasten .karte h4,
.kasten .gesetz:not(.gesetz-einordnung) b,.kasten .gesetz:not(.gesetz-einordnung) strong{color:var(--kasten)}
.kasten .gesetz:not(.gesetz-einordnung) .paragraf{
  background:color-mix(in srgb,var(--kasten) 12%,transparent);color:var(--kasten)}
.kasten .karte p,.kasten .gesetz:not(.gesetz-einordnung) p,
.kasten .tests td{color:var(--text-mild)}
/* Knopf in der Karte: kleiner als der Haupt-Knopf, damit acht davon die
   Seite nicht erschlagen. Sitzt unten, deshalb margin-top auto im Flexfluss. */
.karte{display:flex;flex-direction:column}
/* Nur die Leistungskarten haben unten einen Knopf, der buendig sitzen soll.
   Ueberall sonst ist der letzte Absatz Text — der gehoert nach oben, sonst
   klebt er am Kartenboden (Befund Jakob 28.07., zweimal aufgetreten). */
.karten-pl .karte > p:last-child{margin-top:auto;padding-bottom:0}
.knopf-karte{font-size:.88rem;padding:.5rem 1rem}
.kasten .karte .knopf-karte{background:var(--kasten);color:#fff}
/* Groesser und mit voller Deckkraft (Jakob 01.08.2026). Vorher 0,88rem bei
   opacity .92 — als Fussnote gesetzt, obwohl der Hinweis „ersetzt keine
   Rechtsberatung“ gelesen werden soll. Die Deckkraft war zudem der einzige
   Grund, warum der Kontrast unter den vollen 8,3:1 lag. */
.kasten .hinweis-klein{font-size:1rem;color:#fff;opacity:1;margin-top:1.1rem}
/* Rechtshinweis in Warnfarbe, mit Strich davor (Jakob 01.08.2026). Heller
   Rot-Ton statt kraeftigem Rot: auf dem CI-blauen Grund kaeme #DC2626 auf
   1,72:1, dieser hier auf 5,9:1 — sichtbar als Warnung UND lesbar.
   Eigener Name, NICHT „klein-hinweis“: den gibt es schon weiter unten fuer den
   Schlusssatz im Systeme-Abschnitt (1,2rem, fett, CI-blau). Zwei Klassen, die
   sich nur in der Wortstellung unterscheiden und Gegensaetzliches tun, sind
   eine Falle.
   Selektor mit p davor, sonst schlaegt .kasten > .wrap > p weiter oben die
   Farbe wieder auf Weiss — die hat durch das Element eine hoehere Spezifitaet
   (0,2,1) als eine reine Klassenkombination (0,2,0). Gemessen: Rand und
   Fettung kamen durch, die Farbe nicht. */
.kasten > .wrap > p.rechtshinweis{color:#FECDD3;font-weight:600;
  border-left:3px solid #FECDD3;padding-left:.8rem;margin-top:.7rem}

/* Selbstpruefung in CI-Blau (Jakob 28.07.) — hebt sich von den beiden
   grau-blauen Abschnitten darueber ab. */
.aufklaerung{--kasten:var(--ci)}
.leistungen{--kasten:#636B82}
/* Problem-Abschnitt in Farbe 3. Nicht --ci-3 (#727A92): weisser Text kaeme dort
   nur auf 4,27:1 und faellt unter AA. #636B82 erreicht 5,31:1. */
.problem-farbe{--kasten:#636B82}
/* Auf dem farbigen Grund muessen Einwand und Balken hell sein — die Karten
   darunter behalten ihren eigenen hellen Grund und damit dunklen Text. */
.problem-farbe .einwand{border-left-color:rgba(255,255,255,.5)}
.problem-farbe .einwand-satz{color:#fff}
.problem-farbe .einwand p{color:#E8EEF9}
.problem-farbe .check-list li{color:var(--text-hell)}
/* Die Leistungen tragen keine Wuerfelfarbe mehr — Tuerkis heisst "Recht",
   nicht "Angebot". Die Betonung liegt jetzt auf dem Satz, der den Preis des
   Nichtstuns benennt. */
.kosten-satz{background:var(--ci);color:#fff;border-radius:var(--radius);
  padding:1.6rem 1.8rem;margin:1.4rem 0 2.6rem;font-size:1.08rem;line-height:1.65;
  max-width:min(var(--w),62rem)}
.kosten-satz b,.kosten-satz strong{color:#fff}
/* Schlusssatz im Kostenabschnitt: filtert, ohne herablassend zu sein. */
/* Volle Breite (Jakob 01.08.2026). Vorher auf 62rem begrenzt — das ist die
   uebliche Lesebreite; ueber die ganzen 1320px wird die Zeile lang. Hier
   vertretbar: drei kurze Saetze am Abschnittsende, die niemand am Stueck
   herunterliest, und sie sollen die Preisspalten darueber abschliessen. */
.kosten-schluss{margin:1.8rem 0 0;font-size:1.02rem;line-height:1.65;color:var(--text-mild);
  max-width:none}
.kosten-schluss b,.kosten-schluss strong{color:var(--text-hell)}
/* Einwand und Gegenrede: der Satz des Kunden abgesetzt, die Antwort darunter
   im normalen Textton — nicht belehren, nur einordnen. */
/* Haltungssatz direkt unter der Abschnittsfrage: etwas groesser als Fliesstext,
   damit sichtbar wird, dass er die Ueberschrift beantwortet und nicht schon der
   naechste Absatz ist. Zeilenlaenge begrenzt, sonst laeuft er ueber die volle
   Breite und liest sich schwer. */
.haltung{font-size:1.12rem;max-width:62ch;margin:0 0 1.7rem}
/* Ueberschrift ueber dem zweiten Einwand: Abstand nach oben, damit sie sich vom
   Block darueber loest und sichtbar zum Block darunter gehoert. */
.einwand-titel{margin:2.4rem 0 .9rem;font-size:1.25rem}
.einwand{border-left:4px solid var(--ci-3);padding:.2rem 0 .2rem 1.3rem;
  margin:0 0 2.2rem;max-width:min(var(--w),62rem)}
.einwand-satz{font-size:1.12rem;font-weight:700;font-style:italic;color:var(--ci);
  margin:0 0 .8rem}
.einwand p:last-child{margin-bottom:0}
/* FAQ zweispaltig ab dem Rechner: mit zwoelf themenbezogenen Fragen wird eine
   einspaltige Liste zu lang zum Ueberfliegen. align-items:start, damit eine
   aufgeklappte Antwort nur ihre eigene Zelle wachsen laesst und die Nachbarin
   nicht mitzieht. Die DOM-Reihenfolge bleibt die Lesereihenfolge — wichtig
   fuer Tastatur und Screenreader. Jakob 28.07. */
.faq-liste{display:grid;gap:.6rem}
@media(min-width:1000px){
  .faq-liste{grid-template-columns:1fr 1fr;gap:.6rem 2rem;align-items:start}
  .faq-gruppe{grid-column:1/-1}
}
/* Gruppentitel = eine Wuerfelseite. Der Punkt traegt die Seitenfarbe, der Text
   bleibt dunkel — die Dimensionsfarben halten als Flaeche, aber #636B82 als
   Schrift auf dem grauen Grund nur 4,5:1. Farbe als Marke, nicht als Text. */
.faq-gruppe{display:flex;align-items:center;gap:.5rem;margin:1.4rem 0 .2rem;
  font-size:.82rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-hell)}
.faq-liste>.faq-gruppe:first-child{margin-top:0}
.faq-gruppe::before{content:"";width:.7rem;height:.7rem;border-radius:2px;
  background:var(--faq-farbe,var(--ci));flex:none}
/* Abschlusszeile des Ablaufs: fasst die Rollenverteilung in einem Satz zusammen.
   Abgesetzt durch Linie und Groesse, nicht durch eine weitere Farbflaeche —
   der Abschnitt hat mit den vier Schritten schon genug Kanten. */
/* Volle Breite (Jakob 01.08.2026), wie beim Kosten-Schluss. Die Trennlinie
   darueber lief bisher ueber die ganze Breite, der Satz nur bis 46rem — das sah
   aus, als waere die Zeile abgeschnitten. */
.ablauf-schluss{margin:2.2rem 0 0;padding-top:1.4rem;
  border-top:1px solid var(--linie-hell);
  font-size:1.15rem;font-weight:600;color:var(--ci);max-width:none}
/* Auffangkarte in der freien Zelle: dieselbe Rolle wie .karte-mehr bei den
   Leistungen, deshalb auch dieselbe Farbe — CI-Blau heisst auf dieser Seite
   „kein Angebot, sondern die Einladung zu fragen". */
.faq-brueckekarte{grid-column:1/-1;margin-top:1rem;
  background:var(--ci);color:#fff;border-radius:var(--radius);
  padding:1.1rem 1.4rem;display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:.7rem 2rem}
.faq-brueckekarte strong{display:block;margin-bottom:.15rem}
.faq-brueckekarte p{font-size:.93rem;margin:0;color:#E8EEF9}
.faq-wege{display:flex;flex-wrap:wrap;gap:.3rem 1.2rem;margin:0}
.faq-wege a{color:#fff;font-weight:600;text-decoration:underline;
  text-underline-offset:3px}
.faq-wege a:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:2px}
/* Die Auffangkarte trägt CI-Blau: sie ist kein Angebot wie die anderen,
   sondern die Einladung zu fragen. */
.karte-mehr{background:var(--ci);border-color:var(--ci)}
.karte-mehr h3{color:#fff}
.karte-mehr p{color:#E8EEF9}
.karte-mehr .karte-icon{color:#fff}
.karte-mehr .karte-problem{background:rgba(255,255,255,.14);border-left-color:#fff;
  color:#fff}
.karte-mehr .knopf-karte{background:#fff;color:var(--ci)}
.karte-mehr .knopf-karte:hover{background:#E8EEF9;color:var(--ci-d)}

/* Auf farbigem Grund muss der Code-Kasten ABdunkeln. Weiss mit 18% hellte den
   Grund auf 3,4:1 auf — bei 12,9px Schrift zu wenig (Lighthouse-Befund 28.07.). */
.kasten .hinweis-klein code{background:rgba(0,0,0,.28);padding:.05rem .3rem;
  border-radius:4px;font-size:.92em}

/* --- Hauptmenü auf schmalen Geräten ------------------------------------ */
/* Der Schalter erscheint erst unter 900px. Ohne JavaScript bleibt das Menü
   sichtbar (die Ausblend-Regel hängt an .js-menue), damit die Navigation
   nicht von einem Skript abhängt. */
.menue-schalter{display:none;align-items:center;gap:.5rem;margin-left:auto;
  font:inherit;font-weight:700;font-size:.95rem;cursor:pointer;
  background:transparent;color:var(--ci);border:1px solid var(--linie-hell);
  border-radius:var(--radius);padding:.5rem .8rem}
.menue-schalter .balken{position:relative;display:block;width:18px;height:2px;
  background:currentColor;border-radius:2px}
.menue-schalter .balken::before,.menue-schalter .balken::after{content:"";position:absolute;
  left:0;width:18px;height:2px;background:currentColor;border-radius:2px}
.menue-schalter .balken::before{top:-6px}
.menue-schalter .balken::after{top:6px}
.menue-schalter[aria-expanded="true"]{background:var(--ci);color:#fff;border-color:var(--ci)}

@media (max-width:899px){
  .menue-schalter{display:flex}
  .js-menue .menu{display:none}
  .js-menue .menu.offen{display:flex;flex-direction:column;gap:0;
    order:3;width:100%;margin:.8rem 0 0;border-top:1px solid var(--linie-hell)}
  .js-menue .menu.offen li{width:100%}
  .js-menue .menu.offen a{display:block;padding:.85rem .2rem;
    border-bottom:1px solid var(--linie-hell);border-left:3px solid transparent}
  .js-menue .menu.offen a[aria-current="page"]{border-left-color:var(--ci);
    padding-left:.6rem;background:rgba(39,76,144,.06)}
  .nav .wrap{flex-wrap:wrap;gap:.7rem}
  /* Der Erstgespräch-Knopf steht unter dem Menü, nicht daneben —
     nebeneinander schiebt er die Zeile auf schmalen Geräten auf. */
  .nav > .wrap > .knopf{order:4;width:100%;text-align:center}
}
.gesetz p i{display:block;font-style:normal;font-size:.82rem;font-weight:700;
  color:var(--text-leise);margin-bottom:.35rem}
/* In der blauen Einordnungskarte kehren sich alle Textfarben um. */
.gesetz-einordnung b,.gesetz-einordnung strong,.gesetz-einordnung p{color:#fff}
.gesetz-einordnung p i{color:#E8EEF9}
/* Bußgeldrahmen: sachlich abgesetzt, nicht als Warnfarbe — die Linie der Seite
   ist "helfen, nicht anzeigen". Deshalb dieselbe Farbe wie der Fließtext. */
.gesetz .rahmen{font-size:.86rem;color:var(--text-leise);margin:.4rem 0 0;
  padding-top:.5rem;border-top:1px dashed var(--linie-hell)}
.kasten .rahmen-hinweis{color:#fff;margin-top:1.4rem;padding:1.3rem 1.5rem;
  background:rgba(255,255,255,.12);border-radius:var(--radius)}
.rahmen-kopf{font-size:1.05rem;font-weight:700;margin:0 0 .9rem}
.rahmen-hinweis ul{list-style:none;padding:0;margin:0 0 .9rem;display:grid;gap:.6rem}
.rahmen-hinweis li{position:relative;padding-left:1.5rem;font-size:.94rem;line-height:1.55}
.rahmen-hinweis li::before{content:"›";position:absolute;left:.2rem;top:-.05rem;
  font-weight:700;font-size:1.1rem;opacity:.85}
.rahmen-fuss{font-size:.9rem;margin:0;opacity:.92;
  padding-top:.8rem;border-top:1px solid rgba(255,255,255,.22)}
/* Mehrere Bereichsmarken in einer Zelle brechen um statt die Spalte zu sprengen. */
.tests td .marke-dim{margin:0 .25rem .25rem 0}
.hinweis-pruefen{background:#FEF3C7;border-left:4px solid #D9A441;
  border-radius:0 var(--radius) var(--radius) 0;padding:1rem 1.2rem;margin:0 0 1.8rem;
  color:#5C3D0A;font-size:.95rem}
.hinweis-pruefen b,.hinweis-pruefen strong{display:block;color:#92400E;margin-bottom:.3rem}
/* Der Merksatz traegt den ganzen Abschnitt — er darf nicht kleiner sein als
   das, was er zusammenfasst (Jakob 28.07.). Groesser, CI-Blau, kraeftige
   Kante statt Haarlinie. */
.klein-hinweis{font-size:1.2rem;font-weight:700;color:var(--ci);
  border-left:5px solid var(--ci);padding-left:1.2rem;margin-top:2rem;
  line-height:1.45}

/* Termin-Karte: zweiter Weg neben dem Formular. Auf dem CI-blauen Grund des
   Kontaktabschnitts wird eine weisse Flaeche zu laut — deshalb aufgehellte
   Transparenz wie bei .dunkel .karte, nur mit mehr Luft. */
.termin-karte{background:rgba(255,255,255,.08);border:1px solid var(--linie);
  border-radius:10px;padding:1.8rem;align-self:start}
.termin-karte h3{margin:.5rem 0 .8rem}
.termin-label{display:inline-block;background:rgba(255,255,255,.16);color:#fff;
  font-size:.78rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
  padding:.25rem .7rem;border-radius:999px}
.termin-punkte{list-style:none;padding:0;margin:1rem 0;display:grid;gap:.5rem}
.termin-punkte li{position:relative;padding-left:1.4rem;font-size:.95rem}
.termin-punkte li::before{content:"\2713";position:absolute;left:0;color:#C7D6F0;
  font-weight:700}
.termin-wege{margin:.9rem 0 .4rem;font-weight:600;text-align:center}
.termin-wege a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.termin-adresse{font-size:.88rem;color:#C7D6F0;margin:0}


/* --- Kontaktbereich nach der Designvorschau ---------------------------- */
/* Kopf: Ueberschrift links, Einordnung rechts. Unter 900px gestapelt. */
.kontakt-kopf{display:grid;gap:1rem 3rem;margin-bottom:2.4rem}
/* Kopf jetzt einspaltig — der erklaerende Satz steht darunter im eigenen
   Kasten, nicht mehr daneben. */
.kontakt-kopf h2{margin:0}
/* Zweiter Teil der Ueberschrift heller: eine Zeile, zwei Gewichte.
   #C7D6F0 auf CI-Blau = 5,7:1, also auch als grosse Schrift sicher. */
.kontakt-kopf h2 em{font-style:normal;color:#C7D6F0}
.kontakt-kopf .eyebrow{font-size:.8rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:#C7D6F0;margin:0 0 .5rem}
.kontakt-kopf>p{margin:0;color:#E8EEF9}

/* Formular auf weisser Karte statt transparent — das Eingabefeld ist der
   Kern dieses Abschnitts und darf sich vom Grund abheben. */
.dunkel .formular-block{background:var(--weiss);color:var(--text-hell);
  border-radius:14px;padding:2.2rem;box-shadow:0 18px 40px rgba(0,0,0,.22)}
.dunkel .formular-block h3{color:var(--ci)}
.dunkel .formular-block label{color:var(--text-hell)}
.dunkel .formular-block .klein{color:var(--text-leise)}
.dunkel .formular-block a{color:var(--ci)}
.dunkel .formular-block input[type=text],.dunkel .formular-block input[type=email],
.dunkel .formular-block input[type=tel],.dunkel .formular-block textarea{
  background:#F7F9FC;border:1px solid var(--linie-hell);color:var(--text-hell)}
/* WICHTIG: .dunkel .knopf ist weiss auf blau — auf der weissen Karte waere der
   Knopf unsichtbar. Hier zurueckdrehen auf blau mit weisser Schrift. */
.dunkel .formular-block .knopf{background:var(--ci);color:#fff}
.dunkel .formular-block .knopf:hover{background:var(--ci-d);color:#fff}

/* Termin-Karte eine Stufe heller als der Grund, damit sie als Flaeche liest. */
/* Alle drei Kaesten im Kontaktbereich weiss (Jakob 29.07., „was besser fuer
   A11y ist"): Eingabefelder gehoeren auf hellen Grund, dunkler Text auf Weiss
   erreicht 16,1:1 statt 7,8:1, und weisse Flaechen heben sich vom CI-Blau
   staerker ab als graue. Jede Textfarbe hier explizit — .dunkel vererbt sonst
   helle Toene in die Kaesten hinein. */
.dunkel .termin-karte{background:var(--weiss);color:var(--text-hell);
  border:1px solid var(--linie-hell);box-shadow:0 18px 40px rgba(0,0,0,.22)}
.dunkel .termin-karte h3{color:var(--ci)}
.dunkel .termin-karte p{color:var(--text-mild)}
.dunkel .termin-label{background:var(--hell);color:var(--ci)}
.dunkel .termin-punkte li{color:var(--text-hell)}
.dunkel .termin-punkte li::before{color:var(--ci)}
/* Gleiche Optik wie „Nachricht senden" im Formular gegenueber: CI-Blau mit
   weisser Schrift. Zwei Wege, ein Erscheinungsbild. */
.dunkel .termin-knopf{display:inline-block;width:100%;text-align:center;
  background:var(--ci);color:#fff;border:0;font-weight:700;
  text-decoration:none;padding:.8rem 1.3rem;border-radius:7px;margin-top:.4rem}
.dunkel .termin-knopf:hover{background:var(--ci-d);color:#fff}
.dunkel .termin-wege a{color:var(--ci)}
.dunkel .termin-adresse{color:var(--text-leise)}
.dunkel .karte-hinweis{color:var(--text-leise)}
.dunkel .karte-hinweis a{color:var(--ci)}
.dunkel .termin-karte a:focus-visible{outline-color:var(--ci)}




/* Fuss hell: Kontraste auf #fff — Text #4A5568 7,5:1 · Ueberschriften CI-Blau
   8,3:1 · Links #212529 15,9:1. Die untere Zeile trennt eine Haarlinie, keine
   zweite Flaeche: der Fuss soll nicht in zwei Baender zerfallen. */
/* Die Linie traegt .fuss-unten ueber die volle Breite. Ein eigenes border-top
   am <span> waere nur so breit wie „© 2026 Kandlen IT" — ein kurzer Reststrich
   unter der langen Linie, mittig erst recht auffaellig. */
footer .fuss-copy{background:transparent;color:var(--text-leise)}
footer .fuss-copy a{color:var(--text-leise)}

/* Fester Knopf unten rechts: der Weg zum Erstgespraech, egal wo man steht.
   Links unten sitzt das CCM19-Widget, deshalb rechts. Mindestens 44px hoch
   fuer Touch, Fokus sichtbar. */
.schwebe-gruppe{position:fixed;z-index:90;right:1.2rem;bottom:1.2rem;
  display:flex;flex-direction:column;align-items:flex-end;gap:.5rem}
/* „Nach oben" sekundaer: heller Grund, damit der Beratungsknopf der
   auffaelligere von beiden bleibt. */
.schwebe-gruppe .nach-oben[hidden]{display:none}
.schwebe-gruppe .nach-oben{display:inline-flex;align-items:center;gap:.35rem;
  min-height:40px;padding:.5rem .9rem;background:var(--weiss);color:var(--ci);
  border:1px solid var(--linie-hell);border-radius:var(--radius);
  box-shadow:0 8px 22px rgba(20,35,65,.18);font-size:.82rem;font-weight:700;
  text-decoration:none}
.schwebe-gruppe .nach-oben:hover{background:#E8EEF9;color:var(--ci-d)}
.schwebeknopf{display:inline-flex;align-items:center;gap:.4rem;min-height:44px;
  padding:.8rem 1.1rem;color:#fff;background:var(--ci);
  border:1px solid rgba(255,255,255,.35);border-radius:var(--radius);
  box-shadow:0 12px 34px rgba(20,35,65,.3);font-size:.86rem;font-weight:700;
  text-decoration:none}
.schwebeknopf:hover{background:var(--ci-d);color:#fff}
.schwebeknopf:focus-visible{outline:3px solid #fff;outline-offset:3px}
/* Auf schmalen Schirmen nur das Verb — sonst nimmt der Knopf die halbe Breite. */
@media(max-width:480px){.schwebeknopf span{display:none}}

/* Karte ueber die volle Fensterbreite, der Text drumherum bleibt im Raster. */
/* Karte im Kasten: kompakter als die frueher volle Breite, dafuer neben dem
   Formular. Runde Ecken innen, damit sie im Rahmen sitzt. */
.karte-hinweis{font-size:.84rem;color:#C7D6F0;margin:0;line-height:1.5}

/* Fuss 25 / 25 / 50 (Jakob 29.07.). Unter 900px gestapelt. */
@media(min-width:900px){
  .fspalten{grid-template-columns:1fr 1fr 2fr}
}
.fmarke img{display:block;height:44px;width:auto;margin-bottom:.7rem}
/* Acht Leistungen als zwei Listen zu vier, je 50 % der Leistungsspalte. */
.fliste-duo{display:grid;gap:0 2rem}
@media(min-width:560px){.fliste-duo{grid-template-columns:1fr 1fr}}
.fliste-duo .fliste{margin:0}
/* Untere Zeile mittig (Jakob 29.07.): Copyright, dahinter das Rechtliche —
   als Gruppe zentriert, auf schmalen Breiten bricht sie mittig um. */
/* Unten links sitzt das CCM19-Widget fest im Fenster — ohne Freiraum liegt es
   auf „Nach oben". Deshalb Abstand unter der Zeile statt Inhalt darunter. */
.fuss-unten{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:.6rem 1.6rem;border-top:1px solid var(--linie-hell);margin-top:1.2rem;
  padding:14px 0}
.fuss-unten .frecht{display:flex;flex-wrap:wrap;justify-content:center;
  gap:.6rem 1.4rem;margin:0}
.fuss-unten .fuss-copy{color:var(--text-leise)}
.nach-oben{font-weight:600}


/* Kontakt: wieder zwei Spalten zu je 50 % (0.7.6, Jakob 01.08.). Der Versuch in
   0.7.2 scheiterte an der Verteilung, nicht an der Zweispaltigkeit: rechts stand
   nur die kurze Termin-Karte, darunter klaffte eine Luecke von rund 370px.
   Jetzt traegt das Formular — das mit Abstand hoechste Element — die rechte
   Spalte allein, Hinweis und Termin-Karte zusammen kommen links auf annaehernd
   dieselbe Hoehe. align-items:start, damit die kuerzere Spalte nicht gestreckt
   wird. Unter 900px greift das auto-fit aus .kontakt und stapelt beide Spalten
   in DOM-Reihenfolge: Hinweis → Termin → Formular. */
@media(min-width:900px){
  #kontakt .kontakt{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
}
.kontakt-links{display:grid;gap:1.2rem;align-content:start}
.kontakt-rechts{display:grid;gap:1.2rem;align-content:start}


/* Hinweiskasten: eigenstaendiger Kasten ueber dem Formular (Jakob 29.07.).
   Weiss wie das Formular darunter, aber flacher und ohne Schlagschatten — er
   ordnet ein, er ist kein eigener Weg. */
.dunkel .hinweis-kasten{background:var(--weiss);color:var(--text-hell);
  border-radius:14px;padding:1.4rem 1.6rem;align-self:start}
.kontakt-hinweis{color:var(--text-mild);margin:0;font-size:.97rem}