@font-face { font-family: "Caveat"; src: url("/assets/medien/caveat-d0b7b931.woff2") format("woff2"); font-weight: 400; font-display: swap; }

@font-face { font-family: "Archivo"; src: url("/assets/medien/archivo-e3a28ead.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }

:root {
  --tinte: #0C0C0D; --tinte-2: #5A5A60; --tinte-3: #8A8A8F;
  --grund: #FFFFFF; --flaeche: #F2F2F3; --linie: #E2E2E4;
  --sig: #EE5419; --sig-text: #FFFFFF;
  --swim: #3F7CB0; --bike: #A9812D; --run: #C25F48;
  --nacht: #141416;
  --rand: clamp(1.25rem, 4vw, 4rem);
  --mass: 90rem;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --tinte: #F2F2F3; --tinte-2: #A8A8AE; --tinte-3: #7A7A80; --grund: #0E0E10; --flaeche: #18181B; --linie: #26262A; --sig: #FF6A2C; --sig-text: #0E0E10; --nacht: #18181B; }
}
:root[data-theme="dark"] { --tinte: #F2F2F3; --tinte-2: #A8A8AE; --tinte-3: #7A7A80; --grund: #0E0E10; --flaeche: #18181B; --linie: #26262A; --sig: #FF6A2C; --sig-text: #0E0E10; --nacht: #18181B; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--grund); color: var(--tinte); font-family: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 1.0625rem; line-height: 1.55; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-color: var(--sig); text-underline-offset: .22em; text-decoration-thickness: 1.5px; }
a:hover { color: var(--sig); }
:focus-visible { outline: 2px solid var(--sig); outline-offset: 3px; }
.sr { position: absolute; left: 0; top: 0; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.springen { position: absolute; left: 1rem; top: -4rem; background: var(--sig); color: var(--sig-text); padding: .5rem 1rem; z-index: 20; }
.springen:focus { top: 1rem; }
h1, h2, h3 { margin: 0; font-weight: 700; line-height: 1.05; letter-spacing: -.015em; }
h2 { font-size: clamp(2rem, 1.2rem + 2.6vw, 3.5rem); font-stretch: 112%; max-width: 18ch; }
p { margin: 0; }

.knopf { display: inline-flex; align-items: center; min-height: 3.25rem; padding: 0 1.75rem; background: #FF6A2C; color: #0E0E10; font-weight: 650; font-stretch: 108%; text-decoration: none; border-radius: 4px; }
.knopf:hover { color: #0E0E10; background: #FF7D45; }

.buehne { position: relative; min-height: 100svh; display: grid; grid-template-rows: auto 1fr; background: #141416; color: #F2F2F3; isolation: isolate; overflow: hidden; }
.buehne-medium { position: absolute; inset: 0; z-index: -1; }
.buehne-video { width: 100%; height: 100%; object-fit: cover; object-position: 68% 40%; }
.buehne-medium::after { content: ""; position: absolute; inset: 0; background: rgba(14,14,16,.48); }
.kopf { display: flex; align-items: center; justify-content: space-between; padding: 1.5rem var(--rand); }
.kopf-logo img { height: 22px; width: auto; }
.kopf-nav { display: none; gap: 2.25rem; font-size: .9375rem; }
.kopf-nav a { color: rgba(242,242,243,.75); text-decoration: none; }
.kopf-nav a:hover { color: #F2F2F3; }
.held { align-self: end; padding: 0 var(--rand) clamp(2rem, 5vw, 4.5rem); max-width: var(--mass); width: 100%; }
.held h1 { font-size: clamp(2.75rem, 1rem + 7.2vw, 8.25rem); font-stretch: 125%; font-weight: 800; letter-spacing: -.035em; line-height: .95; max-width: 11ch; }
.strich { text-decoration: underline; text-decoration-color: #FF6A2C; text-decoration-thickness: .06em; text-underline-offset: .1em; text-decoration-skip-ink: none; }
.held-fuss { margin-top: clamp(1.75rem, 3vw, 2.75rem); padding-top: 1.25rem; border-top: 1px solid rgba(242,242,243,.28); display: flex; flex-wrap: wrap; gap: 1.25rem 2rem; align-items: center; justify-content: space-between; }
.unterzeile { font-size: clamp(1rem, .9rem + .4vw, 1.25rem); color: rgba(242,242,243,.85); }

main { max-width: var(--mass); margin: 0 auto; }
section { padding: clamp(5rem, 10vw, 9rem) var(--rand) 0; }

.aussage-text { font-size: clamp(1.75rem, 1rem + 2.9vw, 3.75rem); font-stretch: 108%; font-weight: 600; line-height: 1.12; letter-spacing: -.02em; max-width: 24ch; }
.aussage-text span { color: var(--tinte-3); }
.eckdaten { margin: clamp(3rem, 6vw, 5rem) 0 0; display: grid; gap: 1.5rem; }
.eckdaten div { display: grid; gap: .25rem; }
.eckdaten dt { font-size: .8125rem; color: var(--tinte-3); }
.eckdaten dd { margin: 0; font-size: 1.0625rem; }

.strecke { padding-left: 0; padding-right: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 82%; gap: 4px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.strecke::-webkit-scrollbar { display: none; }
.strecke figure { margin: 0; scroll-snap-align: start; }
.strecke img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.strecke figcaption { padding: .9rem var(--rand) 0 0; font-size: .9375rem; display: flex; align-items: center; gap: .6rem; }
.strecke figure:first-child figcaption { padding-left: var(--rand); }
.strecke figcaption::before { content: ""; width: 1.5rem; height: 3px; background: var(--c); }
.strecke .s { --c: var(--swim); } .strecke .r { --c: var(--bike); } .strecke .l { --c: var(--run); }

.woche { display: grid; gap: 3rem; }
.woche-text p { margin-top: 1.25rem; color: var(--tinte-2); max-width: 42ch; }
.plan-kopf { display: flex; justify-content: space-between; gap: 1rem; font-size: .875rem; color: var(--tinte-3); padding-bottom: .75rem; border-bottom: 1px solid var(--tinte); }
.plan table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.plan th, .plan td { padding: .95rem 0; border-bottom: 1px solid var(--linie); text-align: left; font-weight: 400; }
.plan th[scope="row"] { width: 3.25rem; font-weight: 600; font-stretch: 112%; }
.plan .sp { position: relative; padding-left: 1.1rem; }
.plan .sp::before { content: ""; position: absolute; left: 0; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--c); }
.plan .sp.s { --c: var(--swim); } .plan .sp.r { --c: var(--bike); } .plan .sp.l { --c: var(--run); }
.plan .zeit { text-align: right; font-stretch: 118%; font-weight: 500; font-size: 1.25rem; width: 5rem; }
.plan .st { text-align: right; width: 6.5rem; font-size: .875rem; color: var(--tinte-3); }
.plan tr.verpasst .sp, .plan tr.verpasst .zeit { color: var(--tinte-3); }
.plan tr.verpasst .sp::before { background: transparent; box-sizing: border-box; border: 1.5px solid var(--tinte-3); }
.plan tr.heute th, .plan tr.heute .st { color: var(--sig); }
.plan tr.heute .st { font-weight: 600; }
.fussnote { margin-top: 1rem; font-size: .8125rem; color: var(--tinte-3); }

.app h2 { max-width: 16ch; }
.app-reihe { margin-top: clamp(2.5rem, 5vw, 4rem); display: grid; gap: 3rem; }
.app figure { margin: 0; display: grid; gap: 1.25rem; align-content: start; }
.app img { width: 100%; max-width: 22.5rem; border-radius: 24px; }
@media (prefers-color-scheme: light) { .app img { outline: 1px solid var(--linie); outline-offset: -1px; } }
.app figcaption { color: var(--tinte-2); max-width: 30ch; }
.app figcaption strong { display: block; color: var(--tinte); font-weight: 600; margin-bottom: .2rem; }

.daten h2 { max-width: 20ch; }
.schritte { list-style: none; margin: clamp(2.5rem, 5vw, 4rem) 0 0; padding: 0; display: grid; gap: 2rem; }
.schritte li { display: grid; gap: .75rem; border-top: 1px solid var(--tinte); padding-top: 1rem; }
.schritte .nr { font-stretch: 118%; font-weight: 500; font-size: 1.25rem; }
.schritte p { color: var(--tinte-2); max-width: 32ch; }
.schritte strong { color: var(--tinte); font-weight: 600; }
.anmerkung { margin-top: 3rem; max-width: 46rem; font-size: .9375rem; color: var(--tinte-2); }
.anmerkung h3 { font-size: .9375rem; font-weight: 600; color: var(--tinte); letter-spacing: 0; }
.anmerkung p { margin-top: .35rem; }

.macher { display: grid; gap: 1.5rem; }
.macher p { font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem); max-width: 40ch; color: var(--tinte-2); }
.notiz { margin-top: 1rem; font-family: "Caveat", "Segoe Print", "Bradley Hand", cursive; color: #FF6A2C !important; font-size: 1.5rem !important; transform: rotate(-2deg); transform-origin: left; }

.start { margin-top: clamp(5rem, 10vw, 9rem); padding: 0; background: var(--nacht); color: #F2F2F3; }
.start-innen { max-width: var(--mass); margin: 0 auto; padding: clamp(4rem, 8vw, 7rem) var(--rand); display: grid; gap: 2rem; align-items: end; }
.datum { font-size: clamp(5.5rem, 2rem + 12vw, 13.5rem); font-stretch: 125%; font-weight: 800; line-height: .8; letter-spacing: -.05em; color: #FF6A2C; font-variant-numeric: tabular-nums; }
.start-text { display: grid; gap: .75rem; color: rgba(242,242,243,.75); max-width: 36ch; }
.start-satz { font-size: clamp(1.25rem, 1rem + .8vw, 1.625rem); line-height: 1.3; color: #F2F2F3; }
.start a { color: #F2F2F3; text-decoration-color: #FF6A2C; }

.fragen { max-width: var(--mass); margin: 0 auto; display: grid; gap: 2rem; }
.fragen details { border-bottom: 1px solid var(--linie); }
.fragen details:first-child { border-top: 1px solid var(--tinte); }
.fragen summary { cursor: pointer; list-style: none; padding: 1.25rem 2.5rem 1.25rem 0; position: relative; font-weight: 600; font-size: 1.0625rem; }
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-weight: 400; font-size: 1.5rem; line-height: 1; color: var(--tinte-3); }
.fragen details[open] summary::after { content: "–"; }
.fragen details p { padding: 0 0 1.5rem; color: var(--tinte-2); max-width: 60ch; }

.fuss { max-width: var(--mass); margin: clamp(5rem, 10vw, 9rem) auto 0; padding: 2.5rem var(--rand) 3rem; border-top: 1px solid var(--linie); display: grid; gap: 1.5rem; font-size: .9375rem; }
.fuss-marke img { height: 22px; width: auto; }
.fuss-marke p { margin-top: .6rem; color: var(--tinte-3); }
.fuss nav { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.fuss a { text-decoration: none; color: var(--tinte-2); }
.fuss a:hover { color: var(--tinte); }

@media (min-width: 52rem) {
  .kopf-nav { display: flex; }
  .eckdaten { grid-template-columns: repeat(3, 1fr); gap: 2rem; border-top: 1px solid var(--linie); padding-top: 1.5rem; max-width: 60rem; }
  .strecke { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); overflow: visible; }
  .strecke figcaption, .strecke figure:first-child figcaption { padding-left: 0; }
  .strecke figure:first-child figcaption { padding-left: var(--rand); }
  .woche { grid-template-columns: 5fr 7fr; gap: 5rem; align-items: start; }
  .app-reihe { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
  .schritte { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
  .macher { grid-template-columns: 5fr 7fr; gap: 5rem; align-items: start; }
  .start-innen { grid-template-columns: auto 1fr; gap: 4rem; }
  .fragen { grid-template-columns: 5fr 7fr; gap: 5rem; align-items: start; }
  .fuss { grid-template-columns: 2fr 1fr 1fr; align-items: start; }
  .fuss nav { flex-direction: column; gap: .6rem; }
}
@media (max-width: 52rem) {
  .buehne-medium::after { background: rgba(14,14,16,.55); }
  .held-fuss .knopf { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.pause { position: absolute; right: var(--rand); top: 4.5rem; z-index: 2; display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .75rem; background: rgba(14,14,16,.55); color: #F2F2F3; border: 1px solid rgba(242,242,243,.3); border-radius: 4px; font: inherit; font-size: .8125rem; cursor: pointer; }
.pause svg { width: .9rem; height: .9rem; fill: currentColor; }
.pause .i-play { display: none; }
.pause[aria-pressed="true"] .i-pause { display: none; }
.pause[aria-pressed="true"] .i-play { display: block; }
.pause[hidden] { display: none; }
.buehne { position: relative; }
.aussage-text span { color: var(--tinte-2); }

.l4 .buehne { min-height: 92svh; }
.l4 .held { padding-right: calc(var(--rand) + 23rem); }
.l4 .held h1 { font-size: clamp(2.75rem, 1rem + 6vw, 6.75rem); }
.anschnitt { display: block; margin: 3rem var(--rand) 0; width: min(calc(100% - 2 * var(--rand)), 22.5rem); }
.anschnitt img { border-radius: 24px; }
.anschnitt figcaption { margin-top: .6rem; font-size: .8125rem; color: var(--tinte-3); }
@media (prefers-color-scheme: light) { .anschnitt img { outline: 1px solid var(--linie); outline-offset: -1px; } }
@media (min-width: 72rem) {
  .l4 .anschnitt { display: block; position: relative; z-index: 3; width: 21rem; margin: -26rem var(--rand) 0 auto; }
  .l4 .anschnitt img { border-radius: 24px; outline: 1px solid var(--linie); outline-offset: -1px; }
  .l4 .anschnitt figcaption { margin-top: .6rem; font-size: .8125rem; color: var(--tinte-3); }
  .l4 .aussage { margin-top: -9.5rem; }
  .l4 .aussage .aussage-text { max-width: 20ch; }
  .l4 .aussage .eckdaten { max-width: calc(100% - 26rem); }
}
@media (max-width: 72rem) { .l4 .held { padding-right: var(--rand); } }

.daten-lead { margin-top: 1.25rem; color: var(--tinte-2); max-width: 46ch; font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); }

:root { box-sizing: border-box; }
.pause { top: calc(4.5rem + env(safe-area-inset-top, 0px)); }
.kopf { padding-top: calc(1.5rem + env(safe-area-inset-top, 0px)); }
.wortmarke { font-stretch: 125%; font-weight: 700; letter-spacing: -.02em; font-size: 1.25rem; color: inherit; text-decoration: none; }


.ki-hinweis { position: absolute; right: var(--rand); top: calc(4.75rem + env(safe-area-inset-top, 0px)); z-index: 2; margin: 0; padding: .3rem .6rem; background: rgba(14,14,16,.55); color: rgba(242,242,243,.9); font-size: .75rem; border-radius: 4px; }
.ki-hinweis .nur-mobil { display: none; }
.pause { top: calc(7rem + env(safe-area-inset-top, 0px)); }
@media (max-width: 52rem) { .ki-hinweis .nur-desktop { display: none; } .ki-hinweis .nur-mobil { display: inline; } }
.strecke figcaption .ki { color: var(--tinte-3); font-size: .8125rem; }

.ki-hinweis { top: auto !important; bottom: calc(.6rem + env(safe-area-inset-bottom, 0px)); right: var(--rand); padding: 0 !important; background: none !important; font-size: .6875rem !important; color: rgba(242,242,243,.72) !important; letter-spacing: .01em; }
.pause { top: calc(4.5rem + env(safe-area-inset-top, 0px)) !important; }
.held { padding-bottom: clamp(2.75rem, 5.5vw, 5rem); }
.strecke figcaption .ki { font-size: .75rem; }

.ki-hinweis { right: auto !important; left: var(--rand); }

.ki-hinweis { position: absolute !important; z-index: 4 !important; left: auto !important; right: var(--rand) !important; bottom: auto !important;
  top: calc(5rem + env(safe-area-inset-top, 0px)) !important; margin: 0; padding: 3px 6px !important; border-radius: 4px;
  background: rgba(0,0,0,.6) !important; color: #FFFFFF !important; font-size: 12px !important; font-weight: 500; line-height: 1.2; letter-spacing: .01em; pointer-events: none; }
.pause { top: calc(7rem + env(safe-area-inset-top, 0px)) !important; }
.ki-hinweis { top: auto !important; right: auto !important; left: var(--rand) !important; bottom: calc(.75rem + env(safe-area-inset-bottom, 0px)) !important; }
.pause { top: calc(4.5rem + env(safe-area-inset-top, 0px)) !important; }
.held { padding-bottom: clamp(3.25rem, 6vw, 5.5rem) !important; }
.strecke figcaption .ki { font-size: 12px !important; color: var(--tinte-2) !important; }
.anschnitt figcaption, .l4 .anschnitt figcaption { color: var(--tinte-2); }

.ziel-text { margin-top: 1.25rem; color: var(--tinte-2); max-width: 42ch; font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); }
.ziel-linien { margin-top: clamp(2.5rem, 5vw, 4rem); display: grid; gap: 2.5rem; }
.ziel-art { margin: 0 0 1rem; font-size: .8125rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--tinte-2); }
.ziel-linie ol { list-style: none; margin: 0; padding: 0 0 0 1.5rem; position: relative; display: grid; gap: 1.1rem; }
.ziel-linie ol::before { content: ""; position: absolute; left: 4px; top: .7em; bottom: .7em; width: 2px; background: var(--linie); }
.ziel-linie li { position: relative; font-size: clamp(1.0625rem, 1rem + .4vw, 1.375rem); font-stretch: 108%; font-weight: 500; }
.ziel-linie li::before { content: ""; position: absolute; left: calc(-1.5rem + 0px); top: .5em; width: 10px; height: 10px; border-radius: 50%; background: var(--grund); border: 2px solid var(--tinte); box-sizing: border-box; }
.ziel-linie li:last-child { font-weight: 700; }
.ziel-linie li:last-child::before { background: var(--sig); border-color: var(--sig); }
@media (min-width: 52rem) {
  .ziel-linie ol { padding: 1.75rem 0 0; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
  .ziel-linie ol::before { left: 5px; right: 0; top: 4px; bottom: auto; width: auto; height: 2px; }
  .ziel-linie ol::after { content: ""; position: absolute; right: 0; top: -6px; width: 4px; height: 22px; background: var(--sig); border-radius: 2px; }
  .ziel-linie li::before { left: 0; top: -1.75rem; }
}

.ziel-bahn { margin-top: clamp(2.5rem, 5vw, 4rem); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; max-width: 56rem; }
.ziel-start, .ziel-ende { font-size: clamp(1.0625rem, 1rem + .5vw, 1.5rem); font-stretch: 112%; font-weight: 600; white-space: nowrap; }
.ziel-ende { color: var(--tinte); font-weight: 700; }
.ziel-spur { position: relative; height: 22px; display: flex; justify-content: space-evenly; align-items: center; }
.ziel-spur::before { content: ""; position: absolute; left: 0; right: 6px; top: 50%; height: 2px; margin-top: -1px; background: var(--linie); }
.ziel-spur::after { content: ""; position: absolute; right: 0; top: 0; width: 4px; height: 22px; border-radius: 2px; background: var(--sig); }
.ziel-spur i { position: relative; width: 2px; height: 10px; background: var(--tinte-3); }
@media (max-width: 30rem) { .ziel-bahn { gap: .6rem; } .ziel-spur i:nth-child(even) { display: none; } }
.ziel-fuss { margin-top: 1rem; font-size: .875rem; color: var(--tinte-2); }

@media (min-width: 52rem) { .app-reihe { grid-template-columns: repeat(2, minmax(0, 22.5rem)) !important; gap: 4rem !important; } }
.kette { list-style: none; margin: clamp(2.5rem, 5vw, 4rem) 0 0; padding: 0; display: grid; gap: 2.25rem; max-width: 60rem; }
.kette li { position: relative; display: grid; gap: .3rem; padding-left: 1.75rem; }
.kette li::before { content: ""; position: absolute; left: 0; top: .45em; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--tinte); box-sizing: border-box; background: var(--grund); }
.kette li:last-child::before { background: var(--sig); border-color: var(--sig); }
.kette li:not(:last-child)::after { content: ""; position: absolute; left: 5px; top: calc(.45em + 16px); height: calc(100% + 2.25rem - 20px); width: 2px; background: var(--linie); }
.kette strong { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.75rem); font-stretch: 112%; font-weight: 700; }
.kette span { color: var(--tinte-2); font-size: .9375rem; }
@media (min-width: 52rem) {
  .kette { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
  .kette li { padding: 1.75rem 0 0; }
  .kette li::before { top: 0; }
  .kette li:not(:last-child)::after { left: 20px; right: 1rem; top: 5px; height: 2px; width: auto; }
}
.kette-notiz { margin-top: 2rem; color: var(--tinte-2); max-width: 52ch; font-size: .9375rem; }
.fragen details p a { color: inherit; }
.plan tr.verpasst th, .plan tr.verpasst td { background: var(--flaeche); }
.plan tr.verpasst th { padding-left: .5rem; }
.woche-notiz { margin: 2rem 0 0; display: flex; flex-direction: column; gap: .3rem; font-family: "Caveat", "Segoe Print", "Bradley Hand", cursive; font-size: 1.625rem; line-height: 1.1; color: #FF6A2C; transform: rotate(-1.5deg); transform-origin: left; max-width: 22ch; }
.woche-notiz svg { stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.woche-notiz .pf-r { display: none; width: 4.5rem; height: 3.25rem; }
.woche-notiz .pf-u { width: 1.5rem; height: 2.5rem; margin-left: 2rem; }
@media (min-width: 52rem) { .woche-notiz { flex-direction: row; align-items: flex-end; max-width: none; } .woche-notiz span { max-width: 18ch; } .woche-notiz .pf-r { display: block; margin: 0 0 1.2rem .5rem; } .woche-notiz .pf-u { display: none; } }
.woche-text .woche-notiz { color: #FF6A2C; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .woche-text .woche-notiz { color: #C2410C; } }
@media (min-width: 72rem) {
  .app { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 5rem; align-items: start; }
  .app-kopf { position: sticky; top: 3rem; }
  .app .app-reihe { margin-top: 0; }
  .app .fussnote { grid-column: 2; }
}
.app-lead { margin-top: 1.25rem; color: var(--tinte-2); max-width: 36ch; font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); }
.woche-notiz span { max-width: 20ch !important; }
.woche { grid-template-columns: 1fr !important; }
.plan-paar { display: grid; gap: 3rem; }
@media (min-width: 52rem) { .plan-paar { grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); } }
.plan-paar .plan-kopf span:first-child { color: var(--tinte); font-weight: 600; font-size: .9375rem; }
.plan-ist tr.verpasst .zeit, .plan-ist tr.verpasst .sp { text-decoration: line-through; text-decoration-thickness: 1.5px; }
.plan:not(.plan-ist) tr th { color: var(--tinte); }
.woche-fuss { margin-top: -1.5rem; }
@media (min-width: 52rem) { .woche-text .woche-notiz { flex-direction: column; align-items: flex-start; margin-bottom: -1rem; } .woche-text .woche-notiz .pf-r { display: none; } .woche-text .woche-notiz .pf-u { display: block; margin-left: 3rem; } }
@media (min-width: 52rem) { .woche-text { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 4rem; align-items: end; } .woche-text h2 { grid-column: 1 / -1; } }
.plan .art { color: var(--tinte-2); }
.plan-ist tr.verpasst .art { color: inherit; }
.plan-ist tr.geplant .st { color: var(--tinte-2); }
.kette-notiz a { color: inherit; }
@media (max-width: 30rem) { .plan-ist .st { width: 4.75rem; font-size: .75rem; } .plan-ist .zeit { width: 3.75rem; } .plan .sp { white-space: nowrap; } }
@media (min-width: 52rem) { .woche-text { align-items: start !important; } }
@media (max-width: 52rem) { .plan:not(.plan-ist) th, .plan:not(.plan-ist) td { padding: .55rem 0; } .plan:not(.plan-ist) .zeit { font-size: 1.0625rem; } }
.zielbild { margin: 0 0 1rem; display: inline-block; padding: .35rem .6rem; border: 1px solid var(--sig); border-radius: 4px; font-size: .8125rem; font-weight: 600; color: var(--tinte); }
.plan-ist tr.neu th, .plan-ist tr.neu td { background: color-mix(in srgb, var(--sig) 10%, transparent); }
.plan-ist tr.neu th { padding-left: .5rem; }
.plan .von { margin-left: .5rem; font-size: .75rem; font-weight: 600; color: var(--sig); white-space: nowrap; }
.entfaellt { margin-top: .75rem; font-size: .8125rem; color: var(--tinte-2); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .plan .von { color: #C2410C; } }
@media (max-width: 30rem) { .plan .von { display: block; margin: .1rem 0 0; } }
@media (max-width: 52rem) { .plan:not(.plan-ist) td.sp { padding-left: 1.1rem; } }
.plan-ist tr.neu .st { color: var(--sig); font-weight: 600; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .plan-ist tr.geplant.neu .st { color: #C2410C; } }
.zeitrahmen { margin: 0 0 -1rem; font-size: .9375rem; font-weight: 600; color: var(--tinte); }
.plan-paar { grid-template-areas: "rahmen" "links" "notiz" "rechts"; row-gap: 1.5rem !important; }
.plan-paar .zeitrahmen { grid-area: rahmen; margin: 0; align-self: end; }
.plan-paar > .plan:not(.plan-ist) { grid-area: links; }
.plan-paar > .plan-ist { grid-area: rechts; }
.plan-paar .woche-notiz { grid-area: notiz; margin: .5rem 0 -.5rem !important; display: flex !important; flex-direction: row !important; align-items: flex-end !important; gap: .5rem; max-width: none !important; color: #FF6A2C; font-size: clamp(1.625rem, 1.3rem + 1vw, 2rem) !important; line-height: 1.1; transform: rotate(-1.5deg); }
.plan-paar .woche-notiz span { max-width: 22ch !important; }
.plan-paar .woche-notiz svg { flex: none; width: 3rem; height: 3.5rem; margin: 0 0 -1.25rem; stroke: currentColor; fill: none; stroke-width: 2.75; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .plan-paar .woche-notiz { color: #C2410C; } }
@media (min-width: 52rem) {
  .plan-paar { grid-template-areas: "rahmen notiz" "links rechts"; row-gap: 1rem !important; margin-top: clamp(2.5rem, 4vw, 3.5rem); }
  .plan-paar .woche-notiz { margin: 0 0 .25rem !important; }
}
.woche { row-gap: 0 !important; }
.woche-fuss { margin-top: 1.25rem !important; }
.kopf, .held { width: 100%; max-width: var(--mass); margin-left: auto; margin-right: auto; justify-self: center; }
.ki-hinweis { left: max(var(--rand), calc((100% - var(--mass)) / 2 + var(--rand))) !important; }
.pause { right: max(var(--rand), calc((100% - var(--mass)) / 2 + var(--rand))) !important; }
@media (min-width: 100rem) {
  .l4 .anschnitt { width: 25rem !important; margin-top: -30rem !important; }
  .l4 .held { padding-right: calc(var(--rand) + 27rem) !important; }
  .l4 .held h1 { margin-right: -3.5rem; }
  .l4 .aussage .eckdaten { max-width: calc(100% - 30rem) !important; }
}
.anschnitt { position: relative; }
.anschnitt picture { display: block; padding: 8px; background: #0B0B0C; border: 1px solid rgba(242,242,243,.14); border-radius: 30px; }
.anschnitt picture img { display: block; border-radius: 22px !important; outline: 0 !important; }
.held-notiz { display: none; }
@media (min-width: 72rem) {
  .l4 .anschnitt picture { transform: rotate(-3deg); transform-origin: 50% 0; }
  .l4 .anschnitt figcaption { transform: rotate(-3deg); transform-origin: 0 0; margin-left: 1.5rem; }
  .held-notiz { display: flex; position: absolute; right: 0; top: -7.5rem; width: 16rem; flex-direction: column; align-items: flex-start; gap: .2rem; margin: 0; font-family: "Caveat", "Segoe Print", "Bradley Hand", cursive; font-size: 1.75rem; line-height: 1.05; color: #FF6A2C; text-align: left; transform: rotate(-4deg); pointer-events: none; }
  .held-notiz svg { width: 3.25rem; height: 3.25rem; margin-left: 1.5rem; transform: scaleX(-1); stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
}
.app img { border-radius: 20px !important; }
.ziel-bild { margin: clamp(2.5rem, 5vw, 4rem) 0 0; max-width: 52rem; }
.ziel-bild svg { display: block; width: 100%; height: auto; overflow: visible; }
.zb-spur { stroke: var(--linie); stroke-width: 3; stroke-linecap: round; }
.zb-tick line { stroke: var(--tinte-3); stroke-width: 2; stroke-linecap: round; }
.zb-heute { fill: var(--tinte); }
.zb-mast, .zb-boden { fill: var(--tinte); }
.zb-klinge { fill: var(--tinte); }
.zb-wechsel { fill: #E64812; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .zb-wechsel { fill: #FF6A2C; } }
.ziel-bild figcaption { position: relative; display: block; height: 1.6em; margin-top: .5rem; font-size: clamp(1rem, .9rem + .5vw, 1.375rem); font-stretch: 112%; font-weight: 600; }
.ziel-bild figcaption span { position: absolute; top: 0; }
.ziel-bild figcaption span:first-child { left: 0; }
.ziel-bild figcaption span:last-child { left: 89.5%; transform: translateX(-50%); font-weight: 700; white-space: nowrap; }
@media (max-width: 30rem) { .ziel-bild figcaption span:last-child { left: auto; right: 0; transform: none; } }
.ziel-karte { margin: 2.5rem 0 0; max-width: 25rem; }
.ziel-karte img { display: block; width: 100%; height: auto; border-radius: 20px; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .ziel-karte img { outline: 1px solid var(--linie); outline-offset: -1px; } }
.ziel-karte figcaption { margin-top: .6rem; font-size: .8125rem; color: var(--tinte-2); }
@media (min-width: 72rem) {
  .ziel { display: grid; grid-template-columns: minmax(0, 1fr) 25rem; column-gap: clamp(3rem, 5vw, 5rem); align-items: center; }
  .ziel-karte { margin: 0; }
}

.ziel { display: block !important; }
.ziel-buehne { position: relative; margin-top: clamp(2rem, 4vw, 3rem); }
.ziel-foto { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 20px; }
.ziel-karte { position: relative; z-index: 2; width: min(100%, 25rem); margin: -3rem 0 0 auto; padding: 0 .75rem; box-sizing: border-box; }
.ziel-karte img { display: block; width: 100%; height: auto; border-radius: 20px; outline: 0 !important; }
@media (max-width: 51.99rem) { .ziel-foto { aspect-ratio: 4 / 3; object-position: 45% 50%; } }
.ziel-unterzeilen { margin: .75rem 0 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 1.5rem; font-size: 12px; color: var(--tinte-2); }
@media (min-width: 52rem) {
  .ziel-karte { position: absolute; right: 3%; bottom: 6%; width: clamp(16rem, 30%, 25rem); margin: 0; padding: 0; }
}
@media (min-width: 52rem) and (max-width: 71.99rem) {
  .l4 .held { padding-right: calc(var(--rand) + 19rem) !important; }
  .l4 .held h1 { font-size: clamp(2.75rem, .5rem + 6.2vw, 5rem); }
  .l4 .anschnitt { position: relative; z-index: 3; width: 17rem !important; margin: -22rem var(--rand) 0 auto !important; }
  .l4 .anschnitt picture { transform: rotate(-3deg); transform-origin: 50% 0; }
  .l4 .anschnitt figcaption { transform: rotate(-3deg); transform-origin: 0 0; margin-left: 1rem; }
  .l4 .aussage { margin-top: -6rem !important; }
  .l4 .aussage .aussage-text { max-width: min(20ch, calc(100% - 20rem)) !important; }
  .l4 .aussage .eckdaten { max-width: calc(100% - 20rem) !important; }
  .held-notiz { display: flex; position: absolute; right: 0; top: -6rem; width: 13rem; flex-direction: column; align-items: flex-start; gap: .2rem; margin: 0; font-family: "Caveat", "Segoe Print", "Bradley Hand", cursive; font-size: 1.5rem; line-height: 1.05; color: #FF6A2C; transform: rotate(-4deg); pointer-events: none; }
  .held-notiz svg { width: 2.75rem; height: 2.75rem; margin-left: 1.25rem; transform: scaleX(-1); stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
}
@media (max-width: 51.99rem) {
  .held { padding-bottom: 7.5rem !important; }
  .anschnitt { position: relative; z-index: 3; width: min(calc(100% - 2 * var(--rand)), 21rem) !important; margin: -5.5rem var(--rand) 0 auto !important; }
  .anschnitt picture { transform: rotate(-2deg); transform-origin: 50% 0; }
  .anschnitt figcaption { margin-left: .5rem; }
  .ki-hinweis { top: calc(5rem + env(safe-area-inset-top, 0px)) !important; bottom: auto !important; left: auto !important; right: var(--rand) !important; }
}
.ziel-bildrahmen { position: relative; margin: 0; }
.ziel-ki { position: absolute; left: .75rem; top: .75rem; z-index: 2; padding: 3px 6px; border-radius: 4px; background: rgba(0,0,0,.6); color: #fff; font-size: 12px; font-weight: 500; line-height: 1.2; pointer-events: none; }
.ziel-bildunterschrift { margin-top: .5rem; font-size: 12px; color: var(--tinte-2); }
.ziel-karte { margin-top: 1rem !important; }
.ziel-unterzeilen { justify-content: flex-end; }
@media (min-width: 52rem) {
  .ziel-karte { margin-top: 0 !important; bottom: calc(6% + 1.75rem) !important; }
}
@media (max-width: 51.99rem) { .ziel-unterzeilen { justify-content: flex-start; } }

.strecke img.pos-rad { object-position: 50% 66%; }
.strecke img.pos-lauf { object-position: 50% 62%; }
:root { --tinte-3: #6E6E73; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --tinte-3: #8A8A90; } }
:root[data-theme="dark"] { --tinte-3: #8A8A90; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .plan tr.heute th, :root:not([data-theme="dark"]) .plan tr.heute .st { color: #C2410C; } }
.ziel-ki { left: 8px; top: 8px; padding: 2px 5px; border-radius: 3px; font-weight: 400; }

/* Bilder mit Suralo-Kit (10.10.2026): Standbild unter dem Video, Video nur ab 601 px und ohne reduzierte Bewegung */
.buehne-bild, .buehne-bild img, .buehne-video { position: absolute; inset: 0; width: 100%; height: 100%; }
.buehne-bild img { max-width: none; object-fit: cover; object-position: 68% 40%; }
.buehne-video:not([poster]) { display: none; } /* ohne JavaScript bleibt das Standbild */
@media (max-width: 600px) { .buehne-video { display: none; } .buehne-bild img { object-position: 50% 40%; } }
@media (prefers-reduced-motion: reduce) { .buehne-video { display: none; } }
.strecke figure { position: relative; }
.bild-ki { position: absolute; left: 8px; top: 8px; z-index: 2; padding: 2px 5px; border-radius: 3px; background: rgba(0,0,0,.6); color: #fff; font-size: 12px; font-weight: 400; line-height: 1.2; pointer-events: none; }
.ki-hinweis { padding: 2px 5px !important; border-radius: 3px; background: rgba(0,0,0,.6) !important; color: #fff !important; font-size: 12px !important; font-weight: 400; line-height: 1.2; letter-spacing: 0; }