/* Verfallene Orte, Theme »galerie« für den Seitenbauer SEITEN.
   Quelle aller Werte: 74 - Brands und Styles/Verfallene Orte/design-tokens.json (Farbe dark, Typo, Raum).
   Keine eigenen Farben, keine Radien, keine Schatten. Marke schlägt Detektor (Rule 708). */

@font-face { font-family: "Newsreader"; src: url("schriften/Newsreader-Light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("schriften/Newsreader-LightItalic.woff2") format("woff2"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("schriften/Newsreader-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("schriften/Newsreader-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("schriften/InstrumentSans-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

:root {
  --nachtstaub: #110F0C;       /* color.dark.bg */
  --flaeche: #1C1814;          /* color.dark.surface */
  --flaeche-hoch: #26211B;     /* color.dark.surface_raised */
  --moertel: #3B342B;          /* color.dark.line */
  --kalkweiss: #ECE5D6;        /* color.dark.text */
  --staub: #A39A8B;            /* color.dark.text_muted, 6,9:1 auf Nachtstaub (gemessen 2026-09-29) */
  --gruenspan: #7FB0A2;        /* color.dark.accent, 7,9:1 auf Nachtstaub */

  --serif: Newsreader, Georgia, "Times New Roman", serif;
  --sans: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;

  --rand: clamp(1.25rem, 4.5vw, 3.5rem);
  --breite: 83rem;
  --lese: 36rem;

  --r-2: 0.5rem; --r-3: 0.75rem; --r-4: 1rem; --r-6: 1.5rem; --r-8: 2rem;
  --r-12: 3rem; --r-16: 4rem; --r-24: 6rem; --r-32: 8rem;

  --ruhig: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-color: var(--moertel) var(--nachtstaub); }
body {
  margin: 0; background: var(--nachtstaub); color: var(--kalkweiss);
  font: 400 1.125rem/1.65 var(--serif); font-optical-sizing: auto;
  font-kerning: normal; font-variant-numeric: oldstyle-nums proportional-nums;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 300; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ol { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--gruenspan); color: var(--nachtstaub); }
a { color: var(--kalkweiss); text-decoration-line: underline; text-decoration-color: var(--moertel); text-decoration-thickness: 1px; text-underline-offset: 0.28em; transition: text-decoration-color 0.3s var(--ruhig), color 0.3s var(--ruhig); }
a:hover { text-decoration-color: var(--gruenspan); }
:focus-visible { outline: 2px solid var(--gruenspan); outline-offset: 4px; }
.unsichtbar { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.sprung { position: absolute; left: var(--rand); top: -4rem; z-index: 20; padding: var(--r-2) var(--r-4); background: var(--kalkweiss); color: var(--nachtstaub); font: 500 0.75rem/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; }
.sprung:focus { top: var(--r-4); }

/* Führung: Motiv, Region, Jahr, Navigation. Instrument Sans 500, versal, gesperrt. */
.zeile, .kopf__nav, .fuss__links, .fuss__stand {
  font: 500 0.75rem/1.5 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--staub);
  font-variant-numeric: lining-nums tabular-nums;
}

/* Kopf */
.kopf {
  display: flex; align-items: center; justify-content: space-between; gap: var(--r-6);
  padding: var(--r-6) var(--rand); border-bottom: 1px solid var(--moertel);
}
.seite-start .kopf { position: absolute; inset: 0 0 auto; z-index: 5; border-bottom: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--nachtstaub) 78%, transparent), color-mix(in srgb, var(--nachtstaub) 0%, transparent)); padding-bottom: var(--r-16); }
.kopf__marke { display: flex; align-items: center; gap: var(--r-3); text-decoration: none; }
.kopf__marke img { width: 2.1rem; height: 2.1rem; }
.kopf__name { font: 300 1.5rem/1 var(--serif); letter-spacing: -0.01em; }
.kopf__name em, .fuss__marke em { font-style: italic; }
.kopf__nav { display: flex; align-items: center; gap: clamp(1rem, 2.6vw, 2.2rem); color: var(--kalkweiss); letter-spacing: 0.22em; }
.kopf__nav a { text-decoration: none; padding-block: 0.75rem; }
.kopf__nav .kurz { display: none; }
.kopf__nav a:hover { color: var(--gruenspan); }
.kopf__sprache { display: inline-flex; align-items: center; gap: 0.4em; }
.kopf__sprache a { padding: 0.75rem 0.25rem; }
.kopf__sprache [aria-current] { color: var(--gruenspan); }
.kopf__sprache .trenner, .kopf__sprache .aus { color: var(--staub); }
.kopf__sprache .aus { opacity: 0.55; cursor: default; }

/* Hero: ein Foto vollflächig, der Claim, unten rechts Motiv · Region · Jahr */
.hero { position: relative; min-height: max(36rem, 100svh); display: grid; align-items: end; overflow: hidden; background: var(--flaeche); isolation: isolate; }
.hero__bild { position: absolute; inset: 0; z-index: -1; }
.hero__foto { width: 100%; height: 100%; object-fit: cover; }
.hero::after { content: ""; position: absolute; inset: auto 0 0; height: 70%; z-index: -1; background: linear-gradient(0deg, var(--nachtstaub) 0%, color-mix(in srgb, var(--nachtstaub) 90%, transparent) 22%, color-mix(in srgb, var(--nachtstaub) 0%, transparent) 100%); }
.hero__text { padding: 0 var(--rand) clamp(2.5rem, 7vh, 4.5rem); max-width: var(--breite); width: 100%; margin: 0 auto; }
.hero__claim { font: 300 clamp(3rem, 8.4vw, 7rem)/0.98 var(--serif); letter-spacing: -0.02em; max-width: 12ch; }
.hero__fuss { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--r-8); margin-top: var(--r-8); }
.hero__einleitung { max-width: 34rem; font-size: clamp(1.125rem, 1.6vw, 1.3rem); line-height: 1.55; }
.hero__zeile { flex: none; }

@media (prefers-reduced-motion: no-preference) {
  .hero__foto { animation: aus-dem-dunkel 2.4s var(--ruhig) both; }
  .hero__text { animation: auftauchen 1.6s 0.5s var(--ruhig) both; }
  @keyframes aus-dem-dunkel { from { opacity: 0; transform: scale(1.035); filter: brightness(0.55); } to { opacity: 1; transform: none; filter: none; } }
  @keyframes auftauchen { from { opacity: 0; } to { opacity: 1; } }
}

/* Die Auswahl: eine Abfolge von Räumen, kein Raster */
.orte { max-width: var(--breite); margin: 0 auto; padding: clamp(5rem, 12vw, 9rem) var(--rand) clamp(4rem, 9vw, 7rem); }
.orte__kopf { display: flex; justify-content: space-between; align-items: baseline; gap: var(--r-6); padding-bottom: var(--r-4); border-bottom: 1px solid var(--moertel); margin-bottom: clamp(3rem, 7vw, 5.5rem); }
.orte__kopf h2 { font: 300 clamp(2.25rem, 4vw, 2.75rem)/1.1 var(--serif); letter-spacing: -0.01em; }
.orte__hinweis { max-width: var(--lese); color: var(--staub); margin: calc(-1 * var(--r-12)) 0 var(--r-12); }
.raeume { display: grid; gap: clamp(4.5rem, 11vw, 9rem); }
.raum { display: grid; gap: var(--r-6); }
.raum__bild { display: block; overflow: hidden; background: var(--flaeche); text-decoration: none; }
.raum__bild img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform 1.2s var(--ruhig), filter 1.2s var(--ruhig); filter: brightness(0.94); }
.raum:hover .raum__bild img { transform: scale(1.015); filter: none; }
.raum__text { display: grid; gap: var(--r-3); align-content: start; max-width: 30rem; }
.raum__titel { font: 300 clamp(1.75rem, 3vw, 2.5rem)/1.12 var(--serif); letter-spacing: -0.01em; }
.raum__titel a { text-decoration: none; }
.raum__titel a:hover { color: var(--kalkweiss); text-decoration: underline; text-decoration-color: var(--gruenspan); }
.raum__satz { color: var(--kalkweiss); }

@media (min-width: 64rem) {
  .raum { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--r-8); align-items: end; }
  .raum--links .raum__bild { grid-column: 1 / span 8; }
  .raum--links .raum__text { grid-column: 9 / span 4; padding-bottom: var(--r-4); }
  .raum--rechts .raum__bild { grid-column: 5 / span 8; grid-row: 1; }
  .raum--rechts .raum__text { grid-column: 1 / span 4; grid-row: 1; padding-bottom: var(--r-4); }
  .raum--breit .raum__bild { grid-column: 1 / -1; }
  .raum--breit .raum__bild img { aspect-ratio: 21 / 9; }
  .raum--breit .raum__text { grid-column: 2 / span 6; max-width: none; }
  .raum--links .raum__bild img, .raum--rechts .raum__bild img { aspect-ratio: 4 / 3; }
}

/* Über die Auswahl */
.auswahl { background: var(--flaeche); border-top: 1px solid var(--moertel); }
.auswahl__innen { max-width: var(--breite); margin: 0 auto; padding: clamp(4.5rem, 10vw, 8rem) var(--rand); display: grid; gap: var(--r-6); }
.auswahl__satz { font: 300 clamp(1.75rem, 3.6vw, 2.6rem)/1.32 var(--serif); letter-spacing: -0.01em; max-width: 22ch; }
.auswahl__rechts { display: grid; gap: var(--r-6); align-content: end; }
.auswahl__text { max-width: var(--lese); }
.auswahl__link a { font: 500 0.8125rem/1.5 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--gruenspan); text-decoration-color: var(--moertel); }
@media (min-width: 64rem) {
  .auswahl__innen { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--r-8); }
  .auswahl__satz { grid-column: 2 / span 5; }
  .auswahl__rechts { grid-column: 8 / span 4; }
}

/* Ortsseite */
.ort__kopf { max-width: var(--breite); margin: 0 auto; padding: clamp(3.5rem, 9vw, 7rem) var(--rand) var(--r-8); display: grid; gap: var(--r-4); }
.ort__zurueck { font: 500 0.75rem/1.5 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; }
.ort__zurueck a { color: var(--staub); text-decoration: none; }
.ort__zurueck a:hover { color: var(--gruenspan); }
.ort__stelle { color: var(--staub); margin-left: var(--r-4); padding-left: var(--r-4); border-left: 1px solid var(--moertel); }
.ort__vorab { margin-top: var(--r-6); font: 500 0.75rem/1.5 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; }
.ort__vorab a { color: var(--gruenspan); text-decoration-color: var(--moertel); }
.ort__titel { font: 300 clamp(2.6rem, 6.4vw, 5.5rem)/1.02 var(--serif); letter-spacing: -0.02em; max-width: 16ch; }
.ort__titelbild img { width: 100%; max-height: 88svh; object-fit: cover; }
.ort__einleitung { max-width: var(--breite); margin: 0 auto; padding: clamp(3rem, 7vw, 5rem) var(--rand) 0; }
.ort__einleitung p { max-width: var(--lese); font-size: clamp(1.2rem, 1.7vw, 1.375rem); line-height: 1.6; }
@media (min-width: 64rem) { .ort__einleitung p { margin-left: calc((100% - var(--r-8) * 11) / 12 + var(--r-8)); } }

.strecke { max-width: var(--breite); margin: 0 auto; padding: clamp(4rem, 9vw, 7rem) var(--rand) 0; }
.strecke__titel { font: 500 0.75rem/1.5 var(--sans); letter-spacing: 0.22em; text-transform: uppercase; color: var(--staub); padding-bottom: var(--r-4); border-bottom: 1px solid var(--moertel); margin-bottom: var(--r-8); }
.strecke__bilder { display: grid; gap: clamp(3rem, 8vw, 5rem); }
.strecke__bild img { width: 100%; background: var(--flaeche); }
.strecke__bild figcaption { margin-top: var(--r-3); }
@media (min-width: 64rem) {
  .strecke__bilder { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--r-8); row-gap: clamp(4rem, 8vw, 6rem); }
  .strecke__bild--quer-links { grid-column: 1 / span 8; }
  .strecke__bild--quer-rechts { grid-column: 5 / span 8; }
  .strecke__bild--hoch-links { grid-column: 2 / span 5; }
  .strecke__bild--hoch-rechts { grid-column: 7 / span 5; }
}

.weiter { max-width: var(--breite); margin: clamp(5rem, 11vw, 8rem) auto 0; padding: clamp(3rem, 6vw, 4.5rem) var(--rand); border-top: 1px solid var(--moertel); display: grid; gap: var(--r-4); }
.weiter__titel { font: 300 clamp(1.9rem, 3.4vw, 2.6rem)/1.15 var(--serif); letter-spacing: -0.01em; }
.weiter__text { max-width: var(--lese); color: var(--staub); }
.weiter__link { display: inline-block; margin-top: var(--r-2); padding: var(--r-4) var(--r-6); border: 1px solid var(--gruenspan); color: var(--gruenspan); font: 500 0.8125rem/1 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; transition: background-color 0.4s var(--ruhig), color 0.4s var(--ruhig); }
.weiter__link:hover { background: var(--gruenspan); color: var(--nachtstaub); }

.blaettern { max-width: var(--breite); margin: 0 auto; padding: var(--r-8) var(--rand) clamp(4rem, 8vw, 6rem); display: grid; grid-template-columns: 1fr 1fr; gap: var(--r-8); border-top: 1px solid var(--moertel); }
.blaettern a { display: grid; gap: var(--r-2); text-decoration: none; }
.blaettern strong { font: 300 clamp(1.25rem, 2.2vw, 1.6rem)/1.2 var(--serif); }
.blaettern a:hover strong { color: var(--gruenspan); }
.blaettern__nachher { text-align: right; justify-items: end; }

/* Recht und Fehler */
.recht { max-width: var(--breite); margin: 0 auto; padding: clamp(3.5rem, 9vw, 7rem) var(--rand) clamp(4rem, 8vw, 6rem); }
.recht__titel { font: 300 clamp(2.4rem, 5vw, 3.6rem)/1.05 var(--serif); letter-spacing: -0.02em; margin-bottom: var(--r-12); }
.recht__text { max-width: 40rem; }
.recht__text h2 { font: 400 1.4rem/1.3 var(--serif); margin: var(--r-12) 0 var(--r-3); }
.recht__text h3 { font: 500 0.8125rem/1.5 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--staub); margin: var(--r-8) 0 var(--r-2); }
.recht__text p, .recht__text ul { margin: 0 0 var(--r-4); }
.recht__stand { margin-top: var(--r-12); }
.fehler { min-height: 70svh; max-width: var(--breite); margin: 0 auto; padding: clamp(5rem, 12vw, 9rem) var(--rand); display: grid; align-content: center; gap: var(--r-6); }
.fehler__zeichen { width: 4rem; height: 4rem; opacity: 0.8; }
.fehler__titel { font: 300 clamp(2.8rem, 6.4vw, 5rem)/1.02 var(--serif); letter-spacing: -0.02em; }
.fehler p { max-width: var(--lese); }

/* Fuß */
.fuss { border-top: 1px solid var(--moertel); padding: var(--r-12) var(--rand) var(--r-12); }
.fuss__zeile { max-width: var(--breite); margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--r-6); }
.fuss__marke { font: 300 1.25rem/1 var(--serif); color: var(--staub); text-decoration: none; }
.fuss__links { display: flex; flex-wrap: wrap; gap: var(--r-6); letter-spacing: 0.22em; }
.fuss__links a { color: var(--staub); text-decoration: none; display: inline-block; padding-block: 0.6rem; }
.fuss__links a:hover { color: var(--gruenspan); }
.fuss__stand { max-width: var(--breite); margin: var(--r-8) auto 0; font-size: 0.6875rem; }

@media (max-width: 40rem) {
  .kopf { flex-wrap: wrap; row-gap: var(--r-3); }
  .kopf__nav { gap: var(--r-4); letter-spacing: 0.16em; font-size: 0.6875rem; }
  .kopf__nav .lang { display: none; }
  .kopf__nav .kurz { display: inline; }
  .hero__fuss { flex-direction: column; align-items: flex-start; gap: var(--r-4); }
  .blaettern { grid-template-columns: 1fr; }
  .blaettern__nachher { text-align: left; justify-items: start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}