/* zweito - die Gestaltung.

   Umsetzung von: Zweito Master Design Prompt & Handoff Spec 1.0 (24.08.2026),
   Teile D bis H. Hier steht KEINE Farbe und KEIN Mass als Zahl - alles kommt
   aus farben.css, und die wird von design/farben.py erzeugt.

   Die fuenf Grundsaetze der Spec, in ihrer Reihenfolge:

   1. DAS FOTO IST DIE FARBE. Die Oberflaeche ist fast einfarbig, Tinte auf
      Papier. Genau EINE Markenfarbe markiert Aktion und Marke. Produktbilder
      sind das einzig Bunte auf dem Schirm.
   2. EIN SCHIRM, EINE AUFGABE. Keine konkurrierenden Hauptknoepfe.
   3. AUTOMATIK IST SICHTBAR, ABER NIE UNWIDERRUFLICH. Was die Textwerkstatt
      geschrieben hat, traegt Cyan und einen Funken - nie die Markenfarbe, denn
      ein Vorschlag ist keine Aktion.
   4. DICHTE VOR DEKORATION. Listen zeigen viel Substanz je Bildschirmhoehe.
   5. BARRIEREFREIHEIT IST GRUNDFLAECHE. WCAG 2.2 AA vollstaendig.

   Daraus folgen zwei Regeln, die hier durchgehalten werden:

   - Jeder ABSTAND kommt aus der Staffel (--raum-*, Vielfache von vier). Die
     feste Groesse eines einzelnen Bauteils - 48 Pixel Trefferflaeche, die
     Breite der Filterspalte, der Platz fuer den Pfeil im Auswahlfeld - gehoert
     dem Bauteil und keiner Staffel.
   - Eine gewoehnliche Karte hat KEINEN Schatten, sondern einen Rand. Schatten
     gibt es in drei Stufen und nur fuer Dinge, die wirklich ueber der Seite
     liegen.

   Warum nichts von fremden Rechnern geladen wird: Die Content-Security-Policy
   der Seite ist default-src 'self'. Die Schriften liegen deshalb unter
   /schrift/ und nicht bei Google - nebenbei erfaehrt Google so auch nicht, wer
   hier vorbeikommt. */

/* ------------------------------------------------------------------ Schrift */
/* Zwei Schnitte, wie die Spec sie verlangt: Inter fuer alles, Inter Tight ab
   28 Pixel. Der Unterschied ist die engere Laufweite - eine Ueberschrift in
   38 Pixel Inter wirkt auseinandergezogen, dieselbe in Inter Tight sitzt.

   Je ein latin-Ausschnitt, U+0000-00FF: darin liegen Umlaute, Eszett und das
   Eurozeichen. Veraenderliche Strichstaerke, also eine Datei statt dreier. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/schrift/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url("/schrift/inter-tight-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------- Grundlagen */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--tinte);
  font-family: var(--schrift-familie);
  font-size: var(--schrift-16);
  line-height: var(--zeile-16);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--marke-link); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--marke-tief); }

/* Fokus: 2 Pixel Markenfarbe, 2 Pixel Abstand. Niemals entfernen - wer mit
   der Tastatur navigiert, sieht sonst nicht, wo er ist. In der dunklen Sicht
   nimmt --marke-link den helleren Violettton, weil die Flaechenfarbe dort auf
   dem Grund zu wenig Kontrast haette. */
:focus-visible {
  outline: var(--fokus-breite) solid var(--marke-link);
  outline-offset: var(--fokus-abstand);
  border-radius: var(--rund-xs);
}

/* Ab 28 Pixel der engere Schnitt. Sperrung und Zeilenhoehe gehoeren zur
   Groesse und stehen deshalb bei ihr. */
h1, h2, h3 { margin: 0 0 var(--raum-8); font-family: var(--schrift-display); }
h1 {
  font-size: var(--schrift-30); line-height: var(--zeile-30);
  letter-spacing: var(--spur-30); font-weight: 600;
}
h2 {
  font-size: var(--schrift-24); line-height: var(--zeile-24);
  letter-spacing: var(--spur-24); font-weight: 600;
}
h3 {
  font-size: var(--schrift-20); line-height: var(--zeile-20);
  letter-spacing: var(--spur-20); font-weight: 600;
  font-family: var(--schrift-familie);
}

p { margin: 0 0 var(--raum-12); }
p:last-child { margin-bottom: 0; }

.sprung {
  position: absolute; left: -9999px;
  background: var(--marke); color: #fff;
  padding: var(--raum-12) var(--raum-16); z-index: 100;
  border-radius: var(--rund-sm);
}
.sprung:focus { left: var(--raum-8); top: var(--raum-8); }

.bahn { max-width: var(--bahn); margin: 0 auto; padding: 0 var(--raum-20); }
@media (min-width: 1024px) { .bahn { padding: 0 var(--rand); } }

.leise { color: var(--tinte-3); font-size: var(--schrift-14); line-height: var(--zeile-14); }
.klein { font-size: var(--schrift-14); line-height: var(--zeile-14); }
.reihe { display: flex; gap: var(--raum-12); flex-wrap: wrap; align-items: center; }
.reihe-eng { display: inline-flex; gap: var(--raum-8); align-items: center; }
.nur-schirm {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* -------------------------------------------------------------------- Kopf */
.kopf {
  background: var(--flaeche);
  border-bottom: 1px solid var(--linie);
  position: sticky; top: 0; z-index: 40;
}
.kopf-bahn {
  display: flex; align-items: center; gap: var(--raum-16);
  padding-top: var(--raum-12); padding-bottom: var(--raum-12); flex-wrap: wrap;
}
.marke { display: flex; align-items: baseline; gap: var(--raum-8); text-decoration: none; flex: none; }
.marke-bild { width: 104px; height: auto; display: block; color: var(--marke-link); }
/* Steht bereit, falls je ein Wort neben den Namen gehoert. Zurzeit steht dort
   nichts, und was dort stehen soll, ist nicht entschieden. */
.marke-unter {
  font-size: var(--schrift-12); letter-spacing: .17em; text-transform: uppercase;
  color: var(--tinte-3); font-weight: 600; white-space: nowrap;
}

/* Der Umkreis ist ein sichtbares Feld neben dem Ort, nicht in den Filtern
   vergraben (Spec E3). */
.kopfsuche { display: flex; gap: var(--raum-8); flex: 1 1 320px; min-width: 240px; }
.kopfsuche input[type=search] { flex: 1 1 auto; min-width: 0; }
.kopfsuche input[type=text] { width: 96px; flex: none; }
.kopfnav { display: flex; gap: var(--raum-8); align-items: center; flex-wrap: wrap; }

/* Auf dem Rechner steht alles in einer Zeile. Die Reihenfolge wird gesetzt,
   damit der Hauptknopf rechts aussen landet, obwohl er im Quelltext hinter
   der Navigation steht. */
.marke { order: 1; }
.kopfsuche { order: 2; }
.kopfnav { order: 3; }
.kopf-hauptknopf { order: 4; flex: none; }

/* Auf dem Telefon reicht die Breite nicht fuer Marke, Suche, Konto und
   Hauptknopf in einer Zeile. Vorher brach das in VIER Zeilen um - Marke,
   drei Kontoknoepfe, Hauptknopf, Suche -, und die Kopfleiste klebt oben und
   nimmt damit den halben Bildschirm.

   Jetzt sind es drei klar getrennte Zeilen:
     1. Marke links, "Anzeige aufgeben" rechts - die eine Handlung, die zaehlt
     2. die Suche ueber die volle Breite
     3. die Kontolinks, als schmale Textzeile statt als drei Knoepfe

   Die Postleitzahl faellt weg; sie steht in der Suchtafel und im Filter. */
@media (max-width: 720px) {
  .kopf-bahn { gap: var(--raum-8) var(--raum-12); }
  .kopf-hauptknopf { order: 2; margin-left: auto; }
  .kopfsuche { order: 3; flex: 1 1 100%; min-width: 0; }
  .kopfsuche input[type=text] { display: none; }
  .kopfnav {
    order: 4; flex: 1 1 100%; gap: var(--raum-16);
    border-top: 1px solid var(--linie); padding-top: var(--raum-8);
  }
  /* Drei Knoepfe nebeneinander sprengen 390 Pixel. Als Textlinks passen sie
     in eine Zeile und sind trotzdem gross genug zum Treffen. */
  .kopfnav .knopf-still {
    background: none; border: 0; padding: var(--raum-4) 0;
    min-height: 32px; color: var(--tinte-2);
  }
  .kopfnav .knopf-still:hover { background: none; color: var(--marke-link); }
}

.perle {
  display: inline-block; min-width: 20px; padding: 0 var(--raum-4);
  background: var(--marke); color: #fff; border-radius: var(--rund-voll);
  font-size: var(--schrift-12); line-height: 20px; text-align: center; font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------- Bedienung */
input[type=text], input[type=search], input[type=email], input[type=password],
input[type=number], input[type=tel], input[type=file], select, textarea {
  font: inherit; font-size: var(--schrift-16); line-height: var(--zeile-16);
  /* --flaeche-gedaempft und nicht --flaeche: Die Spec nennt diese Flaeche in
     D1 ausdruecklich "Input-Rest". Auf einer Tafel, die selbst --flaeche ist,
     verschwindet ein Feld sonst bis auf seinen Rand - auf der Anmeldeseite
     stand das Formular dadurch praktisch unsichtbar im Dunkeln. */
  color: var(--tinte); background: var(--flaeche-gedaempft);
  /* --linie-stark und nicht --linie: Der Rand eines Eingabefelds ist nach
     WCAG 2.2 (1.4.11) ein Bedienelement und braucht 3:1. Gemessen 3,41:1
     hell und 3,43:1 dunkel. */
  border: 1px solid var(--linie-stark); border-radius: var(--rund-sm);
  padding: var(--raum-12) var(--raum-16); width: 100%;
  transition: border-color var(--zeit-schnell) var(--kurve-schnell);
}
input:hover, select:hover, textarea:hover { border-color: var(--tinte-3); }
input:focus, select:focus, textarea:focus { background: var(--flaeche); }
textarea { resize: vertical; min-height: 120px; }
input::placeholder, textarea::placeholder { color: var(--tinte-3); }
select {
  appearance: none; padding-right: 34px;
  background-image: linear-gradient(45deg, transparent 50%, var(--tinte-3) 50%),
                    linear-gradient(135deg, var(--tinte-3) 50%, transparent 50%);
  background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
input[type=checkbox], input[type=radio] {
  width: auto; inline-size: 20px; block-size: 20px; accent-color: var(--marke);
}

/* Knoepfe. Hoehe 48 als Zielwert - das erfuellt WCAG 2.5.8 (24), Apple (44)
   und Material (48) gleichzeitig, und man trifft es im Gehen. */
.knopf, button.knopf, a.knopf,
.knopf-still, button.knopf-still, a.knopf-still,
.knopf-gefahr, .knopf-ki {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--raum-8);
  font: inherit; font-size: var(--schrift-14); line-height: var(--zeile-14);
  font-weight: 500; cursor: pointer; white-space: nowrap; text-decoration: none;
  border-radius: var(--rund-sm);
  padding: var(--raum-16) var(--raum-20); min-height: var(--ziel);
  border: 1px solid transparent;
  transition: background-color var(--zeit-schnell) var(--kurve-schnell),
              border-color var(--zeit-schnell) var(--kurve-schnell);
}
.knopf { background: var(--marke); color: #fff; border-color: var(--marke); }
.knopf:hover { background: var(--marke-tief); border-color: var(--marke-tief); color: #fff; }
.knopf[disabled], .knopf:disabled, .knopf[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

.knopf-still { background: var(--flaeche); color: var(--tinte); border-color: var(--linie-stark); }
.knopf-still:hover { background: var(--flaeche-gedaempft); color: var(--tinte); }

.knopf-gefahr { background: var(--schlecht); color: #fff; border-color: var(--schlecht); }
.knopf-gefahr:hover { filter: brightness(.92); color: #fff; }

/* Der KI-Knopf traegt Cyan, nicht die Markenfarbe: Ein Vorschlag ist keine
   Aktion, und beides gleich einzufaerben hiesse, dass der Nutzer sie
   verwechselt. */
.knopf-ki { background: var(--ki-flaeche); color: var(--ki); border-color: var(--ki); }
.knopf-ki:hover { filter: brightness(.97); }

.knopf-klein { padding: var(--raum-8) var(--raum-12); min-height: 32px; }

/* --------------------------------------------------------------- Meldungen */
.meldungen { margin: var(--raum-16) 0 0; display: grid; gap: var(--raum-8); }
.meldung {
  margin: var(--raum-16) 0 0; padding: var(--raum-12) var(--raum-16);
  border-radius: var(--rund-sm); border: 1px solid;
  font-size: var(--schrift-14); line-height: var(--zeile-14);
  display: flex; gap: var(--raum-12); align-items: center; flex-wrap: wrap;
}
.meldungen .meldung { margin: 0; }
.meldung-erfolg  { background: var(--gut-grund);      border-color: var(--gut);      color: var(--gut); }
.meldung-hinweis { background: var(--warn-grund);     border-color: var(--warn);     color: var(--warn); }
.meldung-fehler  { background: var(--schlecht-grund); border-color: var(--schlecht); color: var(--schlecht); }

/* ---------------------------------------------------------------- Flaechen */
/* Eine gewoehnliche Tafel hat einen Rand und keinen Schatten (Spec D4). */
.tafel {
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--rund-md); padding: var(--raum-24);
}
.tafel + .tafel { margin-top: var(--raum-16); }
/* Nebeneinanderstehende Tafeln nicht: Dort macht das Raster den Abstand, und
   ein margin-top schoebe jede ausser der ersten nach unten. */
.tarifreihe > .tafel + .tafel,
.zweispalt > .tafel + .tafel,
.gitter > .tafel + .tafel { margin-top: 0; }

.abschnitt { padding: var(--raum-32) 0; }
.abschnitt-kopf {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--raum-16); flex-wrap: wrap; margin-bottom: var(--raum-16);
}

/* -------------------------------------------------------------- Startseite */
/* Kein Hero-Bild, kein Werbeslot (Spec F1.1). Die Buehne traegt die Suche und
   sonst nichts - eine grosse leere Flaeche waere Dekoration ohne Aufgabe. */
.buehne {
  background: var(--flaeche-gedaempft);
  border-bottom: 1px solid var(--linie);
  padding: var(--raum-40) 0;
}
.buehne h1 {
  max-width: 20ch;
  font-size: var(--schrift-38); line-height: var(--zeile-38);
  letter-spacing: var(--spur-38); font-weight: 700;
}
@media (min-width: 1024px) {
  .buehne h1 {
    font-size: var(--schrift-48); line-height: var(--zeile-48);
    letter-spacing: var(--spur-48);
  }
}
.buehne p.gross {
  font-size: var(--schrift-18); line-height: var(--zeile-18); color: var(--tinte-2);
  max-width: 56ch; margin: 0 0 var(--raum-24);
}

.suchtafel {
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--rund-md); padding: var(--raum-16);
  display: grid; gap: var(--raum-12);
  grid-template-columns: 2fr 1fr 1fr auto; align-items: end;
}
.suchtafel label {
  font-size: var(--schrift-14); line-height: var(--zeile-14);
  font-weight: 500; color: var(--tinte-2); display: block; margin-bottom: var(--raum-4);
}
.suchtafel .feld { min-width: 0; }
@media (max-width: 760px) {
  .suchtafel { grid-template-columns: 1fr 1fr; }
  .suchtafel .feld:first-child { grid-column: 1 / -1; }
  .suchtafel button { grid-column: 1 / -1; }
}

.kachelreihe {
  display: grid; gap: var(--raum-8);
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
}
.kategoriekachel {
  display: block; background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--rund-sm); padding: var(--raum-12) var(--raum-16);
  text-decoration: none; color: var(--tinte);
  font-size: var(--schrift-14); line-height: var(--zeile-14); font-weight: 600;
  min-height: var(--ziel);
  transition: border-color var(--zeit-schnell) var(--kurve-schnell);
}
.kategoriekachel:hover { border-color: var(--linie-stark); color: var(--tinte); }
.kategoriekachel span {
  display: block; font-weight: 400; font-size: var(--schrift-12);
  line-height: var(--zeile-12); color: var(--tinte-3); margin-top: var(--raum-2);
}

/* ---------------------------------------------------------------- Anzeigen */
/* Die Anzeigenkachel ist das wichtigste Element der Seite (Spec E2). Dichte
   vor Dekoration: Bild, Titel, Preis, Schnipsel, Ort und Alter, Marken - so
   viel Substanz je Bildschirmhoehe wie moeglich. */
.gitter {
  display: grid; gap: var(--raum-16);
  grid-template-columns: repeat(auto-fill, minmax(228px, 1fr));
}
.karte {
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--rund-md); overflow: hidden;
  display: flex; flex-direction: column; position: relative;
  transition: border-color var(--zeit-schnell) var(--kurve-schnell),
              box-shadow var(--zeit-schnell) var(--kurve-schnell);
}
.karte:hover { border-color: var(--linie-stark); box-shadow: var(--hoehe-1); }
.karte-bild {
  aspect-ratio: 4 / 3; background: var(--flaeche-vertieft);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  position: relative;
}
.karte-bild img { width: 100%; height: 100%; object-fit: cover; }
.karte-bild .kein-bild {
  color: var(--tinte-3); font-size: var(--schrift-12); line-height: var(--zeile-12);
}
.karte-text {
  padding: var(--raum-12); display: flex; flex-direction: column;
  gap: var(--raum-4); flex: 1;
  /* min-width: 0 ist hier kein Feinschliff, sondern die Bedingung dafuer,
     dass die Auslassung im Titel ueberhaupt greift: Ein Flexkasten schrumpft
     von sich aus nicht unter die Mindestbreite seines Inhalts. Ohne diese
     Zeile war die Textspalte auf einem 390er Schirm 423 Pixel breit -
     nachgemessen -, und Titel wie Beschreibung liefen aus der Karte. */
  min-width: 0;
}
/* Titel eine Zeile mit Auslassung - sonst springt die Kachelhoehe je nach
   Titellaenge, und ein Raster aus ungleich hohen Kacheln liest sich schlecht. */
.karte-titel {
  font-family: var(--schrift-familie);
  font-weight: 600; font-size: var(--schrift-16); line-height: var(--zeile-16);
  margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.karte-titel a { color: inherit; text-decoration: none; }
/* Die ganze Kachel ist ein Klickziel, ohne dass die Kachel selbst ein <a>
   wird - sonst laegen Merkknopf und Ortslink darin verschachtelt, und das ist
   ungueltiges HTML. */
.karte-titel a::after { content: ""; position: absolute; inset: 0; }
.karte-preis {
  font-weight: 600; font-size: var(--schrift-16); line-height: var(--zeile-16);
  font-variant-numeric: tabular-nums; margin: 0;
}
/* Zwei Zeilen Beschreibung. Bei Kleinanzeigen ist der erste Satz oft die
   einzige Angabe, die ueber Zustand und Groesse etwas sagt. */
.karte-schnipsel {
  font-size: var(--schrift-14); line-height: var(--zeile-14); color: var(--tinte-2);
  margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.karte-ort {
  color: var(--tinte-3); font-size: var(--schrift-12); line-height: var(--zeile-12);
  margin: auto 0 0; padding-top: var(--raum-4);
}
.karte-marken { display: flex; gap: var(--raum-4); flex-wrap: wrap; margin-top: var(--raum-4); }

/* Die Fahne steht im Markup im Textteil, liegt im Raster aber auf dem Bild:
   Bezugspunkt ist die Karte, nicht der Textteil, und die Karte faengt oben
   beim Bild an. In der Zeilenvariante wird sie wieder in den Fluss gestellt. */
.fahne {
  position: absolute; top: var(--raum-8); left: var(--raum-8); z-index: 2;
  background: var(--marke-flaeche); color: var(--marke-flaeche-tinte);
  font-size: var(--schrift-12); line-height: var(--zeile-12); font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  padding: var(--raum-2) var(--raum-8); border-radius: var(--rund-xs);
}
.bildzaehler {
  position: absolute; right: var(--raum-8); bottom: var(--raum-8); z-index: 2;
  background: rgba(11, 11, 15, .72); color: #fff;
  font-size: var(--schrift-12); line-height: var(--zeile-12); font-weight: 500;
  font-variant-numeric: tabular-nums;
  padding: var(--raum-2) var(--raum-8); border-radius: var(--rund-voll);
}
/* Der Merkknopf ist vom Klickziel der Kachel ausgenommen und hat 48 Pixel
   Trefferflaeche, auch wenn das Herz kleiner aussieht. */
.merken {
  position: absolute; top: var(--raum-4); right: var(--raum-4); z-index: 3;
  width: var(--ziel); height: var(--ziel); display: grid; place-items: center;
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--rund-voll); cursor: pointer; padding: 0;
  font-size: var(--schrift-18); color: var(--tinte-3);
  transition: color var(--zeit-schnell) var(--kurve-schnell);
}
.merken:hover { color: var(--marke-link); border-color: var(--linie-stark); }
.merken[aria-pressed="true"] {
  background: var(--marke); border-color: var(--marke); color: #fff;
}

/* Auf dem Telefon wird aus der Kachel eine ZEILE: Bild links 108 mal 81,
   Text rechts (Spec E2, Listenvariante). Das ist keine Geschmacksfrage - mit
   Vollbreitenbildern war die Startseite 10 900 Pixel lang, und wer sechs
   Anzeigen sehen will, wischt dreissig Sekunden. Als Zeile passen sechs auf
   zwei Bildschirmhoehen. Dichte vor Dekoration. */
@media (max-width: 600px) {
  .gitter { grid-template-columns: 1fr; gap: var(--raum-8); }
  .karte { flex-direction: row; }
  .karte-bild { width: 108px; flex: none; aspect-ratio: 4 / 3; }
  .karte-text { padding: var(--raum-8) var(--raum-12); }
  .karte-schnipsel { -webkit-line-clamp: 2; }
  /* Der Merkknopf sitzt in der Zeile nicht mehr auf dem Bild, sondern rechts
     am Text - auf 108 Pixel Bildbreite verdeckt er sonst das halbe Foto. */
  .merken { top: 50%; transform: translateY(-50%); right: 0; }
  .bildzaehler { display: none; }
  .fahne {
    position: static; display: inline-block; margin-bottom: var(--raum-4);
    align-self: flex-start;
  }
  .karte-text { padding-right: var(--ziel); }
}

/* ------------------------------------------------------------ Anzeigenseite */
.zweispalt { display: grid; gap: var(--raum-24); grid-template-columns: minmax(0,1fr) 340px; }
@media (max-width: 1023px) { .zweispalt { grid-template-columns: 1fr; } }

.galerie { display: grid; gap: var(--raum-8); }
.galerie-gross {
  background: var(--flaeche-vertieft); border-radius: var(--rund-md);
  overflow: hidden; aspect-ratio: 3 / 2;
}
.galerie-gross img { width: 100%; height: 100%; object-fit: contain; }
.galerie-reihe { display: flex; gap: var(--raum-8); flex-wrap: wrap; }
.galerie-reihe button {
  width: 74px; height: 58px; padding: 0; overflow: hidden; cursor: pointer;
  border: 2px solid var(--linie); border-radius: var(--rund-sm);
  background: var(--flaeche-vertieft);
}
.galerie-reihe button[aria-current="true"] { border-color: var(--marke-link); }
.galerie-reihe img { width: 100%; height: 100%; object-fit: cover; }

.preisschild {
  font-family: var(--schrift-display);
  font-size: var(--schrift-30); line-height: var(--zeile-30);
  letter-spacing: var(--spur-30); font-weight: 600;
  font-variant-numeric: tabular-nums; margin: 0;
}
/* Key-Value statt Fliesstext: Wer eine Sache prueft, sucht einen Wert, er
   liest keinen Absatz. */
.merkmale { display: grid; gap: 0; margin: var(--raum-16) 0 0; }
.merkmale div {
  display: flex; justify-content: space-between; gap: var(--raum-16);
  padding: var(--raum-8) 0; border-bottom: 1px solid var(--linie);
  font-size: var(--schrift-14); line-height: var(--zeile-14);
}
.merkmale div:last-child { border-bottom: 0; }
.merkmale dt { color: var(--tinte-3); }
.merkmale dd { margin: 0; font-weight: 500; text-align: right; color: var(--tinte); }
.beschreibung { white-space: pre-wrap; color: var(--tinte-2); }

.marken-liste { display: flex; gap: var(--raum-4); flex-wrap: wrap; margin-top: var(--raum-8); }
.schlagwort {
  background: var(--flaeche-gedaempft); border: 1px solid var(--linie);
  border-radius: var(--rund-voll); padding: var(--raum-2) var(--raum-12);
  font-size: var(--schrift-12); line-height: var(--zeile-12);
  color: var(--tinte-2); text-decoration: none;
}
.schlagwort:hover { border-color: var(--linie-stark); color: var(--tinte); }

/* Der Sicherheitsblock steht DIREKT ueber dem Kontaktknopf, nicht im Fuss
   (Spec E7). Wer gerade schreiben will, ist der Einzige, den der Hinweis noch
   erreicht - im Fuss liest ihn niemand. */
.sicherheitsblock {
  background: var(--warn-grund); border: 1px solid var(--warn);
  border-radius: var(--rund-sm); padding: var(--raum-12) var(--raum-16);
  color: var(--warn); font-size: var(--schrift-14); line-height: var(--zeile-14);
  margin-bottom: var(--raum-12);
}
.sicherheitsblock ul { margin: var(--raum-8) 0 0; padding-left: var(--raum-20); }
.sicherheitsblock li { margin: var(--raum-4) 0; }
.sicherheitsblock a { color: inherit; }

/* Verkaeuferbox: Verhaltensmarken statt Sterneschnitt. Ein 4,8-Schnitt aus
   drei Bewertungen sagt nichts; "Antwortet meist am selben Tag" schon. */
.verkaeufer { display: flex; gap: var(--raum-12); align-items: flex-start; }
.avatar {
  width: 48px; height: 48px; flex: none; border-radius: var(--rund-voll);
  background: var(--marke-flaeche); color: var(--marke-flaeche-tinte);
  display: grid; place-items: center;
  font-size: var(--schrift-18); font-weight: 600;
}

/* ------------------------------------------------------------------ Filter */
.mit-filter {
  display: grid; gap: var(--raum-24);
  grid-template-columns: var(--filterspalte) minmax(0, 1fr);
}
@media (max-width: 900px) { .mit-filter { grid-template-columns: 1fr; } }
.filter { display: grid; gap: var(--raum-20); align-content: start; }
@media (min-width: 901px) {
  .filter {
    position: sticky; top: var(--raum-80);
    max-height: calc(100vh - var(--raum-80) - var(--raum-24)); overflow-y: auto;
  }
}
.filter fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: var(--raum-8); }
.filter legend {
  font-size: var(--schrift-12); line-height: var(--zeile-12); font-weight: 700;
  color: var(--tinte-3); text-transform: uppercase; letter-spacing: .06em;
  padding: 0 0 var(--raum-4);
}
label.wahl {
  display: flex; gap: var(--raum-8); align-items: center;
  font-size: var(--schrift-14); line-height: var(--zeile-14);
  min-height: var(--ziel); cursor: pointer;
}
label.wahl input { flex: none; }

.filter label.wahl {
  display: flex; gap: var(--raum-8); align-items: center;
  font-size: var(--schrift-14); line-height: var(--zeile-14);
  min-height: 32px; cursor: pointer;
}
.spanne { display: flex; gap: var(--raum-8); align-items: center; }

/* Chipleiste aller aktiven Filter ueber den Treffern, mit Kreuz je Chip und
   "Alle zuruecksetzen" (Spec E4). Ohne sie weiss niemand, warum er nur drei
   Treffer sieht. */
.filterchips {
  display: flex; gap: var(--raum-8); flex-wrap: wrap; align-items: center;
  margin-bottom: var(--raum-16);
}
.chip {
  display: inline-flex; align-items: center; gap: var(--raum-4);
  background: var(--marke-flaeche); color: var(--marke-flaeche-tinte);
  border: 1px solid transparent; border-radius: var(--rund-voll);
  padding: var(--raum-4) var(--raum-12); text-decoration: none;
  font-size: var(--schrift-12); line-height: var(--zeile-12); font-weight: 500;
  min-height: 32px;
}
.chip:hover { color: var(--marke-flaeche-tinte); border-color: var(--marke-link); }
.chip .weg { font-weight: 700; opacity: .7; }
.chip-still { background: transparent; color: var(--tinte-2); border-color: var(--linie-stark); }
.chip-still:hover { color: var(--tinte); }

/* ---------------------------------------------------------------- Blaettern */
/* Echte Links, kein "Mehr laden" - sonst kommt der Crawler nicht auf Seite 2. */
.blaettern {
  display: flex; gap: var(--raum-4); justify-content: center; flex-wrap: wrap;
  margin-top: var(--raum-32);
}
.blaettern a, .blaettern span {
  min-width: var(--ziel); min-height: var(--ziel);
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 var(--raum-12);
  border: 1px solid var(--linie-stark); border-radius: var(--rund-sm);
  text-decoration: none; color: var(--tinte);
  font-size: var(--schrift-14); font-variant-numeric: tabular-nums;
}
.blaettern a:hover { background: var(--flaeche-gedaempft); color: var(--tinte); }
.blaettern .jetzt {
  background: var(--marke); border-color: var(--marke); color: #fff; font-weight: 600;
}

/* --------------------------------------------------------------- Formulare */
.formular { display: grid; gap: var(--raum-20); max-width: 640px; }
.formular.breit { max-width: none; }
.feldpaar { display: grid; gap: var(--raum-16); grid-template-columns: 1fr 1fr; }
@media (max-width: 620px) { .feldpaar { grid-template-columns: 1fr; } }
/* Beschriftung UEBER dem Feld, Hinweis darunter (Spec E9). Ein Label im Feld
   verschwindet beim Tippen - genau dann, wenn man es braucht. */
.feld > label, .feld > .beschriftung {
  display: block; font-weight: 500;
  font-size: var(--schrift-14); line-height: var(--zeile-14);
  margin-bottom: var(--raum-4);
}
.feld .hilfe {
  font-size: var(--schrift-12); line-height: var(--zeile-12);
  color: var(--tinte-3); margin: var(--raum-4) 0 0;
}
.schmal { max-width: 460px; margin: 0 auto; }

/* Anmelden, Registrieren, Passwort: eine Aufgabe, eine Tafel. Ohne Rahmen
   schwebt das Formular auf dem Seitengrund, und weil das Feld dieselbe
   Flaeche hatte wie der Grund, war ueberhaupt nichts mehr abgegrenzt. */
.zugangstafel { padding: var(--raum-32); }
@media (max-width: 480px) { .zugangstafel { padding: var(--raum-20); } }
.zugangstafel h1 { margin-bottom: var(--raum-4); }
.zugangstafel > .leise { margin-bottom: var(--raum-24); }

/* Die Nebenwege stehen unter einer Haarlinie und leise: Sie gehoeren zur
   Seite, aber sie sind nicht die Aufgabe. */
.zugang-fuss {
  margin-top: var(--raum-24); padding-top: var(--raum-16);
  border-top: 1px solid var(--linie);
  display: grid; gap: var(--raum-8);
  font-size: var(--schrift-14); line-height: var(--zeile-14); color: var(--tinte-3);
}
.zugang-fuss p { margin: 0; }
.zugang-fuss a { text-decoration: none; font-weight: 500; }
.zugang-fuss a:hover { text-decoration: underline; }

.zaehler {
  font-size: var(--schrift-12); line-height: var(--zeile-12); color: var(--tinte-3);
  text-align: right; margin-top: var(--raum-4); font-variant-numeric: tabular-nums;
}
.zaehler.zuviel { color: var(--schlecht); font-weight: 600; }

/* ------------------------------------------------------------------ Tarife */
.tarifreihe {
  display: grid; gap: var(--raum-16);
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.tarif { display: flex; flex-direction: column; }
.tarif.hervor { border-color: var(--marke); }
.tarif .preis {
  font-family: var(--schrift-display);
  font-size: var(--schrift-30); line-height: var(--zeile-30);
  letter-spacing: var(--spur-30); font-weight: 600;
  font-variant-numeric: tabular-nums; margin: 0;
}
.tarif ul { list-style: none; padding: 0; margin: var(--raum-16) 0; display: grid; gap: var(--raum-8); }
.tarif li {
  padding-left: var(--raum-24); position: relative;
  font-size: var(--schrift-14); line-height: var(--zeile-14);
}
.tarif li::before { content: "✓"; position: absolute; left: 0; color: var(--gut); font-weight: 700; }
.tarif li.aus { color: var(--tinte-3); }
.tarif li.aus::before { content: "—"; color: var(--linie-stark); }
.tarif .knopf, .tarif .knopf-still { margin-top: auto; }

/* ---------------------------------------------------------------- Tabellen */
.tabellenrahmen { overflow-x: auto; border: 1px solid var(--linie); border-radius: var(--rund-md); }
table { border-collapse: collapse; width: 100%; font-size: var(--schrift-14); }
th, td { text-align: left; padding: var(--raum-12) var(--raum-16); border-bottom: 1px solid var(--linie); }
td { color: var(--tinte-2); line-height: var(--zeile-14); }
th {
  background: var(--flaeche-gedaempft); font-size: var(--schrift-12);
  line-height: var(--zeile-12); text-transform: uppercase; letter-spacing: .06em;
  color: var(--tinte-3); white-space: nowrap; font-weight: 600;
}
tbody tr:last-child td { border-bottom: 0; }
td.zahl, th.zahl { text-align: right; font-variant-numeric: tabular-nums; }

/* Neben jeder Farbe steht ein Wort. Wer Rot und Gruen nicht unterscheiden
   kann, liest sonst gar nichts. */
.marke-klein {
  display: inline-block; padding: var(--raum-2) var(--raum-8);
  border-radius: var(--rund-xs); border: 1px solid;
  font-size: var(--schrift-12); line-height: var(--zeile-12); font-weight: 600;
}
.m-gut      { background: var(--gut-grund);        color: var(--gut);      border-color: var(--gut); }
.m-warn     { background: var(--warn-grund);       color: var(--warn);     border-color: var(--warn); }
.m-schlecht { background: var(--schlecht-grund);   color: var(--schlecht); border-color: var(--schlecht); }
.m-still    { background: var(--flaeche-gedaempft); color: var(--tinte-3); border-color: var(--linie); }
.m-ki       { background: var(--ki-flaeche);       color: var(--ki);       border-color: var(--ki); }

/* -------------------------------------------------------------- Kennzahlen */
.zahlenreihe { display: grid; gap: var(--raum-12); grid-template-columns: repeat(auto-fit, minmax(166px, 1fr)); }
.zahl-tafel {
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--rund-sm); padding: var(--raum-16);
}
.zahl-tafel .wert {
  font-family: var(--schrift-display);
  font-size: var(--schrift-24); line-height: var(--zeile-24);
  letter-spacing: var(--spur-24); font-weight: 600;
  font-variant-numeric: tabular-nums; margin: 0;
}
.zahl-tafel .was {
  font-size: var(--schrift-12); line-height: var(--zeile-12);
  color: var(--tinte-3); margin: 0;
}

.verlauf { display: flex; align-items: flex-end; gap: var(--raum-2); height: 110px; margin-top: var(--raum-12); }
.verlauf div { flex: 1; background: var(--marke); border-radius: 2px 2px 0 0; min-height: 2px; }
.verlauf div:hover { background: var(--marke-tief); }

/* ------------------------------------------------------------- Nachrichten */
.faden { display: grid; gap: var(--raum-8); margin: var(--raum-20) 0; }
.blase {
  max-width: 74%; padding: var(--raum-12) var(--raum-16); border-radius: var(--rund-md);
  font-size: var(--schrift-14); line-height: var(--zeile-14);
}
.blase.von-mir { margin-left: auto; background: var(--marke); color: #fff; border-bottom-right-radius: var(--raum-4); }
.blase.von-dir { background: var(--flaeche-gedaempft); border: 1px solid var(--linie); border-bottom-left-radius: var(--raum-4); }
.blase .wann { font-size: var(--schrift-12); opacity: .8; display: block; margin-top: var(--raum-4); }
.blase p { margin: 0; white-space: pre-wrap; }

.gespraechsliste { display: grid; gap: var(--raum-8); }
.gespraech {
  display: flex; gap: var(--raum-12); align-items: center; padding: var(--raum-12);
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--rund-md); text-decoration: none; color: var(--tinte);
  min-height: var(--ziel);
}
.gespraech:hover { border-color: var(--linie-stark); color: var(--tinte); }
.gespraech img { width: 56px; height: 56px; object-fit: cover; border-radius: var(--rund-sm); flex: none; }

/* ----------------------------------------------------------- Textwerkstatt */
/* Cyan und ein Funken, nie die Markenfarbe: Was die Textwerkstatt schreibt,
   ist ein Vorschlag und keine Aktion. Und nichts davon ist unwiderruflich -
   uebernommen wird Feld fuer Feld. */
.ki-kasten {
  border: 1px solid var(--ki); background: var(--ki-flaeche);
  border-radius: var(--rund-md); padding: var(--raum-16);
  color: var(--ki);
}
.ki-kasten h3, .ki-kasten p { color: var(--ki); }
.ki-marke {
  display: inline-flex; align-items: center; gap: var(--raum-4);
  font-size: var(--schrift-12); line-height: var(--zeile-12); font-weight: 700;
  color: var(--ki); text-transform: uppercase; letter-spacing: .06em;
}
.ki-vorschlag { display: grid; gap: var(--raum-12); margin-top: var(--raum-16); }
.ki-vorschlag .stueck {
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--rund-sm); padding: var(--raum-12); color: var(--tinte);
}
.ki-vorschlag .stueck h4 {
  margin: 0 0 var(--raum-4); font-size: var(--schrift-12); line-height: var(--zeile-12);
  text-transform: uppercase; letter-spacing: .06em; color: var(--tinte-3);
}
.ki-vorschlag .stueck p {
  margin: 0; color: var(--tinte);
  font-size: var(--schrift-14); line-height: var(--zeile-14);
}

/* Kein rotierender Kreisel fuer die Textwerkstatt, sondern ein Puls auf der
   KI-Farbe (Spec D5). Ein Kreisel behauptet Fortschritt, den niemand misst. */
.dreht {
  display: inline-block; width: 10px; height: 10px; border-radius: var(--rund-voll);
  background: currentColor; animation: puls 900ms ease-in-out infinite;
}
@keyframes puls { 0%, 100% { opacity: .25; transform: scale(.8); } 50% { opacity: 1; transform: scale(1); } }

/* Skelett statt Kreisel fuer Inhaltsflaechen (Spec E9). */
.skelett { background: var(--flaeche-vertieft); border-radius: var(--rund-xs); animation: schimmer 1400ms linear infinite; }
@keyframes schimmer { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

/* -------------------------------------------------------------------- Fuss */
.fuss { border-top: 1px solid var(--linie); background: var(--flaeche); margin-top: var(--raum-64); }
.fuss-bahn {
  display: grid; gap: var(--raum-32); padding-top: var(--raum-40); padding-bottom: var(--raum-24);
  /* Fuenf Spalten, seit "Wissen" dazugekommen ist. Die erste ist breiter,
     weil dort die Wortmarke steht. */
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
}
@media (max-width: 1100px) { .fuss-bahn { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (max-width: 780px) { .fuss-bahn { grid-template-columns: 1fr 1fr; } }
.fuss h2 {
  font-family: var(--schrift-familie);
  font-size: var(--schrift-12); line-height: var(--zeile-12);
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--tinte-3); margin-bottom: var(--raum-12); font-weight: 600;
}
.fuss ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--raum-8); }
.fuss a { color: var(--tinte-2); text-decoration: none; font-size: var(--schrift-14); line-height: var(--zeile-14); }
.fuss a:hover { color: var(--marke-link); text-decoration: underline; }
.fuss-marke { width: 96px; height: auto; display: block; color: var(--marke-link); margin-bottom: var(--raum-8); }
.fuss-unten {
  border-top: 1px solid var(--linie); padding-top: var(--raum-16); padding-bottom: var(--raum-24);
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--raum-16); flex-wrap: wrap;
}

/* -------------------------------------------------------------------- Rest */
/* Leerzustand: ein Satz Diagnose, ein Satz Weg, genau eine Aktion (Spec H). */
.leerstand {
  text-align: center; padding: var(--raum-48) var(--raum-20); color: var(--tinte-3);
  display: grid; gap: var(--raum-8); justify-items: center;
}
.leerstand h2 { color: var(--tinte); margin: 0; }
.leerstand p { max-width: 52ch; margin: 0; font-size: var(--schrift-14); line-height: var(--zeile-14); }

.fliesstext { max-width: var(--lesebreite); }
.fliesstext h2 { margin-top: var(--raum-32); }
.fliesstext h3 { margin-top: var(--raum-24); }
.fliesstext ul, .fliesstext ol { padding-left: var(--raum-24); }
.fliesstext li { margin: var(--raum-8) 0; }

.krumen {
  font-size: var(--schrift-12); line-height: var(--zeile-12);
  color: var(--tinte-3); padding: var(--raum-16) 0 0;
}
.krumen a { color: var(--tinte-3); }
.krumen a:hover { color: var(--marke-link); }

details.tafel summary {
  cursor: pointer; font-size: var(--schrift-14);
  min-height: var(--ziel); display: flex; align-items: center;
}
details.tafel summary::marker { color: var(--tinte-3); }

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .92em; background: var(--flaeche-gedaempft);
  border: 1px solid var(--linie); border-radius: var(--rund-xs);
  padding: 1px var(--raum-4);
}

/* Wer weniger Bewegung angibt, bekommt weniger Bewegung: alle Verschiebungen
   werden zu Opazitaetswechseln unter 100 ms, das Schimmern zu einer ruhigen
   Flaeche. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .skelett, .dreht { animation: none; opacity: 1; }
}

/* ------------------------------------------------------ Ratgeber & Glossar
   Vier Bausteine, die es nur auf den Wissensseiten gibt. Sie benutzen
   ausschliesslich die Staffeln aus farben.css - kein eigener Farbwert, kein
   krummer Abstand. */
.fuehrung {
  max-width: var(--lesebreite);
  font-size: var(--schrift-18); line-height: var(--zeile-18);
  color: var(--tinte-2); margin: var(--raum-12) 0 0;
}

.wissensreihe {
  display: grid; gap: var(--raum-16);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.wissensreihe > .tafel + .tafel { margin-top: 0; }
.wissensreihe .klein-h {
  font-size: var(--schrift-16); line-height: var(--zeile-16);
  margin: 0 0 var(--raum-8);
}

/* Die Prueflisten. Der Haken steht in der Randspalte, damit der Text
   umbricht, ohne unter das Zeichen zu rutschen. */
ul.haken { list-style: none; padding-left: var(--raum-24); max-width: var(--lesebreite); }
ul.haken li { position: relative; margin: var(--raum-8) 0; }
ul.haken li::before {
  content: "✓"; position: absolute; left: calc(-1 * var(--raum-24));
  color: var(--marke); font-weight: 600;
}

/* Frage und Antwort. Als <dl>, weil es genau das ist - und weil
   Bildschirmleser die Zuordnung dann vorlesen. */
dl.fragen { max-width: var(--lesebreite); margin: var(--raum-16) 0 0; }
dl.fragen dt { font-weight: 600; margin-top: var(--raum-16); }
dl.fragen dd { margin: var(--raum-4) 0 0; color: var(--tinte-2); }

/* `.bahn` zentriert sich selbst (margin: 0 auto). Steht `.fliesstext` auf
   demselben Element, gilt dessen schmalere Lesebreite - und die zentriert
   sich mit. Der Text rutscht dann in die Mitte, waehrend Ueberschriften und
   Karten daneben am linken Rand stehen; auf einem breiten Bildschirm sieht
   das aus wie ein Fehler, und es ist auch einer.

   Also: Traegt ein Element beide Klassen, behaelt die Bahn ihre Breite, und
   die Lesebreite gilt fuer die Kinder. Damit steht der Text links, wo alles
   andere auch steht. */
.bahn.fliesstext { max-width: var(--bahn); }
.bahn.fliesstext > * { max-width: var(--lesebreite); }

/* Der Punkt, auf dem man gerade steht. Ohne Markierung ist eine Leiste aus
   vierzehn gleich aussehenden Knoepfen eine Liste, aber keine Navigation -
   man weiss nicht, wo man ist. */
.filter .knopf-still.m-hier {
  background: var(--marke-flaeche);
  border-color: var(--marke);
  color: var(--marke-flaeche-tinte);
  font-weight: 600;
}

/* ------------------------------------------------------------ Bilderablage
   Der Vorgabeknopf des Browsers ("Dateien auswaehlen · Keine ausgewaehlt")
   sieht in jedem Browser anders aus und in keinem nach dieser Seite. Das
   Feld bleibt deshalb bestehen und wird nur unsichtbar - nicht per
   `display:none`, denn damit waere es auch fuer die Tastatur verschwunden.
   Das Etikett davor uebernimmt das Aussehen und die Klickflaeche. */
.dateifeld {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.feld > label.ablage {
  display: flex; gap: var(--raum-12); align-items: center;
  margin: 0; padding: var(--raum-20);
  border: 1px dashed var(--linie-stark); border-radius: var(--rund-md);
  background: var(--flaeche-gedaempft);
  cursor: pointer; transition: border-color .12s, background .12s;
  min-height: var(--ziel);
}
.feld > label.ablage:hover { border-color: var(--marke); background: var(--marke-flaeche); }

/* Die Tastatur muss sehen, wo sie steht. Das Feld ist unsichtbar, also
   traegt das Etikett den Fokusrahmen fuer es mit. */
.dateifeld:focus-visible + .ablage {
  outline: 2px solid var(--marke); outline-offset: 2px;
  border-color: var(--marke);
}

/* Waehrend eine Datei ueber dem Feld haengt. */
.feld > label.ablage.m-drueber {
  border-color: var(--marke); border-style: solid;
  background: var(--marke-flaeche);
}

.ablage-zeichen {
  flex: none; width: 40px; height: 40px; border-radius: var(--rund-voll);
  display: grid; place-items: center;
  background: var(--marke); color: #fff;
  font-size: var(--schrift-20); line-height: 1;
}
.ablage-text { display: grid; gap: 2px; }
.ablage-text strong { font-size: var(--schrift-14); line-height: var(--zeile-14); }

/* Was ausgewaehlt wurde. Ohne diese Liste steht dort "Keine ausgewaehlt",
   auch nachdem man fuenf Bilder angetippt hat - der Browser aktualisiert
   seinen eigenen Text nur bei einer Datei zuverlaessig. */
.dateiliste {
  list-style: none; padding: 0; margin: var(--raum-12) 0 0;
  display: grid; gap: var(--raum-4);
}
.dateiliste li {
  display: flex; gap: var(--raum-8); align-items: center; justify-content: space-between;
  font-size: var(--schrift-12); line-height: var(--zeile-12);
  padding: var(--raum-8) var(--raum-12);
  background: var(--flaeche-gedaempft); border-radius: var(--rund-sm);
}
.dateiliste .groesse { color: var(--tinte-3); font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------- Hochladen
   Der Fortschritt haengt unten am Bildschirm fest, solange etwas laeuft.
   Auf einem Telefon steht der Absendeknopf weit weg von den Bildern - wer
   nicht sieht, dass etwas passiert, drueckt ein zweites Mal. Und genau das
   soll man bei einem Upload nicht tun. */
.hochladen {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--flaeche);
  border-top: 1px solid var(--linie);
  box-shadow: var(--hoehe-2);
  padding: var(--raum-12) var(--raum-20);
  display: grid; gap: var(--raum-8);
}
@media (min-width: 721px) {
  .hochladen {
    left: 50%; right: auto; bottom: var(--raum-24);
    transform: translateX(-50%);
    width: min(520px, calc(100vw - var(--raum-40)));
    border: 1px solid var(--linie); border-radius: var(--rund-md);
  }
}
.hochladen-balken {
  height: 8px; border-radius: var(--rund-voll);
  background: var(--flaeche-gedaempft); overflow: hidden;
}
.hochladen-fuellung {
  height: 100%; width: 0;
  background: var(--marke); border-radius: var(--rund-voll);
  transition: width .18s linear;
}
.hochladen-text {
  margin: 0; font-size: var(--schrift-14); line-height: var(--zeile-14);
  color: var(--tinte-2); font-variant-numeric: tabular-nums;
}
@media (prefers-reduced-motion: reduce) {
  .hochladen-fuellung { transition: none; }
}

/* Die Dateiliste: Name links, Zustand rechts. Der Name darf kuerzen, der
   Zustand nie - er ist die Auskunft, auf die man wartet. */
.dateiliste .dateiname {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.dateiliste .groesse { flex: none; }
.dateiliste .groesse.m-gut { color: var(--gut); }