:root{
  --dt-blue:#2888b5;
  --dt-orange:#e7792c;
  --bg:#f6f8fb;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#475569;
  --border:#e2e8f0;
  --shadow:0 10px 30px rgba(2,6,23,.08);
  --radius:14px;
  --wrap-pad-x:18px;
  --wrap-pad-y:22px;
  --safe-left:env(safe-area-inset-left, 0px);
  --safe-right:env(safe-area-inset-right, 0px);
  --safe-bottom:env(safe-area-inset-bottom, 0px);
}

*{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
body{
  margin:0;
  padding-left:var(--safe-left);
  padding-right:var(--safe-right);
  padding-bottom:var(--safe-bottom);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Helvetica Neue", sans-serif;
  color:var(--text);
  background:linear-gradient(180deg, #ffffff 0%, var(--bg) 55%, var(--bg) 100%);
}
a{color:var(--dt-blue); text-decoration:none}
a:hover{text-decoration:underline}

.topbar{
  position:sticky; top:0;
  background:rgba(255,255,255,.9);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--border);
}
.topbar-inner{
  max-width:1100px;
  margin:0 auto;
  padding-top:12px;
  padding-bottom:12px;
  padding-left:calc(var(--wrap-pad-x) + var(--safe-left));
  padding-right:calc(var(--wrap-pad-x) + var(--safe-right));
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}
.brand{
  font-weight:800;
  letter-spacing:.02em;
  color:var(--text);
}
.brand b{color:var(--dt-blue)}
.nav{
  margin-left:auto;
  display:flex;
  gap:10px 14px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
}
.nav a{
  color:var(--muted);
  padding:10px 12px;
  border-radius:10px;
  min-height:44px;
  display:inline-flex;
  align-items:center;
}
.nav a:hover{background:#f1f5f9; text-decoration:none; color:var(--text)}

.wrap{
  max-width:1100px;
  margin:0 auto;
  padding:var(--wrap-pad-y) var(--wrap-pad-x) max(60px, calc(36px + var(--safe-bottom)));
}
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:18px;
  min-width:0;
}

/* Zentrierte schmale Karten (Login, Alarm-ACK, …) */
.card--center-sm{max-width:520px;margin-left:auto;margin-right:auto;width:100%;}
.card--center-md{max-width:620px;margin-left:auto;margin-right:auto;width:100%;}
.card--center-lg{max-width:820px;margin-left:auto;margin-right:auto;width:100%;}

/* Bereiche in einer Karte trennen (/me, Kundendaten, …) */
.portal-divider{
  border:0;
  margin:18px 0;
  border-top:1px solid var(--border);
}

/* Kundendaten: Panels untereinander, kein Zwei-Spalten-Float */
.customer-stack{
  display:flex;
  flex-direction:column;
  gap:0;
  align-items:stretch;
}
.customer-stack > section{
  margin:0;
  min-width:0;
}
.grid{display:grid; grid-template-columns: 1fr; gap:16px}
@media (min-width: 980px){
  .grid-2{grid-template-columns: 1fr 1fr}
}

h1,h2,h3{margin:0 0 10px}
h2{font-size:clamp(1.15rem, 4vw + 0.5rem, 1.375rem)}
p,li{color:var(--muted); overflow-wrap:break-word}
code{font-size:0.92em; word-break:break-all;}

label{display:block; font-weight:600; margin-bottom:6px; color:var(--text)}
input,textarea,select{
  width:100%;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:12px;
  font-size:14px;
  background:white;
}
input[type="radio"]{
  width:auto;
  padding:0;
  border-radius:999px;
  box-shadow:none;
}
input:focus,textarea:focus,select:focus{
  outline:none;
  border-color:rgba(40,136,181,.6);
  box-shadow:0 0 0 4px rgba(40,136,181,.12);
}
.row{display:grid; grid-template-columns:1fr; gap:12px}
@media (min-width: 740px){
  .row-2{grid-template-columns:1fr 1fr}
  .row-3{grid-template-columns:1fr 1fr 1fr}
}

.radio-group{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  align-items:center;
  margin-top:6px;
}
.radio-item{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:0;
  font-weight:400;
  color:var(--text);
}
.radio-item span{color:var(--text)}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 16px;
  border-radius:12px;
  border:1px solid var(--border);
  background:white;
  cursor:pointer;
  font-weight:700;
  min-height:44px;
}
.btn-primary{
  border-color:rgba(40,136,181,.35);
  background:linear-gradient(180deg, rgba(40,136,181,.12), rgba(40,136,181,.05));
  color:var(--text);
}
.btn-primary:hover{border-color:rgba(40,136,181,.6)}

.notice-ok{background:#ecfdf5; border:1px solid #bbf7d0; color:#166534; padding:10px 12px; border-radius:12px}
.notice-err{background:#fef2f2; border:1px solid #fecaca; color:#991b1b; padding:10px 12px; border-radius:12px}
.notice-info{background:#f8fafc; border:1px solid #e2e8f0; color:#334155; padding:12px 14px; border-radius:12px; font-size:14px}
.notice-info code{font-size:12px;background:#fff;padding:1px 6px;border-radius:6px;border:1px solid var(--border)}
.help-muted{color:var(--muted);font-size:13px;line-height:1.45;margin:0}

.table-wrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  margin:8px -4px 0;
  padding:0 4px;
}
table{width:100%; border-collapse:collapse}
th,td{padding:10px 10px; border-bottom:1px solid var(--border); text-align:left; font-size:14px}
th{color:var(--muted); font-weight:800; font-size:12px; text-transform:uppercase; letter-spacing:.06em}

/* Enfold / dokutemp child-theme compatibility snippets */
#top label { font-weight: 400 !important; }

/* SECTIONS */
.section { clear: both; padding: 0; margin: 0; }

/* COLUMN SETUP */
.col { display: block; float: left; margin: 1% 0 1% 3%; }
.col:first-child { margin-left: 0; }

/* GROUPING */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear: both; }
.group { zoom: 1; }

/* GRID OF TWO */
.span_2_of_2 { width: 100%; }
.span_1_of_2 { width: 48.5%; }

@media only screen and (max-width: 480px) {
  .col { margin: 1% 0 1% 0%; }
  .span_2_of_2, .span_1_of_2 { width: 100%; }
}

/* --- Responsive Layout (Mobile-first Ergänzung) --- */
@media (max-width: 767px){
  :root{
    --wrap-pad-x:14px;
    --wrap-pad-y:16px;
  }
  .card{padding:14px;}
  .nav{
    margin-left:0;
    width:100%;
    justify-content:flex-start;
  }
  /* Float-Spalten aus Legacy-Templates: untereinander */
  .section.group{
    display:flex;
    flex-direction:column;
    gap:14px;
  }
  .section.group .col{
    float:none !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
  }
  .card--center-sm,.card--center-md,.card--center-lg{
    max-width:100%;
  }
  input, textarea, select{font-size:16px;} /* iOS: weniger Auto-Zoom */
  .btn-primary{width:100%;}
  form .btn,
  form a.btn{
    width:100%;
    justify-content:center;
  }
  form .btn + .btn,
  form .btn + a.btn,
  form a.btn + .btn,
  form a.btn + a.btn{
    margin-top:10px;
  }
  table{font-size:13px;}
  th, td{padding:10px 8px;}
  table td .btn{
    width:100%;
    justify-content:center;
  }
}

@media (min-width: 768px){
  /* Zwei Spalten wie zuvor, ohne Float-Probleme */
  .section.group{
    display:flex;
    flex-wrap:wrap;
    gap:16px;
    align-items:stretch;
  }
  .section.group .col.span_1_of_2{
    float:none !important;
    margin:0 !important;
    flex:1 1 calc(50% - 8px);
    width:auto !important;
    max-width:calc(50% - 8px);
    min-width:0;
  }
}

/* Alarm quittieren: Temperatur-SVG */
.alarm-chart-wrap{
  margin-top:14px;
}
.alarm-chart-caption{
  margin:0 0 8px;
  font-size:13px;
  color:var(--muted);
}
.alarm-chart-wrap svg{
  display:block;
  width:100%;
  height:auto;
  border-radius:12px;
  border:1px solid var(--border);
}