/* Schriften */

@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-var.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-var-italic.woff2") format("woff2");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-var.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Tokens */

:root {
  /* Flächen */
  --color-page:            #efedea;
  --color-page-alt:        #eeebe8;
  --color-surface-warm:    #eae6e2;
  --color-surface-process: #e2dad2;
  --color-footer:          #3c482e;
  --color-hero-dark:       #191811;

  /* Text */
  --color-ink:             #201c10;
  --color-copy:            #666055;
  --color-on-dark:         #f3f0e9;
  --color-on-dark-muted:   #cfcabb;

  /* Akzent */
  --color-olive:           #66753f;
  --color-olive-bright:    #919323;
  --color-link:            #55633a;
  --color-link-hover:      #3f4a2a;

  /* Abgeleitet */
  --color-white:               #fff;
  --color-olive-veiled:        color-mix(in srgb, var(--color-olive) 86%, transparent);
  --color-surface-process-end: #e8e2da;
  --surface-hover-on-dark:     rgba(255, 255, 255, .08);
  --surface-hover-rail:        rgba(255, 255, 255, .06);
  --lightbox-bg:               rgba(16, 15, 10, .93);

  /* Linien */
  --color-border:          rgba(68, 64, 54, .22);
  --color-border-strong:   rgba(68, 64, 54, .35);
  --color-border-on-dark:  rgba(255, 255, 255, .24);
  --color-field-border:    rgba(68, 64, 54, .45);

  /* Status (Formular) */
  --color-error:           #8f2a14;
  --color-error-surface:   #f7e9e4;
  --color-success:         #55633a;
  --color-success-surface: #e9ecdd;

  /* Overlays */
  --overlay-hero: linear-gradient(90deg,
      rgba(16, 15, 10, .93) 0%, rgba(16, 15, 10, .83) 25%,
      rgba(16, 15, 10, .48) 45%, rgba(16, 15, 10, .06) 68%,
      rgba(16, 15, 10, 0) 100%);
  --overlay-hero-mobile: linear-gradient(180deg,
      rgba(16, 15, 10, .15) 0%, rgba(16, 15, 10, .60) 62%,
      rgba(16, 15, 10, .88) 100%);
  --overlay-card: linear-gradient(180deg,
      rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .62) 100%);
  --panel-hero: rgba(16, 15, 10, .26);
  --rail-bg:    rgba(15, 15, 10, .46);
  --topbar-bg:  color-mix(in srgb, var(--color-footer) 70%, rgb(0 0 0 / .4));
  --shadow-on-image: 0 1px 4px rgba(16, 15, 10, .7);
  --drawer-bg:  rgba(15, 15, 10, .62);
  --backdrop:   rgba(16, 15, 10, .62);
  --pattern-empty: repeating-linear-gradient(135deg,
      transparent 0 9px, rgba(32, 28, 16, .05) 9px 10px);

  /* Fokus */
  --focus-color:         #3c482e;
  --focus-color-inverse: #efedea;
  --focus-width: 3px;
  --focus-offset: 2px;

  /* Schrift */
  --font-serif: "Cormorant Garamond", "Iowan Old Style", Palatino, Georgia, serif;
  --font-sans:  "Montserrat", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  --text-label:  max(.6875rem, 10px);
  --text-micro:  max(.75rem, 11px);
  --text-sm:     max(.875rem, 12px);
  --text-base:   clamp(1rem, .96rem + .2vw, 1.0625rem);
  --text-lead:   clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
  --text-h4:     clamp(1.25rem, 1.15rem + .5vw, 1.5rem);
  --text-h3:     clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --text-h2:     clamp(1.875rem, 1.5rem + 1.8vw, 2.875rem);
  --text-h1:     clamp(2rem, 1.5rem + 2.4vw, 3.375rem);

  --leading-tight:  1.08;
  --leading-snug:   1.25;
  --leading-normal: 1.6;
  --leading-caps:   1.35;

  --tracking-kicker: .2em;
  --tracking-caps:   .12em;
  --tracking-label:  .08em;

  /* Maße */
  --site-max: 1360px;
  --gutter:   clamp(1.25rem, 1rem + 1.5vw, 3rem);
  --section-space: clamp(3.5rem, 2.5rem + 4vw, 6.5rem);
  --tap-min: max(2.75rem, 44px);
  --topbar-h: 6.25rem;
  --rail-w:   7.5rem;
  --hero-gap: 1.25rem;
  --hero-edge: 30px;
  --hero-h: clamp(600px, 48.4375rem, 85svh);
  --hero-scroll: 120vh;
  --hero-hold: .15;
  --hero-fade-until: .35;
  --hero-seq-split: .25;
  --hero-seq-frames: .5;
  --grid-gap: .5rem;

  --icon-sm: 1rem;
  --icon-md: 1.5rem;
  --icon-lg: 2.5rem;
  --icon-xl: 3.5rem;

  /* Breakpoints */
  --bp-desktop: 1200px;
  --bp-tablet:  900px;
  --bp-mobile:  620px;

  /* Übergänge */
  --transition-fast:    .25s;
  --transition-base:    .3s;
  --transition-slow:    .45s;
  --transition-slower:  .5s;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* Basis */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  overflow-x: clip;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

/* Desktop-Wurzel folgt der Fensterhoehe: 1rem ab 900px Innenhoehe, Floor 13.5px (D14) */
@media (min-width: 1200px) {
  html { font-size: clamp(0.84375rem, 0.148rem + 1.52svh, 1rem); }
}

body {
  margin: 0;
  padding-block-start: var(--topbar-h);
  background-color: var(--color-page);
  color: var(--color-copy);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: var(--leading-normal);
}

body.startseite { padding-block-start: 0; }

h1, h2, h3, h4 {
  margin: 0;
  color: var(--color-ink);
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: var(--leading-snug);
}

h1 { font-size: var(--text-h1); line-height: var(--leading-tight); }
h2 { font-size: var(--text-h2); line-height: var(--leading-tight); }
h3 { font-size: var(--text-h3); }
h4 { font-size: var(--text-h4); }

p, ul, ol, dl, figure, table { margin-block: 0 1rem; }
p:last-child { margin-block-end: 0; }

img, svg { max-inline-size: 100%; }
img { block-size: auto; display: block; }

a {
  color: var(--color-link);
  text-underline-offset: .2em;
  transition: color var(--transition-fast) var(--ease);
}

a:hover { color: var(--color-link-hover); }

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: var(--focus-width) solid var(--focus-color);
  outline-offset: var(--focus-offset);
}

.on-dark :focus-visible,
.topbar :focus-visible,
.rail :focus-visible,
.lightbox :focus-visible,
.hero__logo:focus-visible,
.site-footer :focus-visible {
  outline-color: var(--focus-color-inverse);
}

.sr-only {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: 200;
  padding: .75rem 1.25rem;
  background-color: var(--color-footer);
  color: var(--color-on-dark);
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  text-decoration: none;
  transform: translateY(-140%);
  transition: transform var(--transition-fast) var(--ease);
}

.skip-link:focus {
  transform: none;
  color: var(--color-on-dark);
}

.container {
  inline-size: min(100% - 2 * var(--gutter), var(--site-max));
  margin-inline: auto;
}

.section { padding-block: var(--section-space); }

/* Ankerziele unter der fixen Topbar */
main[id],
section[id] { scroll-margin-block-start: var(--topbar-h); }

/* Bausteine */

.eyebrow {
  display: block;
  margin-block-end: 1.25rem;
  color: var(--color-copy);
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: var(--tracking-kicker);
  line-height: var(--leading-caps);
  text-transform: uppercase;
}

.eyebrow--on-dark { color: var(--color-on-dark-muted); }

.accent {
  color: var(--color-olive-bright);
  font-style: italic;
}

.as-h3 { font-size: var(--text-h3); }

.lead {
  font-size: var(--text-lead);
  line-height: var(--leading-normal);
}

.icon {
  inline-size: var(--icon-md);
  block-size: var(--icon-md);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

.icon--sm { inline-size: var(--icon-sm); block-size: var(--icon-sm); }
.icon--lg { inline-size: var(--icon-lg); block-size: var(--icon-lg); }
.icon--xl { inline-size: var(--icon-xl); block-size: var(--icon-xl); }

.icon--arrow {
  inline-size: 2.5rem;
  block-size: .75rem;
  transition: transform var(--transition-base) var(--ease);
}

.icon-sprite {
  position: absolute;
  inline-size: 0;
  block-size: 0;
  overflow: hidden;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  min-block-size: var(--tap-min);
  padding: .75rem 1.25rem;
  border: 0;
  border-radius: 0;
  background-color: var(--color-olive);
  color: var(--color-white);
  font-family: inherit;
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--transition-slow) var(--ease),
              color var(--transition-slow) var(--ease);
}

.btn:hover {
  background-color: var(--color-link-hover);
  color: var(--color-white);
}

.btn:hover .icon--arrow { transform: translateX(5px); }

.btn--hero {
  min-inline-size: 15rem;
  background-color: var(--color-olive-veiled);
}

.btn--block { inline-size: 100%; }

/* Textlink */
.textlink {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  min-block-size: var(--tap-min);
  padding-block: .5rem;
  color: var(--color-link);
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-decoration: none;
  text-transform: uppercase;
  transition: color var(--transition-fast) var(--ease);
}

.textlink .icon--arrow { color: var(--color-olive); }
.textlink:hover { color: var(--color-link-hover); }
.textlink:hover .icon--arrow { transform: translateX(5px); }

/* Merkmalsliste */
.feature-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.feature-list li {
  display: grid;
  grid-template-columns: 1.75rem 1fr;
  align-items: baseline;
  column-gap: .75rem;
  padding-block: .4rem;
  font-size: var(--text-sm);
}

.feature-list li::before {
  content: "";
  display: block;
  block-size: 1px;
  margin-block-start: .6em;
  background-color: var(--color-border-strong);
}

/* Medien */
.media {
  position: relative;
  display: block;
  margin: 0;
  overflow: hidden;
  background-color: var(--color-page-alt);
}

.media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.media--empty {
  display: grid;
  place-items: center;
  align-content: center;
  gap: .6rem;
  padding: 1rem;
  border: 1px solid var(--color-border-strong);
  background-color: var(--color-page-alt);
  background-image: var(--pattern-empty);
  color: var(--color-copy);
  text-align: center;
}

.media--empty .icon { color: var(--color-olive); }

.media__note {
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  line-height: var(--leading-caps);
  text-transform: uppercase;
}

/* Topbar und Drawer */

.topbar {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  block-size: var(--topbar-h);
  padding-inline: var(--gutter);
  color: var(--color-on-dark);
}

/* Halbtransparente Flaeche: Seiteninhalt scheint dezent durch */
.topbar::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border-block-end: 1px solid var(--color-border-on-dark);
  background-color: var(--topbar-bg);
  backdrop-filter: blur(2px);
}

.topbar__logo {
  display: flex;
  align-items: center;
  margin-inline-end: auto;
  padding-block: .25rem;
}

.topbar__logo img { block-size: 4rem; inline-size: auto; }

.topbar__nav ul {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.topbar__nav a {
  display: flex;
  align-items: center;
  gap: .5rem;
  color: var(--color-on-dark-muted);
  font-size: var(--text-label);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-decoration: none;
}

.topbar__nav a:not(.btn) {
  padding: .5rem .65rem;
  transition: color var(--transition-fast) var(--ease),
              background-color var(--transition-fast) var(--ease);
}

.topbar__nav a:hover { color: var(--color-on-dark); }

.topbar__nav a[aria-current] { color: var(--color-white); }

.topbar__nav a:not(.btn):hover { background-color: var(--surface-hover-rail); }

.topbar__cta {
  min-block-size: 2.25rem;
  padding: .5rem 1rem;
  gap: .75rem;
  color: var(--color-white);
}

.topbar__nav .topbar__cta:hover,
.topbar__nav .topbar__cta[aria-current] { color: var(--color-white); }

.topbar__contact,
.topbar__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  inline-size: 3.25rem;
  block-size: 3.25rem;
  padding: 0;
  border: 1px solid var(--color-border-on-dark);
  background: none;
  color: var(--color-on-dark);
  cursor: pointer;
  transition: background-color var(--transition-fast) var(--ease),
              color var(--transition-fast) var(--ease);
}

.topbar__contact:hover,
.topbar__toggle:hover {
  background-color: var(--surface-hover-on-dark);
  color: var(--color-on-dark);
}

.topbar__contact .icon,
.topbar__toggle .icon {
  inline-size: 1.75rem;
  block-size: 1.75rem;
}

.topbar__toggle .icon-close,
.topbar__toggle[aria-expanded="true"] .icon-open { display: none; }
.topbar__toggle[aria-expanded="true"] .icon-close { display: block; }

.topbar__nav .topbar__direct { display: none; }

.drawer-backdrop { display: none; }

@media (min-width: 1200px) {
  /* Fade je Schicht statt als Container-Opazitaet: eine Gruppen-Opazitaet
     koppelt den Backdrop-Filter vom Seitenhintergrund ab (Backdrop-Root),
     der Blur schnappte am Fade-Ende ein */
  body.startseite .topbar {
    visibility: hidden;
    transition: visibility var(--transition-slower);
  }

  body.startseite .topbar::before,
  body.startseite .topbar > * {
    opacity: 0;
    transition: opacity var(--transition-slower) var(--ease);
  }

  body.startseite .topbar[data-visible="true"] { visibility: visible; }

  body.startseite .topbar[data-visible="true"]::before,
  body.startseite .topbar[data-visible="true"] > * { opacity: 1; }

  .topbar__nav a { font-size: var(--text-sm); }

  .topbar__nav a .icon:not(.icon--arrow) {
    inline-size: var(--icon-md);
    block-size: var(--icon-md);
  }

  .topbar__nav a:focus-visible { outline-offset: -3px; }
}

/* Hero */

/* Ist der Startblock hoeher als das Fenster, wachsen Pin und Stage in jeder
   Breite mit dem Inhalt, sonst kappt overflow Hero-Unterkante und Leiste */
.intro-stage { min-block-size: calc(100svh + var(--hero-scroll)); }

.intro-pin {
  position: sticky;
  inset-block-start: 0;
  min-block-size: 100svh;
  overflow: hidden;
}

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-block-size: var(--hero-h);
  padding-block: 2rem;
  color: var(--color-on-dark);
}

.hero__media,
.hero__overlay {
  position: absolute;
  inset: 0;
}

.hero__media { z-index: -2; }
.hero__media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: 62% 50%;
}

.hero__frames {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  opacity: 0;
  transition: opacity .35s var(--ease);
}

.hero__media[data-frames="bereit"] .hero__frames { opacity: 1; }

.hero__overlay {
  z-index: -1;
  background-image: var(--overlay-hero-mobile);
}

.hero__inner {
  inline-size: min(100% - 2 * var(--gutter), var(--site-max));
  margin-inline: auto;
}

.hero__logo {
  display: inline-block;
  margin-block-end: 1.5rem;
}

.hero__logo img { inline-size: 7.5rem; }

.hero__layout { display: block; }

.hero__panel { padding: 0; }

.hero__panel h1 { color: var(--color-on-dark); }

.hero__panel .eyebrow { margin-block-end: 1rem; }

.hero__text {
  max-inline-size: 46ch;
  margin-block: 1.25rem;
  color: var(--color-on-dark);
}

.rail { display: none; }

/* Kategorie-Leiste */

.categories { padding-block: clamp(2.5rem, 1.5rem + 3vw, 3.5rem); }

.categories__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.category {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
  padding: 1.5rem 1rem;
  text-align: center;
}

.category .icon {
  inline-size: 3.25rem;
  block-size: 3.25rem;
  stroke-width: .875;
  color: var(--color-olive);
}

.category h3 {
  max-inline-size: 10rem;
  text-wrap: balance;
  font-family: var(--font-sans);
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  line-height: var(--leading-caps);
  text-transform: uppercase;
}

.category p {
  max-inline-size: 24ch;
  font-size: var(--text-sm);
  line-height: 1.5;
}

/* Leistungen */

.services__intro { margin-block-end: 2.5rem; }
.services__intro h2 { margin-block-end: 1.25rem; }
.services__intro p { max-inline-size: 44ch; }
.services__intro .textlink { margin-block-start: .75rem; }

.services__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--grid-gap);
}

.tile {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 1.1 / 1;
  color: var(--color-white);
  text-decoration: none;
}

.tile .media {
  position: absolute;
  inset: 0;
  background-color: transparent;
}

.tile .media img { transition: transform var(--transition-slow) var(--ease); }

.tile .media--empty {
  padding-block-end: 3.25rem;
}

.tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--overlay-card);
}

.tile:has(.media--empty)::after { display: none; }

.tile__label {
  position: absolute;
  z-index: 1;
  inset-block-end: 0;
  inset-inline: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: .5rem;
  padding: .75rem .875rem;
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  line-height: var(--leading-caps);
  text-transform: uppercase;
}

.tile:has(.media--empty) .tile__label { color: var(--color-ink); }

.tile:hover { color: var(--color-white); }
.tile:hover .media img { transform: scale(1.025); }
.tile:hover .icon--arrow { transform: translateX(5px); }

/* Projekt */

.project__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--grid-gap);
}

.project__main { aspect-ratio: 4 / 3; }

.project__stack {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--grid-gap);
}

.project__stack .media { aspect-ratio: 4 / 3; }

.project__text {
  padding: clamp(1.5rem, 1rem + 2vw, 2rem) clamp(1.5rem, 1rem + 2vw, 2.5rem);
  background-color: var(--color-surface-warm);
}

.project__text h2 { margin-block-end: 1.25rem; }
.project__text .feature-list { margin-block: 1.25rem; }

/* Grossansicht: Ausloeser, Lupe und Hover gelten ueberall gleich */

.media__gross {
  position: absolute;
  inset: 0;
  display: block;
}

.media__gross:focus-visible { outline-offset: -3px; }

.media__gross img { transition: transform var(--transition-slow) var(--ease); }
.media__gross:hover img { transform: scale(1.025); }

.media__lupe {
  position: absolute;
  inset-block-end: .625rem;
  inset-inline-end: .625rem;
  color: var(--color-white);
  opacity: .85;
  filter: drop-shadow(var(--shadow-on-image));
}

.lightbox {
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: 100%;
  max-block-size: 100%;
  margin: 0;
  border: 0;
  padding: 0;
  background-color: var(--lightbox-bg);
  color: var(--color-on-dark);
  opacity: 0;
  touch-action: pan-y;
  transition: opacity var(--transition-base) var(--ease);
}

.lightbox::backdrop { background-color: transparent; }

.lightbox[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox[data-open="true"] { opacity: 1; }

.lightbox__figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: .875rem;
  margin: 0;
  inline-size: 100%;
  transition: opacity var(--transition-base) var(--ease);
}

/* Bildwechsel: Bild und Bildunterschrift blenden gemeinsam */
.lightbox__figure[data-wechsel="true"] { opacity: 0; }

.lightbox__figure img {
  max-inline-size: 100%;
  max-block-size: calc(100vh - 10.5rem);
  max-block-size: calc(100dvh - 10.5rem);
  inline-size: auto;
  block-size: auto;
}

.lightbox__figure figcaption {
  max-inline-size: 62ch;
  padding-inline: var(--gutter);
  color: var(--color-on-dark-muted);
  font-size: var(--text-sm);
  text-align: center;
}

.lightbox__close,
.lightbox__nav {
  position: absolute;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 3.25rem;
  block-size: 3.25rem;
  padding: 0;
  border: 1px solid var(--color-border-on-dark);
  background-color: var(--rail-bg);
  color: var(--color-on-dark);
  cursor: pointer;
  transition: background-color var(--transition-fast) var(--ease);
}

.lightbox__close:hover,
.lightbox__nav:hover { background-color: var(--surface-hover-on-dark); }

.lightbox__close {
  inset-block-start: 1rem;
  inset-inline-end: 1rem;
}

.lightbox__close .icon {
  inline-size: 1.75rem;
  block-size: 1.75rem;
}

.lightbox__nav {
  inset-block-start: 50%;
  transform: translateY(-50%);
}

.lightbox__nav--zurueck { inset-inline-start: 1rem; }
.lightbox__nav--weiter { inset-inline-end: 1rem; }
.lightbox__nav--zurueck .icon--arrow { transform: scaleX(-1); }

/* Rinne wie beim Drawer: nichts verschiebt sich */
html[data-lightbox="open"] {
  overflow: hidden;
  scrollbar-gutter: stable;
}

/* Materialien */

.materials__intro { margin-block-end: 2.5rem; }
.materials__intro h2 { margin-block-end: 1.25rem; }
.materials__intro p { max-inline-size: 44ch; }
.materials__intro .textlink { margin-block-start: .75rem; }

.materials__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--grid-gap);
}

.material { display: flex; flex-direction: column; }

.material .media {
  aspect-ratio: 1 / 1.25;
  flex: none;
}

.material .media img { transition: transform var(--transition-slow) var(--ease); }
.material:hover .media img { transform: scale(1.025); }

.material__label {
  padding: .75rem .5rem;
  background-color: var(--color-surface-warm);
  color: var(--color-ink);
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  line-height: var(--leading-caps);
  text-align: center;
  text-transform: uppercase;
}

/* Prozess */

.process { padding-block-end: var(--section-space); }

.process__module {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border: 1px solid var(--color-border-strong);
}

.process__claim {
  padding: clamp(1.5rem, 1rem + 2vw, 2.25rem);
  background-image: linear-gradient(180deg,
      var(--color-surface-process), var(--color-surface-process-end));
}

.process__claim p:last-of-type {
  margin-block-start: 1rem;
  font-size: var(--text-sm);
}

.process__claim-text {
  color: var(--color-ink);
  font-family: var(--font-serif);
  font-size: var(--text-h3);
  font-style: italic;
  font-weight: 600;
  line-height: var(--leading-tight);
}

.process__steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding: clamp(1.5rem, 1rem + 2vw, 2.25rem);
}

.step {
  position: relative;
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  column-gap: 1rem;
  padding-block: 1rem;
}

.step__circle {
  display: grid;
  place-items: center;
  inline-size: 3.5rem;
  block-size: 3.5rem;
  border: 1px solid var(--color-border-strong);
  border-radius: 50%;
  background-color: var(--color-page);
  color: var(--color-olive);
}

.step__circle .icon {
  inline-size: 1.75rem;
  block-size: 1.75rem;
  stroke-width: 1.25;
}

.step:not(:last-child)::before {
  content: "";
  position: absolute;
  inset-block: 4.5rem .25rem;
  inset-inline-start: 1.75rem;
  inline-size: 1px;
  background-color: var(--color-border);
}

.step__number {
  display: block;
  margin-block-end: .35rem;
  color: var(--color-copy);
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-label);
}

.step h3 { margin-block-end: .35rem; font-size: var(--text-h4); }
.step p { font-size: var(--text-sm); line-height: 1.5; }

/* Footer */

.site-footer {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.5rem, 1.5rem + 3vw, 3.5rem) 1.25rem;
  background-color: var(--color-footer);
  color: var(--color-on-dark-muted);
  font-size: var(--text-sm);
}

.site-footer__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
}

.site-footer h2 {
  margin-block-end: 1rem;
  color: var(--color-on-dark);
  font-family: var(--font-sans);
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: var(--tracking-kicker);
  line-height: var(--leading-caps);
  text-transform: uppercase;
}

.site-footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer li { padding-block: .2rem; }

.site-footer a {
  color: var(--color-on-dark-muted);
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: color var(--transition-fast) var(--ease),
              text-decoration-color var(--transition-fast) var(--ease);
}

.site-footer a:hover {
  color: var(--color-on-dark);
  text-decoration-color: currentColor;
}

.site-footer__logo {
  display: inline-block;
  margin-block-end: 1.5rem;
}

.site-footer__brand img { inline-size: 10rem; }

.site-footer__claim {
  max-inline-size: 26ch;
  line-height: 1.5;
}

/* [PLATZHALTER] Social-Badges ohne Linkziel, bis Profile vorliegen (D5) */
.site-footer__social {
  display: flex;
  gap: .875rem;
  margin-block: 1.25rem 0;
  padding: 0;
  list-style: none;
}

.site-footer__badge {
  display: grid;
  place-items: center;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  border: 1px solid var(--color-border-on-dark);
  border-radius: 50%;
  color: var(--color-on-dark-muted);
}

.site-footer address {
  font-style: normal;
  line-height: 1.5;
}

.site-footer address li {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  column-gap: .625rem;
  align-items: start;
  padding-block: .3rem;
}

.site-footer address .icon {
  inline-size: var(--icon-sm);
  block-size: var(--icon-sm);
  margin-block-start: .3em;
  color: var(--color-on-dark-muted);
}

/* Oeffnungszeiten: Tag- und Zeitspalte buendig, Footer wie Kontaktkarte */
.oeffnungszeiten {
  display: grid;
  grid-template-columns: max-content max-content;
  justify-content: start;
  column-gap: .5rem;
}

.site-footer__leaf {
  position: absolute;
  inset-block-start: 5rem;
  inset-inline-end: 0;
  z-index: 0;
  inline-size: 30rem;
  block-size: auto;
  color: var(--color-olive-bright);
  pointer-events: none;
}

/* Umsetzer-Link blendet weich */
.site-footer__bottom a { transition-duration: var(--transition-slow); }

.site-footer__bottom {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .35rem 1.5rem;
  margin-block-start: 2.5rem;
  padding-block-start: 1.25rem;
  border-block-start: 1px solid var(--color-border-on-dark);
  font-size: var(--text-micro);
}

/* Zurueck nach oben: Sticky-Rail vor dem Footer, dockt am Seitenende an */

.totop {
  position: sticky;
  inset-block-end: 0;
  z-index: 50;
  block-size: 0;
}

.totop__btn {
  position: absolute;
  inset-block-end: 1.5rem;
  inset-inline-end: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--tap-min);
  block-size: var(--tap-min);
  padding: 0;
  border: 1px solid var(--color-border-strong);
  border-radius: 0;
  background-color: var(--color-page);
  color: var(--color-olive);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--transition-base) ease-in-out,
    visibility var(--transition-base) ease-in-out,
    border-color var(--transition-fast) var(--ease),
    background-color var(--transition-fast) var(--ease),
    color var(--transition-fast) var(--ease);
}

.totop[data-visible="true"] .totop__btn {
  opacity: 1;
  visibility: visible;
}

.totop[data-docked="true"] .totop__btn { inset-block-end: .75rem; }

.totop__btn:hover {
  border-color: var(--color-olive);
  background-color: var(--color-olive);
  color: var(--color-white);
}

.totop__btn .icon--arrow {
  inline-size: 1.75rem;
  block-size: .525rem;
  transform: rotate(-90deg);
}

.totop__btn:hover .icon--arrow { transform: rotate(-90deg) translateX(5px); }

/* Mittig im freien Rand rechts neben dem Inhalt, nie unter 1 rem Abstand */
@media (min-width: 992px) {
  .totop__btn,
  .totop[data-docked="true"] .totop__btn {
    inset-block-end: 1.5rem;
    inset-inline-end: max(1rem, calc((100% - min(100% - 2 * var(--gutter), var(--site-max))) / 4 - 1.375rem));
  }
}

/* Unterseiten */

.page { padding-block: clamp(2.5rem, 1.5rem + 3vw, 4rem) var(--section-space); }

/* Wasserzeichen: Logo-Blaetter gross und sehr schwach hinter der Seitenmitte */
.page--wasserzeichen { position: relative; }

.page--wasserzeichen::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset-block-start: 43%;
  inset-inline-start: 50%;
  inline-size: clamp(34rem, 88vw, 92rem);
  aspect-ratio: 380 / 193;
  transform: translate(-50%, -50%);
  background: url("../img/logo-blaetter.svg") no-repeat center / contain;
  opacity: .05;
  pointer-events: none;
}

.page__inner {
  inline-size: min(100% - 2 * var(--gutter), 44rem);
  margin-inline: auto;
}

.page__inner--wide { inline-size: min(100% - 2 * var(--gutter), 60rem); }

.breadcrumb {
  margin-block-end: 1.5rem;
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumb li + li::before {
  content: "/";
  margin-inline-end: .5rem;
  color: var(--color-border-strong);
}

.breadcrumb a {
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: color var(--transition-fast) var(--ease),
              text-decoration-color var(--transition-fast) var(--ease);
}

.breadcrumb a:hover { text-decoration-color: currentColor; }
.breadcrumb [aria-current] { color: var(--color-copy); }

.page h1 { margin-block-end: 1.25rem; }
.page h2 { margin-block: 2.5rem 1rem; font-size: var(--text-h3); }
.page h3 { margin-block: 1.75rem .5rem; font-size: var(--text-h4); }
.page .lead { margin-block-end: 2rem; color: var(--color-ink); }

.page__figure {
  margin-block: 2rem;
  aspect-ratio: 16 / 9;
}

.page__facts {
  margin-block: 2rem;
  padding: 1.5rem;
  border: 1px solid var(--color-border);
  background-color: var(--color-page-alt);
}

.page__facts dl {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .75rem;
  margin: 0;
}

.page__facts dt {
  color: var(--color-ink);
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.page__facts dd { margin: 0; font-size: var(--text-sm); }

.cta-block {
  margin-block-start: 3rem;
  padding: clamp(1.5rem, 1rem + 2vw, 2.25rem);
  background-color: var(--color-surface-warm);
}

.cta-block h2 { margin-block: 0 .75rem; font-size: var(--text-h3); }
.cta-block p { max-inline-size: 46ch; }

.cta-block__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
  margin-block-start: 1.5rem;
}

.cta-block__phone {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-block-size: var(--tap-min);
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: color var(--transition-fast) var(--ease),
              text-decoration-color var(--transition-fast) var(--ease);
}

.cta-block__phone:hover { text-decoration-color: currentColor; }

.link-list {
  columns: 2;
  column-gap: 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.link-list li { padding-block: .25rem; break-inside: avoid; }

/* Kontaktformular */

.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
}

.contact__card {
  align-self: start;
  padding: clamp(1.5rem, 1rem + 2vw, 2rem);
  background-color: var(--color-surface-warm);
}

.contact__card h2 { margin-block: 0 1rem; font-size: var(--text-h4); }

.contact__card address {
  margin-block-end: .75rem;
  font-style: normal;
  line-height: 1.6;
}

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

.contact__card li {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  column-gap: .625rem;
  align-items: start;
  padding-block: .4rem;
  font-size: var(--text-sm);
}

.contact__card .icon {
  inline-size: var(--icon-sm);
  block-size: var(--icon-sm);
  margin-block-start: .35em;
  color: var(--color-olive);
}

.field { margin-block-end: 1.25rem; }

.field label {
  display: block;
  margin-block-end: .4rem;
  color: var(--color-ink);
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.field .req { color: var(--color-error); }

.field input,
.field select,
.field textarea {
  inline-size: 100%;
  min-block-size: max(3rem, 44px);
  padding: .625rem .75rem;
  border: 1px solid var(--color-field-border);
  border-radius: 0;
  background-color: var(--color-white);
  color: var(--color-ink);
  font-family: inherit;
  font-size: var(--text-base);
  line-height: 1.4;
  transition: border-color var(--transition-fast) var(--ease),
              background-color var(--transition-fast) var(--ease);
}

.field textarea { min-block-size: 9rem; resize: vertical; }

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--color-olive);
  border-width: 2px;
  padding: calc(.625rem - 1px) calc(.75rem - 1px);
  outline: var(--focus-width) solid var(--focus-color);
  outline-offset: var(--focus-offset);
}

.field--select .select-wrap {
  position: relative;
  display: block;
}

.field--select select {
  appearance: none;
  padding-inline-end: 2.75rem;
}

.field--select .icon-chevron {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: 1rem;
  transform: translateY(-50%);
  color: var(--color-olive);
  pointer-events: none;
}

.field--error input,
.field--error select,
.field--error textarea {
  border-color: var(--color-error);
  border-width: 2px;
  padding: calc(.625rem - 1px) calc(.75rem - 1px);
  background-color: var(--color-error-surface);
}

.field__error {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-block-start: .4rem;
  color: var(--color-error);
  font-size: var(--text-sm);
}

.honeypot {
  position: absolute;
  inset-inline-start: -9999px;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
}

.form-alert {
  margin-block-end: 1.75rem;
  padding: 1rem 1.25rem;
  border-inline-start: 4px solid var(--color-error);
  background-color: var(--color-error-surface);
  color: var(--color-ink);
}

.form-alert h2 {
  margin-block: 0 .5rem;
  color: var(--color-error);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 600;
}

.form-alert ul { margin-block-end: 0; padding-inline-start: 1.25rem; }
.form-alert a { color: var(--color-error); }

.form-success {
  margin-block-end: 1.75rem;
  padding: 1.25rem 1.5rem;
  border-inline-start: 4px solid var(--color-success);
  background-color: var(--color-success-surface);
  color: var(--color-ink);
}

.form-success h2 {
  display: flex;
  align-items: center;
  gap: .625rem;
  margin-block: 0 .5rem;
  font-family: var(--font-sans);
  font-size: var(--text-h4);
}

.form-success .icon { color: var(--color-success); }

.form-note {
  margin-block: 1.5rem;
  font-size: var(--text-sm);
}

/* Breakpoint 620 px */

@media (min-width: 480px) {
  .services__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 479px) {
  .services__grid,
  .materials__grid,
  .site-footer__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 899px) {
  .site-footer__grid {
    inline-size: fit-content;
    margin-inline: auto;
  }

  .site-footer__leaf {
    inset-block-start: auto;
    inset-block-end: 4.5rem;
    inset-inline-end: 0;
    inline-size: 19rem;
  }
}

@media (min-width: 900px) and (max-width: 1199px) {
  .site-footer__leaf { inset-block-start: 23rem; }
}

@media (min-width: 620px) {
  .page__facts dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cta-block__actions { flex-wrap: nowrap; }
  .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem; }
}

/* Breakpoint 900 px */

@media (min-width: 900px) {
  .categories__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .category:not(:nth-child(3n + 1)) { border-inline-start: 1px solid var(--color-border); }

  .services__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .services__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 2.5rem;
  }
  .services__intro { margin-block-end: 0; align-self: center; }

  .project__main { aspect-ratio: 16 / 9; }
  .project__main img { object-position: 50% 0; }

  .materials__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .materials__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
    gap: 2.5rem;
  }
  .materials__intro { margin-block-end: 0; align-self: center; }

  .process__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; }

  .contact__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2.5rem; }
}

/* Breakpoint 1200 px */

@media (min-width: 1200px) {
  .hero {
    justify-content: flex-start;
    padding-block: 1.75rem 2.25rem;
  }

  .hero__overlay { background-image: var(--overlay-hero); }

  .hero__inner {
    inline-size: 100%;
    margin-inline: 0;
    padding-inline-start: var(--hero-edge);
  }

  .hero__logo { margin-inline-start: 1.875rem; margin-block-end: 1.8rem; }
  .hero__logo img { inline-size: 9.375rem; }

  .hero__layout {
    display: grid;
    grid-template-columns: var(--rail-w) minmax(0, 27rem);
    column-gap: var(--hero-gap);
    align-items: stretch;
  }

  .hero__panel {
    padding: 1.875rem 1.375rem 2rem 4rem;
    border: 1px solid var(--color-border-on-dark);
    background-color: var(--panel-hero);
  }

  .rail {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-border-on-dark);
    background-color: var(--rail-bg);
    backdrop-filter: blur(1px);
  }

  .rail ul {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: space-evenly;
    gap: .25rem;
    margin: 0;
    padding: 1.25rem 0;
    list-style: none;
  }

  .rail a {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    min-block-size: 3.5rem;
    padding: .5rem .25rem;
    color: var(--color-on-dark-muted);
    font-size: var(--text-label);
    font-weight: 500;
    letter-spacing: var(--tracking-label);
    text-align: center;
    text-decoration: none;
    transition: color var(--transition-fast) var(--ease),
                background-color var(--transition-fast) var(--ease);
  }

  .rail a:hover {
    background-color: var(--surface-hover-rail);
    color: var(--color-on-dark);
  }

  .rail a:focus-visible { outline-offset: -3px; }

  .rail a[aria-current] { color: var(--color-on-dark); }

  .rail a[aria-current]::before {
    content: "";
    position: absolute;
    inset-block: .35rem;
    inset-inline-start: 0;
    inline-size: 2px;
    background-color: var(--color-olive-bright);
  }

  .rail__action {
    padding: 1rem .25rem 1.25rem;
    border-block-start: 1px solid var(--color-border-on-dark);
    text-align: center;
  }

  .rail__action a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    color: var(--color-olive-bright);
    font-size: var(--text-label);
    font-weight: 500;
    letter-spacing: var(--tracking-label);
    text-decoration: none;
    transition: color var(--transition-fast) var(--ease);
  }

  .rail__action a:hover { color: var(--color-on-dark); }

  .rail__action .rail__badge {
    display: grid;
    place-items: center;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    border: 1px solid currentColor;
    border-radius: 50%;
  }

  .categories { padding-block: 2rem; }
  .categories__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .category { padding-block: 0; }
  .category:not(:nth-child(3n + 1)) { border-inline-start: 0; }
  .category:not(:first-child) { border-inline-start: 1px solid var(--color-border); }

  .services__layout { grid-template-columns: minmax(0, 30fr) minmax(0, 70fr); gap: 3.5rem; }
  .services__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .project__grid {
    grid-template-columns: minmax(0, 59fr) minmax(0, 41fr);
    grid-template-rows: minmax(0, 1fr) auto;
    min-block-size: 22.5rem;
  }
  .project__main,
  .project__stack { grid-column: 1; }
  .project__main { aspect-ratio: auto; }
  .project__main img { position: absolute; inset: 0; }
  .project__text {
    grid-row: 1 / span 2;
    grid-column: 2;
    padding: 2rem 2.5rem 2.5rem 4.75rem;
  }

  .materials__layout { grid-template-columns: minmax(0, 34fr) minmax(0, 66fr); gap: 3.5rem; }

  /* Kacheln fuellen die Zeilenhoehe: Intro und Raster schliessen gleich ab */
  .materials__grid {
    display: flex;
    gap: var(--grid-gap);
  }

  .materials__grid .material {
    flex: 1 1 0;
    min-inline-size: 0;
  }

  .material .media {
    flex: 1 1 0;
    aspect-ratio: auto;
    min-block-size: 0;
  }

  .process__module { grid-template-columns: minmax(0, 27fr) minmax(0, 73fr); }
  .process__claim { display: flex; flex-direction: column; justify-content: center; }

  .process__steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 1rem;
    padding: 2.25rem 2rem;
  }

  .step {
    grid-template-columns: minmax(0, 1fr);
    padding-block: 0;
    padding-inline-end: 1rem;
  }

  .step__circle { margin-block-end: 1rem; }

  .step:not(:last-child)::before {
    inset-block: auto;
    inset-block-start: 1.75rem;
    inset-inline-start: 4rem;
    inline-size: calc(100% - 4rem);
    block-size: 1px;
  }

  /* Freiraum rechts fuer das Blattmotiv */
  .site-footer__grid {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr) minmax(0, 1.05fr) minmax(0, .8fr);
    gap: 2.5rem;
    padding-inline-end: clamp(12rem, 38vw - 16rem, 16rem);
  }
}

/* Unter 1200 px */

@media (max-width: 1199px) {
  body.startseite .topbar::before {
    opacity: 0;
    transition: opacity var(--transition-slower) var(--ease);
  }

  body.startseite .topbar[data-visible="true"]::before { opacity: 1; }

  .topbar__logo img,
  .topbar__contact,
  .topbar__toggle { filter: drop-shadow(var(--shadow-on-image)); }

  .hero__logo { display: none; }

  .topbar__contact,
  .topbar__toggle { display: inline-flex; }

  /* Schliessen-Schaltflaeche bleibt ueber der halbtransparenten Flaeche */
  .topbar__toggle {
    position: relative;
    z-index: 115;
  }

  html[data-drawer="open"] .topbar__contact { visibility: hidden; }

  .topbar__nav {
    position: fixed;
    inset-block: 0;
    inset-inline-end: 0;
    z-index: 110;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    inline-size: min(20rem, 86vw);
    padding: 1.5rem;
    overflow-y: auto;
    border-inline-start: 1px solid var(--color-border-on-dark);
    background-color: var(--drawer-bg);
    backdrop-filter: blur(12px);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform var(--transition-slower) var(--ease),
                visibility 0s linear var(--transition-slower);
  }

  .topbar__nav[data-open="true"] {
    transform: none;
    visibility: visible;
    transition: transform var(--transition-slower) var(--ease), visibility 0s;
  }

  .topbar__nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-block-start: 3rem;
  }

  .topbar__nav li { border-block-end: 1px solid var(--color-border-on-dark); }

  .topbar__nav a:not(.btn) {
    min-block-size: 3.5rem;
    gap: .875rem;
    padding-inline: 0;
    font-size: var(--text-lead);
    letter-spacing: 0;
  }

  .topbar__nav .topbar__cta {
    justify-content: space-between;
    min-block-size: var(--tap-min);
    font-size: var(--text-label);
    letter-spacing: var(--tracking-caps);
  }

  .topbar__nav li:has(.topbar__cta) { border-block-end: 0; }

  .topbar__nav .topbar__direct {
    display: flex;
    margin-block-start: auto;
    padding-block-start: 1rem;
    border-block-start: 1px solid var(--color-border-on-dark);
  }

  .topbar__direct li { border-block-end: 0; }

  .topbar__nav .topbar__direct a {
    min-block-size: var(--tap-min);
    font-size: var(--text-base);
    overflow-wrap: anywhere;
  }

  .drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 105;
    display: block;
    background-color: var(--backdrop);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-slower) var(--ease),
                visibility 0s linear var(--transition-slower);
  }

  .drawer-backdrop[data-open="true"] {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--transition-slower) var(--ease), visibility 0s;
  }

  /* Rinne ersetzt die entfallene Scrollleiste: nichts verschiebt sich */
  html[data-drawer="open"] {
    overflow: hidden;
    scrollbar-gutter: stable;
  }
}

/* Motion */

@keyframes eintritt {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

.hero__panel > * {
  animation: eintritt .45s var(--ease) both;
}

.hero__panel > *:nth-child(2) { animation-delay: .06s; }
.hero__panel > *:nth-child(3) { animation-delay: .12s; }
.hero__panel > *:nth-child(4) { animation-delay: .18s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  /* Reines Opacity-Faden ohne Bewegung: laeuft auch bei reduzierter Motion */
  body.startseite .topbar,
  body.startseite .topbar::before,
  body.startseite .topbar > * {
    transition-duration: var(--transition-slower) !important;
  }

  .hero__panel > * { animation: none; }

  /* Drawer-Fahrt und Backdrop-Fade laufen auch bei reduzierter Motion (D11) */
  body .topbar > .topbar__nav,
  body .topbar > .drawer-backdrop { transition-duration: var(--transition-slower), 0s !important; }

  /* Hover-Rueckmeldung an Pfeilen, Bildflaechen, Buttons und
     Umsetzer-Link: laeuft auch bei reduzierter Motion */
  .icon--arrow { transition-duration: var(--transition-base) !important; }
  .btn { transition-duration: var(--transition-slow) !important; }
  .site-footer__bottom a { transition-duration: var(--transition-slow) !important; }
  .tile .media img,
  .material .media img,
  .media__gross img { transition-duration: var(--transition-slow) !important; }

  /* Grossansicht: Oeffnen/Schliessen und Bildwechsel sind reines
     Opacity-Faden (D11) */
  .lightbox,
  .lightbox__figure { transition-duration: var(--transition-base) !important; }

  /* Zurueck-nach-oben-Knopf: Faden laeuft auch bei reduzierter Motion (D11) */
  .totop__btn { transition-duration: var(--transition-base) !important; }
}