:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;color:#162d47;background:#f3f7fb}*{box-sizing:border-box}body{margin:0}.shell{max-width:1450px;margin:auto;padding:34px 34px 24px}header{display:flex;justify-content:space-between;align-items:center;gap:20px}h1{font-size:clamp(27px,3vw,39px);letter-spacing:-1.5px;margin:7px 0}h1 span{color:#2a8bbf}header p{color:#6b7d91;margin:0}.eyebrow{font-size:11px;letter-spacing:2px;color:#7691aa;font-weight:800}.status{background:#fff;border:1px solid #e5edf5;border-radius:99px;padding:11px 16px;color:#64798d;font-size:13px;white-space:nowrap}.dot{display:inline-block;background:#d1a744;width:9px;height:9px;border-radius:50%;margin-right:8px}.dot.ok{background:#32a978}.dot.bad{background:#d45858}nav{display:flex;gap:28px;border-bottom:1px solid #dfe8f1;margin:28px 0 25px;font-size:14px;color:#255c86;font-weight:650}nav span{padding:0 0 13px}.active{border-bottom:3px solid #2b8ec0}.muted{color:#9aacbc}.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.card{background:white;border:1px solid #e7eef5;border-radius:17px;padding:20px 22px 13px;box-shadow:0 5px 22px #17395409;min-width:0}.card-head{display:flex;justify-content:space-between;align-items:center;color:#617c94;font-size:13px;font-weight:700}.symbol{font-size:22px}.value{font-size:34px;font-weight:750;letter-spacing:-1.2px;margin:14px 0 0;white-space:nowrap}.unit{font-size:16px;color:#8093a6;font-weight:500}.sub{font-size:12px;color:#8798a9;height:19px;margin-top:4px}.chart{height:86px;width:100%;margin-top:5px}.astro{background:linear-gradient(110deg,#173b61,#2e7096);border-radius:17px;color:white;padding:22px 27px;margin-top:19px;display:flex;align-items:center;justify-content:space-between}.astro h2{margin:7px 0}.astro p{color:#c7dbe9;margin:0;font-size:13px}.astro>span{font-size:45px;color:#f6d99d}footer{font-size:12px;color:#91a2b3;margin-top:22px;text-align:center}@media(max-width:1000px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:600px){.shell{padding:20px 15px}header{align-items:flex-start;flex-direction:column}.cards{grid-template-columns:1fr}.status{font-size:12px}.value{font-size:31px}.astro>span{display:none}}


/* V003: PC-Kiosk, Referenz 2560 x 1600, ohne vertikales Scrollen. */
@media (min-width: 1100px) and (min-height: 750px) {
  html, body { min-height: 100%; }
  .shell { max-width: none; width: 100%; height: 100vh; height: 100dvh;
           padding: clamp(20px, 1.45vh, 30px) clamp(26px, 1.55vw, 44px) 14px;
           display: flex; flex-direction: column; }
  header { flex: 0 0 auto; }
  h1 { font-size: clamp(33px, 1.9vw, 50px); margin: 5px 0; }
  nav { flex: 0 0 auto; margin: clamp(14px, 1.6vh, 25px) 0 clamp(12px, 1.4vh, 23px); }
  main { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  .cards { flex: 1 1 auto; min-height: 0; grid-template-rows: repeat(3, minmax(0, 1fr));
           gap: clamp(13px, 1.1vh, 19px); }
  .card { display: flex; flex-direction: column; min-height: 0;
          padding: clamp(15px, 1.2vh, 23px) clamp(18px, 1.3vw, 34px) 12px; }
  .card-head { font-size: clamp(14px, .8vw, 19px); }
  .value { font-size: clamp(35px, 2vw, 51px); margin-top: clamp(6px, .9vh, 15px); }
  .unit { font-size: clamp(16px, 1vw, 23px); }
  .sub { font-size: clamp(12px, .7vw, 17px); flex: 0 0 auto; }
  .chart { flex: 1 1 auto; min-height: 55px; height: auto; margin-top: 7px; }
  .astro { flex: 0 0 auto; margin-top: clamp(12px, 1.2vh, 20px);
           padding: clamp(15px, 1.35vh, 23px) clamp(23px, 1.5vw, 38px); }
  footer { flex: 0 0 auto; margin-top: 12px; }
}

/* V004: Nur Temperaturkarte (Karte 1). */
.card-temperature .temp-heading { display:flex; align-items:center; gap:10px; min-width:0; min-height:31px; }
.card-temperature .temp-icon { font-size:30px; line-height:1; flex:0 0 auto; }
.card-temperature .temp-title { color:#526d84; font-size:inherit; font-weight:750; white-space:nowrap; }
.card-temperature .temp-feels { margin-left:auto; color:#344b60; font-size:clamp(11px,.69vw,16px); font-weight:600; text-align:right; white-space:nowrap; }
.card-temperature .value { margin-top:5px; }
.card-temperature .chart { margin-top:3px; }
@media (max-width: 1600px) { .card-temperature .temp-heading { flex-wrap:wrap; gap:5px 9px; } .card-temperature .temp-feels { margin-left:0; white-space:normal; text-align:left; } }
@media (max-width: 600px) { .card-temperature .temp-feels { flex-basis:100%; } }


/* V005: Thermometer ueber beide Kopfzeilen, Titel und Messwert linksbuendig. */
.card-temperature .temp-header { display:grid; grid-template-columns: 44px minmax(0,1fr); grid-template-rows:auto auto; column-gap:14px; align-items:center; flex:0 0 auto; }
.card-temperature .temp-icon { grid-column:1; grid-row:1 / 3; font-size:46px; line-height:1; align-self:center; justify-self:center; }
.card-temperature .temp-heading { grid-column:2; grid-row:1; display:flex; align-items:baseline; flex-wrap:nowrap; min-height:0; gap:8px; }
.card-temperature .temp-title { flex:0 0 auto; }
.card-temperature .temp-feels { margin-left:auto; flex:0 1 auto; }
.card-temperature .value { grid-column:2; grid-row:2; margin:0; line-height:1.1; }
.card-temperature .chart { margin-top:4px; }
@media (max-width:1600px) { .card-temperature .temp-heading { flex-wrap:wrap; } .card-temperature .temp-feels { margin-left:auto; text-align:right; } }
@media (max-width:600px) { .card-temperature .temp-header { grid-template-columns:36px minmax(0,1fr); column-gap:10px; } .card-temperature .temp-icon { font-size:38px; } }

/* V006: Temperaturkopf nach oben, Diagramm vertikal vergroessert. */
.card-temperature { padding-top: clamp(8px, .7vh, 14px); padding-bottom: 6px; }
.card-temperature .temp-header { grid-template-rows: min-content min-content; align-content:start; row-gap:0; }
.card-temperature .temp-heading { padding:0; margin:0; line-height:1.05; }
.card-temperature .value { line-height:1.04; }
.card-temperature .chart { margin-top:0; }

/* V007: Gefuehlte Temperatur, zwei Werte und gemeinsame Diagrammachsen. */
.card-feels { padding-top:clamp(8px,.7vh,14px); padding-bottom:6px; }
.card-feels .feels-header { display:grid; grid-template-columns:44px minmax(0,1fr) minmax(0,1fr); align-items:center; column-gap:14px; flex:0 0 auto; }
.card-feels .feels-icon { font-size:46px; line-height:1; justify-self:center; align-self:center; }
.card-feels .feels-column { min-width:0; display:flex; flex-direction:column; justify-content:center; gap:0; }
.card-feels .feels-title { color:#526d84; font-size:inherit; font-weight:750; white-space:nowrap; line-height:1.05; }
.card-feels .value { margin:0; line-height:1.04; }
.card-feels .chart { margin-top:0; }
@media (max-width:600px) { .card-feels .feels-header { grid-template-columns:36px minmax(0,1fr) minmax(0,1fr); column-gap:9px; } .card-feels .feels-icon { font-size:38px; } .card-feels .feels-title { font-size:12px; } .card-feels .value { font-size:25px; } .card-feels .unit { font-size:13px; } }

/* V008: Kurvenfarben als eindeutige Zuordnung von Symbol und Titel. */
.card-feels .feels-header { grid-template-columns:44px minmax(0,1fr) 44px minmax(0,1fr); }
.card-feels .feels-icon-sun, .card-feels .feels-title-sun { color:#D97732; }
.card-feels .feels-icon-shade, .card-feels .feels-title-shade { color:#4785AE; }
@media (max-width:600px) { .card-feels .feels-header { grid-template-columns:30px minmax(0,1fr) 30px minmax(0,1fr); column-gap:6px; } .card-feels .feels-icon { font-size:29px; } .card-feels .feels-title { font-size:11px; } }

/* V009: Einfarbiges Thermometer in Temperatur-Kurvenfarbe. */
.card-temperature .temp-icon { color:#D97732; display:flex; align-items:center; justify-content:center; }
.card-temperature .temp-icon svg { display:block; width:46px; height:46px; }
@media (max-width:600px) { .card-temperature .temp-icon svg { width:38px; height:38px; } }

/* V012: Karte 3 - Luftfeuchtigkeit und Taupunkt, zwei Y-Achsen. */
.card-humidity { padding-top:clamp(8px,.7vh,14px); padding-bottom:6px; }
.card-humidity .humidity-header { display:grid; grid-template-columns:44px minmax(0,1fr) 44px minmax(0,1fr); align-items:center; column-gap:14px; flex:0 0 auto; }
.card-humidity .humidity-icon { font-size:43px; line-height:1; justify-self:center; align-self:center; }
.card-humidity .humidity-icon-rh, .card-humidity .humidity-title-rh { color:#369DC2; }
.card-humidity .humidity-icon-dew, .card-humidity .humidity-title-dew { color:#A47AB5; }
.card-humidity .humidity-column { min-width:0; display:flex; flex-direction:column; justify-content:center; gap:0; }
.card-humidity .humidity-title { font-size:inherit; font-weight:750; white-space:nowrap; line-height:1.05; }
.card-humidity .value { margin:0; line-height:1.04; }
.card-humidity .chart { margin-top:0; }
@media (max-width:600px) { .card-humidity .humidity-header { grid-template-columns:30px minmax(0,1fr) 30px minmax(0,1fr); column-gap:6px; } .card-humidity .humidity-icon { font-size:29px; } .card-humidity .humidity-title { font-size:11px; } .card-humidity .value { font-size:25px; } .card-humidity .unit { font-size:13px; } }

/* V014: Karte 4 – 10-Minuten-Windmittel, Boee und Windrichtung. */
.card-wind { padding-top:clamp(8px,.7vh,14px); padding-bottom:6px; }
.card-wind .wind-header { display:grid; grid-template-columns:44px minmax(0,1fr) 44px minmax(0,1fr) 64px; align-items:center; column-gap:12px; flex:0 0 auto; }
.card-wind .wind-icon { font-size:42px; line-height:1; justify-self:center; align-self:center; font-weight:700; }
.card-wind .wind-icon-mean,.card-wind .wind-title-mean { color:#398B82; }
.card-wind .wind-icon-gust,.card-wind .wind-title-gust { color:#3474C7; }
.card-wind .wind-column { min-width:0; display:flex; flex-direction:column; justify-content:center; }
.card-wind .wind-title { font-size:inherit; font-weight:750; white-space:nowrap; line-height:1.05; }
.card-wind .value { margin:0; line-height:1.04; }
.card-wind .chart { margin-top:0; }
.card-wind .wind-direction { display:flex; flex-direction:column; align-items:center; justify-content:center; color:#398B82; font-size:13px; font-weight:750; min-width:0; }
.card-wind .wind-direction svg { width:35px; height:35px; transform-origin:center; }
@media(max-width:1500px) { .card-wind .wind-header { grid-template-columns:30px minmax(0,1fr) 30px minmax(0,1fr) 45px; column-gap:7px; } .card-wind .wind-icon { font-size:30px; } .card-wind .wind-title { font-size:clamp(10px,.9vw,15px); } .card-wind .wind-direction svg { width:28px;height:28px; } }
@media(max-width:600px) { .card-wind .wind-header { grid-template-columns:22px minmax(0,1fr) 22px minmax(0,1fr) 34px; column-gap:4px; } .card-wind .wind-icon { font-size:23px; } .card-wind .wind-title { font-size:10px; } .card-wind .value { font-size:22px; } .card-wind .unit { font-size:11px; } .card-wind .wind-direction { font-size:10px; } }

/* V038: standalone, title-free astronomy strip. */
.astro.astro-v038 {display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;background:#fff;color:#162d47;border:1px solid #e7eef5;box-shadow:0 5px 22px #17395409;padding:15px 12px;align-items:center;}
.astro-v038 .astro-item {display:flex;align-items:center;justify-content:center;gap:15px;min-width:0;padding:3px 12px;}
.astro-v038 .astro-divider {border-left:1px solid #e2eaf2;}
.astro-v038 .astro-symbol {font-size:43px;line-height:1;flex:0 0 52px;text-align:center;}
.astro-v038 .astro-sun {color:#f59b13;}
.astro-v038 .astro-moon {color:#416581;}
.astro-v038 .astro-label {color:#667f96;font-size:clamp(12px,.85vw,17px);white-space:nowrap;}
.astro-v038 .astro-time {font-size:clamp(22px,1.45vw,32px);font-weight:750;white-space:nowrap;line-height:1.2;margin-top:5px;}
.astro-v038 .astro-day {font-size:.62em;font-weight:500;color:#52687c;margin-left:5px;}
.astro-v038 .astro-trend {color:#667f96;font-size:14px;margin-top:3px;}
.astro-v038 .astro-phase-icon {font-size:54px;line-height:1;flex:0 0 58px;text-align:center;color:#416581;}
@media(max-width:1100px){.astro.astro-v038{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:12px}.astro-v038 .astro-divider{border:0}}
@media(max-width:600px){.astro.astro-v038{grid-template-columns:repeat(2,minmax(0,1fr));padding:14px 8px}.astro-v038 .astro-item{justify-content:flex-start;padding:8px 4px;gap:7px}.astro-v038 .astro-symbol{font-size:31px;flex-basis:34px}.astro-v038 .astro-phase-icon{font-size:36px;flex-basis:38px}.astro-v038 .astro-label{font-size:12px}.astro-v038 .astro-time{font-size:22px}}

/* V038 test: Tramuntana horizon icons and horizon-based sun duration. */
.astro.astro-v038{grid-template-columns:minmax(0,1.12fr) minmax(100px,.72fr) minmax(0,1.12fr) minmax(0,1.12fr) minmax(0,1.12fr) minmax(0,1.28fr);}
.astro-v038 .astro-mountain-icon{display:block;width:55px;height:55px;flex:0 0 55px;}
.astro-v038 .astro-daylength{text-align:center;min-width:0;padding:3px 4px;}
.astro-v038 .astro-duration-line{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:5px;white-space:nowrap;color:#b98024;}
.astro-v038 .astro-duration-line strong{font-size:clamp(19px,1.25vw,26px);font-weight:750;color:#162d47;font-variant-numeric:tabular-nums;}
.astro-v038 .astro-duration-line span{font-size:20px;}
@media(max-width:1100px){.astro.astro-v038{grid-template-columns:repeat(3,minmax(0,1fr));}.astro-v038 .astro-daylength{align-self:center;}}
@media(max-width:600px){.astro.astro-v038{grid-template-columns:repeat(2,minmax(0,1fr));}.astro-v038 .astro-mountain-icon{width:36px;height:36px;flex-basis:36px;}.astro-v038 .astro-daylength{padding:8px 4px;}.astro-v038 .astro-duration-line strong{font-size:20px;}}

/* V038: calendar/clock at the right of the astronomy strip. */
.astro.astro-v038{grid-template-columns:minmax(0,1.12fr) minmax(94px,.7fr) minmax(0,1.12fr) minmax(0,1.05fr) minmax(0,1.05fr) minmax(0,1.22fr) minmax(0,1.12fr)}
.astro-v038 .astro-duration-line{margin-top:0;gap:9px}
.astro-v038 .astro-duration-line span{font-size:28px;font-weight:900;color:#b98024;line-height:1}
.astro-v038 .astro-calendar-item{min-width:0;padding:3px 12px;position:relative;display:flex;flex-direction:column;justify-content:center;gap:8px}
.astro-v038 .astro-calendar-line,.astro-v038 .astro-clock-line{display:flex;align-items:center;gap:9px;white-space:nowrap}
.astro-v038 .astro-calendar-button{display:inline-flex;align-items:center;justify-content:center;border:0;background:transparent;color:#52687c;padding:3px;cursor:pointer;border-radius:5px}
.astro-v038 .astro-calendar-button:hover,.astro-v038 .astro-calendar-button:focus-visible{background:#edf4fa;color:#162d47}
.astro-v038 .astro-display-date{font-size:clamp(12px,.95vw,17px);font-weight:650;color:#162d47}
.astro-v038 .astro-clock-line{color:#52687c;padding-left:4px}
.astro-v038 #astro-clock{font-size:clamp(20px,1.35vw,29px);font-weight:750;color:#162d47;font-variant-numeric:tabular-nums}
.astro-v038 .astro-today{align-self:flex-start;border:0;background:transparent;padding:0 0 0 5px;color:#3474c7;cursor:pointer;font-size:12px}
.astro-v038 .astro-today[hidden]{display:none}
.astro-v038 .astro-date-picker{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;bottom:0;left:22px}
@media(max-width:1300px){.astro.astro-v038{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:12px}.astro-v038 .astro-divider{border-left:0}}
@media(max-width:600px){.astro.astro-v038{grid-template-columns:repeat(2,minmax(0,1fr))}.astro-v038 .astro-calendar-item{padding:8px 4px}.astro-v038 .astro-display-date{font-size:13px}}

/* V039: Astro controls; all weather cards remain unchanged. */
.astro.astro-v039{grid-template-columns:46px minmax(0,1.12fr) minmax(82px,.67fr) minmax(0,1.12fr) minmax(0,1.04fr) minmax(0,1.04fr) minmax(0,1.22fr) minmax(0,1.2fr);padding-left:12px;padding-right:16px}
.astro-v039 .astro-sites{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;align-self:stretch;border-right:1px solid #e2eaf2}
.astro-v039 .astro-sites button{border:0;background:transparent;color:#8b9dad;font-weight:700;font-size:12px;letter-spacing:.5px;cursor:pointer;padding:3px 7px;border-radius:5px}
.astro-v039 .astro-sites button.active{color:#236d9e;background:#eaf4fb}
.astro-v039 .astro-sites button:hover,.astro-v039 .astro-sites button:focus-visible{background:#eaf4fb}
.astro-v039 .astro-horizon-button{border:0;background:transparent;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;border-radius:6px;flex:0 0 55px}
.astro-v039 .astro-horizon-button:hover,.astro-v039 .astro-horizon-button:focus-visible{background:#edf4fa}
.astro-v039.astro-flat .astro-mountain-icon > path{fill:transparent;stroke:#577084;stroke-dasharray:4 3;d:path('M3 45 L62 45')}
.astro-v039 .astro-calendar-item{align-items:flex-end;text-align:right}
.astro-v039 .astro-calendar-line,.astro-v039 .astro-clock-line{justify-content:flex-end}
.astro-v039 .astro-today{align-self:flex-end}
@media(max-width:1500px){.astro.astro-v039{grid-template-columns:46px repeat(3,minmax(0,1fr));row-gap:10px}.astro-v039 .astro-sites{grid-row:1/3}.astro-v039 .astro-calendar-item{align-items:flex-start}}
@media(max-width:600px){.astro.astro-v039{grid-template-columns:38px repeat(2,minmax(0,1fr))}.astro-v039 .astro-sites{grid-row:1/5}.astro-v039 .astro-horizon-button{flex-basis:36px}.astro-v039 .astro-calendar-item{align-items:flex-start}}


/* V039 Layout-Fix1: Trennung Sonne / Mond / Datum und Datum ganz rechts. */
@media (min-width: 1101px) {
 .astro.astro-v039 {
   grid-template-columns:46px minmax(0,1.12fr) minmax(82px,.67fr) minmax(0,1.12fr) minmax(0,1.04fr) minmax(0,1.04fr) minmax(0,1.22fr) minmax(170px,1.2fr);
   column-gap:0;
 }
 .astro-v039 .astro-item {padding-left:9px;padding-right:9px;gap:9px;}
 .astro-v039 .astro-item.astro-divider:not(.astro-phase-item) {border-left:1px solid #d7e2eb;}
 .astro-v039 .astro-phase-item {border-left:0;}
 .astro-v039 .astro-calendar-item {
   border-left:1px solid #d7e2eb;
   justify-self:stretch;
   align-items:flex-end;
   text-align:right;
   padding-right:0;
 }
 .astro-v039 .astro-calendar-line,.astro-v039 .astro-clock-line {width:100%;justify-content:flex-end;}
 .astro-v039 .astro-today {align-self:flex-end;}
}
@media (min-width: 1101px) and (max-width: 1500px) {
 .astro.astro-v039 {grid-template-columns:46px minmax(0,1.12fr) minmax(82px,.67fr) minmax(0,1.12fr) minmax(0,1.04fr) minmax(0,1.04fr) minmax(0,1.22fr) minmax(170px,1.2fr);row-gap:0;}
 .astro-v039 .astro-sites {grid-row:auto;}
 .astro-v039 .astro-calendar-item {align-items:flex-end;}
}

/* V039 Layout-Fix2: Symbole rechts der Werte, Mondgruppe etwas weiter rechts. */
@media (min-width: 1101px) {
  .astro.astro-v039 {
    grid-template-columns:46px minmax(0,1.12fr) minmax(82px,.67fr) minmax(0,1.25fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.18fr) minmax(170px,1.2fr);
  }
  .astro-v039 .astro-calendar-line,
  .astro-v039 .astro-clock-line {
    flex-direction:row-reverse;
    justify-content:flex-start;
  }
  .astro-v039 .astro-calendar-item {padding-right:0;}
  .astro-v039 .astro-item:nth-child(5) {padding-left:18px;}
}
@media (min-width: 1101px) and (max-width: 1500px) {
  .astro.astro-v039 {
    grid-template-columns:46px minmax(0,1.12fr) minmax(82px,.67fr) minmax(0,1.25fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.18fr) minmax(170px,1.2fr);
  }
}

/* V039 Layout-Fix3: Kalender um ca. 80 px schmaler, Platz fuer Sonne/Mond. */
@media (min-width:1101px) {
  .astro.astro-v039 {
    grid-template-columns:46px minmax(0,1.12fr) minmax(82px,.67fr) minmax(0,1.25fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.18fr) 245px;
  }
  .astro-v039 .astro-calendar-item {min-width:0;padding-left:10px;padding-right:0;}
}