/* ============================================================
   KI-Werkstatt – Formulare und Prompt-Generator

   Theresa (31.08.): „das grün passt gar nicht … man sieht die
   buttons nicht … die breite ist null ausgenützt".
   Deshalb: Die KI-Seiten tragen den LOOK DES BUCHS - Schwarz,
   Gold, Creme wie das Cover von „Entspannt durchs Schuljahr".
   Alle Abweichungen von stil.css sind unter .ki gesammelt;
   die Goldfeder-Seiten bleiben unberührt hell.
   ============================================================ */

.ki{background:#0e0e0d;color:#ece7dc}
.ki .wrap{max-width:1180px}

/* Kompakter Kopfbereich, linksbündig, ohne grosses Signet. */
.ki .hero{text-align:left;padding:34px 0 4px}
.ki .hero h1{font-size:2.3rem}
.ki .hero p.unter{margin:8px 0 0;max-width:none;font-size:1.05rem;color:#b9b3a4}
.ki .regel{margin:22px 0 0}
.ki .gold-schimmer{
  color:#e8d9b0;
  background-image:linear-gradient(100deg,
    #e8d9b0 0%, #e8d9b0 34%,
    var(--gold) 46%, #fff3d6 50%, var(--gold) 54%,
    #e8d9b0 66%, #e8d9b0 100%);
}
.ki section{padding:30px 0}
.ki section.eng{padding-top:16px}
.ki .einstieg{max-width:none;text-align:left;margin:0}
.ki .einstieg .gross{font-size:1.08rem}
.ki .gross{color:#d9d2c0}
.ki .leise,.ki .einstieg .leise{color:#a59d8a}
.ki a{color:#e5c98a}
.ki a:hover{color:#f0dfae}
.ki strong{color:#f0e3c2}
.ki .abschnitt-titel{text-align:left}
.ki .abschnitt-titel::before{margin:0 0 12px}
.ki h2{color:#e8d9b0}
.ki h3{color:#e8d9b0}

/* Karten und Kacheln: dunkel mit Goldrand statt weiss. */
.ki .kachel,.ki .kategorie,.ki .werk-karte,.ki .kasten,.ki .tor-karte{
  background:linear-gradient(158deg,#181712 0%,#131210 100%);
  border-color:#2e2b22;color:#d9d2c0;
  box-shadow:0 1px 2px rgba(0,0,0,.5), 0 8px 18px rgba(0,0,0,.35);
}
.ki .werk-karte,.ki .kasten,.ki .tor-karte{border-left:3px solid var(--gold)}
.ki .kachel:hover,.ki .kategorie:hover{border-color:var(--gold)}
.ki .kachel p,.ki .kategorie p{color:#a59d8a}
.ki .kasten li{color:#c9c2b0}
.ki .kasten li::before{background:var(--gold)}
.ki .kacheln{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.ki .kachel-icon,.ki .kategorie-icon{background:#242013;border-color:#4a3f26;color:var(--gold)}
.ki .kategorie[aria-pressed="true"]{border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,162,75,.28)}
.ki .kategorie[aria-pressed="true"] .kategorie-icon{
  background:linear-gradient(160deg,#d8b25a,#b08a35);border-color:#b08a35;color:#141310}

/* Eingaben auf dunklem Grund. */
.ki .feld input[type="text"],.ki .feld input[type="password"],
.ki .feld select,.ki .feld textarea,.ki .ergebnis textarea{
  background:#0a0a09;border-color:#3a362a;color:#ece7dc}
.ki .feld label{color:#e8d9b0}
.ki .feld .erklaer,.ki .pflichthinweis{color:#8a8371}
.ki .tor-karte .hinweis{color:#8a8371}
.ki .tor-fehler{background:#2a1c12;border-color:#5a4030;color:#e6b48e}

/* Knoepfe: GOLD und nicht zu uebersehen. */
.ki .knopf,.ki .knopf-klein{
  background:linear-gradient(160deg,#d8b25a,#b08a35);
  color:#141310;border:1px solid #b08a35;font-weight:700;
  box-shadow:0 2px 6px rgba(0,0,0,.5), 0 10px 22px rgba(216,178,90,.16)}
.ki .knopf:hover,.ki .knopf-klein:hover{color:#141310;filter:brightness(1.09)}
.ki .knopf-nebenrolle{background:transparent;color:#e5c98a;border:1px solid #4a3f26;box-shadow:none}
.ki .knopf-nebenrolle:hover{color:#f0dfae;border-color:var(--gold)}
.ki .kopiert-meldung{color:#e5c98a}
.ki .tor .klein{color:#8a8371}

/* Tabelle und Bausteine. */
.ki .vergleich th{color:#e8d9b0;border-bottom-color:#4a3f26}
.ki .vergleich td{color:#c9c2b0;border-bottom-color:#2e2b22}
.ki .vergleich tr:nth-child(odd) td{background:#14130f}
.ki .vergleich td:first-child{color:#e8d9b0}
.ki .bausteine li::before{background:#242013;border-color:#4a3f26;color:var(--gold)}
.ki .bausteine strong{color:#e8d9b0}
.ki .bausteine p{color:#a59d8a}

.ki footer{border-top-color:#2e2b22;color:#8a8371}
.ki footer a{color:#a59d8a}
.ki footer a:hover{color:#e5c98a}

/* Passwortzeile: Feld und Knopf nebeneinander, sofort sichtbar. */
.tor-zeile{display:flex;gap:10px;flex-wrap:wrap}
.tor-zeile input{flex:1;min-width:200px}
.ki .tor-karte{max-width:560px;margin:0}

/* ---------- Icons auf Kacheln und Kategorien ----------
   Handgesetzte Linien-Icons (SVG) in einer weichen Goldflaeche -
   bewusst KEINE Emojis. */
.kachel-icon,.kategorie-icon{
  width:42px;height:42px;border-radius:12px;flex:0 0 auto;
  background:var(--gold-weich);border:1px solid var(--gold-linie);
  display:flex;align-items:center;justify-content:center;
  color:var(--gold-tief);margin-bottom:14px;
}
.kachel-icon svg,.kategorie-icon svg{
  width:22px;height:22px;stroke:currentColor;fill:none;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;display:block;
}
.kategorie .kategorie-icon{margin-bottom:11px;width:38px;height:38px;border-radius:11px}
.kategorie .kategorie-icon svg{width:20px;height:20px}
.kategorie[aria-pressed="true"] .kategorie-icon{
  background:linear-gradient(160deg,var(--wald-2),var(--wald-tief));
  border-color:var(--wald-tief);color:#f0e3c2;
}

/* ---------- Passwort-Tor ---------- */
.tor-karte{
  max-width:440px;margin:0 auto;background:var(--karte);
  border:1px solid var(--linie-2);border-left:3px solid var(--gold);
  border-radius:17px;padding:28px 30px;text-align:left;
  box-shadow:0 1px 2px rgba(38,61,51,.07), 0 6px 14px rgba(38,61,51,.09);
}
.tor-karte label{display:block;font-weight:600;color:var(--wald);margin-bottom:8px}
.tor-karte .hinweis{font-size:.88rem;color:var(--tinte-2);margin-top:14px}
.tor-fehler{
  display:none;margin-top:12px;font-size:.9rem;color:#8a4a2f;
  background:#f7ece2;border:1px solid #e4cdb4;border-radius:10px;padding:10px 14px;
}
.tor-fehler.zeigen{display:block}

/* ---------- Eingabefelder ---------- */
.feld input[type="text"],.feld input[type="password"],
.feld select,.feld textarea{
  width:100%;font:inherit;color:var(--tinte);
  background:#fdfdfc;border:1px solid var(--linie-2);border-radius:11px;
  padding:11px 14px;transition:border-color .15s, box-shadow .15s;
}
.feld textarea{min-height:96px;resize:vertical;line-height:1.55}
.feld input:focus,.feld select:focus,.feld textarea:focus{
  outline:none;border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(201,162,75,.18);
}
.feld{margin-bottom:18px}
.feld label{display:block;font-weight:600;font-size:.94rem;color:var(--wald);margin-bottom:6px}
.feld .erklaer{font-size:.84rem;color:var(--tinte-3);margin-top:5px}
.feld-reihe{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:600px){.feld-reihe{grid-template-columns:1fr}}

/* ---------- Kategorie-Auswahl ---------- */
.kategorien{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:14px;margin:24px 0 34px}
.kategorie{
  text-align:left;cursor:pointer;font:inherit;
  background:linear-gradient(158deg,#ffffff 0%,#f6f8f4 100%);
  color:var(--tinte);border:1px solid var(--linie-2);border-radius:15px;
  padding:18px 18px 16px;
  box-shadow:0 1px 2px rgba(38,61,51,.07), 0 5px 12px rgba(38,61,51,.08);
  transition:box-shadow .18s,border-color .18s,transform .18s;
}
.kategorie:hover{transform:translateY(-2px);border-color:var(--gold-linie)}
.kategorie[aria-pressed="true"]{
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(201,162,75,.20), 0 5px 12px rgba(38,61,51,.10);
}
.kategorie .strich{display:block;width:22px;height:2px;background:var(--gold);margin-bottom:10px}
.kategorie h3{font-family:var(--disp);font-weight:500;font-size:1.02rem;color:var(--wald);margin:0 0 4px}
.kategorie p{font-size:.84rem;color:var(--tinte-2);margin:0;line-height:1.5}

/* ---------- Formular- und Ergebnis-Karte ---------- */
.werk-karte{
  background:var(--karte);border:1px solid var(--linie-2);
  border-left:3px solid var(--gold);border-radius:17px;padding:26px 28px;
  box-shadow:0 1px 2px rgba(38,61,51,.07), 0 6px 14px rgba(38,61,51,.09);
  margin-bottom:26px;
}
.werk-karte h2{margin-bottom:18px}

.ergebnis textarea{
  width:100%;min-height:340px;resize:vertical;
  font-family:ui-monospace,"Cascadia Code",Consolas,monospace;
  font-size:.88rem;line-height:1.6;color:var(--tinte);
  background:#fbfaf6;border:1px solid var(--gold-linie);border-radius:12px;
  padding:16px 18px;
}
.ergebnis-knoepfe{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.knopf-klein{
  display:inline-block;cursor:pointer;font:inherit;font-weight:600;font-size:.92rem;
  background:linear-gradient(160deg,var(--wald-2),var(--wald-tief));color:#f0e3c2;
  border:1px solid var(--wald-tief);border-radius:11px;padding:11px 22px;
  text-decoration:none;transition:filter .15s,transform .15s;
}
.knopf-klein:hover{filter:brightness(1.1);transform:translateY(-1px);color:#fff3d6;text-decoration:none}
.knopf-nebenrolle{
  background:var(--gold-weich);color:var(--gold-tief);border:1px solid var(--gold-linie);
}
.knopf-nebenrolle:hover{color:var(--gold-tief)}
.kopiert-meldung{font-size:.88rem;color:var(--wald);align-self:center;opacity:0;transition:opacity .3s}
.kopiert-meldung.zeigen{opacity:1}

/* ---------- Bausteine-Erklaerung ---------- */
.bausteine{list-style:none;padding:0;margin:0;counter-reset:baustein}
.bausteine li{
  position:relative;padding:0 0 16px 46px;counter-increment:baustein;
}
.bausteine li::before{
  content:counter(baustein);position:absolute;left:0;top:-1px;
  width:30px;height:30px;border-radius:50%;
  background:var(--gold-weich);border:1px solid var(--gold-linie);
  color:var(--gold-tief);font-weight:600;font-size:.9rem;
  display:flex;align-items:center;justify-content:center;
}
.bausteine strong{display:block;color:var(--wald)}
.bausteine p{font-size:.92rem;color:var(--tinte-2);margin:2px 0 0}

/* ---------- Vergleichstabelle gratis/Abo ---------- */
.vergleich{width:100%;border-collapse:collapse;font-size:.93rem;margin-top:6px}
.vergleich th{
  text-align:left;font-family:var(--disp);font-weight:500;color:var(--wald);
  border-bottom:2px solid var(--gold-linie);padding:10px 12px;
}
.vergleich td{border-bottom:1px solid var(--linie);padding:11px 12px;color:var(--tinte-2);vertical-align:top}
.vergleich tr:nth-child(odd) td{background:#fbfcf8}
.vergleich td:first-child{color:var(--wald);font-weight:600;white-space:nowrap}
.tab-rolle{overflow-x:auto}

/* ---------- Kleinkram ---------- */
.zurueck-zeile{margin:8px 0 0;font-size:.9rem}
.pflichthinweis{font-size:.84rem;color:var(--tinte-3)}