/* Casa Joppolo – Stylesheet, dritte Fassung
   Schriften: Cormorant Garamond (OFL) für Lesetext und Titel, Archivo (OFL) für Labels,
   Navigation, Zahlen. Beide lokal. Drei Farben. Kein Framework, kein Build.
   Bewegung: vier Mittel (Laden, Einblenden je Abschnitt, Ken-Burns auf einem Bild, Hover),
   alle unter prefers-reduced-motion abgeschaltet. */

@font-face { font-family: "Cormorant Garamond"; src: url("../fonts/cormorant-garamond-latin-normal-300-700.woff2") format("woff2"); font-weight: 300 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+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "Cormorant Garamond"; src: url("../fonts/cormorant-garamond-latin-italic-300-700.woff2") format("woff2"); font-weight: 300 700; font-style: italic; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "Archivo"; src: url("../fonts/archivo-latin-normal-wdth-62-125-wght-100-900.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; 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+2000-206F, U+20AC, U+2122, U+2212; }

:root {
  /* Farbe: Creme, Tinte, Meerblau, Zitronengelb, Rot, Stein */
  --paper: #f3ecdc;
  --ink: #23201c;
  --blue: #1b5fa0;
  --blue-deep: #134a80;
  --lemon: #f2c94c;
  --red: #c8372d;
  --stone: #e4dccb;
  --muted: #5e564c;
  --sea: #8fb0d2;
  --sea: color-mix(in oklab, var(--blue) 45%, var(--paper));

  /* Schrift */
  --serif: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Skala */
  --step--1: clamp(0.98rem, 0.92rem + 0.2vw, 1.08rem);
  --step-0: clamp(1.2rem, 1.1rem + 0.35vw, 1.34rem);
  --step-1: clamp(1.35rem, 1.15rem + .8vw, 1.7rem);
  --step-2: clamp(2.1rem, 1.3rem + 3vw, 3.8rem);
  --step-3: clamp(2.7rem, 1.4rem + 5vw, 6rem);
  --label: 0.74rem;
  --lh-display: 0.98;
  --lh-lead: 1.3;
  --lh-text: 1.5;
  --measure: 64ch;

  /* Raum */
  --gutter: clamp(1rem, 4vw, 3rem);
  --space: clamp(4.5rem, 9vw, 8.5rem);
  --space-s: clamp(1.5rem, 3vw, 2.5rem);
  --space-m: clamp(3rem, 6vw, 5.5rem);
  --header: 3.4rem;

  /* Bewegung */
  --ease-out: cubic-bezier(.165, .84, .44, 1);
  --d-hover: .18s;
  --d-reveal: .7s;
  --d-kb: 12s;

  color-scheme: light;
}

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

html { background: var(--paper); color: var(--ink); font-family: var(--serif); -webkit-text-size-adjust: 100%; hanging-punctuation: first allow-end; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body { margin: 0; background: var(--paper); font-size: var(--step-0); line-height: var(--lh-text); font-weight: 500; font-feature-settings: "kern", "liga", "onum"; font-synthesis: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }

h1, h2, h3 { margin: 0; font-family: var(--serif); font-weight: 500; line-height: var(--lh-display); letter-spacing: -0.022em; text-wrap: balance; hyphens: manual; font-feature-settings: "kern", "liga", "lnum"; }
h1 { font-size: var(--step-3); max-width: 20ch; }
h2 { font-size: var(--step-2); max-width: 22ch; }
h3 { font-size: var(--step-1); line-height: 1.15; letter-spacing: -0.01em; margin-bottom: .4em; }
h1 em, h2 em { font-style: italic; font-weight: 500; }

p { margin: 0 0 1em; text-wrap: pretty; hyphens: auto; hyphenate-limit-chars: 7 4 3; -webkit-hyphenate-limit-before: 4; -webkit-hyphenate-limit-after: 3; }
p:last-child { margin-bottom: 0; }
.lead { font-size: var(--step-1); line-height: var(--lh-lead); font-weight: 500; letter-spacing: -0.005em; hyphens: manual; }
.measure { max-width: var(--measure); }
.muted { color: var(--muted); }
.small { font-size: var(--step--1); }
.nobr { white-space: nowrap; hyphens: manual; }
em, i { font-style: italic; }
strong { font-weight: 600; }
address { font-style: normal; }

a { color: var(--blue); text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-size: 100% 1px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size .25s var(--ease-out), color var(--d-hover); padding-bottom: 1px; }
a:hover { background-size: 0 1px; color: var(--blue-deep); }
a:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.nav a:focus-visible { outline-offset: -2px; }

/* Label-Stil: Archivo, Versalien, gesperrt */
.label, .eyebrow, .nav a, .btn, th, figcaption .k, .facts dt, .yesno dt small, .tbl-cap, .footer {
  font-family: var(--sans); font-size: var(--label); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; font-variant-numeric: tabular-nums lining-nums; }
.eyebrow { color: var(--blue); display: block; margin-bottom: 1rem; }
.sans { font-family: var(--sans); }

/* Container, Raster */
.wrap { max-width: 1200px; margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-top: var(--space); background: var(--paper); }
.section > .wrap > h2 { margin-bottom: var(--space-s); }
.section > .wrap > .head { margin-bottom: var(--space-s); }
.head > h2 { margin-bottom: 0; }
.mt-s { margin-top: var(--space-s); }
.mt-m { margin-top: var(--space-m); }
.crop-top { object-position: 50% 20%; }
.grid { display: grid; gap: var(--space-s) clamp(1.5rem, 4vw, 4rem); align-items: start; }
.grid-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.grid-text-media { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.sticky { position: sticky; top: calc(var(--header) + 1.25rem); }
@media (max-width: 56rem) {
  .grid-2, .grid-text-media { grid-template-columns: minmax(0, 1fr); }
  .sticky { position: static; }
}

/* Kopf, klebend */
.header { position: sticky; top: 0; z-index: 10; background: rgba(243, 236, 220, .92); background: color-mix(in oklab, var(--paper) 92%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--stone); }
.header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: var(--header); }
.brand { font-family: var(--serif); font-weight: 600; font-size: 1.25rem; color: inherit; background: none; letter-spacing: 0; white-space: nowrap; }
.brand:hover { color: var(--blue); }
.header nav { min-width: 0; }
.nav { display: flex; gap: 1.15rem; margin: 0; padding: 0; list-style: none; letter-spacing: .12em; }
.nav li { flex: 0 0 auto; }
@media (max-width: 66rem) { .nav { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-inline-end: 3rem; mask-image: linear-gradient(to right, #000 88%, transparent); } .nav::-webkit-scrollbar { display: none; } }
.nav a { color: var(--ink); background: none; padding: .9rem 0; display: inline-block; border-bottom: 2px solid transparent; transition: color var(--d-hover), border-color var(--d-hover); }
.nav a:hover, .nav a[aria-current="true"] { color: var(--blue); border-color: var(--blue); }
@media (max-width: 56rem) { .nav { gap: 1rem; } .brand { font-size: 1.15rem; } }
/* Sprachwahl: zwei kleine Flaggen rechts, die aktive voll, die andere gedämpft */
.header nav { margin-inline-start: auto; }
.lang { display: flex; gap: .6rem; align-items: center; flex: 0 0 auto; }
.lang a { display: block; background: none; padding: 0; line-height: 0; border-radius: 2px; box-shadow: 0 0 0 1px var(--stone); opacity: .5; transition: opacity var(--d-hover); }
.lang a:hover, .lang a:focus-visible, .lang a[aria-current] { opacity: 1; }
.lang svg { width: 22px; height: 15px; display: block; border-radius: 2px; }

/* Bühne */
.hero { padding-top: clamp(2rem, 5vw, 4rem); }
.hero h1 { max-width: 14ch; }
.poster-wrap { position: relative; margin-top: .75rem; }
.poster-wrap img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }
.poster { position: absolute; top: 5%; left: 0; font-family: var(--sans); font-stretch: 68%; font-weight: 800; text-transform: uppercase; letter-spacing: .01em; line-height: .86; font-size: clamp(3.2rem, 12.6vw, 11.6rem); color: var(--blue); margin: 0 0 0 -0.03em; display: block; }
.hero .band { margin-top: 0; }
.illu-band { margin: var(--space-s) 0 0; }
.illu-band.top { margin: 0 0 var(--space-s); }
.illu-band img, .illu img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; filter: none; }
.illu { margin: 0 0 1.25rem; }
.hero-claim { margin-top: var(--space-m); }
.hero-claim .lead { margin-top: 1.25rem; }
.band { background: var(--lemon); color: var(--ink); }
.band { margin-top: var(--space-s); }
.band .facts { border: 0; margin-top: 0; padding-block: 2.25rem; }
.band .facts dt { color: color-mix(in oklab, var(--ink) 65%, var(--lemon)); }
@media (max-width: 40rem) { .facts { grid-template-columns: 1fr 1fr; } .facts > div:last-child:nth-child(odd) { grid-column: span 2; } }
.band .facts a { color: var(--ink); background-size: 100% 1px; background-image: linear-gradient(color-mix(in oklab, var(--ink) 45%, var(--lemon)), color-mix(in oklab, var(--ink) 45%, var(--lemon))); }
.band .facts a:hover { color: var(--blue-deep); background-size: 0 1px; }
.hero .lead { max-width: 40ch; }
.hero .cta { margin-top: clamp(1.25rem, 2.5vw, 2rem); display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; }
.hero-media { margin-top: 0; }
.hero-media .frame { overflow: hidden; max-height: 70vh; }
.hero-media img { width: 100%; height: 100%; max-height: 70vh; object-fit: cover; display: block; transform-origin: 50% 60%; }

/* Fakten als Zeile */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 1rem clamp(1rem, 3vw, 2.5rem); margin: var(--space-s) 0 0; padding-block: 1.1rem; border-top: 1px solid var(--stone); border-bottom: 1px solid var(--stone); }
.facts div { margin: 0; }
.facts dt { color: var(--muted); margin-bottom: .3rem; }
.facts dd { margin: 0; font-size: var(--step-0); line-height: 1.3; }

/* Knöpfe */
.btn { display: inline-block; background: var(--blue); color: var(--paper); padding: .85em 1.35em; border-radius: 2px; transition: background-color var(--d-hover), color var(--d-hover); background-image: none; }
.btn:hover { background: var(--blue-deep); color: var(--paper); background-size: auto; }

/* Bilder: klein, beschriftet, in Reihen */
figure { margin: 0; }
figure img { display: block; width: 100%; height: auto; }
figure:not(.drawing) img { filter: saturate(.92); }
.wide img { aspect-ratio: 3 / 2; object-fit: cover; max-height: 60vh; }
figcaption { font-family: var(--serif); font-style: italic; font-size: 1.1rem; line-height: 1.4; color: color-mix(in oklab, var(--ink) 78%, var(--paper)); padding-top: .55rem; }
figcaption .k { font-style: normal; color: var(--muted); margin-right: .5rem; letter-spacing: .12em; }
.row-2, .row-3 { display: grid; gap: clamp(.75rem, 2vw, 1.5rem); align-items: start; }
.row-2 { grid-template-columns: 1fr 1fr; }
.row-3 { grid-template-columns: 1fr 1fr 1fr; }
.row-2 img, .row-3 img { aspect-ratio: 3 / 2; object-fit: cover; }
@media (max-width: 56rem) { .row-3 { grid-template-columns: 1fr 1fr; } .row-3 > :last-child:nth-child(odd) { grid-column: span 2; } }
@media (max-width: 36rem) { .row-2 { grid-template-columns: 1fr; } }
.drawing { max-width: 34rem; }
.drawing img { aspect-ratio: 56 / 77; object-fit: cover; object-position: 100% 50%; mix-blend-mode: multiply; }

/* Gibt es / Gibt es nicht */
.yesno { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-s) clamp(1.5rem, 4vw, 4rem); }
.yesno > div { border-top: 1px solid var(--ink); padding-top: .8rem; }
.yesno h3 { font-family: var(--sans); font-size: var(--label); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 1rem; }
.yesno dl { margin: 0; }
.yesno dt { font-weight: 600; margin-top: .9rem; }
.yesno dd { margin: .1rem 0 0; color: var(--muted); font-size: 1.12rem; line-height: 1.45; }
@media (max-width: 40rem) { .yesno { grid-template-columns: 1fr; } }

/* Tabellen */
.tbl { width: 100%; border-collapse: collapse; font-family: var(--sans); font-size: 0.86rem; line-height: 1.35; font-variant-numeric: tabular-nums lining-nums; }
.tbl th, .tbl td { text-align: left; padding: .55rem .6rem; border-bottom: 1px solid var(--stone); vertical-align: top; }
.tbl th { color: var(--muted); font-weight: 500; border-bottom-color: var(--ink); }
.tbl td.num, .tbl th.num { text-align: right; }
.tbl tbody tr:nth-child(even) td { background: none; }
.tbl td:first-child { font-weight: 600; }
.tbl-cap { color: var(--muted); margin-top: .7rem; letter-spacing: .08em; text-transform: none; font-size: 0.82rem; }
.tbl-wrap { overflow-x: auto; }
@media (max-width: 40rem) {
  .tbl { font-size: .8rem; }
  .tbl th, .tbl td { padding: .5rem .3rem; }
  .tbl th:nth-child(6), .tbl td:nth-child(6) { display: none; }
  .tbl td:first-child, .tbl th:first-child { position: sticky; left: 0; background: var(--paper); }
}

/* Preis */
.price { display: grid; grid-template-columns: auto 1fr; gap: .35rem 1.2rem; margin: 0; font-variant-numeric: tabular-nums lining-nums; border-top: 1px solid var(--ink); padding-top: .9rem; }
.price dt { font-family: var(--sans); font-size: var(--label); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding-top: .25rem; }
.price dd { margin: 0; }
.price .big { font-size: var(--step-1); line-height: 1.1; }

/* Zitat */
.quote { border-left: 2px solid var(--blue); padding-left: 1.25rem; margin: var(--space-s) 0; font-size: var(--step-1); line-height: 1.3; font-style: italic; font-weight: 500; max-width: 34ch; }
.quote cite { display: block; font-style: normal; font-family: var(--sans); font-size: var(--label); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-top: .8rem; }

/* Lageskizze: Plakat, nicht Katasteramt */
.lageskizze { width: 100%; height: auto; display: block; }
@media (min-width: 64rem) { .map-wrap { order: -1; } }
.lageskizze .sea { fill: var(--blue); }
.lageskizze .land { fill: var(--paper); }
.lageskizze .sun { fill: var(--lemon); }
.lageskizze .rail { fill: none; stroke: var(--red); stroke-width: 5; stroke-linejoin: round; stroke-linecap: round; }
.lageskizze .stop { fill: var(--paper); stroke: var(--red); stroke-width: 3; }
.lageskizze .walk { stroke: var(--ink); stroke-width: 2; stroke-dasharray: 3 5; stroke-linecap: round; }
.lageskizze .here { fill: var(--red); }
.lageskizze text { font-family: var(--sans); font-size: 17px; font-weight: 700; font-stretch: 75%; letter-spacing: .08em; text-transform: uppercase; fill: var(--ink); }
.lageskizze text.small { font-size: 13px; font-weight: 500; font-stretch: 90%; letter-spacing: .02em; text-transform: none; fill: var(--ink); }
.lageskizze text.big { font-size: 26px; font-weight: 800; }
.lageskizze text.sea-label { font-size: 13px; font-weight: 600; font-stretch: 85%; letter-spacing: .18em; fill: var(--paper); opacity: .9; }
.lageskizze .scale, .lageskizze .north { fill: none; stroke: var(--ink); stroke-width: 2; }
.lageskizze text.insea { fill: var(--paper); }
@media (prefers-reduced-motion: no-preference) {
  html.js .lageskizze .rail { stroke-dasharray: var(--rail-len, 3000); stroke-dashoffset: var(--rail-len, 3000); transition: stroke-dashoffset 2.8s cubic-bezier(.4, 0, .2, 1) .2s; }
  html.js .reveal.is-visible .lageskizze .rail { stroke-dashoffset: 0; }
}

/* Listen */
ol.bullets, ul.bullets { padding-left: 1.3em; margin: 0 0 1.2em; }
ol.bullets li, ul.bullets li { margin-bottom: .4em; padding-left: .2em; }
ol.bullets li::marker { font-family: var(--sans); font-size: .78em; font-weight: 600; color: var(--blue); }

/* Kontakt */
.contact { font-size: var(--step-1); line-height: 1.3; }
.contact .mail { font-weight: 600; }

/* Lightbox */
.lightbox { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; margin: 0; display: none; }
.lightbox[open] { display: grid; place-items: center; grid-template-rows: 1fr auto; }
.lightbox::backdrop { background: color-mix(in oklab, var(--paper) 96%, transparent); }
.lightbox img { max-width: min(92vw, 1365px); max-height: 82vh; width: auto; height: auto; object-fit: contain; box-shadow: none; }
.lightbox .lb-cap { font-family: var(--serif); font-style: italic; font-size: 1.1rem; color: var(--ink); margin: 0; padding: .5rem var(--gutter) 1.5rem; text-align: center; max-width: 60ch; }
.lightbox button { position: fixed; top: 50%; translate: 0 -50%; background: transparent; border: 0; color: var(--ink); font-family: var(--serif); font-size: 3rem; line-height: 1; padding: .5rem 1rem; cursor: pointer; }
.lightbox .lb-prev { left: .5rem; } .lightbox .lb-next { right: .5rem; }
.lightbox .lb-close { top: .5rem; right: .75rem; translate: none; font-size: 2.2rem; }
.lightbox button:hover { color: var(--blue); }
.lightbox button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
@media (max-width: 40rem) { .lightbox .lb-prev, .lightbox .lb-next { display: none; } }

/* Zweite Farbfläche */
.band-blue { background: var(--blue); color: var(--paper); padding-block: var(--space); margin-top: var(--space); }
.band-blue .eyebrow { color: var(--paper); opacity: .85; }
.band-blue a { color: var(--paper); }
.band-blue .btn { background: var(--lemon); color: var(--ink); }
.band-blue .btn:hover { background: #e9bd3a; color: var(--ink); }
main > .band-blue:last-child { margin-bottom: calc(-1 * var(--space)); }

/* Fuß */
.footer { margin-top: var(--space); border-top: 1px solid var(--stone); padding: 1.5rem 0 3rem; color: var(--muted); text-transform: none; letter-spacing: .04em; font-size: 0.78rem; }
.footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem 2rem; }
.footer ul { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: 0; padding: 0; list-style: none; }
.footer a { color: inherit; }

/* Unterseiten */
.page { padding-top: clamp(3rem, 6vw, 5rem); }
.page h1 { font-size: var(--step-2); margin-bottom: 1.5rem; }
.page h2 { font-size: var(--step-1); margin: 2.2rem 0 .6rem; }
.notice { color: var(--blue); font-style: italic; margin-bottom: 1.5rem; }

/* Bewegung 1: erster Aufbau */
@media (prefers-reduced-motion: no-preference) {
  .hero .eyebrow, .poster-wrap img, .hero .poster, .hero .band, .hero-claim { transition: opacity var(--d-reveal) var(--ease-out), translate var(--d-reveal) var(--ease-out); }
  .hero .poster { transition-delay: .18s; }
  .hero .band { transition-delay: .1s; }
  .hero-claim { transition-delay: .22s; }
  @starting-style { .hero .eyebrow, .poster-wrap img, .hero .poster, .hero .band, .hero-claim { opacity: 0; translate: 0 12px; } }
  /* Bewegung 2: Abschnitte, einmalig (JS setzt .is-visible) */
  html.js .reveal { opacity: 0; translate: 0 28px; transition: opacity var(--d-reveal) var(--ease-out), translate var(--d-reveal) var(--ease-out); }
  html.js .reveal.is-visible { opacity: 1; translate: none; }
  /* Bewegung 3: ein Bild, langsam */
  .hero-media img { animation: kb var(--d-kb) linear both; }
  @keyframes kb { from { scale: 1; } to { scale: 1.08; } }
  /* Seitenübergang */
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .35s; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

[id] { scroll-margin-top: calc(var(--header) + 1rem); }
::selection { background: color-mix(in oklab, var(--blue) 22%, var(--paper)); }

@media print {
  .header, .btn, .footer ul { display: none; }
  html.js .reveal { opacity: 1 !important; translate: none !important; }
  .band-blue { background: none; color: var(--ink); padding-block: 2rem; }
  .band-blue a, .band-blue .eyebrow { color: var(--ink); }
  .section { padding-top: 2rem; break-inside: avoid; }
  a { color: inherit; background: none; }
}