/* Developed by Enjyn Gruppe — https://enjyn.de */

header { border-bottom: 1px solid var(--linie); background: var(--grund); position: sticky; top: 0; z-index: 10; }
.kopf { display: flex; align-items: center; gap: 16px; height: 62px; }
.marke { display: flex; align-items: center; gap: 10px; font-family: var(--disp); font-weight: 800; font-size: 19px; letter-spacing: -.02em; }
.marke svg { width: 26px; height: 26px; color: var(--siegel); }
.navi { margin-left: auto; display: flex; align-items: center; gap: 24px; font-size: 14px; font-weight: 500; color: var(--text-weich); }
.navi a { color: inherit; text-decoration: none; }
.navi a:hover { color: var(--text); }
@media (max-width: 860px) { .navi a:not(.knopf) { display: none; } }

.knopf { font: inherit; font-weight: 600; font-size: 14px; text-decoration: none;
  border-radius: 7px; padding: 9px 17px; display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--linie-stark); background: var(--karte); color: var(--text); cursor: pointer;
  transition: transform .16s cubic-bezier(.23,1,.32,1), border-color .18s ease, background .18s ease; }
.knopf:hover { border-color: var(--text-fein); }
.knopf:active { transform: scale(.975); }
.knopf.voll { background: var(--siegel); border-color: var(--siegel); color: var(--auf-siegel); }
.knopf.voll:hover { background: var(--siegel-tief); border-color: var(--siegel-tief); }
.knopf.gross { padding: 13px 24px; font-size: 15px; }

/* Millimeterpapier unter dem Hero. Zwei Verläufe, keine Bilddatei, und so schwach, dass
   man es eher spürt als sieht. */
.hero-feld { position: relative; }
/* Zwei Teilungen übereinander, wie auf echtem Millimeterpapier: feine Kästchen und
   darüber die kräftigeren Zentimeterlinien. Eine einzelne Teilung sieht nach Tabelle aus,
   erst die zweite macht daraus Papier. */
.papierraster {
  background-image:
    linear-gradient(var(--raster-fein) 1px, transparent 1px),
    linear-gradient(90deg, var(--raster-fein) 1px, transparent 1px),
    linear-gradient(var(--raster) 1px, transparent 1px),
    linear-gradient(90deg, var(--raster) 1px, transparent 1px);
  background-size: 9px 9px, 9px 9px, 45px 45px, 45px 45px;
  background-position: -1px -1px;
}
.hero-feld::before {
  content: ""; position: absolute; inset: -40px 0 0; pointer-events: none;
  background-image:
    linear-gradient(var(--raster-fein) 1px, transparent 1px),
    linear-gradient(90deg, var(--raster-fein) 1px, transparent 1px),
    linear-gradient(var(--raster) 1px, transparent 1px),
    linear-gradient(90deg, var(--raster) 1px, transparent 1px);
  background-size: 9px 9px, 9px 9px, 45px 45px, 45px 45px;
  background-position: -1px -1px;
  mask-image: radial-gradient(128% 96% at 74% 2%, #000 10%, transparent 70%);
  -webkit-mask-image: radial-gradient(128% 96% at 74% 2%, #000 10%, transparent 70%);
}
.hero { position: relative; padding: 72px 0 0; display: grid; grid-template-columns: 1.08fr .92fr; gap: 56px; align-items: start; }
@media (max-width: 920px) { .hero { grid-template-columns: 1fr; gap: 36px; padding-top: 46px; } }

.kennung { display: inline-flex; align-items: center; gap: 9px; font-family: var(--mono);
  font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-weich);
  border: 1px solid var(--linie-stark); border-radius: 5px; padding: 5px 11px; margin-bottom: 26px;
  background: var(--karte); }
.kennung i { width: 6px; height: 6px; border-radius: 50%; background: var(--siegel); }

h1 { font-family: var(--disp); font-size: clamp(38px, 5.4vw, 60px); line-height: 1.04;
  letter-spacing: -.032em; font-weight: 800; margin-bottom: 20px; text-wrap: balance; }
h1 span { color: var(--siegel); }
.vorspann { font-size: 18px; color: var(--text-weich); max-width: 46ch; margin-bottom: 30px;
  line-height: 1.62; text-wrap: pretty; }
.tasten { display: flex; gap: 11px; flex-wrap: wrap; margin-bottom: 26px; }

.belege { border-top: 1px solid var(--linie); }
.beleg { display: flex; align-items: baseline; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--linie); font-size: 14.5px; }
.beleg b { font-weight: 600; color: var(--text); min-width: 0; }
.beleg span { color: var(--text-weich); font-size: 13.5px; }
.beleg .pruef { font-family: var(--mono); font-size: 11px; color: var(--siegel); letter-spacing: .04em;
  margin-left: auto; white-space: nowrap; align-self: center; }

.protokoll { background: var(--karte); border: 1px solid var(--linie-stark); border-radius: 10px;
  overflow: hidden; box-shadow: var(--schatten); }
.prot-kopf { display: flex; align-items: center; gap: 10px; padding: 13px 16px;
  border-bottom: 1px solid var(--linie); background: var(--grund-tief); }
.prot-kopf b { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .02em; }
.prot-kopf .zeit { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--text-fein); }
.prot-zeile { display: grid; grid-template-columns: 76px 1fr auto; gap: 12px; align-items: baseline;
  padding: 10px 16px; border-bottom: 1px solid var(--linie); font-size: 13.5px; }
.prot-zeile:last-of-type { border-bottom: 0; }
.prot-zeile .uhr { font-family: var(--mono); font-size: 11.5px; color: var(--text-fein); }
.prot-zeile .was { color: var(--text-weich); }
.prot-zeile .was b { color: var(--text); font-weight: 600; }
.marke-ok, .marke-hin, .marke-kri { font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: .05em; padding: 2px 7px; border-radius: 4px; white-space: nowrap; }
.marke-ok  { color: var(--siegel);  background: var(--siegel-fein); }
.marke-hin { color: var(--achtung); background: var(--achtung-fein); }
.marke-kri { color: var(--alarm);   background: var(--alarm-fein); }
.prot-fuss { padding: 11px 16px; font-size: 12px; color: var(--text-fein); background: var(--grund-tief);
  border-top: 1px solid var(--linie); }

/* Das Protokoll schreibt sich beim Laden Zeile für Zeile. Eine Sekunde, dann steht es.
   Der Bildschirm tut, was der Agent tut. */
.schreibt .prot-zeile { opacity: 0; transform: translateY(5px); }
.schreibt.laeuft .prot-zeile { animation: zeileEin .34s cubic-bezier(.22,1,.3,1) forwards; }
@keyframes zeileEin { to { opacity: 1; transform: none; } }

.band { margin-top: 64px; border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie);
  display: grid; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 760px) { .band { grid-template-columns: repeat(2, 1fr); } }
.band div { padding: 22px 0 20px; border-right: 1px solid var(--linie); }
.band div:last-child { border-right: 0; }
@media (max-width: 760px) { .band div:nth-child(2n) { border-right: 0; } }
.band b { display: block; font-family: var(--disp); font-size: 30px; font-weight: 700;
  letter-spacing: -.025em; line-height: 1; margin-bottom: 5px; font-variant-numeric: tabular-nums; }
.band span { font-size: 12.5px; color: var(--text-weich); }

section { padding: 80px 0; }
h2 { font-family: var(--disp); font-size: clamp(27px, 3.4vw, 38px); letter-spacing: -.026em;
  font-weight: 700; line-height: 1.14; margin-bottom: 14px; text-wrap: balance; }
.lead { font-size: 16.5px; color: var(--text-weich); max-width: 62ch; margin-bottom: 40px;
  line-height: 1.65; text-wrap: pretty; }

/* Der Rundgang als technische Zeichnung. Das Vertrauensmodell ist der Kern des Produkts
   und stand bisher nur als Behauptung im Text: hier sieht man, dass alle Pfeile in eine
   Richtung zeigen. */
/* Die Zeichnung liegt auf dem Raster, nicht auf leerem Weiß: damit ist sie als
   Konstruktionszeichnung gelesen, bevor man ein Wort davon entziffert hat. */
.riss { position: relative; background: var(--karte); border: 1px solid var(--linie-stark);
  border-radius: 12px; padding: 30px 26px 18px; box-shadow: var(--schatten); }
.riss::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: 12px;
  background-image:
    linear-gradient(var(--raster-fein) 1px, transparent 1px),
    linear-gradient(90deg, var(--raster-fein) 1px, transparent 1px),
    linear-gradient(var(--raster) 1px, transparent 1px),
    linear-gradient(90deg, var(--raster) 1px, transparent 1px);
  background-size: 9px 9px, 9px 9px, 45px 45px, 45px 45px;
  background-position: 3px 3px;
  mask-image: linear-gradient(#000 72%, transparent);
  -webkit-mask-image: linear-gradient(#000 72%, transparent);
}
.riss > * { position: relative; }
/* Eckmarken wie auf einem Zeichnungsblatt. */
.riss::after {
  content: ""; position: absolute; left: 12px; top: 12px; width: 14px; height: 14px;
  border-left: 1px solid var(--linie-stark); border-top: 1px solid var(--linie-stark);
}
.riss-kopf { display: flex; align-items: baseline; gap: 12px; margin-bottom: 6px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-fein); }
.riss-kopf b { font-weight: 600; color: var(--text-weich); }
.riss-kopf span { margin-left: auto; }
.riss svg { width: 100%; height: auto; display: block; }
/* Auf schmalen Schirmen würde der Text der Zeichnung auf vier Pixel schrumpfen. Lieber
   eine Zeichnung, die man schiebt, als eine, die man nicht lesen kann. */
@media (max-width: 820px) {
  .riss { overflow-x: auto; }
  .riss svg { min-width: 760px; }
}
.riss-fuss { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 22px;
  padding-top: 20px; border-top: 1px solid var(--linie); }
@media (max-width: 760px) { .riss-fuss { grid-template-columns: 1fr; gap: 14px; } }
.riss-fuss b { display: block; font-size: 14px; font-weight: 600; margin-bottom: 3px; }
.riss-fuss span { font-size: 13px; color: var(--text-weich); line-height: 1.55; }

.zg-linie { stroke: var(--linie-stark); }
.zg-fein  { stroke: var(--linie); }
.zg-text  { fill: var(--text-weich); font-family: var(--mono); font-size: 11px; }
.zg-marke { fill: var(--text); font-family: var(--disp); font-size: 14px; font-weight: 700; }
.zg-flaeche { fill: var(--grund-tief); }
.zg-karte { fill: var(--karte); }
.zg-siegel { fill: var(--siegel); }
.zg-siegel-strich { stroke: var(--siegel); }
.zg-alarm { stroke: var(--alarm); }
.zg-alarm-fuell { fill: var(--alarm); }

/* Der Prüflauf wandert durch die Einschübe, der Melde-Punkt läuft zur Zentrale. Beides
   langsam genug, dass es nicht zappelt. */
@keyframes laufBalken { 0% { transform: translateY(0); } 50% { transform: translateY(190px); } 100% { transform: translateY(0); } }
@keyframes laufPunkt  { 0% { transform: translateX(0); opacity: 0; } 10% { opacity: 1; }
                        88% { opacity: 1; } 100% { transform: translateX(530px); opacity: 0; } }
.pruefbalken { animation: laufBalken 7s ease-in-out infinite; }
.meldepunkt  { animation: laufPunkt 7s linear infinite; offset-rotate: 0deg; }
.led-1 { animation: blink 3.1s steps(1) infinite; }
.led-2 { animation: blink 2.3s steps(1) infinite .4s; }
.led-3 { animation: blink 4.1s steps(1) infinite .9s; }
@keyframes blink { 0%, 60% { opacity: 1; } 61%, 100% { opacity: .25; } }

/* Prüfungen als Register mit einem Zeichen je Gruppe. */
.register { border-top: 1px solid var(--linie-stark); }
.reg { display: grid; grid-template-columns: 230px 1fr; gap: 28px; padding: 24px 0;
  border-bottom: 1px solid var(--linie); }
@media (max-width: 760px) { .reg { grid-template-columns: 1fr; gap: 12px; } }
.reg-kopf { display: flex; gap: 13px; align-items: flex-start; }
.reg-kopf svg { width: 26px; height: 26px; color: var(--siegel); flex: none; margin-top: 1px; }
.reg h3 { font-family: var(--disp); font-size: 17px; font-weight: 700; letter-spacing: -.012em; }
.reg .nr { font-family: var(--mono); font-size: 11px; color: var(--text-fein); display: block; margin-bottom: 3px; font-weight: 400; }
.reg ul { list-style: none; display: grid; gap: 9px; }
.reg li { font-size: 14.5px; color: var(--text-weich); line-height: 1.6; padding-left: 16px; position: relative; }
.reg li::before { content: ""; position: absolute; left: 0; top: 10px; width: 6px; height: 1px; background: var(--linie-stark); }
.reg li b { color: var(--text); font-weight: 600; }

/* HÄRTEN */
.zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: start; }
@media (max-width: 860px) { .zwei { grid-template-columns: 1fr; gap: 36px; } }
h3.gross { font-family: var(--disp); font-size: 21px; font-weight: 700; letter-spacing: -.018em; margin-bottom: 8px; }
.unterlead { font-size: 14.5px; color: var(--text-weich); line-height: 1.6; margin-bottom: 20px; }

.tafel { border-top: 1px solid var(--linie-stark); }
.sch { display: grid; grid-template-columns: 34px 1fr; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--linie); }
.sch-knopf { width: 32px; height: 18px; border-radius: 9px; background: var(--siegel); position: relative; margin-top: 3px; }
.sch-knopf::after { content: ""; position: absolute; top: 2px; right: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--auf-siegel); }
.sch > span > b { display: block; font-size: 15px; font-weight: 600; margin-bottom: 3px; }
.sch > span > span { font-size: 13.5px; color: var(--text-weich); line-height: 1.58; }
.sch em { font-style: normal; color: var(--text); font-weight: 600; }
.tafel-fuss { font-size: 13px; color: var(--text-fein); line-height: 1.6; margin-top: 16px; }

.setz { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--linie);
  border: 1px solid var(--linie); border-radius: 8px; overflow: hidden; }
@media (max-width: 620px) { .setz { grid-template-columns: repeat(2, 1fr); } }
.fach { background: var(--karte); padding: 12px 13px; }
.fach b { display: block; font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--text); margin-bottom: 3px; }
.fach span { font-size: 12px; color: var(--text-weich); line-height: 1.45; }

/* Prüfbogen: Messskala statt Ring. Kriterien und Gewichte stammen aus haertungsgrad()
   im Agenten (Schema 2). */
.bogen { background: var(--karte); border: 1px solid var(--linie-stark); border-radius: 10px;
  overflow: hidden; margin-top: 34px; box-shadow: var(--schatten); }
.bogen-kopf { padding: 20px 24px; border-bottom: 1px solid var(--linie); background: var(--grund-tief); }
.bogen-kopf .wert { display: flex; align-items: flex-end; gap: 12px; margin-bottom: 14px; }
.bogen-kopf .wert b { font-family: var(--disp); font-size: 44px; font-weight: 800; line-height: .9;
  letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.bogen-kopf .wert i { font-style: normal; font-family: var(--mono); font-size: 11.5px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--text-weich); padding-bottom: 5px; }
.skala { position: relative; height: 26px; }
.skala-bahn { position: absolute; left: 0; right: 0; top: 11px; height: 4px; border-radius: 2px; background: var(--linie-stark); }
/* Über scaleX statt width: derselbe Weg, aber ohne Layout-Durchlauf bei jedem Bild. */
.skala-wert { position: absolute; left: 0; right: 0; top: 11px; height: 4px; border-radius: 2px;
  background: var(--siegel); transform-origin: left center;
  transition: transform .34s cubic-bezier(.22,1,.3,1), background .24s ease; }
.skala-striche { position: absolute; left: 0; right: 0; top: 19px; height: 7px; display: flex; justify-content: space-between; }
.skala-striche i { width: 1px; height: 5px; background: var(--linie-stark); }
.skala-striche i:nth-child(5n+1) { height: 7px; background: var(--text-fein); }
.urteil { font-size: 13.5px; color: var(--text-weich); margin-top: 12px; line-height: 1.55; }
.urteil b { color: var(--text); font-weight: 600; }

.hk { display: grid; grid-template-columns: 20px 1fr auto; gap: 13px; align-items: start;
  width: 100%; text-align: left; font: inherit; background: none; border: 0; cursor: pointer;
  padding: 13px 24px; border-bottom: 1px solid var(--linie); color: inherit; }
.hk:last-child { border-bottom: 0; }
.hk:hover { background: var(--karte-hervor); }
/* Der Rahmen ist im leeren Zustand das Einzige, was das Kästchen sichtbar macht, deshalb
   die kräftigere Farbe: eine Linie auf Linienstärke läge bei 1,9:1. */
.hk-box { width: 19px; height: 19px; border: 1.5px solid var(--text-fein); border-radius: 4px;
  display: grid; place-content: center; margin-top: 1px; color: transparent;
  transition: border-color .15s ease, background .15s ease; }
.hk-box svg { width: 13px; height: 13px; }
.hk[aria-pressed="true"] .hk-box { background: var(--siegel); border-color: var(--siegel); color: var(--auf-siegel); }
.hk-txt b { display: block; font-size: 14.5px; font-weight: 600; margin-bottom: 2px; }
.hk-txt span { font-size: 13px; color: var(--text-weich); line-height: 1.5; }
.hk-pkt { font-family: var(--mono); font-size: 11.5px; color: var(--text-fein); white-space: nowrap;
  padding-top: 2px; font-variant-numeric: tabular-nums; }
.hk:active { transform: scale(.995); }
.bogen-fuss { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 14px 24px;
  border-top: 1px solid var(--linie); background: var(--grund-tief); font-size: 12.5px; color: var(--text-fein); }
.bogen-fuss button { margin-left: auto; font: inherit; font-weight: 600; color: var(--text-weich);
  background: none; border: 0; border-bottom: 1px solid var(--linie-stark); cursor: pointer; padding: 0 0 1px; }
.bogen-fuss button:hover { color: var(--text); }

/* MELDEN */
.wege { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.wege th { text-align: left; font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--text-weich);
  padding: 0 14px 9px 0; border-bottom: 1px solid var(--linie-stark); }
.wege td { padding: 13px 14px 13px 0; border-bottom: 1px solid var(--linie); vertical-align: top; color: var(--text-weich); }
.wege td:first-child { color: var(--text); font-weight: 600; white-space: nowrap; }
.wege .frei { font-family: var(--mono); font-size: 11.5px; color: var(--siegel); }
.wege .plus { font-family: var(--mono); font-size: 11.5px; color: var(--achtung); }
@media (max-width: 640px) {
  .wege, .wege tbody, .wege tr, .wege td { display: block; width: 100%; }
  .wege thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .wege tr { padding: 14px 0; border-bottom: 1px solid var(--linie); }
  .wege tr:first-child { border-top: 1px solid var(--linie-stark); }
  .wege td { padding: 0; border: 0; }
  .wege td:first-child, .wege td:nth-child(2) { display: inline; }
  .wege td:nth-child(2) { margin-left: 9px; }
  .wege td:last-child { margin-top: 5px; }
}

.regeln { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--linie);
  border: 1px solid var(--linie); border-radius: 8px; overflow: hidden; margin-top: 28px; }
@media (max-width: 760px) { .regeln { grid-template-columns: 1fr; } }
.rg { background: var(--karte); padding: 20px 22px; }
.rg > b { display: block; font-size: 14.5px; font-weight: 600; margin-bottom: 6px; }
.rg span { font-size: 13.5px; color: var(--text-weich); line-height: 1.58; }
.rg span b { color: var(--text); font-weight: 600; }

.monat { margin-top: 34px; display: grid; grid-template-columns: 300px 1fr; gap: 32px; align-items: start; }
@media (max-width: 820px) { .monat { grid-template-columns: 1fr; gap: 22px; } }
.stufen { display: grid; gap: 1px; background: var(--linie); border: 1px solid var(--linie); border-radius: 8px; overflow: hidden; }
.st { display: block; width: 100%; text-align: left; font: inherit; cursor: pointer;
  background: var(--karte); border: 0; padding: 13px 16px; color: inherit; }
.st b { display: block; font-size: 14px; font-weight: 600; margin-bottom: 2px; }
.st span { font-size: 12.5px; color: var(--text-weich); line-height: 1.45; }
.st[aria-checked="true"] { background: var(--siegel); }
.st[aria-checked="true"] b, .st[aria-checked="true"] span { color: var(--auf-siegel); }
.st[aria-checked="true"] span { opacity: .82; }
.st:active { transform: scale(.99); }
.blatt { background: var(--karte); border: 1px solid var(--linie-stark); border-radius: 10px; padding: 20px 22px; }
.blatt-kopf { display: flex; align-items: baseline; gap: 10px; margin-bottom: 16px; }
.blatt-kopf b { font-family: var(--disp); font-size: 27px; font-weight: 700; letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.blatt-kopf span { font-size: 13.5px; color: var(--text-weich); }
.raster { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; max-width: 420px; }
.raster i { aspect-ratio: 1; border-radius: 3px; background: var(--grund-tief); border: 1px solid var(--linie);
  transition: background .2s ease, border-color .2s ease; }
.raster i.voll { background: var(--siegel); border-color: var(--siegel); }
.blatt-fuss { font-size: 12.5px; color: var(--text-fein); margin-top: 14px; line-height: 1.55; }

/* NACHWEISE: keine sechs gleichen Kacheln mehr, sondern eine Liste aus Behauptung und
   dem, woran man sie nachrechnet. Der Abschnitt kehrt die Farben um, damit er als
   Versprechen für sich steht. */
.kehr { background: var(--kehr-grund); color: var(--kehr-text); border-radius: 14px; padding: 48px 44px; }
@media (max-width: 700px) { .kehr { padding: 32px 22px; } }
.kehr h2 { color: var(--kehr-text); }
.kehr .lead { color: var(--kehr-weich); margin-bottom: 34px; }
.nw { border-top: 1px solid var(--kehr-linie); }
.nw-zeile { display: grid; grid-template-columns: 1.1fr 1.4fr auto; gap: 26px; align-items: baseline;
  padding: 17px 0; border-bottom: 1px solid var(--kehr-linie); }
@media (max-width: 820px) { .nw-zeile { grid-template-columns: 1fr; gap: 6px; padding: 18px 0; } }
.nw-zeile b { font-size: 15.5px; font-weight: 600; color: var(--kehr-text); }
.nw-zeile p { font-size: 14px; color: var(--kehr-weich); line-height: 1.58; }
.nw-zeile a { font-family: var(--mono); font-size: 11.5px; color: var(--kehr-akzent); text-decoration: none;
  white-space: nowrap; border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.nw-zeile a:hover { color: var(--kehr-text); }
.kehr-fuss { margin-top: 26px; font-size: 13.5px; color: var(--kehr-weich); line-height: 1.6; max-width: 72ch; }

/* PREISE */
.verz { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--linie-stark);
  border: 1px solid var(--linie-stark); border-radius: 10px; overflow: hidden; }
@media (max-width: 780px) { .verz { grid-template-columns: 1fr; } }
.sp { background: var(--karte); padding: 30px 28px; display: flex; flex-direction: column; }
.sp.hervor { background: var(--karte-hervor); }
.sp-kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.sp-kopf b { font-family: var(--disp); font-size: 18px; font-weight: 700; }
.sp-kopf .plakette { font-family: var(--mono); font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--siegel); border: 1px solid var(--siegel); border-radius: 4px; padding: 2px 7px; opacity: .85; }
.sp-preis { font-family: var(--disp); font-size: 38px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; margin: 8px 0 2px; }
.sp-takt { font-family: var(--mono); font-size: 12px; color: var(--text-fein); margin-bottom: 18px; }
.sp-fuer { font-size: 14px; color: var(--text-weich); line-height: 1.55; margin-bottom: 20px;
  padding-bottom: 18px; border-bottom: 1px solid var(--linie); }
.sp ul { list-style: none; display: grid; gap: 10px; flex: 1; margin-bottom: 24px; }
.sp li { font-size: 14px; color: var(--text-weich); line-height: 1.5; display: grid; grid-template-columns: 15px 1fr; gap: 10px; }
.sp li svg { width: 13px; height: 13px; color: var(--siegel); margin-top: 4px; }
.sp li b { color: var(--text); font-weight: 600; }
.sp li.erste { color: var(--text); font-weight: 600; }
.verz-fuss { font-size: 13px; color: var(--text-fein); line-height: 1.6; margin-top: 18px; max-width: 70ch; }

/* FRAGEN */
.fragen { border-top: 1px solid var(--linie-stark); max-width: 78ch; }
.fragen details { border-bottom: 1px solid var(--linie); }
.fragen summary { cursor: pointer; list-style: none; padding: 17px 30px 17px 0; position: relative;
  font-size: 15.5px; font-weight: 600; color: var(--text); }
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after { content: ""; position: absolute; right: 4px; top: 25px; width: 9px; height: 9px;
  border-right: 1.5px solid var(--text-fein); border-bottom: 1.5px solid var(--text-fein);
  transform: rotate(45deg); transition: transform .2s cubic-bezier(.22,1,.3,1); }
.fragen details[open] summary::after { transform: rotate(-135deg); top: 27px; }
.fragen summary:hover { color: var(--siegel); }
.fragen p { font-size: 14.5px; color: var(--text-weich); line-height: 1.68; padding: 0 40px 20px 0; }
.fragen p a { color: var(--siegel); text-decoration: none; border-bottom: 1px solid currentColor; }
.fragen b { color: var(--text); font-weight: 600; }
.fragen em { font-style: italic; }

.schluss { border-top: 1px solid var(--linie-stark); border-bottom: 1px solid var(--linie-stark);
  padding: 48px 0; display: flex; align-items: center; gap: 32px; flex-wrap: wrap; }
.schluss h2 { margin-bottom: 6px; }
.schluss p { font-size: 15px; color: var(--text-weich); }
.schluss .tasten { margin: 0 0 0 auto; }

footer { border-top: 1px solid var(--linie); padding: 30px 0; font-size: 13px; color: var(--text-fein); }
footer .fzeile { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; align-items: center; }
footer .fband { display: flex; justify-content: center; padding-top: 18px; margin-top: 16px;
  border-top: 1px solid var(--linie); }
footer a { color: var(--text-weich); text-decoration: none; }
footer a:hover { color: var(--text); }

:where(a, button, summary):focus-visible { outline: 2px solid var(--siegel); outline-offset: 3px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .knopf, .skala-wert, .raster i, .fragen summary::after { transition: none; }
  .knopf:active, .hk:active, .st:active { transform: none; }
  .pruefbalken, .meldepunkt, .led-1, .led-2, .led-3 { animation: none; }
  .meldepunkt { opacity: 1; }
  .schreibt .prot-zeile { opacity: 1; transform: none; }
  .schreibt.laeuft .prot-zeile { animation: none; }
}

/* Der Umschalter zwischen hell und dunkel. Das Zeichen wechselt nicht, nur seine
   Füllung: ein Kreis, der zur Hälfte ausgemalt ist, wie eine Blende. */
.thema { width: 34px; height: 34px; display: inline-grid; place-items: center; cursor: pointer;
  border: 1px solid var(--linie-stark); border-radius: 8px; background: var(--karte);
  color: var(--text-weich); padding: 0;
  transition: transform .16s cubic-bezier(.23,1,.32,1), border-color .18s ease, color .18s ease; }
.thema:hover { color: var(--text); border-color: var(--text-fein); }
.thema:active { transform: scale(.94); }
.thema svg { width: 17px; height: 17px; }
.thema .halb { fill: currentColor; transition: transform .3s cubic-bezier(.22,1,.3,1); transform-origin: 12px 12px; }
.thema[aria-pressed="true"] .halb { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .thema, .thema .halb { transition: none; } .thema:active { transform: none; } }

/* Das Projektband aus dem Enjyn-Netz: eigene Fläche, nicht gedehnt. */
.projektband { display: block; border: 0; opacity: .9; transition: opacity .2s ease; }
.projektband:hover { opacity: 1; }

/* Das Einwilligungsfenster kommt von enjyn.de und bringt sein eigenes Gelb-Schwarz mit.
   Es nimmt Variablen an, also bekommt es hier die Farben dieser Seite; im Dunkeln wandert
   es mit, weil dieselben Rollen dahinterstehen. */
.enjyn-root{
  --enjyn-bg: var(--karte) !important;
  --enjyn-card-gradient: var(--karte) !important;
  --enjyn-card-opacity: 1 !important;
  --enjyn-card-blur: 0px !important;
  --enjyn-surface: var(--karte-hervor) !important;
  --enjyn-text: var(--text) !important;
  --enjyn-muted: var(--text-weich) !important;
  --enjyn-primary: var(--siegel) !important;
  --enjyn-primary-text: var(--auf-siegel) !important;
  --enjyn-border: var(--linie-stark) !important;
  --enjyn-border-width: 1px !important;
  --enjyn-radius: 14px !important;
  --enjyn-btn-radius: 9px !important;
  --enjyn-backdrop-alpha: .4 !important;
}