/* ══ FlohmarktZEN – das Gesicht ═════════════════════════════════════════════
   Iris, 08.10.2026, zu P1B.

   WONACH SAH P1A AUS: nach einer Fahrplanauskunft. Titel, Datum, Ort,
   Quelle untereinander, blaue unterstrichene Verweise, zwei Browserfelder
   in Grau. Ein Flohmarkt ist aber kein Datensatz, sondern ein Samstagmorgen
   auf einem Platz – und genau das stand nirgends auf der Seite.

   WONACH ES JETZT AUSSIEHT: nach einer Markttafel. Die Tage laufen als
   grosse Ziffern am linken Rand hinunter, an einer durchgehenden Ockerlinie
   entlang; rechts davon stehen die Märkte dieses Tages mit Ort und
   Anfangszeit. Man liest die Seite wie einen Kalender, nicht wie eine
   Trefferliste.

   DIE VERWANDTSCHAFT, OHNE ABSCHRIFT: eventsZENe ist eine Plakatwand aus
   gekippten Zetteln mit der Achse rechts. Dieselbe Familie – warmes Papier,
   flach, Null-Radius, Grotesk, eine Leitfarbe – aber die andere Hälfte:
   Achse LINKS, nichts gekippt, nichts gekachelt. Eine Wand hängt man an,
   eine Tafel schreibt man an.

   DER EINE BRUCH, UND ER IST LAUT: der Datumsblock tritt als einziges
   Element über die linke Satzkante hinaus in den Aussenrand und schiebt sich
   vor die Ockerlinie. Gebrochen wird damit die Rasterregel „Aussenrand
   grösser als jeder Innenabstand" (runtime/gestaltung/regeln.py). Er leistet
   zweierlei: er macht die Satzkante überhaupt erst sichtbar, weil ein
   einziges Element sie verlässt, und er stellt das Datum vor die Marke –
   bei einem Flohmarkt entscheidet das Datum, nicht der Name. Alles andere
   hält zwei Kanten, sonst wäre der Bruch kein Bruch, sondern Unordnung.

   FARBE: keine neue erfunden. Leitfarbe ist das gebrannte Ocker des Hauses
   (`--akzent`), Gegenfarbe die Tinte (`--text`), der ganze Rest ist Papier
   und Grauwert – rund 60 Papier zu 30 Tinte zu 10 Ocker an der Fläche.
   Grün und Orange kommen nicht vor; die Unterscheidung läuft über
   Helligkeit, nicht über Buntheit.

   GEMESSEN, NICHT BEHAUPTET (08.10.2026, WCAG-2.1-Formel gegen das
   Hauspapier #f5f2ec): `--muted` #7b766d hält nur **4,04:1** und `--akzent`
   #8a6d3b nur **4,34:1** – beide unter den geforderten 4,5:1. Das ist ein
   Befund an haus.css, nicht an dieser Seite, und die Palette des Hauses
   ändert nicht dieses Organ. Darum werden beide Werte HIER um 12 Prozent in
   Richtung Tinte gezogen: 4,73:1 und 5,01:1, mit dem Auge nicht vom
   Original zu unterscheiden. Abgeleitet statt abgeschrieben – ändert Simon
   die Palette, zieht diese Seite mit.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* Zuerst der Hauswert als Rückfall, darunter die abgedunkelte Ableitung.
     Kennt ein Browser `color-mix` nicht, fällt die zweite Zeile weg und der
     Hauswert bleibt stehen – nie eine leere Farbe. */
  --floh-still: var(--muted);
  --floh-still: color-mix(in srgb, var(--muted) 88%, var(--text));
  --floh-ocker: var(--akzent);
  --floh-ocker: color-mix(in srgb, var(--akzent) 88%, var(--text));

  /* Die Satzkante links. Ein Wert, an dem Kopfband, Blatt und Fuss hängen –
     drei Elemente an einer Kante statt drei eigene Polster. */
  --floh-kante: clamp(20px, 4vw, 56px);

  /* Wie weit der Datumsblock in den Aussenrand tritt. Immer kleiner als
     `--floh-kante`, sonst wäre es kein Austritt, sondern ein Überlauf. */
  --floh-austritt: clamp(12px, 2.2vw, 34px);

  /* Die Spur, in der die Tagesziffern laufen. */
  --floh-spur: clamp(84px, 11vw, 148px);
}

body {
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.5;
}

/* Keine unterstrichenen Verweise, nirgends – der Browser setzt sie von
   selbst, also gehört der Reset ans erste Blatt (Simon, 12.07.2026). */
a {
  color: inherit;
  text-decoration: none;
}

/* ── Das Kopfband ──────────────────────────────────────────────────────────
   56 px hoch und nicht mehr. eventsZENe hat am 04.10.2026 gemessen, was ein
   grosszügiger Kopf kostet: bei 430x932 begann der erste Zettel erst bei
   792 von 932 px. Das Thema dieser Seite sind die Märkte, nicht die Marke –
   die Marke muss erkennbar sein, nicht gross. */

.marke {
  background: var(--text);
  color: var(--bg);
}

.marke-innen {
  max-width: 980px;
  margin: 0 auto 0 0;
  padding: 0 var(--floh-kante);
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.wortmarke {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: 0.01em;
  padding: 10px 0;
}

.wortmarke span {
  /* Auf der Tinte darf das Haus-Ocker unverändert stehen: gemessen 3,45:1
     gegen #1f1e1b – zu wenig für Fliesstext, genug für ein Wortzeichen in
     19 px/800, das keine Leseaufgabe hat. Damit es trotzdem nicht
     verschwindet, wird es aufgehellt statt abgedunkelt. */
  color: #c9a46a;
}

.marke-weg {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 0;
}

.marke-weg a {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 8px 14px;
  border: 1px solid rgba(245, 242, 236, 0.38);
  transition: background-color 120ms linear, border-color 120ms linear;
}

.marke-weg a:hover,
.marke-weg a:focus-visible {
  background: var(--bg);
  color: var(--text);
  border-color: var(--bg);
}

.marke-weg a.jetzt {
  background: var(--bg);
  color: var(--text);
  border-color: var(--bg);
}

/* ── Das Blatt: Achse links, der rechte Rand bleibt offen ──────────────────
   Nicht mittig. `margin-right: auto` setzt den Satzspiegel an die linke
   Kante und macht den Rest zur Fläche statt zum Rest (Simons stehende
   Gestaltungsregel). */

.blatt {
  max-width: 980px;
  margin: 0 auto 0 0;
  padding: clamp(26px, 3.4vw, 44px) var(--floh-kante) 72px;
}

/* ── Die Suchleiste ───────────────────────────────────────────────────────
   Eine Zeile auf dem Papier, keine Karte. In P1A stand sie in einem Kasten
   und zerfiel trotzdem in drei Zeilen, weil haus.css jedem Eingabefeld
   `width: 100%` gibt – die Leiste rechnete nicht mit der Handschrift, die
   sie einband. Hier steht die Breite darum ausdrücklich an jedem Feld. */

.suche {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 10px;
  margin: 0 0 clamp(26px, 3vw, 40px);
  padding: 0 0 clamp(22px, 2.6vw, 32px);
  border-bottom: 1px solid var(--line);
}

.suche input[type="text"] {
  flex: 1 1 260px;
  width: auto;
  min-width: 0;
  min-height: 46px;
  padding: 11px 14px;
  border: 1px solid var(--soft-strong);
  border-radius: 0;
  background: var(--card);
  color: var(--text);
  font: inherit;
}

.suche input[type="text"]::placeholder {
  color: var(--floh-still);
}

/* Das Auswahlfeld zeichnet sein Zeichen selbst. `appearance: none` nimmt
   dem Browser seinen grauen Kasten samt blauem Pfeil weg; der Winkel
   daneben ist ein gezeichneter Strich, kein Schriftzeichen und kein Emoji. */
.suche select {
  flex: 0 1 220px;
  width: auto;
  min-width: 0;
  min-height: 46px;
  padding: 11px 38px 11px 14px;
  border: 1px solid var(--soft-strong);
  border-radius: 0;
  background-color: var(--card);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%236c5732' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  color: var(--text);
  font: inherit;
  appearance: none;
  -webkit-appearance: none;
}

.suche input:focus-visible,
.suche select:focus-visible,
.satz input:focus-visible,
.satz select:focus-visible,
.satz textarea:focus-visible {
  outline: 2px solid var(--floh-ocker);
  outline-offset: 1px;
  border-color: var(--floh-ocker);
}

.griff {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 11px 20px;
  border: 1px solid var(--text);
  border-radius: 0;
  background: var(--card);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 120ms linear, color 120ms linear;
}

.griff:hover,
.griff:focus-visible {
  background: var(--text);
  color: var(--bg);
}

.griff.voll {
  background: var(--text);
  color: var(--bg);
}

.griff.voll:hover,
.griff.voll:focus-visible {
  background: var(--floh-ocker);
  border-color: var(--floh-ocker);
}

.hinweis {
  margin: 0 0 20px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--floh-ocker);
}

/* ── Die Markttafel ───────────────────────────────────────────────────────
   Ein Tag ist eine Zeile aus zwei Teilen: links der Datumsblock in der
   Spur, rechts die Märkte an der Ockerlinie. Die Linie entsteht als
   `border-left` an jedem Inhaltsblock – aufeinanderfolgende Tage setzen sie
   nahtlos fort, ohne dass irgendwo ein Strich eigens gezeichnet wird. */

.tafel {
  display: block;
}

.tag {
  display: grid;
  grid-template-columns: var(--floh-spur) minmax(0, 1fr);
  /* Bewusst KEIN `align-items: start`. Mit `start` ist der Inhaltsblock nur
     so hoch wie sein eigener Text, und damit reisst die Ockerlinie zwischen
     zwei Tagen ab – am Abzug bei 1440 gemessen: ein Loch von 30 px unter
     einem Tag mit nur einem Markt. Gestreckt laufen die Linien zweier Tage
     nahtlos ineinander, und aus Strichen wird eine Spur. */
}

.tag-marke {
  /* DER BRUCH: dieser eine Block verlässt die Satzkante nach links.
     Linksbündig, nicht rechtsbündig an der Ockerlinie – rechtsbündig war der
     erste Entwurf, und am Abzug bei 1440 war vom Austritt nichts zu sehen:
     eine einstellige Ziffer klebte an der Linie und stand damit weiter
     RECHTS als die Suchleiste darüber. Linksbündig stehen alle Ziffern auf
     derselben Flucht, 32 px links der Satzkante, und der Bruch ist das, was
     er sein soll – sichtbar. Gemessen im echten Chrome: Datumsblock 24 px,
     Satzkante 56 px, Textkante 204 px. */
  margin-left: calc(-1 * var(--floh-austritt));
  padding: 22px 16px 22px 0;
  text-align: left;
}

.tag-wochentag {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--floh-ocker);
  margin-bottom: 2px;
}

.tag-zahl {
  display: block;
  font-size: clamp(48px, 6.6vw, 96px);
  font-weight: 900;
  letter-spacing: -0.05em;
  line-height: 0.82;
  color: var(--text);
}

.tag-monat {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--floh-still);
}

.tag-anzahl {
  display: block;
  margin-top: 8px;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--floh-still);
}

.tag-inhalt {
  border-left: 2px solid var(--floh-ocker);
  padding: 22px 0 22px clamp(16px, 2.2vw, 30px);
}

.markt + .markt {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.markt-titel {
  margin: 0;
  font-size: clamp(18px, 1.8vw, 24px);
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: 1.2;
  /* Ein Marktname wie „Marché aux puces de Plainpalais (Samstag)" darf eine
     schmale Spalte nicht aufziehen. */
  overflow-wrap: anywhere;
}

.markt-wo {
  margin: 7px 0 0;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 15px;
}

.markt-wann {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--floh-ocker);
}

.markt-ort {
  font-weight: 600;
}

.kanton {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--floh-ocker);
  border: 1px solid var(--floh-ocker);
  padding: 2px 6px;
  white-space: nowrap;
}

.markt-zeit {
  color: var(--floh-still);
}

.markt-fuss {
  margin: 7px 0 0;
  font-size: 12px;
  color: var(--floh-still);
}

.markt-fuss a {
  color: var(--floh-ocker);
  font-weight: 700;
  border-bottom: 1px solid transparent;
  transition: border-color 120ms linear;
}

.markt-fuss a:hover,
.markt-fuss a:focus-visible {
  border-bottom-color: var(--floh-ocker);
}

.leer {
  border-left: 2px solid var(--line);
  padding: 20px 0 20px clamp(16px, 2.2vw, 30px);
  margin: 0;
  max-width: 62ch;
  color: var(--floh-still);
}

/* ── Der Selbsteintrag ────────────────────────────────────────────────────
   Dieselbe Tafel, nur mit einer Spalte: die Beschriftungen stehen klein und
   gesperrt über dem Feld statt davor, damit die Felder eine Flucht bilden
   und das Formular nicht wie ein Behördenblatt aussieht. */

.satz {
  max-width: 560px;
  border-left: 2px solid var(--floh-ocker);
  padding-left: clamp(16px, 2.2vw, 30px);
}

.satz h2 {
  margin: 0 0 10px;
  font-size: clamp(26px, 3.4vw, 40px);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1.02;
}

.satz .vorwort {
  margin: 0 0 26px;
  max-width: 52ch;
  color: var(--floh-still);
}

.feld {
  display: block;
  margin-bottom: 18px;
}

.feld > span {
  display: block;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--floh-still);
}

/* `.satz .feld input` und nicht `.feld input`: haus.css setzt die Felder über
   `input:not([type="checkbox"]):not([type="radio"])` und kommt damit auf
   dieselbe Gewichtsklasse wie zwei Klassen. Mit nur einer Klasse verliert die
   Regel hier – am Abzug waren die Felder des Formulars rund und 42 px hoch,
   während die Suchleiste daneben flach war, weil sie zufällig ein Attribut
   mehr im Selektor trug. Zwei Klassen wiegen gleich schwer, und bei Gleichstand
   gewinnt die später geladene Datei. Gefunden am Bild, nicht im Quelltext. */
.satz .feld input,
.satz .feld textarea {
  width: 100%;
  min-height: 46px;
  padding: 11px 14px;
  border: 1px solid var(--soft-strong);
  border-radius: 0;
  background: var(--card);
  color: var(--text);
  font: inherit;
}

.satz .feld.kurz input {
  max-width: 180px;
}

.satz .feld textarea {
  min-height: 110px;
  resize: vertical;
}

.fehler {
  margin: 0 0 20px;
  padding: 12px 14px;
  border-left: 3px solid var(--warn);
  background: var(--card);
  color: var(--text);
}

/* ── Der Fuss ─────────────────────────────────────────────────────────────── */

.fuss {
  max-width: 980px;
  margin: 0 auto 0 0;
  padding: 24px var(--floh-kante) 48px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--floh-still);
}

.fuss p {
  margin: 0 0 4px;
  max-width: 76ch;
}

/* ── Telefon ──────────────────────────────────────────────────────────────
   Simon steht an seinem Telefon, also ist 430 px kein Nachgedanke. Die Spur
   kippt in einen Balken: Wochentag, Ziffer und Monat stehen in einer Zeile,
   darunter die Märkte über die ganze Breite. Der Austritt in den Aussenrand
   bleibt – er ist bei 430 px sogar deutlicher, weil die Kante näher liegt. */

@media (max-width: 720px) {
  .tag {
    grid-template-columns: minmax(0, 1fr);
  }

  .tag-marke {
    display: flex;
    align-items: baseline;
    gap: 10px;
    text-align: left;
    padding: 20px 0 8px;
    border-bottom: 2px solid var(--floh-ocker);
  }

  .tag-zahl {
    font-size: 40px;
    line-height: 1;
  }

  .tag-monat,
  .tag-wochentag {
    margin: 0;
  }

  .tag-anzahl {
    margin: 0 0 0 auto;
    padding-left: 10px;
  }

  .tag-inhalt {
    border-left: none;
    padding: 18px 0 8px;
  }

  .leer {
    border-left: none;
    padding-left: 0;
  }

  .satz {
    border-left: none;
    padding-left: 0;
  }

  /* Gemessen am Abzug bei 430x932: mit je einer eigenen Zeile für Feld,
     Auswahl und Knöpfe begann der erste Markt erst bei 439 von 932 px –
     fast die halbe erste Ansicht war Suche. Feld und Auswahl teilen sich
     darum eine Zeile; danach 382 px. */
  .suche input[type="text"] {
    flex: 1 1 180px;
  }

  .suche select {
    flex: 1 1 130px;
  }

  .griff {
    flex: 1 1 140px;
  }
}

/* ── Wer keine Bewegung will, bekommt keine ───────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}