/* =========================================================
   demo-modules.css – Animierte Modul-Demos für die
   SchulServ-Produktseite.

   Ersetzt Bild-/Video-Platzhalter durch stilisierte,
   selbstlaufende Nachbauten der echten Module. Der Aufbau
   ist bewusst nah am Original (chat.css), aber vereinfacht
   und in die Website-Palette übersetzt.

   Skalierung: .mdemo ist ein CSS-Container, alle Innen-Maße
   hängen an dessen Schriftgröße (in cqw). Die
   Demo passt sich damit jeder Spaltenbreite an, ohne dass
   irgendwo feste Pixel stehen.
   ========================================================= */

.mdemo {
    position: relative;
    height: 100%;
    width: 100%;
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    font-family: var(--font);
    font-size: clamp(8.4px, 4.55cqw, 13px);
    line-height: 1.4;

    /* Palette: Messenger-Rollen aus dem Original, Website-Töne */
    --md-deep:    var(--accent-deeper);
    --md-mid:     var(--accent-deep);
    --md-chatbg:  #eef4f7;
    --md-unread:  #e5484d;
    --md-tick:    #2f9bff;
    --md-group:   linear-gradient(135deg, #2e9e8b, #1f6a5f);
    --md-teacher: linear-gradient(135deg, var(--accent), var(--accent-deeper));
    --md-parent:  linear-gradient(135deg, #efa457, #c2691a);
}

/* ---------- Rahmen ---------- */
.md-frame {
    position: relative;
    flex: 1;
    min-height: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 20px;
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    color: var(--ink);
    isolation: isolate;
}

/* Loop-Chip – gleiche Sprache wie die bisherigen Platzhalter */
.md-loop {
    position: absolute;
    top: 0.65em; left: 0.65em;
    z-index: 8;
    display: inline-flex; align-items: center; gap: 0.35em;
    font-size: 0.62em; font-weight: 700; letter-spacing: 0.06em;
    color: #fff; background: rgba(4, 30, 40, 0.32);
    padding: 0.3em 0.65em; border-radius: 100px;
    backdrop-filter: blur(4px);
    pointer-events: none;
}

/* Pause / Weiter */
.md-toggle {
    position: absolute;
    top: 0.55em; right: 0.55em;
    z-index: 9;
    width: 2em; height: 2em;
    display: grid; place-items: center;
    border: 0; border-radius: 50%;
    background: rgba(4, 30, 40, 0.32);
    color: #fff; font-size: 0.72em;
    cursor: pointer;
    opacity: 0;
    transition: opacity 180ms var(--ease), background 180ms var(--ease);
    backdrop-filter: blur(4px);
}
.mdemo:hover .md-toggle,
.md-toggle:focus-visible,
.mdemo.is-paused .md-toggle { opacity: 1; }
.md-toggle:hover { background: rgba(4, 30, 40, 0.5); }

/* ---------- Bildschirm ---------- */
.md-screen {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: var(--surface);
}

/* Kopfbereich mit Farbverlauf (wie die Hero-Kachel) */
.md-top {
    position: relative;
    padding: 0.55em 0.95em 1.15em;
    color: #fff;
    background: linear-gradient(150deg, var(--md-mid) 0%, var(--md-deep) 68%, #0c3a48 100%);
    flex-shrink: 0;
    opacity: 0;
    transform: translateY(-0.5em);
    transition: opacity 480ms var(--ease), transform 480ms var(--ease);
}
.md-top.is-in { opacity: 1; transform: none; }
.md-top::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: -1px;
    height: 0.9em;
    background: var(--surface);
    border-radius: 0.9em 0.9em 0 0;
}

.md-statusbar {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 0.62em; font-weight: 700; opacity: 0.9;
    margin-bottom: 0.7em;
}
.md-statusbar span + span { display: inline-flex; gap: 0.4em; }

.md-apphead { display: flex; align-items: center; gap: 0.6em; }
.md-apphead b { display: block; font-size: 1.02em; font-weight: 800; letter-spacing: -0.01em; }
.md-apphead small { display: block; font-size: 0.66em; opacity: 0.82; font-weight: 600; }
.md-apphead-main { flex: 1; min-width: 0; }
.md-av-top {
    width: 2.2em; height: 2.2em; flex-shrink: 0;
    border-radius: 50%; display: grid; place-items: center;
    font-size: 0.66em; font-weight: 800;
    background: rgba(255, 255, 255, 0.18);
    border: 1.5px solid rgba(255, 255, 255, 0.35);
}

/* Umschalter Chats / Newspage */
.md-switch {
    position: relative; z-index: 2;
    display: flex; gap: 0.25em;
    margin-top: 0.8em;
    padding: 0.2em;
    background: rgba(255, 255, 255, 0.16);
    border-radius: 100px;
}
.md-switch span {
    flex: 1;
    display: inline-flex; align-items: center; justify-content: center; gap: 0.35em;
    font-size: 0.66em; font-weight: 700;
    padding: 0.42em 0.4em; border-radius: 100px;
    color: rgba(255, 255, 255, 0.85);
    white-space: nowrap;
}
.md-switch span.is-on { background: #fff; color: var(--md-deep); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.14); }
.md-swbadge {
    display: inline-grid; place-items: center;
    min-width: 1.35em; height: 1.35em; padding: 0 0.3em;
    border-radius: 100px;
    background: var(--md-unread); color: #fff;
    font-size: 0.82em; font-weight: 800;
    transform: scale(0);
    transition: transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.md-swbadge.is-in { transform: scale(1); }

/* ---------- Körper: zwei Ansichten ---------- */
.md-body {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    background: var(--surface);
}
.md-pane {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    transition: transform 520ms var(--ease), opacity 520ms var(--ease);
}
.md-pane--list { transform: none; opacity: 1; }
.md-pane--chat { transform: translateX(100%); opacity: 0; background: var(--md-chatbg); }
.mdemo.is-chat .md-pane--list { transform: translateX(-22%); opacity: 0; }
.mdemo.is-chat .md-pane--chat { transform: none; opacity: 1; }

/* ---------- Ansicht 1: Chatliste ---------- */
.md-listhead {
    display: flex; align-items: center; gap: 0.5em;
    padding: 0.5em 0.75em 0.55em;
    border-bottom: 1px solid var(--line);
    opacity: 0; transform: translateY(0.4em);
    transition: opacity 400ms var(--ease), transform 400ms var(--ease);
}
.md-listhead.is-in { opacity: 1; transform: none; }
.md-search {
    flex: 1;
    display: inline-flex; align-items: center; gap: 0.45em;
    font-size: 0.7em; color: var(--ink-muted); font-weight: 500;
    background: var(--surface-2); border: 1px solid var(--line);
    border-radius: 100px; padding: 0.42em 0.8em;
}
.md-newchat {
    width: 1.9em; height: 1.9em; flex-shrink: 0;
    display: grid; place-items: center;
    border-radius: 50%; color: #fff; font-size: 0.68em;
    background: linear-gradient(135deg, var(--accent), var(--accent-deeper));
    box-shadow: 0 4px 10px -5px var(--accent-deep);
}

.md-convs { flex: 1; overflow: hidden; padding: 0.15em 0 0; }
.md-conv {
    display: flex; align-items: center; gap: 0.6em;
    padding: 0 0.75em;
    max-height: 0; overflow: hidden;
    border-bottom: 1px solid transparent;
    opacity: 0; transform: translateY(0.55em);
    transition: max-height 440ms var(--ease), padding 440ms var(--ease),
                opacity 420ms var(--ease), transform 420ms var(--ease), background 300ms var(--ease);
}
.md-conv.is-in {
    max-height: 6em; padding: 0.55em 0.75em;
    opacity: 1; transform: none;
    border-bottom-color: #f0f3f6;
}
.md-conv.is-tapped { background: var(--accent-soft); }
.md-conv--new.is-in { animation: mdNewRow 900ms var(--ease); }
@keyframes mdNewRow {
    0%   { background: var(--accent-tint); }
    100% { background: transparent; }
}

.md-av {
    width: 2.35em; height: 2.35em; flex-shrink: 0;
    border-radius: 50%; display: grid; place-items: center;
    color: #fff; font-weight: 800; font-size: 0.72em;
    background: var(--md-teacher);
}
.md-av--group   { background: var(--md-group); }
.md-av--parent  { background: var(--md-parent); }
.md-av--teacher { background: var(--md-teacher); }

.md-conv-main { flex: 1; min-width: 0; }
.md-conv-top { display: flex; align-items: center; justify-content: space-between; gap: 0.4em; }
.md-conv-title {
    font-size: 0.76em; font-weight: 700; color: var(--ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.md-conv-time { font-size: 0.6em; color: var(--ink-muted); flex-shrink: 0; font-weight: 600; }
.md-conv-bottom { display: flex; align-items: center; justify-content: space-between; gap: 0.4em; margin-top: 0.1em; }
.md-conv-prev {
    font-size: 0.68em; color: var(--ink-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.md-conv-prev.is-typing { color: var(--md-mid); font-weight: 700; font-style: italic; }
.md-badge {
    flex-shrink: 0;
    display: grid; place-items: center;
    min-width: 1.45em; height: 1.45em; padding: 0 0.35em;
    border-radius: 100px; background: var(--md-unread); color: #fff;
    font-size: 0.62em; font-weight: 800;
    animation: mdPulse 2s var(--ease) infinite;
}
.md-badge--mute { background: #9aa8b2; animation: none; }
@keyframes mdPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.62; } }

/* Tipp-Indikator */
.md-tap {
    position: absolute;
    left: 50%; top: 2.55em;
    width: 2.6em; height: 2.6em;
    margin-left: -1.3em;
    border-radius: 50%;
    border: 0.16em solid var(--accent-deep);
    background: rgba(6, 182, 212, 0.16);
    opacity: 0;
    pointer-events: none;
    z-index: 5;
}
.md-tap.is-in { animation: mdTap 720ms var(--ease) forwards; }
@keyframes mdTap {
    0%   { opacity: 0; transform: scale(0.35); }
    35%  { opacity: 0.9; }
    100% { opacity: 0; transform: scale(1.35); }
}

/* ---------- Ansicht 2: Chat ---------- */
.md-chathead {
    display: flex; align-items: center; gap: 0.55em;
    padding: 0.5em 0.7em;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    flex-shrink: 0;
}
.md-chathead > i { color: var(--md-mid); font-size: 0.8em; }
.md-chathead-main { flex: 1; min-width: 0; }
.md-chathead-main b { display: block; font-size: 0.8em; font-weight: 800; }
.md-chathead-sub { position: relative; display: block; font-size: 0.64em; color: var(--ink-muted); height: 1.3em; }
.md-chathead-sub em { position: absolute; left: 0; top: 0; font-style: normal; transition: opacity 260ms var(--ease); }
.md-sub-b { opacity: 0; color: var(--md-mid); font-weight: 700; }
.md-chathead.is-typing .md-sub-a { opacity: 0; }
.md-chathead.is-typing .md-sub-b { opacity: 1; }

/* Der Verlauf ist unten verankert: noch nicht gezeigte Zeilen haben die Höhe 0
   und wachsen beim Erscheinen auf – dadurch schiebt sich der Chat von selbst
   nach oben, ganz ohne feste Verschiebungswerte. */
.md-scroll {
    flex: 1; min-height: 0; overflow: hidden;
    padding: 0.55em 0.6em 0.45em;
    display: flex; flex-direction: column; justify-content: flex-end;
}
.md-thread { display: flex; flex-direction: column; }

.md-daysep {
    align-self: center;
    background: rgba(14, 116, 144, 0.1); color: var(--md-deep);
    font-size: 0.6em; font-weight: 700;
    padding: 0 0.8em; border-radius: 100px;
    max-height: 0; overflow: hidden; opacity: 0;
    transition: max-height 400ms var(--ease), opacity 380ms var(--ease), padding 400ms var(--ease), margin 400ms var(--ease);
}
.md-daysep.is-in { max-height: 3em; opacity: 1; padding: 0.25em 0.8em; margin-bottom: 0.35em; }

.md-row {
    display: flex; flex-direction: column;
    max-width: 82%;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(0.5em) scale(0.96);
    transition: max-height 440ms var(--ease), margin 440ms var(--ease),
                opacity 380ms var(--ease), transform 380ms cubic-bezier(0.34, 1.4, 0.64, 1);
}
.md-row.is-in { max-height: 14em; opacity: 1; transform: none; margin-top: 0.3em; }
.md-row.in  { align-self: flex-start; align-items: flex-start; transform-origin: left bottom; }
.md-row.out { align-self: flex-end;   align-items: flex-end;   transform-origin: right bottom; }

.md-sender { font-size: 0.62em; font-weight: 800; color: var(--md-mid); margin: 0.25em 0.3em 0.1em; }
.md-bub {
    position: relative;
    padding: 0.5em 0.7em;
    border-radius: 1em;
    font-size: 0.74em;
    box-shadow: 0 1px 2px rgba(13, 42, 56, 0.12);
}
.md-row.in .md-bub {
    background: linear-gradient(150deg, var(--md-mid), var(--md-deep));
    color: #fff;
    border-bottom-left-radius: 0.32em;
}
.md-row.out .md-bub {
    background: #fff;
    color: var(--ink);
    border-bottom-right-radius: 0.32em;
}
.md-meta {
    display: flex; align-items: center; justify-content: flex-end; gap: 0.3em;
    font-size: 0.78em; margin-top: 0.15em;
}
.md-row.in  .md-meta { color: rgba(255, 255, 255, 0.75); }
.md-row.out .md-meta { color: var(--ink-muted); }
.md-tick { transition: color 320ms var(--ease); }
.md-tick.is-in { color: var(--md-tick); }

/* Reaktionen */
.md-reacts { display: flex; gap: 0.2em; margin: 0.2em 0.2em 0; opacity: 0; }
.md-reacts.is-in { opacity: 1; animation: mdPop 460ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.md-chip {
    display: inline-flex; align-items: center; gap: 0.25em;
    background: #fff; border: 1px solid var(--line);
    border-radius: 100px; padding: 0.08em 0.45em;
    font-size: 0.6em; font-weight: 700; color: var(--ink-soft);
    box-shadow: var(--shadow-sm);
}
@keyframes mdPop {
    0%   { transform: scale(0.4); }
    60%  { transform: scale(1.22); }
    100% { transform: scale(1); }
}

/* Tipp-Blase */
.md-bub--typing { display: inline-flex; gap: 0.25em; padding: 0.65em 0.75em; }
.md-bub--typing i {
    width: 0.34em; height: 0.34em; border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    animation: mdDots 1.1s var(--ease) infinite;
}
.md-bub--typing i:nth-child(2) { animation-delay: 0.15s; }
.md-bub--typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes mdDots {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.55; }
    30%           { transform: translateY(-0.28em); opacity: 1; }
}

/* Umfrage in der Blase */
.md-poll-q { display: block; font-weight: 800; margin-bottom: 0.4em; }
.md-poll-opt {
    position: relative;
    display: flex; align-items: center; justify-content: space-between; gap: 0.5em;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 0.6em;
    padding: 0.3em 0.5em;
    margin-bottom: 0.28em;
    overflow: hidden;
    font-size: 0.94em;
}
.md-poll-fill {
    position: absolute; left: 0; top: 0; bottom: 0;
    width: 0;
    background: rgba(255, 255, 255, 0.24);
    transition: width 900ms var(--ease);
}
.md-row.is-in .md-poll-fill { width: var(--w); }
.md-poll-opt em, .md-poll-opt b { position: relative; z-index: 1; font-style: normal; }
.md-poll-opt.is-mine { border-color: #fff; font-weight: 700; }
.md-poll-tot { display: block; font-size: 0.8em; opacity: 0.8; margin-top: 0.25em; }

/* Datei in der Blase */
.md-file {
    display: flex; align-items: center; gap: 0.45em;
    background: rgba(255, 255, 255, 0.16);
    border-radius: 0.55em; padding: 0.35em 0.45em;
    min-width: 9.5em;
}
.md-file-ic {
    width: 1.7em; height: 1.7em; flex-shrink: 0;
    display: grid; place-items: center;
    border-radius: 0.4em; background: #e74c3c; color: #fff; font-size: 0.85em;
}
.md-file-main { min-width: 0; }
.md-file-main b { display: block; font-size: 0.92em; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 8.5em; }
.md-file-main em { font-style: normal; font-size: 0.8em; opacity: 0.8; }

/* Eingabeleiste */
.md-composer {
    display: flex; align-items: center; gap: 0.45em;
    padding: 0.45em 0.6em;
    background: var(--surface);
    border-top: 1px solid var(--line);
    flex-shrink: 0;
}
.md-ctool {
    width: 1.85em; height: 1.85em; flex-shrink: 0;
    display: grid; place-items: center;
    border-radius: 50%; background: var(--accent-soft); color: var(--md-deep);
    font-size: 0.7em;
}
.md-cinput {
    position: relative;
    flex: 1; min-width: 0;
    display: flex; align-items: center;
    height: 2.15em;
    border: 1.5px solid var(--line); border-radius: 100px;
    padding: 0 0.75em;
    font-size: 0.7em; color: var(--ink);
    transition: border-color 260ms var(--ease);
}
.md-cinput.is-in { border-color: var(--accent-deep); }
.md-cph { color: var(--ink-muted); transition: opacity 200ms var(--ease); }
.md-cinput.is-in .md-cph { opacity: 0; }
.md-typed {
    position: absolute; left: 0.75em;
    max-width: 0;
    overflow: hidden; white-space: nowrap;
    border-right: 1.5px solid transparent;
}
.md-cinput.is-in .md-typed {
    animation: mdType 1.1s steps(15, end) forwards, mdCaret 0.6s step-end infinite;
}
@keyframes mdType  { to { max-width: 7.6em; } }
@keyframes mdCaret { 0%, 100% { border-right-color: var(--accent-deep); } 50% { border-right-color: transparent; } }
.md-send {
    width: 2em; height: 2em; flex-shrink: 0;
    display: grid; place-items: center;
    border-radius: 50%; color: #fff; font-size: 0.7em;
    background: linear-gradient(135deg, var(--accent), var(--accent-deeper));
    box-shadow: 0 4px 10px -5px var(--accent-deep);
}
.md-send.is-in { animation: mdSend 480ms cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes mdSend {
    0%   { transform: scale(1); }
    45%  { transform: scale(1.22) rotate(-12deg); }
    100% { transform: scale(1); }
}

/* ---------- Push-Karte ---------- */
.md-push {
    position: absolute;
    top: 2.4em; left: 0.6em; right: 0.6em;
    z-index: 7;
    display: flex; align-items: center; gap: 0.55em;
    padding: 0.5em 0.6em;
    border-radius: 0.9em;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid var(--line);
    box-shadow: 0 12px 28px -14px rgba(13, 42, 56, 0.55);
    backdrop-filter: blur(6px);
    opacity: 0;
    transform: translateY(-0.9em) scale(0.97);
    transition: opacity 420ms var(--ease), transform 420ms cubic-bezier(0.34, 1.4, 0.64, 1);
}
.md-push.is-in { opacity: 1; transform: none; }
.md-push-ic {
    width: 1.85em; height: 1.85em; flex-shrink: 0;
    display: grid; place-items: center;
    border-radius: 0.55em; color: #fff; font-size: 0.72em;
    background: linear-gradient(135deg, var(--accent), var(--accent-deeper));
}
.md-push-main { min-width: 0; }
.md-push-main b { display: block; font-size: 0.68em; font-weight: 800; }
.md-push-main em {
    display: block; font-style: normal; font-size: 0.64em; color: var(--ink-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---------- Untertitel ---------- */
.md-caption {
    flex-shrink: 0;
    min-height: 3.4em;
    display: grid; align-items: center;
    padding: 0.7em 0.4em 0;
}
.md-caption span {
    display: block;
    text-align: center;
    color: var(--ink-soft);
    font-size: 0.76em; font-weight: 700; line-height: 1.35;
    text-wrap: balance;
}
.md-caption span.is-swap { animation: mdCap 420ms var(--ease); }
@keyframes mdCap {
    from { opacity: 0; transform: translateY(0.4em); }
    to   { opacity: 1; transform: none; }
}

/* ---------- Fortschritt ---------- */
.md-progress {
    position: absolute; left: 0; right: 0; bottom: 0;
    z-index: 8;
    height: 0.22em;
    background: rgba(13, 42, 56, 0.08);
}
/* Läuft im selben Takt wie das Drehbuch und wird zusammen mit ihm
   angehalten – dadurch bleiben Balken und Szenen synchron. */
.md-progress i {
    display: block; height: 100%; width: 0;
    border-radius: 0 100px 100px 0;
    background: linear-gradient(90deg, var(--accent), var(--accent-deeper));
    animation: mdProgress var(--md-loop, 18s) linear infinite;
    animation-play-state: paused;
}
.mdemo.is-playing .md-progress i { animation-play-state: running; }
.mdemo.is-paused .md-frame,
.mdemo.is-paused .md-frame * { animation-play-state: paused !important; }
@keyframes mdProgress { from { width: 0; } to { width: 100%; } }

/* ---------- Rücksicht auf reduzierte Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
    .md-loop,
    .md-toggle,
    .md-progress { display: none; }
}


/* =========================================================================
   GEMEINSAME BAUSTEINE FÜR WEITERE MODULE
   -------------------------------------------------------------------------
   Alle Demos benutzen denselben Rahmen (.md-frame), denselben Kopf
   (.md-top), dieselbe Untertitelzeile und denselben Fortschrittsbalken.
   Neu ist lediglich der allgemeine Ansichtswechsel: jede Demo hat eine
   Ansicht A und eine Ansicht B, die Wurzelklasse "is-flip" schiebt von
   A nach B – so wie beim Messenger "is-chat".
   ========================================================================= */

.md-pane--a { transform: none; opacity: 1; }
.md-pane--b { transform: translateX(100%); opacity: 0; }
.mdemo.is-flip .md-pane--a { transform: translateX(-22%); opacity: 0; }
.mdemo.is-flip .md-pane--b { transform: none; opacity: 1; }

/* Der Umschalter im Kopf folgt der Ansicht. */
.mdemo.is-flip .md-switch span:first-child {
    background: transparent; color: rgba(255, 255, 255, 0.85); box-shadow: none;
}
.mdemo.is-flip .md-switch span:last-child {
    background: #fff; color: var(--md-deep); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.14);
}

/* Zeile im Kopf, die ihren Text wechselt (z. B. „Zuletzt aktualisiert“).
   Zwei Texte übereinander, einer wird ein-, der andere ausgeblendet. */
.md-swapline {
    position: relative; display: block;
    height: 1.25em; margin-top: 0.45em;
    font-size: 0.62em; font-weight: 700;
}
.md-swapline em {
    position: absolute; left: 0; top: 0;
    display: inline-flex; align-items: center; gap: 0.35em;
    font-style: normal; white-space: nowrap;
    transition: opacity 320ms var(--ease);
}
.md-swapline .md-swap-b { opacity: 0; }
.md-swapline.is-live .md-swap-a { opacity: 0; }
.md-swapline.is-live .md-swap-b { opacity: 1; }
.md-livedot {
    width: 0.42em; height: 0.42em; border-radius: 50%;
    background: #7ef2c0; box-shadow: 0 0 0 0.16em rgba(126, 242, 192, 0.25);
    animation: mdPulse 1.6s var(--ease) infinite;
}

/* Tipp-Ring, der sich über ein beliebiges Element legt. */
.md-ring {
    position: absolute; inset: -0.18em;
    border-radius: 0.6em;
    border: 0.14em solid var(--accent-deep);
    background: rgba(6, 182, 212, 0.16);
    opacity: 0; pointer-events: none; z-index: 4;
}
.md-ring.is-in { animation: mdRing 760ms var(--ease) forwards; }
@keyframes mdRing {
    0%   { opacity: 0; transform: scale(0.7); }
    35%  { opacity: 0.95; }
    100% { opacity: 0; transform: scale(1.22); }
}

/* Kurzer Aufblitzer, wenn sich etwas live ändert. */
@keyframes mdBump {
    0%   { transform: scale(1); }
    45%  { transform: scale(1.09); }
    100% { transform: scale(1); }
}

/* Bestätigung / Toast am unteren Rand der Ansicht. */
.md-toast {
    position: absolute; left: 0.6em; right: 0.6em; bottom: 0.6em;
    z-index: 6;
    display: flex; align-items: center; gap: 0.5em;
    padding: 0.5em 0.6em;
    border-radius: 0.7em;
    background: linear-gradient(135deg, #16a37b, #0e7a5c);
    color: #fff;
    box-shadow: 0 12px 26px -14px rgba(13, 42, 56, 0.6);
    opacity: 0; transform: translateY(0.7em);
    transition: opacity 360ms var(--ease), transform 360ms cubic-bezier(0.34, 1.4, 0.64, 1);
}
.md-toast.is-in { opacity: 1; transform: none; }
.md-toast i.fas { font-size: 0.8em; }
.md-toast b { font-size: 0.66em; font-weight: 800; }
.md-toast em { display: block; font-style: normal; font-size: 0.6em; opacity: 0.85; font-weight: 600; }


/* =========================================================================
   MODUL: STUNDEN- UND VERTRETUNGSPLAN  (data-demo="plan")
   Farben der Änderungsarten wie in der Legende der Modulseite. Sie gelten für
   alle Demos, weil Raumbuchung und Stammdaten dieselben Marker zeigen.
   ========================================================================= */

.mdemo {
    --pl-ent-bg: #fee2e2;  --pl-ent-ink: #b91c1c;  --pl-ent-line: #fecaca;
    --pl-vtr-bg: #cffafe;  --pl-vtr-ink: #0e7490;  --pl-vtr-line: #a5f3fc;
    --pl-rm-bg:  #fef3c7;  --pl-rm-ink:  #b45309;  --pl-rm-line:  #fde68a;
    --pl-ev-bg:  #ede9fe;  --pl-ev-ink:  #6d28d9;  --pl-ev-line:  #ddd6fe;
}

/* ---------- Wochenleiste ---------- */
.pl-weekbar {
    display: flex; align-items: center; gap: 0.45em;
    padding: 0.45em 0.7em;
    border-bottom: 1px solid var(--line);
    flex-shrink: 0;
    opacity: 0; transform: translateY(0.4em);
    transition: opacity 400ms var(--ease), transform 400ms var(--ease);
}
.pl-weekbar.is-in { opacity: 1; transform: none; }
.pl-weekbar > i { color: var(--ink-muted); font-size: 0.62em; }
.pl-week { flex: 1; text-align: center; font-size: 0.66em; font-weight: 800; color: var(--ink); }
.pl-abchip {
    font-size: 0.56em; font-weight: 800; letter-spacing: 0.02em;
    color: var(--md-deep); background: var(--accent-soft);
    border: 1px solid var(--accent-tint);
    padding: 0.15em 0.5em; border-radius: 100px;
}
.pl-abchip.is-mark { animation: mdBump 900ms var(--ease) 2; }

/* ---------- Gitter ---------- */
.pl-grid { flex: 1; min-height: 0; padding: 0.4em 0.45em 0.5em; overflow: hidden; }
.pl-row {
    display: grid; grid-template-columns: 1.35em repeat(5, 1fr); gap: 0.18em;
    margin-bottom: 0.18em;
    opacity: 0; transform: translateY(0.4em);
    transition: opacity 340ms var(--ease), transform 340ms var(--ease);
}
.pl-row.is-in { opacity: 1; transform: none; }
.pl-row--head .pl-c { background: transparent; border-color: transparent; min-height: 0; }
.pl-row--head .pl-c b { font-size: 0.62em; color: var(--ink-muted); letter-spacing: 0.04em; }
.pl-row--ab { border-radius: 0.5em; }
.pl-row--ab.is-mark { animation: plMark 1700ms var(--ease); }
@keyframes plMark {
    0%, 100% { box-shadow: 0 0 0 0 rgba(8, 145, 178, 0); }
    45%      { box-shadow: 0 0 0 0.2em rgba(8, 145, 178, 0.16); }
}

.pl-hour { display: grid; place-items: center; font-size: 0.58em; font-weight: 800; color: var(--ink-muted); }
.pl-c {
    position: relative;
    min-height: 2.15em;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 0.02em;
    padding: 0.15em 0.1em;
    border-radius: 0.4em;
    background: var(--surface-2);
    border: 1px solid var(--line);
    transition: background 420ms var(--ease), border-color 420ms var(--ease);
}
.pl-c b  { font-size: 0.72em; font-weight: 800; color: var(--md-deep); line-height: 1.05; }
.pl-c em { font-style: normal; font-size: 0.56em; font-weight: 700; color: var(--accent-deep); }
.pl-c i  { font-style: normal; font-size: 0.54em; font-weight: 600; color: var(--ink-muted); }
.pl-c > * { transition: opacity 380ms var(--ease), transform 380ms var(--ease); }
.pl-c--none { background: transparent; border-color: transparent; }
.pl-c--ww { opacity: 0.4; }

/* Inhalt, der erst mit der Änderung erscheint (freie Stunde wird Vertretung) */
.pl-c--empty { background: transparent; border-color: transparent; }
.pl-c--empty > * { opacity: 0; transform: scale(0.9); }

/* Entfall */
.pl-c.is-ent { background: var(--pl-ent-bg); border-color: var(--pl-ent-line); animation: mdBump 620ms var(--ease); }
.pl-c.is-ent b { color: var(--pl-ent-ink); text-decoration: line-through; }
.pl-c.is-ent em, .pl-c.is-ent i { color: var(--pl-ent-ink); opacity: 0.8; text-decoration: line-through; }
/* Vertretung */
.pl-c.is-sub { background: var(--pl-vtr-bg); border-color: var(--pl-vtr-line); animation: mdBump 620ms var(--ease); }
.pl-c.is-sub > * { opacity: 1; transform: none; }
.pl-c.is-sub b { color: var(--pl-vtr-ink); }
.pl-c.is-sub em { color: var(--pl-vtr-ink); }
/* Raumwechsel */
.pl-c.is-room { background: var(--pl-rm-bg); border-color: var(--pl-rm-line); animation: mdBump 620ms var(--ease); }
.pl-rnew { display: none; }
.pl-c.is-room .pl-rold { text-decoration: line-through; opacity: 0.55; margin-right: 0.25em; }
.pl-c.is-room .pl-rnew { display: inline; color: var(--pl-rm-ink); font-weight: 800; }
/* Termin / Aufsicht */
.pl-c.is-ev { background: var(--pl-ev-bg); border-color: var(--pl-ev-line); }
.pl-c .pl-ev {
    position: absolute; top: -0.3em; right: -0.22em;
    width: 1.2em; height: 1.2em;
    display: grid; place-items: center;
    border-radius: 50%;
    background: #fff; color: var(--pl-ev-ink);
    border: 1px solid var(--pl-ev-line);
    font-size: 0.58em; font-weight: 900; font-style: normal;
    transform: scale(0);
    transition: transform 340ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.pl-c.is-ev .pl-ev { transform: scale(1); }

/* ---------- Detailfenster einer Stunde ---------- */
.pl-pop {
    position: absolute; inset: 0; z-index: 6;
    display: grid; place-items: center;
    padding: 0.9em;
    background: rgba(8, 32, 42, 0.4);
    opacity: 0; pointer-events: none;
    transition: opacity 320ms var(--ease);
}
.pl-pop.is-in { opacity: 1; }
.pl-pop-card {
    width: 100%;
    background: #fff; border-radius: 0.9em;
    padding: 0.7em 0.8em;
    box-shadow: var(--shadow-lg);
    transform: translateY(0.6em) scale(0.96);
    transition: transform 380ms cubic-bezier(0.34, 1.4, 0.64, 1);
}
.pl-pop.is-in .pl-pop-card { transform: none; }
.pl-pop-title { font-size: 0.74em; font-weight: 800; }
.pl-pop-badge {
    display: inline-block; margin: 0.3em 0 0.45em;
    font-size: 0.58em; font-weight: 800;
    padding: 0.15em 0.6em; border-radius: 100px;
    background: var(--pl-ent-bg); color: var(--pl-ent-ink);
}
.pl-pop-row {
    display: flex; gap: 0.5em;
    font-size: 0.62em; padding: 0.22em 0;
    border-bottom: 1px solid #f1f4f6;
}
.pl-pop-row:last-of-type { border-bottom: none; }
.pl-pop-row span:first-child { width: 3.4em; color: var(--ink-muted); flex-shrink: 0; }
.pl-pop-row span + span { font-weight: 700; }
.pl-pop-note {
    margin-top: 0.45em; padding: 0.32em 0.5em;
    border-radius: 0.4em;
    font-size: 0.6em; font-weight: 700;
    background: var(--pl-ent-bg); color: var(--pl-ent-ink);
}

/* ---------- Ansicht B: Vertretungsplan-Liste ---------- */
.pl-vhead {
    display: flex; align-items: center; gap: 0.4em;
    padding: 0.5em 0.7em;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    flex-shrink: 0;
}
.pl-vhead > i { color: var(--ink-muted); font-size: 0.62em; }
.pl-vhead b { flex: 1; text-align: center; font-size: 0.68em; font-weight: 800; }
.pl-vlist { flex: 1; min-height: 0; padding: 0.45em 0.5em; overflow: hidden; }
.pl-item {
    display: flex; gap: 0.5em;
    background: #fff;
    border: 1px solid var(--line);
    border-left: 0.24em solid var(--line-strong);
    border-radius: 0.55em;
    padding: 0 0.55em;
    max-height: 0; overflow: hidden;
    opacity: 0; transform: translateY(0.5em);
    margin-bottom: 0;
    transition: max-height 440ms var(--ease), padding 440ms var(--ease), margin 440ms var(--ease),
                opacity 400ms var(--ease), transform 400ms cubic-bezier(0.34, 1.4, 0.64, 1);
}
.pl-item.is-in { max-height: 12em; padding: 0.45em 0.55em; margin-bottom: 0.35em; opacity: 1; transform: none; }
.pl-item--ent  { border-left-color: #e11d48; }
.pl-item--sub  { border-left-color: #0891b2; }
.pl-item--room { border-left-color: #f59e0b; }
.pl-item--ev   { border-left-color: #7c3aed; }
.pl-hb {
    width: 1.85em; height: 1.85em; flex-shrink: 0;
    display: grid; place-items: center;
    border-radius: 0.42em;
    background: var(--surface-2); color: var(--md-deep);
    font-size: 0.6em; font-weight: 800;
}
.pl-item-main { flex: 1; min-width: 0; }
.pl-item-top { display: flex; align-items: center; justify-content: space-between; gap: 0.4em; }
.pl-item-top b { font-size: 0.66em; font-weight: 800; }
.pl-tag { font-size: 0.53em; font-weight: 800; padding: 0.12em 0.45em; border-radius: 100px; white-space: nowrap; }
.pl-tag--ent  { background: var(--pl-ent-bg); color: var(--pl-ent-ink); }
.pl-tag--sub  { background: var(--pl-vtr-bg); color: var(--pl-vtr-ink); }
.pl-tag--room { background: var(--pl-rm-bg);  color: var(--pl-rm-ink); }
.pl-tag--ev   { background: var(--pl-ev-bg);  color: var(--pl-ev-ink); }
.pl-item-sub {
    display: flex; align-items: center; flex-wrap: wrap; gap: 0.25em;
    margin-top: 0.2em;
    font-size: 0.58em; color: var(--ink-muted); font-weight: 600;
}
.pl-pill {
    background: var(--surface-2); border: 1px solid var(--line);
    border-radius: 100px; padding: 0.02em 0.4em;
    font-weight: 700; color: var(--ink-soft);
}
.pl-arr { color: var(--ink-muted); font-weight: 700; }
.pl-pill--old { text-decoration: line-through; opacity: 0.6; }
.pl-pill--new { background: var(--accent-soft); border-color: var(--accent-tint); color: var(--md-deep); }
.pl-note {
    display: inline-block; margin-top: 0.25em;
    font-size: 0.56em; font-weight: 700;
    color: var(--md-deep); background: var(--accent-soft);
    border-radius: 0.35em; padding: 0.12em 0.4em;
}


/* =========================================================================
   MODUL: FEHLZEITENERFASSUNG  (data-demo="fehlzeiten")
   Ansicht A = Krankmeldung der Eltern, Ansicht B = Tagesansicht der Lehrkraft
   ========================================================================= */

.fz-form { flex: 1; min-height: 0; padding: 0.55em 0.6em; overflow: hidden; }

.fz-card {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: 0.7em; padding: 0.5em 0.55em;
    box-shadow: var(--shadow-sm);
    margin-bottom: 0.4em;
    opacity: 0; transform: translateY(0.5em);
    transition: opacity 400ms var(--ease), transform 400ms var(--ease);
}
.fz-card.is-in { opacity: 1; transform: none; }
.fz-card > h4 {
    font-size: 0.6em; font-weight: 800; letter-spacing: 0.04em;
    text-transform: uppercase; color: var(--ink-muted);
    margin-bottom: 0.4em;
}
.fz-kid { display: flex; align-items: center; gap: 0.5em; }
.fz-kid .md-av { font-size: 0.66em; }
.fz-kid-main b { display: block; font-size: 0.7em; font-weight: 800; }
.fz-kid-main em { display: block; font-style: normal; font-size: 0.58em; color: var(--ink-muted); font-weight: 600; }
.fz-kid > i { margin-left: auto; color: var(--ink-muted); font-size: 0.62em; }

.fz-row { display: flex; gap: 0.4em; }
.fz-field { flex: 1; min-width: 0; }
.fz-label { display: block; font-size: 0.56em; font-weight: 700; color: var(--ink-muted); margin-bottom: 0.15em; }
.fz-input {
    display: flex; align-items: center; justify-content: space-between; gap: 0.3em;
    border: 1.5px solid var(--line); border-radius: 0.45em;
    padding: 0.3em 0.45em;
    font-size: 0.62em; font-weight: 700; color: var(--ink);
    background: var(--surface);
    transition: border-color 260ms var(--ease), background 260ms var(--ease);
}
.fz-input i { color: var(--ink-muted); font-size: 0.9em; }
.fz-input.is-set { border-color: var(--accent-deep); background: var(--accent-soft); }

/* Schalter „Ganztägig abwesend“ */
.fz-toggle { display: flex; align-items: center; gap: 0.45em; margin-top: 0.45em; }
.fz-sw {
    width: 1.9em; height: 1.05em; flex-shrink: 0;
    border-radius: 100px; background: var(--accent-deep);
    position: relative;
    transition: background 300ms var(--ease);
}
.fz-sw::after {
    content: ""; position: absolute; top: 0.12em; left: 0.98em;
    width: 0.8em; height: 0.8em; border-radius: 50%;
    background: #fff; box-shadow: var(--shadow-sm);
    transition: left 300ms cubic-bezier(0.34, 1.4, 0.64, 1);
}
.fz-toggle.is-off .fz-sw { background: var(--line-strong); }
.fz-toggle.is-off .fz-sw::after { left: 0.12em; }
.fz-toggle span { font-size: 0.62em; font-weight: 700; }

/* Stundenauswahl */
.fz-hours {
    display: flex; flex-wrap: wrap; gap: 0.25em;
    max-height: 0; overflow: hidden; opacity: 0;
    transition: max-height 420ms var(--ease), opacity 380ms var(--ease), margin 420ms var(--ease);
}
.fz-hours.is-in { max-height: 6em; opacity: 1; margin-top: 0.45em; }
.fz-h {
    position: relative;
    min-width: 1.8em;
    display: inline-flex; align-items: center; justify-content: center; gap: 0.2em;
    font-size: 0.58em; font-weight: 800;
    padding: 0.25em 0.4em; border-radius: 0.4em;
    background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-soft);
    transition: background 260ms var(--ease), color 260ms var(--ease), border-color 260ms var(--ease);
}
.fz-h.is-on { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; }
.fz-h.is-ent {
    background: #fee2e2; border-color: #fecaca; color: #b91c1c;
    text-decoration: line-through;
}
.fz-hint {
    display: block; margin-top: 0.35em;
    font-size: 0.56em; font-weight: 700; line-height: 1.35;
    color: #b45309; background: #fef3c7; border-radius: 0.4em;
    padding: 0.25em 0.4em;
    opacity: 0; transform: translateY(0.2em);
    transition: opacity 320ms var(--ease), transform 320ms var(--ease);
}
.fz-hint.is-in { opacity: 1; transform: none; }

.fz-send {
    position: relative;
    display: flex; align-items: center; justify-content: center; gap: 0.4em;
    padding: 0.55em; border-radius: 0.6em;
    font-size: 0.66em; font-weight: 800; color: #fff;
    background: linear-gradient(135deg, var(--accent), var(--accent-deeper));
    box-shadow: 0 8px 18px -10px var(--accent-deep);
    opacity: 0; transform: translateY(0.4em);
    transition: opacity 380ms var(--ease), transform 380ms var(--ease);
}
.fz-send.is-in { opacity: 1; transform: none; }
.fz-send.is-press { animation: mdBump 480ms var(--ease); }

/* Erfolgsmeldung */
.fz-ok {
    display: flex; align-items: center; gap: 0.45em;
    border-radius: 0.6em; padding: 0 0.55em;
    background: #e7f7ef; border: 1px solid #bfe8d4; color: #0f7a52;
    max-height: 0; overflow: hidden; opacity: 0;
    transition: max-height 420ms var(--ease), padding 420ms var(--ease), opacity 380ms var(--ease);
}
.fz-ok.is-in { max-height: 6em; padding: 0.45em 0.55em; opacity: 1; }
.fz-ok i { font-size: 0.85em; }
.fz-ok span { font-size: 0.6em; font-weight: 700; line-height: 1.35; }

/* ---------- Ansicht B: Tagesansicht der Lehrkraft ---------- */
.fz-tabs {
    display: flex; gap: 0.25em;
    padding: 0.45em 0.6em;
    background: var(--surface); border-bottom: 1px solid var(--line);
    flex-shrink: 0;
}
.fz-tab {
    font-size: 0.58em; font-weight: 800;
    padding: 0.25em 0.55em; border-radius: 100px;
    background: var(--surface-2); color: var(--ink-muted);
}
.fz-tab.is-on { background: var(--accent-soft); color: var(--md-deep); }
.fz-stat { margin-left: auto; font-size: 0.56em; font-weight: 800; color: var(--ink-muted); display: flex; align-items: center; gap: 0.3em; }
.fz-stat b {
    display: inline-grid; place-items: center;
    min-width: 1.4em; padding: 0 0.3em; height: 1.4em;
    border-radius: 100px; background: #fef3c7; color: #b45309;
    transition: background 320ms var(--ease), color 320ms var(--ease);
}
.fz-stat.is-done b { background: #e7f7ef; color: #0f7a52; }

.fz-kurs { flex: 1; min-height: 0; padding: 0.5em 0.55em; overflow: hidden; }
.fz-kurscard {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: 0.7em; overflow: hidden;
    box-shadow: var(--shadow-sm);
    margin-bottom: 0.4em;
    opacity: 0; transform: translateY(0.5em);
    transition: opacity 400ms var(--ease), transform 400ms var(--ease);
}
.fz-kurscard.is-in { opacity: 1; transform: none; }
.fz-kurshead {
    display: flex; align-items: center; gap: 0.45em;
    padding: 0.4em 0.55em;
    background: linear-gradient(135deg, var(--accent-soft), #fff);
    border-bottom: 1px solid var(--line);
}
.fz-kurshead .fz-hb {
    width: 1.7em; height: 1.7em;
    display: grid; place-items: center; border-radius: 0.4em;
    background: var(--md-mid); color: #fff;
    font-size: 0.58em; font-weight: 800;
}
.fz-kurshead b { font-size: 0.66em; font-weight: 800; }
.fz-kurshead em { font-style: normal; font-size: 0.56em; color: var(--ink-muted); font-weight: 600; display: block; }

.fz-roster { padding: 0.15em 0.35em 0.35em; }
.fz-rrow {
    display: flex; align-items: center; gap: 0.45em;
    padding: 0 0.2em;
    max-height: 0; overflow: hidden; opacity: 0;
    border-bottom: 1px solid transparent;
    transition: max-height 400ms var(--ease), padding 400ms var(--ease), opacity 380ms var(--ease);
}
.fz-rrow.is-in { max-height: 4em; padding: 0.35em 0.2em; opacity: 1; border-bottom-color: #f1f4f6; }
.fz-rrow:last-child.is-in { border-bottom-color: transparent; }
.fz-av {
    width: 1.9em; height: 1.9em; flex-shrink: 0;
    display: grid; place-items: center; border-radius: 50%;
    font-size: 0.56em; font-weight: 800; color: #fff;
    background: var(--md-teacher);
}
.fz-av--absent { background: linear-gradient(135deg, #ef6a6a, #c0392b); }
.fz-rmain { flex: 1; min-width: 0; }
.fz-rmain b { display: block; font-size: 0.64em; font-weight: 700; }
.fz-rmain em { display: block; font-style: normal; font-size: 0.54em; color: var(--ink-muted); font-weight: 600; }
.fz-flag {
    font-size: 0.52em; font-weight: 800;
    padding: 0.12em 0.42em; border-radius: 100px;
    background: #fee2e2; color: #b91c1c;
}
.fz-sign {
    position: relative;
    display: inline-flex; align-items: center; gap: 0.25em;
    font-size: 0.54em; font-weight: 800;
    padding: 0.28em 0.55em; border-radius: 100px;
    border: 1px solid var(--accent-tint);
    background: var(--accent-soft); color: var(--md-deep);
    white-space: nowrap;
    transition: background 320ms var(--ease), color 320ms var(--ease), border-color 320ms var(--ease);
}
.fz-sign i { font-size: 0.9em; opacity: 0; width: 0; transition: opacity 260ms var(--ease), width 260ms var(--ease); }
.fz-sign .fz-sign-b { display: none; }
.fz-sign.is-done {
    background: #e7f7ef; border-color: #bfe8d4; color: #0f7a52;
    animation: mdBump 520ms var(--ease);
}
.fz-sign.is-done i { opacity: 1; width: 0.9em; }
.fz-sign.is-done .fz-sign-a { display: none; }
.fz-sign.is-done .fz-sign-b { display: inline; }


/* =========================================================================
   MODUL: KLASSENBUCH  (data-demo="klassenbuch")
   Ansicht A = Lehrkraft mit Bearbeitungsmodus, Ansicht B = Schüleransicht
   ========================================================================= */

.kb-days {
    display: flex; align-items: center; gap: 0.25em;
    padding: 0.45em 0.6em;
    border-bottom: 1px solid var(--line);
    flex-shrink: 0;
    opacity: 0; transform: translateY(0.4em);
    transition: opacity 400ms var(--ease), transform 400ms var(--ease);
}
.kb-days.is-in { opacity: 1; transform: none; }
.kb-day {
    flex: 1;
    text-align: center;
    font-size: 0.58em; font-weight: 800;
    padding: 0.25em 0; border-radius: 0.4em;
    background: var(--surface-2); color: var(--ink-muted);
}
.kb-day.is-on { background: var(--md-mid); color: #fff; }

.kb-list {
    flex: 1; min-height: 0;
    padding: 0.45em 0.5em;
    overflow: hidden;
    transition: transform 620ms var(--ease);
}
/* Beim Eintragen wandert die Liste mit – wie ein Scrollen zur Stunde. */
.mdemo.is-scroll1 .kb-list { transform: translateY(-4.2em); }
.mdemo.is-scroll2 .kb-list { transform: translateY(-5.4em); }

.kb-card {
    display: flex; gap: 0.5em;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: 0.6em;
    padding: 0 0.55em;
    max-height: 0; overflow: hidden;
    opacity: 0; transform: translateY(0.5em);
    margin-bottom: 0;
    transition: max-height 460ms var(--ease), padding 460ms var(--ease), margin 460ms var(--ease),
                opacity 400ms var(--ease), transform 400ms cubic-bezier(0.34, 1.4, 0.64, 1),
                background 320ms var(--ease), border-color 320ms var(--ease);
    box-shadow: var(--shadow-sm);
}
.kb-card.is-in { max-height: 20em; padding: 0.5em 0.55em; margin-bottom: 0.4em; opacity: 1; transform: none; }
.kb-side { width: 2.5em; flex-shrink: 0; text-align: center; }
.kb-side b { display: block; font-size: 0.9em; font-weight: 800; color: var(--md-deep); line-height: 1.1; }
.kb-side em { display: block; font-style: normal; font-size: 0.52em; font-weight: 700; color: var(--ink-muted); letter-spacing: 0.03em; }
.kb-side i  { display: block; font-style: normal; font-size: 0.54em; font-weight: 700; color: var(--accent-deep); }
.kb-main { flex: 1; min-width: 0; }
.kb-lbl { font-size: 0.52em; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-muted); }
.kb-txt { font-size: 0.6em; font-weight: 600; color: var(--ink); line-height: 1.35; }
.kb-txt.is-empty { color: var(--ink-muted); font-style: italic; font-weight: 500; }
.kb-hw { margin-top: 0.25em; }

/* Fortschrittsbalken der Stunde */
.kb-bar { height: 0.32em; border-radius: 100px; background: #eef1f4; margin-top: 0.4em; overflow: hidden; }
.kb-bar i {
    display: block; height: 100%; width: 0; border-radius: 100px;
    background: var(--md-deep);
    transition: width 700ms var(--ease), background 400ms var(--ease);
}
.kb-card--done .kb-bar i { width: 100%; }
.kb-card--soon .kb-bar i { width: 0; }
.kb-card--now  .kb-bar i { background: #f0b429; animation: kbNow 9s linear infinite; }
@keyframes kbNow { from { width: 22%; } to { width: 78%; } }
.kb-card.is-off .kb-bar i { width: 100%; background: #e11d48; animation: none; }
.kb-card.is-off { background: #fff6f6; border-color: #fbd5d5; }
.kb-badge {
    display: none;
    font-size: 0.5em; font-weight: 800;
    padding: 0.1em 0.4em; border-radius: 100px;
    background: #fee2e2; color: #b91c1c;
    margin-right: 0.3em; vertical-align: middle;
}
.kb-card.is-off .kb-badge { display: inline-block; }

/* Bearbeitungsmodus: Felder klappen auf */
.kb-edit {
    max-height: 0; overflow: hidden; opacity: 0;
    transition: max-height 420ms var(--ease), opacity 380ms var(--ease), margin 420ms var(--ease);
}
.kb-card.is-edit .kb-edit { max-height: 9em; opacity: 1; margin-top: 0.35em; }
.kb-card.is-edit .kb-view { display: none; }
.kb-field {
    border: 1.5px solid var(--line); border-radius: 0.45em;
    padding: 0.28em 0.42em; margin-bottom: 0.3em;
    background: var(--surface);
    transition: border-color 260ms var(--ease);
}
.kb-field.is-focus { border-color: var(--accent-deep); background: var(--accent-soft); }
.kb-field span { display: block; font-size: 0.5em; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-muted); }
.kb-type {
    display: block;
    font-size: 0.58em; font-weight: 600; color: var(--ink);
    max-width: 0; overflow: hidden; white-space: nowrap;
    border-right: 1.5px solid transparent;
    min-height: 1.3em;
}
.kb-field.is-focus .kb-type {
    animation: kbType 1500ms steps(34, end) forwards, mdCaret 0.6s step-end infinite;
}
@keyframes kbType { to { max-width: 100%; } }

.kb-tools { display: flex; align-items: center; gap: 0.25em; margin-top: 0.15em; }
.kb-tool {
    display: inline-flex; align-items: center; gap: 0.2em;
    font-size: 0.5em; font-weight: 800;
    padding: 0.18em 0.4em; border-radius: 100px;
    background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-soft);
}
.kb-tool.is-on { background: var(--accent-soft); border-color: var(--accent-tint); color: var(--md-deep); }

/* Fußleiste mit Bearbeitungsmodus / Speichern */
.kb-foot {
    display: flex; align-items: center; gap: 0.4em;
    padding: 0.45em 0.6em;
    border-top: 1px solid var(--line);
    background: var(--surface);
    flex-shrink: 0;
}
.kb-btn {
    position: relative;
    display: inline-flex; align-items: center; gap: 0.3em;
    font-size: 0.58em; font-weight: 800;
    padding: 0.4em 0.7em; border-radius: 100px;
    border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-soft);
    transition: background 300ms var(--ease), color 300ms var(--ease), border-color 300ms var(--ease);
}
.kb-btn--edit.is-on { background: var(--accent-soft); border-color: var(--accent-tint); color: var(--md-deep); }
.kb-btn--save {
    margin-left: auto;
    border: 0; color: #fff;
    background: linear-gradient(135deg, var(--accent), var(--accent-deeper));
    box-shadow: 0 6px 14px -8px var(--accent-deep);
    opacity: 0.45;
}
.kb-btn--save.is-on { opacity: 1; }
.kb-btn--save.is-press { animation: mdBump 480ms var(--ease); }

/* Schüleransicht */
.kb-shead {
    display: flex; align-items: center; gap: 0.45em;
    padding: 0.5em 0.65em;
    background: var(--surface); border-bottom: 1px solid var(--line);
    flex-shrink: 0;
}
.kb-shead b { font-size: 0.68em; font-weight: 800; }
.kb-shead em { display: block; font-style: normal; font-size: 0.56em; color: var(--ink-muted); font-weight: 600; }
.kb-live {
    margin-left: auto;
    display: inline-flex; align-items: center; gap: 0.3em;
    font-size: 0.54em; font-weight: 800;
    padding: 0.2em 0.5em; border-radius: 100px;
    background: #e7f7ef; color: #0f7a52;
}
.kb-live i { width: 0.4em; height: 0.4em; border-radius: 50%; background: #16a37b; animation: mdPulse 1.6s var(--ease) infinite; }

/* Zahl, die im Betrieb wechselt (offene Fehlstunden). */
.fz-num { position: relative; display: inline-grid; }
.fz-num em { grid-area: 1 / 1; font-style: normal; transition: opacity 300ms var(--ease); }
.fz-num .md-swap-b { opacity: 0; }
.fz-stat.is-done .fz-num .md-swap-a { opacity: 0; }
.fz-stat.is-done .fz-num .md-swap-b { opacity: 1; }

/* Schaltfläche „Krankmelden“ in der Schülerliste – bewusst zurückhaltend. */
.fz-sign--rep { background: var(--surface-2); border-color: var(--line); color: var(--ink-muted); }

/* Klassenbuch: Text, der erst nach dem Speichern erscheint. */
.kb-t-new { display: none; }
.kb-card.is-filled .kb-t-new  { display: block; }
.kb-card.is-filled .kb-t-empty { display: none; }


/* =========================================================================
   MODUL: KLASSENARBEITEN  (data-demo="klassenarbeiten")
   Ansicht A = Lehrkraft trägt ein, Ansicht B = Liste „Arbeiten für …“

   Die Felder liegen bewusst UNTEREINANDER und sind ausdrücklich als Block
   ausgezeichnet. Eine Zeile nebeneinander gibt es nur dort, wo zwei kurze
   Werte sicher nebeneinander passen (Von/Bis) – so kann nichts seitlich
   aus dem Bildschirm laufen.
   ========================================================================= */

.ka-form { flex: 1; min-height: 0; padding: 0.55em 0.6em; overflow: hidden; }

.ka-card {
    display: block; width: 100%;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: 0.7em; padding: 0.5em 0.55em;
    box-shadow: var(--shadow-sm);
    margin-bottom: 0.4em;
    opacity: 0; transform: translateY(0.5em);
    transition: opacity 400ms var(--ease), transform 400ms var(--ease);
}
.ka-card.is-in { opacity: 1; transform: none; }
.ka-card > h4 {
    display: block;
    font-size: 0.6em; font-weight: 800; letter-spacing: 0.04em;
    text-transform: uppercase; color: var(--ink-muted); margin-bottom: 0.45em;
}
.ka-field { display: block; margin-bottom: 0.4em; }
.ka-field:last-child { margin-bottom: 0; }
.ka-label { display: block; font-size: 0.56em; font-weight: 700; color: var(--ink-muted); margin-bottom: 0.15em; }
.ka-input {
    display: flex; align-items: center; justify-content: space-between; gap: 0.3em;
    border: 1.5px solid var(--line); border-radius: 0.45em;
    padding: 0.32em 0.45em;
    font-size: 0.62em; font-weight: 700; color: var(--ink);
    transition: border-color 260ms var(--ease), background 260ms var(--ease);
}
.ka-input i { color: var(--ink-muted); font-size: 0.9em; }
.ka-input.is-set { border-color: var(--accent-deep); background: var(--accent-soft); }

/* Zwei kurze Werte nebeneinander – mehr passt in 9:16 nicht sicher. */
.ka-row { display: flex; gap: 0.4em; }
.ka-row > .ka-field { flex: 1 1 0; min-width: 0; margin-bottom: 0; }

/* Schaltflächen laufen über die ganze Breite: nichts kann seitlich abreißen. */
.ka-btn {
    position: relative;
    display: flex; align-items: center; justify-content: center; gap: 0.35em;
    width: 100%;
    margin-top: 0.45em;
    font-size: 0.58em; font-weight: 800;
    padding: 0.45em 0.5em; border-radius: 0.45em;
    background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-soft);
    transition: background 280ms var(--ease), color 280ms var(--ease), border-color 280ms var(--ease);
}
.ka-btn.is-on { background: var(--accent-soft); border-color: var(--accent-tint); color: var(--md-deep); }

/* Panel „Termin vorschlagen lassen“ */
.ka-panel {
    display: block;
    max-height: 0; overflow: hidden; opacity: 0;
    border-radius: 0.5em;
    background: var(--surface-2); border: 1px solid transparent;
    transition: max-height 460ms var(--ease), opacity 400ms var(--ease),
                margin 460ms var(--ease), padding 460ms var(--ease);
    padding: 0 0.5em;
}
.ka-panel.is-in { max-height: 14em; opacity: 1; margin-top: 0.45em; padding: 0.45em 0.5em; border-color: var(--line); }
.ka-panel-hint { display: block; font-size: 0.55em; font-weight: 600; color: var(--ink-muted); line-height: 1.4; margin-bottom: 0.4em; }
.ka-suggest {
    display: flex; gap: 0.45em; align-items: flex-start;
    border-radius: 0.5em; padding: 0 0.5em;
    background: #e7f7ef; border: 1px solid #bfe8d4; color: #0f7a52;
    max-height: 0; overflow: hidden; opacity: 0;
    transition: max-height 440ms var(--ease), padding 440ms var(--ease), opacity 400ms var(--ease), margin 440ms var(--ease);
}
.ka-suggest.is-in { max-height: 8em; padding: 0.42em 0.5em; margin-top: 0.4em; opacity: 1; }
.ka-suggest > i { font-size: 0.8em; margin-top: 0.15em; flex-shrink: 0; }
.ka-suggest b { display: block; font-size: 0.62em; font-weight: 800; }
.ka-suggest em { display: block; font-style: normal; font-size: 0.55em; font-weight: 600; line-height: 1.4; opacity: 0.9; }

.ka-check { display: flex; align-items: center; gap: 0.4em; margin-top: 0.45em; }
.ka-box {
    width: 1em; height: 1em; flex-shrink: 0;
    display: grid; place-items: center;
    border-radius: 0.25em; border: 1.5px solid var(--line-strong);
    color: #fff; font-size: 0.66em;
    transition: background 260ms var(--ease), border-color 260ms var(--ease);
}
.ka-box i { opacity: 0; transition: opacity 200ms var(--ease); }
.ka-check.is-on .ka-box { background: var(--accent-deep); border-color: var(--accent-deep); }
.ka-check.is-on .ka-box i { opacity: 1; }
.ka-check > span { font-size: 0.6em; font-weight: 700; }
.ka-found {
    display: inline-flex; align-items: center; gap: 0.3em;
    margin-top: 0.4em;
    font-size: 0.56em; font-weight: 800;
    padding: 0.2em 0.45em; border-radius: 100px;
    background: var(--accent-soft); border: 1px solid var(--accent-tint); color: var(--md-deep);
    opacity: 0; transform: translateY(0.2em);
    transition: opacity 320ms var(--ease), transform 320ms var(--ease);
}
.ka-found.is-in { opacity: 1; transform: none; }

.ka-warn {
    display: flex; gap: 0.4em; align-items: flex-start;
    border-radius: 0.5em; padding: 0 0.5em;
    background: #fef3c7; border: 1px solid #fde68a; color: #b45309;
    max-height: 0; overflow: hidden; opacity: 0;
    transition: max-height 420ms var(--ease), padding 420ms var(--ease), opacity 380ms var(--ease), margin 420ms var(--ease);
}
.ka-warn.is-in { max-height: 8em; padding: 0.42em 0.5em; margin-top: 0.4em; opacity: 1; }
.ka-warn > i { flex-shrink: 0; margin-top: 0.1em; }
.ka-warn span { font-size: 0.55em; font-weight: 700; line-height: 1.4; }

.ka-submit {
    position: relative;
    display: flex; align-items: center; justify-content: center; gap: 0.4em;
    width: 100%;
    padding: 0.55em; border-radius: 0.6em;
    font-size: 0.66em; font-weight: 800; color: #fff;
    background: linear-gradient(135deg, var(--accent), var(--accent-deeper));
    box-shadow: 0 8px 18px -10px var(--accent-deep);
    opacity: 0; transform: translateY(0.4em);
    transition: opacity 380ms var(--ease), transform 380ms var(--ease);
}
.ka-submit.is-in { opacity: 1; transform: none; }
.ka-submit.is-press { animation: mdBump 480ms var(--ease); }

/* Ansicht B: Liste der anstehenden Arbeiten */
.ka-listhead {
    display: flex; align-items: center; gap: 0.4em;
    padding: 0.5em 0.65em;
    background: var(--surface); border-bottom: 1px solid var(--line);
    flex-shrink: 0;
}
.ka-listhead b { font-size: 0.68em; font-weight: 800; }
.ka-listhead em { display: block; font-style: normal; font-size: 0.56em; color: var(--ink-muted); font-weight: 600; }
.ka-list { flex: 1; min-height: 0; padding: 0.45em 0.5em; overflow: hidden; }

.ka-item {
    display: flex; align-items: center; gap: 0.55em;
    background: #fff; border: 1px solid var(--line);
    border-radius: 0.6em;
    padding: 0 0.55em;
    max-height: 0; overflow: hidden; margin-bottom: 0;
    opacity: 0; transform: translateY(0.5em);
    box-shadow: var(--shadow-sm);
    transition: max-height 440ms var(--ease), padding 440ms var(--ease), margin 440ms var(--ease),
                opacity 400ms var(--ease), transform 400ms cubic-bezier(0.34, 1.4, 0.64, 1);
}
.ka-item.is-in { max-height: 9em; padding: 0.45em 0.55em; margin-bottom: 0.4em; opacity: 1; transform: none; }
.ka-item--new.is-in { animation: mdNewRow 1100ms var(--ease); }
.ka-date {
    width: 2.5em; flex-shrink: 0;
    display: flex; flex-direction: column; align-items: center;
    border-radius: 0.45em; padding: 0.2em 0;
    background: linear-gradient(160deg, var(--accent-soft), #fff);
    border: 1px solid var(--accent-tint);
}
.ka-date em { font-style: normal; font-size: 0.5em; font-weight: 800; letter-spacing: 0.05em; color: var(--md-deep); }
.ka-date b { font-size: 0.86em; font-weight: 800; line-height: 1.05; color: var(--md-deep); }
.ka-date i { font-style: normal; font-size: 0.5em; font-weight: 700; color: var(--ink-muted); }
.ka-item-main { flex: 1; min-width: 0; }
.ka-item-main b { display: block; font-size: 0.68em; font-weight: 800; }
.ka-item-main em { display: block; font-style: normal; font-size: 0.58em; color: var(--ink-muted); font-weight: 600; }
.ka-sup {
    display: inline-block; margin-top: 0.2em;
    font-size: 0.54em; font-weight: 700;
    padding: 0.1em 0.4em; border-radius: 100px;
    background: var(--pl-ev-bg); color: var(--pl-ev-ink);
}
.ka-in {
    flex-shrink: 0;
    font-size: 0.54em; font-weight: 800;
    padding: 0.15em 0.45em; border-radius: 100px;
    background: var(--surface-2); color: var(--ink-soft);
}
.ka-in--soon { background: #fef3c7; color: #b45309; }


/* =========================================================================
   MODUL: RAUMBUCHUNG  (data-demo="raumbuchung")
   Ansicht A = Raumplan der Lehrkraft, Ansicht B = Wirkung im Schülerplan
   ========================================================================= */

.rb-bar {
    display: flex; align-items: center; gap: 0.25em;
    padding: 0.45em 0.6em 0;
    flex-shrink: 0;
    opacity: 0; transform: translateY(0.4em);
    transition: opacity 380ms var(--ease), transform 380ms var(--ease);
}
.rb-bar.is-in { opacity: 1; transform: none; }
.rb-chip {
    flex: 1;
    text-align: center;
    font-size: 0.55em; font-weight: 800;
    padding: 0.3em 0.2em; border-radius: 100px;
    background: var(--surface-2); color: var(--ink-muted);
    white-space: nowrap;
    transition: background 280ms var(--ease), color 280ms var(--ease);
}
.rb-chip.is-on { background: var(--md-mid); color: #fff; }
.rb-bar--weeks { padding-top: 0.35em; }
.rb-bar--weeks .rb-chip.is-on { background: var(--accent-soft); color: var(--md-deep); }

.rb-rooms { display: flex; gap: 0.3em; padding: 0.45em 0.6em; flex-shrink: 0; opacity: 0; transition: opacity 380ms var(--ease); }
.rb-rooms.is-in { opacity: 1; }
.rb-room {
    position: relative;
    flex: 1;
    display: flex; flex-direction: column; align-items: center; gap: 0.1em;
    font-size: 0.56em; font-weight: 800;
    padding: 0.35em 0.2em; border-radius: 0.5em;
    background: var(--surface); border: 1px solid var(--line); color: var(--ink-soft);
    box-shadow: var(--shadow-sm);
    transition: background 280ms var(--ease), color 280ms var(--ease), border-color 280ms var(--ease);
}
.rb-room i { font-size: 1.05em; opacity: 0.75; }
.rb-room.is-on {
    background: linear-gradient(135deg, var(--accent), var(--accent-deeper));
    border-color: transparent; color: #fff;
    box-shadow: 0 6px 14px -8px var(--accent-deep);
}

.rb-plan {
    flex: 1; min-height: 0;
    padding: 0.15em 0.55em 0.5em;
    overflow: hidden;
    opacity: 0; transform: translateY(0.4em);
    transition: opacity 420ms var(--ease), transform 420ms var(--ease);
}
.rb-plan.is-in { opacity: 1; transform: none; }
.rb-planhead { display: flex; align-items: center; justify-content: space-between; gap: 0.4em; margin-bottom: 0.35em; }
.rb-planhead b { font-size: 0.62em; font-weight: 800; }
.rb-legend { display: flex; gap: 0.4em; }
.rb-key { display: inline-flex; align-items: center; gap: 0.2em; font-size: 0.5em; font-weight: 700; color: var(--ink-muted); }
.rb-dot { width: 0.7em; height: 0.7em; border-radius: 0.2em; display: inline-block; }
.rb-dot--busy { background: var(--surface-2); border: 1px solid var(--line-strong); }
.rb-dot--mine { background: var(--accent-deep); }
.rb-dot--ka   { background: #fecaca; border: 1px solid #fca5a5; }
.rb-dot--free { background: #ecfdf5; border: 1px solid #a7f3d0; }

.rb-row {
    display: grid; grid-template-columns: 1.2em repeat(5, 1fr); gap: 0.18em;
    margin-bottom: 0.18em;
    opacity: 0; transform: translateY(0.35em);
    transition: opacity 320ms var(--ease), transform 320ms var(--ease);
}
.rb-row.is-in { opacity: 1; transform: none; }
.rb-h { display: grid; place-items: center; font-size: 0.56em; font-weight: 800; color: var(--ink-muted); }
.rb-c {
    position: relative;
    min-height: 1.95em;
    display: grid; place-items: center;
    border-radius: 0.35em;
    font-size: 0.58em; font-weight: 800;
    background: #ecfdf5; border: 1px solid #a7f3d0; color: #0f7a52;
    transition: background 380ms var(--ease), border-color 380ms var(--ease), color 380ms var(--ease);
}
.rb-row--head .rb-c { background: transparent; border-color: transparent; color: var(--ink-muted); min-height: 0; font-size: 0.56em; }
.rb-c--busy { background: var(--surface-2); border-color: var(--line-strong); color: var(--ink-soft); }
.rb-c--ka   { background: #fee2e2; border-color: #fecaca; color: #dc2626; }
.rb-c.is-mine {
    background: linear-gradient(135deg, var(--accent), var(--accent-deeper));
    border-color: transparent; color: #fff;
    box-shadow: 0 5px 12px -7px var(--accent-deep);
    animation: mdBump 620ms var(--ease);
}
.rb-c .rb-me { opacity: 0; transition: opacity 300ms var(--ease); }
.rb-c.is-mine .rb-me { opacity: 1; }

.rb-foot { padding: 0.15em 0.6em 0.5em; flex-shrink: 0; }
.rb-hint {
    display: flex; align-items: center; gap: 0.35em;
    font-size: 0.55em; font-weight: 700; color: var(--ink-muted);
}
.rb-hint .ka-box { width: 0.9em; height: 0.9em; }

/* Ansicht B: was die Klasse sieht */
.rb-view { flex: 1; min-height: 0; padding: 0.55em 0.6em; overflow: hidden; }
.rb-vhead { display: flex; align-items: center; gap: 0.45em; margin-bottom: 0.5em; }
.rb-vhead b { font-size: 0.68em; font-weight: 800; }
.rb-vhead em { display: block; font-style: normal; font-size: 0.56em; color: var(--ink-muted); font-weight: 600; }


/* =========================================================================
   MODUL: STAMMDATEN-ANZEIGE  (data-demo="stammdaten")
   Ansicht A = Listen der fünf Datengruppen, Ansicht B = Detailseite
   ========================================================================= */

.sd-iconbar {
    display: flex; gap: 0.2em;
    padding: 0.45em 0.5em;
    background: var(--surface); border-bottom: 1px solid var(--line);
    flex-shrink: 0;
    opacity: 0; transform: translateY(0.4em);
    transition: opacity 380ms var(--ease), transform 380ms var(--ease);
}
.sd-iconbar.is-in { opacity: 1; transform: none; }
.sd-ic {
    flex: 1;
    display: flex; flex-direction: column; align-items: center; gap: 0.12em;
    padding: 0.3em 0.1em; border-radius: 0.45em;
    font-size: 0.5em; font-weight: 800;
    color: var(--ink-muted);
    transition: background 280ms var(--ease), color 280ms var(--ease);
}
.sd-ic i { font-size: 1.35em; }
.sd-ic.is-on { background: var(--accent-soft); color: var(--md-deep); }

.sd-list { flex: 1; min-height: 0; padding: 0.45em 0.5em; overflow: hidden; }
.sd-search {
    display: flex; align-items: center; gap: 0.4em;
    font-size: 0.6em; font-weight: 600; color: var(--ink-muted);
    background: var(--surface-2); border: 1px solid var(--line);
    border-radius: 100px; padding: 0.4em 0.7em;
    margin-bottom: 0.45em;
    opacity: 0;
    transition: opacity 320ms var(--ease), border-color 280ms var(--ease);
}
.sd-search.is-in { opacity: 1; }
.sd-search.is-typing { border-color: var(--accent-deep); background: var(--accent-soft); color: var(--ink); }
.sd-search .sd-q { max-width: 0; overflow: hidden; white-space: nowrap; }
.sd-search.is-typing .sd-ph { display: none; }
.sd-search.is-typing .sd-q { animation: kbType 700ms steps(9, end) forwards; }

.sd-row {
    display: flex; align-items: center; gap: 0.5em;
    border-bottom: 1px solid transparent;
    padding: 0 0.15em;
    max-height: 0; overflow: hidden; opacity: 0;
    transition: max-height 400ms var(--ease), padding 400ms var(--ease), opacity 360ms var(--ease);
}
.sd-row.is-in { max-height: 5em; padding: 0.4em 0.15em; opacity: 1; border-bottom-color: #f1f4f6; }
.sd-av {
    width: 2em; height: 2em; flex-shrink: 0;
    display: grid; place-items: center; border-radius: 50%;
    font-size: 0.58em; font-weight: 800; color: #fff;
    background: var(--md-teacher);
}
.sd-av--class { background: var(--md-group); }
.sd-av--fach  { background: linear-gradient(135deg, #7c8cf8, #4b56c9); }
.sd-main { flex: 1; min-width: 0; }
.sd-main b { display: block; font-size: 0.66em; font-weight: 700; }
.sd-main em { display: block; font-style: normal; font-size: 0.56em; color: var(--ink-muted); font-weight: 600; }
.sd-row > i { color: var(--ink-muted); font-size: 0.6em; }
.sd-kuerzel {
    flex-shrink: 0;
    font-size: 0.54em; font-weight: 800;
    padding: 0.12em 0.42em; border-radius: 100px;
    background: var(--surface-2); color: var(--ink-soft);
}

/* Detailseite */
.sd-detail { flex: 1; min-height: 0; padding: 0.5em 0.55em; overflow: hidden; }
.sd-card {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: 0.7em; padding: 0.5em 0.55em;
    box-shadow: var(--shadow-sm);
    margin-bottom: 0.4em;
    opacity: 0; transform: translateY(0.5em);
    transition: opacity 400ms var(--ease), transform 400ms var(--ease);
}
.sd-card.is-in { opacity: 1; transform: none; }
.sd-cardhead { display: flex; align-items: center; gap: 0.5em; margin-bottom: 0.4em; }
.sd-cardhead b { font-size: 0.72em; font-weight: 800; }
.sd-cardhead em { display: block; font-style: normal; font-size: 0.56em; color: var(--ink-muted); font-weight: 600; }
.sd-facts { display: flex; flex-wrap: wrap; gap: 0.25em; }
.sd-fact {
    display: inline-flex; align-items: center; gap: 0.25em;
    font-size: 0.54em; font-weight: 700;
    padding: 0.15em 0.45em; border-radius: 100px;
    background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-soft);
}
.sd-fact i { color: var(--accent-deep); }
.sd-mini { padding: 0; }
.sd-sub { font-size: 0.56em; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 0.3em; }
.sd-actions { display: flex; gap: 0.3em; margin-top: 0.4em; }
.sd-action {
    flex: 1;
    display: inline-flex; align-items: center; justify-content: center; gap: 0.3em;
    font-size: 0.56em; font-weight: 800;
    padding: 0.4em 0.3em; border-radius: 0.5em;
    background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-soft);
}
.sd-action--accent { background: var(--accent-soft); border-color: var(--accent-tint); color: var(--md-deep); }

/* Häkchen unter dem Raumplan (nutzt die Box aus dem Klassenarbeiten-Modul). */
.rb-box.is-on { background: var(--accent-deep); border-color: var(--accent-deep); }
.rb-box.is-on i { opacity: 1; }

/* -------------------------------------------------------------------------
   Sicherung gegen fremde Layout-Regeln
   Die Karten der Demos sind Blöcke – ihre Felder liegen untereinander. Wird
   von außen (Theme, Reset, Editor) versehentlich Flex gesetzt, kippt die
   Anordnung in eine Zeile und Inhalte laufen seitlich aus dem Rahmen. Diese
   Regel stellt das Blockverhalten mit hoher Spezifität wieder her.
   ------------------------------------------------------------------------- */
.mdemo .ka-form, .mdemo .ka-card,
.mdemo .fz-form, .mdemo .fz-card,
.mdemo .sd-detail, .mdemo .sd-card,
.mdemo .kb-list, .mdemo .pl-vlist, .mdemo .pl-grid,
.mdemo .ka-list, .mdemo .fz-kurs, .mdemo .rb-plan {
    display: block;
}
.mdemo .ka-card > .ka-field,
.mdemo .fz-card > .fz-field { display: block; width: 100%; }