/* ─── GLOBALE VARIABLEN & RESET ─── */
:root {
  --y: #F7E94B;   /* jankurtz yellow · Pantone 101 C */
  --k: #231f20;   /* night black */
  --b: #38C2FA;   /* jankurtz blue */
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'News Cycle', sans-serif;
  background-color: var(--y);
  color: var(--k);
  -webkit-font-smoothing: antialiased;
}

/* ── REVEAL ANIMATION ── */
.rv {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.rv.in { opacity: 1; transform: none; }
.d1 { transition-delay: 0.13s; }

/* ════ HERO ════ */
.hero-split {
  display: flex; flex-direction: column;
  min-height: 100svh; background: var(--y); position: relative;
}
.hero-image-pane { width: 100%; min-height: 50vh; }
.hero-image-pane img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-content-pane {
  display: flex; flex-direction: column; flex: 1;
  justify-content: center; padding: 40px 24px 80px; background: var(--y);
}
.hero-logo { width: min(60vw, 240px); height: auto; margin-bottom: 6vh; }
.hero-statement {
  font-size: clamp(38px, 9vw, 90px); font-weight: 700;
  letter-spacing: -.04em; color: var(--k); line-height: .95;
}
.hero-bottom { margin-top: 6vh; }
.hero-meta {
  font-size: 11px; font-weight: 700;
  letter-spacing: .24em; text-transform: uppercase; opacity: .3;
}
.scroll-cue {
  position: absolute; bottom: 24px; left: 24px;
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; text-transform: uppercase; font-weight: 700;
  letter-spacing: .1em; animation: bob 2s infinite ease-in-out;
}
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(7px); } }

@media (min-width: 900px) {
  .hero-split { flex-direction: row; display: grid; grid-template-columns: 1.2fr 1fr; }
  .hero-image-pane { height: 100svh; min-height: auto; }
  .hero-content-pane { padding: 80px 60px; justify-content: space-between; }
  .hero-logo { margin-bottom: 0; width: min(20vw, 260px); }
  .hero-bottom { margin-top: 0; }
  .scroll-cue { left: auto; right: 60px; }
}

/* ════ SPIRIT ════ */
.spirit-section { background-color: var(--k); color: #fff; padding: 80px 24px; }
.spirit-container { max-width: 1400px; margin: 0 auto; }
.section-title { font-size: clamp(32px, 5vw, 64px); margin-bottom: 40px; font-weight: 700; letter-spacing: -.02em; }
.bento-grid { display: flex; flex-direction: column; gap: 24px; }
.bento-col-right { display: flex; flex-direction: column; gap: 24px; }
.bento-card {
  position: relative; border-radius: 24px; overflow: hidden;
  min-height: 380px; display: flex; flex-direction: column; justify-content: flex-end;
}
.bento-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; transition: transform 0.6s ease; }
.bento-card:hover .bento-bg { transform: scale(1.05); }
.bento-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to top, rgba(17,17,17,.85) 0%, rgba(17,17,17,.2) 60%, transparent 100%); z-index: 2; }
.bento-content { position: relative; z-index: 3; padding: 40px; }
.bento-content h3 { font-size: clamp(28px, 4vw, 40px); margin-bottom: 16px; font-weight: 700; color: var(--y); }
.bento-content p { font-size: 16px; line-height: 1.5; opacity: .95; max-width: 90%; }

@media (min-width: 900px) {
  .spirit-section { padding: 120px 60px; }
  .bento-grid { flex-direction: row; align-items: stretch; }
  .bento-large { flex: 1.2; min-height: 600px; }
  .bento-col-right { flex: 1; }
  .bento-col-right .bento-card { flex: 1; min-height: 288px; }
  .bento-content p { max-width: 80%; }
}

/* ════ ASSETS ════ */
.assets-section { background-color: #fff; color: var(--k); padding: 80px 24px; }
.assets-container { max-width: 1400px; margin: 0 auto; }
.assets-grid { display: flex; flex-direction: column; gap: 60px; }
.asset-heading { font-size: 24px; font-weight: 700; margin-bottom: 16px; }
.asset-desc { font-size: 16px; line-height: 1.5; opacity: .7; margin-bottom: 40px; max-width: 90%; }

.color-stack { display: flex; flex-direction: column; gap: 16px; }
.swatch {
  display: flex; justify-content: space-between; align-items: center;
  padding: 24px 32px; border-radius: 16px; cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease; position: relative; overflow: hidden;
}
.swatch:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0,0,0,.08); }
.swatch::after { content: 'Kopiert!'; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255,255,255,.9); color: #000; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 18px; opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.swatch.copied::after { opacity: 1; }
.swatch-info { display: flex; flex-direction: column; gap: 4px; }
.swatch-info strong { font-size: 20px; }
.swatch-info span { font-size: 14px; font-family: monospace; opacity: .8; }
.swatch-meta { text-align: right; font-size: 12px; opacity: .6; line-height: 1.4; }
.swatch-yellow { background-color: var(--y); color: var(--k); }
.swatch-black { background-color: var(--k); color: #fff; }

.typo-card { background-color: #f4f4f4; border-radius: 24px; padding: 40px; display: flex; flex-direction: column; gap: 40px; }
.typo-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid rgba(0,0,0,.05); padding-bottom: 16px; }
.typo-name { font-size: 24px; font-weight: 700; }
.typo-weights { font-size: 14px; opacity: .5; text-transform: uppercase; letter-spacing: .1em; }
.typo-specimen { font-size: clamp(40px, 6vw, 72px); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; }
.typo-examples { display: flex; flex-direction: column; gap: 24px; }
.typo-row { display: flex; flex-direction: column; gap: 8px; }
.typo-label { font-size: 12px; opacity: .5; text-transform: uppercase; letter-spacing: .1em; }

@media (min-width: 900px) {
  .assets-section { padding: 120px 60px; }
  .assets-grid { flex-direction: row; gap: 80px; }
  .assets-col { flex: 1; }
  .typo-card { padding: 60px; }
}

/* ════ LOGO REGELN ════ */
.rules-section { background-color: #fff; color: var(--k); padding: 60px 24px 120px; }
.rules-container { max-width: 1400px; margin: 0 auto; }
.rules-header { margin-bottom: 60px; }
.rules-desc { font-size: 16px; line-height: 1.5; opacity: .7; max-width: 600px; margin-top: 16px; }
.rules-grid { display: grid; grid-template-columns: 1fr; gap: 32px; }
.rule-card { display: flex; flex-direction: column; gap: 16px; }
.rule-visual { height: 180px; border-radius: 16px; display: flex; align-items: center; justify-content: center; padding: 32px; position: relative; overflow: hidden; }
.rule-logo { width: 100%; max-width: 160px; height: auto; }
.dont-visual::after { content: ''; position: absolute; top: 50%; left: -10%; width: 120%; height: 4px; background-color: #FF3B30; transform: rotate(-15deg); opacity: .8; z-index: 10; }
.rule-footer { display: flex; align-items: center; gap: 12px; }
.badge { padding: 6px 12px; border-radius: 30px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.badge-perfekt { background-color: #34C759; color: #fff; }
.badge-okay { background-color: #f4f4f4; color: var(--k); border: 1px solid #dcdcdc; }
.badge-nein { background-color: #FF3B30; color: #fff; }
.rule-desc { font-size: 14px; font-weight: 700; opacity: .8; }

@media (min-width: 600px) { .rules-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .rules-grid { grid-template-columns: repeat(4, 1fr); } }

/* ════ CTA SECTION ════ */
.cta-section { background-color: var(--k); padding: 100px 24px; }
.cta-container { max-width: 1400px; margin: 0 auto; }
.cta-inner { max-width: 680px; }
.cta-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: var(--y); margin-bottom: 1.5rem; opacity: .8;
}
.cta-heading {
  font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 700;
  line-height: 1.1; letter-spacing: -.02em; color: #fff; margin-bottom: 1.5rem;
}
.cta-body { font-size: 1.0625rem; line-height: 1.7; color: rgba(255,255,255,.65); margin-bottom: 2.5rem; max-width: 52ch; }
.cta-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  background-color: var(--y); color: var(--k);
  font-family: 'News Cycle', sans-serif; font-size: 1rem; font-weight: 700;
  text-decoration: none; padding: .85rem 1.75rem; border-radius: 2px;
  transition: opacity .2s ease;
}
.cta-btn:hover { opacity: .85; }
.cta-btn svg { flex-shrink: 0; transition: transform .2s ease; }
.cta-btn:hover svg { transform: translateX(4px); }

@media (min-width: 900px) { .cta-section { padding: 140px 60px; } }