/* =====================================================================
   LORA (Arbeitsplan AP-12/AP-13, Entscheidung E15)
   Die Demo bildet die App Lora nach: Farben, Formen und Radien aus
   ui/Theme.kt (Stile ADEU, Office, Hoher Kontrast – je hell und dunkel),
   Lora als Figur nach drawLora (ui/LoraFigure.kt), Startanimation nach
   ui/Logo.kt. Abläufe und Antworten: js/lora-demo.js.
   ===================================================================== */

body[data-marke="lora"] svg:has(> use) { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.la-symbole { position: absolute; width: 0; height: 0; overflow: hidden; }
[data-lauf]:not(.ist-sichtbar) *, [data-lauf]:not(.ist-sichtbar) *::before, [data-lauf]:not(.ist-sichtbar) *::after { animation-play-state: paused !important; }

/* ---------------------------------------------------------------------
   1. Lora als Figur: Farben wie im Logo, in der App aus dem gewählten Stil
   --------------------------------------------------------------------- */
.lora-figur, .lora-gesicht {
    --lf-k: #5B4FE9; --lf-v: #ffffff; --lf-a: #1B1B2F; --lf-l: #6A6290; --lf-buch: #FF8A3D; --lf-schatten: rgba(43, 31, 168, 0.16);
    display: block; overflow: visible;
}
.lf-k { fill: var(--lf-k); }
.lf-ks { stroke: var(--lf-k); }
.lf-v { fill: var(--lf-v); }
.lf-vs { stroke: var(--lf-v); }
.lf-a { fill: var(--lf-a); }
.lf-as { stroke: var(--lf-a); }
.lf-l { stroke: var(--lf-l); }
.lf-stern { fill: #FFB300; }
.lf-wange { fill: #FF8FA3; fill-opacity: 0.55; }
.lf-schatten { fill: var(--lf-schatten); }
.lf-buch { fill: var(--lf-buch); }
.lf-seite, .lf-titel { fill: #F4EBD9; }
.lf-seite { stroke: var(--lf-l); stroke-opacity: 0.45; }
.lora-figur .lf-oben { transform-box: view-box; transform-origin: 40px 52px; }
.lora-figur .lf-augen, .lora-gesicht .lf-augen { transform-box: fill-box; transform-origin: center; animation: lfBlinzeln 3.7s ease-in-out infinite; }
.lora-figur .lf-stern:first-of-type, .lora-gesicht .lf-stern { transform-box: fill-box; transform-origin: center; animation: lfStern 2.2s ease-in-out infinite; }
.lora-figur .lf-blatt { transform-box: view-box; transform-origin: 40px 42px; transform: scaleX(0); opacity: 0; }
.lf-liest .lf-blatt, .lf-logo .lf-blatt { animation: lfBlatt 1.8s ease-in-out infinite; }
.lf-huepft .lf-oben { animation: lfHuepfen 3.6s var(--ease-out) infinite; }
.lf-winkt .lf-winkarm { transform-box: view-box; transform-origin: 51.1px 41px; animation: lfWinken 1.4s ease-in-out infinite; }
.lf-winkt .lf-oben { animation: lfAtmen 3.4s ease-in-out infinite; }
@keyframes lfBlinzeln { 0%, 92%, 100% { transform: scaleY(1); } 96% { transform: scaleY(0.12); } }
@keyframes lfStern { 50% { transform: scale(1.18) rotate(12deg); } }
@keyframes lfBlatt { 0% { transform: scaleX(1); opacity: 1; } 40% { transform: scaleX(-1); opacity: 1; } 41%, 100% { transform: scaleX(-1); opacity: 0; } }
@keyframes lfHuepfen { 0%, 64%, 100% { transform: none; } 72% { transform: scale(1.05, 0.93); } 82% { transform: translateY(-3px) scale(0.97, 1.04); } 92% { transform: scale(1.03, 0.97); } }
@keyframes lfWinken { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-16deg); } }
@keyframes lfAtmen { 50% { transform: scale(1.012, 0.99); } }

/* ---------------------------------------------------------------------
   2. Kopf der Seite
   --------------------------------------------------------------------- */
.lora-kopf { position: relative; display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 20px 44px; align-items: center; padding: 0 0 26px; }
.lora-kopf::before {
    content: ""; position: absolute; left: max(-80px, calc(50% - 50vw)); top: -140px; width: min(680px, 100vw); height: 520px; z-index: -1; pointer-events: none;
    background: radial-gradient(closest-side, var(--marke-glanz), transparent); filter: blur(14px);
}
.lora-kopf-figur { position: relative; }
.lora-kopf-figur::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: 3%; height: 14%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--marke) 28%, transparent), transparent); }
.lora-held { width: 100%; max-width: 440px; margin: -20px 0 -10px; cursor: pointer; }
.lora-kopf h1 { font-family: var(--font-serif); font-size: clamp(2.6rem, 6vw, 4.2rem); line-height: 1; margin: 0 0 10px; }
.lora-kopf .untertitel { font-size: 15.5px; color: var(--marke); font-weight: 600; margin: 0 0 12px; }
.lora-kopf .lead { font-size: 16px; margin: 0; max-width: 560px; }
.lora-aktionen { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; }
@media (max-width: 860px) { .lora-kopf { grid-template-columns: minmax(0, 1fr); gap: 4px; } .lora-held { max-width: 300px; margin: 0 auto; } }

/* Drei Punkte als Kästen; auf einem sitzt Lora */
.lora-punkte { list-style: none; margin: 30px 0 64px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.lora-punkte li { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 2px 12px; align-content: start; padding: 18px 18px 18px 16px; border-radius: 16px; border: 1px solid var(--border-light); background: var(--bg-panel); font-size: 14px; line-height: 1.5; color: var(--text-muted); }
.lora-punkte strong { color: var(--text-light); font-size: 15px; font-weight: 650; }
.lora-punkte li > span:last-child { grid-column: 2; }
.lp-symbol { grid-row: span 2; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: var(--marke-weich); color: var(--marke); }
.lp-symbol svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 860px) { .lora-punkte { grid-template-columns: minmax(0, 1fr); gap: 12px; } .lora-punkte .mit-lora { margin-top: 70px; order: -1; } }

/* Lora sitzt auf der oberen Kante eines Kastens (die Kante liegt bei 52,5 von 62 Einheiten) */
.mit-lora { position: relative; }
.lora-sitzt { --b: 150px; position: absolute; z-index: 2; right: 14px; width: var(--b); aspect-ratio: 80 / 62 !important; top: calc(var(--b) * -52.5 / 80); pointer-events: none; }

.lora-demo { margin: 0 0 60px; scroll-margin-top: 76px; }
.demo-band { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 14px; font-size: 13.5px; line-height: 1.55; color: var(--text-main); }
.demo-band svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--marke); margin-top: 2px; }
.demo-band strong { color: var(--text-light); }
/* Kennzahlen der beiden Modelle: Balken mit beschrifteter Zielmarke */
.kz-balken { position: relative; display: grid; gap: 6px; margin: 6px 0 2px; font-size: 12px; color: var(--text-muted); }
.kz-zeile { display: grid; grid-template-columns: 74px 1fr 34px; align-items: center; gap: 8px; }
.kz-zahl { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-light); }
.kz-spur { position: relative; height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--text-muted) 14%, transparent); }
.kz-spur i { position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: 4px; transform-origin: left; }
.kz-alt { background: color-mix(in srgb, var(--text-muted) 70%, transparent); }
.kz-neu { background: var(--marke); }
@media (prefers-reduced-motion: no-preference) {
    .kz-spur i { transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
    .kz-zeile + .kz-zeile .kz-spur i { transition-delay: .18s; }
}
.lora-hinweis { margin: 10px 0 0; font-size: 13px; color: var(--text-muted); }
.lora-flug { will-change: transform, opacity; }

/* ---------------------------------------------------------------------
   3. App-Fenster: Farben je Stil und Helligkeit (aus ui/Theme.kt)
   --------------------------------------------------------------------- */
.lora-app {
    --la-bg: #F6F6F9; --la-karte: #FFFFFF; --la-seite: #F1F1F6; --la-hoch: #E9E9F0; --la-rand: #E3E3EA; --la-rand-breite: 1px;
    --la-text: #16161D; --la-text-2: #53536A; --la-primaer: #5B4FE9; --la-auf-primaer: #FFFFFF;
    --la-container: #E9E7FC; --la-auf-container: #2B1FA8; --la-weich: #EDEBFD; --la-auf-weich: #4B3FD9;
    --la-nutzer: #ECEAFD; --la-auf-nutzer: #16161D; --la-ok: #1F7F52; --la-warn: #A35A00;
    --la-per: #5B5BF0; --la-einr: #0B9B95; --la-ort: #D27D00;
    --la-radius: 18px; --la-radius-klein: 12px; --la-radius-eingabe: 26px; --la-form-nutzer: 20px 20px 6px 20px;
    --la-schrift: var(--font-sans); --la-skala: 1; --la-buch: #8B5CF6;
}
.lora-app[data-modus="dunkel"] {
    --la-bg: #111115; --la-karte: #1A1A20; --la-seite: #16161B; --la-hoch: #2A2A33; --la-rand: #2C2C35;
    --la-text: #ECECF2; --la-text-2: #A6A6B6; --la-primaer: #7B70FF; --la-auf-primaer: #0E0B30;
    --la-container: #2E2A5C; --la-auf-container: #D9D6FF; --la-weich: #2A2840; --la-auf-weich: #AAA3FF;
    --la-nutzer: #26243F; --la-auf-nutzer: #ECECF2; --la-ok: #3FC585; --la-warn: #F0A33A;
    --la-per: #8E8FFB; --la-einr: #33C9C1; --la-ort: #F4A62A; --la-buch: #A77BFF;
}
.lora-app[data-stil="office"] {
    --la-bg: #FAFAFA; --la-karte: #FFFFFF; --la-seite: #F5F5F5; --la-hoch: #EBEBEB; --la-rand: #E0E0E0;
    --la-text: #242424; --la-text-2: #616161; --la-primaer: #0F6CBD; --la-auf-primaer: #FFFFFF;
    --la-container: #EBF3FC; --la-auf-container: #0C3B5E; --la-weich: #F0F0F0; --la-auf-weich: #242424;
    --la-nutzer: #EBF3FC; --la-auf-nutzer: #0C3B5E; --la-buch: #FF8A3D;
    --la-radius: 6px; --la-radius-klein: 4px; --la-radius-eingabe: 8px; --la-form-nutzer: 8px;
    --la-schrift: "Segoe UI", system-ui, -apple-system, sans-serif;
}
.lora-app[data-stil="office"][data-modus="dunkel"] {
    --la-bg: #1F1F1F; --la-karte: #292929; --la-seite: #242424; --la-hoch: #383838; --la-rand: #424242;
    --la-text: #FFFFFF; --la-text-2: #D6D6D6; --la-primaer: #479EF5; --la-auf-primaer: #0A2540;
    --la-container: #0E3A62; --la-auf-container: #CFE4FA; --la-weich: #333333; --la-auf-weich: #FFFFFF;
    --la-nutzer: #0E3A62; --la-auf-nutzer: #CFE4FA;
}
.lora-app[data-stil="kontrast"] {
    --la-bg: #FFFFFF; --la-karte: #FFFFFF; --la-seite: #F7F7F7; --la-hoch: #E8E8E8; --la-rand: #000000; --la-rand-breite: 2px;
    --la-text: #000000; --la-text-2: #1F1F1F; --la-primaer: #0000B3; --la-auf-primaer: #FFFFFF;
    --la-container: #DDE0FF; --la-auf-container: #000000; --la-weich: #E6E6E6; --la-auf-weich: #000000;
    --la-nutzer: #DDE0FF; --la-auf-nutzer: #000000; --la-ok: #006B1F; --la-warn: #8A4B00;
    --la-per: #0000B3; --la-einr: #006B1F; --la-ort: #8A4B00; --la-buch: #FF8A3D;
    --la-radius: 8px; --la-radius-klein: 4px; --la-radius-eingabe: 8px; --la-form-nutzer: 8px;
}
.lora-app[data-stil="kontrast"][data-modus="dunkel"] {
    --la-bg: #000000; --la-karte: #000000; --la-seite: #0D0D0D; --la-hoch: #1C1C1C; --la-rand: #FFFFFF;
    --la-text: #FFFFFF; --la-text-2: #E0E0E0; --la-primaer: #FFE600; --la-auf-primaer: #000000;
    --la-container: #3A3500; --la-auf-container: #FFFFFF; --la-weich: #2B2B2B; --la-auf-weich: #FFFFFF;
    --la-nutzer: #3A3500; --la-auf-nutzer: #FFFFFF; --la-ok: #7CFF8A; --la-warn: #FFC94D;
    --la-per: #FFE600; --la-einr: #7FDBFF; --la-ort: #FFC94D;
}
.lora-app .lora-figur, .lora-app .lora-gesicht { --lf-k: var(--la-primaer); --lf-v: var(--la-karte); --lf-a: var(--la-text); --lf-l: var(--la-text-2); --lf-buch: var(--la-buch); --lf-schatten: color-mix(in srgb, var(--la-text) 12%, transparent); }
.lora-app .lf-logo { --lf-k: #5B4FE9; --lf-v: #ffffff; --lf-a: #1B1B2F; --lf-l: #6A6290; --lf-buch: #FF8A3D; --lf-schatten: rgba(43, 31, 168, 0.16); }
.lora-app[data-stil="kontrast"] .lora-figur:not(.lf-logo) { --lf-v: #ffffff; --lf-a: #000000; }

.lora-app {
    position: relative; isolation: isolate; display: grid;
    grid-template-columns: 248px minmax(0, 1fr) 0px; grid-template-rows: minmax(0, 1fr);
    height: clamp(600px, 82vh, 760px); overflow: hidden; border-radius: 16px;
    background: var(--la-bg); color: var(--la-text); font-family: var(--la-schrift); font-size: calc(14px * var(--la-skala));
    border: 1px solid var(--border-highlight); box-shadow: 0 50px 100px -50px rgba(40, 30, 140, 0.55), 0 24px 50px -36px rgba(0, 0, 0, 0.5);
    transition: grid-template-columns 0.45s var(--ease-out), background-color 0.45s ease, color 0.45s ease;
}
.lora-app.panel-offen { grid-template-columns: 248px minmax(0, 1fr) 320px; }
.lora-app *, .lora-app *::before, .lora-app *::after { box-sizing: border-box; }
.lora-app [hidden] { display: none !important; }
.lora-app button { font-family: inherit; color: inherit; }
.lora-app :focus-visible { outline: 2px solid var(--la-primaer); outline-offset: 2px; }
.lora-app p { font-size: inherit; line-height: 1.6; margin: 0; }
.lora-app h3, .lora-app h4 { color: var(--la-text); }
.lora-app :is(.la-seitenleiste, .la-chat-kopf, .la-panel, .la-karte, .la-arbeit, .la-msg-nutzer, .la-start-chip, .la-eingabe, .la-modell-pille, .la-rund) {
    transition: background-color 0.45s ease, color 0.45s ease, border-color 0.45s ease;
}

/* Seitenleiste */
.la-seitenleiste { display: flex; flex-direction: column; gap: 2px; min-height: 0; overflow-y: auto; padding: 14px 12px 10px; background: var(--la-seite); border-right: var(--la-rand-breite) solid var(--la-rand); scrollbar-width: thin; }
.la-app-marke { display: flex; align-items: center; gap: 10px; padding: 2px 8px 12px; font-weight: 650; font-size: 17px !important; }
.la-app-logo { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: linear-gradient(135deg, #F6F4FF, #DCD6FF); }
.la-app-logo .lora-figur { width: 24px; height: auto; }
.la-neuer-chat {
    display: flex; align-items: center; gap: 10px; margin: 0 0 8px; padding: 10px 12px; border-radius: var(--la-radius-klein); cursor: pointer;
    border: var(--la-rand-breite) solid var(--la-rand); background: var(--la-karte); font-weight: 600; font-size: 14px;
}
.la-neuer-chat:hover { background: var(--la-weich); }
.la-neuer-chat svg, .la-bereiche button svg, .la-verlauf button svg { width: 19px; height: 19px; flex-shrink: 0; }
.la-bereiche, .la-mehr, .la-verlauf { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.la-bereiche button, .la-verlauf button {
    position: relative; display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 12px; border: 0; border-radius: var(--la-radius-klein);
    background: none; text-align: left; font-size: 14px; font-weight: 500; cursor: pointer; transition: background-color 0.2s;
}
.la-bereiche button svg { color: var(--la-text-2); }
.la-bereiche button:hover, .la-verlauf button:hover { background: var(--la-hoch); }
.la-bereiche button.ist-aktiv, .la-verlauf button.ist-aktiv { background: var(--la-weich); color: var(--la-auf-weich); font-weight: 600; }
.la-bereiche button.ist-aktiv svg { color: var(--la-auf-weich); }
.la-mehr-knopf .la-pfeil { width: 15px !important; height: 15px !important; margin-left: auto; transition: transform 0.3s var(--ease-out); }
.la-mehr-knopf[aria-expanded="true"] .la-pfeil { transform: rotate(180deg); }
.la-mehr { padding-left: 10px; animation: laAuf 0.3s var(--ease-out); }
.la-gruppe { margin: 14px 0 2px !important; padding: 0 12px; font-size: 12px !important; font-weight: 600; color: var(--la-text-2); }
.la-verlauf button { font-size: 13.5px; color: var(--la-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.la-verlauf button svg { display: inline-block; vertical-align: -4px; margin-right: 10px; color: var(--la-text-2); }
.la-seitenleiste-fuss { margin-top: auto; padding-top: 10px; position: relative; }
.la-einstellungen-knopf { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 12px; border: 0; border-radius: var(--la-radius-klein); background: none; font-size: 14px; cursor: pointer; }
.la-einstellungen-knopf:hover { background: var(--la-hoch); }
.la-einstellungen-knopf svg { width: 19px; height: 19px; color: var(--la-text-2); }

/* Aufklappende Listen (Modell, Einstellungen) */
.la-aufklapp { position: relative; }
.la-aufklapp-liste {
    position: absolute; left: 0; top: calc(100% + 8px); z-index: 30; width: 270px; padding: 6px; border-radius: var(--la-radius);
    background: var(--la-karte); border: var(--la-rand-breite) solid var(--la-rand); box-shadow: 0 22px 44px -20px rgba(0, 0, 0, 0.35);
    animation: laAuf 0.24s var(--ease-out);
}
.la-aufklapp-liste.la-nach-oben { top: auto; bottom: calc(100% + 8px); transform-origin: 20% 100%; }
.la-aufklapp-titel { font-size: 12px !important; font-weight: 600; color: var(--la-text-2); padding: 8px 10px 4px; }
.la-wahl { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; padding: 8px 10px 8px 32px; border: 0; border-radius: var(--la-radius-klein); background: none; text-align: left; cursor: pointer; }
.la-wahl:hover { background: var(--la-hoch); }
.la-wahl b { font-size: 13.5px; font-weight: 600; }
.la-wahl small { font-size: 12px; color: var(--la-text-2); }
.la-wahl[aria-pressed="true"]::before { content: ""; position: absolute; left: 12px; top: 13px; width: 10px; height: 6px; border-left: 2px solid var(--la-primaer); border-bottom: 2px solid var(--la-primaer); transform: rotate(-45deg); }
.la-wahl[aria-disabled="true"] { cursor: not-allowed; }
.la-segment { display: flex; gap: 4px; padding: 4px 6px 6px; }
.la-segment button { flex: 1; padding: 7px 8px; border-radius: var(--la-radius-klein); border: var(--la-rand-breite) solid var(--la-rand); background: var(--la-karte); font-size: 13px; cursor: pointer; }
.la-segment button[aria-pressed="true"] { background: var(--la-container); color: var(--la-auf-container); border-color: transparent; font-weight: 600; }

/* ---------------------------------------------------------------------
   4. Chat
   --------------------------------------------------------------------- */
.la-chat { position: relative; display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.la-chat-kopf { display: flex; align-items: center; gap: 8px; padding: 10px 14px 10px 20px; min-height: 58px; }
.la-chat-titel { flex: 1; min-width: 0; font-weight: 600; font-size: 15px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.la-symbol-knopf { flex-shrink: 0; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.la-symbol-knopf:hover { background: var(--la-hoch); }
.la-symbol-knopf svg { width: 21px; height: 21px; }
.la-nur-schmal { display: none; }
.la-frag-lora {
    flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; height: 42px; padding: 0 16px 0 4px; border-radius: 999px; cursor: pointer;
    border: 1px solid color-mix(in srgb, var(--la-primaer) 30%, transparent); background: color-mix(in srgb, var(--la-primaer) 10%, var(--la-karte));
    color: var(--la-text) !important; font-weight: 600; font-size: 13.5px; transition: background-color 0.2s, border-color 0.2s, transform 0.25s var(--ease-out);
}
.la-frag-lora:hover { transform: translateY(-1px); background: color-mix(in srgb, var(--la-primaer) 16%, var(--la-karte)); }
.la-frag-lora .lora-gesicht { width: 34px; height: 34px; }
.la-frag-lora[aria-expanded="true"] { background: color-mix(in srgb, var(--la-primaer) 22%, var(--la-karte)); border-color: color-mix(in srgb, var(--la-primaer) 60%, transparent); }

.la-nachrichten { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 8px max(20px, calc(50% - 380px)) 16px; display: flex; flex-direction: column; gap: 18px; scrollbar-width: thin; overscroll-behavior: contain; }
.la-nachrichten:focus { outline: none; }

/* Start eines neuen Chats: Lora winkt, Gruß, Modell, Tätigkeiten als Chips */
.la-willkommen { margin: auto 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 10px 0; }
.la-willkommen.geht { animation: laWeg 0.3s ease forwards; }
.la-home-lora { display: flex; flex-direction: column; align-items: center; margin-bottom: 2px; }
.la-idee { transition: opacity 0.25s ease; }
.la-idee.leise { opacity: 0; pointer-events: none; }
.la-sprechblase {
    position: relative; display: flex; align-items: center; gap: 8px; min-height: 54px; max-width: 340px; padding: 4px 4px 4px 12px; white-space: nowrap;
    border-radius: 18px; background: var(--la-karte); border: var(--la-rand-breite) solid var(--la-rand);
    box-shadow: 0 10px 24px -16px rgba(0, 0, 0, 0.3); animation: laBlase 0.6s var(--ease-out) 0.4s backwards;
}
.la-sprechblase::after {
    content: ""; position: absolute; left: 50%; bottom: -7px; width: 12px; height: 12px; background: var(--la-karte);
    border-right: var(--la-rand-breite) solid var(--la-rand); border-bottom: var(--la-rand-breite) solid var(--la-rand); transform: translateX(-50%) rotate(45deg);
}
.la-sprechblase > svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--la-primaer); }
.la-idee-text { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: 4px 8px 4px 2px; border: 0; border-radius: 12px; background: none; text-align: left; cursor: pointer; }
.la-idee-text:hover { background: var(--la-hoch); }
.la-idee-text small { font-size: 11px; color: var(--la-text-2); }
.la-idee-text span { max-width: 230px; overflow: hidden; text-overflow: ellipsis; font-weight: 600; font-size: 13.5px; color: var(--la-text); }
.la-idee-text span.neu { animation: laEin 0.25s ease; }
.la-idee-weiter { width: 38px; height: 38px; }
.la-idee-weiter svg { width: 18px; height: 18px; color: var(--la-text-2); }
.la-home-knopf { display: block; margin-top: 6px; padding: 0; border: 0; border-radius: 16px; background: none; cursor: pointer; }
.la-home-figur { width: 200px; }
canvas.lora-figur, canvas.lora-gesicht { display: block; }
canvas.lora-figur { height: auto; aspect-ratio: 80 / 56; }
.la-gruss { margin: 4px 0 0; font-size: 1.75rem; font-weight: 600; letter-spacing: -0.4px; }
.la-modellzeile { color: var(--la-text-2); font-size: 14px !important; margin-bottom: 16px !important; }
.la-start-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 720px; }
.la-start-chips li { animation: laHoch 0.5s var(--ease-out) backwards; animation-delay: calc(0.15s + var(--i, 0) * 0.06s); }
.la-start-chip {
    display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 10px 16px 10px 12px; border-radius: 999px; cursor: pointer;
    border: var(--la-rand-breite) solid var(--la-rand); background: var(--la-karte); font-size: 14px; font-weight: 500;
    transition: transform 0.25s var(--ease-out), box-shadow 0.3s;
}
.la-start-chip:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -16px rgba(0, 0, 0, 0.35); }
.la-start-chip svg { width: 18px; height: 18px; color: var(--la-primaer); }
.la-start-beispiele { width: 100%; max-width: 480px; text-align: left; border-radius: var(--la-radius); border: var(--la-rand-breite) solid var(--la-rand); background: var(--la-karte); overflow: hidden; animation: laKarte 0.4s var(--ease-out); }
.la-beispiel-kopf { display: flex; align-items: center; gap: 10px; padding: 6px 4px 6px 16px; font-weight: 600; font-size: 14px; }
.la-beispiel-kopf svg { width: 20px; height: 20px; color: var(--la-primaer); }
.la-beispiel-kopf span { flex: 1; }
.la-beispiel-zeile { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 46px; padding: 10px 16px; border: 0; border-top: 1px solid var(--la-rand); background: none; text-align: left; font-size: 14px; cursor: pointer; }
.la-beispiel-zeile:hover { background: var(--la-hoch); }
.la-beispiel-zeile span { flex: 1; }
.la-beispiel-zeile svg { width: 16px; height: 16px; color: var(--la-text-2); transform: rotate(-45deg); }

/* Nachrichten: Frage als Blase, Antwort als ruhiger Text mit Loras Signatur */
.la-msg-nutzer {
    align-self: flex-end; max-width: min(80%, 560px); padding: 10px 16px; border-radius: var(--la-form-nutzer);
    background: var(--la-nutzer); color: var(--la-auf-nutzer); font-size: calc(15px * var(--la-skala)); line-height: 1.55;
    transform-origin: 100% 100%; animation: laNutzer 0.45s var(--ease-out);
}
.la-anhang { display: flex; gap: 8px; margin-top: 8px; padding: 8px 10px; border-radius: var(--la-radius-klein); background: var(--la-karte); border: var(--la-rand-breite) solid var(--la-rand); font-size: 12.5px; line-height: 1.5; }
.la-anhang svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; color: var(--la-primaer); }
.la-msg-lora { display: flex; flex-direction: column; gap: 12px; animation: laHoch 0.4s var(--ease-out); }
.la-msg-lora.abgebrochen .la-fuss::before { content: "Abgebrochen"; font-size: 12px; color: var(--la-text-2); font-style: italic; margin-right: auto; }
.la-fuss { display: flex; align-items: center; gap: 6px; color: var(--la-text-2); font-size: 12px; }
.la-fuss .la-symbol-knopf { width: 32px; height: 32px; }
.la-fuss .la-symbol-knopf svg { width: 17px; height: 17px; }
.la-signatur { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.la-signatur .lora-gesicht { width: 20px; height: 20px; }
.la-msg-lora.jubelt .la-signatur .lora-gesicht { animation: lfJubel 0.9s var(--ease-out) 2; }
.la-signatur .la-sig-figur { width: 30px; height: 21px; }
.la-signatur .la-sig-figur + .lora-gesicht { display: none; }

/* Arbeitskarte wie in der App (WorkingCard): Lora auf einer kleinen Bühne, „Lora ist dran“, Zeit, Schritt, Pille */
.la-arbeitskarte {
    position: relative; display: flex; align-items: center; gap: 12px; min-height: 93px; padding: 8px; overflow: hidden;
    border-radius: var(--la-radius); border: var(--la-rand-breite) solid var(--la-rand); background: var(--la-karte); animation: laHoch 0.35s var(--ease-out);
}
.la-buehne {
    flex-shrink: 0; display: grid; place-items: center; padding: 0; border: 0; border-radius: var(--la-radius-klein); cursor: pointer;
    background: linear-gradient(to bottom, color-mix(in srgb, var(--la-primaer) 4%, transparent), color-mix(in srgb, var(--la-primaer) 13%, transparent));
}
.la-buehne canvas { width: 110px; height: 77px; }
.la-ak-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.la-ak-kopf { display: flex; align-items: center; min-height: 32px; font-size: calc(14px * var(--la-skala)) !important; }
.la-ak-kopf b { font-weight: 600; white-space: nowrap; }
.la-ak-zeit { font-size: 12.5px; color: var(--la-text-2); white-space: nowrap; }
.la-ak-pille { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; padding: 4px 4px 4px 8px; border: 0; border-radius: 999px; background: var(--la-hoch); color: var(--la-text-2) !important; font-size: 12.5px; cursor: pointer; }
.la-ak-pille svg { width: 14px; height: 14px; }
.la-ak-pille .la-ak-pfeil { width: 16px; height: 16px; transition: transform 0.3s var(--ease-out); }
.la-ak-pille[aria-expanded="true"] .la-ak-pfeil { transform: rotate(180deg); }
.la-ak-schritt { margin-bottom: 6px !important; font-size: 12.5px !important; color: var(--la-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.la-ak-schritt span { display: inline-block; animation: laSchritt 0.22s var(--ease-out); }
.la-ak-linie { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; overflow: hidden; }
.la-ak-linie::before { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 40%; background: color-mix(in srgb, var(--la-primaer) 55%, transparent); animation: laLinie 1.6s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
@keyframes laSchritt { from { opacity: 0; transform: translateY(35%); } }
@keyframes laLinie { to { left: 100%; } }
.la-schritte-zeile { align-self: flex-start; display: inline-flex; align-items: center; gap: 2px; margin: 0 0 -6px -4px; padding: 2px 4px; border: 0; border-radius: 8px; background: none; font-size: 12.5px; color: var(--la-text-2) !important; cursor: pointer; }
.la-schritte-zeile:hover { background: var(--la-hoch); }
.la-schritte-zeile svg { width: 16px; height: 16px; transition: transform 0.3s var(--ease-out); }
.la-schritte-zeile[aria-expanded="true"] svg { transform: rotate(180deg); }

/* Schlafende Lora unten rechts (LoraHelperButton), solange das Panel zu ist */
.la-schlaeft {
    position: absolute; right: 18px; bottom: 128px; z-index: 5; display: grid; place-items: center; width: 62px; height: 62px; padding: 0; border-radius: 50%; cursor: pointer;
    background: color-mix(in srgb, var(--la-primaer) 8%, var(--la-karte)); border: 1px solid color-mix(in srgb, var(--la-primaer) 35%, transparent);
    box-shadow: 0 10px 22px -12px rgba(0, 0, 0, 0.4); transition: background-color 0.2s, transform 0.25s var(--ease-out);
}
.la-schlaeft:hover { background: color-mix(in srgb, var(--la-primaer) 16%, var(--la-karte)); transform: translateY(-2px); }
.la-schlaeft canvas { width: 46px; height: 46px; }
.lora-app.panel-offen .la-schlaeft { display: none; }
.lora-app:not(.panel-offen) .la-nachrichten { padding-bottom: 84px; }
@keyframes lfJubel { 30% { transform: translateY(-4px) rotate(-10deg) scale(1.15); } 60% { transform: translateY(0) rotate(8deg); } }

/* Arbeitskarte: was Lora gerade tut */
.la-arbeit { display: grid; gap: 2px; padding: 8px 12px; border-radius: var(--la-radius-klein); border: var(--la-rand-breite) solid var(--la-rand); background: var(--la-karte); font-size: 13px; animation: laHoch 0.35s var(--ease-out); }
.la-schritt { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 0 10px; align-items: center; padding: 3px 0; animation: laHoch 0.3s var(--ease-out); }
.la-schritt::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--la-hoch); border-top-color: var(--la-primaer); animation: laDrehen 0.8s linear infinite; }
.la-schritt.fertig::before { animation: none; border-color: var(--la-ok); background: var(--la-ok); box-shadow: inset 0 0 0 3px var(--la-karte); }
.la-schritt b { font-weight: 600; }
.la-schritt small { grid-column: 2; color: var(--la-text-2); font-size: 12px; line-height: 1.4; }
.la-fortschritt { grid-column: 2; height: 3px; margin: 4px 0 2px; border-radius: 3px; background: var(--la-hoch); overflow: hidden; }
.la-fortschritt i { display: block; height: 100%; background: var(--la-primaer); transform-origin: 0 50%; transform: scaleX(0); animation: laFuellen var(--dauer, 1s) var(--ease-out) forwards; }
.la-denken { display: inline-flex; align-items: center; gap: 10px; color: var(--la-text-2); font-size: 13.5px; animation: laHoch 0.3s var(--ease-out); }
.la-denken .lora-gesicht { width: 22px; height: 22px; animation: lfGruebeln 1.4s ease-in-out infinite; }
.la-denken.geht { animation: laWeg 0.2s ease forwards; }
@keyframes lfGruebeln { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg) translateY(-1px); } }

.la-text { font-size: calc(15px * var(--la-skala)); line-height: 1.7; color: var(--la-text); }
.la-text p + p, .la-text p + ul, .la-text ul + p, .la-text p + ol, .la-text ol + p { margin-top: 10px; }
.la-text ul, .la-text ol { margin: 0; padding-left: 22px; display: grid; gap: 4px; }
.la-text strong { font-weight: 650; }
.la-wort { display: inline-block; }
.la-text.streamt .la-wort { opacity: 0; transform: translateY(2px); transition: opacity 0.3s ease, transform 0.4s var(--ease-out); }
.la-text.streamt .la-wort.da { opacity: 1; transform: none; }
.la-quelle-marke { display: inline-grid; place-items: center; min-width: 19px; height: 18px; padding: 0 5px; margin: 0 1px; border: 0; border-radius: 6px; vertical-align: 1px; background: var(--la-container); color: var(--la-auf-container) !important; font-size: 11px; font-weight: 700; cursor: pointer; }
.la-ph { display: inline-block; padding: 0 5px; border-radius: 6px; background: var(--la-weich); color: var(--la-auf-weich); font-weight: 600; font-size: 0.94em; }
.la-ph.zurueck { background: color-mix(in srgb, var(--la-ok) 16%, transparent); color: var(--la-text); animation: laFlip 0.5s var(--ease-out); }
.la-naechste { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.la-naechste-titel { font-size: 12px; font-weight: 600; color: var(--la-text-2); margin-right: 2px; }
.la-chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; white-space: nowrap; cursor: pointer;
    border: var(--la-rand-breite) solid var(--la-rand); background: var(--la-karte); font-size: 13px; font-weight: 500; transition: background 0.2s, transform 0.25s var(--ease-out);
    animation: laHoch 0.35s var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 0.07s);
}
.la-chip:hover { background: var(--la-weich); transform: translateY(-1px); }
.la-chip svg { width: 15px; height: 15px; color: var(--la-primaer); }
.la-link-knopf { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; border: var(--la-rand-breite) solid var(--la-rand); background: var(--la-karte); font-size: 13px; font-weight: 600; color: var(--la-auf-weich) !important; cursor: pointer; }

/* Knöpfe in Karten */
.la-btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; cursor: pointer; border: var(--la-rand-breite) solid var(--la-rand); background: var(--la-karte); font-size: 13px; font-weight: 600; transition: transform 0.2s var(--ease-out), filter 0.2s, background 0.2s; }
.lora-app[data-stil="office"] .la-btn, .lora-app[data-stil="kontrast"] .la-btn { border-radius: var(--la-radius-klein); }
.la-btn:hover { background: var(--la-hoch); }
.la-btn:active { transform: scale(0.97); }
.la-btn svg { width: 16px; height: 16px; }
.la-btn.voll { background: var(--la-primaer); border-color: transparent; color: var(--la-auf-primaer) !important; }
.la-btn.voll:hover { filter: brightness(1.08); }
.la-btn[disabled] { opacity: 0.55; cursor: default; }

/* Ergebniskarten */
.la-karte { border: var(--la-rand-breite) solid var(--la-rand); border-radius: var(--la-radius); background: var(--la-karte); overflow: hidden; animation: laKarte 0.5s var(--ease-out); }
.la-karte-kopf { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-bottom: 1px solid var(--la-rand); font-size: 13.5px; font-weight: 600; }
.la-karte-kopf svg { width: 18px; height: 18px; color: var(--la-primaer); flex-shrink: 0; }
.la-karte-kopf .la-karte-zusatz { margin-left: auto; font-weight: 500; color: var(--la-text-2); font-size: 12px; }
.la-karte-inhalt { padding: 14px 16px; }
.la-karte-fuss { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 16px; border-top: 1px solid var(--la-rand); font-size: 12.5px; color: var(--la-text-2); }
.la-beispiel { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; border: 1px solid var(--la-rand); color: var(--la-text-2); }

/* Plan und Vorschau mit „Ausführen“ (wie in der App) */
.la-plan { border-left: 3px solid var(--la-primaer); }
.la-plan ol { margin: 0; padding-left: 20px; display: grid; gap: 4px; font-size: 13.5px; }
.la-plan ol small { color: var(--la-text-2); }
.la-plan-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; }
.la-plan-ergebnis { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; }
.la-plan-ergebnis svg { width: 16px; height: 16px; }
.la-plan-ergebnis.ja { color: var(--la-ok); }
.la-plan-ergebnis.nein { color: var(--la-text-2); }
.la-plan:not(.entschieden) .la-karte-kopf svg { animation: laPuls 1.2s ease-in-out infinite; }

/* Pseudonymisierung */
.la-ps-text { line-height: 1.95; font-size: calc(14px * var(--la-skala)); }
.la-ent { display: inline; padding: 1px 3px; border-radius: 6px; transition: background-color 0.4s ease, box-shadow 0.4s ease; }
.la-ent-tag { display: none; margin-left: 4px; vertical-align: 1px; font: 700 9.5px/1 ui-monospace, monospace; padding: 2px 4px; border-radius: 4px; background: color-mix(in srgb, var(--ent) 22%, var(--la-karte)); color: var(--la-text); white-space: nowrap; }
.la-ent.markiert .la-ent-tag { display: inline-block; animation: laEin 0.3s ease; }
.la-ent[data-typ="PER"] { --ent: var(--la-per); }
.la-ent[data-typ="EINR"] { --ent: var(--la-einr); }
.la-ent[data-typ="ORT"] { --ent: var(--la-ort); }
.la-ent.markiert { background: color-mix(in srgb, var(--ent) 18%, transparent); box-shadow: inset 0 -2px 0 var(--ent); }
.la-ent .la-ersatz { display: none; font-weight: 700; }
.la-ent.ersetzt .la-echt { display: none; }
.la-ent.ersetzt .la-ersatz { display: inline-block; animation: laFlip 0.5s var(--ease-out); }
.la-ps-schild { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 10px 12px; border-radius: var(--la-radius-klein); background: color-mix(in srgb, var(--la-ok) 12%, transparent); font-size: 13px; opacity: 0; transform: translateY(6px); transition: opacity 0.4s, transform 0.5s var(--ease-out); }
.la-ps-schild.da { opacity: 1; transform: none; }
.la-ps-schild svg { width: 20px; height: 20px; color: var(--la-ok); flex-shrink: 0; }
.la-ps-zuordnung summary { cursor: pointer; font-weight: 600; color: var(--la-text); }
.la-ps-zuordnung table { margin-top: 8px; border-collapse: collapse; font-size: 12.5px; }
.la-ps-zuordnung td { padding: 3px 14px 3px 0; color: var(--la-text); }
.la-ps-zuordnung td:first-child { font-weight: 700; }

/* Dokument */
.la-dok { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; align-items: start; }
.la-a4 { position: relative; aspect-ratio: 1 / 1.414; padding: 11px 10px; border-radius: 4px; background: #ffffff; color: #1d1d2b; border: 1px solid #E3E3EA; box-shadow: 0 14px 26px -16px rgba(0, 0, 0, 0.4); overflow: hidden; animation: laBlatt 0.6s var(--ease-out); }
.la-a4 b { display: block; font: 700 7px/1.25 var(--font-serif); margin-bottom: 6px; color: #2b2380; }
.la-a4 i { display: block; height: 3px; margin: 0 0 4px; border-radius: 2px; background: #cfd0dc; width: var(--b, 100%); transform-origin: 0 50%; transform: scaleX(0); animation: laFuellen 0.4s var(--ease-out) forwards; animation-delay: calc(0.3s + var(--z) * 0.11s); }
.la-a4 i.abs { margin-top: 8px; }
.la-a4::after { content: "W"; position: absolute; right: 6px; bottom: 6px; width: 15px; height: 15px; border-radius: 3px; display: grid; place-items: center; background: #2b579a; color: #fff; font: 700 9px/1 var(--font-sans); }
.la-dok-meta h3 { margin: 0 0 4px; font-size: 14px; font-weight: 700; word-break: break-all; }
.la-dok-meta p { font-size: 12.5px; color: var(--la-text-2); margin-bottom: 10px !important; }
.la-dok-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; }
.la-dok-text { margin-top: 12px; padding: 12px 14px; border-radius: var(--la-radius-klein); background: var(--la-bg); font-size: 13px; line-height: 1.6; white-space: pre-line; animation: laHoch 0.3s var(--ease-out); }

/* Einstellung Vorher → Nachher */
.la-vorher-nachher { display: grid; grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr); gap: 8px; align-items: center; }
.la-vn { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--la-text-2); font-weight: 600; }
.la-mini { position: relative; height: 64px; border-radius: 8px; overflow: hidden; border: 1px solid rgba(128, 128, 160, 0.4); background: var(--m-bg); }
.la-mini::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 24%; background: var(--m-seite); }
.la-mini i { position: absolute; height: 8px; border-radius: 5px; }
.la-mini i:nth-child(1) { right: 8%; top: 14px; width: 30%; background: var(--m-nutzer); }
.la-mini i:nth-child(2) { left: 32%; top: 30px; width: 46%; background: var(--m-text); opacity: 0.35; }
.la-mini i:nth-child(3) { left: 32%; top: 44px; width: 30%; background: var(--m-akzent); }
.la-mini[data-m="hell"], .la-mini[data-m="adeu"] { --m-bg: #F6F6F9; --m-seite: #F1F1F6; --m-nutzer: #ECEAFD; --m-text: #16161D; --m-akzent: #5B4FE9; }
.la-mini[data-m="dunkel"] { --m-bg: #111115; --m-seite: #16161B; --m-nutzer: #26243F; --m-text: #ECECF2; --m-akzent: #7B70FF; }
.la-mini[data-m="office"] { --m-bg: #FAFAFA; --m-seite: #F5F5F5; --m-nutzer: #EBF3FC; --m-text: #242424; --m-akzent: #0F6CBD; border-radius: 3px; }
.la-mini[data-m="kontrast"] { --m-bg: #fff; --m-seite: #F7F7F7; --m-nutzer: #DDE0FF; --m-text: #000; --m-akzent: #0000B3; border: 2px solid #000; }
.la-mini[data-m="gross"] i { height: 12px; }
.la-mini[data-m="gross"], .la-mini[data-m="normal"] { --m-bg: #F6F6F9; --m-seite: #F1F1F6; --m-nutzer: #ECEAFD; --m-text: #16161D; --m-akzent: #5B4FE9; }
.la-vn-pfeil { width: 22px; height: 22px; color: var(--la-primaer); animation: laSchubs 1.6s ease-in-out infinite; }
.la-einstellung-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.la-einstellung-status { font-size: 12.5px; color: var(--la-ok); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.la-einstellung-status svg { width: 15px; height: 15px; }

/* Kalender */
.la-kal { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: 16px; align-items: start; }
.la-kal-monat { font-size: 13px; font-weight: 700; margin-bottom: 6px !important; }
.la-kal-gitter { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; text-align: center; font-size: 11.5px; }
.la-kal-gitter span { padding: 4px 0; border-radius: 7px; }
.la-kal-gitter .wt { font-weight: 700; color: var(--la-text-2); font-size: 10.5px; }
.la-kal-gitter .leer { visibility: hidden; }
.la-kal-gitter .heute { box-shadow: inset 0 0 0 1px var(--la-rand); }
.la-kal-gitter .ziel { position: relative; background: var(--la-primaer); color: var(--la-auf-primaer); font-weight: 700; animation: laPlopp 0.6s var(--ease-out) 0.4s backwards; }
.la-kal-gitter .ziel::after { content: ""; position: absolute; inset: -3px; border-radius: 9px; border: 2px solid var(--la-primaer); animation: laRing 1.8s ease-out 1s infinite; }
.la-kal-gitter .erinnerung { box-shadow: inset 0 -2px 0 var(--la-warn); }
.la-kal-info h3 { margin: 0 0 2px; font-size: 15px; }
.la-kal-info p { font-size: 12.5px; color: var(--la-text-2); margin-bottom: 8px !important; }
.la-kal-erinn { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.la-kal-erinn li { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; padding: 4px 9px; border-radius: 999px; background: var(--la-weich); color: var(--la-auf-weich); }
.la-kal-erinn svg { width: 13px; height: 13px; }
.la-kal-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; }

/* Quellen */
.la-quellen { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.la-quellen li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 4px 10px; align-items: start; padding: 8px 8px; border-radius: var(--la-radius-klein); font-size: 12.5px; line-height: 1.5; transition: background 0.4s; animation: laHoch 0.4s var(--ease-out) backwards; animation-delay: calc(var(--i) * 0.1s); }
.la-quellen li.leuchtet { background: var(--la-weich); }
.la-q-nr { display: grid; place-items: center; width: 24px; height: 22px; border-radius: 6px; background: var(--la-container); color: var(--la-auf-container); font-weight: 700; font-size: 11.5px; }
.la-q-status { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; white-space: nowrap; padding: 3px 8px; border-radius: 999px; }
.la-q-status svg { width: 13px; height: 13px; }
.la-q-status.sucht { color: var(--la-text-2); background: var(--la-hoch); }
.la-q-status.sucht::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--la-rand); border-top-color: var(--la-primaer); animation: laDrehen 0.7s linear infinite; }
.la-q-status.ok { color: var(--la-ok); background: color-mix(in srgb, var(--la-ok) 12%, transparent); animation: laPlopp 0.4s var(--ease-out); }
.la-q-status.fehlt { color: var(--la-warn); background: color-mix(in srgb, var(--la-warn) 12%, transparent); animation: laPlopp 0.4s var(--ease-out); }
.la-q-hinweis { grid-column: 2 / -1; font-size: 12px; color: var(--la-text-2); padding: 6px 9px; border-left: 3px solid var(--la-warn); border-radius: 0 6px 6px 0; background: color-mix(in srgb, var(--la-warn) 7%, transparent); }

/* Transkription */
.la-welle-rahmen { display: flex; align-items: center; gap: 12px; }
.la-abspielen { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--la-primaer); color: var(--la-auf-primaer) !important; cursor: pointer; }
.la-abspielen svg { width: 18px; height: 18px; }
.la-abspielen .s-pause { display: none; }
.la-abspielen[aria-pressed="true"] .s-play { display: none; }
.la-abspielen[aria-pressed="true"] .s-pause { display: block; }
.la-welle { position: relative; flex: 1; height: 44px; display: flex; align-items: center; gap: 2px; cursor: pointer; min-width: 0; }
.la-welle i { flex: 1; min-width: 1px; height: calc(var(--h) * 100%); border-radius: 2px; background: var(--la-hoch); transition: background 0.2s; animation: laBalken 0.5s var(--ease-out) backwards; animation-delay: calc(var(--n) * 5ms); }
.la-welle i.gespielt { background: var(--la-primaer); }
.la-kopfpos { position: absolute; top: -3px; bottom: -3px; left: 0; width: 2px; border-radius: 2px; background: var(--la-text); pointer-events: none; }
.la-zeit { font: 600 12px/1 ui-monospace, monospace; color: var(--la-text-2); white-space: nowrap; }
.la-transkript { margin-top: 12px; display: grid; gap: 8px; }
.la-segment { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; font-size: calc(13.5px * var(--la-skala)); line-height: 1.75; }
.la-sprecher { font-size: 11px; font-weight: 700; padding: 3px 0; border-radius: 6px; text-align: center; align-self: start; margin-top: 2px; background: color-mix(in srgb, var(--la-per) 18%, var(--la-karte)); }
.la-segment[data-sprecher="B3"] .la-sprecher { background: color-mix(in srgb, var(--la-einr) 18%, var(--la-karte)); }
.la-zeitmarke { font: 11px ui-monospace, monospace; color: var(--la-text-2); margin-right: 4px; }
.la-tw { border: 0; background: none; padding: 1px 2px; margin: 0 -1px; border-radius: 5px; font: inherit; color: inherit; cursor: pointer; }
.la-tw:hover { background: var(--la-weich); }
.la-tw.aktiv { background: var(--la-primaer); color: var(--la-auf-primaer) !important; }

/* Cohens Kappa */
.la-kappa { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.la-kappa table { border-collapse: separate; border-spacing: 3px; font-size: 12px; }
.la-kappa caption { caption-side: top; text-align: left; font-size: 12px; color: var(--la-text-2); padding-bottom: 4px; }
.la-kappa th { font-weight: 600; color: var(--la-text-2); padding: 2px 4px; text-align: center; }
.la-kappa th[scope="row"] { text-align: right; }
.la-kappa td { padding: 0; }
.la-kappa input { width: 46px; height: 32px; border-radius: 8px; border: var(--la-rand-breite) solid var(--la-rand); background: var(--la-bg); color: var(--la-text); text-align: center; font: 600 13px var(--la-schrift); -moz-appearance: textfield; appearance: textfield; }
.la-kappa input::-webkit-inner-spin-button, .la-kappa input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.la-kappa td.diag input { background: var(--la-container); border-color: var(--la-primaer); color: var(--la-auf-container); }
.la-kappa-werte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-bottom: 10px; }
.la-kappa-werte div { padding: 8px; border-radius: var(--la-radius-klein); background: var(--la-bg); text-align: center; }
.la-kappa-werte span { display: block; font-size: 11px; color: var(--la-text-2); }
.la-kappa-werte b { font: 700 18px/1.3 var(--la-schrift); }
.la-kappa-werte div.k { background: var(--la-container); }
.la-kappa-werte div.k b, .la-kappa-werte div.k span { color: var(--la-auf-container); }
.la-kappa-werte b.neu { animation: laPlopp 0.35s var(--ease-out); }
.la-skala { position: relative; height: 10px; border-radius: 5px; margin: 6px 0; background: linear-gradient(90deg, #d9534f 0 20%, #f0883e 20% 40%, #e6c229 40% 60%, #7cc46a 60% 80%, #2f9e62 80% 100%); }
.la-skala-marke { position: absolute; top: -5px; left: 0; width: 4px; height: 20px; margin-left: -2px; border-radius: 3px; background: var(--la-text); box-shadow: 0 0 0 2px var(--la-karte); transform: translateX(var(--x, 0px)); transition: transform 0.7s var(--ease-out); }
.la-skala-text { font-size: 11.5px; color: var(--la-text-2); display: flex; justify-content: space-between; }
.la-kappa-deutung { margin-top: 8px !important; font-size: 13px; }
.la-kappa-formel { font: 12px ui-monospace, monospace; color: var(--la-text-2); margin-top: 6px !important; }

/* Gedächtnis und Dateien */
.la-erinnerungen, .la-dateien { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.la-erinnerungen li, .la-dateien li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; padding: 9px 10px; border-radius: var(--la-radius-klein); background: var(--la-bg); font-size: 13px; transition: opacity 0.35s, transform 0.45s var(--ease-out); }
.la-erinnerungen li.neu, .la-dateien li.neu { box-shadow: inset 0 0 0 1px var(--la-primaer); animation: laKarte 0.5s var(--ease-out); }
.la-erinnerungen li.geht { opacity: 0; transform: translateX(30px) scale(0.96); }
.la-erinnerungen small, .la-dateien small { grid-column: 2; color: var(--la-text-2); font-size: 11.5px; }
.la-e-symbol { grid-row: span 2; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--la-container); color: var(--la-auf-container); }
.la-e-symbol svg { width: 16px; height: 16px; }
.la-erinnerungen .la-btn, .la-dateien .la-beispiel { grid-row: span 2; }
.la-leer-text { font-size: 13px; color: var(--la-text-2); }

/* Eingabefeld wie in der App: Feld oben, darunter Plus, Modell-Pille, Mikrofon, Senden */
.la-unten { position: relative; padding: 4px max(16px, calc(50% - 390px)) 16px; }
.la-tipp { margin: 0 0 8px; }
.la-tipp button { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; border: var(--la-rand-breite) solid var(--la-rand); background: var(--la-karte); font-size: 13px; cursor: pointer; animation: laHoch 0.3s var(--ease-out); }
.la-tipp .lora-gesicht { width: 22px; height: 22px; }
.la-tipp b { color: var(--la-auf-weich); }
.la-eingabe { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 8px 10px 10px; border-radius: var(--la-radius-eingabe); border: var(--la-rand-breite) solid var(--la-rand); background: var(--la-karte); box-shadow: 0 10px 30px -22px rgba(0, 0, 0, 0.35); transition: border-color 0.2s, box-shadow 0.3s; }
.la-eingabe:focus-within { border-color: color-mix(in srgb, var(--la-primaer) 50%, var(--la-rand)); }
.la-eingabe input { width: 100%; border: 0; background: none; color: var(--la-text); font: calc(15.5px * var(--la-skala)) / 1.4 var(--la-schrift); padding: 8px 8px 6px; }
.la-eingabe input:focus { outline: none; }
.la-eingabe input::placeholder { color: var(--la-text-2); opacity: 1; }
.la-eingabe-leiste { display: flex; align-items: center; gap: 8px; }
.la-eingabe-leiste .la-aufklapp { flex: 1; min-width: 0; }
.la-rund { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; border: var(--la-rand-breite) solid var(--la-rand); background: var(--la-karte); display: grid; place-items: center; cursor: pointer; }
.la-rund:hover { background: var(--la-hoch); }
.la-rund svg { width: 20px; height: 20px; }
.la-modell-pille { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 9px 10px 9px 14px; border: 0; border-radius: 999px; background: var(--la-hoch); font-size: 13.5px; font-weight: 500; cursor: pointer; }
.la-modell-pille span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.la-modell-pille svg { width: 17px; height: 17px; flex-shrink: 0; transition: transform 0.3s var(--ease-out); }
.la-modell-pille[aria-expanded="true"] svg { transform: rotate(180deg); }
.la-senden { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--la-text); color: var(--la-karte) !important; cursor: pointer; transition: transform 0.25s var(--ease-out), opacity 0.2s; }
.la-senden:hover { transform: scale(1.05); }
.la-senden.drueckt { animation: laDruck 0.4s var(--ease-out); }
.la-senden svg { width: 20px; height: 20px; grid-area: 1 / 1; transition: transform 0.3s var(--ease-out), opacity 0.2s; }
.la-senden .la-stopp-symbol { opacity: 0; transform: scale(0.5); }
.lora-app.laeuft .la-eingabe .la-senden .la-senden-symbol, .lora-app.panel-laeuft .la-panel-eingabe .la-senden .la-senden-symbol { opacity: 0; transform: scale(0.5); }
.lora-app.laeuft .la-eingabe .la-senden .la-stopp-symbol, .lora-app.panel-laeuft .la-panel-eingabe .la-senden .la-stopp-symbol { opacity: 1; transform: none; }
.la-befehle { position: absolute; left: 0; right: 0; bottom: calc(100% + 8px); z-index: 20; max-height: 260px; overflow-y: auto; padding: 6px; border-radius: var(--la-radius); background: var(--la-karte); border: var(--la-rand-breite) solid var(--la-rand); box-shadow: 0 -20px 40px -24px rgba(0, 0, 0, 0.35); animation: laAuf 0.2s var(--ease-out); }
.la-befehl { display: grid; grid-template-columns: 24px 118px minmax(0, 1fr); gap: 8px; align-items: center; padding: 7px 9px; border-radius: var(--la-radius-klein); font-size: 13px; cursor: pointer; }
.la-befehl svg { width: 16px; height: 16px; color: var(--la-primaer); }
.la-befehl b { font: 600 12.5px ui-monospace, monospace; color: var(--la-auf-weich); }
.la-befehl span { color: var(--la-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.la-befehl[aria-selected="true"], .la-befehl:hover { background: var(--la-hoch); }

/* ---------------------------------------------------------------------
   5. Lora-Panel: rechts neben dem Chat (die App wird schmaler), am Handy ein Blatt von unten
   --------------------------------------------------------------------- */
.la-panel { display: flex; flex-direction: column; min-height: 0; min-width: 0; overflow: hidden; background: var(--la-karte); border-left: var(--la-rand-breite) solid var(--la-rand); visibility: hidden; }
.lora-app.panel-offen .la-panel { visibility: visible; }
.la-panel-kopf { display: flex; align-items: center; gap: 8px; padding: 10px 8px 10px 14px; min-height: 58px; border-bottom: 1px solid var(--la-rand); }
.la-panel-buehne { flex-shrink: 0; display: grid; place-items: center; width: 64px; height: 52px; border-radius: 14px; background: linear-gradient(to bottom, color-mix(in srgb, var(--la-primaer) 5%, transparent), color-mix(in srgb, var(--la-primaer) 16%, transparent)); }
.la-panel-buehne canvas { width: 60px; height: 42px; }
.la-panel-name { flex: 1; min-width: 0; margin-left: 4px; }
.la-panel-kopf h3 { margin: 0; font-size: 15px; font-weight: 650; line-height: 1.3; }
.la-panel-status { font-size: 12px !important; line-height: 1.35 !important; color: var(--la-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.la-text-knopf { border: 0; background: none; padding: 6px 8px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--la-auf-weich) !important; cursor: pointer; }
.la-text-knopf:hover { background: var(--la-hoch); }
.la-panel-verlauf { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 16px 10px; display: flex; flex-direction: column; gap: 14px; scrollbar-width: thin; }
.la-panel-verlauf:focus { outline: none; }
.la-panel-start { display: flex; flex-direction: column; gap: 8px; }
.la-panel-gruss { font-size: 16px !important; font-weight: 600; }
.la-panel-info { font-size: 13.5px !important; line-height: 1.5 !important; color: var(--la-text-2); }
.la-panel-start .la-gruppe { padding: 0 2px; margin-top: 8px !important; }
.la-passt { list-style: none; margin: 0; padding: 0; display: grid; width: 100%; overflow: hidden; border-radius: 14px; border: var(--la-rand-breite) solid var(--la-rand); background: var(--la-bg); }
.la-passt li + li button { border-top: 1px solid color-mix(in srgb, var(--la-rand) 70%, transparent); }
.la-passt button { display: flex; align-items: center; gap: 14px; width: 100%; padding: 11px 12px; border: 0; background: none; text-align: left; font-size: 13.5px; cursor: pointer; animation: laHoch 0.4s var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 0.06s); }
.la-passt button:hover { background: var(--la-weich); }
.la-passt button span { flex: 1; }
.la-passt svg { width: 18px; height: 18px; color: var(--la-primaer); flex-shrink: 0; }
.la-passt .la-passt-pfeil { width: 16px; height: 16px; color: var(--la-text-2); }
.la-p-nutzer { align-self: flex-end; max-width: 88%; padding: 8px 12px; border-radius: var(--la-form-nutzer); background: var(--la-nutzer); color: var(--la-auf-nutzer); font-size: 13.5px; animation: laNutzer 0.4s var(--ease-out); }
.la-p-lora { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 8px; align-items: start; animation: laHoch 0.35s var(--ease-out); }
.la-p-lora > .lora-gesicht { width: 24px; height: 24px; margin-top: 2px; }
.la-p-lora .la-inhalt { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.la-p-lora .la-text { font-size: 14px; }
.la-p-lora .la-karte-inhalt { padding: 12px; }
.la-p-lora .la-kal, .la-p-lora .la-dok, .la-p-lora .la-kappa { grid-template-columns: 1fr; }
.la-p-lora.jubelt > .lora-gesicht { animation: lfJubel 0.9s var(--ease-out) 2; }
.la-panel-eingabe { display: flex; align-items: center; gap: 8px; margin: 0 12px 12px; padding: 4px 4px 4px 14px; border-radius: 999px; border: var(--la-rand-breite) solid var(--la-rand); background: var(--la-bg); }
.lora-app[data-stil="office"] .la-panel-eingabe, .lora-app[data-stil="kontrast"] .la-panel-eingabe { border-radius: var(--la-radius-eingabe); }
.la-panel-eingabe input { flex: 1; min-width: 0; border: 0; background: none; color: var(--la-text); font: 14px var(--la-schrift); padding: 8px 0; }
.la-panel-eingabe input:focus { outline: none; }
.la-panel-eingabe input::placeholder { color: var(--la-text-2); opacity: 1; }
.la-panel-eingabe .la-senden { width: 36px; height: 36px; }
.la-panel-eingabe .la-senden svg { width: 17px; height: 17px; }
.la-schleier { display: none; }

/* ---------------------------------------------------------------------
   6. Startanimation wie in der App: Kachel, Lora hüpft lesend hinein, Name und Slogan
   --------------------------------------------------------------------- */
.la-splash { position: absolute; inset: 0; z-index: 50; display: grid; place-items: center; background: var(--la-bg); }
.la-splash.geht { animation: laSplashWeg 0.32s ease forwards; pointer-events: none; }
.la-splash-inhalt { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 32px; }
.la-kachel { position: relative; width: 120px; height: 120px; border-radius: 27px; overflow: hidden; background: linear-gradient(135deg, #F6F4FF, #DCD6FF); animation: laKachel 0.52s cubic-bezier(0.4, 0, 0.2, 1) backwards; }
.la-kachel::before { content: ""; position: absolute; left: 7%; right: 7%; top: 3%; bottom: 11%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, 0.75), transparent); animation: laEin 0.6s ease 0.2s backwards; }
.la-kachel .lora-figur { position: absolute; left: 50%; bottom: 7%; width: 76%; height: auto; margin-left: -38%; animation: laReinhuepfen 0.75s cubic-bezier(0.34, 1.56, 0.64, 1) 0.07s backwards; }
.la-splash-name { margin-top: 22px !important; font-size: 1.75rem !important; font-weight: 600; animation: laEin 0.26s ease 1.3s backwards; }
.la-splash-slogan { margin-top: 4px !important; max-width: 380px; font-size: 14px !important; color: var(--la-text-2); animation: laEin 0.26s ease 1.3s backwards; }
.la-ueberspringen { position: absolute; right: 14px; bottom: 14px; padding: 7px 14px; border-radius: 999px; border: var(--la-rand-breite) solid var(--la-rand); background: var(--la-karte); font-size: 13px; font-weight: 600; cursor: pointer; }
.lora-app.splash-laeuft > :not(.la-splash) { visibility: hidden; }

/* ---------------------------------------------------------------------
   7. Schmalere Fenster
   --------------------------------------------------------------------- */
@media (max-width: 1180px) {
    .lora-app, .lora-app.panel-offen { grid-template-columns: 232px minmax(0, 1fr); }
    .la-panel {
        position: absolute; z-index: 12; top: 0; right: 0; bottom: 0; width: min(340px, 90%); box-shadow: -30px 0 60px -30px rgba(0, 0, 0, 0.45);
        transform: translateX(105%); transition: transform 0.45s var(--ease-out), visibility 0s linear 0.45s;
    }
    .lora-app.panel-offen .la-panel { transform: none; transition: transform 0.45s var(--ease-out), visibility 0s; }
    .la-schleier { display: block; position: absolute; inset: 0; z-index: 11; background: rgba(5, 4, 15, 0.42); opacity: 0; transition: opacity 0.3s; }
    .la-schleier.da { opacity: 1; }
}
@media (max-width: 760px) {
    .lora-app, .lora-app.panel-offen { grid-template-columns: minmax(0, 1fr); height: clamp(560px, calc(100svh - 120px), 760px); border-radius: 14px; }
    .la-nur-schmal { display: grid; }
    .la-chat-kopf { padding: 8px 10px; gap: 4px; min-height: 54px; }
    .la-frag-lora { padding: 0 6px; width: 40px; justify-content: center; }
    .la-frag-lora span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .la-seitenleiste {
        position: absolute; z-index: 12; top: 0; left: 0; bottom: 0; width: min(290px, 86%); box-shadow: 30px 0 60px -30px rgba(0, 0, 0, 0.45);
        transform: translateX(-105%); visibility: hidden; transition: transform 0.45s var(--ease-out), visibility 0s linear 0.45s;
    }
    .lora-app.seitenleiste-offen .la-seitenleiste { transform: none; visibility: visible; transition: transform 0.45s var(--ease-out), visibility 0s; }
    .la-panel { top: auto; left: 0; right: 0; width: auto; height: 82%; border-left: 0; border-top: var(--la-rand-breite) solid var(--la-rand); border-radius: 20px 20px 0 0; transform: translateY(105%); box-shadow: 0 -30px 60px -30px rgba(0, 0, 0, 0.45); }
    .la-nachrichten { padding: 6px 14px 12px; }
    .la-unten { padding: 4px 10px 10px; }
    .la-msg-nutzer { max-width: 88%; }
    .la-dok, .la-kal, .la-kappa { grid-template-columns: 1fr; }
    .la-dok .la-a4 { width: 110px; }
    .la-home-figur { width: 124px; }
    .la-buehne canvas { width: 86px; height: 60px; }
    .la-arbeitskarte { min-height: 76px; }
    .la-schlaeft { right: 12px; bottom: 118px; width: 52px; height: 52px; }
    .la-schlaeft canvas { width: 40px; height: 40px; }
    .la-gruss { font-size: 1.45rem; }
    .la-modell-pille { padding: 9px 8px 9px 12px; }
    .la-befehl { grid-template-columns: 22px 100px minmax(0, 1fr); }
}

/* ---------------------------------------------------------------------
   8. „So erkennt Lora Namen“ (BIO-Etiketten)
   --------------------------------------------------------------------- */
.bio { margin: 0; padding: 22px; border-radius: 18px; border: 1px solid var(--border-light); background: var(--bg-panel); }
.bio-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 20px; font-size: 14px; margin-bottom: 20px; }
.bio-kopf > span:first-child { max-width: 640px; }
.bio-kopf strong { color: var(--text-light); }
.bio-knoepfe { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.bio-satz-text { font: 600 1.3rem/1.4 var(--font-serif); color: var(--text-light); }
.js .bio-satz-text { display: none; }
.bio-tokens { display: flex; flex-wrap: wrap; gap: 6px 2px; min-height: 92px; align-items: flex-start; transition: gap 0.7s var(--ease-out); }
.bio.zerlegt .bio-tokens { gap: 10px 10px; }
.bio-token { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.bio-wort { font: 600 1.3rem/1.2 var(--font-serif); color: var(--text-light); padding: 5px 4px; border-radius: 9px; border: 1px solid transparent; transition: background-color 0.5s, border-color 0.5s, padding 0.6s var(--ease-out); }
.bio-wort.stueck::before { content: "##"; color: var(--text-muted); font-family: var(--font-sans); font-size: 0.75em; }
.bio.zerlegt .bio-wort { padding: 5px 9px; border-color: var(--border-highlight); background: var(--bg-subtle); }
.bio-tag { font: 700 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.4px; padding: 5px 7px; border-radius: 6px; color: var(--text-muted); background: var(--bg-subtle); border: 1px solid var(--border-light); opacity: 0; transform: translateY(-10px) scale(0.9); transition: opacity 0.4s ease, transform 0.55s var(--ease-out), color 0.4s, background-color 0.4s; transition-delay: calc(var(--i) * 80ms); }
.bio.getaggt .bio-tag { opacity: 1; transform: none; }
.bio-token[data-typ="PER"] { --bio: #8f86ff; --bio-text: #b9b3ff; }
.bio-token[data-typ="EINR"] { --bio: #2ec4b6; --bio-text: #6ee0d4; }
.bio-token[data-typ="ORT"] { --bio: #ffb300; --bio-text: #ffcc5c; }
body.light-mode .bio-token[data-typ="PER"] { --bio-text: #4a3fd6; }
body.light-mode .bio-token[data-typ="EINR"] { --bio-text: #0b6e64; }
body.light-mode .bio-token[data-typ="ORT"] { --bio-text: #8a5300; }
.bio.markiert .bio-token[data-typ] .bio-wort { background: color-mix(in srgb, var(--bio) 20%, transparent); border-color: var(--bio); }
.bio.markiert .bio-token[data-typ] .bio-tag { color: var(--bio-text); border-color: color-mix(in srgb, var(--bio) 60%, transparent); background: color-mix(in srgb, var(--bio) 12%, transparent); }
.bio-legende { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; }
.bio-legende li { display: inline-flex; align-items: center; gap: 7px; }
.bio-legende li::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--text-muted); }
.bio-legende .bio-per::before { background: #8f86ff; }
.bio-legende .bio-einr::before { background: #2ec4b6; }
.bio-legende .bio-ort::before { background: #ffb300; }
.bio-ergebnis { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--border-light); font-size: 1.02rem; color: var(--text-light); opacity: 0; transform: translateY(8px); transition: opacity 0.5s, transform 0.6s var(--ease-out); }
.bio.fertig .bio-ergebnis { opacity: 1; transform: none; }
.bio-pfeil { color: var(--marke); font-weight: 700; }
.bio-ph { display: inline-block; padding: 0 6px; border-radius: 6px; font-weight: 650; color: var(--bio-text); background: color-mix(in srgb, var(--bio) 14%, transparent); }
.bio-ph[data-typ="PER"] { --bio: #8f86ff; --bio-text: #b9b3ff; }
.bio-ph[data-typ="EINR"] { --bio: #2ec4b6; --bio-text: #6ee0d4; }
.bio-ph[data-typ="ORT"] { --bio: #ffb300; --bio-text: #ffcc5c; }
body.light-mode .bio-ph[data-typ="PER"] { --bio-text: #4a3fd6; }
body.light-mode .bio-ph[data-typ="EINR"] { --bio-text: #0b6e64; }
body.light-mode .bio-ph[data-typ="ORT"] { --bio-text: #8a5300; }
.bio.fertig .bio-ph { animation: laFlip 0.55s var(--ease-out) backwards; animation-delay: calc(0.2s + var(--j, 0) * 0.15s); }

@media (max-width: 760px) {
    .bio { padding: 16px; }
    .bio-wort { font-size: 1.1rem; }
    .bio.zerlegt .bio-tokens { gap: 8px 6px; }
}

/* ---------------------------------------------------------------------
   9. Gemeinsame Bewegungen
   --------------------------------------------------------------------- */
@keyframes laHoch { from { opacity: 0; transform: translateY(8px); } }
@keyframes laWeg { to { opacity: 0; transform: translateY(-6px) scale(0.98); } }
@keyframes laEin { from { opacity: 0; } }
@keyframes laAuf { from { opacity: 0; transform: translateY(6px) scale(0.97); } }
@keyframes laNutzer { from { opacity: 0; transform: translateY(12px) scale(0.94); } }
@keyframes laKarte { from { opacity: 0; transform: translateY(10px) scale(0.98); } }
@keyframes laBlase { from { opacity: 0; transform: translateY(6px) scale(0.9); } }
@keyframes laDrehen { to { transform: rotate(360deg); } }
@keyframes laPlopp { 0% { transform: scale(0.4); opacity: 0; } 60% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1); } }
@keyframes laFuellen { to { transform: scaleX(1); } }
@keyframes laFlip { from { opacity: 0; transform: perspective(300px) rotateX(85deg); } }
@keyframes laRing { 0% { opacity: 0.9; transform: scale(0.9); } 100% { opacity: 0; transform: scale(1.35); } }
@keyframes laPuls { 50% { opacity: 0.45; } }
@keyframes laDruck { 40% { transform: scale(0.86); } 100% { transform: scale(1); } }
@keyframes laSchubs { 50% { transform: translateX(4px); } }
@keyframes laBlatt { from { opacity: 0; transform: translateY(14px) rotate(-3deg) scale(0.94); } }
@keyframes laBalken { from { transform: scaleY(0.1); opacity: 0; } }
@keyframes laKachel { from { transform: scale(0.82); opacity: 0; } }
@keyframes laReinhuepfen { from { transform: translateY(42%); opacity: 0; } 30% { opacity: 1; } }
@keyframes laSplashWeg { to { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
    .lora-figur *, .lora-gesicht *, .lora-app *, .lora-app *::before, .lora-app *::after, .bio * { animation: none !important; transition: none !important; }
    .lora-app { transition: none; }
    .lora-figur .lf-blatt { opacity: 0; }
    .la-text.streamt .la-wort { opacity: 1; transform: none; }
    .la-a4 i, .la-fortschritt i { transform: none; }
}
@media print {
    .lora-app, .lora-demo { display: none !important; }
}

/* ---------------------------------------------------------------------
   So arbeitet Lora, zwei eigene Modelle, Pseudonymisierung im Detail
   --------------------------------------------------------------------- */
.lora-status { margin: 10px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--text-muted); }
/* Was Lora kann: eine Kachel je Bereich, Lora spielt ihn vor */
.kann-raster { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.kann-raster > li { display: flex; }
.kann-kachel { flex: 1; display: flex; flex-direction: column; gap: 4px; padding: 10px 10px 18px; border-radius: 18px; border: 1px solid var(--border-light); background: var(--bg-panel); color: var(--text-muted); text-decoration: none; font-size: 14px; line-height: 1.5; transition: transform 0.3s var(--ease-out), border-color 0.3s, box-shadow 0.3s; }
.kann-kachel:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--marke) 45%, var(--border-light)); box-shadow: 0 22px 40px -28px var(--marke-glanz); color: var(--text-muted); }
.kann-kachel:focus-visible { outline: 2px solid var(--marke); outline-offset: 3px; }
.kann-kachel strong { margin: 8px 8px 0; font-size: 1.02rem; color: var(--text-light); }
.kann-kachel > span:last-child { margin: 0 8px; }
.kann-buehne { display: block; border-radius: 12px; background: linear-gradient(to bottom, color-mix(in srgb, var(--marke) 5%, transparent), color-mix(in srgb, var(--marke) 15%, transparent)); }
.kann-buehne canvas { width: 100%; max-width: 260px; margin: 0 auto; }
@media (max-width: 900px) { .kann-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) {
    .kann-raster { gap: 10px; }
    .kann-kachel { padding: 6px 6px 12px; font-size: 13px; }
    .kann-kachel strong { margin: 6px 6px 0; font-size: 0.95rem; }
    .kann-kachel > span:last-child { margin: 0 6px; }
}
@media (max-width: 340px) { .kann-raster { grid-template-columns: minmax(0, 1fr); } }

/* So arbeitet Lora: Lora läuft auf einer Spur über den Schritten */
.weg { position: relative; }
.weg-spur { position: relative; height: 84px; margin: 0 0 6px; }
.weg-spur::after { content: ""; position: absolute; left: 4px; right: 4px; bottom: 3px; border-bottom: 2px dashed color-mix(in srgb, var(--marke) 35%, transparent); }
.weg-lora { position: absolute; left: 0; bottom: 0; width: 120px; will-change: transform; }
.ablauf li { transition: border-color 0.35s, transform 0.45s var(--ease-out), box-shadow 0.35s; }
.ablauf li.ist-dran { border-color: color-mix(in srgb, var(--marke) 60%, var(--border-light)); transform: translateY(-3px); box-shadow: 0 18px 36px -26px var(--marke-glanz); }
@media (max-width: 1100px) { .weg-spur { display: none; } }

/* Zwei eigene Modelle: zwei Kästen, auf jedem sitzt Lora */
.modelle { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 74px 0 12px; }
.modell-box { display: flex; flex-direction: column; gap: 8px; padding: 22px 22px 20px; border-radius: 18px; border: 1px solid var(--border-light); background: var(--bg-panel); }
.modell-box p { margin: 0; }
.modell-art { font: 600 12px/1.4 var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--marke); }
.modell-box h3 { margin: 0; font-size: 1.15rem; }
.modell-zahl { font-size: 14px; color: var(--text-muted); }
.modell-zahl b { display: block; font: 700 clamp(1.9rem, 3.4vw, 2.4rem)/1.1 var(--font-sans); letter-spacing: -0.02em; color: var(--text-light); font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: no-preference) { .js .modelle:not(.da) .kz-spur i { transform: scaleX(0); } }
@media (max-width: 760px) { .modelle { grid-template-columns: minmax(0, 1fr); gap: 84px; } }

/* Überschrift mit Lora daneben */
.kopf-mit-lora { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.kopf-mit-lora > div { min-width: 0; }
.kopf-mit-lora h2 { font-family: var(--font-serif); font-size: clamp(1.6rem, 3vw, 2.1rem); margin-bottom: 10px; }
.kopf-mit-lora .abschnitt-lead { max-width: 720px; font-size: 15.5px; margin-bottom: 18px; }
.kopf-mit-lora canvas { flex-shrink: 0; width: 190px; margin-bottom: 2px; }
@media (max-width: 560px) { .kopf-mit-lora canvas { width: 104px; } }
.lora-hinweis { display: flex; align-items: center; gap: 10px; }
.lora-hinweis canvas { width: 34px; height: 34px; flex-shrink: 0; }
.ablauf { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; counter-reset: schritt; }
@media (min-width: 1101px) { .ablauf { gap: 22px; } }
.ablauf li { position: relative; counter-increment: schritt; padding: 16px 16px 18px; border-radius: 16px; border: 1px solid var(--border-light); background: var(--bg-panel); }
.ablauf li::before { content: counter(schritt); display: inline-grid; place-items: center; width: 26px; height: 26px; margin-right: 8px; border-radius: 50%; background: var(--marke-weich); color: var(--marke); font: 700 13px/1 var(--font-sans); vertical-align: middle; }
.ablauf li + li::after {
    content: ""; position: absolute; z-index: 1; left: -24px; top: 50%; width: 26px; height: 26px; margin-top: -13px; border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--marke) 40%, var(--border-light)); box-shadow: 0 0 0 4px var(--bg-main);
    background: var(--bg-panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h13m-5-5 5 5-5 5' fill='none' stroke='%235b4fe9' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}
body:not(.light-mode) .ablauf li + li::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h13m-5-5 5 5-5 5' fill='none' stroke='%23a69eff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ablauf h3 { margin: 12px 0 6px; font-size: 1rem; line-height: 1.3; }
.ablauf p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--text-muted); }
.ablauf-ort { display: inline-block; padding: 3px 9px; border-radius: 999px; font: 600 11px/1.4 var(--font-sans); letter-spacing: .04em; text-transform: uppercase; vertical-align: middle; }
.ablauf-ort.geraet { background: color-mix(in srgb, #1f7f52 16%, transparent); color: #1f7f52; }
.ablauf-ort.server { background: var(--marke-weich); color: var(--marke); }
body:not(.light-mode) .ablauf-ort.geraet { color: #5fd49a; }
@media (max-width: 1100px) { .ablauf { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ablauf li + li::after { display: none; } }
@media (max-width: 600px) { .ablauf { grid-template-columns: minmax(0, 1fr); } }
.mehr-technik, .faq details { border-top: 1px solid var(--border-light); }
.mehr-technik summary, .faq summary { cursor: pointer; padding: 12px 0; font-weight: 600; color: var(--text-light); }
.mehr-technik ul { margin: 0 0 16px; padding-left: 20px; display: grid; gap: 8px; max-width: 860px; font-size: 14px; line-height: 1.6; color: var(--text-muted); }
.mehr-technik strong, .faq strong { color: var(--text-light); }
.modell-titel { margin: 26px 0 6px; font-size: 1.15rem; }
.modell-text { margin: 0 0 12px; max-width: 760px; color: var(--text-muted); line-height: 1.6; }
.kz-tabelle { width: 100%; max-width: 640px; margin: 10px 0 6px; border-collapse: collapse; font-size: 13.5px; }
.kz-tabelle caption { text-align: left; padding-bottom: 6px; color: var(--text-muted); font-size: 12.5px; }
.kz-tabelle th, .kz-tabelle td { padding: 6px 10px 6px 0; border-bottom: 1px solid var(--border-light); text-align: left; font-weight: 400; }
.kz-tabelle thead th { font-weight: 600; color: var(--text-light); }
.kz-tabelle td { font-variant-numeric: tabular-nums; color: var(--text-light); }
.faq { max-width: 860px; border-bottom: 1px solid var(--border-light); }
.faq details p, .faq details ul { margin: 0 0 12px; font-size: 14.5px; line-height: 1.65; color: var(--text-muted); }
.faq details ul { padding-left: 20px; display: grid; gap: 6px; }
.faq details[open] { padding-bottom: 6px; }
/* Ein-Klick-Korrektur unter der Pseudonymisierung und Karte „Von Lora übergeben“ (wie in der App) */
.la-korrektur { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 8px; font-size: calc(12px * var(--la-skala)); color: var(--la-text-2); }
.la-korrektur > span { flex-basis: 100%; }
.la-korrektur-chip { padding: 4px 10px; border-radius: 999px; border: 1px solid var(--la-rand); background: var(--la-karte); color: var(--la-text); font: inherit; cursor: pointer; }
.la-korrektur-chip:hover { border-color: var(--la-primaer); }
.la-korrektur-chip.aus { color: var(--la-text-2); text-decoration: none; cursor: default; border-style: dashed; }
.la-uebergabe { display: flex; align-items: center; gap: 8px; align-self: flex-end; max-width: 80%; margin: 0 0 -4px auto; padding: 6px 12px; border-radius: var(--la-radius-klein); background: var(--la-weich); color: var(--la-auf-weich); font-size: calc(12.5px * var(--la-skala)); }
.la-uebergabe .lora-gesicht { width: 20px; height: 20px; flex-shrink: 0; }

/* Zwei eigene Modelle: Kopfzahl mit Ziel, Balken mit beschrifteter Zielmarke, drei Werte */
.modell-box { gap: 12px; padding: 24px 24px 22px; }
.modell-box h3 { font-family: var(--font-serif); font-size: clamp(1.4rem, 2.4vw, 1.7rem); line-height: 1.15; }
.modell-art { order: -1; }
.modell-held { display: grid; gap: 4px; padding: 4px 0 2px; }
.modell-ziel, .modell-wert-ziel { font-size: 12.5px; line-height: 1.45; color: var(--text-muted); }
.modell-ziel span { font-weight: 700; margin-right: 3px; }
.ziel-ok > span[aria-hidden] { color: var(--marke); }
.kz-titel { margin: 0 0 2px !important; font-size: 12px; color: var(--text-muted); }
.kz-balken { padding: 14px 14px 12px; border-radius: 14px; background: var(--bg-subtle); border: 1px solid var(--border-light); }
.kz-zielzeile { height: 16px; }
.kz-zielmarke { position: relative; height: 100%; }
.kz-zielmarke b {
    position: absolute; bottom: -10px; right: calc(100% - var(--ziel) - 1px); height: 22px; padding-right: 5px;
    border-right: 2px solid var(--text-light); font: 600 10.5px/12px var(--font-sans); letter-spacing: .02em; color: var(--text-light); white-space: nowrap;
}
.kz-balken .kz-spur { height: 10px; border-radius: 5px; }
.kz-balken .kz-spur::after { content: ""; position: absolute; top: -4px; bottom: -4px; left: calc(var(--ziel) - 1px); width: 2px; background: var(--text-light); opacity: .7; }
.kz-balken .kz-zeile:last-child .kz-zahl { font-weight: 700; }
.modell-werte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 2px 0 0; }
.modell-werte > div { display: flex; flex-direction: column; gap: 2px; padding: 12px 12px 11px; border-radius: 12px; border: 1px solid var(--border-light); }
.modell-werte dt { order: 2; font-size: 12.5px; font-weight: 600; color: var(--text-light); }
.modell-werte dd { margin: 0; }
.modell-werte dd:first-of-type { order: 1; font: 700 1.25rem/1.15 var(--font-sans); letter-spacing: -0.01em; color: var(--text-light); font-variant-numeric: tabular-nums; }
.modell-werte .modell-wert-ziel { order: 3; font-size: 11.5px; }
.ziel-offen.modell-wert-ziel, .modell-ziel.ziel-offen { color: var(--text-muted); }
@media (max-width: 1000px) and (min-width: 761px), (max-width: 460px) { .modell-werte { grid-template-columns: minmax(0, 1fr); } .modell-werte > div { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: baseline; } .modell-werte dd:first-of-type { grid-row: span 2; min-width: 4.6em; } }

/* Beispiel: eigener Rahmen mit Überschrift, damit es sich klar von den Kennzahlen absetzt */
.bio-rahmen { margin: 44px 0 0; }
.bio-label { margin: 0 0 4px; font: 700 11px/1.4 var(--font-sans); letter-spacing: 1.4px; text-transform: uppercase; color: var(--marke); }
.bio-titel { margin: 0 0 14px; font-family: var(--font-serif); font-size: clamp(1.3rem, 2.4vw, 1.6rem); }

/* Messung im Einzelnen: aufklappbarer Kasten unter dem Beispiel */
.messung { margin: 28px 0 0; border-radius: 18px; border: 1px solid var(--border-light); background: var(--bg-panel); }
.messung > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 18px 52px 18px 22px; cursor: pointer; list-style: none; position: relative; }
.messung > summary::-webkit-details-marker { display: none; }
.messung > summary::after {
    content: ""; position: absolute; right: 22px; top: 50%; width: 9px; height: 9px; margin-top: -7px;
    border-right: 2px solid var(--marke); border-bottom: 2px solid var(--marke); transform: rotate(45deg); transition: transform .3s var(--ease-out);
}
.messung[open] > summary::after { transform: rotate(225deg); margin-top: -2px; }
.messung > summary:focus-visible { outline: 2px solid var(--marke); outline-offset: 2px; border-radius: 18px; }
.messung-titel { font-weight: 650; color: var(--text-light); font-size: 1.02rem; }
.messung-hinweis { font-size: 13px; color: var(--text-muted); }
.messung-inhalt { display: grid; gap: 30px; padding: 4px 22px 24px; border-top: 1px solid var(--border-light); font-size: 14px; color: var(--text-muted); }
.messung-inhalt p { max-width: 780px; margin: 10px 0 0; line-height: 1.6; }
.messung-modell .modell-titel { margin: 20px 0 6px; font-family: var(--font-serif); font-size: 1.35rem; }
.tabelle-rahmen { overflow-x: auto; margin: 12px 0 4px; }
.kz-karte { max-width: none; min-width: 560px; margin: 0; }
.kz-karte caption { font-size: 12px; }
.kz-karte th, .kz-karte td { padding: 10px 14px 10px 0; vertical-align: top; }
.kz-karte tbody th { color: var(--text-main); max-width: 260px; }
.kz-karte td b { display: block; font-size: 15px; color: var(--text-light); }
.kz-karte td small { display: block; font-size: 11.5px; color: var(--text-muted); }
.stand { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; color: var(--text-muted); }
.stand.ziel-ok { background: var(--marke-weich); color: var(--text-light); }
.stand.ziel-offen { background: color-mix(in srgb, #ffb300 16%, transparent); color: var(--text-light); }
.stand.ziel-offen > span[aria-hidden] { color: #b07000; }
body:not(.light-mode) .stand.ziel-offen > span[aria-hidden] { color: #ffcc5c; }
.je-art-titel { margin: 18px 0 8px; font-size: .95rem; color: var(--text-light); }
.je-art { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; max-width: 780px; }
.je-art li { display: grid; grid-template-columns: minmax(0, 16em) minmax(60px, 1fr) minmax(0, 14.5em); align-items: center; gap: 12px; font-size: 13px; }
.je-art-name { color: var(--text-main); }
.je-art-wert { color: var(--text-light); font-variant-numeric: tabular-nums; }
.je-art-spur { position: relative; height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--text-muted) 14%, transparent); overflow: hidden; }
.je-art-spur i { position: absolute; inset: 0 auto 0 0; width: var(--anteil); border-radius: 4px; background: var(--marke); }
.je-art-fehl .je-art-spur i { background: #e0a100; }
.je-art-legende { font-size: 12.5px !important; }
.je-art-gut::before, .je-art-schlecht::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 3px; background: var(--marke); vertical-align: -1px; }
.je-art-schlecht::before { background: #e0a100; }
.je-art-schlecht { margin-left: 10px; }
@media (max-width: 600px) { .je-art li { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; } .je-art-spur { grid-column: 1 / -1; grid-row: 2; } }