@font-face {
  font-family: 'Manrope';
  src: url('/assets/fonts/Manrope,Sora/Manrope/Manrope-VariableFont_wght.ttf') format('truetype');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Sora';
  src: url('/assets/fonts/Manrope,Sora/Sora/Sora-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Bonheur Royale';
  src: url('/assets/fonts/Manrope,Sora/Bonheur_Royale/BonheurRoyale-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  --color-bg: #000000;
  --color-surface: #111;
  --color-text: #fff;
  --color-text-muted: #bbb;
  --color-border: #5a5959;
  --color-accent: #a44949;
  --color-accent-hover: #ca6767;
  --color-on-accent: #fff;
  --color-footer-bg: rgba(67, 63, 63, 0.6);
  --color-footer-text: #bbb;
  --color-footer-text-strong: #fff;
  --color-footer-radial-inner: #5c5c5c;
  --color-footer-radial-outer: #000000;
}

:root[data-theme="light"] {
  --color-bg: #fff;
  --color-surface: #f7f7f5;
  --color-text: #222;
  --color-text-muted: #555;
  --color-border: #2a2929;
  --color-footer-text: #555;
  --color-footer-text-strong: #111;
  --color-footer-radial-inner: #000000;
  --color-footer-radial-outer: #ffffff;
}

body {
  letter-spacing: 0.01em;
  font-family: 'Manrope', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  transition: background 0.2s ease, color 0.2s ease;
}

.section-divider {
  max-width: 900px;
  margin: 0 auto;
  border-top: 1px solid var(--color-border);
}

.hero {
  position: relative;
  z-index: 3;
  overflow: hidden;
  display: flow-root;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  mask-image: linear-gradient(to bottom, #000 calc(100% - clamp(40px, 7vw, 100px)), transparent);
}

.hero-bg::before {
  --hero-zoom-start: 1.2;
  --hero-zoom-end: 1.85;
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: url('/assets/background-images/background_horizontal.jpeg') center top/cover no-repeat;
  transform-origin: center top;
  transform: scale(var(--hero-zoom-start));
  animation: hero-zoom 10s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes hero-zoom {
  0% {
    transform: scale(var(--hero-zoom-start));
  }

  100% {
    transform: scale(var(--hero-zoom-end));
  }
}

@media (max-width: 800px) {
  .hero-bg::before {
    --hero-zoom-start: 1.05;
    --hero-zoom-end: 1.3;
    background: url('/assets/background-images/background_vertikal.jpg') center top/cover no-repeat;
    transform-origin: center top;
  }
}

@media (max-width: 650px) {
  .hero-bg::before {
    --hero-zoom-start: 1;
    --hero-zoom-end: 1.16;
  }
}

@media (min-width: 801px) and (max-width: 1199px) {
  .hero-bg::before {
    --hero-zoom-start: 1;
    --hero-zoom-end: 1.1;
    background-position: center top;
    transform-origin: center top;
  }
}

@media (min-width: 1200px) {
  .hero-bg::before {
    --hero-zoom-start: 1;
    --hero-zoom-end: 1.12;
    background-position: center top;
    transform-origin: center top;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-bg::before {
    animation: none;
  }
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.15);
  mask-image: linear-gradient(to bottom, #000 calc(100% - clamp(40px, 7vw, 100px)), transparent);
  pointer-events: none;
}

.hero > *:not(.hero-bg) {
  position: relative;
  z-index: 3;
}

.hero .intro-text {
  color: rgba(255, 255, 255, 0.85);
  -webkit-text-stroke: 2px #000;
  paint-order: stroke fill;
}

@media (min-width: 1200px) {
  .hero {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 80px;
  }
}

.site-header {
  position: relative;
}

.stucco-feature {
  position: relative;
  isolation: isolate;
  z-index: 2;
  width: 100%;
  max-width: 1200px;
  height: clamp(220px, 40vw, 480px);
  margin: 0 auto;
  overflow: hidden;
}

.stucco-feature::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* Muted 90s print palette, blended into the relief's highlights and shadows. */
  background: linear-gradient(115deg,
    #779c99 0%,
    #aaa0b8 46%,
    #c6a18c 100%);
  mix-blend-mode: color;
  opacity: 0.65;
}

.stucco-feature::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom,
    var(--color-bg) 0%,
    transparent 20%,
    transparent 70%,
    var(--color-bg) 100%);
}

.quote-section {
  background: var(--color-bg);
  padding: clamp(42px, 6vw, 72px) 24px;
}

.kafka-quote {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

.kafka-quote p {
  font-family: 'Bonheur Royale', cursive;
  font-weight: 400;
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
  line-height: 1.2;
  letter-spacing: normal;
  color: var(--color-text);
  margin: 0 0 10px;
}

.kafka-quote cite {
  display: block;
  font-family: 'Manrope', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-style: normal;
  font-size: clamp(0.75rem, 0.65rem + 0.5vw, 1rem);
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.stucco-feature img {
  display: block;
  filter: sepia(0.18) saturate(0.65) contrast(0.82) brightness(0.85);
  width: 100%;
  height: 100%;
  object-fit: cover;
  --stucco-zoom-start: 1.28;
  --stucco-zoom-end: 1.6;
  scale: var(--stucco-zoom-start);
  animation: stucco-zoom 10s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes stucco-zoom {
  0% {
    scale: var(--stucco-zoom-start);
  }

  100% {
    scale: var(--stucco-zoom-end);
  }
}

@media (min-width: 800px) {
  .stucco-feature img {
    --stucco-zoom-start: 1.24;
    --stucco-zoom-end: 1.56;
  }
}

@media (prefers-reduced-motion: reduce) {
  .stucco-feature img {
    animation: none;
    scale: var(--stucco-zoom-start);
  }
}

.header-controls {
  position: fixed;
  top: 16px;
  right: 20px;
  z-index: 50;
  display: flex;
  gap: 8px;
}

.control-btn {
  padding: 6px 14px;
  font-family: 'Manrope', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  color: var(--color-text);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.control-btn:hover {
  background: var(--color-text);
  color: var(--color-bg);
  border-color: var(--color-text);
}

.icon-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.control-btn.icon-btn {
  padding: 0;
}

.icon-btn svg {
  width: 18px;
  height: 18px;
  display: block;
}

.icon-btn svg[hidden] {
  display: none;
}

.audio-toggle {
  position: fixed;
  top: 16px;
  left: 20px;
  z-index: 50;
}

.audio-toggle.icon-btn {
  width: clamp(48px, 4.5vw, 64px);
  height: clamp(48px, 4.5vw, 64px);
}

.audio-toggle.icon-btn svg {
  width: clamp(24px, 2.25vw, 32px);
  height: clamp(24px, 2.25vw, 32px);
}

.back-to-top {
  position: fixed;
  bottom: 100px;
  right: 20px;
  z-index: 45;
  width: clamp(48px, 4.5vw, 64px);
  height: clamp(48px, 4.5vw, 64px);
  background: var(--color-bg);
  border: 1px solid var(--color-accent);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  transition: background 0.2s ease, color 0.2s ease;
}

.back-to-top:hover,
.back-to-top:focus-visible {
  background: var(--color-accent);
  color: var(--color-on-accent);
}

.back-to-top[hidden] {
  display: none;
}

.back-to-top svg {
  width: clamp(24px, 2.25vw, 32px);
  height: clamp(24px, 2.25vw, 32px);
}

 .logo-test {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(16px, 4vw, 40px) 20px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.logo-plaque {
  padding: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.logo-wordmark-wrap {
  grid-column: 2;
  justify-self: center;
}

.logo-wordmark {
  display: block;
  width: min(50vw, 500px);
  height: auto;
}

.monkey{
    max-width: 300px;
}

.intro {
    font-family: 'Manrope', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    max-width: 700px;
    margin: 40px auto 200px;
    padding: 0 20px;
    text-align: center;
    color: var(--color-text);
}

.intro-text {
    font-size: clamp(1.05rem, 1rem + 0.2vw, 1.125rem);
    font-weight: 400;
    letter-spacing: 0.03em;
    line-height: 1.7;
    color: var(--color-text-muted);
    text-transform: uppercase;
}

.bio {
    display: flex;
    align-items: center;
    gap: 48px;
    max-width: 1000px;
    margin: 80px auto;
    padding: 0 20px;
    font-family: 'Manrope', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

@media (min-width: 721px) and (max-width: 1100px) {
    .bio { padding-inline: 48px; }
}

.bio-portrait {
    width: 280px;
    flex: 0 0 280px;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    filter: saturate(0.75) sepia(0.08) brightness(1.12) contrast(0.92);
    border-radius: 4px;
}

.bio-name {
    font-size: clamp(2rem, 1.8rem + 1vw, 2.4rem);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 16px;
    color: var(--color-accent);
}

.bio-text {
    font-size: clamp(1.1rem, 1.05rem + 0.2vw, 1.2rem);
    font-weight: 400;
    line-height: 1.75;
    color: var(--color-text-muted);
}

@media (min-width: 721px) {
    .audio-toggle {
        left: 40px;
    }

    .header-controls {
        right: 40px;
        gap: 12px;
    }

    .icon-btn {
        width: 44px;
        height: 44px;
    }

    .icon-btn svg {
        width: 21px;
        height: 21px;
    }

    .control-btn {
        padding: 9px 18px;
        font-size: 0.95rem;
    }
}

@media (min-width: 1200px) {
    .audio-toggle {
        left: 140px;
    }

    .header-controls {
        right: 140px;
        gap: 16px;
    }

    .icon-btn {
        width: 52px;
        height: 52px;
    }

    .icon-btn svg {
        width: 24px;
        height: 24px;
    }

    .control-btn {
        padding: 11px 22px;
        font-size: 1.05rem;
    }
}

@media (max-width: 720px) {
    .logo-test {
        padding-top: 76px;
    }

    .intro {
        margin-top: 80px;
    }

    .bio {
        flex-direction: column;
        text-align: center;
        gap: 24px;
        padding-inline: 32px;
    }

    .bio-content {
        display: contents;
    }

    .bio-name {
        order: -2;
        margin: 0;
    }

    .bio-portrait {
        order: -1;
        width: 200px;
        flex-basis: auto;
    }

    .bio-text {
        margin: 0;
    }
}

.references {
    max-width: 900px;
    margin: 0 auto;
    padding: clamp(50px, 10vw, 105px) 20px clamp(70px, 20vw, 225px);
    text-align: center;
    font-family: 'Manrope', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.references-title {
    font-size: clamp(2rem, 1.8rem + 1vw, 2.4rem);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 32px;
}

.references-list {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    justify-items: start;
    gap: 12px 32px;
    margin: 0;
    padding: 0;
    text-align: left;
}

.references-list li {
    font-size: 1.1rem;
    letter-spacing: 0.02em;
    color: var(--color-text-muted);
}

.references-location {
    font-size: 0.8em;
    opacity: 0.65;
}

.references-location::before {
    content: " · ";
}

.references-item--wide {
    grid-column: 1 / -1;
}

@media (min-width: 741px) {
    .references-list {
        grid-template-columns: repeat(2, max-content);
        justify-content: center;
    }

    .references-item--wide {
        justify-self: center;
        text-align: center;
    }
}

.guestbook {
  position: relative;
  /* Higher than .contact's z-index (0): in their overlap zone,
     .guestbook needs to paint on top so its own fade-to-transparent
     is what's visible, revealing .contact's photo underneath as it
     fades - not the other way around. */
  z-index: 1;
  overflow: hidden;
  min-height: clamp(360px, 58vw, 680px);
  --parallax-amplitude: 50px;
}

@media (min-width: 601px) {
  .guestbook {
    --parallax-amplitude: 100px;
  }
}

@media (min-width: 1200px) {
  .guestbook {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    --parallax-amplitude: 120px;
  }
}

/* Outer layer: stays exactly on the visible box (inset: 0) and carries
   the fade mask, clipped by overflow:hidden. The mask must sit on a
   layer sized to the visible window, not the extended parallax image
   below - otherwise the gradient percentages stretch over the wrong
   height and the carefully-tuned cross-fade breaks. */
.guestbook-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  /* Fades the photo itself to transparent over a long stretch at
     the bottom (no black band) so .contact's photo, which overlaps
     upward underneath, gradually takes over - a real cross-fade
     rather than a snap. */
  mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
}

/* Inner layer: extended above/below the visible box so the JS-driven
   translateY (scroll parallax) never reveals an edge, same pattern as
   .contact-bg. */
.guestbook-bg-img {
  position: absolute;
  top: calc(-1 * (var(--parallax-amplitude) + 40px));
  left: 0;
  right: 0;
  height: calc(100% + (var(--parallax-amplitude) + 40px) * 2);
  /* Left-centered on purpose: the atelier photo is a wide panorama
     and its most interesting part (the workbench, sculpted heads)
     sits on the left side of the frame. */
  background: url('/assets/background-images/attelier_01.jpeg') left center/cover no-repeat;
  will-change: transform;
}

.guestbook::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* Only fades in at the top (into the plain page background above);
     the bottom is handled by the mask on .guestbook-bg instead, so
     there is no opaque black band before .contact. */
  background: linear-gradient(to bottom,
    var(--color-bg) 0%,
    transparent 18%,
    transparent 100%);
}

.guestbook-link {
  position: absolute;
  right: 6%;
  top: 22%;
  z-index: 2;
  transform: translateY(-50%);
  padding: 12px 32px;
  font-family: 'Sora', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--color-accent);
  background: rgba(0, 0, 0, 0.72);
  border: 2px solid var(--color-accent);
  border-radius: 30px;
  transition: background 0.2s ease, color 0.2s ease;
}

.guestbook-link:hover,
.guestbook-link:focus-visible {
  background: var(--color-accent);
  color: #fff;
}

.site-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto 120px;
    padding: 140px 60px;
    font-family: 'Manrope', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 1.05rem;
    color: var(--color-footer-text);
    background:
        url('/assets/logos/logo01.png') center 65%/auto 45% no-repeat,
        radial-gradient(circle at center 58%, var(--color-footer-radial-inner) 0%, var(--color-footer-radial-outer) 25%);
    background-position: center 65%, center center;
    background-size: auto 52%, 100% 100%;
    animation: footer-radial-pulse 7s ease-in-out infinite;
    border-radius: 8px;
}

@keyframes footer-radial-pulse {
    0%, 100% {
        background-size: auto 52%, 100% 100%;
    }
    50% {
        background-size: auto 52%, 230% 230%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-footer {
        animation: none;
    }
}

.site-footer p {
    margin: 0 0 6px;
    line-height: 1.6;
}

.site-footer a {
    color: var(--color-accent);
    text-decoration: none;
}

.site-footer a:hover {
    color: var(--color-accent-hover);
    text-decoration: underline;
}

.footer-contact-icon {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 12px;
    vertical-align: -2px;
}

.footer-company {
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-accent);
}

.footer-legal {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.footer-link {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-size: 1rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-accent);
    text-decoration: none;
    cursor: pointer;
}

.footer-link:hover {
    color: var(--color-accent-hover);
}

@media (max-width: 1040px) {
    .site-footer {
        margin: 0 20px 120px;
    }
}

@media (min-width: 601px) {
    .site-footer {
        display: grid;
        grid-template-columns: 1fr auto;
        column-gap: 24px;
        row-gap: 8px;
        background:
            url('/assets/logos/logo01.png') center 40%/auto 65% no-repeat,
            radial-gradient(circle at center 58%, var(--color-footer-radial-inner) 0%, var(--color-footer-radial-outer) 25%);
        background-position: center 40%, center center;
        background-size: auto 72%, 100% 100%;
    }

    @keyframes footer-radial-pulse {
        0%, 100% {
            background-size: auto 72%, 100% 100%;
        }
        50% {
            background-size: auto 72%, 230% 230%;
        }
    }

    .footer-brand {
        grid-column: 1;
        grid-row: 1;
    }

    .footer-contact {
        grid-column: 1;
        grid-row: 2;
    }

    .footer-legal {
        grid-column: 2;
        grid-row: 1 / span 2;
        align-self: center;
        justify-self: end;
    }
}

@media (max-width: 600px) {
    .site-footer {
        flex-direction: column;
        justify-content: space-between;
        text-align: center;
        min-height: 580px;
        padding-top: 40px;
        padding-bottom: 40px;
        /* Fixed px offset (not %) for the logo layer, so it stays put
           regardless of how tall the footer becomes - a percentage
           here would shift the logo every time .footer-legal's
           margin-top below changes the box height. */
      
    }

    .footer-contact {
        margin-bottom: 400px;
    }

    .footer-legal {
        margin-top: 140px;
    }
}

.modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal[hidden] {
    display: none;
}

.modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}

.modal-dialog {
    position: relative;
    max-width: 560px;
    width: 90%;
    max-height: 80vh;
    background: var(--color-surface);
    border-radius: 6px;
    font-family: 'Manrope', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
}

.modal-body {
    overflow-y: auto;
    padding: 40px;
}

.modal-close {
    position: absolute;
    top: 12px;
    right: 16px;
    background: none;
    border: none;
    font-size: 1.6rem;
    line-height: 1;
    color: var(--color-text-muted);
    cursor: pointer;
    z-index: 1;
}

.modal-close:hover {
    color: var(--color-text);
}

.modal-title {
    font-size: clamp(1.8rem, 1.6rem + 1vw, 2.2rem);
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    margin-bottom: 20px;
    color: var(--color-text);
}

.modal-lorem {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--color-text-muted);
    margin-bottom: 24px;
}

.modal-details p {
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--color-text-muted);
    margin: 0 0 4px;
}

button, input, select, textarea {
  letter-spacing: inherit;
  font-family: inherit;
}

/* Headings and buttons share the display typeface across all sections. */
body :is(h1, h2, h3, h4, h5, h6, button, input[type="button"], input[type="submit"], input[type="reset"]) {
  font-family: 'Sora', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

body :is(h1, h2, h3, h4, h5, h6) {
  letter-spacing: 0.06em;
}

body :is(button, input[type="button"], input[type="submit"], input[type="reset"]) {
  letter-spacing: 0.04em;
}

.intro-services {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 24px;
}

@media (max-width: 600px) {
  .intro-services {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

.hero-gallery-link {
  display: inline-block;
  padding: 5px 8px;
  color: inherit;
  text-decoration: none;
  border-radius: 4px;
  touch-action: manipulation;
}

.hero-gallery-link:active {
  opacity: 0.65;
}

.hero-gallery-link:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 3px;
}

.hero-gallery-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  margin: 16px auto 0;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
}

.hero-gallery-arrow svg {
  width: 20px;
  height: 20px;
}

.hero-gallery-arrow:hover {
  color: #fff;
}


@media (min-width: 720px) {
  .hero .intro {
    max-width: 1120px;
    padding-inline: clamp(24px, 4vw, 48px);
  }

  .hero .intro-services {
    font-size: clamp(1.25rem, 0.5rem + 1.667vw, 1.75rem);
    line-height: 1.55;
    gap: clamp(14px, 2vw, 24px) clamp(20px, 3vw, 36px);
    overflow-wrap: anywhere;
  }
}

/* --- Gästebuch-Unterseite (html/guestbook.html) --- */

.guestbook-page-header {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px clamp(90px, 12vw, 160px);
  background: var(--color-bg);
}

@media (max-width: 500px) {
  .guestbook-page-header {
    flex-wrap: wrap;
  }
}

.guestbook-page-logo {
  display: inline-flex;
  align-items: center;
  padding: 16px;
  border-radius: 0;
  background: transparent;
  transition: background 0.2s ease;
}

:root[data-theme="light"] .guestbook-page-logo {
  background: #000;
}

.guestbook-page-logo img {
  display: block;
  height: 40px;
  width: auto;
}

.guestbook-page-header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.guestbook-page-back {
  font-family: 'Manrope', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: clamp(0.95rem, 0.85rem + 0.6vw, 1.2rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-accent);
  text-decoration: none;
}

.guestbook-page-back:hover {
  color: var(--color-accent-hover);
}

.guestbook-page-main {
  max-width: 1300px;
  margin: 0 auto;
  padding: 40px 20px 120px;
  text-align: center;
}

.guestbook-page-title {
  font-family: 'Sora', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: clamp(2rem, 1.8rem + 1vw, 2.6rem);
  font-weight: 300;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0 0 40px;
}

.guestbook-page-text {
  max-width: 640px;
  font-family: 'Manrope', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  margin: 0 auto 40px;
}

.guestbook-carousel {
  position: relative;
}

.guestbook-carousel-viewport {
  overflow: hidden;
  touch-action: pan-y;
}

.guestbook-carousel-track {
  display: flex;
  align-items: center;
  gap: 0;
  cursor: grab;
  transition: transform 0.35s ease;
  will-change: transform;
}

.guestbook-carousel-track.is-dragging {
  transition: none;
  cursor: grabbing;
}

.guestbook-carousel-slide {
  flex: 0 0 68%;
  max-width: 480px;
  margin-inline: -120px;
  height: clamp(320px, 58vh, 620px);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 24px;
  overflow: hidden;
  background: #111;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
  opacity: 0.4;
  transform: scale(0.6);
  filter: blur(3px);
  z-index: 1;
  transition: opacity 0.35s ease, transform 0.35s ease, filter 0.35s ease;
}

.guestbook-carousel-slide.is-active {
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
  z-index: 2;
  border: 3px solid var(--color-accent);
}

.guestbook-carousel-slide img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}

.guestbook-carousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease;
}

.guestbook-carousel-nav:hover,
.guestbook-carousel-nav:focus-visible {
  background: var(--color-accent);
  color: var(--color-on-accent);
}

.guestbook-carousel-nav:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.guestbook-carousel-prev {
  left: 8px;
}

.guestbook-carousel-next {
  right: 8px;
}

.guestbook-carousel-count {
  margin: 16px 0 0;
  font-family: 'Manrope', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

@media (max-width: 600px) {
  .guestbook-carousel-slide {
    flex: 0 0 80%;
    margin-inline: -70px;
    height: clamp(280px, 55vh, 480px);
  }

  .guestbook-carousel-nav {
    width: 38px;
    height: 38px;
    font-size: 1.5rem;
  }
}

.guestbook-page-footer {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px 60px;
  text-align: center;
  font-family: 'Manrope', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

.guestbook-page-footer a {
  color: var(--color-accent);
}

/* Legal pages share the existing display typeface and heading accent. */
.legal-main {
  max-width: 800px;
  margin: 0 auto;
  padding: 40px 24px 80px;
  line-height: 1.8;
  overflow-wrap: anywhere;
}
.legal-main h1, .legal-main h2 {
  color: var(--color-accent);
  line-height: 1.35;
  font-weight: 400;
}
.legal-main h1 { font-size: clamp(2rem, 6vw, 2.8rem); text-transform: uppercase; }
.legal-main h2 { font-size: clamp(1.2rem, 4vw, 1.5rem); margin-top: 2rem; }
.legal-main a, .contact-privacy a { color: var(--color-accent); text-underline-offset: 3px; }
.legal-main a:hover, .contact-privacy a:hover { color: var(--color-accent-hover); }
.legal-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px 24px; margin: 16px 0; text-transform: uppercase; }
.contact-privacy { font-size: 0.9rem; line-height: 1.6; }
@media (max-width: 600px) {
  .legal-page .guestbook-page-header { flex-wrap: wrap; gap: 16px; }
  .legal-main { padding: 24px 20px 48px; }
}

.site-footer .footer-link {
  color: var(--color-accent);
}
.guestbook-page-footer .legal-links a {
  text-decoration: none;
}
.site-footer .footer-link:hover,
.site-footer .footer-link:focus-visible,
.guestbook-page-footer .legal-links a:hover,
.guestbook-page-footer .legal-links a:focus-visible {
  color: var(--color-footer-text-strong);
}
:root[data-theme="light"] .site-footer .footer-link:hover,
:root[data-theme="light"] .site-footer .footer-link:focus-visible,
:root[data-theme="light"] .guestbook-page-footer .legal-links a:hover,
:root[data-theme="light"] .guestbook-page-footer .legal-links a:focus-visible {
  color: #000;
}

.legal-page .legal-links a { text-decoration: none; }

.legal-page a[href^="mailto:"],
.legal-page a[href^="tel:"] {
  text-decoration: none;
}

.impressum-contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 240px);
  align-items: start;
  gap: 32px;
}
.impressum-contact-layout p:first-child { margin-top: 0; }
.impressum-artwork {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}
/* Tablet: the artwork column stayed at up to 240px wide (~320px tall)
   while the short address/contact text is much shorter, so the grid
   row stretched to the image's height and pushed "Steuernummer"
   (which follows the grid) far down below the text. Shrinking the
   artwork here keeps the row height close to the text's own height. */
@media (min-width: 601px) and (max-width: 1024px) {
  .impressum-contact-layout {
    grid-template-columns: minmax(0, 320px) 140px;
    gap: 24px;
  }
  .impressum-artwork { max-width: 140px; }
}

@media (max-width: 600px) {
  .impressum-contact-layout {
    grid-template-columns: minmax(0, 240px) 100px;
    gap: 16px;
    padding-right: 16px;
  }
  .impressum-artwork { max-width: 100px; }
}
@media (max-width: 359px) {
  .impressum-contact-layout { grid-template-columns: minmax(0, 1fr); }
}