/* ===========================================================================
   wuselwelt.app — Website
   Artstyle "C · Spielzeugstudio", übernommen aus der App
   (wuselwelt/src/styles.css, Nelson-Entscheidung g.10 vom 27.07.2026).

   DIE EINE REGEL, DIE DEN LOOK TRÄGT — eine Lichtsituation für ALLES:
   warmes Hauptlicht oben links, kühles Fülllicht von rechts, Bodenreflex von
   unten, Schlagschatten nach rechts unten, Kernschatten kippen ins Kühle.
   Wer hier ein neues Element ergänzt, leuchtet es genauso aus. Die drei
   Variablen --licht, --fuell und --wurf machen das mechanisch: Sie stehen
   einmal oben und werden nirgends überschrieben.

   Wie in der App: nur System-Schriften, kein Webfont, kein CDN, kein
   Icon-Set. Die Seite lädt nichts von fremden Hosts.
   =========================================================================== */

:root {
  --rounded: ui-rounded, 'SF Pro Rounded', 'Segoe UI Variable Display', 'Segoe UI', system-ui,
    -apple-system, sans-serif;
  --serif: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;

  /* Bühne */
  --st-sky-hi: #cdeef7;
  --st-sky-mid: #8fcfe2;
  --st-sky-lo: #5aa8c8;
  --st-floor-hi: #eaf7fb;
  --st-floor-mid: #d8eef5;
  --st-floor-lo: #bfe0eb;

  /* Material */
  --st-cream: #ffffff;
  --st-ink: #16323f;
  /* Gedämpfter Fließtext. Nachgemessen: bei #6b584c kam die Einleitungszeile
     auf 4,53:1 gegen den hellen Boden — rechnerisch bestanden, aber ohne jeden
     Spielraum. Ein Wert, der bei der nächsten Farbanpassung still durchfällt,
     ist kein bestandener Wert. */
  --ink-soft: #42606d;
  --st-acc1: #ffc634;

  /* Die fünf Plastikfarben der Spiele — je Spiel ein Grundton, hell und dunkel */
  --p-ocker: #f0a92e;
  --p-ocker-d: #c9871d;
  --p-rose: #e2685c;
  --p-rose-d: #bb4c42;
  --p-moos: #4fae6d;
  --p-moos-d: #3d8b55;
  --p-himmel: #3f9bd4;
  --p-himmel-d: #2f7cad;
  --p-terra: #1f8a8a;
  --p-terra-d: #166b6b;

  /* --- Die Lichtregel als drei Variablen --- */
  /* warmes Hauptlicht oben links */
  --licht: inset 3px 4px 0 rgba(255, 255, 255, 0.55);
  /* kühles Fülllicht von rechts */
  --fuell: inset -4px -2px 0 rgba(168, 205, 224, 0.32);
  /* Schlagschatten nach rechts unten, kühl */
  --wurf: 9px 13px 0 rgba(43, 58, 90, 0.16);
  --wurf-klein: 5px 7px 0 rgba(43, 58, 90, 0.14);
  --wurf-gross: 14px 20px 0 rgba(43, 58, 90, 0.18);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--rounded);
  color: var(--st-ink);
  background: var(--st-floor-hi);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: #166b6b;
  text-underline-offset: 3px;
}

.wrap {
  width: min(1120px, 92vw);
  margin-inline: auto;
}

/* ===========================================================================
   Kopf
   =========================================================================== */

.kopf {
  position: relative;
  z-index: 5;
  padding: clamp(1rem, 3vw, 1.6rem) 0;
}

/* Auf den Textseiten gibt es keine Bühne — der Kopf trägt den Himmel dann
   selbst, damit die Seiten nicht mit einer abgeschnittenen Fläche beginnen. */
.kopf.auf-himmel {
  background: linear-gradient(180deg, var(--st-sky-hi) 0%, var(--st-sky-mid) 100%);
}

.kopf .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Die Wortmarke ist gespritztes Plastik wie alles andere: warmer Kern,
   dunklere Kante nach rechts unten. Kein Schlagschatten-Filter — die Kante
   ist gezeichnet (gestapelte text-shadows), damit sie bei jeder Schriftgröße
   gleich dick bleibt. */
.marke {
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--st-cream);
  text-decoration: none;
  text-shadow:
    -1px -1px 0 rgba(255, 255, 255, 0.6),
    2px 3px 0 var(--p-terra-d),
    5px 7px 0 rgba(43, 58, 90, 0.18);
}

.kopf nav {
  display: flex;
  gap: clamp(0.7rem, 2vw, 1.4rem);
  font-weight: 600;
}

.kopf nav a {
  color: #143c4a;
  text-decoration: none;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  transition: background 0.15s ease;
}

.kopf nav a:hover,
.kopf nav a:focus-visible {
  background: rgba(255, 255, 255, 0.5);
}

/* ===========================================================================
   Bühne: Himmel oben, Studioboden unten — ein durchgehender Raum
   =========================================================================== */

.buehne {
  position: relative;
  background: linear-gradient(
    180deg,
    var(--st-sky-hi) 0%,
    var(--st-sky-mid) 42%,
    var(--st-sky-lo) 62%
  );
  padding-bottom: clamp(3rem, 8vw, 6rem);
  overflow: hidden;
}

/* Der Boden. Liegt als eigene Fläche darunter und trägt die Figuren —
   ohne Boden hätte ein Kontaktschatten nichts, worauf er fallen könnte. */
.buehne::after {
  content: '';
  position: absolute;
  left: -5%;
  right: -5%;
  bottom: 0;
  height: 46%;
  background: linear-gradient(180deg, var(--st-floor-hi) 0%, var(--st-floor-mid) 55%, var(--st-floor-lo) 100%);
  border-radius: 50% 50% 0 0 / 12% 12% 0 0;
  z-index: 0;
}

.hero {
  position: relative;
  z-index: 2;
  padding-top: clamp(1rem, 4vw, 3rem);
  text-align: center;
}

.hero h1 {
  font-size: clamp(2.1rem, 7vw, 4.2rem);
  line-height: 1.05;
  margin: 0 0 0.6rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  /* DUNKEL, nicht weiß - und das ist gemessen. Weißer Titel auf dem hellen
     Himmel ergab 1,09:1; getragen hat ihn allein die dunkle Kontur, also die
     Pixel und nicht die Flächenfarbe. Genau davor warnt die Projekt-Doku:
     Wer den Kontrast knapp kalkuliert, misst am Bild - und dieser Wert war
     nicht knapp, sondern unhaltbar.
     Die helle Kante nach oben bleibt: Sie liest sich als Prägung und folgt
     der Lichtregel (Hauptlicht oben links), statt sie zu brechen. */
  color: #16323f;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.5);
}

.hero p.lead {
  font-size: clamp(1.05rem, 2.4vw, 1.35rem);
  max-width: 46ch;
  margin: 0 auto;
  color: #2a4657;
  font-weight: 500;
}

/* --- Die drei Figuren --- */

.figuren {
  position: relative;
  z-index: 2;
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(0.5rem, 3vw, 2.5rem);
}

.figur {
  position: relative;
  /* flex: 0 0 auto — sonst staucht der Flex-Container die Leinwand auf
     Spaltenbreite und die Figur wird still um ein Drittel kleiner.
     Derselbe Fallstrick wie in der App. */
  flex: 0 0 auto;
  width: clamp(96px, 21vw, 230px);
}

.figur img {
  width: 100%;
  height: auto;
  position: relative;
  z-index: 2;
  transition: transform 0.28s cubic-bezier(0.34, 1.4, 0.64, 1);
}

/* Kontaktschatten: eigene Verlaufsfläche, KEIN filter: drop-shadow.
   Ein Blur auf einer bewegten Figur muss in jedem Frame neu rastern. */
.figur::after {
  content: '';
  position: absolute;
  left: 12%;
  right: 2%;
  bottom: 4%;
  height: 9%;
  background: radial-gradient(ellipse at center, rgba(43, 58, 90, 0.3) 0%, rgba(43, 58, 90, 0) 70%);
  z-index: 1;
}

.figur:hover img,
.figur:focus-within img {
  transform: translateY(-10px) rotate(-1.5deg);
}

/* Die mittlere Figur steht vorn — Tiefe entsteht im Hintergrund, nicht
   durch Perspektive an den Figuren selbst. */
.figur:nth-child(2) {
  width: clamp(112px, 24vw, 265px);
  z-index: 3;
}

.figur:nth-child(1),
.figur:nth-child(3) {
  margin-bottom: clamp(0.4rem, 1.5vw, 1.4rem);
}

.figuren-bu {
  position: relative;
  z-index: 2;
  text-align: center;
  margin-top: 0.4rem;
  color: #143c4a;
  font-weight: 600;
  font-size: clamp(0.9rem, 1.8vw, 1.05rem);
}

/* --- App-Store-Badge ---
   Apples eigenes Asset aus den Marketing Guidelines (deutsche Fassung,
   Download_on_the_App_Store_Badge_DE_RGB_blk). Es wird NICHT verändert:
   keine Farbe, keine Proportion, kein Nachzeichnen - das sind Apples
   Bedingungen für die Nutzung, und ein selbst gezeichnetes Apple-Logo wäre
   Markennutzung ohne Grundlage.
   Zwei Maße sind deshalb Vorgabe, nicht Geschmack: mindestens 40 px hoch
   (hier 50) und ringsum mindestens 10 % der Badgehöhe frei (hier 12 px). */
.laden {
  position: relative;
  z-index: 2;
  display: inline-block;
  margin-top: clamp(1.4rem, 4vw, 2.2rem);
  padding: 12px;
  line-height: 0;
  transition: transform 0.2s cubic-bezier(0.34, 1.3, 0.64, 1);
}

.laden:hover,
.laden:focus-visible {
  transform: translateY(-3px);
}

.laden img {
  height: 50px;
  width: auto;
}

.mitte {
  text-align: center;
}

/* ===========================================================================
   Abschnitte
   =========================================================================== */

section.block {
  padding: clamp(3rem, 8vw, 5.5rem) 0;
}

section.block.hell {
  background: linear-gradient(180deg, var(--st-floor-hi) 0%, #e8f4f8 100%);
}

h2 {
  font-size: clamp(1.6rem, 4.2vw, 2.6rem);
  line-height: 1.12;
  margin: 0 0 0.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.unter {
  color: var(--ink-soft);
  max-width: 54ch;
  margin: 0 0 clamp(1.6rem, 4vw, 2.6rem);
  font-size: clamp(1rem, 2.1vw, 1.12rem);
}

.mitte .unter {
  margin-inline: auto;
}

/* --- Die fünf Orte: grobe Übersicht, keine Produktkacheln ---
   Bewusst nur Bild und Name. Eine Zeile Erklärung je Ort stand hier schon
   einmal; sie beantwortete eine Frage, die auf einer Übersicht niemand
   stellt, und machte aus fünf Bildern fünf Absätze. */

.orte {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
  gap: clamp(0.9rem, 2.2vw, 1.5rem);
}

.ort {
  margin: 0;
  text-align: center;
}

.ort img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 22px;
  background: var(--st-cream);
  border: 5px solid var(--st-cream);
  box-shadow: var(--wurf);
  transition: transform 0.22s cubic-bezier(0.34, 1.3, 0.64, 1);
}

.ort:hover img {
  transform: translateY(-6px);
}

.ort figcaption {
  margin-top: 0.7rem;
  font-weight: 700;
  font-size: 1.02rem;
  color: #2b4c59;
}

/* --- Weltkarte --- */

.karte-rahmen {
  border-radius: 28px;
  overflow: hidden;
  box-shadow: var(--licht), var(--wurf-gross);
  border: 6px solid var(--st-cream);
}

/* --- Drei kurze Punkte --- */

.drei {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: clamp(1rem, 2.5vw, 1.8rem);
}

.punkt {
  padding: clamp(1.2rem, 3vw, 1.7rem);
  border-radius: 22px;
  background: linear-gradient(180deg, var(--st-cream) 0%, #eef7fa 100%);
  box-shadow: var(--licht), var(--fuell), var(--wurf-klein);
}

.punkt h3 {
  margin: 0 0 0.4rem;
  font-size: 1.14rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.punkt p {
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.55;
}

/* ===========================================================================
   Textseiten (Datenschutz, Support)
   =========================================================================== */

.doc {
  padding: clamp(2rem, 6vw, 4rem) 0 clamp(3rem, 8vw, 5rem);
}

.doc .karte {
  background: linear-gradient(180deg, #ffffff 0%, var(--st-cream) 100%);
  border-radius: 26px;
  padding: clamp(1.5rem, 5vw, 3.4rem);
  box-shadow: var(--licht), var(--wurf-gross);
}

.doc h1 {
  font-size: clamp(1.8rem, 5vw, 2.8rem);
  margin: 0 0 0.3rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.doc .stand {
  color: var(--ink-soft);
  margin: 0 0 2rem;
  font-size: 0.95rem;
}

.doc h2 {
  font-size: clamp(1.15rem, 2.8vw, 1.45rem);
  margin: 2.4rem 0 0.6rem;
  padding-top: 1.4rem;
  border-top: 2px solid rgba(22, 50, 63, 0.09);
}

.doc h2:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.doc p,
.doc li {
  font-size: 1.02rem;
  line-height: 1.68;
  color: #2b4c59;
}

.doc ul {
  padding-left: 1.3rem;
}

.doc li {
  margin-bottom: 0.45rem;
}

/* Die Kernaussage steht oben und ist als Merksatz gebaut, nicht als
   Fließtext — wer die Seite nur überfliegt, soll genau diesen Satz mitnehmen. */
.merksatz {
  background: linear-gradient(180deg, #e8f6dc 0%, #d6ecc4 100%);
  border-radius: 18px;
  padding: clamp(1.1rem, 3vw, 1.6rem);
  margin: 0 0 2rem;
  box-shadow: var(--licht), var(--wurf-klein);
}

.merksatz p {
  margin: 0;
  font-weight: 600;
}

.merksatz p + p {
  margin-top: 0.7rem;
  font-weight: 500;
}

.doc table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0 1.6rem;
  font-size: 0.98rem;
}

.doc th,
.doc td {
  text-align: left;
  padding: 0.65rem 0.8rem;
  border-bottom: 1px solid rgba(22, 50, 63, 0.1);
  vertical-align: top;
}

.doc th {
  font-weight: 700;
  background: rgba(22, 50, 63, 0.045);
}

.doc .tabelle-scroll {
  overflow-x: auto;
}

.anschrift {
  font-family: var(--serif);
  font-size: 1.02rem;
  line-height: 1.7;
  background: rgba(22, 50, 63, 0.05);
  border-radius: 14px;
  padding: 1.1rem 1.3rem;
  margin: 0 0 1.4rem;
}

/* ===========================================================================
   Fuß
   =========================================================================== */

.fuss {
  background: #143c4a;
  color: #cfe4ec;
  padding: clamp(2rem, 5vw, 3rem) 0;
  font-size: 0.95rem;
}

.fuss .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: center;
  justify-content: space-between;
}

.fuss nav {
  display: flex;
  gap: 1.4rem;
  flex-wrap: wrap;
}

.fuss a {
  color: #dceef4;
  text-decoration: none;
  font-weight: 600;
}

.fuss a:hover,
.fuss a:focus-visible {
  text-decoration: underline;
}

.fuss .klein {
  color: #8fb3c0;
  font-size: 0.88rem;
}

/* ===========================================================================
   Bewegung nur, wenn sie gewünscht ist
   =========================================================================== */

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

/* Sichtbarer Fokus — die Seite muss auch mit der Tastatur bedienbar sein. */
:focus-visible {
  outline: 3px solid #166b6b;
  outline-offset: 3px;
  border-radius: 6px;
}