/* FIT-Tourenarchiv - gekapseltes Stylesheet. Alle Regeln haengen an .rhft */
.rhft{
  --paper:#E7EAE0; --panel:#F1F3EC; --ink:#16211C; --ink-2:#5D6B61;
  --rule:#C6CDBD; --rule-soft:#D6DBCC;
  --trace:#0000FF; --signal:#FF0000; --trace-fill:rgba(0,0,255,.12);
  --sans:"IBM Plex Sans",ui-sans-serif,system-ui,sans-serif;
  --cond:"IBM Plex Sans Condensed","IBM Plex Sans",ui-sans-serif,system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  /* Groesse der Tourenueberschrift. Die grosse Distanzzahl richtet sich
     danach, damit beide auf einer Hoehe liegen. Wer die Ueberschrift im
     Divi Theme Builder setzt, ueberschreibt hier einmal den Wert. */
  --title:clamp(26px,4.4vw,42px);
}
.rhft[data-theme="dark"]{
  --paper:#101714; --panel:#182220; --ink:#E4EADF; --ink-2:#8FA095;
  --rule:#2F3D36; --rule-soft:#232F2A;
  --trace:#4D7CFF; --signal:#FF0000; --trace-fill:rgba(77,124,255,.14);
}
.rhft *{box-sizing:border-box}
.rhft{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.5;
  -webkit-font-smoothing:antialiased;transition:background .2s,color .2s}
/* Themes faerben Ueberschriften und Textelemente ausdruecklich ein. Eine
   ausdrueckliche Regel schlaegt jede geerbte Farbe - ohne diesen Block bliebe
   die Ueberschrift im dunklen Grundton in der dunklen Themefarbe stehen.
   Steht bewusst weit oben, damit die eigenen Farbregeln weiter unten gewinnen. */
.rhft h1,.rhft h2,.rhft h3,.rhft h4,.rhft h5,.rhft h6,
.rhft p,.rhft li,.rhft td,.rhft th,.rhft dt,.rhft dd,.rhft span,
.rhft strong,.rhft em,.rhft b,.rhft i,.rhft small,.rhft label,
.rhft summary,.rhft figcaption,.rhft caption,.rhft blockquote{color:inherit}
.rhft .wrap{max-width:1120px;margin:0 auto;padding:28px 20px 64px}
.rhft .eyebrow{font-family:var(--cond);text-transform:uppercase;letter-spacing:.14em;font-size:11px;font-weight:600;color:var(--ink-2)}
.rhft .hairline{height:1px;background:var(--rule);border:0;margin:0}
.rhft .masthead{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-bottom:12px}
.rhft .masthead h1{font-family:var(--cond);font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  font-size:var(--title);margin:.15em 0 0;line-height:1}
.rhft .filebar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-family:var(--mono);font-size:12px;color:var(--ink-2)}
.rhft button,.rhft select,.rhft input{font:inherit;color:inherit}
.rhft .btn{font-family:var(--cond);text-transform:uppercase;letter-spacing:.09em;font-size:11px;font-weight:600;
  background:transparent;border:1px solid var(--ink);border-radius:0;padding:7px 12px;cursor:pointer;
  transition:background .15s,color .15s}
.rhft .btn:hover{background:var(--ink);color:var(--paper)}
.rhft :focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.rhft .drop{border:1px dashed var(--rule);background:var(--panel);padding:clamp(38px,9vw,84px) 24px;text-align:center;
  transition:border-color .15s,background .15s}
.rhft .drop.over{border-color:var(--signal)}
.rhft .drop h2{font-family:var(--cond);text-transform:uppercase;letter-spacing:.08em;font-weight:600;
  font-size:var(--title);line-height:1.1;margin:14px 0 10px}
.rhft .drop p{margin:0 auto;max-width:46ch;color:var(--ink-2);font-size:14px}
.rhft .drop .btn{margin-top:20px}
.rhft .mark{width:46px;height:46px;display:block;margin:0 auto}
.rhft .note{font-family:var(--mono);font-size:11.5px;color:var(--ink-2);margin-top:22px}
.rhft .error{color:#A63A18;font-family:var(--mono);font-size:12.5px;margin-top:16px}
.rhft[data-theme="dark"] .error{color:#E28A63}
/* Darstellung */
.rhft .panelbox{border:1px solid var(--ink);background:var(--panel);padding:14px 16px;margin:14px 0 0;
  display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.rhft .panelbox label{font-family:var(--cond);text-transform:uppercase;letter-spacing:.1em;font-size:10.5px;font-weight:600;
  color:var(--ink-2);display:flex;align-items:center;gap:8px}
.rhft input[type=color]{width:34px;height:24px;padding:0;border:1px solid var(--rule);background:none;cursor:pointer}
.rhft input[type=number]{width:74px;background:transparent;border:0;border-bottom:1px solid var(--rule);
  font-family:var(--mono);font-size:14px;padding:2px 0;text-align:right}
/* Streckenzeichnung */
.rhft .plate{margin:0;padding:0;border-top:1px solid var(--ink);background:var(--panel);position:relative}
.rhft [data-el="plate-map"]{width:100%;background:var(--panel)}
.rhft .plate .leaflet-tile-pane{opacity:.62;filter:saturate(.45)}
.rhft .plate .leaflet-container{background:var(--panel)}
.rhft .plate .leaflet-control-attribution{font-size:9px;background:transparent;color:var(--ink-2)}
.rhft [data-el="route"]{display:block;width:100%}
.rhft .plate figcaption{font-family:var(--mono);font-size:12px;color:var(--ink-2);text-align:center;
  padding:0 16px 16px;font-variant-numeric:tabular-nums}
.rhft .section-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:34px 0 10px;flex-wrap:wrap}
.rhft .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));border-top:1px solid var(--ink);border-left:1px solid var(--rule-soft)}
.rhft .stat{border-right:1px solid var(--rule-soft);border-bottom:1px solid var(--rule-soft);padding:13px 14px 15px;background:var(--panel)}
.rhft .stat dt{font-family:var(--cond);text-transform:uppercase;letter-spacing:.11em;font-size:10.5px;font-weight:600;color:var(--ink-2)}
.rhft .stat dd{margin:5px 0 0;font-family:var(--mono);font-weight:500;font-size:clamp(19px,2.6vw,25px);
  font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.rhft .stat dd span{font-size:.55em;font-weight:400;color:var(--ink-2);margin-left:3px;letter-spacing:.02em}
.rhft .stat.src dd::after{content:attr(data-src);display:block;font-family:var(--cond);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-2);margin-top:3px}
.rhft .chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.rhft .chip{font-family:var(--cond);text-transform:uppercase;letter-spacing:.09em;font-size:10.5px;font-weight:600;
  background:transparent;border:1px solid var(--rule);padding:6px 10px;cursor:pointer;color:var(--ink-2)}
.rhft .chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.rhft .chip:hover{border-color:var(--ink);color:var(--ink)}
.rhft .chip[aria-pressed="true"]:hover{color:var(--paper)}
.rhft .profile{position:relative;background:var(--panel);border:1px solid var(--rule-soft);border-top:1px solid var(--ink);
  touch-action:none;cursor:crosshair}
.rhft .profile svg{display:block;width:100%}
.rhft .readout{position:absolute;top:10px;left:10px;pointer-events:none;background:var(--panel);
  border:1px solid var(--rule);padding:8px 11px;font-family:var(--mono);font-size:12px;line-height:1.55;
  font-variant-numeric:tabular-nums;opacity:0;transition:opacity .12s}
.rhft .readout.on{opacity:.97}
.rhft .readout i{font-style:normal;color:var(--ink-2)}
.rhft [data-el="map"]{height:min(58vh,460px);border:1px solid var(--rule-soft);border-top:1px solid var(--ink);background:var(--panel)}
.rhft .leaflet-container{font-family:var(--sans);background:var(--panel)}
.rhft .legend{display:flex;align-items:center;gap:10px;margin-top:8px;font-family:var(--mono);font-size:11px;color:var(--ink-2)}
.rhft .legend .bar{height:8px;flex:0 0 160px;border:1px solid var(--rule)}
.rhft table{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:13px;font-variant-numeric:tabular-nums}
.rhft th{font-family:var(--cond);text-transform:uppercase;letter-spacing:.1em;font-size:10.5px;font-weight:600;color:var(--ink-2);
  text-align:right;padding:8px 10px;border-bottom:1px solid var(--ink)}
.rhft th:first-child,.rhft td:first-child{text-align:left}
.rhft td{text-align:right;padding:7px 10px;border-bottom:1px solid var(--rule-soft)}
.rhft tr:hover td{background:var(--panel)}
.rhft .bar-cell{width:32%;padding-right:0}
.rhft .bar-cell div{height:7px;background:var(--trace);opacity:.75}
.rhft details.fold summary{cursor:pointer;font-family:var(--cond);text-transform:uppercase;letter-spacing:.1em;
  font-size:10.5px;font-weight:600;color:var(--ink-2);padding:10px 0}
.rhft details.fold[open] summary{color:var(--ink)}
.rhft .hidden{display:none!important}
.rhft footer{margin-top:48px}
.rhft footer .hairline{margin-bottom:14px}
.rhft .copyright{font-family:var(--cond);text-transform:uppercase;letter-spacing:.12em;font-size:11px;font-weight:600;color:var(--ink)}
.rhft .colophon{font-family:var(--mono);font-size:11px;color:var(--ink-2);margin-top:6px;max-width:74ch}
@media (max-width:640px){
.rhft .wrap{padding:20px 14px 48px}
.rhft [data-el="map"]{height:44vh}
}
@media (prefers-reduced-motion:reduce){
.rhft *{animation:none!important;transition:none!important}
}

/* Theme-Reste neutralisieren */
.rhft table{margin:0;border:0;box-shadow:none}
.rhft th,.rhft td{background:none}
.rhft dl,.rhft dd,.rhft dt{margin:0}
.rhft h1,.rhft h2{padding:0;text-transform:uppercase}
.rhft button{box-shadow:none;text-shadow:none;line-height:1.5;min-height:0;width:auto}
.rhft button:hover{transform:none;box-shadow:none}
.rhft a{box-shadow:none}
.rhft .leaflet-pane{position:absolute}
.rhft summary::-webkit-details-marker{display:revert}

/* Einwilligung vor dem Laden der Kartenkacheln */
.rhft [data-el="map"]{display:flex;align-items:center;justify-content:center}
.rhft .consent{max-width:44ch;margin:auto;padding:26px 22px;text-align:center;background:var(--panel);
  border:1px dashed var(--rule)}
.rhft .consent p{margin:0 0 16px;font-size:13.5px;color:var(--ink-2);line-height:1.55}

/* Uebersicht ueber alle Touren */
.rhft table.rhft-archive{border-top:1px solid var(--ink)}
.rhft table.rhft-archive td:first-child{white-space:nowrap;color:var(--ink-2)}
.rhft table.rhft-archive a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule)}
.rhft table.rhft-archive a:hover{border-color:var(--ink)}

/* Steckbrief: von Hand gepflegte Angaben zur Tour */
.rhft .steckbrief{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  border-top:1px solid var(--ink);border-left:1px solid var(--rule-soft);margin:22px 0 0}
.rhft .steckbrief > div{border-right:1px solid var(--rule-soft);border-bottom:1px solid var(--rule-soft);
  padding:12px 14px 14px;background:var(--panel)}
.rhft .steckbrief dt{font-family:var(--cond);text-transform:uppercase;letter-spacing:.11em;
  font-size:10.5px;font-weight:600;color:var(--ink-2)}
.rhft .steckbrief dd{margin:5px 0 0;font-size:14.5px;line-height:1.45}
.rhft .steckbrief a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule)}
.rhft .steckbrief a:hover{border-color:var(--ink)}

/* Uebersichtstabelle */
.rhft .tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.rhft table.rhft-archive{border-top:1px solid var(--ink);min-width:520px}
.rhft table.rhft-archive th.txt,.rhft table.rhft-archive td.txt{text-align:left}
.rhft table.rhft-archive th.num,.rhft table.rhft-archive td.num{text-align:right;white-space:nowrap}
.rhft table.rhft-archive td.txt:first-child{white-space:nowrap;color:var(--ink-2)}
.rhft table.rhft-archive a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule)}
.rhft table.rhft-archive a:hover{border-color:var(--ink)}

/* Auf schmalen Schirmen wird aus jeder Zeile ein kleiner Block */
@media (max-width:640px){
  .rhft table.rhft-archive{min-width:0}
  .rhft table.rhft-archive thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .rhft table.rhft-archive tr{display:block;border-bottom:1px solid var(--ink);padding:10px 0}
  .rhft table.rhft-archive td{display:flex;justify-content:space-between;gap:14px;border:0;padding:3px 0;text-align:left}
  .rhft table.rhft-archive td.num{text-align:right}
  .rhft table.rhft-archive td:empty{display:none}
  .rhft table.rhft-archive td::before{content:attr(data-label);font-family:var(--cond);text-transform:uppercase;
    letter-spacing:.1em;font-size:10px;font-weight:600;color:var(--ink-2);flex:0 0 auto}
  .rhft table.rhft-archive td.txt:first-child{white-space:normal}
}

/* Ohne Kopfzeile: nur die Schaltflaechen, rechtsbuendig */
.rhft .masthead.nohead{justify-content:flex-end;padding-bottom:0;min-height:0}
.rhft .masthead.nohead:empty{display:none}

/* Statistik-Tabelle */
.rhft [data-el="stattable"] td.v{white-space:nowrap}
.rhft [data-el="stattable"] td.u{width:96px;color:var(--ink-2);white-space:nowrap;text-align:left}
.rhft [data-el="stattable"] tr.sec td:first-child{text-align:left;padding-top:18px;font-weight:600;color:var(--ink)}
.rhft [data-el="stattable"] tr.sec:hover td{background:none}
.rhft [data-el="mass"]{width:62px}

/* Bereichsauswahl im Profil */
.rhft .selinfo{font-family:var(--mono);font-size:11.5px;color:var(--ink-2);background:var(--panel);
  border:1px solid var(--rule);padding:7px 10px;margin-bottom:8px;
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px}
.rhft .selinfo b{color:var(--ink);font-weight:600}
.rhft .selinfo i{font-style:normal}
.rhft .selinfo button{margin-left:auto;border:1px solid var(--rule);background:none;color:var(--ink-2);
  cursor:pointer;font-size:14px;line-height:1;padding:2px 8px;min-height:0}
.rhft .selinfo button:hover{color:var(--ink);border-color:var(--ink)}
.rhft .profile{user-select:none;-webkit-user-select:none}

/* Grosse Zahl */
.rhft .hero{display:flex;align-items:flex-end;justify-content:space-between;gap:20px 34px;flex-wrap:wrap;
  margin:28px 0 0;padding-bottom:24px;border-bottom:1px solid var(--ink)}
.rhft .hero-main{display:flex;align-items:baseline;gap:10px;line-height:1}
.rhft .hero-num{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:600;
  font-size:var(--title);letter-spacing:-.02em;color:var(--ink)}
.rhft .hero-unit{font-family:var(--cond);text-transform:uppercase;letter-spacing:.12em;
  font-size:calc(var(--title) * .45);font-weight:600;color:var(--trace)}
.rhft .hero-side{display:flex;gap:30px;flex-wrap:wrap;margin:0 0 6px}
.rhft .hero-side div{display:flex;flex-direction:column;gap:4px}
.rhft .hero-side dt{font-family:var(--cond);text-transform:uppercase;letter-spacing:.13em;
  font-size:10px;font-weight:600;color:var(--ink-2)}
.rhft .hero-side dd{margin:0;font-family:var(--mono);font-size:17px;font-variant-numeric:tabular-nums;color:var(--ink)}
@media (max-width:640px){
.rhft .hero{gap:12px 20px}
.rhft .hero-side{gap:20px;margin-bottom:2px}
.rhft .hero-side dd{font-size:16px}
}

/* Automatik: folgt der Systemeinstellung des Besuchers, ohne Umweg ueber
   JavaScript - dadurch kein Aufblitzen der hellen Fassung beim Laden. */
@media (prefers-color-scheme: dark){
.rhft[data-theme="auto"]{
  --paper:#101714; --panel:#182220; --ink:#E4EADF; --ink-2:#8FA095;
  --rule:#2F3D36; --rule-soft:#232F2A;
  --trace:#4D7CFF; --signal:#FF0000; --trace-fill:rgba(77,124,255,.14);
}
}