/* ============================================================
   Bernhards 50. Geburtstag – gemeinsames Stylesheet
   Design-Grundlage: Designvorlage/design_handoff_einladungsseite
   Farben/Schrift/Motive gelten fuer alle Seiten, auch neue.
   ============================================================ */

:root {
  --cream: #f6efe4;
  --ink: #2a2118;
  --brass: #b8813f;
  --rust: #8a4a2f;
  --amber: #f0a84a;
  --paypal: #0a4a8f;
  --card: #fffaf0;
  --thumb: #e4d9c4;
  --danger: #a63f2a;
  --success: #3f7d46;

  /* neue, dezente Pastell-Konfetti-Toene, ergaenzend zur Hauptpalette */
  --confetti-1: #d8c7e6; /* pastell-flieder */
  --confetti-2: #c6e3dc; /* pastell-mint */
  --confetti-3: #f3d7c9; /* pastell-pfirsich */
  --confetti-4: #cfe0f0; /* pastell-himmelblau */

  --radius-card: 16px;
  --radius-field: 14px;
  --radius-btn: 14px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

h1, h2, .display {
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-weight: 700;
  margin: 0;
}

a { color: inherit; }

.wrap {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 0 24px 32px;
  position: relative;
  border: 1px solid rgba(42, 33, 24, .1);
}

/* Auf groesseren Bildschirmen (PC/Tablet) liegt die Karte sichtbar "auf dem
   Tisch": Schatten + deutlichere Kante. Auf Handy-Breite (Karte = ganzer
   Bildschirm) faellt das kaum auf -- genau das war der Wunsch. */
@media (min-width: 640px) {
  .wrap {
    margin-top: 24px;
    margin-bottom: 24px;
    min-height: calc(100vh - 48px);
    border-color: rgba(42, 33, 24, .14);
    box-shadow: 0 10px 26px -12px rgba(42, 33, 24, .22);
  }
}

/* ---------- wiederkehrende Deko-Motive ---------- */

.pearl-top {
  position: sticky;
  top: 0;
  left: -24px;
  right: -24px;
  width: calc(100% + 48px);
  margin-left: -24px;
  height: 9px;
  background-image:
    linear-gradient(45deg, var(--brass) 25%, transparent 25%, transparent 75%, var(--brass) 75%),
    linear-gradient(45deg, var(--brass) 25%, transparent 25%, transparent 75%, var(--brass) 75%);
  background-size: 11px 11px;
  background-position: 0 0, 5.5px 5.5px;
  opacity: .55;
  z-index: 5;
}

.ghost50 {
  position: absolute;
  top: -10px;
  right: -8px;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: clamp(210px, 66vw, 290px);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 2px rgba(42, 33, 24, .13);
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

.balloon {
  position: absolute;
  border: 2px solid rgba(42, 33, 24, .16);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.balloon::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -22px;
  width: 1px;
  height: 22px;
  background: rgba(42, 33, 24, .16);
}
.balloon.brass { border-color: rgba(184, 129, 63, .35); }
.balloon.brass::after { background: rgba(184, 129, 63, .35); }

.confetti-dot {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

/* neue eckige Pastell-Konfetti, leicht rotiert, dezent */
.confetti-sq {
  position: absolute;
  border-radius: 3px;
  pointer-events: none;
  z-index: 0;
  opacity: .55;
}

/* ---------- Typografie-Bausteine ---------- */

.eyebrow-rule {
  width: 34px;
  height: 2px;
  background: var(--brass);
  margin: 0 0 10px;
}

.headline {
  font-size: clamp(36px, 11vw, 46px);
  line-height: 1.02;
}

.lede {
  font-size: 14px;
  line-height: 1.5;
  opacity: .75;
  max-width: 38ch;
  margin: 10px 0 0;
}

.body-copy {
  font-size: 13.5px;
  line-height: 1.55;
  margin: 14px 0 0;
}
.body-copy strong { font-weight: 700; }

label.field-label {
  display: block;
  font: 600 11px system-ui, sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .6;
  margin-bottom: 8px;
}

/* ---------- Formulare ---------- */

.field {
  border: 2px solid var(--ink);
  border-radius: var(--radius-field);
  padding: 15px 16px;
  font: 600 16px system-ui, sans-serif;
  margin-bottom: 14px;
  background: var(--cream);
  width: 100%;
  color: var(--ink);
  appearance: none;
}
.field:focus { outline: 3px solid var(--amber); outline-offset: 1px; }
.field::placeholder { color: rgba(42, 33, 24, .4); }

select.field {
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%),
                     linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 20px) center, calc(100% - 15px) center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

textarea.field { resize: vertical; min-height: 90px; font: 500 14px/1.5 system-ui, sans-serif; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  border-radius: var(--radius-btn);
  padding: 16px 22px;
  font: 700 15px system-ui, sans-serif;
  cursor: pointer;
  text-decoration: none;
  width: 100%;
}
.btn-primary { background: var(--brass); color: var(--ink); }
.btn-dark { background: var(--ink); color: var(--cream); }
.btn-paypal { background: var(--paypal); color: #fff; }
.btn-ghost { background: transparent; color: var(--ink); border: 2px solid rgba(42,33,24,.3); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-small { width: auto; padding: 10px 16px; font-size: 13px; border-radius: 10px; }

.push-bottom { margin-top: auto; padding-top: 24px; }

/* ---------- Layout-Bausteine ---------- */

main.screen {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding-top: 28px;
  /* Schneidet die Abriss-Loecher (und alles andere, das bewusst ueber den
     Rand hinaus positioniert ist) sauber an der Kante ab -- unabhaengig von
     der Bildschirmgroesse. main.screen ist ein Geschwister-Element vom
     "position:sticky"-Perlenrand, nicht dessen Vorfahre, daher kein Risiko
     fuers Sticky-Verhalten (siehe .wrap weiter oben). */
  overflow-x: hidden;
}

.card {
  background: var(--card);
  border-radius: var(--radius-card);
  padding: 16px 18px;
  box-shadow: 0 4px 12px rgba(42, 33, 24, .08);
}

.toggle-card {
  border: 2px solid var(--ink);
  border-radius: var(--radius-field);
  padding: 14px 16px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  background: transparent;
  font: 600 14px system-ui, sans-serif;
  color: var(--ink);
  width: 100%;
  text-align: left;
  transition: background .15s ease, color .15s ease, opacity .15s ease;
}
.toggle-card.off { border-color: rgba(42, 33, 24, .3); opacity: .55; }
.toggle-card.selected-yes { background: var(--ink); color: var(--cream); }
.toggle-card.selected-no { background: var(--danger); color: var(--cream); border-color: var(--danger); opacity: 1; }
.toggle-card svg { flex: none; }

.check-path, .cross-path {
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  transition: stroke-dashoffset .4s ease;
}
.toggle-card.selected-yes .check-path,
.toggle-card.selected-no .cross-path { stroke-dashoffset: 0; }

.ticket-divider {
  position: relative;
  /* main.screen hat selbst kein horizontales Padding (das traegt schon
     .wrap eine Ebene hoeher) -- der Divider liegt dadurch bereits exakt
     Kante-zu-Kante der Karte, ganz ohne zusaetzlichen negativen Rand. */
  margin-top: 4px;
  border-top: 2px dashed rgba(42, 33, 24, .35);
}
.ticket-divider::before, .ticket-divider::after {
  content: '';
  position: absolute;
  top: -9px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  /* Wie ein Loch, durch das man auf eine helle Unterlage schaut (Ticket
     liegt auf einem Tisch) -- helles Fuellweiss + Innenschatten fuer Tiefe,
     statt nur ein duenner Ring. */
  background: #fff;
  box-shadow:
    inset 0 2px 3px rgba(42, 33, 24, .28),
    inset 0 -1px 1px rgba(255, 255, 255, .6);
  border: 1px solid rgba(42, 33, 24, .18);
}
/* -9px: die Haelfte des Lochs liegt jenseits der Kartenkante und wird von
   body's overflow-x:hidden sauber "abgeschnitten" (auf Handy-Breite = volle
   Bildschirmbreite) -- so wirkt es wie eine echte Perforation. */
.ticket-divider::before { left: -9px; }
.ticket-divider::after { right: -9px; }

.footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 0 6px;
}
.footer-mono {
  font: 700 11px ui-monospace, Menlo, monospace;
  letter-spacing: .05em;
  opacity: .6;
  line-height: 1.4;
}

/* ---------- Foto-Collage (Landing) ---------- */

.collage { position: relative; height: 34vw; min-height: 130px; max-height: 170px; margin: 18px 0 4px; }
.collage img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 3px; }
.polaroid {
  position: absolute;
  background: var(--card);
  padding: 4px 4px 12px;
  border-radius: 3px;
  box-shadow: 0 6px 12px rgba(42, 33, 24, .26);
}

/* ---------- Upload ---------- */

.dropzone {
  border: 2px dashed rgba(42, 33, 24, .35);
  border-radius: var(--radius-field);
  padding: 22px 16px;
  text-align: center;
  margin-bottom: 10px;
  position: relative;
}
.dropzone input[type=file] {
  position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%;
}
.dropzone .dz-title { font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.dropzone .dz-hint { font-size: 11px; opacity: .55; }

.thumb-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; }
.thumb { width: 56px; height: 56px; border-radius: 6px; background: var(--thumb); object-fit: cover; }
.thumb-more { width: 56px; height: 56px; border-radius: 6px; border: 2px dashed rgba(42,33,24,.3);
  display: flex; align-items: center; justify-content: center; font-size: 18px; opacity: .5; }

/* ---------- Status / Flash ---------- */

.notice { border-radius: 12px; padding: 12px 14px; font-size: 13.5px; margin-bottom: 16px; }
.notice-error { background: #f5ddd4; color: var(--danger); }
.notice-success { background: #deead9; color: var(--success); }

/* ---------- Admin-Bereich: gleiche Palette, funktionaler Aufbau ---------- */

.admin-shell { max-width: 980px; margin: 0 auto; padding: 28px 20px 60px; }
.admin-nav { display: flex; gap: 6px; flex-wrap: wrap; margin: 18px 0 28px; }
.admin-nav a {
  text-decoration: none; font: 600 13px system-ui, sans-serif; padding: 9px 14px;
  border-radius: 10px; background: var(--card); color: var(--ink); border: 1px solid rgba(42,33,24,.12);
}
.admin-nav a.active { background: var(--ink); color: var(--cream); }

.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 28px; }
.stat-tile { background: var(--card); border-radius: 14px; padding: 16px; }
.stat-tile .n { font-family: "Space Grotesk", sans-serif; font-size: 28px; font-weight: 700; }
.stat-tile .l { font-size: 12px; opacity: .65; }

table.admin-table { width: 100%; border-collapse: collapse; background: var(--card); border-radius: 14px; overflow: hidden; font-size: 13.5px; }
table.admin-table th, table.admin-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid rgba(42,33,24,.08); }
table.admin-table th { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; opacity: .55; }
table.admin-table tr:last-child td { border-bottom: none; }
.table-scroll { overflow-x: auto; border-radius: 14px; }

.badge { display: inline-block; padding: 3px 9px; border-radius: 20px; font-size: 11px; font-weight: 700; }
.badge-zugesagt { background: #deead9; color: var(--success); }
.badge-abgesagt { background: #f5ddd4; color: var(--danger); }
.badge-offen { background: var(--thumb); color: var(--rust); }

.admin-card { background: var(--card); border-radius: 14px; padding: 18px 20px; margin-bottom: 20px; }
.admin-card h2 { font-size: 17px; margin-bottom: 14px; }

.inline-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; }
.inline-form .field { margin-bottom: 0; width: auto; min-width: 140px; }

.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.photo-grid figure { margin: 0; background: var(--surface, #fff); border-radius: 10px; overflow: hidden; position: relative; }
.photo-grid img { width: 100%; height: 110px; object-fit: cover; display: block; }
.photo-grid figcaption { font-size: 10.5px; padding: 6px 8px; display: flex; justify-content: space-between; gap: 4px; align-items: center; }

@media print {
  body { background: #fff; }
  .no-print { display: none !important; }
  .admin-shell { padding: 0; max-width: 100%; }
  table.admin-table { font-size: 12px; }
}

@media (min-width: 640px) {
  .wrap { padding: 0 40px 40px; }
}