@import "fonts/campaign-fonts.css";

:root {
  --rot: var(--farbe-rot, #e3000f);
  --dunkelrot: var(--farbe-dunkelrot, #790000);
  --weiss: var(--farbe-weiss, #ffffff);
  /* Near-black for body copy only - readability necessity, not a brand
     accent color. Every other color on this page is rot/dunkelrot/weiss. */
  --tinte: #1a1a1a;
  --headline: var(--font-headline, "Karla", system-ui, sans-serif);
  --text: var(--font-text, "Archivo Narrow", system-ui, sans-serif);
  --max: 720px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--weiss);
  color: var(--tinte);
  font-family: var(--text);
  font-size: 18px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--dunkelrot); }
a:hover { color: var(--rot); }

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------- Top bar ---------- */
.topbar {
  padding: 20px 0;
}

.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.topbar__logo { height: 34px; width: auto; flex: none; }

.topbar__link {
  font-family: var(--headline);
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--tinte);
  border-bottom: 2px solid var(--rot);
  padding-bottom: 1px;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background: var(--rot);
  color: var(--weiss);
  padding: 56px 20px 96px;
  overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), 0 100%);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 85% 15%, rgba(255,255,255,0.12), transparent 45%),
    radial-gradient(circle at 10% 90%, rgba(0,0,0,0.18), transparent 50%);
  pointer-events: none;
}

.hero__inner {
  position: relative;
  max-width: var(--max);
  margin: 0 auto;
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--dunkelrot);
  color: var(--weiss);
  font-family: var(--headline);
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
}

.hero__eyebrow .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--weiss);
  flex: none;
}

.hero h1 {
  font-family: var(--headline);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(2.4rem, 9vw, 3.6rem);
  line-height: 0.98;
  letter-spacing: -0.01em;
  margin: 18px 0 0;
}

.hero h1 span {
  display: inline-block;
  color: var(--rot);
  background: var(--weiss);
  padding: 0 0.08em;
}

.hero__lead {
  font-family: var(--text);
  font-size: 1.15rem;
  max-width: 46ch;
  margin: 20px 0 0;
}

.hero__lead strong { text-decoration: underline; text-underline-offset: 2px; }

.hero__cta {
  margin-top: 32px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--headline);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 1rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  background: var(--weiss);
  color: var(--rot);
  padding: 16px 26px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  transition: transform 0.15s ease, background-color 0.15s ease;
}

.btn:hover { background: var(--dunkelrot); color: var(--weiss); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn svg { width: 18px; height: 18px; flex: none; }

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Entrance animation is opt-in on top of always-visible content: it only
   ever plays when the browser both supports the media query AND the user
   hasn't asked for reduced motion. If a screenshot/preview tool renders
   before the animation finishes, or doesn't run animations/media queries
   at all, the hero content is simply already visible - never blank. */
@media (prefers-reduced-motion: no-preference) {
  .hero__eyebrow { opacity: 0; animation: rise 0.6s ease-out 0.05s forwards; }
  .hero h1 { opacity: 0; animation: rise 0.7s ease-out 0.15s forwards; }
  .hero__lead { opacity: 0; animation: rise 0.7s ease-out 0.28s forwards; }
  .hero__cta { opacity: 0; animation: rise 0.7s ease-out 0.4s forwards; }
}

/* ---------- Generator section ---------- */
.generator {
  padding: 24px 20px 64px;
  margin-top: -56px;
  position: relative;
}

.generator__card {
  max-width: 400px;
  margin: 0 auto;
  background: var(--weiss);
  border-radius: 14px;
  box-shadow: 0 18px 40px -12px rgba(0,0,0,0.35);
  padding: 28px 22px 24px;
}

.generator__title {
  font-family: var(--headline);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 1.3rem;
  margin: 0 0 4px;
  text-align: center;
}

.generator__subtitle {
  font-family: var(--text);
  color: #555;
  font-size: 0.95rem;
  text-align: center;
  margin: 0 0 20px;
}

/* Host container for window.ProfilePictureGenerator */
.pbg-container { max-width: 100%; }

/* ---------- Steps ---------- */
.steps {
  padding: 64px 20px;
}

.steps h2, .section-title {
  font-family: var(--headline);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(1.6rem, 5vw, 2.1rem);
  text-align: center;
  margin: 0 0 40px;
  color: var(--rot);
}

.steps__grid {
  display: grid;
  gap: 28px;
  max-width: var(--max);
  margin: 0 auto;
}

.step {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.step__num {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--rot);
  color: var(--weiss);
  font-family: var(--headline);
  font-weight: 800;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.step__title {
  font-family: var(--headline);
  font-weight: 700;
  font-size: 1.05rem;
  margin: 4px 0 4px;
  text-transform: uppercase;
}

.step__text { margin: 0; color: #444; }

/* ---------- Desktop: denser layout ----------
   Below this width the page is the mobile-style single stacked column
   (hero, then the generator card overlapping its clipped edge). At
   desktop widths that reads as thin and empty, so the hero and the
   generator merge into one wide red band with the pitch on the left and
   the tool on the right - using the extra width instead of just padding
   around a narrow column. */
@media (min-width: 1040px) {
  .hero-generator {
    position: relative;
    background: var(--rot);
    overflow: hidden;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 56px), 0 100%);
    display: grid;
    grid-template-columns: minmax(0, 540px) minmax(0, 360px);
    justify-content: center;
    align-items: start;
    gap: 56px;
    padding: 72px 40px 88px;
  }

  .hero-generator::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(circle at 85% 15%, rgba(255,255,255,0.12), transparent 45%),
      radial-gradient(circle at 10% 90%, rgba(0,0,0,0.18), transparent 50%);
    pointer-events: none;
  }

  .hero-generator .hero {
    background: none;
    clip-path: none;
    padding: 0;
    overflow: visible;
  }

  .hero-generator .hero::before { display: none; }

  .hero-generator .hero__inner {
    max-width: none;
    margin: 0;
  }

  .hero-generator .hero h1 { font-size: clamp(2.4rem, 3.4vw, 4rem); }

  .hero-generator .generator {
    padding: 0;
    margin: 0;
  }

  .hero-generator .generator__card { margin: 0; }

  .steps__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    max-width: 980px;
  }
}

/* ---------- Footer ---------- */
footer {
  padding: 48px 20px 40px;
  text-align: center;
}

footer .wrap { max-width: var(--max); }

.footer__logo {
  height: 30px;
  width: auto;
  margin: 0 auto 20px;
}

.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  justify-content: center;
  font-family: var(--headline);
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.footer__links a { text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

@media (max-width: 420px) {
  body { font-size: 17px; }
  .hero { padding: 44px 16px 80px; }
}