/* ============================================================
   Kundenportal Chatbot "Auskunft": Bestellstrecke und Portal
   Bau-Agent D (web), 17.09.2026. Grundlage: code/portal-entwurf/.

   DREI HARTE REGELN:

   1. JEDE Klasse traegt kp-, jede Variable --kp-. Dieses Blatt liegt
      neben admin.css und dem Widget-CSS; generische Namen wie .card
      kollidieren dort still, und still ist das Schlimmste.
   2. KEIN Inline-Stil, kein <style>, kein style-Attribut, keine
      on...-Attribute, nichts von fremden Hosts. Die Strecke faehrt
      unter der strengen CSP aus Bauplan 6.5. Was sich zur Laufzeit
      aendert, laeuft ueber CSS-Variablen, die kp.js mit
      element.style.setProperty setzt (CSSOM, von style-src nicht
      betroffen).
   3. Die Schriften werden NICHT kopiert. Sie liegen schon unter
      /admin-static/fonts/ und werden von dort geladen.

   Mobil zuerst. Alle Breakpoints sind min-width.
   ============================================================ */

/* ---------- Schriften (lokal, keine fremde Quelle) ---------- */

@font-face {
  font-family: 'Clash Display';
  src: url('/admin-static/fonts/clash-display-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Clash Display';
  src: url('/admin-static/fonts/clash-display-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Switzer';
  src: url('/admin-static/fonts/switzer-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Switzer';
  src: url('/admin-static/fonts/switzer-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Switzer';
  src: url('/admin-static/fonts/switzer-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Fragment Mono';
  src: url('/admin-static/fonts/fragment-mono-400-latin.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fragment Mono';
  src: url('/admin-static/fonts/fragment-mono-400-latin-ext.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Marken ---------- */

:root {
  --kp-paper: #ffffff;
  --kp-paper-2: #f6f6f4;
  --kp-ink: #16161a;
  --kp-ink-70: rgba(22, 22, 26, 0.72);
  --kp-ink-55: rgba(22, 22, 26, 0.62);
  --kp-line: rgba(22, 22, 26, 0.16);
  --kp-line-soft: rgba(22, 22, 26, 0.09);
  --kp-blue: #2438c9;
  --kp-blue-soft: #eceef9;
  --kp-dark: #101014;
  --kp-dark-text: #f2f2f0;

  --kp-ok: #2e7d43;    --kp-ok-soft: #e9f1eb;
  --kp-warn: #8a5a00;  --kp-warn-soft: #f5edda;
  --kp-err: #b3382e;   --kp-err-soft: #f8ebe8;

  /* Platzhalter-Markierung: bewusst laut, damit nichts davon
     versehentlich live geht. */
  --kp-ph: #7a4a00;
  --kp-ph-soft: #fdf4e3;

  --kp-font-display: 'Clash Display', 'Segoe UI', sans-serif;
  --kp-font-text: 'Switzer', 'Segoe UI', sans-serif;
  --kp-font-mono: 'Fragment Mono', 'Consolas', monospace;

  --kp-w: min(1100px, calc(100vw - 2rem));
  --kp-w-narrow: min(720px, calc(100vw - 2rem));
  --kp-radius: 10px;
  --kp-ease: cubic-bezier(0.22, 0.8, 0.24, 1);

  /* Von kp.js zur Laufzeit gesetzt (Farbvorschau, Balken). */
  --kp-prev-primary: #2438c9;
  --kp-prev-primary-text: #ffffff;
  --kp-prev-head-bg: #ffffff;
  --kp-prev-head-text: #16161a;
  --kp-prev-panel-bg: #ffffff;
  --kp-prev-bot-text: #16161a;
  --kp-prev-user-bg: #2438c9;
  --kp-prev-user-text: #ffffff;
  --kp-prev-radius: 7px;
  --kp-bar: 0%;
}

/* ---------- Grundlagen ---------- */

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

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--kp-paper-2);
  color: var(--kp-ink);
  font-family: var(--kp-font-text);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-feature-settings: 'ss01' on;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Bis 360 px ohne waagerechtes Scrollen: nichts darf breiter
     werden als der Bildschirm. */
  overflow-wrap: break-word;
}

h1, h2, h3, h4 {
  font-family: var(--kp-font-display);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
h1 { font-size: clamp(1.55rem, 4.2vw, 2.2rem); }
h2 { font-size: clamp(1.18rem, 2.6vw, 1.4rem); margin-bottom: 0.6rem; }
h3 { font-size: 1.02rem; margin-bottom: 0.4rem; }
h4 { font-size: 0.92rem; margin-bottom: 0.3rem; }

p { margin: 0; }
a { color: inherit; }
img { max-width: 100%; display: block; }
ul, ol { padding-left: 1.25rem; }
li { margin: 0.2rem 0; }

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

:focus-visible {
  outline: 3px solid var(--kp-blue);
  outline-offset: 2px;
  border-radius: 3px;
}

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

[hidden] { display: none !important; }

/* ---------- Sprungmarke ---------- */

.kp-skip {
  position: fixed;
  top: 0.7rem; left: 0.7rem;
  z-index: 3100;
  padding: 0.6rem 1.1rem;
  border-radius: 999px;
  background: var(--kp-paper);
  color: var(--kp-ink);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  outline: 2px solid var(--kp-blue);
  outline-offset: 2px;
  transform: translateY(calc(-100% - 2rem));
}
.kp-skip:focus, .kp-skip:focus-visible { transform: none; }

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

/* ---------- Kopf und Fuss ---------- */

.kp-top {
  background: var(--kp-paper);
  box-shadow: 0 1px 0 var(--kp-line-soft);
}
.kp-top-in {
  width: var(--kp-w);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding-block: 0.85rem;
}
.kp-brand {
  font-family: var(--kp-font-display);
  font-weight: 600;
  font-size: 1.16rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: var(--kp-ink);
  white-space: nowrap;
}
.kp-brand b { font-weight: 600; color: var(--kp-blue); }
.kp-top-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-wrap: wrap;
  font-size: 0.88rem;
  color: var(--kp-ink-55);
}
.kp-top-right a {
  color: var(--kp-ink-70);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.kp-top-right a:hover { color: var(--kp-blue); }

.kp-main {
  width: var(--kp-w);
  margin-inline: auto;
  padding-block: clamp(1.4rem, 4vw, 2.6rem);
}
.kp-main.kp-narrow { width: var(--kp-w-narrow); }

.kp-foot {
  width: var(--kp-w);
  margin-inline: auto;
  padding-block: 2rem 3rem;
  border-top: 1px solid var(--kp-line-soft);
  margin-top: 1.5rem;
  font-size: 0.84rem;
  color: var(--kp-ink-55);
  display: flex;
  gap: 0.5rem 1.3rem;
  flex-wrap: wrap;
}
.kp-foot a { color: var(--kp-ink-55); text-decoration: underline; text-underline-offset: 3px; }
.kp-foot a:hover { color: var(--kp-blue); }

/* ---------- Typo-Bausteine ---------- */

.kp-kicker {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-family: var(--kp-font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kp-ink-55);
  margin-bottom: 0.5rem;
}
.kp-kicker::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--kp-line);
}
.kp-lead {
  font-size: clamp(1.03rem, 1.6vw, 1.15rem);
  line-height: 1.6;
  color: var(--kp-ink-70);
  max-width: 40em;
}
.kp-fine {
  font-size: 0.84rem;
  line-height: 1.6;
  color: var(--kp-ink-55);
  max-width: 62em;
}
.kp-mono { font-family: var(--kp-font-mono); font-size: 0.88em; }
.kp-muted { color: var(--kp-ink-70); }
.kp-link {
  color: var(--kp-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--kp-ink-55);
}
.kp-link:hover { color: var(--kp-blue); text-decoration-color: var(--kp-blue); }

.kp-head { margin-bottom: clamp(1.2rem, 3vw, 1.8rem); }
.kp-head p.kp-lead { margin-top: 0.6rem; }

/* ---------- Platzhalter (RECHT, Preis, offene Fragen) ---------- */

.kp-ph {
  display: inline-block;
  font-family: var(--kp-font-mono);
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--kp-ph);
  background: var(--kp-ph-soft);
  border: 1px dashed var(--kp-ph);
  border-radius: 6px;
  padding: 0.18rem 0.5rem;
  max-width: 100%;
}
.kp-ph-block {
  display: block;
  margin: 0.5rem 0;
}

/* ---------- Karten ---------- */

.kp-card {
  background: var(--kp-paper);
  border: 1px solid var(--kp-line);
  border-radius: calc(var(--kp-radius) + 2px);
  padding: clamp(1.1rem, 3vw, 1.7rem);
  margin-bottom: clamp(1.1rem, 2.6vw, 1.6rem);
}
.kp-card > :last-child { margin-bottom: 0; }
.kp-card-lead { color: var(--kp-ink-70); margin-bottom: 0.9rem; }
.kp-card-quiet { background: var(--kp-paper-2); }

/* ---------- Hinweiskasten ---------- */

.kp-note {
  border: 1px solid var(--kp-line);
  border-left-width: 3px;
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin: 0.9rem 0;
  font-size: 0.93rem;
  line-height: 1.55;
  background: var(--kp-paper-2);
}
.kp-note > h3 { font-family: var(--kp-font-text); font-size: 0.93rem; font-weight: 600; }
.kp-note.kp-ok   { border-left-color: var(--kp-ok);   background: var(--kp-ok-soft);   color: #1f5c31; }
.kp-note.kp-warn { border-left-color: var(--kp-warn); background: var(--kp-warn-soft); color: #6b4600; }
.kp-note.kp-err  { border-left-color: var(--kp-err);  background: var(--kp-err-soft);  color: #8e2c24; }
.kp-note.kp-info { border-left-color: var(--kp-blue); background: var(--kp-blue-soft); color: #1b2a95; }
.kp-note a { color: inherit; }

/* Der naechste Schritt nach einem Fehler: nie eine Sackgasse. */
.kp-next {
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px solid currentColor;
  font-weight: 500;
}
.kp-next b { font-weight: 600; }

/* ---------- Knoepfe ---------- */

.kp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--kp-font-text);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.2;
  padding: 0.8rem 1.4rem;
  border-radius: var(--kp-radius);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  background: var(--kp-ink);
  color: var(--kp-paper);
  min-height: 46px;
  text-align: center;
  transition: background 0.22s var(--kp-ease), color 0.22s var(--kp-ease),
              border-color 0.22s var(--kp-ease), transform 0.18s var(--kp-ease);
}
.kp-btn:hover:not(:disabled) { background: var(--kp-blue); color: #fff; }
.kp-btn:active:not(:disabled) { transform: translateY(1px); }
.kp-btn:disabled, .kp-btn[aria-disabled='true'] { opacity: 0.45; cursor: not-allowed; }

.kp-btn-line {
  background: transparent;
  color: var(--kp-ink);
  border-color: var(--kp-line);
}
.kp-btn-line:hover:not(:disabled) { background: var(--kp-ink); color: var(--kp-paper); border-color: var(--kp-ink); }

.kp-btn-quiet {
  background: transparent;
  color: var(--kp-ink-70);
  border-color: transparent;
  padding-inline: 0.4rem;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.kp-btn-quiet:hover:not(:disabled) { background: transparent; color: var(--kp-blue); }

.kp-btn-s { padding: 0.5rem 0.9rem; font-size: 0.88rem; min-height: 38px; }
.kp-btn-big { font-size: 1.05rem; padding: 0.95rem 1.7rem; min-height: 52px; }

.kp-btn-row {
  display: flex;
  gap: 0.8rem;
  margin-top: 1.2rem;
  flex-wrap: wrap;
  align-items: center;
}

/* Fusszeile des Assistenten: zurueck links, weiter rechts, am Handy
   liegt weiter oben, weil der Daumen dort ist. */
.kp-step-foot {
  display: flex;
  flex-direction: column-reverse;
  gap: 0.7rem;
  margin-top: 1.6rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--kp-line-soft);
}
.kp-step-foot .kp-btn { width: 100%; }
@media (min-width: 640px) {
  .kp-step-foot { flex-direction: row; justify-content: space-between; align-items: center; }
  .kp-step-foot .kp-btn { width: auto; }
}

/* ---------- Formulare ---------- */

.kp-stack { display: flex; flex-direction: column; gap: 1.15rem; }

.kp-field > label,
.kp-field > .kp-label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--kp-ink);
  margin-bottom: 0.3rem;
}
.kp-field input[type='text'],
.kp-field input[type='email'],
.kp-field input[type='url'],
.kp-field input[type='tel'],
.kp-field input[type='search'],
.kp-field select,
.kp-field textarea {
  display: block;
  width: 100%;
  font: inherit;
  font-size: 1rem;           /* mind. 16px, sonst zoomt iOS beim Tippen */
  color: var(--kp-ink);
  background: var(--kp-paper);
  border: 1px solid var(--kp-line);
  border-radius: 8px;
  padding: 0.7rem 0.9rem;
  min-height: 46px;
  transition: border-color 0.2s, box-shadow 0.2s;
  resize: vertical;
}
.kp-field textarea { min-height: 5em; }
.kp-field input:hover, .kp-field select:hover, .kp-field textarea:hover { border-color: var(--kp-ink-55); }
.kp-field input:focus-visible,
.kp-field select:focus-visible,
.kp-field textarea:focus-visible {
  outline: none;
  border-color: var(--kp-blue);
  box-shadow: 0 0 0 3px rgba(36, 56, 201, 0.16);
}
/* Kein zusaetzliches opacity: ink-55 auf Papier liegt knapp ueber 4,5:1,
   ein Faktor 0,75 darauf haette den Platzhalter auf etwa 2,2:1 gedrueckt.
   Platzhalter sind Text und fallen unter WCAG 1.4.3 wie jeder andere. */
.kp-field input::placeholder, .kp-field textarea::placeholder { color: var(--kp-ink-55); opacity: 1; }

.kp-field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.6rem;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%2316161a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 12px 8px;
}

.kp-hint {
  display: block;
  font-size: 0.85rem;
  color: var(--kp-ink-55);
  line-height: 1.5;
  margin-top: 0.3rem;
  max-width: 64ch;
}

/* Fehlermeldung direkt am Feld, nicht oben auf der Seite. */
.kp-err-msg {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  font-size: 0.87rem;
  font-weight: 500;
  color: var(--kp-err);
  margin-top: 0.35rem;
}
.kp-err-msg::before { content: '!'; font-weight: 700; font-family: var(--kp-font-mono); line-height: 1.55; }
.kp-field.kp-invalid input,
.kp-field.kp-invalid select,
.kp-field.kp-invalid textarea {
  border-color: var(--kp-err);
  box-shadow: 0 0 0 3px rgba(179, 56, 46, 0.14);
}

.kp-req { color: var(--kp-err); font-weight: 600; }

.kp-grid-2 { display: grid; grid-template-columns: 1fr; gap: 1.15rem; }
@media (min-width: 720px) {
  .kp-grid-2 { grid-template-columns: 1fr 1fr; }
  .kp-grid-2 .kp-span-2 { grid-column: 1 / -1; }
}

.kp-check {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
}
.kp-check input[type='checkbox'] {
  width: 22px; height: 22px;
  margin: 0;
  flex: none;
  accent-color: var(--kp-blue);
  margin-top: 0.15rem;
}
.kp-check label {
  font-size: 0.93rem;
  font-weight: 400;
  line-height: 1.5;
  margin: 0;
}

.kp-fs { border: 0; padding: 0; margin: 0; min-width: 0; }
.kp-fs > legend {
  font-family: var(--kp-font-display);
  font-size: clamp(1.1rem, 2.4vw, 1.3rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  margin-bottom: 0.4rem;
  padding: 0;
}
.kp-fs > .kp-lead { margin-bottom: 1rem; }

/* Eine Gruppe von Radios INNERHALB eines Felds (etwa "Form"): Die
   Legende ist dort ein Feldname und keine Abschnittsueberschrift und
   traegt deshalb dieselbe Optik wie ein <label>. */
.kp-fs-field > legend {
  font-family: var(--kp-font-text);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--kp-ink);
  margin-bottom: 0.3rem;
}

/* ---------- Auswahlkarten (Tarif, Zahlweise, Einrichtungsweg) ---------- */

.kp-picks { display: grid; grid-template-columns: 1fr; gap: 0.9rem; }
@media (min-width: 780px) {
  .kp-picks-3 { grid-template-columns: repeat(3, 1fr); }
  .kp-picks-2 { grid-template-columns: repeat(2, 1fr); }
}

/* Aufbau: <div.kp-pick> traegt <input type=radio> und daneben den
   Inhalt. Der Radioknopf haengt NICHT in einem <label>, das den
   ganzen Kasten umschliesst: Ein <label> darf nur Phrasing-Inhalt
   tragen, und in diesen Kaesten stehen Ueberschriften, Listen und
   Beschreibungslisten. Stattdessen ist der Name das <label>, und
   sein ::after legt eine unsichtbare Flaeche ueber den ganzen
   Kasten. Damit bleibt das Markup gueltig, der Name bleibt der
   Vorlesename des Radioknopfs, und anklickbar ist trotzdem die
   ganze Karte. */
.kp-pick {
  position: relative;
  display: block;
  border: 1px solid var(--kp-line);
  border-radius: calc(var(--kp-radius) + 2px);
  background: var(--kp-paper);
  padding: 1rem 1.1rem 1.1rem;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.kp-pick:hover { border-color: var(--kp-ink-55); }
.kp-pick > input[type='radio'] {
  position: absolute;
  top: 1.05rem; left: 1.05rem;
  width: 20px; height: 20px;
  margin: 0;
  accent-color: var(--kp-blue);
  cursor: pointer;
}
.kp-pick-body { padding-left: 1.9rem; }
.kp-pick:has(input:checked) {
  border-color: var(--kp-blue);
  box-shadow: 0 0 0 2px var(--kp-blue) inset, 0 6px 20px rgba(22, 22, 26, 0.06);
  background: var(--kp-paper);
}
.kp-pick:has(input:focus-visible) {
  outline: 3px solid var(--kp-blue);
  outline-offset: 2px;
}
.kp-pick-name {
  font-family: var(--kp-font-display);
  font-size: 1.12rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.15;
  display: block;
  margin-bottom: 0;
  cursor: pointer;
}
label.kp-pick-name::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.kp-pick-price {
  font-family: var(--kp-font-display);
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  margin-top: 0.35rem;
  display: block;
}
.kp-pick-price span {
  font-family: var(--kp-font-text);
  font-size: 0.86rem;
  font-weight: 400;
  color: var(--kp-ink-55);
  margin-left: 0.3rem;
  letter-spacing: 0;
}
.kp-pick-for {
  font-size: 0.9rem;
  color: var(--kp-ink-70);
  margin-top: 0.5rem;
}
.kp-pick ul {
  margin-top: 0.6rem;
  font-size: 0.9rem;
  padding-left: 1.1rem;
}
.kp-pick ul li::marker { color: var(--kp-ink-55); }

/* Die zwei Einrichtungswege: gleich gross, gleich laut, kein
   "Empfohlen"-Band. Wer waehlen soll, soll nicht geschubst werden. */
.kp-way { padding-top: 1.1rem; }
.kp-way h3,
.kp-way .kp-pick-name {
  font-family: var(--kp-font-display);
  font-size: 1.2rem;
  margin-bottom: 0.15rem;
}
.kp-way-price {
  font-family: var(--kp-font-display);
  font-weight: 600;
  font-size: 1.3rem;
  font-variant-numeric: tabular-nums;
  display: block;
  margin: 0.3rem 0 0.7rem;
}
/* Als Liste: je Vertragsform ein Betrag (20.09.2026). Der Betrag haengt an
   der Vertragsform, und eine einzelne grosse Zahl an der Karte gehoerte
   immer zur monatlich kuendbaren Form. Zwei Zeilen brauchen weniger Hoehe
   als eine Zahl in der Groesse davor, deshalb kleiner und enger. */
ul.kp-way-price {
  list-style: none;
  padding: 0;
  font-size: 1.05rem;
  line-height: 1.45;
}
ul.kp-way-price li { margin: 0; }

.kp-way dl { margin: 0.8rem 0 0; font-size: 0.92rem; }
.kp-way dt {
  font-family: var(--kp-font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--kp-ink-55);
  margin-top: 0.75rem;
}
.kp-way dd { margin: 0.1rem 0 0; color: var(--kp-ink-70); }
.kp-way dd b { color: var(--kp-ink); font-weight: 600; }

/* ---------- Uebersicht der Bestellung ---------- */

.kp-sum { margin: 0; }
/* Die gewaehlte Verbindung gibt es online nicht (Laufzeit mit
   Jahreszahlung, oder eine Vertragsform ohne Preis fuer diesen Weg). Dann
   stehen in den beiden Betragszeilen Saetze und keine Zahlen, und sie
   sollen nicht aussehen wie Betraege. Die Sperre selbst sitzt
   serverseitig; das hier ist die freundliche Fassung davon. */
.kp-sum-zu .kp-sum-row.kp-sum-total dd {
  font-family: var(--kp-font-text);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--kp-warn);
}
.kp-sum-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--kp-line-soft);
  font-size: 0.95rem;
}
.kp-sum-row dt { color: var(--kp-ink-70); }
.kp-sum-row dd {
  margin: 0;
  text-align: right;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.kp-sum-row.kp-sum-total {
  border-bottom: 0;
  border-top: 2px solid var(--kp-ink);
  margin-top: 0.4rem;
  padding-top: 0.8rem;
  font-size: 1.05rem;
}
.kp-sum-row.kp-sum-total dt { color: var(--kp-ink); font-weight: 600; }
.kp-sum-row.kp-sum-total dd { font-family: var(--kp-font-display); font-size: 1.25rem; }

/* ---------- Pruefseite der Bestellung ---------- */
/* Die Seite traegt viel Text (Angebotsbaustein ungefaltet, vier
   Erklaerungen, Pflichtangaben). Sie bleibt nur ruhig, wenn drei
   Dinge gelten: eine schmale Spalte, EINE Schriftgroesse fuer
   Leistung und Preis, und Farbe nur dort, wo sie etwas bedeutet. */

.kp-pruef-kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.6rem;
}
.kp-pruef-kopf h2 { margin-bottom: 0; }
.kp-aendern {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--kp-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
  padding: 0.3rem 0;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
}
.kp-aendern:hover { color: var(--kp-ink); }

/* Preisliste ohne grosse Zahl: Auf der Pruefseite steht der Preis in
   derselben Groesse wie der Leistungstext, damit keine Zahl den Text
   erschlaegt und kein Text zum Kleingedruckten wird (Auflage recht). */
.kp-sum-ruhig .kp-sum-row.kp-sum-total dd,
.kp-sum-ruhig .kp-sum-row dd {
  font-family: var(--kp-font-text);
  font-size: 1rem;
  font-weight: 600;
}
.kp-sum-ruhig .kp-sum-row { padding: 0.55rem 0; }

/* Der Angebotsbaustein: ungefaltet, volle Textgroesse, ruhiger Satz. */
.kp-satz {
  font-size: 1.0625rem;
  line-height: 1.7;
  max-width: 62ch;
}
.kp-satz p { margin-bottom: 0.9rem; }
.kp-satz p:last-child { margin-bottom: 0; }
.kp-satz h3 {
  font-family: var(--kp-font-text);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0;
  margin: 1.4rem 0 0.5rem;
}
.kp-satz b { font-weight: 600; }

/* Die vier Erklaerungen bekommen Luft und eine grosse Klickflaeche. */
.kp-check-gross {
  border: 1px solid var(--kp-line);
  border-radius: var(--kp-radius);
  padding: 0.9rem 1rem;
  background: var(--kp-paper);
  align-items: flex-start;
}
.kp-check-gross:hover { border-color: var(--kp-ink-55); }
.kp-check-gross:has(input:checked) { border-color: var(--kp-blue); }
.kp-check-gross:has(input:focus-visible) {
  outline: 3px solid var(--kp-blue);
  outline-offset: 2px;
}
.kp-check-doku {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.86rem;
  color: var(--kp-ink-55);
}
.kp-check-doku b { color: var(--kp-ink); font-weight: 600; }

/* Pflichtangaben plus Knopf: der ruhige Schlussblock. */
.kp-pflicht { border-color: var(--kp-ink); border-width: 2px; }

/* Feste Angabe ohne Eingabefeld (Land). */
.kp-fest {
  font-weight: 600;
  padding: 0.55rem 0;
}

/* Hinweis tritt hervor, wenn er gerade zutrifft. Er steht auch ohne
   JavaScript da, nur leiser. */
.kp-note.kp-laut {
  border-color: var(--kp-err);
  border-left-color: var(--kp-err);
  background: var(--kp-err-soft);
  color: #8e2c24;
}

/* Auswahlkarte, die gerade nicht bestellbar ist. */
.kp-pick-aus { opacity: 0.55; }
.kp-pick-aus .kp-pick-name { text-decoration: line-through; }
.kp-pick-aus:hover { border-color: var(--kp-line); }

/* Honigtopf: aus dem Blick, aber nicht display:none (das fuellen
   manche Maschinen gerade deshalb nicht aus). */
.kp-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- Schrittleiste des Assistenten ---------- */

.kp-steps { margin-bottom: clamp(1.2rem, 3vw, 1.8rem); }
.kp-steps ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
  counter-reset: kpstep;
}
.kp-steps li {
  margin: 0;
  font-size: 0.82rem;
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.kp-steps li::after {
  content: '';
  width: 14px; height: 1px;
  background: var(--kp-line);
  flex: none;
}
.kp-steps li:last-child::after { display: none; }
.kp-steps a, .kp-steps span.kp-step-t {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.28rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--kp-line);
  background: var(--kp-paper);
  color: var(--kp-ink-55);
  text-decoration: none;
  white-space: nowrap;
}
.kp-steps a:hover { color: var(--kp-ink); border-color: var(--kp-ink-55); }
.kp-steps .kp-step-n {
  font-family: var(--kp-font-mono);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
}
.kp-steps [aria-current='step'] {
  background: var(--kp-ink);
  border-color: var(--kp-ink);
  color: var(--kp-paper);
  font-weight: 600;
}
.kp-steps .kp-done {
  color: var(--kp-ok);
  border-color: rgba(46, 125, 67, 0.4);
  background: var(--kp-ok-soft);
}
.kp-steps .kp-done .kp-step-n::before { content: '\2713\00a0'; }
/* Am Handy nur den aktuellen Schritt plus Zaehler zeigen: sieben
   Pillen nebeneinander sind auf 360 px unlesbar. */
.kp-steps-count {
  font-family: var(--kp-font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--kp-ink-55);
  margin-bottom: 0.4rem;
}
@media (max-width: 719px) {
  .kp-steps li { display: none; }
  .kp-steps li:has([aria-current='step']) { display: flex; }
  .kp-steps li::after { display: none; }
}

/* ---------- Kopfzeile eines Schritts: wo, wie lange, was brauche ich ---------- */

.kp-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
  margin: 0.9rem 0 0;
  padding: 0.8rem 1rem;
  border: 1px solid var(--kp-line);
  border-radius: var(--kp-radius);
  background: var(--kp-paper-2);
  font-size: 0.88rem;
}
.kp-fact { display: flex; flex-direction: column; min-width: 0; }
.kp-fact dt {
  font-family: var(--kp-font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--kp-ink-55);
}
.kp-fact dd { margin: 0; font-weight: 500; }

/* ---------- Erklaerung am Feld (drei Fragen, wie im Admin) ---------- */

.kp-why {
  margin-top: 0.4rem;
  font-size: 0.85rem;
}
.kp-why > summary {
  cursor: pointer;
  color: var(--kp-ink-55);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  list-style: none;
  padding: 0.2rem 0;
  min-height: 30px;
}
.kp-why > summary::-webkit-details-marker { display: none; }
.kp-why > summary::before {
  content: '?';
  font-family: var(--kp-font-mono);
  font-size: 0.7rem;
  width: 17px; height: 17px;
  border: 1px solid currentColor;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.kp-why > summary:hover { color: var(--kp-blue); }
.kp-why[open] > summary { color: var(--kp-ink); }
.kp-why-text {
  border-left: 2px solid var(--kp-line);
  padding: 0.3rem 0 0.3rem 0.8rem;
  margin-top: 0.3rem;
  color: var(--kp-ink-70);
  line-height: 1.55;
}
.kp-why-text p + p { margin-top: 0.35rem; }
.kp-why-text b { color: var(--kp-ink); font-weight: 600; }

/* ---------- Snippet ---------- */

.kp-snip-wrap { margin: 0.8rem 0; }
.kp-snip {
  background: var(--kp-dark);
  color: var(--kp-dark-text);
  border-radius: var(--kp-radius);
  padding: 0.9rem 1rem;
  overflow-x: auto;
  font-family: var(--kp-font-mono);
  font-size: 0.8rem;
  line-height: 1.7;
  margin: 0;
  user-select: all;
  -webkit-user-select: all;
}
.kp-snip code { font-family: inherit; white-space: pre; }
.kp-snip .kp-snip-key { color: #8ab4ff; }
.kp-copy-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
  margin-top: 0.55rem;
}
.kp-copy-state {
  font-size: 0.86rem;
  font-weight: 500;
}
/* Von kp.js gesetzt (meldung), damit keine Farbe im Skript steht. */
.kp-state-ok { color: var(--kp-ok); }
.kp-state-err { color: var(--kp-err); }

/* ---------- Langer Text zum Kopieren (Datenschutz-Baustein) ---------- */
/* Prosa, kein Code: deshalb Lesesatz statt Monospace. Die Hoehe ist
   gedeckelt, weil der Baustein sonst die halbe Seite fuellt und den
   Knopf darunter aus dem Blick schiebt. */
.kp-legal {
  border: 1px solid var(--kp-line);
  border-radius: var(--kp-radius);
  background: var(--kp-paper-2);
  padding: 1rem 1.1rem;
  max-height: 22rem;
  overflow-y: auto;
  font-size: 0.89rem;
  line-height: 1.6;
}
.kp-legal h4 { font-family: var(--kp-font-text); font-size: 0.95rem; margin-bottom: 0.5rem; }
.kp-legal p { margin-bottom: 0.7rem; }
.kp-legal p:last-child { margin-bottom: 0; }

/* ---------- Kennung ---------- */

.kp-key {
  font-family: var(--kp-font-mono);
  font-size: 0.92em;
  background: var(--kp-paper-2);
  border: 1px solid var(--kp-line);
  border-radius: 5px;
  padding: 0.08em 0.4em;
  white-space: nowrap;
}

/* ---------- Fortschritt (Crawl) ---------- */

.kp-prog { margin: 1rem 0; }
.kp-prog-bar {
  height: 10px;
  border-radius: 999px;
  background: var(--kp-paper-2);
  border: 1px solid var(--kp-line);
  overflow: hidden;
}
.kp-prog-bar i {
  display: block;
  height: 100%;
  width: var(--kp-bar);
  background: var(--kp-blue);
  border-radius: 999px;
  transition: width 0.5s var(--kp-ease);
}
.kp-prog-bar.kp-ok i { background: var(--kp-ok); }
.kp-prog-num {
  font-family: var(--kp-font-display);
  font-weight: 600;
  font-size: clamp(1.7rem, 5vw, 2.4rem);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  margin-bottom: 0.1rem;
}
.kp-prog-sub { font-size: 0.9rem; color: var(--kp-ink-70); }
.kp-prog-log {
  margin-top: 0.8rem;
  font-family: var(--kp-font-mono);
  font-size: 0.78rem;
  line-height: 1.8;
  color: var(--kp-ink-55);
  max-height: 7.5rem;
  overflow: hidden;
}
.kp-prog-log div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Probe-Chat ---------- */

.kp-chat {
  border: 1px solid var(--kp-line);
  background: var(--kp-paper-2);
  border-radius: var(--kp-radius);
  padding: 0.9rem;
  min-height: 240px;
  max-height: 55vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.kp-msg {
  max-width: 90%;
  padding: 0.6rem 0.85rem;
  border-radius: 12px;
  font-size: 0.94rem;
  line-height: 1.55;
}
.kp-msg-bot {
  align-self: flex-start;
  background: var(--kp-paper);
  border: 1px solid var(--kp-line);
  border-bottom-left-radius: 4px;
}
.kp-msg-user {
  align-self: flex-end;
  background: var(--kp-blue);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.kp-msg-src {
  display: block;
  margin-top: 0.4rem;
  padding-top: 0.4rem;
  border-top: 1px solid var(--kp-line-soft);
  font-size: 0.8rem;
  color: var(--kp-ink-55);
}
.kp-msg-src a { color: var(--kp-ink-55); }
.kp-ask-row { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 0.9rem 0 0; }
.kp-ask-row .kp-field { flex: 1; min-width: 200px; }
.kp-tries { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.7rem; }
.kp-try {
  font-family: var(--kp-font-text);
  font-size: 0.87rem;
  padding: 0.42rem 0.8rem;
  border-radius: 999px;
  border: 1px solid var(--kp-line);
  background: var(--kp-paper);
  color: var(--kp-ink-70);
  cursor: pointer;
  text-align: left;
  min-height: 38px;
}
.kp-try:hover { border-color: var(--kp-blue); color: var(--kp-blue); }

/* Fehlerblase im Probe-Chat (kp.js setzt die Klasse). */
.kp-msg-err {
  background: var(--kp-err-soft);
  border: 1px solid rgba(179, 56, 46, 0.3);
  color: #8e2c24;
}

/* Formular, das wie ein Link in einer Zeile mitlaeuft (Abmelden im
   Kopf). Ein Abmelden gehoert in ein POST, nicht in einen Link. */
.kp-inline-form { display: inline; margin: 0; }
.kp-inline-form .kp-btn { min-height: 0; padding-block: 0; }

/* ---------- Aussehen: Zweispalter mit Vorschau ---------- */

.kp-look { display: grid; grid-template-columns: 1fr; gap: 1.4rem; }
@media (min-width: 900px) {
  .kp-look { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
  .kp-look-preview { position: sticky; top: 1rem; }
}
.kp-look-fields { min-width: 0; }

.kp-color-row { display: flex; align-items: center; gap: 0.6rem; }
.kp-color-row input[type='color'] {
  width: 46px; height: 46px;
  padding: 3px;
  border: 1px solid var(--kp-line);
  border-radius: 8px;
  background: var(--kp-paper);
  cursor: pointer;
  flex: none;
}
.kp-color-row input[type='text'] {
  font-family: var(--kp-font-mono);
  text-transform: lowercase;
}

.kp-shape-row { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.kp-shape {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  cursor: pointer;
  font-size: 0.93rem;
  font-weight: 400;
  padding: 0.3rem 0;
  min-height: 38px;
}
.kp-shape input { width: 20px; height: 20px; accent-color: var(--kp-blue); margin: 0; flex: none; }
.kp-shape i {
  width: 22px; height: 22px;
  background: var(--kp-ink);
  display: inline-block;
  flex: none;
}
.kp-shape i.kp-s-rounded { border-radius: 7px; }
.kp-shape i.kp-s-circle { border-radius: 50%; }
.kp-shape i.kp-s-square { border-radius: 3px; }

.kp-drop {
  border: 2px dashed var(--kp-line);
  border-radius: var(--kp-radius);
  padding: 1.1rem;
  text-align: center;
  background: var(--kp-paper-2);
  font-size: 0.9rem;
  color: var(--kp-ink-70);
}
.kp-drop input[type='file'] { margin: 0.5rem auto 0; max-width: 100%; font-size: 0.86rem; }

/* Vorschau: echtes iframe auf /widget/preview.html, genau wie im
   Admin. Die Hoehe traegt das Chatfenster in seiner groessten Stufe
   plus Luft fuer den Knopf; schmaler als 320 px wird es nie. */
.kp-preview-frame {
  display: block;
  width: 100%;
  max-width: 420px;
  height: 620px;
  border: 1px solid var(--kp-line);
  border-radius: 14px;
  background: var(--kp-paper);
  margin-inline: auto;
}
@media (max-width: 899px) {
  .kp-preview-frame { height: 520px; }
}

/* Vorschau des Chatfensters: alle Farben kommen aus Variablen, die
   kp.js per setProperty setzt. Kein style-Attribut im Markup. */
.kp-widget {
  border: 1px solid var(--kp-line);
  border-radius: 14px;
  overflow: hidden;
  background: var(--kp-prev-panel-bg);
  box-shadow: 0 14px 40px rgba(22, 22, 26, 0.1);
  max-width: 320px;
  margin-inline: auto;
}
.kp-widget-head {
  background: var(--kp-prev-head-bg);
  color: var(--kp-prev-head-text);
  padding: 0.7rem 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  border-bottom: 1px solid var(--kp-line-soft);
}
.kp-widget-logo {
  width: 26px; height: 26px;
  border-radius: 6px;
  background: var(--kp-prev-primary);
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--kp-prev-primary-text);
  font-family: var(--kp-font-display);
  font-size: 0.8rem;
  font-weight: 600;
  overflow: hidden;
}
.kp-widget-logo img { width: 100%; height: 100%; object-fit: contain; }
.kp-widget-title { font-weight: 600; font-size: 0.95rem; line-height: 1.2; }
.kp-widget-sub { font-size: 0.68rem; opacity: 0.7; line-height: 1.2; }
.kp-widget-body {
  background: var(--kp-prev-panel-bg);
  color: var(--kp-prev-bot-text);
  padding: 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-height: 150px;
  font-size: 0.85rem;
}
.kp-widget-bot {
  align-self: flex-start;
  background: rgba(22, 22, 26, 0.05);
  color: var(--kp-prev-bot-text);
  padding: 0.5rem 0.7rem;
  border-radius: 10px 10px 10px 3px;
  max-width: 88%;
}
.kp-widget-user {
  align-self: flex-end;
  background: var(--kp-prev-user-bg);
  color: var(--kp-prev-user-text);
  padding: 0.5rem 0.7rem;
  border-radius: 10px 10px 3px 10px;
  max-width: 88%;
}
.kp-widget-in {
  border-top: 1px solid var(--kp-line-soft);
  padding: 0.55rem 0.8rem;
  font-size: 0.8rem;
  color: var(--kp-ink-55);
  background: var(--kp-prev-panel-bg);
}
.kp-widget-foot {
  display: flex;
  justify-content: flex-end;
  padding: 0.7rem 0.2rem 0;
}
.kp-widget-foot.kp-left { justify-content: flex-start; }
.kp-widget-knob {
  width: 46px; height: 46px;
  background: var(--kp-prev-primary);
  color: var(--kp-prev-primary-text);
  border-radius: var(--kp-prev-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--kp-font-display);
  font-weight: 600;
  font-size: 0.95rem;
}
.kp-prev-label {
  font-family: var(--kp-font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--kp-ink-55);
  margin-bottom: 0.5rem;
  text-align: center;
}

/* ---------- Gesperrter Schritt (Tarif reicht nicht) ---------- */

.kp-locked {
  position: relative;
  border: 1px solid var(--kp-line);
  border-radius: var(--kp-radius);
  padding: 1rem;
  background: var(--kp-paper-2);
}

/* ---------- Plattform-Anleitungen ---------- */

.kp-guide {
  border: 1px solid var(--kp-line);
  border-radius: var(--kp-radius);
  background: var(--kp-paper);
  margin-bottom: 0.6rem;
  overflow: hidden;
}
.kp-guide > summary {
  cursor: pointer;
  padding: 0.85rem 1rem;
  font-weight: 600;
  font-size: 0.98rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  list-style: none;
  min-height: 48px;
}
.kp-guide > summary::-webkit-details-marker { display: none; }
.kp-guide > summary::after {
  content: '+';
  margin-left: auto;
  font-family: var(--kp-font-mono);
  font-size: 1.15rem;
  color: var(--kp-ink-55);
  flex: none;
}
.kp-guide[open] > summary::after { content: '\2212'; }
.kp-guide[open] > summary { border-bottom: 1px solid var(--kp-line-soft); }
.kp-guide > summary:hover { background: var(--kp-paper-2); }
.kp-guide-body { padding: 0.2rem 1rem 1.1rem; }
.kp-guide-body ol { padding-left: 1.3rem; margin-top: 0.6rem; }
.kp-guide-body ol > li { margin: 0.5rem 0; }
.kp-guide-need {
  font-size: 0.87rem;
  color: var(--kp-ink-70);
  padding: 0.6rem 0 0;
}
.kp-guide-need b { color: var(--kp-ink); }
.kp-ui {
  font-family: var(--kp-font-mono);
  font-size: 0.86em;
  background: var(--kp-blue-soft);
  border-radius: 4px;
  padding: 0.05em 0.35em;
  color: #1b2a95;
  white-space: nowrap;
}
.kp-see {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.86rem;
  color: var(--kp-ok);
  padding-left: 1.1rem;
  position: relative;
  line-height: 1.5;
}
.kp-see::before {
  content: '\2713';
  position: absolute;
  left: 0;
  font-weight: 700;
}
.kp-src {
  font-size: 0.78rem;
  color: var(--kp-ink-55);
  margin-top: 0.8rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--kp-line-soft);
  word-break: break-word;
}
.kp-src a { color: var(--kp-ink-55); }

/* ---------- Tabellen ---------- */

.kp-scroll { overflow-x: auto; }
.kp-tbl { width: 100%; border-collapse: collapse; }
.kp-tbl th {
  font-family: var(--kp-font-mono);
  font-size: 0.67rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--kp-ink-55);
  text-align: left;
  font-weight: 400;
  padding: 0.5rem 0.8rem 0.5rem 0;
  border-bottom: 1px solid var(--kp-line);
  white-space: nowrap;
}
.kp-tbl td {
  padding: 0.6rem 0.8rem 0.6rem 0;
  border-bottom: 1px solid var(--kp-line-soft);
  vertical-align: top;
  font-size: 0.93rem;
}
.kp-tbl td.kp-num { font-family: var(--kp-font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- Pillen ---------- */

.kp-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--kp-font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
  vertical-align: middle;
}
.kp-badge.kp-b-ok   { color: #1f5c31;          background: var(--kp-ok-soft);   border-color: rgba(46, 125, 67, 0.3); }
.kp-badge.kp-b-warn { color: #6b4600;          background: var(--kp-warn-soft); border-color: rgba(138, 90, 0, 0.3); }
.kp-badge.kp-b-err  { color: #8e2c24;          background: var(--kp-err-soft);  border-color: rgba(179, 56, 46, 0.3); }
.kp-badge.kp-b-off  { color: var(--kp-ink-55); background: var(--kp-paper-2);   border-color: var(--kp-line); }
.kp-badge.kp-b-ink  { color: #1b2a95;          background: var(--kp-blue-soft); border-color: rgba(36, 56, 201, 0.3); }

/* ---------- Verbrauch ---------- */

.kp-usage-figure {
  font-family: var(--kp-font-display);
  font-weight: 600;
  font-size: clamp(2rem, 6vw, 2.8rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.kp-meter {
  display: block;
  height: 10px;
  border-radius: 999px;
  background: var(--kp-paper-2);
  border: 1px solid var(--kp-line);
  overflow: hidden;
  margin: 0.7rem 0 0.4rem;
}
.kp-meter i { display: block; height: 100%; width: var(--kp-bar); background: var(--kp-ok); border-radius: 999px; }
.kp-meter i.kp-near { background: var(--kp-warn); }
.kp-meter i.kp-over { background: var(--kp-err); }

/* ---------- Kachelraster (Uebersicht, Startseite) ---------- */

.kp-tiles { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 720px) { .kp-tiles-2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .kp-tiles-3 { grid-template-columns: repeat(3, 1fr); } }

.kp-tile {
  display: block;
  border: 1px solid var(--kp-line);
  border-radius: calc(var(--kp-radius) + 2px);
  background: var(--kp-paper);
  padding: 1.1rem 1.2rem;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s, transform 0.2s var(--kp-ease), box-shadow 0.2s;
}
a.kp-tile:hover {
  border-color: var(--kp-blue);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(22, 22, 26, 0.07);
}
.kp-tile h3 { margin-bottom: 0.3rem; }
.kp-tile p { font-size: 0.9rem; color: var(--kp-ink-70); }
.kp-tile-file {
  font-family: var(--kp-font-mono);
  font-size: 0.72rem;
  color: var(--kp-ink-55);
  margin-top: 0.6rem;
  display: block;
  word-break: break-all;
}

/* ---------- Voraussetzungsliste mit Haken (Livegang) ---------- */

.kp-haken { list-style: none; padding: 0; margin: 1rem 0 0; }
.kp-haken li {
  position: relative;
  padding: 0 0 1rem 2.2rem;
  margin: 0;
}
.kp-haken li::before {
  position: absolute;
  left: 0; top: 0.05rem;
  width: 24px; height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
}
.kp-haken li.kp-ja::before {
  content: '\2713';
  background: var(--kp-ok-soft);
  border: 1px solid rgba(46, 125, 67, 0.4);
  color: var(--kp-ok);
}
.kp-haken li.kp-nein::before {
  content: '!';
  background: var(--kp-warn-soft);
  border: 1px solid rgba(138, 90, 0, 0.4);
  color: var(--kp-warn);
  font-family: var(--kp-font-mono);
}
.kp-haken h3 {
  font-family: var(--kp-font-text);
  font-size: 1rem;
  margin-bottom: 0.15rem;
}
.kp-haken p { font-size: 0.92rem; color: var(--kp-ink-70); }
.kp-haken li.kp-nein h3 { color: var(--kp-warn); }

/* ---------- Zeitleiste (was passiert jetzt) ---------- */

.kp-time { list-style: none; padding: 0; margin: 1rem 0 0; }
.kp-time li {
  position: relative;
  padding: 0 0 1.2rem 2.1rem;
  margin: 0;
  border-left: 2px solid var(--kp-line);
}
.kp-time li:last-child { border-left-color: transparent; padding-bottom: 0; }
.kp-time li::before {
  content: counter(kptime);
  counter-increment: kptime;
  position: absolute;
  left: -13px; top: 0;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--kp-paper);
  border: 1px solid var(--kp-line);
  color: var(--kp-ink-55);
  font-family: var(--kp-font-mono);
  font-size: 0.72rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kp-time { counter-reset: kptime; }
.kp-time li.kp-t-done::before {
  content: '\2713';
  background: var(--kp-ok-soft);
  border-color: rgba(46, 125, 67, 0.4);
  color: var(--kp-ok);
}
.kp-time li.kp-t-now::before {
  background: var(--kp-ink);
  border-color: var(--kp-ink);
  color: var(--kp-paper);
}
.kp-time h3 { font-family: var(--kp-font-text); font-size: 0.98rem; margin-bottom: 0.15rem; }
.kp-time p { font-size: 0.91rem; color: var(--kp-ink-70); }
.kp-time .kp-when {
  font-family: var(--kp-font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kp-ink-55);
  display: block;
  margin-bottom: 0.1rem;
}

/* ---------- Kleinkram ---------- */

.kp-sep { border: 0; border-top: 1px solid var(--kp-line-soft); margin: 1.5rem 0; }
.kp-mt { margin-top: 1.1rem; }
.kp-center { text-align: center; }

/* Preisfuss: jede Preisangabe traegt ihr Stand-Datum. */
.kp-price-note {
  font-size: 0.82rem;
  color: var(--kp-ink-55);
  line-height: 1.6;
  margin-top: 1.2rem;
  max-width: 70ch;
}