/* Fallback-Karte, Landing, Fehlerseiten, Rechtstexte */
.seite { max-width: 480px; margin: 0 auto; padding: 16px 20px 24px; }
/* Lange Wörter ("Datenschutzerklärung" in der Überschrift) dürfen bei 320 px umbrechen statt quer zu scrollen.
   Silbentrennung (lang-Attribut steht am <html>) nur dort, wo lange Wörter vorkommen: Überschriften und Kartenfläche. */
.seite, .text-seite { overflow-wrap: anywhere; }
.text-seite h1, .text-seite h2, .karte-flaeche { hyphens: auto; }
.sprache { display: flex; justify-content: flex-end; margin-bottom: 16px; }
.vorschau { background: var(--line); color: var(--ink); font-size: 14px; padding: 8px 20px; text-align: center; }

/* Kartenbild oder gestaltete Karte in der Farbe der Karteninhaberin */
.karte-bild { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 6px; background: #fff; box-shadow: 0 1px 2px var(--shade); }
/* Kartenformat nur als Mindesthöhe (Breite / 1,586): lange Namen und Titel lassen die Fläche wachsen, statt über sie hinauszuragen. */
.karte-flaeche {
  min-height: calc((min(100vw, 480px) - 40px) / 1.586); padding: 20px; border-radius: 8px;
  background: var(--card); color: var(--on-card); box-shadow: 0 1px 2px var(--shade);
  display: flex; flex-direction: column; justify-content: space-between; gap: 12px;
}
.karte-flaeche .marke { width: 52px; height: 52px; padding: 6px; border-radius: 8px; background: #fff; object-fit: contain; }
.karte-flaeche .text { margin-top: auto; }
.karte-flaeche h1 { font-size: 26px; font-weight: 700; overflow-wrap: anywhere; }
.karte-flaeche .pronomen { font-size: 15px; font-weight: 400; opacity: .85; }
.karte-flaeche .zeile { font-size: 16px; margin-top: 4px; overflow-wrap: anywhere; }

.aktionen { display: grid; gap: 12px; margin: 24px 0 8px; }
.aktionen .btn.haupt { background: var(--card); border-color: var(--card); color: var(--on-card); }
.aktionen .btn.haupt:hover { background: var(--card-hover); border-color: var(--card-hover); }
@media (prefers-color-scheme: dark) { body.kartenseite .aktionen .btn.haupt { border-color: var(--line); } }

.zeilen { list-style: none; margin: 20px 0 0; padding: 0; border-top: 1px solid var(--line); }
.zeilen li { padding: 12px 0; border-bottom: 1px solid var(--line); }
.zeilen .bez { display: block; font-size: 13px; color: var(--quiet); }
.zeilen a, .zeilen .wert { display: block; font-size: 17px; color: var(--ink); overflow-wrap: anywhere; }
/* Ganze Zeile antippbar (Zeilenhöhe > 44 px), ohne dass sich das Schriftbild verschiebt */
.zeilen li { position: relative; }
.zeilen a::after { content: ""; position: absolute; inset: 0; }
.zeilen .wert { white-space: pre-line; }

/* Landing, Fehler, Rechtstexte */
.text-seite { max-width: 640px; margin: 0 auto; padding: 32px 20px 24px; }
.text-seite h1 { font-size: 32px; margin-bottom: 8px; }
.text-seite h2 { font-size: 19px; margin: 28px 0 8px; }
.text-seite .lead { font-size: 20px; margin-bottom: 20px; }
.text-seite ul { margin: 0 0 12px; padding-left: 22px; }
.text-seite li { margin-bottom: 6px; }
.text-seite address { font-style: normal; margin: 0 0 12px; }
.text-seite .aktionen { margin-top: 24px; }
.text-seite .nebenzeile { margin-top: 28px; }
.nebenzeile a { display: inline-block; padding: 12px 0; margin: -12px 0; }
.fuss-breit { max-width: 640px; }
.mimi-marke { font-size: 15px; font-weight: 700; letter-spacing: .01em; }