@charset "UTF-8";

/* =========================================================
   DG-Home Dark Modern (ohne Neon, ohne Pastell, ohne Schmerzen)
   ========================================================= */

:root{
  --bg:        #141a23;   /* etwas dunkler, weniger Milch */
  --surface:   #1b2231;
  --surface2:  #212a3d;
  --border:    #4a5878;   /* klarere Trennung */

  --text:      #f6f9ff;
  --muted:     #cdd6ea;

  --accent:    #4e8cff;   /* wieder mehr blau */
  --accent2:   #3b74e6;

  --ok:        #4fd8a5;
  --warn:      #f6c85e;
  --bad:       #f17878;

  --tableHead: #212a3d;
  --rowHover:  rgba(78,140,255,.10); /* dezenter, aber klarer */

  --radius:    10px;
  --shadow:    0 8px 26px rgba(0,0,0,.32);

  --headerH:   56px;
  --navH:      44px;
  --footerH:   44px;
}


/* ---------- Base ---------- */
html, body{
  height:100%;
  margin:0;
  padding:0;
}

*{ box-sizing:border-box; }

body{
  background:
    radial-gradient(1100px 650px at 20% 0%, rgba(78,140,255,.10), transparent 60%),
    radial-gradient(900px 600px at 90% 20%, rgba(79,216,165,.06), transparent 62%),
    var(--bg);
  color:var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Mobile Wrapper */
.mobile{
  padding:10px;
  margin:10px;
  width:auto;
}

/* ---------- Header / Nav / Footer ---------- */
header{
  width:100%;
  height: var(--headerH);
  background: linear-gradient(180deg, rgba(78,140,255,.42), rgba(59,116,230,.22));
  border-bottom: 1px solid rgba(78,140,255,.40);
  box-shadow: var(--shadow);
}

nav{
  padding:0;
  width:100%;
  height: var(--navH);
  background: rgba(24,34,50,.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(78,140,255,.22);
}

nav .nav-bar {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 0.25rem;
    padding: 0.25rem;
}

nav .nav-btn {
    border: none;
    padding: 0.5rem 1rem;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(78,140,255,.15);
    color: #fff;
    cursor: pointer;
    border-radius: 4px;
    font-size: 0.95rem;
}

nav .nav-btn:hover {
    background: rgba(78,140,255,.20);   /* statt #4c566a */
}


footer{
  position: relative;   /* <-- DAS fehlt */
  width:100%;
  height: var(--footerH);
  background: rgba(24,34,50,.92);
  backdrop-filter: blur(8px);
  border-top: 1px solid rgba(78,140,255,.22);
}

.footer-form {
    display: flex;
    justify-content: center;   /* <-- Das ist der Punkt */
    align-items: center;
    flex-wrap: wrap;           /* falls es viele werden */
}

.footer-ip{
  position:absolute;
  left:12px;
  top:15px;
  transform:translateY(-50%);
  font-size:9px;
  opacity:.85;
  white-space: pre-line;;
  pointer-events:none;                /* klickt nix kaputt */
}

.footer-copy{
  position:absolute;
  right:12px;
  top:15px;
  transform:translateY(-50%);
  font-size:12px;
  opacity:.85;
  white-space:nowrap;
  pointer-events:none;
}


/* ---------- Main iFrame ---------- */
iframe.main{
  width:100%;
  height: calc(100% - var(--headerH) - var(--navH) - var(--footerH));
  border:0;
  background: transparent;
}

/* Receiver iFrame */
iframe.receiver{
  margin-top:8px;
  float:right;
  width:600px;
  height:28px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(24,34,50,.75);
}

/* ---------- Typography ---------- */
h1{
  padding:12px 14px;
  margin:0;
  font-size:20px;
  font-weight:800;
  letter-spacing:.2px;
}

/* Warn/Info (deine vorhandene Logik beibehalten) */
.warnung h2, .info h2{
  white-space: pre-line;
}

/* ---------- Tables ---------- */
table{
  table-layout: fixed;
  width:100%;
  border-collapse: separate;
  border-spacing:0;
  overflow:hidden;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: rgba(24,34,50,.72);
  box-shadow: var(--shadow);
}

th, td{
  padding:10px 10px;
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
  vertical-align: middle;
}

th:last-child, td:last-child{ border-right:none; }
tr:last-child td{ border-bottom:none; }

th{
  background: linear-gradient(180deg, rgba(33,42,61,.98), rgba(33,42,61,.78));
  color: var(--muted);
  font-weight: 700;
  text-transform: none;
}

tr:hover td{
  background: var(--rowHover);
}

/* ---------- Buttons ---------- */
button{
  -webkit-appearance:none;
  appearance:none;
  cursor:pointer;
  font-size:14px;
  color: var(--text);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 9px;
  padding:10px 12px;
  transition: transform .05s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}

/* Vollflächige Nav-Buttons */
button.nav{
  height:100%;
  width:100%;
  border-radius: 0; /* damit die Nav-Leiste sauber bleibt */
  border: none;
  padding:0 12px;
}

/* Footer Buttons */
button.footer{
  height:100%;
  width:120px;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  border-radius: 0;
}

/* Hover/Focus */
button:hover, button:focus-visible{
  background: rgba(78,140,255,.18);
  border-color: rgba(78,140,255,.50);
  box-shadow: 0 0 0 3px rgba(78,140,255,.18);
  outline:none;
}

/* Active */
button:active{
  transform: translateY(1px);
  background: rgba(78,140,255,.26);
}

/* Selected State (deutlich, passend, nicht neon) */
button.selected{
  background: rgba(78,140,255,.38);
  border-color: rgba(78,140,255,.85);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.12),
    0 0 0 2px rgba(78,140,255,.22);
}

.Red{
  background: rgba(243,138,138,.18);
  border: 1px solid rgba(243,138,138,.35);
}

/* ---------- Utility / Optional ---------- */
/* Links, falls du welche hast */
a{
  color: #dbe6ff;
  text-decoration: none;
}
a:hover{
  text-decoration: underline;
}

/* Scrollbar (WebKit) */
::-webkit-scrollbar{ width: 10px; height: 10px; }
::-webkit-scrollbar-track{ background: rgba(205,214,234,.18); }
::-webkit-scrollbar-thumb{
  background: rgba(205,214,234,.22);
  border-radius: 999px;
  border: 2px solid rgba(20,26,35,.65);
}
::-webkit-scrollbar-thumb:hover{ background: rgba(205,214,234,.34); }