/* KI-Werkstatt, kalebru-CI: Navy, kalebru-Blau, Rosé nur als Akzent. Schrift Work Sans, lokal. */
@font-face{ font-family:"Work Sans"; src:url("fonts/WorkSans-Variable.woff2") format("woff2"); font-weight:100 900; font-display:swap; }
:root{
  --navy:#10143a; --blau:#030a8c; --rosa:#f7baba; --rosa-soft:rgba(247,186,186,.18);
  --papier:#f4f4f5; --karte:#ffffff; --linie:#d9dce3; --tinte:#1c2233; --tinte2:#4f5668; --leise:#7a8194;
  --gut:#1d7a46; --gut-bg:#e8f6ed; --nein:#b3323c; --nein-bg:#fdecec; --info-bg:#eef0fb;
  --r:12px;
}
*{ box-sizing:border-box; }
html,body{ margin:0; }
body{ font-family:"Work Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; background:var(--papier); color:var(--tinte); font-size:16px; line-height:1.5; }
a{ color:var(--blau); }
button:not(:disabled), [role="button"]:not([aria-disabled="true"]), a[href], label[for], summary, .tab, .karte--klick{ cursor:pointer; }
button{ font:inherit; }
input, textarea, select{ font:inherit; color:inherit; }
select:not([multiple]):not([size]){
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%231c2233' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center; background-size:12px 8px;
  padding-right:44px; text-overflow:ellipsis;
}

/* Kopf */
.kopf{ background:var(--navy); color:#fff; }
.kopf__in{ max-width:1240px; margin:0 auto; padding:14px 20px; display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.kopf__logo{ height:22px; display:block; }
.kopf__titel{ font-weight:600; letter-spacing:.01em; }
.kopf__titel span{ color:var(--rosa); }
.kopf__rechts{ margin-left:auto; display:flex; gap:10px; align-items:center; font-size:14px; color:rgba(255,255,255,.75); }
.pille{ display:inline-flex; align-items:center; gap:6px; background:var(--rosa); color:var(--navy); border-radius:999px; padding:3px 12px; font-size:13px; font-weight:600; }
.pille--hell{ background:rgba(255,255,255,.12); color:#fff; }

.haupt{ max-width:1240px; margin:0 auto; padding:22px 20px 60px; }
.hinweis{ background:var(--info-bg); border:1px solid #c9cdee; border-radius:var(--r); padding:10px 14px; font-size:14px; color:var(--tinte2); }

/* Raster: links Aufgabe, rechts Werkzeuge */
.raster{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:22px; align-items:start; margin-top:16px; }
@media (max-width:980px){ .raster{ grid-template-columns:1fr; } }
.spalte{ display:flex; flex-direction:column; gap:14px; min-width:0; }

.karte{ background:var(--karte); border:1px solid var(--linie); border-radius:var(--r); padding:18px; }
.karte h2{ margin:0 0 10px; font-size:19px; letter-spacing:-.005em; }
.karte h3{ margin:14px 0 6px; font-size:15px; }
.karte p{ margin:6px 0; }
.leise{ color:var(--leise); font-size:14px; }

.ueb-wahl{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.ueb-wahl select{ flex:1 1 260px; border:1px solid var(--linie); border-radius:10px; padding:10px 14px; background-color:#fff; min-width:0; }

.aufgaben{ display:flex; flex-direction:column; gap:8px; margin-top:12px; }
.aufg{ text-align:left; width:100%; border:1px solid var(--linie); background:#fff; border-radius:10px; padding:10px 14px; display:flex; gap:12px; align-items:flex-start; color:var(--tinte); }
.aufg b{ display:inline-flex; width:26px; height:26px; flex:0 0 26px; border-radius:50%; align-items:center; justify-content:center; background:var(--info-bg); color:var(--blau); font-size:13px; }
.aufg:hover{ border-color:#aeb5e6; }
.aufg[aria-pressed="true"]{ border-color:var(--blau); background:rgba(3,10,140,.05); }
.aufg[aria-pressed="true"] b{ background:var(--blau); color:#fff; }

.karte--auftrag{ background:rgba(3,10,140,.04); }
.ergebnis{ background:var(--gut-bg); border:1px solid #bfe3cc; border-radius:10px; padding:8px 12px; font-size:15px; }
.material{ list-style:none; padding:0; margin:8px 0 0; display:flex; flex-direction:column; gap:6px; }
.material li{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.material code{ font-size:13px; background:var(--papier); padding:2px 6px; border-radius:6px; }
.knopf{ display:inline-flex; align-items:center; gap:8px; border:1px solid var(--blau); background:var(--blau); color:#fff; border-radius:999px; padding:8px 16px; font-weight:600; font-size:14px; text-decoration:none; }
.knopf:disabled{ opacity:.45; }
.knopf--zart{ background:#fff; color:var(--blau); }
.knopf--klein{ padding:4px 12px; font-size:13px; }
.knopf--rosa{ background:var(--rosa); border-color:var(--rosa); color:var(--navy); }
.prompt{ position:relative; background:var(--navy); color:#e9ebf7; border-radius:10px; padding:12px 14px; font-size:14px; white-space:pre-wrap; }
.prompt .knopf{ position:absolute; right:8px; top:8px; }
.vorschau{ margin-top:8px; max-height:340px; overflow:auto; background:var(--papier); border:1px solid var(--linie); border-radius:10px; padding:10px 12px; font-size:13px; white-space:pre-wrap; font-family:ui-monospace, SFMono-Regular, Menlo, monospace; }

/* Werkzeug-Reiter */
.tabs{ display:flex; gap:6px; flex-wrap:wrap; border-bottom:1px solid var(--linie); padding-bottom:10px; margin-bottom:12px; }
.tab{ border:1px solid var(--linie); background:#fff; color:var(--tinte); border-radius:999px; padding:7px 14px; font-size:14px; font-weight:500; }
.tab[aria-selected="true"]{ background:var(--navy); border-color:var(--navy); color:#fff; }
.feld{ display:flex; flex-direction:column; gap:4px; margin:8px 0; }
.feld label{ font-size:13px; font-weight:600; color:var(--tinte2); }
.feld select, .feld input, .feld textarea{ border:1px solid var(--linie); border-radius:10px; padding:10px 12px; background-color:#fff; width:100%; }
.feld textarea{ resize:vertical; min-height:70px; }
.zeile{ display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; }
.zeile > .feld{ flex:1 1 180px; }
details.sys{ border:1px solid var(--linie); border-radius:10px; padding:8px 12px; background:#fff; margin:8px 0; }
details.sys summary{ font-weight:600; font-size:14px; }

/* Chat */
.verlauf{ display:flex; flex-direction:column; gap:10px; max-height:520px; overflow:auto; padding:4px 2px; }
.msg{ border-radius:12px; padding:10px 14px; white-space:pre-wrap; word-wrap:break-word; font-size:15px; }
.msg--ich{ align-self:flex-end; background:var(--blau); color:#fff; max-width:86%; }
.msg--ki{ align-self:flex-start; background:#fff; border:1px solid var(--linie); max-width:100%; }
.msg--fehler{ background:var(--nein-bg); border:1px solid #f1c3c7; color:var(--nein); }
.werte{ display:flex; gap:6px; flex-wrap:wrap; margin-top:6px; }
.wert{ font-size:12px; background:var(--papier); border:1px solid var(--linie); border-radius:999px; padding:2px 9px; color:var(--tinte2); white-space:nowrap; }
.eingabe{ display:flex; gap:8px; margin-top:10px; align-items:flex-end; }
.eingabe textarea{ flex:1; border:1px solid var(--linie); border-radius:10px; padding:10px 12px; min-height:52px; resize:vertical; }

.vergleich{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:700px){ .vergleich{ grid-template-columns:1fr; } }
.vergleich .spalte-v{ display:flex; flex-direction:column; gap:8px; min-width:0; }
.antwort{ background:#fff; border:1px solid var(--linie); border-radius:12px; padding:12px 14px; min-height:120px; white-space:pre-wrap; font-size:15px; }
.fangfragen{ display:flex; gap:8px; flex-wrap:wrap; margin:6px 0; }

/* Kreativ */
.ergebnisse{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:12px; margin-top:12px; }
.erg{ background:#fff; border:1px solid var(--linie); border-radius:12px; overflow:hidden; display:flex; flex-direction:column; }
.erg img, .erg video{ width:100%; display:block; background:#000; }
.erg audio{ width:100%; display:block; }
.erg model-viewer{ width:100%; height:240px; background:#eef0f6; }
.erg__txt{ padding:8px 12px; font-size:13px; color:var(--tinte2); }
.erg__txt b{ color:var(--tinte); }
.laeuft{ display:flex; gap:10px; align-items:center; padding:10px 12px; background:var(--info-bg); border-radius:10px; font-size:14px; margin-top:8px; }
.kreisel{ width:16px; height:16px; border-radius:50%; border:2px solid #b8bfe8; border-top-color:var(--blau); animation:dreh 1s linear infinite; flex:0 0 16px; }
@keyframes dreh{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .kreisel{ animation:none; } }
.grenze{ font-size:13px; color:var(--leise); }

/* Start */
.start{ min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--navy); color:#fff; padding:24px; text-align:center; }
.start img{ height:28px; margin-bottom:28px; }
.start h1{ font-size:clamp(26px,4vw,40px); margin:0 0 10px; }
.start p{ color:rgba(255,255,255,.8); max-width:520px; margin:0 auto; }

/* Trainer */
.tabelle{ width:100%; border-collapse:collapse; font-size:14px; }
.tabelle th, .tabelle td{ border-bottom:1px solid var(--linie); padding:6px 8px; text-align:left; vertical-align:top; }
.qr-raster{ display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:12px; }
@media (max-width:900px){ .qr-raster{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
.qr{ text-align:center; background:#fff; border:1px solid var(--linie); border-radius:12px; padding:12px; }
.qr img{ width:100%; max-width:200px; }
.qr b{ display:block; font-size:22px; color:var(--navy); }
.trainerhinweis{ background:#fff3e0; border:1px solid #f3d3a4; border-radius:10px; padding:8px 12px; font-size:14px; margin-top:6px; }
.versteckt{ display:none !important; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

/* Tischkarten zum Drucken */
@media print{
  .kopf, .nicht-drucken{ display:none !important; }
  body{ background:#fff; }
  .qr-raster{ grid-template-columns:1fr 1fr; }
  .qr{ break-inside:avoid; border:1px solid #999; padding:24px; }
  .qr img{ max-width:260px; }
}