/* =====================================================================
   Küstenpatent-Anmeldung · Stylesheet
   Nur Systemschriften, keine externen Ressourcen.
   ===================================================================== */

:root {
  --kp-tief:       #0a2540;
  --kp-see:        #16688f;
  --kp-welle:      #2ea3a8;
  --kp-gold:       #c9a227;
  --kp-papier:     #f4f8fa;
  --kp-flaeche:    #ffffff;
  --kp-linie:      #d9e4ec;
  --kp-linie-soft: #eaf1f5;
  --kp-text:       #16303f;
  --kp-grau:       #5b7285;
  --kp-backbord:   #c8102e;
  --kp-steuerbord: #00733a;
  --kp-radius:     10px;
  --kp-schrift:    "Segoe UI", Tahoma, Verdana, Geneva, sans-serif;
}

.kp-app *,
.kp-app *::before,
.kp-app *::after { box-sizing: border-box; }

.kp-app {
  font-family: var(--kp-schrift);
  color: var(--kp-text);
  font-size: 16px;
  line-height: 1.55;
  background: var(--kp-papier);
  padding: 28px 16px 60px;
  margin: 0;
  -webkit-text-size-adjust: 100%;
}

.kp-buehne { max-width: 780px; margin: 0 auto; }

/* --- Kopfbereich mit Törnverlauf ------------------------------------ */

.kp-kopf {
  background: var(--kp-flaeche);
  border: 1px solid var(--kp-linie);
  border-top: 3px solid var(--kp-see);
  border-radius: var(--kp-radius) var(--kp-radius) 0 0;
  padding: 24px 26px 18px;
}
.kp-kopf h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--kp-tief);
}
.kp-kopf p { margin: 6px 0 0; color: var(--kp-grau); font-size: 15px; }

/* Dunkler Kopf für die Kundenseiten – der Adminbereich (.kp-admin)
   behält bewusst die helle Fassung. */
.kp-app:not(.kp-admin) .kp-kopf {
  background: var(--kp-tief);
  border: none;
  border-bottom: 3px solid var(--kp-gold);
  border-radius: var(--kp-radius) var(--kp-radius) 0 0;
  padding: 26px 28px 20px;
}
/* Nur die unmittelbaren Kinder aufhellen – Kästen im Kopf, etwa der
   Warnhinweis auf der Übersicht, behalten ihre eigenen Farben. */
.kp-app:not(.kp-admin) .kp-kopf > h1 { color: #fff; }
.kp-app:not(.kp-admin) .kp-kopf > p  { color: rgba(255, 255, 255, .78); }
.kp-app:not(.kp-admin) .kp-kopf > p a { color: #fff; }

.kp-toern {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--kp-grau);
}
.kp-toern li { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.kp-toern li::before {
  content: "";
  width: 9px; height: 9px;
  border-radius: 50%;
  border: 2px solid var(--kp-linie);
  background: var(--kp-flaeche);
  flex: none;
}
.kp-toern li::after {
  content: "";
  width: 26px; height: 1px;
  background: var(--kp-linie);
}
.kp-toern li:last-child::after { display: none; }
.kp-toern li[aria-current] { color: var(--kp-see); font-weight: 600; }
.kp-toern li[aria-current]::before { border-color: var(--kp-see); background: var(--kp-see); }
.kp-toern li.kp-erledigt::before { border-color: var(--kp-welle); background: var(--kp-welle); }

.kp-app:not(.kp-admin) .kp-toern { color: rgba(255, 255, 255, .58); }
.kp-app:not(.kp-admin) .kp-toern li::before {
  border-color: rgba(255, 255, 255, .38);
  background: transparent;
}
.kp-app:not(.kp-admin) .kp-toern li::after { background: rgba(255, 255, 255, .25); }
.kp-app:not(.kp-admin) .kp-toern li[aria-current] { color: var(--kp-gold); }
.kp-app:not(.kp-admin) .kp-toern li[aria-current]::before {
  border-color: var(--kp-gold);
  background: var(--kp-gold);
}
.kp-app:not(.kp-admin) .kp-toern li.kp-erledigt::before {
  border-color: var(--kp-welle);
  background: var(--kp-welle);
}

/* --- Karte ---------------------------------------------------------- */

.kp-karte {
  background: var(--kp-flaeche);
  border: 1px solid var(--kp-linie);
  border-top: none;
  border-radius: 0 0 var(--kp-radius) var(--kp-radius);
  padding: 26px;
}
.kp-app:not(.kp-admin) .kp-karte { border-top: none; }

/* --- Trennlinie mit Kompassrose ------------------------------------- */

.kp-trenner {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 30px 0 26px;
  color: var(--kp-welle);
}
.kp-trenner__linie { flex: 1; height: 1px; background: var(--kp-linie); }
.kp-rose { width: 18px; height: 18px; flex: none; opacity: .85; }

/* --- Felder --------------------------------------------------------- */

.kp-feld { margin: 0 0 18px; }
.kp-feld:last-child { margin-bottom: 0; }

.kp-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--kp-tief);
  margin: 0 0 6px;
}
.kp-ico { width: 18px; height: 18px; flex: none; color: var(--kp-see); }
.kp-pflicht { color: var(--kp-backbord); font-weight: 700; }

.kp-input {
  width: 100%;
  font: inherit;
  font-size: 15.5px;
  color: var(--kp-text);
  background: var(--kp-flaeche);
  border: 1px solid var(--kp-linie);
  border-radius: 7px;
  padding: 10px 12px;
  transition: border-color .12s, box-shadow .12s;
}
.kp-input:hover { border-color: #bed0dc; }
.kp-input:focus {
  outline: none;
  border-color: var(--kp-see);
  box-shadow: 0 0 0 3px rgba(22, 104, 143, .16);
}
.kp-input:focus-visible { outline: none; }
textarea.kp-input { resize: vertical; min-height: 96px; line-height: 1.5; }
select.kp-input { appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--kp-see) 50%),
                    linear-gradient(135deg, var(--kp-see) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 34px;
}
select.kp-input option[disabled] { color: #a8b8c4; }

.kp-gitter { display: grid; gap: 14px; }
.kp-gitter--plz { grid-template-columns: minmax(90px, 0.4fr) 1fr; }
.kp-gitter--3   { grid-template-columns: 1fr 1fr 1fr; }
.kp-gitter--2   { grid-template-columns: 1fr 1fr; }
.kp-gitter--anrede { grid-template-columns: minmax(110px, 0.6fr) 1fr; }
.kp-gitter .kp-feld { margin-bottom: 0; }

.kp-hinweis { margin: 5px 0 0; font-size: 13px; color: var(--kp-grau); }
.kp-hinweis-block {
  margin: 0 0 18px;
  padding: 12px 14px;
  background: var(--kp-papier);
  border-left: 3px solid var(--kp-welle);
  border-radius: 0 6px 6px 0;
  font-size: 14.5px;
  color: var(--kp-grau);
}
.kp-sub {
  margin: 26px 0 12px;
  font-size: 13px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--kp-see);
}
.kp-zaehler { float: right; font-weight: 400; color: var(--kp-grau); font-size: 13px; }

/* --- Fehler --------------------------------------------------------- */

.kp-fehler {
  margin: 5px 0 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--kp-backbord);
}
.kp-feld--fehler .kp-input { border-color: var(--kp-backbord); background: #fffafb; }
.kp-feld--fehler .kp-input:focus { box-shadow: 0 0 0 3px rgba(200, 16, 46, .14); }
.kp-feld--fehler .kp-label { color: var(--kp-backbord); }
.kp-feld--fehler .kp-ico { color: var(--kp-backbord); }

.kp-meldung {
  margin: 0 0 22px;
  padding: 13px 16px;
  border-radius: 8px;
  font-size: 15px;
  border: 1px solid;
}
.kp-meldung--fehler { background: #fff4f5; border-color: #f0c2c9; color: #8d1024; }
.kp-meldung--ok     { background: #f0faf4; border-color: #bfe4cd; color: #05572c; }
.kp-meldung--info   { background: var(--kp-papier); border-color: var(--kp-linie); color: var(--kp-grau); }

/* --- Optionen (Radio / Checkbox) ------------------------------------ */

.kp-optionen { display: flex; flex-direction: column; gap: 8px; }
.kp-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  cursor: pointer;
  padding: 8px 12px;
  border: 1px solid var(--kp-linie);
  border-radius: 7px;
  transition: border-color .12s, background .12s;
}
.kp-option:hover { border-color: var(--kp-welle); background: #fbfeff; }
.kp-option input { margin: 3px 0 0; accent-color: var(--kp-see); flex: none; width: 17px; height: 17px; }
.kp-option input:focus-visible { outline: 2px solid var(--kp-see); outline-offset: 2px; }
.kp-optionen--reihe { flex-direction: row; flex-wrap: wrap; }
.kp-optionen--reihe .kp-option { flex: 1 1 140px; }

/* --- Extras --------------------------------------------------------- */

.kp-extra {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  grid-template-areas:
    "box bild titel preis"
    "box bild besch besch";
  column-gap: 12px;
  row-gap: 4px;
  align-items: start;
  border: 1px solid var(--kp-linie);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 10px;
  transition: border-color .12s, background .12s;
}
.kp-extra:hover { border-color: var(--kp-welle); }
.kp-extra:has(input:checked) { border-color: var(--kp-see); background: #f6fbfd; }

.kp-extra__box   { grid-area: box; display: flex; cursor: pointer; padding-top: 2px; }
.kp-extra input  { accent-color: var(--kp-see); width: 18px; height: 18px; margin: 0; }
.kp-extra__titel {
  grid-area: titel;
  font-weight: 600;
  color: var(--kp-tief);
  cursor: pointer;
  align-self: center;
}
.kp-extra__preis {
  grid-area: preis;
  font-weight: 600;
  white-space: nowrap;
  color: var(--kp-see);
  align-self: center;
}
.kp-extra__besch {
  grid-area: besch;
  font-size: 14px;
  color: var(--kp-grau);
  line-height: 1.5;
}
.kp-extra__mehr {
  display: none;
  margin-top: 3px;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--kp-see);
  cursor: pointer;
  text-decoration: underline;
}
.kp-extra__mehr:focus-visible { outline: 2px solid var(--kp-see); outline-offset: 2px; }

/* Vorschaubild mit Lupe */
.kp-extra__bild {
  grid-area: bild;
  position: relative;
  width: 86px;
  height: 86px;
  padding: 0;
  border: 1px solid var(--kp-linie);
  border-radius: 7px;
  background: #fff;
  cursor: zoom-in;
  overflow: hidden;
}
.kp-extra__bild img { width: 100%; height: 100%; object-fit: contain; display: block; }
.kp-extra__bild:hover { border-color: var(--kp-see); }
.kp-extra__bild:focus-visible { outline: 3px solid rgba(22,104,143,.35); outline-offset: 2px; }
.kp-extra__lupe {
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  background: rgba(10, 37, 64, .78);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kp-extra__lupe svg { width: 14px; height: 14px; }

/* --- Bildbetrachter -------------------------------------------------- */

.kp-lupe {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(8, 24, 38, .82);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.kp-lupe[hidden] { display: none; }
.kp-lupe__rahmen {
  position: relative;
  background: #fff;
  border-radius: 10px;
  padding: 16px;
  max-width: min(880px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.kp-lupe__bild {
  max-width: 100%;
  max-height: calc(100vh - 150px);
  object-fit: contain;
  border-radius: 5px;
  display: block;
  margin: 0 auto;
}
.kp-lupe__titel {
  margin: 0;
  text-align: center;
  font-weight: 600;
  color: var(--kp-tief);
  font-size: 15px;
}
.kp-lupe__zu {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: var(--kp-tief);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.kp-lupe__zu:hover { background: var(--kp-see); }
.kp-lupe__zu:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* --- Download der Lernunterlagen ------------------------------------- */

.kp-download {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  border: 1px solid var(--kp-linie);
  border-left: 3px solid var(--kp-see);
  border-radius: 0 8px 8px 0;
  padding: 16px 18px;
  background: #f6fbfd;
}
.kp-download__ico { width: 34px; height: 34px; flex: none; color: var(--kp-see); }
.kp-download__text { flex: 1 1 220px; min-width: 0; }
.kp-download__text h3 { margin: 0; font-size: 16px; color: var(--kp-tief); }
.kp-download__text p  { margin: 3px 0 0; font-size: 14px; color: var(--kp-grau); }
.kp-download__knopf { flex: none; }

.kp-warnblock {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 14px;
  padding: 13px 16px;
  background: #fff9ec;
  border: 1px solid #f0dcb0;
  border-radius: 8px;
}
.kp-warnblock__ico { width: 20px; height: 20px; flex: none; color: #a8730c; margin-top: 2px; }
.kp-warnblock p { margin: 0; font-size: 14.5px; color: #6b4b06; }
.kp-warnblock--gross {
  margin: 0 0 16px;
  padding: 16px 18px;
  border-width: 2px;
}
.kp-warnblock--gross .kp-warnblock__ico { width: 26px; height: 26px; }
.kp-warnblock--gross p { font-size: 15px; line-height: 1.55; }

/* Fester Betrag statt Auswahl */
.kp-festbetrag {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0;
  padding: 13px 16px;
  border: 1px solid var(--kp-linie);
  border-radius: 8px;
  background: #fbfdfe;
}
.kp-festbetrag b { font-size: 19px; color: var(--kp-tief); }
.kp-festbetrag span { font-size: 14px; color: var(--kp-grau); }

/* Dezenter Hinweis auf den sofortigen Download bei PayPal */
.kp-tipp {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  margin: 0 0 18px;
  padding: 14px 16px;
  background: #f6fbfd;
  border: 1px solid #bcdfe9;
  border-radius: 8px;
}
.kp-tipp__ico { width: 24px; height: 24px; flex: none; color: var(--kp-see); margin-top: 1px; }
.kp-tipp p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--kp-text); }
.kp-tipp b { color: var(--kp-tief); }

/* --- Buttons -------------------------------------------------------- */

.kp-knopfleiste {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid var(--kp-linie-soft);
}
.kp-knopf {
  font: inherit;
  font-size: 15.5px;
  font-weight: 600;
  padding: 12px 26px;
  border-radius: 7px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background .12s, border-color .12s, color .12s;
}
.kp-knopf--haupt { background: var(--kp-see); color: #fff; flex: 1 1 240px; }
.kp-knopf--haupt:hover { background: #12587a; }
.kp-knopf--neben {
  background: var(--kp-flaeche);
  color: var(--kp-grau);
  border-color: var(--kp-linie);
}
.kp-knopf--neben:hover { border-color: var(--kp-grau); color: var(--kp-tief); }
.kp-knopf:focus-visible { outline: 3px solid rgba(22,104,143,.35); outline-offset: 2px; }
.kp-knopf[disabled] { opacity: .55; cursor: not-allowed; }

/* --- Übersichtsseite ------------------------------------------------ */

.kp-anrede { font-size: 18px; font-weight: 600; color: var(--kp-tief); margin: 0 0 6px; }
.kp-dank   { margin: 0 0 4px; font-size: 16px; }

.kp-tabelle { width: 100%; border-collapse: collapse; margin: 4px 0 0; }
.kp-tabelle td { padding: 9px 0; vertical-align: top; border-bottom: 1px solid var(--kp-linie-soft); }
.kp-tabelle td:last-child { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.kp-unter { font-size: 13.5px; color: var(--kp-grau); font-weight: 400; }
.kp-tabelle .kp-nachlass td { color: var(--kp-steuerbord); }
.kp-tabelle .kp-summe td {
  border-bottom: none;
  border-top: 2px solid var(--kp-tief);
  font-size: 18px;
  font-weight: 700;
  color: var(--kp-tief);
  padding-top: 12px;
}

/* --- Achtung: Anmeldung noch nicht abgeschlossen --------------------- */

.kp-achtung {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin: 18px 0 6px;
  padding: 15px 17px;
  background: #fff8e6;
  border: 2px solid #e8b23a;
  border-radius: 10px;
}
.kp-achtung__ico { width: 26px; height: 26px; flex: none; color: #b47500; margin-top: 1px; }
.kp-achtung__titel {
  margin: 0 0 4px;
  font-size: 16.5px;
  font-weight: 700;
  color: #7a4f00;
  line-height: 1.35;
}
.kp-achtung__titel u { text-decoration-thickness: 2px; text-underline-offset: 2px; }
.kp-achtung__text { margin: 0; font-size: 14.5px; line-height: 1.5; color: #6b4b06; }

/* Gilt auch, wenn der Kasten im dunklen Kopf sitzt */
.kp-app .kp-achtung .kp-achtung__titel { color: #7a4f00; }
.kp-app .kp-achtung .kp-achtung__text  { color: #6b4b06; }
.kp-knopf--gross { font-size: 17px; padding: 15px 28px; }

/* Sprungziel nicht direkt unter den Seitenrand setzen */
#kp-abschluss { scroll-margin-top: 20px; }

/* --- Datenkontrolle auf der Übersicht ------------------------------- */

.kp-daten {
  border: 1px solid var(--kp-linie);
  border-radius: 8px;
  overflow: hidden;
}
.kp-daten__zeile {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  gap: 4px 14px;
  padding: 10px 16px;
  font-size: 15px;
  border-bottom: 1px solid var(--kp-linie-soft);
}
.kp-daten__zeile:last-child { border-bottom: none; }
.kp-daten__zeile:nth-child(odd) { background: #fbfdfe; }
.kp-daten__zeile span:first-child { color: var(--kp-grau); }
.kp-daten__zeile span:last-child  { font-weight: 600; overflow-wrap: anywhere; }

.kp-mini-link {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--kp-see);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.kp-mini-link:hover { color: var(--kp-tief); }

/* --- Bestätigung ---------------------------------------------------- */

.kp-bestaetigt {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 18px 20px;
  background: #f0faf4;
  border: 1px solid #bfe4cd;
  border-radius: 10px;
}
.kp-bestaetigt__ico {
  width: 34px; height: 34px; flex: none;
  color: var(--kp-steuerbord);
  margin-top: 2px;
}
.kp-bestaetigt .kp-anrede { margin-bottom: 4px; }
.kp-bestaetigt .kp-dank { margin: 0; }

.kp-zahlblock {
  border: 1px solid var(--kp-linie);
  border-left: 3px solid var(--kp-welle);
  border-radius: 0 8px 8px 0;
  padding: 15px 18px;
  margin-bottom: 12px;
  background: #fbfdfe;
}
.kp-zahlblock h4 { margin: 0 0 3px; font-size: 15.5px; color: var(--kp-tief); }
.kp-zahlblock p  { margin: 0; font-size: 14.5px; color: var(--kp-grau); }
.kp-zahlblock b  { color: var(--kp-tief); }

.kp-bank {
  background: var(--kp-papier);
  border: 1px solid var(--kp-linie);
  border-radius: 8px;
  padding: 18px 20px;
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  align-items: flex-start;
}
.kp-bank__daten { flex: 1 1 260px; }
.kp-bank__zeile {
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr);
  gap: 4px 12px;
  padding: 4px 0;
  font-size: 15px;
  align-items: start;
}
.kp-bank__zeile span:first-child { color: var(--kp-grau); }
.kp-bank__zeile span:last-child  { font-weight: 600; overflow-wrap: anywhere; }
.kp-kopier {
  flex: none;
  margin-left: 8px;
  padding: 3px 9px;
  border: 1px solid var(--kp-linie);
  border-radius: 5px;
  background: #fff;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--kp-see);
  cursor: pointer;
  white-space: nowrap;
  vertical-align: middle;
}
.kp-kopier:hover { border-color: var(--kp-see); background: #f2f9fc; }
.kp-kopier:focus-visible { outline: 2px solid var(--kp-see); outline-offset: 2px; }
.kp-kopier.ist-fertig { color: var(--kp-steuerbord); border-color: #bfe4cd; background: #f0faf4; }

.kp-qr-schalter {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 11px 14px;
  border: 1px dashed var(--kp-linie);
  border-radius: 8px;
  background: #fff;
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--kp-see);
  cursor: pointer;
}
.kp-qr-schalter:hover { border-color: var(--kp-see); }

.kp-qr { display: block; border-radius: 6px; }
.kp-qr-box { text-align: center; }
.kp-qr-box p { margin: 8px 0 0; font-size: 13px; color: var(--kp-grau); max-width: 190px; }

.kp-paypal-hinweis {
  font-size: 13.5px;
  color: var(--kp-grau);
  background: var(--kp-papier);
  border: 1px solid var(--kp-linie);
  border-radius: 8px;
  padding: 12px 14px;
  margin: 0 0 12px;
}
#kp-paypal-buttons { max-width: 420px; }

.kp-schluss {
  margin: 26px 0 0;
  padding: 16px 18px;
  background: var(--kp-papier);
  border-radius: 8px;
  font-size: 15px;
  color: var(--kp-text);
}

.kp-fuss {
  margin: 18px auto 0;
  max-width: 780px;
  font-size: 12.5px;
  color: var(--kp-grau);
  text-align: center;
}
.kp-fuss a { color: var(--kp-see); }

/* --- Honigtopf (unsichtbar für Menschen) ---------------------------- */
.kp-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* --- Responsiv ------------------------------------------------------ */

@media (max-width: 620px) {
  .kp-app { padding: 0 0 40px; }
  .kp-kopf, .kp-karte { border-radius: 0; border-left: none; border-right: none; padding: 20px 16px; }
  .kp-app:not(.kp-admin) .kp-kopf { border-radius: 0; padding: 20px 16px 16px; }
  .kp-toern { font-size: 11.5px; gap: 6px; }
  .kp-toern li::after { width: 14px; }
  .kp-knopf--haupt { flex: 1 1 100%; }

  /* Geburtsdatum: drei Felder nebeneinander statt untereinander */
  .kp-gitter--3 { grid-template-columns: 0.85fr 1.35fr 1fr; gap: 8px; }
  .kp-gitter--3 .kp-input { font-size: 15px; padding: 10px 26px 10px 9px; }
  .kp-gitter--3 select.kp-input {
    background-position: calc(100% - 13px) 50%, calc(100% - 8px) 50%;
  }

  .kp-feld { margin-bottom: 15px; }
  .kp-trenner { margin: 22px 0 20px; }

  .kp-bank { flex-direction: column; align-items: stretch; }
  .kp-bank__zeile { grid-template-columns: 1fr; gap: 0; padding: 6px 0; }
  .kp-bank__zeile span:first-child { font-size: 13px; }
  .kp-daten__zeile { grid-template-columns: 1fr; gap: 2px; }
  .kp-daten__zeile span:first-child { font-size: 13px; }
  .kp-bestaetigt { flex-direction: column; gap: 10px; }
  .kp-achtung { padding: 13px 14px; gap: 10px; margin: 14px 0 2px; }
  .kp-achtung__titel { font-size: 15.5px; }
  .kp-achtung__ico { width: 22px; height: 22px; }
  .kp-download__knopf { flex: 1 1 100%; }

  /* --- Extras: Beschreibung über die volle Breite, gekürzt --- */
  .kp-extra {
    grid-template-areas:
      "box bild titel preis"
      "besch besch besch besch";
    column-gap: 10px;
    row-gap: 7px;
    padding: 11px 12px;
    margin-bottom: 8px;
  }
  .kp-extra__bild { width: 46px; height: 46px; border-radius: 6px; }
  .kp-extra__lupe { width: 16px; height: 16px; right: 2px; bottom: 2px; border-radius: 4px; }
  .kp-extra__lupe svg { width: 10px; height: 10px; }
  .kp-extra__titel { font-size: 15px; line-height: 1.3; }
  .kp-extra__preis { font-size: 15px; }
  .kp-extra__besch { font-size: 13.5px; line-height: 1.45; }

  .kp-extra__besch .kp-kurz {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .kp-extra.ist-offen .kp-extra__besch .kp-kurz {
    -webkit-line-clamp: unset;
    overflow: visible;
  }
  .kp-extra__mehr.ist-noetig { display: inline-block; }

  /* QR-Code am Handy einklappbar, Kopierknöpfe treten an seine Stelle */
  .kp-qr-box.ist-zu { display: none; }
  .kp-qr-box { width: 100%; }
  .kp-qr-box p { max-width: none; }
  .kp-qr { margin: 0 auto; }
}


@media (prefers-reduced-motion: reduce) {
  .kp-app *, .kp-app *::before, .kp-app *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .kp-app { background: #fff; padding: 0; }
  .kp-knopfleiste, .kp-toern { display: none; }
  .kp-kopf, .kp-karte { border: none; }
}