/* Termine im Browser (vorlagen/termine/). Ruhig: neutrale Flächen, feine Linien, Grün nur als Akzent.
   Nutzt nur die Variablen aus basis.css; alles unter .t-seite, damit nichts mit seite.css kollidiert. */

/* Tonnenfarben wie in der App (data/Kategorie.kt), hell und dunkel */
.k-restmuell { --k: #4a5561; } .k-bio { --k: #8c5a2e; } .k-papier { --k: #2e6bd6; } .k-gelb { --k: #f0be1f; }
.k-glas { --k: #0e8076; } .k-gruen { --k: #3f8c3a; } .k-sperrmuell { --k: #c2611e; } .k-schadstoffe { --k: #c73e37; }
.k-weihnachtsbaum { --k: #1d6b3e; } .k-sonstiges { --k: #6b7380; }
.k-gelb { --k-auf: #3b2f00; }
@media (prefers-color-scheme: dark) {
  .k-restmuell { --k: #a3aebb; } .k-bio { --k: #d39b66; } .k-papier { --k: #8ab4ff; } .k-gelb { --k: #f4ce5a; }
  .k-glas { --k: #5dd1c4; } .k-gruen { --k: #8fd486; } .k-sperrmuell { --k: #f29a5c; } .k-schadstoffe { --k: #ff8f87; }
  .k-weihnachtsbaum { --k: #6cc890; } .k-sonstiges { --k: #aeb5bf; }
}

/* ------------------------------------------------------------------ Grundgerüst */
.t-seite { width: min(1040px, 100% - 32px); margin-inline: auto; padding: 20px 0 8px; display: grid; gap: 20px; }
.t-seite > *, .t-spalte > * { min-width: 0; }
.t-seite [hidden] { display: none !important; }
.t-klein { font-size: 0.88rem; }
.t-seite .hinweis .icon { margin-top: 2px; }
.t-seite .hinweis > span { min-width: 0; }
.t-seite code { font: 400 0.9em ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; background: var(--flaeche-2); padding: 1px 6px; border-radius: 6px; }

/* Fortschritt: vier ruhige Balken */
.t-schritte { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.t-schritte li { display: grid; gap: 6px; font-size: 0.8rem; color: var(--leise); font-weight: 500; }
.t-schritte li::before { content: ""; height: 4px; border-radius: 4px; background: var(--flaeche-3); }
.t-schritte li.fertig::before, .t-schritte li.jetzt::before { background: var(--gruen); }
.t-schritte li.jetzt { color: var(--tinte); font-weight: 600; }

.t-zurueck { justify-self: start; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-block: -10px -6px; padding-right: 10px;
  color: var(--leise); text-decoration: none; font-weight: 500; border-radius: 999px; }
@media (hover: hover) and (pointer: fine) { .t-zurueck:hover { color: var(--tinte); } }

.t-kopf { display: grid; gap: 8px; justify-items: start; }
.t-kopf h1 { font-size: clamp(1.75rem, 5vw, 2.5rem); font-weight: 700; letter-spacing: -0.03em; }
.t-kopf p { font-size: 1.05rem; }
.t-abschnitt { display: grid; gap: 12px; }
.t-abschnitt > h2 { font-size: 1.3rem; }

/* Karten und Kacheln */
.t-karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-karte); padding: 20px; display: grid; gap: 16px; align-content: start; }
@media (min-width: 640px) { .t-karte { padding: 24px; } }
.t-karte > h2, .t-aufklapp summary { font-size: 1.2rem; font-weight: 650; display: flex; align-items: center; gap: 10px; }
.t-karte > h2 .icon, .t-aufklapp summary span .icon { color: var(--gruen); }
.t-kachel { width: 44px; height: 44px; border-radius: 12px; background: var(--flaeche-2); color: var(--gruen); display: grid; place-items: center; flex: none; }
.t-kachel.gross { width: 56px; height: 56px; border-radius: var(--r-karte); }
.t-kachel.gross .icon { width: 28px; height: 28px; }
.t-kachel.gruen { background: var(--gruen); color: var(--auf-gruen); }

/* ------------------------------------------------------------------ Formulare */
.t-form, .t-suche { display: grid; gap: 18px; }
.t-feld { display: grid; gap: 6px; min-width: 0; }
.t-feld > label { font-weight: 600; font-size: 0.95rem; }
.t-feld small { color: var(--leise); font-size: 0.88rem; }
.t-zeile { display: flex; gap: 10px; align-items: stretch; min-width: 0; }
.t-zeile > :first-child { flex: 1; min-width: 0; }
.t-eingabe { position: relative; display: flex; align-items: center; min-width: 0; }
.t-eingabe > .icon { position: absolute; left: 14px; color: var(--leise); pointer-events: none; }
.t-eingabe > input { padding-left: 44px; }
.t-form > .knopf { justify-self: start; }
.t-karte > .knopf { justify-self: start; max-width: 100%; white-space: normal; text-align: center; line-height: 1.25; padding-block: 12px; }
@media (max-width: 520px) { .t-form > .knopf { justify-self: stretch; } }
@media (max-width: 400px) { .t-kopieren .t-zeile, .t-zeile.t-kopieren, .t-form .t-zeile { flex-direction: column; } }
.t-kopieren input { font: 400 0.88rem ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; }
input[type=search]::-webkit-search-cancel-button { cursor: pointer; }

/* Autovervollständigung (JavaScript) */
.t-kombi { position: relative; }
.t-vorschlaege { position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 6px); list-style: none; margin: 0; padding: 6px;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-feld); box-shadow: var(--schatten-hoch, var(--schatten));
  max-height: 296px; overflow-y: auto; overscroll-behavior: contain; }
.t-vorschlaege li { min-height: 44px; padding: 10px 12px; border-radius: 8px; cursor: pointer; display: flex; align-items: center; }
.t-vorschlaege li[aria-selected="true"] { background: var(--flaeche-2); }
@media (hover: hover) and (pointer: fine) { .t-vorschlaege li:hover { background: var(--flaeche-2); } }
.t-vorschlaege mark { background: none; color: inherit; font-weight: 650; }

/* Vorschläge ohne JavaScript */
.t-vorschlag-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.t-chip-knopf { min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--linie); background: var(--flaeche);
  font: 500 0.95rem "Outfit", sans-serif; color: var(--tinte); cursor: pointer; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

/* Treffer der Adresssuche */
.t-treffer:empty { display: none; }
.t-treffer ul { list-style: none; margin: 0; padding: 4px; display: grid; gap: 2px; border: 1px solid var(--linie); border-radius: var(--r-feld); }
.t-treffer-knopf { width: 100%; display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 10px 12px; border: 0; background: transparent;
  border-radius: 8px; font: 400 1rem "Outfit", sans-serif; color: var(--tinte); text-align: left; cursor: pointer; }
.t-treffer-knopf .icon { color: var(--gruen); }
.t-treffer-knopf span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.t-treffer-knopf small { color: var(--gruen); font-weight: 600; font-size: 0.85rem; white-space: nowrap; }
.t-treffer-knopf:focus-visible { background: var(--flaeche-2); outline-offset: -2px; }
@media (hover: hover) and (pointer: fine) { .t-treffer-knopf:hover { background: var(--flaeche-2); } }

/* Anleitung mit Nummern */
.t-anleitung { list-style: none; counter-reset: schritt; margin: 0; padding: 0; display: grid; gap: 12px; }
.t-karte.t-anleitung { padding: 20px; }
.t-anleitung li { counter-increment: schritt; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: start; }
.t-anleitung li::before, .t-wege h3::before { content: counter(schritt); width: 28px; height: 28px; border-radius: 50%; background: var(--gruen-hell);
  color: var(--gruen-tief); display: grid; place-items: center; font-weight: 650; font-size: 0.85rem; font-variant-numeric: tabular-nums; flex: none; }
@media (prefers-color-scheme: dark) { .t-anleitung li::before, .t-wege h3::before { color: var(--gruen); } }
.t-anleitung a { overflow-wrap: anywhere; }

/* ------------------------------------------------------------------ Ort und Anbieter */
.t-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.t-zeilen-link { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 12px 16px; border-radius: var(--r-karte);
  background: var(--flaeche); border: 1px solid var(--linie); color: var(--tinte); text-decoration: none;
  transition: border-color var(--kurz) ease, transform var(--kurz) var(--raus); }
.t-zeilen-link:active { transform: scale(0.99); }
.t-zeilen-link.still { background: transparent; border-style: dashed; }
@media (hover: hover) and (pointer: fine) { .t-zeilen-link:hover { border-color: color-mix(in srgb, var(--gruen) 50%, var(--linie)); } }
.t-text { display: grid; gap: 2px; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.t-text b { font-weight: 600; }
.t-text small { color: var(--leise); font-size: 0.9rem; line-height: 1.35; }
.t-text small.warn { color: var(--fehler); }
.t-pfeil { color: var(--leise); }
.t-leer { justify-items: start; }
.t-leer h2 { font-size: 1.3rem; }

.t-vorteile { display: grid; gap: 12px; }
@media (min-width: 720px) { .t-vorteile { grid-template-columns: repeat(3, 1fr); } }
.t-vorteile > div { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; row-gap: 2px; padding: 16px 18px;
  border-radius: var(--r-karte); border: 1px solid var(--linie); background: var(--flaeche); align-content: start; }
.t-vorteile .t-kachel { grid-row: span 2; }
@media (min-width: 720px) { .t-vorteile > div { grid-template-columns: 1fr; row-gap: 6px; } .t-vorteile .t-kachel { grid-row: auto; margin-bottom: 6px; } }
.t-vorteile p { font-size: 0.95rem; }

/* ------------------------------------------------------------------ Termine */
.t-ergebnis { display: grid; gap: 20px; align-items: start; }
@media (min-width: 900px) { .t-ergebnis { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 28px; } }
.t-spalte { display: grid; gap: 16px; align-content: start; }

/* Tonnen wählen: Pillen mit echter Checkbox (auch ohne :has lesbar) */
.t-filter { display: grid; gap: 10px; }
.t-filter fieldset, fieldset.t-filter, .t-radios { border: 0; margin: 0; padding: 0; min-width: 0; }
.t-filter legend, .t-radios legend { font-weight: 600; font-size: 0.95rem; display: flex; align-items: center; gap: 8px; margin-bottom: 10px; padding: 0; }
.t-filter legend .icon { color: var(--leise); }
.t-filter > .knopf { justify-self: start; min-height: 44px; }
.t-wahl-liste { display: flex; flex-wrap: wrap; gap: 8px; }
.t-wahl { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; max-width: 100%; padding: 5px 14px 5px 6px;
  border-radius: 999px; border: 1px solid var(--linie); background: var(--flaeche); cursor: pointer; font-weight: 550; user-select: none;
  transition: background-color var(--kurz) ease, border-color var(--kurz) ease; }
.t-wahl input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.t-wahl:has(input:checked) { border-color: color-mix(in srgb, var(--k) 45%, var(--linie)); background: color-mix(in srgb, var(--k) 8%, var(--flaeche)); }
.t-wahl input:not(:checked) + .t-punkt-gross { background: var(--flaeche-3); color: var(--leise); }
.t-wahl input:not(:checked) ~ .t-wahl-text { color: var(--leise); text-decoration: line-through; text-decoration-thickness: 1px; }
.t-wahl input:focus-visible + .t-punkt-gross { outline: 3px solid var(--gruen); outline-offset: 2px; }
.t-wahl-text { display: grid; line-height: 1.15; min-width: 0; }
.t-wahl-text small { font-size: 0.78rem; color: var(--leise); font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-punkt-gross { width: 28px; height: 28px; border-radius: 50%; background: var(--k); color: var(--k-auf, #ffffff); display: grid; place-items: center; flex: none;
  transition: background-color var(--kurz) ease; }
@media (prefers-color-scheme: dark) { .t-punkt-gross { color: #10150f; } }
.t-punkt-gross .icon { width: 17px; height: 17px; }

/* Liste nach Tagen */
.t-tage { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.t-tag { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 14px; align-items: center; padding: 14px;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-karte); }
.t-datum { width: 56px; height: 56px; border-radius: 12px; background: var(--flaeche-2); display: grid; place-content: center; text-align: center;
  line-height: 1; font-variant-numeric: tabular-nums; }
.t-datum b { font-size: 1.35rem; font-weight: 650; }
.t-datum span { font-size: 0.72rem; color: var(--leise); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 5px; font-weight: 600; }
.t-tag.erster { border-color: color-mix(in srgb, var(--gruen) 45%, var(--linie)); box-shadow: var(--schatten); padding-block: 18px; }
.t-tag.erster .t-datum { background: var(--gruen); color: var(--auf-gruen); }
.t-tag.erster .t-datum span { color: inherit; opacity: 0.85; }
.t-tag.erster .t-tag-titel b { font-size: 1.3rem; }
.t-tag-inhalt { display: grid; gap: 8px; min-width: 0; }
.t-tag-titel { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; row-gap: 0; }
.t-tag-titel b { font-size: 1.08rem; font-weight: 650; letter-spacing: -0.01em; }
.t-tag-titel span { font-size: 0.92rem; font-variant-numeric: tabular-nums; }
.t-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.t-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; max-width: 100%; padding: 3px 12px 3px 3px; border-radius: 999px;
  background: var(--flaeche-2); font-weight: 550; font-size: 0.95rem; }
.t-tage.kompakt { gap: 14px; }
.t-tage.kompakt .t-tag { padding: 0; border: 0; box-shadow: none; background: none; }
.t-tage.kompakt .t-datum { width: 48px; height: 48px; }
.t-tage.kompakt .t-tag { grid-template-columns: 48px minmax(0, 1fr); }
.t-tage.kompakt .t-tag.erster .t-tag-titel b { font-size: 1.08rem; }

.t-mehr summary { list-style: none; cursor: pointer; min-height: 48px; margin: 10px 0; display: flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 600; color: var(--gruen); border-radius: 999px; border: 1px solid var(--linie); background: var(--flaeche); }
.t-mehr summary::-webkit-details-marker, .t-aufklapp summary::-webkit-details-marker { display: none; }
.t-mehr summary .icon, .t-aufklapp summary > .icon { transition: transform var(--mittel) var(--raus); }
.t-mehr[open] summary .icon, .t-aufklapp[open] summary > .icon { transform: rotate(180deg); }
.t-stand { margin-top: 4px; color: var(--leise); }
.t-stand a { overflow-wrap: anywhere; }

/* Monat */
.t-monat-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.t-monat-kopf h2 { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.t-rund { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--tinte); background: var(--flaeche-2); text-decoration: none; flex: none; }
.t-rund.aus { opacity: 0.35; }
@media (hover: hover) and (pointer: fine) { a.t-rund:hover { background: var(--flaeche-3); } }
.t-kalender { width: 100%; border-collapse: separate; border-spacing: 2px; table-layout: fixed; font-variant-numeric: tabular-nums; margin: -2px; width: calc(100% + 4px); }
.t-kalender th { font-size: 0.75rem; font-weight: 600; color: var(--leise); padding: 2px 0 6px; }
.t-kalender abbr { text-decoration: none; }
.t-kalender td { height: 48px; vertical-align: top; text-align: center; border-radius: 10px; padding: 5px 0 4px; }
.t-kalender td.belegt { background: var(--flaeche-2); }
.t-kalender td.vorbei { opacity: 0.45; }
.t-tagzahl { display: inline-block; min-width: 26px; font-size: 0.88rem; font-weight: 500; line-height: 1.6; border-radius: 999px; }
.t-kalender td.heute .t-tagzahl { background: var(--gruen); color: var(--auf-gruen); font-weight: 650; }
.t-punkte { display: flex; justify-content: center; flex-wrap: wrap; gap: 3px; margin-top: 2px; padding-inline: 2px; }
.t-punkt { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--k); box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.12); font-style: normal; }
.t-legende { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 0.85rem; color: var(--leise); }
.t-legende li { display: inline-flex; align-items: center; gap: 6px; }

/* ------------------------------------------------------------------ Abo */
.t-abo form, .t-aufklapp form { display: grid; gap: 18px; }
.t-radios { display: grid; gap: 2px; }
.t-radio { display: flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; }
.t-radio input { width: 20px; height: 20px; margin: 0; accent-color: var(--gruen); flex: none; }
.t-knopfreihe { display: flex; flex-wrap: wrap; gap: 10px; }
.t-knopfreihe .knopf { flex: 1 1 auto; }
.t-abo-knoepfe { display: grid; gap: 8px; }
@media (min-width: 520px) { .t-abo-knoepfe { grid-template-columns: 1fr 1fr; } }
.t-abo-knopf { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 14px; border-radius: var(--r-feld);
  border: 1px solid var(--linie); background: var(--flaeche); color: var(--tinte); text-decoration: none;
  transition: background-color var(--kurz) ease, transform var(--kurz) var(--raus); }
.t-abo-knopf:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) { .t-abo-knopf:hover { background: var(--flaeche-2); } }
.t-abo-knopf > .icon { width: 26px; height: 26px; }
.t-abo-knopf span { display: grid; line-height: 1.25; min-width: 0; }
.t-abo-knopf b { font-weight: 600; }
.t-abo-knopf small { color: var(--leise); font-size: 0.85rem; }

.t-aufklapp { display: block; }
.t-aufklapp summary { list-style: none; cursor: pointer; justify-content: space-between; min-height: 44px; }
.t-aufklapp summary span { display: inline-flex; align-items: center; gap: 10px; }
.t-aufklapp[open] summary { margin-bottom: 16px; }
.t-loeschen form { display: flex; }
.knopf.gefahr { background: var(--fehler-bg); color: var(--fehler); }
@media (hover: hover) and (pointer: fine) { .knopf.gefahr:hover { background: color-mix(in srgb, var(--fehler) 18%, var(--fehler-bg)); } }

/* Home Assistant */
.t-wege { list-style: none; counter-reset: schritt; margin: 0; padding: 0; display: grid; gap: 24px; }
.t-wege > li { counter-increment: schritt; display: grid; gap: 10px; min-width: 0; }
.t-wege h3 { font-size: 1.05rem; display: flex; align-items: center; gap: 10px; }
.t-code { display: grid; gap: 8px; justify-items: start; min-width: 0; }
.t-code pre { width: 100%; margin: 0; padding: 14px 16px; background: var(--flaeche-2); border: 1px solid var(--linie); border-radius: var(--r-feld);
  overflow-x: auto; font: 400 0.8rem/1.6 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; tab-size: 2; }
.t-code pre code { background: none; padding: 0; font-size: inherit; }
.t-code .knopf, .t-kopieren .knopf { min-height: 44px; }

/* App-Hinweis */
.t-app { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; padding: 18px 20px; border-radius: var(--r-karte); background: var(--flaeche-2); }
.t-app .knopf { grid-column: 1 / -1; justify-self: start; min-height: 44px; }
.t-app .t-kachel { background: var(--flaeche); }
.t-app p { font-size: 0.95rem; }
@media (min-width: 640px) { .t-app { grid-template-columns: auto minmax(0, 1fr) auto; } .t-app .knopf { grid-column: auto; } }

.t-mittig { max-width: 560px; margin: 32px auto 0; text-align: center; display: grid; gap: 14px; justify-items: center; }
.t-mittig .t-knopfreihe { justify-content: center; margin-top: 8px; }

/* ------------------------------------------------------------------ Laden */
.t-skelett { display: grid; gap: 10px; padding-top: 4px; }
.t-skelett-zeile { height: 14px; width: 70%; border-radius: 7px; background: linear-gradient(90deg, var(--flaeche-2) 0%, var(--flaeche-3) 50%, var(--flaeche-2) 100%);
  background-size: 200% 100%; animation: t-schimmer 1.2s linear infinite; }
.t-skelett-zeile.breit { width: 100%; height: 56px; border-radius: 12px; }
.t-skelett-zeile.kurz { width: 40%; }
.knopf[aria-busy="true"] { cursor: progress; opacity: 0.8; }
.t-dreher { width: 18px; height: 18px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: t-dreh 0.7s linear infinite; flex: none; }
@keyframes t-schimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@keyframes t-dreh { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .t-skelett-zeile, .t-dreher { animation: none; } }

/* Kopieren: kurze Bestätigung */
.knopf.kopiert { background: var(--gruen-hell); color: var(--gruen-tief); border-color: transparent; }
@media (prefers-color-scheme: dark) { .knopf.kopiert { color: var(--gruen); } }

@media print {
  .t-schritte, .t-zurueck, .t-filter, .t-abo, .t-app, .t-zeilen-link, .kopfzeile, .fuss { display: none !important; }
  .t-mehr > *:not(summary) { display: block; }
}