/* BUKVA Landingpage · Variante 1 „Bei Baba Galja“
   Farben aus app/theme.ts, PT Serif lokal. */

@font-face { font-family: PT; src: url(assets/fonts/regular.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: PT; src: url(assets/fonts/bold.woff2) format('woff2'); font-weight: 700; font-display: swap; }

:root {
  --paper: #F7EBDD;
  --card: #FFFAF3;
  --ink: #3B2A2E;
  --soft: #6E5C58;
  --red: #A74438;
  --red-dark: #88362D;
  --honey: #D59A3A;
  --fir: #3F6259;
  --line: #DFCDB7;
  --serif: PT, Georgia, serif;
  --sans: system-ui, -apple-system, 'Segoe UI', sans-serif;
  --gutter: clamp(16px, 5.5vw, 80px);
}

/* Grundlagen */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.65 var(--sans); overflow-x: clip; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; } /* sonst gewinnt z. B. .button { display: inline-flex } */
:focus-visible { outline: 3px solid var(--fir); outline-offset: 4px; border-radius: 4px; }
h1, h2, h3, p { margin: 0; }
p { text-wrap: pretty; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; }
h1 { font-size: clamp(44px, 5.3vw, 84px); line-height: 1.08; letter-spacing: -0.04em; }
h2 { font-size: clamp(32px, 3.4vw, 52px); line-height: 1.2; letter-spacing: -0.035em; }
h3 { font-size: 21px; line-height: 1.3; }
em { color: var(--red); font-style: italic; }

.eyebrow { display: block; font-size: 11px; line-height: 1.6; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 650; color: var(--red); }
/* Die Dachzeile steht im h1, damit das Suchwort in der Hauptüberschrift steht */
h1 > .eyebrow { font-family: var(--sans); }
.eyebrow i { display: inline-block; width: 6px; height: 6px; margin-right: 10px; border-radius: 50%; background: var(--red); vertical-align: middle; }

.button {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 28px;
  min-height: 54px; padding: 16px 24px;
  background: var(--red); color: var(--card); border: 1px solid var(--red); border-radius: 8px;
  font-size: 14px; font-weight: 600; box-shadow: 0 6px 20px #a7443814;
  transition: background .2s, translate .2s;
}
.button:hover { background: var(--red-dark); translate: 0 -2px; }
.button span { font-size: 19px; font-weight: 400; line-height: 1; }

/* Kopfzeile */
.nav {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  max-width: 1280px; margin: 0 auto; padding: 24px 0; margin-inline: var(--gutter);
  border-bottom: 1px solid #dfcdb778;
}
@media (min-width: 1440px) { .nav { margin-inline: auto; } }
.brand { display: block; width: 156px; flex-shrink: 0; }
.nav nav { display: flex; align-items: center; gap: 34px; font-size: 14px; }
.nav nav > a { display: inline-flex; align-items: center; min-height: 44px; color: var(--soft); transition: color .2s; }
.nav nav > a:hover { color: var(--red); }
.nav-cta {
  display: inline-flex; align-items: center; gap: 18px; min-height: 46px; padding: 12px 22px;
  border: 1px solid var(--red); border-radius: 999px; background: var(--red); color: var(--card);
  font-size: 14px; font-weight: 600; transition: background .2s;
}
.nav nav > .nav-cta { color: var(--card); }
.nav-cta:hover { background: var(--red-dark); }
.nav-cta span { font-size: 17px; line-height: 1; }

/* Einstieg */
.hero {
  display: grid; grid-template-columns: 1fr 1.05fr; align-items: center;
  max-width: 1440px; min-height: 650px; margin: 0 auto; padding: 48px var(--gutter) 60px;
  overflow-x: clip; /* Aquarell darf auslaufen, ohne dass Handys herauszoomen */
}
.hero-copy { position: relative; z-index: 2; }
.hero-copy h1 { margin: 0 0 24px; }
.hero-copy h1 > .eyebrow { margin-bottom: 26px; }
.hero-copy > p { max-width: 400px; font-size: 17px; line-height: 1.75; color: var(--soft); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 32px; }
.text-link {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none;
  color: inherit; font-size: 14px; text-decoration: underline; text-underline-offset: 5px;
}
.season-link {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; margin-bottom: 28px; padding: 10px 20px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--card); font-size: 15px; line-height: 1.5;
}
.season-link:hover { border-color: var(--red); }
.season-link b { font: 600 18px var(--serif); color: var(--red); }
.price-note { margin-top: 20px; font-size: 14px; color: var(--soft); }
.price-note strong { display: block; margin-bottom: 2px; font: 19px/1.4 var(--serif); color: var(--fir); }
.price-note span { padding: 0 8px; }

.hero-art { position: relative; height: 560px; margin-right: -40px; }
.sun-halo { position: absolute; top: 40px; right: 50px; width: 400px; height: 400px; border-radius: 50%; background: #e3bf7020; }
.village {
  position: absolute; top: 12px; right: -30px; width: 590px; max-width: none; height: 450px; object-fit: cover;
  mix-blend-mode: multiply; mask-image: radial-gradient(ellipse at center, #000 25%, transparent 72%);
}
.grandma { position: absolute; right: 60px; bottom: 44px; width: 370px; }
.cat { position: absolute; left: 32px; bottom: 25px; width: 190px; }
.greeting {
  position: absolute; top: 148px; right: 3px; padding: 16px 28px; text-align: center; rotate: 3deg;
  background: var(--card); border: 1px solid var(--line); border-radius: 18px 18px 18px 2px; box-shadow: 0 8px 30px #57362310;
}
.greeting span { font: 25px var(--serif); }
.greeting small { display: block; margin-top: 4px; font-size: 12px; color: var(--soft); }
.art-caption { position: absolute; right: 40px; bottom: 0; font-size: 12px; color: var(--soft); }
.art-caption span { margin-right: 14px; font-family: var(--serif); color: var(--red); }

.detail-band {
  display: flex; justify-content: center; align-items: center; gap: 4vw;
  padding: 23px var(--gutter); border-block: 1px solid var(--line); font-size: 13px; color: var(--soft); text-align: center;
}
.detail-band i { font-style: normal; font-size: 19px; color: var(--red); }

/* Abschnitte */
.section { max-width: 1280px; margin: 0 auto; padding: 90px var(--gutter); }
.section-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 55px; }
.section-no { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--soft); }

/* Drei Lernschritte als Aquarell-Karten (Bilder aus der App) */
.learning .people-heading > p { max-width: 440px; }
.step-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; }
.step-art { position: relative; margin-bottom: 34px; }
.step-art img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; object-position: 72% center; mix-blend-mode: multiply;
  mask-image: radial-gradient(ellipse 72% 70% at 50% 48%, #000 55%, transparent 100%); }
.step-art .greeting { top: auto; right: auto; bottom: -14px; left: -6px; padding: 10px 16px; rotate: -2deg; text-align: left; border-radius: 18px 18px 18px 2px; }
.step-art .greeting span { font-size: 19px; }
.step-cards li:nth-child(2) .greeting { rotate: 2deg; }
.step-cards .no { font: 14px var(--serif); color: var(--red); }
.step-cards h3 { margin: 6px 0 6px; }
.step-cards p { max-width: 340px; font-size: 14px; color: var(--soft); }

/* Figuren mit Schauplätzen */
.people { border-top: 1px solid var(--line); }
.people-heading { display: flex; align-items: end; justify-content: space-between; gap: 50px; margin-bottom: 45px; }
.people-heading > p { max-width: 300px; font-size: 15px; color: var(--soft); }
.people-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 48px 26px; }
.person { text-align: center; }
.scene { position: relative; isolation: isolate; aspect-ratio: 1 / 1.08; }
.scene .place {
  position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; opacity: .88;
  mix-blend-mode: multiply; mask-image: radial-gradient(ellipse 61% 60% at 50% 45%, #000 35%, #0009 67%, transparent 87%);
}
.scene .figure {
  position: absolute; right: -12%; bottom: -4%; width: 100%; height: 100%;
  object-fit: contain; object-position: center bottom; filter: drop-shadow(0 5px 5px #3b2a2e12);
}
.person[data-person="anna-petrowna"] .place { object-position: 34% center; }
.person[data-person="mischa"] .place,
.person[data-person="lena"] .place,
.person[data-person="tamara"] .place { object-position: 72% center; }
.person[data-person="barsik"] .figure { right: -3%; bottom: -2%; width: 83%; height: 83%; }
.where { display: block; margin-top: 18px; font: italic 13px var(--serif); color: var(--soft); }
.person h3 { margin-top: 6px; }
.role { display: block; margin: 6px 0 10px; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--red); }
.person p { max-width: 230px; margin: 0 auto; font-size: 14px; line-height: 1.7; color: var(--soft); }

/* Hörknöpfe */
.play {
  display: inline-grid; place-items: center; flex-shrink: 0; width: 36px; height: 36px; margin-left: 6px; padding: 0; vertical-align: middle;
  border: 0; border-radius: 50%; background: #dce5e2; color: var(--fir); transition: background .2s;
}
.play:hover { background: #c9d8d3; }
.play svg { width: 20px; height: 20px; }
.play-big { width: 88px; height: 88px; margin: 14px auto 4px; display: grid; }
.play-big svg { width: 40px; height: 40px; }
.greeting .play { width: 32px; height: 32px; }
/* Unsichtbar größere Trefferfläche für kleine Knöpfe */
.play { position: relative; }
.play::after { content: ''; position: absolute; inset: -6px; }

/* Russische Wurzeln */
.roots { display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 60px; border-top: 1px solid var(--line); }
.roots h2 { margin: 20px 0; }
.roots p { max-width: 480px; font-size: 16px; color: var(--soft); }
.checks { margin: 24px 0 0; padding: 0; list-style: none; }
.checks li { position: relative; padding: 8px 0 8px 32px; font-size: 15px; border-bottom: 1px solid var(--line); }
.checks li::before { content: '✓'; position: absolute; left: 4px; color: var(--fir); font-weight: 700; }
.roots-link { display: inline-block; margin-top: 26px; }
.roots-art { position: relative; max-width: 420px; aspect-ratio: 1; margin: 0 auto; width: 100%; }
.roots-art .sun-halo { inset: 8%; width: auto; height: auto; }
.roots-art img { position: absolute; left: -6%; bottom: 0; width: 84%; }
.roots-art .greeting { top: 10%; right: 0; }

/* Regel -ция */
.rule { border-top: 1px solid var(--line); }
.rule-head { max-width: 780px; }
.rule-head h2 { margin: 20px 0; }
.rule-head p { font-size: 17px; color: var(--soft); }
.rule-head b { color: var(--ink); }
.rule-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 36px 0 24px; padding: 0; list-style: none; }
.rule-cards li { position: relative; padding: 18px 20px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; }
.rule-cards span { display: block; font-size: 14px; color: var(--soft); }
.rule-cards b, .rule-quiz b[lang] { display: block; margin-top: 4px; font: 400 26px var(--serif); }
.rule-cards i, .rule-quiz i { font-style: normal; color: var(--red); }
.rule-cards small, .rule-quiz small { font-size: 13px; color: var(--soft); }
.rule-cards .play { position: absolute; top: 14px; right: 14px; margin: 0; }
.rule-quiz { max-width: 620px; border-block: 1px solid var(--line); }
.rule-quiz summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; min-height: 56px; padding: 14px 0; cursor: pointer; list-style: none; font: 19px/1.4 var(--serif); }
.rule-quiz summary::-webkit-details-marker { display: none; }
.rule-quiz summary span { padding: 4px 12px; border: 1px solid var(--red); border-radius: 999px; font: 600 13px var(--sans); color: var(--red); }
.rule-quiz[open] summary span { display: none; }
.rule-quiz p { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding-bottom: 14px; }
.rule-quiz b[lang] { display: inline; margin: 0; }
.rule-note { font-size: 14px; color: var(--soft); }

/* Teepause */
.moments { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 65px; border-top: 1px solid var(--line); }
.tea { mix-blend-mode: multiply; }
.moments h2 { margin: 20px 0; }
.moments p { max-width: 400px; font-size: 16px; color: var(--soft); }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 25px 0 0; padding: 0; list-style: none; }
.tags li { padding: 7px 14px; border: 1px solid var(--line); border-radius: 30px; font-size: 13px; }

/* Fragen */
.faq { max-width: 900px; padding-top: 50px; }
.faq h2 { margin: 18px 0 32px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  min-height: 44px; padding: 20px 0; list-style: none; cursor: pointer; font: 19px/1.4 var(--serif);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; flex-shrink: 0; font-size: 24px; line-height: 1; color: var(--red); transition: rotate .2s; }
.faq details[open] summary::after { rotate: 45deg; }
.faq details p { max-width: 650px; padding: 0 30px 24px 0; font-size: 15px; color: var(--soft); }

/* Abschluss */
.closing { position: relative; overflow: hidden; padding: 80px var(--gutter) 90px; text-align: center; background: #ead9c4; }
.closing h2 { margin: 22px 0; font-size: clamp(44px, 5vw, 65px); }
.closing > p { max-width: 460px; margin: 0 auto 28px; font-size: 16px; color: var(--soft); }
.follow { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.button-light { background: var(--card); color: var(--red); }
.button-light:hover { background: var(--paper); }
.closing .text-link { position: relative; z-index: 1; margin-top: 14px; color: var(--soft); }
.waitlist { position: relative; z-index: 1; max-width: 480px; margin: 0 auto; text-align: left; }
.waitlist label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 600; }
.waitlist-row { display: flex; gap: 10px; }
.waitlist input[type=email], .contact-form input, .contact-form textarea, .name-tool input {
  flex: 1; min-width: 0; min-height: 54px; padding: 0 16px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink); font: inherit; font-size: 16px;
}
.waitlist input[type=email]:focus, .contact-form input:focus, .contact-form textarea:focus, .name-tool input:focus { outline: 2px solid var(--fir); outline-offset: 1px; }
.waitlist .button, .name-tool .button { flex-shrink: 0; justify-content: center; }
.waitlist .button:disabled, .contact-form .button:disabled { opacity: .6; translate: none; cursor: wait; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.waitlist-note { margin-top: 10px; font-size: 13px; line-height: 1.6; color: var(--soft); }
.waitlist-note a { text-decoration: underline; text-underline-offset: 3px; }
.waitlist-status:not(:empty) { margin-top: 12px; padding: 12px 14px; border-radius: 8px; font-size: 14px; background: #dce5e2; color: var(--fir); }
.waitlist-status.error { background: #f3dcd6; color: var(--red-dark); }
.contact-form { display: grid; gap: 20px; max-width: 560px; margin-top: 32px; }
.contact-form label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 600; }
.contact-form .optional { font-weight: 400; color: var(--soft); }
.contact-form input { width: 100%; }
.contact-form textarea { width: 100%; min-height: 180px; padding: 12px 16px; line-height: 1.5; resize: vertical; }
.closing .follow-intro { position: relative; z-index: 1; margin: 34px auto 14px; font-size: 14px; color: var(--soft); } /* .closing davor, sonst gewinnt .closing > p */
.closing-cat { position: absolute; right: 9%; bottom: -20px; width: 240px; }

footer {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  max-width: 1280px; margin: 0 auto; padding: 34px var(--gutter); font-size: 13px; color: var(--soft);
}
footer .brand { width: 104px; }
.legal-links { display: flex; gap: 20px; }
.legal-links a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-underline-offset: 4px; }
.legal-links a:hover, .legal-links [aria-current] { color: var(--red); }

/* Impressum und Datenschutz */
.legal { max-width: 760px; }
.legal h1 { margin: 16px 0 28px; font-size: clamp(40px, 5vw, 60px); }
.legal h2 { margin: 44px 0 12px; font-size: clamp(26px, 2.6vw, 32px); }
.legal h3 { margin: 26px 0 8px; font-size: 20px; }
.legal p { max-width: 65ch; font-size: 16px; color: var(--soft); }
.legal p + p { margin-top: 12px; }
.legal .lead { font-size: 18px; color: var(--ink); }
.legal a { color: var(--red); text-decoration: underline; text-underline-offset: 3px; }
.legal a.button { margin-top: 16px; color: var(--card); text-decoration: none; }
.legal .todo { padding: 14px 18px; border: 2px dashed var(--honey); border-radius: 8px; background: #f3e1bf; color: var(--ink); font-weight: 600; }

/* Alphabet-Seite */
.abc-intro { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 60px; padding-top: 50px; }
.abc-intro h1 { margin: 0 0 22px; }
.abc-intro h1 > .eyebrow { margin-bottom: 22px; }
.abc-intro p { max-width: 470px; font-size: 17px; line-height: 1.75; color: var(--soft); }
.abc-art { max-width: 460px; width: 100%; justify-self: center; }
.abc-art .figure { right: -8%; }
/* Sprechblase in eigener Zeile über der Figur, damit sie bei keiner Breite Gesicht oder Körper verdeckt.
   Die zweite Zeile hält das Bildformat, die Figur sitzt darin, der Ort reicht hinter die Blase. */
.abc-art { display: grid; grid-template-rows: auto auto; aspect-ratio: auto; }
.abc-art::after { content: ""; grid-row: 2; aspect-ratio: 1 / 1.08; }
.abc-art .place { grid-row: 1 / -1; }
.abc-art .figure { grid-row: 2; }
.abc-art .greeting { position: relative; inset: auto; grid-row: 1; justify-self: start; max-width: 100%; margin-bottom: -4%; rotate: -3deg; border-radius: 18px 18px 2px 18px; }
.abc { padding-top: 0; }
.abc-group + .abc-group { margin-top: 64px; }
.abc-group h2 small { font: 600 14px var(--sans); color: var(--red); vertical-align: middle; }
.abc-group > p { max-width: 560px; margin: 8px 0 24px; font-size: 16px; color: var(--soft); }
.abc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.letter {
  position: relative; display: flex; flex-direction: column; gap: 4px; width: 100%; height: 100%; padding: 16px 18px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); text-align: left; font: inherit;
  cursor: pointer; transition: border-color .2s, translate .2s;
}
.letter:hover { border-color: var(--soft); translate: 0 -2px; }
.letter .glyph { font: 40px/1.1 var(--serif); }
.letter .sound { font-size: 15px; font-weight: 650; color: var(--red); }
.letter .hint { font-size: 13px; line-height: 1.45; color: var(--soft); }
.letter .word { margin-top: auto; padding-top: 8px; font-size: 14px; color: var(--soft); }
.letter .word span { font: 17px var(--serif); color: var(--ink); }
.letter .play { position: absolute; top: 14px; right: 14px; margin: 0; width: 32px; height: 32px; }
.abc-test { text-align: center; border-top: 1px solid var(--line); }
.abc-test h2 { margin-top: 14px; }
.trainer { max-width: 440px; margin: 30px auto 0; padding: 28px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); }
.trainer-count { min-height: 22px; font-size: 13px; color: var(--soft); }
.trainer-glyph { display: block; margin: 6px 0 4px; font: 72px/1.2 var(--serif); }
.trainer .answers { grid-template-columns: 1fr 1fr; }
.trainer .answers button { text-align: center; }
.trainer .answers button:disabled { cursor: default; }
.abc-tips { border-top: 1px solid var(--line); }

/* Kostprobe */
dialog {
  width: calc(100% - 32px); max-width: 560px; max-height: calc(100dvh - 32px); padding: 38px;
  background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 40px 120px #0003;
}
dialog::backdrop { background: #3b2a2e99; backdrop-filter: blur(5px); }
dialog h2 { margin: 18px 0 14px; font-size: 32px; letter-spacing: -0.03em; }
dialog h2:focus-visible { outline: none; } /* bekommt beim Schrittwechsel den Fokus für Screenreader */
dialog p { font-size: 16px; }
.close { position: absolute; top: 8px; right: 10px; min-width: 44px; min-height: 44px; border: 0; border-radius: 50%; background: none; color: var(--ink); font-size: 28px; line-height: 1; }
.close:hover { background: var(--paper); }
.progress { height: 6px; margin-top: 14px; border-radius: 3px; background: var(--paper); overflow: hidden; }
.progress i { display: block; width: 0; height: 100%; border-radius: 3px; background: var(--red); transition: width .3s; }
.step .button { margin-top: 6px; }
.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 18px 0 20px; padding: 0; list-style: none; }
.cards button {
  display: flex; flex-direction: column; align-items: flex-start; width: 100%; min-height: 72px; padding: 12px 16px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 10px; color: var(--ink); text-align: left;
}
.cards button:hover { border-color: var(--soft); }
.cards b { font: 23px var(--serif); }
.cards span { font-size: 14px; color: var(--soft); }
.demo-host { display: flex; align-items: center; gap: 14px; margin: 16px 0; padding-right: 14px; border-radius: 12px; background: var(--paper); }
.demo-host img { width: 120px; flex-shrink: 0; }
.demo-host p { display: flex; align-items: center; gap: 6px; font: 27px var(--serif); }
.demo-host span { font-size: 14px; color: var(--soft); }
.answers { display: grid; gap: 10px; margin: 18px 0 12px; }
.answers button {
  min-height: 56px; padding: 12px 16px; text-align: left; font: 21px var(--serif); color: var(--ink);
  background: var(--paper); border: 1px solid var(--line); border-radius: 10px; transition: border-color .2s, background .2s;
}
.answers button:hover { border-color: var(--soft); }
.answers button.right { border: 2px solid var(--fir); background: #dce5e2; }
.answers button.wrong { border: 2px solid var(--red); background: #f3dcd5; }
.feedback { min-height: 26px; font-size: 15px; font-weight: 600; }
.feedback.right { color: var(--fir); }
.feedback.wrong { color: var(--red); }
.done { text-align: center; }
.done img { width: 140px; margin: 10px auto 0; }
.done p { margin-bottom: 22px; color: var(--soft); }
.done .text-link { display: flex; margin: 8px auto 0; color: var(--soft); }
dialog > small { display: block; margin-top: 18px; font-size: 12px; color: var(--soft); }
.faq details a { color: var(--red); text-decoration: underline; text-underline-offset: 3px; }

/* Große Bildschirme */
@media (min-width: 1500px) {
  .hero { min-height: 720px; }
  .hero-art { height: 610px; }
  .village { width: 680px; height: 520px; }
  .grandma { width: 400px; }
  .cat { width: 210px; }
}

/* Tablet */
@media (max-width: 1000px) {
  .nav nav { gap: 22px; }
  .hero { min-height: 600px; padding-top: 35px; padding-bottom: 50px; }
  .hero-art { height: 500px; margin: 0; }
  .village { right: -40px; width: 480px; }
  .grandma { right: -10px; width: 310px; }
  .cat { left: -15px; width: 155px; }
  .greeting { top: 120px; right: -10px; }
  .step-cards { gap: 22px; }
  .people-grid { grid-template-columns: repeat(2, 1fr); gap: 44px 28px; }
  .people-grid .scene { max-width: 360px; margin: 0 auto; }
  .people-heading { gap: 25px; }
  .rule-cards { grid-template-columns: repeat(2, 1fr); }
  .closing-cat { right: 1%; width: 190px; }
  /* Höher als breit, damit die Sprechblase über Galjas Kopf steht statt darauf */
  .roots-art { aspect-ratio: 5 / 6; }
  .roots-art .sun-halo { inset: auto 8% 6%; aspect-ratio: 1; }
  .roots-art .greeting { top: 0; }
}

/* Smartphone */
@media (max-width: 760px) {
  .nav { flex-wrap: wrap; justify-content: flex-start; gap: 6px 14px; padding: 18px 0 10px; }
  .brand { width: 122px; }
  .nav nav { display: contents; }
  .nav nav > a:not(.back, .nav-cta) { display: none; }
  .nav-cta { margin-left: auto; padding: 10px 16px; gap: 12px; }

  /* Galja gehört in den ersten Bildschirm: Bild zwischen Überschrift und Text */
  .hero { display: flex; flex-direction: column; min-height: 0; padding: 22px var(--gutter) 34px; }
  .hero-copy { display: contents; }
  .hero-copy > * { order: 4; }
  .hero-copy > h1 { order: 2; margin: 0; font-size: clamp(36px, 10.5vw, 46px); }
  .hero-copy h1 > .eyebrow { margin-bottom: 14px; }
  .hero-copy > .season-link { order: 1; align-self: flex-start; margin-bottom: 18px; border-radius: 18px; }
  .hero-art { order: 3; width: 100%; max-width: 420px; height: clamp(210px, 60vw, 280px); margin: 4px auto 14px; }
  .hero-copy > p { font-size: 16px; }
  .actions { margin-top: 22px; }
  .sun-halo { top: 0; right: 10%; width: 70%; height: auto; aspect-ratio: 1; }
  .village { top: 0; right: 50%; translate: 50% 0; width: 115%; height: 100%; }
  .grandma { right: 8%; bottom: 0; width: 52%; }
  .cat { left: 4%; bottom: 0; width: 31%; }
  .hero-art .greeting { top: 10%; right: auto; left: 2%; padding: 8px 16px; rotate: -3deg; border-radius: 18px 18px 2px 18px; }
  .greeting span { font-size: 20px; }
  .greeting small { font-size: 11px; }
  .art-caption { display: none; }

  .detail-band { flex-direction: column; gap: 8px; }
  .detail-band i { display: none; }

  .section { padding-top: 60px; padding-bottom: 60px; }
  .section-top { margin-bottom: 28px; }
  .section-no { display: none; }
  .step-cards { grid-template-columns: minmax(0, 1fr); gap: 44px; }

  .people-heading { display: block; }
  .people-heading > p { margin-top: 18px; }
  .people-grid { gap: 36px 14px; }
  .scene .figure { right: -6%; }
  .where { margin-top: 12px; font-size: 12px; }
  .person h3 { font-size: 18px; }
  .role { font-size: 10px; letter-spacing: 0.08em; }
  .person p { font-size: 13px; }

  .moments { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .roots { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  /* Höher als breit, damit die Sprechblase über Galjas Kopf steht statt darauf */
  .roots-art { max-width: 300px; }
  .rule-cards { gap: 10px; margin-top: 28px; }
  .rule-cards li { padding: 14px; }
  .rule-cards b { font-size: 21px; }
  .rule-cards .play { top: 10px; right: 10px; width: 32px; height: 32px; }
  .cards b { font-size: 20px; }
  .tea { width: min(100%, 340px); margin: 0 auto; }
  .faq summary { font-size: 17px; }
  .faq details p { padding-right: 0; }

  .closing { padding: 64px var(--gutter) 150px; }
  .follow .button { width: 100%; max-width: 320px; }
  .abc-intro { grid-template-columns: minmax(0, 1fr); gap: 20px; padding-top: 30px; }
  .abc-art { max-width: 300px; }
  .abc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .letter { padding: 14px; }
  .letter .glyph { font-size: 34px; }
  .trainer { padding: 22px 16px; }
  .waitlist-row { flex-direction: column; }
  .closing-cat { right: -10px; bottom: -16px; width: 140px; }
  footer { flex-direction: column; align-items: flex-start; gap: 12px; }

  dialog { padding: 26px 18px 20px; }
  dialog h2 { font-size: 25px; padding-right: 30px; }
  dialog > .eyebrow { padding-right: 40px; } /* Platz für das Schließen-Kreuz */
  .demo-host img { width: 96px; }
  .demo-host p { font-size: 22px; }
  .answers button { font-size: 19px; }
}

/* Sehr schmale Geräte */
@media (max-width: 400px) {
  .brand { width: 104px; }
  .nav-cta { padding: 9px 14px; gap: 10px; font-size: 13px; }
}
@media (max-width: 359px) {
  .people-grid { grid-template-columns: 1fr; }
  .people-grid .scene { max-width: 300px; }
  .person p { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}

/* Begrüßungen: ganze Ausdrücke statt einzelner Buchstaben */
.phrases.abc-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.phrases .letter .glyph { font-size: 26px; padding-right: 36px; }
.phrases .letter .word span { font-weight: 650; }
.trainer.phrases .trainer-glyph { font-size: 38px; }
.greet-art .place { object-position: 72% center; }
@media (max-width: 760px) {
  .phrases.abc-grid { grid-template-columns: minmax(0, 1fr); }
  .phrases .letter .glyph { font-size: 24px; }
  .trainer.phrases .trainer-glyph { font-size: 30px; }
}

/* Zahlen am Handy zweispaltig wie das Alphabet (nicht „Im Alltag“). Hörsymbol über der Zahl, damit lange Wörter die ganze Breite haben */
@media (max-width: 760px) {
  .numbers.abc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .numbers .letter { padding: 48px 12px 14px; hyphens: auto; } /* Trennung nur als Notnagel, die Größen unten passen ab 320 px */
  .numbers .letter .play { top: 10px; right: 10px; }
  .numbers .letter .glyph { padding-right: 0; font-size: clamp(16px, 5vw, 22px); }
  .numbers .letter .sound { font-size: clamp(14px, 4.3vw, 15px); }
  .numbers .letter .word span { font-size: clamp(15px, 4.6vw, 17px); }
}

/* Fußzeile: Lernseiten unter „Russisch lernen“ zum Aufklappen, am Computer als Menü nach oben */
.learn-menu { position: relative; }
.learn-menu summary {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; list-style: none; white-space: nowrap;
  text-decoration: underline; text-underline-offset: 4px;
}
.learn-menu summary::-webkit-details-marker { display: none; }
.learn-menu summary::after {
  content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  rotate: -135deg; translate: 0 2px; transition: rotate .2s;
}
.learn-menu[open] summary::after { rotate: 45deg; translate: 0 -2px; }
.learn-menu summary:hover, .learn-menu[open] summary { color: var(--red); }
.learn-links {
  position: absolute; bottom: 100%; left: -18px; z-index: 5; display: grid; min-width: 220px; padding: 8px 18px;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 12px 30px rgb(59 42 46 / .12);
}
.learn-links a { display: flex; align-items: center; min-height: 40px; }
.learn-links a:hover, .learn-links [aria-current] { color: var(--red); }
@media (max-width: 760px) {
  .learn-links { position: static; min-width: 0; padding: 0 0 4px 14px; background: none; border: 0; box-shadow: none; }
  .learn-menu summary::after { rotate: 45deg; translate: 0 -2px; }
  .learn-menu[open] summary::after { rotate: -135deg; translate: 0 2px; }
}

/* Lernseiten als Karten (Startseite und „Weiter lernen“): wie .rule-cards, die ganze Karte ist der Link */
.learn-cards { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.learn-cards li { padding: 0; transition: border-color .2s, translate .2s; }
.learn-cards li:hover { border-color: var(--soft); translate: 0 -2px; }
.learn-cards a { display: block; height: 100%; padding: 18px 20px; border-radius: 12px; }
.learn-cards span { color: var(--ink); font-weight: 600; }
@media (max-width: 760px) {
  .learn-cards { grid-template-columns: minmax(0, 1fr); }
  .learn-cards a { padding: 14px; }
}

/* Dein Name auf Russisch */
.name-section h2, #namen-liste h2 { margin-bottom: 24px; }
.name-tool { max-width: 560px; padding: 28px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); }
.name-tool label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 600; }
.name-tool input { background: var(--paper); }
.name-status:not(:empty) { margin-top: 10px; font-size: 14px; color: var(--red-dark); }
.name-result { margin-top: 24px; text-align: center; }
.name-ru { font: 56px/1.15 var(--serif); overflow-wrap: anywhere; }
.name-art, .name-tip, .name-privacy, .name-intro { font-size: 14px; color: var(--soft); }
.name-art { margin-top: 4px; }
.name-form { margin-top: 12px; }
.name-form b { font: 400 22px var(--serif); }
.name-tip { margin-top: 18px; }
.name-letters { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 10px 0 18px; padding: 0; list-style: none; }
.name-letters button { min-width: 44px; height: 44px; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--ink); font: 24px var(--serif); }
.name-letters button:hover { border-color: var(--soft); }
.name-privacy { margin-top: 16px; font-size: 13px; }
.name-intro { max-width: 620px; font-size: 16px; }
#namen-liste h3 { margin: 32px 0 12px; }
.name-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.name-list a { display: block; height: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.name-list a:hover { border-color: var(--soft); }
.name-list a > span { display: block; font-size: 13px; color: var(--soft); }
.name-list b { display: block; font: 400 24px var(--serif); }
.name-list small { font-size: 12px; color: var(--soft); }
@media (max-width: 760px) {
  .name-tool { padding: 20px 16px; }
  .name-ru { font-size: 44px; }
  .name-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}