:root {
  --wine: #8e2743;
  --wine-dark: #6e1e34;
  --honey: #c0812f;
  --text: #2b1b20;
  --text-soft: #83706f;
  --bg: #fbf7f4;
  --card: #f2e9e3;
  --border: #e7d9d0;
}

@media (prefers-color-scheme: dark) {
  :root {
    --wine: #c9536f;
    --wine-dark: #a53d57;
    --honey: #e09a4e;
    --text: #f4ecee;
    --text-soft: #b3a0a5;
    --bg: #1a1216;
    --card: #271b21;
    --border: #37262e;
  }
}

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

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.65;
}

.wrap {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 24px;
}

header {
  padding-top: 20px;
  padding-bottom: 20px;
}

.brand {
  font-weight: 700;
  font-size: 20px;
  color: var(--wine);
  text-decoration: none;
}

.hero {
  text-align: center;
  padding-top: 24px;
  padding-bottom: 48px;
}

/* Ersetzt das frühere 🍷🍳-Emoji. width/height stehen im HTML, damit beim
   Laden nichts springt (kein Layout-Shift). */
.hero .heroBild {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
  /* Deckel gegen ein übergroßes Bild: Auf einem Laptop war das Bild bei
     852 px Breite 426 px hoch — Überschrift und Knopf fielen aus dem
     ersten Bildschirm, und ein Tester fand den Einstieg deshalb nicht.
     Auf dem Handy greift der Deckel nicht (375 px → 188 px hoch). */
  max-height: 300px;
  object-fit: cover;
  /* Leicht nach oben versetzt, damit beim Beschneiden der Glasfuß
     stehen bleibt und nicht der Rand des Tisches. */
  object-position: center 42%;
  border-radius: 18px;
  margin-bottom: 8px;
}

.hero h1 {
  font-size: clamp(28px, 5vw, 44px);
  color: var(--wine);
  margin: 16px 0 12px;
}

/* Der Titel brach vorher irgendwo mittendrin um — „kennenlernen" stand
   allein in der zweiten Zeile. Die beiden Sinnabschnitte sind je ein
   Block: Sie halten zusammen und brechen dazwischen.
   Kein hartes <br>, damit der Umbruch verschwindet, sobald der Platz
   reicht — etwa wenn der Titel mal kuerzer wird. */
.hero h1 span {
  display: inline-block;
}

.hero p.claim {
  font-size: 19px;
  color: var(--text-soft);
  max-width: 560px;
  margin: 0 auto;
}

/* Der Einstieg in die App — der einzige weinrote Knopf auf der Seite,
   damit klar ist, was die Hauptsache ist. */
.cta {
  display: inline-block;
  margin-top: 22px;
  background: var(--wine);
  color: #fff;
  text-decoration: none;
  padding: 15px 32px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 17px;
}

.cta:hover,
.cta:focus-visible {
  background: var(--wine-dark);
}

.ctaHinweis {
  margin-top: 12px;
  font-size: 14px;
  color: var(--text-soft);
}

.ctaHinweis a {
  color: var(--wine);
}

/* Reine Information, KEIN Knopf. Sah vorher wie einer aus (weinrote Pille,
   weiße Schrift) und war doch nur ein <div> — wer draufdrückte, erlebte
   nichts. Jetzt als Etikett erkennbar. */
.badge {
  display: inline-block;
  margin-top: 26px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-soft);
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
}

/* Die Bild-Karten brauchen mindestens 320 px, sonst wird das Foto zum
   Briefmarkenformat. Unter 700 px stapeln sie einspaltig. */
.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 16px;
  padding-top: 32px;
  padding-bottom: 48px;
}

.feature {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px;
}

/* Bild randlos oben, Text darunter — deshalb kein Padding an der Karte */
.featureGross {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.featureGross img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.featureGross .featureText {
  padding: 18px 22px 22px;
}

.feature .icon {
  font-size: 30px;
}

.feature h3 {
  margin: 10px 0 6px;
  font-size: 17px;
}

.feature p {
  font-size: 15px;
  color: var(--text-soft);
}

.how {
  padding-top: 24px;
  padding-bottom: 56px;
}

.how h2 {
  color: var(--wine);
  margin-bottom: 18px;
}

.how ol {
  padding-left: 22px;
  display: grid;
  gap: 10px;
  max-width: 640px;
}

/* Nebenbemerkung unter der Anleitung. Bewusst klein und am Seitenende:
   Unternehmungen sind ein Angebot, nicht der Schwerpunkt. */
.how p.dazu {
  margin-top: 20px;
  max-width: 640px;
  font-size: 15px;
  color: var(--text-soft);
}

footer {
  border-top: 1px solid var(--border);
  padding-top: 28px;
  padding-bottom: 40px;
  font-size: 14px;
  color: var(--text-soft);
}

footer a {
  color: var(--text-soft);
  margin-right: 18px;
}

main.legal {
  padding-top: 24px;
  padding-bottom: 56px;
  max-width: 720px;
}

main.legal h1 {
  color: var(--wine);
  margin-bottom: 18px;
}

main.legal h2 {
  margin: 24px 0 8px;
  font-size: 19px;
}

main.legal h3 {
  margin: 18px 0 6px;
  font-size: 16px;
}

main.legal p,
main.legal li {
  margin-bottom: 8px;
}

/* „Stand: …" unter der Überschrift — zurückhaltend, kein Kasten */
main.legal p.stand {
  color: var(--text-soft);
  font-size: 14px;
  margin-bottom: 20px;
}

.todo {
  background: var(--card);
  border-left: 4px solid var(--honey);
  padding: 10px 14px;
  margin: 10px 0;
}