:root {
  --brand: #6ec9c6;
  --brand-bright: #26c7d0;
  --accent-turquoise: #26c7d0;
  --brand-dark: #0b626b;
  --brand-deep: #083d45;
  --brand-soft: #e8f8f5;
  --brand-pale: #f2fbf9;
  --yellow: #f5c94e;
  --yellow-soft: #fff1b4;
  --red: #d4312f;
  --red-dark: #aa211f;
  --spotify: #1ed760;
  --spotify-ink: #092d18;
  --amazon: #ffb33b;
  --cream: #fffaf0;
  --paper: #fffefa;
  --ink: #143b42;
  --muted: #557177;
  --white: #fff;
  --line: rgba(8, 74, 82, .13);
  --shadow-sm: 0 12px 30px rgba(11, 81, 88, .11);
  --shadow: 0 28px 75px rgba(11, 81, 88, .18);
  --radius-sm: 16px;
  --radius: 24px;
  --radius-lg: 38px;
  --max: 1180px;
  --font-rounded: ui-rounded, "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
  --font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: clip; color: var(--ink); background: var(--paper); font-family: var(--font-body); line-height: 1.55; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
.wrap { width: min(calc(100% - 40px), var(--max)); margin-inline: auto; }
.skip-link { position: fixed; left: 14px; top: -100px; z-index: 1000; padding: 12px 16px; border-radius: 12px; background: var(--brand-deep); color: white; font-weight: 850; }
.skip-link:focus { top: 14px; }
.eyebrow, .kicker { margin: 0 0 10px; color: var(--brand-dark); font-size: .76rem; font-weight: 950; letter-spacing: .12em; text-transform: uppercase; }
.section { padding: 88px 0; }
.section-soft { background: linear-gradient(180deg, var(--brand-pale), #f6fbf9); }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 30px; }
.section-head h2, .world-copy h2, .book-copy h2, .music-panel h2, .family-box h2 { margin: 0; font-family: var(--font-rounded); font-size: clamp(2.1rem, 4vw, 3.55rem); line-height: 1.03; letter-spacing: -.045em; }
.section-head > p { max-width: 500px; margin: 0; color: var(--muted); }

/* Header */
.site-header { position: sticky; top: 0; z-index: 100; border-bottom: 1px solid rgba(8, 74, 82, .08); background: rgba(255, 254, 250, .93); backdrop-filter: blur(15px); }
.nav { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; }
.brand-emblem { width: 52px; height: 52px; border: 3px solid white; border-radius: 50%; object-fit: cover; box-shadow: 0 7px 18px rgba(11, 81, 88, .18); }
.brand-text {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 138px;
  padding: 7px 11px 8px;
  border: 1px solid rgba(11,104,114,.16);
  border-radius: 15px;
  background: linear-gradient(135deg, rgba(255,255,255,.99), rgba(225,248,245,.99));
  color: var(--brand-deep);
  box-shadow: 0 7px 18px rgba(11,81,88,.08);
  font-family: var(--font-rounded);
  font-size: 1.23rem;
  line-height: .95;
  letter-spacing: -.03em;
}
.brand-text small {
  display: block;
  margin-top: 5px;
  color: #087e8b;
  font-family: var(--font-body);
  font-size: .74rem;
  font-weight: 950;
  line-height: 1;
  letter-spacing: .085em;
  text-transform: uppercase;
}
.nav-links { display: flex; align-items: center; gap: 6px; }
.nav-links a { padding: 10px 12px; border-radius: 12px; color: var(--brand-dark); font-weight: 850; text-decoration: none; }
.nav-links a:hover, .nav-links a:focus-visible { background: var(--brand-soft); outline: none; }
.nav-links .nav-cta { padding-inline: 16px; background: var(--red); color: white; }
.nav-links .nav-cta:hover, .nav-links .nav-cta:focus-visible { background: var(--red-dark); }

/* Buttons */
.actions, .section-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.btn { min-height: 57px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 20px; border: 0; border-radius: 17px; font-weight: 950; text-decoration: none; box-shadow: var(--shadow-sm); transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(11, 81, 88, .17); }
.btn:focus-visible, .card-link:focus-visible, .platform:focus-visible, .bio-link:focus-visible, .bio-song:focus-visible, .bio-book:focus-visible { outline: 4px solid var(--yellow); outline-offset: 3px; }
.btn img { width: 28px; height: 28px; }
.btn-youtube { background: var(--red); color: white; }
.btn-youtube:hover { background: var(--red-dark); }
.btn-playlist { background: var(--brand-deep); color: white; }
.btn-playlist:hover { background: #052f36; }
.btn-spotify { background: var(--spotify); color: var(--spotify-ink); }
.btn-secondary { border: 1px solid var(--line); background: white; color: var(--brand-dark); }
.btn-amazon { background: #ffd073; color: #3e2b00; }

/* Hero */
.hero { position: relative; overflow: hidden; background: radial-gradient(circle at 84% 8%, rgba(255, 240, 166, .95) 0, rgba(255, 240, 166, 0) 25%), radial-gradient(circle at 8% 85%, rgba(255,255,255,.84) 0, rgba(255,255,255,0) 31%), linear-gradient(145deg, #e7f8f5 0%, #9bdad2 47%, #6ec9c6 100%); }
.hero::before, .hero::after { content: ""; position: absolute; border-radius: 50%; background: rgba(255,255,255,.24); }
.hero::before { width: 430px; height: 430px; left: -220px; top: -180px; }
.hero::after { width: 260px; height: 260px; right: -110px; bottom: -115px; }
.hero-grid { position: relative; z-index: 1; min-height: 680px; display: grid; grid-template-columns: minmax(0, 530px) minmax(0, 1fr); align-items: center; gap: clamp(104px, 8vw, 132px); padding: 62px 0 76px; }
.hero-copy { max-width: 530px; }
.hero h1 { margin: 0; font-family: var(--font-rounded); font-size: clamp(3rem, 4.6vw, 4.5rem); line-height: .92; letter-spacing: -.062em; }
.hero h1 > span { display: block; color: var(--ink); }
.hero h1 .hero-midline em { color: var(--brand-bright); font-style: normal; text-shadow: 0 2px 0 rgba(255,255,255,.28); }
.hero h1 .hero-longword { margin-top: .06em; color: var(--brand-bright); font-size: .79em; letter-spacing: -.073em; white-space: nowrap; text-shadow: 0 2px 0 rgba(255,255,255,.28); }
.hero .lead { max-width: 500px; margin: 25px 0 24px; color: #234f55; font-size: 1.05rem; font-weight: 670; }
.hero-actions { margin-bottom: 14px; }
.hero-spotify { display: inline-flex; align-items: center; gap: 9px; color: var(--brand-deep); font-weight: 900; text-decoration: none; }
.hero-spotify img { width: 25px; height: 25px; }
.hero-spotify span { transition: transform .18s ease; }
.hero-spotify:hover span { transform: translateX(4px); }
.hero-note { display: flex; flex-wrap: wrap; gap: 9px 16px; margin-top: 20px; color: #285f66; font-size: .84rem; font-weight: 850; }
.hero-note span { display: inline-flex; align-items: center; gap: 7px; }
.hero-note span::before { content: "✓"; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.72); color: var(--brand-dark); font-size: .75rem; font-weight: 1000; }
.hero-visual { --mx: 0px; --my: 0px; position: relative; justify-self: end; width: min(100%, 570px); min-height: 560px; transform: translate(var(--mx), var(--my)); transition: transform .25s ease-out; isolation: isolate; }
.hero-visual::before, .hero-visual::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.hero-visual::before { inset: 46px 4px 32px 50px; border: 7px solid rgba(255,255,255,.46); opacity: .9; }
.hero-visual::after { width: 110px; height: 110px; right: 25px; top: 78px; background: radial-gradient(circle, rgba(255,255,255,.72) 0, rgba(255,255,255,.13) 43%, rgba(255,255,255,0) 72%); }
.hero-art-card { position: absolute; inset: 28px 0 14px 54px; overflow: hidden; border: 8px solid rgba(255,255,255,.8); border-radius: 44% 56% 44% 56% / 50% 43% 57% 50%; background: var(--brand); box-shadow: 0 42px 94px rgba(8, 77, 84, .27); transform: rotate(1.5deg); will-change: transform; cursor: pointer; }
.hero-art-card:focus-visible { outline: 4px solid var(--yellow); outline-offset: 4px; }
.hero-art-card::after { content: ""; position: absolute; inset: -18% auto -18% -42%; width: 34%; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.24), rgba(255,255,255,0)); transform: rotate(14deg) translateX(-180%); pointer-events: none; }
.hero-art-card picture, .hero-art-card img { width: 100%; height: 100%; }
.hero-art-card img { object-fit: cover; object-position: center; transform: scale(1.025); will-change: transform; transition: transform .45s ease; }
.hero-profile { position: absolute; left: -12px; top: 6px; z-index: 4; display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border: 4px solid white; border-radius: 999px; background: rgba(255,255,255,.96); box-shadow: var(--shadow-sm); transform: rotate(-3deg); will-change: transform; }
.hero-profile img { width: 62px; height: 62px; border-radius: 50%; object-fit: cover; }
.hero-profile span { color: var(--brand-dark); font-size: .76rem; font-weight: 800; line-height: 1.15; }
.hero-profile strong { font-family: var(--font-rounded); font-size: 1.04rem; }
.hero-sticker { position: absolute; right: -3px; bottom: 20px; z-index: 4; max-width: 245px; padding: 15px 18px; border: 4px solid white; border-radius: 20px; background: var(--yellow); color: #5d4500; box-shadow: var(--shadow-sm); font-family: var(--font-rounded); font-size: .95rem; line-height: 1.16; transform: rotate(-2deg); will-change: transform; }
.hero-sticker strong { font-size: 1.08rem; }
.hero-sound-button { position: absolute; left: -6px; bottom: 24px; z-index: 7; min-height: 58px; display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 9px; border: 4px solid rgba(255,255,255,.96); border-radius: 999px; background: rgba(8,61,69,.94); color: white; box-shadow: 0 15px 34px rgba(8,61,69,.24); font: inherit; text-align: left; cursor: pointer; transition: transform .2s ease, background .2s ease, box-shadow .2s ease; }
.hero-sound-button:hover { transform: translateY(-3px) rotate(-1deg); background: #07515a; box-shadow: 0 19px 40px rgba(8,61,69,.28); }
.hero-sound-button:focus-visible { outline: 4px solid var(--yellow); outline-offset: 4px; }
.hero-sound-icon { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; background: var(--yellow); color: #4e3b00; font-size: 1.15rem; }
.hero-sound-copy { display: grid; line-height: 1.02; }
.hero-sound-copy small { margin-bottom: 4px; color: #bdeeed; font-size: .64rem; font-weight: 850; letter-spacing: .045em; text-transform: uppercase; }
.hero-sound-copy strong { font-family: var(--font-rounded); font-size: .96rem; white-space: nowrap; }
.hero-sound-button.is-playing { background: var(--red); }
.hero-sound-button.is-playing .hero-sound-icon { animation: heroSpeakerPulse .7s ease-in-out infinite; }
.hero-visual.is-brumm-playing .hero-art-card { animation: heroSoundRide .72s ease-in-out infinite !important; }
.hero-visual.is-brumm-playing .hero-art-card img { animation: heroSoundImage .72s ease-in-out infinite !important; }
.hero-visual.is-brumm-playing .hero-puffs span:nth-child(1) { animation: heroPuff 1.25s ease-out infinite !important; }
.hero-visual.is-brumm-playing .hero-puffs span:nth-child(2) { animation: heroPuff 1.25s .35s ease-out infinite !important; }
.hero-visual.is-brumm-playing .hero-puffs span:nth-child(3) { animation: heroPuff 1.25s .7s ease-out infinite !important; }
.hero-visual.is-brumm-playing .hero-music-note { animation: heroSoundNote .8s ease-in-out infinite !important; }
.hero-visual.is-brumm-playing .hero-sparkle { animation: heroSoundSparkle .65s ease-in-out infinite !important; }
.hero-visual.is-music-playing .hero-art-card { animation: heroMusicRide 1.7s ease-in-out infinite !important; }
.hero-visual.is-music-playing .hero-art-card img { animation: heroMusicImage 1.7s ease-in-out infinite !important; }
.hero-visual.is-music-playing .hero-puffs span:nth-child(1) { animation: heroPuff 2.3s ease-out infinite !important; }
.hero-visual.is-music-playing .hero-puffs span:nth-child(2) { animation: heroPuff 2.3s .7s ease-out infinite !important; }
.hero-visual.is-music-playing .hero-puffs span:nth-child(3) { animation: heroPuff 2.3s 1.4s ease-out infinite !important; }
.hero-visual.is-music-playing .hero-music-note { animation: heroSoundNote 1.75s ease-in-out infinite !important; }
.hero-visual.is-music-playing .hero-sparkle { animation: heroSoundSparkle 1.5s ease-in-out infinite !important; }
.hero-puffs { position: absolute; z-index: 5; right: 42px; top: 76px; width: 75px; height: 115px; pointer-events: none; }
.hero-puffs span { position: absolute; bottom: 2px; border-radius: 50%; background: rgba(255,255,255,.78); box-shadow: 0 4px 14px rgba(8,77,84,.08); opacity: 0; }
.hero-puffs span:nth-child(1) { left: 18px; width: 18px; height: 18px; }
.hero-puffs span:nth-child(2) { left: 30px; width: 24px; height: 24px; }
.hero-puffs span:nth-child(3) { left: 10px; width: 15px; height: 15px; }
.hero-music-note, .hero-sparkle { position: absolute; z-index: 5; pointer-events: none; color: rgba(255,255,255,.92); text-shadow: 0 5px 16px rgba(8,77,84,.18); }
.hero-music-note { left: 62px; bottom: 70px; font-family: var(--font-rounded); font-size: 2rem; transform: rotate(-10deg); }
.hero-sparkle { right: 5px; top: 220px; font-size: 1.8rem; }
@media (prefers-reduced-motion: no-preference) {
  .hero-visual::before { animation: heroRingPulse 4.6s ease-in-out infinite; }
  .hero-visual::after { animation: heroSparkleGlow 4.2s ease-in-out infinite; }
  .hero-art-card { animation: heroCardFloat 3.9s ease-in-out infinite; }
  .hero-art-card::after { animation: heroShine 5.8s ease-in-out infinite; }
  .hero-art-card img { animation: heroImageDrift 3.9s ease-in-out infinite; }
  .hero-profile { animation: heroBadgeBob 4.1s ease-in-out infinite; }
  .hero-sticker { animation: heroStickerBob 4.4s ease-in-out infinite; }
  .hero-puffs span:nth-child(1) { animation: heroPuff 3.2s ease-out infinite; }
  .hero-puffs span:nth-child(2) { animation: heroPuff 3.2s .9s ease-out infinite; }
  .hero-puffs span:nth-child(3) { animation: heroPuff 3.2s 1.8s ease-out infinite; }
  .hero-music-note { animation: heroNoteFloat 3.8s ease-in-out infinite; }
  .hero-sparkle { animation: heroTwinkle 2.6s ease-in-out infinite; }
}
.hero-visual:hover .hero-art-card img { transform: scale(1.065); }
@keyframes heroCardFloat {
  0%, 100% { transform: translateY(0) rotate(1.5deg); }
  50% { transform: translateY(-13px) rotate(2.3deg); }
}
@keyframes heroImageDrift {
  0%, 100% { transform: scale(1.025) translate3d(0, 0, 0); }
  50% { transform: scale(1.06) translate3d(-7px, -9px, 0); }
}
@keyframes heroBadgeBob {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-8px) rotate(-1.2deg); }
}
@keyframes heroStickerBob {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(7px) rotate(-3.5deg); }
}
@keyframes heroRingPulse {
  0%, 100% { opacity: .9; transform: scale(1); }
  50% { opacity: .62; transform: scale(1.035); }
}
@keyframes heroSparkleGlow {
  0%, 100% { opacity: .45; transform: scale(.9); }
  50% { opacity: .95; transform: scale(1.12); }
}
@keyframes heroShine {
  0%, 68%, 100% { transform: rotate(14deg) translateX(-180%); opacity: 0; }
  16%, 28% { opacity: 1; }
  38% { transform: rotate(14deg) translateX(430%); opacity: 0; }
}
@keyframes heroPuff {
  0% { opacity: 0; transform: translate3d(0, 4px, 0) scale(.65); }
  18% { opacity: .75; }
  100% { opacity: 0; transform: translate3d(20px, -92px, 0) scale(1.65); }
}
@keyframes heroNoteFloat {
  0%, 100% { opacity: .55; transform: translateY(0) rotate(-10deg); }
  50% { opacity: 1; transform: translateY(-12px) rotate(-2deg); }
}
@keyframes heroTwinkle {
  0%, 100% { opacity: .35; transform: scale(.8) rotate(0); }
  50% { opacity: 1; transform: scale(1.18) rotate(18deg); }
}
@keyframes heroSoundRide {
  0%, 100% { transform: translateY(0) rotate(1.4deg); }
  35% { transform: translateY(-8px) rotate(2.4deg); }
  70% { transform: translateY(2px) rotate(.8deg); }
}
@keyframes heroSoundImage {
  0%, 100% { transform: scale(1.045) translate3d(0,0,0); }
  50% { transform: scale(1.07) translate3d(-8px,-5px,0); }
}
@keyframes heroMusicRide {
  0%, 100% { transform: translateY(0) rotate(1.5deg); }
  50% { transform: translateY(-6px) rotate(2deg); }
}
@keyframes heroMusicImage {
  0%, 100% { transform: scale(1.035) translate3d(0,0,0); }
  50% { transform: scale(1.052) translate3d(-4px,-4px,0); }
}
@keyframes heroSpeakerPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}
@keyframes heroSoundNote {
  0%, 100% { opacity: .65; transform: translateY(0) rotate(-12deg) scale(1); }
  50% { opacity: 1; transform: translateY(-18px) rotate(8deg) scale(1.22); }
}
@keyframes heroSoundSparkle {
  0%, 100% { opacity: .45; transform: scale(.75) rotate(0); }
  50% { opacity: 1; transform: scale(1.28) rotate(25deg); }
}

/* Current song */
.current-section { padding-top: 78px; }
.current-card { display: grid; grid-template-columns: minmax(0, 1.28fr) minmax(330px, .72fr); overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: white; box-shadow: var(--shadow); }
.current-media { position: relative; min-height: 430px; overflow: hidden; background: #0c8bd8; }
.current-media picture, .current-media img { width: 100%; height: 100%; }
.current-media img { object-fit: cover; transition: transform .35s ease; }
.current-media:hover img { transform: scale(1.025); }
.play-orb { position: absolute; left: 25px; bottom: 23px; width: 72px; height: 72px; display: grid; place-items: center; border: 6px solid rgba(255,255,255,.92); border-radius: 50%; background: var(--red); box-shadow: 0 16px 34px rgba(0,0,0,.26); }
.play-orb::after { content: ""; margin-left: 5px; border-top: 12px solid transparent; border-bottom: 12px solid transparent; border-left: 19px solid white; }
.current-copy { padding: clamp(30px, 4.5vw, 54px); display: flex; flex-direction: column; justify-content: center; }
.current-copy h2 { margin: 5px 0 12px; font-family: var(--font-rounded); font-size: clamp(2.25rem, 4vw, 4rem); line-height: .98; letter-spacing: -.055em; }
.current-copy > p:not(.kicker) { margin: 0 0 23px; color: var(--muted); }
.current-buttons { display: grid; gap: 10px; }
.current-buttons .btn { width: 100%; }
.playlist-banner { margin-top: 22px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; padding: 22px 24px; border-radius: var(--radius); background: linear-gradient(140deg, #0b424b, #062e35); color: white; text-decoration: none; box-shadow: var(--shadow-sm); }
.playlist-icon { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 18px; background: var(--red); }
.playlist-icon img { width: 34px; height: 34px; }
.playlist-banner small { display: block; color: #a7e9e5; font-size: .7rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.playlist-banner strong { display: block; font-family: var(--font-rounded); font-size: 1.27rem; }
.playlist-banner em { display: block; color: #c1dadd; font-size: .84rem; font-style: normal; font-weight: 650; }
.playlist-arrow { font-size: 2rem; }

/* Video cards */
.video-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; }
.video-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: white; box-shadow: var(--shadow-sm); }
.video-thumb { position: relative; display: block; aspect-ratio: 16/9; overflow: hidden; background: var(--brand); }
.video-thumb picture, .video-thumb img { width: 100%; height: 100%; }
.video-thumb img { object-fit: cover; transition: transform .3s ease; }
.video-card:hover .video-thumb img { transform: scale(1.035); }
.video-body { display: flex; flex: 1; flex-direction: column; padding: 21px; }
.tag { align-self: flex-start; padding: 6px 10px; border-radius: 999px; background: var(--yellow-soft); color: #715600; font-size: .7rem; font-weight: 950; letter-spacing: .07em; text-transform: uppercase; }
.video-body h3 { margin: 12px 0 8px; font-family: var(--font-rounded); font-size: 1.38rem; line-height: 1.1; letter-spacing: -.025em; }
.video-body p { margin: 0 0 17px; color: var(--muted); font-size: .93rem; }
.card-link { margin-top: auto; color: var(--brand-dark); font-weight: 950; text-decoration: none; }
.card-link::after { content: "  →"; }
.section-actions { justify-content: center; margin-top: 27px; }



/* Scrollbare Liederauswahl */
.song-head { align-items: end; }
.video-carousel { position: relative; margin-top: 8px; }
.video-rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(290px, 34%); gap: 20px; overflow-x: auto; padding: 8px 4px 24px; scroll-snap-type: x mandatory; scroll-padding-inline: 4px; overscroll-behavior-inline: contain; scrollbar-width: thin; scrollbar-color: rgba(18,63,71,.32) transparent; }
.video-rail::-webkit-scrollbar { height: 8px; }
.video-rail::-webkit-scrollbar-thumb { border-radius: 99px; background: rgba(18,63,71,.28); }
.video-rail .video-card { scroll-snap-align: start; min-width: 0; }
.video-rail .video-body { min-height: 226px; }
.video-rail .video-body h3 { margin-bottom: 8px; }
.carousel-arrow { position: absolute; z-index: 3; top: 43%; width: 48px; height: 48px; display: grid; place-items: center; border: 3px solid white; border-radius: 50%; background: var(--brand-dark); color: white; box-shadow: 0 10px 24px rgba(18,63,71,.22); font: 900 1.45rem/1 var(--font-body); cursor: pointer; transform: translateY(-50%); transition: transform .18s ease, opacity .18s ease, background .18s ease; }
.carousel-arrow:hover { background: var(--brand); transform: translateY(-50%) scale(1.06); }
.carousel-arrow:focus-visible { outline: 4px solid rgba(37,200,209,.35); outline-offset: 3px; }
.carousel-arrow[disabled] { opacity: .28; cursor: default; transform: translateY(-50%); }
.carousel-prev { left: -24px; }
.carousel-next { right: -24px; }
.carousel-meta { display: grid; grid-template-columns: auto auto minmax(90px, 180px); align-items: center; justify-content: end; gap: 13px; margin-top: -9px; color: var(--muted); font-size: .82rem; font-weight: 800; }
.swipe-hint { display: none; }
.carousel-progress { width: 100%; height: 6px; overflow: hidden; border-radius: 999px; background: rgba(18,63,71,.12); }
.carousel-progress i { display: block; width: 14.285%; height: 100%; border-radius: inherit; background: var(--accent-turquoise); transition: width .25s ease; }
.no-js-carousel { padding: 18px; border-radius: 16px; background: white; color: var(--muted); }
@media (max-width: 900px) {
  .video-rail { grid-auto-columns: minmax(280px, 58%); }
  .carousel-prev { left: -10px; }
  .carousel-next { right: -10px; }
}
@media (max-width: 620px) {
  .song-head { align-items: start; }
  .video-rail { grid-auto-columns: calc(100vw - 52px); gap: 14px; margin-inline: -13px; padding-inline: 13px; scroll-padding-inline: 13px; }
  .carousel-arrow { display: none; }
  .video-rail .video-body { min-height: 0; }
  .carousel-meta { grid-template-columns: auto 1fr; justify-content: stretch; margin-top: -5px; }
  .swipe-hint { display: inline; text-align: right; }
  .carousel-progress { grid-column: 1 / -1; }

}

/* Music */
.music-panel { display: grid; grid-template-columns: .9fr 1.1fr; gap: 35px; align-items: center; padding: clamp(32px, 6vw, 65px); border-radius: var(--radius-lg); background: radial-gradient(circle at 92% 0, rgba(38,199,208,.35), transparent 29%), linear-gradient(145deg, #124d57, #062c33); color: white; box-shadow: var(--shadow); }
.music-panel .kicker { color: #94ebe5; }
.music-copy p:last-child { max-width: 610px; margin-bottom: 0; color: #c7dfe1; }
.platform-grid { display: grid; gap: 11px; }
.platform { min-height: 78px; display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid rgba(255,255,255,.12); border-radius: 19px; background: rgba(255,255,255,.08); color: white; font-weight: 900; text-decoration: none; transition: transform .18s ease, background .18s ease; }
.platform:hover { transform: translateY(-2px); background: rgba(255,255,255,.12); }
.platform img { width: 42px; height: 42px; }
.platform span { flex: 1; }
.platform strong, .platform small { display: block; }
.platform small { margin-top: 2px; color: #bfd7da; font-weight: 650; }
.platform b { font-size: 1.35rem; }
.platform.spotify { background: var(--spotify); color: var(--spotify-ink); }
.platform.spotify small { color: #0d4d28; }

/* World */
.world-grid { display: grid; grid-template-columns: .86fr 1.14fr; gap: 55px; align-items: center; }
.world-art { position: relative; }
.world-art::before { content: ""; position: absolute; inset: 8% 5% 2%; border-radius: 50%; background: rgba(38,199,208,.16); filter: blur(2px); }
.world-art img { position: relative; width: min(100%, 520px); margin-inline: auto; border: 8px solid white; border-radius: 36%; box-shadow: var(--shadow); }
.world-copy > p:not(.kicker) { color: var(--muted); font-size: 1.03rem; }
.world-points { display: grid; gap: 11px; margin-top: 24px; }
.world-point { padding: 15px 17px; border: 1px solid var(--line); border-radius: 17px; background: white; box-shadow: var(--shadow-sm); }
.world-point strong { display: block; color: var(--brand-dark); }
.world-point span { color: var(--muted); font-size: .92rem; }

/* Book */
.book-card { display: grid; grid-template-columns: 350px 1fr; gap: 48px; align-items: center; padding: clamp(30px, 5vw, 58px); border: 1px solid #ead58c; border-radius: var(--radius-lg); background: linear-gradient(135deg, #fff5c9, #fffdf7); box-shadow: var(--shadow-sm); }
.book-visual { position: relative; }
.book-cover { width: min(100%, 276px); margin: auto; border-radius: 9px; box-shadow: 0 25px 48px rgba(94,69,12,.22); transform: rotate(-2.4deg); }
.book-age { position: absolute; right: 8px; bottom: 24px; padding: 10px 13px; border: 4px solid white; border-radius: 999px; background: var(--brand-bright); color: white; box-shadow: var(--shadow-sm); font-family: var(--font-rounded); font-weight: 900; transform: rotate(4deg); }
.book-copy > p:not(.kicker) { color: #665e47; }
.book-features { display: grid; gap: 7px; margin: 18px 0 24px; padding: 0; list-style: none; color: #5a513a; font-weight: 800; }
.book-features li { display: flex; gap: 9px; }
.book-features li::before { content: "✓"; color: var(--brand-dark); font-weight: 1000; }

/* Family trust */
.parent-section { padding-top: 0; }
.family-box { display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: center; padding: 32px; border: 1px solid var(--line); border-radius: var(--radius); background: white; box-shadow: var(--shadow-sm); }
.family-box h2 { font-size: clamp(1.8rem, 3vw, 2.45rem); }
.family-box p:last-child { margin-bottom: 0; color: var(--muted); }

/* Footer */
.site-footer { padding: 54px 0 30px; background: var(--brand-deep); color: #d6ebed; }
.footer-grid { display: grid; grid-template-columns: 1.25fr .75fr .75fr; gap: 36px; }
.footer-brand { display: flex; align-items: center; gap: 13px; }
.footer-brand img { width: 58px; height: 58px; border: 3px solid white; border-radius: 50%; object-fit: cover; }
.footer-brand h3 { margin: 0; line-height: 1; }
.footer-brand h3 span { color: #70e0dc; font-size: .72em; letter-spacing: .04em; }
.site-footer h3 { margin: 0 0 12px; color: white; font-family: var(--font-rounded); }
.site-footer p { color: #b9d2d5; }
.footer-links { display: grid; gap: 8px; }
.footer-links a { color: white; font-weight: 760; text-decoration: none; }
.footer-links a:hover { text-decoration: underline; }
.legal-note { margin-top: 34px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.12); color: #9dbfc3; font-size: .82rem; }
.legal-note [data-trademark-note] { display: block; margin-top: 5px; color: #b8d2d5; font-size: .76rem; }

/* Link in bio */
.bio-page { min-height: 100vh; padding: 14px 0 42px; background: radial-gradient(circle at 15% 0, rgba(255,239,160,.78), transparent 24%), linear-gradient(180deg, #88d3cd 0, #eaf9f6 41%, #fffaf0 100%); }
.bio-shell { width: min(calc(100% - 24px), 640px); margin-inline: auto; }
.bio-head { display: grid; place-items: center; padding: 2px 0 14px; }
.bio-brand-card { width: min(100%, 430px); display: grid; grid-template-columns: 64px minmax(0,1fr); align-items: center; gap: 13px; padding: 10px 16px 11px 10px; border: 1px solid rgba(11,104,114,.15); border-radius: 22px; background: linear-gradient(135deg, rgba(255,255,255,.97), rgba(235,249,246,.97)); box-shadow: 0 12px 28px rgba(11,81,88,.12); color: var(--brand-deep); text-decoration: none; }
.bio-brand-card img { width: 64px; height: 64px; border: 3px solid white; border-radius: 50%; object-fit: cover; box-shadow: 0 8px 18px rgba(11,81,88,.16); }
.bio-brand-card-copy { min-width: 0; display: grid; margin: 0; line-height: 1; }
.bio-brand-card-copy strong { font-family: var(--font-rounded); font-size: 1.58rem; letter-spacing: -.04em; }
.bio-brand-card-copy small { margin-top: 5px; color: #087e8b; font-size: .72rem; font-weight: 950; letter-spacing: .1em; text-transform: uppercase; }
.bio-brand-card-copy em { margin-top: 8px; color: #315e63; font-size: .76rem; font-style: normal; font-weight: 780; line-height: 1.25; }
.bio-brand-card:hover { border-color: rgba(11,104,114,.24); box-shadow: 0 15px 34px rgba(11,81,88,.15); }
.bio-brand-card:focus-visible { outline: 4px solid var(--yellow); outline-offset: 3px; }
.bio-new { width: fit-content; margin: 0 auto -10px; position: relative; z-index: 2; padding: 6px 13px; border: 3px solid white; border-radius: 999px; background: var(--yellow); color: #5e4600; font-size: .68rem; font-weight: 950; letter-spacing: .08em; text-transform: uppercase; box-shadow: var(--shadow-sm); }
.bio-current { overflow: hidden; border: 1px solid rgba(255,255,255,.85); border-radius: 28px; background: white; box-shadow: 0 24px 56px rgba(18,80,86,.19); }
.bio-thumb { position: relative; display: block; aspect-ratio: 16/9; overflow: hidden; background: #0b83de; }
.bio-thumb picture, .bio-thumb img { width: 100%; height: 100%; }
.bio-thumb img { object-fit: cover; }
.bio-thumb .play-orb { left: 17px; bottom: 15px; width: 58px; height: 58px; border-width: 4px; }
.bio-thumb .play-orb::after { border-top-width: 9px; border-bottom-width: 9px; border-left-width: 15px; }
.bio-copy { padding: 17px; }
.bio-copy .kicker { margin-bottom: 4px; font-size: .65rem; }
.bio-copy h2 { margin: 0 0 6px; font-family: var(--font-rounded); font-size: clamp(1.85rem, 8vw, 2.5rem); line-height: 1; letter-spacing: -.045em; }
.bio-description { margin: 0 0 13px; color: var(--muted); font-size: .88rem; }
.bio-actions { display: grid; gap: 9px; }
.bio-actions .btn { width: 100%; min-height: 59px; }
.bio-link { min-height: 68px; display: flex; align-items: center; gap: 13px; margin-top: 11px; padding: 12px 15px; border: 1px solid var(--line); border-radius: 19px; background: white; box-shadow: var(--shadow-sm); font-weight: 900; text-decoration: none; }
.bio-link img { width: 39px; height: 39px; }
.bio-link strong, .bio-link small { display: block; }
.bio-link small { color: var(--muted); font-weight: 650; }
.bio-link .arr { margin-left: auto; font-size: 1.4rem; }
.bio-link.playlist { background: var(--brand-deep); color: white; }
.bio-link.playlist small { color: #bad6d9; }
.bio-link.spotify { background: var(--spotify); color: var(--spotify-ink); }
.bio-link.spotify small { color: #0d4d28; }
.bio-section-label { margin: 23px 4px 9px; color: var(--brand-dark); font-size: .7rem; font-weight: 950; letter-spacing: .11em; text-transform: uppercase; }
.bio-song-list {
  display: flex;
  gap: 12px;
  margin-inline: -4px;
  padding: 3px 4px 12px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.bio-song-list::-webkit-scrollbar { display: none; }
.bio-song {
  flex: 0 0 min(78vw, 292px);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  overflow: hidden;
  padding: 8px 11px 11px;
  border: 1px solid var(--line);
  border-radius: 19px;
  background: white;
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  scroll-snap-align: start;
}
.bio-song img { grid-column: 1 / -1; width: 100%; aspect-ratio: 16/9; border-radius: 13px; object-fit: cover; }
.bio-song span { min-width: 0; }
.bio-song small, .bio-song strong { display: block; }
.bio-song small { margin-bottom: 4px; color: #087e8b; font-size: .64rem; font-weight: 950; letter-spacing: .06em; text-transform: uppercase; }
.bio-song strong { font-size: .9rem; line-height: 1.17; }
.bio-song b { align-self: end; color: var(--brand-dark); font-size: 1.25rem; }
.bio-song-hint { margin: -3px 4px 2px; color: #42666b; font-size: .72rem; font-weight: 850; text-align: right; }
.bio-platforms { display: grid; gap: 9px; }
.bio-platforms .bio-link { margin-top: 0; }
.bio-book { min-height: 136px; display: grid; grid-template-columns: 86px 1fr auto; align-items: center; gap: 14px; padding: 12px 15px 12px 12px; border: 1px solid #ead58c; border-radius: 21px; background: linear-gradient(135deg,#fff4c5,#fffdf7); box-shadow: var(--shadow-sm); text-decoration: none; }
.bio-book img { width: 80px; border-radius: 6px; box-shadow: 0 9px 20px rgba(90,66,12,.18); }
.bio-book small, .bio-book strong, .bio-book em { display: block; }
.bio-book small { color: #80680c; font-size: .66rem; font-weight: 900; text-transform: uppercase; }
.bio-book strong { margin: 3px 0; line-height: 1.13; }
.bio-book em { color: var(--brand-dark); font-size: .78rem; font-style: normal; font-weight: 900; }
.bio-book b { font-size: 1.3rem; }
.social-row { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.social-row a { padding: 13px 15px; border: 1px solid var(--line); border-radius: 17px; background: rgba(255,255,255,.9); box-shadow: var(--shadow-sm); text-decoration: none; }
.social-row strong, .social-row span { display: block; }
.social-row span { color: var(--muted); font-size: .78rem; }
.bio-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px 14px; margin-top: 25px; font-size: .8rem; font-weight: 800; }
.bio-legal a { color: #315e63; }

/* Legal + utility pages */
.legal-page { padding: 54px 0 90px; background: linear-gradient(180deg, var(--brand-soft), var(--paper) 280px); }
.legal-card { max-width: 880px; margin-inline: auto; padding: clamp(24px, 6vw, 62px); border: 1px solid var(--line); border-radius: var(--radius-lg); background: white; box-shadow: var(--shadow); }
.legal-card h1 { margin: 0 0 24px; font-family: var(--font-rounded); font-size: clamp(2.6rem, 6vw, 4.7rem); line-height: 1; letter-spacing: -.055em; }
.legal-card h2 { margin: 34px 0 10px; font-family: var(--font-rounded); font-size: 1.45rem; }
.legal-card p, .legal-card li { color: #416067; }
.legal-card a { color: #0d6872; font-weight: 750; }
.placeholder { display: inline-block; padding: 2px 7px; border-radius: 6px; background: #ffe1e1; color: #8b1f24; font-weight: 900; }
.notice { padding: 15px 17px; border: 1px solid #e1c65f; border-radius: 14px; background: #fff3bf; color: #604900; font-weight: 800; }
.no-js { padding: 12px 18px; background: #fff3bf; color: #5c4700; text-align: center; font-weight: 800; }
.error-page { min-height: 68vh; display: grid; place-items: center; padding: 50px 0; text-align: center; }
.error-page img { width: 130px; height: 130px; margin: 0 auto 18px; border-radius: 50%; object-fit: cover; }
.error-page h1 { margin: 0 0 12px; font-family: var(--font-rounded); font-size: clamp(3rem,8vw,6rem); }

@keyframes float { 50% { transform: translateY(-8px) rotate(-1deg); } }

@media (max-width: 980px) {
  .nav-links a:not(.nav-cta) { display: none; }
  .hero-grid { grid-template-columns: 1fr; min-height: auto; gap: 34px; padding-top: 48px; }
  .hero-copy { max-width: 760px; text-align: center; margin-inline: auto; }
  .hero h1 { font-size: clamp(3rem, 8vw, 4.4rem); }
  .hero h1 .hero-longword { font-size: .8em; }
  .hero .lead { margin-inline: auto; }
  .hero-actions, .hero-note { justify-content: center; }
  .hero-visual { min-height: 535px; width: min(100%, 650px); margin-inline: auto; }
  .hero-visual::before { inset: 44px 18px 32px 62px; }
  .hero-art-card { inset: 26px 12px 8px 64px; }
  .hero-profile { left: 0; }
  .hero-sticker { right: 2px; }
  .hero-sound-button { left: 4px; bottom: 22px; }
  .hero-puffs { right: 42px; top: 72px; }
  .current-card { grid-template-columns: 1fr; }
  .current-media { min-height: 0; aspect-ratio: 16/9; }
  .music-panel { grid-template-columns: 1fr; }
  .world-grid { grid-template-columns: 1fr; }
  .world-art { order: 2; }
  .book-card { grid-template-columns: 300px 1fr; gap: 32px; }
}
@media (max-width: 760px) {
  .wrap { width: min(calc(100% - 26px), var(--max)); }
  .section { padding: 66px 0; }
  .section-head { align-items: start; flex-direction: column; gap: 12px; }
  .nav { min-height: 70px; }
  .nav-links .nav-cta { display: none; }
  .brand-emblem { width: 47px; height: 47px; }
  .hero-grid { gap: 28px; padding: 38px 0 56px; }
  .hero h1 { font-size: clamp(2.5rem, 12vw, 3.85rem); }
  .hero h1 .hero-longword { font-size: .72em; }
  .hero .lead { max-width: 33ch; margin-inline: auto; font-size: .98rem; }
  .hero-actions { display: grid; }
  .hero-actions .btn { width: 100%; }
  .hero-note { gap: 8px 11px; font-size: .78rem; }
  .hero-visual { min-height: 410px; width: min(100%, 500px); }
  .hero-visual::before { inset: 38px 14px 26px 50px; border-width: 6px; }
  .hero-visual::after { width: 82px; height: 82px; right: 22px; top: 76px; }
  .hero-art-card { inset: 22px 6px 0 50px; border-width: 6px; }
  .hero-profile { top: 0; left: 0; transform: rotate(-2deg) scale(.86); transform-origin: left top; }
  .hero-sticker { right: 0; bottom: 4px; max-width: 184px; padding: 12px 14px; font-size: .8rem; }
  .hero-sound-button { left: 0; bottom: 4px; min-height: 50px; padding: 6px 11px 6px 7px; border-width: 3px; }
  .hero-sound-icon { width: 34px; height: 34px; font-size: 1rem; }
  .hero-sound-copy small { display: none; }
  .hero-sound-copy strong { font-size: .82rem; }
  .hero-puffs { right: 26px; top: 58px; transform: scale(.75); transform-origin: top right; }
  .hero-music-note { left: 40px; bottom: 52px; font-size: 1.55rem; }
  .current-copy { padding: 25px 20px 22px; }
  .play-orb { width: 58px; height: 58px; left: 17px; bottom: 15px; border-width: 4px; }
  .play-orb::after { border-top-width: 9px; border-bottom-width: 9px; border-left-width: 15px; }
  .playlist-banner { grid-template-columns: auto 1fr; padding: 17px; }
  .playlist-arrow { display: none; }
  .video-grid { grid-template-columns: 1fr; }
  .video-card { display: grid; grid-template-columns: 42% 58%; }
  .video-thumb { height: 100%; aspect-ratio: auto; }
  .video-body { padding: 15px; }
  .video-body h3 { font-size: 1.15rem; }
  .video-body p { font-size: .85rem; }
  .section-actions { display: grid; }
  .section-actions .btn { width: 100%; }
  .music-panel { padding: 29px 20px; }
  .book-card { grid-template-columns: 1fr; text-align: center; }
  .book-features { justify-items: start; width: fit-content; margin-inline: auto; text-align: left; }
  .book-copy .btn { width: 100%; }
  .support-panel { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 26px; }
}
@media (max-width: 480px) {
  .brand-text { font-size: 1.08rem; }
  .hero-visual { min-height: 355px; width: min(100%, 420px); }
  .hero-visual::before { inset: 33px 8px 24px 40px; border-width: 5px; }
  .hero-visual::after { width: 68px; height: 68px; right: 14px; top: 68px; }
  .hero-art-card { inset: 21px 4px 0 40px; }
  .hero-profile { transform: rotate(-2deg) scale(.74); }
  .hero-sticker { right: 0; max-width: 156px; font-size: .7rem; }
  .hero-sound-button { left: -2px; min-height: 44px; padding-right: 9px; }
  .hero-sound-icon { width: 30px; height: 30px; font-size: .9rem; }
  .hero-sound-copy strong { font-size: .72rem; }
  .hero-puffs { right: 18px; top: 50px; transform: scale(.62); }
  .hero-music-note { left: 30px; bottom: 44px; font-size: 1.35rem; }
  .video-card { display: block; }
  .video-thumb { aspect-ratio: 16/9; }
  .social-row { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}

/* Ratio-safe presentation for original LumiLino artwork */
.world-art {
  display: grid;
  place-items: center;
}
.world-art img {
  width: min(100%, 500px);
  height: auto !important;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center;
  border-radius: 30px;
}
.book-visual {
  display: grid;
  place-items: center;
  min-width: 0;
}
.book-cover {
  display: block;
  width: min(100%, 300px);
  height: auto !important;
  max-height: none;
  aspect-ratio: 900 / 1164;
  object-fit: contain;
  transform: rotate(-1.25deg);
}
.book-age { display: none !important; }
@media (max-width: 760px) {
  .world-art img { width: min(100%, 430px); border-radius: 24px; }
  .book-cover { width: min(86vw, 310px); }
}

/* Final funnel refinements */
.world-grid-new { grid-template-columns: .94fr 1.06fr; gap: clamp(36px, 5vw, 62px); }
.world-visual-stack { position: relative; min-height: 610px; display: grid; align-content: center; }
.world-logo-card {
  position: relative;
  z-index: 2;
  width: min(68%, 390px);
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  padding: 0;
  overflow: hidden;
  border: 8px solid #fff;
  border-radius: 34px;
  background: var(--brand);
  box-shadow: var(--shadow);
  transform: rotate(-2deg);
}
.world-logo-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.world-animal-card {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 1;
  width: min(78%, 455px);
  margin: 0;
  overflow: hidden;
  border: 7px solid #fff;
  border-radius: 27px;
  background: #fff;
  box-shadow: var(--shadow-sm);
  transform: rotate(2deg);
}
.world-animal-card picture,
.world-animal-card img { display: block; width: 100%; }
.world-animal-card img { aspect-ratio: 16 / 9; object-fit: cover; }
.world-animal-card figcaption {
  padding: 10px 13px 12px;
  color: var(--brand-dark);
  background: #fff;
  font-size: .78rem;
  font-weight: 900;
  text-align: center;
}

.book-card-new { grid-template-columns: minmax(260px, 350px) minmax(0, 1fr); }
.book-card-new .book-visual { position: relative; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.book-visual-link { color: inherit; text-decoration: none; cursor: pointer; border-radius: 18px; }
.book-visual-link:focus-visible { outline: 4px solid var(--yellow); outline-offset: 7px; }
.book-visual-link:hover .book-cover { transform: rotate(-3.4deg) translateY(-6px); box-shadow: 0 28px 54px rgba(94,69,12,.24); }
.book-card-new .book-cover { transition: transform .26s ease, box-shadow .26s ease; }
.book-card-new:hover .book-cover { box-shadow: 0 28px 54px rgba(94,69,12,.24); }
.book-buddy { position: relative; right: auto; bottom: auto; margin-top: 18px; display: flex; align-items: center; gap: 8px; padding: 7px 12px 7px 7px; border: 4px solid white; border-radius: 999px; background: rgba(255,255,255,.96); box-shadow: var(--shadow-sm); }
.book-buddy img { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; object-position: center top; }
.book-buddy span { color: var(--brand-dark); font-family: var(--font-rounded); font-size: .95rem; line-height: 1; white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) {
  .book-buddy { animation: bookBuddyInvite 5.4s ease-in-out infinite; }
}
@keyframes bookBuddyInvite {
  0%,100% { transform: translateX(-5px) rotate(-1.5deg); }
  50% { transform: translateX(5px) rotate(1deg); }
}
.book-card-new .book-cover {
  width: min(100%, 290px);
  height: auto !important;
  max-height: none;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center;
  border-radius: 9px;
  transform: rotate(-1.2deg);
}

.support-section { padding-top: 12px; }
.support-panel-new {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr);
  gap: 34px;
  align-items: center;
  padding: clamp(28px, 5vw, 54px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 92% 8%, rgba(38,199,208,.19), transparent 26%),
    linear-gradient(135deg, #fff, #f2fbf9);
  box-shadow: var(--shadow-sm);
}
.support-intro h2 { margin: 0; font-family: var(--font-rounded); font-size: clamp(2rem, 3.5vw, 3.15rem); line-height: 1.04; letter-spacing: -.04em; }
.support-intro > p:last-child { margin-bottom: 0; color: var(--muted); }
.support-actions-new { display: grid; gap: 12px; }
.support-card {
  min-height: 98px;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 15px 17px;
  border: 1px solid var(--line);
  border-radius: 21px;
  background: #fff;
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease;
}
.support-card:hover { transform: translateY(-2px); box-shadow: 0 18px 42px rgba(11,81,88,.16); }
.support-card .support-icon { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 17px; background: var(--brand-soft); font-size: 1.6rem; }
.support-card .support-icon img { width: 35px; height: 35px; }
.support-card small, .support-card strong, .support-card em { display: block; }
.support-card small { color: var(--brand-bright); font-size: .68rem; font-weight: 950; letter-spacing: .07em; text-transform: uppercase; }
.support-card strong { margin: 3px 0; font-family: var(--font-rounded); font-size: 1.05rem; line-height: 1.12; }
.support-card em { color: var(--muted); font-size: .82rem; font-style: normal; font-weight: 650; }
.support-card b { color: var(--brand-dark); font-size: 1.35rem; }
.support-youtube .support-icon { background: var(--red); }
.support-book .support-icon { background: var(--yellow-soft); }
.support-book-cover { overflow: hidden; padding: 4px; border: 1px solid rgba(128,104,12,.18); background: #fff !important; }
.support-card .support-book-cover img { width: 38px; height: 49px; object-fit: contain; border-radius: 3px; box-shadow: 0 5px 12px rgba(90,66,12,.2); }

/* Link page: conversion-first, ratio-safe */
.bio-proof { display: flex; flex-wrap: wrap; gap: 8px 10px; margin-top: 13px; color: #315e63; font-size: .73rem; font-weight: 850; }
.bio-proof span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: rgba(237,248,246,.96); box-shadow: inset 0 0 0 1px rgba(8,98,107,.08); }
.bio-proof span::before { content: "✓"; color: var(--brand-dark); font-weight: 1000; }
.bio-book { grid-template-columns: 86px minmax(0, 1fr) auto; }
.bio-book-cover { width: 80px; height: 104px; display: grid; place-items: center; overflow: hidden; border-radius: 7px; background: #fff; box-shadow: 0 9px 20px rgba(90,66,12,.18); }
.bio-book-cover img { width: 100%; height: 100%; max-width: none; object-fit: contain; object-position: center; border-radius: 0; box-shadow: none; }
.bio-support {
  display: grid;
  gap: 13px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(255,255,255,.92);
  box-shadow: var(--shadow-sm);
}
.bio-support strong { display: block; font-family: var(--font-rounded); font-size: 1.1rem; }
.bio-support p { margin: 5px 0 0; color: var(--muted); font-size: .86rem; }
.bio-support .btn { width: 100%; }

@media (max-width: 980px) {
  .world-grid-new { grid-template-columns: 1fr; }
  .world-visual-stack { order: 2; min-height: 560px; width: min(100%, 720px); margin-inline: auto; }
  .support-panel-new { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .world-visual-stack { min-height: 485px; }
  .world-logo-card { width: min(69%, 335px); border-width: 6px; border-radius: 27px; }
  .world-animal-card { width: min(78%, 390px); border-width: 5px; border-radius: 22px; }
  .book-card-new { grid-template-columns: 1fr; }
  .support-panel-new { padding: 25px 19px; }
}
@media (max-width: 480px) {
  .world-visual-stack { min-height: 405px; }
  .world-logo-card { width: 68%; }
  .world-animal-card { width: 79%; }
  .world-animal-card figcaption { font-size: .7rem; }
  .bio-book { grid-template-columns: 78px minmax(0, 1fr) auto; gap: 11px; }
  .bio-book-cover { width: 72px; height: 93px; }
}


/* Professional world layout */
.world-pro-grid { display:grid; grid-template-columns:minmax(0,.92fr) minmax(460px,1.08fr); gap:clamp(38px,6vw,76px); align-items:center; }
.world-copy-pro { text-align:left; }
.world-copy-pro h2 { max-width:620px; }
.world-pro-visual { min-width:0; display:grid; gap:16px; }
.world-scene-card { margin:0; overflow:hidden; border:7px solid #fff; border-radius:30px; background:#fff; box-shadow:var(--shadow); }
.world-scene-card img { width:100%; aspect-ratio:16/9; object-fit:cover; }
.world-brand-row { display:grid; grid-template-columns:88px minmax(0,1fr); gap:16px; align-items:center; padding:14px 16px; border:1px solid var(--line); border-radius:22px; background:#fff; box-shadow:var(--shadow-sm); text-align:left; }
.world-brand-row img { width:88px; height:88px; aspect-ratio:1/1; object-fit:cover; border-radius:20px; }
.world-brand-row strong,.world-brand-row span { display:block; }
.world-brand-row strong { color:var(--brand-dark); font-family:var(--font-rounded); font-size:1.1rem; }
.world-brand-row span { margin-top:4px; color:var(--muted); font-size:.9rem; }

/* Game teaser */
.game-teaser-section { padding-top:18px; }
.game-teaser { min-height:360px; display:grid; grid-template-columns:minmax(0,1fr) minmax(420px,.95fr); gap:34px; align-items:center; overflow:hidden; padding:clamp(30px,5vw,58px); border:1px solid rgba(8,74,82,.12); border-radius:var(--radius-lg); background:radial-gradient(circle at 90% 10%,rgba(255,241,180,.92),transparent 30%),linear-gradient(135deg,#e7f8f5,#b7e6d8); box-shadow:var(--shadow-sm); }
.game-teaser-copy h2 { margin:0; max-width:650px; font-family:var(--font-rounded); font-size:clamp(2.1rem,4vw,3.7rem); line-height:1.02; letter-spacing:-.045em; }
.game-teaser-copy p:not(.kicker) { max-width:660px; color:var(--muted); }
.game-teaser-cta { width: fit-content; max-width: 100%; display: grid; justify-items: center; gap: 10px; margin: 22px auto 0; }
.game-teaser-cta .btn { min-width: 224px; justify-content: center; }
.game-buddy { width: fit-content; max-width: 100%; display: flex; align-items: center; gap: 9px; margin: 0; padding: 7px 13px 7px 7px; border: 4px solid rgba(255,255,255,.94); border-radius: 999px; background: rgba(255,255,255,.94); box-shadow: var(--shadow-sm); }
.game-buddy img { width: 54px; height: 54px; flex: 0 0 auto; border-radius: 50%; object-fit: cover; object-position: center top; }
.game-buddy span { min-width: 0; display: grid; line-height: 1.05; }
.game-buddy small { margin-bottom: 4px; color: #087e8b; font-size: .68rem; font-weight: 950; letter-spacing: .07em; text-transform: uppercase; }
.game-buddy strong { color: var(--brand-dark); font-family: var(--font-rounded); font-size: .98rem; }
@media (prefers-reduced-motion: no-preference) {
  .game-buddy { animation: gameBuddyInvite 5.1s ease-in-out infinite; }
}
@keyframes gameBuddyInvite {
  0%,100% { transform: translateX(0) rotate(-1deg); }
  50% { transform: translateX(6px) rotate(.8deg); }
}
.game-teaser-art { position:relative; min-height:280px; }
.game-teaser-tractor { position:absolute; right:3%; bottom:-4%; width:min(82%,360px); filter:drop-shadow(0 20px 22px rgba(8,61,69,.2)); transform-origin: center bottom; }
.game-teaser-animal { position:absolute; width:86px; height:86px; padding:5px; border-radius:50%; background:#fff; box-shadow:var(--shadow-sm); transform-origin:center; }
.game-teaser-animal img { width:100%; height:100%; border-radius:50%; object-fit:cover; }
.animal-one { left: 48%; top: 11%; }
.animal-two { left: 35%; top: 54%; }
.animal-three { left: 82%; top: 15%; }
@media (prefers-reduced-motion: no-preference) {
  .game-teaser-tractor { animation: teaserTractorBob 4.8s ease-in-out infinite; }
  .animal-one { animation: teaserFloatOne 4.4s ease-in-out infinite; }
  .animal-two { animation: teaserFloatTwo 5s ease-in-out infinite; }
  .animal-three { animation: teaserFloatThree 4.2s ease-in-out infinite; }
}
@keyframes teaserTractorBob {
  0%,100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-7px) rotate(-1deg); }
}
@keyframes teaserFloatOne {
  0%,100% { transform: translate3d(0,0,0) rotate(-4deg); }
  50% { transform: translate3d(-8px,-10px,0) rotate(4deg); }
}
@keyframes teaserFloatTwo {
  0%,100% { transform: translate3d(0,0,0) rotate(3deg); }
  50% { transform: translate3d(9px,-6px,0) rotate(-3deg); }
}
@keyframes teaserFloatThree {
  0%,100% { transform: translate3d(0,0,0) rotate(-2deg); }
  50% { transform: translate3d(-6px,8px,0) rotate(5deg); }
}

/* Game page */
.game-page { background:linear-gradient(180deg,#dff6f0,#fffaf0); }
.game-header .game-back { min-height:45px; padding:10px 15px; box-shadow:none; }
.game-main { min-height:75vh; }
.game-hero { padding:54px 0 25px; text-align:center; }
.game-intro { max-width:820px; }
.game-intro h1 { margin:0; font-family:var(--font-rounded); font-size:clamp(2.7rem,7vw,5.4rem); line-height:.96; letter-spacing:-.055em; }
.game-intro p:last-child { max-width:680px; margin:18px auto 0; color:var(--muted); font-size:1.05rem; }
.game-shell-section { padding:20px 0 86px; }
.game-shell { max-width:1040px; }
.game-toolbar { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:12px; }
.game-toolbar>div { padding:12px 15px; border:1px solid var(--line); border-radius:16px; background:#fff; box-shadow:var(--shadow-sm); }
.game-toolbar small,.game-toolbar strong { display:block; }.game-toolbar small { color:var(--muted); font-size:.72rem; font-weight:850; text-transform:uppercase; letter-spacing:.06em; }.game-toolbar strong { color:var(--brand-dark); font-family:var(--font-rounded); font-size:1.15rem; }
.game-board-wrap { position:relative; overflow:hidden; border:8px solid #fff; border-radius:30px; background:#a5dc8c; box-shadow:var(--shadow); }
#game-canvas { display:block; width:100%; height:auto; aspect-ratio:16/10; touch-action:none; }
.game-message { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:25px; background:rgba(8,61,69,.72); color:#fff; text-align:center; backdrop-filter:blur(4px); }
.game-message[hidden] { display:none!important; }.game-message strong { max-width:640px; font-family:var(--font-rounded); font-size:clamp(1.6rem,4vw,3rem); line-height:1.05; }.game-message span { max-width:620px; color:#d8f2ef; }.game-message .btn { margin-top:8px; }
.game-controls { display:none; margin:18px auto 0; width:250px; text-align:center; user-select:none; }.game-controls>button,.game-controls div button { width:70px; height:58px; margin:4px; border:1px solid var(--line); border-radius:18px; background:#fff; color:var(--brand-dark); box-shadow:var(--shadow-sm); font-size:1.3rem; font-weight:950; touch-action:none; }.game-controls div { display:flex; justify-content:center; }
.game-help { display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:18px; padding:16px 18px; border:1px solid var(--line); border-radius:18px; background:rgba(255,255,255,.78); color:var(--muted); font-size:.86rem; }.game-help strong { color:var(--brand-dark); }.game-footer { display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; }.game-footer nav { display:flex; flex-wrap:wrap; gap:12px; }.game-footer a { color:#fff; font-weight:750; }
.bio-game { background:linear-gradient(135deg,#fff8d4,#fff); }.bio-game-icon { width:42px; height:42px; display:grid; place-items:center; border-radius:14px; background:var(--yellow-soft); font-size:1.45rem; }

@media(max-width:980px){.world-pro-grid{grid-template-columns:1fr}.world-pro-visual{width:min(100%,760px)}.game-teaser{grid-template-columns:1fr}.game-teaser-art{min-height:300px}.game-controls{display:block}}
@media(max-width:760px){.world-brand-row{grid-template-columns:72px 1fr}.world-brand-row img{width:72px;height:72px}.game-teaser{padding:26px 19px}.game-teaser-art{min-height:250px}.game-toolbar{grid-template-columns:1fr 1fr}.game-toolbar>div:last-child{grid-column:1/-1}.game-board-wrap{border-width:5px;border-radius:22px}.game-header .game-back{font-size:.8rem}.game-help{display:grid}.game-footer{display:grid}.game-teaser-animal{width:70px;height:70px}.animal-three{width:58px;height:58px}}
@media(max-width:480px){.bio-brand-card{grid-template-columns:56px minmax(0,1fr);gap:10px;padding:9px 12px 10px 9px;border-radius:19px}.bio-brand-card img{width:56px;height:56px}.bio-brand-card-copy strong{font-size:1.38rem}.bio-brand-card-copy em{font-size:.7rem} .world-scene-card{border-width:5px;border-radius:22px}.world-brand-row{grid-template-columns:58px 1fr;padding:11px}.world-brand-row img{width:58px;height:58px;border-radius:15px}.world-brand-row strong{font-size:.96rem}.world-brand-row span{font-size:.78rem}.game-teaser-art{min-height:220px}.game-teaser-tractor{width:78%}.game-controls{width:230px}.game-controls>button,.game-controls div button{width:64px;height:54px}.game-header .brand-text{font-size:1rem}.game-header .game-back{padding:9px 11px}}

/* LumiLino Mini-Spiel – Sound- und Spieloptimierung */
.visually-hidden { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.game-toolbar { grid-template-columns:minmax(220px,1.4fr) repeat(3,minmax(135px,1fr)); }
.game-mission-card { background:linear-gradient(135deg,#fff6bf,#fff)!important; }
.game-audio-bar { display:flex; align-items:center; justify-content:flex-end; gap:10px; margin:0 0 12px; padding:10px 12px; border:1px solid var(--line); border-radius:16px; background:rgba(255,255,255,.85); box-shadow:var(--shadow-sm); }
.game-option { display:inline-flex; align-items:center; gap:7px; min-height:42px; padding:9px 13px; border:1px solid rgba(8,74,82,.16); border-radius:13px; background:#fff; color:var(--brand-dark); font:800 .82rem var(--font-body); cursor:pointer; }
.game-option:hover { transform:translateY(-1px); box-shadow:0 8px 18px rgba(8,61,69,.1); }
.game-option:disabled { opacity:.45; cursor:not-allowed; transform:none; box-shadow:none; }
.game-volume { display:flex; align-items:center; gap:9px; color:var(--muted); font-size:.78rem; font-weight:800; }
.game-volume input { width:110px; accent-color:var(--accent-turquoise); }
.game-board-wrap { border-color:#fff9e7; background:#86c86b; }
.game-message { background:linear-gradient(180deg,rgba(8,61,69,.66),rgba(8,61,69,.82)); }
.game-message-card { display:flex; flex-direction:column; align-items:center; gap:11px; width:min(92%,690px); padding:clamp(24px,4vw,42px); border:2px solid rgba(255,255,255,.35); border-radius:28px; background:rgba(8,61,69,.84); box-shadow:0 26px 70px rgba(0,0,0,.26); }
.game-message-star { display:grid; place-items:center; width:58px; height:58px; border-radius:50%; background:var(--yellow); color:#6a4b00; font-size:2rem; box-shadow:0 10px 24px rgba(0,0,0,.18); }
.game-message-card>strong { max-width:600px; font-family:var(--font-rounded); font-size:clamp(1.65rem,4vw,3rem); line-height:1.04; }
.game-message-card>span:not(.game-message-star) { max-width:610px; color:#e3f7f4; }
.game-message-card small { color:#c6e8e5; font-weight:700; }
.game-start-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:6px; }
.game-start-actions .btn { margin:0; }
.game-result-stars { display:block; margin-top:10px; color:var(--yellow); font-size:2rem; letter-spacing:.13em; }
.game-toast { position:absolute; left:50%; bottom:18px; z-index:4; max-width:min(86%,620px); padding:12px 18px; border:2px solid rgba(255,255,255,.75); border-radius:999px; background:rgba(8,61,69,.9); color:#fff; font-weight:850; text-align:center; box-shadow:0 16px 35px rgba(8,61,69,.28); opacity:0; transform:translate(-50%,18px); pointer-events:none; transition:opacity .2s ease,transform .2s ease; }
.game-toast.is-visible { opacity:1; transform:translate(-50%,0); }
.game-help { justify-content:center; }
#game-canvas { cursor:crosshair; }
.game-controls button:active { transform:translateY(2px) scale(.97); background:var(--yellow-soft); }
.game-teaser-animal img { object-fit:cover; }

@media(max-width:900px){
  .game-toolbar { grid-template-columns:1fr 1fr; }
  .game-mission-card { grid-column:1/-1; }
  .game-toolbar>div:last-child { grid-column:auto; }
  .game-audio-bar { justify-content:center; flex-wrap:wrap; }
}
@media(max-width:620px){
  .game-hero { padding-top:34px; }
  .game-intro h1 { font-size:clamp(2.35rem,12vw,4rem); }
  .game-toolbar { grid-template-columns:1fr 1fr; gap:8px; }
  .game-toolbar>div { padding:10px 11px; }
  .game-toolbar small { font-size:.62rem; }
  .game-toolbar strong { font-size:1rem; }
  .game-mission-card { grid-column:1/-1; }
  .game-audio-bar { padding:9px; }
  .game-volume { width:100%; justify-content:center; }
  .game-volume input { width:min(55vw,180px); }
  .game-option { flex:1; justify-content:center; min-width:120px; }
  .game-message-card { border-radius:22px; padding:23px 16px; }
  .game-start-actions { display:grid; width:100%; }
  .game-start-actions .btn { width:100%; }
  .game-toast { bottom:10px; border-radius:18px; font-size:.82rem; }
}
@media(prefers-reduced-motion:reduce){
  .game-toast,.game-option,.game-controls button { transition:none!important; }
}
.game-shell:fullscreen { width:100%; max-width:none; min-height:100%; padding:18px; overflow:auto; background:linear-gradient(180deg,#dff6f0,#fffaf0); }
.game-shell:fullscreen .game-board-wrap { max-width:min(100%,1220px); margin-inline:auto; }
.game-shell:fullscreen .game-controls { display:block; }
.game-shell:fullscreen .game-help { max-width:1120px; margin-inline:auto; }
@media(max-width:620px){.game-audio-bar .game-option{min-width:108px}.game-shell:fullscreen{padding:8px}.game-shell:fullscreen .game-toolbar{margin-top:4px}}

/* LumiLino Spiel – Kapitel, Belohnungen und Finale */
.game-journey {
  display:grid;
  grid-template-columns:auto minmax(30px,1fr) auto minmax(30px,1fr) auto;
  align-items:center;
  gap:9px;
  margin:0 0 12px;
  padding:11px 15px;
  border:1px solid var(--line);
  border-radius:17px;
  background:rgba(255,255,255,.86);
  box-shadow:var(--shadow-sm);
}
.game-journey-step {
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--muted);
  font-size:.75rem;
  font-weight:850;
  white-space:nowrap;
}
.game-journey-step span {
  display:grid;
  place-items:center;
  width:29px;
  height:29px;
  border:2px solid rgba(8,74,82,.18);
  border-radius:50%;
  background:#fff;
  color:var(--muted);
  font:900 .82rem var(--font-rounded);
}
.game-journey-step.is-active { color:var(--brand-dark); }
.game-journey-step.is-active span {
  border-color:var(--yellow);
  background:var(--yellow-soft);
  color:#745400;
  box-shadow:0 0 0 5px rgba(245,201,78,.17);
}
.game-journey-step.is-done { color:var(--brand-dark); }
.game-journey-step.is-done span {
  border-color:var(--accent-turquoise);
  background:var(--accent-turquoise);
  color:#fff;
}
.game-journey-step.is-done span::before { content:"✓"; }
.game-journey-step.is-done span { font-size:0; }
.game-journey-step.is-done span::before { font-size:.9rem; }
.game-journey-line {
  height:4px;
  border-radius:99px;
  background:linear-gradient(90deg,rgba(38,199,208,.24),rgba(245,201,78,.38));
}
.game-result-actions {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  margin-top:5px;
}
.game-result-badges {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:9px;
  width:100%;
  margin-top:5px;
}
.game-result-badge {
  display:flex;
  align-items:center;
  gap:9px;
  min-height:76px;
  padding:10px;
  border:1px solid rgba(255,255,255,.25);
  border-radius:16px;
  background:rgba(255,255,255,.09);
  text-align:left;
}
.game-result-badge>span {
  flex:0 0 auto;
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border-radius:12px;
  background:rgba(255,255,255,.15);
  font-size:1.25rem;
}
.game-result-badge strong,
.game-result-badge small { display:block; }
.game-result-badge strong { color:#fff; font-size:.8rem; }
.game-result-badge small { margin-top:2px; color:#d7efec; font-size:.66rem; line-height:1.3; }
.game-result-badge.is-earned {
  border-color:rgba(245,201,78,.7);
  background:rgba(245,201,78,.15);
}
.game-result-badge.is-earned>span { background:var(--yellow); }
.game-result-badge.is-next { opacity:.76; }
.game-message-card { max-height:94%; overflow:auto; }
.game-message-copy strong { color:#fff; }

@media(max-width:760px){
  .game-journey { grid-template-columns:repeat(3,1fr); gap:6px; padding:10px; }
  .game-journey-line { display:none; }
  .game-journey-step { justify-content:center; gap:5px; white-space:normal; text-align:center; font-size:.64rem; }
  .game-journey-step span { width:25px; height:25px; }
  .game-result-badges { grid-template-columns:1fr; }
  .game-result-badge { min-height:0; }
  .game-result-actions { display:grid; width:100%; }
  .game-result-actions .btn { width:100%; }
}

@media(max-width:480px){.bio-brand-card{grid-template-columns:56px minmax(0,1fr);gap:10px;padding:9px 12px 10px 9px;border-radius:19px}.bio-brand-card img{width:56px;height:56px}.bio-brand-card-copy strong{font-size:1.38rem}.bio-brand-card-copy em{font-size:.7rem} 
  .game-journey-step { display:grid; justify-items:center; }
  .game-audio-bar { gap:7px; }
  .game-option { min-width:96px!important; padding:8px 9px; font-size:.72rem; }
  .game-message-card { max-height:96%; }
  .game-result-stars { font-size:1.6rem; }
}

@media(max-width:620px){
  .game-hero { padding:24px 0 12px; }
  .game-intro h1 { font-size:clamp(2.25rem,11vw,3.25rem); line-height:.94; }
  .game-intro p:last-child { margin-top:12px; font-size:.92rem; line-height:1.45; }
  .game-shell-section { padding-top:10px; }
  .game-toolbar>div:last-child { grid-column:1/-1; }
  .game-journey { margin-bottom:9px; }
}


/* Mobile Spielkomfort: Spielfeld und Steuerung bleiben gemeinsam nutzbar. */
.game-page { overscroll-behavior-y:contain; }
.game-controls { position:relative; z-index:7; }
@media(max-width:620px){
  .game-header .nav { min-height:62px; }
  .game-header .brand-emblem { width:43px; height:43px; }
  .game-header .brand-text small { margin-top:3px; }
  .game-hero .eyebrow { margin-bottom:6px; }
  .game-intro p:last-child { max-width:34rem; }
  .game-shell { width:min(calc(100% - 20px),1040px); }
  .game-toolbar { margin-bottom:8px; }
  .game-toolbar>div:nth-child(4) { display:none; }
  .game-audio-bar { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin-bottom:8px; }
  .game-audio-bar .game-volume { grid-column:1/-1; padding:0 4px 2px; }
  .game-option { min-width:0!important; width:100%; padding:8px 6px; }
  .game-option span:last-child { font-size:.68rem; }
  .game-board-wrap { border-width:4px; border-radius:19px; }
  #game-canvas { aspect-ratio:16/10; }
  .game-controls {
    position:sticky;
    bottom:max(6px,env(safe-area-inset-bottom));
    width:232px;
    margin:10px auto 0;
    padding:7px 8px;
    border:1px solid rgba(8,74,82,.15);
    border-radius:22px;
    background:rgba(255,253,248,.94);
    box-shadow:0 14px 32px rgba(8,61,69,.18);
    backdrop-filter:blur(8px);
  }
  .game-controls>button,.game-controls div button { width:61px; height:50px; margin:3px; border-radius:15px; }
  .game-help { margin-top:12px; padding:13px 14px; font-size:.78rem; }
  .game-message { padding:12px; }
  .game-message-card { width:96%; padding:19px 13px; }
  .game-message-card>strong { font-size:clamp(1.45rem,7vw,2.2rem); }
  .game-message-card>span:not(.game-message-star) { font-size:.88rem; }
  .game-message-star { width:48px; height:48px; font-size:1.6rem; }
}
@media(max-width:380px){
  .game-header .game-back { font-size:.7rem; }
  .game-intro h1 { font-size:2.08rem; }
  .game-journey-step strong { display:none; }
  .game-journey-step span { width:29px; height:29px; }
}

/* Rechtsseiten und Pflegehinweise */
.legal-status-note { margin:0 0 24px; padding:14px 16px; border:1px solid rgba(190,132,0,.3); border-radius:16px; background:#fff7cf; color:#604900; }
.legal-small { color:var(--muted); font-size:.88rem; }

@media (max-width:760px){.video-rail .video-card{display:flex;flex-direction:column}.video-rail .video-thumb{height:auto;aspect-ratio:16/9}.video-rail .video-body{padding:20px}.video-rail .video-body h3{font-size:1.3rem}.video-rail .video-body p{font-size:.92rem}}

/* Mobile Liedspiel: größere Spielfiguren durch eine sanft mitfahrende Panorama-Ansicht. */
@media (max-width:620px) and (orientation:portrait) {
  .game-controls {
    position:relative;
    bottom:auto;
    margin:12px auto 0;
  }
  .game-board-wrap { overflow:hidden; }
  #game-canvas {
    width:170%;
    max-width:none;
    height:auto;
    aspect-ratio:auto;
    transform-origin:left top;
    will-change:transform;
  }
  .game-message { padding:10px; }
  .game-message-card { gap:7px; padding:15px 12px; }
  .game-message-star { width:42px; height:42px; font-size:1.35rem; }
  .game-message-card>strong { font-size:clamp(1.25rem,6.2vw,1.75rem); }
  .game-message-card>span:not(.game-message-star) { font-size:.78rem; line-height:1.35; }
  .game-message-card small { font-size:.66rem; line-height:1.3; }
  .game-start-actions { display:flex; flex-wrap:nowrap; gap:7px; width:100%; }
  .game-start-actions .btn { min-height:42px; padding:9px 8px; font-size:.7rem; }
}
.game-shell:fullscreen #game-canvas { width:100%; max-width:100%; transform:none!important; }

/* Finale Optimierung: intuitive Linkseite */
.bio-song-carousel { position:relative; }
.bio-song-list { cursor:grab; scroll-padding-inline:4px; }
.bio-song-list.is-dragging { cursor:grabbing; scroll-snap-type:none; user-select:none; }
.bio-song-controls { display:grid; grid-template-columns:46px minmax(0,1fr) 46px; align-items:center; gap:10px; margin:2px 0 5px; }
.bio-song-controls button { width:46px; height:46px; border:1px solid rgba(8,74,82,.17); border-radius:15px; background:#fff; color:var(--brand-dark); box-shadow:var(--shadow-sm); font:950 1.25rem/1 var(--font-body); cursor:pointer; }
.bio-song-controls button:hover:not(:disabled), .bio-song-controls button:focus-visible { background:var(--brand-soft); outline:3px solid rgba(38,199,208,.26); outline-offset:2px; }
.bio-song-controls button:disabled { opacity:.35; cursor:default; box-shadow:none; }
.bio-song-guide { min-width:0; text-align:center; }
.bio-song-guide strong, .bio-song-guide span { display:block; }
.bio-song-guide strong { color:var(--brand-dark); font-size:.8rem; }
.bio-song-guide span { margin-top:1px; color:var(--muted); font-size:.68rem; font-weight:760; }
.bio-song-progress { height:5px; margin:6px 3px 0; overflow:hidden; border-radius:99px; background:rgba(8,74,82,.12); }
.bio-song-progress i { display:block; width:14.285%; height:100%; border-radius:inherit; background:var(--brand-bright); transition:width .22s ease, transform .22s ease; }
@media(min-width:700px){
  .bio-song { flex-basis:calc(50% - 10px); }
}
@media(max-width:430px){
  .bio-song { flex-basis:84%; }
  .bio-song-controls { grid-template-columns:43px minmax(0,1fr) 43px; gap:7px; }
  .bio-song-controls button { width:43px; height:43px; }
  .bio-song-guide span { font-size:.63rem; }
}

/* Finale Optimierung: Spielgeschichte und sichtbarer Tierfortschritt */
.game-story-strip { display:grid; grid-template-columns:52px minmax(0,1fr); align-items:center; gap:12px; margin:0 0 11px; padding:12px 15px; border:1px solid rgba(8,74,82,.14); border-radius:18px; background:linear-gradient(135deg,#fffef8,#eefaf7); box-shadow:var(--shadow-sm); }
.game-story-strip>span { display:grid; place-items:center; width:52px; height:52px; border-radius:17px; background:var(--yellow-soft); font-size:1.65rem; }
.game-story-strip small, .game-story-strip strong, .game-story-strip p { display:block; }
.game-story-strip small { color:#087e8b; font-size:.65rem; font-weight:950; letter-spacing:.09em; text-transform:uppercase; }
.game-story-strip strong { margin-top:1px; color:var(--brand-deep); font-family:var(--font-rounded); font-size:1.05rem; }
.game-story-strip p { margin:2px 0 0; color:var(--muted); font-size:.82rem; line-height:1.35; }
.game-animal-progress { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; margin:0 0 12px; }
.game-animal-token { position:relative; display:grid; justify-items:center; gap:3px; min-width:0; padding:6px 4px 5px; border:1px solid rgba(8,74,82,.12); border-radius:15px; background:rgba(255,255,255,.83); color:var(--muted); font-size:.61rem; font-weight:850; text-align:center; transition:transform .22s ease, background .22s ease, border-color .22s ease; }
.game-animal-token img { width:42px; height:42px; border-radius:50%; object-fit:cover; filter:saturate(.68); opacity:.62; }
.game-animal-token.is-waiting { border-color:rgba(245,201,78,.72); background:#fff9dc; color:#6a5200; }
.game-animal-token.is-waiting img { filter:none; opacity:1; animation:animalWait 1.8s ease-in-out infinite; }
.game-animal-token.is-cargo { border-color:var(--brand-bright); background:var(--brand-soft); color:var(--brand-dark); transform:translateY(-2px); }
.game-animal-token.is-cargo img, .game-animal-token.is-delivered img { filter:none; opacity:1; }
.game-animal-token.is-delivered { border-color:#68b86a; background:#effaed; color:#27682c; }
.game-animal-token.is-delivered::after { content:"✓"; position:absolute; right:4px; top:4px; display:grid; place-items:center; width:18px; height:18px; border-radius:50%; background:#58ad5b; color:white; font-size:.72rem; }
@keyframes animalWait { 50% { transform:translateY(-3px) rotate(-2deg); } }
.game-toast { min-width:min(82%,300px); line-height:1.35; }
@media(max-width:620px){
  .game-story-strip { grid-template-columns:44px minmax(0,1fr); gap:9px; padding:10px 11px; }
  .game-story-strip>span { width:44px; height:44px; border-radius:14px; font-size:1.35rem; }
  .game-story-strip strong { font-size:.91rem; }
  .game-story-strip p { font-size:.73rem; }
  .game-animal-progress { gap:4px; }
  .game-animal-token { padding:4px 2px; border-radius:11px; font-size:0; }
  .game-animal-token img { width:34px; height:34px; }
  .game-animal-token.is-delivered::after { right:1px; top:1px; width:15px; height:15px; font-size:.62rem; }
  .game-toast { max-width:92%; bottom:8px; }
}
.game-page .game-header { position:relative; top:auto; }


/* Markenfassung: ruhige, konsistente Mikrointeraktionen */
.brand-text { isolation:isolate; }
.brand-text small { text-shadow:0 1px 0 rgba(255,255,255,.8); }
.bio-song-carousel::before, .bio-song-carousel::after { content:""; position:absolute; z-index:2; top:0; bottom:64px; width:18px; pointer-events:none; opacity:.72; transition:opacity .2s ease; }
.bio-song-carousel::before { left:-1px; background:linear-gradient(90deg,var(--brand-soft),transparent); }
.bio-song-carousel::after { right:-1px; background:linear-gradient(270deg,var(--brand-soft),transparent); }
.bio-song-carousel.is-at-start::before, .bio-song-carousel.is-at-end::after { opacity:0; }
.bio-song-controls button:not(:disabled) { animation:carouselNudge 2.8s ease-in-out 1; }
@keyframes carouselNudge { 0%,100%{transform:translateX(0)} 35%{transform:translateX(2px)} 65%{transform:translateX(-2px)} }
@media(prefers-reduced-motion:reduce){.bio-song-controls button:not(:disabled){animation:none}}

.game-session-reward {
  display:block;
  margin-top:12px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.25);
  border-radius:14px;
  background:rgba(255,255,255,.1);
  color:#e9fbf8;
  font-size:.82rem;
  line-height:1.4;
}
.game-session-reward strong { color:#fff3a9; }

.legal-card--center { max-width:760px; margin-inline:auto; text-align:center; }
.legal-card--center .btn { margin-top:12px; }


/* Vollständige Vorschaubilder und sichere Textumbrüche */
.current-card {
  grid-template-columns: minmax(0, 1.22fr) minmax(390px, .78fr);
  align-items: stretch;
}
.current-media {
  min-width: 0;
  min-height: 430px;
  aspect-ratio: auto;
  display: grid;
  place-items: center;
  background: #0c8bd8;
}
.current-media picture,
.current-media img,
.bio-thumb picture,
.bio-thumb img,
.video-thumb picture,
.video-thumb img {
  display: block;
  width: 100%;
  height: 100%;
}
.current-media img {
  object-fit: contain !important;
  object-position: center;
  background: #0c8bd8;
  transform: none !important;
}
.bio-thumb img,
.video-thumb img,
.bio-song img {
  object-fit: contain;
  object-position: center;
  background: #e5f5f4;
}
.current-media:hover img,
.video-card:hover .video-thumb img {
  transform: none;
}
.current-copy {
  min-width: 0;
  padding: clamp(28px, 3.7vw, 48px);
  overflow: visible;
}
.current-copy h2 {
  max-width: 100%;
  margin-right: 0;
  font-size: clamp(2rem, 3vw, 3.15rem);
  line-height: 1.02;
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
  text-wrap: balance;
  white-space: normal;
}
.current-copy > p,
.hero-sticker strong {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
}
.bio-copy h2,
.video-body h3,
.bio-song strong {
  overflow-wrap: anywhere;
  hyphens: auto;
}
.bio-thumb,
.video-thumb,
.bio-song img {
  aspect-ratio: 16 / 9;
}
.bio-song img {
  border: 1px solid rgba(8, 74, 82, .08);
}

@media (max-width: 1080px) {
  .current-card {
    grid-template-columns: 1fr;
  }
  .current-media {
    width: 100%;
    min-height: 0;
    aspect-ratio: 16 / 9;
  }
  .current-copy h2 {
    font-size: clamp(2.05rem, 5.8vw, 3.35rem);
  }
}

/* Lino und Lina begleiten das Spiel dezent */
.game-companions {
  display: grid;
  grid-template-columns: minmax(175px, auto) minmax(220px, 1fr) minmax(175px, auto);
  align-items: center;
  gap: 12px;
  margin: 0 0 12px;
  padding: 8px 12px;
  border: 1px solid rgba(8, 74, 82, .13);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255,255,255,.94), rgba(231,248,245,.92));
  box-shadow: var(--shadow-sm);
}
.game-companion-card {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
}
.game-companion-card-lina {
  justify-content: flex-end;
  text-align: right;
}
.game-companion-card img {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border: 3px solid #fff;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 8%;
  box-shadow: 0 7px 18px rgba(8,61,69,.14);
}
.game-companion-card strong,
.game-companion-card small {
  display: block;
}
.game-companion-card strong {
  color: var(--brand-dark);
  font-family: var(--font-rounded);
  font-size: .92rem;
}
.game-companion-card small {
  color: var(--muted);
  font-size: .7rem;
  font-weight: 750;
  line-height: 1.15;
}
.game-companions p {
  margin: 0;
  color: #285f66;
  font-size: .82rem;
  font-weight: 850;
  text-align: center;
}
.game-rescue {
  background: linear-gradient(135deg, #fff8d4, #fff);
  border-color: rgba(181, 131, 0, .22);
}
.game-rescue:not(:disabled):hover {
  background: var(--yellow-soft);
}
.game-board-rescue {
  position: absolute;
  z-index: 8;
  top: 12px;
  right: 12px;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 13px;
  border: 3px solid rgba(255,255,255,.94);
  border-radius: 15px;
  background: rgba(11,98,107,.94);
  color: #fff;
  box-shadow: 0 10px 24px rgba(8,61,69,.2);
  font: 900 .78rem/1 var(--font-body);
  cursor: pointer;
}
.game-board-rescue:hover:not(:disabled),
.game-board-rescue:focus-visible:not(:disabled) {
  background: var(--brand-deep);
}
.game-board-rescue:focus-visible {
  outline: 4px solid var(--yellow);
  outline-offset: 2px;
}
.game-board-rescue:disabled {
  opacity: .45;
  cursor: default;
}

@media (max-width: 760px) {
  .video-card {
    display: flex;
    grid-template-columns: none;
  }
  .video-thumb {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }
  .current-copy h2 {
    font-size: clamp(2rem, 10vw, 3rem);
  }
  .game-companions {
    grid-template-columns: 1fr 1fr;
    gap: 8px 12px;
  }
  .game-companions p {
    grid-column: 1 / -1;
    grid-row: 2;
    padding-top: 2px;
  }
  .game-companion-card-lina {
    justify-content: flex-end;
  }
}
@media (max-width: 480px) {
  .game-board-rescue {
    top: 7px;
    right: 7px;
    min-height: 36px;
    padding: 7px 9px;
    border-width: 2px;
    border-radius: 12px;
    font-size: .66rem;
  }
  .bio-song {
    flex-basis: min(84vw, 306px);
  }
  .game-companion-card span {
    display: none;
  }
  .game-companion-card img {
    width: 52px;
    height: 52px;
    flex-basis: 52px;
  }
  .game-companion-card-lina {
    justify-content: flex-end;
  }
  .game-companions p {
    font-size: .78rem;
  }
}

@media (max-width: 760px) {
  .video-thumb,
  .bio-thumb,
  .bio-song img {
    aspect-ratio: 16 / 9;
    background: #eef8f6;
  }
  .video-body {
    padding: 17px 16px 18px;
  }
  .video-body h3 {
    font-size: 1.25rem;
    line-height: 1.13;
  }
}
@media (max-width: 430px) {
  .current-copy {
    padding-inline: 18px;
  }
  .current-copy h2 {
    font-size: clamp(1.9rem, 9.5vw, 2.7rem);
  }
}

.game-intro {
  max-width: 920px;
}
.game-intro h1 {
  font-size: clamp(2.7rem, 6vw, 4.7rem);
  overflow-wrap: normal;
  hyphens: none;
  text-wrap: balance;
}
@media (max-width: 760px) {
  .game-intro h1 {
    font-size: clamp(2.3rem, 11vw, 3.65rem);
  }
}
@media (max-width: 350px) {
  .current-copy h2 {
    overflow-wrap: anywhere;
  }
}


/* Version 17 – ruhiger Markenblock und freiwilliger Bewertungs-Hinweis */
.bio-page {
  padding-top: 12px;
  background:
    radial-gradient(circle at 14% 0, rgba(255,239,160,.48), transparent 29%),
    linear-gradient(180deg, #8bd3ce 0, #e9f9f6 42%, #fffaf0 100%);
}
.bio-shell { width: min(calc(100% - 24px), 680px); }
.bio-head { padding: 0 0 10px; }
.bio-brand-card {
  width: 100%;
  grid-template-columns: 64px minmax(0,1fr) auto;
  gap: 14px;
  padding: 11px 15px 12px 11px;
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(238,250,248,.98));
  box-shadow: 0 13px 30px rgba(11,81,88,.13);
}
.bio-brand-card-copy em { max-width: 320px; }
.bio-brand-home {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-left: 15px;
  border-left: 1px solid rgba(11,104,114,.14);
  color: #315e63;
  font-size: .72rem;
  font-weight: 900;
  white-space: nowrap;
}
.bio-brand-home b {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--brand-dark);
  color: white;
  font-size: 1rem;
}
.bio-brand-card:hover .bio-brand-home b { transform: translateX(2px); }
.bio-brand-home b { transition: transform .18s ease; }
.bio-new { margin-top: 0; }
.bio-current { border-radius: 26px; }
.bio-proof { justify-content: center; }
.bio-proof span { justify-content: center; text-align: center; }
.bio-review-note {
  display: grid;
  grid-template-columns: 30px minmax(0,1fr);
  gap: 9px;
  align-items: center;
  margin: 9px 2px 0;
  padding: 10px 12px;
  border: 1px solid rgba(128,104,12,.14);
  border-radius: 15px;
  background: rgba(255,250,226,.78);
  color: #5e563d;
  font-size: .75rem;
  line-height: 1.35;
}
.bio-review-note .review-brand {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(128,104,12,.15);
  border-radius: 10px;
  background: #fff;
}
.bio-review-note .review-brand img { width: 21px; height: 21px; object-fit: contain; }
.bio-review-note strong { color: var(--brand-deep); }
.book-review-note {
  max-width: 610px;
  display: grid;
  grid-template-columns: 36px minmax(0,1fr);
  gap: 10px;
  align-items: center;
  margin: 17px 0 0;
  padding: 12px 14px;
  border: 1px solid rgba(128,104,12,.16);
  border-radius: 17px;
  background: rgba(255,250,226,.8);
  color: #665e47;
  font-size: .86rem;
  line-height: 1.4;
}
.book-review-note .review-brand {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(128,104,12,.16);
  border-radius: 11px;
  background: #fff;
}
.book-review-note .review-brand img { width: 25px; height: 25px; object-fit: contain; }
.book-review-note strong { color: var(--brand-deep); }
@media (max-width: 560px) {
  .bio-brand-card { grid-template-columns: 56px minmax(0,1fr) 32px; gap: 10px; padding: 9px 10px 10px 9px; border-radius: 20px; }
  .bio-brand-card img { width: 56px; height: 56px; }
  .bio-brand-card-copy strong { font-size: 1.38rem; }
  .bio-brand-card-copy em { margin-top: 6px; font-size: .68rem; }
  .bio-brand-home { padding-left: 0; border-left: 0; }
  .bio-brand-home > span { display: none; }
  .bio-brand-home b { width: 30px; height: 30px; }
  .bio-proof { gap: 6px; }
  .bio-proof span { padding: 5px 8px; font-size: .68rem; }
  .book-review-note { text-align: left; }
}

/* Version 18 – klarere Video-Begriffe, zentrierter Spiel-CTA und neutraler Bewertungs-Hinweis */


/* Version 19 – klarere Hierarchie, Lino mittig und neutraler Bewertungs-Hinweis */
.game-teaser {
  position: relative;
  padding-bottom: clamp(102px, 8vw, 118px);
}
.game-teaser-cta {
  width: fit-content;
  display: block;
  margin: 22px 0 0;
}
.game-teaser-cta .btn {
  min-width: 0;
  justify-content: flex-start;
}
.game-buddy {
  position: absolute;
  left: 50%;
  bottom: 22px;
  z-index: 5;
  max-width: calc(100% - 34px);
  transform: translateX(-50%);
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .game-buddy { animation: gameBuddyInviteCentered 5.4s ease-in-out infinite; }
}
@keyframes gameBuddyInviteCentered {
  0%,100% { transform: translateX(-50%) translateY(0) rotate(-1deg); }
  50% { transform: translateX(-50%) translateY(-5px) rotate(.7deg); }
}
.review-rating-mark {
  min-width: 70px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 8px;
  border: 1px solid rgba(128,104,12,.16);
  border-radius: 999px;
  background: rgba(255,255,255,.84);
}
.review-stars {
  color: #a87900;
  font-size: .95rem;
  line-height: 1;
  letter-spacing: .04em;
  white-space: nowrap;
}
.book-review-note,
.bio-review-note {
  grid-template-columns: auto minmax(0,1fr);
  background: rgba(255,252,239,.64);
  box-shadow: none;
}
.book-review-note {
  margin-top: 15px;
  padding: 10px 12px;
  border-radius: 14px;
}
.bio-review-note {
  margin-top: 7px;
  padding: 8px 10px;
  border-radius: 13px;
}
.bio-proof span {
  background: rgba(246,252,251,.82);
  box-shadow: inset 0 0 0 1px rgba(8,98,107,.07);
}
@media (max-width: 760px) {
  .game-teaser { padding-bottom: 104px; }
  .game-teaser-cta { margin-left: 0; }
}
@media (max-width: 480px) {
  .game-buddy { bottom: 18px; }
  .review-rating-mark { min-width: 62px; padding-inline: 6px; }
  .review-stars { font-size: .84rem; }
}