/* ==========================================================================
   CyberGothicNews — Designsystem "Reaktor"
   Monochromes Chrom auf Schwarz, ein einziger Neon-Akzent, Kanten wie an
   Industriegehaeusen. Abgeleitet aus dem Logo, nicht aus einem Framework.
   Reihenfolge: Tokens - Reset - Typografie - Bausteine - Bereiche - Motion
   ========================================================================== */

/* --- 1. Tokens ----------------------------------------------------------- */

:root {
  /* Grund: fast schwarz, aber nie reines #000 — sonst wirken Kanten hart */
  --void:      #050506;
  --pitch:     #08090b;
  --panel:     #0e1013;
  --panel-hi:  #14171c;
  --panel-top: #1b1f26;

  /* Linien. Chrom lebt von der hellen Oberkante. */
  --line:      rgba(255, 255, 255, .085);
  --line-mid:  rgba(255, 255, 255, .14);
  --line-hi:   rgba(255, 255, 255, .26);
  --edge-top:  inset 0 1px 0 rgba(255, 255, 255, .07);

  /* Schrift */
  --ink:    #e9ebef;
  --ink-2:  #a4aab4;
  --ink-3:  #6d747f;
  --ink-4:  #474d57;

  /* Der einzige Akzent. Sparsam einsetzen — er wirkt nur, weil sonst
     alles grau ist. */
  --uv:       #a3ff12;
  --uv-soft:  #c8ff6e;
  --uv-dim:   rgba(163, 255, 18, .13);
  --uv-line:  rgba(163, 255, 18, .38);
  --uv-glow:  rgba(163, 255, 18, .22);

  /* Warnfarbe, nur fuer "LIVE" und Fehlerzustaende */
  --hot: #ff2f6d;

  /* Chromverlauf des Logos, als Text- und Flaechenfuellung */
  --chrome: linear-gradient(180deg,
    #ffffff 0%, #c6ccd4 34%, #6b7280 50%,
    #eef1f5 58%, #9aa2ad 78%, #5c636d 100%);

  --font-display: "Chakra Petch", "Segoe UI", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "Cascadia Mono", monospace;

  /* Raster */
  --shell:  1200px;
  --narrow: 720px;
  --gut:    clamp(1.25rem, 4vw, 2.5rem);
  --band:   clamp(4.5rem, 9vw, 8rem);

  --bevel: polygon(0 10px, 10px 0, 100% 0, 100% calc(100% - 10px),
                   calc(100% - 10px) 100%, 0 100%);

  --ease: cubic-bezier(.2, .7, .3, 1);
}

/* --- 2. Reset ------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scrollbar-color: var(--ink-4) var(--void);
}

body {
  margin: 0;
  background: var(--void);
  color: var(--ink);
  font: 400 clamp(1rem, .96rem + .2vw, 1.0625rem)/1.7 var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Filmkorn ueber allem. Inline erzeugt, kein Bild-Request. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }

::selection { background: var(--uv); color: #06120a; }

:focus-visible {
  outline: 2px solid var(--uv);
  outline-offset: 3px;
}

/* --- 3. Typografie ------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -.015em;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(2.6rem, 1.5rem + 5.4vw, 5.6rem); letter-spacing: -.03em; }
h2 { font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3.1rem); }
h3 { font-size: clamp(1.15rem, 1rem + .7vw, 1.5rem); letter-spacing: -.005em; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

/* Chrom-Schrift. Der Verlauf ist der Kern der Marke — nur fuer grosse
   Ueberschriften, im Fliesstext waere er unlesbar. */
.chrome {
  background: var(--chrome);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .chrome { color: #dfe3e9; -webkit-text-fill-color: currentColor; }
}

/* Kleine technische Beschriftung — Rubriken, Datum, Zaehler */
.tag {
  font: 500 .6875rem/1 var(--font-mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.tag--uv { color: var(--uv); }

.lede {
  font-size: clamp(1.05rem, 1rem + .5vw, 1.3rem);
  line-height: 1.6;
  color: var(--ink-2);
  text-wrap: pretty;
}

/* --- 4. Bausteine -------------------------------------------------------- */

.shell {
  width: min(100% - var(--gut) * 2, var(--shell));
  margin-inline: auto;
}
.shell--narrow { max-width: var(--narrow); }

.band { padding-block: var(--band); position: relative; }

/* Gefahrgut-Streifen als Trenner. Schraeg, schmal, monochrom —
   der Warncharakter kommt aus der Form, nicht aus Farbe. */
.hazard {
  height: 6px;
  background: repeating-linear-gradient(
    -45deg,
    rgba(255, 255, 255, .13) 0 8px,
    transparent 8px 16px);
  border-block: 1px solid var(--line);
}
.hazard--uv {
  background: repeating-linear-gradient(
    -45deg,
    var(--uv-line) 0 8px,
    transparent 8px 16px);
}

/* Abschnittskopf: Rubrik, Titel, optional ein Link nach rechts */
.head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 1.25rem 2rem;
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}
.head__text { max-width: 46ch; }
.head .tag { display: block; margin-bottom: .9rem; }
.head p { margin-top: .85rem; color: var(--ink-2); }

/* --- Knoepfe --- */

.btn {
  --btn-bg: var(--panel-hi);
  --btn-fg: var(--ink);
  --btn-line: var(--line-mid);
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .85rem 1.5rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-line);
  clip-path: var(--bevel);
  font: 600 .875rem/1 var(--font-display);
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background .18s var(--ease), color .18s var(--ease),
              border-color .18s var(--ease), transform .18s var(--ease);
}
.btn:hover { transform: translateY(-2px); }

.btn--uv {
  --btn-bg: var(--uv);
  --btn-fg: #06120a;
  --btn-line: var(--uv);
  font-weight: 700;
}
.btn--uv:hover { --btn-bg: var(--uv-soft); }

.btn--ghost { --btn-bg: transparent; }
.btn--ghost:hover { --btn-line: var(--uv-line); --btn-fg: var(--uv); }

/* Textlink mit Pfeil, fuer "alle ansehen" */
.more {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font: 600 .8125rem/1 var(--font-display);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-2);
  text-decoration: none;
  transition: color .18s var(--ease), gap .18s var(--ease);
}
.more::after { content: "\2192"; }
.more:hover { color: var(--uv); gap: .75rem; }

/* --- Karte: der Grundbaustein fuer News, Artikel, Produkte --- */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--edge-top);
  text-decoration: none;
  color: inherit;
  isolation: isolate;
  transition: border-color .22s var(--ease), transform .22s var(--ease),
              background .22s var(--ease);
}
.card:hover {
  border-color: var(--line-hi);
  background: var(--panel-hi);
  transform: translateY(-3px);
}

/* Eckwinkel wie ein Zielfernrohr — erscheinen erst beim Zeigen */
.card::before, .card::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border: 1px solid var(--uv);
  opacity: 0;
  transition: opacity .22s var(--ease);
  pointer-events: none;
}
.card::before { top: -1px; left: -1px; border-width: 1px 0 0 1px; }
.card::after { bottom: -1px; right: -1px; border-width: 0 1px 1px 0; }
.card:hover::before, .card:hover::after { opacity: 1; }

.card__body {
  padding: 1.35rem 1.4rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  flex: 1;
}
.card__title { font-size: 1.1875rem; line-height: 1.25; }
.card:hover .card__title { color: #fff; }
.card__meta { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; }
.card__text { color: var(--ink-2); font-size: .9375rem; line-height: 1.6; margin: 0; }
.card__foot { margin-top: auto; padding-top: .9rem; }

/* Bildflaeche. Ohne Bild bleibt ein dunkles Raster stehen —
   nie ein kaputtes Symbol. */
.card__figure {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background:
    linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 100% 28px,
    linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 28px 100%,
    var(--pitch);
  border-bottom: 1px solid var(--line);
}
.card__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.08) brightness(.85);
  transition: filter .3s var(--ease), transform .5s var(--ease);
}
.card:hover .card__figure img {
  filter: grayscale(.55) contrast(1.05) brightness(.95);
  transform: scale(1.03);
}

/* Raster fuer Kartenlisten.
   auto-FILL, nicht auto-fit: auto-fit laesst leere Spalten zusammenfallen,
   dann zieht sich eine einzelne Karte ueber die volle Breite. Genau der Fall
   tritt am Anfang staendig auf, wenn erst ein Video oder ein Artikel da ist. */
.grid { display: grid; gap: 1.25rem; }
.grid--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }

/* --- 5. Kopfzeile -------------------------------------------------------- */

.top {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--void) 82%, transparent);
  backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.top[data-stuck] {
  border-bottom-color: var(--line);
  background: color-mix(in srgb, var(--void) 94%, transparent);
}
@supports not (backdrop-filter: blur(1px)) {
  .top { background: var(--void); }
}

.top__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 68px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  text-decoration: none;
  flex-shrink: 0;
}
.brand img { width: 34px; height: 34px; }
.brand__name {
  font: 700 1.0625rem/1 var(--font-display);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.nav { display: flex; align-items: center; gap: .35rem; }
.nav a {
  padding: .55rem .8rem;
  font: 600 .8125rem/1 var(--font-display);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-2);
  text-decoration: none;
  position: relative;
  transition: color .18s var(--ease);
}
.nav a:hover, .nav a[aria-current] { color: var(--ink); }
.nav a[aria-current]::after {
  content: "";
  position: absolute;
  left: .8rem;
  right: .8rem;
  bottom: .15rem;
  height: 1px;
  background: var(--uv);
}

.burger {
  display: none;
  width: 42px;
  height: 42px;
  background: transparent;
  border: 1px solid var(--line-mid);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.burger span, .burger span::before, .burger span::after {
  content: "";
  display: block;
  width: 17px;
  height: 1.5px;
  background: var(--ink);
  transition: transform .22s var(--ease), opacity .22s var(--ease);
}
.burger span::before { transform: translateY(-6px); }
.burger span::after  { transform: translateY(4.5px); }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: rotate(45deg); }
.burger[aria-expanded="true"] span::after  { transform: rotate(-45deg); }

@media (max-width: 60rem) {
  .burger { display: inline-flex; }
  .nav {
    position: fixed;
    inset: 68px 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--pitch);
    border-block: 1px solid var(--line);
    padding: .5rem var(--gut) 1.5rem;
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
  }
  .nav[data-open] { opacity: 1; visibility: visible; transform: none; }
  .nav a { padding: .9rem .2rem; border-bottom: 1px solid var(--line); font-size: .9375rem; }
  .nav a[aria-current]::after { left: .2rem; right: auto; width: 22px; bottom: .55rem; }
  .nav .btn { margin-top: 1rem; justify-content: center; }
}

/* --- 6. Hero ------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: min(92vh, 900px);
  display: grid;
  place-items: center;
  text-align: center;
  padding-block: clamp(4rem, 10vw, 7rem);
  overflow: hidden;
}

/* Reaktorschein hinter dem Logo. Das Atmen laeuft ueber die Deckkraft
   dieser einen Ebene: opacity wird vom Compositor erledigt, waehrend eine
   Animation auf `filter: drop-shadow` die halbe Seite bei jedem Bild neu
   zeichnen liesse — auf einem Telefon deutlich spuerbar. */
.hero::before {
  content: "";
  position: absolute;
  inset: -20% -10% auto;
  height: 130%;
  background:
    radial-gradient(60% 46% at 50% 26%, rgba(206, 214, 224, .13), transparent 68%),
    radial-gradient(38% 30% at 50% 22%, var(--uv-glow), transparent 72%);
  pointer-events: none;
  will-change: opacity;
  animation: breathe 7s var(--ease) infinite;
}
/* Bildroehren-Zeilen, sehr schwach — nur im Hero */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    180deg, rgba(255, 255, 255, .028) 0 1px, transparent 1px 3px);
  pointer-events: none;
}
.hero__in {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 1.6rem;
}

/* Grosse Logomarke mit langsam atmendem Schein */
.hero__mark {
  width: clamp(120px, 20vw, 190px);
  filter: drop-shadow(0 0 34px rgba(190, 205, 220, .32));
}

.hero h1 { max-width: 15ch; }
.hero .lede { max-width: 52ch; }

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  justify-content: center;
  margin-top: .6rem;
}

/* Statusleiste unter dem Hero */
.readout {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: clamp(2rem, 5vw, 3.5rem);
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 70%, transparent);
  box-shadow: var(--edge-top);
}
.readout > div {
  padding: 1rem clamp(1.1rem, 3vw, 2.2rem);
  text-align: center;
  border-right: 1px solid var(--line);
}
.readout > div:last-child { border-right: 0; }
.readout b {
  display: block;
  font: 700 1.5rem/1 var(--font-display);
  margin-bottom: .4rem;
}
@media (max-width: 40rem) {
  .readout > div { flex: 1 1 50%; border-bottom: 1px solid var(--line); }
  .readout > div:nth-child(2n) { border-right: 0; }
}

/* Blinkender Punkt fuer "live" / "neu".
   Umbruch erlaubt und mittig: der gesperrte Satz passt auf 375 px sonst
   nicht in eine Zeile und trennt mitten im Wort. */
.pulse {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .45rem;
  text-align: center;
}

/* Auf schmalen Geraeten das Tracking zuruecknehmen — Sperrsatz braucht
   Platz, den ein Telefon nicht hat. */
@media (max-width: 30rem) {
  .hero .tag { letter-spacing: .1em; font-size: .625rem; }
}
.pulse::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--uv);
  box-shadow: 0 0 0 0 var(--uv-glow);
  animation: ping 2.4s var(--ease) infinite;
}

/* --- 7. Video-Vorschau ohne YouTube-Einbindung ---------------------------
   Erst nach Klick wird YouTube geladen. Bis dahin verlaesst kein Byte des
   Besuchers diese Domain. */

.play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--ink);
}
.play__disc {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--void) 68%, transparent);
  border: 1px solid var(--line-hi);
  border-radius: 50%;
  backdrop-filter: blur(3px);
  transition: background .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.play__disc::after {
  content: "";
  margin-left: 3px;
  border-left: 13px solid currentColor;
  border-block: 8px solid transparent;
}
.card:hover .play__disc, .play:hover .play__disc {
  border-color: var(--uv);
  color: var(--uv);
  transform: scale(1.06);
}
.play__hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: .5rem .7rem;
  background: linear-gradient(transparent, rgba(0, 0, 0, .85));
  font: 500 .625rem/1.4 var(--font-mono);
  letter-spacing: .06em;
  color: var(--ink-3);
  text-align: left;
}
.card__figure iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Laufzeit-Marke im Bild */
.stamp {
  position: absolute;
  right: .55rem;
  top: .55rem;
  padding: .2rem .45rem;
  background: color-mix(in srgb, var(--void) 78%, transparent);
  border: 1px solid var(--line-mid);
  font: 500 .625rem/1 var(--font-mono);
  letter-spacing: .08em;
  color: var(--ink-2);
}

/* --- 8. Forum-Vorschau --------------------------------------------------- */

.forum {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (max-width: 56rem) { .forum { grid-template-columns: 1fr; } }

.threads {
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: var(--edge-top);
}
.threads__row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .95rem 1.1rem;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  transition: background .18s var(--ease);
}
.threads__row:last-child { border-bottom: 0; }
.threads__row:hover { background: var(--panel-hi); }
.threads__row > div { min-width: 0; flex: 1; }
.threads__row strong {
  display: block;
  font: 600 .9375rem/1.35 var(--font-body);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.threads__row:hover strong { color: var(--uv); }
.threads__count {
  flex-shrink: 0;
  font: 500 .75rem/1 var(--font-mono);
  color: var(--ink-3);
}

/* --- 9. Shop ------------------------------------------------------------- */

.price { font: 700 1.0625rem/1 var(--font-display); color: var(--ink); }

.card__figure--product {
  aspect-ratio: 1;
  background: radial-gradient(60% 60% at 50% 40%, var(--panel-top), var(--pitch) 70%);
}
.card__figure--product img { object-fit: contain; padding: 12%; filter: none; }
.card:hover .card__figure--product img { filter: none; transform: scale(1.04); }

/* Steht noch kein Produktfoto bereit, tritt die Marke an seine Stelle —
   zurueckhaltend, damit klar bleibt: hier fehlt ein Bild. */
.card__placeholder {
  opacity: .16;
  padding: 26% !important;
  filter: grayscale(1);
}
.card:hover .card__placeholder { opacity: .24; transform: none !important; }

/* Hinweis, dass der Shop auf einer eigenen Domain liegt */
.offsite {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font: 500 .6875rem/1 var(--font-mono);
  color: var(--ink-3);
}
.offsite::after { content: "\2197"; }

/* --- 10. Fusszeile ------------------------------------------------------- */

.foot {
  border-top: 1px solid var(--line);
  background: var(--pitch);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
}
.foot__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(auto-fit, minmax(9rem, 1fr));
  gap: 2.5rem 2rem;
}
.foot h4 {
  font: 500 .8125rem/1 var(--font-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 1rem;
}
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.foot a { color: var(--ink-2); text-decoration: none; font-size: .9375rem; }
.foot a:hover { color: var(--uv); }
.foot__bar {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  color: var(--ink-4);
  font-size: .8125rem;
}

/* --- 11. Artikeltext ----------------------------------------------------- */

.prose { max-width: 68ch; }
.prose > * + * { margin-top: 1.15em; }
.prose h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); margin-top: 2.4em; }
.prose h3 { margin-top: 2em; }
.prose a {
  color: var(--uv);
  text-decoration: underline;
  text-underline-offset: .2em;
  text-decoration-thickness: 1px;
}
.prose a:hover { text-decoration-thickness: 2px; }
.prose ul, .prose ol { padding-left: 1.3em; display: grid; gap: .5em; }
.prose li::marker { color: var(--uv); }
.prose blockquote {
  margin: 2em 0;
  padding: .2em 0 .2em 1.4em;
  border-left: 2px solid var(--uv);
  color: var(--ink);
  font-size: 1.125rem;
}
.prose code {
  font: 500 .875em/1 var(--font-mono);
  background: var(--panel-hi);
  border: 1px solid var(--line);
  padding: .15em .4em;
}
.prose img, .prose figure { margin-block: 2em; }
.prose figcaption { margin-top: .7em; color: var(--ink-3); font-size: .8125rem; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin-block: 2.5em; }

/* --- 12. Bewegung -------------------------------------------------------- */

@keyframes breathe {
  0%, 100% { opacity: .72; }
  50%      { opacity: 1; }
}
@keyframes ping {
  0%   { box-shadow: 0 0 0 0 var(--uv-glow); }
  70%  { box-shadow: 0 0 0 9px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* Einblenden beim Scrollen. Ohne JS bleibt alles sichtbar — das Attribut
   wird erst von app.js gesetzt. */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
[data-reveal][data-shown] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}

/* --- 13. Einzelstellen ---------------------------------------------------
   Das hier waren einmal style-Attribute im HTML. Sie muessen Klassen sein:
   `style-src 'self'` blockiert Inline-Stile, und zwar lautlos — die Seite
   sieht lokal ohne CSP richtig aus und geht erst im Livebetrieb kaputt.
   Wer hier etwas ergaenzt: bitte wieder als Klasse, nicht als Attribut.
   Pruefen mit `node ops/serve.mjs`, das setzt die echte CSP. */

/* Ueberschrift der reinen Textseiten (Impressum, Datenschutz) */
.page-title {
  font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
  margin-bottom: 2rem;
}

/* Beschreibungstext, der die technische Auszeichnung nicht braucht */
.tag--plain {
  text-transform: none;
  letter-spacing: .02em;
}

/* Forum-Abschnitt */
.forum__title { margin: .9rem 0 1.1rem; }
.forum__cta { margin-top: 1.4rem; }

/* Artikelseite */
.article__head { margin-bottom: 2.5rem; }
.article__meta { margin-bottom: 1.2rem; }
.article__title { font-size: clamp(2rem, 1.4rem + 2.8vw, 3.4rem); }
.article__lede { margin-top: 1.4rem; }
.article__back { margin-top: 3.5rem; }

/* Shop-Hinweis unter dem Schaufenster */
.shop__note {
  margin-top: 2.5rem;
  max-width: 60ch;
}

/* Kurzere Variante des Hero, fuer die Fehlerseite */
.hero--compact { min-height: 70vh; }

/* Quellenangabe unter einem Artikel. Abgesetzt vom Fliesstext, damit sie
   als Apparat lesbar ist und nicht wie ein weiterer Absatz. */
.quelle {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem .9rem;
  margin-top: 3rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  border-left: 2px solid var(--uv);
  background: var(--panel);
  box-shadow: var(--edge-top);
}
.quelle a {
  color: var(--ink-2);
  font-size: .9375rem;
  text-decoration: underline;
  text-underline-offset: .2em;
  word-break: break-word;
}
.quelle a:hover { color: var(--uv); }

/* Markenzeile in der Fusszeile */
.foot__claim {
  margin-top: 1.1rem;
  color: var(--ink-3);
  max-width: 34ch;
  font-size: .9375rem;
}

/* Kartenfuss mit Preis links und Hinweis rechts */
.card__foot--split {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* --- 14. Kleinkram ------------------------------------------------------- */

.skip {
  position: absolute;
  left: -9999px;
  background: var(--uv);
  color: #06120a;
  padding: .8rem 1.2rem;
  z-index: 200;
  font: 700 .875rem/1 var(--font-display);
}
.skip:focus { left: 1rem; top: 1rem; }

.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}