[hidden] { display:none !important; }
:root { color-scheme:light; --bg:#f6f7f9; --card:#fff; --text:#1c2330; --muted:#6b7587; --line:#dde1e8; --accent:#2457d6; --err:#b42318; --warn:#b54708; --ok:#067647;
  --warn-bg:#fffaeb; --warn-line:#fedf89; --ok-bg:#ecfdf3; --ok-line:#abefc6; }
/* Dark: follows the system unless the user picked a theme (data-theme on <html>, see theme.js) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { color-scheme:dark; --bg:#12151b; --card:#1a1f28; --text:#e7eaf0; --muted:#98a2b3; --line:#2b3340; --accent:#6c93ff; --err:#f97066; --warn:#fdb022; --ok:#47cd89;
    --warn-bg:#2a1f0b; --warn-line:#7a5212; --ok-bg:#0b2618; --ok-line:#1f6b43; }
}
:root[data-theme="dark"] { color-scheme:dark; --bg:#12151b; --card:#1a1f28; --text:#e7eaf0; --muted:#98a2b3; --line:#2b3340; --accent:#6c93ff; --err:#f97066; --warn:#fdb022; --ok:#47cd89;
  --warn-bg:#2a1f0b; --warn-line:#7a5212; --ok-bg:#0b2618; --ok-line:#1f6b43; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:16px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif; }
main { max-width:1040px; margin:0 auto; padding:24px 16px 64px; }
main.doc { max-width:860px; } /* text pages: shorter lines read better */
#toolIntro { max-width:75ch; }
a { color:var(--accent); }
h1 { font-size:1.6rem; margin:0 0 4px; }
h2 { font-size:1rem; margin:0 0 10px; }
.sub { color:var(--muted); margin:0 0 20px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:20px; margin-bottom:16px; }

/* Modus-Hinweis: lokal unaufdringlich, Server-Modus kompakt aber angeheftet */
/* Modusmeldung unter Titel und Kurztext (nur Konverter und CSR): gleicher Kasten für alle Zustände */
.banner { font-size:.85rem; margin:-8px 0 18px; padding:8px 12px; border:1px solid var(--line); border-radius:8px; color:var(--text); }
.banner > div { display:flex; gap:8px; align-items:baseline; flex-wrap:wrap; }
.banner .icon { font-size:.95rem; }
.banner strong { font-weight:600; }
.banner.local { background:var(--ok-bg); border-color:var(--ok-line); }
.banner.local strong { color:var(--ok); }
.banner.server { position:sticky; top:0; z-index:10; background:var(--warn-bg); border-color:var(--warn-line); }
.banner.server strong { color:var(--warn); }
.banner.loading { background:var(--card); }
.banner button.link { background:none; border:0; padding:0; color:var(--accent); text-decoration:underline; font:inherit; cursor:pointer; }

.theme-btn { float:right; margin:2px 0 0 12px; padding:4px 10px; border:1px solid var(--line); border-radius:99px; background:var(--card); color:var(--muted); font:inherit; font-size:.8rem; cursor:pointer; }
.theme-btn:hover { color:var(--text); }

/* Kettengrafik */
.chaingraph { display:flex; align-items:stretch; overflow-x:auto; margin:12px 0 6px; padding-bottom:4px; }
.cg-node { flex:1 1 0; min-width:150px; border:2px solid var(--ok); border-radius:10px; padding:8px 10px; background:var(--card); font-size:.82rem; line-height:1.35; }
.cg-node.st-warn { border-color:var(--warn); } .cg-node.st-err { border-color:var(--err); }
.cg-node.st-ghost { border-style:dashed; border-color:var(--line); color:var(--muted); }
.cg-node.st-missing { border-style:dashed; border-color:var(--err); }
.cg-role { font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
.cg-name { font-weight:700; word-break:break-word; margin:2px 0; }
.cg-meta { color:var(--muted); }
.cg-badges { margin-top:4px; display:flex; flex-wrap:wrap; gap:4px; }
.cg-badges span { font-size:.68rem; border:1px solid currentColor; border-radius:99px; padding:0 6px; }
.cg-arrow { flex:0 0 auto; display:flex; flex-direction:column; justify-content:center; align-items:center; padding:0 6px; color:var(--muted); font-size:.66rem; text-align:center; }
.cg-arrow b { font-size:1.2rem; line-height:1; }
@media (max-width:600px) {
  .chaingraph { flex-direction:column; }
  .cg-node { min-width:0; }
  .cg-arrow { flex-direction:row; gap:6px; padding:3px 0; }
  .cg-arrow b { transform:rotate(90deg); }
}

.drop { border:2px dashed var(--line); border-radius:10px; padding:28px; text-align:center; color:var(--muted); cursor:pointer; }
.drop.over { border-color:var(--accent); color:var(--accent); }
ul.files { list-style:none; padding:0; margin:12px 0 0; }
ul.files li { display:flex; justify-content:space-between; gap:8px; padding:6px 0; border-bottom:1px solid var(--line); font-size:.95rem; word-break:break-all; }
ul.files button { background:none; border:0; color:var(--muted); cursor:pointer; font-size:1rem; }
label { display:block; font-weight:600; margin:14px 0 4px; }
label small, .muted { font-weight:400; color:var(--muted); }
input[type=password], select { width:100%; padding:10px; border:1px solid var(--line); border-radius:8px; background:var(--bg); color:var(--text); font:inherit; }
.check { display:flex; gap:8px; align-items:flex-start; font-weight:400; margin-top:10px; }
.check input { margin-top:5px; }
.check small { color:var(--muted); display:block; }
.row { display:flex; gap:12px; flex-wrap:wrap; margin-top:18px; }
button.btn { padding:10px 18px; border-radius:8px; border:1px solid var(--line); background:var(--card); color:var(--text); font:inherit; font-weight:600; cursor:pointer; }
button.primary { background:var(--accent); border-color:var(--accent); color:#fff; }
button.primary.server { background:var(--warn); border-color:var(--warn); }
button:disabled { opacity:.5; cursor:not-allowed; }
#msg { margin-top:14px; min-height:1.4em; }
.err { color:var(--err); } .ok { color:var(--ok); } .warn { color:var(--warn); }
.mode { display:flex; gap:8px; flex-wrap:wrap; }
.mode label { margin:0; font-weight:500; border:1px solid var(--line); border-radius:8px; padding:8px 12px; cursor:pointer; display:flex; gap:8px; align-items:center; }
.mode label.on { border-color:var(--accent); }
.mode label.off { opacity:.5; cursor:not-allowed; }
.status { font-weight:600; margin:2px 0; }
.cert { border:1px solid var(--line); border-radius:10px; padding:10px 12px; margin-top:22px; font-size:.92rem; word-break:break-word; position:relative; }
.cert:first-of-type { margin-top:12px; }
.cert + .cert::before { content:"▼ ausgestellt von"; position:absolute; top:-1.6em; left:14px; font-size:.75rem; color:var(--muted); }
.cert .k { display:inline-block; min-width:96px; color:var(--muted); font-weight:600; }
.tag { font-size:.75rem; padding:1px 8px; border-radius:99px; border:1px solid var(--line); color:var(--muted); margin-left:6px; white-space:nowrap; }
.tag.ok { color:var(--ok); border-color:currentColor; } .tag.err { color:var(--err); border-color:currentColor; } .tag.acc { color:var(--accent); border-color:currentColor; } .tag.warn { color:var(--warn); border-color:currentColor; }
ul.notes { margin:8px 0 0; padding-left:20px; }
.mono { font-family:ui-monospace,Consolas,monospace; font-size:.8rem; }
.hint { color:var(--muted); font-size:.85rem; margin-top:20px; }

/* Anforderungs-Seite */
table { width:100%; border-collapse:collapse; font-size:.92rem; }
th, td { text-align:left; padding:8px 6px; border-bottom:1px solid var(--line); vertical-align:top; }
th { color:var(--muted); font-weight:600; }
.res { white-space:nowrap; font-weight:600; }
.card ul { padding-left:20px; margin:6px 0; }
.card li { margin:4px 0; }
code { font-family:ui-monospace,Consolas,monospace; font-size:.85em; background:var(--bg); border:1px solid var(--line); border-radius:4px; padding:0 4px; }
pre { background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:10px; overflow-x:auto; font-size:.82rem; }
label.first { margin-top:0; }
.inline { display:flex; gap:8px; }
.inline input { flex:1; min-width:0; }
input[type=text], textarea { width:100%; padding:10px; border:1px solid var(--line); border-radius:8px; background:var(--bg); color:var(--text); font:inherit; }
textarea { font-family:ui-monospace,Consolas,monospace; font-size:.8rem; resize:vertical; }
.small { font-size:.85rem; margin:8px 0 0; }
.facts { display:grid; grid-template-columns:max-content 1fr; gap:2px 12px; font-size:.92rem; margin:8px 0; }
.facts dt { color:var(--muted); font-weight:600; }
.facts dd { margin:0; word-break:break-word; }
details { margin-top:8px; }
details summary { cursor:pointer; color:var(--accent); font-size:.88rem; }
.days { font-weight:600; }
ul.issues { margin:8px 0; padding-left:20px; }
ul.issues li { margin:4px 0; }
.sect { margin-top:16px; padding-top:12px; border-top:1px solid var(--line); }
.sect:first-child { margin-top:0; padding-top:0; border-top:0; }
@media (max-width:520px) { .facts { grid-template-columns:1fr; } .facts dd { margin-bottom:6px; } }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:0 12px; }
@media (max-width:520px) { .grid2 { grid-template-columns:1fr; } }
h2.sect { margin-top:20px; padding-top:14px; border-top:1px solid var(--line); }
table.ct td { font-size:.85rem; }
table.ct td.names { word-break:break-all; }
.chips { display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 4px; }
.chips span { font-size:.8rem; border:1px solid var(--line); border-radius:99px; padding:1px 8px; }
.yes { color:var(--ok); font-weight:600; } .no { color:var(--err); font-weight:600; }
.proto { width:auto; flex:0 0 auto; max-width:45%; }
@media (max-width:520px) { .inline { flex-wrap:wrap; } .checkbtns .btn { flex:1 1 100%; } .proto { max-width:none; flex:1 1 100%; } }
.rev { margin-top:6px; font-size:.9rem; }
.rev .good { color:var(--ok); font-weight:600; } .rev .revoked { color:var(--err); font-weight:700; } .rev .unknown, .rev .unchecked { color:var(--warn); font-weight:600; }

/* Ausführlicher Test */
.row.tight { margin-top:10px; align-items:center; }
.gradebox { display:flex; gap:18px; align-items:center; flex-wrap:wrap; }
.grade { width:84px; height:84px; border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:2.6rem; font-weight:800; color:#fff; flex:0 0 auto; }
.grade.g-a { background:#12a150; } .grade.g-b { background:#d98c00; } .grade.g-c, .grade.g-d, .grade.g-e { background:#e2621b; } .grade.g-f, .grade.g-t { background:#d0302f; }
.scores { flex:1 1 260px; min-width:0; }
.bar { display:grid; grid-template-columns:130px 1fr 36px; gap:8px; align-items:center; font-size:.85rem; margin:4px 0; }
.bar .track { height:10px; border-radius:99px; background:var(--line); overflow:hidden; }
.bar .fill { height:100%; background:var(--accent); border-radius:99px; }
table.suites td, table.suites th { font-size:.82rem; padding:4px 6px; }
table.suites td.name { font-family:ui-monospace,Consolas,monospace; word-break:break-all; }
.r-strong { color:var(--ok); } .r-weak { color:var(--warn); } .r-insecure { color:var(--err); font-weight:600; }
.f-ok { color:var(--ok); } .f-warn { color:var(--warn); } .f-err { color:var(--err); font-weight:600; } .f-info { color:var(--muted); }
@media (max-width:520px) { .bar { grid-template-columns:100px 1fr 32px; } }
.stores { font-size:.9rem; margin:4px 0 2px; }

/* Beispiele und Fortschritt */
.examples { margin:8px 0 0; }
.examples a { white-space:nowrap; }
.progress { list-style:none; padding:0; margin:8px 0 0; font-size:.9rem; }
.progress li { margin:3px 0; }
.progress .done { color:var(--ok); }

/* E-Mail & DNS */
.inline .sel { flex:0 1 220px; min-width:0; }
@media (max-width:520px) { .inline .sel { flex:1 1 100%; } }
.inline input.sel { width:auto; }
.spftree, .spftree ul { list-style:none; padding-left:14px; margin:4px 0; }
.spftree > li { padding-left:0; }
.spftree li { margin:3px 0; font-size:.85rem; }
.spftree .dom { font-weight:600; }
pre.rec { white-space:pre-wrap; word-break:break-all; margin:6px 0; }
nav.subtabs { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 14px; }
nav.subtabs a { padding:5px 12px; border:1px solid var(--line); border-radius:99px; text-decoration:none; color:var(--muted); font-size:.9rem; font-weight:600; }
nav.subtabs a.on { color:var(--accent); border-color:var(--accent); }
td.skip { color:var(--muted); }
td.pre { white-space:pre-line; }
main > h1#toolTitle { font-size:1.4rem; margin:6px 0 4px; }
#toolIntro .muted { display:block; margin-top:2px; }
h2.area { font-size:1.15rem; margin:28px 0 10px; color:var(--muted); text-transform:none; }
.loadbar { flex:1 1 100%; height:6px; border-radius:99px; background:var(--line); overflow:hidden; margin-top:6px; }
.loadbar > span { display:block; height:100%; width:0; background:var(--accent); transition:width .2s; }

/* ---------- Kopf- und Fußzeile (alle Seiten) ---------- */
header.site { margin:0 0 20px; }
header.site .bar { display:flex; align-items:center; gap:12px; padding:2px 0 18px; }
header.site .theme-btn { float:none; margin:0 0 0 auto; }
.brand { display:inline-flex; align-items:center; gap:10px; color:var(--text); text-decoration:none; font-weight:700; font-size:1.25rem; letter-spacing:-.01em; }
.brand .logo { width:30px; height:30px; padding:5px; border-radius:9px; background:var(--accent); flex:none; }
.brand .logo path { fill:none; stroke:#fff; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
nav.areas { display:flex; gap:28px; border-bottom:1px solid var(--line); }
nav.areas a { padding:8px 2px 11px; margin-bottom:-1px; border-bottom:2px solid transparent; color:var(--muted); font-weight:600; text-decoration:none; }
nav.areas a:hover { color:var(--text); }
nav.areas a.on { color:var(--text); border-bottom-color:var(--accent); }
@media (max-width:520px) { nav.areas { gap:0; } nav.areas a { flex:1; text-align:center; } }

footer.site { display:grid; grid-template-columns:2fr 1fr; gap:24px; margin-top:56px; padding-top:28px; border-top:1px solid var(--line); font-size:.9rem; color:var(--muted); }
footer.site .brand { font-size:1rem; }
footer.site .brand .logo { width:24px; height:24px; padding:4px; border-radius:7px; }
footer.site .about p { margin:10px 0 0; max-width:30ch; line-height:1.5; }
footer.site h2 { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); margin:2px 0 8px; padding:0; border:0; }
footer.site nav a { display:block; padding:3px 0; color:var(--text); text-decoration:none; }
footer.site nav a:hover { color:var(--accent); }
@media (max-width:520px) { footer.site { grid-template-columns:1fr; } }
.brand, header.site .theme-btn { white-space:nowrap; }
@media (max-width:380px) { header.site .brand { font-size:1.1rem; } }
section.card[id], h2[id] { scroll-margin-top:16px; }
section.card:target { box-shadow:0 0 0 2px var(--accent); }
.btn.small { padding:4px 10px; font-size:.8rem; }
.dsline { margin:10px 0 14px; }
.dsline pre { margin:4px 0 6px; }
.card form { max-width:720px; } /* inputs stay compact, results use the full width */

/* Weg einer E-Mail */
ol.hops { list-style:none; counter-reset:hop; padding:0; margin:10px 0; }
ol.hops li { counter-increment:hop; position:relative; padding:8px 12px 8px 44px; margin:0 0 8px; border:1px solid var(--line); border-radius:8px; background:var(--card); }
ol.hops li::before { content:counter(hop); position:absolute; left:12px; top:9px; width:22px; height:22px; border-radius:50%; background:var(--accent); color:#fff; font-size:.75rem; font-weight:700; display:flex; align-items:center; justify-content:center; }
ol.hops li + li::after { content:""; position:absolute; left:22px; top:-9px; height:9px; border-left:2px solid var(--line); }
ol.hops li.plain { border-color:var(--warn-line); background:var(--warn-bg); }
.hop-top { display:flex; flex-wrap:wrap; gap:4px; align-items:baseline; word-break:break-all; }
#hdrText { font-size:.78rem; }
#hdrForm { max-width:none; }