/* ==========================================================================
   China-Reise-Pitch 27.10.–15.11.2026 – gemeinsames Design-System
   Kein Framework, kein CDN, kein Build-Step. Nur diese Datei.
   ========================================================================== */

:root {
  /* Flächen */
  --bg:        #0e1419;
  --bg-soft:   #131b22;
  --card:      #1a242d;
  --card-2:    #202c37;
  --border:    #2b3a47;
  --border-2:  #3a4c5c;

  /* Text */
  --text:      #e7eef4;
  --text-2:    #b9c8d4;
  --muted:     #8fa2b1;

  /* Akzente */
  --accent:    #f0a72a;
  --accent-in: #1a1204;
  --teal:      #2dd4bf;
  --violet:    #a78bfa;
  --lime:      #a3e635;
  --magenta:   #f472b6;
  --orange:    #fb923c;
  --cyan:      #38bdf8;
  --rose:      #fb7185;
  --indigo:    #818cf8;
  --emerald:   #34d399;

  /* Semantik */
  --ok:        #4ade80;
  --warn:      #fbbf24;
  --danger:    #f87171;
  --info:      #60a5fa;

  /* Maße */
  --wrap:      1180px;
  --radius:    14px;
  --radius-sm: 9px;
  --gap:       1.25rem;
  --shadow:    0 6px 24px rgba(0, 0, 0, .35);

  /* Typo */
  --font: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;
}

/* Routen-Akzentfarben. Wird per Klasse auf <body> gesetzt. */
.r1 { --route: var(--teal); }
.r2 { --route: var(--violet); }
.r3 { --route: var(--lime); }
.r4 { --route: var(--magenta); }
.r5 { --route: var(--orange); }
.r6 { --route: var(--cyan); }
.r7 { --route: var(--rose); }
.r8 { --route: var(--indigo); }
.r9 { --route: var(--emerald); }
body { --route: var(--accent); }

/* --------------------------------------------------------------- Grundlagen */

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

html {
  scroll-behavior: smooth;
  /* Sticky-Navi-Höhe beim Ankersprung freihalten */
  scroll-padding-top: 5.25rem;
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16.5px;
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden; /* Sicherheitsnetz gegen horizontales Scrollen */
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--route); text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .18); }
a:hover { border-bottom-color: currentColor; }
a:focus-visible,
button:focus-visible,
summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

h1, h2, h3, h4 { line-height: 1.22; margin: 0 0 .5em; font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: clamp(1.9rem, 5vw, 3.1rem); }
h2 { font-size: clamp(1.45rem, 3.2vw, 2.1rem); }
h3 { font-size: clamp(1.15rem, 2.2vw, 1.4rem); }
h4 { font-size: 1.02rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
p  { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.3em; }
li { margin-bottom: .4em; }
strong { color: #fff; }
code, kbd { font-family: var(--mono); font-size: .88em; background: #0b1116; border: 1px solid var(--border); border-radius: 5px; padding: .1em .38em; }
hr { border: 0; border-top: 1px solid var(--border); margin: 2.5rem 0; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); }
.lead { font-size: 1.1rem; color: var(--text-2); max-width: 68ch; }
.muted { color: var(--muted); }
.small { font-size: .88rem; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }

/* Skip-Link für Tastaturnutzer */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--accent); color: var(--accent-in);
  padding: .6rem 1rem; border-radius: 0 0 var(--radius-sm) 0; font-weight: 700;
}
.skip:focus { left: 0; }

/* --------------------------------------------------------------- Navigation */

.topnav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(14, 20, 25, .93);
  backdrop-filter: blur(9px);
  border-bottom: 1px solid var(--border);
}
.topnav .inner {
  display: flex; align-items: center; gap: 1rem;
  max-width: var(--wrap); margin-inline: auto;
  padding: .55rem clamp(1rem, 4vw, 2rem);
}
.topnav .brand {
  font-weight: 800; font-size: .95rem; letter-spacing: .02em;
  color: var(--text); border: 0; flex: 0 0 auto;
}
.topnav .brand span { color: var(--accent); }
.topnav nav {
  display: flex; gap: .3rem; overflow-x: auto; scrollbar-width: thin;
  -webkit-overflow-scrolling: touch; margin-left: auto; padding-bottom: 2px;
}
.topnav nav a {
  flex: 0 0 auto; border: 1px solid transparent; border-radius: 999px;
  padding: .32rem .8rem; font-size: .86rem; font-weight: 600;
  color: var(--text-2); white-space: nowrap;
}
.topnav nav a:hover { background: var(--card-2); color: #fff; border-color: var(--border-2); }
.topnav nav a[aria-current="page"] { background: var(--route); color: #0b1116; border-color: transparent; }

/* Sprachumschalter / language switch */
.lang-switch {
  flex: 0 0 auto; margin-left: .5rem;
  display: inline-flex; align-items: center; gap: .3rem;
  border: 1px solid var(--accent); border-radius: 999px;
  padding: .3rem .7rem; font-size: .82rem; font-weight: 800; letter-spacing: .04em;
  color: var(--accent); background: rgba(240, 167, 42, .1);
  text-decoration: none; white-space: nowrap;
}
.lang-switch:hover { background: var(--accent); color: var(--accent-in); border-color: var(--accent); }
.lang-switch::before { content: "🌐"; font-size: .95em; }
@media (max-width: 480px) {
  .lang-switch { padding: .3rem .55rem; margin-left: .35rem; }
  .lang-switch::before { content: none; }
}

/* --------------------------------------------------------------------- Hero */

.hero { position: relative; isolation: isolate; border-bottom: 1px solid var(--border); }
.hero img.bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: -2;
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(14,20,25,.62) 0%, rgba(14,20,25,.80) 55%, rgba(14,20,25,.97) 100%);
}
.hero .wrap { padding-block: clamp(3rem, 11vw, 6.5rem); }
.hero .kicker {
  display: inline-block; font-size: .8rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .16em; color: var(--accent);
  border: 1px solid var(--accent); border-radius: 999px; padding: .28rem .85rem;
  margin-bottom: 1rem; background: rgba(240, 167, 42, .1);
}
.hero h1 { margin-bottom: .6rem; text-shadow: 0 2px 18px rgba(0,0,0,.55); }
.hero .sub { font-size: clamp(1rem, 2.4vw, 1.3rem); color: var(--text-2); max-width: 62ch; }

.hero-compact .wrap { padding-block: clamp(2.2rem, 7vw, 4rem); }

/* -------------------------------------------------------------- Sections */

section { padding-block: clamp(2.2rem, 5vw, 3.4rem); }
section + section { border-top: 1px solid var(--border); }
.section-head { margin-bottom: 1.6rem; }
.section-head h2 { margin-bottom: .3rem; }
.section-head .eyebrow {
  font-size: .78rem; font-weight: 800; letter-spacing: .15em;
  text-transform: uppercase; color: var(--route); margin-bottom: .35rem;
}

/* ---------------------------------------------------------------- Karten */

.cards {
  display: grid; gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(275px, 1fr));
}
.cards.two { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }

.card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.15rem 1.25rem;
  box-shadow: var(--shadow);
}
.card h3 { margin-bottom: .4rem; }
.card > :last-child { margin-bottom: 0; }

/* Routen-Card auf der Übersicht */
.route-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--card); border: 1px solid var(--border);
  border-top: 4px solid var(--rc, var(--accent));
  border-radius: var(--radius); box-shadow: var(--shadow);
  transition: transform .18s ease, border-color .18s ease;
}
.route-card:hover { transform: translateY(-3px); border-color: var(--border-2); }
.route-card .thumb { aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg-soft); }
.route-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.route-card .body { padding: 1.05rem 1.15rem 1.25rem; display: flex; flex-direction: column; flex: 1; }
.route-card .num {
  font-size: .76rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--rc, var(--accent)); margin-bottom: .3rem;
}
.route-card h3 { font-size: 1.22rem; margin-bottom: .45rem; }
.route-card p { font-size: .94rem; color: var(--text-2); }
.route-card .cta {
  margin-top: auto; align-self: flex-start; border: 0;
  background: var(--rc, var(--accent)); color: #0b1116;
  font-weight: 700; font-size: .9rem; padding: .5rem 1rem;
  border-radius: 999px;
}
.route-card .cta:hover { filter: brightness(1.12); }
.rc1 { --rc: var(--teal); } .rc2 { --rc: var(--violet); } .rc3 { --rc: var(--lime); }
.rc4 { --rc: var(--magenta); } .rc5 { --rc: var(--orange); } .rc6 { --rc: var(--cyan); }
.rc7 { --rc: var(--rose); } .rc8 { --rc: var(--indigo); }
.rc9 { --rc: var(--emerald); }

/* --------------------------------------------------------------- Badges */

.badges { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0 0 1.2rem; padding: 0; list-style: none; }
.badges li { margin: 0; }
.badge {
  display: inline-flex; align-items: center; gap: .35rem;
  background: var(--card-2); border: 1px solid var(--border-2);
  border-radius: 999px; padding: .28rem .75rem;
  font-size: .84rem; font-weight: 600; color: var(--text-2);
  white-space: nowrap;
}
.badge.on   { border-color: var(--ok);     color: #d6f5e0; background: rgba(74, 222, 128, .12); }
.badge.off  { border-color: var(--border-2); color: var(--muted); }
.badge.hot  { border-color: var(--route);  color: #fff; background: color-mix(in srgb, var(--route) 18%, transparent); }
.badge.hard { border-color: var(--danger); color: #ffd9d9; background: rgba(248, 113, 113, .12); }

/* Schwierigkeits-Punkte */
.diff { display: inline-flex; gap: 3px; vertical-align: middle; }
.diff i { width: 9px; height: 9px; border-radius: 50%; background: var(--border-2); display: block; }
.diff i.f { background: var(--route); }

/* ---------------------------------------------------------------- Tabellen */

.table-wrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--card);
}
table { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 720px; }
table.compact { min-width: 560px; }
caption {
  text-align: left; padding: .9rem 1rem .2rem; color: var(--muted);
  font-size: .86rem; caption-side: top;
}
thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--card-2); color: #fff; text-align: left;
  font-size: .8rem; text-transform: uppercase; letter-spacing: .06em;
  padding: .7rem .85rem; border-bottom: 2px solid var(--route); white-space: nowrap;
}
tbody th, tbody td { padding: .68rem .85rem; border-bottom: 1px solid var(--border); vertical-align: top; }
tbody th { text-align: left; font-weight: 700; color: #fff; white-space: nowrap; }
tbody tr:nth-child(odd) { background: rgba(255, 255, 255, .022); }
tbody tr:hover { background: rgba(255, 255, 255, .055); }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }
td.day { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--route); font-weight: 700; }
.scroll-hint { font-size: .82rem; color: var(--muted); margin: .5rem 0 0; }

/* Vergleichsmatrix */
table.matrix { min-width: 900px; }
table.matrix tbody th { min-width: 160px; }
.yes { color: var(--ok); font-weight: 700; }
.no  { color: var(--muted); }

/* ------------------------------------------------------------ Hinweisboxen */

.note, .warn, .danger-box, .ok-box, .fact {
  border-radius: var(--radius); padding: 1rem 1.15rem;
  margin: 0 0 1.25rem; border: 1px solid var(--border);
  background: var(--bg-soft);
}
.note  { border-left: 4px solid var(--info);   }
.warn  { border-left: 4px solid var(--warn);   background: rgba(251, 191, 36, .07); }
.danger-box { border-left: 4px solid var(--danger); background: rgba(248, 113, 113, .08); }
.ok-box { border-left: 4px solid var(--ok);    background: rgba(74, 222, 128, .07); }
.fact  { border-left: 4px solid var(--route);  }
.note > :last-child, .warn > :last-child, .danger-box > :last-child,
.ok-box > :last-child, .fact > :last-child { margin-bottom: 0; }
.note h4, .warn h4, .danger-box h4, .ok-box h4, .fact h4 {
  color: #fff; text-transform: none; letter-spacing: 0;
  font-size: 1.02rem; margin-bottom: .45rem;
}

.stamp {
  display: block; margin-top: .7rem; font-size: .8rem; color: var(--muted);
  border-top: 1px dashed var(--border); padding-top: .55rem;
}

/* Definitionslisten für Faktenblöcke */
.facts { display: grid; gap: .1rem .9rem; grid-template-columns: max-content 1fr; margin: 0; }
.facts dt { font-weight: 700; color: var(--muted); font-size: .88rem; padding: .3rem 0; }
.facts dd { margin: 0; padding: .3rem 0; }
@media (max-width: 560px) {
  .facts { grid-template-columns: 1fr; gap: 0; }
  .facts dt { padding-bottom: 0; }
  .facts dd { padding-top: .1rem; padding-bottom: .6rem; }
}

/* ------------------------------------------------------------------- Karte */

.map {
  border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; background: var(--bg-soft);
}
.map iframe { width: 100%; height: clamp(300px, 52vw, 480px); border: 0; display: block; }
.map-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .8rem; align-items: center; }
.btn {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--card-2); border: 1px solid var(--border-2); color: var(--text);
  border-radius: 999px; padding: .45rem .95rem; font-size: .88rem; font-weight: 600;
}
.btn:hover { background: var(--card); border-color: var(--route); color: #fff; }
.btn.primary { background: var(--route); color: #0b1116; border-color: transparent; }
.btn.primary:hover { filter: brightness(1.12); color: #0b1116; }

/* ---------------------------------------------------------------- Galerie */

.gallery { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.gallery figure {
  margin: 0; border: 1px solid var(--border); border-radius: var(--radius-sm);
  overflow: hidden; background: var(--card);
}
.gallery img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.gallery figcaption { font-size: .82rem; color: var(--muted); padding: .5rem .65rem .6rem; }

/* --------------------------------------------------------------- Timeline */

.timeline { list-style: none; margin: 0; padding: 0 0 0 1.6rem; border-left: 2px solid var(--border); }
.timeline li { position: relative; margin: 0 0 1.25rem; }
.timeline li::before {
  content: ""; position: absolute; left: calc(-1.6rem - 6px); top: .45rem;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--route); box-shadow: 0 0 0 3px var(--bg);
}
.timeline .when {
  display: block; font-size: .78rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--route);
}
.timeline .what { display: block; font-weight: 700; color: #fff; }

/* ----------------------------------------------------------------- Legende */

.legend { display: flex; flex-wrap: wrap; gap: .5rem .9rem; list-style: none; padding: 0; margin: 0; }
.legend li { display: flex; align-items: center; gap: .4rem; font-size: .88rem; color: var(--text-2); margin: 0; }

/* ----------------------------------------------------------------- Details */

details {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: .3rem .9rem; margin-bottom: .8rem;
}
details[open] { padding-bottom: .9rem; }
summary { cursor: pointer; font-weight: 700; padding: .6rem 0; }
summary::marker { color: var(--route); }

/* ----------------------------------------------------------------- Quellen */

.sources { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.sources li { display: flex; gap: .55rem; align-items: flex-start; font-size: .92rem; margin: 0; }
.sources li::before { content: "↗"; color: var(--route); flex: 0 0 auto; }

/* ---------------------------------------------------------------- Seitenfuß */

.pager { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: space-between; align-items: center; }

footer.site {
  border-top: 1px solid var(--border); background: var(--bg-soft);
  padding-block: 2rem; color: var(--muted); font-size: .88rem;
}
footer.site .wrap > :last-child { margin-bottom: 0; }

/* -------------------------------------------------------------- Utilities */

.grid-2 { display: grid; gap: var(--gap); grid-template-columns: 1fr; }
@media (min-width: 820px) { .grid-2 { grid-template-columns: 1fr 1fr; } }
.stack > * + * { margin-top: 1rem; }
.mb0 { margin-bottom: 0; }
.mt2 { margin-top: 2rem; }

/* ------------------------------------------------------------------ Mobile */

@media (max-width: 720px) {
  body { font-size: 16px; }
  .topnav .inner { gap: .6rem; }
  .topnav .brand { font-size: .84rem; }
  .hero .sub { font-size: 1rem; }
  table { font-size: .87rem; }
  thead th, tbody th, tbody td { padding: .55rem .6rem; }
}

@media (max-width: 420px) {
  .topnav .brand { display: none; }
  .topnav nav { margin-left: 0; }
}

/* ------------------------------------------------------------------- Print */

@media print {
  :root { --bg: #fff; --card: #fff; --text: #111; --text-2: #333; --muted: #555; --border: #bbb; }
  body { background: #fff; color: #111; }
  .topnav, .map, .route-card .cta, .btn { display: none !important; }
  .hero::after, .hero img.bg { display: none; }
  a { color: #111; }
  section { page-break-inside: avoid; }
}