/* Wunschliste – Gestaltung
   Mobil zuerst: Kinder und Verwandte benutzen das am Telefon.
   Große Flächen, klare Kontraste, wenig Text. */

:root {
  --lila:        #7c4dbe;
  --lila-dunkel: #5f36a0;
  --lila-hell:   #f3ecfd;
  --gruen:       #2f9e6b;
  --gruen-hell:  #e6f6ee;

  /* Eigene Farbe fuer den Gruen-Knopf: Weiss auf --gruen ergaebe nur 3,05:1 und
     ist damit schlechter lesbar, als die Zugaenglichkeitsregeln erlauben (4,5:1).
     Der Knopf "Ich hab's gekauft" ist der wichtigste der ganzen Seite - den
     tippen Grosseltern auf einem Handy in der Sonne. */
  --gruen-knopf: #1e7d55;   /* Weiss darauf: 5,1:1 */
  --knopf-text:  #ffffff;
  --rot:         #c94040;
  --rot-hell:    #fdeded;
  --gelb-hell:   #fdf5e3;
  --gelb-rand:   #e0b64a;

  --grund:       #faf8fc;
  --karte:       #ffffff;
  --text:        #23202b;
  --text-leise:  #6b6577;
  --rand:        #e6e1ee;

  --radius:      16px;
  --schatten:    0 1px 2px rgba(35,32,43,.06), 0 6px 20px rgba(35,32,43,.07);

  /* Damit Ankreuzfelder, Auswahllisten und Bildlaufleisten dem Modus folgen.
     Ohne das bleiben sie im Dunkelmodus weiss. */
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --lila:        #a682e0;
    --lila-dunkel: #8a63cf;
    --lila-hell:   #2b2338;
    --gruen:       #4cb98a;
    --gruen-hell:  #1e3830;

    /* Im Dunkelmodus sind die Akzentfarben aufgehellt, damit sie auf dunklem
       Grund ueberhaupt wirken. Weisse Schrift darauf faellt dann durch:
       auf Lila nur 3,05:1, auf Gruen 2,44:1. Deshalb hier dunkle Schrift -
       das ergibt 7,4:1 beziehungsweise 6,3:1. */
    --gruen-knopf: #4cb98a;
    --knopf-text:  #16141b;
    --rot:         #e07070;
    --rot-hell:    #3a2626;
    --gelb-hell:   #3a3222;
    --gelb-rand:   #9c7d3a;

    --grund:       #16141b;
    --karte:       #1f1c26;
    --text:        #ece9f2;
    --text-leise:  #a49db4;
    --rand:        #322c3e;
    --schatten:    0 1px 2px rgba(0,0,0,.4), 0 6px 20px rgba(0,0,0,.3);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  -webkit-text-size-adjust: 100%;
}

/* ---------------------------------------------------------------- Kopf */

.kopf {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .85rem max(1.1rem, env(safe-area-inset-right)) .85rem max(1.1rem, env(safe-area-inset-left));
  background: var(--karte);
  border-bottom: 1px solid var(--rand);
  position: sticky; top: 0; z-index: 10;
}
.marke {
  display: flex; align-items: center; gap: .5rem;
  font-weight: 700; font-size: 1.05rem; color: var(--text); text-decoration: none;
}
.marke-symbol { font-size: 1.35rem; }
.kopf-nav { display: flex; align-items: center; gap: .9rem; font-size: .9rem; }
.kopf-nav a { color: var(--lila); text-decoration: none; font-weight: 600; padding: .4rem .1rem; }
.wer { color: var(--text-leise); }
@media (max-width: 420px) { .wer { display: none; } }

/* -------------------------------------------------------------- Aufbau */

/* env(safe-area-inset-*) haelt den Inhalt auf iPhones mit Aussparung frei von
   der Kerbe und der Streifenleiste unten. Ohne das rutscht die Fusszeile im
   Querformat unter den abgerundeten Rand. */
.inhalt {
  padding: 1.25rem max(1rem, env(safe-area-inset-right)) 3rem max(1rem, env(safe-area-inset-left));
}
.mitte        { max-width: 960px; margin: 0 auto; }
.mitte-schmal { max-width: 520px; margin: 0 auto; }

/* Listennamen, Notizen und Produkttitel kommen von aussen und koennen sehr lange
   Zeichenketten ohne Leerzeichen enthalten. Ohne dies schieben sie die Seite auf. */
h1, .notiz, .kauf-titel, .listen-name { overflow-wrap: anywhere; }

h1 { font-size: 1.6rem; line-height: 1.25; margin: .2rem 0 .35rem; }
h2 { font-size: 1.15rem; margin: 0 0 .6rem; }
h2.inline { display: inline; }
h3 { font-size: 1rem; margin: 0 0 .35rem; }
.unterzeile { color: var(--text-leise); margin: 0 0 1.2rem; }
.brotkrume  { margin: 0 0 .5rem; font-size: .9rem; }
.brotkrume a { color: var(--lila); text-decoration: none; font-weight: 600; }
.klein { font-size: .8rem; color: var(--text-leise); }
.hinweis { font-size: .85rem; color: var(--text-leise); margin: .35rem 0 .9rem; }
.abschnitt { margin: 1.4rem 0 .5rem; color: var(--text-leise); }

/* Bemerkungen zur Liste - "Geburtstag ist am 4. November".
   pre-wrap erhaelt die Zeilenumbrueche, die jemand eingetippt hat, ohne dass
   dafuer irgendeine Auszeichnungssprache noetig waere. */
.beschreibung {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  padding: .9rem 1.1rem;
  margin: 0 0 1.15rem;
  background: var(--lila-hell);
  border-left: 4px solid var(--lila);
  border-radius: 0 12px 12px 0;
  line-height: 1.6;
}

.karte {
  background: var(--karte);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  padding: 1.1rem;
  margin: 0 0 1.15rem;
}
details.karte > summary { cursor: pointer; font-weight: 600; list-style: none; }
details.karte > summary::-webkit-details-marker { display: none; }
details.karte > summary::before { content: "▸ "; color: var(--lila); }
details.karte[open] > summary::before { content: "▾ "; }

/* ------------------------------------------------------------ Meldungen */

.meldung {
  padding: .75rem .9rem; border-radius: 12px; margin: 0 0 1rem;
  border: 1px solid transparent; font-size: .93rem;
}
.meldung.erfolg  { background: var(--gruen-hell); border-color: var(--gruen); }
.meldung.fehler  { background: var(--rot-hell);   border-color: var(--rot); }
.meldung.warnung { background: var(--gelb-hell);  border-color: var(--gelb-rand); }
.meldung.info    { background: var(--lila-hell);  border-color: var(--lila); }
p.warnung { color: var(--rot); font-size: .85rem; margin: .2rem 0; font-weight: 600; }

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

label { display: block; font-weight: 600; font-size: .9rem; margin: .8rem 0 .3rem; }
label.ankreuz { display: flex; align-items: center; gap: .55rem; font-weight: 500; margin: 1rem 0; }
label.ankreuz input { width: 20px; height: 20px; accent-color: var(--lila); }

input[type=text], input[type=password], textarea, select {
  width: 100%; padding: .75rem .85rem; font: inherit;
  color: var(--text); background: var(--grund);
  border: 1.5px solid var(--rand); border-radius: 12px;
}
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--lila);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--lila) 22%, transparent);
}
textarea { resize: vertical; min-height: 5rem; font-family: inherit; }

.zeile-form { display: flex; gap: .55rem; align-items: center; flex-wrap: wrap; margin: .5rem 0; }
.zeile-form input, .zeile-form select { flex: 1 1 8rem; width: auto; }

/* Ein <select> meldet die Breite seiner laengsten Option als Mindestbreite an -
   daran aendert weder min-width: 0 noch flex-shrink etwas. Steht daneben noch
   ein Knopf, sprengt die Zeile auf schmalen Geraeten die ganze Seite, sobald
   eine Liste einen langen Namen hat. Untereinander gestapelt kann das nicht
   passieren, und mit dem Daumen trifft man beides ohnehin besser. */
@media (max-width: 480px) {
  .zeile-form { display: block; }
  .zeile-form > *,
  .zeile-form input,
  .zeile-form select { width: 100%; margin-top: .45rem; }
}
.feld-reihe { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
@media (max-width: 520px) { .feld-reihe { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- Knöpfe */

.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .7rem 1.15rem; margin-top: .55rem;
  background: var(--lila); color: var(--knopf-text);
  border: 1.5px solid var(--lila); border-radius: 12px;
  font: inherit; font-weight: 650; text-decoration: none; cursor: pointer;
  min-height: 44px;               /* bequem mit dem Daumen zu treffen */
  -webkit-tap-highlight-color: transparent;
  transition: background .12s ease, transform .06s ease;
}
/* Schwebezustaende nur dort, wo es einen Mauszeiger gibt. Auf dem Handy bleiben
   sie sonst nach dem Antippen kleben - ein abgedunkelter Kauf-Knopf sieht dann
   aus, als waere er deaktiviert. */
@media (hover: hover) and (pointer: fine) {
  .knopf:hover        { background: var(--lila-dunkel); border-color: var(--lila-dunkel); }
  .knopf.hell:hover   { background: var(--lila-hell); }
  .knopf.gefahr:hover { background: var(--rot-hell); }
  .knopf.erledigt:hover { filter: brightness(.92); }
  .listen-karte:hover { transform: translateY(-2px); border-color: var(--lila); }
  .marke:hover, .kopf-nav a:hover { text-decoration: underline; }
  .verwaltung-kopf a:hover { color: var(--lila); }
}
.knopf:active { transform: translateY(1px); }
.knopf:focus-visible {
  outline: 3px solid var(--text);
  outline-offset: 2px;            /* auch mit Tastatur erkennbar, wo man steht */
}
.knopf.gross  { width: 100%; padding: .9rem; font-size: 1.05rem; }
/* Auch die kleinen Knoepfe bleiben bei 44px hoch. Darunter tippt man auf dem
   Handy regelmaessig daneben - und "Ich hab's gekauft" ist genau so ein Fall. */
.knopf.klein  { padding: .5rem .85rem; font-size: .9rem; min-height: 44px; }
.knopf.winzig { padding: .4rem .7rem; font-size: .82rem; min-height: 38px; margin: 0; }
.knopf.hell    { background: transparent; color: var(--lila); }
.knopf.gefahr  { background: transparent; color: var(--rot); border-color: var(--rot); }
.knopf.erledigt { background: var(--gruen-knopf); border-color: var(--gruen-knopf); color: var(--knopf-text); }
.knopf-reihe { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .8rem; }
.knopf-reihe .knopf.gross { width: auto; flex: 1 1 12rem; }

/* Warteanzeige: der Knopf behaelt seine Groesse und bekommt einen Kreisel.
   Wichtig ist vor allem, dass er nicht mehr wie ein unbenutzter Knopf aussieht -
   sonst tippt man ein zweites Mal. */
.knopf.laedt { opacity: .85; cursor: progress; }
.kreisel {
  width: 1.05em; height: 1.05em; flex: 0 0 auto;
  border: 2.5px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: drehen .7s linear infinite;
}
@keyframes drehen { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .kreisel { animation-duration: 2.4s; }
  .knopf, .listen-karte { transition: none; }
}

/* --------------------------------------------------------------- Anmelden */

.anmelde-karte { margin-top: 0; }
.anmelde-symbol { font-size: 3rem; line-height: 1; }
.mitte-text { text-align: center; }

/* ------------------------------------------------------------- Startseite */

.landing-kopf { text-align: center; padding: 1.2rem 0 1.4rem; }
.landing-symbol { font-size: 3.2rem; line-height: 1; }
.landing-kopf h1 { font-size: 2rem; margin: .3rem 0 .2rem; }
.landing-satz {
  color: var(--text-leise);
  font-size: 1.05rem;
  margin: 0 auto;
  max-width: 26rem;
  line-height: 1.5;
}

.landing-teil { margin: 2.2rem 0 0; }
.landing-teil h2 {
  font-size: 1.1rem;
  text-align: center;
  color: var(--text-leise);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 1rem;
}

/* Drei Schritte */
.schritte { list-style: none; margin: 0; padding: 0; }
.schritte li {
  display: flex;
  gap: .9rem;
  align-items: flex-start;
  padding: .9rem 1rem;
  margin-bottom: .7rem;
  background: var(--karte);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
}
.schritt-nr {
  flex: 0 0 auto;
  width: 2rem; height: 2rem;
  display: flex; align-items: center; justify-content: center;
  background: var(--lila); color: var(--knopf-text);
  border-radius: 50%;
  font-weight: 700;
}
.schritte strong { display: block; margin-bottom: .15rem; }
.schritte p { margin: 0; font-size: .92rem; color: var(--text-leise); line-height: 1.5; }

/* Merkmale */
.merkmale { display: grid; gap: .7rem; grid-template-columns: 1fr; }
@media (min-width: 560px) { .merkmale { grid-template-columns: 1fr 1fr; } }
.merkmal {
  padding: .9rem 1rem;
  background: var(--karte);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
}
.merkmal > span { font-size: 1.5rem; line-height: 1.2; display: block; margin-bottom: .2rem; }
.merkmal strong { display: block; margin-bottom: .2rem; }
.merkmal p { margin: 0; font-size: .9rem; color: var(--text-leise); line-height: 1.5; }

.landing-technik p {
  text-align: center;
  font-size: .92rem;
  color: var(--text-leise);
  line-height: 1.6;
  max-width: 30rem;
  margin: 0 auto;
}

/* ----------------------------------------------------------------- Listen */

.listen-gitter {
  display: grid; gap: .9rem; margin-bottom: 1.15rem;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.listen-karte {
  display: flex; flex-direction: column; gap: .25rem;
  padding: 1.1rem; text-decoration: none; color: var(--text);
  background: var(--karte); border: 1px solid var(--rand);
  border-radius: var(--radius); box-shadow: var(--schatten);
  transition: transform .1s ease, border-color .1s ease;
}
.listen-symbol { font-size: 1.7rem; }
.listen-name   { font-weight: 700; font-size: 1.05rem; }
.listen-zahl   { color: var(--text-leise); font-size: .88rem; }
.merker {
  display: inline-block; margin-top: .4rem; padding: .15rem .5rem;
  background: var(--lila-hell); color: var(--lila);
  border-radius: 999px; font-size: .75rem; font-weight: 600;
}

/* --------------------------------------------------------------- Wünsche */

.wunsch-gitter { display: grid; gap: .9rem; margin-bottom: 1.15rem; }
@media (min-width: 700px) { .wunsch-gitter { grid-template-columns: 1fr 1fr; } }

.wunsch {
  display: flex; gap: .9rem; padding: .9rem;
  background: var(--karte); border: 1px solid var(--rand);
  border-radius: var(--radius); box-shadow: var(--schatten);
}
.wunsch-bild {
  flex: 0 0 92px; height: 92px; border-radius: 12px; overflow: hidden;
  background: #fff; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--rand);
}
.wunsch-bild img { max-width: 100%; max-height: 100%; object-fit: contain; }
.kein-bild { font-size: 2rem; opacity: .65; }
.kein-bild.gross { font-size: 4rem; }
/* Fehlt ein Bild, soll der Rahmen wie ein bewusster Platzhalter aussehen und
   nicht wie ein Bild, das nicht geladen hat. */
.wunsch-bild:has(.kein-bild),
.vorschau-bild:has(.kein-bild) {
  background: var(--lila-hell);
  border-style: dashed;
  border-color: var(--lila);
}
.wunsch-text { flex: 1 1 auto; min-width: 0; }
/* Amazon-Titel sind lang. Ungekuerzt bricht einer auf einem 320px-Display auf
   sieben Zeilen um, und die Liste wird endlos scrollbar. Drei Zeilen reichen
   zum Wiedererkennen - das Wesentliche steht bei Amazon vorne. Der vollstaendige
   Titel bleibt ueber das title-Attribut und beim Bearbeiten erreichbar. */
.wunsch-text h3 {
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Auf sehr schmalen Geraeten (iPhone SE und aehnlich, 320px) bleiben neben dem
   92px-Bild nur 151px fuer den Titel - Produktnamen von Amazon brauchen dann
   sechs, sieben Zeilen. Das Bild etwas kleiner zu machen schafft spuerbar Luft. */
@media (max-width: 360px) {
  .wunsch { gap: .7rem; padding: .8rem; }
  .wunsch-bild { flex: 0 0 72px; height: 72px; }
}
/* --gruen ist als Flaeche gedacht; als Schrift auf Weiss ergaebe es nur 3,4:1.
   --gruen-knopf ist dunkler und kommt auf 5,1:1. */
.preis { font-weight: 700; color: var(--gruen-knopf); margin: .2rem 0; }
.preis-stand { font-weight: 400; font-size: .75rem; color: var(--text-leise); }
.gross-preis { font-size: 1.4rem; }
/* Die Anmerkung ist keine Randnotiz, sondern oft das Entscheidende:
   "Größe 140", "in Blau", "bitte ohne Glitzer". Wer das überliest, kauft das
   falsche Geschenk. Deshalb hervorgehoben statt kleingedruckt. */
.notiz {
  display: flex;
  gap: .45rem;
  align-items: flex-start;
  margin: .5rem 0;
  padding: .45rem .6rem;
  background: var(--gelb-hell);
  border-left: 3px solid var(--gelb-rand);
  border-radius: 0 10px 10px 0;
  font-size: .92rem;
  font-weight: 500;
  color: var(--text);
  overflow-wrap: anywhere;
}
.notiz-marke { flex: 0 0 auto; line-height: 1.4; }
/* Vorangestellt, damit beim Überfliegen klar ist, dass hier eine Vorgabe steht
   und nicht bloß ein Kommentar. */
.notiz-titel { font-weight: 700; }
/* Groesserer Abstand: die beiden Knoepfe brechen auf schmalen Geraeten
   untereinander um, und 7px dazwischen laedt zum Danebentippen ein. */
.wunsch-aktionen { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-top: .5rem; }
.wunsch-aktionen form { margin: 0; }

.bearbeiten summary { list-style: none; }
.bearbeiten summary::-webkit-details-marker { display: none; }
/* Der aufgeklappte Bearbeitenbereich ist als Flex-Element sonst nicht kleiner
   zu bekommen als seine Eingabefelder - und schob damit die ganze Seite
   seitlich weg, sobald ein Kind auf einem schmalen Telefon "Bearbeiten" tippte.
   Eigene Zeile plus min-width: 0 loest das. */
.bearbeiten { flex: 1 1 100%; min-width: 0; }
.bearbeiten-inhalt {
  margin-top: .6rem; padding: .8rem; background: var(--grund);
  border: 1px solid var(--rand); border-radius: 12px;
  min-width: 0;
}
.bearbeiten-inhalt form { margin-bottom: .7rem; }
.bearbeiten-inhalt input, .bearbeiten-inhalt select { min-width: 0; }

/* Zweistufiger Kauf-Knopf: Aufklappen, dann bestaetigen. Ersetzt confirm(),
   das in In-App-Browsern stumm fehlschlagen kann - dann tippt jemand und es
   passiert nichts. Ohne JavaScript funktioniert das hier immer. */
.kaufen { flex: 1 1 100%; min-width: 0; }
.kaufen > summary { list-style: none; width: 100%; }
.kaufen > summary::-webkit-details-marker { display: none; }
.kaufen-inhalt {
  margin-top: .6rem; padding: .8rem; background: var(--gruen-hell);
  border: 1px solid var(--gruen-knopf); border-radius: 12px;
}
.kaufen-inhalt p { margin: 0 0 .6rem; font-size: .88rem; }
.kaufen-inhalt form { margin: 0; }

/* ------------------------------------------------------------- Öffentlich */

.oeffentlich-kopf { text-align: center; margin-bottom: 1.2rem; }
.gross-symbol { font-size: 2.8rem; line-height: 1.1; }

/* ---------------------------------------------------------------- Teilen */

.teilen-karte { background: var(--lila-hell); border-color: var(--lila); }
.teil-link {
  padding: .7rem .85rem; background: var(--karte);
  border: 1px dashed var(--lila); border-radius: 12px;
  overflow-x: auto;
}
/* Ein Tipp soll die ganze Adresse markieren - sonst muss man auf dem Handy
   mit den Auswahlgriffen hantieren. */
.teil-link code { font-size: .88rem; white-space: nowrap; -webkit-user-select: all; user-select: all; }

/* -------------------------------------------------------------- Vorschau */

.vorschau-karte { text-align: center; }
.vorschau-form  { text-align: left; }
.vorschau-bild {
  min-height: 200px; display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--rand); border-radius: 12px;
  padding: .9rem; margin-bottom: .9rem;
}
.vorschau-bild img { max-width: 100%; max-height: 260px; object-fit: contain; }
.rohtext { white-space: pre-wrap; word-break: break-word; font-size: .8rem; color: var(--text-leise); }

/* ------------------------------------------------- Bild hochladen und zuschneiden */

.bildwahl { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--rand); }
.bildwahl .meldung { margin-top: .7rem; }

.zuschnitt { margin-top: .9rem; }
.zuschnitt-buehne {
  position: relative;
  display: inline-block;
  max-width: 100%;
  line-height: 0;
  overflow: hidden;
  border-radius: 12px;
  /* Ohne das scrollt beim Ziehen die Seite mit, statt den Rahmen zu bewegen. */
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.zuschnitt-buehne img {
  max-width: 100%;
  max-height: 58vh;
  display: block;
  -webkit-user-drag: none;
}
.zuschnitt-rahmen {
  position: absolute;
  border: 2px solid #fff;
  border-radius: 4px;
  cursor: move;
  /* Der riesige Schatten verdunkelt alles ausserhalb des Ausschnitts. */
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, .55);
}
.griff {
  position: absolute;
  width: 16px; height: 16px;
  background: #fff;
  border: 2px solid var(--lila);
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0,0,0,.4);
}
/* Die sichtbaren Punkte sind klein, die Trefferflaeche ist es nicht:
   mit dem Finger will man 40px treffen, nicht 16. */
.griff::after {
  content: ""; position: absolute; inset: -13px;
}
.griff.nw { left: -9px;  top: -9px;    cursor: nwse-resize; }
.griff.ne { right: -9px; top: -9px;    cursor: nesw-resize; }
.griff.sw { left: -9px;  bottom: -9px; cursor: nesw-resize; }
.griff.se { right: -9px; bottom: -9px; cursor: nwse-resize; }

.bildwahl-fertig { margin-top: .9rem; }
.bildwahl-fertig img {
  max-width: 100%;
  max-height: 240px;
  display: block;
  margin-bottom: .6rem;
  border: 1px solid var(--rand);
  border-radius: 12px;
  background: #fff;
}

/* ------------------------------------------------------------- Verwaltung */

.tabelle-huelle { overflow-x: auto; }
.tabelle { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabelle th, .tabelle td { padding: .55rem .5rem; text-align: left; border-bottom: 1px solid var(--rand); vertical-align: middle; }
.tabelle th { font-size: .8rem; color: var(--text-leise); text-transform: uppercase; letter-spacing: .03em; }
.tabelle form { margin: 0; }
/* Die Tabelle setzt .9rem - vererbt an das Eingabefeld waeren das 14,4px, und
   iOS zoomt beim Antippen hinein, ohne wieder herauszuzoomen. */
.tabelle input { font-size: 16px; }
.zeile-form input, .zeile-form select { min-width: 0; }

.verwaltung-liste { padding: .7rem 0; border-bottom: 1px solid var(--rand); }
.verwaltung-kopf { display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline; }
.verwaltung-kopf a { color: var(--text); text-decoration: none; }
.kauf-liste { list-style: none; padding: 0; margin: .5rem 0 0; }
.kauf-liste li {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
  padding: .45rem .6rem; margin-bottom: .35rem;
  background: var(--gruen-hell); border-radius: 10px;
}
.kauf-titel { flex: 1 1 12rem; font-weight: 600; }

/* --------------------------------------------------------------- Leerlauf */

.leer-hinweis { text-align: center; padding: 2rem 1.1rem; }
.leer-hinweis p { color: var(--text-leise); }

/* ----------------------------------------------------------------- Fußzeile */

.fuss {
  padding: 1.8rem 1rem calc(2.5rem + env(safe-area-inset-bottom)); text-align: center;
  color: var(--text-leise); font-size: .85rem;
  border-top: 1px solid var(--rand); background: var(--karte);
}
/* Die Fusszeile enthaelt den Impressumsverweis - der muss antippbar bleiben. */
.fuss a { display: inline-block; padding: .35rem .2rem; }
.fuss p { margin: .3rem 0; }
.fuss a { color: var(--lila); }
.fuss .klein { font-size: .78rem; opacity: .85; max-width: 40rem; margin: .6rem auto 0; }