/* ═══════════════════════════════════════════════════════════════════════════
   Stile.

   Ein Stil bestimmt die Form: Typografie, Versalien, Kanten, Zierrat. Die
   Farbwelt (themes.css) bestimmt nur die Farbe. Beide sind frei kombinierbar,
   deshalb liegen sie getrennt.

   "Redaktion" ist der Grundzustand und steht bereits in main.css — hier
   erscheint nur, was davon abweicht.

   Diese Datei wird NACH themes.css eingebunden.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══ Baustelle ═════════════════════════════════════════════════════════════
   Angelehnt an technische Zeichnung und Baustellenbeschilderung: kondensierte
   Versalschrift wie auf einem Bauschild, kräftigeres Planraster, Positions-
   nummern im Kasten, ein Absperrband als einzige Fläche.

   Wichtig ist die Dosierung. Das Absperrband erscheint genau zweimal auf der
   Seite und ist 6 px hoch; Emojis, Warnschilder und Farbflächen gibt es nicht.
   Der Unterschied zum früheren Entwurf liegt allein in der Zurückhaltung.
   ══════════════════════════════════════════════════════════════════════════ */

[data-style="baustelle"] {
  --font-display: var(--condensed);
  --font-body: var(--sans);
  --font-ui: var(--sans);
  /* Das Planraster ist die Signatur des Stils und darf kräftiger sein. */
  --grid-opacity: .075;
}

/* ── Auszeichnung: kondensiert, versal, eng ───────────────────────────────── */

[data-style="baustelle"] .masthead-title,
[data-style="baustelle"] .gate-title {
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: -.005em;
  /* Oswald setzt die Umlautpunkte über Versalien besonders hoch: Ein Ü braucht
     1.04em über der Grundlinie. Mit engerem Durchschuss stehen die Punkte einer
     umgebrochenen Zeile mitten im Buchstaben darüber — auf „MUSIK / WÜNSCHE"
     genau im U. */
  line-height: 1.12;
}

/* Oswald hat keine Kursive. Statt einer verzerrten Fälschung tritt hier eine
   gesperrte Versalzeile an ihre Stelle. */
[data-style="baustelle"] .masthead-sub {
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: clamp(.9rem, 2.4vw, 1.2rem);
  font-weight: 500;
  color: var(--ink-muted);
}

[data-style="baustelle"] .section-title,
[data-style="baustelle"] .entry-name,
[data-style="baustelle"] .overlay-title,
[data-style="baustelle"] .state-title,
[data-style="baustelle"] .gate-title {
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: .005em;
}

[data-style="baustelle"] .btn {
  text-transform: uppercase;
  letter-spacing: .09em;
  font-weight: 500;
}

/* ── Absperrband ──────────────────────────────────────────────────────────────
   Diagonale Bänder aus Akzent und Tusche, damit es sich in jeder Farbwelt
   selbst einfärbt statt ein festes Gelb mitzubringen. */

[data-style="baustelle"] .masthead::after,
[data-style="baustelle"] .site-foot::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 6px;
  background:
    repeating-linear-gradient(-45deg,
      var(--accent) 0 9px,
      transparent 9px 18px),
    var(--ink);
  z-index: 1;
}

[data-style="baustelle"] .site-foot {
  position: relative;
  border-top: 0;
}

/* ── Positionsnummer im Kasten, wie die Bezifferung auf einem Plan ────────── */

[data-style="baustelle"] .label-num {
  display: inline-block;
  border: 1px solid currentColor;
  padding: 0 .3em;
  margin-right: .15em;
  line-height: 1.4;
}

/* ── Beiträge als markierte Blätter ───────────────────────────────────────── */

[data-style="baustelle"] .entry {
  border-left: 3px solid var(--accent);
}

/* ── Beamer-Ansicht ──────────────────────────────────────────────────────── */

[data-style="baustelle"] .slide-name {
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 0;
}
[data-style="baustelle"] .wall-state h1 {
  text-transform: uppercase;
  font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Baustelle — technische Zeichnung statt Warnbaken

   Zwei Entwürfe davor lagen daneben. Der erste war zu zurückhaltend, der
   zweite zu laut: Absperrband und ein Raster über die ganze Seite. Beides
   war die falsche Vorstellung von Baustelle — Warnbaken und Flatterband
   gehören zur Absperrung, nicht zur Bauleitung.

   Dieser Entwurf nimmt sich stattdessen die Unterlagen zum Vorbild, mit denen
   Bauingenieure tatsächlich arbeiten: technische Zeichnungen. Plankopf,
   Passermarken, Bemaßung, Positionsnummern, Monospace für alles Gemessene.
   Präzise und ruhig — und dadurch modern, statt nach Verkleidung auszusehen.
   ═══════════════════════════════════════════════════════════════════════════ */

[data-style="baustelle"] {
  /* Für alles Gemessene: Datum, Nummern, Beschriftungen am Plan. Systemschrift,
     also keine zusätzliche Ladezeit. */
  --technisch: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
  --grid-opacity: .06;
}

/* ── Absperrband entfernen ──────────────────────────────────────────────────
   Die diagonalen Streifen aus den früheren Entwürfen sind ersatzlos weg. */

[data-style="baustelle"] body::before,
[data-style="baustelle"] .masthead::after,
[data-style="baustelle"] .site-foot::before { display: none; }
[data-style="baustelle"] body { padding-top: 0; }

/* ── Plankopf ───────────────────────────────────────────────────────────────
   Die Kopfzeile mit Bezeichnung, Linie und Datum wird zum Schriftfeld, wie es
   auf jeder technischen Zeichnung unten rechts steht: Zellen mit Rahmen,
   Angaben in Monospace. Das ist das „Baustellenschild" — nur eben das, was
   ein Bauleiter wirklich in der Hand hat. */

[data-style="baustelle"] .masthead-meta {
  border: 1px solid var(--ink);
  padding: 0;
  gap: 0;
  align-items: stretch;
}
[data-style="baustelle"] .masthead-meta > * {
  padding: .5rem .875rem;
  font-family: var(--technisch);
  font-size: .6875rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
[data-style="baustelle"] .masthead-meta > * + * { border-left: 1px solid var(--ink); }
/* Die Trennlinie zwischen den Zellen übernimmt der Rahmen. */
[data-style="baustelle"] .masthead-meta .rule { display: none; }
[data-style="baustelle"] .masthead-meta .label:first-child {
  background: var(--ink);
  color: var(--paper);
  font-weight: 600;
}
[data-style="baustelle"] .masthead-meta .back-link { color: var(--ink-soft); }

/* ── Passermarken ───────────────────────────────────────────────────────────
   Die dünnen Winkel an den Ecken, an denen ein Plan ausgerichtet wird. Vier
   feine Linien — mehr Technik pro Pixel gibt es kaum. */

[data-style="baustelle"] .masthead { position: relative; }
[data-style="baustelle"] .masthead::before {
  /* Das Planraster des Grundstils bleibt und bekommt zusätzlich die Winkel. */
  --mark: 1.25rem;
}
[data-style="baustelle"] .masthead-inner {
  position: relative;
  padding-top: clamp(1.5rem, 4vw, 2.5rem);
  padding-bottom: clamp(1.5rem, 4vw, 2.5rem);
}
[data-style="baustelle"] .masthead-inner::before,
[data-style="baustelle"] .masthead-inner::after {
  content: '';
  position: absolute;
  width: 1.25rem;
  height: 1.25rem;
  border-color: var(--hairline-firm);
  border-style: solid;
  pointer-events: none;
}
[data-style="baustelle"] .masthead-inner::before {
  top: 0; left: 0;
  border-width: 1px 0 0 1px;
}
[data-style="baustelle"] .masthead-inner::after {
  bottom: 0; right: 0;
  border-width: 0 1px 1px 0;
}

/* ── Titel: kondensiert, mit Bemaßung darunter ──────────────────────────────
   Statt eines bunten Balkens eine Maßlinie mit Endmarken — so wird auf einer
   Zeichnung eine Länge angegeben. */

[data-style="baustelle"] .masthead-title::after,
[data-style="baustelle"] .gate-title::after {
  content: '';
  display: block;
  width: 5.5rem;
  height: 5px;
  margin-top: .75rem;
  background:
    linear-gradient(var(--accent), var(--accent)) center/100% 1px no-repeat,
    linear-gradient(var(--accent), var(--accent)) left/1px 100% no-repeat,
    linear-gradient(var(--accent), var(--accent)) right/1px 100% no-repeat;
}

/* ── Alles Gemessene in Monospace ───────────────────────────────────────────
   Datum, Zähler, Zeitangaben, Mengen. Der Fließtext bleibt unangetastet — er
   soll lesbar bleiben, nicht technisch aussehen. */

[data-style="baustelle"] .label,
[data-style="baustelle"] .entry-meta,
[data-style="baustelle"] .counter,
[data-style="baustelle"] .menu-note,
[data-style="baustelle"] .field-optional,
[data-style="baustelle"] .submit-hint {
  font-family: var(--technisch);
  letter-spacing: .08em;
  font-style: normal;
}

/* ── Positionsnummer wie am Plan ────────────────────────────────────────────── */

[data-style="baustelle"] .label-num {
  font-family: var(--technisch);
  background: var(--ink);
  color: var(--paper);
  border: 0;
  padding: .125em .4em;
}

/* ── Knöpfe: klar, kantig, ohne Spielerei ───────────────────────────────────── */

[data-style="baustelle"] .btn {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
  font-weight: 600;
  letter-spacing: .12em;
}
[data-style="baustelle"] .btn:hover { background: var(--accent); border-color: var(--accent); }
[data-style="baustelle"] .btn-quiet {
  background: transparent;
  color: var(--ink-soft);
  border: 1px solid var(--hairline-firm);
}
[data-style="baustelle"] .btn-quiet:hover { border-color: var(--ink); color: var(--ink); background: transparent; }

/* ── Beiträge als Blätter aus der Mappe ─────────────────────────────────────── */

[data-style="baustelle"] .entry {
  border: 1px solid var(--hairline-firm);
  border-left-width: 3px;
  border-left-color: var(--accent);
  background: var(--paper-raised);
  box-shadow: none;
}

/* ── Eingabefelder als Formularzeilen ───────────────────────────────────────── */

[data-style="baustelle"] .input,
[data-style="baustelle"] .textarea {
  border-width: 0 0 1px 0;
  border-color: var(--ink);
  background: transparent;
  border-radius: 0;
}
[data-style="baustelle"] .input:focus,
[data-style="baustelle"] .textarea:focus { border-color: var(--accent); }

/* ── Getränkekarte ──────────────────────────────────────────────────────────── */

[data-style="baustelle"] .menu-name { text-transform: uppercase; letter-spacing: .02em; font-weight: 500; }

/* ── Kleine Bildschirme ─────────────────────────────────────────────────────
   Der Plankopf bricht dort um; die Zelltrennung wandert von links nach oben. */

@media (max-width: 34rem) {
  [data-style="baustelle"] .masthead-meta { flex-wrap: wrap; }
  [data-style="baustelle"] .masthead-meta > * + * { border-left: 0; border-top: 1px solid var(--ink); width: 100%; }
  [data-style="baustelle"] .masthead-title::after,
  [data-style="baustelle"] .gate-title::after { width: 4rem; }
}