/* Zuckerzauber – Webseite. Schriften liegen lokal, keine externen Dienste. */
@font-face { font-family: "Fredoka"; font-weight: 500; font-display: swap; src: url("fredoka-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Fredoka"; font-weight: 700; font-display: swap; src: url("fredoka-latin-700-normal.woff2") format("woff2"); }
:root {
  --bg1: #ffe3ef; --bg2: #ffc4dd; --ink: #3b1640; --ink-soft: #7d4e83; --card: #fffafc; --card-2: #ffeef6;
  --pink: #ff4f93; --pink-dark: #c41d63; --line: rgba(59, 22, 64, .12);
  --f: "Fredoka", "Arial Rounded MT Bold", system-ui, sans-serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html { background: var(--bg2); }
body { margin: 0; min-height: 100vh; color: var(--ink); background: linear-gradient(180deg, var(--bg1), var(--bg2)); font: 17px/1.6 var(--body); }
a { color: var(--pink-dark); }
a:focus-visible { outline: 3px solid var(--pink); outline-offset: 2px; }
.wrap { max-width: 860px; margin: 0 auto; padding-inline: 18px; padding-block: 28px 40px; }
header.top { display: flex; align-items: center; gap: 12px; }
header.top img { width: 52px; height: 52px; border-radius: 14px; box-shadow: 0 3px 0 rgba(80, 20, 70, .2); }
header.top a { font: 700 24px/1 var(--f); color: var(--ink); text-decoration: none; }
.hero { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: center; margin-top: 28px; }
.hero h1 { font: 700 clamp(40px, 9vw, 64px)/1 var(--f); margin: 0 0 12px; color: #fff; -webkit-text-stroke: 3px var(--pink-dark); paint-order: stroke fill; text-shadow: 0 5px 0 #7a0c48; text-wrap: balance; }
.hero p { margin: 0 0 16px; font-size: 19px; max-width: 34ch; }
.badge { display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 16px; background: var(--ink); color: #fff; font: 600 16px var(--f); text-decoration: none; }
.badge small { display: block; font-size: 12px; opacity: .8; font-weight: 500; }
.shots { display: flex; gap: 12px; overflow-x: auto; padding: 6px 2px 14px; scroll-snap-type: x mandatory; }
.shots img { width: 200px; max-width: 60vw; height: auto; border-radius: 22px; box-shadow: 0 0 0 5px #fff, 0 10px 24px rgba(80, 20, 70, .2); scroll-snap-align: start; flex: none; }
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 28px; }
.features div { background: var(--card); border-radius: 18px; padding: 14px 16px; box-shadow: 0 3px 0 rgba(80, 20, 70, .12); min-width: 0; }
.features b { font: 700 18px var(--f); display: block; }
.doc { background: var(--card); border-radius: 22px; padding: 22px 20px 26px; margin-top: 22px; box-shadow: 0 4px 0 rgba(80, 20, 70, .12); }
.doc h1 { font: 700 32px/1.15 var(--f); margin: 0 0 6px; text-wrap: balance; }
.doc h2 { font: 700 21px/1.25 var(--f); margin: 26px 0 6px; }
.doc p, .doc li { max-width: 68ch; }
.doc .stand { color: var(--ink-soft); margin-top: 0; }
address { font-style: normal; }
footer { margin-top: 32px; font-size: 15px; color: var(--ink-soft); display: flex; flex-wrap: wrap; gap: 6px 18px; }
@media (min-width: 720px) { .hero { grid-template-columns: 1.1fr 1fr; } }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto; } }
header.top a.lang { margin-left: auto; font: 600 15px/1 var(--f); padding: 9px 13px; border-radius: 12px; background: var(--card); color: var(--ink); box-shadow: 0 3px 0 rgba(80, 20, 70, .12); }
.doc .note { font-size: 15px; color: var(--ink-soft); }