/* ============================================================================
   Demo — ein Sommerfest zum Durchklicken, Gestaltung.

   Wie die Landingpage: keine Anfragen nach draußen. Keine Webfonts, keine
   Bilder von fremden Servern, kein Skript aus dem Netz. Alles, was hier
   passiert, passiert im Browser und verschwindet mit dem Tab.

   Aufgeteilt in demo.html, demo.css und demo.js, damit die
   Content-Security-Policy ohne 'unsafe-inline' auskommt.

   Die Farbwerte sind dieselben wie in der App und auf der Landingpage — die
   drei Seiten sollen wie ein Stück wirken.
   ========================================================================== */

:root {
  --paper:   #f1f4ec;
  --card:    #ffffff;
  --ink:     #17251c;
  --muted:   #5d6b60;
  --line:    #d6decd;
  --accent:  #2f6b45;
  --on-accent: #ffffff;

  --grill:   #b3325a;
  --salat:   #2f6b45;
  --suess:   #6b4a7a;
  --trinken: #2e6c8e;
  --deko:    #c98a16;
  --sonst:   #6e7a6b;

  --radius-s: 8px;
  --radius:   14px;
  --radius-l: 22px;

  --display: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --shadow: 0 1px 2px rgba(23,37,28,.05), 0 24px 48px -32px rgba(23,37,28,.45);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 78rem; margin: 0 auto; padding: clamp(1.5rem, 4vw, 3.5rem) clamp(1rem, 3vw, 2rem) 5rem; }

.eyebrow {
  font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); font-weight: 700; margin: 0 0 .9rem;
}
h1 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.9rem, 4.6vw, 3rem); line-height: 1.1;
  letter-spacing: -.015em; margin: 0 0 .9rem; text-wrap: balance;
}
.lede { color: var(--muted); margin: 0 0 2rem; max-width: 46rem; font-size: 1.05rem; }
.lede a { color: var(--accent); font-weight: 700; }

/* --- Schrittleiste ------------------------------------------------------ */

.steps { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem; }
.steps button {
  font-family: var(--body); font-size: .85rem; font-weight: 700;
  padding: .55rem .9rem; border-radius: 999px; cursor: pointer;
  background: var(--card); color: var(--muted);
  border: 1px solid var(--line);
  transition: background .15s, color .15s, border-color .15s;
}
.steps button:hover { border-color: var(--accent); color: var(--ink); }
.steps button[aria-current="true"] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.steps button:focus-visible, .nav button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.stage-head {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.1rem 1.35rem; margin-bottom: 1.5rem;
}
.stage-head h2 { font-family: var(--display); font-size: 1.2rem; margin: 0 0 .35rem; }
.stage-head p { margin: 0; color: var(--muted); font-size: .95rem; max-width: 62ch; }

.nav { display: flex; gap: .5rem; align-items: center; margin-top: 1.5rem; }
.nav button {
  font-family: var(--body); font-size: .9rem; font-weight: 700; cursor: pointer;
  padding: .7rem 1.1rem; border-radius: var(--radius-s);
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
}
.nav button.primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.nav button[disabled] { opacity: .4; cursor: default; }
.nav .count { margin-left: auto; color: var(--muted); font-size: .85rem; }

/* --- Bühne: Browser und Telefon ---------------------------------------- */

.stage { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 62rem) { .stage { grid-template-columns: minmax(0, 1fr) 20rem; } }

.pane-label {
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); font-weight: 700; margin: 0 0 .6rem;
}

/* Browserfenster */
.browser { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); background: var(--card); }
.browser .bar { display: flex; align-items: center; gap: .5rem; padding: .6rem .8rem; background: #e7ebe1; border-bottom: 1px solid var(--line); }
.browser .dot { width: 10px; height: 10px; border-radius: 50%; background: #c9d1c1; }
.browser .url {
  flex: 1; margin-left: .4rem; background: var(--card); border-radius: 999px;
  padding: .25rem .8rem; font-size: .75rem; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.browser .screen { background: var(--paper); padding: 1.25rem; min-height: 30rem; }

/* iPhone */
.phone-outer { display: flex; justify-content: center; }
.phone {
  width: 19rem; max-width: 100%; background: #10150f; border-radius: 2.6rem;
  padding: .7rem; box-shadow: var(--shadow); position: relative;
}
.phone .screen {
  background: var(--paper); border-radius: 2rem; overflow: hidden;
  height: 38rem; display: flex; flex-direction: column; position: relative;
}
.phone .island {
  position: absolute; top: .55rem; left: 50%; transform: translateX(-50%);
  width: 5.5rem; height: 1.3rem; background: #10150f; border-radius: 999px; z-index: 3;
}
.phone .statusbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: .5rem 1.1rem .2rem; font-size: .7rem; font-weight: 700; color: var(--ink);
}
.phone .app { flex: 1; overflow-y: auto; padding: .6rem .9rem 1rem; }
.phone .tabbar {
  border-top: 1px solid var(--line); background: var(--card);
  padding: .5rem .9rem .3rem; display: flex; gap: .5rem;
}
.phone .homebar { height: 4px; width: 7rem; background: var(--ink); opacity: .25; border-radius: 999px; margin: .35rem auto .5rem; }

/* --- Bausteine der App-Ansicht ----------------------------------------- */

.ev-date { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.ev-title { font-family: var(--display); font-size: 1.5rem; line-height: 1.15; margin: .25rem 0 .2rem; }
.phone .ev-title { font-size: 1.2rem; }
.ev-meta { color: var(--muted); font-size: .9rem; margin: 0; }
.ev-count { color: var(--deko); font-weight: 700; }
.ev-rule { height: 1px; width: 2.5rem; background: var(--line); margin: .9rem 0; }
.ev-note { color: var(--muted); font-size: .88rem; margin: 0; white-space: pre-line; }

.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1rem;
}
.card + .card, .block + .block { margin-top: .9rem; }
.block { margin-top: 1.2rem; }
h3.sec { font-family: var(--display); font-size: 1.05rem; margin: 0 0 .1rem; }
p.sub { color: var(--muted); font-size: .85rem; margin: .1rem 0 .7rem; }

.rsvp { display: flex; gap: .4rem; flex-wrap: wrap; }
.rsvp button {
  flex: 1; min-width: 5.5rem; cursor: pointer; font-family: var(--body);
  font-weight: 700; font-size: .85rem; padding: .6rem .4rem;
  border-radius: var(--radius-s); border: 1px solid var(--line);
  background: var(--card); color: var(--muted);
}
.rsvp button[aria-pressed="true"] { color: var(--on-accent); border-color: transparent; }
.rsvp button[data-v="ja"][aria-pressed="true"] { background: var(--salat); }
.rsvp button[data-v="vielleicht"][aria-pressed="true"] { background: var(--deko); }
.rsvp button[data-v="nein"][aria-pressed="true"] { background: var(--sonst); }

.people { display: flex; gap: .7rem; overflow-x: auto; padding-bottom: .2rem; margin-top: .6rem; }
.person { text-align: center; flex: none; width: 3.2rem; }
.person span { display: block; font-size: .68rem; color: var(--muted); margin-top: .2rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.progress { height: 6px; background: var(--line); border-radius: 999px; overflow: hidden; margin-top: .5rem; }
.progress i { display: block; height: 100%; background: var(--accent); transition: width .3s; }

ul.items { list-style: none; margin: .7rem 0 0; padding: 0; display: grid; gap: .5rem; }
ul.items li {
  border-radius: var(--radius-s); padding: .7rem .8rem;
  display: flex; align-items: center; gap: .5rem;
  background: var(--card); border: 1px solid var(--line);
}
ul.items li.open { background: transparent; border-style: dashed; border-width: 2px; }
.item-main { min-width: 0; flex: 1; }
.item-title { font-weight: 700; font-size: .92rem; }
.item-by { color: var(--muted); font-size: .78rem; display: flex; align-items: center; gap: .35rem; margin-top: .15rem; }
.tone { width: 10px; height: 10px; border-radius: 50%; flex: none; }

.qty {
  display: inline-flex; align-items: center; gap: .25rem; flex: none; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--radius-s);
  background: var(--card); color: var(--muted); font-family: var(--body);
  font-size: .8rem; font-weight: 700; padding: .35rem .45rem;
}
.qty.many { color: var(--ink); }
.qty b { font-size: .7rem; font-weight: 400; color: var(--muted); }
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--radius-s); flex: none; }
.stepper button {
  width: 1.9rem; height: 1.9rem; cursor: pointer; border: 0; background: transparent;
  font-size: 1rem; font-weight: 700; color: var(--muted); font-family: var(--body);
}
.stepper button:last-child { color: var(--salat); }
.stepper span { min-width: 1.2rem; text-align: center; font-weight: 700; font-size: .85rem; }

.btn {
  cursor: pointer; font-family: var(--body); font-weight: 700; font-size: .82rem;
  padding: .45rem .7rem; border-radius: var(--radius-s); flex: none;
  border: 2px solid var(--salat); background: transparent; color: var(--salat);
}
.btn.ghost { border: 1px solid var(--line); color: var(--muted); }
.btn.solid { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.btn.wide { width: 100%; padding: .7rem; font-size: .9rem; }

.money { display: grid; gap: .4rem; margin-top: .6rem; font-size: .88rem; }
.money div { display: flex; justify-content: space-between; gap: 1rem; }
.money .lbl { color: var(--muted); }
.money .sum { border-top: 1px solid var(--line); padding-top: .45rem; font-weight: 700; }
.transfers { list-style: none; margin: .7rem 0 0; padding: 0; display: grid; gap: .35rem; font-size: .85rem; }
.transfers li { display: flex; justify-content: space-between; gap: 1rem; }
.transfers b { font-variant-numeric: tabular-nums; }

.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; margin-top: .7rem; }
.gallery figure {
  margin: 0; aspect-ratio: 1; border-radius: var(--radius-s); overflow: hidden;
  border: 1px solid var(--line); display: flex; align-items: flex-end;
  padding: .3rem; font-size: .6rem; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.5);
}
.gallery figure span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.hint {
  margin-top: .8rem; font-size: .82rem; color: var(--muted);
  border-left: 3px solid var(--deko); padding-left: .7rem;
}

.join-form { display: grid; gap: .5rem; margin-top: .8rem; }
.join-form input {
  font-family: var(--body); font-size: .95rem; padding: .6rem .8rem;
  border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--card); color: var(--ink);
}

.outro { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.outro p { color: var(--muted); max-width: 46rem; }
.outro .cta { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
.outro a {
  text-decoration: none; font-weight: 700; font-size: .9rem;
  padding: .7rem 1.1rem; border-radius: var(--radius-s);
  border: 1px solid var(--line); color: var(--ink); background: var(--card);
}
.outro a.primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

/* Pflichtangaben und der (heute leere) Behälter der Einwilligungsverwaltung. */
.foot-legal {
  margin-top: 2.5rem; padding-top: 1.2rem; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 1.1rem;
  font-size: .85rem; color: var(--muted);
}
.foot-legal a { color: var(--muted); text-underline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}