/* ============================================================
   blood and water — Prototyp-Stylesheet v2
   Tokens siehe DESIGN.md · Fonts werden im HTML geladen (kein @import)
   ============================================================ */

:root {
  --basalt:   #10171a;
  --basalt-2: #18232a;
  --bone:     #e7e3d8;
  --bone-2:   #dcd6c8;
  --ink:      #191a15;
  --oxblood:  #7c1e1a;
  --ember:    #b23a2a;
  --ember-l:  #d0694a;  /* Blut-Ton fuer dunkle Flaechen (AA: 5,0:1 auf basalt) */
  --petrol:   #1c5a5e;
  --petrol-l: #4c8f8f;
  --stone:    #847c6b;
  --stone-l:  #948c7b;  /* Instrumenten-Text auf dunkel (AA: 5,4:1 auf basalt) */
  --stone-d:  #6a6353;

  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --serif:   "Fraunces", Georgia, "Times New Roman", serif;
  --mono:    "Space Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --wrap: 1200px;
  --gut: clamp(1.25rem, 4vw, 4rem);

  --e: cubic-bezier(.22,.61,.36,1);
}

/* ---------- reset-ish ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(1.02rem, 0.6vw + 0.9rem, 1.18rem);
  line-height: 1.62;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 800; line-height: 1.02; margin: 0; letter-spacing: -0.02em; text-wrap: balance; }
p { margin: 0 0 1em; text-wrap: pretty; }
[id] { scroll-margin-top: 5.5rem; }

/* Skip-Link */
.skip { position: absolute; left: -999px; top: 0; }
.skip:focus {
  left: 1rem; top: 1rem; z-index: 100;
  background: var(--oxblood); color: #f4ece2;
  font-family: var(--display); font-weight: 700; font-size: .9rem;
  padding: .6em 1.1em; border-radius: 2px; text-decoration: none;
}

/* ---------- helpers ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.band { padding-block: clamp(4rem, 9vw, 8rem); position: relative; overflow: clip; }
.band--dark { background: var(--basalt); color: var(--bone); }
.band--light { background: var(--bone); color: var(--ink); }
.band--dark h1, .band--dark h2, .band--dark h3 { color: var(--bone); }
/* Sektion direkt nach dem Hoehenprofil-Divider: Divider uebernimmt die Pause */
.band--after-divider { padding-top: clamp(2rem, 4vw, 3.5rem); }
/* Komponierte Dunkel-Folge (z.B. Logbuch -> CTA, Profil -> CTA): kein Doppel-Padding */
.band--joins-next { padding-bottom: clamp(2rem, 4vw, 3.5rem); }
.band--joined { padding-top: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid rgba(231,227,216,.1); }

.eyebrow {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--stone-l);
  margin: 0 0 1.4rem;
  display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
}
.eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--oxblood); flex: none; }
.band--light .eyebrow { color: var(--stone-d); }
.eyebrow .etp { color: var(--ember-l); letter-spacing: .2em; }
.band--light .eyebrow .etp { color: var(--oxblood); }

.section-head { max-width: 62ch; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head h2 { font-size: clamp(2rem, 4.4vw, 3.4rem); }
.lede { font-size: clamp(1.15rem, 1.4vw, 1.5rem); line-height: 1.5; color: var(--stone-d); margin-top: 1.1rem; }
.band--dark .lede { color: #b9bdb6; }

.placeholder-note { font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; color: var(--stone-d); margin-top: 2rem; }
.band--dark .placeholder-note { color: var(--stone-l); }

/* ---------- topo texture ---------- */
.topo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .7;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='600' fill='none' stroke-width='1.1'%3E%3Cg stroke='%23ffffff' stroke-opacity='0.09'%3E%3Cpath d='M-20 120 C 200 60 420 180 640 110 S 1040 40 1240 120'/%3E%3Cpath d='M-20 180 C 200 120 420 240 640 170 S 1040 100 1240 180'/%3E%3Cpath d='M-20 330 C 220 280 420 380 660 320 S 1060 250 1240 330'/%3E%3Cpath d='M-20 410 C 200 360 440 460 660 400 S 1060 330 1240 410'/%3E%3Cpath d='M-20 490 C 220 440 420 540 660 480 S 1060 410 1240 490'/%3E%3C/g%3E%3Cpath d='M-20 250 C 220 190 440 300 660 235 S 1060 170 1240 250' stroke='%234c8f8f' stroke-opacity='0.14'/%3E%3C/svg%3E");
  background-size: cover; background-position: center;
}
.band--light.topo::after {
  opacity: .8;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='600' fill='none' stroke-width='1.1'%3E%3Cg stroke='%23191a15' stroke-opacity='0.05'%3E%3Cpath d='M-20 120 C 200 60 420 180 640 110 S 1040 40 1240 120'/%3E%3Cpath d='M-20 180 C 200 120 420 240 640 170 S 1040 100 1240 180'/%3E%3Cpath d='M-20 330 C 220 280 420 380 660 320 S 1060 250 1240 330'/%3E%3Cpath d='M-20 490 C 220 440 420 540 660 480 S 1060 410 1240 490'/%3E%3C/g%3E%3Cpath d='M-20 250 C 220 190 440 300 660 235 S 1060 170 1240 250' stroke='%231c5a5e' stroke-opacity='0.08'/%3E%3C/svg%3E");
}
.band > .wrap { position: relative; z-index: 1; }

/* ---------- buttons ---------- */
.btn {
  font-family: var(--display); font-weight: 700; font-size: .96rem;
  letter-spacing: .01em; text-decoration: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .95em 1.7em; border: 1px solid transparent; border-radius: 2px;
  transition: transform .25s var(--e), background-color .25s var(--e), color .25s var(--e), border-color .25s var(--e);
}
.btn--primary { background: var(--oxblood); color: #f4ece2; }
.btn--primary:hover { background: var(--ember); transform: translateY(-2px); }
.btn--ghost { background: transparent; border-color: currentColor; color: inherit; }
.btn--ghost:hover { transform: translateY(-2px); }
.band--light .btn--ghost:hover { border-color: var(--oxblood); color: var(--oxblood); }
.band--dark .btn--ghost:hover { border-color: var(--petrol-l); color: var(--petrol-l); }
.btn .arw { transition: transform .25s var(--e); }
.btn:hover .arw { transform: translateX(4px); }

/* ---------- wordmark + glyph ---------- */
.wordmark { font-family: var(--display); font-weight: 800; font-size: 1.28rem; letter-spacing: -0.02em; text-decoration: none; display: inline-flex; align-items: center; gap: .5em; white-space: nowrap; }
.wordmark .wm-text { display: inline-flex; align-items: baseline; gap: .34em; }
.wordmark .b { color: var(--ember-l); }
.wordmark .a { color: var(--stone-l); font-family: var(--mono); font-weight: 400; font-size: .62em; letter-spacing: .05em; }
.wordmark .w { color: var(--petrol-l); }
.wm-glyph { width: 26px; height: 17px; flex: none; }
.wm-glyph .g-b { stroke: var(--ember); stroke-width: 2.2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.wm-glyph .g-w { stroke: var(--petrol-l); stroke-width: 2.2; fill: none; stroke-linecap: round; stroke-dasharray: 3 3; }
.wm-glyph .g-dot { fill: var(--bone); }
.wm-glyph .g-end { fill: var(--petrol-l); }

/* ---------- topbar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(16,23,26,.86); backdrop-filter: blur(8px);
  color: var(--bone); border-bottom: 1px solid rgba(231,227,216,.12);
}
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; padding-block: 1rem; gap: 1.5rem; }
.nav { display: flex; gap: 1.8rem; align-items: center; }
.nav a { font-family: var(--mono); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; color: #c7cac4; transition: color .2s var(--e); position: relative; padding-block: .3rem; }
.nav a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 1px; background: var(--ember); transition: width .28s var(--e); }
.nav a:hover { color: var(--bone); }
.nav a:hover::after { width: 100%; }
.nav-cta { color: var(--bone) !important; border: 1px solid rgba(231,227,216,.3); padding: .5rem .95rem !important; border-radius: 2px; }
.nav-cta:hover { border-color: var(--ember); }
.nav-toggle { display: none; }

/* ---------- hero ---------- */
.hero { min-height: min(92vh, 860px); display: flex; align-items: center; padding-block: clamp(3rem,8vw,6rem); }
.hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; width: 100%; }
.hero h1 { font-size: clamp(2.9rem, 7.4vw, 6.2rem); font-weight: 800; }
.hero h1 .l2 { color: var(--petrol-l); display: block; }
.hero .sub { font-family: var(--serif); font-size: clamp(1.1rem, 1.5vw, 1.4rem); line-height: 1.5; color: #c3c7c0; max-width: 46ch; margin: 1.8rem 0 2.4rem; }
.hero-cta { display: flex; gap: 1rem; flex-wrap: wrap; }
.hero-meta { margin-top: 2.8rem; display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 0; font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; color: var(--stone-l); text-transform: uppercase; }
.hero-meta > span { padding-right: 2rem; }
.hero-meta > span + span { border-left: 1px solid rgba(231,227,216,.14); padding-left: 2rem; }
.hero-meta b { color: var(--bone); font-weight: 700; display: block; font-size: 1.5rem; letter-spacing: 0; font-family: var(--display); margin-bottom: .2rem; }

/* hero route panel — Kartenplatte */
.route-col { display: flex; flex-direction: column; gap: 0; }
.route-panel { position: relative; aspect-ratio: 1000/920; border: 1px solid rgba(231,227,216,.16); border-radius: 3px 3px 0 0; background: linear-gradient(155deg, #121c20, #0c1315 70%); overflow: hidden; }
.route-panel svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.route-panel .rp-corner { position: absolute; top: 12px; right: 14px; font-family: var(--mono); font-size: .64rem; letter-spacing: .12em; color: var(--petrol-l); z-index: 2; }
.route-path { fill: none; stroke: var(--ember); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px rgba(178,58,42,.45)); }
.route-water { fill: none; stroke: var(--petrol-l); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 6 7; }
.route-dot { fill: var(--bone); stroke: var(--oxblood); stroke-width: 2; }
.route-grid { stroke: rgba(231,227,216,.06); stroke-width: 1; }
.rp-tick { font-family: var(--mono); font-size: 11px; fill: var(--stone-l); letter-spacing: .08em; }
.rp-wp { font-family: var(--mono); font-size: 12px; fill: var(--bone); letter-spacing: .1em; }
.rp-wl { font-family: var(--mono); font-size: 12px; fill: var(--petrol-l); letter-spacing: .12em; }
.rp-flag { fill: var(--petrol-l); }
.rp-mast { stroke: var(--petrol-l); stroke-width: 2; }

/* Etappen-Legende unter dem Panel */
.route-legend { border: 1px solid rgba(231,227,216,.16); border-top: 0; border-radius: 0 0 3px 3px; font-family: var(--mono); font-size: .7rem; letter-spacing: .08em; color: var(--stone-l); text-transform: uppercase; }
.route-legend li { display: grid; grid-template-columns: 4.2em 1fr auto; gap: 1rem; padding: .65rem 1rem; border-top: 1px solid rgba(231,227,216,.09); }
.route-legend { list-style: none; margin: 0; padding: 0; }
.route-legend li:first-child { border-top: 0; }
.route-legend .ln { color: var(--ember-l); }
.route-legend .lc { color: var(--petrol-l); text-align: right; }
.route-legend .ziel .ln { color: var(--petrol-l); }

/* ---------- plate (foto-platzhalter) ---------- */
.plate { position: relative; border: 1px solid var(--stone); border-radius: 3px; background:
    repeating-linear-gradient(135deg, transparent 0 22px, rgba(124,30,26,.03) 22px 23px),
    linear-gradient(160deg, var(--bone-2), #cfc8b6); overflow: hidden; aspect-ratio: 4/3; }
.band--dark .plate { border-color: rgba(231,227,216,.2); background:
    repeating-linear-gradient(135deg, transparent 0 22px, rgba(76,143,143,.06) 22px 23px),
    linear-gradient(160deg, #172226, #0e1618); }
.plate .plate-tag { position: absolute; left: 12px; bottom: 11px; font-family: var(--mono); font-size: .63rem; letter-spacing: .16em; text-transform: uppercase; color: #4a4438; }
.band--dark .plate .plate-tag { color: var(--stone-l); }
.plate .plate-coord { position: absolute; right: 12px; top: 11px; font-family: var(--mono); font-size: .63rem; letter-spacing: .1em; color: #4a4438; }
.band--dark .plate .plate-coord { color: var(--petrol-l); }
.plate::before { content: ""; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='300' fill='none' stroke='%23847c6b' stroke-opacity='0.28' stroke-width='1'%3E%3Cpath d='M-10 60 C 90 30 180 90 280 55 S 420 20 500 70'/%3E%3Cpath d='M-10 120 C 90 90 180 150 280 115 S 420 80 500 130'/%3E%3Cpath d='M-10 190 C 90 160 180 220 280 185 S 420 150 500 200'/%3E%3Cpath d='M-10 255 C 90 225 180 285 280 250 S 420 215 500 265'/%3E%3C/svg%3E"); background-size: cover; }

/* ---------- manifest ---------- */
.manifest { display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(2rem,5vw,5rem); align-items: center; }
.manifest .big { font-family: var(--serif); font-weight: 400; font-size: clamp(1.5rem, 2.6vw, 2.3rem); line-height: 1.32; letter-spacing: -0.01em; }
.manifest .big em { font-style: italic; color: var(--oxblood); }
.manifest .side p { color: var(--stone-d); }
.manifest .side .sig { font-family: var(--mono); font-size: .78rem; letter-spacing: .1em; color: var(--ink); margin-top: 1.4rem; }

/* ---------- modes (Reiseart) ---------- */
.modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.mode { background: var(--bone-2); border: 1px solid rgba(25,26,21,.1); border-top: 3px solid var(--oxblood); border-radius: 3px; padding: 2rem 1.7rem 1.8rem; display: flex; flex-direction: column; position: relative; }
.mode::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: var(--ember); transition: width .4s var(--e); }
.mode:hover::after { width: 100%; }
.mode .kick { font-family: var(--mono); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--stone-d); margin-bottom: 1rem; }
.mode h3 { font-size: 1.5rem; margin-bottom: .8rem; }
.mode p { font-size: .98rem; color: #3f4038; margin-bottom: 1.4rem; }
.mode .more { margin-top: auto; font-family: var(--mono); font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; color: var(--oxblood); display: inline-flex; gap: .5rem; padding-block: .5rem; }
.mode .more .arw { transition: transform .25s var(--e); }
.mode .more:hover .arw { transform: translateX(4px); }

/* ---------- tracks manifest ---------- */
.region-label { font-family: var(--display); font-weight: 800; font-size: clamp(1.4rem,2.6vw,2rem); margin: 2.6rem 0 .4rem; display: flex; align-items: baseline; gap: 1rem; letter-spacing: -0.02em; line-height: 1.02; color: var(--bone); }
.region-label:first-of-type { margin-top: 0; }
.region-label .rl-meta { font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; color: var(--stone-l); font-weight: 400; text-transform: uppercase; }
.track-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(231,227,216,.16); }
.track-row { display: grid; grid-template-columns: 130px 1fr auto; gap: 1.5rem; align-items: center; padding: 1.5rem 0; border-bottom: 1px solid rgba(231,227,216,.13); text-decoration: none; color: inherit; transition: padding .3s var(--e); position: relative; }
a.track-row::before { content: ""; position: absolute; left: -100vw; right: -100vw; top: 0; bottom: 0; background: rgba(178,58,42,.06); opacity: 0; transition: opacity .3s var(--e); z-index: -1; }
a.track-row:hover { padding-left: 1rem; }
a.track-row:hover::before { opacity: 1; }
.track-row .coord { font-family: var(--mono); font-size: .74rem; letter-spacing: .06em; color: var(--petrol-l); }
.track-row .t-main h4 { font-family: var(--display); font-weight: 700; font-size: clamp(1.3rem,2.2vw,1.7rem); color: var(--bone); margin-bottom: .3rem; }
.track-row .t-main p { margin: 0; font-size: .95rem; color: #a7aba4; max-width: 60ch; }
.track-row .t-fact { display: block; font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--stone-l); margin-top: .55rem; }
.track-row .t-go { font-family: var(--mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--stone-l); display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap; padding-block: .5rem; }
a.track-row:hover .t-go { color: var(--ember-l); }
.track-row .t-go .arw { transition: transform .25s var(--e); }
a.track-row:hover .t-go .arw { transform: translateX(4px); }
.track-row.soon .t-main h4 { color: #b9b5aa; }
.track-row.soon .t-main p { color: #8d918b; }
.track-row.soon .coord { color: var(--stone-l); }
.track-row.soon .badge { font-family: var(--mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--stone-l); border: 1px solid var(--stone-d); padding: .2em .6em; border-radius: 2px; justify-self: start; }

/* ---------- elevation divider ---------- */
.elevation { display: block; width: 100%; height: clamp(70px, 10vw, 120px); background: var(--basalt); }
.elevation svg { width: 100%; height: 100%; display: block; }
.ele-area { fill: url(#eleGrad); }
.ele-line { fill: none; stroke: var(--petrol-l); stroke-width: 1.6; opacity: .8; }

/* ---------- stimmen (social proof) ---------- */
.quotes { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.quote { background: var(--bone-2); border: 1px solid rgba(25,26,21,.1); border-left: 3px solid var(--petrol); border-radius: 3px; padding: 2rem 1.9rem 1.7rem; }
.quote blockquote { margin: 0 0 1.3rem; font-family: var(--serif); font-style: italic; font-size: clamp(1.15rem, 1.6vw, 1.45rem); line-height: 1.42; color: var(--ink); }
.quote .attr { font-family: var(--mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--stone-d); }
.quote .attr .muster { color: var(--petrol); }

/* ---------- crew ---------- */
.crew { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.crew-card { background: var(--bone-2); border: 1px solid rgba(25,26,21,.1); border-radius: 3px; overflow: hidden; display: flex; flex-direction: column; position: relative; }
.crew-card::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--ember); transition: width .4s var(--e); }
.crew-card:hover::after { width: 100%; }
.crew-card .plate { aspect-ratio: 3/2.6; border: none; border-radius: 0; border-bottom: 1px solid rgba(25,26,21,.12); }
.crew-card .cc-body { padding: 1.4rem 1.5rem 1.6rem; }
.crew-card .role { font-family: var(--mono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--oxblood); margin-bottom: .5rem; }
.crew-card h3 { font-size: 1.35rem; margin-bottom: .7rem; }
.crew-card p { font-size: .93rem; color: #3f4038; margin: 0; }
/* Alliance-Karte: volle Breite, zwei Regionen-Zeilen */
.crew-card.open { grid-column: 1 / -1; border-style: dashed; border-color: var(--stone); background: transparent; padding: 2rem 1.9rem; }
.crew-card.open .role { color: var(--petrol); }
.crew-card.open h3 { font-size: 1.35rem; margin-bottom: .9rem; }
.crew-card.open p { margin-bottom: 1.4rem; max-width: 70ch; }
.open-slots { list-style: none; margin: 0 0 1.6rem; padding: 0; font-family: var(--mono); font-size: .78rem; letter-spacing: .06em; color: var(--stone-d); }
.open-slots li { display: flex; gap: .8rem; align-items: baseline; padding: .6rem 0; border-top: 1px solid rgba(25,26,21,.12); }
.open-slots li::before { content: ""; width: .55em; height: .55em; background: var(--petrol); flex: none; align-self: start; margin-top: .35em; }
.open-slots b { font-family: var(--display); font-weight: 700; color: var(--ink); font-size: .95rem; letter-spacing: 0; }

/* ---------- logbuch ---------- */
.logbook { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.log-entry { background: var(--basalt-2); border: 1px solid rgba(231,227,216,.12); border-radius: 3px; padding: 1.6rem 1.5rem 1.5rem; display: flex; flex-direction: column; }
.log-entry .lh { display: flex; justify-content: space-between; gap: 1rem; font-family: var(--mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--petrol-l); margin-bottom: 1rem; }
.log-entry .lh .ld { color: var(--stone-l); }
.log-entry h3 { font-size: 1.25rem; margin-bottom: .7rem; }
.log-entry p { font-size: .95rem; color: #b3b7b0; margin: 0 0 1.2rem; }
.log-entry .more { margin-top: auto; font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; color: var(--ember-l); display: inline-flex; gap: .5rem; padding-block: .4rem; }

/* ---------- anfrage (form) ---------- */
.ask-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem,5vw,4.5rem); align-items: start; }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1.3rem; }
.field { display: flex; flex-direction: column; gap: .45rem; }
.field--full { grid-column: 1 / -1; }
.field label { font-family: var(--mono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--stone-l); }
.field input, .field select, .field textarea {
  font-family: var(--display); font-weight: 500; font-size: .95rem; color: var(--bone);
  background: rgba(231,227,216,.05); border: 1px solid rgba(231,227,216,.22); border-radius: 2px;
  padding: .75em .9em; width: 100%;
}
.field textarea { min-height: 6.5em; resize: vertical; }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23948c7b' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .9em center; }
.field select option { background: var(--basalt); color: var(--bone); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ember-l); }
.form .btn { grid-column: 1 / -1; justify-self: start; }
.form-note { grid-column: 1 / -1; font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; color: var(--stone-l); margin: 0; }
.ask-side h3 { font-size: 1.2rem; margin-bottom: .7rem; }
.ask-side p { font-size: .95rem; color: #b3b7b0; }
.ask-side .blockrule { border: 0; border-top: 1px solid rgba(231,227,216,.12); margin: 1.8rem 0; }
.ask-side .mono-fact { font-family: var(--mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--stone-l); display: block; padding: .5rem 0; }
.ask-side .mono-fact b { color: var(--bone); font-weight: 700; }

/* ---------- footer ---------- */
.site-footer { background: #0b1113; color: #9aa09a; padding-block: clamp(3rem,6vw,5rem) 2.5rem; border-top: 1px solid rgba(231,227,216,.1); }
.trustbar { display: flex; flex-wrap: wrap; gap: .6rem 2.2rem; font-family: var(--mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--stone-l); padding-bottom: 2.2rem; margin-bottom: 2.6rem; border-bottom: 1px solid rgba(231,227,216,.09); }
.trustbar span::before { content: "▪ "; color: var(--petrol-l); }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 2rem; margin-bottom: 3rem; }
.foot-h { font-family: var(--mono); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--stone-l); margin: 0 0 1.1rem; }
.foot-grid a { display: block; text-decoration: none; color: #b6bab4; font-family: var(--display); font-size: .95rem; padding: .3rem 0; transition: color .2s var(--e); }
.foot-grid a:hover { color: var(--ember-l); }
.foot-grid .wordmark { font-size: 1.5rem; margin-bottom: 1rem; }
.foot-grid .fnote { font-family: var(--serif); font-size: .92rem; color: #8b918b; max-width: 34ch; }
.foot-bar { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-top: 1.6rem; border-top: 1px solid rgba(231,227,216,.09); font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; color: var(--stone-l); }
.foot-bar .todo { color: var(--ember-l); }
.foot-bar a { color: var(--petrol-l); text-decoration: none; }

/* ---------- anspruch-skala ---------- */
.scale { display: inline-flex; gap: 3px; align-items: center; margin-right: .5em; }
.scale i { width: 7px; height: 13px; background: var(--oxblood); border-radius: 1px; }
.scale i.off { background: transparent; border: 1px solid var(--stone); }
.band--dark .scale i { background: var(--ember-l); }
.band--dark .scale i.off { background: transparent; border-color: var(--stone-d); }

/* ---------- track detail page ---------- */
.track-hero { padding-top: clamp(3rem,7vw,5.5rem); }
.breadcrumb { font-family: var(--mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--stone-l); margin-bottom: 1.6rem; }
.breadcrumb a { color: var(--petrol-l); text-decoration: none; }
.breadcrumb a:hover { color: var(--ember-l); }
.track-hero h1 { font-size: clamp(2.6rem, 6.5vw, 5rem); margin-bottom: 1rem; }
.track-hero .th-sub { font-family: var(--serif); font-size: clamp(1.15rem,1.6vw,1.5rem); color: #c3c7c0; max-width: 44ch; }
.stat-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(231,227,216,.14); border: 1px solid rgba(231,227,216,.14); margin-top: 2.6rem; border-radius: 3px; overflow: hidden; }
.stat { background: var(--basalt); padding: 1.3rem 1.4rem; }
.stat .k { font-family: var(--mono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--stone-l); margin-bottom: .5rem; }
.stat .v { font-family: var(--display); font-weight: 700; font-size: 1.35rem; color: var(--bone); display: flex; align-items: center; }
.stat .v small { font-size: .8rem; color: var(--petrol-l); font-weight: 400; margin-left: .4em; }

.track-body { display: grid; grid-template-columns: 1.55fr .9fr; gap: clamp(2rem,5vw,4.5rem); align-items: start; }
.prose p { font-size: clamp(1.08rem,1.2vw,1.24rem); line-height: 1.62; margin-bottom: 1.3rem; }
.prose p.dropcap::first-letter { font-family: var(--display); font-weight: 800; float: left; font-size: 3.1em; line-height: 1; padding: .04em .14em 0 0; color: var(--oxblood); }
@supports (initial-letter: 3) {
  .prose p.dropcap::first-letter { initial-letter: 3; float: none; font-size: unset; line-height: unset; padding: 0 .15em 0 0; }
}
.prose .pull { font-family: var(--serif); font-style: italic; font-size: clamp(1.4rem,2.4vw,2rem); line-height: 1.34; color: var(--ink); border-left: 3px solid var(--petrol); padding-left: 1.3rem; margin: 2.2rem 0; }
.stages { margin-top: 3rem; }
.stages h2 { font-size: 1.6rem; margin-bottom: 1.6rem; }
.stage { display: grid; grid-template-columns: max-content 1fr; gap: 1.4rem; padding: 1.4rem 0; border-top: 1px solid rgba(25,26,21,.14); }
.stage .n { font-family: var(--mono); font-size: .8rem; letter-spacing: .1em; color: var(--oxblood); padding-top: .2rem; white-space: nowrap; min-width: 5.2em; }
.stage .n.water { color: var(--petrol); }
.stage h3 { font-family: var(--display); font-weight: 700; font-size: 1.2rem; margin-bottom: .4rem; }
.stage p { margin: 0 0 .5rem; font-size: .98rem; color: #43443c; }
.stage .st-meta { font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--stone-d); display: flex; align-items: center; }

.aside { position: sticky; top: 92px; background: var(--bone-2); border: 1px solid rgba(25,26,21,.12); border-radius: 3px; padding: 1.7rem; }
.aside .aside-h { font-family: var(--mono); font-weight: 700; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--stone-d); margin: 0 0 1.2rem; }
.aside dl { display: grid; grid-template-columns: 1fr auto; gap: .7rem 1rem; margin: 0 0 1.5rem; font-size: .92rem; }
.aside dt { color: var(--stone-d); font-family: var(--mono); font-size: .78rem; letter-spacing: .04em; }
.aside dd { margin: 0; font-family: var(--display); font-weight: 700; text-align: right; display: flex; justify-content: flex-end; align-items: center; }
.aside .btn { width: 100%; justify-content: center; }
.aside .note { font-size: .82rem; color: var(--stone-d); margin: 1rem 0 0; line-height: 1.45; }
.aside .blockrule { border: 0; border-top: 1px solid rgba(25,26,21,.14); margin: 1.5rem 0 1.3rem; }
.checklist { list-style: none; margin: 0; padding: 0; font-family: var(--mono); font-size: .78rem; letter-spacing: .03em; color: #43443c; }
.checklist li { display: flex; gap: .7rem; align-items: baseline; padding: .45rem 0; }
.checklist li::before { content: ""; width: .55em; height: .55em; background: var(--petrol); flex: none; align-self: start; margin-top: .3em; }

/* Leistungsumfang */
.scope { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: clamp(2.5rem,5vw,4rem); }
.scope-card { background: var(--bone-2); border: 1px solid rgba(25,26,21,.1); border-radius: 3px; padding: 1.7rem 1.6rem; }
.scope-card .sc-h { font-family: var(--mono); font-weight: 700; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--stone-d); margin: 0 0 1.1rem; }
.scope-card ul { list-style: none; margin: 0; padding: 0; font-size: .95rem; color: #3f4038; }
.scope-card li { display: flex; gap: .8rem; align-items: baseline; padding: .45rem 0; border-top: 1px solid rgba(25,26,21,.08); }
.scope-card li:first-child { border-top: 0; }
.scope-card.in li::before { content: ""; width: .55em; height: .55em; background: var(--petrol); flex: none; align-self: start; margin-top: .35em; }
.scope-card.out li::before { content: ""; width: .55em; height: 2px; background: var(--stone); flex: none; align-self: start; margin-top: .55em; }

/* Termine & Preise — Abfahrtstafel */
.timetable-wrap { margin-top: clamp(3rem,6vw,5rem); }
.timetable-wrap h2 { font-size: clamp(1.6rem,3vw,2.2rem); margin-bottom: 1.6rem; }
.timetable { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(25,26,21,.18); }
.timetable li { display: grid; grid-template-columns: 6.5em 1fr auto; gap: 1.5rem; align-items: baseline; padding: 1.1rem 0; border-bottom: 1px solid rgba(25,26,21,.12); }
.timetable .tt-code { font-family: var(--mono); font-size: .78rem; letter-spacing: .08em; color: var(--oxblood); }
.timetable .tt-main { font-family: var(--display); font-weight: 700; font-size: 1.05rem; }
.timetable .tt-main .tt-sub { display: block; font-family: var(--mono); font-weight: 400; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--stone-d); margin-top: .3rem; }
.timetable .tt-price { font-family: var(--mono); font-size: .85rem; color: var(--ink); white-space: nowrap; }
.timetable .tt-price small { color: var(--stone-d); display: block; text-align: right; font-size: .68rem; }

/* Routenprofil */
.track-profile { background: var(--basalt); }
.track-profile .tp-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.4rem; }
.track-profile .tp-head h2 { color: var(--bone); font-size: clamp(1.5rem,2.6vw,2rem); }
.track-profile .tp-head .tp-meta { font-family: var(--mono); font-size: .74rem; letter-spacing: .1em; color: var(--stone-l); text-transform: uppercase; }
.track-profile .tp-chart { position: relative; }
.track-profile svg { width: 100%; height: clamp(130px,17vw,190px); display: block; }
.tp-sep { stroke: rgba(231,227,216,.14); stroke-width: 1; stroke-dasharray: 2 4; }
/* Labels als HTML-Overlay — SVG mit preserveAspectRatio=none wuerde Text verzerren */
.tp-label { position: absolute; top: .2rem; font-family: var(--mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--stone-l); white-space: nowrap; }
.tp-label.water { color: var(--petrol-l); }
.tp-htick { position: absolute; left: 0; font-family: var(--mono); font-size: .6rem; letter-spacing: .08em; color: var(--stone-l); }

/* ---------- FAQ ---------- */
.faq { max-width: 62rem; }
.faq details { border-top: 1px solid rgba(25,26,21,.16); }
.faq details:last-child { border-bottom: 1px solid rgba(25,26,21,.16); }
.faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 4em 1fr auto; gap: 1.2rem; align-items: baseline; padding: 1.3rem 0; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .fn { font-family: var(--mono); font-size: .78rem; letter-spacing: .1em; color: var(--oxblood); }
.faq summary .fq { font-family: var(--display); font-weight: 700; font-size: 1.15rem; }
.faq summary .fx { font-family: var(--mono); color: var(--stone-d); transition: transform .3s var(--e); }
.faq details[open] summary .fx { transform: rotate(45deg); }
.faq .fa { padding: 0 0 1.5rem 5.2em; max-width: 62ch; }
.faq .fa p { font-size: 1.02rem; color: #3f4038; margin: 0; }

/* ---------- cta band ---------- */
.cta-band { text-align: center; }
.cta-band h2 { font-size: clamp(2.2rem, 5vw, 4rem); max-width: 18ch; margin: 0 auto 1.2rem; }
.cta-band .lede { margin: 0 auto 2.4rem; max-width: 52ch; }
.cta-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ---------- reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--e), transform .8s var(--e); }
.reveal.in { opacity: 1; transform: none; }
.route-path.draw { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); animation: draw 2.4s var(--e) .35s forwards; }
.route-water.draw2 { stroke-dashoffset: 0; opacity: 0; animation: dotin .8s var(--e) 2.5s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.route-dot, .rp-wp, .rp-wl, .rp-flag, .rp-mast { opacity: 0; animation: dotin .4s var(--e) forwards; }
.hero-rise { opacity: 0; transform: translateY(18px); animation: rise .9s var(--e) forwards; }
.hero-rise.d1 { animation-delay: .05s; } .hero-rise.d2 { animation-delay: .18s; } .hero-rise.d3 { animation-delay: .3s; } .hero-rise.d4 { animation-delay: .44s; }
@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes dotin { to { opacity: 1; } }

:focus-visible { outline: 2px solid var(--ember-l); outline-offset: 3px; border-radius: 2px; }
.band--light :focus-visible, .faq :focus-visible { outline-color: var(--oxblood); }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .nav { display: none; }
  .nav.open { display: flex; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; background: var(--basalt); padding: 1rem var(--gut) 1.4rem; gap: 0; border-bottom: 1px solid rgba(231,227,216,.12); }
  .nav.open a { padding-block: .8rem; }
  .nav-toggle { display: inline-flex; background: none; border: 1px solid rgba(231,227,216,.3); color: var(--bone); font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; padding: .65rem 1rem; border-radius: 2px; cursor: pointer; text-transform: uppercase; }
  .hero-grid { grid-template-columns: 1fr; }
  .route-col { max-width: 480px; margin-inline: auto; width: 100%; }
  .manifest { grid-template-columns: 1fr; }
  .modes { grid-template-columns: 1fr; }
  .quotes { grid-template-columns: 1fr; }
  .crew { grid-template-columns: 1fr 1fr; }
  .logbook { grid-template-columns: 1fr; }
  .ask-grid { grid-template-columns: 1fr; }
  .track-body { grid-template-columns: 1fr; }
  .track-body .aside { order: -1; position: static; }
  .scope { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .stat-strip { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .eyebrow { letter-spacing: .18em; }
  .hero .eyebrow .coord-part { display: none; }
  .route-panel { aspect-ratio: 16/10; }
  .hero-meta { grid-template-columns: 1fr; }
  .hero-meta > span { padding: .8rem 0 !important; border-left: 0 !important; border-top: 1px solid rgba(231,227,216,.12); }
  .rp-corner .sch-part { display: none; }
  .route-panel .rp-corner { left: 14px; right: auto; }
  .hero-meta > span:first-child { border-top: 0; padding-top: 0; }
  .crew { grid-template-columns: 1fr; }
  .crew-card .plate { aspect-ratio: 16/10; }
  .foot-grid { grid-template-columns: 1fr; }
  .track-row { grid-template-columns: 1fr; gap: .5rem; }
  .track-row .t-go { justify-self: start; }
  .region-label { display: block; }
  .region-label .rl-meta { display: block; margin-top: .35rem; }
  .stat-strip { grid-template-columns: 1fr; }
  .form { grid-template-columns: 1fr; }
  .stage { grid-template-columns: 1fr; gap: .4rem; }
  .open-slots li { flex-wrap: wrap; }
  .open-slots li b { flex: 0 0 100%; }
  .faq summary { grid-template-columns: 1fr auto; }
  .faq summary .fn { display: none; }
  .faq .fa { padding-left: 0; }
  .timetable li { grid-template-columns: 1fr; gap: .3rem; }
  .timetable .tt-price small { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .route-path.draw { animation: none; stroke-dashoffset: 0; }
  .route-water.draw2, .route-dot, .rp-wp, .rp-wl, .rp-flag, .rp-mast { opacity: 1; animation: none; }
  .hero-rise { opacity: 1; transform: none; animation: none; }
  .btn, .btn:hover { transform: none; transition: none; }
  .track-row, a.track-row:hover { transition: none; padding-left: 0; }
  .mode::after, .crew-card::after, .nav a::after { transition: none; }
  .faq summary .fx { transition: none; }
}