/* Baukasten 3D — Weltraum-Bühne, Planeten-Beschriftungen, Herkunfts-Bühne */
:root{
  --r-stem:#3f6fe0; --r-end:#d4483b; --r-aux:#1f9a6a; --r-drop:#9aa0a8;
  --space-bg:#060914; --space-ink:#e8ecff; --space-soft:#a7b0d6;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --r-stem:#7fa2ff; --r-end:#ff7b6b; --r-aux:#4fd1a0; --r-drop:#6b7280; } }
:root[data-theme="dark"]{ --r-stem:#7fa2ff; --r-end:#ff7b6b; --r-aux:#4fd1a0; --r-drop:#6b7280; }

.r-stem{color:var(--r-stem);} .r-end{color:var(--r-end);} .r-aux{color:var(--r-aux);}
.r-drop{color:var(--r-drop);} .r-whole{color:var(--r-stem);}

/* ---------- Kopf: Verb, genaue Erklärung, Ausnahmen ---------- */
.atl-title i{font-style:italic;}
.atl-headblk{margin-bottom:2px;}
.atl-de{font-size:.5em; color:var(--ink-faint); font-style:normal; font-weight:400; margin-left:6px;}
.atl-meta{display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 0;}
.atl-tag{font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.05em; text-transform:uppercase; padding:3px 8px; border-radius:5px; border:1px solid var(--rule); color:var(--ink-soft); background:var(--paper-raised);}
.atl-tag.exam{color:var(--accent); border-color:color-mix(in srgb, var(--accent) 50%, var(--rule));}
.atl-tag.g-er{border-color:#5b8cff;} .atl-tag.g-ir{border-color:#2ec4a6;} .atl-tag.g-re{border-color:#f2994a;} .atl-tag.g-oir{border-color:#b48cff;}

/* Layout: Hauptspalte + feste Leiste rechts (Personen, Zeitformen mit Ausnahmen) */
.atl{container-type:inline-size;}
.atl-grid{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:22px; align-items:start;}
.atl-main{min-width:0;}
.atl-rail{position:sticky; top:16px; max-height:calc(100vh - 32px); overflow:auto; background:var(--paper-raised); border:1px solid var(--rule); border-radius:12px; padding:14px 12px 12px; overscroll-behavior:contain;}
.atl-rh{display:flex; flex-direction:column; gap:1px; margin:0 4px 10px;}
.atl-rh b{font-size:14.5px;} .atl-rh span{font-size:12px; color:var(--ink-faint);}
.atl-sh{font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); margin:4px 4px 6px;}
.atl-sh span{text-transform:none; letter-spacing:0; opacity:.8;}
.atl-persons{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:4px; margin-bottom:12px;}
.atl-per{display:flex; flex-direction:column; align-items:flex-start; min-width:0; font:inherit; color:var(--ink); background:var(--paper-sunken); border:1px solid var(--rule); border-radius:8px; padding:4px 7px; cursor:pointer; text-align:left;}
.atl-per:hover:not(:disabled){border-color:var(--rule-strong);}
.atl-per.active{border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent);}
.atl-per:disabled{opacity:.4; cursor:not-allowed;}
.atl-per .atl-pp{font-family:'IBM Plex Mono',monospace; font-size:10px; color:var(--ink-faint);}
.atl-per .atl-pf{font-size:13px; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.atl-tenses{display:flex; flex-direction:column;}
.atl-rail .ax-row{padding:7px 8px;}
.atl-rail .ax-row.off{opacity:.45; cursor:not-allowed;}
.atl-rail .ax-row .ax-pl{margin-left:auto; font-weight:400; font-size:11px;}
.atl-rail .ax-row.cur{border-color:var(--accent); background:color-mix(in srgb, var(--accent) 7%, var(--paper-raised));}
.ax{margin:18px 0 0;}
.ax-now{background:var(--paper-raised); border:1px solid var(--rule); border-radius:12px; padding:18px 20px;}
.ax-kicker{display:flex; align-items:center; gap:8px; font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-soft);}
.ax-pl{color:var(--ink-faint); text-transform:none; letter-spacing:0;}
.ax-dot{display:inline-block; width:12px; height:12px; border-radius:50%; flex:none; box-shadow:inset -3px -3px 5px rgba(0,0,0,.35), 0 0 6px rgba(255,255,255,.15);}
.ax-form{font-family:'Newsreader',Georgia,serif; font-style:italic; font-size:clamp(34px, 6vw, 50px); line-height:1.15; margin:8px 0 4px;}
.ax-rule{margin:0 0 10px; color:var(--ink-soft); font-size:15px;}
.ax-steps{margin:0 0 14px; padding:0; list-style:none; counter-reset:ax;}
.ax-steps li{counter-increment:ax; position:relative; padding:6px 0 6px 34px; font-size:16px; line-height:1.45; border-top:1px dashed var(--rule);}
.ax-steps li:first-child{border-top:0;}
.ax-steps li::before{content:counter(ax); position:absolute; left:0; top:6px; width:22px; height:22px; border-radius:50%; background:var(--paper-sunken); border:1px solid var(--rule-strong); font-size:12px; font-weight:700; text-align:center; line-height:21px; color:var(--ink-soft);}
.ax-steps i{font-family:'Newsreader',Georgia,serif; font-size:1.08em;}
.ax-src, .ax-drop{color:var(--ink-faint); font-size:.88em;}
.ax-verdict{border-left:4px solid var(--r-aux); background:color-mix(in srgb, var(--r-aux) 9%, var(--paper-raised)); padding:10px 14px; border-radius:0 10px 10px 0; font-size:15px;}
.ax-verdict b{display:block; font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--r-aux); margin-bottom:2px;}
.ax .ob-exc{display:block; opacity:1; transform:none; font-size:15.5px; line-height:1.5; padding:12px 16px; border-left-width:4px;}
.ax .ob-exc b{font-size:12px; margin-bottom:4px;}
.ax .ob-exc p{margin:4px 0 0;}
.ax-cmp s{color:var(--ink-faint);} .ax-cmp em{font-style:italic; font-weight:700; color:var(--r-end);}
.ax-model{color:var(--ink-soft); font-size:14px;}
.ob-exc.k-endings{border-left-color:#8a6cf0; background:color-mix(in srgb, #8a6cf0 10%, var(--paper-raised));}
.ob-exc.k-endings b{color:#7a5ae0;}
.ax-merk{margin:12px 0 0; font-size:14.5px; color:var(--ink-soft);}
.ax-merk b{font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink); margin-right:6px;}

.ax-row{display:block; width:100%; text-align:left; font:inherit; color:inherit; background:none; border:1px solid transparent; border-top-color:var(--rule); border-radius:0; padding:8px 8px; cursor:pointer;}
.ax-row:hover{background:var(--paper-sunken);}
.ax-row.cur{border-color:var(--rule-strong); border-radius:8px; background:var(--paper-sunken);}
.ax-row.cur + .ax-row{border-top-color:transparent;}
.ax-row:focus-visible{outline:2px solid var(--accent); outline-offset:1px;}
.ax-rh{display:flex; align-items:center; gap:7px; font-weight:600; font-size:14px;}
.ax-it{margin:4px 0 0 19px; font-size:13.5px; line-height:1.4;}
.ax-kind{display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; padding:1px 6px; border-radius:4px; background:color-mix(in srgb, var(--r-end) 14%, transparent); color:var(--r-end); margin-right:4px;}
.ax-kind.k-spelling{background:color-mix(in srgb, #c99a2e 16%, transparent); color:#a87a10;}
.ax-kind.k-endings{background:color-mix(in srgb, #8a6cf0 16%, transparent); color:#7a5ae0;}
.ax-forms{font-family:'Newsreader',Georgia,serif; font-style:italic; font-size:15px;}
.ax-note{display:block; color:var(--ink-faint); font-size:12.5px; margin-top:1px;}
.ax-ok{color:var(--r-aux); font-size:13px;}

/* ---------- Weltraum-Bühne: Szene links, Auswahl rechts ---------- */
.atl-stage{position:relative; height:clamp(420px, 62vh, 580px); margin:18px 0 0; border-radius:14px; overflow:hidden; outline:none;
  background:
    radial-gradient(1px 1px at 12% 20%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 72% 34%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 38% 78%, #cfd8ff 50%, transparent 51%), radial-gradient(1px 1px at 88% 82%, #fff 50%, transparent 51%),
    radial-gradient(60% 70% at 20% 30%, rgba(110,70,255,.28), transparent 70%), radial-gradient(50% 60% at 85% 70%, rgba(40,140,255,.22), transparent 70%),
    var(--space-bg);
  color:var(--space-ink); box-shadow:inset 0 0 80px rgba(0,0,0,.6);}
.atl-stage:focus-visible{box-shadow:0 0 0 2px var(--accent), inset 0 0 80px rgba(0,0,0,.6);}
.atl-space{position:absolute; inset:0; overflow:hidden;}
.atl-space canvas{position:absolute; inset:0; width:100% !important; height:100% !important; display:block;}
.atl-msg{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); color:var(--space-soft); font-size:14px; text-align:center; max-width:80%; z-index:5;}
.atl-labels{position:absolute; inset:0; pointer-events:none; z-index:4;}
.atl-labels button{pointer-events:auto;}
.atl-center, .atl-moonlbl, .atl-model{position:absolute; transform:translate(-50%,-50%);}
.atl-center{text-align:center; text-shadow:0 2px 12px rgba(0,0,0,.9); white-space:nowrap;}
.atl-center b{display:block; font-family:'Newsreader',Georgia,serif; font-style:italic; font-size:22px; font-weight:500; color:#fff; line-height:1.05;}
.atl-center span{font-size:11px; color:var(--space-soft);}

.atl-moonlbl{background:rgba(10,14,32,.72); border:1px solid rgba(160,180,255,.25); color:var(--space-ink); border-radius:8px; padding:1px 7px 2px; font-size:11.5px; white-space:nowrap; backdrop-filter:blur(4px); text-align:center; transition:border-color .2s, background .2s;}
.atl-moonlbl i{display:block; font-style:normal; font-size:9px; color:var(--space-soft); letter-spacing:.04em;}
.atl-moonlbl.active{border-color:#fff; background:rgba(30,40,90,.92); box-shadow:0 0 18px rgba(130,160,255,.45);}
.atl-moonlbl.off{opacity:.35;}
.atl-moonlbl .r-stem, .atl-model .r-stem{color:#9db8ff;}
.atl-moonlbl .r-end, .atl-model .r-end{color:#ff8f80;}
.atl-moonlbl .r-aux, .atl-model .r-aux{color:#5fe0ae;}

/* Drei gleich gestaltete Modell-Planeten */
.atl-model{width:170px; min-height:74px; text-align:left; background:rgba(8,12,28,.62); border:1px solid rgba(160,180,255,.2); border-left:3px solid var(--mc); color:var(--space-ink); border-radius:10px; padding:7px 10px; font:inherit; cursor:pointer; margin-left:104px; backdrop-filter:blur(3px); transition:border-color .2s, box-shadow .2s, opacity .2s; opacity:.72;}
.atl-model.g-er{--mc:#5b8cff;} .atl-model.g-ir{--mc:#2ec4a6;} .atl-model.g-re{--mc:#f2994a;}
.atl-model.mine{opacity:1; border-color:var(--mc); box-shadow:0 0 22px color-mix(in srgb, var(--mc) 40%, transparent);}
.atl-model:hover{opacity:1;}
.atl-model:focus-visible{outline:2px solid #fff; outline-offset:2px;}
.atl-model .atl-mh{display:block; font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--space-soft);}
.atl-model .atl-mf{display:block; font-size:14px; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.atl-badge{display:inline-block; margin-top:4px; font-family:'IBM Plex Mono',monospace; font-size:10px; text-transform:uppercase; letter-spacing:.06em; padding:1px 6px; border-radius:4px;}
.atl-badge.same{background:rgba(79,209,160,.18); color:#7ff0c4;}
.atl-badge.diff{background:rgba(255,123,107,.2); color:#ffab9f;}
.atl-badge.other{background:rgba(160,180,255,.12); color:var(--space-soft);}

/* Ohne 3D: dieselben Inhalte als ruhige Anordnung auf Sternengrund */
.atl-stage.offline{height:auto;}
.atl-stage.offline .atl-space{position:static; padding:16px;}
.atl-stage.offline .atl-msg{position:static; transform:none; max-width:none; margin:0 0 12px;}
.atl-stage.offline .atl-labels{position:static; display:flex; flex-direction:column; gap:14px;}
.atl-stage.offline .atl-center, .atl-stage.offline .atl-model{position:static; transform:none; margin:0;}
.atl-stage.offline .atl-moons{display:none;}
.atl-stage.offline .atl-models{display:grid; grid-template-columns:repeat(auto-fit, minmax(160px,1fr)); gap:10px;}
.atl-stage.offline .atl-model{width:auto;}
.atl-stage:not(.live):not(.offline) .atl-labels{visibility:hidden;}

/* Schmal: Leiste wandert unter die Erklärung (nicht mehr fest) */
@container (max-width: 820px){
  .atl-grid{display:flex; flex-direction:column; align-items:stretch; gap:0;}
  .atl-main{display:contents;}
  .atl-headblk{order:1;} .ax{order:2;} .atl-rail{order:3; position:static; max-height:none; margin-top:16px;}
  .atl-stage{order:4;} .ob{order:5;} .atl-verbbox{order:6;}
  .atl-tenses{display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:0 10px;}
  .atl-persons{grid-template-columns:repeat(6, minmax(0,1fr));}
}
@container (max-width: 520px){
  .atl-persons{grid-template-columns:repeat(3, minmax(0,1fr));}
  .atl-stage{height:clamp(420px, 72vh, 560px);}
  .ax-now{padding:14px;}
}
/* Schmale Szene (Seitenverhältnis, nicht Fensterbreite): Modellkarten kompakt unter den Planeten */
.atl-space.narrow .atl-model{width:104px; min-height:0; margin-left:0; padding:5px 7px; text-align:center; border-left-width:1px; border-top:3px solid var(--mc);}
.atl-space.narrow .atl-model.mine{border-top-color:var(--mc);}
.atl-space.narrow .atl-model .atl-mh{font-size:9.5px;}
.atl-space.narrow .atl-model .atl-mf{font-size:12px;}
.atl-space.narrow .atl-model .atl-badge{font-size:9px; padding:1px 4px;}
.atl-space.narrow .atl-center b{font-size:20px;}
.atl-space.narrow .atl-moonlbl{font-size:11px; padding:1px 6px;}

/* ---------- Herkunfts-Bühne ---------- */
.ob-head{display:flex; align-items:baseline; gap:10px; justify-content:center; margin-bottom:10px;}
.ob{position:relative; margin:18px 0 0; padding:18px 16px 14px; background:var(--paper-raised); border:1px solid var(--rule); border-radius:12px;}
.ob-sources{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; position:relative; z-index:2;}
.ob-src{background:var(--paper-sunken); border:1px solid var(--rule); border-radius:8px; padding:8px 12px; min-width:140px; opacity:0; transform:translateY(-6px); transition:opacity .3s ease, transform .3s ease;}
.ob-src.in{opacity:1; transform:none;}
.ob-src[data-role="aux"]{border-color:color-mix(in srgb, var(--r-aux) 45%, var(--rule));}
.ob-src[data-role="end"]{border-color:color-mix(in srgb, var(--r-end) 40%, var(--rule));}
.ob-lbl{font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:4px;}
.ob-text{font-family:'Newsreader',Georgia,serif; font-size:22px; font-style:italic;}
.ob-text .r-drop{transition:opacity .4s ease, color .4s ease; text-decoration-thickness:2px;}
.ob-text .r-drop.gone{opacity:.38; text-decoration:line-through; color:var(--r-drop);}
.ob-row{display:grid; grid-template-columns:repeat(6, auto); gap:4px;}
.ob-cell{font:inherit; font-size:13px; padding:3px 6px; border-radius:5px; text-align:center; color:var(--ink-soft); background:none; border:0; cursor:pointer;}
.ob-cell:hover:not(:disabled):not(.hl){background:var(--paper-raised); box-shadow:inset 0 0 0 1px var(--rule-strong); color:var(--ink);}
.ob-cell:disabled{opacity:.4; cursor:not-allowed;}
.ob-cell i{display:block; font-style:normal; font-size:9.5px; color:var(--ink-faint);}
.ob-cell.hl{background:color-mix(in srgb, currentColor 14%, transparent); font-weight:700; box-shadow:inset 0 0 0 1px currentColor;}
.ob-cell.hl.r-end{color:var(--r-end);} .ob-cell.hl.r-aux{color:var(--r-aux);}
.ob-arrows{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:1; overflow:visible;}
.ob-arrow{fill:none; stroke-width:2; stroke-linecap:round; opacity:.75;}
.ob-arrow.a-stem{stroke:var(--r-stem);} .ob-arrow.a-end{stroke:var(--r-end);} .ob-arrow.a-aux{stroke:var(--r-aux);}
.m-stem{fill:var(--r-stem);} .m-end{fill:var(--r-end);} .m-aux{fill:var(--r-aux);}
.ob-word{position:relative; z-index:2; text-align:center; margin:64px 0 6px; font-family:'Newsreader',Georgia,serif; font-style:italic; font-size:clamp(34px, 7vw, 58px); line-height:1.1;}
.ob-pron{color:var(--ink-faint); font-size:.55em; vertical-align:.12em;}
.ob-form [data-part]{display:inline-block; opacity:0; will-change:transform;}
.ob-form [data-part].landed{animation:obLand .35s ease-out;}
@keyframes obLand{0%{text-shadow:0 0 0 transparent;} 40%{text-shadow:0 0 18px currentColor;} 100%{text-shadow:0 0 0 transparent;}}
.ob-info{text-align:center; max-width:640px; margin:6px auto 0;}
.ob-rule{margin:0 0 8px; color:var(--ink-soft); font-size:14px;}
.ob-exc{display:inline-block; text-align:left; border-left:3px solid var(--r-end); background:color-mix(in srgb, var(--r-end) 9%, var(--paper-raised)); padding:7px 12px; border-radius:0 8px 8px 0; font-size:14px; opacity:0; transform:scale(.96); transition:opacity .3s ease, transform .3s ease;}
.ob-exc.k-spelling{border-left-color:#c99a2e; background:color-mix(in srgb, #c99a2e 10%, var(--paper-raised));}
.ob-exc.in{opacity:1; transform:none;}
.ob-exc b{display:block; font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--r-end); margin-bottom:2px;}
.ob-exc.k-spelling b{color:#a87a10;}
.ob-ctl{display:flex; gap:8px; justify-content:center; align-items:center; flex-wrap:wrap; margin-top:14px;}
.ob.instant .ob-src, .ob.instant .ob-exc, .ob.instant .ob-text .r-drop{transition:none;}
.ob.instant .ob-form [data-part].landed{animation:none;}

.atl-controls{margin:18px 0 8px;}
.atl-vhead{position:relative; display:flex; align-items:center; gap:10px; margin-top:12px;}
.atl-vhead .cfg-label{margin:0;}
.atl-vfilter{display:inline-flex; align-items:center; gap:6px; font:inherit; font-size:12.5px; color:var(--ink-soft); background:var(--paper-raised); border:1px solid var(--rule-strong); border-radius:999px; padding:4px 10px 4px 8px; cursor:pointer;}
.atl-vfilter:hover, .atl-vfilter[aria-expanded="true"]{color:var(--ink); border-color:var(--ink-faint);}
.atl-vfilter.on{color:var(--accent); border-color:color-mix(in srgb, var(--accent) 60%, var(--rule-strong));}
.atl-vpop{position:absolute; top:calc(100% + 6px); left:0; z-index:20; background:var(--paper-raised); border:1px solid var(--rule-strong); border-radius:12px; padding:12px 14px; box-shadow:0 12px 32px rgba(0,0,0,.18); min-width:260px;}
.atl-vpop[hidden]{display:none;}
.atl-vpop .cfg-label{margin:0 0 6px;}
.atl-vopts{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px;}
.atl-vopts:last-child{margin-bottom:0;}
.atl-vgh{margin:14px 0 6px; font-size:13px; font-weight:600; color:var(--ink);}
.atl-vgh span{font-weight:400; color:var(--ink-faint); margin-left:6px;}
.atl-verbs .chip-row{margin-top:0;}
.atl-n{font-family:'IBM Plex Mono',monospace; font-size:10.5px; font-weight:600; color:var(--accent); margin-right:5px;}
.atl-verbs .chip-btn.exam{border-color:color-mix(in srgb, var(--accent) 60%, var(--rule-strong));}
.atl-verbs .chip-btn.exam::after{content:"•"; color:var(--accent); margin-left:2px;}
.chip-btn:disabled{opacity:.4; cursor:not-allowed;}

@media (max-width: 560px){
  .ob-row{grid-template-columns:repeat(3, auto);}
  .ob-src{min-width:0; flex:1 1 140px;}
  .ob-word{margin-top:48px;}
}
@media (prefers-reduced-motion: reduce){
  .ob-src, .ob-exc, .ob-text .r-drop{transition:none;}
  .ob-form [data-part].landed{animation:none;}
}

/* Mobile (aus tests/e2e/mobile-audit.js): Tippflächen ≥ 40 px, Kleinschrift ≥ 11.5 px */
@media (max-width: 860px){
  .atl-vfilter{min-height:40px; padding:6px 12px;}
  .atl .ax-pl, .atl .atl-per .atl-pp, .atl .atl-sh, .atl .atl-sh span, .atl .ax-kind, .atl .ob-lbl, .atl .ob-cell i, .bookplate .bp-word small{font-size:11.5px;}
  .atl .atl-badge{font-size:11px;}
}
@media (max-width: 860px){
  .atl-rail .ax-row .ax-pl, .atl-meta .atl-tag, .ax-merk b{font-size:11.5px;}
}