/* Knobelnest – Gestaltung */
:root{
  --bg:#EEF5FC; --card:#FFFFFF; --ink:#1B2A3D; --soft:#4A5B70; --line:#D3E1EF; --line2:#B4C8DE;
  --green:#2B6CB0; --green-d:#1D4F86; --btn:#4A8BD0; --btn-d:#3B7CC4; --pastel:#D6E8F8; --green-l:#E3F0FC; --amber:#A8E6CF; --focus:#1F8A65; --kid:#DCEEFC;
  --red:#9A3B1A; --red-ink:#7A2E12;
  --h:'Fredoka', 'Andika', system-ui, sans-serif;
  --b:'Andika', 'Trebuchet MS', system-ui, sans-serif;
  color-scheme: light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--b);font-size:17px;line-height:1.5}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--green)} a:hover{color:var(--green-d)}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
h1,h2,h3{font-family:var(--h);margin:0;line-height:1.15;font-weight:500;letter-spacing:.01em}
p{margin:0}
.boot{padding:40px;text-align:center;color:var(--soft)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.muted{color:var(--soft)}
.small{font-size:15px}
.hidden{display:none!important}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.stack{display:flex;flex-direction:column;gap:14px}
.grow{flex:1 1 auto;min-width:0}

/* Knöpfe und Felder */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 18px;border-radius:12px;
  border:1.5px solid var(--line2);background:#fff;font-weight:700;font-size:16px;cursor:pointer;text-decoration:none;color:var(--ink)}
.btn:hover{border-color:var(--green)}
.btn.primary{background:var(--btn);border-color:var(--btn);color:#fff}
.btn.primary:hover{background:var(--btn-d);border-color:var(--btn-d)}
.btn.amber{background:var(--amber);border-color:var(--amber);color:var(--ink)}
.btn.danger{border-color:var(--red);color:var(--red-ink)}
.btn.danger.armed{background:var(--red);color:#fff}
.btn.sm{min-height:40px;padding:0 12px;font-size:14px;border-radius:9px}
.btn.icon{width:44px;padding:0}
.btn[disabled]{opacity:.55;cursor:default}
.field{display:flex;flex-direction:column;gap:6px}
.field label,.lbl{font-weight:700;font-size:15px}
.input,select.input,textarea.input{min-height:48px;padding:10px 14px;border:1.5px solid var(--line2);border-radius:12px;background:#fff;width:100%}
textarea.input{resize:vertical;line-height:1.5}
.input:focus{outline:3px solid var(--focus);outline-offset:1px;border-color:var(--green)}
.err{color:var(--red-ink);font-weight:700;font-size:15px;min-height:1.2em}
.switch{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;width:100%;padding:8px 12px 8px 14px;border-radius:12px;
  border:1.5px solid var(--line);background:#F3F7FB;color:var(--soft);cursor:pointer;text-align:left;font-weight:700;font-size:15px}
.switch[aria-checked="true"]{background:var(--green-l);border-color:var(--green);color:var(--green-d)}
.track{flex:none;width:48px;height:28px;border-radius:999px;background:#9AAFC6;position:relative}
.track::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:left .15s}
[aria-checked="true"] .track{background:var(--btn)}
[aria-checked="true"] .track::after{left:23px}
.pill{display:inline-block;padding:3px 10px;border-radius:999px;font-size:13px;font-weight:700}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{min-height:44px;padding:0 18px;border-radius:999px;border:1.5px solid var(--line2);background:#fff;font-weight:700;cursor:pointer}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}

/* Karten */
.card{background:var(--card);border:1.5px solid var(--line);border-radius:18px;padding:24px}
.card h2{font-size:24px}

/* Login Lehrpersonen */
.login{min-height:100vh;display:flex;flex-wrap:wrap}
.login-hero{flex:1 1 420px;background:var(--pastel);color:var(--ink);padding:56px 48px;display:flex;flex-direction:column;justify-content:space-between;gap:40px}
.login-hero h1{font-size:clamp(36px,6vw,52px);line-height:1.02}
.login-hero p{color:#3D5A7A;font-size:19px;max-width:30em}
.login-form{flex:1 1 440px;display:flex;align-items:center;justify-content:center;padding:48px 24px}
.login-form form{width:100%;max-width:420px;display:flex;flex-direction:column;gap:20px}
.logo{display:flex;align-items:center;gap:12px;font-family:var(--h);font-size:22px;color:inherit;text-decoration:none;font-weight:500;letter-spacing:.01em}
.kidlink{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:16px;background:#3D7CC0;color:#fff;text-decoration:none;font-weight:700;font-size:18px}
.kidlink:hover{color:#fff;background:#4787CC}

/* Kopfzeile Lehrpersonen */
.top{background:#fff;border-bottom:1.5px solid var(--line);position:sticky;top:0;z-index:5}
.top-in{max-width:1200px;margin:0 auto;padding:12px 24px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.tabs{max-width:1200px;margin:0 auto;padding:0 24px;display:flex;gap:4px;overflow-x:auto}
.tab{min-height:48px;padding:0 16px;border:0;border-bottom:3px solid transparent;background:none;font-weight:700;color:var(--soft);cursor:pointer;white-space:nowrap}
.tab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--green)}
.main{max-width:1200px;margin:0 auto;padding:32px 24px 72px;display:flex;flex-direction:column;gap:28px}
.h1{font-size:clamp(30px,4vw,42px)}
.avatar{width:36px;height:36px;border-radius:50%;background:#DCEBFA;color:var(--green);display:grid;place-items:center;font-weight:700;font-size:15px;flex:none}

/* Klassen-Banner */
.banner{background:var(--pastel);color:var(--ink);border:2px solid #A9C9EC;border-radius:20px;padding:24px 28px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px}
.banner h2{font-size:24px}
.banner p{color:#3D5A7A}
.codebox{background:#fff;color:var(--ink);border-radius:14px;padding:10px 22px;text-align:center}
.codebox small{display:block;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--soft)}
.codebox b{font-family:var(--h);font-size:32px;letter-spacing:.06em;font-weight:500;letter-spacing:.01em}

/* Fächer-Kacheln (Lehrperson) */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.tile{display:flex;align-items:center;gap:14px;min-height:80px;padding:12px 16px;border-radius:16px;border:1.5px solid var(--line);background:#fff;cursor:pointer;text-align:left}
.tile[aria-pressed="true"]{border:2.5px solid var(--green);box-shadow:0 4px 0 var(--green)}
.tile .sw{width:48px;height:48px;border-radius:14px;flex:none;display:grid;place-items:center;font-family:var(--h);font-size:20px;font-weight:500;letter-spacing:.01em}
.tile b{display:block;font-family:var(--h);font-size:19px;font-weight:500;letter-spacing:.01em}
.tile span span{font-size:14px;color:var(--soft)}

/* Spiel-Karten */
.gtitle{font-family:var(--h);font-size:30px;margin-top:6px;font-weight:500;letter-spacing:.01em}
.gtoggle{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;width:100%;padding:8px 4px;border:0;border-bottom:1.5px solid var(--line);background:none;font:inherit;color:inherit;cursor:pointer;text-align:left}
.gtoggle .chev{display:inline-block;width:24px;font-size:30px;line-height:1;transition:transform .15s;color:var(--green)}
.gtoggle[aria-expanded="true"] .chev{transform:rotate(90deg)}
.gtitle small{font-family:var(--b);font-size:15px;font-weight:400;color:var(--soft)}
.games{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px}
.game{display:flex;flex-direction:column;background:#fff;border:1.5px solid var(--line);border-radius:18px;overflow:hidden}
.game-top{height:52px;position:relative;display:grid;place-items:center;font-family:var(--h);font-size:22px;color:rgba(27,42,61,.7);font-weight:500;letter-spacing:.01em}
.game-top .pill{position:absolute;top:50%;left:12px;transform:translateY(-50%);background:var(--ink);color:#fff}
.game-body{flex:1;padding:18px 18px 20px;display:flex;flex-direction:column;gap:10px}
.game-body h3{font-size:21px}
.game-body p{font-size:15px;color:var(--soft)}
.game-foot{margin-top:auto;padding-top:8px;display:flex;flex-direction:column;gap:10px}
.empty{padding:36px;border:2px dashed var(--line2);border-radius:18px;text-align:center;color:var(--soft)}

/* Listen und Tabellen */
.list{list-style:none;margin:0;padding:0;background:#fff;border:1.5px solid var(--line);border-radius:18px;overflow:hidden}
.list li{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:12px 18px;border-bottom:1px solid #E2EBF5}
.list li:last-child{border-bottom:0}
.list li.fresh{background:#F2F8FE}
.pwrow{display:flex;gap:6px}
.pwrow span{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;border:1.5px solid var(--line2)}
.tablewrap{overflow-x:auto;background:#fff;border:1.5px solid var(--line);border-radius:18px}
table{width:100%;border-collapse:collapse;font-size:15px}
th,td{padding:12px 16px;border-bottom:1px solid #E2EBF5;text-align:left;vertical-align:middle}
thead th{font-size:13px;color:var(--soft);border-bottom:1.5px solid var(--line);white-space:nowrap}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0}
.bar{height:10px;border-radius:999px;background:#E2EBF5;overflow:hidden;min-width:110px}
.bar i{display:block;height:100%;background:var(--green)}
.cols2{display:flex;flex-wrap:wrap;gap:28px;align-items:flex-start}
.cols2>.wide{flex:999 1 560px;min-width:0;display:flex;flex-direction:column;gap:20px}
.cols2>.side{flex:1 1 300px;min-width:0;display:flex;flex-direction:column;gap:18px}
.note{background:#FFF4C2;border:1.5px solid #E2C043;border-radius:16px;padding:16px 18px;color:#4A3700;font-size:15px}
.note b{color:#614700}

/* Farbwahl */
.swatches{display:flex;flex-wrap:wrap;gap:8px}
.swatch{width:36px;height:36px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--line2);cursor:pointer}
.swatch[aria-pressed="true"]{border-width:3px;box-shadow:0 0 0 3px var(--ink)}
.subj{display:flex;flex-direction:column;gap:10px;padding:10px 12px;border-radius:14px;border:1.5px solid var(--line);background:#fff}
.subj.off{background:#F5F9FD}
.subj-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.check{flex:none;width:32px;height:32px;border-radius:8px;border:2px solid #9AAFC6;background:#fff;display:grid;place-items:center;cursor:pointer}
.check[aria-checked="true"]{background:var(--btn);border-color:var(--btn)}
.colorbtn{flex:none;width:36px;height:36px;border-radius:10px;border:2px solid #fff;box-shadow:0 0 0 1.5px #9AAFC6;cursor:pointer}

/* Overlays */
.overlay{position:fixed;inset:0;z-index:50;background:rgba(24,35,31,.55);display:grid;place-items:center;padding:16px}
.dialog{background:#fff;border-radius:20px;padding:28px;width:min(560px,100%);max-height:calc(100vh - 32px);overflow:auto;display:flex;flex-direction:column;gap:18px}
.bigcode{background:var(--pastel);color:var(--ink);border:3px solid #A9C9EC;border-radius:24px;padding:48px 40px;text-align:center;display:flex;flex-direction:column;gap:18px;max-width:900px}
.bigcode b{font-family:var(--h);font-size:clamp(34px,7vw,88px);letter-spacing:.06em;line-height:1;white-space:nowrap;font-weight:500;letter-spacing:.01em}
.bigcode p{font-size:clamp(18px,2.6vw,28px);color:#3D5A7A}
.bigcode-row{display:flex;flex-direction:column;align-items:center;gap:22px}
.qrbox{background:#fff;border-radius:18px;padding:14px;width:clamp(200px,30vw,340px);aspect-ratio:1;display:grid;place-items:center;color:var(--soft);font-size:15px}
.qrbox svg{display:block;width:100%;height:auto}
.player{position:fixed;inset:0;z-index:60;background:#fff;display:flex;flex-direction:column}
.player-bar{display:flex;align-items:center;gap:12px;padding:8px 12px;background:var(--ink);color:#fff}
.player-bar b{font-family:var(--h);font-size:18px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500;letter-spacing:.01em}
.player-bar .btn{min-height:42px;background:#fff}
.player iframe{flex:1;width:100%;border:0;background:#fff}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);z-index:90;background:var(--ink);color:#fff;padding:12px 18px;border-radius:12px;font-weight:700;
  opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;max-width:calc(100% - 32px);text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ===== Kinder ===== */
.kid{min-height:100vh;background:var(--kid);padding:28px 20px 56px}
.kid-in{max-width:1100px;margin:0 auto;display:flex;flex-direction:column;gap:26px}
.kid-top{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.kid-btn{min-height:50px;padding:0 18px;border-radius:12px;border:2px solid var(--ink);background:transparent;font-weight:700;font-size:17px;cursor:pointer}
.kid-card{max-width:600px;width:100%;margin:24px auto 0;background:#fff;border:3px solid var(--ink);border-radius:28px;box-shadow:0 8px 0 var(--ink);padding:40px 32px;display:flex;flex-direction:column;gap:22px;text-align:center}
.kid h1{font-size:clamp(34px,6vw,46px)}
.kid .lead{font-size:21px;line-height:1.45}
.kid-input{height:76px;border:3px solid var(--ink);border-radius:18px;text-align:center;font-family:var(--h);font-size:34px;letter-spacing:.1em;text-transform:uppercase;background:#FAFCFF;width:100%;font-weight:500;letter-spacing:.01em}
.kid-go{height:66px;border-radius:18px;border:0;background:var(--btn);color:#fff;font-family:var(--h);font-size:25px;cursor:pointer;width:100%;font-weight:500;letter-spacing:.01em}
.kid-go[disabled]{background:#C9CFCC;color:var(--soft);cursor:default}
.kid-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.kid-name{display:flex;align-items:center;gap:12px;min-height:76px;padding:12px 14px;border-radius:18px;border:3px solid var(--ink);background:#fff;box-shadow:0 5px 0 var(--ink);cursor:pointer;text-align:left}
.kid-name .ini{flex:none;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-family:var(--h);font-size:22px;font-weight:500;letter-spacing:.01em}
.kid-name b{font-family:var(--h);font-size:22px;line-height:1.15;min-width:0;overflow-wrap:anywhere;font-weight:500;letter-spacing:.01em}
.slots{display:flex;justify-content:center;gap:14px}
.slot{width:64px;height:64px;border-radius:16px;border:3px dashed var(--ink);background:#FAFCFF;display:grid;place-items:center}
.slot.on{background:var(--btn);border-style:solid}
.syms{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.sym{height:100px;border-radius:20px;border:3px solid var(--ink);box-shadow:0 5px 0 var(--ink);display:grid;place-items:center;cursor:pointer}
.sym[disabled]{cursor:default;opacity:.6}
.big-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:26px}
.big-tile{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:26px 24px;min-height:200px;border-radius:26px;border:3px solid var(--ink);box-shadow:0 8px 0 var(--ink);cursor:pointer;text-align:left;background:#fff;color:var(--ink);text-decoration:none}
.big-tile b{font-family:var(--h);font-size:34px;line-height:1.05;font-weight:500;letter-spacing:.01em}
.big-tile span{font-size:19px;font-weight:400}
.big-tile .ic{width:70px;height:70px;border-radius:20px;background:#fff;border:3px solid var(--ink);display:grid;place-items:center;font-family:var(--h);font-size:30px;font-weight:500;letter-spacing:.01em}
.kbar{width:100%;height:16px;border-radius:999px;background:#E3ECF5;border:2px solid var(--ink);overflow:hidden}
.kbar i{display:block;height:100%;background:var(--green)}
.tafel-tile{display:flex;align-items:center;gap:18px;padding:20px 24px;border-radius:22px;border:3px solid var(--ink);background:#F3DDB8;box-shadow:0 7px 0 var(--ink);color:var(--ink);text-decoration:none;cursor:pointer;text-align:left;width:100%}
.tafel-tile b{display:block;font-family:var(--h);font-size:28px;font-weight:500;letter-spacing:.01em}
.tafel-tile span span{font-size:18px;color:#6A4E22}

/* ===== Tafel ===== */
.board{height:100vh;height:100dvh;background:#E8F2FC;color:var(--ink);padding:14px 18px;overflow:hidden}
.board-in{height:100%;max-width:1500px;margin:0 auto;display:flex;flex-direction:column;gap:10px}
.board-head{flex:none;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 16px;color:var(--ink)}
.board-head .kick{font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#2F7A5A}
.board-head h1{font-size:clamp(24px,3.4vw,38px)}
.board-head p{color:#3D5A7A;font-size:16px;margin:0}
.board-btn{min-height:44px;padding:0 16px;border-radius:10px;border:2px solid #9DB8D8;background:#fff;color:var(--ink);font-weight:700;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.mine{flex:none;display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:8px 14px;border-radius:14px;background:#D6E8F8;border:2px solid #A9C9EC;color:var(--ink);font-size:17px}
.mine .help{flex-basis:100%;display:flex;gap:8px;align-items:center;color:#1F3F6B}
.matrix{flex:1;min-height:0;display:grid;grid-template-columns:minmax(120px,.75fr) repeat(3,minmax(0,1fr));grid-template-rows:auto repeat(var(--rows,1),minmax(0,1fr));gap:8px}
.mx-h{display:flex;align-items:center;gap:10px;padding:6px 12px;border-radius:12px;border:2px solid;font-family:var(--h);font-weight:500;font-size:clamp(15px,1.6vw,20px)}
.mx-h .dot{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center}
.mx-h.blank{border:0;background:none}
.mx-subj{display:flex;align-items:center;gap:10px;padding:6px 12px;border-radius:12px;background:#fff;border:2px solid #C9DCF0;font-family:var(--h);font-weight:500;font-size:var(--fs-s,22px);line-height:1.1;min-height:0;overflow:hidden}
.mx-subj i{flex:none;width:10px;align-self:stretch;border-radius:5px}
.mx-subj small{font-family:var(--b);font-size:.6em;color:var(--soft);display:block}
.cell{position:relative;display:flex;flex-wrap:wrap;align-content:flex-start;gap:.3em;padding:6px;border-radius:12px;border:2px solid;min-height:0;overflow:hidden;text-align:left;font:inherit;color:inherit}
button.cell{cursor:pointer}
button.cell:hover{filter:brightness(.97)}
.cell .put{position:absolute;right:6px;bottom:6px;font-size:13px !important;font-weight:700;padding:2px 10px;border-radius:999px;border:2px dashed currentColor;background:rgba(255,255,255,.7)}
.tag{display:inline-flex;align-items:center;gap:8px;padding:5px 12px 5px 5px;border-radius:999px;background:#fff;font-weight:700;font-size:17px;border:1.5px solid;white-space:nowrap}
.tag .ini{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:13px;color:var(--ink)}
.tag.me{border:3px solid var(--ink);box-shadow:0 2px 0 var(--ink)}
.subject{background:#fff;border-radius:16px;padding:16px}
.columns{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.column{display:flex;flex-direction:column;gap:12px;min-height:130px;padding:14px;border-radius:16px;border:2px solid}
.column-h{display:flex;align-items:center;gap:10px;font-family:var(--h);font-size:20px;font-weight:500}
.column-h .dot{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center}
.cell{font-size:var(--fs,18px)}
.cell .tag{font-size:1em;padding:.12em .55em .12em .15em;gap:.3em;border-width:1px}
.cell .tag .ini{width:1.5em;height:1.5em;font-size:.7em}
.cell.here{box-shadow:inset 0 0 0 3px currentColor}
@media (max-width:700px){.matrix{grid-template-columns:90px repeat(3,minmax(0,1fr))}.mx-h span.lbl{display:none}}
.c-helfen{background:#E2EAF5;border-color:#A3BADB;color:#1F3F6B}
.c-helfen .dot{background:#2F5E9E}
.c-klar{background:#E3F1E0;border-color:#9CCB98;color:#1C4D2F}
.c-klar .dot{background:#2E7D4F}
.c-frage{background:#FFF4C2;border-color:#E2C043;color:#614700}
.c-frage .dot{background:#8F6A00}

/* Druck: Passwort-Kärtchen */
#print{display:none}
@media print{
  body{background:#fff}
  #app,#toast{display:none!important}
  #print{display:block}
  .pcards{display:grid;grid-template-columns:repeat(2,1fr);gap:8mm}
  .pcard{border:1.5px dashed #888;border-radius:6mm;padding:6mm;break-inside:avoid;font-family:var(--b)}
  .pcard h3{font-size:22pt;margin-bottom:3mm}
  .pcard .pw{display:flex;gap:4mm;margin:3mm 0}
  .pcard .pw span{width:20mm;height:20mm;border:1.5px solid #555;border-radius:4mm;display:grid;place-items:center}
  .pcard p{font-size:11pt}
}

@media (max-width:640px){
  body{font-size:16px}
  .main{padding:24px 16px 56px}
  .top-in,.tabs{padding-left:16px;padding-right:16px}
  .login-hero{padding:36px 24px}
  .card{padding:18px}
  .kid-card{padding:28px 18px}
  .sym{height:84px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* Sternenleiste im Spiel */
.starbar{display:flex;align-items:center;flex-wrap:wrap;gap:6px 16px;padding:8px 16px;background:#DCEEFC;border-bottom:3px solid var(--ink);font-size:16px;color:var(--ink)}
.starbar .sb-name{font-family:var(--h);font-weight:500;letter-spacing:.01em}
.starbar .sb-info b{font-weight:700}
.starbar .sb-total{margin-left:auto;color:#3D5168;font-size:15px}
.sb-dots{display:inline-flex;gap:4px;align-items:center}
.sb-dots .dot{width:13px;height:13px;border-radius:50%;background:#fff;border:2px solid #8FA6BF}
.sb-dots .dot.ok{background:#2E9E6E;border-color:#2E9E6E}
.sb-dots .dot.no{background:#E07A5F;border-color:#E07A5F}
.st{color:#F2B705;font-size:1.15em}
.st.off{color:#C7D3E0}
.sb-stars,.sb-best{letter-spacing:2px;white-space:nowrap}
.pmodal{position:absolute;inset:0;z-index:5;display:grid;place-items:center;background:rgba(27,42,61,.45);padding:16px}
.pmodal-box{background:#fff;border:3px solid var(--ink);border-radius:24px;padding:26px 28px;max-width:420px;width:100%;text-align:center;display:flex;flex-direction:column;gap:10px;box-shadow:0 8px 0 rgba(27,42,61,.25)}
.pmodal-box h2{font-family:var(--h);font-size:30px;margin:0;font-weight:500;letter-spacing:.01em}
.pmodal-box p{margin:0;font-size:19px}
.pmodal-box .pm-lv{font-weight:700;color:#3D5168}
.pm-stars{font-size:54px;letter-spacing:6px;line-height:1.1}
.pm-stars .st.new{display:inline-block;animation:kn-pop .5s cubic-bezier(.3,1.6,.5,1) both}
@keyframes kn-pop{from{transform:scale(0) rotate(-30deg)}to{transform:scale(1) rotate(0)}}
@media (prefers-reduced-motion:reduce){.pm-stars .st.new{animation:none}}
.player .pmodal{top:56px}
.kaward{font-size:18px;font-weight:700}

/* Reihenfolge ändern */
.ghead{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ghead .btn[aria-pressed="true"]{background:var(--btn);color:#fff}
.sortbox{display:flex;flex-direction:column;gap:12px;background:#F5F9FD;border:2px dashed #8FA6BF;border-radius:18px;padding:16px}
.sorter{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.srow{display:flex;align-items:center;gap:12px;background:#fff;border:2px solid var(--ink);border-radius:14px;padding:8px 10px;min-height:56px}
.srow b{flex:1;min-width:0;font-size:17px}
.srow .snum{width:28px;text-align:right;color:#3D5168;font-weight:700}
.srow .grip{touch-action:none;cursor:grab;font-size:26px;line-height:1;padding:8px 10px;border-radius:10px;background:#E3ECF5;user-select:none;-webkit-user-select:none}
.srow.dragging{box-shadow:0 8px 20px rgba(27,42,61,.25);border-color:var(--green);position:relative;z-index:2}
.srow.dragging .grip{cursor:grabbing;background:#A8E6CF}
.sbtns{display:flex;gap:6px}
.sbtns .btn{min-width:44px;justify-content:center}
.starbar[hidden]{display:none}

/* Sternenleiste sitzt in der dunklen Spielleiste (spart Platz auf dem iPad) */
.player-bar{flex-wrap:wrap;row-gap:4px}
.player-bar > b{flex:0 1 auto;max-width:30%}
.player-bar .starbar b{font:inherit;font-weight:700;max-width:none;flex:none;white-space:normal}
.player-bar .starbar{flex:1 1 0;min-width:0;background:transparent;border:0;color:#fff;padding:0 6px;font-size:15px;gap:4px 14px}
.player-bar .starbar[hidden]{display:none}
.player-bar .starbar .sb-name{font-family:var(--b)}
.player-bar .starbar .sb-total{color:#C9D6E6;font-size:14px}
.player-bar .sb-dots .dot:not(.ok):not(.no){background:transparent;border-color:#8FA6BF}
.player-bar .st.off{color:#4A6383}
.player-bar .btn[data-a="playerFull"]{margin-left:auto}
@media (max-width:1300px){.player-bar .starbar .sb-total{display:none}}
@media (max-width:820px){.player-bar .starbar .sb-dots{display:none}}

/* Schriften: Andika für Text, Fredoka für Titel */
button,input,select,textarea{font-family:inherit}
b,strong{font-weight:700}
.big-tile b,.tile b,.kid-name b,.tafel-tile b,.player-bar>b{font-weight:500}
.kid-go:hover{background:var(--btn-d)}
.big-tile.extra{border-style:dashed;box-shadow:0 8px 0 #9DB4CF}
.zusatz{font-family:var(--b);font-weight:700;font-size:15px;background:#FFF3C4;color:#7A5B00;border:2px solid #E2B100;border-radius:999px;padding:2px 10px;white-space:nowrap}
.pill.zusatz-t{background:#FFF3C4;color:#7A5B00}

/* Fortschritt: Themen auf- und zuklappen */
.ptable thead th{vertical-align:bottom}
.ptable .pgrp{background:#F1F7FD;border-left:2px solid #D3E3F3;padding:6px 10px}
.ptable .pgrp .gtoggle{font-size:15px;font-family:var(--h);color:var(--ink);text-align:left;white-space:nowrap}
.ptable .pgrp .gtoggle small{font-family:var(--b);font-size:12px;color:var(--soft)}
.ptable .pgame{font-size:13px;white-space:normal;min-width:120px;border-left:2px solid #E2EBF5}
.ptable td.psum{min-width:120px;border-left:2px solid #E2EBF5;background:#FAFCFE}
.ptable .pgrp .gtoggle{border-bottom:0;flex-wrap:nowrap;align-items:center;padding:2px 0;gap:6px}
.ptable .pgrp .gtoggle .chev{font-size:24px;width:18px}
.ptable .pfach{border-left:2px solid #C9DCF0;padding:6px 10px}
.ptable .pfach .gtoggle{border-bottom:0;flex-wrap:nowrap;align-items:center;padding:2px 0;gap:6px;font-family:var(--h);font-size:17px;color:var(--ink);white-space:nowrap}
.ptable .pfach .gtoggle .chev{font-size:24px;width:18px;color:var(--ink)}

/* ---------- Klassen-Sprint ---------- */
.spr{height:100vh;height:100dvh;display:flex;flex-direction:column;gap:12px;padding:14px 20px;background:#E8F2FC;overflow:hidden}
.spr-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.spr-head .kick{font-weight:700;color:var(--soft);font-size:15px}
.spr-head h1{margin:0;font-size:34px;line-height:1.1}
.spr-head .row{display:flex;gap:10px;flex-wrap:wrap}
.spr-setup{max-width:820px;width:100%;margin:20px auto 0;gap:22px}
.spr-setup .h3{margin:0 0 8px;font-weight:700}
.spr-info{background:var(--pastel);border:2px solid #A9C9EC;border-radius:14px;padding:10px 16px;font-size:20px}
.lanes{flex:1;min-height:0;display:grid;grid-template-rows:repeat(var(--n),1fr);gap:clamp(2px,.6vh,8px);
  font-size:clamp(11px,calc((100dvh - 190px) / var(--n) * .42),30px)}
.lane{display:grid;grid-template-columns:7.5em 1fr 3.4em;align-items:center;gap:.5em;min-height:0}
.lane.waiting{opacity:.4}
.lname{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:right}
.ltrack,.kspr-track{position:relative;height:100%;min-height:1.6em;border-radius:.5em;background:#F6C7B8;
  background-image:repeating-linear-gradient(90deg,transparent 0 calc(10% - 2px),rgba(255,255,255,.7) calc(10% - 2px) 10%)}
.lfinish{position:absolute;right:0;top:0;bottom:0;width:.8em;border-radius:0 .5em .5em 0;
  background:repeating-conic-gradient(#1B2A3D 0 25%,#fff 0 50%) 0 0/.4em .4em}
.runner{position:absolute;top:50%;width:2.4em;height:2.4em;max-height:calc(100% + .2em);aspect-ratio:1;transform:translateY(-50%);
  border-radius:50%;border:.12em solid var(--ink);display:grid;place-items:center;font-family:var(--h);font-weight:500;color:var(--ink);
  transition:left .6s cubic-bezier(.3,1.4,.5,1);z-index:2;box-shadow:0 .1em 0 var(--ink)}
.lane .runner{width:auto;height:calc(100% + .2em);font-size:.9em}
.lscore{font-weight:700;color:var(--soft);font-variant-numeric:tabular-nums}
.lplace{font-size:1.3em;line-height:1}
.spr-count{position:fixed;inset:0;display:grid;place-items:center;font-family:var(--h);font-size:40vh;color:var(--ink);
  background:rgba(232,242,252,.75);z-index:50;pointer-events:none;animation:sprPop .25s ease-out}
@keyframes sprPop{from{transform:scale(1.15);opacity:.4}to{transform:none;opacity:1}}
.spr-result{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;gap:20px;overflow:auto}
.podium{display:flex;align-items:flex-end;justify-content:center;gap:16px;margin-top:10px}
.pod{width:min(26vw,280px);border:3px solid var(--ink);border-radius:22px 22px 0 0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:4px;padding:16px 10px;text-align:center}
.pod .m{font-size:64px;line-height:1}
.pod b{font-family:var(--h);font-weight:500;font-size:32px;line-height:1.1}
.pod.p1{height:300px;background:#FFE8A3}.pod.p2{height:240px;background:#E3ECF5}.pod.p3{height:200px;background:#F6D3BC}
.pod.empty{border-style:dashed;background:transparent}
.ranking{columns:3;column-gap:40px;font-size:22px;margin:0;padding-left:1.6em;max-width:1100px;width:100%}
.ranking li{break-inside:avoid;margin:2px 0}
/* Kind */
.sprint-tile{display:flex;align-items:center;gap:18px;padding:20px 24px;border-radius:22px;border:3px solid var(--ink);background:#FFE8A3;box-shadow:0 7px 0 var(--ink);
  color:var(--ink);cursor:pointer;text-align:left;width:100%;animation:sprPulse 1.6s ease-in-out infinite}
.sprint-tile .ic{flex:none;width:60px;height:60px;border-radius:16px;background:#fff;border:2px solid var(--ink);display:grid;place-items:center;font-size:34px}
.sprint-tile b{display:block;font-family:var(--h);font-size:30px;font-weight:500}
.sprint-tile span span{font-size:18px;color:#6A5420}
@keyframes sprPulse{50%{background:#FFD866}}
.kspr{max-width:560px;width:100%;margin:8px auto 0;display:flex;flex-direction:column;gap:12px;align-items:stretch}
.kspr-track{height:54px;font-size:20px}
.kspr-track .runner{height:2.4em}
.kid-card .kspr-track{margin-top:6px}
.kspr-pos{margin:-4px 0 0;text-align:center;font-weight:700;color:var(--soft)}
.kspr-task{text-align:center;font-family:var(--h);font-size:56px;font-weight:500;line-height:1.1}
.kspr-ans{height:76px;border:3px solid var(--ink);border-radius:18px;background:#FAFCFF;display:grid;place-items:center;font-family:var(--h);font-size:40px;font-weight:500}
.kspr-ans.ok{background:#CDEFD9;border-color:#2E8B57}
.kspr-ans.no{background:#FBD5D0;border-color:#C0392B;font-size:30px}
.kspr-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.kspr-pad .key{height:68px;border-radius:16px;border:3px solid var(--ink);background:#fff;box-shadow:0 4px 0 var(--ink);font-family:var(--h);font-size:30px;font-weight:500;color:var(--ink);cursor:pointer;touch-action:manipulation}
.kspr-pad .key:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.kspr-pad .key.ok{background:var(--btn);color:#fff}
.kspr-pad .key:disabled{opacity:.55}
.kspr-count{font-family:var(--h);font-size:120px;line-height:1;font-weight:500}
@media (max-height:820px){.kspr-task{font-size:44px}.kspr-pad .key{height:58px}.kspr-ans{height:64px}}
/* lange Fachnamen */
.tile{min-width:0}
.tile > span:not(.sw){min-width:0;flex:1}
.tile b{overflow-wrap:break-word;hyphens:auto;line-height:1.15}
.game-top{padding:0 14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;line-height:52px;text-align:center}
.game-top:has(.pill){padding-left:72px}
.game-top .pill{line-height:1.4}
.tile b{word-break:normal}.tiles .tile .sw{width:44px;height:44px}
.chip.mode{display:inline-flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:6px 18px;border-radius:16px;line-height:1.2;min-height:56px}
.chip.mode small{font-weight:400;font-size:14px;opacity:.75}
.kspr-task .gap{display:inline-block;min-width:1.3em;padding:0 .15em;border:3px dashed var(--btn);border-radius:.25em;color:var(--btn);line-height:1.05}
.kspr-ans.no b{color:#C0392B}
/* Fortschritt: Namen bleiben links stehen, der Rest scrollt dahinter durch */
.ptable tbody th[scope="row"],.ptable thead tr:first-child th:first-child{position:sticky;left:0;z-index:3;background:#fff;box-shadow:3px 0 0 #D3E1EF}
.ptable tbody tr:hover th[scope="row"]{background:#fff}
/* Arbeitsstand eingebettet (Tagesfolie) */
.board.embed{padding:8px 10px}
.board.embed .board-head{margin:0 0 4px}
.board.embed .board-head h1{font-size:clamp(16px,4vh,28px);margin:0}
.board.embed .board-head .kick{font-size:12px}
.folie{position:fixed;inset:0;background:#fbfaf6}
.folie iframe{width:100%;height:100%;border:0;display:block}
.board.embed .matrix{gap:5px;grid-template-columns:minmax(70px,.6fr) repeat(3,minmax(0,1fr))}
.board.embed .mx-h span.lbl{display:inline;font-size:clamp(10px,2vw,16px);line-height:1.1}
.board.embed .mx-subj{font-size:clamp(11px,3.4vh,22px);padding:4px 8px;gap:6px;hyphens:auto;overflow-wrap:break-word}
/* Zeitreise: Zeiten & Fortschritt */
.zr{width:min(980px,100%);max-height:calc(100dvh - 32px);overflow:auto;gap:16px}
.zr-table th,.zr-table td{padding:8px 12px;vertical-align:top}
.zr-table td small{display:block;color:var(--soft);margin-top:4px}
.zr-st{display:inline-block;border-radius:999px;padding:4px 12px;font-size:14px;font-weight:700;border:1.5px solid transparent;font-family:inherit}
.zr-st.open{background:#DDF5EA;color:#1F6B50}
button.zr-st{cursor:pointer}
.zr-st.lock{background:#F2F4F7;border-color:#C9D3DE;color:#4A5B70}
.zr-st.mine{background:#FFF1C9;border-color:#E8C76A;color:#6A5420}
.zr .zr-table button.zr-st{width:auto;height:auto;min-height:0;min-width:0;max-width:none;aspect-ratio:auto;border-radius:999px;padding:4px 12px;line-height:1.4;box-shadow:none;display:inline-block}
.ptable .preset{margin-left:6px;width:30px;height:30px;border-radius:50%;border:1.5px solid var(--line2);background:#fff;color:var(--soft);font-size:16px;line-height:1;cursor:pointer;display:inline-grid;place-items:center;padding:0;flex:none}
.ptable .preset:hover{border-color:var(--red);color:var(--red-ink)}
/* Freiwillige Nummer pro Kind (statt Anfangsbuchstabe) */
.kidnr{flex:none;width:40px;height:40px;border-radius:50%;border:2px solid transparent;text-align:center;font:inherit;font-weight:700;font-size:16px;color:#1B2A3D;padding:0;cursor:text}
.kidnr::placeholder{color:#1B2A3D;opacity:.6}
.kidnr:hover{border-color:var(--line2)}
.kidnr:focus{outline:none;border-color:var(--btn);background:#fff!important}
@media print{
  .pcard{display:flex;gap:5mm;align-items:center}
  .pcard .pc-main{flex:1;min-width:0}
  .pcard .pc-qr{flex:none;width:32mm;text-align:center}
  .pcard .pc-qr svg{width:32mm;height:32mm;display:block}
  .pcard .pc-qr small{font-size:8pt;color:#555}
  .pcard .pnr{display:inline-grid;place-items:center;min-width:9mm;height:9mm;border-radius:50%;border:1.5px solid #555;font-size:13pt;margin-right:3mm;vertical-align:middle}
}

/* Vocibox-Anzeige (Nomen-Werkstatt) */
.vbx{display:flex;flex-direction:column;gap:6px;width:100%}
.vbr{display:flex;flex-direction:column;gap:3px}
.vbn{font-size:13px;font-weight:600}
.vbf{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:3px}
.vbf i{font-style:normal;display:flex;align-items:baseline;justify-content:center;gap:4px;border-radius:6px;padding:3px 2px;font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;background:#FDF1C7;color:#2B2300}
.vbf i small{font-size:10px;font-weight:500;opacity:.65}
.vbf i.f2{background:#F8E39A}.vbf i.f3{background:#F1D06A}.vbf i.f4{background:#E9BE3E}.vbf i.f5{background:#D9A514}
.vbf i.z{background:#F1F2F4;color:#9AA3AD}
.big-tile .vbn{font-size:15px}.big-tile .vbf i{font-size:16px;padding:5px 2px}

/* Hausaufgabenheft-Kachel der Kinder */
.heft-tile{background:#DCEBD3}
.heft-tile span span{color:#3F5E33}
/* Hausaufgaben und Tafel nebeneinander, je halb so breit */
.tile-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;width:100%}
@media (max-width:640px){.tile-pair{grid-template-columns:1fr}}
.tile-pair>.tafel-tile{width:auto;min-width:0}
.pin-tile{background:#F6E7C8}
.pin-tile span span{color:#7A5634}
.atelier-tile{background:#DCEAF6}
.atelier-tile span span{color:#35597a}
.quiz-tile{background:#FBF1DC}
.quiz-tile span span{color:#7a5a1c}
/* Werkzeuge als Kacheln im Klassen-Banner */
.tooltiles{flex:1 1 100%;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.tooltile{display:flex;align-items:center;gap:10px;background:#fff;border:2px solid var(--ink);border-radius:16px;padding:12px;color:var(--ink);text-decoration:none;box-shadow:0 4px 0 var(--ink);transition:transform .12s,box-shadow .12s}
.tooltile:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--ink)}
.tooltile:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.tooltile .tti{flex:none;width:42px;height:42px;border-radius:12px;background:var(--pastel);display:grid;place-items:center;font-size:25px}
.tooltile>span:last-child{min-width:0}
.tooltile b{display:block;font-size:16px;line-height:1.2}
.tooltile small{display:block;color:#3D5A7A;font-size:13px;line-height:1.3;margin-top:2px}
.tooltile.tt-main{background:#FFF4CF}
.tooltile.tt-main .tti{background:#fff}
/* Vokabelkiste in der Fortschritts-Übersicht: Minuten pro Schultag dieser Woche */
.vkx{display:flex;flex-direction:column;gap:3px}
.vkd{display:flex;gap:3px}
.vkd i{font-style:normal;flex:1;min-width:28px;text-align:center;border-radius:6px;background:#EEF1F5;color:#66788D;font-size:12px;font-weight:700;line-height:1.1;padding:2px 0}
.vkd i small{display:block;font-size:10px;font-weight:600}
.vkd i.part{background:#FFF1C9;color:#7A5A10}
.vkd i.ok{background:#CFEFD9;color:#1F6B50}
.vkd i.ok small::after{content:" ⭐"}
.vkd i.fr{background:transparent;color:#A0AAB5}
/* Vokabelkiste als Kachel bei den Werkzeugen: oben öffnen, unten für die Klasse freigeben */
.tooltile.tt-vk{flex-direction:column;align-items:stretch;gap:8px;padding:0;overflow:hidden;background:#EAF3E4}
.tt-vk .tt-open{display:flex;align-items:center;gap:10px;border:0;background:none;padding:12px 12px 0;text-align:left;color:var(--ink);cursor:pointer;font:inherit}
.tt-vk .tti{background:#fff}
.tt-vk .tti svg{width:32px;height:28px}
.tt-vk .tt-rel{border:0;border-top:2px solid var(--ink);background:#fff;padding:7px 10px;font:inherit;font-size:13px;font-weight:700;color:#7A2F28;cursor:pointer}
.tt-vk .tt-rel.on{background:#CFEFD9;color:#1F6B50}
/* Vokabelkiste: ohne dunklen Balken, sie hat selbst «← Knobelnest» */
.player-vk .player-bar{display:none}

/* =====================================================================
   Lehrpersonen-Seite im Stil der Eulenkiste (body.lp)
   Schrift Patrick Hand (lokal in schriften/), helles Blau, weisse Karten mit weichem blauem Schatten,
   Gold-Akzente, Sterne ✦ ✧ ✦. Die Kinderansicht bleibt (noch) wie sie ist.
   ===================================================================== */
@font-face{font-family:"Patrick Hand";src:url(schriften/patrick-hand.woff2) format("woff2");font-weight:400;font-display:swap}
body.lp{
  --bg:#f4f9fd; --ink:#1f2421; --soft:#5f6963; --line:#dbe7f1; --line2:#c5d8e8;
  --green:#3f78a8; --green-d:#2f5f8f; --btn:#dcf0fd; --btn-d:#c4e4fa; --pastel:#dcf0fd; --green-l:#e9f5fd; --amber:#fbf3dc; --focus:#3f78a8;
  --gold:#d6ad45; --gold-d:#c4952f; --sky-soft:#dcf0fd; --sky-deep:#3f78a8; --rose-soft:#fcefed; --leaf-soft:#e9f1e3; --sun-soft:#fbf3dc;
  --h:"Patrick Hand","Segoe Print","Comic Sans MS",cursive; --b:"Patrick Hand","Segoe Print","Comic Sans MS",cursive;
  --schatten:0 10px 26px rgba(63,120,168,.18),0 2px 6px rgba(63,120,168,.10);
  --schatten-hoch:0 16px 34px rgba(63,120,168,.26),0 3px 8px rgba(63,120,168,.14);
  background:var(--bg);font-family:var(--b);font-size:19px;color:var(--ink)}
body.lp h1,body.lp h2,body.lp h3,body.lp b,body.lp strong,body.lp th,body.lp .btn,body.lp .tab,body.lp .chip,body.lp .switch,body.lp .pill,body.lp .field label,body.lp .lbl{font-weight:400}
body.lp .small{font-size:16px}
body.lp .muted{color:var(--soft)}

/* Kopf */
body.lp .top{background:rgba(244,249,253,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:0;box-shadow:0 1px 0 rgba(214,173,69,.35)}
body.lp .top-in{min-height:88px;padding:10px 24px}
.marke{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.marke-bild{flex:none;width:60px;height:60px;border-radius:50%;background:#fff;padding:3px;box-shadow:0 0 0 2px #d6ad45,0 6px 18px rgba(63,120,168,.25);transform:rotate(-6deg);transition:transform .3s}
.marke-bild img{width:100%;height:100%;display:block;border-radius:50%}
.marke:hover .marke-bild{transform:rotate(4deg) scale(1.05)}
.marke-text b{display:block;font-family:"Patrick Hand",cursive;font-size:36px;line-height:.95;font-weight:400}
.marke-text em{font-style:normal;color:#c4952f}
.marke-text i{font-style:normal;color:#d6ad45;font-size:.55em;vertical-align:super;margin-left:2px}
.marke-text small{display:inline-block;margin-top:2px;font-size:16px;color:#5f6963;border-top:1.5px dashed #d6ad45;padding-top:1px}
body.lp .tabs{gap:6px;padding:4px 24px 12px}
body.lp .tab{min-height:42px;padding:0 18px;border:1.5px solid transparent;border-radius:999px;font-size:19px;color:var(--ink)}
body.lp .tab:hover{background:var(--sky-soft)}
body.lp .tab[aria-selected="true"]{background:#fff;border-color:var(--ink);box-shadow:var(--schatten)}
body.lp .avatar{background:var(--sky-soft);color:var(--sky-deep);box-shadow:0 0 0 1.5px var(--gold)}

/* Knöpfe, Felder, Schalter */
body.lp .btn{border:2px solid var(--ink);border-radius:14px;background:#fff;font-size:18px;box-shadow:var(--schatten);transition:transform .15s,box-shadow .15s}
body.lp .btn:hover{transform:translateY(-2px);box-shadow:var(--schatten-hoch);border-color:var(--ink)}
body.lp .btn:active{transform:translateY(1px);box-shadow:var(--schatten)}
body.lp .btn.primary{background:var(--sky-soft);color:var(--ink);border-color:var(--ink)}
body.lp .btn.primary:hover{background:#c9e7fb}
body.lp .btn.amber{background:var(--sun-soft);border-color:var(--ink)}
body.lp .btn.danger{border-color:#b5524a;color:#9a3b33;box-shadow:none}
body.lp .btn.sm{min-height:40px;font-size:16px;border-radius:11px;box-shadow:0 4px 12px rgba(63,120,168,.14)}
body.lp .input,body.lp select.input,body.lp textarea.input{border:1.5px solid var(--line2);border-radius:14px;font-size:19px}
body.lp .input:focus{outline:3px solid #9fd0f3;border-color:var(--sky-deep)}
body.lp .switch{border-radius:14px;font-size:17px;background:#f7fbfe}
body.lp .switch[aria-checked="true"]{background:var(--leaf-soft);border-color:#7ea56a;color:#3f6b2e}
body.lp [aria-checked="true"] .track{background:#7ea56a}
body.lp .chip{border:1.5px solid var(--line2);font-size:18px}
body.lp .chip[aria-pressed="true"]{background:var(--sky-soft);border-color:var(--ink);color:var(--ink)}

/* Karten und Flächen */
body.lp .card,body.lp .list,body.lp .tablewrap{border:1.5px solid #e1edf7;border-radius:28px;box-shadow:var(--schatten);background:linear-gradient(180deg,#fff 0%,#fff 70%,#f7fbfe 100%)}
body.lp .list{border-radius:22px}
body.lp .note{background:var(--sun-soft);border:1.5px dashed var(--gold);border-radius:20px;color:#4a3d1a;font-size:17px}
body.lp .note b{color:#6b5418}
body.lp .empty{border:2px dashed #b9d6ec;border-radius:28px}
body.lp .h1{font-size:clamp(36px,5vw,52px)}
body.lp .main{gap:34px}
body.lp .main>section>h2,body.lp .main section.stack>h2{font-size:36px!important;display:flex;align-items:center;gap:12px}
body.lp .main section.stack>h2::after{content:"✦ ✧ ✦";font-size:13px;letter-spacing:.3em;color:var(--gold)}
body.lp .dialog{border-radius:28px;box-shadow:var(--schatten-hoch)}

/* Klassen-Banner */
body.lp .banner{background:linear-gradient(180deg,#fff 0%,#f3faff 100%);border:1.5px solid #e1edf7;border-radius:32px;padding:26px 30px;box-shadow:var(--schatten);gap:22px 28px}
.banner-bild{flex:none;width:132px;height:132px;border-radius:50%;background:var(--sky-soft,#dcf0fd);display:grid;place-items:center;border:3px solid #d6ad45;box-shadow:inset 0 0 0 6px #fff,0 8px 18px rgba(63,120,168,.15);overflow:hidden}
.banner-bild img{width:100%;height:100%;object-fit:contain;display:block}
body.lp .banner .klein{font-size:16px;letter-spacing:.1em;text-transform:uppercase;color:var(--sky-deep)}
body.lp .banner h2{font-size:44px;line-height:1}
body.lp .banner h2::after{content:" ✦";color:var(--gold);font-size:.5em;vertical-align:super}
body.lp .banner p{color:var(--soft)}
body.lp .codebox{background:#fff;border:2px dashed var(--gold);border-radius:22px;padding:10px 24px 8px;box-shadow:var(--schatten)}
body.lp .codebox small{font-size:14px;letter-spacing:.12em;color:var(--sky-deep)}
body.lp .codebox b{font-family:var(--h);font-size:40px;letter-spacing:.02em;font-weight:400;line-height:1.1;display:block}
.code-edit{border:0;background:none;color:#2f5f8f;font:inherit;font-size:16px;cursor:pointer;padding:2px 6px;border-radius:999px}
.code-edit:hover{background:#dcf0fd}
.codein{font-size:30px!important;text-align:center;letter-spacing:.03em}

/* Werkzeug-Kacheln wie die Karten der Eulenkiste */
body.lp .tooltiles{grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:16px;margin-top:6px}
body.lp .tooltile{flex-direction:column;align-items:center;justify-content:flex-start;text-align:center;gap:6px;padding:16px 12px 14px;border:1.5px solid #e1edf7;border-radius:24px;background:#fff;box-shadow:var(--schatten)}
body.lp .tooltile:hover{transform:translateY(-4px);box-shadow:var(--schatten-hoch)}
body.lp .tooltile:active{transform:translateY(1px);box-shadow:var(--schatten)}
body.lp .tooltile .tti{width:70px;height:70px;border-radius:50%;font-size:36px;background:var(--sky-soft);border:3px solid var(--gold);box-shadow:inset 0 0 0 5px #fff,0 6px 14px rgba(63,120,168,.15);transition:transform .35s}
body.lp .tooltile:hover .tti{transform:rotate(-6deg) scale(1.05)}
body.lp .tooltile b{font-size:22px}
body.lp .tooltile b::after{content:"✦ ✧ ✦";display:block;font-size:10px;letter-spacing:.3em;color:var(--gold);margin-top:4px}
body.lp .tooltile small{font-size:15px;color:var(--soft)}
body.lp .tooltile.tt-main{background:linear-gradient(180deg,#fff 0%,#fbf3dc 100%)}
body.lp .tooltile.tt-main .tti{background:var(--sun-soft)}
body.lp .tooltiles>.tooltile:nth-child(4n+2) .tti{background:var(--leaf-soft)}
body.lp .tooltiles>.tooltile:nth-child(4n+3) .tti{background:var(--rose-soft)}
body.lp .tooltile.tt-vk{padding:0;gap:0;background:#fff}
body.lp .tt-vk .tt-open{flex-direction:column;align-items:center;text-align:center;gap:6px;padding:16px 12px 10px;width:100%}
body.lp .tt-vk .tti{background:var(--leaf-soft)}
body.lp .tt-vk .tt-rel{width:100%;border-top:1.5px dashed var(--gold);font-weight:400;font-size:15px;border-radius:0 0 22px 22px}

/* Fächer und Spiele */
body.lp .tile{border:1.5px solid #e1edf7;border-radius:22px;box-shadow:var(--schatten);transition:transform .15s,box-shadow .15s}
body.lp .tile:hover{transform:translateY(-3px);box-shadow:var(--schatten-hoch)}
body.lp .tile[aria-pressed="true"]{border:2px solid var(--ink);box-shadow:0 0 0 3px #fff,0 0 0 5px var(--gold),var(--schatten)}
body.lp .tile .sw{border-radius:50%;font-family:var(--h);font-size:24px;box-shadow:0 0 0 2px #fff,0 0 0 3.5px var(--gold)}
body.lp .tile b{font-family:var(--h);font-size:22px;font-weight:400}
body.lp .gtitle{font-size:34px;font-weight:400}
body.lp .gtitle small{font-family:var(--b);font-size:16px}
body.lp .gtoggle{border-bottom:1.5px dashed rgba(214,173,69,.6)}
body.lp .gtoggle .chev{color:var(--gold)}
body.lp .game{border:1.5px solid #e1edf7;border-radius:26px;box-shadow:var(--schatten);transition:transform .15s,box-shadow .15s}
body.lp .game:hover{transform:translateY(-3px);box-shadow:var(--schatten-hoch)}
body.lp .game-top{font-family:var(--h);font-size:24px;font-weight:400;border-bottom:1.5px dashed rgba(214,173,69,.55)}
body.lp .game-body h3{font-size:26px}
body.lp .game-body p{font-size:17px}

/* Anmeldeseite */
body.lp .login-hero{background:linear-gradient(180deg,#dcf0fd 0%,#f4f9fd 100%)}

@media (max-width:640px){
  body.lp .top-in{min-height:72px;padding:8px 16px}
  .marke-bild{width:48px;height:48px}
  .marke-text b{font-size:30px}
  .marke-text small{display:none}
  body.lp .banner{padding:20px}
  .banner-bild{width:96px;height:96px}
  body.lp .banner h2{font-size:36px}
  body.lp .tooltiles{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){body.lp *{transition:none!important}}
body.lp .tooltiles{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:14px}
body.lp .tooltile b{font-size:20px}
body.lp .tooltile .tti{width:62px;height:62px;font-size:32px}
body.lp .main section.stack>.row>h2{font-size:36px!important}
body.lp .main section.stack>.row>h2::after{content:" ✦ ✧ ✦";font-size:13px;letter-spacing:.3em;color:var(--gold);vertical-align:middle}
body.lp .kidlink{background:#fff;color:var(--ink);border:2px solid var(--ink);border-radius:16px;box-shadow:var(--schatten);font-weight:400}
body.lp .kidlink:hover{background:var(--sky-soft);color:var(--ink)}

/* ---- Version 78: breiter, Kopf rechts, Werkzeug-Kacheln mit Freigabe, Klassenbild, roter Knopf ---- */
body.lp .main,body.lp .top-in,body.lp .tabs{max-width:1440px}
/* Kopf rechts: Klasse, Name, Abmelden in einer ruhigen Leiste */
body.lp .top-in>.row{background:#fff;border:1.5px solid #e1edf7;border-radius:999px;padding:5px;gap:4px;box-shadow:var(--schatten);flex-wrap:nowrap}
body.lp .top-in>.row select.input{min-height:42px!important;border:0;border-radius:999px;background:var(--sky-soft);padding:0 34px 0 16px;font-size:18px;cursor:pointer}
body.lp .top-in>.row .btn{border:0;box-shadow:none;border-radius:999px;min-height:42px;background:transparent}
body.lp .top-in>.row .btn:hover{background:var(--sky-soft);transform:none}
body.lp .top-in>.row .btn[data-a="logout"]{color:var(--soft);font-size:16px}
body.lp .top-in>.row .avatar{width:32px;height:32px;font-size:14px}
@media (max-width:640px){body.lp .top-in>.row{flex-wrap:wrap;border-radius:22px}}
/* Werkzeug-Kacheln: alle mit Fussleiste (Freigabe für die Klasse oder «Nur für Sie») */
body.lp .tooltiles{grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:14px}
body.lp .tooltile.tt-card{padding:0;gap:0;justify-content:space-between;overflow:hidden}
body.lp .tt-card .tt-open{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:16px 10px 12px;width:100%;flex:1;border:0;background:none;color:var(--ink);text-decoration:none;font:inherit;cursor:pointer}
body.lp .tt-card .tt-open b{white-space:nowrap}
body.lp .tt-card .tt-rel,body.lp .tt-card .tt-only{display:block;width:100%;border:0;border-top:1.5px dashed var(--gold);padding:8px 8px 9px;font:inherit;font-size:15px;text-align:center;line-height:1.25}
body.lp .tt-card .tt-rel{background:#fff;color:#9a3b33;cursor:pointer}
body.lp .tt-card .tt-rel:hover{background:var(--rose-soft)}
body.lp .tt-card .tt-rel.on{background:var(--leaf-soft);color:#3f6b2e}
body.lp .tt-card .tt-rel.on:hover{background:#dcead2}
body.lp .tt-card .tt-only{color:var(--soft);background:#f7fbfe}
body.lp .tooltile.tt-main .tt-only{background:transparent}
/* Klassenbild im Banner: anklickbar */
button.banner-bild{position:relative;cursor:pointer;padding:0;font:inherit}
button.banner-bild .bild-edit{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);background:#fff;border:1.5px solid #d6ad45;border-radius:999px;padding:1px 10px;font-size:14px;white-space:nowrap;opacity:0;transition:opacity .2s;color:#2f5f8f}
button.banner-bild:hover .bild-edit,button.banner-bild:focus-visible .bild-edit{opacity:1}
.bildwahl{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:14px}
.bildopt{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px;border:1.5px solid #e1edf7;border-radius:20px;background:#fff;cursor:pointer;font:inherit;text-align:center}
.bildopt img{width:96px;height:96px;object-fit:cover;border-radius:50%;border:3px solid #d6ad45;background:#dcf0fd}
.bildopt.on{border:2px solid #1f2421;box-shadow:0 0 0 3px #fff,0 0 0 5px #d6ad45}
.bildopt .input{min-height:36px;font-size:15px;padding:4px 8px;text-align:center}
/* Kinder: Klassenbild neben der Begrüssung */
.kid-hello{display:flex;align-items:center;gap:18px}
.kid-bild{flex:none;width:88px;height:88px;border-radius:50%;object-fit:cover;background:#dcf0fd;border:3px solid #d6ad45;box-shadow:inset 0 0 0 4px #fff,0 6px 16px rgba(63,120,168,.18)}
@media (max-width:520px){.kid-bild{width:64px;height:64px}}
/* Spaltennamen der Tafel als Eingabefelder */
body.lp .columns .column{padding:8px}
body.lp .col-in{background:rgba(255,255,255,.75);font-size:19px}
/* Roter Knopf: ruhig, beim Bestätigen gut lesbar */
body.lp .btn.danger{background:#fff;border:2px solid #c9706a;color:#9a3b33;box-shadow:none}
body.lp .btn.danger:hover{background:#fcefed;border-color:#b5524a}
body.lp .btn.danger.armed{background:#fcefed;border-color:#b5524a;color:#7d2a24;box-shadow:0 0 0 3px #fff,0 0 0 5px #ec9d95}

/* ---- Version 80: Spalten der Tafel frei, Kacheln sortieren, Kinderansicht im neuen Stil ---- */
.matrix{grid-template-columns:minmax(120px,.75fr) repeat(var(--ncol,3),minmax(0,1fr))}
.board.embed .matrix{grid-template-columns:minmax(70px,.6fr) repeat(var(--ncol,3),minmax(0,1fr))}
@media (max-width:700px){.matrix{grid-template-columns:90px repeat(var(--ncol,3),minmax(0,1fr))}}
/* Lehrperson: Spalten bearbeiten */
.colrow{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:10px 12px;border:2px solid;border-radius:18px}
.colrow .coldot{flex:none;width:26px;height:26px;border-radius:50%;box-shadow:0 0 0 3px #fff}
.colrow .col-in{flex:1 1 220px;min-height:42px}
.colsw{display:flex;flex-wrap:wrap;gap:5px}
.colsw .swatch{width:26px;height:26px}
/* Lehrperson: Werkzeug-Kacheln sortieren */
.tt-head{flex:1 1 100%;display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:-6px}
body.lp .tooltiles.sorting .tooltile{cursor:grab;outline:2px dashed var(--gold);outline-offset:3px}
body.lp .tooltiles.sorting .tt-open,body.lp .tooltiles.sorting .tt-rel{pointer-events:none}
body.lp .tooltiles.sorting .tooltile.dragging{opacity:.45}
.tt-move{display:flex;justify-content:center;gap:6px;padding:8px;border-top:1.5px dashed #d6ad45;background:#fbf3dc}
/* Kinderansicht: freundlich und hell wie die Lehrpersonen-Seite, Schriften bleiben (gut lesbar) */
body.kidv{--kid:#f4f9fd;background:#f4f9fd}
body.kidv .kid{background:radial-gradient(ellipse at 15% 0%,#e3f2fd 0%,transparent 55%),radial-gradient(ellipse at 100% 100%,#fbf3dc 0%,transparent 50%),#f4f9fd}
body.kidv .kid-marke{display:flex;flex-direction:column;align-items:center;gap:2px}
body.kidv .kid-marke img{width:52px;height:52px;border-radius:50%;background:#fff;padding:2px;box-shadow:0 0 0 2px #d6ad45,0 4px 12px rgba(63,120,168,.2)}
body.kidv .kid-marke small{font-family:var(--h);font-size:14px;color:#5f6963}
body.kidv .kid-hello{flex-wrap:wrap}
body.kidv .kid-out{margin-left:auto;align-self:center}
body.kidv .kid-btn{background:#fff;border:2px solid rgba(31,36,33,.18);border-radius:999px;box-shadow:0 6px 16px rgba(63,120,168,.14)}
body.kidv .kid-btn:hover{background:#dcf0fd}
body.kidv .big-tile,body.kidv .tafel-tile,body.kidv .sprint-tile{border:2px solid rgba(31,36,33,.1);border-radius:30px;box-shadow:0 12px 28px rgba(63,120,168,.18),0 2px 6px rgba(63,120,168,.1);transition:transform .15s,box-shadow .15s}
body.kidv .big-tile:hover,body.kidv .tafel-tile:hover,body.kidv .sprint-tile:hover{transform:translateY(-4px);box-shadow:0 18px 36px rgba(63,120,168,.26),0 3px 8px rgba(63,120,168,.14)}
body.kidv .big-tile:active,body.kidv .tafel-tile:active{transform:translateY(1px)}
body.kidv .big-tile .ic,body.kidv .tafel-tile .ic,body.kidv .sprint-tile .ic{border-radius:50%!important;border:3px solid #d6ad45!important;box-shadow:inset 0 0 0 4px #fff,0 6px 14px rgba(63,120,168,.15)}
body.kidv .big-tile b::after,body.kidv .tafel-tile b::after{content:" ✦";color:#d6ad45;font-size:.45em;vertical-align:super}
body.kidv .big-tile.extra{border-style:dashed;box-shadow:0 8px 20px rgba(63,120,168,.12)}
body.kidv .kid-card{border:2px solid rgba(31,36,33,.1);border-radius:32px;box-shadow:0 14px 34px rgba(63,120,168,.2)}
body.kidv .kid-name{border:2px solid rgba(31,36,33,.12);border-radius:22px;box-shadow:0 8px 20px rgba(63,120,168,.14)}
body.kidv .kid-name:hover{background:#f3faff}
body.kidv .kid-go{background:#3f78a8;border-radius:999px;box-shadow:0 8px 20px rgba(63,120,168,.25)}
body.kidv .kid-go:hover{background:#2f5f8f}
body.kidv .kid-input{border:2px solid rgba(31,36,33,.2);border-radius:22px}
.insta-wunsch{display:flex;align-items:center;gap:12px;padding:8px 18px 8px 8px;border-radius:999px;background:#fff;text-decoration:none;color:#1f2421;border:1.5px solid #f1e2b8;box-shadow:0 8px 20px rgba(63,120,168,.16);align-self:flex-start;transition:transform .15s}
.insta-wunsch:hover{transform:translateY(-2px)}
.insta-wunsch .insta-sym{flex:none;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#9fd0f3 0%,#5f97c8 55%,#3f78a8 100%);box-shadow:0 0 0 2px #fff,0 0 0 3.5px #d6ad45}
.insta-wunsch b{display:block;font-size:19px;font-weight:400}
.insta-wunsch small{display:block;font-size:15px;color:#5f6963}

/* ---- Version 82: Arbeitsstand-Tafel (Wandtafel und Kinder) im hellen Stil der Klassenkiste ---- */
.board{background:radial-gradient(ellipse at 10% 0%,#e3f2fd 0%,transparent 55%),radial-gradient(ellipse at 100% 100%,#fbf3dc 0%,transparent 50%),#f4f9fd}
.board-head{gap:10px 20px}
.board-bild{flex:none;width:clamp(56px,7vh,84px);height:clamp(56px,7vh,84px);border-radius:50%;object-fit:cover;background:#dcf0fd;border:3px solid #d6ad45;box-shadow:inset 0 0 0 4px #fff,0 6px 16px rgba(63,120,168,.18)}
.board.embed .board-bild{display:none}
.board-head .kick{color:#3f78a8;letter-spacing:.1em}
.board-head .sterne{color:#d6ad45;letter-spacing:.3em;margin-left:6px}
.board-head p{color:#5f6963}
.board-btn{border:2px solid rgba(31,36,33,.15);border-radius:999px;background:#fff;box-shadow:0 6px 16px rgba(63,120,168,.14);transition:transform .15s,box-shadow .15s}
.board-btn:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(63,120,168,.2);background:#f3faff}
.matrix{gap:10px}
.mx-h{border-width:1.5px;border-radius:999px;padding:6px 16px 6px 6px;box-shadow:0 4px 12px rgba(63,120,168,.1)}
.mx-h .dot{box-shadow:0 0 0 2px #fff,0 0 0 3.5px #d6ad45}
.mx-subj{border:1.5px solid #e1edf7;border-radius:22px;box-shadow:0 8px 20px rgba(63,120,168,.12);background:linear-gradient(180deg,#fff 0%,#f7fbfe 100%)}
.mx-subj i{width:12px;border-radius:999px}
.cell{border-width:1.5px;border-radius:22px;box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 6px 16px rgba(63,120,168,.08)}
.cell .tag{box-shadow:0 2px 6px rgba(31,36,33,.08)}
.mine{background:#fff;border:1.5px solid #e1edf7;border-radius:22px;box-shadow:0 8px 20px rgba(63,120,168,.12)}
.board-fehlt{flex:none;display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;padding:10px 14px;border-radius:22px;background:#fff;border:1.5px dashed #d6ad45;color:#5f6963;font-size:16px}
.board-fehlt b{color:#1f2421;margin-right:4px}
.board-fehlt .tag{font-size:15px;padding:3px 10px 3px 3px;border-color:#e1edf7}
.board-fehlt .tag .ini{width:22px;height:22px;font-size:12px}
.mx-h.blank{border:0;background:none;box-shadow:none}
/* Werkzeug-Kacheln mit gemalten Bildern (bilder/kacheln/) */
body.lp .tooltile .tti.bild{width:84px;height:84px;padding:0;border:0;background:none;box-shadow:0 6px 14px rgba(63,120,168,.18);border-radius:50%}
body.lp .tooltile .tti.bild img{width:100%;height:100%;display:block;border-radius:50%}
body.lp .tooltile .tti:not(.bild){width:84px;height:84px;font-size:40px}
body.lp a.marke,body.lp a.marke:hover{color:#1f2421}
/* Kacheln direkt ziehen */
body.lp .tooltiles [data-tile]{touch-action:pan-y;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
body.lp .tooltiles [data-tile].dragging{position:relative;z-index:20;box-shadow:0 22px 44px rgba(63,120,168,.35);transition:none;cursor:grabbing;outline:2px dashed #d6ad45;outline-offset:3px}
body.tt-dragging,body.tt-dragging *{cursor:grabbing!important}
body.tt-dragging .tooltiles [data-tile]:not(.dragging){transition:transform .15s}
.tt-tipp{margin:10px 0 0;flex:1 1 100%}
/* Kinder-Kacheln mit gemalten Bildern */
body.kidv .ic.ic-bild{flex:none;width:84px!important;height:84px!important;padding:0!important;border:0!important;background:none!important;border-radius:50%!important;box-shadow:0 6px 14px rgba(63,120,168,.2)!important;display:block!important;overflow:hidden}
body.kidv .ic.ic-bild img{width:100%;height:100%;display:block;border-radius:50%}
body.kidv .big-tile .ic.ic-bild{width:96px!important;height:96px!important}

/* ---- Version 87: Kreisbilder mit eigenem Goldrand, neue Anmeldeseite ---- */
body.lp .tooltile .tti.bild,body.kidv .ic.ic-bild{border:3px solid #d6ad45!important;box-shadow:0 0 0 3px #fff,0 6px 14px rgba(63,120,168,.2)!important;background:#fff!important}
.banner-bild img,.kid-bild,.board-bild,.bildopt img{object-fit:cover}
.login-klein{font-size:16px;letter-spacing:.12em;text-transform:uppercase;color:#3f78a8}
body.lp .login-hero{justify-content:flex-start;gap:34px}
body.lp .login-hero h1{font-size:clamp(38px,5vw,58px);font-weight:400;line-height:1.05}
body.lp .login-hero p{color:#5f6963}
.login-tools{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:16px 10px;margin-top:auto}
.ltool{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;cursor:default;outline:0}
.ltool img{width:84px;height:84px;border-radius:50%;border:3px solid #d6ad45;box-shadow:0 0 0 3px #fff,0 8px 18px rgba(63,120,168,.2);background:#fff;transition:transform .25s}
.ltool:hover img,.ltool:focus img{transform:translateY(-4px) rotate(-4deg) scale(1.06)}
.ltool b{font-weight:400;font-size:18px;line-height:1.1}
.ltip{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%,6px);width:220px;padding:10px 14px;border-radius:16px;background:#fff;border:1.5px solid #d6ad45;box-shadow:0 12px 28px rgba(63,120,168,.25);font-size:15px;line-height:1.35;color:#1f2421;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:5}
.ltip::after{content:"";position:absolute;top:100%;left:50%;margin-left:-7px;border:7px solid transparent;border-top-color:#d6ad45}
.ltool:hover .ltip,.ltool:focus .ltip{opacity:1;transform:translate(-50%,0)}
body.lp .kidlink{margin-top:4px}
.login-shop{display:flex;flex-direction:column;align-items:stretch;gap:8px;margin-top:10px;padding-top:18px;border-top:1.5px dashed rgba(214,173,69,.6);text-align:center;color:#5f6963}
.login-shop .btn{min-height:50px;justify-content:center}
.login-tools{grid-template-columns:repeat(auto-fill,minmax(82px,1fr))}
.ltool img{width:72px;height:72px}
.ltool b{font-size:16px}
@media (max-width:760px){.login-hero,.login-form{flex:1 1 100%;min-width:0}.login-form{order:-1;padding:32px 20px 8px}}
.ltip{width:min(220px,calc(100vw - 40px))}
.ltool:first-child .ltip,.ltool:nth-child(3n+1) .ltip{left:0;transform:translate(0,6px)}
.ltool:first-child:hover .ltip,.ltool:nth-child(3n+1):hover .ltip,.ltool:nth-child(3n+1):focus .ltip{transform:translate(0,0)}
.ltool:first-child .ltip::after,.ltool:nth-child(3n+1) .ltip::after{left:36px}
.login{overflow-x:hidden}

/* =====================================================================
   Elterngespräche (#/gespraeche/… für die Lehrperson, #/eltern/… für die Eltern) im Eulenkisten-Stil
   ===================================================================== */
.eg .kick{font-size:18px;color:var(--soft)}
.eg .sterne{color:var(--gold,#d6ad45);letter-spacing:.2em;font-size:14px}
.eg-banner{background:linear-gradient(135deg,#fbf3dc 0%,#dcf0fd 100%);border:1.5px solid #e1edf7;border-radius:28px;box-shadow:var(--schatten)}
.eg-banner .banner-bild{width:120px;height:120px;object-fit:cover;padding:0}
.eg-stats .pill{background:#fff;border:1.5px solid var(--line2);font-size:16px;padding:4px 12px}
.eg-stats .pill.eg-bad,.eg .pill.eg-bad{background:var(--rose-soft,#fcefed);border-color:#b5524a;color:#9a3b33}
.eg .card h2{font-size:30px}
.eg h3{font-size:22px}
.eg-add{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;align-items:end}
.eg-day{border-top:1.5px dashed var(--gold,#d6ad45);padding-top:12px;display:flex;flex-direction:column;gap:8px}
.eg-chips{display:flex;flex-wrap:wrap;gap:8px}
.eg-chip{display:inline-flex;align-items:center;gap:4px;padding:3px 4px 3px 12px;border-radius:999px;background:var(--sky-soft,#dcf0fd);border:1.5px solid var(--line2);font-size:17px}
.eg-chip.fix{background:var(--sun-soft,#fbf3dc);border-color:var(--gold,#d6ad45)}
.eg-chip button{border:0;background:transparent;width:30px;height:30px;border-radius:50%;cursor:pointer;font-size:20px;line-height:1;color:var(--soft)}
.eg-chip button:hover{background:#fff;color:#9a3b33}
.eg-link{display:flex;flex-wrap:wrap;gap:10px}
.eg-link .input{flex:1 1 260px;font-size:16px}
.eg-planday{display:flex;flex-direction:column;gap:8px}
.eg-planday h3::after{content:" ✦";color:var(--gold,#d6ad45);font-size:14px}
.eg-rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.eg-rows li{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:8px 12px;border-radius:16px;border:1.5px solid var(--line);background:#fff;min-height:54px}
.eg-rows li.fix{background:var(--leaf-soft,#e9f1e3);border-color:#9fc08b}
.eg-rows li.vor{background:#f7fbfe}
.eg-rows li.blk{background:#f1f1ef}
.eg-rows li.frei{border-style:dashed}
.eg-time{flex:none;width:118px;font-size:20px}
.eg-who{flex:1 1 180px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.eg-who b{font-size:20px}
.eg-dot{flex:none;width:14px;height:14px;border-radius:50%;box-shadow:0 0 0 2px #fff,0 0 0 3px rgba(0,0,0,.12)}
.eg .pill.eg-fix{background:#fff;border:1.5px solid #7ea56a;color:#3f6b2e}
.eg .pill.eg-vor{background:#fff;border:1.5px solid var(--line2);color:var(--soft)}
.eg-sel{flex:0 1 240px;min-height:42px!important;padding:6px 10px!important;font-size:16px!important}
.eg-kids li{gap:10px 16px}
.eg-kid{flex:1 1 220px;display:flex;flex-direction:column;gap:2px}
.eg-kid b{font-size:21px}
.eg-st{font-size:16px;color:var(--soft)}
.eg-st.ok{color:#3f6b2e}
.eg-st.bad{color:#9a3b33}
.eg-note{font-size:16px;color:#6b5418}
.eg-diff{display:flex;flex-wrap:wrap;gap:6px}
.eg-diff .chip{min-height:38px;padding:0 12px;font-size:16px}
body.lp .eg-diff .chip[aria-pressed="true"]{background:var(--c);border-color:var(--c);color:#fff}
.eg-dlg{width:min(640px,100%)}
.eg-dday{display:flex;flex-direction:column;gap:6px}
.eg-tick{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:999px;border:1.5px solid var(--line2);cursor:pointer;font-size:17px}
.eg-tick:has(input:checked){background:var(--sky-soft,#dcf0fd);border-color:var(--ink)}
.eg-tick.off{opacity:.45;cursor:default}
/* Eltern */
.eg-eltern{max-width:760px}
.eg-info{white-space:pre-line;color:var(--ink)!important}
.eg-kidpick{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.eg-kidbtn{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:60px;padding:10px 16px;border-radius:16px;border:2px solid var(--ink);background:#fff;cursor:pointer;text-align:left;box-shadow:var(--schatten);font-family:inherit}
.eg-kidbtn b{font-size:22px;font-weight:400}
.eg-kidbtn small{font-size:15px;color:#3f6b2e}
.eg-kidbtn:hover{transform:translateY(-2px)}
.eg-kidbtn.mine{background:var(--leaf-soft,#e9f1e3)}
.eg-kidbtn.done{border-color:var(--line2);box-shadow:none;opacity:.6;cursor:default;transform:none}
.eg-kidbtn.done small{color:var(--soft)}
.eg-pday{display:flex;flex-direction:column;gap:8px;border-top:1.5px dashed var(--gold,#d6ad45);padding-top:12px}
.eg-slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.eg-slot{display:flex;align-items:center;gap:10px;min-height:52px;padding:6px 12px;border-radius:14px;border:2px solid var(--line2);background:#fff;cursor:pointer;font-family:inherit;font-size:20px;color:var(--ink)}
.eg-slot[aria-pressed="true"]{border-color:var(--ink);background:var(--sky-soft,#dcf0fd);box-shadow:var(--schatten)}
.eg-box{flex:none;width:26px;height:26px;border-radius:8px;border:2px solid var(--ink);background:#fff;display:grid;place-items:center;font-size:18px;color:#3f6b2e}
.eg-count{font-size:20px;color:#3f6b2e}
.eg-none{display:flex;align-items:center;gap:10px;font-size:19px;cursor:pointer}
.eg-none input{width:24px;height:24px}
.eg-send{min-height:56px;font-size:22px!important}
.eg-done h2{color:#3f6b2e}
.eg-big{font-size:26px;line-height:1.3;background:var(--sun-soft,#fbf3dc);border:1.5px dashed var(--gold,#d6ad45);border-radius:20px;padding:14px 18px}
.eg-chosen{margin:0;padding-left:22px;font-size:19px}
@media (max-width:600px){
  .eg-time{width:auto}
  .eg-rows li{gap:6px 10px}
  .eg-banner{flex-wrap:nowrap;align-items:flex-start;padding:18px;gap:14px}
  .eg-banner .banner-bild{width:64px;height:64px;border-width:2px}
  .eg .h1{font-size:34px}
  .eg-slots{grid-template-columns:repeat(2,1fr)}
}
@media print{
  body.lp{background:#fff}
  .top,.eg-noprint,#toast{display:none!important}
  .eg .card{box-shadow:none!important;border:0!important;padding:0}
  .eg-rows li{break-inside:avoid;min-height:0}
  .main{padding:0}
}
/* ---- Version 91: Umfrage (Lehrperson, Wandtafel, Kinder) ---- */
.umf-page{max-width:1240px;margin:0 auto;padding:18px 24px 72px;display:flex;flex-direction:column;gap:26px}
.umf-top{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;flex-wrap:wrap}
.umf-kick{display:inline-flex;align-items:center;gap:10px;color:#3f78a8;font-size:18px;letter-spacing:.06em}
.umf-kick img{width:40px;height:40px;border-radius:50%;object-fit:cover;border:2px solid #d6ad45;background:#dcf0fd}
.umf-kick .sterne,.us-tt .sterne{color:#d6ad45;letter-spacing:.3em}
.umf-hero{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.umf-hero h1{font-size:clamp(34px,4.5vw,48px)}
.umf-hero-bild{flex:none;width:110px;height:110px;border-radius:50%;border:3px solid #d6ad45;box-shadow:0 0 0 3px #fff,0 8px 18px rgba(63,120,168,.2);background:#fff}
.btn.big{min-height:56px;font-size:20px;padding:0 24px}
.umf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.umf-card{display:flex;flex-direction:column;gap:14px;padding:18px}
.umf-card-open{all:unset;cursor:pointer;display:flex;flex-direction:column;gap:6px}
.umf-card-open b{font-size:24px;line-height:1.15}
.umf-card-open small{color:var(--soft);font-size:16px}
.umf-icons{display:flex;flex-wrap:wrap;gap:4px;font-size:20px;line-height:1.2}
.umf-card-btns{gap:8px}
.umf-tpl{display:flex;gap:14px;align-items:flex-start;text-align:left;padding:16px;border-radius:22px;border:1.5px dashed #d6ad45;background:#fffdf7;cursor:pointer;font:inherit;color:inherit;transition:transform .15s,box-shadow .15s}
.umf-tpl:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(63,120,168,.18);background:#fff}
.umf-tpl b{display:block;font-size:22px;font-weight:400}
.umf-tpl small{display:block;color:var(--soft);font-size:16px;margin-bottom:4px}
.umf-tpl-emo{flex:none;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;font-size:30px;background:#dcf0fd;box-shadow:0 0 0 2px #fff,0 0 0 3.5px #d6ad45}
/* Bearbeiten */
.umf-ed{display:grid;grid-template-columns:minmax(280px,380px) minmax(0,1fr);gap:22px;align-items:start}
.ue-side .card,.ue-main .card{padding:20px}
.ue-side h3{font-size:24px}
.ue-q{display:flex;align-items:center;gap:4px;border:1.5px solid #e1edf7;border-radius:16px;background:#fff;padding:4px 4px 4px 0}
.ue-q.sel{border-color:var(--ink);background:#f3faff;box-shadow:0 4px 12px rgba(63,120,168,.15)}
.ue-qsel{all:unset;cursor:pointer;flex:1;min-width:0;display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:12px}
.ue-qsel:focus-visible{outline:3px solid var(--focus)}
.ue-n{flex:none;width:28px;height:28px;border-radius:50%;background:#dcf0fd;display:grid;place-items:center;font-size:15px}
.ue-ic{flex:none;font-size:20px}
.ue-qt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:17px}
.ue-qt i{color:var(--soft)}
.ue-qb{display:flex;gap:2px;flex:none}
.ue-qb button{width:30px;height:30px;border-radius:8px;border:0;background:transparent;cursor:pointer;font-size:15px;color:var(--soft)}
.ue-qb button:hover:not([disabled]){background:#dcf0fd;color:var(--ink)}
.ue-qb button[disabled]{opacity:.3;cursor:default}
.ue-qb button.armed{background:#b5524a;color:#fff}
.ue-set .chips{gap:8px;margin-top:6px}
.ue-set .chip{min-height:40px;font-size:16px;padding:0 14px}
.ue-types{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
.ue-type{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;padding:14px;border-radius:18px;border:1.5px solid #e1edf7;background:linear-gradient(180deg,#fff 0%,#f7fbfe 100%);cursor:pointer;font:inherit;color:inherit;box-shadow:0 6px 16px rgba(63,120,168,.1);transition:transform .15s,box-shadow .15s}
.ue-type:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(63,120,168,.2);border-color:#d6ad45}
.ue-type .ue-emo{font-size:32px;line-height:1}
.ue-type b{font-size:20px;font-weight:400}
.ue-type small{color:var(--soft);font-size:15px;line-height:1.3}
.ue-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 14px;border-radius:999px;background:#dcf0fd;font-size:17px}
.ue-opt{display:flex;align-items:center;gap:8px}
.ue-opt .input{flex:1;min-width:0}
.ue-dot{flex:none;width:14px;height:14px;border-radius:50%}
.ue-ok{flex:none;min-height:44px;padding:0 12px;border-radius:12px;border:1.5px dashed #9fb7a0;background:#fff;color:#5f6963;cursor:pointer;font:inherit;font-size:16px}
.ue-ok.on{border:2px solid #4a7536;background:#e9f1e3;color:#3f6b2e}
.ue-two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ue-four{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ue-phone{max-width:420px;margin:0 auto;width:100%;border-radius:30px;border:8px solid #1f2421;background:#f4f9fd;padding:18px 14px;box-shadow:0 14px 30px rgba(63,120,168,.2)}
.ku-prev{pointer-events:none;display:flex;flex-direction:column;gap:12px;text-align:center;font-family:'Fredoka','Andika',system-ui,sans-serif;font-size:15px}
.ku-prev .ku-q{font-size:22px;font-family:'Fredoka','Andika',system-ui,sans-serif;font-weight:500}
.ku-prev .kid-input{height:50px;font-size:20px}
.ku-prev .ku-opt{min-height:48px;font-size:17px}
@media (max-width:860px){.umf-ed{grid-template-columns:1fr}.ue-two{grid-template-columns:1fr}}
.umf-rescard h3{font-size:26px}
.ur-rangkids{columns:2;column-gap:30px;margin:0;padding-left:1.6em;font-size:19px}
.ur-rangkids li{break-inside:avoid}

/* Anzeige an der Wandtafel */
.umf-show{height:100vh;height:100dvh;display:flex;flex-direction:column;gap:10px;padding:12px 20px 14px;overflow:hidden;
  background:radial-gradient(ellipse at 10% 0%,#e3f2fd 0%,transparent 55%),radial-gradient(ellipse at 100% 100%,#fbf3dc 0%,transparent 50%),#f4f9fd}
.us-head{flex:none;display:flex;align-items:center;gap:10px 18px;flex-wrap:wrap}
.us-tt{display:flex;flex-direction:column;flex:1 1 220px;min-width:0}
.us-tt .kick{color:#3f78a8;letter-spacing:.1em;font-size:16px}
.us-tt b{font-weight:400;font-size:26px;line-height:1.1}
.us-join{padding:6px 16px;border-radius:999px;background:#fff;border:1.5px dashed #d6ad45;font-size:17px;color:#5f6963}
.us-join b{color:#1f2421;font-weight:400}
.us-mainarea{flex:1;min-height:0;display:flex;flex-direction:column;gap:10px}
.us-q{flex:none;display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px}
.us-nr{font-size:18px;color:#3f78a8;letter-spacing:.05em}
.us-q h1{font-size:clamp(28px,4.4vw,60px);line-height:1.1;max-width:1300px}
.us-res{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;align-items:center;overflow:auto;padding:6px 4px}
.us-res>*{width:100%;max-width:1400px}
.us-info p{font-size:clamp(24px,3vw,40px);text-align:center;white-space:pre-line;max-width:1100px;margin:0 auto}
.us-hidden{gap:4px;text-align:center}
.us-hidden>*{width:auto}
.us-big{font-size:clamp(80px,16vh,170px);line-height:1;color:#3f78a8}
.us-hidden span{font-size:30px}
.us-hidden small{font-size:20px;color:#5f6963}
.us-bubbles{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:640px!important;min-height:30px;margin-bottom:12px}
.us-bubbles i{width:26px;height:26px;border-radius:50%;opacity:.85;animation:usPop .5s ease-out both,usBob 2.4s ease-in-out infinite}
@keyframes usPop{from{transform:scale(0)}to{transform:scale(1)}}
@keyframes usBob{0%,100%{translate:0 0}50%{translate:0 -6px}}
.umf-show .board-fehlt{flex:none}
.us-foot{flex:none;display:flex;flex-direction:column;gap:8px}
.us-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px;border-radius:999px;background:#fff;border:1.5px solid #e1edf7;box-shadow:0 8px 20px rgba(63,120,168,.12)}
.us-more{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.us-main-btns{display:flex;flex-wrap:wrap;gap:8px;flex:1;justify-content:center}
.us-count{display:inline-flex;align-items:center;gap:8px;font-size:20px;padding:0 8px;white-space:nowrap}
.us-count b{font-size:28px;font-weight:400;color:#3f78a8}
.us-prog{display:inline-block;width:90px;height:10px;border-radius:999px;background:#e1edf7;overflow:hidden}
.us-prog i{display:block;height:100%;background:#7ea56a;border-radius:999px;transition:width .4s}
.umf-show .board-btn{font:inherit;font-size:18px}
.umf-show .board-btn[disabled]{opacity:.35;cursor:default;transform:none;box-shadow:none}
.umf-show .board-btn.hot{background:#dcf0fd;border-color:#3f78a8}
.umf-show .board-btn.warn{background:#fbf3dc;border-color:#d6ad45}
.umf-show .board-btn.on{background:#e9f1e3;border-color:#7ea56a}
.umf-show .board-btn.armed{background:#b5524a;color:#fff;border-color:#b5524a}
.umf-show .us-next{background:#3f78a8;color:#fff;border-color:#3f78a8}
.umf-show .us-next:hover{background:#2f5f8f}
.umf-show.zu .us-q h1::after{content:" 🔒";font-size:.6em;vertical-align:middle}
.umf-show .spr-result{gap:16px}

/* Ergebnisse */
.ur-leer{text-align:center;color:#5f6963;font-size:24px;padding:30px}
.ur-cols{height:100%;min-height:260px;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:clamp(10px,2vw,30px);align-items:stretch}
.ur-col{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;transition:opacity .3s}
.ur-c{font-weight:400;font-size:clamp(26px,3.4vw,48px);line-height:1;color:#1f2421;display:flex;flex-direction:column;align-items:center}
.ur-c small{font-size:.42em;color:#5f6963}
.ur-box{flex:1;min-height:60px;width:100%;display:flex;align-items:flex-end;justify-content:center}
.ur-bar{display:block;width:min(100%,180px);border-radius:16px 16px 6px 6px;box-shadow:inset 0 -6px 0 rgba(0,0,0,.08);transition:height .5s cubic-bezier(.3,1.3,.5,1)}
.ur-col .ur-l{font-size:clamp(17px,1.9vw,28px);line-height:1.15;text-align:center;display:flex;flex-direction:column;align-items:center;gap:2px;overflow-wrap:anywhere}
.ur-col .ur-l.emo .ur-emo{font-size:clamp(34px,5vw,70px);line-height:1}
.ur-col .ur-l:not(.emo) .ur-emo{font-size:1.3em}
.ur-col.ok .ur-bar{box-shadow:0 0 0 4px #fff,0 0 0 8px #7ea56a}
.ur-col.no{opacity:.4}
.ur-ok{display:inline-grid;place-items:center;width:1.4em;height:1.4em;border-radius:50%;background:#4a7536;color:#fff;font-size:.8em}
.ur-who{font-size:14px;color:#5f6963;text-align:center;line-height:1.2}
.ur-hbars{display:flex;flex-direction:column;gap:10px;width:100%}
.ur-h{display:grid;grid-template-columns:minmax(90px,38%) 1fr auto;align-items:center;gap:6px 12px;text-align:left}
.ur-h .ur-l{display:flex;align-items:center;gap:6px;font-size:18px;line-height:1.2;overflow-wrap:anywhere}
.ur-h .ur-emo{font-size:24px}
.ur-h .ur-t{height:22px;border-radius:999px;background:#eef4f9;overflow:hidden}
.ur-h .ur-t i{display:block;height:100%;border-radius:999px;transition:width .5s}
.ur-h b{font-size:20px;min-width:1.5em;text-align:right;font-weight:400}
.ur-h .ur-who{grid-column:1/-1;text-align:left;margin-top:-4px}
.ur-h.ok .ur-l{color:#3f6b2e}
.ur-h.ok .ur-t{box-shadow:0 0 0 2px #7ea56a}
.ur-h.no{opacity:.5}
.ur-cloud{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;align-content:center;gap:6px 22px;padding:10px;min-height:200px}
.ur-cloud.sm{gap:2px 12px;min-height:0}
.ur-w{display:inline-block;line-height:1.05;font-family:var(--h);transition:transform .2s;cursor:default}
.ur-w sup{font-size:.4em;color:#5f6963;margin-left:2px}
.ur-w[data-a]{cursor:pointer}
.ur-w[data-a]:hover{text-decoration:line-through;opacity:.6}
.ur-cards{columns:4 230px;column-gap:14px;width:100%}
.ur-cards.sm{columns:2 200px}
.ur-card{position:relative;break-inside:avoid;margin:0 0 14px;padding:16px 18px;border-radius:18px;border:1.5px solid rgba(31,36,33,.08);box-shadow:0 6px 16px rgba(63,120,168,.12);animation:usPop .35s ease-out both}
.ur-card p{font-size:clamp(18px,1.7vw,26px);line-height:1.25;white-space:pre-line;overflow-wrap:anywhere}
.ur-cards.sm .ur-card p{font-size:17px}
.ur-card small{display:block;margin-top:6px;color:#5f6963;font-size:15px}
.ur-x{position:absolute;top:6px;right:6px;width:30px;height:30px;border-radius:50%;border:0;background:rgba(255,255,255,.8);cursor:pointer;opacity:0;transition:opacity .2s;font-size:14px}
.ur-card:hover .ur-x,.ur-x:focus{opacity:1}
.ur-skala{display:flex;flex-direction:column;gap:18px;width:100%}
.ur-skends{display:grid;grid-template-columns:minmax(120px,30%) 1fr 1fr;gap:12px;color:#5f6963;font-size:16px}
.ur-skends span:last-child{text-align:right}
.ur-sk{display:grid;grid-template-columns:minmax(120px,30%) 1fr;gap:12px;align-items:end}
.ur-sk .ur-l{font-size:clamp(17px,1.8vw,26px);line-height:1.2;align-self:center}
.ur-skbar{position:relative;display:grid;grid-template-columns:repeat(var(--m),1fr);gap:4px;height:clamp(70px,13vh,140px);padding-bottom:22px}
.ur-skc{position:relative;display:flex;align-items:flex-end;justify-content:center;border-bottom:2px solid #c5d8e8}
.ur-skc i{display:block;width:70%;border-radius:8px 8px 2px 2px;opacity:.85;transition:height .5s}
.ur-skc small{position:absolute;bottom:-22px;font-size:14px;color:#5f6963}
.ur-avg{position:absolute;top:-6px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;pointer-events:none}
.ur-avg b{font-weight:400;font-size:17px;padding:1px 10px;border-radius:999px;background:#1f2421;color:#fff;white-space:nowrap}
.ur-avg::after{content:"";width:2px;height:clamp(40px,9vh,100px);background:#1f2421;opacity:.5}
.ur-skala.sm .ur-sk,.ur-skala.sm .ur-skends{grid-template-columns:1fr}
.ur-skala.sm .ur-skends span:first-child{display:none}
.ur-skala.sm .ur-skends{grid-template-columns:1fr 1fr}
.ur-skala.sm .ur-skbar{height:90px}
.ur-rang{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;width:100%}
.ur-rang li{display:grid;grid-template-columns:2.4em minmax(100px,34%) 1fr auto;align-items:center;gap:12px;font-size:clamp(18px,2vw,30px)}
.ur-rang .ur-p{font-size:1.2em;text-align:center}
.ur-rang .ur-t{height:.9em;border-radius:999px;background:#eef4f9;overflow:hidden}
.ur-rang .ur-t i{display:block;height:100%;border-radius:999px;transition:width .5s}
.ur-rang b{font-weight:400;font-size:.75em;color:#5f6963;white-space:nowrap}
.ur-rang.sm li{grid-template-columns:2em 1fr auto;font-size:17px}
.ur-rang.sm .ur-t{grid-column:2/-1;grid-row:2}
.ur-zahl{display:flex;flex-direction:column;gap:8px;width:100%}
.ur-zl{position:relative;height:clamp(140px,30vh,340px);border-bottom:3px solid #1f2421;margin-top:30px}
.ur-zahl.sm .ur-zl{height:120px}
.ur-zb{position:absolute;bottom:0;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding:0 2px}
.ur-zb i{display:block;width:100%;border-radius:8px 8px 0 0;background:#5f97c8;opacity:.85;transition:height .5s}
.ur-zb b{position:absolute;top:auto;bottom:calc(100% + 2px);font-weight:400;font-size:15px;color:#5f6963}
.ur-zb b{bottom:auto;top:-22px}
.ur-zok{position:absolute;bottom:-3px;top:-30px;width:0;border-left:3px dashed #4a7536}
.ur-zok b{position:absolute;top:0;left:6px;white-space:nowrap;font-weight:400;font-size:18px;color:#fff;background:#4a7536;padding:1px 10px;border-radius:999px}
.ur-zax{display:flex;justify-content:space-between;color:#5f6963;font-size:17px}
.ur-stats{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.ur-stats span{padding:6px 14px;border-radius:999px;background:#fff;border:1.5px solid #e1edf7;font-size:18px}
.ur-stats b{font-weight:400;color:#3f78a8;font-size:1.15em}
.ur-near{text-align:center;font-size:20px}
.ur-near b{font-weight:400;color:#3f6b2e}
.ur-feld{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto 1fr auto;gap:6px 10px;align-items:center;justify-items:center;height:100%;min-height:280px;max-width:min(100%,900px)!important}
.ur-feld .o{grid-column:2;grid-row:1}.ur-feld .u{grid-column:2;grid-row:3}.ur-feld .l{grid-column:1;grid-row:2}.ur-feld .r{grid-column:3;grid-row:2}
.ur-ax{font-size:clamp(15px,1.6vw,22px);color:#5f6963;max-width:9em;text-align:center;line-height:1.15}
.ur-fq{grid-column:2;grid-row:2;position:relative;width:100%;height:100%;min-height:200px;border-radius:20px;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;border:2px solid #c5d8e8;background:#fff;touch-action:manipulation}
.ur-fq>i:nth-child(1){background:#fcefed}.ur-fq>i:nth-child(2){background:#e9f1e3}.ur-fq>i:nth-child(3){background:#efe7f8}.ur-fq>i:nth-child(4){background:#dcf0fd}
.ur-fq::before,.ur-fq::after{content:"";position:absolute;background:rgba(31,36,33,.15)}
.ur-fq::before{left:50%;top:0;bottom:0;width:2px}.ur-fq::after{top:50%;left:0;right:0;height:2px}
.ur-dot{position:absolute;width:clamp(22px,2.6vw,34px);height:clamp(22px,2.6vw,34px);margin:calc(clamp(22px,2.6vw,34px) / -2) 0 0 calc(clamp(22px,2.6vw,34px) / -2);border-radius:50%;border:2px solid #fff;box-shadow:0 2px 6px rgba(31,36,33,.25);display:grid;place-items:center;font-size:14px;z-index:1;animation:usPop .35s ease-out both}
.ur-dot.me{width:40px;height:40px;margin:-20px 0 0 -20px;background:#3f78a8;border:4px solid #fff;box-shadow:0 0 0 3px #d6ad45,0 4px 10px rgba(31,36,33,.3)}
.ur-mitte{position:absolute;transform:translate(-50%,-50%);font-size:34px;color:#d6ad45;text-shadow:0 0 6px #fff;z-index:2}
.ur-feld.sm{min-height:0;gap:4px 6px}
.ur-feld.sm .ur-fq{aspect-ratio:1;height:auto;min-height:0}
.ur-feld.sm .ur-ax{font-size:14px;max-width:6em}
.ur-feld.sm .ur-dot:not(.me){width:16px;height:16px;margin:-8px 0 0 -8px;font-size:0}

/* Kinder */
.umf-tile{background:#dcf0fd!important}
.umf-tile span span{color:#2f5f8f!important}
.ku{gap:18px}
.ku-nr{font-size:16px;color:#3f78a8;letter-spacing:.05em}
.ku-q{font-size:clamp(26px,5vw,36px);line-height:1.15}
.ku-hint{color:#5f6963;font-size:17px}
.ku-big{font-size:64px;line-height:1}
.ku-info{font-size:22px;white-space:pre-line}
.ku-opts{display:flex;flex-direction:column;gap:12px}
.ku-opt{display:flex;align-items:center;gap:14px;min-height:64px;padding:8px 18px 8px 10px;border-radius:20px;border:2px solid rgba(31,36,33,.12);background:#fff;font:inherit;font-size:21px;text-align:left;cursor:pointer;box-shadow:0 6px 14px rgba(63,120,168,.12);transition:transform .12s}
.ku-opt:active{transform:scale(.98)}
.ku-mark{flex:none;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--c);color:#fff;font-family:var(--h);font-size:22px}
.ku-opt.on{border:3px solid var(--c);background:color-mix(in srgb,var(--c) 14%,#fff);box-shadow:0 0 0 3px #fff,0 0 0 5px var(--c)}
.ku-emos{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:10px}
.ku-emo{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 4px;border-radius:22px;border:2px solid rgba(31,36,33,.1);background:#fff;cursor:pointer;font:inherit;box-shadow:0 6px 14px rgba(63,120,168,.12);transition:transform .12s}
.ku-emo .e{font-size:clamp(40px,9vw,60px);line-height:1}
.ku-emo small{font-size:15px;line-height:1.15;color:#5f6963}
.ku-emo.on{border:3px solid #3f78a8;background:#dcf0fd;transform:scale(1.06)}
.ku-ins{display:flex;flex-direction:column;gap:10px}
.kid-input.ku-in,.ku-zahl .kid-input{text-transform:none;letter-spacing:0;font-size:26px;height:64px}
.kid-input.ku-ta{height:auto;min-height:110px;font-family:var(--b);font-size:21px;text-align:left;padding:14px 16px;line-height:1.35;resize:vertical}
.ku-skala{display:flex;flex-direction:column;gap:20px}
.ku-sk p{font-size:20px;margin-bottom:8px}
.ku-skr{display:grid;grid-template-columns:repeat(var(--m),minmax(0,1fr));gap:6px}
.ku-skb{min-height:56px;border-radius:16px;border:2px solid rgba(31,36,33,.12);background:#fff;font-family:var(--h);font-size:24px;cursor:pointer;padding:0}
.ku-skb.on{background:#3f78a8;color:#fff;border-color:#3f78a8;transform:scale(1.06)}
.ku-ends{display:flex;justify-content:space-between;gap:10px;font-size:15px;color:#5f6963;margin-top:4px}
.ku-rang{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.ku-rang li{display:flex;align-items:center;gap:10px;padding:8px 8px 8px 10px;border-radius:18px;background:#fff;border:2px solid rgba(31,36,33,.1);box-shadow:0 4px 10px rgba(63,120,168,.1);text-align:left}
.ku-p{flex:none;width:38px;height:38px;border-radius:50%;background:#fbf3dc;border:2px solid #d6ad45;display:grid;place-items:center;font-family:var(--h);font-size:20px}
.ku-l{flex:1;min-width:0;font-size:20px;overflow-wrap:anywhere}
.ku-rang button,.ku-pt button{flex:none;width:50px;height:50px;border-radius:14px;border:2px solid rgba(31,36,33,.15);background:#f3faff;font-size:22px;cursor:pointer}
.ku-rang button[disabled],.ku-pt button[disabled]{opacity:.3;cursor:default}
.ku-left{font-size:20px}
.ku-left b{font-size:28px;color:#3f78a8;font-weight:500}
.ku-pts{display:flex;flex-direction:column;gap:10px}
.ku-pt{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:18px;background:#fff;border:2px solid rgba(31,36,33,.1);text-align:left}
.ku-pt>b{min-width:3.2em;text-align:center;font-size:20px;font-weight:500}
.ku-zahl{display:flex;align-items:center;gap:10px}
.ku-zahl span{font-size:24px}
.ku .ur-feld{min-height:0;width:100%}
.ku .ur-fq{aspect-ratio:1;height:auto;cursor:crosshair}
.ku-done{display:flex;flex-direction:column;align-items:center;gap:6px;padding:18px;border-radius:22px;background:#e9f1e3;border:2px solid #7ea56a}
.ku-done .ku-big{width:70px;height:70px;border-radius:50%;background:#7ea56a;color:#fff;display:grid;place-items:center;font-size:40px}
.ku-done b{font-size:22px;font-weight:500}
.ku-done span:last-child{font-size:18px;color:#3f6b2e;overflow-wrap:anywhere}
.ku-rich{font-size:22px;padding:10px 14px;border-radius:16px;background:#fbf3dc}
.ku-rich.ok{background:#e9f1e3;color:#3f6b2e}
.ku-timer{font-size:22px;color:#a8650c}
.ku-res{display:flex;flex-direction:column;gap:10px;padding:16px;border-radius:22px;background:#f7fbfe;border:1.5px dashed #b9d6ec;text-align:left}
.ku-res .ku-nr{text-align:center}
.ku-dots{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.ku-d{width:38px;height:38px;border-radius:50%;border:2px solid rgba(31,36,33,.15);background:#fff;font-family:var(--h);font-size:17px;cursor:pointer}
.ku-d.ok{background:#e9f1e3;border-color:#7ea56a}
.ku-d.cur{background:#3f78a8;color:#fff;border-color:#3f78a8}
.ku-nav{display:flex;justify-content:space-between;align-items:center;gap:10px}
.ku-nav .kid-btn{min-width:130px}
.ku-fertig{font-family:var(--h);font-size:22px;color:#3f6b2e}
body.kidv .kid-go[disabled]{background:#c9d6e2;color:#5f6963;box-shadow:none;cursor:default}
.ur-feld.sm{max-width:460px!important;margin:0 auto}
.ku .ur-feld.sm{max-width:100%!important}
.umf-show .ranking{columns:2;max-width:900px;margin:0 auto;text-align:left}
.ku .ur-feld.sm{grid-template-columns:auto minmax(200px,1fr) auto;gap:4px}
.ku .ur-feld.sm .ur-ax.l,.ku .ur-feld.sm .ur-ax.r{max-width:4.2em;font-size:13px}
/* ---- Version 97: Umfrage offen per QR-Code ---- */
.umf-wer{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.umf-wer-btn{display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left;padding:18px;border-radius:22px;border:1.5px solid #e1edf7;background:linear-gradient(180deg,#fff 0%,#f7fbfe 100%);cursor:pointer;font:inherit;color:inherit;box-shadow:0 6px 16px rgba(63,120,168,.12);transition:transform .15s,box-shadow .15s}
.umf-wer-btn:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(63,120,168,.2);border-color:#d6ad45}
.umf-wer-btn b{font-size:22px;font-weight:400}
.umf-wer-btn small{color:var(--soft);font-size:16px;line-height:1.3}
.umf-wer-emo{font-size:36px;line-height:1}
@media (max-width:560px){.umf-wer{grid-template-columns:1fr}}
.us-join.us-offen{display:flex;align-items:center;gap:12px;padding:6px 16px 6px 6px;border-radius:20px;cursor:pointer;font:inherit;font-size:17px;color:#5f6963;text-align:left;line-height:1.3}
.us-join.us-offen:hover{background:#fffdf7}
.us-qrmini{flex:none;width:74px;height:74px;border-radius:12px;background:#fff;overflow:hidden;display:grid;place-items:center}
.us-qrmini svg{width:100%;height:100%;display:block}
.us-nr6{font-size:22px;letter-spacing:.06em;color:#3f78a8!important}
.ku-brand{display:flex;align-items:center;justify-content:center;gap:10px;font-family:var(--h);font-size:17px;color:#5f6963}
.ku-brand img{width:40px;height:40px;border-radius:50%;background:#fff;padding:2px;box-shadow:0 0 0 2px #d6ad45}

/* Einheitlicher Zurück-Knopf (wie Eulenkiste) */
.kn-back{align-items:center;gap:6px;padding:3px 4px 3px 13px!important;min-height:0!important;height:auto!important;border-radius:999px!important;background:#fff!important;color:#1f2421!important;border:0!important;text-decoration:none;font:700 19px/1 system-ui,-apple-system,sans-serif!important;box-shadow:0 4px 14px rgba(63,120,168,.2)!important;flex:none;cursor:pointer}
.kn-back{display:inline-flex}
.kn-back:hover{box-shadow:0 6px 18px rgba(63,120,168,.3)!important;transform:none}
.kn-back img{width:34px;height:34px;display:block;border-radius:50%}
.player-bar .kn-back{min-height:0}
.kid-top .kn-back{margin-right:auto}
/* Fächer-Bilder in den Kacheln der Lehrperson */
.tile .sw.sw-bild{padding:0;overflow:hidden;background:#fff!important}
.tile .sw.sw-bild img{width:100%;height:100%;display:block;border-radius:50%}
body.lp .tile .sw.sw-bild{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--gold)}
body.wechsel #app{visibility:hidden}
/* Elterngespräche Version 29: Liste, Aufklappen, «dabei» */
.eg .umf-hero h1{font-size:clamp(32px,4.5vw,46px)}
.eg-ttitle{font-size:24px;font-weight:400;line-height:1.2}
.eg .pill.eg-st-eg-auf{background:var(--leaf-soft,#e9f1e3);border:1.5px solid #7ea56a;color:#3f6b2e}
.eg .pill.eg-st-eg-alt{background:#f1f1ef;border:1.5px solid #c9c9c4;color:#6b6b66}
.eg .pill.eg-st-{background:var(--sun-soft,#fbf3dc);border:1.5px solid var(--gold,#d6ad45);color:#6b5418}
.eg-tcard .pill{align-self:flex-start}
button.eg-time{white-space:nowrap;flex:none;width:auto;display:inline-flex;align-items:center;gap:6px;border:0;background:transparent;font:inherit;color:var(--ink);cursor:pointer;padding:4px 6px;margin-left:-6px;border-radius:10px;text-align:left}
button.eg-time:hover{background:var(--sky-soft,#dcf0fd)}
.eg-pfeil{font-size:14px;color:var(--soft);width:12px}
.eg-n{min-width:24px;height:24px;padding:0 6px;border-radius:999px;background:var(--sky-soft,#dcf0fd);border:1.5px solid var(--line2);font-size:14px;display:inline-grid;place-items:center;color:var(--sky-deep,#3f78a8)}
.eg-rows li.auf{box-shadow:var(--schatten)}
.eg-wholist{flex:1 1 100%;background:#fff;border:1.5px dashed var(--gold,#d6ad45);border-radius:14px;padding:10px 14px;font-size:17px}
.eg-wholist ul{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:4px}
.eg-wholist li{display:flex!important;align-items:center;gap:8px;flex-wrap:wrap;padding:0!important;border:0!important;background:none!important;min-height:0!important;box-shadow:none!important}
.eg-in{flex:none;min-height:38px;padding:0 14px;border-radius:999px;border:1.5px dashed var(--line2);background:#fff;font:inherit;font-size:16px;color:var(--soft);cursor:pointer}
.eg-in.on{border:1.5px solid #7ea56a;background:var(--leaf-soft,#e9f1e3);color:#3f6b2e}
.eg-in:hover{border-color:var(--ink)}
@media print{ .eg .umf-page,.umf-page.eg{padding:0} .eg-wholist{display:none} }
/* ---- Version 101: Umfrage-Vorlagen (eigene, für alle, löschen und wieder einfügen) ---- */
.umf-tpl{flex-direction:column;align-items:stretch;gap:8px;cursor:default}
.umf-tpl-open{all:unset;cursor:pointer;display:flex;gap:14px;align-items:flex-start;text-align:left;border-radius:16px}
.umf-tpl-open:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.umf-tpl-badge{display:inline-block;margin-top:6px;padding:2px 10px;border-radius:999px;background:#fbf3dc;border:1px solid #e9d39a;font-size:14px;color:#6b5418}
.umf-tpl-acts{display:flex;justify-content:flex-end;gap:6px;flex-wrap:wrap}
.umf-weg{padding:12px 18px;display:flex;flex-direction:column;gap:10px}
.umf-weg-head{all:unset;cursor:pointer;display:flex;justify-content:space-between;gap:10px;font-size:19px;color:var(--soft)}
.umf-weg-row{gap:10px;flex-wrap:nowrap}
.umf-tpl-emo.sm{width:40px;height:40px;font-size:22px}
.umf-emo-chips .chip{font-size:22px;padding:0 12px}
/* Werkzeuge, die die Lehrperson noch nicht hat: grau, mit Vorschau und «Hol es dir» */
.tt-mehr-kopf{flex:1 1 100%;margin-top:22px}
.tt-mehr-kopf h3{margin:0;font-family:var(--h);font-weight:400;font-size:24px}
.tt-mehr-kopf h3 .sterne{color:var(--gold);font-size:14px;letter-spacing:.2em}
.tt-mehr-kopf p{margin:2px 0 0;color:var(--soft)}
body.lp .tooltile.tt-zu{background:#f6f7f8;border:1.5px dashed #cdd6de;box-shadow:none}
body.lp .tooltile.tt-zu:hover{transform:translateY(-2px);box-shadow:var(--schatten)}
body.lp .tt-zu .tt-open{position:relative;cursor:pointer}
body.lp .tt-zu .tt-open .tti,body.lp .tt-zu .tt-open b,body.lp .tt-zu .tt-open small{filter:grayscale(1);opacity:.55;transition:filter .2s,opacity .2s}
body.lp .tt-zu:hover .tt-open .tti,body.lp .tt-zu:hover .tt-open b{filter:grayscale(.3);opacity:.85}
.tt-schloss{position:absolute;top:10px;right:12px;font-size:17px;opacity:.75}
.tt-zu-fuss{display:flex;width:100%;border-top:1.5px dashed #cdd6de}
.tt-zu-fuss>*{flex:1 1 50%;border:0;background:#fff;padding:8px 4px 9px;font:inherit;font-size:15px;text-align:center;cursor:pointer;color:var(--ink);text-decoration:none;line-height:1.25}
.tt-zu-fuss .tt-vor{border-right:1.5px dashed #cdd6de}
.tt-zu-fuss .tt-vor:hover{background:var(--sky-soft)}
.tt-zu-fuss .tt-hol{background:#fbf3dc;color:#7a5a12;font-weight:700}
.tt-zu-fuss .tt-hol:hover{background:#f5e6b8}
.tt-vorschau{background:#fff;border-radius:24px;padding:22px;max-width:760px;width:calc(100vw - 32px);max-height:calc(100vh - 32px);overflow:auto;display:flex;flex-direction:column;gap:14px;box-shadow:0 20px 60px rgba(31,36,33,.25)}
.tt-v-kopf{display:flex;align-items:center;gap:14px}
.tt-v-kopf .tti{flex:none;width:72px;height:72px;border-radius:50%;display:grid;place-items:center;font-size:36px;background:var(--sky-soft,#e8f3fc);border:3px solid var(--gold,#d6ad45);overflow:hidden}
.tt-v-kopf .tti img{width:100%;height:100%;display:block;border-radius:50%}
.tt-v-kopf h2{margin:0;font-size:30px}
.tt-v-kopf p{margin:0;color:var(--soft)}
.tt-v-kopf .klein{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:#3f78a8}
.tt-v-bild{width:100%;border-radius:16px;border:1.5px solid #e1edf7;box-shadow:var(--schatten);display:block}
.tt-v-liste{margin:0;padding:0;list-style:none;display:grid;gap:6px;font-size:18px}
.tt-v-liste li{padding-left:28px;position:relative}
.tt-v-liste li::before{content:"✦";position:absolute;left:4px;color:var(--gold,#d6ad45)}
.tt-mehr-admin{flex:1 1 100%;margin-top:14px}

/* Knobelkiste bei den Kindern (K.view_knobel): wie die Übersicht der Knobelspiele, Knöpfe nach Art statt Unterordner */
body.kidv .kk-tile{background:#F6E7C8}
.kk{font-family:"Patrick Hand","Segoe Print","Comic Sans MS",cursive;display:flex;flex-direction:column;gap:22px}
.kk-kopf{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px}
.kk-kopf::before{content:"✦ ✧ ✦";color:#d6ad45;letter-spacing:.4em;font-size:15px}
.kk-bild{width:118px;height:118px;filter:drop-shadow(0 8px 16px rgba(63,120,168,.2))}
.kk-kopf h1{font-family:inherit;font-weight:400;font-size:clamp(40px,6vw,56px);line-height:1;margin:6px 0 0}
.kk-kopf h1::after{content:" ✦";color:#d6ad45;font-size:.5em;vertical-align:super}
.kk-kopf p{color:#5f6963;font-size:21px;max-width:560px;margin:0}
.kk-arten{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.kk-art{font:inherit;font-size:21px;min-height:48px;padding:4px 22px;border-radius:999px;border:2px solid #c5d8e8;background:#fff;color:#1f2421;cursor:pointer;box-shadow:0 4px 12px rgba(63,120,168,.12)}
.kk-art:hover{border-color:#1f2421}
.kk-art.on{background:#dcf0fd;border-color:#1f2421;box-shadow:inset 0 0 0 1px #1f2421}
.kk-spiele{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:22px}
.kk-karte{display:flex;flex-direction:column;align-items:flex-start;gap:6px;background:linear-gradient(180deg,#fff 0%,#fff 70%,#f7fbfe 100%);border:1.5px solid #e1edf7;border-radius:28px;padding:22px 20px 18px;box-shadow:0 10px 26px rgba(63,120,168,.18),0 2px 6px rgba(63,120,168,.1);min-width:0}
.kk-ic{width:96px;height:96px;margin-bottom:4px}
.kk-fach{font-size:16px;color:#3f78a8;letter-spacing:.08em;text-transform:uppercase}
.kk-karte b{font-weight:400;font-size:32px;line-height:1.05}
.kk-karte p{color:#5f6963;font-size:19px;line-height:1.3;margin:0}
.kk-stand{font-size:17px;color:#3f6b2e}
.kk-los{margin-top:auto;align-self:stretch;font:inherit;font-size:22px;min-height:50px;border-radius:16px;border:2px solid #1f2421;background:#dcf0fd;color:#1f2421;cursor:pointer;box-shadow:0 4px 12px rgba(63,120,168,.14)}
.kk-los:hover{transform:translateY(-1px)}
/* Verwaltung: Fach und Thema direkt in der Spieleliste ändern */
.ft-edit{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.ft-in{font:inherit;color:inherit;background:transparent;border:1.5px dashed #d9e3ee;border-radius:10px;padding:4px 8px;width:9.5em;min-width:0;cursor:text}
.ft-in:hover{border-color:var(--gold,#d6ad45);background:#fff}
.ft-in:focus{outline:none;border-style:solid;border-color:var(--gold,#d6ad45);background:#fff;box-shadow:0 0 0 3px rgba(214,173,69,.2)}
/* Spiele ohne blauen Balken: nur der runde Zurück-Knopf oben links, «Vollbild» klein unten rechts */
.player .player-bar{position:absolute;inset:0;z-index:2;display:block;padding:0;background:none;color:inherit;pointer-events:none}
.player .player-bar>*{pointer-events:auto}
.player .player-bar>b,.player .player-bar .starbar{display:none!important}
.player .player-bar .kn-back{position:absolute;top:max(12px,env(safe-area-inset-top,0px));left:max(12px,env(safe-area-inset-left,0px))}
.player .player-bar .btn[data-a="playerFull"]{position:absolute;right:max(12px,env(safe-area-inset-right,0px));bottom:max(12px,env(safe-area-inset-bottom,0px));min-height:36px;padding:0 14px;border-radius:999px;border:0;background:rgba(255,255,255,.88);color:#1f2421;box-shadow:0 4px 14px rgba(63,120,168,.25);font-size:14px;opacity:.75}
.player .player-bar .btn[data-a="playerFull"]:hover{opacity:1}
.player iframe{position:absolute;inset:0;height:100%}
.player .pmodal{top:12px}
.player.player-vk .player-bar{display:none!important}
/* Fach-Bild im Kopf und auf den Karten (Themen und Spiele wie in der Knobelkiste) */
.kk-fbild,.kk-fbuchst{display:grid;place-items:center;border-radius:50%;overflow:hidden;border:3px solid #d6ad45;box-shadow:0 0 0 3px #fff,0 6px 14px rgba(63,120,168,.2);background:#fff;flex:none}
.kk-fbild img{width:100%;height:100%;display:block;border-radius:50%}
.kk-fbuchst{font-size:44px;color:#1f2421}
.kk-ic.kk-fbild,.kk-ic.kk-fbuchst{width:84px;height:84px;margin:4px 0 6px 4px}
.kk-bild.kk-fbuchst{font-size:60px}
.kk-info{font-size:17px;color:#5f6963}
.kk-karte .kbar{align-self:stretch}
.kk-karte.extra{background:linear-gradient(180deg,#fffaf0 0%,#fff 70%)}
/* Verwaltung: mehrere Themen und Stichwörter pro Spiel, Filter nach Klasse/Stichwort */
.ft-chip{display:inline-flex;align-items:center;gap:2px;padding:3px 4px 3px 10px;border-radius:999px;background:#eef5fc;border:1.5px solid #d4e4f2;font-size:.95em;white-space:nowrap}
.ft-chip.lab{background:#fbf3dc;border-color:#ecd9a2}
.ft-chip:not(:has(.ft-x)){padding-right:10px}
.ft-x{border:0;background:none;font:inherit;font-size:1.1em;line-height:1;width:22px;height:22px;border-radius:50%;cursor:pointer;color:#7a6a55}
.ft-x:hover{background:rgba(0,0,0,.08)}
.ft-neu{width:8.5em;color:var(--soft,#5f6963)}
.ft-labs{margin-top:6px}
.af2{margin-top:-4px;padding-left:14px;border-left:3px solid var(--line2,#d9e4ee);align-items:center}
.af2 .chip{min-height:36px}
.af2-l{font-size:15px;color:var(--soft,#5f6963);margin-right:2px}
.af2-sort{margin-left:10px}
/* Stichwörter: farbige Schildchen, Farbwahl, Auswahl im Reiter «Spiele» */
.lab-pill{font-weight:400}
.lab-wahl{display:inline-flex;align-items:center;gap:2px}
.lab-pinsel{border:0;background:#fff;border-radius:50%;width:32px;height:32px;cursor:pointer;box-shadow:0 2px 8px rgba(63,120,168,.18);font-size:15px}
.lab-pinsel:hover{transform:scale(1.08)}
.lab-farben{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.lab-farbe{font:inherit;font-size:18px;min-height:46px;border-radius:999px;border:2px solid transparent;cursor:pointer}
.lab-farbe:hover{border-color:currentColor}
.sw-wahl{gap:10px;align-items:flex-end;flex-wrap:wrap;margin-left:auto}
.sw-feld{flex:0 0 auto;min-width:150px}
.sw-feld select{min-height:48px}
/* ===== Arbeitsstand-Tafel im Stil der Eulenkiste: Aquarell, Patrick Hand, Goldakzente ===== */
.board{font-family:"Patrick Hand","Segoe Print","Comic Sans MS",cursive;
  background:radial-gradient(900px 520px at 6% -6%,#d7e9fa 0%,transparent 62%),radial-gradient(800px 460px at 104% 6%,#fff0d2 0%,transparent 58%),radial-gradient(700px 520px at 50% 112%,#e3f3ea 0%,transparent 60%),#f4f9fd}
.board .board-head h1,.board .board-head p,.board .mx-h,.board .mx-subj,.board .cell,.board .tag,.board .board-fehlt,.board .mine,.board .board-btn{font-family:inherit}
.board .board-head h1{font-weight:400;letter-spacing:.01em}
.board .board-head h1::after{content:" ✦";color:#d6ad45;font-size:.55em;vertical-align:super}
.board .board-head .kick{font-family:system-ui,-apple-system,sans-serif}
.board .board-head p{font-size:19px}
.board .mx-h{background:#fff!important;border-width:2px!important;border-style:solid!important;font-size:clamp(17px,1.8vw,24px);font-weight:400;box-shadow:0 6px 16px rgba(63,120,168,.14);position:relative}
.board .mx-h .dot{width:36px;height:36px;box-shadow:0 0 0 3px #fff,0 0 0 5px #d6ad45}
.board .mx-subj{border:0;border-radius:24px;background:#fff;box-shadow:0 10px 24px rgba(63,120,168,.16),0 0 0 1.5px #ecdcae inset;font-weight:400;gap:12px;padding:8px 14px}
.board .mx-subj small{font-family:inherit;font-size:.62em;color:#7a6a55}
.mx-bild{flex:none;width:clamp(38px,8vh,72px);height:clamp(38px,8vh,72px);border-radius:50%;overflow:hidden;border:3px solid #d6ad45;box-shadow:0 0 0 3px #fff,0 6px 14px rgba(63,120,168,.2);background:#fff}
.mx-bild img{width:100%;height:100%;display:block;border-radius:50%}
.board .cell{border-width:2px;border-style:dashed;border-radius:26px;
  background-image:radial-gradient(circle at 20% 15%,rgba(255,255,255,.75) 0%,rgba(255,255,255,0) 45%),radial-gradient(circle at 85% 90%,rgba(255,255,255,.5) 0%,rgba(255,255,255,0) 40%)!important;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.8),0 8px 18px rgba(63,120,168,.1);padding:.45em}
.board .cell.here{border-style:solid;box-shadow:inset 0 0 0 3px currentColor,0 8px 18px rgba(63,120,168,.14)}
.board .tag{background:#fff;border:0;border-radius:999px;box-shadow:0 3px 8px rgba(31,36,33,.12),0 0 0 1.5px rgba(214,173,69,.45);padding:.1em .7em .1em .18em;animation:tafelPop .35s cubic-bezier(.2,1.5,.4,1) both}
.board .tag .ini{box-shadow:0 0 0 2px #fff,0 0 0 3.5px #d6ad45;color:#1f2421;font-family:inherit}
.board .tag.me{box-shadow:0 0 0 3px #d6ad45,0 4px 12px rgba(214,173,69,.45);background:#fffaf0}
@keyframes tafelPop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
.board .cell .put{font-family:inherit;font-size:15px!important;font-weight:400;border-style:dashed;background:rgba(255,255,255,.85)}
.board .board-fehlt{background:linear-gradient(180deg,#fffdf6,#fbf3dc);border:2px dashed #d6ad45;font-size:18px;color:#5f4b1e}
.board .board-fehlt b{font-weight:400;font-size:20px}
.board .board-fehlt b::before{content:"✦ ";color:#d6ad45}
.board .board-fehlt .tag{animation:none}
.board .mine{border-radius:26px;box-shadow:0 10px 24px rgba(63,120,168,.14),0 0 0 1.5px #ecdcae inset;font-size:19px}
.board .board-btn{font-family:inherit;font-size:18px;font-weight:400}
@media (prefers-reduced-motion:reduce){.board .tag{animation:none}}

.board .mx-h.blank{background:none!important;border:0!important;box-shadow:none}
.board .mx-h .lbl{font-size:clamp(17px,1.7vw,25px)!important;line-height:1.1}
/* ===== Kinder-Start (Klassencode) im Stil der Eulenkiste ===== */
.kc-code{position:relative;font-family:"Patrick Hand","Segoe Print","Comic Sans MS",cursive;text-align:center;align-items:center;gap:10px;max-width:600px;margin:10px auto 0;padding:34px 36px 32px;border-radius:34px;
  background:radial-gradient(420px 220px at 50% 0%,#eaf4fd 0%,rgba(255,255,255,0) 70%),#fff;border:1.5px solid #ecdcae;box-shadow:0 18px 44px rgba(63,120,168,.18),0 0 0 6px rgba(255,255,255,.6)}
.kc-sterne{color:#d6ad45;letter-spacing:.4em;font-size:17px;animation:kcFunkeln 3s ease-in-out infinite}
@keyframes kcFunkeln{50%{opacity:.45}}
.kc-bild{width:140px;height:140px;border-radius:50%;object-fit:cover;background:#dcf0fd;border:4px solid #d6ad45;box-shadow:inset 0 0 0 5px #fff,0 0 0 4px #fff,0 10px 24px rgba(63,120,168,.25);animation:kcSchweben 5s ease-in-out infinite}
@keyframes kcSchweben{50%{transform:translateY(-6px) rotate(-2deg)}}
.kc-code h1{font-family:inherit;font-weight:400;font-size:clamp(46px,7vw,64px);line-height:1;margin:6px 0 0;color:#1f2421}
.kc-code h1::after{content:" ✦";color:#d6ad45;font-size:.45em;vertical-align:super}
.kc-code .lead{font-family:inherit;font-size:clamp(20px,2.6vw,24px);color:#5f6963;max-width:460px;margin:0 auto 8px;line-height:1.3}
.kc-in{font-family:inherit!important;font-size:clamp(34px,5vw,46px)!important;letter-spacing:.08em;text-align:center;width:100%;min-height:84px;border-radius:24px!important;
  border:3px dashed #d6ad45!important;background:linear-gradient(180deg,#fffdf6,#fbf3dc)!important;color:#1f2421!important;box-shadow:inset 0 2px 6px rgba(150,110,20,.08)!important;outline:none}
.kc-in::placeholder{color:#c9b98c;opacity:1}
.kc-in:focus{border-style:solid!important;box-shadow:0 0 0 5px rgba(214,173,69,.22),inset 0 2px 6px rgba(150,110,20,.08)!important}
.kc-go{font-family:inherit!important;font-size:30px!important;font-weight:400!important;width:100%;min-height:72px;border:0!important;border-radius:999px!important;color:#3d2c05!important;
  background:linear-gradient(180deg,#ffd873,#f2be3c)!important;box-shadow:0 5px 0 #c99a2e,0 14px 24px rgba(214,173,69,.35)!important;transition:transform .12s,box-shadow .12s;cursor:pointer}
.kc-go:hover{transform:translateY(-2px)}
.kc-go:active{transform:translateY(4px);box-shadow:0 1px 0 #c99a2e,0 6px 12px rgba(214,173,69,.3)!important}
.kc-code .err:empty{display:none}
@media (prefers-reduced-motion:reduce){.kc-bild,.kc-sterne{animation:none}}
/* ===== Bilder-Passwort im Stil der Eulenkiste ===== */
.kc-pw{max-width:640px}
.kc-pw .slots{gap:14px;margin:4px 0 6px}
.kc-pw .slot{width:72px;height:72px;border-radius:50%;border:3px dashed #d6ad45;background:linear-gradient(180deg,#fffdf6,#fbf3dc);box-shadow:inset 0 2px 6px rgba(150,110,20,.08);display:grid;place-items:center;transition:transform .2s}
.kc-pw .slot.on{border-style:solid;background:linear-gradient(180deg,#ffd873,#f2be3c);box-shadow:0 0 0 4px #fff,0 6px 14px rgba(214,173,69,.4);animation:kcPop .35s cubic-bezier(.2,1.6,.4,1)}
@keyframes kcPop{from{transform:scale(.5)}to{transform:scale(1)}}
.kc-pw .syms{gap:16px;width:100%}
.kc-pw .sym{border:0!important;border-radius:26px!important;min-height:120px;box-shadow:0 0 0 3px #fff,0 0 0 5px rgba(214,173,69,.55),0 10px 22px rgba(63,120,168,.18)!important;transition:transform .15s,box-shadow .15s}
.kc-pw .sym:hover:not(:disabled){transform:translateY(-3px) rotate(-1deg);box-shadow:0 0 0 3px #fff,0 0 0 5px #d6ad45,0 14px 26px rgba(63,120,168,.24)!important}
.kc-pw .sym:active:not(:disabled){transform:scale(.95)}
.kc-pw .sym:disabled{opacity:.55}
.kc-pw .sym svg{filter:drop-shadow(0 2px 0 rgba(255,255,255,.7))}
.kc-knoepfe{width:100%;gap:12px;margin-top:6px}
.kc-nochmal{flex:1;min-height:66px;font-family:inherit!important;font-size:24px!important;font-weight:400!important;border-radius:999px!important;border:2px solid #ecdcae!important;background:#fff!important;color:#5f4b1e!important;box-shadow:0 6px 14px rgba(63,120,168,.12)}
.kc-pw .kc-go{flex:2;min-height:66px;width:auto}
.kc-pw .kc-go:disabled{background:linear-gradient(180deg,#f3ead2,#e9dcb8)!important;color:#a8977a!important;box-shadow:none!important;cursor:default;transform:none}
.kc-pw .muted{font-family:inherit;font-size:19px;color:#7a6a55}
@media (max-width:480px){.kc-pw .sym{min-height:96px}.kc-pw .slot{width:58px;height:58px}}
.kc-pw .lead{max-width:540px;text-wrap:balance}
/* Thema im Schildchen direkt ändern */
.ft-th{font:inherit;color:inherit;background:transparent;border:0;border-bottom:1.5px dashed transparent;padding:0 2px;min-width:3em;max-width:12em;cursor:text}
.ft-chip:hover .ft-th{border-bottom-color:#9fb8cf}
.ft-th:focus{outline:none;border-bottom:1.5px solid #d6ad45;background:#fff;border-radius:6px}