@import url('https://fonts.googleapis.com/css2?family=Petrona:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Public+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  --donau: #23305e;
  --donau-soft: #3a4a80;
  --leinwand: #fbf1cf;
  --leinwand-deep: #f3e4b8;
  --marille: #e2933f;
  --marille-deep: #b8721f;
  --weinlaub: #5c8a3a;
  --weinlaub-deep: #446b29;
  --stiftgold: #d4a53f;
  --weiss: #fffdf5;
  --font-display: "Petrona", Georgia, serif;
  --font-body: "Public Sans", "Segoe UI", sans-serif;
  --font-data: "IBM Plex Mono", ui-monospace, monospace;
  --content-max: 78rem;
  --reading-max: 42rem;
  --step-0: clamp(.85rem, .81rem + .18vw, .95rem);
  --step-1: clamp(1.03rem, .98rem + .22vw, 1.16rem);
  --step-2: clamp(1.32rem, 1.14rem + .78vw, 1.85rem);
  --step-3: clamp(1.85rem, 1.42rem + 1.9vw, 3rem);
  --step-4: clamp(2.5rem, 1.7rem + 3.6vw, 4.7rem);
  --space-xs: clamp(.55rem, .48rem + .35vw, .85rem);
  --space-s: clamp(1rem, .8rem + .9vw, 1.6rem);
  --space-m: clamp(1.7rem, 1.25rem + 2vw, 2.9rem);
  --space-l: clamp(3rem, 2.1rem + 4.2vw, 5.7rem);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--donau);
  background: var(--leinwand);
  font-family: var(--font-body);
  font-size: var(--step-1);
  line-height: 1.62;
}
img { display: block; max-width: 100%; }
a { color: var(--marille-deep); }
a:hover { color: var(--weinlaub-deep); }
:focus-visible { outline: .18rem solid var(--marille); outline-offset: .18rem; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.01em;
  color: var(--donau);
  text-wrap: balance;
}
h1 { margin: 0; font-size: var(--step-4); font-weight: 600; font-style: italic; }
h2 { margin: 0 0 .9rem; font-size: var(--step-3); font-style: italic; }
h3 { margin: 0 0 .55rem; font-size: var(--step-2); font-weight: 600; font-style: normal; }
p { max-width: 66ch; }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 300; padding: .8rem 1.1rem; background: var(--stiftgold); color: var(--donau); }
.skip-link:focus { left: 1rem; top: 1rem; }

.spur { width: min(calc(100% - 2rem), var(--content-max)); margin-inline: auto; }

/* ---- header ---- */
.ufer { position: sticky; top: 0; z-index: 50; background: var(--leinwand); border-bottom: 3px solid var(--donau); }
.ufer-leiste { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1.4rem; min-height: 4.3rem; padding-block: .6rem; }
.ufer-marke { display: inline-flex; align-items: baseline; gap: .5rem; text-decoration: none; color: var(--donau); }
.ufer-marke strong { font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: 1.25rem; }
.ufer-marke span { display: block; font-family: var(--font-data); font-size: .6rem; letter-spacing: .05em; text-transform: uppercase; color: var(--donau-soft); }
.pfadnav { display: flex; gap: .2rem; overflow-x: auto; scrollbar-width: thin; padding-block: .2rem; }
.pfadnav a { display: inline-flex; align-items: center; min-height: 44px; padding: .4rem .65rem; color: var(--donau); font-weight: 600; font-size: .92rem; white-space: nowrap; text-decoration: none; border-bottom: 2px solid transparent; }
.pfadnav a[aria-current="page"] { border-bottom-color: var(--marille); color: var(--marille-deep); }
.pfadnav a:hover { border-bottom-color: var(--weinlaub); }

/* ---- hero: river-strip composition ---- */
.strom { background: linear-gradient(180deg, var(--leinwand) 0%, var(--leinwand-deep) 100%); border-bottom: 3px solid var(--donau); overflow: hidden; }
.strom-kopf { padding-block: var(--space-l) var(--space-m); }
.strom-tag { display: inline-flex; align-items: center; gap: .5rem; margin-bottom: 1.1rem; padding: .35rem .7rem; background: var(--donau); color: var(--leinwand); font-family: var(--font-data); font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; }
.strom-kopf h1 { max-width: 30ch; }
.strom-kopf .dek { margin-top: 1.1rem; max-width: 52ch; font-size: clamp(1.05rem, 1rem + .35vw, 1.25rem); color: var(--donau-soft); }
.strom-cta { display: inline-flex; align-items: center; min-height: 44px; margin-top: 1.4rem; padding: .7rem 1.3rem; background: var(--marille); color: var(--weiss); font-weight: 700; text-decoration: none; border: 2px solid var(--donau); box-shadow: .3rem .3rem 0 var(--donau); }
.strom-cta:hover { color: var(--weiss); transform: translate(-2px,-2px); box-shadow: .4rem .4rem 0 var(--donau); }

.strom-band { position: relative; padding-block: var(--space-m) var(--space-l); overflow-x: auto; scrollbar-width: thin; }
.strom-band::before { content: ""; position: absolute; left: 0; right: 0; top: calc(var(--space-m) + 1.85rem); height: 3px; background: var(--donau); min-width: 100%; }
.strom-track { position: relative; display: flex; gap: 0; min-width: max-content; padding-inline: max(1rem, calc((100vw - var(--content-max)) / 2)); }
.stromhalt { position: relative; flex: 0 0 auto; width: clamp(9.5rem, 18vw, 13rem); padding-top: 3.1rem; }
.stromhalt::before { content: ""; position: absolute; left: 0; top: 1.85rem; width: 1rem; height: 1rem; border-radius: 50%; background: var(--marille); border: 3px solid var(--donau); }
.stromhalt:first-child::before { background: var(--weinlaub); }
.stromhalt:last-child::before { background: var(--stiftgold); }
.stromhalt .km { display: block; font-family: var(--font-data); font-size: .78rem; color: var(--donau-soft); }
.stromhalt .ort { display: block; margin-top: .15rem; font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: 1.15rem; }
.stromhalt .note { display: block; margin-top: .2rem; font-size: .82rem; color: var(--donau-soft); }
.stromhalt-photo { margin-top: .7rem; aspect-ratio: 4/3; overflow: hidden; border: 2px solid var(--donau); }
.stromhalt-photo img { width: 100%; height: 100%; object-fit: cover; }

/* ---- sections ---- */
.abteil { padding-block: var(--space-l); }
.abteil:nth-of-type(even) { background: var(--leinwand-deep); }
.abteil-kopf { max-width: var(--reading-max); margin-bottom: var(--space-m); }
.abteil-marke { display: inline-block; margin-bottom: .6rem; font-family: var(--font-data); font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--weinlaub-deep); }

.staffel-grid { display: grid; gap: var(--space-s); }
.staffel { background: var(--weiss); border-top-left-radius: 1.6rem; border: 1px solid var(--leinwand-deep); overflow: hidden; }
.staffel-photo { aspect-ratio: 4/3; }
.staffel-photo img { width: 100%; height: 100%; object-fit: cover; }
.staffel-body { padding: 1.3rem 1.4rem 1.5rem; }
.staffel-body h3 { margin-bottom: .4rem; }
.staffel-body p { margin: 0 0 .8rem; font-size: .96rem; }
.staffel-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; text-decoration: none; color: var(--marille-deep); }
.staffel-link::after { content: "→"; margin-left: .4rem; transition: margin .15s; }
.staffel-link:hover::after { margin-left: .7rem; }

.fakt-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; border-top: 2px solid var(--donau); }
.fakt-liste li { display: grid; grid-template-columns: 9rem 1fr; gap: .6rem 1rem; padding: .7rem 0; border-bottom: 1px solid var(--leinwand-deep); }
.fakt-liste dt, .fakt-liste .label { font-family: var(--font-data); font-size: .78rem; color: var(--donau-soft); }
.fakt-liste dd, .fakt-liste .wert { margin: 0; font-weight: 600; }

.zitat { max-width: var(--reading-max); margin: var(--space-m) 0; padding: 1.2rem 1.4rem; border-left: 4px solid var(--marille); background: var(--weiss); font-style: italic; font-size: 1.08rem; }

/* ---- signature tool: Der Tagesplan (day composer) ---- */
.tagesplan { background: var(--donau); color: var(--leinwand); padding-block: var(--space-l); }
.tagesplan h2, .tagesplan h3 { color: var(--weiss); }
.tagesplan-grid { display: grid; gap: var(--space-m); }
.tagesplan-formular { background: var(--donau-soft); padding: 1.4rem; border: 1px solid rgba(251,241,207,.25); }
.tagesplan-formular label { display: block; margin-bottom: .3rem; font-family: var(--font-data); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; }
.tagesplan-formular select, .tagesplan-formular input[type="time"] { width: 100%; min-height: 46px; margin-bottom: 1rem; padding: .5rem .6rem; font: inherit; color: var(--donau); background: var(--leinwand); border: 1px solid var(--donau); }
.tagesplan-halte { display: grid; gap: .5rem; margin-bottom: 1rem; }
.tagesplan-halte label { display: flex; align-items: center; gap: .6rem; font-family: var(--font-body); font-size: .95rem; text-transform: none; letter-spacing: 0; min-height: 44px; }
.tagesplan-halte input[type="checkbox"] { width: 1.15rem; height: 1.15rem; accent-color: var(--marille); }
.tagesplan-ergebnis { background: var(--leinwand); color: var(--donau); padding: 1.4rem; border: 2px solid var(--stiftgold); min-height: 14rem; }
.tagesplan-ergebnis table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tagesplan-ergebnis th, .tagesplan-ergebnis td { padding: .5rem .4rem; text-align: left; border-bottom: 1px solid var(--leinwand-deep); }
.tagesplan-ergebnis th { font-family: var(--font-data); font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--donau-soft); }
.tagesplan-flag { margin-top: .8rem; padding: .6rem .8rem; background: var(--marille); color: var(--weiss); font-weight: 700; font-size: .88rem; }
.tagesplan-flag[hidden] { display: none; }

/* ---- two-column detail layout ---- */
.lesefluss { display: grid; gap: var(--space-m); }
.lesefluss-haupt { max-width: var(--reading-max); }
.lesefluss-haupt > :first-child { margin-top: 0; }
.lesefluss-seite { align-self: start; }
.infobox { background: var(--weiss); border: 1px solid var(--leinwand-deep); border-top: 4px solid var(--weinlaub); padding: 1.1rem 1.3rem; }
.infobox h3 { font-size: 1.1rem; margin-bottom: .5rem; }
.infobox dl { margin: 0; display: grid; gap: .55rem; }
.infobox dt { font-family: var(--font-data); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--donau-soft); }
.infobox dd { margin: 0; font-weight: 600; }

.klassen-grid { display: grid; gap: var(--space-s); }
.klasse { background: var(--weiss); border: 1px solid var(--leinwand-deep); padding: 1.3rem; }
.klasse .abv { display: inline-block; margin-bottom: .5rem; padding: .2rem .55rem; background: var(--leinwand-deep); font-family: var(--font-data); font-size: .78rem; font-weight: 600; }
.klasse h3 { margin-bottom: .4rem; }

/* ---- footer ---- */
.kai { background: var(--donau); color: var(--leinwand); padding-block: var(--space-m); border-top: 3px solid var(--stiftgold); }
.kai-grid { display: grid; gap: var(--space-s); }
.kai a { color: var(--leinwand); }
.kai a:hover { color: var(--stiftgold); }
.kai-marke { font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: 1.2rem; }
.kai-nav { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin-top: .8rem; padding: 0; list-style: none; }
.kai-nav a { min-height: 44px; display: inline-flex; align-items: center; }
.kai small { display: block; margin-top: 1.2rem; max-width: 68ch; color: rgba(251,241,207,.7); font-size: .82rem; }

@media (min-width: 42rem) {
  .staffel-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .klassen-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .tagesplan-grid { grid-template-columns: minmax(0,.95fr) minmax(0,1.05fr); }
  .fakt-liste li { grid-template-columns: 11rem 1fr; }
}
@media (min-width: 64rem) {
  .staffel-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .lesefluss { grid-template-columns: minmax(0,1fr) minmax(19rem, .8fr); }
  .kai-grid { grid-template-columns: 1.2fr 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}