/* sascha.walter.berlin — Designsystem: blau. */

:root {
  --blau: #1d4ed8;
  --blau-dunkel: #1e3a8a;
  --blau-nacht: #0b1e4b;
  --blau-hell: #60a5fa;
  --blau-zart: #dbeafe;
  --blau-fast-weiss: #eff6ff;
}

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

body {
  font-family: Georgia, 'Times New Roman', serif;
  background: var(--blau-fast-weiss);
  color: var(--blau-nacht);
  line-height: 1.6;
}

h1, h2 { font-weight: 700; }

section, footer { padding: 4rem 1.5rem; }
section > h2 {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 1.5rem;
  color: var(--blau-dunkel);
}

/* Hero */
.hero {
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 4rem 1.5rem;
  background: linear-gradient(160deg, var(--blau-nacht), var(--blau) 60%, var(--blau-hell));
  color: var(--blau-zart);
}
.kicker {
  text-transform: uppercase;
  letter-spacing: 0.35em;
  font-size: 0.85rem;
  opacity: 0.8;
}
.hero h1 {
  font-size: clamp(4rem, 14vw, 9rem);
  letter-spacing: 0.08em;
  line-height: 1.1;
  text-shadow: 0 6px 30px rgba(11, 30, 75, 0.6);
}
.tagline { font-size: 1.4rem; font-style: italic; margin-top: 0.5rem; }
.scroll-hint { margin-top: 3rem; font-size: 0.9rem; opacity: 0.7; }

/* Pflichtenheft */
.briefing { max-width: 640px; margin: 0 auto; text-align: center; }
.chat { margin: 1.5rem 0; display: flex; flex-direction: column; gap: 0.6rem; }
.msg {
  max-width: 80%;
  padding: 0.6rem 1rem;
  border-radius: 1.1rem;
  font-family: system-ui, sans-serif;
  font-size: 0.95rem;
  text-align: left;
}
.msg.left { align-self: flex-start; background: #fff; border: 1px solid var(--blau-zart); border-bottom-left-radius: 0.3rem; }
.msg.right { align-self: flex-end; background: var(--blau); color: #fff; border-bottom-right-radius: 0.3rem; }
.checklist {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 2.5rem;
  font-size: 1.5rem;
  margin: 1.5rem 0 0.75rem;
}
.checklist span {
  display: inline-block;
  width: 2rem; height: 2rem; line-height: 2rem;
  border-radius: 50%;
  background: var(--blau);
  color: #fff;
  font-size: 1.1rem;
  margin-right: 0.4rem;
  text-align: center;
}
.fulfilled { color: var(--blau-dunkel); }

/* Galerie */
.gallery { background: #fff; }
.gallery-sub {
  text-align: center;
  font-style: italic;
  color: var(--blau);
  margin: -0.75rem 0 2rem;
}
.grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2.5rem;
}
figure {
  background: var(--blau-fast-weiss);
  border: 1px solid var(--blau-zart);
  padding: 1rem;
  box-shadow: 0 10px 25px rgba(29, 78, 216, 0.08);
}
figure img {
  width: 100%;
  height: auto;
  display: block;
  border: 8px solid var(--blau-dunkel);
}
figcaption { padding-top: 0.75rem; font-size: 0.92rem; color: var(--blau-dunkel); }

/* Zitat */
.quote { background: var(--blau-nacht); color: var(--blau-zart); text-align: center; }
.quote blockquote {
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  font-style: italic;
  max-width: 800px;
  margin: 0 auto;
}
.quote-src { margin-top: 1rem; opacity: 0.7; }

/* FAQ */
.faq dl { max-width: 640px; margin: 0 auto; }
.faq dt { font-weight: 700; color: var(--blau-dunkel); margin-top: 1.25rem; }
.faq dd { margin-left: 0; }

/* Footer */
footer {
  background: var(--blau-dunkel);
  color: var(--blau-zart);
  text-align: center;
  font-size: 0.95rem;
}
.version { margin-top: 0.5rem; font-size: 0.8rem; opacity: 0.65; }