/* ===== Base ===== */
html,
body{
  height:100%;
  touch-action:manipulation;
}

/* ===== Querformat erlaubt =====
   Früher war die Ausrichtung auf Hochformat gesperrt (Overlay + JS-Lock).
   Das Gerät darf jetzt frei drehen; das Layout (redesign: body overflow-y:auto)
   ist scrollbar und der Verlaufsgraph nutzt das Querformat aus (siehe
   .history-* weiter unten). */

body{
  margin:0;
  background:#0a0e14;
  font:600 14px/1.35 -apple-system,BlinkMacSystemFont,"SF Pro Text","Inter",system-ui,Segoe UI,Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow:hidden;
}

/* ===== Background ===== */
.bg-wrap{
  position:fixed;
  inset:0;
  z-index:0;
  background:center center / cover no-repeat;
  filter:contrast(1.08) saturate(1.10);
  image-rendering:high-quality;
}

/* ===== Design Tokens ===== */
:root{
  --surface:rgba(16,22,32,.46);
  --stroke:rgba(255,255,255,.20);
  --inner:rgba(255,255,255,.08);

  --text:#F5F5F7;
  --label-strong:#e4e5e8;

  --shadow:0 4px 18px rgba(0,0,0,.20);
  --shadow-hover:0 6px 22px rgba(0,0,0,.28);

  --radius:28px;
  --hairline:1px;

  --row-gap:14px;
  --col-gap:18px;

  --safe-top:env(safe-area-inset-top,0px);
  --safe-right:env(safe-area-inset-right,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
  --safe-left:env(safe-area-inset-left,0px);
}

@media (prefers-color-scheme:dark){
  :root{
    --surface:rgba(16,22,32,.46);
    --stroke:rgba(255,255,255,.08);
    --inner:rgba(255,255,255,.05);

    --text:#F5F5F7;
    --label-strong:#e4e5e8;

    --shadow:0 5px 20px rgba(0,0,0,.42);
    --shadow-hover:0 8px 26px rgba(0,0,0,.50);
  }
}

/* ===== Overlay ===== */
#ha-overlay{
  position:fixed;
  top:calc(12px + var(--safe-top));
  left:calc(12px + var(--safe-left));
  z-index:10;

  min-width:380px;
  max-width:min(640px, calc(100vw - 220px - 36px));

  padding:18px 18px 14px;

  overflow:hidden;
  user-select:none;

  color:var(--text);

  border-radius:var(--radius);
  border:var(--hairline) solid var(--stroke);

  background:var(--surface);
  box-shadow:var(--shadow);

  backdrop-filter:blur(8px) saturate(130%);
  -webkit-backdrop-filter:blur(8px) saturate(130%);

  contain:layout paint style;

  /* Kein opacity:0-Start: das Panel (inkl. Titel-Text) ist sofort sichtbar und
     damit ein stabiler LCP-Kandidat. Nur eine dezente Transform-Einblendung. */
  animation:cardInNoFade .45s ease-out both;
}

@keyframes cardIn{
  from{
    opacity:0;
    transform:translateY(-10px) scale(.98);
  }

  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

@keyframes cardInNoFade{
  from{
    transform:translateY(-10px) scale(.98);
  }

  to{
    transform:translateY(0) scale(1);
  }
}

#ha-overlay::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  box-shadow:inset 0 0 0 1px var(--inner);
}

/* ===== Header ===== */
.ha-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:2px 2px 10px;
}

.ha-head-left{
  display:flex;
  align-items:center;
  gap:10px;
}

.ha-head-right{
  display:flex;
  align-items:center;
}

.ha-title{
  font-weight:800;
  letter-spacing:.2px;
  font-size:clamp(16px,1.2rem,18px);
}

.ha-update{
  font-size:14px;
  font-weight:600;
  opacity:.65;
  white-space:nowrap;
}

#ha-update:empty{
  visibility:hidden;
}

/* ===== Haupt-Sensoren: Kacheln ===== */
.ha-tiles{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  grid-auto-rows:1fr;
  gap:10px;
  padding:6px 2px 6px;
}

.ha-tile{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  padding:12px 14px;
  border-radius:16px;
  background:rgba(0,0,0,.20);
  border:var(--hairline) solid var(--stroke);
  animation:valueIn .25s ease-out both;
  color:#fff;
}

@media (prefers-color-scheme:dark){
  .ha-tile{
    background:rgba(0,0,0,.22);
  }
}

.ha-tile-label{
  font-size:11px;
  font-weight:700;
  color:#fff;
  text-transform:uppercase;
  letter-spacing:.06em;
  white-space:nowrap;
  text-align:center;
}

.ha-tile-value{
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:.25em;
  font-size:clamp(22px,4vw,26px);
  font-weight:800;
  font-variant-numeric:tabular-nums;
  letter-spacing:.2px;
  white-space:nowrap;
  text-align:center;
}

.ha-tile-unit{
  font-size:.6em;
  font-weight:600;
  opacity:.7;
}

.ha-tile.is-offline{
  background:rgba(255,69,58,.07);
  border-color:rgba(255,69,58,.20);
}

.ha-tile.is-offline .ha-tile-value{
  opacity:.7;
  font-size:clamp(15px,3vw,17px);
}

.ha-tile.is-offline .ha-tile-number{
  color:#ff453a;
}

@media (max-width:400px){
  .ha-tile-label[data-short]{
    font-size:0;
    letter-spacing:0;
  }

  .ha-tile-label[data-short]::before{
    content:attr(data-short);
    font-size:11px;
    letter-spacing:.06em;
  }
}

@keyframes valueIn{
  from{
    opacity:0;
    transform:translateY(4px);
  }

  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* ===== Shortcuts ===== */
.ios-shortcuts{
  position:fixed;
  bottom:calc(14px + var(--safe-bottom));
  left:50%;
  transform:translateX(-50%);
  z-index:11;

  display:flex;
  flex-direction:row;
  gap:12px;

  pointer-events:none;
}

.ios-shortcuts .shortcut-card{
  pointer-events:auto;
  transform-origin:bottom center;
}

.ios-shortcuts .shortcut-card:nth-child(1){ animation-delay:.10s; }
.ios-shortcuts .shortcut-card:nth-child(2){ animation-delay:.15s; }
.ios-shortcuts .shortcut-card:nth-child(3){ animation-delay:.20s; }
.shortcut-card{
  position:relative;

  display:flex;
  align-items:center;
  gap:12px;

  padding:10px 16px;

  min-height:56px;
  max-width:46vw;

  overflow:hidden;

  text-decoration:none;
  color:var(--text);

  border-radius:var(--radius);
  border:var(--hairline) solid var(--stroke);

  background:var(--surface);
  box-shadow:var(--shadow);

  touch-action:manipulation;
  transform-origin:right center;
  transition:transform .16s ease;

  backdrop-filter:blur(6px) saturate(125%);
  -webkit-backdrop-filter:blur(6px) saturate(125%);

  contain:layout paint style;

  animation:cardIn .45s ease-out both;
}

.shortcut-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  box-shadow:inset 0 0 0 1px var(--inner);
}
/* ===== Hover ===== */
@media (hover:hover) and (pointer:fine){
  .shortcut-card:hover,
  .shortcut-card:focus-visible{
    animation:none;
    transform:scale(1.1);
    z-index:12;
  }
}

.shortcut-card:active{
  transform:scale(.98);
}

/* ===== Labels ===== */
.shortcut-card .label{
  white-space:nowrap;
  font-weight:800;
  font-size:14px;
  letter-spacing:.2px;
  color:var(--text);
}

@keyframes infoCardIn{
  from{
    opacity:0;
    transform:scale(.96) translateY(8px);
  }

  to{
    opacity:1;
    transform:scale(1) translateY(0);
  }
}

/* ===== Info: Chips ===== */
.info-chips{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:10px;
}

.info-chip{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:5px 12px;
  border-radius:999px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.07);
  font-size:13px;
  font-weight:700;
  white-space:nowrap;
}

/* ===== Info: Hinweis-Box ===== */
.info-notice{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(255,200,60,.25);
  background:rgba(255,190,40,.07);
}

.info-notice p{
  font-size:14px;
  line-height:1.55;
  opacity:.80;
  text-align:left;
}

.info-notice-icon{
  width:18px;
  height:18px;
  flex-shrink:0;
  margin-top:2px;
  opacity:.75;
  color:rgba(255,200,60,.9);
}

.info-close{
  position:absolute;
  top:16px;
  right:16px;

  width:34px;
  height:34px;

  display:flex;
  align-items:center;
  justify-content:center;

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

  background:rgba(255,255,255,.12);
  color:var(--text);

  font-size:23px;
  line-height:1;

  cursor:pointer;

  transition:transform .14s ease;
}

@media (hover:hover) and (pointer:fine){
  .info-close:hover,
  .info-close:focus-visible{
    transform:scale(1.08);
  }
}

/* ===== Mobile ===== */
@media (max-width:640px){
  .bg-wrap{
    background-size:cover;
  }

  #ha-overlay{
    top:calc(8px + var(--safe-top));
    left:calc(8px + var(--safe-left));
    right:calc(8px + var(--safe-right));
    margin-inline:0;

    width:auto;

    min-width:auto;
    max-width:none;

    padding:16px 14px 12px;

    max-height:calc(100dvh - 160px);

    overflow:auto;

    backdrop-filter:blur(4px) saturate(115%);
    -webkit-backdrop-filter:blur(4px) saturate(115%);
  }

  .ha-header{
    flex-direction:column;
    align-items:center;
    gap:3px;
    padding-bottom:10px;
  }

  .ha-head-left,
  .ha-head-right{
    justify-content:center;
  }

  .ha-update{
    font-size:12px;
  }

  .ios-shortcuts .shortcut-card{
    pointer-events:auto;
  }

  .shortcut-card{
    width:64px!important;
    min-width:64px!important;
    max-width:64px!important;

    height:64px!important;
    min-height:64px!important;

    padding:0!important;

    justify-content:center;
    align-items:center;

    border-radius:22px;

    transform:none!important;

    backdrop-filter:blur(4px) saturate(115%);
    -webkit-backdrop-filter:blur(4px) saturate(115%);
  }

  .shortcut-card .label{
    display:none!important;
  }
  /* Hover-Effekte auf Touch-Geräten deaktivieren */
  .shortcut-card:hover,
  .shortcut-card:focus-visible{
    animation:revert;
    transform:none;
  }}

/* ===== Kleine Geräte ===== */
@media (max-width:380px){
  .shortcut-card{
    width:58px!important;
    min-width:58px!important;
    max-width:58px!important;

    height:58px!important;
    min-height:58px!important;
  }}

@media (min-width:641px){
  /* Wetter-Overlay oben zentrieren */
  #ha-overlay{
    left:0;
    right:0;
    margin-inline:auto;
    max-width:min(640px, calc(100vw - 48px));
  }
}

/* ===== History Modal ===== */
.history-modal{
  position:fixed;
  inset:0;
  z-index:50;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:18px;

  background:rgba(0,0,0,.25);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);

  visibility:hidden;
  opacity:0;
  pointer-events:none;

  transition:opacity .2s ease, visibility .2s ease;
}

.history-modal.is-open{
  visibility:visible;
  opacity:1;
  pointer-events:auto;
  /* Beim Öffnen sofort sichtbar (nur die Deckkraft blendet ein): sonst ist der
     Dialog im Moment des Öffnens noch nicht fokussierbar, und der Fokus ginge
     verloren, weil der Hintergrund bereits inert ist. */
  transition:opacity .2s ease, visibility 0s;
}

.history-modal.is-open .history-card{
  animation:infoCardIn .22s ease-out both;
}

.history-card{
  position:relative;

  width:min(560px,92vw);

  padding:22px 24px 20px;

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

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

  box-shadow:var(--shadow-hover);

  backdrop-filter:blur(12px) saturate(140%);
  -webkit-backdrop-filter:blur(12px) saturate(140%);

  contain:layout paint style;
}

.history-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  box-shadow:inset 0 0 0 1px var(--inner);
}

.history-header{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  margin:0 36px 14px 0;
}

.history-title{
  font-size:18px;
  font-weight:800;
  letter-spacing:.2px;
}

.history-current{
  font-size:14px;
  font-weight:700;
  opacity:.65;
  white-space:nowrap;
}

/* Tabs */
.history-tabs{
  display:flex;
  gap:6px;
  margin-bottom:16px;
  padding:4px;
  border-radius:999px;
  background:rgba(255,255,255,.10);
  border:1px solid var(--stroke);
}

.history-tab{
  flex:1;
  min-height:32px;
  padding:0 4px;
  border:0;
  border-radius:999px;
  background:transparent;
  color:var(--text);
  /* 5 statt 3 Schaltflächen – etwas kleiner, damit "30 Tage" nicht umbricht */
  font:800 12px/1 -apple-system,BlinkMacSystemFont,"SF Pro Text","Inter",system-ui,sans-serif;
  white-space:nowrap;
  cursor:pointer;
  opacity:.65;
  transition:opacity .15s ease, background .15s ease;
}

.history-tab.is-active{
  background:rgba(255,255,255,.22);
  opacity:1;
}

@media (hover:hover) and (pointer:fine){
  .history-tab:not(.is-active):hover{
    opacity:.9;
  }
}

/* Chart area */
.history-chart-wrap{
  position:relative;
  /* Zoom-/Ziehfläche: Der Graph verarbeitet horizontale Gesten selbst,
     vertikales Scrollen der Seite bleibt erhalten. */
  cursor:grab;
  touch-action:pan-y;
  -webkit-user-select:none;
  user-select:none;
}
.history-chart-wrap.is-panning{ cursor:grabbing; }
.history-chart-wrap:focus-visible{
  outline:2px solid #4da3ff;
  outline-offset:4px;
  border-radius:12px;
}

.history-svg{
  display:block;
  width:100%;
  height:auto;
}

.history-status{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  font-weight:700;
  opacity:.55;
  pointer-events:none;
}

/* ===== Verlaufsgraph im Querformat =====
   Wird das Gerät beim geöffneten Graphen ins Querformat gedreht, bekommt die
   Karte die volle Breite und der Graph (breiteres viewBox via app.js) wird
   deutlich größer/ablesbarer. Karte bleibt bei flachen Displays scrollbar. */
@media (orientation:landscape){
  .history-modal{
    padding:12px;
  }

  .history-card{
    width:min(960px,96vw);
    max-height:96dvh;
    overflow-y:auto;
  }

  }

/* Clickable tile */
.ha-tile.is-clickable{
  cursor:pointer;
  transition:transform .14s ease, box-shadow .14s ease;
}

@media (hover:hover) and (pointer:fine){
  .ha-tile.is-clickable:hover{
    transform:scale(1.04);
    box-shadow:0 4px 14px rgba(0,0,0,.22);
  }
}

.ha-tile.is-clickable:active{
  transform:scale(.97);
}

/* ===== Reduced Motion ===== */
@media (prefers-reduced-motion:reduce){
  .bg-wrap,
  #ha-overlay,
  .ha-tile,
  .shortcut-card,
  .history-card,
  .info-close {
    animation:none!important;
    transition:none!important;
  }

  .history-modal,
  .ha-tile.is-clickable {
    transition:none!important;
  }}

/* ===== Stationsdaten-Kachelraster (genutzt vom CMS /cmsadmin/) ===== */
.admin-tiles{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}

.admin-tiles .ha-tile{
  width:auto;
  align-items:center;
}

@media (max-width:640px){
  .admin-tiles{
    /* minmax(0,…): lange Textwerte dürfen das Raster nicht aufweiten */
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }
}