/* werkstatt.css - die Werkstatt-Welt der Startseite und der Meldungsseiten.

   Seit 23.09.2026. Jede Form hat einen Grund aus der eigenen Welt der Seite:
   das Logo (der Monitor, der in Pixel zerfaellt), die Manufaktur (Messing,
   Typenschild), die 90er (Spieleschachtel, Diskette) und die Post (jede
   Neuigkeit ist ein Brief aus der Werkstatt).

   Alles mit wk- beginnt, damit sich nichts mit stil.css ueberschneidet. Die
   Meldungskarten (nw-*) werden nur innerhalb von #news umgestaltet; das
   Archiv auf news.html behaelt seine Karten mit Bild.

   Kursive gibt es bei Playfair auf dem Server nicht. Deshalb steht hier
   nirgends font-style: italic - der Browser wuerde die Schrift nur schraeg
   stellen, das sieht billig aus. Wo betont werden soll, stehen Kapitaelchen. */

@font-face {
  font-family: 'Playfair Display SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/playfair-display-sc-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Playfair Display SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/playfair-display-sc-400-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;
}

:root {
  --wk-sc: 'Playfair Display SC', 'Playfair Display', Georgia, serif;
  --wk-serif: 'Playfair Display', Georgia, serif;
  --wk-pixel: 'Press Start 2P', 'Courier New', monospace;
  --wk-messing: linear-gradient(135deg, #E3D09C 0%, #B89A58 38%, #E6D6A6 52%, #A58546 70%, #D6BF86 100%);
  --wk-holz: #B79A62;
  --wk-holz-kante: #7E6332;
  --wk-papier: #EFE4C8;
  --wk-tinte: #34261A;
  --wk-rot: #8A2E17;
  --wk-anpfiff: #1A472A;
  --wk-stempel-blau: rgba(40, 40, 70, .78);
}

/* ======================= Erster Bildschirm: das Logo als Buehne =======================
   Alle Masse in Logo-Einheiten (logo.svg, viewBox 360) mal --s.
   Rahmen: 11 Einheiten dick. Obere Kante durchgehend bis 121 Einheiten vor
   der rechten Aussenkante, rechte Kante erst ab 57 Einheiten unter der
   Oberkante. Dazwischen zeichnet .wk-ecke den echten Pixel-Zerfall. */

#hero.wk-held-bereich {
  --s: 2px;
  min-height: 0; display: block; text-align: center;
  padding: calc(66 * var(--s)) 1.5rem 1.5rem;
}
/* Nur ganze Pixel je Logo-Einheit: bei 1,5 oder 1,1 laegen die Kanten
   zwischen zwei Bildschirmpixeln und saehen verschwommen aus. */
@media (max-width: 760px) { #hero.wk-held-bereich { --s: 1px; padding-inline: 1rem; } }

.wk-buehne { display: grid; justify-items: center; max-width: 820px; margin: 0 auto; }
.wk-monitor {
  --n: #031C42;
  position: relative; width: calc(100% - 17 * var(--s)); margin-right: calc(17 * var(--s));
  padding: calc(11 * var(--s));
  border-radius: calc(5 * var(--s)) 0 calc(5 * var(--s)) calc(5 * var(--s));
  background:
    linear-gradient(var(--n), var(--n)) left top / calc(11 * var(--s)) 100% no-repeat,
    linear-gradient(var(--n), var(--n)) left bottom / 100% calc(11 * var(--s)) no-repeat,
    linear-gradient(var(--n), var(--n)) left top / calc(100% - 121 * var(--s)) calc(11 * var(--s)) no-repeat,
    linear-gradient(var(--n), var(--n)) right bottom / calc(11 * var(--s)) calc(100% - 62 * var(--s)) no-repeat;
}
.wk-ecke {
  position: absolute; pointer-events: none; overflow: hidden;
  right: calc(-17 * var(--s)); top: calc(-61 * var(--s));
  width: calc(160 * var(--s)); height: calc(135 * var(--s));
}
.wk-schirm {
  display: grid; justify-items: center; gap: 0.8rem;
  padding: calc(2 * var(--s)) calc(20 * var(--s)) calc(26 * var(--s));
}
/* Burg und Schriftzug: nachgezeichnet als Vektor, in Logo-Einheiten
   (viewBox 36 114 288 148). Genau so gross und so weit unter der
   Innenkante wie im Logo, scharf in jeder Groesse. */
.wk-logozeichen {
  display: block; width: calc(288 * var(--s)); max-width: 100%; height: auto; aspect-ratio: 288 / 148;
  margin: 0 calc(-8 * var(--s)) calc(4 * var(--s));
}
.wk-titel {
  font-family: var(--wk-serif); font-weight: 700; color: var(--rahmen, #031C42);
  font-size: clamp(1.8rem, 4.4vw, 2.8rem); line-height: 1.08; margin: 0.2rem 0 0; text-wrap: balance;
}
.wk-titel span { display: block; font-weight: 400; color: var(--titel, #753917); }
.wk-satz { margin: 0; max-width: 44ch; font-size: 1.02rem; line-height: 1.6; color: var(--text, #2A354E); }
.wk-weiter {
  font: 600 0.95rem/1 'Inter', sans-serif; color: var(--titel, #753917);
  text-decoration: underline; text-decoration-color: var(--linie, #A9894A); text-underline-offset: 5px;
}
.wk-fuss { display: block; width: calc(104 * var(--s)); height: calc(36 * var(--s)); margin: calc(1 * var(--s)) calc(17 * var(--s)) 0 0; }

/* Typenschild: eine Zeile Messing unter dem Fuss */
.wk-typenschild {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.35rem 1.4rem;
  margin: 1.2rem calc(17 * var(--s)) 0 0; padding: 0.6rem 1.4rem; border-radius: 3px;
  background: var(--wk-messing); color: #3A2A0E; text-shadow: 0 1px 0 rgba(255,255,255,.4);
  box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 -1px 0 rgba(0,0,0,.25) inset, 0 2px 4px rgba(60,40,10,.25);
}
.wk-typenschild div { display: flex; gap: 0.4rem; align-items: baseline; }
.wk-typenschild dt { font: 400 0.8rem/1.4 var(--wk-sc); letter-spacing: .06em; opacity: .85; }
.wk-typenschild dd { margin: 0; font: 600 0.85rem/1.4 'Inter', sans-serif; font-variant-numeric: tabular-nums; }

/* ======================= Das Regal =======================
   Ein Schrank wie in einer Werkstatt: Seitenwangen und Deckbrett aus
   dunklem Holz, eine Rueckwand aus Brettern, Faecher mit dickem Boden und
   an der Vorderkante ein Etikettenhalter aus Messing. Die Werkbank steht
   darunter als eigenes Moebel mit Platte und Beinen. */
.wk-regal { display: grid; gap: 2.8rem; margin-top: 1.8rem; }
.wk-schrank {
  --holz-dunkel: #5E4428; --holz-mittel: #7E6034;
  position: relative; padding: 22px 22px 0; border-radius: 4px 4px 2px 2px;
  background:
    linear-gradient(90deg, rgba(0,0,0,.18), transparent 3%, transparent 97%, rgba(0,0,0,.18)),
    repeating-linear-gradient(90deg, #A8834F 0 118px, #9A7746 118px 120px),
    #A8834F;
  box-shadow:
    inset 0 0 0 14px var(--holz-dunkel),
    inset 0 0 0 16px #4A331D,
    inset 0 22px 26px -10px rgba(0,0,0,.35),
    0 16px 26px -18px rgba(40,25,10,.7);
}
/* Deckbrett mit leichtem Ueberstand */
.wk-schrank::before {
  content: ""; position: absolute; left: -8px; right: -8px; top: -12px; height: 16px; border-radius: 3px;
  background: linear-gradient(180deg, #8A6A3F, #5E4428 70%, #4A331D);
  box-shadow: 0 3px 4px rgba(0,0,0,.3);
}
.wk-fach { position: relative; padding: 26px 18px 0; }
.wk-fach::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 26px;
  background: linear-gradient(180deg, #C9A874 0 5px, #B08A55 5px 8px, #8E6B3E 8px 22px, #5E4428 22px 26px);
  box-shadow: 0 8px 10px -6px rgba(30,18,6,.55);
}
.wk-fach + .wk-fach { margin-top: 6px; }
/* Schatten, den der Boden darueber auf die Rueckwand wirft */
.wk-fach::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 22px;
  background: linear-gradient(180deg, rgba(0,0,0,.22), transparent); pointer-events: none;
}
.wk-brett {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1.8rem 1.4rem;
  padding-inline: 10px; overflow: hidden; position: relative; z-index: 1;
}
/* Fachboden: jedes Stueck bekommt sein Stueck Boden. Nebeneinander ergibt das
   einen durchgehenden Boden, auch wenn die Reihe auf dem Handy umbricht. */
.wk-brett > * { position: relative; padding-bottom: 26px; }
.wk-brett > *::after {
  content: ""; position: absolute; left: -30px; right: -30px; bottom: 0; height: 26px; z-index: -1;
  background:
    linear-gradient(180deg, #C9A874 0 5px, #B08A55 5px 8px, #8E6B3E 8px 22px, #5E4428 22px 26px);
  box-shadow: 0 8px 10px -6px rgba(30,18,6,.55);
}
.wk-brett a { text-decoration: none; color: inherit; }
.wk-brett a:focus-visible .wk-schachtel,
.wk-brett a:focus-visible .wk-diskette { outline: 3px solid var(--linie, #A9894A); outline-offset: 4px; }
/* Was im Fach steht, wirft einen Schatten auf den Boden */
/* Nur die Disketten: ein filter auf der perspektivisch gedrehten Schachtel
   laesst Chromium das Bild darin nicht mehr zeichnen. */
.wk-brett .wk-diskette { filter: drop-shadow(0 6px 5px rgba(30,18,6,.35)); }

/* Etikettenhalter aus Messing an der Vorderkante des Bodens */
.wk-fach > .wk-brett-titel {
  position: absolute; left: 50%; bottom: 3px; transform: translateX(-50%); z-index: 2; margin: 0;
  padding: 3px 18px 2px; border-radius: 2px;
  font: 400 0.95rem/1.2 var(--wk-sc); letter-spacing: .16em; color: #3A2A0E;
  background: var(--wk-messing); text-shadow: 0 1px 0 rgba(255,255,255,.45);
  box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 -1px 0 rgba(0,0,0,.3) inset, 0 1px 2px rgba(0,0,0,.35);
}
.wk-fach > .wk-brett-titel::before, .wk-fach > .wk-brett-titel::after {
  content: ""; position: absolute; top: 50%; width: 4px; height: 4px; margin-top: -2px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #F2E6C4, #6E5625);
}
.wk-fach > .wk-brett-titel::before { left: 3px; }
.wk-fach > .wk-brett-titel::after { right: 3px; }
.wk-brett-titel { font: 400 1rem/1 var(--wk-sc); letter-spacing: .08em; color: var(--gold, #7A6335); margin: 0 0 0.9rem; }

/* Anpfiff1 als Pappschachtel wie die Managerspiele damals, in Gruen und Weiss */
.wk-bigbox { display: flex; align-items: flex-end; gap: 1.1rem; }
.wk-schachtel {
  width: 170px; height: 226px; position: relative; flex: none;
  transition: transform .2s ease;
  background: var(--wk-anpfiff); color: #fff; border: 3px solid #fff; border-radius: 2px; overflow: hidden;
  box-shadow: 10px 6px 0 -2px #0F2E1B, 12px 10px 14px rgba(0,0,0,.25);
  display: grid; grid-template-rows: auto 1fr auto;
}
.wk-bigbox:hover .wk-schachtel { transform: translateY(-4px); }
.wk-schachtel .wk-name { font: 400 13px/1.3 var(--wk-pixel); padding: 12px 10px 6px; }
.wk-schachtel .wk-name small { display: block; font-size: 7px; line-height: 1.6; margin-top: 6px; opacity: .9; }
.wk-spielfeld {
  margin: 6px 10px; min-height: 104px; border: 2px solid rgba(255,255,255,.85); position: relative;
  display: grid; place-items: center;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 16px, transparent 16px 32px);
}
.wk-spielfeld::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; border-left: 2px solid rgba(255,255,255,.85); }
.wk-spielfeld::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 84px; height: 84px; margin: -42px 0 0 -42px;
  border: 2px solid rgba(255,255,255,.9); border-radius: 50%; z-index: 2; pointer-events: none;
}
.wk-spielfeld img {
  width: 78px; height: 78px; border-radius: 50%; object-fit: cover; position: relative; z-index: 1;
  box-shadow: 0 0 0 6px var(--wk-anpfiff);
}
.wk-schachtel .wk-unten { font: 400 7px/1.5 var(--wk-pixel); padding: 8px 10px; background: #fff; color: var(--wk-anpfiff); }
.wk-preisschild {
  align-self: flex-end; margin-bottom: 6px; max-width: 180px; background: var(--schirm, #FBFAE8);
  border: 1px solid var(--haarlinie, rgba(3,28,66,.22)); padding: 0.65rem 0.8rem; font-size: 0.82rem; line-height: 1.45;
  box-shadow: 0 2px 3px rgba(0,0,0,.12); color: var(--text, #2A354E);
}
.wk-preisschild b { display: block; font: 400 12px/1.3 var(--wk-pixel); color: var(--wk-anpfiff); margin-bottom: 6px; }

/* Die kleinen Apps als Disketten */
.wk-diskette {
  display: block; width: 136px; height: 140px; position: relative; border-radius: 3px;
  background: var(--farbe, #1d2340); transform: rotate(var(--dreh, 0deg)); transition: transform .2s ease;
  clip-path: polygon(0 0, 92% 0, 100% 7%, 100% 100%, 0 100%);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.25);
}
a:hover > .wk-diskette { transform: rotate(0deg) translateY(-4px); }
.wk-diskette::before {
  content: ""; position: absolute; left: 26%; top: 0; width: 50%; height: 30%;
  background: linear-gradient(90deg, #BFC4C9, #E9ECEE 45%, #AEB4BA); border-radius: 0 0 2px 2px;
}
.wk-diskette::after { content: ""; position: absolute; left: 53%; top: 4%; width: 11%; height: 19%; background: var(--farbe, #1d2340); }
.wk-etikett {
  position: absolute; left: 7%; right: 7%; bottom: 6%; height: 58%; background: #FBFAF2; border-radius: 2px;
  padding: 6px 8px; display: grid; grid-template-columns: 30px 1fr; grid-template-areas: "bild ver" "name name";
  gap: 4px 8px; align-content: center; align-items: center;
}
.wk-etikett img { grid-area: bild; width: 30px; height: 30px; border-radius: 7px; }
.wk-etikett b { grid-area: name; font: 600 12.5px/1.15 'Inter', sans-serif; color: #1B2440; }
.wk-etikett span { grid-area: ver; justify-self: end; font: 400 13px/1.1 var(--wk-serif); color: var(--wk-rot); }

/* Werkbank: eine Hobelbank. Jedes Stueck bekommt sein Stueck Arbeitsplatte,
   auf dem das Symbol steht, und darunter sein Stueck Zarge, an der vorn ein
   Zettel mit Name und Stand haengt. Nebeneinander ergibt das eine durchgehende
   Bank; bricht die Reihe auf dem Handy um, bekommt jede Reihe ihre eigene. */
.wk-werkbank { position: relative; padding: 0 0 64px; width: fit-content; max-width: 100%; }
.wk-werkbank > .wk-brett-titel {
  display: inline-block; margin: 0 0 1rem 6px; padding: 3px 18px 2px; border-radius: 2px;
  font: 400 0.95rem/1.2 var(--wk-sc); letter-spacing: .16em; color: #3A2A0E;
  background: var(--wk-messing); text-shadow: 0 1px 0 rgba(255,255,255,.45);
  box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 1px 2px rgba(0,0,0,.35);
}
.wk-werkstuecke { display: flex; flex-wrap: wrap; gap: 1.6rem 0; }
.wk-werkstueck {
  position: relative; width: 158px; padding: 0 14px 14px; text-decoration: none;
  display: grid; grid-template-rows: 88px 22px auto; justify-items: center;
}
/* Arbeitsplatte mit heller Vorderkante */
.wk-werkstueck::before {
  content: ""; grid-row: 2; justify-self: stretch; margin-inline: -14px;
  background: linear-gradient(180deg, #D8B983 0 5px, #C09A62 5px 9px, #A47E4B 9px 22px);
  box-shadow: 0 6px 8px -6px rgba(30,18,6,.6);
}
/* Zarge unter der Platte, dahinter haengt der Zettel */
.wk-werkstueck::after {
  content: ""; position: absolute; left: 0; right: 0; top: 110px; bottom: 0; z-index: -1;
  background: linear-gradient(180deg, #6E5031, #7E6034 40%, #6A4C2E);
}
.wk-werkstuecke { isolation: isolate; }
.wk-werkstueck img {
  grid-row: 1; align-self: end; width: 80px; height: 80px; border-radius: 14px; display: block;
  box-shadow: 0 5px 5px -2px rgba(30,18,6,.4); transition: transform .2s ease;
}
.wk-werkstueck:hover img { transform: translateY(-3px); }
/* Der Zettel: Papier mit Reissnagel, Name und Stand */
.wk-zettel {
  grid-row: 3; position: relative; margin-top: 10px; width: 100%;
  display: grid; justify-items: center; gap: 6px; text-align: center;
  padding: 11px 8px 9px; background: #F4EBD2; border-radius: 1px;
  box-shadow: 0 3px 5px rgba(0,0,0,.35);
}
.wk-zettel::before {
  content: ""; position: absolute; top: 3px; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #F2E6C4, #6E5625);
}
.wk-werkstueck:nth-child(odd) .wk-zettel { transform: rotate(-1.2deg); }
.wk-werkstueck:nth-child(even) .wk-zettel { transform: rotate(1deg); }
.wk-zettel b { font: 600 0.8rem/1.25 'Inter', sans-serif; color: var(--rahmen, #031C42); }
.wk-zettel .wk-stempel { box-shadow: inset 0 0 0 1px #F4EBD2, inset 0 0 0 2.5px currentColor; }
/* Beine unter der Bank */
.wk-werkbank::after {
  content: ""; position: absolute; left: 6%; right: 6%; bottom: 0; height: 64px;
  background: linear-gradient(90deg, #5E4428 0 22px, transparent 22px calc(100% - 22px), #5E4428 calc(100% - 22px));
}

/* Stempel: Farbe auf Papier, leicht schief */
.wk-stempel {
  display: inline-block; font: 400 10px/1 var(--wk-sc); letter-spacing: .12em; text-transform: uppercase;
  color: var(--wk-rot); border: 2px solid currentColor; padding: 4px 6px 3px; border-radius: 2px;
  transform: rotate(-4deg); opacity: .85;
  box-shadow: inset 0 0 0 1px var(--grund-tief, #E7DFC6), inset 0 0 0 2.5px currentColor;
}
.wk-stempel.wk-gruen { color: var(--gruen, #245741); }

@media (max-width: 560px) {
  .wk-diskette { width: 118px; height: 122px; }
  .wk-etikett b { font-size: 11.5px; }
  /* Jede Reihe fuellt die ganze Breite, damit die Bank oben und unten
     gleich lang ist und die Beine unter ihr stehen. */
  .wk-werkbank { width: 100%; }
  .wk-werkstueck { width: auto; flex: 1 0 128px; }
  .wk-stempel { font-size: 9px; letter-spacing: .08em; padding: 3px 5px 2px; }
}

/* ======================= Werkstattbuch: Post aus der Werkstatt =======================
   Die Karten bleiben dasselbe Markup wie vorher (inhalte_build.py und
   news.js), nur innerhalb von #news werden sie zu Umschlaegen:
   Plakette = Stempel links oben, App-Symbol = Briefmarke rechts oben,
   Datum = Poststempel ueber der Marke. */
/* stil.css legt die Startseiten-Liste auf #nw-raster fest (Zeilen mit
   Projektspalte, Kasten drumherum). Deshalb haengt hier alles an derselben
   Kennung, sonst gewinnt die alte Liste. */
#news .container > .nw-bereich, :is(#news #nw-raster, #nw-archiv) {
  background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0;
}
:is(#news #nw-raster, #nw-archiv) {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 1.8rem 1.5rem; padding: 0.4rem 0.3rem 0.8rem;
}
:is(#news #nw-raster, #nw-archiv) .nw-karte:first-child { border-top: 0; }
:is(#news #nw-raster, #nw-archiv) .nw-karte { display: block; margin: 0; border-bottom: 0; }
:is(#news #nw-raster, #nw-archiv) .nw-karte:hover { transform: rotate(var(--wk-dreh, 0deg)) translateY(-3px); }
:is(#news #nw-raster, #nw-archiv) .nw-inhalt { grid-template-columns: none; align-items: stretch; }
:is(#news #nw-raster, #nw-archiv) .nw-inhalt > * { grid-column: auto; grid-row: auto; }
:is(#news #nw-raster, #nw-archiv) .nw-projekt { display: block; font-weight: 400; }
:is(#news #nw-raster, #nw-archiv) .nw-trenner { grid-column: 1 / -1; border: 0; padding: 0; }
:is(#news #nw-raster, #nw-archiv) .nw-trenner::before, :is(#news #nw-raster, #nw-archiv) .nw-trenner::after { display: none; }

:is(#news #nw-raster, #nw-archiv) .nw-karte {
  position: relative; overflow: visible; border: 0; border-radius: 0;
  background-color: var(--wk-papier); color: var(--wk-tinte);
  background-image:
    linear-gradient(135deg, rgba(0,0,0,.035) 0 50%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, transparent 60%, rgba(122,84,36,.22) 100%);
  box-shadow: 0 8px 14px -8px rgba(60,40,10,.6), 0 1px 2px rgba(60,40,10,.3);
  padding: 0; transform: rotate(var(--wk-dreh, 0deg));
}
:is(#news #nw-raster, #nw-archiv) .nw-karte:nth-child(3n+1) { --wk-dreh: -0.6deg; }
:is(#news #nw-raster, #nw-archiv) .nw-karte:nth-child(3n+2) { --wk-dreh: 0.5deg; }
:is(#news #nw-raster, #nw-archiv) .nw-karte:nth-child(3n) { --wk-dreh: -0.2deg; }
:is(#news #nw-raster, #nw-archiv) .nw-karte::before, :is(#news #nw-raster, #nw-archiv) .nw-karte::after { display: none; }
:is(#news #nw-raster, #nw-archiv) .nw-inhalt { position: static; padding: 5.6rem 1.3rem 3.2rem; display: grid; gap: 0.3rem; }
:is(#news #nw-raster, #nw-archiv) .nw-projekt {
  position: static; margin: 0; font: 400 0.82rem/1.3 var(--wk-sc); letter-spacing: .06em; color: #6B5A3A;
}
/* Briefmarke: das App-Symbol mit gezaehntem Rand */
:is(#news #nw-raster, #nw-archiv) .nw-symbol {
  position: absolute; right: 16px; top: 14px; width: 62px; height: 62px; padding: 6px; box-sizing: content-box;
  border-radius: 0; object-fit: cover;
  background: radial-gradient(circle, transparent 0 2.6px, #FBF8EE 3px) -4px -4px / 8px 8px;
  filter: drop-shadow(0 1px 1px rgba(60,40,10,.35)); z-index: 0;
}
:is(#news #nw-raster, #nw-archiv) .nw-zeile { position: static; margin: 0; }
/* Stempel links oben */
:is(#news #nw-raster, #nw-archiv) .nw-plakette {
  position: absolute; right: 16px; bottom: 16px; left: auto; top: auto; background: none; margin: 0;
  font: 400 10px/1 var(--wk-sc); letter-spacing: .12em; text-transform: uppercase;
  color: var(--wk-rot); border: 2px solid currentColor; padding: 5px 7px 4px; border-radius: 2px;
  transform: rotate(-5deg); opacity: .85;
  box-shadow: inset 0 0 0 1px var(--wk-papier), inset 0 0 0 2.5px currentColor;
}
:is(#news #nw-raster, #nw-archiv) .nw-p-release { color: var(--gruen, #245741); }
:is(#news #nw-raster, #nw-archiv) .nw-p-press { color: #326C99; }
:is(#news #nw-raster, #nw-archiv) .nw-p-preview, :is(#news #nw-raster, #nw-archiv) .nw-p-note { color: #6B5A3A; }
/* Poststempel: Ort oben, Datum in der Mitte, Wellen laufen ueber die Marke */
:is(#news #nw-raster, #nw-archiv) .nw-datum {
  position: absolute; left: 16px; top: 12px; width: 72px; height: 72px; border-radius: 50%;
  border: 2px solid var(--wk-stempel-blau); display: grid; place-items: center; align-content: center;
  font-size: 0; color: var(--wk-stempel-blau); transform: rotate(-12deg); z-index: 2;
}
:is(#news #nw-raster, #nw-archiv) .nw-datum::before { content: "RUDOLSTADT"; font: 700 7px/1 'Inter', sans-serif; letter-spacing: .02em; }
:is(#news #nw-raster, #nw-archiv) .nw-datum::after {
  content: attr(data-kurz); font: 700 11px/1 'Inter', sans-serif; letter-spacing: .02em;
  border-block: 1px solid var(--wk-stempel-blau); padding: 2px 3px; margin-top: 3px;
}
:is(#news #nw-raster, #nw-archiv) .nw-kartentitel { margin: 0.1rem 0 0; font: 700 1.12rem/1.3 var(--wk-serif); }
:is(#news #nw-raster, #nw-archiv) .nw-kartenlink { color: var(--wk-tinte); text-decoration: none; }
:is(#news #nw-raster, #nw-archiv) .nw-kartenlink::after { content: ""; position: absolute; inset: 0; z-index: 2; }
:is(#news #nw-raster, #nw-archiv) .nw-text { font: 400 0.92rem/1.5 var(--wk-serif); color: #4A3A2A; margin: 0.15rem 0 0; }
:is(#news #nw-raster, #nw-archiv) .nw-tatzeile, :is(#news #nw-raster, #nw-archiv) .nw-mehr { position: relative; z-index: 3; margin-top: 0.4rem; }
:is(#news #nw-raster, #nw-archiv) .nw-mehr, :is(#news #nw-raster, #nw-archiv) .nw-tat { font: 600 0.82rem/1.3 'Inter', sans-serif; color: var(--titel, #753917); }
:is(#news #nw-raster, #nw-archiv) .nw-karte:hover { box-shadow: 0 12px 18px -8px rgba(60,40,10,.6), 0 1px 2px rgba(60,40,10,.3); }

/* Die empfohlenen: kleinere Umschlaege ohne Kurztext */
:is(#news #nw-raster, #nw-archiv) .nw-karte:not(.nw-neu) .nw-inhalt { padding: 4.8rem 1.1rem 2.8rem; }
:is(#news #nw-raster, #nw-archiv) .nw-karte:not(.nw-neu) .nw-text,
:is(#news #nw-raster, #nw-archiv) .nw-karte:not(.nw-neu) .nw-tatzeile,
:is(#news #nw-raster, #nw-archiv) .nw-karte:not(.nw-neu) .nw-mehr { display: none; }
:is(#news #nw-raster, #nw-archiv) .nw-karte:not(.nw-neu) .nw-kartentitel { font-size: 0.98rem; }
:is(#news #nw-raster, #nw-archiv) .nw-karte:not(.nw-neu) .nw-symbol { width: 48px; height: 48px; padding: 5px; }
:is(#news #nw-raster, #nw-archiv) .nw-karte:not(.nw-neu) .nw-datum { width: 62px; height: 62px; left: 14px; top: 12px; }
:is(#news #nw-raster, #nw-archiv) .nw-trenner { font: 400 1rem/1 var(--wk-sc); letter-spacing: .08em; color: var(--gold, #7A6335); margin-top: 1rem; }

/* ======================= Meldungsseite: der ganze Brief ======================= */
.ar-brief .ar-blatt {
  position: relative; background-color: var(--wk-papier); color: var(--wk-tinte);
  background-image:
    radial-gradient(circle at 86% 12%, rgba(140,96,40,.12) 0 5px, transparent 11px),
    radial-gradient(circle at 12% 88%, rgba(140,96,40,.10) 0 4px, transparent 10px),
    radial-gradient(ellipse at 50% 50%, transparent 60%, rgba(122,84,36,.25) 100%);
  box-shadow: 0 14px 26px -16px rgba(60,40,10,.6), 0 1px 2px rgba(60,40,10,.3);
  padding: 7rem 2.6rem 5rem;
}
@media (max-width: 600px) { .ar-brief .ar-blatt { padding: 6.6rem 1.2rem 4.6rem; } }
.ar-brief .ar-kopf { border-left: 0; padding-left: 0; margin-bottom: 1.8rem; }
.ar-brief .ar-projekt { font: 400 0.9rem/1.3 var(--wk-sc); letter-spacing: .06em; color: #6B5A3A; }
.ar-brief .ar-kopf h1 { font-family: var(--wk-serif); color: var(--wk-tinte); text-wrap: balance; }
.ar-brief .ar-marke {
  position: absolute; right: 22px; top: 18px; width: 70px; height: 70px; padding: 7px; box-sizing: content-box;
  object-fit: cover; background: radial-gradient(circle, transparent 0 2.6px, #FBF8EE 3px) -4px -4px / 8px 8px;
  filter: drop-shadow(0 1px 1px rgba(60,40,10,.35)); z-index: 0;
}
.ar-brief .nw-plakette {
  position: absolute; right: 30px; bottom: 30px; background: none; margin: 0;
  font: 400 11px/1 var(--wk-sc); letter-spacing: .12em; text-transform: uppercase;
  color: var(--wk-rot); border: 2px solid currentColor; padding: 6px 8px 5px; border-radius: 2px;
  transform: rotate(-5deg); opacity: .85;
  box-shadow: inset 0 0 0 1px var(--wk-papier), inset 0 0 0 2.5px currentColor;
}
.ar-brief .nw-p-release { color: var(--gruen, #245741); }
.ar-brief .nw-datum {
  position: absolute; left: 24px; top: 20px; width: 80px; height: 80px; border-radius: 50%;
  border: 2px solid var(--wk-stempel-blau); display: grid; place-items: center; align-content: center;
  font-size: 0; color: var(--wk-stempel-blau); transform: rotate(-12deg); z-index: 2;
}
.ar-brief .nw-datum::before { content: "RUDOLSTADT"; font: 700 8.5px/1 'Inter', sans-serif; letter-spacing: .08em; }
.ar-brief .nw-datum::after {
  content: attr(data-kurz); font: 700 12px/1 'Inter', sans-serif;
  border-block: 1px solid var(--wk-stempel-blau); padding: 2px 3px; margin-top: 3px;
}
.ar-brief .ar-langdatum { font: 400 0.95rem/1.4 var(--wk-serif); color: #6B5A3A; margin: 0 0 0.4rem; }
.ar-brief .ar-text { color: #3E3024; font-family: var(--wk-serif); font-size: 1.05rem; line-height: 1.8; }
.ar-brief .ar-text h2, .ar-brief .ar-text h3 { font-family: var(--wk-sc); font-weight: 400; letter-spacing: .04em; color: var(--titel, #753917); }
.ar-brief .ar-text a { color: var(--titel, #753917); }
.ar-brief .ar-text p, .ar-brief .ar-text li { color: #3E3024; }
.ar-brief .ar-gruss { margin: 2.2rem 0 0; font: 400 1.05rem/1.5 var(--wk-serif); color: var(--wk-tinte); }
.ar-brief .ar-gruss span { display: block; font: 400 0.95rem/1.4 var(--wk-sc); letter-spacing: .06em; color: #6B5A3A; margin-top: 0.3rem; }
.ar-brief .ar-quelle { margin-top: 1.6rem; }
.ar-brief .ar-nachbarn { margin-top: 2.2rem; }

@media (prefers-reduced-motion: reduce) {
  .wk-schachtel, .wk-diskette, .wk-werkstueck img { transition: none; }
}

/* Archiv auf news.html: dieselben Umschlaege, Jahreszahlen als Zwischentitel,
   der Kurztext bleibt sichtbar, die Bilder entfallen (die Briefmarke zeigt
   das Projekt). */
#nw-archiv .nw-jahr { grid-column: 1 / -1; margin: 1.4rem 0 0; font: 400 1.4rem/1 var(--wk-sc); letter-spacing: .06em; color: var(--titel, #753917); border: 0; }
#nw-archiv .nw-bild { display: none; }
#nw-archiv .nw-karte:not(.nw-neu) .nw-text { display: block; font-size: 0.88rem; }
#nw-archiv .nw-karte:not(.nw-neu) .nw-inhalt { padding-bottom: 3rem; }