/* Seite einer Crystal-Keep-Jahrgangsausgabe (vorlagen/auftritt.html, vorlagen/crystal-keep.mjs, turm.js).
   Der Turm steht im Mittelpunkt: 17 Etagen zum Anklicken. Darum herum die Abschnitte nach
   der Leitidee der Board Battles: Lernstoff, Team, Taktik, Saison. */
.auftritt-page {
  --ck-bg: #0b1030; --ck-deep: #070a22; --ck-ink: #f8f5ee; --ck-muted: #c5c9de; --ck-line: #ffffff26;
  --ck-gold: #f3c56d; --ck-violet: #b99cf5; --ck-card: #141a44;
  --bar-bg: var(--ck-bg); --bar-ink: var(--ck-ink); --bar-muted: var(--ck-muted); --bar-accent: var(--ck-gold); --bar-line: var(--ck-line);
  background: var(--ck-bg); color: var(--ck-ink);
}
.auftritt-page .site-header, .auftritt-page .site-footer { background: var(--ck-bg); color: var(--ck-ink); border-color: var(--ck-line); }
.auftritt-page .site-footer { border-top: 1px solid var(--ck-line); }
.auftritt-page .site-footer p { color: var(--ck-muted); }
.auftritt-page .site-header nav a { min-height: 44px; display: inline-flex; align-items: center; }
.auftritt-page .eyebrow { color: var(--ck-gold); margin: 0; }
.auftritt-page section[id] { scroll-margin-top: calc(var(--product-bar) + 1rem); }
/* Nur die Abschnitte der Seite selbst, nicht die Blöcke darin (Kapitel, Häuser, Turmbereiche). */
.auftritt-page main > article > section { position: relative; isolation: isolate; padding-block: var(--la-section, clamp(3rem, 7vw, 6rem)); overflow-x: clip; }
.auftritt-page .button.primary { background: var(--ck-gold); color: #1a1505; }
.auftritt-page .button.primary:hover { background: #ffd98c; }
.ck-ghost { border-color: #ffffff80; color: #fff; background: #0b103066; }
.ck-ghost:hover { background: #0b1030b3; }
.auftritt-page :focus-visible { outline: 3px solid var(--ck-gold); outline-offset: 3px; }

.ck-head { max-width: 46rem; margin-bottom: clamp(1.6rem, 4vw, 3rem); }
.ck-head h2 { margin: .5rem 0 0; font-size: var(--la-h2, clamp(2rem, 4vw, 3.4rem)); line-height: 1.02; letter-spacing: -.045em; color: var(--ck-ink); }
.ck-lead { margin: .9rem 0 0; color: var(--ck-muted); font-size: var(--la-lead, 1.15rem); }

/* ── Auftakt: heller Himmel, der ganze Turm, beide Wappen ── */
.auftritt-page main .ck-hero { padding-block: clamp(2rem, 5vw, 4rem) 0; overflow: clip; color: #fff; }
.ck-hero-sky { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.ck-hero::after { content: ""; position: absolute; inset: auto 0 0; z-index: -1; height: 22%; background: linear-gradient(180deg, transparent, var(--ck-bg)); }
.ck-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #0b103080 0%, #0b103033 42%, transparent 62%); }
.ck-hero-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(1rem, 4vw, 4rem); align-items: end; }
.ck-hero-copy { align-self: center; padding-bottom: clamp(2rem, 6vw, 5rem); }
.ck-hero .eyebrow { color: #ffe3a6; }
.ck-hero h1 { margin: .6rem 0 0; font-size: clamp(3.2rem, 8.4vw, 7rem); line-height: .92; letter-spacing: -.06em; color: #fff; text-shadow: 0 4px 40px #0b103099; }
.ck-hero h1 span { display: block; margin-top: .35em; font-size: .36em; font-weight: 600; letter-spacing: .02em; color: #ffe3a6; }
.ck-hero h1.ck-wortmarke { display: grid; gap: .9rem; justify-items: start; margin-top: 1rem; }
.ck-wortmarke img { display: block; width: clamp(17rem, 40vw, 33rem); height: auto; filter: drop-shadow(0 3px 14px #0b1030e6) drop-shadow(0 0 2px #0b1030); }
.ck-wortmarke .ck-wortmarke-klasse { width: clamp(8rem, 17vw, 13rem); margin-left: clamp(5.2rem, 12.4vw, 10.2rem); }
.ck-deck { max-width: 30rem; margin: 1.3rem 0 0; font-size: clamp(1.1rem, 1.7vw, 1.4rem); line-height: 1.35; text-shadow: 0 2px 18px #0b1030; }
.ck-facts { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.ck-facts li { padding: .45rem .9rem; border: 1px solid #ffffff4d; border-radius: 999px; background: #0b103080; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font: 500 .95rem/1.2 var(--heading); }
.ck-facts b { color: #ffe3a6; font-weight: 700; }
.ck-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin: 1.7rem 0 0; }
.ck-hero-tower { position: relative; margin: 0; justify-self: center; width: min(100%, 26rem); }
.ck-hero-turm { display: block; width: 100%; height: auto; filter: drop-shadow(0 30px 40px #0b1030a6); }
.ck-hero-crest { position: absolute; z-index: 1; bottom: 16%; width: 34%; height: auto; filter: drop-shadow(0 16px 20px #0b1030b3); }
.ck-crest-knights { left: -8%; }
.ck-crest-mages { right: -8%; }

/* ── Drei Säulen auf einem Fundament ── */
.auftritt-page main .ck-saeulen { padding-block: clamp(2rem, 5vw, 4rem) 0; }
.ck-saeulen-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.7rem, 2vw, 1.4rem); margin: 0; padding: 0; list-style: none; }
.ck-saeulen-list a { display: grid; gap: .3rem; height: 100%; padding: clamp(1rem, 2.4vw, 1.8rem); border: 1px solid var(--ck-line); border-bottom: 0; border-radius: var(--la-radius-m, 16px) var(--la-radius-m, 16px) 0 0; background: linear-gradient(180deg, #1b2258, var(--ck-card)); color: var(--ck-ink); text-decoration: none; transition: transform .3s ease, border-color .3s ease; }
.ck-saeulen-list a:hover { transform: translateY(-6px); border-color: var(--ck-gold); }
.ck-saeule-art { display: flex; align-items: center; justify-content: center; gap: .5rem; height: clamp(5rem, 12vw, 9rem); margin-bottom: .6rem; }
.ck-saeule-art img { width: auto; max-width: 46%; height: 100%; object-fit: contain; filter: drop-shadow(0 10px 14px #0006); }
[data-saeule="lernstoff"] .ck-saeule-art img { max-width: 100%; border-radius: 6px; object-fit: cover; object-position: top; aspect-ratio: 4 / 3; rotate: -3deg; }
.ck-saeulen-list strong { font: 700 clamp(1.3rem, 2.6vw, 2rem)/1.05 var(--heading); letter-spacing: -.04em; }
.ck-saeulen-list a > span:last-child { color: var(--ck-muted); font-size: .98rem; line-height: 1.35; }
.ck-fundament { margin: 0; padding: .9rem 1rem; border-radius: 0 0 var(--la-radius-m, 16px) var(--la-radius-m, 16px); background: linear-gradient(90deg, #d79a3c, var(--ck-gold), #d79a3c); color: #1a1505; text-align: center; font: 700 .8rem/1.2 var(--heading); letter-spacing: .3em; text-transform: uppercase; }

/* ── Der Turm ── */
.ck-turm-layout { display: grid; grid-template-columns: minmax(0, 24rem) minmax(0, 1fr); gap: clamp(1.5rem, 5vw, 5rem); align-items: start; }
.ck-turm-bild { position: sticky; top: calc(var(--product-bar) + 1.2rem); margin: 0; width: 100%; max-width: min(24rem, calc((100vh - var(--product-bar) - 2.4rem) / var(--ratio))); justify-self: center; aspect-ratio: 1 / var(--ratio); }
.ck-turm-bild img { display: block; width: 100%; height: 100%; }
.ck-band { position: absolute; left: calc(var(--turm-links, 36%) - 3%); right: calc(var(--turm-rechts, 31%) - 3%); top: var(--top); height: var(--height); padding: 0; border: 0; border-radius: 6px; background: none; color: #fff; cursor: pointer; }
.ck-band span { position: absolute; left: 100%; top: 50%; translate: .4rem -50%; min-width: 2.1rem; padding: .12rem .4rem; border-radius: 999px; background: #0b1030cc; font: 700 .68rem/1.3 var(--heading); text-align: center; opacity: 0; transition: opacity .25s ease; pointer-events: none; }
.ck-band:hover { background: #ffffff1f; box-shadow: 0 0 0 1px #ffffff59; }
.ck-band:hover span, .ck-band[aria-current] span, .ck-band:focus-visible span { opacity: 1; }
.ck-band[aria-current] span { background: var(--ck-gold); color: #1a1505; }
/* Ruhiges Licht auf der gewählten Etage. */
.ck-turm-licht { position: absolute; left: calc(var(--turm-links, 36%) - 6%); right: calc(var(--turm-rechts, 31%) - 6%); top: var(--licht-top, 83%); height: var(--licht-height, 4.6%); border-radius: 10px; background: radial-gradient(ellipse at center, #ffe3a680, #ffe3a61f 60%, transparent 78%); box-shadow: 0 0 0 1.5px #ffe3a6b3, 0 0 34px #f3c56d80; pointer-events: none; transition: top .6s cubic-bezier(.3, .8, .2, 1); }

.ck-tafel { min-width: 0; }
.ck-leiste { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 1.3rem; padding: 0; list-style: none; }
.ck-leiste button { min-width: 2.75rem; height: 2.75rem; padding: 0 .4rem; border: 1px solid var(--ck-line); border-radius: 10px; background: #ffffff0d; color: var(--ck-ink); font: 700 .86rem/1 var(--heading); cursor: pointer; transition: background .25s ease, color .25s ease, border-color .25s ease; }
.ck-leiste button:hover { border-color: #ffffff80; }
.ck-leiste button[aria-current] { background: var(--ck-gold); border-color: var(--ck-gold); color: #1a1505; }
.ck-etage { padding: clamp(1.2rem, 3vw, 2.2rem); border: 1px solid var(--ck-line); border-radius: var(--la-radius-l, 28px); background: linear-gradient(160deg, #1b2258, var(--ck-card) 60%); scroll-margin-top: calc(var(--product-bar) + 5rem); }
.ck-etage-kopf { display: flex; align-items: center; gap: 1rem; margin: 0; }
.ck-etage-zahl { display: grid; place-items: center; min-width: 4rem; height: 4rem; padding: 0 .6rem; border-radius: 16px; background: var(--ck-gold); color: #1a1505; font: 700 1.5rem/1 var(--heading); }
.ck-etage-ort { display: grid; gap: .1rem; font: 700 .75rem/1.4 var(--heading); letter-spacing: .14em; text-transform: uppercase; }
.ck-etage-ort span:first-child { color: var(--ck-gold); }
.ck-etage-ort span:last-child { color: var(--ck-muted); }
.ck-etage h3 { margin: 1.1rem 0 0; font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1; letter-spacing: -.05em; color: #fff; }
.ck-etage-titel { margin: .5rem 0 0; color: var(--ck-muted); font-size: 1.05rem; }
.ck-fokus { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.ck-fokus li { padding: .3rem .7rem; border-radius: 999px; background: #ffffff14; font-size: .88rem; line-height: 1.3; }

/* Beispielaufgabe: so steht sie an der Tafel. */
.ck-aufgabe { margin-top: 1.4rem; padding: clamp(1rem, 2.4vw, 1.5rem); border-radius: var(--la-radius-m, 16px); background: var(--ck-deep); border: 1px solid var(--ck-line); }
.ck-aufgabe-kontext { margin: 0; color: var(--ck-muted); font-size: .98rem; }
.ck-aufgabe-satz { margin: .35rem 0 0; font: 600 clamp(1.15rem, 2.2vw, 1.55rem)/1.3 var(--heading); letter-spacing: -.02em; color: #fff; }
.ck-luecke { display: inline-block; min-width: 4.5ch; padding: 0 .35em; border-bottom: 3px solid var(--ck-gold); color: var(--ck-gold); text-align: center; transition: color .4s ease; }
.ck-luecke:empty::before { content: "?"; opacity: .7; }
.ck-antworten { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.ck-antworten li { display: flex; align-items: center; gap: .55rem; padding: .5rem .85rem .5rem .5rem; border: 1px solid var(--ck-line); border-radius: 12px; background: #ffffff0d; font: 600 1rem/1.2 var(--heading); transition: background .4s ease, border-color .4s ease, opacity .4s ease; }
.ck-antworten b { display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 8px; background: #ffffff1f; font-size: .8rem; }
.ist-geloest .ck-antworten li { opacity: .5; }
.ist-geloest .ck-antworten .ist-richtig { opacity: 1; background: #1f6b4f; border-color: #7be0b0; }
.ist-geloest .ck-antworten .ist-richtig b { background: #7be0b0; color: #06281b; }
.ck-erklaerung { margin: .9rem 0 0; color: #bfe9d4; font-size: .95rem; opacity: 0; transition: opacity .5s ease; }
.ist-geloest .ck-erklaerung { opacity: 1; }
.ck-neu { margin: 1.1rem 0 0; padding: .6rem .9rem; border-radius: 12px; background: #b99cf526; border: 1px solid #b99cf566; font-size: .95rem; }
.ck-neu strong { color: var(--ck-violet); }
.ck-bogen { margin: 1.4rem 0 0; }
.ck-bogen img { display: block; width: 100%; height: auto; aspect-ratio: 960 / 520; object-fit: cover; object-position: top; border-radius: 10px 10px 0 0; background: #fff; -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent); }
.ck-bogen figcaption { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin-top: .2rem; color: var(--ck-muted); font-size: .92rem; }
.ck-bogen figcaption span::before { content: "✓ "; color: var(--ck-gold); }
.ck-blaettern { display: flex; gap: .5rem; margin: 1.2rem 0 0; }
.ck-blaettern button { width: 3rem; height: 3rem; border: 1px solid #ffffff59; border-radius: 50%; background: none; color: #fff; font-size: 1.25rem; cursor: pointer; transition: background .25s ease, color .25s ease; }
.ck-blaettern button:hover { background: var(--ck-gold); border-color: var(--ck-gold); color: #1a1505; }

/* Kulisse des Turms: das Stimmungsbild des Bereichs, in dem die gewählte Etage liegt. */
.auftritt-page main .ck-turm { overflow: clip; }
.ck-turm-kulisse { position: absolute; inset: 0; z-index: -2; }
.ck-turm-kulisse img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1s ease; }
.ck-turm-kulisse img.ist-da { opacity: 1; }
.ck-turm:has(.ck-turm-kulisse)::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, var(--ck-bg) 0, #0b103099 12rem, #0b1030a6 calc(100% - 10rem), var(--ck-bg) 100%); }
.ck-turm:has(.ck-turm-kulisse) .ck-etage { background: linear-gradient(160deg, #1b2258f2, #141a44f2 60%); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.ck-turm:has(.ck-turm-kulisse) .ck-leiste button { background: #0b1030b3; }
.ck-turm:has(.ck-turm-kulisse) .ck-leiste button[aria-current] { background: var(--ck-gold); }

/* So läuft eine Stunde: Bühne mit Reisefilm (film/lesson-stage.css), hier nur die Zahl der Schritte. */
.ck-ablauf .sb-steps { grid-template-columns: repeat(var(--sb-n, 3), minmax(0, 1fr)); gap: clamp(.4rem, 1.2vw, 1rem); }
.ck-ablauf .sb-steps strong { font-size: clamp(.9rem, 1.3vw, 1.15rem); }
.ck-ablauf .sb-steps b { width: 2rem; height: 2rem; font-size: .9rem; }
@media (max-width: 900px) { .ck-ablauf .sb-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 1rem; } }
@media (max-width: 560px) { .ck-ablauf .sb-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── Grammatik des Jahres ── */
.ck-grammatik { background: var(--ck-deep); }
.ck-kapitel { display: grid; grid-template-columns: 9fr 6fr 2.6fr; gap: clamp(1rem, 2.4vw, 2rem); align-items: start; }
.ck-kapitel section { min-width: 0; }
.ck-kapitel h3 { margin: 0; font-size: var(--la-h3, 1.4rem); letter-spacing: -.03em; color: var(--ck-gold); }
.ck-kapitel p { margin: .3rem 0 1rem; color: var(--ck-muted); font-size: .95rem; }
.ck-kapitel ol { display: grid; grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr)); gap: .5rem; margin: 0; padding: 0; list-style: none; }
.ck-kapitel a { display: flex; gap: .7rem; align-items: center; height: 100%; padding: .65rem .8rem; border: 1px solid var(--ck-line); border-radius: 12px; background: #ffffff0a; color: var(--ck-ink); text-decoration: none; transition: border-color .25s ease, background .25s ease, transform .25s ease; }
.ck-kapitel a:hover { border-color: var(--ck-gold); background: #ffffff14; transform: translateX(3px); }
.ck-kapitel a b { flex: none; display: grid; place-items: center; min-width: 2.4rem; height: 2.4rem; padding: 0 .3rem; border-radius: 9px; background: #ffffff1a; font: 700 .8rem/1 var(--heading); }
.ck-kapitel a span { display: grid; gap: .1rem; font-size: .82rem; line-height: 1.3; color: var(--ck-muted); }
.ck-kapitel a strong { color: #fff; font: 600 1rem/1.2 var(--heading); letter-spacing: -.02em; }

/* ── Material ── */
.ck-material-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.ck-blaetter { position: relative; aspect-ratio: 5 / 4; }
.ck-blaetter img { position: absolute; width: 78%; height: auto; border-radius: 8px; background: #fff; box-shadow: 0 30px 60px -24px #000c, 0 0 0 1px #0001; }
.ck-blaetter img:first-child { right: 0; top: 4%; rotate: 5deg; }
.ck-blaetter img:last-child { left: 0; top: 16%; rotate: -4deg; }
.ck-material .ck-head { margin-bottom: 1.2rem; }
.ck-zahl { margin: 0; font: 600 1.3rem/1 var(--heading); color: var(--ck-muted); }
.ck-zahl b { font-size: clamp(3.4rem, 8vw, 6rem); letter-spacing: -.06em; color: var(--ck-gold); }
.ck-punkte { display: grid; gap: .6rem; margin: 1.2rem 0 0; padding: 0; list-style: none; font-size: 1.08rem; }
.ck-punkte li { padding-left: 1.7rem; position: relative; }
.ck-punkte li::before { content: "✓"; position: absolute; left: 0; color: var(--ck-gold); font-weight: 700; }

/* ── Teams ── */
.ck-teams { background: #0a0c1d url("../assets/crystal-keep-5/halle.webp") center / cover no-repeat; }
.ck-teams::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, var(--ck-bg) 0%, #0b103099 22%, #0b103099 80%, var(--ck-bg) 100%); }
.ck-teams .ck-head { margin-inline: auto; text-align: center; }
.ck-haeuser { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 4vw, 4rem); }
.ck-haus { text-align: center; min-width: 0; }
.ck-haus-wappen { display: block; margin-inline: auto; width: clamp(7rem, 17vw, 13rem); height: auto; filter: drop-shadow(0 20px 26px #000a); }
.ck-haus h3 { margin: .4rem 0 0; font-size: clamp(1.8rem, 4.4vw, 3.2rem); letter-spacing: -.05em; }
.ck-haus[data-haus="knights"] h3 { color: #ffd98c; }
.ck-haus[data-haus="mages"] h3 { color: #d7c2ff; }
.ck-haus ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.6rem, 1.6vw, 1.2rem); margin: 1.4rem 0 0; padding: 0; list-style: none; }
.ck-haus li { display: grid; justify-items: center; gap: .3rem; padding: .8rem .3rem; border: 1px solid #ffffff1f; border-radius: var(--la-radius-m, 16px); background: #0b103099; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font: 600 .9rem/1.2 var(--heading); transition: transform .3s ease, border-color .3s ease; }
.ck-haus li:hover { transform: translateY(-5px) scale(1.04); border-color: #ffffff66; }
.ck-haus li img { width: min(100%, 6.5rem); height: auto; filter: drop-shadow(0 8px 10px #0009); }
/* Wappen sind Schalter: Ein Klick stellt das Unterteam in die Auslosung darüber. */
.ck-haus li:has(button) { padding: 0; }
.ck-haus li button { display: grid; justify-items: center; gap: .3rem; width: 100%; height: 100%; padding: .8rem .3rem; border: 0; border-radius: inherit; background: none; color: inherit; font: inherit; cursor: pointer; }
.ck-haus li:has([aria-pressed="true"]) { border-color: var(--haus, var(--ck-gold)); box-shadow: 0 0 0 2px var(--haus, var(--ck-gold)); }
.ck-haus[data-haus="knights"] { --haus: #ffd98c; }
.ck-haus[data-haus="mages"] { --haus: #d7c2ff; }
/* Auslosung „TODAY'S TEAM“: je Haus ein Unterteam, groß gegenübergestellt (turm.js). */
.ck-los { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: clamp(.6rem, 3vw, 2.4rem); max-width: 52rem; margin: 0 auto clamp(1.6rem, 4vw, 3rem); padding: clamp(1rem, 2.6vw, 1.8rem); border: 1px solid #ffffff2e; border-radius: var(--la-radius-l, 28px); background: color-mix(in srgb, var(--ck-deep) 70%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.ck-los[hidden] { display: none; }
.ck-los figure { display: grid; justify-items: center; gap: .4rem; margin: 0; text-align: center; }
.ck-los figure img { width: clamp(6rem, 17vw, 11rem); height: auto; filter: drop-shadow(0 18px 22px #000a); }
.ck-los figcaption { font: 700 clamp(1.05rem, 2.6vw, 1.7rem)/1.1 var(--heading); letter-spacing: -.03em; }
.ck-los p { display: grid; justify-items: center; gap: .5rem; margin: 0; }
.ck-los small { color: var(--ck-gold); font: 700 .72rem/1.3 var(--heading); letter-spacing: .16em; white-space: nowrap; }
.ck-los b { font: 700 clamp(1.6rem, 4vw, 2.6rem)/1 var(--heading); color: var(--ck-muted); }
.ck-los-knopf { min-height: 2.75rem; padding: 0 1.1rem; border: 1px solid var(--ck-gold); border-radius: 999px; background: none; color: var(--ck-gold); font: 700 .92rem/1.2 var(--heading); cursor: pointer; white-space: nowrap; transition: background .25s ease, color .25s ease; }
.ck-los-knopf:hover { background: var(--ck-gold); color: var(--ck-deep); }
@media (prefers-reduced-motion: no-preference) {
  @keyframes ck-los-in { from { opacity: 0; transform: scale(.6) rotate(-8deg); } 60% { transform: scale(1.08) rotate(2deg); } }
  .ck-los figure.ist-neu img { animation: ck-los-in .6s cubic-bezier(.2, .8, .2, 1) both; }
  .ck-los.ist-am-losen figure img { opacity: .75; }
}
@media (max-width: 560px) {
  .ck-los { grid-template-columns: 1fr 1fr; }
  .ck-los p { grid-column: 1 / -1; grid-row: 2; grid-auto-flow: column; align-items: center; justify-content: center; gap: .8rem; }
  .ck-los b { font-size: 1.2rem; }
}

/* ── Kristallfront ── */
.ck-front { background: var(--ck-deep); overflow: clip; }
.ck-front .ck-head { margin-inline: auto; text-align: center; }
.ck-front-buehne { display: grid; grid-template-columns: minmax(6rem, 13rem) minmax(0, 1fr) minmax(6rem, 13rem); align-items: center; gap: clamp(.4rem, 2vw, 1.5rem); }
.ck-front-seite { display: grid; justify-items: center; text-align: center; }
.ck-front-seite img { width: min(100%, 9rem); height: auto; filter: drop-shadow(0 14px 18px #000a); }
.ck-front-seite strong { margin-top: .3rem; font: 700 clamp(1rem, 2vw, 1.4rem)/1.1 var(--heading); }
.ck-front-seite b { font: 700 clamp(2.4rem, 6.4vw, 4.6rem)/1 var(--heading); letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.ck-front-seite[data-seite="A"] b { color: #ffd98c; }
.ck-front-seite[data-seite="B"] b { color: #d7c2ff; }
.ck-front-seite small { color: var(--ck-muted); font-size: .82rem; }
.ck-front-strom { min-width: 0; }
.ck-front-strom .crystal-front { height: clamp(8rem, 22vw, 17rem); }
.ck-front-ruf { margin: 1.2rem 0 0; text-align: center; font: 700 clamp(1.2rem, 2.6vw, 1.9rem)/1.2 var(--heading); letter-spacing: -.03em; color: #fff; }

/* ── Taktik ── */
.ck-kraefte { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.7rem, 1.8vw, 1.4rem); margin: 0; padding: 0; list-style: none; }
.ck-kraefte li { padding: clamp(1rem, 2vw, 1.5rem); border: 1px solid var(--ck-line); border-radius: var(--la-radius-m, 16px); background: linear-gradient(170deg, #1b2258, var(--ck-card)); transition: transform .3s ease, border-color .3s ease; }
.ck-kraefte li:hover { transform: translateY(-6px); border-color: var(--ck-violet); }
/* Kräfte-Bühne: Film groß, daneben die Kräfte als Schalter mit Laufbalken. */
.ck-kraft-buehne { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: clamp(1rem, 2.4vw, 2rem); align-items: center; }
.ck-kraft-leinwand { margin: 0; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--ck-line); border-radius: var(--la-radius-l, 28px); background: #05071a; box-shadow: 0 50px 100px -55px #000; }
.ck-kraft-leinwand video { display: block; width: 100%; height: 100%; object-fit: cover; }
.ck-kraft-buehne .ck-kraefte { grid-template-columns: 1fr; gap: .6rem; }
.ck-kraft-buehne .ck-kraefte li { position: relative; padding: 0; overflow: hidden; }
.ck-kraft-buehne .ck-kraefte li:hover { transform: none; }
.ck-kraft-buehne .ck-kraefte button { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .9rem; width: 100%; padding: .8rem 1rem; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; opacity: .62; transition: opacity .3s ease; }
.ck-kraft-buehne .ck-kraefte button:hover, .ck-kraft-buehne .ck-kraefte button[aria-pressed="true"] { opacity: 1; }
.ck-kraft-buehne .ck-kraefte li:has([aria-pressed="true"]) { border-color: var(--ck-gold); }
.ck-kraft-buehne .ck-kraefte li:has([aria-pressed="true"])::after { content: ""; position: absolute; inset: auto 0 0; height: 3px; background: var(--ck-gold); transform: scaleX(var(--kraft-lauf, 0)); transform-origin: left; }
.ck-kraft-buehne .ck-kraft-bild { flex-direction: column; gap: .2rem; }
.ck-kraft-buehne .ck-kraft-bild img { width: clamp(2.2rem, 3.4vw, 3rem); }
.ck-kraft-text { display: grid; gap: .15rem; min-width: 0; color: var(--ck-muted); font-size: .9rem; line-height: 1.35; }
.ck-kraft-text .ck-kraft-ab { margin-top: 0; }
.ck-kraft-text strong { color: #fff; font: 700 clamp(1.05rem, 1.6vw, 1.3rem)/1.15 var(--heading); letter-spacing: -.03em; }
.ck-kraft-text strong i { color: var(--ck-muted); font-style: normal; font-weight: 400; }
@media (max-width: 900px) { .ck-kraft-buehne { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .ck-kraft-leinwand { border-radius: var(--la-radius-m, 16px); position: sticky; top: calc(var(--product-bar) + .4rem); z-index: 2; } }

.ck-kraft-film { display: block; margin: calc(-1 * clamp(1rem, 2vw, 1.5rem)) calc(-1 * clamp(1rem, 2vw, 1.5rem)) 1rem; border-radius: var(--la-radius-m, 16px) var(--la-radius-m, 16px) 0 0; overflow: hidden; aspect-ratio: 16 / 9; background: #05071a; }
.ck-kraft-film video { display: block; width: 100%; height: 100%; object-fit: cover; }
.ck-kraefte li:has(.ck-kraft-film) .ck-kraft-bild img { width: clamp(2.6rem, 4.6vw, 3.6rem); }
.ck-kraft-bild { display: flex; gap: .4rem; }
.ck-kraft-bild img { width: clamp(3.4rem, 7vw, 5.4rem); height: auto; filter: drop-shadow(0 10px 12px #0008); }
.ck-kraft-ab { display: block; margin-top: .9rem; color: var(--ck-gold); font: 700 .74rem/1.3 var(--heading); letter-spacing: .12em; text-transform: uppercase; }
.ck-kraefte h3 { margin: .3rem 0 0; font-size: 1.2rem; line-height: 1.15; letter-spacing: -.03em; color: #fff; }
.ck-kraefte h3 i { color: var(--ck-muted); font-style: normal; font-weight: 400; }
.ck-kraefte p { margin: .5rem 0 0; color: var(--ck-muted); font-size: .95rem; line-height: 1.4; }
.ck-dazu { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.7rem, 1.8vw, 1.4rem); margin: clamp(1.2rem, 3vw, 2rem) 0 0; padding: 0; list-style: none; color: var(--ck-muted); font-size: .98rem; }
.ck-dazu li { padding-top: .9rem; border-top: 2px solid var(--ck-gold); }
.ck-dazu strong { display: block; color: #fff; font: 700 1.15rem/1.2 var(--heading); letter-spacing: -.02em; }

/* ── Welten ── */
.ck-welt-buehne { margin: 0; }
.ck-welt-bild { aspect-ratio: 4 / 1; overflow: hidden; border-radius: var(--la-radius-l, 28px); border: 1px solid var(--ck-line); background: #05071a; box-shadow: 0 50px 90px -50px #000; }
.ck-welt-bild img { display: block; width: 100%; height: 100%; object-fit: cover; transition: opacity .5s ease; }
.ck-welt-bild img.ist-weg { opacity: 0; }
.ck-welt-buehne figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1rem; margin-top: 1rem; }
.ck-welt-buehne strong { font: 700 clamp(1.6rem, 4vw, 2.8rem)/1 var(--heading); letter-spacing: -.045em; }
.ck-welt-buehne figcaption span { color: var(--ck-gold); font: 700 .75rem/1.4 var(--heading); letter-spacing: .14em; text-transform: uppercase; }
.ck-bereiche { display: grid; gap: 1.4rem; margin-top: clamp(1.4rem, 3vw, 2.4rem); }
.ck-bereiche h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .8rem; margin: 0 0 .6rem; font-size: 1.15rem; letter-spacing: -.02em; color: var(--zone); }
.ck-bereiche h3 span { color: var(--ck-muted); font: 500 .85rem/1.3 var(--heading); letter-spacing: 0; }
.ck-bereiche ul { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .6rem; margin: 0; padding: 0; list-style: none; }
.ck-bereiche button { display: grid; gap: .4rem; width: 100%; padding: 0 0 .5rem; border: 1px solid var(--ck-line); border-radius: 12px; background: #ffffff0a; color: var(--ck-ink); font: 600 .86rem/1.2 var(--heading); text-align: center; cursor: pointer; overflow: hidden; transition: border-color .25s ease, transform .25s ease; }
.ck-bereiche button img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; }
.ck-bereiche button:hover { transform: translateY(-3px); border-color: #ffffff80; }
.ck-bereiche button[aria-current] { border-color: var(--zone); box-shadow: 0 0 0 2px var(--zone); }
.ck-bereiche .ist-ziel span::after { content: " ◆"; color: var(--zone); }

/* Kulisse: Die gewählte Welt füllt den ganzen Abschnitt (turm.js tauscht das Bild). Sie bleibt beim
   Scrollen stehen, damit auch weiter unten sichtbar ist, was gewählt wurde. Die Panoramen von
   Crystal Keep sind flach (4:1), deshalb liegt die Kulisse dort weich im Hintergrund. */
.auftritt-page main .ck-welten, .reihe .rb.ck-welten { background: var(--ck-deep); overflow: clip; }
.ck-welt-kulisse { position: absolute; inset: 0; z-index: -2; }
.ck-welt-kulisse img { position: sticky; top: 0; display: block; width: 100%; height: 100vh; margin-bottom: -100vh; object-fit: cover; filter: blur(22px) saturate(1.2) brightness(.9); transform: scale(1.12); transition: opacity .8s ease; }
.ck-welt-kulisse img.ist-weg { opacity: 0; }
.ck-welten::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, var(--ck-deep) 0, color-mix(in srgb, var(--ck-deep) 35%, transparent) 9rem, color-mix(in srgb, var(--ck-deep) 35%, transparent) calc(100% - 9rem), var(--ck-deep) 100%); }
/* Das große Bild bleibt oben stehen, die Bereiche darunter sind kompakt: alles auf einen Blick. */
.ck-welten .ck-head { margin-bottom: 1.2rem; }
.ck-welt-buehne { position: sticky; top: calc(var(--product-bar) + .6rem); z-index: 2; }
.ck-welt-buehne figcaption { text-shadow: 0 2px 16px #000a; }
.ck-bereiche { gap: .9rem; margin-top: 1.2rem; }
.ck-bereiche section { padding: .8rem; border: 1px solid #ffffff24; border-radius: var(--la-radius-m, 16px); background: color-mix(in srgb, var(--ck-deep) 62%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.ck-bereiche button img { aspect-ratio: 3 / 1; }

/* Mit Spielbildern: links groß die Welt im Spiel, rechts die drei Turmbereiche. */
.hat-spielbild .ck-welt-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(1rem, 2.4vw, 2rem); align-items: start; }
.hat-spielbild .ck-welt-bild { aspect-ratio: 16 / 9; }
.hat-spielbild .ck-welt-bild img { animation: none; }
.hat-spielbild .ck-bereiche { margin-top: 0; }
.hat-spielbild .ck-bereiche ul { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem; }
.hat-spielbild .ck-bereiche button { font-size: .74rem; padding-bottom: .35rem; gap: .25rem; }
.hat-spielbild .ck-bereiche button img { aspect-ratio: 5 / 2; }
.hat-spielbild .ck-bereiche li:nth-child(4) { grid-column: 1 / 2; }
@media (max-width: 900px) {
  .hat-spielbild .ck-welt-layout { grid-template-columns: 1fr; }
  .hat-spielbild .ck-bereiche { margin-top: .4rem; }
}
@media (max-width: 760px) {
  .hat-spielbild .ck-welt-bild { aspect-ratio: 16 / 9; }
  /* Am Handy bleibt das Spielbild mit Namen als fester Kopf über der Liste stehen. */
  .hat-spielbild .ck-welt-buehne { top: var(--product-bar); margin-inline: -16px; padding: .5rem 16px .6rem; background: var(--ck-deep); box-shadow: 0 14px 18px -12px #000c; }
  .hat-spielbild .ck-welt-buehne figcaption { margin-top: .5rem; }
  .hat-spielbild .ck-welt-buehne strong { font-size: 1.35rem; }
  .hat-spielbild .ck-bereiche ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hat-spielbild .ck-bereiche li:last-child { grid-column: auto; }
  .hat-spielbild .ck-bereiche li:last-child img { aspect-ratio: 5 / 2; }
}

/* ── Saison ── */
.auftritt-page main .ck-saison { overflow: clip; text-align: center; }
.ck-saison-himmel { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.ck-saison::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, var(--ck-deep) 0%, #070a2259 30%, #070a2259 70%, var(--ck-bg) 100%); }
.ck-saison .ck-head { margin-inline: auto; }
.ck-saison .ck-lead { color: #e7eaf7; }
.ck-finale-film { max-width: 58rem; margin: 0 auto; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid #ffffff38; border-radius: var(--la-radius-l, 28px); background: #05071a; box-shadow: 0 60px 120px -60px #000; }
.ck-finale-film video { display: block; width: 100%; height: 100%; object-fit: cover; }
.ck-saison:has(.ck-finale-film) .ck-stufen { margin-top: clamp(1.6rem, 4vw, 3rem); }
.ck-drache { max-width: 46rem; margin: 0 auto; }
.ck-drache img { display: block; width: 100%; height: auto; filter: drop-shadow(0 30px 30px #0009); }
.ck-stufen { display: flex; justify-content: center; align-items: flex-end; gap: clamp(.3rem, 1.4vw, 1rem); margin: 1rem 0 0; padding: 0; list-style: none; }
.ck-stufen li { display: grid; gap: .2rem; align-content: end; width: clamp(2.6rem, 9vw, 5.4rem); height: calc(3.4rem + var(--i) * .7rem); padding: .4rem .2rem; border-radius: 10px 10px 0 0; background: linear-gradient(180deg, #f3c56dd9, #f3c56d40); color: #1a1505; }
.ck-stufen b { font: 700 clamp(1.1rem, 2.6vw, 1.7rem)/1 var(--heading); }
.ck-stufen span { font-size: .68rem; line-height: 1.1; }
.ck-medaillen { display: flex; justify-content: center; gap: clamp(1rem, 4vw, 3rem); margin: clamp(1.6rem, 4vw, 3rem) 0 0; padding: 0; list-style: none; }
.ck-medaillen li { display: grid; justify-items: center; gap: .3rem; font: 700 clamp(.9rem, 1.8vw, 1.15rem)/1.2 var(--heading); }
.ck-medaillen img { width: clamp(5rem, 13vw, 9rem); height: auto; filter: drop-shadow(0 14px 18px #000a); }

/* ── Film ── */
.ck-film .ck-head { margin-inline: auto; text-align: center; }
.ck-film-rahmen { max-width: 62rem; margin: 0 auto; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--ck-line); border-radius: var(--la-radius-l, 28px); background: #000; box-shadow: 0 60px 120px -60px #000; }
.ck-film-rahmen video { display: block; width: 100%; height: 100%; }

/* ── Angebot ── */
.ck-angebot { background: var(--ck-deep); }
.ck-angebot:focus { outline: none; }
.ck-umfang { max-width: 44rem; margin: 0 0 .6rem; color: var(--ck-muted); }
.ck-umfang strong { color: var(--ck-ink); }
.ck-bald { display: inline-block; margin: 1rem 0 0; padding: .7rem 1.2rem; border: 1px solid var(--ck-gold); border-radius: 999px; color: var(--ck-gold); font: 700 1rem/1.2 var(--heading); }
.ck-weiter { margin: 1.6rem 0 0; }
.ck-weiter .text-link { color: var(--ck-ink); }

/* ── Bewegung ── */
@media (prefers-reduced-motion: no-preference) {
  /* Auftakt: Turm steigt auf, Wappen kommen von den Seiten. */
  @keyframes ck-rise { from { opacity: 0; transform: translateY(12%); } }
  @keyframes ck-left { from { opacity: 0; translate: -70% 0; rotate: -18deg; } }
  @keyframes ck-right { from { opacity: 0; translate: 70% 0; rotate: 18deg; } }
  @keyframes ck-in { from { opacity: 0; transform: translateY(1.2rem); } }
  .ck-hero-turm { animation: ck-rise 1.3s cubic-bezier(.2, .8, .2, 1) both; }
  .ck-crest-knights { animation: ck-left 1s .7s cubic-bezier(.2, .8, .2, 1) both; }
  .ck-crest-mages { animation: ck-right 1s .85s cubic-bezier(.2, .8, .2, 1) both; }
  .ck-hero-copy > * { animation: ck-in .8s cubic-bezier(.2, .8, .2, 1) both; }
  .ck-hero-copy > :nth-child(2) { animation-delay: .1s; }
  .ck-hero-copy > :nth-child(3) { animation-delay: .2s; }
  .ck-hero-copy > :nth-child(4) { animation-delay: .3s; }
  .ck-hero-copy > :nth-child(5) { animation-delay: .4s; }
  /* Tafel der Etage: Inhalt steigt bei jedem Wechsel kurz ein. */
  .ck-etage.ist-neu > * { animation: ck-in .5s cubic-bezier(.2, .8, .2, 1) both; }
  .ck-etage.ist-neu > :nth-child(n+3) { animation-delay: .06s; }
  .ck-etage.ist-neu > :nth-child(n+5) { animation-delay: .12s; }
  /* Atmendes Licht auf der gewählten Etage. */
  @keyframes ck-glow { from { opacity: .7; } to { opacity: 1; } }
  .ck-turm-licht { animation: ck-glow 1.8s ease-in-out infinite alternate; }
  /* Welt-Panorama fährt langsam zur Seite. */
  @keyframes ck-pan { from { object-position: 0% 50%; } to { object-position: 100% 50%; } }
  .ck-welt-bild img { animation: ck-pan 16s ease-in-out infinite alternate; }
  /* Drache schwebt. */
  @keyframes ck-float { from { transform: translateY(-1.5%); } to { transform: translateY(2.5%); } }
  .ck-drache img { animation: ck-float 4.5s ease-in-out infinite alternate; }
  @supports (animation-timeline: view()) {
    @keyframes ck-up { from { opacity: 0; transform: translateY(3rem); } }
    @keyframes ck-pop { from { opacity: 0; transform: translateY(2rem) scale(.8); } }
    .ck-head { animation: ck-up linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
    .ck-saeulen-list li, .ck-kraefte li, .ck-kapitel section { animation: ck-up linear both; animation-timeline: view(); animation-range: entry calc(var(--i) * 8%) entry calc(60% + var(--i) * 8%); }
    .ck-haus li, .ck-medaillen li { animation: ck-pop linear both; animation-timeline: view(); animation-range: entry calc(var(--i) * 6%) entry calc(55% + var(--i) * 6%); }
    .ck-stufen li { transform-origin: bottom; animation: ck-grow linear both; animation-timeline: view(); animation-range: entry calc(var(--i) * 6%) entry calc(60% + var(--i) * 6%); }
    @keyframes ck-grow { from { opacity: 0; transform: scaleY(0); } }
    @keyframes ck-sheet-a { from { rotate: 0deg; translate: -22% 6%; } }
    @keyframes ck-sheet-b { from { rotate: 0deg; translate: 22% -6%; } }
    .ck-blaetter img:first-child { animation: ck-sheet-a linear both; animation-timeline: view(); animation-range: entry 10% cover 40%; }
    .ck-blaetter img:last-child { animation: ck-sheet-b linear both; animation-timeline: view(); animation-range: entry 10% cover 40%; }
    .ck-haus-wappen { animation: ck-pop linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
  }
}

/* ── Schmale Bildschirme ── */
@media (max-width: 900px) {
  .ck-kapitel { grid-template-columns: 1fr; }
  .ck-kraefte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ck-turm-layout { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 1.4rem; }
}
@media (max-width: 760px) {
  .ck-hero-layout { grid-template-columns: 1fr; }
  .ck-hero-copy { padding-bottom: 0; }
  .ck-hero::before { background: linear-gradient(180deg, #0b1030a6 0%, #0b103059 55%, transparent 80%); }
  .ck-hero-tower { width: 60vw; }
  .ck-saeulen-list { grid-template-columns: 1fr; gap: .6rem; }
  .ck-saeulen-list a { grid-template-columns: 5.5rem minmax(0, 1fr); column-gap: 1rem; align-items: center; border-bottom: 1px solid var(--ck-line); border-radius: var(--la-radius-m, 16px); }
  .ck-saeule-art { grid-row: span 2; height: 4.4rem; margin: 0; }
  .ck-fundament { margin-top: .6rem; border-radius: var(--la-radius-m, 16px); }
  .ck-turm-layout { grid-template-columns: 1fr; }
  .ck-turm-bild { position: relative; top: auto; max-width: 70vw; }
  .ck-leiste { position: sticky; top: var(--product-bar); z-index: 2; flex-wrap: nowrap; margin-inline: -16px; padding: .6rem 16px; overflow-x: auto; background: var(--ck-bg); scrollbar-width: none; }
  .ck-leiste::-webkit-scrollbar { display: none; }
  .ck-leiste li { flex: none; }
  .ck-material-layout { grid-template-columns: 1fr; }
  .ck-haeuser { grid-template-columns: 1fr; gap: 2.4rem; }
  .ck-front-buehne { grid-template-columns: 1fr 1fr; row-gap: .6rem; }
  .ck-front-strom { grid-column: 1 / -1; grid-row: 2; }
  .ck-dazu { grid-template-columns: 1fr; }
  .ck-welt-bild { aspect-ratio: 5 / 2; border-radius: var(--la-radius-m, 16px); }
  .ck-bereiche ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ck-bereiche li:last-child { grid-column: 1 / -1; }
  .ck-bereiche li:last-child img { aspect-ratio: 4 / 1; }
  .ck-film-rahmen { border-radius: var(--la-radius-m, 16px); }
  .ck-etage { border-radius: var(--la-radius-m, 16px); }
}
@media (max-width: 480px) {
  .ck-kraefte { grid-template-columns: 1fr; }
  .ck-kraefte li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1rem; align-items: start; }
  .ck-kraft-bild { grid-row: span 3; flex-direction: column; }
  .ck-kraft-ab { margin-top: 0; }
  .auftritt-page .site-header .brand span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}