:root {
      --wrap: 1200px;
      --gap: clamp(62px, 2.2vw, 34px);
      --portraitW: 260px;
      --portraitH: 390px;
      --landW: 380px;
      --landH: 285px;
      --overlay: .75;
      --dur: .45s;
      --ease: cubic-bezier(.22,.61,.36,1);
      --stagger: .35s;
      --fade-distance: 24px;
      --fade-dur: .65s;
      --content-pad: clamp(32px, (100vw - var(--wrap)) / 2, 160px);
    }

    body {
      font-family: "Roboto", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif !important;
      background: linear-gradient(120deg, #fafafa 0%, #f3f3f3 50%, #fafafa 100%);
      background-size: 100% 100%;
      color: #0f0f0f;
      margin: 0;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }

    .page-transition-overlay {
      position: fixed;
      inset: 0;
      background: #ffffff;
      opacity: 0;
      pointer-events: none;
      transition: opacity .32s cubic-bezier(.22, .61, .36, 1);
      z-index: 9999;
    }

    .page-transition-overlay.is-active {
      opacity: 1;
      pointer-events: auto;
    }

    /* Header & Navigation */
    .wrap {
      box-sizing: border-box;
      width: 100%;
      padding: 36px var(--content-pad);
    }

    header {
      max-width: var(--wrap);
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 24px;
      border-bottom: 0px solid #e9e9e9;
    }

    .brand {
      display: inline-flex;
      align-items: center;
      max-height: 48px;
    }

    .brand-logo {
      display: block;
      height: 35px;
      width: auto;
    }

    .burger {
      border: 0;
      background: transparent;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 10px;
      margin: -10px;
    }

    .burger .lines {
      position: relative;
      width: 24px;
      height: 18px;
    }

    .burger .lines::before,
    .burger .lines::after,
    .burger .line {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      height: 1.5px;
      background: #111;
      transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
    }

    .burger .line { top: 50%; transform: translateY(-50%); }
    .burger .lines::before { top: 0; }
    .burger .lines::after { bottom: 0; }

    .burger[aria-expanded="true"] .line { opacity: 0; }
    .burger[aria-expanded="true"] .lines::before,
    .burger[aria-expanded="true"] .lines::after {
      opacity: 1;
    }
    .burger[aria-expanded="true"] .lines::before { transform: translateY(8.5px) rotate(45deg); }
    .burger[aria-expanded="true"] .lines::after { transform: translateY(-8.5px) rotate(-45deg); }

    /* Burger Overlay Navigation */
    .nav-drawer {
      position: fixed;
      inset: 0;
      display: grid;
      place-items: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity var(--dur) var(--ease);
      z-index: 9999;
    }

    .nav-drawer::before {
      content: "";
      position: absolute;
      inset: 0;
      background: rgba(255,255,255,.92);
      backdrop-filter: blur(8px) saturate(120%);
    }

    .nav-drawer.open {
      opacity: 1;
      pointer-events: auto;
    }

    .nav-drawer ul {
      list-style: none;
      margin: 0;
      padding: 0;
      position: relative;
      z-index: 2;
      text-align: center;
    }

    .nav-drawer a {
      display: block;
      padding: 8px 0;
      font-size: clamp(18px, 2.4vw, 26px);
      font-weight: lighter;
      text-decoration: none;
      color: #353535;
      transition: color var(--dur) var(--ease), transform var(--dur) var(--ease);
    }

    .nav-drawer a:hover,
    .nav-drawer a:focus-visible {
      color: rgba(17, 17, 17, .55);
      transform: translateY(-2px);
    }

    .nav-drawer a:active {
      color: rgba(17, 17, 17, .4);
      transform: translateY(1px);
    }

    /* Galerie */
    main {
      padding: clamp(96px, 12vmin, 168px) 0 clamp(72px, 10vmin, 144px);
      flex: 1;
    }

    .gallery-wrap {
      box-sizing: border-box;
      width: 100%;
      padding: 0 var(--content-pad);
      display: flex;
      align-items: center;
      overflow-x: auto;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      -ms-overflow-style: none;
    }

    .gallery-wrap::-webkit-scrollbar {
      display: none;
    }

    .worklist {
      max-width: none;
      margin: 0;
      display: flex;
      flex-wrap: nowrap;
      justify-content: flex-start;
      gap: var(--gap);
      list-style: none;
      padding: 0;
      align-items: center;
      scroll-snap-type: x proximity;
      width: max-content;
    }

    .worklist li {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      opacity: 0;
      transform: translateY(var(--fade-distance));
      animation: galleryFade var(--fade-dur) var(--ease) forwards;
      animation-delay: calc(var(--order, 0) * var(--stagger));
      scroll-snap-align: start;
    }


    .thumb {
      display: block;
      background: #f4f4f4;
      overflow: hidden;
    }

    .worklist li[data-orientation="portrait"] .thumb {
      width: var(--portraitW);
      height: var(--portraitH);
      aspect-ratio: 2 / 3;
    }

    .worklist li[data-orientation="landscape"] .thumb {
      width: var(--landW);
      height: var(--landH);
      aspect-ratio: 4 / 3;
    }

    .thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform .6s ease;
      display: block;
    }

    .worklist li:hover .thumb img {
      transform: scale(1.02);
    }

    @keyframes galleryFade {
      from {
        opacity: 0;
        transform: translateY(var(--fade-distance));
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }


    /* Hover Effekt auf inaktive Bilder */
    .worklist li::after {
      content: "";
      position: absolute;
      inset: 0;
      background: rgba(255, 255, 255, var(--overlay));
      opacity: 0;
      transition: opacity var(--dur) var(--ease);
      pointer-events: none;
    }

    .worklist.is-hovering li:not(.is-active)::after {
      opacity: 1;
    }

    /* Bottom Info Bar */
    .hover-bar {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 90px;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 6px;
      padding: 0;
      font-size: 14px;
      transform: translateY(calc(100% + 90px));
      opacity: 0;
      transition: transform .35s ease, opacity .35s ease;
      z-index: 1000;
    }

    .hover-bar.show {
      transform: translateY(0);
      opacity: 1;
    }

    .hover-bar .name { font-weight: 600; }
    .hover-bar .sep { opacity: .35; }

    /* Responsiv */
    @media (max-width: 1100px) {
      .worklist {
        max-width: var(--wrap);
        width: 100%;
        flex-wrap: wrap;
        justify-content: center;
        gap: clamp(24px, 5vw, 40px);
      }

      .worklist li[data-orientation] {
        flex: 0 0 calc((100% - var(--gap)) / 2);
      }

      .worklist li[data-orientation] .thumb {
        width: 100%;
        height: auto;
      }
    }

@media (max-width: 650px) {
  .worklist {
    gap: 16px;
  }

  .worklist li[data-orientation] {
    flex: 0 0 calc((100% - var(--gap)) / 2);
    order: var(--mobile-order, initial);
  }

  .worklist li[data-orientation] .thumb {
    width: 100%;
    height: auto;
      }
    }

    .site-footer {
      text-align: center;
      font-size: 12px;
      font-weight: 300;
      color: #000;
      margin: 40px 0 20px;
      letter-spacing: .02em;
    }

    .site-footer a {
      color: inherit;
      text-decoration: none;
    }

    .site-footer a:hover,
    .site-footer a:focus {
      text-decoration: underline;
    }

    .contact-main {
      min-height: calc(100vh - 220px);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: clamp(48px, 12vw, 96px) var(--content-pad) clamp(32px, 10vw, 72px);
      background: #fff;
    }

    .contact-card {
      max-width: 520px;
      width: 100%;
      text-align: center;
      padding: clamp(24px, 5vw, 40px);
      margin-top: -60px;
      font-weight: 300;
    }

    .contact-card h1 {
      margin: 0 0 16px;
      font-size: clamp(24px, 4vw, 36px);
      font-weight: 300;
      letter-spacing: .08em;
    }

    .contact-card h2 {
      font-weight: 400;
      letter-spacing: .04em;
    }

    .contact-card p {
      font-weight: 300;
    }

    .contact-intro {
      margin: 0 auto clamp(24px, 6vw, 40px);
      max-width: 28ch;
      font-size: 16px;
      line-height: 1.6;
      color: rgba(0, 0, 0, .7);
      font-weight: 300;
    }

    .contact-list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      gap: 20px;
      justify-items: center;
    }

    .contact-list li {
      display: grid;
      gap: 6px;
      text-align: center;
    }

    .contact-label {
      font-size: 12px;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: rgba(0, 0, 0, .5);
    }

    .contact-list a {
      font-size: 18px;
      color: inherit;
      text-decoration: none;
      font-weight: 400;
    }

    .contact-list a:hover,
    .contact-list a:focus {
      text-decoration: underline;
    }

    .contact-list address {
      font-style: normal;
      font-size: 17px;
      line-height: 1.6;
    }

    .contact-note {
      margin-top: clamp(28px, 7vw, 48px);
      font-size: 15px;
      color: rgba(0, 0, 0, .6);
      line-height: 1.6;
    }

    @media (max-width: 600px) {
      .contact-main {
        padding: 80px clamp(20px, 6vw, 32px);
      }

      .contact-card {
        padding: clamp(24px, 8vw, 40px);
        margin-top: -24px;
      }

      .contact-list a {
        font-size: 16px;
      }
    }