/* Wichteln -- eigenes Design, ohne CSS-Framework. Handy zuerst, eine Spalte. Tannengrün, Rot, Gold. */

@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 300 900; font-display: block;
  src: url('../fonts/nunito-latin.woff2?v=1') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
                 U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 300 900; font-display: block;
  src: url('../fonts/nunito-latin-ext.woff2?v=1') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
                 U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --bg: #f6f1e7; --bg2: #efe6d6;
  --text: #22302a; --text2: #5d6b63; --text3: #8f9a93;
  --karte: #fffdf8; --rand: rgba(34, 48, 42, .09);
  --gruen: #1f5c45; --gruen-hell: #e3efe8; --rot: #b8322a; --rot-hell: #f8e3e0; --gold: #c8962e; --gold-hell: #f7ecd2;
  --blau: #2f5f8a; --blau-hell: #e1ebf4;
  --feld: #ffffff; --feld-rand: rgba(34, 48, 42, .2);
  --schatten: 0 10px 30px -18px rgba(31, 60, 45, .45), 0 1px 3px rgba(31, 60, 45, .08);
  --radius: 18px;
  color-scheme: light;
}
[data-bs-theme="dark"] {
  --bg: #10201a; --bg2: #0c1914;
  --text: #eef3ef; --text2: #b3c2b9; --text3: #7f8f86;
  --karte: #172b23; --rand: rgba(255, 255, 255, .07);
  --gruen: #6cc59c; --gruen-hell: #1d3a2e; --rot: #f08a7e; --rot-hell: #3d2220; --gold: #e8bd5c; --gold-hell: #3a3020;
  --blau: #8fb8e0; --blau-hell: #1d2c3d;
  --feld: #0f1f19; --feld-rand: rgba(255, 255, 255, .16);
  --schatten: 0 14px 34px -18px rgba(0, 0, 0, .8);
  color-scheme: dark;
}

* { box-sizing: border-box; }
/* kein graues Aufblitzen der ganzen Taste beim Antippen (Android/Chrome; wie Überzeit, Wunsch Micha 30.10.2026) */
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
body {
  margin: 0; min-height: 100dvh; font-family: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 17px; line-height: 1.5; color: var(--text); background: var(--bg);
  background-image: radial-gradient(circle at 100% 0, var(--gold-hell) 0, transparent 40vmax),
                    radial-gradient(circle at 0 100%, var(--gruen-hell) 0, transparent 45vmax);
  background-attachment: fixed;
  padding-bottom: env(safe-area-inset-bottom);
}
a { color: var(--gruen); }
h1, h2, h3 { line-height: 1.2; margin: 0; }
h1 { font-size: 1.8rem; font-weight: 900; margin: 6px 0 8px; }
h2 { font-size: 1.15rem; font-weight: 800; }
h3 { font-size: 1rem; font-weight: 800; margin: 20px 0 8px; }
img { max-width: 100%; }
.seite { max-width: 720px; margin: 0 auto; padding: 8px 16px 16px; }
.leise { color: var(--text2); }
.klein { font-size: .88rem; }
.mitte-text { text-align: center; }
.gruen-text { color: var(--gruen); }

/* --- Kopfzeile --- */
.kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 720px; margin: 0 auto;
  padding: calc(10px + env(safe-area-inset-top)) 16px 6px; }
.marke { display: flex; align-items: center; gap: 8px; font-weight: 900; font-size: 1.15rem; color: var(--text); text-decoration: none; }
.marke img { width: 30px; height: 30px; }
.kopf-nav { display: flex; align-items: center; gap: 6px; }
.kopf-nav a { color: var(--text2); text-decoration: none; font-weight: 700; padding: 6px 10px; border-radius: 999px; }
.kopf-nav a.aktiv { background: var(--gruen-hell); color: var(--gruen); }
.kopf-nav form { margin: 0; }
.link-knopf { background: none; border: 0; color: var(--text2); font-size: 1.2rem; padding: 6px 8px; cursor: pointer; border-radius: 999px; }
.link-knopf:hover { background: var(--rand); }
.zurueck { display: inline-flex; align-items: center; gap: 4px; color: var(--text2); text-decoration: none; font-weight: 700; font-size: .92rem; margin-top: 4px; }
.titelzeile { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 6px 0 12px; }
.titelzeile h1 { margin: 0; }

/* --- Karten --- */
.karte { display: block; background: var(--karte); border: 1px solid var(--rand); border-radius: var(--radius);
  box-shadow: var(--schatten); padding: 18px; margin: 0 0 14px; color: inherit; }
.karte-kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.symbol { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; flex: none;
  background: var(--rand); color: var(--text2); font-size: 1.05rem; }
.symbol.rot { background: var(--rot-hell); color: var(--rot); }
.symbol.gruen { background: var(--gruen-hell); color: var(--gruen); }
.symbol.gold { background: var(--gold-hell); color: var(--gold); }
.symbol.blau { background: var(--blau-hell); color: var(--blau); }
.mitte { min-height: 60dvh; display: grid; place-items: center; }
.held { text-align: center; max-width: 460px; width: 100%; }
.held-bild { width: 96px; height: 96px; margin: 4px auto 6px; display: block; }
.held-bild.klein { width: 64px; height: 64px; }
.begruessung { max-width: none; }
.begruessung h1 { font-size: 2rem; }
.countdown { font-size: 1.1rem; margin: 4px 0; }
.countdown b { color: var(--rot); font-size: 1.4rem; }
.eckdaten { display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: inherit; margin: 6px 0; }
.begruessung .eckdaten { justify-content: center; }
.hinweis-text { white-space: pre-line; text-align: left; background: var(--gold-hell); border-radius: 12px; padding: 10px 14px; margin: 12px 0 0; }
.leer { text-align: center; color: var(--text2); }
.leer .bi { font-size: 2.4rem; color: var(--gold); }
.gruppe-zeile { display: flex; align-items: center; justify-content: space-between; gap: 12px; text-decoration: none; }
.gruppe-zeile:hover { border-color: var(--gruen); }
.gruppe-zeile p { margin: 4px 0 0; }
.abzeichen { flex: none; font-size: .85rem; font-weight: 800; padding: 4px 10px; border-radius: 999px; background: var(--gold-hell); color: var(--gold); }
.abzeichen.gruen { background: var(--gruen-hell); color: var(--gruen); }

/* --- Meldungen --- */
.meldung { border-radius: 14px; padding: 10px 14px; margin: 8px 0 12px; font-weight: 700; }
.meldung.ok { background: var(--gruen-hell); color: var(--gruen); }
.meldung.fehler { background: var(--rot-hell); color: var(--rot); }
.hinweis { display: flex; gap: 10px; align-items: flex-start; text-align: left; background: var(--gruen-hell); border-radius: 14px;
  padding: 12px 14px; margin: 14px 0; }
.hinweis .bi { font-size: 1.3rem; color: var(--gruen); }

/* --- Formulare --- */
label { display: block; font-weight: 700; font-size: .92rem; margin: 12px 0 4px; }
input[type=text], input[type=password], input[type=date], input[type=url], select, textarea {
  width: 100%; font: inherit; color: var(--text); background: var(--feld); border: 1px solid var(--feld-rand);
  border-radius: 12px; padding: 10px 12px; min-height: 44px; }
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--gruen); outline-offset: 1px; border-color: transparent; }
.haken { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; margin: 14px 0; cursor: pointer; }
.haken input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--gruen); }
.zweispaltig { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.zweispaltig > div { min-width: 0; }
form.links { text-align: left; }
form > .knopf, form > button { margin-top: 12px; }
.trenner { display: flex; align-items: center; gap: 10px; color: var(--text3); font-size: .85rem; margin: 16px 0 4px; }
.trenner::before, .trenner::after { content: ''; flex: 1; border-top: 1px solid var(--rand); }

/* --- Knöpfe --- */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: inherit; font-weight: 800;
  color: #fff; background: var(--gruen); border: 1px solid transparent; border-radius: 999px; padding: 10px 18px;
  min-height: 44px; cursor: pointer; text-decoration: none; }
[data-bs-theme="dark"] .knopf { color: #0c1914; }
.knopf:hover { filter: brightness(1.08); }
.knopf:disabled { opacity: .5; cursor: not-allowed; }
.knopf.leise { background: transparent; color: var(--gruen); border-color: var(--feld-rand); }
.knopf.gefahr { background: var(--rot); }
.knopf.breit { width: 100%; }
.knopf.klein { padding: 6px 12px; min-height: 38px; font-size: .9rem; }
.knopfreihe { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* --- Listen --- */
.liste { list-style: none; margin: 0 0 6px; padding: 0; }
.liste > li { border-top: 1px solid var(--rand); padding: 10px 0; }
.liste > li:first-child { border-top: 0; }
.zeile { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.zeile form { margin: 0; }
.inline-form { display: flex; gap: 8px; flex: 1; min-width: 0; }
.inline-form input { min-width: 0; }
.link-zeile { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.link-name { display: flex; flex-direction: column; min-width: 0; }
details.mehr { position: static; }   /* Menü an der ganzen Zeile ausrichten: am Handy bricht die Knopfreihe um */
details.mehr > summary { list-style: none; }
details.mehr > summary::-webkit-details-marker { display: none; }
details.mehr[open] > form { position: absolute; right: 0; top: 100%; z-index: 5; width: min(280px, 100%); background: var(--karte);
  border: 1px solid var(--rand); border-radius: 14px; box-shadow: var(--schatten); padding: 12px; margin-top: 6px; }
details.mehr[open] > form p { margin-top: 0; }

/* Aufklappbare Karten */
.aufklapp > summary { display: flex; align-items: center; gap: 10px; font-weight: 800; cursor: pointer; list-style: none; }
.aufklapp > summary::-webkit-details-marker { display: none; }
.aufklapp > summary::after { content: '\F282'; font-family: 'bootstrap-icons'; margin-left: auto; color: var(--text3); transition: transform .2s; }
.aufklapp[open] > summary::after { transform: rotate(180deg); }
.aufklapp[open] > summary { margin-bottom: 8px; }
.aufklapp.gefahr > summary { color: var(--rot); }

/* --- Teilnehmerseite --- */
.aufdecken { text-align: center; }
.geschenk-knopf { display: inline-flex; flex-direction: column; align-items: center; gap: 8px; font: inherit; font-weight: 800;
  color: var(--rot); background: var(--rot-hell); border: 2px dashed var(--rot); border-radius: 24px; padding: 22px 30px;
  cursor: pointer; animation: wackeln 2.6s ease-in-out infinite; }
.geschenk-knopf .bi { font-size: 3.2rem; line-height: 1; }
@keyframes wackeln { 0%, 80%, 100% { transform: rotate(0); } 85% { transform: rotate(-4deg); } 90% { transform: rotate(4deg); } 95% { transform: rotate(-2deg); } }
@media (prefers-reduced-motion: reduce) { .geschenk-knopf { animation: none; } }
.gezogen-name { text-align: center; font-size: 2.2rem; font-weight: 900; color: var(--rot); margin: 6px 0 2px; overflow-wrap: anywhere; }
.wuensche { margin: 0; padding-left: 20px; }
.wuensche > li { margin: 6px 0; overflow-wrap: anywhere; }
.wuensche > li.zeile { list-style: none; margin-left: -20px; border-top: 1px solid var(--rand); padding-top: 6px; }
.wuensche > li.zeile { display: flex; align-items: center; gap: 6px; }
.wuensche .wunsch-text { flex: 1; min-width: 0; }
.wuensche > li.gekauft .wunsch-text { text-decoration: line-through; color: var(--text3); }
.haken { font: inherit; font-size: 1.25rem; line-height: 1; color: var(--text2); background: none; border: 0; padding: 8px; margin: -4px 0; cursor: pointer; }
.haken .bi-check-square-fill { color: var(--gruen); }
.liebling { color: var(--gold); }
.verlauf { list-style: none; padding: 0; margin: 10px 0; display: flex; flex-direction: column; gap: 8px; }
.verlauf li { max-width: 85%; padding: 8px 12px; border-radius: 16px; background: var(--bg2); overflow-wrap: anywhere; white-space: pre-line; }
.verlauf li.ich { align-self: flex-end; background: var(--gruen-hell); border-bottom-right-radius: 4px; }
.verlauf li.du { align-self: flex-start; border-bottom-left-radius: 4px; }
.verlauf .wer { display: block; font-size: .78rem; font-weight: 800; color: var(--text2); }
.verlauf time { display: block; margin-top: 2px; }
.nachricht-form { display: flex; gap: 8px; align-items: flex-end; }
.nachricht-form textarea { flex: 1; min-width: 0; }
.nachricht-form .knopf { margin: 0; flex: none; }
.push-zustand { margin: 6px 0 10px; }

.fuss { text-align: center; color: var(--text3); font-size: .8rem; padding: 10px 16px 24px; }
.fuss a { color: inherit; display: inline-block; margin-top: 6px; padding: 6px 4px; }

@media (max-width: 420px) {
  .zweispaltig { grid-template-columns: 1fr; }
  .nachricht-form { flex-direction: column; align-items: stretch; }
  h1 { font-size: 1.6rem; }
}

/* Personenliste: Name als Text, Umbenennen hinter dem Stift (1.0.2: der Haken zum Speichern sah nach „auswählen“ aus) */
.person { flex-wrap: wrap; }
.person-name { flex: 1; min-width: 0; font-weight: 700; overflow-wrap: anywhere; }
details.umbenennen > summary { list-style: none; }
details.umbenennen > summary::-webkit-details-marker { display: none; }
details.umbenennen[open] { display: contents; }
details.umbenennen[open] > form { order: 3; flex-basis: 100%; }
.ausschluss-form { border-top: 1px solid var(--rand); margin-top: 8px; padding-top: 4px; }

/* ===================================================================================================================
   Desktop (ab 1024 px) -- eigener Seitenaufbau statt gestreckter Handyansicht (1.3.0).
   Links eine Seitenleiste, die beim Scrollen stehen bleibt (wer bin ich, wie lange noch, wohin springen),
   rechts eine ruhige Lesespalte mit dem Inhalt. Am Handy sind .rahmen/.rahmen-seite/.rahmen-haupt einfache Blöcke,
   .nur-desktop ist aus -- dort ändert sich nichts.
   =================================================================================================================== */
.nur-desktop { display: none; }

@media (min-width: 1024px) {
  .nur-desktop { display: block; }
  .nur-handy { display: none; }

  .breit .seite, .breit .kopf { max-width: 1180px; padding-left: 32px; padding-right: 32px; }
  .breit .kopf { padding-top: 18px; padding-bottom: 10px; }
  .rahmen { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 40px; align-items: start; margin-top: 8px; }
  /* bleibt stehen; ist sie höher als das Fenster, setzt app.js "top" so, dass sie unten bündig stehen bleibt */
  .rahmen-seite { position: sticky; top: 20px; }
  .rahmen-haupt { max-width: 760px; min-width: 0; }
  .rahmen-haupt .karte { padding: 24px 28px; margin-bottom: 20px; }
  .rahmen-haupt .karte-kopf { margin-bottom: 14px; }
  .rahmen-haupt h2 { font-size: 1.3rem; }
  .rahmen-haupt [id] { scroll-margin-top: 20px; }

  /* --- Teilnehmerseite: Begrüßung wird zur Seitenleiste --- */
  .rahmen-seite .begruessung { text-align: left; padding: 24px; margin: 0; }
  .rahmen-seite .begruessung h1 { font-size: 2.1rem; margin: 2px 0 14px; overflow-wrap: anywhere; }
  .rahmen-seite .begruessung .eckdaten { flex-direction: column; justify-content: flex-start; gap: 6px; margin: 14px 0 0; }
  .rahmen-seite .countdown { margin: 0; padding: 14px 16px; border-radius: 14px; background: var(--rot-hell); color: var(--rot);
    font-weight: 700; line-height: 1.25; }
  .rahmen-seite .countdown b { display: block; font-size: 3.2rem; font-weight: 900; line-height: 1; letter-spacing: -.02em; }
  .rahmen-seite .hinweis-text { font-size: .92rem; }

  .sprung { margin: 18px -8px 0; padding-top: 14px; border-top: 1px solid var(--rand); }
  .sprung a { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; color: var(--text2);
    font-weight: 700; text-decoration: none; }
  .sprung a .bi { width: 18px; text-align: center; color: var(--text3); }
  .sprung a:hover { background: var(--bg2); color: var(--text); }
  .sprung a.aktiv { background: var(--gruen-hell); color: var(--gruen); }
  .sprung a.aktiv .bi { color: var(--gruen); }

  .dabei { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rand); }
  .dabei > p { margin: 0 0 8px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: .72rem; }
  .dabei ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
  .dabei li { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; border-radius: 999px;
    background: var(--bg2); font-size: .85rem; font-weight: 700; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .dabei li span { display: inline-grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: 50%;
    background: var(--gruen); color: #fff; font-size: .72rem; font-weight: 900; }
  [data-bs-theme="dark"] .dabei li span { color: #0c1914; }

  /* „Du beschenkst“ ist die Hauptsache: Name groß, Wunschzettel und Nachrichten luftiger */
  .gezogen-name { font-size: 3rem; margin-top: 4px; }
  .rahmen-haupt h3 { font-size: 1.05rem; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--rand); }
  .wuensche > li.zeile { padding: 8px 0; }
  .verlauf li { max-width: 70%; }
  .nachricht-form textarea { min-height: 52px; }
  .geschenk-knopf { padding: 30px 48px; }

  /* --- Verwaltung: Gruppe und Ablauf in der Seitenleiste --- */
  .rahmen-seite > .zurueck { margin-top: 0; }
  .rahmen-seite > h1 { font-size: 2rem; overflow-wrap: anywhere; }
  .rahmen-seite > .eckdaten { flex-direction: column; gap: 4px; }
  .schritte { margin-top: 18px; background: var(--karte); border: 1px solid var(--rand); border-radius: var(--radius);
    box-shadow: var(--schatten); padding: 16px; }
  .schritte ol { list-style: none; margin: 0; padding: 0; position: relative; }
  .schritte li { position: relative; }
  .schritte li + li::before { content: ''; position: absolute; left: 21px; top: -6px; height: 12px; border-left: 2px solid var(--rand); }
  .schritte li a { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 12px; color: var(--text);
    text-decoration: none; font-weight: 800; }
  .schritte li a:hover { background: var(--bg2); }
  .schritte li a.aktiv { background: var(--gruen-hell); }
  .schritte small { display: block; font-weight: 600; color: var(--text2); font-size: .82rem; }
  .schritte .nr { display: inline-grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 50%;
    border: 2px solid var(--feld-rand); color: var(--text2); font-size: .85rem; font-weight: 900; background: var(--karte); }
  .schritte li.erledigt .nr { background: var(--gruen); border-color: var(--gruen); color: transparent; position: relative; }
  .schritte li.erledigt .nr::after { content: '\F26E'; font-family: 'bootstrap-icons'; color: #fff; position: absolute; font-size: 1.1rem; }
  [data-bs-theme="dark"] .schritte li.erledigt .nr::after { color: #0c1914; }
  .fortschritt { padding: 4px 8px 14px; margin-bottom: 8px; border-bottom: 1px solid var(--rand); }
  .fortschritt p { margin: 0; }
  .balken { height: 10px; border-radius: 999px; background: var(--bg2); overflow: hidden; margin: 8px 0 6px; }
  .balken span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--gruen), var(--gold)); }
  .nebenlink { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 8px; border-top: 1px solid var(--rand);
    color: var(--text2); font-weight: 700; text-decoration: none; }
  .nebenlink:hover { color: var(--text); }

  /* Linkliste als ruhige Tabelle: Name | Stand | Knöpfe in einer Zeile */
  .link-zeile { flex-wrap: nowrap; padding: 12px 4px; }
  .link-zeile:hover { background: var(--bg2); border-radius: 10px; }
  .link-name { flex-direction: row; align-items: baseline; gap: 14px; flex: 1; }
  .link-name b { min-width: 9em; }
  .person { padding: 10px 4px; }
}

/* Rückfrage (frage.css, geteilt, 21.10.2026): Karte als Fläche, Ja-Knopf grün wie die Hauptknöpfe */
:root { --frage-flaeche: var(--karte); --frage-text: var(--text); --frage-linie: var(--rand); --frage-akzent: var(--gruen);
  --frage-akzent-text: #fff; --frage-radius: var(--radius); --frage-knopf-radius: 999px; }
[data-bs-theme="dark"] { --frage-akzent-text: #0c1914; }

/* Farben für den eigenen Kalender (datum.css; die App hat keine Uhr, die sie sonst vorgibt) */
:root, [data-bs-theme="dark"] { --uhr-flaeche: var(--karte); --uhr-text: var(--text); --uhr-leise: var(--text3); --uhr-linie: var(--rand);
  --uhr-akzent: var(--gruen); --uhr-weich: var(--gruen-hell); --uhr-akzent-text: #fff; }
[data-bs-theme="dark"] { --uhr-akzent-text: #10201a; }

/* Platz für die Bildlaufleiste immer freihalten: sonst springt am Rechner alles Zentrierte um eine halbe Leistenbreite,
   wenn eine Seite kurz genug ist, um ohne Leiste auszukommen (Micha 30.10.2026) */
html { scrollbar-gutter: stable; }

/* ===================================================================================================================
   Wünsche (Wunschlisten, eigene Adresse, 04.11.2026): gleiche Bausteine, eigene Farben -- Pflaume und Koralle statt
   Tannengrün und Rot, weil Wunschlisten das ganze Jahr laufen (Geburtstag, Hochzeit), nicht nur zu Weihnachten.
   Die Variablen heißen weiter --gruen/--rot (Haupt- und Akzentfarbe), damit alle Bausteine ohne Änderung mitziehen.
   =================================================================================================================== */
html[data-bereich="wuensche"] {
  --bg: #f7f2ee; --bg2: #efe5e0;
  --text: #2b2230; --text2: #665a6b; --text3: #9a8f9e;
  --karte: #fffcfa; --rand: rgba(43, 34, 48, .09);
  --gruen: #7a2e5c; --gruen-hell: #f3e4ee; --rot: #cf4f39; --rot-hell: #fbe6e1; --gold: #b97c1f; --gold-hell: #f8ecd6;
  --blau: #3b5b8c; --blau-hell: #e3eaf5;
  --feld-rand: rgba(43, 34, 48, .2);
  --schatten: 0 10px 30px -18px rgba(70, 30, 60, .45), 0 1px 3px rgba(70, 30, 60, .08);
}
html[data-bereich="wuensche"][data-bs-theme="dark"] {
  --bg: #1c1420; --bg2: #160f19;
  --text: #f4eef5; --text2: #c4b7c7; --text3: #8d8090;
  --karte: #271c2c; --rand: rgba(255, 255, 255, .07);
  --gruen: #e39ac6; --gruen-hell: #3d2537; --rot: #f29a85; --rot-hell: #442621; --gold: #e8bd5c; --gold-hell: #3b2f1f;
  --blau: #9ab6e4; --blau-hell: #202a3d;
  --feld: #1a121d; --feld-rand: rgba(255, 255, 255, .16);
  --schatten: 0 14px 34px -18px rgba(0, 0, 0, .8);
}
html[data-bereich="wuensche"][data-bs-theme="dark"] .knopf,
html[data-bereich="wuensche"][data-bs-theme="dark"] .dabei li span { color: #1c1420; }
html[data-bereich="wuensche"][data-bs-theme="dark"] { --frage-akzent-text: #1c1420; --uhr-akzent-text: #1c1420; }
html[data-bereich="wuensche"] .knopf.leise { color: var(--gruen); }

.links-text { text-align: left; }
h2.links-text { margin: 18px 0 4px; font-size: 1rem; }
.eigene-liste { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--text); text-decoration: none; }
.eigene-liste:hover b { color: var(--gruen); }
.geheim { display: flex; gap: 8px; align-items: flex-start; margin: 14px 0 0; padding: 10px 12px; border-radius: 12px;
  background: var(--bg2); color: var(--text2); text-align: left; }
.geheim .bi { color: var(--gruen); margin-top: 2px; }

/* Wunschzeile: Text oben, Preis/Link klein darunter, Knöpfe rechts */
.wuensche > li.wunsch { flex-wrap: wrap; padding: 8px 0; }
.wunsch-mehr { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; font-size: .86rem; margin-top: 2px; }
.wunsch-mehr:empty { display: none; }
.preis { font-weight: 800; color: var(--text2); }
.wuensche > li.wunsch > details.umbenennen[open] > form { order: 4; flex-basis: 100%; margin: 4px 0 8px; padding: 12px;
  background: var(--bg2); border-radius: 14px; }
.wunsch-aendern label:first-of-type { margin-top: 0; }
.wunsch-neu { border-top: 1px solid var(--rand); margin-top: 12px; }
.wunsch-neu h3 { margin-top: 14px; }

/* Gast-Ansicht: Status rechts; reserviertes ruhig zurückgenommen (nicht durchgestrichen -- es ist ja nicht weg) */
.wuensche.gast > li.wunsch { gap: 8px 10px; }
.status { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: none; max-width: 100%; }
.status form { margin: 0; }
.status .link-knopf { font-size: .84rem; font-weight: 700; padding: 2px 6px; }
.wuensche > li.vergeben .wunsch-text { color: var(--text3); }
.wuensche > li.vergeben .liebling { opacity: .5; }
/* Kasten ragt links/rechts um seinen Innenabstand hinaus, damit der Text bündig mit den anderen Zeilen bleibt
   (normale Zeilen: margin-left -20px; 1.7.3 – vorher war der Text eingerückt) */
.wuensche > li.von-mir { background: var(--gruen-hell); border-radius: 12px; padding: 8px 10px; margin: 6px -10px 6px -30px; border-top-color: transparent; }
.abzeichen .bi { margin-right: 2px; }
details.reservieren { flex: none; }
details.reservieren > summary { list-style: none; }
details.reservieren > summary::-webkit-details-marker { display: none; }
details.reservieren[open] { flex-basis: 100%; order: 3; }
details.reservieren[open] > summary { display: none; }
details.reservieren > form { padding: 12px; background: var(--bg2); border-radius: 14px; margin: 2px 0 6px; }
details.reservieren > form label { margin-top: 0; }
.spoiler { border-color: var(--gold); background: linear-gradient(var(--gold-hell), var(--karte) 70%); }

/* Teilen */
.link-kasten { background: var(--bg2); border-radius: 12px; padding: 10px 12px; margin: 10px 0; overflow-wrap: anywhere; }
.link-kasten code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .86rem; color: var(--text); }
details.qr { margin-top: 10px; }
details.qr > summary { list-style: none; }
details.qr > summary::-webkit-details-marker { display: none; }
details.qr[open] > summary { margin-bottom: 10px; }
.qr-bild { width: min(240px, 100%); margin: 0 auto; background: #fff; border-radius: 14px; padding: 8px; }
.qr-bild svg { display: block; width: 100%; height: auto; }

@media (min-width: 1024px) {
  .rahmen-seite .geheim { margin-top: 18px; }
}

/* Wünsche, Korrekturen nach der Vorschau (04.11.2026) */
/* Text bekommt mindestens 11em; reicht der Platz nicht, rutscht der Status in die nächste Zeile statt den Text zu
   zerquetschen („Kaschmirsch|al in“ neben „Reserviert von Onkel Rolf“) */
.wuensche > li.wunsch .wunsch-text { flex: 1 1 11em; }
.status { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px 8px; margin-left: auto; }
/* Knöpfe in Zeilen und Knopfreihen: kein Formularabstand oben (sonst sitzt × tiefer als der Stift) */
.wuensche > li > form > button, .knopfreihe form > button, .status form > button { margin-top: 0; }   /* nur Knöpfe direkt in der Zeile */
.knopfreihe form { margin: 0; }
/* Textknöpfe in der Schrift der Seite („Freigeben“ stand in Systemschrift, gefunden von der Stilprüfung 04.11.2026) */
.link-knopf { font-family: inherit; }
/* Häkchen mit Text (04.11.2026): Text und (Erklärung) als EIN Absatz neben dem Kästchen. Vorher war das Label flex --
   die Erklärung wurde eine eigene schmale Spalte --, und die Regel für den Stern-/Haken-KNOPF (.haken, 1,25rem,
   Polsterung) griff auch auf das Label. */
label.haken { display: block; position: relative; padding: 0 0 0 30px; margin: 14px 0; font-size: 1rem; line-height: 1.45;
  font-weight: 600; color: var(--text); cursor: pointer; }
label.haken input { position: absolute; left: 0; top: 2px; margin: 0; }
/* Bearbeiten: Stern, Text, Stift und × in einer Zeile -- die Mindestbreite gilt nur in der Gast-Ansicht */
.wuensche > li.wunsch .wunsch-text { flex: 1 1 0; }
.wuensche.gast > li.wunsch .wunsch-text { flex: 1 1 11em; }
.wuensche > li.wunsch .wunsch-text { min-width: 8em; }   /* sonst am PC beim Ändern eine Buchstabenspalte */
/* Eigene Zeile in voller Breite: 100 % rechnet Chromium hier vom aufgelösten <details> (display: contents), nicht von
   der Zeile -- deshalb übergroß wünschen (bricht allein um) und auf die Zeilenbreite schrumpfen lassen */
.wuensche > li.wunsch > details.umbenennen[open] > form { flex: 0 1 100vw; width: auto; min-width: 0; }
/* Beim Ändern kein × daneben (es rutschte neben das Formular); Löschen geht nach dem Speichern wie gewohnt */
.wuensche > li.wunsch:has(> details.umbenennen[open]) > form:last-child { display: none; }
/* 🔑 Chromium (ab ~131) legt den Inhalt eines <details> in einen eigenen Kasten ::details-content. Mit display: contents
   am <details> ist DIESER Kasten das Flex-Element der Zeile, nicht das Formular -- Breite/Reihenfolge deshalb hier.
   Browser ohne ::details-content ignorieren die Regel und nehmen die am Formular. */
.wuensche > li.wunsch > details.umbenennen[open]::details-content { order: 4; flex: 0 1 100vw; min-width: 0; }
details.umbenennen[open]::details-content { order: 3; flex: 0 1 100vw; min-width: 0; }   /* dasselbe für Wichteln (Personen umbenennen) */
.wuensche > li.wunsch > details.umbenennen[open]::details-content { order: 4; }
.zeile > form > button, .zeile > form > .knopf { margin-top: 0; }   /* Wichteln: Papierkorb saß tiefer als der Stift */
/* Knöpfe in aufgeklappten Formularen (Reservieren, Ändern): Abstand zum Feld darüber (1.7.1: „Ich schenke das“ überlappte) */
details.reservieren > form > .knopfreihe, .wunsch-aendern > button { margin-top: 12px; }

/* Wünsche 1.9.0: Bild aus dem Shop-Link (bei uns gespeichert). Quadratisch, auf weißem Grund (Produktfotos sind
   meist freigestellt) -- auch im dunklen Design. */
.wunsch-bild { width: 56px; height: 56px; flex: none; object-fit: contain; background: #fff; border-radius: 10px;
  border: 1px solid var(--rand); }
.wuensche > li.vergeben .wunsch-bild { opacity: .55; }
@media (min-width: 1024px) { .wunsch-bild { width: 64px; height: 64px; } }
.knopf.laedt { opacity: .7; pointer-events: none; }
/* Platzhalter, wenn die Liste Bilder hat, dieser Wunsch aber nicht -- damit alle Texte bündig stehen */
.wunsch-bild.ohne { display: inline-grid; place-items: center; background: transparent; border: 1px dashed var(--feld-rand);
  color: var(--text3); font-size: 1.05rem; }   /* nicht .leer: die Klasse gibt es schon (große goldene Symbole) */
/* Gast-Ansicht mit Bild: Text darf schmaler werden, damit „Reservieren“ am Handy in der Zeile bleibt
   (Bild 56 + Text 6em + Knopf passt in 320 px; lange Abzeichen brechen weiterhin in die nächste Zeile um) */
.wuensche.gast > li.wunsch .wunsch-text { flex: 1 1 6em; min-width: 6em; }