/*
  konto.css – Gastgeber-Bereich (konto.taporta.com) und seine Vorführung auf taporta.com/de/demo.
  Baut auf site.css auf: dieselben Tokens (:root, --sp-*), Schrift (Inter), Knöpfe (.knopf), Felder (.feld) und Regeln –
  Linien und Kanten statt weicher Schatten, keine Verläufe, höchstens ein gefüllter Knopf je Ansicht (hier „Speichern“), Tippflächen
  ≥ 44 px, kein seitliches Scrollen bei 375 px. Eigene Klassen tragen das Präfix k-, damit nichts mit der Website kollidiert.
*/

/* ---------------------------------------------------------------- Kopf und Fuß der Seiten auf konto.taporta.com */

.k-kopf .marke { gap: var(--sp-2); }
.k-kopf__mail { display: none; color: var(--sp-text-2); font-size: var(--sp-fs-klein); }
.k-kopf__link { display: inline-flex; align-items: center; min-height: var(--sp-griff); font-size: var(--sp-fs-klein); }
.k-kopf__form { margin: 0; }
.k-kopf__verwaltung { padding: 0 var(--sp-2); font-weight: 600; }
/* Ohne Anmeldung gibt es hier kein Menü: „DE | EN“ steht auf jeder Breite im Kopf, nicht erst ab der Navigation von site.css. */
.k-kopf .kopf__rechts > .sprachen { display: flex; }
@media (min-width: 48em) {
  .k-kopf__mail { display: inline; }
}
/* Unter 400 px reicht die Breite nur für Marke und Abmelden; in die Verwaltung führt dann die Leiste darunter. */
@media (max-width: 24.99em) {
  .k-kopf__verwaltung { display: none; }
}
/* Die Fußlinks bringen ihren Abstand als Innenabstand mit (site.css) – ein Lückenmaß dazu verdoppelte ihn. */
.k-fuss nav ul { display: flex; flex-wrap: wrap; gap: 0; }
.k-debug { padding: var(--sp-3); background: var(--sp-karte); font-size: var(--sp-fs-mikro); overflow-x: auto; }

/* ---------------------------------------------------------------- Gerüst: Leiste, Bühne, Navigation, Editor, Handy */

.k-app { --k-handy: 390px; font-size: 1rem; line-height: 1.5; }
.k-app h1, .k-app h2 { letter-spacing: -.02em; }
.k-seite-app main { padding-bottom: 0; }

.k-leiste {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-4);
  padding: var(--sp-2) var(--sp-kante); border-bottom: 1px solid var(--sp-linie); background: var(--sp-karte);
}
.k-leiste__text { margin: 0; max-width: none; font-size: var(--sp-fs-klein); color: var(--sp-text-2); }
.k-leiste__knoepfe { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.k-hinweis-ort:empty { display: none; }
.k-hinweis {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4);
  margin: 0; padding: var(--sp-3) var(--sp-kante); border-bottom: 1px solid var(--sp-linie);
  background: var(--sp-leinen); color: var(--sp-text);
}
.k-hinweis p { margin: 0; }
.k-editor .k-hinweis { margin: 0 0 var(--sp-4); padding: var(--sp-3) var(--sp-4); border: 1px solid var(--sp-linie); border-radius: var(--sp-r); }

/* Reiter nur schmal: Einstellen | Gästeansicht. Das iframe bleibt im DOM, nur sichtbar oder nicht (nie umhängen). */
.k-reiter { position: sticky; top: var(--sp-kopf); z-index: 3; display: flex; gap: var(--sp-1); padding: var(--sp-2) var(--sp-kante); background: var(--sp-grund); border-bottom: 1px solid var(--sp-linie); }
.k-reiter__knopf {
  flex: 1; min-height: var(--sp-griff); border: 1px solid var(--sp-linie-stark); border-radius: var(--sp-r);
  background: var(--sp-karte); font-weight: 650; cursor: pointer;
}
.k-reiter__knopf[aria-selected="true"] { border-color: var(--sp-akzent); color: var(--sp-akzent-text); box-shadow: inset 0 0 0 1px var(--sp-akzent); }

.k-buehne { display: grid; grid-template-columns: minmax(0, 1fr); }
.k-navi { padding: var(--sp-3) var(--sp-kante); border-bottom: 1px solid var(--sp-linie); }
.k-navi ul { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin: 0; padding: 0; list-style: none; }
.k-navi li { max-width: none; }
.k-navi__eintrag {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  min-height: var(--sp-griff); padding: var(--sp-1) var(--sp-3); border: 0; border-radius: var(--sp-r);
  background: none; color: var(--sp-text); font-weight: 600; text-align: left; cursor: pointer;
}
.k-navi__eintrag small { font-size: var(--sp-fs-mikro); font-weight: 500; color: var(--sp-hinweis-text); }
.k-navi__eintrag:hover { background: var(--sp-linie); }
.k-navi__eintrag[aria-current="page"] { background: var(--sp-karte); box-shadow: inset 3px 0 0 var(--sp-akzent); color: var(--sp-akzent-text); }
.k-navi__gruppe { display: none; }
.k-navi__trenner { display: none; }

.k-mitte { position: relative; min-width: 0; }
.k-editor { padding: var(--sp-5) var(--sp-kante) var(--sp-7); outline: none; }
/* Sprungziele (Bereichswechsel, Reiter, Fehler im Abschnitt) landen unter der klebenden Leiste darüber: schmal die
   Reiter, in der Demo die Bereiche. Den Kopf der Seite rechnet scroll-padding auf html schon mit. */
.k-editor, .k-handy, .k-kachel { scroll-margin-top: calc(var(--sp-griff) + 2 * var(--sp-2) + 1px); }
.k-editor__titel { margin-bottom: var(--sp-2); font-size: var(--sp-fs-h2-seite); }
.k-editor .vorspann { font-size: var(--sp-fs-text); }
.k-editor__felder { display: grid; gap: 0; }

.k-handy { display: none; padding: var(--sp-4) var(--sp-kante) var(--sp-6); }
.k-app--handy .k-mitte { display: none; }
.k-app--handy .k-handy { display: block; }
.k-handy__titel { margin: 0 0 var(--sp-2); max-width: none; font-size: var(--sp-fs-klein); color: var(--sp-text-2); }
.k-handy__titel span { color: var(--sp-hinweis-text); }
.k-handy__rahmen {
  position: relative;
  width: min(100%, calc(var(--k-handy) + 20px)); margin: 0 auto;
  padding: 16px 10px 20px;
  background: #141416;
  border: 2px solid #2a2a2e;
  border-radius: 46px;
  box-shadow: 0 16px 40px -8px rgb(0 0 0 / .2), 0 0 0 1px rgb(255 255 255 / .06), var(--sp-tiefe);
  overflow: hidden;
}
.k-handy__rahmen::before {
  content: ''; position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
  width: 64px; height: 5px; border-radius: 3px; background: #2a2a2e;
  z-index: 5; pointer-events: none;
}
.k-handy__rahmen::after {
  content: ''; position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
  width: 96px; height: 4px; border-radius: 2px; background: #3f3f46;
  z-index: 5; pointer-events: none;
}
.k-handy__iframe {
  display: block; width: 100%; height: min(760px, calc(100svh - var(--sp-kopf) - 170px)); min-height: 520px;
  border: 0; border-radius: 32px; clip-path: inset(0 round 32px); background: var(--sp-grund);
  color-scheme: light dark;
  scrollbar-width: none;
  mask-image: linear-gradient(to bottom, #000 calc(100% - 40px), transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 40px), transparent 100%);
}
.k-handy__option { display: flex; align-items: center; gap: var(--sp-2); justify-content: center; min-height: var(--sp-griff); margin-top: var(--sp-2); font-size: var(--sp-fs-klein); }
.k-sprung:focus { position: static; display: inline-block; }
/* AM HANDY KEIN HANDY IM HANDY: Die Gästeansicht füllt die Breite, ohne Rahmen und Rundung – vorher blieben vom
   Bildschirm neben 12 px Rahmen und 36 px Ecken kaum 330 px für die Gästemappe. */
@media (max-width: 599px) {
  .k-handy { padding: var(--sp-2) 0 var(--sp-4); }
  .k-handy__titel { padding-inline: var(--sp-kante); }
  .k-handy__rahmen { width: 100%; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
  .k-handy__rahmen::before, .k-handy__rahmen::after { display: none; }
  .k-handy__iframe { border-radius: 0; clip-path: none; height: calc(100svh - var(--sp-kopf) - 120px); mask-image: none; -webkit-mask-image: none; }
}

/* DER EDITOR HAT EINE EIGENE BREITE (56rem): Seit Absätze bis zur Kante ihrer Spalte laufen, wären Zeilen und Felder auf
   2048 px über 1100 px breit. Was breiter ist, bekommt die Spalte des Handys, das darin mittig steht. */
@media (min-width: 64em) {
  .k-reiter { display: none; }
  .k-buehne { grid-template-columns: minmax(0, 56rem) minmax(calc(var(--k-handy) + 2 * var(--sp-5) + 24px), 1fr); min-height: calc(100svh - var(--sp-kopf)); }
  .k-navi { grid-column: 1 / -1; }
  .k-app--handy .k-mitte { display: block; }
  .k-handy { display: block; position: sticky; top: var(--sp-kopf); align-self: start; height: calc(100svh - var(--sp-kopf)); padding: var(--sp-4) var(--sp-5); border-left: 1px solid var(--sp-linie); overflow: auto; }
  .k-handy__titel { text-align: center; }
  .k-app--ohne-handy .k-buehne { grid-template-columns: minmax(0, 56rem) minmax(0, 1fr); }
}
/* AB 90EM die volle Bühne: Navigation | Editor | Handy. Das Handy bleibt ungestaucht 390 px breit. */
@media (min-width: 90em) {
  .k-buehne { grid-template-columns: 15rem minmax(0, 56rem) minmax(calc(var(--k-handy) + 2 * var(--sp-5) + 24px), 1fr); }
  .k-navi { grid-column: auto; position: sticky; top: var(--sp-kopf); align-self: start; height: calc(100svh - var(--sp-kopf)); padding: var(--sp-5) var(--sp-3); border-bottom: 0; border-right: 1px solid var(--sp-linie); overflow: auto; }
  .k-navi ul { flex-direction: column; flex-wrap: nowrap; }
  .k-navi__eintrag { width: 100%; }
  .k-navi__gruppe { display: block; margin: var(--sp-4) 0 var(--sp-1); padding: 0 var(--sp-3); font-size: var(--sp-fs-mikro); font-weight: 650; color: var(--sp-text-3); letter-spacing: .04em; text-transform: uppercase; }
  .k-navi__trenner { display: block; margin: var(--sp-3) var(--sp-3); border-top: 1px solid var(--sp-linie); }
  .k-editor { padding-inline: clamp(var(--sp-5), 3vw, var(--sp-7)); }
  .k-app--ohne-handy .k-buehne { grid-template-columns: 15rem minmax(0, 56rem) minmax(0, 1fr); }
}
/* Konto, Check-outs, Geräte, neue Wohnung: Das Handy zeigte dort nur die zuletzt gewählte Wohnung, also weg damit. */
.k-app--ohne-handy .k-handy, .k-app--ohne-handy .k-reiter { display: none; }

/* ---------------------------------------------------------------- Speicherleiste (klebt unten im Editor) */

.k-speicher {
  position: sticky; bottom: 0; z-index: 2; display: none;
  flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-4);
  padding: var(--sp-3) var(--sp-kante); border-top: 1px solid var(--sp-linie-stark); background: var(--sp-karte);
}
.k-speicher--offen { display: flex; }
.k-speicher .quittung { margin: 0; max-width: 60ch; }
.k-speicher__knoepfe { display: flex; gap: var(--sp-2); margin-left: auto; }
.quittung--fehler, .quittung--offen { color: var(--sp-hinweis-text); }
.knopf:disabled { opacity: .45; cursor: default; }
/* AM HANDY EINE ZEILE: Zweizeilig fraßen Kopf, Reiter und Leiste fast ein Drittel des Bildschirms. */
@media (max-width: 599px) {
  .k-speicher { gap: var(--sp-2); padding-block: var(--sp-2); }
  .k-speicher .quittung { flex: 1 1 8rem; font-size: var(--sp-fs-mikro); }
  .k-speicher .knopf { padding-inline: var(--sp-3); }
}
@media (min-width: 64em) {
  .k-speicher__ansehen { display: none; }
}
@media (min-width: 90em) {
  .k-speicher { padding-inline: clamp(var(--sp-5), 3vw, var(--sp-7)); }
}

/* ---------------------------------------------------------------- Sprache, Abschnitte, Herkunft */

.k-sprachen { margin: var(--sp-4) 0; padding: 0; border: 0; min-width: 0; }
.k-sprachen legend { padding: 0; margin-bottom: var(--sp-2); font-weight: 650; font-size: var(--sp-fs-klein); }
.k-sprachen__wahl { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.k-sprachen label, .k-herkunft__wahl { position: relative; display: inline-flex; }
.k-sprachen input, .k-herkunft input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.k-sprachen span, .k-herkunft span {
  display: inline-flex; align-items: center; min-height: var(--sp-griff); padding: 0 var(--sp-3);
  border: 1px solid var(--sp-linie-stark); border-radius: var(--sp-r); background: var(--sp-karte); font-size: var(--sp-fs-klein); font-weight: 600;
}
.k-sprachen input:checked + span, .k-herkunft input:checked + span { border-color: var(--sp-akzent); color: var(--sp-akzent-text); box-shadow: inset 0 0 0 1px var(--sp-akzent); }
.k-sprachen input:focus-visible + span, .k-herkunft input:focus-visible + span { outline: 3px solid var(--sp-fokus); outline-offset: 2px; }
.k-sprachen p { margin: var(--sp-2) 0 0; }
/* Schmaler Innenabstand: So passen die fünf Sprachen neben dem Handy (1024 px) in eine Zeile, „Français“ stand allein. */
.k-sprachen span { padding: 0 var(--sp-2); }

.k-kacheln { display: grid; gap: var(--sp-3); margin-top: var(--sp-4); }
.k-kachel { border: 1px solid var(--sp-linie); border-radius: var(--sp-r-gross); background: var(--sp-karte); }
/* DER PFEIL STEHT FEST RECHTS, NICHT IM FLUSS: Als letztes Flex-Kind rutschte er schmal allein in eine zweite Zeile, und
   die Köpfe wurden ungleich hoch (60 bis 78 px bei 390 px). */
.k-kachel__kopf {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-3);
  min-height: 60px; padding: var(--sp-3) calc(var(--sp-4) + 24px) var(--sp-3) var(--sp-4); list-style: none; cursor: pointer;
}
.k-kachel__kopf::-webkit-details-marker { display: none; }
.k-kachel__kopf::after {
  content: ""; position: absolute; top: calc(50% - 7px); right: var(--sp-4); width: 9px; height: 9px;
  border-right: 2px solid var(--sp-text-3); border-bottom: 2px solid var(--sp-text-3); transform: rotate(45deg);
}
.k-kachel[open] > .k-kachel__kopf::after { transform: translateY(3px) rotate(-135deg); }
.k-kachel__titel { font-weight: 700; font-size: var(--sp-fs-text); }
.k-kachel__kurz { color: var(--sp-text-3); font-size: var(--sp-fs-mikro); }
.k-kachel__geaendert { font-size: var(--sp-fs-mikro); font-weight: 650; color: var(--sp-hinweis-text); }
.k-kachel__inhalt { padding: 0 var(--sp-4) var(--sp-4); border-top: 1px solid var(--sp-linie); }
.k-kachel__inhalt.k-editor__felder { padding-top: var(--sp-4); }

.k-herkunft { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin: var(--sp-4) 0 var(--sp-2); padding: 0; border: 0; min-width: 0; }
.k-herkunft__satz { margin: 0 0 var(--sp-3); font-size: var(--sp-fs-klein); color: var(--sp-text-2); }
.k-streifen { margin: 0 0 var(--sp-4); padding: var(--sp-2) var(--sp-3); border-left: 3px solid var(--sp-akzent); background: var(--sp-grund); font-size: var(--sp-fs-klein); }

/* Herkunft als Marke im Kopf eines Abschnitts: Farbe ist Bedeutung (Petrol = für alle, Tinte = nur hier, grau = aus). */
.herkunft { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border: 1px solid currentColor; border-radius: 999px; font-size: var(--sp-fs-mikro); font-weight: 650; }
.herkunft--alle { color: var(--sp-akzent-text); }
.herkunft--hier { color: var(--sp-text); }
.herkunft--aus { color: var(--sp-text-3); }

/* ---------------------------------------------------------------- Felder und Listen */

.k-app .feld { margin-bottom: var(--sp-3); }
.k-app .feld input, .k-app .feld select, .feld textarea {
  width: 100%; min-height: 48px; padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--sp-feld-rand); border-radius: 10px; background: var(--sp-karte); color: var(--sp-text);
  font: inherit; font-size: 16px;
}
.feld textarea { min-height: 96px; resize: vertical; line-height: 1.45; }
.feld input[aria-invalid="true"], .feld textarea[aria-invalid="true"] { border-color: var(--sp-hinweis-text); }
.feld__fehler { margin: 2px 0 0; font-size: var(--sp-fs-klein); font-weight: 600; color: var(--sp-hinweis-text); }
.feld__fehler:empty { display: none; }
.k-mono { font-family: var(--sp-f-mono); letter-spacing: .02em; }
.k-haken { display: flex; align-items: center; gap: var(--sp-2); min-height: var(--sp-griff); }
/* flex: none – neben einem langen Satz schrumpfte das Kästchen am Handy sonst auf die Hälfte. */
.k-haken input { flex: none; width: 22px; height: 22px; }
/* Die Bestätigung „als Unternehmer“ steht vor allen Feldern: oben bündig mit der ersten Zeile und mit Luft zum nächsten Feld. */
.k-shop__teil > .k-haken { align-items: flex-start; margin-bottom: var(--sp-4); }
.k-shop__teil > .k-haken input { margin-top: 2px; }

.k-liste { display: grid; gap: var(--sp-3); }
.k-zeile { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); padding: var(--sp-3); border: 1px solid var(--sp-linie); border-radius: var(--sp-r); background: var(--sp-grund); }
.k-zeile__titel { margin: 0 0 var(--sp-2); font-weight: 700; }
.k-zeile__knoepfe { display: flex; gap: var(--sp-1); justify-content: flex-end; }
.k-rund {
  display: inline-grid; place-items: center; width: var(--sp-griff); height: var(--sp-griff);
  border: 1px solid var(--sp-linie-stark); border-radius: 50%; background: var(--sp-karte); color: var(--sp-text); cursor: pointer; font-size: 16px;
}
.k-rund:disabled { opacity: .4; cursor: default; }
.k-hinzu { margin: var(--sp-3) 0 var(--sp-4); }
/* Symbol oder Tonnenfarbe neben dem Namen, auf jeder Breite: Allein in seiner Zeile war das Auswahlfeld für ein Emoji
   auf 2048 px 1100 px breit. */
.feld-reihe.k-mit-symbol { grid-template-columns: 7rem minmax(0, 1fr); }
.k-mehr { margin: 0 0 var(--sp-2); }
.k-mehr > summary {
  display: flex; align-items: center; gap: var(--sp-2); min-height: var(--sp-griff); list-style: none;
  color: var(--sp-akzent-text); font-size: var(--sp-fs-klein); font-weight: 650; cursor: pointer;
}
.k-mehr > summary::-webkit-details-marker { display: none; }
.k-mehr > summary::before { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); }
.k-mehr[open] > summary::before { transform: rotate(45deg); }
.k-mehr[open] > summary { margin-bottom: var(--sp-2); }
@media (min-width: 40em) {
  .k-zeile { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
  .k-zeile__knoepfe { flex-direction: column; }
}

/* ---------------------------------------------------------------- Wohnung, Geräte, Konto */

/* Titel, Stand und Knöpfe einer Wohnung in einer Zeile: Vorher standen ~300 px Verwaltung vor dem ersten Feld. */
.k-wohnung__kopf { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); }
.k-wohnung__kopf .k-editor__titel { margin: 0; }
.k-wohnung__kopf p { margin: 0; }
.k-wohnung__status { font-weight: 650; font-size: var(--sp-fs-klein); }
.k-wohnung__status--live { color: var(--sp-gut-text); }
.k-wohnung__status--paused { color: var(--sp-hinweis-text); }
.k-wohnung__knoepfe { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.k-wohnung__satz { margin: var(--sp-2) 0 0; }
.k-gefahr { border-color: var(--sp-hinweis-text); color: var(--sp-hinweis-text); }

.k-geraete { display: grid; gap: var(--sp-3); margin: var(--sp-4) 0; padding: 0; list-style: none; }
.k-geraet { max-width: none; padding: var(--sp-4); border: 1px solid var(--sp-linie); border-radius: var(--sp-r-gross); background: var(--sp-karte); }
.k-geraet__name { margin: 0; }
.k-geraet .aktion { margin: var(--sp-2) 0 0; }

.k-block { margin: var(--sp-5) 0; padding: var(--sp-4) var(--sp-5); border: 1px solid var(--sp-linie); border-radius: var(--sp-r-gross); background: var(--sp-karte); }
.k-block h2 { font-size: var(--sp-fs-h3); }
.k-block > :last-child { margin-bottom: 0; }

.k-dialog { max-width: min(92vw, 34rem); padding: var(--sp-5); border: 1px solid var(--sp-linie-stark); border-radius: var(--sp-r-gross); background: var(--sp-karte); color: var(--sp-text); }
.k-dialog::backdrop { background: rgb(28 28 30 / .35); }

.k-anmelden .k-anmelden__form { max-width: 28rem; }

/* ---------------------------------------------------------------- Vorführung: Aufgaben */

/* Drei Aufgaben als Schrittleiste über dem Fenster: Kurzname im Knopf, ein Satz zur nächsten offenen darunter. */
.k-app--demo .k-leiste { display: block; padding: 0 var(--sp-kante) var(--sp-4); border: 0; background: none; }
.k-aufgaben { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }
.k-aufgaben h2 { margin: 0 var(--sp-2) 0 0; font-size: var(--sp-fs-text); letter-spacing: 0; }
.k-aufgaben__reihe { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
.k-aufgaben__reihe li { max-width: none; }
.k-schritt {
  display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--sp-griff); padding: 0 var(--sp-4) 0 var(--sp-2);
  border: 1px solid var(--sp-kontur); border-radius: 999px; background: var(--sp-karte); color: var(--sp-text); box-shadow: var(--sp-tiefe);
  font-size: var(--sp-fs-klein); font-weight: 600; cursor: pointer;
}
/* Nummern in Nachtpetrol wie die Schritte auf /de/preise – erledigt wird grün. */
.k-schritt__nr { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--sp-nacht); color: var(--sp-auf-akzent); font-size: var(--sp-fs-mikro); font-weight: 700; letter-spacing: 0; }
.k-schritt[aria-current="step"] { border-color: var(--sp-nacht); box-shadow: inset 0 0 0 1px var(--sp-nacht), var(--sp-tiefe); }
.k-schritt--erledigt .k-schritt__nr { background: var(--sp-gut-text); }
.k-schritt__stand { font-size: var(--sp-fs-mikro); font-weight: 650; color: var(--sp-gut-text); }
.k-aufgaben__neu { margin-left: auto; }
.k-aufgaben__satz { flex-basis: 100%; margin: 0; font-size: var(--sp-fs-klein); color: var(--sp-text-2); }
/* SCHMAL NUR DIE NUMMERN: Mit Namen stapelten sich die drei Knöpfe, die Leiste war 320 px hoch. Was die gewählte
   Nummer bedeutet, sagt der Satz darunter; Screenreader hören den Namen weiter. */
@media (max-width: 39.99em) {
  .k-schritt { justify-content: center; min-width: var(--sp-griff); padding: 0 var(--sp-2); }
  .k-schritt__text {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
}

/* ---------------------------------------------------------------- Druck: QR-Code und Notfallkarte */

.k-karten { display: grid; gap: var(--sp-5); margin-top: var(--sp-5); }
@media (min-width: 60em) {
  .k-karten { grid-template-columns: repeat(2, minmax(0, 26rem)); }
}
.k-druck .karte { max-width: 26rem; }
.k-druck .karte__qr { width: 46mm; }
@media print {
  .k-kopf, .k-fuss, .nicht-drucken, .k-leiste { display: none !important; }
  .k-karten { display: block; }
  .k-druck .karte { width: 105mm; margin-bottom: 8mm; padding: 7mm; border: .3mm dashed #000; border-radius: 0; break-inside: avoid; }
  .k-druck .karte__qr { width: 46mm; }
  .k-druck .k-karte-mappe__qr { width: 56mm; }
}
.k-druck .k-karte-mappe__qr { width: 56mm; }
.k-karte-netz { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-3); }
@media (min-width: 30em) {
  .k-karte-netz { grid-template-columns: auto minmax(0, 1fr); align-items: center; }
  .k-karte-netz .karte__qr { margin: 0; }
}

/* ---------------------------------------------------------------- Bestellen, Nicht verlängern, Melden, Anfrage */

/* Nicht verlängern, Melden, Anfrage: eine Spalte an der linken Kante wie Kopf und Fuß. Formulare ohne Skript; Fehler
   stehen am Feld und einmal gesammelt oben (role="alert"), damit Screenreader sie hören. */
.k-shop { max-width: 52rem; }
.k-shop--schmal { max-width: 40rem; }
/* LINKS HANDELN, RECHTS DIE SUMME – der Bestellweg wie der Rechner auf /de/preise: dieselben Spalten (7 : 5) und derselbe
   Abstand auf der Seitenbreite der Website, die rechte Spalte klebt. Schmal steht alles in der Reihenfolge des
   Quelltexts untereinander, höchstens 48rem breit; Absätze laufen dann bis an die Kante ihres Kastens, nicht bis 66ch. */
.k-shop--zwei { display: grid; grid-template-columns: minmax(0, 1fr); max-width: 48rem; }
.k-shop--zwei p, .k-shop--zwei li, .k-shop--zwei dd { max-width: none; }
.k-shop__haupt > :first-child { margin-top: 0; }
@media (min-width: 1100px) {
  .k-shop--zwei {
    max-width: none; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto 1fr;
    grid-template-areas: "kopf seite" "haupt seite"; column-gap: var(--sp-7); align-items: start;
  }
  .k-shop__kopf { grid-area: kopf; }
  .k-shop__haupt { grid-area: haupt; }
  .k-shop__seite { grid-area: seite; position: sticky; top: calc(var(--sp-kopf) + var(--sp-4)); }
  /* Offen ist „Auswahl ändern“ zu lang zum Kleben – sein unteres Ende wäre erst am Ende der Seite zu erreichen. */
  .k-shop__seite:has(.k-auswahl[open]) { position: static; }
}
.k-shop h1 { margin-bottom: var(--sp-4); font-size: var(--sp-fs-h1-seite); line-height: 1.05; letter-spacing: -.03em; }
.k-shop .k-hinweis, .k-verwaltung .k-hinweis {
  display: block; margin: 0 0 var(--sp-4); padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--sp-linie); border-radius: var(--sp-r); background: var(--sp-leinen);
}
.k-shop .k-hinweis p, .k-shop .k-hinweis ul { margin: 0; }
.k-shop .k-hinweis ul { padding-left: 1.2em; }
.k-shop .k-hinweis--fehler { border-color: var(--sp-hinweis-text); background: var(--sp-karte); color: var(--sp-hinweis-text); font-weight: 600; }
.k-shop .k-hinweis--test { border-style: dashed; border-color: var(--sp-linie-stark); }

.k-schritte { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); margin: 0 0 var(--sp-3); padding: 0; list-style: none; counter-reset: schritt; font-size: var(--sp-fs-klein); color: var(--sp-text-3); }
.k-schritte li { counter-increment: schritt; max-width: none; }
.k-schritte li::before { content: counter(schritt) ". "; }
.k-schritte [aria-current="step"] { color: var(--sp-text); font-weight: 650; }

.k-shop__form { margin-top: var(--sp-5); }
/* Felder nebeneinander bleiben oben bündig, auch wenn nur eines einen Hinweis trägt. */
.k-shop .feld, .k-verwaltung .feld { align-content: start; }
.k-shop__teil, .k-wahlgruppe { min-width: 0; margin: 0 0 var(--sp-5); padding: 0; border: 0; }
.k-shop__teil > legend { margin-bottom: var(--sp-4); padding: 0; font-size: var(--sp-fs-h3); font-weight: 700; letter-spacing: -.01em; }
.k-wahlgruppe > legend { margin-bottom: var(--sp-2); padding: 0; font-size: var(--sp-fs-klein); font-weight: 650; }
.k-shop__unter { margin: var(--sp-4) 0 var(--sp-1); font-size: var(--sp-fs-text); }

.k-wahl { display: flex; align-items: flex-start; gap: var(--sp-2); min-height: var(--sp-griff); padding: var(--sp-2) 0; cursor: pointer; }
.k-wahl input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--sp-akzent); }
.k-wahl small { display: block; color: var(--sp-text-2); font-size: var(--sp-fs-klein); }
.k-wahl--gross { margin-bottom: var(--sp-2); padding: var(--sp-3) var(--sp-4); border: 1px solid var(--sp-linie); border-radius: var(--sp-r); background: var(--sp-karte); }
.k-wahl--gross:has(input:checked) { border-color: var(--sp-akzent); box-shadow: inset 0 0 0 1px var(--sp-akzent); }

.k-lieferung { margin: 0 0 var(--sp-4); padding: 0 var(--sp-4); border: 1px solid var(--sp-linie); border-radius: var(--sp-r); background: var(--sp-karte); }
.k-lieferung > summary, .k-auswahl > summary { display: flex; align-items: center; gap: var(--sp-2); min-height: var(--sp-griff); font-weight: 650; list-style: none; cursor: pointer; }
.k-lieferung > summary::-webkit-details-marker, .k-auswahl > summary::-webkit-details-marker { display: none; }
.k-lieferung > summary::after, .k-auswahl > summary::after {
  content: ""; width: 8px; height: 8px; margin: -3px 0 0 var(--sp-1);
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg);
}
.k-lieferung[open] > summary::after, .k-auswahl[open] > summary::after { margin-top: 3px; transform: rotate(-135deg); }
.k-lieferung[open] > summary { margin-bottom: var(--sp-3); }

/* Summe und Posten mit denselben Zeilen wie der Summenkasten auf /de/preise: Text links, Betrag rechts. */
.k-shop__seite > .k-block { margin: 0 0 var(--sp-5); }
.k-postenliste { margin: 0 0 var(--sp-2); }
.k-postenliste dt { margin-top: var(--sp-4); font-size: var(--sp-fs-klein); font-weight: 650; color: var(--sp-text-2); }
.k-postenliste dt:first-child { margin-top: 0; }
.k-postenliste dd {
  display: flex; justify-content: space-between; gap: var(--sp-3);
  margin: 0; padding: var(--sp-2) 0; border-bottom: 1px solid var(--sp-linie); font-variant-numeric: tabular-nums;
}
.k-postenliste dd span:last-child { white-space: nowrap; }
.k-betrag { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0 var(--sp-3); margin: var(--sp-3) 0 var(--sp-2); font-weight: 650; }
.k-betrag b { font-size: var(--sp-fs-gross); font-variant-numeric: tabular-nums; white-space: nowrap; }
.k-betrag--gross b { font-size: var(--sp-fs-summe); letter-spacing: -.02em; }
.k-betrag + .k-betrag__dazu { margin: calc(-1 * var(--sp-1)) 0 var(--sp-3); font-size: var(--sp-fs-klein); color: var(--sp-text-2); }
/* Netto und Umsatzsteuer leise über dem, was zu zahlen ist – die Aufschlüsselung, nicht die Hauptsache. */
.k-betrag--teil { margin: var(--sp-1) 0 0; font-weight: 400; color: var(--sp-text-2); font-variant-numeric: tabular-nums; }
.k-betrag--teil span:last-child { white-space: nowrap; }
.k-betrag--teil + .k-betrag:not(.k-betrag--teil) { margin-top: var(--sp-2); }

/* „Auswahl ändern“: zu, wenn die Auswahl schon aus dem Rechner kommt. Die Zeilen stehen auf Sand im weißen Kasten. */
.k-auswahl { margin-top: var(--sp-4); border-top: 1px solid var(--sp-linie); }
.k-auswahl > summary { padding-top: var(--sp-2); color: var(--sp-akzent-text); }
.k-auswahl[open] > summary { margin-bottom: var(--sp-3); }
.k-auswahl > .feld input[type="number"] { width: 8rem; }
.k-geraetzeile {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--sp-3);
  margin-bottom: var(--sp-3); padding: var(--sp-3) var(--sp-3) 0; border-radius: var(--sp-r); background: var(--sp-grund);
}
.k-geraetzeile .feld { margin-bottom: var(--sp-3); }
.k-auswahl .aktion { margin: var(--sp-3) 0 0; }

.k-angaben dl { display: grid; gap: var(--sp-1) var(--sp-4); margin: 0 0 var(--sp-3); }
.k-angaben dt { font-size: var(--sp-fs-klein); font-weight: 650; color: var(--sp-text-2); }
.k-angaben dd { margin: 0 0 var(--sp-2); }
/* Nebeneinander nur, wenn die Spalte breit genug ist – rechts neben der Übersicht ist sie bei 1100 px schmal. */
.k-shop__seite { container-type: inline-size; }
@container (min-width: 32rem) {
  .k-angaben dl { grid-template-columns: 11rem minmax(0, 1fr); }
  .k-angaben dd { margin: 0; }
}
.k-vorbehalt { color: var(--sp-text-2); }

/* DER BLOCK ÜBER DEM KNOPF ist hervorgehoben, nicht nur verlinkt: Rahmen in Petrol, eigene Fläche. § 312j Abs. 2 BGB
   verlangt das nur gegenüber Verbrauchern, für Unternehmer ist es schlicht die klarste Form.
   Ruhig gesetzt: Summen als Zeilen, Laufzeit, Geräte und Zahlart normal, Anbieter und Hinweise klein darunter. */
.k-pflicht { margin: 0 0 var(--sp-4); padding: var(--sp-4) var(--sp-5); border: 2px solid var(--sp-akzent); border-radius: var(--sp-r-gross); background: var(--sp-karte); }
.k-pflicht__kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-2); }
.k-pflicht h2 { margin: 0 0 var(--sp-2); font-size: var(--sp-fs-h3); }
.k-pflicht p { margin: 0 0 var(--sp-3); }
.k-pflicht .k-betrag { margin: var(--sp-3) 0 var(--sp-1); }
.k-pflicht .k-betrag--teil { margin: var(--sp-1) 0 0; }
.k-pflicht__klein { margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--sp-linie); font-size: var(--sp-fs-klein); color: var(--sp-text-2); }
.k-pflicht__klein p { margin: 0 0 var(--sp-2); }
.k-pflicht__klein > :last-child { margin-bottom: 0; }
.k-textknopf {
  display: inline-flex; align-items: center; min-height: var(--sp-griff); padding: 0; border: 0; background: none;
  color: var(--sp-akzent-text); font: inherit; font-weight: 650; text-decoration: underline; text-underline-offset: .2em; cursor: pointer;
}
/* Im Fließtext bleibt die Tippfläche 44 px hoch, ohne die Zeile aufzureißen. */
p > .k-textknopf { min-height: 0; padding-block: .6em; margin-block: -.6em; }
.k-posten { width: 100%; margin: 0 0 var(--sp-3); border-collapse: collapse; }
.k-posten th { padding: var(--sp-2) 0; border-bottom: 1px solid var(--sp-linie-stark); font-size: var(--sp-fs-klein); text-align: left; }
.k-posten td { padding: var(--sp-2) var(--sp-3) var(--sp-2) 0; border-bottom: 1px solid var(--sp-linie); vertical-align: top; }
.k-posten td:last-child, .k-posten th:last-child { padding-right: 0; text-align: right; white-space: nowrap; }
.k-summe { font-size: var(--sp-fs-gross); }
.k-summe strong { font-weight: 700; }
.k-bestellknopf { min-height: 52px; padding: 0 var(--sp-6); font-size: var(--sp-fs-gross); }
@media (max-width: 599px) {
  .k-bestellknopf, .k-weiter { width: 100%; }
  /* „im Jahr“ und „einmalig“ unter den Betrag, sonst bricht am Handy jeder Posten in zwei Zeilen. */
  .k-posten td:last-child .leise { display: block; font-size: var(--sp-fs-klein); }
}
/* Bankdaten zum Abtippen: eine Zeile je Feld, IBAN und Verwendungszweck in Festbreite und ohne Umbruch. */
.k-bank { display: grid; gap: 0 var(--sp-4); margin: 0 0 var(--sp-4); }
.k-bank dt { font-size: var(--sp-fs-klein); color: var(--sp-text-2); }
.k-bank dd { margin: 0 0 var(--sp-2); font-weight: 650; }
.k-bank .k-mono { white-space: nowrap; }
@media (min-width: 40em) {
  .k-bank { grid-template-columns: auto minmax(0, 1fr); align-items: baseline; }
  .k-bank dd { margin: 0; padding: var(--sp-1) 0; }
}
.k-naechstes { margin-top: var(--sp-6); }
.k-naechstes h2 { font-size: var(--sp-fs-h3); }
.k-sprachwahl { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin: 0 0 var(--sp-3); font-size: var(--sp-fs-klein); font-weight: 650; }
.k-sprachwahl > * { display: inline-flex; align-items: center; justify-content: center; min-width: var(--sp-griff); min-height: var(--sp-griff); }
.k-sprachwahl span { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .4em; }

/* ---------------------------------------------------------------- Verwaltung (nur Sascha) */

.k-verwaltung h1 { margin-bottom: var(--sp-4); font-size: var(--sp-fs-h2); }
.k-verwaltung h2 { margin-top: var(--sp-6); font-size: var(--sp-fs-h3); }
.k-brotkrumen { margin: 0 0 var(--sp-2); font-size: var(--sp-fs-klein); }
.k-suche { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-3); }
.k-suche .feld { flex: 1 1 18rem; margin: 0; }
.k-kennzahlen { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin: var(--sp-5) 0; padding: 0; list-style: none; }
.k-kennzahlen li { padding: var(--sp-3) var(--sp-4); border: 1px solid var(--sp-linie); border-radius: var(--sp-r); background: var(--sp-karte); }
.k-tabelle { overflow-x: auto; border: 1px solid var(--sp-linie); border-radius: var(--sp-r); background: var(--sp-karte); }
.k-tabelle table { width: 100%; border-collapse: collapse; font-size: var(--sp-fs-klein); }
.k-tabelle th, .k-tabelle td { padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--sp-linie); text-align: left; vertical-align: top; }
.k-tabelle tr:last-child td { border-bottom: 0; }
.k-spalten { display: grid; gap: 0 var(--sp-5); }
@media (min-width: 60em) {
  .k-spalten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.k-aktionen { display: grid; gap: var(--sp-4); }
.k-aktion { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-2) var(--sp-4); padding-bottom: var(--sp-4); border-bottom: 1px solid var(--sp-linie); }
.k-aktion:last-child { padding-bottom: 0; border-bottom: 0; }
.k-aktion .feld, .k-aktion .feld-reihe { margin: 0; }
.k-daten { display: grid; gap: var(--sp-1) var(--sp-4); }
.k-daten dt { font-size: var(--sp-fs-klein); font-weight: 650; color: var(--sp-text-2); }
.k-daten dd { margin: 0 0 var(--sp-2); }
@media (min-width: 40em) {
  .k-daten { grid-template-columns: 13rem minmax(0, 1fr); }
  .k-daten dd { margin: 0; }
}
.k-rechnung { overflow-x: auto; padding: var(--sp-3); border-radius: var(--sp-r); background: var(--sp-grund); font-family: var(--sp-f-mono); font-size: var(--sp-fs-mikro); line-height: 1.5; }

/* REITER DER VERWALTUNG wie die Navigation der Website: Links, unterstrichen, wo man ist. Schmal brechen sie um. Die
   Verwaltung hat keinen gefüllten Knopf – sie ist ein Werkzeug, keine Seite mit einer Hauptaktion. */
.k-vnavi { padding: var(--sp-2) var(--sp-kante); border-bottom: 1px solid var(--sp-linie); background: var(--sp-karte); }
.k-vnavi ul { display: flex; flex-wrap: wrap; gap: 0 var(--sp-1); margin: 0; padding: 0; list-style: none; }
.k-vnavi a { display: inline-flex; align-items: center; min-height: var(--sp-griff); padding: 0 var(--sp-2); color: var(--sp-text); font-size: var(--sp-fs-klein); font-weight: 600; text-decoration: none; white-space: nowrap; }
.k-vnavi a:hover { color: var(--sp-akzent-text); }
.k-vnavi a[aria-current] { color: var(--sp-akzent-text); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .4em; }
/* Unter den Reitern beginnt der Inhalt so nah wie unter dem Kopf jeder anderen Seite. */
.k-vnavi + .abschnitt { padding-top: var(--sp-6); }
.k-tabelle .k-mono { white-space: nowrap; }
.k-filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-3); margin: 0 0 var(--sp-4); }
.k-filter .feld { margin: 0; }
.k-filter__breit { flex: 1 1 18rem; }
.k-tabelle:focus-visible { outline: 3px solid var(--sp-fokus); outline-offset: 2px; }
.k-tabelle thead th { font-size: var(--sp-fs-mikro); font-weight: 650; color: var(--sp-text-3); white-space: nowrap; }
/* Am Handy scrollt die Tabelle in sich, die erste Spalte (Nummer, Konto) bleibt stehen. */
.k-tabelle th:first-child, .k-tabelle td:first-child { position: sticky; left: 0; background: var(--sp-karte); }
.k-tabelle .k-aktion { padding-bottom: 0; border-bottom: 0; }
.k-zahl { font-variant-numeric: tabular-nums; white-space: nowrap; }
.k-schild { display: inline-block; margin-left: var(--sp-1); padding: 0 var(--sp-2); border: 1px solid var(--sp-linie-stark); border-radius: 999px; font-size: var(--sp-fs-mikro); font-weight: 600; line-height: 1.6; color: var(--sp-text-2); white-space: nowrap; }
.k-schild--rot { border-color: var(--sp-hinweis-text); color: var(--sp-hinweis-text); }
.k-schild--gelb { border-color: var(--sp-warn-text); color: var(--sp-warn-text); }
/* Was sich nicht zurückholen lässt (Löschen, Sperren, Stornieren), steht in Terrakotta, nicht als gefüllter Knopf. */
.k-gefahr { border-color: var(--sp-hinweis-text); color: var(--sp-hinweis-text); }
.k-gefahr:hover { background: var(--sp-karte); }

/* PRÜFLISTE: Jede Ampel trägt ihr Wort (Fehlt, Prüfen, Bereit, Von Hand) – die Farbe allein trüge die Bedeutung nicht. */
.k-ampelzeile { margin: 0 0 var(--sp-4); padding: var(--sp-3) var(--sp-4); border: 1px solid var(--sp-linie); border-left-width: 4px; border-radius: var(--sp-r); background: var(--sp-karte); }
.k-ampelzeile--rot { border-left-color: var(--sp-hinweis-text); }
.k-ampelzeile--gelb { border-left-color: var(--sp-warn-text); }
.k-ampelzeile--gruen { border-left-color: var(--sp-gut-text); }
.k-ampel { margin: 0 0 var(--sp-4); padding: 0; list-style: none; border-top: 1px solid var(--sp-linie); }
.k-ampel__punkt { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: var(--sp-1) var(--sp-3); align-items: baseline; max-width: none; padding: var(--sp-3) 0; border-bottom: 1px solid var(--sp-linie); }
.k-ampel__wort { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--sp-fs-klein); font-weight: 650; }
.k-ampel__wort::before { content: ""; flex: none; width: .7em; height: .7em; border-radius: 50%; background: currentColor; }
.k-ampel__punkt--rot .k-ampel__wort { color: var(--sp-hinweis-text); }
.k-ampel__punkt--gelb .k-ampel__wort { color: var(--sp-warn-text); }
.k-ampel__punkt--gruen .k-ampel__wort { color: var(--sp-gut-text); }
.k-ampel__punkt--grau .k-ampel__wort { color: var(--sp-text-3); }
.k-ampel__punkt--grau .k-ampel__wort::before { background: none; border: 1.5px dashed currentColor; }
@media (max-width: 40em) {
  .k-ampel__punkt { grid-template-columns: minmax(0, 1fr); }
}

/* DRUCK UND VERSAND: eine Karte je Bestellung – Geräte mit Filament, Anschrift, Codes und Knöpfe passen in keine Tabellenzeile. */
.k-auftrag { margin: 0 0 var(--sp-4); padding: var(--sp-4) var(--sp-5); border: 1px solid var(--sp-linie); border-radius: var(--sp-r-gross); background: var(--sp-karte); }
.k-auftrag__kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-4); }
.k-verwaltung .k-auftrag__kopf h2 { margin: 0; font-size: var(--sp-fs-h3); }
.k-auftrag__kopf p { margin: 0; }
.k-auftrag__inhalt { display: grid; gap: var(--sp-3) var(--sp-5); margin-top: var(--sp-3); }
@media (min-width: 50em) {
  .k-auftrag__inhalt { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}
.k-auftrag address { margin: 0; }
.k-auftrag__knoepfe { display: grid; gap: var(--sp-3); margin-top: var(--sp-3); }
.k-auftrag__knoepfe:empty { display: none; }
.k-geraeteliste { margin: 0 0 var(--sp-2); padding-left: 1.1em; }
.k-geraeteliste li { max-width: none; }

/* GÄSTEMAPPE ANSEHEN: links die Abschnitte, rechts dasselbe Handy wie im Gastgeber-Bereich. */
.k-vmappe { --k-handy: 390px; display: grid; gap: var(--sp-5); }
@media (min-width: 64em) {
  .k-vmappe { grid-template-columns: minmax(0, 1fr) calc(var(--k-handy) + 24px); align-items: start; }
  .k-vmappe__handy { position: sticky; top: calc(var(--sp-kopf) + var(--sp-4)); }
}
.k-wohnungswahl ul { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); margin: 0 0 var(--sp-4); padding: 0; list-style: none; }
.k-wohnungswahl a { display: inline-flex; align-items: center; min-height: var(--sp-griff); font-weight: 600; }
.k-wohnungswahl a[aria-current] { text-decoration-thickness: 2px; }

/* MARKETING: links die Wege zu Gastgebern, rechts die Vorlagen zum Aufklappen und Kopieren. */
.k-kanaele { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--sp-linie); }
.k-kanaele > li { max-width: none; padding: var(--sp-3) 0; border-bottom: 1px solid var(--sp-linie); }
.k-kanaele h3 { margin: 0 0 var(--sp-1); font-size: var(--sp-fs-text); }
.k-kanaele p { margin: 0 0 var(--sp-2); }
.k-kanaele p:last-child { margin-bottom: 0; }
.k-vorlagekachel { margin-bottom: var(--sp-3); }
.k-vorlage { margin: 0 0 var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--sp-r); background: var(--sp-grund); }
.k-vorlage p { max-width: none; margin: 0 0 var(--sp-2); }
.k-vorlage p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- Vorführung auf taporta.com/de/demo */

/* Oben so nah am Kopf wie jede Seite der Website (site.css, erster Abschnitt) – die H1 springt beim Wechsel nicht. */
.k-demo-einstieg { padding: var(--sp-6) var(--sp-kante) var(--sp-4); }
.k-demo-einstieg h1 { margin-bottom: var(--sp-2); font-size: var(--sp-fs-h1-seite); line-height: 1.05; letter-spacing: -.03em; }
.k-demo-einstieg .vorspann { margin: 0; }
.k-demo-ohne { padding: var(--sp-5) var(--sp-kante); }

/* DIE VORFÜHRUNG STEHT AUF DER SEITENBREITE wie Kopf und Fuß, als umrandetes Fenster: oben die Bereiche als Leiste,
   darunter Editor und Handy. Über die volle Breite klebte auf 2048 px die Navigation am linken, das Handy am rechten
   Rand. Der echte Gastgeber-Bereich bleibt ein Werkzeug über die volle Breite. */
@media (min-width: 64em) {
  .k-app--demo {
    --k-navi-h: calc(var(--sp-griff) + 2 * var(--sp-2) + 1px);
    max-width: calc(var(--sp-breite) + 2 * var(--sp-rand)); margin: 0 auto; padding: 0 var(--sp-rand) var(--sp-abschnitt);
  }
  .k-app--demo .k-leiste { padding-inline: 0; }
  /* Hier ist das Handy fest und der Editor nimmt den Rest – neben dem Handy höchstens ~950 px, also ohne eigene Grenze.
     overflow: clip schneidet die Ecken, ohne wie hidden das Kleben von Leiste und Handy zu brechen. */
  .k-app--demo .k-buehne {
    grid-template-columns: minmax(0, 1fr) calc(var(--k-handy) + 24px + 2 * var(--sp-4));
    min-height: 0; border: 1px solid var(--sp-linie-stark); border-radius: var(--sp-r-gross); overflow: clip;
  }
  .k-app--demo.k-app--ohne-handy .k-buehne { grid-template-columns: minmax(0, 56rem) minmax(0, 1fr); }
  .k-app--demo .k-navi {
    grid-column: 1 / -1; position: sticky; top: var(--sp-kopf); z-index: 3; align-self: auto; height: auto; overflow: visible;
    padding: var(--sp-2) var(--sp-3); border-right: 0; border-bottom: 1px solid var(--sp-linie); background: var(--sp-karte);
  }
  .k-app--demo .k-navi ul { flex-direction: row; flex-wrap: wrap; gap: 0 var(--sp-1); }
  .k-app--demo .k-navi__eintrag { width: auto; padding-inline: var(--sp-2); }
  /* Gewählt wie im Kopf der Website: unterstrichen. Eine Petrol-Fläche hieße hier „für alle Wohnungen“. */
  .k-app--demo .k-navi__eintrag[aria-current="page"] {
    background: none; box-shadow: none; color: var(--sp-akzent-text);
    text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .4em;
  }
  .k-app--demo .k-navi__gruppe { display: none; }
  .k-app--demo .k-navi__trenner { display: block; align-self: stretch; margin: var(--sp-2); border: 0; border-left: 1px solid var(--sp-linie); }
  .k-app--demo .k-editor { padding: var(--sp-5) var(--sp-6) var(--sp-7); }
  .k-app--demo .k-speicher { padding-inline: var(--sp-6); }
  /* DIE TRENNLINIE GEHÖRT DEM EDITOR, er reicht immer bis zum Boden des Fensters. Am klebenden Handy endete sie bei
     1440 × 900 eine Handbreit darüber. */
  .k-app--demo:not(.k-app--ohne-handy) .k-mitte { border-right: 1px solid var(--sp-linie); }
  .k-app--demo .k-handy {
    top: calc(var(--sp-kopf) + var(--k-navi-h)); height: auto; padding: var(--sp-4);
    border-left: 0; overflow: visible;
  }
  /* Ausgewogenes Smartphone-Verhältnis (mind. 520 px hoch), damit WLAN-Karten lesbar bleiben und nichts zerquetscht wird */
  .k-app--demo .k-handy__iframe { height: min(720px, calc(100svh - var(--sp-kopf) - var(--k-navi-h) - 150px)); min-height: 520px; }
}
@media (min-width: 80em) {
  .k-app--demo .k-navi__eintrag { padding-inline: var(--sp-3); }
}
.k-vmappe h3 { margin-top: var(--sp-5); }