*{box-sizing:border-box}.climate-main{width:min(1180px,calc(100% - 32px));margin:auto;color:#17202a;font:16px Arial,sans-serif}.climate-main>section:first-child{padding:34px 0 22px}.climate-main .card{background:#fff;border:1px solid #d9e0e5;border-radius:18px;padding:24px;margin-bottom:18px}.climate-main .bar{display:flex;justify-content:space-between;align-items:end;gap:20px}.climate-main h1{font-size:42px}.climate-main h2{margin:4px 0}#map{height:500px;margin-top:18px;background:#fafcfd;border-radius:14px;display:flex;align-items:center;justify-content:center;overflow:hidden}#map svg{width:100%;height:100%}.country{fill:#fff;stroke:#77838c;stroke-width:.7;cursor:pointer}.country:hover,.country.selected{fill:#cfe7f1;stroke:#188fc1}.port{fill:#188fc1;stroke:#fff;stroke-width:1.5;cursor:pointer}#countries{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}.climate-main button,.climate-main #countries span,.climate-main select{border:1px solid #d9e0e5;background:#fff;border-radius:10px;padding:9px;cursor:pointer}.climate-main label{display:grid;gap:5px;min-width:260px}#months{margin-top:0}.month{min-height:150px;text-align:left}.month b{display:block;margin-bottom:10px}.temp{font-size:23px;font-weight:bold}.mini{font-size:13px;color:#65727e;margin-top:7px;line-height:1.5}#detail{margin-top:15px;background:#eef5f8;border-radius:12px;padding:16px}#detail:empty{display:none}@media(max-width:800px){#map{height:400px}.climate-main .climate-main .bar{align-items:stretch;flex-direction:column}.climate-main label{width:100%}}
.country.unavailable{fill:#fafafa;cursor:default}.country.unavailable:hover{fill:#fafafa}

.port-label{
  font-size:11px;
  font-weight:700;
  fill:#17202a;
  stroke:#ffffff;
  stroke-width:3px;
  paint-order:stroke fill;
  stroke-linejoin:round;
  pointer-events:auto;
  cursor:pointer;
  user-select:none;
}
.port-label:hover{
  fill:#188fc1;
}


/* Karten-Zoom */
#map{position:relative}
#map svg{touch-action:none;cursor:grab}
#map svg:active{cursor:grabbing}
.map-zoom-controls{
  position:absolute;
  top:12px;
  left:12px;
  z-index:20;
  display:flex;
  gap:6px;
  padding:5px;
  border:1px solid #d9e0e5;
  border-radius:10px;
  background:rgba(255,255,255,.94);
  box-shadow:0 2px 8px rgba(23,32,42,.08);
}
.map-zoom-controls button{
  min-width:34px;
  height:34px;
  padding:0 9px;
  border:1px solid #d9e0e5;
  border-radius:8px;
  background:#fff;
  color:#17202a;
  font-weight:700;
}
.map-zoom-controls button[data-z="reset"]{
  min-width:auto;
  font-size:12px;
  font-weight:600;
  padding:0 10px;
}


/* Klimakachel-Endloskarussell v0.1.9 */
.climate-carousel{
  display:grid;
  grid-template-columns:58px minmax(0,1fr) 58px;
  gap:12px;
  align-items:stretch;
  margin-top:20px;
}
.carousel-viewport{
  min-width:0;
  overflow:hidden;
}
.months-stage{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  width:100%;
}
.carousel-month{
  width:100%;
  min-width:0;
  min-height:150px;
}
.carousel-side{
  align-self:stretch;
  border:1px solid #d9e0e5;
  border-radius:14px;
  background:#fff;
  color:#188fc1;
  font-size:44px;
  font-weight:400;
  line-height:1;
  padding:0;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:.15s ease;
}
.carousel-side:hover{
  border-color:#188fc1;
  background:#f1f8fb;
  transform:translateY(-1px);
}
.carousel-side:active{
  transform:translateY(0);
}
.carousel-shift-left{
  animation:carouselShiftLeft .18s ease;
}
.carousel-shift-right{
  animation:carouselShiftRight .18s ease;
}
@keyframes carouselShiftLeft{
  from{opacity:.55;transform:translateX(16px)}
  to{opacity:1;transform:translateX(0)}
}
@keyframes carouselShiftRight{
  from{opacity:.55;transform:translateX(-16px)}
  to{opacity:1;transform:translateX(0)}
}

@media(max-width:1050px){
  .months-stage{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:760px){
  .climate-carousel{grid-template-columns:46px minmax(0,1fr) 46px;gap:8px}
  .months-stage{grid-template-columns:repeat(2,minmax(0,1fr))}
  .carousel-side{font-size:36px}
}
@media(max-width:520px){
  .climate-carousel{grid-template-columns:40px minmax(0,1fr) 40px;gap:6px}
  .months-stage{grid-template-columns:1fr}
  .carousel-side{font-size:32px}
}


/* v0.2.0 – vollständige Klimadaten direkt in den Monatskacheln */
.kind-row{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:18px;
}
.climate-spinner{
  width:17px;
  height:17px;
  border:3px solid #dce3e8;
  border-top-color:#e86468;
  border-radius:50%;
  animation:climateSpin .75s linear infinite;
  flex:0 0 auto;
}
@keyframes climateSpin{
  to{transform:rotate(360deg)}
}

.carousel-month{
  min-height:300px;
  padding:15px;
  cursor:default;
  background:#fff;
}
.carousel-month:hover{
  border-color:#d9e0e5;
}
.month-name{
  display:block;
  margin-bottom:8px;
}
.month-values{
  display:grid;
  gap:0;
  margin-top:13px;
  border-top:1px solid #edf0f2;
}
.month-values>div{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:10px;
  padding:6px 0;
  border-bottom:1px solid #edf0f2;
}
.month-values span{
  color:#65727e;
  font-size:12px;
}
.month-values strong{
  text-align:right;
  font-size:12px;
  white-space:nowrap;
}

.month-values span{display:inline-flex;align-items:center;gap:6px}
.metric-icon{width:15px;height:15px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 15px;color:#6d7882}
.metric-icon svg{width:15px;height:15px;display:block;fill:currentColor}
.climate-sources{margin-top:14px;padding-top:11px;border-top:1px solid #e4e8eb;color:#68747f;font-size:12px;line-height:1.55}
.climate-sources strong{color:#4f5b65;font-weight:700}

.climate-main{padding-bottom:20px}
.climate-main .card{box-shadow:0 8px 28px rgba(35,45,55,.035)}
@media(max-width:720px){
  .climate-main{width:min(100% - 18px,1180px)}
  .climate-main h1{font-size:clamp(30px,8vw,42px)}
}