/* Tournament Bracket – eigene Gestaltung. Ebenen: reset, base, komp, tool, ansicht, dlg, druck. Hell/Dunkel ueber Variablen. */
@layer reset, base, komp, tool, ansicht, dlg, druck;

@font-face { font-family: Geist; src: url("/font/geist-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Geist; src: url("/font/geist-latin-ext-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Geist Mono"; src: url("/font/geist-mono-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --bg: #f4f2ec; --flaeche: #fffdf8; --flaeche2: #ece9df; --tinte: #14172b; --gedaempft: #565b73; --linie: #d6d1c3; --linie2: #c4beac;
  --akzent: #e4572e; --akzent-text: #b23d17; --akzent-weich: #ffe3d8; --blau: #3550d8; --gold: #f2b01e; --gruen: #1f8a5b;
  --primaer: #14172b; --primaer-text: #fffdf8; --fokus: #3550d8;
  --t0: #ffe3d8; --t1: #dfe7ff; --t2: #dcf2e4; --t3: #fff0c4; --t4: #f0dff9; --t5: #d6eff3;
  --schatten: 0 1px 2px rgb(20 23 43 / .06), 0 8px 24px -12px rgb(20 23 43 / .18);
  --radius: 14px; --rand: 20px; --kopf-h: 64px;
  --schrift: Geist, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --ease: cubic-bezier(.2, .7, .2, 1); --feder: cubic-bezier(.34, 1.4, .5, 1);
  color-scheme: light;
}
:root[data-theme="dark"] { color-scheme: dark; --bg: #0e1120; --flaeche: #171b30; --flaeche2: #1e2340; --tinte: #ecedf7; --gedaempft: #a1a6c2; --linie: #2e3454; --linie2: #3d4468; --akzent: #ff7a4d; --akzent-text: #ff9a76; --akzent-weich: #3a2420; --blau: #8fa2ff; --gold: #ffc548; --gruen: #5fd29c; --primaer: #ecedf7; --primaer-text: #0e1120; --fokus: #8fa2ff; --t0: #3b2623; --t1: #23294f; --t2: #1f3a31; --t3: #3d3520; --t4: #38274a; --t5: #1d3a40; --schatten: 0 1px 2px rgb(0 0 0 / .3), 0 8px 24px -12px rgb(0 0 0 / .6); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: #0e1120; --flaeche: #171b30; --flaeche2: #1e2340; --tinte: #ecedf7; --gedaempft: #a1a6c2; --linie: #2e3454; --linie2: #3d4468; --akzent: #ff7a4d; --akzent-text: #ff9a76; --akzent-weich: #3a2420; --blau: #8fa2ff; --gold: #ffc548; --gruen: #5fd29c; --primaer: #ecedf7; --primaer-text: #0e1120; --fokus: #8fa2ff; --t0: #3b2623; --t1: #23294f; --t2: #1f3a31; --t3: #3d3520; --t4: #38274a; --t5: #1d3a40; --schatten: 0 1px 2px rgb(0 0 0 / .3), 0 8px 24px -12px rgb(0 0 0 / .6); } }

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; interpolate-size: allow-keywords; scroll-padding-top: calc(var(--kopf-h) + 12px); }
  body { min-height: 100dvh; line-height: 1.55; -webkit-font-smoothing: antialiased; }
  img, svg, video { display: block; max-width: 100%; }
  button, input, select, textarea { font: inherit; color: inherit; }
  button { cursor: pointer; }
  a { color: inherit; }
  ul[class], ol[class] { list-style: none; padding: 0; }
  [hidden] { display: none !important; }
  .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  table { border-collapse: collapse; }
}

@layer base {
  body { font-family: var(--schrift); font-size: 1rem; background: var(--bg); color: var(--tinte); }
  h1, h2, h3, h4 { line-height: 1.12; letter-spacing: -.02em; font-weight: 700; text-wrap: balance; }
  h1 { font-size: clamp(2rem, 1.2rem + 3.4vw, 3.6rem); letter-spacing: -.035em; font-weight: 750; }
  h2 { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); margin-bottom: .6em; }
  h3 { font-size: 1.15rem; }
  p { text-wrap: pretty; }
  :focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; border-radius: 6px; }
  ::selection { background: var(--akzent); color: #fff; }
  .skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--primaer); color: var(--primaer-text); padding: .6em 1em; border-radius: 10px; transition: top .2s; }
  .skip:focus { top: 10px; }
  main { display: block; }
  .held, .abschnitt, .werkzeug-abschnitt { width: min(1240px, 100% - 2 * var(--rand)); margin-inline: auto; }
  .ik { width: 1.15em; height: 1.15em; flex: none; }
}

@layer komp {
  /* ----- Kopf ----- */
  .kopf { position: sticky; top: 0; z-index: 40; view-transition-name: kopf; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); border-bottom: 1px solid color-mix(in srgb, var(--linie) 70%, transparent); }
  .kopf-innen { width: min(1240px, 100% - 2 * var(--rand)); margin-inline: auto; height: var(--kopf-h); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .kopf-links { display: flex; align-items: center; gap: 24px; min-width: 0; }
  .logo { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; font-weight: 750; letter-spacing: -.03em; font-size: 1.12rem; white-space: nowrap; border-radius: 10px; }
  .logo-zeichen { width: 34px; height: 34px; flex: none; }
  .lg-l { fill: none; stroke: var(--tinte); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
  .lg-p { fill: var(--akzent); }
  .logo:hover .lg-l { animation: logo-zeichnen .9s var(--ease); }
  .logo:hover .lg-p { animation: pop .5s var(--feder) .5s backwards; transform-origin: 26px 16px; }
  @keyframes logo-zeichnen { from { stroke-dasharray: 60; stroke-dashoffset: 60; } to { stroke-dasharray: 60; stroke-dashoffset: 0; } }
  @keyframes pop { from { scale: 0; } to { scale: 1; } }
  .lang-menu { position: relative; }
  .lang-knopf, .kopf-knopf { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 44px; min-width: 44px; padding-inline: 10px; background: transparent; border: 1px solid transparent; border-radius: 12px; font-weight: 600; font-size: .9rem; transition: background .2s, border-color .2s, scale .15s; }
  .lang-knopf:hover, .kopf-knopf:hover { background: var(--flaeche2); }
  .lang-knopf:active, .kopf-knopf:active { scale: .96; }
  .lang-pfeil { width: 1em; height: 1em; transition: rotate .25s var(--ease); }
  .lang-menu.offen .lang-pfeil { rotate: 180deg; }
  .lang-liste { position: absolute; left: 0; top: calc(100% + 6px); min-width: 176px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 14px; padding: 6px; box-shadow: var(--schatten); list-style: none; opacity: 0; visibility: hidden; translate: 0 -4px; scale: .97; transform-origin: top left; transition: opacity .18s, translate .18s, scale .18s, visibility 0s .18s; }
  .lang-menu.offen .lang-liste { opacity: 1; visibility: visible; translate: 0; scale: 1; transition-delay: 0s; }
  .lang-liste a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border-radius: 10px; text-decoration: none; font-size: .95rem; }
  .lang-liste a:hover { background: var(--flaeche2); }
  .lang-liste .ik { margin-left: auto; color: var(--akzent); }
  .lang-code { font-family: var(--mono); font-size: .78rem; font-weight: 600; color: var(--gedaempft); width: 1.8em; }
  .hauptnav { position: relative; display: none; gap: 2px; padding: 4px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 999px; }
  .hauptnav a { position: relative; z-index: 1; display: inline-flex; align-items: center; height: 36px; padding-inline: 14px; border-radius: 999px; text-decoration: none; font-size: .9rem; font-weight: 600; color: var(--gedaempft); transition: color .2s; white-space: nowrap; }
  .hauptnav a:hover, .hauptnav a[aria-current] { color: var(--tinte); }
  .hauptnav .marke { position: absolute; left: 0; top: 4px; z-index: 0; border-radius: 999px; background: var(--flaeche2); opacity: 0; transition: translate .35s var(--ease), width .35s var(--ease), opacity .2s; }
  .hauptnav .marke.direkt { transition: none; }
  .hauptnav.an .marke { opacity: 1; }
  .hauptnav a[aria-current] { color: var(--tinte); }
  .kopf-rechts { display: flex; align-items: center; gap: 4px; }
  .thema-symbole { position: relative; width: 22px; height: 22px; display: block; }
  .ts { position: absolute; inset: 0; display: grid; place-items: center; transition: rotate .45s var(--ease), scale .45s var(--ease), opacity .3s; rotate: -90deg; scale: .4; opacity: 0; }
  .ts .ik { width: 22px; height: 22px; }
  [data-state="auto"] .ts-auto, [data-state="light"] .ts-light, [data-state="dark"] .ts-dark { rotate: 0deg; scale: 1; opacity: 1; }
  .burger { position: relative; width: 22px; height: 16px; display: block; }
  .burger i { position: absolute; left: 0; width: 100%; height: 2.4px; border-radius: 2px; background: currentColor; transition: translate .3s var(--ease), rotate .3s var(--ease), opacity .2s; }
  .burger i:nth-child(1) { top: 0; } .burger i:nth-child(2) { top: 6.8px; } .burger i:nth-child(3) { top: 13.6px; }
  .menue-offen .burger i:nth-child(1) { translate: 0 6.8px; rotate: 45deg; }
  .menue-offen .burger i:nth-child(2) { opacity: 0; }
  .menue-offen .burger i:nth-child(3) { translate: 0 -6.8px; rotate: -45deg; }
  .menue { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--ease); background: var(--bg); }
  .menue-offen .menue { grid-template-rows: 1fr; border-bottom: 1px solid var(--linie); }
  .menue-innen { overflow: hidden; }
  .menue-nav { width: min(1240px, 100% - 2 * var(--rand)); margin-inline: auto; padding-block: 8px 14px; display: grid; }
  .menue-nav a { display: flex; align-items: center; justify-content: space-between; min-height: 48px; text-decoration: none; font-weight: 600; border-bottom: 1px solid var(--linie); opacity: 0; translate: 0 -6px; transition: opacity .3s, translate .3s var(--ease); }
  .menue-offen .menue-nav a { opacity: 1; translate: 0; }
  .menue-nav a:nth-child(2) { transition-delay: .03s; } .menue-nav a:nth-child(3) { transition-delay: .06s; } .menue-nav a:nth-child(4) { transition-delay: .09s; } .menue-nav a:nth-child(5) { transition-delay: .12s; }
  .menue-nav a[aria-current] { color: var(--akzent-text); }
  @media (max-width: 700px) { .lang-menu { position: static; } .kopf-innen { position: relative; } .lang-liste { left: 0; top: calc(100% - 4px); } }
  /* Kopf auf schmalen Schirmen: nie Ueberlappung. Schriftzug darf notfalls zweizeilig werden, Sprachwahl verliert den Pfeil, darunter faellt der Schriftzug weg (Name steht im aria-label). */
  .logo { min-width: 0; } .logo-text { min-width: 0; }
  @media (max-width: 519px) {
    .kopf-innen { gap: 6px; } .kopf-links { gap: 13px; flex: 1 1 auto; } .kopf-rechts { gap: 0; flex: none; }
    .lang-knopf, .kopf-knopf { min-width: 40px; padding-inline: 8px; } .lang-knopf { gap: 4px; } .lang-pfeil { display: none; }
    .logo { gap: 7px; } .logo-zeichen { width: 30px; height: 30px; }
    .logo-text { white-space: normal; line-height: .98; font-size: .98rem; width: min-content; overflow-wrap: normal; }
  }
  @media (max-width: 399px) { .logo-text { font-size: .9rem; } }
  @media (max-width: 329px) { .logo-text { font-size: .86rem; } .logo { gap: 5px; } }
  @media (min-width: 1200px) { .hauptnav { display: flex; } .menue-knopf, .menue { display: none; } }

  /* ----- Kopfbereich ----- */
  .held { padding-block: clamp(28px, 5vw, 64px) clamp(16px, 3vw, 32px); display: grid; gap: 24px; align-items: center; }
  .held-text { max-width: 760px; }
  .held h1 { margin-bottom: .45em; }
  .held .lead { font-size: clamp(1.05rem, .95rem + .5vw, 1.3rem); color: var(--gedaempft); max-width: 62ch; }
  .held--text { padding-block: 40px 8px; }
  .held-baum { display: none; width: 100%; max-width: 420px; justify-self: end; overflow: visible; }
  .ht-l { fill: none; stroke: var(--linie2); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
  .ht-s { fill: none; stroke: var(--akzent); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
  .ht-p { fill: var(--gold); }
  @media (min-width: 900px) { .held:not(.held--text) { grid-template-columns: 1.3fr .9fr; } .held-baum { display: block; } }
  @media (prefers-reduced-motion: no-preference) {
    .js .ht-l { stroke-dasharray: 1; stroke-dashoffset: 1; animation: linie-zeichnen 1.1s var(--ease) .15s forwards; }
    .js .ht-s { stroke-dasharray: 1; stroke-dashoffset: 1; animation: linie-zeichnen .7s var(--ease) calc(1.0s + var(--i, 0) * .45s) forwards; }
    .js .ht-p { scale: 0; transform-box: fill-box; transform-origin: center; animation: pop .6s var(--feder) 2.7s forwards; }
  }
  .ht-s.i0 { --i: 0; } .ht-s.i1 { --i: 1; } .ht-s.i2 { --i: 2; } .ht-s.i3 { --i: 3; }
  @keyframes linie-zeichnen { to { stroke-dashoffset: 0; } }
  .versprechen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; padding: 0; list-style: none; }
  .versprechen li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--flaeche); border: 1px solid var(--linie); font-size: .9rem; font-weight: 600; }
  .versprechen .ik { color: var(--akzent); }

  .abschnitt { padding-block: clamp(24px, 4vw, 48px); }
  .abschnitt > h2 { margin-bottom: .7em; }
  .text-block { max-width: 780px; margin-inline: auto; width: min(780px, 100% - 2 * var(--rand)); }
  .text-block p, .text-block ul, .text-block ol, .text-seite p, .text-seite ul { margin-bottom: 1em; }
  .text-block ul, .text-block ol, .text-seite ul { padding-left: 1.3em; }
  .text-block li { margin-bottom: .35em; }
  .text-block a, .text-seite a, .faq-antwort a { color: var(--akzent-text); text-underline-offset: 3px; }
  .tbl { overflow-x: auto; margin-bottom: 1.2em; } .text-block table { width: 100%; font-size: .93rem; }
  .text-block th, .text-block td { padding: .55em .8em; border-bottom: 1px solid var(--linie); text-align: left; white-space: nowrap; }
  .text-block thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--gedaempft); }
  .text-seite { max-width: 780px; margin-inline: auto; width: min(780px, 100% - 2 * var(--rand)); }
  .text-seite h2 { font-size: 1.3rem; margin-top: 1.6em; }
  .text-seite address { font-style: normal; margin-bottom: 1em; line-height: 1.7; }

  /* ----- FAQ ----- */
  .faq-liste { max-width: 780px; display: grid; gap: 8px; margin-inline: auto; }
  .faq .abschnitt > h2, .faq > h2 { max-width: 780px; margin-inline: auto; }
  .faq { width: min(780px, 100% - 2 * var(--rand)); }
  .faq-punkt { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); transition: border-color .2s, background .2s; }
  .faq-punkt:hover { border-color: var(--linie2); }
  .faq-punkt summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; min-height: 56px; cursor: pointer; font-weight: 650; border-radius: var(--radius); }
  .faq-punkt summary::-webkit-details-marker { display: none; }
  .faq-pfeil { transition: rotate .3s var(--ease); color: var(--gedaempft); }
  .faq-punkt[open] .faq-pfeil { rotate: 180deg; color: var(--akzent); }
  .faq-antwort { padding: 0 18px 18px; color: var(--gedaempft); }
  .faq-antwort p { max-width: 64ch; }
  @media (prefers-reduced-motion: no-preference) { @supports (interpolate-size: allow-keywords) {
    .faq-punkt::details-content { block-size: 0; overflow-y: clip; transition: block-size .32s var(--ease), content-visibility .32s allow-discrete; }
    .faq-punkt[open]::details-content { block-size: auto; }
  } }

  /* ----- Kacheln (Bento) ----- */
  .bento { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; isolation: isolate; }
  .karte { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 20px; border-radius: 18px; text-decoration: none; background: var(--tint, var(--t0)); min-height: 150px; border: 0; text-align: left; color: inherit; overflow: hidden; }
  .t0 { --tint: var(--t0); --kraeftig: #d4471f; } .t1 { --tint: var(--t1); --kraeftig: #3550d8; } .t2 { --tint: var(--t2); --kraeftig: #1f8a5b; } .t3 { --tint: var(--t3); --kraeftig: #a8700a; } .t4 { --tint: var(--t4); --kraeftig: #8a3fb8; } .t5 { --tint: var(--t5); --kraeftig: #11809a; }
  :root[data-theme="dark"] .t0 { --kraeftig: #ff8a62; } :root[data-theme="dark"] .t1 { --kraeftig: #8fa2ff; } :root[data-theme="dark"] .t2 { --kraeftig: #5fd29c; } :root[data-theme="dark"] .t3 { --kraeftig: #ffc548; } :root[data-theme="dark"] .t4 { --kraeftig: #d79bff; } :root[data-theme="dark"] .t5 { --kraeftig: #52cde8; }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .t0 { --kraeftig: #ff8a62; } :root:not([data-theme="light"]) .t1 { --kraeftig: #8fa2ff; } :root:not([data-theme="light"]) .t2 { --kraeftig: #5fd29c; } :root:not([data-theme="light"]) .t3 { --kraeftig: #ffc548; } :root:not([data-theme="light"]) .t4 { --kraeftig: #d79bff; } :root:not([data-theme="light"]) .t5 { --kraeftig: #52cde8; } }
  .karte.w2 { grid-column: span 2; } .karte.w4 { grid-column: span 4; }
  .karte > * { position: relative; z-index: 1; }
  .k-ikon { color: var(--kraeftig); } .k-ikon .ik { width: 30px; height: 30px; stroke-width: 1.8; }
  .k-titel { font-weight: 700; font-size: 1.05rem; letter-spacing: -.015em; }
  .k-text { color: var(--gedaempft); font-size: .93rem; line-height: 1.45; }
  .k-extern { position: absolute; right: 16px; top: 16px; color: var(--kraeftig); }
  .bento-flaeche { position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; opacity: 0; background: var(--tint, var(--t1)); filter: brightness(.95) saturate(1.1); transition: translate .45s cubic-bezier(.22, .8, .24, 1), width .45s cubic-bezier(.22, .8, .24, 1), height .45s cubic-bezier(.22, .8, .24, 1), opacity .25s; }
  .bento-flaeche.an { opacity: 1; } .bento-flaeche.direkt { transition: none; }
  .bento .karte { background: color-mix(in srgb, var(--tint) 100%, transparent); transition: background .25s; }
  svg.zeichnen path, svg.zeichnen circle, svg.zeichnen rect, svg.zeichnen line, svg.zeichnen polyline { stroke-dasharray: 1; stroke-dashoffset: 0; }
  svg.zeichnen.zeichnet path, svg.zeichnen.zeichnet circle, svg.zeichnen.zeichnet rect, svg.zeichnen.zeichnet line, svg.zeichnen.zeichnet polyline { animation: linie-zeichnen-rueck .9s var(--ease) backwards; }
  @keyframes linie-zeichnen-rueck { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
  @media (max-width: 860px) { .bento { grid-template-columns: repeat(2, 1fr); } .karte.w4 { grid-column: span 2; } .karte { min-height: 130px; } }
  @media (max-width: 520px) { .bento { grid-template-columns: 1fr; } .karte.w2, .karte.w4 { grid-column: auto; } }
  @media (hover: hover) { .karte:hover .k-ikon { scale: 1.06; } .k-ikon { transition: scale .3s var(--feder); } }

  /* ----- Fuss ----- */
  .fuss { margin-top: 48px; border-top: 1px solid var(--linie); background: var(--flaeche); }
  .fuss-innen { width: min(1240px, 100% - 2 * var(--rand)); margin-inline: auto; padding-block: 36px 16px; display: grid; gap: 28px; grid-template-columns: 1.4fr repeat(3, 1fr); }
  .fuss-marke p { margin-top: 12px; color: var(--gedaempft); font-size: .92rem; max-width: 36ch; }
  .fuss-titel { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--gedaempft); margin-bottom: 10px; font-weight: 650; }
  .fuss ul { list-style: none; padding: 0; display: grid; gap: 2px; }
  .fuss li a { display: inline-flex; align-items: center; min-height: 36px; text-decoration: none; font-size: .95rem; }
  .fuss li a:hover { color: var(--akzent-text); text-decoration: underline; text-underline-offset: 3px; }
  .fuss-zeile { width: min(1240px, 100% - 2 * var(--rand)); margin-inline: auto; padding-block: 8px 24px; font-size: .85rem; color: var(--gedaempft); }
  @media (max-width: 860px) { .fuss-innen { grid-template-columns: 1fr 1fr; } .fuss-marke { grid-column: 1 / -1; } }

  /* ----- Knoepfe und Felder ----- */
  .knopf { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 12px; border: 1px solid var(--linie2); background: var(--flaeche); font-weight: 650; font-size: .95rem; text-decoration: none; transition: background .2s, border-color .2s, scale .15s, box-shadow .2s; white-space: nowrap; }
  .knopf:hover { background: var(--flaeche2); }
  .knopf:active { scale: .97; }
  .knopf[disabled] { opacity: .5; pointer-events: none; }
  .knopf--primaer { background: var(--primaer); color: var(--primaer-text); border-color: transparent; }
  .knopf--primaer:hover { background: color-mix(in srgb, var(--primaer) 86%, var(--akzent)); }
  .knopf--gross { min-height: 56px; padding-inline: 28px; font-size: 1.05rem; border-radius: 14px; }
  .knopf--leise { background: transparent; border-color: transparent; color: var(--gedaempft); }
  .knopf--leise:hover { background: var(--flaeche2); color: var(--tinte); }
  .knopf--klein { min-height: 36px; padding-inline: 12px; font-size: .85rem; }
  .knopf--gefahr { background: #c62f2f; color: #fff; border-color: transparent; }
  .knopf--gefahr:hover { background: #a82424; }
  .knopf.laedt::after { content: ""; width: 1em; height: 1em; border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent; animation: dreh .7s linear infinite; }
  @keyframes dreh { to { rotate: 360deg; } }
  .feld { display: grid; gap: 6px; min-width: 0; }
  .feld label, .feld-titel, legend { font-weight: 650; font-size: .9rem; }
  fieldset { border: 0; padding: 0; min-width: 0; }
  legend { padding: 0; margin-bottom: 6px; }
  input[type="text"], input:not([type]), input[inputmode], textarea, select { width: 100%; min-height: 46px; padding: 10px 14px; background: var(--flaeche); border: 1px solid var(--linie2); border-radius: 12px; transition: border-color .2s, box-shadow .2s; }
  textarea { resize: vertical; line-height: 1.5; min-height: 190px; }
  input:hover, textarea:hover, select:hover { border-color: var(--gedaempft); }
  input:focus-visible, textarea:focus-visible, select:focus-visible { outline: none; border-color: var(--fokus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--fokus) 28%, transparent); }
  input[aria-invalid="true"] { border-color: #c62f2f; }
  ::placeholder { color: color-mix(in srgb, var(--gedaempft) 75%, transparent); }
  .auswahl { position: relative; } .auswahl select { appearance: none; padding-right: 40px; } .auswahl .ik { position: absolute; right: 12px; top: 50%; translate: 0 -50%; pointer-events: none; color: var(--gedaempft); }
  .feld-hilfe-text, .hinweis, small { color: var(--gedaempft); font-size: .86rem; line-height: 1.4; }
  .hinweis { padding: 8px 12px; border-radius: 10px; background: var(--akzent-weich); color: var(--tinte); }
  .fehler, .erg-fehler { color: #c62f2f; font-weight: 600; font-size: .93rem; }
  :root[data-theme="dark"] .fehler, :root[data-theme="dark"] .erg-fehler { color: #ff8d8d; }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fehler, :root:not([data-theme="light"]) .erg-fehler { color: #ff8d8d; } }
  .rutteln { animation: rutteln .4s var(--ease); }
  @keyframes rutteln { 20% { translate: -6px 0; } 40% { translate: 5px 0; } 60% { translate: -3px 0; } 80% { translate: 2px 0; } }
  /* Segment: wandernde Markierung */
  .segment { position: relative; display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 4px; background: var(--flaeche2); border-radius: 14px; max-width: 100%; }
  .segment > button { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; padding: 0 14px; background: transparent; border: 0; border-radius: 10px; font-weight: 650; font-size: .92rem; color: var(--gedaempft); transition: color .2s; white-space: nowrap; }
  .segment > button:hover { color: var(--tinte); }
  .segment > button[aria-checked="true"] { color: var(--tinte); }
  .segment > .marke { position: absolute; left: 0; top: 0; z-index: 0; width: 0; height: 0; border-radius: 10px; background: var(--flaeche); box-shadow: 0 1px 3px rgb(20 23 43 / .18); transition: translate .32s var(--ease), width .32s var(--ease), height .32s var(--ease); opacity: 0; }
  .segment.bereit > .marke { opacity: 1; }
  .segment > .marke.direkt { transition: none; }
  .clip { max-width: 14ch; overflow: hidden; text-overflow: ellipsis; }
  /* Schalter */
  .schalter { position: relative; display: inline-flex; align-items: flex-start; gap: 12px; cursor: pointer; min-height: 44px; padding-block: 8px; }
  .schalter input { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
  .sw { position: relative; flex: none; width: 46px; height: 28px; border-radius: 999px; background: var(--linie2); transition: background .25s; margin-top: 1px; }
  .sw::after { content: ""; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .3); transition: translate .3s var(--feder); }
  .schalter input:checked + .sw { background: var(--akzent); } .schalter input:checked + .sw::after { translate: 18px 0; }
  .schalter input:focus-visible + .sw { outline: 3px solid var(--fokus); outline-offset: 2px; }
  .schalter-text { display: grid; gap: 2px; font-weight: 600; font-size: .95rem; } .schalter-text small { font-weight: 400; }
  .schalter--klein { min-height: 36px; font-size: .9rem; }
  /* Zahlenfeld mit Plus/Minus */
  .zahl { display: flex; align-items: stretch; background: var(--flaeche); border: 1px solid var(--linie2); border-radius: 12px; overflow: hidden; transition: border-color .2s, box-shadow .2s, opacity .2s; }
  .zahl:focus-within { border-color: var(--fokus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--fokus) 28%, transparent); }
  .zahl input { border: 0; border-radius: 0; text-align: center; min-width: 0; font-family: var(--mono); font-weight: 650; box-shadow: none !important; background: transparent; }
  .zahl-knopf { flex: none; width: 44px; display: grid; place-items: center; background: var(--flaeche2); border: 0; transition: background .15s, scale .15s; }
  .zahl-knopf:hover { background: var(--linie); } .zahl-knopf:active, .zahl-knopf.gedrueckt { scale: .9; }
  .zahl.aus { opacity: .5; pointer-events: none; }
  .feld--klein { max-width: 190px; }
  .reihe3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 10px; } .reihe2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .check-liste { list-style: none; padding: 0; display: grid; gap: 10px; margin-block: 14px; }
  .check-liste li { display: flex; gap: 12px; align-items: flex-start; } .check-liste .ik { color: var(--akzent); margin-top: 2px; }
  .optout { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-block: 1em; }
  .status { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px; font-size: .83rem; font-weight: 650; background: var(--flaeche2); color: var(--gedaempft); }
  .status--live { background: color-mix(in srgb, var(--gruen) 16%, transparent); color: var(--gruen); }
  .status--live .ik { animation: puls 2s ease-in-out infinite; }
  .status--offline, .status--saving { background: var(--akzent-weich); color: var(--akzent-text); }
  .status--forbidden, .status--gone, .status--error { background: #fbe0e0; color: #a82424; }
  @keyframes puls { 50% { scale: 1.2; opacity: .7; } }
  .konfetti-feld { position: fixed; z-index: 90; pointer-events: none; width: 0; height: 0; }
  .konfetti { position: absolute; left: -4px; top: -4px; width: 9px; height: 14px; border-radius: 2px; } .konfetti.rund { width: 10px; height: 10px; border-radius: 50%; }
  .c0 { background: #e4572e; } .c1 { background: #f2b01e; } .c2 { background: #3550d8; } .c3 { background: #1f8a5b; } .c4 { background: #b45be0; } .c5 { background: #1fb5d4; }
}

@layer tool {
  .werkzeug-abschnitt { padding-block: 8px 24px; }
  .tool { position: relative; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 24px; padding: clamp(16px, 3vw, 32px); box-shadow: var(--schatten); }
  .tool-bildschirm.einblenden { animation: einblenden .45s var(--ease); }
  @keyframes einblenden { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0; } }
  .setup { display: grid; gap: 24px; }
  .setup-links, .setup-rechts { display: grid; gap: 18px; align-content: start; min-width: 0; }
  .feld-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
  .zaehler { font-size: .85rem; font-weight: 650; color: var(--akzent-text); text-align: right; transition: opacity .2s; } .zaehler.klein { color: var(--gedaempft); }
  .feld-werkzeuge { display: flex; flex-wrap: wrap; gap: 4px; }
  @media (max-width: 520px) { .feld-werkzeuge { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } .feld-werkzeuge .knopf { padding-inline: 6px; gap: 6px; font-size: .88rem; } }
  .segment--format { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .segment--format > button { justify-content: flex-start; padding-inline: 12px; }
  .optionen { display: grid; gap: 0; }
  .opt { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease), margin .4s var(--ease), opacity .3s; opacity: 0; }
  .opt.offen { grid-template-rows: 1fr; opacity: 1; }
  .opt-innen { overflow: hidden; display: grid; gap: 16px; min-height: 0; }
  .opt.offen .opt-innen { padding-block: 4px 16px; }
  .opt:not(.offen) .opt-innen { visibility: hidden; }
  .opt-innen > .feld { padding-inline: 1px; }
  @media (min-width: 900px) { .setup { grid-template-columns: 1.05fr 1fr; gap: 36px; } .segment--format { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1100px) { .segment--format { display: inline-grid; grid-template-columns: repeat(2, auto); } }
  .gespeichert { margin-top: 28px; padding-top: 22px; border-top: 1px dashed var(--linie2); }
  .gespeichert h3 { margin-bottom: 12px; }
  .gespeichert-liste { list-style: none; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); }
  .gespeichert-hinweis { margin-top: 10px; font-size: .85rem; color: var(--gedaempft); }
  .tcard { position: relative; display: flex; background: var(--flaeche2); border-radius: 14px; transition: background .2s, translate .2s; animation: einblenden .4s var(--ease) backwards; }
  .tcard:hover { background: var(--linie); }
  .tcard-open { flex: 1; display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: transparent; border: 0; text-align: left; min-width: 0; border-radius: 14px; min-height: 64px; }
  .tcard-ik { color: var(--akzent); } .tcard-ik .ik { width: 26px; height: 26px; }
  .tcard-text { display: grid; min-width: 0; } .tcard-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tcard-text small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tcard-del { width: 44px; background: transparent; border: 0; color: var(--gedaempft); border-radius: 12px; display: grid; place-items: center; } .tcard-del:hover { color: #c62f2f; }

  /* Spielen */
  .play-kopf { display: grid; gap: 14px; margin-bottom: 18px; }
  .play-titel { display: flex; align-items: center; gap: 10px; min-width: 0; flex-wrap: wrap; }
  .play-ik { color: var(--akzent); } .play-ik .ik { width: 28px; height: 28px; }
  .titel-input { flex: 1; min-width: 160px; width: auto; border: 1px solid transparent; background: transparent; font-size: clamp(1.3rem, 1rem + 1.4vw, 1.9rem); font-weight: 750; letter-spacing: -.025em; padding: 4px 8px; border-radius: 10px; }
  .titel-input:hover { border-color: var(--linie); } .titel-input:focus-visible { background: var(--flaeche); }
  .badge { padding: 4px 12px; border-radius: 999px; background: var(--flaeche2); font-size: .82rem; font-weight: 650; color: var(--gedaempft); }
  .play-info { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; }
  .fortschritt { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 220px; max-width: 420px; }
  .fortschritt-text { font-size: .9rem; color: var(--gedaempft); white-space: nowrap; font-variant-numeric: tabular-nums; } .fortschritt-text b { color: var(--tinte); font-family: var(--mono); }
  .balken { flex: 1; height: 8px; border-radius: 99px; background: var(--flaeche2); overflow: hidden; } .balken i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--akzent), var(--gold)); transform-origin: left; scale: var(--p, 0) 1; transition: scale .6s var(--ease); border-radius: 99px; }
  .play-aktionen { display: flex; flex-wrap: wrap; gap: 8px; }
  .play-ansicht { min-width: 0; }

  .tool.konfig { display: grid; gap: 24px; } @media (min-width: 900px) { .tool.konfig { grid-template-columns: 1fr 1.3fr; } }
  .konfig-links, .konfig-rechts { display: grid; gap: 16px; align-content: start; min-width: 0; }
  .teilen-zeile { display: grid; gap: 6px; } .teilen-zeile > label { font-weight: 650; font-size: .9rem; }
  .kopier { display: flex; gap: 8px; align-items: stretch; } .kopier input { font-family: var(--mono); font-size: .85rem; } .kopier textarea { font-family: var(--mono); font-size: .8rem; min-height: 110px; line-height: 1.45; }
  .kopier--text { align-items: flex-start; }
  .knopf--kopieren { flex: none; position: relative; } .kopier-ik { position: relative; width: 1.15em; height: 1.15em; display: block; }
  .kopier-ik .ik { position: absolute; inset: 0; transition: rotate .35s var(--ease), scale .35s var(--ease), opacity .2s; }
  .k-ok { opacity: 0; scale: .4; rotate: -90deg; } .kopiert .k-ok { opacity: 1; scale: 1; rotate: 0deg; color: var(--gruen); } .kopiert .k-copy { opacity: 0; scale: .4; rotate: 90deg; }
  .vorschau { display: grid; gap: 6px; } .vorschau iframe { width: 100%; height: 640px; border: 1px solid var(--linie); border-radius: 14px; background: var(--bg); }
  .vorlagen { display: grid; gap: 22px; } @media (min-width: 900px) { .vorlagen { grid-template-columns: 240px 1fr; } }
  .vorlagen-wahl { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; align-content: start; }
  .vorlage { min-height: 84px; padding: 14px; gap: 4px; cursor: pointer; transition: scale .2s var(--feder), outline-color .2s; outline: 2px solid transparent; outline-offset: -2px; } .vorlage:hover { scale: 1.03; } .vorlage[aria-pressed="true"] { outline-color: var(--kraeftig); }
  .vorlage .k-ikon .ik { width: 24px; height: 24px; }
  .vorlagen-blatt { min-width: 0; display: grid; gap: 14px; } .vorlagen-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; } .vl-titel { margin: 0; font-size: 1.3rem; } .vorlagen-aktionen { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
  .papier { background: #fff; border-radius: 6px; box-shadow: 0 2px 4px rgb(0 0 0 / .1), 0 18px 40px -18px rgb(0 0 0 / .4); padding: clamp(8px, 2vw, 18px); overflow: auto; }
  .papier img { width: 100%; height: auto; margin-inline: auto; min-width: 560px; } .papier.wechsel { animation: einblenden .35s var(--ease); }
  .oeffentlich { width: min(1240px, 100% - 2 * var(--rand)); margin-inline: auto; padding-block: 28px; } .pub-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; } .pub-titel { font-size: clamp(1.6rem, 1rem + 2.4vw, 2.6rem); } .pub-meta { color: var(--gedaempft); margin-top: 4px; } .pub-fuss { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
  .leer { padding: 40px 0; text-align: center; color: var(--gedaempft); font-size: 1.1rem; }
  /* Groessen- und Sportseiten */
  .vorlagen.sz { display: block; } .sz .papier { display: flex; justify-content: center; } .sz .papier img { min-width: 0; max-width: 1100px; }
  .sz-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; } .sz-dl { margin: 0; font-size: .9rem; color: var(--gedaempft); } .sz-dl a { color: inherit; }
  .sz-andere, .sz-groessen { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
  .sz-andere li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding: 12px 14px; border: 1px solid var(--linie); border-radius: 12px; background: var(--flaeche); } .sz-andere span { color: var(--gedaempft); font-variant-numeric: tabular-nums; }
  .sz-groessen { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); } .sz-groessen a, .sz-groessen span { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 12px; border: 1px solid var(--linie); border-radius: 12px; text-decoration: none; background: var(--flaeche); transition: background .2s, border-color .2s; } .sz-groessen a:hover { background: var(--flaeche2); } .sz-groessen [aria-current] { background: var(--akzent-weich); border-color: transparent; font-weight: 600; }
  .sport-hinweis { margin: 0 0 14px; }
}

@layer ansicht {
  .ansicht-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
  .ansicht-leiste.nur-gruppen #v-mode, .ansicht-leiste.nur-gruppen .zoom { display: none; }
  .zoom { display: inline-flex; gap: 2px; padding: 4px; background: var(--flaeche2); border-radius: 14px; margin-left: auto; }
  .zoom button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; min-width: 40px; padding: 0 10px; background: transparent; border: 0; border-radius: 10px; font-weight: 650; font-size: .9rem; color: var(--gedaempft); transition: background .2s, color .2s, scale .15s; }
  .zoom button:hover { background: var(--flaeche); color: var(--tinte); } .zoom button:active { scale: .92; }
  .baum-rahmen, .wisch { position: relative; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; -webkit-overflow-scrolling: touch; border-radius: 16px; }
  .baum-rahmen { background: var(--bg); border: 1px solid var(--linie); padding: 10px; }
  .baum-rahmen[data-rechts="1"] { mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); }
  .baum-rahmen[data-links="1"] { mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent); -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent); }
  .baum-rahmen[data-links="1"][data-rechts="1"] { mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent); -webkit-mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent); }
  .baum-skala { position: relative; }
  .baum { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
  .linien { position: absolute; inset: 0; overflow: visible; pointer-events: none; }
  .link { fill: none; stroke: var(--linie2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: stroke .3s; }
  .link.weg { stroke: var(--akzent); stroke-width: 2.6; stroke-dasharray: 1; stroke-dashoffset: 0; }
  .link.sieg { stroke: var(--gold); stroke-width: 3.6; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--gold) 70%, transparent)); }
  .link.unbenutzt { opacity: .35; stroke-dasharray: 3 5; }
  @media (prefers-reduced-motion: no-preference) { .link.weg { animation: linie-zeichnen-rueck .7s var(--ease) backwards; } .link.sieg.zeichnet { animation: sieger-zeichnen 1.2s var(--ease) backwards; } }
  @keyframes sieger-zeichnen { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
  .rk, .teil { position: absolute; left: var(--x, 0); top: var(--y, 0); width: var(--w, auto); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gedaempft); height: 26px; display: flex; align-items: center; }
  .teil { left: 8px; width: auto; color: var(--akzent-text); font-size: .8rem; }
  .m { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); display: grid; grid-template-rows: 1fr 1fr; padding: 0; text-align: left; background: var(--flaeche); border: 1.5px solid var(--linie2); border-radius: 11px; overflow: hidden; font-size: .88rem; color: var(--tinte); transition: border-color .25s, box-shadow .25s, translate .25s var(--ease), background .25s; }
  .m--karte { position: relative; left: auto; top: auto; width: 100%; height: auto; min-height: 64px; }
  button.m { cursor: default; } button.m:not(:disabled) { cursor: pointer; }
  button.m:not(:disabled):hover { border-color: var(--tinte); box-shadow: var(--schatten); translate: 0 -1px; }
  .m.offen { border-color: var(--akzent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--akzent) 18%, transparent); }
  .m[data-status="bye"], .m[data-status="void"], .m.unbenutzt { background: transparent; border-style: dashed; opacity: .6; }
  .m[data-status="void"] { opacity: .3; }
  .m .nr { position: absolute; right: 6px; top: -1px; font-family: var(--mono); font-size: .62rem; color: var(--gedaempft); background: var(--flaeche); padding: 0 3px; border-radius: 0 0 4px 4px; pointer-events: none; opacity: .0; }
  .m:hover .nr, .m.offen .nr { opacity: 1; }
  .r { display: grid; grid-template-columns: 1.3em minmax(0, 1fr) auto; align-items: center; gap: 4px; padding: 0 10px 0 6px; min-width: 0; position: relative; transition: background .25s; }
  .r + .r { border-top: 1px solid var(--linie); }
  .r .sd { font-family: var(--mono); font-size: .65rem; color: var(--gedaempft); text-align: center; }
  .r .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 550; }
  .r .s { font-family: var(--mono); font-weight: 700; font-size: .92rem; min-width: 1.4em; text-align: right; font-variant-numeric: tabular-nums; }
  .r.tbd .n, .r.bye .n { color: var(--gedaempft); font-style: italic; font-weight: 450; }
  .r.gewinner { background: color-mix(in srgb, var(--akzent) 12%, transparent); } .r.gewinner .n { font-weight: 750; } .r.gewinner::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 3.5px; border-radius: 0 3px 3px 0; background: var(--akzent); }
  .r.verlierer .n, .r.verlierer .s { color: var(--gedaempft); }
  .r.glide .n { animation: gleite .55s var(--ease); } @keyframes gleite { from { opacity: 0; translate: -18px 0; } to { opacity: 1; translate: 0; } }
  .hat-fokus .m:not(:has(.fok)) { opacity: .55; } .r.fok { background: color-mix(in srgb, var(--blau) 14%, transparent); }
  .ein-animation .m { animation: baum-ein .5s var(--ease) backwards; animation-delay: calc(var(--c, 0) * 70ms); }
  @keyframes baum-ein { from { opacity: 0; translate: -12px 0; scale: .96; } to { opacity: 1; translate: 0; scale: 1; } }
  .wisch { display: block; }
  .wisch[data-rechts="1"] { mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
  .wisch[data-links="1"][data-rechts="0"] { mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent); -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent); }
  .wisch[data-links="1"][data-rechts="1"] { mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent); -webkit-mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent); }
  .runden .wisch { margin-inline: calc(-1 * var(--rand)); padding-inline: var(--rand); border-radius: 0; margin-bottom: 12px; scroll-snap-type: x proximity; }
  .segment--runden { display: inline-flex; flex-wrap: nowrap; }
  .m-liste { list-style: none; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); } .m-liste li { min-width: 0; } .m-liste > li { animation: einblenden .35s var(--ease) backwards; }
  /* Spielplan + Tabellen */
  .gr-titel { font-size: 1.15rem; margin-bottom: 10px; }
  .rr-ansicht { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; } .gruppe { min-width: 0; } .gruppe h3 { margin-bottom: 10px; }
  .tabelle-rahmen { border: 1px solid var(--linie); border-radius: 16px; background: var(--flaeche); }
  .tabelle { width: 100%; font-variant-numeric: tabular-nums; font-size: .93rem; }
  .tabelle th, .tabelle td { padding: 10px 10px; text-align: center; white-space: nowrap; transition: background .15s; }
  .tabelle thead th { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--gedaempft); font-weight: 650; border-bottom: 1px solid var(--linie); }
  .tabelle .c-team { text-align: left; font-weight: 650; min-width: 9em; max-width: 18em; overflow: hidden; text-overflow: ellipsis; }
  .tabelle .c-rank { width: 2.5em; color: var(--gedaempft); } .tabelle .c-pts { font-weight: 800; font-family: var(--mono); }
  .tabelle tbody tr + tr > * { border-top: 1px solid color-mix(in srgb, var(--linie) 60%, transparent); }
  .tabelle tbody tr:hover > * { background: var(--flaeche2); }
  .tabelle[data-col="1"] tr > :nth-child(1), .tabelle[data-col="2"] tr > :nth-child(2), .tabelle[data-col="3"] tr > :nth-child(3), .tabelle[data-col="4"] tr > :nth-child(4), .tabelle[data-col="5"] tr > :nth-child(5), .tabelle[data-col="6"] tr > :nth-child(6), .tabelle[data-col="7"] tr > :nth-child(7), .tabelle[data-col="8"] tr > :nth-child(8), .tabelle[data-col="9"] tr > :nth-child(9) { background: color-mix(in srgb, var(--blau) 7%, transparent); }
  .tabelle tbody tr:hover > :hover { background: color-mix(in srgb, var(--blau) 20%, transparent); }
  .tabelle tr.vorne > * { background: color-mix(in srgb, var(--gold) 16%, transparent); } .tabelle tr.weiter .c-rank { color: var(--gruen); font-weight: 800; }
  @media (max-width: 700px) { .tabelle .c-team { position: sticky; left: 0; z-index: 1; background: var(--flaeche); box-shadow: 2px 0 0 var(--linie); min-width: 7.5em; max-width: 9em; } .tabelle th, .tabelle td { padding: 10px 8px; } }
  .rr-runden { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr)); gap: 12px; margin-top: 18px; }
  .rr-runde { background: var(--bg); border: 1px solid var(--linie); border-radius: 16px; padding: 14px; } .rr-runde h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .07em; color: var(--gedaempft); margin-bottom: 8px; }
  .spiel-liste { list-style: none; padding: 0; display: grid; gap: 6px; }
  .spiel { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; align-items: center; min-height: 44px; padding: 6px 10px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 11px; text-align: left; font-size: .9rem; transition: border-color .2s, box-shadow .2s, translate .2s; }
  button.spiel:hover { border-color: var(--tinte); translate: 0 -1px; box-shadow: var(--schatten); }
  .spiel[data-status="ready"] { border-color: var(--akzent); }
  .spiel .sp-a, .spiel .sp-b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 550; } .spiel .sp-b { text-align: right; } .spiel .gewinner { font-weight: 800; }
  .spiel .sp-s { font-family: var(--mono); font-weight: 700; font-size: .88rem; color: var(--gedaempft); min-width: 3.5em; text-align: center; } .spiel[data-status="done"] .sp-s { color: var(--tinte); }
  .frei { margin-top: 8px; font-size: .85rem; color: var(--gedaempft); font-style: italic; }
  .siegerkarte { display: flex; align-items: center; gap: 18px; padding: 18px 22px; margin-bottom: 14px; background: linear-gradient(120deg, color-mix(in srgb, var(--gold) 26%, var(--flaeche)), var(--flaeche)); border: 1px solid color-mix(in srgb, var(--gold) 55%, var(--linie)); border-radius: 20px; }
  .siegerkarte.zeigt { animation: sieger-ein .8s var(--feder); } @keyframes sieger-ein { from { opacity: 0; scale: .9; translate: 0 14px; } to { opacity: 1; scale: 1; translate: 0; } }
  .pokal { color: var(--gold); } .pokal .ik { width: 54px; height: 54px; stroke-width: 1.6; filter: drop-shadow(0 4px 10px color-mix(in srgb, var(--gold) 50%, transparent)); }
  .siegerkarte .pokal { animation: wackeln 1.4s var(--ease) .3s; transform-origin: 50% 90%; } @keyframes wackeln { 20% { rotate: -10deg; } 40% { rotate: 8deg; } 60% { rotate: -5deg; } 80% { rotate: 2deg; } }
  .sieger-text { display: grid; gap: 2px; min-width: 0; } .sieger-label { font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: var(--gedaempft); font-weight: 650; } .sieger-name { font-size: clamp(1.4rem, 1rem + 2vw, 2.2rem); letter-spacing: -.03em; overflow-wrap: anywhere; }
  .podium { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; color: var(--gedaempft); font-size: .92rem; } .podium li span:first-child { font-family: var(--mono); font-weight: 700; }
}

@layer dlg {
  .dlg { margin: auto; border: 0; padding: 0; background: transparent; max-width: min(560px, calc(100% - 24px)); width: 100%; color: var(--tinte); overflow: visible; }
  .dlg--teilen { max-width: min(680px, calc(100% - 24px)); }
  .dlg::backdrop { background: rgb(10 12 28 / .55); backdrop-filter: blur(3px); }
  .dlg-innen { position: relative; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 22px; padding: clamp(18px, 3vw, 28px); box-shadow: 0 30px 70px -20px rgb(0 0 0 / .5); max-height: calc(100dvh - 32px); overflow: auto; display: grid; gap: 14px; }
  .dlg-innen h2 { padding-right: 40px; font-size: 1.4rem; margin: 0; }
  .dlg-x { position: absolute; right: 10px; top: 10px; width: 44px; height: 44px; display: grid; place-items: center; background: transparent; border: 0; border-radius: 12px; color: var(--gedaempft); } .dlg-x:hover { background: var(--flaeche2); color: var(--tinte); }
  .dlg-aktionen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
  .dlg-aktionen > .knopf--leise { margin-left: auto; }
  @media (prefers-reduced-motion: no-preference) {
    .dlg[open] { animation: dlg-ein .28s var(--ease); } .dlg[open]::backdrop { animation: fade-ein .28s ease; }
    .dlg.schliesst { animation: dlg-aus .18s ease forwards; } .dlg.schliesst::backdrop { animation: fade-aus .18s ease forwards; }
  }
  @keyframes dlg-ein { from { opacity: 0; translate: 0 14px; scale: .97; } to { opacity: 1; translate: 0; scale: 1; } } @keyframes dlg-aus { to { opacity: 0; translate: 0 8px; scale: .98; } }
  @keyframes fade-ein { from { opacity: 0; } } @keyframes fade-aus { to { opacity: 0; } }
  .erg { display: grid; gap: 14px; }
  .erg-team { display: grid; gap: 6px; } .erg-name { font-weight: 700; font-size: 1.05rem; overflow-wrap: anywhere; }
  .erg-vs { display: none; }
  .erg-team .zahl input { font-size: 1.4rem; min-height: 52px; }
  @media (min-width: 520px) { .erg { grid-template-columns: 1fr auto 1fr; align-items: end; } .erg-vs { display: block; font-size: 1.6rem; font-weight: 700; color: var(--gedaempft); padding-bottom: 10px; } .erg > :not(.erg-team):not(.erg-vs) { grid-column: 1 / -1; } }
  .erg-sieger { display: grid; gap: 6px; } .erg-sieger .segment { display: grid; grid-template-columns: 1fr 1fr; } .erg-sieger .segment > button { min-width: 0; }
  .erg-warnung { padding: 10px 14px; border-radius: 12px; background: var(--akzent-weich); font-size: .9rem; animation: einblenden .3s var(--ease); }
  .teilen { display: grid; gap: 18px; }
}

@layer druck {
  .druckblatt { display: none; }
  @media print {
    html.drucken body > *:not(.druckblatt) { display: none !important; }
    html.drucken, html.drucken body { background: #fff !important; color: #000 !important; }
    html.drucken .druckblatt { display: block !important; }
    .p-seite { break-after: page; page-break-after: always; }
    .p-seite:last-child { break-after: auto; page-break-after: auto; }
    .p-kopfzeile { display: flex; justify-content: space-between; align-items: baseline; gap: 12mm; margin-bottom: 4mm; font-family: Arial, Helvetica, sans-serif; }
    .p-kopfzeile h1 { font-size: 16pt; letter-spacing: 0; font-weight: 700; color: #000; } .p-kopfzeile p { font-size: 9pt; color: #333; }
    .p-baum { width: 100%; height: 160mm; display: block; }
    .p-fuss { margin-top: 2mm; font: 8pt Arial, sans-serif; color: #555; text-align: right; }
    .p-seite > svg { width: 100%; height: 160mm; }
    .p-tab { width: 100%; border-collapse: collapse; font: 10pt Arial, sans-serif; margin-bottom: 6mm; } .p-tab th, .p-tab td { border: .5pt solid #000; padding: 1.2mm 2mm; text-align: center; } .p-tab th:nth-child(2), .p-tab td:nth-child(2) { text-align: left; }
    .p-runden { columns: 3 70mm; column-gap: 6mm; font: 9pt Arial, sans-serif; } .p-runden section { break-inside: avoid; margin-bottom: 4mm; } .p-runden h4 { font-size: 9pt; margin-bottom: 1mm; } .p-runden ul { list-style: none; padding: 0; } .p-runden li { display: grid; grid-template-columns: 1fr auto 1fr; gap: 2mm; border-bottom: .3pt solid #999; padding: .8mm 0; } .p-runden li span:last-child { text-align: right; } .p-runden p { font-style: italic; font-size: 8pt; }
    .p-gruppe h3 { font: 700 12pt Arial, sans-serif; margin: 0 0 2mm; }
    .druckblatt.a4 { page: a4; } .druckblatt.letter { page: letter; }
  }
}
@page a4 { size: A4 landscape; margin: 12mm; }
@page letter { size: letter landscape; margin: 12mm; }
@page { margin: 12mm; }

/* ----- Seitenwechsel und Farbwechsel ----- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .28s; }
  html.thema-wechsel::view-transition-old(root), html.thema-wechsel::view-transition-new(root) { animation-duration: .35s; animation-timing-function: cubic-bezier(.22, .61, .36, 1); }
  html.thema-wechsel * { transition: none !important; }
}
.seite-embed { background: var(--bg); } #emb { padding: 10px; } .emb-titel { font-size: 1.2rem; margin-bottom: 8px; } .emb-titel:empty { display: none; } .emb-fuss { margin-top: 10px; font-size: .8rem; color: var(--gedaempft); text-align: right; } .emb-fuss a { color: inherit; }
.seite-embed .play-ansicht { min-width: 0; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }