/* ═══════════ DER LERNRAUM SAGT, WOFÜR ER DA IST (r-lernklar, 2026-11-05) ═══════════
   Ben: „im lernraum müssen wir das klarer kommunizieren wofür der eigentlich ist
   und was welche elemente machen … wenns leer ist brauchen wir größere
   platzhalter mittig dass jeder checkt."
   Eigene Datei, damit die vielen Lernraum-Zweige in app.css nicht übereinander
   schreiben. Geladen nach app.css/handy.css (index.html, sw.js). */

/* ── Wand-Kopf: was hier hingehört, in Schülersprache ── */
#lp-wand .lp-wand-titel small{font:600 var(--f-2xs, 10.5px)/1 var(--sans); letter-spacing:.02em;
  text-transform:none; margin-left:9px; opacity:.85;}
@media (max-width:900px){ #lp-wand .lp-wand-titel small{display:none;} }

/* ── Die leere Wand: ein großer Zettel mitten an der Wand ── */
.lp6.wand-leer .lp-wand{height:auto !important; min-height:clamp(300px, 40dvh, 560px);
  display:flex; align-items:center; justify-content:center; padding:34px 24px 30px;}
.lp6.wand-leer .lp-wand-titel, .lp6.wand-leer #lp-neu, .lp6.wand-leer .lp-wand-hint{display:none;}
.lp-leer{position:relative; width:min(820px, 100%); margin:auto; text-align:center;
  background:#fffdf7; color:#2b2419; border-radius:4px; padding:34px clamp(20px, 4vw, 40px) 26px;
  transform:rotate(-.6deg); box-shadow:0 14px 34px rgba(52,36,18,.28), 0 2px 4px rgba(52,36,18,.18);}
.lp-leer::before{content:""; position:absolute; top:-10px; left:50%; margin-left:-10px; width:20px; height:20px;
  border-radius:50%; background:radial-gradient(circle at 34% 30%, #f3d9a0 0%, #b78a3e 50%, rgba(0,0,0,.45));
  box-shadow:0 4px 6px rgba(40,20,10,.4);}
.lp-leer-t{display:block; font:500 clamp(24px, 3.2vw, 32px)/1.2 var(--serif); color:#241d12; margin:0 0 10px;}
.lp-leer-s{font:400 var(--f-lh, 16px)/1.6 var(--sans); color:#5a4e3c; margin:0 auto 22px; max-width:46ch;}
.lp-leer-wege{display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:10px; text-align:left;}
.lp-leer-w{display:flex; align-items:center; gap:11px; min-height:64px; padding:12px 14px;
  border-radius:14px; border:1px solid rgba(92,70,44,.22); background:#f6efe0; color:#2b2419;
  cursor:pointer; font:inherit; text-align:left; transition:transform .15s, box-shadow .15s;}
.lp-leer-w:hover{box-shadow:0 4px 12px rgba(52,36,18,.16);}
.lp-leer-w:active{transform:scale(.98);}
.lp-leer-w.haupt{background:linear-gradient(180deg, #c9a25e, #a98545); border-color:transparent; color:#fffdf6;
  box-shadow:0 6px 14px rgba(120,84,30,.3);}
.lp-leer-ic{flex:0 0 auto; width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  background:rgba(92,70,44,.1);}
.lp-leer-w.haupt .lp-leer-ic{background:rgba(255,253,246,.22);}
.lp-leer-ic .ic{width:18px; height:18px;}
.lp-leer-wt{display:flex; flex-direction:column; gap:3px; min-width:0;}
.lp-leer-wt b{font:650 15px/1.2 var(--sans);}
.lp-leer-wt small{font:400 12.5px/1.3 var(--sans); opacity:.78;}
.lp-leer-kal{display:flex; align-items:center; gap:9px; width:100%; margin:14px 0 0; padding:10px 14px;
  border:1px dashed rgba(92,70,44,.35); border-radius:12px; background:none; color:#3c2f1c;
  font:400 14px/1.35 var(--sans); text-align:left; cursor:pointer;}
.lp-leer-kal .ic{flex:0 0 auto; width:17px; height:17px; opacity:.7;}
.lp-leer-kal span{flex:1; min-width:0;}
.lp-leer-kal em{font-style:normal; font-weight:650; color:#8a6a2f; white-space:nowrap;}
.lp-pro{margin:16px auto 0; max-width:52ch; font:400 12.5px/1.5 var(--sans); color:#7a6d58;}
.lk-einr .lp-pro{color:rgba(246,236,216,.55);}
.lp-pro-k{border:none; background:none; padding:0 0 0 4px; font:inherit; font-weight:650; color:#8a6a2f; cursor:pointer;}
.lk-einr .lp-pro-k{color:#e2c07a;}

/* Am Handy: derselbe Zettel, statt der Wand, über die ganze Breite */
.lp-leer.handy{transform:none; margin:22px 0 8px; padding:30px 18px 20px;}
.lp-leer.handy .lp-leer-wege{grid-template-columns:1fr;}
.lp-leer.handy .lp-leer-t{font-size:26px;}
.hdl-leer{display:flex; flex-direction:column; gap:6px; text-align:center; margin:18px 8px 4px;}
.hdl-leer b{font:500 20px/1.3 var(--serif); color:var(--ink);}
.hdl-leer small{font:400 14px/1.5 var(--sans); color:var(--ink2);}

/* ── Der leere Kasten: eine leere Karteikarte im Schacht (r-ich, 2026-11-05) ──
   Ruhig: eine Karte, ein Satz, eine Linie mit vier Stationen, ein Knopf.
   Die Karte ist Papier in beiden Themen (wie der Zettel an der Wand); im
   Dunkeln etwas gedaempft, damit sie im Schacht nicht blendet. Hinter ihr
   lugt eine zweite Kante hervor — der Stapel, der gleich entsteht. */
.lk-karten.leerkasten{padding:clamp(18px, 3vw, 34px) clamp(14px, 3vw, 28px); isolation:isolate;}
.lk-einr.lk-leerkarte{--lk-papier:#fbf6ea; --lk-tinte:#2b2419; --lk-leise:#5f5240; 
  position:relative; width:min(600px, 100%); max-width:none; text-align:center; color:var(--lk-tinte);
  background:var(--lk-papier); border-radius:6px; padding:22px clamp(16px, 3.4vw, 34px) 22px;
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset, 0 12px 28px rgba(0,0,0,.42), 0 2px 4px rgba(0,0,0,.3);}
.lk-einr.lk-leerkarte::before{content:""; position:absolute; left:0; right:0; top:46px; height:1.5px;
  background:rgba(192,86,61,.5);}                                 /* die rote Kopflinie einer Karteikarte */
.lk-einr.lk-leerkarte::after{content:""; position:absolute; z-index:-1; left:14px; right:14px; top:-7px; height:20px;
  border-radius:6px 6px 0 0; background:color-mix(in srgb, var(--lk-papier) 72%, #6b5434);}
:root[data-theme="dark"] .lk-einr.lk-leerkarte{--lk-papier:#ece3cf;}
.lk-lk-k{display:block; font:700 10.5px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase;
  color:var(--lk-leise); margin:0 0 22px; text-align:left;}
.lk-einr.lk-leerkarte .lk-lk-t{display:block; font:500 clamp(21px, 2.6vw, 26px)/1.25 var(--serif);
  color:var(--lk-tinte); margin:0 0 8px;}
.lk-einr.lk-leerkarte .lk-lk-s{font:400 var(--f-lh, 16px)/1.55 var(--sans); color:var(--lk-leise);
  margin:0 auto 22px; max-width:44ch;}
.lk-einr.lk-leerkarte u{color:#7a5a22;}

/* Vier Stationen auf einer Linie; die Ziffer im Ring traegt die Reiterfarbe */
.lp-weg{list-style:none; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:0 6px;
  padding:0; margin:0 0 24px; position:relative;}
.lp-weg::before{content:""; position:absolute; left:12.5%; right:12.5%; top:14px; height:2px;
  background:linear-gradient(90deg, #5b7c9d, #c9922e 38%, #c0563d 66%, #4f8a54); opacity:.55; border-radius:2px;}
.lp-weg li{position:relative; display:flex; flex-direction:column; align-items:center; gap:4px; min-width:0;}
.lp-weg i{display:grid; place-items:center; width:30px; height:30px; margin-bottom:5px; border-radius:50%;
  border:2px solid var(--fc); background:var(--lk-papier, #fbf6ea); color:var(--lk-tinte, #2b2419);
  font:700 13px/1 var(--sans); font-style:normal; position:relative;}
.lp-weg b{display:block; margin:0; font:650 13.5px/1.2 var(--sans); color:var(--lk-tinte, #2b2419);}
.lp-weg small{font:400 12px/1.3 var(--sans); color:var(--lk-leise, #5f5240);}

/* Der eine naechste Schritt — gross, mitten auf der Karte */
.lk-lk-akt{display:flex; flex-direction:column; align-items:center; gap:10px;}
.lk-lk-haupt{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; min-width:min(280px, 100%);
  min-height:56px; padding:11px 26px; border:none; border-radius:14px; cursor:pointer; font:inherit;
  background:linear-gradient(180deg, #8c6a2e, #735320); color:#fffdf6;
  box-shadow:0 6px 14px rgba(110,76,24,.32), 0 1px 0 rgba(255,255,255,.25) inset; transition:transform .15s, box-shadow .15s;}
.lk-lk-haupt:hover{box-shadow:0 8px 18px rgba(110,76,24,.38), 0 1px 0 rgba(255,255,255,.25) inset;}
.lk-lk-haupt:active{transform:scale(.98);}
.lk-lk-haupt b{display:block; margin:0; font:650 16px/1.15 var(--sans); color:#fffdf6;}
.lk-lk-haupt small{font:400 12.5px/1.2 var(--sans); color:rgba(255,253,246,.9);}
.lk-lk-leise{border:none; background:none; padding:4px 8px; font:600 13.5px/1.3 var(--sans);
  color:#7a5a22; cursor:pointer; text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px;}
.lk-leerkarte .lp-pro{color:var(--lk-leise); margin-top:14px;}
.lk-leerkarte .lp-pro-k{color:#7a5a22;}
/* Leere Wand: dort steht schon der bronzene Knopf — die Karte zeigt nur leise
   nach oben. Sonst ist ihr Knopf der Hauptknopf und der Hinweis fehlt. */
.lk-lk-hoch{display:none;}
.lp6.wand-leer .lk-leerkarte .lk-lk-haupt{display:none;}
.lp6.wand-leer .lk-leerkarte .lk-lk-hoch{display:inline-block; font-size:14.5px;}
.lk-lk-hoch span{display:inline-block; margin-left:2px; text-decoration:none;}
/* Traegt die Karte den Knopf, braucht die Ecke unten rechts keinen zweiten */
.lk-schacht:has(.lk-lk-akt) .lk-front-akt{display:none;}

/* Am Handy steht derselbe Weg im Zettel statt der Wand — schmal, also kleiner */
.lp-leer .lp-weg{--lk-papier:#fffdf7; margin:0;}
.lp-leer.handy .lp-weg b{font-size:12.5px;}
.lp-leer.handy .lp-weg small{font-size:11.5px;}

/* Quer ist der Schacht flach (iPad Air quer: 157 px, iPad mini quer: 81 px) —
   die Karte wird dort niedriger statt abgeschnitten. Nur quer: dort folgt die
   Hoehe dem Moebel, nicht dem Inhalt; hochkant bleibt sie, wie sie ist. */
body.layout-quer .lk-karten.leerkasten{container:lkleer / size; padding:12px 16px;}
@container lkleer (max-height:380px){
  .lk-einr.lk-leerkarte{padding:14px 22px 16px;}
  .lk-einr.lk-leerkarte::before, .lk-lk-k{display:none;}
  .lk-einr.lk-leerkarte .lk-lk-t{font-size:21px; margin-bottom:4px;}
  .lk-einr.lk-leerkarte .lk-lk-s{font-size:14.5px; margin-bottom:14px;}
  .lp-weg{margin-bottom:14px;}
  .lk-lk-haupt{min-height:46px; padding:8px 22px;}
  .lk-leerkarte .lp-pro{display:none;}
}
@container lkleer (max-height:260px){
  .lk-einr.lk-leerkarte{display:grid; grid-template-columns:minmax(0, 1fr) auto; grid-template-areas:"t t" "weg akt";
    align-items:center; gap:10px 22px; width:min(860px, 100%); padding:12px 20px;}
  .lk-einr.lk-leerkarte .lk-lk-t{grid-area:t; margin:0;}
  .lk-einr.lk-leerkarte .lk-lk-s{display:none;}
  .lp-weg{grid-area:weg; margin:0;}
  .lk-lk-akt{grid-area:akt;}
  .lk-lk-haupt{min-width:0;}
}
@container lkleer (max-height:150px){
  .lk-einr.lk-leerkarte{padding:8px 18px; gap:6px 22px;}
  .lk-einr.lk-leerkarte .lk-lk-t{font-size:18px;}
  .lp-weg small, .lk-lk-haupt small, .lk-lk-leise{display:none;}
  .lp-weg i{width:24px; height:24px; margin-bottom:2px; font-size:12px;}
  .lp-weg::before{top:11px;}
  .lp-weg b{font-size:12.5px;}
}
@container lkleer (max-height:100px){
  .lk-einr.lk-leerkarte{grid-template-areas:"weg akt"; padding:6px 16px;}
  .lk-einr.lk-leerkarte .lk-lk-t{display:none;}
  .lk-lk-haupt{min-height:40px; padding:6px 18px;}
}

/* ── Die Kante: rechts der Weg in einer Zeile ── */
.lp-kante-weg{font:700 9px/1 var(--sans, system-ui); letter-spacing:.1em; text-transform:uppercase;
  color:var(--messing-t, #332714); opacity:.7; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:calc(50% - 34px); min-width:0;}
.lp-kante-weg b{font-weight:700; opacity:1;}
@media (max-width:1180px){ .lp-kante-weg{font-size:0;} .lp-kante-weg b{font-size:9px;} .lp-kante-weg b + b::before{content:"›"; margin:0 5px;} }
@media (max-width:700px){ .lp-kante-weg{display:none;} }

/* ── Anpinnen-Formular: der Weg zum Blatt ── */
.lpn-blatt{display:block; width:100%; margin:-2px 0 10px; padding:6px 0; border:none; background:none;
  text-align:left; font:400 14px/1.4 var(--sans); color:var(--ink2); cursor:pointer;}
.lpn-blatt b{font-weight:650; color:var(--bronze);}
.lpb-satz{margin:0 18px 10px; font:400 14px/1.5 var(--sans); color:var(--ink2);}

/* ── Das Angebot: Heftansicht und Kalender ── */
.lp-angebot{display:flex; align-items:center; gap:10px; width:100%; margin:0 0 16px; padding:11px 16px;
  border-radius:14px; border:1px solid var(--line); background:var(--panel); color:var(--ink);
  font:400 14.5px/1.4 var(--sans); text-align:left; cursor:pointer;}
.lp-angebot .ic{flex:0 0 auto; width:18px; height:18px; color:var(--bronze);}
.lp-angebot b{font-weight:650;}
.lp-angebot span{min-width:0;}
.lp-angebot.bald{border-color:color-mix(in srgb, var(--bronze) 45%, var(--line));}
.ev-lern{display:inline-block; margin-top:4px; font:650 12.5px/1.3 var(--sans); color:var(--bronze); cursor:pointer;}

/* Am Handy steht der Weg klein im Platzhalter-Zettel (dort gibt es keinen Kasten darunter). */
.lp-leer-weg{margin:20px 0 4px;}
.lp-leer-weg > small{display:block; font:700 10px/1 var(--sans); letter-spacing:.12em; text-transform:uppercase; color:#6f624c; margin-bottom:12px;}

/* ── Ein Blatt lernen: die Hefte als Liste (Handy) ── */
.lpb-liste{display:flex; flex-direction:column; gap:8px; width:100%; padding:0 14px 18px;}
.lpb-heft{display:flex; align-items:center; gap:12px; width:100%; padding:12px 14px; border-radius:14px;
  border:1px solid var(--line); background:var(--panel); color:var(--ink); text-align:left; font:inherit; cursor:pointer;}
.lpb-heft i{flex:0 0 auto; width:10px; height:34px; border-radius:3px; background:var(--fc);}
.lpb-heft span{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px;}
.lpb-heft b{font:650 15.5px/1.25 var(--sans);}
.lpb-heft small{font:400 13px/1.3 var(--sans); color:var(--ink2);}
.lpb-heft em{font-style:normal; color:var(--ink3); font-size:18px;}
.lp-pro:empty{display:none;}