/* Schriften liegen bei uns, nicht bei Google: keine fremde Verbindung
   beim Aufruf, kein Abfluss von Adressen. Lizenz OFL, latin-Untermenge. */
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url('schrift/cinzel-600.woff2') format('woff2');
}
/* Grenze Gotisch fuer Schild und Ueberschriften: fraktur-nah, aber in
   Ueberschriftengroesse noch lesbar, und die Strichstaerke ist frei.
   OFL, Omnibus-Type. */
@font-face {
  font-family: 'Grenze Gotisch';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('schrift/grenze-gotisch.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('schrift/ibm-plex-mono-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Spectral';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('schrift/spectral-400-kursiv.woff2') format('woff2');
}
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('schrift/spectral-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('schrift/spectral-600.woff2') format('woff2');
}

/**
 * Farben und Formen kommen aus dem Logo-Kit: Anthrazit, Crimson, Messing.
 *
 * Bewusst **ein** Erscheinungsbild, kein heller Zwilling. Das Wappen ist
 * dunkel, und eine helle Fassung davon waere eine zweite, schwaechere Marke.
 * Deshalb malt hier jede Flaeche ihre Farbe ausdruecklich — die Seite haengt
 * an keiner Einstellung des Betrachters.
 */
:root {
  --grund: #100c09;
  --flaeche: #1b1512;
  --flaeche-hoch: #241c17;
  --kante: #3a2f27;
  --kante-hell: #524235;

  --crimson: #b22222;
  --crimson-tief: #8b000f;
  --messing: #c9a96a;
  --messing-hell: #e3ce9c;
  --messing-schwach: rgba(201, 169, 106, 0.3);

  --text: #ede5d7;
  --text-schwach: #a2978a;

  /* Der Aushang ist Papier, nicht Blech. Gealtert und warm, damit er auf der
     dunklen Tafel liegt wie ein Zettel im Laternenlicht — und nicht leuchtet
     wie ein Bildschirm. Die Schrift darauf ist Tinte, kein Grauwert. */
  /* Kontrast gemessen, nicht geschaetzt: Jede Schrift liegt auch am dunklen
     Fuss des Blatts ueber 4,8 : 1. Die erste Fassung hatte die Nebenschrift
     bei 2,1 — sah stimmungsvoll aus und war nicht zu lesen. */
  --papier: #dccaa6;
  --papier-tief: #cbb58c;
  --tinte: #1c130b;
  --tinte-schwach: #4e3e2c;

  /* Die vier Arten. Gedaempft, damit sie neben Crimson und Messing nicht
     schreien — sie sollen das Auge fuehren, nicht die Marke uebersteuern. */
  --art-gruppe: #8aa06f;
  --art-pvp: #c05046;
  --art-beruf: #9a82ab;
  --art-hilfe: #6d94ac;

  /* Dieselben vier Arten als Tinte. Die hellen Fassungen oben sind fuer die
     dunkle Tafel gemacht und verschwinden auf Papier. */
  --art-gruppe-tinte: #3a4a26;
  --art-pvp-tinte: #7e241b;
  --art-beruf-tinte: #46325c;
  --art-hilfe-tinte: #1f4558;

  --breite: 1560px;

  --schrift-titel: "Cinzel", Georgia, serif;
  --schrift-schild: "Grenze Gotisch", "Cinzel", Georgia, serif;
  --schrift-text: "Spectral", Georgia, "Times New Roman", serif;
  --schrift-zahl: "IBM Plex Mono", ui-monospace, Menlo, monospace;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
img { max-width: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--grund);
  color: var(--text);
  font-family: var(--schrift-text);
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/**
 * Das Brett traegt im Alltag null oder einen Aushang. Ohne eigenen Grund
 * endete die Seite dann nach einem Drittel und darunter stand flaches
 * Schwarz. Zwei feste Lagen fuellen das, ohne Inhalt zu erfinden: ein
 * Glutschein unter der Kopfleiste und der Rabe als grosses, sehr schwaches
 * Wasserzeichen. Beide `fixed` — sie sind Raum, nicht Inhalt, und sollen
 * beim Rollen nicht mitwandern.
 */
body::before,
body::after {
  content: "";
  position: fixed;
  pointer-events: none;
  z-index: -1;
}
body::before {
  inset: 0;
  background:
    /* Der Sternenhimmel über die ganze Fläche. */
    url('sterne.svg') center bottom / cover no-repeat,
    radial-gradient(120% 60% at 50% -14%, rgba(139, 0, 15, 0.38), transparent 60%),
    /* Der Lichtkegel ueber dem Brett: die Laterne der Taverne. Ohne ihn war
       die Seite eine Gruft — dunkel darf sie sein, kalt nicht. */
    radial-gradient(80% 50% at 50% 6%, rgba(201, 169, 106, 0.11), transparent 66%),
    /* Die Feuerstelle. Warmes Licht von unten links, tief und breit — der
       Grund, warum die Seite eine Taverne ist und kein Grabmal. Es liegt
       hinter allem und wandert beim Rollen nicht mit. */
    radial-gradient(62% 52% at 13% 105%, rgba(214, 118, 42, 0.3), transparent 72%),
    radial-gradient(32% 26% at 13% 103%, rgba(244, 170, 76, 0.26), transparent 70%);
}
/* Der Horizont schliesst die Seite unten ab. Er haengt am Fenster, nicht am
   Inhalt — sonst waere er bei einem leeren Brett mitten auf der Seite und bei
   sechs Aushaengen ausserhalb. Ein Brett mit nichts daran endet damit
   trotzdem an einer Kante statt im Nichts. */
/* Unten: das Gasthaus. Beides haengt am Fenster,
   nicht am Inhalt — sonst stuende es bei leerem Brett mitten auf der Seite.

   Der Kamm kachelt waagerecht (`repeat-x`), statt gestreckt zu werden: Das
   Bild ist an beiden Enden gleich hoch, und so bleibt es auf jedem Monitor in
   seinem Seitenverhaeltnis. Die Feuerstelle sitzt links vorn; ihr Schein ist
   derselbe, der die ganze Seite von unten waermt. */
body::after {
  /* Das Gasthaus im Vordergrund: die Ecke des „Schwarzen Raben" mit
     Hordebanner, Laterne und erleuchteten Fenstern, davor das Feuer. Dieselbe
     Szene wie das Banner in Discord, dort mit Himmel, hier freigestellt vor
     dem Sternenhimmel der Seite. Links angeschlagen; rechts geht der Boden
     mit dem rechten Stück desselben Bildes weiter, abwechselnd gespiegelt,
     damit die Kanten aufeinanderpassen. Die Bilder sind 2172 x 724 und
     772 x 724. */
  --lager-b: clamp(1150px, 78vw, 1900px);
  --lager-h: calc(var(--lager-b) * 724 / 2172);
  --boden-b: calc(var(--lager-b) * 772 / 2172);
  inset-inline: 0;
  bottom: 0;
  height: var(--lager-h);
  background:
    url('taverne.png') left bottom / var(--lager-b) auto no-repeat,
    url('boden-gespiegelt.png') left var(--lager-b) bottom 0 / var(--boden-b) auto no-repeat,
    url('boden.png') left calc(var(--lager-b) + var(--boden-b)) bottom 0 / var(--boden-b) auto no-repeat,
    url('boden-gespiegelt.png') left calc(var(--lager-b) + var(--boden-b) * 2) bottom 0 / var(--boden-b) auto no-repeat,
    /* Dämmerung über dem Boden. Sie trägt die Silhouetten — Haus und Feuer
       brauchen einen helleren Himmel dahinter, sonst sind sie schwarz auf
       schwarz. */
    linear-gradient(0deg, transparent 8%, rgba(120, 56, 32, 0.3) 18%, rgba(80, 36, 22, 0.14) 45%, transparent 75%),
    /* Der Schein des Feuers, weiter in die Seite gezogen. */
    radial-gradient(calc(var(--lager-b) * 0.2) calc(var(--lager-h) * 0.5) at calc(var(--lager-b) * 0.31) 84%, rgba(236, 140, 52, 0.3), transparent 70%),
    radial-gradient(110% 40% at 50% 110%, rgba(139, 0, 15, 0.3), transparent 66%);
}
/* Am Telefon keine Landschaft: Der Inhalt läuft dort über die ganze Breite,
   und alles Feste am unteren Rand läge hinter den Blättern. Es bleibt der
   warme Schein. */
@media (max-width: 700px) {
  body::after {
    height: 160px;
    background:
      radial-gradient(70% 100% at 20% 110%, rgba(214, 118, 42, 0.22), transparent 70%),
      radial-gradient(110% 70% at 50% 118%, rgba(139, 0, 15, 0.3), transparent 66%);
  }
}

a { color: inherit; }
:where(a, button):focus-visible {
  outline: 2px solid var(--messing);
  outline-offset: 3px;
}

/* Breit genug für drei Aushänge nebeneinander plus Seitenleiste. Schmaler
   wirkte die Seite auf großen Schirmen wie ein Streifen in der Mitte. */
.wrap { max-width: var(--breite); margin: 0 auto; padding-inline: 24px; }
/* Die Fantasy-Sinnbilder sind feiner gezeichnet als Strichzeichen und
   brauchen deshalb etwas mehr Raum, um bei kleinen Schriftgraden zu tragen. */
.symbol { width: 1.35em; height: 1.35em; flex: none; }
.sinnbilder { position: absolute; width: 0; height: 0; }

/* ---------- Kopfleiste ---------- */

/**
 * Die Kopfleiste ist der einzige Ort mit einem Bild: ein dunkler Streifen
 * Landschaft aus dem Bildmaterial der Gilde, so weit abgedunkelt, dass er
 * Stimmung traegt und keine Schrift stoert. Darunter eine Messinglinie und
 * ein Glutschein — die Kante aus dem Wappen, nicht gemaltes Material.
 */
.balken {
  position: relative;
  z-index: 2;
  /* Kein Himmelsbild mehr: Der rote Wolkenhimmel stritt mit dem warmen
     Feuer unten. Die Kopfleiste ist jetzt die dunkle Hauswand, an der das
     Schild haengt — mit dem Widerschein einer Laterne dahinter. */
  background:
    radial-gradient(34% 140% at 18% 0%, rgba(214, 128, 52, 0.16), transparent 70%),
    linear-gradient(180deg, #0b0806 0%, #130e0a 100%);
  border-bottom: 1px solid var(--messing-schwach);
}
.balken::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(178, 34, 34, 0.75) 22%, rgba(178, 34, 34, 0.75) 78%, transparent);
}
.balken-innen {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 14px 22px; padding-block: 26px;
}
.marke {
  display: flex; align-items: center; gap: 16px;
  margin-right: auto; text-decoration: none; color: inherit;
}
/* Das Gasthausschild haengt vom oberen Rand und ragt ueber die Kante der
   Kopfleiste hinaus — so haengt es, statt in einer Zeile zu stehen. Der Arm
   im Bild zeigt nach rechts, dorthin, wo der Name steht. */
.schild {
  /* Vor der roten Linie der Kopfleiste, nicht dahinter. */
  position: relative; z-index: 1;
  width: 130px; height: 130px; flex: none;
  margin-block: -26px -44px;
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 22px rgba(214, 118, 42, 0.18));
}
.marke-text { display: flex; flex-direction: column; gap: 4px; line-height: 1.05; }
.marke-name {
  font-family: var(--schrift-schild); font-weight: 700;
  font-size: 2.3rem; letter-spacing: 0.01em; line-height: 0.95;
  color: #f1e3c4;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}


.konto { display: flex; align-items: center; gap: 10px; }
.gruss {
  font-family: var(--schrift-schild); font-weight: 500;
  font-size: 1.3rem; color: var(--messing-hell);
}
.gruss b { font-weight: 700; color: #f1e3c4; }
.balken form { margin: 0; display: flex; }

/* ---------- Knoepfe ---------- */

.knopf {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 10px 19px; cursor: pointer; text-decoration: none;
  font-family: var(--schrift-titel);
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--text);
  background: rgba(32, 25, 20, 0.7);
  border: 1px solid var(--kante);
  transition: border-color 0.18s, color 0.18s, background-color 0.18s;
}
.knopf:hover { border-color: var(--messing); color: var(--messing-hell); background: rgba(48, 38, 29, 0.85); }

.knopf-stark {
  color: #fbeee9;
  border-color: rgba(201, 169, 106, 0.38);
  background: linear-gradient(180deg, #a8202a, var(--crimson-tief));
  box-shadow: 0 5px 20px -12px rgba(178, 34, 34, 0.75);
}
.knopf-stark:hover {
  border-color: var(--messing); color: #fff;
  background: linear-gradient(180deg, #c1272f, #9c0612);
}
.knopf-breit { width: 100%; }

/* ---------- Ueberschriften ---------- */

/**
 * Jede Ueberschrift traegt ihre Linie selbst: Raute links, Messinglinie nach
 * rechts auslaufend. Vorher war das ein eigenes Element unter jeder
 * Ueberschrift und wiederholte sich viermal auf einer Seite.
 */
.brett-kopf, .tafel h2 {
  font-family: var(--schrift-schild); font-weight: 600;
  font-size: 1.7rem; letter-spacing: 0.01em; line-height: 1.1;
  margin: 0;
}
.brett-kopf {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding-bottom: 12px; margin-bottom: 20px;
  border-bottom: 1px solid var(--messing-schwach);
}
.brett-kopf h2 { font: inherit; margin: 0; color: var(--text); }

.tafel h2 {
  display: flex; align-items: center; gap: 11px; color: var(--messing);
  padding-bottom: 12px; margin-bottom: 16px;
  border-bottom: 1px solid var(--messing-schwach);
}
.tafel h2 .symbol { width: 1.1em; height: 1.1em; }

.zaehler {
  font-family: var(--schrift-zahl); font-size: 0.7rem;
  letter-spacing: 0.06em; color: var(--text-schwach);
}

/* ---------- Aufbau ---------- */

.inhalt {
  display: grid; grid-template-columns: minmax(0, 1fr) 350px;
  gap: 34px; align-items: start; padding-block: 36px 80px;
}
@media (max-width: 900px) {
  .inhalt { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  /* Am Telefon zuerst Knopf und Termine: Was heute ansteht, ist dringender
     als ein Aushang von vorgestern. „Meine Einträge" und „Wer fehlt" kommen
     dagegen erst nach dem Brett — sonst schöbe die ganze Seitenleiste die
     Aushänge aus dem ersten Blick. `display: contents` macht die Teile der
     Leiste zu eigenen Zeilen im Raster, damit sie einzeln sortierbar sind. */
  /* Die Reihenfolge steht unter der Grundregel von `.spalte`, siehe dort. */
}

.spalte { display: flex; flex-direction: column; gap: 22px; }
@media (max-width: 900px) {
  .spalte { display: contents; }
  /* Die Rückmeldung nach einem Formular gehört ganz nach oben, vor den Knopf. */
  .hauptspalte { display: contents; }
  .hinweis { order: -3; }
  .spalte > .anschlagen { order: -2; }
  .spalte > .termine { order: -1; }
  .spalte > .meine, .spalte > .fehlt { order: 1; }
}

/* ---------- Flaechen ---------- */

/**
 * Das Brett ist **kein** Kasten mehr. Es war vorher ein Rahmen um einen
 * Rahmen um ein Kaertchen, und bei einem einzigen Aushang sah man vor allem
 * die leere Flaeche daneben. Jetzt traegt der Aushang selbst die Kante, und
 * die Ueberschrift steht frei darueber.
 */
.hauptspalte, .brett { min-width: 0; }

.tafel {
  position: relative;
  background: linear-gradient(180deg, rgba(38, 30, 24, 0.92), rgba(25, 19, 15, 0.92));
  border: 1px solid var(--kante);
  border-top: 2px solid var(--crimson-tief);
  padding: 20px 20px 22px;
}
/* Eintragen ist ein Knopf, kein Kasten. Ein Rahmen mit Ueberschrift und
   Zierlinie um eine einzige Schaltflaeche war der schwerste Baustein der
   Seite fuer den geringsten Inhalt. */
.tafel-schmal {
  background: none; border: 0; padding: 0;
}
.tafel-schmal h2 {
  font-family: var(--schrift-titel); font-weight: 600; text-transform: uppercase;
  font-size: 0.6rem; letter-spacing: 0.28em; color: var(--text-schwach);
  border: 0; padding-bottom: 0; margin-bottom: 10px;
}

/* ---------- Suche und Filter ---------- */

.brett-werkzeug { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 20px; }
.brett-werkzeug:empty, .brett-werkzeug:not(:has(*)) { display: none; }
.suche { margin: 0; flex: 1 1 220px; max-width: 320px; }
.suche-feld {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  background: rgba(32, 25, 20, 0.7);
  border: 1px solid var(--kante);
  color: var(--text-schwach);
  transition: border-color 0.18s;
}
.suche-feld:focus-within { border-color: var(--messing); color: var(--messing); }
.suche-feld .symbol { width: 1.1em; height: 1.1em; }
.suche-feld input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  font: inherit; font-family: var(--schrift-text); font-size: 0.92rem; color: var(--text);
}
.suche-feld input::placeholder { color: var(--text-schwach); }
.leer-suche { padding: 26px 0; }
.leer-suche::before { display: none; }

.filterleiste { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }
.filter { display: flex; flex-wrap: wrap; gap: 7px; }
/* Die Richtung als zusammenhängender Schalter — sie ist die gröbere Wahl
   und steht deshalb vorn. */
.filter-richtung { gap: 0; }
.filter-richtung button + button { border-left-width: 0; }
.filter-richtung button[aria-pressed="true"] + button { border-left-width: 0; }
.filter button:focus-visible { position: relative; z-index: 1; }
.filter button {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--schrift-text); font-size: 0.84rem;
  padding: 6px 12px; cursor: pointer;
  border: 1px solid var(--kante);
  background: rgba(32, 25, 20, 0.62); color: var(--text-schwach);
  transition: border-color 0.18s, color 0.18s, background-color 0.18s;
}
.filter button:hover { border-color: var(--kante-hell); color: var(--text); }
.filter button[aria-pressed="true"] {
  border-color: var(--messing); color: var(--messing-hell);
  background: rgba(201, 169, 106, 0.13);
}

/* ---------- Anschlaege ---------- */

/**
 * `auto-fit` statt `auto-fill`: Bei einem einzigen Aushang faellt die leere
 * zweite Spur weg und das Kaertchen nimmt die ganze Breite. Genau daran ist
 * die erste Fassung gescheitert — sechs sahen gut aus, einer sah verloren aus.
 *
 * `min(340px, 100%)`: Ist die Spalte schmaler als eine Karte, bliebe die Spur
 * sonst 340px breit und die Seite liefe seitlich ueber.
 */
.anschlaege {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 16px;
}

/* Dieselben zwei Ueberschriften wie im Discord-Brett. Sie sind leiser als
   „Am Brett" darueber — eine Zwischenebene, kein zweiter Titel. */
.richtung-kopf {
  margin: 0 0 12px;
  display: flex; align-items: center; gap: 10px;
  font-family: var(--schrift-schild); font-weight: 500;
  font-size: 1.28rem; letter-spacing: 0.01em;
  color: var(--messing);
}
.richtung-kopf::before {
  content: ""; width: 6px; height: 10px; flex: none;
  background: var(--crimson);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.richtung-kopf[data-richtung="biete"]::before { background: var(--messing); }
.richtung-kopf::after {
  content: ""; height: 1px; flex: 1;
  background: linear-gradient(90deg, var(--messing-schwach), transparent);
}
.anschlaege + .richtung-kopf { margin-top: 26px; }

/**
 * Der Aushang ist ein **Zettel**, kein Kaertchen: gealtertes Papier auf der
 * dunklen Tafel, mit zwei geschmiedeten Naegeln oben. Das ist das Wort, das
 * ueber dem Ding steht — ein Anschlag wird angeschlagen. Vorher war es eine
 * Metallplatte, und die war kuehl.
 *
 * Nicht zu verwechseln mit dem ausgefransten Pergament vom Vormittag: Das war
 * eine **nachgebaute** Stofflichkeit aus Rauschfiltern. Hier traegt eine warme
 * Flaeche mit einer Lichtkante das Papier, nicht eine gemalte Faser.
 */
.anschlag {
  --art: var(--art-hilfe-tinte);
  position: relative;
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: 16px; align-items: start;
  /* Ein Blatt hat ein Mass. Ueber die volle Spaltenbreite gezogen wird aus
     dem Aushang ein Banner — deshalb eine Obergrenze, die nur im Alltagsfall
     mit einem einzigen Zettel ueberhaupt greift. */
  max-width: 660px;
  padding: 28px 22px 20px;
  color: var(--tinte);
  background-image:
    url('nagel.svg'), url('nagel.svg'),
    /* Die Laterne steht oben links: ein flacher Lichtschein ueber dem Blatt,
       kein Glanzfleck. Zu viel davon, und aus Papier wird eine Folie. */
    radial-gradient(135% 105% at 18% -22%, rgba(255, 246, 228, 0.22), transparent 62%),
    linear-gradient(168deg, var(--papier) 0%, var(--papier-tief) 100%);
  background-repeat: no-repeat;
  background-size: 16px 16px, 16px 16px, auto, auto;
  background-position: left 11px top 10px, right 11px top 10px, 0 0, 0 0;
  border: 0;
  border-left: 3px solid var(--art);
  /* Die Kante nach innen abgedunkelt — ein Blatt liegt auf, es leuchtet nicht
     bis an den Rand. Das ist der Unterschied zwischen Papier und Kachel. */
  box-shadow:
    0 14px 26px -14px rgba(0, 0, 0, 0.85),
    inset 0 0 26px rgba(92, 64, 32, 0.28),
    inset 0 0 0 1px rgba(78, 55, 28, 0.3);
  transition: transform 0.18s, box-shadow 0.18s;
}

/* Zwei Grad weniger als gerade. Ein Brett voller exakt ausgerichteter Zettel
   sieht nach Tabelle aus; ein halbes Grad Schraeglage nach angeschlagen. Beim
   Zeigen richtet sich der Zettel auf. */
.anschlaege > .anschlag:nth-child(odd) { transform: rotate(-0.45deg); }
.anschlaege > .anschlag:nth-child(even) { transform: rotate(0.4deg); }
.anschlag:hover {
  transform: rotate(0) translateY(-2px);
  box-shadow: 0 18px 30px -14px rgba(0, 0, 0, 0.9), inset 0 0 0 1px rgba(90, 64, 34, 0.3);
}

.anschlag-inhalt { display: flex; flex-direction: column; gap: 7px; min-width: 0; }

.anschlag[data-art="gruppe"] { --art: var(--art-gruppe-tinte); }
.anschlag[data-art="pvp"] { --art: var(--art-pvp-tinte); }
.anschlag[data-art="beruf"] { --art: var(--art-beruf-tinte); }
.anschlag[data-art="hilfe"] { --art: var(--art-hilfe-tinte); }

/* Das Sinnbild als Stempel auf dem Papier: Tinte im Sechseck des Bot-Wappens,
   nicht als leuchtende Kachel. */
.wappenfeld {
  width: 46px; height: 46px; flex: none;
  display: grid; place-items: center;
  color: var(--art);
  background: rgba(64, 43, 20, 0.2);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.wappenfeld .symbol { width: 26px; height: 26px; }

.anschlag-kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.art {
  font-family: var(--schrift-titel); font-size: 0.6rem; font-weight: 600;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--art);
}

/* „Suche" und „Biete" als aufgedrueckter Stempel: Kontur und Schrift in
   derselben Tinte, keine gefuellte Flaeche. Gefuellt sah nach Etikett aus. */
.richtung {
  font-family: var(--schrift-titel); font-size: 0.54rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 2px 7px; color: var(--crimson-tief);
  border: 1.5px solid currentColor;
  transform: rotate(-1.6deg);
}
.anschlag[data-richtung="biete"] .richtung { color: #4f3308; }

.frist {
  margin-left: auto;
  font-family: var(--schrift-zahl); font-size: 0.65rem; color: var(--tinte-schwach);
  white-space: nowrap;
}

.satz { margin: 0; font-size: 1.08rem; line-height: 1.45; color: var(--tinte); }
.satz b { font-weight: 700; color: #7e241b; }
.person {
  font-family: var(--schrift-titel); font-weight: 700;
  letter-spacing: 0.02em; color: #1c120a;
}
a.person {
  text-decoration: underline dotted rgba(28, 18, 10, 0.45);
  text-underline-offset: 3px;
}
a.person:hover { color: #7e241b; text-decoration-color: currentColor; }
.wen { margin: 0; color: var(--tinte-schwach); font-size: 0.92rem; }
.anschlag-fuss {
  margin: 4px 0 0; padding-top: 9px;
  border-top: 1px solid rgba(90, 64, 34, 0.28);
  font-family: var(--schrift-zahl); font-size: 0.71rem; color: var(--tinte-schwach);
}

/**
 * Das Blatt der Leitung: ein groesserer Anschlag ueber dem Brett, mit dem
 * Wachssiegel an der Unterschrift. Das Siegel ist das Zeichen, dass hier nicht
 * irgendwer etwas aushaengt — mehr Unterschied braucht es nicht.
 */
.leitung {
  position: relative;
  margin: 0 0 30px;
  /* Volle Breite der Spalte und gerade aufgehängt: Das Blatt der Leitung
     ist die ruhige Fläche über dem Brett, nicht noch ein Zettel darunter.
     Die Zeilen bleiben trotzdem lesbar kurz. */
  padding: 30px 34px 22px;
  color: var(--tinte);
  background-image:
    url('nagel.svg'), url('nagel.svg'),
    radial-gradient(135% 105% at 18% -22%, rgba(255, 246, 228, 0.22), transparent 62%),
    linear-gradient(172deg, var(--papier) 0%, var(--papier-tief) 100%);
  background-repeat: no-repeat;
  background-size: 17px 17px, 17px 17px, auto, auto;
  background-position: left 12px top 11px, right 12px top 11px, 0 0, 0 0;
  box-shadow:
    0 16px 30px -14px rgba(0, 0, 0, 0.9),
    inset 0 0 30px rgba(92, 64, 32, 0.26),
    inset 0 0 0 1px rgba(78, 55, 28, 0.3);
}
/* Gruß und Unterschrift wie auf dem Blatt an der Tür; das Siegel sitzt an
   der Unterschrift, nicht mehr frei in der Ecke. */
.leitung .brief-gruss {
  margin: 2px 0 8px;
  font-family: var(--schrift-schild); font-weight: 600;
  font-size: 1.45rem; line-height: 1.1; color: #5a1a13;
}
.leitung h2 {
  margin: 0 0 10px;
  font-family: var(--schrift-schild); font-weight: 700;
  font-size: 1.8rem; letter-spacing: 0.01em; line-height: 1.05;
  color: #1c130b;
}
.leitung p { margin: 0 0 8px; max-width: 80ch; font-size: 1.02rem; line-height: 1.5; }
.leitung > p:last-child { margin-bottom: 0; }
.leitung .leitung-zeile {
  margin: 0 0 6px;
  font-family: var(--schrift-zahl); font-size: 0.7rem; color: var(--tinte-schwach);
}
.leitung-alt {
  margin-top: 12px; padding-top: 10px;
  border-top: 1px solid rgba(90, 64, 34, 0.28);
}
.leitung-alt summary {
  cursor: pointer;
  font-family: var(--schrift-zahl); font-size: 0.72rem; color: var(--tinte-schwach);
}
.leitung-alt summary:hover { color: var(--tinte); }
.leitung-alt[open] summary { margin-bottom: 8px; }

@media (max-width: 560px) {
  .leitung { padding: 26px 18px 18px; }
}

/**
 * Das leere Brett. Statt einer Zeile in einem leeren Kasten steht hier der
 * Rabe — gross, schwach, mittig. Ein Brett ohne Aushang ist kein Fehler,
 * und so sieht es auch nicht nach einem aus.
 */
.leer {
  grid-column: 1 / -1; margin: 0;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  padding: 44px 0 52px; text-align: center;
  font-family: var(--schrift-titel); font-size: 0.74rem;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--text-schwach);
}
.leer::before {
  content: ""; width: 146px; height: 146px;
  background: url('rabe.png') no-repeat center / contain;
  opacity: 0.88; filter: drop-shadow(0 0 46px rgba(139, 0, 15, 0.38));
}

/* ---------- Termine ---------- */

/**
 * „Was ansteht" ist ein Blatt wie die Aushaenge, kein dunkler Kasten mehr —
 * der Kasten war die einzige Flaeche der Seite, die nicht zur Szene gehoerte.
 * Aufbau und Abgrenzung bleiben: eine Liste mit Datum links.
 */
.tafel.termine {
  color: var(--tinte);
  border: 0;
  padding: 26px 22px 20px;
  background-image:
    url('nagel.svg'), url('nagel.svg'),
    radial-gradient(135% 105% at 18% -22%, rgba(255, 246, 228, 0.22), transparent 62%),
    linear-gradient(172deg, var(--papier) 0%, var(--papier-tief) 100%);
  background-repeat: no-repeat;
  background-size: 16px 16px, 16px 16px, auto, auto;
  background-position: left 11px top 10px, right 11px top 10px, 0 0, 0 0;
  box-shadow:
    0 16px 30px -14px rgba(0, 0, 0, 0.9),
    inset 0 0 26px rgba(92, 64, 32, 0.26),
    inset 0 0 0 1px rgba(78, 55, 28, 0.3);
  transform: rotate(0.35deg);
}
.tafel.termine h2 { color: #1c130b; border-bottom-color: rgba(90, 64, 34, 0.35); }
/* Die Blätter in der Seitenleiste tragen ihren Titel mittig, wie ein Anschlag. */
.tafel.termine h2, .tafel.fehlt h2 { justify-content: center; text-align: center; }
.tafel.termine h2 .symbol { color: #7e241b; }
.tafel.termine .termin { border-top-color: rgba(90, 64, 34, 0.25); }
.tafel.termine .wann { color: var(--tinte-schwach); }
.tafel.termine .wann b { color: #7e241b; }
.tafel.termine .termin-titel { color: var(--tinte); }
.tafel.termine .termin-ort, .tafel.termine .text { color: var(--tinte-schwach); }
.tafel.termine .termin-link { color: #7e241b; }
/* Gildenraids stehen zwischen den offenen Runs, mit einer Marke davor —
   sie sind die Termine, für die man sich festlegt. */
.termin-marke {
  display: inline-block; margin-right: 7px; padding: 1px 6px;
  vertical-align: 2px;
  font-family: var(--schrift-titel); font-size: 0.52rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: #f4e6c8; background: #7e241b;
}
.tafel.termine .termin-link:hover { color: #4a120c; }

.termin-liste { list-style: none; margin: 0; padding: 0; }
.termin {
  display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 14px;
  padding-block: 13px; border-top: 1px solid var(--kante);
}
.termin:first-child { border-top: 0; padding-top: 2px; }

.wann {
  font-family: var(--schrift-zahl); font-variant-numeric: tabular-nums;
  font-size: 0.7rem; line-height: 1.5; color: var(--text-schwach);
}
.wann b { display: block; font-size: 0.92rem; font-weight: 500; color: var(--crimson); }

.termin-titel { display: block; font-weight: 600; line-height: 1.35; }
.termin-ort { display: block; font-size: 0.82rem; color: var(--text-schwach); }
.termin-link {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 5px;
  font-family: var(--schrift-titel); font-size: 0.6rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--messing); text-decoration: none;
}
.termin-link .symbol { width: 1em; height: 1em; transition: transform 0.18s; }
.termin-link:hover { color: var(--messing-hell); }
.termin-link:hover .symbol { transform: translateX(3px); }

.tafel .text { margin: 0; font-size: 0.93rem; color: var(--text-schwach); }
.tafel .text + .knopf { margin-top: 16px; }

/* ---------- Einzelne Tafel ---------- */

.inhalt-schmal { display: block; max-width: 640px; padding-block: 60px 220px; }

/* Einzelne Blätter — Anmeldung, Kein Zutritt, Störung: mittig im Fenster,
   ein Aushang mit Siegel und einem Holzknopf darunter. */
.einzelblatt {
  display: grid; place-items: center;
  overflow-x: clip;
  min-height: calc(100vh - 160px);
  padding-block: 50px 140px;
}
.blatt.blatt-gesiegelt {
  width: min(100%, 520px);
  padding: 40px 40px 34px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 20px;
}
.blatt-gesiegelt .brief-gruss {
  margin: 0; justify-content: center;
  font-family: var(--schrift-schild); font-weight: 600;
  font-size: clamp(1.6rem, 5vw, 2rem); line-height: 1.15; color: #5a1a13;
}
.blatt.blatt-gesiegelt p { margin: 0; max-width: 34ch; font-size: 1.15rem; line-height: 1.5; }
.blatt-gesiegelt p b { color: #7e241b; }
.blatt-gesiegelt .knopf-anschlag { width: 100%; margin-top: 4px; }

/* Unterschrift rechts, das Siegel gleich daneben auf dem Blatt. */
.blatt.blatt-gesiegelt .brief-unterschrift,
.leitung .brief-unterschrift {
  align-self: stretch; max-width: none;
  display: flex; align-items: center; justify-content: flex-end; gap: 14px;
  margin-top: 6px; padding-top: 14px;
  border-top: 1px solid rgba(78, 62, 44, 0.35);
  font-family: var(--schrift-schild); font-weight: 500;
  font-size: 1.35rem; color: var(--tinte-schwach);
}
.leitung .brief-unterschrift { margin: 14px 0 0; padding-top: 12px; }
.brief-unterschrift::after {
  content: ""; flex: none; width: 72px; height: 72px; margin-block: -14px -10px;
  background: url('siegel.png') no-repeat center / contain;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.45)); transform: rotate(10deg);
}
@media (max-width: 560px) {
  .blatt.blatt-gesiegelt { padding: 34px 22px 28px; }
  .brief-unterschrift::after { width: 60px; height: 60px; }
}

/* ---------- Seitenleiste ---------- */

/**
 * Der Knopf zum Anschlagen: ein kleines Brettstück mit Feder, kein roter
 * Balken mit Ueberschrift darüber. Holzton aus dem Schild, Messingkante,
 * und beim Zeigen wird er wärmer, als hielte man ihn ans Feuer.
 */
.anschlagen { display: flex; flex-direction: column; gap: 10px; }
.knopf-anschlag {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 16px 18px; text-align: center;
  color: #f4e6c8; text-decoration: none;
  background:
    linear-gradient(180deg, rgba(255, 210, 150, 0.1), transparent 45%),
    linear-gradient(135deg, #6b3a1d 0%, #4a2612 55%, #3a1d0e 100%);
  border: 1px solid rgba(201, 169, 106, 0.55);
  box-shadow:
    inset 0 0 0 3px rgba(20, 10, 4, 0.35),
    inset 0 0 0 4px rgba(201, 169, 106, 0.25),
    0 12px 24px -12px rgba(0, 0, 0, 0.9);
  transition: box-shadow 0.2s, transform 0.2s, filter 0.2s;
}
.knopf-anschlag:hover {
  transform: translateY(-1px);
  filter: brightness(1.12);
  box-shadow:
    inset 0 0 0 3px rgba(20, 10, 4, 0.35),
    inset 0 0 0 4px rgba(227, 206, 156, 0.5),
    0 14px 30px -12px rgba(214, 118, 42, 0.55);
}
button.knopf-anschlag { font: inherit; }
button.knopf-anschlag, button.knopf-holz { cursor: pointer; }
.knopf-anschlag-text { display: flex; flex-direction: column; align-items: center; line-height: 1.15; }
.knopf-anschlag-text b {
  font-family: var(--schrift-schild); font-weight: 700; font-size: 1.55rem;
}
.knopf-anschlag-text small {
  margin-top: 3px;
  font-family: var(--schrift-titel); font-size: 0.58rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--messing-hell);
}
/* Die kleinen Knöpfe darunter: dasselbe Holz, eine Nummer kleiner. Sie
   teilen sich die Breite und brechen um, wenn es eng wird. */
.knoepfe-klein { display: flex; flex-wrap: wrap; gap: 8px; }
.knopf-holz {
  flex: 1 1 auto;
  line-height: 1.2;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 8px 12px;
  color: #f1e3c4; text-decoration: none; white-space: nowrap;
  font-family: var(--schrift-schild); font-weight: 600; font-size: 1.08rem;
  background: linear-gradient(135deg, #573019 0%, #3f2111 60%, #331a0c 100%);
  border: 1px solid rgba(201, 169, 106, 0.4);
  box-shadow: inset 0 0 0 2px rgba(20, 10, 4, 0.35), 0 8px 16px -10px rgba(0, 0, 0, 0.9);
  transition: filter 0.2s, border-color 0.2s;
}
.knopf-holz .symbol { width: 1.05em; height: 1.05em; color: var(--messing); }
.knopf-holz:hover { filter: brightness(1.15); border-color: rgba(227, 206, 156, 0.7); }

/* Wer fehlt: ein kleineres Blatt, gleiche Machart wie „Was ansteht". */
.blatt-klein, .tafel.fehlt {
  color: var(--tinte);
  border: 0;
  padding: 24px 20px 18px;
  background-image:
    url('nagel.svg'), url('nagel.svg'),
    linear-gradient(172deg, var(--papier) 0%, var(--papier-tief) 100%);
  background-repeat: no-repeat;
  background-size: 15px 15px, 15px 15px, auto;
  background-position: left 10px top 9px, right 10px top 9px, 0 0;
  box-shadow:
    0 14px 26px -14px rgba(0, 0, 0, 0.9),
    inset 0 0 24px rgba(92, 64, 32, 0.26),
    inset 0 0 0 1px rgba(78, 55, 28, 0.3);
  transform: rotate(-0.4deg);
}
.tafel.fehlt h2 { color: #1c130b; font-size: 1.45rem; border-bottom-color: rgba(90, 64, 34, 0.35); margin-bottom: 10px; }
.tafel.fehlt h2 .symbol { color: #7e241b; }
.tafel.fehlt h3 {
  margin: 10px 0 4px;
  font-family: var(--schrift-titel); font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--tinte-schwach);
}
.tafel.fehlt ul { list-style: none; margin: 0; padding: 0; }
.tafel.fehlt li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px;
  padding: 5px 0; border-top: 1px solid rgba(90, 64, 34, 0.2);
}
.tafel.fehlt li:first-child { border-top: 0; }
.fehlt-name { font-weight: 600; }
.fehlt-zeit { margin-left: auto; font-family: var(--schrift-zahl); font-size: 0.7rem; color: var(--tinte-schwach); }
.tafel.fehlt .text { color: var(--tinte-schwach); }

/* ---------- Schreiben ---------- */

/* Die Rückmeldung nach einem Formular: ein schmaler Streifen Papier. */
.hinweis {
  margin: 0 0 22px; padding: 11px 16px;
  color: var(--tinte);
  background: linear-gradient(172deg, var(--papier), var(--papier-tief));
  border-left: 3px solid #7e241b;
  box-shadow: 0 10px 20px -12px rgba(0, 0, 0, 0.9);
  font-size: 0.98rem;
}

/* Werkzeug am eigenen Aushang: klein, in Tinte, unter dem Text. Es soll
   da sein, wenn man es sucht, und den Aushang nicht übertönen. */
.anschlag-eigen { box-shadow: 0 14px 26px -14px rgba(0, 0, 0, 0.85), inset 0 0 26px rgba(92, 64, 32, 0.28), inset 0 0 0 2px rgba(126, 36, 27, 0.45); }
.anschlag-werkzeug {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin-top: 6px; padding-top: 8px;
  border-top: 1px dashed rgba(90, 64, 34, 0.35);
}
.anschlag-werkzeug form { margin: 0; display: inline-flex; }
.werkzeug {
  display: inline-block; padding: 0; border: 0; background: none; cursor: pointer; line-height: 1.4;
  font-family: var(--schrift-titel); font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: #7e241b; text-decoration: none;
}
.werkzeug:hover { color: #3d0f09; text-decoration: underline; }

.nebenweg {
  margin: 10px 0 0; font-size: 0.86rem; color: var(--text-schwach);
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px;
}
.nebenweg a { color: var(--messing); text-decoration: none; display: inline-flex; align-items: center; gap: 5px; }
.nebenweg a:hover { color: var(--messing-hell); text-decoration: underline; }
.nebenweg .symbol { width: 1.05em; height: 1.05em; }

.meine ul { list-style: none; margin: 0; padding: 0; }
.meine li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 6px 0; border-top: 1px solid var(--kante);
}
.meine li:first-child { border-top: 0; }
.meine a {
  display: inline-flex; align-items: center; gap: 7px; min-width: 0;
  color: var(--text); text-decoration: none; font-size: 0.92rem;
}
.meine a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meine a:hover { color: var(--messing-hell); }
.meine .symbol { width: 1.1em; height: 1.1em; color: var(--messing); flex: none; }
.meine small { font-family: var(--schrift-zahl); font-size: 0.66rem; color: var(--text-schwach); white-space: nowrap; }

/* Das Formular ist ein Blatt wie die Aushänge — man schreibt auf das, was
   nachher am Brett hängt. */
.blatt {
  position: relative;
  color: var(--tinte);
  padding: 34px 30px 26px;
  background-image:
    url('nagel.svg'), url('nagel.svg'),
    radial-gradient(135% 105% at 18% -22%, rgba(255, 246, 228, 0.22), transparent 62%),
    linear-gradient(172deg, var(--papier) 0%, var(--papier-tief) 100%);
  background-repeat: no-repeat;
  background-size: 17px 17px, 17px 17px, auto, auto;
  background-position: left 12px top 11px, right 12px top 11px, 0 0, 0 0;
  box-shadow:
    0 16px 30px -14px rgba(0, 0, 0, 0.9),
    inset 0 0 30px rgba(92, 64, 32, 0.26),
    inset 0 0 0 1px rgba(78, 55, 28, 0.3);
}
.blatt h2 {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 16px;
  font-family: var(--schrift-schild); font-weight: 700;
  font-size: 2rem; line-height: 1.05; color: #1c130b;
}
.blatt h2 .symbol { color: #7e241b; width: 0.9em; height: 0.9em; }
.blatt p { margin: 0 0 14px; line-height: 1.5; }
.blatt-zeile { font-family: var(--schrift-zahl); font-size: 0.78rem; color: var(--tinte-schwach); }
.fehler {
  padding: 9px 12px; border-left: 3px solid #7e241b;
  background: rgba(126, 36, 27, 0.1); color: #5a150e;
}

.wahl { border: 0; margin: 0 0 16px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.wahl legend {
  width: 100%; margin-bottom: 8px; padding: 0;
  font-family: var(--schrift-schild); font-weight: 600; font-size: 1.2rem; color: #1c130b;
}
.wahl-punkt {
  position: relative; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  border: 1px solid rgba(78, 55, 28, 0.35);
  background: rgba(255, 248, 232, 0.25);
  transition: border-color 0.15s, background-color 0.15s;
}
.wahl-punkt:hover { border-color: rgba(78, 55, 28, 0.7); }
.wahl-punkt input { position: absolute; opacity: 0; pointer-events: none; }
.wahl-punkt .symbol { width: 1.35em; height: 1.35em; color: #7e241b; }
.wahl-punkt[data-art="gruppe"] .symbol { color: var(--art-gruppe-tinte); }
.wahl-punkt[data-art="pvp"] .symbol { color: var(--art-pvp-tinte); }
.wahl-punkt[data-art="beruf"] .symbol { color: var(--art-beruf-tinte); }
.wahl-punkt[data-art="hilfe"] .symbol { color: var(--art-hilfe-tinte); }
.wahl-punkt span { display: flex; flex-direction: column; line-height: 1.2; }
.wahl-punkt small { font-family: var(--schrift-zahl); font-size: 0.62rem; color: var(--tinte-schwach); }
.wahl-punkt:has(input:checked) {
  border-color: #7e241b; background: rgba(126, 36, 27, 0.12);
  box-shadow: inset 0 0 0 1px #7e241b;
}
.wahl-punkt:has(input:focus-visible) { outline: 2px solid #7e241b; outline-offset: 2px; }

.feld { display: block; margin: 0 0 14px; }
.feld-name {
  display: block; margin-bottom: 5px;
  font-family: var(--schrift-schild); font-weight: 600; font-size: 1.15rem; color: #1c130b;
}
.feld-name small { font-family: var(--schrift-text); font-weight: 400; font-size: 0.8rem; color: var(--tinte-schwach); }
.feld input, .feld textarea {
  width: 100%; padding: 9px 11px;
  font: inherit; font-size: 1rem; color: var(--tinte);
  background: rgba(255, 250, 238, 0.55);
  border: 1px solid rgba(78, 55, 28, 0.4);
  border-radius: 0;
}
.feld textarea { resize: vertical; min-height: 110px; }
.feld input:focus, .feld textarea:focus { outline: 2px solid #7e241b; outline-offset: 0; border-color: #7e241b; }
.leitung-formular { background-image: url('nagel.svg'), url('nagel.svg'), linear-gradient(172deg, var(--papier) 0%, var(--papier-tief) 100%); }
.leitung-formular::after {
  content: ""; position: absolute; right: 18px; bottom: -22px; width: 96px; height: 96px;
  background: url('siegel.png') no-repeat center / contain;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.55)); transform: rotate(8deg);
}
.formular-fuss { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 24px; }
.formular-fuss .knopf-anschlag { align-self: stretch; }
.formular-fuss .nebenweg { margin: 0; }
.formular-fuss a.nebenweg { color: #6b2018; text-decoration: none; }
.formular-fuss a.nebenweg:hover { text-decoration: underline; }

@media (max-width: 560px) {
  .wrap { padding-inline: 16px; }
  .balken-innen { padding-block: 16px; }
  .schild { width: 92px; height: 92px; margin-block: -16px 0; }
  .marke-name { font-size: 1.6rem; }
  .gruss { font-size: 1.1rem; }
  .marke { gap: 12px; }
  .anschlag { padding: 26px 15px 16px; gap: 13px; }
  .wappenfeld { width: 40px; height: 40px; }
  .wappenfeld .symbol { width: 22px; height: 22px; }
  .satz { font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* Abwesenheit: zwei Datumsfelder nebeneinander, am Handy untereinander. */
.feld-paar { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0 18px; }
.fehlt-knopf { display: flex; margin-top: 14px; }
.doch-da { display: flex; justify-content: center; margin-top: 16px; }
.doch-da .werkzeug { color: #f1e3c4; }
.abwesend-liste { margin-bottom: 22px; }
.abwesend-liste ul { list-style: none; margin: 0; padding: 0; }
.abwesend-liste li {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px;
  padding: 10px 0; border-top: 1px solid rgba(90, 64, 34, 0.25);
}
.abwesend-zeit { font-family: var(--schrift-zahl); font-size: 0.9rem; }
.abwesend-werkzeug { display: flex; align-items: center; gap: 14px; }
.abwesend-werkzeug form { margin: 0; display: flex; }
.abwesend-werkzeug .werkzeug { font-size: 0.6rem; line-height: 1.4; }