/* =========================================================
   EIFEL-WETTER.DE – ZENTRALES STYLESHEET
   Testversion fuer schrittweise Migration

   Reihenfolge entspricht der bisherigen Kaskade:
   01 Basis / Responsive (ehem. resp.css)
   02 Legacy / globale Seitenelemente (ehem. mystyle2.css)
   03 Navigation / Drawer (ehem. menu.css)
   04 Startseite (ehem. Inline-CSS aus index.php)

   WICHTIG: Die drei alten CSS-Dateien bleiben unveraendert bestehen.
========================================================= */

/* =========================================================
   01 BASIS / RESPONSIVE
   Quelle: resp.css (Markdown-Huelle und ueberzaehlige Schlussklammer bereinigt)
========================================================= */

/* =========================================================
   ROOT / THEME
========================================================= */

:root{
  --bg:#eef4fb;
  --text:#17212f;
  --muted:#5e6b7a;

  --card:rgba(255,255,255,.82);
  --card-solid:#ffffff;

  --border:rgba(37,99,235,.18);


  --accent:#ff9800;

  --shadow:0 18px 45px rgba(15,23,42,.12);
  --radius:22px;
}

html.dark{
  --bg:#08111d;
  --text:#edf4ff;
  --muted:#a8b4c4;

  --card:rgba(14,22,34,.82);
  --card-solid:#111a26;

  --border:rgba(69,170,242,.28);

  --shadow:none;
}


/* =========================================================
   RESET / BASE
========================================================= */


body{


  font-family:"Quicksand", Arial, sans-serif;

  background:
    radial-gradient(
      circle at top left,
      rgba(69,170,242,.28),
      transparent 34rem
    ),
    var(--bg);


}


 *{ box-sizing:border-box; }
    body{
      margin:0;
      font-family:Quicksand, Arial, sans-serif;
      color:var(--text);
      background:
        linear-gradient(to bottom, rgba(255,255,255,.2), var(--bg) 360px),
        url("/fotos/kaifenheim_hell3.webp") center top / cover fixed no-repeat,
        var(--bg);
    }
    html.dark body{
      background:
        linear-gradient(to bottom, rgba(0,0,0,.08), var(--bg) 380px),
        url("/fotos/kaifenheim_hell3.webp") center top / cover fixed no-repeat,
        var(--bg);
    }


a{
  color:inherit;
}


/* =========================================================
   HEADER
========================================================= */

.resp-header{
  position:sticky;
  top:0;
  z-index:40;

  padding:14px 18px;

  background:rgba(255,255,255,.7);
  border-bottom:1px solid var(--border);

  backdrop-filter:blur(12px);
}

html.dark .resp-header{
  background:rgba(8,17,29,.74);
}

.resp-brand-wrap{
  max-width:1440px;
  margin:auto;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.resp-brand,
.resp-brand:link,
.resp-brand:visited{
  font-family:"Quicksand Medium","Quicksand",Arial,sans-serif;
  font-size:clamp(2rem,5vw,4.2rem);
  line-height:1;

  text-decoration:none;

  font-variant:normal;
  font-style:italic;
  font-weight:bolder;

  color:orange !important;

  text-shadow:
    0 1px 1px orange,
    0 2px 2px hsl(15,20%,56%),
    0 3px 3px hsl(15,20%,54%),
    0 4px 4px hsl(15,20%,52%),
    0 6px 6px hsl(15,20%,50%);

  transition:
    transform .35s ease,
    text-shadow .35s ease,
    color .35s ease;
}

.resp-brand:hover,
.resp-brand:focus{
  color:#ffd27d !important;

  transform:translateY(-6px) scale(1.04);

  text-shadow:
    0 2px 2px #ffb347,
    0 4px 4px hsl(20,60%,55%),
    0 6px 6px hsl(20,60%,50%),
    0 10px 12px rgba(255,180,70,.6),
    0 0 25px rgba(255,200,120,.8);

  cursor:pointer;
}

html.dark .resp-brand{
  color:orange !important;
}

.resp-subtitle{
  font-size:clamp(.95rem,2vw,1.2rem);
  text-align:right;
  color:var(--muted);
}


/* =========================================================
   MAIN LAYOUT
========================================================= */

.resp-shell{
  width:min(1440px,100%);

  margin:0 auto;
  padding:18px;

  display:grid;
  grid-template-columns:minmax(0,1fr) 280px;
  gap:18px;

  align-items:start;
}

.resp-main{
  min-width:0;

  display:grid;
  gap:18px;
}

.resp-info-panel{
  position:sticky;
  top:110px;

  width:280px;
  max-width:280px;

  justify-self:end;
}


/* =========================================================
   CARD SYSTEM
========================================================= */

.hero-card,
.content-card,
.intro-card,
.round-widget-card,
.side-card{
  background:var(--card);

  border:1px solid var(--border);
  border-radius:var(--radius);

  box-shadow:var(--shadow);

  backdrop-filter:blur(10px);
}

.intro-card,
.content-card,
.round-widget-card,
.side-card{
  padding:20px;
}


/* =========================================================
   HERO
========================================================= */

.hero-card{


  min-height:310px;

  display:flex;
  align-items:end;

  padding:28px;
}

.hero-image{
  position:absolute;

  inset:-70px -120px auto -80px;

  height:360px;

  transform:rotate(-5deg);

  pointer-events:none;
  opacity:.75;

  mask-image:linear-gradient(
    to bottom,
    #000 0%,
    #000 45%,
    rgba(0,0,0,.4) 70%,
    transparent 100%
  );
}

.hero-img{
  position:absolute;
  inset:0;

  width:100%;
  height:100%;

  object-fit:cover;

  clip-path:polygon(
    0 8%,
    92% 0,
    100% 60%,
    82% 100%,
    0 88%
  );
}

.hero-night,
html.dark .hero-day{
  display:none;
}


html.dark .hero-night{
  display:block;
  filter:brightness(.85);
}

.hero-content{
  position:relative;
  z-index:2;

  max-width:880px;

  padding:18px 20px;

  background:rgba(255,255,255,.62);
  border-radius:18px;

  backdrop-filter:blur(6px);
}

html.dark .hero-content{
  background:rgba(0,0,0,.48);
}


/* =========================================================
   TYPOGRAPHY
========================================================= */

h1{
  font-size:clamp(1.8rem,4vw,3.2rem);
  line-height:1.08;

  margin:0 0 14px;
}

h2{
  font-size:clamp(1.25rem,2vw,1.7rem);
  margin:0 0 10px;
}

.hero-content p,
.content-card p,
.intro-card p,
.round-widget-card p,
.side-card p{
  font-size:1.08rem;
  line-height:1.55;

  margin:0;

  color:var(--text);
}

.intro-card h2{
  color:var(--accent);
}


/* =========================================================
   GRID SECTIONS
========================================================= */

.intro-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}

.widget-row{
  display:grid;
  grid-template-columns:260px minmax(0,1fr);
  gap:18px;
}


/* =========================================================
   WEATHER WIDGET
========================================================= */

.iframe-round{
  width:200px;
  height:200px;

  margin:12px auto 0;

  border-radius:34px;
  overflow:hidden;

  background:transparent;
}

.iframe-round iframe{
  width:100%;
  height:100%;

  border:0;

  display:block;

  background:transparent;
}


/* =========================================================
   BUTTONS / LINKS
========================================================= */

.button-link,
.nearby-links a,
.side-nav a{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:10px 16px;

  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;

  text-decoration:none;

  background:linear-gradient(
    180deg,
    #6ea8ff 0%,
    #4b7bec 100%
  );

  color:#ffffff !important;

  font-weight:700;

  box-shadow:
    0 6px 18px rgba(75,123,236,.28);

  transition:
    transform .18s ease,
    color .18s ease,
    box-shadow .18s ease;
}

.button-link:hover,
.nearby-links a:hover,
.side-nav a:hover{
  transform:translateY(-2px);

  color:#ff9800 !important;

  box-shadow:
    0 10px 24px rgba(75,123,236,.42);
}

html.dark .button-link,
html.dark .nearby-links a,
html.dark .side-nav a{
  background:linear-gradient(
    180deg,
    #4d8fff 0%,
    #2563eb 100%
  );

  color:#ffffff !important;
}


/* =========================================================
   SIDE NAV / QUICKINFO
========================================================= */

.nearby-links,
.side-nav{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.side-nav{
  flex-direction:column;
}

.quickinfo-card iframe{
  width:100%;
  height:270px;

  border:0;
  border-radius:18px;

  overflow:hidden;

  background:#112;
}

.side-note{
  font-size:.9rem !important;
  color:var(--muted) !important;
  margin-bottom:10px !important;
}


/* =========================================================
   FOOTER
========================================================= */

.resp-footer{
  padding:26px 18px;
  text-align:center;
  color:var(--muted);
}


/* =========================================================
   STATION MODAL
========================================================= */

.station-modal:not([hidden]){
  display:block;
}

.station-modal{


  z-index:9999;


  background:rgba(0,0,0,.55);
}

.station-dialog{
  max-width:820px;

  margin:40px auto;

  background:var(--card-solid);
  color:var(--text);

  border-radius:18px;
  border:1px solid var(--border);

  overflow:hidden;
}

.station-head{


  font-size:1.6rem;
}

.station-head span{
  font-size:1rem;
  color:var(--muted);
}

.station-head button,
.station-actions button{
  font:inherit;

  border:1px solid var(--border);
  border-radius:12px;

  background:var(--card);
  color:var(--text);

  padding:9px 12px;

  cursor:pointer;
}

.station-actions{


  padding:0 16px 16px;
}


.station-row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;

  padding:10px 0;

  border-top:1px solid var(--border);
}


/* =========================================================
   FALLBACK MENU
========================================================= */

.resp-fallback-menu{
  display:grid;
  gap:8px;
}

.resp-fallback-menu a{
  padding:10px;
  border-radius:12px;
  background:var(--card);
  text-decoration:none;
}


/* =========================================================
   RESPONSIVE
========================================================= */


@media (max-width: 768px){

  .resp-brand{
    margin-left: 12px !important;
    padding-left: 0 !important;

    text-align: left !important;

    max-width: calc(100vw - 90px);
  }

}


@media (max-width:1100px){

  .resp-shell{
    grid-template-columns:1fr;
  }

  .resp-info-panel{
    position:static;

    width:auto;
    max-width:none;

    justify-self:stretch;

    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px;
  }

  .mbar{
    display:flex !important;
  }
}


@media (max-width:720px){

  .resp-header{
    position:relative;
  }

  .resp-brand-wrap{
    display:block;
    text-align:center;
  }

  .resp-subtitle{
    text-align:center;
    margin-top:8px;
  }

  .resp-shell{
    padding:12px;
  }

  .hero-card{
    min-height:380px;
    padding:16px;
  }

  .intro-grid,
  .widget-row,
  .resp-info-panel{
    grid-template-columns:1fr;
  }

  .quickinfo-card iframe{
    height:240px;
  }

  h1{
    font-size:2rem;
  }


@media (max-width: 768px){

  .resp-brand-wrap{
    display:block !important;

    padding-right: 70px;

  }

  .resp-brand{
    display:block;

    text-align:left !important;

    margin-left: 0 !important;
    padding-left: 0 !important;

    max-width: calc(100vw - 90px);

    line-height: 1.05;
  }

  .resp-subtitle{
    display:block;

    text-align:left !important;

    margin-top: 10px;
  }

  .trapezoid{
    display:block !important;

    margin-top: 12px !important;
    margin-left: 0 !important;

    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
  }

  }

}

/* =========================================================
   02 LEGACY / GLOBALE SEITENELEMENTE
   Quelle: mystyle2.css (ueberzaehlige Schlussklammer bereinigt)
========================================================= */

#men_aktiv_dia {
  border-top: solid 20px var(--brand);
  background: var(--brand);
    height: 60px;
    width: 240px;
    display: inline-block;
    float: left;
    font-weight : bold;
    color : orange;
    text-decoration : none;
    text-align: center;
  font-family: "quicksand-medium", Arial, sans-serif;
    font-size: x-large;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}

#men_inaktiv_dia {
  background-color: var(--bar);
    border-top: solid 20px var(--bgMenu);
    height: 60px;
    width: 239px;
    display: inline-block;
    float: left;
    font-weight : bold;
    color : #ffffff;
    text-decoration : none;
    text-align: center;
  font-family: "quicksand-medium", Arial, sans-serif;
    font-size: x-large;
}

#titel{position: absolute; top: 0px; left: 10px; width: 960px; z-index: 20;}
#menu{position: absolute; top: 150px; left: 10px; width: 960px; z-index: 20; background: var(--bgMenu)}
#menudark{position: absolute; top: 150px; left: 10px; width: 960px; z-index: 20; background: #666666}
#linie{position: absolute; top: 320px; left: 10px; width: 960px; z-index: 20;}
#header2{position: absolute; top: 180px; left: 10px; width: 960px; z-index: 10; font-family: "quicksand-medium", Arial, sans-serif;}
#webcam_aktualisieren{position: absolute; top: 400px; left: 10px; z-index: 1;}
#webcam1{position: absolute; top: 400px; left: 10px; z-index: 10;}
#webcam2{position: absolute; top: 590px; left: 10px; z-index: 10;}
#webcam3{position: absolute; top: 878px; left: 10px; z-index: 10;}
#text1{position: absolute; top: 1010px; left: 10px; width: 960px; z-index: 10;}

#begruessung_1{position: absolute; top: 20px; height: 500px; left: 50px; width: 860px; z-index: 20}
#begruessung_2{position: absolute; top: 220px; left: 50px; width: 860px; z-index: 20}
#begruessung_3{position: absolute; top: 900px; left: 50px; width: 860px; z-index: 20}
#begruessung_4{position: absolute; top: 1000px; left: 50px; width: 860px; z-index: 20}
#begruessung_wetterphp{position: absolute; top: 1070px; left: 50px; width: 860px; z-index: 22}
#begruessung_rss{position: absolute; top: 1300px; left: 10px; width: 960px; z-index: 20; background: #45aaf2}
#begruessung_privat{position: absolute; top: 1400px; left: 10px; width: 960px; z-index: 20}
#begruessung_counter{position: absolute; top: 1450px; left: 10px; width: 960px; z-index: 20}

#header1 {
    left: 10px;
    z-index: 10;
    font-family: "quicksand-medium", Arial, sans-serif;
    color: var(--blauText);
    width: 100% !important;
    max-width: none !important;
    font-size: 30px;
    font-weight: 800;
  }

#w_titel {
    margin-left: 0px;
    position: absolute;
    top: 30px;
    left: 0px;
}

#maintable {
    margin-left: 0px;
    position: relative;
    top: 30px;
    left: 0px;
}

#tux {
    position: relative;
    left: 0px;
}

#raspi {
     position: relative;
    left: 30px;

}

#rss1,
#rss2{
  position: relative;
  left: 30px;
    font-family: quicksand-medium;
    font-size: large;
    text-decoration : none;

}


@font-face {
    font-family: "quicksand-medium";
    src: url("quicksand-medium.ttf");
    src: local("quicksand-medium"), local("quicksand-medium"), url("quicksand-medium.ttf") format("truetype");
}

.flex-container {
  display: flex;
  flex-direction: column;
  width: 960px;
  max-width: 100%;
  padding: 0;
  background: var(--bg);
  border-radius: 18px;
  margin: 0 auto;
  list-style: none;
}

.Kamera-info{
  position: static;

  width: 960px;
  max-width: 100%;
  margin: 10px auto 0 auto;
  height: auto;

  display: block;
}

.text-3d {
  font-family: "quicksand-medium", Arial, sans-serif;
  width: 80%;
   font-size: clamp(2.4rem, 8vw, 4.5rem);
   font-variant: normal;
   font-style: italic;
   font-weight: 900;
   color: orange;
   text-align: center;
   text-shadow:
     0 1px 1px orange,
     0 2px 2px hsl(15,20%,56%),
     0 3px 3px hsl(15,20%,54%),
     0 4px 4px hsl(15,20%,52%),
     0 6px 6px hsl(15,20%,50%);
}
.kamera-text-box {
  background: transparent;
  width: 400px;
  padding: 5px;
  height: auto;
  margin-right: 20px;
  margin-bottom: 0px;
  color: black;
  background-color: transparent;
  font-size: x-large;
  font-family: quicksand-medium;
  color: var(--blauText);
  text-align: left;
  padding-left: 10px;
  float: left;
}
.subtitle-wrap{

  display: block;
  text-align: center;
  margin: 0 auto 10px auto;
  clear: both;
}

.subtitle-wrap > *{
  margin-left: auto;
  margin-right: auto;
}

.subtitle-wrap img,
.subtitle-wrap div,
.subtitle-wrap p,
.subtitle-wrap span{
  max-width: 80%;
}

.subtitle-wrap{
  width: 80%;
}

.subtitle-wrap > div,
.subtitle-wrap > p{
  width: 80%;
  text-align: center;
}


/* ===== Theme Variablen ===== */
:root{
  color-scheme: light dark;
  --bg: #ffffff;
  --bga: #f1f2f6;
  --bgp: #45aaf2;
  --bgi: #f1f2f6;
  --bgc: #ffffff;
  --text: #0b1b3a;
  --brand: #4b7bec;
  --brand2: #45aaf2;
  --bar: #45aaf2;
  --barc: #e5e5e5;
  --blauText: #4b7bec;
  --swText: #ffffff;
  --barText: #ffffff;
  --bwText: #000000;
  --bwbg: #ffffff;
  --bgTextBox: #e5e5e5;
  --bgMenu: lightgrey;
}

html.dark{
  --bg: #080808;
  --bga: #080808;
  --bgp: #080808;
  --bgi: #1B1464;
  --bgc: #5758BB;
  --text: #e6e6e6;
  --brand: #1B1464;
  --brand2: #5758BB;
  --bar: #5758BB;
  --barc: #5758BB;
  --blauText: #e6e6e6;
  --swText: #e6e6e6;
  --barText: #e6e6e6;
  --bwText: #ffffff;
  --bwbg: #000000;
  --bgTextBox: #1B1464;
  --bgMenu: #747d8c;
}

html, body{
  background: var(--bg);
  color: var(--text);
  font-family: "Quicksand", sans-serif;
}

.sicht-header {
  width: 900px;
  height: 30px;
  border-radius: 18px;
  background-color: transparent;
  overflow: hidden;
  padding-left: 0px;
  padding-top: 3px;
  margin-bottom: 20px;
  float: left;
  display: flex;
  font-size: x-large;
  font-family: quicksand-medium;
  color: var(--blauText);
}

.header-tage {
  width: 97%;
  height: 30px;
  border-style: solid;
  border-width: thin;
  border-radius: 18px;
  background-color: var(--bar);
  border-color: var(--bar);
  overflow: hidden;
  padding-left: 30px;
  padding-top: 3px;
  margin-bottom: 0px;
  float: left;
  display: flex;
  font-size: x-large;
  font-family: quicksand-medium;
  color: #ffffff;
}

.tag-body-container{
  background: var(--bgbox);
  color: var(--text);
}


.seitentitel{
  color: var(--brand);
}

.quelle,
.meintitel{
  color: var(--text);
}


.quelle {
  width: 80%;
  height: 40px;
  border-style: none;
  background-color: var(--bwbg);
  overflow: hidden;
  padding-left: 30px;
  padding-top: 3px;
  margin-top: 20px;
  margin-left: 100px;
  float: left;
  font-size: x-small;
  font-family: quicksand-medium;
  color: var(--bwText);
  text-align: center;
}

.footer {
  width: 80%;
  height: 40px;
  border-style: none;
  background-color: var(--brand);
  overflow: hidden;
  padding-left: 30px;
  padding-top: 3px;
  margin-left: 100px;
  float: left;
  font-size: x-small;
  font-family: quicksand-medium;
  color: #ffffff;
  text-align: center;
}


.sicht-footer{
  background-color: var(--bar);
  border-color: var(--bar);
  color: var(--barText);
}


h1 {
  font-family: "Quicksand", sans-serif;
  font-weight: 400;

}


.trapezoid {
    display: inline-block;
    font-family: Quicksand Medium, Arial, sans-serif;
    font-size: large;
    font-weight: 300;
    letter-spacing: 1.2px;
    color: #f7f9ff;

    width: 540px;
    padding: 12px 22px;


   background: linear-gradient(135deg, var(--brand2), var(--brand));
   backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);


clip-path: polygon(
  6% 0,
  98.8% 0.6%,
  100% 8%,
  100% 92%,
  98.8% 99.4%,
  0 100%
);

    border-radius: 6px;

    text-align: right;
    margin-top: 18px;


    box-shadow:
      0 0 18px rgba(75,123,236,0.55),
      0 0 40px rgba(75,123,236,0.45),
      0 0 80px rgba(75,123,236,0.35);

    animation:
      glowPulse 1.9s ease-in-out infinite alternate,
      floatUpDown 3.6s ease-in-out infinite;
}

#themeToggle{
  margin-left: auto;
  background: rgba(255,255,255,0.15);
  color: var(--barText);
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 999px;
  padding: 4px 10px;
  cursor: pointer;
}

#themeToggle:hover{ border-color: orange; }

/* ===== Kamera Overlay FIX ===== */
.camwrap{
  position: relative;
  width: 960px;
  max-width: 100%;
  margin: 12px auto 0 auto;
  border-radius: 40px;
  overflow: hidden;
}


.camwrap .kamera img{
  width: 100%;
  height: auto;
  display: block;
}


.camwrap .ladekamera{
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
}


.camwrap .kamera{
  position: relative;
  z-index: 10;
  display: block;
}


.camwrap .ladekamera img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


.camwrap img{
  width: 100%;
  height: auto;
  display: block;
}


.mybutton {
  display: inline-block;
  outline: none;
  cursor: pointer;
  font-size: 30px;
  line-height: 1;
  background-color: var(--bar);
  font-family: quicksand-medium;
  border-radius: 500px;
  transition: all 300ms cubic-bezier(.23, 1, 0.32, 1);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  will-change: transform;
  border: 1px solid transparent;
  letter-spacing: 2px;
  min-width: 120px;
  padding-bottom: 10px;
  padding-top: 10px;
  white-space: normal;
  font-weight: 700;
  text-align: center;
  color: var(--barText);
  box-shadow: rgba(0, 0, 0, 0.25) 4px 4px 3px;
  height: 60px;
  width: 240px;
  position: absolute;
  top: 1250px;
  left: 300px;
  z-index: 200;
}

.mybutton:hover{
  color: var(--bar);
  background-color: var(--bar);
  border: 1px solid orange;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 0px 0px;
  transform: translateY(3px);
  transform: translateX(1px);
}

a:hover {color: orange;}
a { color: #ffffff; text-decoration: none;}


.warn-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 25px;
    margin: 20px 0;
}


.warn-center {
    display: flex;
    justify-content: center;
    margin: 20px 0;
}
.page-title{
  font-family: quicksand-medium, Arial, sans-serif;
  font-size: 3rem;
  color: var(--blauText);
  text-align: center;
  margin: 8px 0 26px;
}


@media (max-width: 768px){

  .trapezoid{
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;

    padding: 10px 14px !important;

    margin: 10px auto 0 auto !important;

    font-size: 0.92rem !important;

    overflow: hidden;
    box-sizing: border-box;

    clip-path: polygon(
      4% 0,
      98% 0,
      100% 8%,
      100% 92%,
      98% 100%,
      0 100%
    );
  }

  body{
    overflow-x: hidden;
  }

}

/* =========================================================
   03 NAVIGATION / DRAWER
   Quelle: menu.css
========================================================= */


:root{
  --m-border: #3867d6;
  --m-card: #ffffff;
  --m-text: #0b1220;
  --m-bg: #f5f7fb;
  --m-muted: #5a667a;
  --m-accent: #ff9800;
  --m-pill: rgba(255,255,255,.55);
  --m-pill-border: rgba(56,103,214,.22);
}

html.dark{
  --m-border: #3867d6;
  --m-card: #111a26;
  --m-text: #e8eef7;
  --m-bg: #081018;
  --m-muted: #9aa6b8;
  --m-accent: #ff9800;
  --m-pill: rgba(255,255,255,.08);
  --m-pill-border: rgba(255,255,255,.18);
}

.mbar{
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 9997;
  display: flex;
  justify-content: flex-end;
  padding: 0;
}

.mbar-btn{
  display: flex;
  align-items: center;
  gap: 10px;
  border: 2px solid var(--m-border) !important;
  background: var(--m-card) !important;
  color: var(--m-text) !important;
  border-radius: 999px;
  padding: 10px 16px;
  min-height: 46px;
  font: inherit;
  font-weight: 900;
  font-size: 18px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,.22);
}

.mbar-btn svg{
  width: 24px;
  height: 24px;
}

.mbar-btn span{
  text-transform: uppercase;
  letter-spacing: .04em;
}

.drawer-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.38);
  backdrop-filter: blur(2px);
  z-index: 9998;
}

.drawer{
  position: fixed;
  top: 0;
  right: 0;
  height: 100dvh;
  width: min(68vw, 240px);
  background: var(--m-bg);
  border-left: 1px solid var(--m-border);
  transform: translateX(100%);
  transition: transform .22s ease;
  z-index: 9999;
  display: flex;
  flex-direction: column;
}

.drawer.open{
  transform: translateX(0);
}

.drawer-header{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 14px 14px 10px;
  border-bottom: 1px solid var(--m-border);
}

.drawer-brand{
  font-weight: 800;
  font-size: 1.4rem;
  color: var(--m-text);
}

.drawer-sub{
  color: var(--m-muted);
  font-size: 0.9rem;
  margin-top: 2px;
}

.drawer-close{
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--m-border);
  background: var(--m-card);
  color: var(--m-text);
  border-radius: 12px;
  cursor: pointer;
}

.drawer-close svg{
  width: 20px;
  height: 20px;
}

.drawer-tools{
  padding: 10px 14px;
  border-bottom: 1px solid var(--m-border);
}

.drawer-tool{
  width: 100%;
  border: 1px solid var(--m-border);
  background: var(--m-card);
  color: var(--m-text);
  border-radius: 10px;
  padding: 8px 10px;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
  pointer-events: auto;
}

.drawer-tool:hover{
  border-color: var(--m-accent);
}

.drawer-nav{
  padding: 8px 8px 14px;
  overflow: auto;
}

.drawer-group{
  border: 1px solid var(--m-border);
  background: var(--m-card);
  border-radius: 12px;
  padding: 2px;
  margin: 3px 1px;
}

.drawer-group-title{
  color: var(--m-muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
  margin: 2px 6px 4px;
}

.drawer-link{
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 4px 8px;
  border-radius: 8px;
  background: rgba(255, 140, 26, 0.10);
  color: var(--m-text);
  text-decoration: none;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.05;
}

.drawer-link span:last-child{
  font-size: 0.9rem;
}

.drawer-link:hover{
  background: rgba(255, 140, 26, 0.18);
}

.drawer-link .ico{
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid var(--m-pill-border);
  background: var(--m-pill);
  border-radius: 6px;
}

.drawer-link .ico svg{
  width: 14px;
  height: 14px;
}

.drawer-link.active{
  background: var(--m-accent) !important;
  color: #1b2430 !important;
  font-weight: 900;
  outline: 2px solid rgba(255,152,0,.55);
}

.drawer-link.active span,
.drawer-link.active .ico,
.drawer-link.active svg{
  color: #1b2430 !important;
  stroke: #1b2430 !important;
}

.drawer-link.active .ico{
  background: rgba(255,255,255,.35) !important;
  border-color: #1b2430 !important;
}

.drawer-link.active::before{
  display: none !important;
  content: none !important;
}

#menu{
  display: none;
}

@media (max-width: 768px){
  .mbar-btn{
    padding: 6px 10px;
    min-height: 36px;
    font-size: 14px;
    gap: 6px;
  }

  .mbar-btn svg{
    width: 18px;
    height: 18px;
  }

  .drawer-link,
.drawer-link span:last-child{
    font-size: 11px;
  }


}

/* =========================================================
   04 STARTSEITE
   Quelle: index_layout_20260903.php – bisheriger Inline-Styleblock
========================================================= */


@keyframes qi-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

@keyframes qi-fadein {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes needleSway {
  0%, 100% { transform: rotate(-3.5deg); }
  50% { transform: rotate(3.5deg); }
}

@keyframes livePulse {
  0% { box-shadow: 0 0 0 0 rgba(34,197,94,.55); }
  70% { box-shadow: 0 0 0 9px rgba(34,197,94,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}


@keyframes liveSoftScan {
  100% { transform: translateX(100%); }
}

@keyframes liveCamPulse {
  0% { box-shadow: 0 0 0 0 rgba(255,59,48,.6); }
  70% { box-shadow: 0 0 0 10px rgba(255,59,48,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,59,48,0); }
}

@keyframes livecamAutoHover {
  0%, 100% {
    transform: translateY(0);
    box-shadow: 0 18px 44px rgba(0,0,0,.14);
  }
  50% {
    transform: translateY(-3px);
    box-shadow: 0 26px 60px rgba(0,0,0,.20);
  }
}


.layout-grid {


  --home-card-radius: 22px;
  --home-inner-radius: 14px;
  --home-pill-radius: 999px;
  --home-card-border: rgba(56,103,214,.22);
  --home-card-bg: rgba(255,255,255,.68);
  --home-card-shadow: 0 14px 34px rgba(15,23,42,.09);

  width: min(1320px, calc(100% - 24px));
  margin: 0 auto;
  padding: 18px 0 46px;
  display: grid;
  gap: 18px 28px;
  align-items: start;
  grid-template-columns: minmax(0, 1fr) 400px;
  grid-template-areas:
    "hero quickinfo"
    "feeling quickinfo"
    "outside live"
    "radar forecast"
    "outdoor_links schnellzugriff"
    "warnung schnellzugriff"
    "intro schnellzugriff"
    "info_aktualitaet schnellzugriff"
    "in_der_naehe schnellzugriff";
}

html.dark .layout-grid {
  --home-card-border: rgba(255,255,255,.14);
  --home-card-bg: rgba(120,120,120,.22);
  --home-card-shadow: 0 14px 34px rgba(0,0,0,.18);
}


.layout-grid .content-card,
.layout-grid .intro-card {
  border: 1px solid var(--home-card-border);
  border-radius: var(--home-card-radius);
  background: var(--home-card-bg);
  box-shadow: var(--home-card-shadow);
  backdrop-filter: blur(8px);
}
.hero-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--home-card-border);
  border-radius: var(--home-card-radius);
  background: var(--home-card-bg);
  box-shadow: var(--home-card-shadow);
}

.hero-image {
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 50%,
    transparent 100%
  );

  mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 50%,
    transparent 100%
  );
}


.weather-feeling { grid-area: feeling; min-width: 0; }
.live-status { grid-area: live; min-width: 0; }
.radar-nowcast-card { grid-area: radar; min-width: 0; }
.three-hour-forecast { grid-area: forecast; min-width: 0; }

#warnbox-container {
  grid-area: warnung;
  min-width: 0;
}

.start-warnbox {
  min-width: 0;
}

.intro-grid { grid-area: intro; min-width: 0; }
.content-weather { grid-area: info_aktualitaet; min-width: 0; }
.content-nearby {
  grid-area: in_der_naehe;
  min-width: 0;
  border: 1px solid rgba(56,103,214,.24);
  border-radius: var(--home-card-radius);
}

.quickinfo-box-wrap {
  grid-area: quickinfo;
  min-width: 0;
  position: sticky;
  top: 18px;
  z-index: 50;
}

.side-links-box {
  grid-area: schnellzugriff;
  min-width: 0;
  position: sticky;
  z-index: 5;
}


.hero-content {
  padding: 32px;
  border-radius: var(--home-card-radius);
  background: transparent;
  backdrop-filter: none;
}

.hero-content h1 {
  max-width: 18ch;
  margin: 0 0 14px auto;
  color: var(--brand);
  line-height: 1.08;
  font-weight: 850;
  text-align: right;
}

.hero-title-main,
.hero-title-sub {
  display: block;
  white-space: nowrap;
}

.hero-title-main {
  font-size: clamp(1.9rem, 3.5vw, 3rem);
}

.hero-title-sub {
  margin-top: 5px;
  font-size: clamp(1.45rem, 2.7vw, 2.35rem);
  font-weight: 800;
}

.hero-subline {
  max-width: 640px;
  color: #5a667a;
  font-size: clamp(1rem, 2vw, 1.25rem);
  line-height: 1.5;
}


.quickinfo-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  padding: 14px;
  border: 1px solid var(--home-card-border);
  border-radius: var(--home-card-radius);
  background: var(--home-card-bg);
  backdrop-filter: blur(8px);
  box-shadow: var(--home-card-shadow);
}

.quickinfo-title {
  margin-bottom: 4px;
  color: var(--brand);
  font-size: 1.15rem;
  font-weight: 800;
  text-align: center;
}

.quickinfo-content {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 170px;
  gap: 12px;
  align-items: center;
}

.quickinfo-summary {
  width: 100%;
  display: grid;
  gap: 7px;
}

.quickinfo-alerts {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 34px;
}

.quickinfo-alerts img { display: block; }
.quickinfo-alerts .blinker { animation: qi-blink 1s infinite; }

.quickinfo-windrose {
  position: relative;
  justify-self: center;
  width: 150px;
  height: 150px;
  display: grid;
  place-items: center;
  animation: qi-fadein 1s ease-out;
}

.quickinfo-windrose .rose {
  width: 150px;
  height: 150px;
  display: block;
  z-index: 1;
}

.quickinfo-windrose .pointer {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 80px;
  height: 80px;
  z-index: 2;
  transform: translate(-50%, -50%);
  transform-origin: center center;
}

#windNeedle {
  width: 100%;
  height: 100%;
  display: block;
  animation: needleSway 4s ease-in-out infinite;
  transform-origin: center center;
}

#windNeedleWrap {
  transition: transform 1.6s cubic-bezier(.22, 1.45, .36, 1);
  transform-origin: center center;
}


.quick-value {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 8px;
  align-items: center;
  padding: 7px 8px;
  border: 1px solid rgba(56,103,214,.22);
  border-radius: var(--home-inner-radius);
  background: rgba(255,255,255,.38);
}

.quick-ico {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: rgba(56,103,214,.12);
  font-size: 1rem;
}

.quick-value span {
  display: block;
  color: #5a667a;
  font-size: .68rem;
  font-weight: 800;
}

.quick-value strong {
  display: block;
  color: #0b1220;
  white-space: nowrap;
  font-size: .86rem;
  font-weight: 900;
  line-height: 1.15;
}

.quick-value.primary { padding: 10px; }
.quick-value.primary .quick-ico {
  width: 34px;
  height: 34px;
  font-size: 1.15rem;
}
.quick-value.primary strong { font-size: 1.05rem; }

.quick-value.secondary {
  opacity: .82;
  padding: 6px 8px;
}
.quick-value.secondary .quick-ico {
  width: 26px;
  height: 26px;
  font-size: .9rem;
}
.quick-value.secondary span { font-size: .64rem; }
.quick-value.secondary strong { font-size: .78rem; }


.weather-feeling {
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 24px 28px;
  border: 1px solid rgba(56,103,214,.22);
  border-radius: var(--home-card-radius);
  background: linear-gradient(135deg, rgba(255,255,255,.72), rgba(235,246,255,.62));
  backdrop-filter: blur(8px);
  box-shadow:
    0 18px 45px rgba(0,0,0,.10),
    0 0 0 1px rgba(255,255,255,.42) inset;
}

.weather-feeling::before,
.live-status::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(56,103,214,.10), transparent);
  transform: translateX(-100%);
  pointer-events: none;
}

.weather-feeling::before { animation: feelingScan 6s linear infinite; }
.live-status::before {
  background: linear-gradient(90deg, transparent, rgba(56,103,214,.12), transparent);
  animation: liveSoftScan 5s linear infinite;
}

.weather-feeling-label {
  position: relative;
  z-index: 1;
  display: inline-flex;
  margin-bottom: 10px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(56,103,214,.10);
  color: #1f4fb8;
  font-size: .75rem;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.weather-feeling-text {
  position: relative;
  z-index: 1;
  color: #0b1220;
  font-size: clamp(1.45rem, 4vw, 2.25rem);
  font-weight: 900;
  line-height: 1.15;
  text-wrap: balance;
}

.weather-calm { background: linear-gradient(135deg, rgba(255,255,255,.72), rgba(220,245,255,.62)); }
.weather-evening { background: linear-gradient(135deg, rgba(255,236,210,.78), rgba(200,220,255,.62)); }
.weather-rain { background: linear-gradient(135deg, rgba(210,230,255,.78), rgba(170,205,235,.66)); }
.weather-wind { background: linear-gradient(135deg, rgba(230,236,242,.82), rgba(200,210,220,.68)); }
.weather-storm {
  background: linear-gradient(135deg, rgba(90,100,115,.88), rgba(40,48,58,.78));
  color: #ffffff;
}
.weather-fog { background: linear-gradient(135deg, rgba(235,238,240,.86), rgba(210,215,220,.72)); }
.weather-frost { background: linear-gradient(135deg, rgba(225,245,255,.88), rgba(185,225,245,.72)); }
.weather-hot { background: linear-gradient(135deg, rgba(255,218,160,.86), rgba(255,170,110,.72)); }


.start-warnbox-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.start-warnbox {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 18px 22px;
  border: 2px solid #fb8c00;
  border-radius: var(--home-card-radius);
  background: linear-gradient(135deg, #fff3cd, #ffe0b2);
  color: #3b2500;
  box-shadow: 0 14px 34px rgba(251,140,0,.22);
  font-size: clamp(1rem, 2vw, 1.25rem);
  font-weight: 800;
  line-height: 1.55;
  transition: transform .18s ease, box-shadow .18s ease;
  cursor: pointer;
}

.start-warnbox-title {
  display: block;
  margin-bottom: 6px;
  color: #c2410c;
  font-size: 1.15em;
}

.start-warnbox-link:hover .start-warnbox {
  transform: translateY(-2px);
  box-shadow: 0 18px 42px rgba(251,140,0,.28);
}


.livecam-preview {
  position: relative;
  overflow: hidden;
  height: 100%;
  min-height: 100%;
  border-radius: var(--home-card-radius);
  transition: transform .35s ease, box-shadow .35s ease;
  animation: livecamAutoHover 6s ease-in-out infinite;
}

.livecam-preview a {
  display: block;
  width: 100%;
  height: 100%;
}

.livecam-preview:hover {
  animation-play-state: paused;
  box-shadow: 0 26px 60px rgba(0,0,0,.20);
}

.livecam-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.livecam-preview::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.28) inset,
    0 0 42px rgba(56,103,214,.16);
}

.livecam-overlay {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 6;
  padding: 10px 14px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--home-inner-radius);
  background: rgba(0,0,0,.34);
  backdrop-filter: blur(8px);
  color: rgba(255,255,255,.92);
  font-size: .92rem;
  font-weight: 800;
  letter-spacing: .01em;
  transition: background .28s ease, transform .28s ease, color .28s ease, border-color .28s ease;
}

.livecam-preview:hover .livecam-overlay {
  background: rgba(0,0,0,.52);
  color: #ffffff;
  border-color: rgba(255,255,255,.22);
  transform: translateY(-4px);
}

.livecam-livebadge {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(0,0,0,.58);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: .85rem;
  font-weight: 900;
  letter-spacing: .08em;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}

.livecam-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff3b30;
  animation: liveCamPulse 1.4s infinite;
}


.live-status {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px 10px;
  margin-top: 0;
  padding: 13px 18px;
  overflow: hidden;
  border: 1px solid rgba(56,103,214,.24);
  border-radius: var(--home-card-radius);
  background: linear-gradient(135deg, rgba(255,255,255,.70), rgba(235,246,255,.58));
  backdrop-filter: blur(8px);
  box-shadow:
    0 14px 34px rgba(0,0,0,.08),
    0 0 0 1px rgba(255,255,255,.45) inset;
  color: #1f4fb8;
  font-size: .95rem;
  font-weight: 850;
  z-index: 5;
}

.live-dot {
  position: relative;
  z-index: 2;
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 rgba(34,197,94,.55);
  animation: livePulse 1.8s infinite;
}

#live-last-time {

  z-index: 2;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(56,103,214,.10);
  color: #173f91;
  white-space: nowrap;
  font-size: .86rem;
  font-weight: 900;
font-family: "IBM Plex Mono", "Roboto Mono", "Courier New", monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: .015em;
  font-weight: 600;
}


.side-links-box {
  padding: 18px;
  border: 1px solid rgba(56,103,214,.24);
  border-radius: var(--home-card-radius);
  background: rgba(255,255,255,.58);
  backdrop-filter: blur(8px);
  box-shadow: 0 14px 34px rgba(0,0,0,.08);
}

.side-links-box h2 {
  margin: 0 0 14px;
  color: var(--brand);
  font-size: 1.15rem;
}

.side-links-box a,
.nearby-links a {
  display: flex;
  align-items: center;
  text-decoration: none;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.side-links-box a {
  gap: 10px;
  margin-bottom: 10px;
  padding: 12px 14px;
  border: 1px solid rgba(56,103,214,.22);
  border-radius: var(--home-inner-radius);
  background: rgba(56,103,214,.10);
  color: #1f4fb8 !important;
  font-weight: 800;
}

.side-links-box a:hover {
  transform: translateY(-2px);
  background: rgba(56,103,214,.18);
  box-shadow: 0 10px 24px rgba(56,103,214,.14);
}

.side-links-box a:last-child { margin-bottom: 0; }


.nearby-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 14px;
}

.nearby-links a {
  gap: 8px;
  padding: 12px 16px;
  border: 1px solid rgba(56,103,214,.28);
  border-radius: var(--home-pill-radius);
  background: rgba(56,103,214,.12);
  color: #1f4fb8 !important;
  font-weight: 700;
}

.nearby-links a:hover {
  transform: translateY(-2px);
  background: rgba(56,103,214,.20);
  border-color: rgba(56,103,214,.42);
  color: #173f91;
  box-shadow: 0 10px 24px rgba(56,103,214,.14);
}


.station-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10050;
  padding: 18px;
  background: rgba(0,0,0,.58);
}

.station-box {
  max-width: 820px;
  margin: 40px auto;
  overflow: hidden;
  border-radius: 18px;
  background: #ffffff;
  color: #111111;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
}

.station-head {
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid rgba(0,0,0,.12);
}

.station-title {
  font-size: 1.4rem;
  font-weight: 900;
}

.station-subtitle { color: #5a667a; }

.station-close,
.station-btn {
  padding: 10px 14px;
  border: 1px solid #3867d6;
  border-radius: 12px;
  background: #ffffff;
  color: #111111;
  font-weight: 800;
  cursor: pointer;
}

.station-actions {
  padding: 14px 16px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.station-list {
  max-height: 60vh;
  overflow: auto;
  padding: 0 16px 16px;
}

.station-list a { color: #3867d6; }


.feature-grid {
  grid-area: outside;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  align-items: stretch;
}

.outside-card {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 14px;
  align-items: center;
  min-height: 260px;
  padding: 20px 24px;
  border: 1px solid rgba(56,103,214,.22);
  border-radius: var(--home-card-radius);
  background: linear-gradient(135deg, rgba(255,255,255,.74), rgba(235,246,255,.62));
  backdrop-filter: blur(8px);
  box-shadow:
    0 16px 38px rgba(0,0,0,.09),
    0 0 0 1px rgba(255,255,255,.38) inset;
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}

.outside-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, rgba(255,255,255,.55), transparent 45%);
  pointer-events: none;
}

.outside-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 24px 54px rgba(0,0,0,.14),
    0 0 0 1px rgba(255,255,255,.38) inset;
}

.outside-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: var(--home-inner-radius);
  background: rgba(56,103,214,.12);
  font-size: 1.6rem;
}

.outside-label {
  margin-bottom: 4px;
  color: #1f4fb8;
  font-size: .75rem;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.outside-title {
  color: #0b1220;
  font-size: clamp(1.25rem, 3vw, 1.7rem);
  font-weight: 900;
  line-height: 1.15;
}

.outside-text {
  margin-top: 5px;
  color: #5a667a;
  font-size: .98rem;
  font-weight: 650;
  line-height: 1.4;
}

.outside-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: var(--home-inner-radius);
  background: rgba(255,255,255,.72);
  color: #7c2d12 !important;
  text-decoration: none;
  font-size: .92rem;
  font-weight: 900;
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}

.outside-good { background: linear-gradient(135deg, rgba(236,253,245,.86), rgba(219,234,254,.66)); }
.outside-rain { background: linear-gradient(135deg, rgba(219,234,254,.88), rgba(191,219,254,.68)); }
.outside-wind { background: linear-gradient(135deg, rgba(241,245,249,.9), rgba(203,213,225,.7)); }
.outside-warning {
  background: linear-gradient(135deg, rgba(255,243,205,.95), rgba(254,215,170,.78));
  border-color: rgba(251,140,0,.45);
}
.outside-cold { background: linear-gradient(135deg, rgba(240,249,255,.95), rgba(186,230,253,.72)); }
.outside-night { background: linear-gradient(135deg, rgba(30,41,59,.92), rgba(51,65,85,.78)); }

.outside-night .outside-label,
.outside-night .outside-title,
.outside-night .outside-text {
  color: #ffffff;
}

.outside-night .outside-icon {
  background: rgba(255,255,255,.12);
}

.outdoor-links-box {
  margin-top: 10px;
}

.outdoor-links-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
  gap: 14px;
  margin-top: 18px;
}

.outdoor-link {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 16px;
  border-radius: var(--home-inner-radius);
  text-decoration: none;
  transition: transform .18s ease,
              box-shadow .18s ease,
              background .18s ease;
  border: 1px solid rgba(56,103,214,.18);
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(8px);
}

.outdoor-link:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(0,0,0,.10);
}

.outdoor-emoji {
  font-size: 2rem;
  flex-shrink: 0;
}

.outdoor-link strong {
  display: block;
  color: #0b1220;
  font-size: 1rem;
}

.outdoor-link small {
  display: block;
  margin-top: 4px;
  color: #5a667a;
  line-height: 1.4;
}

.outdoor-wandern {
  background: linear-gradient(135deg,
    rgba(236,253,245,.86),
    rgba(219,234,254,.66));
}

.outdoor-grillen {
  background: linear-gradient(135deg,
    rgba(255,243,205,.92),
    rgba(254,215,170,.76));
}

.outdoor-fahrrad {
  background: linear-gradient(135deg,
    rgba(219,234,254,.88),
    rgba(191,219,254,.68));
}

.outdoor-baden {
  background: linear-gradient(135deg,
    rgba(224,242,254,.90),
    rgba(186,230,253,.70));
}

.outdoor-outdoor {
  background: linear-gradient(135deg,
    rgba(240,253,244,.92),
    rgba(220,252,231,.72));
}

html.dark .outdoor-link {
  background: rgba(120,120,120,.22);
  border-color: rgba(255,255,255,.10);
}

html.dark .outdoor-link strong {
  color: #ffffff;
}

html.dark .outdoor-link small {
  color: #cbd5e1;
}


.outdoor-links-box {
  grid-area: outdoor_links;
  min-width: 0;
  margin-top: 0;
}


.wind-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wind-line,
.wind-gust-line {
  display: flex;
  flex-direction: column;
}

.wind-gust-line {
  padding-top: 4px;
  border-top: 1px solid rgba(56,103,214,.12);
}


html.dark .quickinfo-box {
  background: rgba(120,120,120,.22) !important;
  border: 1px solid rgba(255,255,255,.12);
}

html.dark .quickinfo-box-wrap {
  background: transparent !important;
}

html.dark .quickinfo-windrose {
  width: 170px;
  height: 170px;
  padding: 8px;
  border-radius: 50%;
  background: #cfd3d8 !important;
}

html.dark .quick-value,
html.dark .side-links-box a,
html.dark .nearby-links a {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.14);
}

html.dark .quick-value span { color: #a9b4c4; }

html.dark .quickinfo-title {
  color: #9fd0ff;
}

html.dark .quick-value strong,
html.dark .weather-feeling-text,
html.dark .outside-title {
  color: #ffffff;
}

html.dark .quick-ico,
html.dark .weather-feeling-label,
html.dark #live-last-time,
html.dark .outside-icon {
  background: rgba(255,255,255,.08);
}

html.dark .hero-content {
  background: transparent !important;
}

html.dark .hero-content h1,
html.dark .side-links-box h2 {
  color: #ffd180;
}

html.dark .hero-subline,
html.dark .station-subtitle,
html.dark .outside-text {
  color: #c6d2df;
}

html.dark .weather-feeling,
html.dark .side-links-box,
html.dark .outside-card {
  border-color: rgba(255,255,255,.14);
  background: rgba(120,120,120,.22);
}

html.dark .weather-feeling {
  box-shadow:
    0 18px 45px rgba(0,0,0,.18),
    0 0 0 1px rgba(255,255,255,.08) inset;
}

html.dark .weather-feeling-label,
html.dark .outside-label,
html.dark .side-links-box a,
html.dark .nearby-links a,
html.dark .live-status {
  color: #9fd0ff !important;
}

html.dark .start-warnbox {
  background: linear-gradient(135deg, rgba(120,53,15,.95), rgba(92,36,10,.9));
  color: #fff7ed;
  border-color: #fb923c;
}

html.dark .start-warnbox-title {
  color: #fdba74;
}

html.dark .station-box {
  background: #111a26;
  color: #ffffff;
}

html.dark .station-head {
  border-bottom-color: rgba(255,255,255,.16);
}

html.dark .station-close,
html.dark .station-btn {
  background: #1b2636;
  color: #ffffff;
  border-color: #45aaf2;
}

html.dark .station-list a {
  color: #8cc8ff;
}

html.dark .side-links-box {
  background: rgba(120,120,120,.22);
}

html.dark .content-nearby {
  border-color: rgba(255,255,255,.14);
}

html.dark .side-links-box a:hover,
html.dark .nearby-links a:hover {
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.18);
}

html.dark .live-status {
  background: rgba(120,120,120,.22);
  box-shadow:
    0 14px 34px rgba(0,0,0,.18),
    0 0 0 1px rgba(255,255,255,.08) inset;
}

html.dark #live-last-time,
html.dark .live-status {
  color: #86efac;
}

html.dark .wind-gust-line {
  border-top-color: rgba(255,255,255,.08);
}

html.dark .outside-link {
  background: rgba(255,255,255,.08);
  color: #9fd0ff !important;
  border: 1px solid rgba(255,255,255,.12);
}

html.dark .outside-link:hover,
html.dark .outside-link:focus-visible {
  background: rgba(255,255,255,.14);
  color: #c7e4ff !important;
}


@media (max-width: 900px){
  .layout-grid {
    width: min(100% - 22px, 1320px);
    padding-top: 8px;
    grid-template-columns: 1fr;
    grid-template-areas:
      "hero"
      "warnung"
      "quickinfo"
      "live"
      "feeling"
      "outside"
      "radar"
      "forecast"
      "outdoor_links"
      "intro"
      "schnellzugriff"
      "info_aktualitaet"
      "in_der_naehe";
  }

  .quickinfo-box-wrap,
  .side-links-box {
    position: static;
  }

  .feature-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px){
  .hero-content h1 {
    max-width: 100%;
  }

  .hero-title-main {
    font-size: clamp(1.65rem, 8vw, 2.25rem);
  }

  .hero-title-sub {
    font-size: clamp(1.2rem, 6vw, 1.7rem);
  }

  .weather-feeling {
    padding: 22px 20px;
    font-size: 1.7rem;
    line-height: 1.2;
  }

  .outside-card {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 18px;
  }

  .outside-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto;
    font-size: 1.8rem;
  }

  .outside-label,
  .outside-title,
  .outside-text {
    text-align: center;
  }

  .outside-link {
    justify-content: center;
    width: 100%;
  }
}

@media (max-width: 480px){
  .quickinfo-box {
    padding: 10px;
    gap: 8px;
  }

  .quickinfo-content {
    grid-template-columns: minmax(0, 1fr) 116px;
    gap: 6px;
  }


  .quickinfo-windrose,
  .quickinfo-windrose .rose,
  html.dark .quickinfo-windrose .rose {
    width: 108px;
    height: 108px;
  }

  .quickinfo-windrose .pointer,
  html.dark .quickinfo-windrose .pointer {
    width: 54px;
    height: 54px;
  }


  html.dark .quickinfo-windrose {
    width: 116px;
    height: 116px;
    padding: 4px;
    box-sizing: border-box;
    display: grid;
    place-items: center;
    justify-self: center;
  }

  html.dark .quickinfo-windrose .rose {
    width: 104px;
    height: 104px;
    justify-self: center;
    align-self: center;
  }

  .quickinfo-alerts {
    min-height: 28px;
    gap: 5px;
  }

  .quick-value {
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 6px;
    padding: 5px 6px;
  }

  .quick-value.primary {
    padding: 7px;
  }

  .quick-ico,
  .quick-value.primary .quick-ico {
    width: 26px;
    height: 26px;
    font-size: .95rem;
  }

  .quick-value span {
    font-size: .62rem;
  }

  .quick-value strong,
  .quick-value.primary strong {
    font-size: .82rem;
  }
}

@media (max-width: 390px){
  .quickinfo-content {
    grid-template-columns: minmax(0, 1fr) 102px;
  }

  .quickinfo-windrose,
  .quickinfo-windrose .rose,
  html.dark .quickinfo-windrose .rose {
    width: 94px;
    height: 94px;
  }

  html.dark .quickinfo-windrose {
    width: 102px;
    height: 102px;
    padding: 4px;
    box-sizing: border-box;
    display: grid;
    place-items: center;
    justify-self: center;
  }

  html.dark .quickinfo-windrose .rose {
    width: 90px;
    height: 90px;
    justify-self: center;
    align-self: center;
  }

  .quickinfo-windrose .pointer,
  html.dark .quickinfo-windrose .pointer {
    width: 47px;
    height: 47px;
  }

  .quick-value strong,
  .quick-value.primary strong {
    font-size: .76rem;
  }
}

#outside-status-container {
  min-width: 0;
}

#outside-status-container .outside-card {
  height: 100%;
}


#live-last-time {
  position: relative;
  overflow: hidden;
}

#live-last-time.live-time-update::after {
  content: "";
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(255,255,255,.15) 35%,
      rgba(255,255,255,.75) 50%,
      rgba(255,255,255,.15) 65%,
      transparent 100%
    );

  transform: translateX(-120%);
  animation: liveTimeSweep .9s ease;
  pointer-events: none;
}

@keyframes liveTimeSweep {
  to {
    transform: translateX(120%);
  }
}

html.dark #live-last-time.live-time-update::after {
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(255,255,255,.06) 35%,
      rgba(255,255,255,.35) 50%,
      rgba(255,255,255,.06) 65%,
      transparent 100%
    );
}


.glossary-text-link{
  color:var(--brand);
  font-weight:700;
  text-decoration:none;
  border-bottom:1px dotted currentColor;
  text-underline-offset:3px;
}
.glossary-text-link:hover,
.glossary-text-link:focus-visible{
  border-bottom-style:solid;
  outline:none;
}


html.dark .content-weather .glossary-text-link {
  color: #8cc8ff;
  border-bottom-color: currentColor;
}

html.dark .content-weather .glossary-text-link:hover,
html.dark .content-weather .glossary-text-link:focus-visible {
  color: #b9dcff;
}


.tomorrow-forecast {
  margin: 22px 0 6px;
  padding: 18px 20px;
  border: 1px solid rgba(56,103,214,.22);
  border-left: 5px solid #3867d6;
  border-radius: var(--home-inner-radius);
  background: rgba(56,103,214,.06);
}

.tomorrow-forecast-kicker {
  margin-bottom: 5px;
  color: #1f4fb8;
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.tomorrow-forecast h2 {
  margin: 0 0 10px;
  font-size: clamp(1.25rem, 3vw, 1.65rem);
  line-height: 1.2;
}

.tomorrow-forecast-answer {
  margin: 0;
  line-height: 1.65;
}

.tomorrow-forecast-eifel {
  margin: 12px 0 0;
  color: #5a667a;
  line-height: 1.55;
}

.tomorrow-forecast-source {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(56,103,214,.16);
  color: #5a667a;
  font-size: .86rem;
}

.tomorrow-forecast-source a {
  color: #1f4fb8;
  font-weight: 800;
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
}

.tomorrow-forecast-source a:hover,
.tomorrow-forecast-source a:focus-visible {
  border-bottom-style: solid;
  outline: none;
}

html.dark .tomorrow-forecast {
  background: rgba(120,120,120,.22);
  border-color: rgba(255,255,255,.14);
  border-left-color: #60a5fa;
}

html.dark .tomorrow-forecast-kicker,
html.dark .tomorrow-forecast-source a {
  color: #9fd0ff;
}

html.dark .tomorrow-forecast h2,
html.dark .tomorrow-forecast-answer {
  color: #ffffff;
}

html.dark .tomorrow-forecast-eifel,
html.dark .tomorrow-forecast-source {
  color: #c6d2df;
}

html.dark .tomorrow-forecast-source {
  border-top-color: rgba(255,255,255,.12);
}


.radar-nowcast-card {
  margin: 0 0 22px;
  padding: 20px 22px;
  background: var(--card, #fff);
  border: 1px solid var(--line, #d9e5f2);
  border-radius: var(--home-card-radius);
  box-shadow: var(--shadow, 0 12px 40px rgba(19,42,79,.08));
}
.radar-nowcast-head { display:flex; align-items:flex-start; gap:14px; }
.radar-nowcast-icon { font-size:2rem; line-height:1; }
.radar-nowcast-kicker { color:var(--muted, #627086); font-size:.86rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; }
.radar-nowcast-title { margin:2px 0 3px; font-size:1.28rem; line-height:1.2; }
.radar-nowcast-text { margin:0; color:var(--muted, #627086); }
.radar-nowcast-card.radar-rain { border-left:5px solid #2f6fed; }
.radar-nowcast-card.radar-soon { border-left:5px solid #4f8fe8; }
.radar-nowcast-card.radar-nearby { border-left:5px solid #7a9fca; }
.radar-nowcast-card.radar-dry { border-left:5px solid var(--success, #1f9d62);
padding: 13px 18px;
}


.radar-nowcast-card.radar-dry .radar-nowcast-head {
  align-items: center;
}

.radar-nowcast-card.radar-dry .radar-nowcast-icon {
  font-size: 1.55rem;
}

.radar-nowcast-card.radar-dry .radar-nowcast-kicker {
  font-size: .76rem;
}

.radar-nowcast-card.radar-dry .radar-nowcast-title {
  display: inline;
  margin: 0;
  font-size: 1.05rem;
}

.radar-nowcast-card.radar-dry .radar-nowcast-text {
  display: inline;
  margin-left: 6px;
  font-size: .92rem;
}

.radar-nowcast-card.radar-dry .radar-nowcast-foot {
  margin-top: 7px;
  padding-left: 2.55rem;
  font-size: .74rem;
}

.radar-nowcast-values { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-top:16px; }
.radar-nowcast-value { padding:10px 12px; background:var(--soft, #eef4fb); border:1px solid var(--line, #d9e5f2); border-radius:var(--home-inner-radius); }
.radar-nowcast-value span { display:block; color:var(--muted, #627086); font-size:.8rem; }
.radar-nowcast-value strong { display:block; margin-top:2px; font-size:1.08rem; }
.radar-timeline { margin-top:18px; }
.radar-bars { height:64px; display:flex; align-items:flex-end; gap:3px; padding:0 1px; border-bottom:1px solid var(--line, #d9e5f2); }
.radar-bar { flex:1 1 0; min-width:2px; height:4px; max-height:60px; border-radius:3px 3px 0 0; background:#b8c8da; }
.radar-bar.wet { background:var(--brand, #2f6fed); }
.radar-axis { display:flex; justify-content:space-between; margin-top:5px; color:var(--muted, #627086); font-size:.76rem; }
.radar-nowcast-foot { margin-top:12px; color:var(--muted, #627086); font-size:.8rem; }


html.dark .radar-nowcast-card {
  background: rgba(120,120,120,.22);
  border-color: rgba(255,255,255,.14);
  box-shadow:
    0 18px 45px rgba(0,0,0,.18),
    0 0 0 1px rgba(255,255,255,.05) inset;
  color: #ffffff;
}

html.dark .radar-nowcast-kicker {
  color: #9fd0ff;
}

html.dark .radar-nowcast-title {
  color: #ffffff;
}

html.dark .radar-nowcast-text {
  color: #c6d2df;
}

html.dark .radar-nowcast-value {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.12);
}

html.dark .radar-nowcast-value span {
  color: #a9b4c4;
}

html.dark .radar-nowcast-value strong {
  color: #ffffff;
}

html.dark .radar-bars {
  border-bottom-color: rgba(255,255,255,.16);
}

html.dark .radar-bar {
  background: rgba(203,213,225,.32);
}

html.dark .radar-bar.wet {
  background: #60a5fa;
  box-shadow: 0 0 8px rgba(96,165,250,.28);
}

html.dark .radar-axis,
html.dark .radar-nowcast-foot {
  color: #a9b4c4;
}

html.dark .radar-nowcast-card.radar-rain {
  border-left-color: #60a5fa;
}

html.dark .radar-nowcast-card.radar-soon {
  border-left-color: #7db6ff;
}

html.dark .radar-nowcast-card.radar-nearby {
  border-left-color: #9bb8d8;
}

html.dark .radar-nowcast-card.radar-dry {
  border-left-color: #4ade80;
}

@media (max-width:640px){
  .radar-nowcast-card { padding:17px; }
  .radar-nowcast-card.radar-dry { padding:11px 13px; }
  .radar-nowcast-card.radar-dry .radar-nowcast-head { gap:10px; }
  .radar-nowcast-card.radar-dry .radar-nowcast-text {
    display:block;
    margin:2px 0 0;
  }
  .radar-nowcast-card.radar-dry .radar-nowcast-foot {
    padding-left:0;
    margin-top:6px;
  }
  .radar-nowcast-values { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .radar-bars { gap:2px; }
}


.three-hour-forecast {
  margin: 0;
  padding: 14px 16px;
  background: var(--card, #fff);
  border: 1px solid var(--line, #d9e5f2);
  border-left: 5px solid #7868d8;
  border-radius: var(--home-card-radius);
  box-shadow: var(--shadow, 0 12px 40px rgba(19,42,79,.08));
}

.three-hour-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 10px;
}

.three-hour-kicker {
  color: var(--muted, #627086);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .045em;
  text-transform: uppercase;
}

.three-hour-head h2 {
  margin: 2px 0 0;
  font-size: 1.12rem;
  line-height: 1.2;
}

.three-hour-head > small {
  color: var(--muted, #627086);
  font-size: .72rem;
  text-align: right;
}

.three-hour-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.three-hour-item {
  padding: 10px 11px;
  background: var(--soft, #eef4fb);
  border: 1px solid var(--line, #d9e5f2);
  border-radius: var(--home-inner-radius);
}

.three-hour-time {
  color: var(--muted, #627086);
  font-size: .74rem;
  font-weight: 800;
}

.three-hour-main {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 3px;
}

.three-hour-icon {
  font-size: 1.3rem;
  line-height: 1;
}

.three-hour-main strong {
  font-size: 1.04rem;
}

.three-hour-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-top: 6px;
  color: var(--muted, #627086);
  font-size: .74rem;
}

.three-hour-foot {
  margin-top: 8px;
  color: var(--muted, #627086);
  font-size: .7rem;
}


html.dark .three-hour-forecast {
  background: rgba(120,120,120,.22);
  border-color: rgba(255,255,255,.14);
  border-left-color: #a78bfa;
  box-shadow:
    0 18px 45px rgba(0,0,0,.18),
    0 0 0 1px rgba(255,255,255,.05) inset;
}

html.dark .three-hour-kicker {
  color: #c4b5fd;
}

html.dark .three-hour-head h2,
html.dark .three-hour-main strong {
  color: #ffffff;
}

html.dark .three-hour-head > small,
html.dark .three-hour-time,
html.dark .three-hour-meta,
html.dark .three-hour-foot {
  color: #b9c5d3;
}

html.dark .three-hour-item {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.12);
}

@media (max-width:640px){
  .three-hour-forecast {
    padding: 12px 13px;
  }

  .three-hour-head {
    display: block;
  }

  .three-hour-head > small {
    display: block;
    margin-top: 3px;
    text-align: left;
  }

  .three-hour-grid {
    grid-template-columns: 1fr;
  }

  .three-hour-item {
    display: grid;
    grid-template-columns: 58px 96px minmax(0, 1fr);
    align-items: center;
    gap: 7px;
    padding: 8px 9px;
  }

  .three-hour-main,
  .three-hour-meta {
    margin-top: 0;
  }
}
/* =========================================================
   PAGE: MESSWERTE
   Nur aktiv wirksam auf <body class="page-messwerte">.
========================================================= */

body.page-messwerte{
  --mw-bg:#eef4fb;
  --mw-text:#17212f;
  --mw-muted:#5e6b7a;
  --mw-card:rgba(255,255,255,.78);
  --mw-card-solid:#ffffff;
  --mw-border:rgba(56,103,214,.22);
  --mw-brand:#3867d6;
  --mw-accent:#ff9800;
  --mw-green:#15803d;
  --mw-red:#dc2626;
  --mw-blue:#1d4ed8;
  --mw-shadow:0 14px 34px rgba(15,23,42,.09);
  --mw-radius:22px;
  --mw-inner-radius:14px;

  margin:0;
  color:var(--mw-text);
  font-family:"Quicksand", Arial, sans-serif;

}

html.dark body.page-messwerte{
  --mw-bg:#081018;
  --mw-text:#e8eef7;
  --mw-muted:#a9b4c4;
  --mw-card:rgba(17,26,38,.88);
  --mw-card-solid:#111a26;
  --mw-border:rgba(94,168,255,.25);
  --mw-brand:#8cc8ff;
  --mw-accent:#ffd27d;
  --mw-green:#5ee08d;
  --mw-red:#ff8a8a;
  --mw-blue:#89b4ff;
  --mw-shadow:0 14px 34px rgba(0,0,0,.22);
}

.page-messwerte .resp-page{
  width:min(100% - 24px, 1320px);
  margin:0 auto;
  padding:18px 0 44px;
}

.page-messwerte .page-hero{
  margin-bottom:20px;
  padding:clamp(20px, 4vw, 34px);
  border:1px solid var(--mw-border);
  border-radius:var(--mw-radius);
  background:var(--mw-card);
  box-shadow:var(--mw-shadow);
  backdrop-filter:blur(10px);
}

.page-messwerte .eyebrow{
  margin:0 0 8px;
  color:var(--mw-accent);
  font-size:.82rem;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.page-messwerte h1{
  margin:0 0 12px;
  color:var(--mw-text);
  font-size:clamp(1.75rem, 4vw, 3.25rem);
  font-weight:800;
  line-height:1.08;
}

.page-messwerte .page-hero p{
  margin:0;
  max-width:850px;
  color:var(--mw-muted);
  font-size:1.05rem;
  line-height:1.7;
}

.page-messwerte .updated{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:12px;
  padding:9px 12px;
  border:1px solid rgba(255,152,0,.20);
  border-radius:999px;
  background:rgba(255,152,0,.12);
  color:var(--mw-accent);
  font-weight:900;
}

.page-messwerte .layout{
  display:grid;
  gap:20px;
}

.page-messwerte .card,
.page-messwerte .table-card{
  border:1px solid var(--mw-border);
  border-radius:var(--mw-radius);
  background:var(--mw-card);
  box-shadow:var(--mw-shadow);
  backdrop-filter:blur(10px);
}

.page-messwerte .card{
  margin-bottom:16px;
  padding:18px;
}

.page-messwerte .card h2,
.page-messwerte .table-card h2{
  margin:0 0 14px;
  color:var(--mw-accent);
  font-size:1.2rem;
  font-weight:800;
}

.page-messwerte .quick-value{
  display:grid;
  grid-template-columns:42px 1fr;
  gap:12px;
  align-items:center;
  margin-top:10px;
  padding:12px;
  border:1px solid var(--mw-border);
  border-radius:var(--mw-inner-radius);
  background:rgba(255,255,255,.42);
}

html.dark .page-messwerte .quick-value{
  background:rgba(255,255,255,.045);
}

.page-messwerte .quick-ico{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:rgba(56,103,214,.11);
  font-size:1.35rem;
}

html.dark .page-messwerte .quick-ico{
  background:rgba(255,255,255,.08);
}

.page-messwerte .quick-value span{
  display:block;
  color:var(--mw-muted);
  font-size:.92rem;
}

.page-messwerte .quick-value strong{
  display:block;
  color:var(--mw-text);
  font-size:1.25rem;
  font-weight:800;
}

.page-messwerte .table-card{
  overflow:hidden;
  margin-bottom:18px;
}

.page-messwerte .table-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:18px 20px;
  border-bottom:1px solid var(--mw-border);
  background:linear-gradient(
    135deg,
    rgba(56,103,214,.14),
    rgba(255,152,0,.09)
  );
}

.page-messwerte .table-head h2{
  margin:0;
}

.page-messwerte .table-head span{
  color:var(--mw-muted);
  font-size:.9rem;
  font-weight:800;
}

.page-messwerte .weather-table{
  padding:10px 18px;
}

.page-messwerte .weather-row{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:16px;
  align-items:center;
  padding:12px 0;
  border-bottom:1px solid var(--mw-border);
}

.page-messwerte .weather-row:last-child{
  border-bottom:none;
}

.page-messwerte .weather-row.simple{
  grid-template-columns:1.4fr 1fr 1.4fr;
}

.page-messwerte .weather-label{
  color:var(--mw-muted);
  font-size:1rem;
  font-weight:600;
}

.page-messwerte .glossary-link{
  display:inline-grid;
  place-items:center;
  width:1.15rem;
  height:1.15rem;
  margin-left:.28rem;
  border:1px solid rgba(56,103,214,.48);
  border-radius:50%;
  color:var(--mw-brand) !important;
  font-size:.72rem;
  font-weight:900;
  line-height:1;
  text-decoration:none;
  vertical-align:.08em;
}

.page-messwerte .glossary-link:hover,
.page-messwerte .glossary-link:focus-visible{
  background:var(--mw-brand);
  color:#fff !important;
  outline:none;
}

.page-messwerte .weather-value{
  color:var(--mw-text);
  font-size:1.1rem;
  font-weight:700;
}

.page-messwerte .weather-meta{
  color:var(--mw-muted);
  font-size:1rem;
  font-weight:600;
}

.page-messwerte .weather-meta.wide{
  grid-column:auto;
}

.page-messwerte .weather-row.calculated{
  background:rgba(56,103,214,.05);
}

.page-messwerte .weather-meta.calculated-note{
  grid-column:span 2;
  font-size:.9rem;
}

.page-messwerte .tone-cloud .weather-value{ color:var(--mw-brand); }
.page-messwerte .tone-air .weather-value{ color:var(--mw-green); }
.page-messwerte .tone-wind .weather-value{ color:var(--mw-red); }
.page-messwerte .tone-rain .weather-value{ color:var(--mw-blue); }

.page-messwerte .muted{
  color:var(--mw-muted);
  opacity:.7;
}

.page-messwerte .legend{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:16px;
  padding:10px 18px;
  border-bottom:1px solid var(--mw-border);
  color:var(--mw-muted);
  font-size:.82rem;
  font-weight:900;
  letter-spacing:.05em;
  text-transform:uppercase;
}

.page-messwerte .legend.simple{
  grid-template-columns:1.4fr 1fr 1.4fr;
}

.page-messwerte code{
  padding:.15rem .35rem;
  border-radius:.45rem;
  background:rgba(56,103,214,.10);
}

@media (min-width:1100px){
  .page-messwerte .layout{
    grid-template-columns:320px minmax(0, 1fr);
    align-items:start;
  }

  .page-messwerte .sidebar{
    position:sticky;
    top:18px;
  }
}

@media (max-width:720px){
  .page-messwerte .resp-page{
    width:100%;
    padding:8px 6px 34px;
    overflow-x:hidden;
  }

  .page-messwerte .page-hero{
    padding:18px;
    border-radius:var(--mw-radius);
  }

  .page-messwerte .table-head{
    display:block;
    padding:12px 10px;
  }

  .page-messwerte .table-head span{
    display:block;
    margin-top:6px;
    font-size:.72rem;
  }

  .page-messwerte .legend{
    display:grid !important;
    grid-template-columns:1.05fr .75fr .75fr .75fr;
    gap:3px;
    padding:6px 4px;
    font-size:.55rem;
    text-align:center;
  }

  .page-messwerte .legend.simple{
    grid-template-columns:1.05fr .75fr .95fr;
  }

  .page-messwerte .legend div:first-child{
    text-align:left;
  }

  .page-messwerte .weather-table{
    padding:4px;
  }

  .page-messwerte .table-card,
  .page-messwerte .weather-table,
  .page-messwerte .layout{
    width:100%;
    max-width:100%;
    min-width:0;
    overflow:hidden;
  }

  .page-messwerte .weather-row{
    grid-template-columns:1.05fr .75fr .75fr .75fr !important;
    gap:3px;
    padding:8px 4px;
  }

  .page-messwerte .weather-row.simple{
    grid-template-columns:1.05fr .75fr .95fr !important;
  }

  .page-messwerte .weather-row.calculated{
    grid-template-columns:1.05fr .75fr .75fr .75fr !important;
  }

  .page-messwerte .weather-meta.calculated-note{
    grid-column:3 / 5;
    font-size:.58rem;
  }

  .page-messwerte .weather-label,
  .page-messwerte .weather-value,
  .page-messwerte .weather-meta{
    min-width:0;
    overflow-wrap:anywhere;
    word-break:break-word;
  }

  .page-messwerte .weather-label{
    font-size:.64rem;
    line-height:1.1;
    text-align:left;
  }

  .page-messwerte .weather-value,
  .page-messwerte .weather-meta{
    font-size:.62rem;
    line-height:1.1;
    text-align:center;
  }

  .page-messwerte .card{
    padding:12px;
  }
}

/* =========================================================
   PAGE: DASHBOARD / DIAGRAMME
   Gekapselt unter body.page-dashboard.
========================================================= */

body.page-dashboard{
  --dash-bg:#eef4fb;
  --dash-text:#17212f;
  --dash-muted:#5e6b7a;
  --dash-card:rgba(255,255,255,.82);
  --dash-card-soft:rgba(255,255,255,.72);
  --dash-card-active:rgba(235,244,255,.92);
  --dash-border:rgba(56,103,214,.22);
  --dash-pill:rgba(255,255,255,.62);
  --dash-pill-border:rgba(56,103,214,.18);
  --dash-brand:#3867d6;
  --dash-accent:#ff9800;
  --dash-shadow:0 14px 34px rgba(15,23,42,.09);
  --dash-radius:22px;
  --dash-inner-radius:14px;
  --dp-text:#d96f00;
  --dp-bg:rgba(255,152,0,.11);
  --dp-border:rgba(255,152,0,.40);

  margin:0;

  color:var(--dash-text);
  font-family:"Quicksand", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

html.dark body.page-dashboard{
  --dash-bg:#081018;
  --dash-text:#e8eef7;
  --dash-muted:#a9b4c4;
  --dash-card:rgba(17,26,38,.88);
  --dash-card-soft:rgba(17,26,38,.82);
  --dash-card-active:rgba(20,32,51,.94);
  --dash-border:rgba(69,170,242,.28);
  --dash-pill:rgba(255,255,255,.055);
  --dash-pill-border:rgba(255,255,255,.13);
  --dash-brand:#8cc8ff;
  --dash-accent:#ffd27d;
  --dash-shadow:0 14px 34px rgba(0,0,0,.22);
  --dp-text:#ffad55;
  --dp-bg:rgba(255,138,26,.10);
  --dp-border:rgba(255,138,26,.42);


}

.page-dashboard .dash-page{
  width:min(1500px, calc(100% - 24px));
  margin:0 auto;
  padding:14px 0 38px;
}

.page-dashboard .dash-hero{
  margin:14px 0;
  padding:24px 20px;
  border:1px solid var(--dash-border);
  border-radius:var(--dash-radius);
  background:var(--dash-card);
  box-shadow:var(--dash-shadow);
  backdrop-filter:blur(10px);
  text-align:center;
}

.page-dashboard .dash-hero h1{
  margin:0 0 8px;
  color:var(--dash-accent);
  font-size:clamp(1.7rem, 3.2vw, 3rem);
  font-weight:800;
  line-height:1.15;
}

.page-dashboard .dash-hero p{
  max-width:980px;
  margin:0 auto;
  color:var(--dash-text);
  font-size:clamp(1rem, 1.4vw, 1.2rem);
  line-height:1.55;
}

.page-dashboard .dash-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin:0 0 14px;
  color:var(--dash-muted);
}

.page-dashboard .pill{
  min-height:36px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border:1px solid var(--dash-pill-border);
  border-radius:999px;
  background:var(--dash-pill);
  color:var(--dash-text);
  font-size:clamp(.95rem, 2.5vw, 1.12rem);
  font-weight:700;
  backdrop-filter:blur(6px);
}

.page-dashboard .pill.daypicker{
  border-color:var(--dp-border);
  background:var(--dp-bg);
  color:var(--dp-text);
}

.page-dashboard .pill.daypicker input[type="date"]{
  min-height:34px;
  border:0;
  outline:none;
  background:transparent;
  color:var(--dp-text);
  font:inherit;
  font-weight:800;
  cursor:pointer;
}

.page-dashboard .date-accent{
  caret-color:transparent;
  user-select:none;
}

.page-dashboard .dash-static-summary{
  margin:0 0 14px;
  padding:16px;
  border:1px solid var(--dash-border);
  border-radius:var(--dash-radius);
  background:var(--dash-card);
  box-shadow:var(--dash-shadow);
  backdrop-filter:blur(8px);
}

.page-dashboard .dash-static-summary h2{
  margin:0 0 8px;
  color:var(--dash-accent);
  font-size:1.15rem;
  font-weight:800;
}

.page-dashboard .dash-static-summary p{
  margin:0;
  color:var(--dash-muted);
  font-weight:700;
  line-height:1.45;
}

.page-dashboard .dash-static-list{
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
  margin:12px 0 0;
  padding:0;
  list-style:none;
}

.page-dashboard .dash-static-list li{
  padding:9px 11px;
  border:1px solid var(--dash-pill-border);
  border-radius:var(--dash-inner-radius);
  background:var(--dash-pill);
  color:var(--dash-text);
  font-weight:800;
}

.page-dashboard .dash-static-list span{
  color:var(--dash-muted);
  font-weight:700;
}

.page-dashboard .grid{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  align-items:stretch;
}

.page-dashboard .card{
  overflow:hidden;
  padding:14px;
  border:1px solid var(--dash-border);
  border-radius:var(--dash-radius);
  background:var(--dash-card-soft);
  box-shadow:var(--dash-shadow);
  cursor:pointer;
  user-select:none;
  backdrop-filter:blur(8px);
  transition:
    transform .18s ease,
    background-color .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}

.page-dashboard .card:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 40px rgba(15,23,42,.12);
}

html.dark .page-dashboard .card:hover{
  box-shadow:0 18px 40px rgba(0,0,0,.28);
}

.page-dashboard .card.large{
  border-width:2px;
  background:var(--dash-card-active);
}

.page-dashboard .card .title{
  margin:0 0 9px;
  color:var(--dash-text);
  font-size:clamp(1.15rem, 2.6vw, 1.55rem);
  font-weight:800;
}

.page-dashboard .card .kpis{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:8px;
}

.page-dashboard .kpi{
  padding:7px 9px;
  border:1px solid var(--dash-pill-border);
  border-radius:var(--dash-inner-radius);
  background:var(--dash-pill);
}

.page-dashboard .kpi .l{
  color:var(--dash-muted);
  font-size:.78rem;
}

.page-dashboard .kpi .v{
  margin-top:2px;
  color:var(--dash-text);
  font-size:clamp(.9rem, 2vw, 1.05rem);
  font-weight:700;
}

.page-dashboard .card.small canvas{
  width:100% !important;
  height:190px !important;
}

.page-dashboard .card.large canvas{
  width:100% !important;
  height:300px !important;
}

.page-dashboard .hint{
  margin:12px 0 0;
  color:var(--dash-muted);
  font-size:.95rem;
  text-align:center;
}

.page-dashboard #kpi-wind-mm{
  white-space:pre-line;
  line-height:1.3;
}

.page-dashboard .kpi-time{
  margin-left:2px;
  font-size:.75em;
  opacity:.65;
}

.page-dashboard .dash-seo-links{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  margin-top:18px;
}

.page-dashboard .dash-seo-links a{
  padding:8px 12px;
  border:1px solid var(--dash-pill-border);
  border-radius:999px;
  background:var(--dash-card);
  color:var(--dash-brand) !important;
  box-shadow:0 6px 16px rgba(15,23,42,.05);
  text-decoration:none;
  font-weight:700;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.page-dashboard .dash-seo-links a:hover,
.page-dashboard .dash-seo-links a:focus-visible{
  transform:translateY(-2px);
  border-color:var(--dash-brand);
  box-shadow:0 10px 22px rgba(15,23,42,.09);
  outline:none;
}

@media (min-width:760px){
  .page-dashboard .dash-static-list{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }
}

@media (min-width:680px){
  .page-dashboard .grid{
    grid-template-columns:repeat(12, 1fr);
  }

  .page-dashboard .card.small{
    grid-column:span 6;
  }

  .page-dashboard .card.large{
    grid-column:1 / -1;
  }

  .page-dashboard .card.large canvas{
    height:380px !important;
  }
}

@media (min-width:1020px){
  .page-dashboard .dash-page{
    width:min(1500px, calc(100% - 40px));
  }

  .page-dashboard .grid{
    gap:14px;
  }

  .page-dashboard .card.small{
    grid-column:span 4;
  }

  .page-dashboard .card.large canvas{
    height:440px !important;
  }

  .page-dashboard .card.small canvas{
    height:210px !important;
  }
}

@media (max-width:679px){
  .page-dashboard .dash-page{
    width:calc(100% - 12px);
    padding-top:8px;
  }

  .page-dashboard .dash-hero{
    padding:18px 14px;
  }

  .page-dashboard .card{
    padding:11px;
  }

  .page-dashboard .dash-meta{
    gap:6px;
  }

  .page-dashboard .pill{
    font-size:.88rem;
  }

  .page-dashboard .card.small canvas{
    height:200px !important;
  }
}

/* =========================================================
   PAGE: VORHERSAGE
   Gekapselt unter body.page-vorhersage.
========================================================= */

body.page-vorhersage{
  --fc-bg:#eef4fb;
  --fc-text:#17212f;
  --fc-muted:#5e6b7a;
  --fc-card:rgba(255,255,255,.82);
  --fc-card-solid:#ffffff;
  --fc-line:rgba(56,103,214,.22);
  --fc-brand:#3867d6;
  --fc-brand2:#45aaf2;
  --fc-accent:#ff9800;
  --fc-icon-bg:#eef3f8;
  --fc-shadow:0 14px 34px rgba(15,23,42,.09);
  --fc-shadow-soft:0 8px 22px rgba(15,23,42,.08);
  --fc-radius:22px;
  --fc-inner-radius:14px;

  margin:0;
  min-height:100vh;

  color:var(--fc-text);
  font-family:"Quicksand", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html.dark body.page-vorhersage{
  --fc-bg:#08111d;
  --fc-text:#e8eef8;
  --fc-muted:#a5b4c8;
  --fc-card:rgba(15,23,42,.86);
  --fc-card-solid:#101827;
  --fc-line:rgba(94,168,255,.24);
  --fc-brand:#78b8ff;
  --fc-brand2:#45d5ff;
  --fc-accent:#ffd27d;
  --fc-icon-bg:#172033;
  --fc-shadow:0 14px 34px rgba(0,0,0,.22);
  --fc-shadow-soft:0 8px 22px rgba(0,0,0,.18);


}

.page-vorhersage a{
  color:var(--fc-brand);
}

.page-vorhersage .resp-page{
  width:min(1180px, calc(100% - 24px));
  margin:0 auto;
  padding:18px 0 44px;
}

.page-vorhersage .forecast-hero{
  display:grid;
  gap:14px;
  margin:10px 0 18px;
  padding:22px;
  border:1px solid var(--fc-line);
  border-radius:var(--fc-radius);
  background:var(--fc-card);
  backdrop-filter:blur(10px);
  box-shadow:var(--fc-shadow);
}

.page-vorhersage .forecast-hero h1{
  margin:0;
  color:var(--fc-accent);
  font-size:clamp(1.7rem, 4.8vw, 3rem);
  font-weight:800;
  line-height:1.08;
}

.page-vorhersage .forecast-hero p{
  max-width:850px;
  margin:0;
  color:var(--fc-muted);
  font-size:clamp(1rem, 2.2vw, 1.15rem);
  line-height:1.6;
}

.page-vorhersage .meta-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  color:var(--fc-muted);
  font-size:.95rem;
}

.page-vorhersage .pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border:1px solid var(--fc-line);
  border-radius:999px;
  background:var(--fc-card-solid);
  color:var(--fc-text);
}

.page-vorhersage .forecast-layout{
  display:grid;
  gap:18px;
}

.page-vorhersage .forecast-list{
  display:grid;
  gap:16px;
}

.page-vorhersage .forecast-card{
  overflow:hidden;
  border:1px solid var(--fc-line);
  border-radius:var(--fc-radius);
  background:var(--fc-card);
  box-shadow:var(--fc-shadow-soft);
  backdrop-filter:blur(10px);
}

.page-vorhersage .forecast-card-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  background:linear-gradient(135deg, var(--fc-brand), var(--fc-brand2));
  color:#fff;
  font-size:1.15rem;
  font-weight:800;
}

.page-vorhersage .forecast-card-header span{
  opacity:.9;
  font-size:.9rem;
  font-weight:600;
}

.page-vorhersage .forecast-card-body{
  display:grid;
  gap:14px;
  padding:14px;
}

.page-vorhersage .forecast-icons{
  display:flex;
  flex-wrap:wrap;
  align-content:flex-start;
  gap:10px;
  padding:10px;
  border:1px solid var(--fc-line);
  border-radius:var(--fc-inner-radius);
  background:var(--fc-icon-bg);
}

.page-vorhersage .forecast-icon{
  width:74px;
  height:74px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:var(--fc-inner-radius);
  background:var(--fc-icon-bg);
}

.page-vorhersage .forecast-icon img{
  display:block;
  max-width:100%;
  max-height:100%;
}

.page-vorhersage .forecast-text{
  padding:14px;
  border:1px solid var(--fc-line);
  border-radius:var(--fc-inner-radius);
  background:var(--fc-card-solid);
  color:var(--fc-text);
  font-size:1rem;
  line-height:1.65;
}

.page-vorhersage .pv-hint{
  display:block;
  margin-top:10px;
  color:var(--fc-muted);
  font-size:.88rem;
}

.page-vorhersage .info-grid{
  display:grid;
  gap:14px;
}

.page-vorhersage .info-card{
  padding:16px;
  border:1px solid var(--fc-line);
  border-radius:var(--fc-radius);
  background:var(--fc-card);
  box-shadow:var(--fc-shadow-soft);
  line-height:1.55;
}

.page-vorhersage .info-card h2{
  margin:0 0 8px;
  color:var(--fc-accent);
  font-size:1.1rem;
  font-weight:800;
}

.page-vorhersage .info-card p{
  margin:0;
  color:var(--fc-muted);
}

.page-vorhersage .webcam-link{
  width:100%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top:14px;
  padding:13px 16px;
  border-radius:var(--fc-inner-radius);
  background:linear-gradient(135deg, var(--fc-brand), var(--fc-brand2));
  color:#fff !important;
  text-decoration:none;
  font-weight:800;
}


.page-vorhersage .pv-forecast-card{
  margin-top:18px;
  padding:16px;
  border:1px solid rgba(245,158,11,.45);
  border-radius:var(--fc-inner-radius);
  background:
    radial-gradient(circle at top right, rgba(250,204,21,.38), transparent 38%),
    linear-gradient(135deg, rgba(255,251,235,.96), rgba(255,247,237,.92));
  box-shadow:0 10px 24px rgba(180,83,9,.14);
}

html.dark .page-vorhersage .pv-forecast-card{
  border-color:rgba(250,204,21,.35);
  background:
    radial-gradient(circle at top right, rgba(250,204,21,.24), transparent 40%),
    linear-gradient(135deg, rgba(69,46,9,.72), rgba(30,41,59,.84));
}

.page-vorhersage .pv-topline{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.page-vorhersage .pv-label{
  color:#92400e;
  font-size:.82rem;
  font-weight:900;
  letter-spacing:.05em;
  text-transform:uppercase;
}

html.dark .page-vorhersage .pv-label{
  color:#facc15;
}

.page-vorhersage .pv-subtitle{
  margin-top:2px;
  color:var(--fc-muted);
  font-size:.9rem;
  font-weight:700;
}

.page-vorhersage .pv-icon{
  width:46px;
  height:46px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  border-radius:var(--fc-inner-radius);
  background:rgba(250,204,21,.28);
  font-size:1.55rem;
}

.page-vorhersage .pv-result-row{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  margin-top:12px;
}

.page-vorhersage .pv-big-value{
  color:#78350f;
  font-size:clamp(2.2rem, 6vw, 3.4rem);
  font-weight:950;
  line-height:.95;
  letter-spacing:-.05em;
}

html.dark .page-vorhersage .pv-big-value{
  color:#fde68a;
}

.page-vorhersage .pv-big-value span{
  margin-left:4px;
  color:var(--fc-muted);
  font-size:1rem;
  font-weight:900;
  letter-spacing:0;
}

.page-vorhersage .pv-quality{
  padding:7px 11px;
  border-radius:999px;
  background:rgba(34,197,94,.16);
  color:#15803d;
  font-size:.86rem;
  font-weight:900;
  white-space:nowrap;
}

.page-vorhersage .pv-forecast-card--medium .pv-quality{
  background:rgba(245,158,11,.18);
  color:#b45309;
}

.page-vorhersage .pv-forecast-card--low .pv-quality{
  background:rgba(100,116,139,.16);
  color:var(--fc-muted);
}

html.dark .page-vorhersage .pv-quality{
  color:#86efac;
}

html.dark .page-vorhersage .pv-forecast-card--medium .pv-quality{
  color:#fcd34d;
}

.page-vorhersage .pv-progress{
  height:12px;
  margin-top:14px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(120,53,15,.14);
}

.page-vorhersage .pv-progress span{
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg, #facc15, #fb923c);
}

.page-vorhersage .pv-details{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px;
  color:#92400e;
  font-size:.86rem;
  font-weight:800;
}

html.dark .page-vorhersage .pv-details{
  color:#fde68a;
}

.page-vorhersage .pv-details span{
  padding:6px 9px;
  border:1px solid rgba(245,158,11,.30);
  border-radius:999px;
  background:rgba(255,255,255,.58);
}

html.dark .page-vorhersage .pv-details span{
  background:rgba(255,255,255,.07);
}


.page-vorhersage .radar-nowcast-mini{
  margin:0 0 18px;
  padding:16px 18px;
  border:1px solid var(--fc-line);
  border-left:5px solid var(--fc-brand2);
  border-radius:var(--fc-radius);
  background:var(--fc-card);
  box-shadow:var(--fc-shadow-soft);
  backdrop-filter:blur(10px);
}

.page-vorhersage .radar-nowcast-mini.wet{
  border-left-color:#f59e0b;
}

.page-vorhersage .radar-nowcast-mini-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.page-vorhersage .radar-nowcast-mini .label{
  color:var(--fc-brand);
  font-size:.8rem;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.page-vorhersage .radar-nowcast-mini h2{
  margin:4px 0 6px;
  color:var(--fc-text);
  font-size:1.18rem;
}

.page-vorhersage .radar-nowcast-mini p{
  margin:0;
  color:var(--fc-text);
  font-weight:800;
  line-height:1.5;
}

.page-vorhersage .radar-nowcast-mini-values{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px;
  color:var(--fc-muted);
  font-size:.9rem;
  font-weight:800;
}

.page-vorhersage .radar-nowcast-mini-values span{
  padding:7px 10px;
  border:1px solid var(--fc-line);
  border-radius:999px;
  background:var(--fc-card-solid);
}

.page-vorhersage .radar-test-pill{
  padding:7px 10px;
  border-radius:999px;
  background:rgba(220,38,38,.12);
  color:#dc2626;
  font-size:.76rem;
  font-weight:900;
  letter-spacing:.05em;
  text-transform:uppercase;
}

@media (min-width:760px){
  .page-vorhersage .forecast-card-body{
    grid-template-columns:minmax(220px, 330px) 1fr;
    align-items:stretch;
  }
}

@media (min-width:1100px){
  .page-vorhersage .forecast-layout{
    grid-template-columns:minmax(0, 1fr) 320px;
    align-items:start;
  }

  .page-vorhersage .info-grid{
    position:sticky;
    top:18px;
  }
}

@media (max-width:640px){
  .page-vorhersage .resp-page{
    width:calc(100% - 12px);
    padding-top:8px;
  }

  .page-vorhersage .forecast-hero{
    padding:18px 16px;
  }

  .page-vorhersage .forecast-card-header{
    align-items:flex-start;
    flex-direction:column;
    gap:4px;
  }

  .page-vorhersage .forecast-card-body{
    padding:10px;
  }

  .page-vorhersage .forecast-icons{
    padding:8px;
  }

  .page-vorhersage .forecast-icon{
    width:66px;
    height:66px;
  }

  .page-vorhersage .forecast-text{
    padding:12px;
  }

  .page-vorhersage .pv-result-row{
    align-items:flex-start;
    flex-direction:column;
  }

  .page-vorhersage .pv-quality{
    white-space:normal;
  }

  .page-vorhersage .radar-nowcast-mini{
    padding:14px;
  }
}

/* =========================================================
   PAGE: WARNUNGEN
   Aus warnungen(7).php übernommen und vollständig gekapselt.
========================================================= */

    body.page-warnungen{
      --bg:#f5f7fb;
      --text:#0b1220;
      --muted:#5f6b7a;
      --card:#ffffff;
      --border:#dbe4f0;

      --shadow:0 10px 30px rgba(15,23,42,.08);
      --radius:24px;
      --gap:12px;
      --size:118px;
    }
    html.dark body.page-warnungen{

      --text:#e8eef7;
      --muted:#a9b4c4;
      --card:#111a26;
      --border:#253449;
      --brand:#45aaf2;
      --shadow:none;
    }
    body.page-warnungen, body.page-warnungen *{box-sizing:border-box}
    body.page-warnungen{
      margin:0;
      color:var(--text);

      font-family:Quicksand, Arial, sans-serif;
    }
    body.page-warnungen .page{
      width:min(1500px, calc(100% - 24px));
      margin:0 auto;
      padding:16px 0 42px;
    }
    body.page-warnungen .hero{

      border-radius:30px;
      padding:24px;
      background:rgba(255,255,255,.72);
      backdrop-filter:blur(8px);

      margin-bottom:18px;
      overflow:hidden;
    }
    html.dark body.page-warnungen .hero{background:rgba(10,16,24,.76)}
    body.page-warnungen .hero-kicker{font-weight:800;margin:0 0 8px;}
    body.page-warnungen .hero h1{margin:0;font-size:clamp(1.8rem,4vw,3.2rem);line-height:1.1}
    body.page-warnungen .hero p{font-size:1.1rem;line-height:1.6;margin:14px 0 0;color:var(--muted)}
    body.page-warnungen .layout{display:grid;gap:18px}
    body.page-warnungen .card{


      border-radius:var(--radius);
      padding:18px;

      overflow:hidden;
    }
    body.page-warnungen .card h2{margin:0 0 14px;color:var(--brand);font-size:1.25rem}
    body.page-warnungen .status-card{display:grid;gap:16px;align-items:center;text-align:center}
    body.page-warnungen .status-pill{
      display:inline-flex;align-items:center;justify-content:center;
      border-radius:999px;padding:10px 16px;font-weight:800;
      background:rgba(56,103,214,.12);color:var(--brand);margin:0 auto;
    }
    body.page-warnungen .keine-warnung{font-size:clamp(1.4rem,3vw,2.4rem);font-weight:800;color:#26a65b}
    body.page-warnungen .warnung-aktiv{font-size:clamp(1.4rem,3vw,2.4rem);font-weight:800;color:#fb8c00}
    body.page-warnungen .warn-icon{max-width:min(520px,100%);height:auto;display:block;margin:0 auto;border-radius:18px}

    body.page-warnungen .start-warnbox{
      width:100%;
      margin:18px 0 0;
      padding:18px 22px;

      border:2px solid #fb8c00;
      background:linear-gradient(135deg, #fff3cd, #ffe0b2);
      color:#3b2500;
      box-shadow:0 14px 34px rgba(251,140,0,.22);
      font-weight:800;
      line-height:1.55;
      font-size:clamp(1rem, 2vw, 1.25rem);
    }
    body.page-warnungen .start-warnbox-title{
      display:block;
      margin-bottom:6px;
      color:#c2410c;
      font-size:1.15em;
    }
    html.dark body.page-warnungen .start-warnbox{
      background:linear-gradient(135deg, rgba(120,53,15,.95), rgba(92,36,10,.9));
      color:#fff7ed;
      border-color:#fb923c;
    }


    body.page-warnungen .warning-group{
      --group-accent:#fb8c00;
      margin-top:18px;
      border-left:10px solid var(--group-accent);
    }
    body.page-warnungen .warning-group-special{--group-accent:#9d3cfb}
    body.page-warnungen .warning-group-head{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:14px;
      margin-bottom:16px;
      padding-bottom:13px;
      border-bottom:1px solid var(--border);
    }
    body.page-warnungen .warning-group-head h2{
      margin:4px 0 0;
      color:var(--text);
      font-size:clamp(1.2rem,2.4vw,1.65rem);
    }
    body.page-warnungen .warning-group-kicker{
      display:block;
      color:var(--group-accent);
      font-size:.8rem;
      font-weight:900;
      letter-spacing:.04em;
      text-transform:uppercase;
    }
    body.page-warnungen .warning-group-pill{
      flex:0 0 auto;
      padding:8px 12px;
      border-radius:999px;
      color:var(--group-accent);
      background:color-mix(in srgb, var(--group-accent) 12%, transparent);
      border:1px solid color-mix(in srgb, var(--group-accent) 35%, transparent);
      font-size:.88rem;
      font-weight:900;
      white-space:nowrap;
    }
    body.page-warnungen .warning-text-box{
      margin-top:18px;
      padding:17px 19px;
      border-radius:20px;
      border:2px solid var(--group-accent);
      background:color-mix(in srgb, var(--group-accent) 10%, var(--card));
      color:var(--text);
      text-align:left;
      line-height:1.58;
      font-weight:750;
      white-space:normal;
    }
    body.page-warnungen .warning-text-box-title{
      display:block;
      margin-bottom:8px;
      color:var(--group-accent);
      font-size:1.08rem;
      font-weight:900;
    }


    /* ==========================================================
       Lokaler Live-Unwetterstatus - klar getrennt von DWD
       ========================================================== */
    body.page-warnungen .section-label{
      display:inline-flex;
      align-items:center;
      gap:8px;
      margin:0 0 10px;
      padding:7px 11px;
      border-radius:999px;
      font-size:.78rem;
      font-weight:900;
      letter-spacing:.04em;
      text-transform:uppercase;
    }
    body.page-warnungen .section-label-local{
      color:#065f46;
      background:rgba(16,185,129,.13);
      border:1px solid rgba(16,185,129,.35);
    }
    body.page-warnungen .section-label-dwd{
      color:var(--brand);
      background:rgba(56,103,214,.10);
      border:1px solid rgba(56,103,214,.28);
    }
    html.dark body.page-warnungen .section-label-local{color:#a7f3d0;background:rgba(16,185,129,.12)}

    body.page-warnungen .unwetter-local-card{
      display:block;
      margin-bottom:18px;
      border:2px solid var(--uw-accent, #94a3b8);
      border-left-width:10px;
      background:
        linear-gradient(135deg, var(--uw-bg, rgba(148,163,184,.10)), rgba(255,255,255,.03)),
        var(--card);
      position:relative;
    }
    body.page-warnungen .unwetter-local-card::before{
      content:"LOKALE LIVE-MESSUNG · KEINE DWD-WARNUNG";
      display:block;
      margin:-18px -18px 16px -18px;
      padding:9px 18px;
      background:var(--uw-accent, #64748b);
      color:#fff;
      font-size:.78rem;
      font-weight:900;
      letter-spacing:.055em;
      text-transform:uppercase;
    }
    body.page-warnungen .unwetter-local-card.uw-none{--uw-accent:#22a66a;--uw-bg:rgba(34,166,106,.10)}
    body.page-warnungen .unwetter-local-card.uw-watch{--uw-accent:#f1c40f;--uw-bg:rgba(241,196,15,.14)}
    body.page-warnungen .unwetter-local-card.uw-warn{--uw-accent:#fb8c00;--uw-bg:rgba(251,140,0,.15)}
    body.page-warnungen .unwetter-local-card.uw-storm{--uw-accent:#e53935;--uw-bg:rgba(229,57,53,.18)}
    body.page-warnungen .unwetter-local-card.uw-unknown, body.page-warnungen .unwetter-local-card.uw-loading{--uw-accent:#64748b;--uw-bg:rgba(100,116,139,.12)}

    body.page-warnungen .uw-live-header{
      display:flex;
      gap:15px;
      align-items:flex-start;
    }
    body.page-warnungen .uw-live-icon{
      width:58px;
      height:58px;
      display:grid;
      place-items:center;
      flex:0 0 auto;
      border-radius:18px;
      background:var(--uw-accent, #64748b);
      color:#fff;
      font-size:1.8rem;
      box-shadow:0 12px 28px rgba(0,0,0,.14);
    }
    body.page-warnungen .uw-live-kicker{
      margin:0 0 4px;
      color:var(--muted);
      font-weight:900;
      font-size:.88rem;
    }
    body.page-warnungen .uw-live-title{
      margin:0;
      color:var(--text);
      font-size:clamp(1.35rem, 2.6vw, 2rem);
      line-height:1.1;
      font-weight:900;
    }
    body.page-warnungen .uw-live-subtitle{
      margin:10px 0 0;
      color:var(--text);
      font-size:1.02rem;
      font-weight:800;
      line-height:1.48;
    }
    body.page-warnungen .uw-proof-box{
      margin-top:14px;
      padding:13px 15px;
      border-radius:18px;
      background:rgba(255,255,255,.68);
      border:1px solid var(--border);
      line-height:1.45;
      font-weight:750;
    }
    html.dark body.page-warnungen .uw-proof-box{background:rgba(255,255,255,.06)}
    body.page-warnungen .uw-proof-box strong{
      display:block;
      margin-bottom:4px;
      color:var(--text);
      font-weight:900;
    }
    body.page-warnungen .uw-proof-box em{
      font-style:normal;
      color:var(--uw-accent, var(--brand));
      font-weight:900;
    }
    body.page-warnungen .uw-badges{
      display:flex;
      flex-wrap:wrap;
      gap:7px;
      margin-top:12px;
    }
    body.page-warnungen .uw-badge{
      display:inline-flex;
      align-items:center;
      border-radius:999px;
      padding:6px 10px;
      background:rgba(255,255,255,.72);
      border:1px solid var(--border);
      color:var(--text);
      font-size:.78rem;
      font-weight:900;
    }
    html.dark body.page-warnungen .uw-badge{background:rgba(255,255,255,.08)}
    body.page-warnungen .uw-badge-live{
      color:#b91c1c;
      background:rgba(239,68,68,.11);
      border-color:rgba(239,68,68,.32);
    }
    html.dark body.page-warnungen .uw-badge-live{color:#fecaca}

    body.page-warnungen .uw-category-row{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      margin-top:14px;
    }
    body.page-warnungen .uw-category-chip{
      display:inline-flex;
      align-items:center;
      gap:7px;
      border-radius:999px;
      padding:7px 11px;
      background:rgba(255,255,255,.58);
      border:1px solid var(--border);
      font-size:.9rem;
      font-weight:800;
    }
    html.dark body.page-warnungen .uw-category-chip{background:rgba(255,255,255,.07)}
    body.page-warnungen .uw-category-chip span:first-child{color:var(--muted)}
    body.page-warnungen .uw-category-chip.uw-chip-warn{border-color:rgba(251,140,0,.7)}
    body.page-warnungen .uw-category-chip.uw-chip-storm{border-color:rgba(229,57,53,.75)}

    body.page-warnungen .uw-measured-grid{
      display:grid;
      grid-template-columns:repeat(4,minmax(0,1fr));
      gap:10px;
      margin-top:14px;
    }
    body.page-warnungen .uw-measured-grid div{
      border:1px solid var(--border);
      border-radius:16px;
      padding:11px 12px;
      background:rgba(255,255,255,.52);
    }
    html.dark body.page-warnungen .uw-measured-grid div{background:rgba(255,255,255,.055)}
    body.page-warnungen .uw-measured-grid span, body.page-warnungen .uw-measured-grid strong{display:block}
    body.page-warnungen .uw-measured-grid span{
      font-size:.8rem;
      color:var(--muted);
      font-weight:800;
      margin-bottom:3px;
    }
    body.page-warnungen .uw-measured-grid strong{font-size:1rem;font-weight:900}
    body.page-warnungen .uw-live-footer{
      display:flex;
      flex-wrap:wrap;
      gap:7px 14px;
      margin-top:13px;
      color:var(--muted);
      font-size:.86rem;
      font-weight:800;
    }
    body.page-warnungen .uw-loading-text{margin:0;color:var(--muted);font-weight:900}

    body.page-warnungen .source-split-note{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:12px;
      margin:0 0 18px;
    }
    body.page-warnungen .source-split-note > div{
      border:1px solid var(--border);
      border-radius:18px;
      padding:12px 14px;
      background:var(--card);
      box-shadow:var(--shadow);
      line-height:1.45;
      font-size:.94rem;
    }
    body.page-warnungen .source-split-note strong{display:block;margin-bottom:4px;color:var(--text)}
    body.page-warnungen .source-split-note span{color:var(--muted);font-weight:700}

    body.page-warnungen .dwd-warning-card{
      border-left:10px solid var(--brand);
      text-align:center;
    }
    body.page-warnungen .dwd-block-head{
      text-align:left;
      margin-bottom:10px;
      padding-bottom:12px;
      border-bottom:1px solid var(--border);
    }
    body.page-warnungen .dwd-block-head h2{
      margin:0;
      color:var(--text);
      font-size:clamp(1.25rem,2.4vw,1.7rem);
      line-height:1.15;
    }
    body.page-warnungen .dwd-block-head p{
      margin:8px 0 0;
      color:var(--muted);
      font-weight:700;
      line-height:1.45;
    }

    @keyframes pulsate{0%{transform:scale(.92);opacity:.35}80%{opacity:1}100%{transform:scale(1.08);opacity:.35}}
    body.page-warnungen .box-row{display:flex;gap:var(--gap);align-items:stretch;justify-content:center;flex-wrap:wrap}
    body.page-warnungen .wbox{
      width:var(--size);height:var(--size);border-radius:999px;
      background:transparent;border:5px dashed var(--c);
      display:flex;flex-direction:column;align-items:center;justify-content:center;
      text-align:center;line-height:1.12;padding:8px;color:var(--text);
    }
    body.page-warnungen .wbox.active{background:var(--cb);border-style:solid;transform-origin:center;box-shadow:0 0 0 6px rgba(255,255,255,.25)}
    body.page-warnungen .wbox.active .line1{color:#fff}body.page-warnungen .wbox.active .line2, body.page-warnungen .wbox.active .line3, body.page-warnungen .wbox.active .line4{color:#101010}
    body.page-warnungen .wbox .line1{font-size:.78rem;font-weight:700;color:var(--muted)}
    body.page-warnungen .wbox .line2{font-size:1rem;font-weight:900}
    body.page-warnungen .wbox .line3{font-size:.82rem;font-weight:700}
    body.page-warnungen .wbox .line4{display:none;font-size:.72rem;font-weight:900;margin-top:3px}body.page-warnungen .wbox.active .line4{display:block}
    body.page-warnungen .c-green{--c:#B1CE5B;--cb:#C5E566}body.page-warnungen .c-yellow{--c:#E5D336;--cb:#FFEB3C}body.page-warnungen .c-orange{--c:#E17E00;--cb:#FB8C00}body.page-warnungen .c-red{--c:#E43A36;--cb:#E9615E}body.page-warnungen .c-darkred{--c:#880E4F;--cb:#9F3E72}body.page-warnungen .c-extreme{--c:#3f062b;--cb:#5d0a40}body.page-warnungen .c-magenta{--c:#ff6dff;--cb:#ff8dff}body.page-warnungen .c-lila{--c:#cc9afb;--cb:#dcaafb}body.page-warnungen .c-violett{--c:#9d3cfb;--cb:#ad4cfb}
    body.page-warnungen .c-darkred.active .line1, body.page-warnungen .c-darkred.active .line2, body.page-warnungen .c-darkred.active .line3, body.page-warnungen .c-extreme.active .line1, body.page-warnungen .c-extreme.active .line2, body.page-warnungen .c-extreme.active .line3, body.page-warnungen .c-magenta.active .line1, body.page-warnungen .c-magenta.active .line2, body.page-warnungen .c-magenta.active .line3, body.page-warnungen .c-lila.active .line1, body.page-warnungen .c-lila.active .line2, body.page-warnungen .c-lila.active .line3, body.page-warnungen .c-violett.active .line1, body.page-warnungen .c-violett.active .line2, body.page-warnungen .c-violett.active .line3{color:#fff}
    body.page-warnungen .c-magenta.active, body.page-warnungen .c-lila.active, body.page-warnungen .c-violett.active, body.page-warnungen .c-orange.active, body.page-warnungen .c-red.active, body.page-warnungen .c-darkred.active, body.page-warnungen .c-extreme.active{animation:pulsate 2.6s ease-out infinite}

    body.page-warnungen .media-grid{display:grid;gap:16px}
    body.page-warnungen .media-card img{width:100%;height:auto;display:block;border-radius:18px;background:#eef2f7}
    body.page-warnungen .caption{font-size:.9rem;color:var(--muted);margin-top:8px;text-align:right}
    body.page-warnungen .source{color:var(--muted);font-size:.95rem;line-height:1.5}
    body.page-warnungen .actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
    body.page-warnungen .button{display:inline-flex;align-items:center;justify-content:center;padding:10px 14px;border:1px solid var(--border);color:var(--text);text-decoration:none;font-weight:700;background:rgba(255,255,255,.05);}


    body.page-warnungen .glossar-info{
      display:inline-grid;place-items:center;
      width:1.35em;height:1.35em;margin-left:.28em;
      border:1px solid currentColor;border-radius:999px;
      color:var(--brand);text-decoration:none;
      font-size:.62em;font-weight:900;line-height:1;
      vertical-align:.18em;
    }
    body.page-warnungen .glossar-info:hover, body.page-warnungen .glossar-info:focus-visible{
      background:var(--brand);color:#fff;outline:none;
    }
    body.page-warnungen .glossar-mini-nav{display:flex;flex-wrap:wrap;gap:8px}
    body.page-warnungen .glossar-mini-nav a{
      display:inline-flex;align-items:center;
      padding:7px 10px;border:1px solid var(--border);border-radius:999px;
      color:var(--brand);text-decoration:none;font-weight:800;font-size:.88rem;
      background:color-mix(in srgb, var(--brand) 7%, transparent);
    }
    body.page-warnungen .glossar-mini-nav a:hover, body.page-warnungen .glossar-mini-nav a:focus-visible{
      border-color:var(--brand);background:color-mix(in srgb, var(--brand) 14%, transparent);outline:none;
    }
    body.page-warnungen .uw-measured-grid a{color:inherit;text-decoration:none;border-bottom:1px dotted currentColor}
    body.page-warnungen .uw-measured-grid a:hover, body.page-warnungen .uw-measured-grid a:focus-visible{color:var(--brand);outline:none}


    @media (max-width:760px){
      body.page-warnungen .uw-measured-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
      body.page-warnungen .source-split-note{grid-template-columns:1fr}
      body.page-warnungen .warning-group-head{flex-direction:column}
      body.page-warnungen .warning-group-pill{white-space:normal}
    }
    @media (max-width:440px){
      body.page-warnungen .uw-live-header{align-items:flex-start}
      body.page-warnungen .uw-live-icon{width:48px;height:48px;font-size:1.45rem;border-radius:15px}
      body.page-warnungen .uw-measured-grid{grid-template-columns:1fr}
    }

    @media (min-width:520px){body.page-warnungen{--size:138px}}
    @media (min-width:900px){
      body.page-warnungen{--size:150px;--gap:14px}
      body.page-warnungen .layout{grid-template-columns:minmax(0,1fr) 360px;align-items:start}
      body.page-warnungen .side{position:sticky;top:18px;display:grid;gap:18px}
      body.page-warnungen .media-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
    }


body.page-warnungen{
  --radius:22px;
  --ew-warn-inner-radius:14px;


}


body.page-warnungen .hero-kicker,
body.page-warnungen .hero h1,
body.page-warnungen .side .card > h2,
body.page-warnungen main > .card[style] > h2{
  color:var(--ew-warn-accent);
}


body.page-warnungen .warn-icon,
body.page-warnungen .warning-text-box,
body.page-warnungen .uw-proof-box,
body.page-warnungen .uw-live-icon,
body.page-warnungen .source-split-note > div,
body.page-warnungen .uw-measured-grid div,
body.page-warnungen .media-card img{
  border-radius:var(--ew-warn-inner-radius);
}

body.page-warnungen .start-warnbox{
  border-radius:22px;
}

body.page-warnungen .status-pill,
body.page-warnungen .warning-group-pill,
body.page-warnungen .section-label,
body.page-warnungen .uw-badge,
body.page-warnungen .uw-category-chip,
body.page-warnungen .glossar-mini-nav a{
  border-radius:999px;
}

@media (max-width:760px){
  body.page-warnungen .page{
    width:calc(100% - 12px);
    padding-top:8px;
  }

  body.page-warnungen .hero{
    padding:18px 16px;
  }

  body.page-warnungen .card{
    padding:14px;
  }

  body.page-warnungen .unwetter-local-card::before{
    margin:-14px -14px 14px -14px;
    padding-inline:14px;
  }
}

/* =========================================================
   WARNUNGEN – sichtbare Design-Angleichung
   Warnfarben / Warnstufen selbst bleiben unverändert.
========================================================= */

body.page-warnungen{
  --bg:#eef4fb;
  --card:rgba(255,255,255,.82);
  --border:rgba(56,103,214,.22);
  --brand:#3867d6;
  --ew-warn-accent:#ff9800;
  --shadow:0 14px 34px rgba(15,23,42,.09);
}

html.dark body.page-warnungen{
  --bg:#081018;
  --card:rgba(17,26,38,.88);
  --border:rgba(94,168,255,.25);
  --brand:#8cc8ff;
  --ew-warn-accent:#ffd27d;
  --shadow:0 14px 34px rgba(0,0,0,.22);
}


body.page-warnungen .hero{
  border:1px solid var(--border);
  border-radius:22px;
  background:var(--card);
  box-shadow:var(--shadow);
  backdrop-filter:blur(10px);
}

html.dark body.page-warnungen .hero{
  background:var(--card);
}

body.page-warnungen .hero-kicker{
  color:var(--brand);
}

body.page-warnungen .hero h1{
  color:var(--ew-warn-accent);
  font-weight:800;
}

body.page-warnungen .card{
  border:1px solid var(--border);
  border-radius:22px;
  background:var(--card);
  box-shadow:var(--shadow);
  backdrop-filter:blur(8px);
}


body.page-warnungen .side .card > h2,
body.page-warnungen main > .card:not(.warning-group):not(.dwd-warning-card):not(.unwetter-local-card) > h2,
body.page-warnungen .dwd-block-head h2{
  color:var(--ew-warn-accent);
  font-weight:800;
}


body.page-warnungen .status-pill{
  border:1px solid rgba(56,103,214,.20);
  background:rgba(56,103,214,.10);
}

html.dark body.page-warnungen .status-pill{
  border-color:rgba(140,200,255,.20);
  background:rgba(140,200,255,.08);
}

body.page-warnungen .source-split-note > div,
body.page-warnungen .uw-proof-box,
body.page-warnungen .uw-measured-grid div{
  border-color:var(--border);
  border-radius:14px;
}

body.page-warnungen .media-card img,
body.page-warnungen .button{
  border-radius:14px;
}


body.page-warnungen .warning-group{
  box-shadow:var(--shadow);
}

body.page-warnungen .warning-text-box{
  border-radius:14px;
}

@media (max-width:760px){
  body.page-warnungen .hero{
    padding:18px 16px;
  }

  body.page-warnungen .card{
    padding:14px;
  }
}

/* =========================================================
   PAGE: KAMERA
   Aus der hochgeladenen kamera.php übernommen und gekapselt.
========================================================= */

  body.page-kamera{
    --bg:#f5f7fb;
    --text:#0b1220;
    --muted:#5a667a;
    --card:rgba(255,255,255,.82);


    --accent:#f59e0b;
    --shadow:0 16px 40px rgba(15,23,42,.10);
    --radius:24px;
  }

  html.dark body.page-kamera{


    --card:rgba(17,26,38,.86);

    --border:rgba(69,170,242,.30);
    --brand:#45aaf2;

    --shadow:0 16px 40px rgba(0,0,0,.28);
  }

  body.page-kamera, body.page-kamera *{
    box-sizing:border-box;
  }

  body.page-kamera{
    margin:0;
    font-family:Quicksand, Arial, sans-serif;
    color:var(--text);

  }


  body.page-kamera a{
    color:var(--brand);
    text-decoration:none;
    font-weight:700;
  }

  body.page-kamera a:hover{
    color:var(--accent);
  }

  body.page-kamera .resp-page{
    width:min(1320px, calc(100% - 24px));
    margin:0 auto;
    padding:18px 0 46px;
  }

  body.page-kamera .page-hero{
    padding:22px 24px;
    margin-bottom:18px;

    border:1px solid var(--border);
    border-radius:var(--radius);

    backdrop-filter:blur(10px);
  }

  body.page-kamera .eyebrow{
    margin:0 0 8px;

    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.09em;
    font-size:.78rem;
  }

  body.page-kamera .page-hero h1{
    margin:0;
    font-size:clamp(1.75rem, 4vw, 3rem);
    line-height:1.05;
    color:var(--text);
  }

  body.page-kamera .page-hero p{
    margin:10px 0 0;
    color:var(--muted);
    line-height:1.6;
    max-width:780px;
  }

  body.page-kamera .page-hero .btn{
    border-radius:14px;
    color:var(--brand);
    font-weight:900;
    box-shadow:0 8px 18px rgba(15,23,42,.08);
  }

  body.page-kamera .page-hero .btn:hover{
    border-color:var(--accent);
    color:var(--accent);
  }

  body.page-kamera .camera-layout{
    display:grid;
    gap:18px;
  }

  body.page-kamera .camera-card, body.page-kamera .info-card{

    border:1px solid var(--border);
    border-radius:var(--radius);

    backdrop-filter:blur(10px);
    overflow:hidden;
  }

  body.page-kamera .camera-toolbar{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    padding:14px;
    border-bottom:1px solid var(--border);
  }

  body.page-kamera .actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
  }

  body.page-kamera .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:44px;
    padding:10px 14px;
    border-radius:999px;
    border:1px solid var(--border);
    background:var(--card-solid);
    color:var(--text);
    font-weight:800;
    box-shadow:0 4px 14px rgba(15,23,42,.06);
  }

  body.page-kamera .status{
    color:var(--muted);
    font-size:.95rem;
    font-weight:700;
  }

  body.page-kamera .note{
    padding:0 16px 16px;
    color:var(--muted);
    line-height:1.55;
    font-weight:600;
  }

  body.page-kamera .side-grid{
    display:grid;
    gap:18px;
  }

  body.page-kamera .info-card{
    padding:18px;
  }

  body.page-kamera .info-card h2{
    margin:0 0 12px;
    color:var(--brand);
    font-size:1.25rem;
  }

  body.page-kamera .visibility-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
  }

  body.page-kamera .visibility-item{
    display:grid;
    grid-template-columns:46px 1fr;
    gap:12px;
    align-items:center;
    padding:12px;
    border:1px solid var(--border);
    border-radius:18px;
    background:rgba(255,255,255,.36);
  }

  html.dark body.page-kamera .visibility-item{
    background:rgba(255,255,255,.04);
  }

  body.page-kamera .visibility-item img{
    max-width:34px;
    max-height:34px;
    justify-self:center;
  }

  body.page-kamera .visibility-item strong{
    display:block;
  }

  body.page-kamera .visibility-item span{
    color:var(--muted);
    font-weight:600;
  }

  body.page-kamera .explain{
    color:var(--muted);
    line-height:1.65;
    margin:12px 0 0;
  }

  body.page-kamera .current-distance{
    display:inline-flex;
    margin-top:10px;
    padding:8px 12px;
    border-radius:999px;

    color:var(--brand);
    font-weight:800;
  }

  body.page-kamera .camera-stage{
    position:relative;
    padding:12px;
  }

  body.page-kamera .camera-stage img.webcam, body.page-kamera .camera-stage img.loading-badge{
    display:block;
    width:100%;
    height:auto;
    border-radius:20px;
    border:1px solid var(--border);
    background:#111;
  }

  body.page-kamera .camera-stage img.webcam{
    position:relative;
    z-index:2;
    transition:opacity .3s ease;
  }

  body.page-kamera .camera-stage img.loading-badge{
    position:absolute;
    left:12px;
    top:12px;
    width:calc(100% - 24px);
    height:auto;
    z-index:1;
    pointer-events:none;
  }

  body.page-kamera .webcam.is-broken{
    opacity:0;
  }

  @media (min-width:900px){
    body.page-kamera .camera-layout{
      grid-template-columns:minmax(0, 1fr) 340px;
      align-items:start;
    }

    body.page-kamera .side-grid{
      position:sticky;
      top:18px;
    }
  }

  @media (min-width:1160px){
    body.page-kamera .visibility-grid{
      grid-template-columns:1fr;
    }
  }

  @media (max-width:560px){

    body.page-kamera .resp-page{
      width:min(100% - 14px, 1320px);
      padding-top:8px;
    }

    body.page-kamera .page-hero{
      border-radius:24px;
      padding:18px;
    }

    body.page-kamera .camera-stage{
      padding:8px;
    }

    body.page-kamera .camera-stage img.webcam{
      border-radius:16px;
    }

    body.page-kamera .camera-stage img.loading-badge{
      left:8px;
      top:8px;
      width:calc(100% - 16px);
      border-radius:16px;
    }

    body.page-kamera .camera-toolbar{
      align-items:flex-start;
    }

    body.page-kamera .btn,
body.page-kamera .actions{
      width:100%;
    }


  }

/* =========================================================
   KAMERA – sichtbare Design-Angleichung
========================================================= */

body.page-kamera{
  --bg:#eef4fb;
  --text:#17212f;
  --muted:#5e6b7a;
  --card:rgba(255,255,255,.80);
  --card-solid:#ffffff;
  --border:rgba(56,103,214,.22);
  --brand:#3867d6;
  --accent:#ff9800;
  --shadow:0 14px 34px rgba(15,23,42,.09);
  --radius:22px;
  --camera-inner-radius:14px;
}

html.dark body.page-kamera{
  --bg:#081018;
  --text:#e8eef7;
  --muted:#a9b4c4;
  --card:rgba(17,26,38,.88);
  --card-solid:#111a26;
  --border:rgba(94,168,255,.25);
  --brand:#8cc8ff;
  --accent:#ffd27d;
  --shadow:0 14px 34px rgba(0,0,0,.22);
}

body.page-kamera .page-hero{
  border-radius:22px;
  background:var(--card);
  box-shadow:var(--shadow);
}

body.page-kamera .eyebrow{
  color:var(--brand);
}

body.page-kamera .page-hero h1{
  color:var(--accent);
  font-weight:800;
}

body.page-kamera .camera-card,
body.page-kamera .info-card{
  border-radius:22px;
  background:var(--card);
  box-shadow:var(--shadow);
}

body.page-kamera .info-card h2{
  color:var(--accent);
  font-weight:800;
}

body.page-kamera .visibility-item{
  border-radius:var(--camera-inner-radius);
  background:rgba(255,255,255,.48);
}

html.dark body.page-kamera .visibility-item{
  background:rgba(255,255,255,.055);
}

body.page-kamera .camera-stage img.webcam,
body.page-kamera .camera-stage img.loading-badge{
  border-radius:var(--camera-inner-radius);
}

body.page-kamera .page-hero .btn{
  border-radius:999px;
}

body.page-kamera .current-distance{
  border:1px solid rgba(56,103,214,.18);
  background:rgba(56,103,214,.10);
}

html.dark body.page-kamera .current-distance{
  border-color:rgba(140,200,255,.18);
  background:rgba(140,200,255,.08);
}

body.page-kamera .camera-toolbar{
  background:rgba(255,255,255,.18);
}

html.dark body.page-kamera .camera-toolbar{
  background:rgba(255,255,255,.025);
}

@media (max-width:560px){
  body.page-kamera .resp-page{
    width:calc(100% - 12px);
  }

  body.page-kamera .page-hero{
    border-radius:22px;
    padding:18px 16px;
  }

  body.page-kamera .camera-stage img.webcam,
  body.page-kamera .camera-stage img.loading-badge{
    border-radius:14px;
  }
}

/* =========================================================
   PAGE: REKORDWERTE
   Aus rekordwerte(5).php übernommen und gekapselt.
========================================================= */

    body.page-rekordwerte{
      --rw-bg:#f5f7fb;
      --rw-text:#0b1220;
      --rw-muted:#5a667a;
      --rw-card:#ffffff;
      --rw-soft:#eef3fb;

      --rw-pill:#f3f5f8;
      --rw-pill-border:#e3e7ee;

      --rw-shadow:0 10px 28px rgba(15,23,42,.08);

    }

    html.dark body.page-rekordwerte{
      --rw-bg:#0b0f14;


      --rw-card:#111a26;
      --rw-soft:#0f1724;
      --rw-border:#45aaf2;
      --rw-pill:#0f1724;
      --rw-pill-border:#273247;

      --rw-shadow:none;
    }

    body.page-rekordwerte{
      margin:0;
      font-family:Quicksand,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;

      color:var(--rw-text);
    }

    body.page-rekordwerte .rw-page{
      width:min(1480px, calc(100% - 24px));
      margin:0 auto;
      padding:14px 0 42px;
    }

    body.page-rekordwerte .rw-hero{
      position:relative;
      overflow:hidden;
      border:1px solid rgba(56,103,214,.25);
      border-radius:30px;
      background:
        radial-gradient(circle at top left, rgba(255,152,0,.20), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,.86), rgba(238,243,251,.86));

      padding:clamp(20px, 4vw, 42px);
      margin:18px 0;
    }

    html.dark body.page-rekordwerte .rw-hero{
      background:
        radial-gradient(circle at top left, rgba(69,170,242,.18), transparent 34%),
        linear-gradient(135deg, rgba(17,26,38,.92), rgba(9,14,22,.92));
    }

    body.page-rekordwerte .rw-hero h1{
      margin:0 0 10px;
      font-size:clamp(1.65rem, 4vw, 3.25rem);
      line-height:1.08;
      letter-spacing:-.03em;
    }

    body.page-rekordwerte .rw-hero p{
      max-width:860px;
      margin:0;
      color:var(--rw-muted);
      font-size:clamp(1rem, 1.5vw, 1.2rem);
      line-height:1.6;
      font-weight:600;
    }

    body.page-rekordwerte .rw-shell{
      display:grid;
      grid-template-columns:1fr;
      gap:18px;
      align-items:start;
    }

    body.page-rekordwerte .rw-sidebar, body.page-rekordwerte .rw-main-card{
      border:1px solid rgba(56,103,214,.25);

      border-radius:var(--rw-radius);

    }

    body.page-rekordwerte .rw-sidebar{
      padding:18px;
    }

    body.page-rekordwerte .rw-sidebar h2, body.page-rekordwerte .rw-main-card h2{
      margin:0 0 10px;
      color:var(--rw-border);
      font-size:1.25rem;
    }

    body.page-rekordwerte .rw-sidebar p{
      margin:0 0 12px;
      color:var(--rw-muted);
      line-height:1.55;
      font-weight:600;
    }

    body.page-rekordwerte .rw-status-row{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      align-items:center;
      margin-top:12px;
    }

    body.page-rekordwerte .rw-pill{
      border:1px solid var(--rw-pill-border);
      background:var(--rw-pill);
      padding:7px 11px;

      display:inline-flex;
      gap:8px;
      align-items:center;
      font-size:.95rem;
      font-weight:800;
      color:var(--rw-text);
    }

    body.page-rekordwerte .rw-pill-blue{
      background:#3867d6;
      border-color:#3867d6;
      color:#fff;
    }

    html.dark body.page-rekordwerte .rw-pill-blue{
      background:#45aaf2;
      border-color:#45aaf2;
      color:#07111f;
    }

    body.page-rekordwerte .rw-main-card{
      padding:18px;
      min-width:0;
    }

    body.page-rekordwerte #rangeText{
      color:var(--rw-muted);
      font-weight:700;
      margin-top:4px;
    }

    body.page-rekordwerte .grid{
      display:grid;
      grid-template-columns:1fr;
      gap:12px;
      margin-top:14px;
    }

    body.page-rekordwerte .record-card{
      border:1px solid var(--rw-border);
      border-radius:18px;
      padding:16px;

      overflow:hidden;
      min-height:138px;
    }

    body.page-rekordwerte .record-card.recent{
      background:#4b7bec;
      color:#fff;
      border-color:rgba(255,255,255,.35);
    }

    body.page-rekordwerte .record-card.recent .kicker, body.page-rekordwerte .record-card.recent .meta{
      color:rgba(255,255,255,.92);
    }

    body.page-rekordwerte .kicker{
      font-size:.82rem;
      color:var(--rw-muted);
      text-transform:uppercase;
      letter-spacing:.055em;
      font-weight:800;
    }

    body.page-rekordwerte .rw-glossary-link{
      display:inline-grid;
      place-items:center;
      width:1.12rem;
      height:1.12rem;
      margin-left:.3rem;
      border:1px solid color-mix(in srgb, var(--rw-border) 60%, transparent);
      border-radius:50%;
      color:var(--rw-border);
      font-size:.7rem;
      font-weight:900;
      line-height:1;
      text-decoration:none;
      vertical-align:.08em;
    }

    body.page-rekordwerte .rw-glossary-link:hover, body.page-rekordwerte .rw-glossary-link:focus-visible{
      background:var(--rw-border);
      color:#fff;
      outline:none;
    }

    html.dark body.page-rekordwerte .rw-glossary-link:hover, html.dark body.page-rekordwerte .rw-glossary-link:focus-visible{
      color:#07111f;
    }

    body.page-rekordwerte .value{
      font-size:clamp(2rem, 6vw, 3.2rem);
      font-weight:900;
      margin:8px 0 4px;
      line-height:1;
      letter-spacing:-.04em;
    }

    body.page-rekordwerte .value .unit{
      font-size:1rem;
      opacity:.85;
      font-weight:800;
      margin-left:6px;
      letter-spacing:0;
    }

    body.page-rekordwerte .meta{
      color:var(--rw-muted);
      font-size:.95rem;
      line-height:1.45;
      font-weight:650;
    }


    body.page-rekordwerte .record-30{
      margin-top:12px;
      border-radius:14px;
      padding:11px 12px;
      background:#3867d6;
      color:#fff;
    }

    html.dark body.page-rekordwerte .record-30{
      background:#45aaf2;
      color:#07111f;
    }

    body.page-rekordwerte .record-30 .record-30-label{
      font-size:.78rem;
      text-transform:uppercase;
      letter-spacing:.055em;
      font-weight:900;
      opacity:.92;
    }

    body.page-rekordwerte .record-30 .record-30-value{
      margin-top:4px;
      font-size:1.35rem;
      line-height:1;
      font-weight:900;
      letter-spacing:-.03em;
    }

    body.page-rekordwerte .record-30 .record-30-meta{
      margin-top:5px;
      font-size:.88rem;
      line-height:1.35;
      font-weight:750;
      opacity:.92;
    }

    body.page-rekordwerte .record-30 .unit{
      font-size:.86rem;
      opacity:.9;
      margin-left:4px;
      font-weight:800;
      letter-spacing:0;
    }

    body.page-rekordwerte .error{
      border:1px solid rgba(255,0,0,.45);
      border-radius:18px;
      padding:16px;
      background:color-mix(in srgb, #ff0000 7%, var(--rw-card));
      margin-top:14px;
    }

    body.page-rekordwerte code{
      font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
    }

    @media (min-width:700px){
      body.page-rekordwerte .grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
    }

    @media (min-width:1120px){
      body.page-rekordwerte .rw-shell{
        grid-template-columns:320px minmax(0, 1fr);
      }
      body.page-rekordwerte .rw-sidebar{
        position:sticky;
        top:18px;
      }
      body.page-rekordwerte .grid{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
      body.page-rekordwerte .record-card{ min-height:162px; }
    }

/* =========================================================
   REKORDWERTE – Design-Angleichung
========================================================= */

body.page-rekordwerte{
  --rw-bg:#eef4fb;
  --rw-text:#17212f;
  --rw-muted:#5e6b7a;
  --rw-card:rgba(255,255,255,.82);
  --rw-soft:rgba(245,248,253,.88);
  --rw-border:#3867d6;
  --rw-pill:rgba(255,255,255,.72);
  --rw-pill-border:rgba(56,103,214,.18);
  --rw-accent:#ff9800;
  --rw-shadow:0 14px 34px rgba(15,23,42,.09);
  --rw-radius:22px;
  --rw-inner-radius:14px;
}

html.dark body.page-rekordwerte{
  --rw-bg:#081018;
  --rw-text:#e8eef7;
  --rw-muted:#a9b4c4;
  --rw-card:rgba(17,26,38,.88);
  --rw-soft:rgba(15,23,36,.88);
  --rw-border:#8cc8ff;
  --rw-pill:rgba(255,255,255,.07);
  --rw-pill-border:rgba(140,200,255,.18);
  --rw-accent:#ffd27d;
  --rw-shadow:0 14px 34px rgba(0,0,0,.22);
}


body.page-rekordwerte .rw-hero{
  border-radius:22px;
  border-color:rgba(56,103,214,.22);
  background:
    radial-gradient(circle at top left, rgba(255,152,0,.16), transparent 34%),
    var(--rw-card);
  box-shadow:var(--rw-shadow);
  backdrop-filter:blur(10px);
}

html.dark body.page-rekordwerte .rw-hero{
  background:
    radial-gradient(circle at top left, rgba(255,210,125,.12), transparent 34%),
    var(--rw-card);
}

body.page-rekordwerte .rw-hero h1{
  color:var(--rw-accent);
  font-weight:800;
}

body.page-rekordwerte .rw-sidebar,
body.page-rekordwerte .rw-main-card{
  border-color:rgba(56,103,214,.22);
  background:var(--rw-card);
  border-radius:22px;
  box-shadow:var(--rw-shadow);
  backdrop-filter:blur(8px);
}

html.dark body.page-rekordwerte .rw-sidebar,
html.dark body.page-rekordwerte .rw-main-card{
  border-color:rgba(140,200,255,.22);
}

body.page-rekordwerte .rw-sidebar h2,
body.page-rekordwerte .rw-main-card h2{
  color:var(--rw-accent);
  font-weight:800;
}

body.page-rekordwerte .record-card{
  border-radius:var(--rw-inner-radius);
  border-color:rgba(56,103,214,.24);
  background:var(--rw-soft);
}

html.dark body.page-rekordwerte .record-card{
  border-color:rgba(140,200,255,.22);
}

body.page-rekordwerte .record-30{
  border-radius:var(--rw-inner-radius);
}

body.page-rekordwerte .rw-pill{
  border-radius:999px;
}

body.page-rekordwerte .rw-glossary-link{
  border-color:color-mix(in srgb, var(--rw-border) 60%, transparent);
}

@media (max-width:699px){
  body.page-rekordwerte .rw-page{
    width:calc(100% - 12px);
    padding-top:8px;
  }

  body.page-rekordwerte .rw-hero{
    padding:18px 16px;
  }

  body.page-rekordwerte .rw-sidebar,
  body.page-rekordwerte .rw-main-card,
body.page-rekordwerte .record-card{
    padding:14px;
  }


}

/* =========================================================
   PAGE: ORTSSEITEN / WETTER/{SLUG}
   Grundlage: wetter(20260903-200902).php
   Alte orte-wetter.css zuerst, anschließend das bisherige
   Inline-CSS – identische Kaskadenreihenfolge, aber gekapselt.
========================================================= */
body.page-ortswetter{


  --station-modal-border: rgba(0,0,0,0.12);
  --station-row-border: rgba(0,0,0,0.08);
  --station-btn-border: rgba(0,0,0,0.22);

  --station-link-border: rgba(0,0,0,0.22);
  --station-overlay-bg: rgba(0,0,0,0.45);
}

@media (prefers-color-scheme: dark){
  body.page-ortswetter{
    --station-modal-bg: rgba(20,20,20,0.95);
    --station-modal-fg: #f2f2f2;
    --station-modal-border: rgba(255,255,255,0.18);
    --station-row-border: rgba(255,255,255,0.08);
    --station-btn-border: rgba(255,255,255,0.25);
    --station-btn-bg: transparent;
    --station-link-border: rgba(255,255,255,0.22);
    --station-overlay-bg: rgba(0,0,0,0.65);
  }
}


body.page-ortswetter .site-footer{
  border-top: 1px solid var(--line);
  background: rgba(255,255,255,0.9);
  margin-top: 16px;
}

body.page-ortswetter .site-footer-inner{
  max-width: 1180px;
  margin: 0 auto;
  padding: 20px 18px 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

body.page-ortswetter .site-footer-nav{
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

body.page-ortswetter .site-footer-nav a{
  color: var(--muted);
  text-decoration: none;
}

body.page-ortswetter .local-hero{
  position: relative;
  overflow: hidden;
  margin-bottom: 22px;
}

body.page-ortswetter .topbar{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 0;
  z-index: 1;
  pointer-events: none;
}

body.page-ortswetter .hero-image{
  position: absolute;
  top: -35px;
  left: -30px;
  right: -250px;
  width: auto;
  height: 440px;
  z-index: 1;
  pointer-events: none;
  transform: rotate(-6deg);
  transform-origin: left top;
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) 40%,
    rgba(0,0,0,0.6) 55%,
    rgba(0,0,0,0.2) 65%,
    rgba(0,0,0,0) 78%
  );
  mask-image: linear-gradient(
    to bottom,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) 40%,
    rgba(0,0,0,0.6) 55%,
    rgba(0,0,0,0.2) 65%,
    rgba(0,0,0,0) 78%
  );
  filter:
    drop-shadow(0 20px 30px rgba(0,0,0,0.15))
    drop-shadow(0 0 30px rgba(69,170,242,0.12));
}

body.page-ortswetter .hero-img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: polygon(0% 6%, 92% 0%, 100% 60%, 82% 100%, 0% 88%);
  opacity: 0.55;
  filter: contrast(1.12) saturate(1.08);
}

body.page-ortswetter .hero-night,
html.dark body.page-ortswetter .hero-day{ display: none; }

html.dark body.page-ortswetter .hero-night{
  display: block;
  opacity: 0.45;
  filter: brightness(0.92) contrast(1.18);
}

body.page-ortswetter .hero-card, body.page-ortswetter .card{
  position: relative;
  z-index: 2;
  background: var(--card);
  border: 1px solid rgba(255,255,255,0.65);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 18px;
  overflow: hidden;
  padding: 22px 20px;
}

body.page-ortswetter .hero-intro-card{
    margin-top: 95px;


    max-width: 520px;


    margin-left: auto;
    margin-right: 40px;


    transform: translateY(-10px);


    background: rgba(255,255,255,0.16);

    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);

    border: 1px solid rgba(255,255,255,0.35);
    box-shadow: 0 6px 18px rgba(0,0,0,0.04);

    padding: 14px 16px;

    position: relative;
    z-index: 3;
}

html.dark body.page-ortswetter .hero-intro-card{
  background: rgba(10,10,10,0.65);
  backdrop-filter: blur(2px);
}

body.page-ortswetter .begruessung-highlight{
  font-weight: 800;
  color: orange;
}

body.page-ortswetter .links-text{
  text-align: left;
  font-family: quicksand-medium, Arial, sans-serif;
}

body.page-ortswetter .rechts-text{
  text-align: right;
  font-family: quicksand-medium, Arial, sans-serif;
  color: orange;
}

body.page-ortswetter .hero-weather-widget{
  display: flex;
  justify-content: center;
  margin: 28px 0 20px;
  position: relative;
  z-index: 2;
}

body.page-ortswetter .iframe-round{
  width: 200px;
  height: 200px;
  border-radius: 30px;
  overflow: hidden;
  background: transparent;
}

body.page-ortswetter .iframe-round iframe{
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  background: transparent;
}

body.page-ortswetter .hero-stat-grid{
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}


body.page-ortswetter .info-strip,
body.page-ortswetter .hero-actions{


  margin-bottom: 16px;
  position: relative;
  z-index: 2;
}


body.page-ortswetter .hero-quicknav{


  position: relative;
  z-index: 2;
}


body.page-ortswetter .weather-item{
  background: #fff;


}


@media (max-width: 980px){
  body.page-ortswetter .two-col{
    grid-template-columns: 1fr;
  }

  body.page-ortswetter .weather-grid.primary, body.page-ortswetter .hero-stat-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px){
  body.page-ortswetter .wrap{
    padding: 14px 12px 28px;
  }

  body.page-ortswetter .hero-card, body.page-ortswetter .card{
    padding: 18px;
  }

  body.page-ortswetter .hero-intro-card{
    margin-top: 90px;
  }

  body.page-ortswetter .weather-grid.primary, body.page-ortswetter .weather-grid.secondary, body.page-ortswetter .hero-stat-grid{
    grid-template-columns: 1fr;
  }

  body.page-ortswetter .stat-card.big .value, body.page-ortswetter .weather-item.featured .weather-value{
    font-size: 1.85rem;
  }

  body.page-ortswetter .btn, body.page-ortswetter .hero-quicknav a{
    width: 100%;
  }
}

body.page-ortswetter .hero-intro-card h1, body.page-ortswetter .hero-intro-card p{
    transform: skewY(0.5deg);
}


        body.page-ortswetter{

            --bg-accent: linear-gradient(135deg, #2f6fed 0%, #3fa9f5 100%);


            --radius: 20px;
            --font-rounded: "Nunito", "Trebuchet MS", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Arial, Helvetica, sans-serif;
            --font-header: "Quicksand", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
        }

        body.page-ortswetter, body.page-ortswetter *{ box-sizing: border-box; }


        body.page-ortswetter{
            margin: 0;

            color: var(--text);

            line-height: 1.6;
        }

        body.page-ortswetter a{ color: var(--brand-dark); }

        body.page-ortswetter .wrap{
            max-width: 1180px;
            margin: 0 auto;
            padding: 24px 18px 40px;
        }

        body.page-ortswetter .hero, body.page-ortswetter .card{
            background: var(--card);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255,255,255,0.65);
            border-radius: var(--radius);
            box-shadow: var(--shadow);
            margin-bottom: 22px;
            overflow: hidden;
        }

        body.page-ortswetter .hero-top{
            background: var(--bg-accent);
            color: #fff;
            padding: 28px 24px 24px;
            position: relative;
        }

        body.page-ortswetter .hero-top::after{
            content: "";
            position: absolute;
            inset: auto -40px -55px auto;
            width: 180px;
            height: 180px;
            background: rgba(255,255,255,.14);
            border-radius: 50%;
        }

        body.page-ortswetter .eyebrow{
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: rgba(255,255,255,.18);
            color: #fff;
            padding: 6px 12px;
            border-radius: 999px;
            font-size: .92rem;
            margin-bottom: 14px;
        }

        body.page-ortswetter .hero-top h1{
            margin: 0 0 8px;
            font-size: clamp(2rem, 4vw, 3rem);
            line-height: 1.08;
            letter-spacing: -0.02em;
        }

        body.page-ortswetter .hero-sub{
            font-size: 1.05rem;
            opacity: .96;
            max-width: 760px;
        }

        body.page-ortswetter .hero-body, body.page-ortswetter .card-body{
            padding: 24px;
        }

        body.page-ortswetter .hero-grid{
            display: grid;
            grid-template-columns: 1.4fr .9fr;
            gap: 18px;
            align-items: stretch;
        }

        body.page-ortswetter .hero-main p{
            margin: 0 0 14px;
        }

        body.page-ortswetter .hero-stats{
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 12px;
        }

        body.page-ortswetter .stat-card{
            background: #ffffff;
            border: 1px solid var(--line);
            border-radius: 18px;
            padding: 16px;
            box-shadow: 0 8px 24px rgba(17, 39, 76, 0.05);
        }

        body.page-ortswetter .stat-card .label{
            color: var(--muted);
            font-size: .9rem;
            margin-bottom: 6px;
        }

        body.page-ortswetter .stat-card .value{
            font-size: 1.35rem;
            font-weight: 700;
            line-height: 1.15;
            color: var(--text);
        }

        body.page-ortswetter .stat-card.big .value{
            font-size: 2.2rem;
            color: var(--brand-dark);
        }

        body.page-ortswetter .hero-actions{
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 18px;
        }

        body.page-ortswetter .btn{
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 46px;
            padding: 0 18px;
            border-radius: 999px;
            text-decoration: none;
            font-weight: 700;
            transition: .2s ease;
        }

        body.page-ortswetter .btn-primary{
            background: var(--brand);
            color: #fff;
            box-shadow: 0 8px 20px rgba(47,111,237,.22);
        }

        body.page-ortswetter .btn-primary:hover{
            background: var(--brand-dark);
            transform: translateY(-1px);
        }

        body.page-ortswetter .btn-soft{
            background: var(--soft);
            color: var(--brand-dark);
            border: 1px solid var(--line);
        }

        body.page-ortswetter .btn-soft:hover{
            background: #e8f0fb;
        }

        body.page-ortswetter .info-strip{
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 14px;
        }

        body.page-ortswetter .badge{
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 12px;
            border-radius: 999px;
            background: var(--soft);
            color: var(--text);
            border: 1px solid var(--line);
            font-size: .92rem;
        }

        body.page-ortswetter .section-title{
            margin: 0 0 14px;
            font-size: 1.4rem;
            line-height: 1.2;
            letter-spacing: -0.01em;
        }

        body.page-ortswetter .section-intro{
            color: var(--muted);
            margin-top: 0;
            margin-bottom: 18px;
        }

        body.page-ortswetter .weather-grid.primary{
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 14px;
        }

        body.page-ortswetter .weather-grid.secondary{
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
            gap: 14px;
        }

        body.page-ortswetter .weather-item{
            background: var(--card-strong);
            border: 1px solid var(--line);
            border-radius: 18px;
            padding: 16px;
            transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
            box-shadow: 0 8px 20px rgba(18, 37, 67, 0.04);
        }

        body.page-ortswetter .weather-item:hover{
            transform: translateY(-2px);
            border-color: #c7d7ea;
            box-shadow: 0 12px 26px rgba(18, 37, 67, 0.08);
        }

        body.page-ortswetter .weather-item.featured{
            background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
        }

        body.page-ortswetter .weather-label{
            font-size: .92rem;
            color: var(--muted);
            margin-bottom: 8px;
        }

        body.page-ortswetter .weather-value{
            font-size: 1.55rem;
            line-height: 1.15;
            font-weight: 800;
            color: var(--text);
            letter-spacing: -0.02em;
        }

        body.page-ortswetter .weather-item.featured .weather-value{
            font-size: 2rem;
            color: var(--brand-dark);
        }

        body.page-ortswetter .weather-item-meta{
            margin-top: 10px;
            font-size: .92rem;
            color: var(--muted);
            line-height: 1.45;
        }

        body.page-ortswetter .weather-item-meta div + div{
            margin-top: 4px;
        }

        body.page-ortswetter .note{
            background: linear-gradient(180deg, #f4f8ff 0%, #edf5ff 100%);
            border: 1px solid #d8e5fb;
            border-left: 5px solid var(--brand);
            padding: 14px 16px;
            border-radius: 16px;
            color: var(--text);
        }

        body.page-ortswetter .two-col{
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 18px;
        }

        body.page-ortswetter .faq dt{
            font-weight: 700;
            margin-top: 14px;
            color: var(--text);
        }

        body.page-ortswetter .faq dd{
            margin-left: 0;
            margin-top: 5px;
            color: var(--muted);
        }

        body.page-ortswetter .nearby-links{
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }

        body.page-ortswetter .nearby-links a{
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 10px 14px;
            border-radius: 999px;
            background: #fff;
            border: 1px solid var(--line);
            color: var(--text);
            text-decoration: none;
            box-shadow: 0 6px 18px rgba(17, 38, 73, 0.04);
            transition: .18s ease;
        }

        body.page-ortswetter .nearby-links a:hover{
            transform: translateY(-1px);
            border-color: #bfd4ee;
            background: #f8fbff;
        }

        body.page-ortswetter .small-distance{
            color: var(--muted);
            font-size: .88rem;
        }

        body.page-ortswetter .small{
            color: var(--muted);
            font-size: .95rem;
        }

        body.page-ortswetter footer{
            text-align: center;
            color: var(--muted);
            padding: 8px 0 4px;
            font-size: .95rem;
        }

        @media (max-width: 980px){
            body.page-ortswetter .hero-grid, body.page-ortswetter .two-col{
                grid-template-columns: 1fr;
            }

            body.page-ortswetter .weather-grid.primary{
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }

        @media (max-width: 640px){
            body.page-ortswetter .wrap{
                padding: 14px 12px 28px;
            }

            body.page-ortswetter .hero-top, body.page-ortswetter .hero-body, body.page-ortswetter .card-body{
                padding: 18px;
            }

            body.page-ortswetter .hero-top h1{
                font-size: 1.9rem;
            }

            body.page-ortswetter .weather-grid.primary, body.page-ortswetter .weather-grid.secondary, body.page-ortswetter .hero-stats{
                grid-template-columns: 1fr;
            }

            body.page-ortswetter .stat-card.big .value, body.page-ortswetter .weather-item.featured .weather-value{
                font-size: 1.85rem;
            }

            body.page-ortswetter .btn{
                width: 100%;
            }
        }

body.page-ortswetter .breadcrumb{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    color: var(--muted);
    font-size: .92rem;
    margin-bottom: 16px;
}

body.page-ortswetter .breadcrumb a{
    color: var(--brand-dark);
    text-decoration: none;
}

body.page-ortswetter .hero-quicknav{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

body.page-ortswetter .hero-quicknav a{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 14px;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 600;
    background: var(--soft);
    color: var(--brand-dark);
    border: 1px solid var(--line);
    transition: .2s ease;
}

body.page-ortswetter .hero-quicknav a:hover{
    background: #e8f0fb;
}

@media (max-width: 640px){
    body.page-ortswetter .hero-quicknav a{
        width: 100%;
    }
}


body.page-ortswetter .local-live-grid{
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    grid-template-areas:
        "feeling quickinfo"
        "outside quickinfo"
        "camera quickinfo"
        "warn quickinfo";
    gap: 18px;
    align-items: stretch;
    margin-bottom: 22px;
}
body.page-ortswetter .weather-feeling{ grid-area: feeling; position: relative; overflow: hidden; border-radius: 22px; padding: 22px; color: #0f172a; background: linear-gradient(135deg, rgba(240,253,244,.95), rgba(219,234,254,.85)); border: 1px solid rgba(56,103,214,.18); box-shadow: var(--shadow); }
body.page-ortswetter .weather-feeling::before{ content: ""; position:absolute; inset:0; transform:translateX(-100%); background:linear-gradient(90deg, transparent, rgba(255,255,255,.38), transparent); animation: feelingScan 6s linear infinite; }
@keyframes feelingScan{ 100% { transform: translateX(100%); } }
body.page-ortswetter .weather-feeling-label{ font-size:.9rem; font-weight:800; color:#3867d6; text-transform:uppercase; letter-spacing:.08em; margin-bottom:8px; position:relative; }
body.page-ortswetter .weather-feeling-text{ font-size:clamp(1.35rem, 2.2vw, 2rem); line-height:1.25; font-weight:850; position:relative; }
body.page-ortswetter .feeling-warning{ background:linear-gradient(135deg, rgba(254,242,242,.96), rgba(255,237,213,.86)); }
body.page-ortswetter .feeling-rain{ background:linear-gradient(135deg, rgba(219,234,254,.96), rgba(191,219,254,.80)); }
body.page-ortswetter .feeling-wind{ background:linear-gradient(135deg, rgba(241,245,249,.96), rgba(203,213,225,.82)); }
body.page-ortswetter .feeling-cold{ background:linear-gradient(135deg, rgba(240,249,255,.96), rgba(186,230,253,.82)); }
body.page-ortswetter .feeling-warm{ background:linear-gradient(135deg, rgba(255,251,235,.96), rgba(254,215,170,.82)); }
body.page-ortswetter .feeling-good{ background:linear-gradient(135deg, rgba(236,253,245,.96), rgba(219,234,254,.78)); }
body.page-ortswetter #outside-status-container{ grid-area: outside; min-width:0; }
body.page-ortswetter .outside-card{ height:100%; display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:center; padding:22px; border-radius:22px; border:1px solid rgba(56,103,214,.18); box-shadow:var(--shadow); position:relative; overflow:hidden; }
body.page-ortswetter .outside-card:hover{ transform:translateY(-2px); transition:.18s ease; }
body.page-ortswetter .outside-icon{ font-size:2.6rem; line-height:1; }
body.page-ortswetter .outside-label{ font-size:.85rem; text-transform:uppercase; letter-spacing:.08em; font-weight:800; color:#3867d6; margin-bottom:5px; }
body.page-ortswetter .outside-title{ font-size:1.35rem; line-height:1.2; font-weight:850; margin-bottom:5px; }
body.page-ortswetter .outside-text{ color:#475569; font-weight:600; }
body.page-ortswetter .outside-link{ display:inline-flex; margin-top:10px; font-weight:800; text-decoration:none; }
body.page-ortswetter .outside-good{ background:linear-gradient(135deg, rgba(236,253,245,.92), rgba(219,234,254,.72)); }
body.page-ortswetter .outside-rain{ background:linear-gradient(135deg, rgba(219,234,254,.92), rgba(191,219,254,.76)); }
body.page-ortswetter .outside-wind{ background:linear-gradient(135deg, rgba(241,245,249,.94), rgba(203,213,225,.78)); }
body.page-ortswetter .outside-warning{ background:linear-gradient(135deg, rgba(254,242,242,.96), rgba(255,237,213,.86)); }
body.page-ortswetter .outside-cold{ background:linear-gradient(135deg, rgba(240,249,255,.96), rgba(186,230,253,.78)); }
body.page-ortswetter .outside-night{ background:linear-gradient(135deg, rgba(30,41,59,.94), rgba(51,65,85,.82)); color:#fff; }
body.page-ortswetter .outside-night .outside-text, body.page-ortswetter .outside-night .outside-label{ color:rgba(255,255,255,.82); }


body.page-ortswetter .outdoor-links-box{ margin-bottom:22px; }
body.page-ortswetter .outdoor-links-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
    gap:14px;
    margin-top:18px;
}
body.page-ortswetter .outdoor-link{
    display:flex;
    gap:14px;
    align-items:center;
    padding:16px;
    border-radius:20px;
    text-decoration:none;
    transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
    border:1px solid rgba(56,103,214,.18);
    background:rgba(255,255,255,.62);
    backdrop-filter:blur(8px);
    min-height:86px;
}
body.page-ortswetter .outdoor-link:hover{
    transform:translateY(-3px);
    box-shadow:0 14px 34px rgba(0,0,0,.10);
    border-color:rgba(56,103,214,.30);
}
body.page-ortswetter .outdoor-emoji{ font-size:2rem; flex-shrink:0; line-height:1; }
body.page-ortswetter .outdoor-link strong{ display:block; color:#0b1220; font-size:1rem; line-height:1.2; }
body.page-ortswetter .outdoor-link small{ display:block; margin-top:4px; color:#5a667a; line-height:1.4; }
body.page-ortswetter .outdoor-wandern{ background:linear-gradient(135deg, rgba(236,253,245,.86), rgba(219,234,254,.66)); }
body.page-ortswetter .outdoor-grillen{ background:linear-gradient(135deg, rgba(255,243,205,.92), rgba(254,215,170,.76)); }
body.page-ortswetter .outdoor-fahrrad{ background:linear-gradient(135deg, rgba(219,234,254,.88), rgba(191,219,254,.68)); }
body.page-ortswetter .outdoor-baden{ background:linear-gradient(135deg, rgba(224,242,254,.90), rgba(186,230,253,.70)); }
body.page-ortswetter .outdoor-outdoor{ background:linear-gradient(135deg, rgba(240,253,244,.92), rgba(220,252,231,.72)); }

body.page-ortswetter .livecam-preview{ grid-area: camera; position:relative; overflow:hidden; border-radius:22px; box-shadow:var(--shadow); background:#000; min-height:230px; }
body.page-ortswetter .livecam-preview a{ display:block; color:#fff; text-decoration:none; height:100%; }
body.page-ortswetter .livecam-preview img{ width:100%; height:100%; min-height:230px; object-fit:cover; display:block; transition:transform .25s ease; }
body.page-ortswetter .livecam-preview:hover img{ transform:scale(1.025); }
body.page-ortswetter .livecam-overlay{ position:absolute;    padding:12px 14px; border-radius:16px; color:#fff; font-weight:850; background:linear-gradient(90deg, rgba(0,0,0,.72), rgba(0,0,0,.24)); }
body.page-ortswetter .livecam-livebadge{ position:absolute; z-index:2; top:14px; left:14px; display:inline-flex; align-items:center; gap:8px; padding:7px 11px; border-radius:999px; background:rgba(0,0,0,.62); color:#fff; font-weight:900; font-size:.82rem; letter-spacing:.06em; }
body.page-ortswetter .livecam-dot{ width:9px; height:9px; border-radius:50%; background:#ff3b30; box-shadow:0 0 0 0 rgba(255,59,48,.6); animation: liveCamPulse 1.8s infinite; }
@keyframes liveCamPulse{ 70% { box-shadow:0 0 0 10px rgba(255,59,48,0); } 100% { box-shadow:0 0 0 0 rgba(255,59,48,0); } }
body.page-ortswetter .start-warnbox{ grid-area: warn; border-radius:18px; padding:16px 18px; background:#fff7ed; border:1px solid #fed7aa; color:#7c2d12; box-shadow:var(--shadow); font-weight:650; }
body.page-ortswetter .start-warnbox-link{ text-decoration:none; color:inherit; }
body.page-ortswetter .start-warnbox-title{ display:block; font-weight:900; margin-bottom:5px; }
body.page-ortswetter .quickinfo-box-wrap{ grid-area: quickinfo; min-width:0; position:sticky; top:16px; align-self:start; z-index:5; }
body.page-ortswetter .quickinfo-box{ background:rgba(255,255,255,.94); border:1px solid rgba(56,103,214,.18); border-radius:22px; box-shadow:var(--shadow); padding:18px; }
body.page-ortswetter .quickinfo-title{ font-size:1.25rem; line-height:1.2; font-weight:900; margin-bottom:14px; }
body.page-ortswetter .quickinfo-content{ display:grid; grid-template-columns:1fr 150px; gap:12px; align-items:start; }
body.page-ortswetter .quickinfo-summary{ display:grid; gap:10px; }
body.page-ortswetter .quick-value{ display:flex; gap:10px; align-items:center; padding:10px; border-radius:16px; border:1px solid var(--line); background:#fff; }
body.page-ortswetter .quick-value span{ display:block; font-size:.82rem; color:var(--muted); font-weight:700; }
body.page-ortswetter .quick-value strong{ display:block; font-size:1rem; color:var(--text); line-height:1.15; }
body.page-ortswetter .quick-ico{ font-size:1.4rem; }
body.page-ortswetter .quickinfo-right{ display:grid; justify-items:center; gap:10px; }
body.page-ortswetter .quickinfo-windrose{ width:150px; height:150px; position:relative; display:grid; place-items:center; background:#fff; border:1px solid var(--line); border-radius:999px; }
body.page-ortswetter .quickinfo-windrose .rose{ width:150px; height:150px; object-fit:contain; }
body.page-ortswetter .quickinfo-windrose .pointer{ position:absolute; width:80px; height:80px; display:grid; place-items:center; transform:rotate(var(--wind-angle)); transform-origin:center; }
body.page-ortswetter .quickinfo-windrose .pointer img{ width:80px; height:80px; object-fit:contain; }
body.page-ortswetter .quickinfo-alerts{ min-height:34px; display:flex; gap:8px; align-items:center; justify-content:center; }
body.page-ortswetter .quickinfo-alerts .blinker{ animation: qi-blink 1s infinite; }
@keyframes qi-blink{ 0%,100%{opacity:1;} 50%{opacity:.15;} }
body.page-ortswetter .wind-gust-line{ margin-top:4px; }
@media (max-width: 980px){
    body.page-ortswetter .local-live-grid{ grid-template-columns:1fr; grid-template-areas:"feeling" "outside" "camera" "quickinfo" "warn"; }
    body.page-ortswetter .quickinfo-box-wrap{ position:static; }
}
@media (max-width: 520px){
    body.page-ortswetter .quickinfo-content{ grid-template-columns:1fr; }
    body.page-ortswetter .quickinfo-right{ order:-1; }
    body.page-ortswetter .outside-card{ grid-template-columns:1fr; }
}


/* =========================================================
   Moderne Ortsseiten-Optik + FAQ-Accordion
   bleibt im Eifel-Wetter-Farbkonzept
   ========================================================= */

body.page-ortswetter{
    font-family: var(--font-rounded);
}

body.page-ortswetter .card, body.page-ortswetter .weather-item, body.page-ortswetter .stat-card, body.page-ortswetter .quickinfo-box, body.page-ortswetter .quick-value, body.page-ortswetter .nearby-links a, body.page-ortswetter .hero-quicknav a, body.page-ortswetter .btn{
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease,
        background .18s ease;
}

body.page-ortswetter .card{
    border-radius: 24px;
}

body.page-ortswetter .card:hover{
    box-shadow: 0 18px 46px rgba(19, 42, 79, 0.11);
}

body.page-ortswetter .weather-item:hover, body.page-ortswetter .stat-card:hover, body.page-ortswetter .quick-value:hover, body.page-ortswetter .nearby-links a:hover{
    transform: translateY(-2px);
}

body.page-ortswetter .section-title{
    font-size: clamp(1.35rem, 2vw, 1.65rem);
    letter-spacing: -0.025em;
}

body.page-ortswetter .section-intro{
    font-size: 1.02rem;
    line-height: 1.75;
}

body.page-ortswetter .btn{
    box-shadow: 0 8px 22px rgba(47,111,237,.13);
}

body.page-ortswetter .btn:hover{
    transform: translateY(-1px);
}

body.page-ortswetter .hero-quicknav a:hover{
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(47,111,237,.12);
}


body.page-ortswetter .faq-modern{
    position: relative;
    overflow: hidden;
}

body.page-ortswetter .faq-modern::before{
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 12% 18%, rgba(47,111,237,.10), transparent 28%),
        radial-gradient(circle at 88% 8%, rgba(63,169,245,.12), transparent 24%);
}

body.page-ortswetter .faq-modern .card-body{
    position: relative;
    padding: clamp(22px, 3vw, 36px);
}

body.page-ortswetter .faq-layout{
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.15fr);
    gap: clamp(22px, 4vw, 44px);
    align-items: start;
}

body.page-ortswetter .faq-kicker{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding: 7px 12px;
    border-radius: 999px;
    background: var(--soft);
    color: var(--brand-dark);
    border: 1px solid var(--line);
    font-size: .88rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

body.page-ortswetter .faq-title-row{
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 14px;
}

body.page-ortswetter .faq-title-icon{
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(47,111,237,.14), rgba(63,169,245,.18));
    color: var(--brand-dark);
    font-size: 1.45rem;
    border: 1px solid rgba(47,111,237,.18);
}

body.page-ortswetter .faq-title-row .section-title{
    margin-bottom: 6px;
}

body.page-ortswetter .faq-info-card{
    margin-top: 24px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 14px;
    align-items: start;
    padding: 18px;
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(238,244,251,.72));
    border: 1px solid rgba(47,111,237,.20);
    box-shadow: 0 12px 28px rgba(19, 42, 79, 0.07);
}

body.page-ortswetter .faq-info-icon{
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: var(--brand);
    color: #fff;
    font-weight: 900;
}

body.page-ortswetter .faq-info-card strong{
    display: block;
    margin-bottom: 5px;
    color: var(--text);
}

body.page-ortswetter .faq-info-card span{
    color: var(--muted);
}

body.page-ortswetter .faq-facts-grid{
    margin-top: 18px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

body.page-ortswetter .faq-fact{
    min-height: 104px;
    padding: 15px;
    border-radius: 18px;
    background: rgba(255,255,255,.78);
    border: 1px solid var(--line);
    box-shadow: 0 8px 22px rgba(19, 42, 79, 0.05);
}

body.page-ortswetter .faq-fact-ico{
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    margin-bottom: 10px;
    border-radius: 999px;
    background: rgba(47,111,237,.10);
    color: var(--brand-dark);
    font-size: 1.15rem;
}

body.page-ortswetter .faq-fact small{
    display: block;
    color: var(--muted);
    font-weight: 700;
    line-height: 1.25;
}

body.page-ortswetter .faq-fact strong{
    display: block;
    margin-top: 4px;
    color: var(--text);
    font-size: 1.08rem;
    line-height: 1.2;
}

body.page-ortswetter .faq-panel-head{
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

body.page-ortswetter .faq-panel-icon{
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    border: 2px solid var(--brand);
    color: var(--brand-dark);
    font-size: 1.25rem;
    font-weight: 900;
}

body.page-ortswetter .faq-panel-head .section-title{
    margin: 0;
}

body.page-ortswetter .faq-list{
    display: grid;
    gap: 10px;
}

body.page-ortswetter .faq-item{
    background: rgba(255,255,255,.82);
    border: 1px solid var(--line);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 8px 22px rgba(19, 42, 79, 0.045);
}

body.page-ortswetter .faq-item[open]{
    background: linear-gradient(180deg, rgba(244,248,255,.96), rgba(255,255,255,.88));
    border-color: rgba(47,111,237,.28);
    box-shadow: 0 14px 32px rgba(47,111,237,.10);
}

body.page-ortswetter .faq-summary{
    cursor: pointer;
    list-style: none;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 15px 16px;
    color: var(--text);
    font-weight: 850;
}

body.page-ortswetter .faq-summary::-webkit-details-marker{
    display: none;
}

body.page-ortswetter .faq-summary::marker{
    content: "";
}

body.page-ortswetter .faq-question-icon{
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: rgba(47,111,237,.10);
    color: var(--brand-dark);
    font-size: 1rem;
}

body.page-ortswetter .faq-question{
    line-height: 1.28;
}

body.page-ortswetter .faq-arrow{
    color: var(--brand-dark);
    font-size: 1.1rem;
    transition: transform .18s ease;
}

body.page-ortswetter .faq-item[open] .faq-arrow{
    transform: rotate(180deg);
}

body.page-ortswetter .faq-answer{
    padding: 0 16px 17px 60px;
    color: var(--muted);
    line-height: 1.65;
}

body.page-ortswetter .faq-answer a{
    font-weight: 800;
    text-decoration: none;
}

body.page-ortswetter .faq-answer a:hover{
    text-decoration: underline;
}


@media (max-width: 980px){
    body.page-ortswetter .faq-layout{
        grid-template-columns: 1fr;
    }

    body.page-ortswetter .faq-facts-grid{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px){
    body.page-ortswetter .faq-modern .card-body{
        padding: 18px;
    }

    body.page-ortswetter .faq-title-row{
        gap: 10px;
    }

    body.page-ortswetter .faq-title-icon{
        width: 40px;
        height: 40px;
        border-radius: 14px;
    }

    body.page-ortswetter .faq-info-card,
body.page-ortswetter .faq-facts-grid{
        grid-template-columns: 1fr;
    }


    body.page-ortswetter .faq-summary{
        grid-template-columns: auto 1fr auto;
        padding: 14px;
    }

    body.page-ortswetter .faq-answer{
        padding: 0 14px 15px 14px;
    }
}

/* =========================================================
   Moderner SEO-Ortstext / Ortsprofil
   passend zu Eifel-Wetter
   ========================================================= */

body.page-ortswetter .local-seo-modern{
    position: relative;
    overflow: hidden;
}

body.page-ortswetter .local-seo-modern::before{
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 8% 12%, rgba(47,111,237,.10), transparent 30%),
        radial-gradient(circle at 92% 20%, rgba(63,169,245,.12), transparent 24%);
}

body.page-ortswetter .local-seo-modern .card-body{
    position: relative;
    padding: clamp(22px, 3vw, 36px);
}

body.page-ortswetter .local-seo-layout{
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(320px, .92fr);
    gap: clamp(22px, 4vw, 42px);
    align-items: start;
}

body.page-ortswetter .local-seo-kicker{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding: 7px 12px;
    border-radius: 999px;
    background: var(--soft);
    color: var(--brand-dark);
    border: 1px solid var(--line);
    font-size: .88rem;
    font-weight: 850;
    letter-spacing: .04em;
    text-transform: uppercase;
}

body.page-ortswetter .local-seo-title{
    margin: 0 0 14px;
    font-size: clamp(1.55rem, 2.4vw, 2.15rem);
    line-height: 1.1;
    letter-spacing: -0.035em;
    color: var(--text);
}

body.page-ortswetter .local-seo-lead{
    font-size: clamp(1.05rem, 1.5vw, 1.18rem);
    line-height: 1.75;
    color: var(--text);
    margin: 0 0 18px;
}

body.page-ortswetter .local-seo-text{
    color: var(--muted);
    line-height: 1.8;
    margin: 0 0 14px;
}

body.page-ortswetter .local-seo-note{
    margin-top: 20px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 14px;
    align-items: start;
    padding: 18px;
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(244,248,255,.95), rgba(238,244,251,.78));
    border: 1px solid rgba(47,111,237,.20);
    box-shadow: 0 12px 28px rgba(19,42,79,.07);
}

body.page-ortswetter .local-seo-note-icon{
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: var(--brand);
    color: #fff;
    font-weight: 900;
}

body.page-ortswetter .local-seo-note strong{
    display: block;
    margin-bottom: 4px;
    color: var(--text);
}

body.page-ortswetter .local-seo-note span{
    color: var(--muted);
    line-height: 1.6;
}

body.page-ortswetter .local-seo-side{
    display: grid;
    gap: 14px;
}

body.page-ortswetter .local-seo-mainfact{
    padding: 22px;
    border-radius: 24px;
    color: #fff;
    background: var(--bg-accent);
    box-shadow: 0 16px 36px rgba(47,111,237,.22);
    overflow: hidden;
    position: relative;
}

body.page-ortswetter .local-seo-mainfact::after{
    content: "";
    position: absolute;
    right: -35px;
    bottom: -45px;
    width: 150px;
    height: 150px;
    border-radius: 999px;
    background: rgba(255,255,255,.16);
}

body.page-ortswetter .local-seo-mainfact small{
    display: block;
    opacity: .9;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 8px;
}

body.page-ortswetter .local-seo-mainfact strong{
    display: block;
    position: relative;
    z-index: 1;
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    line-height: 1;
    letter-spacing: -0.04em;
}

body.page-ortswetter .local-seo-mainfact span{
    display: block;
    position: relative;
    z-index: 1;
    margin-top: 10px;
    opacity: .96;
    line-height: 1.55;
}

body.page-ortswetter .local-seo-facts{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

body.page-ortswetter .local-seo-fact{
    min-height: 118px;
    padding: 16px;
    border-radius: 20px;
    background: rgba(255,255,255,.82);
    border: 1px solid var(--line);
    box-shadow: 0 8px 22px rgba(19,42,79,.05);
}

body.page-ortswetter .local-seo-fact-icon{
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    margin-bottom: 10px;
    border-radius: 999px;
    background: rgba(47,111,237,.10);
    color: var(--brand-dark);
    font-size: 1.15rem;
}

body.page-ortswetter .local-seo-fact small{
    display: block;
    color: var(--muted);
    font-weight: 750;
    line-height: 1.25;
}

body.page-ortswetter .local-seo-fact strong{
    display: block;
    margin-top: 5px;
    color: var(--text);
    font-size: 1.08rem;
    line-height: 1.2;
}

body.page-ortswetter .local-seo-tags{
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 20px;
}

body.page-ortswetter .local-seo-tag{
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--line);
    color: var(--text);
    font-weight: 750;
    font-size: .92rem;
    box-shadow: 0 6px 18px rgba(17,38,73,.04);
}

@media (max-width: 980px){
    body.page-ortswetter .local-seo-layout{
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px){
    body.page-ortswetter .local-seo-modern .card-body{
        padding: 18px;
    }

    body.page-ortswetter .local-seo-facts,
body.page-ortswetter .local-seo-note{
        grid-template-columns: 1fr;
    }


}

/* =========================================================
   Moderne Infoboxen oberhalb der Wetterdetails
   ========================================================= */

body.page-ortswetter .local-context-card, body.page-ortswetter .current-weather-story{
    position: relative;
    overflow: hidden;
}

body.page-ortswetter .local-context-card::before, body.page-ortswetter .current-weather-story::before{
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 9% 14%, rgba(47,111,237,.10), transparent 28%),
        radial-gradient(circle at 88% 12%, rgba(63,169,245,.12), transparent 24%);
}

body.page-ortswetter .local-context-card .card-body, body.page-ortswetter .current-weather-story .card-body{
    position: relative;
    padding: clamp(22px, 3vw, 36px);
}

body.page-ortswetter .context-grid{
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
    gap: clamp(22px, 4vw, 42px);
    align-items: stretch;
}

body.page-ortswetter .context-eyebrow, body.page-ortswetter .weather-story-eyebrow{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding: 7px 12px;
    border-radius: 999px;
    background: var(--soft);
    color: var(--brand-dark);
    border: 1px solid var(--line);
    font-size: .88rem;
    font-weight: 850;
    letter-spacing: .04em;
    text-transform: uppercase;
}

body.page-ortswetter .context-title, body.page-ortswetter .weather-story-title{
    margin: 0 0 14px;
    font-size: clamp(1.55rem, 2.4vw, 2.15rem);
    line-height: 1.12;
    letter-spacing: -0.035em;
    color: var(--text);
}

body.page-ortswetter .context-lead{
    margin: 0 0 18px;
    font-size: clamp(1.05rem, 1.45vw, 1.18rem);
    line-height: 1.75;
    color: var(--text);
}

body.page-ortswetter .context-copy{
    margin: 0 0 14px;
    color: var(--muted);
    line-height: 1.8;
}

body.page-ortswetter .context-highlight-row{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
    gap: 12px;
    margin-top: 22px;
}

body.page-ortswetter .context-highlight{
    min-width: 0;
    padding: 15px;
    border-radius: 18px;
    background: rgba(255,255,255,.80);
    border: 1px solid var(--line);
    box-shadow: 0 8px 22px rgba(19,42,79,.05);
}

body.page-ortswetter .context-highlight-icon{
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    margin-bottom: 9px;
    border-radius: 999px;
    background: rgba(47,111,237,.10);
    color: var(--brand-dark);
}

body.page-ortswetter .context-highlight small{
    display: block;
    color: var(--muted);
    font-weight: 750;
    line-height: 1.25;
}

body.page-ortswetter .context-highlight strong{
    display: block;
    min-width: 0;
    margin-top: 4px;
    color: var(--text);
    font-size: clamp(.96rem, 1.35vw, 1.08rem);
    line-height: 1.22;
    overflow-wrap: anywhere;
    word-break: normal;
    hyphens: auto;
}

body.page-ortswetter .station-panel{
    display: grid;
    gap: 14px;
}

body.page-ortswetter .station-distance-panel{
    position: relative;
    overflow: hidden;
    min-height: 220px;
    padding: 24px;
    border-radius: 24px;
    color: #fff;
    background: var(--bg-accent);
    box-shadow: 0 16px 36px rgba(47,111,237,.22);
}

body.page-ortswetter .station-distance-panel::after{
    content: "";
    position: absolute;
    right: -45px;
    bottom: -50px;
    width: 170px;
    height: 170px;
    border-radius: 999px;
    background: rgba(255,255,255,.16);
}

body.page-ortswetter .station-distance-panel small{
    display: block;
    position: relative;
    z-index: 1;
    opacity: .9;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 10px;
}

body.page-ortswetter .station-distance-panel strong{
    display: block;
    position: relative;
    z-index: 1;
    font-size: clamp(2.3rem, 4vw, 3.4rem);
    line-height: .95;
    letter-spacing: -0.06em;
}

body.page-ortswetter .station-distance-panel span{
    display: block;
    position: relative;
    z-index: 1;
    margin-top: 12px;
    line-height: 1.55;
    opacity: .97;
}

body.page-ortswetter .context-note{
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    align-items: start;
    padding: 16px;
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(244,248,255,.95), rgba(238,244,251,.78));
    border: 1px solid rgba(47,111,237,.20);
}

body.page-ortswetter .context-note-icon{
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: var(--brand);
    color: #fff;
    font-weight: 900;
}

body.page-ortswetter .context-note strong{
    display: block;
    margin-bottom: 4px;
    color: var(--text);
}

body.page-ortswetter .context-note span{
    color: var(--muted);
    line-height: 1.6;
}

body.page-ortswetter .context-more{
    margin-top: 18px;
    border-radius: 18px;
    border: 1px solid var(--line);
    background: rgba(255,255,255,.70);
    overflow: hidden;
}

body.page-ortswetter .context-more summary, body.page-ortswetter .context-more-title{
    padding: 13px 16px;
    font-weight: 850;
    color: var(--brand-dark);
}

body.page-ortswetter .context-more summary{
    cursor: pointer;
}

body.page-ortswetter .context-more-title{
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.35;
}

body.page-ortswetter .context-more-content{
    padding: 0 16px 16px;
    color: var(--muted);
    line-height: 1.75;
}


body.page-ortswetter .weather-story-head{
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 20px;
    align-items: start;
    margin-bottom: 22px;
}

body.page-ortswetter .weather-story-lead{
    margin: 0;
    color: var(--muted);
    line-height: 1.75;
    max-width: 780px;
}

body.page-ortswetter .weather-story-time{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 999px;
    background: var(--soft);
    border: 1px solid var(--line);
    color: var(--text);
    font-weight: 800;
    white-space: nowrap;
}

body.page-ortswetter .weather-metric-grid{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

body.page-ortswetter .weather-metric-card{
    position: relative;
    overflow: hidden;
    padding: 18px;
    border-radius: 22px;
    background: rgba(255,255,255,.84);
    border: 1px solid var(--line);
    box-shadow: 0 10px 26px rgba(19,42,79,.06);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

body.page-ortswetter .weather-metric-card:hover{
    transform: translateY(-2px);
    border-color: rgba(47,111,237,.30);
    box-shadow: 0 15px 34px rgba(19,42,79,.10);
}

body.page-ortswetter .weather-metric-icon{
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    margin-bottom: 14px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(47,111,237,.13), rgba(63,169,245,.16));
    color: var(--brand-dark);
    font-size: 1.35rem;
}

body.page-ortswetter .weather-metric-label{
    color: var(--muted);
    font-size: .92rem;
    font-weight: 800;
    margin-bottom: 5px;
}

body.page-ortswetter .weather-metric-value{
    color: var(--text);
    font-size: clamp(1.45rem, 2.1vw, 2rem);
    line-height: 1.1;
    font-weight: 900;
    letter-spacing: -0.04em;
}

body.page-ortswetter .weather-metric-meta{
    margin-top: 10px;
    color: var(--muted);
    font-size: .94rem;
    line-height: 1.5;
}

body.page-ortswetter .weather-story-bottom{
    margin-top: 18px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 13px;
    align-items: start;
    padding: 16px 18px;
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(244,248,255,.95), rgba(238,244,251,.78));
    border: 1px solid rgba(47,111,237,.20);
}

body.page-ortswetter .weather-story-bottom-icon{
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: var(--brand);
    color: #fff;
}

body.page-ortswetter .weather-story-bottom strong{
    display: block;
    margin-bottom: 4px;
}

body.page-ortswetter .weather-story-bottom span{
    color: var(--muted);
    line-height: 1.6;
}


@media (max-width: 980px){
    body.page-ortswetter .context-grid, body.page-ortswetter .weather-story-head{
        grid-template-columns: 1fr;
    }

    body.page-ortswetter .weather-story-time{
        justify-self: start;
    }

    body.page-ortswetter .weather-metric-grid{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px){
    body.page-ortswetter .context-highlight-row, body.page-ortswetter .weather-metric-grid,
body.page-ortswetter .context-note, body.page-ortswetter .weather-story-bottom{
        grid-template-columns: 1fr;
    }


    body.page-ortswetter .local-context-card .card-body, body.page-ortswetter .current-weather-story .card-body{
        padding: 18px;
    }
}

/* =========================================================
   Kompakte Vorteilsleiste direkt unter dem Hero
   Ersetzt die hohe weiße Intro-Box durch eine flache 4er-Leiste.
   Desktop: 4 Spalten, Mobil: 2 x 2.
   ========================================================= */
body.page-ortswetter .hero-benefits-compact{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 0 0 18px;
    padding: 10px;
    background: rgba(255,255,255,.78);
    border: 1px solid rgba(255,255,255,.82);
    border-radius: 18px;
    box-shadow: 0 10px 28px rgba(19,42,79,.07);
    backdrop-filter: blur(8px);
}

body.page-ortswetter .hero-benefit-item{
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 13px;
    background: rgba(244,248,255,.82);
    border: 1px solid rgba(217,229,242,.9);
}

body.page-ortswetter .hero-benefit-icon{
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #eef5ff;
    color: var(--brand);
    font-size: .95rem;
    line-height: 1;
}

body.page-ortswetter .hero-benefit-copy{
    min-width: 0;
    display: block;
}

body.page-ortswetter .hero-benefit-copy strong{
    display: block;
    color: var(--text);
    font-size: .90rem;
    line-height: 1.2;
    font-weight: 800;
}

body.page-ortswetter .hero-benefit-copy small{
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: .76rem;
    line-height: 1.25;
}

@media (max-width: 860px){
    body.page-ortswetter .hero-benefits-compact{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px){
    body.page-ortswetter .hero-benefits-compact{
        gap: 8px;
        padding: 8px;
        margin-bottom: 14px;
    }

    body.page-ortswetter .hero-benefit-item{
        gap: 7px;
        padding: 8px;
    }

    body.page-ortswetter .hero-benefit-icon{
        flex-basis: 26px;
        width: 26px;
        height: 26px;
        font-size: .82rem;
    }

    body.page-ortswetter .hero-benefit-copy strong{
        font-size: .82rem;
    }

    body.page-ortswetter .hero-benefit-copy small{
        font-size: .70rem;
    }
}

/* =========================================================
   Light-/Dark-Mode für die Ortsseiten
   Der Menü-Schalter setzt die Klasse "dark" auf <html>.
   ========================================================= */

body.page-ortswetter{
    color-scheme: light;
    --bg: #f3f7fc;
    --card: rgba(255,255,255,0.92);

    --text: #172235;
    --muted: #627086;
    --soft: #eef4fb;
    --line: #d9e5f2;
    --brand: #2f6fed;
    --brand-dark: #1f4eb9;
    --success: #1f9d62;
    --shadow: 0 12px 40px rgba(19, 42, 79, 0.08);
}

html.dark body.page-ortswetter{
    color-scheme: dark;
    --bg: #08111d;
    --card: rgba(15,23,42,0.94);
    --card-strong: #111c2d;
    --text: #e8eef8;
    --muted: #a7b5c7;
    --soft: #172235;
    --line: rgba(255,255,255,0.13);
    --brand: #67aaff;
    --brand-dark: #9bc9ff;
    --success: #45d483;
    --shadow: 0 12px 40px rgba(0,0,0,0.30);
}

html.dark body.page-ortswetter .hero-benefits-compact{
    background: rgba(15,23,42,.90);
    border-color: var(--line);
    box-shadow: var(--shadow);
}

html.dark body.page-ortswetter .hero-benefit-item{
    background: rgba(23,34,53,.92);
    border-color: var(--line);
}

html.dark body.page-ortswetter .hero-benefit-icon{
    background: rgba(103,170,255,.12);
    color: var(--brand);
}

html.dark body.page-ortswetter .hero-benefit-copy strong{
    color: var(--text);
}

html.dark body.page-ortswetter .hero-benefit-copy small{
    color: var(--muted);
}

body.page-ortswetter{
    color: var(--text) !important;

}


html.dark body.page-ortswetter .hero, html.dark body.page-ortswetter .card, html.dark body.page-ortswetter .hero-card, html.dark body.page-ortswetter .stat-card, html.dark body.page-ortswetter .weather-item, html.dark body.page-ortswetter .quickinfo-box, html.dark body.page-ortswetter .quick-value, html.dark body.page-ortswetter .nearby-links a, html.dark body.page-ortswetter .hero-quicknav a, html.dark body.page-ortswetter .badge, html.dark body.page-ortswetter .btn-soft, html.dark body.page-ortswetter .local-seo-fact, html.dark body.page-ortswetter .local-seo-tag, html.dark body.page-ortswetter .faq-info-card, html.dark body.page-ortswetter .faq-fact, html.dark body.page-ortswetter .faq-item, html.dark body.page-ortswetter .context-highlight, html.dark body.page-ortswetter .context-note, html.dark body.page-ortswetter .context-more, html.dark body.page-ortswetter .weather-metric-card, html.dark body.page-ortswetter .weather-story-bottom, html.dark body.page-ortswetter .local-seo-note{
    background: var(--card) !important;
    border-color: var(--line) !important;
    color: var(--text) !important;
    box-shadow: var(--shadow);
}


html.dark body.page-ortswetter .hero-intro-card{
    background: rgba(9,14,22,.90) !important;
    color: var(--text) !important;
}

html.dark body.page-ortswetter .hero-benefits{
    background: rgba(15,23,42,.95) !important;
    color: var(--text) !important;
}

html.dark body.page-ortswetter .hero-benefits li, html.dark body.page-ortswetter .hero-benefits .links-text, html.dark body.page-ortswetter .hero-benefits .links-text b{
    color: var(--text) !important;
}

html.dark body.page-ortswetter .hero-benefits .rechts-text{
    color: #ffb15c !important;
}

html.dark body.page-ortswetter .hero-description{
    background: rgba(15,23,42,.95) !important;
    color: var(--muted) !important;
}

html.dark body.page-ortswetter .hero-description .glossary-context-link, html.dark body.page-ortswetter .breadcrumb a{
    color: var(--brand-dark) !important;
}


html.dark body.page-ortswetter .weather-feeling, html.dark body.page-ortswetter .feeling-good, html.dark body.page-ortswetter .feeling-rain, html.dark body.page-ortswetter .feeling-wind, html.dark body.page-ortswetter .feeling-cold, html.dark body.page-ortswetter .feeling-warm, html.dark body.page-ortswetter .feeling-warning{
    background: linear-gradient(135deg, rgba(17,39,55,.96), rgba(19,46,72,.92)) !important;
    color: var(--text) !important;
    border-color: var(--line) !important;
}

html.dark body.page-ortswetter .weather-feeling-label, html.dark body.page-ortswetter .outside-label{
    color: var(--brand-dark) !important;
}

html.dark body.page-ortswetter .outside-card:not(.outside-night){
    background: linear-gradient(135deg, rgba(17,39,55,.96), rgba(19,46,72,.90)) !important;
    color: var(--text) !important;
    border-color: var(--line) !important;
}

html.dark body.page-ortswetter .outside-text{
    color: var(--muted) !important;
}

html.dark body.page-ortswetter .quickinfo-windrose{
    background: #ffffff !important;
    border-color: rgba(255,255,255,.18) !important;
}


html.dark body.page-ortswetter .outdoor-link, html.dark body.page-ortswetter .outdoor-wandern, html.dark body.page-ortswetter .outdoor-grillen, html.dark body.page-ortswetter .outdoor-fahrrad, html.dark body.page-ortswetter .outdoor-baden, html.dark body.page-ortswetter .outdoor-outdoor{
    background: linear-gradient(135deg, rgba(17,28,45,.96), rgba(20,39,61,.92)) !important;
    border-color: var(--line) !important;
}

html.dark body.page-ortswetter .outdoor-link strong{
    color: var(--text) !important;
}

html.dark body.page-ortswetter .outdoor-link small{
    color: var(--muted) !important;
}


html.dark body.page-ortswetter .faq-item[open]{
    background: linear-gradient(180deg, rgba(20,34,55,.98), rgba(15,23,42,.96)) !important;
    border-color: rgba(103,170,255,.32) !important;
}

html.dark body.page-ortswetter .note{
    background: linear-gradient(180deg, rgba(18,34,55,.96), rgba(15,28,47,.96)) !important;
    border-color: var(--line) !important;
    border-left-color: var(--brand) !important;
    color: var(--text) !important;
}


html.dark body.page-ortswetter .btn-soft:hover, html.dark body.page-ortswetter .hero-quicknav a:hover, html.dark body.page-ortswetter .nearby-links a:hover{
    background: #1d2b40 !important;
    border-color: rgba(103,170,255,.32) !important;
}


html.dark body.page-ortswetter .section-title, html.dark body.page-ortswetter .local-seo-title, html.dark body.page-ortswetter .local-seo-lead, html.dark body.page-ortswetter .context-title, html.dark body.page-ortswetter .context-lead, html.dark body.page-ortswetter .weather-story-title, html.dark body.page-ortswetter .weather-value, html.dark body.page-ortswetter .stat-card .value, html.dark body.page-ortswetter .quickinfo-title, html.dark body.page-ortswetter .faq-summary, html.dark body.page-ortswetter .faq-fact strong, html.dark body.page-ortswetter .local-seo-fact strong, html.dark body.page-ortswetter .context-highlight strong, html.dark body.page-ortswetter .context-note strong, html.dark body.page-ortswetter .weather-metric-card strong{
    color: var(--text) !important;
}

html.dark body.page-ortswetter .section-intro, html.dark body.page-ortswetter .small, html.dark body.page-ortswetter .small-distance, html.dark body.page-ortswetter .weather-label, html.dark body.page-ortswetter .weather-item-meta, html.dark body.page-ortswetter .faq-info-card span, html.dark body.page-ortswetter .faq-fact small, html.dark body.page-ortswetter .local-seo-text, html.dark body.page-ortswetter .local-seo-fact small, html.dark body.page-ortswetter .context-copy, html.dark body.page-ortswetter .context-more-content, html.dark body.page-ortswetter .weather-story-lead{
    color: var(--muted) !important;
}


/* =========================================================
   Einheitliche abgerundete Schriftart
   =========================================================
   Die Ortsseiten sollen überall dieselbe runde Schrift nutzen
   wie der Text „Echte Wetterdaten aus der Region“.
   Deshalb werden spätere/externe Font-Regeln hier bewusst
   überstimmt.
*/
html, body.page-ortswetter, body.page-ortswetter button, body.page-ortswetter input, body.page-ortswetter select, body.page-ortswetter textarea,
body.page-ortswetter :where(h1, body.page-ortswetter h2, body.page-ortswetter h3, body.page-ortswetter h4, body.page-ortswetter h5, body.page-ortswetter h6, body.page-ortswetter p, body.page-ortswetter a, body.page-ortswetter span, body.page-ortswetter strong, body.page-ortswetter b, body.page-ortswetter small, body.page-ortswetter li, body.page-ortswetter dt, body.page-ortswetter dd, body.page-ortswetter label, body.page-ortswetter summary, body.page-ortswetter button, body.page-ortswetter input, body.page-ortswetter select, body.page-ortswetter textarea, body.page-ortswetter div){
    font-family: var(--font-rounded) !important;
}


body.page-ortswetter .site-header-shell, body.page-ortswetter .site-header-shell :where(h1, body.page-ortswetter h2, body.page-ortswetter h3, body.page-ortswetter h4, body.page-ortswetter h5, body.page-ortswetter h6, body.page-ortswetter p, body.page-ortswetter a, body.page-ortswetter span, body.page-ortswetter strong, body.page-ortswetter b, body.page-ortswetter small, body.page-ortswetter li, body.page-ortswetter button, body.page-ortswetter div){
    font-family: var(--font-header) !important;
}

body.page-ortswetter .site-header-shell .text-3d{
    font-family: var(--font-header) !important;
    font-style: italic !important;
    font-weight: 800 !important;
    color: #f5a000 !important;
    letter-spacing: -0.035em !important;
    line-height: 1 !important;

    -webkit-text-stroke: 0 !important;

    text-shadow:
        0 1px 0 #ffd88a,
        0 2px 0 #f6b24a,
        0 3px 0 #e8891d,
        0 4px 6px rgba(184, 88, 0, .42),
        0 0 12px rgba(255, 166, 0, .45),
        0 0 24px rgba(255, 166, 0, .28) !important;
}

body.page-ortswetter .site-header-shell .subtitle-wrap{
    font-family: var(--font-header) !important;
}


/* =========================================================
   Priorität: Live-Wetter zuerst + feststehender Seitenkopf
   - Logo eifel-wetter.de und blauer Balken bleiben beim Scrollen sichtbar.
   - Die wichtigsten Live-Informationen stehen direkt nach dem Breadcrumb.
   ========================================================= */
body.page-ortswetter{
    --ew-sticky-header-height: 118px;
}

body.page-ortswetter .site-header-shell{
    position: sticky !important;
    top: 0;
    z-index: 5000;
    background: rgba(232, 243, 255, .96);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: 0 8px 26px rgba(25, 55, 95, .10);
}

html{
    scroll-padding-top: calc(var(--ew-sticky-header-height) + 16px);
}


body.page-ortswetter .quickinfo-box-wrap{
    top: calc(var(--ew-sticky-header-height) + 14px);
}

body.page-ortswetter .priority-weather-intro{
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
    margin: 2px 0 14px;
    padding: 4px 2px 0;
}

body.page-ortswetter .priority-weather-kicker{
    margin-bottom: 3px;
    color: var(--brand);
    font-size: .82rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .09em;
}

body.page-ortswetter .priority-weather-intro h1{
    margin: 0;
    color: var(--text);
    font-size: clamp(1.65rem, 3vw, 2.45rem);
    line-height: 1.08;
    letter-spacing: -.025em;
}

body.page-ortswetter .priority-weather-meta{
    max-width: 470px;
    padding-bottom: 3px;
    color: var(--muted);
    font-size: .92rem;
    font-weight: 700;
    text-align: right;
}


body.page-ortswetter .priority-weather-intro + .local-live-grid{
    margin-bottom: 26px;
}

body.page-ortswetter .regional-context-hero{
    margin-top: 0;
}

@media (max-width: 980px){
    body.page-ortswetter .priority-weather-intro{
        display: block;
    }

    body.page-ortswetter .priority-weather-meta{
        margin-top: 6px;
        max-width: none;
        text-align: left;
    }

    body.page-ortswetter .quickinfo-box-wrap{
        top: auto;
    }
}

@media (max-width: 640px){
    body.page-ortswetter{
        --ew-sticky-header-height: 96px;
    }

    body.page-ortswetter .site-header-shell{
        box-shadow: 0 5px 18px rgba(25, 55, 95, .10);
    }

    body.page-ortswetter .priority-weather-intro{
        margin-bottom: 10px;
    }

    body.page-ortswetter .priority-weather-intro h1{
        font-size: 1.55rem;
    }

    body.page-ortswetter .priority-weather-meta{
        font-size: .82rem;
    }
}


body.page-ortswetter .glossary-context-link{
  color:var(--brand-dark);
  font-weight:700;
  text-decoration:none;
  border-bottom:1px dotted currentColor;
  text-underline-offset:3px;
}
body.page-ortswetter .glossary-context-link:hover, body.page-ortswetter .glossary-context-link:focus-visible{
  border-bottom-style:solid;
  outline:none;
}


        body.page-ortswetter .radar-nowcast-card{
            margin: 0 0 22px;
            padding: 20px 22px;
            background: var(--card);
            border: 1px solid var(--line);
            border-radius: var(--radius);
            box-shadow: var(--shadow);
        }
        body.page-ortswetter .radar-nowcast-head{ display:flex; align-items:flex-start; gap:14px; }
        body.page-ortswetter .radar-nowcast-icon{ font-size:2rem; line-height:1; }
        body.page-ortswetter .radar-nowcast-kicker{ color:var(--muted); font-size:.86rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; }
        body.page-ortswetter .radar-nowcast-title{ margin:2px 0 3px; font-size:1.28rem; line-height:1.2; }
        body.page-ortswetter .radar-nowcast-text{ margin:0; color:var(--muted); }
        body.page-ortswetter .radar-nowcast-local-note{
            margin: 12px 0 0;
            padding: 10px 12px;
            border: 1px solid var(--line);
            border-radius: 12px;
            background: var(--soft);
            color: var(--muted);
            font-size: .86rem;
            line-height: 1.5;
        }
        body.page-ortswetter .radar-nowcast-local-note strong{
            color: var(--text);
        }
        body.page-ortswetter .radar-nowcast-card.radar-rain{ border-left:5px solid #2f6fed; }
        body.page-ortswetter .radar-nowcast-card.radar-soon{ border-left:5px solid #4f8fe8; }
        body.page-ortswetter .radar-nowcast-card.radar-nearby{ border-left:5px solid #7a9fca; }
        body.page-ortswetter .radar-nowcast-card.radar-dry{ border-left:5px solid var(--success); }


        body.page-ortswetter .radar-nowcast-card.radar-dry.radar-nowcast-compact{
            padding: 10px 14px;
            margin-bottom: 14px;
            border-radius: 16px;
        }
        body.page-ortswetter .radar-nowcast-compact-line{
            display:flex;
            align-items:center;
            gap:9px;
            min-height:28px;
        }
        body.page-ortswetter .radar-nowcast-compact-icon{
            font-size:1.2rem;
            line-height:1;
            flex:0 0 auto;
        }
        body.page-ortswetter .radar-nowcast-compact-text{
            min-width:0;
            color:var(--text);
            font-size:.94rem;
            font-weight:800;
            line-height:1.35;
        }
        body.page-ortswetter .radar-nowcast-compact-text span{
            color:var(--muted);
            font-weight:600;
        }
        body.page-ortswetter .radar-nowcast-compact-age{
            margin-left:auto;
            color:var(--muted);
            font-size:.76rem;
            white-space:nowrap;
        }

        body.page-ortswetter .radar-nowcast-values{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-top:16px; }
        body.page-ortswetter .radar-nowcast-value{ padding:10px 12px; background:var(--soft); border:1px solid var(--line); border-radius:14px; }
        body.page-ortswetter .radar-nowcast-value span{ display:block; color:var(--muted); font-size:.8rem; }
        body.page-ortswetter .radar-nowcast-value strong{ display:block; margin-top:2px; font-size:1.08rem; }
        body.page-ortswetter .radar-timeline{ margin-top:18px; }
        body.page-ortswetter .radar-bars{ height:64px; display:flex; align-items:flex-end; gap:3px; padding:0 1px; border-bottom:1px solid var(--line); }
        body.page-ortswetter .radar-bar{ flex:1 1 0; min-width:2px; height:4px; max-height:60px; border-radius:3px 3px 0 0; background:#b8c8da; }
        body.page-ortswetter .radar-bar.wet{ background:var(--brand); }
        body.page-ortswetter .radar-axis{ display:flex; justify-content:space-between; margin-top:5px; color:var(--muted); font-size:.76rem; }
        body.page-ortswetter .radar-nowcast-foot{ margin-top:12px; color:var(--muted); font-size:.8rem; }
        @media (max-width:640px){
            body.page-ortswetter .radar-nowcast-card{ padding:17px; }
            body.page-ortswetter .radar-nowcast-values{ grid-template-columns:repeat(2,minmax(0,1fr)); }
            body.page-ortswetter .radar-bars{ gap:2px; }
        }


        body.page-ortswetter .mosmix-card{
            margin: 0 0 22px;
            padding: 18px 20px;
            background: var(--card);
            border: 1px solid var(--line);
            border-left: 5px solid #6f7fdc;
            border-radius: var(--radius);
            box-shadow: var(--shadow);
        }
        body.page-ortswetter .mosmix-head{
            display: flex;
            align-items: flex-start;
            gap: 13px;
        }
        body.page-ortswetter .mosmix-icon{
            flex: 0 0 auto;
            font-size: 1.8rem;
            line-height: 1;
        }
        body.page-ortswetter .mosmix-kicker{
            color: var(--muted);
            font-size: .82rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: .04em;
        }
        body.page-ortswetter .mosmix-title{
            margin: 2px 0 4px;
            font-size: 1.22rem;
            line-height: 1.2;
        }
        body.page-ortswetter .mosmix-sub{
            margin: 0;
            color: var(--muted);
            font-size: .9rem;
        }
        body.page-ortswetter .mosmix-values{
            display: grid;
            grid-template-columns: repeat(5, minmax(0, 1fr));
            gap: 9px;
            margin-top: 14px;
        }
        body.page-ortswetter .mosmix-value{
            min-width: 0;
            padding: 9px 11px;
            background: var(--soft);
            border: 1px solid var(--line);
            border-radius: 13px;
        }
        body.page-ortswetter .mosmix-value span{
            display: block;
            color: var(--muted);
            font-size: .76rem;
            line-height: 1.25;
        }
        body.page-ortswetter .mosmix-value strong{
            display: block;
            margin-top: 3px;
            color: var(--text);
            font-size: 1.02rem;
            line-height: 1.2;
            white-space: nowrap;
        }
        body.page-ortswetter .mosmix-foot{
            margin-top: 10px;
            color: var(--muted);
            font-size: .78rem;
            line-height: 1.45;
        }
        body.page-ortswetter .mosmix-foot strong{
            color: var(--text);
        }
        @media (max-width:900px){
            body.page-ortswetter .mosmix-values{ grid-template-columns: repeat(3, minmax(0,1fr)); }
        }
        @media (max-width:640px){
            body.page-ortswetter .mosmix-card{ padding: 14px 15px; }
            body.page-ortswetter .mosmix-values{ grid-template-columns: repeat(2, minmax(0,1fr)); }
            body.page-ortswetter .mosmix-value:last-child{ grid-column: 1 / -1; }
        }


        body.page-ortswetter .local-data-sources{
            display:grid;
            grid-template-columns:repeat(3,minmax(0,1fr));
            gap:10px;
            margin:0 0 18px;
        }
        body.page-ortswetter .local-data-source{
            display:flex;
            align-items:center;
            gap:10px;
            padding:11px 13px;
            background:var(--card);
            border:1px solid var(--line);
            border-radius:15px;
            box-shadow:0 7px 20px rgba(18,37,67,.04);
        }
        body.page-ortswetter .local-data-source-icon{ font-size:1.3rem; flex:0 0 auto; }
        body.page-ortswetter .local-data-source strong{ display:block; font-size:.9rem; line-height:1.2; }
        body.page-ortswetter .local-data-source small{ display:block; color:var(--muted); font-size:.76rem; line-height:1.25; margin-top:2px; }

        body.page-ortswetter .context-compact-lead{
            margin:0 0 14px;
            color:var(--text);
            font-size:1rem;
            line-height:1.55;
        }
        body.page-ortswetter .context-compact-note{
            margin:12px 0 0;
            color:var(--muted);
            font-size:.9rem;
        }

        @media (max-width:760px){
            body.page-ortswetter .local-data-sources{ grid-template-columns:1fr; gap:7px; }
            body.page-ortswetter .local-data-source{ padding:9px 11px; }
        }


        body.page-ortswetter .local-summary-line{
            display:flex;
            align-items:center;
            gap:11px;
            margin:0 0 8px;
            padding:11px 14px;
            background:var(--card);
            border:1px solid var(--line);
            border-left:5px solid var(--brand);
            border-radius:15px;
            box-shadow:0 7px 20px rgba(18,37,67,.04);
        }
        body.page-ortswetter .local-summary-icon{
            flex:0 0 auto;
            font-size:1.35rem;
            line-height:1;
        }
        body.page-ortswetter .local-summary-copy{
            min-width:0;
            display:flex;
            align-items:baseline;
            flex-wrap:wrap;
            gap:4px 8px;
        }
        body.page-ortswetter .local-summary-copy strong{
            font-size:.95rem;
            white-space:nowrap;
        }
        body.page-ortswetter .local-summary-copy span{
            color:var(--muted);
            font-size:.9rem;
        }

        body.page-ortswetter .local-source-line{
            display:flex;
            flex-wrap:wrap;
            gap:6px 16px;
            margin:0 0 14px;
            padding:7px 13px;
            color:var(--muted);
            font-size:.78rem;
            background:rgba(255,255,255,.48);
            border:1px solid var(--line);
            border-radius:13px;
        }
        body.page-ortswetter .local-source-line span{ white-space:nowrap; }

        body.page-ortswetter .mosmix-details{
            margin:0 0 18px;
            background:var(--card);
            border:1px solid var(--line);
            border-radius:14px;
            overflow:hidden;
        }
        body.page-ortswetter .mosmix-details summary{
            cursor:pointer;
            display:flex;
            justify-content:space-between;
            align-items:center;
            gap:12px;
            padding:9px 13px;
            font-weight:800;
            font-size:.88rem;
        }
        body.page-ortswetter .mosmix-details summary small{
            color:var(--muted);
            font-weight:600;
        }
        body.page-ortswetter .mosmix-details-body{
            display:grid;
            grid-template-columns:repeat(5,minmax(0,1fr));
            gap:8px;
            padding:0 13px 12px;
        }
        body.page-ortswetter .mosmix-details-body > div{
            padding:8px 10px;
            background:var(--soft);
            border-radius:11px;
        }
        body.page-ortswetter .mosmix-details-body span{
            display:block;
            color:var(--muted);
            font-size:.72rem;
        }
        body.page-ortswetter .mosmix-details-body strong{
            display:block;
            margin-top:2px;
            font-size:.92rem;
        }
        @media (max-width:760px){
            body.page-ortswetter .local-summary-copy,
body.page-ortswetter .local-summary-copy strong, body.page-ortswetter .local-summary-copy span{
                display:block;
            }

            body.page-ortswetter .local-source-line{
                gap:4px 10px;
            }
            body.page-ortswetter .local-source-line span{
                white-space:normal;
            }
            body.page-ortswetter .mosmix-details-body{
                grid-template-columns:repeat(2,minmax(0,1fr));
            }
        }


        body.page-ortswetter .weather-source-overview{
            display:grid;
            gap:8px;
            margin:0 0 18px;
        }
        body.page-ortswetter .weather-source-row{
            display:flex;
            gap:12px;
            align-items:flex-start;
            padding:11px 14px;
            background:var(--card);
            border:1px solid var(--line);
            border-radius:15px;
            box-shadow:0 7px 20px rgba(18,37,67,.04);
        }
        body.page-ortswetter .weather-source-row.live-row{ border-left:5px solid var(--success); }
        body.page-ortswetter .weather-source-row.radar-row{ border-left:5px solid var(--brand); }
        body.page-ortswetter .weather-source-row.forecast-row{ border-left:5px solid #7868d8; }

        body.page-ortswetter .weather-source-icon{
            flex:0 0 auto;
            width:30px;
            text-align:center;
            font-size:1.35rem;
            line-height:1.2;
            padding-top:2px;
        }
        body.page-ortswetter .weather-source-main{ min-width:0; flex:1; }

        body.page-ortswetter .weather-source-kicker{
            color:var(--muted);
            font-size:.72rem;
            line-height:1.2;
            font-weight:900;
            letter-spacing:.045em;
        }
        body.page-ortswetter .weather-source-title{
            margin-top:3px;
            color:var(--text);
            font-size:1rem;
            line-height:1.3;
            font-weight:800;
        }
        body.page-ortswetter .weather-source-note{
            margin-top:3px;
            color:var(--muted);
            font-size:.78rem;
            line-height:1.35;
        }

        body.page-ortswetter .weather-source-radar-bars{
            display:flex;
            align-items:flex-end;
            gap:2px;
            height:32px;
            margin-top:8px;
        }
        body.page-ortswetter .weather-source-radar-bars span{
            flex:1 1 0;
            min-width:2px;
            height:3px;
            border-radius:2px 2px 0 0;
            background:#c5d0dc;
        }
        body.page-ortswetter .weather-source-radar-bars span.wet{ background:var(--brand); }
        body.page-ortswetter .weather-source-radar-axis{
            display:flex;
            justify-content:space-between;
            margin-top:2px;
            color:var(--muted);
            font-size:.68rem;
        }

        body.page-ortswetter .weather-source-details{
            margin-top:7px;
        }
        body.page-ortswetter .weather-source-details summary{
            cursor:pointer;
            color:var(--brand-dark);
            font-size:.78rem;
            font-weight:800;
        }
        body.page-ortswetter .weather-source-detail-grid{
            display:grid;
            grid-template-columns:repeat(5,minmax(0,1fr));
            gap:6px;
            margin-top:7px;
        }
        body.page-ortswetter .weather-source-detail-grid > div{
            padding:7px 8px;
            background:var(--soft);
            border-radius:9px;
        }
        body.page-ortswetter .weather-source-detail-grid span{
            display:block;
            color:var(--muted);
            font-size:.67rem;
        }
        body.page-ortswetter .weather-source-detail-grid strong{
            display:block;
            margin-top:1px;
            font-size:.82rem;
        }

        @media (max-width:760px){
            body.page-ortswetter .weather-source-row{ padding:10px 11px; gap:9px; }
            body.page-ortswetter .weather-source-kicker{ font-size:.66rem; }
            body.page-ortswetter .weather-source-title{ font-size:.94rem; }
            body.page-ortswetter .weather-source-note{ font-size:.74rem; }
            body.page-ortswetter .weather-source-detail-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
        }


        body.page-ortswetter .quickinfo-title-row{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:10px;
            margin-bottom:10px;
        }
        body.page-ortswetter .quickinfo-title-row .quickinfo-title{
            margin-bottom:0;
        }
        body.page-ortswetter .quickinfo-source-badge{
            flex:0 0 auto;
            padding:4px 8px;
            border:1px solid var(--line);
            border-radius:999px;
            background:var(--soft);
            color:var(--muted);
            font-size:.68rem;
            line-height:1.2;
            font-weight:800;
            letter-spacing:.02em;
            white-space:nowrap;
        }
        @media (max-width:640px){
            body.page-ortswetter .quickinfo-title-row{
                align-items:flex-start;
                flex-direction:column;
                gap:5px;
            }
        }


        body.page-ortswetter .quick-extra{
            display:block;
            margin-top:2px;
            color:var(--muted);
            font-size:.67rem;
            font-weight:600;
            line-height:1.2;
        }
        body.page-ortswetter .compact-forecast-only{
            margin-bottom:10px;
        }
        body.page-ortswetter .compact-forecast-only .weather-source-row{
            padding-top:9px;
            padding-bottom:9px;
        }
        body.page-ortswetter .compact-measurements{
            margin:0 0 18px;
            background:var(--card);
            border:1px solid var(--line);
            border-radius:15px;
            overflow:hidden;
        }
        body.page-ortswetter .compact-measurements > summary{
            cursor:pointer;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:12px;
            padding:10px 14px;
            font-size:.88rem;
            font-weight:850;
        }
        body.page-ortswetter .compact-measurements > summary small{
            color:var(--muted);
            font-size:.72rem;
            font-weight:600;
        }
        body.page-ortswetter .compact-measurements-grid{
            display:grid;
            grid-template-columns:repeat(3,minmax(0,1fr));
            gap:8px;
            padding:0 12px 12px;
        }
        body.page-ortswetter .compact-measurements-grid .weather-item{
            margin:0;
            padding:10px;
            min-height:0;
        }
        body.page-ortswetter .weather-source-detail-grid.compact-two{
            grid-template-columns:repeat(2,minmax(0,1fr));
            max-width:420px;
        }
        @media (max-width:700px){
            body.page-ortswetter .compact-measurements > summary{
                align-items:flex-start;
                flex-direction:column;
                gap:2px;
            }
            body.page-ortswetter .compact-measurements-grid{
                grid-template-columns:repeat(2,minmax(0,1fr));
            }
        }


        body.page-ortswetter .three-hour-forecast{
            margin:0 0 16px;
            padding:12px 14px;
            background:var(--card);
            border:1px solid var(--line);
            border-left:5px solid #7868d8;
            border-radius:15px;
            box-shadow:0 7px 20px rgba(18,37,67,.04);
        }
        body.page-ortswetter .three-hour-head{
            display:flex;
            justify-content:space-between;
            align-items:flex-end;
            gap:12px;
            margin-bottom:9px;
        }
        body.page-ortswetter .three-hour-kicker{
            color:var(--muted);
            font-size:.69rem;
            font-weight:900;
            letter-spacing:.045em;
        }
        body.page-ortswetter .three-hour-head h2{
            margin:2px 0 0;
            font-size:1.05rem;
            line-height:1.2;
        }
        body.page-ortswetter .three-hour-head > small{
            color:var(--muted);
            font-size:.7rem;
            text-align:right;
        }
        body.page-ortswetter .three-hour-grid{
            display:grid;
            grid-template-columns:repeat(3,minmax(0,1fr));
            gap:7px;
        }
        body.page-ortswetter .three-hour-item{
            padding:9px 10px;
            background:var(--soft);
            border-radius:11px;
        }
        body.page-ortswetter .three-hour-time{
            color:var(--muted);
            font-size:.72rem;
            font-weight:800;
        }
        body.page-ortswetter .three-hour-main{
            display:flex;
            align-items:center;
            gap:7px;
            margin-top:3px;
        }
        body.page-ortswetter .three-hour-icon{
            font-size:1.25rem;
            line-height:1;
        }
        body.page-ortswetter .three-hour-main strong{
            font-size:1.02rem;
        }
        body.page-ortswetter .three-hour-meta{
            display:flex;
            flex-wrap:wrap;
            gap:3px 9px;
            margin-top:5px;
            color:var(--muted);
            font-size:.72rem;
        }
        body.page-ortswetter .three-hour-foot{
            margin-top:7px;
            color:var(--muted);
            font-size:.68rem;
        }
        @media (max-width:640px){
            body.page-ortswetter .three-hour-head{
                display:block;
            }
            body.page-ortswetter .three-hour-head > small{
                display:block;
                margin-top:3px;
                text-align:left;
            }
            body.page-ortswetter .three-hour-grid{
                grid-template-columns:1fr;
            }
            body.page-ortswetter .three-hour-item{
                display:grid;
                grid-template-columns:55px 95px 1fr;
                align-items:center;
                gap:7px;
            }
            body.page-ortswetter .three-hour-main, body.page-ortswetter .three-hour-meta{
                margin-top:0;
            }
        }


/* =========================================================
   ORTSSEITEN – gemeinsame Design-Angleichung
========================================================= */
body.page-ortswetter{
  --bg:#eef4fb;
  --card:rgba(255,255,255,.82);
  --card-strong:#ffffff;
  --text:#17212f;
  --muted:#5e6b7a;
  --soft:rgba(245,248,253,.88);
  --line:rgba(56,103,214,.20);
  --brand:#3867d6;
  --brand-dark:#2858bd;
  --ew-ort-accent:#ff9800;
  --shadow:0 14px 34px rgba(15,23,42,.09);
  --radius:22px;

  --station-modal-bg:#ffffff;
  --station-modal-fg:#111111;
  --station-modal-border:rgba(56,103,214,.20);
  --station-row-border:rgba(56,103,214,.12);
  --station-btn-border:rgba(56,103,214,.24);
  --station-btn-bg:transparent;
  --station-link-border:rgba(56,103,214,.24);
  --station-overlay-bg:rgba(0,0,0,.45);
}

html.dark body.page-ortswetter{
  --bg:#081018;
  --card:rgba(17,26,38,.88);
  --card-strong:#111a26;
  --text:#e8eef7;
  --muted:#a9b4c4;
  --soft:rgba(15,23,36,.88);
  --line:rgba(140,200,255,.20);
  --brand:#8cc8ff;
  --brand-dark:#8cc8ff;
  --ew-ort-accent:#ffd27d;
  --shadow:0 14px 34px rgba(0,0,0,.22);

  --station-modal-bg:rgba(17,26,38,.98);
  --station-modal-fg:#f2f2f2;
  --station-modal-border:rgba(140,200,255,.22);
  --station-row-border:rgba(255,255,255,.08);
  --station-btn-border:rgba(140,200,255,.25);
  --station-btn-bg:transparent;
  --station-link-border:rgba(140,200,255,.22);
  --station-overlay-bg:rgba(0,0,0,.65);
}


body.page-ortswetter .hero,
body.page-ortswetter .card,
body.page-ortswetter .hero-card,
body.page-ortswetter .priority-weather-intro,
body.page-ortswetter .weather-feeling,
body.page-ortswetter .outside-card,
body.page-ortswetter .livecam-preview,
body.page-ortswetter .quickinfo-box,
body.page-ortswetter .radar-nowcast-card,
body.page-ortswetter .three-hour-forecast,
body.page-ortswetter .compact-measurements,
body.page-ortswetter .faq-modern{
  border-radius:22px;
}


body.page-ortswetter .card,
body.page-ortswetter .hero-card,
body.page-ortswetter .priority-weather-intro,
body.page-ortswetter .quickinfo-box,
body.page-ortswetter .three-hour-forecast,
body.page-ortswetter .compact-measurements,
body.page-ortswetter .faq-modern{
  border-color:var(--line);
  box-shadow:var(--shadow);
}


body.page-ortswetter .priority-weather-intro h1,
body.page-ortswetter .section-title,
body.page-ortswetter .context-title,
body.page-ortswetter .local-seo-title,
body.page-ortswetter .weather-story-title,
body.page-ortswetter .three-hour-head h2,
body.page-ortswetter .faq-modern h2{
  color:var(--ew-ort-accent);
}


body.page-ortswetter .stat-card,
body.page-ortswetter .weather-item,
body.page-ortswetter .quick-value,
body.page-ortswetter .radar-nowcast-value,
body.page-ortswetter .three-hour-item,
body.page-ortswetter .outdoor-link,
body.page-ortswetter .faq-item,
body.page-ortswetter .faq-info-card,
body.page-ortswetter .faq-fact,
body.page-ortswetter .local-seo-fact,
body.page-ortswetter .context-highlight,
body.page-ortswetter .context-note,
body.page-ortswetter .context-more,
body.page-ortswetter .weather-metric-card,
body.page-ortswetter .weather-story-bottom,
body.page-ortswetter .local-seo-note{
  border-radius:14px;
}


body.page-ortswetter .eyebrow,
body.page-ortswetter .badge,
body.page-ortswetter .btn,
body.page-ortswetter .hero-quicknav a,
body.page-ortswetter .nearby-links a,
body.page-ortswetter .quickinfo-source-badge,
body.page-ortswetter .outside-link{
  border-radius:999px;
}


body.page-ortswetter .radar-nowcast-card,
body.page-ortswetter .weather-feeling,
body.page-ortswetter .outside-card,
body.page-ortswetter .start-warnbox{
  box-shadow:var(--shadow);
}

@media (max-width:640px){
  body.page-ortswetter .wrap{
    padding:12px 8px 28px;
  }

  body.page-ortswetter .priority-weather-intro,
  body.page-ortswetter .card,
  body.page-ortswetter .hero-card{
    border-radius:22px;
  }

  body.page-ortswetter .card-body{
    padding:18px 16px;
  }
}

/* =========================================================
   ORTSSEITEN – Layout-Fix 2026-09-03
   1. Outside-Box nicht auf Grid-Zeilenhöhe strecken
   2. Webcam-Overlay wieder nur als untere Beschriftungsleiste
   3. Windrosen-Pfeil exakt um die Mitte rotieren
========================================================= */


body.page-ortswetter #outside-status-container{
  align-self:start;
}

body.page-ortswetter #outside-status-container .outside-card{
  height:auto;
  min-height:0;
  align-self:start;
}


body.page-ortswetter .livecam-overlay{


  right:16px;


}


body.page-ortswetter .quickinfo-windrose .pointer{
  left:50%;
  top:50%;
  transform:translate(-50%, -50%) rotate(var(--wind-angle));
  transform-origin:center center;
}


body.page-ortswetter .quickinfo-windrose .pointer img{
  display:block;
  margin:0;
}

/* =========================================================
   ORTSSEITEN – Livecam-Beschriftung wie bisher kompakt
========================================================= */
body.page-ortswetter .livecam-overlay{
  top:auto;
  left:16px;
  right:auto;
  bottom:16px;

  display:inline-flex;
  width:max-content;
  max-width:calc(100% - 32px);
  height:auto;
  min-height:0;

  padding:10px 14px;
  border-radius:14px;

  background:rgba(0,0,0,.48);
  border:1px solid rgba(255,255,255,.10);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;

  color:rgba(255,255,255,.96);
  box-shadow:none;
  transform:none;
}

body.page-ortswetter .livecam-overlay span{
  display:block;
  white-space:normal;
}

body.page-ortswetter .livecam-preview:hover .livecam-overlay{
  background:rgba(0,0,0,.56);
  color:#fff;
  border-color:rgba(255,255,255,.14);
  transform:none;
}

/* =========================================================
   PAGE: RADAR
   Grundlage: radar(4).php
========================================================= */

    body.page-radar{
      --bg:#f5f7fb;
      --text:#0b1220;
      --muted:#5f6b7a;
      --card:#ffffff;
      --border:#dbe4f0;


      --shadow:0 10px 30px rgba(15,23,42,.08);
      --radius:24px;
      --radar-size:600px;
      --radar-scale:1;
    }
    html.dark body.page-radar{


      --card:#111a26;
      --border:#253449;
      --brand:#45aaf2;

      --shadow:none;
    }
    body.page-radar, body.page-radar *{box-sizing:border-box}


    body.page-radar [hidden]{display:none !important;}
    body.page-radar{
      margin:0;
      color:var(--text);

      font-family:Quicksand, Arial, sans-serif;
    }
    body.page-radar .page{
      width:min(1500px, calc(100% - 24px));
      margin:0 auto;
      padding:16px 0 42px;
    }
    body.page-radar .hero{
      border:1px solid var(--border);
      border-radius:30px;
      padding:24px;
      background:rgba(255,255,255,.72);
      backdrop-filter:blur(8px);
      -webkit-backdrop-filter:blur(8px);

      margin-bottom:18px;
      overflow:hidden;
      position:relative;
    }
    html.dark body.page-radar .hero{background:rgba(10,16,24,.76)}
    body.page-radar .hero::after{
      content:"";
      position:absolute;
      right:-90px;
      top:-90px;
      width:220px;
      height:220px;
      border-radius:999px;
      background:radial-gradient(circle, rgba(69,170,242,.35), transparent 68%);
      pointer-events:none;
    }
    body.page-radar .hero-kicker{color:var(--brand);font-weight:800;margin:0 0 8px}
    body.page-radar .hero h1{margin:0;font-size:clamp(1.8rem,4vw,3.2rem);line-height:1.1}
    body.page-radar .hero p{font-size:1.1rem;line-height:1.6;margin:14px 0 0;color:var(--muted);max-width:940px}
    body.page-radar .layout{display:grid;gap:18px}
    body.page-radar .card{

      border:1px solid var(--border);
      border-radius:var(--radius);
      padding:18px;

      overflow:hidden;
    }
    body.page-radar .card h2{margin:0 0 14px;color:var(--brand);font-size:1.25rem}
    body.page-radar .card p{line-height:1.6;color:var(--muted)}
    body.page-radar .radar-workspace{display:grid;gap:18px}
    body.page-radar .radar-head{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:16px;
      flex-wrap:wrap;
      margin-bottom:14px;
    }
    body.page-radar .radar-title h2{margin-bottom:6px}
    body.page-radar .radar-title p{margin:0;color:var(--muted)}
    body.page-radar .live-pill{
      display:inline-flex;
      align-items:center;
      gap:8px;
      border-radius:999px;
      padding:10px 14px;
      border:1px solid rgba(24,169,153,.35);
      background:rgba(24,169,153,.12);
      color:var(--brand-2);
      font-weight:900;
      white-space:nowrap;
    }
    body.page-radar .live-dot{
      width:10px;
      height:10px;
      border-radius:999px;
      background:currentColor;
      box-shadow:0 0 0 0 rgba(24,169,153,.5);
      animation:pulse 2s infinite;
    }
    @keyframes pulse{
      0%{box-shadow:0 0 0 0 rgba(24,169,153,.45)}
      70%{box-shadow:0 0 0 10px rgba(24,169,153,0)}
      100%{box-shadow:0 0 0 0 rgba(24,169,153,0)}
    }
    body.page-radar .toolbar{
      display:grid;
      gap:12px;
      grid-template-columns:1fr;
      padding:14px;
      border:1px solid var(--border);
      border-radius:20px;
      background:linear-gradient(135deg, rgba(56,103,214,.08), rgba(24,169,153,.08));
    }
    body.page-radar .control{display:grid;gap:7px;align-content:start}
    body.page-radar .control label{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      color:var(--muted);
      font-size:.95rem;
      font-weight:800;
    }
    body.page-radar .control output{color:var(--text);font-weight:900}
    body.page-radar .control input[type="range"]{width:100%;accent-color:var(--brand)}
    body.page-radar .button-row{display:flex;gap:10px;flex-wrap:wrap;align-items:end}
    body.page-radar .button, body.page-radar button.button{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      padding:10px 14px;

      border:1px solid var(--border);
      color:var(--text);
      text-decoration:none;
      font-weight:800;
      background:rgba(255,255,255,.55);
      cursor:pointer;
      min-height:42px;
      font:inherit;
    }
    html.dark body.page-radar .button, html.dark body.page-radar button.button{background:rgba(255,255,255,.05)}
    body.page-radar .button.primary{
      color:#fff;
      border-color:transparent;
      background:linear-gradient(135deg, var(--brand), var(--brand-2));
    }
    body.page-radar .radar-panels{display:grid;gap:22px}
    body.page-radar .radar-card{padding:0;display:flex;flex-direction:column;min-width:0}
    body.page-radar .radar-panel-title{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      flex-wrap:wrap;
      padding:14px 16px;
      border-bottom:1px solid var(--border);
      background:rgba(255,255,255,.52);
    }
    html.dark body.page-radar .radar-panel-title{background:rgba(255,255,255,.05)}
    body.page-radar .radar-panel-title h2{margin:0;color:var(--text);font-size:1.18rem}
    body.page-radar .radar-panel-title span{color:var(--muted);font-size:.9rem;font-weight:800}
    body.page-radar .radar-toolbar-note{
      display:flex;
      justify-content:space-between;
      gap:12px;
      flex-wrap:wrap;
      padding:10px 16px;
      border-bottom:1px solid var(--border);
      color:var(--muted);
      font-size:.9rem;
      background:rgba(255,255,255,.45);
    }
    html.dark body.page-radar .radar-toolbar-note{background:rgba(255,255,255,.04)}
    body.page-radar .radar-viewport{
      width:100%;
      min-height:628px;
      overflow:auto;
      display:flex;
      align-items:flex-start;
      justify-content:center;
      padding:14px;
      background:#eaf0f7;
      position:relative;
    }
    html.dark body.page-radar .radar-viewport{background:#0b1420}
    body.page-radar .radar-iframe{
      width:var(--radar-size)!important;
      max-width:none!important;
      height:var(--radar-size)!important;
      max-height:none!important;
      padding:0!important;
      border:none!important;
      box-sizing:border-box!important;
      border-radius:18px;
      background:#fff;
      flex:0 0 var(--radar-size);
      transform:scale(var(--radar-scale));
      transform-origin:top center;
      box-shadow:0 18px 38px rgba(15,23,42,.18);
    }
    body.page-radar .radar-loading{
      position:absolute;
      z-index:4;
      top:24px;
      left:50%;
      transform:translateX(-50%);
      border-radius:999px;
      padding:10px 14px;
      background:rgba(11,18,32,.82);
      color:#fff;
      font-weight:900;
      box-shadow:0 10px 24px rgba(15,23,42,.28);
    }
    body.page-radar .fallback{
      padding:10px 16px 14px;
      color:var(--muted);
      font-size:.92rem;
      border-top:1px solid var(--border);
    }
    body.page-radar .fallback a{color:var(--brand);font-weight:800;text-decoration:none}
    body.page-radar .fullscreen-area:fullscreen{
      padding:18px;
      background:var(--bg);
      overflow:auto;
    }
    body.page-radar .fullscreen-area:fullscreen .toolbar, body.page-radar .fullscreen-area:fullscreen .radar-panels{
      width:min(1500px,100%);
      margin-left:auto;
      margin-right:auto;
    }
    body.page-radar .fullscreen-area:fullscreen .radar-viewport{min-height:calc(100vh - 180px)}
    body.page-radar .info-grid{display:grid;gap:14px}
    body.page-radar .info-box{
      border:1px solid var(--border);
      border-radius:20px;
      padding:16px;
      background:rgba(56,103,214,.06);
    }
    body.page-radar .info-box h3{margin:0 0 8px;font-size:1.05rem;color:var(--text)}
    body.page-radar .info-box p{margin:0;color:var(--muted);line-height:1.55}
    body.page-radar .source{color:var(--muted);font-size:.95rem;line-height:1.5}
    body.page-radar .privacy-card{
      border:1px solid rgba(255,152,0,.38);
      border-radius:20px;
      padding:16px;
      background:rgba(255,152,0,.10);
      display:grid;
      gap:10px;
    }
    body.page-radar .privacy-card h3{margin:0;color:var(--text);font-size:1.08rem}
    body.page-radar .privacy-card p{margin:0;color:var(--muted);line-height:1.55}
    body.page-radar .privacy-card .button-row{margin-top:2px}
    body.page-radar .privacy-card .privacy-note{font-size:.9rem}
    body.page-radar .privacy-active{
      border:1px solid rgba(24,169,153,.35);
      border-radius:18px;
      padding:12px 14px;
      background:rgba(24,169,153,.10);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      flex-wrap:wrap;
    }
    body.page-radar .privacy-active p{margin:0;color:var(--muted)}
    body.page-radar .radar-placeholder{
      min-height:var(--radar-size);
      width:min(100%, var(--radar-size));
      display:grid;
      place-items:center;
      align-content:center;
      gap:8px;
      text-align:center;
      padding:24px;
      border:1px dashed var(--border);
      border-radius:18px;
      background:rgba(255,255,255,.55);
      color:var(--muted);
    }
    html.dark body.page-radar .radar-placeholder{background:rgba(255,255,255,.04)}
    body.page-radar .radar-placeholder strong{color:var(--text);font-size:1.05rem}
    body.page-radar .radar-placeholder a{color:var(--brand);font-weight:800;text-decoration:none}


    body.page-radar .glossary-text-link{
      color:var(--brand);
      font-weight:800;
      text-decoration:none;
      border-bottom:1px dotted currentColor;
      text-underline-offset:3px;
    }
    body.page-radar .glossary-text-link:hover, body.page-radar .glossary-text-link:focus-visible{
      border-bottom-style:solid;
      outline:none;
    }
    body.page-radar .side{display:grid;gap:18px}
    body.page-radar .quick-list{display:grid;gap:10px;margin:0;padding:0;list-style:none}
    body.page-radar .quick-list li{display:flex;gap:10px;align-items:flex-start;color:var(--muted);line-height:1.45}
    body.page-radar .quick-list strong{color:var(--text)}
    body.page-radar .badge{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:26px;
      height:26px;
      border-radius:999px;
      flex:0 0 26px;
      background:rgba(56,103,214,.12);
      color:var(--brand);
      font-weight:900;
    }
    body.page-radar .mini-radar img{width:100%;height:auto;display:block;border-radius:18px;background:#eef2f7}
    body.page-radar .caption{font-size:.9rem;color:var(--muted);margin-top:8px;text-align:right}
    body.page-radar .noscript{
      padding:12px 14px;
      border-radius:16px;
      background:#fff3cd;
      color:#3b2500;
      font-weight:800;
    }
    html.dark body.page-radar .noscript{background:rgba(120,53,15,.95);color:#fff7ed}

    @media (min-width:760px){
      body.page-radar .toolbar{grid-template-columns:minmax(220px,1fr) minmax(220px,1fr) auto;align-items:end}
      body.page-radar .info-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
    }
    @media (min-width:980px){
      body.page-radar .layout{grid-template-columns:minmax(0,1fr) 360px;align-items:start}
      body.page-radar .side{position:sticky;top:18px}
    }


    @media (max-width:680px){
      body.page-radar .radar-viewport{justify-content:flex-start;padding:10px}
      body.page-radar .button-row .button{flex:1 1 150px}
      body.page-radar .radar-panel-title h2{font-size:1.08rem}
    }


    body.page-radar .nowcast-card{
      margin-bottom:18px;
      border-left:5px solid var(--brand);
    }
    body.page-radar .nowcast-card.nowcast-dry{border-left-color:var(--brand-2)}
    body.page-radar .nowcast-card.nowcast-wet{border-left-color:#f59e0b}
    body.page-radar .nowcast-top{
      display:flex;align-items:flex-start;justify-content:space-between;
      gap:14px;flex-wrap:wrap;margin-bottom:12px;
    }
    body.page-radar .nowcast-kicker{
      margin:0 0 5px;color:var(--brand);font-size:.82rem;
      font-weight:900;letter-spacing:.06em;text-transform:uppercase;
    }
    body.page-radar .nowcast-card h2{margin:0 0 6px}
    body.page-radar .nowcast-status{
      margin:0;color:var(--text)!important;font-size:1.08rem;font-weight:900;
    }
    body.page-radar .nowcast-test{
      display:inline-flex;align-items:center;padding:7px 10px;border-radius:999px;
      background:rgba(220,38,38,.12);color:#dc2626;font-size:.78rem;font-weight:900;
      letter-spacing:.05em;text-transform:uppercase;
    }
    html.dark body.page-radar .nowcast-test{color:#fca5a5;background:rgba(239,68,68,.14)}
    body.page-radar .nowcast-values{
      display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:14px;
    }
    body.page-radar .nowcast-value{
      padding:12px;border:1px solid var(--border);border-radius:16px;
      background:rgba(56,103,214,.055);
    }
    body.page-radar .nowcast-value small{display:block;color:var(--muted);font-weight:800;margin-bottom:4px}
    body.page-radar .nowcast-value strong{font-size:1.2rem;color:var(--text)}
    body.page-radar .nowcast-timeline{display:grid;grid-template-columns:repeat(25,1fr);gap:3px;align-items:end;height:54px;margin-top:16px}
    body.page-radar .nowcast-bar{
      min-height:5px;border-radius:5px 5px 2px 2px;background:rgba(100,116,139,.18);
    }
    body.page-radar .nowcast-bar.wet{background:linear-gradient(180deg,var(--brand-2),var(--brand))}
    body.page-radar .nowcast-axis{display:flex;justify-content:space-between;margin-top:6px;color:var(--muted);font-size:.78rem;font-weight:700}
    body.page-radar .nowcast-foot{margin-top:10px;color:var(--muted);font-size:.84rem}
    @media (max-width:680px){
      body.page-radar .nowcast-values{grid-template-columns:repeat(2,minmax(0,1fr))}
    }


/* =========================================================
   RADAR – Design-Angleichung
========================================================= */


html:has(body.page-radar){
  --radar-size:600px;
  --radar-scale:1;
}

body.page-radar{
  --radar-size:inherit;
  --radar-scale:inherit;

  --bg:#eef4fb;
  --text:#17212f;
  --muted:#5e6b7a;
  --card:rgba(255,255,255,.82);
  --border:rgba(56,103,214,.22);
  --brand:#3867d6;
  --brand-2:#18a999;
  --ew-radar-accent:#ff9800;
  --shadow:0 14px 34px rgba(15,23,42,.09);
  --radius:22px;
  --radar-inner-radius:14px;
}

html.dark body.page-radar{
  --bg:#081018;
  --text:#e8eef7;
  --muted:#a9b4c4;
  --card:rgba(17,26,38,.88);
  --border:rgba(140,200,255,.22);
  --brand:#8cc8ff;
  --brand-2:#20c997;
  --ew-radar-accent:#ffd27d;
  --shadow:0 14px 34px rgba(0,0,0,.22);
}


body.page-radar .hero{
  border-radius:22px;
  background:var(--card);
  border-color:var(--border);
  box-shadow:var(--shadow);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

html.dark body.page-radar .hero{
  background:var(--card);
}

body.page-radar .hero h1{
  color:var(--ew-radar-accent);
  font-weight:800;
}


body.page-radar .card{
  border-radius:22px;
  background:var(--card);
  border-color:var(--border);
  box-shadow:var(--shadow);
}


body.page-radar .radar-title h2,
body.page-radar main > .card > h2,
body.page-radar .side > .card > h2,
body.page-radar .radar-panel-title h2{
  color:var(--ew-radar-accent);
  font-weight:800;
}


body.page-radar .nowcast-card h2{
  color:var(--ew-radar-accent);
}


body.page-radar .toolbar,
body.page-radar .info-box,
body.page-radar .privacy-card,
body.page-radar .privacy-active,
body.page-radar .radar-placeholder,
body.page-radar .nowcast-value,
body.page-radar .mini-radar img{
  border-radius:var(--radar-inner-radius);
}

body.page-radar .toolbar{
  background:
    linear-gradient(135deg,
      rgba(56,103,214,.07),
      rgba(24,169,153,.055));
}

html.dark body.page-radar .toolbar{
  background:
    linear-gradient(135deg,
      rgba(140,200,255,.06),
      rgba(32,201,151,.045));
}

body.page-radar .info-box{
  background:rgba(56,103,214,.045);
}

html.dark body.page-radar .info-box{
  background:rgba(140,200,255,.045);
}

body.page-radar .nowcast-value{
  background:rgba(56,103,214,.045);
}

html.dark body.page-radar .nowcast-value{
  background:rgba(140,200,255,.045);
}


body.page-radar .radar-panel-title,
body.page-radar .radar-toolbar-note{
  background:rgba(255,255,255,.34);
}

html.dark body.page-radar .radar-panel-title,
html.dark body.page-radar .radar-toolbar-note{
  background:rgba(255,255,255,.035);
}

body.page-radar .radar-iframe{
  border-radius:var(--radar-inner-radius);
}


body.page-radar .live-pill,
body.page-radar .nowcast-test,
body.page-radar .radar-loading,
body.page-radar .badge{
  border-radius:999px;
}


body.page-radar .button,
body.page-radar button.button{
  border-radius:14px;
}

@media (max-width:680px){
  body.page-radar .page{
    width:calc(100% - 12px);
    padding-top:8px;
  }

  body.page-radar .hero{
    padding:18px 16px;
  }

  body.page-radar .card{
    padding:14px;
  }

  body.page-radar .radar-card{
    padding:0;
  }
}

/* =========================================================
   GEMEINSAMER HINTERGRUND-FADE
   Weicher Übergang des oberen Wolken-/Ortsmotivs in den
   eigentlichen Seitenhintergrund. Messwerte bleibt unverändert.
========================================================= */


/* =========================================================
   PAGE: SLIDESHOW / ZEITRAFFER 1H
   Grundlage: hochgeladene slideshow.php
========================================================= */

    body.page-slideshow{
      --bg:#f5f7fb;
      --text:#0b1220;
      --muted:#5a667a;


      --accent:#f59e0b;
      --shadow:0 16px 40px rgba(15,23,42,.10);
      --radius:24px;
    }
    html.dark body.page-slideshow{


      --card:rgba(17,26,38,.86);

      --border:rgba(69,170,242,.30);
      --brand:#45aaf2;

      --shadow:0 16px 40px rgba(0,0,0,.28);
    }
    body.page-slideshow, body.page-slideshow *{ box-sizing:border-box; }
    body.page-slideshow{
      margin:0;
      font-family:Quicksand, Arial, sans-serif;
      color:var(--text);

    }

    body.page-slideshow a{ color:var(--brand); text-decoration:none; font-weight:700; }
    body.page-slideshow a:hover{ color:var(--accent); }
    body.page-slideshow .resp-page{
      width:min(1320px, calc(100% - 24px));
      margin:0 auto;
      padding:18px 0 46px;
    }
    body.page-slideshow .page-hero{
      padding:22px 24px;
      margin-bottom:18px;

      border:1px solid var(--border);
      border-radius:var(--radius);


    }
    body.page-slideshow .eyebrow{
      margin:0 0 8px;

      font-weight:900;
      text-transform:uppercase;
      letter-spacing:.09em;
      font-size:.78rem;
    }
    body.page-slideshow .page-hero h1{
      margin:0;
      font-size:clamp(1.75rem, 4vw, 3rem);
      line-height:1.05;
      color:var(--text);
    }
    body.page-slideshow .page-hero p{
      margin:10px 0 0;
      color:var(--muted);
      line-height:1.6;
      max-width:780px;
    }
    body.page-slideshow .page-hero .btn{
      border-radius:14px;
      color:var(--brand);
      font-weight:900;
      box-shadow:0 8px 18px rgba(15,23,42,.08);
    }
    body.page-slideshow .page-hero .btn:hover{
      border-color:var(--accent);
      color:var(--accent);
    }
    body.page-slideshow .camera-layout{
      display:grid;
      gap:18px;
    }
    body.page-slideshow .camera-card, body.page-slideshow .info-card{

      border:1px solid var(--border);
      border-radius:var(--radius);

      backdrop-filter:blur(10px);
      overflow:hidden;
    }
    body.page-slideshow .camera-toolbar{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      align-items:center;
      justify-content:space-between;
      padding:14px;
      border-bottom:1px solid var(--border);
    }
    body.page-slideshow .actions{ display:flex; gap:10px; flex-wrap:wrap; }
    body.page-slideshow .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      min-height:44px;
      padding:10px 14px;

      border:1px solid var(--border);
      background:var(--card-solid);
      color:var(--text);
      font-weight:800;
      box-shadow:0 4px 14px rgba(15,23,42,.06);
    }
    body.page-slideshow .status{
      color:var(--muted);
      font-size:.95rem;
      font-weight:700;
    }
    body.page-slideshow .camera-stage{
      position:relative;
      padding:12px;
    }
    body.page-slideshow .slideshow-stage{
      aspect-ratio:1024 / 624;
      width:100%;
      background:#111;

      padding:0;
    }
    body.page-slideshow .kamera, body.page-slideshow .ladekamera, body.page-slideshow .loadOverlay{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
    }
    body.page-slideshow .kamera{ z-index:2; transition:opacity .25s ease; }
    body.page-slideshow .kamera img, body.page-slideshow .ladekamera img{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
    }
    body.page-slideshow .mySlides{ display:none; }
    body.page-slideshow .loadOverlay{
      z-index:3;
      display:none;
      align-items:center;
      justify-content:center;
      padding:18px;
      background:rgba(255,255,255,.46);
      backdrop-filter:blur(2px);
    }
    html.dark body.page-slideshow .loadOverlay{ background:rgba(0,0,0,.46); }
    body.page-slideshow .loadOverlayInner{
      width:min(640px,92%);
      padding:18px 22px;
      border-radius:20px;
      background:var(--card-solid);
      border:1px solid var(--border);
    }
    body.page-slideshow .loadText{
      font-size:1rem;
      color:var(--brand);
      text-align:center;
      margin-bottom:10px;
      font-weight:800;
    }
    body.page-slideshow .progressTrack{
      height:14px;
      border-radius:999px;
      background:rgba(75,123,236,.18);
      overflow:hidden;
    }
    body.page-slideshow .progressBar{
      width:0%;
      height:100%;
      background:var(--accent);
      border-radius:999px;
      transition:width 150ms ease;
    }
    body.page-slideshow .side-grid{ display:grid; gap:18px; }
    body.page-slideshow .info-card{ padding:18px; }
    body.page-slideshow .info-card h2{
      margin:0 0 12px;
      color:var(--brand);
      font-size:1.25rem;
    }
    body.page-slideshow .visibility-grid{
      display:grid;
      grid-template-columns:1fr;
      gap:10px;
    }
    body.page-slideshow .visibility-item{
      display:grid;
      grid-template-columns:46px 1fr;
      gap:12px;
      align-items:center;
      padding:12px;
      border:1px solid var(--border);
      border-radius:18px;
      background:rgba(255,255,255,.36);
    }
    html.dark body.page-slideshow .visibility-item{ background:rgba(255,255,255,.04); }
    body.page-slideshow .visibility-item img{
      max-width:34px;
      max-height:34px;
      justify-self:center;
    }
    body.page-slideshow .visibility-label{ font-weight:800; }
    body.page-slideshow .visibility-note, body.page-slideshow .explain{
      color:var(--muted);
      line-height:1.65;
      margin:12px 0 0;
    }
    @media (min-width:900px){
      body.page-slideshow .camera-layout{ grid-template-columns:minmax(0, 1fr) 340px; align-items:start; }
      body.page-slideshow .side-grid{ position:sticky; top:18px; }
    }
    @media (max-width:560px){
      body.page-slideshow .resp-page{ width:min(100% - 14px, 1320px); padding-top:8px; }
      body.page-slideshow .page-hero{ border-radius:24px; padding:18px; }
      body.page-slideshow .camera-toolbar{ align-items:flex-start; }
      body.page-slideshow .btn,
body.page-slideshow .actions{ width:100%; }

    }

/* =========================================================
   SLIDESHOW / ZEITRAFFER – Design-Angleichung
========================================================= */

body.page-slideshow{
  --bg:#eef4fb;
  --text:#17212f;
  --muted:#5e6b7a;
  --card:rgba(255,255,255,.82);
  --card-solid:#ffffff;
  --border:rgba(56,103,214,.22);
  --brand:#3867d6;
  --accent:#ff9800;
  --shadow:0 14px 34px rgba(15,23,42,.09);
  --radius:22px;
  --slideshow-inner-radius:14px;
}

html.dark body.page-slideshow{
  --bg:#081018;
  --text:#e8eef7;
  --muted:#a9b4c4;
  --card:rgba(17,26,38,.88);
  --card-solid:#111a26;
  --border:rgba(140,200,255,.22);
  --brand:#8cc8ff;
  --accent:#ffd27d;
  --shadow:0 14px 34px rgba(0,0,0,.22);
}


body.page-slideshow .page-hero{
  border-radius:22px;
  background:var(--card);
  border-color:var(--border);
  box-shadow:var(--shadow);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

body.page-slideshow .page-hero h1{
  color:var(--accent);
  font-weight:800;
}

body.page-slideshow .eyebrow{
  color:var(--brand);
}


body.page-slideshow .camera-card,
body.page-slideshow .info-card{
  border-radius:22px;
  background:var(--card);
  border-color:var(--border);
  box-shadow:var(--shadow);
}

body.page-slideshow .info-card h2{
  color:var(--accent);
  font-weight:800;
}


body.page-slideshow .slideshow-stage{
  border-radius:var(--slideshow-inner-radius);
  margin:12px;
  width:calc(100% - 24px);
  overflow:hidden;
}


body.page-slideshow .loadOverlayInner{
  border-radius:var(--slideshow-inner-radius);
}


body.page-slideshow .visibility-item{
  border-radius:var(--slideshow-inner-radius);
  background:rgba(255,255,255,.48);
}

html.dark body.page-slideshow .visibility-item{
  background:rgba(255,255,255,.055);
}


body.page-slideshow .btn{
  border-radius:999px;
}


body.page-slideshow .camera-toolbar{
  background:rgba(255,255,255,.18);
}

html.dark body.page-slideshow .camera-toolbar{
  background:rgba(255,255,255,.025);
}

@media (max-width:560px){
  body.page-slideshow .resp-page{
    width:calc(100% - 12px);
    padding-top:8px;
  }

  body.page-slideshow .page-hero{
    border-radius:22px;
    padding:18px 16px;
  }

  body.page-slideshow .slideshow-stage{
    margin:8px;
    width:calc(100% - 16px);
    border-radius:14px;
  }

  body.page-slideshow .info-card{
    padding:14px;
  }
}

/* =========================================================
   PAGE: SLIDESHOW 24H
   Grundlage: slideshow_tag(1).php
========================================================= */

    body.page-slideshow-tag{
      --bg:#f5f7fb;
      --text:#0b1220;
      --muted:#5a667a;


      --accent:#f59e0b;
      --shadow:0 16px 40px rgba(15,23,42,.10);
      --radius:24px;
    }

    html.dark body.page-slideshow-tag{


      --card:rgba(17,26,38,.86);

      --border:rgba(69,170,242,.30);
      --brand:#45aaf2;

      --shadow:0 16px 40px rgba(0,0,0,.28);
    }

    body.page-slideshow-tag, body.page-slideshow-tag *{ box-sizing:border-box; }

    body.page-slideshow-tag{
      margin:0;
      font-family:Inter, Quicksand, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color:var(--text);

      min-height:100vh;
    }


    body.page-slideshow-tag .resp-page{
      width:min(100% - 28px, 1320px);
      margin:0 auto;
      padding:18px 0 38px;
    }

    body.page-slideshow-tag .page-hero, body.page-slideshow-tag .slideshow-card, body.page-slideshow-tag .info-card{

      border:1px solid var(--border);
      border-radius:var(--radius);


    }

    body.page-slideshow-tag .page-hero{
      padding:22px 24px;
      margin-bottom:18px;
    }

    body.page-slideshow-tag .eyebrow{
      margin:0 0 8px;

      font-weight:900;
      text-transform:uppercase;
      letter-spacing:.09em;
      font-size:.78rem;
    }

    body.page-slideshow-tag .page-hero h1{
      margin:0;
      font-size:clamp(1.75rem, 4vw, 3rem);
      line-height:1.05;
      color:var(--text);
    }

    body.page-slideshow-tag .page-hero p:last-child{
      margin:10px 0 0;
      color:var(--muted);
      line-height:1.6;
      max-width:780px;
    }

    body.page-slideshow-tag .slideshow-layout{
      display:grid;
      grid-template-columns:1fr;
      gap:18px;
    }

    body.page-slideshow-tag .slideshow-card{
      overflow:hidden;
    }

    body.page-slideshow-tag .slideshow-toolbar{
      display:flex;
      gap:14px;
      align-items:center;
      justify-content:space-between;
      padding:16px;
      border-bottom:1px solid var(--border);
      flex-wrap:wrap;
    }

    body.page-slideshow-tag .status{
      color:var(--muted);
      font-weight:600;
      font-size:.95rem;
    }

    body.page-slideshow-tag .actions{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
    }

    body.page-slideshow-tag .btn, body.page-slideshow-tag .ctlBtn{
      border:1px solid var(--border);
      background:var(--card-solid);
      color:var(--brand);
      border-radius:14px;
      padding:10px 14px;
      text-decoration:none;
      font-weight:900;
      cursor:pointer;
      box-shadow:0 8px 18px rgba(15,23,42,.08);
    }

    body.page-slideshow-tag .btn:hover, body.page-slideshow-tag .ctlBtn:hover{
      border-color:var(--accent);
      color:var(--accent);
    }

    body.page-slideshow-tag .slideshow-stage{
      position:relative;
      padding:12px;
      background:rgba(0,0,0,.04);
    }

    body.page-slideshow-tag .slides-frame{
      position:relative;
      overflow:hidden;
      border-radius:20px;
      background:#111;
      border:1px solid var(--border);
      aspect-ratio:1024 / 624;
      display:grid;
      place-items:center;
    }


    body.page-slideshow-tag .loadOverlay{
      position:absolute;
      inset:12px;
      border-radius:20px;
      display:none;
      align-items:center;
      justify-content:center;
      background:rgba(248,248,248,.78);
      z-index:5;
      backdrop-filter:blur(4px);
    }

    html.dark body.page-slideshow-tag .loadOverlay{
      background:rgba(8,16,24,.78);
    }

    body.page-slideshow-tag .loadOverlayInner{
      width:min(90%, 640px);
      padding:18px;
      background:var(--card-solid);
      border:1px solid var(--border);
      border-radius:18px;
      box-shadow:var(--shadow);
      color:var(--text);
    }

    body.page-slideshow-tag .progressTrack{
      width:100%;
      height:14px;
      border-radius:999px;
      background:rgba(75,123,236,.2);
      overflow:hidden;
      margin-top:10px;
    }

    body.page-slideshow-tag .progressBar{
      height:100%;
      width:0%;
      background:var(--brand);
      transition:width .15s ease;
    }

    body.page-slideshow-tag .playerControls{
      display:flex;
      gap:10px;
      align-items:center;
      padding:14px 16px 16px;
      border-top:1px solid var(--border);
      background:rgba(255,255,255,.38);
      flex-wrap:wrap;
    }

    html.dark body.page-slideshow-tag .playerControls{
      background:rgba(255,255,255,.04);
    }

    body.page-slideshow-tag .ctlBtn{
      width:46px;
      height:40px;
      padding:0;
      display:grid;
      place-items:center;
      font-size:1rem;
    }

    body.page-slideshow-tag .timeline{
      flex:1 1 260px;
      height:14px;
      accent-color:var(--brand);
      cursor:pointer;
    }

    body.page-slideshow-tag .ctlTime{
      min-width:90px;
      text-align:right;
      color:var(--muted);
      font-weight:800;
    }

    body.page-slideshow-tag .side-grid{
      display:grid;
      gap:18px;
    }

    body.page-slideshow-tag .info-card{
      padding:18px;
    }

    body.page-slideshow-tag .info-card h2{
      margin:0 0 10px;
      color:var(--brand);
      font-size:1.2rem;
    }

    body.page-slideshow-tag .explain{
      color:var(--muted);
      line-height:1.65;
      margin:0;
    }

    body.page-slideshow-tag .marker-list{
      display:grid;
      gap:10px;
    }

    body.page-slideshow-tag .marker-item{
      display:grid;
      grid-template-columns:42px 1fr;
      gap:12px;
      align-items:center;
      padding:12px;
      border-radius:18px;
      border:1px solid var(--border);
      background:rgba(255,255,255,.36);
    }

    html.dark body.page-slideshow-tag .marker-item{
      background:rgba(255,255,255,.04);
    }

    body.page-slideshow-tag .marker-item img{
      max-width:34px;
      max-height:34px;
      justify-self:center;
    }

    body.page-slideshow-tag .marker-item strong{
      display:block;
    }

    body.page-slideshow-tag .marker-item span{
      color:var(--muted);
      font-weight:700;
    }

    @media (min-width:900px){
      body.page-slideshow-tag .slideshow-layout{
        grid-template-columns:minmax(0, 1fr) 340px;
        align-items:start;
      }

      body.page-slideshow-tag .side-grid{
        position:sticky;
        top:18px;
      }
    }

    @media (max-width:560px){
      body.page-slideshow-tag .resp-page{
        width:min(100% - 14px, 1320px);
        padding-top:8px;
      }

      body.page-slideshow-tag .page-hero, body.page-slideshow-tag .info-card{
        border-radius:20px;
        padding:18px;
      }

      body.page-slideshow-tag .slideshow-stage{
        padding:8px;
      }

      body.page-slideshow-tag .loadOverlay{
        inset:8px;
      }

      body.page-slideshow-tag .slides-frame{
        border-radius:16px;
      }

      body.page-slideshow-tag .btn, body.page-slideshow-tag .actions{
        width:100%;
      }

      body.page-slideshow-tag .btn{
        text-align:center;
      }

      body.page-slideshow-tag .playerControls{
        align-items:center;
      }

      body.page-slideshow-tag .ctlTime{
        width:100%;
        text-align:center;
      }
    }

    body.page-slideshow-tag .loading-badge{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.55;
  pointer-events:none;
  z-index:0;
}

body.page-slideshow-tag .mySlides{
  display:none;
  width:100%;
  height:100%;
  object-fit:cover;
  position:relative;
  z-index:1;
}


/* =========================================================
   SLIDESHOW 24H – Design-Angleichung
========================================================= */

body.page-slideshow-tag{
  --bg:#eef4fb;
  --text:#17212f;
  --muted:#5e6b7a;
  --card:rgba(255,255,255,.82);
  --card-solid:#ffffff;
  --border:rgba(56,103,214,.22);
  --brand:#3867d6;
  --accent:#ff9800;
  --shadow:0 14px 34px rgba(15,23,42,.09);
  --radius:22px;
  --slideshow-tag-inner-radius:14px;
}

html.dark body.page-slideshow-tag{
  --bg:#081018;
  --text:#e8eef7;
  --muted:#a9b4c4;
  --card:rgba(17,26,38,.88);
  --card-solid:#111a26;
  --border:rgba(140,200,255,.22);
  --brand:#8cc8ff;
  --accent:#ffd27d;
  --shadow:0 14px 34px rgba(0,0,0,.22);
}


body.page-slideshow-tag .page-hero,
body.page-slideshow-tag .slideshow-card,
body.page-slideshow-tag .info-card{
  border-radius:22px;
  background:var(--card);
  border-color:var(--border);
  box-shadow:var(--shadow);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

body.page-slideshow-tag .page-hero h1{
  color:var(--accent);
  font-weight:800;
}

body.page-slideshow-tag .eyebrow{
  color:var(--brand);
}

body.page-slideshow-tag .info-card h2{
  color:var(--accent);
  font-weight:800;
}


body.page-slideshow-tag .slides-frame,
body.page-slideshow-tag .loadOverlay{
  border-radius:var(--slideshow-tag-inner-radius);
}


body.page-slideshow-tag .loadOverlayInner{
  border-radius:var(--slideshow-tag-inner-radius);
}


body.page-slideshow-tag .marker-item{
  border-radius:var(--slideshow-tag-inner-radius);
  background:rgba(255,255,255,.48);
}

html.dark body.page-slideshow-tag .marker-item{
  background:rgba(255,255,255,.055);
}


body.page-slideshow-tag .btn{
  border-radius:999px;
}


body.page-slideshow-tag .ctlBtn{
  border-radius:14px;
}


body.page-slideshow-tag .slideshow-toolbar{
  background:rgba(255,255,255,.15);
}

html.dark body.page-slideshow-tag .slideshow-toolbar{
  background:rgba(255,255,255,.02);
}

body.page-slideshow-tag .playerControls{
  background:rgba(255,255,255,.18);
}

html.dark body.page-slideshow-tag .playerControls{
  background:rgba(255,255,255,.025);
}


body.page-slideshow-tag .progressTrack,
body.page-slideshow-tag .progressBar{
  border-radius:999px;
}

@media (max-width:560px){
  body.page-slideshow-tag .resp-page{
    width:calc(100% - 12px);
    padding-top:8px;
  }

  body.page-slideshow-tag .page-hero,
  body.page-slideshow-tag .info-card{
    border-radius:22px;
  }

  body.page-slideshow-tag .page-hero{
    padding:18px 16px;
  }

  body.page-slideshow-tag .slides-frame,
  body.page-slideshow-tag .loadOverlay{
    border-radius:14px;
  }

  body.page-slideshow-tag .info-card{
    padding:14px;
  }
}

/* =========================================================
   SLIDESHOW 24H – Überschriften-Akzent korrigiert
========================================================= */
body.page-slideshow-tag,
html.dark body.page-slideshow-tag{
  --slideshow-heading-accent:#ff9800;
}


body.page-slideshow-tag .page-hero h1,
body.page-slideshow-tag .info-card h2{
  color:var(--slideshow-heading-accent) !important;
}


body.page-slideshow-tag #slideshow-title{
  color:var(--slideshow-heading-accent) !important;
  font-weight:800;
}

/* =========================================================
   PAGE: STATION
   Grundlage: station(9).php
   Beide bisherigen Inline-CSS-Blöcke bleiben in ihrer
   ursprünglichen Reihenfolge erhalten, aber gekapselt.
========================================================= */


    body.page-station{
      --bg:#ffffff;
      --text:#0b1220;
      --muted:#5a667a;
      --card:#ffffff;


        --bgTextBox:rgba(255,255,255,0.72);


      --pill:#f3f5f8;
      --pillBorder:#e3e7ee;
      --shadow: 0 1px 0 rgba(0,0,0,.02);
    }
    html.dark body.page-station{
      --bg:#0b0f14;


      --card:#111a26;
        --brand:#45aaf2;
        --bgTextBox:rgba(17,26,38,0.82);
        --blauText:#45aaf2;

      --border:#45aaf2;
      --pill:#0f1724;
      --pillBorder:#1e2a3f;
      --shadow: none;
    }

    body.page-station{
      margin: 0;
      padding: 0;


      font-family: Quicksand, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    }


    body.page-station .wrap{
      width: min(960px, 100% - 20px);
      max-width: 960px;
      margin: 0;
      padding: 10px 10px 18px 10px;
      box-sizing: border-box;
    }

    body.page-station h1{
      margin: 10px 0 8px 0;
      font-size: 18px;
      line-height: 1.25;
    }

    body.page-station .meta{
      color: var(--muted);
      margin-bottom: 10px;
      font-size: 13px;
      display:flex;
      gap:8px;
      flex-wrap:wrap;
      align-items:center;
    }

    body.page-station .pill{
      border:1px solid var(--pillBorder);
      background: var(--pill);
      padding:6px 10px;

      display:flex;
      gap:8px;
      align-items:center;
    }

    body.page-station input[type="date"]{
      border:0;
      outline:none;
      font:inherit;
      background:transparent;
      color: var(--text);
    }
    html.dark body.page-station input[type="date"]{ color: var(--text); }

    body.page-station .grid{
      display:grid;
      width: 100%;
      grid-template-columns: 1fr;

      gap: 10px;
      align-items: stretch;
    }

    body.page-station .card{
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 10px 10px;
      cursor: pointer;
      background: var(--card);
      box-shadow: var(--shadow);
      user-select:none;
      overflow:hidden;
    }

    body.page-station .card .title{ font-size: 13px; font-weight: 650; margin:0 0 6px 0; }
    body.page-station .card .kpis{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom: 6px; }
    body.page-station .kpi{ border: 1px solid var(--pillBorder); background: var(--pill); border-radius: 12px; padding: 6px 8px; }
    body.page-station .kpi .l{ font-size: 10px; color: var(--muted); }
    body.page-station .kpi .v{ font-size: 14px; font-weight: 650; margin-top:2px; color: var(--text); }


    body.page-station .card.small canvas{ height: 180px !important; width: 100% !important; }
    body.page-station .card.large canvas{ height: 280px !important; width: 100% !important; }


    @media (min-width: 680px){
      body.page-station .grid{ grid-template-columns: repeat(12, 1fr); gap: 12px; }
      body.page-station .card.large{ grid-column: span 12; }
      body.page-station .card.small{ grid-column: span 6; }
      body.page-station .card.large canvas{ height: 360px !important; }
    }


    @media (min-width: 980px){
      body.page-station .card.small{ grid-column: span 4; }
      body.page-station .card.large canvas{ height: 420px !important; }
    }

    body.page-station .hint{ color: var(--muted); font-size: 12px; margin-top: 10px; }


body.page-station .mybox{
    width: 220px;
    overflow: hidden;
    border-radius: 25px;

    }
body.page-station .mybox2{
    width: 300px;
    overflow: hidden;
    border-radius: 25px;

    }

body.page-station .myboxgr{
    width: 220px;
    overflow: hidden;
    border-radius: 25px;
    }

body.page-station{
  background: var(--bg);
  color: var(--text);
  background-image: url("/fotos/wolken3.webp");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% 250px;
}


body.page-station .station-container{
  max-width: 1100px;
  margin: 0 auto;
  padding: 10px clamp(12px, 3vw, 28px);
  font-family: quicksand-medium, Arial, sans-serif;
}

body.page-station .station-title{
  text-align: center;
  font-size: 3rem;
  color: var(--brand);
  margin-bottom: 60px;
}


body.page-station .station-text{
  flex: 1;
  font-size: 1.4rem;
  color: var(--text);
  float: none !important;
  position: relative !important;
  margin-bottom: 40px;
  padding-left: 30px;
}

body.page-station .station-text h2{
  font-size: 2.5rem;
  color: var(--blauText);
  margin-bottom: 20px;
}

body.page-station .station-text .subtext{
  margin-top: 20px;
  font-size: 1.2rem;
  color: var(--blauText);
}

body.page-station .station-media{
  flex: 1;
  display: flex;
  justify-content: center;
  float: none !important;
  position: relative !important;
}


@media (max-width: 900px){
  body.page-station .station-row, body.page-station .station-row.reverse{
    flex-direction: column !important;
    text-align: center;
    gap: 18px;
    margin-bottom: 28px;
    padding: 14px 0;
  }

  body.page-station .station-media{
    margin-top: 30px;
  }
}
/* ===== Messwerte (Div/Grid statt Table) ===== */

body.page-station .units{
  max-width: 960px;
  margin: 30px auto 0;
  margin-top: 40px;
  margin-bottom: 50px;
  padding-top: 40px;
  padding-bottom: 50px;
  overflow: hidden;
  border-radius: 22px;
  font-family: quicksand-medium, Arial, sans-serif;
  border:1px solid var(--border);
  background: var(--brand);
}


body.page-station .units-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  background: var(--brand);

  padding-top: 0px;
  padding-bottom: 0px;
}


body.page-station .units-k{
  padding: 18px 22px;
  text-align: right;
  font-family: quicksand-medium, Arial, sans-serif;
  font-size: 1.6rem;
  color: #dddddd;
  font-weight: 700;
}


body.page-station .units-v{
  padding: 18px 22px;
  text-align: left;
  font-family: quicksand-medium, Arial, sans-serif;
  font-size: 1.35rem;
  color: var(--swText);
}


body.page-station .units-head .units-k{
  font-size: 2.2rem;
}

body.page-station .units-head .units-v{
  font-size: 1.15rem;
  color: var(--swText);
}


body.page-station .units-note{
  margin-top: 6px;
  font-size: 0.95rem;
  color: var(--swText);
  opacity: 0.9;
}

body.page-station .glossary-info{
  display:inline-grid;
  place-items:center;
  width:1.25rem;
  height:1.25rem;
  margin-left:.35rem;
  border:1px solid rgba(255,255,255,.6);
  border-radius:50%;
  color:#fff;
  font-size:.75rem;
  font-weight:900;
  line-height:1;
  text-decoration:none;
  vertical-align:.08em;
}

body.page-station .glossary-info:hover, body.page-station .glossary-info:focus-visible{
  background:#fff;
  color:var(--brand);
  outline:none;
}

body.page-station .station-glossary-link{
  color:var(--blauText);
  font-weight:700;
  text-decoration:none;
  border-bottom:1px dotted currentColor;
}

body.page-station .station-glossary-link:hover, body.page-station .station-glossary-link:focus-visible{
  border-bottom-style:solid;
  outline:none;
}


body.page-station .station-row{
  padding: clamp(18px, 3vw, 30px);
  border-radius: 28px;
  border: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--bgTextBox) 92%, white 8%),
      color-mix(in srgb, var(--bgTextBox) 86%, var(--brand) 14%)
    );
  box-shadow:
    0 18px 45px rgba(15,23,42,.12),
    inset 0 1px 0 rgba(255,255,255,.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

body.page-station .station-row:hover{
  transform: translateY(-4px);
  box-shadow:
    0 24px 60px rgba(15,23,42,.18),
    inset 0 1px 0 rgba(255,255,255,.45);
  border-color: var(--brand);
}

html.dark body.page-station .station-row{
  background:
    linear-gradient(
      135deg,
      rgba(17,26,38,.92),
      rgba(26,41,61,.86)
    );
  box-shadow:
    0 18px 45px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.06);
}

body.page-station .station-text h2{
  position: relative;
  display: inline-block;
  margin-top: 0;
  padding-bottom: 8px;
  text-align: left;
  hyphens: none;
  -webkit-hyphens: none;
}

body.page-station .station-text h2::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 58%;
  height: 3px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--brand), transparent);
}

body.page-station .station-media .mybox, body.page-station .station-media .mybox2, body.page-station .station-media .myboxgr{
  background: color-mix(in srgb, var(--card) 78%, var(--brand) 22%);
  padding: 10px;
  border-radius: 30px;
  box-shadow: 0 14px 34px rgba(15,23,42,.16);
}

body.page-station .station-media img{
  border-radius: 22px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
}

body.page-station .units{
  border-radius: 28px;
  border: 1px solid color-mix(in srgb, var(--brand) 70%, white 30%);
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.22), transparent 35%),
    linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand) 70%, #111 30%));
  box-shadow: 0 20px 50px rgba(15,23,42,.18);
}

body.page-station .units-row{
  background: transparent;
  border-bottom: 1px solid rgba(255,255,255,.16);
}

body.page-station .units-row:last-child{
  border-bottom: 0;
}

body.page-station .units-k, body.page-station .units-v{
  text-shadow: 0 1px 1px rgba(0,0,0,.16);
}

body.page-station .units-note{
  opacity: .82;
}

@media (max-width: 900px){
  body.page-station .station-row:hover{
    transform: none;
  }

  body.page-station .station-text h2::after{
    left: 50%;
    transform: translateX(-50%);
  }
}

@media (max-width: 700px){
  body.page-station .station-row{
    border-radius: 22px;
    padding: 16px;
  }

  body.page-station .station-media .mybox, body.page-station .station-media .mybox2, body.page-station .station-media .myboxgr{
    padding: 8px;
    border-radius: 24px;
  }

  body.page-station .units{
    border-radius: 22px;
  }
}


@media (max-width: 900px){
  body.page-station .units-row{
    grid-template-columns: 1fr;
  }
  body.page-station .units-k{
    text-align: left;
    padding-bottom: 6px;
  }
  body.page-station .units-v{
    padding-top: 6px;
  }
}

body.page-station .page{
  color: var(--text);
}

body.page-station .content{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 clamp(10px, 2vw, 18px) 60px;
}


body.page-station .menu{
  max-width: 960px;
  margin: 0 auto;
}


body.page-station .mybox img, body.page-station .myboxgr img{
  display: block;
  max-width: 100%;
  height: auto;
}

body.page-station .mybox--multi{
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  padding: 0px;
  overflow: hidden;
}

body.page-station .mybox--multi img{
  width: 100%;
  height: auto;
  overflow: hidden;
  border-radius: 25px;
}


body.page-station .site-footer{
  max-width: 960px;
  margin: 25px auto 0;
  text-align: center;
}

body.page-station .station-text, body.page-station .station-text p, body.page-station .station-text .subtext{
  padding: 25px;
  text-align: justify;
  text-justify: inter-word;
}
body.page-station .station-text{
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
}
body.page-station .normal-blau{
    color: #4b7bec;
    font-weight: normal;
    font-size: medium;
}
body.page-station .normal{
    color: var(--text);
    font-weight: normal;
    font-size: medium;
}


body.page-station .page-title{
  text-align:center;
  font-size:clamp(2rem, 5vw, 3.2rem);
  color:var(--border);
  margin:28px 0 36px;
}
body.page-station .station-row{
  padding:18px;
  box-shadow:0 8px 24px rgba(15,23,42,.06);
}
html.dark body.page-station .station-row{ box-shadow:none; }
body.page-station .station-text h2{
  font-size:clamp(1.6rem, 3.5vw, 2.5rem);
}
body.page-station .station-text{
  font-size:clamp(1.05rem, 2vw, 1.35rem);
  line-height:1.65;
}
body.page-station .station-text p{ margin-top:0; }
body.page-station .mybox, body.page-station .myboxgr{ width:min(260px, 100%); }
body.page-station .mybox2{ width:min(340px, 100%); }
body.page-station .station-media img{ max-width:100%; height:auto; }
@media (min-width: 901px){
  body.page-station .station-row:nth-of-type(even){ transform: translateX(0); }
}
@media (max-width: 700px){
  body.page-station .text-3d{ font-size:clamp(2.4rem, 11vw, 4.2rem); }
  body.page-station .station-text, body.page-station .station-text p, body.page-station .station-text .subtext{
    padding:12px;
    text-align:left;
  }
  body.page-station .units{ margin-top:24px; padding-top:22px; padding-bottom:22px; }
  body.page-station .units-k{ font-size:1.2rem; padding:14px 16px 4px; }
  body.page-station .units-v{ font-size:1.05rem; padding:4px 16px 14px; }
  body.page-station .units-head .units-k{ font-size:1.5rem; }
}


body.page-station .text-3d{
  position:relative;
  z-index:20;
  margin-top:0;
}

body.page-station .subtitle-wrap{
  position:relative;
  z-index:20;
}

body.page-station .menu{
  position:relative;
  z-index:30;
}


body.page-station .station-container{
  display: flex;
  flex-direction: column;
  gap: 38px;
}


body.page-station .station-row, body.page-station .station-row.reverse{
  margin-bottom: 0 !important;
}


/* =========================================================
   STATION – Design-Angleichung
========================================================= */

body.page-station{
  --bg:#eef4fb;
  --text:#17212f;
  --muted:#5e6b7a;
  --card:rgba(255,255,255,.82);
  --border:#3867d6;
  --brand:#3867d6;
  --bgTextBox:rgba(255,255,255,.78);
  --blauText:#3867d6;
  --swText:#ffffff;
  --pill:rgba(255,255,255,.72);
  --pillBorder:rgba(56,103,214,.18);
  --shadow:0 14px 34px rgba(15,23,42,.09);
  --station-accent:#ff9800;
  --station-radius:22px;
  --station-inner-radius:14px;
}

html.dark body.page-station{
  --bg:#081018;
  --text:#e8eef7;
  --muted:#a9b4c4;
  --card:rgba(17,26,38,.88);
  --brand:#8cc8ff;
  --bgTextBox:rgba(17,26,38,.86);
  --blauText:#8cc8ff;
  --swText:#e8eef7;
  --border:#8cc8ff;
  --pill:rgba(255,255,255,.07);
  --pillBorder:rgba(140,200,255,.18);
  --shadow:0 14px 34px rgba(0,0,0,.22);
  --station-accent:#ff9800;
}


body.page-station{
  background:
    linear-gradient(
      to bottom,
      color-mix(in srgb, var(--bg) 6%, transparent) 0,
      color-mix(in srgb, var(--bg) 22%, transparent) 120px,
      color-mix(in srgb, var(--bg) 55%, transparent) 240px,
      color-mix(in srgb, var(--bg) 84%, transparent) 360px,
      var(--bg) 460px
    ),
    url("/fotos/wolken3.webp") top center / 100% 460px no-repeat,
    var(--bg);
}


body.page-station .page-title{
  color:var(--station-accent);
  font-weight:800;
  margin-top:24px;
  margin-bottom:28px;
}


body.page-station .station-row{
  border-radius:var(--station-radius);
  border-color:color-mix(in srgb, var(--border) 38%, transparent);
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--bgTextBox) 96%, white 4%),
      color-mix(in srgb, var(--bgTextBox) 92%, var(--brand) 8%)
    );
  box-shadow:var(--shadow);
}

html.dark body.page-station .station-row{
  background:
    linear-gradient(
      135deg,
      rgba(17,26,38,.92),
      rgba(26,41,61,.82)
    );
  box-shadow:var(--shadow);
}


body.page-station .station-text h2{
  color:var(--station-accent);
  font-weight:800;
}

body.page-station .station-text h2::after{
  background:linear-gradient(90deg, var(--station-accent), transparent);
}


body.page-station .station-media .mybox,
body.page-station .station-media .mybox2,
body.page-station .station-media .myboxgr{
  border-radius:var(--station-inner-radius);
  background:color-mix(in srgb, var(--card) 88%, var(--brand) 12%);
  box-shadow:0 12px 28px rgba(15,23,42,.12);
}

body.page-station .station-media img,
body.page-station .mybox--multi img{
  border-radius:var(--station-inner-radius);
}


body.page-station .units{
  border-radius:var(--station-radius);
  box-shadow:var(--shadow);
}

body.page-station .units-row{
  border-bottom-color:rgba(255,255,255,.15);
}


body.page-station .pill{
  border-radius:999px;
}


body.page-station .station-glossary-link{
  color:var(--brand);
}

@media (max-width:900px){
  body.page-station .station-container{
    gap:20px;
  }

  body.page-station .station-row{
    border-radius:22px;
  }
}

@media (max-width:700px){
  body.page-station .content{
    padding-left:8px;
    padding-right:8px;
  }

  body.page-station .station-row{
    padding:14px;
  }

  body.page-station .station-text,
  body.page-station .station-text p,
  body.page-station .station-text .subtext{
    padding:10px;
  }

  body.page-station .station-media .mybox,
  body.page-station .station-media .mybox2,
  body.page-station .station-media .myboxgr{
    border-radius:14px;
  }

  body.page-station .units{
    border-radius:22px;
  }
}

/* =========================================================
   PAGE: GLOSSAR
   Grundlage: glossar(7).php
========================================================= */

    body.page-glossar{
      --bg:#ffffff;
      --text:#0b1220;
      --muted:#5a667a;
      --card:#ffffff;


      --bgTextBox:rgba(255,255,255,0.72);
      --pill:#f3f5f8;
      --pillBorder:#e3e7ee;
      --shadow:0 18px 45px rgba(15,23,42,.12);
    }

    html.dark body.page-glossar{
      --bg:#0b0f14;


      --card:#111a26;
      --brand:#45aaf2;
      --bgTextBox:rgba(17,26,38,0.82);
      --border:#45aaf2;
      --pill:#0f1724;
      --pillBorder:#1e2a3f;
      --shadow:0 18px 45px rgba(0,0,0,.35);
    }

    html{ scroll-behavior:smooth; }

    body.page-glossar{
      margin:0;
      padding:0;
      background:var(--bg);
      color:var(--text);
      background-image:url("/fotos/wolken3.webp");
      background-repeat:no-repeat;
      background-position:top center;
      background-size:100% 250px;
      font-family:Quicksand, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    }

    body.page-glossar .page{ color:var(--text); }

    body.page-glossar .content{
      max-width:1100px;
      margin:0 auto;
      padding:0 clamp(10px, 2vw, 18px) 60px;
    }

    body.page-glossar .menu{
      position:relative;
      z-index:30;
      max-width:960px;
      margin:0 auto;
    }

    body.page-glossar .glossary-container{
      display:flex;
      flex-direction:column;
      gap:24px;
      max-width:1000px;
      margin:0 auto;
    }

    body.page-glossar .page-title{
      text-align:center;
      font-size:clamp(2rem, 5vw, 3.2rem);
      color:var(--border);
      margin:28px 0 12px;
    }

    body.page-glossar .page-subtitle{
      max-width:780px;
      margin:0 auto 28px;
      text-align:center;
      font-size:clamp(1rem, 2vw, 1.2rem);
      line-height:1.7;
      color:var(--text);
    }

    body.page-glossar .intro-card, body.page-glossar .letter-section{
      border-radius:28px;
      border:1px solid color-mix(in srgb, var(--border) 55%, transparent);
      background:
        linear-gradient(
          135deg,
          color-mix(in srgb, var(--bgTextBox) 92%, white 8%),
          color-mix(in srgb, var(--bgTextBox) 86%, var(--brand) 14%)
        );

      backdrop-filter:blur(8px);
      -webkit-backdrop-filter:blur(8px);
    }

    html.dark body.page-glossar .intro-card, html.dark body.page-glossar .letter-section{
      background:linear-gradient(135deg, rgba(17,26,38,.92), rgba(26,41,61,.86));
    }

    body.page-glossar .intro-card{
      padding:clamp(18px, 3vw, 30px);
      font-size:1.05rem;
      line-height:1.7;
    }

    body.page-glossar .intro-card p{ margin:0; }

    body.page-glossar .alpha-nav{
      display:flex;
      flex-wrap:wrap;
      justify-content:center;
      gap:8px;
      padding:14px;
      border:1px solid var(--pillBorder);

      background:color-mix(in srgb, var(--card) 88%, transparent);
      position:sticky;
      top:8px;
      z-index:20;
      backdrop-filter:blur(10px);
      -webkit-backdrop-filter:blur(10px);
    }

    body.page-glossar .alpha-nav a{
      min-width:34px;
      height:34px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      border-radius:999px;
      border:1px solid var(--pillBorder);
      background:var(--pill);
      color:var(--brand);
      text-decoration:none;
      font-weight:700;
      transition:transform .18s ease, border-color .18s ease;
    }

    body.page-glossar .alpha-nav a:hover, body.page-glossar .alpha-nav a:focus-visible{
      transform:translateY(-2px);
      border-color:var(--brand);
      outline:none;
    }

    body.page-glossar .letter-section{
      padding:clamp(18px, 3vw, 30px);
      scroll-margin-top:80px;
    }

    body.page-glossar .letter-title{
      display:flex;
      align-items:center;
      gap:14px;
      margin:0 0 18px;
      color:var(--brand);
      font-size:clamp(1.8rem, 4vw, 2.5rem);
    }

    body.page-glossar .letter-title::after{
      content:"";
      height:3px;
      flex:1;
      border-radius:99px;
      background:linear-gradient(90deg, var(--brand), transparent);
    }

    body.page-glossar .term-list{
      display:grid;
      grid-template-columns:1fr;
      gap:12px;
    }

    body.page-glossar .term-card{
      border:1px solid var(--pillBorder);
      background:color-mix(in srgb, var(--card) 88%, transparent);
      border-radius:18px;
      padding:18px 20px;
      scroll-margin-top:90px;
    }

    body.page-glossar .term-card h3{
      margin:0 0 8px;

      font-size:1.25rem;
      line-height:1.3;
    }

    body.page-glossar .term-card p{
      margin:0;
      line-height:1.7;
      font-size:1.02rem;
    }

    body.page-glossar .term-card p + p{ margin-top:10px; }

    body.page-glossar .related-pages{
      display:grid;
      grid-template-columns:repeat(5, minmax(0, 1fr));
      gap:10px;
      margin-top:18px;
    }

    body.page-glossar .related-page{
      display:flex;
      flex-direction:column;
      gap:5px;
      min-width:0;
      padding:14px;
      border:1px solid var(--pillBorder);
      border-radius:16px;
      background:color-mix(in srgb, var(--card) 88%, transparent);
      color:var(--text) !important;
      text-decoration:none !important;
      transition:transform .18s ease, border-color .18s ease, background .18s ease;
    }

    body.page-glossar .related-page strong{
      color:var(--brand);
      font-size:.98rem;
    }

    body.page-glossar .related-page span{
      color:var(--muted);
      font-size:.85rem;
      line-height:1.4;
    }

    body.page-glossar .related-page:hover, body.page-glossar .related-page:focus-visible{
      transform:translateY(-2px);
      border-color:var(--brand);
      outline:none;
    }

    body.page-glossar .term-more{
      display:flex;
      flex-wrap:wrap;
      align-items:center;
      gap:7px;
      margin-top:12px;
      padding-top:10px;
      border-top:1px solid var(--pillBorder);
      color:var(--muted);
      font-size:.88rem;
    }

    body.page-glossar .term-more > span{
      font-weight:700;
    }

    body.page-glossar .term-more a{
      display:inline-flex;
      align-items:center;
      padding:5px 9px;
      border:1px solid color-mix(in srgb, var(--brand) 35%, var(--pillBorder));
      border-radius:999px;
      background:color-mix(in srgb, var(--brand) 7%, var(--card));
      color:var(--brand) !important;
      font-weight:700;
      line-height:1.2;
      text-decoration:none !important;
    }

    body.page-glossar .term-more a:hover, body.page-glossar .term-more a:focus-visible{
      border-color:var(--brand);
      background:color-mix(in srgb, var(--brand) 13%, var(--card));
      outline:none;
    }

    body.page-glossar .term-card a, body.page-glossar .intro-card a{
      color:var(--brand);
      text-decoration-thickness:1px;
      text-underline-offset:3px;
    }

    body.page-glossar .back-top{
      margin-top:16px;
      text-align:right;
      font-size:.9rem;
    }

    body.page-glossar .back-top a{
      color:var(--muted);
      text-decoration:none;
    }

    @media (min-width:760px){
      body.page-glossar .term-list.two-col{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
    }

    @media (max-width:900px){
      body.page-glossar .related-pages{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
    }

    @media (max-width:700px){
      body.page-glossar .intro-card, body.page-glossar .letter-section{ border-radius:22px; padding:16px; }
      body.page-glossar .alpha-nav{ position:static; }
      body.page-glossar .term-card{ padding:16px; }
      body.page-glossar .page-subtitle{ text-align:left; padding:0 8px; }
      body.page-glossar .related-pages{ grid-template-columns:1fr; }
    }

/* =========================================================
   GLOSSAR – Design-Angleichung
========================================================= */

body.page-glossar{
  --bg:#eef4fb;
  --text:#17212f;
  --muted:#5e6b7a;
  --card:rgba(255,255,255,.82);
  --border:#3867d6;
  --brand:#3867d6;
  --bgTextBox:rgba(255,255,255,.78);
  --pill:rgba(255,255,255,.72);
  --pillBorder:rgba(56,103,214,.18);
  --shadow:0 14px 34px rgba(15,23,42,.09);
  --glossar-accent:#ff9800;
  --glossar-radius:22px;
  --glossar-inner-radius:14px;
}

html.dark body.page-glossar{
  --bg:#081018;
  --text:#e8eef7;
  --muted:#a9b4c4;
  --card:rgba(17,26,38,.88);
  --brand:#8cc8ff;
  --bgTextBox:rgba(17,26,38,.86);
  --border:#8cc8ff;
  --pill:rgba(255,255,255,.07);
  --pillBorder:rgba(140,200,255,.18);
  --shadow:0 14px 34px rgba(0,0,0,.22);
  --glossar-accent:#ff9800;
}


body.page-glossar{
  background:
    linear-gradient(
      to bottom,
      color-mix(in srgb, var(--bg) 6%, transparent) 0,
      color-mix(in srgb, var(--bg) 22%, transparent) 120px,
      color-mix(in srgb, var(--bg) 55%, transparent) 240px,
      color-mix(in srgb, var(--bg) 84%, transparent) 360px,
      var(--bg) 460px
    ),
    url("/fotos/wolken3.webp") top center / 100% 460px no-repeat,
    var(--bg);
}


body.page-glossar .page-title{
  color:var(--glossar-accent);
  font-weight:800;
}


body.page-glossar .intro-card,
body.page-glossar .letter-section{
  border-radius:var(--glossar-radius);
  border-color:color-mix(in srgb, var(--border) 38%, transparent);
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--bgTextBox) 96%, white 4%),
      color-mix(in srgb, var(--bgTextBox) 92%, var(--brand) 8%)
    );
  box-shadow:var(--shadow);
}

html.dark body.page-glossar .intro-card,
html.dark body.page-glossar .letter-section{
  background:
    linear-gradient(
      135deg,
      rgba(17,26,38,.92),
      rgba(26,41,61,.82)
    );
  box-shadow:var(--shadow);
}


body.page-glossar .intro-card > h2,
body.page-glossar .letter-title{
  color:var(--glossar-accent) !important;
  font-weight:800;
}

body.page-glossar .letter-title::after{
  background:linear-gradient(90deg, var(--glossar-accent), transparent);
}


body.page-glossar .term-card h3{
  color:var(--brand);
}


body.page-glossar .term-card,
body.page-glossar .related-page{
  border-radius:var(--glossar-inner-radius);
  border-color:var(--pillBorder);
  background:color-mix(in srgb, var(--card) 90%, transparent);
}

body.page-glossar .term-card{
  box-shadow:0 6px 18px rgba(15,23,42,.035);
}

html.dark body.page-glossar .term-card{
  box-shadow:none;
}


body.page-glossar .alpha-nav{
  border-radius:22px;
  border-color:var(--pillBorder);
  background:color-mix(in srgb, var(--card) 90%, transparent);
  box-shadow:0 10px 26px rgba(15,23,42,.07);
}

html.dark body.page-glossar .alpha-nav{
  box-shadow:0 10px 26px rgba(0,0,0,.18);
}

body.page-glossar .alpha-nav a,
body.page-glossar .term-more a{
  border-radius:999px;
}


body.page-glossar .related-page{
  padding:13px 14px;
}

@media (max-width:700px){
  body.page-glossar .content{
    padding-left:8px;
    padding-right:8px;
  }

  body.page-glossar .intro-card,
  body.page-glossar .letter-section{
    border-radius:22px;
    padding:16px;
  }

  body.page-glossar .term-card{
    border-radius:14px;
    padding:14px;
  }
}

/* =========================================================
   STATION + GLOSSAR – Überschriftenfarbe verbindlich Orange
   Fix 2026-09-03
========================================================= */


body.page-station .station-text h2::after,
body.page-station .station-row .station-text h2::after,
body.page-glossar .letter-title::after{
  background:linear-gradient(90deg, #ff9800, transparent) !important;
}


/* =========================================================
   STATION + GLOSSAR – Orange-Fix V2
   Bewusst OHNE Abhängigkeit von body.page-*
========================================================= */


.station-row .station-text h2::after,
.glossary-container .letter-section .letter-title::after{
  background:linear-gradient(90deg,#ff9800,transparent) !important;
}


/* =========================================================
   PAGE: TECHNIK
   Grundlage: technik(6).php
   Beide bisherigen Inline-CSS-Blöcke bleiben in ihrer
   ursprünglichen Reihenfolge erhalten, aber gekapselt.
========================================================= */


    body.page-technik{
      --bg:#ffffff;
      --text:#0b1220;
      --muted:#5a667a;
      --card:#ffffff;

      --pill:#f3f5f8;
      --pillBorder:#e3e7ee;
      --shadow: 0 1px 0 rgba(0,0,0,.02);
    }
    html.dark body.page-technik{
      --bg:#0b0f14;


      --card:#111a26;
      --border:#45aaf2;
      --pill:#0f1724;
      --pillBorder:#1e2a3f;
      --shadow: none;
    }

    body.page-technik{
      margin: 0;
      padding: 0;


      font-family: Quicksand, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    }


    body.page-technik .wrap{
      width: 960px;
      max-width: none;
      margin: 0;
      padding: 10px 10px 18px 10px;
      box-sizing: border-box;
    }

    body.page-technik h1{
      margin: 10px 0 8px 0;
      font-size: 18px;
      line-height: 1.25;
    }

    body.page-technik .meta{
      color: var(--muted);
      margin-bottom: 10px;
      font-size: 13px;
      display:flex;
      gap:8px;
      flex-wrap:wrap;
      align-items:center;
    }

    body.page-technik .pill{
      border:1px solid var(--pillBorder);
      background: var(--pill);
      padding:6px 10px;
      border-radius:999px;
      display:flex;
      gap:8px;
      align-items:center;
    }

    body.page-technik input[type="date"]{
      border:0;
      outline:none;
      font:inherit;
      background:transparent;
      color: var(--text);
    }
    html.dark body.page-technik input[type="date"]{ color: var(--text); }

    body.page-technik .grid{
      display:grid;
      width: 100%;
      grid-template-columns: 1fr;

      gap: 10px;
      align-items: stretch;
    }

    body.page-technik .card{
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 10px 10px;
      cursor: pointer;
      background: var(--card);
      box-shadow: var(--shadow);
      user-select:none;
      overflow:hidden;
    }

    body.page-technik .card .title{ font-size: 13px; font-weight: 650; margin:0 0 6px 0; }
    body.page-technik .card .kpis{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom: 6px; }
    body.page-technik .kpi{ border: 1px solid var(--pillBorder); background: var(--pill); border-radius: 12px; padding: 6px 8px; }
    body.page-technik .kpi .l{ font-size: 10px; color: var(--muted); }
    body.page-technik .kpi .v{ font-size: 14px; font-weight: 650; margin-top:2px; color: var(--text); }


    body.page-technik .card.small canvas{ height: 180px !important; width: 100% !important; }
    body.page-technik .card.large canvas{ height: 280px !important; width: 100% !important; }


    @media (min-width: 680px){
      body.page-technik .grid{ grid-template-columns: repeat(12, 1fr); gap: 12px; }
      body.page-technik .card.large{ grid-column: span 12; }
      body.page-technik .card.small{ grid-column: span 6; }
      body.page-technik .card.large canvas{ height: 360px !important; }
    }


    @media (min-width: 980px){
      body.page-technik .card.small{ grid-column: span 4; }
      body.page-technik .card.large canvas{ height: 420px !important; }
    }

    body.page-technik .hint{ color: var(--muted); font-size: 12px; margin-top: 10px; }


 body.page-technik textarea{ font-size:8px; font-family:quicksand-medium; } body.page-technik input, body.page-technik select, body.page-technik textarea{ color:#00c; }


body.page-technik .fett-blau{

    font-weight: bold;
    font-size: xx-large;
}

body.page-technik .normal{
    color: #222222;
    font-weight: normal;
    font-size: xx-large;
}

body.page-technik .normal-blau{
    color: #4b7bec;
    font-weight: normal;
    font-size: xx-large;
}


body.page-technik{
  background: var(--bg);
  color: var(--text);
  background-image: url("/fotos/wolken3.webp");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% 250px;
}

/* ===== Technik: Div-Layout (statt Table) nach Vorbild m_station.php ===== */

body.page-technik .content{
  max-width: 960px;
  margin: 0 auto;
  padding: 0 10px 60px;
}


body.page-technik .section-title{
  font-family: quicksand-medium, Arial, sans-serif;
  font-size: 1.8rem;
  color: var(--blauText);
  margin: 34px 0 18px;
  text-align: left;
}


body.page-technik .myboxgr{
  width: 220px;
  border-radius: 25px;
  overflow: hidden;
}

body.page-technik .myboxgr img{
  display: block;
  width: 100% !important;
  height: auto;
  border: 0;
}


body.page-technik .station-row{
  display: flex !important;
  flex-direction: row !important;

  gap: 28px;
  margin: 20px 0 26px;
  padding: 20px 20px;
  border-radius: 22px;
  background-color: var(--bgTextBox);
}

body.page-technik .station-row.reverse{
  flex-direction: row-reverse !important;
}

body.page-technik .station-text{
  flex: 1;
  font-size: 1.25rem;
  color: var(--text);
  float: none !important;
  position: relative !important;
  font-family: quicksand-medium, Arial, sans-serif;
}

body.page-technik .station-media{
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  float: none !important;
  position: relative !important;
  font-family: quicksand-medium, Arial, sans-serif;
}


body.page-technik .tech-box{
  margin: 18px 0 26px;
  padding: 14px 16px;
  border-radius: 22px;
  background-color: var(--bgTextBox);
  font-family: quicksand-medium, Arial, sans-serif;
  border:1px solid var(--border);
}


body.page-technik .between-media{
  text-align: center;
  margin: 10px 0 22px;
  font-family: quicksand-medium, Arial, sans-serif;
}
body.page-technik .between-media img{
  max-width: 90%;
  height: auto;
  font-family: quicksand-medium, Arial, sans-serif;
}


body.page-technik .site-footer{
  max-width: 960px;
  margin: 25px auto 0;
  text-align: center;
  font-family: quicksand-medium, Arial, sans-serif;
}


@media (max-width: 900px){
  body.page-technik .station-row, body.page-technik .station-row.reverse{
    flex-direction: column;
    text-align: center;
  font-family: quicksand-medium, Arial, sans-serif;
  }
  body.page-technik .section-title{ text-align: center; }
  body.page-technik .myboxgr{ width: min(320px, 90%); }
}


html.dark body.page-technik .technik-box, html.dark body.page-technik .technik-box p, html.dark body.page-technik .technik-box li{
  color: #e6e6e6;

  font-family: quicksand-medium, Arial, sans-serif;
}

html.dark body.page-technik .technik-box h2, html.dark body.page-technik .technik-box h3{
  color: #ffd27d;

  font-family: quicksand-medium, Arial, sans-serif;
}


body.page-technik .technik-textblock{
  color: #222;
  font-family: quicksand-medium, Arial, sans-serif;
}


html.dark body.page-technik .technik-textblock{
  color: #e6e6e6;
  font-family: quicksand-medium, Arial, sans-serif;
}


html.dark body.page-technik .technik-textblock *{
  color: inherit !important;
  font-family: quicksand-medium, Arial, sans-serif;
}


body.page-technik .tech-group.hardware{
  background: linear-gradient(180deg, #eef5ff, transparent);
  border-left: 6px solid #4a7bd0;
  padding: 10px 16px 24px;
  border-radius: 18px;
  margin-bottom: 40px;
}

html.dark body.page-technik .tech-group.hardware{
  background: linear-gradient(180deg, #1c2636, transparent);
  border-left-color: #6fa3ff;
}

body.page-technik .tech-group.process{
  background-color: rgba(120, 180, 255, 0.08);
  border-radius: 20px;
  padding: 18px 18px 28px;
  margin: 40px 0;
}

html.dark body.page-technik .tech-group.process{
  background-color: rgba(120, 180, 255, 0.12);
}
body.page-technik .tech-group.output{
  background: linear-gradient(180deg, #f7f7f7, transparent);
  border-left: 6px solid #3aa76d;
  padding: 16px 18px 30px;
  border-radius: 20px;
  margin-top: 50px;
}

html.dark body.page-technik .tech-group.output{
  background: linear-gradient(180deg, #1f2a22, transparent);
  border-left-color: #4fd18b;
}
body.page-technik .station-text, body.page-technik .station-text p, body.page-technik .station-text .subtext{
  padding: 20px;
  text-align: justify;
  text-justify: inter-word;
}
body.page-technik .station-text{
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
}

body.page-technik .technik-textblock, body.page-technik .technik-textblock p, body.page-technik .technik-textblock .subtext{
  padding: 10px;
  text-align: justify;
  text-justify: inter-word;
}
body.page-technik .technik-textblock{
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
}


/* ===== Sprungmarken-Men? (mobil) ===== */
body.page-technik .jumpmenu{
  border: 1px solid var(--border);
}

body.page-technik .jump-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
  font-size: 30px;
  font-weight: 400;
}

body.page-technik .jump-grid a{
  display: block;
  padding: 12px 14px;
  border-radius: 14px;
  text-decoration: none;
  color: var(--text);
  background: linear-gradient(135deg, rgba(75,123,236,.12), rgba(69,170,242,.10));
  border: 1px solid rgba(75,123,236,.28);
  font-weight: 950;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

body.page-technik .jump-grid a:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0,80,150,.18);
  background: linear-gradient(135deg, rgba(75,123,236,.18), rgba(69,170,242,.16));
}

/* ===== Top-Button ===== */
body.page-technik .back-to-top{
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: 111px;
  height: 111px;
  border-radius: 999px;
  display: none;

  align-items: center;
  justify-content: center;

  text-decoration: none;
  color: #fff;
  font-size: 50px;
  font-weight: 1000;

  background: linear-gradient(135deg, #4b7bec, #45aaf2);
  box-shadow: 0 10px 22px rgba(0,80,150,.28);
  border: 1px solid rgba(255,255,255,.35);
  z-index: 999;
}

body.page-technik .back-to-top:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 26px rgba(0,80,150,.35);
}

html.dark body.page-technik .normal-blau{ color: #4b7bec !important; }


body.page-technik .subtitle-wrap{

  display: block;
  text-align: center;
  margin: 0 auto 10px auto;
  clear: both;
}

body.page-technik .subtitle-wrap > *{
  margin-left: auto;
  margin-right: auto;
}

body.page-technik .subtitle-wrap img, body.page-technik .subtitle-wrap div, body.page-technik .subtitle-wrap p, body.page-technik .subtitle-wrap span{
  max-width: 80%;
}

body.page-technik .subtitle-wrap{
  width: 80%;
}

body.page-technik .subtitle-wrap > div, body.page-technik .subtitle-wrap > p{
  width: 80%;
  text-align: center;
}


/* ===== Responsive /resp Feinschliff Technik ===== */
body.page-technik .page-title{
  margin: 18px 0 10px;
  font-size: clamp(2.1rem, 5vw, 4rem);
  color: var(--text);
  text-align: center;
}
body.page-technik .content.technik{
  width: min(1180px, calc(100% - 24px));
  max-width: 1180px;
}
body.page-technik .tech-box{
  box-shadow: 0 8px 24px rgba(15,23,42,.06);
}
html.dark body.page-technik .tech-box{ box-shadow:none; }
body.page-technik .station-row{
  display:grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 280px);
  align-items:center;
}
body.page-technik .station-row.reverse{
  grid-template-columns: minmax(180px, 280px) minmax(0, 1fr);
}
body.page-technik .station-row.reverse .station-text{ order:2; }
body.page-technik .station-row.reverse .station-media{ order:1; }
body.page-technik .myboxgr{ width:min(280px, 100%); }
body.page-technik .technik-textblock{ line-height:1.65; }
body.page-technik .fett-blau{ color:#4b7bec; }
html.dark body.page-technik .fett-blau{ color:#7db3ff; }
body.page-technik .jump-grid{ font-size:clamp(1.05rem, 2vw, 1.65rem); }
@media (max-width: 760px){
  body.page-technik{ background-size: 100% 180px; }
  body.page-technik .content.technik{ width: min(100% - 16px, 960px); padding-inline: 0; }
  body.page-technik .station-row, body.page-technik .station-row.reverse{
    display:flex !important;
    flex-direction:column !important;
    gap:14px;
    padding:14px 10px;
  }
  body.page-technik .station-row.reverse .station-text, body.page-technik .station-row.reverse .station-media{ order:initial; }
  body.page-technik .station-text, body.page-technik .station-text p, body.page-technik .station-text .subtext, body.page-technik .technik-textblock, body.page-technik .technik-textblock p, body.page-technik .technik-textblock .subtext{
    padding:6px;
    text-align:left;
  }
  body.page-technik .normal, body.page-technik .normal-blau, body.page-technik .fett-blau{ font-size:1.2rem; }
  body.page-technik .myboxgr{ width:min(320px, 92vw); }
  body.page-technik .jump-grid{ grid-template-columns:1fr; font-size:1.15rem; }
  body.page-technik .back-to-top{ width:64px; height:64px; font-size:32px; }
}
body.page-technik .station-page{
  margin-top:24px;
}


/* ===== Technik: schönere Boxen + sauberer Abstand ===== */

body.page-technik{

  --bgTextBox:rgba(255,255,255,0.72);

}

html.dark body.page-technik{
  --brand:#45aaf2;
  --bgTextBox:rgba(17,26,38,0.82);
  --blauText:#45aaf2;
}


body.page-technik .content.technik{
  display: flex;
  flex-direction: column;
  gap: 34px;
}


body.page-technik .tech-box, body.page-technik .station-row, body.page-technik .station-row.reverse{
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}


body.page-technik .section-title{
  margin: 10px 0 -14px;
}


body.page-technik .tech-box{
  padding: clamp(18px, 3vw, 30px);
  border-radius: 28px;
  border: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--bgTextBox) 92%, white 8%),
      color-mix(in srgb, var(--bgTextBox) 86%, var(--brand) 14%)
    );
  box-shadow:
    0 18px 45px rgba(15,23,42,.12),
    inset 0 1px 0 rgba(255,255,255,.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}


body.page-technik .station-row{
  padding: clamp(18px, 3vw, 28px);
  border-radius: 26px;
  border: 1px solid color-mix(in srgb, var(--border) 45%, transparent);
  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.48),
      rgba(255,255,255,.22)
    );
  box-shadow:
    0 14px 34px rgba(15,23,42,.10),
    inset 0 1px 0 rgba(255,255,255,.35);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

body.page-technik .station-row:hover{
  transform: translateY(-4px);
  box-shadow:
    0 22px 52px rgba(15,23,42,.16),
    inset 0 1px 0 rgba(255,255,255,.45);
  border-color: var(--brand);
}

html.dark body.page-technik .tech-box{
  background:
    linear-gradient(
      135deg,
      rgba(17,26,38,.94),
      rgba(26,41,61,.86)
    );
  box-shadow:
    0 18px 45px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.06);
}

html.dark body.page-technik .station-row{
  background:
    linear-gradient(
      135deg,
      rgba(24,36,52,.9),
      rgba(18,28,42,.82)
    );
  box-shadow:
    0 14px 34px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.05);
}


body.page-technik .station-media .myboxgr{
  background: color-mix(in srgb, var(--card) 78%, var(--brand) 22%);
  padding: 10px;
  border-radius: 30px;
  box-shadow: 0 14px 34px rgba(15,23,42,.16);
}

body.page-technik .station-media img, body.page-technik .tech-box > img, body.page-technik .tech-box center img{
  border-radius: 22px;
  box-shadow: 0 10px 26px rgba(15,23,42,.14);
}


body.page-technik .jumpmenu{
  padding: 18px;
  border-radius: 24px;
  background:
    linear-gradient(
      135deg,
      rgba(75,123,236,.10),
      rgba(69,170,242,.14)
    );
}

body.page-technik .jump-grid a{
  border-radius: 18px;
  box-shadow: 0 8px 20px rgba(15,23,42,.08);
}


@media (max-width: 760px){
  body.page-technik .content.technik{
    gap: 26px;
  }

  body.page-technik .section-title{
    margin: 8px 0 -10px;
  }

  body.page-technik .station-row:hover{
    transform: none;
  }

  body.page-technik .tech-box, body.page-technik .station-row{
    border-radius: 22px;
    padding: 16px;
  }

  body.page-technik .station-media .myboxgr{
    padding: 8px;
    border-radius: 24px;
  }
}


body.page-technik .tech-box{
  display: flex;
  flex-direction: column;
  gap: 28px;
}


body.page-technik .tech-box .tech-box,
body.page-technik .tech-box .station-row{
  margin: 0 !important;
}


body.page-technik .section-title{
  margin: 26px 0 16px !important;
  position: relative;
  z-index: 2;
}

body.page-technik .section-title + .tech-box{
  margin-top: 0 !important;
}


/* ===== Desktop Schriftgrößen optimieren ===== */
@media (min-width: 901px){

  body.page-technik{
    font-size: 16px;
    line-height: 1.65;
  }

  body.page-technik .page-title{
    font-size: clamp(2.4rem, 3vw, 3.4rem);
  }

  body.page-technik .section-title{
    font-size: 1.7rem;
    line-height: 1.3;
  }

  body.page-technik .station-text, body.page-technik .technik-textblock, body.page-technik .station-text p, body.page-technik .technik-textblock p{
    font-size: 1.02rem !important;
    line-height: 1.8;
  }

  body.page-technik .normal, body.page-technik .normal-blau{
    font-size: 1rem !important;
    line-height: 1.75;
  }

  body.page-technik .fett-blau{
    font-size: 1.28rem !important;
    line-height: 1.45;
  }

  body.page-technik .jump-grid{
    font-size: 1rem !important;
  }

  body.page-technik .jump-grid a{
    font-weight: 700;
    padding: 10px 14px;
  }

  body.page-technik .units-k{
    font-size: 1.2rem;
  }

  body.page-technik .units-v{
    font-size: 1.05rem;
  }

  body.page-technik .units-note{
    font-size: 0.88rem;
  }
}


body.page-technik .horizont-bilder{
  display:flex;
  gap:12px;
  justify-content:center;
  align-items:stretch;
  flex-wrap:nowrap;
}

body.page-technik .horizont-bilder img{
  width:calc((100% - 24px) / 3);
  aspect-ratio: 4 / 3;
  object-fit:cover;

  border-radius:22px;

  box-shadow:0 10px 24px rgba(15,23,42,.14);
  border:1px solid rgba(255,255,255,.25);

  display:block;
}

@media (max-width:760px){

  body.page-technik .horizont-bilder{
    flex-direction:column;
    align-items:center;
  }

  body.page-technik .horizont-bilder img{
    width:min(100%, 420px);
  }
}


/* ===== Lernkapitel: Messwerte erfassen ===== */

body.page-technik .learn-box{
  position: relative;
  overflow: hidden;
}

body.page-technik .learn-header{
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 16px;
  align-items: center;
  padding: 20px;
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(75,123,236,.18), rgba(69,170,242,.10));
  border: 1px solid rgba(75,123,236,.35);
}

body.page-technik .learn-icon{
  width: 64px;
  height: 64px;
  border-radius: 20px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 34px;
  background: linear-gradient(135deg, #4b7bec, #45aaf2);
  color:#fff;
  box-shadow: 0 12px 28px rgba(75,123,236,.28);
}

body.page-technik .learn-kicker{
  font-size: .9rem;
  color: var(--muted);
  margin-bottom: 4px;
  font-weight: 700;
}

body.page-technik .learn-title{
  margin: 0;
  color: var(--blauText);
  font-size: clamp(1.35rem, 3vw, 2rem);
  line-height: 1.25;
}

body.page-technik .learn-goal{
  margin-top: 18px;
  padding: 16px 18px;
  border-radius: 20px;
  background: rgba(58,167,109,.10);
  border-left: 6px solid #3aa76d;
  font-size: 1.02rem;
  line-height: 1.65;
}

body.page-technik .learn-grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 24px;
  align-items:center;
}

body.page-technik .learn-step{
  display:grid;
  grid-template-columns: 42px 1fr;
  gap: 14px;
  margin: 18px 0;
}

body.page-technik .learn-step-no{
  width:42px;
  height:42px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  color:#fff;
  background: linear-gradient(135deg, #4b7bec, #45aaf2);
}

body.page-technik .learn-step-content{
  padding: 14px 16px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--card) 82%, var(--brand) 18%);
  border: 1px solid color-mix(in srgb, var(--border) 35%, transparent);
}

body.page-technik .learn-step-content strong{
  color: var(--blauText);
  display:block;
  margin-bottom:6px;
}

body.page-technik .learn-formula{
  margin: 18px 0;
  padding: 18px;
  border-radius: 20px;
  text-align:center;
  background: rgba(255,210,125,.18);
  border: 1px solid rgba(255,210,125,.55);
  font-weight:800;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
}

body.page-technik .learn-result{
  padding: 16px 18px;
  border-radius: 20px;
  background: rgba(75,123,236,.12);
  border-left: 6px solid var(--brand);
  font-weight:700;
}

body.page-technik .learn-media{
  text-align:center;
}

body.page-technik .learn-media .myboxgr{
  margin-inline:auto;
}

body.page-technik .learn-caption{
  margin-top: 10px;
  font-size: .9rem;
  color: var(--muted);
}

body.page-technik .glossary-info{
  display:inline-grid;
  place-items:center;
  width:1.15rem;
  height:1.15rem;
  margin-left:.3rem;
  border:1px solid color-mix(in srgb, var(--brand) 65%, transparent);
  border-radius:50%;
  color:var(--brand);
  font-size:.7rem;
  font-weight:900;
  line-height:1;
  text-decoration:none;
  vertical-align:.08em;
}

body.page-technik .glossary-info:hover, body.page-technik .glossary-info:focus-visible{
  background:var(--brand);
  color:#fff;
  outline:none;
}

body.page-technik .glossary-inline{
  color:var(--blauText);
  font-weight:700;
  text-decoration:none;
  border-bottom:1px dotted currentColor;
}

body.page-technik .glossary-inline:hover, body.page-technik .glossary-inline:focus-visible{
  border-bottom-style:solid;
  outline:none;
}

html.dark body.page-technik .learn-step-content{
  background: rgba(24,36,52,.9);
}

@media (max-width:760px){
  body.page-technik .learn-header{
    grid-template-columns:1fr;
    text-align:center;
  }

  body.page-technik .learn-icon{
    margin:auto;
  }

  body.page-technik .learn-grid,
body.page-technik .learn-step{
    grid-template-columns:1fr;
  }


  body.page-technik .learn-step-no{
    margin:auto;
  }
}


/* =========================================================
   TECHNIK – Design-Angleichung
========================================================= */

body.page-technik{
  --bg:#eef4fb;
  --text:#17212f;
  --muted:#5e6b7a;
  --card:rgba(255,255,255,.82);
  --border:#3867d6;
  --brand:#3867d6;
  --bgTextBox:rgba(255,255,255,.78);
  --blauText:#3867d6;
  --pill:rgba(255,255,255,.72);
  --pillBorder:rgba(56,103,214,.18);
  --shadow:0 14px 34px rgba(15,23,42,.09);
  --technik-accent:#ff9800;
  --technik-radius:22px;
  --technik-inner-radius:14px;
}

html.dark body.page-technik{
  --bg:#081018;
  --text:#e8eef7;
  --muted:#a9b4c4;
  --card:rgba(17,26,38,.88);
  --border:#8cc8ff;
  --brand:#8cc8ff;
  --bgTextBox:rgba(17,26,38,.86);
  --blauText:#8cc8ff;
  --pill:rgba(255,255,255,.07);
  --pillBorder:rgba(140,200,255,.18);
  --shadow:0 14px 34px rgba(0,0,0,.22);
  --technik-accent:#ff9800;
}


body.page-technik{
  background:
    linear-gradient(
      to bottom,
      color-mix(in srgb, var(--bg) 6%, transparent) 0,
      color-mix(in srgb, var(--bg) 22%, transparent) 120px,
      color-mix(in srgb, var(--bg) 55%, transparent) 240px,
      color-mix(in srgb, var(--bg) 84%, transparent) 360px,
      var(--bg) 460px
    ),
    url("/fotos/wolken3.webp") top center / 100% 460px no-repeat,
    var(--bg);
}


body.page-technik .content.technik > h1.page-title,
body.page-technik .content.technik > h2.section-title,
body.page-technik .tech-box > h2.section-title,
body.page-technik h3.learn-title{
  color:#ff9800 !important;
  font-weight:800;
}


body.page-technik .tech-box{
  border-radius:var(--technik-radius);
  border-color:color-mix(in srgb, var(--border) 38%, transparent);
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--bgTextBox) 96%, white 4%),
      color-mix(in srgb, var(--bgTextBox) 92%, var(--brand) 8%)
    );
  box-shadow:var(--shadow);
}

html.dark body.page-technik .tech-box{
  background:
    linear-gradient(
      135deg,
      rgba(17,26,38,.92),
      rgba(26,41,61,.82)
    );
  box-shadow:var(--shadow);
}


body.page-technik .tech-box .station-row{
  border-radius:var(--technik-inner-radius);
  background:color-mix(in srgb, var(--card) 88%, transparent);
  border-color:var(--pillBorder);
  box-shadow:0 8px 22px rgba(15,23,42,.06);
}

html.dark body.page-technik .tech-box .station-row{
  background:rgba(255,255,255,.035);
  box-shadow:none;
}


body.page-technik .station-media .myboxgr{
  border-radius:var(--technik-inner-radius);
  padding:8px;
  background:color-mix(in srgb, var(--card) 88%, var(--brand) 12%);
  box-shadow:0 10px 24px rgba(15,23,42,.10);
}

body.page-technik .station-media img,
body.page-technik .tech-box > img,
body.page-technik .tech-box center img,
body.page-technik .horizont-bilder img{
  border-radius:var(--technik-inner-radius);
}


body.page-technik .jumpmenu{
  border-radius:var(--technik-inner-radius);
  background:
    linear-gradient(
      135deg,
      rgba(56,103,214,.07),
      rgba(69,170,242,.08)
    );
}

body.page-technik .jump-grid a{
  border-radius:var(--technik-inner-radius);
  background:color-mix(in srgb, var(--card) 88%, var(--brand) 12%);
  box-shadow:none;
}


body.page-technik .learn-header,
body.page-technik .learn-goal,
body.page-technik .learn-step-content,
body.page-technik .learn-formula,
body.page-technik .learn-result,
body.page-technik .learn-card,
body.page-technik .learn-flow-item,
body.page-technik .learn-sql-box,
body.page-technik .learn-highlight{
  border-radius:var(--technik-inner-radius);
}


body.page-technik .learn-card-title,
body.page-technik .learn-step-content > strong{
  color:var(--brand);
}


body.page-technik .learn-goal,
body.page-technik .learn-result,
body.page-technik .learn-formula{
  box-shadow:none;
}


body.page-technik .glossary-inline,
body.page-technik .glossary-info{
  color:var(--brand);
}


body.page-technik .back-to-top{
  width:72px;
  height:72px;
  font-size:34px;
  box-shadow:0 10px 24px rgba(0,80,150,.24);
}


@media (max-width:760px){
  body.page-technik .content.technik{
    width:calc(100% - 12px);
  }

  body.page-technik .tech-box{
    border-radius:22px;
    padding:14px;
  }

  body.page-technik .tech-box .station-row,
  body.page-technik .learn-header,
  body.page-technik .learn-goal,
  body.page-technik .learn-step-content,
  body.page-technik .learn-formula,
  body.page-technik .learn-result,
  body.page-technik .learn-card,
  body.page-technik .learn-flow-item,
  body.page-technik .learn-sql-box,
  body.page-technik .learn-highlight,
  body.page-technik .jumpmenu,
  body.page-technik .jump-grid a,
body.page-technik .station-media .myboxgr{
    border-radius:14px;
  }


  body.page-technik .back-to-top{
    width:58px;
    height:58px;
    font-size:28px;
  }
}

/* =========================================================
   PAGE: PUSH-SERVICE
   Grundlage: push(4).php
========================================================= */

    body.page-push{
      --bg:#f5f7fb;
      --text:#0b1220;
      --muted:#5a667a;
      --card:rgba(255,255,255,.86);

      --border:rgba(56,103,214,.28);


      --pill:#f3f6fb;
      --pillBorder:#dfe7f3;


      --shadow:0 12px 34px rgba(15,23,42,.10);
      --radius:24px;
    }
    html.dark body.page-push{


      --border:rgba(69,170,242,.32);
      --brand:#5ea8ff;

      --pill:#0f1724;
      --pillBorder:#25344b;


      --shadow:0 12px 34px rgba(0,0,0,.35);
    }
    body.page-push, body.page-push *{box-sizing:border-box}
    body.page-push{
      margin:0;
      min-height:100vh;

      color:var(--text);
      font-family:Quicksand, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      line-height:1.55;


    }
    body.page-push .resp-page{
      width:min(1180px, 100% - 24px);
      margin:0 auto;
      padding:18px 0 42px;
    }
    body.page-push .hero{
      margin:14px 0 18px;
      padding:24px;
      border:1px solid rgba(255,255,255,.55);
      border-radius:30px;
      background:rgba(255,255,255,.62);
      backdrop-filter:blur(10px);

    }
    html.dark body.page-push .hero{background:rgba(8,16,24,.72);border-color:rgba(255,255,255,.09)}
    body.page-push .eyebrow{margin:0 0 6px;color:var(--brand);font-weight:800;letter-spacing:.03em;text-transform:uppercase;font-size:.9rem}
    body.page-push h1{margin:0 0 12px;font-size:clamp(2rem,5vw,3.6rem);line-height:1.08;font-weight:800}
    body.page-push .lead{margin:0;color:var(--muted);font-size:clamp(1.05rem,2.4vw,1.35rem)}
    body.page-push .layout{display:grid;gap:18px}
    body.page-push .card{
      border:1px solid var(--border);
      border-radius:var(--radius);
      padding:18px;


      backdrop-filter:blur(8px);
    }
    body.page-push .card h2{margin:0 0 12px;color:var(--brand);font-size:clamp(1.35rem,3vw,2rem)}
    body.page-push .steps{display:grid;gap:10px;margin:14px 0 0;padding:0;list-style:none}
    body.page-push .steps li{display:flex;gap:12px;align-items:flex-start;padding:12px;border:1px solid var(--pillBorder);background:var(--pill);border-radius:18px}
    body.page-push .num{display:grid;place-items:center;flex:0 0 32px;height:32px;background:var(--brand);color:white;font-weight:800;}
    body.page-push .prefs{display:grid;gap:14px}
    body.page-push #ew_districts{display:grid;grid-template-columns:1fr;gap:8px;margin-top:10px}
    body.page-push #ew_districts label{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--pillBorder);background:var(--pill);border-radius:16px;cursor:pointer;font-weight:700}

    body.page-push input[type="checkbox"]{width:1.25rem;height:1.25rem;accent-color:var(--brand)}
    body.page-push .actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
    body.page-push button{appearance:none;border:1px solid var(--pillBorder);border-radius:16px;padding:13px 18px;background:var(--pill);color:var(--text);font:inherit;font-weight:800;cursor:pointer;min-height:48px}
    body.page-push button:hover{filter:brightness(.97)}
    body.page-push #ew_enable{border-color:rgba(32,191,107,.55);background:color-mix(in srgb, var(--ok) 14%, var(--pill));color:var(--text)}
    body.page-push #ew_disable{border-color:rgba(252,92,101,.42);background:color-mix(in srgb, var(--danger) 10%, var(--pill))}
    body.page-push #ew_status{margin-top:14px;padding:14px;border-radius:18px;border:1px solid var(--pillBorder);background:var(--pill);font-weight:800}
    body.page-push #ew_log{display:none;margin-top:12px;max-height:220px;overflow:auto;padding:12px;border-radius:14px;background:rgba(0,0,0,.08);white-space:pre-wrap;font-size:.9rem}
    html.dark body.page-push #ew_log{background:rgba(255,255,255,.07)}
    body.page-push .ios-card{border:1px solid var(--warnBorder);background:var(--warnBg);color:var(--warn);border-radius:20px;padding:16px;margin-top:16px}
    body.page-push .ios-card-head{font-weight:900;font-size:1.2rem;margin-bottom:8px}body.page-push .ios-card ol{margin:8px 0 0 22px;padding:0}body.page-push .ios-card li{margin:6px 0}
    body.page-push .note{color:var(--muted);font-size:.98rem;margin:8px 0 0}
    body.page-push .support-list{margin:0;padding-left:20px}body.page-push .support-list li{margin:8px 0}
    @media (min-width:760px){body.page-push #ew_districts{grid-template-columns:repeat(2,minmax(0,1fr))}body.page-push .prefs{grid-template-columns:1fr}body.page-push .card{padding:22px}}
    @media (min-width:1060px){body.page-push .layout{grid-template-columns:minmax(0,1fr) 360px;align-items:start}body.page-push .side{position:sticky;top:20px}body.page-push .hero{padding:32px}}


/* =========================================================
   PUSH-SERVICE – Design-Angleichung
========================================================= */

body.page-push{
  --bg:#eef4fb;
  --text:#17212f;
  --muted:#5e6b7a;
  --card:rgba(255,255,255,.82);
  --cardSolid:#ffffff;
  --border:rgba(56,103,214,.22);
  --brand:#3867d6;
  --brand2:#45aaf2;
  --pill:rgba(255,255,255,.72);
  --pillBorder:rgba(56,103,214,.18);
  --ok:#20bf6b;
  --danger:#fc5c65;
  --warn:#ff8a00;
  --warnBg:#fff3e3;
  --warnBorder:#ffc37a;
  --shadow:0 14px 34px rgba(15,23,42,.09);
  --push-accent:#ff9800;
  --push-radius:22px;
  --push-inner-radius:14px;
}

html.dark body.page-push{
  --bg:#081018;
  --text:#e8eef7;
  --muted:#a9b4c4;
  --card:rgba(17,26,38,.88);
  --cardSolid:#111a26;
  --border:rgba(140,200,255,.22);
  --brand:#8cc8ff;
  --brand2:#26de81;
  --pill:rgba(255,255,255,.07);
  --pillBorder:rgba(140,200,255,.18);
  --ok:#32d67b;
  --danger:#ff6b81;
  --warn:#ffb15c;
  --warnBg:#1f160d;
  --warnBorder:#80551c;
  --shadow:0 14px 34px rgba(0,0,0,.22);
  --push-accent:#ff9800;
}


body.page-push .hero{
  border-radius:var(--push-radius);
  background:var(--card);
  border-color:var(--border);
  box-shadow:var(--shadow);
}

body.page-push .hero h1{
  color:#ff9800 !important;
  font-weight:800;
}


body.page-push .card{
  border-radius:var(--push-radius);
  background:var(--card);
  border-color:var(--border);
  box-shadow:var(--shadow);
}


body.page-push .card h2{
  color:#ff9800 !important;
  font-weight:800;
}


body.page-push .steps li,
body.page-push #ew_districts label,
body.page-push #ew_status,
body.page-push #ew_log{
  border-radius:var(--push-inner-radius);
}

body.page-push .steps li,
body.page-push #ew_districts label,
body.page-push #ew_status{
  background:color-mix(in srgb, var(--card) 90%, transparent);
  border-color:var(--pillBorder);
}


body.page-push .ios-card,
body.page-push button{
  border-radius:var(--push-inner-radius);
}


body.page-push .num{
  border-radius:999px;
}


body.page-push #ew_status{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16);
}


body.page-push #ew_districts label:hover{
  border-color:var(--brand);
  background:color-mix(in srgb, var(--card) 82%, var(--brand) 18%);
}

@media (max-width:680px){
  body.page-push .resp-page{
    width:calc(100% - 12px);
    padding-top:8px;
  }

  body.page-push .hero,
  body.page-push .card{
    border-radius:22px;
  }

  body.page-push .hero{
    padding:18px 16px;
  }

  body.page-push .card{
    padding:14px;
  }

  body.page-push .steps li,
  body.page-push #ew_districts label,
  body.page-push #ew_status,
  body.page-push .ios-card,
  body.page-push button{
    border-radius:14px;
  }
}

/* =========================================================
   PAGE: FEEDBACK
   Grundlage: feedback(3).php
========================================================= */

    body.page-feedback{
      --font-main: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
      --brand: #4b7bec;
      --text: #0b1b3a;
      --muted: #556170;
      --radius: 24px;
      --radius-sm: 16px;
      --panel-bg: linear-gradient(180deg, #eef1f4 0%, #d8dde3 100%);
      --page-bg: linear-gradient(135deg, #d9dde2 0%, #e8ebef 20%, #c7ccd3 52%, #eef1f5 100%);
      --shadow: 14px 14px 28px rgba(88,98,112,0.28), -10px -10px 24px rgba(255,255,255,0.8);
    }

    html.dark body.page-feedback{
      --brand: #9bb7ff;
      --text: #e6e6e6;
      --muted: #c7c7c7;
      --panel-bg: linear-gradient(180deg, #20242a 0%, #121417 100%);
      --page-bg: linear-gradient(135deg, #080808 0%, #14171c 52%, #080808 100%);
      --shadow: 10px 10px 26px rgba(0,0,0,.35), -6px -6px 18px rgba(255,255,255,.04);
    }

    body.page-feedback{
      margin: 0;
      font-family: var(--font-main);
      color: var(--text);

      font-weight: 400;
      letter-spacing: .2px;
    }

    body.page-feedback .resp-shell{
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
    }

    body.page-feedback .resp-main{
      width: 100%;
    }

    body.page-feedback .feedback-panel{
      border-radius: var(--radius);
      padding: 24px;
      margin-bottom: 24px;
      background: var(--panel-bg);
      box-shadow: var(--shadow);
    }

    body.page-feedback .seitentitel{
      width: min(640px, 100%);
      margin: 0 auto 18px;
      padding: 14px 18px;
      text-align: center;
      font-size: clamp(24px, 3vw, 38px);
      font-weight: 800;
      color: var(--brand);
      background: rgba(255,255,255,.55);
      border: 1px solid rgba(255,255,255,.55);
      border-radius: var(--radius);
      backdrop-filter: blur(10px);
      box-sizing: border-box;
    }

    body.page-feedback h1, body.page-feedback h2, body.page-feedback h3{
      color: orange;
      font-weight: 800;
      letter-spacing: .3px;
    }

    body.page-feedback p{
      margin: 0 0 16px;
      color: var(--muted);
      line-height: 1.55;
    }

    body.page-feedback label{
      display: block;
      font-weight: 600;
      margin: 14px 0 6px;
    }

    body.page-feedback input[type="text"], body.page-feedback input[type="email"], body.page-feedback textarea, body.page-feedback select{
      width: 100%;
      max-width: 100%;
      padding: 12px 14px;
      border: 1px solid #cfd5dd;

      font-size: 1rem;
      font-family: var(--font-main);
      background: rgba(255,255,255,.88);
      color: #111827;
      box-sizing: border-box;
    }

    body.page-feedback textarea{
      min-height: 130px;
      resize: vertical;
    }

    body.page-feedback .row{
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
    }

    body.page-feedback .chips{
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    body.page-feedback .chip{
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 9px 12px;
      border: 1px solid rgba(255,255,255,.7);
      border-radius: 999px;
      background: rgba(255,255,255,.48);
      margin: 0;
    }

    body.page-feedback .stars{
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      padding: 6px 0;
    }

    body.page-feedback .stars label{
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin: 0;
      padding: 8px 12px;
      border-radius: 999px;
      background: rgba(255,255,255,.48);
      border: 1px solid rgba(255,255,255,.7);
    }

    body.page-feedback .hint, body.page-feedback .form-footer{
      font-size: .94rem;
      color: var(--muted);
      line-height: 1.45;
    }

    body.page-feedback .form-footer{
      margin-top: 14px;
    }

    body.page-feedback .form-footer a{

      font-weight: 700;
    }

    body.page-feedback .required{
      color: #b91c1c;
      font-weight: 800;
    }

    body.page-feedback .hp{
      position: absolute !important;
      left: -10000px !important;
      top: auto !important;
      width: 1px !important;
      height: 1px !important;
      overflow: hidden !important;
      opacity: 0 !important;
      pointer-events: none !important;
    }

    body.page-feedback .btn{
      width: 100%;
      margin-top: 18px;
      padding: 14px 18px;
      border: 0;
      border-radius: 16px;
      background: linear-gradient(180deg, #6d9cff 0%, #4d7fff 100%);
      color: #fff;
      font-family: var(--font-main);
      font-size: 1.02rem;
      font-weight: 800;
      letter-spacing: .04em;
      cursor: pointer;
      box-shadow: 0 8px 18px rgba(29,78,216,.22);
    }

    body.page-feedback .btn:hover{
      opacity: .92;
    }

    @media (max-width: 768px){
      body.page-feedback .resp-shell{
        padding: 14px;
      }

      body.page-feedback .feedback-panel{
        padding: 18px;
        border-radius: 18px;
      }

      body.page-feedback .row{
        grid-template-columns: 1fr;
        gap: 0;
      }

      body.page-feedback .seitentitel{
        font-size: clamp(22px, 7vw, 30px);
        border-radius: 18px;
      }

      body.page-feedback .chips, body.page-feedback .stars{
        gap: 8px;
      }

      body.page-feedback .chip, body.page-feedback .stars label{
        width: 100%;
        box-sizing: border-box;
      }
    }


/* =========================================================
   FEEDBACK – Design-Angleichung
========================================================= */

body.page-feedback{
  --font-main:Quicksand, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --brand:#3867d6;
  --text:#17212f;
  --muted:#5e6b7a;
  --radius:22px;
  --radius-sm:14px;
  --feedback-bg:#eef4fb;
  --feedback-card:rgba(255,255,255,.84);
  --feedback-border:rgba(56,103,214,.20);
  --feedback-input:rgba(255,255,255,.88);
  --feedback-shadow:0 14px 34px rgba(15,23,42,.09);
  --feedback-accent:#ff9800;
}

html.dark body.page-feedback{
  --brand:#8cc8ff;
  --text:#e8eef7;
  --muted:#a9b4c4;
  --feedback-bg:#081018;
  --feedback-card:rgba(17,26,38,.88);
  --feedback-border:rgba(140,200,255,.20);
  --feedback-input:rgba(255,255,255,.07);
  --feedback-shadow:0 14px 34px rgba(0,0,0,.22);
  --feedback-accent:#ff9800;
}


body.page-feedback .feedback-panel{
  border:1px solid var(--feedback-border);
  border-radius:22px;
  background:var(--feedback-card);
  box-shadow:var(--feedback-shadow);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}


body.page-feedback .seitentitel{
  color:#ff9800 !important;
  border:0;
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  padding:4px 0 10px;
}


body.page-feedback input[type="text"],
body.page-feedback input[type="email"],
body.page-feedback textarea,
body.page-feedback select{
  border-radius:14px;
  border-color:var(--feedback-border);
  background:var(--feedback-input);
  color:var(--text);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
}

html.dark body.page-feedback input[type="text"],
html.dark body.page-feedback input[type="email"],
html.dark body.page-feedback textarea,
html.dark body.page-feedback select{
  color:var(--text);
}


body.page-feedback .chip,
body.page-feedback .stars label{
  border-radius:999px;
  border-color:var(--feedback-border);
  background:color-mix(in srgb, var(--feedback-card) 88%, var(--brand) 12%);
}


body.page-feedback input:focus,
body.page-feedback textarea:focus,
body.page-feedback select:focus{
  outline:2px solid color-mix(in srgb, var(--brand) 55%, transparent);
  outline-offset:1px;
  border-color:var(--brand);
}


body.page-feedback .required{
  color:#c62828;
}

html.dark body.page-feedback .required{
  color:#ff7b7b;
}


body.page-feedback .btn{
  border-radius:14px;
  background:linear-gradient(180deg,#5f91ff 0%,#3867d6 100%);
  box-shadow:0 8px 18px rgba(29,78,216,.20);
}


body.page-feedback .form-footer a{
  color:var(--brand);
}


@media (max-width:768px){
  body.page-feedback .resp-shell{
    padding:8px 6px 18px;
  }

  body.page-feedback .feedback-panel{
    padding:16px;
    border-radius:22px;
  }

  body.page-feedback input[type="text"],
  body.page-feedback input[type="email"],
  body.page-feedback textarea,
  body.page-feedback select,
  body.page-feedback .btn{
    border-radius:14px;
  }
}

/* =========================================================
   PAGE: IMPRESSUM
   Grundlage: impressum(3).php
========================================================= */

    body.page-impressum{
      --bg:#f5f7fb;
      --card:#ffffff;
      --text:#10203a;
      --muted:#64748b;
      --border:#dbe4f0;


      --shadow:0 10px 28px rgba(15,23,42,.08);
      --radius:24px;
    }

    html.dark body.page-impressum{

      --card:#111827;
      --text:#e6edf7;
      --muted:#9aa9bd;
      --border:#233044;
      --brand:#5ea8ff;
      --accent:#ffd27d;
      --shadow:none;
    }

    body.page-impressum{
      margin:0;

      color:var(--text);
      font-family:Quicksand, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;


    }

    body.page-impressum .page{
      width:min(1120px, 100% - 24px);
      margin:0 auto;
      padding:18px 0 44px;
    }

    body.page-impressum .hero{
      background:rgba(255,255,255,.72);
      border:1px solid rgba(255,255,255,.7);
      border-radius:30px;
      padding:clamp(22px, 4vw, 42px);
      margin:16px 0 20px;

      backdrop-filter:blur(10px);
    }

    html.dark body.page-impressum .hero{
      background:rgba(8,12,18,.74);
      border-color:rgba(255,255,255,.08);
    }

    body.page-impressum .hero h1{
      margin:0 0 10px;
      font-size:clamp(2rem, 5vw, 4rem);
      line-height:1.05;
      color:var(--brand);
    }

    body.page-impressum .hero p{
      margin:0;
      color:var(--muted);
      font-size:clamp(1rem, 2vw, 1.2rem);
      line-height:1.65;
    }

    body.page-impressum .layout{
      display:grid;
      grid-template-columns:1fr;
      gap:18px;
    }

    body.page-impressum .card{

      border:1px solid var(--border);
      border-radius:var(--radius);
      padding:clamp(18px, 3vw, 28px);

    }

    body.page-impressum .card h2, body.page-impressum .card h3{
      color:var(--brand);
      margin:0 0 12px;
      line-height:1.2;
    }

    body.page-impressum .card p{
      line-height:1.75;
      margin:0 0 14px;
    }

    body.page-impressum .card p:last-child{ margin-bottom:0; }

    body.page-impressum .contact-box{
      display:grid;
      gap:12px;
      margin-top:10px;
    }

    body.page-impressum .contact-row{
      display:grid;
      grid-template-columns:130px 1fr;
      gap:12px;
      padding:12px 0;
      border-bottom:1px solid var(--border);
    }

    body.page-impressum .contact-row:last-child{ border-bottom:0; }

    body.page-impressum .label{
      color:var(--muted);
      font-weight:700;
    }

    body.page-impressum a{

      font-weight:700;
      text-decoration:none;
    }

    body.page-impressum a:hover{ color:var(--accent); }

    body.page-impressum .note{
      background:rgba(255,152,0,.10);
      border:1px solid rgba(255,152,0,.28);
      border-radius:18px;
      padding:16px;
    }

    body.page-impressum .side-card{
      position:relative;
    }

    body.page-impressum .quicklinks{
      display:grid;
      gap:10px;
    }

    body.page-impressum .quicklinks a{
      display:block;
      padding:12px 14px;
      border:1px solid var(--border);
      border-radius:16px;
      background:rgba(56,103,214,.06);
    }

    @media (min-width:980px){
      body.page-impressum .layout{
        grid-template-columns:minmax(0, 1fr) 320px;
        align-items:start;
      }

      body.page-impressum .side-card{
        position:sticky;
        top:18px;
      }
    }

    @media (max-width:560px){
      body.page-impressum .contact-row{
        grid-template-columns:1fr;
        gap:4px;
      }
    }


/* =========================================================
   IMPRESSUM – Design-Angleichung
========================================================= */

body.page-impressum{
  --bg:#eef4fb;
  --card:rgba(255,255,255,.84);
  --text:#17212f;
  --muted:#5e6b7a;
  --border:rgba(56,103,214,.20);
  --brand:#3867d6;
  --accent:#ff9800;
  --shadow:0 14px 34px rgba(15,23,42,.09);
  --radius:22px;
  --impressum-inner-radius:14px;
}

html.dark body.page-impressum{
  --bg:#081018;
  --card:rgba(17,26,38,.88);
  --text:#e8eef7;
  --muted:#a9b4c4;
  --border:rgba(140,200,255,.20);
  --brand:#8cc8ff;
  --accent:#ff9800;
  --shadow:0 14px 34px rgba(0,0,0,.22);
}


body.page-impressum .hero{
  border-radius:22px;
  background:var(--card);
  border-color:var(--border);
  box-shadow:var(--shadow);
}


body.page-impressum .hero h1,
body.page-impressum .card h2,
body.page-impressum .card h3{
  color:#ff9800 !important;
  font-weight:800;
}


body.page-impressum .card{
  border-radius:22px;
  background:var(--card);
  border-color:var(--border);
  box-shadow:var(--shadow);
}


body.page-impressum .note{
  border-radius:var(--impressum-inner-radius);
}


body.page-impressum .quicklinks a{
  border-radius:var(--impressum-inner-radius);
  background:color-mix(in srgb, var(--card) 88%, var(--brand) 12%);
  border-color:var(--border);
}


body.page-impressum .contact-row{
  border-bottom-color:var(--border);
}


body.page-impressum a{
  color:var(--brand);
}

body.page-impressum a:hover{
  color:#ff9800;
}


@media (max-width:560px){
  body.page-impressum .page{
    width:calc(100% - 12px);
    padding-top:8px;
  }

  body.page-impressum .hero,
  body.page-impressum .card{
    border-radius:22px;
  }

  body.page-impressum .hero{
    padding:18px 16px;
  }

  body.page-impressum .card{
    padding:16px;
  }

  body.page-impressum .note,
  body.page-impressum .quicklinks a{
    border-radius:14px;
  }
}

/* =========================================================
   PAGE: DATENSCHUTZ / DSGVO
   Grundlage: DSGVO(4).php
   Lokaler A/B-Schalter: old = bisherige Standalone-Seite,
   new = zentrale eifel-wetter.css.
========================================================= */

    body.page-dsgvo{ color-scheme: light dark;
font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; line-height: 1.55;  }

    body.page-dsgvo main{ max-width: 900px; margin: 0 auto; padding: 24px 16px 64px; }
    body.page-dsgvo h1{ font-size: 1.8rem; margin: 0 0 0.5rem; }
    body.page-dsgvo h2{ margin-top: 2rem; font-size: 1.25rem; }
    body.page-dsgvo h3{ margin-top: 1.3rem; font-size: 1.05rem; }

    body.page-dsgvo hr{  border-top: 1px solid #ccc; opacity: 0.4; margin: 1.5rem 0; }
    body.page-dsgvo .meta{ opacity: 0.8; }
    body.page-dsgvo .box{ border: 1px solid #ccc; border-radius: 12px; padding: 12px 14px; opacity: 0.95; }


/* =========================================================
   DATENSCHUTZ / DSGVO – Design-Angleichung
========================================================= */

body.page-dsgvo{
  --dsgvo-bg:#eef4fb;
  --dsgvo-card:rgba(255,255,255,.84);
  --dsgvo-text:#17212f;
  --dsgvo-muted:#5e6b7a;
  --dsgvo-border:rgba(56,103,214,.20);
  --dsgvo-brand:#3867d6;
  --dsgvo-accent:#ff9800;
  --dsgvo-shadow:0 14px 34px rgba(15,23,42,.09);
  margin:0;
  min-height:100vh;
  color:var(--dsgvo-text);
  font-family:Quicksand, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  line-height:1.65;

}

html.dark body.page-dsgvo{
  --dsgvo-bg:#081018;
  --dsgvo-card:rgba(17,26,38,.88);
  --dsgvo-text:#e8eef7;
  --dsgvo-muted:#a9b4c4;
  --dsgvo-border:rgba(140,200,255,.20);
  --dsgvo-brand:#8cc8ff;
  --dsgvo-accent:#ff9800;
  --dsgvo-shadow:0 14px 34px rgba(0,0,0,.22);
}

body.page-dsgvo main{
  width:min(1000px, calc(100% - 24px));
  max-width:1000px;
  margin:18px auto 44px;
  padding:clamp(20px, 3vw, 34px);
  box-sizing:border-box;
  border:1px solid var(--dsgvo-border);
  border-radius:22px;
  background:var(--dsgvo-card);
  box-shadow:var(--dsgvo-shadow);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}


body.page-dsgvo main > h1,
body.page-dsgvo main > h2{
  color:#ff9800 !important;
  font-weight:800;
}


body.page-dsgvo main > h1{
  margin:0 0 4px;
  font-size:clamp(2rem, 5vw, 3.6rem);
  line-height:1.08;
}

body.page-dsgvo main > h2{
  margin:30px 0 12px;
  font-size:clamp(1.25rem, 2.7vw, 1.7rem);
  line-height:1.25;
}


body.page-dsgvo main h3{
  margin:20px 0 8px;
  color:var(--dsgvo-brand);
  font-size:1.08rem;
  line-height:1.3;
}

body.page-dsgvo .meta{
  margin:0 0 16px;
  color:var(--dsgvo-muted);
}

body.page-dsgvo p,
body.page-dsgvo li{
  color:var(--dsgvo-text);
  font-size:1rem;
}

body.page-dsgvo p{
  margin:0 0 14px;
}

body.page-dsgvo ul{
  padding-left:1.4rem;
}


body.page-dsgvo .box{
  padding:16px 18px;
  border:1px solid var(--dsgvo-border);
  border-radius:14px;
  background:color-mix(in srgb, var(--dsgvo-card) 88%, var(--dsgvo-brand) 12%);
  opacity:1;
}


body.page-dsgvo hr{
  border:0;
  border-top:1px solid var(--dsgvo-border);
  margin:24px 0;
  opacity:1;
}

body.page-dsgvo a{
  color:var(--dsgvo-brand);
  font-weight:700;
  text-decoration:none;
  word-break:break-word;
}

body.page-dsgvo a:hover{
  color:#ff9800;
}

body.page-dsgvo code{
  padding:2px 6px;
  border-radius:8px;
  background:color-mix(in srgb, var(--dsgvo-card) 80%, var(--dsgvo-brand) 20%);
}

@media (max-width:640px){
  body.page-dsgvo main{
    width:calc(100% - 12px);
    margin:8px auto 22px;
    padding:16px;
    border-radius:22px;
  }

  body.page-dsgvo .box{
    border-radius:14px;
    padding:14px;
  }

  body.page-dsgvo main > h2{
    margin-top:24px;
  }
}

/* =========================================================
   PAGE: API-KEY ANTRAG
   Grundlage: request-key(3).php
========================================================= */

body.page-request-key{

    font-family: Inter, Arial, sans-serif;
    color: #1b2430;

}

body.page-request-key .resp-shell{
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;

    display: flex;
    flex-direction: column;
    gap: 24px;
}

body.page-request-key .panel{
    border-radius: 24px;
    padding: 24px;
    margin-bottom: 24px;
    background: linear-gradient(180deg, #eef1f4 0%, #d8dde3 100%);
    box-shadow: 14px 14px 28px rgba(88,98,112,0.28), -10px -10px 24px rgba(255,255,255,0.8);
}

body.page-request-key label{
    display: block;
    margin-top: 14px;
    font-weight: 600;
}

body.page-request-key input, body.page-request-key textarea, body.page-request-key select{
    width: 100%;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid #cfd5dd;
    margin-top: 6px;
    font-family: Inter, sans-serif;
    box-sizing: border-box;
}

body.page-request-key textarea{
    min-height: 120px;
}

body.page-request-key button{
    margin-top: 20px;
    padding: 14px 20px;
    border-radius: 14px;
    border: none;
    font-family: Orbitron, Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: linear-gradient(180deg, #6d9cff 0%, #4d7fff 100%);
    color: white;
    cursor: pointer;
}

body.page-request-key .doc-hint{
    margin-bottom: 24px;
    padding: 20px;
    border-radius: 18px;
    background: rgba(255,255,255,0.55);
    border: 1px solid rgba(255,255,255,0.7);
}

body.page-request-key .button-link{
    display: inline-block;
    padding: 12px 18px;
    border-radius: 14px;
    text-decoration: none;
    font-family: Orbitron, Arial, sans-serif;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: linear-gradient(180deg, #6d9cff 0%, #4d7fff 100%);
    color: white;
}


body.page-request-key .hp-field{


    opacity: 0.01 !important;

}

body.page-request-key .turnstile-wrap{

    min-height: 65px;
}

@media (max-width: 768px){
    body.page-request-key .resp-shell{
        padding: 14px;
    }

    body.page-request-key .panel{
        padding: 18px;
    }

    body.page-request-key button, body.page-request-key .button-link{
        width: 100%;
        text-align: center;
        box-sizing: border-box;
    }
}


/* =========================================================
   API-KEY ANTRAG – Design-Angleichung
========================================================= */

body.page-request-key{
  --api-bg:#eef4fb;
  --api-text:#17212f;
  --api-muted:#5e6b7a;
  --api-card:rgba(255,255,255,.84);
  --api-border:rgba(56,103,214,.20);
  --api-brand:#3867d6;
  --api-accent:#ff9800;
  --api-input:rgba(255,255,255,.90);
  --api-shadow:0 14px 34px rgba(15,23,42,.09);
  margin:0;
  color:var(--api-text);
  font-family:Inter, Quicksand, Arial, sans-serif;

}

html.dark body.page-request-key{
  --api-bg:#081018;
  --api-text:#e8eef7;
  --api-muted:#a9b4c4;
  --api-card:rgba(17,26,38,.88);
  --api-border:rgba(140,200,255,.20);
  --api-brand:#8cc8ff;
  --api-accent:#ff9800;
  --api-input:rgba(255,255,255,.07);
  --api-shadow:0 14px 34px rgba(0,0,0,.22);
}

body.page-request-key .resp-shell{
  max-width:1100px;
  gap:18px;
}


body.page-request-key .panel{
  margin-bottom:0;
  padding:clamp(18px,3vw,28px);
  border:1px solid var(--api-border);
  border-radius:22px;
  background:var(--api-card);
  box-shadow:var(--api-shadow);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}


body.page-request-key .panel h1,
body.page-request-key .panel h2,
body.page-request-key .panel h3{
  color:#ff9800 !important;
  font-weight:800;
}


body.page-request-key .doc-hint{
  margin-bottom:20px;
  padding:16px 18px;
  border:1px solid var(--api-border);
  border-radius:14px;
  background:color-mix(in srgb, var(--api-card) 88%, var(--api-brand) 12%);
}


body.page-request-key input,
body.page-request-key textarea,
body.page-request-key select{
  border-radius:14px;
  border-color:var(--api-border);
  background:var(--api-input);
  color:var(--api-text);
}

html.dark body.page-request-key input,
html.dark body.page-request-key textarea,
html.dark body.page-request-key select{
  color:var(--api-text);
}

body.page-request-key input:focus,
body.page-request-key textarea:focus,
body.page-request-key select:focus{
  outline:2px solid color-mix(in srgb, var(--api-brand) 55%, transparent);
  outline-offset:1px;
  border-color:var(--api-brand);
}


body.page-request-key code{
  padding:3px 7px;
  border-radius:8px;
  background:color-mix(in srgb, var(--api-card) 80%, var(--api-brand) 20%);
}


body.page-request-key button,
body.page-request-key .button-link{
  border-radius:14px;
  background:linear-gradient(180deg,#5f91ff 0%,#3867d6 100%);
  box-shadow:0 8px 18px rgba(29,78,216,.20);
  color:#fff;
}


body.page-request-key .turnstile-wrap{
  margin-top:20px;
}


body.page-request-key .hp-field{
  position:absolute !important;
  left:-10000px !important;
  top:auto !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
  opacity:.01 !important;
  pointer-events:none !important;
}

@media (max-width:768px){
  body.page-request-key .resp-shell{
    padding:8px 6px 20px;
  }

  body.page-request-key .panel{
    padding:16px;
    border-radius:22px;
  }

  body.page-request-key .doc-hint,
  body.page-request-key input,
  body.page-request-key textarea,
  body.page-request-key select,
  body.page-request-key button,
  body.page-request-key .button-link{
    border-radius:14px;
  }
}

/* =========================================================
   PAGE: API-HILFE
   Grundlage: help(1).php
========================================================= */

body.page-api-help{

    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    color: #1b2430;

}

body.page-api-help .resp-shell{
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

body.page-api-help .resp-main{
    width: 100%;
}

body.page-api-help .panel{
    border-radius: 24px;
    background: linear-gradient(180deg, #eef1f4 0%, #d8dde3 100%);
    box-shadow: 14px 14px 28px rgba(88,98,112,0.28), -10px -10px 24px rgba(255,255,255,0.8);
    padding: 24px;
    margin-bottom: 20px;
}

body.page-api-help .resp-main > h3, body.page-api-help .resp-main > p, body.page-api-help .resp-main > ol, body.page-api-help .resp-main > ul, body.page-api-help .resp-main > pre{
    max-width: 100%;
}

body.page-api-help h1{
    margin: 0 0 10px;
    color: #1e40af;
    font-size: clamp(1.9rem, 4vw, 3rem);
    line-height: 1.1;
}

body.page-api-help .api-lead{
    margin: 0;
    color: #475569;
    font-size: 1.08rem;
    line-height: 1.6;
}

body.page-api-help .api-security-note{
    margin-top: 14px;
    padding: 12px 14px;

    background: #fff7ed;
    border: 1px solid #fdba74;
    color: #7c2d12;
    line-height: 1.55;
}

body.page-api-help h2{
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    color: #1e40af;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 1rem;
}

body.page-api-help h3{
    color: #1d4ed8;
}

body.page-api-help code, body.page-api-help pre{
    font-family: Consolas, monospace;
}

body.page-api-help pre{
    background: rgba(255,255,255,0.65);
    border: 1px solid rgba(255,255,255,0.8);

    padding: 14px;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

body.page-api-help ul, body.page-api-help ol{
    line-height: 1.7;
}

body.page-api-help .badge{
    display: inline-block;
    padding: 4px 8px;

    background: #dbeafe;
    color: #1e40af;
    font-size: 0.8rem;
    font-weight: 600;
}

body.page-api-help .button, body.page-api-help .copy-btn{
    display: inline-block;
    margin-top: 8px;
    padding: 11px 15px;
    border-radius: 14px;
    border: 0;
    text-decoration: none;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #effcff;
    background: linear-gradient(180deg, #6d9cff 0%, #4d7fff 100%);
    cursor: pointer;
}

body.page-api-help .mail-button{
    display:inline-block;
    padding:10px 16px;
    border-radius:10px;
    background:#4d7fff;
    color:#fff;
    text-decoration:none;
    font-family:Arial,sans-serif;
}

@media (max-width: 768px){
    body.page-api-help .resp-shell{
        padding: 14px;
    }

    body.page-api-help .panel{
        padding: 18px;
        border-radius: 18px;
    }

    body.page-api-help .button, body.page-api-help .copy-btn, body.page-api-help .mail-button{
        width: 100%;
        text-align: center;
        box-sizing: border-box;
    }
}


/* =========================================================
   API-HILFE / DOKUMENTATION – Design-Angleichung
========================================================= */

body.page-api-help{
  --apihelp-bg:#eef4fb;
  --apihelp-text:#17212f;
  --apihelp-muted:#5e6b7a;
  --apihelp-card:rgba(255,255,255,.84);
  --apihelp-border:rgba(56,103,214,.20);
  --apihelp-brand:#3867d6;
  --apihelp-accent:#ff9800;
  --apihelp-code:rgba(255,255,255,.72);
  --apihelp-shadow:0 14px 34px rgba(15,23,42,.09);
  margin:0;
  color:var(--apihelp-text);
  font-family:Quicksand, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

}

html.dark body.page-api-help{
  --apihelp-bg:#081018;
  --apihelp-text:#e8eef7;
  --apihelp-muted:#a9b4c4;
  --apihelp-card:rgba(17,26,38,.88);
  --apihelp-border:rgba(140,200,255,.20);
  --apihelp-brand:#8cc8ff;
  --apihelp-accent:#ff9800;
  --apihelp-code:rgba(255,255,255,.055);
  --apihelp-shadow:0 14px 34px rgba(0,0,0,.22);
}

body.page-api-help .resp-shell{
  max-width:1100px;
  padding-top:18px;
}


body.page-api-help .panel{
  margin-bottom:18px;
  padding:clamp(18px,3vw,28px);
  border:1px solid var(--apihelp-border);
  border-radius:22px;
  background:var(--apihelp-card);
  box-shadow:var(--apihelp-shadow);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}


body.page-api-help .panel h1,
body.page-api-help .panel h2{
  color:#ff9800 !important;
  font-weight:800;
}


body.page-api-help h3{
  color:var(--apihelp-brand);
  font-weight:800;
}


body.page-api-help .api-lead{
  color:var(--apihelp-muted);
}


body.page-api-help .api-security-note{
  border-radius:14px;
  background:rgba(255,152,0,.10);
  border-color:rgba(255,152,0,.30);
  color:color-mix(in srgb, #ff9800 70%, var(--apihelp-text) 30%);
}

html.dark body.page-api-help .api-security-note{
  background:rgba(255,152,0,.08);
  border-color:rgba(255,152,0,.25);
  color:#ffd09a;
}


body.page-api-help pre{
  border:1px solid var(--apihelp-border);
  border-radius:14px;
  background:var(--apihelp-code);
  color:var(--apihelp-text);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}

body.page-api-help code{
  padding:2px 6px;
  border-radius:8px;
  background:color-mix(in srgb, var(--apihelp-card) 78%, var(--apihelp-brand) 22%);
  color:var(--apihelp-text);
}


body.page-api-help pre code{
  padding:0;
  border-radius:0;
  background:transparent;
}


body.page-api-help .badge{
  border-radius:999px;
  background:color-mix(in srgb, var(--apihelp-card) 75%, var(--apihelp-brand) 25%);
  color:var(--apihelp-brand);
  border:1px solid var(--apihelp-border);
}


body.page-api-help .button,
body.page-api-help .copy-btn,
body.page-api-help .mail-button{
  border-radius:14px;
  color:#fff;
  background:linear-gradient(180deg,#5f91ff 0%,#3867d6 100%);
  box-shadow:0 8px 18px rgba(29,78,216,.18);
}


body.page-api-help .resp-main > h3,
body.page-api-help .resp-main > p,
body.page-api-help .resp-main > ol,
body.page-api-help .resp-main > ul,
body.page-api-help .resp-main > pre{
  width:calc(100% - 24px);
  margin-left:auto;
  margin-right:auto;
}

@media (max-width:768px){
  body.page-api-help .resp-shell{
    padding:8px 6px 20px;
  }

  body.page-api-help .panel{
    padding:16px;
    border-radius:22px;
  }

  body.page-api-help pre,
  body.page-api-help .api-security-note,
  body.page-api-help .button,
  body.page-api-help .copy-btn,
  body.page-api-help .mail-button{
    border-radius:14px;
  }

  body.page-api-help .resp-main > h3,
  body.page-api-help .resp-main > p,
  body.page-api-help .resp-main > ol,
  body.page-api-help .resp-main > ul,
  body.page-api-help .resp-main > pre{
    width:calc(100% - 8px);
  }
}

/* =========================================================
   RADAR – Überschriften verbindlich echtes Orange
   Fix 2026-09-03
========================================================= */


/* =========================================================
   SLIDESHOW 24H – Überschriften echtes Orange
   Fix 2026-09-03
========================================================= */


/* =========================================================
   SLIDESHOW 1H – finales Theme + Orange
   Fix 2026-09-03
========================================================= */


/* =========================================================
   EINHEITLICHER SEITENHINTERGRUND
   Referenz: Station / Technik / Glossar
   Stand: 2026-09-04

   Ziel:
   - überall /fotos/wolken3.webp
   - volle Seitenbreite
   - 460 px hoher Bildbereich
   - weicher Übergang ohne sichtbare Abrisskante
   - identische Geometrie in Light und Dark
   - individuelle Seiten-Grundfarbe bleibt erhalten
========================================================= */


body:has(.layout-grid),
body.page-warnungen,
body.page-kamera,
body.page-ortswetter,
body.page-radar,
body.page-slideshow,
body.page-slideshow-tag,
body.page-push,
body.page-impressum{
  --ew-page-background-color:var(--bg);
}


body.page-messwerte{
  --ew-page-background-color:var(--mw-bg);
}

body.page-dashboard{
  --ew-page-background-color:var(--dash-bg);
}

body.page-vorhersage{
  --ew-page-background-color:var(--fc-bg);
}

body.page-rekordwerte{
  --ew-page-background-color:var(--rw-bg);
}

body.page-feedback{
  --ew-page-background-color:var(--feedback-bg);
}

body.page-dsgvo{
  --ew-page-background-color:var(--dsgvo-bg);
}

body.page-request-key{
  --ew-page-background-color:var(--api-bg);
}

body.page-api-help{
  --ew-page-background-color:var(--apihelp-bg);
}


body:has(.layout-grid),
body.page-messwerte,
body.page-dashboard,
body.page-vorhersage,
body.page-warnungen,
body.page-kamera,
body.page-rekordwerte,
body.page-ortswetter,
body.page-radar,
body.page-slideshow,
body.page-slideshow-tag,
body.page-push,
body.page-feedback,
body.page-impressum,
body.page-dsgvo,
body.page-request-key,
body.page-api-help{
  min-height:100vh;

  background:
    linear-gradient(
      to bottom,
      color-mix(in srgb, var(--ew-page-background-color) 6%, transparent) 0,
      color-mix(in srgb, var(--ew-page-background-color) 22%, transparent) 120px,
      color-mix(in srgb, var(--ew-page-background-color) 55%, transparent) 240px,
      color-mix(in srgb, var(--ew-page-background-color) 84%, transparent) 360px,
      var(--ew-page-background-color) 460px
    ),
    url("/fotos/wolken3.webp") top center / 100% 460px no-repeat,
    var(--ew-page-background-color) !important;

  background-attachment:scroll !important;
}


/* =========================================================
   HEADER – Farbverlauf wiederhergestellt
   Stand: 2026-09-04
========================================================= */


:root,
html.dark{
  --ew-header-bar-start:#45aaf2;
  --ew-header-bar-end:#3867d6;
}

.trapezoid,
.resp-header .trapezoid,
html.dark .trapezoid,
html.dark .resp-header .trapezoid{
  background:
    linear-gradient(
      135deg,
      var(--ew-header-bar-start) 0%,
      var(--ew-header-bar-end) 100%
    ) !important;

  color:#f7f9ff !important;
}

/* =========================================================
   ZENTRALE ORANGE ÜBERSCHRIFTEN – konsolidiert
========================================================= */
body.page-station h1.page-title,
body.page-station .station-container h1.page-title,
body.page-station .station-text h2,
body.page-station .station-row .station-text h2,
html.dark body.page-station h1.page-title,
html.dark body.page-station .station-container h1.page-title,
html.dark body.page-station .station-text h2,
html.dark body.page-station .station-row .station-text h2,
body.page-glossar h1.page-title,
body.page-glossar .glossary-container h1.page-title,
body.page-glossar .intro-card h2,
body.page-glossar .letter-section .letter-title,
body.page-glossar .term-card h3,
body.page-glossar .term-card .term-title,
html.dark body.page-glossar h1.page-title,
html.dark body.page-glossar .glossary-container h1.page-title,
html.dark body.page-glossar .intro-card h2,
html.dark body.page-glossar .letter-section .letter-title,
html.dark body.page-glossar .term-card h3,
html.dark body.page-glossar .term-card .term-title,
.station-container > h1.page-title,
.station-row .station-text h2,
.glossary-container > h1.page-title,
.glossary-container .intro-card h2,
.glossary-container .letter-section .letter-title,
.glossary-container .term-card h3,
.content.technik > h1.page-title,
.content.technik > h2.section-title,
.content.technik .tech-box > h2.section-title,
.content.technik h3.learn-title,
.resp-page > .hero h1,
.resp-page .card > h2,
.resp-main .feedback-panel > h1.seitentitel,
main.page > .hero h1,
main.page .card > h2,
main.page .card > h3,
main > h1:first-child,
main > hr + h2,
.resp-shell > .panel h2,
.resp-shell .doc-hint h2,
body.page-api-help .resp-main > h2,
.resp-main .panel > h1,
.resp-main .panel > h2,
body.page-radar .page h1,
body.page-radar .page h2,
body.page-radar .page h3,
.page-radar .page h1,
.page-radar .page h2,
.page-radar .page h3,
#radarFullscreenArea h2,
.radar-panels h2,
.radar-workspace h2,
.radar-workspace h3,
.nowcast-card h2,
.info-grid h3,
.side > .card > h2,
.hero > h1,
body.page-slideshow-tag .page-hero h1,
body.page-slideshow-tag .info-card h2,
body.page-slideshow-tag .slideshow-card h1,
body.page-slideshow-tag .slideshow-card h2,
body.page-slideshow-tag .slideshow-card h3,
.resp-page > .page-hero h1,
.resp-page .info-card h2,
body.page-slideshow .page-hero h1,
body.page-slideshow .info-card h2,
body.page-slideshow .camera-card h1,
body.page-slideshow .camera-card h2,
body.page-slideshow .camera-card h3,
body.page-slideshow .info-card h1,
body.page-slideshow .info-card h3,
.resp-page .info-card > h2{
  color:#ff9800 !important;
}

/* =========================================================
   ORTSSEITEN – Darkmode Feinschliff 2026-09-06
   1. Windrose optisch im runden Ausschnitt zentrieren
   2. Kontrast im hellen oberen Wolkenbereich verbessern
   Nur Darkmode, Lightmode bleibt unverändert.
========================================================= */

/* Windrose im Darkmode exakt mit derselben Geometrie wie im Lightmode.
   Damit werden ältere Darkmode-Sondergrößen für die Rose überschrieben. */
html.dark body.page-ortswetter .quickinfo-windrose{
  width:150px !important;
  height:150px !important;
  padding:0 !important;
  display:grid !important;
  place-items:center !important;
  overflow:hidden;
}

html.dark body.page-ortswetter .quickinfo-windrose .rose{
  position:static !important;
  left:auto !important;
  top:auto !important;
  width:150px !important;
  height:150px !important;
  margin:0 !important;
  transform:none !important;
  object-fit:contain !important;
  justify-self:center !important;
  align-self:center !important;
}

/* Im Darkmode das helle Wolkenfoto am Seitenanfang etwas abdunkeln,
   ohne die Struktur des Hintergrundbildes zu verlieren. */
html.dark body.page-ortswetter{
  background:
    linear-gradient(
      to bottom,
      rgba(5,12,22,.58) 0,
      rgba(5,12,22,.50) 120px,
      rgba(5,12,22,.62) 240px,
      rgba(5,12,22,.84) 360px,
      var(--ew-page-background-color) 460px
    ),
    url("/fotos/wolken3.webp") top center / 100% 460px no-repeat,
    var(--ew-page-background-color) !important;
  background-attachment:scroll !important;
}

/* Breadcrumb und Einleitung bleiben transparent, bekommen aber deutlich
   mehr Zeichnung gegen wechselnde helle Bildpartien. */
html.dark body.page-ortswetter .breadcrumb,
html.dark body.page-ortswetter .breadcrumb a,
html.dark body.page-ortswetter .priority-weather-meta,
html.dark body.page-ortswetter .priority-weather-kicker{
  text-shadow:
    0 1px 2px rgba(0,0,0,.95),
    0 0 8px rgba(0,0,0,.72);
}

html.dark body.page-ortswetter .breadcrumb{
  color:#dce8f7;
}

html.dark body.page-ortswetter .breadcrumb a{
  color:#8cc8ff !important;
}

html.dark body.page-ortswetter .priority-weather-meta{
  color:#d5e0ee;
}

html.dark body.page-ortswetter .priority-weather-kicker{
  color:#8cc8ff;
}

/* =========================================================
   ORTSSEITEN – Darkmode Schnellinfo Feinschliff 2026-09-06
   Nur Darkmode. Lightmode bleibt unverändert.
========================================================= */

/* Schnellinfo-Karte: Überschrift bekommt etwas mehr Luft und optische Ruhe. */
html.dark body.page-ortswetter .quickinfo-box{
  padding:20px 18px 18px !important;
}

html.dark body.page-ortswetter .quickinfo-title-row{
  align-items:flex-start;
  margin-bottom:16px;
}

html.dark body.page-ortswetter .quickinfo-title{
  line-height:1.16;
  color:#f4f8ff !important;
}

html.dark body.page-ortswetter .quickinfo-source-badge{
  margin-top:2px;
  background:rgba(8,18,31,.74) !important;
  border-color:rgba(140,200,255,.24) !important;
  color:#b9c8da !important;
}

/* Messwert-Karten deutlicher vom dunklen Kartenhintergrund absetzen. */
html.dark body.page-ortswetter .quick-value{
  background:linear-gradient(145deg, rgba(20,34,51,.96), rgba(12,24,38,.94)) !important;
  border-color:rgba(140,200,255,.22) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 5px 14px rgba(0,0,0,.12) !important;
}

html.dark body.page-ortswetter .quick-value span,
html.dark body.page-ortswetter .quick-extra{
  color:#aebdd0 !important;
}

html.dark body.page-ortswetter .quick-value strong{
  color:#f1f6ff !important;
}

html.dark body.page-ortswetter .quick-ico{
  background:rgba(140,200,255,.09) !important;
  border:1px solid rgba(140,200,255,.08);
}

/* Weißen Windrosen-Kreis dezent in die dunkle Karte integrieren.
   Geometrie bleibt exakt wie im Lightmode. */
html.dark body.page-ortswetter .quickinfo-windrose{
  border-color:rgba(140,200,255,.30) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.025),
    0 8px 24px rgba(0,0,0,.22) !important;
}

/* =========================================================
   ORTSSEITEN – Darkmode: einheitliche gradientierte Innenkarten
   Nur Darkmode, Lightmode bleibt unverändert.
   ========================================================= */
html.dark body.page-ortswetter .quick-value,
html.dark body.page-ortswetter .outdoor-link,
html.dark body.page-ortswetter .outdoor-wandern,
html.dark body.page-ortswetter .outdoor-grillen,
html.dark body.page-ortswetter .outdoor-fahrrad,
html.dark body.page-ortswetter .outdoor-baden,
html.dark body.page-ortswetter .outdoor-outdoor,
html.dark body.page-ortswetter .nearby-link,
html.dark body.page-ortswetter .forecast-item,
html.dark body.page-ortswetter .metric-card,
html.dark body.page-ortswetter .info-tile{
  background: linear-gradient(
    135deg,
    rgba(20,39,61,.96) 0%,
    rgba(17,28,45,.94) 100%
  ) !important;
  border-color: rgba(69,170,242,.28) !important;
  box-shadow: none !important;
}

html.dark body.page-ortswetter .quick-value:hover,
html.dark body.page-ortswetter .outdoor-link:hover,
html.dark body.page-ortswetter .outdoor-wandern:hover,
html.dark body.page-ortswetter .outdoor-grillen:hover,
html.dark body.page-ortswetter .outdoor-fahrrad:hover,
html.dark body.page-ortswetter .outdoor-baden:hover,
html.dark body.page-ortswetter .outdoor-outdoor:hover,
html.dark body.page-ortswetter .nearby-link:hover,
html.dark body.page-ortswetter .forecast-item:hover,
html.dark body.page-ortswetter .metric-card:hover,
html.dark body.page-ortswetter .info-tile:hover{
  border-color: rgba(69,170,242,.42) !important;
}

/* =========================================================
   ORTSSEITEN – Darkmode: Gradient-Stil auf reale Innenkarten erweitern
   2026-09-06
   Lightmode bleibt unverändert.
   ========================================================= */
html.dark body.page-ortswetter .weather-item,
html.dark body.page-ortswetter .radar-nowcast-value,
html.dark body.page-ortswetter .three-hour-item,
html.dark body.page-ortswetter .faq-item,
html.dark body.page-ortswetter .context-highlight,
html.dark body.page-ortswetter .context-note,
html.dark body.page-ortswetter .context-more{
  background: linear-gradient(
    135deg,
    rgba(20,39,61,.96) 0%,
    rgba(17,28,45,.94) 100%
  ) !important;
  border-color: rgba(69,170,242,.28) !important;
  box-shadow: none !important;
}

/* Interaktive Innenkarten nur sehr dezent hervorheben. */
html.dark body.page-ortswetter .faq-item:hover,
html.dark body.page-ortswetter .context-more:hover{
  border-color: rgba(69,170,242,.42) !important;
}

/* =========================================================
   ORTSSEITEN – Darkmode v5: 3-Stunden-Vorhersage & Messwerte
   Aufbau: dunkle Außenkarte -> gradientierte Innenkarten
   Lightmode bleibt unverändert.
   ========================================================= */

/* 3-Stunden-Vorhersage: Außenkarte ruhig halten, Innenkarten klar staffeln. */
html.dark body.page-ortswetter .three-hour-forecast{
  background:rgba(17,26,38,.88) !important;
  border-color:rgba(140,200,255,.20) !important;
}

html.dark body.page-ortswetter .three-hour-item{
  border:1px solid rgba(69,170,242,.28) !important;
  background:linear-gradient(
    135deg,
    rgba(20,39,61,.96) 0%,
    rgba(17,28,45,.94) 100%
  ) !important;
  box-shadow:none !important;
}

html.dark body.page-ortswetter .three-hour-time{
  color:#b8c7da !important;
}

html.dark body.page-ortswetter .three-hour-main strong{
  color:#f2f7ff !important;
}

html.dark body.page-ortswetter .three-hour-meta,
html.dark body.page-ortswetter .three-hour-foot,
html.dark body.page-ortswetter .three-hour-head > small,
html.dark body.page-ortswetter .three-hour-kicker{
  color:#a9b8ca !important;
}

/* Kompakte Messwerte: Außenkarte wie bisher, Messwertkacheln im gleichen Gradient-Stil. */
html.dark body.page-ortswetter .compact-measurements{
  background:rgba(17,26,38,.88) !important;
  border-color:rgba(140,200,255,.20) !important;
}

html.dark body.page-ortswetter .compact-measurements > summary{
  color:#e8eef7 !important;
}

html.dark body.page-ortswetter .compact-measurements > summary small{
  color:#a9b8ca !important;
}

html.dark body.page-ortswetter .compact-measurements-grid .weather-item{
  border:1px solid rgba(69,170,242,.28) !important;
  background:linear-gradient(
    135deg,
    rgba(20,39,61,.96) 0%,
    rgba(17,28,45,.94) 100%
  ) !important;
  box-shadow:none !important;
}

/* Sehr dezenter Hover nur bei Geräten mit Maus/Trackpad. */
@media (hover:hover){
  html.dark body.page-ortswetter .three-hour-item:hover,
  html.dark body.page-ortswetter .compact-measurements-grid .weather-item:hover{
    border-color:rgba(69,170,242,.42) !important;
  }
}

/* =========================================================
   ORTSSEITEN – Darkmode v6: FAQ- und Infobereiche
   Gleicher gestaffelter Kartenstil wie die bestätigten Outdoor-Karten.
   Lightmode bleibt unverändert.
   ========================================================= */

/* FAQ: Außenkarte ruhig, einzelne Fragen klar als Innenkarten absetzen. */
html.dark body.page-ortswetter .faq-modern{
  background:rgba(17,26,38,.88) !important;
  border-color:rgba(140,200,255,.20) !important;
}

html.dark body.page-ortswetter .faq-item,
html.dark body.page-ortswetter .faq-info-card,
html.dark body.page-ortswetter .faq-fact{
  background:linear-gradient(
    135deg,
    rgba(20,39,61,.96) 0%,
    rgba(17,28,45,.94) 100%
  ) !important;
  border:1px solid rgba(69,170,242,.28) !important;
  box-shadow:none !important;
}

html.dark body.page-ortswetter .faq-summary,
html.dark body.page-ortswetter .faq-item summary{
  color:#edf4ff !important;
}

html.dark body.page-ortswetter .faq-info-card span,
html.dark body.page-ortswetter .faq-fact small,
html.dark body.page-ortswetter .faq-item p,
html.dark body.page-ortswetter .faq-item .faq-answer{
  color:#a9b8ca !important;
}

html.dark body.page-ortswetter .faq-item[open]{
  border-color:rgba(69,170,242,.42) !important;
  background:linear-gradient(
    135deg,
    rgba(22,43,67,.98) 0%,
    rgba(17,30,47,.96) 100%
  ) !important;
}

/* Lokale Info-/Kontextkacheln ebenfalls als klar erkennbare Innenkarten. */
html.dark body.page-ortswetter .local-seo-fact,
html.dark body.page-ortswetter .local-seo-note,
html.dark body.page-ortswetter .context-highlight,
html.dark body.page-ortswetter .context-note,
html.dark body.page-ortswetter .context-more,
html.dark body.page-ortswetter .weather-metric-card,
html.dark body.page-ortswetter .weather-story-bottom{
  background:linear-gradient(
    135deg,
    rgba(20,39,61,.96) 0%,
    rgba(17,28,45,.94) 100%
  ) !important;
  border:1px solid rgba(69,170,242,.28) !important;
  box-shadow:none !important;
}

html.dark body.page-ortswetter .context-more summary,
html.dark body.page-ortswetter .context-more-title{
  color:#edf4ff !important;
}

html.dark body.page-ortswetter .context-more-content,
html.dark body.page-ortswetter .local-seo-note span,
html.dark body.page-ortswetter .context-note span,
html.dark body.page-ortswetter .context-highlight small,
html.dark body.page-ortswetter .local-seo-fact small{
  color:#a9b8ca !important;
}

/* Icons behalten die blaue Akzentwirkung, ohne zu hell zu werden. */
html.dark body.page-ortswetter .context-highlight-icon,
html.dark body.page-ortswetter .local-seo-fact-icon,
html.dark body.page-ortswetter .weather-metric-icon{
  background:linear-gradient(135deg, rgba(69,170,242,.18), rgba(56,103,214,.16)) !important;
  color:#9fd3ff !important;
  border:1px solid rgba(69,170,242,.18);
}

@media (hover:hover){
  html.dark body.page-ortswetter .faq-item:hover,
  html.dark body.page-ortswetter .local-seo-fact:hover,
  html.dark body.page-ortswetter .context-highlight:hover,
  html.dark body.page-ortswetter .context-more:hover,
  html.dark body.page-ortswetter .weather-metric-card:hover{
    border-color:rgba(69,170,242,.42) !important;
  }
}

/* =========================================================
   ORTSSEITEN – Darkmode v7: letzte optische Ausreißer
   Datenquellen, Zusammenfassungen, MOSMIX-Details und Warnbox.
   Lightmode bleibt unverändert.
   ========================================================= */

/* Helle Warnbox im Darkmode in das bestehende Kartenbild integrieren. */
html.dark body.page-ortswetter .start-warnbox{
  background:linear-gradient(
    135deg,
    rgba(62,37,24,.96) 0%,
    rgba(43,30,27,.94) 100%
  ) !important;
  border-color:rgba(255,152,0,.32) !important;
  color:#ffd7ad !important;
  box-shadow:none !important;
}

/* Datenquellen und lokale Zusammenfassungen wie die bestätigten Innenkarten. */
html.dark body.page-ortswetter .local-data-source,
html.dark body.page-ortswetter .local-summary-line,
html.dark body.page-ortswetter .weather-source-row,
html.dark body.page-ortswetter .mosmix-value,
html.dark body.page-ortswetter .mosmix-details-body > div{
  background:linear-gradient(
    135deg,
    rgba(20,39,61,.96) 0%,
    rgba(17,28,45,.94) 100%
  ) !important;
  border-color:rgba(69,170,242,.28) !important;
  box-shadow:none !important;
}

/* Transparente Quellenzeile bekommt im Darkmode ebenfalls eine ruhige Fläche. */
html.dark body.page-ortswetter .local-source-line{
  background:rgba(17,28,45,.78) !important;
  border-color:rgba(69,170,242,.22) !important;
  color:#a9b8ca !important;
}

/* Aufklappbarer MOSMIX-Bereich: Außenkarte ruhig, Innenwerte gestaffelt. */
html.dark body.page-ortswetter .mosmix-details{
  background:rgba(17,26,38,.88) !important;
  border-color:rgba(140,200,255,.20) !important;
}

html.dark body.page-ortswetter .mosmix-details summary{
  color:#edf4ff !important;
}

html.dark body.page-ortswetter .mosmix-details summary small,
html.dark body.page-ortswetter .mosmix-value span,
html.dark body.page-ortswetter .weather-source-kicker,
html.dark body.page-ortswetter .weather-source-note,
html.dark body.page-ortswetter .local-data-source small,
html.dark body.page-ortswetter .local-summary-copy span{
  color:#a9b8ca !important;
}

html.dark body.page-ortswetter .mosmix-value strong,
html.dark body.page-ortswetter .weather-source-title,
html.dark body.page-ortswetter .local-data-source strong,
html.dark body.page-ortswetter .local-summary-copy strong{
  color:#edf4ff !important;
}

/* Die farbigen linken Statuslinien bleiben als funktionale Akzente erhalten. */
html.dark body.page-ortswetter .local-summary-line{
  border-left-color:var(--brand) !important;
}
html.dark body.page-ortswetter .weather-source-row.live-row{
  border-left-color:var(--success) !important;
}
html.dark body.page-ortswetter .weather-source-row.radar-row{
  border-left-color:var(--brand) !important;
}
html.dark body.page-ortswetter .weather-source-row.forecast-row{
  border-left-color:#8f7ff0 !important;
}

@media (hover:hover){
  html.dark body.page-ortswetter .local-data-source:hover,
  html.dark body.page-ortswetter .local-summary-line:hover,
  html.dark body.page-ortswetter .weather-source-row:hover,
  html.dark body.page-ortswetter .mosmix-value:hover{
    border-color:rgba(69,170,242,.42) !important;
  }
}

/* =========================================================
   STARTSEITE – Feature: lokale Live-Unwettererkennung
========================================================= */
.layout-grid .unwetter-feature-card{
  grid-area: unwetter_feature;
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:72px minmax(0,1fr);
  gap:18px;
  align-items:start;
  padding:22px 24px;
  border:1px solid rgba(56,103,214,.24);
  border-left:5px solid #ff9800;
  border-radius:var(--home-card-radius);
  background:
    linear-gradient(135deg, rgba(255,255,255,.78) 0%, rgba(235,246,255,.68) 100%);
  box-shadow:var(--home-card-shadow);
  backdrop-filter:blur(8px);
}
.layout-grid .unwetter-feature-card::after{
  content:"";
  position:absolute;
  right:-70px;
  top:-90px;
  width:230px;
  height:230px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,152,0,.13), transparent 68%);
  pointer-events:none;
}
.layout-grid .unwetter-feature-icon{
  width:64px;
  height:64px;
  display:grid;
  place-items:center;
  border-radius:18px;
  background:linear-gradient(135deg, rgba(255,152,0,.20), rgba(56,103,214,.14));
  border:1px solid rgba(255,152,0,.30);
  font-size:2rem;
}
.layout-grid .unwetter-feature-copy{min-width:0;position:relative;z-index:1}
.layout-grid .unwetter-feature-kicker{
  margin:0 0 5px;
  color:#3867d6;
  font-size:.78rem;
  font-weight:900;
  letter-spacing:.045em;
  text-transform:uppercase;
}
.layout-grid .unwetter-feature-card h2{
  margin:0 0 8px;
  color:#ff9800 !important;
  font-size:clamp(1.35rem,2.4vw,1.9rem);
  line-height:1.15;
}
.layout-grid .unwetter-feature-card p{
  margin:0;
  color:var(--text);
  line-height:1.55;
  font-weight:650;
}
.layout-grid .unwetter-feature-points{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:14px;
}
.layout-grid .unwetter-feature-points span{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border:1px solid rgba(56,103,214,.20);
  border-radius:999px;
  background:rgba(255,255,255,.55);
  color:var(--text);
  font-size:.82rem;
  font-weight:850;
}
.layout-grid .unwetter-feature-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-top:14px;
}
.layout-grid .unwetter-feature-note{
  color:var(--muted);
  font-size:.79rem;
  font-weight:750;
}
.layout-grid .unwetter-feature-link{
  display:inline-flex;
  align-items:center;
  padding:8px 12px;
  border-radius:999px;
  background:linear-gradient(135deg,#3867d6,#45aaf2);
  color:#fff !important;
  text-decoration:none;
  font-size:.84rem;
  font-weight:900;
  box-shadow:0 7px 18px rgba(56,103,214,.20);
}
.layout-grid .unwetter-feature-link:hover{
  color:#fff !important;
  transform:translateY(-1px);
}

html.dark .layout-grid .unwetter-feature-card{
  background:linear-gradient(135deg, rgba(20,39,61,.96) 0%, rgba(17,28,45,.94) 100%);
  border-color:rgba(69,170,242,.28);
  border-left-color:#ff9800;
}
html.dark .layout-grid .unwetter-feature-kicker{color:#8bc8ff}
html.dark .layout-grid .unwetter-feature-points span{
  background:rgba(255,255,255,.055);
  border-color:rgba(69,170,242,.24);
}
html.dark .layout-grid .unwetter-feature-icon{
  background:linear-gradient(135deg, rgba(255,152,0,.18), rgba(69,170,242,.12));
  border-color:rgba(255,152,0,.28);
}

/* Feature-Karte in die bestehende Startseiten-Geometrie einordnen */
.layout-grid{
  grid-template-areas:
    "hero quickinfo"
    "feeling quickinfo"
    "outside live"
    "radar forecast"
    "outdoor_links schnellzugriff"
    "warnung schnellzugriff"
    "unwetter_feature schnellzugriff"
    "intro schnellzugriff"
    "info_aktualitaet schnellzugriff"
    "in_der_naehe schnellzugriff";
}

@media (max-width:900px){
  .layout-grid{
    grid-template-areas:
      "hero"
      "warnung"
      "quickinfo"
      "live"
      "feeling"
      "outside"
      "radar"
      "forecast"
      "outdoor_links"
      "unwetter_feature"
      "intro"
      "schnellzugriff"
      "info_aktualitaet"
      "in_der_naehe";
  }
}

@media (max-width:620px){
  .layout-grid .unwetter-feature-card{
    grid-template-columns:1fr;
    padding:18px;
  }
  .layout-grid .unwetter-feature-icon{
    width:54px;
    height:54px;
    border-radius:16px;
    font-size:1.7rem;
  }
  .layout-grid .unwetter-feature-bottom{
    align-items:flex-start;
    flex-direction:column;
  }
}