/* think.cuonztech Schulen: Zusatzkomponenten für eltern.html, so-testen-wir.html, mit-uns-arbeiten.html. Ergänzt schulen.css, ändert es nicht. */

/* Breiter Inhalt für Tabellenseiten */
.sp.breit{max-width:980px}

/* Drei Kärtchen (Eltern: Reden, Prüfen, Schützen) */
.drei{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;list-style:none;padding:0;margin:18px 0 8px;counter-reset:dr}
.drei li{counter-increment:dr;background:var(--white);border:1px solid var(--line);border-top:5px solid var(--lime);border-radius:var(--radius);padding:20px 20px 18px;box-shadow:var(--shadow-soft)}
.drei li::before{content:counter(dr);font-family:var(--mono);font-weight:800;color:var(--ink);background:var(--lime);width:34px;height:34px;border-radius:50%;display:grid;place-items:center;margin-bottom:12px}
.drei b{display:block;font-size:1.22rem;color:var(--ink);letter-spacing:-.02em;margin-bottom:6px}
.drei p{font-size:1rem!important;line-height:1.6!important;margin:0 0 10px!important;color:var(--text)!important}
.drei ul{margin:0;padding-left:20px;display:grid;gap:6px;font-size:.98rem;line-height:1.5}
.drei li li{counter-increment:none;background:none;border:0;border-radius:0;padding:0;box-shadow:none}
.drei li li::before{content:none}

/* Zwei Spalten: kann / kann nicht */
.zwei{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:16px 0 10px}
.zwei .box{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px;box-shadow:var(--shadow-soft)}
.zwei .box.nicht{background:var(--surface);border:1.5px dashed #CFC8E6;box-shadow:none}
.zwei h3{margin:0 0 10px!important;font-size:1.15rem}
.zwei ul{margin:0;padding-left:20px;display:grid;gap:8px;font-size:1rem;line-height:1.55}
.zwei li::marker{color:var(--violet)}

/* Hinweisfeld (ruhig, für Eltern und Grenzen) */
.hinweis-feld{background:var(--violet-soft);border-radius:var(--radius);padding:22px 26px;margin:20px 0}
.hinweis-feld h3{margin:0 0 8px!important;font-size:1.15rem}
.hinweis-feld p{margin:0 0 8px!important}
.hinweis-feld ul{margin:8px 0 0;padding-left:22px;display:grid;gap:6px;font-size:1.02rem;line-height:1.55}
.hinweis-feld li::marker{color:var(--violet-deep)}

/* Fragen und Antworten */
.faq{display:grid;gap:10px;margin:14px 0 8px}
.faq details{background:var(--white);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-soft);overflow:hidden}
.faq details[open]{border-color:var(--violet)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:14px;padding:14px 20px;min-height:56px;font-weight:700;color:var(--ink);font-size:1.04rem;line-height:1.4}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);font-size:1.3rem;line-height:1;color:var(--violet-deep);flex:0 0 22px;text-align:center}
.faq details[open] summary::after{content:"\2212"}
.faq .antwort{padding:2px 20px 18px}
.faq .antwort p{font-size:1.02rem!important;line-height:1.65!important;margin:0 0 10px!important}
.faq .antwort p:last-child{margin-bottom:0!important}

/* Tabellen (stapeln am Handy) */
.tab-wrap{margin:14px 0 8px}
table.tab{width:100%;border-collapse:separate;border-spacing:0;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;font-size:.97rem;line-height:1.5}
.tab th,.tab td{padding:12px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.tab thead th{background:var(--violet-soft);color:var(--violet-deep);font-family:var(--mono);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;border-bottom:1px solid #D5CEEC}
.tab tbody tr:last-child>*{border-bottom:0}
.tab tbody th{font-weight:700;color:var(--ink)}
.tab .nr{font-family:var(--mono);font-weight:800;color:var(--violet-deep)}
.tab .klein{display:block;font-size:.88rem;color:var(--text-soft);margin-top:4px}
.tab .badge{white-space:normal}
.tab-hinweis{font-size:.92rem;color:var(--text-soft);max-width:70ch;margin:8px 0 0}
.tab tr.cand>*{background:#FBFAFF}

/* Zahl gross */
.zahl{font-family:var(--mono);font-weight:800;color:var(--ink);font-size:1.15rem;white-space:nowrap}
.zahl small{font-size:.8rem;font-weight:600;color:var(--text-soft)}

/* Ehrliche Grenzen */
.grenzen-liste{list-style:none;margin:12px 0 8px;padding:0;display:grid;gap:10px}
.grenzen-liste li{display:flex;gap:12px;align-items:flex-start;background:var(--white);border:1px solid var(--line);border-radius:14px;padding:13px 16px;font-size:1.02rem;line-height:1.55}
.grenzen-liste svg{width:22px;height:22px;flex:0 0 22px;color:var(--violet-deep);margin-top:2px}

/* Pilot / Kontakt */
.pilot{background:var(--ink);color:#E4DEF5;border-radius:var(--radius);padding:30px 30px 26px;margin:22px 0;box-shadow:0 24px 60px rgba(90,47,214,.22)}
.pilot .mono-l{color:var(--lime)}
.pilot h2,.pilot h3{color:#fff;margin:6px 0 10px!important;font-size:clamp(1.4rem,3vw,1.9rem)}
.pilot p{color:#E4DEF5!important;font-size:1.05rem!important;margin:0 0 12px!important;max-width:60ch}
.pilot .kontakt{font-family:var(--mono);font-size:.84rem;color:#C9C2E3!important;margin-top:14px!important}
.pilot .btn-primary{background:var(--lime);color:var(--ink)}
.pilot .btn-primary:hover{background:#C9FF3D;color:var(--ink)}
.pilot a:focus-visible{outline-color:var(--lime)}
.pilot .txt-link{color:var(--lime)}

.karten{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:16px 0 8px;list-style:none;padding:0}
.karte{display:flex;flex-direction:column;gap:8px;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px;box-shadow:var(--shadow-soft)}
.karte h3{margin:0!important;font-size:1.2rem}
.karte p{font-size:1rem!important;line-height:1.6!important;margin:0!important;color:var(--text-soft)!important}
.karte .fuss{margin-top:auto;padding-top:8px}

.mail-zeile{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin:14px 0 6px}

/* Änderungen */
.aend{margin:12px 0 0;padding:0;list-style:none;display:grid;gap:8px}
.aend li{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;background:var(--white);border:1px solid var(--line);border-radius:14px;padding:12px 16px;font-size:1rem}
.aend time{font-family:var(--mono);font-weight:700;color:var(--violet-deep);font-size:.9rem}

@media(max-width:880px){
  .drei,.zwei,.karten{grid-template-columns:1fr}
}
@media(max-width:620px){
  .pilot{padding:24px 20px 22px}
  .aend li{grid-template-columns:1fr}
  .zwei .box{padding:20px}
  .tab-wrap table.tab,.tab-wrap .tab thead,.tab-wrap .tab tbody,.tab-wrap .tab tr,.tab-wrap .tab th,.tab-wrap .tab td{display:block}
  .tab thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .tab tbody tr{padding:14px 16px;border-bottom:1px solid var(--line)}
  .tab tbody tr:last-child{border-bottom:0}
  .tab th,.tab td{padding:3px 0;border:0}
  .tab td[data-label]::before{content:attr(data-label);display:block;font-family:var(--mono);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--violet-deep);margin-top:6px}
  .tab .klein.dat{display:inline;margin:0 0 0 8px}
  .tab tr.cand>*{background:none}
  .tab tr.cand{background:#FBFAFF}
}
@media print{
  .drei li,.zwei .box,.karte,.hinweis-feld,.faq details,.pilot,.grenzen-liste li,.aend li,.tab tbody tr{box-shadow:none!important;break-inside:avoid}
  .pilot{background:#fff!important;color:#000!important;border:1px solid #000}
  .pilot *{color:#000!important}
  .pilot .btn{display:none!important}
  .hinweis-feld{background:#fff;border:1px solid #000}
}