.karte-daten { --ikon: var(--akzent); --ikon-flaeche: rgba(255, 252, 247, 0.9); }
@media (prefers-color-scheme: dark) { .karte-daten { --ikon: var(--text-leise); --ikon-flaeche: rgba(255, 244, 228, 0.05); } }
@supports (color: color-mix(in srgb, red, blue)) {
  @media (prefers-color-scheme: dark) { .karte-daten { --ikon: color-mix(in srgb, var(--akzent) 42%, var(--text)); } }
}
.karte-daten .text { max-width: 36rem; margin-top: clamp(1rem, 3vw, 1.5rem); }
.kurz { display: flex; gap: 0.6rem; align-items: flex-start; margin: 0 0 1rem; font-size: 0.95rem; line-height: 1.55; color: var(--text-leise); }
.kurz .zeichen { flex: 0 0 auto; width: 1.25rem; height: 1.25rem; margin-top: 0.12rem; color: var(--ikon); }
.kurz span { min-width: 0; }
.abruf-feld { margin: 0 0 0.9rem; padding: 1.15rem 1.2rem 1.2rem; border-radius: 16px;
  background: var(--ikon-flaeche); box-shadow: inset 0 0 0 1px var(--linie); }
.karte-daten .abruf-feld h2 { margin: 0 0 0.4rem; font-size: 1.3rem; }
.abruf-feld p { margin: 0 0 0.75em; }
.abruf-feld p:last-child { margin-bottom: 0; }
.abruf-feld > h2 + p { color: var(--text-leise); font-size: 0.92rem; }
.abruf-feld label { display: block; margin: 0.55rem 0 0.35rem; font: 500 0.72rem/1.4 "Inter", system-ui, sans-serif;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-leise); }
.eingabe { display: flex; gap: 0.5rem; align-items: stretch; }
.eingabe input { flex: 1 1 auto; min-width: 0; padding: 0.72rem 0.9rem; font: 400 1.05rem/1.3 "Inter", system-ui, sans-serif;
  letter-spacing: 0.04em; color: var(--text); background: var(--karte-oben); border: 1px solid var(--linie); border-radius: 12px; }
.eingabe input::placeholder { color: var(--text-leise); opacity: 0.7; letter-spacing: 0; }
.eingabe input:focus-visible { outline: 2px solid var(--akzent); outline-offset: 1px; }
.eingabe button { flex: 0 0 auto; padding: 0 0.85rem; font: 500 0.8rem/1 "Inter", system-ui, sans-serif; color: var(--text-leise);
  background: transparent; border: 1px solid var(--linie); border-radius: 12px; cursor: pointer; }
.eingabe button:hover, .eingabe button[aria-pressed="true"] { color: var(--text); border-color: var(--text-leise); }
.eingabe button:focus-visible { outline: 2px solid var(--akzent); outline-offset: 1px; }

.knopf, .karte-daten .text a.knopf { display: inline-block; margin: 0.95rem 0 0.2rem; padding: 0.8rem 1.5rem; font: 500 0.95rem/1.2 "Inter", system-ui, sans-serif;
  letter-spacing: 0.02em; color: var(--karte-oben); background: var(--text); border: 0; border-radius: 999px; text-decoration: none;
  cursor: pointer; box-shadow: 0 6px 16px rgba(40, 30, 20, 0.14); }

.knopf:hover, .karte-daten .text a.knopf:hover { filter: brightness(1.18); box-shadow: 0 8px 20px rgba(40, 30, 20, 0.2); text-decoration: none; }
.knopf:focus-visible, .karte-daten .text a.knopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; }
.knopf[disabled] { opacity: 0.55; cursor: progress; background: var(--text); color: var(--karte-oben); }
.meldung { margin: 0.8rem 0 0; padding: 0.6rem 0.8rem; border-radius: 10px; font-size: 0.9rem; line-height: 1.5;
  background: var(--karte-oben); box-shadow: inset 0 0 0 1px var(--linie); }
.meldung-fehler { color: #8f2f1f; box-shadow: inset 0 0 0 1px rgba(163, 63, 46, 0.45); }
.meldung-ok { color: #2f5f37; }
@media (prefers-color-scheme: dark) {
  .meldung-fehler { color: #eba090; box-shadow: inset 0 0 0 1px rgba(235, 160, 144, 0.4); }
  .meldung-ok { color: #93c99c; }
  .knopf:hover, .karte-daten .text a.knopf:hover { filter: brightness(0.92); }
}
.datei { margin: 0.35rem 0 0.15em; font: 600 1.3rem/1.3 "Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif; overflow-wrap: anywhere; }
.datei-info { color: var(--text-leise); font-size: 0.88rem; }
.klein { font-size: 0.82rem; line-height: 1.5; color: var(--text-leise); }
.geraet { display: flex; gap: 0.45rem; align-items: flex-start; margin-top: 0.95rem; }
.abruf-feld p.geraet { margin-top: 0.95rem; }
.geraet .zeichen { flex: 0 0 auto; width: 1rem; height: 1rem; margin-top: 0.12rem; color: var(--text-leise); }
.geraet span { min-width: 0; }

.erklaerung { margin: 0.2rem 0 0; }
.erklaerung summary { cursor: pointer; list-style: none; text-align: center; padding: 0.45rem 0.6rem; border-radius: 8px;
  font-size: 0.85rem; color: var(--text-leise); text-decoration: underline; text-decoration-color: var(--linie); text-underline-offset: 3px; }
.erklaerung summary::-webkit-details-marker { display: none; }
.erklaerung summary::marker { content: ""; }
.erklaerung summary:hover { color: var(--text); text-decoration-color: currentColor; }
.erklaerung summary:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.erklaerung[open] summary { margin-bottom: 0.7rem; }
.erklaerung .liste li { margin-bottom: 0.6rem; font-size: 0.9rem; line-height: 1.55; }
.erklaerung .liste .zeichen { width: 1.15rem; height: 1.15rem; margin-top: 0.15rem; }
.erklaerung > p.klein { margin: 0.9rem 0 0.2rem; }
@media (max-width: 480px) {
  .karte-daten .abruf-feld { padding: 1rem 0.95rem 1.05rem; }
  .karte-daten .titel { font-size: clamp(1.8rem, 7vw, 2.2rem); }
}

[hidden] { display: none !important; }
.titel-daten { text-align: center; }
.titel-zeile { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; }
.titel-daten .zeichen.gross { width: 2.1rem; height: 2.1rem; color: var(--ikon); flex: 0 0 auto; }
.untertitel { margin: 0.2rem 0 1.4rem; text-align: center; color: var(--text-leise); font-size: 1rem; }
.kacheln { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; max-width: 36rem; margin: 0 auto 1.2rem; }
.kachel, .karte-daten .text a.kachel, .karte-daten a.kachel { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; padding: 1.3rem 0.9rem 1.2rem;
  border-radius: 16px; background: var(--ikon-flaeche); box-shadow: inset 0 0 0 1px var(--linie); color: var(--text); text-decoration: none; text-align: center; }
.kachel:hover { box-shadow: inset 0 0 0 1px var(--text-leise), 0 6px 16px rgba(40, 30, 20, 0.1); }
.kachel:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; }
.kachel .zeichen-kachel { width: 1.8rem; height: 1.8rem; color: var(--ikon); }
.kachel-titel { font: 600 1.15rem/1.3 "Inter", system-ui, sans-serif; }
.kachel-text { font-size: 0.82rem; line-height: 1.45; color: var(--text-leise); }
.siegel { max-width: 36rem; margin: 0 auto 0.8rem; }
.host { text-align: center; margin: 0.6rem 0 0; font-size: 0.85rem; color: var(--text-leise); letter-spacing: 0.02em; }
.ablage { margin: 0.4rem 0 0.9rem; padding: 1.2rem 1rem; text-align: center; border-radius: 14px; border: 1.5px dashed var(--linie); background: var(--karte-oben); }
.ablage.aktiv, .ablage:focus-visible { border-color: var(--akzent); outline: none; box-shadow: 0 0 0 3px rgba(160, 120, 70, 0.18); }
.ablage .zeichen-kachel { width: 1.7rem; height: 1.7rem; color: var(--ikon); }
.ablage-titel { margin: 0.3rem 0 0; font-weight: 600; }
.ablage-oder { margin: 0.1rem 0 0.2rem; font-size: 0.82rem; color: var(--text-leise); }
.ablage-knoepfe { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin: 0 0 0.5rem; }
.abruf-feld label.knopf { display: inline-flex; align-items: center; gap: 0.35rem; margin: 0.3rem 0; text-transform: none; letter-spacing: 0.02em;
  font: 500 0.9rem/1.2 "Inter", system-ui, sans-serif; color: var(--karte-oben); }
.knopf-zweit, .abruf-feld label.knopf-zweit { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px var(--text-leise); }
.knopf-zweit .zeichen { width: 1rem; height: 1rem; }
.unsichtbar { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); }
.nur-mobil { display: none; }
@media (pointer: coarse) { .abruf-feld label.nur-mobil { display: inline-flex; } }

@media (pointer: coarse) { .abruf-feld label.nur-desktop { display: none; } }
.dateiliste { list-style: none; margin: 0 0 0.6rem; padding: 0; }
.dateiliste li { display: flex; gap: 0.6rem; align-items: center; justify-content: space-between; padding: 0.5rem 0.7rem; margin-bottom: 0.4rem;
  border-radius: 10px; background: var(--karte-oben); box-shadow: inset 0 0 0 1px var(--linie); font-size: 0.9rem; }
.dateiliste li span { min-width: 0; overflow-wrap: anywhere; }
.entfernen { flex: 0 0 auto; padding: 0.3rem 0.6rem; font: 500 0.75rem/1 "Inter", system-ui, sans-serif; color: var(--text-leise); background: transparent;
  border: 1px solid var(--linie); border-radius: 8px; cursor: pointer; }
.entfernen:hover { color: var(--text); border-color: var(--text-leise); }
.abruf-feld input[type="text"], .abruf-feld input[type="email"], .abruf-feld textarea { width: 100%; box-sizing: border-box; padding: 0.65rem 0.85rem;
  font: 400 1rem/1.4 "Inter", system-ui, sans-serif; color: var(--text); background: var(--karte-oben); border: 1px solid var(--linie); border-radius: 12px; }
.abruf-feld textarea { resize: vertical; min-height: 5.5rem; }
.abruf-feld input:focus-visible, .abruf-feld textarea:focus-visible { outline: 2px solid var(--akzent); outline-offset: 1px; }
.optional { text-transform: none; letter-spacing: 0; font-weight: 400; }
.fortschritt { height: 6px; margin: 0.9rem 0 0; border-radius: 99px; background: var(--linie); overflow: hidden; }
.balken { height: 100%; width: 0; background: var(--text); transition: width 0.3s ease; }
.warnung { display: flex; gap: 0.5rem; align-items: flex-start; padding: 0.6rem 0.8rem; border-radius: 10px; font-size: 0.88rem; line-height: 1.5;
  color: #7a4a12; background: rgba(240, 190, 110, 0.14); box-shadow: inset 0 0 0 1px rgba(200, 140, 60, 0.4); }
.warnung .zeichen { flex: 0 0 auto; width: 1.1rem; height: 1.1rem; margin-top: 0.1rem; }
@media (prefers-color-scheme: dark) { .warnung { color: #f0c98d; background: rgba(240, 190, 110, 0.08); } }
@media (max-width: 480px) {
  .kacheln { grid-template-columns: 1fr; }
  .titel-daten { font-size: clamp(1.7rem, 7vw, 2.1rem); }
  .titel-zeile { flex-direction: column; gap: 0.35rem; }
}
.einwilligung { display: flex; gap: 0.55rem; align-items: flex-start; margin: 1rem 0 0.2rem; font: 400 0.85rem/1.5 "Inter", system-ui, sans-serif;
  text-transform: none; letter-spacing: 0; color: var(--text-leise); }
.abruf-feld label.einwilligung { text-transform: none; letter-spacing: 0; font: 400 0.85rem/1.5 "Inter", system-ui, sans-serif; }
.einwilligung input { flex: 0 0 auto; width: 1.1rem; height: 1.1rem; margin-top: 0.15rem; accent-color: var(--text); }

.zip-liste { list-style: none; margin: 0.8rem 0 0.6rem; padding: 0; font-size: 0.88rem; line-height: 1.5; }
.zip-liste li { padding: 0.35rem 0; border-bottom: 1px solid var(--linie); overflow-wrap: anywhere; }
.zip-liste li.zip-nein { color: var(--text-leise); }

.zip-liste li.zip-warn { color: #9a3412; font-weight: 600; }
.zip-liste li.zip-hinweis { color: #8a5a00; }
.warnung.pdf-hoch { color: #9a3412; background: rgba(154, 52, 18, 0.08); font-weight: 600; }
@media (prefers-color-scheme: dark) { .zip-liste li.zip-warn { color: #f4a37e; } .zip-liste li.zip-hinweis { color: #f0c98d; } .warnung.pdf-hoch { color: #f4a37e; background: rgba(244, 163, 126, 0.10); } }
.zip-liste a.zip-speichern { margin-left: 0.2rem; }
#zip-ordner { margin-top: 0.4rem; }