@font-face {
    font-family: TWKLausanne; /* set name */
    src: url(/fonts/TWKLausanne-400.woff2); /* url of the font */
    font-weight: 400;
  }
  
  @font-face {
    font-family: TWKLausanne; /* set name */
    src: url(/fonts/TWKLausanne-200.woff2); /* url of the font */
    font-weight: 200;
  }

  @font-face {
    font-family: ogg-italic; /* set name */
    src: url(/fonts/Ogg-MediumItalic.woff2); /* url of the font */
  }

 @font-face {
    font-family: ogg-medium; /* set name */
    src: url(/fonts/Ogg-Medium.woff2); /* url of the font */
  }

  :root {
    --white: #ffffff;
    --off-white: #fafaf8;
    --cream: #fdf5e6;
    --amber: #FE9E0C;
    --amber-hover: #d4911a;
    --black: #000000;
    --dark: #2c2c2c;
    --gray: #6b6b6b;
    --darkgrey: #837672;
    --light-gray: #c8c8c8;
    --border: #000000;
    --font-body: TWKLausanne;
    --font-script: ogg-italic;
    --font-italic: ogg-italic;
    --font-medium: ogg-medium;
    --font-subtitle: ogg-medium;

    /* Layout */
    --container-max: 100vw;
    --measure: 680px;
    --measure-narrow: 409px;
    --grid-gutter: clamp(1rem, 2vw, 1.5rem);
    --section-pad-y: clamp(2rem, 8vw, 1.875rem);
    --section-pad-x: clamp(1rem, 4vw, 2rem);

    /* Typography scale — fixed sizes */
    --fs-hero: 2.625rem;   /* 42px — hero tagline */
    --fs-heading: 1.5rem;  /* 24px — intro title & subtitle */
    --fs-body: 1.125rem;   /* 18px — body / default */
    --fs-small: 0.875rem;  /* 14px — footer */
    --lh-body: 1.7;
  }

  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  html {
    scroll-behavior: smooth;
    font-size: 16px;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.25) transparent;  
    scrollbar-gutter: stable;
  }

  body {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    color: var(--black);
    background: var(--white);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }

  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  ::-webkit-scrollbar-track {
    background: transparent;
  }

  ::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.25);
    border-radius: 8px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: var(--amber);
  }

  /* ── UTILITIES ── */

  .btn-pill {
    display: inline-block;
    background: var(--amber);
    color: var(--black);
    font-family: var(--font-body);
    font-weight: 400;
    font-size: var(--fs-body);
    padding: 0.7rem 2rem;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.25s;
  }

  .btn-pill--contact {
    padding: 12px 64px;
  }

  .btn-pill:hover { background: var(--amber-hover); }

  .img-cover {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
  }

  .grid-12 {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--grid-gutter);
    max-width: var(--container-max);
    margin: 0 auto;
    padding: var(--section-pad-y) var(--section-pad-x);
    padding-top: 0px;
  }

  .dash {
    width: 22px;
    height: 4px;
    background: var(--black);
  }

  /* .split-row and the shared fakten/impressum table styles live in css/table.css */

  /* Typography utilities */
  .t-body,
  .fakten__block,
  .fakten__list li,
  .impressum__block,
  .theme__text,
  .feature__text,
  .cta__text,
  .lageplan__text,
  .grundriss__arrows li {
    font-family: var(--font-body);
    font-weight: 200;
    font-size: var(--fs-body);
    line-height: 1.5;
    color: var(--dark);
  }
  .t-bold-md,
  .contact__heading,
  .kontakt-options__heading,
  .kontakt-form-section__title {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--fs-body);
  }
  .access__heading {
    font-style: normal;
    font-weight: 400;
    font-size: var(--fs-heading);
  }

  .theme__text {
    font-weight: 200;  
  }

  .t-bold-sm,
  .fakten__label,
  .impressum__label,
  .theme__title,
  .text-gallery__title,
  .map__heading {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: var(--fs-body);
    color: var(--black);
    line-height: 1.2;
  }
  .t-script {
    font-family: var(--font-script);
    font-size: var(--fs-body);
    color: var(--black);
    margin-bottom: 0.1rem;
  }

  .theme__list-label {
    list-style: none;
    margin-left: -1.0em;
  }

  /* ── HERO ── */
  .hero {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 480px;
    overflow: hidden;
  }

  .hero__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right center;
    display: block;
  }

  .hero__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-start;
    padding: clamp(2rem, 4vw, 2.5rem) 0 0 clamp(1.5rem, 4vw, 1.25rem);
    z-index: 1;
  }

  .hero__logo {
    display: block;
    width: clamp(20rem, 56vw, 32.3rem);
    height: auto;
  }

  .hero__sublogo {
    position: absolute;
    top: 0;
    left: clamp(1.5rem, 4vw, 2.5rem);
    height:67%;
    width: auto;
    pointer-events: none;
    z-index: 0;
    margin-top: 2.5em;
  }

  /* Liquid-glass sublogo. Each bar is a real glass pane refracting the video behind it.
     Figma "Glass" mapping → Light -35°/30%, Refraction 35, Depth 30, Dispersion 59,
     Frost 10, Splay 30. Refraction/dispersion need backdrop-filter url() (Chromium);
     other browsers keep the frost + tint + edge highlight and just don't bend. */
  .hero__sublogo--glass {
    /* base .hero__sublogo gives position/height (67%); derive width from the logo ratio */
    aspect-ratio: 438 / 649;
    width: auto;
    /* Hidden until the hero video has painted a frame. Otherwise the refracting
       bars render as bare outlines over an empty hero (see js revealGlassSublogo). */
    opacity: 0;
    transition: opacity 0.8s ease;
  }
  .hero__sublogo--glass.is-ready { opacity: 1; }

  .hero__sublogo--glass .glass-bar {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: 16.546%;   /* 72.469 / 438 */
    height: 48.934%;  /* 317.58 / 649 */
    /* Light -35° / 30%: specular sheen across the pane; Splay 30 spreads the stops */
    background: linear-gradient(125deg,
      rgba(255, 255, 255, 0.30) 0%,
      rgba(255, 255, 255, 0.06) 35%,
      rgba(255, 255, 255, 0.00) 55%,
      rgba(255, 255, 255, 0.10) 100%);
    /* Frost 10 (light blur) + Refraction 35 / Dispersion 59 (the displacement filter) */
    -webkit-backdrop-filter: blur(5px) url(#glass-refraction);
    backdrop-filter: blur(5px) url(#glass-refraction);
    /* Depth 30: bright top edge, dark bottom edge → sense of thickness */
    border: 1px solid rgba(255, 255, 255, 0.45);
    box-shadow:
      inset 0 0px 0px rgba(255, 255, 255, 0.55),
      inset 0 -1px 2px rgba(0, 0, 0, 0.18),
      inset 2px 0 4px rgba(255, 255, 255, 0.18);
  }

  /* ── INTRO ── */
  .intro {
    text-align: center;
    padding-top: 6.875rem;
    padding-bottom: 0.0rem;
    padding-left: 0.0rem;
    padding-right: 0.0rem;
    max-width: 669px;
    margin: 0 auto;
    margin-bottom: 10rem;
  }

  .intro ~ .intro {
    margin-bottom: 6.25rem;
  }

  .intro--flush {
    margin-bottom: 0;
  }

  .intro__title {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--fs-heading);
    line-height: 1.813rem;
  }

  .font__ogg_medium {
    font-family: var(--font-subtitle);
  }

  .intro__subtitle {
    font-family: var(--font-subtitle);
    font-size: var(--fs-heading);
    font-weight: 400;
    line-height: 1.813rem;
    margin-bottom: clamp(1.5rem, 4vw, 3.5rem);
    color: var(--black);
  }

  .intro__text {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: var(--fs-body);
    line-height: 1.5;
    color: var(--dark);
  }
  .intro__text br {
    display: block;
    content: "";
    margin-bottom: 0.8em;
  }
  
  .intro__text-margintop {
    margin-top: 55px;
  }

  br.br--tight {
    margin-bottom: 0;
  }

  /* Divider */
  .divider {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding: 0 0;
  }

  .divider--index {
    padding-top: 120px;
    padding-bottom: 135px;
  }

  .divider span {
    display: block;
    width: 22px;
    height: 4px;
    background: var(--black);
  }

  .divider span:last-child {
    transform: translateY(3px);
  }

  /* ── ACCESS / CTA ── */
  .access {
    margin: 0 auto clamp(3rem, 14.1vw, 12.5rem);
    padding: 0 clamp(1rem, 4vw, 2rem);
  }

  .access__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--grid-gutter);
  }

  .access__content {
    grid-column: 2 / 8;
    grid-row: 1;
    align-self: start;
    margin-top: 140px;
    /*background: rgba(255, 162, 22, 0.25);*/
    background: rgba(190, 182, 180, 0.49);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 3.75rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 2;
  }

  .access__label {
    font-family: var(--font-script);
    font-size: var(--fs-heading);
    margin-bottom: 0.1rem;
    color: var(--black);
  }

  .access__dash {
    align-self: flex-start;
    margin: 1.25rem 0;
  }

  .access__text {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: var(--fs-body);
    line-height: 1.5;
    color: var(--dark);
    margin-bottom: 0.75rem;
    max-width: 30.875rem
  }

  .access__text:last-of-type {
    margin-bottom: 1.5rem;
  }

  .access__input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 0px;
    border-radius: 3px;
    background: var(--white);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    color: var(--black);
    outline: none;
    margin-bottom: 1.25rem;
    transition: border-color 0.2s;
  }

  /* Match the email input's width above it */
  .access__btn {
    width: 100%;
  }

  .access__input::placeholder {
    color: var(--darkgrey);
    font-weight: 400;
  }

  .access__input:focus {
    border-color: var(--amber);
  }

  .access__msg {
    padding: 0.85rem 1rem;
    border-radius: 3px;
    background: var(--white);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: 1.4;
    color: var(--dark);
    margin-bottom: 1.25rem;
  }

  .access__msg--ok {
    border-left: 3px solid var(--amber);
  }

  .access__msg--err {
    border-left: 3px solid #b86b6b;
  }

  .access__image-wrap {
    grid-column: 6 / 12;
    grid-row: 1;
    z-index: 1;
    border-radius: 3px;
  }

  .access__image {
    width: 100%;
    height: 80%;
    object-fit: cover;
    display: block;
  }

  /* ── FOOTER ── */
  .footer {
    border-top: 1px solid var(--black);
    border-bottom: 1px solid var(--black);
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    align-items: stretch;
  }

  .footer__cell {
    padding: clamp(1.2rem, 3vw, 2rem) clamp(1rem, 2.5vw, 1.5rem);
    border-right: 1px solid var(--black);
    display: flex;
    flex-direction: row;
  }

  .footer__cell:last-child {
    border-right: none;
  }

  .footer__logo {
    font-style: italic;
    font-size: var(--fs-small);
    color: var(--black);
  }

  .footer__links {
    list-style: none;
    padding-left: 1em;
  }

  .footer__links li {
    margin-bottom: 0.4rem;
  }

  .footer__links a {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: var(--fs-small);
    color: var(--black);
    text-decoration: none;
    transition: color 0.2s;
  }

  .footer__links a:hover {
    color: var(--amber);
  }

  .footer__end {
    font-family: var(--font-body);
    font-size: var(--fs-small);
  }

  .footer__bottom {
    text-align: right;
    padding: 0.75rem clamp(1rem, 2.5vw, 1.5rem);
  }


  .footer__address {
    color: var(--black, #000);
    font-family: "TWKLausanne";
    font-size: var(--fs-small);
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    padding-left: 1em;
  }
  .subheading__medium {
    font-family: var(--font-medium) !important;
  }


  .subheading__italic {
    font-family: var(--font-italic) !important;
    font-size: var(--fs-heading);
  }

 .body__italic {
    font-family: var(--font-italic) !important;
    font-size: var(--fs-body);
  }

  /* ── WELCOME PAGE ── */

  /* Divider left-aligned variant */
  .divider--left {
    justify-content: flex-start;
    padding: 0 0 1rem;
  }

  /* Contact */
  .contact {
    margin: 0;
  }

  .contact__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: minmax(0, 380px);
    gap: 0;
    align-items: stretch;
    border-top: 1px solid var(--black);
  }

  .contact__content {
    padding: clamp(2rem, 4vw, 2rem) clamp(1.5rem, 4vw, 1.5rem);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    border-right: 1px solid var(--black);
  }

  .contact__label {
    font-family: var(--font-body);
    font-size: var(--fs-heading);
    margin-bottom: 0.1rem;
    color: var(--black);
  }

  .contact__dash {
    display: block;
    width: 32px;
    height: auto;
    margin-bottom: 1.25rem;
    margin-top: 1.25rem;
  }

  .contact__text {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: var(--fs-body);
    line-height: 1.5;
    color: var(--dark);
    margin-bottom: 2.5rem;
    max-width: 554px;
  }

  .contact__portrait {
    overflow: hidden;
  }

  .contact__portrait-img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center 30%;
    transform: scale(1.0);
    transform-origin: center 30%;
  }

  /* ── RESPONSIVE ── */
  @media (max-width: 768px) {
    :root {
      --fs-hero: 2.25rem;   /* 36px — hero tagline on mobile */
      --fs-body: 1rem;      /* 16px — body / default on mobile */
    }

    .hero {
      height: 100vh;
      min-height: 380px;
    }

    .hero__logo {
      width: 282px;   /* entrance size; shrinks to 130px corner via JS scale 0.461 */
      height: auto;
    }

    .access {
      padding-top: 4.375rem;
      padding-bottom: 6.25rem;
    }

    .access__grid {
      grid-template-columns: 1fr;
      min-height: auto;
    }

    .access__content {
      grid-column: 1;
      grid-row: 2;
      margin-top: 0;
      padding: clamp(1.5rem, 6vw, 3.75rem);
    }

    .intro ~ .intro {
      margin-bottom: 0.0rem;
    }

    .intro {
      padding: 4.375rem 2.938rem;
      margin-bottom: 0rem;
    }

    .divider {
      padding: clamp(2rem, 8vw, 4rem) 0;
    }

    .access__image-wrap {
      grid-column: 1;
      grid-row: 1;
      height: 260px;
      margin-bottom: -2rem;
    }

    .access__image {
      height: 260px;
    }


    .contact__grid {
      grid-template-columns: 1fr;
      grid-template-rows: auto;
    }

    .contact__portrait {
      order: -1;
      border-left: none;
      max-height: 201px;
    }

    /* Zoom in slightly. Uses the independent `scale` property (not
       transform: scale) so it composes with — and survives — the GSAP
       transform that settles the image at scale 1 on welcome/projektintention. */
    .contact__portrait-img {
      scale: 1.1;
    }

    /* No vertical divider lines on mobile */
    .contact__content {
      border-right: none;
    }

    .footer {
      grid-template-columns: 1fr 1fr;
    }

    .footer__cell {
      border-right: none;
    }

    .footer__end {
      text-align: left;
    }

    .text-gallery__row {
      grid-template-columns: 1fr;
      row-gap: 1.5rem;
    }

    .text-gallery__img-wrap {
      order: -1;
    }

    .divider img {
      height: 5px;
    }

    .divider--index img {
      padding: 0rem;
      height: 15px;
    }

    .contact__content {
      padding-left: 24px;
      padding-top: 13px;
      padding-right: 16px;
      padding-bottom: 24px;
    }

    .fakten--narrow {
      margin-bottom: 0px;
    }

    .divider--double img {
      height: 15px;
    }
  }

  .page-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: var(--fs-body);
    color: var(--black);
    z-index: 1;
    pointer-events: none;
  }


  @media (max-width: 480px) {
    .hero {
      height: 100vh;
      min-height: 320px;
    }

    .footer {
      grid-template-columns: 1fr;
    }

    .footer__cell {
      border-right: none;
      border-bottom: 1px solid var(--black);
    }

    .footer__cell:empty {
      display: none;
    }

    .footer__logo {
      width: 106px;
      height: auto;
    }

    .footer__cell:last-child {
      border-bottom: none;
    }
  }

  /* ── TEXT GALLERY (shared: aussenraum, architektur, material) ── */
  .text-gallery {
    margin: 0 auto;
    padding: 0 clamp(1rem, 4vw, 2rem);
  }

  .text-gallery__row {
    display: grid;
    grid-template-columns: 1fr 2fr;
    column-gap: clamp(2rem, 4vw, 3rem);
    margin: 0 2.5em 2.5em;
  }

  .text-gallery__text {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    text-align: left;
    padding-top: 0.5rem;
    padding-left: 40px;
  }

  .text-gallery__title {
    margin-bottom: 0;
    font-size: var(--fs-heading);
  }

  .text-gallery__text .divider {
    padding: 1rem 0 1.25rem;
  }

  .text-gallery__desc {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: var(--fs-body);
    line-height: 1.5;
    color: var(--dark);
    margin-bottom: 0.8em;
    max-width: 440px;
  }

  .text-gallery__desc br {
    display: block;
    content: "";
    margin-bottom: 0.8em;
  }

  .text-gallery__desc:last-child {
    margin-bottom: 0;
  }

  .text-gallery__img-wrap {
    overflow: hidden;
    display: flex;
    justify-content: flex-end;
    padding-right: 40px;
  }

  .text-gallery__img {
    max-width: 100%;
    height: auto;
    display: block;
    margin-left: auto;
  }

  .text-gallery__row:last-child {
    margin-bottom: 0;
  }

  /* ── ANIMATIONS ── */
  .fade-in {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s ease, transform 0.7s ease;
  }

  .fade-in.visible {
    opacity: 1;
    transform: translateY(0);
  }