/* Editorial-Stil fuer den Kundenbereich (Nov. 2026). Nur Optik, keine Funktionen/Layout-Logik.
   Zum Zuruecksetzen: <link> in client.html entfernen. */
html:root {
  --font-display: 'Cormorant Garamond', 'Playfair Display', serif;
  --font-body: 'Jost', 'Montserrat', sans-serif;
  --color-text: #1a1a1a;
  --color-muted: #6b645c;
  --color-accent: #1a1a1a;
  --color-bg: #faf8f5;
  --radius-lg: 0px;
  --shadow-soft: none;
}
html body { font-weight: 300; letter-spacing: .01em; }
html h1, html h2, html h3, html .font-display { font-weight: 300; }
html h1 { font-size: clamp(2.2rem, 5vw, 4rem); text-transform: uppercase; letter-spacing: -.01em; line-height: 1.02; }
html h2 { letter-spacing: -.005em; }
html input:focus, html select:focus, html textarea:focus { border-color: #1a1a1a !important; box-shadow: none; }

/* Kopfzeile */
html nav { background: rgba(250,248,245,.94); border-bottom: 1px solid #d9d3c9; }
html .logo-text { font-family: 'Jost','Montserrat',sans-serif; font-weight: 300; letter-spacing: .32em; font-size: .95rem; }
html .logo-sub { font-family: 'Cormorant Garamond',serif; font-style: italic; text-transform: none; letter-spacing: .08em; font-size: .8rem; color: #3a3431; }
html .nav-links a { font-family: 'Jost','Montserrat',sans-serif; font-size: .7rem; letter-spacing: .22em; }
html .nav-links a:hover { color: #1a1a1a; opacity: .6; }

/* Flaechen: Linien statt Schatten-Boxen */
html .client-hero { background: transparent; border-radius: 0; box-shadow: none; border-top: 1px solid #1a1a1a; padding: 2.5rem 0; }
html .client-hero p { color: #3a3431; }
html .client-step { background: transparent; border-radius: 0; box-shadow: none; border: 0; border-top: 1px solid #1a1a1a; padding: .95rem 0 0; }
html .client-step .step-number { background: transparent; color: #1a1a1a; border: 1px solid #1a1a1a; }
html .client-card, html .gallery-card, html .global-access-card { border-radius: 0; box-shadow: none; background: #fff; border: 1px solid #e3ddd3; }
html .gallery-card { overflow: hidden; }

/* Buttons: 1px Rahmen, eckig */
html .lock-btn, html .download-btn, html .gallery-review-btn, html .global-access-field button,
html .back-to-list-btn, html .upload-save-gallery-btn, html .download-choice-btn {
  border-radius: 0; box-shadow: none; font-family: 'Jost','Montserrat',sans-serif; font-weight: 400; letter-spacing: .22em; font-size: .72rem;
}
html .download-btn, html .gallery-review-btn, html .global-access-field button { background: #1a1a1a; color: #fff; border: 1px solid #1a1a1a; }
html .download-btn:hover, html .gallery-review-btn:hover, html .global-access-field button:hover:not(:disabled) { background: transparent; color: #1a1a1a; transform: none; box-shadow: none; }
html .lock-btn { border-color: #1a1a1a; }
html .lock-btn:hover { background: #1a1a1a; color: #fff; }
html .global-access-field input { border-radius: 0; border-color: #d9d3c9; background: #fff; }

html .client-footer { color: #6b645c; letter-spacing: .12em; }
html .client-footer a { border-bottom-color: #1a1a1a; }
html .client-footer a:hover { color: #1a1a1a; opacity: .6; }

/* =====================================================================
   Grossansicht (Lightbox): breiter Passepartout wie im Museum (Nov. 2026)
   Schlanker dunkler Rahmen, breites warmweisses Passepartout (unten etwas
   staerker), goldene Haarlinie um das Bild, ruhige Bildunterschrift.
   ===================================================================== */
html .lightbox-overlay {
  --fr: 12px;                                  /* Rahmenstaerke */
  --mat: clamp(2.4rem, 8vmin, 6.2rem);        /* Passepartout seitlich/oben */
  --mat-b: calc(var(--mat) * 1.22);             /* Passepartout unten */
  --hair: 9px;                                 /* Abstand der Goldlinie zum Bild */
  background: rgba(243, 239, 232, .985);       /* helles, warmes Papier statt Schwarz */
}
html .lightbox-frame {
  background: linear-gradient(145deg, #efe8da 0%, #e2d9c6 55%, #ece4d3 100%);   /* zarter heller Rahmen */
  padding: var(--fr);
  border-radius: 1px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7), inset 0 0 0 4px rgba(184,167,128,.0), inset 0 0 0 5px rgba(184,167,128,.55), 0 0 0 1px rgba(120, 100, 60, .18), 0 26px 70px rgba(70, 55, 30, .22), 0 3px 10px rgba(70, 55, 30, .12);
  max-height: 86vh;
}
html .lightbox-frame.is-landscape .lightbox-mat,
html .lightbox-frame.is-portrait .lightbox-mat,
html .lightbox-frame.is-square .lightbox-mat,
html .lightbox-mat {
  background: #fffefb;
  background-image: linear-gradient(180deg, #ffffff 0%, #fbf9f4 100%);
  padding: var(--mat) var(--mat) var(--mat-b);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06), inset 0 3px 10px rgba(60, 45, 20, .10), inset 0 0 0 calc(var(--mat) * .42) rgba(255,255,255,0), inset 0 0 0 calc(var(--mat) * .42 + 1px) rgba(184,167,128,.28);
  box-sizing: border-box;
}
html .lightbox-image {
  max-width: min(calc(94vw - 2 * var(--fr) - 2 * var(--mat) - 2 * (var(--hair) + 8px)), 1280px);
  max-height: calc(86vh - 2 * var(--fr) - var(--mat) - var(--mat-b) - 2 * (var(--hair) + 8px) - 2.2rem);
  border-radius: 0;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, .22),
    0 0 0 var(--hair) #fffefb,
    0 0 0 calc(var(--hair) + 1px) rgba(184, 167, 128, .85),
    0 0 0 calc(var(--hair) + 7px) #fffefb,
    0 0 0 calc(var(--hair) + 8px) rgba(184, 167, 128, .45);
  margin: calc(var(--hair) + 8px);
}
html .lightbox-overlay.has-side .lightbox-frame { max-width: min(calc(100vw - 370px - 3rem), 1500px); }
html .lightbox-overlay.has-side .lightbox-image {
  max-width: min(calc(100vw - 370px - 3rem - 2 * var(--fr) - 2 * var(--mat) - 2 * (var(--hair) + 8px)), 1280px);
}
html .lightbox-caption {
  margin-top: 1.5rem; font-family: 'Jost', 'Montserrat', sans-serif; font-weight: 300;
  font-size: .72rem; letter-spacing: .32em; color: #6b645c;
}
html .lightbox-nav button { background: rgba(28, 25, 21, .78); border: 0; color: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.25); }
html .lightbox-nav button:hover { background: rgba(28, 25, 21, .95); }
html .lightbox-close { color: #3a3431; font-weight: 200; }
html .lightbox-favorite { box-shadow: 0 3px 12px rgba(70, 55, 30, .22); }
@media (min-width: 960px) { html .lightbox-close { top: -2.4rem; } }
@media (max-width: 959px) {
  html .lightbox-overlay { --fr: 7px; --mat: clamp(1.1rem, 4vw, 1.8rem); --hair: 4px; }
  html .lightbox-frame { max-width: 100%; max-height: min(78dvh, calc(100dvh - 9.5rem)); }
  html .lightbox-image {
    max-width: calc(100vw - 0.9rem - 2 * var(--fr) - 2 * var(--mat) - 2 * (var(--hair) + 8px));
    max-height: min(70dvh, calc(100dvh - 12rem));
  }
  html .lightbox-nav button { width: 46px; height: 46px; }
}

/* =====================================================================
   Galerie-Uebersicht (Nov. 2026): Cassandra-Richtung
   Breites, randloses Bilder-Mauerwerk, grosses Titelbild ohne Rundung,
   zurueckhaltende Abschnitts-Titel, Bilder gleiten beim Scrollen ein.
   (Die Zeilenberechnung/Fugen des Rasters bleiben unveraendert.)
   ===================================================================== */
@media (min-width: 960px) {
  html body.gallery-focus main.container { max-width: 100%; padding-left: 10px; padding-right: 10px; }
}
/* Titelbild gross, eckig, Name links unten */
html .gallery-hero { border-radius: 0; margin: 0 0 2.6rem; min-height: clamp(280px, 56vh, 640px); max-height: min(72vh, 720px); }
html .gallery-hero img { max-height: min(72vh, 720px); min-height: clamp(280px, 56vh, 640px); object-position: center 30%; }
html .gallery-hero-shade { background: linear-gradient(180deg, rgba(14,12,10,.05) 30%, rgba(14,12,10,.62) 100%); }
html .gallery-hero-copy { padding: 0 clamp(1.1rem, 4vw, 3.4rem) clamp(1.4rem, 4vh, 3rem); text-align: left; }
html .gallery-hero-copy .open-gallery-title {
  font-family: var(--font-display); font-weight: 300; text-transform: uppercase; letter-spacing: .16em;
  font-size: clamp(1.7rem, 4.6vw, 4rem); line-height: 1.05; margin: 0 0 .5rem; text-shadow: 0 2px 26px rgba(0,0,0,.35);
}
html .gallery-hero-copy .open-gallery-meta { font-family: 'Jost','Montserrat',sans-serif; font-size: .7rem; letter-spacing: .32em; text-transform: uppercase; color: rgba(255,255,255,.9); }
html .gallery-hero-copy .welcome-couple { font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: clamp(1.2rem, 2.4vw, 1.8rem); }
/* Navigation durch die Bereiche: klein, gesperrt, mittig */
html .section-jump-nav a { font-family: 'Jost','Montserrat',sans-serif; font-size: .66rem; letter-spacing: .2em; }
@media (min-width: 960px) {
  html .section-jump-nav { justify-content: center; gap: .3rem 2.2rem; border-bottom: 1px solid #e6e2dc; padding-bottom: .9rem; }
  html .section-jump-nav a { letter-spacing: .28em; }
}
/* Abschnitts-Titel */
html .gallery-section-heading { font-weight: 300; text-transform: uppercase; letter-spacing: .24em; font-size: clamp(1.1rem, 1.8vw, 1.55rem); margin: 4.2rem 0 1.8rem; }
html .gallery-section-heading .section-heading-line { background: #1a1a1a; width: 34px; opacity: .7; }
html .gallery-section-heading .section-count { letter-spacing: .26em; font-size: .62rem; }
/* Bilder: ruhiger Hover, Einblenden beim Scrollen */
html .grid-item-overlay { background: linear-gradient(180deg, transparent 60%, rgba(20,18,15,.38) 100%); }
html .grid-item-overlay span { border: 0; backdrop-filter: none; letter-spacing: .32em; font-size: .62rem; padding: 0; }
@supports (animation-timeline: view()) {
  @keyframes fhGridIn { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: none; } }
  @media (prefers-reduced-motion: no-preference) {
    html .grid-inner.is-layout-ready .grid-item { animation: fhGridIn linear both; animation-timeline: view(); animation-range: entry 0% entry 42%; }
  }
}
/* Weitere Kaesten: eckig und hell */
html .favorites-strip { border-radius: 0; background: #fff; border-color: #e6e2dc; }
html .favorites-strip-bar button { border-radius: 0; }
html .favorites-strip-thumbs img, html .download-fav-preview-thumbs img { border-radius: 0; }
html .social-block { border-radius: 0; background: #fff; border: 0; border-top: 1px solid #e6e2dc; box-shadow: none; }

/* Buttons mit Akzent-Hintergrund (jetzt dunkel): Schrift weiss, nie dunkel auf dunkel */
html .admin-toolbar-actions button.primary, html .upload-form button, html .upload-save-gallery-btn,
html .upload-save-gallery-btn.is-saved, html .customer-scroll-fab, html .gallery-music-fab.is-playing,
html .gallery-music-yes, html .review-modal-actions .primary, html .edit-section button,
html .gallery-review-btn, html .download-btn { color: #fff; }
html .upload-save-gallery-btn:hover, html .upload-form button:hover { color: #fff; }