.ue { --ue-l: calc(clamp(300px, 45vw, 800px) + var(--links)); --ue-f: 21.5em; --ue-neben: max(16px, .9em); position: absolute; inset: 0; z-index: 20; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); font-size: clamp(18px, calc(.65vw + .7vh), 22px); line-height: 1.45; color: var(--text); background: var(--ue-grund); user-select: text; -webkit-user-select: text; scrollbar-color: rgb(var(--fg) / .28) transparent; scrollbar-width: thin; }
.ue, .ue-kopf, .ue-buehne {
  --fg: 255 255 255;
  --text: #ecf1f7;
  --text2: #c2cfdf;
  --weiss: #f6f8fc;
  --linie: rgb(255 255 255 / .16);
  --ue-grund: var(--nacht);
  --ue-karte: #14213c;
  --ue-karte-rand: transparent;
  --ue-auf: #1c2a49;
  --ue-blatt: #121d36;
  --ue-feld: rgb(0 0 0 / .28);
  --ue-feld-rand: rgb(255 255 255 / .24);
  --ue-akzent: var(--ball);
  --ue-hervor: var(--flut);
  --ue-wahl: var(--flut);
  --ue-wahl-text: var(--tinte);
  --ue-wahl-hover: #fff;
  --ue-haupt: var(--ball);
  --ue-haupt-text: var(--tinte);
  --ue-haupt-hover: #ffec76;
  --ue-fehler: #ff9c8c;
  --ue-schatten: rgb(0 0 0 / .5);
  --ue-schleier: rgb(var(--nacht-rgb) / .66);
  --stern: var(--ball);
  --stern-rand: var(--ball);
  --stern-leer: rgb(255 255 255 / .38);
  --stern-leer-f: rgb(255 255 255 / .06);
  --stern-glanz: drop-shadow(0 0 .2em rgb(var(--ball-rgb) / .55));
  color-scheme: dark;
}
.ue[data-thema="hell"] {
  --fg: 20 31 53;
  --text: #141f35;
  --text2: #4e5b72;
  --weiss: #0b1630;
  --linie: #d5dbe4;
  --ue-grund: #f3f6fb;
  --ue-karte: #fff;
  --ue-karte-rand: #dfe4ec;
  --ue-auf: #fff;
  --ue-blatt: #fff;
  --ue-feld: #fff;
  --ue-feld-rand: #8d99ad;
  --ue-akzent: #2358cd;
  --ue-hervor: #2358cd;
  --ue-wahl: #2358cd;
  --ue-wahl-text: #fff;
  --ue-wahl-hover: #1b46b4;
  --ue-haupt-hover: #ffe46a;
  --ue-fehler: #c8372d;
  --ue-schatten: rgb(20 31 53 / .16);
  --ue-schleier: rgb(20 31 53 / .4);
  --stern-rand: #c47400;
  --stern-leer: #aeb8c8;
  --stern-leer-f: #eef2f7;
  --stern-glanz: none;
  color-scheme: light;
}
.ue-kopf { --ue-kopf-grund: radial-gradient(60% 260% at 94% -120%, rgb(255 246 214 / .26), transparent 70%), linear-gradient(180deg, #2763d7, #1a45b2); }
.ue[data-ansicht="detail"] { background: transparent; pointer-events: none; }
.ue[data-ansicht="detail"] > * { pointer-events: auto; }
.ue button { font: inherit; cursor: pointer; }
.ue h1, .ue h2, .ue h3, .ue h4, .ue p { margin: 0; }
.ue ::selection { color: var(--tinte); background: var(--ball); }
.ue :focus-visible { outline: 2px solid var(--ue-akzent); outline-offset: 2px; }
.ue [tabindex="-1"]:focus { outline: 0; }

body.ue-offen .dreh { display: none !important; }
body.ue-fenster { --ue-l: calc(clamp(300px, 45vw, 800px) + var(--links)); }
body.ue-fenster #szene { left: var(--ue-l); width: calc(100% - var(--ue-l)); }
body.ue-fenster.ue-voll #szene { left: 0; width: 100%; height: calc(100% - var(--ue-frei-unten, 0px)); }

.ue-kopf { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: .4em .9em; padding: calc(var(--oben) + .6rem) calc(var(--rechts) + var(--rand)) .55em calc(var(--links) + var(--rand)); background: var(--ue-kopf-grund); box-shadow: 0 1px 0 rgb(0 0 0 / .3); }
.ue-versteckt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ue.laedt { cursor: progress; }
.ue.laedt .ue-kopf { background: linear-gradient(90deg, transparent, var(--flut), transparent) -70% 100% / 40% 3px no-repeat, var(--ue-kopf-grund); animation: ue-laedt 1.1s linear infinite; }
@keyframes ue-laedt { to { background-position: 170% 100%, 0 0, 0 0; } }
.ue-meldung { position: fixed; left: 50%; bottom: calc(var(--unten) + 1.2em); z-index: 40; width: max-content; max-width: min(92vw, 26em); margin: 0; padding: .7em 1.1em; color: #fff; text-align: center; text-wrap: balance; white-space: pre-line; background: #0b152c; border: 1px solid rgb(255 255 255 / .18); border-radius: 12px; box-shadow: 0 .6em 2em rgb(0 0 0 / .45); transform: translateX(-50%); }
.ue-reiter { display: flex; gap: .4em; min-width: 0; }
.ue-reiter button { min-height: 44px; padding: 0 .6em; color: rgb(var(--fg) / .8); font-weight: 600; white-space: nowrap; background: none; border: 0; border-radius: 0; box-shadow: inset 0 -3px 0 transparent; }
.ue-reiter button:hover { color: var(--weiss); box-shadow: inset 0 -3px 0 rgb(var(--fg) / .3); }
.ue:not([data-ansicht="liste"]) .ue-reiter { flex: 1; }
.ue-reiter [aria-current="true"], .ue-reiter [aria-current="true"]:hover { color: var(--weiss); box-shadow: inset 0 -3px 0 var(--flut); }
.ue-zahl { margin-left: .5em; font-size: .9em; font-weight: 400; font-variant-numeric: tabular-nums; }

.ue-werkzeug { display: flex; flex: 1 1 18em; justify-content: flex-end; gap: .4em; min-width: 0; }
.ue:not([data-ansicht="liste"]) .ue-werkzeug { flex: none; }
.ue:not([data-ansicht="liste"]) .ue-werkzeug > :not(.ue-einreichknopf) { display: none; }
.ue-suche { position: relative; display: block; flex: 1 1 auto; max-width: 28em; min-width: 0; }
.ue-suche svg { position: absolute; top: 50%; left: .7em; width: 1.15em; height: 1.15em; color: var(--text2); pointer-events: none; transform: translateY(-50%); }
.ue-suche input { padding-left: 2.3em !important; color: #fff !important; background: rgb(7 18 52 / .34) !important; border-color: rgb(var(--fg) / .3) !important; }
.ue-suche input::placeholder { color: rgb(var(--fg) / .82); }
.ue-filterknopf { position: relative; display: flex; align-items: center; gap: .4em; flex: none; min-height: 44px; padding: 0 .8em; color: var(--weiss); font-weight: 700; white-space: nowrap; background: rgb(var(--fg) / .16); border: 0; border-radius: 10px; }
.ue-filterknopf:hover { background: rgb(var(--fg) / .24); }
.ue-filterknopf svg { width: 1.2em; height: 1.2em; }
.ue-filterknopf b { display: grid; place-items: center; min-width: 1.5em; height: 1.5em; padding: 0 .3em; color: var(--ue-wahl-text); font-size: .88em; font-variant-numeric: tabular-nums; background: var(--ue-wahl); border-radius: 99px; }
.ue-filterknopf b[hidden] { display: none; }
.ue-filterknopf[aria-expanded="true"] { color: var(--ue-wahl-text); background: var(--ue-wahl); }
.ue-filterknopf[aria-expanded="true"] b { color: var(--ue-wahl); background: var(--ue-wahl-text); }
.ue-einreichknopf { display: flex; align-items: center; gap: .4em; flex: none; min-height: 44px; padding: 0 .8em; color: var(--weiss); font-weight: 700; white-space: nowrap; background: rgb(var(--fg) / .16); border: 0; border-radius: 10px; }
.ue-einreichknopf:hover { background: rgb(var(--fg) / .24); }
.ue-einreichknopf svg { flex: none; width: 1.25em; height: 1.25em; }
.ue-einreichknopf[aria-current="true"] { color: var(--ue-wahl-text); background: var(--ue-wahl); cursor: default; }
.ue[data-ansicht="detail"][data-szene="ohne"] { background: var(--ue-grund); }
.ue-ohneszene { display: grid; place-items: center; min-width: 0; padding: 1.2em var(--rand); }
.ue-ohneszene p { padding: .55em 1em; color: var(--text2); text-align: center; border: 1px dashed rgb(var(--fg) / .3); border-radius: 12px; }

.ue-inhalt { grid-column: 1 / -1; grid-row: 2; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.ue[data-filter="seite"] .ue-inhalt { grid-column: 2; }
.ue[data-ansicht="liste"] .ue-inhalt, .ue[data-ansicht="einheit"] .ue-inhalt { padding: .8em calc(var(--rechts) + var(--rand)) calc(var(--unten) + 2.4em) calc(var(--links) + var(--rand)); }

.ue-lage { display: flex; flex-wrap: wrap; align-items: center; gap: .4em .9em; }
.ue-chips { display: flex; flex-wrap: wrap; align-items: center; gap: .3em; }
.ue-chips:empty { display: none; }
.ue-chip { display: inline-flex; align-items: center; gap: .3em; min-height: 44px; padding: 0 .6em 0 .85em; color: var(--ue-wahl-text); font-weight: 600; white-space: nowrap; background: var(--ue-wahl); border: 0; border-radius: 99px; }
.ue-chip:hover { background: var(--ue-wahl-hover); }
.ue-chip svg { width: 1em; height: 1em; }
.ue-chipweg { min-height: 44px; padding: 0 .6em; color: var(--text2); font-weight: 600; white-space: nowrap; text-decoration: underline; text-underline-offset: .18em; background: none; border: 0; }
.ue-chipweg:hover { color: var(--weiss); }

.ue-blatt { box-sizing: border-box; max-width: none; max-height: none; margin: 0; padding: 0; color: var(--text); font-size: inherit; line-height: inherit; background: var(--ue-blatt); border: 0; }
.ue-blatt[open] { display: flex; flex-direction: column; min-height: 0; }
.ue-blatt::backdrop { background: var(--ue-schleier, rgb(11 21 44 / .62)); }
.ue-blatt:modal { position: fixed; inset: auto 0 0; width: min(100%, 46em); max-height: calc(100dvh - var(--oben) - .6em); margin-inline: auto; border-radius: 18px 18px 0 0; box-shadow: 0 -14px 44px var(--ue-schatten); animation: ue-hoch .24s cubic-bezier(.16, 1, .3, 1); }
.ue-blatt:not(:modal) { position: static; grid-column: 1; grid-row: 2; width: calc(var(--ue-f) + var(--links) + var(--rand)); height: auto; background: rgb(var(--fg) / .04); border-right: 1px solid rgb(var(--fg) / .1); }
.ue-blatt:not(:modal) > * { padding-right: 1em; }
@keyframes ue-hoch { from { transform: translateY(2.5em); opacity: .4; } }
.ue-blattkopf { display: flex; align-items: center; justify-content: space-between; gap: 1em; padding: .5em calc(var(--rechts) + var(--rand)) .2em calc(var(--links) + var(--rand)); }
.ue-blattkopf h2 { font-size: 1.3em; line-height: 1.2; }
.ue-fragen { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1em 1.4em; align-content: start; padding: .3em calc(var(--rechts) + var(--rand)) .8em calc(var(--links) + var(--rand)); }
.f-haupt { display: grid; gap: .75em; align-content: start; min-width: 0; }
.ue-fragen fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.ue-fragen legend { margin-bottom: .22em; padding: 0; color: var(--text2); font-size: var(--ue-neben); font-weight: 600; }
.f-mehr { align-self: start; min-width: 0; border-top: 1px solid var(--linie); }
.f-mehr details { border-bottom: 1px solid var(--linie); }
.f-mehr summary { display: flex; align-items: center; gap: .6em; min-height: 48px; font-weight: 600; cursor: pointer; list-style: none; }
.f-mehr summary::-webkit-details-marker { display: none; }
.f-mehr summary:hover { color: var(--weiss); }
.f-mehr summary > span { flex: 1 1 auto; min-width: 0; }
.f-mehr summary b { flex: 0 1 auto; min-width: 0; overflow: hidden; padding: .1em .6em; color: var(--ue-wahl-text); font-size: var(--ue-neben); text-overflow: ellipsis; white-space: nowrap; background: var(--ue-wahl); border-radius: 99px; }
.f-mehr summary b[hidden] { display: none; }
.f-mehr summary svg { flex: none; width: 1.2em; height: 1.2em; color: var(--text2); transition: transform .15s ease-out; }
.f-mehr details[open] summary svg { transform: rotate(180deg); }
.f-mehr fieldset { padding-bottom: .8em; }
@media (min-width: 700px) {
  .ue-blatt:modal .ue-fragen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.ue-wahl { display: grid; grid-template-columns: repeat(var(--sp, 3), minmax(0, 1fr)); gap: .25em; }
.f-frei .ue-wahl { display: flex; flex-wrap: wrap; }
.f-frei .ue-wahl label { flex: 1 1 auto; }
.f-frei .ue-wahl label > span { padding-inline: .5em; }
.ue-wahl label { position: relative; display: block; min-width: 0; cursor: pointer; }
.ue-wahl input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ue-wahl label > span { display: flex; align-items: center; justify-content: center; gap: .3em; min-height: 44px; padding: .15em .2em; color: var(--text); font-weight: 600; line-height: 1.1; text-align: center; background: rgb(var(--fg) / .08); border-radius: 9px; }
.ue-wahl label:hover > span { background: rgb(var(--fg) / .15); }
.ue-wahl input:checked + span { color: var(--ue-wahl-text); background: var(--ue-wahl); }
.ue-wahl input:focus-visible + span { outline: 2px solid var(--ue-akzent); outline-offset: 2px; }
.f-material .ue-wahl input:checked + span { color: var(--text); background: rgb(var(--fg) / .1); box-shadow: inset 0 0 0 1px var(--ue-akzent); }
.f-material .ue-wahl input:not(:checked) + span { color: var(--text2); text-decoration: line-through; background: none; box-shadow: inset 0 0 0 1px var(--linie); }
.ue-blattfuss { display: flex; gap: .5em; padding: .55em calc(var(--rechts) + var(--rand)) calc(var(--unten) + .55em) calc(var(--links) + var(--rand)); border-top: 1px solid var(--linie); }
.ue-blattfuss .ue-haupt { flex: 1; min-width: 0; padding-inline: .5em; white-space: nowrap; }
.ue-blattfuss .ue-zweit { flex: none; padding-inline: .6em; }

.ue-titel > span { display: block; margin-bottom: .22em; color: var(--text2); font-size: var(--ue-neben); font-weight: 600; }
.ue-suche input, .ue-titel input { width: 100%; min-height: 44px; padding: 0 .8em; color: var(--weiss); font: inherit; font-size: max(16px, 1em); background: var(--ue-feld); border: 1px solid var(--ue-feld-rand); border-radius: 10px; outline: 0; }
.ue-suche input:focus, .ue-titel input:focus { border-color: var(--ue-akzent); box-shadow: 0 0 0 1px var(--ue-akzent); }
.ue-titel input::placeholder { color: var(--text2); }
.ue-seg { display: flex; flex-wrap: wrap; gap: .2em; }
.ue-seg button { min-height: 44px; padding: 0 .72em; color: var(--text2); font-weight: 600; white-space: nowrap; background: rgb(var(--fg) / .06); border: 0; border-radius: 9px; }
.ue-seg button:hover { color: var(--weiss); background: rgb(var(--fg) / .13); }
.ue-seg [aria-checked="true"], .ue-seg [aria-checked="true"]:hover { color: var(--ue-wahl-text); background: var(--ue-wahl); }

.ue-treffer { color: var(--text2); font-variant-numeric: tabular-nums; }
.ue-recht { display: flex; gap: 1.4em; justify-content: center; margin-top: 2.4em; font-size: .86em; }
.ue-recht a { color: var(--text2); text-underline-offset: .2em; }
.ue-recht a:hover, .ue-recht a:focus-visible { color: var(--ue-akzent); }
.ue-kat { margin-top: 1.1em; }
.ue-kat > header { display: grid; gap: .1em; padding-bottom: .35em; border-bottom: 1px solid var(--linie); }
.ue-kat h2 { font-size: 1.6em; line-height: 1.15; text-wrap: balance; }
.ue-kat > header p { color: var(--text2); text-wrap: pretty; }
.ue-raster, .ue-vorlagenliste { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17em), 1fr)); gap: .6em; margin: .7em 0 0; padding: 0; list-style: none; }
.ue-raster li, .ue-vorlagenliste li { position: relative; display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }
.ue-karte { position: relative; display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: .3em; width: 100%; padding: .65em .85em .75em; color: inherit; text-align: left; background: var(--ue-karte); border: 1px solid var(--ue-karte-rand); border-radius: 12px; cursor: pointer; }
.k-stufe { display: flex; align-items: center; gap: 0 .5em; min-width: 0; color: var(--text2); font-size: var(--ue-neben); line-height: 1.25; }
.k-merken { position: absolute; top: 0; right: 0; z-index: 2; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; color: var(--text2); background: none; border: 0; border-radius: 12px; }
.k-merken svg { box-sizing: content-box; width: 1.15em; height: 1.15em; padding: .3em; border-radius: 50%; transition: background-color .12s, color .12s; }
.k-merken:hover svg { color: var(--ue-akzent); background: rgb(var(--fg) / .1); }
.k-merken[aria-pressed="true"] svg { color: var(--ue-wahl-text); background: var(--ue-akzent); }
.k-merken[aria-pressed="true"]:hover svg { color: var(--ue-wahl-text); background: var(--ue-akzent); opacity: .85; }
.k-teil { color: var(--ue-hervor); font-weight: 600; font-variant-numeric: tabular-nums; }
.k-titel { align-self: start; font-size: 1.2em; font-weight: 700; line-height: 1.2; text-wrap: balance; }
.k-fakten { display: flex; flex-wrap: wrap; align-items: center; align-self: end; gap: .2em .6em; min-height: 24px; color: var(--text); font-size: var(--ue-neben); }
.ue-fakt { display: inline-flex; align-items: center; gap: .3em; white-space: nowrap; }
.ue-fakt > svg { flex: none; width: 1.15em; height: 1.15em; color: var(--ue-akzent); }
.k-mat { display: flex; gap: .3em; margin-left: auto; color: var(--ue-akzent); }
.k-mat svg { width: 18px; height: 18px; }
.k-mat > span { display: inline-flex; }
.mat-icon { flex: none; }
.k-mehr { position: absolute; top: calc(100% - 14px); left: -1px; right: -1px; z-index: 1; display: grid; gap: .45em; padding: calc(14px + .35em) .85em .8em; font-size: var(--ue-neben); line-height: 1.4; background: var(--ue-auf); border: 1px solid var(--linie); border-top: 0; border-radius: 0 0 12px 12px; box-shadow: 0 16px 30px var(--ue-schatten); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-6px); transition: opacity .1s, transform .1s, visibility 0s linear .1s; }
.k-mehr::before { content: ""; position: absolute; top: 14px; left: .85em; right: .85em; height: 1px; background: rgb(var(--fg) / .1); }
.k-kurz { color: var(--text); text-wrap: pretty; }
.k-weg { display: flex; flex-wrap: wrap; align-items: center; gap: .15em .7em; }
.k-schritte { display: flex; flex-wrap: wrap; align-items: center; row-gap: .25em; }
.k-schritte i { display: grid; place-items: center; flex: none; width: 1.6em; height: 1.6em; color: var(--text2); font-size: max(14px, .9em); font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; background: rgb(var(--fg) / .1); border-radius: 50%; }
.k-schritte i.an { color: var(--ue-wahl-text); background: var(--ue-wahl); }
.k-schritte i + i { position: relative; margin-left: .35em; }
.k-schritte i + i::before { content: ""; position: absolute; right: 100%; top: calc(50% - 1px); width: .35em; height: 2px; background: var(--linie); }
.k-schritte i.an + i.an::before { background: var(--ue-wahl); }
.k-zeilen { display: flex; flex-wrap: wrap; align-items: center; gap: .2em .9em; color: var(--text2); }
.k-matname b { color: var(--text); font-weight: 600; }
.k-matname span { white-space: nowrap; }
.ue-karte:focus-visible { background: var(--ue-auf); border-color: var(--ue-akzent); outline: 0; box-shadow: 0 0 0 1px var(--ue-akzent); }
.ue-karte:focus-visible .k-mehr { border-color: var(--ue-akzent); box-shadow: -1px 0 0 var(--ue-akzent), 1px 0 0 var(--ue-akzent), 0 1px 0 var(--ue-akzent), 0 16px 30px var(--ue-schatten); opacity: 1; visibility: visible; transform: none; transition: none; }
.ue-raster li:focus-within, .ue-vorlagenliste li:focus-within { z-index: 3; }
@media (hover: hover) {
  .ue-raster li:hover, .ue-vorlagenliste li:hover { z-index: 3; }
  :is(.ue-raster, .ue-vorlagenliste) li:hover .ue-karte { background: var(--ue-auf); border-color: var(--linie); }
  :is(.ue-raster, .ue-vorlagenliste) li:hover .k-mehr { opacity: 1; visibility: visible; transform: none; transition: opacity .12s ease-out, transform .12s ease-out; }
}
@media (hover: none) {
  .k-mehr { display: none; }
}
.ue-sterne { display: inline-flex; flex: none; gap: .12em; vertical-align: -.2em; }
.ue-sterne svg { width: 1.22em; height: 1.22em; overflow: visible; }
.ue-sterne path { fill: var(--stern-leer-f); stroke: var(--stern-leer); stroke-width: 1.5; stroke-linejoin: round; }
.ue-sterne .s-bis, .ue-sterne .s-von { fill: var(--stern); stroke: var(--stern-rand); }
.ue-sterne .s-bis { fill: color-mix(in srgb, var(--stern) 34%, transparent); }
.ue-sterne svg:has(.s-von) { filter: var(--stern-glanz); }
.ue-wahl input:checked + span .ue-sterne, .ue-seg [aria-checked="true"] .ue-sterne, .ue-chip .ue-sterne { --stern: currentColor; --stern-rand: currentColor; --stern-leer: color-mix(in srgb, currentColor 45%, transparent); --stern-leer-f: transparent; --stern-glanz: none; }
.ue-leer { display: grid; justify-items: start; gap: .6em; margin-top: 1.4em; color: var(--text2); }

.ue[data-ansicht="detail"] .ue-inhalt { display: grid; grid-template-columns: var(--ue-l) minmax(0, 1fr); overflow: hidden; pointer-events: none; }
.ue[data-ansicht="detail"] .ue-inhalt > * { pointer-events: auto; }
.ue-text { container: ue-text / inline-size; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: .8em 1.2em calc(var(--unten) + 2em) calc(var(--links) + var(--rand)); background: var(--ue-grund); border-right: 1px solid rgb(var(--fg) / .1); text-wrap: pretty; }
.ue-text section { margin-top: 1.2em; }
.ue-reihentitel { margin-top: .1em; font-size: 1.55em; line-height: 1.14; text-wrap: balance; }
.ue-reihentitel span { display: inline-block; }
.ue-reihentitel span:first-child { color: var(--ue-hervor); }
.ue-text h4 { margin-bottom: .22em; color: var(--ue-akzent); font-size: 1.12em; font-weight: 700; letter-spacing: .01em; }
.ue-text ul, .ue-text ol { margin: 0; padding-left: 1.2em; }
.ue-text li + li { margin-top: .3em; }
.ue-schrittblock { display: flex; flex-wrap: wrap; align-items: center; gap: .3em 1em; margin-top: .45em; padding: .3em 0 .55em; background: var(--ue-grund); border-bottom: 1px solid var(--linie); }
.ue-stepper { display: contents; }
.ue-text .ue-stepper ol { display: flex; flex: 1 1 18em; align-items: center; min-width: 0; margin: 0; padding: 0; list-style: none; }
.ue-text .ue-stepper li { display: flex; flex: 0 1 auto; align-items: center; min-width: 0; margin: 0; }
.ue-stepper li + li::before { content: ""; flex: 0 1 .55em; width: .55em; height: 3px; background: rgb(var(--fg) / .16); }
.ue-stepper li.fertig + li::before, .ue-stepper li.jetzt::before { background: var(--ue-wahl); }
.ue-stepper button { flex: 0 1 44px; width: 44px; min-width: 0; aspect-ratio: 1; padding: 0; color: var(--text2); font-weight: 700; font-variant-numeric: tabular-nums; background: rgb(var(--fg) / .09); border: 2px solid transparent; border-radius: 50%; cursor: pointer; }
.ue-stepper button:hover { color: var(--weiss); background: rgb(var(--fg) / .18); }
@container ue-text (max-width: 26em) {
  .ue-text .ue-stepper ol.viele { display: contents; }
  .ue-schrittblock:has(ol.viele) { column-gap: .25em; }
  .ue-text .ue-stepper .viele li { flex: none; }
  .ue-text .ue-stepper .viele li::before { content: none; }
  .ue-stepper .viele button { flex: none; }
}
.ue-stepper .fertig button { color: var(--ue-hervor); border-color: var(--ue-hervor); background: none; }
.ue-stepper .jetzt button, .ue-stepper .jetzt button:hover { color: var(--ue-wahl-text); background: var(--ue-wahl); }
.ue-aktionen { display: flex; margin-left: auto; align-items: center; justify-content: flex-end; gap: .4em; }
.ue-aktionen .ue-haupt { white-space: nowrap; }
.ue-icon { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; color: var(--weiss); background: rgb(var(--fg) / .1); border: 0; border-radius: 10px; cursor: pointer; }
.ue-icon:hover { background: rgb(var(--fg) / .18); }
.ue-icon svg { width: 22px; height: 22px; }
.ue-text .ue-schritt-titel { margin: .6em 0 0; color: var(--weiss); font-size: 1.38em; font-weight: 700; line-height: 1.18; letter-spacing: 0; text-wrap: balance; }
.ue-auftrag { font-size: 1.1em; font-weight: 600; color: var(--weiss); }
.ue-zuspiel { margin-top: .35em !important; color: var(--text2); }
.ue-zuspiel b { color: var(--text); }
.ue-fakten { display: grid; gap: .35em; margin-top: .45em; font-size: var(--ue-neben); }
.ue-fakten p { display: flex; flex-wrap: wrap; align-items: center; gap: .25em 1em; margin: 0; }
.ue-fakten p:empty, .ue-fakten dl:not(:has(div)) { display: none; }
.ue-fakten .ue-fakt { min-width: 0; white-space: normal; }
.ue-fakten dl { display: grid; grid-template-columns: max-content 1fr; gap: .1em 1em; margin: .2em 0 0; }
.ue-fakten dl div { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; }
.ue-fakten dt { color: var(--text2); }
.ue-fakten dd { margin: 0; color: var(--text); }
.ue-fakten .mat-icon { color: var(--ue-akzent); }
.ue-paar p + p { margin-top: .3em; }
.sk-legende { display: flex; gap: 1em; padding: .1em .3em .15em; color: #15213a; font-size: var(--ue-neben); font-weight: 600; }
.sk-legende span { display: inline-flex; align-items: center; gap: .35em; }
.sk-legende svg { width: 1.9em; height: .5em; fill: none; stroke-width: 2; }
.sk-legende span:first-child svg { stroke: #b9471a; }
.sk-legende span:last-child svg { stroke: #15213a; }
.ue-text .ue-coachkarte { margin-top: .7em; padding: .55em .8em .65em; color: var(--tinte); background: var(--flut); border-radius: 12px; }
.ue-text .ue-coachkarte h4 { display: flex; align-items: center; gap: .35em; margin-bottom: .1em; color: var(--tinte); font-size: 1.05em; }
.ue-coachkarte svg { flex: none; width: 1.3em; height: 1.3em; }
.ue-coachkarte p { font-weight: 600; }
.ue-stellung > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: .5em; }
@container ue-text (min-width: 35em) {
  .ue-stellung > div { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1em; }
}
.ue-skizze { margin: 0; padding: .2em; background: #eff4fa; border-radius: 10px; }
.ue-material { display: flex; flex-wrap: wrap; gap: .3em; margin: 0 !important; padding: 0 !important; list-style: none; }
.ue-material li { display: inline-flex; align-items: center; gap: .35em; min-height: 2.2em; margin: 0 !important; padding: .15em .65em .15em .5em; background: rgb(var(--fg) / .08); border-radius: 9px; }
.ue-material .mat-icon { color: var(--ue-akzent); }
.ue-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: .5em; margin-top: .85em; }
.ue-haupt, .ue-zweit { min-height: 44px; padding: 0 1em; font-weight: 700; border: 0; border-radius: 10px; }
.ue-haupt { color: var(--ue-haupt-text); background: var(--ue-haupt); }
.ue-haupt:hover { background: var(--ue-haupt-hover); }
.ue-zweit { color: var(--weiss); background: rgb(var(--fg) / .1); }
.ue-zweit:hover { background: rgb(var(--fg) / .18); }
.ue-variante .ue-seg { margin-bottom: .4em; }
.ue-fehler { margin: 0; }
.ue-fehler div + div { margin-top: .5em; }
.ue-fehler dt, .ue-fehler dd { display: grid; grid-template-columns: 1.15em minmax(0, 1fr); gap: .35em; }
.ue-fehler dt { font-weight: 600; }
.ue-fehler dd { margin: .1em 0 0; color: var(--text2); }
.ue-fehler svg { width: 1.15em; height: 1.15em; margin-top: .14em; }
.ue-fehler dt svg { color: var(--ue-fehler); }
.ue-fehler dd svg { color: var(--ue-akzent); }
.ue-paar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto; column-gap: 1.2em; }
.ue-paar section { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; min-width: 0; }
@container ue-text (max-width: 30em) {
  .ue-paar { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
}
.ue-weiter { display: flex; justify-content: space-between; gap: .5em; margin-top: 1.3em; }

.ue-buehne { container: ue-buehne / inline-size; position: relative; z-index: 2; min-width: 0; min-height: 0; display: flex; flex-direction: column; pointer-events: none !important; }
.ue-bildflaeche { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; pointer-events: none; }
.ue-unter { max-width: min(46em, 92%); margin-bottom: .5em; padding: .32em .9em .38em; text-align: center; background: rgb(var(--nacht-rgb) / .82); border-radius: 10px; pointer-events: none; }
.ue-unter:has(p:empty) { visibility: hidden; }
.ue-unter p { font-size: 1.2em; font-weight: 700; line-height: 1.22; color: var(--weiss); text-wrap: balance; }
.ue-unter small { display: block; margin-top: .1em; color: var(--ue-hervor); font-size: max(16px, .96em); line-height: 1.25; text-wrap: balance; }
.ue-unter small:empty { display: none; }
.ue-regler { position: relative; padding: .35em calc(var(--rechts) + .7em) calc(var(--unten) + .45em) .7em; background: rgb(var(--nacht-rgb) / .9); pointer-events: auto; }
.ue-regel { display: flex; flex-wrap: wrap; align-items: center; gap: .15em .4em; }
.ue-balken { order: -1; display: block; flex: 0 0 100%; height: 18px; padding: 7px 0; background: linear-gradient(rgb(var(--fg) / .18), rgb(var(--fg) / .18)) center / 100% 4px no-repeat; border: 0; }
.ue-balken i { display: block; width: 0; height: 4px; background: var(--ue-akzent); border-radius: 2px; }
.ue-regel > button:not(.ue-balken), .ue-loop { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; color: var(--weiss); background: rgb(var(--fg) / .08); border: 0; border-radius: 10px; }
.ue-regel > button:not(.ue-balken):hover, .ue-loop:hover { background: rgb(var(--fg) / .17); }
.ue-regel > button.gross { width: 56px; color: var(--ue-haupt-text); background: var(--ue-haupt); }
.ue-loop[aria-pressed="false"] { color: var(--text2); background: none; }
.ue-loop[aria-pressed="true"] { color: var(--ue-akzent); }
.ue-loop span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.ue-regel svg { width: 22px; height: 22px; fill: currentColor; }
.ue-regel svg[fill="none"] { fill: none; }
.ue-mehr, .ue-m { display: contents; }
.ue-m > span { display: none; }
.ue-mehrknopf { display: none !important; }
.ue-regel .ue-seg { flex-wrap: nowrap; }
.ue-regel .ue-seg button { min-height: 44px; padding: 0 .6em; }
.ue-regel [data-a="ton"] { margin-left: auto; }
.ue-regel [data-a="ton"][aria-pressed="false"] { color: var(--text2); }
@container ue-buehne (max-width: 56em) {
  .ue-regel { flex-wrap: nowrap; gap: .25em; }
  .ue-balken { order: 0; flex: 1 1 auto; min-width: 2em; height: 44px; padding: 20px 0; }
  .ue-regel [data-a="ton"] { margin-left: 0; }
  .ue-mehrknopf { display: grid !important; }
  .ue-mehrknopf[aria-expanded="true"] { color: var(--ue-wahl-text) !important; background: var(--ue-wahl) !important; }
  .ue-mehr { position: absolute; right: .6em; bottom: calc(100% + .4em); z-index: 3; display: none; width: min(20em, calc(100cqi - 1.2em)); flex-direction: column; gap: .5em; padding: .6em .7em .7em; background: var(--ue-blatt); border: 1px solid var(--linie); border-radius: 14px; box-shadow: 0 8px 28px var(--ue-schatten); }
  .ue-regler[data-mehr="offen"] .ue-mehr { display: flex; }
  .ue-m { display: block; }
  .ue-m > span { display: block; margin-bottom: .15em; color: var(--text2); font-size: var(--ue-neben); font-weight: 600; }
  .ue-m .ue-seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .ue-regel .ue-seg button { padding: 0 .3em; }
  .ue-loop { display: flex; align-items: center; justify-content: center; gap: .4em; width: 100%; font-weight: 600; }
  .ue-loop span { position: static; width: auto; height: auto; clip-path: none; }
}
.ue.voll .ue-kopf, .ue.voll .ue-text { display: none; }
.ue.voll { grid-template-rows: minmax(0, 1fr); }
.ue.voll .ue-inhalt { grid-row: 1; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: minmax(0, 1fr) !important; }
.ue.voll .ue-bildflaeche { flex: 1 1 auto !important; height: auto !important; }
.ue-takte { display: none; }
.ue.voll .ue-takte { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: .15em .3em; box-sizing: border-box; width: 100%; max-width: none; margin: 0; padding: .3em max(.45em, var(--rechts)) .3em max(.45em, var(--links)); font-size: clamp(18px, calc(1vw + .9vh), 28px); list-style: none; background: rgb(var(--nacht-rgb) / .94); }
.ue.voll .ue-takte + .ue-unter { display: none; }
.ue-takte li { margin: 0; padding: .12em .55em; color: rgb(var(--fg) / .88); font-weight: 600; line-height: 1.25; text-wrap: pretty; border-radius: 8px; transition: color .2s, background-color .2s; }
.ue-takte li.jetzt { color: var(--ue-wahl-text); background: var(--ue-wahl); }
.ue-takte small { display: inline-block; margin-left: .35em; font-size: max(16px, .84em); font-weight: 500; }
.ue-takte small::before { content: "· "; }
@media (max-width: 640px) {
  .ue.voll .ue-takte { flex-direction: column; gap: .1em; }
  .ue-takte small { display: block; margin-left: 0; }
  .ue-takte small::before { content: none; }
}
@media (max-height: 480px) {
  body.ue-fenster { --ue-seite: calc(min(38vw, 340px) + var(--links)); }
  body.ue-fenster.ue-voll #szene { top: var(--ue-frei-oben, 0px); height: calc(100% - var(--ue-frei-oben, 0px) - var(--ue-frei-unten, 0px)); }
  body.ue-fenster.ue-voll:has(.ue-takte) #szene { left: var(--ue-seite); width: calc(100% - var(--ue-seite)); }
  .ue.voll .ue-bildflaeche { align-items: flex-start; overflow: hidden; }
  .ue.voll .ue-takte { flex: 1 1 auto; flex-direction: column; flex-wrap: nowrap; justify-content: safe center; gap: .12em; width: var(--ue-seite); min-height: 0; padding: .3em .3em .3em max(.3em, var(--links)); overflow-y: auto; pointer-events: auto; scrollbar-width: none; }
  .ue-takte small { display: block; margin-left: 0; }
  .ue-takte small::before { content: none; }
  .ue-takte li:not(.jetzt) small { display: none; }
  .ue-takte li { padding-block: .06em; }
}
.ue-vollleiste { display: none; }
.ue.voll .ue-vollleiste { display: flex; flex: none; flex-wrap: wrap; align-items: center; gap: .3em 1em; padding: calc(var(--oben) + .4em) calc(var(--rechts) + .7em) .4em calc(var(--links) + .7em); background: rgb(var(--nacht-rgb) / .86); pointer-events: auto; }
.ue-vollleiste p { flex: 1 1 12em; min-width: 0; margin: 0; color: var(--weiss); font-size: 1.08em; font-weight: 700; line-height: 1.2; }
.ue-vollleiste small { display: block; color: var(--text2); font-size: max(15px, .82em); font-weight: 600; }
.ue-vollleiste ol { display: flex; flex: 0 1 auto; flex-wrap: wrap; min-width: 0; gap: .25em; margin: 0; padding: 0; list-style: none; }
.ue-vollleiste li { flex: none; margin: 0; }
.ue-vollleiste button { display: block; width: 44px; aspect-ratio: 1; padding: 0; color: var(--text2); font-weight: 700; font-variant-numeric: tabular-nums; background: rgb(var(--fg) / .1); border: 2px solid transparent; border-radius: 50%; cursor: pointer; }
.ue-vollleiste button:hover { color: var(--weiss); background: rgb(var(--fg) / .2); }
.ue-vollleiste .fertig button { color: var(--ue-hervor); background: none; border-color: var(--ue-hervor); }
.ue-vollleiste .jetzt button, .ue-vollleiste .jetzt button:hover { color: var(--ue-wahl-text); background: var(--ue-wahl); }
.ue-volltipp { display: none; color: var(--text2); font-size: var(--ue-neben); white-space: nowrap; }
@media (hover: hover) { .ue-volltipp { display: inline; } }

.ue-plan { max-width: 58em; margin-inline: auto; }
.ue-plan > header { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6em 1.6em; }
.ue-titel { flex: 1 1 18em; }
.ue-summe { display: flex; align-items: baseline; gap: .5em; font-variant-numeric: tabular-nums; }
.ue-summe b { font-size: 1.6em; }
.ue-summe span { color: var(--text2); }
.ue-liste { margin: 1em 0 0; padding: 0; list-style: none; }
.ue-pack { display: grid; grid-template-columns: minmax(10em, auto) minmax(0, 1fr); gap: .5em 1.6em; margin-top: .9em; padding: .7em .9em .8em; background: var(--ue-karte); border: 1px solid var(--ue-karte-rand); border-radius: 12px; }
.ue-pack h2 { margin-bottom: .2em; color: var(--ue-akzent); font-size: 1.12em; font-weight: 700; }
.ue-liste li { display: grid; grid-template-columns: 7.6em minmax(0, 1fr) auto; align-items: center; gap: .3em .8em; padding: .4em .5em; border-bottom: 1px solid var(--linie); }
.p-zeit { color: var(--text2); font-size: var(--ue-neben); font-variant-numeric: tabular-nums; white-space: nowrap; }
.p-titel { display: grid; min-height: 44px; align-content: center; padding: .1em .4em; color: inherit; text-align: left; background: none; border: 0; border-radius: 8px; text-wrap: pretty; }
.p-titel:hover { background: rgb(var(--fg) / .08); }
.p-titel small { color: var(--text2); font-size: var(--ue-neben); }
.p-coach { display: grid; grid-template-columns: 1.1em minmax(0, 1fr); gap: .35em; margin-top: .15em; color: var(--ue-hervor); font-size: .96em; }
.p-coach svg { width: 1.1em; height: 1.1em; margin-top: .12em; }
.p-knoepfe { display: flex; gap: .2em; }
.p-knoepfe button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; color: var(--text2); background: rgb(var(--fg) / .07); border: 0; border-radius: 9px; }
.p-knoepfe svg { width: 20px; height: 20px; }
.p-knoepfe button:hover:not(:disabled) { color: var(--weiss); background: rgb(var(--fg) / .16); }
.p-knoepfe button:disabled { opacity: .3; cursor: default; }
.ue-hinweis { color: var(--ue-hervor); font-size: var(--ue-neben); word-break: break-all; }
.ue-vorlagen { margin-top: .9em; padding: .7em .9em .8em; background: var(--ue-karte); border: 1px solid var(--ue-karte-rand); border-radius: 12px; }
.ue-vorlagen h2 { margin-bottom: .35em; color: var(--ue-akzent); font-size: 1.12em; font-weight: 700; }
.ue-vorlagenwahl { display: flex; flex-wrap: wrap; gap: .4em 1em; }
.ue-leerzeile { margin-top: .6em; color: var(--text2); font-size: var(--ue-neben); }
.p-block { grid-template-columns: minmax(0, 1fr) !important; padding: .9em .5em .2em !important; color: var(--ue-akzent); font-size: 1.05em; font-weight: 700; letter-spacing: .02em; border-bottom: 0 !important; }
.ue-druck { display: none; }
.ue-merken { display: inline-flex; align-items: center; gap: .35em; }
.ue-merken svg { flex: none; width: 1.1em; height: 1.1em; }
.ue-merken[aria-pressed="true"] { color: var(--ue-hervor); background: rgb(var(--fg) / .1); box-shadow: inset 0 0 0 1.5px var(--ue-hervor); }
.ue-merken[aria-pressed="true"]:hover { background: rgb(var(--fg) / .18); }
.ue-stepper .drin button { position: relative; }
.k-schritte i.drin { position: relative; }
.ue-stepper .drin button::after, .k-schritte i.drin::after { content: ""; position: absolute; top: -3px; right: -3px; width: 9px; height: 9px; background: var(--ue-akzent); border: 2px solid var(--ue-grund); border-radius: 50%; }
.k-schritte i.drin::after { top: -4px; right: -4px; border-color: var(--ue-auf); }
.ue-summe > svg { flex: none; align-self: center; width: 1.3em; height: 1.3em; color: var(--ue-akzent); }
.ue-knoepfe .ue-zweit, .ue-trainings .ue-zweit, .ue-geteilt button { display: inline-flex; align-items: center; gap: .4em; white-space: nowrap; }
.ue-knoepfe .ue-zweit svg, .ue-trainings .ue-zweit svg, .ue-geteilt button svg { flex: none; width: 1.1em; height: 1.1em; }
.ue-plan textarea { box-sizing: border-box; display: block; width: 100%; min-height: 44px; padding: .45em .8em; color: var(--weiss); font: inherit; font-size: max(16px, 1em); line-height: 1.4; background: var(--ue-feld); border: 1px solid var(--ue-feld-rand); border-radius: 10px; outline: 0; resize: none; overflow: hidden; field-sizing: content; }
.ue-plan textarea:focus { border-color: var(--ue-akzent); box-shadow: 0 0 0 1px var(--ue-akzent); }
.ue-plan textarea::placeholder { color: var(--text2); }
.ue-notiz { display: block; margin-top: .8em; }
.ue-notiz > span { display: flex; align-items: center; gap: .35em; margin-bottom: .22em; color: var(--text2); font-size: var(--ue-neben); font-weight: 600; }
.ue-notiz textarea { min-height: 3.4em; }
.ue-notiz svg, .p-notiz summary svg, .p-notiztext svg, .ue-notiztext svg { flex: none; width: 1.05em; height: 1.05em; color: var(--ue-akzent); }
.p-nw { white-space: nowrap; }
.p-zeit b { display: block; color: var(--text); font-size: 1.08em; }
.ue-liste .p-notiz, .ue-liste .p-notiztext { grid-column: 2 / -1; min-width: 0; }
.p-notiz summary { display: inline-flex; align-items: center; gap: .35em; min-height: 40px; padding: 0 .5em; color: var(--text2); font-size: var(--ue-neben); border-radius: 8px; cursor: pointer; list-style: none; }
.p-notiz summary::-webkit-details-marker { display: none; }
.p-notiz summary:hover { color: var(--weiss); background: rgb(var(--fg) / .08); }
.p-notiz textarea { margin: 0 0 .3em; }
.p-notiztext, .ue-notiztext { display: grid; grid-template-columns: 1.05em minmax(0, 1fr); gap: .45em; text-wrap: pretty; overflow-wrap: anywhere; }
.p-notiztext { padding: 0 .4em .3em; font-size: var(--ue-neben); }
.p-notiztext svg, .ue-notiztext svg { margin-top: .22em; }
.ue-notiztext { margin-top: .8em; padding: .6em .8em; background: var(--ue-karte); border: 1px solid var(--ue-karte-rand); border-radius: 10px; }
.ue-geteilt { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6em 1em; margin-bottom: 1em; padding: .7em .9em; background: var(--ue-karte); border: 1px solid var(--ue-hervor); border-radius: 12px; }
.ue-geteilt p { display: grid; }
.ue-geteilt p span { color: var(--text2); font-size: var(--ue-neben); }
.ue-geteilt div { display: flex; flex-wrap: wrap; gap: .5em; }
.ue-plantitel { flex: 1 1 18em; font-size: 1.6em; line-height: 1.15; text-wrap: balance; }
.ue-trainings { margin-top: 1.6em; }
.ue-trainings > header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5em 1em; }
.ue-trainings h2 { color: var(--ue-akzent); font-size: 1.12em; font-weight: 700; }
.ue-trainings ul { display: grid; gap: .4em; margin: .6em 0 0; padding: 0; list-style: none; }
.ue-trainings li { display: flex; gap: .3em; }
.t-auf { display: flex; flex: 1; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .1em 1em; min-width: 0; min-height: 44px; padding: .45em .8em; color: inherit; text-align: left; background: var(--ue-karte); border: 1px solid var(--ue-karte-rand); border-radius: 10px; }
.t-auf:hover { background: rgb(var(--fg) / .12); }
.t-auf[aria-current="true"] { border-color: var(--ue-hervor); }
.t-auf b { min-width: 0; text-wrap: balance; overflow-wrap: anywhere; }
.t-auf span { color: var(--text2); font-size: var(--ue-neben); font-variant-numeric: tabular-nums; white-space: nowrap; }
.t-weg { display: grid; flex: none; place-items: center; width: 44px; min-height: 44px; padding: 0; color: var(--text2); background: rgb(var(--fg) / .06); border: 0; border-radius: 10px; }
.t-weg:hover { color: var(--weiss); background: rgb(var(--fg) / .16); }
.t-weg svg { width: 20px; height: 20px; }
.ue-rueck { display: flex; flex-wrap: wrap; align-items: center; gap: .4em .8em; margin-top: .6em; color: var(--text2); }
@media (max-width: 900px), (max-height: 560px) {
  .p-zeit { display: flex; align-items: baseline; gap: .6em; }
  .p-zeit b { display: inline; }
  .ue-liste .p-notiz, .ue-liste .p-notiztext { grid-column: 1 / -1; }
}

@media (max-width: 900px), (max-height: 560px) {
  .ue-kopf { padding-bottom: .2em; }
  .ue-unter p { font-size: 1.06em; }
  .ue-liste li { grid-template-columns: minmax(0, 1fr) auto; }
  .p-zeit { grid-column: 1 / -1; }
}

@media (max-height: 560px) {
  .ue, body.ue-fenster { --ue-l: calc(min(50vw, 460px) + var(--links)); }
  body.ue-fenster:not(.ue-voll) #szene { top: var(--ue-frei-oben, 0px); height: calc(100% - var(--ue-frei-oben, 0px) - var(--ue-frei-unten, 0px)); }
  .ue-unter { box-sizing: border-box; width: 100%; max-width: none; min-height: 4.2em; margin: 0; padding: .25em .6em .3em; border-radius: 0; }
  .ue:not(.voll) .ue-unter:has(p:empty) { visibility: visible; background: var(--nacht); }
  .ue-reihentitel { font-size: 1.28em; }
  .ue-reihentitel span:first-child { display: none; }
  .ue-schrittblock { margin-top: .3em; padding-bottom: .4em; }
  .ue-kopf { flex-wrap: nowrap; gap: .5em; }
  .ue-reiter button { padding: 0 .65em; }
  .ue-zahl { display: none; }
  .ue-blatt:modal { inset: 0; width: 100%; height: 100dvh; max-height: none; border-radius: 0; animation: none; }
  .ue-blattkopf { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); }
  .ue-fragen { padding-top: calc(var(--oben) + .5em); padding-bottom: .4em; }
  .f-haupt { gap: .5em; }
  .ue-blattfuss { padding-top: .35em; padding-bottom: calc(var(--unten) + .35em); }
}

@media (max-width: 640px) {
  .ue-kopf { gap: .4em; }
  .ue-reiter { flex: 1; }
  .ue-werkzeug { flex-basis: 100%; }
  .ue:not([data-ansicht="liste"]) .ue-werkzeug { display: none; }
  .ue-einreichknopf { justify-content: center; width: 44px; padding: 0; }
  .ue-einreichknopf span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .ue-suche { max-width: none; }
  .ue-kat > header p { display: none; }
  .ue-chips { flex: 1 1 100%; flex-wrap: nowrap; margin-inline: calc(-1 * (var(--links) + var(--rand))); padding-inline: calc(var(--links) + var(--rand)); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
  .ue-chips::-webkit-scrollbar { display: none; }
  .ue-chip, .ue-chipweg { flex: none; }
  .ue-vorlagenwahl { flex-direction: column; gap: .4em; }
  .ue-vorlagenwahl .ue-seg { flex-wrap: nowrap; margin-inline: -.9em; padding-inline: .9em; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
  .ue-vorlagenwahl .ue-seg::-webkit-scrollbar { display: none; }
  .ue-vorlagenwahl .ue-seg button { flex: none; }
}

@media (max-width: 520px) {
  .ue-kopf { font-size: 16px; }
  .ue-reiter button { padding: 0 .5em; }
  .ue-zahl { display: none; }
  .ue-pack { grid-template-columns: minmax(0, 1fr); }
  .ue-karte { padding-inline: .7em; }
  .k-fakten { column-gap: .5em; }
  .ue-liste li:not(.p-block) { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "zeit knoepfe" "titel titel"; }
  .p-zeit { grid-area: zeit; grid-column: auto; }
  .p-titel { grid-area: titel; padding-inline: 0; }
  .p-knoepfe { grid-area: knoepfe; }
}

@media (min-height: 700px) and (orientation: landscape) {
  .ue-schrittblock { position: sticky; top: 0; z-index: 2; }
}

@media (orientation: portrait) {
  body.ue-fenster { --ue-bild: min(56.25vw, 40dvh); }
  body.ue-fenster #szene { left: 0; top: var(--ue-kopf, 3.4rem); width: 100%; height: var(--ue-bild); }
  body.ue-fenster.ue-voll #szene { top: var(--ue-frei-oben, 0px); height: calc(100% - var(--ue-frei-oben, 0px) - var(--ue-frei-unten, 0px)); }
  .ue[data-ansicht="detail"] .ue-inhalt { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .ue-buehne { grid-row: 1; }
  .ue-bildflaeche { flex: none; height: var(--ue-bild); }
  .ue:not(.voll) .ue-bildflaeche { display: block; height: auto; padding-top: var(--ue-bild); }
  .ue:not(.voll) .ue-unter { box-sizing: border-box; max-width: none; min-height: 4em; margin: 0; padding: .2em var(--rand) .3em; background: var(--nacht); border-radius: 0; }
  .ue:not(.voll) .ue-unter p { font-size: 1em; }
  .ue:not(.voll) .ue-unter:has(p:empty) { visibility: visible; }
  .ue-text { grid-row: 2; padding-right: calc(var(--rechts) + var(--rand)); border-right: 0; }
  .ue-ohneszene { grid-row: 1; padding-block: .6em; border-bottom: 1px solid var(--linie); }
  .ue:not(.voll) .ue-mehr { top: calc(100% + .3em); bottom: auto; }
}

@media (max-width: 400px) {
  .ue-kopf { font-size: 15px; column-gap: .3em; }
  .ue-reiter { gap: .2em; }
  .ue-reiter button { padding: 0 .4em; }
}

@media (max-width: 340px) {
  .ue-kopf { font-size: 14px; }
  .ue-reiter button { padding: 0 .3em; }
}

@media (orientation: portrait) and (max-width: 520px) {
  .ue-reihentitel { font-size: 1.4em; }
  .ue-reihentitel span:first-child { display: none; }
  .ue-regler { padding-top: .1em; padding-bottom: calc(var(--unten) + .3em); }
  .ue-regel { flex-wrap: wrap !important; }
  .ue-balken { order: -1 !important; flex: 0 0 100% !important; height: 20px !important; padding: 8px 0 !important; }
  .ue-mehrknopf { margin-left: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .ue-blatt:modal { animation: none; }
  .ue.laedt .ue-kopf { animation: none; background-position: 50% 100%, 0 0, 0 0; }
  .k-mehr { transform: none !important; }
}

@media print {
  @page { size: A4; margin: 13mm 13mm 14mm; }
  html, body { position: static !important; overflow: visible !important; height: auto; background: #fff !important; color: #111; font-size: 11.2pt; user-select: text; }
  #szene, #ui > :not(.ue), .ue > :not(.ue-druck) { display: none !important; }
  #ui { position: static; }
  .ue { position: static; display: block; color: #111; background: #fff; font-size: 11.2pt; line-height: 1.36; }
  .ue-druck { display: block; }
  .ue-druck h1 { margin: .1em 0 0; font-size: 22pt; line-height: 1.1; color: #11338a; }
  .ue-druck h2 { margin: .05em 0 0; font-size: 19pt; line-height: 1.12; color: #11338a; text-wrap: balance; }
  .ue-druck h3 { margin: .7em 0 .1em; font-size: 11.4pt; color: #2358cd; break-after: avoid; }
  .ue-druck p { margin: 0; text-wrap: pretty; }
  .ue-druck ul, .ue-druck ol { margin: 0; padding-left: 1.15em; }
  .ue-druck li + li { margin-top: .12em; }
  .d-plan { break-after: page; }
  .d-plan table { width: 100%; margin-top: 1.2em; border-collapse: collapse; }
  .d-plan th, .d-plan td { padding: .42em .5em .42em 0; text-align: left; vertical-align: top; border-bottom: .5pt solid #bbb; }
  .d-plan th { font-weight: 700; }
  .d-plan .d-block th { padding-top: 1em; font-size: .85em; text-transform: uppercase; letter-spacing: .04em; color: #4e5b72; }
  .d-plan td:first-child { width: 8.5em; white-space: nowrap; }
  .d-meta { color: #3d4a60; font-size: 10.4pt; }
  .d-blatt { break-before: auto; break-after: page; }
  .d-blatt:last-child { break-after: auto; }
  .d-blatt > header > p:first-child { color: #3d4a60; font-size: 10pt; }
  .d-oben { display: grid; grid-template-columns: 54% minmax(0, 1fr); gap: 5mm; margin-top: 3mm; align-items: start; }
  .d-oben h3:first-child { margin-top: 0; }
  .d-kurz { font-size: 11.6pt; font-weight: 600; }
  .d-oben figure { margin: 0; }
  .ue-druck .sk-legende { font-size: 10pt; }
  .ue-druck .sk-z { font-size: 8.8px; }
  .ue-druck .sk-f { font-size: 9.4px; }
  .ue-druck .d-coach { margin-top: 2.5mm; padding: 2mm 3mm 2.4mm; background: #fff6d6; border: .6pt solid #c79a12; border-radius: 2mm; -webkit-print-color-adjust: exact; print-color-adjust: exact; break-inside: avoid; }
  .ue-druck .d-coach h3 { margin: 0 0 .1em; color: #11338a; }
  .ue-druck .d-material { display: flex; flex-wrap: wrap; gap: 1mm 3.5mm; padding: 0; list-style: none; }
  .ue-druck .d-material li { display: inline-flex; align-items: center; gap: 1mm; margin: 0; }
  .d-material .mat-icon { color: #2358cd; }
  .d-plan h3 { margin-top: 1.2em; }
  .d-spalten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 6mm; margin-top: 1mm; }
}

.skizze { display: block; width: 100%; height: auto; font-family: Barlow, Arial, sans-serif; }
.sk-z { font-size: 10.5px; font-weight: 600; fill: #15213a; stroke: rgb(239 244 250 / .85); stroke-width: 2.4px; stroke-linejoin: round; paint-order: stroke; }
.sk-f { font-size: 10.5px; font-weight: 700; fill: #fff; }
.sk-f.c { fill: #1a42a8; }
.sk-lauf { stroke: #15213a; stroke-width: .9; stroke-dasharray: 3 2; }
.sk-ball { stroke: #b9471a; stroke-width: .9; }
.ue-loop[hidden] { display: none; }

body.ue-kino #szene { top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; }
body.ue-kino .ue.voll .ue-buehne { position: fixed; inset: 0; z-index: 3; }
body.ue-kino .ue.voll .ue-vollleiste { position: absolute; top: 0; left: 0; right: 0; z-index: 1; padding-bottom: 1.4em; background: linear-gradient(rgb(var(--nacht-rgb) / .9) 55%, transparent); transition: opacity .25s; }
body.ue-kino .ue-volltipp, body.ue-kino .ue.voll .ue-takte { display: none; }
body.ue-kino .ue.voll .ue-takte + .ue-unter { display: block; }
body.ue-kino .ue.voll .ue-bildflaeche { position: absolute; inset: 0; justify-content: flex-end; align-items: center; height: auto !important; padding: 0 calc(var(--rechts) + 1em) calc(var(--unten) + .8em) calc(var(--links) + 1em); }
body.ue-kino .ue.voll .ue-unter { box-sizing: border-box; width: auto; max-width: min(40em, 100%); min-height: 0; margin: 0; padding: .25em .8em .3em; background: rgb(var(--nacht-rgb) / .8); border-radius: 10px; transform: translateY(calc(var(--unten) - 4.4em)); transition: transform .25s; }
body.ue-kino.ue-ruhig .ue.voll .ue-unter { transform: none; }
body.ue-kino .ue.voll .ue-unter p { font-size: 1.05em; }
body.ue-kino .ue.voll .ue-regler { position: absolute; left: 0; right: 0; bottom: 0; padding-top: 1.2em; background: linear-gradient(transparent, rgb(var(--nacht-rgb) / .9) 45%); transition: opacity .25s; }
body.ue-kino .ue-regel { flex-wrap: nowrap !important; }
body.ue-kino .ue-balken { order: 0 !important; flex: 1 1 auto !important; min-width: 2em; height: 44px !important; padding: 20px 0 !important; }
body.ue-kino.ue-ruhig .ue-vollleiste, body.ue-kino.ue-ruhig .ue-regler { opacity: 0; }
body.ue-kino.ue-ruhig .ue-vollleiste, body.ue-kino.ue-ruhig .ue-vollleiste *, body.ue-kino.ue-ruhig .ue-regler, body.ue-kino.ue-ruhig .ue-regler * { pointer-events: none !important; }
@media (orientation: portrait) {
  body.ue-kino { --oben: env(safe-area-inset-right); --rechts: env(safe-area-inset-bottom); --unten: env(safe-area-inset-left); --links: env(safe-area-inset-top); inset: auto; top: 0; left: 0; width: 100dvh; height: 100vw; transform-origin: 0 0; transform: translateX(100vw) rotate(90deg); }
  body.ue-kino #ui { height: 100%; }
}
@media print {
  .ue-druck .d-notiz { margin-top: 2.5mm; padding: 2mm 3mm 2.4mm; border: .6pt solid #a9b6c9; border-radius: 2mm; break-inside: avoid; }
  .ue-druck .d-notiz h3 { margin: 0 0 .1em; color: #11338a; }
  .d-plan th small { display: block; margin-top: .15em; color: #3d4a60; font-size: .88em; font-weight: 400; }
}