/* =====================================================================
   vulkanausbruch.de - Vulkan-Nachschlagewerk
   Haltung: geologisches Feldbuch. Papier und Basalt, ruhige Erdtoene,
   EIN Akzent (Lava) - und der brennt nur dort, wo wirklich etwas aktiv
   ist. Kein Katastrophen-Rot als Dekor, sonst verliert es seine Aussage.

   Palette: #F4F1EC Bimsstein (Grund), #17191C Basalt (Schrift),
            #B03A1E Lava (Akzent), #C08A2E Schwefel (Warnstufe),
            #2F5A6B Tiefsee (submarin), #DED7CB Tuff (Linien)
   Fonts:   Bricolage Grotesque (Display) + DM Sans (Text), lokal
   ===================================================================== */

@font-face {
  font-family: 'Bricolage';
  src: url('/assets/fonts/Bricolage-Latin.woff2') format('woff2');
  font-weight: 400 800; font-style: normal; font-display: swap;
  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;
}
@font-face {
  font-family: 'Bricolage';
  src: url('/assets/fonts/Bricolage-LatinExt.woff2') format('woff2');
  font-weight: 400 800; font-style: normal; font-display: swap;
  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: 'DM Sans';
  src: url('/assets/fonts/DMSans-Latin.woff2') format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap;
  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;
}
@font-face {
  font-family: 'DM Sans';
  src: url('/assets/fonts/DMSans-LatinExt.woff2') format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap;
  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;
}

:root {
  --bg: #F4F1EC;
  --bg-soft: #EAE5DC;
  --paper: #FFFFFF;
  --ink: #17191C;
  --ink-soft: #33383E;
  --muted: #5E646C;
  --rule: #DED7CB;
  --rule-stark: #C9C0B0;

  --lava: #B03A1E;
  --lava-dark: #8A2C15;
  --lava-tint: #F8EAE4;
  --schwefel: #A8761F;
  --schwefel-tint: #FBF3E3;
  --tiefsee: #2F5A6B;
  --ok: #4A7C3D;

  --link: #9C3418;
  --link-linie: #D9A493;

  --maxw: 1180px;
  --maxw-text: 68ch;
  --infobox-w: 330px;

  /* Vulkantypen. Dieselbe Farbe steht auf jeder Seite fuer denselben Typ,
     alle gegen Papier auf mindestens 4.5:1 geprueft und bewusst gedaempft. */
  --typ-schicht:   #9B4A2E;
  --typ-schild:    #86702A;
  --typ-caldera:   #6B4A6E;
  --typ-feld:      #4F6E52;
  --typ-submarin:  #2F6478;
  --typ-komplex:   #6B6256;
  --typ-sonstige:  #5E646C;

  /* Aktivitaetsstufen im Nachrichtenteil. Drei Stufen, mehr nicht -
     jede weitere Abstufung waere eine Genauigkeit, die die Quelle
     gar nicht hergibt. */
  --akt-ruhig:    #5E646C;
  --akt-unruhig:  #A8761F;
  --akt-ausbruch: #B03A1E;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: 'Bricolage', 'DM Sans', sans-serif;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.4rem); font-weight: 800; }
h2 { font-size: clamp(1.4rem, 1.15rem + 1.1vw, 2rem); font-weight: 700; margin-top: 2.2em; }
h3 { font-size: clamp(1.15rem, 1.05rem + .5vw, 1.35rem); font-weight: 700; margin-top: 1.8em; }

p { margin: 0 0 1.1em; }
p, li { max-width: var(--maxw-text); }

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }

/* Fliesstextlinks bekommen eine ruhige Linie als zweites Merkmal, weil
   Lava gegen Basalt allein die 3:1 aus WCAG nicht schafft. Navigation und
   Kacheln bleiben aussen vor, dort erkennt man den Link an seiner Lage. */
article p a, article li a, .lead a, .quelle a {
  text-decoration: underline;
  text-decoration-color: var(--link-linie);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
article p a:hover, article li a:hover { text-decoration-color: var(--lava); }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* ---------- Kopf ---------- */
.kopf {
  border-bottom: 1px solid var(--rule);
  background: var(--bg);
  position: relative;
}
.kopf__innen {
  max-width: var(--maxw); margin: 0 auto; padding: 14px 24px;
  display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
}
.marke {
  font-family: 'Bricolage', sans-serif; font-weight: 800; font-size: 1.32rem;
  letter-spacing: -0.03em; color: var(--ink); display: flex; align-items: center; gap: 9px;
}
.marke:hover { text-decoration: none; color: var(--lava); }
.marke__zeichen { width: 26px; height: 22px; flex: none; }
.nav { display: flex; gap: 22px; flex-wrap: wrap; margin-left: auto; }
.nav a {
  color: var(--ink-soft); font-size: .97rem; font-weight: 500;
  padding: 4px 0; border-bottom: 2px solid transparent;
  transition: color .18s cubic-bezier(0.16, 1, 0.3, 1), border-color .18s;
}
.nav a:hover, .nav a[aria-current="page"] {
  color: var(--lava); border-bottom-color: var(--lava); text-decoration: none;
}

/* ---------- Hero der Startseite ----------
   Als Poster gedacht: links die Aussage, rechts das Bild. Kein zentrierter
   Block mit Stockfoto darunter. */
.hero { border-bottom: 1px solid var(--rule); background: linear-gradient(180deg, var(--bg) 0%, var(--bg-soft) 100%); }
.hero__innen {
  max-width: var(--maxw); margin: 0 auto; padding: clamp(40px, 6vw, 84px) 24px;
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 64px); align-items: center;
}
.hero h1 { margin-bottom: .35em; }
.hero__lead { font-size: clamp(1.05rem, 1rem + .35vw, 1.22rem); color: var(--ink-soft); max-width: 46ch; }
.hero__zahlen { display: flex; gap: 34px; margin-top: 30px; flex-wrap: wrap; }
.hero__zahl b {
  display: block; font-family: 'Bricolage', sans-serif; font-size: 1.9rem;
  font-weight: 800; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
}
.hero__zahl span { font-size: .88rem; color: var(--muted); }
.hero__bild { border: 1px solid var(--rule-stark); background: var(--paper); }

/* ---------- Suche ---------- */
.suche { display: flex; gap: 0; margin-top: 32px; max-width: 480px; }
.suche input {
  flex: 1; min-width: 0; font: inherit; padding: 13px 16px;
  border: 1px solid var(--rule-stark); border-right: none; background: var(--paper);
  color: var(--ink);
}
.suche input:focus { outline: 2px solid var(--lava); outline-offset: -2px; }
.suche button {
  font: inherit; font-weight: 600; padding: 13px 22px; border: 1px solid var(--lava);
  background: var(--lava); color: #fff; cursor: pointer;
  transition: background .18s cubic-bezier(0.16, 1, 0.3, 1);
}
.suche button:hover { background: var(--lava-dark); }

/* Auf der Suchergebnisseite stehen bis zu drei Gruppen untereinander, jede oft
   nur ein paar Zeilen hoch. Mit dem Abstand der Startseite klafften dazwischen
   fast 500 Pixel Luft und die Seite las sich wie leer. */
.suchergebnis .block { padding: clamp(24px, 2.6vw, 36px) 0; }
.suchergebnis .block:first-of-type { padding-top: 24px; }
.suche--seite { margin-top: 20px; margin-bottom: 18px; }

/* ---------- Abschnitte ---------- */
.block { padding: clamp(44px, 6vw, 76px) 0; }
.block + .block { border-top: 1px solid var(--rule); }
.block__kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 28px; }
.block__kopf h2 { margin: 0; }
.block__mehr { font-size: .95rem; font-weight: 600; }
/* Der Berichtsstand neben der Ueberschrift: gehoert dazu, soll sie aber nicht
   optisch verdraengen. */
.block__stand {
  display: block; margin-top: 4px;
  font-family: 'DM Sans', sans-serif; font-size: .82rem; font-weight: 400;
  color: var(--muted); font-variant-numeric: tabular-nums;
}

/* ---------- Aktivitaetsliste ----------
   Bewusst eine Liste, keine Kachelreihe: Meldungen haben eine Reihenfolge
   und unterschiedliche Laenge, ein Raster wuerde beides verstecken. */
.akt { border-top: 1px solid var(--rule); }
.akt__eintrag {
  display: grid; grid-template-columns: 132px minmax(0, 1fr) auto;
  gap: 18px; align-items: baseline;
  padding: 16px 12px; border-bottom: 1px solid var(--rule);
  margin: 0 -12px;
  transition: background .18s cubic-bezier(0.16, 1, 0.3, 1);
}
.akt__eintrag:hover { background: var(--bg-soft); }
.akt__datum { font-size: .86rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.akt__titel { font-weight: 600; }
.akt__titel a { color: var(--ink); }
.akt__ort { display: block; font-weight: 400; font-size: .9rem; color: var(--muted); }
.stufe {
  font-size: .76rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 3px 9px; border: 1px solid currentColor; white-space: nowrap;
}
.stufe--ruhig { color: var(--akt-ruhig); }
.stufe--unruhig { color: var(--akt-unruhig); background: var(--schwefel-tint); }
.stufe--ausbruch { color: var(--akt-ausbruch); background: var(--lava-tint); }

/* ---------- Zustandsblock auf dem Steckbrief ----------
   Kein Kasten mit Rahmen und Symbol, sondern eine abgesetzte Spalte mit
   Randlinie: Das hier ist eine Einordnung, keine Warnung. Wer wirklich warnt,
   ist die Behoerde, und darauf verweist der Block. */
.zustand {
  margin: 1.8em 0; padding: 4px 0 4px 22px;
  border-left: 3px solid var(--rule-stark);
}
.zustand--aktiv { border-left-color: var(--lava); }
.zustand p { margin: 0 0 .7em; }
.zustand p:last-child { margin-bottom: 0; }
.zustand__kopf { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.zustand__stand { font-size: .86rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.zustand__links { margin: 0 0 .7em; padding: 0; list-style: none; font-size: .94rem; }
.zustand__links li { padding: 3px 0; border-bottom: 1px solid var(--rule); }
.zustand__links li:last-child { border-bottom: none; }
.zustand__fuss { font-size: .86rem; color: var(--muted); }

/* Zeichen, die nur fuer Textfassungen da sind: Screenreader und
   Textextraktion lesen sie, im Layout nehmen sie keinen Platz. */
.visuell-weg {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ---------- Kachelraster fuer Regionen ---------- */
/* Trennlinien sitzen an den Kacheln, nicht als Rasterhintergrund in der Luecke:
   sonst stehen die unbesetzten Zellen der letzten Zeile als grauer Block da. */
.raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); gap: 0; background: var(--bg); border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); }
.kachel {
  background: var(--bg); padding: 20px; display: block;
  border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  transition: background .2s cubic-bezier(0.16, 1, 0.3, 1);
}
.kachel:hover { background: var(--bg-soft); text-decoration: none; }
.kachel b { display: block; font-family: 'Bricolage', sans-serif; font-size: 1.05rem; font-weight: 700; color: var(--ink); }
.kachel span { font-size: .88rem; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---------- Steckbrief: Text + Infobox ---------- */
.seite { display: grid; grid-template-columns: minmax(0, 1fr) var(--infobox-w); gap: clamp(28px, 4vw, 52px); align-items: start; padding: 36px 0 72px; }
article { min-width: 0; }
.lead { font-size: 1.13rem; color: var(--ink-soft); }

.brotkrumen { font-size: .87rem; color: var(--muted); padding: 16px 0 0; }
.brotkrumen a { color: var(--muted); }
.brotkrumen span { padding: 0 7px; color: var(--rule-stark); }

.infobox {
  background: var(--paper); border: 1px solid var(--rule-stark);
  position: relative; font-size: .93rem;
}
.infobox__kopf { padding: 14px 18px; border-bottom: 1px solid var(--rule); background: var(--bg-soft); }
.infobox__kopf b { font-family: 'Bricolage', sans-serif; font-size: 1.08rem; display: block; }
.infobox__kopf span { font-size: .84rem; color: var(--muted); }
.infobox dl { margin: 0; padding: 6px 18px 16px; }
.infobox dt { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-top: 12px; }
.infobox dd { margin: 1px 0 0; font-weight: 500; font-variant-numeric: tabular-nums; }
.infobox__karte { border-bottom: 1px solid var(--rule); }
.infobox__karte svg { width: 100%; height: auto; }

.typ-marke { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; }
.typ-marke::before { content: ""; width: 11px; height: 11px; background: var(--typ, var(--typ-sonstige)); flex: none; }

/* ---------- Datentabelle ---------- */
table { border-collapse: collapse; width: 100%; font-size: .95rem; margin: 1.4em 0; }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--rule); vertical-align: top; }
th { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; }
td.zahl, th.zahl { text-align: right; font-variant-numeric: tabular-nums; }
.tabelle-scroll { overflow-x: auto; }

/* ---------- Hinweisbox ---------- */
.hinweis {
  border-left: 3px solid var(--schwefel); background: var(--schwefel-tint);
  padding: 14px 18px; margin: 1.6em 0; font-size: .95rem;
}
.hinweis p:last-child { margin-bottom: 0; }
.hinweis b { font-weight: 700; }

/* ---------- Karte im Text ---------- */
.karte { margin: 1.8em 0; border: 1px solid var(--rule-stark); background: var(--paper); }
.karte figcaption, .quelle { font-size: .84rem; color: var(--muted); padding: 10px 14px; border-top: 1px solid var(--rule); }
.karte figcaption a, .quelle a { color: var(--muted); }

/* ---------- Fuss ---------- */
.fuss { border-top: 1px solid var(--rule); background: var(--bg-soft); padding: 44px 0 36px; font-size: .93rem; color: var(--muted); }
.fuss__innen { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 28px; }
.fuss b { display: block; color: var(--ink); font-family: 'Bricolage', sans-serif; margin-bottom: 8px; }
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss li { margin-bottom: 5px; }
.fuss a { color: var(--muted); }
.fuss__recht { max-width: var(--maxw); margin: 28px auto 0; padding: 18px 24px 0; border-top: 1px solid var(--rule-stark); font-size: .87rem; }

/* ---------- Bewegung ----------
   Ein einziger orchestrierter Einstieg statt vieler Einzeleffekte. */
@media (prefers-reduced-motion: no-preference) {
  .anim { animation: auf .55s cubic-bezier(0.16, 1, 0.3, 1) both; }
  .anim:nth-child(2) { animation-delay: .06s; }
  .anim:nth-child(3) { animation-delay: .12s; }
}
@keyframes auf { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ---------- Schmale Fenster ---------- */
@media (max-width: 980px) {
  .seite { grid-template-columns: minmax(0, 1fr); }
  .infobox { max-width: 520px; }
  .hero__innen { grid-template-columns: minmax(0, 1fr); }
  .hero__bild { order: -1; }
}
@media (max-width: 620px) {
  body { font-size: 16px; }
  .akt__eintrag { grid-template-columns: minmax(0, 1fr) auto; }
  .akt__datum { grid-column: 1 / -1; }
  .kopf__innen { gap: 14px; }
  .nav { gap: 16px; width: 100%; margin-left: 0; }
}

/* ---------- Bilder ----------
   Die Bildunterschrift traegt den Urhebernachweis. Bei Lizenzbildern ist das
   Pflicht, deshalb steht sie im selben Element wie das Bild und nicht als
   loser Absatz daneben, der beim Umbauen verlorengehen kann. */
.bild { margin: 1.8em 0; }
.bild img { width: 100%; border: 1px solid var(--rule-stark); background: var(--bg-soft); }
.bild figcaption {
  font-size: .85rem; line-height: 1.5; color: var(--muted);
  padding: 8px 2px 0; max-width: var(--maxw-text);
}
.bild--gross { margin: 1.6em 0 2em; }
.bild--hero { margin: 0; }
.bild--hero img { border: 1px solid var(--rule-stark); }
.bild--hero figcaption { padding: 8px 2px 0; }

/* Nachweisliste unter /bildnachweise/ */
.nachweise { border-top: 1px solid var(--rule); margin-top: 24px; }
.nachweis {
  display: grid; grid-template-columns: 132px minmax(0, 1fr);
  gap: 18px; align-items: start;
  padding: 14px 0; border-bottom: 1px solid var(--rule);
}
.nachweis img { width: 132px; height: auto; border: 1px solid var(--rule-stark); }
.nachweis b { display: block; font-weight: 600; }
.nachweis span { font-size: .9rem; color: var(--muted); }
.nachweis code { font-size: .82rem; color: var(--muted); word-break: break-all; }
@media (max-width: 620px) {
  .nachweis { grid-template-columns: 84px minmax(0, 1fr); gap: 12px; }
  .nachweis img { width: 84px; }
}

/* Ruhiger Platzhalter. Eine zweite gelbe Box neben einem echten Sachhinweis
   liest sich wie eine zweite Warnung, obwohl sie nur eine Randnotiz ist. */
.still {
  color: var(--muted); font-size: .95rem;
  border-left: 3px solid var(--rule-stark); padding: 4px 0 4px 14px;
  margin: 1.6em 0;
}

/* ---------- Artikel ---------- */
.seite--artikel { grid-template-columns: minmax(0, 1fr) 260px; }
.byline { font-size: .87rem; color: var(--muted); margin: -.4em 0 1.6em; }
.rail { position: static; font-size: .95rem; }
.rail__block { border-top: 2px solid var(--ink); padding-top: 12px; }
.rail__block b { font-family: 'Bricolage', sans-serif; display: block; margin-bottom: 10px; }
.rail__liste { list-style: none; margin: 0; padding: 0; }
.rail__liste li { border-bottom: 1px solid var(--rule); padding: 9px 0; }
.rail__liste a { color: var(--ink); }
.rail__liste a:hover { color: var(--lava); }

.artikelliste { display: grid; gap: 1px; background: var(--rule); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); margin-top: 24px; }
.teaser {
  background: var(--bg); display: grid; grid-template-columns: 190px minmax(0, 1fr);
  gap: 22px; padding: 20px 12px; margin: 0 -12px;
  transition: background .18s cubic-bezier(0.16, 1, 0.3, 1);
}
.teaser:hover { background: var(--bg-soft); }
.teaser h2 { margin: 0 0 .3em; font-size: 1.2rem; margin-top: 0; }
.teaser h2 a { color: var(--ink); }
.teaser h2 a:hover { color: var(--lava); text-decoration: none; }
.teaser p { margin: 0 0 .4em; color: var(--ink-soft); font-size: .95rem; }
.teaser .byline { margin: 0; }
.teaser__bild img { width: 100%; border: 1px solid var(--rule-stark); }

@media (max-width: 980px) {
  .seite--artikel { grid-template-columns: minmax(0, 1fr); }
  .rail { max-width: 520px; }
}
@media (max-width: 620px) {
  .teaser { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .teaser__bild img { max-width: 320px; }
}

/* ---------- Raetselantwort ----------
   Mehrere Artikeltitel sind woertlich Kreuzwortraetsel-Fragen ("Vulkan bei
   Neapel", "Vulkanischer Sprudel"), und die SERP dazu besteht aus
   Raetselseiten. Wer so sucht, will zuerst das Loesungswort und erst danach
   die Erklaerung. Der Kasten steht deshalb ganz oben und gibt die Antwort,
   ohne den Artikel in eine Raetselseite zu verwandeln. */
.raetsel {
  border: 1px solid var(--rule-stark);
  background: var(--paper);
  padding: 14px 18px;
  margin: 0 0 1.8em;
  max-width: var(--maxw-text);
}
.raetsel__frage {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); display: block; margin-bottom: 8px;
}
.raetsel__loesungen { display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 0 0 8px; padding: 0; list-style: none; }
.raetsel__loesungen li { margin: 0; }
.raetsel__wort {
  display: inline-flex; align-items: baseline; gap: 7px;
  border: 1px solid var(--rule); background: var(--bg-soft);
  padding: 5px 10px;
}
.raetsel__wort b {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 1.02rem; letter-spacing: .14em; font-weight: 700; color: var(--ink);
}
.raetsel__wort span { font-size: .82rem; color: var(--muted); }
.raetsel p { margin: 0; font-size: .92rem; color: var(--ink-soft); }