/* ==============================================================
   werkzeuge.css – Ergänzung zu stil.css für die Werkzeugseiten
   Ablage: Wurzelverzeichnis. Wird zusätzlich zu stil.css geladen.
   ============================================================== */

/* Kopfbereich eines Werkzeugs */
.werk-kopf{background:var(--paper-2);border-bottom:1px solid var(--rule);
  padding-block:clamp(2.25rem,4.5vw,3.5rem)}
.werk-kopf h1{margin-bottom:.35rem}
.werk-kopf .lead{font-size:clamp(1.03rem,1.05vw,1.15rem);color:var(--text-mute);max-width:62ch}

/* Gesamtnote */
.ergebnis{display:flex;gap:2rem;align-items:center;flex-wrap:wrap;margin:0 0 2.5rem;
  padding:1.6rem;border:1px solid var(--rule);background:var(--paper-2)}
.note{width:118px;height:118px;border-radius:50%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;color:#fff;flex:none}
.note b{font-size:2.5rem;line-height:1;font-family:"Source Serif 4",Georgia,serif;font-weight:600}
.note span{font-size:.78rem;opacity:.85}
.note--gut{background:linear-gradient(135deg,#1FA971,#127C52)}
.note--mittel{background:linear-gradient(135deg,#1B8CF0,#0B63B8)}
.note--schlecht{background:linear-gradient(135deg,#D64545,#A32222)}

.klein{font-size:.86rem;color:var(--text-mute);line-height:1.55}
.mini{display:block;font-size:.78rem;color:var(--text-mute);font-weight:400;margin-top:.15rem;
  white-space:normal}
.warnung{color:#A32222}
.dark .warnung{color:#FF9B9B}

/* Teilnoten */
.teilnoten{display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.teilnote b{display:block;font-size:.95rem;margin-bottom:.4rem;color:var(--navy-deep)}
.teilnote span{display:block;font-size:.85rem;color:var(--text-mute);margin-top:.35rem}
.bar i.gut{background:#1FA971}
.bar i.mittel{background:#1B8CF0}
.bar i.schlecht{background:#D64545}

/* Hinweiskästen */
.hinweis{border-left:4px solid var(--rule-strong);background:var(--paper-2);
  padding:1rem 1.2rem;margin:1.6rem 0;max-width:var(--measure)}
.hinweis b{display:block;margin-bottom:.3rem;color:var(--navy-deep)}
.hinweis p{margin:0;color:var(--text-mute)}
.hinweis--rot{border-left-color:#D64545;background:#FDF2F2}
.hinweis--rot b{color:#A32222}
.hinweis--gelb{border-left-color:#E0A100;background:#FDF8EC}
.hinweis--gruen{border-left-color:#1FA971;background:#EFF9F4}
.tint .hinweis{background:#fff}

/* Prüftabellen */
table.matrix th[scope="row"]{color:var(--navy-deep);font-weight:600;min-width:11rem}
table.matrix td b{font-family:"Source Serif 4",Georgia,serif;font-size:1.15rem;font-weight:600;
  display:block;margin-bottom:.3rem;color:var(--navy-deep)}
table.matrix tr.summe th,table.matrix tr.summe td{border-top:2px solid var(--navy);background:var(--paper-2)}
table.matrix tr.summe td b{font-size:1.5rem}
tr.z-gut th[scope="row"]{border-left:3px solid #1FA971;padding-left:.7rem}
tr.z-mittel th[scope="row"]{border-left:3px solid #E0A100;padding-left:.7rem}
tr.z-schlecht th[scope="row"]{border-left:3px solid #D64545;padding-left:.7rem}
td.ja{color:#127C52}
td.nein{color:#A32222}
td.halb{color:#9A6E00}

/* Abschnitts-Röntgen */
.chunks{margin-top:1.8rem;border-top:1px solid var(--rule)}
.chunk{border-bottom:1px solid var(--rule);padding:0}
.chunk summary{display:flex;gap:.9rem;align-items:baseline;flex-wrap:wrap;
  padding:.95rem .2rem;cursor:pointer;list-style:none}
.chunk summary::-webkit-details-marker{display:none}
.chunk summary::after{content:"+";margin-left:auto;color:var(--mark);font-weight:700;font-size:1.2rem;line-height:1}
.chunk[open] summary::after{content:"\2013"}
.chunk-note{flex:none;width:2.3rem;height:2.3rem;border-radius:50%;display:inline-flex;
  align-items:center;justify-content:center;font-weight:700;font-size:.92rem;color:#fff}
.chunk--gut .chunk-note{background:#1FA971}
.chunk--mittel .chunk-note{background:#E0A100}
.chunk--schlecht .chunk-note{background:#D64545}
.chunk-titel{font-weight:600;color:var(--navy-deep);flex:1 1 14rem;min-width:0}
.chunk-urteil{font-size:.85rem;color:var(--text-mute);flex:none}
.chunk-inhalt{padding:0 0 1.2rem 3.2rem}
@media(max-width:34rem){.chunk-inhalt{padding-left:0}}
.chunk-text{background:var(--paper-2);border-left:3px solid var(--rule-strong);
  padding:.8rem 1rem;font-size:.94rem;color:var(--text);max-width:none;margin:0 0 .9rem}
.tint .chunk-text{background:#fff}
.pruefungen{list-style:none;margin:0;padding:0;font-size:.9rem;
  display:grid;gap:.35rem;grid-template-columns:repeat(auto-fit,minmax(18rem,1fr))}
.pruefungen li{position:relative;padding-left:1.4rem;color:var(--text-mute)}
.pruefungen li::before{position:absolute;left:0;top:0;font-weight:700}
.p-ok::before{content:"\2713";color:#1FA971}
.p-halb::before{content:"\2022";color:#E0A100}
.p-nein::before{content:"\2717";color:#D64545}

/* Dringlichkeitsmarken */
.tag{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.06em;
  padding:.16rem .5rem;border-radius:2px;color:#fff;vertical-align:.1em;margin-right:.45rem}
.tag--kritisch{background:#C0392B}
.tag--hoch{background:#0B63B8}
.tag--mittel{background:#54606F}
.tag--optional{background:#8C9CA9}

/* Eingabefelder */
.panel--hell{background:var(--paper-2)}
.panel--hell h2{margin-bottom:.9rem}
form.stapel{display:flex;flex-direction:column;gap:.35rem;margin-top:0}
form.stapel label{font-size:.9rem;font-weight:600;color:var(--navy-deep);margin-top:.7rem}
form.stapel input{padding:.7rem .8rem;border:1px solid var(--rule-strong);background:#fff;
  color:var(--text);font:inherit;border-radius:3px;width:100%}
form.stapel button{margin-top:1.1rem;align-self:flex-start}
.panel--hell small{display:block;margin-top:.9rem;color:var(--text-mute);font-size:.85rem;line-height:1.5}

/* Frage und Fragenliste */
.frage{font-style:italic;max-width:32ch}
ol.fragenliste{counter-reset:f;list-style:none;margin:1.2rem 0 1.8rem;padding:0;max-width:var(--measure)}
ol.fragenliste li{counter-increment:f;position:relative;padding-left:2rem;margin-bottom:.55rem;
  color:var(--text-mute)}
ol.fragenliste li::before{content:counter(f) ".";position:absolute;left:0;top:0;
  font-family:"Source Serif 4",Georgia,serif;font-weight:600;color:var(--mark)}

/* Vergleich */
.duell{display:grid;gap:1.3rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.duell-karte{border:1px solid var(--rule);padding:1.4rem;background:#fff;text-align:center}
.duell-karte--eigen{border-color:var(--mark);border-top:3px solid var(--mark)}
.duell-karte .note{margin:.6rem auto .9rem}
.duell-karte h3{margin:0 0 .2rem;word-break:break-word}
.platz{font-size:.8rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--text-mute)}

/* Formular im dunklen Abschnitt */
.formular{display:grid;gap:1rem;grid-template-columns:1fr;margin-top:1.5rem;max-width:36rem}
@media(min-width:34rem){.formular{grid-template-columns:1fr 1fr}.feld--voll{grid-column:1/-1}}
.formular .feld{display:flex;flex-direction:column;gap:.3rem;margin:0}
.formular label{font-size:.92rem;font-weight:600;color:#C8D3DC}
.formular input[type="text"],.formular input[type="email"],.formular input[type="tel"]{
  padding:.65rem .75rem;border:1px solid var(--rule-strong);border-radius:3px;font:inherit;
  background:#fff;color:var(--text)}
.formular .check{display:flex;gap:.6rem;align-items:flex-start;font-weight:400;font-size:.92rem}
.honig{position:absolute;left:-9999px}

/* Werkzeugübersicht */
.werkzeuge{display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fit,minmax(18rem,1fr));margin-top:2.2rem}
.werkzeug{border:1px solid var(--rule);border-top:3px solid var(--mark);padding:1.5rem 1.4rem;
  background:#fff;display:flex;flex-direction:column}
.werkzeug .nr{font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-mute);margin-bottom:.5rem;display:block}
.werkzeug h3{margin-bottom:.4rem}
.werkzeug p{color:var(--text-mute);font-size:.95rem}
.werkzeug ul{margin-bottom:1.3rem}
.werkzeug .btn{margin-top:auto;text-align:center}
.werkzeug--bald{border-top-color:var(--rule-strong);background:var(--paper-2)}
.werkzeug--bald .btn{pointer-events:none;opacity:.45}