.welt-training { background: var(--creme); color: var(--nacht); color-scheme: light; }
.welt-training main :focus-visible { outline-color: var(--court); }
.welt-training .t-einreichen :focus-visible { outline-color: var(--ball); }
.welt-training .marke-zeile { color: var(--court); }
.x3d-hell em { font-style: normal; color: var(--court); text-shadow: .02em .02em 0 var(--hell), .035em .035em 0 var(--hell), .05em .05em 0 #9cc2fb, .065em .065em 0 #b6d2fc; }

/* Held */
.t-held { position: relative; isolation: isolate; overflow: hidden; padding-top: calc(var(--kopf) + var(--oben)); background: radial-gradient(60% 70% at 88% 0%, #fff 0%, rgb(255 255 255 / 0) 70%), radial-gradient(50% 60% at 0% 100%, rgb(125 175 249 / .22), transparent 70%), var(--creme); }
.t-plan { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; opacity: .4; pointer-events: none; }
.t-plan rect { fill: rgb(125 175 249 / .1); stroke: rgb(35 88 205 / .25); stroke-width: 3; }
.t-plan-linie { fill: none; stroke: rgb(35 88 205 / .2); stroke-width: 2.5; }
.t-plan-ball { fill: none; stroke: #d2562e; stroke-width: 3; opacity: .45; }
.t-plan-weg { fill: none; stroke: var(--nacht); stroke-width: 3; stroke-dasharray: 10 9; opacity: .3; }
.t-held-raster { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 40px clamp(32px, 4vw, 64px); align-items: center; padding-block: clamp(40px, 7vh, 80px) clamp(56px, 9vh, 96px); }
.t-held .vorzeile span { background: rgb(35 88 205 / .08); border-color: rgb(35 88 205 / .28); color: var(--court); }
.t-held h1 { font-size: clamp(2.4rem, 4.2vw, 3.8rem); line-height: .98; }
.t-held h1 em { display: inline-block; margin-top: .06em; }
.t-lead { margin-top: 24px; max-width: 32em; font-size: clamp(1.125rem, 1.45vw, 1.3125rem); color: #33415e; }
.t-held .knoepfe { margin-top: 32px; }
.zahlen { display: flex; gap: clamp(20px, 4vw, 48px); margin-top: 36px; }
.zahlen div { display: flex; flex-direction: column-reverse; }
.zahlen dd { font-weight: 700; font-size: clamp(2.4rem, 4.2vw, 3.6rem); line-height: 1; color: var(--court); letter-spacing: -.01em; }
.zahlen dt { margin-top: 6px; font-weight: 600; color: #33415e; }
.t-held-bild { position: relative; padding-bottom: 96px; }
.t-held-bild .t-schirm { margin-left: 22%; margin-right: -2%; }
.t-held-bild .t-a4 { position: absolute; left: -4%; bottom: 0; width: 48%; }
.t-a4 { padding: 4% 4% 6%; border-radius: 4px; background: #fff; transform: rotate(-3deg); box-shadow: 0 1px 0 rgb(11 21 44 / .08), 8px 8px 0 var(--ball), 24px 30px 60px rgb(11 21 44 / .28); }

.t-vorlage { display: flex; justify-content: center; padding: 8px 8px 8px 0; }
.blatt { position: relative; width: min(440px, 100%); padding: 18px 18px 14px; border-radius: 16px; background: #fff; color: var(--nacht); box-shadow: 8px 8px 0 var(--ball), 24px 30px 60px rgb(11 21 44 / .25); font-size: .875rem; line-height: 1.35; }
.blatt-kopf { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: baseline; padding-bottom: 10px; border-bottom: 2px solid var(--nacht); }
.blatt-sterne { grid-column: 1 / -1; color: #a67c00; letter-spacing: .08em; font-size: .9375rem; }
.blatt-sterne span { color: #c3cbdb; }
.blatt-titel { font-weight: 700; font-size: 1.0625rem; line-height: 1.2; text-wrap: balance; }
.blatt-zeit { font-weight: 700; font-size: 1.0625rem; color: var(--court); white-space: nowrap; }
.blatt-liste > div { display: grid; grid-template-columns: 82px minmax(0, 1fr); column-gap: 10px; padding: 7px 0; border-bottom: 1px solid #e3e8f2; }
.blatt-liste dt { grid-row: span 2; font-weight: 700; color: var(--court); font-size: .8125rem; text-transform: uppercase; letter-spacing: .04em; padding-top: 1px; }
.blatt-liste dd { grid-column: 2; display: grid; grid-template-columns: 3.9em minmax(0, 1fr); }
.blatt-liste dd span { text-wrap: balance; }
.blatt-fuss { display: flex; gap: 10px; justify-content: flex-end; padding-top: 10px; color: var(--court); }
.blatt-fuss svg { width: 22px; height: 22px; }

/* Bibliothek */
.t-abschnitt { padding-block: var(--abstand); }
.t-kopf { max-width: 760px; }
.t-abschnitt h2 { font-size: clamp(2rem, 3.7vw, 3.25rem); }
.t-zeile { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px clamp(32px, 5vw, 72px); align-items: center; margin-top: 56px; }
.t-zeile-rechts { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.t-zeile-rechts > :first-child { order: 2; }
.t-zeile-text h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.1; }
.t-zeile-text p { margin-top: 12px; color: #33415e; max-width: 30em; }
.t-schirm { border-radius: 16px; overflow: hidden; border: 1px solid rgb(11 21 44 / .1); box-shadow: 6px 6px 0 var(--hell), 24px 32px 60px rgb(11 21 44 / .18); }
.t-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.t-chips li { padding: 6px 14px; border-radius: 999px; background: #fff; border: 1.5px solid rgb(35 88 205 / .35); color: var(--court); font-weight: 700; font-size: .9375rem; }

.t-kacheln { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(3, auto); gap: 0 18px; margin-top: 64px; }
.t-kachel { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 10px; padding: 24px 22px 26px; border-radius: 20px; background: #fff; border: 1px solid rgb(11 21 44 / .08); box-shadow: 0 1px 0 rgb(11 21 44 / .04), 0 18px 40px rgb(11 21 44 / .07); }
.t-kachel > :first-child { align-self: end; min-height: 56px; display: flex; align-items: flex-end; margin-bottom: 8px; }
.t-kachel h3 { font-size: 1.3125rem; }
.t-kachel p { color: #33415e; }
.t-kachel .t-sterne { gap: 2px; font-size: 2rem; line-height: 1; color: #f2b632; }
.t-sterne span { position: relative; display: inline-block; }
.t-sterne .halb { color: #d5dbe7; }
.t-sterne .halb::before { content: '★'; position: absolute; inset: 0; width: 50%; overflow: hidden; color: #f2b632; }
.t-treppe { width: 120px; height: 56px; }
.t-treppe path { fill: none; stroke: var(--court); stroke-width: 3; stroke-linejoin: round; }
.t-treppe circle { fill: var(--ball); stroke: var(--nacht); stroke-width: 1.5; }
.t-bloecke { flex-direction: column; align-items: stretch !important; gap: 3px; width: 100%; }
.t-bloecke li { width: calc(var(--w) * 100%); min-width: max-content; padding: 1px 8px; border-radius: 5px; background: rgb(35 88 205 / .12); color: var(--court); font-weight: 700; font-size: .6875rem; text-transform: uppercase; letter-spacing: .05em; }
.t-bloecke li:nth-child(3) { background: var(--court); color: #fff; }
.t-welle { gap: 5px; height: 56px; color: var(--court); }
.t-welle svg { width: 34px; height: 34px; margin-right: 6px; }
.t-welle span { width: 5px; border-radius: 3px; background: var(--court); height: 30%; animation: welle 1.4s ease-in-out infinite; }
.t-welle span:nth-of-type(2) { animation-delay: -.2s; } .t-welle span:nth-of-type(3) { animation-delay: -.4s; } .t-welle span:nth-of-type(4) { animation-delay: -.6s; }
.t-welle span:nth-of-type(5) { animation-delay: -.8s; } .t-welle span:nth-of-type(6) { animation-delay: -1s; } .t-welle span:nth-of-type(7) { animation-delay: -1.2s; }
@keyframes welle { 50% { height: 80%; } }

.t-liste { display: grid; gap: 12px; margin-top: 22px; }
.t-liste li { display: flex; align-items: center; gap: 12px; font-weight: 600; }
.t-liste svg { width: 28px; height: 28px; flex: none; color: var(--court); }
.t-platz .t-handy { justify-self: center; width: min(100%, 460px); }
.t-handy { border-radius: 30px; border: 10px solid #02050d; overflow: hidden; transform: rotate(-2deg); box-shadow: 0 0 0 1px rgb(11 21 44 / .2), 10px 10px 0 var(--hell), 30px 40px 70px rgb(11 21 44 / .3); }
.t-ende { display: flex; justify-content: center; margin-top: 64px; }

/* Einreichen */
.t-einreichen { position: relative; overflow: hidden; padding-block: var(--abstand); color: #fff; background: radial-gradient(60% 80% at 100% 0%, rgb(125 175 249 / .35), transparent 70%), linear-gradient(160deg, var(--court) 0%, var(--tief) 100%); }
.t-ein-raster { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 48px clamp(32px, 5vw, 72px); align-items: center; }
.t-neu { display: inline-block; padding: 4px 14px; border-radius: 999px; background: var(--ball); color: var(--nacht); font-weight: 700; font-size: .9375rem; letter-spacing: .12em; text-transform: uppercase; }
.t-ein-kopf h2 { margin-top: 18px; font-size: clamp(2rem, 3.7vw, 3.25rem); }
.t-ein-kopf .x3d { text-shadow: .02em .02em 0 var(--hell), .035em .035em 0 #5d8ff0, .05em .05em 0 var(--tief), .065em .065em 0 #0d2870, .08em .08em 0 #0a1f57; }
.t-ein-kopf .lead { color: #e2ecff; }
.t-ein-kopf .knoepfe { margin-top: 30px; }
.t-editor { padding: 22px; border-radius: 20px; background: var(--creme); color: var(--nacht); box-shadow: 10px 10px 0 var(--ball), 30px 40px 80px rgb(4 14 48 / .45); transform: rotate(1.2deg); }
.t-editor figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; margin-bottom: 16px; font-weight: 700; font-size: 1.125rem; }
.t-entwurf { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 8px; border-radius: 999px; background: rgb(35 88 205 / .1); color: var(--court); font-size: .875rem; white-space: nowrap; }
.t-entwurf svg { width: 20px; height: 20px; }
.t-felder { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.t-felder li { position: relative; min-height: 46px; padding: 6px 10px 18px; border-radius: 10px; background: #fff; border: 1.5px solid rgb(11 21 44 / .14); font-weight: 600; font-size: .8125rem; color: #4a5875; }
.t-felder li::after { content: ''; position: absolute; left: 10px; right: 28%; bottom: 10px; height: 3px; border-radius: 2px; background: rgb(11 21 44 / .1); }
.t-felder .breit { grid-column: span 2; }
.t-felder .hoch { min-height: 70px; }
.t-felder .t-optional { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; min-height: 0; padding: 10px; border-style: dashed; border-color: rgb(35 88 205 / .45); color: var(--court); }
.t-felder .t-optional::after { display: none; }
.t-felder .t-optional svg { width: 22px; height: 22px; }
.t-felder .t-optional span { font-weight: 400; color: #4a5875; }
.t-weg { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, auto); gap: 0 24px; counter-reset: w; margin-top: 16px; }
.t-weg li { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 10px; padding: 22px 0 0; border-top: 2px solid rgb(255 255 255 / .28); counter-increment: w; }
.t-weg svg { width: 34px; height: 34px; color: var(--ball); }
.t-weg h3 { font-size: 1.375rem; }
.t-weg h3::before { content: counter(w) '. '; color: var(--ball); }
.t-weg p { color: #e2ecff; }

/* Fragen */
.t-fragen { border-top: 1px solid rgb(11 21 44 / .1); }
.welt-training .faq > div { border-top-color: rgb(11 21 44 / .12); }
.welt-training .faq dt { color: var(--nacht); }
.welt-training .faq dd { color: #33415e; }

@media (max-width: 859px) {
  .t-held-raster, .t-zeile, .t-zeile-rechts, .t-ein-raster { grid-template-columns: 1fr; }
  .t-zeile-rechts > :first-child { order: 0; }
  .t-held-raster { padding-block: 28px 64px; }
  .t-held h1 { font-size: clamp(1.9rem, 9.6vw, 3.6rem); }
  .t-held .knopf-gross { flex: 1 1 auto; }
  .t-held-bild { padding-bottom: 40px; margin-right: 8px; }
  .t-held-bild .t-schirm { margin-left: 16%; }
  .t-held-bild .t-a4 { width: 40%; }
  .t-vorlage { padding: 0 8px 8px 0; }
  .t-zeile { margin-top: 40px; gap: 28px; }
  .t-schirm, .t-handy { margin-right: 12px; }
  .t-kacheln { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(6, auto); gap: 0 14px; margin-top: 48px; }
  .t-kachel { padding: 20px 18px 22px; margin-bottom: 14px; }
  .t-ende .knopf, .t-ein-kopf .knopf { flex: 1 1 auto; width: 100%; }
  .t-editor { transform: none; margin-right: 10px; }
  .t-weg { grid-template-columns: 1fr; grid-template-rows: none; gap: 20px; margin-top: 0; }
  .t-weg li { grid-row: auto; grid-template-rows: auto; grid-template-columns: 34px minmax(0, 1fr); column-gap: 14px; row-gap: 4px; padding-top: 18px; }
  .t-weg svg { grid-row: span 2; }
}
@media (max-width: 420px) {
  .t-kacheln { grid-template-columns: 1fr; grid-template-rows: none; }
  .t-kachel { grid-row: auto; grid-template-rows: auto; }
  .t-felder { grid-template-columns: 1fr 1fr; }
  .zahlen { gap: 18px; justify-content: space-between; }
  .t-held .vorzeile span { font-size: .8125rem; padding: 3px 8px; }
}
@media (max-height: 500px) and (orientation: landscape) and (min-width: 560px) {
  .t-held-raster { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); padding-block: 16px 40px; gap: 24px; }
  .t-held .vorzeile, .t-held .zahlen { display: none; }
  .t-held-bild { padding-bottom: 24px; }
  .t-held h1 { font-size: clamp(1.9rem, 4.6vw, 2.6rem); }
  .t-lead { margin-top: 12px; font-size: 1rem; }
  .t-held .knoepfe { margin-top: 18px; }
  .t-held .knopf-gross { flex: 1 1 100%; min-height: 48px; }
  .t-held-bild { margin-right: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .t-welle span { animation: none; height: 55%; }
}