:root {
  --ink: #0d1012;
  --paper: #f4f0ec;
  --aqua: #b8dcda;
  --wine: #6d2824;
  --muted: #9c9895;
  --font-body: Arial, Helvetica, sans-serif;
  --font-display: Georgia, "Times New Roman", serif;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  width: 100%;
  overflow-x: hidden;
}
body {
  margin: 0;
  width: 100%;
  min-width: 0;
  overflow-x: hidden;
  position: relative;
  background: #f3eee9;
  color: #262424;
  font-family: var(--font-body);
}
button,
input,
textarea {
  font: inherit;
}
button,
a {
  -webkit-tap-highlight-color: transparent;
}
a {
  color: inherit;
  text-decoration: none;
}
.site-shell {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--demo-bg);
  color: var(--demo-text);
}
.legal-page {
  min-height: 100vh;
  background: #f4f0ec;
  color: #262424;
}
.legal-header {
  max-width: 980px;
  margin: 0 auto;
  padding: 28px 24px 8px;
}
.legal-header > a {
  display: inline-block;
}
.legal-content {
  width: min(880px, calc(100% - 40px));
  margin: 28px auto 80px;
  padding: clamp(28px, 5vw, 64px);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 18px 60px rgba(38, 36, 36, 0.08);
}
.legal-content h1 {
  margin: 8px 0 4px;
  font: 400 clamp(38px, 6vw, 64px)/1.08 Georgia, serif;
}
.legal-updated {
  margin: 0 0 40px;
  color: #6b6865;
}
.legal-content section {
  margin: 34px 0;
}
.legal-content h2 {
  margin: 0 0 12px;
  font: 400 26px/1.25 Georgia, serif;
}
.legal-content p {
  font-size: 16px;
  line-height: 1.72;
}
.legal-content a {
  color: #315f5e;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.legal-note {
  margin-top: 40px;
  padding: 18px 20px;
  border-left: 4px solid #4f7776;
  background: #edf4f3;
}
.legal-back {
  display: inline-block;
  margin-top: 18px;
  font-weight: 800;
}
.library-upload-error {
  max-width: 1380px;
  margin: -18px auto 28px;
  padding: 14px 18px;
  border-left: 4px solid #8d302b;
  background: #fff0ef;
  color: #6d2824;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
}
@media (max-width: 640px) {
  .legal-content {
    width: min(100% - 24px, 880px);
    margin-top: 16px;
    padding: 26px 20px;
  }
  .legal-content h2 {
    font-size: 23px;
  }
}
.demo-bar {
  position: sticky;
  top: 0;
  z-index: 80;
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 10px max(24px, calc((100vw - 1380px) / 2));
  background: rgba(9, 10, 11, 0.95);
  border-bottom: 1px solid #2d3033;
  backdrop-filter: blur(18px);
}
.demo-label {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  white-space: nowrap;
}
.demo-label span {
  padding: 5px 9px;
  border-radius: 4px;
  background: #b8dcda;
  color: #172124;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.15em;
}
.demo-label strong {
  font-size: 14px;
}
.demo-nav {
  display: flex;
  gap: 6px;
  overflow-x: auto;
}
.demo-nav button {
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: #aaa;
  padding: 10px 16px;
  cursor: pointer;
  white-space: nowrap;
  font-weight: 700;
}
.demo-nav button:hover {
  color: #fff;
}
.demo-nav button.active {
  border-color: #4b5054;
  background: #fff;
  color: #111;
}
.public-page,
.download-page {
  background: var(--demo-bg);
  color: var(--demo-text);
  min-height: 100vh;
}
.site-intro {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  background: #f2eee9;
  color: #1f3b4d;
  opacity: 1;
  transition: opacity 0.85s ease;
}
.site-intro-flash {
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 2;
  width: 62%;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.88),
    rgba(255, 255, 255, 0.5) 58%,
    transparent
  );
  opacity: 0;
  animation: intro-page-flash 0.7s 2.05s ease-out forwards;
}
.site-intro.is-closing {
  opacity: 0;
  pointer-events: none;
}
.site-intro-scene {
  position: relative;
  z-index: 1;
  display: flex;
  width: min(90vw, 520px);
  flex-direction: column;
  align-items: center;
  gap: 17px;
  text-align: center;
}
.site-intro-logo-wrap {
  position: relative;
  width: min(88vw, 460px);
  background: transparent;
  transform: translateX(-115vw);
  animation: intro-drive-in 1.7s cubic-bezier(0.1, 0.85, 0.25, 1)
    forwards;
}
.site-intro-logo {
  display: block;
  width: 100%;
  height: auto;
  background: transparent;
}
.site-intro-logo .intro-window-flash {
  fill: #fff;
  filter: drop-shadow(0 0 8px #fff) drop-shadow(0 0 15px #ffe600);
  opacity: 0;
  animation: intro-window-flash 1.1s 1.8s ease-out forwards;
}
.site-intro-logo .intro-window-rays,
.site-intro-logo .intro-box-rays {
  fill: none;
  stroke: #ffd700;
  stroke-linecap: round;
  stroke-width: 1.7;
  filter: drop-shadow(0 0 5px #ffe600);
  opacity: 0;
  animation: intro-rays 1.1s 1.8s cubic-bezier(0.05, 0.9, 0.1, 1) forwards;
}
.site-intro-logo .intro-box-rays {
  animation-delay: 2s;
}
.site-intro-strip {
  position: absolute;
  top: -80px;
  left: 50%;
  z-index: 2;
  display: flex;
  width: 72px;
  flex-direction: column;
  gap: 5px;
  padding: 5px;
  border: 2px solid #1f3b4d;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.14);
  opacity: 0;
  transform: translateX(-50%) rotate(-6deg);
  animation: intro-strip-drop 0.8s 1.9s cubic-bezier(0.34, 1.15, 0.64, 1)
    forwards;
}
.site-intro-strip span {
  display: grid;
  height: 54px;
  place-items: center;
  border-radius: 4px;
  background: linear-gradient(160deg, #cdeae1 0 48%, #f7d6c9 48% 100%);
  font-size: 22px;
  line-height: 1;
}
.site-intro-caption {
  display: grid;
  gap: 4px;
  opacity: 0;
  transform: translateY(8px);
  animation: intro-caption-in 0.7s 1s ease forwards;
}
.site-intro-caption strong {
  font: 500 30px/1.1 Georgia, serif;
}
.site-intro-caption span {
  color: #1f3443;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px;
  font-style: italic;
  letter-spacing: 0.02em;
}
.site-intro-progress {
  position: relative;
  width: min(72vw, 280px);
  height: 5px;
  margin-top: 6px;
  border: 1px solid #1f3b4d;
  border-radius: 5px;
  background: #f7f4ee;
  opacity: 0;
  animation: intro-caption-in 0.5s 1.15s ease forwards;
}
.site-intro-progress-fill {
  position: relative;
  width: 0;
  height: 100%;
  border-radius: 4px;
  background: #3f9e88;
  animation: intro-progress-fill 3.8s 0.15s linear forwards;
}
.site-intro-progress-fill::after {
  position: absolute;
  top: -21px;
  right: -12px;
  display: grid;
  width: 21px;
  height: 24px;
  place-items: center;
  border: 2px solid #1f3b4d;
  border-radius: 3px;
  background: #fff;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.14);
  content: "😍";
  font-size: 11px;
  animation: intro-photo-wiggle 0.4s infinite alternate ease-in-out;
}
@keyframes intro-drive-in {
  to {
    transform: translateX(0);
  }
}
@keyframes intro-strip-drop {
  to {
    top: 14px;
    opacity: 1;
  }
}
@keyframes intro-caption-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes intro-progress-fill {
  to {
    width: 100%;
  }
}
@keyframes intro-photo-wiggle {
  from {
    transform: rotate(-5deg);
  }
  to {
    transform: rotate(8deg);
  }
}
@keyframes intro-window-flash {
  0% {
    opacity: 0;
  }
  15% {
    opacity: 0.95;
  }
  40% {
    opacity: 0.55;
  }
  100% {
    opacity: 0;
  }
}
@keyframes intro-rays {
  0% {
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  70% {
    opacity: 0.58;
  }
  100% {
    opacity: 0;
  }
}
@keyframes intro-page-flash {
  0% {
    opacity: 0;
  }
  15% {
    opacity: 0.82;
  }
  100% {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .site-intro-logo-wrap,
  .site-intro-strip,
  .site-intro-caption,
  .site-intro-progress,
  .site-intro-progress-fill,
  .site-intro-progress-fill::after {
    animation: none;
  }
  .site-intro-flash,
  .site-intro-logo .intro-window-flash,
  .site-intro-logo .intro-window-rays,
  .site-intro-logo .intro-box-rays {
    animation: none;
    opacity: 0;
  }
  .site-intro-logo-wrap {
    transform: none;
  }
  .site-intro-strip,
  .site-intro-caption,
  .site-intro-progress {
    opacity: 1;
  }
  .site-intro-strip {
    top: 14px;
  }
  .site-intro-caption {
    transform: none;
  }
  .site-intro-progress-fill {
    width: 100%;
  }
}
.brand-header,
.download-brand {
  max-width: 1280px;
  margin: auto;
  padding: 20px 42px 14px;
}
.brand-header,
.download-brand {
  position: sticky;
  top: 0;
  z-index: 70;
  background: color-mix(in srgb, var(--demo-bg) 94%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.brand-lockup {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(26px, 5vw, 76px);
}
.brand-lockup img {
  width: clamp(190px, 23vw, 330px);
  height: auto;
  object-fit: contain;
}
.brand-lockup img.knutsch-logo {
  width: clamp(145px, 16vw, 210px);
  height: clamp(112px, 11vw, 150px);
  mix-blend-mode: multiply;
}
.brand-lockup img.fotos-logo {
  width: clamp(270px, 30vw, 455px);
  height: clamp(132px, 15vw, 205px);
  mix-blend-mode: multiply;
}
.animated-brand-logo {
  position: relative;
  display: block;
  flex: 0 0 auto;
  overflow: hidden;
}
.animated-brand-logo .fotos-logo {
  display: block;
}
.brand-camera-flash,
.brand-window-glow {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.35);
  animation: brand-flash-cycle 3s infinite;
}
.brand-camera-flash {
  left: 72.9%;
  top: 19.8%;
  width: 17%;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      rgba(255, 255, 255, 0.98) 0 8%,
      rgba(255, 241, 170, 0.95) 15%,
      rgba(255, 203, 63, 0.52) 31%,
      transparent 60%
    ),
    repeating-conic-gradient(
      from 1deg,
      rgba(229, 165, 42, 0.75) 0deg 1deg,
      transparent 1deg 8deg
    );
  filter: drop-shadow(0 0 12px rgba(255, 215, 92, 0.8));
}
.brand-window-glow {
  left: 29.4%;
  top: 38.5%;
  width: 20.5%;
  height: 28%;
  border-radius: 20%;
  background: radial-gradient(
    ellipse,
    rgba(255, 250, 210, 0.98) 0 30%,
    rgba(255, 214, 93, 0.65) 55%,
    transparent 76%
  );
  filter: drop-shadow(0 0 15px rgba(255, 211, 83, 0.85));
}
@keyframes brand-flash-cycle {
  0%,
  82%,
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.35);
  }
  85% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.08);
  }
  87% {
    opacity: 0.28;
    transform: translate(-50%, -50%) scale(0.8);
  }
  89% {
    opacity: 0.92;
    transform: translate(-50%, -50%) scale(1);
  }
  94% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.18);
  }
}
@media (prefers-reduced-motion: reduce) {
  .brand-camera-flash,
  .brand-window-glow {
    animation: none;
  }
}
.brand-slogan {
  min-width: 260px;
  border-left: 1px solid color-mix(in srgb, var(--demo-text) 22%, transparent);
  padding-left: clamp(22px, 4vw, 60px);
  text-align: left;
}
.brand-slogan strong,
.brand-slogan span {
  display: block;
  line-height: 1.08;
}
.brand-slogan strong {
  font-size: clamp(21px, 2.35vw, 33px);
  font-weight: 500;
  letter-spacing: 0.012em;
}
.brand-slogan strong i {
  color: var(--demo-accent);
  font-style: normal;
  margin: 0 0.22em;
}
.brand-slogan span {
  margin-top: 11px;
  color: var(--demo-accent);
  font-size: clamp(14px, 1.5vw, 21px);
  font-weight: 500;
  letter-spacing: 0.12em;
  white-space: normal;
}
.brand-title-break,
.brand-tagline-break {
  display: none;
}
.hero {
  max-width: 1280px;
  margin: auto;
  padding: 70px 42px 62px;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  align-items: center;
  gap: 8vw;
}
.eyebrow,
.section-kicker {
  margin: 0 0 20px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.27em;
  color: var(--demo-accent);
}
.hero-copy h1 {
  margin: 0;
  font-size: clamp(43px, 5.3vw, 76px);
  font-weight: 300;
  line-height: 0.98;
  letter-spacing: -0.045em;
}
.hero-copy h1 em {
  color: var(--demo-accent);
  font-family: Georgia, serif;
  font-weight: 400;
}
.hero-copy > p:not(.eyebrow) {
  max-width: 520px;
  color: color-mix(in srgb, var(--demo-text) 72%, transparent);
  font-size: 18px;
  line-height: 1.7;
}
.primary-link {
  display: inline-flex;
  gap: 24px;
  align-items: center;
  margin-top: 18px;
  border-bottom: 1px solid var(--demo-accent);
  padding: 12px 0;
  font-weight: 800;
}
.primary-link span {
  color: var(--demo-accent);
  font-size: 24px;
}
.hero-orbit {
  position: relative;
  justify-self: end;
  width: min(620px, 100%);
}
.hero-orbit img {
  position: relative;
  width: 88%;
  aspect-ratio: 1.35;
  object-fit: cover;
  border-radius: 50% 50% 3px 3px;
  display: block;
  margin-left: auto;
  filter: saturate(0.92);
}
.orbit-line {
  position: absolute;
  z-index: 2;
  inset: -20px -10px 15% 5%;
  border: 1px solid var(--demo-accent);
  border-radius: 50%;
  transform: rotate(-8deg);
  pointer-events: none;
}
.orbit-badge {
  position: absolute;
  z-index: 3;
  right: -10px;
  bottom: -32px;
  width: 138px;
  height: 138px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  text-align: center;
  background: var(--demo-accent);
  color: #162023;
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 17px;
  transform: rotate(7deg);
}
.rental-section {
  background: #f0ebe6;
  color: #181817;
  padding: 58px max(24px, calc((100vw - 1180px) / 2)) 120px;
}
.rental-section > .section-kicker {
  color: #6d2824;
  text-align: center;
}
.rental-intro {
  max-width: 1120px;
  margin: 0 auto;
  text-align: center;
}
.rental-intro p {
  margin: 0 0 22px;
  color: #4f7776;
  font-size: clamp(16px, 1.55vw, 20px);
  font-weight: 800;
  letter-spacing: 0.2em;
  line-height: 1.4;
}
.rental-intro h2 {
  max-width: 760px;
  margin: 0 auto;
  color: #1d2424;
  font-family: Georgia, serif;
  font-size: clamp(36px, 4.3vw, 58px);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 1.02;
}
.rental-intro + .rental-row {
  margin-top: 48px;
}
.booking-service,
.booking-process {
  max-width: 1080px;
  margin: auto;
  padding: 72px 42px 0;
  color: var(--demo-text);
}
.booking-service h2,
.booking-process h2 {
  max-width: 640px;
  margin: 0 auto 32px;
  text-align: center;
  font-family: Georgia, serif;
  font-size: clamp(36px, 4.6vw, 62px);
  font-weight: 400;
  line-height: 1.05;
  scroll-margin-top: 240px;
}
.booking-process h2 {
  font: 400 clamp(36px, 4.6vw, 62px)/1.05 Georgia, serif;
  letter-spacing: normal;
  color: #1d2424;
}
.booking-process h2 span {
  white-space: nowrap;
}
@media (min-width: 701px) {
  .booking-service h2,
  .booking-process h2 {
    max-width: 820px;
    white-space: nowrap;
  }
}
.booking-service-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 56px;
  max-width: 860px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.booking-service-list li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 15px 0;
  border-bottom: 1px solid rgba(109, 40, 36, 0.2);
  font-size: 16px;
  line-height: 1.5;
}
.booking-service-copy {
  display: grid;
  gap: 4px;
}
.booking-service-copy strong {
  font-family: var(--font-display);
  font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.25;
  font-weight: 400;
}
.booking-service-copy small {
  color: #625d5a;
  font-size: 14px;
  line-height: 1.45;
}
.booking-service-check {
  flex: 0 0 auto;
  width: 22px;
  color: #6d2824;
  font: italic 24px/1 Georgia, serif;
  margin-top: 2px;
}
.booking-service-note {
  max-width: 900px;
  margin: 0 auto 32px;
  color: #6d2824;
  font-family: Georgia, serif;
  font-size: clamp(20px, 2.1vw, 25px);
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
}
.booking-process-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 36px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.booking-process-list li {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding-top: 19px;
  border-top: 1px solid color-mix(in srgb, var(--demo-text) 20%, transparent);
}
.booking-process-number {
  flex: 0 0 auto;
  color: #4f7776;
  font: 400 34px/1.1 Georgia, serif;
}
.booking-process-list h3 {
  margin: 0 0 8px;
  font: 400 clamp(28px, 3vw, 36px)/1.2 Georgia, serif;
}
.booking-process-list p {
  margin: 0;
  color: color-mix(in srgb, var(--demo-text) 72%, transparent);
  font-size: 16px;
  line-height: 1.5;
}
.online-service-showcase {
  max-width: 1240px;
  min-height: 680px;
  margin: 92px auto 16px;
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  overflow: hidden;
  border: 1px solid #d8d0c9;
  background: #f0ebe6;
  color: #1d2424;
}
.online-service-visual {
  min-height: 680px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-right: 1px solid #d8d0c9;
  background: linear-gradient(155deg, #edf5f3 0%, #dbeae7 100%);
}
.online-service-icon {
  width: min(298px, 78%);
  aspect-ratio: 0.86;
  display: grid;
  place-items: center;
  border: 1px solid rgba(79,119,118,0.35);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.64);
  box-shadow: 0 16px 34px rgba(44, 88, 87, 0.12);
}
.online-service-icon svg {
  width: 88%;
  height: 88%;
  overflow: visible;
}
.qr-phone {
  fill: #fffdf9;
  stroke: #123f45;
  stroke-width: 4;
}
.qr-speaker,
.qr-home {
  fill: #123f45;
}
.qr-screen {
  fill: #dfecea;
}
.qr-label {
  fill: #4f7776;
  font: 700 9px Arial, sans-serif;
  letter-spacing: 1.4px;
}
.qr-code {
  fill: #123f45;
}
.qr-cutout {
  fill: #dfecea;
}
.qr-scan-corner {
  fill: #b27a31;
}
.online-service-visual p {
  margin: 30px 0 0;
  color: #6d2824;
  font: italic 28px/1.45 Georgia, serif;
  text-align: center;
}
.online-service-copy {
  padding: clamp(58px, 7vw, 96px);
  background: #fff;
}
.online-service-kicker {
  margin: 0 0 30px;
  color: #4f7776;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.2em;
}
.online-service-copy h2 {
  max-width: 660px;
  margin: 0;
  font: 400 clamp(36px, 4.6vw, 62px)/1.05 Georgia, serif;
  letter-spacing: normal;
  color: #1d2424;
}
.online-service-lead {
  max-width: 650px;
  margin: 36px 0 0;
  color: #625d5a;
  font-size: 16px;
  line-height: 1.5;
}
.online-service-options {
  margin: 52px 0 0;
  border-top: 1px solid rgba(109,40,36,0.2);
}
.online-service-options > div {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 30px;
  padding: 22px 0;
  border-bottom: 1px solid rgba(109,40,36,0.2);
}
.online-service-options dt {
  color: #6d2824;
  font-family: var(--font-display);
  font-size: clamp(18px, 1.7vw, 22px);
  font-weight: 400;
  line-height: 1.25;
}
.online-service-options dd {
  margin: 0;
  color: #625d5a;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.45;
}
@media (max-width: 700px) {
  .booking-service,
  .booking-process {
    padding: 48px 24px 0;
  }
  .booking-service h2,
  .booking-process h2 {
    margin-bottom: 24px;
  }
  .booking-service-list {
    grid-template-columns: 1fr;
    padding: 0;
  }
  .booking-service-list li {
    padding: 13px 0;
  }
  .booking-process-list {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .booking-process-list li {
    gap: 20px;
  }
  .online-service-showcase {
    min-height: 0;
    margin: 64px 18px 8px;
    grid-template-columns: 1fr;
    background: #fff;
  }
  .online-service-visual {
    min-height: 0;
    padding: 42px 24px 18px;
    border-right: 0;
    background: #fff;
  }
  .online-service-icon {
    width: min(210px, 72vw);
    border-radius: 22px;
    background: #f3f8f7;
  }
  .online-service-visual p {
    margin-top: 20px;
    font-size: 21px;
    line-height: 1.3;
  }
  .online-service-copy {
    padding: 22px 24px 60px;
  }
  .online-service-kicker {
    margin-bottom: 22px;
    font-size: 12px;
    line-height: 1.5;
  }
  .online-service-copy h2 {
    font-size: clamp(36px, 4.6vw, 62px);
    text-align: center;
  }
  .online-service-kicker {
    text-align: center;
  }
  .online-service-lead {
    margin-top: 26px;
    font-size: 16px;
  }
  .online-service-options {
    margin-top: 38px;
  }
  .online-service-options > div {
    grid-template-columns: 1fr;
    gap: 7px;
    padding: 18px 0;
  }
}
.rental-row {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  min-height: 510px;
  margin-top: 52px;
  align-items: stretch;
}
.rental-row.reverse {
  grid-template-columns: 0.84fr 1.16fr;
  margin-top: 52px;
}
.rental-image {
  overflow: hidden;
  background: #111;
}
.rental-image.light {
  background: #fff;
}
.rental-image img {
  width: 100%;
  height: 100%;
  max-height: 610px;
  display: block;
  object-fit: cover;
}
.rental-image.light img {
  object-fit: contain;
  padding: 42px;
}
.rental-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: clamp(38px, 7vw, 90px);
  background: #fff;
}
.rental-copy > span {
  color: #a6cfcd;
  font-family: Georgia, serif;
  font-size: 18px;
}
.rental-copy h2 {
  margin: 14px 0 20px;
  font-family: Georgia, serif;
  font-size: clamp(38px, 5vw, 64px);
  font-weight: 400;
}
.rental-copy p {
  max-width: 430px;
  color: #565454;
  line-height: 1.75;
  font-size: 17px;
}
.rental-features {
  display: grid;
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
.rental-features li {
  color: #6d2824;
  font-size: 16px;
  line-height: 1.5;
}
.rental-features li::before {
  margin-right: 10px;
  content: "✓";
  font: italic 21px/1 Georgia, serif;
}
.rental-copy a {
  margin-top: 20px;
  color: #6d2824;
  border-bottom: 1px solid #6d2824;
  padding-bottom: 8px;
  font-weight: 800;
}
.knutsch-slideshow {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 510px;
  overflow: hidden;
  background: #151719;
}
.knutsch-slideshow img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: none;
  display: block;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.035);
  transition:
    opacity 0.75s ease,
    transform 4.3s ease;
}
.knutsch-slideshow img.active {
  opacity: 1;
  transform: scale(1);
}
.fotobox-slideshow {
  background: #fff;
}
.fotobox-slideshow img {
  object-fit: contain;
  padding: 42px;
}
.slideshow-dots {
  position: absolute;
  z-index: 2;
  right: 20px;
  bottom: 18px;
  display: flex;
  gap: 8px;
  padding: 9px 11px;
  border-radius: 99px;
  background: rgba(18, 19, 20, 0.48);
  backdrop-filter: blur(8px);
}
.slideshow-dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.92);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition:
    transform 0.2s ease,
    background 0.2s ease;
}
.slideshow-dots button.active {
  background: #fff;
  transform: scale(1.2);
}
.slideshow-arrow {
  position: absolute;
  z-index: 3;
  top: 50%;
  width: 44px;
  height: 44px;
  padding: 0 0 4px;
  display: grid;
  place-items: center;
  transform: translateY(-50%);
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 50%;
  background: rgba(15, 28, 29, 0.52);
  color: #fff;
  font: 32px/1 Georgia, serif;
  cursor: pointer;
  backdrop-filter: blur(7px);
}
.slideshow-arrow.previous {
  left: 18px;
}
.slideshow-arrow.next {
  right: 18px;
}
.slideshow-arrow:hover,
.slideshow-arrow:focus-visible {
  background: rgba(18, 104, 105, 0.9);
}
.qr-explainer {
  max-width: 1180px;
  margin: auto;
  padding: 108px 42px;
}
.qr-intro {
  max-width: 760px;
  margin: 0 auto 48px;
  text-align: center;
}
.qr-intro h2 {
  margin: 0;
  font-family: Georgia, serif;
  font-size: clamp(36px, 4.6vw, 62px);
  font-weight: 400;
  line-height: 1.05;
}
.qr-intro > p:last-child {
  max-width: 560px;
  margin: 20px auto 0;
  color: color-mix(in srgb, var(--demo-text) 72%, transparent);
  font-size: 17px;
  line-height: 1.65;
}
.delivery-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.delivery-card {
  position: relative;
  overflow: hidden;
  min-height: 350px;
  padding: 36px;
  border: 1px solid color-mix(in srgb, var(--demo-text) 20%, transparent);
  background: color-mix(in srgb, var(--demo-text) 5%, transparent);
}
.delivery-card > span {
  position: absolute;
  top: 28px;
  right: 30px;
  color: color-mix(in srgb, var(--demo-text) 42%, transparent);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.16em;
}
.delivery-icon {
  width: 88px;
  height: 88px;
  display: grid;
  place-items: center;
  margin-bottom: 46px;
  border-radius: 50%;
  background: #fff;
  color: #4f7776;
  box-shadow: 0 8px 22px rgba(38, 36, 36, 0.08);
}
.delivery-icon svg {
  width: 47px;
  height: 47px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.delivery-card h3 {
  margin: 0 0 13px;
  font-family: Georgia, serif;
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 400;
}
.delivery-card p {
  max-width: 430px;
  margin: 0;
  color: color-mix(in srgb, var(--demo-text) 72%, transparent);
  font-size: 16px;
  line-height: 1.6;
}
.delivery-card.accent-card {
  border-color: #4f7776;
  background: #dfecea;
}
.delivery-card.accent-card .delivery-icon {
  color: #6d2824;
}
.delivery-card button,
.ghost-button {
  margin-top: 25px;
  border: 1px solid #4f7776;
  background: transparent;
  color: #294b4a;
  padding: 12px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 800;
}
.public-return {
  max-width: 760px;
  margin: 52px auto 0;
  padding: 26px 0;
  border-top: 1px solid color-mix(in srgb, var(--demo-text) 15%, transparent);
}
.public-site-card {
  width: 100%;
  display: grid;
  grid-template-columns: 190px 1fr;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--demo-accent) 40%, transparent);
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
}
.public-site-card img {
  width: 100%;
  height: 130px;
  object-fit: cover;
}
.public-site-card span {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 20px 25px;
}
.public-site-card small {
  color: var(--demo-accent);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
}
.public-site-card strong {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 500;
}
.admin-login {
  min-height: calc(100vh - 70px);
  display: grid;
  place-items: center;
  padding: 40px 20px;
  background: #ece9e4;
}
.admin-login form {
  width: min(100%, 420px);
  padding: 42px;
  background: #fff;
  border: 1px solid #d8d3cc;
}
.admin-login form > img {
  display: block;
  width: min(72%, 230px);
  height: auto;
  aspect-ratio: 2 / 1;
  object-fit: contain;
  margin: 0 auto 30px;
}
.admin-login h1 {
  margin: 0 0 28px;
  font-size: 34px;
  font-weight: 400;
}
.admin-login label {
  display: grid;
  gap: 8px;
  margin: 16px 0;
  font-size: 13px;
  font-weight: 700;
}
.admin-login input {
  width: 100%;
  padding: 12px;
  border: 1px solid #cbc5bc;
  font: inherit;
}
.login-error {
  color: #9b352e;
  font-size: 13px;
}
.settings-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}
.danger {
  color: #9b352e !important;
  border-color: #d2a4a0 !important;
}
footer {
  max-width: 1280px;
  margin: auto;
  padding: 44px 42px;
  border-top: 1px solid color-mix(in srgb, var(--demo-text) 13%, transparent);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  color: color-mix(in srgb, var(--demo-text) 60%, transparent);
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.footer-brand img {
  width: 96px;
  height: 96px;
  object-fit: contain;
  display: block;
}
.footer-brand a,
footer nav a {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.footer-credit {
  text-decoration: none;
}
footer nav {
  display: flex;
  gap: 34px;
}
.download-brand {
  display: flex;
  align-items: center;
  justify-content: center;
}
.download-brand .brand-lockup {
  justify-content: center;
}
.download-brand .brand-lockup img {
  width: 185px;
}
.download-brand .brand-lockup img.knutsch-logo {
  width: 138px;
  height: 96px;
}
.download-brand .brand-lockup img.fotos-logo {
  width: 260px;
  height: 130px;
}
.download-brand .brand-slogan {
  min-width: 190px;
  padding-left: 24px;
}
.download-brand .brand-slogan strong {
  font-size: 16px;
}
.download-brand .brand-slogan span {
  font-size: 12px;
}
.secure-chip {
  border: 1px solid color-mix(in srgb, var(--demo-accent) 40%, transparent);
  border-radius: 999px;
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 800;
  color: var(--demo-accent);
}
.secure-chip span {
  font-size: 9px;
}
.event-title {
  max-width: 1060px;
  margin: auto;
  padding: 80px 42px 55px;
  text-align: center;
  border-top: 1px solid color-mix(in srgb, var(--demo-text) 12%, transparent);
}
.event-title p {
  color: var(--demo-accent);
  font-size: 13px;
  letter-spacing: 0.28em;
}
.event-title h1 {
  margin: 26px 0 12px;
  font-family: Georgia, serif;
  font-size: clamp(42px, 6vw, 74px);
  font-weight: 400;
  line-height: 1.08;
}
.event-title time {
  display: block;
  font-size: clamp(22px, 3vw, 34px);
  font-weight: 300;
}
.event-photo {
  position: relative;
  width: min(90%, 760px);
  margin: 20px auto 0;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--demo-accent) 11%, var(--demo-bg));
}
.event-photo img {
  width: 90.9091%;
  height: 90.9091%;
  max-height: none;
  object-fit: contain;
  display: block;
}
.event-photo span {
  position: absolute;
  top: 23px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.29em;
  color: color-mix(in srgb, var(--demo-text) 66%, transparent);
}
.custom-slogan {
  max-width: 900px;
  margin: 90px auto 0;
  padding: 45px 42px;
  text-align: center;
  border-top: 1px solid color-mix(in srgb, var(--demo-text) 15%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--demo-text) 15%, transparent);
}
.custom-slogan span {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(20px, 3.1vw, 38px);
  letter-spacing: 0.15em;
  font-weight: 300;
  line-height: 1.38;
}
.custom-slogan span + span {
  color: var(--demo-accent);
}
.organizer-gallery-page {
  min-height: 100vh;
  background: var(--demo-bg);
  color: var(--demo-text);
}
.gallery-brand {
  max-width: 1280px;
  margin: auto;
  padding: 34px 42px 22px;
}
.gallery-brand .brand-lockup {
  justify-content: center;
}
.gallery-brand .brand-lockup img.knutsch-logo {
  width: 120px;
  height: 88px;
}
.gallery-brand .brand-lockup img.fotos-logo {
  width: 235px;
  height: 115px;
}
.gallery-brand .brand-slogan {
  min-width: 175px;
  padding-left: 22px;
}
.gallery-brand .brand-slogan strong {
  font-size: 15px;
}
.gallery-brand .brand-slogan span {
  font-size: 11px;
}
.gallery-login {
  width: min(1040px, calc(100% - 48px));
  min-height: 580px;
  margin: 28px auto 100px;
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  background: #fff;
  box-shadow: 0 24px 80px rgba(25, 28, 29, 0.13);
}
.gallery-login-image {
  min-height: 420px;
  overflow: hidden;
}
.gallery-login-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gallery-login form {
  align-self: center;
  padding: clamp(34px, 6vw, 70px);
}
.gallery-login h1,
.gallery-heading h1,
.gallery-empty h2 {
  margin: 0;
  font-family: Georgia, serif;
  font-weight: 400;
}
.gallery-login h1 {
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1.08;
}
.gallery-login form > p:not(.eyebrow) {
  margin: 20px 0 25px;
  color: #696765;
  line-height: 1.6;
}
.gallery-login label {
  display: grid;
  gap: 8px;
  margin: 16px 0;
  font-size: 12px;
  font-weight: 800;
}
.gallery-login input {
  width: 100%;
  padding: 12px;
  border: 1px solid #cbc5bc;
  background: #fff;
}
.gallery-heading {
  position: relative;
  isolation: isolate;
  max-width: 1120px;
  margin: 36px auto 54px;
  padding: 32px 56px 42px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--demo-accent) 24%, transparent);
  background:
    radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--demo-accent) 16%, transparent), transparent 34%),
    radial-gradient(circle at 93% 92%, rgba(181, 126, 67, 0.13), transparent 30%),
    rgba(255, 255, 255, 0.7);
  box-shadow: 0 18px 55px rgba(31, 48, 47, 0.1);
  text-align: center;
}
.gallery-heading::before,
.gallery-heading::after {
  position: absolute;
  z-index: -1;
  width: 220px;
  height: 220px;
  border: 1px solid color-mix(in srgb, var(--demo-accent) 22%, transparent);
  border-radius: 50%;
  content: "";
}
.gallery-heading::before {
  top: -155px;
  left: -86px;
}
.gallery-heading::after {
  right: -128px;
  bottom: -168px;
}
.gallery-heading-top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
}
.gallery-heading-top .eyebrow {
  margin-bottom: 0;
  grid-column: 2;
  font-size: clamp(14px, 1.25vw, 16px);
  text-align: center;
}
.gallery-logout {
  grid-column: 3;
  justify-self: end;
  border: 1px solid #6d2824;
  background: #7b302a;
  color: #fff;
  padding: 9px 13px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.gallery-logout:hover {
  border-color: #59211e;
  background: #59211e;
  color: #fff;
}
.gallery-heading h1 {
  max-width: 900px;
  margin: 44px auto 0;
  font-size: clamp(36px, 4.5vw, 56px);
  line-height: 1.08;
}
.gallery-heading time {
  display: block;
  margin-top: 16px;
  color: color-mix(in srgb, var(--demo-text) 76%, transparent);
  font-size: 18px;
}
.gallery-heading > p:last-child {
  width: fit-content;
  margin: 26px auto 0;
  padding: 8px 13px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--demo-accent) 11%, transparent);
  color: color-mix(in srgb, var(--demo-accent) 96%, var(--demo-text));
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.gallery-grid {
  width: min(1320px, calc(100% - 48px));
  margin: 0 auto 110px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.gallery-view-switch {
  width: min(1320px, calc(100% - 48px));
  margin: 0 auto 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.gallery-view-switch button {
  border: 1px solid #a8bab9;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.54);
  color: #21575a;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}
.gallery-view-switch button.active {
  border-color: #126869;
  background: #126869;
  color: #fff;
}
.gallery-comment-list {
  width: min(900px, calc(100% - 48px));
  margin: 0 auto 110px;
  display: grid;
  gap: 12px;
}
.gallery-comment-card {
  padding: 20px 22px;
  border: 1px solid #d5dddd;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 12px 30px rgba(32, 49, 49, 0.07);
}
.gallery-comment-card time {
  color: #4f7776;
  font-size: 13px;
  font-weight: 800;
}
.gallery-comment-card p {
  margin: 10px 0 14px;
  color: #253436;
  white-space: pre-wrap;
  line-height: 1.55;
}
.gallery-comment-image-link {
  border: 0;
  padding: 0;
  background: transparent;
  color: #126869;
  font-weight: 800;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.gallery-comments-empty {
  margin-top: 0;
}
.gallery-tile {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border: 0;
  padding: 0;
  background: #ddd;
  cursor: pointer;
}
.gallery-tile img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 0.45s ease;
}
.gallery-tile:hover img {
  transform: scale(1.05);
}
.gallery-tile span {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 26px 14px 12px;
  color: #fff;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.64));
  text-align: left;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
}
.gallery-comment-indicator,
.photo-comment-indicator {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 6px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: #126869;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.03em;
}
.gallery-empty {
  max-width: 680px;
  margin: 0 auto 110px;
  padding: 70px 42px;
  text-align: center;
  background: rgba(255, 255, 255, 0.56);
}
.gallery-empty h2 {
  font-size: 34px;
}
.gallery-empty p {
  color: #666260;
  line-height: 1.6;
}
.gallery-lightbox {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 28px;
  background: rgba(8, 10, 11, 0.92);
}
.gallery-lightbox > div {
  position: relative;
  max-width: min(100%, 1050px);
  max-height: 100%;
}
.gallery-lightbox img {
  max-width: 100%;
  max-height: calc(100vh - 145px);
  display: block;
  object-fit: contain;
}
.lightbox-close {
  position: absolute;
  z-index: 1;
  top: 12px;
  right: 12px;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.58);
  color: #fff;
  font-size: 27px;
  cursor: pointer;
}
.lightbox-arrow {
  position: absolute;
  z-index: 1;
  top: 50%;
  width: 50px;
  height: 72px;
  border: 0;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-family: Georgia, serif;
  font-size: 52px;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  transform: translateY(-50%);
  transition: background 0.2s ease;
}
.lightbox-arrow:hover {
  background: rgba(79, 119, 118, 0.9);
}
.lightbox-arrow.previous {
  left: 0;
}
.lightbox-arrow.next {
  right: 0;
}
.lightbox-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 16px 0 0;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.lightbox-meta .primary-button {
  padding: 12px 16px;
  letter-spacing: normal;
}
.lightbox-comment {
  flex-basis: 100%;
  margin: 0;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.94);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1.45;
  white-space: pre-wrap;
}
.lightbox-comment strong {
  display: block;
  margin-bottom: 4px;
  color: #a7dad8;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.gallery-link-field {
  display: grid;
  gap: 6px;
  margin-top: 20px;
  padding: 13px;
  background: #fff;
  border: 1px solid #ccd1d2;
}
.gallery-link-field small {
  color: #687477;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.gallery-link-field a {
  overflow-wrap: anywhere;
  color: #315d5b;
  font-size: 12px;
  font-weight: 800;
}
.gallery-settings-error {
  margin: 16px 0 0;
  color: #9b352e;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}
.gallery-settings-hint {
  margin: 10px 0 18px;
  color: #687477;
  font-size: 12px;
  line-height: 1.45;
}
.personal-message {
  max-width: 860px;
  margin: 0 auto;
  padding: 90px 42px 40px;
  text-align: center;
}
.personal-message-title {
  margin: 0 0 20px;
  color: var(--demo-accent);
  font-size: clamp(14px, 1.35vw, 17px);
  font-weight: 800;
  letter-spacing: 0.22em;
  line-height: 1.4;
  text-transform: uppercase;
}
.personal-message-title span {
  display: block;
}
.personal-message-title span + span {
  margin-top: 3px;
  font-size: 0.84em;
  letter-spacing: 0.18em;
}
.personal-message > p:last-child {
  font-family: Georgia, serif;
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.5;
}
.download-card {
  max-width: 760px;
  margin: 40px auto 110px;
  padding: clamp(28px, 5vw, 58px);
  background: #f2eeea;
  color: #171717;
  text-align: center;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.2);
}
.photo-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
}
.photo-meta small,
.photo-meta strong {
  display: block;
}
.photo-meta > div:first-child strong {
  margin-top: 6px;
  font-size: 24px;
  letter-spacing: 0.06em;
}
.remaining {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-radius: 999px;
  background: #102e43;
  color: #fff;
}
.remaining strong {
  font-size: 30px;
  color: #b8dcda;
}
.remaining span {
  font-size: 12px;
  line-height: 1.15;
}
.progress {
  height: 5px;
  margin: 34px 0 18px;
  background: #d9d3cd;
  border-radius: 99px;
  overflow: hidden;
}
.progress span {
  display: block;
  height: 100%;
  background: #5f948c;
  transition: width 0.3s;
}
.download-card > p {
  color: #4b6963;
  line-height: 1.6;
}
.download-button,
.primary-button {
  border: 0;
  background: #6d2824;
  color: #fff;
  padding: 15px 22px;
  border-radius: 4px;
  font-weight: 900;
  cursor: pointer;
}
.download-button {
  min-width: 260px;
  margin: 22px 0 18px;
}
.download-button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.download-card > small {
  display: block;
  color: #777;
}
.expired-gallery {
  width: min(1040px, calc(100% - 48px));
  margin: 80px auto 120px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #f2eeea;
  color: #242122;
  box-shadow: 0 20px 70px rgba(31, 28, 26, 0.13);
}
.expired-gallery img {
  width: 100%;
  height: 100%;
  min-height: 360px;
  object-fit: cover;
}
.expired-gallery > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(34px, 6vw, 72px);
}
.expired-gallery h1 {
  margin: 14px 0 24px;
  font-family: Georgia, serif;
  font-size: clamp(29px, 3.2vw, 43px);
  font-weight: 400;
  line-height: 1.12;
}
.expired-gallery p {
  margin: 0 0 16px;
  color: #4b6963;
  font-size: 18px;
  line-height: 1.55;
}
.expired-gallery .eyebrow {
  color: var(--demo-accent);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.2em;
}
.mini-rental {
  padding: 100px max(24px, calc((100vw - 1120px) / 2));
  background: #e7e1dc;
  color: #181817;
}
.mini-rental > h2 {
  margin: 0 0 50px;
  font-family: Georgia, serif;
  font-size: clamp(38px, 5vw, 62px);
  font-weight: 400;
}
.mini-rental > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.mini-rental article {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #f0ebe6;
  color: #161616;
  min-height: 280px;
}
.mini-rental article img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mini-rental article section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 28px;
}
.mini-rental h3 {
  margin: 10px 0 30px;
  font-family: Georgia, serif;
  font-size: 30px;
}
.mini-rental small {
  color: #6d2824;
  font-weight: 900;
}
.mini-rental a {
  font-weight: 900;
}
.app-page {
  width: 100%;
  min-width: 0;
  min-height: calc(100vh - 70px);
  overflow-x: hidden;
  display: grid;
  grid-template-columns: 250px 1fr;
  background: #f0f2f3;
  color: #172024;
}
.app-sidebar {
  position: sticky;
  top: 70px;
  height: calc(100vh - 70px);
  display: flex;
  flex-direction: column;
  padding: 26px 18px;
  background: #111518;
  color: #e8e8e6;
}
.app-sidebar > img {
  width: 160px;
  margin: 0 auto;
}
.app-sidebar > p {
  margin: 4px auto 42px;
  font-size: 10px;
  letter-spacing: 0.24em;
  color: #9cc6c5;
}
.app-sidebar nav {
  display: grid;
  gap: 6px;
}
.app-sidebar nav button {
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #abb0b2;
  padding: 13px 14px;
  text-align: left;
  cursor: pointer;
}
.app-sidebar nav button.current {
  background: #263236;
  color: #fff;
}
.admin-person {
  margin-top: auto;
  border: 0;
  border-radius: 5px;
  padding-top: 20px;
  padding-right: 0;
  padding-left: 0;
  border-top: 1px solid #30383b;
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.admin-person:hover,
.admin-person.current {
  background: #263236;
}
.admin-person > span {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #b8dcda;
  color: #172024;
  font-size: 12px;
  font-weight: 900;
}
.admin-person strong,
.admin-person small {
  display: block;
  font-size: 12px;
}
.admin-person small {
  color: #858b8e;
  margin-top: 3px;
}
.admin-logout {
  margin-top: 14px;
  border: 1px solid #465055;
  border-radius: 4px;
  padding: 10px 12px;
  background: transparent;
  color: #dde2e1;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
.admin-logout:hover {
  border-color: #a0463d;
  background: #7e2c28;
  color: #fff;
}
.app-main {
  width: min(100%, 1400px);
  min-width: 0;
  padding: 52px;
}
.account-main {
  max-width: 760px;
}
.account-settings {
  max-width: 560px;
  margin-top: 34px;
  padding: 32px;
  display: grid;
  gap: 18px;
  background: #fff;
  border: 1px solid #dde1e2;
}
.account-settings h2,
.account-settings p {
  margin: 0;
}
.account-settings > p {
  color: #5d696d;
  line-height: 1.55;
}
.account-settings label {
  display: grid;
  gap: 8px;
  font-size: 14px;
  font-weight: 800;
}
.account-settings label small {
  color: #697578;
  font-weight: 500;
}
.account-settings input {
  width: 100%;
  border: 1px solid #ccd1d2;
  padding: 11px;
  font: inherit;
}
.account-feedback {
  padding: 12px 14px;
  background: #e6f1ef;
  color: #175e5e !important;
  font-weight: 700;
}
.app-title,
.settings-heading,
.save-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}
.app-title h1 {
  margin: 4px 0;
  font-size: 44px;
}
.app-title > div > span {
  color: #667073;
}
.project-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 38px 0;
}
.project-card {
  border: 1px solid #dce0e1;
  background: #fff;
  padding: 22px;
  text-align: left;
  cursor: pointer;
  color: #182024;
  box-shadow: 0 2px 10px rgba(25, 35, 40, 0.03);
}
.project-card.selected {
  border: 2px solid #6d2824;
  padding: 21px;
  box-shadow: 0 7px 25px rgba(109, 40, 36, 0.12);
}
.project-card > div:first-child {
  display: flex;
  justify-content: space-between;
}
.project-card h2 {
  margin: 28px 0 7px;
  font-family: Georgia, serif;
  font-size: 23px;
  font-weight: 400;
}
.project-card > p {
  color: #737a7c;
}
.status {
  border-radius: 99px;
  padding: 5px 9px;
  background: #eceeee;
  font-size: 10px;
  font-weight: 900;
}
.status.active {
  color: #265f4a;
  background: #dff2e9;
}
.project-card dl {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding-top: 16px;
  border-top: 1px solid #eceeef;
}
.project-card dt {
  color: #8a9092;
  font-size: 10px;
  text-transform: uppercase;
}
.project-card dd {
  margin: 5px 0 0;
  font-weight: 900;
}
.settings-panel {
  background: #fff;
  border: 1px solid #dde1e2;
  padding: 30px;
}
.settings-heading {
  padding-bottom: 25px;
  border-bottom: 1px solid #e7e9ea;
}
.settings-heading h2 {
  margin: 4px 0 0;
  font-family: Georgia, serif;
  font-weight: 400;
  font-size: 30px;
}
.settings-heading .eyebrow,
.app-title .eyebrow {
  color: #6d2824;
  margin-bottom: 8px;
}
.admin-feedback {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 18px 0 0;
  padding: 11px 14px;
  border: 1px solid #d8e7e3;
  background: #f1f8f6;
  color: #2f655c;
  font-size: 12px;
  font-weight: 800;
}
.admin-feedback > span {
  display: inline-grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 50%;
  background: #5b8f88;
  color: #fff;
  font-size: 12px;
}
.admin-feedback.pending {
  border-color: #d9e0e2;
  background: #f5f7f7;
  color: #586468;
}
.admin-feedback.pending > span {
  background: #879397;
}
.admin-feedback.error {
  border-color: #e5c8c4;
  background: #fff4f2;
  color: #9b352e;
}
.admin-feedback.error > span {
  background: #b84a42;
}
.settings-actions button:disabled,
.save-row button:disabled {
  cursor: wait;
  opacity: 0.65;
}
.settings-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding: 28px 0;
}
.settings-block {
  min-width: 0;
  padding: 22px;
  background: #f6f7f7;
}
.activity-log {
  grid-column: 1 / -1;
  padding: 22px;
  border: 1px solid #dce2e3;
  background: #fbfcfc;
}
.activity-log-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 18px;
}
.activity-log h3,
.activity-log p {
  margin: 0;
}
.activity-log > p {
  margin-top: 9px;
  color: #5d696d;
  font-size: 13px;
  line-height: 1.45;
}
.activity-log ul {
  display: grid;
  gap: 0;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid #e0e5e6;
}
.activity-log li {
  display: grid;
  grid-template-columns: minmax(145px, auto) 1fr;
  gap: 18px;
  padding: 12px 0;
  border-bottom: 1px solid #e0e5e6;
  color: #243033;
  font-size: 14px;
  line-height: 1.4;
}
.activity-log time {
  color: #667377;
  font-variant-numeric: tabular-nums;
}
.activity-log a {
  color: #0e656a;
  font-weight: 800;
  overflow-wrap: anywhere;
}
.activity-log a:hover {
  color: #782d28;
}
.settings-block h3 {
  margin: 0 0 22px;
}
.settings-block label:not(.toggle-row),
.modal label {
  display: grid;
  gap: 8px;
  margin: 16px 0;
  font-size: 12px;
  font-weight: 800;
}
.settings-block input:not([type="color"]),
.settings-block textarea,
.modal input {
  width: 100%;
  border: 1px solid #ccd1d2;
  background: #fff;
  color: #172024;
  padding: 11px;
  border-radius: 3px;
}
.settings-block textarea {
  resize: vertical;
  font-weight: 400;
}
.event-image-choice select {
  width: 100%;
  min-width: 0;
  padding: 10px;
  border: 1px solid #ccd1d2;
  border-radius: 3px;
  background: #fff;
  font: inherit;
}
.event-image-preview {
  margin: 12px 0 20px;
}
.event-image-preview img {
  display: block;
  width: 100%;
  max-height: 180px;
  object-fit: contain;
  border: 1px solid #ccd1d2;
  border-radius: 3px;
  background: #edf0f0;
}
.event-image-preview figcaption {
  margin-top: 7px;
  color: #526065;
  font-size: 12px;
  line-height: 1.4;
}
.settings-actions .project-save-button {
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.35;
  font-weight: 700;
}
.upload-button {
  display: inline-flex !important;
  width: auto !important;
  margin-top: 16px !important;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid #bdc4c6;
  color: #303a3e;
  font-size: 12px !important;
  font-weight: 900 !important;
  cursor: pointer;
}
.upload-button input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}
.toggle-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 13px 0;
  font-size: 12px;
}
.toggle {
  width: 42px;
  height: 24px;
  padding: 3px;
  border: 0;
  border-radius: 99px;
  background: #bfc5c7;
  cursor: pointer;
}
.toggle:disabled,
.toggle.disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
.toggle span {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.2s;
}
.toggle.on {
  background: #5b8f88;
}
.toggle.on span {
  transform: translateX(18px);
}
.notice {
  padding: 12px;
  background: #f2e7de;
  color: #70462e;
  font-size: 11px;
  line-height: 1.5;
}
.color-field {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
}
.color-field > div {
  display: flex;
  align-items: center;
  gap: 8px;
}
.color-field input {
  width: 35px;
  height: 35px;
  border: 0;
  padding: 0;
  background: none;
}
.color-field code {
  min-width: 76px;
  border: 1px solid #ccd1d2;
  background: #fff;
  padding: 8px;
  font-size: 11px;
}
.contrast-preview {
  display: grid;
  gap: 5px;
  margin-top: 20px;
  padding: 20px;
  border: 3px solid;
}
.contrast-preview span {
  font-size: 11px;
  opacity: 0.78;
}
.save-row {
  padding-top: 24px;
  border-top: 1px solid #e7e9ea;
  color: #6a7275;
  font-size: 12px;
}
.save-row code {
  background: #edf1f1;
  padding: 5px;
  color: #233;
}
.library-main {
  min-width: 0;
}
.library-title {
  padding-bottom: 30px;
}
.library-total {
  min-width: 138px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px 18px;
  background: #172024;
  color: #fff;
}
.library-total strong {
  font-family: Georgia, serif;
  color: #b8dcda;
  font-size: 34px;
  font-weight: 400;
}
.library-total span {
  font-size: 11px;
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.library-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(230px, 0.7fr) minmax(
      160px,
      0.4fr
    );
  gap: 12px;
  padding: 18px;
  background: #fff;
  border: 1px solid #dde1e2;
}
.library-toolbar label {
  display: grid;
  gap: 7px;
  color: #687174;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.library-toolbar label.library-upload-control {
  position: relative;
  align-self: end;
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  border: 1px solid #6d2824;
  background: #6d2824;
  color: #fff;
  cursor: pointer;
}
.library-upload-control span {
  pointer-events: none;
}
.library-upload-control input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  opacity: 0;
  cursor: pointer;
}
.library-upload-control:has(input:disabled) {
  border-color: #b9c0c2;
  background: #e7eaeb;
  color: #7d878a;
  cursor: not-allowed;
}
.library-toolbar input,
.library-toolbar select {
  width: 100%;
  height: 44px;
  border: 1px solid #ccd1d2;
  border-radius: 3px;
  background: #f8f9f9;
  color: #172024;
  padding: 0 12px;
}
.library-search {
  position: relative;
  align-self: end;
}
.library-search > span {
  position: absolute;
  left: 14px;
  bottom: 10px;
  z-index: 1;
  color: #6d2824;
  font-size: 22px;
  line-height: 1;
}
.library-search input {
  padding-left: 43px;
}
.library-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 26px 0 17px;
}
.library-summary strong,
.library-summary span {
  display: block;
}
.library-summary strong {
  font-size: 17px;
}
.library-summary > div span {
  margin-top: 4px;
  color: #747d80;
  font-size: 12px;
}
.library-summary p {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: #526064;
  font-size: 12px;
}
.secure-dot {
  color: #31845f;
}
.photo-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.photo-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #dce0e1;
  background: #fff;
  color: #172024;
  padding: 0;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(25, 35, 40, 0.035);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;
}
.photo-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(25, 35, 40, 0.13);
}
.photo-thumb {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #dfe3e4;
}
.photo-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.photo-thumb.deleted img {
  filter: grayscale(1);
  opacity: 0.22;
}
.photo-thumb.deleted > span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #5d6669;
  font-weight: 900;
}
.photo-status {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 6px 8px;
  border-radius: 99px;
  background: #dff2e9;
  color: #265f4a;
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.photo-status.gesperrt {
  background: #f5e5cb;
  color: #7b5421;
}
.photo-status.limit,
.photo-status.abgelaufen {
  background: #f5e5cb;
  color: #7b5421;
}
.photo-status.gelöscht {
  background: #e6e8e8;
  color: #656d70;
}
.photo-comment-indicator {
  z-index: 1;
}
.photo-info {
  padding: 15px;
}
.photo-info > div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.photo-info > div small {
  color: #7e878a;
}
.photo-info > span {
  display: block;
  margin-top: 8px;
  color: #6d2824;
  font-size: 11px;
  font-weight: 900;
}
.photo-info p {
  overflow: hidden;
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid #edf0f0;
  color: #687174;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.photo-guest-comment {
  margin: 20px 0 0;
  padding: 14px;
  background: #edf7f6;
  color: #1f4c4d;
}
.photo-guest-comment strong {
  display: block;
  margin-bottom: 6px;
  font-size: 13.2px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.photo-guest-comment p {
  margin: 0;
  white-space: pre-wrap;
  line-height: 1.5;
}
.library-empty {
  padding: 90px 20px;
  border: 1px dashed #cbd0d2;
  background: #fff;
  text-align: center;
}
.library-empty > span {
  color: #9fa8aa;
  font-size: 50px;
}
.library-empty h2 {
  font-family: Georgia, serif;
  font-size: 30px;
  font-weight: 400;
}
.library-empty p {
  color: #747d80;
}
.photo-detail {
  position: relative;
  width: min(980px, 100%);
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  overflow: hidden;
  background: #fff;
  color: #172024;
  box-shadow: 0 30px 120px rgba(0, 0, 0, 0.4);
}
.photo-detail .modal-close {
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
}
.detail-image {
  min-height: 560px;
  background: #161a1c;
}
.detail-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.deleted-detail {
  height: 100%;
  min-height: 560px;
  display: grid;
  place-items: center;
  color: #d8dddd;
  font-size: 18px;
  font-weight: 800;
}
.detail-copy {
  padding: 52px 38px 38px;
}
.detail-copy h2 {
  margin: 6px 0 14px;
  font-family: Georgia, serif;
  font-size: 13px;
  line-height: 1.15;
  font-weight: 400;
  overflow-wrap: anywhere;
}
.detail-copy > p:not(.eyebrow) {
  color: #687174;
  line-height: 1.65;
}
.photo-project-title {
  color: #30383b;
  font-weight: 900;
}
.detail-copy dl {
  margin: 30px 0;
  border-top: 1px solid #e4e7e8;
}
.detail-copy dl > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid #e4e7e8;
}
.detail-copy dt {
  color: #777f82;
}
.detail-copy dd {
  margin: 0;
  font-weight: 900;
  text-align: right;
}
.detail-actions {
  display: grid;
  gap: 10px;
}
.detail-actions a.primary-button {
  text-align: center;
}
.secret-photo-link {
  margin: -10px 0 22px;
  padding: 14px;
  border: 1px solid #d7dedf;
  background: #f4f7f6;
}
.photo-guest-comment + .secret-photo-link {
  margin-top: 10px;
}
.secret-photo-link small {
  display: block;
  margin-bottom: 7px;
  color: #687174;
  font-weight: 800;
}
.secret-photo-link a {
  display: block;
  overflow-wrap: anywhere;
  color: #126869;
  font-weight: 800;
}
.secret-photo-link button {
  margin-top: 10px;
  border: 0;
  padding: 0;
  background: transparent;
  color: #126869;
  font-weight: 900;
  cursor: pointer;
}
.single-photo-page {
  min-height: 100vh;
}
.single-photo-card {
  width: min(880px, calc(100% - 32px));
  margin: 0 auto 72px;
  padding: 10px;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(240px, 0.55fr);
  gap: 28px;
  align-items: center;
  background: #fff;
  box-shadow: 0 18px 60px rgba(22, 49, 50, 0.14);
}
.single-photo-card img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 590px;
  justify-self: center;
  background: transparent;
}
.single-photo-card > div {
  min-width: 0;
}
.single-photo-title {
  margin: 0 0 16px;
  color: #262424;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(30px, 3.2vw, 42px);
  font-weight: 400;
  line-height: 1.08;
}
.single-photo-title-mobile {
  display: none;
}
.single-photo-card small,
.single-photo-card strong {
  display: block;
}
.single-photo-card strong {
  margin: 5px 0 18px;
  overflow-wrap: anywhere;
  color: #126869;
  font-size: 1.15rem;
}
.single-photo-card p {
  margin-bottom: 24px;
  color: #687174;
  line-height: 1.55;
}
.single-photo-card .download-button {
  display: block;
  width: 100%;
  min-width: 0;
  text-align: center;
  text-decoration: none;
}
.guest-comment-form {
  display: grid;
  gap: 10px;
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid #d7dedf;
}
.guest-comment-form label {
  display: grid;
  gap: 8px;
  color: #253436;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.45;
}
.guest-comment-form textarea {
  width: 100%;
  resize: vertical;
  border: 1px solid #c9d2d2;
  background: #f1f3f3;
  padding: 10px;
  color: #172024;
  font: inherit;
  font-size: 14px;
  line-height: 1.45;
}
.guest-comment-button {
  border: 0;
  padding: 11px 14px;
  background: #126869;
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}
.guest-comment-button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.guest-comment-form > small {
  color: #4f7776;
  font-size: 12px;
  line-height: 1.4;
}
.download-button.disabled {
  opacity: 0.5;
}
.single-photo-loading {
  min-height: 70vh;
  display: grid;
  place-items: center;
  color: #126869;
  font-weight: 800;
}
.unavailable-photo {
  width: min(760px, calc(100% - 32px));
  min-height: 560px;
  margin: 0 auto;
  padding: 72px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.unavailable-symbol {
  width: 82px;
  height: 82px;
  margin-bottom: 26px;
  display: grid;
  place-items: center;
  border: 2px solid #126869;
  border-radius: 50%;
  color: #126869;
  font-size: 42px;
  transform: rotate(180deg);
}
.unavailable-photo h1 {
  max-width: 700px;
  margin: 8px 0 22px;
  font-family: Georgia, serif;
  font-size: clamp(30px, 5vw, 48px);
  font-weight: 400;
  line-height: 1.12;
}
.unavailable-photo > p:not(.eyebrow) {
  max-width: 620px;
  margin: 5px 0;
  color: #687174;
  font-size: 17px;
  line-height: 1.65;
}
@media (max-width: 720px), (max-device-width: 720px) {
  .single-photo-card {
    grid-template-columns: 1fr;
  }

  .single-photo-title-mobile {
    display: block;
    margin: 0;
    padding: 14px 12px 2px;
    text-align: center;
  }

  .single-photo-title-desktop {
    display: none;
  }
}
.detail-actions .primary-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.ghost-admin {
  border: 1px solid #bdc4c6;
  background: #fff;
  color: #303a3e;
  padding: 13px;
  font-weight: 900;
  cursor: pointer;
}
.detail-copy > small {
  display: block;
  margin-top: 24px;
  color: #7d8588;
  line-height: 1.5;
}
.modal-backdrop {
  position: fixed;
  z-index: 100;
  inset: 0;
  background: rgba(5, 8, 10, 0.72);
  display: grid;
  place-items: center;
  padding: 20px;
}
.modal {
  position: relative;
  width: min(620px, 100%);
  background: #fff;
  color: #172024;
  padding: 40px;
  box-shadow: 0 30px 120px rgba(0, 0, 0, 0.35);
}
.modal-close {
  position: absolute;
  right: 18px;
  top: 14px;
  border: 0;
  background: none;
  font-size: 30px;
  cursor: pointer;
}
.modal h2 {
  font-family: Georgia, serif;
  font-size: 36px;
  font-weight: 400;
}
.two-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.full {
  width: 100%;
  margin-top: 18px;
}
.success-state {
  text-align: center;
  padding: 20px 0;
}
.success-state > span {
  width: 64px;
  height: 64px;
  margin: auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #dff2e9;
  color: #276247;
  font-size: 32px;
}
.success-state p {
  line-height: 1.6;
}
.box-screen {
  min-height: calc(100vh - 70px);
  background: #0d1114;
  color: #f5f5f3;
}
.box-screen > header {
  height: 62px;
  padding: 0 max(24px, calc((100vw - 1120px) / 2));
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #2a3034;
  font-size: 12px;
  letter-spacing: 0.09em;
}
.box-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 9px;
  border-radius: 50%;
  background: #73dba4;
  box-shadow: 0 0 12px #73dba4;
}
.box-screen time {
  color: #73dba4;
}
.box-content {
  max-width: 1120px;
  margin: auto;
  padding: 75px 42px 100px;
  text-align: center;
}
.box-content h1 {
  margin: 0;
  font-size: clamp(42px, 5vw, 68px);
  font-weight: 300;
  letter-spacing: -0.04em;
}
.box-content > p:not(.eyebrow) {
  color: #959da1;
}
.box-projects {
  max-width: 860px;
  margin: 42px auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.box-projects button {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 20px;
  border: 1px solid #343b3f;
  background: #171c20;
  color: #fff;
  text-align: left;
  cursor: pointer;
}
.box-projects button.selected {
  border-color: #b8dcda;
  background: #1b2b2e;
  box-shadow: 0 0 0 1px #b8dcda inset;
}
.box-projects button > span {
  width: 28px;
  height: 28px;
  border: 1px solid #596166;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #172024;
}
.box-projects button.selected > span {
  background: #b8dcda;
  border-color: #b8dcda;
}
.box-projects strong,
.box-projects small {
  display: block;
}
.box-projects small {
  margin-top: 6px;
  color: #8d969a;
}
.folder-card {
  max-width: 860px;
  margin: 0 auto 45px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background: #232a2e;
  text-align: left;
}
.folder-icon {
  font-size: 30px;
  color: #b8dcda;
}
.folder-card small,
.folder-card strong {
  display: block;
}
.folder-card small {
  color: #91999c;
  font-size: 10px;
  letter-spacing: 0.14em;
}
.folder-card strong {
  margin-top: 5px;
}
.live-pill {
  margin-left: auto;
  padding: 7px 10px;
  border-radius: 99px;
  background: #183c2c;
  color: #7fe0a6;
  font-size: 11px;
}
.upload-flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 20px;
  align-items: center;
  margin: 60px 0 40px;
}
.upload-flow div {
  display: grid;
  gap: 9px;
  justify-items: center;
}
.upload-flow div > span {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #b8dcda;
  color: #172024;
  font-weight: 900;
}
.upload-flow small {
  color: #7f898e;
}
.upload-flow i {
  color: #5b6569;
  font-size: 25px;
}
.upload-test {
  border: 0;
  border-radius: 3px;
  padding: 15px 24px;
  background: #b8dcda;
  color: #172024;
  font-weight: 900;
  cursor: pointer;
}
.upload-toast {
  max-width: 520px;
  margin: 18px auto;
  padding: 14px;
  background: #1d282b;
  color: #b8dcda;
}
.spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 8px;
  border: 2px solid #486267;
  border-top-color: #b8dcda;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  vertical-align: -2px;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.offline-note {
  margin-top: 70px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 20px;
  align-items: center;
  padding: 20px;
  border: 1px solid #31383c;
  text-align: left;
  color: #9da5a8;
}
.offline-note strong {
  color: #fff;
}
.offline-note b {
  color: #b8dcda;
}

@media (max-width: 1000px), (max-device-width: 1000px), (hover: none) and (pointer: coarse) {
  html,
  body {
    max-width: 100vw;
  }
  .site-shell,
  .app-page {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .brand-title-break {
    display: block;
  }
  .brand-slogan strong i {
    margin-left: 0;
  }
  .hero {
    grid-template-columns: 1fr;
  }
  .hero-orbit {
    width: 88%;
    margin-top: 30px;
  }
  .project-grid,
  .settings-grid {
    grid-template-columns: 1fr;
  }
  .activity-log li {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .app-page {
    display: flex;
    flex-direction: column;
  }
  .app-sidebar {
    position: static;
    width: 100%;
    max-width: none;
    min-width: 0;
    height: auto;
    display: block;
    box-sizing: border-box;
  }
  .app-sidebar nav {
    display: flex;
    flex-wrap: wrap;
    overflow-x: visible;
  }
  .app-sidebar nav button {
    min-width: 0;
    white-space: normal;
  }
  .admin-person {
    display: none;
  }
  .app-main {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  .mini-rental > div {
    grid-template-columns: 1fr;
  }
  .photo-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .gallery-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 720px), (max-device-width: 720px) {
  .demo-bar {
    align-items: flex-start;
    flex-direction: column;
    padding: 10px 14px;
  }
  .demo-label strong {
    display: none;
  }
  .demo-nav {
    width: 100%;
  }
  .demo-nav button {
    font-size: 12px;
    padding: 9px 12px;
  }
  .brand-header,
  .download-brand {
    padding: 14px 20px;
  }
  .brand-lockup {
    gap: 15px;
  }
  .brand-lockup .animated-brand-logo {
    width: 50%;
    max-width: 50%;
  }
  .brand-lockup .animated-brand-logo img.fotos-logo,
  .download-brand .brand-lockup .animated-brand-logo img.fotos-logo,
  .gallery-brand .brand-lockup .animated-brand-logo img.fotos-logo {
    width: 100%;
    height: auto;
  }
  .brand-slogan {
    min-width: 0;
    padding-left: 15px;
  }
  .brand-slogan strong,
  .brand-slogan span {
    font-size: 13px;
  }
  .hero {
    padding: 45px 24px 56px;
  }
  .rental-section {
    padding-top: 44px;
  }
  .rental-intro p {
    margin-bottom: 16px;
    font-size: 14px;
    letter-spacing: 0.14em;
  }
  .rental-intro h2 {
    font-size: clamp(32px, 8.8vw, 42px);
  }
  .rental-intro + .rental-row {
    margin-top: 32px;
  }
  .rental-row,
  .rental-row.reverse {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .rental-row.reverse .rental-copy {
    order: 2;
  }
  .rental-image {
    min-height: 330px;
  }
  .rental-copy {
    padding: 42px 30px;
  }
  .knutsch-slideshow {
    min-height: 330px;
  }
  .qr-explainer {
    padding: 74px 24px;
  }
  .delivery-options {
    grid-template-columns: 1fr;
  }
  .delivery-card {
    min-height: 0;
    padding: 30px;
  }
  .delivery-icon {
    width: 70px;
    height: 70px;
    margin-bottom: 30px;
  }
  footer {
    flex-direction: column;
    padding: 34px 24px;
  }
  footer nav {
    flex-wrap: wrap;
    gap: 16px;
  }
  .download-brand {
    align-items: center;
  }
  .download-brand .brand-lockup {
    width: 100%;
  }
  .download-brand .secure-chip {
    font-size: 9px;
  }
  .public-site-card {
    grid-template-columns: 125px 1fr;
  }
  .public-site-card img {
    height: 112px;
  }
  .public-site-card strong {
    font-size: 17px;
  }
  .event-title {
    padding: 55px 24px 35px;
  }
  .event-photo {
    width: calc(100% - 32px);
  }
  .photo-meta {
    align-items: flex-start;
    gap: 25px;
    flex-direction: column;
  }
  .download-card {
    margin-left: 16px;
    margin-right: 16px;
  }
  .expired-gallery {
    width: calc(100% - 40px);
    margin: 40px auto 72px;
    grid-template-columns: 1fr;
  }
  .expired-gallery img {
    width: 80%;
    height: min(62.4vw, 312px);
    min-height: 0;
    justify-self: center;
  }
  .expired-gallery > div {
    padding: 36px 30px;
    text-align: center;
  }
  .mini-rental article {
    grid-template-columns: 1fr;
  }
  .mini-rental article img {
    height: 260px;
  }
  .mini-rental article:nth-child(2) section {
    order: 2;
  }
  .app-main {
    width: 100%;
    max-width: none;
    min-width: 0;
    padding: 30px 18px;
  }
  .app-title,
  .app-title > div,
  .project-grid,
  .project-card {
    width: 100%;
    min-width: 0;
  }
  .app-title h1 {
    max-width: 100%;
    font-size: clamp(34px, 11vw, 44px);
    overflow-wrap: anywhere;
  }
  .project-card > div:first-child {
    min-width: 0;
    gap: 12px;
    flex-wrap: wrap;
  }
  .app-title,
  .settings-heading,
  .save-row {
    align-items: flex-start;
    flex-direction: column;
  }
  .project-grid {
    grid-template-columns: 1fr;
  }
  .save-row code {
    display: block;
    margin-top: 8px;
    overflow-wrap: anywhere;
  }
  .box-content {
    padding: 55px 20px;
  }
  .box-projects {
    grid-template-columns: 1fr;
  }
  .folder-card {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .folder-card strong {
    overflow-wrap: anywhere;
  }
  .upload-flow {
    grid-template-columns: 1fr;
  }
  .upload-flow i {
    transform: rotate(90deg);
  }
  .offline-note {
    grid-template-columns: 1fr;
  }
  .modal {
    padding: 32px 22px;
  }
  .two-fields {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .library-title,
  .library-summary {
    align-items: flex-start;
    flex-direction: column;
  }
  .library-toolbar {
    grid-template-columns: 1fr;
  }
  .photo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .gallery-brand {
    padding: 24px 18px 14px;
  }
  .gallery-brand .brand-lockup {
    gap: 14px;
  }
  .gallery-brand .brand-slogan {
    min-width: 0;
    padding-left: 14px;
  }
  .gallery-login {
    width: calc(100% - 32px);
    grid-template-columns: 1fr;
    margin: 18px auto 70px;
  }
  .gallery-login-image {
    min-height: 230px;
  }
  .gallery-login form {
    padding: 36px 26px;
  }
  .gallery-heading {
    width: calc(100% - 32px);
    margin: 20px auto 32px;
    padding: 22px 22px 30px;
  }
  .gallery-heading-top {
    align-items: flex-start;
  }
  .gallery-heading h1 {
    margin-top: 34px;
  }
  .gallery-grid {
    width: calc(100% - 32px);
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 75px;
  }
  .gallery-view-switch,
  .gallery-comment-list {
    width: calc(100% - 32px);
  }
  .gallery-view-switch button {
    flex: 1 1 0;
    padding-inline: 10px;
  }
  .gallery-comment-list {
    margin-bottom: 75px;
  }
  .lightbox-meta {
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
  }
  .lightbox-arrow {
    width: 42px;
    height: 62px;
    font-size: 44px;
  }
  .photo-info > div {
    display: grid;
  }
  .photo-detail {
    grid-template-columns: 1fr;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
  }
  .detail-image {
    min-height: 300px;
  }
  .detail-copy {
    padding: 34px 24px;
  }
}
@media (max-width: 420px) {
  .brand-tagline-break {
    display: block;
  }
  .brand-slogan span {
    line-height: 1.35;
  }
}