/* 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');
}
@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;

  /* 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;

  --schrift-titel: "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:
    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.1), transparent 66%);
}
/* 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. */
body::after {
  inset-inline: 0;
  bottom: 0;
  height: clamp(140px, 21vh, 215px);
  background:
    url('horizont.png') bottom center / cover no-repeat,
    /* Licht hinter dem Kamm. Eine schwarze Silhouette auf schwarzem Grund
       waere unsichtbar; erst der Schein dahinter macht sie zur Kante. Warm
       in der Talsenke, rot darueber — das Dorf unten, der Blutmond oben. */
    radial-gradient(44% 76% at 50% 98%, rgba(201, 169, 106, 0.26), transparent 70%),
    radial-gradient(110% 100% at 50% 118%, rgba(139, 0, 15, 0.34), transparent 66%);
}

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

.wrap { max-width: 1180px; margin: 0 auto; padding-inline: 20px; }
/* 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;
  background:
    /* Links dunkler als rechts: Der Schriftzug steht links, der Blutmond
       rechts. So bleibt beides lesbar, ohne das Bild flach zu decken. */
    linear-gradient(90deg, rgba(16, 12, 9, 0.8) 0%, rgba(16, 12, 9, 0.42) 40%, rgba(16, 12, 9, 0) 72%),
    linear-gradient(180deg, rgba(16, 12, 9, 0.46) 0%, rgba(16, 12, 9, 0.66) 52%, rgba(16, 12, 9, 0.94) 100%),
    url('kopfleiste.jpg') center 46% / cover no-repeat;
  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;
}
.wappen {
  width: 62px; height: 62px; flex: none;
  filter: drop-shadow(0 0 16px rgba(139, 0, 15, 0.55));
}
.marke-text { display: flex; flex-direction: column; gap: 4px; line-height: 1.05; }
.marke-name {
  font-family: var(--schrift-titel); font-weight: 700;
  font-size: 1.42rem; letter-spacing: 0.1em; text-transform: uppercase;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}
.marke-zusatz {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--schrift-titel); font-size: 0.64rem; font-weight: 600;
  letter-spacing: 0.3em; text-transform: uppercase; color: var(--messing);
}
/* Die Raute aus dem Wappen als Trennzeichen — dieselbe Form wie die
   Zierlinie und die Siegel, damit die Seite eine Handschrift behaelt. */
.marke-zusatz::before {
  content: ""; width: 5px; height: 8px; flex: none;
  background: var(--crimson);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.konto { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; color: var(--text-schwach); }
.konto b { color: var(--text); font-weight: 600; }
.balken form { margin: 0; display: flex; }

/* Der Anfangsbuchstabe statt eines Discord-Bildes — das waere die einzige
   fremde Adresse der Seite. */
.siegel {
  width: 30px; height: 30px; flex: none;
  display: grid; place-items: center;
  background: linear-gradient(160deg, var(--crimson), var(--crimson-tief));
  color: #f6e2de;
  font-family: var(--schrift-titel); font-size: 0.78rem; font-weight: 700;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

/* ---------- 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-titel); font-weight: 600;
  font-size: 0.92rem; letter-spacing: 0.2em; text-transform: uppercase;
  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) 330px;
  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 die Termine: Was heute ansteht, ist dringender als
     ein Aushang von vorgestern. */
  .spalte { order: -1; }
}

.spalte { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 20px; }
@media (max-width: 900px) { .spalte { position: static; } }

/* ---------- 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.
 */
.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-size: 0.6rem; letter-spacing: 0.28em; color: var(--text-schwach);
  border: 0; padding-bottom: 0; margin-bottom: 10px;
}

/* ---------- Filter ---------- */

.filter { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 20px; }
.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(340px, 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-titel); font-weight: 600;
  font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--text-schwach);
}
.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; }

.anschlag {
  --art: var(--kante-hell);
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: 16px; align-items: start;
  border: 1px solid var(--kante);
  border-left: 2px solid var(--art);
  padding: 18px 22px 19px;
  transition: border-color 0.18s, transform 0.18s;
}
.anschlag:hover { border-color: var(--kante-hell); border-left-color: var(--art); }

/**
 * Vier geschmiedete Nieten in den Ecken. Der Anschlag ist damit eine
 * angeschlagene Platte und kein Kaertchen — dieselbe Idee wie das Wappen,
 * nur im Kleinen. Sie kommen als eigene Datei ueber den Hintergrund und
 * brauchen kein Markup: Die CSP erlaubt `img-src 'self'`, also eine Datei
 * daneben, aber **keine** data:-Adresse im Stil.
 */
.anschlag {
  position: relative;
  background-image:
    url('niete.svg'), url('niete.svg'), url('niete.svg'), url('niete.svg'),
    linear-gradient(135deg, rgba(42, 33, 26, 0.94), rgba(26, 20, 16, 0.94));
  background-repeat: no-repeat;
  background-size: 14px 14px, 14px 14px, 14px 14px, 14px 14px, auto;
  background-position:
    left 7px top 7px, right 7px top 7px,
    left 7px bottom 7px, right 7px bottom 7px, 0 0;
}

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

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

/* Das Sinnbild sitzt im Sechseck des Bot-Wappens statt als Beiwerk in der
   Kopfzeile. Bei einem einzigen Aushang ist das der Anker des Kaertchens. */
.wappenfeld {
  width: 46px; height: 46px; flex: none;
  display: grid; place-items: center;
  color: var(--art);
  background: color-mix(in srgb, var(--art) 15%, #14100e);
  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);
}

.richtung {
  font-family: var(--schrift-titel); font-size: 0.54rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 3px 8px; color: #f4dedb;
  background: var(--crimson-tief);
  clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%);
}
.anschlag[data-richtung="biete"] .richtung {
  color: #17130d; background: var(--messing);
}

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

.satz { margin: 0; font-size: 1.06rem; line-height: 1.45; }
.satz b { font-weight: 600; color: var(--messing-hell); }
.person {
  font-family: var(--schrift-titel); font-weight: 600;
  letter-spacing: 0.02em; color: #fff;
}
.wen { margin: 0; color: var(--text-schwach); font-size: 0.92rem; }
.anschlag-fuss {
  margin: 4px 0 0; padding-top: 9px;
  border-top: 1px solid var(--kante);
  font-family: var(--schrift-zahl); font-size: 0.71rem; color: var(--text-schwach);
}

/**
 * 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 ---------- */

.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: 520px; padding-block: 70px 90px; }

/* Die Anmeldung ist das Wappen, ein Satz und ein Knopf. Sie steht mittig im
   Fenster statt oben angeheftet: Auf dieser Seite gibt es nichts, wohin man
   scrollen koennte, und ein Kopf mit zwei Zeilen darunter sah unfertig aus. */
.anmeldung {
  display: flex; flex-direction: column; align-items: center; gap: 26px;
  min-height: calc(100vh - 220px);
  justify-content: center;
  padding-block: 60px 100px; text-align: center;
}
.anmeldung::before {
  content: ""; width: 168px; height: 168px; margin-bottom: 4px;
  background: url('siegel.png') no-repeat center / contain;
  filter: drop-shadow(0 12px 26px rgba(0, 0, 0, 0.75));
}
.anmeldung-satz { margin: 0; max-width: 46ch; color: var(--text-schwach); font-size: 1.05rem; }
.anmeldung-satz b { color: var(--messing); font-weight: 600; }
.anmeldung .knopf { padding: 14px 30px; font-size: 0.78rem; }

@media (max-width: 560px) {
  .wrap { padding-inline: 16px; }
  .balken-innen { padding-block: 16px; }
  .wappen { width: 48px; height: 48px; }
  .marke-name { font-size: 1.16rem; }
  .marke { gap: 12px; }
  .anschlag { padding: 16px 16px 17px; 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; }
}