/* ============================================================
   Denises Wunschliste
   Visuelles Thema: warmes Flatlay – Puder, Leinen, Creme, Gold.
   Die Palette ist aus dem Kopfbild gezogen (Rosé #c3a795,
   Taupe #a58a76, Ton #8c6952, Espresso #4a3a2f).
   Nur Gestaltung – alle Klassen- und ID-Namen, die js/app.js
   verwendet, bleiben unverändert erhalten.
   ============================================================ */

/* ---------- 1. Farben, Maße, Schrift ------------------------ */

:root {
  /* Warme Neutrale – die Grundfläche der Seite */
  --porcelain:   #faf5f0;   /* Seitenhintergrund               */
  --paper:       #fffcf9;   /* Karten                          */
  --linen:       #f3e9e0;   /* zweite Fläche, ruhige Blöcke    */
  --shell:       #e9dcd1;   /* Ränder                          */
  --shell-deep:  #d9c6b7;   /* Ränder betont, Schalterspur     */

  /* Puder – die Leitfarbe, direkt aus dem Foto */
  --rose:        #a76a63;   /* Primärfarbe, Buttons            */
  --rose-dark:   #8e554f;
  --rose-mid:    #c08d86;
  --rose-soft:   #e6c6bf;
  --rose-veil:   #f7ebe7;

  /* Gold und Ton – Akzente, Linien, Status „offen"            */
  --gold:        #b9954f;
  --gold-soft:   #e0cda4;
  --gold-veil:   #f7f0e2;
  --clay:        #8c6952;

  /* Dunkel – Admin-Leiste, Kontrast wie Hantel und Matte      */
  --espresso:    #3c322b;
  --espresso-lo: #2b231e;

  /* Text */
  --ink:         #3a302a;
  --ink-soft:    #6d5c50;
  --ink-faint:   #8d7b6e;
  --on-dark:     #f6efe8;
  --on-dark-soft:#d5c4b6;

  /* Form */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-pill: 999px;

  /* Schatten in Warmbraun statt Schwarz: wirkt wie Licht auf Papier */
  --shadow-sm:
    0 1px 1px rgba(74, 58, 47, .04),
    0 2px 6px rgba(74, 58, 47, .05);
  --shadow-md:
    0 1px 2px rgba(74, 58, 47, .05),
    0 4px 10px -4px rgba(74, 58, 47, .10),
    0 14px 30px -16px rgba(74, 58, 47, .24);
  --shadow-lg:
    0 2px 4px rgba(74, 58, 47, .06),
    0 10px 24px -12px rgba(74, 58, 47, .18),
    0 32px 60px -30px rgba(74, 58, 47, .34);

  --wrap: 1140px;
  --gutter: clamp(16px, 4vw, 40px);

  --font-display: "Playfair Display", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --ring: 0 0 0 3px rgba(167, 106, 99, .20), 0 0 0 1.5px var(--rose);
}

/* ---------- 2. Grundlagen ----------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background-color: var(--porcelain);
  /* Zwei sehr weiche Lichtflecken – dieselbe diffuse Beleuchtung
     wie im Kopfbild, kostet kein einziges Byte Bilddaten. */
  background-image:
    radial-gradient(1200px 620px at 12% -6%,  rgba(255, 249, 243, .95), transparent 62%),
    radial-gradient(900px 520px at 92% 8%,   rgba(230, 198, 191, .30), transparent 60%),
    radial-gradient(1000px 700px at 50% 106%, rgba(224, 205, 164, .22), transparent 62%);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.62;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -.012em;
  margin: 0;
}

a { color: var(--clay); }

img { max-width: 100%; }

:focus-visible {
  outline: 2px solid var(--rose);
  outline-offset: 2px;
  border-radius: 4px;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

/* ---------- 3. Satinband ------------------------------------ */
/* Ein Band statt eines Musters: senkrechter Verlauf für den Glanz,
   darüber ein sehr feiner Kettfaden-Raster und zwei Goldkanten.
   Ruhig genug, dass es die Seite nur einfasst statt sie zu teilen. */

.tartan,
.tartan-band {
  background-color: #e2beb6;
  background-image:
    /* Kettfäden: 1px hell, 2px Lücke – aus zwei Metern Abstand nur Textur */
    repeating-linear-gradient(90deg,
      rgba(255, 252, 249, .22) 0px, rgba(255, 252, 249, .22) 1px,
      rgba(140, 105,  82, .07) 1px, rgba(140, 105,  82, .07) 3px),
    /* Satinglanz: oben Licht, in der Mitte die Kante, unten Schatten */
    linear-gradient(180deg,
      #f0dad3  0%,
      #e7c8c0 26%,
      #d9aca3 52%,
      #e3bdb4 74%,
      #cf9f96 100%);
}

.tartan-band {
  height: 20px;
  box-shadow:
    inset 0  1.4px 0 rgba(224, 205, 164, .85),   /* Goldkante oben  */
    inset 0 -1.4px 0 rgba(185, 149,  79, .55),   /* Goldkante unten */
    inset 0  3px 6px rgba(255, 252, 249, .30),
    inset 0 -3px 7px rgba(120,  84,  70, .18);
}

/* ---------- 5. Kopfbild ------------------------------------- */

.hero {
  position: relative;
  z-index: 1;
  isolation: isolate;
  min-height: clamp(360px, 44vw, 520px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #e6d8cc;
  overflow: hidden;
}

/* Das Foto aus assets/. Fehlt es, bleibt die Ebene leer und die
   gezeichnete Szene darunter übernimmt. */
.hero-photo {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: url("../assets/hero.jpg");
  background-image: image-set(url("../assets/hero.webp") type("image/webp"),
                              url("../assets/hero.jpg")  type("image/jpeg"));
  background-size: cover;
  background-position: 58% 52%;
  /* eine Spur wärmer und weicher, damit die Schrift ruhig steht */
  filter: saturate(1.04) contrast(.99);
  transform: scale(1.02);
}

.hero-scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  line-height: 0;
  pointer-events: none;
}

.hero-scene svg { display: block; width: 100%; height: 100%; }

/* Feines Korn über allem: nimmt dem Verlauf das Digitale */
.hero-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='180'%20height='180'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.85'%20numOctaves='4'%20stitchTiles='stitch'%20seed='9'/%3E%3CfeColorMatrix%20type='saturate'%20values='0'/%3E%3C/filter%3E%3Crect%20width='180'%20height='180'%20filter='url(%23n)'%20opacity='.55'/%3E%3C/svg%3E") repeat;
  background-size: 180px 180px;
  mix-blend-mode: overlay;
  opacity: .18;
}

/* Heller Schleier, mittig aufgezogen: der zentrierte Titel steht in
   der Bildmitte, also liegt das Licht auch dort. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    /* enger Lichthof genau hinter dem Titelblock */
    radial-gradient(42% 52% at 50% 44%,
      rgba(253, 248, 243, .90)  0%,
      rgba(253, 248, 243, .66) 46%,
      rgba(253, 248, 243, .26) 76%,
      rgba(253, 248, 243, 0)  100%),
    /* nur ein Hauch über dem ganzen Bild, damit das Foto Foto bleibt */
    linear-gradient(180deg,
      rgba(252, 246, 241, .26) 0%,
      rgba(252, 246, 241, .10) 42%,
      rgba(252, 246, 241, .22) 100%);
  pointer-events: none;
}

/* Unterkante weich in die Seite laufen lassen */
.hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 44%;
  z-index: 2;
  background: linear-gradient(180deg, rgba(250, 245, 240, 0), rgba(250, 245, 240, .55));
  pointer-events: none;
}

.hero-inner {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: clamp(34px, 5vw, 62px) var(--gutter);
  text-align: center;
}

.hero-text {
  max-width: 38rem;
  margin-inline: auto;
}

.hero h1 {
  margin-top: 0;
  font-size: clamp(2.5rem, 6.4vw, 4.2rem);
  letter-spacing: -.028em;
  color: #33291f;
  text-wrap: balance;
  text-shadow:
    0 1px 2px  rgba(255, 251, 246, .95),
    0 0  22px rgba(255, 250, 244, .8);
}

/* Ein feiner Goldstrich als Ruhepunkt zwischen Titel und Text */
.hero h1::after {
  content: "";
  display: block;
  width: 74px;
  height: 1.6px;
  margin: 20px auto 0;
  border-radius: 2px;
  background: linear-gradient(90deg,
    rgba(185, 149, 79, 0), var(--gold), rgba(185, 149, 79, 0));
}

.lede {
  margin: 18px auto 0;
  max-width: 32rem;
  font-size: clamp(.98rem, 1.4vw, 1.08rem);
  line-height: 1.66;
  color: #453930;
  text-shadow:
    0 1px 2px  rgba(255, 251, 246, .95),
    0 0  16px rgba(255, 250, 244, .9);
}

.hero .tartan-band {
  position: relative;
  z-index: 4;
  margin-top: auto;
}

/* ---------- 6. Hauptbereich --------------------------------- */

main {
  position: relative;
  z-index: 1;
  padding-block: clamp(34px, 5vw, 60px) clamp(44px, 7vw, 80px);
}

/* Kein Einblenden: Inhalte stehen sofort da. Die Klassen bleiben,
   weil js/app.js sie setzt – sie haben nur keine Wirkung mehr. */
.reveal, .reveal.in { opacity: 1; transform: none; }

/* Die Parallaxe des Titelblocks stilllegen, ohne app.js anzufassen */
.hero-text {
  transform: none !important;
  opacity: 1 !important;
}

/* ---------- 7. Admin-Leiste --------------------------------- */

.adminbar {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  margin: 0 0 24px;
  padding: 13px 16px 13px 24px;
  border-radius: var(--r-md);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(0, 0, 0, .1)),
    linear-gradient(180deg, #453a32, var(--espresso-lo));
  color: var(--on-dark);
  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 246, 238, .10);
  overflow: hidden;
}

/* Bandkante links: dasselbe Satinband, hochkant */
.adminbar::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 7px;
  background-image:
    repeating-linear-gradient(0deg,
      rgba(255, 252, 249, .22) 0px, rgba(255, 252, 249, .22) 1px,
      rgba(90, 62, 50, .10) 1px, rgba(90, 62, 50, .10) 3px),
    linear-gradient(90deg, #e7c8c0, #cf9f96 55%, #b07d75);
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, .28);
}

.adminbar-label {
  flex: 1 1 auto;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--on-dark-soft);
}

.adminbar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* ---------- 8. Buttons -------------------------------------- */

button {
  font: inherit;
  cursor: pointer;
}

.primary, .ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 21px;
  border-radius: var(--r-pill);
  border: 1.5px solid transparent;
  font-family: var(--font-body);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .012em;
  text-align: center;
  transition: background-color .18s ease, color .18s ease,
              border-color .18s ease, box-shadow .18s ease, transform .12s ease;
}

.primary {
  background: linear-gradient(180deg, #b4746d, var(--rose));
  border-color: var(--rose);
  color: #fffaf6;
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, .22);
}

.primary:hover {
  background: linear-gradient(180deg, #a4645d, var(--rose-dark));
  border-color: var(--rose-dark);
  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, .18);
  transform: translateY(-1px);
}

.primary:active {
  transform: translateY(0);
  background: #85504a;
  box-shadow: inset 0 2px 5px rgba(52, 30, 26, .3);
}

.primary:focus-visible { outline: none; box-shadow: var(--ring); }

.primary:disabled {
  background: var(--shell-deep);
  border-color: var(--shell-deep);
  color: #8b7a6c;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Der Gegenpol: alles, was zurücknimmt oder abbricht – Ton statt Puder */
.ghost {
  background: transparent;
  border-color: rgba(140, 105, 82, .42);
  color: var(--clay);
}

.ghost:hover {
  background: rgba(140, 105, 82, .09);
  border-color: var(--clay);
}

.ghost:active { background: rgba(140, 105, 82, .17); }

.ghost:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(140, 105, 82, .18), 0 0 0 1.5px var(--clay);
}

/* auf dunklem Grund (Admin-Leiste) */
.adminbar .ghost {
  border-color: rgba(246, 239, 232, .34);
  color: var(--on-dark);
}

.adminbar .ghost:hover {
  background: rgba(246, 239, 232, .12);
  border-color: rgba(246, 239, 232, .7);
}

.primary.small, .ghost.small {
  padding: 8px 16px;
  font-size: .87rem;
}

.linkish {
  padding: 2px 1px;
  border: 0;
  background: none;
  color: var(--clay);
  font-size: .9rem;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(140, 105, 82, .45);
  transition: color .15s ease, text-decoration-color .15s ease;
}

.linkish:hover {
  color: var(--rose);
  text-decoration-color: var(--rose);
}

.icon-btn {
  padding: 6px 13px;
  border: 1px solid var(--shell);
  border-radius: var(--r-pill);
  background: var(--linen);
  color: var(--ink-soft);
  font-size: .8rem;
  font-weight: 500;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.icon-btn:hover {
  background: var(--rose-veil);
  border-color: var(--rose-soft);
  color: var(--rose-dark);
}

.icon-btn:active { background: var(--rose-soft); }

/* ---------- 9. Formular-Panel ------------------------------- */

.panel {
  position: relative;
  margin: 0 0 28px;
  padding: clamp(24px, 3.6vw, 34px);
  border: 1px solid var(--shell);
  border-radius: var(--r-lg);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .8), rgba(255, 255, 255, 0) 140px),
    var(--paper);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

/* Bandkante oben */
.panel::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 4px;
  background-image:
    repeating-linear-gradient(90deg,
      rgba(255, 252, 249, .22) 0px, rgba(255, 252, 249, .22) 1px,
      rgba(140, 105, 82, .07) 1px, rgba(140, 105, 82, .07) 3px),
    linear-gradient(180deg, #edd2cb, #d3a89f);
}

.panel h2 {
  margin: 6px 0 22px;
  font-size: clamp(1.45rem, 3vw, 1.8rem);
  color: #33291f;
}

.field { margin: 0 0 17px; }

.field label {
  display: block;
  margin: 0 0 7px;
  font-size: .86rem;
  font-weight: 600;
  letter-spacing: .012em;
  color: var(--ink-soft);
}

.req { color: var(--rose); }

.hint {
  font-weight: 400;
  color: var(--ink-faint);
  font-size: .8rem;
}

input[type="text"],
input[type="url"],
input[type="password"] {
  width: 100%;
  padding: 12px 15px;
  border: 1.5px solid var(--shell);
  border-radius: var(--r-sm);
  background: #fffefc;
  color: var(--ink);
  font: inherit;
  font-size: .97rem;
  box-shadow: inset 0 1px 2px rgba(140, 105, 82, .05);
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

input::placeholder { color: #a5958a; }

input[type="text"]:hover,
input[type="url"]:hover,
input[type="password"]:hover { border-color: var(--shell-deep); }

input[type="text"]:focus,
input[type="url"]:focus,
input[type="password"]:focus {
  outline: none;
  border-color: var(--rose-mid);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(167, 106, 99, .15);
}

.row {
  display: grid;
  grid-template-columns: minmax(120px, 200px) 1fr;
  gap: 0 18px;
  align-items: end;
}

.row .grow { min-width: 0; }

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 14px;
  margin-top: 24px;
  padding-top: 21px;
  border-top: 1px solid var(--shell);
}

.form-msg {
  font-size: .89rem;
  font-weight: 500;
  color: var(--ink-soft);
}

.form-msg.ok    { color: #7d6420; }
.form-msg.error { color: var(--rose-dark); }

/* Bildsuche */
.imgstatus {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin: -4px 0 19px;
  padding: 12px 15px;
  border: 1px solid var(--shell);
  border-left: 4px solid var(--shell-deep);
  border-radius: var(--r-sm);
  background: var(--linen);
  font-size: .88rem;
  color: var(--ink-soft);
}

.imgstatus.found  { border-left-color: var(--gold);      background: var(--gold-veil); }
.imgstatus.failed { border-left-color: var(--rose-mid);  background: var(--rose-veil); }

#image-preview {
  width: 46px;
  height: 46px;
  border-radius: var(--r-sm);
  border: 1px solid var(--shell);
  object-fit: cover;
  background: #fff;
}

#image-status-text { flex: 1 1 160px; }

/* ---------- 10. Hinweise und leere Liste -------------------- */

.notice {
  margin: 0 0 26px;
  padding: 16px 20px;
  border: 1px solid rgba(167, 106, 99, .26);
  border-left: 5px solid var(--rose);
  border-radius: var(--r-md);
  background: var(--rose-veil);
  color: #6d4340;
  font-size: .95rem;
  line-height: 1.6;
  box-shadow: var(--shadow-sm);
}

.notice strong { color: var(--rose-dark); }

.notice code {
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(167, 106, 99, .11);
  font-size: .88em;
}

.empty {
  margin: 30px 0 0;
  padding: 46px 24px;
  border: 1.5px dashed var(--shell-deep);
  border-radius: var(--r-lg);
  background: rgba(255, 252, 249, .66);
  text-align: center;
  color: var(--ink-soft);
  font-size: 1.02rem;
}

/* kleine Schleife über dem leeren Zustand statt einer nackten Zeile */
.empty::before {
  content: "";
  display: block;
  width: 34px;
  height: 34px;
  margin: 0 auto 12px;
  opacity: .55;
  background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a76a63' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 12c-1.6-2.4-3.2-3.6-4.9-3.6a2.9 2.9 0 0 0 0 5.8c1.7 0 3.3-1.2 4.9-3.6z'/%3E%3Cpath d='M12 12c1.6-2.4 3.2-3.6 4.9-3.6a2.9 2.9 0 0 1 0 5.8c-1.7 0-3.3-1.2-4.9-3.6z'/%3E%3Cpath d='M12 12l-2.4 7.4M12 12l2.4 7.4'/%3E%3Ccircle cx='12' cy='12' r='1.5'/%3E%3C/svg%3E");
}

/* ---------- 11. Wunschliste: Zeilen untereinander ----------- */

.list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.wish {
  position: relative;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  gap: 12px 22px;
  align-items: center;
  padding: 34px 20px 18px;
  border: 1px solid var(--shell);
  border-radius: var(--r-lg);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 90px),
    var(--paper);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}

.wish:hover {
  transform: translateY(-2px);
  border-color: var(--rose-soft);
  box-shadow: var(--shadow-md);
}

.wish:focus-within {
  border-color: var(--rose-mid);
  box-shadow: var(--shadow-md);
}

.thumb {
  grid-row: 1;
  width: 96px;
  height: 96px;
  object-fit: contain;
  padding: 8px;
  border: 1px solid var(--shell);
  border-radius: var(--r-md);
  background: #fffdfb;
  box-shadow: inset 0 1px 3px rgba(140, 105, 82, .07);
  transition: transform .3s ease;
}

.wish:hover .thumb { transform: scale(1.03); }

/* Ohne Produktbild steht an gleicher Stelle ein Leinenfeld mit
   Schleife, damit alle Zeilen sauber in einer Flucht bleiben. */
.wish.no-image::before {
  content: "";
  grid-row: 1;
  width: 96px;
  height: 96px;
  border-radius: var(--r-md);
  border: 1px solid var(--shell);
  background-color: var(--linen);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23bd9086' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 12c-1.6-2.4-3.2-3.6-4.9-3.6a2.9 2.9 0 0 0 0 5.8c1.7 0 3.3-1.2 4.9-3.6z'/%3E%3Cpath d='M12 12c1.6-2.4 3.2-3.6 4.9-3.6a2.9 2.9 0 0 1 0 5.8c-1.7 0-3.3-1.2-4.9-3.6z'/%3E%3Cpath d='M12 12l-2.4 7.4M12 12l2.4 7.4'/%3E%3Ccircle cx='12' cy='12' r='1.5'/%3E%3C/svg%3E"),
    /* feines Leinengewebe: zwei gekreuzte Rippen */
    repeating-linear-gradient(90deg, rgba(140, 105, 82, .045) 0 1px, rgba(0, 0, 0, 0) 1px 5px),
    repeating-linear-gradient(0deg,  rgba(140, 105, 82, .045) 0 1px, rgba(0, 0, 0, 0) 1px 5px);
  background-size: 42px 42px, auto, auto;
  background-position: center, 0 0, 0 0;
  background-repeat: no-repeat, repeat, repeat;
  box-shadow: inset 0 1px 3px rgba(140, 105, 82, .08);
}

.wish-body { min-width: 0; }

.wish-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.24;
  letter-spacing: -.01em;
  color: #33291f;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

.wish-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px 10px;
  margin: 10px 0 0;
  font-size: .87rem;
}

.price {
  display: inline-flex;
  align-items: center;
  padding: 3px 12px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(185, 149, 79, .3);
  background: var(--gold-veil);
  color: #7d6420;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}

.wish-meta a {
  color: var(--clay);
  text-decoration: none;
  border-bottom: 1px solid rgba(140, 105, 82, .35);
  padding-bottom: 1px;
  overflow-wrap: anywhere;
  transition: color .15s ease, border-color .15s ease;
}

.wish-meta a:hover {
  color: var(--rose);
  border-bottom-color: var(--rose);
}

/* Status: „Offen" für freie Zeilen, der Badge für vergebene – beide
   sitzen an derselben Stelle oben rechts auf der Karte. */
.wish:not(.taken)::after {
  content: "Offen";
  position: absolute;
  top: 13px;
  right: 18px;
  padding: 3px 12px 3px 23px;
  border: 1px solid rgba(185, 149, 79, .38);
  border-radius: var(--r-pill);
  background: var(--gold-veil)
    radial-gradient(circle 3.4px at 12px 50%, var(--gold) 98%, rgba(0, 0, 0, 0) 100%) no-repeat;
  color: #7d6420;
  font-size: .71rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.badge {
  position: absolute;
  top: 13px;
  right: 18px;
  display: inline-flex;
  align-items: center;
  padding: 3px 12px;
  border-radius: var(--r-pill);
  background: rgba(167, 106, 99, .12);
  border: 1px solid rgba(167, 106, 99, .28);
  color: var(--rose-dark);
  font-size: .71rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.wish-note {
  margin: 10px 0 0;
  color: var(--ink-soft);
  font-size: .88rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.wish-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  min-width: 190px;
}

.admin-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

/* vergebene Wünsche treten zurück, bleiben aber gut lesbar */
.wish.taken {
  background: #f6efe9;
  border-color: var(--shell-deep);
  box-shadow: none;
}

.wish.taken:hover { transform: none; box-shadow: var(--shadow-sm); }

.wish.taken .thumb { opacity: .62; }

.wish.taken .wish-title { color: var(--ink-soft); }

/* ---------- 12. Übersicht unter der Liste ------------------- */

.summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(10px, 1.6vw, 16px);
  margin: clamp(28px, 4vw, 42px) 0 0;
}

.stat {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 19px 20px 17px;
  border: 1px solid var(--shell);
  border-radius: var(--r-md);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .75), rgba(255, 255, 255, 0) 70px),
    var(--paper);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}

.stat:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.stat::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: var(--clay);
}

.stat:nth-child(2)::before { background: var(--gold); }
.stat:nth-child(3)::before { background: var(--rose); }

.stat-icon {
  display: inline-flex;
  margin-bottom: 8px;
  color: var(--ink-faint);
}

.stat:nth-child(1) .stat-icon { color: var(--clay); }
.stat:nth-child(2) .stat-icon { color: var(--gold); }
.stat:nth-child(3) .stat-icon { color: var(--rose); }

.stat-num {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4.4vw, 2.4rem);
  font-weight: 700;
  line-height: 1;
  color: #33291f;
  font-variant-numeric: tabular-nums;
}

.stat-label {
  font-size: .84rem;
  font-weight: 500;
  color: var(--ink-soft);
}

/* ---------- 13. Schalter unter der Übersicht ---------------- */

.toolbar {
  display: flex;
  justify-content: center;
  margin: 18px 0 0;
}

.switch {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 8px 17px 8px 12px;
  border: 1px solid var(--shell);
  border-radius: var(--r-pill);
  background: var(--paper);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  user-select: none;
  font-size: .89rem;
  font-weight: 500;
  color: var(--ink-soft);
  transition: border-color .15s ease, color .15s ease;
}

.switch:hover {
  border-color: var(--rose-soft);
  color: var(--ink);
}

.switch input {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 42px;
  height: 24px;
  margin: 0;
  border: 0;
  border-radius: var(--r-pill);
  background-color: var(--shell-deep);
  background-image: radial-gradient(circle 8.5px at 12px 12px, #fffdfb 99%, rgba(0, 0, 0, 0) 100%);
  background-repeat: no-repeat;
  background-position: 0 0;
  box-shadow: inset 0 1px 3px rgba(140, 105, 82, .28);
  cursor: pointer;
  transition: background-color .2s ease, background-position .2s cubic-bezier(.3, .8, .3, 1);
}

.switch input:checked {
  background-color: var(--rose);
  background-position: 18px 0;
}

.switch input:focus-visible {
  outline: none;
  box-shadow: inset 0 1px 3px rgba(140, 105, 82, .28), var(--ring);
}

/* ---------- 13b. Kleine Symbole in den Zeilen ---------------- */

.price::before,
.wish-meta a::before,
.wish-note::before {
  content: "";
  display: inline-block;
  flex: none;
  width: 15px;
  height: 15px;
  margin-right: 7px;
  vertical-align: -3px;
  background: center / contain no-repeat;
}

.price::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237d6420' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.4'/%3E%3Cpath d='M12 7.6v8.8M14.4 9.6a2.6 2.6 0 0 0-4.6 1.4c0 2.6 4.8 1.4 4.8 4a2.6 2.6 0 0 1-4.7 1.3'/%3E%3C/svg%3E"); }

.wish-meta a::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238c6952' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.2 13.8a4 4 0 0 0 5.7 0l2.6-2.6a4 4 0 1 0-5.7-5.7l-1.5 1.5'/%3E%3Cpath d='M13.8 10.2a4 4 0 0 0-5.7 0l-2.6 2.6a4 4 0 1 0 5.7 5.7l1.5-1.5'/%3E%3C/svg%3E"); }

.wish-note::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238d7b6e' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 6.5H8.8L3.5 12l5.3 5.5h11.7z'/%3E%3Ccircle cx='7.6' cy='12' r='1.1' fill='%238d7b6e' stroke='none'/%3E%3C/svg%3E"); }

.wish-note {
  display: flex;
  align-items: flex-start;
  gap: 0;
}

.wish-note::before { margin-top: 3px; }

/* Symbol im Aktionsbutton */
.wish-actions > .primary::before,
.wish-actions > .ghost::before {
  content: "";
  width: 16px;
  height: 16px;
  flex: none;
  background: center / contain no-repeat;
}

/* Reservieren: eine kleine Schleife */
.wish-actions > .primary::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fffaf6' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 12c-1.6-2.4-3.2-3.6-4.9-3.6a2.9 2.9 0 0 0 0 5.8c1.7 0 3.3-1.2 4.9-3.6z'/%3E%3Cpath d='M12 12c1.6-2.4 3.2-3.6 4.9-3.6a2.9 2.9 0 0 1 0 5.8c-1.7 0-3.3-1.2-4.9-3.6z'/%3E%3Cpath d='M12 12l-2.4 7.4M12 12l2.4 7.4'/%3E%3C/svg%3E"); }

/* Aufheben: der Pfeil zurück */
.wish-actions > .ghost::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238c6952' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9h9.5a5.5 5.5 0 1 1 0 11H8'/%3E%3Cpath d='M7.5 5L4 9l3.5 4'/%3E%3C/svg%3E"); }

/* ---------- 14. Reservieren / Aufheben ---------------------- */

.wish-lock {
  grid-column: 1 / -1;
  margin: 4px 0 0;
  padding: 15px 17px;
  border: 1px solid var(--shell);
  border-radius: var(--r-md);
  background: linear-gradient(180deg, var(--rose-veil), #f6ece6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
}

.lock-hint {
  margin: 0 0 12px;
  font-size: .84rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

.lock-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
}

.lock-line input {
  flex: 1 1 160px;
  max-width: 320px;
  min-width: 0;
  padding: 10px 13px;
  font-size: .92rem;
}

.lock-msg {
  margin: 10px 0 0;
  font-size: .84rem;
  font-weight: 500;
  color: var(--ink-soft);
}

.lock-msg:empty { display: none; }

.lock-msg.error { color: var(--rose-dark); }

/* ---------- 15. Platzhalter beim Laden ---------------------- */

.skeleton {
  height: 130px;
  border: 1px solid var(--shell);
  border-radius: var(--r-lg);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .55), rgba(255, 255, 255, 0))
      0 0 / 220px 100% no-repeat,
    var(--linen);
  animation: shimmer 1.5s ease-in-out infinite;
}

@keyframes shimmer {
  from { background-position: -220px 0; }
  to   { background-position: calc(100% + 220px) 0; }
}

/* ---------- 17. Seitenabschluss ----------------------------- */

footer {
  position: relative;
  z-index: 1;
  padding: clamp(30px, 5vw, 50px) var(--gutter) clamp(26px, 4vw, 42px);
  text-align: center;
}

.login { display: inline-block; }

#login-open {
  color: var(--ink-faint);
  font-size: .84rem;
  font-weight: 400;
}

#login-open:hover { color: var(--rose); }

#login-form {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 9px;
  max-width: 420px;
  margin: 0 auto;
  padding: 15px 17px;
  border: 1px solid var(--shell);
  border-radius: var(--r-md);
  background: var(--paper);
  box-shadow: var(--shadow-sm);
}

#login-pw {
  flex: 1 1 150px;
  min-width: 0;
  padding: 10px 14px;
}

.login-msg {
  flex: 1 1 100%;
  margin: 2px 0 0;
  font-size: .84rem;
  color: var(--ink-soft);
}

.login-msg:empty { display: none; }

.login-msg.error { color: var(--rose-dark); }

/* Das Band schließt die Seite ab */
body > .tartan-band {
  position: relative;
  z-index: 1;
}

/* ---------- 18. Schmale Bildschirme ------------------------- */

@media (max-width: 860px) {
  /* Aktionen rutschen unter Bild und Text, statt die Zeile zu quetschen */
  .wish { grid-template-columns: 84px minmax(0, 1fr); }

  .thumb, .wish.no-image::before { width: 84px; height: 84px; }

  .wish.no-image::before { background-size: 38px 38px, auto, auto; }

  .wish-actions {
    grid-column: 1 / -1;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    min-width: 0;
  }

  .wish-actions > .primary,
  .wish-actions > .ghost { flex: 1 1 200px; }

  .admin-row { flex: 1 1 100%; }
}

@media (max-width: 860px) {
  .hero::before {
    background:
      radial-gradient(78% 46% at 50% 34%,
        rgba(253, 248, 243, .93) 0%,
        rgba(253, 248, 243, .72) 52%,
        rgba(253, 248, 243, .18) 100%),
      linear-gradient(180deg,
        rgba(252, 246, 241, .3), rgba(252, 246, 241, .12) 50%,
        rgba(252, 246, 241, .3));
  }
}

@media (max-width: 760px) {
  .hero-photo {
    background-image: url("../assets/hero-small.jpg");
    background-image: image-set(url("../assets/hero-small.webp") type("image/webp"),
                                url("../assets/hero-small.jpg")  type("image/jpeg"));
  }
}

@media (max-width: 720px) {
  .row { grid-template-columns: 1fr; }

  .adminbar { align-items: stretch; flex-direction: column; gap: 12px; }

  .adminbar-actions > .primary,
  .adminbar-actions > .ghost { flex: 1 1 auto; }

  /* feine Details der Kopfgrafik verschwinden beim Stauchen */
  .hero-flag { display: none; }

  .summary { gap: 8px; }

  .stat { padding: 14px 6px 12px; }

  .toolbar { justify-content: stretch; }

  .switch { width: 100%; }

  .lock-line { gap: 8px; }

  .lock-line input { flex: 1 1 100%; }

  .lock-line .primary { flex: 1 1 auto; }
}

@media (max-width: 620px) {
  /* Statuspille läuft in den Fluss, damit sie nie neben den Titel gerät */
  .wish { padding-top: 16px; }

  .wish:not(.taken)::after {
    position: static;
    order: -1;
    grid-row: 1;
    grid-column: 1 / -1;
    justify-self: start;
  }

  /* Nur bei offenen Zeilen steht die Statuspille in Zeile 1 – dort rückt
     das Bild eine Zeile nach unten. Vergebene Zeilen bleiben unverändert. */
  .wish:not(.taken) .thumb,
  .wish:not(.taken).no-image::before { grid-row: 2; }

  .badge { position: static; }

  .summary { grid-template-columns: 1fr; }
  .stat { flex-direction: row; align-items: center; gap: 14px; padding: 14px 16px; }
  .stat-icon { margin-bottom: 0; }
  .stat-num { min-width: 2ch; }
  .stat-label { flex: 1 1 auto; }
}

@media (max-width: 480px) {
  .wish { gap: 10px 14px; padding: 16px 14px 14px; }

  .wish { grid-template-columns: 68px minmax(0, 1fr); }

  .thumb, .wish.no-image::before { width: 68px; height: 68px; }

  .wish.no-image::before { background-size: 32px 32px, auto, auto; }

  .wish-title { font-size: 1.14rem; }

  .stat-label { letter-spacing: .07em; font-size: .68rem; }
}

/* ---------- 19. Zeigergeräte vs. Touch ---------------------- */

@media (hover: none) {
  .wish:hover { transform: none; box-shadow: var(--shadow-sm); }
  .primary:hover { transform: none; }
}

/* größere Trefferflächen auf Touchgeräten */
@media (pointer: coarse) {
  .primary, .ghost { padding: 13px 22px; }
  .primary.small, .ghost.small { padding: 10px 17px; }
  .icon-btn { padding: 9px 14px; }
}

/* ---------- 20. Reduzierte Bewegung ------------------------- */

@media (prefers-reduced-motion: reduce) {
  .wish, .primary, .ghost, .icon-btn, .switch input, .stat, .thumb {
    transition: none;
  }

  .wish:hover, .primary:hover, .stat:hover { transform: none; }

  .wish:hover .thumb { transform: none; }

  .skeleton { animation: none; }
}

/* ---------- 21. Druck --------------------------------------- */

@media print {
  .hero-scene, .hero-photo, .tartan-band,
  .toolbar, .adminbar, .panel, .login { display: none !important; }

  body { background: #fff; }

  .hero { background: none; color: #000; min-height: 0; padding: 0 0 16px; }

  .hero::before, .hero::after { display: none; }

  .hero h1 { color: #000; }

  .lede { color: #333; }

  .wish {
    break-inside: avoid;
    box-shadow: none;
  }
}