/* --------------------------------------------------

  :::  Blocks Styles

-------------------------------------------------- */



/* --------------------------------------------------
  :::  Columns
-------------------------------------------------- */
.columns-block {
    max-width: var(--grid-max-width);
    margin: 0 auto;
    margin-bottom: var(--space-xl);
    display: flex;
    column-gap: var(--space-m);
    row-gap: 0;
}

.columns-block__header {
    flex: 0 0 31%;
}

.columns-block__category {
    font-size: var(--step--1);
    text-transform: uppercase;
    letter-spacing: var(--tracked-topline);
    padding: 0;
}

.columns-block__headline {
    font-size: var(--step-1)!important;
    line-height: var(--leading-heading);
    margin: 0;
}

.columns-block__content {
    flex: 0 0 65%;
}

.columns-block__text {
    font-size: var(--step-0);
    line-height: var(--leading-copy);
    max-width: 70ch;
}

@media (max-width: 768px) {
    .columns-block {
        width: 100%;
        flex-direction: column;
        margin-bottom: var(--space-l);
    }
}
  
  
/* --------------------------------------------------
  :::  Accordion
-------------------------------------------------- */
.accordion {
    list-style: none;
    padding: 0;
    margin: 0;
}

ul.accordion {
    margin-left: 0px!important;
}

.accordion__item {
    position: relative;
    list-style: none!important;
}

.accordion__content-wrapper {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out;
    padding-left: var(--space-3xs-2xs);
}

.accordion__trigger:checked + .accordion__title + .accordion__content-wrapper {
    max-height: 200px; /* Realistische maximale Höhe */
}

/* Linienstile */
.accordion__item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--color-text);
}

.accordion__item:last-child::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--color-text);
}

.accordion__title {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--font-family-heading);
    font-weight: var(--font-weight-heading);
    padding: var(--space-xs-s) var(--space-3xs-2xs);
    position: relative;
    transition: color 0.25s ease-in-out;
}

.accordion__title::after {
    content: "";
    position: relative;
    display: inline-block;
    width: 10px;
    height: 10px;
    left: -5px;
    border: 1px solid;
    border-width: 2px 2px 0 0;
    transform: rotate(135deg);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.accordion__title:hover {
    color: var(--color-hover);
}

/* Fokus-Stile für Barrierefreiheit */
.accordion__title:focus-within {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.accordion__trigger:checked + .accordion__title::after {
    transform: rotate(-45deg);
}

.accordion__content {
    padding-bottom: var(--p-blank-line);
    transition: padding-bottom 0.25s ease-in-out;
}

input[type="checkbox"] {
    display: none;
}


/* --------------------------------------------------
  :::  Parallax Image Styles
-------------------------------------------------- */
.parallax-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    margin: 0;
}

/* Aspect ratio variants */
.parallax-wrapper[data-aspect-ratio="3/2"] {
    aspect-ratio: 3/2;
}

.parallax-wrapper[data-aspect-ratio="4/3"] {
    aspect-ratio: 4/3;
}

.parallax-wrapper[data-aspect-ratio="16/9"] {
    aspect-ratio: 16/9;
}

.parallax-wrapper[data-aspect-ratio="9/16"] {
    aspect-ratio: 9/16;
}

.parallax-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
}

.parallax-image {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.1);
    will-change: transform;
    contain: paint;
    transition: transform 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.parallax-image.is-visible {
    animation: parallaxScroll 1s ease-out forwards;
}

@keyframes parallaxScroll {
    from {
        transform: scale(1.1) translateY(0);
    }
    to {
        transform: scale(1.1) translateY(-5%);
    }
}



/* --------------------------------------------------
  :::  Parallax Section Styles
-------------------------------------------------- */
 .parallax-section {
    position: relative;
    min-height: 100vh;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
}

.parallax-content {
    color: white;
    padding: 2rem;
    max-width: 80ch;
    text-align: center;
    position: relative;
    z-index: 1;
}



/* --------------------------------------------------
  :::  Image Slider Styles
-------------------------------------------------- */
.slider-wrapper {
  max-width: 100%;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

.slider {
  position: relative;
  width: 100%;
  margin: 0;
  background-color: var(--color-light);
}

.slider-track {
  display: flex;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  overflow-x: scroll;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.slider-track::-webkit-scrollbar {
  display: none;
}

.slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  scroll-snap-align: start;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  aspect-ratio: var(--slider-ratio, 3/2); /* Fallback-Wert */
}

/* Ratio containers */
[data-ratio="1/1"] .slide {
  aspect-ratio: 1/1;
}

[data-ratio="16/9"] .slide {
  aspect-ratio: 16/9;
}

[data-ratio="10/8"] .slide {
  aspect-ratio: 10/8;
}

[data-ratio="21/9"] .slide {
  aspect-ratio: 21/9;
}

[data-ratio="7/5"] .slide {
  aspect-ratio: 7/5;
}

[data-ratio="4/3"] .slide {
  aspect-ratio: 4/3;
}

[data-ratio="5/3"] .slide {
  aspect-ratio: 5/3;
}

[data-ratio="3/2"] .slide {
  aspect-ratio: 3/2;
}

[data-ratio="3/1"] .slide {
  aspect-ratio: 3/1;
}

/* Image fitting */
.slide img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* Controls */
.slider-controls {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.slider-prev,
.slider-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  background: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.slider-prev {
  left: 40px;
}

.slider-next {
  right: 40px;
}

.slider-prev:disabled,
.slider-next:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* Dots */
.slider-dots {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(0,0,0,0.3);
  border-radius: 20px;
  pointer-events: auto;
}

.slider-dots button {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.5);
  cursor: pointer;
}

.slider-dots button[aria-selected="true"],
.slider-dots button.active {
  background: white;
}

@media (max-width: 768px) {
  .slider-prev,
  .slider-next {
      width: 30px;
      height: 30px;
  }
  .slider-prev {
      left: var(--grid-gutter);
  }
  .slider-next {
      right: var(--grid-gutter);
  }
}

/* --------------------------------------------------
    :::  Quote/Image @Home Styles
-------------------------------------------------- */
.intro-container {
  display: flex;
  min-height: 800px;
  flex-direction: row-reverse;
}

.intro-image {
  width: 50%;
}

.intro-image figure {
  height: 100%;
  margin: 0;
}

.intro-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: polygon(100% 0, 100% 50%, 90% 100%, 0 100%, 0 0);
}

.intro-quote {
  width: 50%;
  display: flex;
  align-items: center;
  padding: var(--space-m);
  background-color: var(--color-light-stone);
}

.intro-quote blockquote {
  width: 100%;
  /* font-size: clamp(1.5rem, 1.0727rem + 2.0717vw, 2.999375rem); */
    font-size: var(--step-1);
  font-weight: initial;
  line-height: var(--leading-heading);
  text-align: center;
  margin: 0;
  max-width: var(--measure-narrow);
}

@media (max-width: 768px) {
  .intro-header {
    padding-bottom: 20rem;
  }
  
  .intro-container {
    position: relative;
    min-height: auto;
    display: block;
  }

  .intro-image {
    width: 100%;
    aspect-ratio: 1/1;
  }

  .intro-quote {
    width: 90%;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) translateY(50%);
    z-index: 99;
  }
}


/* --------------------------------------------------
  :::  Gemeinsame Basis-Stile für Subpages
-------------------------------------------------- */
.subpages-block {
  width: 100%;
  max-width: var(--grid-max-width);
  margin: 0 auto;
  padding: var(--space-l) 0;
}

/* --------------------------------------------------
  :::  Fachgebiete Layout (disciplines)
-------------------------------------------------- */
/* Grid-Layout für Fachgebiete */
#disciplines .default-subpages-grid,
.layout-grid .default-subpages-grid {
  display: grid;
  gap: var(--grid-gutter);
  grid-template-columns: repeat(var(--columns, 3), 1fr);
}

/* Einzelne Fachgebiets-Items */
#disciplines .subpage-item,
.layout-grid .subpage-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1/1;
}

#disciplines .subpage-item a,
.layout-grid .subpage-item a {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

/* Bild-Container */
#disciplines .subpage-image,
.layout-grid .subpage-image {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* Bild selbst */
#disciplines .subpage-image img,
.layout-grid .subpage-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

/* Overlay mit Titel */
#disciplines .subpage-item a::after,
.layout-grid .subpage-item a::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  height: 90%;
  background-color: rgba(255, 255, 255, 0.9);
  clip-path: polygon(100% 0, 100% 50%, 90% 100%, 0 100%, 0 0);
  transition: background-color 0.5s ease;
  z-index: 1;
}

/* Titel-Styling */
#disciplines .subpage-title,
.layout-grid .subpage-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 1rem;
  text-align: center;
  font-size: var(--step-1);
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: var(--tracked-topline);
  color: var(--color-dark);
  transition: color 0.5s ease;
  z-index: 20;
  width: 80%;
}

/* Beschreibung ausblenden im Grid-Layout */
#disciplines .subpage-description,
.layout-grid .subpage-description {
  display: none;
}

/* Hover-Effekte */
#disciplines .subpage-item a:hover .subpage-title,
.layout-grid .subpage-item a:hover .subpage-title {
  color: var(--color-red);
}

#disciplines .subpage-item a:hover img,
.layout-grid .subpage-item a:hover img {
  transform: scale(1.05);
}

#disciplines .subpage-item a:hover::after,
.layout-grid .subpage-item a:hover::after {
  background-color: rgba(255, 255, 255, 0.65);
}

/* --------------------------------------------------
  :::  Projekte Layout (projects)
-------------------------------------------------- */
/* Masonry-Layout für Projekte */
#projects .masonry,
.layout-list .masonry {
  margin: 0;
  gap: var(--grid-gutter);
  column-count: var(--columns, 1);
}

/* Masonry-Items */
#projects .masonry > *,
.layout-list .masonry > * {
  display: inline-block;
  width: 100%;
  margin: 0 0 var(--space-xl);
  padding: 0 var(--space-m);
  box-sizing: border-box;
}

/* Projekt-Kategorie */
#projects .project-category,
.layout-list .project-category {
  font-size: 0.875rem;
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  display: block;
  margin-bottom: 0.5rem;
}

/* Projekt-Bild Container */
#projects .project-image,
.layout-list .project-image {
  line-height: 0;
  margin-top: 0.5rem;
  position: relative;
  background-color: var(--color-light-blue);
}

/* Box-Shadow als separates Element */
#projects .project-image::before,
.layout-list .project-image::before {
  content: "";
  position: absolute;
  top: 30px;
  left: 30px;
  right: -30px;
  bottom: -80px;
  background-color: var(--color-light-blue);
  z-index: -1;
}

/* Bild-Wrapper für den clip-path und overflow */
#projects .project-image-wrapper,
.layout-list .project-image-wrapper {
  position: relative;
  overflow: hidden;
  /* Clip-path für den Wrapper */
  clip-path: polygon(100% 0, 100% 50%, 90% 100%, 0 100%, 0 0);
  /* Webkit-Präfix für Safari */
  -webkit-clip-path: polygon(100% 0, 100% 50%, 90% 100%, 0 100%, 0 0);
}

#projects .project-image img,
.layout-list .project-image img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.5s ease; /* Transition für den Zoom-Effekt */
  background-color: transparent;
}

/* Hover-Effekt für Projekt-Bilder */
#projects .project-link:hover .project-image img,
.layout-list .project-link:hover .project-image img {
  transform: scale(1.05); /* Zoom-Effekt beim Hover */
}


/* Projekt-Titel */
#projects .project-title,
.layout-list .project-title {
  margin-top: 0.75rem;
  margin-bottom: 0.5rem;
  font-size: 1.25rem;
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Projekt-Beschreibung */
#projects .project-description,
.layout-list .project-description {
  font-size: 0.875rem;
  line-height: 1.5;
  margin: 0 0 2rem;
}

/* Projekt-Link */
#projects .project-link,
.layout-list .project-link {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: opacity 0.3s ease;
}

#projects .project-link:hover,
.layout-list .project-link:hover {
  opacity: 0.90;
}

/* --------------------------------------------------
  :::  Responsive Anpassungen
-------------------------------------------------- */
@media (max-width: 768px) {
  /* Fachgebiete auf mobilen Geräten */
  #disciplines .default-subpages-grid,
  .layout-grid .default-subpages-grid {
    --columns: 1;
  }
  
  /* Projekte auf mobilen Geräten */
  #projects .masonry,
  .layout-list .masonry {
    column-count: 1;
  }
  
  #projects .masonry > *, .layout-list .masonry > * {
    padding: 0 30px 0 0;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  /* Fachgebiete auf Tablets */
  #disciplines .default-subpages-grid,
  .layout-grid .default-subpages-grid {
    --columns: 2;
  }
  
  /* Projekte auf Tablets */
  #projects .masonry,
  .layout-list .masonry {
    --columns: 2;
  }
}

@media (min-width: 1025px) {
  #projects .masonry,
  .layout-list .masonry {
    --columns: 3;
  }
}





/* --------------------------------------------------
  :::  Reference Block Styles
-------------------------------------------------- */
.reference-block {
  margin-bottom: 2rem;
}

@media screen and (min-width: 30em) {
  .reference-block {
    margin-bottom: 4rem;
  }
}

/* Reference Title */
.reference-title {
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: var(--tracked-topline);
  padding: var(--space-3xs-2xs) 0;
}

/* Reference List */
.reference-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

/* Reference Item */
.reference-item {
  font-size: var(--step-0);
  font-weight: var(--font-weight-heading);
  line-height: var(--leading-heading);
  line-height: var(--leading-copy)!important;
  margin-bottom: calc(var(--leading-copy)* 0.125em)!important;
}


/* Reference Description (for chronology items) */
.reference-description {
  font-size: var(--step-0);
  font-weight: var(--font-weight-copy);
  line-height: var(--leading-copy);
  padding-top: 0.25rem;
  padding-bottom: 0.5rem;
  width: auto;
  text-indent: 0!important;
}



/* Reference Separator */
.reference-separator {
  font-weight: 600;
  color: var(--color-stone);
}

/* External Link */
.external-link {
  display: inline-block;
  height: 2rem;
  width: 2rem;
}

.external-link:hover {
  opacity: 0.8;
}

.external-link img {
  height: var(--step--1);
  padding-left: var(--space-3xs-2xs);
  opacity: 0.5;
}