/**
 * historie.css – Styles für /historie/ (historische Spot-Auswertung).
 * Basis-Layout/Overflow-Fix kommt aus news-shared.css. Akzent: Lila #9B59B6 (aus addictedSportsMain.css).
 */
.hi-wrap{margin:0 auto;width:100%;box-sizing:border-box}
.hi-wrap h1{font-size:24px;margin:8px 0 12px;color:#1b2733}
.hi-intro,.hi-hint{color:#5a6672;font-size:14px;line-height:1.5}
.hi-seo-intro{color:#5a6672;font-size:15px;line-height:1.55;margin:0 0 10px;max-width:760px}
.hi-hint{margin:.2em 0 .6em}
.hi-empty{color:#8a96a3;padding:18px;background:#f6f8fa}
.hi-camlink{color:#9B59B6;text-decoration:none;font-weight:600}
.hi-camlink:hover{text-decoration:underline}

/* Übersicht */
.hi-spotlist{list-style:none;padding:0;margin:14px 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.hi-spotlist a{display:block;padding:12px 14px;background:#fff;border:1px solid #e3e8ee;text-decoration:none;color:#1b2733}
.hi-spotlist a:hover{border-color:#9B59B6;box-shadow:0 1px 6px rgba(155,89,182,.15)}
.hi-spotlist b{display:block}
.hi-spotlist small{color:#8a96a3}

/* Ad-Slots (von QMAX gefüllt) – wie auf den Webcam-Seiten */
.hi-adslot{margin:14px 0;text-align:center;clear:both}
.hi-adslot:empty{margin:0}
/* slot4/5/6: volle Gridbreite zwischen den Kachel-Reihen */
.hi-adrow{grid-column:1/-1}
/* slot2 (Skyscraper) liefert der Seitenrahmen; #slot2 liegt außerhalb von #wrapper,
   daher fixed rechts neben die zentrierte 1010px-Seite stellen. Nur wenn Platz ist. */
body.historie #slot2{position:fixed;top:160px;left:calc(50% + 525px);width:160px;overflow:hidden;z-index:40}
@media (max-width:1365px){body.historie #slot2{display:none}}
/* Historie braucht mehr Breite als das globale 980px-#wrapper, damit das 970er-
   Leaderboard reinpasst (sonst läuft es rechts raus). */
body.historie #wrapper{width:1010px}
body.historie #page{max-width:1010px}
/* Rahmen-slot1 (Top-Leaderboard) sitzt in .logoAdSlotContainer und nutzt webcam-
   CSS (#slot1{display:table-cell}) → ohne Tabellen-Kontext 0x0. Für die Historie
   auf normales, zentriertes Block-Layout zwingen, damit das Banner sichtbar ist. */
body.historie .logoAdSlotContainer{display:block;text-align:center;margin:6px 0 12px}
body.historie #slot1{display:block;text-align:center}
body.historie #slot1 img{max-width:100%;height:auto}

/* Übersicht: Einstellungsleiste, Funktions-Tabs, Stations-Kacheln (flach, Markenfarben) */
.hi-settings,.hi-window{display:flex;flex-wrap:wrap;align-items:center;gap:10px;background:#ecf0f1;border:1px solid #bdc3c7;padding:10px 12px;margin:8px 0}
.hi-window label{font-size:13px;color:#5a6672}
.hi-window input[type=date]{padding:5px 7px;border:1px solid #bdc3c7;background:#fff;font-size:14px}
.hi-set-label{font-size:14px;color:#1d1d1c}
.hi-settings label{font-size:13px;color:#5a6672}
.hi-settings select{padding:6px 8px;border:1px solid #bdc3c7;background:#fff;font-size:14px}
.hi-btn{padding:7px 14px;border:0;background:#9B59B6;color:#fff;font-weight:600;cursor:pointer;font-size:14px}
.hi-btn:hover{background:#7d3c98}
.hi-set-note{font-size:12px;color:#9a9ea1;margin-left:auto}
/* Modus-Umschalter: Grundwind+Zeit ODER Peak (Max-Böe) – segmentiert, aktiv = lila */
.hi-mode{display:inline-flex;border:1px solid #bdc3c7;overflow:hidden}
.hi-mode-opt{display:inline-flex;align-items:center;gap:5px;margin:0;padding:6px 10px;font-size:13px;color:#5a6672;background:#fff;cursor:pointer}
.hi-mode-opt+.hi-mode-opt{border-left:1px solid #bdc3c7}
.hi-mode-opt.active{background:#9B59B6;color:#fff}
.hi-mode-opt input{margin:0}
.hi-settings .hi-disabled{opacity:.4} /* "durchgängig X h" im Peak-Modus inaktiv */

.hi-tabs{display:flex;flex-wrap:wrap;gap:2px;border-bottom:2px solid #9B59B6;margin:14px 0 12px}
.hi-tab{padding:8px 16px;text-decoration:none;color:#1d1d1c;background:#ecf0f1;border:1px solid #bdc3c7;border-bottom:0;font-weight:600;font-size:14px}
.hi-tab.active{background:#9B59B6;color:#fff;border-color:#9B59B6}

/* Stations-Kacheln nach Reports-Vorbild: schwarzer Namens-Balken oben, Bild mit
   Datums-Badge, flacher #ecf0f1-Textkörper mit Notch, Hover dunkelt auf #d5d9da. */
/* Feste Spaltenzahl per Viewport-Media-Query (NICHT auto-fill): auto-fill richtet
   sich nach der Container-Breite, die beim Laden kurz schmaler ist → führte zum
   2→3-Spalten-Sprung. Media-Queries hängen am Viewport und sind ab erstem Paint stabil. */
.hi-stationgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:10px}
@media (max-width:820px){.hi-stationgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:540px){.hi-stationgrid{grid-template-columns:1fr}}
.hi-station{display:flex;flex-direction:column;color:#7d7d7d;background:#ecf0f1;overflow:hidden;position:relative}
.hi-station:hover{background:#d5d9da}
/* Titel-Balken nach Webcam-Vorbild (.wctitel): dunkel, zentriert, City fett +
   Untertitel thin; Lila-Bottom-Border als Historie-Akzent. */
.hi-station .wctitel{display:block;text-align:center;padding:9px 8px;background-color:#1d1d1c;border-bottom:2px solid #9B59B6;color:#fff;font-size:15px;font-weight:600;line-height:1.2}
.hi-station .webcamSubTitle{font-weight:400}
.hi-station-img{position:relative;display:block;line-height:0}
.hi-station-img img{width:100%;height:auto;display:block}
.hi-station-img.noimg{min-height:140px;background:#dfe4e6}
/* Datums-Badge (news-list-date) übers Bild, Lila */
/* Spezifität 0,3,0 schlägt das site-weite `.reports .news-list-date` (Blau) aus
   addictedSportsMain.css – der Seitenrahmen setzt body.reports auf jeder Seite. */
.hi-station .hi-station-img .news-list-date{position:absolute;top:0;left:0;width:45px;height:40px;background-color:#9B59B6;color:#fff;text-transform:uppercase;text-align:center;line-height:0.7;font-size:10px;font-weight:bold;z-index:3}
.hi-station .hi-station-img .news-list-date span{display:block;font-size:25px;font-style:normal;font-weight:900;line-height:1}
.hi-station-body{padding:12px 14px;position:relative}
/* Notch: CSS-Dreieck in Kachelfarbe, zeigt vom Text nach oben ins Bild (wie .textpfeilOben) */
.hi-station-notch{position:absolute;top:-9px;left:24px;width:0;height:0;border-left:9px solid transparent;border-right:9px solid transparent;border-bottom:9px solid #ecf0f1}
.hi-station:hover .hi-station-notch{border-bottom-color:#d5d9da}
.hi-station-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
.hi-station-stats>span{display:flex;flex-direction:column;font-size:12px;color:#7d7d7d}
.hi-station-stats i{font-style:normal;font-weight:700;font-size:15px;color:#1d1d1c}
/* Trennlinie (line) + Peak-Zeile mit Webcam-Link */
.hi-line{display:block;border-top:1px solid #c8cbcc;margin:10px 0 8px}
.hi-station-peak{display:block;font-size:13px;color:#7d7d7d;line-height:1.4}
.hi-station-peak b{color:#1d1d1c;font-weight:700}
.hi-peaklink{color:#9B59B6;font-weight:700;text-decoration:none;position:relative;z-index:2}
.hi-peaklink:hover{text-decoration:underline}
/* Gestreckter Link über die ganze Kachel → Historie (Webcam-Link liegt darüber) */
.hi-station-link{position:absolute;inset:0;z-index:1}

/* Spot-Seite */
.hi-crumb{font-size:13px;color:#8a96a3;margin:4px 0 6px}
.hi-crumb a{color:#9B59B6;text-decoration:none}
.hi-section{background:#fff;border:1px solid #e3e8ee;padding:14px 16px;margin:14px 0}
.hi-allstations-h{font-size:20px;color:#1b2733;margin:28px 0 4px}
/* Jahres-Gruppierung der „Wie wars"-Tageskacheln */
.hi-year-h{font-size:16px;font-weight:700;color:#9B59B6;margin:18px 0 6px;padding-bottom:3px;border-bottom:2px solid #ecdcf3}
.hi-section h2{font-size:17px;margin:0 0 6px;color:#1b2733}
/* Zwei Charts nebeneinander (Desktop), gestapelt (Mobile) */
.hi-duo{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
.hi-duo .hi-section{margin:14px 0 0}
@media (max-width:760px){.hi-duo{grid-template-columns:1fr;gap:0}}
.hi-crit-note{color:#8a96a3;font-weight:400}

.chart-container{position:relative;height:300px;margin-top:8px}
.chart-container.chart-rose{height:340px;max-width:420px;margin-left:auto;margin-right:auto}

/* Wochenend-Tabelle */
.hi-weekend-summary{font-size:15px;line-height:1.5}
/* „Wie wars": Hero-Bild des stärksten Moments + Ampel-Kacheln je Jahr */
.hi-window-peak{margin:12px 0 0}
.hi-window-peak img{width:100%;max-width:480px;height:auto;display:block}
.hi-window-peak-cap{display:block;font-size:12px;color:#5a6672;margin-top:3px}
.hi-score-dot{display:inline-block;width:11px;height:11px;vertical-align:middle;margin-left:5px}
.hi-score-gut .hi-score-dot{background:#2e8b57}
.hi-score-mittel .hi-score-dot{background:#c79a00}
.hi-score-mau .hi-score-dot{background:#c0392b}
.hi-score-gut{border-left:3px solid #2e8b57}
.hi-score-mittel{border-left:3px solid #c79a00}
.hi-score-mau{border-left:3px solid #c0392b}
.hi-table{width:100%;border-collapse:collapse;font-size:14px;margin-top:8px}
.hi-table th,.hi-table td{text-align:left;padding:7px 10px;border-bottom:1px solid #eef1f4}
.hi-table th{background:#f6f8fa;color:#5a6672;font-size:12px;text-transform:uppercase;letter-spacing:.03em}
.hi-ok{color:#2e8b57;font-weight:600}
.hi-no{color:#b0392c}

/* Jahr-Detail: Zurück-Link + Tageszeit-Tabelle */
.hi-back{margin:4px 0 10px}
.hi-back a{color:#9B59B6;text-decoration:none;font-weight:600}
/* Aufbauende Drilldown-Navigation: Jahresübersicht › Windtage 2019 › Windtage Mai */
.hi-drill{font-size:14px;margin:6px 0 12px;color:#5a6672}
.hi-drill a{color:#9B59B6;text-decoration:none;font-weight:600}
.hi-drill a:hover{text-decoration:underline}
.hi-drill span{color:#5a6672}
.hi-drill span:last-child{font-weight:600;color:#1b2733}
.hi-drill .hi-drill-sep{color:#b7c0c9;font-weight:400}
.hi-timetable-tbl td{vertical-align:middle}
.hi-prob-track{display:inline-block;width:110px;height:14px;background:#eef1f4;vertical-align:middle;overflow:hidden}
.hi-prob-bar{display:block;height:100%;min-width:2px}

/* Galerie */
.hi-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-top:8px}
.hi-gal-item{position:relative;display:block;overflow:hidden;background:#eef1f4;text-decoration:none}
.hi-gal-item img{width:100%;height:110px;object-fit:cover;display:block}
.hi-gal-item span{position:absolute;left:0;right:0;bottom:0;background:rgba(0,0,0,.55);color:#fff;font-size:11px;padding:2px 6px}
.hi-gal-sentinel{height:24px}

/* Monat-Detail: Tageskacheln */
.hi-daygrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-top:8px}
.hi-daycard{border:1px solid #e3e8ee;overflow:hidden;background:#fff}
.hi-daycard-img{display:block}
.hi-daycard-img img{width:100%;height:130px;object-fit:cover;display:block}
.hi-daycard-noimg{height:130px;display:flex;align-items:center;justify-content:center;color:#9aa7b2;background:#eef1f4;font-size:13px}
.hi-daycard-body{padding:10px 12px}
.hi-daycard-date{font-weight:700;color:#1b2733;margin-bottom:6px}
.hi-daycard-stats{list-style:none;margin:0;padding:0;font-size:13px}
.hi-daycard-stats li{display:flex;justify-content:space-between;padding:2px 0;border-bottom:1px solid #f1f4f7}
.hi-daycard-stats li:last-child{border-bottom:none}
.hi-daycard-stats span{color:#5a6672}

/* Reports */
.hi-reports{list-style:none;padding:0;margin:8px 0;font-size:14px}
.hi-reports li{padding:6px 0;border-bottom:1px solid #eef1f4}
.hi-rp-date{display:inline-block;min-width:84px;color:#9B59B6;font-weight:600}
.hi-foot-link{margin:18px 0}

@media (max-width:540px){
  .chart-container{height:240px}
  .hi-gal-item img{height:90px}
}

/* ── Feedback-Popup (Chatbot-artiger Button unten rechts) ──────────────────── */
#hi-fb-btn{position:fixed;right:20px;bottom:20px;z-index:9998;display:inline-flex;align-items:center;gap:7px;
  background:#9B59B6;color:#fff;border:none;border-radius:24px;padding:11px 18px;font-size:15px;font-weight:600;
  cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.25)}
#hi-fb-btn:hover{background:#7d3c98}
#hi-fb-btn span{font-size:17px;line-height:1}
#hi-fb-panel{position:fixed;right:20px;bottom:74px;z-index:9999;width:340px;max-width:calc(100vw - 32px);
  background:#fff;border:1px solid #d8dde2;border-radius:10px;box-shadow:0 8px 30px rgba(0,0,0,.28);padding:14px}
#hi-fb-panel[hidden]{display:none}
.hi-fb-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.hi-fb-head strong{color:#1b2733;font-size:15px}
.hi-fb-x{background:none;border:none;font-size:22px;line-height:1;color:#8a96a3;cursor:pointer;padding:0 4px}
.hi-fb-intro{color:#5a6672;font-size:13px;margin:0 0 10px}
.hi-fb-cats{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13px;margin-bottom:8px}
.hi-fb-cats label{color:#3a4654;cursor:pointer}
#hi-fb-form textarea,#hi-fb-form input[type=email]{width:100%;box-sizing:border-box;border:1px solid #cfd6db;
  border-radius:6px;padding:8px;font-size:14px;font-family:inherit;margin-bottom:8px}
.hi-fb-send{width:100%;background:#9B59B6;color:#fff;border:none;border-radius:6px;padding:10px;font-size:15px;
  font-weight:600;cursor:pointer}
.hi-fb-send:hover{background:#7d3c98}
.hi-fb-send:disabled{opacity:.6;cursor:default}
.hi-fb-msg{font-size:13px;margin:8px 0 0}
.hi-fb-msg.ok{color:#2e8b57}
.hi-fb-msg.err{color:#c0392b}
/* Honeypot unsichtbar (für Menschen), Bots füllen es aus */
.hi-fb-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media (max-width:540px){
  #hi-fb-btn{right:12px;bottom:12px;padding:10px 15px}
  #hi-fb-panel{right:8px;left:8px;bottom:64px;width:auto}
}