/* Disziplinen */
.dz {
  --dz-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dz-card-bg: var(--bg-elev);
  --dz-card-border: var(--line);
  --dz-flip-bg: #1A1714;
  --dz-flip-fg: #F7F3EC;
  --dz-flip-border: #1A1714;
  --dz-ghost: rgba(26, 23, 20, 0.055);
  --dz-spotlight: rgba(191, 174, 134, 0.14);
  --dz-spotlight-flip: rgba(191, 174, 134, 0.28);
  position: relative; color: var(--fg);
  border-top: 1px solid var(--line); background: var(--bg);
  padding: clamp(64px, 9vw, 112px) 0;
}
html[data-theme='dark'] .dz {
  --dz-card-bg: var(--void-soft);
  --dz-flip-bg: #1b1b1b;
  --dz-flip-fg: var(--bone);
  --dz-flip-border: var(--ws-gold);
  --dz-ghost: rgba(255, 255, 255, 0.08);
  --dz-spotlight: rgba(191, 174, 134, 0.22);
  --dz-spotlight-flip: rgba(191, 174, 134, 0.42);
}
.dz-inner { position: relative; display: grid; gap: 18px; max-width: 1400px; margin: 0 auto; padding: 0 clamp(24px, 4vw, 40px); }
.dz-stripe { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--ws-gold); opacity: 0.9; }
.dz-head { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: end; }
.dz-eye { margin: 0 0 10px; display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ws-gold); }
.dz-eye::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--ws-gold); }
.dz-h { margin: 0; font-family: var(--font-display); font-size: clamp(32px, 4.4vw, 60px); line-height: 0.92; letter-spacing: -0.01em; text-transform: uppercase; text-wrap: balance; color: var(--fg); }
.dz-h .red { color: var(--ws-gold); }
.dz-sub { margin: 0; max-width: 54ch; font-size: clamp(13px, 1.4vw, 16px); line-height: 1.5; color: var(--fg-mute); text-wrap: pretty; }
.dz-sub strong { color: var(--fg); font-weight: 500; }
.dz-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.dz-card {
  --mx: 50%; --my: 50%;
  position: relative; display: flex; min-height: clamp(300px, 28vw, 400px);
  flex-direction: column; justify-content: space-between; gap: clamp(10px, 1.6vw, 18px);
  padding: clamp(20px, 2.4vw, 32px); border: 1px solid var(--dz-card-border);
  background: var(--dz-card-bg); color: var(--fg); overflow: hidden; isolation: isolate; cursor: pointer;
  transition: background-color 350ms var(--dz-ease), color 350ms var(--dz-ease), border-color 350ms var(--dz-ease), opacity 500ms ease, transform 500ms ease;
}
.dz-ghost {
  position: absolute; right: -6%; bottom: -22%; z-index: 0; font-family: var(--font-display);
  font-size: clamp(140px, 22vw, 320px); line-height: 0.78; letter-spacing: -0.04em;
  color: var(--dz-ghost); user-select: none; pointer-events: none;
  transition: transform 500ms var(--dz-ease), color 350ms var(--dz-ease), opacity 350ms; will-change: transform;
}
.dz-card::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(360px circle at var(--mx) var(--my), var(--dz-spotlight), transparent 60%);
  opacity: 0; pointer-events: none; transition: opacity 240ms ease, background 350ms var(--dz-ease);
}
.dz-card::after { content: ''; position: absolute; left: 0; bottom: 0; z-index: 2; width: 0; height: 1px; background: var(--ws-gold); transition: width 280ms ease-out; }
.dz-card.is-active, .dz-card:hover, .dz-card:focus-visible { background: var(--dz-flip-bg); color: var(--dz-flip-fg); border-color: var(--dz-flip-border); outline: none; }
.dz-card.is-active::before, .dz-card:hover::before, .dz-card:focus-visible::before { opacity: 1; background: radial-gradient(360px circle at var(--mx) var(--my), var(--dz-spotlight-flip), transparent 60%); }
.dz-card.is-active::after, .dz-card:hover::after, .dz-card:focus-visible::after { width: 100%; }
.dz-card.is-active .dz-ghost, .dz-card:hover .dz-ghost, .dz-card:focus-visible .dz-ghost { color: var(--ws-gold); opacity: 0.28; transform: translate(-10px, -10px); }
.dz-card.is-active .dz-arr, .dz-card:hover .dz-arr, .dz-card:focus-visible .dz-arr { color: var(--ws-gold); opacity: 1; transform: translate(4px, -4px); }
.dz-card > * { position: relative; z-index: 1; }
.dz-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.dz-num { font-family: var(--font-mono); font-size: clamp(10px, 1.05vw, 12px); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ws-gold); white-space: nowrap; }
.dz-arr { font-family: var(--font-mono); font-size: clamp(14px, 1.6vw, 18px); line-height: 1; opacity: 0.55; transition: transform 350ms var(--dz-ease), color 240ms, opacity 240ms; }
.dz-bottom { display: flex; flex-direction: column; gap: clamp(6px, 1vw, 12px); }
.dz-title { margin: 0; font-family: var(--font-display); font-size: clamp(28px, 4.2vw, 56px); line-height: 0.94; letter-spacing: -0.01em; text-transform: uppercase; text-wrap: balance; }
.dz-lede { margin: 0; font-family: var(--font-body); font-size: clamp(14px, 1.7vw, 18px); font-weight: 500; line-height: 1.3; }
.dz-body { margin: 0; max-width: 30ch; font-size: clamp(12px, 1.3vw, 14.5px); line-height: 1.5; opacity: 0.74; }
.dz-foot { display: flex; justify-content: space-between; align-items: center; gap: 18px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-mute); }
.dz-foot .red { color: var(--ws-gold); }
.dz-foot a { padding-bottom: 2px; border-bottom: 1px solid var(--line); color: var(--fg); text-decoration: none; transition: color 0.2s, border-color 0.2s; }
.dz-foot a:hover { color: var(--ws-gold); border-color: var(--ws-gold); }

@media (max-width: 1080px) {
  .dz-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .dz-head { grid-template-columns: 1fr; gap: 8px; align-items: start; }
  .dz-sub { max-width: 60ch; }
}
@media (max-width: 680px) {
  .dz-h { font-size: 36px; }
  .dz-grid { grid-template-columns: 1fr; gap: 10px; }
  .dz-card { aspect-ratio: 5 / 4; min-height: 0; padding: 22px; }
  .dz-ghost { right: -10%; bottom: -22%; font-size: 240px; }
  .dz-title { font-size: 34px; }
  .dz-foot { flex-direction: column; align-items: flex-start; gap: 10px; }
}
@media (prefers-reduced-motion: no-preference) {
  .dz-card { opacity: 0; transform: translateY(18px); }
  .dz-card.is-visible { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .dz-card, .dz-card::before, .dz-card::after, .dz-ghost, .dz-arr { transition-duration: 0ms !important; }
  .dz-card { opacity: 1; transform: none; }
}

/* FAQ, Abschluss-CTA, Platzhalter: Grundstile */
.ws-faq { border-top: 1px solid var(--line); background: var(--bg); padding: clamp(64px, 9vw, 112px) 0; }
.ws-faq-inner { max-width: 768px; margin: 0 auto; padding: 0 clamp(24px, 4vw, 40px); }
.ws-faq h2 { margin: 0; font-family: var(--font-display); font-size: clamp(32px, 5vw, 56px); line-height: 0.92; letter-spacing: 0.005em; text-transform: uppercase; color: var(--fg); }
.ws-faq-sub { margin: 24px 0 0; font-size: 18px; line-height: 1.6; color: var(--fg-mute); }
.ws-faq-list { margin-top: 48px; border-bottom: 1px solid var(--line); }
.ws-faq-item { border-top: 1px solid var(--line); }
.ws-faq-item > summary { list-style: none; cursor: pointer; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 0; color: var(--fg); font-weight: 500; }
.ws-faq-item > summary::-webkit-details-marker { display: none; }
.ws-faq-chev { margin-top: 2px; flex: none; color: var(--ws-gold); transition: transform 300ms ease; }
.ws-faq-item[open] .ws-faq-chev { transform: rotate(90deg); }
.ws-faq-item p { margin: 0 0 12px; font-size: 14px; line-height: 1.7; color: var(--fg-mute); }
.ws-faq-item p:last-child { padding-bottom: 20px; }

.ws-final { background: var(--ink); color: var(--bone); padding: clamp(80px, 12vw, 128px) 0; }
.ws-final-inner { max-width: 768px; margin: 0 auto; padding: 0 clamp(24px, 4vw, 40px); text-align: center; }
.ws-final h2 { margin: 0; font-family: var(--font-display); font-size: clamp(32px, 5vw, 52px); line-height: 0.92; letter-spacing: 0.005em; text-transform: uppercase; }
.ws-final p { margin: 24px auto 0; max-width: 42rem; font-size: 18px; line-height: 1.6; color: var(--bone-soft); }
.ws-final a { display: inline-flex; align-items: center; margin-top: 40px; background: var(--ws-gold); color: var(--bone); padding: 16px 32px; font-size: 16px; font-weight: 500; text-decoration: none; transition: transform 200ms ease; }
.ws-final a:hover { transform: scale(1.02); color: var(--bone); }

.ws-placeholder { border-top: 1px solid var(--line); background: var(--bg); padding: clamp(56px, 8vw, 96px) 0; }
.ws-placeholder-inner { max-width: 1400px; margin: 0 auto; padding: 0 clamp(24px, 4vw, 40px); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg-mute); }
.ws-placeholder-inner b { color: var(--fg); font-weight: 400; }

/* Menüpille: Sticky-Glas */
#ws-topnav { background: transparent; border: 1px solid transparent; box-shadow: none;
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease, backdrop-filter .25s ease, -webkit-backdrop-filter .25s ease; }
#ws-topnav.is-stuck, #ws-topnav.is-mega-open {
  -webkit-backdrop-filter: blur(28px) saturate(1.4); backdrop-filter: blur(28px) saturate(1.4);
  background: rgba(247, 243, 236, 0.55); border-color: rgba(0, 0, 0, 0.06); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06); }
html[data-theme='dark'] #ws-topnav.is-stuck, html[data-theme='dark'] #ws-topnav.is-mega-open {
  background: rgba(12, 12, 11, 0.5); border-color: rgba(255, 255, 255, 0.08); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); }
#ws-topnav.is-stuck.is-over-video-zone { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(247, 243, 236, 0.82); }
html[data-theme='dark'] #ws-topnav.is-stuck.is-over-video-zone { background: rgba(12, 12, 11, 0.82); }
@media (prefers-reduced-motion: reduce) { #ws-topnav { transition: none; } }

/* Platzhalter-Abschnitt: ausgeblendet */
.ws-placeholder { height: 0; overflow: hidden; padding: 0; border: 0; }

/* Hero-Headline: etwas mehr Luft zwischen den Zeilen */
.ws-h-h1 { line-height: 0.885; }
