/* ========= Design-Vars ========= */
:root{
  --ok:#16a34a;   --okbg:#16a34a20;
  --warn:#f59e0b; --warnbg:#f59e0b20;
  --bad:#dc2626;  --badbg:#dc262620;

  --bg:#f8fafc;
  --card:#ffffff;
  --border:#e5e7eb;
  --muted:#64748b;
  --text:#0f172a;
  --primary:#2563eb;

  --shadow: 0 6px 20px -12px rgba(2,6,23,.2);
}

/* ========= Layout ========= */
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  font-family: system-ui,-apple-system,"Segoe UI", Roboto, Arial, sans-serif;
  color:var(--text);
  background: radial-gradient(1200px 600px at 50% -100px,#eef2ff,#f8fafc 60%);
  line-height:1.45;
}
.container{
  max-width: 980px;
  margin: 24px auto 40px;
  padding: 0 16px;
}

/* ========= Header ========= */
.top{ text-align:center; }
h1{
  margin:0 0 8px;
  font-size: clamp(20px,2.6vw,30px);
  letter-spacing:.2px;
}
.muted{ color:var(--muted); font-size:.96rem }

/* ========= Panels / Inputs ========= */
.panel{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:16px;
  box-shadow:var(--shadow);
  margin-top:16px;
}
.panel.soft{ background:#fff }

.drop{ border:2px dashed #cbd5e1; background:#fff; text-align:center }
.drop.drag{ background:#f1f5f9 }
.drop .button-row{ margin-top:12px }

.lbl{
  display:flex; align-items:center; gap:8px;
  font-weight:600; color:#0f172a; margin:14px 0 8px;
}
.lbl-help{
  display:inline-block; font-weight:500; color:#475569; background:#e2e8f0;
  padding:2px 8px; border-radius:999px; border:1px solid var(--border); cursor:help;
}

textarea{
  width:100%;
  min-height: clamp(220px, 36vh, 440px);
  padding:14px;
  border-radius:12px;
  border:1px solid var(--border);
  background:#fff;
  text-align:left;
  overflow:auto;
  white-space:pre-wrap;     /* gut lesbar */
  overflow-wrap:anywhere;
}
.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* ========= Buttons ========= */
.btn{
  padding:12px 16px; border-radius:12px; border:1px solid var(--border);
  background:#f1f5f9; cursor:pointer; font-weight:600; color:var(--text);
  transition:.15s ease;
}
.btn:hover{ background:#e2e8f0 }
.primary{ background:var(--primary); color:#fff; border-color:transparent }
.primary:hover{ filter:brightness(1.06) }
.secondary{ background:#e5e7eb }
.btn:disabled{ opacity:.55; cursor:not-allowed }

.button-row{
  display:flex; justify-content:center; flex-wrap:wrap; gap:10px;
}

/* ========= Ergebnis / Score ========= */
.result-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  margin-bottom:16px;
}
.badge{ display:inline-block; padding:8px 12px; border-radius:999px; font-weight:700; font-size:.95rem }
.bad{  background:var(--badbg);  color:var(--bad) }
.warn{ background:var(--warnbg); color:var(--warn) }
.ok{   background:var(--okbg);   color:var(--ok) }
.training{ background:#3b82f620; color:#3b82f6; }

.score{ display:flex; align-items:center; gap:10px; flex:1 1 auto; justify-content:flex-end }
.score-label{ color:#475569; font-size:.95rem }
.score-bar{ flex:1 1 260px; max-width:420px; min-width:160px;
  height:12px; background:#e5e7eb; border-radius:999px; overflow:hidden; border:1px solid var(--border) }
.score-bar>div{ height:100%; width:0%; background:#22c55e; transition:width .35s }
.score-num{ min-width:68px; text-align:right; color:#475569; font-variant-numeric: tabular-nums }
.bad   ~ .score .score-bar>div{ background:#ef4444 }
.warn  ~ .score .score-bar>div{ background:#f59e0b }

.score-explain{ margin-top:14px }
.score-rows{ margin:6px 0 0 1.1rem }
.score-sum{ margin-top:6px; font-weight:700 }

/* ========= Trace ========= */
.trace-head{ margin-top:22px }
.trace{
  list-style:none; padding:0; margin:10px 0 14px;
  border-left:3px solid #e5e7eb; padding-left:12px;
}
.trace li{
  position:relative; padding:8px 10px; margin:8px 0; background:#fafafa; border:1px solid var(--border);
  border-radius:10px;
}
.trace li::before{
  content:""; position:absolute; left:-22px; top:14px;
  width:12px; height:12px; border-radius:50%; background:#94a3b8; border:2px solid #fff; box-shadow:0 0 0 2px #e5e7eb;
}
.trace li.good::before{ background:#22c55e }
.trace li.warn::before{ background:#f59e0b }
.trace li.bad::before{ background:#ef4444 }
.trace .meta{ color:#475569; font-size:.92rem; margin-top:6px }
.trace .chip{
  display:inline-block; padding:2px 8px; border-radius:999px; font-size:.8rem; font-weight:600;
  border:1px solid var(--border); background:#eef2ff; color:#1e40af; margin-right:6px;
}

/* ========= Gründe / Fakten ========= */
.reasons{ padding-left:20px; margin: 10px 0 16px }
.reasons li{ margin:6px 0 }
.hint{ color:#6b7280; font-size:.92rem; margin:.25rem 0 .45rem 0 }

.facts{ margin-top:24px }
.facts h3{ margin:0 0 10px }
.kv{ display:grid; grid-template-columns: 200px 1fr; gap:8px 14px }
.kv>div:nth-child(odd){ color:#475569 }

.allow-used{
  margin-top:18px; display:grid; gap:14px; grid-template-columns:1fr 1fr;
}
.allow-used h4{ margin:0 0 6px }
.list{ margin:6px 0 0 1.1rem }
.list li{ margin:4px 0 }

.raw-box{ margin-top:18px }

.whois{ margin-top:24px }
.whois .whois-grid{ display:grid; grid-template-columns: 200px 1fr; gap:8px 12px }
.whois .whois-grid>div:nth-child(odd){ color:#475569 }

/* ===== Geparste Felder: Werte schön umbrechen ===== */
.kv > div:nth-child(even) {
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  line-height: 1.4;
}

/* ========= Toast ========= */
.toast{
  position:fixed; left:50%; bottom:20px; transform:translateX(-50%);
  background:#fee2e2; color:#991b1b; padding:10px 14px; border-radius:10px;
  border:1px solid #fecaca; box-shadow:0 6px 20px -12px rgba(2,6,23,.35); display:none; z-index:9999;
}

/* ========= Responsive ========= */
@media (max-width: 900px){
  .kv{ grid-template-columns: 170px 1fr }
  .whois .whois-grid{ grid-template-columns: 170px 1fr }
}
@media (max-width: 700px){
  .kv{ grid-template-columns: 150px 1fr }
  .whois .whois-grid{ grid-template-columns: 150px 1fr }
  .score-bar{ min-width:140px }
}
@media (max-width: 560px){
  .allow-used{ grid-template-columns:1fr }
}