/*
Theme Name:   Intelligentes Raumklima
Theme URI:    https://bjarte.de/raumklima
Description:  Astra Child Theme – Intelligentes Raumklima-System mit Verarbeitungsprinzip 4.0. Helles, professionelles Dashboard mit Live-Sensordaten, Ampellogik und zweisprachiger Begründungsanzeige.
Author:       Bjarte Magnussen
Template:     astra
Version:      3.0.0
Text Domain:  raumklima
*/

/*
  v3.0 – Aufräum-Refactor:
  • Ausgabe ausschließlich über Shortcodes ([rk_dashboard], [rk_admin],
    [rk_profil], [rk_geraete], [rk_anmelden]).
  • SÄMTLICHE Styles liegen jetzt hier – keine Inline-<style>-Blöcke und keine
    style=""-Attribute mehr in functions.php / Templates / Plugin.
  • Drei früher kollidierende Design-Systeme sauber getrennt per Namespace:
      App/Dashboard/Admin/Profil  ->  .rk-*        (unverändertes Bestandsdesign)
      Anmelden/Registrierung      ->  .rk-auth-*   (grünes Login-Design)
      Geräte verknüpfen           ->  .rk-dev-*    (an App-Design angeglichen)
  • Astra-Chrome wird nur noch über die Body-Klasse .rk-app ausgeblendet.
*/

/* ═══════════════════════════════════════
   DESIGN TOKENS
═══════════════════════════════════════ */
:root {
  /* Neutrals */
  --rk-page-bg:   #f4f4f5;
  --rk-card-bg:   #ffffff;
  --rk-border:    #e4e4e7;
  --rk-border2:   #d1d5db;

  /* Text */
  --rk-text:      #18181b;
  --rk-text2:     #52525b;
  --rk-text3:     #a1a1aa;

  /* Status */
  --rk-green:     #22c55e;
  --rk-green-bg:  #f0fdf4;
  --rk-green-brd: #bbf7d0;
  --rk-yellow:    #f59e0b;
  --rk-yellow-bg: #fffbeb;
  --rk-yellow-brd:#fde68a;
  --rk-red:       #ef4444;
  --rk-red-bg:    #fef2f2;
  --rk-red-brd:   #fecaca;

  /* Accent */
  --rk-accent:    #18181b;
  --rk-blue:      #3b82f6;

  /* Type */
  --rk-font:      'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --rk-mono:      'DM Mono', 'JetBrains Mono', 'Fira Mono', monospace;

  /* Radius */
  --rk-r:   10px;
  --rk-r2:  14px;

  /* Shadow */
  --rk-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
}

/* ═══════════════════════════════════════
   RESET & BASE
═══════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body.rk-app {
  font-family: var(--rk-font);
  font-size: 14px;
  line-height: 1.6;
  color: var(--rk-text);
  background: var(--rk-page-bg);
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
}

/* Hide Astra header on RK pages */
body.rk-app .site-header,
body.rk-app .ast-desktop-header-content { display: none !important; }
body.rk-app #page { padding-top: 0; }
body.rk-app .ast-container { max-width: 100%; padding: 0; }
body.rk-app .entry-content { margin: 0; }

/* ═══════════════════════════════════════
   NAVIGATION
═══════════════════════════════════════ */
.rk-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: 56px;
  background: #fff;
  border-bottom: 1px solid var(--rk-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  gap: 16px;
}

.rk-nav-left { display: flex; align-items: center; gap: 16px; }

.rk-logo {
  font-size: 14px;
  font-weight: 600;
  color: var(--rk-text);
  letter-spacing: -.2px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.rk-logo-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rk-green);
  flex-shrink: 0;
  transition: background .3s;
}
.rk-logo-dot.warn { background: var(--rk-yellow); }
.rk-logo-dot.bad  { background: var(--rk-red); }

/* Pills */
.rk-pill {
  font-size: 11px;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid;
  line-height: 1.4;
  white-space: nowrap;
  transition: all .25s;
}
.rk-pill-winter { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }
.rk-pill-summer { background: var(--rk-yellow-bg); border-color: var(--rk-yellow-brd); color: #92400e; }
.rk-pill-wohnen  { background: var(--rk-green-bg); border-color: var(--rk-green-brd); color: #15803d; cursor: pointer; }
.rk-pill-schlafen{ background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; cursor: pointer; }

.rk-nav-right { display: flex; align-items: center; gap: 10px; }

.rk-clock {
  font-family: var(--rk-mono);
  font-size: 12px;
  color: var(--rk-text3);
  font-variant-numeric: tabular-nums;
}

/* Online status */
.rk-online {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--rk-text3);
}
.rk-status-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.rk-status-dot.online  { background: var(--rk-green); animation: rk-pulse 2s infinite; }
.rk-status-dot.offline { background: var(--rk-red); }
@keyframes rk-pulse { 0%,100%{opacity:1} 50%{opacity:.35} }

/* Nav buttons */
.rk-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 500;
  font-family: var(--rk-font);
  color: var(--rk-text2);
  background: #fff;
  border: 1px solid var(--rk-border);
  border-radius: var(--rk-r);
  cursor: pointer;
  text-decoration: none;
  transition: all .15s;
}
.rk-nav-btn:hover { background: #fafafa; border-color: var(--rk-border2); color: var(--rk-text); }
.rk-nav-btn.primary { background: var(--rk-text); color: #fff; border-color: var(--rk-text); }
.rk-nav-btn.primary:hover { background: #27272a; }

/* ═══════════════════════════════════════
   PAGE LAYOUT
═══════════════════════════════════════ */
.rk-page-wrap { padding-top: 0; }

.rk-main {
  max-width: 900px;
  margin: 0 auto;
  padding: 24px 20px 60px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ═══════════════════════════════════════
   CARDS
═══════════════════════════════════════ */
.rk-card {
  background: var(--rk-card-bg);
  border: 1px solid var(--rk-border);
  border-radius: var(--rk-r2);
  box-shadow: var(--rk-shadow);
  overflow: hidden;
  transition: border-color .25s;
}
.rk-card-pad  { padding: 18px 22px; }
.rk-card-sm   { padding: 14px 18px; }

.rk-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rk-row-5 { display: grid; grid-template-columns: repeat(5,1fr); gap: 12px; }
.rk-row-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }

/* Section label */
.rk-section-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--rk-text3);
  margin-bottom: 12px;
}

/* ═══════════════════════════════════════
   TRAFFIC LIGHTS (AMPELN)
═══════════════════════════════════════ */
.rk-ampel-card {
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 20px;
}

.rk-tl {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}

.rk-lamp {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #e4e4e7;
  transition: background .4s, box-shadow .4s;
}

@keyframes rk-glow-g { 0%,100%{box-shadow:0 0 0 4px #dcfce7} 50%{box-shadow:0 0 0 7px #bbf7d0} }
@keyframes rk-glow-y { 0%,100%{box-shadow:0 0 0 4px #fef9c3} 50%{box-shadow:0 0 0 7px #fef08a} }
@keyframes rk-glow-r { 0%,100%{box-shadow:0 0 0 4px #fee2e2} 50%{box-shadow:0 0 0 7px #fecaca} }

.rk-lamp.g { background: var(--rk-green);  animation: rk-glow-g 2.5s infinite; }
.rk-lamp.y { background: var(--rk-yellow); animation: rk-glow-y 1.8s infinite; }
.rk-lamp.r { background: var(--rk-red);    animation: rk-glow-r 1.1s infinite; }

.rk-ampel-label  {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--rk-text3);
  margin-bottom: 4px;
}
.rk-ampel-status {
  font-size: 17px;
  font-weight: 700;
  color: var(--rk-text);
  transition: color .4s;
  margin-bottom: 2px;
  line-height: 1.2;
}
.rk-ampel-short {
  font-size: 12px;
  color: var(--rk-text3);
  transition: color .4s;
  line-height: 1.4;
}

/* ═══════════════════════════════════════
   REASONS
═══════════════════════════════════════ */
.rk-reasons {
  padding: 18px 22px;
}
.rk-reason-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rk-reason-item {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.55;
  transition: color .4s;
}
.rk-reason-item .en {
  font-weight: 400;
  opacity: .6;
}
.rk-reason-item.ok   { color: var(--rk-green); }
.rk-reason-item.warn { color: var(--rk-yellow); }
.rk-reason-item.bad  { color: var(--rk-red); }

/* ═══════════════════════════════════════
   METRIC TILES
═══════════════════════════════════════ */
.rk-metric {
  padding: 16px 18px;
}
.rk-metric-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--rk-text3);
  margin-bottom: 6px;
}
.rk-metric-value {
  font-size: 26px;
  font-weight: 700;
  color: var(--rk-text);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  font-family: var(--rk-mono);
  transition: color .5s;
}
.rk-metric-unit {
  font-size: 11px;
  color: var(--rk-text3);
  margin-top: 3px;
}
.rk-metric-value.warn { color: var(--rk-yellow); }
.rk-metric-value.bad  { color: var(--rk-red); }

/* ═══════════════════════════════════════
   CHART
═══════════════════════════════════════ */
.rk-chart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  flex-wrap: wrap;
  gap: 8px;
}
.rk-chart-title { font-size: 12px; font-weight: 600; color: var(--rk-text); }
.rk-legend { display: flex; gap: 14px; flex-wrap: wrap; }
.rk-leg {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--rk-text3);
}
.rk-leg-line { width: 16px; height: 2px; border-radius: 1px; }
.rk-chart-area { height: 180px; }
.rk-chart-area canvas { width: 100% !important; height: 100% !important; display: block; }

/* ═══════════════════════════════════════
   CAMERA
═══════════════════════════════════════ */
.rk-cam-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.rk-cam-ts { font-size: 11px; color: var(--rk-text3); }
.rk-cam-frame {
  width: 100%;
  aspect-ratio: 16/9;
  background: #fafafa;
  border: 1px solid var(--rk-border);
  border-radius: var(--rk-r);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--rk-text3);
  font-size: 12px;
  overflow: hidden;
  position: relative;
}
.rk-cam-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}
.rk-cam-frame img.loaded { display: block; }

/* ═══════════════════════════════════════
   LOGIN-/2FA-PAGE-CSS ENTFERNT (v3.0)
   login.php + twofa.php existieren nicht mehr – Anmeldung läuft über
   [rk_anmelden] mit eigenem Namespace .rk-auth-* (siehe unten).
   Die .rk-form-* Klassen bleiben: sie werden von Admin/Profil-Formularen genutzt.
═══════════════════════════════════════ */

/* Form (genutzt von Admin „Nutzer erstellen" und Profil „Passwort ändern") */
.rk-form-group { margin-bottom: 16px; }
.rk-form-label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--rk-text2);
  margin-bottom: 6px;
}
.rk-form-input {
  width: 100%;
  padding: 9px 12px;
  font-size: 14px;
  font-family: var(--rk-font);
  color: var(--rk-text);
  background: #fff;
  border: 1px solid var(--rk-border);
  border-radius: var(--rk-r);
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.rk-form-input:focus {
  border-color: var(--rk-text);
  box-shadow: 0 0 0 3px rgba(24,24,27,.08);
}
.rk-form-input::placeholder { color: var(--rk-text3); }

.rk-btn-submit {
  width: 100%;
  padding: 10px;
  font-size: 14px;
  font-weight: 600;
  font-family: var(--rk-font);
  color: #fff;
  background: var(--rk-text);
  border: none;
  border-radius: var(--rk-r);
  cursor: pointer;
  transition: background .15s, transform .1s;
}
.rk-btn-submit:hover { background: #27272a; transform: translateY(-1px); }
.rk-error {
  background: var(--rk-red-bg);
  border: 1px solid var(--rk-red-brd);
  border-radius: var(--rk-r);
  padding: 9px 12px;
  font-size: 13px;
  color: #991b1b;
  margin-bottom: 14px;
}

/* (2FA-CSS entfernt – kein 2FA mehr im Projekt) */

/* ═══════════════════════════════════════
   ADMIN & PROFIL
═══════════════════════════════════════ */
.rk-admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 16px;
}
.rk-section-head {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--rk-text3);
  padding: 14px 20px;
  border-bottom: 1px solid var(--rk-border);
}
.rk-admin-body { padding: 18px 20px; }

.rk-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.rk-table th {
  text-align: left;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--rk-text3);
  padding: 6px 12px;
  border-bottom: 1px solid var(--rk-border);
}
.rk-table td {
  padding: 9px 12px;
  border-bottom: 1px solid #f4f4f5;
  vertical-align: middle;
}
.rk-table tr:last-child td { border-bottom: none; }
.rk-table tr:hover td { background: #fafafa; }

.rk-role-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  font-family: var(--rk-mono);
}
.rk-role-badge.admin  { background: #f4f4f5; color: var(--rk-text); }
.rk-role-badge.nutzer { background: var(--rk-green-bg); color: #15803d; }

.rk-btn-danger {
  padding: 4px 10px;
  font-size: 11px;
  background: var(--rk-red-bg);
  border: 1px solid var(--rk-red-brd);
  color: #b91c1c;
  border-radius: 5px;
  cursor: pointer;
  font-family: var(--rk-font);
  transition: background .15s;
}
.rk-btn-danger:hover { background: #fee2e2; }

.rk-btn-primary-sm {
  width: 100%;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--rk-font);
  color: #fff;
  background: var(--rk-text);
  border: none;
  border-radius: var(--rk-r);
  cursor: pointer;
  transition: background .15s;
  margin-top: 4px;
}
.rk-btn-primary-sm:hover { background: #27272a; }

/* ═══════════════════════════════════════
   TOAST NOTIFICATIONS
═══════════════════════════════════════ */
.rk-toasts {
  position: fixed;
  top: 70px;
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rk-toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  background: #fff;
  border: 1px solid var(--rk-border);
  border-radius: var(--rk-r);
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
  font-size: 13px;
  min-width: 240px;
  animation: rk-toast-in .25s ease;
}
.rk-toast.ok   { border-left: 3px solid var(--rk-green); }
.rk-toast.warn { border-left: 3px solid var(--rk-yellow); }
.rk-toast.err  { border-left: 3px solid var(--rk-red); }
@keyframes rk-toast-in {
  from { opacity:0; transform: translateX(12px); }
  to   { opacity:1; transform: translateX(0); }
}

/* ═══════════════════════════════════════
   SPINNER
═══════════════════════════════════════ */
.rk-spinner {
  width: 16px; height: 16px;
  border: 2px solid var(--rk-border);
  border-top-color: var(--rk-text);
  border-radius: 50%;
  animation: rk-spin .6s linear infinite;
  display: inline-block;
}
@keyframes rk-spin { to { transform: rotate(360deg); } }

/* ═══════════════════════════════════════
   PAGE HEADER
═══════════════════════════════════════ */
.rk-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 10px;
}
.rk-page-title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.3px;
  color: var(--rk-text);
}
.rk-breadcrumb {
  font-size: 12px;
  color: var(--rk-text3);
  margin-bottom: 3px;
  display: flex;
  gap: 6px;
}
.rk-breadcrumb a { color: var(--rk-text3); text-decoration: none; }
.rk-breadcrumb a:hover { color: var(--rk-text); }

/* ═══════════════════════════════════════
   FOOTER
═══════════════════════════════════════ */
.rk-footer {
  border-top: 1px solid var(--rk-border);
  padding: 18px 28px;
  text-align: center;
  font-size: 12px;
  color: var(--rk-text3);
}

/* ═══════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════ */
@media (max-width: 860px) {
  .rk-row-5 { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 640px) {
  .rk-row-2 { grid-template-columns: 1fr; }
  .rk-row-5 { grid-template-columns: 1fr 1fr; }
  .rk-nav   { padding: 0 14px; }
  .rk-main  { padding: 16px 12px 48px; }
  .rk-clock { display: none; }
}
.ast-arrow-svg {
  display: none !important;
}
/* ═══════════════════════════════════════════════════════════════════════
   v3.0 ZUSATZ – ehemals inline / verteilt, jetzt zentral
   ═══════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────
   ASTRA-CHROME AUSBLENDEN (nur auf App-Seiten, gesteuert über Body-Klasse .rk-app)
   Ersetzt den früheren globalen Inline-<style> in functions.php.
─────────────────────────────────────── */
body.rk-app .ast-above-header-wrap,
body.rk-app .ast-below-header-wrap,
body.rk-app .ast-primary-header-bar,
body.rk-app #masthead,
body.rk-app .ast-page-title-wrap,
body.rk-app .entry-title,
body.rk-app .page-title,
body.rk-app .wp-block-post-title,
body.rk-app .site-footer,
body.rk-app #colophon,
body.rk-app .ast-footer-copyright,
body.rk-app .footer-widget-area,
body.rk-app .ast-small-footer { display: none !important; }

body.rk-app .entry-content,
body.rk-app #content .ast-container,
body.rk-app .ast-page-builder-template .entry-content { padding: 0 !important; margin: 0 !important; }
body.rk-app .site,
body.rk-app .ast-container { max-width: 100% !important; padding: 0 !important; }
body.rk-app .ast-arrow-svg { display: none !important; }

/* Astra-Button-Eigenheiten (Uppercase/Schatten) für unsere Buttons neutralisieren */
body.rk-app .rk-nav-btn,
body.rk-app .rk-btn-primary-sm,
body.rk-app .rk-btn-danger,
body.rk-app .rk-btn-submit {
  text-transform: none;
  letter-spacing: normal;
  box-shadow: none;
}

/* ───────────────────────────────────────
   HILFSKLASSEN  (lösen die style=""-Attribute in den Templates ab)
─────────────────────────────────────── */
.rk-hidden    { display: none !important; }
.rk-col-full  { grid-column: 1 / -1; }
.rk-muted     { color: var(--rk-text3); }
.rk-mono      { font-family: var(--rk-mono); }
.rk-mt        { margin-top: 14px; }
.rk-cell-sm   { font-size: 12px; }
.rk-profile-name { font-weight: 600; font-size: 15px; }
.rk-login-foot-text { font-size: 11px; color: var(--rk-text3); }

/* Responsive Tabellen: ab 560px horizontal scrollbar statt zerquetscht */
.rk-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 560px) {
  .rk-table-scroll .rk-table { min-width: 480px; }
}

/* Key/Value-Tabelle (Admin „System" + Profil „Account") */
.rk-kv { width: 100%; font-size: 13px; }
.rk-kv td { padding: 6px 0; vertical-align: top; }
.rk-kv td:first-child { color: var(--rk-text3); white-space: nowrap; padding-right: 14px; }
.rk-kv .mono { font-family: var(--rk-mono); font-size: 11px; word-break: break-all; }
@media (max-width: 400px) {
  .rk-kv, .rk-kv tbody, .rk-kv tr, .rk-kv td { display: block; width: auto; }
  .rk-kv tr { margin-bottom: 8px; }
  .rk-kv td:first-child { white-space: normal; padding-right: 0; padding-bottom: 2px; font-size: 11px; }
}

/* Avatar + Account-Kopf (Profil) */
.rk-profile-head { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.rk-avatar {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--rk-text); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 700; flex-shrink: 0;
}
.rk-profile-head .rk-role-badge { display: inline-block; margin-top: 4px; }

/* Block-Button (Admin „API-URL konfigurieren") */
.rk-btn-block { display: block; text-align: center; text-decoration: none; }

/* Formular-Rückmeldung (Profil „Passwort ändern") – Klassen statt Inline-Styling im JS */
.rk-formmsg { margin-bottom: 14px; padding: 9px 12px; border-radius: var(--rk-r); font-size: 13px; }
.rk-formmsg.success { background: var(--rk-green-bg); border: 1px solid var(--rk-green-brd); color: #15803d; }
.rk-formmsg.error   { background: var(--rk-red-bg);   border: 1px solid var(--rk-red-brd);   color: #b91c1c; }

/* Ampel-/Kurztext-Farben als Klassen (JS toggelt jetzt Klassen statt .style.color) */
.rk-ampel-status.ok  { color: var(--rk-green); }
.rk-ampel-status.warn{ color: var(--rk-yellow); }
.rk-ampel-status.bad { color: var(--rk-red); }
.rk-ampel-short.ok   { color: var(--rk-green); }
.rk-ampel-short.warn { color: var(--rk-yellow); }
.rk-ampel-short.bad  { color: var(--rk-red); }

/* Kamera-Platzhalter-Icon */
.rk-cam-frame svg { color: #d4d4d8; }

/* ═══════════════════════════════════════════════════════════════════════
   AUTH-DESIGN  ·  Anmelden / Registrieren  ([rk_anmelden])
   Namespace .rk-auth-*  – aus dem Plugin-Inline-<style> herausgelöst.
   Eigene (grüne) Farbwelt, daher hier bewusst eigene Hex-Werte.
   ═══════════════════════════════════════════════════════════════════════ */
.rk-auth { font-family: var(--rk-font); }
.rk-auth-page {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 40px 16px;
  background: #F5F5F2;
  position: relative; overflow: hidden;
}
.rk-auth-page::before {
  content: ''; position: absolute;
  width: 600px; height: 600px; border-radius: 50%;
  background: radial-gradient(circle, rgba(26,107,74,0.07) 0%, transparent 70%);
  top: -150px; right: -150px; pointer-events: none;
}
.rk-auth-logobar {
  width: 100%; max-width: 440px;
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 28px; position: relative; z-index: 1;
}
.rk-auth-logo {
  font-family: 'DM Serif Display', serif;
  font-size: 19px; color: #111110;
  text-decoration: none; letter-spacing: -0.3px;
}
.rk-auth-logo em { color: #1A6B4A; font-style: normal; }
.rk-auth-back { font-size: 12px; color: #ADADAB; text-decoration: none; }
.rk-auth-back:hover { color: #1A6B4A; }

.rk-auth-card {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.09);
  border-radius: 22px; padding: 44px 40px;
  width: 100%; max-width: 440px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04), 0 16px 48px rgba(0,0,0,0.05);
  position: relative; z-index: 1;
}
.rk-auth-tabs {
  display: flex; background: #F5F5F2;
  border-radius: 10px; padding: 3px;
  margin-bottom: 32px; gap: 3px;
}
.rk-auth-tab {
  flex: 1; height: 38px; border: none;
  background: none; border-radius: 7px;
  font-size: 13.5px; font-weight: 500;
  color: #ADADAB; cursor: pointer;
  font-family: var(--rk-font);
  transition: all .18s;
}
.rk-auth-tab.active {
  background: #fff; color: #111110;
  box-shadow: 0 1px 4px rgba(0,0,0,0.09);
}
.rk-auth-sec { display: none; }
.rk-auth-sec.active { display: block; }

.rk-auth-title {
  font-family: 'DM Serif Display', serif;
  font-size: 27px; letter-spacing: -0.4px;
  margin: 0 0 5px; color: #111110; line-height: 1.2;
}
.rk-auth-title.center { text-align: center; }
.rk-auth-sub { font-size: 13.5px; color: #ADADAB; margin: 0 0 28px; line-height: 1.6; }
.rk-auth-sub.center { text-align: center; }
.rk-auth-sub strong { color: #111110; }

.rk-auth-fg { margin-bottom: 17px; }
.rk-auth-label {
  display: block; font-size: 11px; font-weight: 600;
  color: #3A3A38; margin-bottom: 6px;
  letter-spacing: 0.5px; text-transform: uppercase;
}
.rk-auth-input {
  width: 100%; height: 46px; padding: 0 14px;
  border: 1.5px solid rgba(0,0,0,0.09); border-radius: 9px;
  font-size: 14.5px; background: #F5F5F2; color: #111110;
  outline: none; transition: all .18s;
  font-family: var(--rk-font);
  -webkit-appearance: none; appearance: none;
  box-sizing: border-box;
}
.rk-auth-input:focus {
  border-color: #1A6B4A; background: #fff;
  box-shadow: 0 0 0 3px rgba(26,107,74,0.10);
}

.rk-auth-btn {
  display: block; width: 100%; height: 48px;
  border: none; border-radius: 9px;
  font-size: 14.5px; font-weight: 500;
  cursor: pointer; transition: all .18s;
  font-family: var(--rk-font);
  line-height: 48px; text-align: center;
  padding: 0; -webkit-appearance: none;
  box-sizing: border-box;
}
.rk-auth-btn-black { background: #111110; color: #fff; }
.rk-auth-btn-black:hover:not(:disabled) { background: #2c2c2a; }
.rk-auth-btn-ghost {
  background: transparent; color: #3A3A38;
  border: 1.5px solid rgba(0,0,0,0.09);
}
.rk-auth-btn-ghost:hover:not(:disabled) { background: #F5F5F2; }
.rk-auth-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.rk-auth-btn-row { display: flex; gap: 10px; margin-top: 8px; }
.rk-auth-btn-row .rk-auth-btn { flex: 1; }
.rk-auth-btn.mt { margin-top: 10px; }

.rk-auth-forgot {
  font-size: 12.5px; color: #ADADAB;
  text-decoration: none; display: block;
  text-align: right; margin-top: 6px;
}
.rk-auth-forgot:hover { color: #1A6B4A; }

.rk-auth-msg {
  border-radius: 9px; padding: 12px 14px;
  font-size: 13px; line-height: 1.55;
  margin-bottom: 16px; display: none;
  font-family: var(--rk-font);
}
.rk-auth-msg.show { display: block; }
.rk-auth-msg.error   { background: #FEF2F2; color: #B91C1C; border: 1px solid rgba(220,38,38,0.15); }
.rk-auth-msg.success { background: #F0FDF4; color: #15803D; border: 1px solid rgba(46,158,110,0.2); }
.rk-auth-msg.warning { background: #FFFBEB; color: #92400E; border: 1px solid rgba(217,119,6,0.2); }

.rk-auth-hint { font-size: 11.5px; color: #ADADAB; margin-top: 5px; }
.rk-auth-pw-bar { height: 3px; border-radius: 2px; background: rgba(0,0,0,0.09); margin-top: 7px; overflow: hidden; }
.rk-auth-pw-fill { height: 100%; border-radius: 2px; width: 0%; transition: width .3s, background .3s; }

.rk-auth-icon { font-size: 52px; display: block; text-align: center; margin-bottom: 18px; }
.rk-auth-steps { margin: 20px 0; }
.rk-auth-step { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; }
.rk-auth-step-n {
  width: 22px; height: 22px; border-radius: 50%;
  background: #1A6B4A; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600;
  flex-shrink: 0; margin-top: 1px;
}
.rk-auth-step-t { font-size: 13px; color: #3A3A38; line-height: 1.55; }

.rk-auth-fnote {
  margin-top: 24px; font-size: 12px;
  color: #ADADAB; text-align: center;
  position: relative; z-index: 1;
}
.rk-auth-fnote a { color: #ADADAB; text-decoration: none; }
.rk-auth-fnote a:hover { color: #1A6B4A; }

@media (max-width: 480px) {
  .rk-auth-page { padding: 24px 12px; }
  .rk-auth-card { padding: 28px 18px; border-radius: 14px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   GERÄTE-DESIGN  ·  Pi verknüpfen  ([rk_geraete])
   Namespace .rk-dev-*  – aus templates/geraete.php (inkl. der im JS erzeugten
   Inline-Styles) herausgelöst und an die App-Token angeglichen.
   ═══════════════════════════════════════════════════════════════════════ */
.rk-dev-bread {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--rk-text3);
  margin-bottom: 18px; flex-wrap: wrap;
}
.rk-dev-back {
  width: 28px; height: 28px; flex-shrink: 0;
  border: 1px solid var(--rk-border); border-radius: var(--rk-r);
  background: #fff; color: var(--rk-text2);
  cursor: pointer; font-size: 14px; line-height: 1;
}
.rk-dev-back:hover { background: #fafafa; color: var(--rk-text); }
.rk-dev-crumb { color: var(--rk-text3); text-decoration: none; }
.rk-dev-crumb:hover { color: var(--rk-text); }
.rk-dev-crumb.cur { color: var(--rk-text); }
.rk-dev-sep { color: var(--rk-text3); }

.rk-dev-page { max-width: 720px; margin: 0 auto; }
.rk-dev-title { font-size: 20px; font-weight: 700; letter-spacing: -.3px; margin-bottom: 4px; }
.rk-dev-sub { font-size: 13px; color: var(--rk-text3); margin-bottom: 20px; }
.rk-dev-list { margin-bottom: 16px; }

/* Geräte-Karte (vom JS erzeugt) */
.rk-dev-item {
  background: var(--rk-card-bg);
  border: 1px solid var(--rk-border);
  border-radius: var(--rk-r2);
  box-shadow: var(--rk-shadow);
  padding: 22px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 14px;
}
.rk-dev-item-main { display: flex; align-items: center; gap: 14px; }
.rk-dev-icon {
  width: 48px; height: 48px; flex-shrink: 0;
  background: #fafafa; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
}
.rk-dev-name { font-size: 15px; font-weight: 500; margin-bottom: 3px; }
.rk-dev-meta { font-size: 12px; color: var(--rk-text3); }
.rk-dev-badge {
  display: inline-flex; align-items: center; gap: 4px;
  border-radius: 100px; padding: 3px 10px;
  font-size: 11px; font-weight: 500; margin-top: 5px;
}
.rk-dev-badge::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; flex-shrink: 0;
}
.rk-dev-badge.online  { background: #D1FAE5; color: var(--rk-green); }
.rk-dev-badge.offline { background: #f4f4f5; color: var(--rk-text3); }
.rk-dev-unlink {
  padding: 8px 16px; border-radius: var(--rk-r);
  font-size: 13px; font-weight: 500;
  border: 1px solid var(--rk-red-brd);
  background: transparent; color: var(--rk-red); cursor: pointer;
}
.rk-dev-unlink:hover { background: var(--rk-red-bg); }

/* Leerzustand */
.rk-dev-empty {
  background: #fff; border: 1px dashed var(--rk-border2);
  border-radius: var(--rk-r2); padding: 48px;
  text-align: center; margin-bottom: 16px;
}
.rk-dev-empty-icon  { font-size: 36px; opacity: .25; margin-bottom: 14px; }
.rk-dev-empty-title { font-size: 16px; font-weight: 500; margin-bottom: 6px; }
.rk-dev-empty-sub   { font-size: 13px; color: var(--rk-text3); }

/* Verknüpfen-Karte */
.rk-dev-card-head {
  font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--rk-text3);
  padding: 14px 20px; border-bottom: 1px solid var(--rk-border);
}
.rk-dev-card-body { padding: 18px 20px; }

.rk-dev-step { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 16px; }
.rk-dev-step-num {
  width: 24px; height: 24px; flex-shrink: 0;
  border-radius: 50%; background: var(--rk-text); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600;
}
.rk-dev-step-text { font-size: 13px; color: var(--rk-text2); line-height: 1.55; }

.rk-dev-term {
  margin-top: 8px; background: #1e1e1e; border-radius: 8px;
  padding: 12px 14px; font-family: var(--rk-mono); font-size: 12px;
  color: #e4e4e7; overflow-x: auto;
}
.rk-dev-term-bar { display: flex; gap: 6px; margin-bottom: 10px; }
.rk-dev-term-dot { width: 11px; height: 11px; border-radius: 50%; }
.rk-dev-term-dot.r { background: #ff5f56; }
.rk-dev-term-dot.y { background: #ffbd2e; }
.rk-dev-term-dot.g { background: #27c93f; }
.rk-dev-term-w { color: #e4e4e7; }
.rk-dev-term-a { color: #4ade80; }

.rk-dev-fg { margin-top: 8px; }
.rk-dev-label { display: block; font-size: 12px; font-weight: 500; color: var(--rk-text2); margin-bottom: 6px; }
.rk-dev-input-row { display: flex; gap: 12px; }
.rk-dev-input {
  flex: 1; height: 46px; padding: 0 14px;
  border: 1px solid var(--rk-border); border-radius: 8px;
  font-size: 14px; font-family: var(--rk-font);
  color: var(--rk-text); background: #fff;
  letter-spacing: 2px; font-weight: 500;
  outline: none; transition: border-color .2s, box-shadow .2s;
  box-sizing: border-box;
}
.rk-dev-input:focus { border-color: var(--rk-text); box-shadow: 0 0 0 3px rgba(24,24,27,.08); }
.rk-dev-link-btn {
  height: 46px; padding: 0 22px; flex-shrink: 0;
  background: var(--rk-text); color: #fff;
  border: none; border-radius: 8px;
  font-size: 14px; font-weight: 500; cursor: pointer; white-space: nowrap;
}
.rk-dev-link-btn:hover:not(:disabled) { background: #27272a; }
.rk-dev-link-btn:disabled { opacity: .5; cursor: not-allowed; }

.rk-dev-msg {
  margin-top: 10px; border-radius: 8px; padding: 10px 14px;
  font-size: 13px; line-height: 1.5; display: none;
}
.rk-dev-msg.show { display: block; }
.rk-dev-msg.info    { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }
.rk-dev-msg.error   { background: var(--rk-red-bg);   color: #b91c1c; border: 1px solid var(--rk-red-brd); }
.rk-dev-msg.success { background: var(--rk-green-bg); color: #15803d; border: 1px solid var(--rk-green-brd); }

/* ═══════════════════════════════════════════════════════════════════════
   LIVE-DASHBOARD  ·  [rk_live]   (aus dashboard_live.html)
   Komplett gekapselt unter .rk-live, damit die generischen Klassennamen
   (.nav/.card/.pill/.logo …) NICHT mit App/Astra kollidieren.
   Eigene (grüne) Token sind auf .rk-live gesetzt statt auf :root.
   Keyframes umbenannt (rklv-*) zur Kollisionsvermeidung.
   ═══════════════════════════════════════════════════════════════════════ */
.rk-live{
  --white:#fff; --off:#F7F7F5; --border:rgba(0,0,0,0.07); --mid:#ACACAA; --dark:#3A3A38; --black:#111110;
  --accent:#1A6B4A; --al:#E8F4EE; --green:#2E9E6E; --red:#DC2626; --yellow:#D97706;
  --radius:12px; --radius-sm:8px; --shadow:0 1px 3px rgba(0,0,0,0.06);
  background:var(--off); color:var(--black);
  font-family:'DM Sans',sans-serif; font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased; min-height:100vh; min-height:100dvh;
}
.rk-live *{box-sizing:border-box}
.rk-live h1,.rk-live h2,.rk-live h3,.rk-live .serif,.rk-live .logo,.rk-live .bignum{font-family:'DM Serif Display',serif;font-weight:400}
.rk-live a{color:inherit}

.rk-live .nav{background:var(--white);border-bottom:1px solid var(--border);height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;position:sticky;top:0;z-index:50;box-shadow:var(--shadow)}
.rk-live .logo{font-size:18px;letter-spacing:-0.3px}
.rk-live .logo span{color:var(--accent)}
.rk-live .badge{display:inline-flex;align-items:center;gap:8px;background:var(--al);border:1px solid rgba(26,107,74,0.2);border-radius:100px;padding:5px 14px;font-size:12px;color:var(--accent);font-weight:500}
.rk-live .badge.off{opacity:.65}
.rk-live .blink{width:7px;height:7px;border-radius:50%;background:var(--green);animation:rklv-blink 1.5s infinite}
.rk-live .blink.off{background:var(--mid);animation:none}
@keyframes rklv-blink{0%,100%{opacity:1}50%{opacity:.3}}

.rk-live .page{max-width:1100px;margin:0 auto;padding:34px 24px 80px}
.rk-live .head{display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-bottom:26px}
.rk-live .ptitle{font-size:30px;letter-spacing:-0.5px;margin:10px 0 4px}
.rk-live .pmeta{font-size:13px;color:var(--mid)}

.rk-live .card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
.rk-live .pad{padding:22px 24px}
.rk-live .mb{margin-bottom:16px}

/* season + status row */
.rk-live .strip{display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:center;padding:18px 24px;margin-bottom:16px}
.rk-live .strip .sicon{font-size:24px}
.rk-live .strip-left{display:flex;align-items:center;gap:12px}
.rk-live .strip-t{font-size:14px;font-weight:500}
.rk-live .strip-s{font-size:12px;color:var(--mid);margin-top:2px}
.rk-live .vline{width:1px;height:40px;background:var(--border);justify-self:center}
.rk-live .verdict-wrap{display:flex;align-items:center;justify-content:flex-end;gap:12px}
.rk-live .vlabel{font-size:12px;color:var(--mid)}
.rk-live .vpill{border-radius:100px;padding:6px 16px;font-size:13px;font-weight:600}
.rk-live .vpill.gut{background:var(--al);color:var(--green)}
.rk-live .vpill.akzeptabel{background:#FFFBEB;color:var(--yellow)}
.rk-live .vpill.kritisch{background:#FEF2F2;color:var(--red)}

/* area traffic-light cards */
.rk-live .areas{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:16px}
.rk-live .acard{padding:22px 18px;display:flex;flex-direction:column;align-items:center;text-align:center}
.rk-live .alabel{font-size:10px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--mid);margin-bottom:16px;display:flex;align-items:center;gap:7px}
.rk-live .alabel i{width:8px;height:8px;border-radius:2px}
.rk-live .alabel i.sq-temp{background:#E8994C}
.rk-live .alabel i.sq-fri{background:#4BA8E8}
.rk-live .alabel i.sq-feu{background:#2E9E6E}
.rk-live .alabel i.sq-sch{background:#D8607A}
.rk-live .lights{display:flex;flex-direction:column;gap:11px;align-items:center;height:150px;justify-content:center;margin-bottom:14px}
.rk-live .licht{width:40px;height:40px;border-radius:50%;transition:all .5s}
.rk-live .off-r{background:#FEE2E2} .rk-live .off-y{background:#FEF3C7} .rk-live .off-g{background:#D1FAE5}
.rk-live .on-g{background:var(--green);box-shadow:0 0 16px rgba(46,158,110,.4);animation:rklv-pg 2s infinite}
.rk-live .on-y{background:var(--yellow);box-shadow:0 0 16px rgba(217,119,6,.4);animation:rklv-py 1.5s infinite}
.rk-live .on-r{background:var(--red);box-shadow:0 0 16px rgba(220,38,38,.5);animation:rklv-pr .8s infinite}
@keyframes rklv-pg{0%,100%{box-shadow:0 0 10px rgba(46,158,110,.3)}50%{box-shadow:0 0 22px rgba(46,158,110,.6)}}
@keyframes rklv-py{0%,100%{box-shadow:0 0 10px rgba(217,119,6,.3)}50%{box-shadow:0 0 22px rgba(217,119,6,.6)}}
@keyframes rklv-pr{0%,100%{box-shadow:0 0 14px rgba(220,38,38,.4)}50%{box-shadow:0 0 28px rgba(220,38,38,.7)}}
.rk-live .astatus{font-size:13px;font-weight:600}
.rk-live .astatus.gut{color:var(--green)}
.rk-live .astatus.akzeptabel{color:var(--yellow)}
.rk-live .astatus.kritisch{color:var(--red)}
.rk-live .aval{font-size:12px;color:var(--mid);margin-top:3px}
.rk-live .aempf{font-size:11px;color:var(--dark);margin-top:7px;line-height:1.4}

/* recommendation banner */
.rk-live .banner{border-radius:var(--radius);padding:18px 24px;margin-bottom:16px;display:flex;align-items:center;gap:16px}
.rk-live .banner .bi{font-size:30px;flex-shrink:0}
.rk-live .banner .bk{font-size:10px;font-weight:600;letter-spacing:1px;text-transform:uppercase;margin-bottom:3px}
.rk-live .banner .bt{font-size:19px;font-weight:700;line-height:1.3}
.rk-live .ban-red{background:#FEF2F2;border:2px solid var(--red)} .rk-live .ban-red .bk,.rk-live .ban-red .bt{color:var(--red)}
.rk-live .ban-yel{background:#FFFBEB;border:1.5px solid var(--yellow)} .rk-live .ban-yel .bk,.rk-live .ban-yel .bt{color:var(--yellow)}

/* begründung */
.rk-live .blabel{font-size:10px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--mid);margin-bottom:14px}
.rk-live .brow{padding:10px 12px;font-size:13px;line-height:1.6;border-radius:6px;margin-bottom:4px}
.rk-live .brow.gut{background:transparent;color:var(--dark)}
.rk-live .brow.akzeptabel{background:rgba(217,119,6,0.06);color:var(--yellow)}
.rk-live .brow.kritisch{background:rgba(220,38,38,0.06);color:var(--red)}
.rk-live .muted-note{color:var(--mid);font-size:13px}
.rk-live .why-toggle{margin-top:14px;background:var(--off);border:1px solid var(--border);border-radius:8px;padding:8px 14px;font-size:13px;font-family:inherit;cursor:pointer;color:var(--black)}
.rk-live .why{margin-top:14px;border-top:1px dashed var(--border);padding-top:14px;display:none}
.rk-live .why.show{display:block}
.rk-live .step{display:flex;gap:12px;padding:6px 0}
.rk-live .step .n{flex:none;width:22px;height:22px;border-radius:50%;background:var(--off);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--mid);font-family:'DM Serif Display',serif}
.rk-live .step b{font-weight:600}
.rk-live .step span{color:var(--mid)}

/* Messwert-Sektionen */
.rk-live .sektion{margin-bottom:16px}
.rk-live .sek-kopf{display:flex;align-items:center;justify-content:space-between;padding:10px 18px;border-radius:var(--radius) var(--radius) 0 0;border:1px solid var(--border);border-bottom:none;background:var(--off)}
.rk-live .sek-kopf-titel{font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--dark)}
.rk-live .sek-body{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--border);border-radius:0 0 var(--radius) var(--radius);background:var(--white);overflow:hidden}
.rk-live .mcard{padding:18px;text-align:center;border-right:1px solid var(--border)}
.rk-live .mcard:last-child{border-right:none}
.rk-live .mcard-full{grid-column:1/-1;border-top:1px solid var(--border);border-right:none}
.rk-live .mlabel{font-size:10px;color:var(--mid);font-weight:500;text-transform:uppercase;letter-spacing:.5px}
.rk-live .bignum{font-size:clamp(20px,4vw,30px);letter-spacing:-1px;margin-top:6px}
.rk-live .munit{font-size:12px;color:var(--mid);margin-top:3px}

/* online/offline pill */
.rk-live .pill{display:inline-flex;align-items:center;gap:5px;border-radius:100px;padding:3px 10px;font-size:11px;font-weight:600}
.rk-live .pill-on{background:var(--al);color:var(--accent)}
.rk-live .pill-off{background:#FEE2E2;color:var(--red)}
.rk-live .pill-dot{width:6px;height:6px;border-radius:50%}
.rk-live .dot-on{background:var(--green)}
.rk-live .dot-off{background:var(--red)}

/* einstellungen + kamera */
.rk-live .cols{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px}
.rk-live .h3{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--mid);font-weight:600;margin:0 0 6px}
.rk-live .sub{font-size:12px;color:var(--mid);margin-bottom:14px}
.rk-live .modes{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.rk-live .mode{height:34px;padding:0 13px;border-radius:8px;font-size:13px;font-weight:500;border:1px solid var(--border);background:transparent;color:var(--dark);cursor:pointer;transition:.2s;font-family:inherit}
.rk-live .mode:hover{border-color:var(--mid)}
.rk-live .mode.on{background:var(--black);color:#fff;border-color:var(--black)}
.rk-live .ctrl{margin-bottom:12px}
.rk-live .cl{display:flex;justify-content:space-between;font-size:13px;margin-bottom:5px}
.rk-live .cl b{font-weight:600}
.rk-live .seg{display:flex;gap:6px}
.rk-live .seg button{flex:1;background:transparent;border:1px solid var(--border);color:var(--dark);border-radius:8px;padding:8px;font-size:13px;font-family:inherit;cursor:pointer}
.rk-live .seg button.on{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.rk-live .hint{font-size:12px;color:var(--mid);margin-top:6px;line-height:1.45}
.rk-live .glabel{font-size:13px;margin:16px 0 4px;font-weight:600}
.rk-live .cam{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px;display:block;background:var(--off);border:1px solid var(--border)}
.rk-live .cam.hide{display:none}

/* server-bar + download */
.rk-live .srvbar{margin-bottom:16px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px}
.rk-live .srv-left{display:flex;align-items:center;gap:16px}
.rk-live .srv-lbl{font-size:13px;color:var(--mid);font-weight:600;text-transform:uppercase;letter-spacing:1px}
.rk-live .dl-btn{display:inline-flex;align-items:center;gap:8px;background:var(--black);color:#fff;border:none;border-radius:8px;padding:9px 18px;font-size:13px;font-weight:600;font-family:inherit;cursor:pointer;text-decoration:none;transition:.15s}
.rk-live .dl-btn:hover{background:#333}
.rk-live .dl-btn svg{flex-shrink:0}

.rk-live .info{background:var(--al);border:1px solid rgba(26,107,74,0.15);border-radius:12px;padding:16px 20px;display:flex;align-items:center;gap:12px;font-size:13px;color:var(--accent);line-height:1.6}
.rk-live .info-emoji{font-size:20px}

@media(max-width:820px){
  .rk-live .areas{grid-template-columns:repeat(2,1fr)}
  .rk-live .cols{grid-template-columns:1fr}
  .rk-live .strip{grid-template-columns:1fr;text-align:left}
  .rk-live .vline{display:none}
  .rk-live .verdict-wrap{justify-content:flex-start}
  .rk-live .sek-body{grid-template-columns:repeat(2,1fr)}
  .rk-live .mcard:nth-child(2){border-right:none}
  .rk-live .mcard:nth-child(3){border-top:1px solid var(--border)}
}
@media(max-width:560px){
  .rk-live .licht{width:34px;height:34px}
  .rk-live .lights{height:130px}
  .rk-live .sek-body{grid-template-columns:1fr}
  .rk-live .mcard{border-right:none;border-bottom:1px solid var(--border)}
  .rk-live .mcard:last-child{border-bottom:none}
}
@media(max-width:400px){
  .rk-live .page{padding:20px 14px 60px}
  .rk-live .acard{padding:14px 8px}
  .rk-live .alabel{font-size:9px;margin-bottom:10px}
  .rk-live .lights{height:110px;gap:8px}
  .rk-live .licht{width:28px;height:28px}
  .rk-live .astatus{font-size:12px}
  .rk-live .aempf{font-size:10px}
  .rk-live .ptitle{font-size:24px}
  .rk-live .mcard{padding:12px 8px}
  .rk-live .bignum{font-size:clamp(18px,5vw,24px)}
  .rk-live .pad{padding:16px}
  .rk-live .cl{flex-wrap:wrap;gap:4px}
}
.rk-live :focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ═══════════════════════════════════════════════════════════════════════
   LIVE-DASHBOARD (DEMO)  ·  [rk_demo]   (aus dashboard_live_demo.html)
   Gekapselt unter .rk-demo (eigener Namespace, getrennt von .rk-live und App).
   Token auf .rk-demo statt :root, Keyframes umbenannt (rkdemo-*).
   ═══════════════════════════════════════════════════════════════════════ */
.rk-demo{
  --white:#fff; --off:#F7F7F5; --border:rgba(0,0,0,0.07); --mid:#ACACAA; --dark:#3A3A38; --black:#111110;
  --accent:#1A6B4A; --al:#E8F4EE; --green:#2E9E6E; --red:#DC2626; --yellow:#D97706;
  --radius:12px; --radius-sm:8px; --shadow:0 1px 3px rgba(0,0,0,0.06);
  background:var(--off); color:var(--black);
  font-family:'DM Sans',sans-serif; font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased; min-height:100vh; min-height:100dvh;
}
.rk-demo *{box-sizing:border-box}
.rk-demo h1,.rk-demo h2,.rk-demo h3,.rk-demo .serif,.rk-demo .logo,.rk-demo .bignum{font-family:'DM Serif Display',serif;font-weight:400}
.rk-demo a{color:inherit}

.rk-demo .nav{background:var(--white);border-bottom:1px solid var(--border);height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;position:sticky;top:0;z-index:50;box-shadow:var(--shadow)}
.rk-demo .logo{font-size:18px;letter-spacing:-0.3px}
.rk-demo .logo span{color:var(--accent)}
.rk-demo .badge{display:inline-flex;align-items:center;gap:8px;background:var(--al);border:1px solid rgba(26,107,74,0.2);border-radius:100px;padding:5px 14px;font-size:12px;color:var(--accent);font-weight:500}
.rk-demo .badge.off{opacity:.65}
.rk-demo .blink{width:7px;height:7px;border-radius:50%;background:var(--green);animation:rkdemo-blink 1.5s infinite}
.rk-demo .blink.off{background:var(--mid);animation:none}
@keyframes rkdemo-blink{0%,100%{opacity:1}50%{opacity:.3}}

.rk-demo .page{max-width:1100px;margin:0 auto;padding:34px 24px 80px}
.rk-demo .head{display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-bottom:26px}
.rk-demo .ptitle{font-size:30px;letter-spacing:-0.5px;margin:10px 0 4px}
.rk-demo .pmeta{font-size:13px;color:var(--mid)}

.rk-demo .card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
.rk-demo .pad{padding:22px 24px}
.rk-demo .mb{margin-bottom:16px}

/* season + status row */
.rk-demo .strip{display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:center;padding:18px 24px;margin-bottom:16px}
.rk-demo .strip .sicon{font-size:24px}
.rk-demo .strip-left{display:flex;align-items:center;gap:12px}
.rk-demo .strip-t{font-size:14px;font-weight:500}
.rk-demo .strip-s{font-size:12px;color:var(--mid);margin-top:2px}
.rk-demo .vline{width:1px;height:40px;background:var(--border);justify-self:center}
.rk-demo .verdict-wrap{display:flex;align-items:center;justify-content:flex-end;gap:12px}
.rk-demo .vlabel{font-size:12px;color:var(--mid)}
.rk-demo .vpill{border-radius:100px;padding:6px 16px;font-size:13px;font-weight:600}
.rk-demo .vpill.gut{background:var(--al);color:var(--green)}
.rk-demo .vpill.akzeptabel{background:#FFFBEB;color:var(--yellow)}
.rk-demo .vpill.kritisch{background:#FEF2F2;color:var(--red)}

/* area traffic-light cards */
.rk-demo .areas{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:16px}
.rk-demo .acard{padding:22px 18px;display:flex;flex-direction:column;align-items:center;text-align:center}
.rk-demo .alabel{font-size:10px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--mid);margin-bottom:16px;display:flex;align-items:center;gap:7px}
.rk-demo .alabel i{width:8px;height:8px;border-radius:2px}
.rk-demo .alabel i.sq-temp{background:#E8994C}
.rk-demo .alabel i.sq-fri{background:#4BA8E8}
.rk-demo .alabel i.sq-feu{background:#2E9E6E}
.rk-demo .alabel i.sq-sch{background:#D8607A}
.rk-demo .lights{display:flex;flex-direction:column;gap:11px;align-items:center;height:150px;justify-content:center;margin-bottom:14px}
.rk-demo .licht{width:40px;height:40px;border-radius:50%;transition:all .5s}
.rk-demo .off-r{background:#FEE2E2} .rk-demo .off-y{background:#FEF3C7} .rk-demo .off-g{background:#D1FAE5}
.rk-demo .on-g{background:var(--green);box-shadow:0 0 16px rgba(46,158,110,.4);animation:rkdemo-pg 2s infinite}
.rk-demo .on-y{background:var(--yellow);box-shadow:0 0 16px rgba(217,119,6,.4);animation:rkdemo-py 1.5s infinite}
.rk-demo .on-r{background:var(--red);box-shadow:0 0 16px rgba(220,38,38,.5);animation:rkdemo-pr .8s infinite}
@keyframes rkdemo-pg{0%,100%{box-shadow:0 0 10px rgba(46,158,110,.3)}50%{box-shadow:0 0 22px rgba(46,158,110,.6)}}
@keyframes rkdemo-py{0%,100%{box-shadow:0 0 10px rgba(217,119,6,.3)}50%{box-shadow:0 0 22px rgba(217,119,6,.6)}}
@keyframes rkdemo-pr{0%,100%{box-shadow:0 0 14px rgba(220,38,38,.4)}50%{box-shadow:0 0 28px rgba(220,38,38,.7)}}
.rk-demo .astatus{font-size:13px;font-weight:600}
.rk-demo .astatus.gut{color:var(--green)}
.rk-demo .astatus.akzeptabel{color:var(--yellow)}
.rk-demo .astatus.kritisch{color:var(--red)}
.rk-demo .aval{font-size:12px;color:var(--mid);margin-top:3px}
.rk-demo .aempf{font-size:11px;color:var(--dark);margin-top:7px;line-height:1.4}

/* recommendation banner */
.rk-demo .banner{border-radius:var(--radius);padding:18px 24px;margin-bottom:16px;display:flex;align-items:center;gap:16px}
.rk-demo .banner .bi{font-size:30px;flex-shrink:0}
.rk-demo .banner .bk{font-size:10px;font-weight:600;letter-spacing:1px;text-transform:uppercase;margin-bottom:3px}
.rk-demo .banner .bt{font-size:19px;font-weight:700;line-height:1.3}
.rk-demo .ban-red{background:#FEF2F2;border:2px solid var(--red)} .rk-demo .ban-red .bk,.rk-demo .ban-red .bt{color:var(--red)}
.rk-demo .ban-yel{background:#FFFBEB;border:1.5px solid var(--yellow)} .rk-demo .ban-yel .bk,.rk-demo .ban-yel .bt{color:var(--yellow)}

/* begründung */
.rk-demo .blabel{font-size:10px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--mid);margin-bottom:14px}
.rk-demo .brow{padding:10px 12px;font-size:13px;line-height:1.6;border-radius:6px;margin-bottom:4px}
.rk-demo .brow.gut{background:transparent;color:var(--dark)}
.rk-demo .brow.akzeptabel{background:rgba(217,119,6,0.06);color:var(--yellow)}
.rk-demo .brow.kritisch{background:rgba(220,38,38,0.06);color:var(--red)}
.rk-demo .why-toggle{margin-top:14px;background:var(--off);border:1px solid var(--border);border-radius:8px;padding:8px 14px;font-size:13px;font-family:inherit;cursor:pointer;color:var(--black)}
.rk-demo .why{margin-top:14px;border-top:1px dashed var(--border);padding-top:14px;display:none}
.rk-demo .why.show{display:block}
.rk-demo .step{display:flex;gap:12px;padding:6px 0}
.rk-demo .step .n{flex:none;width:22px;height:22px;border-radius:50%;background:var(--off);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--mid);font-family:'DM Serif Display',serif}
.rk-demo .step b{font-weight:600}
.rk-demo .step span{color:var(--mid)}

/* messwerte (einfaches Raster) */
.rk-demo .mw{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
.rk-demo .mw .card{padding:18px;text-align:center}
.rk-demo .mlabel{font-size:10px;color:var(--mid);font-weight:500;text-transform:uppercase;letter-spacing:.5px}
.rk-demo .bignum{font-size:clamp(22px,5vw,32px);letter-spacing:-1px;margin-top:6px}
.rk-demo .munit{font-size:12px;color:var(--mid);margin-top:3px}

/* settings + kamera */
.rk-demo .cols{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px}
.rk-demo .h3{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--mid);font-weight:600;margin:0 0 6px}
.rk-demo .sub{font-size:12px;color:var(--mid);margin-bottom:14px}
.rk-demo .modes{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.rk-demo .mode{height:34px;padding:0 13px;border-radius:8px;font-size:13px;font-weight:500;border:1px solid var(--border);background:transparent;color:var(--dark);cursor:pointer;transition:.2s;font-family:inherit}
.rk-demo .mode:hover{border-color:var(--mid)}
.rk-demo .mode.on{background:var(--black);color:#fff;border-color:var(--black)}
.rk-demo .ctrl{margin-bottom:12px}
.rk-demo .cl{display:flex;justify-content:space-between;font-size:13px;margin-bottom:5px}
.rk-demo .cl b{font-weight:600}
.rk-demo input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:4px;border-radius:3px;background:#E7E7E4;outline:none;margin:10px 0;touch-action:pan-y}
.rk-demo input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:3px;background:#E7E7E4}
.rk-demo input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--accent);cursor:pointer;margin-top:-6px;border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.25)}
.rk-demo input[type=range]::-moz-range-track{height:4px;border-radius:3px;background:#E7E7E4;border:none}
.rk-demo input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--accent);cursor:pointer;border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.25)}
.rk-demo input[type=range]::-moz-range-progress{background:var(--accent);height:4px;border-radius:3px}
.rk-demo input[type=range]:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.rk-demo input[type=range]:focus{outline:none}
.rk-demo input[type=range]::-ms-track{height:4px;background:transparent;border-color:transparent;color:transparent}
.rk-demo input[type=range]::-ms-fill-lower,
.rk-demo input[type=range]::-ms-fill-upper{background:#E7E7E4;border-radius:3px}
.rk-demo input[type=range]::-ms-thumb{width:16px;height:16px;border-radius:50%;background:var(--accent);cursor:pointer;margin-top:0}
.rk-demo .seg{display:flex;gap:6px}
.rk-demo .seg button{flex:1;background:transparent;border:1px solid var(--border);color:var(--dark);border-radius:8px;padding:8px;font-size:13px;font-family:inherit;cursor:pointer}
.rk-demo .seg button.on{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.rk-demo .hint{font-size:12px;color:var(--mid);margin-top:6px;line-height:1.45}
.rk-demo .hint.tight{margin:0 0 12px}
.rk-demo .glabel{font-size:13px;margin:16px 0 4px;font-weight:600}

/* live-kamera */
.rk-demo .cam{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px;display:block;background:var(--off);border:1px solid var(--border)}
.rk-demo .cam.hide{display:none}

.rk-demo .info{background:var(--al);border:1px solid rgba(26,107,74,0.15);border-radius:12px;padding:16px 20px;display:flex;align-items:center;gap:12px;font-size:13px;color:var(--accent);line-height:1.6}
.rk-demo .info-emoji{font-size:20px}

@media(max-width:820px){
  .rk-demo .areas{grid-template-columns:repeat(2,1fr)}
  .rk-demo .cols{grid-template-columns:1fr}
  .rk-demo .strip{grid-template-columns:1fr;text-align:left}
  .rk-demo .vline{display:none}
  .rk-demo .verdict-wrap{justify-content:flex-start}
}
@media(max-width:560px){
  .rk-demo .mw{grid-template-columns:repeat(2,1fr)}
  .rk-demo .licht{width:34px;height:34px}
  .rk-demo .lights{height:130px}
}
@media(max-width:400px){
  .rk-demo .page{padding:20px 14px 60px}
  .rk-demo .acard{padding:14px 8px}
  .rk-demo .alabel{font-size:9px;margin-bottom:10px}
  .rk-demo .lights{height:110px;gap:8px}
  .rk-demo .licht{width:28px;height:28px}
  .rk-demo .astatus{font-size:12px}
  .rk-demo .aempf{font-size:10px}
  .rk-demo .ptitle{font-size:24px}
  .rk-demo .bignum{font-size:clamp(18px,5vw,24px)}
  .rk-demo .pad{padding:16px}
}
.rk-demo :focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ═══════════════════════════════════════════════════════════════════════
   STARTSEITE / LANDING PAGE  ·  [rk_home]   (aus der wp:html-Startseite)
   Gekapselt unter .rk-home (vorher #rk-app). Eigene grüne Farbwelt,
   bewusst mit !important gegen Theme-Styles abgesichert (Bestandsverhalten).
   ═══════════════════════════════════════════════════════════════════════ */
/* ── RESET NUR FÜR UNSEREN CONTAINER ── */
.rk-home { all: initial; display: block; overflow-x: hidden; }
.rk-home *, .rk-home *::before, .rk-home *::after {
  box-sizing: border-box !important;
  -webkit-font-smoothing: antialiased !important;
}

/* ── VARIABLEN ── */
.rk-home {
  --white: #ffffff;
  --off: #F7F7F5;
  --border: rgba(0,0,0,0.07);
  --mid: #ACACAA;
  --dark: #3A3A38;
  --black: #111110;
  --accent: #1A6B4A;
  --al: #E8F4EE;
  --green: #2E9E6E;
  --red: #DC2626;
  --yellow: #D97706;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 1px 3px rgba(0,0,0,0.06);
  font-family: 'DM Sans', sans-serif !important;
  background: var(--off) !important;
  color: var(--black) !important;
  min-height: 100vh !important; min-height: 100dvh !important;
}

/* ── TYPOGRAFIE ── */
.rk-home h1, .rk-home h2, .rk-home h3,
.rk-home .rk-logo, .rk-home .rk-ftitle, .rk-home .rk-page-title {
  font-family: 'DM Serif Display', serif !important;
  font-weight: 400 !important;
}
.rk-home * { font-family: 'DM Sans', sans-serif !important; }
.rk-home h1, .rk-home h2, .rk-home h3,
.rk-home .rk-logo, .rk-home .rk-ftitle, .rk-home .rk-page-title {
  font-family: 'DM Serif Display', serif !important;
}

/* ── NAV ── */
.rk-home .rk-nav {
  background: var(--white) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 0 24px !important;
  height: 60px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 9999 !important;
  box-shadow: var(--shadow) !important;
}
.rk-home .rk-logo {
  font-size: 18px !important;
  color: var(--black) !important;
  text-decoration: none !important;
  letter-spacing: -0.3px !important;
  display: flex !important;
  align-items: center !important;
}
.rk-home .rk-logo span { color: var(--accent) !important; }
.rk-home .rk-nav-right {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.rk-home .rk-nav-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* ── HAMBURGER – SAUBER ── */
.rk-home .rk-burger {
  width: 40px !important;
  height: 40px !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  gap: 0 !important;
}
.rk-home .rk-burger-line {
  display: block !important;
  width: 22px !important;
  height: 2px !important;
  background: var(--black) !important;
  border-radius: 2px !important;
  margin: 3px 0 !important;
  padding: 0 !important;
  transition: transform 0.25s ease, opacity 0.25s ease !important;
  transform-origin: center center !important;
  position: relative !important;
}
.rk-home .rk-burger.open .rk-burger-line:nth-child(1) {
  transform: translateY(8px) rotate(45deg) !important;
}
.rk-home .rk-burger.open .rk-burger-line:nth-child(2) {
  opacity: 0 !important;
  transform: scaleX(0) !important;
}
.rk-home .rk-burger.open .rk-burger-line:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg) !important;
}

/* ── MENÜ ── */
.rk-home .rk-overlay {
  position: fixed !important; inset: 0 !important;
  z-index: 9998 !important; display: none !important;
}
.rk-home .rk-overlay.open { display: block !important; }
.rk-home .rk-menu {
  position: fixed !important; top: 60px !important;
  left: 0 !important; right: 0 !important;
  background: var(--white) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 12px 16px 20px !important;
  z-index: 9999 !important; display: none !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08) !important;
}
.rk-home .rk-menu.open { display: block !important; }
.rk-home .rk-menu-section {
  display: block !important;
  font-size: 10px !important; font-weight: 600 !important;
  letter-spacing: 1.2px !important; color: var(--mid) !important;
  text-transform: uppercase !important;
  padding: 14px 10px 6px !important;
}
.rk-home .rk-menu-link {
  display: flex !important; align-items: center !important;
  gap: 12px !important; padding: 11px 10px !important;
  border-radius: var(--radius-sm) !important;
  text-decoration: none !important; color: var(--black) !important;
  font-size: 15px !important; font-weight: 400 !important;
  transition: background 0.15s !important;
  margin-bottom: 2px !important;
  border: none !important; background: transparent !important;
  width: 100% !important; cursor: pointer !important;
}
.rk-home .rk-menu-link:hover { background: var(--off) !important; }
.rk-home .rk-menu-link.active {
  background: var(--al) !important;
  color: var(--accent) !important;
  font-weight: 500 !important;
}
.rk-home .rk-menu-link.danger { color: var(--red) !important; }
.rk-home .rk-menu-link.danger:hover { background: #FEE2E2 !important; }
.rk-home .rk-menu-icon {
  font-size: 18px !important; width: 22px !important;
  text-align: center !important; flex-shrink: 0 !important;
}
.rk-home .rk-divider {
  height: 1px !important; background: var(--border) !important;
  margin: 8px 0 !important;
}

/* ── AVATAR ── */
.rk-home .rk-avatar {
  width: 34px !important; height: 34px !important;
  background: var(--black) !important; border-radius: 50% !important;
  display: flex !important; align-items: center !important;
  justify-content: center !important; color: #fff !important;
  font-size: 14px !important; font-weight: 500 !important;
  text-decoration: none !important; flex-shrink: 0 !important;
}

/* ── LAYOUT ── */
.rk-home .rk-page {
  max-width: 1100px !important; margin: 0 auto !important;
  padding: 36px 24px !important;
}

/* ── CARDS ── */
.rk-home .rk-card {
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  margin-bottom: 16px !important;
  overflow: hidden !important;
  box-shadow: var(--shadow) !important;
}

/* ── BADGE & MISC ── */
.rk-home .rk-badge {
  display: inline-flex !important; align-items: center !important;
  gap: 6px !important; background: var(--al) !important;
  border: 1px solid rgba(26,107,74,0.2) !important;
  border-radius: 100px !important; padding: 5px 14px !important;
  font-size: 12px !important; color: var(--accent) !important;
  font-weight: 500 !important; margin-bottom: 14px !important;
}

/* ── STEP ── */
.rk-home .rk-step {
  display: flex !important; gap: 14px !important;
  align-items: flex-start !important; margin-bottom: 18px !important;
}
.rk-home .rk-step-num {
  width: 28px !important; height: 28px !important;
  border-radius: 50% !important; background: var(--black) !important;
  color: #fff !important; display: flex !important;
  align-items: center !important; justify-content: center !important;
  font-size: 12px !important; font-weight: 500 !important;
  flex-shrink: 0 !important;
}
.rk-home .rk-step-text {
  font-size: 14px !important; color: var(--dark) !important;
  line-height: 1.6 !important; padding-top: 4px !important;
}
.rk-home .rk-step-title {
  font-size: 15px !important; font-weight: 500 !important;
  margin-bottom: 4px !important; color: var(--black) !important;
}

/* ── TERMINAL ── */
.rk-home .rk-term {
  background: #1A1A18 !important; border-radius: var(--radius-sm) !important;
  padding: 16px !important; margin: 12px 0 !important;
  line-height: 1.8 !important;
}
.rk-home .rk-term-bar {
  display: flex !important; gap: 6px !important; margin-bottom: 12px !important;
}
.rk-home .rk-td {
  width: 10px !important; height: 10px !important; border-radius: 50% !important;
}
.rk-home .t-r { background: #FF5F57 !important; }
.rk-home .t-y { background: #FFBD2E !important; }
.rk-home .t-g { background: #28C840 !important; }
.rk-home .t-dim { color: #555 !important; font-size: 12px !important; font-family: monospace !important; }
.rk-home .t-w { color: #E8E8E6 !important; font-size: 12px !important; font-family: monospace !important; }
.rk-home .t-a { color: #5DCAA5 !important; font-size: 12px !important; font-family: monospace !important; }
.rk-home .t-code { color: #fff !important; font-weight: 600 !important; }

/* ── RESPONSIVE ── */
@media(max-width: 640px) {
  .rk-home .rk-page { padding: 24px 16px !important; }
  .rk-home .rk-nav { padding: 0 16px !important; }
}

/* ── STARTSEITE EXTRA ── */
.rk-home .rk-hero { min-height: calc(100vh - 60px); min-height: calc(100dvh - 60px); max-width: 1180px; margin: 0 auto; display: flex; align-items: center; justify-content: center; gap: 56px; padding: 80px 48px; position: relative; overflow: hidden; }
.rk-home .rk-hero-bg { position: absolute; inset: 0; z-index: 0; background: radial-gradient(ellipse 70% 60% at 70% 50%, var(--al) 0%, transparent 70%); }
.rk-home .rk-hero-content { position: relative; z-index: 1; max-width: 560px; flex-shrink: 0; }
.rk-home .rk-hero-badge { display: inline-flex; align-items: center; gap: 8px; background: var(--al); border: 1px solid rgba(26,107,74,0.2); border-radius: 100px; padding: 6px 16px; font-size: 13px; color: var(--accent); font-weight: 500; margin-bottom: 28px; }
.rk-home .rk-badge-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); animation: rk-pulse 2s ease-in-out infinite; }
@keyframes rk-pulse { 0%,100%{opacity:1;transform:scale(1);}50%{opacity:0.5;transform:scale(1.3);} }
.rk-home .rk-hero h1 { font-family: 'DM Serif Display', serif !important; font-size: clamp(32px,9vw,64px); line-height: 1.1; letter-spacing: -1.5px; color: var(--black); margin-bottom: 24px; font-weight: 400 !important; word-break: break-word; }
.rk-home .rk-hero h1 em { font-style: italic; color: var(--accent); }
.rk-home .rk-hero p { font-size: 17px; color: var(--dark); line-height: 1.7; margin-bottom: 40px; font-weight: 300; max-width: 480px; }
.rk-home .rk-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.rk-home .rk-btn-hero-primary { background: var(--black); color: #fff; padding: 0 28px; height: 50px; line-height: 50px; border-radius: 10px; font-size: 15px; font-weight: 500; text-decoration: none; display: inline-block; transition: opacity 0.2s; }
.rk-home .rk-btn-hero-primary:hover { opacity: 0.82; }
.rk-home .rk-btn-hero-primary.accent { background: var(--accent); }
.rk-home .rk-btn-hero-secondary { background: transparent; color: var(--dark); padding: 0 28px; height: 50px; line-height: 50px; border-radius: 10px; font-size: 15px; font-weight: 400; text-decoration: none; display: inline-block; border: 1px solid var(--border); transition: background 0.2s; }
.rk-home .rk-btn-hero-secondary:hover { background: var(--off); }
.rk-home .rk-hero-visual { position: relative; z-index: 1; flex-shrink: 0; display: flex; flex-direction: column; gap: 12px; }
.rk-home .rk-sensor-card { background: var(--white); border: 1px solid var(--border); border-radius: 16px; padding: 20px 24px; min-width: 210px; box-shadow: 0 4px 16px rgba(0,0,0,0.06); animation: rk-float 4s ease-in-out infinite; }
.rk-home .rk-sensor-card:nth-child(2) { animation-delay: 0.8s; margin-left: 28px; }
.rk-home .rk-sensor-card:nth-child(3) { animation-delay: 1.6s; }
@keyframes rk-float { 0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);} }
.rk-home .rk-s-label { font-size: 11px; color: var(--mid); font-weight: 500; letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 6px; }
.rk-home .rk-s-value { font-family: 'DM Serif Display', serif !important; font-size: 32px; color: var(--black); letter-spacing: -1px; line-height: 1; }
.rk-home .rk-s-unit { font-size: 14px; color: var(--mid); font-weight: 400; font-family: 'DM Sans', sans-serif !important; }
.rk-home .rk-s-status { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.rk-home .rk-s-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.rk-home .rk-s-text { font-size: 12px; color: var(--mid); }
.rk-home .rk-stats-bar { background: var(--off); padding: 40px 48px; display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.rk-home .rk-stat-bar-item { padding: 12px 24px; border-right: 1px solid var(--border); }
.rk-home .rk-stat-bar-item:last-child { border-right: none; }
.rk-home .rk-stat-bar-num { font-family: 'DM Serif Display', serif !important; font-size: 38px; color: var(--black); letter-spacing: -1px; line-height: 1; margin-bottom: 6px; }
.rk-home .rk-stat-bar-num span { color: var(--accent); }
.rk-home .rk-stat-bar-desc { font-size: 12px; color: var(--mid); line-height: 1.5; }
.rk-home .rk-section { padding: 80px 48px; max-width: 1200px; margin: 0 auto; }
.rk-home .rk-section-label { font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; }
.rk-home .rk-section-title { font-family: 'DM Serif Display', serif !important; font-size: clamp(26px,3.5vw,42px); letter-spacing: -1px; line-height: 1.15; color: var(--black); margin-bottom: 48px; max-width: 480px; font-weight: 400 !important; }
.rk-home .rk-feat-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; }
.rk-home .rk-feat-item { background: var(--white); padding: 36px; transition: background 0.2s; }
.rk-home .rk-feat-item:hover { background: var(--off); }
.rk-home .rk-feat-icon { width: 44px; height: 44px; background: var(--al); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; font-size: 20px; }
.rk-home .rk-feat-title { font-size: 15px; font-weight: 500; margin-bottom: 8px; color: var(--black); }
.rk-home .rk-feat-desc { font-size: 13px; color: var(--mid); line-height: 1.7; }
.rk-home .rk-how-section { background: var(--off); padding: 80px 48px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.rk-home .rk-how-inner { max-width: 1200px; margin: 0 auto; }
.rk-home .rk-how-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.rk-home .rk-term-card { background: var(--white); border: 1px solid var(--border); border-radius: 16px; padding: 24px; box-shadow: 0 4px 16px rgba(0,0,0,0.06); }
.rk-home .rk-tech-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-top: 40px; }
.rk-home .rk-tech-item { background: var(--off); border: 1px solid var(--border); border-radius: 12px; padding: 20px; text-align: center; }
.rk-home .rk-tech-icon { font-size: 26px; margin-bottom: 10px; }
.rk-home .rk-tech-name { font-size: 13px; font-weight: 500; color: var(--black); margin-bottom: 3px; }
.rk-home .rk-tech-role { font-size: 11px; color: var(--mid); }
.rk-home .rk-cta { background: var(--black); padding: 80px 48px; text-align: center; }
.rk-home .rk-cta h2 { font-family: 'DM Serif Display', serif !important; font-size: clamp(26px,4vw,46px); color: #fff; letter-spacing: -1px; margin-bottom: 12px; font-weight: 400 !important; }
.rk-home .rk-cta h2 em { color: #5DCAA5; font-style: italic; }
.rk-home .rk-cta p { color: rgba(255,255,255,0.45); font-size: 15px; margin-bottom: 36px; }
.rk-home .rk-btn-white { background: #fff; color: var(--black); padding: 0 32px; height: 50px; line-height: 50px; border-radius: 10px; font-size: 15px; font-weight: 500; text-decoration: none; display: inline-block; transition: opacity 0.2s; }
.rk-home .rk-btn-white:hover { opacity: 0.88; }
.rk-home .rk-footer { background: var(--off); border-top: 1px solid var(--border); padding: 28px 48px; display: flex; justify-content: space-between; align-items: center; }
.rk-home .rk-footer-logo { font-family: 'DM Serif Display', serif !important; font-size: 16px; color: var(--black); text-decoration: none; font-weight: 400 !important; }
.rk-home .rk-footer-logo span { color: var(--accent); }
.rk-home .rk-footer p { font-size: 13px; color: var(--mid); }
@media(max-width:1024px){ .rk-home .rk-hero-visual{display:none;} .rk-home .rk-stats-bar{grid-template-columns:repeat(2,1fr);} .rk-home .rk-how-grid{grid-template-columns:1fr;} .rk-home .rk-tech-grid{grid-template-columns:repeat(2,1fr);} }
@media(max-width:768px){ .rk-home .rk-hero{padding:60px 24px;} .rk-home .rk-section{padding:48px 24px;} .rk-home .rk-how-section{padding:48px 24px;} .rk-home .rk-feat-grid{grid-template-columns:1fr;} .rk-home .rk-stats-bar{padding:28px 24px;} .rk-home .rk-cta{padding:48px 24px;} .rk-home .rk-footer{padding:24px;flex-direction:column;gap:8px;text-align:center;} }
@media(max-width:480px){
  .rk-home .rk-hero{padding:48px 18px;}
  .rk-home .rk-hero-content{max-width:100%;}
  .rk-home .rk-hero-badge{font-size:11px;padding:5px 12px;white-space:normal;text-align:center;}
  .rk-home .rk-hero h1{font-size:clamp(28px,10vw,40px);letter-spacing:-0.5px;}
  .rk-home .rk-hero p{font-size:15px;max-width:100%;}
  .rk-home .rk-hero-actions{flex-direction:column;align-items:stretch;gap:10px;}
  .rk-home .rk-btn-hero-primary,
  .rk-home .rk-btn-hero-secondary{width:100%;text-align:center;padding:0 16px;}
  .rk-home .rk-cta h2{word-break:break-word;}
}

/* ═══════════════════════════════════════════════════════════════════════
   WORDPRESS-MENÜ IM RAUMKLIMA-STIL  ·  [rk_menu]
   Rendert eine WordPress-Menüposition („Raumklima Menü") als Balken + Burger
   + Dropdown. Eigener, schlanker Namespace .rk-menu-bar (ohne Seiten-Reset).
   ═══════════════════════════════════════════════════════════════════════ */
.rk-menu-bar{
  --white:#fff; --off:#F7F7F5; --border:rgba(0,0,0,0.07); --mid:#ACACAA;
  --dark:#3A3A38; --black:#111110; --accent:#1A6B4A; --al:#E8F4EE;
  --red:#DC2626; --radius-sm:8px; --shadow:0 1px 3px rgba(0,0,0,0.06);
  font-family:'DM Sans',sans-serif;
}
.rk-menu-bar .rk-mb-nav{
  background:var(--white); border-bottom:1px solid var(--border);
  padding:0 24px; height:60px; display:flex; align-items:center;
  justify-content:space-between; position:sticky; top:0; z-index:9999;
  box-shadow:var(--shadow);
}
.rk-menu-bar .rk-mb-logo{
  font-family:'DM Serif Display',serif; font-size:18px; color:var(--black);
  text-decoration:none; letter-spacing:-0.3px; display:flex; align-items:center;
}
.rk-menu-bar .rk-mb-logo span{ color:var(--accent); }
.rk-menu-bar .rk-mb-actions{ display:flex; align-items:center; gap:8px; }
.rk-menu-bar .rk-mb-avatar{
  width:34px; height:34px; background:var(--black); border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:#fff;
  font-size:14px; font-weight:500; text-decoration:none; flex-shrink:0;
  cursor:pointer; border:none; padding:0; font-family:inherit;
}

/* ── Konto-Dropdown (Angemeldet als … / Profil / Abmelden) ── */
.rk-menu-bar .rk-mb-account{ position:relative; }
.rk-menu-bar .rk-mb-account-menu{
  position:absolute; top:calc(100% + 10px); right:0;
  min-width:210px; background:var(--white);
  border:1px solid var(--border); border-radius:12px;
  box-shadow:0 8px 28px rgba(0,0,0,0.12);
  padding:6px; display:none; z-index:60;
}
.rk-menu-bar .rk-mb-account-menu.open{ display:block; }
.rk-menu-bar .rk-mb-account-head{
  padding:10px 12px 9px; display:flex; flex-direction:column; gap:2px;
  border-bottom:1px solid var(--border); margin-bottom:6px;
}
.rk-menu-bar .rk-mb-account-hi{
  font-size:10px; color:var(--mid); text-transform:uppercase; letter-spacing:.05em;
}
.rk-menu-bar .rk-mb-account-name{
  font-size:14px; font-weight:600; color:var(--black); word-break:break-word;
}
.rk-menu-bar .rk-mb-account-link{
  display:flex; align-items:center; gap:10px;
  padding:9px 12px; border-radius:var(--radius-sm);
  text-decoration:none; color:var(--black); font-size:14px;
}
.rk-menu-bar .rk-mb-account-link:hover{ background:var(--off); }
.rk-menu-bar .rk-mb-account-link.danger{ color:var(--red); }
.rk-menu-bar .rk-mb-account-link.danger:hover{ background:#FEE2E2; }
.rk-menu-bar .rk-mb-account-ic{ font-size:15px; width:18px; text-align:center; }

/* ── Anmelden-Button für ausgeloggte Besucher ── */
.rk-menu-bar .rk-mb-login{
  font-size:14px; font-weight:500; text-decoration:none; color:var(--accent);
  padding:7px 14px; border:1px solid var(--accent); border-radius:var(--radius-sm);
  white-space:nowrap;
}
.rk-menu-bar .rk-mb-login:hover{ background:var(--al); }

/* Burger */
.rk-menu-bar .rk-mb-burger{
  width:40px; height:40px; background:transparent; border:none; outline:none;
  cursor:pointer; display:flex; flex-direction:column; align-items:center;
  justify-content:center; padding:0; -webkit-appearance:none; appearance:none;
}
.rk-menu-bar .rk-mb-line{
  display:block; width:22px; height:2px; background:var(--black);
  border-radius:2px; margin:3px 0;
  transition:transform .25s ease, opacity .25s ease; transform-origin:center;
}
.rk-menu-bar .rk-mb-burger.open .rk-mb-line:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.rk-menu-bar .rk-mb-burger.open .rk-mb-line:nth-child(2){ opacity:0; transform:scaleX(0); }
.rk-menu-bar .rk-mb-burger.open .rk-mb-line:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

/* Overlay + Dropdown */
.rk-menu-bar .rk-mb-overlay{ position:fixed; inset:0; z-index:9998; display:none; }
.rk-menu-bar .rk-mb-overlay.open{ display:block; }
.rk-menu-bar .rk-mb-menu{
  position:fixed; top:60px; left:0; right:0; background:var(--white);
  border-bottom:1px solid var(--border); padding:12px 16px 20px;
  z-index:9999; display:none; box-shadow:0 8px 24px rgba(0,0,0,0.08);
}
.rk-menu-bar .rk-mb-menu.open{ display:block; }

/* Menüeinträge (vom Walker erzeugt) */
.rk-menu-bar .rk-menu-section{
  display:block; font-size:10px; font-weight:600; letter-spacing:1.2px;
  color:var(--mid); text-transform:uppercase; padding:14px 10px 6px;
}
.rk-menu-bar .rk-menu-link{
  display:flex; align-items:center; gap:12px; padding:11px 10px;
  border-radius:var(--radius-sm); text-decoration:none; color:var(--black);
  font-size:15px; font-weight:400; transition:background .15s; margin-bottom:2px;
}
.rk-menu-bar .rk-menu-link:hover{ background:var(--off); }
.rk-menu-bar .rk-menu-link.active{ background:var(--al); color:var(--accent); font-weight:500; }
.rk-menu-bar .rk-menu-link.danger{ color:var(--red); }
.rk-menu-bar .rk-menu-link.danger:hover{ background:#FEE2E2; }
.rk-menu-bar .rk-menu-icon{ font-size:18px; width:22px; text-align:center; flex-shrink:0; }
.rk-menu-bar .rk-divider{ height:1px; background:var(--border); margin:8px 0; }

@media(max-width:640px){ .rk-menu-bar .rk-mb-nav{ padding:0 16px; } }
@media(max-width:400px){
  .rk-menu-bar .rk-mb-logo{ font-size:16px; }
  .rk-menu-bar .rk-mb-menu{ padding:10px 12px 16px; }
}

/* Touch-Komfort: größere Tippfläche bei Burger/Avatar, sauberes Tap-Feedback auf Mobile */
.rk-menu-bar .rk-mb-burger,
.rk-menu-bar .rk-mb-avatar,
.rk-menu-bar .rk-mb-login,
.rk-live .mode,
.rk-live .seg button,
.rk-demo .mode,
.rk-demo .seg button,
.rk-dev-link-btn,
.rk-dev-unlink,
.rk-btn-primary-sm,
.rk-btn-danger,
.rk-nav-btn {
  -webkit-tap-highlight-color: transparent;
}
.rk-menu-bar .rk-mb-burger { min-width: 44px; min-height: 44px; }
.rk-menu-bar .rk-mb-avatar { min-width: 38px; min-height: 38px; }

/* ── DESKTOP (≥ 992px): Menü horizontal im Header, kein Burger/Dropdown ── */
@media (min-width: 992px) {
  .rk-menu-bar .rk-mb-burger,
  .rk-menu-bar .rk-mb-overlay { display: none !important; }

  /* Dropdown → horizontale Leiste, rechtsbündig neben dem Avatar */
  .rk-menu-bar .rk-mb-menu {
    position: static; display: flex !important;
    align-items: center; gap: 2px;
    margin-left: auto; padding: 0;
    background: transparent; border: none; box-shadow: none;
  }
  /* Rubriken/Trenner gibt es nur im Mobil-Dropdown */
  .rk-menu-bar .rk-menu-section,
  .rk-menu-bar .rk-divider { display: none; }

  .rk-menu-bar .rk-menu-link {
    margin-bottom: 0;
    padding: 8px 13px;
    font-size: 14px;
    white-space: nowrap;
  }
  .rk-menu-bar .rk-mb-actions { margin-left: 14px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE-NACHBESSERUNGEN (v3.1)
   ═══════════════════════════════════════════════════════════════════════ */
/* Admin-Nutzertabelle (4 Spalten) auf schmalen Handys horizontal scrollen,
   statt das Layout zu sprengen. */
/* Admin-Nutzertabelle: horizontales Scrollen ab 560px ist über
   .rk-table-scroll (Helper-Klassen-Sektion) bereits abgedeckt. */

/* Geräte-Seite: Eingabezeile und Gerätekarte auf kleinen Schirmen stapeln. */
@media (max-width: 480px) {
  .rk-dev-input-row { flex-direction: column; }
  .rk-dev-link-btn  { width: 100%; }
  .rk-dev-item      { flex-direction: column; align-items: flex-start; }
  .rk-dev-unlink    { width: 100%; }
}

/* ── Demo-Sandbox: Schieberegler in den Messwert-Karten ─────────────────── */
.rk-demo-sandbox .mcard-slider { padding-bottom: 20px; }
.rk-demo-sandbox .msl {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  width: 86%; max-width: 320px; height: 4px; margin: 12px auto 0;
  display: block; border-radius: 3px; background: #E7E7E4; outline: none; cursor: pointer;
  touch-action: pan-y;
}
.rk-demo-sandbox .msl::-webkit-slider-runnable-track {
  height: 4px; border-radius: 3px; background: #E7E7E4;
}
.rk-demo-sandbox .msl::-webkit-slider-thumb {
  -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%;
  background: #1A6B4A; cursor: pointer; border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.25); margin-top: -7px;
}
.rk-demo-sandbox .msl::-moz-range-track {
  height: 4px; border-radius: 3px; background: #E7E7E4; border: none;
}
.rk-demo-sandbox .msl::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: #1A6B4A; cursor: pointer; border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}
.rk-demo-sandbox .msl::-moz-range-progress { background: #1A6B4A; height: 4px; border-radius: 3px; }
.rk-demo-sandbox .msl::-ms-track { height: 4px; background: transparent; border-color: transparent; color: transparent; }
.rk-demo-sandbox .msl::-ms-fill-lower,
.rk-demo-sandbox .msl::-ms-fill-upper { background: #E7E7E4; border-radius: 3px; }
.rk-demo-sandbox .msl::-ms-thumb { width: 18px; height: 18px; border-radius: 50%; background: #1A6B4A; cursor: pointer; }
.rk-demo-sandbox .msl:focus-visible { outline: 2px solid #1A6B4A; outline-offset: 3px; }
.rk-demo-sandbox .msl:focus { outline: none; }
.rk-demo-sandbox #reloadLive { margin-top: 14px; }
.rk-demo-sandbox .mcalc { font-size: 11px; color: #1A6B4A; font-weight: 500; margin-top: 6px; line-height: 1.3; }
@media (max-width: 400px) {
  .rk-demo-sandbox .msl { width: 92%; }
  .rk-demo-sandbox .mcard-slider { padding-bottom: 16px; }
}