/* =====================================================================
   Root Tokens
   ===================================================================== */
:root {
  /* Spacing & Radius */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-s: 0.75rem;
  --space-m: 1rem;
  --space-l: 1.5rem;
  --space-xl: 2rem;

  --radius-s: 4px;
  --radius-m: 8px;

  /* Typography */
  --fs-xxs: 0.6rem;
  --fs-xs: 0.8rem;
  --fs-s: 0.9rem;
  --fs-m: 1rem;
  --fs-l: clamp(1.8rem, 5vw, 4rem);
  --fs-title: 1.5rem;

  /* Colors */
  --c-text: #111;
  --c-accent: #0073aa;
  --c-muted: #1d1d1d;
  --c-border: currentColor;

  /* Effects & Timing */
  --blur-default: 5px;
  --ease-fast: 0.3s ease;
  --ease-med: 0.5s ease;
  --ease-slow: 2s ease;

  /* Layout */
  --vh: 100vh;
  /* fallback; JS kann dies auf mobiles anpassen */
}

:root {
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

html,
body {
  min-height: 100dvh;
}


/* =====================================================================
   Global Helpers
   ===================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  color: var(--c-text);
  font-display: swap;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: inherit;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

/* =====================================================================
   Header Branding & Animation
   ===================================================================== */

.site-header__brand-animation {
  display: flex;
  align-items: center;
  padding: 0;
  /* konsistent mobile + desktop */
  margin-top: -1rem;
}

.site-header__brand-word {
  display: flex;
  align-items: center;
  font-size: var(--fs-l);
  line-height: 1;
}

.site-header__brand-mask {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  width: 0;
}

.site-header__brand-animated-text,
.site-header__brand-letter {
  display: inline-block;
  padding-bottom: 0.1em;
  font-weight: 400;
}

.site-header__brand-plus {
  display: block;
  width: clamp(1.8rem, 4vw, 3rem);
  height: clamp(1.8rem, 4vw, 3rem);
  margin: 0.5rem 0.5rem 0rem 0.5rem;
}


/* =====================================================================
   Site Title & Navigation
   ===================================================================== */
.site-header__title a {
  font-size: var(--fs-s);
  color: currentColor;
}

.small-title {
  font-size: var(--fs-s);
  /* kleiner als Absatz */
}

.site-header__description {
  font-size: 1rem;
}

.menu-index-menu-container {
  width: 100%;
}

:root {
  --header-h: 0px;
  --swap-h: 0px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* =====================================================================
   Showcase Layout
   ===================================================================== */
section.showcase {
  height: 100dvh;
}

.showcase {
  display: flex;
  width: 100%;
  /* REPLACE height: var(--vh); */
  height: calc(100dvh - var(--header-h) - var(--swap-h));
  transition: transform var(--ease-med);
}

.showcase__column {
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: width 2s ease-in-out;
}


.showcase__column--left.wide,
.showcase__column--right.wide {
  width: 66.66%;
}

.showcase__column--left.narrow,
.showcase__column--right.narrow {
  width: 33.33%;
}

.showcase__column--left.narrow {
  padding-right: var(--space-xs);
}

.showcase__column--right.narrow {
  padding-left: var(--space-xs);
}

.showcase__column-content {
  position: relative;
  margin-top: 25vh;
  min-height: 150vh;
  will-change: transform;
  transition: transform var(--ease-med);
}

.projekt-article,
.projekt-article a {
  position: relative;
  z-index: 20;
}

.projekt-article {
  z-index: 5;
}

/* =====================================================================
   Showcase Card
   ===================================================================== */
.showcase__card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: currentColor;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.showcase__column--left .showcase__card {
  height: calc(100svh * 8 / 12);
}

.showcase__column--right .showcase__card {
  height: calc(100svh * 8 / 12);
}

.showcase__card--empty {
  height: 25vh;
}

.showcase__thumbnail {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.showcase__thumbnail img {
  position: absolute;
  inset: 0;
  width: 105%;
  height: 105%;
  object-fit: cover;
  filter: blur(var(--b, var(--blur-default)));
  transition: filter 0.4s ease-out, transform 0.4s ease-in-out,
    opacity 0.8s ease;
}

.showcase__thumbnail img.is-sharp {
  filter: blur(0);
}

/* .showcase__thumbnail:hover  {
  opacity: 0.85;
  transform: scale(1.01);
  transition: transform var(--ease-slow), opacity 0.8s ease;
} */


.showcase__card-content {
  display: flex;
  gap: var(--space-xs);
  font-size: var(--fs-m);
  text-transform: lowercase;
  margin-bottom: var(--space-2xs);
}

.showcase__card--first {
  padding: 0;
  transition: margin-top var(--ease-fast);
}

.showcase__column--left .showcase__card--first {
  margin-top: 8rem;
}

.showcase__column--right .showcase__card--first {
  margin-top: 0;
}

.showcase__card.showcase__card--empty {
  height: calc(100svh * 4 / 12);
}

/* =====================================================================
   Showcase Controls
   ===================================================================== */

/* Mobile states driven by classes */
body.is-mobile .showcase {
  will-change: transform;
}

/* Right column active (mobile) */
body.is-mobile .showcase.showcase--right-active {
  transform: translate(-50%, 0);
}

/* Left column active (mobile) */
body.is-mobile .showcase.showcase--left-active {
  transform: translate(0, 0);
}

/* IMPORTANT: desktop should NOT keep mobile offset */
body.is-desktop .showcase.showcase--right-active,
body.is-desktop .showcase.showcase--left-active {
  transform: none;
  /* was translate(-50%, 0); */
}

/* Lock the page when we’re in mobile showcase mode */
body.scroll-lock {
  position: fixed;
  /* prevents page scrolling */
  inset: 0;
  /* fill viewport */
  width: 100%;
  height: 100dvh;
  /* dynamic viewport on iOS */
  overflow: hidden;
  /* no page scroll */
  overscroll-behavior: none;
  touch-action: none;
  /* avoid two-finger scroll/bounce */
}

/* Make sure the inner columns can still scroll */
@media (max-width: 767px) {
  .showcase__column {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
}

/* Thin, invisible tap zones to switch columns on mobile */
@media (max-width: 767px) {
  .showcase__peek-hit {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 12px;
    /* tweak as you like */
    background: transparent;
    border: 0;
    padding: 0;
    z-index: 4;
  }

  .showcase__peek-hit--left {
    left: 0;
  }

  .showcase__peek-hit--right {
    right: 0;
  }
}


.showcase__column.inactive {
  filter: grayscale(1);
  opacity: 0.5 !important;
  transition: opacity .25s ease, filter .25s ease;
  pointer-events: none;
}


.showcase__filter {
  margin: var(--space-m) 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.showcase__button {
  color: var(--c-muted);
  padding: 0;
  font-size: var(--fs-xs);
  background: none;
  text-decoration: none;
  cursor: pointer;
}

.showcase__swap-button {
  position: fixed;
  font-size: var(--fs-xs);
  width: 1.8rem;
  right: 0.25rem;
  z-index: 999;
  padding: 0;
  font-size: var(--fs-xs);
  align-items: center;
  border: none;
  cursor: pointer;
  background: transparent;
  border-radius: 0;
  backdrop-filter: blur(0px);
}

.showcase__swap-button span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}


/* Mobile Horizontal Scroll */
@media (max-width: 767px) {
  .showcase {
    width: 200%;
    overflow: hidden;
  }

  .showcase__column {
    flex: 0 0 50%;
    /* REPLACE height: var(--vh); */
    height: 100%;
    /* column fills showcase height */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-bottom: var(--safe-bottom);
    /* iOS home indicator clearance */
  }
}

/* =====================================================================
   Archive Layout
   ===================================================================== */
.archive {
  display: flex;
  justify-content: space-between;
}

section.archive {
  margin: 4rem 0;
}

.archive__sorting {
  display: flex;
  flex-direction: column;
  flex: 1 1 35%;
  font-size: var(--fs-s);
}

.archive__sort-col {
  display: flex;
  gap: var(--space-2xs);
  cursor: pointer;
  user-select: none;
}

.archive__sort-col.asc::before {
  content: " ↑";
}

.archive__sort-col:not(.asc)::before {
  content: " ↓";
}

.archive__list {
  display: flex;
  flex-direction: column;
  flex: 1 1 60%;
}

.archive__row {
  position: relative;
  display: flex;
  padding: 0.75rem 0;
  gap: 2rem;
  font-size: var(--fs-s);
  border-bottom: 1px solid var(--c-border);
  transition: background var(--ease-fast);
  overflow: hidden;
}

.archive__col a:hover {
  text-decoration: underline;
}

.archive__col--flex {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
}

.archive__col--year {
  width: auto;
}

.archive__col--category,
.archive__col--title a {
  text-decoration: none;
  color: currentColor;
}

.archive__category,
.archive__tag {
  display: inline-block;
  background: transparent;
  cursor: pointer;
}

@media (min-width: 767px) {
  .archive__col--title {
    width: 35%;
  }
}

/* Archive Layout - Mobile */
@media (max-width: 767px) {
  .archive {
    flex-direction: column;
  }

  .archive__sorting {
    font-size: var(--fs-xxs);
    flex-direction: row;
    gap: 2rem;
    align-items: center;
  }

  .archive__sort-col {
    padding: 0.25rem 0;
  }

  .archive__list {
    border-top: none;
  }

  .archive__row {
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.25rem 0;
  }

  .archive__col--flex {
    font-size: var(--fs-xxs);
    padding-top: 0.25rem;
    border-top: solid 1px var(--c-border);
  }

  .archive__col {
    padding: 0.25rem 0;
  }

  .archive__col--title a {
    color: currentColor;
  }

  .archive__col--category,
  .archive__col--tags {
    width: auto;
  }
}

/* =====================================================================
   Archive News 
   ===================================================================== */

.archive__toggle {
  font-weight: 500;
  background: unset;
  border-radius: 0;
  padding: 0;
  border: none;
  cursor: pointer;
}

.archive__content p {
  margin: 0.5rem 0 1rem 0;
  font-size: var(--fs-s);
}

.archive__thumbnail img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  width: 100%;
}

.archive__filter-clear {
  display: flex;
  color: var(--c-text);
  padding: 0;
  border: none;
  background: unset;
  cursor: pointer;
  font-size: var(--fs-s);
  font-weight: 500;
}

/* =====================================================================
   News Layout
   ===================================================================== */
.news-entry {
  display: flex;
  flex-direction: row;
  gap: var(--space-m);
  margin: 4rem 0;
}

.news-header {
  flex: 1 1 30%;
  display: flex;
  flex-direction: column;
  font-size: var(--fs-s);
  line-height: 1.2;
}

.news-body {
  flex: 1 1 60%;
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}

.news-thumbnail img {
  width: 50%;
}

/* =====================================================================
   Contact Layout
   ===================================================================== */
.contact-section {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}

.contact-section__content {
  padding-right: 2rem;
  flex: 1 1 60%;
}

.contact-section__sidebar {
  position: sticky;
  top: 1rem;
  margin-top: 4rem;
  height: 100%;
  width: auto;
  flex: 1 1 35%;
}

.contact-section__info {
  font-size: var(--fs-s);
  line-height: 1.2;
  margin: 0 0 4rem 0;
}

.contact-section__info--left {
  text-align: left;
}

.contact-section__info--right {
  text-align: right;
}

.contact-section__child-content {
  margin-bottom: 2rem;
}

.contact-section__links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.contact-section__links li {
  font-size: var(--fs-s);
}

.contact-section__links li::before {
  content: "↓";
  margin-right: 0.5em;
}

.contact-section__links a {
  text-decoration: none;
  color: inherit;
  transition: color var(--ease-fast);
}

.contact-section__links a:hover {
  text-decoration: underline;
}

.child-page-title {
  font-size: var(--fs-s);
  font-weight: 500;
  margin: 1rem 0 0 0;
}

.child-page-title::before {
  content: "↓";
  font-weight: 400;
  margin-right: 0.5em;
}


/* Footer */
footer#colophon {
  position: fixed;
  font-size: var(--fs-s);
  bottom: 0;
  inset-inline: 0;
  z-index: 9;
  padding: var(--space-xs) 0;
  transform: translateY(0);
}

footer#colophon.is-visible {
  transform: translateY(0);
}

.site-info {
  position: relative;
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding-inline: 5%;
}

.site-info__contact {
  display: flex;
  gap: var(--space-m);
}

/* =====================================================================
   Projekte – Einzel
   ===================================================================== */
.site-main.projekt-einzel {
  margin-top: 4rem;
}

.projekt-header {
  flex: 1 1 30%;
}

.projekt-titel {
  flex: 1 1 30%;
}

.projekt-text-container {
  display: flex;
  flex-direction: row;
  gap: var(--space-m);
  margin: 0 0 4rem 0;
}

.projekt-text-wrapper {
  flex: 1 1 60%;
}

.projekt-text.closed {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: all var(--ease-fast);
}

.read-more-btn {
  font-size: var(--fs-s);
  font-weight: 500;
  color: #1d1d1d;
  border: none;
  background: unset;
  cursor: pointer;
  margin-top: 2rem;
  padding: 0;
  z-index: 10;
}

/* Prev/Next Post Navigation */
.projekt-navigation {
  position: sticky;
  display: flex;
  bottom: 0rem;
  justify-content: space-between;
  padding: var(--space-s) 0;
  align-items: center;
  gap: var(--space-m);
  margin-top: 2rem;
  font-size: var(--fs-s);
  z-index: 10;
  color: currentColor;
  background-color: currentColor;
}

.projekt-prev,
.projekt-next,
.projekt-top {
  flex: 1;
  text-align: center;
}

.projekt-prev,
.projekt-next {
  transition: transform var(--ease-fast);
}

.projekt-prev {
  text-align: left;
}

.projekt-next {
  text-align: right;
}

.projekt-prev:hover {
  transform: translateX(5px);
  text-decoration: underline;
}

.projekt-next:hover {
  transform: translateX(-5px);
}

/* Scroll-to-top */
.scroll-to-top {
  display: inline-block;
  text-decoration: none;
  color: inherit;
  transition: transform var(--ease-fast);
}

.scroll-to-top:hover {
  color: currentColor;
  transform: translateY(-3px);
}

/* =====================================================================
   Projekt Bilder Grid
   ===================================================================== */
.projekt-fallback-images {
  display: grid;
  gap: var(--space-m);
  margin-top: var(--space-m);
}

.projekt-fallback-images.column-1 {
  grid-template-columns: 1fr;
}

.projekt-fallback-images.column-2 {
  grid-template-columns: repeat(2, 1fr);
}

.projekt-fallback-images.column-3 {
  grid-template-columns: repeat(4, 1fr);
}

.projekt-fallback-images.column-4 {
  grid-template-columns: repeat(6, 1fr);
}

.projekt-image {
  overflow: hidden;
}

.projekt-image>img {
  display: block;
  width: 100%;
  height: auto;
}

.projekt-image>img.is-landscape {
  width: auto;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.projekt-image>img.is-portrait {
  width: 100%;
  height: auto;
}

/* Progressive Reveal */
.img-reveal {
  filter: blur(var(--b, var(--blur-default)));
  opacity: 0;
  transform: scale(1.02);
  transition: filter 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
  will-change: filter, opacity, transform;
}

.img-reveal.is-visible {
  filter: blur(0);
  opacity: 1;
  transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .img-reveal {
    transition: none;
    filter: none;
    opacity: 1;
    transform: none;
  }
}

/* Grid Controls */
.grid-control {
  position: sticky;
  top: 1rem;
  display: flex;
  flex-direction: column;
  font-size: var(--fs-s);
  color: currentColor;
  width: 25%;
  z-index: 10;
}

.grid-control label {
  margin-bottom: 1rem;
}

/* Range: Variables */
#grid-columns {
    --track-hit: 20px;
    --thumb: 15px;
}

/* Range: Base */
#grid-columns {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: var(--track-hit);
  background: transparent;
  border: 0;
  position: relative;
  cursor: pointer;
  padding: 0;
  border-radius: 0;
}

#grid-columns::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(50% - 0.34rem);
  height: 1px;
  background: currentColor;
  pointer-events: none;
}

/* Range: WebKit */
#grid-columns::-webkit-slider-runnable-track {
  height: var(--track-hit);
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
}

#grid-columns::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--thumb);
  height: var(--thumb);
  background: var(--c-muted);
  border-radius: 2px;
  position: relative;
  margin-top: calc((var(--track-hit) - var(--thumb)) / 2 * -1);
  box-shadow: none;
}

/* Range: Firefox */
#grid-columns::-moz-range-track {
  height: var(--track-hit);
  background: transparent;
  border: 0;
  border-radius: 0;
}

#grid-columns::-moz-range-thumb {
  width: var(--thumb);
  height: var(--thumb);
  background: currentColor;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
}

/* Range: IE/Edge Legacy */
#grid-columns::-ms-track {
  height: var(--track-hit);
  background: transparent;
  color: transparent;
  border: 0;
  border-radius: 0;
}

.grid-ticks {
  display: flex;
  justify-content: space-between;
  margin-top: -0.4rem;
  cursor: pointer;
}

.grid-ticks span {
  display: block;
  font-size: var(--fs-xs);
  position: relative;
}

.grid-ticks span::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  margin: 0.2rem auto 0;
}

/* Meta-Liste */
.projekt-meta {
  list-style: none;
  padding: 0;
  margin: 2rem 0;
  font-size: var(--fs-s);
}

.only-meta.projekt-meta {
  margin: 0 0 2rem 0;
}

.projekt-meta li {
  padding: 0.5rem 0;
  border-bottom: 1px solid currentColor;
}

/* =====================================================================
   Responsive Adjustments (global)
   ===================================================================== */
@media (max-width: 768px) {

  header#masthead {
    position: sticky;
    padding-top: 2rem;
    top: 0rem;
    z-index: 9;

  }

  .main-navigation {
    position: relative;
    padding: var(--space-xs) 0;
    width: 100%;
  }

  .projekt-text-container {
    flex-direction: column;
    font-size: 0.9rem;
  }

  .projekt-navigation {
    font-size: 0.9rem;
  }

  .site-info {
    padding-inline: 2rem;
  }

  .projekt-fallback-images {
    grid-template-columns: 1fr;
  }

  .grid-control {
    margin: 0;
    width: 100%;
  }

  #imprint,
  .projekt-top,
  .contact-section__sidebar {
    display: none;
  }

  .projekt-titel {
    margin-block-end: 0em;
  }

  .read-more-btn {
    margin-top: 0rem;
  }

  .site-header__brand-animation {
    margin-top: 0rem;
  }

  .site-header__brand-animated-text,
  .site-header__brand-letter {
    font-weight: 500;
  }

  .site-header__brand-plus {
    display: block;
    width: clamp(1.2rem, 4vw, 3rem);
    height: clamp(1.2rem, 4vw, 3rem);
    margin: 0.5rem 0.5rem 0.35rem 0.5rem;
  }

  .site-header__brand-word {
    font-size: 1.4rem !important;
  }

  .site {
    padding: 0 2rem 2rem;
  }

  .site-main.projekt-einzel {
    margin-top: 1rem;
  }

  .projekt-text-container {
    margin: 2rem 0;
    gap: 0;
  }

  #grid-columns::-webkit-slider-thumb {
    width: 12px;
    height: 12px;
  }

  .projekt-fallback-images {
    gap: var(--space-xs);
    margin-top: var(--space-xs);
  }

  .projekt-titel,
  .read-more-btn,
  .showcase__button,
  .projekt-navigation,
  .site-info {
    font-size: var(--fs-xxs);
  }
}