/* Visuelle Ebene fuer den freigegebenen Kinderbilderbuch-Stil.
   Funktion und Layout bleiben unveraendert, nur Materialitaet und Bildwirkung
   werden waermer, weicher und einheitlicher. */

:root{
  --buch-ink:#3B2F3F;
  --buch-cream:#FFF8EA;
  --buch-paper:#FFFDF8;
  --buch-line:#E6D8C7;
  --buch-shadow:#D8C8B4;
  --buch-green:#76B85B;
  --buch-blue:#83CBE6;
}

body{
  background:
    radial-gradient(circle at 14% 8%,rgba(255,255,255,.9),transparent 24%),
    linear-gradient(160deg,#FFF9ED 0%,#FFF4E4 58%,#F7EBDD 100%);
  color:var(--buch-ink);
}

.top{
  background:rgba(255,253,248,.96);
  box-shadow:0 3px 0 var(--buch-line),0 8px 22px rgba(72,49,42,.07);
}

.karte,.antwort,.chip{
  background:var(--buch-paper);
  border:2px solid rgba(230,216,199,.8);
  box-shadow:0 6px 0 var(--buch-shadow),0 10px 22px rgba(70,50,42,.07);
}

.knopf,.automat,.fachlabel,.buch{
  border:2px solid rgba(59,47,63,.2);
  background-image:linear-gradient(145deg,rgba(255,255,255,.2),transparent 36%);
}

.knopf{
  box-shadow:0 5px 0 var(--mathe-d),0 9px 17px rgba(72,49,42,.12);
}

.automat{
  box-shadow:0 7px 0 var(--cd),0 11px 22px rgba(65,45,38,.13);
}

.automat .schirm{
  background:linear-gradient(155deg,#44394B,#241D2A);
  border:2px solid rgba(255,255,255,.22);
  box-shadow:inset 0 3px 7px rgba(0,0,0,.25),inset 0 -2px 0 rgba(255,255,255,.08);
}

.automat .schirm svg,
.antwort svg,
.leser .bild svg{
  filter:drop-shadow(0 3px 2px rgba(59,47,63,.13));
}

/* PNG-Motive des neuen Stils. Der Wrapper nimmt exakt die Groesse ein,
   die vorher das Inline-SVG hatte. Fehlt eine PNG-Datei, blendet bilder.js
   automatisch das bisherige SVG als technischen Fallback ein. */


.motiv-bild{
  display:block;
  object-fit:contain;
  object-position:center;
  user-select:none;
  -webkit-user-drag:none;
  filter:drop-shadow(0 3px 2px rgba(59,47,63,.12));
}

.automat .schirm .motiv-bild{max-width:100%;max-height:72px}

/* Aquarium nicht mehr wie eine flache UI-Flaeche */
.aquarium{
  background:
    radial-gradient(ellipse at 22% 15%,rgba(255,255,255,.55),transparent 28%),
    linear-gradient(180deg,#A9E1F1 0%,#77C9E5 54%,#55AFD3 100%);
  border:3px solid rgba(59,47,63,.35);
  box-shadow:inset 0 -10px 0 rgba(42,139,184,.24),0 6px 0 #D9CDBD,0 12px 24px rgba(59,47,63,.09);
}

.aquarium:after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:8px;height:13px;
  background:radial-gradient(ellipse at center,#E8C98D 0 42%,transparent 44%) 0 0/24px 12px repeat-x;
  opacity:.72;
}

/* Buecherregal mit gemalter Holz-Anmutung */
.regal .holz{
  background:linear-gradient(180deg,#E8B77C,#C99055);
  border:2px solid #9A6841;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.35),0 6px 0 #9E6B42;
}

.buch{
  box-shadow:inset 8px 0 0 rgba(59,47,63,.12),0 7px 0 rgba(92,61,48,.2),0 12px 20px rgba(59,47,63,.1);
}

.leser .bild{
  background:
    radial-gradient(circle at 20% 12%,rgba(255,255,255,.7),transparent 28%),
    linear-gradient(180deg,#DBF1FB,#F8F0DC);
  border:3px solid #E2D3C1;
  box-shadow:0 7px 0 #D7C6B0,0 13px 28px rgba(59,47,63,.1);
}

/* Garten- und Spielwiesenflaechen wirken wie Buchseiten statt Dashboardkarten. */
.spielwiese,.garten,.werkstatt,.verkleiden,.backstube{
  background-image:
    radial-gradient(circle at 11% 6%,rgba(255,255,255,.55),transparent 23%),
    linear-gradient(180deg,rgba(255,250,239,.9),rgba(248,238,218,.88));
}

.ware{
  border:2px solid #E6D8C7;
  background:var(--buch-paper);
  box-shadow:0 5px 0 #D8C8B4,0 9px 18px rgba(59,47,63,.08);
}

/* Weiche Kontur um interaktive Illustrationen. */
.avatar{
  background:linear-gradient(145deg,#FFF0C8,#F4D39B);
  border:2px solid rgba(59,47,63,.23);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.65),0 3px 0 #D6B983;
}

.pill{
  background:linear-gradient(180deg,#F7F0F8,#EEE3F0);
  border:2px solid #E1D3E4;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.75);
}

/* Malerischer Fokus bei Erfolgsmeldungen. */
.rueckmeldung{
  background:rgba(255,253,248,.96);
  border:3px solid #E2D2BE;
  box-shadow:0 7px 0 #D5C2AC,0 14px 34px rgba(59,47,63,.15);
}