.ort-layout{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:23px;margin-bottom:30px}.ort-main{min-width:0;display:grid;align-content:start;gap:20px}.ort-aside{display:grid;align-content:start;gap:18px}.ort-main .panel{border:1px solid #d4e0eb;border-radius:8px;background:#fff;box-shadow:0 2px 8px #173d6720;overflow:hidden}.ort-hero{background:linear-gradient(135deg,#285c96,#458dbe 65%,#7fb6d5)!important;color:white;border:none!important}.hero-main{padding:28px 30px 22px;display:flex;justify-content:space-between;min-height:225px}.hero-small{color:#c6e9ff!important}.current-row{display:flex;align-items:center;gap:10px}.current-row img{width:125px;height:125px;filter:drop-shadow(0 4px 7px #113e6a45)}.current-row strong{font-size:72px;line-height:1;letter-spacing:-3px}.hero-desc{font-size:20px;font-weight:700;margin-top:6px}.hero-sub{opacity:.85;margin-top:9px;font-size:13px}.hero-mini{display:flex;align-items:flex-end;flex-direction:column;justify-content:space-between;text-align:right}.hero-sky{font-size:55px;opacity:.15;display:flex;gap:8px}.city-info{font-size:12px;background:#ffffff24;border:1px solid #ffffff39;padding:9px 12px;border-radius:20px}.hero-stats{display:grid;grid-template-columns:repeat(4,1fr);background:#15457850;border-top:1px solid #ffffff30}.hero-stats>div{padding:15px 10px;text-align:center;border-right:1px solid #ffffff22}.hero-stats>div:last-child{border:0}.hero-stats span{display:block;font-size:12px;opacity:.85}.hero-stats strong{display:block;margin-top:4px;font-size:19px}.panel-head{padding:22px 25px 12px;display:flex;justify-content:space-between;gap:10px;align-items:center}.panel-head h2{font-size:23px;margin:2px 0 6px;color:#285b8e}.panel-head p:not(.eyebrow){margin:0;font-size:13px;color:#6a8299}.panel-head .eyebrow{margin:0;font-size:10px}.live-indicator{white-space:nowrap;font-size:11px;font-weight:700;color:#438e6b;background:#e6f6ee;padding:7px 9px;border-radius:17px}.chart-toolbar{display:flex;gap:8px;flex-wrap:wrap;padding:13px 25px}.chart-btn{border:1px solid #d1dfea;background:#f3f7fb;border-radius:6px;padding:9px 13px;color:#315d88;cursor:pointer;font-weight:700}.chart-btn.active{background:#2e649e;color:white;border-color:#2e649e}.chart-wrap{position:relative;padding:4px 15px 0}.chart-wrap svg{width:100%;display:block;touch-action:pan-y}.chart-tip{position:absolute;top:6px;right:28px;padding:8px 12px;border-radius:6px;background:#1b436c;color:white;box-shadow:0 3px 14px #173a6344;font-size:12px;z-index:2;pointer-events:none}.chart-legend{display:flex;justify-content:space-between;gap:12px;font-size:11px;color:#71849b;padding:2px 23px 14px}.chart-legend i{display:inline-block;width:12px;height:4px;background:#e68a41;vertical-align:middle;margin-right:5px;border-radius:3px}.source-hint{background:#f1f6fb;border-top:1px solid #dce9f2;padding:9px 22px;font-size:11px;color:#7a8ea2}.hour-scroll{display:flex;overflow-x:auto;gap:0;padding:9px 18px 24px;scrollbar-color:#9bbbd3 #edf5fb}.hour-item{flex:0 0 90px;border-right:1px solid #e1edf5;text-align:center;display:grid;gap:7px;justify-items:center;font-size:12px;color:#58748e;padding:6px}.hour-item img{width:44px;height:44px}.hour-item strong{font-size:20px;color:#245b92}.hour-item .rain{font-size:11px;color:#4686b2}.daily-list{padding:4px 22px 22px}.day-item{display:grid;grid-template-columns:minmax(110px,1.1fr) 48px minmax(120px,1fr) 90px;align-items:center;gap:9px;padding:9px 4px;border-bottom:1px solid #e6edf3}.day-item:last-child{border:0}.day-item .dayname{font-weight:750;color:#2d5782}.day-item img{width:43px;height:43px}.tempbar{height:7px;border-radius:9px;background:#e4edf4;position:relative;margin-bottom:5px}.tempbar span{display:block;height:7px;background:linear-gradient(90deg,#63b4d9,#f2ad52);border-radius:10px}.day-item .low{color:#6894b7}.day-item .high{font-weight:750;color:#c8763a}.day-item .mm{color:#5586aa;font-size:11px}.facts-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;padding:7px 24px 25px}.facts-grid>div{background:#f2f7fb;border:1px solid #e1ebf3;border-radius:8px;padding:15px;display:grid;gap:5px}.facts-grid span{font-size:12px;color:#65839b}.facts-grid strong{font-size:19px;color:#285e8e}.region-links{display:flex;flex-wrap:wrap;gap:6px;margin-top:15px}.region-links a{background:#eaf3fc;border-radius:5px;padding:8px;font-size:11px;color:#2a5b89}.loading-inline{padding:20px;color:#718da3}.err-msg{padding:14px 20px;color:#914b34;background:#fff4ed;border-radius:5px;margin:12px}
@media(max-width:1000px){.ort-layout{grid-template-columns:minmax(0,1fr) 275px}}@media(max-width:780px){.ort-layout{grid-template-columns:1fr}.hero-main{padding:20px;min-height:205px}.hero-stats{grid-template-columns:repeat(2,1fr)}.current-row img{width:95px;height:95px}.current-row strong{font-size:60px}.hero-mini{display:none}.panel-head{padding:19px 17px 10px}.live-indicator{display:none}.chart-toolbar{padding:10px 15px}.day-item{grid-template-columns:minmax(85px,1fr) 37px minmax(105px,1fr) 60px;gap:5px}.day-item img{width:34px;height:34px}}

/* Version 11.1: licensed detail icon cards */
.detail-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:9px 23px 23px}
.detail-tile{display:flex;align-items:center;gap:13px;min-width:0;padding:17px 13px;background:#f3f8fc;border:1px solid #ddeaf4;border-radius:9px}
.detail-tile img{width:44px;height:44px;flex:0 0 44px;object-fit:contain}
.detail-tile>div{display:grid;gap:5px;min-width:0}
.detail-tile span{font-size:11px;font-weight:650;color:#607f99;line-height:1.3}
.detail-tile strong{font-size:20px;line-height:1.15;color:#285e8e;overflow-wrap:anywhere}
@media(max-width:1100px){.detail-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:420px){.detail-grid{gap:8px;padding:8px 12px 16px}.detail-tile{padding:11px 7px;gap:7px}.detail-tile img{width:34px;height:34px;flex-basis:34px}.detail-tile strong{font-size:17px}}

/* Version 11.2: kompaktere lizenzierte SVG-Wetterdetail-Symbole */
.detail-tile img{width:30px;height:30px;flex:0 0 30px}
@media(max-width:420px){.detail-tile img{width:28px;height:28px;flex-basis:28px}}

/* V11.3: uniform licensed static icons for data labels. Meteocons remain weather-state icons. */
.hero-stats span{display:flex;align-items:center;justify-content:center;gap:5px}
.data-icon{width:17px;height:17px;object-fit:contain;vertical-align:-3px;flex-shrink:0}
.hero-stats .data-icon{width:15px;height:15px;filter:brightness(0) invert(1);opacity:.9}
.chart-btn .data-icon{width:18px;height:18px;margin-right:3px}
.chart-btn.active .data-icon{filter:brightness(0) invert(1)}
.hour-item .rain{display:flex;align-items:center;justify-content:center;gap:3px}
.hour-item .rain .data-icon,.day-item .mm .data-icon{width:13px;height:13px}

/* Version 11.7: compact details + expanding day-by-day hourly forecast */
#detail-grid .detail-tile[hidden]{display:none!important}
.details-toggle{display:block;margin:16px auto 19px;padding:11px 19px;background:#e9f3fa;color:#245d91;border:1px solid #cbdfef;border-radius:8px;font-weight:700;cursor:pointer}.details-toggle:hover{background:#dceefa}.details-toggle:focus-visible,.day-trigger:focus-visible{outline:3px solid #eda93d;outline-offset:2px}
.day-legend{display:flex;align-items:center;flex-wrap:wrap;gap:9px 11px;margin:0 0 15px;color:#507392;font-size:12px}.day-legend .legend-low{color:#398fbf;font-weight:700}.day-legend .legend-high{color:#d98a35;font-weight:700}.legend-bar{display:inline-block;width:95px;height:7px;border-radius:8px;background:linear-gradient(90deg,#56b9d7,#f1a44c)}.day-legend small{flex-basis:100%;font-size:11px;color:#7189a0}
.day-block{border-bottom:1px solid #dce8f0}.day-block:last-child{border-bottom:0}.day-trigger{appearance:none;border:0;border-radius:0;background:transparent;width:100%;text-align:left;cursor:pointer;color:inherit;font:inherit}.day-trigger:hover,.day-trigger[aria-expanded=true]{background:#f0f7fc}.day-trigger .dayname small{font-size:11px;font-weight:400;color:#8da1b1}.day-chevron{font-size:19px;color:#3d76a5;margin-left:auto}.day-range{min-width:0}.day-temps{display:block;white-space:nowrap}.day-item .mm .data-icon{width:13px;height:13px;vertical-align:middle}.day-item .mm{white-space:nowrap}
.day-expanded{background:#f4f9fd;border-top:1px solid #dcebf5;padding:16px 17px 19px}.day-summary{font-size:13px;color:#456d8d;margin:0 0 14px}.day-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.day-stat{display:flex;align-items:center;gap:7px;background:white;border:1px solid #dce9f1;border-radius:7px;padding:9px 8px;min-width:0}.day-stat img{width:25px;height:25px;flex:none}.day-stat span{font-size:11px;color:#6684a0;min-width:0}.day-stat strong{display:block;color:#235d92;font-size:14px;margin-top:3px;overflow-wrap:anywhere}.day-expanded h3{margin:18px 0 4px;font-size:15px;color:#245b89}.day-scroll-hint{font-size:11px;color:#6685a0;margin:0 0 12px}.day-hour-scroll{display:flex;overflow-x:auto;max-width:100%;padding-bottom:10px;scrollbar-color:#9ebdd5 #e9f2f9;scrollbar-width:thin}.day-hour{min-width:89px;display:flex;flex-direction:column;align-items:center;gap:8px;border-right:1px solid #e1ebf3;padding:8px 6px;color:#507394;font-size:12px}.day-hour img{width:36px;height:36px;object-fit:contain}.day-hour strong{font-size:17px;color:#205c96}.day-hour small{display:flex;align-items:center;gap:3px;font-size:10px;white-space:nowrap}.day-hour small img{width:12px;height:12px}
@media(max-width:850px){.day-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:530px){.day-legend{gap:7px}.day-item{gap:6px!important}.day-chevron{font-size:15px}.day-stats{gap:7px}.day-expanded{padding:12px 9px}.day-stat{padding:7px 5px}}
.day-trigger.day-item{grid-template-columns:minmax(98px,1.1fr) 45px minmax(130px,1.35fr) minmax(78px,.7fr) 18px;border-bottom:0;align-items:center}
.day-trigger .day-range .tempbar{display:block}.day-trigger .dayname{display:block}.day-trigger .dayname small{display:inline}.day-trigger img.data-icon{width:13px;height:13px}
@media(max-width:560px){.day-trigger.day-item{grid-template-columns:minmax(69px,.9fr) 32px minmax(78px,1.2fr) minmax(55px,.65fr) 13px;padding:9px 2px}.day-trigger>img{width:31px;height:31px}.day-trigger .mm{font-size:10px}.day-trigger .dayname small{display:block}}

/* 11.8 – Wettertrend und thematische Wetterdetails */
.weather-report .panel-head{padding-bottom:8px}
.report-text{margin:4px 24px 15px;padding:16px 19px;background:#eaf4fe;border:1px solid #c4def8;border-radius:9px;color:#214a73;line-height:1.8;font-size:14px}
.report-disclaimer{margin:0;padding:0 25px 17px;font-size:11px;color:#7891a8}
.detail-groups{display:grid;gap:11px;padding:8px 22px 24px}
.detail-group{border:1px solid #d6e6f3;border-radius:9px;overflow:hidden;background:#f8fbfe}
.detail-group>summary{list-style:none;display:flex;align-items:center;gap:11px;padding:14px 16px;cursor:pointer;color:#285e8e;font-weight:750;background:#f4f9fd;user-select:none}
.detail-group>summary::-webkit-details-marker{display:none}
.detail-group>summary:hover,.detail-group[open]>summary{background:#eaf4fd}
.detail-group>summary img{width:26px;height:26px;object-fit:contain;flex:none}
.group-count{font-size:11px;font-weight:500;color:#7793a9;margin-left:auto}
.group-chevron{width:8px;height:8px;border-right:2px solid #427aa5;border-bottom:2px solid #427aa5;transform:rotate(45deg);margin:0 5px 5px 4px}
.detail-group[open] .group-chevron{transform:rotate(225deg);margin-top:7px;margin-bottom:0}
.detail-group>summary:focus-visible{outline:3px solid #efa92b;outline-offset:-3px}
.detail-group .detail-grid{padding:15px;gap:9px;background:white;grid-template-columns:repeat(3,minmax(0,1fr))}
.detail-group .detail-tile{padding:13px 10px}
@media(max-width:700px){.detail-group .detail-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.detail-groups{padding:6px 13px 18px}.report-text{margin:4px 14px 12px;padding:13px}.report-disclaimer{padding:0 14px 14px}}
@media(max-width:410px){.detail-group .detail-grid{grid-template-columns:1fr}}

/* V11.9: gemeinsame Wettergrafik und ausgerichtete Temperaturlegende */
.day-legend{margin:8px 22px 16px;padding:12px 16px;display:flex;justify-content:center;align-items:center;gap:8px 12px;border:1px solid #d6e8f5;border-radius:8px;background:#f1f7fd;text-align:center}
.day-legend small{line-height:1.5;flex-basis:100%;text-align:center}
.combined-key{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding:0 25px 10px;color:#4a7195;font-size:11px}
.combined-key span{display:flex;align-items:center;gap:5px;white-space:nowrap}
.combined-key i{display:inline-block;width:17px;height:4px;border-radius:4px;background:#e6572d}
.combined-key .key-rain{background:#58b6e6;height:11px;width:9px;border-radius:2px}
.combined-key .key-wind{background:#6841dc}.combined-key .key-gust{background:repeating-linear-gradient(90deg,#9564de 0 4px,transparent 4px 7px)}
.chart-wrap svg{min-height:330px}.chart-btn:not(.active){opacity:.62}
@media(max-width:550px){.day-legend{margin-left:12px;margin-right:12px;padding:10px 8px}.combined-key{gap:7px 10px;padding-left:15px;padding-right:15px}.chart-wrap{padding:4px 3px 0}}

/* wetter.cam 11.10 – Meteogramm-Feinschliff */
.meteogram-weather-icon{filter:drop-shadow(0 1px 1.5px rgba(34,78,115,.25));}
.chart-legend-clean{justify-content:flex-end;}

/* V11.11 – readable hourly weather tooltip */
.chart-tip{min-width:235px;max-width:min(320px,calc(100% - 24px));padding:10px 12px;line-height:1.4;text-align:left}
.tip-head{display:flex;align-items:center;gap:9px;margin-bottom:8px}
.tip-head img{width:34px;height:34px;flex:0 0 34px;filter:drop-shadow(0 1px 2px #102f4c60)}
.tip-head strong{display:block;font-size:12px}
.tip-head small{display:block;color:#d4e7f5;font-size:11px;margin-top:2px}
.tip-metrics{display:grid;grid-template-columns:1fr 1fr;gap:5px 12px;padding-top:7px;border-top:1px solid #ffffff35}
.tip-metrics>span{display:flex;flex-direction:column;color:#d8e8f4;font-size:10px}
.tip-metrics b{font-size:12px;color:white}
@media(max-width:600px){.chart-tip{top:8px;right:8px;min-width:195px}}

/* wetter.cam 11.12 – smart fixed tooltip, left/right avoidance and mobile dock */
.chart-tip{transition:opacity .16s ease,box-shadow .16s ease;left:auto;right:28px;top:6px}
.chart-tip.tip-left{left:28px;right:auto}
@media(max-width:680px){
  .chart-wrap{padding-top:140px}
  .chart-tip,.chart-tip.tip-left,.chart-tip.tip-mobile{
    top:6px;left:12px;right:12px;min-width:0;max-width:none;
    box-sizing:border-box;display:block;
  }
  .chart-tip[hidden]{display:none}
  .chart-tip .tip-head img{width:30px;height:30px;flex-basis:30px}
}
@media(prefers-reduced-motion:reduce){.chart-tip{transition:none}}

/* v11.13: DWD warning component */
.dwd-warning-panel{margin-bottom:20px}.dwd-state{padding:18px;border:1px solid #d8e4ef;border-radius:9px;background:#f2f7fc;color:#325c81}.dwd-warning-list{display:grid;gap:12px}.dwd-warning-item{border:1px solid var(--warning-border,#ddd);border-left:5px solid var(--warning-color,#e8ac21);background:#fff;border-radius:9px;padding:14px 16px}.dwd-warning-item h3{margin:0 0 8px;color:#224b78;font-size:17px}.dwd-warning-item p{margin:7px 0;line-height:1.5}.dwd-warning-time{font-size:13px;color:#466481}.dwd-warning-level{display:inline-block;background:var(--warning-color);padding:3px 8px;border-radius:5px;color:#152534;font-weight:700;font-size:12px;margin-bottom:8px}.dwd-warning-item a{color:#215a96;font-weight:700}.dwd-warning-item .dwd-warn-text{white-space:pre-line}.dwd-aside-status{font-weight:700;color:#2d567f}.dwd-error{background:#f6f8fa;color:#54677a}.dwd-ok{background:#e9f6ed;color:#215e37}

/* V11.14 — compact neutral warning map, deliberately no simulated live warning colors */
.warn-mini-wrap{border:1px solid #d8e5ef;border-radius:10px;background:#f5faff;margin:12px 0 14px;padding:11px;overflow:hidden}
.warn-mini-heading{display:flex;flex-wrap:wrap;gap:3px 8px;align-items:baseline;justify-content:space-between;font-size:12px;color:#214f7a}
.warn-mini-heading span{font-size:10px;color:#64819b}
.warn-mini-map-link{position:relative;display:block;max-width:100%;height:240px;margin:7px auto 9px;background:radial-gradient(ellipse at center,#ecf7fd,#daeefa);border:1px solid #dae7f1;border-radius:9px;overflow:hidden;text-decoration:none}
.warn-mini-svg{width:100%;height:100%;display:block}
#warn-mini-basemap path{fill:#a8c7da;stroke:#fff;stroke-width:1.8;vector-effect:non-scaling-stroke}
#warn-mini-live-states path{fill:#a8c7da;stroke:#729ab5;stroke-width:1.1;vector-effect:non-scaling-stroke}
#warn-mini-live-counties path{fill:none;stroke:#5f89a4;stroke-opacity:.56;stroke-width:.55;vector-effect:non-scaling-stroke;pointer-events:none}
.warn-mini-open{position:absolute;bottom:7px;right:7px;border-radius:5px;background:#fffefa;padding:4px 7px;color:#215b8a;font-size:10px;font-weight:700;box-shadow:0 2px 9px #163f631d}
.warn-mini-map-link:focus-visible{outline:3px solid #f1b644;outline-offset:2px}
.warn-mini-status{color:#5c6f83;font-size:11px;line-height:1.45;padding:7px 9px;background:#fff;border-radius:6px;border:1px solid #e0e9f0}
.warn-mini-legend{display:flex;justify-content:center;flex-wrap:wrap;gap:7px 11px;margin-top:10px}
.warn-mini-legend span{font-size:10px;color:#496b85;display:flex;align-items:center;gap:4px}
.warn-mini-legend i{display:inline-block;width:10px;height:10px;border-radius:2px}
@media(max-width:840px){.warn-mini-map-link{height:230px}}


/* wetter.cam 11.21 | readable, horizontally scrollable 48-hour chart on narrow screens */
@media(max-width:700px){
  .ort-layout,.ort-layout>*,.chart-wrap{min-width:0;max-width:100%;}
  .chart-wrap{overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin;}
  .chart-wrap svg{width:100%;min-width:620px;max-width:none;}
}

/* wetter.cam V11.22 – native two-axis gestures on the mobile meteogram */
@media (max-width:700px) {
  /* Override legacy `touch-action: pan-y`, which prevented horizontal swiping. */
  .chart-wrap svg, .chart-wrap #cursor-area {
    touch-action:pan-x pan-y;
  }
}
/* Keep the chart's tap/click focus visually quiet while preserving a visible keyboard focus. */
#cursor-area:focus {outline:none;}
#cursor-area:focus-visible {
  outline:none;
  stroke:#3e82be;
  stroke-width:1.5;
  stroke-dasharray:5 5;
}