/* qrxt.eu Kundenbereich – ruhiges, professionelles SaaS mit blauer Identitaet.
   Selbstgehostete Fonts (DSGVO-rein, kein CDN). Verhaltens-erhaltend: nur Optik. */

@font-face { font-family:'Poppins'; font-weight:600 700; font-display:swap; src:url(../assets/fonts/poppins.woff2) format('woff2'); }
@font-face { font-family:'Plex'; font-weight:100 700; font-display:swap; src:url(../assets/fonts/ibmplexsans.woff2) format('woff2'); }

:root{
  --accent:#0066cc; --accent-dark:#004e9e; --accent-soft:#e8f1fc; --accent-ink:#0b3a66;
  --ink:#0f1b2d; --muted:#5d6b80; --line:#e4e9f1; --surface:#ffffff; --bg:#eef2f8;
  --ok:#0a7a28; --ok-soft:#e7f6ec; --warn-bg:#fff7e6; --warn-line:#ffd591;
  --danger:#cf1322; --danger-soft:#fff1f0; --danger-line:#ffccc7;
  --radius:14px; --radius-sm:9px;
  --shadow:0 1px 2px rgba(15,27,45,.06), 0 8px 24px -12px rgba(15,27,45,.16);
  --shadow-lg:0 18px 48px -18px rgba(15,27,45,.28);
  --font:'Plex',-apple-system,"Segoe UI",Roboto,sans-serif;
  --display:'Poppins',var(--font);
}
*{box-sizing:border-box}
body{
  margin:0; font-family:var(--font); color:var(--ink); line-height:1.55;
  background:var(--bg);
  background-image:radial-gradient(rgba(15,27,45,.05) 1px, transparent 1.3px);
  background-size:22px 22px; background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
}

/* ---------- Kopfzeile / App-Bar ---------- */
header{
  position:sticky; top:0; z-index:20;
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:14px 24px;
  background:rgba(255,255,255,.82); backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid var(--line);
}
header h1{
  font-family:var(--display); font-weight:700; font-size:1.15rem; margin:0;
  letter-spacing:-.01em; display:flex; align-items:center; gap:10px;
}
header h1::before{
  content:""; width:12px; height:12px; border-radius:4px;
  background:linear-gradient(135deg,var(--accent),#3aa0ff);
  box-shadow:0 0 0 4px var(--accent-soft);
}
header .meta{color:var(--muted); font-size:.85rem}
header nav{display:flex; gap:6px; align-items:center; flex-wrap:wrap}
header nav a{
  color:var(--muted); text-decoration:none; font-size:.86rem; font-weight:500;
  padding:7px 12px; border-radius:999px; transition:background .15s,color .15s;
}
header nav a:hover{background:var(--accent-soft); color:var(--accent-ink)}

main{max-width:1000px; margin:0 auto; padding:28px 24px 56px; animation:auf .4s ease both}
@keyframes auf{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}

h2,h3{font-family:var(--display); letter-spacing:-.01em}

/* ---------- Karten ---------- */
.karte{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px; margin-bottom:20px; box-shadow:var(--shadow);
}
.karte h2{
  font-size:1.05rem; margin:0 0 16px; display:flex; align-items:center; gap:9px;
}
.karte h2::before{
  content:""; width:4px; height:18px; border-radius:3px; background:var(--accent); flex:none;
}
.hint{color:var(--muted); font-size:.82rem; margin:-6px 0 12px}
.leer{color:var(--muted); font-size:.88rem}

/* ---------- Auth-Box ---------- */
.box{
  max-width:420px; margin:8vh auto; background:var(--surface);
  border:1px solid var(--line); border-radius:18px; padding:32px 28px;
  box-shadow:var(--shadow-lg); animation:auf .4s ease both;
}
.box h1{font-family:var(--display); font-size:1.5rem; margin:0 0 4px; letter-spacing:-.02em}
.box .sub{color:var(--muted); font-size:.92rem; margin:0 0 22px}
.box .wechsel{margin-top:18px; font-size:.88rem; color:var(--muted); text-align:center}

/* ---------- Formulare ---------- */
label{display:grid; gap:6px; margin-bottom:14px; font-size:.82rem; font-weight:500; color:var(--muted)}
input,select,textarea{
  border:1px solid var(--line); border-radius:var(--radius-sm); padding:11px 12px;
  font:inherit; color:var(--ink); width:100%; background:#fff; transition:border-color .15s, box-shadow .15s;
}
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);
}
label.check{grid-template-columns:auto 1fr; align-items:center; gap:9px; font-weight:500; color:var(--ink)}
label.check input{width:auto}

button,.linkbtn{
  font:inherit; font-weight:600; cursor:pointer; border:none; border-radius:var(--radius-sm);
  padding:11px 18px; background:var(--accent); color:#fff;
  box-shadow:0 1px 2px rgba(15,27,45,.12); transition:transform .12s, background .15s, box-shadow .15s;
}
button:hover,.linkbtn:hover{background:var(--accent-dark)}
button:active,.linkbtn:active{transform:translateY(1px)}
button.sek{background:#fff; color:var(--accent); border:1px solid var(--accent); box-shadow:none}
button.sek:hover{background:var(--accent-soft)}
.linkbtn{padding:7px 13px; font-size:.84rem; font-weight:500; box-shadow:none}
.btn-gefahr,button.btn-gefahr{background:var(--danger)}
.btn-gefahr:hover{background:#a8071a}

/* ---------- Tabellen ---------- */
table{width:100%; border-collapse:collapse; font-size:.86rem}
th,td{text-align:left; padding:10px 10px; border-bottom:1px solid var(--line)}
th{font-size:.74rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); font-weight:600}
tbody tr,table tr{transition:background .12s}
table tr:hover td{background:var(--accent-soft)}
td.ziel{max-width:240px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted)}
.kurz{font-variant-numeric:tabular-nums}

a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}

/* ---------- Hinweise / Banner ---------- */
.fehler{color:var(--danger)}
.hinweis{
  background:var(--ok-soft); color:#0a5c20; border:1px solid #b7e4c2;
  padding:11px 14px; border-radius:var(--radius-sm); font-size:.9rem; margin-bottom:18px;
}
.banner{background:var(--warn-bg); border:1px solid var(--warn-line)}
.banner p{margin:0 0 10px}
.gefahr{border:1px solid var(--danger-line); background:var(--danger-soft)}

/* ---------- KPI-Kacheln ---------- */
.kpi-zeile{display:flex; gap:16px; align-items:stretch; flex-wrap:wrap}
.kpi{
  display:flex; flex-direction:column; gap:4px; flex:1 1 150px;
  background:linear-gradient(180deg,#fff,#fbfdff); border:1px solid var(--line);
  border-radius:var(--radius); padding:16px 18px; box-shadow:var(--shadow);
}
.kpi-zahl{font-family:var(--display); font-size:2rem; font-weight:700; letter-spacing:-.03em; line-height:1; color:var(--accent-ink)}
.kpi-text{color:var(--muted); font-size:.8rem; font-weight:500}
.kpi-cta{margin-left:auto; align-self:center}

/* ---------- Diagramme ---------- */
.raster{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:20px}
.raster h3,.chart-card h3{margin:0 0 10px; font-size:.95rem}
svg.linie{width:100%; height:auto; max-height:210px; display:block}
.linie .flaeche{fill:rgba(0,102,204,.10)}
.linie .kurve{fill:none; stroke:var(--accent); stroke-width:2.5; stroke-linejoin:round; stroke-linecap:round}
.linie circle{fill:var(--accent)}
.linie .ax{fill:var(--muted); font-size:11px}
.barrow{display:grid; grid-template-columns:100px 1fr 38px; gap:10px; align-items:center; margin-bottom:9px; font-size:.85rem}
.barlabel{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.bartrack{background:#eaeef4; border-radius:999px; height:10px; overflow:hidden}
.barfill{display:block; height:100%; background:linear-gradient(90deg,var(--accent),#3aa0ff); border-radius:999px}
.barval{text-align:right; color:var(--muted); font-variant-numeric:tabular-nums}

/* ---------- Microsite-Editor (seite-edit) ---------- */
.block-karte{
  border:1px solid var(--line); border-radius:var(--radius); padding:16px; margin:0 0 14px;
  background:linear-gradient(180deg,#fff,#fcfdff); box-shadow:var(--shadow);
}
.block-karte>strong{
  display:inline-block; margin-bottom:12px; font-family:var(--display); font-weight:600; font-size:.7rem;
  text-transform:uppercase; letter-spacing:.06em; color:var(--accent-ink);
  background:var(--accent-soft); padding:4px 10px; border-radius:999px;
}
.block-form textarea{width:100%; min-height:80px; resize:vertical}
.eintrag{display:flex; gap:8px; margin:0 0 8px; flex-wrap:wrap}
.eintrag input,.eintrag select{flex:1; min-width:110px}
.block-aktionen{margin-top:10px; display:flex; gap:6px}
.block-aktionen .linkbtn{background:#fff; color:var(--muted); border:1px solid var(--line)}
.block-aktionen .linkbtn:hover{background:var(--accent-soft); color:var(--accent-ink); border-color:var(--accent-soft)}
.bild-mini{height:52px; border-radius:8px; margin:0 8px 8px 0; vertical-align:middle; border:1px solid var(--line)}

@media (max-width:640px){
  header{padding:12px 16px}
  main{padding:20px 16px 44px}
  .karte{padding:18px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
}

.anlegen-art { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: .75rem; }
.anlegen-art .check { margin: 0; }
main > .meta { color: #64748b; font-size: .9rem; margin: 0 0 .75rem; }

/* ---------- QR-Design-Editor ---------- */
.design-layout { display: grid; grid-template-columns: 1fr 380px; gap: 1rem; align-items: start; }
.design-vorschau { position: sticky; top: 1rem; text-align: center; }
.design-vorschau #preview svg { max-width: 100%; height: auto; }
.design-aktionen { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-top: .75rem; }
@media (max-width: 900px) { .design-layout { grid-template-columns: 1fr; } .design-vorschau { position: static; } }

.stil-zeile { margin: 0 0 .6rem; }
.stil-zeile select { max-width: 100%; }