/* Handy-Ansicht. Wird je nach Einstellung automatisch (kleine Bildschirme), immer oder nie geladen. */
body { -webkit-text-size-adjust: 100%; }
/* Die untere Leiste ist vorerst ausgeblendet (das Menü steckt oben im Knopf „Menü“). Zum Zurückholen: die zwei Zeilen unten ändern. */
body.mit-untennav { padding-bottom: 0; }
h1 { font-size: 1.5rem; }
.artwahl { grid-template-columns: 1fr; }
.seite { padding: 1rem 0.9rem 2rem; }

/* Kopfzeile: Logo-Kachel, Name und ein Menüknopf. Das Menü klappt darunter auf, die Schnellwahl sitzt unten. */
.kopf-innen { flex-wrap: nowrap; padding: 0.55rem 0.9rem; gap: 0.75rem; justify-content: space-between; position: relative; }
.marke { gap: 0.7rem; min-width: 0; flex: 0 1 auto; }
.marke svg { width: 2.5rem; height: 2.5rem; padding: 0.5rem; box-sizing: border-box; background: #fff; border-radius: 0.7rem; fill: var(--kopf-bg); }
.marke-text { display: grid; min-width: 0; line-height: 1.2; }
.marke-name { font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.marke-zusatz { display: block; font: 600 0.78rem var(--sans); opacity: 0.8; }
.hauptnav, .benutzer { display: none; }
.menue-klein { display: block; flex: none; }
.menue-klein > summary { list-style: none; cursor: pointer; padding: 0.45rem 1rem; border: 2px solid currentColor; border-radius: 99px;
  font-weight: 700; font-size: 0.92rem; min-height: 0; }
.menue-klein > summary::-webkit-details-marker { display: none; }
.menue-klein[open] > summary { background: rgba(255, 255, 255, 0.16); }
.menue-klein-feld { position: absolute; z-index: 30; right: 0.9rem; top: calc(100% + 0.5rem); width: min(19rem, calc(100vw - 1.8rem));
  max-height: calc(100vh - 6rem); overflow-y: auto; background: var(--flaeche); color: var(--tinte); border: 1px solid var(--linie-stark);
  border-radius: 1rem; box-shadow: 0 18px 40px rgba(20, 18, 40, 0.3); padding: 0.5rem; }
.menue-klein-feld nav { display: grid; gap: 0.1rem; }
.menue-klein-feld nav a, .menue-klein-konto > a { display: block; padding: 0.7rem 0.9rem; border-radius: 99px; color: var(--tinte); text-decoration: none; font-weight: 600; }
.menue-klein-feld nav a[aria-current="page"] { background: var(--marine); color: var(--auf-marine); }
.menue-klein-konto { margin-top: 0.4rem; padding: 0.4rem 0.9rem 0.3rem; border-top: 1px solid var(--linie); display: grid; gap: 0.5rem; }
.menue-klein-konto > a { padding: 0.5rem 0; font-weight: 400; font-size: 0.88rem; color: var(--tinte-2); border-radius: 0; }
.menue-klein-konto form { display: grid; gap: 0.1rem; margin: 0; }
.menue-klein-konto form > span { font-weight: 700; font-size: 0.82rem; }
.menue-klein-konto .opt { display: flex; flex-wrap: wrap; gap: 0 1rem; }
.menue-klein-konto .textknopf { color: var(--tinte-2); justify-self: start; text-align: left; min-height: 2.4rem; padding: 0; }
.menue-klein-konto .textknopf[aria-pressed="true"] { color: var(--tinte); font-weight: 700; text-decoration: none; }
.menue-klein-konto .textknopf[aria-pressed="true"]::before { content: "✓ "; }

/* Untere Menüleiste */
.untennav { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--flaeche);
  border-top: 1px solid var(--linie-stark); padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08); }
.untennav a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.15rem;
  min-height: 3.6rem; padding: 0.35rem 0.1rem; color: var(--tinte-2); text-decoration: none; font-size: 0.72rem; line-height: 1.1; }
.untennav .kachel-icon { color: inherit; }
.untennav a[aria-current="page"] { color: var(--marine); font-weight: 700; box-shadow: inset 0 3px 0 var(--akzent); }
.untennav .untennav-neu { color: var(--auf-marine); background: var(--marine); border-radius: 0; }
.untennav .untennav-neu[aria-current="page"] { color: var(--auf-marine); }

/* Bedienbarkeit mit dem Daumen: große Felder, kein Zoomen beim Antippen */
input, select, textarea { font-size: 1rem; min-height: 2.9rem; }
textarea { min-height: 6rem; }
input[type=checkbox], input[type=radio] { min-height: 0; width: 1.3rem; height: 1.3rem; }
.knopf, button.knopf, .textknopf { min-height: 2.75rem; }
.knopf { padding-left: 1rem; padding-right: 1rem; }
.aktionen { width: 100%; }
.aktionen .knopf { flex: 1 1 auto; text-align: center; justify-content: center; }
.haken { min-height: 2.75rem; display: inline-flex; align-items: center; gap: 0.5rem; }
.seitenkopf { margin-bottom: 0.9rem; }
.textlink { display: inline-block; padding: 0.35rem 0; }

/* Filter einklappbar */
.filterbox { margin-bottom: 1rem; background: var(--flaeche); border: 1px solid var(--linie-stark); border-radius: 4px; }
.filterbox > summary { display: flex; align-items: center; justify-content: space-between; min-height: 2.9rem; padding: 0 0.9rem;
  font-weight: 600; cursor: pointer; list-style: none; }
.filterbox > summary::-webkit-details-marker { display: none; }
.filterbox > summary::after { content: ""; width: 0.55rem; height: 0.55rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); margin-top: -0.2rem; }
.filterbox[open] > summary::after { transform: rotate(-135deg); margin-top: 0.2rem; }
.filterbox-an { margin-left: auto; margin-right: 0.8rem; font-size: 0.8rem; font-weight: 600; color: var(--plus); }
.filterbox .filter { padding: 0 0.9rem 0.9rem; }
.filter .feld, .filter .breitfeld { flex: 1 1 100%; }

/* Tabellen als Kartenliste */
.karten, .karten tbody, .karten tfoot { display: block; }
.karten thead { display: none; }
.tabelle-wrap:has(.karten) { background: none; border: 0; overflow: visible; }
.karten tr { display: grid; position: relative; gap: 0.15rem 0.75rem; padding: 0.75rem 0.9rem; margin-bottom: 0.6rem;
  background: var(--flaeche); border: 1px solid var(--linie-stark); border-radius: 4px; }
.buch.karten tbody tr:hover { background: var(--flaeche); }
.buch.karten tbody tr.anfang:hover, .buch.karten tfoot tr:hover { background: var(--papier); }
.karten td a { text-decoration: none; }
.karten td { display: block; padding: 0; border: 0; min-width: 0; }
.karten td.nr, .karten td.r { width: auto; }
.karten .meta { color: var(--tinte-2); font-size: 0.85rem; }
.karten .meta a { color: inherit; text-decoration: none; }
.karten .meta a::after { content: ""; position: absolute; inset: 0; }
.karten .nur-mobil { display: block; }

/* Kassenbuch */
.kasse tr { grid-template-columns: 1fr auto; grid-template-areas: "text betrag" "meta meta"; }
.kasse tbody tr > td:not(.nur-mobil):not(:nth-child(4)) { display: none; }
.kasse tbody tr > td:nth-child(4) { grid-area: text; font-weight: 600; }
.kasse tbody tr > td.nur-mobil:not(.meta) { grid-area: betrag; font-weight: 700; font-size: 1.05rem; text-align: right; font-variant-numeric: tabular-nums; }
.kasse tbody tr > td.meta { grid-area: meta; }
.kasse tbody tr > td:nth-child(4) small { font-weight: 400; }
.kasse tr.anfang { grid-template-areas: "text betrag"; background: var(--papier); }
.kasse tbody tr.anfang > td:nth-child(9) { display: block; grid-area: betrag; text-align: right; font-style: normal; font-weight: 700; }
.kasse tr.anfang > td:nth-child(4) { font-weight: 400; }
.kasse tbody tr > td.leer { display: block !important; grid-area: text; }
.kasse tfoot tr { grid-template-columns: 1fr 1fr; background: var(--papier); }
.kasse tfoot td:first-child { grid-column: 1 / -1; font-weight: 700; }
.kasse tfoot td[data-label]::before { content: attr(data-label); display: block; font-size: 0.8rem; font-weight: 400; color: var(--tinte-2); }
.kasse tfoot td:last-child { display: none; }
.kasse tfoot td.r { text-align: left; }

/* Mitglieder */
.mitgl tr { grid-template-columns: 1fr auto; grid-template-areas: "name status" "meta offen"; align-items: baseline; }
.mitgl tbody tr > td:not(.nur-mobil):not(:nth-child(2)):not(:nth-child(5)) { display: none; }
.mitgl tbody tr > td:nth-child(2) { grid-area: name; font-weight: 600; font-size: 1.05rem; }
.mitgl tbody tr > td:nth-child(5) { grid-area: status; text-align: right; }
.mitgl tbody tr > td.meta { grid-area: meta; }
.mitgl tbody tr > td.nur-mobil:not(.meta) { grid-area: offen; text-align: right; font-size: 0.9rem; }
.mitgl tbody tr > td:nth-child(2) a::after { content: ""; position: absolute; inset: 0; }
.mitgl .meta a::after { content: none; }
.mitgl tbody tr > td.leer { display: block !important; grid-area: name; font-weight: 400; }
.mitgl tfoot tr { grid-template-columns: 1fr auto; background: var(--papier); }
.mitgl tfoot td:first-child { font-weight: 700; }

/* Protokoll */
.prot tr { grid-template-columns: auto 1fr; grid-template-areas: "zeit benutzer" "aktion aktion" "objekt objekt" "details details"; }
.prot td:nth-child(1) { grid-area: zeit; color: var(--tinte-2); font-size: 0.85rem; }
.prot td:nth-child(2) { grid-area: benutzer; color: var(--tinte-2); font-size: 0.85rem; text-align: right; }
.prot td:nth-child(3) { grid-area: aktion; font-weight: 600; }
.prot td:nth-child(4) { grid-area: objekt; }
.prot td:nth-child(5) { grid-area: details; color: var(--tinte-2); font-size: 0.88rem; }
.prot td:empty { display: none; }

.buch th, .buch td { padding: 0.45rem 0.5rem; }
.nur-breit { display: none; }

/* Hundeliste: zwei Karten nebeneinander */
.hundekarten { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
.hundekarte .karte-text { padding: 0.5rem 0.6rem 0.65rem; }




/* Sachspenden */
.sach tr { grid-template-columns: 1fr auto; grid-template-areas: "was wert" "meta meta" "quittung quittung"; }
.sach tbody tr > td:not(.nur-mobil):not(:nth-child(4)):not(:nth-child(7)) { display: none; }
.sach tbody tr > td:nth-child(4) { grid-area: was; font-weight: 600; }
.sach tbody tr > td:nth-child(7) { grid-area: quittung; position: relative; z-index: 1; margin-top: 0.4rem; font-size: 0.9rem; }
.sach tbody tr > td:nth-child(7) small { display: none; }
.sach tbody tr > td.meta { grid-area: meta; }
.sach tbody tr > td.nur-mobil:not(.meta) { grid-area: wert; text-align: right; font-weight: 700; }
.sach tbody tr > td.leer { display: block !important; grid-area: was; font-weight: 400; }

/* Vorlagen */
.vorlage { padding: 0.85rem 0.9rem 0.95rem; }
.vorlage .aktionen .knopf { flex: 1 1 auto; }

/* Terminplaner: Monatsraster wird zur Tagesliste, leere Tage entfallen */
.t-zeile { grid-template-columns: 5.5rem 1fr; gap: 0.2rem 0.6rem; }
.t-zeit { font-size: 0.85rem; }
.t-arten legend { float: none; flex-basis: 100%; }
.t-monatskopf { display: grid; grid-template-columns: auto 1fr auto; gap: 0.4rem 0.6rem; }
.t-monatskopf h2 { min-width: 0; font-size: 1.15rem; }
.t-monatskopf .textlink { grid-column: 1 / -1; text-align: center; }
.t-haken { grid-column: 2; justify-self: start; }
.t-wochenkopf { display: none; }
.t-woche { display: block; }
.t-zelle { min-height: 0; border-right: 0; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.6rem; padding: 0.45rem 0.6rem; }
.t-zelle.t-leer, .t-fremd.t-leer { display: none; }
.t-fremd { display: none; }
.t-nr { flex: 0 0 4.2rem; }
.nur-handy { display: inline; font-weight: 400; color: var(--tinte-2); }
.t-chip { flex: 1 1 10rem; white-space: normal; font-size: 0.9rem; padding: 0.25rem 0.5rem; }
.t-mehr { flex-basis: 100%; }
.t-detail { grid-template-columns: 1fr; gap: 0.1rem; }
.t-detail dd { margin-bottom: 0.6rem; }

/* Zweite Menüzeile: waagerecht wischen statt umbrechen */
.unternav-innen { flex-wrap: nowrap; overflow-x: auto; padding: 0 0.9rem; gap: 0 1.1rem; scrollbar-width: none; }
.unternav-innen a { white-space: nowrap; min-height: 2.6rem; display: flex; align-items: center; }