/* Knüsel / Entwurf 02. Zentrale Gestaltung und responsive Grundwerte. */
@font-face {
  font-family:Sora;
  src:url('Sora-Variable.ttf') format('truetype');
  font-weight:100 800;
  font-display:swap;
}

:root {
  --orange:#ef8338;
  --ink:#242624;
  --blue:#245f96;
  --paper:#fafaf7;
  --soft:#efefe9;
  --line:#d6d7cf;
  --muted:#62655e;
  --white:#fff;
  --gutter:clamp(1.25rem,4vw,4.5rem);
  --max:1480px;
  --space:clamp(4.5rem,8vw,8.5rem);
  --head:clamp(2.4rem,5.1vw,5rem);
  --body:1rem;
}

* {
  box-sizing:border-box;
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:7rem;
  scrollbar-gutter:stable;
}

body {
  margin:0;
  color:var(--ink);
  background:var(--paper);
  font:var(--body)/1.7 'Segoe UI',Arial,sans-serif;
  overflow-wrap:anywhere;
}

body.modal-open {
  overflow:hidden;
}

img {
  max-width:100%;
  height:auto;
  display:block;
}

button,input {
  font:inherit;
}

button,a,summary {
  -webkit-tap-highlight-color:transparent;
}

a {
  color:inherit;
  text-decoration:none;
}

button {
  color:inherit;
}

p,h1,h2,h3,h4,figure {
  margin:0;
}

h1,h2,h3 {
  font-family:Sora,'Segoe UI',sans-serif;
  font-weight:500;
  line-height:1.1;
  letter-spacing:-.055em;
}

h2 {
  font-size:var(--head);
}

h3 {
  font-size:clamp(1.25rem,2.5vw,2rem);
}

p {
  max-width:65ch;
}

address {
  font-style:normal;
}

button {
  cursor:pointer;
}

a:focus-visible,button:focus-visible,summary:focus-visible {
  outline:3px solid var(--blue);
  outline-offset:5px;
}

main:focus {
  outline:none;
}

[hidden] {
  display:none!important;
}

.wrap {
  max-width:var(--max);
  padding-inline:var(--gutter);
  margin-inline:auto;
}

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

.eyebrow {
  font-size:.75rem;
  font-weight:600;
  line-height:1.5;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.muted {
  color:var(--muted);
}

.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
}

.skip {
  position:fixed;
  top:-10rem;
  left:1rem;
  z-index:1000;
  padding:.75rem 1rem;
  background:var(--ink);
  color:white;
}

.skip:focus {
  top:1rem;
}

.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:52px;
  min-width:0;
  text-align:center;
  border:1px solid var(--ink);
  border-radius:50px;
  padding:.9rem 1.5rem;
  font-size:.9375rem;
  font-weight:600;
  line-height:1.4;
  transition:background .2s,color .2s,transform .2s;
}

.button:hover {
  background:var(--ink);
  color:white;
  transform:translateY(-2px);
}

.button-dark {
  background:var(--ink);
  color:white;
}

.button-dark:hover {
  background:#444940;
}

.button-orange {
  background:var(--orange);
  color:var(--ink);
  border-color:var(--orange);
}

.button-orange:hover {
  background:#ffad70;
  color:var(--ink);
}

.text-link {
  font-weight:600;
  display:inline-block;
  padding-block:.5rem;
  border-bottom:1px solid currentColor;
  line-height:1.5;
}

.text-link:hover {
  color:var(--blue);
}

/* Navigation. Ohne JS stehen alle Seiten zusätzlich im normalen Dokumentfluss. */
.site-header {
  position:sticky;
  top:0;
  z-index:40;
  background:var(--paper);
  border-bottom:1px solid var(--line);
}

.header-inner {
  min-height:88px;
  max-width:var(--max);
  margin:auto;
  padding:1rem var(--gutter);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:1rem 2rem;
}

.brand {
  display:inline-block;
  flex:none;
  width:160px;
}

.brand img {
  width:100%;
  height:auto;
  mix-blend-mode:multiply;
}

.primary-nav {
  display:flex;
  align-items:center;
  gap:2.5rem;
  margin-left:auto;
  font-size:.9375rem;
}

.primary-nav a {
  position:relative;
}

.primary-nav a::after {
  position:absolute;
  content:'';
  height:2px;
  background:var(--ink);
  bottom:-6px;
  left:0;
  right:100%;
  transition:right .25s;
}

.primary-nav a:hover::after,.primary-nav a[aria-current]::after {
  right:0;
}

.header-actions {
  display:flex;
  gap:1.5rem;
  align-items:center;
}

.contact-link {
  border:1px solid var(--ink);
  border-radius:30px;
  padding:.55rem 1.2rem;
  font-size:.875rem;
  font-weight:600;
}

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

.menu-toggle {
  width:44px;
  height:44px;
  background:transparent;
  border:0;
  display:grid;
  align-content:center;
  gap:6px;
  padding:8px;
}

.menu-toggle span {
  display:block;
  height:2px;
  background:var(--ink);
  width:28px;
}

.menu-toggle span:last-child {
  width:19px;
  justify-self:end;
  transition:width .2s;
}

.menu-toggle:hover span:last-child {
  width:28px;
}

.fallback-nav {
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
  padding:1rem var(--gutter);
  font-size:.875rem;
  border-bottom:1px solid var(--line);
}

.fallback-nav a {
  text-decoration:underline;
}

.site-menu {
  width:min(1440px,calc(100% - 2rem));
  max-width:none;
  max-height:calc(100dvh - 2rem);
  padding:0;
  border:0;
  background:var(--paper);
  color:var(--ink);
  overflow:auto;
}

.site-menu::backdrop,.lightbox::backdrop {
  background:rgba(15,20,16,.7);
  backdrop-filter:blur(6px);
}

.menu-bar {
  padding:1.5rem 2.5rem;
  display:flex;
  gap:1rem;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
}

.menu-close,.lightbox-close {
  display:flex;
  align-items:center;
  gap:1rem;
  border:0;
  background:transparent;
  font-size:.875rem;
  min-height:44px;
}

.menu-close span,.lightbox-close span {
  font-size:2rem;
  font-weight:300;
  line-height:1;
}

.menu-layout {
  display:grid;
  grid-template-columns:1.3fr 1fr;
  min-height:600px;
}

.menu-layout>nav {
  padding:2rem 2.5rem;
}

.menu-layout>nav a {
  display:flex;
  align-items:baseline;
  gap:1.5rem;
  padding:.55rem 0;
  font-family:Sora,sans-serif;
  font-size:clamp(2rem,3.8vw,3.75rem);
  line-height:1.3;
  letter-spacing:-.045em;
}

.menu-layout>nav small {
  font: .75rem/1.4 'Segoe UI',sans-serif;
  color:var(--muted);
  letter-spacing:.05em;
}

.menu-layout>nav a:hover,.menu-layout>nav a[aria-current] {
  color:var(--blue);
}

.menu-aside {
  position:relative;
  background:var(--orange);
  padding:3rem;
  overflow:hidden;
  isolation:isolate;
}

.menu-aside>img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.15;
  mix-blend-mode:multiply;
  z-index:-1;
}

.menu-aside>div>p:not(.eyebrow) {
  font:500 clamp(1.5rem,2.7vw,2.8rem)/1.25 Sora,sans-serif;
  letter-spacing:-.04em;
  margin-top:2rem;
}

.menu-aside address {
  margin-block:2rem;
}

.menu-aside a {
  display:block;
  min-height:36px;
  font-size:1rem;
}

/* Start: typografischer Auftakt und drei bewusst komponierte Originalbilder. */
.home-hero {
  background:var(--orange);
  padding-top:2.5rem;
  padding-bottom:0;
}

.hero-meta {
  display:flex;
  gap:1rem;
  justify-content:space-between;
}

.home-hero h1 {
  text-align:center;
  font-size:clamp(3rem,8vw,8.2rem);
  line-height:1.04;
  letter-spacing:-.065em;
  margin-top:2.1rem;
}

.home-hero h1 span {
  font-weight:400;
}

.hero-description {
  text-align:center;
  font-size:1rem;
  line-height:1.6;
  margin:1.5rem auto 0;
}

.hero-film {
  display:grid;
  grid-template-columns:1fr 1.3fr 1fr;
  gap:1.2rem;
  align-items:start;
  margin-top:2.5rem;
}

.hero-film .photo {
  min-width:0;
}

.hero-film .photo:nth-child(2) {
  margin-top:2.5rem;
}

.hero-film img {
  width:100%;
  height:clamp(220px,25vw,370px);
  object-fit:cover;
}

.hero-film .photo:nth-child(2) img {
  height:clamp(180px,22vw,330px);
}

.hero-film figcaption {
  font-size:.75rem;
  line-height:1.5;
  letter-spacing:.02em;
  margin-top:.65rem;
}

.hero-links {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:3rem;
  margin-top:2rem;
  border-top:1px solid rgba(36,38,36,.45);
}

.hero-links>a {
  padding:1.6rem 3.5rem 1.6rem 0;
  position:relative;
}

.hero-links>a+a {
  border-left:1px solid rgba(36,38,36,.45);
  padding-left:2rem;
}

.hero-links strong {
  font-family:Sora,sans-serif;
  display:block;
  font-weight:500;
  font-size:clamp(1.125rem,2vw,1.7rem);
  letter-spacing:-.04em;
  margin-top:.4rem;
  line-height:1.3;
}

.hero-links .eyebrow {
  font-size:.75rem;
}

.link-plus {
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);
  font-size:2rem;
  font-weight:300;
}

.hero-links a:hover strong {
  text-decoration:underline;
  text-underline-offset:5px;
}

.home-statement {
  text-align:center;
  max-width:1150px;
}

.home-statement h2 {
  margin-top:1.5rem;
}

.home-statement>p:last-child {
  max-width:49ch;
  margin:1.8rem auto 0;
  color:var(--muted);
  font-size:1.125rem;
}

.worlds {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.5rem;
}

.world {
  min-width:0;
  border-radius:8px;
  overflow:hidden;
  background:var(--soft);
}

.world-heading {
  position:relative;
  padding:2.5rem;
}

.world h2 {
  font-size:clamp(2rem,3.5vw,3.5rem);
  margin-top:1rem;
  max-width:14ch;
}

.circle-plus {
  position:absolute;
  right:2rem;
  bottom:2.6rem;
  display:grid;
  place-items:center;
  width:45px;
  height:45px;
  border:1px solid var(--ink);
  border-radius:50%;
  font-size:1.8rem;
  transition:transform .25s;
}

.world:hover .circle-plus {
  transform:rotate(90deg);
}

.world>img {
  width:100%;
  height:340px;
  object-fit:cover;
  transition:transform .6s;
}

.world:hover>img {
  transform:scale(1.025);
}

.world>p {
  padding:1.6rem 2.5rem 2rem;
  color:var(--muted);
  max-width:60ch;
}

.world-electric {
  background:var(--ink);
  color:var(--paper);
}

.world-electric>p {
  color:#d2d5cd;
}

.world-electric .circle-plus {
  border-color:var(--paper);
}

.world-electric:focus-visible {
  outline-color:var(--orange);
}

.section-heading {
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:2rem;
  margin-bottom:3rem;
}

.section-heading h2 {
  margin-top:1rem;
}

.section-heading>p {
  color:var(--muted);
  font-size:1rem;
  max-width:38ch;
}

.editorial-gallery {
  display:grid;
  grid-template-columns:1fr 1.2fr .85fr;
  gap:2rem;
  align-items:start;
}

.editorial-gallery .photo:nth-child(2) {
  margin-top:5rem;
}

.editorial-gallery .photo:nth-child(3) {
  margin-top:1.8rem;
}

.editorial-gallery img {
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
}

.photo {
  min-width:0;
}

.photo figcaption {
  font-size:.8125rem;
  color:var(--muted);
  line-height:1.5;
  margin-top:.8rem;
}

.photo-link {
  display:block;
  overflow:hidden;
  position:relative;
  background:var(--soft);
}

.photo-link img {
  transition:transform .7s cubic-bezier(.2,.6,.3,1);
}

.photo-link:hover img {
  transform:scale(1.055);
}

.zoom-mark {
  position:absolute;
  right:1rem;
  bottom:1rem;
  display:grid;
  place-items:center;
  background:var(--paper);
  color:var(--ink);
  border-radius:50%;
  width:38px;
  height:38px;
  font-size:1.6rem;
  line-height:1;
}

.history-teaser {
  background:var(--orange);
  display:grid;
  grid-template-columns:1fr 1fr;
  padding:var(--space) max(var(--gutter),calc((100vw - 1336px)/2));
  gap:6rem;
}

.history-teaser-year>span:nth-child(2) {
  display:block;
  font:400 clamp(6rem,16vw,15rem)/1.1 Sora,sans-serif;
  letter-spacing:-.1em;
  margin-top:2.5rem;
}

.history-teaser-year>p {
  margin-top:1rem;
  font-size:1.125rem;
}

.history-teaser-copy h2 {
  font-size:clamp(2.5rem,4.5vw,4.3rem);
}

.history-teaser-copy>p {
  max-width:37ch;
  margin-block:1.6rem 2rem;
}

.history-teaser a:focus-visible,.home-hero a:focus-visible {
  outline-color:var(--ink);
}

.visit {
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:5rem;
}

.visit h2 {
  margin-top:1rem;
  font-size:clamp(2.5rem,4vw,4rem);
}

.visit address {
  margin-block:1.8rem 1rem;
  color:var(--muted);
}

.visit img {
  width:100%;
  aspect-ratio:5/4;
  object-fit:cover;
}

/* Gemeinsamer Abschluss. */
.site-footer {
  background:var(--ink);
  color:var(--paper);
  padding-block:4rem 1.5rem;
}

.footer-intro {
  padding-bottom:2.5rem;
  border-bottom:1px solid #5d6158;
}

.footer-title {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
  font:400 clamp(2.5rem,5.4vw,5.5rem)/1.2 Sora,sans-serif;
  letter-spacing:-.06em;
  margin-top:1.5rem;
}

.footer-disc {
  display:grid;
  place-items:center;
  background:var(--orange);
  color:var(--ink);
  border-radius:50%;
  width:90px;
  height:90px;
  flex:none;
  font:300 4rem/1 'Segoe UI',sans-serif;
  transition:transform .3s;
}

.footer-title:hover .footer-disc {
  transform:rotate(90deg);
}

.footer-grid {
  display:grid;
  grid-template-columns:1.2fr 1fr 1fr .8fr;
  gap:2rem;
  padding-block:3rem;
}

.footer-grid .brand {
  width:140px;
  background:var(--paper);
  border-radius:2px;
  padding:.4rem;
}

.footer-grid address {
  font-size:.875rem;
  color:#c8ccc3;
  margin-top:1.2rem;
}

.footer-grid .eyebrow {
  color:#c8ccc3;
  margin-bottom:1rem;
}

.footer-grid a:not(.brand) {
  display:block;
  font-size:.9375rem;
  line-height:1.5;
  margin-block:.55rem;
  overflow-wrap:anywhere;
}

.footer-grid a:hover,.footer-bottom a:hover {
  text-decoration:underline;
  text-underline-offset:5px;
}

.footer-bottom {
  display:flex;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
  border-top:1px solid #5d6158;
  padding-top:1.2rem;
  color:#c8ccc3;
  font-size:.75rem;
  line-height:1.6;
}

.footer-bottom>div {
  display:flex;
  flex-wrap:wrap;
  gap:1.5rem;
}

.site-footer a:focus-visible {
  outline-color:var(--orange);
}

/* Bildansicht: native Dialoge erhalten die Tastatur innerhalb des geöffneten Fensters. */
.lightbox {
  background:var(--ink);
  color:var(--paper);
  border:0;
  width:min(1360px,calc(100% - 2rem));
  max-width:none;
  max-height:calc(100dvh - 2rem);
  padding:1.25rem 2rem;
  overflow:auto;
}

.lightbox-top,.lightbox-bottom {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}

.lightbox figure {
  margin-block:1rem;
}

.lightbox figure>img {
  width:100%;
  height:min(65dvh,800px);
  object-fit:contain;
}

.lightbox figcaption {
  font-size:.9375rem;
  text-align:center;
  margin-top:1rem;
}

.lightbox-bottom button {
  min-height:44px;
  background:transparent;
  border:1px solid #a5ab9d;
  border-radius:30px;
  padding:.5rem 1rem;
  font-size:.875rem;
  color:var(--paper);
}

.lightbox-count {
  font-size:.8125rem;
}

.lightbox :focus-visible {
  outline-color:var(--orange);
}

@media(max-width:1100px) {
  .primary-nav {
    gap:1.5rem;
  }
  .header-inner {
    gap:1.2rem;
  }
  .hero-meta {
    gap:2rem;
  }
  .history-teaser {
    gap:3rem;
  }
  .world-heading {
    padding:2rem;
  }
  .world>p {
    padding-inline:2rem;
  }
  .world h2 {
    padding-right:2rem;
  }
  .circle-plus {
    right:1.5rem;
  }
  .footer-grid {
    grid-template-columns:1fr 1fr;
  }
  .visit {
    gap:3rem;
  }
  .menu-layout {
    grid-template-columns:1.25fr 1fr;
    min-height:540px;
  }
  .menu-aside {
    padding:2rem;
  }
}

@media(max-width:800px) {
  .js .primary-nav {
    display:none;
  }
  .primary-nav {
    width:100%;
    order:3;
    justify-content:center;
    flex-wrap:wrap;
  }
  .header-actions {
    margin-left:auto;
    gap:1rem;
  }
  .header-inner {
    min-height:78px;
    padding-block:.8rem;
  }
  .brand {
    width:140px;
  }
  .hero-film {
    gap:.75rem;
  }
  .hero-meta {
    gap:1rem;
  }
  .hero-meta>.eyebrow:last-child {
    text-align:right;
  }
  .home-hero h1 {
    font-size:clamp(2.6rem,8.2vw,5.5rem);
  }
  .hero-film img {
    height:230px;
  }
  .hero-film .photo:nth-child(2) img {
    height:210px;
  }
  .hero-film .photo:nth-child(2) {
    margin-top:1.25rem;
  }
  .hero-links {
    gap:1.5rem;
  }
  .hero-links>a+a {
    padding-left:1.5rem;
  }
  .hero-links .eyebrow {
    max-width:22ch;
  }
  .hero-links strong {
    max-width:20ch;
  }
  .world-heading {
    padding:1.8rem 1.5rem;
  }
  .world h2 {
    font-size:2.2rem;
  }
  .world>p {
    padding:1.5rem;
  }
  .world>img {
    height:280px;
  }
  .editorial-gallery {
    gap:1rem;
  }
  .editorial-gallery .photo:nth-child(2) {
    margin-top:3rem;
  }
  .section-heading {
    align-items:start;
  }
  .section-heading>p {
    max-width:28ch;
  }
  .history-teaser {
    gap:2rem;
  }
  .history-teaser-copy h2 {
    font-size:2.6rem;
  }
  .history-teaser-year>span:nth-child(2) {
    font-size:6.5rem;
  }
  .history-teaser-year>.eyebrow {
    max-width:22ch;
  }
  .menu-layout {
    grid-template-columns:1fr;
  }
  .menu-layout>nav {
    padding:1rem 2rem 2rem;
  }
  .menu-layout>nav a {
    font-size:2.5rem;
    padding:.5rem 0;
  }
  .menu-aside {
    display:none;
  }
  .menu-bar {
    padding:1rem 2rem;
  }
  .lightbox {
    padding:1rem;
  }
  .visit {
    gap:2rem;
  }
}

@media(max-width:560px) {
  html {
    scroll-padding-top:6rem;
  }
  .brand {
    width:118px;
  }
  .header-inner {
    gap:.6rem;
    min-height:74px;
  }
  .header-actions {
    gap:.5rem;
  }
  .contact-link {
    padding:.5rem .8rem;
    font-size:.875rem;
  }
  .menu-toggle {
    width:36px;
    padding:4px;
  }
  .home-hero {
    padding-top:1.5rem;
  }
  .hero-meta .eyebrow {
    font-size:.75rem;
    letter-spacing:.07em;
  }
  .hero-meta .eyebrow:last-child {
    max-width:17ch;
  }
  .home-hero h1 {
    margin-top:2rem;
    font-size:clamp(2.15rem,9.5vw,3.5rem);
    letter-spacing:-.06em;
  }
  .hero-description {
    font-size:1rem;
    max-width:32ch;
    margin-top:1.2rem;
  }
  .hero-description br {
    display:none;
  }
  .hero-film {
    margin-top:2rem;
    gap:.5rem;
    grid-template-columns:.85fr 1.3fr .85fr;
  }
  .hero-film img {
    height:190px;
  }
  .hero-film .photo:nth-child(2) img {
    height:170px;
  }
  .hero-film .photo:nth-child(2) {
    margin-top:1.25rem;
  }
  .hero-film figcaption {
    font-size:.75rem;
    max-width:20ch;
    line-height:1.4;
  }
  .hero-links {
    gap:1rem;
    margin-top:1.5rem;
  }
  .hero-links>a {
    padding:1.2rem 1.75rem 1.2rem 0;
  }
  .hero-links>a+a {
    padding-left:1rem;
  }
  .hero-links strong {
    font-size:1rem;
  }
  .hero-links .eyebrow {
    font-size:.75rem;
    letter-spacing:.03em;
  }
  .hero-links .link-plus {
    font-size:1.5rem;
  }
  .home-statement h2 {
    font-size:2.2rem;
  }
  .home-statement>p:last-child {
    font-size:1rem;
  }
  .worlds {
    grid-template-columns:1fr;
    gap:1.5rem;
  }
  .world-heading {
    padding:2rem;
  }
  .world h2 {
    font-size:2.5rem;
    max-width:15ch;
  }
  .world>img {
    height:290px;
  }
  .world>p {
    padding:1.5rem 2rem 2rem;
  }
  .section-heading {
    display:block;
    margin-bottom:2rem;
  }
  .section-heading>p {
    margin-top:1.5rem;
    max-width:40ch;
  }
  .editorial-gallery {
    grid-template-columns:1fr 1fr;
    gap:1.5rem 1rem;
  }
  .editorial-gallery .photo:nth-child(2) {
    margin-top:3rem;
  }
  .editorial-gallery .photo:nth-child(3) {
    grid-column:1/-1;
    width:76%;
    margin:0 auto;
  }
  .editorial-gallery .photo:nth-child(3) img {
    aspect-ratio:3/2;
  }
  .history-teaser {
    grid-template-columns:1fr;
    padding-block:3.5rem;
    gap:2.5rem;
  }
  .history-teaser-year>span:nth-child(2) {
    font-size:clamp(6rem,30vw,10rem);
    margin-top:1.3rem;
  }
  .history-teaser-year>p {
    margin-top:.5rem;
  }
  .history-teaser-copy {
    border-top:1px solid var(--ink);
    padding-top:2rem;
  }
  .history-teaser-copy h2 {
    font-size:2.9rem;
  }
  .history-teaser-copy h2 br:nth-child(2) {
    display:none;
  }
  .visit {
    grid-template-columns:1fr;
    gap:2.5rem;
  }
  .visit h2 {
    font-size:2.6rem;
  }
  .footer-title {
    font-size:2.5rem;
    gap:1.5rem;
  }
  .footer-disc {
    width:48px;
    height:48px;
    font-size:2.5rem;
  }
  .footer-grid {
    grid-template-columns:1fr;
    gap:2rem;
    padding-block:2.5rem;
  }
  .footer-grid>nav {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0 1.2rem;
  }
  .footer-grid .eyebrow {
    margin-bottom:.5rem;
  }
  .footer-grid a:not(.brand) {
    margin-block:.5rem;
  }
  .footer-bottom {
    font-size:.75rem;
    gap:.8rem;
  }
  .site-footer {
    padding-top:3rem;
  }
  .menu-bar {
    padding:.8rem 1rem;
  }
  .menu-bar>.eyebrow {
    max-width:18ch;
    font-size:.75rem;
  }
  .menu-close {
    font-size:.8125rem;
    gap:.7rem;
  }
  .menu-layout>nav {
    padding:.75rem 1.5rem 1.5rem;
  }
  .menu-layout>nav a {
    font-size:clamp(1.5rem,6.5vw,2.3rem);
    padding:.55rem 0;
    gap:1rem;
  }
  .menu-layout {
    min-height:0;
  }
  .site-menu {
    width:calc(100% - 1rem);
    max-height:calc(100dvh - 1rem);
  }
  .lightbox {
    width:calc(100% - .75rem);
    max-height:calc(100dvh - .75rem);
    padding:.8rem;
  }
  .lightbox-top .eyebrow {
    font-size:.75rem;
  }
  .lightbox-bottom {
    gap:.4rem;
  }
  .lightbox-bottom button {
    font-size:.75rem;
    padding:.5rem .65rem;
  }
  .lightbox-count {
    font-size:.75rem;
  }
  .lightbox figure>img {
    height:55dvh;
  }
  .lightbox-close {
    font-size:.8125rem;
    gap:.5rem;
  }
}

/* Unterseiten: je Inhalt eine eigene Einstiegskomposition. */
.page-kicker {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
}

.page-kicker .text-link {
  font-size:.875rem;
}

.install-hero {
  position:relative;
  isolation:isolate;
  min-height:650px;
  padding-block:3rem 4.5rem;
  background:var(--ink);
  color:var(--paper);
  display:flex;
  align-items:stretch;
}

.install-hero>.wrap {
  width:100%;
  display:flex;
  flex-direction:column;
  position:relative;
  z-index:1;
}

.install-hero>img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 50%;
  z-index:-2;
}

.install-hero::after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(15,20,16,.83),rgba(15,20,16,.2));
  z-index:-1;
}

.install-hero h1 {
  font-size:clamp(3rem,6.5vw,7rem);
  margin-top:auto;
  padding-top:5rem;
  line-height:1.07;
  max-width:15ch;
}

.install-hero>.wrap>p {
  margin-top:1.6rem;
  font-size:1.125rem;
  color:#efefea;
}

.install-hero a:focus-visible {
  outline-color:white;
}

.install-hero .text-link:hover {
  color:var(--orange);
}

.service-layout {
  display:grid;
  grid-template-columns:1.12fr 1fr;
  gap:4rem;
  align-items:start;
}

.service-list {
  min-width:0;
}

.service-detail {
  border-top:1px solid var(--line);
  scroll-margin-top:7rem;
}

.service-detail:last-child {
  border-bottom:1px solid var(--line);
}

.service-detail summary {
  display:flex;
  align-items:baseline;
  gap:1rem;
  padding:1.6rem 0;
  cursor:pointer;
  list-style:none;
  min-height:72px;
}

.service-detail summary::-webkit-details-marker {
  display:none;
}

.service-detail summary h3 {
  font-size:clamp(1.25rem,2.1vw,1.85rem);
  font-weight:500;
  flex:1;
  min-width:0;
  letter-spacing:-.035em;
}

.detail-number {
  font-size:.75rem;
  color:var(--muted);
  flex:none;
  letter-spacing:.05em;
}

.detail-plus {
  font-size:1.75rem;
  line-height:1;
  font-weight:300;
  transition:transform .2s;
  flex:none;
}

.service-detail[open] .detail-plus {
  transform:rotate(45deg);
}

.detail-body {
  padding:0 2rem 1.6rem 2rem;
}

.detail-body>p {
  font-size:1rem;
  color:var(--muted);
  max-width:47ch;
}

.detail-body .text-link {
  font-size:.875rem;
  margin-top:1rem;
}

.inline-service-photo {
  margin-top:1.5rem;
}

.inline-service-photo img {
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
}

.service-preview {
  display:none;
  position:sticky;
  top:7rem;
}

.service-enhanced .service-preview {
  display:block;
}

.service-enhanced .inline-service-photo {
  display:none;
}

.service-preview>img {
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
}

.service-preview figcaption {
  color:var(--muted);
  font-size:.875rem;
  margin-top:.8rem;
}

.image-label {
  position:absolute;
  top:1rem;
  left:1rem;
  background:var(--paper);
  padding:.5rem .7rem;
  font-size:.75rem;
  letter-spacing:.07em;
}

.installation-gallery {
  background:var(--soft);
}

.installation-photo-grid {
  display:grid;
  grid-template-columns:1.3fr 1fr 1fr 1fr;
  gap:1.3rem;
  align-items:start;
}

.installation-photo-grid .photo:nth-child(2) {
  margin-top:3rem;
}

.installation-photo-grid .photo:nth-child(4) {
  margin-top:5rem;
}

.installation-photo-grid img {
  aspect-ratio:3/4;
  object-fit:cover;
  width:100%;
}

.project-next {
  text-align:center;
  max-width:1000px;
}

.project-next h2 {
  margin-block:1.3rem 1.5rem;
}

.project-next>p {
  margin-inline:auto;
}

.project-next>div {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:1rem;
  margin-top:2rem;
}

.showroom-intro {
  padding-block:3rem 3.5rem;
}

.showroom-intro h1 {
  font-size:clamp(3rem,6.7vw,7rem);
  max-width:20ch;
  margin-top:2.2rem;
  line-height:1.06;
}

.showroom-intro-bottom {
  display:flex;
  gap:2rem;
  justify-content:space-between;
  align-items:end;
  margin-top:2rem;
}

.showroom-intro-bottom>p {
  font-size:1.125rem;
  color:var(--muted);
}

.showroom-panorama {
  position:relative;
}

.showroom-panorama>img {
  width:100%;
  height:clamp(350px,35vw,560px);
  object-fit:cover;
  object-position:50% 55%;
}

.showroom-panorama figcaption {
  position:absolute;
  left:var(--gutter);
  right:var(--gutter);
  bottom:1.5rem;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:.5rem 1rem;
  font-size:.75rem;
  color:white;
}

.showroom-panorama figcaption>span {
  background:var(--ink);
  padding:.45rem .75rem;
  letter-spacing:.04em;
}

.catalog-filters {
  display:flex;
  flex-wrap:wrap;
  gap:.65rem;
  margin-bottom:3rem;
}

.catalog-filters button {
  background:transparent;
  border:1px solid var(--line);
  border-radius:40px;
  padding:.65rem 1rem;
  min-height:44px;
  font-size:.875rem;
}

.catalog-filters button:hover {
  border-color:var(--ink);
}

.catalog-filters button[aria-pressed=true] {
  background:var(--ink);
  color:white;
  border-color:var(--ink);
}

.catalog-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:3rem 1.5rem;
  align-items:start;
}

.catalog-item:nth-child(3n+2) {
  margin-top:3rem;
}

.catalog-item.is-filtered {
  margin-top:0;
}

.catalog-item img {
  width:100%;
  aspect-ratio:5/6;
  object-fit:cover;
}

.catalog-item:nth-child(3n+2) img {
  aspect-ratio:1/1;
}

.catalog-item figcaption {
  display:none;
}

.catalog-copy {
  padding-top:1.5rem;
}

.catalog-copy>.eyebrow {
  color:var(--muted);
}

.catalog-copy h3 {
  font-size:1.75rem;
  letter-spacing:-.04em;
  margin-top:.7rem;
}

.catalog-copy>p {
  margin-top:1rem;
  color:var(--muted);
  font-size:1rem;
}

.catalog-copy .text-link {
  font-size:.875rem;
  margin-top:1rem;
}

.coffee-service {
  display:grid;
  grid-template-columns:1fr 1fr;
  background:var(--orange);
}

.coffee-service>div:first-child {
  min-width:0;
  position:relative;
  min-height:600px;
}

.coffee-service>div:first-child>img {
  height:100%;
  width:100%;
  object-fit:cover;
  position:absolute;
  inset:0;
}

.coffee-copy {
  padding:clamp(3rem,7vw,7rem) var(--gutter);
}

.coffee-copy h2 {
  margin-top:1.5rem;
}

.coffee-copy p:not(.eyebrow) {
  margin-block:1.8rem 2rem;
  max-width:38ch;
}

.showroom-visit {
  max-width:1000px;
  text-align:center;
}

.showroom-visit h2 {
  margin-top:1.5rem;
}

.showroom-visit p:not(.eyebrow) {
  margin:1.5rem auto 2rem;
}

.company-hero {
  padding-block:3.5rem 5.5rem;
  background:var(--ink);
  color:var(--paper);
}

.company-hero h1 {
  font-size:clamp(3rem,6.5vw,6.8rem);
  margin-top:2rem;
  max-width:22ch;
  line-height:1.09;
}

.company-hero-bottom {
  display:flex;
  gap:2rem;
  align-items:end;
  justify-content:space-between;
  margin-top:2rem;
}

.company-hero-bottom>p {
  color:#d2d5cd;
  font-size:1.125rem;
}

.company-hero a:focus-visible {
  outline-color:var(--orange);
}

.company-hero .text-link:hover {
  color:var(--orange);
}

.company-photo {
  margin-top:-2rem;
  position:relative;
}

.company-photo img {
  width:100%;
  aspect-ratio:3/1;
  object-fit:cover;
}

.company-photo figcaption {
  font-size:.8125rem;
  color:var(--muted);
  margin-top:1rem;
}

.company-intro>div {
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:5rem;
  margin-top:1.5rem;
  align-items:start;
}

.company-intro h2 {
  max-width:17ch;
}

.company-intro>div>div {
  max-width:44ch;
  color:var(--muted);
  padding-top:.5rem;
}

.company-intro p+p {
  margin-top:1.2rem;
}

.company-intro .text-link {
  color:var(--ink);
  margin-top:1.5rem;
}

.people-section {
  background:var(--soft);
}

.people-list {
  border-top:1px solid var(--line);
}

.person {
  display:grid;
  grid-template-columns:40px 1.2fr 1fr;
  align-items:start;
  gap:2rem;
  padding-block:2rem;
  border-bottom:1px solid var(--line);
}

.person-number {
  font-size:.75rem;
  color:var(--muted);
  padding-top:.3rem;
}

.person h3 {
  font-size:clamp(1.5rem,2.6vw,2.5rem);
}

.person p {
  margin-top:.6rem;
  font-size:1rem;
}

.person .qualification {
  font-size:.875rem;
  color:var(--muted);
  margin-top:.3rem;
}

.person-contact a {
  display:block;
  min-height:40px;
  font-size:1rem;
  text-decoration:underline;
  text-underline-offset:5px;
  overflow-wrap:anywhere;
}

.person-contact a:hover {
  color:var(--blue);
}

.company-outlook {
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:5rem;
  align-items:center;
}

.company-outlook h2 {
  margin-top:1.5rem;
}

.company-outlook p:not(.eyebrow) {
  margin-block:1.5rem;
  max-width:42ch;
  color:var(--muted);
}

.company-outlook img {
  aspect-ratio:5/4;
  object-fit:cover;
  width:100%;
}

.history-hero {
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:4rem;
  padding-block:4rem;
  align-items:end;
}

.history-hero h1 {
  font-size:clamp(2.5rem,5.5vw,5.5rem);
  margin-top:2rem;
  line-height:1.1;
}

.history-hero>div>p:not(.eyebrow) {
  color:var(--muted);
  font-size:1.125rem;
  max-width:33ch;
  margin-top:1.5rem;
}

.founding-year {
  background:var(--orange);
  aspect-ratio:1.15;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border-radius:50% 50% 2px 2px;
}

.founding-year>span {
  font:400 clamp(6rem,12vw,12rem)/1.1 Sora,sans-serif;
  letter-spacing:-.1em;
  transform:translateX(-.03em);
}

.founding-year>p {
  text-align:center!important;
  color:var(--ink)!important;
  font-size:1rem!important;
  margin-top:.6rem!important;
}

.history-photo-band {
  position:relative;
  height:clamp(330px,33vw,500px);
  overflow:hidden;
}

.history-photo-band>img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 45%;
}

.history-photo-band>p {
  position:absolute;
  left:var(--gutter);
  bottom:1.5rem;
  color:white;
  background:var(--ink);
  padding:.5rem .8rem;
  font-size:.8125rem;
}

.history-content {
  display:grid;
  grid-template-columns:.8fr 1.8fr;
  gap:5rem;
  align-items:start;
}

.history-content aside {
  position:sticky;
  top:8rem;
}

.history-content aside>p:not(.eyebrow) {
  font:400 1.5rem/1.4 Sora,sans-serif;
  letter-spacing:-.035em;
  margin-top:1rem;
}

.history-content aside nav {
  display:flex;
  flex-direction:column;
  align-items:start;
  gap:1rem;
  margin-top:2rem;
  font-size:.875rem;
}

.history-content aside nav a {
  border-bottom:1px solid var(--line);
  padding-bottom:.3rem;
}

.history-content aside nav a:hover {
  border-color:var(--ink);
}

.milestone {
  display:grid;
  grid-template-columns:.65fr 1.3fr;
  gap:2rem;
  padding-block:2.7rem;
  border-top:1px solid var(--line);
  scroll-margin-top:7rem;
}

.milestone:first-child {
  padding-top:0;
  border-top:0;
}

.milestone-year {
  font:400 clamp(2.5rem,5vw,5rem)/1 Sora,sans-serif;
  letter-spacing:-.075em;
}

.milestone h2 {
  font-size:clamp(1.5rem,2.3vw,2.2rem);
  letter-spacing:-.04em;
  line-height:1.2;
}

.milestone p {
  font-size:1rem;
  margin-top:1rem;
  color:var(--muted);
}

.milestone:last-child .milestone-year {
  color:var(--blue);
}

.history-end {
  background:var(--orange);
  text-align:center;
}

.history-end h2 {
  margin-top:1.5rem;
}

.history-end p:not(.eyebrow) {
  margin:1.5rem auto 2rem;
}

.contact-hero {
  padding-block:3rem 3.5rem;
}

.contact-hero h1 {
  font-size:clamp(3rem,7.5vw,7.5rem);
  margin-top:2rem;
  line-height:1.05;
}

.contact-hero>p {
  margin-top:1.8rem;
  color:var(--muted);
  font-size:1.125rem;
}

.contact-directory {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2rem;
}

.contact-panel {
  background:var(--soft);
  padding:clamp(1.5rem,3.5vw,3.5rem);
  display:flex;
  flex-direction:column;
  min-width:0;
  border-top:4px solid var(--orange);
  scroll-margin-top:7rem;
}

.contact-panel h2 {
  font-size:clamp(1.6rem,2.7vw,2.75rem);
  margin-top:1.5rem;
  letter-spacing:-.045em;
}

.contact-number {
  font:400 clamp(2rem,4vw,4rem)/1.25 Sora,sans-serif;
  letter-spacing:-.065em;
  margin-top:2rem;
  align-self:start;
}

.contact-number:hover {
  color:var(--blue);
}

.contact-mail {
  align-self:start;
  font-size:1rem;
  overflow-wrap:anywhere;
  text-decoration:underline;
  text-underline-offset:6px;
  margin-top:.8rem;
}

.contact-hours {
  border-top:1px solid var(--line);
  margin-top:2rem;
  padding-top:1.5rem;
  flex:1;
}

.contact-hours h3 {
  font-family:inherit;
  font-size:1rem;
  font-weight:600;
  letter-spacing:0;
}

.contact-hours dl {
  margin:1.2rem 0 0;
  font-size:1rem;
  color:var(--muted);
}

.contact-hours dl>div {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:1.2rem;
  margin-block:.9rem;
}

.contact-hours dd {
  margin:0;
  text-align:right;
  flex:none;
}

.contact-panel>.button {
  margin-top:2rem;
  align-self:start;
}

.contact-location {
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:5rem;
  align-items:center;
}

.contact-location h2 {
  margin-top:1.5rem;
}

.contact-location address {
  margin-block:1.5rem 2rem;
  font-size:1.125rem;
}

.contact-location img {
  width:100%;
  aspect-ratio:5/4;
  object-fit:cover;
}

@media(max-width:1100px) {
  .service-layout {
    gap:2rem;
  }
  .install-hero {
    min-height:580px;
  }
  .catalog-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:3rem 2rem;
  }
  .catalog-item:nth-child(3n+2) {
    margin-top:0;
  }
  .catalog-item:nth-child(even) {
    margin-top:2.5rem;
  }
  .catalog-item.is-filtered {
    margin-top:0;
  }
  .catalog-item img,.catalog-item:nth-child(3n+2) img {
    aspect-ratio:5/4;
  }
  .coffee-service>div:first-child {
    min-height:540px;
  }
  .company-intro>div,.company-outlook,.contact-location {
    gap:3rem;
  }
  .history-content {
    gap:3rem;
  }
  .history-hero {
    gap:2.5rem;
  }
  .person {
    grid-template-columns:30px 1.2fr 1fr;
    gap:1rem;
  }
  .contact-directory {
    gap:1.5rem;
  }
  .contact-panel h2 {
    font-size:clamp(1.5rem,2.7vw,2.5rem);
  }
  .installation-photo-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:2rem;
  }
  .installation-photo-grid .photo:nth-child(even) {
    margin-top:3rem;
  }
  .installation-photo-grid .photo:nth-child(3) {
    margin-top:-1rem;
  }
}

@media(max-width:800px) {
  .install-hero {
    min-height:550px;
  }
  .install-hero h1 {
    font-size:clamp(2.8rem,7vw,4.5rem);
  }
  .install-hero>.wrap>p {
    font-size:1rem;
  }
  .service-layout {
    grid-template-columns:1fr;
    gap:2rem;
  }
  .service-preview {
    position:static;
    order:-1;
  }
  .service-preview>img {
    aspect-ratio:16/9;
  }
  .service-detail summary h3 {
    font-size:1.5rem;
  }
  .service-detail summary {
    padding-block:1.3rem;
  }
  .detail-body {
    padding-left:2rem;
  }
  .showroom-intro-bottom>p {
    font-size:1rem;
  }
  .showroom-intro h1 {
    font-size:clamp(2.8rem,7.3vw,5rem);
  }
  .showroom-panorama>img {
    height:400px;
  }
  .coffee-service {
    grid-template-columns:1fr 1fr;
  }
  .coffee-service>div:first-child {
    min-height:480px;
  }
  .coffee-copy {
    padding:3rem 2rem;
  }
  .coffee-copy h2 {
    font-size:2.5rem;
  }
  .company-hero h1 {
    font-size:clamp(2.7rem,6.4vw,4.6rem);
  }
  .company-hero-bottom>p {
    font-size:1rem;
  }
  .company-intro>div {
    grid-template-columns:1fr 1fr;
    gap:2rem;
  }
  .company-intro h2 {
    font-size:2.7rem;
  }
  .person {
    grid-template-columns:24px 1fr;
    gap:1rem;
  }
  .person-contact {
    grid-column:2;
  }
  .company-outlook {
    gap:2rem;
  }
  .company-outlook h2 {
    font-size:2.7rem;
  }
  .history-hero h1 {
    font-size:2.9rem;
  }
  .history-hero>div>p:not(.eyebrow) {
    font-size:1rem;
  }
  .founding-year>span {
    font-size:6rem;
  }
  .history-content {
    grid-template-columns:1fr;
    gap:3rem;
  }
  .history-content aside {
    position:static;
  }
  .history-content aside nav {
    flex-direction:row;
    flex-wrap:wrap;
    gap:1rem 1.5rem;
    margin-top:1.5rem;
  }
  .milestone {
    grid-template-columns:.65fr 1.7fr;
    gap:2rem;
  }
  .milestone-year {
    font-size:3.5rem;
  }
  .contact-panel {
    padding:1.7rem 1.3rem;
  }
  .contact-panel h2 {
    font-size:1.45rem;
  }
  .contact-number {
    font-size:2.2rem;
  }
  .contact-panel>.eyebrow {
    font-size:.75rem;
  }
  .contact-hours dl {
    font-size:.875rem;
  }
  .contact-location {
    gap:2.5rem;
  }
}

@media(max-width:560px) {
  .page-kicker {
    align-items:start;
  }
  .page-kicker .text-link {
    max-width:13ch;
    font-size:.8125rem;
    padding-top:0;
    text-align:right;
  }
  .install-hero {
    min-height:520px;
    padding-block:1.5rem 2.5rem;
  }
  .install-hero h1 {
    font-size:clamp(2.4rem,10vw,3.5rem);
    padding-top:4rem;
  }
  .install-hero::after {
    background:linear-gradient(0deg,rgba(15,20,16,.87),rgba(15,20,16,.3));
  }
  .install-hero>img {
    object-position:60% 50%;
  }
  .service-explorer .section-heading h2 {
    font-size:2.6rem;
  }
  .service-detail summary {
    gap:.75rem;
  }
  .service-detail summary h3 {
    font-size:1.25rem;
    letter-spacing:-.035em;
  }
  .detail-body {
    padding:0 .25rem 1.5rem 1.65rem;
  }
  .detail-body .text-link {
    font-size:.875rem;
  }
  .installation-photo-grid {
    gap:1.5rem 1rem;
  }
  .installation-photo-grid .photo:nth-child(even) {
    margin-top:2.5rem;
  }
  .installation-photo-grid .photo:nth-child(3) {
    margin-top:0;
  }
  .installation-photo-grid figcaption {
    font-size:.75rem;
  }
  .project-next h2 {
    font-size:2.6rem;
  }
  .project-next>div {
    flex-direction:column;
    align-items:center;
  }
  .showroom-intro {
    padding-block:2rem 2.5rem;
  }
  .showroom-intro h1 {
    font-size:clamp(2.3rem,10vw,3.5rem);
    margin-top:1.7rem;
  }
  .showroom-intro-bottom {
    display:block;
    margin-top:1.5rem;
  }
  .showroom-intro-bottom>.button {
    margin-top:1.5rem;
  }
  .showroom-panorama>img {
    height:340px;
    object-position:55% 50%;
  }
  .showroom-panorama figcaption {
    bottom:1rem;
    font-size:.75rem;
  }
  .showroom-panorama figcaption>span:last-child {
    display:none;
  }
  .catalog .section-heading h2 {
    font-size:2.6rem;
  }
  .catalog-filters {
    gap:.5rem;
    margin-bottom:2rem;
  }
  .catalog-filters button {
    font-size:.8125rem;
    padding:.55rem .8rem;
  }
  .catalog-grid {
    grid-template-columns:1fr;
    gap:2.5rem;
  }
  .catalog-item:nth-child(even) {
    margin-top:0;
  }
  .catalog-item img,.catalog-item:nth-child(3n+2) img {
    aspect-ratio:5/4;
  }
  .catalog-copy h3 {
    font-size:1.8rem;
  }
  .catalog-copy {
    padding-top:1rem;
  }
  .coffee-service {
    grid-template-columns:1fr;
  }
  .coffee-service>div:first-child {
    min-height:0;
    height:310px;
  }
  .coffee-copy {
    padding:3rem var(--gutter);
  }
  .coffee-copy h2 {
    font-size:2.8rem;
  }
  .showroom-visit h2 {
    font-size:2.6rem;
  }
  .company-hero {
    padding-block:2rem 4rem;
  }
  .company-hero h1 {
    font-size:clamp(2.2rem,9.2vw,3.5rem);
    margin-top:1.8rem;
  }
  .company-hero-bottom {
    display:block;
  }
  .company-hero-bottom>.text-link {
    margin-top:1.5rem;
    font-size:.875rem;
  }
  .company-photo {
    margin-top:-1.5rem;
  }
  .company-photo img {
    aspect-ratio:4/3;
    object-position:60% 50%;
  }
  .company-photo figcaption {
    font-size:.75rem;
  }
  .company-intro>div {
    grid-template-columns:1fr;
    gap:1.5rem;
  }
  .company-intro h2 {
    font-size:2.7rem;
  }
  .people-section .section-heading h2 {
    font-size:2.3rem;
  }
  .person {
    padding-block:1.5rem;
    grid-template-columns:20px 1fr;
    gap:.8rem;
  }
  .person h3 {
    font-size:1.5rem;
  }
  .person-contact {
    margin-top:.25rem;
  }
  .person-contact a {
    font-size:.9375rem;
    min-height:36px;
  }
  .company-outlook {
    grid-template-columns:1fr;
    gap:2.5rem;
  }
  .company-outlook h2 {
    font-size:2.6rem;
  }
  .history-hero {
    grid-template-columns:1fr;
    padding-block:2rem 2.5rem;
    gap:2.5rem;
  }
  .history-hero h1 {
    font-size:2.5rem;
    margin-top:1.7rem;
  }
  .founding-year {
    aspect-ratio:1.4;
    max-width:430px;
    width:100%;
    justify-self:center;
  }
  .founding-year>span {
    font-size:clamp(6rem,30vw,8rem);
  }
  .history-photo-band {
    height:300px;
  }
  .history-photo-band>img {
    object-position:65% 50%;
  }
  .history-content aside>p:not(.eyebrow) {
    font-size:1.4rem;
  }
  .history-content aside nav {
    font-size:.8125rem;
    gap:.8rem 1rem;
  }
  .milestone {
    grid-template-columns:1fr;
    gap:1.2rem;
    padding-block:2rem;
  }
  .milestone-year {
    font-size:3.5rem;
  }
  .milestone h2 {
    font-size:1.8rem;
  }
  .milestone p {
    font-size:1rem;
    margin-top:.8rem;
  }
  .history-end h2 {
    font-size:2.6rem;
  }
  .contact-hero {
    padding-block:2rem 2.5rem;
  }
  .contact-hero .page-kicker>.eyebrow:last-child {
    display:none;
  }
  .contact-hero h1 {
    font-size:clamp(2.5rem,11vw,3.8rem);
    margin-top:1.7rem;
  }
  .contact-hero>p {
    font-size:1rem;
    margin-top:1.5rem;
  }
  .contact-directory {
    grid-template-columns:1fr;
    gap:1.5rem;
  }
  .contact-panel {
    padding:1.8rem 1.5rem;
  }
  .contact-panel h2 {
    font-size:clamp(1.3rem,5.5vw,1.85rem);
    margin-top:1rem;
  }
  .contact-number {
    font-size:clamp(2rem,9vw,3rem);
    margin-top:1.5rem;
  }
  .contact-hours dl {
    font-size:.9375rem;
  }
  .contact-panel>.eyebrow {
    font-size:.75rem;
  }
  .contact-location {
    grid-template-columns:1fr;
    gap:2.5rem;
  }
  .contact-location h2 {
    font-size:2.6rem;
  }
  .contact-location address {
    font-size:1rem;
  }
}

@media(hover:none) {
  .zoom-mark {
    width:34px;
    height:34px;
  }
}

/* Gezielte Filterauswahl erhält ein eigenes, grosszügiges Detail-Layout. */
.catalog-grid.is-filtered {
  grid-template-columns:1fr;
}

.catalog-grid.is-filtered .catalog-item {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:3rem;
  align-items:center;
}

.catalog-grid.is-filtered .catalog-copy {
  padding-top:0;
  max-width:44ch;
}

.catalog-grid.is-filtered .catalog-copy h3 {
  font-size:clamp(2rem,3.5vw,3.5rem);
}

.service-preview img {
  transition:opacity .2s;
}

.service-preview img.image-loading {
  opacity:.35;
}

.lightbox button:disabled {
  opacity:.4;
  cursor:default;
}

@media(max-width:800px) {
  .service-enhanced .service-preview {
    display:none;
  }
  .service-enhanced .inline-service-photo {
    display:block;
  }
  .catalog-grid.is-filtered .catalog-item {
    gap:2rem;
  }
}

@media(max-width:560px) {
  .catalog-grid.is-filtered .catalog-item {
    grid-template-columns:1fr;
    gap:1rem;
  }
  .catalog-grid.is-filtered .catalog-copy {
    padding-top:0;
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
  *,*::before,*::after {
    transition:none!important;
    animation:none!important;
  }
}

/* Ohne JavaScript steht die Navigation vollständig im Dokumentfluss. */
html:not(.js) .site-header {
  position: static;
}

/* Lesbarkeit der Bildlegenden auf der Markenfarbe. */
.home-hero .photo figcaption {
  color: var(--ink);
}

.install-hero::after {
  background: linear-gradient(90deg, rgba(15,20,16,.83), rgba(15,20,16,.4));
}

@media (max-width:560px) {
  .install-hero::after {
    background: linear-gradient(0deg, rgba(15,20,16,.87), rgba(15,20,16,.45));
  }
}

/* Zusatznavigation: Seitenlink und Dropdown haben getrennte Bedienelemente. */
.primary-nav { gap: 1.7rem; }
.nav-item { position: relative; }
.nav-top { display: flex; align-items: center; gap: .2rem; }
.nav-disclosure {
  display: grid; place-items: center; width: 32px; min-height: 44px;
  border: 0; padding: 0; background: transparent;
}
.nav-disclosure > span {
  width: 7px; height: 7px; border-right: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink); transform: rotate(45deg);
  transition: transform .2s;
}
.nav-disclosure[aria-expanded="true"] > span { transform: rotate(225deg); }
.nav-panel {
  display: none; position: absolute; top: 100%; right: 0; margin-top: .65rem;
  width: 340px; max-width: calc(100vw - 2.5rem); padding: 1.4rem 1.5rem;
  background: var(--paper); border: 1px solid var(--line);
  border-top: 3px solid var(--ink); box-shadow: 0 18px 40px rgba(20, 25, 20, .12);
  max-height: calc(100dvh - 110px); overflow-y: auto;
}
.nav-panel > .eyebrow { color: var(--muted); margin-bottom: .8rem; }
.nav-panel > a {
  display: block; font-size: .9375rem; line-height: 1.45;
  padding: .75rem 0; border-top: 1px solid var(--line);
}
.nav-panel > a:last-child { border-bottom: 1px solid var(--line); }
.primary-nav .nav-panel > a::after { display: none; }
.nav-panel > a:hover { color: var(--blue); }
.nav-item.is-open > .nav-panel { display: block; }
.nav-item.is-open::after {
  content: ''; position: absolute; top: 100%; left: -20px; right: -20px;
  height: .75rem;
}
html:not(.js) .nav-item:hover > .nav-panel,
html:not(.js) .nav-item:focus-within > .nav-panel { display: block; }
.menu-section-head { display: flex; align-items: center; gap: 1rem; }
.menu-section-head > a { flex: 1; min-width: 0; }
.menu-section-toggle {
  display: grid; place-items: center; width: 44px; height: 44px; flex: none;
  border: 1px solid var(--line); border-radius: 50%; background: transparent;
  font-size: 1.5rem; line-height: 1;
}
.menu-section-toggle span { transition: transform .2s; }
.menu-section-toggle[aria-expanded="true"] span { transform: rotate(45deg); }
.menu-subnav {
  margin: .3rem 0 1rem 2.5rem; padding: .5rem 0 .5rem 1rem;
  border-left: 2px solid var(--orange);
}
.menu-layout > nav .menu-subnav a {
  font: 400 .9375rem/1.5 'Segoe UI', Arial, sans-serif;
  letter-spacing: 0; padding: .4rem 0; min-height: 36px;
}
.menu-layout > nav .menu-subnav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.catalog-item { scroll-margin-top: 7rem; }

/* Kategoriengalerien: feste Bildrahmen, horizontales Wischen und ruhige Steuerung. */
.category-carousel { min-width: 0; }
.carousel-viewport {
  width: 100%; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
}
.carousel-enhanced .carousel-viewport { scrollbar-width: none; }
.carousel-enhanced .carousel-viewport::-webkit-scrollbar { display: none; }
.carousel-track { display: flex; width: 100%; }
.carousel-track > .carousel-slide {
  flex: 0 0 100%; width: 100%; min-width: 0; scroll-snap-align: start;
  scroll-snap-stop: always;
}
.carousel-slide img { width: 100%; height: auto; }
.carousel-toolbar {
  display: flex; justify-content: space-between; align-items: center;
  gap: .75rem; padding-top: .65rem;
}
.carousel-arrows { display: flex; align-items: center; gap: .35rem; }
.carousel-arrows > button {
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 50%; padding: 0;
  background: transparent; font-size: 1.8rem; line-height: 1;
}
.carousel-arrows > button:hover { border-color: var(--ink); background: var(--soft); }
.carousel-count { min-width: 42px; text-align: center; font-size: .75rem; font-variant-numeric: tabular-nums; }
.carousel-play {
  border: 1px solid var(--line); border-radius: 30px; background: transparent;
  min-height: 38px; padding: .4rem .85rem; font-size: .75rem; line-height: 1.4;
}
.carousel-play:hover { border-color: var(--ink); }
.category-carousel > .carousel-caption {
  font-size: .8125rem; color: var(--muted); line-height: 1.5;
  margin-top: .7rem; min-height: 2.5em;
}
.carousel-dots { display: flex; gap: 2px; margin-top: .2rem; }
.carousel-dots button {
  width: 30px; height: 30px; padding: 9px 3px; border: 0; background: transparent;
}
.carousel-dots button > span {
  display: block; height: 2px; width: 24px; background: var(--line);
}
.carousel-dots button[aria-pressed="true"] > span { background: var(--ink); }
.catalog-grid.is-filtered .category-carousel { align-self: start; }
.catalog-grid.is-filtered .carousel-slide img { aspect-ratio: 5/4; object-fit: contain; background: var(--soft); }
.catalog-item[data-category="gross"] .carousel-slide img { object-fit: contain; background: var(--soft); }
@media (max-width: 1100px) {
  .primary-nav { gap: .8rem; }
  .header-inner { gap: 1rem; }
}
@media (max-width: 1000px) {
  .js .primary-nav { display: none; }
  html:not(.js) .primary-nav { width: 100%; order: 3; flex-wrap: wrap; justify-content: center; }
}
@media (max-width: 560px) {
  .menu-subnav { margin-left: 1.5rem; }
  .menu-layout > nav .menu-subnav a { font-size: .875rem; }
  .menu-section-head { gap: .5rem; }
  .menu-section-toggle { width: 38px; height: 38px; font-size: 1.3rem; }
  .carousel-toolbar { padding-top: .75rem; }
  .carousel-play { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .carousel-viewport { scroll-behavior: auto; }
}