/* Lara & Yosef – Website v1 (17.10.2026)
   Mobile first. Keine externen Dateien, keine Cookies. */

@font-face {
  font-family: "Noto Naskh Arabic";
  src: url("../fonts/NotoNaskhArabic-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Noto Naskh Arabic";
  src: url("../fonts/NotoNaskhArabic-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

:root {
  color-scheme: light;
  --bg: #e6f3ff;
  --card: #ffffff;
  --ink: #2b2540;
  --ink-soft: #4c4566;
  --line: #eadfce;
  --sky: #e3f0ff;
  --pink: #ffe2ec;
  --sun: #fff0bf;
  --mint: #dcf5e8;
  --lilac: #ece5ff;
  --peach: #ffe6d3;
  --blue: #1f5fc4;
  --blue-d: #174a99;
  --rose: #b5305a;
  --green: #1e7a4c;
  --orange: #a8510e;
  --focus: #ff9f1c;
  --radius: 22px;
  --shadow: 0 6px 0 rgba(43, 37, 64, .08), 0 10px 24px rgba(43, 37, 64, .08);
  --font: ui-rounded, "SF Pro Rounded", "Nunito", "Varela Round", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-ar: "Noto Naskh Arabic", "Geeza Pro", "Damascus", "Segoe UI", Tahoma, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.125rem;
  line-height: 1.55;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue-d); text-underline-offset: 3px; }
a:hover { color: var(--rose); }
:focus-visible { outline: 4px solid var(--focus); outline-offset: 3px; border-radius: 10px; }

[lang="ar"], .ar {
  font-family: var(--font-ar);
  direction: rtl;
  unicode-bidi: isolate;
  line-height: 1.9;
}
.ar { display: block; text-align: right; color: var(--ink-soft); font-size: 1.08em; }
.ar-inline { font-family: var(--font-ar); }

.skip {
  position: absolute; left: -999px; top: 8px;
  background: var(--ink); color: #fff; padding: 12px 16px; border-radius: 12px; z-index: 10;
}
.skip:focus { left: 8px; }

.wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 16px; }

/* Kopf */
.site-head { background: #fff; border-bottom: 3px solid var(--line); }
.head-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; }
.logo {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--ink); font-weight: 800; font-size: 1.2rem; line-height: 1.2;
}
.logo img { width: 64px; height: 35px; object-fit: cover; border-radius: 12px; }
.logo .ar-inline { font-weight: 700; color: var(--rose); }
.nav { padding: 0 0 12px; }
.nav ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.nav a {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 56px; padding: 6px 8px;
  background: var(--sky); color: var(--ink); text-decoration: none; font-weight: 700;
  border-radius: 16px; font-size: 1rem; text-align: center;
}
.nav a .i { font-size: 1.3rem; }
.nav li:nth-child(2) a { background: var(--pink); }
.nav li:nth-child(3) a { background: var(--sun); }
.nav li:nth-child(4) a { background: var(--mint); }
.nav li:nth-child(5) a { background: var(--lilac); }
.nav li:nth-child(6) a { background: var(--peach); }
.nav a[aria-current="page"] { outline: 3px solid var(--ink); outline-offset: -3px; }
@media (min-width: 820px) {
  .head-row { padding: 14px 0; }
  .nav ul { grid-template-columns: repeat(6, 1fr); }
}

/* Allgemein */
main { padding: 20px 0 40px; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .4em; }
h1 { font-size: clamp(1.8rem, 6vw, 2.8rem); }
h2 { font-size: clamp(1.4rem, 4.5vw, 2rem); margin-top: 1.4em; }
h3 { font-size: 1.25rem; }
h1 .ar, h2 .ar, h3 .ar { font-size: .8em; margin-top: .2em; color: var(--rose); }
p { margin: 0 0 1em; }
.lead { font-size: 1.2rem; }
.muted { color: var(--ink-soft); font-size: 1rem; }
.box {
  background: var(--card); border-radius: var(--radius); padding: 18px;
  box-shadow: var(--shadow); margin: 18px 0;
}
.box.sun { background: var(--sun); }
.box.mint { background: var(--mint); }
.box.sky { background: var(--sky); }
.box.pink { background: var(--pink); }
.draft {
  background: #fff3cd; border: 3px dashed #c98a00; border-radius: 16px;
  padding: 12px 16px; font-weight: 700; margin: 0 0 18px;
}

/* Knöpfe */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 56px; padding: 10px 20px;
  border-radius: 999px; border: 0; cursor: pointer;
  background: var(--blue); color: #fff; font: inherit; font-weight: 800;
  text-decoration: none; text-align: center; line-height: 1.25;
  box-shadow: 0 4px 0 var(--blue-d);
}
.btn:hover { color: #fff; filter: brightness(1.07); }
.btn:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--blue-d); }
.btn.rose { background: var(--rose); box-shadow: 0 4px 0 #8a2243; }
.btn.green { background: var(--green); box-shadow: 0 4px 0 #145335; }
.btn.orange { background: var(--orange); box-shadow: 0 4px 0 #7a3a09; }
.btn.light { background: #fff; color: var(--ink); box-shadow: 0 4px 0 var(--line); border: 2px solid var(--line); }
.btn.light:hover { color: var(--ink); }
.btn.soon { background: #ece8f2; color: var(--ink-soft); box-shadow: none; cursor: default; }
.btn small { font-weight: 600; opacity: .95; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 14px 0; }
.btn-row .btn { flex: 1 1 220px; }

/* Start */
.hero {
  display: grid; gap: 16px; align-items: center;
  background: linear-gradient(160deg, var(--sky), var(--pink));
  border-radius: 28px; padding: 18px; overflow: hidden;
}
.hero img { width: 100%; max-width: 380px; height: 300px; object-fit: cover; object-position: top; margin: 0 auto; border-radius: 22px; }
.hero h1 { margin-bottom: .2em; }
.hero .slogan { font-size: 1.25rem; font-weight: 700; margin: 0; }
.hero .slogan.ar { color: var(--rose); font-size: 1.3rem; }
@media (min-width: 760px) {
  .hero { grid-template-columns: 1.1fr 1fr; padding: 32px; }
  .hero img { max-width: 420px; height: auto; }
}

.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 22px 0; }
@media (min-width: 760px) { .tiles { grid-template-columns: repeat(4, 1fr); } }
.tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 150px; padding: 14px 8px; border-radius: 26px;
  text-decoration: none; color: var(--ink); font-weight: 800; font-size: 1.3rem; text-align: center;
  box-shadow: var(--shadow); transition: transform .15s ease;
}
.tile:hover { color: var(--ink); transform: translateY(-3px) rotate(-1deg); }
.tile .emo { font-size: 3rem; line-height: 1.1; }
.tile .ar-inline { font-size: 1.2rem; color: var(--rose); font-weight: 700; }
.tile.t1 { background: var(--pink); }
.tile.t2 { background: var(--sun); }
.tile.t3 { background: var(--mint); }
.tile.t4 { background: var(--lilac); }

/* Karten-Raster */
.grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .grid.three { grid-template-columns: repeat(3, 1fr); } }
.card {
  background: var(--card); border-radius: var(--radius); padding: 18px;
  box-shadow: var(--shadow); display: flex; flex-direction: column;
}
.card .nr { font-weight: 800; color: var(--rose); font-size: .95rem; letter-spacing: .04em; }
.card h2, .card h3 { margin-top: .2em; }
.card .btn-row { margin-top: auto; padding-top: 10px; }
.card.c0 { border-top: 8px solid #ff8fab; }
.card.c1 { border-top: 8px solid #ffc94d; }
.card.c2 { border-top: 8px solid #64c99b; }
.card.c3 { border-top: 8px solid #7aa9ff; }
.card.c4 { border-top: 8px solid #b79cff; }
.card.c5 { border-top: 8px solid #ffa26b; }

/* Hefte */
.heft { display: grid; gap: 14px; grid-template-columns: 1fr; }
.heft img { width: 100%; max-width: 260px; margin: 0 auto; border-radius: 12px; box-shadow: var(--shadow); }
@media (min-width: 620px) { .heft { grid-template-columns: 180px 1fr; } .heft img { max-width: 180px; } }
.facts { list-style: none; padding: 0; margin: 8px 0; display: flex; flex-wrap: wrap; gap: 6px; }
.facts li { background: var(--sky); border-radius: 999px; padding: 4px 12px; font-size: .95rem; font-weight: 700; }
.price-note { font-size: .95rem; color: var(--ink-soft); }

/* Lied-Seite */
.lyrics { margin: 10px 0; }
.lyrics .sec { margin: 18px 0 6px; font-weight: 800; color: var(--rose); }
.lyrics .sec .ar-inline { font-weight: 700; margin-left: 12px; display: inline-block; }
.lyrics .head, .lyrics .row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.lyrics .head { font-size: .95rem; font-weight: 800; color: var(--ink-soft); position: sticky; top: 0; background: var(--bg); padding: 6px 0; z-index: 1; }
.lyrics .row { padding: 8px 0; border-bottom: 2px dotted var(--line); }
.lyrics .de { font-weight: 700; }
.lyrics .arl { font-family: var(--font-ar); direction: rtl; text-align: right; font-size: 1.2rem; line-height: 1.9; }
.lyrics .rep { font-size: .85rem; color: var(--ink-soft); font-weight: 600; }
@media (max-width: 360px) {
  .lyrics .head { display: none; }
  .lyrics .row { grid-template-columns: 1fr; gap: 0; }
}
table.vocab { width: 100%; border-collapse: separate; border-spacing: 0 8px; }
table.vocab th { text-align: left; font-size: .95rem; color: var(--ink-soft); padding: 0 10px; }
table.vocab th.arh { text-align: right; }
table.vocab td { background: #fff; padding: 10px; font-weight: 700; }
table.vocab td:first-child { border-radius: 14px 0 0 14px; }
table.vocab td:last-child { border-radius: 0 14px 14px 0; text-align: right; font-family: var(--font-ar); font-size: 1.25rem; font-weight: 400; }
.art { color: var(--blue); }
.yt-ph { font-size: .9rem; color: var(--ink-soft); }

/* Spiele */
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 16px; }
.tabs button {
  min-height: 56px; padding: 8px 16px; border-radius: 999px; border: 3px solid var(--line);
  background: #fff; font: inherit; font-weight: 800; cursor: pointer; color: var(--ink);
  flex: 1 1 130px;
}
.tabs button[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.game { background: #fff; border-radius: 28px; padding: 16px; box-shadow: var(--shadow); margin: 18px 0 28px; position: relative; overflow: hidden; }
.game h2 { margin-top: 0; }
.memory { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (min-width: 620px) { .memory { grid-template-columns: repeat(4, 1fr); } }
.mcard {
  min-height: 112px; border-radius: 18px; border: 0; cursor: pointer; font: inherit;
  background: linear-gradient(140deg, #7aa9ff, #b79cff); color: #fff; font-size: 2.2rem; font-weight: 800;
  display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 6px; gap: 2px;
  box-shadow: 0 4px 0 rgba(43,37,64,.18);
}
.mcard .emo { font-size: 2.1rem; line-height: 1.1; }
.mcard .w { font-size: 1.05rem; line-height: 1.3; }
.mcard .w[lang="ar"] { font-size: 1.3rem; }
.mcard.open { background: var(--sun); color: var(--ink); }
.mcard.open.ar-card { background: var(--pink); }
.mcard.done { background: var(--mint); color: var(--ink); cursor: default; box-shadow: none; }
.prompt { text-align: center; font-size: 1.7rem; font-weight: 800; margin: 6px 0 14px; }
.prompt .ar-inline { color: var(--rose); }
.dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.dot {
  width: 92px; height: 92px; border-radius: 50%; border: 5px solid #fff; cursor: pointer;
  box-shadow: 0 0 0 3px var(--line), 0 6px 0 rgba(43,37,64,.15);
}
.count-items { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; font-size: 2.6rem; min-height: 80px; margin-bottom: 12px; }
.choices { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 620px) { .choices { grid-template-columns: repeat(4, 1fr); } }
.choice {
  min-height: 96px; border-radius: 20px; border: 3px solid var(--line); background: var(--sky);
  font: inherit; font-weight: 800; cursor: pointer; color: var(--ink); padding: 8px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.25;
}
.choice .big { font-size: 1.7rem; }
.choice .ar-inline { font-size: 1.3rem; color: var(--rose); }
.feedback { text-align: center; min-height: 3.4em; font-weight: 800; font-size: 1.25rem; margin-top: 12px; }
.feedback .ar-inline { display: block; color: var(--rose); }
.stars { text-align: center; font-size: 1.6rem; letter-spacing: 4px; min-height: 1.6em; }
.speak-toggle { margin-bottom: 8px; }
.wiggle { animation: wiggle .4s ease; }
@keyframes wiggle { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.pop { animation: pop .35s ease; }
@keyframes pop { 0% { transform: scale(1); } 50% { transform: scale(1.12); } 100% { transform: scale(1); } }
.confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.confetti span {
  position: absolute; top: -20px; width: 12px; height: 16px; border-radius: 3px;
  animation: fall 1.6s ease-in forwards;
}
@keyframes fall { to { transform: translateY(520px) rotate(540deg); opacity: 0; } }

/* Video-Platzhalter */
.ph {
  aspect-ratio: 9 / 16; max-height: 360px; border-radius: 20px; background: repeating-linear-gradient(45deg, var(--lilac), var(--lilac) 14px, #f5f0ff 14px, #f5f0ff 28px);
  display: flex; align-items: center; justify-content: center; text-align: center; padding: 12px; font-weight: 800; color: var(--ink-soft);
}

/* Fuß */
.site-foot { background: var(--ink); color: #f3effa; padding: 26px 0 32px; font-size: 1rem; }
.site-foot a { color: #ffd88a; }
.site-foot a:hover { color: #fff; }
.site-foot p { margin: 0 0 .7em; }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.foot-links a { display: inline-flex; align-items: center; min-height: 44px; }

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

/* Memory Farben: echte Farbfläche (17.10.2026, Wunsch Mohamed) */
.mcard .farbklecks{display:block;width:56px;height:56px;border-radius:50%;margin:0 auto 6px;border:3px solid rgba(0,0,0,.18);box-shadow:inset 0 -4px 0 rgba(0,0,0,.08)}
.mcard.open{border-width:4px}

/* Farben-Klick: ruhiges Ergebnis (17.10.2026) */
.dot.blass{opacity:.25;transform:scale(.85);transition:opacity .6s,transform .6s}
.dot.richtig{transform:scale(1.25);box-shadow:0 0 0 6px #fff,0 0 0 10px #2fa84f;transition:transform .6s}
.ergebnis-klecks{display:block;width:72px;height:72px;border-radius:50%;margin:8px auto;border:3px solid rgba(0,0,0,.18)}
.weiter-btn{display:block;margin:14px auto 0;min-height:56px;padding:12px 28px;font-size:1.2rem;font-weight:700;border-radius:999px;border:0;background:#2fa84f;color:#fff;cursor:pointer}
.weiter-btn:focus-visible{outline:4px solid #1e63d6;outline-offset:3px}
@media (prefers-reduced-motion: reduce){.dot.blass,.dot.richtig{transition:none}}
.choice.blass{opacity:.3;transition:opacity .6s}
.choice.richtig{box-shadow:0 0 0 4px #2fa84f}

/* Start-Hero: Lara links (Deutsch), Yosef rechts (Arabisch) – 17.10.2026, Wunsch Mohamed */
.hero { display:block; text-align:center; }
.hero .hero-titel { margin:.1em 0 .4em; }
.hero .hero-titel .ar { display:block; }
.duo { display:grid; grid-template-columns:1fr 1fr; gap:10px; align-items:end; direction:ltr; }
.figur { display:flex; flex-direction:column; align-items:center; }
.figur img { width:100%; max-width:220px; height:auto; max-height:none; object-fit:contain; border-radius:18px; margin:0; }
.figur-lara { justify-self:start; }
.figur-yosef { justify-self:end; }
.blase { position:relative; background:#fff; border-radius:20px; padding:10px 12px; margin-bottom:12px; font-size:1rem; line-height:1.45; box-shadow:0 4px 0 rgba(0,0,0,.06); text-align:left; }
.blase.ar { text-align:right; font-family:"Noto Naskh Arabic", system-ui, sans-serif; font-size:1.1rem; color:var(--rose); }
.blase::after { content:""; position:absolute; bottom:-10px; left:50%; margin-left:-10px; border:10px solid transparent; border-top-color:#fff; border-bottom:0; }
.figur-lara .blase { border:3px solid #ff8fc0; }
.figur-yosef .blase { border:3px solid #ffc94d; }
.figur .name { font-weight:800; margin:.4em 0 0; }
.slogans { margin-top:14px; }
@media (min-width:760px){
  .hero { padding:32px; }
  .duo { gap:40px; max-width:760px; margin:0 auto; }
  .figur img { max-width:300px; height:auto; }
  .blase { font-size:1.15rem; padding:14px 18px; }
  .blase.ar { font-size:1.3rem; }
}

/* Lara + Yosef gleich groß (gleiche Höhe statt gleiche Breite) */
.figur img { width:auto; max-width:100%; height:300px; }
@media (min-width:760px){ .figur img { height:420px; } }

/* ===== 3D-Knöpfe überall (17.10.2026, Wunsch Mohamed: man soll sehen, dass man drücken kann) ===== */
.nav a, .tile, .btn, .tabs button, .weiter-btn, .choice, .mcard, .dot {
  position:relative;
  border:0;
  box-shadow: 0 6px 0 rgba(0,0,0,.22), 0 10px 16px rgba(0,0,0,.12), inset 0 2px 0 rgba(255,255,255,.65), inset 0 -3px 0 rgba(0,0,0,.08);
  transition: transform .08s ease, box-shadow .08s ease, filter .15s;
  cursor:pointer;
  -webkit-tap-highlight-color: transparent;
}
.nav a, .tile, .tabs button, .choice {
  background-image: linear-gradient(to bottom, rgba(255,255,255,.45), rgba(255,255,255,0) 55%);
}
.btn, .weiter-btn {
  background-image: linear-gradient(to bottom, rgba(255,255,255,.28), rgba(255,255,255,0) 60%);
}
.nav a:hover, .tile:hover, .btn:hover, .tabs button:hover, .weiter-btn:hover, .choice:hover, .mcard:hover, .dot:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 0 rgba(0,0,0,.22), 0 14px 20px rgba(0,0,0,.14), inset 0 2px 0 rgba(255,255,255,.65), inset 0 -3px 0 rgba(0,0,0,.08);
  filter: brightness(1.03);
}
.nav a:active, .tile:active, .btn:active, .tabs button:active, .weiter-btn:active, .choice:active, .mcard:active, .dot:active {
  transform: translateY(5px);
  box-shadow: 0 1px 0 rgba(0,0,0,.22), 0 2px 4px rgba(0,0,0,.12), inset 0 2px 4px rgba(0,0,0,.12);
}
.btn.soon, .btn.soon:hover, .btn.soon:active, button:disabled, button:disabled:hover {
  transform:none; cursor:default;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.08);
}
.dot { border:4px solid #fff; }
.mcard.done { box-shadow: 0 2px 0 rgba(0,0,0,.15); }
@media (prefers-reduced-motion: reduce){
  .nav a, .tile, .btn, .tabs button, .weiter-btn, .choice, .mcard, .dot { transition:none; }
  .nav a:hover, .tile:hover, .btn:hover, .tabs button:hover, .weiter-btn:hover, .choice:hover, .mcard:hover, .dot:hover { transform:none; }
}
.hero .hero-titel .ar, .hero .slogans .ar { text-align:center; }

/* Start-Hero im Garten wie in den Videos (17.10.2026) */
.hero-garten { padding:14px; }
.szene { position:relative; display:grid; grid-template-columns:1fr 1fr; gap:10px; align-items:end; direction:ltr; }
.szene .garten { grid-column:1 / -1; width:100%; height:auto; border-radius:22px; display:block; box-shadow:0 8px 20px rgba(0,0,0,.12); }
.szene .blase { margin-bottom:10px; }
.szene .blase-lara { grid-column:1; justify-self:start; border:3px solid #ff8fc0; }
.szene .blase-yosef { grid-column:2; justify-self:end; border:3px solid #ffc94d; }
.szene .blase-lara::after { left:30%; }
.szene .blase-yosef::after { left:62%; }
@media (min-width:760px){
  .hero-garten { padding:24px; }
  .szene { max-width:900px; margin:0 auto; }
  .szene .blase { max-width:320px; }
  .szene .blase-lara { margin-left:14%; }
  .szene .blase-yosef { margin-right:22%; }
}

.szene .garten { max-width:none !important; height:auto !important; object-fit:fill; margin:0; }
.hero-garten { background: linear-gradient(180deg, #cfe8ff 0%, #e6f4ff 45%, #d9f2cf 100%); }

/* ===== Kindliche Schrift + Sprechblasen (17.10.2026, Wunsch Mohamed) ===== */
@font-face { font-family:"Baloo 2"; src:url("../fonts/Baloo2.ttf") format("truetype"); font-weight:400 800; font-display:swap; }
@font-face { font-family:"Baloo Bhaijaan 2"; src:url("../fonts/BalooBhaijaan2.ttf") format("truetype"); font-weight:400 800; font-display:swap; }

/* Hintergrund insgesamt hellblau */
.hero-garten { background:#d4eaff; }

/* ganzes Foto sichtbar, nichts abgeschnitten */
.szene .garten { width:100%; height:auto !important; object-fit:contain; }

.szene { gap:14px; }
.szene .blase {
  font-family:"Baloo 2", "Comic Sans MS", system-ui, sans-serif;
  font-size:1.15rem; line-height:1.3; font-weight:600;
  padding:14px 18px 12px; margin-bottom:22px;
  border-width:5px; border-style:solid;
  border-radius:38px 46px 42px 50px / 46px 38px 50px 42px;   /* weich, wie eine Wolke */
  box-shadow:0 6px 0 rgba(0,0,0,.10);
  animation: blase-wackeln 3.2s ease-in-out infinite;
}
.szene .blase b { font-weight:800; font-size:1.3rem; display:block; }
.szene .blase-lara { background:#ffe6f1; border-color:#ff7eb6; color:#8a1c4f; text-align:left; transform-origin:bottom left; }
.szene .blase-yosef { background:#fff4c2; border-color:#ffb400; color:#7a4a00;
  font-family:"Baloo Bhaijaan 2", "Noto Naskh Arabic", system-ui, sans-serif; font-size:1.3rem; text-align:right; transform-origin:bottom right; animation-delay:1.6s; }
.szene .blase-yosef b { font-size:1.45rem; }
/* Schwänzchen aus zwei kleinen Kreisen (wie im Comic) */
.szene .blase::after { display:none; }
.szene .blase::before {
  content:""; position:absolute; bottom:-20px; width:18px; height:18px; border-radius:50%;
  background:inherit; border:4px solid; border-color:inherit;
  box-shadow: 14px 12px 0 -4px currentColor;
}
.szene .blase-lara::before { left:28%; color:#ff7eb6; }
.szene .blase-yosef::before { right:30%; color:#ffb400; box-shadow:-14px 12px 0 -4px currentColor; }
@keyframes blase-wackeln { 0%,100% { transform:rotate(-1.5deg); } 50% { transform:rotate(1.5deg) translateY(-3px); } }
@media (prefers-reduced-motion: reduce){ .szene .blase { animation:none; } }
@media (min-width:760px){ .szene .blase { font-size:1.3rem; max-width:340px; } .szene .blase-yosef { font-size:1.45rem; } }

/* Titel auch kindlich */
.hero .hero-titel { font-family:"Baloo 2", system-ui, sans-serif; font-weight:800; }
.hero .hero-titel .ar { font-family:"Baloo Bhaijaan 2", "Noto Naskh Arabic", sans-serif; }
.szene .blase b { display:inline; }

/* ===== Sprechblasen IM Bild (17.10.2026, Wunsch Mohamed) ===== */
.hero-garten { padding:10px; }
.szene { display:block !important; position:relative; max-width:960px; margin:0 auto; }
.szene .garten { border-radius:24px; }
.szene .blase {
  position:absolute; z-index:2; margin:0 !important; max-width:none !important;
  width:40%; top:9%;
  font-size:clamp(.72rem, 2.7vw, 1.4rem) !important;
  padding:clamp(6px,1.4vw,16px) clamp(8px,1.8vw,20px) !important;
  border-width:clamp(3px,.6vw,5px) !important;
}
.szene .blase b { font-size:1.12em !important; }
.szene .blase-lara { left:4%; margin-left:0 !important; }
.szene .blase-yosef { right:4%; margin-right:0 !important; top:12%; font-size:clamp(.82rem, 3vw, 1.55rem) !important; }
.szene .blase::before { width:clamp(10px,1.8vw,18px); height:clamp(10px,1.8vw,18px); bottom:clamp(-20px,-2vw,-12px); }
.szene .blase-lara::before { left:62%; }
.szene .blase-yosef::before { right:auto; left:38%; box-shadow:-14px 12px 0 -4px currentColor; }

/* ===== Originalbild unverändert (Baum + Himmel normal), Blasen in den freien Ecken (17.10.2026) ===== */
/* Handy (schmal): Blasen über dem Bild, nebeneinander – im Bild wären sie zu klein zum Lesen */
@media (max-width:699px){
  .szene { display:grid !important; grid-template-columns:1fr 1fr; gap:14px; }
  .szene .blase { position:static !important; width:auto !important; margin-bottom:20px !important; font-size:1rem !important; }
  .szene .blase-yosef { font-size:1.1rem !important; }
  .szene .garten { grid-column:1 / -1; }
}
/* größer: Blasen IM Bild, Lara links oben im Himmel, Yosef rechts oben vor dem Baum */
@media (min-width:700px){
  .szene .blase { width:22% !important; top:3% !important; font-size:clamp(.78rem,1.45vw,1.1rem) !important; padding:10px 12px !important; }
  .szene .blase-lara { left:1.5% !important; }
  .szene .blase-yosef { right:1.5% !important; font-size:clamp(.9rem,1.6vw,1.25rem) !important; }
  .szene .blase-lara::before { left:auto; right:-6px; bottom:-14px; }
  .szene .blase-yosef::before { left:-6px; right:auto; bottom:-14px; box-shadow:-14px 12px 0 -4px currentColor; }
}

/* ===== Titel + Untertitel IM Bild (17.10.2026) ===== */
.bild-titel { text-align:center; }
.bild-titel .hero-titel { margin:0; line-height:1.05; }
.bild-titel .hero-titel .ar { display:inline; margin-left:.3em; }
.bild-titel .slogan { margin:.15em 0 0; }
@media (max-width:699px){
  .szene .bild-titel { grid-column:1 / -1; order:-1; margin-bottom:6px; }
  .szene .blase-lara, .szene .blase-yosef { order:0; }
  .szene .garten { order:1; }
  .bild-titel .hero-titel { font-size:2rem; }
}
@media (min-width:700px){
  .szene .bild-titel {
    position:absolute; left:50%; transform:translateX(-50%); bottom:3%;
    width:min(78%, 640px); z-index:2;
    background:rgba(255,255,255,.82); border-radius:26px; padding:10px 18px 12px;
    box-shadow:0 6px 0 rgba(0,0,0,.10);
  }
  .bild-titel .hero-titel { font-size:clamp(1.6rem,3.6vw,2.6rem); }
  .bild-titel .slogan { font-size:clamp(.85rem,1.5vw,1.15rem); }
  .bild-titel .slogan.ar { font-size:clamp(.95rem,1.7vw,1.3rem); }
}
@media (min-width:700px){ .szene .bild-titel { bottom:2%; background:rgba(255,255,255,.72); padding:6px 16px 8px; width:min(70%,600px); } }

/* Titelfeld UNTER dem Foto (17.10.2026), Sprechblasen bleiben oben im Himmel im Bild */
@media (min-width:700px){
  .szene .bild-titel {
    position:static; transform:none; width:auto; margin:14px auto 0;
    background:#fff; border-radius:26px; padding:12px 20px 14px;
    box-shadow:0 6px 0 rgba(0,0,0,.08); max-width:760px;
  }
}
@media (max-width:699px){ .szene .bild-titel { order:2; margin:12px 0 0; background:#fff; border-radius:22px; padding:10px 14px; } }

/* ===== Name GANZ OBEN IM BILD im Himmel, Satz DE/AR UNTER dem Bild mittig (17.10.2026) ===== */
.szene .bild-name {
  position:absolute; top:1.5%; left:0; right:0; z-index:3; margin:0; text-align:center;
  font-family:"Baloo 2", system-ui, sans-serif; font-weight:800; line-height:1;
  font-size:clamp(1.4rem, 5.2vw, 3.4rem);
  -webkit-text-stroke: clamp(4px,.7vw,8px) #fff; paint-order: stroke fill;
  text-shadow: 0 4px 0 rgba(0,0,0,.12);
  pointer-events:none;
}
.bild-name .n-lara { color:#ff4f9a; }
.bild-name .n-und { color:#ffb400; }
.bild-name .n-yosef { color:#1e63d6; }
.bild-name .n-ar { color:#b0245f; font-family:"Baloo Bhaijaan 2","Noto Naskh Arabic",sans-serif; margin-left:.25em; }
/* Satz unter dem Bild, mittig */
.szene .bild-titel { text-align:center; }
.szene .bild-titel .slogan { text-align:center !important; }
/* Blasen etwas tiefer, damit oben Platz für den Namen ist */
@media (min-width:700px){
  .szene .blase { top:16% !important; width:20% !important; }
}
@media (max-width:699px){
  .szene .bild-name { grid-column:auto; }
  .szene { position:relative; }
}
.szene .foto { position:relative; grid-column:1 / -1; order:1; }
.szene .foto .garten { display:block; width:100%; }

/* ===== Beide Sprechblasen IMMER im Bild (17.10.2026, Mohamed) ===== */
.szene .foto .blase { position:absolute !important; z-index:2; margin:0 !important; }
@media (min-width:700px){
  .szene .foto .blase { top:17% !important; bottom:auto; width:21% !important; }
}
@media (max-width:699px){
  .szene .foto .blase {
    top:auto !important; bottom:4%; width:29% !important;
    font-size:clamp(.6rem, 2.6vw, .95rem) !important;
    padding:5px 7px !important; border-width:3px !important;
  }
  .szene .foto .blase-yosef { font-size:clamp(.68rem, 2.9vw, 1.05rem) !important; }
  .szene .foto .blase-lara { left:1.5% !important; }
  .szene .foto .blase-yosef { right:1.5% !important; }
  /* Schwänzchen zeigt nach oben zu Lara/Yosef */
  .szene .foto .blase::before { bottom:auto; top:-12px; width:10px; height:10px; }
  .szene .foto .blase-lara::before { left:auto; right:12%; box-shadow:8px -8px 0 -3px currentColor; }
  .szene .foto .blase-yosef::before { left:12%; right:auto; box-shadow:-8px -8px 0 -3px currentColor; }
}
@media (max-width:420px){ .lang-zeile { display:none; } }

/* ===== Social-Media-CTA auf jeder Seite (17.10.2026) ===== */
.social-cta { background:#fff3c4; border-top:4px solid #ffb400; padding:22px 0; margin-top:28px; text-align:center; }
.social-cta .sc-titel { font-family:"Baloo 2",system-ui,sans-serif; font-weight:800; font-size:1.3rem; margin:0 0 12px; }
.social-cta .sc-titel .ar-inline { display:block; font-family:"Baloo Bhaijaan 2","Noto Naskh Arabic",sans-serif; color:#b0245f; font-size:1.25rem; }
.sc-knoepfe { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.sc-knoepfe .btn { flex:1 1 220px; max-width:320px; color:#fff; display:flex; flex-direction:column; align-items:center; gap:2px; font-size:1.1rem; }
.sc-knoepfe .btn .ar-inline { color:#fff; font-size:1rem; font-weight:700; }
.sc-yt { background-color:#e62117 !important; }
.sc-tt { background-color:#111 !important; }
.sc-amz { background-color:#ff9900 !important; }