/ single). */
.tf-area-card__link {
display: block;
color: inherit;
text-decoration: none;
transition: border-color 120ms ease-out;
border: 1px solid transparent;
}
.tf-area-card__link:hover,
.tf-area-card__link:focus-visible {
border-color: var(--wp--preset--color--ash);
}
.tf-area-card__link:focus-visible {
outline: 3px solid var(--wp--preset--color--acid);
outline-offset: 2px;
}
/* ── Phase 5: Program Item (Plan 05-07) ───────────────────────────────────── */
.tf-program-row {
/* extends .tf-row from Plan 05-05 */
}
.tf-program-row--missing {
padding-block: 1rem;
color: var(--wp--preset--color--ash);
}
.tf-row__icon {
/* 110px column, same width as .tf-row__time */
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem; /* Typography Exception e — decoration glyph, not text */
color: var(--wp--preset--color--ash);
padding-top: 0.5rem;
}
.tf-cta--sm {
padding: 0.45rem 1rem;
font-size: 0.875rem;
margin-top: 0.75rem;
display: inline-block;
}
.tf-cta--flat {
box-shadow: none; /* suppresses Acid Glow Default — One-Glow Rule guard (UI-SPEC §Acid as Signal) */
}
/* ── Phase 5: Timetable (Plan 05-08) ──────────────────────────────────────── */
.tf-timetable {
width: 100%;
}
.tf-timetable__title {
font-size: clamp(2rem, 5vw, 3.5rem);
margin-bottom: 2rem;
}
/* D-21: restructured grid — header row (auto) above body row (1fr).
* Removes the per-area column wrapper; area-headers and area-bodies are now
* direct grid children so ticks and cells share the same Y=0 baseline (row 2). */
.tf-timetable__grid {
display: grid;
grid-template-columns: 60px repeat(var(--tf-area-count, 3), 1fr);
grid-template-rows: auto 1fr; /* row 1 = header strip; row 2 = body grid */
gap: 0;
border: 1px solid var(--wp--preset--color--asphalt);
}
.tf-timetable__axis-corner {
/* row 1, column 1 — empty space above the time-axis */
border-right: 1px solid var(--wp--preset--color--asphalt);
border-bottom: 1px solid var(--wp--preset--color--asphalt);
background: var(--wp--preset--color--ink);
}
.tf-timetable__area-header {
/* row 1, columns 2..N+1 — area name labels above each body */
padding: 0.75rem 0.5rem;
font-size: clamp(1rem, 2vw, 1.5rem);
border-right: 1px solid var(--wp--preset--color--asphalt);
border-bottom: 1px solid var(--wp--preset--color--asphalt);
background: var(--wp--preset--color--ink);
}
.tf-timetable__area-header:last-child { border-right: none; }
.tf-timetable__area-header .tf-headliner {
font-size: clamp(1rem, 2.5vw, 1.75rem); /* Typography Exception b — half of default headliner */
}
.tf-timetable__area-header a { color: inherit; text-decoration: none; }
.tf-timetable__area-header a:hover { opacity: 0.75; text-decoration: none; }
.tf-timetable__area-header a:focus-visible {
outline: 3px solid var(--wp--preset--color--acid);
outline-offset: 2px;
}
.tf-timetable__time-axis {
/* row 2, column 1 — time labels */
position: relative;
overflow: hidden; /* clip the terminal tick (top = grid_height) whose label would otherwise spill below the container; mirrors area-body's WR-01 clip */
border-right: 1px solid var(--wp--preset--color--asphalt);
}
.tf-timetable__tick {
position: absolute;
left: 0; right: 0;
font-size: 0.75rem; /* Typography Exception d */
color: var(--wp--preset--color--ash);
padding-left: 0.25rem;
border-top: 1px solid var(--wp--preset--color--asphalt);
}
.tf-timetable__area-body {
/* row 2, columns 2..N+1 — absolute-positioned cells */
position: relative;
overflow: hidden; /* WR-01: clip cells that exceed grid height */
border-right: 1px solid var(--wp--preset--color--asphalt);
}
.tf-timetable__area-body:last-child { border-right: none; }
.tf-timetable__cell {
position: absolute;
left: 0;
right: 0;
padding: 0.5rem;
border: 1px solid var(--wp--preset--color--asphalt);
overflow: hidden;
box-sizing: border-box;
}
/* D-17 (revised): live cell = dim acid bg + acid border around the whole cell.
* Replaces the previous ::after 2px bar + glow — also removes the One-Glow Rule
* pressure since the timetable no longer emits a box-shadow surface. */
.tf-timetable__cell--live {
background: oklch(0.82 0.19 120 / 0.12);
border-color: var(--wp--preset--color--acid);
}
.tf-timetable__cell-act {
font-size: clamp(0.875rem, 1.5vw, 1.25rem);
display: block;
}
.tf-timetable__cell-time {
font-size: 0.75rem;
color: var(--wp--preset--color--ash);
margin-top: 0.25rem;
}
/* ── D-16: Mobile (<768px) — degenerate to per-area stacked vertical lists ── */
@media (max-width: 767px) {
/* Flat DOM order is corner, H1..H3, axis, B1..B3 — at desktop the 4x2
* CSS Grid auto-places those into header-row / body-row, but on mobile
* we want each area-header immediately followed by its area-body.
* Switch to flex column and use `order` to interleave H1 B1 H2 B2 H3 B3.
* `:nth-child(N of selector)` is Selectors Level 4 (Chrome 111+, Firefox 113+,
* Safari 9+). Hardcoded for up to 3 areas; extend if a 4th area is added. */
.tf-timetable__grid {
display: flex;
flex-direction: column;
}
.tf-timetable__area-header:nth-child(1 of .tf-timetable__area-header) { order: 1; }
.tf-timetable__area-body:nth-child(1 of .tf-timetable__area-body) { order: 2; }
.tf-timetable__area-header:nth-child(2 of .tf-timetable__area-header) { order: 3; }
.tf-timetable__area-body:nth-child(2 of .tf-timetable__area-body) { order: 4; }
.tf-timetable__area-header:nth-child(3 of .tf-timetable__area-header) { order: 5; }
.tf-timetable__area-body:nth-child(3 of .tf-timetable__area-body) { order: 6; }
.tf-timetable__axis-corner,
.tf-timetable__time-axis { display: none; }
.tf-timetable__area-header {
display: block;
border-right: none;
background: var(--wp--preset--color--ink);
padding: 1rem 0.5rem;
}
.tf-timetable__area-body {
position: static;
height: auto !important;
border-right: none;
border-bottom: 1px solid var(--wp--preset--color--asphalt);
margin-bottom: 2rem;
}
.tf-timetable__cell {
position: static;
height: auto !important;
top: auto !important;
display: grid;
grid-template-columns: 110px 1fr;
gap: 1rem;
padding-block: 1rem;
border-bottom: 1px solid var(--wp--preset--color--asphalt);
border-left: none;
}
.tf-timetable__cell-time {
order: -1;
font-size: 0.875rem;
padding-top: 0.25rem;
}
.tf-timetable__cell-act {
font-size: clamp(1.75rem, 4vw, 2.75rem); /* Typography Exception a — full Headliner on mobile */
}
}
/* ── Phase 5 D-22: Act + Side-Program presentation blocks (Plan 05-12) ──── */
.tf-act,
.tf-side-program {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
width: 100%;
margin-block: 3rem;
background: var(--wp--preset--color--ink);
align-items: stretch;
}
.tf-act--image-right .tf-act__image,
.tf-side-program--image-right .tf-side-program__image {
order: 2;
}
.tf-act__image,
.tf-side-program__image {
background-size: cover;
background-position: center;
background-color: var(--wp--preset--color--ink);
min-height: clamp(320px, 40vw, 450px);
/* When this class is on an ![]()
(act block, post Plan 01), behave as a cover-fitted cell.
* When it's on a (side-program empty-state, side-program with inline background-image),
* width/height/object-fit/display are no-ops — safe to apply universally. */
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
.tf-act__image--empty,
.tf-side-program__image--empty {
background-image: none;
background-color: var(--wp--preset--color--asphalt);
}
.tf-side-program__image--glyph {
display: flex;
align-items: center;
justify-content: center;
background-color: var(--wp--preset--color--ink);
border: 1px solid var(--wp--preset--color--asphalt);
}
.tf-side-program__glyph {
font-size: clamp(6rem, 15vw, 12rem);
line-height: 1;
}
.tf-act__meta,
.tf-side-program__meta {
padding: clamp(1.5rem, 4vw, 3rem);
display: flex;
flex-direction: column;
gap: 1rem;
justify-content: center;
}
.tf-act__title,
.tf-side-program__title {
font-size: clamp(2rem, 4vw, 3rem);
color: var(--wp--preset--color--bone);
margin: 0;
}
.tf-act__crew,
.tf-side-program__short {
font-size: 0.875rem;
color: var(--wp--preset--color--ash);
margin: 0;
}
.tf-act__bio,
.tf-side-program__long {
font-size: 1rem;
line-height: 1.65;
color: var(--wp--preset--color--bone);
max-width: 65ch;
margin: 0;
}
.tf-act__social {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 0.5rem;
}
.tf-social-pill {
display: inline-block;
padding: 0.4rem 0.9rem;
border: 1px solid var(--wp--preset--color--ash);
color: var(--wp--preset--color--bone);
text-decoration: none;
font-size: 0.75rem;
letter-spacing: 0.05em;
transition: background-color 120ms ease-out, color 120ms ease-out;
}
.tf-social-pill:hover,
.tf-social-pill:focus-visible {
background: var(--wp--preset--color--bone);
color: var(--wp--preset--color--ink-deep);
}
.tf-social-pill:focus-visible {
outline: 3px solid var(--wp--preset--color--acid);
outline-offset: 2px;
}
.tf-act--missing,
.tf-side-program--missing {
display: block; /* drop the 2-col grid for the empty admin notice */
padding: 1rem;
}
/* Mobile column-stack: image on top, meta below — regardless of imagePosition. */
@media (max-width: 767px) {
.tf-act,
.tf-side-program {
display: block;
}
.tf-act--image-right .tf-act__image,
.tf-side-program--image-right .tf-side-program__image {
order: 0; /* reset; image always first on mobile */
}
.tf-act__image,
.tf-side-program__image {
min-height: clamp(240px, 60vw, 360px);
}
}
/* ============================================================================ */
/* === Backlog 999.1 — page-wide butterfly background (wing-flap animation) === */
/* ============================================================================ */
/* The image is split in half (left/right wings) via background-position +
* background-size: 200% 100%. perspective on the container creates the 3D
* pivot space; each wing rotates around its inner edge so the meeting point
* at the body stays anchored. mix-blend-mode: lighten drops out the dark
* image background so only the acid wings glow through (mirrors .tf-hero
* pattern at line ~526). z-index: -1 keeps it behind all content. */
:root {
--tf-butterfly-speed: 2.4s;
}
.tf-butterfly-bg {
position: fixed;
inset: 0;
display: flex;
justify-content: center;
align-items: center;
pointer-events: none;
z-index: -1;
perspective: 1200px;
opacity: 0.18;
mix-blend-mode: lighten;
}
.tf-butterfly-bg__wing {
width: min(38vw, 460px);
aspect-ratio: 4 / 5; /* matches each half of the source butterfly's proportion */
background-image: var(--tf-butterfly-image);
background-size: 200% 100%; /* render full image at 2x wing-width so each wing displays one half */
background-repeat: no-repeat;
will-change: transform;
}
.tf-butterfly-bg__wing--left {
background-position: left center;
transform-origin: right center; /* hinge at the body — the inner edge */
animation: tf-butterfly-flap-left var(--tf-butterfly-speed) infinite ease-in-out alternate;
}
.tf-butterfly-bg__wing--right {
background-position: right center;
transform-origin: left center;
animation: tf-butterfly-flap-right var(--tf-butterfly-speed) infinite ease-in-out alternate;
}
@keyframes tf-butterfly-flap-left {
from { transform: rotateY(-12deg); }
to { transform: rotateY(12deg); }
}
@keyframes tf-butterfly-flap-right {
from { transform: rotateY(12deg); }
to { transform: rotateY(-12deg); }
}
@media (prefers-reduced-motion: reduce) {
.tf-butterfly-bg__wing--left,
.tf-butterfly-bg__wing--right { animation: none; }
}
/* === Phase 6: Partner Grid + Partner Detail ================================ */
/* --- partner-grid block --------------------------------------------------- */
.tf-partner-grid {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
padding: 4rem 1.5rem;
max-width: 1280px;
margin-inline: auto;
}
.tf-partner__tile {
display: block;
padding: 1rem 1.5rem;
min-width: 200px;
border: 2px solid; /* color set by modifier */
text-decoration: none;
color: inherit;
cursor: pointer;
/* No transition — static collage; no hover visual per REQ-partner-wall */
/* No border-radius — sharp corners per design system */
/* No box-shadow — One-Glow Rule reserves acid glow for the ticket CTA */
}
.tf-partner__tile--primary {
background: var(--wp--preset--color--acid);
color: var(--wp--preset--color--ink-deep);
border-color: var(--wp--preset--color--acid);
}
.tf-partner__tile--secondary {
background: var(--wp--preset--color--ink);
color: var(--wp--preset--color--bone);
border-color: var(--wp--preset--color--asphalt);
}
.tf-partner__name {
font-family: 'Anton', 'Inter', sans-serif;
font-size: 1.25rem;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.04em;
line-height: 1;
}
.tf-partner__role {
font-family: 'JetBrains Mono', 'Roboto Mono', monospace;
font-size: 0.75rem;
font-weight: 400;
letter-spacing: 0.06em;
margin-top: 0.5rem;
line-height: 1.4;
}
.tf-partner__tile--primary .tf-partner__role {
color: var(--wp--preset--color--ink-deep);
}
.tf-partner__tile--secondary .tf-partner__role {
color: var(--wp--preset--color--ash);
}
/* Focus-visible: acid outline (NOT box-shadow) — mirrors .tf-area-card__link:focus-visible */
.tf-partner__tile:focus-visible {
outline: 3px solid var(--wp--preset--color--acid);
outline-offset: 2px;
}
/* Empty state */
.tf-partner__empty {
width: 100%;
color: var(--wp--preset--color--ash);
}
/* --- partner-detail block ------------------------------------------------- */
.tf-partner-detail {
display: flex;
flex-direction: column;
gap: 2rem;
}
.tf-partner-detail__role {
font-family: 'JetBrains Mono', 'Roboto Mono', monospace;
font-size: 0.875rem;
font-weight: 400;
letter-spacing: 0.06em;
line-height: 1.4;
text-transform: uppercase;
color: var(--wp--preset--color--ash);
margin: 0;
}
.tf-partner-detail__bio-short,
.tf-partner-detail__bio-long {
font-family: 'Inter', system-ui, sans-serif;
font-size: 1rem;
font-weight: 400;
line-height: 1.65;
color: var(--wp--preset--color--bone);
}
.tf-partner-detail__bio-short p,
.tf-partner-detail__bio-long p {
margin-block: 0 1rem;
}
.tf-partner-detail__url {
/* no additional layout — .tf-cta is inline-block */
}
/* .tf-cta--flat variants — base rule lives at line 1215. Only :hover and :focus-visible new. */
.tf-cta--flat:hover,
.tf-cta--flat:focus-visible {
box-shadow: none; /* do NOT inherit --tf-acid-glow-strong on editorial CTAs */
}
/* ============================================================================ */
/* === PHASE 7: RCB Banner Override (Channel A — outer wrappers only) ========= */
/* ============================================================================ */
/* IMPORTANT: RCB 5.x uses CSS-in-JS with hashed inner class names. */
/* Inner elements (buttons, description, typography) CANNOT be styled here. */
/* All inner-element styling lives in 54 native rcb-banner-*-design-* options */
/* seeded by scripts/seed-rcb-config.sh — Channel B (rcb-banner-custom-css-css)*/
/* is intentionally EMPTY per the 2026-05-12 architecture pivot (see 07-05- */
/* SUMMARY.md). RCB renders the native option values via its own CSS-in-JS. */
/* ============================================================================ */
.rcb-banner,
.real-cookie-banner {
background: var(--wp--preset--color--ink-deep) !important;
border-top: 1px solid var(--wp--preset--color--asphalt) !important;
border-radius: 0 !important;
padding: 1rem 1.5rem !important;
position: fixed !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
z-index: 49 !important; /* tf-banner sticky sits at z-index:50 (top) — no spatial overlap */
}
/* Entrance fade — opacity only per CON-motion (no translateY) */
@media (prefers-reduced-motion: no-preference) {
.rcb-banner,
.real-cookie-banner {
transition: opacity 240ms cubic-bezier(0.22, 1, 0.36, 1);
}
}
/* Override any RCB slide-in under reduce — [Motion verification tautology] memory:
must be tested at runtime under BOTH prefers-reduced-motion states, not just
by grepping for this media query. */
@media (prefers-reduced-motion: reduce) {
.rcb-banner,
.real-cookie-banner {
transform: none !important;
transition: none !important;
animation: none !important;
}
}
/* ============================================================================ */
/* === PHASE 7: Per-Embed Content Blocker Override (Channel A — outer only) === */
/* ============================================================================ */
.rcb-content-blocker {
background: var(--wp--preset--color--ink) !important;
border: 1px solid var(--wp--preset--color--asphalt) !important;
border-radius: 0 !important;
padding: 1rem 1.5rem !important;
min-height: 80px !important;
/* box-shadow: NONE — One-Glow Rule: only the primary 'Akzeptieren' CTA in the
banner may glow; placeholder accept link is a flat acid text link (no glow) */
}
@media (prefers-reduced-motion: reduce) {
.rcb-banner *,
.rcb-content-blocker * {
transform: none !important;
transition: none !important;
animation: none !important;
}
}
/* ============================================================================ */
/* === 999.18 — Wartung page ================================================== */
/* ============================================================================ */
/* Content overlay for the /wartung/ maintenance page rendered by LightStart
* via wpmm_settings.design.page_id. The page-wartung FSE template is full-bleed
* (no header/footer parts); this wrapper sits in the post_content above the
* .tf-butterfly-bg animation (which is z-index:-1 and covers the full viewport).
* Body background is #050805 (ink-deep) — set in seed-lightstart.sh design.bg_color.
*/
.tf-wartung-page {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 60vh;
padding: clamp(2rem, 6vw, 5rem) clamp(1rem, 4vw, 3rem);
text-align: center;
color: #F5F4E8; /* bone — Strobe Bone, text on dark */
}
.tf-wartung-page__heading {
font-family: Anton, sans-serif;
font-size: clamp(2.25rem, 6vw, 5rem);
line-height: 1.05;
letter-spacing: 0.01em;
color: #B6D41C; /* acid — Wet-Paint Lime, canvas-verified */
margin: 0 0 1rem;
}
.tf-wartung-page__text {
font-family: Inter, system-ui, sans-serif;
font-size: clamp(1rem, 2vw, 1.375rem);
line-height: 1.55;
color: #F5F4E8; /* bone */
margin: 0;
max-width: 36ch;
}