@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Caveat:wght@500;600&family=Cutive+Mono&display=swap');

:root{
  --ink:#1a2238; --ink-soft:#3a4258; --paper:#f2ebdc; --paper-deep:#e7dcc4;
  --gold:#b08d3f; --gold-soft:#cdae6c; --stamp:#9c3b32; --polaroid:#fbf9f4;
  --shadow:rgba(20,26,42,.28);
  --display:'Cormorant Garamond', Georgia, serif;
  --mono:'Cutive Mono','Courier New',monospace;
  --hand:'Caveat',cursive;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--mono); color:var(--ink);
  background:
    radial-gradient(circle at 20% 10%, rgba(176,141,63,.10), transparent 40%),
    radial-gradient(circle at 85% 90%, rgba(156,59,50,.07), transparent 45%),
    #14182a;
  min-height:100vh; display:flex; align-items:flex-start; justify-content:center;
  padding:clamp(16px,4vw,48px); overflow-x:hidden;
}
.sheet{
  width:min(760px,100%); background:var(--paper);
  background-image:repeating-linear-gradient(0deg,transparent,transparent 27px,rgba(26,34,56,.04) 28px);
  border-radius:3px;
  box-shadow:0 30px 70px -20px rgba(0,0,0,.6),0 2px 0 rgba(255,255,255,.4) inset;
  position:relative; padding:clamp(28px,5vw,56px); margin:auto;
}
.sheet::before{content:"";position:absolute;inset:10px;border:1px solid rgba(26,34,56,.18);border-radius:2px;pointer-events:none;}
.crest{text-align:center;border-bottom:2px solid var(--ink);padding-bottom:18px;margin-bottom:26px;position:relative;}
.crest .mark{font-family:var(--display);font-size:clamp(30px,6vw,46px);letter-spacing:.02em;font-weight:600;line-height:1;color:var(--ink);}
.crest .sub{font-family:var(--mono);font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--ink-soft);margin-top:10px;}
.crest .seal{position:absolute;right:-6px;top:-10px;width:74px;height:74px;border:2px solid var(--stamp);border-radius:50%;color:var(--stamp);font-family:var(--mono);font-size:8.5px;letter-spacing:.08em;display:flex;align-items:center;justify-content:center;text-align:center;transform:rotate(-13deg);opacity:.78;line-height:1.25;padding:6px;}
@media(max-width:560px){.crest .seal{position:static;margin:14px auto 0;transform:rotate(-6deg);}}
.filerow{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:30px;}
.filerow span b{color:var(--ink);font-weight:400;}
h1.station-title{font-family:var(--display);font-weight:600;font-size:clamp(26px,5vw,38px);line-height:1.1;margin:0 0 6px;}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:14px;}
.lead{font-family:var(--display);font-size:clamp(18px,2.6vw,22px);line-height:1.5;color:var(--ink);margin:0 0 8px;}
.body{font-size:13px;line-height:1.75;color:var(--ink-soft);margin:14px 0;}
.body.tight{margin:8px 0;}
/* ====================== GALERIE / FOTOS ====================== */
/* Pro-Foto-Variablen: --w (Breite), --rot (Drehung). Defaults hier. */
.photo{
  --w:168px; --rot:0deg;
  margin:0; position:relative;
  width:var(--w);
  transition:transform .35s cubic-bezier(.2,.8,.25,1), box-shadow .35s;
}
.photo .pic{
  width:100%; aspect-ratio:1/1;
  background-size:cover; background-position:center; background-color:#a99a76;
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.7); font-family:var(--mono); font-size:10px;
  letter-spacing:.18em; text-transform:uppercase; cursor:zoom-in;
}
.photo .cap{
  font-family:var(--hand); font-size:18px; line-height:1.1;
  text-align:center; color:var(--ink); margin-top:10px;
}

/* --- Rahmen-Varianten --- */
.photo.frame-polaroid{ background:var(--polaroid); padding:10px 10px 8px;
  box-shadow:0 12px 26px -8px var(--shadow); border:1px solid rgba(0,0,0,.05); }
.photo.frame-polaroid .cap{ margin-top:8px; }
.photo.frame-print{ background:#fff; padding:6px;
  box-shadow:0 10px 24px -10px var(--shadow); }
.photo.frame-framed{ background:#241c14; padding:14px;
  border:3px solid #0d0a07; box-shadow:0 18px 36px -12px var(--shadow); }
.photo.frame-framed .cap{ color:var(--gold-soft); }
/* Default ohne frame = wie polaroid, damit bestehende Inhalte gleich aussehen */
.photo:not([class*="frame-"]){ background:var(--polaroid); padding:10px 10px 8px;
  box-shadow:0 12px 26px -8px var(--shadow); border:1px solid rgba(0,0,0,.05); }

/* --- Hervorhebung einzelner Fotos --- */
.photo.emph{ --rot:0deg; z-index:5; }
.photo.emph .pic{ }
.photo.emph:not([class*="frame-"]),
.photo.emph.frame-polaroid{ box-shadow:0 22px 44px -10px var(--shadow); }

/* ====================== LAYOUTS ====================== */

/* SCATTER — verstreuter Tisch, überlappend, leicht gedreht */
.gallery-scatter{
  position:relative; min-height:230px; margin:28px 0 34px;
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
}
.gallery-scatter .photo{ margin:-6px; transform:rotate(var(--rot)); }
/* automatische Streuung, falls --rot nicht gesetzt (=0) */
.gallery-scatter .photo:nth-child(1){ --rot:-7deg; }
.gallery-scatter .photo:nth-child(2){ --rot:4deg; }
.gallery-scatter .photo:nth-child(3){ --rot:-3deg; }
.gallery-scatter .photo:nth-child(4){ --rot:6deg; }
.gallery-scatter .photo:nth-child(5){ --rot:-5deg; }
.gallery-scatter .photo:nth-child(6){ --rot:3deg; }
.gallery-scatter .photo:hover{
  transform:rotate(0) scale(1.06) translateY(-6px);
  box-shadow:0 24px 40px -10px var(--shadow); z-index:10;
}

/* HERO — ein großes, zentrales Foto (oder wenige groß zentriert) */
.gallery-hero{
  display:flex; flex-direction:column; align-items:center;
  margin:30px 0 36px;
}
.gallery-hero .photo{
  --w:min(420px, 88%);
  transform:rotate(var(--rot));
}
.gallery-hero .photo:hover{ transform:rotate(0) scale(1.02); }

/* GRID — gleichmäßiges Raster, ruhig und formell */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));
  gap:16px; margin:28px 0 34px;
}
.gallery-grid .photo{ --w:100%; transform:rotate(var(--rot)); }
.gallery-grid .photo:hover{ transform:translateY(-4px) scale(1.03);
  box-shadow:0 20px 36px -12px var(--shadow); z-index:2; }

@media(max-width:560px){
  .gallery-grid{ grid-template-columns:repeat(auto-fill, minmax(110px,1fr)); }
}

/* ====================== LIGHTBOX ====================== */
.lightbox[hidden]{ display:none !important; }
.lightbox{
  position:fixed; inset:0; z-index:100;
  background:rgba(12,15,26,.92);
  display:flex; align-items:center; justify-content:center;
  padding:clamp(16px,5vw,60px);
  animation:lbfade .25s ease both; cursor:zoom-out;
}
@keyframes lbfade{ from{opacity:0;} to{opacity:1;} }
.lb-figure{ margin:0; max-width:100%; max-height:100%; text-align:center; }
.lb-figure img{
  max-width:100%; max-height:80vh; object-fit:contain;
  background:#fff; padding:10px;
  box-shadow:0 30px 70px -20px rgba(0,0,0,.8);
}
.lb-figure figcaption{
  font-family:var(--hand); font-size:24px; color:var(--paper);
  margin-top:18px;
}
.lb-close{
  position:absolute; top:18px; right:24px;
  background:none; border:none; color:var(--paper);
  font-size:38px; line-height:1; cursor:pointer; padding:6px 12px;
  opacity:.8;
}
.lb-close:hover{ opacity:1; background:none; }
@media (prefers-reduced-motion: reduce){ .lightbox{ animation:none; } }
.ask{border-top:1px dashed rgba(26,34,56,.3);padding-top:24px;margin-top:8px;}
.ask label{display:block;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:12px;}
.ask .question{font-family:var(--display);font-size:clamp(20px,3vw,26px);line-height:1.35;margin-bottom:18px;color:var(--ink);}
.inputline{display:flex;gap:10px;flex-wrap:wrap;}
input[type=text],input[type=password]{flex:1 1 220px;font-family:var(--mono);font-size:15px;padding:13px 16px;background:rgba(255,255,255,.55);border:1px solid var(--ink-soft);border-radius:2px;color:var(--ink);letter-spacing:.04em;}
input:focus{outline:2px solid var(--gold);outline-offset:1px;background:#fff;}
button{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;padding:13px 24px;background:var(--ink);color:var(--paper);border:none;border-radius:2px;cursor:pointer;transition:background .25s,transform .1s;}
button:hover{background:#2a3454;}
button:active{transform:translateY(1px);}
button:disabled{opacity:.5;cursor:wait;}
button.gold{background:var(--gold);color:var(--ink);}
button.gold:hover{background:var(--gold-soft);}
.hint{font-size:11px;color:var(--ink-soft);margin-top:14px;min-height:18px;font-family:var(--mono);}
.hint.err{color:var(--stamp);}
.hint.warm{color:var(--gold);}
.progress{display:flex;gap:7px;justify-content:center;margin:0 0 24px;}
.progress i{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--ink-soft);display:inline-block;}
.progress i.done{background:var(--gold);border-color:var(--gold);}
.progress i.cur{background:var(--ink);border-color:var(--ink);transform:scale(1.25);}
.screen{animation:rise .55s cubic-bezier(.2,.8,.25,1) both;}
@keyframes rise{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
.stamped{display:inline-block;transform:rotate(-8deg);color:var(--stamp);border:2.5px solid var(--stamp);padding:4px 14px;font-size:13px;letter-spacing:.18em;text-transform:uppercase;border-radius:3px;opacity:.85;margin-top:8px;}
.finale{text-align:center;}
.qrbox{width:200px;height:200px;margin:26px auto;background:#fff;border:1px solid var(--ink-soft);display:flex;align-items:center;justify-content:center;box-shadow:0 14px 30px -10px var(--shadow);}
.qrbox img{width:170px;height:170px;image-rendering:pixelated;}
.footnote{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-top:30px;}
@media (prefers-reduced-motion: reduce){.screen{animation:none;}.polaroid{transition:none;}}