/* ============================================================
   Maxima's Leckereien – Stylesheet
   Design nach den Visitenkarten: Aquarell-Rosa, handgezeichnete
   Wellenrahmen, Schleifen, Herzen und Zuckerstreusel.
   ============================================================ */

/* ---------- 1. Design-Tokens ---------- */
:root {
  color-scheme: light;

  /* Rosa-Palette von den Karten abgenommen */
  --rosa-papier:   #fdeef2;   /* heller Kartengrund      */
  --rosa-karte:    #fbdce4;   /* Kartenfläche            */
  --rosa-tief:     #f7c9d6;   /* Aquarell-Schatten       */
  --rosa-pastell:  #fce4ea;
  --pink:          #e4508a;   /* Hauptfarbe Schrift      */
  --pink-dunkel:   #c81e5b;   /* Konturen, Links         */
  --pink-hell:     #f9a8c4;
  --pink-marker:   #fbc0d3;   /* "Textmarker" hinter Text */

  /* Akzente aus den Illustrationen */
  --braun:         #8a5a3b;
  --braun-dunkel:  #6b4226;
  --orange:        #f0906a;
  --creme:         #fff8f2;

  /* Text */
  --text:          #5a3140;
  --text-leise:    #8a6373;
  --weiss:         #ffffff;

  /* Maße */
  --rahmen-radius: 28px;
  --spalte:        min(1120px, 100% - 2.5rem);
  --schatten:      0 18px 45px -22px rgba(200, 30, 91, .45);
  --schatten-weich:0 10px 30px -18px rgba(200, 30, 91, .5);

  /* Schriften.
     Bewusst KEINE Google Fonts: das wäre eine Datenübertragung an
     Google (IP-Adresse) und damit ohne Einwilligung DSGVO-widrig.
     Stattdessen Systemschriften – und optional eine selbst gehostete
     Schrift, siehe @font-face weiter unten. */
  --schrift-hand: "Maxima Handschrift", "Bradley Hand", "Segoe Script",
                  "Brush Script MT", "Snell Roundhand", "Comic Sans MS", cursive;
  --schrift-text: "Maxima Text", ui-rounded, "SF Pro Rounded", "Segoe UI Variable",
                  "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;
}

/* Die Schriftdateien liegen unter public/assets/fonts/ und werden von
   app/views/kopf.php eingebunden, sobald sie da sind (schriften-holen.php).
   Fehlen sie, greift automatisch der Systemschrift-Fallback oben. */

/* ---------- 2. Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--schrift-text);
  font-size: clamp(1rem, .95rem + .25vw, 1.125rem);
  line-height: 1.7;
  color: var(--text);
  background-color: var(--rosa-papier);
  /* Feine Aquarell-Körnung, inline als SVG – keine externe Anfrage */
  background-image:
    radial-gradient(ellipse 60% 40% at 15% 8%,  rgba(249, 168, 196, .40), transparent 60%),
    radial-gradient(ellipse 50% 35% at 88% 22%, rgba(247, 201, 214, .55), transparent 62%),
    radial-gradient(ellipse 70% 45% at 50% 96%, rgba(252, 228, 234, .85), transparent 65%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a {
  color: var(--pink-dunkel);
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}
a:hover { color: var(--pink); }

:focus-visible {
  outline: 3px solid var(--pink-dunkel);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Nur für Screenreader */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; top: -100px; left: 1rem; z-index: 100;
  background: var(--weiss); color: var(--pink-dunkel);
  padding: .75rem 1.25rem; border-radius: 0 0 14px 14px;
  font-weight: 700; box-shadow: var(--schatten);
}
.skip-link:focus { top: 0; }

/* ---------- 3. Typografie ---------- */
h1, h2, h3 {
  font-family: var(--schrift-hand);
  color: var(--pink);
  line-height: 1.1;
  margin: 0 0 .6em;
  letter-spacing: .01em;
  /* Der leichte Doppel-Kontur-Effekt der Handlettering-Karten */
  text-shadow:
     1.5px 1.5px 0 var(--pink-dunkel),
    -0.5px -0.5px 0 rgba(255, 255, 255, .5);
}

h1 { font-size: clamp(2.6rem, 1.4rem + 5.4vw, 5.2rem); }
h2 { font-size: clamp(2rem, 1.35rem + 2.6vw, 3.1rem); }
h3 {
  font-size: clamp(1.25rem, 1.1rem + .7vw, 1.6rem);
  text-shadow: 1px 1px 0 var(--pink-dunkel);
}

.vorspann {
  font-size: clamp(1.05rem, 1rem + .45vw, 1.3rem);
  color: var(--text);
  max-width: 58ch;
}

/* Rosa "Textmarker"-Balken wie hinter der Adresse auf der Karte */
.marker {
  display: inline;
  background: linear-gradient(var(--pink-marker), var(--pink-marker));
  background-size: 100% 62%;
  background-position: 0 78%;
  background-repeat: no-repeat;
  padding: 0 .25em;
  border-radius: 4px;
}

/* ---------- 4. Layout ---------- */
.huelle { width: var(--spalte); margin-inline: auto; }

section { padding-block: clamp(3rem, 2rem + 5vw, 6rem); }

.abschnitt-kopf {
  text-align: center;
  max-width: 62ch;
  margin: 0 auto clamp(2rem, 1.5rem + 2vw, 3.5rem);
}
.abschnitt-kopf .vorspann { margin-inline: auto; }

/* ---------- 5. Die Karte mit Wellenrahmen ---------- */
.karte {
  position: relative;
  background: var(--rosa-karte);
  background-image:
    radial-gradient(ellipse 55% 45% at 12% 15%, rgba(255, 255, 255, .75), transparent 60%),
    radial-gradient(ellipse 45% 40% at 85% 80%, rgba(247, 201, 214, .8), transparent 62%),
    radial-gradient(ellipse 40% 30% at 70% 12%, rgba(255, 255, 255, .5), transparent 60%);
  border-radius: var(--rahmen-radius);
  box-shadow: var(--schatten);
  padding: clamp(2.2rem, 1.5rem + 3.5vw, 4.5rem) clamp(1.5rem, 1rem + 3vw, 4rem);
  overflow: hidden;
}

/* Der handgezeichnete Wellenrahmen wird per JS als SVG eingesetzt.
   Ohne JavaScript bleibt eine schlichte gestrichelte Linie sichtbar. */
.karte__rahmen {
  position: absolute;
  inset: clamp(12px, 2vw, 22px);
  pointer-events: none;
  border: 2.5px dashed var(--pink);
  border-radius: 20px;
  opacity: .85;
}
.karte__rahmen svg { width: 100%; height: 100%; display: block; }
.karte__rahmen:has(svg) { border: 0; }

.karte > *:not(.karte__rahmen):not(.deko) { position: relative; z-index: 1; }

/* ---------- 6. Deko: Schleifen, Herzen, Streusel ---------- */
.deko { position: absolute; pointer-events: none; user-select: none; z-index: 0; }
.deko svg { display: block; overflow: visible; }

.schleife { width: clamp(26px, 4vw, 46px); color: var(--pink); }
.schleife--ol { top: clamp(4px, 1vw, 12px); left:  clamp(4px, 1vw, 12px); }
.schleife--or { top: clamp(4px, 1vw, 12px); right: clamp(4px, 1vw, 12px); transform: scaleX(-1); }
.schleife--ul { bottom: clamp(4px, 1vw, 12px); left:  clamp(4px, 1vw, 12px); transform: scaleY(-1); }
.schleife--ur { bottom: clamp(4px, 1vw, 12px); right: clamp(4px, 1vw, 12px); transform: scale(-1); }

.streusel { color: var(--pink-hell); }
.streusel--1 { top: 14%;  left: 7%;   width: 16px; color: var(--orange); transform: rotate(-25deg); }
.streusel--2 { top: 26%;  right: 11%; width: 14px; transform: rotate(40deg); }
.streusel--3 { bottom: 20%; left: 14%; width: 15px; transform: rotate(15deg); }
.streusel--4 { bottom: 14%; right: 8%; width: 17px; color: var(--orange); transform: rotate(-50deg); }
.streusel--5 { top: 55%;  left: 4%;   width: 13px; transform: rotate(70deg); }
.streusel--6 { top: 68%;  right: 5%;  width: 15px; transform: rotate(-15deg); }

.herz { color: var(--pink); }
.herz--1 { top: 9%;   left: 22%;  width: 20px; }
.herz--2 { top: 18%;  right: 24%; width: 15px; opacity: .8; }
.herz--3 { bottom: 12%; left: 32%; width: 17px; opacity: .75; }

@media (max-width: 640px) {
  .streusel--5, .streusel--6, .herz--3 { display: none; }
}

/* Gezeichnete Backwaren rund um das Logo (wie auf der Kartenvorderseite) */
.illu {
  width: clamp(96px, 14.5vw, 186px);
  filter: drop-shadow(0 9px 16px rgba(200, 30, 91, .22));
}
/* Die beiden oberen sind die Blickfänger und deshalb am größten. */
.illu--torte   { top: 6%;    left: 2.5%;  width: clamp(104px, 16vw, 208px); transform: rotate(-9deg); }
.illu--cupcake { top: 4.5%;  right: 2.5%; width: clamp(104px, 16vw, 208px); transform: rotate(8deg); }
.illu--cookie  { bottom: 8%; left: 3.5%;  transform: rotate(6deg); }
.illu--macaron { bottom: 9%; right: 3.5%; transform: rotate(-6deg); }

/* Mittlere Breiten: etwas kleiner, damit der Text Luft behält. */
@media (max-width: 1080px) {
  .illu--torte, .illu--cupcake { width: clamp(88px, 13vw, 140px); }
  .illu { width: clamp(80px, 11vw, 124px); }
}

/* Auf schmalen Bildschirmen würden die Illustrationen den Text überlagern:
   dort nur die beiden oberen, kleiner und weiter außen. */
@media (max-width: 900px) {
  .illu { opacity: .92; }
  .illu--torte   { top: 2.5%; left: 1%;  width: clamp(64px, 13vw, 96px); }
  .illu--cupcake { top: 2%;   right: 1%; width: clamp(64px, 13vw, 96px); }
  .illu--cookie, .illu--macaron { display: none; }
}
@media (max-width: 520px) {
  .illu--torte, .illu--cupcake { width: 58px; }
}

/* ---------- 7. Kopfbereich ---------- */
.kopf { padding-top: clamp(1.5rem, 1rem + 3vw, 3.5rem); }

.kopf__karte { text-align: center; }

.logo {
  font-family: var(--schrift-hand);
  display: block;
  margin: 0 auto .4rem;
  max-width: 16ch;
}
.logo__zeile1, .logo__zeile2 { display: block; }
.logo__zeile2 { margin-top: -.12em; }

.badge {
  display: inline-block;
  font-family: var(--schrift-hand);
  font-size: clamp(1.3rem, 1rem + 1.4vw, 2rem);
  color: var(--pink);
  background: var(--weiss);
  border: 2.5px solid var(--pink);
  border-radius: 999px;
  padding: .25em 1.2em;
  margin-bottom: 1.2rem;
  box-shadow: var(--schatten-weich);
  text-shadow: 1px 1px 0 var(--pink-dunkel);
  transform: rotate(-2deg);
}

.kopf__unterzeile {
  font-size: clamp(1.05rem, 1rem + .5vw, 1.35rem);
  max-width: 46ch;
  margin: 0 auto 1.8rem;
}

.trenner {
  display: block;
  width: clamp(90px, 18vw, 150px);
  margin: 1.5rem auto;
  color: var(--pink);
}

/* ---------- 8. Buttons ---------- */
.knopf {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  font-family: var(--schrift-text);
  font-size: 1.05rem;
  font-weight: 700;
  text-decoration: none;
  padding: .85em 1.9em;
  border-radius: 999px;
  border: 2.5px solid var(--pink-dunkel);
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
  box-shadow: 0 5px 0 var(--pink-dunkel);
}
.knopf:hover, .knopf:focus-visible { transform: translateY(-3px); box-shadow: 0 8px 0 var(--pink-dunkel); }
.knopf:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--pink-dunkel); }

.knopf--voll { background: var(--pink); color: var(--weiss); }
.knopf--voll:hover { background: var(--pink-dunkel); color: var(--weiss); }

.knopf--leer { background: var(--weiss); color: var(--pink-dunkel); }
.knopf--leer:hover { background: var(--rosa-pastell); color: var(--pink-dunkel); }

/* Gesperrt, solange die Datenschutzerklärung nicht bestätigt ist */
.knopf[disabled] {
  background: var(--pink-hell);
  border-color: var(--pink-hell);
  color: #fff;
  box-shadow: 0 5px 0 #e59ab8;
  cursor: not-allowed;
}
.knopf[disabled]:hover,
.knopf[disabled]:active {
  transform: none;
  box-shadow: 0 5px 0 #e59ab8;
  background: var(--pink-hell);
}

.absende-hinweis {
  text-align: center;
  margin-top: .9rem;
  color: var(--pink-dunkel);
  font-weight: 600;
}

.knopf-reihe {
  display: flex; flex-wrap: wrap; gap: 1rem;
  justify-content: center;
}

/* ---------- 9. Sortiment ---------- */
.sortiment {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: clamp(1.2rem, 1rem + 1.2vw, 2rem);
}

.leckerei {
  background: var(--weiss);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--schatten-weich);
  border: 2.5px solid var(--pink-hell);
  display: flex;
  flex-direction: column;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.leckerei:hover {
  transform: translateY(-6px) rotate(-.6deg);
  box-shadow: 0 22px 40px -24px rgba(200, 30, 91, .6);
  border-color: var(--pink);
}

.leckerei__bild {
  aspect-ratio: 4 / 3;
  width: 100%;
  object-fit: cover;
  background: var(--rosa-pastell);
  border-bottom: 2.5px solid var(--pink-hell);
}

/* Platzhalter, solange kein Foto hinterlegt ist */
.leckerei__platzhalter {
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-bottom: 2.5px solid var(--pink-hell);
  background:
    radial-gradient(ellipse 60% 50% at 30% 25%, rgba(255,255,255,.9), transparent 60%),
    linear-gradient(150deg, var(--rosa-pastell), var(--rosa-tief));
}
.leckerei__platzhalter svg {
  width: clamp(112px, 52%, 178px);
  height: auto;
  filter: drop-shadow(0 5px 8px rgba(200, 30, 91, .16));
}

.leckerei__inhalt { padding: 1.3rem 1.4rem 1.6rem; }
.leckerei__inhalt h3 { margin-bottom: .35em; }
.leckerei__inhalt p { margin: 0; font-size: .98rem; color: var(--text); }

/* ---------- 10. Info-Kästen ---------- */
.hinweis {
  background: var(--creme);
  border: 2.5px dashed var(--pink);
  border-radius: 20px;
  padding: clamp(1.3rem, 1rem + 1.5vw, 2rem);
  margin-inline: auto;
  max-width: 68ch;
}
.hinweis h3 { margin-top: 0; }
.hinweis p:last-child { margin-bottom: 0; }

.faq { max-width: 74ch; margin-inline: auto; display: grid; gap: .9rem; }

.faq details {
  background: var(--weiss);
  border: 2.5px solid var(--pink-hell);
  border-radius: 18px;
  padding: .3rem 1.3rem;
  box-shadow: var(--schatten-weich);
}
.faq details[open] { border-color: var(--pink); }
.faq summary {
  cursor: pointer;
  font-weight: 700;
  padding: .95rem 0;
  list-style: none;
  display: flex; align-items: center; gap: .7rem;
  color: var(--pink-dunkel);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before {
  content: "♥";
  color: var(--pink);
  font-size: 1.1em;
  transition: transform .2s ease;
  flex: none;
}
.faq details[open] summary::before { transform: rotate(20deg) scale(1.15); }
.faq details p { margin: 0 0 1rem; padding-left: 1.85rem; }

/* ---------- 11. Formular ---------- */
.formular { max-width: 62ch; margin-inline: auto; }

.feld { margin-bottom: 1.4rem; }

.feld label,
.feldgruppe > legend {
  display: block;
  font-weight: 700;
  margin-bottom: .45rem;
  color: var(--text);
}
.feld .pflicht { color: var(--pink-dunkel); }

.feld input[type="text"],
.feld input[type="email"],
.feld input[type="number"],
.feld textarea {
  width: 100%;
  font: inherit;
  color: var(--text);
  background: var(--weiss);
  border: 2.5px solid var(--pink-hell);
  border-radius: 14px;
  padding: .8em 1em;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.feld textarea { min-height: 9rem; resize: vertical; }

.feld input:focus, .feld textarea:focus {
  border-color: var(--pink);
  box-shadow: 0 0 0 4px rgba(228, 80, 138, .18);
  outline: none;
}
.feld input[aria-invalid="true"], .feld textarea[aria-invalid="true"] {
  border-color: #c0392b;
  background: #fff6f5;
}

.feld__fehler {
  display: block;
  margin-top: .4rem;
  color: #a5281b;
  font-size: .92rem;
  font-weight: 600;
}
.feld__hilfe { display: block; margin-top: .4rem; font-size: .88rem; color: var(--text-leise); }

/* Auswahl-Chips für die Interessen */
.feldgruppe { border: 0; padding: 0; margin: 0 0 1.6rem; }
.chips { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .3rem; }

.chip input {
  position: absolute; opacity: 0; width: 0; height: 0;
}
.chip span {
  display: inline-block;
  background: var(--weiss);
  border: 2.5px solid var(--pink-hell);
  border-radius: 999px;
  padding: .5em 1.1em;
  cursor: pointer;
  font-size: .95rem;
  font-weight: 600;
  transition: all .18s ease;
  user-select: none;
}
.chip:hover span { border-color: var(--pink); }
.chip input:checked + span {
  background: var(--pink);
  border-color: var(--pink-dunkel);
  color: var(--weiss);
  transform: scale(1.03);
}
.chip input:focus-visible + span { outline: 3px solid var(--pink-dunkel); outline-offset: 3px; }

/* Checkboxen mit Text */
.haken {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .8rem;
  align-items: start;
  margin-bottom: 1.1rem;
  font-size: .96rem;
  line-height: 1.55;
  cursor: pointer;
}
.haken input {
  appearance: none;
  width: 1.5rem; height: 1.5rem;
  margin: .15rem 0 0;
  border: 2.5px solid var(--pink);
  border-radius: 7px;
  background: var(--weiss);
  cursor: pointer;
  display: grid; place-content: center;
  flex: none;
  transition: background-color .15s ease;
}
.haken input::before {
  content: "";
  width: .8rem; height: .8rem;
  transform: scale(0);
  transition: transform .15s ease-in-out;
  background: var(--weiss);
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}
.haken input:checked { background: var(--pink); }
.haken input:checked::before { transform: scale(1); }
.haken input[aria-invalid="true"] { border-color: #c0392b; }

/* Honeypot – für Menschen unsichtbar, für Bots verlockend.
   Absichtlich nicht display:none, damit einfache Bots es trotzdem ausfüllen. */
.honigtopf {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important; height: 1px !important;
  overflow: hidden !important;
}

/* Meldungen */
.meldung {
  border-radius: 18px;
  padding: 1.2rem 1.4rem;
  margin-bottom: 1.8rem;
  border: 2.5px solid;
  display: flex; gap: .9rem; align-items: flex-start;
}
.meldung__icon { font-size: 1.5rem; line-height: 1.2; flex: none; }
.meldung p { margin: .2rem 0 0; }
.meldung strong { display: block; font-size: 1.1rem; }

.meldung--gut    { background: #f0fbf3; border-color: #2f8f5b; color: #1d6b41; }
.meldung--fehler { background: #fff5f4; border-color: #c0392b; color: #93261a; }

.dankeschoen {
  text-align: center;
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}
.dankeschoen h2 { margin-bottom: .3em; }

/* ---------- 12. Fußbereich ---------- */
.fuss {
  padding-block: clamp(2.5rem, 2rem + 2vw, 4rem) 2rem;
  text-align: center;
}
.fuss__karte { padding-block: clamp(2rem, 1.5rem + 2vw, 3rem); }

.fuss__kontakt {
  display: flex; flex-wrap: wrap; gap: .6rem 2rem;
  justify-content: center;
  margin: 0 0 1.6rem;
  padding: 0;
  list-style: none;
}
.fuss__kontakt li { display: flex; align-items: center; gap: .6rem; }
.fuss__kontakt svg { width: 24px; height: 24px; flex: none; color: var(--pink-dunkel); }
.fuss__kontakt a { font-weight: 700; }

.fuss__links {
  display: flex; flex-wrap: wrap; gap: .5rem 1.6rem;
  justify-content: center;
  margin: 0 0 1.2rem; padding: 0; list-style: none;
  font-size: .95rem;
}

.fuss__klein { font-size: .85rem; color: var(--text-leise); margin: 0; }

/* ---------- 13. Rechtsseiten (Impressum / Datenschutz) ---------- */
.rechtsseite { padding-block: clamp(2rem, 1.5rem + 3vw, 4rem); }

.rechtstext {
  background: var(--weiss);
  border-radius: 24px;
  border: 2.5px solid var(--pink-hell);
  box-shadow: var(--schatten-weich);
  padding: clamp(1.6rem, 1.2rem + 3vw, 3.5rem);
  max-width: 78ch;
  margin-inline: auto;
}
.rechtstext h2 {
  font-size: clamp(1.5rem, 1.25rem + 1.1vw, 2rem);
  margin-top: 2.2em;
  text-shadow: 1px 1px 0 var(--pink-dunkel);
}
.rechtstext h2:first-of-type { margin-top: .8em; }
.rechtstext h3 { font-size: 1.15rem; margin-top: 1.8em; }
.rechtstext dl { margin: 0 0 1.5rem; }
.rechtstext dt { font-weight: 700; margin-top: .9rem; }
.rechtstext dd { margin: 0 0 .2rem; }
.rechtstext ul { padding-left: 1.3rem; }
.rechtstext li { margin-bottom: .5rem; }
.rechtstext .stand { color: var(--text-leise); font-size: .9rem; }

.zurueck {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 700; text-decoration: none;
  margin-bottom: 1.5rem;
}
.zurueck:hover { text-decoration: underline; }

/* ---------- 14. Druckansicht ---------- */
@media print {
  body { background: #fff; }
  .deko, .karte__rahmen, .skip-link, .knopf-reihe, form { display: none !important; }
  .karte, .rechtstext { box-shadow: none; border: 1px solid #ccc; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; }
}