/*
 * FÖHRE | Design und responsive Komponenten
 * Seiten: Header, Menü, Footer, Startseite, Über uns, Leistungen,
 * Referenzen, Bibliothek und Kontakt.
 * CSS-Ladereihenfolge: normalize, fonts, tokens, style,
 * ggf. contact-preserved, design, interaction-theme,
 * ggf. services-variants. Die Reihenfolge ist für die Kaskade relevant.
 * Suchanker: [GRUNDLAGEN], [SHELL], [STARTSEITE], [LEISTUNGEN],
 * [UEBER-UNS], [REFERENZEN], [BIBLIOTHEK], [RESPONSIVE].
 */
/* ── [GRUNDLAGEN] Designvariablen und gemeinsame Maße ── */
:root {
  /* Marken-Aliase (feste Farben ausschließlich in tokens.css) */
  --brand-grey: var(--foehre-color-paper);
  --brand-green: var(--foehre-color-green);
  --brand-text: var(--foehre-color-green);
  --brand-orange: var(--foehre-color-orange);
  --brand-brown: var(--foehre-color-ochre);
  --brand-hover-green: var(--foehre-color-green);
  --design-text: var(--foehre-color-paper);

  /* Seitenraster und Header */
  --header-height: 76px;
  --header-height-scrolled: 76px;
  --design-gutter: clamp(26px, 3vw, 62px);
  --design-content: min(85.8%, 1480px);
  --site-footer-height: calc(var(--header-height) / 2);

  /* Schriften und globale UI-Abstände */
  --site-ui-font: var(--foehre-font-arial);
  --site-ui-font-size: clamp(13px, 1.04vw, 17px);
  --site-ui-weight: var(--foehre-weight-light);
  --site-ui-active-weight: var(--foehre-weight-medium);
  --site-ui-gutter: clamp(24px, 2.5vw, 55px);
  --site-ui-selected-color: var(--brand-orange);
  --foehre-body-copy-size: clamp(15px,1.25vw,21px);
  --foehre-body-copy-leading: 1.2;

  /* Hauptmenü und Steuerelemente */
  --menu-icon-size: clamp(68px, min(7.6vw, 12.5dvh), 135px);
  --menu-font-size: clamp(33px, min(4.9vw, 7.7dvh), 78px);
  --menu-row-height: clamp(75px, min(13.5dvh, 9vw), 146px);
  --menu-row-gap: clamp(6px, 1.5dvh, 18px);
  --menu-top-action-width: clamp(42px, 3vw, 52px);
  --menu-top-gap: clamp(14px, 1.6vw, 28px);

  /* Farbige Inhalte und Statement */
  --foehre-on-color: var(--foehre-color-paper);
  --foehre-on-color-selected: var(--foehre-color-black);
  --foehre-hero-heading-size: clamp(28px, 3.125vw, 54px);
  --foehre-hero-display-width: min(72%, 1050px);
  --foehre-hero-heading-leading: 1.13;

  /* Kapitel- und Schritt-Navigation */
  --foehre-journey-home-bottom: clamp(37px, 6.5svh, 96px);
  --foehre-step-nav-bottom: clamp(37px, 6.5svh, 96px);
  --foehre-step-arrow-size: 23px;
  --foehre-step-lift: clamp(22px,3.6svh,38px);
  --foehre-chapter-screen: max(540px, calc(100svh - var(--header-height)));
  --foehre-chapter-navigation-bottom: clamp(38px,6.5svh,96px);
  --foehre-cta-raise: 0px;

  /* Footer-Typografie */
  --foehre-footer-font-size: clamp(10px, .72vw, 11.5px);
}
html { scroll-padding-top: 95px; }
body { background: var(--brand-grey); color: var(--brand-green); }
body.mobile-menu-open { overflow: hidden; }
/* ── [SHELL] Header, Menü und Footer – Grundzustände ── */
body.has-scrolled .site-header, .site-header {
  position: fixed; inset: 0 0 auto; z-index: 1001;
  height: var(--header-height); min-height: var(--header-height);
  border: 0; background: var(--brand-grey); box-shadow: none;
  backdrop-filter: none; transition:background-color var(--foehre-motion-time, .24s) ease;
}
.site-header-spacer, body.has-scrolled .site-header-spacer { flex-basis: var(--header-height); height: var(--header-height); }
.design-header-inner { display: flex; align-items: center; height: 100%; gap: 21px; padding: 10px var(--design-gutter); }
.design-header-logo { display: inline-flex; width: 44px; height: 54px; align-items: center; justify-content: flex-start; text-decoration: none;  }
.design-header-logo img { width: 38px; height: 46px;  object-position: center left; }
.design-menu-trigger {  appearance: none; background: none; color: inherit; border: 0;   font-size: 12px; font-weight: var(--foehre-weight-light); text-transform: uppercase; letter-spacing: .02em;     }
.design-menu-trigger:hover, .design-menu-trigger:focus-visible { text-decoration: underline; text-underline-offset: 5px; }
.design-languages {    align-items: center;  font-size: 12px; text-transform: uppercase; font-weight: var(--foehre-weight-light); }
.design-languages a { text-decoration: none; color: inherit; opacity: .76; }
.design-languages a[aria-current="page"] { font-weight: var(--foehre-weight-medium); opacity: 1; }
.design-languages a:hover { opacity: 1; text-decoration: underline; }
.site-mobile-menu.design-menu-overlay {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; width: 100%;
  height: 100vh ; height: 100dvh;
  z-index: 1400; display: flex; flex-direction: column;
   padding: 35px clamp(26px, 6vw, 100px) 45px;
  background: var(--brand-grey); color: var(--brand-green);
  transform: translateY(-105%); opacity: 0; visibility: hidden;
  pointer-events: none; 
}
body.has-scrolled .site-mobile-menu.design-menu-overlay { top: 0; }
.site-mobile-menu.design-menu-overlay.is-open {
  transform: none; opacity: 1; visibility: visible; pointer-events: auto;
}
.design-menu-top, .design-menu-bottom { display: flex; gap: 24px; align-items: center; justify-content: space-between; text-transform: uppercase; font-size: 13px; }
.design-menu-close {   font-weight: var(--foehre-weight-light); border: none; background: transparent; cursor: pointer; color: inherit;  }
.design-menu-link { display: grid;  align-items: center;   text-decoration: none; color: inherit;   text-transform: uppercase;   transition:color var(--foehre-motion-time, .18s) ease, background-color var(--foehre-motion-time, .18s) ease; }
.design-menu-link img {     transition:filter var(--foehre-motion-time, .18s) ease; }
.design-menu-arr { font-size: 28px; opacity: 0; transition:opacity var(--foehre-motion-time, .2s); }
.design-menu-link:hover .design-menu-arr, .design-menu-link:focus-visible .design-menu-arr { opacity: 1; }
.design-menu-bottom a { color: inherit; text-decoration: none; }
.design-menu-bottom a:hover { text-decoration: underline; }
/* Footer: desktop left legal, right social; mobile columns reversed as in designer's layouts. */
.site-footer.design-footer { flex: 0 0 auto; min-height: 88px;       gap: 20px;  box-shadow: none; }
.design-footer-legal, .design-footer-social {    text-transform: uppercase; font-size: 11px; line-height: 1.35;  }
.design-footer-legal a, .design-footer-social a { color: inherit; text-decoration: none; }
.design-footer-legal a:hover, .design-footer-social a:hover { text-decoration: underline; text-underline-offset: 4px; }
.design-footer-social { font-weight: var(--foehre-weight-medium); }
.design-footer-social span { cursor: default; }
.design-footer .cookie-settings-slot { display: inline-flex; align-items: center; }
.design-footer .cookie-settings-slot button { font-size: 11px; }
/* Full-bleed wood hero, image extracted from the original design PDF. */
/* ── [STARTSEITE] Startseite und Hero ── */
.design-home-main { flex: 1 0 auto; }
.design-hero { min-height: 650px; position: relative; overflow: hidden; isolation: isolate; background-image: url("../Images/Hintergruende/wood-panels.webp"); background-position: center center; background-size: cover; min-height: max(570px, calc(100svh - var(--header-height) - 88px)); display: flex; align-items: flex-end; }

.design-hero-shade { position: absolute; inset: 0; z-index: 2;  }
.design-hero-content { position: relative; z-index: 3; display: flex; align-items: flex-end; justify-content: space-between; width: 100%; gap: 50px; padding: 0 var(--design-gutter) clamp(65px, 9vh, 130px); }
.design-hero h1 { width: min(68%, 1080px); margin: 0; color: var(--design-text); font-size: clamp(29px, 3.15vw, 56px); line-height: .99; font-weight: var(--foehre-weight-medium); text-transform: uppercase; letter-spacing: -.018em; }
.design-inline-arrow { display: inline-flex; gap: 14px; align-items: center; white-space: nowrap; text-transform: uppercase; text-decoration: none ; font-size: clamp(12px, 1.1vw, 18px); font-weight: var(--foehre-weight-light); color: inherit; transition:gap var(--foehre-motion-time, .2s) ease, opacity var(--foehre-motion-time, .2s) ease; }
.design-inline-arrow:hover { gap: 21px; opacity: .75; }
.design-inline-arrow span { font-size: 2em; line-height: 1; font-weight: var(--foehre-weight-light); }

/* Intro uses EXACT same background colour in both surrounding page and video pixels. */
body.intro-active { overflow: hidden; }
.start-intro { position: fixed; inset: 0; z-index: 9999; background: var(--foehre-color-paper); display: flex; align-items: center; justify-content: center; padding: 0; transition:opacity var(--foehre-motion-time, .55s) ease, visibility var(--foehre-motion-time, .55s) ease; }
.start-intro-video { width: auto ;     background: var(--foehre-color-paper); }
.start-intro.is-hiding { opacity: 0; visibility: hidden; pointer-events: none; }
.design-intro-skip { position: absolute; bottom: clamp(20px, 4vh, 50px); right: var(--design-gutter); appearance: none; border: 0; background: none; cursor: pointer; color: var(--foehre-color-green); text-transform: uppercase;  }
/* Services: gold editorial page */
body.design-services { background: var(--foehre-color-ochre); color: var(--foehre-color-paper); }
body.design-services .site-header { background: var(--foehre-color-ochre); color: var(--foehre-color-paper); }
body.design-services .design-header-logo img { filter: brightness(0) invert(1); }
/* ── [LEISTUNGEN] Leistungsseite – Grunddarstellung ── */
.design-services-main { flex: 1 0 auto; background: var(--foehre-color-ochre); color: var(--foehre-color-paper); }
.design-services-head { min-height: clamp(420px, 54svh, 690px); display: flex; align-items: end; justify-content: space-between; gap: 8vw; padding: 100px var(--design-gutter) clamp(60px, 9vh, 150px); }
.design-services-head h1 { margin: 0; max-width: 1100px; width: 69%; text-transform: uppercase; font-size: clamp(31px, 3.1vw, 65px); line-height: 1.01; font-weight: var(--foehre-weight-medium); letter-spacing: -.016em; }

.design-services-list { padding: clamp(90px, 16svh, 250px) max(var(--design-gutter), calc((100vw - 1300px)/2)) clamp(95px, 12svh, 210px); }
.design-service-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(45px, 9vw, 190px); row-gap: clamp(44px, 5vw, 95px); }
.design-service-item { display: grid; grid-template-columns: 15px 1fr; column-gap: 22px; align-content: start; min-width: 0; scroll-margin-top: 140px; }
.design-service-dot { margin-top: .3em; width: 14px; height: 14px; border-radius: 50%; background: currentColor; }
.design-service-item h2 { font-size: clamp(17px, 1.4vw, 23px); font-weight: var(--foehre-weight-medium); line-height: 1.11; text-transform: uppercase; margin: 0 0 18px; }
.design-service-item p { margin: 0; font-size: clamp(15px, 1.18vw, 20px); font-weight: var(--foehre-weight-light); line-height: 1.25; opacity: .94; }
.design-service-item a { color: inherit; text-underline-offset: 3px; }
.design-service-next { display: flex; justify-content: flex-end; align-items: center; gap: 18px; text-decoration: none; text-transform: uppercase; margin-top: clamp(120px, 15svh, 230px); font-size: 13px; }
.design-service-next span { font-size: 25px; }
.design-kicker { margin: 0 0 30px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: var(--foehre-weight-medium); }
/* ── [UEBER-UNS] Über uns und Partner ── */
.design-about-intro h1 { margin: 0 0 30px; text-transform: uppercase; font-size: clamp(56px, 10vw, 155px); font-weight: var(--foehre-weight-light); line-height: 1; letter-spacing: -.045em; }
.design-about-subtitle { text-transform: uppercase; font-size: 19px; margin: 20px 0 50px; }
.design-about-intro .about-copy { max-width: 860px; font-size: clamp(20px, 2.1vw, 32px); line-height: 1.35; }
.design-about-intro .about-copy p { margin: 0; }
.design-partner-section { background: var(--foehre-color-green); color: var(--foehre-color-paper);  }
.design-partner-section h2 {   text-transform: uppercase;   }
.design-partner-lead {   line-height: 1.35; margin: 0 0 70px; }
.design-partner {  align-items: baseline; gap: 35px;  border-bottom: 1px solid color-mix(in srgb, var(--foehre-color-paper) 45%, transparent); }
.design-partner span { font-size: 12px; min-width: 35px; }
.design-partner strong { font-weight: var(--foehre-weight-light); font-size: clamp(29px, 5vw, 75px); line-height: 1.2; }
.design-about-contact {   color: inherit; text-decoration: none; text-transform: uppercase;  }
/* References layout: existing real projects + existing working JS filter mechanics. */
body.references-page { background: var(--foehre-color-paper); }
/* ── [REFERENZEN] Referenzübersicht und Filter ── */
.references-page main { flex: 1 0 auto; }
.references-page .content { width: var(--design-content); max-width: 1480px; padding-top: clamp(45px, 6vh, 105px); padding-bottom: clamp(90px, 15vh, 200px); }
.references-page .filters { width: 100%; margin-bottom: clamp(65px, 7vw, 145px); }
.references-page .filter-rows { display: flex; flex-direction: column; gap: 8px; }
.references-page .filter-row { flex-wrap: wrap; display: flex; align-items: center; gap: 8px; }
.references-page .filter-chip { border: 1px solid var(--foehre-color-green); border-radius: 999px; background: transparent; color: var(--foehre-color-green); padding: 5px 13px; font-size: clamp(12px, 1vw, 16px); font-weight: var(--foehre-weight-light); line-height: 1.05; text-transform: uppercase; box-shadow: none; min-height: 0; }
.references-page .filter-chip[aria-pressed="true"] { background: var(--foehre-color-green); color: var(--foehre-color-paper); }
.references-page .reference-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); column-gap: clamp(30px, 3.6vw, 75px); row-gap: clamp(58px, 6vw, 120px); }
.references-page .reference-card { min-width: 0; display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; }
.references-page .reference-card[hidden] { display: none; }
.references-page .reference-card h3 { order: 0; margin: 0 0 8px; font-size: clamp(20px, 1.65vw, 29px); text-transform: uppercase; font-weight: var(--foehre-weight-medium); line-height: 1.05; }
.references-page .reference-card > img { order: 1; width: 100%; height: auto; aspect-ratio: 4/2.55; object-fit: cover; margin: 0 0 16px; border-radius: 0; }
.references-page .reference-card .reference-subtitle { order: 2; font-size: clamp(13px, 1vw, 17px); color: var(--foehre-color-green); margin: 0 0 7px; }
.references-page .reference-card .reference-location { order: 3; font-size: clamp(13px, 1vw, 17px); margin: 0 0 7px; }
.references-page .reference-card .reference-services { order: 4; font-size: clamp(13px, 1vw, 17px); line-height: 1.3; margin: 0 0 7px; }
.references-page .reference-card .reference-credit { order: 5; font-size: clamp(12px, .92vw, 16px); margin: 0; }
.references-page .reference-card .reference-credit a { color: inherit; text-underline-offset: 2px; }
/* Orange library overview: keep real, existing subjects instead of fake sample articles. */
/* ── [BIBLIOTHEK] Bibliothek und Artikel – Grundlagen ── */
body.design-library-index, body.library-page { background: var(--foehre-color-orange); }
body.design-library-index .site-header, body.library-page .site-header { background: var(--foehre-color-orange); color: var(--foehre-color-paper); }
body.design-library-index .design-header-logo img, body.library-page .design-header-logo img { filter: brightness(0) invert(1); }
.design-library-main { flex: 1 0 auto; background: var(--foehre-color-orange); color: var(--foehre-color-paper); }
.design-library-intro { min-height: clamp(380px, 52svh, 720px); padding: clamp(145px, 23svh, 320px) var(--design-gutter) clamp(65px, 9vh, 130px); display: flex; align-items: end; justify-content: space-between; gap: 55px; }
.design-library-intro h1 { max-width: 990px; width: 72%; font-size: clamp(27px, 3.15vw, 56px); font-weight: var(--foehre-weight-medium); line-height: 1.02; text-transform: uppercase; margin: 0; }

.design-library-list { padding: 50px var(--design-gutter) clamp(95px, 12vh, 190px); }
.design-library-list > h2 { font-size: clamp(23px, 2.5vw, 42px); font-weight: var(--foehre-weight-medium); text-transform: uppercase; margin: 0 0 15px; }
.design-library-list a { text-decoration: none; color: inherit; }
.design-library-entry { border-top: 1px solid var(--foehre-color-paper); padding: 13px 2px 14px; display: flex; align-items: center; justify-content: space-between; gap: 20px; font-size: clamp(25px, 3vw, 55px); line-height: 1.1; font-weight: var(--foehre-weight-light); transition:background var(--foehre-motion-time, .2s), color var(--foehre-motion-time, .2s); }
.design-library-entry:last-of-type { border-bottom: 1px solid var(--foehre-color-paper); }
.design-library-entry:hover { background: var(--foehre-color-paper); }
.design-library-entry span:last-child { font-size: 13px; font-weight: var(--foehre-weight-light); }
/* Existing expert library pages remain navigable and readable with the new color language. */
.library-page .library-main { background: var(--foehre-color-orange); color: var(--foehre-color-paper); flex: 1 0 auto; padding-top: clamp(50px, 7vh, 110px); padding-bottom: 110px; }
.library-page .library-content, .library-page .library-sidebar { background: transparent; color: var(--foehre-color-paper); }
.library-page .library-article a, .library-page .library-nav a { color: inherit; }
.library-page .library-article h1 { font-size: clamp(42px, 5vw, 80px); font-weight: var(--foehre-weight-light); }
.library-page .library-card { border: 1px solid color-mix(in srgb, var(--foehre-color-paper) 45%, transparent); border-radius: 0; background: transparent; color: var(--foehre-color-paper); }
.library-page .library-card:hover { background: color-mix(in srgb, var(--foehre-color-paper) 12%, transparent); }
.library-page .library-nav-link[aria-current="page"] { color: var(--foehre-color-paper); }
/* ── [KONTAKT] Kontakt-Basis; weitere Formregeln in contact-preserved.css und späteren Overrides ── */
/* Contact form retains all original input IDs, API endpoint, validation and progress UI. */
.contact-page { background: var(--foehre-color-paper); }
.contact-main { flex: 1 0 auto; padding: clamp(80px, 12vh, 155px) 0; }
.contact-content { width: min(85.8%, 1100px); max-width: none; }
.contact-title { font-size: clamp(43px, 7vw, 100px); font-weight: var(--foehre-weight-light); line-height: 1; text-transform: uppercase; }
.contact-intro { font-size: clamp(17px, 1.8vw, 24px); line-height: 1.35; }
.contact-submit { background: var(--foehre-color-green); color: var(--foehre-color-paper); }
.contact-input, .contact-textarea { border-radius: 0; }
/* Legal pages: keep old legal texts, improve legibility and margin. */
body:not(.design-home):not(.design-about):not(.design-services):not(.references-page):not(.design-library-index):not(.library-page):not(.contact-page) main { flex: 1 0 auto; }
/* Tablet & mobile: designer's two-column footer becomes opposing stacks. */
/* ── [RESPONSIVE] Erste responsive Grundregeln; spätere Overrides bleiben in ihrer Reihenfolge ── */
@media (max-width: 800px) {
  .design-header-inner { padding-inline: 26px;  }
  .design-menu-trigger {   font-size: 16px; }
  .design-languages {  font-size: 14px; gap: 3px; }
  .design-menu-overlay { padding: 27px 25px 40px; }
  .design-menu-items { gap: 15px; }
  .design-menu-link { font-size: clamp(29px, 7vw, 54px); grid-template-columns: 75px 1fr 20px; gap: 15px; min-height: 90px; }
  .design-menu-link img { width: 66px; }
  .design-menu-arr { font-size: 20px; }
  .design-footer { min-height: 115px; padding: 23px 26px; gap: 12px; }
  .design-footer-legal, .design-footer-social { display: flex; flex-direction: column;  font-size: 12px; }
  .design-footer-legal { order: 2; text-align: right; align-items: flex-end; }
  .design-footer-social { order: 1; text-align: left; align-items: flex-start; }
  .design-footer .cookie-settings-slot { display: none; }
  .design-hero { min-height: max(580px, calc(100svh - 119px - 115px)); background-position: 48% center; }
  .design-hero-shade { background: linear-gradient(to top,color-mix(in srgb, var(--foehre-color-black) 28%, transparent),transparent 78%); }
  .design-hero-content { flex-direction: column; align-items: flex-start; gap: 32px; padding: 0 26px 117px; }
  .design-hero h1 { width: 100%; max-width: 480px; font-size: clamp(24px, 6.65vw, 43px); line-height: 1; }
  
  .start-intro-video { max-width: 100vw ; height: auto ; width: min(94vw, 600px) ; }
  .design-services-head { min-height: 380px; flex-direction: column; align-items: flex-start; justify-content: end; gap: 27px; padding: 70px 26px 95px; }
  .design-services-head h1 { width: 100%; font-size: clamp(27px, 7vw, 44px); }
  .design-services-list { padding: 80px 26px 110px; }
  .design-service-grid { grid-template-columns: 1fr; row-gap: 51px; }
  .design-service-item { grid-template-columns: 13px 1fr; gap: 16px; }
  .design-service-item h2 { font-size: 20px; }
  .design-service-item p { font-size: 17px; }
  .design-service-next { margin-top: 95px; }
  .design-about-intro { padding: 100px 26px 95px; }
  .design-about-intro h1 { font-size: clamp(52px, 14vw, 89px); }
  .design-partner-section { padding: 90px 26px; }
  .references-page .content { width: calc(100% - 52px); padding-top: 30px; }
  .references-page .filters { margin-bottom: 62px; }
  .references-page .reference-grid { grid-template-columns: 1fr; gap: 45px; }
  .references-page .reference-card h3 { font-size: 24px; }
  .references-page .reference-card img { aspect-ratio: 1.4; }
  .design-library-intro { padding: 110px 26px 90px; flex-direction: column; align-items: flex-start; gap: 26px; min-height: 490px; }
  .design-library-intro h1 { width: 100%; font-size: clamp(26px, 6.5vw, 43px); }
  .design-library-list { padding: 10px 26px 110px; }
  .design-library-entry { font-size: 26px; }
  .library-page .library-main { padding-top: 28px; }
  .library-page .library-shell { width: calc(100% - 52px); }
  .contact-content { width: calc(100% - 52px); }
}
@media (max-width: 380px) {
  .design-header-inner { padding-inline: 17px; }
  .design-languages { font-size: 13px; }
  .design-hero-content { padding-inline: 22px; }
  .design-menu-link { grid-template-columns: 52px 1fr 15px; font-size: 25px; }
  .design-menu-link img { width: 46px; }
}
@media (prefers-reduced-motion: reduce) { .design-menu-overlay, .design-menu-link, .start-intro { transition:none; } }

.foehre-intro-seen .start-intro { display: none; }
.foehre-intro-seen body.intro-active { overflow: auto; }


@media (min-width: 801px) {
  :root { --header-height: clamp(86px, 7.06vw, 122px); --header-height-scrolled: var(--header-height); --design-gutter: clamp(30px, 2.49vw, 55px); }
  .site-header-spacer, body.has-scrolled .site-header-spacer { height: var(--header-height); flex-basis:var(--header-height); }
  .design-header-inner { padding: 7px clamp(15px, 1vw, 30px); gap: 30px; }
  .design-header-logo { width: 78px; height: calc(var(--header-height) - 13px); align-items:center; }
  .design-header-logo img { width: 78px; height: 108px; max-height:100%; object-fit: contain; }
  .design-menu-trigger,.design-languages { font-size: clamp(13px, 1.16vw, 20px); }
  .design-menu-trigger { margin-left:auto; padding-inline: 3px; }
  .design-languages { gap: 4px; }
  .site-footer.design-footer { min-height: clamp(100px, 8.1vw, 140px); padding: 26px clamp(26px,1.8vw,40px); }
  .design-footer-legal,.design-footer-social { font-size:clamp(10px,.7vw,12px); }
  .design-hero { min-height: max(calc(100svh - var(--header-height) - clamp(100px, 8.1vw, 140px)), 58.74vw); }
  .design-hero-content { padding: 0 clamp(26px,2.49vw,55px) clamp(80px,5.6vw,100px); }
  .design-hero h1 { max-width: 1063px; width: min(66%, 1063px); font-size: clamp(36px,3.125vw,54px); line-height: 1; font-weight:var(--foehre-weight-medium); letter-spacing:0; }
  
}
.design-intro-skip { z-index: 4; font-size:12px; }
.start-intro-video { width: min(676px,39.12vw,64svh); height: auto; max-width: 100vw; max-height: 80svh; aspect-ratio: 676 / 846; object-fit:contain; }
.design-menu-home { color:inherit; text-decoration:none; font-weight:var(--foehre-weight-light); font-size:clamp(15px,1.17vw,20px); }
.design-menu-languages {    font-size:clamp(15px,1.17vw,20px); font-weight:var(--foehre-weight-light);  }
.design-menu-languages a { text-decoration:none; color:inherit; }
.design-menu-languages a[aria-current=page] { font-weight:var(--foehre-weight-medium); }
.design-menu-languages a:hover { text-decoration:underline; }
.design-menu-close {  line-height:1;   }
.design-menu-link { grid-template-columns: clamp(90px,12.8vw,222px) minmax(0,1fr) 24px; gap:0; min-height:clamp(118px,10.9vw,187px); border-bottom:0; padding:0; font-size:clamp(50px,5.55vw,96px); font-weight:var(--foehre-weight-light); line-height:1; letter-spacing:-.032em; }
.design-menu-link img { width:clamp(90px,12.8vw,222px); height:clamp(97px,12.3vw,213px); max-height:none; object-fit:contain; object-position:center left; }
.design-menu-link>span:nth-child(2) { padding-left:0; }
.design-menu-arr { font-size:clamp(17px,2vw,28px); }
.design-menu-link:hover, .design-menu-link:focus-visible { letter-spacing:-.025em; }
.design-menu-bottom { font-size:12px;  }
/* About: hierarchy from the provided Figma export; original personal copy first. */
.design-about-intro { padding: clamp(95px,6vw,155px) clamp(26px,2.5vw,55px) clamp(115px,8vw,150px); }
.design-photo-pending { background:var(--foehre-color-paper); aspect-ratio:351/525; width:100%; display:flex; align-items:center; justify-content:center; color:var(--foehre-color-green); overflow:hidden; }
.design-photo-pending > span { text-align:center; font-size:clamp(26px,3vw,48px); font-weight:var(--foehre-weight-light); }
.design-image-notice { display:block; font-size:12px; letter-spacing:.11em; text-transform:uppercase; margin-top:18px; }
.design-partner-section { padding:clamp(70px,4vw,100px) clamp(26px,3.3vw,60px) clamp(120px,7vw,175px); }
.design-partner-section h2 { font-size:clamp(32px,2.8vw,48px); line-height:1.16; font-weight:var(--foehre-weight-medium); margin:0 0 25px; }
.design-partner-lead { max-width:850px; font-size:clamp(17px,1.4vw,23px); font-weight:var(--foehre-weight-light); margin-bottom:75px; }
.design-partners { display:grid; grid-template-columns:repeat(3,1fr); column-gap:clamp(25px,4.4vw,80px); border-top:0; }
.design-partner { padding:0; display:block; border:0; min-width:0; }
.design-partner-photo { width:100%; aspect-ratio:351/525; display:flex; align-items:center; justify-content:center; background:color-mix(in srgb, var(--foehre-color-paper) 12%, transparent); border:1px solid color-mix(in srgb, var(--foehre-color-paper) 22%, transparent); }
.design-partner-photo span { text-transform:uppercase; font-size:12px; letter-spacing:.07em; color:var(--foehre-color-paper); opacity:.8; }
.design-partner h3 { margin:24px 0 6px; font-weight:var(--foehre-weight-medium); text-transform:uppercase; font-size:20px; }
.design-partner p { font-weight:var(--foehre-weight-light); text-transform:uppercase; font-size:16px; margin:0; }
@media(max-width:1150px) and (min-width:801px) {
  .design-about-profile-copy { grid-template-columns:1fr; }
  .design-about-profile { min-height:auto; }
}
@media (max-width:800px) {
  .design-header-inner { padding:0 26px; }
  .design-header-logo { width:49px; height:68px; }
  .design-header-logo img { width:49px; height:68px; max-height:100%; }
  .design-menu-trigger { font-size:16px; margin-left:0; padding-inline:0; }
  .design-languages { font-size:16px; margin-left:auto; }
  .site-footer.design-footer { min-height:115px; }
  .design-hero { min-height: max(600px, calc(100svh - 234px)); background-size:auto 100%; background-position:calc(50% + 59px) center; }
  .design-hero-content { padding:0 26px 114px; gap:30px; }
  .design-hero h1 { width:100%; font-size:26px; line-height:1; font-weight:var(--foehre-weight-medium); letter-spacing:0; max-width:338px; }
  
  .start-intro-video { width:min(100vw, 68svh); height:auto; max-width:100vw; max-height:85svh; }
  .design-intro-skip { right:20px; bottom:25px; }
  .site-mobile-menu.design-menu-overlay { padding: 28px 22px 25px; }
  .design-menu-top { justify-content:space-between; }
  .design-menu-home,
.design-menu-languages { font-size:20px; }
  .design-menu-top-right { gap:8px; }
  .design-menu-close { font-size:28px; width:28px; height:35px; }
  .site-mobile-nav.design-menu-items {  gap:0; margin:auto 0; padding:0; }
  .design-menu-link { grid-template-columns:99px minmax(0,1fr); gap:0; min-height:84px; font-size:clamp(25px,8.72vw,34px); border:0; line-height:1.06; letter-spacing:-.015em; }
  .design-menu-link img { width:99px; height:97px; max-height:100px; object-fit:contain; object-position:left center; }
  .design-menu-arr { display:none; }
  .design-menu-bottom { justify-content:flex-end; }
  .design-about-intro { padding: 45px 33px 70px; }
  .design-about-lead { margin-bottom:70px; }
  .design-about-lead h1 { font-size:26px; line-height:1; margin-bottom:38px; }
  .design-about-lead p { font-size:21px; line-height:25px; font-weight:var(--foehre-weight-light); }
  .design-about-profile { display:flex; flex-direction:column; gap:28px; }
  .design-photo-pending { aspect-ratio:391/485; width:calc(100% + 66px); margin-left:-33px; order:1; }
  .design-about-profile-copy { display:contents; }
  .design-about-person { order:0; font-size:16px; line-height:19px; max-width:339px; }
  .design-about-profile-copy address { order:2; font-size:16px; line-height:19px; padding:12px 0 5px; gap:7px; }
  .design-partner-section { padding:35px 0 70px; }
  .design-partner-section h2 { font-size:26px; line-height:1.1; margin:0 33px 20px; }
  .design-partner-lead { font-size:16px; line-height:1.25; margin:0 33px 32px; }
  .design-partners { display:flex; flex-direction:column; gap:33px; }
  .design-partner-photo { width:100%; aspect-ratio:390/511; }
  .design-partner h3 { margin:15px 33px 4px; font-size:16px; }
  .design-partner p { margin:0 33px; font-size:14px; }
  .design-about-contact { padding:45px 26px; font-size:16px; }
}
@media (max-width:380px) { .design-menu-link { grid-template-columns:85px 1fr; font-size:clamp(24px,8vw,30px);} .design-menu-link img { width:85px; } .design-menu-languages{font-size:17px;} }
/* Fine alignment with the MENU and ÜBER UNS Figma frames. */
@media (min-width:801px) {
  .site-mobile-nav.design-menu-items { margin:65px 0 auto; justify-content:flex-start; }
  .design-about-intro { padding-top:43px; }
}
.design-menu-link img { filter:none; }
@media (max-width:800px) {
  .site-mobile-nav.design-menu-items { margin:clamp(70px,12svh,105px) 0 auto; justify-content:flex-start; }
}
/* Designer article layout: photographic banner + orange knowledge page.
   Preserves the substantive articles, navigational index and BKS/EN links. */
.library-page .design-article-hero {
  position:relative; display:flex; align-items:flex-end; min-height:clamp(340px,29.7vw,520px);
  background:linear-gradient(0deg,color-mix(in srgb, var(--foehre-color-black) 31%, transparent),transparent 68%),url("../Images/Hintergruende/wood-panels.webp") center center / cover no-repeat;
}
.library-page .design-article-hero-inner {
  padding:0 var(--design-gutter) clamp(46px,5.4vw,100px); width:100%;
  display:flex; justify-content:space-between; gap:50px; align-items:flex-end;
}
.library-page .design-article-heading {
  text-transform:uppercase; font-size:clamp(32px,3.15vw,54px); font-weight:var(--foehre-weight-medium);
  line-height:1.02; color:var(--foehre-color-paper); max-width:1020px; margin:0;
}
.library-page .design-article-hero .design-inline-arrow { color:var(--foehre-color-paper); margin-bottom:6px; }

/* [BLOCK-BIBLIOTHEK-01] BIBLIOTHEK */
.library-page .library-shell {
  background:transparent; border:0; box-shadow:none; overflow:visible;
  width:min(calc(100% - 2*var(--design-gutter)),1460px); max-width:none;
  margin:auto; min-height:0; display:grid; grid-template-columns:minmax(0,1fr) 310px;
  gap:clamp(35px,5.5vw,110px);
}
.library-page .library-content { grid-column:1;grid-row:1;padding:65px 0 130px; background:transparent;color:var(--foehre-color-paper); }
.library-page .library-sidebar {
  grid-column:2; grid-row:1; background:transparent; color:var(--foehre-color-paper);
  border:0; box-shadow:none; padding:65px 0; top:var(--header-height);
  max-height:calc(100svh - var(--header-height)); height:auto; overflow:auto;
}
.library-page .library-article { color:var(--foehre-color-paper); max-width:none; }
.library-page .library-article p,.library-page .library-article li,.library-page .library-article h2,.library-page .library-article h3,.library-page .library-article strong {
  color:var(--foehre-color-paper);
}
.library-page .library-article h2 { font-weight:var(--foehre-weight-medium); font-size:clamp(25px,2vw,34px); line-height:1.2; }
.library-page .library-article h3 { font-weight:var(--foehre-weight-medium); }
.library-page .library-article p,.library-page .library-article li { font-weight:var(--foehre-weight-light); line-height:1.4; }
.library-page .library-article a { color:var(--foehre-color-paper); text-decoration-color:currentColor; }
.library-page .library-breadcrumbs,.library-page .library-breadcrumbs a { color:var(--foehre-color-paper); opacity:.92; }
.library-page .library-intro-note,.library-page .library-fact,.library-page .library-card,.library-page .library-faq details,.library-page .library-source-note {
  background:transparent; color:var(--foehre-color-paper); border:1px solid color-mix(in srgb, var(--foehre-color-paper) 35%, transparent); box-shadow:none;
}
.library-page .library-faq summary { color:var(--foehre-color-paper); }
.library-page .library-faq summary:hover,.library-page .library-card:hover { background:color-mix(in srgb, var(--foehre-color-paper) 10%, transparent); }
.library-page .library-sidebar-title,.library-page .library-nav-link,.library-page .library-nav-topic-link,.library-page .library-nav-sublink,
.library-page .library-sidebar a { color:var(--foehre-color-paper); }
.library-page .library-nav-topic-link[aria-current=page] { font-weight:var(--foehre-weight-medium); }
.library-page .library-sidebar-head { border-bottom:1px solid color-mix(in srgb, var(--foehre-color-paper) 35%, transparent); }
.library-page .library-shell { scroll-margin-top:var(--header-height); }
@media (min-width:821px) {
  body.has-scrolled.library-page .library-sidebar { display:block; }
}
@media(max-width:820px) {
  .library-page .design-article-hero { min-height: max(380px,55svh); background-size:auto 100%; background-position:calc(50% + 44px) center; }
  .library-page .design-article-hero-inner { display:flex; flex-direction:column;align-items:flex-start; gap:20px; padding:0 26px 55px; }
  .library-page .design-article-heading { font-size:26px; line-height:1; }
  .library-page .library-main { padding:0 0 0; }
  .library-page .library-shell { display:flex; flex-direction:column; gap:0; width:100%; }
  .library-page .library-mobile-toolbar { order:0; padding:14px 26px; background:var(--foehre-color-orange); border:0; }
  .library-page .library-mobile-toggle { color:var(--foehre-color-paper); border:1px solid var(--foehre-color-paper); }
  .library-page .library-mobile-toggle-icon span { background:var(--foehre-color-paper); }
  .library-page .library-content { order:1; padding:34px 26px 85px; }
  .library-page .library-sidebar { grid-column:auto;grid-row:auto; order:initial; padding:25px 20px; height:auto; max-height:none; max-width:min(86vw,320px); background:var(--foehre-color-paper); color:var(--foehre-color-green); border-right:1px solid color-mix(in srgb, var(--foehre-color-green) 14%, transparent); }
  .library-page .library-sidebar-title,.library-page .library-nav-link,.library-page .library-nav-topic-link,.library-page .library-nav-sublink,.library-page .library-sidebar a { color:var(--foehre-color-green); }
  body.has-scrolled.library-page .library-sidebar {display:block;}
  .library-page .library-article h2 { font-size:25px; }
}

/* Header + Footer share precisely the same font definitions. */

/* [BLOCK-SHELL-01] SHELL */
.site-header.design-header, .site-header.design-header *,
.site-footer.design-footer, .site-footer.design-footer *,
.design-menu-top, .design-menu-bottom {
  font-family: var(--site-ui-font);
}
.design-menu-trigger, .design-languages,
.design-menu-home, .design-menu-languages, .design-menu-bottom,
.design-footer-legal, .design-footer-social,
.design-footer .cookie-settings-slot button {
  font-family: var(--site-ui-font);
  font-size: var(--site-ui-font-size);
  font-weight: var(--site-ui-weight);
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: 0;
}
.design-languages a, .design-menu-languages a,
.design-menu-home, .design-footer a, .design-menu-bottom a {
  font: inherit;
  text-decoration: none;
  color: inherit;
}
.design-languages a[aria-current="page"],
.design-menu-languages a[aria-current="page"] {
  font-weight: var(--site-ui-active-weight);
}
.design-languages a:hover, .design-menu-languages a:hover,
.design-footer a:hover, .design-menu-bottom a:hover {
  text-decoration: none;
}

/* Kopfzeile. Left optical correction accounts for transparent padding in logo PNG. */
/* ── [KOMPONENTENREGELN] Spätere komponentenspezifische Kaskadenkorrekturen ── */
.site-header.design-header { background: var(--brand-grey); }
.design-header-inner {
  padding: 7px var(--site-ui-gutter) 7px calc(var(--site-ui-gutter) - 8px);
  gap: clamp(12px, 2vw, 30px);
}
.design-header-logo { flex-shrink: 0; }
.design-header-logo img { object-fit: contain; }
.design-menu-trigger, .design-languages { color: var(--brand-green); }
.design-menu-trigger {
  order: 2;
  display: inline-flex;
  align-items: center; justify-content: center;
  margin-left: auto;
  gap: 8px;
  padding: 4px 0;
  width: auto; min-width: 0; height: auto;
  flex: 0 0 auto;
  cursor: pointer;
}
.site-header.design-header .design-menu-trigger > .design-menu-trigger-label {
  display: inline-block;
  position: static;
  inset: auto;
  width: auto;
  height: auto;
  background: transparent;
  opacity: 1;
  transform: none;
  white-space: nowrap;
  line-height: 1.25;
}
.design-menu-burger { display: none; }
.design-languages { order: 3; display: flex; white-space: nowrap; gap: 4px; }

/* Footer: exactly half a header tall on normal desktop screens. */
.site-footer.design-footer {
  width: 100%; box-sizing: border-box;
  height: var(--site-footer-height);
  min-height: var(--site-footer-height);
  padding: 0 var(--site-ui-gutter);
  background: var(--brand-grey);
  color: var(--brand-green);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: clamp(12px, 2.5vw, 38px);
  border: 0;
}
.design-footer-legal, .design-footer-social {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: nowrap;
  width: auto;
  gap: clamp(5px, .7vw, 13px);
  margin: 0;
  padding: 0;
  white-space: nowrap;
  color: var(--brand-green);
}
.design-footer-social { margin-left: auto; justify-content: flex-end; }
.design-footer-separator { color: var(--brand-green); font-weight: var(--foehre-weight-light); opacity: .8; user-select: none; }
.design-footer-cookie-wrap, .design-footer .cookie-settings-slot {
  display: inline-flex;
  align-items: center; justify-content: center;
  vertical-align: middle;
}
.design-footer .cookie-settings-slot { width: 23px; height: 23px; }
.design-footer .cookie-settings-slot button {
  display: inline-flex;
  align-items: center; justify-content: center;
  color: var(--brand-green);
  cursor: pointer;
}
.design-linkedin-link { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; }
.design-linkedin-icon { display: block; width: 20px; height: 20px; object-fit: contain; filter: brightness(0) saturate(100%) invert(20%) sepia(18%) saturate(706%) hue-rotate(68deg) brightness(95%); }
.design-linkedin-link:hover .design-linkedin-icon { filter: brightness(0) saturate(100%) invert(28%) sepia(68%) saturate(1394%) hue-rotate(8deg); }

/* Menüzeile: Logo und Text bilden eine gemeinsame Klickfläche. */

/* [BLOCK-SHELL-02] SHELL */
.site-mobile-menu.design-menu-overlay {
  overflow-y: auto;
  overscroll-behavior: contain;
}
.design-menu-top {
  display: flex; justify-content: flex-end;
  align-items: center; gap: clamp(15px, 2.5vw, 38px);
  min-height: 36px;
  flex: 0 0 auto;
}
.design-menu-top-right { display: flex; gap: clamp(12px, 2vw, 32px); align-items: center; margin: 0; }
.design-menu-languages { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.design-menu-close {
  display: inline-flex; justify-content: center; align-items: center;
  width: 38px; height: 38px; padding: 0; flex: 0 0 auto;
  font-size: 33px; font-family: var(--site-ui-font);
}
.site-mobile-nav.design-menu-items {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  flex: 1 1 auto;
  gap: var(--menu-row-gap);
  width: 100%;
  max-width: none;
  min-height: 0;
  max-height: none;
  margin: 12px 0;
  padding: 0;
}
.site-mobile-nav.design-menu-items .design-menu-link {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: flex-start;
  flex: 0 0 var(--menu-row-height);
  gap: clamp(12px, 1.5vw, 27px);
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  height: var(--menu-row-height);
  min-height: 0;
  max-height: none;
  padding: 0;
  margin: 0;
  border: none;
  text-align: left;
  color: var(--brand-green);
  background: none;
  box-shadow: none;
  text-decoration: none;
  font-family: var(--site-ui-font);
  font-size: var(--menu-font-size);
  font-weight: var(--foehre-weight-light);
  line-height: 1;
  letter-spacing: -.025em;
  text-transform: uppercase;
}
.design-menu-icon {
  position: relative; display: block;
  flex: 0 0 var(--menu-icon-size);
  width: var(--menu-icon-size);
  height: var(--menu-icon-size);
  min-width: 0; min-height: 0;
}
.site-mobile-nav.design-menu-items .design-menu-icon img {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
  object-position: left center;
  filter: none;
  transition:opacity var(--foehre-motion-time, .16s) ease, filter var(--foehre-motion-time, .16s) ease;
}
.design-menu-icon-base { opacity: 1; }
.design-menu-icon-hover { opacity: 0; }
.site-mobile-nav.design-menu-items .design-menu-label {
  display: block;
  align-self: center;
  width: auto;
  padding: 0;
  margin: 0;
  font-family: var(--site-ui-font);
  font-weight: var(--foehre-weight-light);
  font-size: inherit;
  line-height: 1.05;
  color: inherit;
  white-space: nowrap;
}
.site-mobile-nav.design-menu-items .design-menu-link:hover,
.site-mobile-nav.design-menu-items .design-menu-link:focus-visible,
.site-mobile-nav.design-menu-items .design-menu-link[aria-current="page"] {
  font-weight: var(--foehre-weight-light);
  letter-spacing: -.025em;
}
.site-mobile-nav.design-menu-items .design-menu-link:hover .design-menu-icon-hover,
.site-mobile-nav.design-menu-items .design-menu-link:focus-visible .design-menu-icon-hover { opacity: 1; }
.site-mobile-nav.design-menu-items .design-menu-link:hover .design-menu-icon-base,
.site-mobile-nav.design-menu-items .design-menu-link:focus-visible .design-menu-icon-base { opacity: 0; }
/* Green logos remain GREEN, never inverse. A slight shade change indicates hover. */
.design-menu-bottom { display: flex; align-items: center; justify-content: flex-end; min-height: 24px; flex: 0 0 auto; }
.design-menu-bottom a { font-weight: var(--site-ui-weight); }

/* Home: desktop hero exactly fills the remaining first viewport.
   Footer is in normal document flow and becomes visible only on scroll. */
@media (min-width: 801px) {
  body.design-home .design-home-main { flex: 0 0 auto; }
  body.design-home .design-hero {
    height: max(430px, calc(100svh - var(--header-height)));
    min-height: 0;
    background-size: cover;
    background-position: center center;
    align-items: flex-end;
  }
  body.design-home .design-hero-content {
    padding: 0 var(--site-ui-gutter) clamp(37px, 6.5svh, 96px);
    gap: clamp(20px, 3vw, 62px);
  }
  body.design-home .design-hero h1 {
    width: min(70%, 1080px);
    max-width: 1080px;
    font-size: clamp(30px, 3.05vw, 54px);
    line-height: 1.06;
    font-weight: var(--foehre-weight-medium);
    text-shadow: none;
  }
  
}
.design-hero-shade { background: linear-gradient(0deg, color-mix(in srgb, var(--foehre-color-black) 49%, transparent), color-mix(in srgb, var(--foehre-color-black) 12%, transparent) 45%, transparent 78%); }

/* Tablet and phone: language selector precedes a visibly drawn SVG burger. */
@media (max-width: 800px) {
  :root {
    --header-height: 84px;
    --header-height-scrolled: 84px;
    --site-ui-gutter: 24px;
    --site-ui-font-size: clamp(11px, 3vw, 14px);
    --menu-icon-size: clamp(54px, 15vw, 80px);
    --menu-font-size: clamp(24px, 7.2vw, 37px);
    --menu-row-height: clamp(65px, min(13dvh, 20vw), 97px);
    --menu-row-gap: clamp(5px, 1.4dvh, 13px);
  }
  .site-header-spacer, body.has-scrolled .site-header-spacer {
    height: var(--header-height);
    flex-basis: var(--header-height);
  }
  .design-header-inner { padding: 0 var(--site-ui-gutter) 0 calc(var(--site-ui-gutter) - 5px); gap: 10px; }
  .design-header-logo { width: 48px; height: 65px; }
  .design-header-logo img { width: 48px; height: 65px; max-height: 100%; }
  .design-languages { order: 2; margin-left: auto; }
  .design-menu-trigger {
    order: 3;
    margin-left: 6px;
    min-width: 32px;
    width: 32px;
    height: 38px;
    padding: 3px 0;
    flex: 0 0 32px;
  }
  .site-header.design-header .design-menu-trigger > .design-menu-trigger-label { display: none; }
  .design-menu-trigger .design-menu-burger {
    display: block;
    position: static;
    visibility: visible;
    opacity: 1;
    flex: 0 0 auto;
    width: 28px;
    height: 23px;
    color: var(--brand-green);
    background: none;
    transform: none;
  }
  .design-menu-trigger .design-menu-burger path { stroke: currentColor; }
  .site-footer.design-footer { height: var(--site-footer-height); min-height: var(--site-footer-height); }
  .design-footer-legal, .design-footer-social { gap: 5px; }
  .design-footer .cookie-settings-slot { width: 20px; height: 20px; }
  .design-linkedin-link, .design-linkedin-icon { width: 17px; height: 17px; }
  .design-menu-top { justify-content: space-between; gap: 10px; }
  .design-menu-top-right { margin-left: auto; gap: 12px; }
  .design-menu-close { width: 34px; height: 36px; font-size: 30px; }
  .site-mobile-nav.design-menu-items { margin: 10px 0; }
  .site-mobile-nav.design-menu-items .design-menu-link { gap: 10px; }
  body.design-home .design-hero { height: max(390px, calc(100svh - var(--header-height))); min-height: 0; background-size: cover; background-position: 54% center; }
  body.design-home .design-hero-content { padding: 0 var(--site-ui-gutter) 38px; flex-direction: column; align-items: flex-start; gap: 17px; }
  body.design-home .design-hero h1 { width: 100%; max-width: 470px; font-size: clamp(24px, 6.6vw, 34px); line-height: 1.08; }
  
}

/* [BLOCK-SHELL-03] SHELL */
@media (max-width: 620px) {
  /* Two clearly structured compact footer groups if they don't fit side by side. */
  .site-footer.design-footer {
    height: auto;
    min-height: 65px;
    padding: 9px var(--site-ui-gutter);
    flex-wrap: wrap;
    row-gap: 7px;
  }
  .design-footer-legal, .design-footer-social { min-height: 20px; }
  .design-footer-social { margin-left: auto; }
}
@media (max-width: 380px) {
  :root {
    --site-ui-gutter: 17px;
    --site-ui-font-size: 10px;
    --menu-icon-size: 54px;
    --menu-font-size: clamp(22px, 7.1vw, 28px);
  }
  .design-menu-languages { gap: 3px; }
  .site-mobile-nav.design-menu-items .design-menu-link { gap: 9px; }
}
@media (max-height: 510px) {
  :root {
    --menu-icon-size: 48px;
    --menu-font-size: clamp(22px, 5.2dvh, 35px);
    --menu-row-height: 54px;
    --menu-row-gap: 4px;
  }
  .site-mobile-menu.design-menu-overlay { padding-block: 9px; }
  .site-mobile-nav.design-menu-items { margin: 5px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .site-mobile-menu.design-menu-overlay,
  .site-mobile-nav.design-menu-items .design-menu-link,
  .site-mobile-nav.design-menu-items .design-menu-icon img { transition:none; }
}


.design-header .design-languages a[aria-current="page"],
.site-mobile-menu .design-menu-languages a[aria-current="page"],
.site-mobile-menu .design-menu-home[aria-current="page"],
.site-mobile-menu .design-menu-bottom a[aria-current="page"],
.site-footer.design-footer a[aria-current="page"] {
  opacity: 1;
  font-weight: var(--site-ui-weight);
  text-decoration: none;
}
/* Consistent text treatment for unselected navigation, including language codes. */
.design-languages a:not([aria-current="page"]),
.design-menu-languages a:not([aria-current="page"]) { opacity: 1; font-weight: var(--site-ui-weight); }
/* Make randomized logo colours visible on the coloured library/services headers,
   without changing their normally white, high-contrast static mark. */
body.design-services .design-header-logo:is(:hover,:focus-visible) img,
body.design-library-index .design-header-logo:is(:hover,:focus-visible) img,
body.library-page .design-header-logo:is(:hover,:focus-visible) img { filter: none; }

/* [BLOCK-SHELL-04] SHELL */
.design-header-logo:focus-visible { outline: 2px solid var(--brand-orange); outline-offset: 4px; }

.site-mobile-menu.design-menu-overlay {
  transition:transform var(--foehre-motion-time, .4s) ease, opacity var(--foehre-motion-time, .3s) ease, visibility var(--foehre-motion-time, .3s) ease, background-color var(--foehre-motion-time, .23s) ease;
}
.site-mobile-nav.design-menu-items .design-menu-link {
  transition:opacity var(--foehre-motion-time, .18s) ease, visibility var(--foehre-motion-time, .18s) ease, color var(--foehre-motion-time, .15s) ease;
}
@media (hover: hover) {

  /* Hide all OTHER navigation rows; keep their places so the active row
     cannot jump. The active item stays one joint clickable logo+text. */
  .site-mobile-menu.design-menu-overlay.is-menu-item-hover .site-mobile-nav.design-menu-items .design-menu-link:not(.is-hovered-link) {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  .site-mobile-menu.design-menu-overlay.is-menu-item-hover .site-mobile-nav.design-menu-items .design-menu-link.is-hovered-link {
    opacity: 1;
    visibility: visible;
  }

  /* ABOUT, SERVICES and LIBRARY: light-grey type and logos on the coloured area. */

  /* REFERENCES only: unchanged background and dark-green logo/text. */
}
@media (prefers-reduced-motion: reduce) {
  .site-mobile-menu.design-menu-overlay,
  .site-mobile-nav.design-menu-items .design-menu-link { transition:none; }
}

.design-header-inner {
  gap: var(--menu-top-gap);
  box-sizing: border-box;
}
.site-header.design-header .design-languages {
  order: 2;
  margin-left: auto;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding: 0;
}
.site-header.design-header .design-menu-trigger {
  order: 3;
  margin: 0;
  padding: 0;
  min-width: var(--menu-top-action-width);
  width: var(--menu-top-action-width);
  flex: 0 0 var(--menu-top-action-width);
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
}
.site-mobile-menu.design-menu-overlay {
  box-sizing: border-box;
  padding: 0 var(--site-ui-gutter) clamp(18px, 3dvh, 38px);
}
.site-mobile-menu.design-menu-overlay .design-menu-top {

gap: var(--menu-top-gap);
  flex: 0 0 var(--header-height);
  width: 100%;
  height: var(--header-height);
  min-height: var(--header-height);
  padding: 0;
  margin: 0;
}
.site-mobile-menu.design-menu-overlay .design-menu-home {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  width: auto;
  min-width: 0;
  padding: 0;
  height: auto;
  color: inherit;
  font-size: var(--site-ui-font-size);
  line-height: 1.25;
  white-space: nowrap;
}
.site-mobile-menu.design-menu-overlay .design-menu-languages {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  font-size: var(--site-ui-font-size);
  line-height: 1.25;
  gap: 4px;
}
.site-mobile-menu.design-menu-overlay .design-menu-close {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex: 0 0 var(--menu-top-action-width);
  width: var(--menu-top-action-width);
  min-width: var(--menu-top-action-width);
  height: 36px;
  margin: 0;
  padding: 0;
  color: inherit;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.design-menu-close-icon {
  display: block;
  width: 28px;
  height: 28px;
  overflow: visible;
  color: inherit;
}
@media (max-width: 800px) {
  :root {
    --menu-top-action-width: 44px;
    --menu-top-gap: clamp(6px, 2vw, 10px);
  }
  .design-header-inner { gap: var(--menu-top-gap); }
  .site-header.design-header .design-menu-trigger {
    margin: 0;
    padding: 0;
    flex: 0 0 var(--menu-top-action-width);
    width: var(--menu-top-action-width);
    min-width: var(--menu-top-action-width);
    height: 44px;
  }
  .site-header.design-header .design-languages { margin-left: auto; }
  .site-mobile-menu.design-menu-overlay { padding: 0 var(--site-ui-gutter) 19px; }
  .site-mobile-menu.design-menu-overlay .design-menu-close {
    width: var(--menu-top-action-width);
    min-width: var(--menu-top-action-width);
    flex-basis: var(--menu-top-action-width);
    height: 44px;
  }
  .design-menu-close-icon { width: 26px; height: 26px; }
}
@media (max-height: 510px) {
  .site-mobile-menu.design-menu-overlay { padding-top: 0; }
}

body.design-about { background:var(--foehre-color-green); color:var(--foehre-color-paper); }
body.design-about .site-header { background:var(--foehre-color-green); color:var(--foehre-color-paper); }
body.design-about .site-header a,
body.design-about .site-header button,
body.design-about .design-languages a,
body.design-about .design-menu-trigger { color:var(--foehre-color-paper); }
body.design-about .design-header-logo img { filter: brightness(0) invert(1); }

/* [BLOCK-UEBER-UNS-01] UEBER UNS */
.design-about-main { flex:1 0 auto; background:var(--foehre-color-green); color:var(--foehre-color-paper); }
.design-about-hero { background:var(--foehre-color-green); color:var(--foehre-color-paper); }
.design-about-hero-shell { padding:clamp(95px,6vw,155px) clamp(26px,2.5vw,55px) clamp(115px,8vw,150px); }
.design-about-lead { max-width:1430px; margin-bottom:clamp(100px,7.5vw,180px); }
.design-about-lead h1 { font-size:clamp(34px,2.78vw,48px); line-height:1.16; margin:0 0 1em; text-transform:uppercase; font-weight:var(--foehre-weight-medium); letter-spacing:0; color:var(--foehre-color-paper); }
.design-about-lead p { font-size:clamp(30px,2.78vw,48px); line-height:1.2; font-weight:var(--foehre-weight-light); max-width:1375px; margin:0; color:var(--foehre-color-paper); }
.design-about-profile { display:grid; grid-template-columns:minmax(250px,351px) minmax(0,1fr); gap:clamp(30px,3vw,55px); align-items:start; min-height:530px; }
.design-photo-pending--about { min-height:460px; background:color-mix(in srgb, var(--foehre-color-paper) 11%, transparent); border:1px solid color-mix(in srgb, var(--foehre-color-paper) 22%, transparent); color:var(--foehre-color-paper); }
.design-photo-pending--about .design-image-notice { color:var(--foehre-color-paper); opacity:.86; }

/* [BLOCK-UEBER-UNS-02] UEBER UNS */
.design-about-profile-copy { display:grid; grid-template-columns:minmax(300px,440px) minmax(250px,490px); column-gap:clamp(35px,6vw,105px); row-gap:40px; color:var(--foehre-color-paper); }
.design-about-person { margin:0; max-width:500px; font-size:20px; line-height:1.15; font-weight:var(--foehre-weight-medium); text-transform:uppercase; color:var(--foehre-color-paper); }
.design-about-profile-copy address { display:flex; flex-direction:column; gap:6px; font-size:20px; line-height:1.18; font-style:normal; text-transform:uppercase; font-weight:var(--foehre-weight-medium); color:var(--foehre-color-paper); }
.design-about-profile-copy address strong { font-weight:var(--foehre-weight-medium); }
.design-about-profile-copy address a { color:var(--foehre-color-paper); text-decoration:underline; overflow-wrap:anywhere; }
.design-about-relations { background:var(--foehre-color-paper); color:var(--foehre-color-green); }
.design-about-relations-shell { padding:clamp(90px,7vw,130px) clamp(26px,2.5vw,55px) clamp(90px,7vw,130px); display:flex; flex-direction:column; gap:90px; }
.design-about-group h2 { margin:0 0 16px; font-size:clamp(34px,3vw,54px); line-height:1.02; text-transform:uppercase; font-weight:var(--foehre-weight-medium); color:var(--foehre-color-green); }
.design-about-group-lead { margin:0 0 36px; max-width:980px; font-size:clamp(18px,1.45vw,24px); line-height:1.35; color:color-mix(in srgb, var(--foehre-color-green) 92%, transparent); }
.design-brand-grid { display:grid; gap:26px; }
.design-brand-grid--partners { grid-template-columns:repeat(3,minmax(0,1fr)); }
.design-brand-grid--network { grid-template-columns:repeat(2,minmax(0,1fr)); }
.design-brand-card { min-height:210px; display:flex; flex-direction:column; justify-content:space-between; gap:26px; padding:32px 30px 28px; border:1px solid color-mix(in srgb, var(--foehre-color-green) 18%, transparent); text-decoration:none; color:var(--foehre-color-green); background:var(--foehre-color-paper); transition:transform var(--foehre-motion-time, .2s) ease, border-color var(--foehre-motion-time, .2s) ease, box-shadow var(--foehre-motion-time, .2s) ease; }
.design-brand-card:hover { transform:translateY(-3px); border-color:color-mix(in srgb, var(--foehre-color-green) 36%, transparent); box-shadow:0 12px 34px color-mix(in srgb, var(--foehre-color-green) 8%, transparent); }
.design-brand-logo { display:flex; align-items:flex-end; min-height:68px; }
.design-brand-logo--text { font-size:clamp(28px,2.3vw,40px); line-height:1; font-weight:var(--foehre-weight-light); letter-spacing:-.03em; text-transform:lowercase; }
.design-brand-logo--calas { font-weight:var(--foehre-weight-light); letter-spacing:-.05em; }
.design-brand-logo--acker { font-weight:var(--foehre-weight-light); letter-spacing:-.045em; }
.design-brand-logo--han { flex-direction:column; align-items:flex-start; gap:6px; }
.design-brand-logo--han > span { font-size:clamp(28px,2.2vw,39px); line-height:1; font-weight:var(--foehre-weight-medium); letter-spacing:-.035em; text-transform:none; }
.design-brand-logo--han small { font-size:14px; letter-spacing:.12em; text-transform:uppercase; font-weight:var(--foehre-weight-medium); }
.design-brand-logo--image img { max-width:100%; max-height:72px; width:auto; height:auto; object-fit:contain; }
.design-brand-card--network .design-brand-logo { align-items:center; }
.design-brand-meta { display:flex; flex-direction:column; gap:6px; }
.design-brand-meta strong { font-size:18px; line-height:1.15; font-weight:var(--foehre-weight-medium); }
.design-brand-meta span { font-size:15px; line-height:1.35; font-weight:var(--foehre-weight-light); }
.design-about-bottom { background:var(--foehre-color-paper); }
.design-about-contact { padding:70px var(--design-gutter); display:flex; justify-content:space-between; align-items:center; gap:20px; font-size:19px; font-weight:var(--foehre-weight-light); color:var(--foehre-color-green); }
.design-about-contact span { font-size:40px; }
/* ensure white text on colored pages */
body.design-services,
body.design-services .design-services-main,
body.design-services .design-services-head,
body.design-services .design-services-list,
body.design-services .design-service-group,
body.design-services .design-service-group h2,
body.design-services .design-service-group p,
body.design-services .design-service-group li,
body.design-library-index,
body.design-library-index .design-library-main,
body.design-library-index .design-library-intro,
body.design-library-index .design-library-list,
body.design-library-index .design-library-list > h2 { color:var(--foehre-color-paper); }
@media (max-width: 1080px) {
  .design-brand-grid--partners, .design-brand-grid--network,
.design-about-profile-copy { grid-template-columns:1fr; }
  .design-about-profile { min-height:auto; }
}
@media (max-width: 760px) {
  body.design-about .site-header { background:var(--foehre-color-green); }
  .design-about-hero-shell { padding:45px 33px 70px; }
  .design-about-lead { margin-bottom:70px; }
  .design-about-lead h1 { font-size:26px; line-height:1; margin-bottom:38px; }
  .design-about-lead p { font-size:21px; line-height:25px; font-weight:var(--foehre-weight-light); }
  .design-about-profile { display:flex; flex-direction:column; gap:28px; }
  .design-photo-pending--about { min-height:360px; }
  .design-about-profile-copy { display:contents; }
  .design-about-person { order:0; font-size:16px; line-height:19px; max-width:339px; }
  .design-about-profile-copy address { order:2; font-size:16px; line-height:19px; padding:12px 0 5px; gap:7px; }
  .design-about-relations-shell { padding:60px 26px 75px; gap:60px; }
  .design-about-group h2 { font-size:26px; }
  .design-about-group-lead { font-size:16px; margin-bottom:24px; }
  .design-brand-card { min-height:unset; padding:24px 20px 22px; gap:18px; }
  .design-brand-logo--text, .design-brand-logo--han > span { font-size:26px; }
  .design-about-contact { padding:45px 26px; font-size:16px; }
}
body.design-about .design-header-logo:is(:hover,:focus-visible) img,
body.design-services .design-header-logo:is(:hover,:focus-visible) img,
body.design-library-index .design-header-logo:is(:hover,:focus-visible) img,
body.library-page .design-header-logo:is(:hover,:focus-visible) img { filter:none; }

/* This rule follows the inverted Föhre logo on green/ochre/orange pages.
   Intentional exception: selected language is black, not orange. */
/* Icons use the same foreground as the header text. */
body:is(.design-about,.design-services,.design-library-index,.library-page) .site-header.design-header .design-menu-burger,
body:is(.design-about,.design-services,.design-library-index,.library-page) .site-header.design-header .design-menu-burger * {
  color:var(--foehre-on-color);
  border-color:var(--foehre-on-color);
  stroke:var(--foehre-on-color);
}

body.design-about .design-about-hero,
body.design-about .design-about-hero :is(h1,h2,h3,p,address,strong,span,a),
body.design-services .design-services-main,
/* Service selectors manage their own selected-label colour. Do not force
   white on spans inside service choices (desktop and mobile) via the old
   global inverted-colour rule. :where preserves original specificity. */
body.design-services .design-services-main :is(h1,h2,h3,p,li,strong,small,a),
body.design-services .design-services-main span:where(:not(.foehre-service-choice > span)),
body.design-library-index .design-library-main,
body.design-library-index .design-library-main :is(h1,h2,h3,p,li,strong,small,span),
body.library-page .library-main,
body.library-page .library-main :is(h1,h2,h3,p,li,strong,small,span) {
  color:var(--foehre-on-color);
}
/* Preserve intentional hover inversion for library index link rows. */
/* Harmonised headline sizes across homepage and colored editorial intros. */
body.design-home .design-hero h1,
body.design-services .design-services-head h1,
body.design-library-index .design-library-intro h1,
body.design-about .design-about-statement {
  font-size:var(--foehre-hero-heading-size);
  line-height:1.13;
  font-weight:var(--foehre-weight-medium);
  letter-spacing:0;
  color:var(--foehre-on-color);
}
body.design-about .design-about-statement {
  
  max-width:1340px;
  text-transform:none;
}
body.design-about .design-about-profile {
  display:grid;
  
  min-height:0;
}
body.design-about .design-about-portrait {
  width:100%;
  aspect-ratio:0.77;
  min-height:0;
  background:color-mix(in srgb, var(--foehre-color-paper) 11%, transparent);
  border:1px solid color-mix(in srgb, var(--foehre-color-paper) 20%, transparent);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:clamp(14px,1.2vw,18px);
  font-weight:var(--foehre-weight-light);
  text-transform:uppercase;
  color:var(--foehre-on-color);
}
body.design-about .design-about-profile-copy {
  flex-direction:column;
  justify-content:space-between;
  gap:55px;
  align-self:stretch;
  min-height:0;
  color:var(--foehre-on-color);
}
body.design-about .design-about-person {
  
  color:var(--foehre-on-color);
}
body.design-about .design-about-contact-info {
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
  
  font-style:normal;
  text-transform:uppercase;
  font-weight:var(--foehre-weight-light);
  color:var(--foehre-on-color);
}
body.design-about .design-about-contact-info strong { font-weight:var(--foehre-weight-medium); }
body.design-about .design-about-contact-info a { overflow-wrap:anywhere; color:inherit; text-decoration:underline; text-underline-offset:3px; }
/* Partners and network: unboxed, directly clickable marks. */

/* [BLOCK-UEBER-UNS-03] UEBER UNS */
body.design-about .design-about-relations-shell {
  padding:clamp(65px,6vw,110px) var(--design-gutter) clamp(95px,8vw,140px);
  gap:clamp(85px,8vw,150px);
}
body.design-about .design-about-group h2 {
  margin:0 0 clamp(32px,4vw,65px);
  
}
body.design-about .design-brand-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:clamp(24px,6vw,100px);
  flex-wrap:wrap;
}
body.design-about .design-partner-logo,
body.design-about .design-network-logo {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 1 auto;
  min-width:0;
  padding:15px 3px;
  background:none;
  border:0;
  box-shadow:none;
  color:var(--brand-green);
  text-decoration:none;
  transition:opacity var(--foehre-motion-time, .2s) ease, transform var(--foehre-motion-time, .2s) ease;
}
body.design-about .design-partner-logo:is(:hover,:focus-visible),
body.design-about .design-network-logo:is(:hover,:focus-visible) { transform:translateY(-3px); opacity:.68; }
body.design-about .design-partner-logo--calas { font-size:clamp(31px,3.7vw,66px); letter-spacing:-.065em; font-weight:var(--foehre-weight-medium); }
body.design-about .design-partner-logo--acker { font-size:clamp(30px,3.4vw,61px); letter-spacing:-.075em; font-weight:var(--foehre-weight-medium); }
body.design-about .design-partner-logo--han { flex-direction:column; align-items:flex-start; gap:2px; }
body.design-about .design-partner-logo--han span { font-size:clamp(44px,5.4vw,91px); letter-spacing:-.06em; line-height:.8; font-weight:var(--foehre-weight-light); }
body.design-about .design-partner-logo--han small { text-transform:uppercase; letter-spacing:.26em; font-size:clamp(11px,.9vw,15px); font-weight:var(--foehre-weight-medium); }
body.design-about .design-network-logo img { display:block; object-fit:contain; max-width:100%;  height:auto;  }
body.design-about .design-brand-row--network { justify-content:flex-start;  }
@media (max-width:800px) {
  :root { --foehre-hero-heading-size:clamp(24px,6.3vw,36px); }
  body.design-about .design-about-profile { margin-top:75px;  gap:28px; }
  body.design-about .design-about-portrait { width:min(78vw,345px); }
  body.design-about .design-about-profile-copy { display:flex; flex-direction:column; gap:45px; }
  body.design-about .design-about-person { font-size:16px; }
  body.design-about .design-about-contact-info { font-size:15px; }
  body.design-about .design-brand-row { gap:30px; justify-content:flex-start; }
  body.design-about .design-brand-row--partners { flex-direction:column; align-items:flex-start; }
  body.design-about .design-brand-row--network { flex-direction:column; align-items:flex-start; gap:30px; }
  body.design-about .design-network-logo { width:min(75vw,380px); }
  body.design-about .design-about-relations-shell { padding:65px var(--site-ui-gutter) 100px; }
}

/* [BLOCK-UEBER-UNS-04] UEBER UNS */
body.design-about .design-brand-row--partners {
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  align-items:center;
  justify-items:start;
}
body.design-about .design-partner-logo {
  display:flex;
  align-items:center;
  justify-content:flex-start;
  padding:0;
  line-height:normal;
}
body.design-about .design-partner-logo img {
  display:block;
  
  
  object-position:left center;
}
@media (max-width:800px) {
  body.design-about .design-brand-row--partners {
    grid-template-columns:1fr;
    justify-items:start;
    gap:clamp(20px,5vw,35px);
  }
  body.design-about .design-partner-logo {
    min-height:0;
    width:min(100%, 390px);
    max-width:100%;
    padding:10px 0;
  }
  body.design-about .design-partner-logo img {
    width:100%;
    max-height:120px;
  }
}

/* Active language stays orange on green/ochre pages, black only on orange library pages. */

body.design-about .design-about-hero-shell {
  padding-top: clamp(95px,6vw,155px);
  padding-bottom: clamp(90px,6vw,128px);
}
body.design-about .design-about-statement {
  margin: 0;
  
  line-height: 1.13 ;
}
body.design-about .design-about-profile {
  grid-template-columns: minmax(205px,340px) minmax(0,1fr);
  align-items: start;
  gap: clamp(24px,2.6vw,48px);
}
body.design-about .design-about-profile-copy {
  display:grid;
  grid-template-columns: minmax(290px, 560px) minmax(240px, 360px);
  grid-template-rows: auto auto 1fr;
  grid-template-areas:
    "person contact"
    "person actions"
    ". .";
  column-gap: clamp(34px,4vw,85px);
  row-gap: clamp(22px,2vw,34px);
  max-width: none;
  width: 100%;
}
body.design-about .design-about-person {
  grid-area: person;
  margin: 0;
  max-width: 560px;
  font-size: clamp(15px,1.25vw,21px);
  line-height: 1.2;
  font-weight: var(--foehre-weight-light);
  text-transform: none;
}
body.design-about .design-about-person br { display:block; }
body.design-about .design-about-cv {
  display:inline-block;
  margin-top: 10px;
  text-transform: uppercase;
  letter-spacing: .02em;
}
body.design-about .design-about-contact-info {
  grid-area: contact;
  align-self:end;
  justify-self:start;
  max-width: 100%;
  font-size: clamp(15px,1.15vw,18px);
  line-height: 1.24;
}

/* [BLOCK-UEBER-UNS-05] UEBER UNS */
body.design-about .design-about-actions {
  grid-area: actions;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap: 12px;
}

body.design-about .design-about-bottom { display:none; }
body.design-about .design-about-group h2 {
  margin-bottom: clamp(22px,2.4vw,38px);
  font-size: clamp(18px,1.65vw,27px);
  font-weight: var(--foehre-weight-light);
  line-height: 1.1;
  text-align: center;
  text-transform: uppercase;
}
body.design-about .design-brand-row--partners,
body.design-about .design-brand-row--network {
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}
body.design-about .design-brand-row--partners { gap: clamp(28px,4vw,60px); }
body.design-about .design-brand-row--network { gap: clamp(34px,5vw,90px); }
body.design-about .design-partner-logo,
body.design-about .design-network-logo { scroll-snap-align: start; }
body.design-about .design-partner-logo {
  width: auto;
  max-width: none;
  min-width: 0;
  flex: 0 0 auto;
  min-height: 0;
}
body.design-about .design-partner-logo img {
  width: auto;
  max-width: min(24vw, 315px);
  height: auto;
  max-height: 78px;
  object-fit: contain;
}
body.design-about .design-network-logo { width: auto; flex: 0 0 auto; }
body.design-about .design-network-logo img {
  max-height: 60px;
  width: auto;
  max-width: min(22vw, 240px);
}
body.design-about .design-about-portrait > span { font-size: clamp(13px,1.05vw,16px); text-transform: uppercase; }
@media (max-width: 980px) {
  body.design-about .design-about-profile-copy {
    grid-template-columns: 1fr;
    grid-template-areas:
      "person"
      "contact"
      "actions";
    row-gap: 24px;
  }
}
@media (max-width: 800px) {
  body.design-about .design-about-statement { font-size: clamp(22px,5.6vw,34px); line-height: 1.18; }
  body.design-about .design-about-profile { margin-top: 58px; }
  body.design-about .design-about-person { font-size: 16px; line-height: 1.25; max-width: none; }
  body.design-about .design-about-contact-info { font-size: 15px; }
  body.design-about .design-brand-row--partners,
  body.design-about .design-brand-row--network {
    gap: 28px;
    overflow-x: auto;
  }
  body.design-about .design-partner-logo img {
    max-width: min(64vw, 270px);
    max-height: 66px;
  }
  body.design-about .design-network-logo img {
    max-width: min(58vw, 210px);
    max-height: 52px;
  }
}

body.design-home .design-hero h1,
body.design-services .design-services-head h1,
body.design-about .design-about-statement,
body.design-library-index .design-library-intro h1 {
  font-family: var(--foehre-font-base);
  font-style: normal;
  font-weight: var(--foehre-weight-medium);
  font-stretch: normal;
  font-size: var(--foehre-hero-heading-size);
  line-height: var(--foehre-hero-heading-leading);
  letter-spacing: 0;
  text-transform: uppercase;
  text-align: left;
  width: var(--foehre-hero-display-width);
  max-width: 1050px;
  margin: 0;
  color: var(--foehre-color-paper);
  text-wrap: pretty;
}
@media (max-width: 800px) {
  :root {
    --foehre-hero-heading-size: clamp(24px, 6.3vw, 36px);
    --foehre-hero-display-width: 100%;
  }
  body.design-home .design-hero h1,
  body.design-services .design-services-head h1,
  body.design-about .design-about-statement,
  body.design-library-index .design-library-intro h1 {
    max-width: 100%;
  }
}

html { scroll-behavior:var(--foehre-motion-scroll, smooth); }
#about-profile, #design-service-list { scroll-margin-top: calc(var(--header-height) + 10px); }

/* About intro follows the Home hero: exact seven desktop lines,
   next-section links fixed at the lower right. */
body.design-about .design-about-hero-shell {
  padding:0 var(--design-gutter) clamp(65px, 7vw, 120px);
}
body.design-about .design-about-hero-stage {
  min-height:calc(100svh - var(--header-height));
  box-sizing:border-box;
  padding:clamp(90px,12vh,155px) 0 clamp(62px,9vh,115px);
  display:flex;
  
  justify-content:space-between;
  gap:clamp(25px,4vw,65px);
}
body.design-about .design-about-statement {
  flex:1 1 auto;
  min-width:0;
  width:auto;
  max-width:none ;
  font-size:var(--foehre-hero-heading-size);
  line-height:var(--foehre-hero-heading-leading);
  text-wrap:unset;
}
body.design-about .design-about-line {
  display:block;
  white-space:nowrap;
}
body.design-about .design-about-profile {
  margin-top:0;
  padding-top:clamp(55px,8vw,130px);
}
/* Services: same cross-page navigation position as on Home/About. */
body.design-services .design-services-head {
  min-height:calc(100svh - var(--header-height));
  box-sizing:border-box;
  align-items:flex-end;
  justify-content:space-between;
  gap:clamp(25px,4vw,65px);
}
/* Footer expansion is created only for About by site.js. */
.site-footer.design-footer.design-footer--about {
  height:auto;
  min-height:var(--site-footer-height);
  padding:0;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:flex-end;
  gap:0;
  background:var(--foehre-color-paper);
  color:var(--foehre-color-green);
}
.design-footer--about .design-footer-about-control {
  width:100%;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  box-sizing:border-box;
  padding:clamp(18px,3vw,35px) var(--site-ui-gutter);
}
.design-footer--about .design-footer-expand-toggle {
  appearance:none;
  background:transparent;
  border:0;
  display:inline-flex;
  align-items:center;
  gap:clamp(15px,2vw,30px);
  cursor:pointer;
  font-family:var(--site-ui-font);
  text-transform:uppercase;
  color:var(--foehre-color-green);
  font-weight:var(--foehre-weight-light);
  font-size:clamp(14px,1.15vw,20px);
  padding:8px 0;
}
.design-footer-expand-arrow { font-size:1.8em; line-height:1; transition:transform var(--foehre-motion-time, .3s) ease; }
.design-footer-expand-toggle[aria-expanded="true"] .design-footer-expand-arrow { transform:rotate(180deg); }
.design-footer--about .design-about-footer-panel {
  display:grid;
  grid-template-rows:0fr;
  opacity:0;
  pointer-events:none;
  transition:grid-template-rows var(--foehre-motion-time, .48s) ease,opacity var(--foehre-motion-time, .34s) ease;
}
.design-footer--about .design-about-footer-panel.is-expanded {
  grid-template-rows:1fr;
  opacity:1;
  pointer-events:auto;
}
.design-footer--about .design-about-footer-inner {
  overflow:hidden;
  min-height:0;
}
.design-footer--about .design-about-relations { background:transparent; }
.design-footer--about .design-about-relations-shell {
  padding:clamp(15px,3vw,45px) var(--site-ui-gutter) clamp(45px,5vw,75px);
  gap:clamp(45px,5vw,85px);
}
.design-footer--about .design-footer-row {
  width:100%;
  min-height:var(--site-footer-height);
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:clamp(12px,2.5vw,38px);
  padding:0 var(--site-ui-gutter);
}
.design-footer--about .design-footer-row .design-footer-social { margin-left:auto; }
@media (max-width:1100px) {
  body.design-about .design-about-hero-stage,
  body.design-services .design-services-head { flex-direction:column; align-items:stretch; justify-content:flex-end; gap:30px; }
  
  body.design-about .design-about-statement { width:100%; }
}
@media (max-width:800px) {
  body.design-about .design-about-hero-stage { padding:65px 0 60px; }
  body.design-about .design-about-line { display:inline; white-space:normal; }
  
  
  body.design-about .design-about-profile { padding-top:55px; }
}
@media (max-width:620px) {
  .design-footer--about .design-footer-row { min-height:65px; padding:9px var(--site-ui-gutter); flex-wrap:wrap; row-gap:7px; }
  .design-footer--about .design-footer-about-control { padding:13px var(--site-ui-gutter); }
}
@media (prefers-reduced-motion:reduce) {
  .design-footer--about .design-about-footer-panel,
  .design-footer-expand-arrow { transition:none; }
}

@media (max-width:800px) {
  body.design-about .design-about-profile {
    display:grid;
    grid-template-columns:minmax(0,1fr);
  }
  body.design-about .design-about-profile-copy {
    min-width:0;
    width:100%;
    grid-template-columns:minmax(0,1fr);
  }
}

@media (min-width: 801px) {
  /* Chapter one fills the same available screen height as the start page. */
  body.design-about .design-about-hero-shell { padding:0 var(--site-ui-gutter); }
  body.design-about .design-about-hero-stage,
  body.design-services .design-services-head {
    position:relative;
    box-sizing:border-box;
    height: max(430px, calc(100svh - var(--header-height)));
    min-height: max(430px, calc(100svh - var(--header-height)));
    padding:clamp(66px, 9svh, 140px) 0 var(--foehre-journey-home-bottom);
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    align-items:flex-start;
  }
  body.design-services .design-services-head {
    padding-left:var(--site-ui-gutter);
    padding-right:var(--site-ui-gutter);
  }
  /* The next-page row is the same position as Home's Über uns + arrow. */

body.design-about .design-about-statement,
body.design-services .design-services-head h1 {
    flex:0 1 auto;
    width:min(72%,1050px);
    max-width:1050px;
    margin:0;
  }
  /* Chapter two is its own full-height screen. Taller real content can grow. */
  body.design-about .design-about-profile {
    box-sizing:border-box;
    min-height:max(430px,calc(100svh - var(--header-height)));
    padding:clamp(60px,8svh,110px) 0 clamp(65px,8svh,120px);
    margin:0;
    align-items:center;
    scroll-margin-top:var(--header-height);
  }
  body.design-services .design-services-list {
    box-sizing:border-box;
    min-height:max(430px,calc(100svh - var(--header-height)));
    padding:clamp(60px,8svh,110px) max(var(--site-ui-gutter), calc((100vw - 1300px)/2)) clamp(65px,8svh,110px);
    display:flex;
    flex-direction:column;
    justify-content:center;
    scroll-margin-top:var(--header-height);
  }
  body.design-services .design-service-grid { row-gap:clamp(38px,4vw,70px); }
  body.design-services .design-service-next { margin-top:clamp(48px,7svh,95px); }
}
@media (min-width:801px) and (max-width:1250px), (min-width:801px) and (max-height:700px) {
  /* Medium widths/short windows: avoid overlap; keep next/back/down in order. */
  body.design-about .design-about-hero-stage,
  body.design-services .design-services-head { height:auto; min-height:calc(100svh - var(--header-height)); gap:24px; }
  
  body.design-about .design-about-statement,
  body.design-services .design-services-head h1 { width:100%; max-width:1050px; }
  body.design-about .design-about-line { display:inline; white-space:normal; }
  body.design-about .design-about-line::after { content:" "; }
}
@media (max-width:800px) {
  body.design-about .design-about-hero-shell { padding:0 var(--site-ui-gutter) 0; }
  body.design-about .design-about-hero-stage,
  body.design-services .design-services-head {
    position:relative;
    box-sizing:border-box;
    min-height:max(430px,calc(100svh - var(--header-height)));
    height:auto;
    padding:55px 0 clamp(38px,5svh,65px);
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    align-items:stretch;
    gap:32px;
  }
  body.design-services .design-services-head { padding-left:var(--site-ui-gutter); padding-right:var(--site-ui-gutter); }

body.design-about .design-about-statement { width:100%;  }
  body.design-about .design-about-profile {
    box-sizing:border-box;
    min-height:calc(100svh - var(--header-height));
    padding:clamp(45px,6svh,75px) 0 clamp(55px,7svh,90px);
    margin:0;
    align-content:center;
  }
  body.design-services .design-services-list { min-height:calc(100svh - var(--header-height)); scroll-margin-top:var(--header-height); }

body.design-about .design-about-statement,
  body.design-about .design-about-line {
    overflow-wrap:anywhere;
    word-break:normal;
    hyphens:auto;
  }
}
/* Leave enough scroll room for anchored chapter two to sit below the fixed header. */
@media (min-width:801px) {
  body.design-about .design-about-profile,
  body.design-services .design-services-list {
    min-height:max(430px,100svh);
  }
}
/* One, not two, header offsets for chapter anchors (global scroll-padding
   and old anchor scroll-margin were being added together). */
html:has(body.design-about), html:has(body.design-services) {
  scroll-padding-top:var(--header-height);
}
body.design-about #about-profile,
body.design-services #design-service-list { scroll-margin-top:0; }

/* Use the actual, simple arrows instead of oversized special arrow glyphs. */

@media (min-width:801px) {
  /* Home's arrow establishes the shared location. */
  body.design-home .design-hero-content {
    padding-bottom:var(--foehre-step-nav-bottom);
  }
  
  /* Same position as Home, with a back link above and detail link below. */
  body.design-about .design-about-hero-stage,
  body.design-services .design-services-head {
    padding-bottom:var(--foehre-step-nav-bottom);
  }
  /* [MEDIA-GEBUENDELT] Geometrie der Kapitel-Pfeile; Desktop-CSS bleibt in gleicher Reihenfolge. */

body.design-about .design-about-statement,
  body.design-services .design-services-head > h1 {
    transform:translateY(var(--foehre-step-lift));
  }
}
@media (max-width:800px) {

:root { --foehre-step-arrow-size:21px; }
}
/* Keep the fixed seven-line typographic composition on wide screens. On
   medium desktop widths let the words wrap naturally before they can run
   beneath the three navigation links on the right. */
@media (min-width:801px) and (max-width:1399px) {
  body.design-about .design-about-line { display:inline; white-space:normal; }
  body.design-about .design-about-line::after { content:" "; white-space:pre; }
}
/* The small arrow artwork also applies to other editorial calls to action,
   including contact/next and the library's down-link. */
.design-inline-arrow > span[aria-hidden="true"] {
  font-family:var(--foehre-font-base) ;
  font-size:var(--foehre-step-arrow-size) ;
  line-height:1 ;
  font-weight:var(--foehre-weight-light) ;
}

@media (min-width:801px) {
  body.design-library-index .design-library-intro {
    position:relative;
    box-sizing:border-box;
    height:max(430px,calc(100svh - var(--header-height)));
    min-height:max(430px,calc(100svh - var(--header-height)));
    padding:clamp(66px,9svh,140px) var(--site-ui-gutter) var(--foehre-step-nav-bottom);
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    align-items:flex-start;
    gap:0;
  }
  body.design-library-index .design-library-intro > h1 {
    flex:0 1 auto;
    width:min(72%,1050px);
    max-width:1050px;
    margin:0;
    transform:translateY(var(--foehre-step-lift));
  }

body.design-library-index .design-library-list {
    box-sizing:border-box;
    min-height:max(430px,calc(100svh - var(--header-height)));
    display:flex;
    flex-direction:column;
    justify-content:center;
    scroll-margin-top:0;
  }
}
/* All editorial downward links use the same arrow geometry, including Library. */


html:has(body.design-library-index) { scroll-padding-top:var(--header-height); }
body.design-library-index #library-topics { scroll-margin-top:0; }

/* The bottom About arrow aligns with the last line of headline. Both Home's
   onward link and every chapter's onward link stay on the common anchor. */


/* Library introduction behaves like Services / About on touch screens. */
@media (max-width:800px) {
  body.design-library-index .design-library-intro {
    position:relative;
    box-sizing:border-box;
    height:auto;
    min-height:max(430px,calc(100svh - var(--header-height)));
    padding:55px var(--site-ui-gutter) clamp(38px,5svh,65px);
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    align-items:stretch;
    gap:32px;
  }
  body.design-library-index .design-library-intro > h1 {
    width:100%;
    max-width:100%;
    margin:0;
  }

body.design-library-index .design-library-list { scroll-margin-top:0; }
}
@media (min-width:801px) and (max-width:1250px), (min-width:801px) and (max-height:700px) {
  body.design-library-index .design-library-intro {
    height:auto;
    min-height:calc(100svh - var(--header-height));
    gap:24px;
  }
  
  body.design-library-index .design-library-intro > h1 {
    width:100%;
    max-width:1050px;
    transform:none;
  }
}


@media (min-width:1400px) and (min-height:701px) {
  body.design-about .design-about-statement {
    transform:translateY(calc(var(--foehre-step-lift) - 22px));
  }
}

/* Align mobile Home's onward action with the right-aligned chapter controls,
   but let vertical position respond naturally to available content space. */

@media (min-width:801px) and (min-height:701px) {
  
  body.design-home .design-hero-content > h1,
  body.design-about .design-about-hero-stage > .design-about-statement {
    transform:translateY(var(--foehre-step-lift));
  }
  
  
  /* On medium desktops the old Library fallback put its entire heading and
     journey much higher than the other stages. Keep the common anchor as
     long as the full-height layout has sufficient vertical room. */
  body.design-library-index .design-library-intro {
    height:max(430px, calc(100svh - var(--header-height)));
    min-height:max(430px, calc(100svh - var(--header-height)));
    justify-content:flex-end;
    gap:0;
    padding:clamp(66px,9svh,140px) var(--site-ui-gutter) var(--foehre-step-nav-bottom);
  }
  body.design-library-index .design-library-intro > h1 {
    flex:0 1 auto;
    width:min(72%,1050px);
    max-width:1050px;
    transform:translateY(var(--foehre-step-lift));
  }
  
}

body.design-about #about-top { scroll-margin-top:0; }
body.design-about .design-about-profile {
  position:relative;
  isolation:isolate;
}
body.design-about .design-about-contact-info strong { display:none; }
body.design-about .design-about-contact-button {
  display:inline-flex;
  gap:14px;
  align-items:center;
  justify-content:space-between;
  align-self:flex-start;
  width:max-content;
  max-width:100%;
  border:1px solid currentColor;
  padding:12px 16px;
  margin:0 0 16px;
  text-decoration:none;
  line-height:1.15;
  font-family:var(--site-ui-font);
  font-weight:var(--foehre-weight-light);
  font-size:clamp(14px,1.05vw,18px);
  text-transform:uppercase;
  color:var(--foehre-on-color);
  transition:color var(--foehre-motion-time, .2s) ease,border-color var(--foehre-motion-time, .2s) ease,background-color var(--foehre-motion-time, .2s) ease;
}
body.design-about .design-about-contact-button > span {
  font-size:var(--foehre-step-arrow-size);
  line-height:1;
  font-weight:var(--foehre-weight-light);
}
/* The fixed 3-link journey is anchored to the same lower-right corner as
   chapter one. Portrait and contact details stay on the left. */
@media (min-width:801px) {
  body.design-about #about-profile {
    box-sizing:border-box;
    height:calc(100svh - var(--header-height));
    min-height:calc(100svh - var(--header-height));
    padding:clamp(42px,6svh,90px) 0 clamp(45px,6svh,95px);
    align-items:stretch;
    scroll-margin-top:0;
  }
  body.design-about #about-profile .design-about-portrait { align-self:center; }
  body.design-about #about-profile .design-about-profile-copy {
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    min-height:0;
    padding:clamp(12px,2.2svh,26px) 0 clamp(12px,2svh,26px);
    width:min(100%,600px);
    max-width:calc(100% - 260px);
    gap:20px;
  }
  body.design-about #about-profile .design-about-person,
  body.design-about #about-profile .design-about-contact-info { width:100%; max-width:100%; }

}
@media (min-width:801px) and (max-width:1250px), (min-width:801px) and (max-height:690px) {
  body.design-about #about-profile { height:auto; min-height:calc(100svh - var(--header-height)); }
  body.design-about #about-profile .design-about-profile-copy { max-width:100%; }
  
}
@media (max-width:800px) {
  body.design-about #about-profile { min-height:0; height:auto; }
  body.design-about #about-profile .design-about-profile-copy {
    display:flex;
    flex-direction:column;
    gap:25px;
    width:100%;
    min-width:0;
  }

}
/* Opening the About-only footer disclosure reveals a real next chapter,
   while the regular footer dimensions on all other pages remain unchanged. */
body.design-about .design-footer--about .design-about-footer-panel.is-expanded .design-about-relations {
  min-height:calc(100svh - var(--header-height));
  display:flex;
  flex-direction:column;
  justify-content:center;
}
body.design-about .design-about-footer-panel { scroll-margin-top:var(--header-height); }

/* Every clickable text control highlights orange on hover/focus; on the
   orange library pages it highlights black. Existing menu-item image/theme
   animations are preserved, and logo artwork is never recolored. */
body.design-about .design-about-hero .design-about-contact-button:is(:hover,:focus-visible) {
  color:var(--brand-orange);
  border-color:var(--brand-orange);
}
/* Keep selected language legible and the previously agreed navigation hovers. */

/* Portrait and biography share the same upper baseline on wide screens. */
@media (min-width:1251px) and (min-height:691px) {
  body.design-about #about-profile .design-about-profile-copy {
    align-self:center;
    box-sizing:border-box;
    height:min(442px, calc(100svh - var(--header-height) - 110px));
    padding:0;
  }
}
@media (max-width:800px) {
  body.design-about #about-profile .design-about-contact-info {
    align-self:flex-start;
    justify-self:start;
    width:100%;
    margin-left:0;
  }
}

html:has(body:is(.design-about,.design-services,.design-library-index,.references-page)) {
  scroll-padding-top:var(--header-height);
}
body.design-about #about-partners,
body.design-about #about-profile,
body.design-services #design-service-list,
body.design-library-index #library-topics,
body.design-services #services-top,
body.design-library-index #library-top,
body.design-about #about-top {
  scroll-margin-top:0;
}
/* The introductory statement has four precisely controlled lines on large screens. */

/* [BLOCK-UEBER-UNS-06] UEBER UNS */
body.design-about .design-about-statement { max-width:calc(100% - 285px); }
body.design-about .design-about-statement .design-about-line { display:block; white-space:nowrap; }
body.design-about .design-about-hero-stage { align-items:flex-end; }
/* Biography chapter: second sentence is here, not in the hero. */
body.design-about #about-profile .design-profile-preface {
  grid-column:1/-1;
  width:min(100%,1040px);
  margin:0 0 20px;
  font-family:var(--site-ui-font);
  font-size:clamp(19px,1.7vw,27px);
  font-weight:var(--foehre-weight-light);
  line-height:1.25;
  color:var(--foehre-on-color);
}
body.design-about #about-profile { grid-template-rows:auto 1fr; align-content:center; }
body.design-about #about-profile .design-about-portrait { grid-column:1;grid-row:2; }
body.design-about #about-profile .design-about-profile-copy { grid-column:2;grid-row:2; }


body.design-about #about-partners.foehre-full-chapter {
  position:relative;
  box-sizing:border-box;
  min-height:var(--foehre-chapter-screen);
  padding:clamp(42px,6svh,90px) var(--site-ui-gutter) clamp(115px,12svh,160px);
  display:flex;
  flex-direction:column;
  justify-content:center;
}
body.design-about #about-partners .design-about-relations-shell {
  width:100%;
  box-sizing:border-box;
  padding:0;
  gap:clamp(48px,6svh,90px);
}
body.design-about #about-partners .design-about-group h2 {
  margin:0 0 22px;
  color:var(--brand-green);
}
/* Logo sizes are measured by the visible mark, not the padded source canvas. */
body.design-about #about-partners .design-brand-row--partners,
body.design-about #about-partners .design-brand-row--network {
  display:flex;
  justify-content:center;
  align-items:center;
  flex-direction:row;
  flex-wrap:nowrap;
  gap:clamp(26px,4vw,72px);
  max-width:1220px;
  margin-inline:auto;
  width:100%;
  overflow-x:auto;
  scrollbar-width:thin;
  scroll-snap-type:x proximity;
}
body.design-about #about-partners .design-partner-logo,
body.design-about #about-partners .design-network-logo {
  box-sizing:border-box;
  flex:0 0 auto;
  display:flex;
  justify-content:center;
  align-items:center;
  width:clamp(170px,19vw,270px);
  height:clamp(70px,7vw,100px);
  margin:0;
  padding:5px 0;
  scroll-snap-align:center;
}
body.design-about #about-partners .design-partner-logo img,
body.design-about #about-partners .design-network-logo img {
  display:block;
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  object-position:center;
}
/* Navigation is an identical, simple two-row set on each detail chapter. */

body.design-services #design-service-list,
body.design-library-index #library-topics {
  position:relative;
  box-sizing:border-box;
  min-height:var(--foehre-chapter-screen);
  padding-bottom:clamp(132px,16svh,195px);
}

/* References: one and only one Back link in the first screen. */
body.references-page .page-wrap { position:relative; min-height:var(--foehre-chapter-screen); }

body.design-services .design-services-head > h1 { width:min(72%,1050px); }
@media (min-width:801px) and (max-width:1399px) {
  body.design-about .design-about-statement { width:min(76%,1050px); }
  body.design-about .design-about-statement .design-about-line { display:inline; white-space:normal; }
  body.design-about .design-about-statement .design-about-line::after { content:" "; white-space:pre; }
}
@media (max-width:800px) {
  body.design-about .design-about-statement { max-width:100%; }
  body.design-about .design-about-statement .design-about-line { display:inline;white-space:normal; }
  body.design-about #about-profile { display:flex; flex-direction:column; gap:25px; }
  body.design-about #about-profile .design-profile-preface { order:0; font-size:18px; margin-bottom:4px; }
  body.design-about #about-profile .design-about-portrait { order:1; }
  body.design-about #about-profile .design-about-profile-copy { order:2; }
  
  body.design-about #about-partners { padding:65px var(--site-ui-gutter) 135px; }
  body.design-about #about-partners .design-about-relations-shell { gap:50px; }
  body.design-about #about-partners .design-brand-row--partners,
  body.design-about #about-partners .design-brand-row--network {
     
     overflow-x:auto;
  }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
}

@media (min-width:1400px) {
  body.design-about .design-about-hero-stage {
    align-items:flex-start;
  }
  body.design-about .design-about-statement {
    align-self:flex-start;
    width: min(100%, 1320px);
    max-width: min(100%, 1320px);
    margin-left:0;
    margin-right:0;
  }
}
/* Partners and standard footer together fill the final desktop screen. */
@media (min-width:801px) and (min-height:701px) {
  body.design-about #about-partners.foehre-full-chapter {
    min-height:max(520px,calc(100svh - var(--header-height) - var(--site-footer-height)));
  }
}

body.design-services #design-service-list .design-services-detail-heading {
  color:var(--foehre-on-color);
  font-family:var(--site-ui-font);
  font-weight:var(--foehre-weight-medium);
  text-transform:uppercase;
  padding:0;
}
/* Keep a clear right-hand area for the navigation without changing card text styles. */
@media (min-width:801px) and (min-height:701px) {
  body.design-services .design-services-head > h1 {
    font-size:var(--foehre-hero-heading-size);
    line-height:1.13;
    text-transform:uppercase;
  }
  
  
  /* Position relative to the first visible chapter, not the total height of long lists. */
  body.design-services #design-service-list,
  body.design-library-index #library-topics { position:relative; }
}
@media (max-width:800px), (max-height:700px) {
  body.design-services #design-service-list .design-services-detail-heading {
    font-size:clamp(24px,6vw,36px);
  }
  
  
}

/* The base surface may be green, ochre or grey; the same rules decide hover/current. */
body { --foehre-header-accent:var(--brand-orange); }
body:is(.design-library-index,.library-page) { --foehre-header-accent:var(--foehre-color-black); }
.site-header.design-header .design-languages a[aria-current="page"],
.site-header.design-header .design-languages a[aria-current="page"]:is(:hover,:focus-visible),
.site-header.design-header .design-languages a:is(:hover,:focus-visible),
.site-header.design-header .design-menu-trigger:is(:hover,:focus-visible),
.site-mobile-menu.design-menu-overlay .design-menu-languages a[aria-current="page"],
.site-mobile-menu.design-menu-overlay .design-menu-languages a[aria-current="page"]:is(:hover,:focus-visible),
.site-mobile-menu.design-menu-overlay .design-menu-languages a:is(:hover,:focus-visible),
.site-mobile-menu.design-menu-overlay .design-menu-home:is(:hover,:focus-visible),
.site-mobile-menu.design-menu-overlay .design-menu-bottom a:is(:hover,:focus-visible),
.site-mobile-menu.design-menu-overlay .design-menu-close:is(:hover,:focus-visible) {
  opacity:1;
  text-decoration:none;
}

/* [BLOCK-REFERENZEN-01] REFERENZEN */
body.references-page .filters {
  display:block;
  
  max-width:100% ;
  padding:0;
  text-align:left;
}
body.references-page .filter-rows {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:5px ;
  width:auto;
}
body.references-page .filter-row {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:4px ;
  margin:0;
}
body.references-page .filter-chip.filter-option {
  appearance:none;
  border:1px solid var(--foehre-color-green);
  border-radius:999px;
  padding:3px 7px;
  min-height:0;
  height:auto;
  background:transparent;
  color:var(--foehre-color-green);
  font:300 clamp(9px,.66vw,11px)/1.05 var(--foehre-font-base);
  letter-spacing:0;
  text-transform:uppercase;
  box-shadow:none;
  cursor:pointer;
}
body.references-page .reference-visually-hidden {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}
body.references-page .reference-filter-reset {
  display:block;
  border:0;
  background:none;
  color:var(--foehre-color-green);
  font:300 10px/1.2 var(--foehre-font-base);
  text-transform:uppercase;
  padding:0;
  opacity:.72;
  cursor:pointer;
}
body.references-page .reference-filter-reset:is(:hover,:focus-visible) { color:var(--brand-orange); opacity:1; }
body.references-page .reference-card,
body.references-page .reference-card:not([hidden]) {
  display:flex;
  flex-direction:column;
  min-width:0;
  gap:0;
  margin:0;
  padding:0;
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  color:var(--foehre-color-green);
  transform:none;
}
body.references-page .reference-card[hidden] { display:none; }
body.references-page .reference-card > img {
  order:0;
  display:block;
  
  height:auto ;
  
  object-position:center;
  margin:0 0 13px;
  border:0;
  border-radius:0;
  transform:none;
  transition:none;
}
body.references-page .reference-card .reference-title { order:1; margin:0 0 15px; }
body.references-page .reference-card .reference-title h3 {
  margin:0;
  padding:0;
  color:var(--foehre-color-green);
  font:500 clamp(15px,1.25vw,19px)/1.1 var(--foehre-font-base);
  text-transform:uppercase;
}
body.references-page .reference-card .reference-facts {
  
  display:flex;
  flex-direction:column;
  margin:0;
  padding:0;
}
body.references-page .reference-fact {
  display:grid;
  grid-template-columns:minmax(74px,27%) minmax(0,1fr);
  align-items:start;
}
body.references-page .reference-fact dt,
body.references-page .reference-fact dd {
  margin:0;
  padding:0;
  color:var(--foehre-color-green);
  font-family:var(--foehre-font-base);
  text-transform:uppercase;
  letter-spacing:0;
}
body.references-page .reference-fact dt { font-weight:var(--foehre-weight-medium); }
body.references-page .reference-fact dd { font-weight:var(--foehre-weight-light); }
body.references-page .reference-fact dd span { display:block; }
body.references-page .reference-card .reference-credit {
  order:3;
  margin:12px 0 0;
  padding:0;
  color:var(--foehre-color-green);
  font:300 11px/1.2 var(--foehre-font-base);
}
body.references-page .reference-card .reference-credit a { color:inherit; text-decoration:underline; }
body.references-page .reference-card .reference-credit a:is(:hover,:focus-visible) { color:var(--brand-orange); }
@media (max-width:760px) {
  body.references-page .content {
    width:calc(100% - 2 * var(--site-ui-gutter));
    padding-top:75px;
  }
  body.references-page .filters { max-width:100%; margin-bottom:48px; }
  body.references-page .reference-grid { grid-template-columns:1fr; row-gap:52px; }
  body.references-page .filter-chip.filter-option { font-size:10px; }
  body.references-page .reference-fact { grid-template-columns:minmax(78px,30%) minmax(0,1fr); }
  body.references-page .reference-card .reference-title h3 { font-size:18px; }
  body.references-page .reference-fact dt,
  body.references-page .reference-fact dd { font-size:12px; }
}


body[class] .site-header.design-header .design-languages a[aria-current="page"],
body[class] .site-header.design-header .design-languages a[aria-current="page"]:is(:hover,:focus-visible),
body[class] .site-header.design-header .design-languages a:is(:hover,:focus-visible),
body[class] .site-header.design-header .design-menu-trigger:is(:hover,:focus-visible) {
  opacity:1;
}
/* Compact inline filter chips from the supplied reference PDF, never full-width controls. */

/* [BLOCK-REFERENZEN-02] REFERENZEN */
body.references-page .filters .filter-rows .filter-row {
  display:flex;
  width:auto;
  max-width:100%;
  justify-content:flex-start;
}
body.references-page .filters .filter-rows .filter-row .filter-chip.filter-option {
  display:inline-flex;
  flex:0 0 auto;
  width:auto;
  max-width:none;
  min-width:0;
  white-space:nowrap;
}

/* Keep the mobile sticky Back control aligned to the site's right gutter;
   the reference page-wrap itself contributes 16px horizontal inset. */

/* The reference back control uses exactly the same first-row anchor as
   the About, Services and Library journey controls. Sticky while scrolling. */

body.references-page .filters .filter-rows .filter-row .filter-chip.filter-option {
  font:400 clamp(12px,.89vw,14px)/1.12 var(--foehre-font-base);
  border-radius:999px;
  
}
body.references-page .reference-filter-reset {
  margin:5px 0 0;
  font-size:11px;
  line-height:1.1;
}
body.references-page .reference-card > img {
  height:clamp(190px,29svh,310px);
  max-height:310px;
  aspect-ratio:auto;
  width:100%;
  object-fit:cover;
  margin-bottom:11px;
}
/* One baseline beneath the photo for project name (left) and client (right). */
body.references-page .reference-card .reference-title-row {
  display:flex;
  flex-direction:row;
  align-items:baseline;
  justify-content:space-between;
  gap:15px;
  min-width:0;
  margin:0 0 11px;
  order:1;
}
body.references-page .reference-card .reference-title-row .reference-title {
  order:unset;
  margin:0;
  min-width:0;
}
body.references-page .reference-card .reference-title-row .reference-title h3 {
  font:500 clamp(16px,1.25vw,19px)/1.12 var(--foehre-font-base);
  margin:0;
}
body.references-page .reference-card .reference-title-row .reference-credit {
  order:unset;
  margin:0;
  padding:0;
  text-align:right;
  flex-shrink:1;
  font:300 clamp(12px,.89vw,14px)/1.16 var(--foehre-font-base);
  color:var(--foehre-color-green);
  white-space:normal;
}
body.references-page .reference-card .reference-title-row .reference-credit a {
  text-decoration:underline;
  color:inherit;
}
body.references-page .reference-card .reference-title-row .reference-credit a:is(:hover,:focus-visible) {
  color:var(--brand-orange);
}
body.references-page .reference-card .reference-facts {
  order:2;
  gap:5px;
}
body.references-page .reference-fact { gap:9px; }
body.references-page .reference-fact dt,
body.references-page .reference-fact dd {
  font-size:clamp(11px,.87vw,13px);
  line-height:1.17;
}
/* Keep mobile readable, without pretending both complete photographs will fit
   above the fold on a phone. */
@media (max-width:800px) {
  body.references-page .reference-card > img {
    height:clamp(180px,52vw,265px);
    margin-bottom:10px;
  }
  body.references-page .reference-card .reference-title-row {
    gap:8px;
    margin-bottom:12px;
  }
  body.references-page .reference-card .reference-title-row .reference-title h3 { font-size:17px; }
  body.references-page .reference-card .reference-title-row .reference-credit,
body.references-page .reference-fact dt,
  body.references-page .reference-fact dd { font-size:12px; }
}


@media (min-width:1200px) {
  body.references-page .reference-grid { padding-right:clamp(62px,6vw,100px); }
}
/* Compact viewports: keep Back accessible in the lower-right navigation region,
   not over the filter controls beneath the header. */

body.references-page .content {
  --reference-gutter: clamp(30px, 6.2vw, 118px);
  box-sizing: border-box;
  width: calc(100% - 2 * var(--reference-gutter));
  max-width: none;
  margin-inline: var(--reference-gutter);
  padding-top: clamp(40px, 5.5svh, 66px);
  padding-bottom: clamp(75px, 8vw, 130px);
}

body.references-page .filters {
  width:max-content;
  max-width:calc(100% - 105px);
  margin:0 0 clamp(50px, 6.5svh, 72px);
}
body.references-page .filter-rows,
body.references-page .filter-row { gap:5px; }
body.references-page .filters .filter-rows .filter-row .filter-chip.filter-option {
  font-size: clamp(10px, .715vw, 11.2px);
  line-height: 1.12;
}
body.references-page .reference-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:var(--reference-gutter);
  row-gap:clamp(70px, 7vw, 112px);
  width:100%;
  max-width:none;
  padding:0;
  box-sizing:border-box;
  align-items:start;
}
body.references-page .reference-grid .reference-card {
  box-sizing:border-box;
  min-width:0;
  max-width:none;
  width:100%;
  justify-self:stretch;
}

body.references-page .reference-grid .reference-card > img {
  display:block;
  box-sizing:border-box;
  width:100%;
  height:auto;
  max-height:none;
  aspect-ratio:1.62;
  object-fit:cover;
  object-position:center;
  
}
@media (max-width:800px) {
  body.references-page .content {
    --reference-gutter:clamp(22px, 6.2vw, 35px);
    width:calc(100% - 2 * var(--reference-gutter));
    margin-inline:var(--reference-gutter);
    padding-top:clamp(32px, 4.5svh, 44px);
  }
  body.references-page .filters {
    max-width:100%;
    margin-bottom:clamp(42px, 5.5svh, 55px);
  }
  body.references-page .filters .filter-rows .filter-row .filter-chip.filter-option {
    font-size:10px;
    
    
  }
  body.references-page .reference-grid {
    grid-template-columns:minmax(0,1fr);
    column-gap:0;
    row-gap:clamp(46px, 8vw, 65px);
  }
  body.references-page .reference-grid .reference-card > img {
    aspect-ratio:1.62;
    height:auto;
    max-height:none;
    object-fit:cover;
  }
}

body.references-page .filters { --reference-chip-green:var(--foehre-color-green); }
body.references-page .filters .filter-chip.filter-option::after,
body.references-page .filters .filter-chip.filter-option::before {
  content:none;
  display:none;
}
body.references-page .filters .filter-chip.filter-option {
  text-decoration:none;
  border:1px solid var(--reference-chip-green);
  background:transparent;
  color:var(--reference-chip-green);
  box-shadow:none;
  transition:background-color var(--foehre-motion-time, 150ms) ease,color var(--foehre-motion-time, 150ms) ease;
}
body.references-page .filters .filter-chip.filter-option:is(:hover,:focus-visible,[aria-pressed="true"]) {
  background:var(--reference-chip-green);
  color:var(--brand-grey);
  border-color:var(--reference-chip-green);
  text-decoration:none;
}
body.references-page .filters .filter-chip.filter-option:focus-visible {
  outline:2px solid var(--reference-chip-green);
  outline-offset:2px;
}
/* On desktop, this additional white space reserves room for the
   sticky ZURÜCK label without placing it on the right-hand images.
   On smaller screens the existing single-column margins are retained. */
@media (min-width:801px) {
  body.references-page .content {
    --reference-gutter:clamp(88px,8.5vw,165px);
  }

body.design-library-index[data-lang="de"] .design-library-intro h1 .design-library-heading-line {
    display:block;
    white-space:nowrap;
  }
}
@media (max-width:800px) {
  body.design-library-index[data-lang="de"] .design-library-intro h1 .design-library-heading-line {
    display:inline;
    white-space:normal;
  }
}

/* Preserve space for the fixed right-side journey on narrow desktop widths. */
@media (min-width:801px) and (max-width:960px) {
  body.design-library-index[data-lang="de"] .design-library-intro h1 {
    font-size:clamp(24px,3vw,28px);
  }
}

/* [BLOCK-LEISTUNGEN-01] LEISTUNGEN */
body.design-services #design-service-list {
  --foehre-active-ocker:var(--foehre-color-ochre);
}
body.design-services .foehre-service-tile {

gap:6px;
  
  transition:border-color var(--foehre-motion-time, .17s) ease, background-color var(--foehre-motion-time, .17s) ease;
}
body.design-services .foehre-service-tile.is-active,
body.design-services .foehre-service-tile[aria-pressed="true"] {
  background:var(--foehre-active-ocker);
  border-color:var(--foehre-color-paper);
}
body.design-services .foehre-service-tile:is(:hover,:focus-visible) {
  background:var(--foehre-color-orange);
  border-color:var(--foehre-color-paper);
}
body.design-services .foehre-service-panel h3 {
  
  
  font-weight:var(--foehre-weight-medium);
  letter-spacing:-.01em;
  
}
body.design-services .foehre-service-panel .foehre-service-intro {
  font-weight:var(--foehre-weight-light);
}
body.design-services .foehre-service-bullets {
  margin:0;
  padding:0 0 0 1.2em;
  list-style-type:square;
  font-weight:var(--foehre-weight-light);
}
body.design-services .foehre-service-bullets li {  padding-left:.15em; }
body.design-services .foehre-service-aux a { color:var(--foehre-color-paper); text-decoration:underline; text-underline-offset:5px; }
body.design-services .foehre-service-aux a:hover { color:var(--foehre-color-paper); }

@media (min-width:801px) {
  body.design-services #design-service-list {
    padding-top:clamp(76px,10svh,122px);
    padding-bottom:clamp(64px,8svh,95px) ;
  }
}
@media (max-width:1100px) and (min-width:801px) {
  body.design-services .foehre-services-layout { gap:clamp(23px,3vw,42px); grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  body.design-services .foehre-service-tile { min-height:105px; padding:6px 5px; }
  body.design-services .foehre-service-tile img { width:86px; height:63px; }
  body.design-services .foehre-service-tile .foehre-service-label { font-size:10px; }
}
@media (max-width:800px) {
  body.design-services .foehre-services-layout {  gap:38px; }
  body.design-services .foehre-service-tiles { gap:9px; }
  body.design-services .foehre-service-tile { min-height:112px;  }
  body.design-services #design-service-list { padding-bottom:90px; }
  
}
@media (prefers-reduced-motion:reduce) {
  body.design-services .foehre-service-tile { transition:none; }
}


body.design-services #design-service-list {
  --foehre-services-ocker:var(--foehre-color-ochre);
  background:var(--foehre-services-ocker);
  box-sizing:border-box;
  min-height:var(--foehre-chapter-screen);
  padding:clamp(56px,7svh,82px) var(--site-ui-gutter) clamp(126px,15svh,158px);
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  position:relative;
}
body.design-services #design-service-list .design-services-detail-heading {
  margin:0 0 clamp(22px,3svh,32px);
  font-size:clamp(26px,2.65vw,42px);
  line-height:1.08;
}
body.design-services .foehre-services-layout {
  display:grid;
  grid-template-columns:minmax(0,1.07fr) minmax(0,1fr);
  align-items:start;
  gap:clamp(30px,5.3vw,88px);
  width:100%;
  max-width:1310px;
  margin:0 auto;
  min-width:0;
}
body.design-services .foehre-service-tiles {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  grid-template-rows:repeat(3,minmax(0,1fr));
  align-items:stretch;
  justify-items:stretch;
  gap:clamp(23px,3.1svh,38px) clamp(22px,2.5vw,48px);
  height:clamp(360px,52svh,560px);
  width:100%;
  min-width:0;
}
body.design-services .foehre-service-tile {
  appearance:none;
  border:0;
  border-radius:0;
  box-shadow:none;
  background:transparent;
  color:var(--foehre-color-paper);
  min-width:0;
  min-height:0;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:clamp(5px,.5vw,8px);
  padding:0;
  text-align:center;
  cursor:pointer;
  font:inherit;
}
/* No highlight circle for the inactive, selected or hovered icon. */
body.design-services .foehre-service-tile::before,
body.design-services .foehre-service-tile::after { content:none; display:none; }
body.design-services .foehre-service-tile:focus-visible {
  outline:2px solid var(--foehre-color-paper);
  outline-offset:4px;
}
body.design-services .foehre-service-tile img {
  width:clamp(82px,8.3vw,119px);
  height:clamp(80px,7.45vw,114px);
  max-width:100%;
  object-fit:contain;
  object-position:center;
  display:block;
  flex:0 0 auto;
  transform:scale(1);
  transform-origin:center;
  transition:transform var(--foehre-motion-time, .2s) ease;
  
}
body.design-services .foehre-service-tile:is(:hover,:focus-visible) img {
  transform:scale(1.1);
}
body.design-services .foehre-service-tile .foehre-service-label {
  color:var(--foehre-color-paper);
  font-size:clamp(10px,.85vw,13px);
  font-weight:var(--foehre-weight-light);
  text-transform:uppercase;
  letter-spacing:0;
  text-wrap:balance;
  
  transition:color var(--foehre-motion-time, .17s) ease;
}
/* Hover: label becomes green; the PNG icon switches to green in services.js.
   No circular backdrop or tile background is introduced. */
body.design-services .foehre-service-tile:is(:hover,:focus-visible) .foehre-service-label {
  color:var(--foehre-color-green);
}
body.design-services .foehre-service-info {
  align-self:start;
  min-width:0;
  width:100%;
  padding-top:0;
  margin:0;
}
body.design-services .foehre-service-panel { max-width:620px; }
body.design-services .foehre-service-panel[hidden] {display:none;}
body.design-services .foehre-service-panel h3 {
  color:var(--foehre-color-paper);
  margin:0 0 clamp(13px,1.7vw,23px);
  font-size:clamp(24px,2.35vw,37px);
  line-height:1.08;
  text-transform:uppercase;
}
body.design-services .foehre-service-panel .foehre-service-intro {
  font-size:clamp(16px,1.23vw,20px);
  margin:0 0 clamp(16px,1.8vw,27px);
  line-height:1.34;
  max-width:55ch;
}
body.design-services .foehre-service-bullets {
  font-size:clamp(15px,1.08vw,18px);
  line-height:1.35;
  padding-left:1.15em;
}
body.design-services .foehre-service-bullets li { margin:0 0 .55em; }
body.design-services .foehre-service-aux { margin:clamp(13px,1.8vw,22px) 0 0; font-size:clamp(13px,1vw,16px); }
/* Page navigation is anchored independently from icon height and active copy. */

@media(min-width:801px) and (max-width:1130px) {
  body.design-services .foehre-services-layout {
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:clamp(24px,3vw,37px);
  }
  body.design-services .foehre-service-tiles {
    column-gap:clamp(16px,2.2vw,28px);
    row-gap:clamp(17px,2.5svh,27px);
  }
}
@media(min-width:801px) and (max-height:760px) {
  body.design-services #design-service-list {padding-top:42px;padding-bottom:122px;}
  body.design-services #design-service-list .design-services-detail-heading {
    margin-bottom:17px;
    font-size:clamp(24px,2vw,34px);
  }
}
@media(max-width:800px) {
  body.design-services #design-service-list {padding:clamp(42px,6svh,65px) var(--site-ui-gutter) 110px;}
  body.design-services .foehre-services-layout {grid-template-columns:minmax(0,1fr);gap:clamp(24px,4svh,40px);}
  body.design-services .foehre-service-tiles {
    
    gap:clamp(11px,2svh,19px) clamp(10px,1.6vw,16px);
  }
  body.design-services .foehre-service-tile {padding:2px 0;}
  body.design-services .foehre-service-panel h3 {font-size:clamp(25px,5vw,36px);}
  
}
/* Smaller phones keep the complete icon selection, description and the two
   chapter links comfortably within the original chapter screen height. */
@media(max-width:480px) {
  body.design-services #design-service-list {padding-top:32px;padding-bottom:110px;}
  body.design-services #design-service-list .design-services-detail-heading {margin-bottom:15px;}
  body.design-services .foehre-services-layout {gap:18px;}
  body.design-services .foehre-service-tiles {row-gap:8px ;}
  body.design-services .foehre-service-tile {padding:2px 0;}
  body.design-services .foehre-service-tile img {width:64px ;height:58px ;}
  body.design-services .foehre-service-panel h3 {margin-bottom:11px;}
  body.design-services .foehre-service-panel .foehre-service-intro {margin-bottom:13px;}
  body.design-services .foehre-service-bullets li {margin-bottom:.4em;}
  
}
@media(max-width:360px) {
  
  body.design-services .foehre-service-tiles {row-gap:5px;}
}
@media(prefers-reduced-motion:reduce) {
  body.design-services .foehre-service-tile img,
  body.design-services .foehre-service-tile .foehre-service-label {transition:none;}
}

@media (min-width:801px) {
  body.design-services .foehre-service-tiles {
    
    
    row-gap:clamp(15px,2.2svh,30px);
    column-gap:clamp(18px,2.3vw,45px);
    align-items:stretch;
  }
  body.design-services .foehre-service-tile {
    justify-content:flex-end;
    gap:clamp(6px,.65svh,9px);
    padding-bottom:0;
  }
  body.design-services .foehre-service-tile img {
    width:clamp(108px,11vw,160px);
    height:clamp(101px,10vw,150px);
  }
  body.design-services .foehre-service-tile .foehre-service-label {
    min-height:2.45em;
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    font-size:clamp(13px,1.23vw,20px);
  }
}
body.design-services .foehre-service-tile,
body.design-services .foehre-service-tile .foehre-service-label {
  font-family:var(--site-ui-font);
  font-weight:var(--foehre-weight-light);
  font-style:normal;
  text-transform:none;
  letter-spacing:0;
}
body.design-services .foehre-service-tile.is-active .foehre-service-label {font-weight:var(--foehre-weight-light);}
body.design-services .foehre-service-tile .foehre-service-label {
  line-height:1.23;
  overflow-wrap:normal;
  hyphens:auto;
}
body.design-services .foehre-service-tile img {will-change:transform;}
@media (min-width:801px) and (max-width:1130px) {
  body.design-services .foehre-service-tile img {
    width:clamp(100px,11.5vw,130px);
    height:clamp(95px,10.6vw,120px);
  }
  body.design-services .foehre-service-tile .foehre-service-label {
    font-size:clamp(12px,1.44vw,15px);
  }
}
@media (min-width:801px) and (max-height:760px) {
  body.design-services .foehre-service-tiles {height:68.5svh;row-gap:clamp(10px,1.8svh,20px);}
  body.design-services .foehre-service-tile img {width:clamp(85px,11svh,112px);height:clamp(75px,10.8svh,106px);}
  body.design-services .foehre-service-tile .foehre-service-label {font-size:clamp(11px,1vw,14px);min-height:2.35em;}
}
@media (max-width:800px) {
  body.design-services .foehre-service-tiles {
    height:auto;
    row-gap:clamp(14px,2.4svh,26px);
    column-gap:clamp(9px,2vw,22px);
  }
  body.design-services .foehre-service-tile {
    justify-content:flex-end;
    gap:7px;
  }
  body.design-services .foehre-service-tile img {
    width:clamp(75px,12vw,102px);
    height:clamp(71px,11vw,96px);
  }
  body.design-services .foehre-service-tile .foehre-service-label {
    font-size:clamp(11px,2vw,15px);
    min-height:2.48em;
    display:flex;
    align-items:center;
    justify-content:center;
  }
}
@media (max-width:480px) {
  body.design-services .foehre-service-tiles {row-gap:clamp(9px,1.8svh,15px);column-gap:7px;}
  body.design-services .foehre-service-tile {gap:4px;}
  body.design-services .foehre-service-tile img {width:clamp(72px,20vw,84px);height:clamp(68px,19vw,80px);}
  body.design-services .foehre-service-tile .foehre-service-label {font-size:clamp(10.8px,2.95vw,12.7px);min-height:2.4em;}
}
@media (max-width:360px) {
  body.design-services .foehre-service-tile img {width:66px;height:62px;}
  body.design-services .foehre-service-tile .foehre-service-label {font-size:10.5px;}
}

body.design-services .foehre-service-tile .foehre-service-icon {
  display:block;
  box-sizing:border-box;
  flex:0 0 auto;
  width:clamp(108px,11vw,160px);
  height:clamp(101px,10vw,150px);
  max-width:100%;
  color:var(--foehre-color-paper);
  transform:scale(1);
  transform-origin:center;
  transition:color var(--foehre-motion-time, .18s) ease, transform var(--foehre-motion-time, .2s) ease;
}
body.design-services .foehre-service-tile:is(:hover,:focus-visible) .foehre-service-icon {
  color:var(--foehre-color-green);
  transform:scale(1.1);
}
body.design-services .foehre-service-tile .foehre-service-icon text {fill:currentColor;}
@media (min-width:801px) {
  /* Flex height is determined by section and navigation offsets — avoids
     drift at different viewport heights and retains equal three row spacing. */
  body.design-services #design-service-list {
    height:var(--foehre-chapter-screen);
    min-height:var(--foehre-chapter-screen);
    padding-bottom:calc(var(--foehre-chapter-navigation-bottom) + 7px - clamp(5px,.85vw,15px));
  }
  body.design-services .foehre-services-layout {
    flex:1 1 auto;
    min-height:0;
  }
  body.design-services .foehre-service-tiles {
    height:100%;
    min-height:0;
    grid-template-rows:repeat(3,minmax(0,1fr));
  }
}
@media (min-width:801px) and (max-width:1130px) {
  body.design-services .foehre-service-tile .foehre-service-icon {
    width:clamp(100px,11.5vw,130px);
    height:clamp(95px,10.6vw,120px);
  }
}
@media (min-width:801px) and (max-height:760px) {
  body.design-services .foehre-service-tile .foehre-service-icon {
    width:clamp(85px,11svh,112px);
    height:clamp(75px,10.8svh,106px);
  }
}
@media (max-width:800px) {
  body.design-services .foehre-service-tile .foehre-service-icon {
    width:clamp(75px,12vw,102px);
    height:clamp(71px,11vw,96px);
  }
}
@media (max-width:480px) {
  body.design-services .foehre-service-tile .foehre-service-icon {
    width:clamp(72px,20vw,84px);
    height:clamp(68px,19vw,80px);
  }
}
@media (max-width:360px) {
  body.design-services .foehre-service-tile .foehre-service-icon {
    width:66px;
    height:62px;
  }
}
@media (prefers-reduced-motion:reduce) {
  body.design-services .foehre-service-tile .foehre-service-icon {transition:none;}
}

body:not(.design-library-index):not(.library-page)
  a.design-about-contact-button:is(:hover,:focus-visible){
  color:var(--foehre-color-orange);
}
/* Every page navigation arrow inherits the actual hover colour,
   including its glyph; Library (orange chapter) uses black instead. */
body:not(.design-library-index):not(.library-page)
  a.design-about-contact-button:is(:hover,:focus-visible) > span[aria-hidden="true"]{
  color:var(--foehre-color-orange);
}

/* Selected icon and label stay green until a different service is selected.
   No backgrounds or borders on hover, focus or selection. */
body.design-services .foehre-service-tile.is-active .foehre-service-icon,
body.design-services .foehre-service-tile.is-active .foehre-service-label {
  color:var(--foehre-color-green);
}
body.design-services .foehre-service-tile.is-active .foehre-service-icon {
  transform:scale(1);
}
body.design-services .foehre-service-tile.is-active:is(:hover,:focus-visible) .foehre-service-icon {
  transform:scale(1.1);
}
/* The graphic itself has empty SVG viewbox margins. Previously the copy
   was aligned with the grid CELL and therefore appeared too high against
   the visible strokes. Move the whole copy panel down together. */
@media (min-width:801px) {
  body.design-services .foehre-service-info {
    padding-top:60px;
  }
}
@media (max-width:800px) {
  body.design-services .foehre-service-info {padding-top:0;}
}

body:is(.design-services,.design-library-index,.library-page) {
  --foehre-header-accent:var(--foehre-color-green);
  --foehre-page-hover:var(--foehre-color-green);
}

/* Hover / Tastaturfokus für sämtliche klickbare Elemente im jeweiligen
   Kapitel, ausdrücklich ohne Footer. Bestehende Layout- und Größenregeln
   der Steuerelemente bleiben unberührt. */
/* Chapter-specific green applies to page content and the CLOSED header.
   The shared FULLSCREEN MENU keeps its own category hover colours on every
   page; it must not inherit these chapter rules. */

/* Aktive/ausgewählte Zustände bleiben auch nach Klick grün – inklusive
   Sprachlinks im Kopf, Menüeinträgen und ausgewählten Bibliothekslinks. */

/* Header: Sprachauswahl, Menüschalter und die SVG-Linien des Burger-Icons.
   Überschreibt die alte Weiß-/Schwarz-Regel auf den farbigen Seiten. */

/* Editorial-Pfeile: Icon/Glyphe folgt der grünen Linkfarbe. */


/* Bibliothekseinträge + Artikel-Navigation, die zuvor Schwarz erzwangen. */

/* Footer unabhängig von der aktuellen Seite immer Orange, auch für
   ausgewählte Links und das Cookie-Icon. Keine andere Hoverfarbe. */

/* Offen gehaltene Menüs und aufgeklappte Bibliothek-Details bleiben grün. */
body:is(.design-services,.design-library-index,.library-page)
  :is(.site-header,main) button[aria-expanded="true"],
body:is(.design-services,.design-library-index,.library-page)
  main details[open] > summary {color:var(--foehre-color-green);}

/* [BLOCK-LEISTUNGEN-02] LEISTUNGEN */
@media(min-width:801px){
  body.design-services .foehre-service-info {
    transform:translateY(var(--foehre-service-text-shift,0px));
  }
}
@media(max-width:800px){
  body.design-services .foehre-service-info {transform:none;}
}

body.design-services #design-service-list .foehre-service-panel .foehre-service-aux a:is(:hover,:focus-visible),
body.design-services #design-service-list .foehre-service-panel .foehre-service-aux a:is(:hover,:focus-visible) span[aria-hidden="true"] {
  color:var(--foehre-color-green);
}

@media (min-width:801px) {
  body.design-services #design-service-list .foehre-services-layout {
    grid-template-columns:minmax(0,42fr) minmax(0,58fr);
    column-gap:clamp(24px,3vw,48px);
  }
  body.design-services #design-service-list .foehre-service-tiles {
    /* Retain the existing three-row height and vertical distribution. */
    min-width:0;
    column-gap:clamp(9px,1.1vw,20px);
  }
  body.design-services #design-service-list .foehre-service-panel {
    max-width:none;
  }
  /* Heading aligns to the roof apex, measured in services.js. */
  body.design-services #design-service-list .foehre-service-panel h3 {
    font-size:clamp(20px,1.85vw,28px);
    line-height:1.13;
    margin-bottom:clamp(12px,1.3vw,19px);
  }
  body.design-services #design-service-list .foehre-service-panel .foehre-service-intro {
    font-size:clamp(15px,1.12vw,18px);
    line-height:1.31;
    max-width:none;
  }
  body.design-services #design-service-list .foehre-service-bullets {
    font-size:clamp(14px,1.03vw,17px);
    line-height:1.34;
  }
  body.design-services #design-service-list .foehre-service-aux {
    margin-top:clamp(10px,1.2vw,17px);
  }
}
@media (max-width:800px) {
  body.design-services #design-service-list .foehre-service-panel h3 {
    font-size:clamp(20px,4.8vw,28px);
    line-height:1.13;
  }
}

body.design-services #design-service-list .foehre-service-info {
  max-height:none;
  height:auto;
  overflow:visible;
  overflow-x:visible;
  overflow-y:visible;
  scrollbar-width:none;
  padding-right:0;
}
/* Alle neun Titel beginnen auf demselben geometrischen Bezugspunkt.
   Der SVG-Hover vergrößert ausschließlich die Grafik, nicht die Textposition. */
body.design-services #design-service-list .foehre-service-panel h3 {
  position:relative;
  top:0;
  transform:none;
}
/* Auf besonders niedrigen Desktopfenstern werden ausschließlich
   Textabstände geringfügig reduziert; nicht die Lesbarkeit versteckt. */
@media (min-width:801px) and (max-height:740px) {
  body.design-services #design-service-list .foehre-service-panel h3 {
    margin-bottom:10px;
  }
  body.design-services #design-service-list .foehre-service-panel .foehre-service-intro {
    margin-bottom:10px ;
  }
  body.design-services #design-service-list .foehre-service-bullets li {
    margin-bottom:4px ;
  }
  body.design-services #design-service-list .foehre-service-aux {
    margin-top:9px;
  }
}
/* Sehr schmale UND niedrige Desktopfenster: kurze, einheitliche Abstände
   statt einer zweiten Scrollleiste bei Energieausweisen/Schallschutz. */
@media (min-width:801px) and (max-width:860px) and (max-height:680px) {
  body.design-services #design-service-list .foehre-service-panel .foehre-service-intro {
    font-size:14px;
    line-height:1.23;
    margin-bottom:9px;
  }
  body.design-services #design-service-list .foehre-service-bullets {
    font-size:13px;
    line-height:1.27;
  }
  body.design-services #design-service-list .foehre-service-bullets li {
    margin-bottom:3px;
  }
}

/* [BLOCK-REFERENZEN-03] REFERENZEN */
body.references-page .reference-grid .reference-card .reference-heading {
  order:0;
  display:block;
  width:100%;
  min-width:0;
  margin:0 0 9px;
  padding:0;
}
body.references-page .reference-grid .reference-card .reference-heading .reference-title-row {
  display:flex;
  gap:12px;
  order:initial;
}
body.references-page .reference-grid .reference-card .reference-heading .reference-title h3,
body.references-page .reference-grid .reference-card .reference-heading .reference-credit {
  margin:0;
  padding:0;
  line-height:1.16;
}
body.references-page .reference-grid .reference-card .reference-heading .reference-year {
  display:block;
  margin:2px 0 0;
  padding:0;
  font:300 clamp(12px,.9vw,14px)/1.15 var(--foehre-font-base);
  color:var(--foehre-color-green);
  text-decoration:none;
  font-variant-numeric:tabular-nums;
}
body.references-page .reference-grid .reference-card > img {
  order:1;
  margin:0 0 13px;
}
body.references-page .reference-grid .reference-card .reference-facts {
  order:2;
}
@media(max-width:800px) {
  
  body.references-page .reference-grid .reference-card .reference-heading .reference-year {
    font-size:12px;
  }
}
/* The article title remains left aligned; the year is the final element
   at the far right, following the established article link arrow. */

/* [BLOCK-BIBLIOTHEK-02] BIBLIOTHEK */
body.design-library-index .design-library-entry > .design-library-entry-trailing {
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;
  flex:0 0 auto;
  gap:clamp(13px,1.8vw,27px);
  margin-left:auto;
  font-size:inherit;
  white-space:nowrap;
}
body.design-library-index .design-library-entry .design-library-entry-arrow,
body.design-library-index .design-library-entry .design-library-entry-year {
  font:400 clamp(12px,1.05vw,16px)/1.2 var(--foehre-font-base);
  letter-spacing:0;
  text-transform:none;
  color:inherit;
}
body.design-library-index .design-library-entry .design-library-entry-year {
  font-variant-numeric:tabular-nums;
}
@media(max-width:800px) {
  body.design-library-index .design-library-entry > .design-library-entry-trailing {
    gap:12px;
  }
  body.design-library-index .design-library-entry .design-library-entry-arrow,
  body.design-library-index .design-library-entry .design-library-entry-year {
    font-size:12px;
  }
}
@media(max-width:420px) {
  body.design-library-index .design-library-entry {
    gap:8px;
    font-size:clamp(19px,5vw,22px);
  }
  body.design-library-index .design-library-entry > span:first-child {
    min-width:0;
    overflow-wrap:anywhere;
    hyphens:auto;
  }
  body.design-library-index .design-library-entry > .design-library-entry-trailing {
    gap:7px;
  }
}

/* Bibliotheks-Titel bleibt bewusst übergeordnet. */
body.design-library-index #library-topics.design-library-list > h2 {
  font-size:clamp(32px,2.8vw,45px);
  font-weight:var(--foehre-weight-medium);
  line-height:1.14;
}
body.design-library-index #library-topics .design-library-entry {
  font-size:clamp(20px,2.1vw,31px);
  font-weight:var(--foehre-weight-light);
  line-height:1.22;
  gap:clamp(9px,2vw,20px);
}
body.design-library-index #library-topics .design-library-entry > span:first-child {
  font:inherit;
  line-height:inherit;
  min-width:0;
}
body.design-library-index #library-topics .design-library-entry .design-library-entry-trailing {
  font:inherit;
  line-height:inherit;
  display:inline-flex;
  align-items:center;
  flex:0 0 auto;
  margin-left:auto;
}
body.design-library-index #library-topics .design-library-entry .design-library-entry-year {
  font:inherit;
  line-height:inherit;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
/* Referenzen: title alone on first row, year at left + credit on right
   on second row immediately above the image. */

/* [BLOCK-REFERENZEN-04] REFERENZEN */
body.references-page .reference-grid .reference-card .reference-heading {
  margin-bottom:6px;
}
body.references-page .reference-grid .reference-card .reference-heading .reference-title-row {
  margin:0 0 2px;
  align-items:start;
  justify-content:flex-start;
}
body.references-page .reference-grid .reference-card .reference-heading .reference-meta-row {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  width:100%;
  min-width:0;
  margin:0;
  padding:0;
}
body.references-page .reference-grid .reference-card .reference-heading .reference-meta-row .reference-year {
  margin:0;
  flex:0 0 auto;
  line-height:1.16;
}
body.references-page .reference-grid .reference-card .reference-heading .reference-meta-row .reference-credit {
  order:initial;
  margin:0;
  padding:0;
  text-align:right;
  min-width:0;
  flex:0 1 auto;
  font:300 clamp(12px,.9vw,14px)/1.16 var(--foehre-font-base);
  overflow-wrap:anywhere;
}
@media (max-width:800px) {
  body.references-page .reference-grid .reference-card .reference-heading {
    margin-bottom:5px;
  }
  body.references-page .reference-grid .reference-card .reference-heading .reference-meta-row .reference-credit {
    font-size:12px;
  }
}
/* Leistungstexte und Icon-Unterschriften wie die kräftigere
   Über-uns-Biografie besser lesbar. Keine Größen-/Positionsänderung. */
body.design-services #design-service-list .foehre-service-panel .foehre-service-intro,
body.design-services #design-service-list .foehre-service-bullets,
body.design-services #design-service-list .foehre-service-bullets li,
body.design-services #design-service-list .foehre-service-aux,
body.design-services #design-service-list .foehre-service-tile .foehre-service-label,
body.design-services #design-service-list .foehre-service-tile.is-active .foehre-service-label {
  font-weight:var(--foehre-weight-medium);
}

/* Bureau link and private attribution follow the three fact rows. */

/* [BLOCK-REFERENZEN-05] REFERENZEN */
body.references-page .reference-grid .reference-card .reference-meta-row {
  justify-content:flex-start;
}
body.references-page .reference-grid .reference-card .reference-credit-row {
  
  order:3;
  
  margin-top:5px;
  margin-left:calc(27% + 9px);
  
}
body.references-page .reference-grid .reference-card .reference-credit-row .reference-credit {
  display:block;
  position:static;
  float:none;

overflow-wrap:anywhere;
}
body.references-page .reference-grid .reference-card .reference-credit-row .reference-credit a {
  color:inherit;
  text-decoration:underline;
  text-underline-offset:2px;
}
body.references-page .reference-grid .reference-card .reference-credit-row .reference-credit a:is(:hover,:focus-visible) {
  color:var(--brand-orange);
}
/* All reference metadata and filter labels use one consistent size. */
body.references-page .reference-grid .reference-card .reference-fact dt,
body.references-page .reference-grid .reference-card .reference-fact dd,
body.references-page .filters .filter-rows .filter-row .filter-chip.filter-option {
  font-size:clamp(13px,1vw,15px);
  line-height:1.25;
}
body.references-page .reference-grid .reference-card .reference-fact dd {
  font-weight:var(--foehre-weight-light);
}
body.references-page .filters .filter-rows .filter-row .filter-chip.filter-option {
  padding:5px 10px;
  min-height:26px;
  font-weight:var(--foehre-weight-light);
}
/* A little more white space between each service bullet on desktop. */

/* Compact laptop heights keep all text above the fixed page navigation. */

@media(max-width:800px) {
  body.references-page .reference-grid .reference-card .reference-fact dt,
  body.references-page .reference-grid .reference-card .reference-fact dd,
  body.references-page .filters .filter-rows .filter-row .filter-chip.filter-option {
    font-size:13px;
    line-height:1.27;
  }
  body.references-page .filters .filter-rows .filter-row .filter-chip.filter-option {
    padding:5px 9px;
    min-height:27px;
  }
  body.references-page .reference-grid .reference-card .reference-credit-row {
    margin-left:calc(30% + 9px);
    margin-top:5px;
  }
}

body.references-page .reference-grid .reference-card .reference-credit-row {
  display:block;
  margin:6px 0 0 0;
  padding:0;
  width:100%;
  min-width:0;
  text-align:left;
}
body.references-page .reference-grid .reference-card .reference-credit-row .reference-credit {
  margin:0;
  padding:0;
  text-align:left;
  font-family:var(--foehre-font-base);
  font-size:clamp(13px,1vw,15px);
  font-weight:var(--foehre-weight-medium);
  line-height:1.25;
  color:var(--foehre-color-green);
  text-transform:none;
}
@media(min-width:801px) {
  body.design-services #design-service-list .foehre-service-bullets li {
    margin-top:0;
    margin-bottom:clamp(13px,1.65svh,19px);
  }
  body.design-services #design-service-list .foehre-service-bullets li:last-child {
    margin-bottom:0;
  }
}
@media(min-width:801px) and (max-height:740px) {
  body.design-services #design-service-list .foehre-service-bullets li {
    margin-bottom:clamp(8px,1.35svh,11px);
  }
}
@media(min-width:801px) and (max-height:620px) {
  body.design-services #design-service-list .foehre-service-bullets li {
    margin-bottom:7px;
  }
}
@media(max-width:800px) {
  body.references-page .reference-grid .reference-card .reference-credit-row {
    margin:6px 0 0 0;
  }
  body.references-page .reference-grid .reference-card .reference-credit-row .reference-credit {
    font-size:13px;
    line-height:1.27;
  }
  body.design-services #design-service-list .foehre-service-bullets li {
    margin-top:0;
    margin-bottom:15px;
  }
  body.design-services #design-service-list .foehre-service-bullets li:last-child {
    margin-bottom:0;
  }
}

body.references-page .reference-grid .reference-card .reference-fact.reference-partner {
  display:grid;
  align-items:start;
  margin:0;
  padding:0;
}
body.references-page .reference-grid .reference-card .reference-partner .reference-partner-name {
  display:block;
  min-width:0;
  overflow-wrap:anywhere;
  color:var(--foehre-color-green);
  font:inherit;
  text-transform:none;
}
body.references-page .reference-grid .reference-card .reference-partner a {
  color:inherit;
  text-decoration:underline;
  text-underline-offset:2px;
}
body.references-page .reference-grid .reference-card .reference-partner a:is(:hover,:focus-visible) {
  color:var(--brand-orange);
}
/* The long partner label must remain a single line even on narrow phones. */
@media(max-width:800px) {
  body.references-page .reference-grid .reference-card .reference-fact {
    grid-template-columns:minmax(125px,36%) minmax(0,1fr);
  }
  body.references-page .reference-grid .reference-card .reference-partner dt {
    white-space:nowrap;
  }
}
/* One visually distinct blank text line between the lead sentence and list. */

/* [BLOCK-LEISTUNGEN-03] LEISTUNGEN */
@media(min-width:801px) {
  body.design-services #design-service-list .foehre-service-panel .foehre-service-intro {
    margin-bottom:clamp(27px,3.4svh,34px);
  }
}
/* Less vertical space on short displays keeps the fixed chapter navigation free. */
@media(min-width:801px) and (max-height:740px) {
  body.design-services #design-service-list .foehre-service-panel .foehre-service-intro {
    margin-bottom:clamp(20px,3svh,24px);
  }
}
@media(min-width:801px) and (max-height:620px) {
  body.design-services #design-service-list .foehre-service-panel .foehre-service-intro {
    margin-bottom:18px;
  }
}
@media(max-width:800px) {
  body.design-services #design-service-list .foehre-service-panel .foehre-service-intro {
    margin-bottom:28px;
  }
}

/* PNG-Leistungsicons: transparente, weiße Konturen unverzerrt anzeigen. */
body.design-services .foehre-service-tile img.foehre-service-icon { object-fit:contain; }


body.design-services .foehre-service-tile:is(:hover,:focus-visible) img.foehre-service-icon {
  transform:scale(1.1);
}

/* [BLOCK-KAPITEL-NAVIGATION-01] KAPITEL NAVIGATION */
.foehre-next-arrow {
  position:fixed ;
  z-index:850;
  right:clamp(22px,4.1vw,76px);
  top:var(--foehre-arrow-top,calc(100svh - 265px));
  bottom:auto ;
  width:clamp(42px,4.6vw,66px);
  height:clamp(62px,7vw,94px);
  box-sizing:border-box;
  align-items:center;
  justify-content:center;
  background:transparent ;
  border:0 ;
  border-radius:0 ;
  padding:0 ;
  color:var(--foehre-color-paper) ;
  text-decoration:none ;
  -webkit-tap-highlight-color:transparent;
  transition:opacity var(--foehre-motion-time, .24s) linear;
  will-change:opacity;
}
.foehre-next-arrow .foehre-arrow-glyph {
  position:relative;
  width:100%;height:100%;
  display:block;
  transition:transform var(--foehre-motion-time, .72s) cubic-bezier(.22,1,.36,1);
}
.foehre-next-arrow svg { position:absolute;inset:0; width:100%;height:100%;display:block;overflow:visible;pointer-events:none; }
.foehre-next-arrow svg path { stroke:currentColor ; }
.foehre-next-arrow .foehre-arrow-base { color:var(--foehre-color-paper) ; }
.foehre-next-arrow:is(:hover,:focus-visible) .foehre-arrow-glyph {transform:translate3d(20px,0,0)}
.foehre-next-arrow:focus-visible {outline:2px solid currentColor;outline-offset:7px}
.foehre-next-arrow[data-scroll-reveal] { opacity:var(--foehre-arrow-opacity,0); pointer-events:none; }
.foehre-next-arrow[data-scroll-reveal][data-is-shown="true"] {pointer-events:auto;}
/* Two identical paths are overlaid, with a moving pixel-precise vertical clip.
   On green, the base stays light grey; on grey, the clipped path is green. */
body.design-about .foehre-next-arrow .foehre-arrow-base {color:var(--foehre-color-paper) ;}
body.design-about .foehre-next-arrow .foehre-arrow-contrast {
  color:var(--foehre-color-green) ;
  clip-path:inset(var(--foehre-arrow-contrast-top,100%) 0 0 0);
}
/* Real responsive removal: not just opacity, also out of layout & tab order. */
@media (max-width:800px) {
  .foehre-next-arrow {display:none ;pointer-events:none ;}
}
@media (prefers-reduced-motion:reduce) {
  .foehre-next-arrow,.foehre-next-arrow .foehre-arrow-glyph {transition:none;}
}
/* Offscreen measurement of the Home H1's real first line. This keeps the
   arrow's viewport coordinate identical on all main pages and screen sizes. */
.foehre-arrow-ruler {
  position:fixed;
  top:0;left:0;width:100vw;
  pointer-events:none;visibility:hidden;z-index:-1;
  contain:layout style;
}
.foehre-arrow-ruler .design-hero {
  background:none ;
  height:max(430px,calc(100svh - var(--header-height))) ;
  min-height:0 ;
}
.foehre-arrow-ruler .design-hero-content {padding-bottom:var(--foehre-step-nav-bottom) ;}
.foehre-arrow-ruler .design-hero h1 {
  font-family:var(--foehre-font-base) ;
  font-style:normal ;
  font-weight:var(--foehre-weight-medium) ;
  font-stretch:normal ;
  font-size:var(--foehre-hero-heading-size) ;
  line-height:var(--foehre-hero-heading-leading) ;
  letter-spacing:0 ;
  text-transform:uppercase ;
  text-align:left ;
  width:var(--foehre-hero-display-width) ;
  max-width:1050px ;
  margin:0 ;
  text-wrap:pretty;
}
@media (min-width:801px) and (min-height:701px) {
  .foehre-arrow-ruler .design-hero h1 {transform:translateY(var(--foehre-step-lift)) ;}
}

/* Identical header-link interaction on all pages. Exception: Library black. */
/* Allow header's actual logo artwork to change on hover on EVERY page.
   Do not permanently whiten the variant on coloured pages. */
body:is(.design-about,.design-services,.design-library-index,.library-page)
  .site-header.design-header .design-header-logo:is(:hover,:focus-visible) img {
  filter:none;
}
/* All footer rows retain the same dimensions, colours, order and wrapping,
   regardless of the chapter's body colour/interaction CSS. */
body .site-footer.design-footer {
  position:relative;
  box-sizing:border-box;
  flex:0 0 auto;
  width:100%;
  background:var(--foehre-color-paper);
  color:var(--foehre-color-green);
  border:0;
  box-shadow:none;
}
body .site-footer.design-footer .design-footer-legal,
body .site-footer.design-footer .design-footer-social,
body .site-footer.design-footer .design-footer-separator,
body .site-footer.design-footer :is(a,button) {
  color:var(--foehre-color-green);
}
/* The old flex:1 on the ABOUT heading consumed the complete remaining
   viewport on mobile, visually pinning the TEXT to its top. The stage itself
   remains full-height; its content is now genuinely bottom-aligned. */
@media (max-width:800px) {
  body.design-about #about-top .design-about-hero-stage {
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    align-items:flex-start;
  }
  body.design-about #about-top .design-about-statement {
    flex:0 0 auto;
    align-self:flex-start;
    width:100%;
    min-height:0;
    height:auto;
    margin:0;
  }
  body.design-services #services-top .foehre-service-headline-line {
    overflow-wrap:normal;
    hyphens:none;
  }
  body.design-services #services-top h1 {
    text-wrap:initial;
    width:100%;
    max-width:100%;
    font-size:clamp(22px,6.05vw,35px);
    line-height:1.15;
  }
}
/* Move the secondary SERVICES chapter heading slightly down only, without
   moving the roof-apex-aligned description or the 3x3 service icon grid. */
body.design-services #design-service-list .design-services-detail-heading {
  position:relative;
  padding-top:0;
  top:clamp(12px,1.8vw,25px);
}

@media (min-width:801px) {
  .foehre-arrow-ruler { top:var(--header-height) ; }
}
/* Partners' only visible heading matches the oversized About headline;
   it follows the same left page alignment, not the centered logo rows. */
body.design-about #about-partners .design-about-group #partner-heading {
  display:block;
  margin:0 0 clamp(22px,2.4vw,38px) 0;
  padding:0;
  text-align:left;
  font-family:var(--site-ui-font,var(--foehre-font-base));
  font-size:var(--foehre-hero-heading-size) ;
  
  letter-spacing:0;
  
  text-transform:uppercase;
}
/* On the About page, the reference is the personal biography text.
   Match paragraph AND bullet text on Services to that exact typographic
   system (face, weight, responsive font size and leading). */
body.design-services #design-service-list .foehre-service-panel .foehre-service-intro,
body.design-services #design-service-list .foehre-service-panel .foehre-service-bullets,
body.design-services #design-service-list .foehre-service-panel .foehre-service-bullets li,
body.design-services #design-service-list .foehre-service-panel .foehre-service-aux {
  font-family:var(--site-ui-font,var(--foehre-font-base));
  font-style:normal;
  font-weight:var(--foehre-weight-light);
  font-size:clamp(15px,1.25vw,21px);
  line-height:1.2;
  letter-spacing:normal;
  text-transform:none;
}
/* The biography's own mobile type uses 16/1.25. Keep the same proportion
   on narrow devices without modifying the icons or the service title. */
@media (max-width:800px) {
  body.design-services #design-service-list .foehre-service-panel .foehre-service-intro,
  body.design-services #design-service-list .foehre-service-panel .foehre-service-bullets,
  body.design-services #design-service-list .foehre-service-panel .foehre-service-bullets li,
  body.design-services #design-service-list .foehre-service-panel .foehre-service-aux {
    font-size:16px;
    line-height:1.25;
  }
}

body.legal-page .legal-main,
body.contact-page .contact-main {
  padding-top:clamp(16px,2.4vh,28px);
  padding-bottom:clamp(16px,2.6vh,32px);
}
/* Same alignment on both page types. Keep the contact form's semantics and
   all its field/order/validation logic untouched. */
body.legal-page .legal-content,
body.contact-page .contact-content {
  width:min(84vw,880px);
  max-width:880px;
  margin-inline:auto;
}
body.legal-page .legal-content h1,
body.contact-page .contact-content > h1.contact-title {
  font-family:var(--site-ui-font,var(--foehre-font-base));
  font-size:clamp(25px,3vw,38px);
  font-style:normal;
  font-weight:var(--foehre-weight-medium);
  line-height:1.1;
  letter-spacing:normal;
  text-transform:none;
  text-align:left;
  color:var(--brand-orange);
  margin:0 0 24px;
}
/* Compact the EU AI ACT just enough to fit typical desktop viewports,
   without reducing text to an unreadable size or hiding any legal content. */
@media (min-width:801px) {
  body.legal-page[data-page="aiAct"] .legal-content p {
    margin-bottom:11px;
    line-height:1.5;
  }
}
@media (max-width:800px) {
  body.legal-page .legal-main,
  body.contact-page .contact-main {
    padding-top:clamp(18px,3vw,24px);
    padding-bottom:35px;
  }
  body.legal-page .page-wrap {padding-inline:0;}
  body.legal-page .legal-content,
  body.contact-page .contact-content {
    width:calc(100% - 52px);
    max-width:880px;
  }

/* Zwei gleichberechtigte Spalten, wie auf Desktop: rechtliche Links links,
     Impressum/Kontakt/LinkedIn rechts. Kleine Displays: vertikal je Gruppe. */
  body .site-footer.design-footer {
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    column-gap:clamp(12px,4vw,30px);
    align-items:start;
    justify-content:space-between;
    height:auto;
    min-height:0;
    padding:clamp(17px,4.5vw,28px) var(--site-ui-gutter);
    flex-wrap:nowrap;
    row-gap:0;
  }
  body .site-footer.design-footer .design-footer-legal,
  body .site-footer.design-footer .design-footer-social {
    box-sizing:border-box;
    display:flex;
    flex-direction:column;
    flex-wrap:nowrap;
    gap:clamp(8px,2vw,13px);
    width:100%;
    min-width:0;
    margin:0;
    padding:0;
    white-space:nowrap;
    font-size:var(--site-ui-font-size);
  }
  body .site-footer.design-footer .design-footer-legal {
    grid-column:1; grid-row:1;
    order:0;
    align-items:flex-start;
    justify-content:flex-start;
    text-align:left;
  }
  body .site-footer.design-footer .design-footer-social {
    grid-column:2; grid-row:1;
    order:0;
    align-items:flex-end;
    justify-content:flex-start;
    text-align:right;
  }
  body .site-footer.design-footer .design-footer-separator {display:none;}
  body .site-footer.design-footer .design-footer-cookie-wrap,
  body .site-footer.design-footer .cookie-settings-slot,
  body .site-footer.design-footer .cookie-settings-button {
    display:inline-flex;
    visibility:visible;
    align-items:center;
    justify-content:flex-start;
    opacity:1;
  }
  body .site-footer.design-footer .design-footer-cookie-wrap {
    align-self:flex-start;
  }
  body .site-footer.design-footer .cookie-settings-button {
    cursor:pointer;
    width:23px;
    height:23px;
    padding:0;
  }
  body .site-footer.design-footer .design-linkedin-link {
    display:inline-flex;
    
    width:20px;
    height:22px;
  }
  body .site-footer.design-footer .design-linkedin-icon {
    width:20px;
    height:20px;
  }

  /* Die Logo-Liste bildet immer zwei Spalten und beliebig viele Zeilen;
     kein horizontaler Slider, kein abgeschnittenes HAN IMAGE. */
  body.design-about #about-partners .design-brand-row--partners,
  body.design-about #about-partners .design-brand-row--network {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-auto-flow:row;
    grid-auto-rows:auto;
    align-items:center;
    justify-items:stretch;
    justify-content:stretch;
    gap:clamp(17px,5vw,38px) clamp(14px,4vw,36px);
    width:100%;
    max-width:100%;
    min-width:0;
    margin:0;
    overflow:visible;
    scroll-snap-type:none;
  }
}

/* [BLOCK-REFERENZEN-06] REFERENZEN */
body.references-page .reference-grid .reference-card {
  position:relative;
  overflow:visible;
  transform:scale(1);
  transform-origin:center center;
  transition:transform var(--foehre-motion-time, .45s) cubic-bezier(.22,1,.36,1);
  z-index:0;
}
body.references-page .reference-grid .reference-card .reference-image-frame {
  order:1;
  display:block;
  position:relative;
  width:100%;
  min-width:0;
  aspect-ratio:1.62 / 1;
  overflow:hidden;
  margin:0 0 13px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
body.references-page .reference-grid .reference-card .reference-image-frame > img {
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  max-height:none;
  aspect-ratio:auto;
  object-fit:cover;
  object-position:center;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  opacity:1;
  filter:none;
  transform:none;
  transition:none;
}
body.references-page .reference-grid .reference-card .reference-image-frame::before,
body.references-page .reference-grid .reference-card .reference-image-frame::after {
  content:none;
  display:none;
}
@media (hover:hover) and (pointer:fine) {
  body.references-page .reference-grid .reference-card:hover,
  body.references-page .reference-grid .reference-card:focus-within {
    transform:scale(1.05);
    z-index:2;
  }
}
@media (prefers-reduced-motion:reduce) {
  body.references-page .reference-grid .reference-card {
    transition:none;
  }
}

body.design-about .design-about-cv,
body.design-about .foehre-bio-break-mobile { display:none; }
body.design-about .foehre-bio-break-desktop { display:block; }
@media (max-width:800px) {
  body.design-about .foehre-bio-break-desktop { display:none; }
  body.design-about .foehre-bio-break-mobile { display:block; }
  /* Vier verbindliche Zeilen bei DE, ohne unerwünschte fünfte Umbruchzeile
     auch auf 320px-Geräten. EN/BKS behalten natürliche Übersetzungsumbrüche. */
  body.design-about #about-profile .design-about-person {
    max-width:100%;
    width:100%;
    font-size:clamp(12px,3.85vw,16px);
    line-height:1.25;
    hyphens:manual;
  }
  body.design-about #about-partners .design-about-relations-shell {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    
    align-items:center;
    column-gap:clamp(18px,4.5vw,35px);
    width:100%;
    max-width:100%;
    overflow:visible;
  }
  /* Die fünf Logos werden aus zwei semantischen Gruppen in EIN Raster
     gefaltet. Reihenfolge: Calas | Acker / HAN mittig / Ingenieurbüros | ÖGNI. */
  body.design-about #about-partners .design-about-group,
  body.design-about #about-partners .design-brand-row--partners,
  body.design-about #about-partners .design-brand-row--network {
    display:contents;
  }
  body.design-about #about-partners #partner-heading {
    order:0;
    grid-column:1/-1;
    margin:0;
    text-align:left;
    justify-self:start;
  }
  body.design-about #about-partners .design-partner-logo,
  body.design-about #about-partners .design-network-logo {
    display:flex;
    flex:initial;
    align-items:center;
    justify-content:flex-start;
    justify-self:stretch;
    box-sizing:border-box;
    width:100%;
    min-width:0;
    max-width:100%;
    height:clamp(66px,17vw,90px);
    min-height:0;
    margin:0;
    padding:0;
    overflow:visible;
    scroll-snap-align:none;
  }
  body.design-about #about-partners .design-partner-logo img,
  body.design-about #about-partners .design-network-logo img {
    display:block;
    width:100%;
    height:100%;
    max-width:100%;
    max-height:100%;
    object-fit:contain;
    object-position:center center;
  }
  /* Alle fünf Marken haben feste Plätze. Die unteren Logos werden mittig
     an denselben zwei Spalten wie die oberen Studios ausgerichtet. */
  body.design-about #about-partners .design-partner-logo--calas {
    order:1;
    grid-column:1;
    grid-row:2;
  }
  body.design-about #about-partners .design-partner-logo--acker {
    order:2;
    grid-column:2;
    grid-row:2;
  }
  body.design-about #about-partners .design-network-logo:first-child {
    order:4;
    grid-column:1;
    grid-row:4;
    justify-content:center;
  }
  body.design-about #about-partners .design-network-logo:last-child {
    order:5;
    grid-column:2;
    grid-row:4;
    justify-content:center;
  }
}

@media (min-width:801px) {
  body.design-about #about-partners .design-brand-row--partners {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    align-items:center;
    justify-items:center;
    column-gap:clamp(16px,2vw,32px);
    max-width:1220px;
    overflow:visible;
    scroll-snap-type:none;
  }
  body.design-about #about-partners .design-brand-row--partners .design-partner-logo {
    display:flex;
    width:100%;
    min-width:0;
    max-width:100%;
    height:clamp(74px,7vw,100px);
    align-items:center;
    justify-content:center;
    padding:0;
  }
  body.design-about #about-partners .design-brand-row--partners .design-partner-logo img {
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center;
  }
}
@media (max-width:800px) {
  
  body.design-about #about-partners .design-partner-logo--han {
    grid-row:3;
    grid-column:1;
    order:3;
    width:100%;
    justify-self:stretch;
    justify-content:center;
  }
  body.design-about #about-partners .design-partner-logo--anull {
    grid-row:3;
    grid-column:2;
    order:4;
    width:100%;
    justify-self:stretch;
    justify-content:center;
  }
  body.design-about #about-partners .design-partner-logo--anull img {
    height:100%;
    width:100%;
    max-width:100%;
    max-height:clamp(58px,17vw,80px);
    object-fit:contain;
    object-position:center center;
  }
}

/* [BLOCK-KONTAKT-01] KONTAKT */
body.contact-page .contact-main {
  padding-top:clamp(14px,2.2vh,26px);
  padding-bottom:clamp(14px,2.2vh,26px);
}
body.contact-page .contact-content > h1.contact-title {
  margin-bottom:clamp(15px,2.5vh,24px);
}
body.contact-page .contact-form-grid {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(12px,1.8vh,17px);
}
body.contact-page .contact-row {
  grid-column:1 / -1;
  display:grid;
  gap:clamp(12px,1.8vw,22px);
  align-items:start;
  min-width:0;
}
body.contact-page .contact-row--primary {
  grid-template-columns:repeat(2,minmax(0,1fr));
}
body.contact-page .contact-row--details {
  grid-template-columns:repeat(3,minmax(0,1fr));
}
body.contact-page .contact-row--message {
  grid-template-columns:minmax(0,7fr) minmax(0,3fr);
}
body.contact-page .contact-row > .contact-field {grid-column:auto; min-width:0;}
body.contact-page .contact-label { margin-bottom:5px; font-size:12.5px; }
body.contact-page .contact-input {
  min-height:40px;
  padding:7px 10px;
}
body.contact-page .contact-textarea {
  display:block;
  min-height:175px;
  height:175px;
  padding:9px 11px;
}
body.contact-page .contact-attachment-field .contact-file-input {
  box-sizing:border-box;
  min-height:40px;
  padding:6px 7px;
  font-size:12px;
}
body.contact-page .contact-file-input::file-selector-button {
  padding:6px 8px;
  margin-right:7px;
  font-size:12px;
}
body.contact-page .contact-file-list {
  max-height:100px;
  overflow-y:auto;
}
body.contact-page .contact-file-name {overflow-wrap:anywhere;}
body.contact-page .contact-consent {grid-column:1 / -1; margin-top:0;}
body.contact-page .contact-form-bottom {
  grid-column:1 / -1;
  display:flex;
  align-items:center;
  gap:10px 17px;
  min-width:0;
  margin-top:0;
}
body.contact-page .contact-submit {
  flex:0 0 auto;
  min-height:40px;
  padding:8px 17px;
}
body.contact-page .contact-form-bottom .contact-form-status {
  display:none;
  flex:1 1 auto;
  min-width:180px;
  max-width:100%;
  margin:0;
  padding:0;
  background:none;
  border:0;
  font-size:13px;
  line-height:1.4;
  font-weight:var(--foehre-weight-medium);
}
body.contact-page .contact-form-bottom .contact-form-status.is-visible {display:block;}
body.contact-page .contact-form-bottom .contact-form-status.is-success {color:var(--brand-green);}
body.contact-page .contact-form-bottom .contact-form-status.is-error {color:var(--brand-orange);}
body.contact-page .contact-required-note {margin-left:auto; flex:0 0 auto;}
body.contact-page .contact-sending-dots {display:inline-block; white-space:nowrap; padding-left:1px;}
body.contact-page .contact-sending-dots span {display:inline-block;}
body.contact-page .contact-sending-dots span:nth-child(2) {
  animation:foehre-sending-second var(--foehre-motion-time, 1.5s) steps(1,end) var(--foehre-motion-repeat, infinite);
}
body.contact-page .contact-sending-dots span:nth-child(3) {
  animation:foehre-sending-third var(--foehre-motion-time, 1.5s) steps(1,end) var(--foehre-motion-repeat, infinite);
}
@keyframes foehre-sending-second {
  0%,32.99% {visibility:hidden;}
  33%,100% {visibility:visible;}
}
@keyframes foehre-sending-third {
  0%,65.99% {visibility:hidden;}
  66%,100% {visibility:visible;}
}

/* [BLOCK-KONTAKT-02] KONTAKT */
@media (max-width:800px) {
  body.contact-page .contact-row--primary,
  body.contact-page .contact-row--details,
  body.contact-page .contact-row--message {grid-template-columns:minmax(0,1fr);}
  body.contact-page .contact-form-grid {gap:14px;}
  body.contact-page .contact-row {gap:12px;}
  body.contact-page .contact-textarea {min-height:170px; height:170px;}
  body.contact-page .contact-form-bottom {flex-wrap:wrap;}
  body.contact-page .contact-form-bottom .contact-form-status {flex:1 1 100%; order:3;}
  body.contact-page .contact-required-note {margin-left:auto;}
}

body.contact-page .contact-attachment-field .contact-file-box {
  position:relative;
  display:flex;
  align-items:center;
  box-sizing:border-box;
  height:40px;
  min-height:40px;
  width:100%;
  border:1px solid color-mix(in srgb, var(--foehre-color-green) 30%, transparent);
  background:color-mix(in srgb, var(--foehre-color-paper) 54%, transparent);
  transition:border-color var(--foehre-motion-time, .2s) ease, background-color var(--foehre-motion-time, .2s) ease;
}
body.contact-page .contact-attachment-field .contact-file-box:hover {border-color:color-mix(in srgb, var(--foehre-color-green) 52%, transparent);}
body.contact-page .contact-attachment-field .contact-file-box:focus-within {
  border-color:var(--brand-orange);
  outline:2px solid color-mix(in srgb, var(--foehre-color-orange) 13%, transparent);
  outline-offset:0;
}
body.contact-page .contact-attachment-field .contact-file-box .contact-file-input {
  position:absolute;
  z-index:1;
  inset:0;
  display:block;
  box-sizing:border-box;
  width:100%;
  height:100%;
  min-height:0;
  opacity:0;
  border:0;
  padding:0;
  cursor:pointer;
}
body.contact-page .contact-attachment-field .contact-file-display {
  display:block;
  min-width:0;
  width:100%;
  padding:0 35px 0 11px;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  color:var(--brand-text);
  font-size:13px;
  line-height:1.3;
  pointer-events:none;
}
body.contact-page .contact-attachment-field .contact-file-clear {
  position:absolute;
  z-index:3;
  top:0;
  right:0;
  width:36px;
  height:100%;
  border:0;
  background:transparent;
  color:var(--brand-text);
  font-size:20px;
  line-height:1;
  cursor:pointer;
}
body.contact-page .contact-attachment-field .contact-file-clear[hidden] {display:none;}
body.contact-page .contact-attachment-field .contact-file-clear:hover,
body.contact-page .contact-attachment-field .contact-file-clear:focus-visible {color:var(--brand-orange);}

@media (min-width:801px) {
  body.contact-page .contact-row--details,
  body.contact-page .contact-row--message {
    grid-template-columns:repeat(3,minmax(0,1fr));
    column-gap:clamp(12px,1.8vw,22px);
  }
  body.contact-page .contact-row--message > .contact-field:first-child {
    grid-column:1 / span 2;
  }
  body.contact-page .contact-row--message > .contact-field:last-child {
    grid-column:3 / span 1;
  }
}
@media (max-width:800px) {
  body.contact-page .contact-row--message {
    grid-template-columns:minmax(0,1fr);
  }
  body.contact-page .contact-row--message > .contact-field {
    grid-column:1 / -1;
  }
}
body.contact-page .contact-textarea {
  resize:none;
  overflow-y:hidden;
  box-sizing:border-box;
}
body.contact-page .contact-input::placeholder,
body.contact-page .contact-textarea::placeholder {
  color:color-mix(in srgb, var(--foehre-color-green) 47%, transparent);
  opacity:1;
  transition:opacity var(--foehre-motion-time, 100ms) ease;
}
body.contact-page .contact-input:focus::placeholder,
body.contact-page .contact-textarea:focus::placeholder {
  opacity:0;
}
body.contact-page .contact-privacy-error {
  grid-column:1 / -1;
  margin:-6px 0 0 26px;
  color:var(--brand-orange);
  font-size:13px;
  font-weight:var(--foehre-weight-medium);
  line-height:1.4;
}
body.contact-page .contact-privacy-error[hidden] {display:none;}
body.contact-page #contact-privacy[aria-invalid="true"] {
  outline:2px solid var(--brand-orange);
  outline-offset:3px;
}

body.contact-page .contact-attachment-field .contact-file-box .contact-file-display {
  padding-right:11px;
}
body.contact-page .contact-attachment-field .contact-file-note {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  column-gap:12px;
  margin:7px 0 0;
  font-size:12px;
  line-height:1.4;
  color:color-mix(in srgb, var(--foehre-color-green) 70%, transparent);
}
body.contact-page .contact-attachment-field .contact-file-note #contact-file-usage {
  flex-shrink:0;
  font-variant-numeric:tabular-nums;
  color:var(--brand-text);
}
body.contact-page .contact-attachment-field .contact-file-list {
  display:grid;
  gap:6px;
  max-height:none;
  overflow:visible;
  margin:8px 0 0;
  padding:0;
  list-style:none;
}
body.contact-page .contact-attachment-field .contact-file-list:empty { display:none; }
body.contact-page .contact-attachment-field .contact-file-item {
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-width:0;
  gap:10px;
  padding:7px 9px;
  border:1px solid color-mix(in srgb, var(--foehre-color-green) 18%, transparent);
  background:color-mix(in srgb, var(--foehre-color-paper) 34%, transparent);
}
body.contact-page .contact-attachment-field .contact-file-name {
  min-width:0;
  flex:1 1 auto;
  overflow-wrap:anywhere;
  white-space:normal;
  font-size:12px;
  line-height:1.35;
}
body.contact-page .contact-attachment-field .contact-file-remove {
  flex:0 0 auto;
  padding:4px 0 4px 6px;
  border:0;
  background:transparent;
  color:var(--brand-orange);
  font-size:12px;
  font-weight:var(--foehre-weight-medium);
  cursor:pointer;
}
body.contact-page .contact-attachment-field .contact-file-remove:hover,
body.contact-page .contact-attachment-field .contact-file-remove:focus-visible {
  text-decoration:underline;
  text-underline-offset:2px;
}

/* [BLOCK-BIBLIOTHEK-03] BIBLIOTHEK */
.library-page .library-article .library-plain-lead {
  max-width: 780px; margin-bottom: 28px;
  font-weight: var(--foehre-weight-light); line-height: 1.55;
}
.library-page .library-article > h2 {
  margin-top: 34px; margin-bottom: 12px;
  font-size: clamp(21px,1.9vw,28px); font-weight: var(--foehre-weight-medium);
}
.library-page .library-article > p:not(.library-lead) {
  max-width: 800px; line-height: 1.6; margin-bottom: 15px;
}
.library-page .library-article .library-simple-links {
  margin-top: 28px;
}
.library-page .library-article .library-sources-plain {
  margin-top: 38px; font-size: 0.92em;
}
.library-page .library-article .library-simple-links a,
.library-page .library-article .library-sources-plain a {
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.library-page .library-article .library-simple-links a:hover,
.library-page .library-article .library-sources-plain a:hover {
  opacity: .8;
}
@media (max-width: 820px) {
  .library-page .library-article > h2 { margin-top: 28px; }
  .library-page .library-article .library-plain-lead { margin-bottom: 24px; }
}

html, body, body *:not(svg):not(path) { font-family:var(--foehre-font-arial); }
body {font-weight:var(--foehre-weight-light);}
body h1,body h2,body h3,body h4,body h5,body h6,
body h1 *,body h2 *,body h3 *,body h4 *,body h5 *,body h6 * {
  font-family:var(--foehre-font-arial) ;
  font-weight:var(--foehre-weight-medium) ;
}
/* Textschatten sind ausnahmslos auf der gesamten Website deaktiviert. */
html body, html body * { text-shadow:none ; -webkit-text-shadow:none ; }
/* Footer ausschließlich als Textlinks, Cookie-Verwaltung bleibt anklickbar. */
body .site-footer.design-footer .cookie-settings-slot { width:auto;height:auto; }
body .site-footer.design-footer .design-footer-cookie-wrap,
body .site-footer.design-footer .cookie-settings-slot,
body .site-footer.design-footer .cookie-settings-button {
  width:auto;height:auto;min-width:0;min-height:0;
  display:inline-flex;align-items:center;justify-content:flex-start;
  padding:0;margin:0;line-height:inherit;
  font-size:inherit; letter-spacing:inherit;
  font-weight:var(--foehre-weight-light);white-space:nowrap;
}
body .site-footer.design-footer .design-linkedin-link {
  display:inline-flex;align-items:center;
  width:auto;height:auto;min-width:0;min-height:0;
  font-size:inherit;line-height:inherit;
  font-weight:var(--foehre-weight-light);text-decoration:none;
}
body .site-footer.design-footer .design-linkedin-icon,
body .site-footer.design-footer .cookie-settings-svg {display:none;}
@media (max-width:800px) {
 body .site-footer.design-footer .design-linkedin-link { align-self:flex-end; }
 body .site-footer.design-footer .design-footer-cookie-wrap { min-height:0; }
}
/* Kleine, ruhige Text-Pfeil-Navigation. Dieselbe feste Position auf jeder
   Einstiegsseite; die Unterkante folgt der letzten Hero-Zeile. */

/* [BLOCK-KAPITEL-NAVIGATION-02] KAPITEL NAVIGATION */
.foehre-chapter-cta {
  position:fixed ;
  z-index:850;
  right:var(--site-ui-gutter,clamp(26px,3vw,62px));
  bottom:max(13px,calc(var(--foehre-step-nav-bottom,58px) - var(--foehre-step-lift,32px)));
  top:auto ;left:auto ;
  display:inline-flex ;
  align-items:center ;
  justify-content:flex-end ;
  gap:clamp(9px,1vw,17px);
  width:auto ;height:auto ;
  min-height:28px;
  padding:0 ;margin:0 ;border:0 ;
  color:var(--foehre-color-paper);background:none ;
  font-family:var(--foehre-font-arial) ;
  font-size:clamp(12px,.94vw,15px) ;
  font-weight:var(--foehre-weight-light) ;
  line-height:1.25 ;
  letter-spacing:.105em;
  text-transform:uppercase;
  text-decoration:none ;
  white-space:nowrap;
  transition:opacity var(--foehre-motion-time, .22s) ease,color var(--foehre-motion-time, .2s) ease;
}
.foehre-chapter-cta .foehre-chapter-cta-label {font-weight:var(--foehre-weight-light) ;}
.foehre-chapter-cta .foehre-chapter-cta-icon {
  display:block; width:clamp(23px,2.25vw,32px);height:23px;
  flex:0 0 auto;overflow:visible;
  transition:transform var(--foehre-motion-time, .32s) cubic-bezier(.22,1,.36,1);
}
.foehre-chapter-cta .foehre-chapter-cta-icon path {
  fill:none;stroke:currentColor;stroke-width:1.65;
  stroke-linecap:round;stroke-linejoin:round;
}
.foehre-chapter-cta[data-direction="down"] .foehre-chapter-cta-icon {
  transform:rotate(90deg);
}
.foehre-chapter-cta:is(:hover,:focus-visible) .foehre-chapter-cta-icon {
  transform:translateX(6px);
}
.foehre-chapter-cta[data-direction="down"]:is(:hover,:focus-visible) .foehre-chapter-cta-icon {
  transform:rotate(90deg) translateX(6px);
}
.foehre-chapter-cta:is(:hover,:focus-visible) {opacity:.72 ;
  text-decoration:none ;
}
.foehre-chapter-cta:focus-visible {outline:1px solid currentColor;outline-offset:8px;}

.foehre-next-arrow {display:none ;}
@media (max-width:800px) {
  .foehre-chapter-cta {
    display:inline-flex ;
    right:var(--site-ui-gutter,24px);
    bottom:clamp(20px,5.2svh,42px);
    font-size:12px ;
    letter-spacing:.08em;
  }
  .foehre-chapter-cta .foehre-chapter-cta-icon {width:24px;height:19px;}
}
/* Leistungen: die neue Botschaft hat auf Desktop genau drei Textzeilen.
   Breite und Schriftgröße stellen sicher, dass keine Wortfolge abschneidet. */
@media (min-width:801px) {
  body.design-services #services-top > h1 {
    width:min(86%,1100px);
    max-width:1100px;
    font-size:clamp(23px,2.55vw,38px);
    line-height:1.13;
    text-wrap:initial;
  }
  body.design-services #services-top .foehre-service-headline-line {
    display:block;white-space:nowrap;
  }
}
@media (min-width:801px) and (max-width:1230px) {
  body.design-services #services-top > h1 {font-size:clamp(21px,2.45vw,31px);width:calc(100% - 155px);}
}
@media (min-width:801px) and (max-width:1010px) {
  body.design-services #services-top .foehre-service-headline-line {white-space:normal;}
}
@media (max-width:800px) {
  body.design-services #services-top .foehre-service-headline-line {display:inline;white-space:normal;}
  body.design-services #services-top > h1 {font-size:clamp(22px,6.05vw,35px);}
}

/* STARTSEITE direkt neben DE / EN / BKS; beide Abstände zum X identisch. */
.site-mobile-menu.design-menu-overlay .design-menu-top {
  display:flex;
  justify-content:flex-end;
  align-items:center;
  column-gap:var(--menu-top-gap,24px);
}
.site-mobile-menu.design-menu-overlay .design-menu-home {
  margin:0;
  flex:0 0 auto;
}
.site-mobile-menu.design-menu-overlay .design-menu-languages,
.site-mobile-menu.design-menu-overlay .design-menu-close {margin:0;}
/* Der zusätzliche Kontaktlink unten rechts im Overlay entfällt komplett. */
.site-mobile-menu.design-menu-overlay .design-menu-bottom {display:none;}

/* Über uns: weißer, deutlich sichtbarer Kreis – Text – leichter Pfeil.
   Keine Umrandung; der Kreis übernimmt beim Hover die Akzentfarbe. */
body.design-about .design-about-contact-info .design-about-contact-button {
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  gap:clamp(12px,1.4vw,22px);
  width:max-content;
  max-width:100%;
  padding:0;
  margin:0 0 18px;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  text-decoration:none;
  line-height:1.25;
  white-space:nowrap;
}
body.design-about .design-about-contact-info .design-about-contact-button::before {
  content:"";
  display:block;
  flex:0 0 auto;
  width:clamp(20px,1.7vw,28px);
  aspect-ratio:1;
  border:0;
  border-radius:50%;
  background:var(--foehre-color-paper);
  transition:background-color var(--foehre-motion-time, .2s) ease,transform var(--foehre-motion-time, .2s) ease;
}
body.design-about .design-about-contact-info .design-about-contact-button:is(:hover,:focus-visible)::before {
  background:var(--brand-orange);
  transform:scale(1.06);
}
body.design-about .design-about-contact-info .design-about-contact-button > span {
  line-height:1;
  font-size:clamp(24px,2.1vw,33px);
  font-weight:var(--foehre-weight-light);
}

/* Auf Desktop sind die sechs Logos EINE gemeinsame optisch ausgeglichene
   Zeile. Überschrift direkt an der Grau/Grün-Trennkante, graues Feld kürzer. */
@media (min-width:801px) {
  body.design-about #about-partners.foehre-full-chapter {
    
    
    padding:clamp(28px,3vw,49px) var(--site-ui-gutter) clamp(44px,5vw,75px);
    justify-content:flex-start;
  }
  body.design-about #about-partners .design-about-relations-shell {
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    grid-template-rows:auto auto;
    align-items:center;
    justify-items:stretch;
    width:100%;
    max-width:100%;
    padding:0;
    margin:0;
  }
  body.design-about #about-partners .design-about-group,
  body.design-about #about-partners .design-brand-row--partners,
  body.design-about #about-partners .design-brand-row--network {display:contents;}
  body.design-about #about-partners #partner-heading {
    grid-column:1/-1;
    grid-row:1;
    
    
  }
  body.design-about #about-partners .design-partner-logo,
  body.design-about #about-partners .design-network-logo {
    box-sizing:border-box;
    display:flex;
    grid-row:2;
    flex:initial;
    align-items:center;
    justify-content:center;
    justify-self:stretch;
    width:100%;
    min-width:0;
    max-width:100%;
    min-height:0;
    margin:0;
    padding:0;
    overflow:visible;
    transform:none;
  }
  body.design-about #about-partners .design-partner-logo img,
  body.design-about #about-partners .design-network-logo img {
    display:block;
    width:100%;
    height:100%;
    max-width:100%;
    
    object-fit:contain;
    object-position:center;
    transform:none;
  }
}
@media (max-width:800px) {
  /* Die vereinbarte zweispaltige mobile Logoanordnung bleibt bestehen. */
  body.design-about #about-partners.foehre-full-chapter {
    
    justify-content:flex-start;
  }
  body.design-about #about-partners .design-about-relations-shell {
    align-content:start;
  }
  body.design-about .design-about-contact-info .design-about-contact-button {
    font-size:clamp(12px,3.5vw,16px);
    gap:clamp(10px,2vw,16px);
  }
  body.design-about .design-about-contact-info .design-about-contact-button::before {width:20px;}
}
@media (max-width:380px) {
  .site-mobile-menu.design-menu-overlay .design-menu-top {column-gap:7px;}
  .site-mobile-menu.design-menu-overlay .design-menu-home,
  .site-mobile-menu.design-menu-overlay .design-menu-languages {font-size:clamp(11px,3.25vw,14px);}
  .site-mobile-menu.design-menu-overlay .design-menu-close {width:29px;min-width:29px;flex-basis:29px;}
}
/* MEHR DAZU liegt im Viewport, nicht innerhalb eines scrollenden Bereichs.
   Auch beim Umschalten auf den nachfolgenden Kapitellink bleibt es an Ort. */
html body a.foehre-chapter-cta {
  position:fixed;
  z-index:950;
  transform:none;
  will-change:auto;
}

@media (min-width:801px) {
  body.design-home .design-hero-content,
  body.design-about .design-about-hero-stage,
  body.design-services .design-services-head,
  body.design-library-index .design-library-intro {
    padding-bottom: calc(var(--foehre-step-nav-bottom, 58px) + var(--foehre-cta-raise));
  }



  body.design-about #about-partners .design-about-relations-shell {
    column-gap: clamp(10px,1.3vw,20px);
  }
  body.design-about #about-partners #partner-heading {
    margin-bottom: 0;
    align-self: end;
  }
  body.design-about #about-partners .design-partner-logo,
  body.design-about #about-partners .design-network-logo {
    height: clamp(56px,5.7vw,78px);
  }
  body.design-about #about-partners .design-partner-logo img,
  body.design-about #about-partners .design-network-logo img {
    max-height: 100%;
  }

  /* ABC-Reihenfolge: A-NULL, HAN, Ingenieurbüros, ÖGNI, studio acker, studio calas */
  body.design-about #about-partners .design-partner-logo--anull {grid-column:1; order:1;}
  body.design-about #about-partners .design-partner-logo--han {grid-column:2; order:2;}
  body.design-about #about-partners .design-network-logo:first-child {grid-column:3; order:3;}
  body.design-about #about-partners .design-network-logo:last-child {grid-column:4; order:4;}
  body.design-about #about-partners .design-partner-logo--acker {grid-column:5; order:5;}
  body.design-about #about-partners .design-partner-logo--calas {grid-column:6; order:6;}

  body.design-about #about-partners .design-partner-logo--anull img {width:62%; max-height:64px;}
  body.design-about #about-partners .design-partner-logo--han img {width:82%; max-height:44px;}
}

/* Profil: eigene Namenszeile und definierter Vierzeiler ohne automatische
   Großschreibung; auf schmalen Geräten darf der Text natürlich umbrechen. */
body.design-about #about-profile .design-about-person {
  font-weight:var(--foehre-weight-light);
  text-transform:none;
  line-height:1.28;
}
body.design-about #about-profile .foehre-bio-line {
  display:block;
}
body.design-about #about-profile .foehre-bio-name {
  font-weight:var(--foehre-weight-medium);
  margin-bottom:clamp(4px,.35vw,7px);
}
/* Kontaktdaten in normaler Schreibung, CTA als gestaltetes Großbuchstaben-Element. */
body.design-about #about-profile .design-about-contact-info,
body.design-about #about-profile .design-about-contact-info > span,
body.design-about #about-profile .design-about-contact-info > span a {
  text-transform:none;
}
body.design-about #about-profile .design-about-contact-button {
  text-transform:uppercase;
}


body.design-about #about-partners :is(.design-partner-logo,.design-network-logo) {
  transform:scale(1);
  transform-origin:center center;
  transition:transform var(--foehre-motion-time, .22s) ease,opacity var(--foehre-motion-time, .22s) ease;
}
@media (hover:hover) and (pointer:fine) {
  body.design-about #about-partners :is(.design-partner-logo,.design-network-logo):hover {
    transform:scale(1.05);
    opacity:1;
    position:relative;
    z-index:2;
  }
}
body.design-about #about-partners :is(.design-partner-logo,.design-network-logo):focus-visible {
  transform:scale(1.05);
}
@media (prefers-reduced-motion:reduce) {
  body.design-about #about-partners :is(.design-partner-logo,.design-network-logo) {
    transition:none;
  }
}


/* Weniger Luft ober- und unterhalb, nicht an den eigentlichen Logos. */

@media (max-width:800px) {
  body.design-about #about-profile .foehre-bio-line {
    display:inline;
  }
  body.design-about #about-profile .foehre-bio-line:not(:last-child)::after { content:" "; }
  body.design-about #about-profile .foehre-bio-name {
    display:block;
    margin-bottom:6px;
  }
  body.design-about #about-profile .foehre-bio-name::after { content:none; }
}

/* [BLOCK-KAPITEL-NAVIGATION-03] KAPITEL NAVIGATION */
html body a.foehre-chapter-cta {
  transition:color var(--foehre-motion-time, .2s) ease;
}

/* A neutral information label has no hover or action; an actual destination
   appears only after a deliberate user scroll. */
html body a.foehre-chapter-cta:not(.is-interactive),
html body a.foehre-chapter-cta:not(.is-interactive):is(:hover,:focus-visible) {
  pointer-events:none;
  cursor:default;
  opacity:1;
  text-decoration:none;
}
html body a.foehre-chapter-cta.is-interactive {
  pointer-events:auto;
  cursor:pointer;
}
html body a.foehre-chapter-cta:not(.is-interactive) .foehre-chapter-cta-icon,
html body a.foehre-chapter-cta:not(.is-interactive):is(:hover,:focus-visible) .foehre-chapter-cta-icon {
  transition:none ;
}
html body a.foehre-chapter-cta:not(.is-interactive)[data-direction="down"] .foehre-chapter-cta-icon {
  transform:rotate(90deg) ;
}
html body a.foehre-chapter-cta:not(.is-interactive)[data-direction="right"] .foehre-chapter-cta-icon {
  transform:none ;
}


/* Auf allen Kapiteln dieselbe Hoverfarbe. Greift auch bei Über uns, wenn
   der Link während des Scrollens von Weiß auf Dunkelgrün gewechselt hat. */
html body[class] a.foehre-chapter-cta.is-interactive:is(:hover,:focus-visible),
html body[class] a.foehre-chapter-cta.is-interactive.is-on-light:is(:hover,:focus-visible) {
  opacity:1;
  text-decoration:none;
}
/* Passive MEHR-DAZU-Hinweise bleiben ohne Link, Cursor oder Hoveranimation. */
html body[class] a.foehre-chapter-cta.is-hint,
html body[class] a.foehre-chapter-cta.is-hint:is(:hover,:focus-visible) {
  pointer-events:none;
  cursor:default;
  opacity:1;
}


@media (min-width:801px) {
  body.design-about #about-partners.foehre-full-chapter {
    min-height:0;
    height:auto;
    padding-top:clamp(4px,.5vw,8px);
    padding-bottom:clamp(6px,.7vw,11px);
  }
  body.design-about #about-partners .design-about-relations-shell {
    row-gap:clamp(4px,.5vw,8px);
  }
  body.design-about #about-partners #partner-heading {
    margin:0;
  }
  /* [MEDIA-GEBUENDELT] Partnerbereich auf großen Displays; Desktop-CSS bleibt in gleicher Reihenfolge. */

/* Partner in einer einzigen Reihe: die breiten Studio-Wortmarken kleiner,
   die kompakteren Mitgliedschaftslogos größer, 5%-Hover bleibt erhalten. */
body.design-about #about-partners .design-partner-logo--acker img {
    width:70% ; max-height:34px ;
  }
  body.design-about #about-partners .design-partner-logo--calas img {
    width:70%; max-height:34px;
  }
  body.design-about #about-partners .design-network-logo:first-child img {
    width:84%; max-height:70px;
  }
  body.design-about #about-partners .design-network-logo:last-child img {
    width:58%; max-height:74px;
  }
}
@media (max-width:800px) {
  body.design-about #about-partners.foehre-full-chapter {
    min-height:0;
    height:auto;
    padding-top:clamp(10px,2.5vw,18px);
    padding-bottom:clamp(12px,3vw,21px) ;
  }
  body.design-about #about-partners .design-about-relations-shell {
    row-gap:clamp(10px,3vw,18px);
  }
}


html body a.foehre-chapter-cta {
  inset: auto var(--site-ui-gutter,clamp(26px,3vw,62px)) var(--foehre-chapter-bottom,26px) auto;
}
@media (max-width:800px) {
  html body a.foehre-chapter-cta {
    inset: auto var(--site-ui-gutter,24px) var(--foehre-chapter-bottom,28px) auto;
  }
}


/* Farbwechsel wieder vor PARTNER: die grüne Profilseite endet an der
   Oberkante des Partnerblocks. Alle sechs Logos liegen auf Hellgrau. */
body.design-about #about-partners.foehre-full-chapter {
  background: var(--foehre-color-paper);
  color: var(--foehre-color-green);
}
body.design-about #about-partners #partner-heading,
body.design-about #about-partners .design-about-group h2 {
  color: var(--foehre-color-green);
}
/* Die Studio-Wortmarken behalten auf Hellgrau wieder ihre Originalfarben. */
body.design-about #about-partners :is(.design-partner-logo--acker,.design-partner-logo--calas) img {
  filter: none;
}

@media (min-width: 801px) {
  
  body.design-about #about-partners :is(.design-partner-logo,.design-network-logo) {
    position: relative;
    top: -13px;
  }
  body.design-about #about-partners .design-partner-logo--acker img {
    width: 66.5%;
    max-height: 32.3px;
  }
}
@media (max-width: 800px) {
  body.design-about #about-partners :is(.design-partner-logo,.design-network-logo) {
    position: relative;
    top: -7px;
  }
  body.design-about #about-partners .design-partner-logo--acker img {
    transform: scale(.95);
  }
}

/* Beim Erreichen des grauen Partnerbereichs wird der Weiter-Link wieder
   dunkelgrün, bei Hover aber weiterhin orange. */

/* Footer typografisch klar kleiner als die ca. 12–15px große Kapitel-CTA. */

html body .site-footer.design-footer .design-footer-legal,
html body .site-footer.design-footer .design-footer-social,
html body .site-footer.design-footer .design-footer-separator,
html body .site-footer.design-footer :is(a,button) {
  font-size: var(--foehre-footer-font-size);
  line-height: 1.15;
  font-weight: var(--foehre-weight-light);
}
@media (min-width: 801px) {
  html body .site-footer.design-footer {
    height: 39px;
    min-height: 39px;
    padding-block: 0;
  }
}
@media (max-width: 800px) {
  :root { --foehre-footer-font-size: 10px; }
  html body .site-footer.design-footer {
    height: auto;
    min-height: 0;
    padding-block: 12px;
  }
  html body .site-footer.design-footer .design-footer-legal,
  html body .site-footer.design-footer .design-footer-social {
    gap: 7px;
  }
}

body.design-about #about-partners .design-about-group #partner-heading {
  color: var(--foehre-color-green);
}
/* On narrow screens the last logo row must stay clearly above the
   fixed Weiter-Link instead of sharing its vertical line. */
@media (max-width: 800px) {
  body.design-about #about-partners.foehre-full-chapter {
    padding-bottom: clamp(41px,10vw,54px);
  }
}

/* Bibliotheksliste: auf Weiß orange (einschließlich Jahreszahl), nicht schwarz. */

/* [BLOCK-BIBLIOTHEK-04] BIBLIOTHEK */
html body.design-library-index #library-topics a.design-library-entry:is(:hover,:focus-visible) {
  background:var(--foehre-color-paper);
}
/* Suchfeld neben DIE BIBLIOTHEK. */
body.design-library-index #library-topics .foehre-library-heading-row {
  display:flex;justify-content:space-between;align-items:center;gap:clamp(18px,4vw,70px);
  margin:0 0 clamp(16px,2.2vw,30px);
}
body.design-library-index #library-topics .foehre-library-heading-row > h2 {
  margin:0;flex:0 0 auto; font-size:clamp(32px,2.8vw,45px);
  text-transform:uppercase;font-weight:var(--foehre-weight-medium);
}
/* Alle Artikel öffnen wie die Startseite: echtes Foto über die gesamte erste Ansicht. */
html body.library-page .library-main {
  padding:0;
  background:var(--foehre-color-orange);
}
html body.library-page .design-article-hero {
  position:relative;
  display:flex;
  width:100%;
  height:calc(100svh - var(--header-height,124px));
  min-height:550px;
  max-height:none;
  background-image:linear-gradient(180deg,color-mix(in srgb, var(--foehre-color-black) 10%, transparent),color-mix(in srgb, var(--foehre-color-black) 10%, transparent) 30%,color-mix(in srgb, var(--foehre-color-black) 55%, transparent)),url("../Images/Hintergruende/wood-panels.webp");
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  padding:0;
  margin:0;
}
html body.library-page .design-article-hero-inner {
  position:relative;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:32px;
  width:100%;
  max-width:none;
  margin:0;
  padding:0 var(--site-ui-gutter,clamp(26px,3vw,62px)) clamp(56px,7svh,86px);
}
html body.library-page h1.design-article-heading {
  display:block;
  margin:0;
  flex:0 1 73%;
  max-width:1050px;
  color:var(--foehre-color-paper);
  font-size:var(--foehre-hero-heading-size,clamp(32px,3.15vw,56px));
  font-weight:var(--foehre-weight-medium);
  line-height:1.13;
  letter-spacing:0;
  text-transform:uppercase;
  text-wrap:pretty;
}
/* DEAKTIVIERTER MEHR-DAZU-HINWEIS: gleiche Typografie und Pfeilform wie andere Kapitel. */
html body.library-page .foehre-article-hint {
  display:inline-flex;align-items:center;justify-content:flex-end;gap:clamp(9px,1vw,17px);
  color:var(--foehre-color-paper); background:none;
  font:300 clamp(12px,.94vw,15px)/1.25 var(--foehre-font-base);
  letter-spacing:.105em;text-transform:uppercase;white-space:nowrap;
  flex:0 0 auto;pointer-events:none;user-select:none;cursor:default;
  transition:opacity var(--foehre-motion-time, .35s) ease,visibility var(--foehre-motion-time, .35s) ease;
}
html body.library-page .foehre-article-hint.is-hidden {opacity:0;visibility:hidden;}
html body.library-page .foehre-article-hint svg {
  display:block;width:clamp(23px,2.25vw,32px);height:23px;
  transform:rotate(90deg);overflow:visible;flex:0 0 auto;
}
html body.library-page .foehre-article-hint svg path {
  fill:none;stroke:currentColor;stroke-width:1.65;
  stroke-linecap:round;stroke-linejoin:round;
}
/* Same editorial space as other chapters below the hero. */
html body.library-page .library-shell {
  width:min(calc(100% - 2*var(--site-ui-gutter,40px)),1460px);
  margin:0 auto;
  padding:0;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(230px,300px);
  gap:clamp(32px,5.5vw,96px);
  align-items:start;
}
html body.library-page .library-content {grid-column:1;grid-row:1;padding:clamp(54px,7vw,100px) 0 clamp(50px,7vw,100px);}
html body.library-page .library-sidebar {
  grid-column:2;grid-row:1;
  padding:clamp(54px,7vw,100px) 0 50px;
  max-height:none;
  position:sticky;
  top:var(--header-height,124px);
  overflow:visible;
  z-index:5;
}
html body.library-page .library-sidebar-title {
  color:var(--foehre-color-paper);
  font:500 clamp(15px,1vw,18px)/1.25 var(--foehre-font-base);
  text-transform:uppercase;
  letter-spacing:.045em;
}
html body.library-page .library-nav {
  display:flex;flex-direction:column;gap:6px;
}
html body.library-page .library-nav :is(ul,li) {margin:0; padding:0;list-style:none;}
html body.library-page .library-nav-topics {margin:0;gap:7px;}
html body.library-page .library-nav-topic {padding:0;}
html body.library-page .library-nav :is(.library-nav-link,.library-nav-topic-link,.library-nav-sublink) {
  position:relative;
  display:flex;align-items:center;
  flex-flow:row nowrap;
  text-transform:uppercase;
  font:300 clamp(12px,.93vw,14px)/1.25 var(--foehre-font-base);
  letter-spacing:.02em;
  color:var(--foehre-color-paper);
  background:transparent;
  margin:0;
  border:0;
  border-radius:0;
  box-shadow:none;
  text-align:left;
  text-decoration:none;
  transition:color var(--foehre-motion-time, .18s) ease;
}
html body.library-page .library-nav :is(.library-nav-link,.library-nav-topic-link,.library-nav-sublink)::before {
  content:"→";
  position:static;
  display:inline-block;
  height:auto;
  background:none;
  border:0;
  color:inherit;
  font:300 25px/1 var(--foehre-font-base);
  transform:none;
  /* The arrow motion is owned by this component and disabled by the
     inherited token under prefers-reduced-motion (no priority override). */
  transition:var(--foehre-library-arrow-transition, transform var(--foehre-motion-time, .24s) ease);
}
html body.library-page .library-nav .library-nav-topic-link::after {content:none;display:none;}
html body.library-page .library-nav-sublist {margin:0;display:flex;flex-direction:column;}
html body.library-page .library-nav :is(.library-nav-link,.library-nav-topic-link,.library-nav-sublink):is(:hover,:focus-visible) {
  color:var(--foehre-color-black);
}
html body.library-page .library-nav :is(.library-nav-link,.library-nav-topic-link,.library-nav-sublink):is(:hover,:focus-visible)::before {transform:translateX(6px);}
html body.library-page .library-nav a[aria-current="page"] {color:var(--foehre-color-paper);font-weight:var(--foehre-weight-medium);}
/* Article text / search replace breadcrumbs. */
html body.library-page .library-article {max-width:100%;}
html body.library-page .library-breadcrumbs {display:none;}
html body.library-page .library-article > .foehre-library-search {margin:0 0 clamp(30px,3vw,46px);}
/* Nächster Beitrag: auf allen Unterseiten zwischen zwei Hauptartikeln. */
html body.library-page .foehre-next-article {
  margin:clamp(55px,6vw,105px) 0 0;
  padding:0;
}
html body.library-page .foehre-next-article a {
  display:inline-flex;align-items:center;
  color:var(--foehre-color-paper);
  font:300 clamp(13px,1vw,16px)/1.25 var(--foehre-font-base);
  
  text-decoration:none;
  transition:color var(--foehre-motion-time, .2s) ease;
}
html body.library-page .foehre-next-article svg {width:29px;height:23px;flex:0 0 auto;transition:transform var(--foehre-motion-time, .22s) ease;}
html body.library-page .foehre-next-article svg path {fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;}
html body.library-page .foehre-next-article a:is(:hover,:focus-visible) {color:var(--foehre-color-black);}
html body.library-page .foehre-next-article a:is(:hover,:focus-visible) svg {transform:translateX(7px);}
/* Search on both article and index pages. Subtle line, no button skin. */

/* [BLOCK-BIBLIOTHEK-05] BIBLIOTHEK */
html body .foehre-library-search {position:relative;z-index:20;max-width:100%;width:min(100%,390px);flex:0 1 390px;min-width:0;}
html body .foehre-library-search .foehre-search-label {
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;
}
html body .foehre-search-field {
  position:relative;display:flex;align-items:center;gap:12px;
  width:100%;border-bottom:1px solid color-mix(in srgb, var(--foehre-color-paper) 75%, transparent);padding:9px 3px 11px;
  transition:border-color var(--foehre-motion-time, .18s) ease;
}
html body .foehre-search-field:focus-within {border-color:var(--foehre-color-black);}
html body .foehre-search-field > svg {width:19px;height:19px;flex:0 0 19px;stroke:var(--foehre-color-paper);stroke-width:1.4;}
html body .foehre-search-field input[type=search] {
  display:block;flex:1;min-width:0;width:100%;height:30px;
  padding:0;border:0;border-radius:0;outline:none;
  color:var(--foehre-color-paper);background:transparent;box-shadow:none;
  font:300 clamp(13px,1vw,17px)/1.35 var(--foehre-font-base);
  text-transform:none;
}
html body .foehre-search-field input[type=search]::placeholder {color:color-mix(in srgb, var(--foehre-color-paper) 80%, transparent);opacity:1;}
html body .foehre-search-results {
  position:absolute;inset:100% 0 auto;z-index:120;
  background:var(--foehre-color-orange);box-shadow:0 14px 30px color-mix(in srgb, var(--foehre-color-black) 23%, transparent);
  border:1px solid color-mix(in srgb, var(--foehre-color-paper) 60%, transparent);padding:15px 15px 18px;
  max-height:min(70vh,450px);overflow-y:auto;scrollbar-width:thin;
}
html body .foehre-search-results[hidden] {display:none;}
html body .foehre-search-result-count {font:500 12px/1.3 var(--foehre-font-base);color:var(--foehre-color-paper);margin:0 0 8px;}
html body .foehre-search-result-list {list-style:none;margin:0;padding:0;}
html body .foehre-search-result-list li {margin:0;padding:0;border-top:1px solid color-mix(in srgb, var(--foehre-color-paper) 30%, transparent);}
html body .foehre-search-result-link {display:block;padding:12px 0;text-decoration:none;color:var(--foehre-color-paper);}
html body .foehre-search-result-link strong {display:block;color:inherit;font:500 13px/1.3 var(--foehre-font-base);text-transform:uppercase;}
html body .foehre-search-excerpt {display:block;color:inherit;font:300 12px/1.4 var(--foehre-font-base);margin:6px 0 0;}
html body .foehre-search-result-link:is(:hover,:focus-visible),html body .foehre-search-result-link:is(:hover,:focus-visible) * {color:var(--foehre-color-black);}
html body .foehre-search-result-empty {font:300 13px/1.4 var(--foehre-font-base);color:var(--foehre-color-paper);}
html body .foehre-search-highlight {background:var(--foehre-color-paper);color:var(--foehre-color-orange);padding:0 .07em;}
@media(max-width:820px) {
  html body.library-page .design-article-hero {min-height:calc(100svh - var(--header-height,84px));height:calc(100svh - var(--header-height,84px));}
  html body.library-page .design-article-hero-inner {
    flex-direction:column;justify-content:flex-end;align-items:stretch;
    padding:0 var(--site-ui-gutter,26px) clamp(56px,9svh,83px);
    gap:25px;
  }
  html body.library-page h1.design-article-heading {flex:0 0 auto;width:100%;max-width:100%;font-size:clamp(26px,6vw,41px);}
  html body.library-page .foehre-article-hint {align-self:flex-end;}
  html body.library-page .library-shell {width:100%;display:flex;flex-direction:column;gap:0;}
  html body.library-page .library-content {order:1;padding:30px var(--site-ui-gutter,26px) 70px;width:100%;}
  html body.library-page .library-mobile-toolbar {order:0;padding:12px var(--site-ui-gutter,26px);}
  html body.library-page .library-sidebar {
    position:fixed;grid-column:auto;grid-row:auto;top:var(--header-height,84px);
    left:0;bottom:0;z-index:998;order:initial;
    height:auto;width:min(86vw,340px);max-height:none;
    background:var(--foehre-color-orange);visibility:hidden;
    overflow-y:auto;transform:translateX(-104%);
    padding:25px 21px 45px;
  }
  html body.library-page .library-sidebar.is-open {visibility:visible;transform:translateX(0);}
  html body.library-page .library-nav :is(.library-nav-link,.library-nav-topic-link,.library-nav-sublink) {color:var(--foehre-color-paper);}
  html body.library-page .library-mobile-toggle {border:1px solid color-mix(in srgb, var(--foehre-color-paper) 65%, transparent);color:var(--foehre-color-paper);background:transparent;}
  html body.library-page .foehre-search-results {max-height:45vh;}
  body.design-library-index #library-topics .foehre-library-heading-row {align-items:flex-start;flex-direction:column;gap:12px;}
  body.design-library-index #library-topics .foehre-library-heading-row > .foehre-library-search {width:min(100%,420px);flex:0 0 auto;}
}
@media(prefers-reduced-motion:reduce) {
  html body.library-page {--foehre-library-arrow-transition:none;}
  html body.library-page .foehre-article-hint,
  html body.library-page .foehre-next-article svg,
  html body.library-page .library-nav :is(a)::before {transition:none;}
}

html body.library-page .library-nav :is(.library-nav-link,.library-nav-topic-link,.library-nav-sublink) {
  justify-content:flex-start;
  width:100%;
}
html body.library-page .library-nav :is(.library-nav-link,.library-nav-topic-link,.library-nav-sublink)::before {
  text-align:left;
}

/* Präziser Hoverzustand: sowohl Titel als auch Jahr im selben Orange. */

/* Nur die Überschrift verschieben: Farbübergang, Logoposition und Abstände
   der bestehenden Partnerzeile bleiben unverändert. */
body.design-about #about-partners .design-about-group #partner-heading {
  transform: translateY(12px);
}
@media (max-width:800px) {
  body.design-about #about-partners .design-about-group #partner-heading {
    transform: translateY(9px);
  }
}

body.design-about #about-partners .design-about-group #partner-heading {
  font-size: clamp(15px, 1.25vw, 21px); /* DI David Udovčić */
  font-weight: var(--foehre-weight-medium);
  line-height: 1.28;
}
@media (max-width: 800px) {
  body.design-about #about-partners .design-about-group #partner-heading {
    font-size: clamp(12px, 3.85vw, 16px); /* gleicher mobiler Profilname */
  }
}

/* Editorial index on article pages is lifted by approximately one title height. */

/* Whole Bibliothek heading is the return link. The search sits directly below. */

/* [BLOCK-BIBLIOTHEK-06] BIBLIOTHEK */
html body.library-page .library-sidebar-head {
  position:relative;
  display:block;
  padding:0;
  border:0;
}
html body.library-page .library-sidebar-title {margin:0 0 5px;}
html body.library-page .library-sidebar-home {
  display:inline-block;
  font:inherit;
  letter-spacing:inherit;
  text-transform:inherit;
  text-decoration:none;
  color:var(--foehre-color-paper);
}
html body.library-page .library-sidebar-head > .foehre-library-search {
  position:relative;display:block;
  width:100%;min-width:0;max-width:100%;
  margin:0;flex:none;
}
/* More compact topic rows. All level-one titles keep exactly the same left edge. */
html body.library-page .library-nav,
html body.library-page .library-nav-topics {gap:1px;}
html body.library-page .library-nav :is(.library-nav-topic-link,.library-nav-sublink) {
  min-height:27px;
  padding-top:3px;
  padding-bottom:3px;
}
html body.library-page .library-nav-sublist {
  gap:0;
  padding:0;
}
/* Search has no horizontal white rule, either in the sidebar or on the index. */
html body:is(.library-page,.design-library-index) .foehre-search-field,
html body:is(.library-page,.design-library-index) .foehre-search-field:focus-within {
  border:none;
  box-shadow:none;
  padding:7px 0 8px;
}
html body:is(.library-page,.design-library-index) .foehre-search-results {
  box-sizing:border-box;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  max-height:calc(100dvh - 200px);
  border:0;
  padding:9px 12px 13px;
  box-shadow:0 10px 16px color-mix(in srgb, var(--foehre-color-black) 12%, transparent);
}
html body:is(.library-page,.design-library-index) .foehre-search-results.is-space-constrained {
  padding:0;border:0;box-shadow:none;overflow:hidden;
}
/* Full-text matching remains, but each result displays only the article title. */
html body:is(.library-page,.design-library-index) .foehre-search-result-link {padding:9px 0;}
html body:is(.library-page,.design-library-index) .foehre-search-result-list li:first-child {border-top:0;}
html body:is(.library-page,.design-library-index) .foehre-search-excerpt {display:none;}
/* Next navigation: arrow first, human case, no uppercase text-transform. */
html body.library-page .foehre-next-article a {
  text-transform:none;
  letter-spacing:normal;
  gap:13px;
}
html body.library-page .foehre-next-article a > svg {order:0;}
html body.library-page .foehre-next-article a > span {order:1;}

/* [BLOCK-BIBLIOTHEK-07] BIBLIOTHEK */
@media (max-width:820px) {
  html body.library-page .library-sidebar {
    padding-top:25px;
  }
  html body.library-page .library-sidebar-head {padding-right:42px;}
  html body.library-page .library-sidebar-close {
    position:absolute;top:0;right:0;
  }
  html body.library-page .library-sidebar-head > .foehre-library-search {width:100%;}
}

/* Die Themenübersicht beginnt nahe am oberen Rand des zweiten Kapitels
   statt in der verbleibenden Fläche vertikal zentriert zu werden. */
@media (min-width:801px) {
  html body.design-library-index #library-topics.design-library-list {
    justify-content:flex-start;
    padding-top:clamp(94px,14svh,128px);
  }
}
@media (max-width:800px) {
  html body.design-library-index #library-topics.design-library-list {
    padding-top:clamp(32px,6svh,52px);
  }
}
/* Suchfeld direkt rechts neben dem Kapiteltitel; beide unten bündig.
   Kein großer Zwischenraum und keine Linie unter dem Suchfeld. */
html body.design-library-index #library-topics .foehre-library-heading-row {
  justify-content:flex-start;
  align-items:flex-end;
  flex-direction:row;
  flex-wrap:nowrap;
  gap:clamp(14px,1.8vw,26px);
  margin-bottom:clamp(11px,1.65vw,18px);
}
html body.design-library-index #library-topics .foehre-library-heading-row > h2 {
  flex:0 0 auto;
  line-height:1.12;
  margin:0;
}
html body.design-library-index #library-topics .foehre-library-heading-row > .foehre-library-search {
  flex:0 1 350px;
  width:min(350px,100%);
  min-width:0;
  margin:0;
}
html body.design-library-index #library-topics .foehre-library-heading-row .foehre-search-field {
  padding:0 0 1px;
}
html body.design-library-index #library-topics .foehre-library-heading-row .foehre-search-field input[type="search"] {
  height:31px;
}
@media (max-width:580px) {
  html body.design-library-index #library-topics .foehre-library-heading-row {
    flex-direction:column;
    align-items:flex-start;
    gap:5px;
  }
  html body.design-library-index #library-topics .foehre-library-heading-row > .foehre-library-search {
    width:min(100%,390px);
    flex:0 0 auto;
  }
}
/* Index rechts: geringere Zeilenhöhe und bündige Hauptthemen;
   Unterthemen bleiben sichtbar eingerückt. */
html body.library-page .library-nav,
html body.library-page .library-nav-topics,
html body.library-page .library-nav-sublist {
  gap:0;
}
html body.library-page .library-nav :is(.library-nav-link,.library-nav-topic-link,.library-nav-sublink) {
  min-height:22px;
  padding:2px 0;
  line-height:1.17;
  gap:9px;
}
html body.library-page .library-nav :is(.library-nav-link,.library-nav-topic-link,.library-nav-sublink)::before {
  flex:0 0 25px;
  width:25px;
  font-size:19px;
  line-height:1;
}
html body.library-page .library-nav .library-nav-sublink {
  padding-left:30px;
}
html body.library-page .library-sidebar-head {
  margin-bottom:2px;
}
/* Projektpartner: Beschriftung und Namen in Versalien, gleich auf allen
   Sprachversionen und unabhängig davon, ob die Namen verlinkt sind. */
html body.design-about #about-partners #partner-heading,
html body.references-page .reference-grid .reference-card .reference-fact.reference-partner dt,
html body.references-page .reference-grid .reference-card .reference-partner .reference-partner-name,
html body.references-page .reference-grid .reference-card .reference-partner .reference-partner-name a {
  text-transform:uppercase;
}

/* Bibliothek nicht mit der grünen Akzentfarbe der Leistungen koppeln. */

/* [BLOCK-BIBLIOTHEK-08] BIBLIOTHEK */
html body:is(.design-library-index,.library-page) {
  --foehre-header-accent:var(--foehre-color-black);
  --foehre-page-hover:var(--foehre-color-black);
}
/* Interaktive Texte und ihre Symbole auf orangefarbenen Flächen:
   Schwarz bei Hover und auch bei Tastaturfokus. */
/* Indexzeilen einschliesslich Jahreszahl: gleiche Hoverfarbe wie die
   übrigen Bibliothekslinks; die helle Zeilenfläche bleibt bestehen. */

/* Die Suchfelder sind keine Links: Symbol und Platzhalter explizit färben.
   Die eingegebene Suchanfrage bleibt während der Eingabe ebenfalls schwarz. */
html body:is(.design-library-index,.library-page)
  .foehre-search-field:is(:hover,:focus-within) > svg {stroke:var(--foehre-color-black);}
html body:is(.design-library-index,.library-page)
  .foehre-search-field:is(:hover,:focus-within) input[type="search"],
html body:is(.design-library-index,.library-page)
  .foehre-search-field:is(:hover,:focus-within) input[type="search"]::placeholder {
  color:var(--foehre-color-black);
}
/* Auch der aktive Kopfbereich und der hellgraue Footer bleiben auf
   Bibliotheksseiten frei von grünen/orangen Hoverfarben. */
/* Nur Farbe ändern; globaler Verzicht auf text-shadow bleibt erhalten. */

@media (min-width:821px) {
  html body.library-page .library-shell {
    --library-article-top:clamp(52px,5.8vw,88px);
    --library-keyword-row:50px;
    grid-template-columns:minmax(0,1fr) minmax(295px,350px);
    gap:clamp(40px,5.2vw,84px);
  }
  html body.library-page .library-content {
    padding-top:var(--library-article-top);
  }
  /* Margin instead of top padding preserves the sticky index near the header
     once the visitor scrolls, without sacrificing the initial text alignment. */
  html body.library-page .library-sidebar {
    margin-top:calc(var(--library-article-top) + var(--library-keyword-row));
    padding-top:0;
    top:calc(var(--header-height,124px) + 14px);
  }
  html body.library-page .library-content > .library-article {
    max-width:min(100%,735px);
  }
}
/* Compact editorial tags; no chips, colors, borders or links. */
html body.library-page .library-article > .library-keywords {
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  column-gap:12px;
  row-gap:4px;
  height:50px;
  box-sizing:border-box;
  margin:0;
  padding:0;
  font-family:var(--foehre-font-base);
  font-size:clamp(12px,.94vw,15px);
  font-weight:var(--foehre-weight-light);
  line-height:1.45;
  letter-spacing:0;
  color:var(--foehre-color-paper);
}
html body.library-page .library-article > .library-keywords span {
  font:inherit;
  color:inherit;
  white-space:nowrap;
}
html body.library-page .library-article > .library-keywords span:not(:last-child)::after {
  content:"·";
  display:inline-block;
  margin-left:12px;
  color:inherit;
}
html body.library-page .library-article > .library-lead {
  margin-top:0;
}
/* Feste Flucht für kompakte, linksbündige Artikel-Absätze (kein Blocksatz). */
html body.library-page .library-article > :is(.library-lead,p,h2,h3,ul,ol) {
  max-width:100%;
  text-align:left;
}
@media (max-width:820px) {
  /* The index is a slide-out menu, so the keywords are above the article only. */
  html body.library-page .library-sidebar {margin-top:0;}
  html body.library-page .library-article > .library-keywords {
    height:auto;
    min-height:0;
    margin-bottom:28px;
    font-size:13px;
  }
  html body.library-page .library-content > .library-article {max-width:100%;}
}

/* Die bestehenden Leistungen-Regeln sind die typografische Referenz.
   Über-uns-Biografie, Artikeltext, Listen und Rechtstext folgen dieser. */
html body.design-about #about-profile .design-about-person,
html body.library-page .library-article > :is(p:not(.library-keywords),ul,ol),
html body.library-page .library-article > :is(ul,ol) li,
html body.library-page .library-article > details > summary,
html body.legal-page .legal-content > p:not(.legal-meta),
html body.legal-page .legal-content > :is(ul,ol) li {
  font-family:var(--foehre-font-arial);
  font-style:normal;
  font-weight:var(--foehre-weight-light);
  font-size:var(--foehre-body-copy-size);
  line-height:var(--foehre-body-copy-leading);
  letter-spacing:normal;
  text-transform:none;
}

/* Schlagwörter: ein durchgehender, unverlinkter Satz, ohne künstliche Trenner.
   Identische Schriftgröße wie der unmittelbar folgende Einleitungstext. */
html body.library-page .library-article > p.library-keywords {
  display:block;
  height:50px;
  box-sizing:border-box;
  padding:0;
  margin:0;
  font-family:var(--foehre-font-arial);
  font-style:normal;
  font-weight:var(--foehre-weight-light);
  font-size:var(--foehre-body-copy-size);
  line-height:var(--foehre-body-copy-leading);
  letter-spacing:normal;
  text-transform:none;
  color:var(--foehre-color-paper);
  text-align:left;
}

html body.library-page .library-article > p.library-keywords span:not(:last-child)::after {
  content:none;
  display:none;
}

@media (max-width:800px) {
  /* Leistungen verwendet mobil 16 px / 1.25: exakt übernehmen. */
  :root {
    --foehre-body-copy-size:16px;
    --foehre-body-copy-leading:1.25;
  }
  html body.library-page .library-article > p.library-keywords {
    height:auto;
    margin:0 0 28px;
  }

/* Aktiver Bibliothekseintrag auf orangefarbenem Grund bleibt SCHWARZ,
   auch beim Antippen auf Touchscreens (nicht nur während Hover). */
/* Der Bibliothek-Eintrag im Hauptmenü darf im aktivierten Zustand nicht grün sein. */


  /* Hamburger bleibt am rechten Rand, die Navigation schiebt sich von rechts
     herein statt von oben oder der linken Seite. */
  html body .site-header.design-header .design-menu-trigger {
    order:3;
    margin-left:6px;
    margin-right:0;
  }
  html body .site-mobile-menu.design-menu-overlay {
    left:0;right:0;
    transform:translateX(105%);
    transition:transform var(--foehre-motion-time, .35s) ease,opacity var(--foehre-motion-time, .25s) ease,visibility var(--foehre-motion-time, .3s) ease,
               background-color var(--foehre-motion-time, .23s) ease;
  }
  html body .site-mobile-menu.design-menu-overlay.is-open {
    transform:translateX(0);
  }

  /* Bibliotheksindex inklusive Suchfeld: Button und Drawer RECHTS.
     Alte Regeln mit left:0 und translateX(-104%) vollständig neutralisieren. */
  html body.library-page .library-mobile-toolbar {
    justify-content:flex-end;
  }
  html body.library-page .library-mobile-toggle {
    margin-left:auto;margin-right:0;
  }
  html body.library-page .library-sidebar {
    position:fixed;
    left:auto;right:0;
    border-left:1px solid color-mix(in srgb, var(--foehre-color-paper) 30%, transparent);
    border-right:0;
    transform:translateX(105%);
    transition:transform var(--foehre-motion-time, .32s) ease,visibility var(--foehre-motion-time, .32s) ease;
  }
  html body.library-page .library-sidebar.is-open {
    transform:translateX(0);
    visibility:visible;
  }
  html body.design-about #about-partners .design-about-relations-shell {

justify-items:stretch;

}
  html body.design-about #about-partners :is(.design-partner-logo,.design-network-logo) {
    
    box-sizing:border-box;
    grid-row:2;

order:initial;
  }
  html body.design-about #about-partners :is(.design-partner-logo,.design-network-logo) img {
    display:block;
    
    
  }

  /* Vier Kapitelstatements verwenden dieselbe mobile Typografiebasis.
     Die dynamische Feinabstimmung in site.js begrenzt auf max. 4 Zeilen. */
  html body.design-home .design-hero h1,
  html body.design-about .design-about-statement,
  html body.design-services .design-services-head h1,
  html body.design-library-index .design-library-intro h1 {
    width:100%;max-width:100%;

}
  /* Die Über-uns-Zeilen bleiben exakt wie in der Desktopvorlage gegliedert. */
  html body.design-about .design-about-statement .design-about-line {
    display:block;
    white-space:nowrap;
    overflow-wrap:normal;
    hyphens:none;
  }
  html body.design-about .design-about-statement .design-about-line::after {
    content:none;
    display:none;
  }
  /* Vier feste deutsche Bibliothekszeilen wie auf der großen Ansicht. */
  html body.design-library-index[data-lang="de"] .design-library-intro h1 .design-library-heading-line {
    display:block;white-space:nowrap;
  }
  /* Services und die übrigen Sprachen dürfen innerhalb von vier Zeilen
     natürlich umbrechen, falls ihre übersetzten Sätze länger sind. */
  html body.design-services #services-top .foehre-service-headline-line {
    display:inline;white-space:normal;
  }
}

@media (prefers-reduced-motion:reduce) {
  html body .site-mobile-menu.design-menu-overlay,
  html body.library-page .library-sidebar {transition:none;}
}


@media (max-width:800px) {
  html body.library-page .library-shell > .library-mobile-toolbar {
    width:100%;
    max-width:100%;
    box-sizing:border-box;
    align-self:stretch;
    display:flex;
    justify-content:flex-end;
  }
}
/* Bibliothek bleibt auch beim ausgewählten Eintrag im geöffneten Hauptmenü
   schwarz; die globale Current-Page-Regel hatte sonst orange Vorrang. */

/* Bibliotheksdrawer nutzt die eigene 820-px-Umschaltgrenze. */
@media (min-width:801px) and (max-width:820px) {
  html body.library-page .library-shell > .library-mobile-toolbar {
    display:flex;
    width:100%;
    align-self:stretch;
    box-sizing:border-box;
    justify-content:flex-end;
  }
  html body.library-page .library-mobile-toggle {margin-left:auto;margin-right:0;}
  html body.library-page .library-sidebar {
    position:fixed;left:auto;right:0;
    transform:translateX(105%);
    border-left:1px solid color-mix(in srgb, var(--foehre-color-paper) 30%, transparent);
    border-right:0;
  }
  html body.library-page .library-sidebar.is-open {
    transform:translateX(0);
    visibility:visible;
  }
}

@media (max-width:800px) {
  html body.design-home .design-hero h1,
  html body.design-about .design-about-statement,
  html body.design-services .design-services-head h1,
  html body.design-library-index .design-library-intro h1 {
    font-family:var(--foehre-font-base);
    font-weight:var(--foehre-weight-medium);
    font-style:normal;
    
    letter-spacing:0;
    text-transform:uppercase;
    white-space:normal;
    text-wrap:wrap;
    hyphens:none;
    word-break:normal;
    overflow-wrap:normal;
    transform:none;
  }
  /* Keine erzwungenen Umbrüche, die auf schmalen Displays andere Schriftgrößen
     erzwingen würden. Desktop-Vorgaben mit festen Zeilen bleiben unangetastet. */
  html body.design-about .design-about-statement .design-about-line,
  html body.design-services #services-top .foehre-service-headline-line,
  html body.design-library-index[data-lang="de"] .design-library-intro h1 .design-library-heading-line,
  html body.design-library-index .design-library-intro h1 .design-library-heading-line {
    display:inline;
    white-space:normal;
    overflow-wrap:normal;
  }
  /* Der HTML-Whitespace zwischen den mobilen Statement-Spans reicht aus.
     Kein generiertes ::after-Leerzeichen: regulärer Umbruch ohne Doppelabstand. */
}

/* Ausschließlich der Weiter-Link von LEISTUNGEN nach BIBLIOTHEK wechselt
   mit seinem Pfeil nach GRÜN – auf Desktop ebenso wie auf Touchscreens. */
html body.design-services a.foehre-chapter-cta.is-interactive:is(:hover,:focus-visible),
html body.design-services a.foehre-chapter-cta.is-interactive:is(:hover,:focus-visible) .foehre-chapter-cta-label,
html body.design-services a.foehre-chapter-cta.is-interactive:is(:hover,:focus-visible) .foehre-chapter-cta-icon {
  opacity:1 ;
}

/* LEISTUNGEN: Die Sprachlinks in der Kopfzeile und im geöffneten Menü
   wechseln bei Hover/Fokus GRÜN (alle Bildschirmgrößen, alle Sprachen). */

/* FUSSZEILE: Überall konsequent ORANGE, auch auf den Bibliotheksseiten.
   Für Icon-/Textkinder mit eigener Farbregel gilt dieselbe Hoverfarbe. */

/* Vier Statements: Desktop exakt dieselbe Medium-Schriftgröße, dasselbe
   Leading und dasselbe Tracking; alte kleinere Leistungen-Sonderregel aushebeln.
   Autorenseitig festgelegte Zeilen dürfen umbrechen, statt rechts abzuschneiden. */
@media (min-width:801px) {
  html body.design-services #services-top > h1 {
    font-family:var(--foehre-font-base);

width:var(--foehre-hero-display-width) ;
    
    text-transform:uppercase;
    text-wrap:pretty;
  }
  html body.design-services #services-top .foehre-service-headline-line::after {
    white-space:pre;
  }
}

/* Mobil: sechs Partner alphabetisch wie am Desktop, DREI pro Zeile.
   Die graue Fläche reicht nur so weit wie die Logos und ihr Freiraum. */
@media (max-width:800px) {
  /* A-NULL | HAN | Ingenieurbüros / ÖGNI | studio acker | studio calas */
  html body.design-about #about-partners .design-partner-logo--anull {order:1;}
  html body.design-about #about-partners .design-partner-logo--han {order:2;}
  html body.design-about #about-partners .design-network-logo:first-child {order:3;}
  html body.design-about #about-partners .design-network-logo:last-child {order:4;}
  html body.design-about #about-partners .design-partner-logo--acker {order:5;}
  html body.design-about #about-partners .design-partner-logo--calas {order:6;}

  
  html body.design-home .design-hero h1,
  html body.design-about .design-about-statement,
  html body.design-services .design-services-head h1,
  html body.design-library-index .design-library-intro h1 {
    font-size:clamp(15px,4.7vw,27px);
    line-height:1.05;
  }
}

/* ORANGE BIBLIOTHEK: When hovering a topic row, its title AND its year
   must turn the SAME orange-red (2026 included), across all languages. */

/* At the top of the orange library, the header MENU and its burger icon
   hover BLACK. This does NOT affect the full-screen menu overlay. */

/* FULL-SCREEN MENU: uniform colours across every chapter and language.
   The current item is ORANGE, matching Services. Normal logos stay GREEN.
   Hover previews on a coloured background use WHITE logo and type. */
html body .site-mobile-menu.design-menu-overlay .site-mobile-nav.design-menu-items
  .design-menu-link .design-menu-icon-base {
  filter:none;
}

/* On Services the header language selector turns GREEN on hover,
   including the currently selected language and mobile header. */
html body.design-services .site-header.design-header
  .design-languages a:is(:hover,:focus-visible),
html body.design-services .site-header.design-header
  .design-languages a[aria-current="page"]:is(:hover,:focus-visible) {
  opacity:1;
}

/* Explicit author-defined THREE lines of the Services statement on desktop.
   Same type size/weight as all other statements, but room for all three
   complete lines even near the 801px breakpoint. */
@media (min-width:801px) {
  html body.design-services #services-top > h1 {
    font-size:var(--foehre-hero-heading-size);
    font-weight:var(--foehre-weight-medium);
    line-height:var(--foehre-hero-heading-leading,1.13);
    letter-spacing:0;
    width:calc(100% - 2*var(--site-ui-gutter,32px));
    max-width:none;
  }
  html body.design-services #services-top .foehre-service-headline-line {
    display:block;
    white-space:nowrap;
  }
  html body.design-services #services-top .foehre-service-headline-line::after {
    content:none;
    display:none;
  }
  /* The English Services heading has three authored lines. On narrower
     desktop screens limit its font size so none of them runs into the CTA. */
  html body.design-services[data-lang="en"] #services-top > h1 {
    font-size:min(var(--foehre-hero-heading-size), 2.9vw);
  }
}
/* At the desktop/mobile threshold the second English line reaches towards
   MORE DETAILS. Lift only this statement slightly, keeping all three lines. */
@media (min-width:801px) and (max-width:950px) {
  body.design-services[data-lang="en"] #services-top > h1 {
    transform:translateY(calc(var(--foehre-step-lift) - 16px));
  }
}

/* Mobile partners: always a 3-by-2 ordered grid as desktop alphabetical
   menu order. No extra empty grey area below the logos. */
@media (max-width:800px) {
  html body.design-about #about-partners.foehre-full-chapter {
    min-height:0;
    height:auto;
    padding:clamp(24px,5vw,34px) clamp(18px,5vw,28px)
            clamp(24px,5vw,36px);
    align-content:start;
    justify-content:flex-start;
  }
  html body.design-about #about-partners .design-about-relations-shell {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    grid-template-rows:auto auto auto;
    column-gap:clamp(10px,2.6vw,20px);
    row-gap:clamp(13px,3.3vw,22px);
    width:100%;
    max-width:100%;
    padding:0;
    margin:0;
    align-items:center;
    align-content:start;
    overflow:visible;
  }
  html body.design-about #about-partners :is(.design-about-group,.design-brand-row--partners,.design-brand-row--network) {
    display:contents;
  }
  html body.design-about #about-partners #partner-heading {
    grid-column:1/-1;grid-row:1;
    justify-self:start;transform:none;
    padding:0;margin:0;
  }
  html body.design-about #about-partners :is(.design-partner-logo,.design-network-logo) {
    display:flex;
    width:100%;max-width:100%;min-width:0;
    height:clamp(49px,13vw,69px);min-height:0;
    margin:0;padding:0;
    justify-content:center;align-items:center;
    flex:none;overflow:visible;
  }
  html body.design-about #about-partners :is(.design-partner-logo,.design-network-logo) img {
    width:100%;height:100%;
    max-width:100%;max-height:100%;
    object-fit:contain;object-position:center;
  }
  /* Row 1 A-NULL, HAN, Ingenieurbüros; Row 2 ÖGNI, Acker, Calas. */
  html body.design-about #about-partners .design-partner-logo--anull {grid-column:1;grid-row:2;}
  html body.design-about #about-partners .design-partner-logo--han {grid-column:2;grid-row:2;}
  html body.design-about #about-partners .design-network-logo:first-child {grid-column:3;grid-row:2;}
  html body.design-about #about-partners .design-network-logo:last-child {grid-column:1;grid-row:3;}
  html body.design-about #about-partners .design-partner-logo--acker {grid-column:2;grid-row:3;}
  html body.design-about #about-partners .design-partner-logo--calas {grid-column:3;grid-row:3;}
  html body.design-about #about-partners .design-partner-logo--anull img {width:78%;}
  html body.design-about #about-partners .design-partner-logo--han img,
html body.design-about #about-partners .design-network-logo:first-child img {width:85%;}
  html body.design-about #about-partners .design-network-logo:last-child img {width:72%;}
  html body.design-about #about-partners .design-partner-logo--acker img,
html body.design-about #about-partners .design-partner-logo--calas img {width:90%;}
}

html body #site-mobile-menu.design-menu-overlay
  .site-mobile-nav.design-menu-items .design-menu-link .design-menu-icon-base {
  filter:none;
}

@media (min-width:801px) {
  html body.design-about #about-partners .design-partner-logo--han img {
    transform:scale(1.05);
    transform-origin:center center;
  }
}
@media (max-width:800px) {
  html body.design-about #about-partners .design-partner-logo--han img {
    transform:scale(1.10);
    transform-origin:center center;
  }
  html body.design-about #about-partners .design-partner-logo--anull img {
    transform:scale(.90);
    transform-origin:center center;
  }

html body .site-header.design-header .design-languages,
html body .site-mobile-menu.design-menu-overlay .design-menu-languages {
    font-size:var(--foehre-mobile-language-size);
  }
}

/* Mobile Lesbarkeit: „im Mittelpunkt steht die“ bleibt auch auf 320px zusammen. */
@media (max-width: 340px) {
  html body.design-services #services-top h1 { letter-spacing: -0.025em; }
}
/* Bei breiten Tablets bleibt die bestehende Zeilenzahl trotz der geschützten Wortgruppe erhalten. */
@media (min-width: 700px) and (max-width: 800px) {
  html body.design-services #services-top h1 { letter-spacing: -0.025em; }
}