:root { --sz-frame: #FFFFFF; --sz-edge: color-mix(in srgb, #1B2B5A 15%, transparent); --sz-karten-schatten: 0 18px 40px -16px color-mix(in srgb, #1B2B5A 50%, transparent); --weg-strich: rgba(255, 255, 255, .8); }
html[data-theme="dark"] { --sz-frame: #1B2B5A; --sz-edge: color-mix(in srgb, #F3EFE3 20%, transparent); --sz-karten-schatten: 0 18px 40px -14px rgba(3, 7, 20, .85); --weg-strich: rgba(15, 23, 48, .55); }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) { --sz-frame: #1B2B5A; --sz-edge: color-mix(in srgb, #F3EFE3 20%, transparent); --sz-karten-schatten: 0 18px 40px -14px rgba(3, 7, 20, .85); --weg-strich: rgba(15, 23, 48, .55); }
}
.weg figcaption { margin-top: 14px; font-size: .86rem; line-height: 1.45; color: var(--ink-2); }
.weg figcaption .illu { margin-right: 8px; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--control-line, var(--ink-2)); color: var(--ink); }
.weg { margin: 0; min-width: 0; }
.weg-karte { container-type: inline-size; max-width: 600px; padding: 22px 20px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lg); }
.weg-feld { position: relative; }
.weg-linie { display: none; }
.weg-liste { position: relative; display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.weg-liste::before { content: ""; position: absolute; left: 17px; top: 22px; bottom: 22px; width: 10px; border-radius: 5px; background: var(--accent); }
.weg-liste li { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; align-items: center; min-height: 44px; padding-bottom: 16px; }
.weg-liste li:last-child { padding-bottom: 0; }
.weg-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--sz-frame); border: 2.5px solid var(--ink); color: var(--ink); }
.weg-ic svg { width: 56%; height: 56%; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.weg-aktiv .weg-ic { background: var(--accent); border-color: var(--ink); color: var(--on-accent); }
.weg-wahl .weg-ic { border-style: dashed; }
.weg-txt { display: grid; gap: 1px; min-width: 0; }
.weg-txt small { font-size: .7rem; font-weight: 700; letter-spacing: .14em; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.weg-txt b { font-size: 1.02rem; line-height: 1.2; font-weight: 800; letter-spacing: -0.012em; color: var(--ink); }
.weg-txt i { font-style: normal; font-size: .82rem; line-height: 1.3; color: var(--ink-2); }
@container (min-width: 460px) {
  .weg-feld { height: 70cqw; }
  .weg-linie { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  .weg-linie .bahn { fill: none; stroke: var(--accent); stroke-width: 2.3; stroke-linecap: round; }
  .weg-linie .mitte { fill: none; stroke: var(--weg-strich); stroke-width: .34; stroke-dasharray: 1.5 1.5; }
  .weg-liste { position: static; display: block; }
  .weg-liste::before { display: none; }
  .weg-liste li { position: absolute; display: block; width: 35cqw; min-height: 0; padding: 0; left: calc(var(--x) * 1cqw - 4.5cqw); top: calc(var(--y) * 1cqw - 4.5cqw); }
  .weg-ic { width: 9cqw; height: 9cqw; margin-bottom: 1.6cqw; }
  .weg-1 { --x: 20; --y: 7; } .weg-2 { --x: 60; --y: 7; }
  .weg-3 { --x: 60; --y: 31; } .weg-4 { --x: 20; --y: 31; }
  .weg-5 { --x: 20; --y: 55; } .weg-6 { --x: 60; --y: 55; }
}
@media (forced-colors: active) { .weg-ic { border: 1px solid CanvasText; } }
.wg { margin: 0; min-width: 0; }
.wg-karte { container-type: inline-size; max-width: 600px; padding: 14px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lg); }
.wg-feld { position: relative; aspect-ratio: 100 / 76; --f: max(10px, 2.15cqw); font-size: var(--f); line-height: 1.25; color: var(--ink); }
.wg-feld svg { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.wg figcaption { margin-top: 14px; font-size: .86rem; line-height: 1.45; color: var(--ink-2); }
.wg figcaption .illu { margin-right: 8px; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--control-line, var(--ink-2)); color: var(--ink); }
.wg-k { position: absolute; z-index: 2; padding: 1.8cqw 2cqw; border-radius: 2cqw; background: var(--sz-frame); border: 1px solid var(--sz-edge); box-shadow: var(--sz-karten-schatten); }
.wg-kt { display: flex; align-items: center; gap: 1.2cqw; margin: 0; font-weight: 700; white-space: nowrap; }
.wg-kt svg { flex: none; width: 1.5em; height: 1.5em; stroke-width: 1.8; color: var(--accent-ink); }
.wg-zahl { margin-left: auto; min-width: 1.7em; padding: .1em .4em; border-radius: .5em; text-align: center; font-weight: 800; background: var(--accent); color: var(--on-accent); }
.wg-chip { display: inline-block; padding: .22em .7em; border-radius: 999px; font-weight: 700; white-space: nowrap; color: var(--ink); background: color-mix(in srgb, var(--accent) 22%, var(--sz-frame)); border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--sz-frame)); }
.wg-chip-akt { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.wg-kl { display: block; font-size: .86em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.wg-auto .karo { stroke-width: 1.5; }
.wg-auto .fein { stroke-width: 1; opacity: .62; }
.wg-auto .boden { stroke-width: 1; stroke-dasharray: 2 3; opacity: .5; }
.wg-auto .mk { fill: var(--accent); stroke: var(--sz-frame); stroke-width: 1.2; }
.wg-auto .mk-ring { stroke: var(--accent); stroke-width: 1; opacity: .7; }
.wg1 .wg-feld { background-image: radial-gradient(circle, color-mix(in srgb, var(--ink) 16%, transparent) 1px, transparent 1.4px); background-size: 4cqw 4cqw; background-position: 2cqw 2cqw; border-radius: 10px; }
.wg1 .wg-auto { position: absolute; left: 12%; top: 13cqw; width: 76%; height: auto; overflow: visible; }
.wg1 .wg-linien { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; color: var(--accent-ink); stroke-width: .4; }
.wg1 .wg-l-schmal { display: none; }
.wg1 .wg-k-stand { left: 3cqw; top: 3cqw; display: grid; gap: .9cqw; justify-items: start; }
.wg1 .wg-tag { position: absolute; right: 3cqw; top: 4cqw; font-size: .86em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); background: var(--surface); padding: .1em .5em; border-radius: .4em; }
.wg1 .wg-k-fotos { left: 3cqw; top: 52cqw; width: 30.5cqw; }
.wg1 .wg-k-fotos .wg-kt { gap: .9cqw; }
.wg1 .wg-k-kva { left: 34.5cqw; top: 52cqw; width: 31cqw; display: grid; gap: 1.2cqw; justify-items: start; }
.wg1 .wg-k-rech { left: 66.5cqw; top: 52cqw; width: 30.5cqw; display: grid; gap: .6cqw; justify-items: start; }
.wg-kt-um { white-space: normal; align-items: flex-start; }
.wg-th { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5cqw; margin-top: 1.5cqw; }
.wg-th img { width: 100%; height: auto; border-radius: 1.2cqw; }
.wg-bl { margin-top: .6cqw; font-size: .9em; color: var(--ink-2); }
.wg-betrag { font-size: 1.45em; font-weight: 800; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
@container (max-width: 459px) {
  .wg1 .wg-feld { aspect-ratio: 100 / 88; }
  .wg1 .wg-l-breit { display: none; } .wg1 .wg-l-schmal { display: block; }
  .wg1 .wg-k-fotos { width: 45cqw; }
  .wg1 .wg-k-kva { left: 51cqw; width: 46cqw; }
  .wg1 .wg-k-kva .wg-chip { display: none; }
  .wg1 .wg-k-rech { left: 51cqw; width: 46cqw; top: auto; bottom: 2cqw; }
}
@container (max-width: 459px) { .wg1 .wg-auto { top: 15cqw; } }
.wg-ic { flex: none; width: 1.5em; height: 1.5em; stroke-width: 1.8; }
.wg-sub { font-size: .9em; color: var(--ink-2); }
.wg-gross { font-size: 1.9em; line-height: 1; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.wg-ab .wg-feld { border-radius: 10px; overflow: hidden; background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }
.wg-ab .wg-plan { position: absolute; inset: 0; width: 100%; height: 100%; }
.wg-ab .wg-plan .str { stroke: var(--surface); stroke-width: 3.4; stroke-linecap: butt; }
.wg-ab .wg-plan .blk { stroke: none; fill: color-mix(in srgb, var(--ink) 7%, transparent); }
.wg-ab .wg-plan .weg1 { stroke: var(--accent); stroke-width: 1.5; }
.wg-ab .wg-plan .weg2 { stroke: var(--ink); stroke-width: .7; stroke-dasharray: 1.4 1.6; opacity: .75; }
.wg-pt { position: absolute; z-index: 2; display: flex; align-items: center; gap: 1.2cqw; transform: translate(-4cqw, -50%); white-space: nowrap; font-weight: 700; }
.wg-pt > span:first-child { display: grid; place-items: center; width: 8cqw; height: 8cqw; border-radius: 50%; background: var(--sz-frame); border: 2px solid var(--ink); color: var(--ink); }
.wg-pt > span:first-child svg { width: 58%; height: 58%; stroke-width: 1.8; }
.wg-pt-lkw > span:first-child { background: var(--accent); color: var(--on-accent); }
.wg-pt-klein > span:first-child { width: 4.4cqw; height: 4.4cqw; border-width: 2px; }
.wg-pt-lkw { left: 13cqw; top: 60cqw; }
.wg-pt-ort { left: 58cqw; top: 26cqw; }
.wg-pt-klein { left: 84cqw; top: 52cqw; flex-direction: row-reverse; transform: translate(calc(-100% + 2.2cqw), -50%); }
.wg-pt .wg-name { padding: .2em .6em; border-radius: .5em; background: var(--sz-frame); border: 1px solid var(--sz-edge); }
.wg-ab .wg-k-uhr { left: 3cqw; top: 3cqw; display: grid; grid-template-columns: 13cqw auto; align-items: center; gap: 2cqw; }
.wg-uhr { width: 100%; height: auto; color: var(--ink); }
.wg-uhr .rand { stroke-width: 1.6; fill: var(--sz-frame); }
.wg-uhr .strich { stroke-width: 1; opacity: .55; }
.wg-uhr .std { stroke-width: 2.2; }
.wg-uhr .min { stroke-width: 1.5; stroke: var(--accent-ink); }
.wg-uhr .mitte { fill: currentColor; stroke: none; }
.wg-ab .wg-uhr-txt { display: grid; gap: .5cqw; justify-items: start; }
.wg-ab .wg-k-stand { right: 3cqw; bottom: 3cqw; display: grid; gap: .9cqw; justify-items: start; }
.wg-gu .wg-feld { --qx: 3cqw; --qw: 33cqw; --bx: 46cqw; }
.wg-gu .wg-q { left: var(--qx); width: var(--qw); transform: translateY(-50%); display: flex; align-items: center; gap: 1.2cqw; font-weight: 700; white-space: nowrap; }
.wg-gu .wg-q svg { color: var(--accent-ink); }
.wg-gu .wg-pf { position: absolute; z-index: 1; left: calc(var(--qx) + var(--qw)); width: calc(var(--bx) - var(--qx) - var(--qw)); height: 0; border-top: 2px dashed var(--accent-ink); }
.wg-gu .wg-pf::after { content: ""; position: absolute; right: -1px; top: -1px; width: 1.6cqw; height: 1.6cqw; border-top: 2px solid var(--accent-ink); border-right: 2px solid var(--accent-ink); transform: translateY(-50%) rotate(45deg); transform-origin: center; margin-top: -1px; }
.wg-gu .r1 { top: 24.5cqw; } .wg-gu .r2 { top: 40.5cqw; } .wg-gu .r3 { top: 55cqw; }
.wg-blatt { position: absolute; z-index: 2; left: var(--bx); right: 4cqw; top: 3cqw; bottom: 3cqw; padding: 2.4cqw; border-radius: 1.6cqw; background: var(--sz-frame); border: 1px solid var(--sz-edge); box-shadow: var(--sz-karten-schatten); }
.wg-blatt-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 1cqw 1.6cqw; height: 11cqw; align-content: center; border-bottom: 1px solid var(--line); }
.wg-blatt-kopf b { font-size: 1.2em; font-weight: 800; letter-spacing: -0.01em; }
.wg-fach { position: absolute; left: 2.4cqw; right: 2.4cqw; border-radius: 1.2cqw; border: 1.5px dashed color-mix(in srgb, var(--accent-ink) 60%, transparent); background: color-mix(in srgb, var(--accent) 7%, var(--sz-frame)); display: flex; align-items: center; gap: 1.6cqw; padding: 1.2cqw 1.6cqw; }
.wg-fach.f1 { top: 16cqw; height: 11cqw; } .wg-fach.f2 { top: 29cqw; height: 17cqw; } .wg-fach.f3 { top: 48cqw; height: 8cqw; }
.wg-kachel { flex: none; height: 100%; aspect-ratio: 4 / 3; border-radius: .9cqw; display: grid; place-items: center; background: color-mix(in srgb, var(--ink) 12%, var(--sz-frame)); color: var(--ink-2); }
.wg-kachel svg { width: 46%; height: 46%; stroke-width: 1.6; }
.wg-fach .wg-auto { height: 100%; width: auto; max-width: 100%; margin-inline: auto; overflow: visible; }
.wg-balken { display: grid; gap: .9cqw; flex: 1; }
.wg-balken i { display: block; height: 1.1cqw; border-radius: 1cqw; background: color-mix(in srgb, var(--ink) 16%, var(--sz-frame)); }
.wg-balken i:last-child { width: 62%; }
.wg-stempel { position: absolute; right: 2.4cqw; bottom: 2.6cqw; transform: rotate(-5deg); padding: .35em .8em; border-radius: .6em; border: 2px solid var(--accent-ink); color: var(--ink); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; background: var(--sz-frame); }
@container (max-width: 459px) { .wg-gu .wg-feld { --qx: 1cqw; --qw: 41cqw; --bx: 48cqw; } .wg-gu .wg-blatt { right: 1cqw; padding: 2cqw; } .wg-gu .wg-q svg { display: none; } .wg-fach { left: 2cqw; right: 2cqw; } .wg-stempel { right: 2cqw; font-size: .92em; } }
.wg-ka .wg-ruecken { position: absolute; left: 6cqw; right: 6cqw; top: 25cqw; bottom: 3cqw; border-radius: 2cqw; background: color-mix(in srgb, var(--accent) 34%, var(--surface)); }
.wg-ka .wg-ruecken::before { content: ""; position: absolute; right: 0; top: -5cqw; width: 20cqw; height: 7cqw; border-radius: 2cqw 2cqw 0 0; background: inherit; }
.wg-dok { position: absolute; z-index: 1; width: 35cqw; height: 40cqw; padding: 1.8cqw 2cqw; border-radius: 1.4cqw; background: var(--sz-frame); border: 1px solid var(--sz-edge); box-shadow: 0 6px 16px -8px color-mix(in srgb, #0F1730 55%, transparent); display: grid; align-content: start; gap: 1.1cqw; }
.wg-dok b { font-weight: 800; white-space: nowrap; }
.wg-dok .wg-frei { justify-self: start; display: inline-flex; align-items: center; gap: .4em; font-size: .9em; color: var(--ink-2); white-space: nowrap; }
.wg-dok .wg-frei svg { width: 1.3em; height: 1.3em; stroke-width: 2; color: var(--accent-ink); }
.wg-dok .wg-balken { margin-top: .6cqw; width: 42%; }
.wg-dok.d1 { left: 8cqw; top: 4cqw; transform: rotate(-3deg); }
.wg-dok.d2 { left: 27cqw; top: 9cqw; }
.wg-dok.d3 { left: 46cqw; top: 14cqw; transform: rotate(3deg); }
.wg-ka .wg-front { position: absolute; z-index: 2; left: 4cqw; right: 4cqw; top: 37cqw; bottom: 2cqw; padding: 2.6cqw 3cqw; border-radius: 2cqw; background: var(--sz-frame); border: 1px solid var(--sz-edge); border-top: 3px solid var(--accent); box-shadow: var(--sz-karten-schatten); display: grid; align-content: space-between; gap: 1cqw; }
.wg-ka .wg-front p { margin: 0; font-weight: 600; text-wrap: balance; }
.wg-ka .wg-zst { display: flex; align-items: center; gap: 1.6cqw; }
.wg-leiste { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1cqw; }
.wg-leiste i { height: 1.4cqw; border-radius: 1cqw; background: color-mix(in srgb, var(--ink) 16%, var(--sz-frame)); }
.wg-leiste i.voll { background: var(--accent); }
.wg-enden { display: flex; justify-content: space-between; font-size: .9em; color: var(--ink-2); }
@container (max-width: 459px) { .wg-dok .wg-frei { display: none; } .wg-ka .wg-front { top: 36cqw; padding: 2cqw 2.4cqw; } }
@container (max-width: 459px) { .wg-stempel { font-size: .82em; letter-spacing: 0; padding: .3em .5em; transform: rotate(-3deg); } }
@container (max-width: 459px) { .wg-dok { padding-top: 1.3cqw; } .wg-dok.d1 { top: 1.5cqw; } .wg-dok.d2 { top: 9cqw; } .wg-dok.d3 { top: 16.5cqw; } }