/* ============================================================
   QM-Guru Wissen — Design-System „Prüfprotokoll"
   Tokens: Tinte, Papier, Petrol (Marke), Signal (Plaketten-Orange)
   Typo: Archivo (Display) · Source Serif 4 (Lesetext) · IBM Plex Mono (Normkapitel/Meta)
   ============================================================ */
:root{
  --tinte:#17313b;
  --tinte-60:#4d656e;
  --papier:#f5f8f8;
  --karte:#ffffff;
  --petrol:#1f4e5f;
  --petrol-tief:#143240;
  --signal:#e8650d;
  --gruen:#2e7d4f;
  --linie:#ccd8db;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --serif:'Source Serif 4',Georgia,serif;
  --sans:'Archivo',system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--papier);color:var(--tinte);
  font-family:var(--serif);font-size:1.075rem;line-height:1.72;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--petrol);text-decoration-color:var(--linie);text-underline-offset:3px}
a:hover{text-decoration-color:var(--signal)}
a:focus-visible,button:focus-visible{outline:3px solid var(--signal);outline-offset:2px;border-radius:2px}
::selection{background:#ffd9bd}

/* ---------- Kopf ---------- */
.kopf{background:var(--petrol-tief);color:#eaf1f3}
.kopf-innen{max-width:1080px;margin:0 auto;padding:.85rem 1.25rem;display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap}
.marke{font-family:var(--sans);font-weight:800;font-size:1.05rem;letter-spacing:.02em;color:#fff;text-decoration:none}
.marke b{color:#ffb37e;font-weight:800}
.kopf-pfad{font-family:var(--mono);font-size:.78rem;color:#9fb8c1}
.kopf-links{margin-left:auto;display:flex;gap:1.1rem;font-family:var(--sans);font-size:.88rem}
.kopf-links a{color:#d7e4e8;text-decoration:none}
.kopf-links a:hover{color:#ffb37e}

/* ---------- Hero (Hub) ---------- */
.hero{max-width:1080px;margin:0 auto;padding:3.2rem 1.25rem 2.2rem;display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:center}
.hero h1{font-family:var(--sans);font-weight:800;font-size:clamp(1.9rem,4.2vw,3rem);line-height:1.12;margin:0 0 .9rem;letter-spacing:-.015em}
.hero h1 em{font-style:normal;color:var(--petrol);border-bottom:5px solid var(--signal)}
.hero p{max-width:56ch;margin:.4rem 0;color:var(--tinte-60)}
.hero .fakten{font-family:var(--mono);font-size:.8rem;color:var(--petrol);margin-top:1rem;display:flex;gap:1.6rem;flex-wrap:wrap}
.hero .fakten span::before{content:"— ";color:var(--signal)}

/* ---------- Signatur: Prüfplakette ---------- */
.plakette{
  width:118px;height:118px;border-radius:50%;
  border:3px solid var(--signal);
  box-shadow:0 0 0 6px var(--papier),0 0 0 8px var(--linie);
  background:var(--karte);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  font-family:var(--mono);text-align:center;transform:rotate(-7deg);flex:none;
}
.plakette .p-titel{font-size:.6rem;letter-spacing:.24em;color:var(--signal);font-weight:600}
.plakette .p-datum{font-family:var(--sans);font-weight:800;font-size:1.15rem;color:var(--tinte);letter-spacing:.02em}
.plakette .p-sub{font-size:.58rem;color:var(--tinte-60);max-width:86px;line-height:1.3}
.plakette.klein{width:86px;height:86px;box-shadow:0 0 0 4px var(--karte),0 0 0 6px var(--linie)}
.plakette.klein .p-datum{font-size:.9rem}

/* ---------- Cluster-Raster (Hub) ---------- */
.raster{max-width:1080px;margin:0 auto;padding:0 1.25rem 3rem;display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:1rem}
.karte{
  background:var(--karte);border:1px solid var(--linie);border-radius:4px;
  padding:1.15rem 1.25rem 1.05rem;display:flex;flex-direction:column;gap:.55rem;
  text-decoration:none;color:inherit;position:relative;
  transition:border-color .15s,transform .15s;
}
.karte:hover{border-color:var(--petrol);transform:translateY(-2px)}
.karte .kap{font-family:var(--mono);font-size:.72rem;color:var(--signal);letter-spacing:.06em}
.karte h2{font-family:var(--sans);font-weight:700;font-size:1.08rem;line-height:1.3;margin:0;color:var(--petrol-tief)}
.karte p{margin:0;font-size:.92rem;line-height:1.55;color:var(--tinte-60)}
.karte .fuss{margin-top:auto;padding-top:.5rem;font-family:var(--mono);font-size:.72rem;color:var(--petrol);display:flex;justify-content:space-between}
.karte .status-live::before{content:"● ";color:var(--gruen)}
.karte .status-wp::before{content:"◍ ";color:var(--tinte-60)}
.abschnitt-titel{max-width:1080px;margin:0 auto;padding:1.2rem 1.25rem .8rem;font-family:var(--sans);font-weight:800;font-size:.95rem;letter-spacing:.12em;text-transform:uppercase;color:var(--tinte-60)}
.abschnitt-titel b{color:var(--signal)}

/* ---------- Antwortseite ---------- */
.artikel{max-width:1080px;margin:0 auto;padding:2.6rem 1.25rem 3rem}
.brotkrume{font-family:var(--mono);font-size:.78rem;color:var(--tinte-60);margin-bottom:1.4rem}
.brotkrume a{color:var(--tinte-60)}
.artikel h1{font-family:var(--sans);font-weight:800;font-size:clamp(1.7rem,3.6vw,2.5rem);line-height:1.15;letter-spacing:-.015em;max-width:26ch;margin:0 0 1.6rem}

/* Prüfprotokoll-Block = Kurzantwort */
.protokoll{
  background:var(--karte);border:2px solid var(--petrol);border-radius:4px;
  padding:1.4rem 1.6rem;display:grid;grid-template-columns:1fr auto;gap:1.4rem;align-items:center;
  margin-bottom:2.6rem;
}
.protokoll .p-label{font-family:var(--mono);font-size:.72rem;letter-spacing:.22em;color:var(--gruen);margin-bottom:.5rem}
.protokoll .p-label::before{content:"✓ "}
.protokoll p{margin:0;font-size:1.14rem;line-height:1.65}
.protokoll .p-meta{grid-column:1/-1;border-top:1px dashed var(--linie);padding-top:.7rem;font-family:var(--mono);font-size:.74rem;color:var(--tinte-60)}
.protokoll .p-meta a{color:var(--petrol)}

/* Zweispalter: Marginal (Normkapitel/TOC) + Lesespalte */
.lage{display:grid;grid-template-columns:180px minmax(0,68ch);gap:2.6rem}
.marginal{font-family:var(--mono);font-size:.78rem}
.marginal .m-block{position:sticky;top:1.2rem;display:flex;flex-direction:column;gap:.45rem;border-left:2px solid var(--linie);padding-left:.9rem}
.marginal .m-titel{color:var(--tinte-60);letter-spacing:.18em;font-size:.66rem;margin-bottom:.2rem}
.marginal a{text-decoration:none;color:var(--petrol);line-height:1.45}
.marginal a:hover{color:var(--signal)}
.marginal .m-kap{color:var(--signal);margin-right:.35rem}

.lese h2{font-family:var(--sans);font-weight:800;font-size:1.42rem;line-height:1.25;margin:2.6rem 0 .8rem;scroll-margin-top:1rem;position:relative}
.lese h2:first-child{margin-top:0}
.lese h2 .kap-tag{display:block;font-family:var(--mono);font-weight:400;font-size:.72rem;letter-spacing:.08em;color:var(--signal);margin-bottom:.3rem}
.lese p{margin:0 0 1.1rem}
.lese ul{margin:0 0 1.1rem;padding-left:1.2rem}
.lese li{margin-bottom:.45rem}
.lese table{width:100%;border-collapse:collapse;font-size:.92rem;font-family:var(--sans);margin:0 0 1.2rem}
.lese th{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;text-align:left;color:var(--tinte-60);border-bottom:2px solid var(--petrol);padding:.45rem .6rem .45rem 0}
.lese td{border-bottom:1px solid var(--linie);padding:.55rem .6rem .55rem 0;vertical-align:top}

/* Praxisstimmen (Fireflies) */
.praxis{background:var(--karte);border:1px solid var(--linie);border-left:4px solid var(--signal);border-radius:4px;padding:1rem 1.2rem;margin:0 0 1.1rem}
.praxis .frage{font-family:var(--sans);font-weight:700;font-size:.98rem;margin:0 0 .4rem}
.praxis .frage::before{content:"Frage aus der Beratung · ";font-family:var(--mono);font-weight:400;font-size:.68rem;letter-spacing:.1em;color:var(--signal);display:block;margin-bottom:.2rem}
.praxis .antwort{margin:0;font-size:.98rem}
.praxis .branche{font-family:var(--mono);font-size:.7rem;color:var(--tinte-60);margin-top:.5rem}

/* FAQ */
.faq details{background:var(--karte);border:1px solid var(--linie);border-radius:4px;margin-bottom:.55rem}
.faq summary{cursor:pointer;padding:.85rem 1.1rem;font-family:var(--sans);font-weight:700;font-size:1rem;list-style:none;position:relative;padding-right:2.4rem}
.faq summary::after{content:"+";position:absolute;right:1.1rem;top:.7rem;font-family:var(--mono);font-size:1.2rem;color:var(--signal)}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:0;padding:0 1.1rem 1rem;font-size:.98rem}

/* CTA + Autor */
.cta{background:var(--petrol);color:#eef4f5;border-radius:4px;padding:1.6rem 1.7rem;margin:2.6rem 0 0;display:flex;gap:1.4rem;align-items:center;flex-wrap:wrap}
.cta p{margin:0;font-family:var(--sans);font-size:1.05rem;font-weight:600;max-width:46ch;line-height:1.5}
.cta a.knopf{flex:none;background:var(--signal);color:#fff;font-family:var(--sans);font-weight:800;text-decoration:none;padding:.75rem 1.3rem;border-radius:3px}
.cta a.knopf:hover{background:#ff7a20}
.autor{display:flex;gap:1.1rem;align-items:center;border-top:1px solid var(--linie);margin-top:2.4rem;padding-top:1.4rem}
.autor .a-txt{font-size:.92rem;color:var(--tinte-60)}
.autor .a-txt b{color:var(--tinte);font-family:var(--sans)}

/* Fuß */
.fuss-seite{background:var(--petrol-tief);color:#9fb8c1;margin-top:3rem}
.fuss-innen{max-width:1080px;margin:0 auto;padding:1.4rem 1.25rem;font-family:var(--mono);font-size:.74rem;display:flex;gap:1.6rem;flex-wrap:wrap}
.fuss-innen a{color:#d7e4e8}

/* ---------- Mobil ---------- */
@media (max-width:820px){
  .hero{grid-template-columns:1fr;padding-top:2.2rem}
  .hero .plakette{display:none}
  .lage{grid-template-columns:1fr;gap:0}
  .marginal{display:none}
  .protokoll{grid-template-columns:1fr}
  .protokoll .plakette{transform:rotate(-7deg) scale(.85);margin:0 auto}
  body{font-size:1.02rem}
}

/* ---------- Prüfer-Duo: Foto + Plakette ---------- */
.pruefer{position:relative;flex:none;width:158px;height:122px}
.pruefer img{width:106px;height:106px;border-radius:50%;object-fit:cover;border:3px solid var(--petrol);background:#fff;display:block}
.pruefer .plakette{position:absolute;right:0;bottom:-8px;width:82px;height:82px;box-shadow:0 0 0 4px var(--karte),0 0 0 5px var(--linie)}
.pruefer .plakette .p-datum{font-size:.85rem}
.pruefer .plakette .p-titel{font-size:.54rem}
.pruefer .plakette .p-sub{font-size:.52rem;max-width:70px}
.pruefer.gross{width:210px;height:170px}
.pruefer.gross img{width:150px;height:150px}
.pruefer.gross .plakette{width:104px;height:104px}
.autor .a-foto{width:72px;height:72px;border-radius:50%;object-fit:cover;border:3px solid var(--petrol);flex:none}
@media (max-width:820px){
  .hero .pruefer{display:none}
  .protokoll .pruefer{margin:0 auto}
}