/**
 * Auftritt der Kwerko-Seiten — Ergänzung zu basis.css, nur für dieses Produkt.
 *
 * Bewusst nicht in gemeinsam/basis.css: Dort liegt das Grundgerüst, das FireCheck mitbenutzt.
 * Was hier steht, ist Kwerkos Handschrift und soll die andere Seite nicht mitverändern.
 *
 * **Beim Ändern die Versionsmarke im HTML hochzählen** (`kwerko.css?v=…`). Ohne sie hält der
 * Browser die Datei fest: Der Knopf „Was dabei nicht automatisch passiert" stand im Dunkelmodus
 * längst in Petrol, während er im geöffneten Fenster weiter dunkel auf dunkel blieb — behoben war
 * es, sichtbar nicht.
 *
 * Vorbild waren die Seiten, an denen sich ein Handwerksbetrieb heute orientiert (ToolTime,
 * Hero). Was die besser machen, ist benennbar und hat wenig mit Geschmack zu tun: Der Aufmacher
 * zeigt das Programm, statt nur davon zu erzählen. Die Überschrift ist groß und eng gesetzt. Es
 * gibt genau eine Farbe fürs Handeln. Und zwischen allem steht Luft.
 */

/* --- Aufmacher --- */

.held--start .held-inhalt {
  max-width: 1160px;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
  padding-top: clamp(40px, 6vw, 72px);
  padding-bottom: clamp(48px, 7vw, 88px);
}

/* Auf schmalen Fenstern steht das Bild unter dem Text — nebeneinander wäre beides zu klein. */
@media (max-width: 900px) {
  .held--start .held-inhalt {
    grid-template-columns: 1fr;
  }
}

.held-augenbraue {
  display: block;
  margin-bottom: 14px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}

.held--start h1 {
  font-size: clamp(2.3rem, 5.2vw, 3.6rem);
  line-height: 1.06;
  letter-spacing: -0.025em;
  max-width: 16ch;
  margin-bottom: 18px;
}

.held--start .held-text p {
  font-size: clamp(1.02rem, 1.5vw, 1.15rem);
  max-width: 46ch;
}

.held--start .knopf-reihe {
  margin-top: 28px;
}

/* Der Aufmacher-Knopf ist größer als ein Knopf im Fließtext: Er ist das Erste, was jemand tut. */
.held--start .knopf {
  padding: 14px 28px;
  font-size: 1.02rem;
  border-radius: 10px;
}

/* Das Bild: eine Karte mit weichem Schatten, leicht angehoben, damit sie über dem Verlauf
   schwebt statt darin zu verschwinden. Rechts angeschnitten wie ein Blick ins Programm. */
.held-bild {
  position: relative;
}

.held-bild img {
  width: 100%;
  /* Ohne das gewinnt die Höhenangabe am Bild selbst (sie steht dort, damit beim Laden kein
     Sprung entsteht) und das Bild bleibt in Originalhöhe stehen. */
  height: auto;
  display: block;
  border-radius: 14px;
  box-shadow: 0 30px 60px rgba(5, 12, 25, 0.45), 0 2px 8px rgba(5, 12, 25, 0.3);
}

/* Das Handybild überlappt die Ecke — der Hinweis darauf, dass zur Bürosoftware eine App
   gehört, ohne dass es jemand lesen muss. */
/* Genauer als `.held-bild img` darüber — sonst gewinnt die allgemeine Regel und das Handybild
   nimmt die volle Breite ein. */
.held-bild img.held-bild-handy {
  position: absolute;
  right: -18px;
  bottom: -34px;
  width: 27%;
  min-width: 118px;
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(5, 12, 25, 0.5);
  border: 3px solid rgba(255, 255, 255, 0.9);
}

@media (max-width: 900px) {
  .held-bild img.held-bild-handy {
    right: 0;
    bottom: -24px;
    width: 30%;
  }
}

/* Unterseiten: derselbe Zuschnitt wie die Startseite, nur ohne Bild. Vorher stand dort eine
   Überschrift in Fließtextgröße über einem schmalen Absatz — daneben wirkte die Startseite wie
   von einer anderen Seite. */
.held--seite .held-inhalt {
  max-width: 1160px;
  padding-top: clamp(28px, 3vw, 44px);
  padding-bottom: clamp(30px, 3.4vw, 48px);
}

.held--seite h1 {
  /* Kleiner als auf der Startseite. Dort trägt die Überschrift die Seite, hier steht sie über
     Inhalt — bei 2,9 rem füllte sie auf einem breiten Bildschirm die halbe Höhe des Aufmachers,
     während daneben nichts stand. */
  font-size: clamp(1.85rem, 3vw, 2.4rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  max-width: 22ch;
}

.held--seite p {
  font-size: 1.05rem;
  max-width: 62ch;
}

/* --- Vertrauensband --- */

/* Kein „empfohlen von" mit fremden Logos und keine erfundenen Zahlen: Was hier steht, lässt
   sich nachprüfen. Genau das ist bei diesem Produkt das Verkaufsargument. */
.vertrauen {
  background: var(--flaeche);
  border-bottom: 1px solid var(--rand);
}

.vertrauen-inhalt {
  max-width: 1160px;
  margin: 0 auto;
  padding: 20px 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  align-items: center;
  justify-content: center;
}

.vertrauen-punkt {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-schwach);
}

.vertrauen-punkt::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--akzent);
  flex-shrink: 0;
}

/* --- Inhalt mit mehr Luft --- */

body.kwerko main {
  max-width: 1080px;
  padding-top: 48px;
}

body.kwerko .karte {
  padding: clamp(22px, 2.4vw, 30px) clamp(24px, 2.6vw, 34px);
  border-radius: 14px;
  margin-bottom: 26px;
}

/* Zwei Spalten statt drei: Bei 1080 Pixeln Breite passten drei Karten nebeneinander, aber
   „Material wird gebucht, nicht erinnert" stand darin dreizeilig — eine Überschrift, die
   umbricht, weil die Spalte zu schmal ist, wirkt gedrängt. */
body.kwerko .raster {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
  gap: 22px;
  margin-bottom: 26px;
}

body.kwerko .raster .karte h2 {
  font-size: clamp(1.25rem, 1.9vw, 1.45rem);
}

body.kwerko h2 {
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
  letter-spacing: -0.015em;
  margin-top: 44px;
}

body.kwerko .karte > h2:first-child {
  margin-top: 0;
}

body.kwerko .knopf {
  padding: 12px 24px;
  border-radius: 10px;
}

/* Abschnittsüberschrift über einer Gruppe von Karten — gibt der Seite Gliederung, statt eine
   Karte an die nächste zu reihen. */
.abschnitt-titel {
  max-width: 1080px;
  margin: 56px auto 6px;
  padding: 0 24px;
}

.abschnitt-titel h2 {
  margin: 0;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  letter-spacing: -0.02em;
}

.abschnitt-titel p {
  margin: 6px 0 0;
  color: var(--text-schwach);
  max-width: 62ch;
}

/* --- Wechselnde Bild-Text-Reihen --- */

.zeile-bild {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  margin-bottom: 34px;
}

.zeile-bild--gedreht {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
}

.zeile-bild--gedreht .zeile-bild-text {
  order: 2;
}

@media (max-width: 860px) {
  .zeile-bild,
  .zeile-bild--gedreht {
    grid-template-columns: 1fr;
  }

  .zeile-bild--gedreht .zeile-bild-text {
    order: 0;
  }
}

.zeile-bild-text h3 {
  margin: 0 0 10px;
  font-size: clamp(1.2rem, 2.2vw, 1.5rem);
  letter-spacing: -0.015em;
}

.zeile-bild-text p {
  margin: 0;
  color: var(--text-schwach);
}

/* Zwei Absätze hintereinander klebten aneinander — `margin: 0` galt für beide. */
.zeile-bild-text p + p {
  margin-top: 12px;
}

.zeile-bild img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--rand);
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(16, 24, 40, 0.12);
}

/* --- Abschluss --- */

.abschluss {
  max-width: 1080px;
  margin: 60px auto 0;
  padding: clamp(32px, 5vw, 52px) clamp(24px, 4vw, 48px);
  border-radius: 18px;
  background: var(--kopf-hintergrund);
  color: #fff;
  text-align: center;
}

.abschluss h2 {
  margin: 0 0 10px;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  letter-spacing: -0.02em;
  color: #fff;
}

.abschluss p {
  margin: 0 auto;
  max-width: 56ch;
  color: rgba(255, 255, 255, 0.85);
}

.abschluss .knopf-reihe {
  justify-content: center;
}

/* Ein hochkantes Handybild in einer Bild-Text-Reihe: schmaler halten und wie die übrigen Bilder
   rahmen, sonst steht es nackt und übergroß neben dem Text. */
.zeile-bild figure.bild--hoch {
  max-width: 300px;
  margin: 0 auto;
}

.zeile-bild figure.bild--hoch img {
  border: 1px solid var(--rand);
  border-radius: 20px;
  box-shadow: 0 18px 40px rgba(16, 24, 40, 0.14);
}

.zeile-bild-text p + p.schwach {
  margin-top: 12px;
  font-size: 0.86rem;
}

/* Der Schriftzug allein trägt die Kopfzeile — das Zeichen davor ist weg. Damit er nicht wie ein
   Navigationspunkt aussieht, ein Stück größer und enger gesetzt als der Rest der Zeile. */
body.kwerko .marke {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Zwei Handybilder nebeneinander statt eines Bildschirmfotos — auf der App-Seite ist das
   Hochformat die Sache selbst. Sie stehen leicht versetzt, damit sie nicht wie zwei Kacheln
   wirken. */
.held-bild--paar {
  display: flex;
  gap: 18px;
  justify-content: center;
  align-items: flex-start;
}

.held-bild--paar img {
  width: 46%;
  max-width: 230px;
  border-radius: 20px;
  border: 3px solid rgba(255, 255, 255, 0.9);
}

.held-bild--paar img:last-child {
  margin-top: 34px;
}

/* Der einzige farbige Punkt in der Kopfzeile. Auf jeder Seite dieselbe Handlung, damit niemand
   erst zum Kontakt navigieren muss, um eine Demo zu bekommen. */
body.kwerko .kopf-knopf {
  padding: 8px 18px;
  font-size: 0.92rem;
  background: #fff;
  color: var(--akzent-dunkel);
  border-color: rgba(255, 255, 255, 0.6);
}

body.kwerko .kopf-knopf:hover {
  background: #eef2f7;
}

/* Auf schmalen Fenstern rutscht der Knopf unter die Navigation und bekommt die volle Zeile —
   nebeneinander wäre beides gedrängt. */
@media (max-width: 620px) {
  body.kwerko nav {
    gap: 12px 16px;
  }

  body.kwerko .kopf-knopf {
    order: 99;
  }
}

/* Zweite Handlung auf hellem Grund: umrandet statt gefüllt. basis.css kennt nur die Variante
   für den dunklen Aufmacher (.knopf--rand), die dort weiß umrandet ist. */
body.kwerko .knopf--umriss {
  background: transparent;
  color: var(--akzent-dunkel);
  border-color: var(--akzent);
}

body.kwerko .knopf--umriss:hover {
  background: var(--akzent);
  color: #fff;
}

/* Im Dunkelmodus sind --akzent und --akzent-dunkel das Navy der Marke — auf einer dunklen Karte
   also dunkel auf dunkel. Der Knopf war praktisch unsichtbar. Dort deshalb der helle Petrolton,
   der auch für Verweise gilt. */
/* Dunkel: gewählt über den Umschalter (thema.js) … */

  :root[data-theme="dunkel"] body.kwerko .knopf--umriss {
    color: var(--verweis);
    border-color: var(--verweis);
  }


  :root[data-theme="dunkel"] body.kwerko .knopf--umriss:hover {
    background: var(--verweis);
    color: #0f1720;
  }


  /* Dasselbe für den gefüllten Knopf: Navy auf fast schwarzer Karte hebt sich kaum ab. */
  :root[data-theme="dunkel"] body.kwerko .karte .knopf:not(.knopf--umriss):not(.knopf--hell):not(.knopf--rand) {
    background: var(--verweis);
    color: #0f1720;
  }


  :root[data-theme="dunkel"] body.kwerko .karte .knopf:not(.knopf--umriss):not(.knopf--hell):not(.knopf--rand):hover {
    background: #8fe0c8;
  }

/* … oder nichts gewählt und das System ist dunkel. */
@media (prefers-color-scheme: dark) {

  :root:not([data-theme="hell"]) body.kwerko .knopf--umriss {
    color: var(--verweis);
    border-color: var(--verweis);
  }


  :root:not([data-theme="hell"]) body.kwerko .knopf--umriss:hover {
    background: var(--verweis);
    color: #0f1720;
  }


  /* Dasselbe für den gefüllten Knopf: Navy auf fast schwarzer Karte hebt sich kaum ab. */
  :root:not([data-theme="hell"]) body.kwerko .karte .knopf:not(.knopf--umriss):not(.knopf--hell):not(.knopf--rand) {
    background: var(--verweis);
    color: #0f1720;
  }


  :root:not([data-theme="hell"]) body.kwerko .karte .knopf:not(.knopf--umriss):not(.knopf--hell):not(.knopf--rand):hover {
    background: #8fe0c8;
  }
}

/* Die Formatliste steht für das, was bei den Mitbewerbern eine Reihe fremder Logos ist: zwei
   Spalten, damit sieben Zeilen nicht wie eine Aufzählung ohne Ende wirken. */
.formate {
  columns: 2;
  column-gap: 32px;
  margin: 0;
  padding-left: 20px;
}

.formate li {
  break-inside: avoid;
  margin-bottom: 6px;
}

@media (max-width: 640px) {
  .formate {
    columns: 1;
  }
}

/* --- Bildgrößen --- */

/* Bildschirmfotos sind hier Beleg, nicht Hauptdarsteller. In voller Spaltenbreite wurde eine
   Rechnungsliste so groß, dass sie den Text darum erschlug — und lesbar wird sie dadurch nicht,
   weil die Schrift darin ohnehin klein ist. Bei den Vorbildern sind sie ebenfalls kleiner als
   die Textspalte und mittig gesetzt. */
body.kwerko figure.bild {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

body.kwerko .held--start .held-bild {
  max-width: 560px;
  margin-left: auto;
}

body.kwerko .held--start .held-bild--paar {
  max-width: 460px;
}

body.kwerko .zeile-bild img {
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

/* --- Ablauf in Schritten --- */

/* Drei Schritte untereinander in Fließtextgröße füllten einen halben Bildschirm. Nebeneinander
   sind sie das, was sie sein sollen: ein Blick auf den Ablauf, nicht ein Kapitel darüber. */
body.kwerko .karte ol.schritte {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 20px 28px;
  margin-top: 18px;
}

body.kwerko ol.schritte li {
  padding-left: 38px;
  font-size: 0.95rem;
}

body.kwerko ol.schritte li strong {
  display: block;
  margin-bottom: 2px;
}

body.kwerko ol.schritte li::before {
  width: 26px;
  height: 26px;
  font-size: 0.82rem;
}

/* Hochformat gehört gesondert gedeckelt.
 *
 * Die Obergrenze für Bilder gilt der Breite — bei einem Handybild (1206 × 2622) heißt 520 Pixel
 * breit aber 1128 Pixel hoch, und damit wurde es größer statt kleiner. `figure.bild--hoch` aus
 * basis.css hatte dafür bereits 320 Pixel vorgesehen; die Regel für Bilder in Karten weiter oben
 * ist gleich stark und stand später, also gewann sie. Deshalb hier zuletzt und ausdrücklich —
 * und zusätzlich über die Höhe, weil sie es ist, die den Platz frisst. */
body.kwerko figure.bild--hoch {
  max-width: 280px;
  margin-left: auto;
  margin-right: auto;
}

body.kwerko figure.bild--hoch img {
  max-height: 440px;
  width: auto;
  margin-left: auto;
  margin-right: auto;
}

body.kwerko .held--start .held-bild--paar img {
  max-height: 420px;
}

/* --- Kopfzeile --- */

/* Auf jeder Seite dieselbe Zeile. Sie unterschied sich vorher an zwei Stellen: Auf der Preisseite
   stand „Preise" vor „Branchen" statt danach, und der aktive Punkt bekam den Standard-Unterstrich
   des Browsers — ein Strich, der je nach Wortlänge anders sitzt und nach Textlink aussieht statt
   nach Navigation. Jetzt trägt der aktive Punkt einen eigenen Balken in gleichbleibendem Abstand.
   Nur die Startseite darf sich unterscheiden: Dort steht die Zeile über dem großen Aufmacher. */
body.kwerko .kopf-inhalt {
  max-width: 1160px;
  padding-top: 16px;
  padding-bottom: 16px;
  gap: 24px;
}

body.kwerko nav {
  align-items: center;
  gap: 26px;
}

body.kwerko nav a {
  position: relative;
  padding: 4px 0;
  font-size: 0.95rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
}

body.kwerko nav a:hover {
  color: #fff;
  text-decoration: none;
}

body.kwerko nav a[aria-current="page"] {
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}

body.kwerko nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.85);
}

/* Der Knopf ist kein Navigationspunkt und bekommt deshalb auch keinen Balken. */
body.kwerko nav a.kopf-knopf,
body.kwerko nav a.kopf-knopf:hover {
  text-decoration: none;
}

body.kwerko nav a.kopf-knopf::after {
  content: none;
}

/* In einer Bild-Text-Reihe stehen Bild und Text nebeneinander. Ist das Bild hoch und der Text
   kurz, klaffte darunter eine Lücke — beide oben ausrichten sieht ordentlicher aus als beides
   um eine gedachte Mitte zu zentrieren. */
body.kwerko .zeile-bild {
  align-items: start;
}

body.kwerko .zeile-bild-text {
  padding-top: 6px;
}

/* Ein einzelnes Handybild im Aufmacher: mittig und schmaler als das Paar, sonst wirkt es
   verloren. */
body.kwerko .held-bild--einzeln {
  max-width: 260px;
  margin: 0 auto;
}

body.kwerko .held-bild--einzeln img {
  border-radius: 20px;
  border: 3px solid rgba(255, 255, 255, 0.9);
}

/* ======================================================================================
 * Hellversion, 29.09.2026 — gilt für alle Kwerko-Seiten
 *
 * Nach dem Vergleich mit HERO, Plancraft, Craftnote, Streit und ToolTime: hell und freundlich
 * statt dunkler Verläufe. Weiche, getönte Flächen im Wechsel (Petrol, Blaugrau, warmes
 * Off-White), große gerundete Tafeln, einfache Strichsymbole, ein klarer Knopf in Petrol.
 * Die Marke bleibt Kwerko: Navy #2C4870 für Überschriften-Akzente, Petrol #0F766E fürs Handeln.
 * Dunkel wird die Seite nur, wenn das System des Besuchers dunkel eingestellt ist.
 *
 * Alle Farben stehen als Variablen oben; der Dunkelblock setzt nur sie neu.
 * ====================================================================================== */

:root {
  --k-primaer: #2c4870;
  --k-dunkel: #16233d;
  --k-petrol: #0f766e;
  --k-petrol-dunkel: #0b5d56;
  --k-petrol-hell: #5eead4;

  --k-seite: #ffffff;
  --k-tint-blau: #eef3f9;
  --k-tint-petrol: #e7f4f2;
  --k-tint-warm: #fbf6ee;
  --k-tint-grau: #f3f5f8;
  --k-tafel-rand: rgba(22, 35, 61, 0.06);

  --k-ueberschrift: #16233d;
  --k-akzent-text: #2c4870;
  --k-augenbraue: #0f766e;
  --k-ikon: #0f766e;
  --k-ikon-grund: #ffffff;

  --k-knopf: #0f766e;
  --k-knopf-hover: #0b5d56;
  --k-knopf-text: #ffffff;
  --k-knopf2-grund: #ffffff;
  --k-knopf2-rand: #c5d0dd;
  --k-knopf2-text: #16233d;

  --k-kopfleiste: rgba(255, 255, 255, 0.94);
  --k-nav: #3b4658;
  --k-fokus: #0f766e;

  --k-fuss-grund: #f1f4f7;
  --k-fuss-text: #4a5568;
  --k-fuss-link: #1c2333;
  --k-fuss-titel: #5b6373;

  --k-schatten: 0 1px 2px rgba(16, 24, 40, 0.05), 0 14px 34px rgba(16, 24, 40, 0.09);
  --k-schatten-bild: 0 20px 44px rgba(22, 35, 61, 0.16), 0 2px 6px rgba(22, 35, 61, 0.08);
  --k-rund: 24px;
}

/* Dunkel: gewählt über den Umschalter (thema.js) … */

  :root[data-theme="dunkel"] {
    --k-seite: #10141c;
    --k-tint-blau: #151c28;
    --k-tint-petrol: #0f2427;
    --k-tint-warm: #1b1915;
    --k-tint-grau: #161a22;
    --k-tafel-rand: rgba(255, 255, 255, 0.06);

    --k-ueberschrift: #eef2f8;
    --k-akzent-text: #9cc3f0;
    --k-augenbraue: #5eead4;
    --k-ikon: #5eead4;
    --k-ikon-grund: #1b2230;

    --k-knopf: #14a394;
    --k-knopf-hover: #22b8a8;
    --k-knopf-text: #06201d;
    --k-knopf2-grund: transparent;
    --k-knopf2-rand: #3a4456;
    --k-knopf2-text: #e8ecf3;

    --k-kopfleiste: rgba(16, 20, 28, 0.94);
    --k-nav: #c3cad6;
    --k-fokus: #5eead4;

    --k-fuss-grund: #0d1118;
    --k-fuss-text: #a3abbb;
    --k-fuss-link: #e8ecf3;
    --k-fuss-titel: #8b93a3;

    --k-schatten: 0 1px 2px rgba(0, 0, 0, 0.4), 0 14px 34px rgba(0, 0, 0, 0.35);
    --k-schatten-bild: 0 20px 44px rgba(0, 0, 0, 0.45);
  }

/* … oder nichts gewählt und das System ist dunkel. */
@media (prefers-color-scheme: dark) {

  :root:not([data-theme="hell"]) {
    --k-seite: #10141c;
    --k-tint-blau: #151c28;
    --k-tint-petrol: #0f2427;
    --k-tint-warm: #1b1915;
    --k-tint-grau: #161a22;
    --k-tafel-rand: rgba(255, 255, 255, 0.06);

    --k-ueberschrift: #eef2f8;
    --k-akzent-text: #9cc3f0;
    --k-augenbraue: #5eead4;
    --k-ikon: #5eead4;
    --k-ikon-grund: #1b2230;

    --k-knopf: #14a394;
    --k-knopf-hover: #22b8a8;
    --k-knopf-text: #06201d;
    --k-knopf2-grund: transparent;
    --k-knopf2-rand: #3a4456;
    --k-knopf2-text: #e8ecf3;

    --k-kopfleiste: rgba(16, 20, 28, 0.94);
    --k-nav: #c3cad6;
    --k-fokus: #5eead4;

    --k-fuss-grund: #0d1118;
    --k-fuss-text: #a3abbb;
    --k-fuss-link: #e8ecf3;
    --k-fuss-titel: #8b93a3;

    --k-schatten: 0 1px 2px rgba(0, 0, 0, 0.4), 0 14px 34px rgba(0, 0, 0, 0.35);
    --k-schatten-bild: 0 20px 44px rgba(0, 0, 0, 0.45);
  }
}

/* --- Bedienbarkeit --- */

.sprungmarke {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 50;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--k-knopf);
  color: var(--k-knopf-text);
  font-weight: 600;
  text-decoration: none;
}

.sprungmarke:focus {
  top: 12px;
}

body.kwerko a:focus-visible,
body.kwerko summary:focus-visible,
body.kwerko button:focus-visible {
  outline: 3px solid var(--k-fokus);
  outline-offset: 3px;
  border-radius: 6px;
}

/* --- Symbole (Strichzeichnungen, inline im HTML) --- */

svg.ikon,
svg.mini,
svg.fakt-ikon,
svg.ablauf-ikon,
svg.daten-ikon {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

svg.mini {
  width: 16px;
  height: 16px;
  stroke-width: 2.4;
  color: var(--k-petrol);
}

/* --- Kopfzeile: hell, bleibt beim Scrollen oben --- */

body.kwerko .kopf {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--k-kopfleiste);
  border-bottom: 1px solid var(--rand);
  color: var(--k-ueberschrift);
}

@supports (backdrop-filter: blur(8px)) {
  body.kwerko .kopf {
    backdrop-filter: saturate(1.4) blur(10px);
  }
}

body.kwerko .kopf-inhalt {
  padding-top: 12px;
  padding-bottom: 12px;
}

body.kwerko .kopf .marke {
  color: var(--k-ueberschrift);
}

body.kwerko nav a {
  color: var(--k-nav);
}

body.kwerko nav a:hover,
body.kwerko nav a[aria-current="page"] {
  color: var(--k-ueberschrift);
}

body.kwerko nav a[aria-current="page"]::after {
  background: var(--k-petrol);
}

body.kwerko .kopf-knopf,
body.kwerko nav a.kopf-knopf {
  background: var(--k-knopf);
  color: var(--k-knopf-text);
  border-color: transparent;
  border-radius: 999px;
  padding: 9px 20px;
}

body.kwerko .kopf-knopf:hover,
body.kwerko nav a.kopf-knopf:hover {
  background: var(--k-knopf-hover);
  color: var(--k-knopf-text);
}

/* Auf dem Telefon: Marke und Knopf in einer Zeile, die Punkte darunter — per
   `display: contents`, ohne Skript und ohne Änderung am HTML. Dort nicht klebend, sonst
   frisst die zweizeilige Leiste ein Viertel des Bildschirms. */
@media (max-width: 620px) {
  body.kwerko .kopf {
    position: static;
  }

  body.kwerko .kopf-inhalt {
    gap: 10px 18px;
  }

  body.kwerko .kopf-inhalt > nav {
    display: contents;
  }

  body.kwerko .kopf-inhalt::after {
    content: "";
    order: 2;
    flex-basis: 100%;
    height: 0;
  }

  body.kwerko .kopf-inhalt > nav > a {
    order: 3;
    font-size: 0.9rem;
  }

  body.kwerko .kopf-inhalt > nav > a[href="/"] {
    display: none;
  }

  body.kwerko .kopf-inhalt > nav > a.kopf-knopf {
    order: 1;
    margin-left: auto;
    padding: 7px 15px;
    font-size: 0.88rem;
  }
}

/* --- Aufmacher (alle Seiten) --- */

body.kwerko .kopfbereich,
body.kwerko .held {
  color: var(--k-ueberschrift);
}

body.kwerko .held h1 {
  color: var(--k-ueberschrift);
}

body.kwerko .held h1 .akzent {
  color: var(--k-akzent-text);
}

body.kwerko .held p {
  color: var(--text-schwach);
}

body.kwerko .held-augenbraue {
  color: var(--k-augenbraue);
}

body.kwerko .held--start .held-inhalt {
  padding-top: clamp(36px, 5vw, 64px);
  padding-bottom: clamp(44px, 6vw, 76px);
}

body.kwerko .held--start h1 {
  max-width: 15ch;
  font-size: clamp(2.2rem, 4.4vw, 3.3rem);
  hyphens: manual;
}

/* Knöpfe im Aufmacher und im Abschluss: gefüllt in Petrol, der zweite weiß umrandet. Die
   Klassen heißen noch --hell/--rand aus der Zeit des dunklen Aufmachers. */
body.kwerko .knopf {
  border-radius: 999px;
}

body.kwerko .kopfbereich .knopf--hell,
body.kwerko .abschluss .knopf--hell {
  background: var(--k-knopf);
  color: var(--k-knopf-text);
  border-color: transparent;
  box-shadow: 0 6px 16px rgba(15, 118, 110, 0.22);
}

body.kwerko .kopfbereich .knopf--hell:hover,
body.kwerko .abschluss .knopf--hell:hover {
  background: var(--k-knopf-hover);
}

body.kwerko .kopfbereich .knopf--rand,
body.kwerko .abschluss .knopf--rand {
  background: var(--k-knopf2-grund);
  color: var(--k-knopf2-text);
  border-color: var(--k-knopf2-rand);
}

body.kwerko .kopfbereich .knopf--rand:hover,
body.kwerko .abschluss .knopf--rand:hover {
  border-color: var(--k-primaer);
  background: var(--k-knopf2-grund);
}

/* Gefüllte Knöpfe in Karten der Unterseiten: ebenfalls Petrol. */
body.kwerko .karte .knopf:not(.knopf--umriss):not(.knopf--hell):not(.knopf--rand),
body.kwerko .paket .knopf:not(.knopf--umriss) {
  background: var(--k-knopf);
  color: var(--k-knopf-text);
}

body.kwerko .karte .knopf:not(.knopf--umriss):not(.knopf--hell):not(.knopf--rand):hover,
body.kwerko .paket .knopf:not(.knopf--umriss):hover {
  background: var(--k-knopf-hover);
}

/* Zusicherungen unter den Knöpfen als kleine Kapseln mit Haken. */
ul.beruhigung {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

ul.beruhigung li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px 5px 10px;
  border: 1px solid var(--rand);
  border-radius: 999px;
  background: var(--k-seite);
  font-size: 0.86rem;
  color: var(--text);
}

.abschluss ul.beruhigung {
  justify-content: center;
}

/* Bildschirmfoto im schlichten Browser-Rahmen — keine erfundene Adresse. */
.browser {
  background: #fff;
  border: 1px solid var(--rand);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--k-schatten-bild);
}

.browser-leiste {
  display: flex;
  gap: 6px;
  align-items: center;
  height: 24px;
  padding: 0 12px;
  background: #eef1f5;
  border-bottom: 1px solid #dde2ea;
}

.browser-leiste span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #c3cbd6;
}

.browser img {
  display: block;
  width: 100%;
  height: auto;
}

.schaubild {
  position: relative;
  max-width: 600px;
  margin-left: auto;
  padding-bottom: 36px;
}

/* Das Handy überlappt die Ecke: Rahmen aus CSS, das Bildschirmfoto ist echt. */
.handy {
  position: absolute;
  right: -14px;
  bottom: 0;
  width: 27%;
  min-width: 112px;
  padding: 5px;
  border-radius: 26px;
  background: #0b1220;
  box-shadow: 0 22px 44px rgba(22, 35, 61, 0.3);
}

.handy img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 21px;
}

@media (max-width: 900px) {
  .schaubild {
    margin: 8px auto 0;
    padding-right: 18px;
  }

  .handy {
    right: 0;
    width: 26%;
  }
}

/* App-Seite: Handybild im Aufmacher */
body.kwerko .held-bild img,
body.kwerko .held-bild--einzeln img,
body.kwerko .held-bild--paar img {
  border-color: #fff;
  box-shadow: var(--k-schatten-bild);
}

/* --- Faktenband --- */

.fakten {
  background: var(--k-seite);
  border-top: 1px solid var(--rand);
  border-bottom: 1px solid var(--rand);
}

.fakten-inhalt {
  max-width: 1160px;
  margin: 0 auto;
  padding: 22px 24px;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px 28px;
}

.fakten-inhalt li {
  display: grid;
  grid-template-columns: 40px 1fr;
  column-gap: 12px;
  align-items: center;
  line-height: 1.35;
}

svg.fakt-ikon {
  grid-row: span 2;
  width: 40px;
  height: 40px;
  padding: 9px;
  border-radius: 12px;
  background: var(--k-tint-petrol);
  color: var(--k-ikon);
}

.fakten-inhalt strong {
  font-size: 0.94rem;
  color: var(--k-ueberschrift);
}

.fakten-inhalt span {
  font-size: 0.84rem;
  color: var(--text-schwach);
}

@media (max-width: 980px) {
  .fakten-inhalt {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .fakten-inhalt {
    grid-template-columns: 1fr;
  }
}

/* --- Abschnitte der Startseite --- */

body.kwerko main.start {
  max-width: none;
  padding: 0;
  background: var(--k-seite);
}

.breite {
  max-width: 1160px;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}

.breite--schmal {
  max-width: 820px;
}

.abschnitt {
  padding-block: clamp(48px, 6vw, 80px);
}

.abschnitt--knapp {
  padding-block: clamp(32px, 4vw, 48px);
}

.abschnitt--tafeln {
  padding-top: 0;
}

.abschnitt--warm {
  background: var(--k-tint-warm);
}

.abschnitt--daten {
  background: var(--k-tint-petrol);
}

.abschnitt-kopf {
  max-width: 720px;
  margin-bottom: clamp(26px, 3.5vw, 40px);
}

.abschnitt-kopf--mitte {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.augenbraue {
  display: block;
  margin-bottom: 10px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--k-augenbraue);
}

body.kwerko .abschnitt h2 {
  margin: 0;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--k-ueberschrift);
  text-wrap: balance;
}

.abschnitt-kopf p,
.reihe-text > p {
  margin: 12px 0 0;
  font-size: 1.05rem;
  color: var(--text-schwach);
}

.mitte {
  text-align: center;
  margin: 24px 0 0;
}

a.pfeil {
  font-weight: 600;
  color: var(--verweis);
  text-decoration: none;
}

a.pfeil::after {
  content: " →";
}

a.pfeil:hover {
  text-decoration: underline;
}

/* --- Ablauf in sechs Schritten, mit Symbolen --- */

ol.ablauf {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
  position: relative;
}

/* Linie hinter den Symbolen — vom ersten bis zum letzten. */
ol.ablauf::before {
  content: "";
  position: absolute;
  left: calc((100% - 80px) / 12);
  right: calc((100% - 80px) / 12);
  top: 28px;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--k-petrol) 0 6px, transparent 6px 12px);
  opacity: 0.35;
}

ol.ablauf li {
  position: relative;
  text-align: center;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--text-schwach);
}

svg.ablauf-ikon {
  position: relative;
  display: block;
  width: 56px;
  height: 56px;
  margin: 0 auto 12px;
  padding: 15px;
  border-radius: 18px;
  background: var(--k-tint-petrol);
  color: var(--k-ikon);
  box-shadow: 0 0 0 6px var(--k-seite);
}

ol.ablauf li:last-child svg.ablauf-ikon {
  background: var(--k-petrol);
  color: #fff;
}

ol.ablauf strong {
  display: block;
  margin-bottom: 2px;
  font-size: 1rem;
  color: var(--k-ueberschrift);
}

@media (max-width: 900px) {
  ol.ablauf {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px 16px;
  }

  ol.ablauf::before {
    display: none;
  }
}

@media (max-width: 520px) {
  ol.ablauf {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --- Getönte Tafeln mit Bild und Text --- */

.tafeln {
  display: grid;
  gap: 22px;
}

.tafel {
  padding: clamp(26px, 4vw, 52px);
  border-radius: var(--k-rund);
  border: 1px solid var(--k-tafel-rand);
}

.tafel--petrol {
  background: var(--k-tint-petrol);
}

.tafel--blau {
  background: var(--k-tint-blau);
}

.tafel--warm {
  background: var(--k-tint-warm);
}

.tafel--grau {
  background: var(--k-tint-grau);
}

.reihe {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(26px, 4.5vw, 56px);
  align-items: center;
}

.reihe--gedreht {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}

.reihe--gedreht .reihe-text {
  order: 2;
}

body.kwerko .reihe-text h2 {
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
}

.reihe-bild {
  margin: 0;
}

@media (max-width: 900px) {
  .reihe,
  .reihe--gedreht {
    grid-template-columns: 1fr;
  }

  .reihe--gedreht .reihe-text {
    order: 0;
  }
}

ul.haken {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

ul.haken li {
  position: relative;
  padding-left: 30px;
  line-height: 1.5;
}

/* Haken in einem kleinen Kreis — freundlicher als ein nackter Strich. */
ul.haken li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2em;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--k-petrol);
}

ul.haken li::after {
  content: "";
  position: absolute;
  left: 7px;
  top: calc(0.2em + 5px);
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Sperrbildschirm und Dynamic Island auf heller Fläche, Ecken per Rundung zugeschnitten. */
.reihe-bild--ios {
  padding: clamp(20px, 3vw, 34px);
  border-radius: 20px;
  background: linear-gradient(160deg, #d9e4ef, #c5d3e2);
  display: grid;
  gap: 16px;
  justify-items: center;
}

.reihe-bild--ios img {
  display: block;
  width: 100%;
  height: auto;
}

.reihe-bild--ios img.ios-sperr {
  max-width: 440px;
  border-radius: 5.6% / 14.6%;
  box-shadow: 0 14px 30px rgba(22, 35, 61, 0.18);
}

.reihe-bild--ios img.ios-insel {
  max-width: 400px;
  border-radius: 9% / 25%;
  box-shadow: 0 14px 30px rgba(22, 35, 61, 0.28);
}

/* Dunkel: gewählt über den Umschalter (thema.js) … */

  :root[data-theme="dunkel"] .reihe-bild--ios {
    background: linear-gradient(160deg, #22324a, #16233d);
  }

/* … oder nichts gewählt und das System ist dunkel. */
@media (prefers-color-scheme: dark) {

  :root:not([data-theme="hell"]) .reihe-bild--ios {
    background: linear-gradient(160deg, #22324a, #16233d);
  }
}

/* --- Band: Formate und Gewerke --- */

.band {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.band > div {
  padding: 26px 28px;
  border: 1px solid var(--rand);
  border-radius: var(--k-rund);
  background: var(--k-seite);
}

body.kwerko .abschnitt h2.band-titel {
  font-size: 1.2rem;
  letter-spacing: -0.01em;
}

.band p {
  margin: 14px 0 0;
}

ul.marken {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

ul.marken li {
  padding: 6px 13px;
  border-radius: 999px;
  background: var(--k-tint-blau);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--k-ueberschrift);
}

ul.marken--links li {
  padding: 0;
  background: none;
}

ul.marken--links a {
  display: inline-block;
  padding: 6px 15px;
  border-radius: 999px;
  background: var(--k-tint-petrol);
  color: var(--k-ueberschrift);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
}

ul.marken--links a:hover {
  background: var(--k-petrol);
  color: #fff;
}

@media (max-width: 760px) {
  .band {
    grid-template-columns: 1fr;
  }
}

/* --- Ihre Daten: hell getönt, weiße Karten mit Symbol --- */

.datenraster {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.datenraster > div {
  padding: 24px 22px;
  border-radius: 20px;
  background: var(--k-seite);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
  border: 1px solid var(--k-tafel-rand);
}

svg.daten-ikon {
  width: 44px;
  height: 44px;
  padding: 10px;
  margin-bottom: 14px;
  border-radius: 14px;
  background: var(--k-tint-petrol);
  color: var(--k-ikon);
}

.datenraster h3 {
  margin: 0 0 6px;
  font-size: 1.05rem;
  color: var(--k-ueberschrift);
}

.datenraster p {
  margin: 0;
  font-size: 0.93rem;
  color: var(--text-schwach);
}

@media (max-width: 980px) {
  .datenraster {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .datenraster {
    grid-template-columns: 1fr;
  }
}

/* --- Stimmen (noch ausgeblendet, siehe Kommentar im HTML) --- */

.stimmen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 18px;
}

.stimme {
  margin: 0;
  padding: 24px 26px;
  border-radius: 20px;
  background: var(--k-tint-warm);
}

.stimme blockquote {
  margin: 0 0 18px;
  font-size: 1.05rem;
}

.stimme blockquote p {
  margin: 0;
}

.stimme figcaption {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 12px;
  align-items: center;
}

.stimme figcaption img {
  grid-row: span 2;
  width: 48px;
  height: 48px;
  border-radius: 50%;
}

.stimme figcaption span {
  font-size: 0.88rem;
  color: var(--text-schwach);
}

/* --- Pakete --- */

.pakete {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}

.paket {
  display: flex;
  flex-direction: column;
  padding: 28px 26px 24px;
  border: 1px solid var(--rand);
  border-radius: var(--k-rund);
  background: var(--k-seite);
  box-shadow: var(--k-schatten);
}

.paket h3,
body.kwerko .paket h2.paket-titel {
  margin: 0;
  font-size: 1.3rem;
  letter-spacing: -0.01em;
  color: var(--k-ueberschrift);
}

.paket-fuer {
  margin: 8px 0 0;
  font-size: 0.95rem;
  color: var(--text-schwach);
  line-height: 1.5;
}

.paket-preis {
  margin: auto 0 0;
  padding-top: 18px;
  font-weight: 700;
  color: var(--k-petrol);
}

.pakete--voll .paket-preis {
  margin-top: 16px;
  padding: 10px 0;
  border-top: 1px solid var(--rand);
  border-bottom: 1px solid var(--rand);
}

.paket ul.haken {
  margin-top: 16px;
  font-size: 0.94rem;
}

.paket .knopf-reihe {
  margin-top: auto;
  padding-top: 22px;
}

.paket .knopf {
  width: 100%;
  text-align: center;
}

.pakete-hinweis {
  margin: 22px 0 0;
  color: var(--text-schwach);
  text-align: center;
}

.pakete-hinweis a.pfeil {
  margin-left: 6px;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .pakete {
    grid-template-columns: 1fr;
    max-width: 520px;
    margin: 0 auto;
  }
}

/* Dunkel: gewählt über den Umschalter (thema.js) … */

  :root[data-theme="dunkel"] .paket-preis {
    color: var(--k-petrol-hell);
  }


  :root[data-theme="dunkel"] ul.haken li::before {
    background: #14a394;
  }

/* … oder nichts gewählt und das System ist dunkel. */
@media (prefers-color-scheme: dark) {

  :root:not([data-theme="hell"]) .paket-preis {
    color: var(--k-petrol-hell);
  }


  :root:not([data-theme="hell"]) ul.haken li::before {
    background: #14a394;
  }
}

/* --- Häufige Fragen: aufklappbar --- */

.fragen {
  display: grid;
  gap: 10px;
}

.fragen details {
  border-radius: 16px;
  background: var(--k-seite);
  border: 1px solid var(--k-tafel-rand);
  padding: 0 22px;
}

.fragen summary {
  position: relative;
  padding: 17px 40px 17px 0;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--k-ueberschrift);
  cursor: pointer;
  list-style: none;
}

.fragen summary::-webkit-details-marker {
  display: none;
}

.fragen summary::before,
.fragen summary::after {
  content: "";
  position: absolute;
  right: 4px;
  top: 50%;
  width: 14px;
  height: 2px;
  background: var(--k-petrol);
  transition: transform 0.15s;
}

.fragen summary::after {
  transform: rotate(90deg);
}

.fragen details[open] summary::after {
  transform: rotate(0deg);
}

.fragen details p {
  margin: 0 0 18px;
  color: var(--text-schwach);
}

/* Dunkel: gewählt über den Umschalter (thema.js) … */

  :root[data-theme="dunkel"] .fragen summary::before, :root[data-theme="dunkel"] .fragen summary::after {
    background: var(--k-petrol-hell);
  }

/* … oder nichts gewählt und das System ist dunkel. */
@media (prefers-color-scheme: dark) {

  :root:not([data-theme="hell"]) .fragen summary::before, :root:not([data-theme="hell"]) .fragen summary::after {
    background: var(--k-petrol-hell);
  }
}

/* --- Abschluss --- */

body.kwerko .abschluss {
  max-width: none;
  margin: 0;
  padding: clamp(34px, 5vw, 56px) clamp(22px, 4vw, 48px);
  border-radius: var(--k-rund);
  background: var(--k-tint-petrol);
  color: var(--text);
  text-align: center;
}

body.kwerko .abschnitt .abschluss h2 {
  margin-bottom: 10px;
  color: var(--k-ueberschrift);
}

body.kwerko .abschluss p {
  margin: 0 auto;
  max-width: 52ch;
  color: var(--text-schwach);
}

body.kwerko .abschluss .knopf-reihe {
  justify-content: center;
}

/* --- Fußzeile, auf allen Seiten --- */

body.kwerko footer {
  background: var(--k-fuss-grund);
  border-top: 1px solid var(--rand);
  color: var(--k-fuss-text);
  font-size: 0.92rem;
}

.fuss-raster {
  max-width: 1160px;
  margin: 0 auto;
  padding: 44px 24px 26px;
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: 30px;
}

.fuss-marke p {
  margin: 10px 0 0;
  max-width: 34ch;
}

body.kwerko footer .marke {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--k-ueberschrift);
}

body.kwerko footer nav.fuss-spalte {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 8px;
}

body.kwerko .fuss-spalte h2 {
  margin: 0 0 4px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--k-fuss-titel);
}

body.kwerko footer a,
body.kwerko footer nav.fuss-spalte a {
  padding: 0;
  font-size: 0.92rem;
  font-weight: 400;
  color: var(--k-fuss-link);
  text-decoration: none;
}

body.kwerko footer a:hover,
body.kwerko footer nav.fuss-spalte a:hover {
  color: var(--k-petrol);
  text-decoration: underline;
}

body.kwerko footer .marke:hover {
  text-decoration: none;
}

.fuss-zeile {
  max-width: 1112px;
  margin: 0 auto;
  padding: 16px 0 24px;
  border-top: 1px solid var(--rand);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 24px;
  justify-content: space-between;
  font-size: 0.85rem;
}

@media (max-width: 1160px) {
  .fuss-zeile {
    margin: 0 24px;
  }
}

@media (max-width: 760px) {
  .fuss-raster {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fuss-marke {
    grid-column: 1 / -1;
  }
}

/* --- Unterseiten: Karten runder, Überschriften in Navy --- */

body.kwerko main:not(.start) .karte {
  border-radius: 20px;
}

body.kwerko main:not(.start) h2 {
  color: var(--k-ueberschrift);
}

/* --- Preisseite --- */

.pakete--voll {
  margin-bottom: 26px;
}

.vergleich th[scope="col"],
.vergleich td {
  text-align: center;
}

.vergleich tbody th {
  font-weight: 500;
  background: transparent;
}

.vergleich .ja {
  color: var(--k-petrol);
  font-weight: 700;
}

.vergleich .nein {
  color: var(--text-schwach);
}

/* Dunkel: gewählt über den Umschalter (thema.js) … */

  :root[data-theme="dunkel"] .vergleich .ja {
    color: var(--k-petrol-hell);
  }

/* … oder nichts gewählt und das System ist dunkel. */
@media (prefers-color-scheme: dark) {

  :root:not([data-theme="hell"]) .vergleich .ja {
    color: var(--k-petrol-hell);
  }
}

.alles-drin {
  columns: 3 220px;
  column-gap: 28px;
  margin-top: 14px;
}

.alles-drin li {
  break-inside: avoid;
}

.unsichtbar {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

body.kwerko .karte ul.haken {
  margin-top: 12px;
}

/* Feinschliff nach Sichtprüfung */
.held--start ul.beruhigung {
  gap: 6px;
}

.held--start ul.beruhigung li {
  padding: 4px 11px 4px 9px;
  font-size: 0.82rem;
}

.abschnitt--tafeln {
  padding-bottom: clamp(24px, 3vw, 36px);
}

.abschnitt--abschluss {
  padding-top: clamp(36px, 4vw, 56px);
}

.pakete-hinweis--oben {
  margin: 0 0 30px;
}

body.kwerko main:not(.start) {
  padding-top: 32px;
}

/* App-Seite: das einzelne Handybild stand wegen einer stärkeren Regel für .held-bild in voller
   Breite da (über 1000 px hoch). */
body.kwerko .held--start .held-bild--einzeln {
  max-width: 280px;
  margin: 0 auto;
}

/* Hell/Dunkel-Umschalter in der Kopfzeile (thema.js) — wie in der Kwerko-Weboberfläche. */
.thema-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--rand);
  background: var(--flaeche);
  color: var(--text);
  cursor: pointer;
}
.thema-knopf:hover {
  border-color: var(--akzent);
}
.thema-knopf:focus-visible {
  outline: 2px solid var(--verweis);
  outline-offset: 2px;
}

/* ======================================================================================
 * Rahmen dunkel, Mitte hell — 29.09.2026, zweite Runde
 *
 * Kopfzeile, Aufmacher, Schluss-Band und Fuß stehen in beiden Ansichten im Navy der Marke;
 * dazwischen bleibt es hell und getönt. Der dunkle Rahmen gibt der Seite Halt und lässt die
 * Bildschirmfotos im Aufmacher leuchten; die helle Mitte bleibt freundlich und gut lesbar.
 * ====================================================================================== */

:root {
  --k-navy-verlauf:
    radial-gradient(900px 520px at 80% 30%, rgba(94, 234, 212, 0.14), transparent 62%),
    linear-gradient(160deg, #16233d 0%, #24395c 100%);
  --k-auf-dunkel: #ffffff;
  --k-auf-dunkel-schwach: rgba(255, 255, 255, 0.8);
  --k-auf-dunkel-rand: rgba(255, 255, 255, 0.2);
  --k-mint: #5eead4;
  --k-karte-schatten: 0 1px 2px rgba(16, 24, 40, 0.04), 0 8px 24px rgba(16, 24, 40, 0.06);
}

/* --- Kopfzeile --- */

body.kwerko .kopf {
  background: rgba(22, 35, 61, 0.96);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--k-auf-dunkel);
}

body.kwerko .kopf .marke {
  color: #fff;
}

body.kwerko .kopf nav a {
  color: rgba(255, 255, 255, 0.76);
}

body.kwerko .kopf nav a:hover,
body.kwerko .kopf nav a[aria-current="page"] {
  color: #fff;
}

body.kwerko .kopf nav a[aria-current="page"]::after {
  background: var(--k-mint);
}

body.kwerko .kopf nav a.kopf-knopf,
body.kwerko .kopf nav a.kopf-knopf:hover {
  color: #fff;
  background: #0f766e;
}

body.kwerko .kopf nav a.kopf-knopf:hover {
  background: #0b5d56;
}

body.kwerko .kopf .thema-knopf {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.24);
  color: #fff;
}

body.kwerko .kopf .thema-knopf:hover {
  border-color: var(--k-mint);
}

body.kwerko .kopf a:focus-visible,
body.kwerko .kopf button:focus-visible,
body.kwerko .kopfbereich a:focus-visible,
body.kwerko .abschluss-band a:focus-visible,
body.kwerko footer a:focus-visible {
  outline-color: var(--k-mint);
}

/* --- Aufmacher (alle Seiten) --- */

body.kwerko .kopfbereich {
  background: var(--k-navy-verlauf);
  color: #fff;
}

body.kwerko .held,
body.kwerko .held h1 {
  color: #fff;
}

body.kwerko .held h1 .akzent {
  color: #8ee3d6;
}

body.kwerko .held p {
  color: var(--k-auf-dunkel-schwach);
}

body.kwerko .held-augenbraue {
  color: var(--k-mint);
}

body.kwerko .kopfbereich .knopf--hell,
body.kwerko .abschluss-band .knopf--hell {
  background: #0f766e;
  color: #fff;
  border-color: rgba(94, 234, 212, 0.35);
  box-shadow: 0 8px 22px rgba(15, 118, 110, 0.35);
}

body.kwerko .kopfbereich .knopf--hell:hover,
body.kwerko .abschluss-band .knopf--hell:hover {
  background: #0b5d56;
}

body.kwerko .kopfbereich .knopf--rand,
body.kwerko .abschluss-band .knopf--rand {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.42);
}

body.kwerko .kopfbereich .knopf--rand:hover,
body.kwerko .abschluss-band .knopf--rand:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: #fff;
}

body.kwerko .kopfbereich ul.beruhigung li,
body.kwerko .abschluss-band ul.beruhigung li {
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--k-auf-dunkel-rand);
  color: rgba(255, 255, 255, 0.9);
}

body.kwerko .kopfbereich svg.mini,
body.kwerko .abschluss-band svg.mini {
  color: var(--k-mint);
}

/* Bilder im Aufmacher: kräftiger Schatten und ein heller Hauch dahinter, damit sie sich vom
   Navy abheben. */
body.kwerko .kopfbereich .schaubild::before {
  content: "";
  position: absolute;
  inset: -8% -6% 4% 4%;
  background: radial-gradient(closest-side, rgba(142, 227, 214, 0.22), transparent);
  filter: blur(10px);
  z-index: 0;
}

body.kwerko .kopfbereich .browser,
body.kwerko .kopfbereich .handy {
  position: relative;
  z-index: 1;
}

body.kwerko .kopfbereich .browser {
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 34px 80px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.06);
}

body.kwerko .kopfbereich .handy {
  position: absolute;
  z-index: 2;
  box-shadow: 0 26px 56px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.16);
}

/* --- Einheitliche Karten in der hellen Mitte --- */

.karte-k,
body.kwerko .datenraster > div,
body.kwerko .band > div,
body.kwerko .fragen details,
body.kwerko .paket {
  border-radius: 20px;
  border: 1px solid var(--k-tafel-rand);
  background: var(--k-seite);
  box-shadow: var(--k-karte-schatten);
}

:root[data-theme="dunkel"] {
  --k-karte-schatten: 0 1px 2px rgba(0, 0, 0, 0.4);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="hell"]) {
    --k-karte-schatten: 0 1px 2px rgba(0, 0, 0, 0.4);
  }
}

.abschnitt--grau {
  background: var(--k-tint-grau);
}

.breite--mittel {
  max-width: 960px;
}

body.kwerko .abschnitt-kopf h2 + p {
  margin-top: 10px;
}

.knopf-reihe--mitte {
  justify-content: center;
  margin-top: 28px;
}

body.kwerko .knopf--haupt {
  background: var(--k-knopf);
  color: var(--k-knopf-text);
  box-shadow: 0 6px 16px rgba(15, 118, 110, 0.22);
}

body.kwerko .knopf--haupt:hover {
  background: var(--k-knopf-hover);
}

body.kwerko .knopf--zweit {
  background: var(--k-knopf2-grund);
  color: var(--k-knopf2-text);
  border-color: var(--k-knopf2-rand);
}

body.kwerko .knopf--zweit:hover {
  background: var(--k-knopf2-grund);
  border-color: var(--k-primaer);
}

/* --- „So sieht's aus": drei echte Bildschirme --- */

.blick {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.blick-karte {
  margin: 0;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid var(--k-tafel-rand);
  background: var(--k-seite);
  box-shadow: var(--k-karte-schatten);
}

.blick-karte img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: left top;
  border-bottom: 1px solid var(--rand);
}

.blick-karte figcaption {
  padding: 16px 20px 18px;
  font-size: 0.92rem;
  color: var(--text-schwach);
  line-height: 1.5;
}

.blick-karte figcaption strong {
  display: block;
  margin-bottom: 2px;
  font-size: 1rem;
  color: var(--k-ueberschrift);
}

@media (max-width: 900px) {
  .blick {
    grid-template-columns: 1fr;
    max-width: 520px;
    margin: 0 auto;
  }
}

/* --- „Warum Kwerko": Vergleich --- */

.vergleich-rahmen {
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid var(--k-tafel-rand);
  background: var(--k-seite);
  box-shadow: var(--k-karte-schatten);
}

table.warum {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  font-size: 0.95rem;
}

table.warum th,
table.warum td {
  padding: 15px 20px;
  border-bottom: 1px solid var(--rand);
  vertical-align: top;
  text-align: left;
}

table.warum tbody tr:last-child th,
table.warum tbody tr:last-child td {
  border-bottom: 0;
}

table.warum thead th {
  background: transparent;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-schwach);
}

table.warum tbody th {
  width: 18%;
  background: transparent;
  font-weight: 700;
  color: var(--k-ueberschrift);
}

table.warum td {
  color: var(--text-schwach);
}

table.warum .warum-kwerko {
  background: var(--k-tint-petrol);
  color: var(--k-ueberschrift);
  font-weight: 600;
}

table.warum thead .warum-kwerko {
  color: var(--k-augenbraue);
}

/* Schmal: jede Zeile als kleiner Block, die Spaltenköpfe wandern vor die Werte. */
@media (max-width: 640px) {
  table.warum thead {
    display: none;
  }

  table.warum,
  table.warum tbody,
  table.warum tr,
  table.warum th,
  table.warum td {
    display: block;
    width: auto;
  }

  table.warum tr {
    border-bottom: 1px solid var(--rand);
  }

  table.warum tbody tr:last-child {
    border-bottom: 0;
  }

  table.warum th,
  table.warum td {
    border: 0;
    padding: 6px 18px;
  }

  table.warum tbody th {
    width: auto;
    padding-top: 16px;
  }

  table.warum td:last-child {
    padding-bottom: 16px;
    margin: 4px 12px 0;
    border-radius: 10px;
    padding-left: 12px;
  }

  table.warum td:nth-of-type(1)::before {
    content: "Häufig: ";
    font-weight: 600;
  }

  table.warum td:nth-of-type(2)::before {
    content: "Kwerko: ";
    color: var(--k-augenbraue);
  }
}

/* --- Pakete mit Symbol --- */

.paket svg.daten-ikon {
  margin-bottom: 14px;
}

/* --- Schluss-Band: dunkel, direkt vor dem Fuß --- */

.abschluss-band {
  background: var(--k-navy-verlauf);
  color: #fff;
  padding-block: clamp(52px, 7vw, 88px);
}

body.kwerko .abschluss-band .abschluss {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 24px;
  border-radius: 0;
  background: none;
  text-align: center;
}

body.kwerko .abschluss-band h2 {
  margin: 0 0 10px;
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  letter-spacing: -0.02em;
  color: #fff;
}

body.kwerko .abschluss-band p {
  margin: 0 auto;
  max-width: 52ch;
  font-size: 1.08rem;
  color: var(--k-auf-dunkel-schwach);
}

body.kwerko .abschluss-band .knopf-reihe,
body.kwerko .abschluss-band ul.beruhigung {
  justify-content: center;
}

/* --- Fuß: dunkel --- */

body.kwerko footer {
  background: #111c31;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
}

body.kwerko footer .marke {
  color: #fff;
}

body.kwerko .fuss-spalte h2 {
  color: rgba(255, 255, 255, 0.55);
}

body.kwerko footer a,
body.kwerko footer nav.fuss-spalte a {
  color: rgba(255, 255, 255, 0.88);
}

body.kwerko footer a:hover,
body.kwerko footer nav.fuss-spalte a:hover {
  color: var(--k-mint);
}

body.kwerko .fuss-zeile {
  border-top-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.6);
}

/* Dunkle Ansicht: Seite ist schon fast schwarz; Rahmen und Fuß bleiben Navy, damit sie sich
   weiter abheben. */
:root[data-theme="dunkel"] body.kwerko footer {
  background: #0d1526;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="hell"]) body.kwerko footer {
    background: #0d1526;
  }
}

/* ======================================================================================
 * Feinschliff nach dem Vergleich mit HERO, Plancraft, ToolTime, Craftnote (29.09.2026)
 * - Aufmacher: Bild bekommt mehr Fläche und ragt nach rechts, Überschrift kräftiger
 * - Siegel-Zeile direkt unter dem Aufmacher (nur nachprüfbare Formate, keine Fremdlogos)
 * - größere, ruhigere Abschnittsüberschriften, einheitlicher Abstand
 * - Telefon: größere Tippflächen in der Navigation
 * ====================================================================================== */

body.kwerko .held--start .held-inhalt {
  max-width: 1240px;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.25fr);
  gap: clamp(28px, 4vw, 56px);
  padding-top: clamp(40px, 6vw, 84px);
  padding-bottom: clamp(52px, 7vw, 96px);
}

body.kwerko .held--start h1 {
  font-size: clamp(2.3rem, 4.6vw, 3.6rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.03em;
  max-width: 13ch;
}

body.kwerko .held--start .held-text > p {
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  line-height: 1.6;
  max-width: 44ch;
}

body.kwerko .kopfbereich .knopf {
  padding: 15px 30px;
  font-size: 1.04rem;
}

body.kwerko .kopfbereich .schaubild {
  max-width: 720px;
  margin-right: -40px;
  padding-bottom: 44px;
}

body.kwerko .kopfbereich .handy {
  width: 24%;
  right: -10px;
}

@media (max-width: 1320px) {
  body.kwerko .kopfbereich .schaubild {
    margin-right: 0;
  }
}

@media (max-width: 900px) {
  body.kwerko .held--start .held-inhalt {
    grid-template-columns: 1fr;
  }

  body.kwerko .kopfbereich .schaubild {
    margin: 12px auto 0;
  }

  body.kwerko .kopfbereich .knopf-reihe .knopf {
    flex: 1 1 100%;
    text-align: center;
  }
}

/* Siegel-Zeile */
.siegel {
  background: #111c31;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.siegel-inhalt {
  max-width: 1160px;
  margin: 0 auto;
  padding: 14px 24px;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 10px;
}

.siegel-inhalt li {
  padding: 5px 13px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}

.siegel-inhalt li:first-child {
  border-color: rgba(94, 234, 212, 0.45);
  color: #8ee3d6;
}

/* Typografie der Mitte */
body.kwerko .abschnitt h2 {
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.025em;
}

body.kwerko .reihe-text h2 {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
}

.abschnitt-kopf p,
.reihe-text > p {
  font-size: 1.08rem;
  line-height: 1.65;
}

.abschnitt {
  padding-block: clamp(56px, 7vw, 96px);
}

.tafeln {
  gap: 28px;
}

.tafel {
  padding: clamp(28px, 4.5vw, 60px);
}

/* Bilder in den Tafeln: ganz randlos in der Tafel, damit sie größer wirken */
.tafel .reihe-bild .browser {
  box-shadow: 0 24px 50px rgba(22, 35, 61, 0.16), 0 2px 6px rgba(22, 35, 61, 0.06);
}

.reihe {
  grid-template-columns: minmax(0, 4.4fr) minmax(0, 7.6fr);
}

.reihe--gedreht {
  grid-template-columns: minmax(0, 7.6fr) minmax(0, 4.4fr);
}

@media (max-width: 900px) {
  .reihe,
  .reihe--gedreht {
    grid-template-columns: 1fr;
  }
}

/* Telefon: Navigation mit größeren Tippflächen */
@media (max-width: 620px) {
  body.kwerko .kopf-inhalt > nav > a:not(.kopf-knopf) {
    padding: 8px 0;
  }

  body.kwerko .thema-knopf {
    width: 40px;
    height: 40px;
  }

  body.kwerko .held--start h1 {
    font-size: clamp(2.1rem, 9vw, 2.6rem);
  }
}

/* Runde 2: Aufmacher auf die Breite der Kopfzeile, Überschrift in drei statt vier Zeilen */
body.kwerko .held--start .held-inhalt {
  max-width: 1160px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
}

body.kwerko .held--start h1 {
  font-size: clamp(2.2rem, 4vw, 3.25rem);
  max-width: 15ch;
}

body.kwerko .kopfbereich .schaubild {
  margin-right: -64px;
}

body.kwerko .kopfbereich .handy {
  width: 22%;
  bottom: 4px;
}

@media (max-width: 1320px) {
  body.kwerko .kopfbereich .schaubild {
    margin-right: 0;
  }
}

.abschnitt {
  padding-block: clamp(52px, 6vw, 84px);
}

/* Logo wie in der Anwendung (Seitenleiste): K-Kachel mit „werko" — steht im dunklen Kopf. */
.kopf .marke img {
  display: block;
  height: 32px;
  width: auto;
}

/* ======================================================================================
 * Unterseiten im Stil der Startseite (Funktionen, Branchen, App) — 29.09.2026
 * ====================================================================================== */

body.kwerko .held--unterseite .held-inhalt {
  max-width: 1160px;
  padding-top: clamp(28px, 4vw, 48px);
  padding-bottom: clamp(44px, 6vw, 72px);
}

body.kwerko .held--unterseite h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.028em;
  max-width: 20ch;
  margin: 6px 0 16px;
}

body.kwerko .held--unterseite p {
  font-size: clamp(1.02rem, 1.4vw, 1.15rem);
  max-width: 60ch;
}

body.kwerko .held--unterseite .knopf-reihe {
  margin-top: 26px;
}

.krumen {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 22px;
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.6);
}

body.kwerko .krumen a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
}

body.kwerko .krumen a:hover {
  color: #fff;
  text-decoration: underline;
}

.krumen [aria-current] {
  color: #fff;
}

body.kwerko main.unterseite {
  padding-top: 0;
}

/* Inhaltsverzeichnis links, Blöcke rechts */
.fk-raster {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 44px;
  padding-block: clamp(40px, 5vw, 64px);
}

.fk-inhalt {
  position: sticky;
  top: 90px;
  align-self: start;
  padding: 20px 20px 16px;
  border-radius: 18px;
  border: 1px solid var(--k-tafel-rand);
  background: var(--k-tint-grau);
  font-size: 0.9rem;
}

.fk-inhalt strong {
  display: block;
  margin-bottom: 10px;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-schwach);
}

.fk-inhalt ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

body.kwerko .fk-inhalt a {
  display: block;
  padding: 5px 10px;
  border-radius: 8px;
  color: var(--text);
  text-decoration: none;
  line-height: 1.35;
}

body.kwerko .fk-inhalt a:hover {
  background: var(--k-seite);
  color: var(--k-ueberschrift);
}

.fk-bloecke {
  display: grid;
  gap: 22px;
  min-width: 0;
}

.fblock {
  scroll-margin-top: 90px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 26px;
  padding: clamp(24px, 3.4vw, 40px);
  border-radius: 22px;
  border: 1px solid var(--k-tafel-rand);
  background: var(--k-seite);
  box-shadow: var(--k-karte-schatten);
}

.fblock--bild {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  align-items: center;
}

.fk-bloecke > .fblock--bild:nth-of-type(even) .fblock-text {
  order: 2;
}

.fblock:nth-of-type(4n + 1) { background: linear-gradient(180deg, var(--k-tint-petrol), var(--k-seite) 70%); }
.fblock:nth-of-type(4n + 2) { background: linear-gradient(180deg, var(--k-tint-blau), var(--k-seite) 70%); }
.fblock:nth-of-type(4n + 3) { background: linear-gradient(180deg, var(--k-tint-warm), var(--k-seite) 70%); }

body.kwerko .fblock h2 {
  margin: 0;
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--k-ueberschrift);
}

.fblock-text > p {
  margin: 10px 0 0;
  color: var(--text-schwach);
  font-size: 1.02rem;
}

.fblock svg.daten-ikon {
  margin-bottom: 14px;
  background: var(--k-seite);
  box-shadow: 0 0 0 1px var(--k-tafel-rand);
}

.fmehr {
  margin: 16px 0 0;
}

.fbild {
  margin: 0;
}

.fbild .browser {
  box-shadow: 0 18px 40px rgba(22, 35, 61, 0.14);
}

.fbild img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 1080px) {
  .fblock--bild {
    grid-template-columns: 1fr;
  }

  .fk-bloecke > .fblock--bild:nth-of-type(even) .fblock-text {
    order: 0;
  }
}

@media (max-width: 900px) {
  .fk-raster {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  /* Auf schmalen Fenstern als waagerecht wischbare Leiste */
  .fk-inhalt {
    position: static;
    padding: 14px 16px;
  }

  .fk-inhalt ol {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 6px;
    padding-bottom: 4px;
  }

  body.kwerko .fk-inhalt a {
    white-space: nowrap;
    background: var(--k-seite);
    border: 1px solid var(--rand);
    border-radius: 999px;
    padding: 7px 13px;
  }
}

/* Handlungsaufforderung zwischen den Blöcken */
.zwischen-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  padding: 22px 28px;
  border-radius: 20px;
  background: var(--k-navy-verlauf);
  color: #fff;
}

.zwischen-cta strong {
  display: block;
  font-size: 1.12rem;
}

.zwischen-cta span {
  display: block;
  margin-top: 2px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.95rem;
}

body.kwerko .zwischen-cta .knopf--haupt {
  background: #0f766e;
  color: #fff;
  border-color: rgba(94, 234, 212, 0.35);
}

body.kwerko .zwischen-cta .knopf--haupt:hover {
  background: #0b5d56;
}

body.kwerko .zwischen-cta a:focus-visible {
  outline-color: var(--k-mint);
}

/* Verweis-Karten */
.verweise-titel {
  margin-bottom: 16px !important;
}

.verweise {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

body.kwerko a.verweis-karte {
  display: block;
  padding: 20px 20px 18px;
  border-radius: 18px;
  border: 1px solid var(--k-tafel-rand);
  background: var(--k-seite);
  box-shadow: var(--k-karte-schatten);
  color: var(--text-schwach);
  text-decoration: none;
  font-size: 0.92rem;
  transition: border-color 0.15s, transform 0.15s;
}

body.kwerko a.verweis-karte:hover {
  border-color: var(--k-petrol);
  transform: translateY(-2px);
}

.verweis-karte svg.daten-ikon {
  margin-bottom: 12px;
}

.verweis-karte strong {
  display: block;
  font-size: 1.02rem;
  color: var(--k-ueberschrift);
}

@media (max-width: 900px) {
  .verweise {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 460px) {
  .verweise {
    grid-template-columns: 1fr;
  }
}

/* Branchen-Übersicht: große Kacheln */
.gewerk-kacheln {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

body.kwerko a.gewerk-kachel {
  position: relative;
  display: block;
  padding: 28px 28px 56px;
  border-radius: 22px;
  border: 1px solid var(--k-tafel-rand);
  background: var(--k-seite);
  box-shadow: var(--k-karte-schatten);
  color: var(--text-schwach);
  text-decoration: none;
  transition: border-color 0.15s, transform 0.15s;
}

body.kwerko a.gewerk-kachel:hover {
  border-color: var(--k-petrol);
  transform: translateY(-2px);
}

.gewerk-kachel:nth-child(1) { background: linear-gradient(180deg, var(--k-tint-petrol), var(--k-seite)) !important; }
.gewerk-kachel:nth-child(2) { background: linear-gradient(180deg, var(--k-tint-blau), var(--k-seite)) !important; }
.gewerk-kachel:nth-child(3) { background: linear-gradient(180deg, var(--k-tint-warm), var(--k-seite)) !important; }
.gewerk-kachel:nth-child(4) { background: linear-gradient(180deg, var(--k-tint-grau), var(--k-seite)) !important; }

.gewerk-kachel h2 {
  margin: 0 0 8px;
  font-size: 1.35rem;
  color: var(--k-ueberschrift);
}

.gewerk-kachel ul.haken {
  margin-top: 14px;
  color: var(--text);
}

.gewerk-kachel .pfeil {
  position: absolute;
  left: 28px;
  bottom: 22px;
}

@media (max-width: 760px) {
  .gewerk-kacheln {
    grid-template-columns: 1fr;
  }
}

/* Hochkantes Handybild in einem Block */
.fbild--hoch {
  display: flex;
  justify-content: center;
}

.handy--frei {
  position: static !important;
  width: min(260px, 70%) !important;
}

.fk-raster > *,
.fk-inhalt {
  min-width: 0;
}

/* App-Seite: zwei Handys im Aufmacher */
.handy-paar {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  min-height: 460px;
}

.handy-paar::before {
  content: "";
  position: absolute;
  inset: 10% 5%;
  background: radial-gradient(closest-side, rgba(142, 227, 214, 0.22), transparent);
  filter: blur(10px);
}

body.kwerko .handy-paar .handy--hinten {
  width: 210px !important;
  transform: translate(40px, -30px) rotate(-4deg);
  opacity: 0.95;
}

body.kwerko .handy-paar .handy--vorn {
  width: 240px !important;
  transform: translateX(-30px);
  z-index: 2;
}

@media (max-width: 900px) {
  .handy-paar {
    min-height: 0;
    margin-top: 10px;
  }

  body.kwerko .handy-paar .handy--hinten {
    width: 42% !important;
    transform: translate(18px, -14px) rotate(-4deg);
  }

  body.kwerko .handy-paar .handy--vorn {
    width: 48% !important;
    transform: translateX(-12px);
  }
}

/* Blöcke auf Seiten ohne Inhaltsverzeichnis */
.abschnitt--bloecke .fk-bloecke {
  gap: 24px;
}

.fbild--hoch .handy--frei {
  width: min(240px, 70%) !important;
}

.fblock--bild:has(.fbild--hoch) {
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.8fr);
}

@media (max-width: 1080px) {
  .fblock--bild:has(.fbild--hoch) {
    grid-template-columns: 1fr;
  }
}

.gewerk-tag {
  margin: 10px 0 0;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--k-seite);
  border: 1px dashed var(--rand);
  font-size: 0.9rem;
}

.gewerk-kachel svg.daten-ikon {
  margin-bottom: 14px;
}

ol.ablauf--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
ol.ablauf--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

@media (max-width: 900px) {
  ol.ablauf--4, ol.ablauf--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

ol.ablauf--4::before { left: 12.5%; right: 12.5%; }
ol.ablauf--5::before { left: 10%; right: 10%; }

body.kwerko .gewerk-kachel h2 {
  font-size: 1.4rem;
  letter-spacing: -0.015em;
}

.fbild.reihe-bild--ios img.ios-sperr {
  max-width: 460px;
}

/* Beides sind <nav>-Elemente und erbten die Regeln der Kopfzeile (Flex, großer Abstand). */
body.kwerko nav.fk-inhalt {
  display: block;
}

body.kwerko nav.krumen {
  gap: 8px;
  align-items: baseline;
}

body.kwerko nav.krumen a,
body.kwerko nav.krumen span {
  padding: 0;
  font-size: 0.86rem;
  font-weight: 500;
}

body.kwerko nav.krumen a::after {
  content: none;
}

body.kwerko nav.fk-inhalt a {
  font-weight: 500;
  font-size: 0.9rem;
}

body.kwerko nav.fk-inhalt a::after {
  content: none;
}

/* Die zweispaltige Regel für den Aufmacher (Runde 2) stand nach der Telefon-Regel und gewann
   dort — auf dem Telefon wieder untereinander. */
@media (max-width: 900px) {
  body.kwerko .held--start .held-inhalt {
    grid-template-columns: 1fr;
  }
}