/* ===========================================================
   style.css
   Gemeinsame Basis-Styles für Upload-Seite & Diashow.
   Minimalistisch, modern, mobile-first.
=========================================================== */

:root {
  --color-bg: #faf8f5;
  --color-text: #2b2b2b;
  --color-muted: #8a8a8a;
  --color-accent: #c9a876;      /* dezentes Gold, passt zu Hochzeiten/Events */
  --color-accent-dark: #a9895e;
  --color-success: #4caf82;
  --color-error: #e0625a;
  --radius: 16px;
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  font-size: 16px;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
}

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

.upload-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
  text-align: center;
}

.logo {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 40px;
  margin-bottom: 20px;
  box-shadow: var(--shadow);
}

.event-title {
  font-size: 1.6rem;
  font-weight: 600;
  margin: 0 0 6px;
}

.event-subtitle {
  color: var(--color-muted);
  font-size: 0.95rem;
  margin: 0 0 36px;
  max-width: 320px;
  line-height: 1.4;
}

.upload-btn {
  appearance: none;
  border: none;
  background: var(--color-accent);
  color: white;
  font-size: 1.05rem;
  font-weight: 600;
  padding: 18px 36px;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: transform 0.15s ease, background 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.upload-btn:active {
  transform: scale(0.97);
  background: var(--color-accent-dark);
}

.upload-btn svg {
  width: 22px;
  height: 22px;
}

#file-input {
  display: none;
}

.status {
  margin-top: 24px;
  min-height: 24px;
  font-size: 0.9rem;
}

.status.success { color: var(--color-success); }
.status.error { color: var(--color-error); }
.status.loading { color: var(--color-muted); }

/* Fortschrittsbalken beim Hochladen */
.progress-wrap {
  width: 100%;
  max-width: 320px;
  height: 8px;
  border-radius: 999px;
  background: #eee;
  overflow: hidden;
  margin-top: 18px;
  display: none;
}

.progress-wrap.active { display: block; }

.progress-bar {
  height: 100%;
  width: 0%;
  background: var(--color-accent);
  transition: width 0.2s ease;
}

/* Vorschau bereits hochgeladener eigener Fotos */
.thumbs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  max-width: 340px;
  width: 100%;
  margin-top: 32px;
}

.thumbs img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  animation: pop-in 0.3s ease;
}

@keyframes pop-in {
  from { opacity: 0; transform: scale(0.85); }
  to { opacity: 1; transform: scale(1); }
}

/* -----------------------------------------------------------
   Diashow-Seite
----------------------------------------------------------- */

.slideshow-page {
  height: 100vh;
  width: 100vw;
  background: #000;
  position: relative;
  overflow: hidden;
}

.slide {
  position: absolute;
  inset: 0;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #000;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
}

.slide.visible {
  opacity: 1;
}

.slideshow-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.6);
  font-size: 1.3rem;
  text-align: center;
  gap: 12px;
  z-index: 5;
}

.slideshow-placeholder .qr-hint {
  font-size: 0.95rem;
  color: rgba(255,255,255,0.4);
}

.slide-counter {
  position: absolute;
  bottom: 20px;
  right: 24px;
  color: rgba(255,255,255,0.5);
  font-size: 0.85rem;
  z-index: 10;
  letter-spacing: 0.5px;
}

.new-photo-badge {
  position: absolute;
  top: 20px;
  right: 24px;
  background: rgba(76, 175, 130, 0.9);
  color: white;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.8rem;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 10;
}

.new-photo-badge.show {
  opacity: 1;
  transform: translateY(0);
}

/* Klick-Zonen für manuelle Navigation (unsichtbar, je halbe Bildschirmbreite) */
.nav-zone {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  z-index: 8;
  cursor: pointer;
}

.nav-zone-left { left: 0; }
.nav-zone-right { right: 0; }

.pause-badge {
  position: absolute;
  top: 20px;
  left: 24px;
  background: rgba(224, 98, 90, 0.9);
  color: white;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.8rem;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 10;
}

.pause-badge.show {
  opacity: 1;
  transform: translateY(0);
}

.controls-hint {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,0.5);
  font-size: 0.8rem;
  letter-spacing: 0.3px;
  z-index: 10;
  transition: opacity 0.6s ease;
  pointer-events: none;
}

.controls-hint.fade-out {
  opacity: 0;
}

.account-page { max-width: 900px; margin: auto; padding: 24px; }
.account-page article { border: 1px solid #ddd; padding: 16px; margin: 16px 0; border-radius: 12px; }
.account-page button { margin: 6px; padding: 10px; cursor: pointer; }
input, select { padding: 8px; max-width: 100%; }

/* Phase 2: shared visual identity and accessible responsive controls. */
:root{--color-bg:#f5f6f8;--color-text:#202936;--color-muted:#596574;--color-accent:#00799e;--color-accent-dark:#005c7b;--color-success:#197347;--color-error:#b33332;--yellow:#ffd23f;--orange:#ff914d;--line:#dbe1e7;--shadow:0 18px 55px #1c32400c}
body{font-family:'Trebuchet MS','Segoe UI',sans-serif;line-height:1.6;height:auto}h1,h2,h3{line-height:1.15;letter-spacing:-.035em}h1{font-size:clamp(2rem,4vw,3rem)}h2{font-size:clamp(1.6rem,3vw,2.3rem)}p{color:var(--color-muted)}a{color:var(--color-accent-dark)}button,.button,.upload-btn,.gallery-download-all{font:inherit;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;padding:12px 20px;border:1px solid transparent;border-radius:13px;background:#e8f0f4;color:var(--color-text);cursor:pointer;text-decoration:none;transition:transform .15s,background .15s}button:hover,.button:hover{transform:translateY(-2px);background:#dceaf1}.primary,.upload-btn{background:var(--yellow);color:#202936;box-shadow:0 5px 0 #d3aa24}.primary:hover,.upload-btn:hover{background:#ffe06c}.secondary{background:white;border-color:var(--line)}.danger{background:#fff3f2;color:#a32928;border-color:#f2cdca}button:disabled{opacity:.6;cursor:wait;transform:none}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,img[role=button]:focus-visible{outline:3px solid #00799e;outline-offset:4px}[hidden]{display:none!important}.site-header{max-width:1240px;margin:auto;padding:22px 28px;display:flex;align-items:center;justify-content:space-between;gap:16px}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:#202936;font-size:1.3rem;font-weight:900}.brand:first-letter{color:#00799e}.eyebrow{display:block;font-size:.72rem;font-weight:800;letter-spacing:.14em;color:#00728f}.small,small{font-size:.85rem;color:var(--color-muted)}.actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}.landing-page{max-width:1240px;margin:auto;padding:0 28px}.hero{display:grid;grid-template-columns:1fr 1fr;align-items:center;min-height:600px;gap:20px}.hero h1{font-size:clamp(3rem,5.6vw,5rem);margin:24px 0}.hero h1 span{color:#00799e}.hero-copy>p{max-width:490px;font-size:1.08rem}.hero-art{position:relative;isolation:isolate}.hero-art img{width:100%;position:relative;z-index:1}.art-circle{position:absolute;inset:10% 0 5%;border-radius:50%;background:#d9eff5;z-index:-1}.sticker{position:absolute;bottom:8%;left:10%;z-index:2;background:var(--yellow);padding:12px 20px;font-weight:900;border-radius:10px;transform:rotate(-5deg);box-shadow:var(--shadow)}.section{padding:60px 0}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:28px}.steps article,.plan-card{background:white;border:1px solid var(--line);border-radius:22px;padding:28px}.step-number{font-size:2rem;font-weight:900;color:#00799e}.steps article:nth-child(2){border-top:5px solid var(--yellow)}.steps article:nth-child(3){border-top:5px solid var(--orange)}.steps article:first-child{border-top:5px solid #42bdd6}.plan-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px}.plan-price{font-size:2rem;font-weight:900;color:#202936;margin-bottom:0}.test-notice{padding:12px 18px;background:#fff4d2;border-radius:12px;color:#65521d;font-size:.85rem}footer{text-align:center;padding:32px;font-size:.85rem;color:var(--color-muted)}.account-page{max-width:1140px;padding:32px 28px 80px}.page-heading{display:flex;justify-content:space-between;align-items:center;gap:18px}.page-heading h1{margin:10px 0}.page-heading button{flex-shrink:0}.create-panel{background:white;border:1px solid var(--line);border-radius:20px;padding:20px 24px;margin-top:28px}.create-panel summary{cursor:pointer;font-weight:800;font-size:1.1rem}.event-form{margin-top:24px;display:grid;grid-template-columns:1fr 1fr;gap:22px}label{display:block;font-weight:700;font-size:.9rem}input,select{display:block;width:100%;font:inherit;padding:13px 14px;border:1px solid #bbc7d1;border-radius:10px;background:#fff;margin-top:7px;color:#202936}.check-label{display:flex;gap:10px;align-items:center;font-weight:400}.check-label input{width:20px;height:20px;margin:0;flex-shrink:0}.event-form>.small{margin:0}.account-page article.event-card{background:#fff;padding:26px;border:1px solid var(--line);border-radius:22px;margin:24px 0;box-shadow:var(--shadow)}.event-card h2{font-size:1.5rem;margin:0}.event-meta{font-size:.85rem}.status-pill{padding:5px 12px;border-radius:30px;background:#e0f3e9;color:#176344;font-size:.75rem;font-weight:800}.status-pill.pending{background:#fff0cb;color:#745b1e}.event-section{border-top:1px solid var(--line);margin-top:22px;padding-top:16px}.event-section h3{font-size:1rem;letter-spacing:0;margin:0 0 12px}.event-section .actions{gap:10px}.account-page button{margin:0;padding:12px 18px}.event-settings summary{font-weight:700;cursor:pointer}.event-settings .actions{margin-top:15px}.photo-manager{padding:28px;background:#e8f1f5;border-radius:22px;margin-top:30px;scroll-margin-top:20px}.managed-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px}.account-page .managed-grid article{background:white;border:none;padding:12px;margin:0;display:flex;flex-direction:column;gap:10px}.managed-grid img{width:100%;height:200px;object-fit:cover;border-radius:10px}.photo-state{font-size:.8rem;font-weight:700;color:#4f606c;margin:0}.auth-page{max-width:1040px;margin:40px auto 80px;padding:0 24px;display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}.auth-art img{width:100%}.auth-art h2{text-align:center}.auth-card{background:white;padding:36px;border-radius:24px;border:1px solid var(--line)}.auth-card form{display:grid;gap:18px}.auth-card h1{margin:15px 0}.upload-page{max-width:720px;margin:auto;min-height:auto;padding:60px 24px;justify-content:flex-start}.event-title{font-size:clamp(2rem,4vw,3rem);font-weight:900;margin:14px 0}.event-subtitle{max-width:530px;font-size:1rem;margin:10px 0 28px}.privacy-note{font-size:.8rem;max-width:520px;line-height:1.6;margin-top:28px}.upload-btn{padding:16px 30px}.gallery-page{max-width:1140px;margin:auto;padding:48px 24px 90px}.gallery-header{text-align:center;margin-bottom:30px}.gallery-header .actions{justify-content:center;margin:24px 0}.gallery-download-all{background:white;border-color:var(--line);font-size:.85rem}.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.gallery-grid img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:16px;cursor:pointer}.gallery-empty{text-align:center;padding:60px 20px;border:2px dashed var(--line);border-radius:20px;color:var(--color-muted)}.lightbox{display:none;position:fixed;inset:0;background:#101820f5;z-index:100;align-items:center;justify-content:center;flex-direction:column;gap:20px;padding:24px}.lightbox.open{display:flex}.lightbox img{max-width:100%;max-height:75vh;border-radius:10px}.lightbox-actions{display:flex;gap:12px}.lightbox-actions a{background:var(--yellow);padding:12px 20px;border-radius:12px;color:#202936;text-decoration:none;font-weight:700}#message:not(:empty){padding:12px 18px;border-radius:10px;background:#edf3f6}#retention-hint{font-size:.8rem;max-width:520px}.success-page{background:white;border:1px solid var(--line);border-radius:24px;margin-top:60px!important}
@media(max-width:760px){.site-header{padding:18px}.landing-page{padding:0 20px}.hero{grid-template-columns:1fr;min-height:0;padding-top:25px}.hero-copy>p{font-size:1rem}.hero-art{max-width:480px;margin:auto}.hero h1{font-size:3.2rem}.steps{grid-template-columns:1fr}.section{padding:36px 0}.account-page{padding:20px 16px 60px}.event-form{grid-template-columns:1fr}.page-heading{align-items:flex-start;flex-wrap:wrap}.account-page article.event-card{padding:20px}.actions .button,.actions button{flex-grow:1}.auth-page{grid-template-columns:1fr;margin-top:20px}.auth-art{display:none}.auth-card{padding:26px}.gallery-grid{grid-template-columns:repeat(2,1fr);gap:8px}.gallery-page{padding:30px 16px 60px}.photo-manager{padding:18px}.managed-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.managed-grid img{height:160px}.managed-grid button{font-size:.8rem;padding:10px 8px}.brand{font-size:1.1rem}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.faq-section{max-width:850px;margin:auto}.faq-section details{border-bottom:1px solid var(--line);padding:20px 0}.faq-section summary{font-weight:700;cursor:pointer}.closing-cta{text-align:center;background:#e0f0f5;padding:45px 25px;border-radius:24px;margin:20px 0 50px}.plans-section>.actions{margin-top:24px}

.event-tabs{margin:22px 0}.event-tabs button[aria-pressed="true"]{background:var(--color-accent);color:white}.event-card progress{display:block;width:100%;height:10px;accent-color:var(--color-accent);margin-bottom:20px}.photo-toolbar{margin:18px 0}.managed-grid article.selected{outline:3px solid var(--color-accent)}.event-open{margin-top:12px!important}

.slideshow-back{position:fixed;top:16px;left:16px;z-index:50;background:#fffffff0}.quota-notice{padding:16px 20px;background:#e0f0f5;border-radius:16px;margin:20px 0;max-width:600px}.quota-notice p{margin:4px 0 12px}.quota-near{background:#fff4d2;border:1px solid #e0bf59}.status.notice{color:#65521d;background:#fff4d2;border-radius:12px;padding:16px}

/* FinalSnap: energetic headings with readable system-font body text. */
:root{--color-accent:#1263d6;--color-accent-dark:#174ba0;--yellow:#ffd43b;--orange:#ff883e}
body{font-family:'Segoe UI',Roboto,Arial,sans-serif}
h1,h2,.brand{font-family:'Arial Black','Trebuchet MS','Segoe UI',sans-serif;font-weight:900;letter-spacing:-.045em}
.brand{font-style:italic;color:#174ba0}.brand span{position:relative}.brand span::after{content:'';display:block;height:4px;background:linear-gradient(90deg,#ffd43b,#ff883e);transform:skewX(-20deg);border-radius:3px}
.hero{position:relative}.hero h1 span{color:#1263d6}.eyebrow{color:#174ba0}.art-circle{background:radial-gradient(circle at 40% 40%,#eef6ff 0%,#d9e9ff 65%,#fbeac8 100%)}
.sticker{background:#ffd43b;border-bottom:4px solid #ff883e}.primary,.upload-btn{background:#ffd43b;box-shadow:0 4px 0 #d5a824}.primary:hover,.upload-btn:hover{background:#ffe473}
.steps article:first-child{border-top-color:#1263d6}.steps article:nth-child(2){border-top-color:#ffd43b}.steps article:nth-child(3){border-top-color:#ff883e}.step-number{color:#174ba0}
.closing-cta{background:linear-gradient(125deg,#e2edff,#f7faff 65%,#fff0c3);border:1px solid #cddcf4}.event-tabs button[aria-pressed="true"]{background:#1263d6}.account-page article.event-card{border-top:4px solid #1263d6}.plan-card{position:relative;border-top:4px solid #1263d6}.plan-card:nth-child(2){border-top-color:#ffd43b}.plan-card:nth-child(3){border-top-color:#ff883e}.auth-card{border-top:5px solid #1263d6}
@media(max-width:760px){.hero h1{font-size:clamp(2.5rem,11vw,3.2rem)}.brand{font-size:1.15rem}.site-header{gap:12px}}

.upgrade-panel{margin:22px 0;padding:20px;background:#f2f6ff;border:1px solid #d3def2;border-radius:18px}.upgrade-panel summary{font-weight:800;cursor:pointer}.upgrade-panel .plan-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.upgrade-panel .plan-card{padding:20px}.upgrade-panel .plan-card h3{font-size:1.2rem}.upgrade-panel .plan-card p{font-size:.9rem}.upgrade-panel button{width:100%}@media(max-width:760px){.upgrade-panel .plan-grid{grid-template-columns:1fr}}

.guest-feature-page{max-width:820px;margin:auto;padding:40px 24px 80px}.guest-feature-page>.eyebrow{margin-top:28px}.guest-feature-page .event-subtitle{max-width:700px}.guestbook-form{display:grid;gap:12px;background:white;border:1px solid var(--line);border-radius:18px;padding:22px;margin:28px 0}.guestbook-form textarea{display:block;width:100%;font:inherit;padding:13px 14px;border:1px solid #bbc7d1;border-radius:10px;resize:vertical}.guestbook-form-footer{display:flex;justify-content:space-between;align-items:center;gap:14px}.guestbook-entries{display:grid;gap:14px;margin-top:18px}.guestbook-entry{background:white;border:1px solid var(--line);border-radius:16px;padding:18px}.guestbook-entry-heading{display:flex;align-items:baseline;justify-content:space-between;gap:14px}.guestbook-entry time{font-size:.8rem;color:var(--color-muted)}.guestbook-entry p{white-space:pre-wrap;overflow-wrap:anywhere}.guestbook-entry button{margin-right:8px}.game-progress{display:flex;justify-content:space-between;align-items:center;gap:16px;background:#eef4ff;padding:14px 18px;border-radius:14px;margin:24px 0}.game-tasks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:28px}.game-task{display:flex;flex-direction:column;justify-content:space-between;gap:16px;background:white;border:1px solid var(--line);border-radius:18px;padding:18px;transition:border-color .2s,background .2s}.game-task-check{display:flex;align-items:flex-start;gap:12px;font-weight:400;cursor:pointer}.game-task-check input{width:22px;height:22px;margin:2px 0;flex:0 0 auto;accent-color:var(--color-accent)}.game-task-check span span{display:block;margin-top:7px;color:var(--color-muted);font-size:.9rem}.game-task.is-complete{background:#f0f8f2;border-color:#b9ddc5}.game-task.is-highlighted{border-color:var(--orange);background:#fff9e8}.game-task .button{align-self:flex-start;font-size:.85rem}.guest-feature-page .actions{margin:22px 0}@media(max-width:640px){.guest-feature-page{padding:24px 16px 60px}.game-tasks{grid-template-columns:1fr}.game-progress{align-items:flex-start;flex-direction:column}.guestbook-entry-heading{align-items:flex-start;flex-direction:column;gap:4px}}

/* Landing page pricing: make the temporary test offer easy to compare. */
.plans-section{padding-top:76px}.plans-heading{max-width:680px;margin:0 auto 30px;text-align:center}.plans-intro{font-size:1.05rem}.plans-section>.actions{justify-content:center}.plans-section .plan-grid{grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px;align-items:stretch}.plans-section .plan-card{display:flex;flex-direction:column;min-height:100%;padding:28px 24px;border:1px solid #d8e0ea;border-top:4px solid #1263d6;border-radius:20px;box-shadow:0 12px 30px rgba(22,47,82,.07)}.plans-section .plan-card h3{font-size:1.2rem;margin:0}.plans-section .plan-price{font-size:2.4rem;letter-spacing:-.05em}.plans-section .plan-billing{font-size:.86rem;font-weight:700;color:#53647a;margin:.1rem 0 1.2rem}.plans-section .plan-details{padding:12px 14px;background:#f2f6fc;border-radius:12px;color:#243247;font-weight:800}.plans-section .plan-features{list-style:none;padding:0;margin:10px 0 18px;color:#45546a;font-size:.9rem}.plans-section .plan-features li{padding:5px 0}.plans-section .plan-features li::before{content:'✓';color:#1263d6;font-weight:900;margin-right:9px}.plans-section .plan-period{font-size:.82rem;color:#627189;margin-top:auto;padding-top:12px}.plans-section .plan-card .button{width:100%;margin-top:12px}.plan-footnote{margin:20px 0 10px}
@media(max-width:760px){.plans-section{padding-top:42px}.plans-section .plan-grid{grid-template-columns:1fr}.plans-section .plan-card{padding:22px}.plans-heading{text-align:left}}
.offer-summary{align-self:stretch;padding:16px 20px;background:#f2f6fc;border:1px solid #d8e0ea;border-radius:16px}.offer-summary p{margin:6px 0 0;font-size:.9rem}.service-addons .steps article{display:flex;flex-direction:column;align-items:flex-start;gap:8px}.service-addons .steps article .button{margin-top:auto}
.timeline-preview{grid-column:1/-1}.timeline-preview ul{margin:8px 0 0;padding-left:22px}.timeline-preview li{margin:5px 0;color:var(--color-muted);font-size:.9rem}