/* Evidentic Shop-Analysis — Designsprache "Laborjournal"
   Wissenschaftlich-editorial: warmes Papier, Indigo-Akzent, feine Linien. */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,900&family=Hanken+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --paper:#f6f4ee; --paper-2:#fbfaf6; --ink:#17151f; --muted:#6c6676;
  --line:#e3dfd4; --line-strong:#cdc7b8;
  --indigo:#534ab7; --indigo-deep:#3a3390; --indigo-ink:#211d43;
  --red:#b0413a; --amber:#bf861a; --green:#2f7d5b;
  --radius:14px; --radius-sm:9px;
  --shadow:0 1px 2px rgba(33,29,67,.05), 0 12px 34px -18px rgba(33,29,67,.28);
  --font-display:'Fraunces',Georgia,serif;
  --font-body:'Hanken Grotesk',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; color:var(--ink); font-family:var(--font-body); font-size:16px; line-height:1.55;
  background:
    radial-gradient(1200px 600px at 100% -10%, rgba(83,74,183,.06), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(83,74,183,.05), transparent 55%),
    var(--paper);
  background-attachment:fixed;
}
a{color:var(--indigo-deep); text-decoration-thickness:1px; text-underline-offset:2px}
h1,h2,h3{font-family:var(--font-display); font-weight:600; letter-spacing:-.01em; line-height:1.1; margin:.2em 0 .5em}
h2{font-size:1.9rem} h3{font-size:1.2rem; letter-spacing:0}
small{color:var(--muted)}
code,.mono{font-family:var(--font-mono)}

.container{max-width:1040px; margin:0 auto; padding:1.5rem 1.4rem 3rem}

/* Kopfzeile */
.topbar{display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding-bottom:1rem; margin-bottom:1.6rem; border-bottom:1px solid var(--line-strong)}
.brand{display:flex; align-items:baseline; gap:.55rem; font-family:var(--font-display); font-weight:900; font-size:1.15rem; letter-spacing:-.02em}
.brand .dot{width:.5rem; height:.5rem; border-radius:50%; background:var(--indigo); display:inline-block; transform:translateY(-1px)}
.brand .sub{font-family:var(--font-mono); font-weight:400; font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted)}
.nav{display:flex; gap:1.1rem; align-items:center; font-size:.92rem}
.nav a{color:var(--ink); text-decoration:none; opacity:.72}
.nav a:hover,.nav a.active{opacity:1; text-decoration:underline; text-decoration-color:var(--indigo)}

/* Buttons */
.btn{display:inline-flex; align-items:center; gap:.5rem; font-family:var(--font-body); font-weight:600;
  font-size:.92rem; padding:.6rem 1.05rem; border-radius:var(--radius-sm); border:1px solid var(--indigo-deep);
  background:var(--indigo); color:#fff; cursor:pointer; text-decoration:none; transition:transform .08s ease, box-shadow .15s ease}
.btn:hover{box-shadow:0 8px 20px -10px rgba(83,74,183,.7)} .btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent; color:var(--indigo-deep); border-color:var(--line-strong)}
.btn.ghost:hover{border-color:var(--indigo)}
.btn.danger{background:transparent; color:var(--red); border-color:#e2c3c0}
.btn.small{padding:.35rem .7rem; font-size:.82rem}

/* Formulare */
label{display:block; font-size:.82rem; font-weight:600; color:var(--muted); margin:.9rem 0 .3rem; letter-spacing:.01em}
input[type=text],input[type=password],input[type=number],select{
  width:100%; font-family:var(--font-body); font-size:1rem; padding:.7rem .8rem; color:var(--ink);
  background:var(--paper-2); border:1px solid var(--line-strong); border-radius:var(--radius-sm); outline:none}
input:focus,select:focus{border-color:var(--indigo); box-shadow:0 0 0 3px rgba(83,74,183,.14)}
.otp{font-family:var(--font-mono); letter-spacing:.5em; text-align:center; font-size:1.4rem}

/* Karten */
.card{background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius); padding:1.1rem 1.2rem; box-shadow:var(--shadow)}
.grid-cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1rem; margin:1.2rem 0}
.grid-cards .card{text-align:left}
.grid-cards .num{font-family:var(--font-display); font-weight:900; font-size:2.1rem; line-height:1; letter-spacing:-.02em}
.grid-cards .lbl{display:block; margin-top:.35rem; font-size:.78rem; color:var(--muted)}
.grid-cards .accent{color:var(--indigo-deep)}

/* Tabellen */
table{width:100%; border-collapse:collapse; font-size:.92rem}
th,td{text-align:left; padding:.55rem .6rem; border-bottom:1px solid var(--line)}
th{font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-weight:600}
td .mono{font-size:.86rem}

/* Ampeln & Badges */
.ampel{display:inline-block; width:.7em; height:.7em; border-radius:50%; margin-right:.35em; vertical-align:middle}
.rot{background:var(--red)} .gelb{background:var(--amber)} .gruen{background:var(--green)}
.badge{display:inline-block; font-family:var(--font-mono); font-size:.7rem; padding:.15rem .5rem; border-radius:999px; border:1px solid var(--line-strong); color:var(--muted)}
.badge.admin{color:var(--indigo-deep); border-color:#cdc7f0; background:rgba(83,74,183,.08)}

/* Flash */
.flash{border-radius:var(--radius-sm); padding:.7rem .9rem; margin:.4rem 0 1rem; font-size:.92rem; border:1px solid}
.flash-ok{background:#eef6ef; border-color:#cfe6d4; color:#245c41}
.flash-err{background:#fbeeec; border-color:#eccbc7; color:#8a352f}
.flash-warn{background:#fbf3e2; border-color:#eddcb6; color:#7a5a13}

footer{margin-top:2.5rem; padding-top:1rem; border-top:1px solid var(--line); color:var(--muted); font-size:.8rem}

/* ---- Login: Split-Screen "Laborjournal" ---- */
.auth-wrap{min-height:100vh; display:grid; grid-template-columns:1.05fr 1fr}
.auth-brand{position:relative; background:linear-gradient(155deg,var(--indigo-ink),var(--indigo-deep)); color:#efeefb; padding:3rem 3.2rem; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between}
.auth-brand::after{content:""; position:absolute; inset:0; opacity:.5; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size:34px 34px; mask-image:radial-gradient(120% 90% at 20% 0%, #000 30%, transparent 75%)}
.auth-brand .mark{position:relative; z-index:1; font-family:var(--font-display); font-weight:900; font-size:2.6rem; letter-spacing:-.03em}
.auth-brand .mark .dot{color:#a9a2ff}
.auth-brand .lede{position:relative; z-index:1; max-width:24ch; font-family:var(--font-display); font-weight:400; font-size:1.5rem; line-height:1.25; color:#dcd8ff}
.auth-brand .meta{position:relative; z-index:1; font-family:var(--font-mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:#b6afff; opacity:.8}
.auth-panel{display:flex; align-items:center; justify-content:center; padding:2rem}
.auth-card{width:100%; max-width:360px}
.auth-card h1{font-size:1.5rem; margin-bottom:.2rem}
.auth-card .hint{color:var(--muted); font-size:.9rem; margin-top:0}
.auth-card .btn{width:100%; justify-content:center; margin-top:1.2rem}
@media (max-width:820px){ .auth-wrap{grid-template-columns:1fr} .auth-brand{padding:2rem; min-height:34vh} }