/* CONZYR Wetter – Werkzeug im Stil der Website
   Baut auf css/style.css auf (Farben, Schrift, .btn, .link, .eyebrow). Alle eigenen Klassen beginnen mit wx-. */

/* Seitenkopf-Foto */
.page-head.p-landschaft{--bg-img:url("../img/landschaft-weit.jpg"); --fade:38%;}
.page-head.p-landschaft::before{background-position:62% 40%;}

/* Farbstufen der Bewertung – erdig, passend zum Salbei */
.wx{
  --wx-good-bg:#dde6e0; --wx-good-tx:#3d5a49;
  --wx-warn-bg:#f0f0c6; --wx-warn-tx:#5c5a14;
  --wx-wet-bg:#dfe7ec;  --wx-wet-tx:#38596c;
  --wx-hot-bg:#f2e2db;  --wx-hot-tx:#94402f;
  --wx-neutral-bg:#ecebe5; --wx-neutral-tx:#626860;
  --wx-sun-bg:var(--yellow); --wx-sun-tx:var(--ink);
}

/* Flächen */
.wx-panel{background:var(--white); border-radius:var(--radius); padding:clamp(1.4rem,3.4vw,2.6rem);}
.wx-panel + .wx-panel{margin-top:clamp(1rem,2vw,1.5rem);}
.wx-panel-head{display:flex; justify-content:space-between; align-items:baseline; gap:1rem; flex-wrap:wrap; margin-bottom:1.4rem;}
.wx-panel-head h2{font-size:clamp(1.4rem,2.4vw,1.9rem);}
.wx-block + .wx-block{margin-top:1.8rem; padding-top:1.8rem; border-top:1px solid var(--line);}
.wx-label,.wx-flabel{display:block; font-size:.75rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--sage-deep); margin-bottom:.8rem;}
.wx-flabel{margin-bottom:.5rem;}
.wx-hint{font-size:.9rem; color:var(--ink-soft); margin:.8rem 0 0; max-width:78ch;}
.wx-muted{color:var(--ink-soft); opacity:.7;}
.wx-error{color:var(--wx-hot-tx); font-weight:500; font-size:.9rem;}

/* Eingaben */
.wx input[type=text],.wx input[type=number],.wx select{
  font:inherit; font-size:.98rem; color:var(--ink); background:var(--white);
  border:1px solid rgba(28,33,27,.28); border-radius:var(--radius); padding:.7rem .85rem; min-height:46px;
}
.wx select{padding-right:2rem;}
.wx input:focus-visible,.wx select:focus-visible{outline:2px solid var(--ink); outline-offset:1px; border-color:var(--ink);}
.wx button{font:inherit; cursor:pointer;}
.wx-search{display:flex; gap:.6rem; flex-wrap:wrap;}
.wx-search input{flex:1 1 320px; min-width:0;}
.wx .btn{border:0;}
.wx .btn.wx-btn-sm{padding:.6rem 1.15rem; font-size:.94rem;}
.wx-btn-ghost{background:transparent; border:1px solid rgba(28,33,27,.28); color:var(--ink); border-radius:999px; padding:.55rem 1.1rem; font-size:.94rem; font-weight:500; transition:border-color .2s, background .2s;}
.wx-btn-ghost:hover{border-color:var(--ink); background:var(--sage-pale);}
.wx-textbtn{background:none; border:0; padding:.2rem 0; margin-right:1.2rem; font-size:.9rem; font-weight:500; color:var(--ink); border-bottom:2px solid var(--yellow);}
.wx-textbtn:hover{border-color:var(--ink);}
.wx-textbtn.is-danger{border-color:var(--wx-hot-bg); color:var(--wx-hot-tx);}
.wx-textbtn.is-danger:hover{border-color:var(--wx-hot-tx);}

#wxStatus{font-size:.92rem; color:var(--ink-soft); margin-top:.8rem; min-height:1px;}
#wxStatus:empty{margin:0;}
#wxStatus.is-err{color:var(--wx-hot-tx); font-weight:500;}

/* Treffer & Bestätigung */
.wx-candidates{display:grid; gap:.5rem; margin-top:1rem;}
.wx-candidate{text-align:left; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:.8rem 1rem; color:var(--ink); transition:border-color .2s, background .2s;}
.wx-candidate:hover{border-color:var(--ink); background:var(--white);}
.wx-candidate span{font-weight:500;}
.wx-candidate small{display:block; color:var(--ink-soft); font-size:.85rem; margin-top:.15rem;}
.wx-confirm{margin-top:1rem; background:var(--sage-pale); border-left:3px solid var(--yellow); border-radius:0 var(--radius) var(--radius) 0; padding:1.2rem 1.3rem;}
.wx-confirm-top{display:flex; gap:.8rem; flex-wrap:wrap; align-items:center; margin-bottom:.8rem;}
.wx-confirm-top input{flex:1 1 240px;}
.wx-coords{font-size:.88rem; color:var(--ink-soft);}
.wx-acts{display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1.1rem;}

/* Projekte & Orte */
.wx-two{display:grid; grid-template-columns:1fr 1.4fr; gap:clamp(1.5rem,4vw,3.5rem);}
.wx-pills{display:flex; flex-wrap:wrap; gap:.5rem;}
.wx-pill{background:var(--white); border:1px solid rgba(28,33,27,.28); color:var(--ink); border-radius:999px; padding:.5rem 1.05rem; font-size:.94rem; font-weight:500; transition:background .2s, border-color .2s, color .2s;}
.wx-pill:hover{border-color:var(--ink);}
.wx-pill.is-active{background:var(--ink); border-color:var(--ink); color:var(--white);}
.wx-pill-add{border-style:dashed; color:var(--sage-deep);}
#wxProjCtrls{margin-top:.9rem; min-height:1.6rem;}
.wx-editrow{display:flex; gap:.5rem; flex-wrap:wrap; align-items:center;}
.wx-editrow input{flex:1 1 200px;}
.wx-locs{display:flex; flex-wrap:wrap; gap:.5rem;}
.wx-loc{display:flex; align-items:center; gap:.9rem; background:var(--sage-pale); border-radius:999px; padding:.45rem .5rem .45rem 1.1rem; font-size:.94rem;}
.wx-loc-name{font-weight:500; line-height:1.3;}
.wx-loc-sub{font-size:.78rem; color:var(--ink-soft); line-height:1.3;}
.wx-loc a{font-size:.85rem; font-weight:500; text-decoration:none; border-bottom:2px solid var(--yellow); white-space:nowrap;}
.wx-loc a:hover{border-color:var(--ink);}
.wx-x{background:none; border:0; width:30px; height:30px; border-radius:50%; color:var(--ink-soft); font-size:.95rem; line-height:1; display:grid; place-items:center;}
.wx-x:hover{background:var(--white); color:var(--wx-hot-tx);}

/* Einstellungen */
.wx-settings{display:flex; flex-wrap:wrap; gap:1.4rem 2.2rem; align-items:flex-start;}
.wx-field{display:flex; flex-direction:column;}
.wx-field > label{display:block; font-size:.75rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--sage-deep); margin-bottom:.5rem;}
.wx-range{display:flex; align-items:center; gap:.45rem; font-size:.94rem; color:var(--ink-soft);}
.wx-range input[type=number]{width:4.4rem; text-align:center;}
.wx-toggles{display:flex; flex-wrap:wrap; gap:.45rem;}
.wx-toggle{display:inline-flex; align-items:center; gap:.45rem; background:var(--white); border:1px solid rgba(28,33,27,.28); border-radius:999px; padding:.45rem .95rem .45rem .75rem; font-size:.92rem; font-weight:500; cursor:pointer; user-select:none; transition:background .2s, border-color .2s, color .2s;}
.wx-toggle:hover{border-color:var(--ink);}
.wx-toggle input{width:15px; height:15px; margin:0; accent-color:var(--ink); cursor:pointer;}
.wx-toggle:has(input:checked){background:var(--ink); border-color:var(--ink); color:var(--white);}
.wx-toggle:has(input:checked) input{accent-color:var(--yellow);}
.wx-toggle:has(input:focus-visible){outline:2px solid var(--ink); outline-offset:2px;}
.wx-seg{display:flex; flex-wrap:wrap; gap:.45rem;}
.wx-seg button{background:var(--white); border:1px solid rgba(28,33,27,.28); border-radius:999px; padding:.5rem 1.05rem; font-size:.94rem; font-weight:500; color:var(--ink); transition:background .2s, border-color .2s;}
.wx-seg button:hover{border-color:var(--ink);}
.wx-seg button.is-active{background:var(--ink); border-color:var(--ink); color:var(--white);}
#wxModelRow{margin-top:1.4rem; padding:1.2rem 1.3rem; background:var(--sage-pale); border-radius:var(--radius);}
#wxModelRow[hidden]{display:none;}
#wxModelRow .wx-toggle{background:var(--white);}
#wxModelRow .wx-toggle:has(input:checked){background:var(--ink);}

/* Ergebnis: Kennzahl-Bänder */
.wx-note{font-size:.95rem; color:var(--ink-soft); margin:0 0 1.2rem; max-width:80ch;}
.wx-note strong{color:var(--ink); font-weight:600;}
.wx-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 calc(clamp(1.4rem,3.4vw,2.6rem) * -1); padding:0 clamp(1.4rem,3.4vw,2.6rem);}
.wx-scroll:focus-visible{outline:2px solid var(--ink); outline-offset:-2px;}
.wx-matrix{border-collapse:separate; border-spacing:3px; width:100%; table-layout:fixed; min-width:calc(170px + var(--wx-days,10) * 60px); font-size:.86rem;}
.wx-matrix .wx-src{position:sticky; left:0; z-index:2; width:170px; background:var(--white); text-align:left; vertical-align:middle; padding:0 .8rem 0 0; font-weight:400;}
.wx-matrix .wx-src .nm{display:block; font-weight:500; color:var(--ink); line-height:1.25; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.wx-matrix .wx-src .sub{display:block; font-size:.74rem; color:var(--ink-soft); line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.wx-corner span{font-size:.72rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--sage-deep);}
.wx-dh{font-weight:400; text-align:center; padding:.2rem 0 .5rem; line-height:1.25; vertical-align:bottom;}
.wx-dh .wd{display:block; font-size:.72rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--sage-deep);}
.wx-dh .dm{display:block; font-weight:500; color:var(--ink);}
.wx-dh.is-we .wd{color:var(--ink);}
.wx-dh.is-today .wd{color:var(--ink); background:var(--yellow); border-radius:999px; display:inline-block; padding:0 .45rem; letter-spacing:.06em;}
.wx-band .wx-bandhead th{padding:1.5rem 0 .45rem; text-align:left; font-weight:400; border-bottom:1px solid var(--line);}
.wx-band:first-of-type .wx-bandhead th{padding-top:.6rem;}
.wx-bh{position:sticky; left:0; display:flex; flex-wrap:wrap; align-items:baseline; gap:.2rem 1rem; max-width:min(100%, calc(100vw - 4rem));}
.wx-bt{font-size:1.05rem; font-weight:500; color:var(--ink);}
.wx-bs{font-size:.82rem; color:var(--ink-soft);}
.wx-bl{display:flex; flex-wrap:wrap; gap:.2rem .9rem; font-size:.76rem; color:var(--ink-soft); margin-left:auto;}
.wx-bl i{display:inline-block; width:.95rem; height:.75rem; border-radius:2px; margin-right:.3rem; vertical-align:-.08rem; border:1px solid rgba(28,33,27,.1);}
.wx-bl .wx-lgbar{width:1.6rem; height:.4rem; border-radius:3px; background:var(--sage-deep); border:0; vertical-align:.05rem;}
.wx-matrix td{padding:0; vertical-align:middle;}
.wx-t{min-height:2.6rem; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; border-radius:4px; font-weight:500; line-height:1.15; white-space:nowrap; padding:.3rem .2rem; font-variant-numeric:tabular-nums; cursor:default;}
.wx-t small{display:block; font-size:.68rem; font-weight:400; opacity:.8; margin-top:.1rem;}
.wx-t.is-empty{background:transparent; color:var(--ink-soft); opacity:.5;}
.wx-t.is-temp{background:#f6f6f2; color:var(--ink); align-items:stretch; padding:.35rem .45rem;}
.wx-t.is-temp > span:first-child,.wx-t.is-temp{text-align:center;}
.wx-sep{opacity:.35; margin:0 .15rem;}
.wx-frost{color:#2f6585; font-weight:600;}
.wx-heat{color:#9a3f2c; font-weight:600;}
.wx-tbar{display:block; position:relative; height:6px; margin-top:.35rem; background:rgba(28,33,27,.08); border-radius:3px;}
.wx-tbar i{position:absolute; top:0; bottom:0; background:var(--sage-deep); border-radius:3px; min-width:3px;}
.wx-tbar b{position:absolute; top:-2px; bottom:-2px; background:var(--ink); border-radius:2px; min-width:3px;}
.wx-rangerow .wx-t{box-shadow:inset 0 0 0 1px rgba(28,33,27,.55);}
.wx-rangerow .wx-t.is-split small{font-weight:600; opacity:1;}
.wx-tt{display:block; text-align:center; white-space:nowrap;}
.wx-rangerow .wx-t.is-empty{box-shadow:none;}
.wx-rangerow .wx-t.is-temp.is-range{background:var(--white);}
.wx-rangerow .wx-t.is-temp.is-range .wx-tbar i{background:var(--sage);}
.wx-rangerow .wx-src .nm{font-weight:600;}
.wx-rangerow + tr td, .wx-rangerow + tr th{padding-top:.35rem;}
.wx-swipe{display:none; text-align:center; font-size:.8rem; color:var(--ink-soft); margin:.6rem 0 0;}

.wx-empty{text-align:center; padding:clamp(2.2rem,6vw,3.5rem) 1.2rem; border:1px dashed rgba(28,33,27,.28); border-radius:var(--radius); color:var(--ink-soft);}
.wx-empty p{max-width:46ch; margin:0 auto 1.4rem;}

/* Hinweise unter dem Werkzeug */
.wx-hints{display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.8rem,4vw,3rem) clamp(1.5rem,4vw,3.5rem);}
.wx-models{margin-top:clamp(2.5rem,5vw,4rem);}

@media (max-width:860px){
  .wx-two{grid-template-columns:1fr;}
}
@media (max-width:760px){
  .wx-hints{grid-template-columns:1fr;}
  .wx-settings{gap:1.2rem 1.4rem;}
  .wx-matrix{min-width:calc(104px + var(--wx-days,10) * 58px);}
  .wx-matrix .wx-src{width:104px; padding-right:.5rem;}
  .wx-matrix .wx-src .nm{font-size:.82rem;}
  .wx-bl{margin-left:0; width:100%;}
  .wx-bh{max-width:calc(100vw - 3rem);}
  .wx-swipe{display:block;}
}

/* Kennzahlen nach Tag/Nacht gruppiert (30.10.2026) */
.wx-kgroups{display:grid; gap:.6rem;}
.wx-kg{display:flex; align-items:center; gap:.8rem; flex-wrap:wrap;}
.wx-kgl{width:3.6rem; font-size:.9rem; font-weight:500; color:var(--ink);}
.wx-presets{display:flex; flex-wrap:wrap; align-items:baseline; gap:.3rem 0; margin-top:1rem; font-size:.9rem; color:var(--ink-soft);}
.wx-presets span{margin-right:.8rem;}

/* Abschnitte Tag / Nacht in der Tabelle */
.wx-part th{padding:2.2rem 0 .2rem; text-align:left; font-weight:400;}
.wx-part:first-child th{padding-top:.4rem;}
.wx-ph{position:sticky; left:0; display:flex; align-items:baseline; gap:.4rem 1rem; flex-wrap:wrap; padding:.55rem .9rem; border-radius:var(--radius); max-width:min(100%, calc(100vw - 3rem));}
.wx-part-day .wx-ph{background:var(--sage-pale);}
.wx-part-night .wx-ph{background:var(--ink); color:var(--white);}
.wx-pt{font-size:1.25rem; font-weight:500;}
.wx-pw{font-size:.85rem; opacity:.75;}
.wx-band .wx-bandhead th{padding:1.2rem 0 .35rem;}
.wx-part + .wx-band .wx-bandhead th{padding-top:.8rem;}
.wx-daterow .wx-dh{padding:.15rem 0 .25rem;}
.wx-daterow .wx-dh .dm{font-size:.78rem; font-weight:400; color:var(--ink-soft);}
.wx-daterow .wx-dh .wd{font-size:.68rem;}
.wx-band-night .wx-daterow .wx-dh .wd{letter-spacing:.04em;}
.wx-band-night .wx-bt::before{content:"☾ "; color:var(--sage-deep);}
@media (max-width:760px){
  .wx-kgl{width:100%;}
}
.wx-matrix col.wx-col-src{width:170px;}
@media (max-width:760px){ .wx-matrix col.wx-col-src{width:104px;} }
@media (max-width:760px){ .wx-tt{font-size:.78rem;} .wx-t.is-temp{padding:.35rem .3rem;} .wx-sep{margin:0 .05rem;} }

/* Zeitfenster-Zeilen & Vorlagen (30.10.2026) */
.wx-presets{display:flex; flex-wrap:wrap; align-items:center; gap:.45rem; margin:0 0 1.3rem; font-size:.9rem; color:var(--ink-soft);}
.wx-presets > span{margin-right:.3rem;}
.wx-preset{background:var(--sage-pale); border:1px solid transparent; color:var(--ink); border-radius:999px; padding:.42rem .95rem; font-size:.9rem; font-weight:500; transition:background .2s, border-color .2s;}
.wx-preset small{font-weight:400; color:var(--ink-soft); margin-left:.25rem;}
.wx-preset:hover{border-color:var(--ink);}
.wx-preset.is-active{background:var(--yellow); border-color:var(--yellow);}
.wx-kgroups{gap:.9rem;}
.wx-kg{display:grid; grid-template-columns:4rem auto 1fr; align-items:center; gap:.6rem 1.2rem; padding:.9rem 1rem; background:var(--sage-pale); border-radius:var(--radius);}
.wx-kg + .wx-kg{background:#e6e9e5;}
.wx-kgl{width:auto; font-size:1rem; font-weight:600;}
@media (max-width:760px){
  .wx-kg{grid-template-columns:auto 1fr;}
  .wx-kg .wx-toggles{grid-column:1 / -1;}
}

/* Zeitfenster: Uhrzeit / Sonne / Dauer (30.10.2026) */
.wx-kg{grid-template-columns:4rem 1fr;}
.wx-kg .wx-toggles{grid-column:2;}
.wx-win{display:flex; flex-wrap:wrap; gap:.7rem 2rem; align-items:center;}
.wx-wpart{display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .6rem;}
.wx-wl{font-size:.72rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--sage-deep); min-width:3.6rem;}
.wx-seg2{display:inline-flex; border:1px solid rgba(28,33,27,.28); border-radius:999px; overflow:hidden; background:var(--white);}
.wx-seg2 button{background:transparent; border:0; border-left:1px solid rgba(28,33,27,.15); padding:.45rem .85rem; font-size:.88rem; font-weight:500; color:var(--ink); white-space:nowrap;}
.wx-seg2 button:first-child{border-left:0;}
.wx-seg2 button:hover{background:var(--sage-pale);}
.wx-seg2 button.is-active{background:var(--ink); color:var(--white);}
.wx-seg2 button:focus-visible{outline:2px solid var(--ink); outline-offset:-3px;}
.wx-range[hidden],.wx-stepper[hidden]{display:none;}
.wx-stepper{display:inline-flex; align-items:center; border:1px solid rgba(28,33,27,.28); border-radius:var(--radius); background:var(--white); overflow:hidden;}
.wx-stepper button{background:transparent; border:0; width:2.4rem; height:44px; font-size:1.1rem; color:var(--ink);}
.wx-stepper button:hover{background:var(--sage-pale);}
.wx .wx-stepper input[type=number]{width:2.8rem; border:0; text-align:center; padding:.6rem 0; min-height:0; -moz-appearance:textfield;}
.wx-stepper input::-webkit-inner-spin-button,.wx-stepper input::-webkit-outer-spin-button{-webkit-appearance:none; margin:0;}
.wx-stepper span{font-size:.9rem; color:var(--ink-soft); padding-right:.3rem;}
.wx-daterow .wx-dh .wh{display:block; font-size:.68rem; color:var(--sage-deep); margin-top:.05rem; white-space:nowrap;}
@media (max-width:760px){
  .wx-kg{grid-template-columns:1fr;}
  .wx-kg .wx-toggles{grid-column:1;}
  .wx-wl{min-width:0; width:100%;}
  .wx-seg2 button{padding:.45rem .65rem; font-size:.84rem;}
}


/* Umschalter Wettervorhersage / Artenwetter (wird auch von artenwetter.html genutzt) */
.wx-switch{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem; margin-bottom:clamp(1rem,2vw,1.4rem);}
.wx-sw{display:flex; flex-direction:column; gap:.25rem; padding:.9rem 1.1rem 1rem; border:1.5px solid var(--line); border-radius:var(--radius); background:var(--white); color:var(--ink); text-decoration:none; transition:border-color .15s, background .15s;}
.wx-sw:hover{border-color:var(--sage-deep);}
.wx-sw:focus-visible{outline:2px solid var(--ink); outline-offset:2px;}
.wx-sw-t{font-weight:600; font-size:1.1rem; display:flex; align-items:center; gap:.5rem;}
.wx-sw:not(.is-on) .wx-sw-t::after{content:"→"; font-weight:400; transition:transform .15s;}
.wx-sw:not(.is-on):hover .wx-sw-t::after{transform:translateX(3px);}
.wx-sw-s{font-size:.86rem; line-height:1.4; color:var(--ink-soft);}
.wx-sw.is-on{background:var(--ink); border-color:var(--ink); color:var(--white); cursor:default;}
.wx-sw.is-on .wx-sw-s{color:rgba(255,255,255,.75);}
@media (max-width:560px){
  .wx-switch{gap:.5rem;}
  .wx-sw{padding:.7rem .8rem .8rem;}
  .wx-sw-t{font-size:1rem;}
  .wx-sw-s{font-size:.78rem;}
}