/* FSKit-Seite: Bausteine aus der Artikel-Fassung im Design von fskit.css */
:root{--red:#934644;--red-soft:#faf5f4;--green:#37674f;--green-soft:#f3f7f4}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.86em;padding:2px 6px;border-radius:5px;background:#edf3f7;color:#11558d;overflow-wrap:anywhere}
pre{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:#17212b;color:#f5f5f7;padding:16px 20px;border-radius:12px;overflow-x:auto;font-size:14px;line-height:1.5;margin:14px 0}
pre code{background:none;color:inherit;padding:0}
.section-lead{max-width:830px;font-size:19px;color:var(--muted)}

/* Begriffe */
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:42px}
.fact{padding:25px;border:1px solid var(--line);border-radius:16px;background:#f8fbfd}
.fact strong{display:block;margin-bottom:8px;font-size:19px;letter-spacing:-.02em}
.fact p{margin:0;color:var(--muted);font-size:15px}

/* 30-Sekunden-Test */
.steps{counter-reset:s;list-style:none;padding:0;margin:38px 0 26px;max-width:900px}
.steps li{counter-increment:s;position:relative;padding:0 0 26px 58px;color:var(--muted);font-size:17px;line-height:1.6}
.steps li strong{color:var(--ink)}
.steps li::before{content:counter(s);position:absolute;left:0;top:0;width:38px;height:38px;border-radius:50%;background:var(--blue);color:#fff;font-weight:750;display:flex;align-items:center;justify-content:center}
.verdict{max-width:900px;border-radius:14px;padding:18px 22px;margin:12px 0;font-size:16px;line-height:1.6}
.verdict.bad{background:var(--red-soft);border-left:4px solid var(--red)}
.verdict.good{background:var(--green-soft);border-left:4px solid var(--green)}

/* Weg durch macOS */
.path .layer{border:1px solid #dbe6ee;border-radius:10px;padding:11px 14px;text-align:center;background:#fff;font-size:15px;font-weight:650;line-height:1.35}
.path .layer small{display:block;margin-top:2px;color:var(--muted);font-size:13px;font-weight:500}
.path .arrow{text-align:center;color:#7d8d9b;font-size:13px;line-height:26px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.path .layer.cut{background:var(--red-soft);border-color:#ecc4c1}
.path .layer.scsi{background:var(--green-soft);border-color:#bcdcc8}
.path .stack{padding-top:22px}
.path-fs .path-top strong{color:var(--red)}
.path-scsi .path-top strong{color:var(--green)}
.compare .caption{max-width:920px;margin:26px 0 0;color:var(--muted);font-size:15px}

/* Tabelle versprochen / geliefert */
.tablewrap{overflow-x:auto;margin-top:38px;border:1px solid var(--line);border-radius:16px}
.tablewrap table{width:100%;border-collapse:collapse;font-size:15.5px;line-height:1.55;min-width:640px}
.tablewrap th,.tablewrap td{text-align:left;vertical-align:top;padding:16px 18px;border-bottom:1px solid var(--line)}
.tablewrap tr:last-child td{border-bottom:0}
.tablewrap th{background:#f5f7f9;font:750 11px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.tablewrap td:first-child{font-weight:700;white-space:nowrap}
.tablewrap td.f{color:var(--red)}
.tablewrap td.n{color:var(--green)}

/* Umweg-Kacheln */
.deep-grid article h3{margin-top:19px}
.deep-grid .row{display:grid;grid-template-columns:8.5rem 1fr;gap:10px;margin-top:16px;padding-top:14px;border-top:1px solid #dbe6ee;font-size:15px;line-height:1.55;color:var(--muted)}
.deep-grid .row+.row{margin-top:6px;padding-top:6px;border-top:0}
.deep-grid .row .k{font-weight:700;color:var(--ink)}
.deep-grid .row.ours .k{color:var(--green)}
.deep-grid .row.ours span:last-child{color:var(--ink)}
.deep-grid article.wide{grid-column:1/-1}

/* Fragen */
.questions{counter-reset:q;list-style:none;padding:0;margin:35px 0;max-width:960px}
.questions>li{counter-increment:q;padding:20px 0 20px 46px;border-bottom:1px solid var(--line);position:relative}
.questions>li::before{content:counter(q,decimal-leading-zero);position:absolute;left:0;top:23px;color:var(--blue);font:800 13px ui-monospace,SFMono-Regular,Menlo,monospace}
.questions .q{font-size:clamp(18px,2vw,22px);font-weight:700;letter-spacing:-.015em;line-height:1.35}
.questions .a{margin:8px 0 0;color:var(--muted);font-size:16px}
.questions .a b{color:var(--green)}
.question p.closing{color:var(--muted);font-size:18px}

/* Für Techniker */
.engineers details{max-width:960px;border:1px solid var(--line);border-radius:16px;padding:0 26px;margin-top:30px;background:#fff}
.engineers summary{cursor:pointer;font-weight:700;font-size:18px;padding:22px 0;list-style:none}
.engineers summary::-webkit-details-marker{display:none}
.engineers summary::after{content:"+";float:right;color:var(--blue);font-size:26px;line-height:1;transition:transform .2s}
.engineers details[open] summary::after{transform:rotate(45deg)}
.engineers details[open]{padding-bottom:22px}
.engineers details h3{margin:28px 0 8px;font-size:22px;letter-spacing:-.025em}
.engineers details p{margin:8px 0;color:var(--muted);font-size:16px}

@media(max-width:800px){
  .facts{grid-template-columns:1fr}
  .deep-grid .row{grid-template-columns:1fr;gap:2px}
  .questions>li{padding-left:38px}
}
/* Ueberschreibt Kachel- und Fragen-Regeln aus fskit.css */
.deep-grid .row span{font:inherit;font-size:15px;letter-spacing:0;color:inherit}
.deep-grid .row span.k{font-weight:700;color:var(--ink)}
.deep-grid .row.ours span.k{color:var(--green)}
.deep-grid .row.ours span:last-child{color:var(--ink)}
.question .questions>li{font-size:inherit;font-weight:400}
.questions .a{font-weight:400}
.questions .a b{font-weight:700}
@media(max-width:700px){
  .tablewrap table{min-width:0}
  .tablewrap thead{display:none}
  .tablewrap tr,.tablewrap td{display:block}
  .tablewrap td{border-bottom:0;padding:6px 18px}
  .tablewrap td:first-child{padding-top:16px;white-space:normal}
  .tablewrap td.n{padding-bottom:16px;border-bottom:1px solid var(--line)}
  .tablewrap tr:last-child td.n{border-bottom:0}
  .tablewrap td.f::before{content:"FSKit + DiskImages: ";font-weight:700}
  .tablewrap td.n::before{content:"iSCSI4NAS: ";font-weight:700}
}