/* Ortschronik: „Archivkarte“ – Papier, Tinte, Siegel (Styleguide, Kapitel 4). */

@font-face { font-family: 'Fraunces'; font-weight: 600; font-display: swap; src: url('fonts/Fraunces-600.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 400; font-display: swap; src: url('fonts/PlexSans-400.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 600; font-display: swap; src: url('fonts/PlexSans-600.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 500; font-display: swap; src: url('fonts/PlexMono-500.woff2') format('woff2'); }

:root {
  --papier: #EFE6D2;
  --papier-dunkel: #D9CDB3;
  --papier-hell: #F6F0E2;
  --tinte: #1F1B16;
  --graphit: #5A534A;
  --nacht: #14120F;
  --siegelrot: #8E2A23;
  --moos: #4E6B4A;
  --ocker: #B07A2A;
  --ocker-text: #7A5216;
  --akzent: var(--siegelrot);
  --titel: 'Fraunces', Georgia, 'Times New Roman', serif;
  --text: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --korn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 .12 0 0 0 0 .1 0 0 0 0 .08 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23k)'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--papier) var(--korn);
  color: var(--tinte);
  font: 400 1.0625rem/1.65 var(--text);
}

img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-color: var(--akzent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--akzent); }
:focus-visible { outline: 3px solid var(--ocker); outline-offset: 3px; }

h1, h2, h3 { font-family: var(--titel); font-weight: 600; line-height: 1.12; margin: 0 0 .6em; text-wrap: balance; }
h1 { font-size: clamp(2.1rem, 5.2vw, 3.6rem); letter-spacing: -.01em; }
h2 { font-size: clamp(1.55rem, 3.2vw, 2.25rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1em; }

.rahmen { width: min(100% - 2rem, 70rem); margin-inline: auto; }
.rahmen--schmal { width: min(100% - 2rem, 47.5rem); }
.abschnitt { padding: clamp(3rem, 8vw, 5.5rem) 0; }
.abschnitt--dunkel { background: var(--papier-dunkel) var(--korn); }
.abschnitt--nacht { background: var(--nacht); color: var(--papier); --akzent: var(--ocker); }

.kicker { font: 500 .8125rem/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--graphit); margin-bottom: 1rem; }
.abschnitt--nacht .kicker { color: var(--papier-dunkel); }
.vorspann { font-size: 1.1875rem; line-height: 1.6; max-width: 40em; }
.randnotiz { color: var(--graphit); font-size: .9375rem; max-width: 44em; }

.sprung { position: absolute; left: -999px; top: .5rem; background: var(--tinte); color: var(--papier); padding: .5rem 1rem; z-index: 10; }
.sprung:focus { left: .5rem; }

/* Kopf */
.kopf { border-bottom: 1.5px solid var(--tinte); background: var(--papier-hell); }
.kopf__zeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1.5rem; padding: .75rem 0; }
.kopf__nav { display: flex; align-items: center; gap: 1.25rem; font-weight: 600; font-size: .9375rem; }
.kopf__nav a:not(.knopf) { text-decoration: none; padding: .35rem 0; border-bottom: 2px solid transparent; }
.kopf__nav a:not(.knopf):hover, .kopf__nav a[aria-current] { border-bottom-color: var(--siegelrot); color: inherit; }

.logo { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--tinte); }
.logo:hover { color: var(--tinte); }
.logo__siegel { width: 2.25rem; flex: none; }
.logo__siegel circle { fill: var(--siegelrot); }
.logo__siegel path { fill: #EFD9C4; }
.logo__siegel .logo__dot { fill: var(--siegelrot); }
.logo__word { font: 600 1.25rem/1 var(--titel); letter-spacing: .04em; text-transform: uppercase; }
.logo--hell, .logo--hell:hover { color: var(--papier); }

/* Knöpfe */
.knopf {
  display: inline-block; padding: .7rem 1.3rem; border: 1.5px solid var(--tinte); border-radius: 2px;
  background: var(--tinte); color: var(--papier); font: 600 1rem/1.2 var(--text); text-decoration: none; cursor: pointer;
}
.knopf:hover { background: var(--siegelrot); border-color: var(--siegelrot); color: var(--papier); }
.knopf--linie { background: transparent; color: var(--tinte); }
.knopf--klein { padding: .45rem .9rem; font-size: .875rem; }
.knoepfe { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.75rem 0 0; }
.abschnitt--nacht .knopf { background: var(--papier); color: var(--nacht); border-color: var(--papier); }
.abschnitt--nacht .knopf:hover { background: var(--ocker); border-color: var(--ocker); }

/* Auftakt mit Karte */
.auftakt { padding: clamp(2rem, 6vw, 4rem) 0 clamp(2.5rem, 6vw, 4.5rem); border-bottom: 1.5px solid var(--tinte); }
.auftakt__raster { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 56rem) { .auftakt__raster { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 3rem; } }
.auftakt__karte { margin: 0; }
.auftakt__karte figcaption { font: 500 .8125rem/1.4 var(--mono); color: var(--graphit); text-align: center; margin-top: .25rem; }

.karte { width: 100%; max-height: 82vh; }
.karte__grid { fill: none; stroke: var(--graphit); stroke-opacity: .3; stroke-width: .75; vector-effect: non-scaling-stroke; }
.karte__land { fill: var(--papier-dunkel); fill-opacity: .55; }
.karte__states { fill: none; stroke: var(--graphit); stroke-width: .75; vector-effect: non-scaling-stroke; }
.karte__outline { fill: none; stroke: var(--tinte); stroke-width: 1.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.pin { --akzent: var(--siegelrot); text-decoration: none; }
.pin--moos { --akzent: var(--moos); }
.pin--ocker { --akzent: var(--ocker); }
.pin__shadow { fill: var(--tinte); opacity: .25; }
.pin__body { fill: var(--akzent); stroke: var(--papier-hell); stroke-width: 1.5; transition: transform .15s; transform-origin: 0 0; }
.pin__dot { fill: var(--papier-hell); }
.pin__ort { font: 600 21px var(--titel); fill: var(--tinte); paint-order: stroke; stroke: var(--papier); stroke-width: 5px; stroke-linejoin: round; }
.pin__jahr { font: 500 15px var(--mono); fill: var(--graphit); paint-order: stroke; stroke: var(--papier); stroke-width: 4px; stroke-linejoin: round; }
.pin:hover .pin__body, .pin:focus-visible .pin__body { transform: scale(1.25); }
.pin:hover .pin__ort, .pin:focus-visible .pin__ort { fill: var(--akzent); }
@media (prefers-reduced-motion: reduce) { .pin__body { transition: none; } }

/* Stempel */
.stempelreihe { list-style: none; padding: 0; margin: 2rem 0; display: grid; gap: 1.5rem; }
@media (min-width: 44rem) { .stempelreihe { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }
.stempelreihe p { margin: .9rem 0 0; }
.stempel {
  display: inline-block; padding: .3rem .8rem; border: 3px solid currentColor; border-radius: 3px; transform: rotate(-3deg);
  font: 500 1.25rem/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase;
}
.stempel--belegt { color: var(--tinte); }
.stempel--umstritten { color: var(--ocker-text); }
.stempel--legende { color: var(--siegelrot); transform: rotate(2deg); }

/* Folgenkarten */
.karteikarten { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 1.75rem; }
@media (min-width: 40rem) { .karteikarten { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .karteikarten { grid-template-columns: repeat(3, 1fr); } }
.karteikarte { --akzent: var(--siegelrot); }
.karteikarte--moos, .folge--moos { --akzent: var(--moos); }
.karteikarte--ocker, .folge--ocker { --akzent: var(--ocker); }
.karteikarte a {
  display: flex; flex-direction: column; height: 100%; background: var(--papier-hell); border: 1.5px solid var(--tinte);
  border-left: 6px solid var(--akzent); text-decoration: none; color: var(--tinte); transition: transform .15s, box-shadow .15s;
}
.karteikarte a:hover { transform: translateY(-3px); box-shadow: 0 8px 0 -4px var(--papier-dunkel), 0 8px 0 -2.5px var(--tinte); }
@media (prefers-reduced-motion: reduce) { .karteikarte a { transition: none; } .karteikarte a:hover { transform: none; } }
.karteikarte img { aspect-ratio: 16 / 9; object-fit: cover; border-bottom: 1.5px solid var(--tinte); }
.karteikarte__kopf { font: 500 .78rem/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--graphit); padding: .9rem 1rem 0; }
.karteikarte__titel { font: 600 1.3rem/1.2 var(--titel); padding: .35rem 1rem .6rem; }
.karteikarte__playlist { margin-top: auto; padding: 0 1rem 1rem; font-size: .875rem; font-weight: 600; color: var(--akzent); }
.karteikarte--ocker .karteikarte__playlist { color: var(--ocker-text); }

/* Playlists */
.playlists { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 1.5rem; }
@media (min-width: 52rem) { .playlists { grid-template-columns: repeat(3, 1fr); } }
.playlist { border-top: 6px solid var(--akzent); padding-top: 1rem; }
.playlist--siegelrot { --akzent: var(--siegelrot); }
.playlist--moos { --akzent: var(--moos); }
.playlist--ocker { --akzent: var(--ocker); }
.playlist__zahl { font: 500 .8125rem var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--graphit); }

/* Newsletter */
.anmeldung { margin-top: 1.75rem; max-width: 34rem; }
.anmeldung label { display: block; font-weight: 600; font-size: .9375rem; margin-bottom: .4rem; }
.anmeldung__zeile { display: flex; flex-wrap: wrap; gap: .6rem; }
.anmeldung input[type='email'] {
  flex: 1 1 15rem; min-width: 0; padding: .7rem .9rem; font: 400 1rem/1.2 var(--text);
  background: var(--papier-hell); color: var(--tinte); border: 1.5px solid var(--tinte); border-radius: 2px;
}
.anmeldung__falle { position: absolute; left: -9999px; }
.anmeldung__hinweis { font-size: .875rem; margin-top: .9rem; opacity: .85; }
.text .anmeldung { margin-top: 2rem; }

/* Anmeldeband unter dem Kopf */
.anmeldeband { background: var(--nacht); color: var(--papier); --akzent: var(--ocker); padding: 1.25rem 0 1.1rem; }
.anmeldeband__raster { display: grid; gap: .75rem 2.5rem; align-items: center; }
@media (min-width: 56rem) { .anmeldeband__raster { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } }
.anmeldeband h2 { font-size: 1.35rem; margin: 0 0 .2rem; }
.anmeldeband p { margin: 0; }
.anmeldeband .anmeldung { margin: 0; max-width: none; }
.anmeldeband .anmeldung label { position: absolute; left: -9999px; }
.anmeldeband .anmeldung__falle label { position: static; }
.anmeldeband .anmeldung__hinweis { font-size: .78rem; margin-top: .5rem; color: var(--papier-dunkel); }
.anmeldeband .knopf { background: var(--papier); color: var(--nacht); border-color: var(--papier); }
.anmeldeband .knopf:hover { background: var(--ocker); border-color: var(--ocker); }

/* Kanäle */
.kanaele { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr)); }
.kanal { display: grid; gap: .1rem; padding: 1rem 1.1rem; background: var(--papier-hell); border: 1.5px solid var(--tinte); text-decoration: none; }
.kanal:hover { background: var(--tinte); color: var(--papier); }
.kanal__name { font: 600 1.25rem/1.2 var(--titel); }
.kanal__handle { font: 500 .875rem var(--mono); }
.kanal__notiz { font-size: .9rem; opacity: .8; margin-top: .3rem; }

/* Folgenseite und Textseiten */
.folge .kicker a { text-decoration: none; border-bottom: 2px solid var(--akzent); }
.folge__daten { font: 500 .9375rem/1.5 var(--mono); color: var(--graphit); letter-spacing: .03em; margin-bottom: 1.5rem; }
.video { position: relative; display: block; margin: 0 0 2rem; border: 1.5px solid var(--tinte); border-left: 6px solid var(--akzent); background: var(--nacht); }
.video img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: opacity .15s; }
.video:hover img { opacity: .85; }
.video__knopf { position: relative; display: block; padding: .8rem 1rem .8rem 2.7rem; background: var(--papier-hell); color: var(--tinte); border-top: 1.5px solid var(--tinte); font-weight: 600; line-height: 1.2; }
.video:hover .video__knopf { background: var(--tinte); color: var(--papier); }
.video__knopf::before { content: ''; position: absolute; left: 1.05rem; top: 50%; translate: 0 -50%; border-left: .9rem solid var(--akzent); border-block: .55rem solid transparent; }
.folge__ort { border-left: 4px solid var(--akzent); padding: .2rem 0 .2rem 1rem; margin: 1.5rem 0; }
.folge__ort span { display: block; font: 500 .8125rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--graphit); }

.folge h2, .text h2 { margin-top: 2.4em; padding-top: .9em; border-top: 1.5px solid var(--tinte); font-size: 1.5rem; }
.folge h3, .text h3 { font: 600 1rem/1.4 var(--text); margin: 1.6em 0 .5em; }
.folge ul, .text ul, .text ol { padding-left: 1.2rem; margin: 0 0 1em; }
.folge li, .text li { margin-bottom: .45em; overflow-wrap: anywhere; }
.folge li::marker { color: var(--akzent); }
.kapitel { list-style: none; padding: 0; margin: 0; }
.kapitel li { margin: 0; border-bottom: 1px solid var(--papier-dunkel); }
.kapitel a { display: flex; gap: 1rem; padding: .5rem 0; text-decoration: none; }
.kapitel__zeit { font: 500 .9375rem/1.75 var(--mono); color: var(--graphit); flex: none; width: 3.2rem; }

.nachbarn { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 3.5rem; padding-top: 1.25rem; border-top: 1.5px solid var(--tinte); }
.nachbar { font: 600 1.15rem/1.3 var(--titel); text-decoration: none; }
.nachbar span { display: block; font: 500 .78rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--graphit); margin-bottom: .2rem; }
.nachbar--weiter { text-align: right; grid-column: 2; }

.stand { font: 500 .8125rem var(--mono); color: var(--graphit); letter-spacing: .04em; }
.angaben { margin: 0 0 2rem; }
.angaben div { display: grid; grid-template-columns: 7.5rem 1fr; gap: 1rem; padding: .45rem 0; border-bottom: 1px solid var(--papier-dunkel); }
.angaben dt { font: 500 .8125rem/1.9 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--graphit); }
.angaben dd { margin: 0; }

/* Fuß */
.fuss { background: var(--nacht); color: var(--papier); padding: 3rem 0 2.5rem; --akzent: var(--ocker); }
.fuss__claim { font: 600 1.35rem/1.3 var(--titel); margin: 1.25rem 0 .75rem; }
.fuss__hinweis { font-size: .875rem; color: var(--papier-dunkel); max-width: 42em; }
.fuss__links { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin-top: 1.25rem; font-size: .9375rem; }
.fuss__links a { text-decoration: none; }
.fuss__links a:hover, .fuss__links a[aria-current] { color: var(--papier); text-decoration: underline; }
.fuss__links--recht { border-top: 1px solid var(--graphit); padding-top: 1.25rem; color: var(--papier-dunkel); }

/* Auf dem Handy ist die Karte schmal: Etiketten größer setzen. */
@media (max-width: 40rem) { .pin__ort { font-size: 29px; } .pin__jahr { font-size: 21px; } }