/* ============================================================
   isensee solutions - Portal
   Alle Farben und Groessen stehen hier oben. Zum Angleichen an
   den WebPix-Look reicht es, die Variablen in :root zu aendern.
   ============================================================ */

:root{
  /* Farben */
  --ink:        #15181d;   /* Text */
  --ink-2:      #3d444e;   /* Text sekundaer */
  --muted:      #767f8c;   /* Text leise */
  --line:       #e4e7ec;   /* Rahmen */
  --line-soft:  #eef0f4;
  --bg:         #f6f7f9;   /* Seitenhintergrund */
  --paper:      #ffffff;   /* Karten */
  --accent:     #2f6f8f;   /* Akzent */
  --accent-ink: #1f5570;
  --accent-soft:#e8f1f5;
  --ok:         #1f7a4d;
  --ok-soft:    #e6f4ec;
  --warn:       #8a5300;
  --warn-soft:  #fff4e5;
  --bad:        #b3261e;
  --bad-soft:   #fdecea;

  /* Form */
  --radius:     14px;
  --radius-sm:  9px;
  --shadow:     0 1px 2px rgba(20,24,31,.04), 0 8px 24px rgba(20,24,31,.05);
  --shadow-lift:0 2px 6px rgba(20,24,31,.06), 0 18px 40px rgba(20,24,31,.10);
  --wrap:       1180px;

  /* Schrift */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Inter selbst hosten (DSGVO). Dateien nach assets/fonts/ legen,
   sonst greift automatisch die System-Schrift. */
@font-face{
  font-family:"Inter"; font-style:normal; font-weight:400 700;
  font-display:swap; src:url("../fonts/Inter-Variable.woff2") format("woff2");
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font); font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent); text-decoration:none}
a:hover{color:var(--accent-ink)}
h1,h2,h3{margin:0; font-weight:650; letter-spacing:-.02em; line-height:1.2}
h1{font-size:26px}
h2{font-size:19px}
h3{font-size:16px}
p{margin:0 0 1em}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}

.wrap{width:100%; max-width:var(--wrap); margin:0 auto; padding:0 22px}
.page{min-height:60vh; padding:30px 0 60px}
.v-plain .page{padding:0}

/* ---------- Topbar ---------- */
.topbar{background:var(--paper); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:40}
.topbar-in{display:flex; align-items:center; gap:26px; height:62px}
.brand{display:flex; align-items:center; gap:10px; color:var(--ink)}
.brand:hover{color:var(--ink)}
.brand-mark{
  width:30px; height:30px; border-radius:8px; display:grid; place-items:center;
  background:var(--accent); color:#fff;
}
.brand-txt{font-size:15px; letter-spacing:-.02em; color:var(--ink-2)}
.brand-txt b{font-weight:680; color:var(--ink)}
.topnav{display:flex; gap:4px; margin-left:8px; flex:1}
.topnav a{
  padding:7px 12px; border-radius:8px; font-size:14px; color:var(--ink-2); font-weight:500;
}
.topnav a:hover{background:var(--line-soft); color:var(--ink)}
.topuser{display:flex; align-items:center; gap:12px}
.me{display:flex; align-items:center; gap:9px; color:var(--ink-2); font-size:14px}
.avatar{
  width:29px; height:29px; border-radius:50%; display:grid; place-items:center;
  background:var(--accent-soft); color:var(--accent-ink); font-weight:650; font-size:13px;
}

/* ---------- Seitenkopf ---------- */
.phead{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:22px; flex-wrap:wrap}
.phead .sub{margin:5px 0 0; color:var(--muted); font-size:14px}
.phead-actions{display:flex; gap:9px; flex-wrap:wrap}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 17px; border-radius:10px; border:1px solid transparent;
  background:var(--accent); color:#fff; font:inherit; font-size:14px; font-weight:560;
  cursor:pointer; transition:background .15s ease, border-color .15s ease, color .15s ease;
  white-space:nowrap;
}
.btn:hover{background:var(--accent-ink); color:#fff}
.btn-sm{padding:7px 12px; font-size:13px; border-radius:8px}
.btn-ghost{background:transparent; border-color:var(--line); color:var(--ink-2)}
.btn-ghost:hover{background:var(--line-soft); border-color:var(--line); color:var(--ink)}
.btn-danger{background:var(--bad)}
.btn-danger:hover{background:#8f1e18}
.btn[disabled]{opacity:.5; cursor:not-allowed}

/* ---------- Karten, Tabellen, Notizen ---------- */
.card{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow)}
.card-pad{padding:22px}
.note{padding:11px 14px; border-radius:10px; font-size:14px; margin-bottom:16px; border:1px solid}
.note-ok{background:var(--ok-soft); border-color:#c7e6d5; color:var(--ok)}
.note-err{background:var(--bad-soft); border-color:#f3c9c5; color:var(--bad)}
.note-info{background:var(--accent-soft); border-color:#cfe1ea; color:var(--accent-ink)}
.note-warn{background:var(--warn-soft); border-color:#f0dcbb; color:var(--warn)}

table.tbl{width:100%; border-collapse:collapse; background:var(--paper)}
.tbl th,.tbl td{padding:12px 14px; border-bottom:1px solid var(--line-soft); text-align:left; vertical-align:middle}
.tbl th{font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:600; background:#fbfcfd}
.tbl tr:last-child td{border-bottom:0}
.tbl tr:hover td{background:#fbfcfd}
.tbl .num{text-align:right; font-variant-numeric:tabular-nums}

.pill{display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:999px; font-size:12px; font-weight:560; background:var(--line-soft); color:var(--ink-2)}
.pill-ok{background:var(--ok-soft); color:var(--ok)}
.pill-off{background:var(--line-soft); color:var(--muted)}
.pill-admin{background:var(--accent-soft); color:var(--accent-ink)}

/* ---------- Formulare ---------- */
.field{margin-bottom:15px}
.field label{display:block; font-size:13px; font-weight:560; margin-bottom:6px; color:var(--ink-2)}
.field .hint{font-size:12px; color:var(--muted); margin-top:5px}
input[type=text],input[type=email],input[type=password],input[type=url],input[type=number],select,textarea{
  width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:var(--radius-sm);
  background:var(--paper); font:inherit; font-size:14px; color:var(--ink);
}
input:hover,select:hover,textarea:hover{border-color:#d2d7de}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
textarea{min-height:76px; resize:vertical}
.row-2{display:grid; grid-template-columns:1fr 1fr; gap:15px}
.check{display:flex; align-items:flex-start; gap:9px; font-size:14px; color:var(--ink-2)}
.check input{width:16px; height:16px; margin-top:2px; accent-color:var(--accent)}

/* ---------- Kachelraster (Dashboard) ---------- */
.tiles{display:grid; grid-template-columns:repeat(auto-fill, minmax(252px, 1fr)); gap:16px}
.tile{
  position:relative; display:flex; flex-direction:column; gap:12px;
  padding:20px; min-height:158px;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); color:var(--ink);
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.tile > span{display:block}
.tile-ico{
  width:44px; height:44px; border-radius:11px; display:grid; place-items:center;
  background:var(--accent-soft); color:var(--accent);
}
.svc-img{object-fit:contain; display:block}
.tile-name{display:block; font-size:16px; font-weight:640; letter-spacing:-.01em}
.tile-desc{display:block; font-size:13px; color:var(--muted); line-height:1.45; margin-top:2px}
.tile-go{
  margin-top:auto; font-size:13px; font-weight:560; color:var(--accent);
  display:flex; align-items:center; gap:6px;
}
.tile-go svg{transition:transform .16s ease}

/* freigeschaltet */
.tile-on:hover{
  transform:translateY(-2px); box-shadow:var(--shadow-lift); border-color:#cfd9e0;
}
.tile-on:hover .tile-go svg{transform:translateX(3px)}

/* gesperrt: kein Hover, keine Interaktion */
.tile-off{
  background:#fafbfc; border-style:dashed; box-shadow:none; cursor:default;
  color:var(--muted); user-select:none;
}
.tile-off .tile-ico{background:var(--line-soft); color:#a7aeb8}
.tile-off .tile-img,.tile-off .svc-img{filter:grayscale(1); opacity:.5}
.tile-off .tile-name{color:var(--ink-2); opacity:.65}
.tile-off .tile-desc{opacity:.75}
.tile-off:hover{transform:none; box-shadow:none; border-color:var(--line)}
.tile-lock{
  position:absolute; top:15px; right:15px; display:flex; align-items:center; gap:5px;
  font-size:11px; font-weight:560; color:var(--muted);
}
.tile-note{margin-top:auto; font-size:12.5px; color:var(--muted)}

/* ---------- Landing / Login ---------- */
.hero{
  min-height:100vh; display:grid; grid-template-columns:1.05fr .95fr;
  background:var(--paper);
}
.hero-left{
  padding:48px 56px; display:flex; flex-direction:column; justify-content:space-between;
  background:
    radial-gradient(1200px 520px at -10% -10%, var(--accent-soft) 0%, rgba(232,241,245,0) 62%),
    var(--paper);
  border-right:1px solid var(--line);
}
.hero-brand{display:flex; align-items:center; gap:11px}
.hero-brand .brand-mark{width:34px; height:34px}
.hero-brand span{font-size:16px; letter-spacing:-.02em; color:var(--ink-2)}
.hero-brand b{color:var(--ink); font-weight:680}
.hero-body{max-width:520px; padding:44px 0}
.hero-body h1{font-size:clamp(30px, 4.2vw, 46px); letter-spacing:-.035em; line-height:1.07}
.hero-body h1 em{font-style:normal; color:var(--accent)}
.hero-body p.lead{margin-top:18px; font-size:16.5px; color:var(--ink-2); line-height:1.55}
.hero-list{list-style:none; padding:0; margin:30px 0 0; display:grid; gap:13px}
.hero-list li{display:flex; gap:12px; align-items:flex-start; font-size:14.5px; color:var(--ink-2)}
.hero-list .hi{
  width:30px; height:30px; flex:0 0 30px; border-radius:8px; display:grid; place-items:center;
  background:var(--accent-soft); color:var(--accent);
}
.hero-foot{font-size:12.5px; color:var(--muted); display:flex; gap:16px; flex-wrap:wrap}
.hero-right{display:grid; place-items:center; padding:48px 32px; background:var(--bg)}
.login-card{width:100%; max-width:394px}
.login-card h2{font-size:21px; margin-bottom:5px}
.login-card .sub{color:var(--muted); font-size:14px; margin-bottom:22px}
.login-card .btn{width:100%; margin-top:6px; padding:12px}
.login-alt{margin-top:18px; font-size:13px; color:var(--muted); text-align:center}

@media (max-width:900px){
  .hero{grid-template-columns:1fr; min-height:0}
  .hero-left{padding:30px 22px; border-right:0; border-bottom:1px solid var(--line)}
  .hero-body{padding:26px 0}
  .hero-right{padding:30px 22px 54px}
  .topnav{display:none}
  .me-name{display:none}
  .row-2{grid-template-columns:1fr}
}

/* ---------- Einzelseite (Passwort vergessen / neu) ---------- */
.solo{min-height:100vh; display:grid; place-items:center; padding:40px 22px; background:var(--bg)}
.solo-card{width:100%; max-width:394px}
.solo-card h2{font-size:21px; margin-bottom:5px}
.solo-card .sub{color:var(--muted); font-size:14px; margin-bottom:20px}

/* ---------- Berechtigungsmatrix ---------- */
.matrix{display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:10px}
.matrix label{
  display:flex; gap:10px; align-items:center; padding:11px 13px;
  border:1px solid var(--line); border-radius:10px; background:var(--paper); cursor:pointer;
  font-size:14px; transition:border-color .12s ease, background .12s ease;
}
.matrix label:hover{border-color:#cfd9e0; background:#fbfcfd}
.matrix input{accent-color:var(--accent); width:16px; height:16px}
.matrix .mi{width:26px; height:26px; border-radius:7px; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent)}

/* ---------- Icon-Auswahl ---------- */
.iconpick{display:grid; grid-template-columns:repeat(auto-fill, minmax(84px,1fr)); gap:8px; margin-top:8px}
.iconpick label{
  display:grid; place-items:center; gap:6px; padding:11px 6px; border:1px solid var(--line);
  border-radius:10px; cursor:pointer; text-align:center; font-size:10.5px; color:var(--muted);
  background:var(--paper);
}
.iconpick label:hover{border-color:#cfd9e0}
.iconpick input{display:none}
.iconpick input:checked + .ip-in{color:var(--accent)}
.iconpick label:has(input:checked){border-color:var(--accent); background:var(--accent-soft); color:var(--accent-ink)}
.ip-in{color:var(--ink-2)}

/* ---------- Fuss ---------- */
.foot{border-top:1px solid var(--line); background:var(--paper); padding:20px 0; margin-top:auto}
.foot-in{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:13px; color:var(--muted)}
.foot-links{display:flex; gap:16px}
.foot a{color:var(--muted)}
.foot a:hover{color:var(--ink-2)}

.stack{display:grid; gap:18px}
.muted{color:var(--muted)}
.mono{font-variant-numeric:tabular-nums; font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:12.5px}
.right{text-align:right}
.nowrap{white-space:nowrap}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important; animation:none !important}
}