/* =========================================================================
   Redesign-Layer (Eixer See)
   Lädt NACH style.css und überschreibt nur den Hauptbereich:
   Hero-Foto + flaches Daten-Sheet. Modals (Info/Admin/Verlauf) bleiben
   unverändert aus style.css. Alle JS-Hook-IDs sind identisch.
   ========================================================================= */

.redesign{
  --rd-bg:        #0b0f15;
  --rd-sheet:     #10151d;
  --rd-card:      #171d27;
  --rd-card-2:    #1c2330;
  --rd-border:    rgba(255,255,255,.07);
  --rd-text:      #f4f5f7;
  --rd-muted:     rgba(244,245,247,.56);
  --rd-faint:     rgba(244,245,247,.38);
  --rd-accent:    #0A84FF;
  --rd-water:     #2ec9d6;
  --rd-radius:    18px;
}

/* ===== Grundlayout: scrollbar statt Vollbild-Lock ===== */
body.redesign{
  margin:0;
  min-height:100%;
  background:var(--rd-bg);
  color:var(--rd-text);
  overflow-x:hidden;
  overflow-y:auto;
}

/* ===== Hintergrundfoto: nur oben, fließt ins Sheet über ===== */
body.redesign .bg-wrap{
  position:fixed;
  top:0; left:0; right:0;
  height:52vh;
  z-index:0;
  background-position:center 68%;
  background-size:cover;
  filter:contrast(1.06) saturate(1.08);
}
body.redesign .bg-wrap::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,
    rgba(11,15,21,.10) 0%,
    rgba(11,15,21,.05) 45%,
    rgba(11,15,21,.55) 80%,
    var(--rd-bg) 100%);
}

/* ===== Seitencontainer ===== */
.redesign .page{
  position:relative;
  z-index:1;
  max-width:600px;
  margin:0 auto;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

/* ===== HERO ===== */
.redesign .hero{
  position:relative;
  z-index:1;
  min-height:46vh;
  padding:calc(env(safe-area-inset-top,0px) + 14px) 18px 30px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  color:#fff;
}


/* Hero ohne die Buttons: Titelblock nach unten */
.redesign .hero{ justify-content:flex-end; }


.redesign .hero-meta{ width:fit-content; }

.redesign .hero-badge{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:5px 12px;
  margin-bottom:12px;
  border-radius:999px;
  background:rgba(15,110,86,.46);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.01em;
  color:#eafff7;
}
.redesign .hero-dot{
  position:relative;
  width:8px; height:8px;
  border-radius:50%;
  background:#48e0a8;
  box-shadow:0 0 0 3px rgba(72,224,168,.22);
}
@keyframes rd-ping{
  0%  { transform:scale(1);   opacity:.7; }
  100%{ transform:scale(2.8); opacity:0;  }
}
.redesign .hero-dot.is-live::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  background:#48e0a8;
  animation:rd-ping 1.8s ease-out infinite;
}
.redesign .hero-place{
  margin:0;
  font-size:34px;
  font-weight:700;
  line-height:1.1;
  letter-spacing:-.02em;
  text-shadow:0 2px 16px rgba(4,12,20,.55);
}
.redesign .hero-sub{
  margin-top:6px;
  font-size:14.5px;
  font-weight:600;
  color:rgba(255,255,255,.9);
  text-shadow:0 1px 12px rgba(4,12,20,.5);
}

/* ===== SHEET ===== */
.redesign .sheet{
  position:relative;
  z-index:2;
  flex:1;
  display:flex;
  flex-direction:column;
  margin-top:-24px;
  padding:24px 16px calc(env(safe-area-inset-bottom,0px) + 28px);
  background:var(--rd-sheet);
  border-radius:26px 26px 0 0;
  box-shadow:0 -10px 34px rgba(0,0,0,.4);
}

/* Drag-Pille entfernt – an dieser Stelle steht jetzt der "Stand: … Uhr". */
.redesign .sheet::before{ display:none; }

/* ===== Vollständige Wartungsseite (maintenance.php) ===== */
body.maintenance-body{
  min-height:100vh;
  background:var(--rd-bg);
  color:var(--rd-text);
  margin:0;
}
/* Hintergrundbild per Stylesheet (CSP verbietet Inline-Styles). Vollbild. */
body.maintenance-body .maintenance-bg{
  position:fixed;
  inset:0;
  height:100vh;
  z-index:0;
  background-image:url('/assets/img/wallpaper.webp');
  background-position:center center;
  background-size:cover;
  background-repeat:no-repeat;
  filter:brightness(.55) saturate(1.05);
}
body.maintenance-body .maintenance-bg::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(120% 90% at 50% 30%, rgba(11,15,21,.35), rgba(11,15,21,.85));
}
.maintenance{
  position:relative;
  z-index:2;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:18px;
  padding:32px 20px calc(env(safe-area-inset-bottom,0px) + 28px);
  text-align:center;
}
.maintenance-card{
  max-width:460px;
  background:var(--rd-card);
  border:1px solid var(--rd-border);
  border-radius:var(--rd-radius);
  padding:32px 28px;
  box-shadow:0 10px 40px rgba(0,0,0,.45);
}
.maintenance-icon{
  width:48px;height:48px;
  color:#FF9F0A;
  margin-bottom:6px;
}

/* ----- Animierte Teich-Szene: Fisch schwimmt im Kreis ----- */
.mt-pond{
  position:relative;
  width:200px;height:200px;
  margin:0 auto 20px;
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 38%, rgba(46,201,214,.20), rgba(10,132,255,.10) 55%, transparent 70%),
    radial-gradient(circle at 50% 50%, rgba(10,132,255,.14), rgba(10,132,255,.05));
  overflow:hidden;
  box-shadow:inset 0 0 40px rgba(0,0,0,.35);
}
.mt-ring{
  position:absolute;inset:34px;
  border-radius:50%;
  border:2px dashed rgba(255,255,255,.16);
  animation:mt-spin 18s linear infinite;
}
.mt-orbit{
  position:absolute;inset:0;
  /* gegen den Uhrzeigersinn – passt zur Blickrichtung des Fischs (schwimmt
     vorwärts statt rückwärts). */
  animation:mt-spin 6s linear infinite reverse;
  transform-origin:50% 50%;
}
.mt-fish{
  position:absolute;
  top:8px;left:50%;
  width:60px;height:35px;
  margin-left:-30px;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.4));
}
.mt-fish-body{
  transform-box:fill-box;transform-origin:center;
  animation:mt-bob 1.2s ease-in-out infinite;
}
.mt-tail{
  transform-box:fill-box;transform-origin:0% 50%;
  animation:mt-wiggle .45s ease-in-out infinite alternate;
}
/* aufsteigende Luftblasen */
.mt-bubbles{position:absolute;inset:0;}
.mt-bubble{
  position:absolute;bottom:18px;
  width:9px;height:9px;border-radius:50%;
  background:rgba(255,255,255,.35);
  box-shadow:inset 0 0 3px rgba(255,255,255,.6);
  opacity:0;
  animation:mt-bubble 3.2s ease-in infinite;
}
.mt-bubble:nth-child(1){left:32%;animation-delay:0s;}
.mt-bubble:nth-child(2){left:54%;width:6px;height:6px;animation-delay:.9s;}
.mt-bubble:nth-child(3){left:44%;width:12px;height:12px;animation-delay:1.7s;}
.mt-bubble:nth-child(4){left:64%;width:7px;height:7px;animation-delay:2.4s;}

/* "lädt"-Punkte unter dem Text */
.maintenance-dots{display:flex;gap:8px;justify-content:center;margin-top:18px;}
.maintenance-dots span{
  width:8px;height:8px;border-radius:50%;
  background:var(--rd-accent);
  animation:mt-pulse 1.4s ease-in-out infinite;
}
.maintenance-dots span:nth-child(2){animation-delay:.2s;}
.maintenance-dots span:nth-child(3){animation-delay:.4s;}

@keyframes mt-spin{ to{ transform:rotate(360deg); } }
@keyframes mt-wiggle{ from{ transform:rotate(-14deg);} to{ transform:rotate(14deg);} }
@keyframes mt-bob{ 0%,100%{ transform:translateY(-1.5px);} 50%{ transform:translateY(1.5px);} }
@keyframes mt-bubble{
  0%{ transform:translateY(0) scale(.6); opacity:0; }
  15%{ opacity:.8; }
  100%{ transform:translateY(-150px) scale(1); opacity:0; }
}
@keyframes mt-pulse{
  0%,100%{ transform:scale(.6); opacity:.4; }
  50%{ transform:scale(1); opacity:1; }
}

/* Bewegungsreduktion respektieren */
@media (prefers-reduced-motion:reduce){
  .mt-ring,.mt-orbit,.mt-fish-body,.mt-tail,.mt-bubble,.maintenance-dots span{
    animation:none;
  }
  .mt-bubble{opacity:.5;}
}

.maintenance-kicker{
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--rd-faint);
  margin-bottom:4px;
}
.maintenance-title{
  margin:0 0 12px;
  font-size:26px;font-weight:800;
}
.maintenance-text{
  margin:0;
  font-size:15px;line-height:1.6;
  color:var(--rd-muted);
}
.maintenance-footer{
  font-size:12px;
  color:var(--rd-faint);
}

/* ===== Info-Kacheln (vom CMS gepflegt) =====
   Sitzen oben im Wetter-Panel – über den Wetterdaten, unter der "Stand"-Zeile.
   Funktioniert identisch auf Mobil (Sheet) und Desktop (schwebende Glas-Karte). */
body.redesign .home-info{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin:0 0 14px;
}
body.redesign .home-info-card{
  --home-info-accent:var(--rd-accent);
  background:var(--rd-card);
  border:1px solid var(--rd-border);
  border-left:3px solid var(--home-info-accent);
  border-radius:14px;
  padding:13px 15px;
  color:var(--rd-text);
}
/* Randfarben */
body.redesign .home-info-card--blue  { --home-info-accent:#0A84FF; }
body.redesign .home-info-card--red   { --home-info-accent:#FF453A; }
body.redesign .home-info-card--orange{ --home-info-accent:#FF9F0A; }
body.redesign .home-info-card--green { --home-info-accent:#32D74B; }
body.redesign .home-info-head{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:6px;
}
body.redesign .home-info-icon{ font-size:20px; line-height:1; }
body.redesign .home-info-title{
  margin:0;
  font-size:15px;
  font-weight:700;
}
body.redesign .home-info-body{
  font-size:14px;
  line-height:1.55;
  color:var(--rd-muted);
}
body.redesign .home-info-body p{ margin:0 0 8px; }
body.redesign .home-info-body p:last-child{ margin-bottom:0; }
body.redesign .home-info-body a{
  color:var(--rd-accent);
  text-decoration:underline;
  text-underline-offset:2px;
  word-break:break-word;
}

/* ===== #ha-overlay → von Glas-Panel zu schlichtem Inhaltsblock ===== */
body.redesign #ha-overlay{
  position:static;
  width:auto;
  min-width:0;
  max-width:none;
  margin:0;
  padding:0;
  background:none;
  border:none;
  border-radius:0;
  box-shadow:none;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  overflow:visible;
  animation:none;
  color:var(--rd-text);
}
body.redesign #ha-overlay::before{ display:none; }

/* Header: Titel entfällt, nur der "Stand: … Uhr" – als Pille zentriert.
   Reserviert keinen extra Leerraum mehr (frühere Eck-Buttons entfallen). */
.redesign .ha-header{
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:center;
  /* Basis-Padding aus style.css entfernen – der Abstand zur Pille wird
     unten ausschließlich über margin-bottom gesteuert (gleich groß wie
     das Top-Padding des Sheets, siehe .redesign .sheet), damit oben/unten
     gleich viel Luft ist. */
  padding:0;
  margin-bottom:24px;
  /* reiner Text – darf keine Klicks abfangen */
  pointer-events:none;
}
body.redesign .ha-title{ display:none; }
body.redesign .ha-update{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:8px 16px;
  border-radius:999px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  font-size:14px;
  font-weight:700;
  color:var(--rd-muted);
  opacity:.92;
}
body.redesign .ha-update svg{ flex:none; width:15px; height:15px; opacity:.8; }
body.redesign .ha-update.is-stale{
  color:#f5a524;
  background:rgba(245,165,36,.10);
  border-color:rgba(245,165,36,.28);
  opacity:1;
}

/* ===== Kacheln ===== */
body.redesign .ha-tiles{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  grid-auto-rows:1fr;
  gap:10px;
  margin:0;
  padding:0;
}
body.redesign #ha-overlay .ha-tile{
  background:var(--rd-card);
  border:1px solid var(--rd-border);
  border-radius:var(--rd-radius);
  padding:12px 16px;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:6px;
  min-height:0;
  box-shadow:none;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  animation:none;
  transition:padding .25s ease;
}
body.redesign #ha-overlay .ha-tile-label{
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.01em;
  color:#fff;
  opacity:1;
  text-transform:none;
  white-space:nowrap;
}
/* Kurzlabel-Mechanik aus style.css (::before mit data-short) abschalten:
   im breiteren Karten-Layout zeigen wir das volle Label. */
body.redesign #ha-overlay .ha-tile-label[data-short]{
  font-size:12.5px;
  letter-spacing:.01em;
}
body.redesign #ha-overlay .ha-tile-label[data-short]::before{
  content:none;
  display:none;
}
body.redesign #ha-overlay .ha-tile-value{
  display:flex;
  align-items:baseline;
  gap:5px;
}
body.redesign #ha-overlay .ha-tile-number{
  font-size:28px;
  font-weight:700;
  line-height:1.05;
  letter-spacing:-.02em;
  color:#fff;
  transition:font-size .25s ease;
}
body.redesign #ha-overlay .ha-tile-unit{
  font-size:14px;
  font-weight:600;
  color:#fff;
  opacity:1;
}

/* Haupt-Kacheln (Luft/Wasser): nur die Zahl farblich akzentuieren,
   Kachel-Hintergrund/-Rand wie alle anderen Kacheln (einheitliches Bild). */
body.redesign #ha-sensors .ha-tile:nth-child(1) .ha-tile-number{ color:#f97316; }
body.redesign #ha-sensors .ha-tile:nth-child(2) .ha-tile-number{ color:var(--rd-water); }

/* Offline-Zustand */
body.redesign #ha-overlay .ha-tile.is-offline{ opacity:.55; }
body.redesign #ha-overlay .ha-tile.is-offline .ha-tile-number{
  font-size:18px;
  font-weight:600;
  color:var(--rd-faint);
}

/* Klickbare Kacheln */
body.redesign #ha-overlay .ha-tile.is-clickable{ cursor:pointer; transition:transform .14s ease, border-color .14s ease; }
@media (hover:hover) and (pointer:fine){
  body.redesign #ha-overlay .ha-tile.is-clickable:hover{ border-color:rgba(255,255,255,.2); }
}
body.redesign #ha-overlay .ha-tile.is-clickable:active{ transform:scale(.97); }

/* ===== Schnellzugriffe ===== */
body.redesign .ios-shortcuts{
  position:static;
  inset:auto;
  transform:none;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin:18px 0 0;
  padding:0;
  width:auto;
}
/* Shortcut-Karten kompakt: Icon vor dem Text (horizontal) */
body.redesign .shortcut-card{
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:11px 14px;
  min-height:0;
  overflow:visible;
  background:var(--rd-card);
  border:1px solid var(--rd-border);
  border-radius:12px;
  color:var(--rd-text);
  text-decoration:none;
  box-shadow:none;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  animation:none;
  opacity:1;
}
body.redesign .shortcut-card::before{ display:none; }
body.redesign .shortcut-card .icon-bubble{ display:none; }
body.redesign .shortcut-card .label{
  display:block;
  font-size:12px;
  font-weight:600;
  line-height:1.25;
  color:var(--rd-muted);
  text-align:center;
  white-space:normal;
  word-break:break-word;
  width:100%;
}
@media (hover:hover) and (pointer:fine){
  body.redesign .shortcut-card:hover{ border-color:rgba(255,255,255,.18); }
}
body.redesign .shortcut-card:active{ transform:scale(.97); }

/* ===== Mobile-Abgleich: aggressive !important-Regeln aus style.css kontern =====
   Der Original-Mobile-Block zwingt Shortcut-Cards auf 64px-Icons und blendet
   die Labels aus. Im Redesign sind es volle Karten mit Beschriftung. */
@media (max-width:640px){
  body.redesign .shortcut-card{
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
    height:auto !important;
    min-height:0 !important;
    padding:11px 12px !important;
    border-radius:12px !important;
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
  }
  body.redesign .shortcut-card .label{
    display:block !important;
  }

  /* Standard-Portrait als Bottom-Sheet: das Foto füllt oben, der Wetter-Block
     sitzt als kompakter Streifen unten – kein toter dunkler Block. */
  .redesign .hero{ flex:1 1 auto; }
  .redesign .sheet{ flex:0 0 auto; }

  /* Kollabiert: kompakte Anzeige-Kacheln. */
  body.redesign #ha-sensors .ha-tile-number{ font-size:24px; }

  /* Hochgewischt: Anzeige-Kacheln werden größer (Druck/Feuchte erscheinen
     ohnehin über #ha-extra.is-open). */
  body.redesign #ha-overlay.extra-open #ha-sensors .ha-tile{ padding:18px 16px; }
  body.redesign #ha-overlay.extra-open #ha-sensors .ha-tile-number{ font-size:34px; }
}

/* ===== Info-Modal: Slider → einfaches Show/Hide ===== */
/* JS setzt translateX auf .info-panels; im Redesign schalten wir auf
   display:none/block um, damit die Kartenhöhe sich dem Inhalt anpasst. */
body.redesign .info-card{
  /* gleiche Breite wie der Sensor-Graph-Popup (.history-card),
     nicht die volle Viewport-Breite */
  width:min(560px,92vw) !important;
  margin-inline:auto !important;
  box-sizing:border-box !important;
  height:auto !important;
  max-height:92dvh;
  overflow-y:auto;
}
/* Querformat/Desktop: identisch zum Graph-Popup */
@media (orientation:landscape){
  body.redesign .info-card{
    width:min(960px,96vw) !important;
    max-height:96dvh;
  }
}
/* Info-Karte weniger transparent (statt var(--surface) .46) –
   Blur/Frosted-Effekt bleibt, Inhalt ist aber besser lesbar. */
body.redesign .info-card{
  background:rgba(15,20,28,.95);
}

/* Kompaktere Info-Karte: weniger Padding, kleinere Typo & Abstände */
body.redesign .info-card{ padding:20px 22px; }
body.redesign .info-kicker{ margin-bottom:3px; font-size:11px; }
body.redesign .info-card h2{ font-size:23px; margin:0 36px 12px 0; }
body.redesign .info-card p{ font-size:14px; line-height:1.5; }
body.redesign .info-section{ margin-top:14px; }
body.redesign .info-section h3{ font-size:13px; margin-bottom:5px; }
body.redesign .info-chips{ gap:6px; margin-top:8px; }
body.redesign .info-chip{ padding:4px 10px; font-size:12px; }
body.redesign .info-notice{ padding:10px 12px; gap:8px; }
body.redesign .info-notice p{ font-size:12.5px; line-height:1.45; }
body.redesign .info-footer{ margin-top:16px; }

body.redesign .info-content{
  width:100% !important;
  box-sizing:border-box !important;
  height:auto !important;
  overflow:visible !important;
}
body.redesign .info-panels{
  display:block !important;
  width:100% !important;
  height:auto !important;
  transform:none !important;
}
body.redesign .info-panel{
  display:none !important;
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  height:auto !important;
  flex:none !important;
}
body.redesign .info-panel.is-active{
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
}

/* ===== Datenschutz: drei Badges → ein gemeinsames Feld ===== */
body.redesign .info-highlight-row{
  display:flex;
  flex-direction:row;
  gap:0;
  background:var(--rd-card);
  border:1px solid var(--rd-border);
  border-radius:var(--rd-radius);
  overflow:hidden;
  margin-bottom:0;
}
body.redesign .info-highlight{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:14px 6px;
  background:none;
  border-radius:0;
  border-right:1px solid var(--rd-border);
  font-size:11px;
  font-weight:600;
  color:var(--rd-muted);
  text-align:center;
}
body.redesign .info-highlight:last-child{ border-right:none; }
body.redesign .info-highlight svg{
  width:20px; height:20px;
  color:#48e0a8;
  flex-shrink:0;
}

/* ===== Impressum/Datenschutz-Links unter den Shortcuts ===== */
body.redesign .legal-links{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-top:14px;
  padding:0;
}
body.redesign .legal-link{
  font-size:12px;
  font-weight:600;
  color:var(--rd-muted);
  text-decoration:none;
  padding:7px 16px;
  border-radius:999px;
  border:1px solid var(--rd-border);
  background:var(--rd-card);
  transition:color .14s ease, border-color .14s ease;
}
@media (hover:hover) and (pointer:fine){
  body.redesign .legal-link:hover{ color:var(--rd-text); border-color:rgba(255,255,255,.2); }
}
body.redesign .legal-link:active{ transform:scale(.96); }
/* Info-Trigger als Button: optisch identisch zu den Textlinks */
body.redesign .legal-link--btn{
  font-family:inherit;
  line-height:1;
  cursor:pointer;
}
body.redesign .legal-sep{ display:none; }

/* ===== Native Rechtsseiten (Impressum / Datenschutz) =====
   Ganz normale Seiten: kein Wallpaper, keine Sheet-Karte – einfach
   einspaltiger Inhalt auf einfarbigem Hintergrund. */
body.legal-page{
  background:var(--rd-bg);
  color:var(--rd-text);
}
body.legal-page .legal-wrap{
  max-width:680px;
  margin:0 auto;
  padding:calc(env(safe-area-inset-top,0px) + 28px) 22px
          calc(env(safe-area-inset-bottom,0px) + 40px);
}
body.legal-page .legal-back{
  display:inline-flex;
  align-items:center;
  gap:5px;
  align-self:flex-start;
  font-size:13px;
  font-weight:600;
  color:var(--rd-muted);
  text-decoration:none;
  padding:8px 14px 8px 10px;
  border-radius:999px;
  border:1px solid var(--rd-border);
  background:var(--rd-card);
  margin-bottom:20px;
  transition:color .14s ease, border-color .14s ease;
}
body.legal-page .legal-back svg{ width:18px; height:18px; }
@media (hover:hover) and (pointer:fine){
  body.legal-page .legal-back:hover{ color:var(--rd-text); border-color:rgba(255,255,255,.2); }
}
body.legal-page .legal-back:active{ transform:scale(.97); }
body.legal-page .legal-title{
  font-size:26px;
  font-weight:700;
  letter-spacing:-.02em;
  color:var(--rd-text);
  margin:0 0 18px;
}
/* Schlichte, strukturierte Inhalte (keine Kacheln) */
body.legal-page .legal-body{ max-width:620px; }
body.legal-page .legal-section{ margin-top:24px; }
body.legal-page .legal-section:first-child{ margin-top:0; }
body.legal-page .legal-body h2{
  font-size:16px;
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--rd-text);
  margin:0 0 7px;
}
body.legal-page .legal-body p{
  font-size:14px;
  line-height:1.62;
  font-weight:500;
  color:var(--rd-muted);
  margin:0 0 9px;
}
body.legal-page .legal-body p:last-child{ margin-bottom:0; }
body.legal-page .legal-body strong{ color:var(--rd-text); font-weight:700; }
body.legal-page .legal-body a{ color:#4aa3ff; text-decoration:none; }
@media (hover:hover) and (pointer:fine){
  body.legal-page .legal-body a:hover{ text-decoration:underline; }
}
body.legal-page .legal-lead{
  font-size:14.5px;
  font-weight:600;
  color:var(--rd-text);
  margin:0;
}
body.legal-page .legal-note{
  margin-top:26px;
  font-size:12px;
  color:var(--rd-muted);
  opacity:.7;
}
body.legal-page .legal-foot{
  margin-top:30px;
  padding-top:18px;
  border-top:1px solid var(--rd-border);
  font-size:12px;
  color:var(--rd-muted);
  opacity:.8;
}

/* ===== Tablet-Feinschliff (641–999px) ===== */
@media (min-width:641px) and (max-width:999px){
  body.redesign .bg-wrap{ height:56vh; }
  .redesign .hero{ min-height:50vh; }
  .redesign .hero-place{ font-size:44px; }
  .redesign .page{ max-width:640px; }
}

/* ===== Desktop-Layout (≥1000px) =====
   Eigenständige Desktop-Ansicht: Wallpaper als Vollbild-Hintergrund,
   zweispaltig – links großer Hero, rechts die Wetterdaten als
   schwebende Glas-Karte. Mobile/Tablet bleiben unberührt. */
@media (min-width:1000px){

  /* Wallpaper über den gesamten Viewport */
  body.redesign .bg-wrap{
    height:100vh;
    background-position:center 42%;
  }
  /* Kein Verdunklungs-Overlay auf dem Bild – Foto bleibt klar */
  body.redesign .bg-wrap::after{ background:none; }

  /* Seite: zentriertes Zwei-Spalten-Raster.
     align-items:safe center -> bei hoher Karte wird oben NICHT abgeschnitten,
     sondern an den Anfang ausgerichtet (scrollbar). */
  .redesign .page{
    max-width:1200px;
    min-height:100vh;
    display:grid;
    grid-template-columns:.95fr 1.05fr;
    align-items:center;
    align-items:safe center;
    column-gap:88px;
    padding:56px 48px;
    box-sizing:border-box;
  }

  /* Karte links, Text rechts (Spalten getauscht) */
  .redesign .sheet{ order:1; }
  .redesign .hero{
    order:2;
    min-height:0;
    padding:0;
    justify-content:center;
    align-self:safe center;
  }
  .redesign .hero-meta{ width:auto; max-width:520px; }
  .redesign .hero-badge{
    font-size:13.5px;
    padding:6px 14px;
    margin-bottom:20px;
  }
  .redesign .hero-place{
    font-size:68px;
    line-height:1.03;
    /* etwas stärkerer Schatten, da kein Verdunklungs-Overlay mehr */
    text-shadow:0 2px 10px rgba(4,10,18,.85), 0 6px 34px rgba(4,10,18,.6);
  }
  .redesign .hero-sub{
    font-size:18px;
    margin-top:12px;
    text-shadow:0 1px 8px rgba(4,10,18,.8);
  }

  /* Sheet → schwebende Glas-Karte */
  .redesign .sheet{
    margin-top:0;
    align-self:safe center;
    justify-self:center;
    width:100%;
    max-width:480px;
    border-radius:26px;
    /* schmaler Top-Abstand: Stand/Buttons sitzen oben, kein neg. Margin
       (der den Stand abgeschnitten hat) */
    padding:10px 28px 26px;
    background:rgba(16,21,29,.66);
    -webkit-backdrop-filter:blur(22px) saturate(150%);
    backdrop-filter:blur(22px) saturate(150%);
    border:1px solid rgba(255,255,255,.09);
    box-shadow:0 28px 70px rgba(0,0,0,.55);
  }

  /* Stand sitzt sauber auf der Eck-Button-Linie (ohne neg. Margin);
     Abstand nach unten auf den Wert des Sheet-Top-Paddings (10px) angeglichen,
     damit die Stand-Pille oben und unten gleich viel Luft hat. */
  body.redesign .ha-header{ margin-top:0; margin-bottom:10px; }

  /* etwas großzügigere Sensor-Kacheln */
  body.redesign #ha-overlay .ha-tile{ padding:16px 18px; }
  body.redesign #ha-overlay .ha-tile-number{ font-size:30px; }

  /* Hover-Lift für die Karte-Shortcuts wirkt am Desktop gut */
  body.redesign .shortcut-card{ padding:14px 10px; }
}