/* ============================================================
   Paket by ManniMindset, das App-Eigene.
   Alles Gemeinsame steht in /app/basis.css und wird VORHER geladen.
   ============================================================ */

/* Diese App hat als EINZIGE der Familie keinen Werbestreifen. Ohne diese Zeile
   liesse .app in basis.css unten 88 px fuer eine Flaeche frei, die es hier nicht
   gibt, und der Bildschirm haette ein totes Feld am unteren Rand.

   Der Grund fuer die Werbefreiheit ist kein Geschmack, sondern eine Klausel:
   die Nutzungsbedingungen der DHL-Schnittstelle verbieten woertlich
   "You shall not combine Tracking Data with advertisement or present it in a
   way that it could be regarded as advertisement". Wer hier je einen Werbeplatz
   einbaut, nimmt der App die Grundlage fuer die Standanzeige. */
:root {
  --werbehoehe: 0px;

  /* Die getönten Flächen als Rollen, nicht als feste Farbe an der Stelle, wo
     sie gebraucht werden. Sie standen bis V2 hart als rgba(255,182,30,.10) und
     rgba(63,201,138,.12) im Blatt und waren im hellen Modus praktisch
     unsichtbar (1,06:1 zur Karte). Schlimmer: das Grün war die DUNKEL-Variante,
     obwohl die Basis --gruen im hellen Modus bewusst absenkt. */
  --flaeche-akzent: rgba(255, 182, 30, .12);
  --flaeche-gut:    rgba(63, 201, 138, .14);

  /* Rahmen von Bedienelementen brauchen 3:1 (WCAG 1.4.11), --linie erreicht
     gegen die Karte nur 1,07:1 und war damit praktisch unsichtbar. --linie
     bleibt für reine Trennstriche, wo die Regel nicht gilt.
     Gemessen gegen --karte: dunkel 3,37:1, hell 3,14:1. */
  --rand-bedien: #756A57;

  /* Grün als SCHRIFT. Im dunklen Modus reicht --gruen (6,61:1 auf der getönten
     Fläche), im hellen erreicht es nur 3,47:1 und ist damit als 12-Pixel-Text
     zu schwach. --gruen bleibt für Flächen und Ränder, wo 3:1 genügt. */
  --gruen-schrift: var(--gruen);
}

@media (prefers-color-scheme: light) {
  :root {
    --flaeche-akzent: rgba(138, 90, 0, .10);
    --flaeche-gut:    rgba(31, 143, 95, .13);
    --rand-bedien:    #9C907A;
    --gruen-schrift:  #177046;   /* 5,20:1 auf dem Chip, 6,10:1 auf Weiß */
  }
}

/* Fokus. In der ganzen basis.css gibt es keine einzige Fokusregel, und
   styles.css setzte bis V2 box-shadow: var(--mm-focus) auf ein Merkmal, das
   nirgends definiert ist (es steht nur in mm_design/references/tokens.css, und
   die laden die Apps nicht). Ungültiges var() heißt: die Regel fällt still auf
   none zurück, es gab also überhaupt keine sichtbare Fokusanzeige.
   Hier lokal für diese App, damit die anderen 22 unberührt bleiben. */
.app :focus-visible,
.blatt-huelle :focus-visible {
  outline: 2px solid var(--akzent-text);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Kopf, Kann-Leiste, Eingabe, Inhalt. */
/* Kopf, Kann-Leiste, PLZ-Frage, Eingabe, Inhalt. */
.app { grid-template-rows: auto auto auto auto minmax(0, 1fr); }

/* Der Toast der Basis ist absichtlich durchklickbar (pointer-events: none), er
   ist sonst immer nur eine Meldung. Für das Zurückholen einer gelöschten
   Sendung muss man ihn aber treffen können. Nur dann, nur hier, und nur solange
   er sichtbar ist. */
.mp-toast.da.zurueck {
  pointer-events: auto;
  cursor: pointer;
  border-color: var(--mm-amber-500);
}

/* Eine eigene Klassenregel mit display schlaegt das hidden-Attribut. Diese
   Zeile ist in der Familie schon zweimal teuer gewesen. */
[hidden] { display: none !important; }


/* ---------- Das kann ich ---------- */

.kann {
  display: grid;
  gap: 5px;
  padding: 7px 9px 6px;
  border: 1px solid var(--linie);
  border-radius: 14px;
  background: var(--karte);
}

/* ---------- Die zwei Gruppen: in der App gegen weiter zum Dienst ----------

   Manni, 06.08.2026: "kann man oben nicht erkennen, welche Dienste jetzt
   angeschlossen sind und innerhalb der App verfügbar sind, und welche externe
   Dienste angeschlossen sind und man weitergeleitet wird."

   Die Antwort steht auf drei Ebenen gleichzeitig, damit sie auch dann noch
   ankommt, wenn eine davon ausfällt:
     1. ein Symbol je Gruppe (Gerät mit Haken gegen Rahmen mit Pfeil hinaus)
     2. Klartext in der Überschrift
     3. Farbe UND Zeichen am Chip: grüner Haken oder gelber Pfeil

   Punkt 3 doppelt bewusst: Farbe allein trägt keine Auskunft (WCAG 1.4.1),
   und jeder zwölfte Mann sieht Rot und Grün nicht auseinander. Der Haken und
   der Pfeil stimmen auch dann. */

.kann-gruppe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
}

/* Die Ueberschrift nimmt eine eigene Zeile (flex-basis 100 Prozent). Neben den
   Chips gestellt war sie 7 bzw. 21 Pixel zu breit, und beide Gruppen brachen
   deshalb zweizeilig um: 143 Pixel statt 131, und die fehlen unten der Liste.
   Untereinander liest es sich ausserdem wie das, was es ist: eine Ueberschrift
   mit ihren Eintraegen. */
.kg-kopf {
  flex: 1 1 100%;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 800;
  white-space: nowrap;
}
.kann-gruppe.direkt .kg-kopf { color: var(--gruen-schrift); }
.kann-gruppe.link   .kg-kopf { color: var(--akzent-text); }

.kg-sym {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

/* KEIN eigener Container um die Chips. Ein flex-Kind in einem flex-Elternteil
   bekommt nur die Restbreite zugeteilt und stapelt dann senkrecht: gemessen
   217 Pixel statt der 80, die die Leiste haben darf. Die Chips sind deshalb
   Geschwister der Ueberschrift und fliessen in derselben Zeile mit. */

/* Der Chip selbst. Getönte Fläche statt nur Rahmen: so ist die Gruppe auch
   dann als Block erkennbar, wenn die Zeile umbricht und die Überschrift eine
   Zeile weiter oben steht. */
/* Die Markenkachel. Flaeche, Schrift und Rand kommen je Dienst aus app.js,
   hier steht nur die Form. Groesser als bis V7 (Manni: "dass wir die Buttons
   oben größer machen"), und sie sind jetzt echte Links: 40 Pixel hoch, damit
   der Daumen sie trifft, ohne dass zwei Zeilen daraus werden.

   Kein Logo, keine Bildmarke: nur Flaeche und Wort. Dasselbe Verfahren wie in
   der Tanken-App. */
.kchip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 38px;
  padding: 0 9px;
  border-radius: 10px;
  border: 2px solid;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .2px;
  white-space: nowrap;
  text-decoration: none;
}
.kchip:active { filter: brightness(.9); }
.kchip-zeichen { font-size: 12px; font-weight: 800; line-height: 1; opacity: .85; }

/* Welche Sendungsarten, in einer einzigen leisen Zeile. Sie stand bis V2 als
   Kachelreihe mit vier Symbolen da und kostete 46 Pixel, die das Eingabefeld
   jetzt besser gebrauchen kann. */
.kann-arten {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px 6px;
  margin: 1px 0 0;
  font-size: 12px;
  /* nicht --gedimmt: das erreicht im hellen Modus nur 3,73:1 */
  color: var(--leise);
}
.kann-arten svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
.kann-arten span { margin-right: 5px; }


/* ---------- Die Eingabe ---------- */

/* ---------- Die Eingabe, in zwei Zustaenden ----------

   Manni, 05.08.2026: "Das Feld zum Reinpasten des Textes ging viel zu klein.
   Es sollte ungefähr ein Drittel der Gesamtfläche ausmachen. Du musst
   natürlich gucken, wo Du den Platz hin schaffst."

   Genau das ist der Haken: ein Drittel fuer das Feld UND Platz fuer die
   Auskunft geht auf einem Handy nicht gleichzeitig. Also nacheinander.

     ZUSTAND LEER    (noch keine Treffer)
       Das Feld ist gross und ist das Angebot: hier kommt die Mail hinein.
       Darunter steht nur noch der Einzeiler und die Fusszeile, mehr braucht
       es zu diesem Zeitpunkt nicht.

     ZUSTAND TREFFER (etwas gefunden)
       Das Feld faellt auf eine Zeile zurueck und gibt den Platz an die
       Karten ab. Es bleibt sichtbar und jederzeit benutzbar.

   Zurueck geht es mit "Schließen" ueber den Treffern. Umgeschaltet wird in
   app.js ueber die Klasse "leer" an .app. */

.leiste { display: grid; gap: 5px; }

.ein-zeile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  align-items: stretch;
}

/* Feld und Aufzählung liegen übereinander. */
.ein-feld { position: relative; min-width: 0; display: grid; }

.feld-tipps {
  position: absolute;
  inset: 13px 12px auto 12px;
  display: grid;
  gap: 5px;
  /* Durchklickbar: ein Tipp irgendwo auf der Liste landet im Feld darunter. */
  pointer-events: none;
  color: var(--leise);
  font-size: 14px;
  line-height: 1.4;
}
.feld-tipps b { color: var(--text); font-size: 15px; font-weight: 800; }
.feld-tipps ul { margin: 0; padding: 0 0 0 2px; list-style: none; display: grid; gap: 4px; }
.feld-tipps li { display: grid; grid-template-columns: 15px minmax(0, 1fr); gap: 7px; }
.feld-tipps li::before {
  content: "";
  width: 7px;
  height: 7px;
  margin: 7px 0 0 3px;
  border-radius: 999px;
  background: var(--akzent-text);
}
.feld-tipps-fuss { font-size: 13px; color: var(--gedimmt); }

/* Nur im leeren Zustand, und nur solange nichts im Feld steht. Der Platzhalter
   des Feldes wuerde sonst mitten in der Liste stehen. */
.feld-tipps { display: none; }
.app.leer .ein-feld.frei .feld-tipps { display: grid; }
.app.leer .ein-feld.frei textarea.eingabe::placeholder { color: transparent; }
/* Im leeren Zustand rutschen die Knoepfe UNTER das Feld und werden breit. Neben
   einem 250 Pixel hohen Feld saehe ein ebenso hoher Knopf albern aus, und der
   Daumen erreicht sie unten ohnehin besser. */
.app.leer .ein-zeile { grid-template-columns: minmax(0, 1fr); }

.ein-tasten { display: flex; gap: 6px; align-items: stretch; }
/* Unten nimmt Nachsehen den ganzen freien Platz, Leeren bleibt schmal: die
   beiden sind nicht gleich wichtig, und das soll man sehen. */
.app.leer .ein-knopf { flex: 1 1 auto; }
.knopf.ein-neben { min-width: 84px; padding: 0 12px; font-size: 16px; gap: 6px; }
.ein-sym {
  width: 17px;
  height: 17px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Im leeren Zustand ist Einfügen der wahrscheinlichere Handgriff, deshalb
   bekommt er dort die Akzentfarbe als Umriss statt nur einen grauen Rand. */
.app.leer #btnEinfuegen { border-color: var(--akzent-text); color: var(--akzent-text); }

/* textarea statt input, weil hier auch eine ganze Bestellmail landet. Es waechst
   in app.js bis fuenf Zeilen mit, deshalb hier kein festes Hoehenmass. */
textarea.eingabe {
  width: 100%;
  min-height: 54px;
  max-height: 148px;
  padding: 13px 12px;
  border: 2px solid var(--rand-bedien);
  border-radius: 14px;
  background: var(--karte);
  color: var(--text);
  font-family: var(--schrift);
  font-size: 17px;
  line-height: 1.35;
  resize: none;
  overflow-y: auto;
}

/* Das grosse Feld. dvh statt vh, weil nur dvh die ein- und ausfahrende Leiste
   des Handybrowsers mitrechnet; ohne den Rueckfall bliebe es auf aelteren
   iOS-Fassungen bei der Mindesthoehe.

   Der gestrichelte Rand ist raus. Gestrichelt heisst herkoemmlich "Ablage" oder
   "abgeschaltet", nicht "hier tippen", und im hellen Modus wurde daraus ein
   dunkelbrauner Kasten auf Papierweiss. Ausserdem war er in derselben Farbe wie
   der Fokus, damit waren "leer" und "leer und angetippt" nicht zu
   unterscheiden. Die Einladung traegt der Platzhaltertext. */
.app.leer textarea.eingabe {
  min-height: 30vh;
  max-height: 34vh;
}
@supports (height: 100dvh) {
  .app.leer textarea.eingabe { min-height: 30dvh; max-height: 34dvh; }
}
/* EINE grosse Sache auf einmal. Nur wenn die Postleitzahlfrage AUFGEKLAPPT
   ist, weicht das Feld zurueck: zwei grosse Bloecke gleichzeitig lassen dem
   Inhalt nichts (gemessen 0 Pixel).

   Der hoehere Vorrang ist Absicht und war ein echter Fehler: die Aufzaehlung
   hing an .app.leer .ein-feld.frei .feld-tipps, also an vier Klassen, und
   schlug damit die Regel hier mit dreien. Ergebnis: die vierzeilige
   Aufzaehlung wurde in ein 54 Pixel hohes Feld gezeichnet und lief heraus.
   Genau das sah "gruselig" aus. */
.app.leer.plzoffen textarea.eingabe { min-height: 54px; max-height: 148px; }
.app.leer.plzoffen .ein-zeile { grid-template-columns: minmax(0, 1fr) auto; }
.app.leer.plzoffen .ein-feld.frei .feld-tipps { display: none; }
/* Kein outline:none mehr. Das war zusammen mit dem undefinierten --mm-focus
   der Grund, warum das Feld gar keine sichtbare Fokusanzeige hatte. Den Ring
   setzt jetzt die :focus-visible-Regel ganz oben. */
textarea.eingabe::placeholder { color: var(--leise); }
/* Die Suche lief ins Leere: der Rahmen bleibt markiert, bis der Nutzer etwas
   ändert. Zusammen mit dem Kasten darunter, nicht statt seiner: Farbe allein
   ist keine Auskunft. */
textarea.eingabe.daneben { border-color: var(--warn); border-style: solid; }

.knopf.ein-knopf { width: auto; min-width: 118px; font-size: 18px; }

/* Der Kontingentstand. Leise, solange genug da ist, laut wenn nichts mehr geht. */
.konting {
  margin: 0;
  padding: 0 2px;
  font-size: 14px;
  color: var(--gedimmt);
}
.konting.knapp { color: var(--akzent-text); font-weight: 700; }
.konting.leer  { color: var(--warn); font-weight: 700; }

/* ---------- Deine Postleitzahl, oberhalb des Eingabefelds ----------

   Manni, 06.08.2026: "Postleitzahl hinterlegen ist super klein und unten. Ich
   sehe es eher oben als eine der ersten Fragen."

   Eine Einrichtungsfrage gehoert dorthin, wo man sie beantwortet, und danach
   muss sie den Platz wieder hergeben. Deshalb zwei sehr verschiedene Groessen. */

.plzoben:empty { display: none; }

/* ZU: eine schmale Einladung. Sie steht über dem Feld, wie gewünscht, nimmt
   ihm aber nichts weg. Kein Rahmen, keine getönte Fläche: sonst stapeln sich
   über der eigentlichen Aufgabe zwei laute Kästen. */
.plz-zu {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--akzent-text);
  font-family: var(--schrift);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.plz-zu > span { border-bottom: 1px dotted currentColor; }
.plz-lohnt {
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--flaeche-akzent);
  color: var(--akzent-text);
  font-size: 12px;
  font-weight: 700;
}

/* OFFEN: sichtbare Frage mit Feld und Knopf, erst nach dem Antippen. */
.plz-frage {
  display: grid;
  gap: 5px;
  padding: 8px 10px;
  border: 2px solid var(--akzent-text);
  border-radius: 14px;
  background: var(--flaeche-akzent);
}
/* Ueberschrift und Begruendung in EINER Zeile. Als eigener Absatz kostete die
   Begruendung eine dritte Zeile, und die Frage kam auf 200 Pixel. Zusammen mit
   dem grossen Eingabefeld blieb dem Inhalt dann nichts mehr, gemessen 0 Pixel. */
.plz-frage-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 7px;
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
}
.plz-frage-kopf .plz-nadel { align-self: center; }
.plz-frage-warum { margin: 0; font-size: 13px; line-height: 1.3; font-weight: 400; color: var(--leise); }
.plz-zeile { display: flex; gap: 6px; align-items: stretch; }
.plz-feld {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 46px;
  padding: 0 12px;
  border: 2px solid var(--rand-bedien);
  border-radius: 12px;
  background: var(--karte);
  color: var(--text);
  font-family: var(--schrift-zahl);
  font-size: 17px;
  letter-spacing: .6px;
}
.plz-feld.daneben { border-color: var(--warn); }
.plz-knopf {
  min-height: 46px;
  min-width: 104px;
  padding: 0 14px;
  border: 0;
  border-radius: 12px;
  background: var(--akzent);
  color: var(--auf-akzent);
  font-family: var(--schrift);
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
}
.plz-knopf:active { background: var(--akzent-satt); }
.plz-spaeter {
  justify-self: start;
  min-height: 34px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--leise);
  font-family: var(--schrift);
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
}

/* BEANTWORTET: schmale Bestaetigung, sie hat ihren Zweck erfuellt. */
.plz-fertig {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 10px;
  border: 1px solid var(--gruen);
  border-radius: 999px;
  background: var(--flaeche-gut);
  color: var(--text);
  font-family: var(--schrift);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.plz-fertig .plz-aendern { color: var(--gruen-schrift); text-decoration: underline; }
.plz-nadel {
  width: 16px;
  height: 16px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.plz-frage-kopf .plz-nadel { stroke: var(--akzent-text); }
.plz-fertig .plz-nadel { stroke: var(--gruen-schrift); }

/* Der Unabhaengigkeitshinweis. Steht immer da, ist antippbar und fuehrt zum
   vollen Text. Ein Knopf, damit er auch mit der Tastatur erreichbar ist. */
.unab {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--leise);
  font-family: var(--schrift);
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}


/* ---------- Der Inhalt ----------
   EIN Scrollbereich, nicht drei. Die Schwester-Apps lassen die eine Liste
   scrollen und halten die Seite fest; hier stehen aber zwei Listen und der
   Hinweistext untereinander, und zwei getrennte Rollbereiche auf einem Handy
   sind eine Falle: man wischt in der falschen. Deshalb scrollt hier der ganze
   Inhalt, und die Listen fliessen darin. */
.inhalt {
  display: grid;
  grid-auto-rows: max-content;
  gap: 8px;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding-right: 2px;
}

/* .liste in der Basis ist ein Raster OHNE Spaltenangabe. Sie wird damit so
   breit wie ihr breitester Eintrag und sprengt schmale Bildschirme, sobald eine
   lange Sendungsnummer darin steht. Bekannte Falle der Familie. */
.liste { grid-template-columns: minmax(0, 1fr); overflow: visible; }
.listenraum { min-height: 0; }

.tr-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 8px;
  padding: 0 2px 4px;
  font-size: 15px;
  font-weight: 700;
  color: var(--leise);
}
.tr-tasten { display: flex; flex-wrap: wrap; gap: 6px; }

.minitaste {
  min-height: 44px;
  padding: 0 13px;
  border: 1px solid var(--rand-bedien);
  border-radius: 999px;
  background: var(--karte);
  color: var(--text);
  font-family: var(--schrift);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.minitaste:active { background: var(--linie); }


/* ---------- Eine Sendungskarte ---------- */

.pk {
  display: grid;
  gap: 7px;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid var(--linie);
  background: var(--karte);
}

.pk-kopf {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
}

/* Das neutrale Zeichen je Dienst: Amber-Quadrat mit Buchstaben in der Hausschrift.
   KEINE fremden Logos und keine nachgebauten Hausfarben. Die Wortmarke als Text
   deckt § 23 MarkenG, eine Bildmarke nicht, und eine gelbe Kachel fuer DHL waere
   die Nachahmung der Aufmachung ohne das Logo. */
.pk-zeichen {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: var(--akzent);
  color: var(--auf-akzent);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .3px;
  flex: none;
}
.pk-zeichen.offen {
  background: transparent;
  border: 2px solid var(--akzent-text);
  color: var(--akzent-text);
}

.pk-namen { min-width: 0; display: grid; gap: 1px; }
.pk-dienst { font-size: 16px; font-weight: 800; line-height: 1.15; }
.pk-was { font-size: 14px; color: var(--leise); line-height: 1.2; }

/* Die Nummer ist zum Ablesen und Abtippen da, deshalb die Zifferschrift und
   Vierergruppen. Antippen kopiert sie. */
/* Die Nummer ist ein Kopierknopf und soll auch danach aussehen: gepunktete
   Linie darunter, kleines Symbol dahinter, spuerbare Rueckmeldung beim
   Druecken. Vorher war sie von gewoehnlichem Text nicht zu unterscheiden, und
   niemand hat die Funktion gefunden. */
.pk-nr {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-family: var(--schrift-zahl);
  font-size: 15px;
  letter-spacing: .4px;
  color: var(--text);
  text-align: left;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
}
.pk-nr-text {
  word-break: break-all;
  border-bottom: 1px dotted var(--rand-bedien);
}
.pk-nr-sym {
  width: 16px;
  height: 16px;
  flex: none;
  fill: none;
  stroke: var(--akzent-text);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pk-nr:active .pk-nr-text { color: var(--akzent-text); border-bottom-color: var(--akzent-text); }

/* Der Speichern-Knopf. Er hat bis V13 als Stern dort gestanden, und ein Stern
   ist ein Rätsel: Merken? Bewerten? Favorit? Ob er an war, sah man nur an der
   Farbe. Jetzt steht das Wort da.

   Und er löscht nie. Vorher war er ein Umschalter, ein zweiter Tipp nahm die
   Sendung wieder aus der Liste: wer speichern wollte, löschte. Ist sie schon
   gespeichert, führt er ins Blatt, wo Umbenennen und Löschen beieinander
   stehen und beschriftet sind. */
.pk-sichern {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 44px;
  padding: 0 11px;
  border: 2px solid var(--akzent-text);
  border-radius: 12px;
  background: transparent;
  color: var(--akzent-text);
  font-family: var(--schrift);
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
  flex: none;
}
.pk-sichern:active { background: var(--flaeche-akzent); }
.pk-sichern.fertig {
  border-color: var(--gruen);
  color: var(--gruen-schrift);
  background: var(--flaeche-gut);
}
.pk-sichern-sym {
  width: 16px;
  height: 16px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Der grosse Stand, wenn er da ist. */
.pk-stand {
  display: grid;
  gap: 3px;
  padding: 8px 10px;
  border-radius: 11px;
  background: var(--flaeche-akzent);
  border-left: 4px solid var(--akzent-text);
}
.pk-stand.fertig { background: var(--flaeche-gut); border-left-color: var(--gruen); }
.pk-stand-text { font-size: 19px; font-weight: 800; line-height: 1.2; }
/* Ohne Zeitpunkt ist ein Stand wertlos, deshalb keine 12-Pixel-Schrift. */
.pk-stand-wann { font-size: 14px; color: var(--leise); }

/* Der Verlauf als Zeitleiste. Bewusst knapp: Name, Anschrift, Ablageort und
   Unterschrift werden NICHT angezeigt, auch wenn die Schnittstelle sie liefert.
   Die App zeigt nie mehr, als die oeffentliche Seite des Dienstes ohne
   Zusatzangabe zeigt (Postgeheimnis, § 64 PostG). */
.pk-lauf { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.pk-lauf li {
  display: grid;
  grid-template-columns: 13px minmax(0, 1fr);
  gap: 8px;
  padding: 5px 0;
  font-size: 15px;
  line-height: 1.3;
}
.pk-lauf li::before {
  content: "";
  width: 7px;
  height: 7px;
  margin: 7px 0 0 3px;
  border-radius: 999px;
  /* --linie erreicht gegen die Karte 1,07:1, die Zeitleiste sah dadurch aus
     wie eine kaputte Liste mit genau einem Punkt. */
  background: var(--rand-bedien);
}
.pk-lauf li:first-child::before { background: var(--akzent-text); }
.pk-lauf b { font-weight: 700; }
.pk-lauf span { color: var(--leise); }

/* Die Ehrlichkeitszeile: warum es hier nur einen Link gibt, oder warum die
   Zuordnung nicht eindeutig ist. */
.pk-klar {
  margin: 0;
  font-size: 14px;
  line-height: 1.35;
  color: var(--leise);
}

.pk-tasten { display: grid; gap: 6px; }

/* Der Direktlink. Immer da, auch wenn der Stand sauber angekommen ist: er
   kostet kein Kontingent, er zeigt die Einzelheiten, die diese App bewusst
   weglaesst, und er traegt die App weiter, falls DHL den Schluessel je sperrt.
   Immer ein echtes a-Element, nie window.open, sonst frisst es die
   Popup-Sperre auf iOS. */
a.pk-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  border-radius: 12px;
  background: var(--akzent);
  color: var(--auf-akzent);
  font-size: 17px;
  font-weight: 800;
  text-decoration: none;
}
a.pk-link.zweit {
  background: transparent;
  border: 2px solid var(--rand-bedien);
  color: var(--text);
  min-height: 46px;
  font-size: 16px;
}
a.pk-link:active { background: var(--akzent-satt); }
/* Traegt der Knopf die Hausfarbe des Dienstes, kommen Flaeche und Schrift aus
   dem style-Attribut. Hier bleibt nur, was die Farbe nicht ueberschreiben darf:
   ein Rand, damit eine helle Kachel (DHL-Gelb) auf hellem Grund nicht
   ausfranst, und eine Rueckmeldung beim Druecken, die keine Farbe voraussetzt. */
a.pk-link.marke { border: 2px solid; }
a.pk-link.marke:active { background: inherit; filter: brightness(.9); }
a.pk-chip.marke { border-width: 2px; }
a.pk-chip.marke:active { background: inherit; filter: brightness(.9); }
a.pk-link.zweit:active { background: var(--linie); }

/* ---------- Die Empfänger-Postleitzahl ----------
   Ein Angebot, keine Hürde: leise Fläche, keine Umrandung der ganzen Karte,
   und sie steht unter dem Stand statt darüber. Wer sie nicht braucht, liest
   darüber hinweg. */
/* Der Hinweis nach dem Öffnen: die Nummer steht nirgends, und man war gerade
   dabei, die App zu verlassen. */
/* Weitere Kandidaten bei mehrdeutigen Nummern. */
.pk-chips { display: flex; flex-wrap: wrap; gap: 6px; }
a.pk-chip {
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--rand-bedien);
  border-radius: 999px;
  background: var(--karte);
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}
a.pk-chip:active { background: var(--linie); }

/* Wartezeile fuer den Fuenf-Sekunden-Takt der Schnittstelle. */
.pk-warte { font-size: 14px; color: var(--akzent-text); font-weight: 700; }
.pk-fehler { font-size: 15px; color: var(--warn); font-weight: 700; }


/* ---------- Ein Eintrag der Merkliste ---------- */

/* Ein echter button, kein div mit Klick-Zuhoerer. Vorher war die ganze
   Merkliste mit der Tastatur nicht erreichbar und gab beim Antippen keine
   Rueckmeldung. Das Raster funktioniert am button unveraendert, es brauchte
   nur die ueblichen Zuruecksetzungen. */
.mk {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  width: 100%;
  padding: 9px 10px;
  border-radius: 13px;
  border: 1px solid var(--rand-bedien);
  background: var(--karte);
  color: var(--text);
  font-family: var(--schrift);
  text-align: left;
  cursor: pointer;
}
.mk:active { background: var(--linie); }
/* Erledigt NICHT ueber opacity: das zog die ganze Zeile auf 2,06:1 herunter.
   Stattdessen nur der Name wird leiser, und ein Haken sagt es zusaetzlich in
   Zeichen statt in Farbe. */
.mk.fertig .mk-name { color: var(--leise); font-weight: 700; }
.mk.fertig .mk-name::before { content: "✓ "; color: var(--gruen); }
.mk-text { min-width: 0; display: grid; gap: 1px; }
.mk-name {
  font-size: 16px;
  font-weight: 800;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mk-unter {
  font-size: 14px;
  color: var(--leise);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mk-pfeil { font-size: 24px; color: var(--gedimmt); flex: none; }

/* Die Gruppe "Erledigt" klappt zu. summary bekommt eine eigene Zeile im
   Listenmass, damit sie nicht wie ein Eintrag aussieht. */
.mk-gruppe { margin-top: 4px; }
.mk-gruppe > summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 6px 2px;
  font-size: 15px;
  font-weight: 700;
  color: var(--leise);
  cursor: pointer;
  list-style: none;
}
.mk-gruppe > summary::-webkit-details-marker { display: none; }
.mk-gruppe > summary::before { content: "▸ "; }
.mk-gruppe[open] > summary::before { content: "▾ "; }
.mk-gruppe .liste { padding-top: 4px; }


/* ---------- Hinweis und Fuss ---------- */

/* ---------- Die Verlaufsfrage ----------
   Kompakt und unter den Treffern, nicht darüber: das Ergebnis ist wichtiger
   als die Frage. */
.vfrage {
  display: grid;
  gap: 7px;
  padding: 9px 11px;
  border-radius: 13px;
  border: 1px solid var(--rand-bedien);
  background: var(--karte);
}
.vf-text { font-size: 14px; line-height: 1.4; color: var(--leise); }
.vf-text b { color: var(--text); }
.vf-tasten { display: flex; flex-wrap: wrap; gap: 7px; }
.minitaste.vf-ja {
  background: var(--akzent);
  border-color: var(--akzent);
  color: var(--auf-akzent);
}

/* ---------- Eine Zeile im Verlauf ----------
   Zwei Flächen nebeneinander: die große wiederholt die Abfrage, der Stern
   befördert die Nummer zu einer gemerkten Sendung. */
.vl { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px; align-items: stretch; }
.vl-haupt {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  width: 100%;
  padding: 8px 10px;
  border-radius: 13px;
  border: 1px solid var(--rand-bedien);
  background: var(--karte);
  color: var(--text);
  font-family: var(--schrift);
  text-align: left;
  cursor: pointer;
}
.vl-haupt:active { background: var(--linie); }
.vl-haupt .mk-name { font-family: var(--schrift-zahl); font-size: 15px; font-weight: 700; }
.vl-stern {
  width: 44px;
  border: 1px solid var(--rand-bedien);
  border-radius: 13px;
  background: var(--karte);
  color: var(--gedimmt);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.vl-stern:active { background: var(--linie); }

/* Der Löschknopf sitzt in der Zusammenfassungszeile der Gruppe. */
.mk-gruppe.verlauf > summary { justify-content: space-between; gap: 8px; }
.vl-weg {
  min-height: 40px;
  padding: 0 10px;
  border: 1px solid var(--rand-bedien);
  border-radius: 999px;
  background: var(--karte);
  color: var(--leise);
  font-family: var(--schrift);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.vl-weg:active { background: var(--linie); }

/* ---------- Eine Nummer berichtigen ----------
   Sie passt zu keinem Dienst, ist also fast immer eine zu lange Zeichenkette
   aus einem Link. Welche Nummer darin steckt, kann die App nicht ausrechnen,
   deshalb steht hier die Auswahl statt einer Behauptung. */
.mk-pruefen {
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--flaeche-akzent);
  color: var(--akzent-text);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}
.rep {
  display: grid;
  gap: 7px;
  margin-bottom: 14px;
  padding: 11px 12px;
  border-radius: 13px;
  border-left: 4px solid var(--akzent-text);
  background: var(--flaeche-akzent);
}
.rep b { font-size: 15px; }
.rep p { margin: 0; font-size: 14px; line-height: 1.4; color: var(--leise); }
.rep-wahl { display: grid; gap: 6px; }
.rep-knopf {
  display: grid;
  gap: 1px;
  min-height: 52px;
  padding: 7px 11px;
  border: 2px solid var(--rand-bedien);
  border-radius: 12px;
  background: var(--karte);
  color: var(--text);
  font-family: var(--schrift);
  text-align: left;
  cursor: pointer;
}
.rep-knopf:active { background: var(--linie); }
.rep-knopf b { font-family: var(--schrift-zahl); font-size: 15px; font-weight: 700; }
.rep-knopf span { font-size: 13px; color: var(--leise); }

/* Der Kasten, wenn nichts gefunden wurde. Amber statt Rot: es ist kein Fehler
   des Nutzers, sondern eine Auskunft. Rot wäre ein Vorwurf. */
.nichts {
  padding: 11px 13px;
  border-radius: 14px;
  background: var(--flaeche-akzent);
  border-left: 4px solid var(--akzent-text);
}
.nichts h2 { margin: 0 0 4px; font-size: 17px; line-height: 1.25; }
.nichts p { margin: 0; font-size: 15px; line-height: 1.45; color: var(--leise); }

.hinweis { padding: 2px 4px; }
.hinweis p { margin: 0; font-size: 15px; line-height: 1.4; color: var(--leise); }
.hinweis p b { color: var(--text); }
.hinweis .hinweis-klein { margin-top: 4px; font-size: 14px; color: var(--leise); }

.fuss { margin-top: 2px; }
.fuss .quelle { line-height: 1.45; font-size: 13px; }
/* Impressum und Datenschutz sind Pflichtangaben und waren 15 Pixel hohe
   Tippziele. Die Zeilenhöhe steigt dadurch nicht, die Polsterung überlappt nur
   den ohnehin vorhandenen Zeilenabstand. Die Regel steht hier lokal, weil die
   Fußzeile aus der gemeinsamen basis.css kommt und die anderen 22 Apps davon
   unberührt bleiben sollen. */
.fuss .quelle a {
  display: inline-block;
  min-height: 44px;
  padding: 13px 3px;
  margin: -13px 0;
}


/* ---------- Blatt-Innereien ---------- */

.bl-feld {
  width: 100%;
  min-height: 50px;
  padding: 12px;
  border: 2px solid var(--linie);
  border-radius: 12px;
  background: var(--bg);
  color: var(--text);
  font-family: var(--schrift);
  font-size: 17px;
}
.bl-feld:focus { outline: none; border-color: var(--akzent-text); }
textarea.bl-feld { min-height: 130px; font-family: var(--schrift-zahl); font-size: 13px; resize: vertical; }

.bl-zeilen { display: grid; gap: 7px; }
.bl-marke { font-size: 13px; font-weight: 700; color: var(--leise); }
.bl-text { margin: 0 0 9px; font-size: 14px; line-height: 1.5; color: var(--leise); }
.bl-text b { color: var(--text); }
.bl-loeschen { color: var(--warn); border-color: var(--warn); }

/* Das Berechtigungs-Haekchen vor der ersten Abfrage. Es ist keine Zierde:
   die DHL-Bedingungen verlangen, dass wer weder Absender noch Empfaenger ist,
   die noetigen Einwilligungen einholt. */
.bl-haken {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 10px;
  border: 1px solid var(--linie);
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.4;
  cursor: pointer;
}
.bl-haken input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--akzent); }
/* Wer ohne Häkchen auf Bestätigen tippt, sieht, woran es liegt. Der Knopf ist
   bewusst nicht mehr ausgegraut: ein toter Knopf sagt auf dem Handy nichts. */
.bl-haken.fehlt { border-color: var(--warn); background: var(--flaeche-akzent); }


/* ---------- Schmale Geraete ---------- */

@media (max-width: 359px) {
  /* Das Markup verwendet seit V2 span statt li, die alte Regel griff ins
     Leere. Und die Symbole wurden auf dem SCHMALSTEN Gerät größer statt
     kleiner: 22 statt der 15 Pixel weiter oben. Beides aus V2. */
  .kann-arten { font-size: 10px; }
  .kann-arten svg { width: 13px; height: 13px; }
  .knopf.ein-knopf { min-width: 96px; font-size: 16px; }
  .pk-zeichen { width: 34px; height: 34px; font-size: 11px; }
  .pk-sichern { padding: 0 8px; font-size: 13px; }
  .pk-stand-text { font-size: 17px; }
}