/* =========================================================
   Heinrich Abresch Holzgroßhandlung GmbH - Nachbau
   Werbeagentur Hoffmann
   ========================================================= */

/* ---------- 0. Schriften (lokal, 14.09.2026) ----------
   Roboto und Roboto Condensed als variable Schriften von Google Fonts
   (v51), Font Awesome 6.5.2 Solid auf die 12 genutzten Symbole verkleinert.
   Keine Verbindung mehr zu fonts.googleapis.com / cdnjs.cloudflare.com
   (Pruefbericht F-03). Unicode-Bereiche wie von Google ausgeliefert. */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(../fonts/roboto-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(../fonts/roboto-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Roboto Condensed";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(../fonts/roboto-condensed-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Roboto Condensed";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(../fonts/roboto-condensed-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Font Awesome 6 Free";
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url(../fonts/fa-solid-900.woff2) format("woff2");
}
.fa-solid {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: var(--fa-display, inline-block);
  font-style: normal;
  font-variant: normal;
  line-height: 1;
  text-rendering: auto;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
}
.fa-chevron-down:before { content: "\f078"; }
.fa-chevron-up:before { content: "\f077"; }
.fa-magnifying-glass-plus:before { content: "\f00e"; }
.fa-volume-xmark:before { content: "\f6a9"; }
.fa-chevron-right:before { content: "\f054"; }
.fa-chevron-left:before { content: "\f053"; }
.fa-file-pdf:before { content: "\f1c1"; }
.fa-house:before { content: "\f015"; }
.fa-pause:before { content: "\f04c"; }
.fa-play:before { content: "\f04b"; }
.fa-volume-high:before { content: "\f028"; }
.fa-xmark:before { content: "\f00d"; }

/* ---------- 1. Custom Properties ---------- */
:root {
  --color-text: #333333;
  --color-text-soft: #4a4a4a;
  --color-muted: #808080;
  --color-heading: #2b2b2b;
  --color-white: #ffffff;
  --color-footer-bg: #cccccc;
  --color-border: #e4e4e4;
  --color-accent: #1a1a1a;
  --color-totop-bg: #b3b3b3;
  --color-totop-bg-hover: #999999;

  --font-base: "Roboto", "Helvetica Neue", Arial, sans-serif;

  --fs-body: 17px;
  --fs-nav: 19px;
  --fs-h1: 24px;
  --fs-h2: 22px;
  --fs-h3: 19px;
  --fs-hero-title: 34px;
  --fs-hero-text: 19px;

  --container: 1280px;
  --header-h: 100px;  /* 07.09.2026: Kopf auf 1280 px Satzspiegel, Logo 46 px */
  --header-h-mobile: 72px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;

  --transition: all .25s ease;
}

/* ---------- 2. Reset / Base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: var(--header-h-mobile); }

body {
  margin: 0;
  font-family: var(--font-base);
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--color-text-soft);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

/* Browser geben <figure> von sich aus 40px Seitenrand und 1em oben/unten.
   Ohne diesen Reset sitzen alle Bildkacheln eingerückt, während Video-
   kacheln (<div>) bündig füllen – genau daraus entstehen die schiefen
   Ränder und die ungleichen Lücken im Mosaik. */
figure { margin: 0; }

a { color: inherit; text-decoration: none; transition: var(--transition); }
a:hover { color: #000; }

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

button { font: inherit; cursor: pointer; }

h1, h2, h3, h4, h5, h6 { margin: 0 0 var(--space-3); color: var(--color-heading); font-weight: 500; line-height: 1.25; }

p { margin: 0 0 var(--space-3); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: 12px 20px;
  background: #000;
  color: #fff;
}
.skip-link:focus { left: 0; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ---------- 3. Layout helper ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px;
}

.section { padding: 48px 0; }
.section--tight { padding: 28px 0; }

/* ---------- 4. Header ---------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 500;
  background: var(--color-white);
  height: var(--header-h-mobile);
  display: flex;
  align-items: center;
  box-shadow: none;   /* 10.09.: feine graue Linie unter der Navigation entfernt (Frau Arnold) */
}

.header-inner {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 20px;
}

.logo { flex: 0 0 auto; }
.logo img { height: 40px; width: auto; }

.main-nav { display: none; }

.header-meta {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 26px;
}

.header-phone {
  font-size: 17px;
  color: var(--color-text-soft);
  white-space: nowrap;
  display: none;
}

.lang-switch { display: none; gap: 14px; font-size: 17px; }
.lang-switch li a { color: var(--color-text-soft); }
.lang-switch li.is-active a { color: #000; font-weight: 500; }

/* Burger */
.nav-toggle {
  margin-left: auto;
  width: 44px; height: 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  background: none;
  border: 0;
  padding: 0;
}
.nav-toggle span {
  display: block;
  width: 26px; height: 2px;
  background: #111;
  transition: var(--transition);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Offcanvas */
.offcanvas {
  position: fixed;
  top: var(--header-h-mobile);
  right: 0;
  width: min(340px, 88vw);
  height: calc(100vh - var(--header-h-mobile));
  background: #fff;
  border-left: 1px solid var(--color-border);
  transform: translateX(105%);
  transition: transform .3s ease;
  z-index: 499;
  overflow-y: auto;
  padding: 24px 26px 60px;
}
.offcanvas.is-open { transform: translateX(0); }

.offcanvas ul li > a {
  display: block;
  padding: 11px 0;
  font-size: 18px;
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
}
.offcanvas .submenu { padding: 4px 0 10px 14px; }
.offcanvas .submenu li > a {
  font-size: 15.5px;
  color: var(--color-muted);
  padding: 7px 0;
  border-bottom: 0;
}
.offcanvas-meta {
  margin-top: 26px;
  font-size: 16px;
  color: var(--color-muted);
}
.offcanvas-meta ul { display: flex; gap: 14px; margin-top: 10px; }
.offcanvas-meta .lang-switch { display: flex; }

.address-block { font-style: normal; }
.address-contact { margin-top: 16px; }

body.nav-open { overflow: hidden; }

/* ---------- 5. Main offset ---------- */
.site-main { padding-top: var(--header-h-mobile); }
.site-main--flush { padding-top: var(--header-h-mobile); }

/* ---------- 6. Hero (Slider / Pageheader) ---------- */
.hero {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #333;
}
/* 09.09.: schmaler schwarzer Balken rechts am Video (Frau Arnold) - bei
   ungerader Fensterbreite blieb ein halber Pixel des #333-Rahmens sichtbar. */
.hero--home { background: #fff; }
.hero--home .hero-slide video,
.hero--home .hero-standbild { width: calc(100% + 1px); }
.hero--home { height: calc(100vh - var(--header-h-mobile)); min-height: 380px; }
.hero--page { height: 58vh; min-height: 300px; }

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .9s ease;
}
.hero-slide.is-active { opacity: 1; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; }

.hero-caption {
  position: absolute;
  left: 7%;
  top: 50%;
  transform: translateY(-50%);
  width: 290px;
  max-width: 76vw;
  padding: 26px 22px;
  background: rgba(255,255,255,.78);
  text-align: center;
  color: var(--color-text);
}
.hero-caption h1,
.hero-caption .hero-title {
  font-size: var(--fs-hero-title);
  font-weight: 500;
  color: #1f1f1f;
  margin: 0 0 6px;
}
.hero-caption p {
  font-size: var(--fs-hero-text);
  line-height: 1.5;
  margin: 0;
  color: #3a3a3a;
}

/* Slider controls */
.hero-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  border: 0;
  padding: 0;
  color: rgba(255,255,255,.85);
  font-size: 30px;
  text-shadow: 0 1px 4px rgba(0,0,0,.35);
  z-index: 3;
}
.hero-nav:hover { color: #fff; }
.hero-nav--prev { left: 18px; }
.hero-nav--next { right: 18px; }

/* Im Original navigiert der Slider ausschließlich über die Pfeile – keine Dots. */
.hero-dots { display: none; }

/* ---------- 7. Typography blocks ---------- */
.section-title {
  font-size: var(--fs-h1);
  font-weight: 700;
  color: #1f1f1f;
  margin-bottom: 14px;
}
.section-subtitle {
  font-size: var(--fs-h2);
  font-weight: 400;
  color: var(--color-muted);
  margin: 40px 0 20px;
}
.lead { max-width: 720px; }

.text-cols { display: grid; grid-template-columns: 1fr; gap: 0 56px; }

.rich-text p { margin-bottom: 18px; }
.rich-text strong { color: #222; font-weight: 700; }
.rich-text ul { list-style: disc; padding-left: 20px; margin: 0 0 18px; }
.rich-text ul li { margin-bottom: 5px; }
.rich-text a { text-decoration: underline; }

.image-block { margin: 34px 0; }
.image-grid { display: grid; grid-template-columns: 1fr; gap: 28px; margin: 34px 0; }

/* ---------- 8. Team grid ---------- */
.team-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 42px 36px;
  margin-bottom: 20px;
}
.team-card figure { margin: 0; }
.team-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center center;
}
.team-card h3 {
  font-size: var(--fs-h3);
  font-weight: 400;
  color: var(--color-text);
  margin: 16px 0 4px;
}
.team-card p {
  font-size: 16px;
  color: var(--color-muted);
  margin: 0;
  line-height: 1.5;
}
.team-card .team-mail { color: var(--color-text-soft); }
.team-card .team-mail a:hover { text-decoration: underline; }

/* ---------- 9. Accordion cards (Holz) ---------- */
.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 34px;
  margin: 26px 0 10px;
}
.acc-card {
  border: 1px solid var(--color-border);
  background: #fff;
  align-self: start;
}
.acc-card > img { width: 100%; aspect-ratio: 570 / 392; object-fit: cover; }

.acc-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: #fff;
  border: 0;
  border-top: 1px solid var(--color-border);
  font-size: var(--fs-h3);
  color: var(--color-text-soft);
  text-align: left;
}
.acc-trigger .acc-icon {
  flex: 0 0 auto;
  width: 14px;
  transition: transform .25s ease;
  font-size: 15px;
}
.acc-trigger[aria-expanded="true"] .acc-icon { transform: rotate(180deg); }
.acc-trigger:hover { color: #000; }

.acc-panel {
  display: none;
  padding: 0 18px 18px;
  font-size: 16px;
}
.acc-panel.is-open { display: block; }
.acc-panel ul { list-style: disc; padding-left: 20px; margin: 0 0 14px; }
.acc-panel li { margin-bottom: 4px; }
.acc-panel p { margin: 0 0 12px; }
.acc-panel strong { color: #222; }

/* ---------- 10. Alternating feature rows (Service) ---------- */
.feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  margin: 0 0 60px;
}
.feature-media { width: 100%; }
.feature-body { width: 100%; }
.feature-media img { width: 100%; }
.feature-body h2 {
  font-size: var(--fs-h2);
  font-weight: 500;
  color: #4d4d4d;
  margin-bottom: 12px;
}
.feature-body p { color: var(--color-text-soft); margin: 0; }

/* ---------- 11. Certificates ---------- */
.cert-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 34px;
  margin: 26px 0;
  align-items: start;
}
.cert-item img { max-width: 220px; margin-bottom: 14px; }
.cert-item .btn-download { margin-top: 10px; }

.btn-download {
  display: inline-block;
  padding: 9px 20px;
  border: 1px solid #999;
  font-size: 15px;
  color: #333;
  background: #fff;
}
.btn-download:hover { background: #333; color: #fff; border-color: #333; }

/* ---------- 12. Contact / Map ---------- */
.map-embed {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  margin-bottom: 12px;
}
.map-note { font-size: 15px; color: var(--color-muted); }

/* Google Maps erst nach Zustimmung (14.09.2026, Pruefbericht F-02):
   Platzhalter in der Groesse der Karte, bis der Cookie-Hinweis mit
   "Alle akzeptieren" beantwortet oder "Karte laden" geklickt wurde. */
.map-consent { position: relative; }
.map-placeholder {
  width: 100%;
  aspect-ratio: 16 / 9;
  margin-bottom: 12px;
  box-sizing: border-box;
  padding: 24px;
  border: 1px solid var(--color-border);
  background: #f2f2f2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.map-placeholder p {
  max-width: 560px;
  margin: 0 0 18px;
  line-height: 1.6;
  color: var(--color-text-soft);
}
.map-placeholder a { color: inherit; text-decoration: underline; }
.map-load {
  display: inline-block;
  padding: 9px 20px;
  border: 1px solid #999;
  font: inherit;
  font-size: 15px;
  line-height: 1.3;
  color: #333;
  background: #fff;
  cursor: pointer;
}
.map-load:hover { background: #333; color: #fff; border-color: #333; }
.map-placeholder[hidden], .map-embed[hidden] { display: none; }

/* ---------- 13. Footer ---------- */
.site-footer {
  background: var(--color-footer-bg);
  color: #1f1f1f;
  padding: 44px 0 10px;
  font-size: 16.5px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
}
.footer-logo { height: 52px; width: auto; margin-bottom: 14px; }
.site-footer p { margin: 0 0 14px; line-height: 1.55; }
.site-footer strong { font-weight: 700; }
.site-footer a:hover { text-decoration: underline; }
.footer-links a { display: block; margin-bottom: 3px; }

.agency-branding {
  border-top: 1px solid rgba(0,0,0,.12);
  margin-top: 30px;
  font-size: 14.5px;
}
.agency-branding p { margin: 0; }
.agency-branding a { text-decoration: underline; }

/* ---------- 14. Back to top ---------- */
.to-top {
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 58px; height: 58px;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-totop-bg);
  color: #111;
  border: 0;
  font-size: 22px;
  opacity: 0;
  visibility: hidden;
  transition: var(--transition);
  z-index: 400;
}
.to-top.is-visible { opacity: 1; visibility: visible; }
.to-top:hover { background: var(--color-totop-bg-hover); }

/* ---------- 15. Cookie banner ---------- */
.cookie-banner {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 600;
  background: rgba(30,30,30,.96);
  color: #f2f2f2;
  padding: 18px 20px;
  transform: translateY(110%);
  transition: transform .4s ease;
  font-size: 15.5px;
}
.cookie-banner.is-visible { transform: translateY(0); }
.cookie-inner {
  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}
.cookie-banner p { margin: 0; line-height: 1.5; }
.cookie-banner a { text-decoration: underline; }
.cookie-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.cookie-btn {
  padding: 9px 20px;
  border: 1px solid #f2f2f2;
  background: transparent;
  color: #f2f2f2;
  font-size: 15px;
}
.cookie-btn--accept { background: #f2f2f2; color: #1e1e1e; }
.cookie-btn:hover { opacity: .82; }

/* ---------- 16. Job accordion (Karriere) ---------- */
.job-list { border-top: 1px solid var(--color-border); margin: 24px 0 40px; }
.job-item { border-bottom: 1px solid var(--color-border); }
.job-item .acc-trigger { border-top: 0; padding: 18px 4px; }
.job-item .acc-panel { padding: 0 4px 22px; }

/* ---------- 17. Error page ---------- */
.error-page {
  min-height: 62vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 70px 20px;
}
.error-page .error-code { font-size: 84px; font-weight: 700; color: #1f1f1f; line-height: 1; margin-bottom: 10px; }

/* ---------- 18. Legal pages ---------- */
.legal { max-width: 900px; }
.legal h1 { font-size: 28px; font-weight: 700; margin-bottom: 24px; }
.legal h2 { font-size: 20px; font-weight: 700; margin: 30px 0 12px; }
.legal p { margin-bottom: 14px; }
.legal ul { list-style: disc; padding-left: 20px; margin-bottom: 16px; }

/* ---------- 19. Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* =========================================================
   20. Media Queries
   ========================================================= */
@media (min-width: 576px) {
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .image-grid { grid-template-columns: repeat(2, 1fr); }
  .cookie-inner { flex-direction: row; align-items: center; justify-content: space-between; }
}

@media (min-width: 768px) {
  :root { --fs-body: 17px; }
  .hero--page { height: 64vh; }
  .hero-caption { left: 8%; width: 300px; padding: 30px 24px; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 40px; }
  .cert-grid { grid-template-columns: repeat(2, 1fr); }
  .feature { flex-direction: row; gap: 40px; }
  .feature-media { flex: 0 0 57%; }
  .feature-body { flex: 1 1 auto; }
  .section { padding: 60px 0; }
}

@media (min-width: 1024px) {
  html { scroll-padding-top: var(--header-h); }

  .site-header { height: var(--header-h); }
  .site-main, .site-main--flush { padding-top: var(--header-h); }
  .logo img { height: 58px; }

  .nav-toggle { display: none; }
  .offcanvas { display: none; }

  .main-nav { display: block; margin-left: 26px; }
  .main-nav > ul { display: flex; align-items: center; gap: 20px; }
  .main-nav > ul > li { position: relative; }
  .main-nav > ul > li > a {
    display: block;
    font-size: var(--fs-nav);
    color: var(--color-text);
    padding: 10px 0;
  }
  .main-nav > ul > li.is-active > a { font-weight: 700; color: #000; }
  .main-nav > ul > li > a:hover { color: #000; }

  .main-nav .submenu {
    position: absolute;
    top: 100%;
    left: -18px;
    min-width: 232px;
    background: #fff;
    border: 1px solid var(--color-border);
    padding: 8px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: var(--transition);
    box-shadow: 0 8px 22px rgba(0,0,0,.08);
  }
  .main-nav > ul > li:hover .submenu,
  .main-nav > ul > li:focus-within .submenu { opacity: 1; visibility: visible; transform: none; }
  .main-nav .submenu a {
    display: block;
    padding: 8px 18px;
    font-size: 16px;
    color: var(--color-text-soft);
  }
  .main-nav .submenu a:hover { background: #f5f5f5; color: #000; }

  .header-phone { display: block; }
  .lang-switch { display: flex; }

  .hero--home { height: calc(100vh - var(--header-h)); }
  .hero-caption { left: 7%; width: 300px; }
  .offcanvas { top: var(--header-h); height: calc(100vh - var(--header-h)); }

  .text-cols { grid-template-columns: 1fr 1fr; }
  .team-grid { grid-template-columns: repeat(3, 1fr); }
  .card-grid { grid-template-columns: repeat(3, 1fr); }
  .image-grid { grid-template-columns: repeat(3, 1fr); }

  .footer-grid { grid-template-columns: 1.4fr 1.1fr 0.8fr; }

  /* Feature rows: full-bleed image on alternating sides */
  .feature { gap: 60px; margin-bottom: 90px; }
  .feature--media-right .feature-body { order: 1; }
  .feature--media-right .feature-media { order: 2; }
  .feature--media-left .feature-media { order: 1; }
  .feature--media-left .feature-body { order: 2; }
}

@media (min-width: 1440px) {
  .section { padding: 70px 0; }
}

/* =========================================================
   21. Überarbeitung 2026 – neue Komponenten
   ========================================================= */

/* ---------- 21.1 Seitenkopf: Titel + Teaser UNTER dem Bild ---------- */
/* Ersetzt die bisherigen grauen Kästen über den Aufmacherbildern. */
.page-head {
  padding: 34px 0 6px;
}
.page-head h1 {
  font-size: 30px;
  font-weight: 700;
  color: #1f1f1f;
  margin: 0 0 14px;
}
.page-head .page-teaser {
  max-width: 760px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--color-text-soft);
  margin: 0;
}

/* ---------- 21.2 Startseite: Unternehmenstext ---------- */
.home-intro { padding: 52px 0 10px; }
.home-intro p {
  max-width: 820px;
  font-size: 19px;
  line-height: 1.65;
  color: var(--color-text-soft);
  margin: 0;
}

/* ---------- 21.3 Bild- und Videomosaik ---------- */
.mosaic {
  display: grid;
  gap: 5px;
  margin: 40px 0 10px;
}
.mosaic-tile {
  position: relative;
  overflow: hidden;
  background: #ebebeb;
}
.mosaic-tile img,
.mosaic-tile video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s ease;
}
.mosaic-tile:hover img,
.mosaic-tile:hover video { transform: scale(1.035); }

/* Kachelformate */
.mosaic-tile--tall { grid-row: span 2; }
.mosaic-tile--wide { grid-column: span 2; }
.mosaic-tile--big  { grid-column: span 2; grid-row: span 2; }

/* Tonschalter für Video-Kacheln */
.mosaic-sound {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(0,0,0,.5);
  color: #fff;
  font-size: 14px;
  z-index: 2;
}
.mosaic-sound:hover { background: rgba(0,0,0,.72); }

/* Platzhalter, solange noch kein Video geliefert ist */
.mosaic-tile--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 18px;
  background: #e2e2e2;
  color: #6b6b6b;
  font-size: 14.5px;
  line-height: 1.45;
}

/* ---------- 21.4 Einstiegskacheln (Startseite) ---------- */
.entry-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
  margin: 16px 0 10px;
}
.entry-card { display: block; color: inherit; }
.entry-card figure {
  margin: 0 0 14px;
  overflow: hidden;
  background: #ebebeb;
}
.entry-card img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform .5s ease;
}
.entry-card:hover img { transform: scale(1.04); }
.entry-card h3 {
  font-size: 20px;
  font-weight: 500;
  color: #1f1f1f;
  margin: 0 0 6px;
}
.entry-card p {
  font-size: 16px;
  color: var(--color-muted);
  margin: 0;
  line-height: 1.5;
}

/* ---------- 21.5 Porträt mit Mouseover-Zweitbild ---------- */
/* Die beiden Punkte werden per CSS eingeblendet und sind NICHT
   in die Bilddateien montiert. Desktop: Mouseover, Mobil: Antippen. */
.portrait {
  position: relative;
  display: block;
  overflow: hidden;
  background: #ebebeb;
  aspect-ratio: 1 / 1;
}
.portrait img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity .45s ease;
}
.portrait .portrait-alt { opacity: 0; }
.portrait.is-swapped .portrait-main { opacity: 0; }
.portrait.is-swapped .portrait-alt  { opacity: 1; }

.portrait-dots {
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: flex;
  gap: 4px;
  z-index: 2;
  pointer-events: none;
}
.portrait-dots span {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #fff;
  opacity: .45;
  transition: opacity .3s ease;
  box-shadow: 0 0 2px rgba(0,0,0,.35);
}
.portrait-dots span.is-active { opacity: 1; }

/* ---------- 21.6 Downloads / Zertifikate ---------- */
.download-list { margin: 22px 0 0; }
.download-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--color-border);
}
.download-item:first-child { border-top: 1px solid var(--color-border); }
.download-item .download-name { font-size: 17px; color: var(--color-text); }
.download-item .download-meta { font-size: 15px; color: var(--color-muted); }
.download-item .btn-download { margin-left: auto; }

/* ---------- 21.7 Stellenanzeigen ---------- */
.job-block { margin-bottom: 22px; }
.job-block h3 {
  font-size: 17px;
  font-weight: 700;
  color: #222;
  margin: 0 0 8px;
}
.job-contact {
  margin-top: 22px;
  padding: 18px 20px;
  background: #f2f2f2;
}
.job-contact p { margin: 0 0 6px; }
.job-contact p:last-child { margin-bottom: 0; }

/* ---------- 21.8 Media Queries für die neuen Komponenten ---------- */
@media (min-width: 576px) {
  .entry-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 768px) {
  .page-head { padding: 42px 0 6px; }
  .page-head h1 { font-size: 34px; }
  .entry-grid { grid-template-columns: repeat(3, 1fr); gap: 30px; }
}

@media (min-width: 1024px) {
  .home-intro { padding: 66px 0 10px; }
  .portrait-dots { right: 9px; bottom: 9px; }
}


/* Sieben Hauptmenüpunkte brauchen bis 1279px etwas weniger Luft */
@media (min-width: 1024px) and (max-width: 1279px) {
  .main-nav { margin-left: 18px; }
  .main-nav > ul { gap: 15px; }
  .main-nav > ul > li > a { font-size: 17px; }
  .header-meta { gap: 18px; }
  .header-phone { font-size: 15.5px; }
  .lang-switch { font-size: 15.5px; gap: 10px; }
  .logo img { height: 50px; }
}

@media (min-width: 1280px) {
  .main-nav { margin-left: 34px; }
  .main-nav > ul { gap: 28px; }
}

/* =========================================================
   22. Echte Medien (Kundenmaterial Juli 2026)
   ========================================================= */

/* Hauptvideo im Seitenkopf */
.hero-slide video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Mosaik: Lücken auffüllen, damit gemischte Kachelformate sauber sitzen */


/* Querformat-Gruppenmotive im Backoffice (Security, Aktivisten) */
.portrait--wide { aspect-ratio: 3 / 2; }
.team-card--wide { grid-column: span 1; }

@media (min-width: 576px) {
  .team-card--wide { grid-column: span 2; }
}
@media (min-width: 1024px) {
  .team-card--wide { grid-column: span 2; }
}
/* =========================================================
   23. Mosaik: feste Rasterplätze
   Die Zeilenhöhe folgt dem Seitenverhältnis des Containers
   (Zeile = 0,8 x Spaltenbreite). Eine 1x1-Kachel liegt damit
   leicht quer, 1x2 steht hochkant für die Porträtvideos,
   2x1 wird breit. Alle 20 Kacheln haben einen festen Platz,
   deshalb schließt der Block links und rechts bündig ab.
   ========================================================= */

@media (max-width: 1023px) {
  .mosaic:not(.mosaic--roomy) {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(16, 1fr);
    aspect-ratio: 2 / 12.8;
  }
  .mosaic .m1   { grid-area: 1 / 1 / 3 / 3; }
  .mosaic .m2   { grid-area: 3 / 1 / 5 / 2; }
  .mosaic .m3   { grid-area: 3 / 2 / 5 / 3; }
  .mosaic .m5   { grid-area: 5 / 1 / 6 / 3; }
  .mosaic .m6   { grid-area: 6 / 1 / 8 / 2; }
  .mosaic .m7   { grid-area: 6 / 2 / 7 / 3; }
  .mosaic .m8   { grid-area: 7 / 2 / 8 / 3; }
  .mosaic .m9   { grid-area: 8 / 1 / 9 / 2; }
  .mosaic .m10  { grid-area: 8 / 2 / 9 / 3; }
  .mosaic .m11  { grid-area: 9 / 1 / 11 / 2; }
  .mosaic .m13  { grid-area: 9 / 2 / 10 / 3; }
  .mosaic .m14  { grid-area: 10 / 2 / 11 / 3; }
  .mosaic .m12  { grid-area: 11 / 1 / 12 / 3; }
  .mosaic .m15  { grid-area: 12 / 1 / 13 / 2; }
  .mosaic .m16  { grid-area: 12 / 2 / 13 / 3; }
  .mosaic .m17  { grid-area: 13 / 1 / 14 / 3; }
  .mosaic .m18  { grid-area: 14 / 1 / 16 / 2; }
  .mosaic .m19  { grid-area: 14 / 2 / 16 / 3; }
  .mosaic .m20  { grid-area: 16 / 1 / 17 / 2; }
  .mosaic .m21  { grid-area: 16 / 2 / 17 / 3; }
}

@media (min-width: 1024px) {
  .mosaic:not(.mosaic--roomy) {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(8, 1fr);
    aspect-ratio: 4 / 6.4;
  }
  .mosaic .m1   { grid-area: 1 / 1 / 3 / 3; }
  .mosaic .m2   { grid-area: 1 / 3 / 3 / 4; }
  .mosaic .m3   { grid-area: 1 / 4 / 3 / 5; }
  .mosaic .m5   { grid-area: 3 / 1 / 4 / 3; }
  .mosaic .m6   { grid-area: 3 / 3 / 5 / 4; }
  .mosaic .m7   { grid-area: 3 / 4 / 4 / 5; }
  .mosaic .m8   { grid-area: 4 / 1 / 5 / 2; }
  .mosaic .m9   { grid-area: 4 / 2 / 5 / 3; }
  .mosaic .m10  { grid-area: 4 / 4 / 5 / 5; }
  .mosaic .m11  { grid-area: 5 / 1 / 7 / 2; }
  .mosaic .m12  { grid-area: 5 / 2 / 6 / 4; }
  .mosaic .m13  { grid-area: 5 / 4 / 6 / 5; }
  .mosaic .m14  { grid-area: 6 / 2 / 7 / 3; }
  .mosaic .m15  { grid-area: 6 / 3 / 7 / 4; }
  .mosaic .m16  { grid-area: 6 / 4 / 7 / 5; }
  .mosaic .m17  { grid-area: 7 / 1 / 8 / 3; }
  .mosaic .m18  { grid-area: 7 / 3 / 9 / 4; }
  .mosaic .m19  { grid-area: 7 / 4 / 9 / 5; }
  .mosaic .m20  { grid-area: 8 / 1 / 9 / 2; }
  .mosaic .m21  { grid-area: 8 / 2 / 9 / 3; }
}

/* =========================================================
   24. Feinschliff August 2026 – Korrekturen nach Abstimmung
   mit Frau Abresch / Frau Arnold
   ========================================================= */

/* ---------- 24.1 Kopfbereich ------------------------------
   Logo und Navigation sitzen wieder auf einer gemeinsamen
   Unterkante, die Navigationsschrift ist feiner und die
   Navigation rueckt optisch in die Mitte des Kopfes.
   ---------------------------------------------------------- */
:root {
  --fs-nav: 16.5px;
}

@media (min-width: 1024px) {
  .header-inner {
    align-items: flex-end;
    gap: 18px;
  }

  .logo { line-height: 0; }
  .logo img { height: 46px; }

  /* Navigation mittig zwischen Logo und Kopfzeilen-Infos */
  .main-nav {
    margin-left: auto;
    margin-right: auto;
  }
  .main-nav > ul { align-items: flex-end; gap: 26px; }

  /* Kein unteres Padding an den Links: dadurch liegt die
     Schriftunterkante auf der Unterkante des Logos. */
  .main-nav > ul > li > a {
    padding: 10px 0 0;
    font-weight: 400;
    letter-spacing: .01em;
  }

  /* Unsichtbare Bruecke, damit das Untermenue beim Herunterfahren
     mit der Maus nicht zuklappt. */
  .main-nav > ul > li::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    height: 18px;
  }
  .main-nav .submenu { top: calc(100% + 18px); }

  /* Telefonnummer und Sprachwahl sitzen in derselben Schriftgroesse wie
     die Navigation - sonst liegen die Grundlinien trotz gleicher
     Unterkante optisch versetzt. Dazwischen mehr Luft. */
  .header-meta {
    margin-left: 0;
    align-items: flex-end;
    gap: 40px;
  }
  .header-phone { font-size: var(--fs-nav); line-height: 1.2; color: var(--color-text); }
  .lang-switch { font-size: var(--fs-nav); align-items: flex-end; gap: 0; }
}

/* DE | EN | FR mit Trennstrichen wie in der Visualisierung */
.lang-switch li { display: flex; align-items: center; }
.lang-switch li + li::before {
  content: "|";
  color: #b9b9b9;
  padding: 0 9px;
  font-weight: 300;
}

/* Untermenue ohne grauen Rand - reine weisse Flaeche */
@media (min-width: 1024px) {
  .main-nav .submenu {
    border: 0;
    box-shadow: 0 10px 26px rgba(0,0,0,.10);
  }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .main-nav > ul { gap: 17px; }
  .main-nav > ul > li > a { font-size: 15.5px; }
  .logo img { height: 42px; }
  .header-phone, .lang-switch { font-size: 14px; }
  .header-meta { gap: 16px; }
}

@media (min-width: 1280px) {
  .main-nav > ul { gap: 30px; }
}

/* ---------- 24.2 Einheitliches Bildformat 1920 x 980 -------
   Alle grossformatigen Slider- und Videobereiche laufen jetzt
   im Original-Seitenverhaeltnis der gelieferten Bilder.
   Dadurch entfaellt der Anschnitt oben und unten - auch mobil.
   ---------------------------------------------------------- */
.hero--home,
.hero--page {
  height: auto;
  min-height: 0;
  aspect-ratio: 1920 / 980;
}
.hero-slide img,
.hero-slide video { object-position: center center; }

@media (min-width: 768px) {
  .hero--page { height: auto; }
}
@media (min-width: 1024px) {
  .hero--home { height: auto; }
}

/* Auf sehr schmalen Displays wuerde das 1,96:1-Format sehr
   flach wirken. 4:3 waere ein Anschnitt - deshalb bleibt das
   Format erhalten und der Bildinhalt vollstaendig sichtbar. */

/* ---------- 24.3 Portraets: keine Hochrechnung -------------
   Die Portraets liegen in 350 x 350 px vor. Die Raster werden
   so begrenzt, dass eine Kachel nie breiter als 350 px wird.
   ---------------------------------------------------------- */
/* Die Raster sind auf genau 350 px Kachelbreite gerechnet. Das ist
   wichtig: schon 352 px zwingen den Browser, das komplette Bild zu
   interpolieren, was messbar ueber die Haelfte des Mikrokontrasts
   kostet. Bei exakt 350 px liegt Pixel auf Pixel. */
.team-grid {
  max-width: 350px;
  margin-left: 0;
  margin-right: 0;
}

@media (min-width: 576px) {
  .team-grid { max-width: 736px; }   /* 2 x 350 + 1 x 36 px Spalte  */
}
@media (min-width: 1024px) {
  .team-grid { max-width: 1122px; }  /* 3 x 350 + 2 x 36 px Spalte  */
}

.portrait img { image-rendering: auto; }

/* Backoffice: zwoelfspaltiges Raster.
   Reihe 1: Leitung | Supervisor | Therapeuten | Junior (je 283 px)
   Reihe 2: Security | Aktivisten (je 602 px) */
@media (min-width: 1024px) {
  .team-grid--pets { max-width: 1240px; grid-template-columns: repeat(12, 1fr); }
  .team-grid--pets .team-card { grid-column: span 3; }
  .team-grid--pets .team-card--wide { grid-column: span 6; }
}

/* Lupe: oeffnet die Grossansicht, ohne dem Mouseover in die Quere zu
   kommen. Ein Klick auf die Kachel wechselt weiterhin das Motiv,
   ein Klick auf die Lupe vergroessert. */
.portrait-zoom {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(0,0,0,.45);
  color: #fff;
  font-size: 13px;
  z-index: 3;
  opacity: 0;
  transition: opacity .25s ease, background .25s ease;
}
.portrait:hover .portrait-zoom,
.portrait:focus-within .portrait-zoom { opacity: 1; }
.portrait-zoom:hover { background: rgba(0,0,0,.7); }
/* Auf Touchgeraeten gibt es kein Hover - dort immer sichtbar */
@media (hover: none) {
  .portrait-zoom { opacity: .85; }
}
/* Punkte weichen der Lupe aus */
.portrait-zoom ~ .portrait-dots,
.portrait .portrait-dots { right: 50px; }
.portrait:not(:has(.portrait-zoom)) .portrait-dots { right: 8px; }

/* ---------- 24.4 Startseite: Einstieg ---------------------- */
.home-intro { padding: 46px 0 6px; }
.home-intro .intro-text {
  max-width: none;
  font-size: 18px;
  line-height: 1.68;
}
.home-intro .intro-text p { margin: 0; }
.home-intro .intro-text p + p { margin-top: 18px; }

@media (min-width: 1024px) {
  .home-intro { padding: 56px 0 6px; }
  .home-intro .intro-text {
    column-count: 2;
    column-gap: 60px;
  }
}

/* ---------- 24.5 Mosaik: grosszuegige Variante -------------
   Jede Zeile ist ein Flex-Container. Die Kacheln bekommen als
   flex-grow ihr eigenes Seitenverhaeltnis, dadurch sind alle
   Kacheln einer Zeile exakt gleich hoch, die Zeile schliesst
   links und rechts buendig ab UND kein Bild wird beschnitten.
   ---------------------------------------------------------- */
.mosaic--roomy {
  display: block;
  margin: 38px 0 6px;
}

/* Mosaik ueber die gesamte Seitenbreite, nur mit einem schmalen Steg
   zum Rand - wie im Muster Hotel Ruebezahl. Kein Motiv laeuft allein
   ueber die volle Breite, jede Zeile hat drei bis vier Kacheln. */
.mosaic-section { padding-left: 0; padding-right: 0; }
.mosaic--full {
  width: 100%;
  max-width: none;
  margin: 34px 0 0;
  padding: 0 6px;
}
@media (max-width: 767px) {
  .mosaic--full { padding: 0 5px; }
}
.mosaic-row {
  display: flex;
  gap: 6px;
  margin-bottom: 6px;
}
.mosaic--roomy .mosaic-tile {
  flex: var(--ar, 1.5) 1 0px;
  min-width: 0;
  aspect-ratio: var(--ar, 1.5);
  cursor: zoom-in;
}
.mosaic--roomy .mosaic-tile video { cursor: default; }
.mosaic--roomy .mosaic-tile img,
.mosaic--roomy .mosaic-tile video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Abspiel-Hinweis auf den Videokacheln.
   Die Videos starten erst bei Mouseover bzw. Antippen, deshalb
   braucht die Kachel ein sichtbares Zeichen, dass ein Film
   dahintersteckt. Waehrend des Abspielens blendet er aus. */
.mosaic-tile video { cursor: pointer; }

.mosaic-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  pointer-events: none;
  transition: opacity .3s ease;
}
.mosaic-play i {
  width: 54px; height: 54px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(0,0,0,.42);
  color: #fff;
  font-size: 17px;
  padding-left: 3px;            /* optischer Ausgleich des Dreiecks */
  /* backdrop-filter entfernt (11.09.): Weichzeichner ueber laufendem Video kostet auf schwachen Grafikchips jedes Bild neu */
  transition: background .25s ease, transform .25s ease;
}
.mosaic-tile:hover .mosaic-play i { background: rgba(0,0,0,.6); transform: scale(1.06); }
/* 11.09.2026 (Frau Arnold, Mail nachmittags): ein Start-Stopp-Symbol an
   derselben Stelle. Ruhe = Play mittig; laeuft der Film, steht an exakt
   derselben Stelle in gleicher Groesse das Pause-Symbol - waehrend des Laufs
   gedimmt, bei Mauskontakt voll, auf Touch-Geraeten immer voll. Ein Klick
   haelt Bild und Ton gemeinsam an (js/main.js initMosaicVideos). */
.mosaic-tile.is-playing:not(.is-paused) .mosaic-play { opacity: .45; }
.mosaic-tile.is-playing:not(.is-paused):hover .mosaic-play { opacity: 1; }
.mosaic-tile.is-playing:not(.is-paused) .mosaic-play i { padding-left: 0; }
@media (hover: none) {
  .mosaic-tile.is-playing:not(.is-paused) .mosaic-play { opacity: 1; }
}

/* Ladeanzeige: solange gepuffert wird, dreht sich an derselben Stelle
   ein Ring, damit erkennbar ist, dass etwas passiert.
   Vorgabe Frau Arnold, E-Mail vom 06.08.2026. */
.mosaic-load {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 3;
  pointer-events: none;
}
.mosaic-tile.is-loading .mosaic-load { display: flex; }
.mosaic-load span {
  width: 54px; height: 54px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  background: rgba(0,0,0,.42);
  animation: mosaic-spin .9s linear infinite;
}
@keyframes mosaic-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .mosaic-load span { animation-duration: 2.4s; }
}

@media (max-width: 767px) {
  .mosaic-play i { width: 44px; height: 44px; font-size: 14px; }
  .mosaic-load span { width: 44px; height: 44px; border-width: 2px; }
}

/* Bildunterschrift-Hinweis "vergroessern" */
.mosaic--roomy figure.mosaic-tile::after {
  content: "\f00e";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(0,0,0,.45);
  color: #fff;
  font-size: 13px;
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}
.mosaic--roomy figure.mosaic-tile:hover::after { opacity: 1; }

/* Bis 1023px umbrechen die Zeilen. Ohne diesen Umbruch quetscht eine
   Zeile aus Hochformat + Querformat + Hochformat die Hochformat-Kacheln
   auf dem Tablet auf unter 200px zusammen - genau die Kleinteiligkeit,
   die vermieden werden soll. Querformate laufen deshalb ueber die volle
   Breite, Hochformate stehen zu zweit nebeneinander. */
@media (max-width: 1023px) {
  .mosaic-row { flex-wrap: wrap; gap: 5px; margin-bottom: 5px; }
  .mosaic--roomy .mosaic-tile--l { flex: 1 1 100%; order: 2; }
  .mosaic--roomy .mosaic-tile--p { flex: 1 1 calc(50% - 2.5px); order: 1; }
}

/* ---------- 24.6 Lightbox ---------------------------------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(12,12,12,.94);
  padding: 40px 16px 76px;
}
.lightbox.is-open { display: flex; }
/* Grossansicht bewusst rund 20 Prozent kleiner als der verfuegbare
   Raum, damit das Bild nicht den ganzen Schirm ausfuellt. */
.lightbox img {
  max-width: 80%;
  max-height: 80%;
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: 0 10px 50px rgba(0,0,0,.5);
}
.lightbox-caption {
  position: absolute;
  left: 0; right: 0;
  bottom: 26px;
  text-align: center;
  color: #e8e8e8;
  font-size: 15px;
  padding: 0 60px;
}
.lightbox-btn {
  position: absolute;
  background: none;
  border: 0;
  color: #fff;
  font-size: 28px;
  width: 54px; height: 54px;
  display: flex; align-items: center; justify-content: center;
  opacity: .8;
}
.lightbox-btn:hover { opacity: 1; }
.lightbox-close { top: 14px; right: 14px; font-size: 26px; }
.lightbox-prev { left: 10px; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 10px; top: 50%; transform: translateY(-50%); }
body.lightbox-open { overflow: hidden; }

@media (min-width: 768px) {
  .lightbox { padding: 60px 80px 80px; }
  .lightbox-close { top: 20px; right: 24px; }
  .lightbox-prev { left: 18px; }
  .lightbox-next { right: 18px; }
}

/* ---------- 24.7 Fussbereich -------------------------------
   Logo steht frei ueber den Bloecken, damit Adresse,
   Telefonservice und Downloads oben auf einer Linie beginnen.
   ---------------------------------------------------------- */
/* Vier Bloecke auf gemeinsamer Oberkante, gleichmaessige Abstaende,
   Trennlinien zwischen den Textbloecken. Das Logo ist genauso gross
   wie im Kopfbereich. Kompakterer Zeilendurchschuss. */
.site-footer {
  padding: 40px 0 38px;
  font-size: 15.5px;
  line-height: 1.45;
}

.footer-brand { margin: 0; }
.footer-brand .footer-logo { height: 40px; width: auto; margin: 0; }

.footer-grid {
  grid-template-columns: 1fr;
  gap: 26px;
  align-items: start;
}
.footer-grid > div > *:first-child { margin-top: 0; }
.footer-grid p { margin: 0 0 11px; line-height: 1.45; }
.footer-grid p:last-child { margin-bottom: 0; }
.footer-links a { display: block; margin: 0 0 7px; }
.footer-links a:last-child { margin-bottom: 0; }

@media (min-width: 768px) {
  .footer-grid { grid-template-columns: auto 1fr 1fr auto; gap: 30px 34px; }
  /* Trennlinien wie in der Visualisierung */
  .footer-hours,
  .footer-links { border-left: 1px solid rgba(0,0,0,.18); padding-left: 34px; }
}
@media (min-width: 1024px) {
  .site-footer { padding: 48px 0 44px; }
  .footer-brand .footer-logo { height: 46px; }   /* identisch mit dem Kopf */
  .footer-grid { grid-template-columns: auto 1fr 1fr auto; gap: 0 44px; }
  .footer-hours,
  .footer-links { padding-left: 44px; }
}

/* Agenturhinweis erscheint nur noch im Impressum */
.agency-branding {
  border-top: 1px solid rgba(0,0,0,.12);
  margin-top: 34px;
  padding-top: 16px;
  font-size: 14.5px;
}

/* ---------- 24.8 Kontakt: Wortmarke ------------------------ */
/* Logo in derselben Groesse wie im Kopfbereich (46 px hoch),
   Adresse direkt darunter. */
.contact-address { margin: 4px 0 30px; }
.contact-address .contact-brand { margin: 0 0 18px; max-width: none; }
.contact-address .contact-brand img { height: 40px; width: auto; }
.contact-address .address-block { margin-bottom: 14px; }
.contact-address .address-contact { margin-top: 0; }
@media (min-width: 1024px) {
  .contact-address .contact-brand img { height: 46px; }
}

.feature--brand { align-items: flex-start; }
@media (min-width: 768px) {
  .feature--brand .feature-media { flex: 0 0 32%; }
}
.contact-brand { margin: 0; max-width: 230px; }
.contact-brand img { width: 100%; height: auto; }
.contact-brand figcaption {
  margin-top: 8px;
  font-size: 15px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #1a1a1a;
  font-weight: 300;
}

/* =========================================================
   25. Feinschliff August 2026 – Runde 2 (To-do-Liste 19.08.)
   ========================================================= */

/* ---------- 25.1 Schriftgroessen insgesamt feiner ----------
   Hauptueberschriften 2–3 pt kleiner, Unterueberschriften 1–2 pt,
   Fliesstexte 1–2 pt. Die grauen Funktionsbezeichnungen bei den
   Mitarbeitern rund 20 Prozent dunkler, damit sie besser lesbar sind.
   ---------------------------------------------------------- */
:root {
  --fs-body: 16px;      /* war 17 */
  --fs-h1: 21px;        /* war 24 */
  --fs-h2: 20px;        /* war 22 */
  --fs-h3: 17.5px;      /* war 19 */
  --color-muted: #666666;   /* war #808080 – rund 20 % dunkler */
}

.page-head h1 { font-size: 26px; }               /* war 30 */
.section-title { font-size: var(--fs-h1); }
.section-subtitle { font-size: 18px; }           /* war var(--fs-h2) 22 */
.home-intro .intro-text { font-size: 16.5px; }   /* war 18 */
.page-head .page-teaser { font-size: 16.5px; }   /* war 18 */
.team-card h3 { font-size: var(--fs-h3); }
.team-card p { font-size: 15px; }                /* war 16 */
.entry-card h3 { font-size: 18px; }              /* war 20 */
.entry-card p { font-size: 15px; }
.feature-body h2 { font-size: var(--fs-h2); }
.acc-trigger { font-size: 17px; }
.acc-panel { font-size: 15.5px; }
.rich-text p { margin-bottom: 16px; }

@media (min-width: 768px) {
  .page-head h1 { font-size: 29px; }             /* war 34 */
}

/* Funktionsbezeichnungen: dunkler und damit lesbarer */
.team-card p { color: #666666; }
.team-card p strong { color: #222; }
.team-card .team-mail { color: var(--color-text-soft); }

/* ---------- 25.2 Texteinblendung im Einstiegsvideo -----------
   Die Einblendungen sitzen im oberen Bilddrittel, solange ueber den
   Personen noch Himmel steht. Sehr ruhiges Ein- und Ausblenden ohne
   Bewegung. Die Steuerung laeuft ueber die Videozeit (js/main.js).
   ---------------------------------------------------------- */
.hero-cues {
  position: absolute;
  left: 0; right: 0;
  top: 0;
  height: 34%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 2;
  padding: 0 24px;
}
.hero-cue {
  position: absolute;
  margin: 0;
  width: 100%;
  text-align: center;
  color: #fff;
  font-family: "Roboto Condensed", "Roboto", Arial, sans-serif;
  font-weight: 300;
  opacity: 0;
  text-shadow: 0 1px 14px rgba(0,0,0,.30);
  transition: opacity .12s linear;
}
.hero-cue--gross {
  font-size: clamp(26px, 4.6vw, 62px);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.hero-cue--klein {
  font-size: clamp(15px, 1.75vw, 24px);
  font-weight: 400;
  text-shadow: 0 1px 18px rgba(0,0,0,.55);
  letter-spacing: .045em;
  max-width: 780px;
  left: 50%;
  transform: translateX(-50%);
  line-height: 1.5;
}
@media (prefers-reduced-motion: reduce) {
  .hero-cue { transition: none; }
}

/* 11.09.2026, Frau Arnold: Hoehe des Einstiegsvideos wie die Slider der
   Unterseiten (1920 x 980). Der Beschnitt steckt in der Videodatei selbst
   (Teamteil oben ausgerichtet, Lkw-Teil unten ausgerichtet), das Video
   liegt in 1920 x 980 vor und wird 1:1 gezeigt. */
.hero--home { aspect-ratio: 1920 / 980; }
.hero--home .hero-slide video,
.hero--home .hero-standbild { object-position: center center; }

/* Lange Links in den Rechtstexten umbrechen, damit auf schmalen
   Displays nicht seitlich gescrollt werden muss. */
.legal a, .legal p, .legal li,
.rich-text a, .rich-text p, .rich-text li { overflow-wrap: anywhere; }

/* Ueberschrift ueber dem zweispaltigen Einstiegstext */
.intro-title {
  font-size: 21px;
  font-weight: 700;
  color: #1f1f1f;
  margin: 0 0 14px;
}
@media (min-width: 768px) { .intro-title { font-size: 23px; } }

/* =========================================================
   26. Schriftgroessen exakt nach der PDF-Visualisierung
   Gemessen aus der Vorlage: Navigation 10,5 pt, Fliesstext
   10,5 pt - also GLEICH gross. Ueberschriften 11,25 pt fett,
   das sind rund sieben Prozent mehr. Der Fussbereich laeuft
   ebenfalls auf 10,5 pt, nur mit engerem Durchschuss.
   ========================================================= */
:root {
  --fs-nav: 16px;
  --fs-body: 16px;
  --fs-h1: 17px;     /* Abschnittsueberschriften, fett */
  --fs-h2: 17px;
  --fs-h3: 16.5px;
}

.section-title { font-size: var(--fs-h1); }
.intro-title { font-size: 17px; }
@media (min-width: 768px) { .intro-title { font-size: 17px; } }
.section-subtitle { font-size: 16px; }
.home-intro .intro-text { font-size: 16px; }
.page-head .page-teaser { font-size: 16px; }
.entry-card h3 { font-size: 16.5px; }
.team-card h3 { font-size: var(--fs-h3); }
.acc-trigger { font-size: 16.5px; }

/* Fussbereich: gleiche Schriftgroesse wie der Fliesstext,
   enger gesetzt - so steht es in der Visualisierung. */
.site-footer { font-size: 16px; line-height: 1.4; }
.footer-grid p { line-height: 1.4; margin-bottom: 10px; }

/* Die Regel aus Abschnitt 21.2 (.home-intro p, 19 px) war spezifischer als
   die neue Vorgabe und hat den Fliesstext groesser gehalten als die
   Navigation. Hier gilt endgueltig die Groesse aus der Visualisierung. */
.home-intro .intro-text p,
.home-intro p { font-size: 16px; line-height: 1.62; }

/* Fussbereich-Farbe exakt aus der Visualisierung ausgemessen: ein sehr
   helles Grau (#f8f8f8) auf weisser Seite, nicht das bisherige #cccccc. */
.site-footer { background: #f8f8f8; color: #1f1f1f; }
.footer-hours,
.footer-links { border-left-color: rgba(0,0,0,.13); }
.agency-branding { border-top-color: rgba(0,0,0,.10); }

/* =========================================================
   27. Texteinblendungen im Einstiegsvideo – exakt nach der
   Demo vom 25.08. vermessen (Bild fuer Bild gegen das Video
   ohne Schrift gerechnet):
     grosse Zeile   73 px Versalhoehe bei 1080 -> 6,8 % Bildhoehe
     kleine Zeile   36 px                      -> 3,3 % Bildhoehe
     Block oben     Mitte bei 17,6 % der Hoehe
     Block unten    Mitte bei 85,5 % der Hoehe
   Keine Sperrung, kein Schatten, Schnitt Medium.
   ========================================================= */
.hero-cues { position: absolute; inset: 0; height: auto; display: block; padding: 0; }

.hero-cue {
  position: absolute;
  left: 0; right: 0;
  margin: 0;
  padding: 0 4%;
  text-align: center;
  color: #fff;
  font-family: "Roboto Condensed", "Avenir Next Condensed", "Roboto", Arial, sans-serif;
  font-weight: 500;
  letter-spacing: 0;      /* die Demo zeigt keine Sperrung */
  text-shadow: none;      /* ausdruecklich ohne Schatten */
  opacity: 0;
  transition: opacity .1s linear;
  transform: translateY(-50%);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

.hero-cue--gross {
  font-size: 5.31vw;          /* 102 px bei 1920 */
  line-height: 1.05;
  text-transform: uppercase;
}
.hero-cue--klein {
  font-size: 2.29vw;          /* 44 px bei 1920 */
  line-height: 1.35;
}
.hero-cue--oben  { top: 17.6%; }
.hero-cue--unten { top: 85.5%; }

/* Auf schmalen Displays sonst zu gross bzw. zu klein */
@media (max-width: 767px) {
  .hero-cue--gross { font-size: 7.4vw; }
  .hero-cue--klein { font-size: 3.4vw; }
  .hero-cue--unten { top: 84%; }
}

/* =========================================================
   28. Rueckmeldung 25.08. – Farben, Abstaende, Mosaik
   ========================================================= */

/* ---------- 28.1 Steg im Mosaik ----------
   Vorgabe Frau Arnold, E-Mail vom 06.08.2026: "ein Steg von
   ca. 15 - 20 Pixel waere vermutlich sinnvoll". Gesetzt: 16 px.
   Mobil anteilig schmaler, sonst bleibt fuer die Motive zu wenig. */
.mosaic-row { gap: 16px; margin-bottom: 16px; }
.mosaic--full { padding: 0 16px; }
@media (max-width: 767px) {
  .mosaic-row { gap: 12px; margin-bottom: 12px; }
  .mosaic--full { padding: 0 12px; }
  .mosaic--roomy .mosaic-tile--p { flex: 1 1 calc(50% - 6px); }
}

/* ---------- 28.2 Schwarz- und Grauwerte ----------
   Ueberschriften und Namen schwarz, alles Uebrige in einem
   dunklen Grau von rund 90 Prozent Schwarz (#333333).
   ---------------------------------------------------------- */
:root {
  --color-text: #333333;
  --color-text-soft: #333333;
  --color-muted: #333333;
  --color-heading: #000000;
}

body { color: #333333; }

.page-head h1,
.section-title,
.section-subtitle,
.intro-title,
.feature-body h2,
.legal h1, .legal h2,
.team-card h3,
.entry-card h3 { color: #000000; }

.page-head .page-teaser,
.home-intro .intro-text p,
.home-intro p,
.rich-text p, .rich-text li,
.feature-body p,
.acc-panel, .acc-panel p, .acc-panel li,
.entry-card p,
.team-card p,
.legal p, .legal li,
.address-block, .address-contact,
.map-note,
.job-block p, .job-contact p { color: #333333; }

/* Namen der Mitarbeiter schwarz, Funktion darunter dunkelgrau */
.team-card h3 { font-weight: 500; color: #000; }
.team-card p { color: #333333; }
.team-card p strong { color: #000000; font-weight: 700; }
.team-card .team-mail,
.team-card .team-mail a { color: #333333; }

/* Backoffice wie Menschen aufgebaut: Name schwarz, darunter die
   Bezeichnung und der Beschreibungstext in demselben Dunkelgrau. */
.team-grid--pets .team-card h3 { color: #000; }
.team-grid--pets .team-card p,
.team-grid--pets .team-card p strong { color: #333333; }
.team-grid--pets .team-card p strong { color: #000000; }

/* ---------- 28.3 Lager und Fahrer deutlicher trennen ---------- */
.section-subtitle { color: #000000; font-weight: 500; margin: 40px 0 18px; }
#lager-fahrer .team-grid + .section-subtitle { margin-top: 78px; }

/* ---------- 28.4 Fussbereich: mehr Luft vor den Downloads ---------- */
@media (min-width: 768px) {
  .footer-links { padding-left: 60px; margin-left: 16px; }
}
@media (max-width: 767px) {
  .footer-links {
    border-top: 1px solid rgba(0,0,0,.15);
    padding-top: 20px;
    margin-top: 6px;
  }
}

/* ---------- 28.5 Einleitungstexte der Unterseiten zweispaltig ---------- */
@media (min-width: 1024px) {
  .page-head .page-teaser {
    column-count: 2;
    column-gap: 60px;
    max-width: none;
  }
}

/* ---------- 28.6 Mobile Schriftgroessen -----------------
   Einleitungsueberschrift und Einleitungstext waren mobil zu
   gross. Massstab sind die Kacheln unter "Einblicke".
   ---------------------------------------------------------- */
@media (max-width: 767px) {
  .page-head h1 { font-size: 20px; }
  .intro-title { font-size: 17px; }
  .page-head .page-teaser,
  .home-intro .intro-text p,
  .home-intro p { font-size: 15px; line-height: 1.55; }
  .section-title { font-size: 17px; }
  .section-subtitle { font-size: 15.5px; margin: 30px 0 14px; }
  #lager-fahrer .team-grid + .section-subtitle { margin-top: 54px; }
  .team-card h3 { font-size: 16px; }
  .team-card p, .entry-card p { font-size: 15px; }
  .site-footer { font-size: 15px; }
}

/* ---------- 28.7 Vergroesserung auf dem Smartphone ----------
   Gemessen: eine Backoffice-Kachel ist mobil 350 px breit, die
   Grossansicht kam auf 286 px – also kleiner statt groesser.
   Deshalb entfaellt die Lupe dort. Im Mosaik nutzt die
   Grossansicht mobil die volle Breite, damit sie wirklich
   vergroessert.
   ---------------------------------------------------------- */
@media (max-width: 767px) {
  .portrait-zoom { display: none; }
  .lightbox { padding: 16px 8px 60px; }
  .lightbox img { max-width: 100%; max-height: 100%; }
}

/* Die aeltere Regel aus Abschnitt 25 hielt die kleine Zeile auf
   max-width 780px und left:50% - dadurch wurde sie umbrochen und aus
   der Mitte geschoben. Hier gilt endgueltig die Vorgabe aus der Demo:
   volle Breite, mittig, einzeilig. */
.hero-cue--klein,
.hero-cue--gross {
  left: 0;
  right: 0;
  max-width: none;
  transform: translateY(-50%);
  white-space: nowrap;
}
@media (max-width: 900px) {
  .hero-cue--klein { white-space: normal; }
}

/* ---------- 28.8 Zwei klare Textebenen auf allen Seiten ----------
   Laufender Text ueberall 16 px, Bildunterschriften und
   Funktionszeilen ueberall 15 px. Keine Zwischengroessen mehr.
   ---------------------------------------------------------- */
.rich-text p, .rich-text li,
.feature-body p,
.acc-panel, .acc-panel p, .acc-panel li,
.legal p, .legal li,
.job-block p, .job-contact p,
.page-head .page-teaser,
.home-intro .intro-text p,
.home-intro p,
.address-block, .address-contact { font-size: 16px; }

.team-card p,
.entry-card p,
.map-note,
.download-item .download-meta { font-size: 15px; }

@media (max-width: 767px) {
  .rich-text p, .rich-text li,
  .feature-body p,
  .acc-panel, .acc-panel p, .acc-panel li,
  .legal p, .legal li,
  .job-block p, .job-contact p,
  .page-head .page-teaser,
  .home-intro .intro-text p,
  .home-intro p,
  .address-block, .address-contact { font-size: 15px; }
  .team-card p, .entry-card p { font-size: 14.5px; }
}

/* =========================================================
   29. Genau drei Schriftgroessen auf der gesamten Website
       1. Navigation (Kopfbereich)
       2. Fliesstext  – eine einzige Groesse
       3. Ueberschriften – eine einzige Groesse
   Sonst keine weitere Groesse. Mobil alles eine Stufe kleiner.
   ========================================================= */
:root {
  --fs-navi: 16px;
  --fs-text: 16px;
  --fs-head: 17px;
}
@media (max-width: 767px) {
  :root {
    --fs-navi: 15px;
    --fs-text: 15px;
    --fs-head: 16px;
  }
}

/* --- 1. Navigation --- */
.main-nav > ul > li > a,
.main-nav .submenu a,
.header-phone,
.lang-switch,
.lang-switch a,
.offcanvas ul li > a,
.offcanvas .submenu li > a,
.offcanvas-meta,
.offcanvas-meta a { font-size: var(--fs-navi); }

/* --- 2. Ueberschriften --- */
.page-head h1,
.intro-title,
.section-title,
.section-subtitle,
.feature-body h2,
.team-card h3,
.entry-card h3,
.job-block h3,
.legal h1,
.legal h2,
.acc-trigger,
.cert-item h3,
.error-page h1 { font-size: var(--fs-head); }

@media (min-width: 768px) {
  .page-head h1 { font-size: var(--fs-head); }
}

/* --- 3. Fliesstext – alles Uebrige --- */
body,
p, li, address, dd, dt, td, th, figcaption, label, summary,
.page-head .page-teaser,
.home-intro .intro-text p,
.home-intro p,
.rich-text p, .rich-text li,
.feature-body p,
.acc-panel, .acc-panel p, .acc-panel li,
.legal p, .legal li,
.job-block p, .job-contact p,
.team-card p, .team-card .team-mail,
.entry-card p,
.address-block, .address-contact,
.map-note,
.download-item .download-name,
.download-item .download-meta,
.btn-download,
.site-footer,
.footer-grid p,
.footer-links a,
.cookie-banner,
.cookie-btn,
.map-placeholder p,
.map-load,
.contact-brand figcaption,
.lightbox-caption { font-size: var(--fs-text); }

/* Die Texteinblendungen im Video richten sich nach der Bildbreite und
   sind bewusst ausgenommen – sie liegen im Film, nicht im Satzspiegel. */

/* Letzte Ausreisser: die grosse Ziffer der Fehlerseite und die
   unsichtbare Seitenueberschrift der Startseite laufen ebenfalls
   auf der Ueberschriftengroesse – damit gibt es auf der gesamten
   Website keine vierte Groesse mehr. */
.error-page .error-code,
h1.visually-hidden { font-size: var(--fs-head); }
.error-page .error-code { font-weight: 700; line-height: 1.2; margin-bottom: 8px; }

/* =========================================================
   30. Einheitlicher Zeilenabstand im Fliesstext
   ---------------------------------------------------------
   Vorgabe Frau Arnold, Visualisierung vom 25.08.2026:
   "Auf allen Seiten gleich: Schriftgroesse, Zeilenabstand und
   zweispaltige Anordnung."
   Gemessen war der Fliesstext vorher mit 1,5 / 1,55 / 1,6 / 1,62 /
   1,65 / 1,68 unterwegs - je nach Seite ein anderer Wert. Hier gilt
   fuer den gesamten Inhaltsbereich endgueltig 1,5. Kopf- und
   Fussbereich behalten ihre eigenen, seitenuebergreifend
   einheitlichen Werte.
   ========================================================= */
main p,
main li,
main address,
main dd,
main dt,
.page-head .page-teaser,
.home-intro p,
.home-intro .intro-text,
.home-intro .intro-text p,
.entry-card p,
.team-card p,
.download-item .download-name,
.download-item .download-meta,
main .lead {
  line-height: 1.5;
}

/* Die aufklappbaren Ueberschriften bei Holz und Karriere sind
   Ueberschriften und laufen deshalb im Ueberschriften-Durchschuss. */
.acc-trigger { line-height: 1.25; }

@media (max-width: 767px) {
  .page-head .page-teaser,
  .home-intro .intro-text p,
  .home-intro p {
    line-height: 1.5;
  }
}

/* =========================================================
   31. Kopfbereich: Telefonnummer mittig
   ---------------------------------------------------------
   Vorgabe Frau Arnold, Telefonat vom 25.08.2026: "Da sollte die
   Telefonnummer mittig gesetzt werden zwischen Kontakt und den
   Sprachen." Bisher sammelte sich der gesamte Freiraum links von
   der Gruppe (gemessen 101 px links, 40 px rechts). Jetzt teilt
   sich der Freiraum ueber margin:auto gleichmaessig auf beide
   Seiten der Telefonnummer - unabhaengig von der Fensterbreite.
   ========================================================= */
@media (min-width: 1024px) {
  .header-meta {
    /* -20px hebt den 20px-Abstand aus .header-inner auf, damit der
       Freiraum vollstaendig ueber die margin:auto der Telefonnummer
       verteilt wird und links wie rechts gleich gross ausfaellt. */
    margin-left: -20px;
    flex: 1 1 auto;
    justify-content: flex-end;
    gap: 0;
  }
  .header-phone {
    margin-left: auto;
    margin-right: auto;
    /* Links wirkt zusaetzlich der 20px-Abstand aus .header-inner,
       deshalb hier links entsprechend weniger. Ergebnis: gleiche
       Luecke zu "Kontakt" wie zur Sprachauswahl. */
    padding: 0 26px;
  }
}

/* =========================================================
   32. Namen bei Menschen und Backoffice
   ---------------------------------------------------------
   Vorgabe Frau Arnold, Telefonat vom 25.08.2026: "Ich glaube, das
   ist auch noch einen Tick zu gross, die Namen ... sie muessen
   wenigstens einen Minitick kleiner sein" - gemeint im Vergleich zu
   den Seitenueberschriften. Namen laufen deshalb in der
   Fliesstextgroesse, bleiben aber schwarz und halbfett und heben
   sich dadurch weiterhin von der Funktionsbezeichnung ab.
   ========================================================= */
.team-card h3,
.team-card > h3 {
  font-size: var(--fs-text);
  font-weight: 600;
  color: var(--color-heading);
}

/* =========================================================
   33. Kopfbereich: gemeinsame Schriftgrundlinie
   ---------------------------------------------------------
   Die Telefonnummer lief mit Zeilenhoehe 1,2, Menue und
   Sprachauswahl mit 1,5. Bei align-items:flex-end sassen die
   Unterkanten der Boxen zwar bündig, die Schriftgrundlinie der
   Telefonnummer aber 2,8 px tiefer. Gleiche Zeilenhoehe = gleiche
   Grundlinie.
   ========================================================= */
.header-phone { line-height: 1.5; }

/* =========================================================
   34. Liefergebiete: klare Zuordnung
   ---------------------------------------------------------
   Vorgabe Frau Arnold, Telefonat vom 25.08.2026: "Da koennte
   eine bessere Zuordnung herrschen ... da gehoert ein bisschen
   mehr zusammen. Das ist jetzt der gleiche Abstand, obwohl das
   zusammengehoert." Jede Angabe steht jetzt als eigene Gruppe:
   Ueberschrift, direkt darunter die Lieferzeit, darunter der
   Text. Zwischen den Gruppen deutlich mehr Luft als innerhalb.
   ========================================================= */
.liefer-gruppen {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px 56px;
  margin: 22px 0 0;
}
@media (min-width: 768px) {
  .liefer-gruppen { grid-template-columns: 1fr 1fr; }
  /* Die dritte Gruppe steht allein in der zweiten Zeile und
     bleibt dort auf Spaltenbreite - nicht ueber beide Spalten. */
}
.liefer-gruppe h3 {
  font-size: var(--fs-head);
  font-weight: 700;
  color: var(--color-heading);
  margin: 0 0 2px;
  line-height: 1.25;
}
.liefer-gruppe .liefer-zeit {
  margin: 0 0 12px;
  color: var(--color-muted);
}
.liefer-gruppe p { margin: 0 0 12px; }
.liefer-gruppe p:last-child { margin-bottom: 0; }

/* =========================================================
   35. Tonschalter im Einstiegsvideo
   ---------------------------------------------------------
   Browser lassen ein automatisch startendes Video nur stumm
   zu. Die Musik liegt zwar in der Datei, war ohne Bedienelement
   aber nicht hoerbar. Der Schalter sitzt unten rechts im
   Videobereich, in derselben Form wie die Tonschalter der
   Mosaikkacheln.
   ========================================================= */
.hero--home { position: relative; }
.hero-sound {
  position: absolute;
  right: 24px;
  bottom: 24px;
  z-index: 4;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(0,0,0,.5);
  color: #fff;
  font-size: 15px;
  cursor: pointer;
  transition: background .25s ease, transform .25s ease;
  /* backdrop-filter entfernt (11.09.): Weichzeichner ueber laufendem Video kostet auf schwachen Grafikchips jedes Bild neu */
}
.hero-sound:hover { background: rgba(0,0,0,.72); transform: scale(1.06); }
.hero-sound:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (max-width: 767px) {
  .hero-sound { right: 14px; bottom: 14px; width: 38px; height: 38px; font-size: 13px; }
}

/* =========================================================
   36. Logo im Fuss und auf der Kontaktseite exakt so gross
   wie im Kopfbereich - auch zwischen 1024 und 1279 px, wo
   der Kopf auf 42 px verkleinert.
   ========================================================= */
@media (min-width: 1024px) and (max-width: 1279px) {
  .footer-brand .footer-logo,
  .contact-brand img { height: 42px; }
}

/* =========================================================
   37. Backoffice wie "Menschen" aufgebaut
   ---------------------------------------------------------
   Vorgabe Frau Arnold, Telefonat vom 25.08.2026: "Oben drueber
   kommt Leitung CEO, unten drunter kommt Henry und dann der Text
   dazu bleibt ... die Geschaeftsfuehrung dann schwarz, dick und
   dann der Name nur schwarz und das 90 Prozent grau unten drunter
   die Beschreibung." Reihenfolge nach Workbook 6.3.
   ========================================================= */
.team-grid--pets .team-card .rolle {
  font-size: var(--fs-head);
  font-weight: 700;
  color: var(--color-heading);
  line-height: 1.25;
  margin: 0 0 12px;
}
.team-grid--pets .team-card .name {
  font-weight: 600;
  color: var(--color-heading);
  margin: 12px 0 2px;
}
.team-grid--pets .team-card .name + p { margin-top: 0; }

/* =========================================================
   38. MASSE NACH PDF-VISUALISIERUNG vom 31.08.2026
   ---------------------------------------------------------
   KORREKTUR 07.09.2026 (Telefonat Frau Arnold, Mail Frau Abresch):
   Die Punktgroessen der Visualisierung sind VERHAELTNISSE, keine
   Pixelwerte. Die wörtliche Umrechnung (13,7 px Text, 907 px
   Satzspiegel) hat die Website um rund 30 % verkleinert - das war
   nicht gewuenscht. Jetzt gilt: Satzspiegel 1280 px wie die alte
   Website holz-abresch.de (dort nachgemessen: Raster 1280 px,
   Fliesstext 16 px), Schrift 16 px, und die Verhaeltnisse der
   Visualisierung (Navigation 10,5 : Text 10,25 : Ueberschrift 11,25,
   Zeilenabstand 13/10,25, Absatz 17/10,25) bleiben erhalten.
   Die Kommentare darunter beschreiben den alten Rechenweg.
   ---------------------------------------------------------
   Die Visualisierung nennt die Werte im Klartext:
     Navigation            10,5  pt
     Fliesstext            10,25 pt
     Zeilenabstand         13    pt   -> line-height 1,268
     Abstand nach Absatz   17    pt
     Ueberschriften        11,25 pt
     Satzspiegel          649,38 pt
     Spaltensteg           53    pt
   In CSS ist 1 pt = 1,3333 px. Die Spaltenbreite ist auf
   30,5 Geviert gesetzt statt auf 29,07: Roboto laeuft 4,9 %
   breiter als die Neuzeit Grotesk der Visualisierung. Damit
   bricht die erste Zeile des Startseitentextes nachweislich
   an derselben Stelle ("... hochwertiges Sortiment an") und
   der Absatz verteilt sich auf 4 Zeilen links, 3 rechts -
   genau wie in der Vorlage.
   ========================================================= */
:root {
  --fs-text: 16px;        /* 10,25 pt  -> Bezugsgroesse wie alte Website */
  --fs-nav: 16.5px;       /* 10,5  pt  -> 16 x 10,5/10,25 */
  --fs-navi: 16.5px;      /* zweite Schreibweise aus Abschnitt 29 */
  --fs-body: 16px;
  --fs-h1: 17.5px;
  --fs-h2: 17.5px;
  --fs-h3: 16.5px;
  --fs-head: 17.5px;      /* 11,25 pt  -> 16 x 11,25/10,25 */
  --fs-meta: 16px;        /* Kachel-, Funktions- und Fusszeilen */
  --lh-text: 1.27;        /* 13 pt auf 10,25 pt -> 20,3 px */
  --abs-absatz: 26px;     /* 17 pt auf 10,25 pt -> 26,5 px */
  --spalte: 600px;        /* (1280 - 80) / 2 */
  --steg: 80px;           /* 53 pt auf 10,25 pt = 5,2 em */
  --container: 1280px;    /* Satzspiegel netto, wie holz-abresch.de */
  --logo-h: 31px;         /* Kopf, Fuss, Kontakt - ab 1024 px 35 px, siehe 39. 10.09.: Logodatei
                             randlos zugeschnitten (vorher 8 px + 3 px transparenter Rand),
                             sichtbare Groesse unveraendert */
  --abstand-hero: 75px;        /* Kopfbild -> erste Ueberschrift, alle Seiten gleich (09.09.: +1/3) */
  --abstand-kopf-text: 8px;    /* Ueberschrift -> zugehoeriger Text */
  --abstand-kopf-bild: 20px;   /* Ueberschrift -> Bildraster */
  --abstand-block: 75px;       /* Ende eines Blocks -> naechste Ueberschrift (09.09.: 56 -> 75, +1/3) */
  --color-text: #404041;      /* aus der PDF gemessen: 90 % Schwarz */
  --color-text-soft: #404041;
  --color-muted: #404041;
  --color-heading: #000000;
}

body { font-size: var(--fs-text); line-height: var(--lh-text); color: var(--color-text); }

/* ---------- 38.1 Fliesstext ---------- */
.rich-text p, .rich-text li,
.feature-body p,
.acc-panel, .acc-panel p, .acc-panel li,
.legal p, .legal li,
.job-block p, .job-contact p,
.page-head .page-teaser,
.home-intro .intro-text p,
.home-intro p,
.address-block, .address-contact,
.lead {
  font-size: var(--fs-text);
  line-height: var(--lh-text);
  color: var(--color-text);
}
.rich-text p,
.home-intro .intro-text p,
.home-intro p,
.page-head .page-teaser,
.feature-body p,
.lead { margin-bottom: var(--abs-absatz); }
.rich-text p:last-child,
.home-intro p:last-child,
.page-head .page-teaser:last-child { margin-bottom: 0; }

/* ---------- 38.2 Bildunterschriften, Funktions- und Kopfzeilen ---------- */
.team-card p,
.entry-card p,
.map-note,
.download-item .download-meta,
.team-card .team-mail,
.team-card .team-mail a,
.site-footer,
.site-footer p,
.footer-links a {
  font-size: var(--fs-meta);
  line-height: var(--lh-text);
  color: var(--color-text);
}

/* ---------- 38.3 Ueberschriften ---------- */
.page-head h1,
.section-title,
.intro-title,
.feature-body h2,
.legal h1, .legal h2,
.liefergebiete-block h2 {
  font-size: var(--fs-head);
  line-height: 1.25;
  font-weight: 700;
  color: var(--color-heading);
}
.section-subtitle,
.team-card h3,
.entry-card h3,
.liefer-gruppe h3,
.team-grid--pets .team-card .rolle,
.team-grid--pets .team-card .name {
  font-size: var(--fs-meta);
  line-height: 1.25;
  font-weight: 700;
  color: var(--color-heading);
}
/* Abstand Ueberschrift -> Text: eng, Ueberschrift und Text sind ein Block
   (07.09.: "Der Abstand, der muss da raus") */
.page-head h1,
.intro-title,
.section-title { margin-bottom: var(--abstand-kopf-text); }

/* ---------- 38.4 Satzspiegel und Spalten ---------- */
/* .container hat 20 px Innenabstand links und rechts. Damit der
   Satzspiegel netto 907 px breit ist, kommen die 40 px oben drauf. */
.container { max-width: calc(var(--container) + 40px); }
.text-cols { grid-template-columns: 1fr; gap: 0 var(--steg); }
@media (min-width: 900px) {
  .text-cols { grid-template-columns: 1fr 1fr; }
}
.lead { max-width: var(--spalte); }
.liefergebiete-block > .lead,
.liefergebiete-block > .section-title { max-width: var(--spalte); }

/* ---------- 38.5 Zweispaltige Einleitungstexte ----------
   Zweispaltig nur, wenn der Text mindestens vier Zeilen fuellt.
   Die Klasse setzt js/main.js anhand der Zeichenzahl (>= 260).
   Kurze Teaser bleiben einspaltig - Vorgabe: keine einzelnen
   Woerter oder kurzen Satzteile in der zweiten Spalte. */
@media (min-width: 900px) {
  .page-head .page-teaser.is-zweispaltig,
  .home-intro .intro-text.is-zweispaltig {
    column-count: 2;
    column-gap: var(--steg);
    max-width: none;
  }
}
.page-head .page-teaser:not(.is-zweispaltig),
.home-intro .intro-text:not(.is-zweispaltig) {
  column-count: 1;
  max-width: var(--spalte);
}
/* Silbentrennung, damit die Spalten wie in der Vorlage umbrechen */
.page-head .page-teaser,
.home-intro .intro-text,
.text-cols,
.entry-card p { hyphens: auto; -webkit-hyphens: auto; }

/* ---------- 38.6 Mobil: nie groesser als der Desktopwert ---------- */
@media (max-width: 767px) {
  .rich-text p, .rich-text li,
  .feature-body p,
  .acc-panel, .acc-panel p, .acc-panel li,
  .legal p, .legal li,
  .job-block p, .job-contact p,
  .page-head .page-teaser,
  .home-intro .intro-text p,
  .home-intro p,
  .address-block, .address-contact,
  .lead { font-size: 15px; }
  .team-card p, .entry-card p, .site-footer, .site-footer p { font-size: 15px; }
  .page-head h1, .section-title, .intro-title,
  .feature-body h2, .legal h1, .legal h2 { font-size: 16.5px; }
  .section-subtitle, .team-card h3, .entry-card h3,
  .team-grid--pets .team-card .rolle,
  .team-grid--pets .team-card .name { font-size: 15px; }
  .page-head h1, .intro-title, .section-title { margin-bottom: var(--abstand-kopf-text); }
  :root {
    --fs-navi: 15px;
    --fs-text: 15px;
    --fs-body: 15px;
    --fs-head: 16.5px;
    --fs-h1: 16.5px;
    --fs-h2: 16.5px;
    --fs-h3: 15px;
    --fs-meta: 15px;
    --abs-absatz: 24px;
    --abstand-hero: 44px;
    --abstand-block: 52px;
  }
}

/* ---------- 38.7 Historie und andere lange Fliesstexte ----------
   Frueher zwei fest gefuellte Spalten-Divs. Dadurch konnte die
   rechte Spalte laenger auslaufen als die linke. Jetzt ein
   durchlaufender Block; js/main.js gleicht so aus, dass links
   nie weniger Zeilen stehen als rechts. */
.text-cols-flow { max-width: none; }
@media (min-width: 900px) {
  .text-cols-flow { column-count: 2; column-gap: var(--steg); }
}
.text-cols-flow p { margin-bottom: var(--abs-absatz); break-inside: auto; }
.text-cols-flow p:last-child { margin-bottom: 0; }

/* Doppelte Absatzabstaende im Startseiten-Einstieg vermeiden:
   der Abstand kommt aus 38.1 (margin-bottom), nicht zusaetzlich oben. */
.home-intro .intro-text p + p { margin-top: 0; }
.home-intro .intro-text { line-height: var(--lh-text); }

/* =========================================================
   39. KOPFBEREICH - ein einziges Layout
   ---------------------------------------------------------
   Stand 07.09.2026. Der Kopf laeuft im selben Satzspiegel wie
   der Inhalt (1280 px netto). Linke Spitze des Logos = linke
   Kante aller Inhalte = Fusslogo; die Sprachwahl endet an der
   rechten Kante. Logo, Menue, Telefon und Sprachen stehen auf
   einer gemeinsamen Unterkante.

   Abstaende nach den Verhaeltnissen der PDF-Visualisierung,
   auf 1280 px skaliert (1 pt der Vorlage = 1,97 px):
     Logo -> "Historie"       36,0 pt -> 71 px
     zwischen Menuepunkten    12,6 pt -> 25 px
     um die Telefonnummer     mindestens 62 px, beide Seiten
                              GLEICH (Restbreite wird halbiert)
   Logo 46 px hoch (Wert der Sicherung vom 03.09.; die 65 px der
   alten Website nannte Frau Arnold "ein bisschen gross").

   Platzrechnung bei 1280 px, Roboto 16,5 px: Logo 182 + 71 +
   Navigation 412 + 6 x 25 + Telefon 134 + Sprachen 85 = 1034 px
   plus 2 x 62 = 1158 px - passt in DE, EN und FR.

   Unterhalb 1320 px Fensterbreite (MacBook Air, iPad quer)
   schrumpft der Satzspiegel mit dem Fenster; Logo, Schrift und
   Abstaende laufen deshalb fliessend mit (clamp), damit nichts
   umbricht. Geprueft bei 1024 px: 867 px Bedarf, 984 px Platz.
   ========================================================= */
@media (min-width: 1024px) {
  :root {
    /* linear zwischen 1024 px (Minimum) und 1280 px (Sollwert).
       09.09.: Menueschrift 16,5 -> 18,5 px (Frau Arnold: "ein bis zwei
       Punkte groesser"), Telefon und Sprachwahl folgen. */
    --logo-h: clamp(29px, calc(2.4vw + 4.6px), 35px);   /* sichtbar wie bisher 46-px-Box */
    --fs-nav: clamp(15.5px, calc(1.17vw + 3.5px), 18.5px);
    --fs-navi: clamp(15.5px, calc(1.17vw + 3.5px), 18.5px);
    --kopf-menue-gap: clamp(12px, calc(4.3vw - 30px), 25px);
  }

  .site-header { height: var(--header-h); }

  /* 09.09., Frau Arnold: "Logo, Navigation, Telefonnummer und Sprachen
     unten buendig auf einer Linie" (Screenshot: Grundlinie lag ueber der
     Logo-Unterkante) und "Abstaende gleichmaessig verteilen: Logo->Historie,
     Kontakt->Telefon, Telefon->Sprachen".
     - align-items: baseline richtet die Schriftgrundlinie auf die
       Unterkante des Logos aus (Bild ohne eigene Grundlinie = Unterkante).
     - justify-content: space-between verteilt die Restbreite gleichmaessig
       auf die drei Luecken; dafuer werden Telefon und Sprachwahl ueber
       display:contents zu direkten Kindern der Kopfzeile.
     - Die Logo-Unterkante liegt 74 px unter der Kopf-Oberkante (100 px Kopf). */
  /* 10.09.: Ausrichtung fest gerechnet statt ueber align-items:baseline,
     weil Safari die Grundlinie eines Bildes anders setzt als Chrome (Frau
     Arnold: "Logo sitzt etwas zu tief"). Alle Zeilenboxen enden 26 px ueber
     dem Kopfende (bei 74 px). Die Schriftgrundlinie liegt bei Roboto und
     Zeilenhoehe 1,5 genau 0,408 em ueber der Zeilenbox-Unterkante
     (halber Durchschuss 0,164 em + Unterlaenge 0,244 em). Das randlose
     Logo bekommt denselben Abstand als margin-bottom: Logo-Unterkante =
     Grundlinie, in jedem Browser. */
  .header-inner {
    max-width: calc(var(--container) + 40px);
    height: var(--header-h);
    padding: 0 20px 26px;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0;
  }

  .logo { flex: 0 0 auto; line-height: 0; }
  .logo img { height: var(--logo-h); display: block; margin-bottom: calc(var(--fs-nav) * 0.408); }

  .main-nav {
    flex: 0 0 auto;
    margin-left: 0;
    margin-right: 0;
  }
  .main-nav > ul {
    display: flex;
    align-items: flex-end;
    gap: var(--kopf-menue-gap);
    flex-wrap: nowrap;
  }
  .main-nav > ul > li { white-space: nowrap; }
  .site-header .main-nav > ul > li > a {
    padding: 0;
    font-size: var(--fs-nav);
    line-height: 1.5;
    font-weight: 400;
    letter-spacing: 0;
  }
  .site-header .main-nav .submenu a { font-size: var(--fs-nav); }
  .site-header .header-phone,
  .site-header .lang-switch,
  .site-header .lang-switch a { font-size: var(--fs-nav); }
  .main-nav .submenu { top: calc(100% + 18px); }

  .header-meta { display: contents; }
  .header-phone {
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    font-size: var(--fs-nav);
    line-height: 1.5;
    color: var(--color-text);
  }
  .lang-switch {
    flex: 0 0 auto;
    font-size: var(--fs-nav);
    line-height: 1.5;
    align-items: flex-end;
    gap: 0;
  }
  .lang-switch li + li::before { padding: 0 6px; }
}

/* =========================================================
   40. EINSTIEGSVIDEO - Einblendungen nach der Demo vom 01.09.
   ---------------------------------------------------------
   HINWEIS 04.09.2026: Auf der deutschen Startseite sind die
   Einblendungen inzwischen fest ins Video gerendert - dort
   greifen die Regeln unten nicht mehr. Sie gelten weiterhin
   fuer index-en.html und index-fr.html, die das Video ohne
   Text (startseite-hero-ohne-text.mp4) mit uebersetzten
   Einblendungen im HTML verwenden.
   ---------------------------------------------------------
   Bildgenau aus "Vorspann-Video-Demo-neu.mp4" vermessen
   (1920 x 1080, Versalhoehe am ersten Grossbuchstaben):

     grosse Zeilen   Versalhoehe 70 px  = 6,481 % der Bildhoehe
     kleine Zeilen   Versalhoehe 30 px  = 2,778 % der Bildhoehe
     Block oben      Mitte bei 17,6 %
     grosse Zeile unten  Mitte bei 86,9 %
     kleine Zeile unten  Mitte bei 83,9 %   <- nicht dieselbe Hoehe!

   Der Kopf laeuft in 16:9, die Bildhoehe ist also 56,25 vw.
   Versalhoehe 6,481 % davon = 3,646 vw; bei Versalhoehe 0,7107 em
   ergibt das 5,13 vw Schriftgroesse. Fuer die kleine Zeile
   2,778 % -> 1,5625 vw -> 2,20 vw.

   Vorher lagen 5,31 vw und 2,29 vw an - rund 6 % zu gross.
   ========================================================= */
.hero-cue {
  /* Avenir Next Condensed zuerst: bisher stand Roboto Condensed davor,
     deshalb wurde die vorgegebene Schrift nie verwendet. */
  font-family: "Avenir Next Condensed", "Roboto Condensed", "Roboto", Arial, sans-serif;
  font-weight: 500;
}
.hero-cue--gross { font-size: 5.13vw; }
.hero-cue--klein { font-size: 2.20vw; }

.hero-cue--oben { top: 17.6%; }
.hero-cue--gross.hero-cue--unten { top: 86.9%; }
.hero-cue--klein.hero-cue--unten { top: 83.9%; }

@media (max-width: 767px) {
  .hero-cue--gross { font-size: 7.15vw; }
  .hero-cue--klein { font-size: 3.27vw; }
  .hero-cue--gross.hero-cue--unten { top: 85.4%; }
  .hero-cue--klein.hero-cue--unten { top: 82.6%; }
}

/* =========================================================
   41. Backoffice und Holz - Feinschliff
   ========================================================= */

/* ---- Punkt 32: deutlicher Abstand vor den Gruppenbildern ----
   Die vier Einzelportraets stehen jetzt in der ersten Reihe,
   die beiden querformatigen Gruppenbilder darunter. Zwischen
   beiden Bloecken mehr Luft als zwischen den Kacheln. */
@media (min-width: 1024px) {
  .team-grid--pets .team-card--wide { margin-top: 40px; }
}
@media (max-width: 1023px) {
  .team-grid--pets .team-card--wide:first-of-type { margin-top: 24px; }
}

/* ---- Punkt 34: Ueberschriften und Texte nur ueber die erste
   Spaltenbreite. Bisher hielt .lead eine feste Breite von 720 px,
   die Ueberschriften hatten gar keine Begrenzung. ---- */
.section-title,
.section-subtitle,
.liefer-gruppe h3 { max-width: var(--spalte); }

/* =========================================================
   42. LIEFERGEBIETE nach der PDF-Visualisierung
   ---------------------------------------------------------
   Vorher drei gleichrangige Bloecke in einem Zweispaltenraster,
   dadurch stand die ladungsweise Abnahme allein in der zweiten
   Reihe. Die Visualisierung zeigt zwei Spalten: links das
   Kernliefergebiet, rechts Standardliefergebiet und darunter
   die ladungsweise Abnahme.
   ========================================================= */
.liefer-gruppen { display: grid; grid-template-columns: 1fr; gap: 30px var(--steg); margin: 22px 0 0; }
@media (min-width: 768px) {
  .liefer-gruppen { grid-template-columns: 1fr 1fr; }
}
.liefer-spalte { display: block; }
.liefer-spalte .liefer-gruppe + .liefer-gruppe { margin-top: 30px; }
.liefer-gruppe h3 {
  font-size: var(--fs-meta);
  font-weight: 700;
  color: var(--color-heading);
  margin: 0 0 8px;
  line-height: 1.25;
  max-width: var(--spalte);
}
.liefer-gruppe p { margin: 0 0 12px; }
.liefer-gruppe p:last-child { margin-bottom: 0; }

/* ---- Punkt 35: Abstand zum folgenden Abschnitt ----
   Nach "... Oesterreich und Frankreich" schloss das naechste Bild
   bisher ohne Abstand an. */
.liefergebiete-block { margin-bottom: 64px; }
.liefergebiete-block + .feature { margin-top: 0; }

/* =========================================================
   43. FUSSBEREICH nach der PDF-Visualisierung
   ---------------------------------------------------------
   Stand 07.09.2026 (Telefonat Frau Arnold, Mail Frau Abresch,
   Vorlage WEBSITE-FOOTER-ABRESCH.jpg):
   - Logo | Adresse | Linie | Telefonservice | Linie | Downloads
   - beide Trennlinien gleich lang, jeweils MITTIG zwischen den
     Textbloecken: die vier Luecken um die Linien sind gleich
     breit (1fr-Spalten), das Logo haengt mit festem Abstand an
     der Adresse
   - "Oeffnungszeiten" steht direkt ueber "Montag - Freitag",
     nach dem 24-Stunden-Telefonservice mehr Luft
   - "Warenannahme" ist die unterste Zeile und schliesst buendig
     mit "www.holz-abresch.de" und "AGB" ab (Bloecke gleich hoch,
     Inhalt oben und unten ausgerichtet)
   - erste Textzeile buendig mit der Logo-Unterkante
   ========================================================= */
.site-footer { background: #f8f8f8; }
.site-footer,
.site-footer p,
.footer-links a {
  font-size: var(--fs-meta);
  line-height: 1.25;
  color: var(--color-text);
}
.footer-brand .footer-logo { height: var(--logo-h); width: auto; margin: 0; }
.site-footer p { margin: 0 0 14px; line-height: 1.25; }
.site-footer p:last-child { margin-bottom: 0; }
.footer-address p + p { margin-top: 0; }
.site-footer p.footer-hours-title { margin: 0; }   /* direkt ueber Montag - Freitag */
.footer-times {
  display: grid;
  grid-template-columns: max-content max-content;
  column-gap: 26px;
  row-gap: 0;
  line-height: 1.25;
}
.footer-times .footer-times-voll { grid-column: 1 / -1; }
.footer-links a { display: block; margin: 0; }

@media (min-width: 768px) {
  .site-footer { padding: 44px 0; }
  .footer-grid {
    display: grid;
    /* Logo | Adresse | Luecke | Linie | Luecke | Stunden | Luecke | Linie | Luecke | Downloads */
    grid-template-columns: auto auto 1fr 1px 1fr auto 1fr 1px 1fr auto;
    gap: 0;
    align-items: stretch;
  }
  .footer-brand   { grid-column: 1; }
  .footer-address { grid-column: 2; margin-left: 26px; }
  .footer-hours   { grid-column: 6; }
  .footer-links   { grid-column: 10; }
  /* Die Trennlinien sind eigene Rasterzellen (Pseudoelemente des
     Rasters), damit die Luecken links und rechts exakt gleich sind. */
  .footer-grid::before,
  .footer-grid::after {
    content: "";
    grid-row: 1;
    width: 1px;
    background: rgba(0,0,0,.22);
    margin-top: var(--fuss-erste-zeile);
  }
  .footer-grid::before { grid-column: 4; }
  .footer-grid::after  { grid-column: 8; }
  .footer-hours,
  .footer-links { border-left: 0; padding: 0; margin: 0; }
  .footer-hours::before,
  .footer-links::before { content: none; }

  /* Erste Zeile buendig mit der Logo-Unterkante:
     Logo 46 px, Zeile 20 px -> 26 px Vorlauf. */
  .site-footer { --fuss-erste-zeile: calc(var(--logo-h) - 15.5px); }   /* 10.09.: Zeile 20 px, Grundlinie 4,5 px darueber */
  .footer-address,
  .footer-hours,
  .footer-links { padding-top: var(--fuss-erste-zeile); }

  /* Telefonservice oben, Oeffnungszeiten-Block unten; Downloads
     gleichmaessig ueber die Blockhoehe verteilt. Die Blockhoehe
     gibt die Adresse vor (fuenf Zeilen, zwei Abstaende). */
  .footer-brand, .footer-address, .footer-hours, .footer-links { grid-row: 1; }
  .footer-hours { display: flex; flex-direction: column; justify-content: flex-start; }
  .footer-links { display: flex; flex-direction: column; justify-content: space-between; }
  /* margin-bottom:auto schiebt Oeffnungszeiten + Zeiten als Block nach unten */
  .footer-hours > p:first-child { margin-bottom: auto; padding-bottom: 20px; }
  .footer-links a { line-height: 1.25; }
}

@media (max-width: 767px) {
  .footer-grid { grid-template-columns: 1fr; gap: 26px; }
  .footer-hours::before, .footer-links::before { display: none; }
  .footer-hours > p:first-child { margin-bottom: 16px; }
  .footer-links { border-top: 1px solid rgba(0,0,0,.15); padding: 20px 0 0; margin-top: 6px; }
  .footer-links a { margin-bottom: 8px; }
}

/* =========================================================
   44. MOSAIK nach der PDF-Visualisierung
   ---------------------------------------------------------
   Anmerkungen der Kundin in der Visualisierung:
     "bis ganz zum Rand oder mit kleinem Steg"
     "Doppelte Groesse wie aktuell."
     "ca. 1/3 weniger Inhalt"
   Gemessener Steg zum Seitenrand: 14,17 pt -> 19 px, symmetrisch.
   Umsetzung: 24 Motive auf 16 reduziert - das ist das geforderte
   Drittel weniger. Zwischenzeitlich lagen diese 16 in 8 Reihen zu
   zwei Kacheln; das erfuellte zwar zusaetzlich "doppelte Groesse",
   machte das Mosaik aber 1,5 mal so hoch wie vorher (5.513 px),
   weil 16 Kacheln bei 2,25-facher Flaeche mehr Gesamtflaeche
   ergeben als 24 kleine.

   Auf Entscheidung vom 04.09. wieder DREISPALTIG: 6 Reihen im
   Rhythmus 3/3/3/3/2/2, dieselben 16 Motive, keine angebrochene
   Reihe. Die Anordnungsregeln aus der Mail bleiben eingehalten -
   kein Holz in Reihe 1, die beiden Holzmotive weit getrennt, das
   Hundemotiv aussen links, Frau Friedrich am Anfang der letzten
   Reihe, die beiden Gruppenaufnahmen auseinander.

   Die zweispaltige Fassung ist nicht geloescht, sondern abgelegt in
   _Rueckmeldung-an-Frau-Arnold/mosaik-zweispaltig-stillgelegt.html
   und laesst sich durch Austausch des Mosaikblocks zurueckholen.
   Am Stylesheet ist dafuer nichts zu aendern - die Spaltenzahl
   ergibt sich allein aus der Gruppierung im HTML.
   ========================================================= */
.mosaic-row { gap: 19px; margin-bottom: 19px; }
.mosaic--full { padding: 0 19px; }
.mosaic-row:last-child { margin-bottom: 0; }
@media (max-width: 767px) {
  .mosaic-row { gap: 14px; margin-bottom: 14px; }
  .mosaic--full { padding: 0 14px; }
}

/* =========================================================
   45. Startseiten-Einstieg: feste Spaltenaufteilung
   ---------------------------------------------------------
   Der Umbruch soll nach "europäischen Ausland" liegen, der
   Gedankenstrich beginnt die zweite Spalte. Ein automatischer
   Spaltenfluss kann das nicht: Der Browser bricht nur an
   Zeilenenden um, nicht mitten in einer Zeile. Deshalb hier
   zwei feste Spalten mit demselben Steg wie ueberall (71 px).
   ========================================================= */
/* Hoehere Spezifitaet als die Einspalten-Regel aus Abschnitt 38.5,
   sonst erbt der Block deren max-width von 418 px und beide Spalten
   quetschen sich in eine halbe Satzbreite. */
.home-intro .intro-text.intro-text--fest {
  column-count: 1 !important;
  max-width: none !important;
  width: 100%;
}
@media (min-width: 900px) {
  .home-intro .intro-text.intro-text--fest {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 var(--steg);
    align-items: start;
  }
}
.intro-text--fest .intro-spalte > p { margin: 0 0 var(--abs-absatz); }
.intro-text--fest .intro-spalte > p:last-child { margin-bottom: 0; }

/* =========================================================
   46. Grauwert nachziehen, wo aeltere Regeln spezifischer sind
   ---------------------------------------------------------
   Abschnitt 28.2 setzt fuer einige Elemente noch #333333 mit
   hoeherer Spezifitaet als die Sammelregel in 38.2 - dadurch
   blieben zum Beispiel die Beschreibungstexte im Backoffice
   auf dem alten Wert. Der Sollwert aus der PDF-Visualisierung
   ist #404041 (dort als "grau = 90 % schwarz" markiert).
   ========================================================= */
.team-grid--pets .team-card p,
.team-grid--pets .team-card .name + p,
.team-card p,
.team-card .team-mail,
.team-card .team-mail a,
.entry-card p,
.page-head .page-teaser,
.home-intro .intro-text p,
.home-intro p,
.rich-text p,
.rich-text li,
.feature-body p,
.acc-panel, .acc-panel p, .acc-panel li,
.legal p, .legal li,
.job-block p, .job-contact p,
.address-block, .address-contact,
.map-note,
.liefer-gruppe p,
.site-footer, .site-footer p, .footer-links a,
body { color: var(--color-text); }

/* Schwarz bleibt schwarz - Ueberschriften und Namen */
.hero-caption h1, .hero-caption .hero-title,
.section-title, .section-subtitle,
.page-head h1, .intro-title,
.entry-card h3, .team-card h3,
.feature-body h2, .legal h1, .legal h2,
.liefer-gruppe h3,
.team-grid--pets .team-card .rolle,
.team-grid--pets .team-card .name,
.team-card p strong,
.team-grid--pets .team-card p strong { color: var(--color-heading); }

/* =========================================================
   47. BACKOFFICE - Anordnung nach Mail Frau Arnold vom 08.09.
   ---------------------------------------------------------
     Reihe 1  Leitung/CEO | Supervisor        Einzelportraets 400 x 400
     Reihe 2  Security                        Querformat 840 x 560
     Reihe 3  Aktivisten                      Querformat 840 x 560
     Reihe 4  Therapeuten | Junior Management Einzelportraets 400 x 400
   "Security und Aktivisten jeweils eine eigene Reihe, untereinander."
   Ein Querformat ist so breit wie zwei Portraets plus Steg (840 px) -
   das entspricht auch der Skizze vom 01.09. Reihenabstand = Blockabstand,
   weil jede Reihe ein eigener Bereich ist ("Abstand nach Tilly vor Security").
   ========================================================= */
@media (min-width: 1024px) {
  /* .team-grid.team-grid--pets: hoehere Spezifitaet als .team-grid in 53.4 */
  .team-grid.team-grid--pets {
    max-width: var(--container);
    grid-template-columns: repeat(3, 400px);
    gap: var(--abstand-block) 40px;
  }
  .team-grid--pets .team-card { grid-column: span 1; }
  .team-grid--pets .team-card--wide { grid-column: 1 / span 2; margin-top: 0; }
  /* Therapeuten beginnen nach Aktivisten eine neue Reihe (sonst fuellt das
     Raster die freie dritte Spalte neben dem Querformat) */
  .team-grid--pets .team-card--wide + .team-card:not(.team-card--wide) { grid-column: 1; }
}
@media (min-width: 576px) and (max-width: 1023px) {
  .team-grid.team-grid--pets { grid-template-columns: repeat(2, 1fr); gap: var(--abstand-block) 40px; }
  .team-grid--pets .team-card { grid-column: auto; }
  .team-grid--pets .team-card--wide { grid-column: 1 / -1; margin-top: 0; }
}
@media (max-width: 1023px) {
  .team-grid--pets .team-card--wide:first-of-type { margin-top: 0; }
}

/* =========================================================
   48. FUSSBEREICH - erste Textzeile buendig mit dem Logo
   ---------------------------------------------------------
   Seit 07.09.2026 in Abschnitt 43 enthalten (Variable
   --fuss-erste-zeile). Hier bewusst leer.
   ========================================================= */

/* =========================================================
   49. Zeilenraster in den zweispaltigen Bloecken
   ---------------------------------------------------------
   Frau Arnold zum Startseiten-Screenshot: "Zeilenabstand oder
   Absatz verrutscht. Ist nicht im Raster. Die letzten 3 Zeilen
   sind nicht buendig mit denen in der 1. Spalte!"
   Ursache: Der Absatzabstand von 17 pt (22,70 px) ist kein
   Vielfaches der Zeilenhoehe von 17,37 px. Jeder Absatz in der
   zweiten Spalte schiebt die folgenden Zeilen deshalb um
   5,33 px aus dem Raster.
   In den zweispaltigen Bloecken gilt daher genau eine Leerzeile
   als Absatzabstand - damit sitzen die Zeilen beider Spalten
   auf derselben Grundlinie. Ausserhalb dieser Bloecke bleibt es
   bei den 17 pt aus der Visualisierung.
   ========================================================= */
.intro-text--fest .intro-spalte > p { margin-bottom: 1.27em; }   /* = eine Zeile (07.09.: 16 px x 1,27) */
.intro-text--fest .intro-spalte > p:last-child { margin-bottom: 0; }
.text-cols-flow p { margin-bottom: 1.27em; }
.text-cols-flow p:last-child { margin-bottom: 0; }

/* =========================================================
   50. Grauwerte und Zwischenueberschriften vereinheitlichen
   ---------------------------------------------------------
   Schlusspruefung 04.09.: Im Dokument standen noch drei
   Grauwerte nebeneinander. Fliesstext und Bildunterschriften
   liegen auf #404041 (90 % Schwarz, aus der Visualisierung
   gemessen), Ueberschriften auf reinem Schwarz - fett
   ausgezeichnete Stellen INNERHALB des Fliesstextes standen
   dagegen auf #222222 und wirkten dadurch wie ein dritter Ton
   mitten im Absatz. Sie erben jetzt die Farbe ihres Absatzes
   und unterscheiden sich nur noch ueber den Schnitt.

   Ebenso die Zwischenueberschriften der Stellenanzeigen
   ("Ihre Aufgaben", "Ihr Profil", "Wir bieten"): Sie lagen bei
   #222222 und in der Groesse ausserhalb der Reihe. Sie folgen
   jetzt denselben Werten wie alle uebrigen Zwischen-
   ueberschriften der Website - 14 px, Schwarz, fett. Sichtbar
   wird das erst beim Aufklappen einer Anzeige, weshalb es bei
   den frueheren Durchgaengen nicht aufgefallen ist.
   ========================================================= */
.rich-text strong,
.acc-panel strong,
.team-card p strong { color: inherit; font-weight: 700; }

.job-block h3 {
  font-size: 14px;              /* wie alle uebrigen h3 der Website */
  color: var(--color-heading);
  font-weight: 700;
}

/* =========================================================
   51. Nachpruefung 04.09. - Regeln, die aeltere Korrekturen
       ausgehebelt haben
   ---------------------------------------------------------
   Diese fuenf Faelle sind bei einer Spezifitaetspruefung des
   gesamten Stylesheets aufgefallen. Alle folgen demselben
   Muster: eine aeltere Regel mit HOEHERER Spezifitaet stand
   ueber einer neueren Korrektur, die Korrektur war damit
   wirkungslos. Im Quelltext sah alles richtig aus, im Browser
   nicht.

   51.1 Zeilenabstand 1,5 statt 13 pt
        "main .lead" (Spezifitaet 0,1,1) schlug ".lead" aus
        Abschnitt 38 (0,1,0). Gemessen 20,55 px statt 17,3716 px,
        also 18 Prozent zu viel Durchschuss - und das im selben
        Absatzblock wie korrekt gesetzter Text. Betrifft die
        Lead-Absaetze auf Holz und Service sowie die Namen in
        der Download-Liste.

   51.2 Logo auf der Kontaktseite
        Der Kommentar in Abschnitt 22 sagt "in derselben Groesse
        wie im Kopfbereich" und setzt dann 40 px, ab 1024 px
        sogar 46 px. Kopf und Fuss liegen bei 35 px. Genau der
        Punkt, den Frau Arnold unter 24.2 angesprochen hat -
        nur eben auf der Kontaktseite, wo bisher niemand
        nachgemessen hat.

   51.3 Kopflogo unterhalb 1024 px
        Die 35-px-Korrektur lag in "@media (min-width: 1024px)".
        Darunter blieb es bei 40 px, waehrend das Fusslogo
        ueberall 35 px hat. Auf Tablet und Telefon waren Kopf-
        und Fusslogo also verschieden gross.

   51.4 Aufklapp-Ueberschriften bei Holz und Karriere
        Sie liefen auf 15 px und #404041, weil Abschnitt 29 sie
        zu den Ueberschriften zaehlt, Abschnitt 38 sie aber
        nicht aufgenommen hat. Jede andere Zwischenueberschrift
        derselben Ebene liegt bei 14 px und Schwarz.

   51.5 Cookie-Hinweis
        Ebenfalls 1,5 statt 13 pt. Kein Kundeninhalt, aber es
        ist Text auf derselben Seite.
   ========================================================= */

/* 51.1 */
main .lead,
.download-item .download-name { line-height: var(--lh-text); }

/* 51.2 - seit 07.09. ueber --logo-h (40 px, ab 1024 px 46 px) */
.contact-address .contact-brand img { height: var(--logo-h); }
@media (min-width: 1024px) {
  .contact-address .contact-brand img { height: var(--logo-h); }
}

/* 51.3 */
.logo img { height: var(--logo-h); }

/* 51.4 */
.acc-trigger {
  font-size: 14px;
  color: var(--color-heading);
}

/* 51.5 */
.cookie-banner p { line-height: var(--lh-text); }

/* =========================================================
   52. Kopfbereich in Englisch und Franzoesisch
   ---------------------------------------------------------
   Gemessen am 04.09.: der Kopf laeuft in EN um 3 px und in FR
   um 6 px ueber den Satzspiegel. Ursache ist nicht das Layout,
   sondern der Inhalt - beide Fassungen tragen die internationale
   Schreibweise "Tel +49 (0 62 04) 96 21 0" (25 Zeichen) statt
   "Tel 06204 / 96210" (17 Zeichen), dazu laengere Menuewoerter
   wie "Carrieres". Der Kopf ist seit Abschnitt 39 starr gerechnet
   (nowrap, feste Abstaende, kein nachgebender Rest), also reisst
   das Budget.

   Sichtbar war das nicht, weil "body { overflow-x: hidden }" den
   Ueberstand still abschneidet - die Sprachumschaltung stand
   also rechnerisch schon ausserhalb des Satzspiegels.

   Nachgeben darf hier nur der Abstand ZWISCHEN den Menuepunkten.
   Die beiden 42-px-Abstaende um die Telefonnummer bleiben, weil
   Frau Arnold genau die nachgemessen und beanstandet hat, und
   der Abstand Logo -> Navigation bleibt bei 48 px. 15 px statt
   16,48 px ergibt bei sechs Luecken rund 8,9 px Reserve und
   deckt damit beide Sprachen mit Abstand.
   ========================================================= */
/* 07.09.2026: Bei 1280 px Satzspiegel passen EN (1212 px Bedarf)
   und FR (1234 px) ohne Sonderbehandlung; nur der Menueabstand
   wird um 3 px enger gehalten, damit bei 1280 px Fensterbreite
   (1240 px netto) auch Franzoesisch sicher in der Zeile bleibt. */
@media (min-width: 1024px) {
  html[lang="en"] .site-header .main-nav > ul,
  html[lang="fr"] .site-header .main-nav > ul { gap: clamp(11px, calc(4.3vw - 33px), 22px); }
}

/* =========================================================
   53. RUECKNAHME DER VERKLEINERUNG - Stand 07.09.2026
   ---------------------------------------------------------
   Telefonat mit Frau Arnold und Mail von Frau Abresch vom
   07.09.2026. Grundsaetze:
   1. Satzspiegel 1280 px, Schrift 16 px (Variablen in 38).
   2. Ueberschrift und zugehoeriger Text bilden einen Block
      (--abstand-kopf-text), Bildraster folgen mit
      --abstand-kopf-bild; zum naechsten Themenblock deutlich
      mehr Luft (--abstand-block). Auf allen Seiten gleich.
   3. Vom Kopfbild zur ersten Ueberschrift ueberall derselbe
      Abstand (--abstand-hero); der Startseiten-Einstieg hat
      oben und unten gleich viel Luft.
   4. Portraets 400 x 400 px (Menschen und Backoffice gleich).
   5. Zertifikatslogos gleich hoch, Texte darunter auf gleicher
      Hoehe.
   6. Impressum: Ueberschrift + Angaben eng, Bloecke weit.
   ========================================================= */

/* ---------- 53.1 Satzspiegel ---------- */
.container,
.header-inner,
.cookie-inner { max-width: calc(var(--container) + 40px); }
.lead,
.liefergebiete-block > .lead,
.liefergebiete-block > .section-title,
.section-title,
.section-subtitle,
.liefer-gruppe h3,
.page-head .page-teaser:not(.is-zweispaltig),
.home-intro .intro-text:not(.is-zweispaltig) { max-width: var(--spalte); }

/* ---------- 53.2 Abstaende: Kopfbild -> Ueberschrift ---------- */
.page-head { padding: var(--abstand-hero) 0 0; }
.home-intro { padding: var(--abstand-hero) 0; }
@media (min-width: 1024px) {
  .home-intro { padding: var(--abstand-hero) 0; }
}
.page-head h1,
.intro-title,
.section-title { margin-top: 0; margin-bottom: var(--abstand-kopf-text); }

/* ---------- 53.3 Abstaende: Bloecke ----------
   Jeder Abschnitt beginnt mit dem Blockabstand, endet ohne
   eigenen Abstand; der Fussbereich bekommt seinen Abstand ueber
   den Hauptbereich. Der erste Abschnitt nach dem Seitenkopf
   (section--tight) ist nur ein Absatzabstand entfernt, wenn dort
   der Text weiterlaeuft (Historie); beginnt er mit einer
   Ueberschrift, gilt wieder der Blockabstand. */
.section { padding: var(--abstand-block) 0 0; }
.section--tight { padding: 32px 0 0; }
.section--tight > .container > .section-title:first-child { margin-top: calc(var(--abstand-block) - 32px); }
.site-main { padding-bottom: var(--abstand-block); }
@media (min-width: 768px)  { .section { padding: var(--abstand-block) 0 0; } }
@media (min-width: 1440px) { .section { padding: var(--abstand-block) 0 0; } }
/* nach den Media-Regeln, sonst ueberschreiben diese den engeren Wert */
.section.section--tight { padding-top: 32px; }
/* Backoffice: das Kachelraster beginnt direkt nach dem Seitenkopf -> Blockabstand */
.section--tight > .container > .team-grid:first-child { margin-top: calc(var(--abstand-block) - 32px); }

/* Startseite: Einstieg oben und unten gleich, Mosaik ohne Zusatzluft,
   Einblicke im Blockabstand darunter */
.mosaic-section { padding: 0; }
.mosaic--roomy,
.mosaic--full { margin: 0; }

/* Ueberschrift -> Bildraster */
.section-title + .team-grid,
.section-title + .image-grid,
.section-title + .entry-grid,
.section-title + .card-grid,
.section-title + .cert-grid,
.section-subtitle + .team-grid { margin-top: var(--abstand-kopf-bild); }
.image-grid { margin: var(--abstand-kopf-bild) 0 0; gap: 40px; max-width: var(--container); }
.image-grid img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
@media (min-width: 576px)  { .image-grid { max-width: 840px; } }
@media (min-width: 1024px) { .image-grid { max-width: var(--container); } }
.team-grid { margin-bottom: 0; }
.card-grid { margin: var(--abs-absatz) 0 0; }
.cert-grid { margin: var(--abstand-kopf-bild) 0 0; }
.entry-grid { margin-top: var(--abstand-kopf-bild); row-gap: var(--abstand-block); }  /* 09.09.: Themenzeilen wie Bloecke trennen */

/* Zwischenueberschriften (Menschen: Lager / Fahrer) */
.section-subtitle { margin: var(--abstand-block) 0 var(--abstand-kopf-bild); }
.section-title + .section-subtitle { margin-top: var(--abstand-kopf-bild); }
#lager-fahrer .team-grid + .section-subtitle { margin-top: var(--abstand-block); }
@media (max-width: 767px) {
  .section-subtitle { margin: var(--abstand-block) 0 var(--abstand-kopf-bild); }
  #lager-fahrer .team-grid + .section-subtitle { margin-top: var(--abstand-block); }
}

/* Service: Feature-Reihen und Liefergebiete im Blockabstand */
.feature { margin: 0 0 var(--abstand-block); }
.feature:last-child { margin-bottom: 0; }
.feature-body h2 { margin-bottom: var(--abstand-kopf-text); }
@media (min-width: 1024px) { .feature { margin-bottom: var(--abstand-block); } }
.liefergebiete-block { margin-bottom: var(--abstand-block); }
.liefergebiete-block + .feature { margin-top: 0; }
.liefer-gruppen { margin-top: var(--abs-absatz); }
.liefer-spalte .liefer-gruppe + .liefer-gruppe { margin-top: var(--abs-absatz); }
.liefer-gruppe h3 { margin-bottom: var(--abstand-kopf-text); }

/* Holz: Downloadliste */
.download-list { margin-top: var(--abstand-block); }

/* Karriere: Stellenliste direkt nach dem Seitenkopf */
.job-list { margin: var(--abs-absatz) 0 0; }
.section--tight > .container > .job-list:first-child { margin-top: 0; }

/* ---------- 53.4 Portraets 400 x 400 ---------- */
.team-grid { max-width: 400px; gap: 42px 40px; }
@media (min-width: 576px)  { .team-grid { max-width: 840px; } }   /* 2 x 400 + 40 */
@media (min-width: 1024px) { .team-grid { max-width: var(--container); } } /* 3 x 400 + 2 x 40 */
.team-card h3,
.team-grid--pets .team-card .name { margin-top: 12px; }

/* ---------- 53.5 Zertifizierungen: Logos gleich hoch, Texte buendig ---------- */
.cert-grid { gap: 40px var(--steg); align-items: start; }
@media (min-width: 768px) { .cert-grid { grid-template-columns: 1fr 1fr; } }
.cert-item {
  display: grid;
  grid-template-rows: 110px auto;
  row-gap: 14px;
  align-items: end;
}
.cert-item img {
  height: 110px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: left bottom;
  margin: 0;
  align-self: end;
}
.cert-item p { margin: 0; align-self: start; }

/* ---------- 53.6 Impressum: Gruppen ---------- */
.legal--impressum p { margin: 0 0 4px; }
.legal--impressum p.legal-label { margin: 32px 0 4px; }
.legal--impressum h1 + p.legal-label { margin-top: 0; }
.legal--impressum h2 { margin: 40px 0 var(--abstand-kopf-text); }
.legal--impressum h2 + p { margin-bottom: 0; }
.legal h1 { margin-bottom: var(--abstand-kopf-text); }

/* ---------- 53.7 Silbentrennung im Fliesstext ----------
   Frau Arnold zum Flattersatz auf Historie: "da muss ja irgendwie
   eine Silbentrennung herrschen". Gilt fuer alle Fliesstexte;
   Eigennamen koennen im HTML mit &nbsp; bzw. &shy; gesteuert werden. */
.rich-text, .text-cols, .text-cols-flow,
.page-head .page-teaser, .home-intro .intro-text,
.entry-card p, .team-card p, .feature-body p, .acc-panel, .legal {
  hyphens: auto; -webkit-hyphens: auto;
  hyphenate-limit-chars: 6 3 3;
}

/* ---------- 53.8 Logo im Fuss identisch mit dem Kopf ---------- */
.footer-brand .footer-logo,
.contact-address .contact-brand img,
.logo img { height: var(--logo-h); }
@media (min-width: 1024px) and (max-width: 1279px) {
  .footer-brand .footer-logo,
  .contact-brand img,
  .logo img { height: var(--logo-h); }
}

/* ---------- 53.9 Standbild ueber dem Einstiegsvideo ----------
   Der erste Videoframe ist schwarz (Einblendung). Das Standbild aus
   Sekunde 0,7 liegt ueber dem Video, bis es sichtbar laeuft. */
.hero-standbild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  z-index: 2;
  pointer-events: none;
  transition: opacity .35s ease;
}
.hero-standbild { transition: none; }   /* 11.09. (Herr Edinger, Aufnahme "langsames 4G"): keine
   Ueberblendung mehr - waehrend der 0,8 s lag das Standbild halb-
   transparent ueber den schon laufenden Menschen ("Geistereffekt").
   Jetzt harter Wechsel mit dem ersten gezeigten Videobild. */
.hero-standbild.is-hidden { opacity: 0; }

/* Ladekreis mittig im Video, solange das Einstiegsvideo puffert (Klasse
   is-loading am Kopfbereich, gesetzt von initHeroStart - erst nach 0,4 s) */
.hero-load {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.hero--home.is-loading .hero-load { display: flex; }
.hero-load span {
  display: block;
  width: 54px; height: 54px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  background: rgba(0,0,0,.35);
  animation: mosaic-spin .9s linear infinite;
}
@media (max-width: 767px) {
  .hero-load span { width: 44px; height: 44px; border-width: 2px; }
}
.hero--home .hero-sound { z-index: 4; }

.hero-cues { z-index: 3; }

/* ---------- 53.10 Startseiten-Einstieg unter 900 px ----------
   Die feste Spaltenteilung (Abschnitt 45) trennt den Satz nach
   "europaeischen Ausland". Einspaltig muss er wieder in einer
   Zeile weiterlaufen - sonst steht der Gedankenstrich allein am
   Zeilenanfang. */
@media (max-width: 899px) {
  .home-intro .intro-text.intro-text--fest { display: block; }
  .intro-text--fest .intro-spalte { display: contents; }
  .intro-text--fest .intro-spalte:first-child > p:last-child,
  .intro-text--fest .intro-spalte:last-child > p:first-child { display: inline; margin: 0; }
  .intro-text--fest .intro-spalte:last-child > p:first-child::after {
    content: "";
    display: block;
    height: 1.27em;
  }
}

/* ---------- 53.11 Mosaik auf dem Tablet (768-1023 px) ----------
   Die aeltere Umbruchregel (Abschnitt 24.5, bis 1023 px) stellte
   Querformate auf volle Breite und Hochformate zu zweit nebeneinander.
   Seit die Reihen nur noch EIN Hochformat enthalten (07.09.), stand
   dieses allein auf voller Breite - ein Hochkantvideo von 820 x 1458 px.
   Auf dem Tablet bleibt deshalb das Dreierraster der Desktop-Ansicht
   (Reihenhoehe bei 820 px rund 220 px); erst auf dem Telefon (< 768 px)
   wird umbrochen. */
@media (min-width: 768px) and (max-width: 1023px) {
  .mosaic-row { flex-wrap: nowrap; gap: 14px; margin-bottom: 14px; }
  .mosaic--full { padding: 0 14px; }
  .mosaic--roomy .mosaic-tile--l,
  .mosaic--roomy .mosaic-tile--p { flex: var(--ar, 1.5) 1 0px; order: 0; }
}

/* ---------- 53.12 Fussbereich auf dem Tablet (768-1023 px) ----------
   Fuer vier Bloecke nebeneinander reicht die Breite nicht (Linien
   stossen an den Text). Deshalb zwei Reihen: Logo, Adresse, Linie,
   Telefonservice/Oeffnungszeiten - darunter Downloads, Impressum,
   Datenschutz, AGB in einer Zeile. */
@media (min-width: 768px) and (max-width: 1023px) {
  .footer-grid {
    grid-template-columns: auto auto 1fr 1px 1fr auto;
    grid-template-rows: auto auto;
  }
  .footer-brand   { grid-column: 1; grid-row: 1; }
  .footer-address { grid-column: 2; grid-row: 1; }
  .footer-grid::before { grid-column: 4; grid-row: 1; }
  .footer-hours   { grid-column: 6; grid-row: 1; }
  .footer-grid::after { display: none; }
  .footer-links {
    grid-column: 1 / -1;
    grid-row: 2;
    flex-direction: row;
    justify-content: flex-start;
    gap: 36px;
    padding-top: 0;
    margin-top: 32px;
  }
}

/* Firmenname nie trennen (Frau Arnold, 07.09.: "ob man die wirklich als
   Industrieverpackung trennen sollte") */
.kein-umbruch { white-space: nowrap; hyphens: manual; -webkit-hyphens: manual; }

/* ---------- 53.13 Tonschalter fest im Fenster, solange das Video
   unter den Bildschirmrand reicht (10.09., Frau Abresch) ----------
   Schaltet js/main.js (initHeroSoundPosition). Der Schalter behaelt
   Groesse und Abstand (24 px, mobil 14 px) - beim Wechsel zwischen
   "fest im Fenster" und "an der Videoecke" springt nichts. */
.hero--home .hero-sound.is-fixed {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 450;            /* ueber Inhalt und Pfeil, unter Kopfzeile (500) */
}
@media (max-width: 767px) {
  .hero--home .hero-sound.is-fixed { right: 14px; }
}
/* "Nach oben"-Pfeil weicht aus, solange der Tonschalter fest steht */
.to-top.is-ausgewichen { opacity: 0; visibility: hidden; }

/* ---------- 53.14 Diagnose-Anzeige im Startvideo (?diagnose=1) ----------
   Blendet js/main.js (initHeroStart) ein: Fassung, verworfene Bilder,
   Aussetzer, Ladefaktor, Netz, Browser - fuer Rueckmeldungen wie
   "ruckelt bei mir" (11.09., Frau Abresch). */
.hero-diag {
  position: absolute;
  left: 16px; top: 16px;
  z-index: 5;
  margin: 0;
  padding: 10px 12px;
  max-width: calc(100% - 32px);
  font: 12px/1.45 Menlo, Consolas, monospace;
  color: #fff;
  background: rgba(0,0,0,.72);
  white-space: pre-wrap;
  word-break: break-word;
  pointer-events: none;
}