/* ============================================================
   Abfall SL by ManniMindset: was diese App eigen macht.

   Alles Gemeinsame steht in /app/basis.css und wird VORHER geladen. Hier steht
   nur, was es in den anderen Apps nicht gibt: das Zeilenraster, die Tonnen und
   die grosse Antwort oben.

   FARBEN: eigene Namen (--t-...), damit nichts aus der Basis ueberschrieben
   wird. Jeder Wert steht paarweise, hell UND dunkel. Wer nur den Hellwert
   setzt, hat den Dunkelmodus kaputtgemacht und merkt es erst abends im
   Hausflur, wenn er wissen will ob die Tonne raus muss.
   ============================================================ */

:root {
  /* Die Farben der Tonnen, so wie sie im Hof stehen. Das ist keine Deko: wer
     die Farbe sieht, muss den Namen nicht mehr lesen. */
  --t-rest:  #4a5058;
  --t-bio:   #7a5230;
  --t-gelb:  #d9a400;
  --t-blau:  #0060a8;
  --t-baum:  #17864a;
  --t-sperr: #cc6114;
  --t-gift:  #c02626;
  --t-sonst: #5b6472;

  /* Flaeche der grossen Antwort, wenn es dringend wird. */
  --dringend-flaeche: #fff4e6;
  --dringend-linie:   #cc6114;

  /* Eigene Farben fuer die Vorschlagsliste, statt --bg und --karte zu nehmen.
     Gemessen lagen die beiden nur um den Faktor 1,13 auseinander, im Dunkeln
     also praktisch dieselbe Flaeche. Genau darum ging es bei der Beschwerde,
     die Vorschlaege waren nicht als eigene Ebene zu sehen. */
  --vs-flaeche: #e4e9ef;
  --vs-eintrag: #ffffff;
  /* Dunkler als das PIG-Blau, und das ist KEINE Aenderung der Marke: das
     Markenblau #0091c8 kommt auf Weiss nur auf 3,57:1 und liegt damit unter dem
     Minimum von 4,5:1 fuer Text dieser Groesse. Dasselbe steht aus demselben
     Grund schon in der Basis. Die Marke traegt hier der blaue Balken links am
     Eintrag, der ist Flaeche und darf das Markenblau behalten. */
  --vs-treffer: #00688f;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Aufgehellt, sonst verschwinden Braun und Dunkelblau auf schwarzem Grund.
       Gemessen gegen #171b21: Braun kam auf 1,9:1 und war praktisch unsichtbar. */
    --t-rest:  #a6b0bd;
    --t-bio:   #c99a63;
    --t-gelb:  #ffd23f;
    --t-blau:  #5aa9e6;
    --t-baum:  #3ddc84;
    --t-sperr: #ff9d4d;
    --t-gift:  #ff6b6b;
    --t-sonst: #98a2b3;

    --dringend-flaeche: #2a2016;
    --dringend-linie:   #ff9d4d;

    /* Die Liste sinkt unter den Seitengrund, der Eintrag hebt sich darueber:
       so entsteht auch im Dunkeln eine sichtbare Schublade. */
    --vs-flaeche: #04060a;
    --vs-eintrag: #222932;
    /* Heller als das PIG-Blau der Bedienelemente. Auf dem aufgehellten Eintrag
       kam das Markenblau nur noch auf 4,11:1 und lag damit unter dem Minimum
       von 4,5:1 fuer Text. Die Marke traegt hier der blaue Balken links, die
       Markierung im Wort muss vor allem lesbar sein. */
    --vs-treffer: #6cc3ea;
  }
}

/* ---------- Zeilenraster ----------
   Nur die Liste waechst, alles andere bleibt so hoch wie sein Inhalt. So steht
   die Antwort immer an derselben Stelle, egal wie viele Termine folgen. */
.app {
  grid-template-rows:
    auto    /* Kopf */
    auto    /* die grosse Antwort, mit der Adresse darin */
    minmax(0, 1fr)  /* Liste, nimmt den Rest */
    auto    /* Werbung */;   /* Fuss */
}

/* ---------- Die grosse Antwort ---------- */

/* Hoeher als vorher, weil das Adressband jetzt mit in der Karte sitzt. */
.naechste {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 150px;
}

.gross {
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--karte);
  border: 2px solid var(--linie);
  text-align: center;
}

/* Ab dem Vortag faerbt sich die Karte. Das ist der einzige Moment, in dem diese
   App etwas von einem will, und dann darf sie auffallen. */
.gross.dringend {
  background: var(--dringend-flaeche);
  border-color: var(--dringend-linie);
}

.gross-wann {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: .5px;
  line-height: 1.1;
  color: var(--text);
}
.gross.dringend .gross-wann { color: var(--dringend-linie); }

.gross-tonnen {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 12px;
  margin: 8px 0 6px;
}

.gross-datum {
  font-size: 14px;
  font-weight: 600;
  color: var(--leise);
}
.gross-datum b { color: var(--text); }

/* ---------- Eine Tonne ---------- */

.tonne {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.t-punkt {
  flex: none;
  width: 17px;
  height: 17px;
  border-radius: 5px;
  background: var(--t-sonst);
  /* Der dunkle Rand haelt auch die helle gelbe Tonne auf weissem Grund
     sichtbar. Ohne ihn verschwindet sie schlicht. */
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25);
}
.t-name {
  font-size: 21px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tonne.t-rest  .t-punkt { background: var(--t-rest); }
.tonne.t-bio   .t-punkt { background: var(--t-bio); }
.tonne.t-gelb  .t-punkt { background: var(--t-gelb); }
.tonne.t-blau  .t-punkt { background: var(--t-blau); }
.tonne.t-baum  .t-punkt { background: var(--t-baum); }
.tonne.t-sperr .t-punkt { background: var(--t-sperr); }
.tonne.t-gift  .t-punkt { background: var(--t-gift); }

/* ---------- Die Liste ---------- */

/* display:grid ist hier NICHT Geschmackssache, sondern das, was die Liste
   ueberhaupt scrollen laesst. Die Basis setzt nur position und min-height. Ohne
   den Grid-Kontext waechst die Liste auf ihre volle Inhaltshoehe (gemessen
   1.368 px bei 24 Terminen), schiebt sich unter die Adresszeile und ihr
   overflow-y greift nie. Dieselbe Zeile steht aus demselben Grund in der
   Tank-App. */
.listenraum { display: grid; }

/* Drei Spalten: Tag, Tonnen, Abstand in Worten. Die mittlere nimmt den Rest,
   damit zwei Tonnen an einem Tag nicht die Datumsspalte zerdruecken. */
.zeile {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  /* Keine Aufklapp-Karte wie bei Tanken: hier gibt es nichts zu vertiefen.
     Deshalb auch kein Zeigefinger, der etwas verspricht was nicht kommt. */
  cursor: default;
}

.z-tag {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.15;
}
.z-wt  { font-size: 13px; font-weight: 700; color: var(--leise); }
.z-dat { font-size: 15px; font-weight: 800; color: var(--text); }

.z-tonnen {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
/* In der Liste kleiner als oben: hier zaehlt der Ueberblick, nicht der Ruf. */
.z-tonnen .t-name  { font-size: 16px; font-weight: 600; }
.z-tonnen .t-punkt { width: 13px; height: 13px; border-radius: 4px; }

.z-in {
  font-size: 13px;
  font-weight: 600;
  color: var(--leise);
  white-space: nowrap;
}

/* Der erste Eintrag ist derselbe, der oben gross steht. Der Balken sagt das,
   damit die Wiederholung als Wiederholung erkennbar ist und nicht als zweiter,
   anderer Termin. */
.zeile.jetzt { border-left-color: var(--blau); }

/* ---------- Adresszeile ---------- */

/* ---------- Adressband in der grossen Karte ----------

   Sass bis zum 30.07.2026 als eigener Knopf unter der Liste. Zwei Probleme, die
   Manni beide benannt hat: es war nicht zu erkennen, dass man die Adresse
   aendern kann, und sie stand losgeloest von der Antwort, zu der sie gehoert.

   Jetzt sitzt sie oben IN der Karte, abgetrennt durch eine Linie, und traegt
   das Wort "ändern" ausgeschrieben. Ein Stiftsymbol allein waere huebscher und
   genauso unverstaendlich gewesen. */
.adr-band {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  margin: 0 0 9px;
  padding: 0 0 8px;
  border: 0;
  border-bottom: 1px solid var(--linie);
  background: none;
  color: var(--leise);
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.adr-zeichen { flex: none; font-size: 15px; }
.adr-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
}
/* Das Wort, das den Knopf zum Knopf macht. Als Pille, damit es nicht wie ein
   Teil der Adresse gelesen wird. */
.adr-aendern {
  flex: none;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--blau);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .2px;
}
.adr-band:active { filter: brightness(1.15); }
.gross.dringend .adr-band { border-bottom-color: var(--dringend-linie); }

/* Was in der Karte steht, solange es keinen Termin zu zeigen gibt. */
.gross-leer {
  padding: 6px 0 2px;
  font-size: 17px;
  line-height: 1.4;
  color: var(--leise);
}

/* ---------- Fenster: Adresse einrichten ---------- */

.kasten-adresse { width: 100%; max-width: 420px; }
.kasten-adresse h2 { margin: 0 0 14px; }

.feld-titel {
  display: block;
  margin: 12px 0 4px;
  font-size: 14px;
  font-weight: 700;
  color: var(--leise);
}
.feld-titel .leise { font-weight: 500; color: var(--gedimmt); }

/* 17 px ist kein Zufall: unter 16 px zoomt iOS Safari beim Antippen eines
   Eingabefelds in die Seite hinein und kommt von allein nicht zurueck. */
.feld {
  width: 100%;
  min-height: 50px;
  padding: 0 12px;
  border: 2px solid var(--linie);
  border-radius: 12px;
  background: var(--karte);
  color: var(--text);
  font-family: inherit;
  font-size: 17px;
  font-weight: 600;
}
.feld:focus { outline: none; border-color: var(--blau); }
.feld:disabled { opacity: .55; }

/* Eigene Vorschlagsliste statt datalist: die sieht auf jedem Geraet anders aus,
   und auf iOS ist sie kaum zu treffen.

   Sie war zuerst unsichtbar (Manni, 30.07.2026): weisse Eintraege auf weissem
   Kasten unter einem weissen Eingabefeld. Dass die Suche beim Tippen sofort
   antwortet, half nichts, wenn man die Antwort nicht bemerkt. Drei Aenderungen,
   jede fuer sich klein:
     1. Die Liste bekommt eine eigene, dunklere Flaeche und liegt sichtbar UNTER
        dem Feld, wie eine aufgeklappte Schublade.
     2. Ein blauer Balken links an jedem Eintrag.
     3. Die passende Stelle im Namen wird hervorgehoben (siehe markiert() in
        app.js). Das ist der wirksamste Teil: eine Liste aehnlicher Woerter liest
        sich sonst als Block. */
.vorschlaege {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 172px;
  overflow-y: auto;
  margin-top: 6px;
  padding: 6px;
  border-radius: 12px;
  background: var(--vs-flaeche);
  border: 2px solid var(--linie);
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
/* Ohne das steht ein leerer grauer Kasten unter dem Feld. */
.vorschlaege:empty { display: none; }

.vs {
  position: relative;
  text-align: left;
  min-height: 44px;
  padding: 0 12px 0 14px;
  border: 1px solid var(--linie);
  border-left: 4px solid var(--blau);
  border-radius: 10px;
  background: var(--vs-eintrag);
  color: var(--text);
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Die Stelle, die zur Eingabe passt. */
.vs b { color: var(--vs-treffer); font-weight: 800; }
.vs:active { background: var(--blau); color: #fff; }
.vs:active b { color: #fff; }

.vs-leer {
  padding: 10px 12px;
  font-size: 15px;
  color: var(--leise);
}

.hinweis-klein {
  margin: 12px 0 14px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--leise);
}
.hinweis-klein.schlimm { color: var(--warn); font-weight: 600; }
.hinweis-klein:empty { display: none; }

/* ---------- Meldung waehrend des Ladens ----------

   Ein Abruf beim Entsorger dauert mehrere Sekunden, in Saarbruecken beim ersten
   Mal deutlich laenger, weil dort die Strassenliste Buchstabe fuer Buchstabe
   geholt werden muss. Der duenne Balken oben reicht dafuer nicht.

   Sitzt UNTEN, nicht oben: oben liegen Kopfzeile und Ladebalken, und die
   Meldung soll nichts verdecken, was man gerade liest. z-index 90 haelt sie
   ueber allem ausser den Fenstern (100), die ohnehin eigene Meldungen tragen. */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom) + 22px);
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(92vw, 420px);
  padding: 10px 16px 10px 12px;
  border-radius: 999px;
  background: var(--karte);
  border: 2px solid var(--blau);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .28);
  /* Startzustand: leicht nach unten versetzt und unsichtbar. */
  transform: translate(-50%, 12px);
  opacity: 0;
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
}
.toast.da { transform: translate(-50%, 0); opacity: 1; }

.toast-logo { height: 26px; width: auto; flex: none; display: block; }
.toast-text {
  min-width: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Drei Punkte, die nacheinander aufleuchten. Sie sagen "es laeuft noch",
   ohne eine Dauer zu versprechen, die niemand kennt. */
.toast-punkte { flex: none; display: flex; gap: 4px; }
.toast-punkte i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blau);
  opacity: .3;
  animation: toastPunkt 1.1s ease-in-out infinite;
}
.toast-punkte i:nth-child(2) { animation-delay: .18s; }
.toast-punkte i:nth-child(3) { animation-delay: .36s; }
@keyframes toastPunkt {
  0%, 70%, 100% { opacity: .3; }
  35%           { opacity: 1; }
}

/* Wer Bewegung abgeschaltet hat, bekommt die Meldung trotzdem, nur ohne
   Gleiten und ohne Pulsieren. Die Auskunft geht nicht verloren. */
@media (prefers-reduced-motion: reduce) {
  .toast { transition: none; }
  .toast-punkte i { animation: none; opacity: .75; }
}

/* ---------- Antippbare Tonne und ihr Fenster ---------- */

/* Als Knopf gebaut, also muss der Knopf-Look der Umgebung weg. */
button.tonne {
  border: 0;
  background: none;
  padding: 0;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
}
/* Das kleine i sagt, dass hier etwas zu holen ist. Ohne Zeichen tippt niemand
   auf einen Text, der wie eine Beschriftung aussieht. */
.t-info {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  margin-left: 2px;
  border-radius: 50%;
  background: var(--linie);
  color: var(--leise);
  font-size: 11px;
  font-weight: 800;
  font-style: italic;
  line-height: 1;
}
.tonne.fragbar:active .t-info { background: var(--blau); color: #fff; }
.z-tonnen .t-info { width: 15px; height: 15px; font-size: 10px; }

.kasten-info { width: 100%; max-width: 440px; }

.info-kopf {
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 2px solid var(--linie);
}
.info-kopf .t-name { font-size: 24px; font-weight: 800; }
.info-kopf .t-punkt { width: 22px; height: 22px; border-radius: 6px; }

/* Der Rumpf scrollt, nicht das Fenster: auf einem kleinen Geraet passen zwei
   Listen sonst nicht neben Kopf und Knopf. */
.info-rumpf {
  max-height: 52vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Das Warum steht ganz oben, nicht als Fussnote: wer den Grund kennt, macht es
   beim naechsten Mal von allein richtig. */
.info-warum {
  padding: 10px 12px;
  margin-bottom: 14px;
  border-radius: 10px;
  background: var(--bg);
  border-left: 4px solid var(--blau);
  font-size: 15px;
  line-height: 1.45;
  color: var(--text);
}

.info-titel {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 800;
}
.info-titel.ja { color: var(--gruen); }
.info-titel.nein { color: var(--warn); margin-top: 16px; }

.info-liste {
  margin: 0;
  padding: 0;
  list-style: none;
}
.info-liste li {
  position: relative;
  padding: 3px 0 3px 24px;
  font-size: 15.5px;
  line-height: 1.35;
}
.info-liste li::before {
  position: absolute;
  left: 2px;
  top: 3px;
  font-weight: 800;
}
.info-liste.ja li::before   { content: '✓'; color: var(--gruen); }
.info-liste.nein li::before { content: '✕'; color: var(--warn); }

/* Wohin es stattdessen muss. Eigene Zeile, damit die Liste nicht zur Textwand
   wird und man den Weg auf einen Blick findet. */
.wohin {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--leise);
}

.info-quelle {
  margin: 14px 0 12px;
  font-size: 12.5px;
  color: var(--leise);
}
.info-quelle a { color: var(--leise); }

/* ---------- Kleine Bildschirme ---------- */

/* Gekuerzt wird an der grossen Antwort, nie an der Liste: wer ein kleines
   Geraet hat, will trotzdem sehen was naechste Woche kommt. */
@media (max-height: 700px) {
  .naechste { min-height: 132px; }
  .gross { padding: 9px 12px; }
  .gross-wann { font-size: 26px; }
  .gross-tonnen { margin: 6px 0 4px; }
  .t-name { font-size: 19px; }
  .adr-band { margin-bottom: 7px; padding-bottom: 6px; font-size: 13.5px; }
  /* Das Fenster darf hier mehr Hoehe nehmen: es liegt ueber allem und muss auf
     nichts Ruecksicht nehmen. */
  .info-rumpf { max-height: 46vh; }
}