/* ========================================
   CSS RESET & BASE SETUP
   ======================================== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none;
}

::-webkit-scrollbar {
  display: none;
}

/* ========================================
   CSS CUSTOM PROPERTIES / VARIABLES
   ======================================== */

:root {
  /* Color Variables */
  --color-blue: #CEEDFF;
  --color-yellow: #FFF394;
  --color-grey: #D8D8D8;
  --color-beige: #ebe6dc;
  --color-purple: #C1C4FF;
  --color-black: #000000;
  --color-white: #ffffff;

  /* Typography Variables with Clamp for Responsive Sizing */
  --font-size-xs: clamp(12px, 1.2vw, 18px);      /* Very small text */
  --font-size-sm: clamp(14px, 1.4vw, 22px);      /* Small text / tooltips */
  --font-size-base: clamp(16px, 1.65vw, 26px);   /* Base paragraph text */
  --font-size-md: clamp(18px, 1.25vw, 20px);     /* Medium text / page text */
  --font-size-lg: clamp(20px, 2.15vw, 34px);     /* Large text / nav / headings */
  --font-size-xl: clamp(24px, 3vw, 48px);        /* Extra large / mobile headings */

  /* Spacing Variables */
  --spacing-xs: clamp(4px, 0.5vw, 8px);
  --spacing-sm: clamp(8px, 1vw, 16px);
  --spacing-sm: clamp(8px, 1vw, 16px);
  --spacing-md: clamp(12px, 1.5vw, 24px);
  --spacing-lg: clamp(16px, 2vw, 32px);
  --spacing-xl: clamp(20px, 3vw, 48px);
  --spacing-xxl: clamp(24px, 4vw, 64px);

  /* Border Radius */
  --border-radius: clamp(2px, 0.3vw, 6px);

  /* Transitions */
  --transition-fast: 0.1s ease-in;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;

  /* Z-Index Scale */
  --z-dropdown: 1000;
  --z-overlay: 3000;
  --z-modal: 9999;
  --z-navigation: 999999999;

  /* Floating Animation Variables */
  --float-translateY: clamp(-12px, 1.5vw, 24px);
}
/* ========================================
   FONT LOADING & TYPOGRAPHY
   ======================================== */

@font-face {
  font-family: 'Blanchard Medium';
  src: url('../fonts/Blanchard-Medium-Web.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: 'Blanchard Medium Italic';
  src: url('../fonts/Blanchard-MediumItalic-Web.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

/* Font Loading States */
.font-loading body {
  visibility: hidden;
}

.font-loading body * {
  opacity: 0;
}

strong, i, em{
  font-weight: normal;
  font-style: normal;
  font-family: 'Blanchard Medium Italic' !important;
}

body {
  font-family: 'Blanchard Medium', Georgia, serif;
  font-size: var(--font-size-lg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  transition: opacity var(--transition-fast);
}

body * {
  transition: opacity var(--transition-fast);
}

/* Typography Elements */
p {
  font-size: var(--font-size-base);
  line-height: 1.4;
}

h1 {
  font-size: var(--font-size-lg);
  font-weight: normal;
}

h2 {
  font-size: var(--font-size-lg);
  font-weight: normal;
  padding-bottom: var(--spacing-lg);
}

/* Links */
a {
  color: var(--color-black);
  text-decoration: none;
  transition: all var(--transition-normal);
}

p a,
p a:hover,
p a:visited {
  color: var(--color-black);
  text-decoration: underline;
  text-decoration-thickness: clamp(1px, 0.15vw, 3px);
  text-underline-offset: clamp(2px, 0.3vw, 6px);
}

p a:hover {
  text-decoration: none;
}

/* ========================================
   NAVIGATION SYSTEM
   ======================================== */

nav {
  width: 96vw;
  position: fixed;
  z-index: var(--z-navigation);
  margin: var(--spacing-md) var(--spacing-lg);
  text-transform: capitalize;
}

nav.subpage {
  margin-top: var(--spacing-xl);
}

/* Navigation auf allen Seiten außer Home und Projects */
body:not(.home):not(.projects) nav {
  width: 50vw;
  right: 0;
  margin-right: var(--spacing-lg);
}

.nav-container {
    display: flex;
    justify-content: space-between;
    /* align-items: flex-end;
    right: 2vw;
    width: 50%;
    position: fixed; */
}

.nav-left .site-title {
  font-size: var(--font-size-lg);
  font-weight: normal;
  color: var(--color-black);
  text-decoration: none;
  transition: all var(--transition-normal);
}

.nav-left .site-title:hover,
.nav-left .site-title.active {
  /* opacity: 0.7; */
}

.nav-right {
  position: relative;
}

/* Menu Dropdown */
.menu-dropdown {
  position: relative;
  display: inline-block;
}

.menu-trigger {
  font-size: var(--font-size-lg);
  color: var(--color-black);
  cursor: pointer;
  transition: all var(--transition-normal);
  user-select: none;
}

.menu-trigger:hover {
  /* opacity: 0.7; */
}

.menu-dropdown-content {
  display: none;
  position: absolute;
  right: -1vw;
  top: 2vw;
  background-color: var(--color-blue);
  min-width: var(--spacing-lg);
  z-index: -1;
  list-style: none;
  padding: 0;
  margin: 0;
  margin-top: calc(var(--spacing-lg) * -1.25);
  opacity: 0;
  transform: translateY(-10px);
  transition: all var(--transition-normal);
  padding-top: var(--spacing-xl);
  border-radius: var(--border-radius);
}

.menu-dropdown-content.show {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

.shows .page-text{
  margin-top: -2.5vw;
}

.menu-dropdown-content li {
  padding: 0;
}
.menu-dropdown-content li:first-of-type{
  margin-top: 3vw;
}
.menu-dropdown-content li:last-of-type{
  margin-bottom: 3vw;
}
.menu-dropdown-content li a {
  color: var(--color-black);
  padding: var(--spacing-sm) var(--spacing-xxl) 0 var(--spacing-lg);
  text-decoration: none;
  display: block;
  transition: background-color var(--transition-normal);
}

.menu-dropdown-content li a:hover,
.menu-dropdown-content li.active a {
  text-decoration: underline;
  text-decoration-thickness: clamp(1px, 0.13vw, 3px);
  text-underline-offset: clamp(2px, 0.315vw, 6px);
}

/* Navigation Links */
nav a,
.back a,
.info a,
.aboutpage a {
  text-decoration: none;
  color: var(--color-black);
  display: inline-block;
  transition: all var(--transition-normal);
}

.info a,
.aboutpage a {
  text-decoration: underline;
}

/* Overlay Menu */
.overlaymenu {
  position: fixed;
  width: 100vw;
  height: clamp(40px, 8vw, 80px);
  pointer-events: none;
  top: 0;
  z-index: var(--z-overlay);
  -webkit-mask: linear-gradient(var(--color-white), transparent);
  mask: linear-gradient(var(--color-white), transparent);
  opacity: 1;
  background-color: var(--color-beige);
  display: none;
}

.home .overlaymenu {
  display: none;
}
main#content{
    /* background-color: white;
    min-height: 100dvh; */
}

.container {
    width: 100vw;
    /* perspective: 100vw; */
    /* transform-style: preserve-3d; */
    backface-visibility: hidden;
    display: flex;
    align-items: flex-start;
    flex-direction: row;
    transition: transform 5s ease-out, perspective 1s ease-out;
    /* will-change: perspective; */
    flex-wrap: wrap;
    justify-content: center;
}

.no-scroll {
    overflow: hidden;
    height: 100vh;
}
.home .container {
    height: 100vh;
    gap: 4vw;
    padding: 2vw;
    padding-top: 6vw;
    /* overflow-y: scroll; */
    /* overflow-x: hidden; */
}
.home{
      background-color: var(--color-beige);

}


/* Projects page specific flex layout */
.projects-page .container {
    display: flex;
    flex-wrap: wrap;
    gap: 1vw;
    align-items: start;
    justify-content: left;
    padding: 2vw;
    align-items: flex-end;
}

/* Book Base Styles - 3D Cube */
.book {
    height: 20vw;
    position: relative;
    transform-style: preserve-3d;
    cursor: pointer;
    transform-origin: center center;
    will-change: transform;
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    transition: all 0.5s ease;
    opacity: 0;
    /* perspective: 120vw; */
}

/* 3D Cube Struktur für jedes Book */
.book::before,
.book::after {
    /* content: '';
    position: absolute;
    background-color: #D8D8D8;
    pointer-events: none; */
}

/* Linke Seite des Cubes */
.book::before {
    /* width: 2vw;
    height: 100%;
    left: -2vw;
    top: 0;
    transform: rotateY(90deg);
    transform-origin: right center; */
}

/* Rechte Seite des Cubes */
.book::after {
    /* width: 2vw;
    height: 100%;
    right: -2vw;
    top: 0;
    transform: rotateY(-90deg);
    transform-origin: left center; */
}

/* Obere und untere Seite mit zusätzlichen Pseudo-Elementen */
.book > div::before,
.book > div::after {
    /* content: '';
    position: absolute;
    background-color: #D8D8D8;
    pointer-events: none;
    z-index: -1; */
}

/* Obere Seite des Cubes */
.book > div::before {
    /* width: 100%;
    height: 2vw;
    top: -2vw;
    left: 0;
    transform: rotateX(-90deg);
    transform-origin: bottom center; */
}

/* Untere Seite des Cubes */
.book > div::after {
    /* width: 100%;
    height: 2vw;
    bottom: -2vw;
    left: 0;
    transform: rotateX(90deg);
    transform-origin: top center; */
}

/* Floating animations - verschiedene Varianten */
@keyframes float1 {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(var(--float-translateY)) rotate(1deg); }
}

@keyframes float2 {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    66% { transform: translateY(var(--float-translateY)) rotate(1.8deg); }
}

@keyframes float3 {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    75% { transform: translateY(calc(var(--float-translateY) * 0.83)) rotate(-1.7deg); }
}

@keyframes float4 {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    40% { transform: translateY(calc(var(--float-translateY) * 0.58)) rotate(-1.4deg); }
}

@keyframes float5 {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    60% { transform: translateY(var(--float-translateY)) rotate(1.9deg); }
}

/* Floating Klassen */
.book.float1 { animation: float1 4s ease-in-out infinite; }
.book.float2 { animation: float2 5s ease-in-out infinite; }
.book.float3 { animation: float3 3.5s ease-in-out infinite; }
.book.float4 { animation: float4 4.5s ease-in-out infinite; }
.book.float5 { animation: float5 3s ease-in-out infinite; }

/* Deaktiviere Float-Animation für aktive Books */
.book.active {
    animation: none !important;
    z-index: 999999 !important;
}

/* Verstecke 3D Cube-Seiten bei aktiven Books */
.book.active::before,
.book.active::after,
.book.active > div::before,
.book.active > div::after {
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Hoher z-index während der Schließ-Animation */
.book.closing {
    z-index: 999999 !important;
}

/* Verstecke 3D Cube-Seiten auch während der Closing-Animation */
.book.closing::before,
.book.closing::after,
.book.closing > div::before,
.book.closing > div::after {
    opacity: 0;
}
.book > div{
    width: calc(100% - 1.5vw);
    top: 0;
    left: 0;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    align-items: center;
    transform-origin: center center;
        transform: var(--book-3d-transform);

}

.book * {
    transition: all 0.5s ease;
    height: 100%;
}

.book img {
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}

/* Active Book - Wird hauptsächlich über JavaScript gesteuert */
.book.active {
    /* Nur als Fallback/Marker - JavaScript übernimmt die Animation */
    z-index: 9999;
}

/* Das innere Element - JavaScript setzt die Transform-Werte */
.book.active > div {
    /* Wird komplett über JavaScript gesteuert */
}

.book.active > div > b {
  height: auto;                 /* Automatische Höhe statt 90% */
  width: 100%;
  position: unset;
  display: flex;
  align-items: center;
  justify-content: center;
}

.book.active img {
    max-width: 50vw;
    max-height: 30vw;
  width: auto;
  height: auto;
  object-fit: contain;          /* Behält Proportionen */    
  box-shadow: 0px 0px 2vw 1vw rgba(235,230,220, 0.25) ;
}

/* 3D Transforms für jedes Book */
.book:nth-child(1) { 
    --book-3d-transform: rotate3d(90, 90, 40, 45deg);
}
.book:nth-child(2) { 
--book-3d-transform: rotate3d(115, 115, 90, -45deg);
}
.book:nth-child(3) { 
    --book-3d-transform: rotate3d(45, 45, -15, 25deg);
}
.book:nth-child(4) { 
    --book-3d-transform: rotate3d(5, 35, -25, 42deg);
}
.book:nth-child(5) { 
    --book-3d-transform: rotate3d(-0, 100, 25, -45deg);
}
.book:nth-child(6) { 
    --book-3d-transform: rotate3d(0, 0, 12, 12deg);
}
.book:nth-child(7) { 
    --book-3d-transform: rotate3d(90, 45, -45, 50deg);
}
.book:nth-child(8) { 
    --book-3d-transform: rotate3d(15, 14, -3, 45deg);
}
.book:nth-child(9) { 
    --book-3d-transform: rotate3d(90, 90, 40, 45deg);
}
.book:nth-child(10) { 
--book-3d-transform: rotate3d(115, 115, 90, -45deg);
}
.book:nth-child(11) { 
    --book-3d-transform: rotate3d(45, 45, -15, 25deg);
}
.book:nth-child(12) { 
    --book-3d-transform: rotate3d(5, 35, -25, 42deg);
}
.book:nth-child(13) { 
    --book-3d-transform: rotate3d(-0, 100, 25, -45deg);
}
.book:nth-child(14) { 
    --book-3d-transform: rotate3d(0, 0, 12, 12deg);
}
.book:nth-child(15) { 
    --book-3d-transform: rotate3d(90, 45, -45, 50deg);
}
.book:nth-child(16) { 
    --book-3d-transform: rotate3d(15, 14, -3, 45deg);
}

.projects-page {
  padding-top: 5vw;
}

.filter-nav {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 1vw;
    padding: 0 2vw;
    flex-direction: row;
    font-family: 'Blanchard Medium';
    flex-wrap: wrap;
}

.filter-btn {
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  background-color: var(--color-yellow);
  border: none;
  font-family: 'Blanchard Medium';
  font-size: var(--font-size-lg);
  padding: 0.2vw 0.6vw;
  border-radius: 0.3vw;
}

.filter-btn:hover {
}

.filter-btn.active {
  background: var(--color-purple);
}

/* Tag Description Styles */
.tag-description {
  font-size: var(--font-size-base);
}

.tag-desc-content, .active-tag-description {
  margin: 2vw;
}
.tag-desc-content{
  margin: 3.25vw 25vw 2vw 2vw;
}

.filter-tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: black;
  color: white;
  padding: 0.5vw 1vw;
  font-size: var(--font-size-sm);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  margin-bottom: 0.5vw;
}

.filter-btn:hover .filter-tooltip {
  opacity: 1;
}

.project-item {
  position: relative;
  display: block;
  text-decoration: none;
  color: inherit;
  transition: all 0.3s ease;
}

.project-info{
  width: 100%;
}

.project-info p, .image_info {
  font-size: var(--font-size-xs);
  line-height: 1.2 !important;
  margin-top: 0.9vw;
  text-align: left;
  width: 100%;
  min-height: 6vw;
}
.image_info {
  margin-top: 1vw;
  text-align: left;
  min-height: 1vw;
}
.info p{
font-size: var(--font-size-xs);  
}
.page-text p{
  font-size: var(--font-size-md);
  font-weight: normal;
  padding-bottom: var(--font-size-md);
}
.page-text h2{
  font-size: var(--font-size-lg);
  font-weight: normal;
  padding-bottom: var(--font-size-lg);
}
.page-text h1, .page-text > a{
  font-size: var(--font-size-lg);
  font-weight: normal;
  text-decoration: none;
  color: black;
}
.page-content h1, .utility h1{
  width: 85%;
      margin-bottom: 6vw;
}
.page-content, .video{
  padding: 1.5vw 2vw 2vw 2vw;
}
.video{
  width: 85vw;
}
.video-text > p{
  padding: 3vw 0 6vw 0;
}
.video-vimeo, iframe{
      width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
}
.video-vimeo{
  margin-top: 3vw;
}
.video-block{
      margin-bottom: 8vw;
}
.video-caption{
  position: relative;
    padding-bottom: 1vw;
    /* background: rgba(255, 255, 255, 0.9); */
    font-size: var(--font-size-base);
    /* max-width: 200px; */
    word-wrap: break-word;
    margin: 0;
}
.page-content > div:not(.contact-wrapper, .contact-image){
  width: calc(50% - 1vw);
}

.page-image{
    position: fixed;
    left: 50%;
    top: 10.5vw;
    display: flex;
    height: calc(100vh - 18vw);
    align-content: center;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
}

.page-image figure {
  position: relative;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
}

.page-image img{
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
}

/* Image Caption - immer links am Bild */
.image-caption{
position: absolute;
    bottom: -var(--spacing-sm);
    /* background: rgba(255, 255, 255, 0.9); */
    font-size: var(--font-size-xs);
    /* max-width: 200px; */
    word-wrap: break-word;
    margin: 0;
}

/* Projects page specific project item styles */
.projects-page .project-item {
    display: flex;
    flex-direction: column;
    width: 100%;
    width: 23.25vw;
    justify-content: flex-start;
    align-items: flex-end;
}

.projects-page .project-item .item {
  width: 100%;
  height: auto;
  object-fit: cover;
  align-self: flex-end;
}

.projects-page .project-item .no-image {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-grey);
  height: 20vw;
  align-self: flex-end;
}

.projects-page .project-item.filtered-out {
  display: none;
}

.project-tags {
  position: absolute;
  top: 1vw;
  left: 1vw;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5vw;
}

/* Missing Paintings Button */
.missing-paintings-btn {
    position: fixed;
    bottom: 3vw;
    right: 3vw;
    background: var(--color-purple);
    color: black;
    padding-top: 0.4vw;
    border-radius: 0.3vw;
    text-decoration: none;
    font-family: 'Blanchard Medium';
    font-size: var(--font-size-lg);
    z-index: 1000;
    transition: all 0.3s ease;
    width: 19vw;
    text-align: center;
    padding-bottom: 0.8vw;
    z-index: 999999999;
}

.missing-paintings-btn:hover {

}

/* Shows Page Styles */
.shows-page {
}

.shows-container {
}

.show-item {
  display: flex;
  align-items: flex-start;
}

.show-item + h2 {
  padding-top: 6vw;
}

.show-year {
  width: 15%;
  font-size: var(--font-size-md);
  line-height: 1.4;
}

.show-text {
  width: 80%;
}

.show-text p {
  margin-bottom: 1vw;
}

.no-shows {
  text-align: center;
  color: #666;
  font-style: italic;
  margin: 4vw 0;
}

/* Project */
.project{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  height: 100dvh;
}
.project img {
    max-height: calc(100vh - 12vw);
    max-width: 80vw;
    margin-top: -8vw;
}
.next, .prev, .info, .back{
  position: absolute;
}
.next, .prev{
  height: calc(100vh - 2vw);
    display: flex;
    color: black;
    top: 1vw;
    left: 1vw;
    align-items: center;
      text-decoration: none;
      width: 25vw;
      opacity: 0;

}
.next img, .prev img{
  width: 2.5vw;
}
.next:hover, .prev:hover{
  opacity: 1;
}
.next{
  right: 1vw;
  left: unset;
  justify-content: flex-end;
}
.back{
top: 1.5vw;
    right: 2vw;
    z-index: 99999999;
}
.info{
  left: 1vw;
  bottom: 1vw;
  width: 98vw;
}
[class^="projects/"] nav, [class^="projects/"] footer{
  display: none;
}

.contact-wrapper{
  display: flex;
  width: 100%;
  margin-top: 0vw;
  margin-bottom: 6vw;
  gap: 4vw;
}
.contact-wrapper p{
  margin-bottom: var(--font-size-base);
}

 .contact-wrapper > div{
  width: 50%;
 }

.contact-image, .contact-image img{
  width: 100%;
 }

/* Container Blur Effect - nur wenn mindestens ein Book aktiv ist */
.container:has(.book.active) .book:not(.active) {
  /* filter: blur(0.2vw); */
  /* will-change: transform; */
}

/* Aktive Books bleiben scharf und vollständig sichtbar */
.book.active {
    filter: none !important;
    opacity: 1 !important;
    z-index: 9999;
}

/* 3D Cube Seiten für .book .canvas > b */
.book .canvas {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
}
.book .canvas .front {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: transparent;
    transform: translateZ(2vw);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}
.book .canvas .front img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    z-index: 11;
    position: relative;
    backface-visibility: visible;

    display: block !important;
    max-width: none !important;
    max-height: none !important;
}
/* 3D Cube Seiten mit 4vw Breite/Höhe und unterschiedlichen Grau-Werten */
.book .canvas .top {
    position: absolute;
    width: 100%;
    height: 2vw;
    left: 0;
    top: 0;
    background: #DCD6CC; /* hellgrau */
    transform: rotateX(90deg) translateY(1vw) translateZ(1vw);
    z-index: 1;
}
.book .canvas .bottom {
    position: absolute;
    width: 100%;
    height: 2vw;
    left: 0;
    bottom: 0;
    background: #B5AEA1; /* dunkelgrau */
    transform: rotateX(-90deg) translateY(-1vw) translateZ(1vw);
    z-index: 1;
}
.book .canvas .right {
    position: absolute;
    width: 2vw;
    height: 100%;
    right: 0;
    top: 0;
    background: #DCD6CC; /* mittleres grau */
    transform: rotateY(90deg) translateX(-1vw) translateZ(1vw);
    z-index: 1;
}
.book .canvas .left {
    position: absolute;
    width: 2vw;
    height: 100%;
    left: 0;
    top: 0;
    background: #CBC1AE; /* Standard grau */
    transform: rotateY(-90deg) translateX(1vw) translateZ(1vw);
    z-index: 1;
}
.book .canvas > b {
}
.book.active .canvas > b.top,
.book.active .canvas > b.bottom,
.book.active .canvas > b.right,
.book.active .canvas > b.left {
    opacity: 0;
    transition: opacity 0.3s ease;
}
.book.closing .canvas > b.top,
.book.closing .canvas > b.bottom,
.book.closing .canvas > b.right,
.book.closing .canvas > b.left {
    opacity: 0;
}

.p-title{
    position: relative;
    padding: 1.5vw 2vw;
    z-index: 9999999999;
    width: 50%;
}
.home footer{
  display: none;
}


/* ========================================
   FOOTER STYLES
   ======================================== */

.footer-flex {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  width: 100vw;
  left: 0;
  bottom: 0;
  padding: var(--spacing-md) var(--spacing-lg);
  font-size: var(--font-size-sm);
}

.footer-left,
.footer-right {
  width: 50%;
  text-align: left;
  word-break: break-word;
}

.footer-right {
  text-align: right;
}

/* Utility Text Wrapper */
.utility-wrapper {
    display: flex;
    flex-direction: row;
    padding: 10vw 2vw 2vw 2vw;
    gap: 2vw;
    height: calc(100vh - 5vw);

}

.utility-text-col {
  width: 50%;
  margin: 0;
  min-height: 1px; /* sorgt dafür, dass beide Spalten immer angezeigt werden */
  flex: 1 1 0;
  /* Optional: falls du vertikal zentrieren willst */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.contact-wrapper p a{
  text-decoration-thickness: clamp(1px, 0.1vw, 3px) !important;
  text-underline-offset: clamp(2px, 0.1vw, 6px) !important;
}
.video-poster{
  position: relative;
    cursor: pointer;
    aspect-ratio: 16 / 9;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
    .video-poster > img{
      width: 100%;
    display: block;
    object-fit: cover;
    height: 100%;
}
.video-play-btn{
      position: absolute;
    z-index: 9999999;
    top: 0;
    aspect-ratio: 16 / 9;
    width: 100%;
    display: flex;
    /* background: yellow; */
    align-content: center;
    justify-content: center;
    align-items: center;
}
.video-play-btn img{
  width: 10vw !important;
}
/* Responsive filter styles removed - now in mobile.css */

/* ========================================
   ACCESSIBILITY CLASSES
   ======================================== */

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}