/*
Theme Name: SchneeToni Premium
Theme URI: https://schneetoni.ch
Author: Antonio + Alfa
Description: Premium Facebook-Style Layout für SchneeToni – Fokus auf Lesbarkeit, Geschwindigkeit und Sponsoren.
Version: 1.7
Text Domain: schneetoni-premium
*/

/* ============================================================
   1) DESIGN-TOKENS
   ============================================================ */

:root {
  --st-blue-dark: #0B5FA5;
  --st-blue: #0B5FA5;
  --st-blue-light: #8DD7FF;
  --st-gold: #D6B45A;

  --st-bg-page-top: #0B5FA5;
  --st-bg-page-mid: #e7f3ff;
  --st-bg-page-bottom: #ffffff;
  --st-bg-card: #ffffff;

  --st-text-main: #0f172a;
  --st-text-muted: #6b7280;
  --st-text-on-blue: #ffffff;

  --st-gap-xs: 6px;
  --st-gap-s: 10px;
  --st-gap-m: 14px;
  --st-gap-l: 20px;
  --st-gap-xl: 28px;

  --st-max-width-content: 760px;
  --st-max-width-article-card: 900px;

  --st-radius-card: 22px;
  --st-radius-soft: 16px;
  --st-radius-pill: 999px;

  --st-shadow-card: 0 24px 55px rgba(15, 23, 42, .16);
  --st-shadow-soft: 0 16px 40px rgba(15, 23, 42, .10);

  --st-border-gold: 1px solid rgba(214, 180, 90, 0.75);
}

/* ============================================================
   2) GLOBAL
   ============================================================ */

html,
body {
  margin: 0;
  padding: 0;
  max-width: 100%;
  overflow-x: hidden;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
  color: var(--st-text-main);
  background: #fff;
}

.st-page {
  min-height: 100vh;
  background: linear-gradient(
    to bottom,
    var(--st-bg-page-top) 0,
    var(--st-bg-page-top) 120px,
    var(--st-bg-page-mid) 420px,
    var(--st-bg-page-bottom) 100%
  );
}

.st-feed-shell {
  max-width: 1120px;
  margin: 0 auto;
  padding: var(--st-gap-m) var(--st-gap-m) var(--st-gap-xl);
  box-sizing: border-box;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ============================================================
   3) HEADER (alte .st-header-Variante – kann bleiben, stört nicht)
   ============================================================ */

.st-header {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(14px);
  background: radial-gradient(circle at top left, #1780df 0, #0B5FA5 52%, #08447a 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 18px 45px rgba(15, 23, 42, .35);
}

.st-header-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 8px var(--st-gap-m);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--st-gap-m);
}

/* Logo links */

.st-header-left {
  display: flex;
  align-items: center;
}

.st-logo-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.st-logo {
  height: 100px;
  width: auto;
}

@media (min-width: 1024px) {
  .st-logo {
    height: 150px;
  }
}

/* Wetter-Pill */

.st-header-center {
  flex: 1;
  display: flex;
  justify-content: center;
}

.st-header-weather {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--st-radius-pill);
  border: 1px solid rgba(214, 180, 90, 0.85);
  background: rgba(6, 22, 41, 0.88);
  box-shadow: 0 8px 18px rgba(3, 24, 52, 0.55);
  font-size: 0.68rem;
  color: #e5f2ff;
  white-space: nowrap;
}

.st-header-weather b,
.st-header-weather .st-temp {
  color: #4ade80;
  font-weight: 600;
}

.st-header-weather-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #38bdf8;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.9);
  animation: st-pulse 1.4s ease-out infinite;
}

@keyframes st-pulse {
  0%   { transform: scale(1);   opacity: 1; }
  60%  { transform: scale(1.7); opacity: 0; }
  100% { transform: scale(1.7); opacity: 0; }
}

/* rechts: Navigation + Burger */

.st-header-right {
  display: flex;
  align-items: center;
  gap: var(--st-gap-m);
}

/* Desktop-Navigation – auf Mobile AUS, auf Desktop PILL-Style */

.st-nav {
  display: none;
}

@media (min-width: 960px) {
  .st-nav {
    display: flex !important;
    gap: 8px;
  }

  .st-nav a {
    padding: 7px 16px;
    border-radius: var(--st-radius-pill);
    color: var(--st-text-on-blue);
    font-size: 0.9rem;
    text-decoration: none;
    border: var(--st-border-gold);
    background: radial-gradient(circle at top, rgba(141, 215, 255, 0.16), rgba(11, 95, 165, 0.8));
    box-shadow: 0 10px 28px rgba(3, 24, 52, 0.45);
    transition: transform 0.14s ease, box-shadow 0.14s ease, background 0.14s ease;
  }

  .st-nav a:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 34px rgba(3, 24, 52, 0.5);
    background: radial-gradient(circle at top, rgba(141, 215, 255, 0.25), rgba(11, 95, 165, 0.9));
  }

  .st-nav a.is-current {
    background: radial-gradient(circle at top, rgba(141, 215, 255, 0.35), rgba(11, 95, 165, 1));
  }
}

/* Mobile Menu Button */

.st-menu-toggle {
  display: inline-flex;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: var(--st-border-gold);
  color: var(--st-blue-light);
  background: radial-gradient(circle at top, rgba(141, 215, 255, 0.15), rgba(3, 24, 52, 0.95));
  justify-content: center;
  align-items: center;
  box-shadow:
    0 0 18px rgba(214, 180, 90, 0.55),
    0 14px 32px rgba(3, 24, 52, 0.7);
  padding: 0;
}

.st-menu-toggle span,
.st-menu-toggle span::before,
.st-menu-toggle span::after {
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 999px;
  position: relative;
  display: block;
}

.st-menu-toggle span::before {
  content:"";
  position:absolute;
  top:-5px;
  left:0;
}

.st-menu-toggle span::after {
  content:"";
  position:absolute;
  top:5px;
  left:0;
}

/* Tagline */

.st-header-tagline {
  max-width: 1120px;
  margin: 0 auto;
  padding: 4px var(--st-gap-m) 10px;
  text-align: center;
  color: rgba(226, 232, 240, 0.95);
}

.st-tagline-main {
  display: block;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.st-tagline-sub {
  display: block;
  font-size: 0.78rem;
  margin-top: 2px;
  opacity: 0.9;
}

/* Mobile-Navi (Overlay-Liste) */

.st-nav-mobile {
  display: none;
  padding: var(--st-gap-m);
}

.st-nav-mobile-inner a {
  display: block;
  padding: 10px 14px;
  border-radius: var(--st-radius-pill);
  margin-bottom: 8px;
  text-decoration: none;
  color: var(--st-text-on-blue);
  border: var(--st-border-gold);
  background: rgba(11, 95, 165, 0.9);
}

/* ============================================================
   4) LAYOUT – Feed + Sidebar
   ============================================================ */

.st-main-grid {
  margin-top: var(--st-gap-m);
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr);
  gap: var(--st-gap-m);
  align-items: flex-start;
}

@media (max-width: 1024px) {
  .st-main-grid {
    grid-template-columns: 1fr;
  }
}

.st-main-col,
.st-side-col {
  display: flex;
  flex-direction: column;
  gap: var(--st-gap-m);
}

/* ============================================================
   5) FEED-KARTEN
   ============================================================ */

.st-card {
  background: var(--st-bg-card);
  border-radius: var(--st-radius-card);
  box-shadow: var(--st-shadow-soft);
  overflow: hidden;
  border: var(--st-border-gold);
}

.st-card-media img {
  width: 100%;
  object-fit: cover;
}

@media (min-width: 901px) {
  .st-card-media img {
    max-height: 520px;
  }
}

.st-card-body {
  padding: var(--st-gap-m) var(--st-gap-l) var(--st-gap-l);
}

.st-meta-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

.st-meta-pill {
  background: rgba(141, 215, 255, 0.28);
  padding: 3px 9px;
  border-radius: var(--st-radius-pill);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #0b1120;
  border: var(--st-border-gold);
}

.st-meta-date,
.st-meta-author {
  font-size: 0.78rem;
  color: var(--st-text-muted);
}

.st-card-title {
  margin: 8px 0 4px;
  font-size: 1.18rem;
  font-weight: 700;
}

.st-card-excerpt {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #111827;
}

.st-card-footer {
  margin-top: 10px;
}

.st-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 18px;
  background: linear-gradient(135deg, var(--st-blue) 0, #0f78e0 40%, #37a9ff 100%);
  color: #e5f2ff;
  border-radius: var(--st-radius-pill);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  border: var(--st-border-gold);
  box-shadow: 0 14px 32px rgba(15, 23, 42, .35);
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}

.st-button:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow: 0 18px 40px rgba(15, 23, 42, .45);
}

/* ============================================================
   6) SIDEBAR-BLOCKS
   ============================================================ */

.st-section {
  background: white;
  border-radius: var(--st-radius-soft);
  padding: var(--st-gap-m) var(--st-gap-l);
  box-shadow: var(--st-shadow-soft);
  border: var(--st-border-gold);
}

.st-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.st-section-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--st-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.st-section-link {
  font-size: 0.8rem;
  text-decoration: none;
  color: var(--st-blue-dark);
}

.st-section-link:hover {
  text-decoration: underline;
}

.st-weather-mini {
  margin-top: var(--st-gap-s);
  font-size: 0.9rem;
  color: var(--st-text-main);
}

.st-pass-list {
  list-style: none;
  padding: 0;
  margin: var(--st-gap-s) 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.st-pass-name {
  font-weight: 600;
}

.st-pass-status {
  font-size: 0.78rem;
  padding: 2px 10px;
  border-radius: var(--st-radius-pill);
  border: var(--st-border-gold);
}

.st-pass-open {
  background: #dcfce7;
  color: #166534;
}

.st-pass-closed {
  background: #fee2e2;
  color: #991b1b;
}

.st-pass-chain {
  background: #fef3c7;
  color: #92400e;
}

.st-sponsor-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.st-sponsor-logo {
  max-width: 80px;
  border-radius: 14px;
  border: var(--st-border-gold);
}

/* ============================================================
   7) SINGLE-ARTIKEL
   ============================================================ */

.st-single-shell {
  max-width: var(--st-max-width-article-card);
  margin: var(--st-gap-l) auto var(--st-gap-xl);
  padding: 0 var(--st-gap-m);
}

.st-single-card {
  background: white;
  border-radius: var(--st-radius-card);
  box-shadow: var(--st-shadow-card);
  border: var(--st-border-gold);
}

.st-single-header {
  padding: var(--st-gap-l);
}

.st-single-title {
  font-size: 1.7rem;
  margin-bottom: var(--st-gap-s);
}

.st-single-content {
  max-width: var(--st-max-width-content);
  margin: 0 auto var(--st-gap-l);
  padding: 0 var(--st-gap-l);
}

.st-single-content img {
  width: 100%;
  margin: var(--st-gap-m) 0;
  border-radius: var(--st-radius-soft);
}

/* ============================================================
   8) FOOTER
   ============================================================ */

.st-footer {
  margin-top: var(--st-gap-xl);
  padding: var(--st-gap-l) var(--st-gap-m) var(--st-gap-xl);
  background: #020617;
  color: #9ca3af;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.st-footer-inner {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--st-gap-m);
}

.st-footer-links {
  display: flex;
  gap: 14px;
}

.st-footer-links a {
  color: #cbd5e1;
  text-decoration: none;
}

.st-footer-links a:hover {
  color: white;
}

/* ============================================================
   9) MOBILE BASIS
   ============================================================ */

@media (max-width: 900px) {
  .st-header-inner {
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .st-logo {
    height: 92px;
  }

  .st-header-weather {
    font-size: 0.66rem;
    padding: 3px 8px;
  }

  .st-card-title { font-size: 1.06rem; }
  .st-card-excerpt { font-size: 0.93rem; }

  .st-section {
    border-radius: 18px;
    box-shadow: var(--st-shadow-soft);
  }

  .st-main-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   SCHNEETONI HEADER – PREMIUM FINAL / TUNINGS (.st-header)
   (Belassen – wirkt nur, falls irgendwo .st-header genutzt wird)
   ============================================================ */

.st-header {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(14px);
  background: radial-gradient(circle at top left, #1780df 0, #0B5FA5 55%, #062f57 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 18px 45px rgba(15, 23, 42, .35);
}

/* ... restliche .st-header-Tunings unverändert ... */


/* ============================================================
   SCHNEETONI – PREMIUM HEADER LAYOUT & STYLING (.stp-*)
   AKTUELL AKTIVE VARIANTE FÜR header.php
   ============================================================ */

:root {
    --st-blue-dark: #003f82;
    --st-blue-mid: #0b63c8;
    --st-blue-light: #2ea0ff;
    --st-gold: #e7c875;
    --st-white: #ffffff;
}

/* HEADER WRAPPER */
.stp-header {
    width: 100%;
    background: linear-gradient(180deg, var(--st-blue-mid), var(--st-blue-dark));
    padding-top: 1.6rem;
    padding-bottom: .8rem;
    box-shadow: 0 10px 40px rgba(0,0,0,0.25);
}

.stp-inner {
    width: 100%;
    max-width: 1400px;
    margin: auto;
    padding: 0 1.4rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* LOGO-BEREICH LINKS */
.stp-left {
    display: flex;
    align-items: center;
}

.stp-logo-wrap {
    display: block;
}

.stp-logo {
    width: 155px;
    height: auto;
    filter: drop-shadow(0 0 6px rgba(0,0,0,0.35));
}

/* WETTER-PILLE ZENTRIERT */
.stp-center {
    flex: 1;
    display: flex;
    justify-content: center;
}

.stp-weather-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0.2rem 1.2rem;
    border-radius: 50px;
    background: rgba(0,0,0,0.25);
    border: 1px solid var(--st-gold);
    text-decoration: none;
    color: var(--st-white);
    font-size: 0.92rem;
    backdrop-filter: blur(6px);
    transition: all .25s ease;
    box-shadow:
        0 0 12px rgba(231,200,117,0.45),
        inset 0 0 12px rgba(255,255,255,0.15);
}

.stp-weather-pill:hover {
    transform: translateY(-1px);
    box-shadow:
        0 0 18px rgba(231,200,117,0.7),
        inset 0 0 22px rgba(255,255,255,0.25);
}

/* Inhalt des Shortcodes selbst bleibt klickbar, aber „schluckt“ keine Events */
.stp-weather-content {
    pointer-events: none;
}

/* RECHTS: NAVIGATION + BURGER */
.stp-right {
    display: flex;
    align-items: center;
    gap: 1.4rem;
}

/* Desktop-Navigation */
.stp-nav {
    display: flex;
    gap: 1.4rem;
}

.stp-nav a {
    color: var(--st-white);
    font-size: 0.95rem;
    text-decoration: none;
    position: relative;
    font-weight: 500;
    letter-spacing: .02em;
}

.stp-nav a.is-current::after,
.stp-nav a:hover::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -3px;
    height: 2px;
    width: 100%;
    background: var(--st-gold);
    border-radius: 2px;
}

/* BURGER BUTTON */
.stp-menu-toggle {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(255,255,255,0.12);
    border: 1px solid var(--st-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 0 12px rgba(231,200,117,0.55);
    transition: all .2s ease;
}

.stp-menu-toggle:hover {
    background: rgba(255,255,255,0.18);
    transform: scale(1.04);
}

.stp-menu-toggle span {
    width: 55%;
    height: 2px;
    background: var(--st-white);
    position: relative;
}

.stp-menu-toggle span::before,
.stp-menu-toggle span::after {
    content: "";
    width: 100%;
    height: 2px;
    background: var(--st-white);
    position: absolute;
    left: 0;
}

.stp-menu-toggle span::before { top: -7px; }
.stp-menu-toggle span::after  { top:  7px; }

/* CLAIM / SUBLINE UNTERHALB */
.stp-subline {
    text-align: center;
    margin-top: 0.8rem;
    color: var(--st-white);
}

.stp-claim-main {
    font-size: 1.05rem;
    letter-spacing: 0.22em;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.stp-claim-sub {
    font-size: .95rem;
    opacity: 0.92;
}

/* MOBILE ANPASSUNG FÜR iPHONE ETC.  */

@media (max-width: 768px) {
    .stp-inner {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.6rem 1.2rem;
    }

    .stp-left {
        width: 100%;
        justify-content: center;
    }

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

    .stp-right {
        order: 3;
    }

    .stp-logo {
        width: 150px;
    }

    .stp-weather-pill {
        max-width: 100%;
        padding: 0.25rem 0.9rem;
        font-size: 0.82rem;
        text-align: center;
    }

    .stp-nav {
        display: none;
    }
}

/* ============================================================
   PREMIUM SIDEBAR / WEATHER TUNING – EXTRA EDEL
   ============================================================ */

/* Alle Sidebar-Boxen leicht glasig & edler */
.st-side-col .st-section {
  position: relative;
  background: radial-gradient(circle at top left,
    rgba(255, 255, 255, 0.98),
    rgba(248, 250, 252, 0.96));
  border-radius: 22px;
  border: 1px solid rgba(214, 180, 90, 0.85);
  box-shadow:
    0 18px 40px rgba(15, 23, 42, 0.16),
    0 0 0 1px rgba(148, 163, 184, 0.18);
  overflow: hidden;
}

.st-side-col .st-section::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at top right,
    rgba(37, 99, 235, 0.12),
    rgba(255, 255, 255, 0) 55%);
  pointer-events: none;
}

/* Headlines & Links in Sidebar etwas hochwertiger */
.st-side-col .st-section-title {
  color: #0f172a;
  letter-spacing: 0.14em;
}

.st-side-col .st-section-link {
  font-weight: 500;
}

/* Pills (Offen / Wintersperre / Kettenpflicht) dezenter 3D-Look */
.st-pass-status {
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.14);
}

/* Nur die ERSTE Box rechts (Wetter) kriegt noch mehr Premium-Glow */
.st-side-col .st-section:first-child {
  background: radial-gradient(circle at top left,
    rgba(15, 23, 42, 0.98),
    rgba(15, 23, 42, 0.96));
  color: #e5f2ff;
  border-color: rgba(252, 211, 77, 0.9);
  box-shadow:
    0 22px 48px rgba(15, 23, 42, 0.7),
    0 0 24px rgba(56, 189, 248, 0.45);
}

.st-side-col .st-section:first-child::before {
  background: radial-gradient(circle at top,
    rgba(56, 189, 248, 0.24),
    rgba(252, 211, 77, 0.14),
    rgba(15, 23, 42, 0.0) 70%);
}

.st-side-col .st-section:first-child .st-section-title {
  color: #fefce8;
}

.st-side-col .st-section:first-child .st-section-link {
  color: #bfdbfe;
}

/* Text und evtl. Shortcode-Inhalt in der Wetterbox lesbarer auf dunkel */
.st-side-col .st-section:first-child,
.st-side-col .st-section:first-child .st-weather-mini {
  color: #e5f2ff;
}

.st-side-col .st-section:first-child p,
.st-side-col .st-section:first-child .textwidget {
  margin-top: var(--st-gap-s);
  font-size: 0.9rem;
  line-height: 1.6;
}

.st-side-col .st-section:first-child .st-temp,
.st-side-col .st-section:first-child b {
  color: #4ade80;
}

/* Mobile: etwas weniger Schatten */
@media (max-width: 900px) {
  .st-side-col .st-section {
    box-shadow:
      0 12px 26px rgba(15, 23, 42, 0.18),
      0 0 0 1px rgba(148, 163, 184, 0.18);
  }
}

/* Vollflächige Sidebar-Links */
.st-section {
  position: relative;
}

.st-section-overlay-link {
  position: absolute;
  inset: 0;
  z-index: 1;
  text-indent: -9999px;
}

/* Inhalt sichtbar darüber */
.st-section-header,
.st-section * {
  position: relative;
  z-index: 2;
}

/* Artikel-Titel im Feed: Premium-Look */
.st-card-title a {
  color: #0f172a;
  text-decoration: none;
}

.st-card-title a:hover {
  color: #0B5FA5;
  text-decoration: none;
}

/* Single-Page Überschrift */
.st-single-title,
.st-single-title a {
  color: #0f172a;
  text-decoration: none;
}

.st-single-title a:hover {
  color: #0B5FA5;
  text-decoration: none;
}

/* Navigation unter Single-Artikel */
.st-single-nav {
  max-width: var(--st-max-width-article-card);
  margin: 0 auto var(--st-gap-xl);
  padding: 0 var(--st-gap-m);
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  color: var(--st-text-muted);
}

.st-single-nav a {
  color: var(--st-blue-dark);
  text-decoration: none;
  font-weight: 500;
}

.st-single-nav a:hover {
  color: var(--st-blue);
  text-decoration: underline;
}

/* --- PREMIUM SIDEBAR WEATHER CARD --- */

.st-section-weather {
  background: radial-gradient(circle at top left, #020617 0, #0b5fa5 55%, #020617 100%);
  color: #f9fafb;
}

.st-section-weather .st-section-title {
  color: #f9fafb;
  letter-spacing: 0.18em;
}

.st-section-weather .st-section-link {
  color: #bfdbfe;
}

.st-section-weather .st-section-link:hover {
  color: #ffffff;
  text-decoration: none;
}

.st-section-weather .st-weather-mini {
  margin-top: 10px;
  font-size: 0.86rem;
  line-height: 1.5;
  color: #e5e7eb;
}

/* Alpenorte unter der Wetter-Box – Premium Mini-Listing */
.st-alps-box {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.st-alps-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.25);
  box-shadow: 0 8px 16px rgba(15, 23, 42, 0.45);
  color: #e5f2ff;
}

.st-alps-left {
  display: flex;
  flex-direction: column;
}

.st-alps-place {
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.st-alps-meta {
  font-size: 0.76rem;
  opacity: 0.85;
}

.st-alps-right {
  font-size: 0.9rem;
  font-weight: 600;
  white-space: nowrap;
}

.st-alps-temp {
  padding-left: 8px;
}

/* ============================================================
   ULTRA-PREMIUM SIDEBAR: WETTER & ALPENPÄSSE
   ============================================================ */

.st-section-weather .st-section-body {
  margin-top: 6px;
}

.st-section-alps-teaser {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Jede Zeile (Ort) */
.st-section-alps-teaser .st-alps-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 12px;
  border-radius: 999px;
  background: radial-gradient(circle at top left,
    rgba(15, 23, 42, 0.92),
    rgba(15, 23, 42, 0.78)
  );
  border: 1px solid rgba(248, 250, 252, 0.10);
  box-shadow:
    0 10px 28px rgba(15, 23, 42, 0.55),
    0 0 16px rgba(15, 118, 220, 0.45);
}

/* Linke Seite: Ort + Höhe + Flagge */
.st-section-alps-teaser .st-alps-left {
  display: flex;
  flex-direction: column;
}

.st-section-alps-teaser .st-alps-place {
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #e5f2ff;
}

.st-section-alps-teaser .st-alps-meta {
  font-size: 0.78rem;
  color: rgba(226, 232, 240, 0.9);
}

.st-alps-flag {
  margin-left: 4px;
  font-size: 0.9rem;
}

/* Rechte Seite: Icon + Temperatur */
.st-section-alps-teaser .st-alps-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-shrink: 0;
}

.st-section-alps-teaser .st-alps-temp {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.9rem;
  font-weight: 600;
  color: #f9fafb;
  font-variant-numeric: tabular-nums;
}

.st-section-alps-teaser .st-alps-icon {
  font-size: 1.1rem;
  line-height: 1;
}

/* Mobile: Zeilen dürfen umbrechen */
@media (max-width: 900px) {
  .st-section-alps-teaser .st-alps-row {
    padding-inline: 10px;
  }
}

/* ULTRA-PREMIUM MINI-ALPENPÄSSE IN DER SIDEBAR */

.st-section .st-pass-list {
  margin-top: 10px;
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.st-section .st-pass-list li {
  padding: 6px 10px;
  border-radius: 16px;
  background: radial-gradient(circle at top left,
    rgba(248, 250, 252, 0.96),
    rgba(226, 232, 240, 0.95)
  );
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.10);
}

.st-section .st-pass-name {
  font-weight: 600;
  font-size: 0.9rem;
  color: #0f172a;
}

.st-section .st-meta-date {
  font-size: 0.78rem;
  color: #6b7280;
}

.st-section .st-pass-status {
  margin-left: 4px;
  font-size: 0.75rem;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.5);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.st-section .st-pass-open {
  background: rgba(22, 163, 74, 0.10);
  color: #166534;
  border-color: rgba(22, 163, 74, 0.5);
}

.st-section .st-pass-closed {
  background: rgba(220, 38, 38, 0.08);
  color: #b91c1c;
  border-color: rgba(248, 113, 113, 0.8);
}

.st-section .st-pass-chain {
  background: rgba(245, 158, 11, 0.10);
  color: #92400e;
  border-color: rgba(245, 158, 11, 0.7);
}

/* MINI PASS CARDS POLISH */

.st-section-passes .st-pass-list li {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(10px);
  border-radius: 18px;
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow:
    0 6px 18px rgba(15, 23, 42, 0.15),
    inset 0 0 0 1px rgba(255, 255, 255, 0.35);
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}

.st-section-passes .st-pass-list li:hover {
  transform: translateY(-2px);
  box-shadow:
    0 10px 30px rgba(15, 23, 42, 0.25),
    inset 0 0 0 1px rgba(255, 255, 255, 0.50);
}

.st-section-passes .st-pass-name {
  font-size: 0.92rem;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.2;
}

.st-section-passes .st-meta-date {
  font-size: 0.78rem;
  opacity: 0.75;
  color: #374151;
}

.st-section-passes .st-pass-status {
  margin-left: 6px;
  font-size: 0.7rem;
  padding: 3px 10px;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.st-section-passes .st-pass-status.st-pass-open {
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
  border: 1px solid rgba(16, 185, 129, 0.4);
}

.st-section-passes .st-pass-status.st-pass-closed {
  background: rgba(239, 68, 68, 0.12);
  color: #dc2626;
  border: 1px solid rgba(239, 68, 68, 0.35);
}

.st-section-passes .st-pass-status.st-pass-chain {
  background: rgba(245, 158, 11, 0.12);
  color: #d97706;
  border: 1px solid rgba(245, 158, 11, 0.4);
}

/* DAY/NIGHT & SNOW ANIMATION Wetterbox */

.st-section-weather {
  position: relative;
  overflow: hidden;
}

.st-section-weather {
  background: radial-gradient(circle at top left, #111827 0, #0b5fa5 55%, #02152b 100%);
  color: #f9fafb;
}

.st-section-weather.is-day {
  background: radial-gradient(circle at top left, #1d4ed8 0, #0b5fa5 50%, #022c5b 100%);
}

.st-section-weather.is-night {
  background: radial-gradient(circle at top left, #020617 0, #020617 45%, #02101f 100%);
}

.st-section-weather::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow:
    0 0 0 1px rgba(148, 163, 184, 0.25),
    0 22px 48px rgba(15, 23, 42, 0.75);
}

.st-section-weather.is-snowing::after {
  content: "";
  position: absolute;
  inset: -40px;
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.90) 0,  rgba(255,255,255,0.90) 1px, transparent 3px),
    radial-gradient(circle, rgba(255,255,255,0.75) 0,  rgba(255,255,255,0.75) 1px, transparent 3px),
    radial-gradient(circle, rgba(255,255,255,0.55) 0,  rgba(255,255,255,0.55) 1px, transparent 3px);
  background-size: 220px 220px, 180px 180px, 140px 140px;
  background-position: 0 0, 40px 20px, -30px -20px;
  opacity: 0.75;
  animation: st-snowfall 22s linear infinite;
  mix-blend-mode: screen;
}

@keyframes st-snowfall {
  0% {
    background-position: 0 0, 40px 20px, -30px -20px;
  }
  100% {
    background-position: 0 480px, 40px 500px, -30px 520px;
  }
}

/* Glow + Snow Particles */

.st-section-weather::before {
  content: "";
  position: absolute;
  inset: -40%;
  background:
    radial-gradient(circle at 10% 20%, rgba(255,255,255,0.18) 0, transparent 55%),
    radial-gradient(circle at 80% 0%,   rgba(255,255,255,0.12) 0, transparent 55%),
    radial-gradient(circle at 20% 80%, rgba(255,255,255,0.16) 0, transparent 55%);
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  animation: st-snow-glow 14s ease-in-out infinite alternate;
}

.st-section-weather::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.55) 0, transparent 55%),
    radial-gradient(circle, rgba(255,255,255,0.35) 0, transparent 55%),
    radial-gradient(circle, rgba(255,255,255,0.25) 0, transparent 55%);
  background-size: 4px 4px, 3px 3px, 2px 2px;
  background-position:
    0 0,
    40% 60%,
    80% 20%;
  opacity: 0;
  pointer-events: none;
  animation: st-snow-drift 22s linear infinite;
}

.st-section-weather.is-snowing::before,
.st-section-weather.is-snowing::after {
  opacity: 1;
}

.st-section-weather.is-day::before {
  filter: hue-rotate(200deg) saturate(1.2);
}

.st-section-weather.is-night::before {
  filter: hue-rotate(260deg) saturate(1.5) brightness(0.9);
}

@keyframes st-snow-glow {
  0% {
    transform: translate3d(-10px, 10px, 0) scale(1);
  }
  50% {
    transform: translate3d(10px, -6px, 0) scale(1.02);
  }
  100% {
    transform: translate3d(-6px, -4px, 0) scale(1.01);
  }
}

@keyframes st-snow-drift {
  0% {
    transform: translate3d(0, -10px, 0);
  }
  100% {
    transform: translate3d(-18px, 18px, 0);
  }
}

/* Mini-Bergicon vor den Alpenorten in der Wetterbox */
.st-section-alps-teaser .st-alps-place {
  position: relative;
  padding-left: 1.2rem;
}

.st-section-alps-teaser .st-alps-place::before {
  content: "🏔️";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-52%);
  font-size: 0.9rem;
  filter: drop-shadow(0 0 3px rgba(0,0,0,0.18));
}

/* =========================================================
   SchneeToni – Alpenpässe Sidebar (Ultra-Premium)
   ========================================================= */

.st-section .st-weather-mini {
  margin-top: 0.6rem;
  padding: 0.6rem 0.75rem 0.7rem;
  border-radius: 16px;
  background: radial-gradient(circle at 0% 0%, rgba(255,255,255,0.08) 0, transparent 55%),
              radial-gradient(circle at 100% 100%, rgba(0,0,0,0.16) 0, transparent 60%),
              rgba(255,255,255,0.03);
  box-shadow: 0 18px 40px rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.06);
}

.st-pass-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.st-pass-list li {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 0.5rem;
  row-gap: 0.1rem;
  align-items: center;
  padding: 0.4rem 0.55rem;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(15,23,42,0.80), rgba(15,23,42,0.65));
  box-shadow: 0 10px 24px rgba(15,23,42,0.55);
  border: 1px solid rgba(255,255,255,0.08);
  position: relative;
  overflow: hidden;
}

.st-pass-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: -20%;
  bottom: -20%;
  width: 3px;
  background: linear-gradient(to bottom, #38bdf8, #22c55e);
  opacity: 0.7;
}

.st-pass-name {
  font-size: 0.88rem;
  font-weight: 600;
  color: #f9fafb;
}

.st-pass-list .st-meta-date {
  font-size: 0.78rem;
  color: rgba(226,232,240,0.8);
}

.st-pass-status {
  justify-self: end;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.16rem 0.65rem;
  border-radius: 999px;
  border: 1px solid transparent;
  background: rgba(148,163,184,0.15);
  color: #e5e7eb;
  white-space: nowrap;
}

.st-pass-open {
  background: rgba(34,197,94,0.15);
  border-color: rgba(34,197,94,0.5);
  color: #bbf7d0;
  box-shadow: 0 0 0 1px rgba(34,197,94,0.15);
}

.st-pass-closed {
  background: rgba(248,113,113,0.16);
  border-color: rgba(248,113,113,0.8);
  color: #fecaca;
  box-shadow: 0 0 0 1px rgba(248,113,113,0.18);
}

.st-pass-chain {
  background: rgba(250,204,21,0.18);
  border-color: rgba(250,204,21,0.85);
  color: #fef9c3;
  box-shadow: 0 0 0 1px rgba(250,204,21,0.2);
}

.st-pass-list li:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(15,23,42,0.75);
}

@media (max-width: 768px) {
  .st-section .st-weather-mini {
    padding: 0.6rem 0.65rem 0.7rem;
  }

  .st-pass-list li {
    padding: 0.4rem 0.5rem;
  }

  .st-pass-name {
    font-size: 0.86rem;
  }
}

/* ===========================
   SCHNEETONI – SPONSOREN
   =========================== */

.st-section-sponsors .st-section-body.st-sponsor-body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* allgemeine Box für eine Stufe */
.st-sponsor-tier {
  border-radius: 18px;
  padding: 0.75rem 0.9rem;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
  border: 1px solid rgba(148, 163, 184, 0.45);
}

/* Kopfzeile Gold / Silber / Bronze + freie Plätze */
.st-sponsor-tier-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}

.st-sponsor-tier-label {
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
}

.st-sponsor-tier-count {
  font-size: 0.75rem;
  color: #6b7280;
}

/* Farben für die Stufen */
.st-sponsor-tier--gold {
  border-color: #fbbf24;
  background: radial-gradient(circle at top left, #fff7e0 0, #ffffff 45%, #fef3c7 100%);
}

.st-sponsor-tier--silver {
  border-color: #9ca3af;
  background: radial-gradient(circle at top left, #f5f5f5 0, #ffffff 45%, #e5e7eb 100%);
}

.st-sponsor-tier--bronze {
  border-color: #f97316;
  background: radial-gradient(circle at top left, #fff4e6 0, #ffffff 45%, #fed7aa 100%);
}

/* Listen-Layout für Partner */
.st-sponsor-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  font-size: 0.85rem;
}

.st-sponsor-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem;
}

/* Name / Link */
.st-sponsor-name {
  font-weight: 500;
  max-width: 100%;
}

.st-sponsor-name a {
  color: #0f172a;
  text-decoration: none;
}

.st-sponsor-name a:hover {
  text-decoration: underline;
}

/* kleines Badge für freie Plätze */
.st-sponsor-slot-badge {
  font-size: 0.7rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  border: 1px dashed rgba(148, 163, 184, 0.9);
  color: #6b7280;
  white-space: nowrap;
}

/* Premium-Badge für z.B. polizei.news */
.sponsor-badge-premium {
  font-size: 0.7rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: linear-gradient(90deg, #f97316, #f59e0b);
  color: #ffffff;
  font-weight: 600;
  margin-left: 0.35rem;
}

/* etwas mehr Luft zur Wetter/Pass-Box */
.st-section-sponsors {
  margin-top: 0.75rem;
}

/* Sponsor-Feintuning: Farben & Truncation */
.st-sponsor-tier--gold .st-sponsor-tier-label {
  color: #b45309;
}

.st-sponsor-tier--silver .st-sponsor-tier-label {
  color: #4b5563;
}

.st-sponsor-tier--bronze .st-sponsor-tier-label {
  color: #92400e;
}

/* Sponsor-Namen: dezent & smart in der Sidebar */
.st-sponsor-name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.82rem;
  font-weight: 500;
  color: #111827;
  letter-spacing: 0.01em;
  opacity: 0.9;
}

.st-sponsor-name a {
  color: inherit;
  text-decoration: none;
}

.st-sponsor-name a:hover {
  text-decoration: underline;
  opacity: 1;
}


/* -------------------------------------------------------------
   SCHNEETONI – PREMIUM AD SLOTS
   Leaderboard (oben) & Sidebar (Rechts)
   ------------------------------------------------------------- */

/* GLOBAL */

.st-ad-leaderboard,
.st-ad-rectangle {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* LEADERBOARD PREMIUM (1120 × 150) */

.st-section-leaderboard {
  margin-bottom: 1.3rem;
}

.st-ad-leaderboard {
  background: radial-gradient(circle at 15% 20%, #1e3a8a 0%, #0f172a 55%, #030712 100%);
  border-radius: 24px;
  border: 1px solid rgba(147, 197, 253, 0.35);
  padding: 1.2rem;
  box-shadow: 0 22px 45px rgba(0, 0, 0, 0.45);
}

.st-ad-leaderboard-link {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: #e5e7eb;
  width: 100%;
  text-align: center;
  padding: 0.5rem 1rem;
  outline: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.st-ad-leaderboard-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 28px 65px rgba(0, 0, 0, 0.55);
}

.st-ad-leaderboard-label {
  font-size: 1.15rem;
  font-weight: 600;
  color: #facc15;
  letter-spacing: 0.02em;
  text-shadow: 0 0 12px rgba(250, 204, 21, 0.6);
}

/* SIDEBAR AD (300 × 600) */

.st-section-sidebar-ad {
  margin: 0.5rem 0 1.2rem;
}

.st-ad-rectangle {
  background: linear-gradient(135deg, #0f172a 0%, #111827 30%, #1e293b 100%);
  border-radius: 18px;
  padding: 1rem;
  border: 1px solid rgba(148, 163, 184, 0.45);
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.4);
}

.st-ad-rectangle-link {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #f1f5f9;
  text-align: center;
  width: 100%;
  min-height: 280px;
  padding: 1rem 0.5rem;
  border-radius: 14px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.st-ad-rectangle-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.55);
}

.st-ad-rectangle-label {
  font-size: 0.95rem;
  font-weight: 600;
  color: #facc15;
  letter-spacing: 0.04em;
  line-height: 1.4;
  text-shadow: 0 0 10px rgba(250, 204, 21, 0.55);
}

/* EXTRAS: freie Plätze leicht abdunkeln */

.st-ad-is-empty {
  opacity: 0.6 !important;
}

.st-ad-is-empty:hover {
  opacity: 0.8 !important;
}

/* RESPONSIVE */

@media (max-width: 800px) {
  /* Leaderboard-Banner: nur Desktop, auf Mobile ausblenden */
  .st-ad-leaderboard {
    display: none;
  }

  .st-ad-leaderboard-label {
    font-size: 0.95rem;
  }

  .st-ad-rectangle-link {
    min-height: 180px;
  }
}

/* Banner / Anzeigen-Bilder immer sauber zentriert & responsive */
.st-ad-leaderboard img,
.st-section-ad-rectangle img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}
/* ============================================================
   SCHNEETONI – TOPNEWS 3 SLIDER (PREMIUM)
   ============================================================ */

.st-topnews-slider {
  position: relative;
  margin-bottom: 1.5rem;
  border-radius: var(--st-radius-card);
  border: 1px solid rgba(214, 180, 90, 0.85);
  box-shadow:
    0 20px 45px rgba(15, 23, 42, 0.35),
    0 0 0 1px rgba(148, 163, 184, 0.28);
  overflow: hidden;
  background: radial-gradient(circle at top left,
    rgba(15, 23, 42, 0.96),
    rgba(15, 23, 42, 0.92));
}

/* Track mit 3 Slides (je 100%) */
.st-topnews-track {
  display: flex;
  width: 100%;
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}

.st-topnews-item {
  min-width: 100%;
  flex: 0 0 100%;
}

/* Falls du bestehende .st-card nutzt, wird diese einfach reingeschoben */
.st-topnews-item .st-card {
  box-shadow: none;
  border-radius: 0;
  border: none;
}

/* ============================================================
   Seitliche Premium-Navigationsbuttons (Vor/Zurück)
   ============================================================ */

.st-topnews-nav-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1px solid rgba(231, 200, 117, 0.9); /* Gold */
  background:
    radial-gradient(circle at 20% 0%, rgba(255,255,255,0.22) 0, transparent 55%),
    radial-gradient(circle at 80% 120%, rgba(15,23,42,0.95) 0, rgba(15,23,42,1) 60%);
  box-shadow:
    0 16px 32px rgba(15, 23, 42, 0.75),
    0 0 18px rgba(231, 200, 117, 0.5);
  color: #e5f2ff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  outline: none;
  z-index: 5;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, opacity 0.2s ease;
}

.st-topnews-nav-button--prev {
  left: 14px;
}

.st-topnews-nav-button--next {
  right: 14px;
}

.st-topnews-nav-button:hover {
  transform: translateY(-50%) translateY(-1px) scale(1.03);
  box-shadow:
    0 22px 48px rgba(15, 23, 42, 0.85),
    0 0 24px rgba(248, 250, 252, 0.35);
}

.st-topnews-nav-button:disabled {
  opacity: 0.35;
  cursor: default;
  box-shadow: none;
}

/* Pfeil-Icon via pseudo-Element, falls kein SVG benutzt wird */
.st-topnews-nav-button span {
  position: relative;
  display: block;
  width: 14px;
  height: 14px;
}

.st-topnews-nav-button--prev span::before,
.st-topnews-nav-button--next span::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 2px;
  border-style: solid;
  border-width: 0 0 2px 2px;
}

.st-topnews-nav-button--prev span::before {
  border-color: #e5f2ff;
  transform: rotate(45deg) translate(2px, -2px);
}

.st-topnews-nav-button--next span::before {
  border-color: #e5f2ff;
  transform: rotate(-135deg) translate(2px, -2px);
}

/* ============================================================
   Bullet-Navigation (3 Punkte) unterhalb
   ============================================================ */

.st-topnews-dots {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  display: inline-flex;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.82);
  border: 1px solid rgba(148, 163, 184, 0.45);
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.8);
}

.st-topnews-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.75);
  background: rgba(15, 23, 42, 0.6);
  cursor: pointer;
  transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.st-topnews-dot.is-active {
  background: radial-gradient(circle, #facc15 0, #f97316 60%, #b45309 100%);
  border-color: rgba(250, 204, 21, 0.9);
  box-shadow: 0 0 12px rgba(250, 204, 21, 0.9);
  transform: scale(1.15);
}

/* ============================================================
   Responsive Anpassungen
   ============================================================ */

@media (max-width: 900px) {
  .st-topnews-slider {
    border-radius: 18px;
  }

  .st-topnews-nav-button {
    width: 40px;
    height: 40px;
  }

  .st-topnews-nav-button--prev {
    left: 8px;
  }

  .st-topnews-nav-button--next {
    right: 8px;
  }
}

@media (max-width: 640px) {
  /* Auf sehr kleinen Screens Pfeile etwas dezenter */
  .st-topnews-nav-button {
    opacity: 0.9;
    box-shadow: 0 12px 26px rgba(15,23,42,0.7);
  }

  .st-topnews-dots {
    bottom: 10px;
  }
}
/* Ultra-dezentes, kaum sichtbares Anzeige-Label */
.s-ad-label {
    font-size: 0.42rem;          /* extrem klein – ~60% kleiner als vorher */
    font-weight: 300;            /* hauchdünn */
    color: rgba(255, 255, 255, 0.28);  /* sehr schwaches Weiß, perfekt auf Premium-Hintergründen */
    letter-spacing: 0.02em;
    margin-bottom: 0.25rem;
    display: block;
    line-height: 1.2;
    text-transform: none;        /* kein Uppercase → weniger Aufmerksamkeit */
}
.st-ad-title {
    font-size: 0.55rem !important;   /* viel kleiner */
    font-weight: 300 !important;     /* sehr fein */
    opacity: 0.28 !important;        /* kaum sichtbar */
    margin-bottom: 4px !important;
    text-transform: none !important; /* kein SCHREIEN mehr */
    letter-spacing: 0.01em !important;
}
.st-section-ad .st-section-title {
    font-size: 0.55rem !important;
    font-weight: 300 !important;
    opacity: 0.30 !important;
    letter-spacing: 0.01em !important;
    text-transform: none !important;
    margin-bottom: 4px !important;
}
/* Anzeige-Titel in der Polizei.news-Box stark entschärfen */
.st-section-ad-rectangle .st-section-header .st-section-title {
    font-size: 0.55rem !important;   /* deutlich kleiner */
    font-weight: 300 !important;     /* sehr fein */
    opacity: 0.25 !important;        /* wenig präsent */
    text-transform: none !important; /* kein SCHREI-TEXT */
    letter-spacing: 0.02em !important;
    margin-bottom: 4px !important;
}
article.st-card-post.post-2821 {
    position: relative;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 26px 70px rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: radial-gradient(circle at top left,
                rgba(255, 255, 255, 0.16),
                #ffffff 55%);
    margin-bottom: 34px;
}

/* Premium TOPSTORY – edel, clean, hochwertig */
article.st-card-post.post-2821 {
    position: relative;
    border-radius: 32px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 
        0 20px 50px rgba(0,0,0,0.35),
        0 0 0 1px rgba(255,255,255,0.10);
    transform: translateY(0);
    transition: box-shadow 0.35s ease, transform 0.35s ease;
}

/* Hover-Lift – wie bei Premium-Card-Designs */
article.st-card-post.post-2821:hover {
    transform: translateY(-4px);
    box-shadow:
        0 30px 70px rgba(0,0,0,0.45),
        0 0 0 1px rgba(255,255,255,0.35);
}

/* Cinematic-Image */
article.st-card-post.post-2821 img {
    transform: scale(1.015);
    transition: transform 0.45s ease, filter 0.45s ease;
    filter: saturate(1.08) contrast(1.04);
}

article.st-card-post.post-2821:hover img {
    transform: scale(1.045);
    filter: saturate(1.14) contrast(1.06);
}

/* EOS-Effect: feiner diagonaler Lichtschein */
article.st-card-post.post-2821::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        135deg,
        rgba(255,255,255,0.12) 0%,
        rgba(255,255,255,0.03) 40%,
        rgba(255,255,255,0.00) 100%
    );
    mix-blend-mode: screen;
    z-index: 3;
}

/* Premium-Card-Wrapper (äusserer Rahmen) */
.st-main-grid > .st-card:first-child {
    position: relative;
    border-radius: 32px;
    overflow: hidden;
    background: #ffffff;
    box-shadow:
        0 28px 70px rgba(0,0,0,0.35),
        0 0 0 1px rgba(255,255,255,0.25);
    transform: translateY(0);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.st-main-grid > .st-card:first-child:hover {
    transform: translateY(-4px);
    box-shadow:
        0 38px 90px rgba(0,0,0,0.45),
        0 0 0 1px rgba(255,255,255,0.35);
}

/* Innerer Artikel (Bild + Text) */
.st-main-grid > .st-card:first-child article.st-card-post {
    border-radius: 32px;
    overflow: hidden;
}

/* Cinematic Image */
.st-main-grid > .st-card:first-child article.st-card-post img {
    transform: scale(1.025);
    transition: transform 0.45s ease, filter 0.45s ease;
    filter: saturate(1.1) contrast(1.05);
}

.st-main-grid > .st-card:first-child:hover article.st-card-post img {
    transform: scale(1.055);
    filter: saturate(1.15) contrast(1.08);
}

/* Topstory-Label sehr dezent */
article.st-card-post.post-2821::after {
    content: "Topstory";
    position: absolute;
    top: 10px;
    left: 14px;
    z-index: 5;
    padding: 3px 10px;
    font-size: 0.66rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 500;

    background: rgba(0, 0, 0, 0.55);
    color: #ffffff;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(4px);
}

/* Bild nur ganz leicht „Topstory“-Cinematic */
article.st-card-post.post-2821 img {
    transition: transform 0.3s ease, filter 0.3s ease;
}

article.st-card-post.post-2821:hover img {
    transform: scale(1.02);
    filter: saturate(1.03);
}
/* Topstory – feine Premium-Markierung */
article.st-card-post.post-2821 {
    position: relative;
}

/* Dezenter Gold-/Weiss-Highlight-Strich oben */
article.st-card-post.post-2821::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(
        90deg,
        rgba(255,255,255,0.65),
        rgba(255,255,255,0.0)
    );
    opacity: 0.8;
}

/* Sehr dezentes Topstory-Badge */
article.st-card-post.post-2821::after {
    content: "TOPSTORY";
    position: absolute;
    top: 14px;
    left: 18px;
    z-index: 10;
    padding: 3px 10px;
    font-size: 0.58rem;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    font-weight: 600;

    color: rgba(0,0,0,0.75);
    background: rgba(255,255,255,0.65);
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.85);
    backdrop-filter: blur(4px);
    opacity: 0.85;
}

/* Minimal edler Hover – kaum spürbar */
article.st-card-post.post-2821 img {
    transition: transform 0.25s ease, filter 0.25s ease;
}

article.st-card-post.post-2821:hover img {
    transform: scale(1.01);
    filter: saturate(1.04);
}
/* Premium-Excerpt: beste Lesbarkeit + elegante Kürzung */
.st-card-post .st-card-excerpt,
.st-card-post .st-card-excerpt p,
.st-card-post .entry-summary,
.st-card-post .entry-summary p {
    font-size: 1.02rem;                    /* leicht größer = eleganter */
    font-weight: 300;                      /* Premium-Lead-Gewicht */
    line-height: 1.58;                     /* perfekte Lesbarkeit */
    letter-spacing: 0.01em;                /* ruhiger optischer Rhythmus */
    opacity: 0.92;                          /* angenehmer Kontrast */
    
    display: -webkit-box;
    -webkit-line-clamp: 3;                  /* Premium: 3-Zeilen-Lead */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    
    margin-top: 6px;                        /* mehr Luft zum Titel */
}

/* Titel-Optimierung für Premium-Lesen */
.st-card-post .st-card-title,
.st-card-post .entry-title {
    font-size: 1.26rem;
    font-weight: 600;                       /* ruhige Premium-Schwere */
    line-height: 1.28;
    letter-spacing: -0.01em;                /* edle elegante Verdichtung */
    margin-bottom: 4px;
    color: #0d0d0d;
}

/* Kategorie-Badge leichter, moderner */
.st-card-post .st-post-category {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.10em;
    opacity: 0.65;
    padding: 2px 8px;
    border-radius: 6px;
}
/* Leaderboard optisch an Content-Raster anpassen */
.st-ad.st-ad-leaderboard {
    box-sizing: border-box;
    padding-left: 24px;
    padding-right: 24px;
}
/* ===============================
   SCHNEETONI PREMIUM ALPENPÄSSE
   =============================== */

/* PAGE WRAPPER – optional falls du ein Hero willst */
.schneetoni-passes-hero {
    width: 100%;
    padding: 80px 20px 60px;
    text-align: center;
    color: #ffffff;
    background: linear-gradient(
        rgba(0, 31, 84, 0.65),
        rgba(0, 31, 84, 0.65)
    ),
    url('DEIN-HINTERGRUNDBILD.jpg') center/cover no-repeat;
    border-radius: 0 0 30px 30px;
    margin-bottom: 40px;
}

.schneetoni-passes-hero h1 {
    font-family: 'Inter', sans-serif;
    font-size: 42px;
    font-weight: 800;
    margin-bottom: 10px;
}

.schneetoni-passes-hero p {
    font-size: 20px;
    font-weight: 300;
    opacity: 0.9;
}




/* PASS CARD */
.schneetoni-paesse .schneetoni-pass-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 22px;
    box-shadow: 0 7px 22px rgba(0,0,0,0.08);
    border: 1px solid rgba(0,0,0,0.05);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.schneetoni-paesse .schneetoni-pass-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 25px rgba(0,0,0,0.15);
}


/* PASS NAME */
.schneetoni-paesse .schneetoni-pass-card__name {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 10px;
    color: #002a66; /* Schneetoni Blau */
}


/* STATUS BADGES */
.schneetoni-pass-card.is-open .schneetoni-pass-card__status-label {
    background: rgba(34, 134, 58, 0.15);
    color: #22863a;
}

.schneetoni-pass-card.is-closed .schneetoni-pass-card__status-label {
    background: rgba(176, 0, 32, 0.15);
    color: #b00020;
}

.schneetoni-pass-card.is-limited .schneetoni-pass-card__status-label {
    background: rgba(255, 180, 0, 0.18);
    color: #9b6b00;
}

.schneetoni-paesse .schneetoni-pass-card__status-label {
    display: inline-block;
    padding: 6px 12px;
    font-size: 13px;
    border-radius: 50px;
    font-weight: 600;
    margin-bottom: 10px;
}


/* META ICON ROW */
.schneetoni-paesse .schneetoni-pass-card__meta {
    margin-top: 15px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
}

.schneetoni-pass-card__meta-item {
    font-size: 14px;
    font-weight: 500;
    color: #3a3a3a;
}


/* BUTTON */
.schneetoni-paesse .schneetoni-pass-card__link {
    display: inline-block;
    margin-top: 12px;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 8px;
    background: #003c99;
    color: #ffffff;
    text-decoration: none;
    transition: background 0.2s ease;
}

.schneetoni-pass-card__link:hover {
    background: #0051cc;
}
/* ================================
   PREMIUM HERO
   ================================ */
.schneetoni-passes-hero {
    width: 100%;
    padding: 70px 20px 60px;
    text-align: center;
    color: #ffffff;
    background: linear-gradient(
        rgba(0, 53, 122, 0.65),
        rgba(0, 53, 122, 0.65)
    ),
    url('https://schneetoni.ch/wp-content/uploads/2023/12/alpenpass.jpg') center/cover no-repeat;
    border-radius: 0 0 25px 25px;
    margin-bottom: 40px;
}

.schneetoni-passes-hero h1 {
    font-family: 'Inter', sans-serif;
    font-size: 42px;
    font-weight: 800;
    margin: 0 0 10px;
}

.schneetoni-passes-hero p {
    font-size: 20px;
    font-weight: 300;
    opacity: 0.9;
    margin: 0;
}

/* ================================
   CARD GRID (Plugin Layout Upgrade, 3/4 Spalten steuerbar)
   ================================ */
.schneetoni-paesse .schneetoni-paesse__grid {
  --st-pass-grid-cols-desktop: 3;
  display: grid;
  grid-template-columns: repeat(var(--st-pass-grid-cols-desktop), minmax(0, 1fr));
  gap: 22px;
  padding: 0 20px 40px;
}

/* 4-Spalten-Layout für das Plugin-Grid */
.schneetoni-paesse.st-cols-4 .schneetoni-paesse__grid {
  --st-pass-grid-cols-desktop: 4;
}

/* explizite 3-Spalten-Variante (Fallback) */
.schneetoni-paesse.st-cols-3 .schneetoni-paesse__grid {
  --st-pass-grid-cols-desktop: 3;
}

/* ================================
   CARD STYLING
   ================================ */
.schneetoni-paesse .schneetoni-pass-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 22px;
    box-shadow: 0 7px 22px rgba(0,0,0,0.08);
    border: 1px solid rgba(255,255,255,0.25);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.schneetoni-pass-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 25px rgba(0,0,0,0.15);
}

/* PASS NAME */
.schneetoni-pass-card__name {
    font-size: 20px !important;
    font-weight: 700 !important;
    margin-bottom: 10px;
    color: #002a66 !important;
}

/* STATUS BADGE */
.schneetoni-pass-card__status-label {
    display: inline-block;
    padding: 6px 12px;
    font-size: 13px !important;
    border-radius: 999px;
    font-weight: 600 !important;
    margin-bottom: 10px;
}

.schneetoni-pass-card.is-open .schneetoni-pass-card__status-label {
    background: rgba(34, 134, 58, 0.15);
    color: #22863a;
}

.schneetoni-pass-card.is-closed .schneetoni-pass-card__status-label {
    background: rgba(176, 0, 32, 0.15);
    color: #b00020;
}

.schneetoni-pass-card.is-limited .schneetoni-pass-card__status-label {
    background: rgba(255, 180, 0, 0.18);
    color: #9b6b00;
}

/* META */
.schneetoni-pass-card__meta {
    margin-top: 15px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px 22px !important;
}

.schneetoni-pass-card__meta-item {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #3a3a3a !important;
}

/* BUTTON */
.schneetoni-pass-card__link {
    display: inline-block !important;
    margin-top: 12px !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    background: #003c99 !important;
    color: #ffffff !important;
    text-decoration: none !important;
    transition: background 0.2s ease !important;
}

.schneetoni-pass-card__link:hover {
    background: #0051cc !important;
}
/***************************************************
 * Alpenpässe – Premium-Layout (Cards + Magazin)
 * orientiert an den Wetterkarten
 ***************************************************/

/* ---------- Grundlayout für die Pässe-Grid ---------- */

.pass-wrapper {
  max-width: 1200px;
  margin: 0 auto 2.5rem;
  padding: 0 16px 32px;
}

/* 4-Spalten-Layout für die Pässe-Grid-Wrapper */
/* explizit 3 Spalten (Fallback) */
/* falls der Wrapper bei dir anders heisst:
   .pass-grid oder .alpenpaesse-grid o.ä. – dann hier
   den Klassennamen entsprechend anpassen. */

/* ---------- einzelne Pass-Karte ---------- */

.pass-card {
  position: relative;
  background: linear-gradient(145deg, #ffffff 0%, #f5fafc 40%, #f1f5f9 100%);
  border-radius: 24px;
  padding: 20px 22px 18px;
  box-shadow: 0 18px 45px rgba(10, 24, 55, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.7);
  overflow: hidden;
}

/* dezenter „Glanz“ oben links – wie bei den Wetterkarten */

.pass-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 0 0, rgba(255,255,255,0.9), transparent 60%);
  opacity: 0.5;
  pointer-events: none;
}

/* Inhalt der Pass-Card sauber ausrichten */

.pass-card-inner {
  position: relative;
  z-index: 1;
}

/* Name / Titel des Passes */

.pass-card h3,
.pass-card .pass-name {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 4px;
  color: #101828;
}

/* kleine Länder-Badge oben rechts (z.B. CH, AT/IT usw.) */

.pass-card .country-tag {
  position: absolute;
  top: 14px;
  right: 18px;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.06);
  color: #111827;
}

/* Meta-Zeile (Höhe, Land/Kanton etc.) */

.pass-card .pass-meta {
  font-size: 0.84rem;
  color: #4b5563;
  margin-bottom: 10px;
}

/* Wetter-Box im Pass (gleicher Stil wie deine Wetterkarten) */

.pass-card .pass-weather {
  margin-top: 8px;
  margin-bottom: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.03);
  font-size: 0.85rem;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px 12px;
}

/* ganz unten: Status „Offen“ / „Geschlossen“ prominent */

.pass-card .pass-status {
  margin-top: 4px;
  font-weight: 700;
  font-size: 0.9rem;
}

/* grün für offen */

.pass-card.pass-open .pass-status {
  color: #047857;
}

/* rot für Wintersperre / geschlossen */

.pass-card.pass-closed .pass-status {
  color: #b91c1c;
}

/* ---------- Alpenpässe-Magazin: Wrapper ---------- */

.alpenmagazin-wrapper {
  max-width: 1200px;
  margin: 0 auto 3rem;
  padding: 0 16px 48px;
}

/* Überschrift über dem Magazin-Bereich */

.alpenmagazin-wrapper h2 {
  font-size: 1.3rem;
  font-weight: 800;
  margin-bottom: 2px;
}

.alpenmagazin-wrapper p.alpenmagazin-subtitle {
  font-size: 0.9rem;
  color: #6b7280;
  margin-bottom: 18px;
}

/* Grid der Artikel-Cards */

.alpenmagazin-grid {
  --st-alpenmagazin-cols-desktop: 3;
  display: grid;
  grid-template-columns: repeat(var(--st-alpenmagazin-cols-desktop), minmax(0, 1fr));
  gap: 22px;
}

/* 4-Spalten-Layout für das Alpenmagazin */
.alpenmagazin-wrapper.alpenmagazin--cols-4 .alpenmagazin-grid {
  --st-alpenmagazin-cols-desktop: 4;
}

/* explizite 3-Spalten-Variante (Fallback) */
.alpenmagazin-wrapper.alpenmagazin--cols-3 .alpenmagazin-grid {
  --st-alpenmagazin-cols-desktop: 3;
}

/* einzelne Magazin-Card – an Wetterkarten angelehnt */

.alpenmagazin-card {
  position: relative;
  background: linear-gradient(145deg, #ffffff 0%, #f7fafc 40%, #eff4fb 100%);
  border-radius: 22px;
  padding: 16px 18px 18px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.16);
  border: 1px solid rgba(255,255,255,0.7);
  overflow: hidden;
}

.alpenmagazin-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 0 0, rgba(255,255,255,0.9), transparent 55%);
  opacity: 0.55;
  pointer-events: none;
}

.alpenmagazin-card-inner {
  position: relative;
  z-index: 1;
}

/* Titel des Artikels */

.alpenmagazin-card h3 {
  font-size: 0.95rem;
  font-weight: 800;
  margin: 0 0 6px;
  color: #111827;
}

/* Meta-Zeile (Datum, Kategorie falls vorhanden) */

.alpenmagazin-card .post-meta {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #9ca3af;
  margin-bottom: 6px;
}

/* Text-Teaser */

.alpenmagazin-card p {
  font-size: 0.86rem;
  line-height: 1.5;
  color: #374151;
  margin: 0;
}

/* „Weiterlesen“-Link (falls du einen ausgibst) */

.alpenmagazin-card a.read-more {
  display: inline-flex;
  align-items: center;
  margin-top: 10px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #0369a1;
}

/* ---------- Responsives Verhalten ---------- */

@media (max-width: 768px) {
  .pass-wrapper {
    gap: 18px;
  }

  .pass-card {
    border-radius: 18px;
    padding: 16px 16px 14px;
  }

  .alpenmagazin-wrapper {
    padding-bottom: 32px;
  }

  .alpenmagazin-card {
    border-radius: 18px;
    padding: 14px 15px 15px;
  }
}
/* ===========================
   Alpenpässe-Magazin (Premium)
   =========================== */

.st-passes-magazine {
  max-width: 1320px;
  margin: 4rem auto 5rem;
  padding: 0 1.5rem;
}

.st-passes-magazine-header {
  margin-bottom: 2rem;
}

.st-passes-magazine-header h2 {
  font-size: 1.9rem;
  font-weight: 700;
  margin: 0 0 0.35rem;
}

.st-passes-magazine-header p {
  margin: 0;
  font-size: 0.98rem;
  color: #6b7280; /* hellgrau wie auf anderen Info-Texten */
}

/* Grid mit Karten – 3/4 Spalten steuerbar */
.st-passes-magazine-grid {
  --st-passes-mag-cols-desktop: 3;
  display: grid;
  grid-template-columns: repeat(var(--st-passes-mag-cols-desktop), minmax(0, 1fr));
  gap: 1.75rem;
}

/* Modifier: 3 oder 4 Spalten (Desktop) */
.st-passes-magazine.st-cols-3 .st-passes-magazine-grid {
  --st-passes-mag-cols-desktop: 3;
}

.st-passes-magazine.st-cols-4 .st-passes-magazine-grid {
  --st-passes-mag-cols-desktop: 4;
}

.st-passes-magazine-card {
  background: #ffffff;
  border-radius: 24px;
  padding: 1.5rem 1.75rem;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.12);
  border: 1px solid rgba(148, 163, 184, 0.32);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}

.st-passes-magazine-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 0.75rem;
  text-decoration: none;
  color: inherit;
}

.st-passes-magazine-title {
  font-size: 1.05rem;
  line-height: 1.35;
  margin: 0;
}

.st-passes-magazine-excerpt {
  margin: 0;
  font-size: 0.95rem;
  color: #4b5563;
}

.st-passes-magazine-meta {
  margin-top: auto;
  font-size: 0.82rem;
  color: #9ca3af;
}

/* Hover-Effekt, leicht schwebend wie Premium-Karten */

.st-passes-magazine-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 80px rgba(15, 23, 42, 0.18);
  border-color: rgba(56, 189, 248, 0.6); /* dezenter blau/türkis Akzent */
}

/* Mobile Feintuning */

@media (max-width: 768px) {
  .st-passes-magazine {
    margin-top: 3rem;
  }

  .st-passes-magazine-card {
    border-radius: 18px;
    padding: 1.25rem 1.4rem;
  }
}
/* ===========================================
   Alpenpässe-Magazin – Beitragsbilder (Premium)
   =========================================== */

.st-passes-magazine-thumb {
  width: 100%;
  height: 180px;
  overflow: hidden;
  border-radius: 18px;
  margin-bottom: 1rem;
  box-shadow: 0 12px 30px rgba(0,0,0,0.12);
}

.st-passes-magazine-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}

/* Premium Hover */
.st-passes-magazine-card:hover .st-passes-magazine-thumb img {
  transform: scale(1.08);
}
/* Gemeinsame Breite für Pässe-Grid und Magazin-Grid */
.pass-wrapper,
.st-passes-magazine {
  max-width: 1200px;   /* oder der Wert, den du oben schon verwendest */
  margin: 0 auto 4rem; /* zentriert + Abstand nach unten */
  padding: 0 1.5rem;   /* Innenabstand links/rechts */
}
/* unter ~1100px: 2 Spalten */
@media (max-width: 1100px) {
  .st-passes-magazine-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* unter ~700px: 1 Spalte */
@media (max-width: 700px) {
  .st-passes-magazine-grid {
    grid-template-columns: 1fr;
  }
} /* ===========================
   Alpenpässe-Seite: einheitliche Breite (Variante A)
   =========================== */

/* Gilt nur für die Alpenpässe-Premium-Seite */
.page-template-page-alpenpaesse .st-alpen-frame {
    max-width: 1200px;       /* Magazin-Breite – bei Bedarf anpassen */
    margin: 0 auto 60px;     /* mittig + unten Abstand */
    padding: 0 20px;         /* links/rechts Luft, wie Startseite */
}

/* Abstand zwischen Hero und den Modulen */
.page-template-page-alpenpaesse .schneetoni-passes-hero {
    margin-bottom: 24px;
}

/* Abstand zwischen den Karten-Blöcken (Pässe/Tunnel/Verlade/Magazin) */
.page-template-page-alpenpaesse .pass-wrapper {
    margin-top: 0;
    margin-bottom: 40px;
}
/* ===========================================
   Alpenpässe – Grid Responsive Fix (Mobile/Tablet)
   =========================================== */

/* Tablet: 2 Spalten */
@media (max-width: 1100px) {
  .schneetoni-paesse .schneetoni-paesse__grid {
    --st-pass-grid-cols-desktop: 2;
  }
}

/* Mobile: 1 Spalte */
@media (max-width: 700px) {
  .schneetoni-paesse .schneetoni-paesse__grid {
    --st-pass-grid-cols-desktop: 1;
  }
}
/* ===========================================
   Schneetoni – Alpenpässe (MASTER BLOCK)
   -> Dieser Block ist die EINZIGE Quelle für Alpenpässe-Fixes.
   -> Bei Updates: DIESEN BLOCK ERSETZEN, nicht erweitern.
   =========================================== */

/* ---------- Rhythmus oben / Controls ---------- */
@media (max-width: 768px){
  .schneetoni-paesse{
    padding-left: 16px;
    padding-right: 16px;
  }

  .schneetoni-paesse__header-row{ margin: 0 0 10px; }
  .schneetoni-paesse__legend{ margin: 0 0 14px; gap: 10px; }
  .schneetoni-paesse__search{ margin: 0 0 12px; }
  .schneetoni-paesse__filter{
    margin: 0 0 18px;
    gap: 10px;
    flex-wrap: wrap;
  }

  .schneetoni-paesse__grid{
    padding: 0 0 28px;
    gap: 14px;
  }
}

/* ---------- Suche ---------- */
.schneetoni-paesse__search{ position: relative; }

.schneetoni-paesse__search-input{
  width: 100%;
  height: 46px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,.45);
  background: rgba(255,255,255,.92);
  box-shadow: 0 10px 22px rgba(15,23,42,.10);
  padding: 0 14px 0 42px;
  font-size: 16px;
  font-weight: 500;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.schneetoni-paesse__search-input:focus{
  border-color: rgba(11,95,165,.55);
  box-shadow: 0 14px 30px rgba(15,23,42,.14);
}

.schneetoni-paesse__search-input::placeholder{
  color: rgba(15,23,42,.45);
}

.schneetoni-paesse__search::before{
  content: "🔍";
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  opacity: .55;
  pointer-events: none;
}

/* ---------- Filter Pills ---------- */
.schneetoni-paesse__filter > *{
  height: 42px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  line-height: 1;
}

/* ---------- Pass Cards ---------- */
.schneetoni-pass-card{
  background: rgba(255,255,255,0.94);
  border: 1px solid rgba(148,163,184,0.28);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 14px 34px rgba(15,23,42,0.10);
  transition: transform .2s ease, box-shadow .2s ease;
  position: relative;
  overflow: hidden;
}

.schneetoni-pass-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: radial-gradient(circle at 0 0, rgba(255,255,255,0.75), transparent 55%);
  opacity:.55;
}

.schneetoni-pass-card.is-open{ border-color: rgba(34,197,94,0.35); }
.schneetoni-pass-card.is-closed{
  opacity: 0.92;
  border-color: rgba(239,68,68,0.30);
}

@media (hover:hover){
  .schneetoni-pass-card:hover{
    transform: translateY(-2px);
    box-shadow: 0 18px 40px rgba(15,23,42,0.14);
  }
}

@media (max-width: 768px){
  .schneetoni-pass-card{
    padding: 16px;
    border-radius: 16px;
  }
}
/* ==========================================================
   Alpenpässe – Premium Finish (v11)
   Ziel: gleiche "Premium"-Anmutung wie Startseite (Tiefe/Background),
         Controls (Suche/Filter) sauber mittig ausgerichtet.
   Scope: nur Alpenpässe-Template
   ========================================================== */

.page-template-page-alpenpaesse{
  /* weicher "Startseiten"-Look: leichter Verlauf statt flaches Weiss */
  background: linear-gradient(180deg, #f5fbff 0%, #eaf3ff 55%, #f7fbff 100%);
}

/* Inhalt wie ein "Glas/Panel" – gibt Tiefe wie auf der Startseite */
.page-template-page-alpenpaesse .schneetoni-paesse{
  background: rgba(255,255,255,0.82);
  border: 1px solid rgba(148,163,184,0.20);
  border-radius: 28px;
  box-shadow: 0 18px 48px rgba(15,23,42,0.10);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 22px 18px 26px;
}

/* Mobile: Panel nicht "kleben" lassen */
@media (max-width: 768px){
  .page-template-page-alpenpaesse .pass-wrapper{
    padding-left: 16px;
    padding-right: 16px;
  }
  .page-template-page-alpenpaesse .schneetoni-paesse{
    padding: 18px 14px 22px;
    border-radius: 24px;
  }
}

/* Controls (Header/Legende/Suche/Filter) in eine gemeinsame Mittelachse */
@media (max-width: 900px){
  .page-template-page-alpenpaesse .schneetoni-paesse__header-row,
  .page-template-page-alpenpaesse .schneetoni-paesse__legend,
  .page-template-page-alpenpaesse .schneetoni-paesse__search,
  .page-template-page-alpenpaesse .schneetoni-paesse__filter{
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Suche: echte Premium-Optik (kein Emoji), sauber zentriert */
.page-template-page-alpenpaesse .schneetoni-paesse__search{
  position: relative;
}

.page-template-page-alpenpaesse .schneetoni-paesse__search::before{
  content: "";
  position: absolute;
  left: 18px;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  pointer-events: none;
  opacity: 0.55;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
  /* simple inline SVG Lupe */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2364758b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
}

.page-template-page-alpenpaesse .schneetoni-paesse__search-input{
  display: block;
  width: 100%;
  max-width: 560px; /* zentriert wie Cards/Controls */
  margin: 0 auto;
  height: 44px; /* etwas kompakter */
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.35);
  background: rgba(255,255,255,0.92);
  box-shadow: 0 14px 34px rgba(15,23,42,0.10);
  padding: 0 16px 0 46px; /* Platz für SVG-Lupe */
  font-size: 16px;
  font-weight: 500;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.page-template-page-alpenpaesse .schneetoni-paesse__search-input:focus{
  border-color: rgba(11,95,165,0.55);
  box-shadow: 0 18px 45px rgba(15,23,42,0.12);
}

.page-template-page-alpenpaesse .schneetoni-paesse__search-input::placeholder{
  color: rgba(15,23,42,0.42);
}

/* Filter-Pills mittig und gleichmässig */
.page-template-page-alpenpaesse .schneetoni-paesse__filter{
  justify-content: center;
}

/* Cards: Border etwas ruhiger (weniger "billig-grün"), mehr premium */
.page-template-page-alpenpaesse .schneetoni-pass-card{
  border-color: rgba(148,163,184,0.22);
}
.page-template-page-alpenpaesse .schneetoni-pass-card.is-open{
  border-color: rgba(34,197,94,0.22);
}
.page-template-page-alpenpaesse .schneetoni-pass-card.is-closed{
  border-color: rgba(239,68,68,0.18);
}


/* Suchfeld: kompakter (Höhe/Typo/Padding) – bleibt zentriert */
  .page-template-page-alpenpaesse .schneetoni-paesse__search{
    max-width: 300px;                 /* leicht kompakter als vorher */
    margin-left: auto;
    margin-right: auto;
  }

  .page-template-page-alpenpaesse .schneetoni-paesse__search-input{
    height: 42px !important;          /* vorher oft 46px */
    font-size: 15px !important;       /* minimal kleiner */
    padding: 0 18px 0 40px !important;/* weniger „Bauch“, Icon bleibt */
    border-radius: 999px !important;
  }

  /* Such-Icon etwas kleiner/ruhiger, falls per Pseudo-Element gesetzt */
  .page-template-page-alpenpaesse .schneetoni-paesse__search::before{
    transform: translateY(-50%) scale(0.92);
    opacity: 0.55;
  }
}


.page-template-page-alpenpaesse .schneetoni-paesse__search-input{
    width: 100% !important;
    max-width: 300px !important;
  }
}


/* =========================================================
   Alpenpässe – Suche Mobile: zentriert + max 300px Breite
   (robust, unabhängig vom Page-Template)
   ========================================================= */
@media (max-width: 700px){
  .schneetoni-paesse__search{
    max-width: 300px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .schneetoni-paesse__search-input{
    width: 100% !important;        /* füllt die 300px-Box */
    max-width: 300px !important;
    padding-right: 1.25rem !important; /* weniger „Luft“, wirkt premium */
  }
}

/* Falls irgendwo noch ein dunkler Seitenhintergrund durchscheint */
body{
  background: #fff;
}


/* =========================================================
   Alpenpässe – Suche: zentriert wie in der funktionierenden Version
   Ziel: Suchfeld optisch mittig / gleiche Achse wie Cards (Mobile)
   ========================================================= */
.schneetoni-paesse__search{
  width: 100%;
}

@media (max-width: 768px){
  /* Container zentriert den Inhalt zuverlässig */
  .schneetoni-paesse__search{
    display: flex;
    justify-content: center;
  }

  /* Input bleibt 100% – aber innerhalb der gleichen „Card“-Achse */
  .schneetoni-paesse__search-input{
    width: 100%;
    max-width: 640px;
  }
}
/* =========================================================
   Mobile Header Menü-Button (Hamburger) – Clickbar Fix
   ========================================================= */

/* Sicherheitsnetz: Header immer über Content */
.st-header,
.site-header,
header.st-header {
  position: relative;
  z-index: 9999;
}

/* Menü-Button/Toggle klickbar machen (verschiedene mögliche Klassen/Strukturen) */
.st-header .st-nav-toggle,
.st-header .menu-toggle,
.st-header .hamburger,
.st-header button[aria-controls],
.st-header a[aria-controls],
.st-header .st-burger,
.st-header .st-header__menu,
.st-header .st-header__toggle {
  position: relative !important;
  z-index: 10000 !important;
  pointer-events: auto !important;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Größere Touch-Fläche (auch wenn Icon klein ist) */
.st-header .st-nav-toggle,
.st-header .menu-toggle,
.st-header .hamburger,
.st-header .st-burger,
.st-header .st-header__menu,
.st-header .st-header__toggle {
  min-width: 48px;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Falls ein Overlay/Gradient über dem Header liegt und Klicks "frisst" */
.st-header::before,
.st-header::after,
.st-hero::before,
.st-hero::after,
.schneetoni-hero::before,
.schneetoni-hero::after {
  pointer-events: none !important;
}

/* ======================================================================
   SchneeToni – Mobile Menu Drawer (Clickbar)
   Aktiviert über body.st-menu-open (gesetzt via JS in functions.php)
   ====================================================================== */

@media (max-width: 959px) {
  /* Drawer */
  .st-nav{
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: min(340px, 86vw);
    padding: 92px 18px 22px;
    display: flex !important;
    flex-direction: column;
    gap: 12px;

    background: rgba(6, 18, 38, 0.62);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    border-left: 1px solid rgba(255,255,255,0.12);
    box-shadow: -20px 0 60px rgba(0,0,0,0.28);

    transform: translateX(110%);
    transition: transform .28s ease;
    z-index: 9998;
  }

  body.st-menu-open .st-nav{
    transform: translateX(0);
  }

  /* Links */
  .st-nav a{
    display: block;
    padding: 12px 14px;
    border-radius: 14px;
    color: rgba(255,255,255,0.92);
    text-decoration: none;
    font-weight: 700;
    letter-spacing: .2px;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.08);
  }
  .st-nav a:hover{
    background: rgba(255,255,255,0.14);
  }

  /* Backdrop */
  .st-menu-backdrop{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.38);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease;
    z-index: 9997;
  }
  body.st-menu-open .st-menu-backdrop{
    opacity: 1;
    pointer-events: auto;
  }
}

/* Desktop: Toggle-Button ausblenden (Nav ist ohnehin sichtbar) */
@media (min-width: 960px){
  .st-menu-toggle{ display:none !important; }
} /* =========================================
   SchneeToni Ads – Header Wideboard Slot
========================================= */

.st-ad-slot--header {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 24px 0;
}

.st-ad-slot--header .st-ad-inner {
  max-width: 1200px;
  width: 100%;
}


/* =========================================
   SchneeToni Ads – FINAL SLOTS (AUTO)
   Header / Sidebar / Mobile / Footer
========================================= */

.st-ad-slot {
  width: 100%;
  display: flex;
  justify-content: center;
}

.st-ad-inner {
  width: 100%;
  max-width: 1200px;
}

/* Header Wideboard */
.st-ad-slot--header {
  padding: 24px 0 16px;
}

/* Sidebar Rectangle */
.st-ad-slot--sidebar {
  padding: 16px 0;
}

/* Mobile under content */
.st-ad-slot--mobile-under-content {
  padding: 24px 0;
}

/* Footer Leaderboard */
.st-ad-slot--before-footer {
  padding: 32px 0;
}


/* ============================================================
   SCHNEETONI ADS – Layout Fix (Theme)
   Ziel:
   - Keine doppelte „wide-top“ Auto-Injection auf Desktop
   - Header/Wideboard/Leaderboard sauber zentriert & ohne riesige Margins
   - Vor-Footer Slots: Desktop only
   ============================================================ */

/* 1) Falls das Plugin zusätzlich ein „wide-top“ automatisch injiziert:
      -> auf Desktop verstecken (wir nutzen den Header-Slot im Theme) */
@media (min-width: 960px){
  .st-ads--iswide-top{ display:none !important; }
}

/* 2) Basis: Slots ohne wilde Abstände */
.st-ad-slot{
  margin: 0;
  padding: 18px 0;
}
.st-ad-slot .st-ad,
.st-ad-slot .st-ad *{
  box-sizing: border-box;
}

/* 3) Inner: zentrieren & Breite begrenzen */
.st-ad-slot .st-ad-inner{
  width: 100%;
  max-width: var(--st-container-max, 1180px);
  margin: 0 auto;
  padding: 0 var(--st-container-pad, 24px);
}

/* 4) Header + Before-Footer: echte Banner-Breite „mitwachsen“ lassen */
@media (min-width: 960px){
  .st-ad-slot--header .st-ad-inner,
  .st-ad-slot--before-footer-wideboard .st-ad-inner{
    max-width: 994px; /* Wideboard max */
  }
  .st-ad-slot--before-footer-leaderboard .st-ad-inner{
    max-width: 728px; /* Leaderboard max */
  }
}

/* 5) Plugin-Default-Margins killen (diese sorgen aktuell für „falsch“) */
.st-ad-slot .st-ad{
  margin: 0 !important;
  padding: 0 !important;
}

/* 6) Iframes/Bilder sauber zentrieren */
.st-ad-slot iframe,
.st-ad-slot img{
  display: block;
  margin: 0 auto;
  max-width: 100%;
}

/* 7) Vor Footer etwas mehr Luft */
.st-ad-slot--before-footer{
  padding: 26px 0;
}

/* ======================================================
   SCHNEETONI – PARTNER / SPONSOR / MARKENBOTSCHAFTER
   PREMIUM STUFEN (GLOBAL)
   ====================================================== */

/* Grund-Reset (nur für Partner & Sponsoren, NICHT Anzeigen) */
.st-kind-partner,
.st-kind-sponsor,
.st-kind-markenbotschafter {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
}

/* ======================================================
   EIS – GOLD PARTNER
   ====================================================== */
.st-tier-eis {
  border: 1px solid rgba(15, 23, 42, 0.14);
  background: #ffffff;
  padding: 12px;
}

/* ======================================================
   GLETSCHER – PLATIN PARTNER
   ====================================================== */
.st-tier-gletscher {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(15, 23, 42, 0.18);
  padding: 14px;
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* ======================================================
   AURORA – SIGNATURE / DIAMOND (Farbverlauf-Rahmen)
   ====================================================== */
.st-tier-aurora {
  padding: 14px;
  border-radius: 20px;
  border: 1px solid transparent;
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(
      135deg,
      rgba(120, 180, 255, 0.45),
      rgba(180, 120, 255, 0.45),
      rgba(120, 220, 200, 0.45)
    ) border-box;
  box-shadow:
    0 14px 40px rgba(0, 0, 0, 0.14);
}

/* ======================================================
   NICHT für klassische Anzeigen
   ====================================================== */
.st-kind-anzeige {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
}

/* ======================================================
   PARTNER SUBLINE (unter Logo / Name)
   ====================================================== */
.st-partner-subline {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.2;
  color: rgba(15, 23, 42, 0.65);
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.st-tier-aurora .st-partner-subline {
  color: rgba(15, 23, 42, 0.75);
  font-weight: 600;
}

/* ======================================================
   BEREICHS BRANDING (Wetter / Alpenpässe / News etc.)
   ====================================================== */
.st-area-branding {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 18px 0;
  font-size: 13px;
  color: rgba(15, 23, 42, 0.75);
}

.st-area-label {
  font-weight: 500;
}

.st-area-partner {
  font-weight: 700;
  white-space: nowrap;
}

.st-area-branding.st-tier-aurora {
  padding: 6px 12px;
  border-radius: 999px;
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(
      135deg,
      rgba(120, 180, 255, 0.35),
      rgba(180, 120, 255, 0.35),
      rgba(120, 220, 200, 0.35)
    ) border-box;
  border: 1px solid transparent;
}

/* ======================================================
   SCHNEETONI PREMIUM WEATHER – PHASE 2
   Icons & Schnee-Ampel (scoped)
   ====================================================== */

/* ---- Emoji/Icon-Chips (Current header icon) ---- */
#stp-premium-weather .alfa-premium-icon{
  width: 72px;
  height: 72px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 34px;
  line-height: 1;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,0.95), rgba(255,255,255,0.70) 45%, rgba(255,255,255,0.30) 100%),
    linear-gradient(135deg, rgba(37,99,235,0.18), rgba(34,197,94,0.12));
  border: 1px solid rgba(226,232,240,0.95);
  box-shadow:
    0 18px 48px rgba(15,23,42,0.16),
    inset 0 1px 0 rgba(255,255,255,0.85);
}

/* Kleine Icons (Header-Leiste im Theme) */
#stp-premium-weather .st-header-weather-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: rgba(255,255,255,0.82);
  border: 1px solid rgba(226,232,240,0.95);
  box-shadow: 0 10px 26px rgba(15,23,42,0.12);
  font-size: 18px;
  line-height: 1;
}

/* ---- Tages/ Stunden-Kacheln: Icon + Zahlen harmonisieren ---- */
#stp-premium-weather .alfa-premium-day-icon,
#stp-premium-weather .alfa-premium-hour-icon{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  font-size: 22px;
  line-height: 1;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,0.95), rgba(255,255,255,0.75) 55%, rgba(255,255,255,0.35) 100%),
    linear-gradient(135deg, rgba(37,99,235,0.12), rgba(14,165,233,0.08));
  border: 1px solid rgba(226,232,240,0.95);
  box-shadow: 0 12px 28px rgba(15,23,42,0.10);
}

/* Etwas mehr Luft für Zahl/Einheit unter dem Icon */
#stp-premium-weather .alfa-premium-day-extra,
#stp-premium-weather .alfa-premium-hour-raintext{
  margin-top: 4px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* ---- Schnee-Ampel (optional; wird später im PHP eingebaut) ----
   Erwartetes Markup:
   <div class="alfa-snow-ampel" data-level="green|yellow|red">
     <span class="alfa-snow-ampel-dot alfa-snow-ampel-dot--green"></span>
     <span class="alfa-snow-ampel-dot alfa-snow-ampel-dot--yellow"></span>
     <span class="alfa-snow-ampel-dot alfa-snow-ampel-dot--red"></span>
     <span class="alfa-snow-ampel-label">…</span>
   </div>
*/
#stp-premium-weather .alfa-snow-ampel{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.70);
  border: 1px solid rgba(226,232,240,0.95);
  box-shadow: 0 14px 34px rgba(15,23,42,0.10);
  backdrop-filter: blur(10px);
}

#stp-premium-weather .alfa-snow-ampel-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  opacity: 0.28;
  transform: translateZ(0);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.75);
}

#stp-premium-weather .alfa-snow-ampel-dot--green{ background: #22c55e; }
#stp-premium-weather .alfa-snow-ampel-dot--yellow{ background: #f59e0b; }
#stp-premium-weather .alfa-snow-ampel-dot--red{ background: #ef4444; }

#stp-premium-weather .alfa-snow-ampel[data-level="green"] .alfa-snow-ampel-dot--green,
#stp-premium-weather .alfa-snow-ampel[data-level="yellow"] .alfa-snow-ampel-dot--yellow,
#stp-premium-weather .alfa-snow-ampel[data-level="red"] .alfa-snow-ampel-dot--red{
  opacity: 1;
  box-shadow:
    0 0 0 4px rgba(255,255,255,0.60),
    0 10px 22px rgba(15,23,42,0.12);
}

#stp-premium-weather .alfa-snow-ampel-label{
  font-weight: 900;
  letter-spacing: -0.01em;
  color: #0f172a;
  font-size: 0.92rem;
}

/* Mobile: Icon-Chips kleiner */
@media (max-width: 640px){
  #stp-premium-weather .alfa-premium-icon{
    width: 60px;
    height: 60px;
    font-size: 28px;
  }
  #stp-premium-weather .alfa-premium-day-icon,
  #stp-premium-weather .alfa-premium-hour-icon{
    width: 40px;
    height: 40px;
    border-radius: 14px;
    font-size: 20px;
  }
} /* =========================================================
   SCHNEETONI – PREMIUM SKIN (SAUBER, NICHT VERBASTELT)
   Gilt nur innerhalb der Wetterseite
   ========================================================= */

#stp-premium-weather{
  --stp-stroke: rgba(148,163,184,.22);
  --stp-card: rgba(255,255,255,.92);
  --stp-shadow: 0 14px 34px rgba(15,23,42,.10);
  --stp-shadow-hover: 0 18px 48px rgba(15,23,42,.14);
  --stp-radius: 22px;
  --stp-radius-sm: 18px;
  --stp-text:#0f172a;
  --stp-sub:#475569;
  --stp-accent:#2563eb;
}

/* 1) NUR Forecast-Teil anfassen (damit nix anderes leidet) */
#stp-premium-weather .alfa-forecast,
#stp-premium-weather .alfa-hourly{
  /* nichts global überschreiben */
}

/* 2) RESET: alte “Kästchen-Looks” entschärfen */
#stp-premium-weather .alfa-forecast .alfa-day,
#stp-premium-weather .alfa-hourly .alfa-hour{
  box-shadow: none !important;
  outline: none !important;
  filter: none !important;
}

/* 3) Day Cards – clean premium */
#stp-premium-weather .alfa-forecast-days{
  gap: 14px !important;
}

#stp-premium-weather .alfa-forecast .alfa-day{
  border: 1px solid var(--stp-stroke) !important;
  background: var(--stp-card) !important;
  border-radius: var(--stp-radius) !important;
  box-shadow: var(--stp-shadow) !important;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease !important;
  overflow: hidden;
}

#stp-premium-weather .alfa-forecast .alfa-day:hover{
  transform: translateY(-2px);
  box-shadow: var(--stp-shadow-hover) !important;
  border-color: rgba(37,99,235,.26) !important;
}

/* Active Day – subtil, nicht dick */
#stp-premium-weather .alfa-forecast .alfa-day.is-active{
  border-color: rgba(37,99,235,.38) !important;
  box-shadow: 0 0 0 2px rgba(37,99,235,.14), var(--stp-shadow-hover) !important;
}

/* Typo */
#stp-premium-weather .alfa-day .alfa-day-name{
  font-weight: 900 !important;
  color: var(--stp-text) !important;
  letter-spacing: -0.01em;
}
#stp-premium-weather .alfa-day .alfa-day-date{
  color: var(--stp-sub) !important;
  font-weight: 700 !important;
}

/* Temps */
#stp-premium-weather .alfa-day .alfa-temp{
  font-variant-numeric: tabular-nums;
  font-weight: 900 !important;
}
#stp-premium-weather .alfa-day .alfa-mm{
  color: #334155 !important;
  font-weight: 800 !important;
  opacity:.9;
}

/* 4) Hourly – mehr Luft, kein “gequetschtes” UI */
#stp-premium-weather .alfa-hourly-row{
  gap: 12px !important;
}

#stp-premium-weather .alfa-hourly .alfa-hour{
  border: 1px solid var(--stp-stroke) !important;
  background: rgba(255,255,255,.95) !important;
  border-radius: var(--stp-radius-sm) !important;
  box-shadow: 0 12px 26px rgba(15,23,42,.08) !important;
  padding: 12px 14px !important;
  min-height: 72px;
  transition: transform .14s ease, box-shadow .14s ease !important;
}

#stp-premium-weather .alfa-hourly .alfa-hour:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(15,23,42,.12) !important;
}

#stp-premium-weather .alfa-hour .alfa-hour-time{
  font-weight: 900 !important;
  color: var(--stp-text) !important;
}
#stp-premium-weather .alfa-hour .alfa-hour-temp{
  font-weight: 900 !important;
  font-variant-numeric: tabular-nums;
}
#stp-premium-weather .alfa-hour .alfa-hour-wind{
  color: var(--stp-sub) !important;
  font-weight: 700 !important;
}

/* 5) Button “Mehr Wetterdetails” weniger wuchtig */
#stp-premium-weather .stp-weather-details-toggle{
  box-shadow: 0 10px 26px rgba(15,23,42,.12) !important;
  background: linear-gradient(135deg,#2563eb,#1d4ed8) !important;
  padding: 10px 16px !important;
}
/* FIX: Suggest Dropdown Lesbarkeit */
/* =========================================================
   FINAL FIX – Suggest Dropdown komplett lesbar
   ========================================================= */





/* Dark Mode */


/* =========================================================
   FIX: Suggest-Dropdown immer VOR allen Sektionen (z-index)
   ========================================================= */

/* 1) Eltern dürfen das Dropdown nicht abschneiden */
#stp-premium-weather,
#stp-premium-weather .stp-search,
#stp-premium-weather .stp-search-wrap,
#stp-premium-weather .stp-search-form,
#stp-premium-weather .stp-search-area{
  overflow: visible !important;
}

/* 2) Dropdown muss in eigener Ebene ganz oben liegen */

/* 3) Der Input-Block braucht einen Referenz-Container */
#stp-premium-weather .stp-search,
#stp-premium-weather .stp-search-wrap,
#stp-premium-weather .stp-search-form{
  position: relative !important;
  z-index: 99998 !important;
}

/* 4) Alles darunter darf nicht “drüber” liegen */
#stp-premium-weather .stp-weather-result,
#stp-premium-weather .alfa-forecast,
#stp-premium-weather .alfa-hourly{
  position: relative;
  z-index: 1;
}
/* =========================================================
   STP – FIX: Place Suggest Dropdown immer über allem
   Ursache: overflow/stacking context (cards / wrappers / transforms)
   ========================================================= */

#stp-premium-weather{
  position: relative;
  z-index: 1;
}

/* Wrapper der Suche: muss "Anker" sein */
#stp-premium-weather .stp-search,
#stp-premium-weather .stp-search-wrap,
#stp-premium-weather .stp-search-row{
  position: relative !important;
  z-index: 50 !important;
  overflow: visible !important;
}

/* Falls irgendein Parent die Liste abschneidet */
#stp-premium-weather .stp-card,
#stp-premium-weather .stp-panel,
#stp-premium-weather .stp-box,
#stp-premium-weather .stp-content,
#stp-premium-weather .stp-layout,
#stp-premium-weather .stp-premium-shell{
  overflow: visible !important;
}

/* Die Suggest-Liste selbst: IMMER oben */

/* Einträge lesbar (dein Ansatz, aber mit stabilen Layout-Werten) */


/* Falls die Seite Dark-Mode nutzt: bleibt gleich gut lesbar */

/* Safety: Elemente darunter dürfen nicht "drüber" liegen */
#stp-premium-weather .stp-search-suggest,
/* =========================================================
   HARD-FIX: Suggest Dropdown muss IMMER über allem liegen
   (auch wenn irgendwo transform/opacity stacking contexts sind)
   ========================================================= */

/* Wetterseite: generell alles darf sichtbar überlaufen */
#stp-premium-weather,
#stp-premium-weather *{
  transform: none !important;   /* killt Stacking-Context-Fallen */
}

/* Suchbereich auf höchste Ebene innerhalb der Seite */
#stp-premium-weather .stp-search,
#stp-premium-weather .stp-search-wrap,
#stp-premium-weather .stp-searchbar{
  position: relative !important;
  z-index: 2147483000 !important; /* near max */
  overflow: visible !important;
}

/* Dropdown absolut + maximaler z-index */

/* Einträge lesbar */


/* Alles darunter explizit tiefer */
#stp-premium-weather .stp-weather-card,
#stp-premium-weather .alfa-premium-wrap,
#stp-premium-weather .alfa-premium-card,
#stp-premium-weather .alfa-forecast,
#stp-premium-weather .alfa-hourly{
  position: relative !important;
  z-index: 1 !important;
}

/* ============================================================
   STP / ALFA WEATHER – ORT-AUTOCOMPLETE DROPDOWN (PORTAL SAFE)
   - Dropdown wird per JS in <body> verschoben und fixed positioniert.
   - Dadurch: keine overflow/transform/overlay Klick-Probleme mehr.
   ============================================================ */

#stp-search-suggest.stp-search-suggest{
  position: fixed !important;
  z-index: 2147483647 !important;
  pointer-events: auto !important;

  left: 0; top: 0; width: 320px; /* wird per JS gesetzt */
  max-height: 320px !important;
  overflow: auto !important;
  -webkit-overflow-scrolling: touch;

  padding: 6px !important;

  background: rgba(2, 6, 23, 0.98) !important;
  border: 1px solid rgba(148,163,184,.22) !important;
  border-radius: 18px !important;
  box-shadow: 0 22px 60px rgba(15,23,42,.40) !important;
}

#stp-search-suggest.stp-search-suggest[hidden]{ display: none !important; }

#stp-search-suggest.stp-search-suggest button{
  display: block !important;
  width: 100% !important;
  text-align: left !important;

  border: 0 !important;
  background: transparent !important;

  padding: 12px 12px !important;
  border-radius: 12px !important;

  color: #ffffff !important;
  opacity: 1 !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;

  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

#stp-search-suggest.stp-search-suggest button:hover{
  background: rgba(255,255,255,.08) !important;
}

#stp-search-suggest .stp-suggest-sub{
  display: block;
  margin-top: 4px;
  color: rgba(226,232,240,.92) !important;
  font-weight: 650;
  font-size: .88em;
}

/* === STP Suggest Enhancements (Keyboard + Highlight) === */
#stp-search-suggest button.is-active{
  background: rgba(255,255,255,.10) !important;
}
#stp-search-suggest button:focus{
  outline: none !important;
}
#stp-search-suggest .stp-suggest-label{
  display:block;
}
#stp-search-suggest .stp-suggest-mark{
  background: rgba(255,255,255,.16);
  color: inherit;
  padding: 0 .1em;
  border-radius: .35em;
}
#stp-search-suggest{
  touch-action: manipulation;
}

/* === Leaflet Fix: globale img{max-width:100%} bricht Tiles (graue Karte / nur Ecke sichtbar) === */
.leaflet-container img.leaflet-tile,
.leaflet-container .leaflet-tile{
  max-width: none !important;
  max-height: none !important;
  width: 256px !important;
  height: 256px !important;
}
.leaflet-container{
  overflow: hidden;
}