/* Стартовая страница-выбор: две половины (Klassisch / Modern), при наведении половина расширяется */
:root { --ink: #100F0C; --red: #D43C20; --muted: #6E6A63; --line: rgba(16,15,12,.12); }
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body { font-family: 'Barlow', sans-serif; color: var(--ink); background: #fff; }

.ch { position: relative; min-height: 100svh; display: flex; }
.ch-top, .ch-q, .ch-note { position: absolute; left: 0; right: 0; z-index: 5; text-align: center; pointer-events: none; }
.ch-top { top: 26px; display: flex; flex-direction: column; gap: 4px; align-items: center; }
.ch-name { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 1.15rem; letter-spacing: .3em; text-transform: uppercase; color: #8A8378; }
.ch-role { font-size: .62rem; letter-spacing: .26em; text-transform: uppercase; font-weight: 700; color: var(--red); }
.ch-q {
  top: 92px; font-family: 'Barlow Condensed', sans-serif; font-weight: 900; text-transform: uppercase;
  font-size: clamp(1.8rem, 3.6vw, 3.4rem); line-height: .95; letter-spacing: -.01em; color: #fff; mix-blend-mode: difference;
}
.ch-q em { font-style: normal; color: #fff; }
.ch-note { bottom: 22px; font-size: .72rem; letter-spacing: .12em; color: #fff; mix-blend-mode: difference; opacity: .8; }

.ch-side {
  position: relative; flex: 1; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0 5vw 9vh; text-decoration: none; color: inherit; overflow: hidden;
  transition: flex .7s cubic-bezier(.2,.8,.2,1);
}
.ch-side:hover { flex: 1.35; }
.ch-classic { background: #F2F2F2; color: var(--ink); }
.ch-modern { background: #070707; color: #fff; }

/* Vorschau klassisch: Bild der Seite im Browserrahmen */
.ch-preview {
  position: absolute; left: 50%; top: 21vh; width: min(70%, 540px, 60vh); transform: translateX(-50%) rotate(-2deg);
  border-radius: 12px; overflow: hidden; box-shadow: 0 30px 70px rgba(16,15,12,.18); background: #fff;
  transition: transform .7s cubic-bezier(.2,.8,.2,1);
}
.ch-preview::before { content: ''; display: block; height: 22px; background: #e7e7e7 radial-gradient(circle at 14px 11px, #D43C20 4px, transparent 5px); }
.ch-preview img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.ch-classic:hover .ch-preview { transform: translateX(-50%) rotate(0deg) scale(1.03); }

/* Modern: Clip aus dem Showreel im Hintergrund */
.ch-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; transition: opacity .6s, transform 1.2s; }
.ch-modern::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(7,7,7,.95) 18%, rgba(7,7,7,.2) 60%, rgba(7,7,7,.6)); }
.ch-modern:hover .ch-video { opacity: .85; transform: scale(1.04); }

.ch-text { position: relative; z-index: 2; max-width: 460px; }
.ch-tag { display: block; font-size: .6rem; letter-spacing: .3em; text-transform: uppercase; font-weight: 700; color: var(--red); margin-bottom: 10px; }
.ch-side h2 { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; text-transform: uppercase; font-size: clamp(3rem, 6vw, 6rem); line-height: .85; letter-spacing: -.02em; margin-bottom: 14px; }
.ch-modern h2 { color: #fff; }
.ch-side p { font-size: 1rem; line-height: 1.6; max-width: 380px; margin-bottom: 26px; color: var(--muted); }
.ch-modern p { color: rgba(255,255,255,.72); }
.ch-btn {
  display: inline-flex; align-items: center; gap: 14px; padding: 16px 26px; font-size: .7rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; background: var(--ink); color: #fff; transition: background .25s, gap .3s;
}
.ch-modern .ch-btn { background: var(--red); }
.ch-btn i { font-style: normal; }
.ch-side:hover .ch-btn { background: var(--red); gap: 22px; }
.ch-modern:hover .ch-btn { background: #fff; color: var(--ink); }

/* Handy: Hälften untereinander */
@media (max-width: 820px) {
  .ch { flex-direction: column; padding-top: 150px; background: #F2F2F2; }
  .ch-q { top: 76px; font-size: 1.9rem; padding: 0 20px; color: var(--ink); mix-blend-mode: normal; }
  .ch-q em { color: var(--red); }
  .ch-side { min-height: auto; flex: none; padding: 28px 20px 36px; }
  .ch-side:hover { flex: none; }
  .ch-classic { padding-top: 0; }
  .ch-preview { position: relative; left: auto; top: auto; transform: rotate(-1.5deg); width: 100%; margin: 6px 0 24px; }
  .ch-classic:hover .ch-preview { transform: rotate(0); }
  .ch-modern { min-height: 420px; justify-content: flex-end; }
  .ch-modern::after { background: linear-gradient(to top, rgba(7,7,7,.97) 45%, rgba(7,7,7,.35)); }
  .ch-side p { margin-bottom: 18px; }
  .ch-note { position: static; padding: 18px 20px 26px; color: var(--muted); mix-blend-mode: normal; background: #070707; }
}
@media (prefers-reduced-motion: reduce) { .ch-side, .ch-preview, .ch-video { transition: none; } }
/* Handy: Name links, damit der Menü-Button rechts oben Platz hat */
@media (max-width: 820px) { .ch-top { top: 20px; align-items: flex-start; text-align: left; padding: 0 120px 0 20px; } }
/* Kontrast (WCAG AA): „Version 01/02“ — dunkleres Rot auf Hellgrau, helleres auf Schwarz */
.ch-classic .ch-tag { color: #B0301A; }
.ch-modern .ch-tag { color: #FF6A4D; }
/* Impressum · Datenschutz unter dem Hinweis */
.ch-legal { pointer-events: auto; display: inline-block; margin-top: 6px; font-size: .68rem; }
.ch-legal a { color: inherit; }