/* A single compact footer row, with comfortable outer padding. */
.footer-edition-compact {
  display: none;
}
@media (max-width: 1024px) {
  body .footer {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 0 !important;
    gap: clamp(6px, 1.5vw, 16px) !important;
    padding: 16px clamp(12px, 3vw, 24px) !important;
  }
  body .footer-bottom {
    display: contents !important;
  }
  body .footer-bottom > span {
    white-space: nowrap !important;
    font-size: 10px !important;
    flex: 0 0 auto;
  }
  body .footer .footer-edition-full {
    display: none !important;
  }
  body .footer .footer-edition-compact {
    display: inline !important;
  }
  body .footer-links {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: clamp(6px, 1.4vw, 14px) !important;
    font-size: clamp(9px, 1.4vw, 12px) !important;
    line-height: 1.4 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
  }
  body .footer-links a {
    padding: 4px 0 !important;
  }
}
/* Remove the marked lower footer whitespace, scaled across viewports. */
body .footer {
  padding-bottom: clamp(8px, .8vw, 16px) !important;
}
/* Contact is a separate section above the footer, keeping the desktop rhythm. */
.contact-section {
  width: 100%;
  background: var(--ink);
  color: #fff;
  padding: 26px 6.4% 23px;
}
html[data-theme="dark"] .contact-section {
  background: #171816;
  color: #f4f2ed;
}
body .footer {
  padding-top: 0 !important;
}
.gallery-back-start {
  margin: 0;
  padding: 0 8% clamp(32px, 4vw, 64px);
  text-align: right;
}
.gallery-back-start a {
  display: inline-block;
  padding: 12px 0;
  text-decoration: none !important;
}
@media (max-width: 1024px) {
  .contact-section {
    padding: 12px clamp(12px, 3vw, 24px);
  }
  .contact-section .contact h2 {
    margin: 0;
    font-size: clamp(28px, 5vw, 40px);
    line-height: 1.1;
  }
  body .footer {
    padding-top: 12px !important;
  }
}
/* Shared display tracking and a more prominent gallery return link. */
body .contact-section .contact h2 {
  letter-spacing: var(--skn-display-tracking, .015em) !important;
}
body .gallery-back-start a {
  font-family: 'Montserrat', Arial, sans-serif !important;
  font-size: clamp(20px, 1.6vw, 28px) !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
}
@media (min-width: 1025px) {
  body .footer-bottom {
    margin-top: 0 !important;
  }
}
@media (min-width: 1025px) and (max-width: 1599px) {
  body .gallery-back-start a {
    font-size: 16px !important;
  }
}
/* Keep the contact arrow typographic instead of a boxed emoji on tablets. */
.contact-arrow {
  font-variant-emoji: text;
}
@media (min-width: 701px) and (max-width: 1024px) {
  body .contact-section .contact h2 a,
  body .contact-section .contact-arrow {
    appearance: none !important;
    -webkit-appearance: none !important;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  body .contact-section .contact-arrow {
    font: inherit !important;
    color: inherit !important;
  }
}

/* Extend only the contact background beyond the centered content container.
   The clipped shadow paints a full-width band without widening document layout. */
@media (min-width: 1600px) {
  body .contact-section {
    --skn-contact-band-color: var(--ink);
    position: relative;
    isolation: isolate;
  }
  html[data-theme="dark"] body .contact-section {
    --skn-contact-band-color: #171816;
  }
  body .contact-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: var(--skn-contact-band-color);
    box-shadow: 0 0 0 100vmax var(--skn-contact-band-color);
    clip-path: inset(0 -100vmax);
  }
}

/* Contact: responsive Ausgangsgröße auf allen Seiten um ein Drittel reduzieren. */
body .contact-section .contact h2 { font-size:calc(var(--skn-contact-title-size, clamp(1.9rem,8.7vw,3rem)) * 2 / 3) !important; }
@media (min-width:1025px) {
  body .contact-section .contact h2 { font-size:calc(clamp(44px,min(6.2vw,9.2svh),118px) * 2 / 3) !important; }
}

/* Erweiterte About-Seite: Display-H1 und Montserrat Regular für den Lesetext. */
body.page-id-653 .page-content h1 {
  font-family: 'Clash Display Variable', 'Clash Display', sans-serif;
  font-weight: 700;
  letter-spacing: .015em;
}
body.page-id-653 .page-content p {
  font-family: 'Montserrat', sans-serif;
  font-style: normal;
  font-weight: 400;
}

/* About: Zurück-Link mit derselben offenen Doppelpfeilform wie die Lightbox. */
body.page-id-653 .page-content .about-back { margin-top: 2.5rem; }
body.page-id-653 .about-back a {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  min-height: 44px;
  color: var(--ink);
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem;
  font-weight: 400;
  text-decoration: none;
}
body.page-id-653 .about-back svg {
  display: block;
  width: 48px;
  height: 36px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3px;
  opacity: .85;
  flex: none;
}
body.page-id-653 .about-back path { vector-effect: non-scaling-stroke; }
body.page-id-653 .about-back a:hover { text-decoration: underline; }
body.page-id-653 .about-back a:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }

/* Galerie-Rücksprung: gleiche Pfeilform wie in der Lightbox. */
body .gallery-back-start a { display: inline-flex; align-items: center; gap: .8rem; min-height: 44px; }
body .gallery-back-start svg {
  display: block;
  width: 48px;
  height: 36px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3px;
  opacity: .85;
  flex: none;
}
body .gallery-back-start path { vector-effect: non-scaling-stroke; }
/* Startseiten-Kacheln: dezente Rundung von exakt 5px. */
body.home .works .work-card, body.home .works .work-card img { border-radius: 5px !important; }

/* Galerie-Rücksprung wie auf About: Montserrat Regular, gleiche Größe und Abstände. */
html body .gallery-back-start { text-align: left; }
html body .gallery-back-start a {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  min-height: 44px;
  color: var(--ink);
  font-family: 'Montserrat', sans-serif !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  letter-spacing: normal;
  text-transform: none;
  text-decoration: none;
}
html body .gallery-back-start a:hover { text-decoration: underline; }

/* Werkpaket-Textübersicht unter der H1, einheitlich auf allen Bildschirmgrößen. */
html body .portfolio-intro .packet-index {
  display: block;
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
  margin: 1.5rem 0 0;
  text-align: right;
}
html body .packet-index ul { margin: 0; padding: 0; list-style: none; }
html body .packet-index li { margin: 0; padding: 0; }
html body .portfolio-intro .packet-index a {
  display: inline-block;
  padding: .15rem 0;
  max-width: 100%;
  font-family: 'Clash Display Variable', 'Clash Display', sans-serif;
  font-weight: 300;
  font-size: clamp(16px, 1.6vw, 24px);
  line-height: 1.15;
  letter-spacing: .015em;
  color: var(--ink);
  text-decoration: none;
  overflow-wrap: anywhere;
}
html body .packet-index a:hover { text-decoration: underline; }
html body .packet-index a:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

/* About: echte Montserrat-Schnitte wie auf der Startseite statt simuliertem Bold. */
@font-face {
  font-family: 'Montserrat About';
  src: url('fonts/Montserrat-Variable.woff2') format('woff2');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
html body.page-id-653 .page-content p { font-family: 'Montserrat About', 'Montserrat', sans-serif !important; }
html body.page-id-653 .page-content h1 { word-spacing: .14em; }

/* Werkpaket-Titel nebeneinander: Trennlinien mittig im gleichmäßigen Zwischenraum. */
html body .packet-index ul {
  --packet-index-gap: clamp(28px, 3vw, 48px);
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  column-gap: var(--packet-index-gap);
  row-gap: .15rem;
}
html body .packet-index li { position: relative; min-width: 0; max-width: 100%; }
html body .packet-index li:not(:first-child)::before {
  content: '';
  position: absolute;
  top: 50%;
  left: calc(var(--packet-index-gap) / -2);
  width: 1px;
  height: 1.65em;
  background: var(--line);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
html body .packet-index li.index-row-start::before { display: none; }
html body .packet-index li { font-size: clamp(16px, 1.6vw, 24px); }

/* Mehr-Link: rechter Doppelpfeil im gleichen Stil wie die Zurück-Links. */
body.home .about-copy .about-more {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  min-height: 44px;
  color: var(--ink);
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  text-decoration: none;
}
body.home .about-more svg {
  display: block;
  width: 48px;
  height: 36px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3px;
  opacity: .85;
  transform: rotate(180deg);
  flex: none;
}
body.home .about-more path { vector-effect: non-scaling-stroke; }
body.home .about-more:hover span { text-decoration: underline; }
body.home .about-more:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }

/* Kontakt-Aufruf: gleicher echte Bold-Schnitt wie der About-Satz auf der Startseite. */
html body .contact-aside .contact-callout {
  font-family: 'Montserrat About', 'Montserrat', sans-serif;
  font-style: normal;
  font-weight: 700;
}

/* Titelliste über die Viewportbreite mit schmalen sicheren Seitenrändern. */
html body .portfolio-intro .packet-index {
  --packet-index-edge: clamp(16px, 2vw, 28px);
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100vw - 2 * var(--packet-index-edge));
  max-width: none;
}
html body .packet-index ul {
  --packet-index-gap: clamp(18px, 2.4vw, 36px);
  justify-content: space-between;
}
html body .packet-index li.index-row-start:last-child { margin-left: auto; }
html body .packet-index li:not(:first-child)::before {
  left: var(--index-separator-offset, calc(var(--packet-index-gap) / -2));
}

/* Die breite Liste darf die H1-Spaltenbreite nicht vergrößern. */
html body .portfolio-intro .packet-index {
  contain: inline-size;
  width: 100%;
  max-width: 100%;
  left: auto;
  transform: none;
}
html body .packet-index ul { position: relative; }

/* Werkpaket-Liste: generell rechtsbündig, Umbruch erst bei ausgeschöpfter Breite. */
html body .packet-index ul { justify-content: flex-end; }
/* Jedes Werkpaket erhält einen reinen Pfeil zurück zur Übersicht. */
html body .portfolio-packet .packet-heading { position: relative; }
html body .portfolio-packet .packet-heading h2 { max-width: calc(100% - 56px); margin-left: auto; }
html body .packet-back {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-height: 44px;
  color: var(--ink);
  text-decoration: none;
}
html body .packet-back svg { width: 44px; height: 33px; fill: none; stroke: currentColor; stroke-width: 3px; opacity: .85; }
html body .packet-back path { vector-effect: non-scaling-stroke; }
html body .packet-back:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
#portfolio-start { scroll-margin-top: 80px; }