/* ============================================================
   AMEPRES Wetterdienst — Design-System
   Tokens übernommen von amepres.online (assets/css/site.css)
   ============================================================ */
:root{
  --ink:#0a0c0d;
  --ink-soft:#111619;
  --paper:#f1eee7;
  --paper-bright:#fffdf7;
  --copper:#d74a31;
  --copper-deep:#981f17;
  --cyan:#70e1d3;
  --lime:#d7ee8a;
  --muted:#aeb8b7;
  --line:rgba(234,239,235,.16);
  --line-dark:rgba(10,12,13,.14);
  --radius:1.25rem;
  --max:86rem;
  --sans:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --shadow:0 22px 70px rgba(0,0,0,.22);
  /* Warnstufen (profi-wetter-Legende) */
  --w1:#d7ee8a; /* gering */
  --w2:#f5c453; /* leicht */
  --w3:#d74a31; /* stark  */
  --w4:#981f17; /* extrem */
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--ink);
  color:var(--paper);
  font-family:var(--sans);
  font-size:1rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block}
a{color:var(--cyan);text-decoration:none}
a:hover{color:var(--lime)}
.icon{width:1.15em;height:1.15em;display:inline-block;vertical-align:-.2em}
.wrap{max-width:var(--max);margin:0 auto;padding:0 1.25rem}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:1200;
  background:rgba(10,12,13,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.site-header.nav-open{overflow:visible}
.hdr-signal{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.55;z-index:0}
.header-in{position:relative;z-index:1}
.header-in{display:flex;align-items:center;gap:1.2rem;padding-top:.7rem;padding-bottom:.7rem}
.brand{display:flex;flex-direction:column;gap:.3rem;line-height:1.05;flex-shrink:0;text-decoration:none}
.brand-logo{
  display:block;width:11rem;padding:.3rem .55rem;border-radius:.6rem;
  border:1px solid rgba(255,255,255,.35);
  background:linear-gradient(135deg,rgba(250,248,242,.97),rgba(221,218,208,.94));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 6px 18px rgba(0,0,0,.25);
}
.brand-logo img{width:100%;height:auto}
.brand-name{
  font-family:var(--sans);font-weight:700;font-size:.92rem;color:var(--paper);
  text-transform:uppercase;letter-spacing:.34em;margin-right:-.34em; /* Ausgleich Endabstand */
  width:11rem;text-align:center;
}
.brand:hover .brand-name{color:var(--lime)}
.main-nav{display:flex;gap:.15rem;flex-wrap:wrap;flex:1}
.main-nav a{
  color:var(--muted);font-size:.86rem;padding:.42rem .68rem;border-radius:.6rem;
  transition:color .15s,background .15s;white-space:nowrap;
}
.main-nav a:hover{color:var(--paper);background:rgba(255,255,255,.08)}
.main-nav a.active{color:var(--lime);background:rgba(215,238,138,.1)}
.hdr-search{
  position:relative;display:flex;align-items:center;gap:.45rem;
  background:var(--ink-soft);border:1px solid var(--line);border-radius:2rem;
  padding:.42rem .9rem;min-width:230px;color:var(--muted);flex-shrink:0;
}
.hdr-search input{
  background:none;border:none;outline:none;color:var(--paper);
  font-family:var(--sans);font-size:.9rem;width:100%;
}
.hdr-search input::placeholder{color:var(--muted)}
.search-hits{
  position:absolute;top:calc(100% + .5rem);right:0;left:0;
  background:var(--ink-soft);border:1px solid var(--line);border-radius:1rem;
  box-shadow:var(--shadow);overflow:hidden;z-index:1300;max-height:22rem;overflow-y:auto;
}
.search-hits button{
  display:flex;justify-content:space-between;gap:.8rem;width:100%;text-align:left;
  background:none;border:none;color:var(--paper);padding:.65rem 1rem;
  font-size:.9rem;cursor:pointer;border-bottom:1px solid var(--line);
}
.search-hits button:hover{background:rgba(215,74,49,.18)}
.search-hits button small{color:var(--muted);white-space:nowrap}
.search-hits .empty{padding:.8rem 1rem;color:var(--muted);font-size:.85rem}
.nav-toggle{display:none;background:none;border:1px solid var(--line);border-radius:.6rem;color:var(--paper);font-size:1.1rem;padding:.25rem .7rem;cursor:pointer}

/* ---------- Wetterlage-Strip ---------- */
.live-strip{
  display:flex;align-items:stretch;border-bottom:1px solid var(--line);
  background:var(--ink-soft);overflow:hidden;
  /* Inhalt auf Seitenbreite (.wrap) begrenzen, Band bleibt vollflächig */
  padding-left:max(1.25rem, calc((100% - var(--max)) / 2 + 1.25rem));
  padding-right:max(1.25rem, calc((100% - var(--max)) / 2 + 1.25rem));
}
.live-strip__pulse{
  flex-shrink:0;align-self:center;width:.6rem;height:.6rem;border-radius:50%;
  background:var(--copper);margin-right:1rem;
  animation:strip-pulse 1.6s ease-in-out infinite;
}
@keyframes strip-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(215,74,49,.55);opacity:1}
  50%{box-shadow:0 0 0 .45rem rgba(215,74,49,0);opacity:.75}
}
.live-strip__track{overflow:hidden;flex:1;display:flex;align-items:center}
.live-strip__inner{
  display:flex;gap:2.5rem;white-space:nowrap;padding:.45rem 0;
  animation:strip-scroll 60s linear infinite;will-change:transform;
}
.live-strip:hover .live-strip__inner{animation-play-state:paused}
@keyframes strip-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.strip-item{display:inline-flex;align-items:center;gap:.55rem;color:var(--muted);font-size:.84rem}
.strip-item .dot{width:.55rem;height:.55rem;border-radius:50%;background:var(--cyan);flex-shrink:0}
.strip-item.w1 .dot{background:var(--w1)}.strip-item.w2 .dot{background:var(--w2)}
.strip-item.w3 .dot{background:var(--w3)}.strip-item.w4 .dot{background:var(--w4)}
.strip-item b{color:var(--paper);font-weight:600}
.strip-item a{color:inherit}
.strip-item a:hover b{color:var(--lime)}

/* ---------- Layout / Sektionen ---------- */
#app{padding-top:1.8rem;padding-bottom:4rem;min-height:60vh}
.page-head{margin-bottom:1.6rem}
.page-head .kicker{font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--copper);font-weight:700}
.page-head h1{font-family:var(--serif);font-size:clamp(1.8rem,4vw,2.8rem);font-weight:600;line-height:1.15;margin:.3rem 0 .4rem}
.page-head p.lede{color:var(--muted);max-width:52rem}
.section{margin-top:2.6rem}
.section-title{
  display:flex;align-items:baseline;gap:1rem;margin-bottom:1.1rem;
}
.section-title h2{font-family:var(--serif);font-size:1.55rem;font-weight:600}
.section-title .no{font-size:.8rem;color:var(--copper);letter-spacing:.2em;font-weight:700}
.section-title .more{margin-left:auto;font-size:.85rem}

/* ---------- Karten/Panels ---------- */
.card{
  background:var(--ink-soft);border:1px solid var(--line);
  border-radius:var(--radius);padding:1.3rem 1.4rem;
}
.card h3{font-family:var(--serif);font-size:1.15rem;margin-bottom:.6rem}
.grid{display:grid;gap:1.1rem}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

/* ---------- Hero ---------- */
.hero{
  border:1px solid var(--line);border-radius:calc(var(--radius) + .4rem);
  padding:clamp(1.4rem,4vw,2.6rem);position:relative;overflow:hidden;
  background:
    radial-gradient(60rem 20rem at 110% -20%,rgba(215,74,49,.22),transparent 60%),
    radial-gradient(50rem 18rem at -10% 120%,rgba(112,225,211,.14),transparent 60%),
    var(--ink-soft);
}
.hero h1{font-family:var(--serif);font-size:clamp(2rem,5vw,3.4rem);line-height:1.08;font-weight:600;max-width:46rem}
.hero h1 em{color:var(--copper);font-style:italic}
.hero .lede{color:var(--muted);max-width:46rem;margin-top:.9rem;font-size:1.05rem}
.hero-search{margin-top:1.5rem;display:flex;max-width:34rem;background:rgba(10,12,13,.65);border:1px solid var(--line);border-radius:2.4rem;padding:.5rem .6rem .5rem 1.2rem;align-items:center;gap:.6rem}
.hero-search input{flex:1;background:none;border:none;outline:none;color:var(--paper);font-size:1rem}
.hero-search .btn{flex-shrink:0}
.hero-meta{display:flex;gap:1.6rem;flex-wrap:wrap;margin-top:1.6rem}
.hero-meta .hm{display:flex;flex-direction:column}
.hero-meta .hm b{font-size:1.5rem;font-family:var(--serif)}
.hero-meta .hm span{font-size:.78rem;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}

/* ---------- Horizont (animierter Kartenhintergrund) ---------- */
.hz-card{position:relative;overflow:hidden}
.hz-card .hz-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.hz-card .hz-veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(75deg,rgba(10,12,13,.62) 0%,rgba(10,12,13,.28) 45%,rgba(10,12,13,0) 78%);
}
.hz-card > *:not(.hz-canvas):not(.hz-veil){position:relative;z-index:2}
.hz-card h1,.hz-card .now-cond{text-shadow:0 2px 14px rgba(10,12,13,.55)}
/* Fallback ohne WebGL: statische Verläufe nach Tageszeit */
.hz-fallback{background:linear-gradient(180deg,#7fa8c9 0%,#eef0e6 100%)}
.hz-fallback.hz-truebe{background:linear-gradient(180deg,#5a6b78 0%,#9aa3a8 100%)}
.hz-fallback.hz-daemmerung{background:linear-gradient(180deg,#665c6e 0%,#fbb36e 100%)}
.hz-fallback.hz-nacht{background:linear-gradient(180deg,#0b0f1b 0%,#232636 100%)}

/* ---------- Buttons / Chips ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  background:var(--copper);color:var(--paper-bright);border:none;
  border-radius:2rem;padding:.55rem 1.3rem;font-size:.9rem;font-weight:600;
  cursor:pointer;font-family:var(--sans);transition:background .15s,transform .1s;
}
.btn:hover{background:var(--copper-deep);color:var(--paper-bright)}
.btn:active{transform:scale(.97)}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--paper)}
.btn.ghost:hover{background:rgba(255,255,255,.08);color:var(--lime)}
.chip{
  display:inline-flex;align-items:center;gap:.4rem;
  border:1px solid var(--line);border-radius:2rem;padding:.3rem .85rem;
  font-size:.82rem;color:var(--muted);cursor:pointer;background:none;font-family:var(--sans);
}
.chip:hover,.chip.on{color:var(--ink);background:var(--lime);border-color:var(--lime)}

/* ---------- Bundesländer-Grid / Ortslisten ---------- */
.bl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem}
.bl-card{display:flex;flex-direction:column;gap:.2rem}
.bl-card .bl-name{font-family:var(--serif);font-size:1.15rem;display:flex;align-items:center;gap:.6rem}
.bl-card .bl-wx{display:flex;align-items:center;gap:.6rem;color:var(--muted);font-size:.9rem}
.bl-card .bl-wx b{color:var(--paper);font-size:1.3rem;font-family:var(--serif)}
.bl-card .bl-warn{font-size:.78rem;color:var(--w3)}
.ort-list{columns:4;column-gap:2rem;list-style:none}
@media(max-width:900px){.ort-list{columns:2}}
.ort-list li{break-inside:avoid;margin-bottom:.15rem}
.ort-list a{color:var(--muted);font-size:.92rem}
.ort-list a:hover{color:var(--lime)}
.alpha-nav{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1.2rem}

/* ---------- Ortsseite ---------- */
.now{
  display:grid;grid-template-columns:auto 1fr;gap:1.6rem;align-items:center;
}
.now-temp{font-family:var(--serif);font-size:clamp(4rem,10vw,6.5rem);line-height:1;font-weight:600}
.now-temp sup{font-size:.35em;color:var(--muted)}
.now-icon{width:clamp(3.4rem,8vw,5.2rem);height:auto;color:var(--lime)}
.now-cond{font-size:1.15rem;color:var(--paper)}
.now-sub{color:var(--muted);font-size:.92rem;margin-top:.2rem}
.now-facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.8rem;margin-top:1.4rem}
.fact{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:1rem;padding:.7rem .9rem}
.fact .f-label{display:flex;align-items:center;gap:.45rem;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.fact .f-val{font-size:1.25rem;font-family:var(--serif);margin-top:.15rem}
.fact .f-val small{font-size:.7em;color:var(--muted)}
.fav-btn{background:none;border:1px solid var(--line);border-radius:2rem;color:var(--muted);cursor:pointer;padding:.4rem .95rem;font-size:.85rem;display:inline-flex;gap:.45rem;align-items:center;font-family:var(--sans)}
.fav-btn:hover{color:var(--lime);border-color:var(--lime)}
.fav-btn.on{color:var(--lime);border-color:var(--lime);background:rgba(215,238,138,.08)}

/* Stunden-Tabelle */
.hour-scroll{overflow-x:auto;padding-bottom:.5rem}
.hour-row{display:flex;gap:.5rem;min-width:max-content}
.hour-cell{
  flex:0 0 4.6rem;text-align:center;border:1px solid var(--line);border-radius:1rem;
  padding:.6rem .3rem;background:rgba(255,255,255,.03);
}
.hour-cell.now-cell{border-color:var(--copper);background:rgba(215,74,49,.12)}
.hour-cell .h{font-size:.75rem;color:var(--muted)}
.hour-cell .t{font-family:var(--serif);font-size:1.15rem;margin:.15rem 0}
.hour-cell .p{font-size:.72rem;color:var(--cyan)}
.hour-cell svg{margin:0 auto;width:1.5rem;height:1.5rem}

/* 16-Tage */
.day-list{display:flex;flex-direction:column;gap:.55rem}
.day-row{
  display:grid;grid-template-columns:6.5rem 2.2rem 1fr auto auto;gap:.9rem;align-items:center;
  border:1px solid var(--line);border-radius:1rem;padding:.6rem 1rem;
  background:rgba(255,255,255,.03);cursor:pointer;transition:border-color .15s;
}
.day-row:hover{border-color:var(--copper)}
.day-row .d-name{font-weight:600}
.day-row .d-name small{display:block;color:var(--muted);font-weight:400;font-size:.75rem}
.day-row .d-precip{color:var(--cyan);font-size:.82rem;min-width:4.2rem}
.day-row .d-temps{font-family:var(--serif);font-size:1.1rem;white-space:nowrap}
.day-row .d-temps .min{color:var(--muted)}
.tempbar{position:relative;height:.45rem;border-radius:1rem;background:rgba(255,255,255,.08);min-width:6rem}
.tempbar i{position:absolute;top:0;bottom:0;border-radius:1rem;background:linear-gradient(90deg,var(--cyan),var(--lime),var(--copper))}
.day-detail{border:1px solid var(--line);border-top:none;border-radius:0 0 1rem 1rem;padding:1rem;margin-top:-.6rem;background:rgba(255,255,255,.02)}
.day-row.open{border-radius:1rem 1rem 0 0;border-color:var(--copper)}

/* 16-Tage: Ansicht-Umschalter + Kachel-Grid */
.view-toggle{margin-left:auto;display:inline-flex;gap:.35rem}
.day-list[hidden],.day-grid[hidden]{display:none}
.day-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem}
.day-tile{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:.2rem;
  border:1px solid var(--line);border-radius:1rem;padding:.9rem .6rem .8rem;
  background:rgba(255,255,255,.03);cursor:pointer;transition:border-color .15s;
}
.day-tile:hover{border-color:var(--copper)}
.day-tile.open{border-color:var(--copper)}
.day-tile .t-name{font-weight:600;font-size:.9rem}
.day-tile .t-name.we{color:var(--copper)}
.day-tile .t-name.we small{color:var(--copper);opacity:.75}
.day-tile .t-name small{display:block;color:var(--muted);font-weight:400;font-size:.72rem}
.day-tile .t-icon{margin:.2rem 0 .1rem}
.day-tile .t-icon .icon{width:2.6rem;height:2.6rem}
.day-tile .t-max{font-family:var(--serif);font-size:1.35rem}
.day-tile .t-max .t-min2{font-size:.85rem;color:var(--muted);font-family:var(--sans)}
.day-tile .t-text{color:var(--muted);font-size:.8rem;line-height:1.35;min-height:2.1em}
.day-tile .t-rows{margin-top:.35rem;display:flex;flex-direction:column;gap:.15rem;font-size:.75rem;color:var(--muted)}
.day-tile .t-rows div{white-space:nowrap}
.day-grid .day-detail{grid-column:1/-1;margin-top:0;border-top:1px solid var(--line);border-radius:1rem}
@media(max-width:900px){.day-grid{grid-template-columns:repeat(2,1fr)}}
/* Smartphone: nur Kachelansicht, untereinander, Umschalter ausgeblendet */
@media(max-width:700px){
  .view-toggle{display:none}
  #dayList{display:none !important}
  #dayGrid{display:grid !important;grid-template-columns:1fr;gap:.6rem}
  .day-tile{
    display:grid;align-items:center;text-align:left;gap:.15rem .8rem;
    grid-template-columns:auto auto 1fr auto;
    grid-template-areas:"name icon max rows" "text text text rows";
    padding:.7rem .9rem;
  }
  .day-tile .t-name{grid-area:name;min-width:3.4rem}
  .day-tile .t-icon{grid-area:icon;margin:0}
  .day-tile .t-icon .icon{width:2.1rem;height:2.1rem}
  .day-tile .t-max{grid-area:max;font-size:1.15rem;white-space:nowrap}
  .day-tile .t-text{grid-area:text;min-height:0;font-size:.78rem}
  .day-tile .t-rows{grid-area:rows;margin-top:0;text-align:right;font-size:.72rem}
}

/* ---------- Smartphone: App-Look ---------- */
.hero-sub{display:none}
.now-mini{display:none}
.day-blocks{display:none}
.trend-bars{display:none}
.hour-bars{display:none}
.t-mob{display:none}
@media(max-width:700px){
  /* Grafiken ~3x so groß, innerhalb der Karte waagerecht scrollbar */
  .chart-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:.4rem}
  .chart-wrap .chart{width:72rem;max-width:none}

  /* Hero reduziert: nur Überschrift + eine Zeile, Suche läuft über den Header */
  .hero{padding:1.15rem 1.05rem}
  .hero .tag{font-size:.62rem}
  .hero h1{font-size:1.5rem;line-height:1.15;max-width:none}
  .hero .lede,.hero .hero-search,.hero .hero-meta{display:none}
  .hero .hero-sub{display:block;color:var(--muted);font-size:.85rem;margin-top:.55rem;line-height:1.5}

  /* Seitenköpfe kompakter */
  .page-head h1{font-size:1.8rem}
  .page-head p.lede{font-size:.9rem}

  /* Aktuell-Karte kompakt: endet nach der Stand-Zeile, Faktenraster raus */
  .now-card .now{gap:1rem}
  .now-card .now-temp{font-size:3.4rem}
  .now-card .now-icon{width:2.7rem}
  .now-card .now-cond{font-size:1.05rem}
  .now-card .now-sub{font-size:.78rem}
  .now-facts{display:none}
  .now-mini{
    display:flex;flex-wrap:wrap;gap:.45rem 1rem;margin-top:.8rem;
    padding-top:.7rem;border-top:1px solid var(--line);
    font-size:.8rem;color:var(--muted);
  }
  .now-mini span{display:inline-flex;align-items:center;gap:.35rem}
  .now-mini b{color:var(--paper);font-weight:600}
  .now-mini .icon{width:1em;height:1em;color:var(--cyan)}

  /* Mobil ohne Grafiken: Chart-Karten und Rückblick-Sektion ausblenden */
  .m-hide{display:none!important}

  /* Mobile Balkengrafik: 16 Tage, je ein Balken, ohne Scrollen */
  .trend-bars{display:flex;gap:.12rem;padding:.9rem .55rem;margin-bottom:1.1rem}
  .tb{flex:1;display:flex;flex-direction:column;align-items:center;min-width:0}
  .tb-max{font-size:.72rem;font-weight:700;color:var(--paper);white-space:nowrap}
  .tb-min{font-size:.72rem;font-weight:700;color:var(--muted);white-space:nowrap}
  .tb-track{position:relative;width:55%;height:5.6rem;margin:.3rem 0}
  .tb-track i{position:absolute;left:0;right:0;display:block;border-radius:.3rem}
  .tb-day{font-size:.62rem;color:var(--muted);margin-top:.3rem;text-align:center;line-height:1.3}
  .tb-day.we{color:var(--copper)}
  .tb-day small{display:block;font-size:.6rem}

  /* Mobile Stunden-Balken: 24 h, 12 sichtbar, restlich wischen */
  .t-desk{display:none}
  .t-mob{display:inline}
  .hour-bars{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:.9rem .55rem .7rem}
  .hb-row{display:flex;gap:.12rem}
  .hb{flex:0 0 calc((100vw - 4.7rem)/12);display:flex;flex-direction:column;align-items:center;min-width:0}
  .hb-t{font-size:.72rem;font-weight:700;color:var(--paper);white-space:nowrap}
  .hb-track{position:relative;width:70%;height:5.6rem;margin:.3rem 0 .2rem}
  .hb-track i{position:absolute;bottom:0;left:0;right:0;display:block;border-radius:.3rem}
  .hb-p{position:absolute;bottom:0;left:24%;right:24%;display:block;background:var(--cyan);border-radius:.2rem .2rem 0 0}
  .hb-mm{font-size:.58rem;color:var(--cyan);min-height:.85rem;white-space:nowrap}
  .hb-h{font-size:.62rem;color:var(--muted)}

  /* Tagesdetail als App-Blöcke (Nacht/Morgen/Mittag/Abend) statt Grafik */
  .day-blocks{display:block}
  .day-block{
    border-top:1px solid var(--line);padding:.8rem 0 .9rem;
  }
  .day-block:first-child{border-top:0;padding-top:.2rem}
  .db-head{display:flex;justify-content:space-between;align-items:baseline;gap:.8rem}
  .db-time{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
  .db-cond{font-size:.85rem;color:var(--paper);text-align:right}
  .db-body{display:flex;align-items:center;gap:.9rem;margin-top:.45rem}
  .db-icon .icon,.db-icon svg{width:2.5rem;height:2.5rem;display:block}
  .db-temp{font-family:var(--serif);font-size:1.9rem;color:var(--paper)}
  .db-stats{margin-left:auto;display:flex;gap:1rem}
  .db-stats span{display:flex;flex-direction:column;align-items:center;gap:.25rem;font-size:.72rem;color:var(--muted)}
  .db-stats .icon,.db-stats svg{width:1rem;height:1rem;color:var(--cyan)}
  .db-stats b{color:var(--paper);font-weight:600;font-size:.78rem;white-space:nowrap}

  /* App-Rhythmus: kompaktere Abstände und Karten */
  .section{margin-top:1.6rem}
  .section-title h2{font-size:1.25rem}
  .card{border-radius:1rem}
  .hour-cell{flex-basis:4.4rem}
}
@media(prefers-reduced-motion:reduce){.live-strip__pulse{animation:none}}

/* Warnungen */
.warn-card{border-left:.4rem solid var(--w2)}
.warn-card.s1{border-left-color:var(--w1)}
.warn-card.s2{border-left-color:var(--w2)}
.warn-card.s3{border-left-color:var(--w3)}
.warn-card.s4{border-left-color:var(--w4)}
.warn-card .w-head{display:flex;gap:.7rem;align-items:center;margin-bottom:.4rem}
.warn-card .w-badge{font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:.18rem .6rem;border-radius:1rem;background:var(--w2);color:var(--ink)}
.warn-card.s1 .w-badge{background:var(--w1)}.warn-card.s3 .w-badge{background:var(--w3);color:var(--paper-bright)}.warn-card.s4 .w-badge{background:var(--w4);color:var(--paper-bright)}
.warn-card .w-time{margin-left:auto;font-size:.78rem;color:var(--muted)}
.warn-card .w-title{font-weight:700;font-size:1.02rem}
.warn-card .w-desc{color:var(--muted);font-size:.9rem;margin-top:.35rem;white-space:pre-line}
.legend{display:flex;gap:1.2rem;flex-wrap:wrap;font-size:.8rem;color:var(--muted);align-items:center}
.legend span{display:inline-flex;align-items:center;gap:.4rem}
.legend i{width:.8rem;height:.8rem;border-radius:.25rem;display:inline-block}
.legend .l1{background:var(--w1)}.legend .l2{background:var(--w2)}.legend .l3{background:var(--w3)}.legend .l4{background:var(--w4)}

/* Karte */
.map-box{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);position:relative}
.map-box .leaflet-container{background:var(--ink);font-family:var(--sans)}
.map-lg{height:32rem}.map-md{height:22rem}
@media(max-width:700px){.map-lg{height:22rem}.map-md{height:17rem}}
.map-controls{
  display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;
  padding:.7rem .9rem;background:var(--ink-soft);border-top:1px solid var(--line);
}
.map-controls .tcode{font-size:.8rem;color:var(--muted);font-variant-numeric:tabular-nums}
.radar-field{pointer-events:none}
.region-select{
  background:var(--ink);color:var(--paper);border:1px solid var(--line);
  border-radius:.7rem;padding:.4rem .7rem;font-size:.85rem;font-family:var(--sans);
}
.mode-group{display:inline-flex;gap:.35rem}
.mode-group .chip{padding:.28rem .75rem}
/* Radar-Zeitschieberegler */
.radar-slider{
  flex:1;min-width:120px;max-width:26rem;appearance:none;-webkit-appearance:none;
  height:.4rem;border-radius:1rem;background:rgba(255,255,255,.12);
  outline:none;cursor:pointer;
}
.radar-slider::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:1.1rem;height:1.1rem;border-radius:50%;
  background:var(--copper);border:2px solid var(--paper);box-shadow:0 2px 8px rgba(0,0,0,.5);
}
.radar-slider::-moz-range-thumb{
  width:1.1rem;height:1.1rem;border-radius:50%;
  background:var(--copper);border:2px solid var(--paper);box-shadow:0 2px 8px rgba(0,0,0,.5);
}
.radar-slider::-moz-range-track{height:.4rem;border-radius:1rem;background:rgba(255,255,255,.12)}
.leaflet-control-attribution{font-size:.65rem!important;background:rgba(10,12,13,.7)!important;color:var(--muted)!important}
.leaflet-control-attribution a{color:var(--muted)!important}
.wx-marker{
  display:flex;flex-direction:column;align-items:center;gap:.05rem;
  font-size:.68rem;color:var(--paper);text-shadow:0 1px 3px rgba(0,0,0,.9);
  transform:translateY(-.4rem);white-space:nowrap;
}
.wx-marker b{
  background:var(--ink-soft);border:1px solid var(--line);border-radius:.6rem;
  padding:.15rem .5rem;font-size:.78rem;
}
.wx-marker.warn b{border-color:var(--w3);color:var(--w2)}

/* Diagramme */
.chart{width:100%;height:auto}
.chart .axis{stroke:var(--line);stroke-width:1}
.chart text{fill:var(--muted);font-size:11px;font-family:var(--sans)}
.chart .temp-line{fill:none;stroke:var(--copper);stroke-width:2.4;stroke-linejoin:round}
.chart .temp-fill{fill:url(#tempGrad);opacity:.35;stroke:none}
.chart .precip-bar{fill:var(--cyan);opacity:.85}
.chart .grid-ln{stroke:rgba(234,239,235,.08)}
.chart-wrap{overflow-x:auto}

/* Agrar */
.agrar-depths{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.9rem}
.depth-card{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:1rem;padding:.9rem 1rem}
.depth-card .d-title{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.depth-card .d-val{font-family:var(--serif);font-size:1.5rem;margin-top:.2rem}
.depth-card .d-sub{font-size:.8rem;color:var(--cyan)}

/* Wetterbericht */
.report{font-family:var(--serif);font-size:1.12rem;line-height:1.75;max-width:56rem}
.report p{margin-bottom:1.1rem}
.report p:first-child::first-letter{font-size:2.4em;color:var(--copper);float:left;line-height:.9;padding-right:.12em}
.report-meta{font-size:.8rem;color:var(--muted);margin-bottom:1.4rem;font-family:var(--sans)}
.tabs{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:1.4rem}

/* Diverse */
.note{color:var(--muted);font-size:.85rem}
.error-box{border:1px solid var(--copper);border-radius:1rem;padding:1.2rem 1.4rem;color:var(--paper);background:rgba(215,74,49,.1)}
.loading{display:flex;align-items:center;gap:.8rem;color:var(--muted);padding:3rem 0;justify-content:center}
.spinner{width:1.4rem;height:1.4rem;border:.2rem solid var(--line);border-top-color:var(--copper);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.tag{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--copper);font-weight:700}
.two-col{display:grid;grid-template-columns:2fr 1fr;gap:1.4rem;align-items:start}
@media(max-width:900px){.two-col{grid-template-columns:1fr}}
.country-block{margin-bottom:1.8rem}
.country-block h3{font-family:var(--serif);border-bottom:1px solid var(--line);padding-bottom:.3rem;margin-bottom:.6rem}
details.agrar-details summary{cursor:pointer;color:var(--lime);font-weight:600;padding:.8rem 0;list-style:none;display:flex;align-items:center;gap:.5rem}
details.agrar-details summary::before{content:"▸";color:var(--copper)}
details.agrar-details[open] summary::before{content:"▾"}

/* ---------- Footer ---------- */
.site-footer{border-top:1px solid var(--line);padding:2.6rem 0 2rem;margin-top:3rem;background:var(--ink-soft)}
.footer-claim{font-family:var(--serif);font-size:1.15rem;color:var(--muted)}
.footer-claim em{color:var(--copper)}
.footer-nav{display:flex;gap:1.4rem;flex-wrap:wrap;margin:1rem 0}
.footer-nav a{color:var(--paper);font-size:.9rem}
.footer-nav a:hover{color:var(--lime)}
.footer-src{font-size:.78rem;color:var(--muted);max-width:56rem}
.footer-copy{font-size:.78rem;color:var(--muted);margin-top:.8rem}

/* ---------- Responsive Header ---------- */
@media(max-width:1060px){
  .hdr-search{min-width:170px}
  .main-nav{
    display:none;position:absolute;top:100%;left:0;right:0;
    background:var(--ink-soft);border-bottom:1px solid var(--line);
    flex-direction:column;padding:.8rem 1.25rem;gap:.2rem;
  }
  .main-nav.open{display:flex}
  .nav-toggle{display:block}
  .header-in{flex-wrap:wrap}
}
/* Smartphone: Logo kleiner, Suche auf eigener Zeile, kein Überlauf */
@media(max-width:700px){
  .header-in{gap:.7rem}
  .brand-logo{width:8.5rem}
  .brand-name{width:8.5rem;font-size:.68rem;letter-spacing:.22em}
  .hdr-search{order:3;flex:1 1 100%;min-width:0}
  .nav-toggle{margin-left:auto}
  .hero-search{padding:.45rem .5rem .45rem .9rem;gap:.4rem}
  body{overflow-x:hidden}
}