/* ===== 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--btn{
  background:none;
  border:none;
  cursor:pointer;
  font:inherit;
  color:inherit;
  text-align:left;
}

.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);
}

.shortcut-card.anim-done{
  animation:none;
}

/* ===== 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);
}

/* ===== Icons ===== */
.icon-bubble{
  width:36px;
  height:36px;
  flex:0 0 36px;

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

  line-height:0;
  color:#fff;
}

.icon-bubble svg{
  width:100%;
  height:100%;
  display:block;
  color:#fff;
}

.icon-bubble svg,
.icon-bubble svg *{
  stroke:#fff!important;
  color:#fff!important;
}

.icon-bubble svg *:not([fill="none"]){
  fill:#fff!important;
}

.icon-bubble svg [fill="none"]{
  fill:none!important;
}

.icon-bubble img{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  object-position:center;
}

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

/* ===== Info Modal ===== */
.info-modal{
  position:fixed;
  inset:0;
  z-index:40;

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

  padding:18px;

  background:rgba(0,0,0,.20);

  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);

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

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

.info-modal.is-open{
  visibility:visible;
  opacity:1;
  pointer-events:auto;
}

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

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

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

/* ===== Info Card ===== */
.info-card{
  position:relative;

  /* gleiche Breite wie der Sensor-Graph-Popup, nicht zu breit am Desktop */
  width:min(560px,90vw);
  max-height:calc(100dvh - 40px);

  padding:28px 32px;

  overflow:auto;

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

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

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

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

  contain:layout paint style;
}

.info-kicker{
  margin-bottom:6px;

  color:#0A84FF;

  font-size:12px;
  font-weight:900;

  letter-spacing:.16em;
  text-transform:uppercase;
}

.info-card h2{
  margin:0 42px 16px 0;

  font-size:30px;
  line-height:1.12;
  font-weight:850;
}

.info-card p{
  margin:0;

  font-size:16px;
  line-height:1.65;
  font-weight:600;
  text-align:justify;
  hyphens:auto;
  -webkit-hyphens:auto;
}

.info-section{
  margin-top:20px;
}

.info-section h3{
  margin:0 0 6px;

  font-size:14px;
  font-weight:850;
  text-decoration:underline;
  text-underline-offset:3px;

  opacity:.82;

  text-transform:uppercase;
  letter-spacing:.055em;
}

.info-section a{
  color:inherit;
  opacity:.75;
  text-underline-offset:3px;
}

.info-section a:hover{
  opacity:1;
}

/* ===== 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);
}

/* ===== Datenschutz: Highlight-Badges ===== */
.info-highlight-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:8px;
}

.info-highlight{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:7px 14px;
  border-radius:999px;
  border:1px solid rgba(50,215,75,.30);
  background:rgba(50,215,75,.08);
  font-size:13px;
  font-weight:700;
  color:rgba(50,215,75,.95);
}

.info-highlight svg{
  width:15px;
  height:15px;
  flex-shrink:0;
}

/* ===== Impressum Kontaktkarte ===== */
.impr-card{
  margin-top:10px;
  padding:14px 16px;
  border-radius:16px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.06);
  display:flex;
  flex-direction:column;
  gap:10px;
}

.impr-name{
  font-size:17px;
  font-weight:800;
  letter-spacing:.01em;
}

.impr-row{
  display:flex;
  align-items:center;
  gap:9px;
  font-size:14px;
  font-weight:600;
  line-height:1.4;
  color:inherit;
  text-decoration:none;
  opacity:.72;
  transition:opacity .15s ease;
}

a.impr-row:hover{
  opacity:1;
  text-decoration:underline;
  text-underline-offset:3px;
}

.impr-location{
  cursor:default;
}

.impr-icon{
  width:16px;
  height:16px;
  flex-shrink:0;
  opacity:.9;
}

/* Absatz mit etwas Abstand nach oben (ersetzt Inline-Style → CSP-konform) */
.info-spaced{
  margin-top:10px;
}

.info-small{
  margin-top:10px;

  font-size:13px;
  line-height:1.55;

  opacity:.72;
}

.info-footer{
  margin-top:20px;
  padding-top:12px;

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

  font-size:13px;
  font-weight:600;

  opacity:.66;
}

.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);
  }
}

/* ===== Info Tabs ===== */
.info-tabs{
  display:flex;
  gap:6px;

  margin:16px 0 18px;

  padding:4px;

  border-radius:999px;

  background:rgba(255,255,255,.10);
  border:1px solid var(--stroke);
}

.info-tab{
  flex:1;

  min-height:34px;

  border:0;
  border-radius:999px;

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

  font:800 13px/1 -apple-system,BlinkMacSystemFont,"SF Pro Text","Inter",system-ui,sans-serif;

  cursor:pointer;

  opacity:.72;
}

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

.info-content{
  position:relative;
  overflow:hidden;
}

.info-panel{
  display:none;
}

.info-panel.is-active{
  display:block;
}

/* ===== 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;
  }

  .icon-bubble{
    width:34px;
    height:34px;
    flex:0 0 34px;
  }

  .ha-live{
    animation:none;
  }

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

  .info-modal{
    padding:14px;
  }

  .info-card{
    width:min(420px,92vw);
    max-height:calc(100dvh - 28px);

    padding:20px 18px 18px;

    overflow-x:hidden;
    overflow-y:auto;

    border-radius:24px;

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

  .info-kicker{
    font-size:10px;
    margin-bottom:4px;
  }

  .info-card h2{
    font-size:22px;
    margin:0 38px 12px 0;
  }

  .info-card p{
    font-size:14px;
    line-height:1.5;
  }

  .info-section{
    margin-top:11px;
  }

  .info-section h3{
    font-size:12px;
    margin-bottom:4px;
  }

  .info-small,
  .info-footer{
    font-size:11px;
  }

  .info-tabs{
    margin:12px 0 14px;
  }

  .info-tab{
    font-size:11px;
    min-height:28px;
  }

  .info-panels{
    --panel-count:3;

    display:flex;
    width:calc(var(--panel-count) * 100%);

    transition:transform .25s ease;
    will-change:transform;
  }

  .info-panel{
    display:block!important;

    width:calc(100% / var(--panel-count));
    min-width:calc(100% / var(--panel-count));
    max-width:calc(100% / var(--panel-count));

    flex:0 0 calc(100% / var(--panel-count));

    box-sizing:border-box;
    padding-right:4px;
  }
}

/* ===== 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;
  }

  .icon-bubble{
    width:30px;
    height:30px;
    flex:0 0 30px;
  }

  .info-card{
    padding:18px 16px 16px;
  }

  .info-card h2{
    font-size:21px;
  }

  .info-card p{
    font-size:13px;
  }
}

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

.ha-divider{
  height:1px;
  margin:4px 4px 8px;
  background:var(--stroke);
}

/* ===== 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;
}

.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;
  border:0;
  border-radius:999px;
  background:transparent;
  color:var(--text);
  font:800 13px/1 -apple-system,BlinkMacSystemFont,"SF Pro Text","Inter",system-ui,sans-serif;
  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;
}

.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;
  }

  /* Info-Karte im Querformat exakt so breit wie der Graph-Popup,
     damit beide Fenster gleich breit sind. */
  .info-card{
    width:min(960px,96vw);
    max-height:96dvh;
  }
}

/* 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,
  .info-card,
  .history-card,
  .info-close,
  #mil-ring1,
  #mil-ring2{
    animation:none!important;
    transition:none!important;
  }

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

  .info-panels{
    transition:none!important;
  }
}

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

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

.admin-tiles .ha-tile--wide{
  grid-column:span 2;
}

@media (max-width:640px){
  .admin-tiles{
    grid-template-columns:repeat(2,1fr);
    gap:8px;
  }
  .admin-tiles .ha-tile--wide-mobile{
    grid-column:span 2;
  }
}