/* ==========================================================================
   DESIGN-TOKENS  —  Delft/Azulejo: Creme + Kobaltblau, blaue Eck-Ornamente.
   Zum Angleichen nur diese Werte ändern.
   ========================================================================== */
:root {
  --bg:        #e7e3d9;   /* Seitengrund, gräulich-creme                     */
  --surface:   #f4f0e6;   /* Kachel/Karte (creme wie die Einladung)          */
  --paper:     #fbf9f2;   /* Eingabefelder                                   */
  --blue:      #2438b0;   /* Kobaltblau (Text, Rahmen, Aktion)               */
  --blue-deep: #1a2a82;   /* Hover                                           */
  --ink:       #2a2e44;   /* Fließtext, dunkles Schieferblau                 */
  --ink-soft:  #6a6f82;
  --label:     #8d9284;   /* Salbei-Grau für gesperrte Labels                */
  --line:      #d9d3c5;   /* Haarlinien                                      */
  --accent-ink:#f7f4ec;   /* Text auf Blau                                   */

  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-body:    system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --radius:  10px;
  --maxw:    560px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img { max-width: 100%; display: block; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
}
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 26px 20px 0; }

/* ==========================================================================
   AZULEJO-KACHEL  (Signature: blauer Doppelrahmen + Eck-Ornamente)
   ========================================================================== */
.tile {
  position: relative;
  background: var(--surface);
  border: 2px solid var(--blue);
  border-radius: 3px;
  padding: 46px 30px 40px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(36,56,120,.10);
}
.tile::before {                      /* innerer Haarlinien-Rahmen             */
  content: ""; position: absolute; inset: 7px;
  border: 1px solid var(--blue); border-radius: 2px; opacity: .55;
  pointer-events: none;
}
.orn {
  position: absolute; width: 74px; height: 74px; pointer-events: none;
}
.orn.tl { top: 6px;    left: 6px; }
.orn.tr { top: 6px;    right: 6px;    transform: scaleX(-1); }
.orn.bl { bottom: 6px; left: 6px;     transform: scaleY(-1); }
.orn.br { bottom: 6px; right: 6px;    transform: scale(-1,-1); }
@media (max-width: 420px) { .orn { width: 58px; height: 58px; } }

.eyebrow {
  font-family: var(--font-body);
  font-size: .68rem; letter-spacing: .34em; text-transform: uppercase;
  color: var(--label); margin: 0 0 16px;
}
.names {
  font-family: var(--font-display); font-weight: 600; color: var(--blue);
  font-size: clamp(2.7rem, 12vw, 3.7rem); line-height: 1.0;
  margin: 0; letter-spacing: .005em;
}
.names .amp { display: block; font-weight: 500; font-size: .62em;
              margin: 2px 0; }
.tiledate {
  font-family: var(--font-display); color: var(--blue);
  font-size: 1.35rem; letter-spacing: .28em; margin: 20px 0 0;
}

/* Einleitung ------------------------------------------------------------- */
.lede {
  text-align: center; color: var(--ink); font-family: var(--font-display);
  font-size: 1.4rem; line-height: 1.4; max-width: 34ch;
  margin: 30px auto 26px;
}

/* Karte / Formular ------------------------------------------------------- */
.card {
  background: var(--surface); border: 1px solid var(--blue);
  border-radius: var(--radius); padding: 24px 22px; margin-bottom: 40px;
  box-shadow: 0 6px 18px rgba(36,56,120,.07);
}
.field { margin-bottom: 18px; }
.field label {
  display: block; font-size: .8rem; letter-spacing: .04em;
  color: var(--ink-soft); margin-bottom: 7px;
}
.field input[type="text"] {
  width: 100%; padding: 13px 14px; font-size: 1rem; font-family: inherit;
  color: var(--ink); background: var(--paper);
  border: 1px solid var(--line); border-radius: 8px;
}
.field input[type="text"]:focus {
  outline: none; border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(36,56,120,.16);
}

/* Aufnahme-Buttons ------------------------------------------------------- */
.pick { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pick.single { grid-template-columns: 1fr; }
.pick button {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 20px 12px; cursor: pointer;
  background: var(--paper); color: var(--blue);
  border: 1px dashed #b9c0e0; border-radius: 9px;
  font-family: inherit; font-size: .95rem;
  transition: border-color .15s, background .15s;
}
.pick button:hover, .pick button:focus-visible {
  border-color: var(--blue); background: #eef0fb; outline: none;
}
.pick button svg { width: 26px; height: 26px; stroke: var(--blue); }

/* Vorschau --------------------------------------------------------------- */
.previews { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px;
            margin-top: 18px; }
.previews:empty { margin-top: 0; }
.thumb { position: relative; aspect-ratio: 1; border-radius: 8px;
         overflow: hidden; background: var(--line); }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb .badge { position: absolute; inset: auto 0 0 0; padding: 3px 6px;
  font-size: .68rem; color: #fff; background: rgba(36,56,120,.7);
  text-align: center; }
.thumb .rm { position: absolute; top: 5px; right: 5px; width: 22px; height: 22px;
  border: none; border-radius: 50%; cursor: pointer;
  background: rgba(36,56,120,.8); color: #fff; font-size: 14px; line-height: 1; }

/* Aktion / Fortschritt --------------------------------------------------- */
.actions { margin-top: 22px; }
.btn {
  width: 100%; padding: 15px 18px; cursor: pointer;
  font-family: inherit; font-size: 1.02rem; letter-spacing: .02em;
  color: var(--accent-ink); background: var(--blue);
  border: none; border-radius: 9px;
  transition: background .15s, transform .05s;
}
.btn:hover { background: var(--blue-deep); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .4; cursor: default; }

.progress { height: 6px; background: var(--line); border-radius: 999px;
  overflow: hidden; margin-top: 16px; display: none; }
.progress.show { display: block; }
.progress > i { display: block; height: 100%; width: 0%;
  background: var(--blue); transition: width .2s ease; }

.note { font-size: .82rem; color: var(--ink-soft); text-align: center;
        margin-top: 14px; }
.msg { text-align: center; padding: 8px 0 0; font-size: .95rem; }
.msg.ok  { color: var(--blue); }
.msg.err { color: #a5453b; }

/* Erfolg ----------------------------------------------------------------- */
.done { text-align: center; padding: 20px 0 6px; }
.done .mark { width: 54px; height: 54px; margin: 0 auto 14px; border-radius: 50%;
  background: var(--blue); display: grid; place-items: center; }
.done .mark svg { width: 26px; height: 26px; stroke: var(--accent-ink); }
.done h2 { font-family: var(--font-display); font-weight: 600; color: var(--blue);
           font-size: 2rem; margin: 0 0 6px; }
.done p { color: var(--ink-soft); margin: 0 0 20px; }
.link { background: none; border: none; color: var(--blue); cursor: pointer;
  font-family: inherit; font-size: 1rem; text-decoration: underline;
  text-underline-offset: 3px; }

.footer { text-align: center; color: var(--label); font-family: var(--font-display);
          font-size: 1.05rem; letter-spacing: .06em; padding: 4px 0 40px; }

/* ==========================================================================
   GALERIE
   ========================================================================== */
.gal-head { max-width: 1080px; margin: 0 auto; padding: 40px 22px 20px;
  display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: 16px; }
.gal-head h1 { font-family: var(--font-display); font-weight: 600; color: var(--blue);
               font-size: 2.6rem; margin: 0; }
.gal-head .stats { color: var(--ink-soft); font-size: .9rem; }
.gal-head .stats b { color: var(--ink); }
.gal-grid { max-width: 1080px; margin: 0 auto; padding: 0 22px 60px;
  display: grid; gap: 6px;
  grid-template-columns: repeat(auto-fill, minmax(110px,1fr)); }
.gal-grid a { position: relative; aspect-ratio: 1; border-radius: 5px;
  overflow: hidden; background: var(--line); }
.gal-grid img { width: 100%; height: 100%; object-fit: cover; }
.gal-grid .g-guest { position: absolute; inset: auto 0 0 0; padding: 4px 6px;
  font-size: .68rem; color: #fff;
  background: linear-gradient(transparent, rgba(36,56,120,.72)); }
.gal-grid .g-vid { position: absolute; top: 6px; right: 6px; color: #fff;
  background: rgba(36,56,120,.6); border-radius: 4px; padding: 1px 5px;
  font-size: .66rem; }
.empty { max-width: 720px; margin: 60px auto; text-align: center;
  color: var(--ink-soft); font-family: var(--font-display); font-size: 1.3rem;
  padding: 0 22px; }

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