/* Geschenke-Fee: Startseite und Feenwelten.
   Farben aus Tammys neuem Logo (25. Okt. 2026): Salbeigruen (Schrift), Gold (Kante, Zauberstab),
   Flieder und Himmelblau (Fluegel, Kleid), Weiss. Schriften: Cormorant Garamond (Ueberschriften),
   Quicksand (Text), Great Vibes (Namen der Feenwelten), Antonio (Wortmarke wie im Logo).
   Formen: Knoepfe Pille, Bilder 20 px, Weltentore als Bogen. */

:root {
  --weiss: #FFFFFF;
  --hauch: #F6F0F8;
  --flieder: #D5C4EE;
  --akzent: #E3B04B;
  --salbei-dunkel: #4F7266;
  --salbei-tief: #3B5A50;
  --tinte: #2E3A34;
  --grau: #5E6B65;
  --salbei: #7A9E92;
  --himmel: #A8D2E8;
  --gold: #D9A53A;
  --schatten: 0 18px 40px -22px rgba(79, 114, 102, .34);
  --ueber: "Cormorant Garamond", "Cormorant", Georgia, serif;
  --text: "Quicksand", "Nunito", "Segoe UI", system-ui, sans-serif;
  --zier: "Great Vibes", "Brush Script MT", cursive;
  --aus: cubic-bezier(.23, 1, .32, 1);
  --rand: max(16px, env(safe-area-inset-left, 0px));
  --breite: 1240px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--weiss);
  color: var(--tinte);
  font-family: var(--text);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.6;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--salbei-dunkel); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--salbei-tief); }
h1, h2, h3 { margin: 0; text-wrap: balance; font-weight: 600; }
p { margin: 0; }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--salbei-dunkel); outline-offset: 3px; border-radius: 6px; }
.unsichtbar { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sprung { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--salbei-dunkel); color: var(--weiss); padding: 10px 16px; border-radius: 999px; transition: top .2s var(--aus); }
.sprung:focus { top: 12px; color: var(--weiss); }

.rahmen { max-width: calc(var(--breite) + 2 * 16px); margin-inline: auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 70; background: var(--weiss); }

/* Sternenstaub: liegt ueber allem, faengt aber keinen Klick */
#sternenstaub { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 40; }

/* Kopf */
.kopf { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 60; background: rgba(255, 255, 255, .86); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid rgba(201, 177, 230, .7); }
.kopf-innen { height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.marke { display: flex; align-items: center; }
.marke img { height: 46px; width: auto; }
.navi { display: flex; align-items: center; gap: 28px; }
.navi a { color: var(--tinte); text-decoration: none; font-weight: 600; font-size: 15.5px; }
.navi a:hover { color: var(--salbei-dunkel); }
.navi a[aria-current="page"] { color: var(--salbei-dunkel); }
.navi a.knopf, .navi a.knopf:hover { color: var(--weiss); }
.menue-knopf { display: none; }

/* Knoepfe */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 26px; border-radius: 999px;
  background: var(--salbei-dunkel); color: var(--weiss); border: 0; cursor: pointer;
  font-family: var(--text); font-weight: 700; font-size: 16px; text-decoration: none; white-space: nowrap;
  box-shadow: 0 10px 24px -14px rgba(79, 114, 102, .9);
  transition: transform .16s var(--aus), background-color .2s ease;
}
.knopf:hover { background: var(--salbei-tief); color: var(--weiss); }
.knopf:active { transform: scale(.97); }
.knopf.zweit { background: transparent; color: var(--salbei-dunkel); box-shadow: inset 0 0 0 1.5px var(--flieder); }
.knopf.zweit:hover { background: var(--hauch); color: var(--salbei-tief); }
.knopf.klein { min-height: 40px; padding: 0 18px; font-size: 15px; }
.knopf svg { width: 20px; height: 20px; flex: none; }

/* Hero der Startseite */
.hero { padding: clamp(28px, 6vw, 72px) 0 clamp(56px, 8vw, 96px); overflow-x: clip; }
.hero-innen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero h1 { font-family: var(--ueber); font-size: clamp(3.1rem, 7.4vw, 6.4rem); line-height: .98; letter-spacing: -.01em; color: var(--tinte); }
.hero-text > p { margin-top: 22px; font-size: clamp(1.06rem, 1.5vw, 1.2rem); color: var(--grau); max-width: 30ch; }
.hero .knoepfe { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; }
.hero-text > * { opacity: 0; transform: translateY(14px); animation: auf .8s var(--aus) forwards; }
.hero-text > *:nth-child(2) { animation-delay: .08s; }
.hero-text > *:nth-child(3) { animation-delay: .16s; }
@keyframes auf { to { opacity: 1; transform: none; } }

/* Die Zauberbuehne: Wunsch, Funken, Geschenk */
.buehne { position: relative; }
.buehne-karte {
  position: relative; margin: 0; background: var(--hauch); border-radius: 28px; padding: clamp(18px, 2.6vw, 30px);
  display: grid; grid-template-rows: auto 1fr auto; gap: 18px; min-height: clamp(470px, 46vw, 600px);
  overflow: hidden;
}
.buehne-karte::before { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 70% at 85% 0%, rgba(255,255,255,.9), transparent 60%); pointer-events: none; }
.wunsch { position: relative; margin: 0; max-width: 34ch; background: var(--weiss); border-radius: 20px 20px 20px 6px; padding: 14px 18px; font-family: var(--ueber); font-style: italic; font-weight: 500; font-size: clamp(1.15rem, 1.6vw, 1.35rem); line-height: 1.3; color: var(--tinte); box-shadow: var(--schatten); min-height: 4.2em; }
.wunsch .wer { display: block; margin-bottom: 4px; font-family: var(--text); font-style: normal; font-size: 13px; font-weight: 700; color: var(--salbei-dunkel); }
.wunsch .zeiger { display: inline-block; width: 2px; height: 1em; margin-left: 2px; background: var(--akzent); vertical-align: -2px; animation: blinken 1s steps(1) infinite; }
@keyframes blinken { 50% { opacity: 0; } }
.geschenk { position: relative; align-self: center; justify-self: center; width: min(100%, 470px); aspect-ratio: 4 / 3; border-radius: 20px; overflow: hidden; background: var(--weiss); box-shadow: 0 30px 60px -34px rgba(46, 58, 52, .45); }
.geschenk img { width: 100%; height: 100%; object-fit: cover; }
.geschenk img.neu { clip-path: circle(0% at 50% 45%); filter: blur(10px); transform: scale(.96); }
.geschenk img.da { clip-path: circle(80% at 50% 45%); filter: blur(0); transform: none; transition: clip-path .9s var(--aus), filter .7s var(--aus), transform .9s var(--aus); }
.buehne-fuss { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.buehne-fuss .was { font-size: 15px; color: var(--grau); }
.buehne-fuss .was a { font-weight: 700; }
.beispiele { display: flex; gap: 6px; }
.beispiele button { border: 0; background: var(--weiss); color: var(--tinte); border-radius: 999px; min-height: 36px; padding: 0 14px; font-size: 14px; font-weight: 600; cursor: pointer; transition: background-color .2s ease, color .2s ease; }
.beispiele button[aria-pressed="true"] { background: var(--salbei-dunkel); color: var(--weiss); }
.buehne { padding-top: clamp(150px, 17vw, 215px); }
.buehne-karte { z-index: 2; }
.fee-figur { position: absolute; z-index: 1; width: clamp(250px, 30vw, 390px); right: clamp(-14px, 0vw, 8px); top: 0; pointer-events: none; }
.fee-figur img { width: 100%; height: auto; transform-origin: 62% 70%; animation: schweben 5.2s ease-in-out infinite alternate; filter: drop-shadow(0 18px 24px rgba(79, 114, 102, .16)); }
.fee-figur.schwingt img { animation: schweben 5.2s ease-in-out infinite alternate, zaubern 1.3s var(--aus) 1; }
.fee-figur .stern { position: absolute; left: 89.7%; top: 23.1%; width: 1px; height: 1px; }
.fee-figur .stern::after { content: ""; position: absolute; left: -46px; top: -46px; width: 92px; height: 92px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 236, 170, .85), rgba(227, 176, 75, .0) 68%); animation: glimmen 2.6s ease-in-out infinite alternate; }
@keyframes schweben { from { transform: translateY(4px) rotate(-.8deg); } to { transform: translateY(-9px) rotate(.8deg); } }
@keyframes zaubern { 0%, 100% { rotate: 0deg; } 35% { rotate: -3.5deg; } 65% { rotate: 2deg; } }
@keyframes glimmen { from { opacity: .35; transform: scale(.8); } to { opacity: 1; transform: scale(1.15); } }
.funken-ebene { position: absolute; inset: -40px; pointer-events: none; z-index: 2; }

/* Abschnitte */
.abschnitt { padding: clamp(72px, 10vw, 128px) 0; }
.abschnitt.hauch { background: var(--hauch); }
.titel { max-width: 42rem; }
.titel h2 { font-family: var(--ueber); font-size: clamp(2.3rem, 4.6vw, 3.6rem); line-height: 1.02; letter-spacing: -.005em; }
.titel p { margin-top: 14px; color: var(--grau); font-size: 1.08rem; max-width: 52ch; }

/* Weltentore auf der Startseite */
.tore { margin-top: clamp(36px, 5vw, 56px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 32px) clamp(14px, 2vw, 28px); }
.tor { display: grid; gap: 4px; text-decoration: none; color: var(--tinte); }
.tor-bild { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: 999px 999px 24px 24px; overflow: hidden; background: var(--hauch); box-shadow: inset 0 0 0 1px rgba(201, 177, 230, .9); isolation: isolate; }
.tor-bild img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; transition: transform .9s var(--aus); }
.tor-bild::after { content: ""; position: absolute; inset: 8px; border-radius: inherit; border: 1px solid rgba(255, 255, 255, .85); pointer-events: none; }
.tor-name { margin-top: 12px; font-family: var(--zier); font-size: clamp(2rem, 3vw, 2.6rem); line-height: 1.05; color: var(--salbei-dunkel); }
.tor-anlass { font-weight: 700; font-size: 15px; }
.tor-artikel { font-size: 14px; color: var(--grau); line-height: 1.45; }
@media (hover: hover) and (pointer: fine) {
  .tor:hover .tor-bild img { transform: scale(1.06); }
  .tor:hover .tor-name { color: var(--salbei-tief); }
}

/* So zaubert die Fee: drei Stationen, verbunden durch die Funkenspur */
.ablauf { position: relative; margin-top: clamp(40px, 6vw, 72px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); }
.spur { position: absolute; left: 0; right: 0; top: 118px; width: 100%; height: 120px; pointer-events: none; overflow: visible; }
.spur path { fill: none; stroke: var(--gold); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1 10; }
.spur .zeichnen { stroke-dasharray: var(--laenge); stroke-dashoffset: var(--laenge); transition: stroke-dashoffset 2.4s var(--aus); stroke: var(--akzent); stroke-width: 1.5; opacity: .55; }
.ablauf.sichtbar .spur .zeichnen { stroke-dashoffset: 0; }
.station { position: relative; display: grid; gap: 14px; align-content: start; }
.station-bild { position: relative; aspect-ratio: 1; border-radius: 20px; overflow: hidden; background: var(--weiss); box-shadow: var(--schatten); }
.station-bild img { width: 100%; height: 100%; object-fit: cover; }
.station h3 { font-family: var(--ueber); font-size: 2rem; line-height: 1.1; display: flex; align-items: baseline; gap: 12px; }
.station h3 .nr { font-family: var(--zier); font-size: 2.4rem; color: var(--akzent); font-weight: 400; }
.station p { color: var(--grau); max-width: 34ch; }
.station-wunsch { display: grid; align-content: center; gap: 14px; padding: 26px; background: var(--weiss); }
.station-wunsch blockquote { margin: 0; font-family: var(--ueber); font-style: italic; font-size: clamp(1.4rem, 2.2vw, 1.8rem); line-height: 1.25; }
.mikro { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; color: var(--salbei-dunkel); font-size: 15px; }
.mikro .kreis { position: relative; width: 44px; height: 44px; border-radius: 50%; background: var(--hauch); display: grid; place-items: center; }
.mikro .kreis::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 0 rgba(227, 176, 75, .5); animation: hoeren 2.2s ease-out infinite; }
@keyframes hoeren { 0% { box-shadow: 0 0 0 0 rgba(227, 176, 75, .5); } 100% { box-shadow: 0 0 0 16px rgba(227, 176, 75, 0); } }
.mikro svg { width: 20px; height: 20px; }
.station-paar { position: relative; }
.station-paar .klein { position: absolute; width: 46%; right: -6%; bottom: -8%; border-radius: 18px; box-shadow: 0 20px 40px -20px rgba(46, 58, 52, .5); border: 4px solid var(--weiss); }

/* Lieblingsgeschenke: Bento */
.bento { margin-top: clamp(36px, 5vw, 56px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(0, auto); gap: 16px; }
.kachel { display: grid; grid-template-rows: 1fr auto; gap: 10px; background: var(--weiss); border-radius: 24px; padding: 10px 10px 14px; text-decoration: none; color: var(--tinte); box-shadow: inset 0 0 0 1px rgba(201, 177, 230, .75); }
.kachel .bild { border-radius: 16px; overflow: hidden; aspect-ratio: 1; background: var(--hauch); }
.kachel .bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--aus); }
.kachel .unter { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 0 6px; }
.kachel b { font-family: var(--ueber); font-size: 1.35rem; font-weight: 600; }
.kachel .unter span { font-size: 14px; color: var(--salbei-dunkel); font-weight: 700; white-space: nowrap; }
.kachel { min-width: 0; }
.kachel.gross { grid-column: span 2; grid-row: span 2; }
.kachel.gross .bild { aspect-ratio: auto; height: 100%; min-height: 420px; }
.kachel.gross b { font-size: 1.7rem; }
.kachel.breit { grid-column: span 2; }
.kachel.breit .bild { aspect-ratio: 2 / 1; }
@media (hover: hover) and (pointer: fine) { .kachel:hover .bild img { transform: scale(1.05); } }

/* Wunschkasten */
.wunschkasten { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.wunschkasten h2 { font-family: var(--ueber); font-size: clamp(2.3rem, 4.6vw, 3.6rem); line-height: 1.02; }
.wunschkasten .titel p { margin-top: 14px; }
.formular { position: relative; background: var(--weiss); border-radius: 28px; padding: clamp(20px, 3vw, 32px); box-shadow: var(--schatten); display: grid; gap: 12px; }
.formular label { font-weight: 700; font-size: 15px; }
.formular textarea { width: 100%; min-height: 150px; resize: vertical; border-radius: 18px; border: 1.5px solid var(--flieder); padding: 14px 16px; font: 500 17px/1.5 var(--text); color: var(--tinte); background: var(--weiss); }
.formular textarea::placeholder { color: #86948D; }
.formular textarea:focus { outline: none; border-color: var(--akzent); box-shadow: 0 0 0 4px rgba(227, 176, 75, .18); }
.formular .hilfe { font-size: 14px; color: var(--grau); }
.formular .zeile { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.formular .antwort { font-size: 15px; color: var(--salbei-tief); font-weight: 600; min-height: 1.4em; }
.formular .knopf.hoert { background: var(--akzent); }

/* Fuss */
.fuss { padding: 56px 0 84px; border-top: 1px solid rgba(201, 177, 230, .8); }
.fuss-innen { display: grid; grid-template-columns: 1.2fr 2fr; gap: 32px; }
.fuss img { height: 44px; width: auto; }
.fuss p { margin-top: 12px; color: var(--grau); font-size: 15px; max-width: 34ch; }
.fuss-welten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 20px; list-style: none; margin: 0; padding: 0; }
.fuss-welten a { display: inline-flex; align-items: center; min-height: 44px; color: var(--tinte); text-decoration: none; font-weight: 600; font-size: 15px; }
.fuss-welten a:hover { color: var(--salbei-dunkel); }
.fuss-recht { margin-top: 32px; display: flex; gap: 20px; flex-wrap: wrap; font-size: 14px; color: var(--grau); }

/* Feenwelt (Unterseiten) */
.welt-hero { position: relative; padding: clamp(20px, 4vw, 48px) 0 0; }
.welt-innen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.zurueck { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; text-decoration: none; }
.zurueck svg { width: 18px; height: 18px; }
.welt-text { container-type: inline-size; }
.welt-name { margin-top: 18px; font-family: var(--zier); font-weight: 400; font-size: clamp(3.4rem, calc(100cqi / (0.46 * var(--n, 10))), 9rem); line-height: .95; color: var(--salbei-dunkel); white-space: nowrap; }
.welt-anlass { margin-top: 10px; font-family: var(--ueber); font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 600; line-height: 1.1; }
.welt-satz { margin-top: 16px; color: var(--grau); font-size: 1.12rem; max-width: 36ch; }
.welt-hero .knoepfe { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; }
.welt-text > * { opacity: 0; transform: translateY(14px); animation: auf .8s var(--aus) forwards; }
.welt-text > *:nth-child(2) { animation-delay: .06s; }
.welt-text > *:nth-child(3) { animation-delay: .12s; }
.welt-text > *:nth-child(4) { animation-delay: .18s; }
.welt-text > *:nth-child(5) { animation-delay: .24s; }
.diorama { position: relative; aspect-ratio: 4 / 5; max-height: calc(100dvh - 90px); justify-self: center; width: min(100%, calc((100dvh - 90px) * 4 / 5)); border-radius: 999px 999px 0 0; overflow: hidden; isolation: isolate; background: var(--weiss); -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 99%); mask-image: linear-gradient(to bottom, #000 72%, transparent 99%); }
.diorama img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; transform-origin: 50% 30%; animation: atmen 14s ease-in-out infinite alternate; }
@keyframes atmen { from { transform: scale(1); } to { transform: scale(1.035); } }
.diorama canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.diorama .flammen { position: absolute; inset: 0; pointer-events: none; }
.diorama .flamme { position: absolute; width: 4.2%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(255, 236, 170, .95) 0%, rgba(255, 200, 90, .55) 35%, rgba(255, 180, 80, 0) 70%); mix-blend-mode: screen; animation: flackern 1.6s ease-in-out infinite; }
@keyframes flackern { 0%, 100% { opacity: .75; transform: translate(-50%, -50%) scale(1); } 30% { opacity: 1; transform: translate(-50%, -54%) scale(1.25); } 60% { opacity: .6; transform: translate(-50%, -48%) scale(.9); } }
.diorama .mondlicht { position: absolute; left: 62%; top: 24%; width: 40%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(255, 245, 225, .75), rgba(255, 245, 225, 0) 65%); mix-blend-mode: screen; animation: leuchten 5s ease-in-out infinite alternate; pointer-events: none; }
@keyframes leuchten { from { opacity: .35; } to { opacity: .9; } }

.regal { margin-top: clamp(32px, 5vw, 48px); display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(18px, 2.4vw, 28px); }
.regal[data-anzahl="3"], .regal[data-anzahl="6"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.regal[data-anzahl="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.regal[data-anzahl="5"] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.artikel { display: grid; gap: 12px; align-content: start; }
.artikel .bild { aspect-ratio: 1; border-radius: 20px; overflow: hidden; background: var(--hauch); }
.artikel .bild img { width: 100%; height: 100%; object-fit: cover; }
.artikel h3 { font-family: var(--ueber); font-size: 1.65rem; line-height: 1.1; }
.artikel p { color: var(--grau); font-size: 15.5px; }
.artikel p q { color: var(--tinte); font-style: italic; quotes: "„" "“"; }

.stimme { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.stimme blockquote { margin: 0; font-family: var(--ueber); font-style: italic; font-weight: 500; font-size: clamp(2rem, 4.2vw, 3.4rem); line-height: 1.12; color: var(--tinte); }
.stimme blockquote::before { content: "„"; color: var(--akzent); }
.stimme blockquote::after { content: "“"; color: var(--akzent); }
.stimme .hinweis { margin-top: 18px; color: var(--grau); }
.stimme figure { margin: 0; border-radius: 24px; overflow: hidden; box-shadow: var(--schatten); }

.weiter { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.weiter .tor { max-width: 360px; }
.welten-liste { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; }
.welten-liste a { display: inline-flex; min-height: 40px; align-items: center; padding: 0 16px; border-radius: 999px; background: var(--weiss); box-shadow: inset 0 0 0 1.5px var(--flieder); color: var(--tinte); text-decoration: none; font-weight: 600; font-size: 15px; }
.welten-liste a:hover { color: var(--salbei-dunkel); box-shadow: inset 0 0 0 1.5px var(--akzent); }
.welten-liste a[aria-current="page"] { background: var(--salbei-dunkel); color: var(--weiss); box-shadow: none; }

/* Handy */
@media (max-width: 960px) {
  .hero-innen, .wunschkasten, .stimme, .weiter { grid-template-columns: 1fr; }
  .tore { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kachel.gross .bild { min-height: 0; aspect-ratio: 1; }
  .ablauf { grid-template-columns: 1fr; gap: 48px; }
  .spur { display: none; }
  .station-paar { margin-right: 6%; }
  .station-wunsch { aspect-ratio: auto; min-height: 0; padding: 28px 24px; }
  .abschnitt { padding: clamp(56px, 12vw, 72px) 0; }
  .fuss-innen { grid-template-columns: 1fr; }
  .fuss-welten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .welt-innen { grid-template-columns: 1fr; }
  .regal[data-anzahl="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .regal[data-anzahl="5"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .welt-bild { order: -1; }
  .diorama { width: min(100%, 460px); max-height: none; }
  .welt-text { margin-top: -14%; position: relative; z-index: 2; text-align: center; }
  .welt-satz { margin-inline: auto; }
  .welt-name { font-size: clamp(3rem, calc(100cqi / (0.46 * var(--n, 10))), 5.2rem); }
  .welt-hero .knoepfe { justify-content: center; }
}
@media (max-width: 760px) {
  .navi .link { display: none; }
  .navi { gap: 10px; }
  .menue-knopf { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--hauch); color: var(--tinte); cursor: pointer; }
  .menue-knopf svg { width: 22px; height: 22px; }
  .menue { position: absolute; left: 0; right: 0; top: 68px; background: var(--weiss); border-bottom: 1px solid var(--flieder); padding-block: 8px 18px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); display: grid; gap: 4px; box-shadow: 0 20px 40px -24px rgba(46, 58, 52, .35); }
  .menue[hidden] { display: none; }
  .menue a { padding: 12px 4px; color: var(--tinte); text-decoration: none; font-weight: 600; border-bottom: 1px solid var(--hauch); }
  .kopf .knopf.klein { padding: 0 14px; }
  .marke img { height: 38px; }
  .kachel .unter { flex-direction: column; align-items: flex-start; gap: 0; }
  .kachel .unter span { white-space: normal; }
  .regal[data-anzahl] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; }
  .regal[data-anzahl="3"] .artikel:first-child, .regal[data-anzahl="5"] .artikel:first-child { grid-column: span 2; }
  .artikel { gap: 8px; }
  .artikel h3 { font-size: 1.3rem; }
  .artikel p { font-size: 14px; line-height: 1.45; }
  .artikel .bild { border-radius: 16px; }
  .buehne-karte { min-height: 0; }
  .buehne { padding-top: 138px; }
  .fee-figur { width: 236px; right: -8px; }
  .beispiele button { padding: 0 11px; font-size: 13px; }
  .kachel b { font-size: 1.15rem; }
  .kachel.gross b { font-size: 1.4rem; }
}
@media (min-width: 761px) { .menue { display: none !important; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-text > *, .welt-text > * { animation: none; opacity: 1; transform: none; }
  .diorama img { animation-duration: 28s; }
  .diorama .flamme, .diorama .mondlicht { animation-duration: 3.2s; }
  .fee-figur img { animation-duration: 9s; }
  .fee-figur .stern::after { animation-duration: 5s; }
  .geschenk img.da, .geschenk img.neu { transition: opacity .3s ease; clip-path: none; filter: none; transform: none; }
  .spur .zeichnen { transition: none; stroke-dashoffset: 0; }
  .fee-figur.schwingt img { animation: schweben 9s ease-in-out infinite alternate; }
}

/* Wortmarke im Kopf (Logo: Salbeigruen mit Goldkante) */
.marke { gap: 10px; text-decoration: none; }
.marke-fee { height: 50px; width: auto; }
.wortmarke { display: flex; align-items: baseline; gap: 6px; line-height: 1; }
.wortmarke b { font-family: "Antonio", "Oswald", "Arial Narrow", sans-serif; font-weight: 600; font-size: 1.55rem; letter-spacing: .05em; color: var(--salbei); text-shadow: 0 1px 0 rgba(46, 58, 52, .55), 0 0 1px var(--gold); }
.wortmarke i { font-family: var(--zier); font-style: normal; font-size: 2.1rem; color: var(--salbei); text-shadow: 0 1px 0 rgba(46, 58, 52, .45), 0 0 1px var(--gold); transform: translateY(2px); }
@media (max-width: 480px) { .marke-fee { height: 42px; } .wortmarke b { font-size: 1.2rem; } .wortmarke i { font-size: 1.7rem; } }
/* Logo im Fuss */
.fuss .fuss-logo { width: min(100%, 260px); height: auto; }
/* Zauberstab aus dem Logo beim Wunschkasten */
.wunschkasten .titel { position: relative; }
.zauberstab { position: absolute; right: -8px; top: -34px; width: clamp(70px, 9vw, 120px); height: auto; pointer-events: none; opacity: .95; animation: wippen 4.4s ease-in-out infinite alternate; transform-origin: 40% 90%; }
@keyframes wippen { from { transform: rotate(-4deg); } to { transform: rotate(5deg); } }
@media (max-width: 860px) { .zauberstab { right: 0; top: -70px; } }
/* Knopf: Bewegung anhalten */
.bewegung { position: fixed; left: max(12px, env(safe-area-inset-left, 0px)); bottom: max(12px, env(safe-area-inset-bottom, 0px)); z-index: 80; border: 1px solid rgba(79, 114, 102, .35); background: rgba(255, 255, 255, .92); color: var(--salbei-dunkel); border-radius: 999px; min-height: 40px; padding: 0 16px; font-size: 14px; font-weight: 700; cursor: pointer; box-shadow: var(--schatten); }
.bewegung:hover { background: var(--weiss); color: var(--salbei-tief); }
.bewegung-aus *, .bewegung-aus *::before, .bewegung-aus *::after { animation-play-state: paused !important; }
.bewegung-aus #sternenstaub { visibility: hidden; }

/* Kopf auf dem Handy: Menue statt Knopf, damit die Wortmarke frei bleibt */
@media (max-width: 560px) { .navi .knopf.klein { display: none; } }
@media (min-width: 861px) { .hero-text { align-self: start; padding-top: clamp(40px, 7vw, 100px); } }
.bewegung { min-height: 36px; padding: 0 14px; font-size: 13px; opacity: .94; }

/* Ergebnis: was die Fee aus dem Wunsch macht */
.ergebnis { grid-column: 1 / -1; margin-top: 8px; background: var(--weiss); border-radius: 28px; padding: clamp(20px, 3vw, 34px); box-shadow: var(--schatten); display: grid; gap: 22px; border: 1.5px solid var(--flieder); animation: erscheinen .7s cubic-bezier(.2,.8,.2,1) both; }
.ergebnis[hidden] { display: none; }
@keyframes erscheinen { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: none; } }
.erg-fee { display: grid; gap: 6px; }
.erg-name { font: 600 13px/1 var(--text); letter-spacing: .14em; text-transform: uppercase; color: var(--salbei-dunkel); }
.erg-blase { font: italic 500 clamp(21px, 2.4vw, 28px)/1.35 'Cormorant Garamond', serif; color: var(--salbei-tief); max-width: 46ch; }
.erg-spalten { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 20px; }
.erg-motiv { position: relative; border-radius: 22px; padding: clamp(18px, 2.6vw, 28px); background: linear-gradient(140deg, var(--m1), var(--m2) 70%, var(--m3)); display: grid; gap: 12px; align-content: start; overflow: hidden; }
.erg-marke { font: 600 12px/1 var(--text); letter-spacing: .14em; text-transform: uppercase; color: var(--salbei-tief); }
.erg-schrift { font: 400 clamp(36px, 5vw, 58px)/1.1 'Great Vibes', cursive; color: var(--tinte); }
.erg-text { font-size: 17px; line-height: 1.55; color: var(--tinte); }
.erg-stimmung { justify-self: start; font: 600 13px/1 var(--text); padding: 7px 12px; border-radius: 99px; background: rgba(255,255,255,.65); color: var(--salbei-tief); }
.erg-farben { display: flex; gap: 8px; } .erg-farben span { width: 28px; height: 28px; border-radius: 50%; border: 2px solid rgba(255,255,255,.9); box-shadow: 0 1px 4px rgba(46,58,52,.2); }
.erg-seite { display: grid; gap: 14px; align-content: start; }
.erg-fakten { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; font-size: 16px; }
.erg-fakten dt { color: var(--grau); font-weight: 600; } .erg-fakten dd { color: var(--tinte); font-weight: 600; }
.erg-seite .knopf { justify-self: start; }
.erg-titel { font: 600 22px/1.2 'Cormorant Garamond', serif; color: var(--salbei-tief); }
.erg-regal { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.erg-artikel { margin: 0; border-radius: 16px; overflow: hidden; background: var(--hauch); }
.erg-artikel img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; display: block; }
.erg-artikel figcaption { padding: 8px 12px 10px; font-weight: 700; font-size: 14px; color: var(--salbei-tief); }
.erg-hinweis { font-size: 14px; color: var(--grau); }
.erg-zeile { display: flex; flex-wrap: wrap; gap: 10px; }
.erg-zeile .knopf[disabled] { opacity: .55; cursor: not-allowed; }
.formular.zaubert textarea { opacity: .7; }
.zauberstab.zaubert { animation: wippen .5s ease-in-out infinite alternate; }
@media (max-width: 860px) { .erg-spalten { grid-template-columns: 1fr; } .wunschkasten { grid-template-columns: 1fr; } }

/* Handy: der Knopf "Bewegung anhalten" darf Text nicht verdecken */
@media (max-width: 560px) {
  .bewegung { min-height: 34px; padding: 0 12px; font-size: 12px; opacity: .88; bottom: max(8px, env(safe-area-inset-bottom, 0px)); }
}

/* Das gemalte Geschenk */
.erg-geschenk { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(16px, 3vw, 32px); align-items: start; }
.erg-bild { margin: 0; position: relative; aspect-ratio: 1; border-radius: 22px; overflow: hidden; background: linear-gradient(140deg, var(--m1), var(--m2) 70%, var(--m3)); display: grid; place-items: center; text-align: center; }
.erg-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: erscheinen .8s ease both; }
.erg-bildstatus { position: relative; z-index: 1; padding: 20px 28px; font: italic 500 clamp(20px, 2.2vw, 26px)/1.35 'Cormorant Garamond', serif; color: var(--salbei-tief); max-width: 26ch; }
.erg-bild.malt::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%); transform: translateX(-100%); animation: glanz 1.8s ease-in-out infinite; }
@keyframes glanz { to { transform: translateX(100%); } }
.erg-bildseite { display: grid; gap: 14px; align-content: start; }
.erg-bildtext { color: var(--grau); font-size: 15px; }
.erg-regal { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
button.erg-artikel { all: unset; box-sizing: border-box; cursor: pointer; display: block; border-radius: 16px; overflow: hidden; background: var(--hauch); border: 2px solid transparent; transition: border-color .2s ease, transform .2s ease; }
button.erg-artikel:hover { transform: translateY(-2px); }
button.erg-artikel:focus-visible { outline: 3px solid var(--akzent); outline-offset: 2px; }
button.erg-artikel[aria-pressed="true"] { border-color: var(--salbei); }
button.erg-artikel img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; display: block; }
button.erg-artikel span { display: block; padding: 8px 12px 10px; font-weight: 700; font-size: 14px; color: var(--salbei-tief); }
@media (max-width: 860px) { .erg-geschenk { grid-template-columns: 1fr; } }

/* Zauberstab mit Feenstaub: erscheint, sobald jemand spricht, tippt oder die Fee malt */
.formular { overflow: visible; }
.stab-live { position: absolute; right: 10px; top: -96px; width: clamp(84px, 24vw, 120px); height: auto; pointer-events: none; z-index: 3; opacity: 0; transform: translateY(14px) rotate(-8deg) scale(.85); transform-origin: 40% 90%; transition: opacity .35s ease, transform .5s cubic-bezier(.2,.8,.2,1); filter: drop-shadow(0 4px 14px rgba(227,176,75,.5)); }
.formular.stab-an .stab-live { opacity: 1; transform: none; animation: wippen .55s ease-in-out infinite alternate; }
.formular.stab-an textarea { border-color: var(--akzent); box-shadow: 0 0 0 4px rgba(227,176,75,.22); }
.stab-bild { position: absolute; right: 8%; top: 8%; width: clamp(80px, 22%, 130px); height: auto; opacity: 0; pointer-events: none; z-index: 2; transform-origin: 40% 90%; filter: drop-shadow(0 4px 14px rgba(227,176,75,.5)); }
.erg-bild.malt .stab-bild { opacity: 1; animation: wippen .5s ease-in-out infinite alternate; }
.erg-bildname { position: absolute; left: 12px; bottom: 12px; z-index: 2; padding: 7px 14px; border-radius: 99px; background: rgba(255,255,255,.92); color: var(--salbei-tief); font-weight: 700; font-size: 14px; box-shadow: 0 2px 8px rgba(46,58,52,.15); }
.erg-bildname:empty { display: none; }
.erg-titel { font-size: clamp(22px, 3.2vw, 30px); }

.foto-knopf { cursor: pointer; }
.foto-vorschau { display: flex; align-items: center; gap: 12px; margin-top: 10px; font-size: .95rem; }
.foto-vorschau[hidden] { display: none; }
.foto-vorschau img { width: 64px; height: 64px; object-fit: cover; border-radius: 12px; }
.foto-weg { min-height: 44px; padding: 0 14px; background: none; border: 1px solid currentColor; border-radius: 999px; color: inherit; font: inherit; cursor: pointer; }