@font-face{font-family:"Source Serif 4";src:url(fonts/source-serif-4-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url(fonts/source-serif-4-400i.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url(fonts/source-serif-4-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url(fonts/source-sans-3-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url(fonts/source-sans-3-600.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url(fonts/source-sans-3-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  --paper:#faf8f3;
  --paper-2:#f3eee4;
  --paper-3:#ebe4d6;
  --ink:#221f1b;
  --ink-2:#57504a;
  --ink-3:#7b736a;
  --rule:#ddd4c3;
  --rule-2:#c9bea8;
  --accent:#1a5766;
  --accent-d:#12414d;
  --accent-w:#e6eef0;
  --sepia:#7a4a24;

  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --sans:"Source Sans 3",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --t-xs:clamp(.75rem,.735rem + .07vw,.8rem);
  --t-sm:clamp(.8125rem,.79rem + .11vw,.875rem);
  --t-base:clamp(1rem,.965rem + .17vw,1.09rem);
  --t-md:clamp(1.09rem,1.04rem + .24vw,1.2rem);
  --t-lg:clamp(1.25rem,1.17rem + .38vw,1.45rem);
  --t-xl:clamp(1.5rem,1.35rem + .72vw,1.95rem);
  --t-2xl:clamp(1.85rem,1.6rem + 1.2vw,2.6rem);

  --sp-1:clamp(.25rem,.24rem + .05vw,.3rem);
  --sp-2:clamp(.5rem,.48rem + .1vw,.6rem);
  --sp-3:clamp(.75rem,.72rem + .15vw,.9rem);
  --sp-4:clamp(1rem,.95rem + .24vw,1.25rem);
  --sp-5:clamp(1.5rem,1.4rem + .48vw,2rem);
  --sp-6:clamp(2rem,1.8rem + .96vw,3rem);
  --sp-7:clamp(3rem,2.6rem + 1.9vw,5rem);

  --wrap:74rem;
  --measure:38rem;
  --radius:3px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);overflow-wrap:break-word;
  font-family:var(--serif);font-size:var(--t-base);line-height:1.62;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{font-family:var(--sans);font-weight:700;line-height:1.22;margin:0 0 var(--sp-3);color:var(--ink)}
h1{font-size:var(--t-2xl);letter-spacing:-.015em}
h2{font-size:var(--t-xl);letter-spacing:-.01em;margin-top:var(--sp-6);padding-bottom:var(--sp-2);border-bottom:1px solid var(--rule)}
h3{font-size:var(--t-lg);margin-top:var(--sp-5)}
h4{font-size:var(--t-md);font-weight:600;margin-top:var(--sp-4)}
p{margin:0 0 var(--sp-4)}
a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:.14em}
/* ACHTUNG, Kaskadenfalle: Diese Regel hat dieselbe Spezifitaet wie jedes spaetere
   ".irgendwas a{color:...}". Bei Gleichstand gewinnt die spaetere Regel - und zwar auch
   im Hover, wo dann der dunkle Grund von hier mit der dunklen Textfarbe von dort
   zusammentrifft. Genau so verschwanden Navigation und Brotkrumen beim Ueberfahren
   (Kontrast 1,4:1). JEDE Regel, die Linkfarben setzt, muss deshalb ihren eigenen
   :hover mitdefinieren. */
a:hover{color:#fff;background:var(--accent-d);text-decoration-color:transparent}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{
  outline:3px solid var(--accent);outline-offset:2px;border-radius:2px}
img{max-width:100%;height:auto}
ul,ol{margin:0 0 var(--sp-4);padding-left:1.35em}
li{margin-bottom:var(--sp-1)}
small{font-size:var(--t-sm)}
abbr[title]{text-decoration:underline dotted;cursor:help}

.skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:#fff;
  padding:var(--sp-2) var(--sp-3);z-index:100;font-family:var(--sans)}
.skip:focus{left:var(--sp-3);top:var(--sp-3)}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--sp-4)}

/* ---------- Kopf ---------- */
.site-head{background:var(--paper-2);border-bottom:2px solid var(--rule-2)}
.head-in{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--sp-3) var(--sp-5);
  padding-block:var(--sp-3)}
.brand{font-family:var(--sans);font-weight:700;font-size:var(--t-lg);letter-spacing:-.02em;
  color:var(--ink);text-decoration:none;display:flex;align-items:baseline;gap:.55em}
.brand:hover{background:none;color:var(--accent-d)}
.brand .dom{color:var(--accent)}
.brand .tag{font-weight:400;font-size:var(--t-sm);color:var(--ink-2);font-family:var(--sans)}
.site-nav{margin-left:auto}
.site-nav ul{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-4);list-style:none;margin:0;padding:0;
  font-family:var(--sans);font-size:var(--t-sm)}
.site-nav a{color:var(--ink-2);text-decoration:none;
  padding:var(--sp-1) var(--sp-2);border-radius:var(--radius)}
/* Hover und aktive Seite brauchen VERSCHIEDENE Farben und duerfen nicht in einer
   Regel stehen: Der Hover uebernimmt von a:hover den dunklen Grund, die aktive Seite
   nicht. Zusammengefasst ergab das dunklen Text auf dunklem Grund, der Menuepunkt
   verschwand beim Ueberfahren. */
.site-nav a:hover{color:#fff;background:var(--accent-d);text-decoration:underline;
  text-decoration-color:rgba(255,255,255,.55)}
.site-nav a[aria-current]{color:var(--accent-d);font-weight:600;text-decoration:underline;
  text-underline-offset:.3em}
.site-nav a[aria-current]:hover{color:#fff}

/* ---------- Grundraster ---------- */
main{padding-block:var(--sp-5) var(--sp-7)}
.crumb{font-family:var(--sans);font-size:var(--t-sm);color:var(--ink-3);margin-bottom:var(--sp-4)}
.crumb ol{display:flex;flex-wrap:wrap;gap:.4em;list-style:none;margin:0;padding:0}
.crumb li+li::before{content:"›";margin-right:.4em;color:var(--rule-2)}
.crumb a{color:var(--ink-2)}
.crumb a:hover{color:#fff}

.lede{font-size:var(--t-md);color:var(--ink-2);max-width:var(--measure)}
.page-head{margin-bottom:var(--sp-5)}
.page-head h1{margin-bottom:var(--sp-2)}
.sub{font-family:var(--sans);font-size:var(--t-sm);color:var(--ink-3);
  text-transform:uppercase;letter-spacing:.07em;margin:0 0 var(--sp-2)}

.cols{display:grid;gap:var(--sp-5);grid-template-columns:1fr}
@media (min-width:60rem){
  .cols{grid-template-columns:minmax(0,1fr) 22rem;align-items:start}
  .cols>.aside{grid-column:2;grid-row:1/span 99}
}
.prose{max-width:min(100%,46rem);min-width:0}
.prose>p{max-width:var(--measure)}

/* ---------- Steckbrief-Infobox ---------- */
.ibox{background:var(--paper-2);border:1px solid var(--rule-2);border-radius:var(--radius);
  font-family:var(--sans);font-size:var(--t-sm);overflow:hidden}
.ibox-head{background:var(--accent);color:#fff;padding:var(--sp-3) var(--sp-4)}
.ibox-head h2{font-size:var(--t-md);color:#fff;margin:0;border:0;padding:0}
.ibox-head p{margin:var(--sp-1) 0 0;font-size:var(--t-xs);color:#cfe2e7}
.ibox figure{margin:0;border-bottom:1px solid var(--rule-2);background:var(--paper-3)}
.ibox figure img{display:block;width:100%}
.ibox figcaption{padding:var(--sp-2) var(--sp-3);font-size:var(--t-xs);color:var(--ink-2);line-height:1.45}
.ibox dl{margin:0;display:grid;grid-template-columns:minmax(7.5rem,auto) 1fr}
.ibox dt{padding:var(--sp-2) var(--sp-3);font-weight:600;color:var(--ink-2);
  border-top:1px solid var(--rule);background:var(--paper-3)}
.ibox dd{margin:0;padding:var(--sp-2) var(--sp-3);border-top:1px solid var(--rule)}
.ibox dl>dt:first-of-type,.ibox dl>dt:first-of-type+dd{border-top:0}
.ibox .num{font-variant-numeric:tabular-nums}
.unsicher{color:var(--sepia);cursor:help;font-weight:600}

/* ---------- Kennzahlen ---------- */
.stats{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);
  border-radius:var(--radius);grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));
  margin-bottom:var(--sp-5);overflow:hidden}
.stat{background:var(--paper);padding:var(--sp-3) var(--sp-4)}
.stat dt{font-family:var(--sans);font-size:var(--t-xs);text-transform:uppercase;
  letter-spacing:.06em;color:var(--ink-3);margin-bottom:var(--sp-1)}
.stat dd{margin:0;font-family:var(--sans);font-size:var(--t-lg);font-weight:700;
  font-variant-numeric:tabular-nums;line-height:1.15}
.stat dd .u{font-size:var(--t-sm);font-weight:400;color:var(--ink-2)}

/* ---------- Flusslauf-Band ---------- */
.course{border:1px solid var(--rule);border-radius:var(--radius);background:var(--paper-2);
  padding:var(--sp-4);margin-bottom:var(--sp-5)}
.course h2{font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.07em;
  color:var(--ink-3);border:0;margin:0 0 var(--sp-2);padding:0}
.course ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;
  gap:var(--sp-2) var(--sp-1);font-family:var(--sans);font-size:var(--t-sm)}
.course li{display:flex;align-items:center;gap:var(--sp-1)}
.course li:not(:last-child)::after{content:"→";color:var(--accent);margin-left:var(--sp-1)}
.course .self{font-weight:700;background:var(--accent-w);padding:.15em .5em;border-radius:2px}
.course .sea{color:var(--ink-2);font-style:italic}

/* ---------- Listen / Tabellen ---------- */
.tbl-wrap{overflow-x:auto;margin-bottom:var(--sp-5);border:1px solid var(--rule);
  border-radius:var(--radius)}
table{border-collapse:collapse;width:100%;font-family:var(--sans);font-size:var(--t-sm)}
caption{text-align:left;font-family:var(--sans);font-size:var(--t-sm);color:var(--ink-2);
  padding:var(--sp-2) var(--sp-3);background:var(--paper-2);border-bottom:1px solid var(--rule)}
th,td{padding:var(--sp-2) var(--sp-3);text-align:left;border-top:1px solid var(--rule);
  vertical-align:top}
thead th{background:var(--paper-2);font-weight:600;border-top:0;white-space:nowrap}
tbody tr:hover{background:var(--accent-w)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}

.cols-list{columns:13rem;column-gap:var(--sp-5);font-family:var(--sans);font-size:var(--t-sm)}
.cols-list ul{list-style:none;margin:0;padding:0}
.cols-list li{break-inside:avoid;margin-bottom:var(--sp-1)}
.cols-list .len{color:var(--ink-3);font-variant-numeric:tabular-nums}

.chips{display:flex;flex-wrap:wrap;gap:var(--sp-2);list-style:none;margin:0 0 var(--sp-4);padding:0;
  font-family:var(--sans);font-size:var(--t-sm)}
.chips a{display:inline-block;padding:.25em .7em;background:var(--paper-2);
  border:1px solid var(--rule-2);border-radius:99px;text-decoration:none;color:var(--ink-2)}
.chips a:hover{background:var(--accent-d);color:#fff;border-color:var(--accent-d)}

/* ---------- Hinweise ---------- */
.note{border-left:3px solid var(--accent);background:var(--accent-w);padding:var(--sp-3) var(--sp-4);
  margin-bottom:var(--sp-5);font-size:var(--t-sm)}
.note p:last-child{margin-bottom:0}
.note--warn{border-left-color:var(--sepia);background:#f6efe7}

.aside .box{margin-bottom:var(--sp-4)}
.aside h2,.aside h3{font-size:var(--t-md);border:0;margin-top:0;padding:0}
.toc{background:var(--paper-2);border:1px solid var(--rule);border-radius:var(--radius);
  padding:var(--sp-3) var(--sp-4);font-family:var(--sans);font-size:var(--t-sm)}
.toc ol{list-style:none;margin:0;padding:0}
.toc li{margin-bottom:var(--sp-1)}
.toc a{color:var(--ink-2);text-decoration:none}
.toc a:hover{color:#fff}
h2[id],h3[id]{scroll-margin-top:var(--sp-4)}

/* ---------- Suche ---------- */
.search{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-bottom:var(--sp-4)}
.search input{flex:1 1 14rem;min-width:0;font:inherit;font-family:var(--sans);
  padding:var(--sp-2) var(--sp-3);border:1px solid var(--rule-2);border-radius:var(--radius);
  background:#fff;color:var(--ink)}
.search button{font-family:var(--sans);font-weight:600;font-size:var(--t-base);
  padding:var(--sp-2) var(--sp-4);border:1px solid var(--accent);background:var(--accent);
  color:#fff;border-radius:var(--radius);cursor:pointer}
.search button:hover{background:var(--accent-d);border-color:var(--accent-d)}

/* ---------- Fuss ---------- */
.site-foot{background:var(--paper-2);border-top:2px solid var(--rule-2);
  padding-block:var(--sp-5);font-family:var(--sans);font-size:var(--t-sm);color:var(--ink-2)}
.foot-cols{display:grid;gap:var(--sp-4);grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));
  margin-bottom:var(--sp-4)}
.site-foot h2{font-size:var(--t-sm);text-transform:uppercase;letter-spacing:.07em;
  border:0;margin:0 0 var(--sp-2);padding:0;color:var(--ink-3)}
.site-foot ul{list-style:none;margin:0;padding:0}
.site-foot a{color:var(--ink-2)}
.site-foot a:hover{color:#fff}
.foot-legal{border-top:1px solid var(--rule);padding-top:var(--sp-3);font-size:var(--t-xs);
  color:var(--ink-3)}

.src{font-size:var(--t-xs);color:var(--ink-3);font-family:var(--sans);margin-top:var(--sp-3)}

@media print{
  .site-nav,.aside,.skip,.search{display:none}
  body{background:#fff;font-size:11pt}
  a{color:#000;text-decoration:none}
}

.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.map{display:block;width:100%;height:auto;background:var(--paper)}
.chips .len{color:var(--ink-3);font-size:var(--t-xs);font-variant-numeric:tabular-nums}
.chips a[aria-current]{background:var(--accent);color:#fff;border-color:var(--accent)}
.note-h{border:0;margin-top:0;font-size:var(--t-md)}

/* ---------- Illustrationen ---------- */
.illu{margin:0 0 var(--sp-5);border:1px solid var(--rule);border-radius:var(--radius);
  background:var(--paper-2);overflow:hidden}
.illu img{display:block;width:100%;height:auto}
.illu figcaption{padding:var(--sp-3) var(--sp-4);font-family:var(--sans);
  font-size:var(--t-sm);color:var(--ink-2);line-height:1.5;border-top:1px solid var(--rule)}
.ki-hinweis{display:block;margin-top:var(--sp-2);font-size:var(--t-xs);color:var(--ink-3);
  font-style:italic}
.illu--breit{margin-inline:0}

/* ---------- Autocomplete ---------- */
.search{position:relative}
.ac-list{position:absolute;z-index:50;margin:0;padding:0;list-style:none;display:none;
  background:#fff;border:1px solid var(--rule-2);border-top:0;border-radius:0 0 var(--radius) var(--radius);
  box-shadow:0 6px 18px rgba(34,31,27,.13);max-height:22rem;overflow-y:auto;
  font-family:var(--sans);font-size:var(--t-sm)}
.ac-list.offen{display:block}
.ac-list li{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-3);
  margin:0;padding:var(--sp-2) var(--sp-3);cursor:pointer;border-top:1px solid var(--rule)}
.ac-list li:first-child{border-top:0}
.ac-list li:hover,.ac-list li.an{background:var(--accent);color:#fff}
.ac-list li:hover .ac-len,.ac-list li.an .ac-len,
.ac-list li:hover .ac-zusatz,.ac-list li.an .ac-zusatz{color:#cfe2e7}
.ac-list mark{background:var(--accent-w);color:inherit;font-weight:700;padding:0 .1em}
.ac-list li:hover mark,.ac-list li.an mark{background:rgba(255,255,255,.22);color:#fff}
.ac-name{min-width:0}
.ac-zusatz{color:var(--ink-3);font-size:var(--t-xs)}
.ac-len{color:var(--ink-3);font-variant-numeric:tabular-nums;white-space:nowrap;font-size:var(--t-xs)}