/* Konzept 3 „Creative Showcase“ – Vorteil Werbung Startseite (Nachbesserung nach Review-Runde 1)
   Zwei Familien: Archivo (variabel, wght + wdth) für Headlines/UI, Source Serif 4 für Fließtext.
   Aufbau: 1 Fonts/Token/Basis · 2 Kopf/Subnav/Fuß (Basis für alle Seiten) · 3 Module (Split, Streifen, Karte, Bildpaar)
           · 4 Startseite (Hero, Kundenband, Showcase, Leuchtbanner) · 5 Motion · 6 Responsiv */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("/assets/fonts/archivo-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("/assets/fonts/archivo-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02AF, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("/assets/fonts/source-serif-4-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("/assets/fonts/source-serif-4-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02AF, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Source Serif 4";
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url("/assets/fonts/source-serif-4-latin-wght-italic.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- 1 Token ---------- */
:root {
  --papier: #f7f5f0;
  --weiss: #ffffff;
  --dunkel: #333333;
  --gruen: #9ac643;          /* Fläche unter dunkler Schrift, Licht auf Dunkel */
  --gruen-tief: #86b034;     /* Hover der Fläche */
  --gruen-signal: #5e8a1f;   /* grafische Elemente auf Hell (Sterne, Marker, Subnav-Strich): 4,1:1 auf Weiß */
  --neben: #5f5f5a;
  --hairline: #d8d4cb;
  --hairline-dunkel: #4d4d4a;
  --grotesk: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --container: 1360px;
  --rand: clamp(20px, 3.4vw, 48px);
  --kopf-h: 76px;
  --subnav-h: 50px;
  --gap: 24px;
  --takt: clamp(52px, 5.6vw, 76px);
  --sc-reihe: calc((min(var(--container), 100vw - 2 * var(--rand)) - 2 * var(--gap)) / 3 * 2 / 3);
}
.kompakt { --kopf-h: 56px; --subnav-h: 40px; }

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0;
  background: var(--papier);
  color: var(--dunkel);
  font-family: var(--grotesk);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--gruen); }
:focus-visible { outline: 3px solid var(--dunkel); outline-offset: 0; box-shadow: 0 0 0 6px var(--gruen); }
.dunkel :focus-visible, .fuss :focus-visible, .menue-overlay :focus-visible { outline-color: var(--gruen); box-shadow: none; outline-offset: 2px; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
h1, h2, h3, p, dl { margin: 0; }
.container { width: min(var(--container), 100% - 2 * var(--rand)); margin-inline: auto; }
.emo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sprung { position: absolute; left: -999px; top: 8px; background: var(--dunkel); color: #fff; padding: 10px 16px; z-index: 100; }
.sprung:focus { left: 8px; }
/* Sprungziele landen unter dem Sticky-Stapel */
main [id] { scroll-margin-top: calc(var(--kopf-h) + var(--subnav-h) + 24px); }

/* ---------- Typografie ---------- */
h1, h2 {
  font-family: var(--grotesk);
  font-weight: 800;
  font-stretch: 118%;
  letter-spacing: -0.025em;
  line-height: 0.98;
  text-wrap: balance;
}
h1 { font-size: clamp(36px, 4.7vw, 68px); font-stretch: 110%; overflow-wrap: anywhere; hyphens: auto; }
h2 { font-size: clamp(30px, 3.8vw, 54px); line-height: 1.02; }
h3 { font-family: var(--serif); font-weight: 500; font-size: clamp(19px, 1.6vw, 22px); line-height: 1.35; color: var(--dunkel); }
p { font-family: var(--serif); font-size: 18px; line-height: 1.6; }
p + p { margin-top: 1em; }
.nb { white-space: nowrap; }
.einleitung { max-width: 60ch; }
.fakten { font-family: var(--grotesk); font-size: 16px; line-height: 1.45; }
.fakten li { padding: 11px 0 11px 22px; border-top: 1px solid var(--hairline); position: relative; }
.fakten li:last-child { border-bottom: 1px solid var(--hairline); }
.fakten li::before { content: ""; position: absolute; left: 0; top: 18px; width: 10px; height: 10px; background: var(--gruen-signal); }
.dunkel .fakten li { border-color: var(--hairline-dunkel); }
.dunkel .fakten li::before { background: var(--gruen); }
/* Fakten als Zeile (Beschriftung, Digitaldruck) */
.fakten.zeile { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 32px; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.fakten.zeile li { border: 0; padding: 14px 0 14px 22px; }
.fakten.zeile li::before { top: 21px; }

/* „Mehr lesen“: Absätze 2–3 der Leistungen – Desktop immer offen, mobil per JS aufklappbar */
details.mehr > summary { display: none; }
details.mehr > p:first-of-type { margin-top: 0; }
p + details.mehr > p:first-of-type { margin-top: 1em; }
details.klapp > summary { display: block; list-style: none; pointer-events: none; }
details.klapp > summary::-webkit-details-marker { display: none; }

/* Bildunterschriften */
figcaption, .bildzeile {
  font-family: var(--grotesk);
  font-size: 14px;
  line-height: 1.4;
  color: var(--neben);
  padding-top: 10px;
}
figcaption b, .bildzeile b, .sc-text b { font-weight: 700; color: var(--dunkel); margin-right: 6px; }
.dunkel figcaption, .dunkel .bildzeile { color: #c9c9c4; }
.dunkel figcaption b, .dunkel .bildzeile b { color: #fff; }

/* Buttons und Links */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 24px;
  font-family: var(--grotesk); font-weight: 700; font-size: 16px; line-height: 1.2;
  text-decoration: none; border: 2px solid transparent;
  transition: background-color .2s ease-out, color .2s ease-out, border-color .2s ease-out;
}
.knopf-gruen { background: var(--gruen); color: var(--dunkel); border-color: var(--gruen); }
.knopf-gruen:hover { background: var(--gruen-tief); border-color: var(--gruen-tief); }
.knopf-dunkel { background: var(--dunkel); color: #fff; border-color: var(--dunkel); }
.knopf-dunkel:hover { background: var(--gruen); color: var(--dunkel); border-color: var(--gruen); }
.knopf-rand { background: transparent; color: var(--dunkel); border-color: var(--dunkel); }
.knopf-rand:hover { background: var(--dunkel); color: #fff; }
.dunkel .knopf-rand { color: #fff; border-color: #fff; }
.dunkel .knopf-rand:hover { background: #fff; color: var(--dunkel); border-color: #fff; }
.textlink {
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: var(--grotesk); font-weight: 600; font-size: 16px;
  text-decoration: none;
  background: linear-gradient(var(--gruen), var(--gruen)) no-repeat 0 calc(50% + 14px) / 100% 2px;
}
.textlink:hover { background-size: 100% 3px; }

/* ---------- 2 Kopf ---------- */
.kopf { position: sticky; top: 0; z-index: 50; background: var(--papier); border-bottom: 1px solid var(--hairline); }
.kopf-innen {
  width: min(var(--container), 100% - 2 * var(--rand)); margin-inline: auto;
  height: var(--kopf-h); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px;
  transition: height .25s ease-out;
}
.logo { display: block; padding: 6px 0; line-height: 0; }
.logo img { width: 272px; height: auto; transition: width .25s ease-out; }
.kompakt .logo { padding: 4px 0; }
.kompakt .logo img { width: 214px; }
.hauptnav { justify-self: center; }
.nav-liste { display: flex; gap: 6px; }
.nav-liste > li > a, .nav-sub-knopf {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px;
  font-family: var(--grotesk); font-weight: 600; font-size: 16px; color: var(--dunkel);
  text-decoration: none; background: linear-gradient(var(--gruen), var(--gruen)) no-repeat 14px 70% / 0 2px;
  transition: background-size .2s ease-out; border: 0; cursor: pointer;
}
.nav-liste > li > a:hover, .nav-sub-knopf:hover, .nav-liste > li.offen > .nav-sub-knopf, .hat-sub:hover > .nav-sub-knopf { background-size: calc(100% - 28px) 2px; }
.nav-sub-knopf::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.hat-sub { position: relative; }
/* Panel ist display:none, solange es zu ist – so laden die Thumbnails erst beim Öffnen */
.sub {
  display: none; position: absolute; left: 50%; top: calc(100% + 8px); transform: translateX(-50%);
  background: var(--weiss); border: 1px solid var(--hairline); padding: 12px; width: 560px;
}
.sub::before { content: ""; position: absolute; left: 0; right: 0; top: -9px; height: 9px; }
.hat-sub:hover > .sub, .hat-sub.offen > .sub, html:not(.js) .hat-sub:focus-within > .sub { display: block; animation: sub-auf .18s ease-out; }
@keyframes sub-auf { from { opacity: 0; } to { opacity: 1; } }
.sub-liste { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.sub-liste a { display: flex; align-items: center; gap: 12px; padding: 6px 10px 6px 6px; text-decoration: none; font-weight: 600; font-size: 15px; min-height: 44px; }
.sub-liste a:hover, .sub-liste a:focus-visible { background: var(--papier); }
.sub-liste img { width: 64px; height: 44px; object-fit: cover; flex: none; background: var(--papier); }
.kopf-aktion { display: flex; align-items: center; gap: 18px; justify-self: end; }
.kopf-tel { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 16px; text-decoration: none; min-height: 44px; }
.kopf-tel svg { fill: var(--dunkel); }
.kopf-tel:hover span { text-decoration: underline; text-decoration-color: var(--gruen); text-underline-offset: 4px; }
.kopf-anfrage { min-height: 44px; padding: 10px 22px; }
.kompakt .kopf-anfrage { min-height: 40px; padding: 8px 20px; }
.menue-knopf { display: none; align-items: center; gap: 10px; min-height: 44px; padding: 0 4px; background: none; border: 0; font: 700 16px var(--grotesk); color: var(--dunkel); cursor: pointer; }
.menue-balken { width: 22px; height: 2px; background: currentColor; position: relative; }
.menue-balken::before, .menue-balken::after { content: ""; position: absolute; left: 0; width: 22px; height: 2px; background: currentColor; transition: transform .2s ease-out; }
.menue-balken::before { top: -7px; } .menue-balken::after { top: 7px; }
.menu-offen .menue-balken { background: transparent; }
.menu-offen .menue-balken::before { transform: translateY(7px) rotate(45deg); }
.menu-offen .menue-balken::after { transform: translateY(-7px) rotate(-45deg); }

/* Mobiles Overlay */
.menue-overlay { position: fixed; inset: var(--kopf-h) 0 0 0; background: var(--dunkel); color: #fff; overflow-y: auto; z-index: 49; }
.menue-overlay[hidden] { display: none; }
.menue-innen { padding: 20px var(--rand) 40px; display: grid; gap: 16px; }
.menue-tel { font-family: var(--grotesk); font-weight: 800; font-stretch: 118%; font-size: 34px; letter-spacing: -0.02em; text-decoration: none; color: var(--gruen); }
.menue-liste li { border-top: 1px solid var(--hairline-dunkel); }
.menue-liste li:last-child { border-bottom: 1px solid var(--hairline-dunkel); }
.menue-liste a { display: block; padding: 11px 0; min-height: 46px; font-weight: 600; font-size: 18px; text-decoration: none; }
.menue-mail { justify-self: start; margin-top: -4px; }
.menue-liste a:hover { color: var(--gruen); }
.menue-zeiten { font-family: var(--grotesk); font-size: 15px; color: #c9c9c4; }

/* ---------- Subnav ---------- */
.subnav { position: sticky; top: var(--kopf-h); z-index: 40; background: var(--papier); border-bottom: 1px solid var(--hairline); }
.subnav-innen { width: min(var(--container), 100% - 2 * var(--rand)); margin-inline: auto; display: flex; align-items: center; gap: 16px; min-height: var(--subnav-h); transition: min-height .25s ease-out; }
.brotkrumen, .subnav-titel { font-family: var(--grotesk); font-size: 14px; color: var(--neben); white-space: nowrap; }
.brotkrumen strong { font-weight: 600; color: var(--dunkel); }
.subnav-titel { display: none; }
.subnav-liste {
  display: flex; gap: 0; margin-left: auto; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity;
  mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent);
  padding-right: 36px;
}
.subnav-liste::-webkit-scrollbar { display: none; }
.subnav-liste li { scroll-snap-align: start; }
.subnav-liste a {
  display: inline-block; padding: 14px 8px; font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap;
  border-bottom: 3px solid transparent; margin-bottom: -1px; color: var(--neben); transition: padding .25s ease-out;
}
.kompakt .subnav-liste a { padding: 9px 8px; }
.subnav-liste a:hover { color: var(--dunkel); }
.subnav-liste a[aria-current] { color: var(--dunkel); border-bottom-color: var(--gruen-signal); }
.subnav-liste .kurz { display: none; }

/* ---------- 3 Module ---------- */
.bild img { width: 100%; }
.band img { width: 100%; height: auto; }
.split { display: grid; grid-template-columns: 6fr 5fr; gap: 48px 64px; align-items: center; }
.split-rechts { grid-template-columns: 6fr 5fr; }
.split-text h3 { margin-top: 18px; }
.split-text details { margin-top: 28px; }
.split-text p { max-width: 54ch; }
.split-text .fakten { margin-top: 28px; }
.split-text .knopf { margin-top: 28px; }
.split-bild img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.split-bild.hochkant img { aspect-ratio: 4 / 5; object-position: center 15%; }
.details-drei { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); margin-top: 24px; }
.split-stapel { min-width: 0; }
.bildpaar { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); margin-top: 56px; align-items: start; }
.bildpaar figure img { aspect-ratio: 2.5 / 1; object-fit: cover; object-position: center; }
.bildpaar figure:first-child img { object-position: center 40%; }
.bildpaar.gross { margin-top: 0; }
.bildpaar.gross figure img { aspect-ratio: 2.2 / 1; }
.bildpaar.gross figure:first-child img { object-position: center 50%; }
.details-drei img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.details-drei figcaption { font-size: 13px; }
.details-drei figcaption b { display: block; margin: 0; font-size: 14px; }
.streifen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.streifen figure img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.karte { background: var(--weiss); border: 1px solid var(--hairline); padding: clamp(28px, 4vw, 48px); position: relative; }
.sichtschutz-split { align-items: start; grid-template-columns: 5fr 6fr; }
.sichtschutz-split .split-bild img { aspect-ratio: 4 / 3; object-position: 55% center; }
.karte h3 { margin-top: 18px; }
.pipe { font-weight: 300; color: var(--neben); }
.karte-spalten { display: grid; grid-template-columns: 1fr; gap: 28px; margin-top: 24px; align-items: start; }
.karte-spalten p { max-width: 56ch; }
.karte-spalten .knopf { margin-top: 24px; }

/* ---------- 4 Startseite: Hero ---------- */
.hero { border-bottom: 1px solid var(--hairline); padding-bottom: clamp(40px, 5vw, 72px); }
.hero-text {
  width: min(var(--container), 100% - 2 * var(--rand)); margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px clamp(32px, 5vw, 96px); align-items: end;
  padding: clamp(40px, 5vw, 72px) 0 clamp(32px, 4vw, 48px);
}
.hero-links h1 { margin: 0 0 20px; hyphens: manual; overflow-wrap: normal; }
.hero-rechts { display: flex; flex-direction: column; gap: 22px; padding-bottom: 6px; }
.hero .leuchtbanner { width: min(var(--container), 100% - 2 * var(--rand)); margin-inline: auto; background: var(--dunkel); }
.hero .leuchtbanner.hero-bild-breit picture img { aspect-ratio: 1500 / 525; object-fit: cover; height: auto; }
.hero .leuchtbanner .bildzeile { left: 0; right: 0; bottom: 0; padding: 36px 20px 14px; background: linear-gradient(to top, rgba(0,0,0,.6), rgba(0,0,0,0)); color: #e4e4df; }
.hero .leuchtbanner .bildzeile b { color: #fff; }
.unterzeile { font-family: var(--serif); font-size: clamp(18px, 1.5vw, 21px); line-height: 1.5; max-width: 42ch; }
/* Signatur: „1949“ gesetzt wie das Logo – breite Versalien, grüne Linie darunter */
.seit { display: grid; grid-template-columns: auto 1fr; gap: 0 20px; align-items: end; margin-top: 4px; }
.seit-zahl {
  font-family: var(--grotesk); font-weight: 800; font-stretch: 125%; font-size: clamp(44px, 4.2vw, 64px); line-height: 1; letter-spacing: -0.02em;
  padding-bottom: 8px; border-bottom: 3px solid var(--gruen); grid-row: 1 / 3;
}
.seit-label { font-family: var(--grotesk); font-size: 14px; line-height: 1.3; color: var(--neben); padding-bottom: 10px; align-self: end; }
.kennzeile { font-family: var(--grotesk); font-size: 15px; line-height: 1.5; color: var(--neben); max-width: 40ch; }
.kennzeile b { font-weight: 700; color: var(--dunkel); }
.hero-aktionen { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }

/* ---------- Moin ---------- */
.moin { padding: var(--takt) 0; }
.moin-raster { display: grid; grid-template-columns: 5fr 7fr; gap: 40px 64px; align-items: start; }
.moin-kopf { grid-column: 1; }
.ueberblick { grid-column: 1; grid-row: 2; }
.moin-text { grid-column: 2; grid-row: 1 / 3; }
.begruessung { font-family: var(--grotesk); font-weight: 800; font-stretch: 118%; font-size: clamp(30px, 3.2vw, 44px); line-height: 1.02; letter-spacing: -0.02em; text-wrap: balance; }
.moin-text p { max-width: 58ch; }
.ueberblick-titel { font-family: var(--grotesk); font-weight: 700; font-size: 15px; margin-bottom: 4px; }
.ueberblick a { padding: 11px 0; }
.ueberblick li { border-top: 1px solid var(--hairline); }
.ueberblick li:last-child { border-bottom: 1px solid var(--hairline); }
.ueberblick a { display: block; padding: 11px 0; font-weight: 600; font-size: 15px; text-decoration: none; }
.ueberblick a:hover { text-decoration: underline; text-decoration-color: var(--gruen); text-underline-offset: 4px; text-decoration-thickness: 2px; }

/* ---------- Showcase ---------- */
.showcase { padding: var(--takt) 0; background: var(--weiss); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.abschnitt-kopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 40px; }
.sc-raster { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.sc { position: relative; overflow: hidden; background: var(--papier); }
.sc a { display: block; color: inherit; text-decoration: none; }
.sc-bild { display: block; overflow: hidden; }
.sc-bild img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .6s ease-out; }
.sc a:hover .sc-bild img, .sc a:focus-visible .sc-bild img { transform: scale(1.02); }
.sc-text {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 18px 16px;
  background: rgba(255,255,255,.96); font-family: var(--grotesk); font-size: 14px; line-height: 1.35; color: var(--neben);
  transform: translateY(100%); transition: transform .35s ease-out;
}
.sc-text b { display: block; font-size: 15px; color: var(--dunkel); }
.sc a:hover .sc-text, .sc a:focus-visible .sc-text { transform: none; }
@media (hover: none) { .sc-text { transform: none; } }
.beliebt { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--hairline); }
.beliebt-titel { font-family: var(--grotesk); font-weight: 700; font-size: 15px; margin-bottom: 16px; }
.beliebt-liste { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--gap); }
.beliebt-liste a { display: block; text-decoration: none; font-family: var(--grotesk); font-size: 14px; font-weight: 600; line-height: 1.35; }
.beliebt-liste img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; margin-bottom: 10px; transition: opacity .2s; }
.beliebt-liste a:hover img { opacity: .85; }
.beliebt-liste a:hover span { text-decoration: underline; text-decoration-color: var(--gruen); text-underline-offset: 3px; }

/* ---------- Kundenstimmen (direkt nach den Referenzen) ---------- */
.stimmen-bereich { padding: var(--takt) 0; }
.stimmen-bereich .einleitung { margin-top: 20px; }
.stimmen { display: grid; grid-template-columns: 6fr 6fr; gap: 48px; margin-top: 40px; align-items: start; }
.stimmen-klein { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.stimme { margin: 0; }
.sterne { display: block; color: var(--gruen-signal); font-size: 18px; letter-spacing: 2px; margin-bottom: 12px; }
.stimme p { font-family: var(--serif); font-size: 18px; line-height: 1.55; max-width: 44ch; }
.stimme.gross p { font-size: clamp(22px, 2vw, 28px); line-height: 1.4; font-weight: 400; max-width: 32ch; }
.stimme cite { display: block; margin-top: 14px; font-family: var(--grotesk); font-style: normal; font-size: 14px; color: var(--neben); }
.stimmen-bereich > .container > .knopf { margin-top: 40px; }

/* ---------- Welche Werbung ---------- */
.welche { padding: var(--takt) 0; background: var(--weiss); border-top: 1px solid var(--hairline); }
.welche h2 { max-width: 20ch; }
.welche .einleitung { margin-top: 24px; }
.situationen { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); margin-top: 48px; }
.situation .bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.situation h3 { margin-top: 24px; font-family: var(--grotesk); font-weight: 700; font-size: 20px; line-height: 1.25; letter-spacing: -0.01em; }
.situation p { margin-top: 10px; font-size: 17px; max-width: 42ch; }
.hinweis-satz { margin-top: 48px; font-size: 20px; max-width: 48ch; }

/* ---------- Leistungen allgemein ---------- */
.leistung { padding: var(--takt) 0; }
.leistung + .leistung:not(.dunkel) { border-top: 1px solid var(--hairline); }
.leistung-raster { display: grid; grid-template-columns: 7fr 4fr; gap: 48px 72px; align-items: start; margin-top: 48px; }
.leistung-text h3 { margin-top: 18px; }
.leistung-text details { margin-top: 28px; }
.leistung-text p { max-width: 60ch; }
.leistung-neben { display: grid; gap: 28px; align-content: start; }
.leistung-neben .knopf { justify-self: start; }
.leistung-raster:first-child { margin-top: 0; }

/* Lichtwerbung – dunkle Bühne */
.dunkel { background: var(--dunkel); color: #fff; }
.dunkel h3, .dunkel p { color: #fff; }
.licht { padding-top: 0; }
.leuchtbanner { position: relative; }
.leuchtbanner img { width: 100%; height: auto; }
.wf-an { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; }
.leuchtbanner.an .wf-an { animation: wf-an-flacker 6s 0.3s both; }
@keyframes wf-an-flacker {
  0%, 28% { opacity: 0; }
  29% { opacity: 0.85; }
  30%, 40% { opacity: 0; }
  41% { opacity: 0.45; }
  42%, 52% { opacity: 0; }
  53% { opacity: 1; }
  54% { opacity: 0.15; }
  55% { opacity: 0.9; }
  56% { opacity: 0.3; }
  57% { opacity: 1; }
  58% { opacity: 0.2; }
  59% { opacity: 1; }
  61% { opacity: 0.6; }
  63% { opacity: 1; }
  65%, 100% { opacity: 1; }
}
.leuchtbanner .bildzeile { position: absolute; left: var(--rand); bottom: 16px; padding: 0; margin: 0; }
.licht { padding-top: var(--takt); }
.licht-kopf { display: grid; grid-template-columns: 6fr 5fr; gap: 32px 64px; align-items: center; }
.licht-bild img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; object-position: 0 center; }
.licht-titel h3 { margin-top: 18px; }
.licht .leistung-raster { margin-top: 48px; }
.licht-paar { grid-column: 1 / -1; display: grid; grid-template-columns: 8fr 4fr; gap: var(--gap); margin-top: 24px; }
.licht-paar figure:first-child img { aspect-ratio: 3 / 1; object-fit: cover; }
.licht-paar figure:last-child img { aspect-ratio: 3 / 2; object-fit: cover; }
.licht-paar img { height: auto; }

/* Buchstaben – Band (Quellformat 3,33:1, kein Beschnitt), Split links, Material-Details */
.buchstaben .split { align-items: start; grid-template-columns: 6fr 5fr; }
.buchstaben .split-bild img { aspect-ratio: 3 / 2; object-position: center 35%; }
.details-drei .holz img { object-position: center 30%; }
.details-drei figure:first-child img { object-position: center 18%; }

/* Beschriftung – Streifen vollbreit, Text zweispaltig, Fakten als Zeile */
.beschriftung { padding-top: 0; }
.beschriftung .textbreit { margin-top: 56px; }
.textbreit-kopf { display: grid; grid-template-columns: 7fr 4fr; gap: 24px 72px; align-items: end; }
.textbreit-kopf h3 { margin-top: 18px; }
.textbreit-kopf .knopf { justify-self: start; }
.textbreit .fakten.zeile { margin-top: 32px; }
.textbreit .spalten { margin-top: 36px; columns: 2; column-gap: 96px; }
.textbreit .spalten p { break-inside: avoid; max-width: none; margin-top: 0; }
.textbreit .spalten p + p, .textbreit .spalten details p { margin-top: 1em; }
.textbreit .spalten details { break-inside: avoid; }

/* Sichtschutzfolie – Bild mit Karte (CSS im Modulblock oben) */
.sichtschutz { padding-top: 0; }

/* Digitaldruck – Bildpaar, Fakten als Zeile, Text in 60ch */
.druck .fakten.zeile { margin-top: 40px; }
.druck .druck-text { margin-top: 40px; display: grid; grid-template-columns: 7fr 4fr; gap: 32px 72px; align-items: start; }
.druck .druck-text h3 { margin-top: 18px; }
.druck .druck-text details { margin-top: 28px; }
.druck .druck-text p { max-width: 60ch; }
.druck .druck-text .knopf { justify-self: start; align-self: end; }

/* ---------- Erfahrung ---------- */
.erfahrung { padding: var(--takt) 0; background: var(--weiss); border-top: 1px solid var(--hairline); }
.erf-raster { display: grid; grid-template-columns: 5fr 7fr; gap: 48px 64px; align-items: start; }
.erf-kopf h3 { margin-top: 18px; }
.erf-kopf .fakten { margin-top: 32px; }
.erf-bild img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: center 62%; }
.erf-text { margin-top: 56px; columns: 2; column-gap: 96px; }
.erf-text p { break-inside: avoid; max-width: none; }
.erf-text details { break-inside: avoid; }

/* ---------- Kontakt ---------- */
.kontakt { padding: var(--takt) 0; border-top: 1px solid var(--hairline); }
.kontakt-raster { display: grid; grid-template-columns: 7fr 4fr; gap: 48px 72px; align-items: start; }
.kontakt-haupt h2 { max-width: 14ch; }
.kontakt-satz { margin-top: 28px; font-size: 20px; max-width: 48ch; }
.kontakt-satz + .kontakt-satz { margin-top: 12px; font-size: 18px; }
.kontaktzeile { font-family: var(--grotesk); font-size: 17px; line-height: 1.5; display: flex; flex-wrap: wrap; gap: 4px 28px; }
.kontaktzeile a { display: inline-block; font-weight: 600; text-decoration: none; background: linear-gradient(var(--gruen), var(--gruen)) no-repeat 0 calc(100% - 6px) / 100% 2px; padding: 8px 0; }
.kontaktzeile a:hover { background-size: 100% 3px; }
.kontaktzeile.gross { margin: 24px 0; font-size: clamp(20px, 2.2vw, 28px); flex-direction: column; gap: 4px; align-items: flex-start; }
.kontaktzeile.gross a { font-weight: 700; font-stretch: 110%; letter-spacing: -0.01em; }
.adresse { margin-top: 12px; font-family: var(--grotesk); font-size: 16px; line-height: 1.6; }
.direkt { border-top: 1px solid var(--hairline); padding-top: 20px; }
.direkt-titel { font-family: var(--grotesk); font-weight: 700; font-size: 15px; }
.direkt-liste { display: grid; gap: 12px; margin-top: 18px; justify-items: start; }
.direkt-liste .knopf { width: 100%; max-width: 320px; }
.direkt-zeiten { margin-top: 24px; font-family: var(--grotesk); font-size: 15px; color: var(--neben); line-height: 1.6; }

/* ---------- Einsatzgebiet ---------- */
.gebiet { padding: var(--takt) 0; border-top: 1px solid var(--hairline); }
.gebiet .einleitung { margin-top: 20px; }
.gebiet-spalten { display: grid; grid-template-columns: minmax(0, 720px); gap: 48px; margin-top: 40px; }
.gebiet-spalte { border-top: 1px solid var(--hairline); padding-top: 20px; }
.gebiet-spalte h3 { font-family: var(--grotesk); font-weight: 700; font-size: 22px; letter-spacing: -0.01em; }
.gebiet-spalte p { margin-top: 14px; max-width: 48ch; }
.orte { margin-top: 10px; }
.orte li { font-family: var(--grotesk); font-weight: 600; font-size: 17px; padding: 9px 0; border-bottom: 1px solid var(--hairline); }
.gebiet-schluss { margin-top: 40px; max-width: 60ch; }

/* ---------- FAQ ---------- */
.faq { padding: var(--takt) 0; background: var(--weiss); border-top: 1px solid var(--hairline); }
.faq-raster { display: grid; grid-template-columns: 5fr 7fr; gap: 48px; align-items: start; }
.faq h2 { font-size: clamp(28px, 3vw, 44px); position: sticky; top: calc(var(--kopf-h) + var(--subnav-h) + 32px); }
.faq-item { border-top: 1px solid var(--hairline); }
.faq-item:last-child { border-bottom: 1px solid var(--hairline); }
.faq-item summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 18px 0; font-family: var(--grotesk); font-weight: 700; font-size: 19px; line-height: 1.3;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: ""; flex: none; width: 12px; height: 12px; border-right: 2px solid var(--dunkel); border-bottom: 2px solid var(--dunkel); transform: rotate(45deg); transition: transform .25s ease-out; margin-right: 4px; }
.faq-item[open] summary::after { transform: rotate(-135deg); border-color: var(--gruen-signal); }
.faq-item summary:hover::after { border-color: var(--gruen-signal); }
.faq-inhalt { padding: 0 48px 22px 0; }
.faq-inhalt p { font-size: 17px; max-width: 60ch; }
.faq-item[open] .faq-inhalt { animation: auf .3s ease-out both; }
@keyframes auf { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ---------- Fuß ---------- */
.fuss { background: var(--dunkel); color: #d9d9d4; padding: 72px 0 0; }
.fuss a { color: #fff; text-decoration: none; }
.fuss a:hover { text-decoration: underline; text-decoration-color: var(--gruen); text-underline-offset: 3px; }
.fuss-spalten { display: grid; grid-template-columns: 1.3fr 1fr 1fr 0.8fr 1.1fr; gap: 40px; }
.fuss-logo { width: 190px; margin-bottom: 18px; }
.fuss-titel { font-family: var(--grotesk); font-weight: 700; font-size: 15px; color: #fff; margin-bottom: 8px; }
.fuss-titel.klein { margin-top: 20px; }
.fuss p { font-family: var(--grotesk); font-size: 15px; line-height: 1.55; }
.fuss p + p { margin-top: 8px; }
.fuss-claim { max-width: 28ch; }
.fuss-google { margin-top: 12px; }
.fuss-google a { display: inline-block; padding: 6px 0; }
.fuss-google .sterne { display: inline; margin: 0 8px 0 0; letter-spacing: 1px; font-size: 15px; color: var(--gruen); }
.fuss-sozial { display: flex; gap: 10px; margin-top: 16px; }
.fuss-sozial a { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; border: 1px solid var(--hairline-dunkel); }
.fuss-sozial a:hover { border-color: var(--gruen); }
.fuss-sozial svg { width: 20px; height: 20px; fill: #fff; }
.fuss ul li { font-size: 15px; }
.fuss ul a { display: block; padding: 5px 0; line-height: 1.4; }
.fuss-adresse a { display: inline-block; padding: 4px 0; line-height: 1.4; }
.fuss-hinweis { color: #b5b5b0; }
.socket { margin-top: 56px; border-top: 1px solid var(--hairline-dunkel); padding: 18px 0; font-size: 13px; color: #b5b5b0; }

/* ---------- 5 Motion: Reveal nur auf zwei Bühnen (Showcase gestaffelt, Sichtschutz-Vollbild) ---------- */
.js .reveal { opacity: 0; }
.js .reveal img { transform: scale(1.04); }
.js .reveal.sichtbar { opacity: 1; transition: opacity .6s ease-out; }
.js .reveal.sichtbar img { transform: none; transition: transform .7s ease-out; }
.reveal { overflow: hidden; }
.js .sc:nth-child(2) .reveal.sichtbar, .js .sc:nth-child(2) .reveal.sichtbar img { transition-delay: .08s; }
.js .sc:nth-child(3) .reveal.sichtbar, .js .sc:nth-child(3) .reveal.sichtbar img { transition-delay: .16s; }
.js .sc:nth-child(4) .reveal.sichtbar, .js .sc:nth-child(4) .reveal.sichtbar img { transition-delay: .24s; }
.js .sc:nth-child(n+5) .reveal.sichtbar, .js .sc:nth-child(n+5) .reveal.sichtbar img { transition-delay: .1s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal, .js .reveal img { opacity: 1; transform: none; }
  .wf-an { opacity: 1; }
}
html:not(.js) .wf-an { opacity: 1; }

/* ---------- 6 Responsiv ---------- */
@media (max-width: 1900px) {
  .subnav-liste .lang { display: none; }
  .subnav-liste .kurz { display: inline; }
}
@media (max-width: 1300px) {
  .brotkrumen { display: none; }
  .subnav-titel { display: block; }
  .subnav-liste { margin-left: 0; }
}
@media (max-width: 1240px) {
  h1 { font-size: clamp(36px, 4.2vw, 68px); }
  .moin-raster { grid-template-columns: 1fr 1fr; }
  .fuss-spalten { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 1100px) {
  .sc-raster { grid-template-columns: repeat(3, 1fr); }
  .kopf-tel span { display: none; }
  .kopf-tel { width: 44px; justify-content: center; border: 1px solid var(--hairline); }
  .kopf-tel svg { width: 20px; height: 20px; }
  .kopf-innen { gap: 16px; }
  .nav-liste > li > a, .nav-sub-knopf { padding: 0 10px; }
  .leistung-raster, .kontakt-raster, .erf-raster { grid-template-columns: 1fr; gap: 40px; }
  .erf-text { columns: 1; margin-top: 40px; }
  .stimmen { grid-template-columns: 1fr 1fr; }
  .stimme.gross { grid-column: 1 / -1; }
  .faq-raster { grid-template-columns: 1fr; }
  .faq h2 { position: static; }
  .licht-paar { grid-template-columns: 1fr 1fr; }
  .licht-paar figure:first-child img { aspect-ratio: 2 / 1; }
  .licht-paar figure:last-child img { aspect-ratio: 2 / 1; }
  .textbreit-kopf, .druck .druck-text { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  :root { --kopf-h: 64px; --subnav-h: 44px; }
  .kompakt { --kopf-h: 64px; }
  .logo, .kompakt .logo { padding: 0; min-height: 44px; display: flex; align-items: center; }
  .logo img, .kompakt .logo img { width: 196px; }
  .hauptnav { display: none; }
  .menue-knopf { display: inline-flex; }
  .kopf-anfrage { display: none; }
  /* Hero: Bühne zuerst, darunter Text – das Werkstück steht im Fold */
  .hero-text { grid-template-columns: 1fr; gap: 20px; align-items: start; }
  .hero-rechts { padding-bottom: 0; }
  .subnav-innen { min-height: var(--subnav-h); gap: 12px; }
  .subnav-titel { font-size: 13px; }
  .subnav-liste a, .kompakt .subnav-liste a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; font-size: 13px; border-bottom-width: 2px; }
  main [id] { scroll-margin-top: calc(var(--kopf-h) + var(--subnav-h) + 16px); }
  .split, .split-rechts, .buchstaben .split { grid-template-columns: 1fr; gap: 32px; }
  .split-rechts .split-bild { order: -1; }
  .buchstaben .split-bild img { aspect-ratio: 3 / 2; }
  .split-bild.hochkant img { aspect-ratio: 4 / 3; object-position: center 30%; }
  .karte-spalten { grid-template-columns: 1fr; }
  .licht-kopf { grid-template-columns: 1fr; gap: 24px; }
  .situationen { grid-template-columns: 1fr; gap: 40px; }
  .situation .bild img { aspect-ratio: 2 / 1; }
  .bildpaar, .bildpaar.gross { grid-template-columns: 1fr; }
  .bildpaar figure img { aspect-ratio: 2.5 / 1; object-position: center; }
  .gebiet-spalten, .stimmen { grid-template-columns: 1fr; }
  .fuss-spalten { grid-template-columns: 1fr 1fr; }
  .details-drei { grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
  .textbreit .spalten { columns: 1; }
}
@media (max-width: 700px) {
  :root { --takt: 36px; }
  p { font-size: 17px; }
  /* Mehr lesen: mobil klappbar (JS entfernt open) */
  .js details.mehr > summary {
    display: inline-flex; align-items: center; min-height: 44px; margin-top: 8px; cursor: pointer; list-style: none;
    font-family: var(--grotesk); font-weight: 600; font-size: 15px; gap: 8px;
    background: linear-gradient(var(--gruen), var(--gruen)) no-repeat 0 calc(50% + 12px) / 100% 2px;
  }
  .js details.mehr > summary::-webkit-details-marker { display: none; }
  .js details.mehr > summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
  .js details.mehr[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
  .js details.mehr[open] > summary { margin-bottom: 4px; }
  .js details.klapp > summary { display: flex; justify-content: space-between; width: 100%; pointer-events: auto; margin: 0; padding: 0; background: none; }
  .js details.klapp > summary::after { margin-left: auto; }
  .js .fakten + details.mehr { margin-top: 4px; }
  .situation { display: grid; grid-template-columns: 120px 1fr; gap: 6px 16px; align-items: start; }
  .situation .bild { grid-row: 1 / 3; }
  .situation .bild img { aspect-ratio: 4 / 5; }
  .situation .bild figcaption { display: none; }
  .situation h3 { margin-top: 0; font-size: 18px; }
  .situation p { font-size: 16px; }
  .situationen { gap: 28px; }
  .stimmen { display: block; }
  .stimme.gross { margin-bottom: 24px; }
  .stimmen-klein { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .stimmen-klein::-webkit-scrollbar { display: none; }
  .stimmen-klein .stimme { flex: 0 0 86%; scroll-snap-align: start; border-top: 1px solid var(--hairline); padding-top: 16px; }
  .stimmen-klein .stimme p { font-size: 16px; }
  .stimme.gross p { font-size: 20px; }
  .direkt-zeiten { display: none; }
  .fuss { padding-top: 48px; }
  .fuss-spalte details.klapp { border-top: 1px solid var(--hairline-dunkel); }
  .fuss-spalte details.klapp > summary { min-height: 48px; align-items: center; margin: 0; }
  .fuss-spalte details.klapp > summary::after { border-color: #fff; }
  .fuss .fuss-titel { margin-bottom: 0; }
  .fuss-spalten { gap: 0; }
  .fuss-marke { margin-bottom: 28px; }
  .fuss-spalte:last-child { margin-top: 28px; }
  .fuss ul { padding-bottom: 8px; }
  .fuss ul a { min-height: 44px; padding: 10px 0; }
  .socket { margin-top: 40px; }
  .direkt { border-top: 0; padding-top: 0; }
  .dunkel .js details.mehr > summary, .js .dunkel details.mehr > summary { color: #fff; }
  /* Hero mobil: Bühne 1:1, Unterschrift unter dem Bild, Balken rechts oben im Bild */
  .kennzeile { display: none; }
  .hero-text { padding: 20px 0 24px; }
  .hero .leuchtbanner { width: 100%; }
  .hero .leuchtbanner picture img, .hero .leuchtbanner .wf-an { height: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 22% center; }
  .hero .leuchtbanner picture img { height: auto; }
  .hero .leuchtbanner.hero-bild-breit picture img { aspect-ratio: 4 / 3; }
  .hero .leuchtbanner .bildzeile { left: var(--rand); font-size: 13px; }
  .seit-zahl { font-size: 44px; }
  .subnav-titel { display: none; }
  .moin-raster { grid-template-columns: 1fr; gap: 32px; }
  .moin-kopf, .moin-text, .ueberblick { grid-column: auto; grid-row: auto; }
  .ueberblick ol { columns: 1; }
  /* Showcase mobil: 6 Kacheln, Unterschrift unter dem Bild */
  .sc-raster { grid-template-columns: 1fr 1fr; gap: 16px 12px; }
  .sc a { display: grid; grid-template-rows: auto auto; }
  .sc-text { position: static; transform: none; background: none; padding: 8px 0 0; font-size: 14px; line-height: 1.3; }
  .sc-text b { font-size: 15px; }
  .beliebt-liste { display: flex; overflow-x: auto; gap: 12px; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
  .beliebt-liste::-webkit-scrollbar { display: none; }
  .beliebt-liste a { flex: 0 0 62%; scroll-snap-align: start; }
  .streifen { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .streifen::-webkit-scrollbar { display: none; }
  .streifen figure { flex: 0 0 78%; scroll-snap-align: start; }
  .streifen figure img { aspect-ratio: 4 / 3; }
  .mobil-weg { display: none; }
  .karte { padding: 20px 0 0; border: 0; background: transparent; }
  .details-drei { grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
  .details-drei img { aspect-ratio: 1 / 1; }
  .details-drei figcaption { font-size: 14px; }
  .details-drei figcaption b { display: block; margin: 0; }
  .licht-paar { grid-template-columns: 1fr; }
  .fuss-spalten { grid-template-columns: 1fr; gap: 32px; }
  .kontaktzeile.gross { font-size: 20px; }
  .kontaktzeile.gross a { overflow-wrap: anywhere; }
  .leuchtbanner .bildzeile { position: static; padding: 10px var(--rand) 0; }
  .leuchtbanner img { aspect-ratio: 16 / 11; object-fit: cover; object-position: 28% 40%; }
  .erfahrung .band img { aspect-ratio: 3 / 2; }
  .hero-aktionen { gap: 20px; }
  .fakten.zeile { grid-template-columns: 1fr; }
  .fakten.zeile li { border-top: 1px solid var(--hairline); padding: 11px 0 11px 22px; }
  .fakten.zeile li:first-child { border-top: 0; }
  .fakten.zeile li::before { top: 18px; }
}
@media (max-width: 420px) {
  h1 { font-size: clamp(34px, 10.5vw, 42px); font-stretch: 100%; }
}

/* ---------- 7 Unterseiten (Muster: Lichtwerbung) ---------- */
.profil-raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px 24px; }
.profil .bild img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.profil h4 { font-family: var(--grotesk); font-weight: 700; font-size: 18px; margin: 14px 0 6px; }
.fakten.klein { font-size: 15px; }
.fakten.klein li { padding: 7px 0 7px 20px; }
.fakten.klein li::before { top: 13px; width: 8px; height: 8px; }
.brotkrumen a { color: inherit; text-decoration: none; }
.brotkrumen a:hover { text-decoration: underline; text-decoration-color: var(--gruen); text-underline-offset: 3px; }
.hero-unterseite .hero-text { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
.moin-neben { grid-column: 1; display: grid; gap: 28px; justify-items: start; }
.moin-raster:has(.moin-neben) { grid-template-rows: auto 1fr; }
.erf-kopf details.mehr { margin-top: 24px; }
.moin-neben .fakten { width: 100%; }
.zitat { margin: 0; font-family: var(--serif); font-style: italic; font-size: 20px; line-height: 1.45; color: var(--neben); border-left: 3px solid var(--gruen); padding-left: 18px; max-width: 40ch; }
.kontakt-kompakt { background: var(--weiss); }
.kontakt-kompakt .kontakt-raster { align-items: center; }
.kontakt-kompakt .direkt { border-top: 0; padding-top: 0; }
.kontakt-kompakt .kontaktzeile.gross { margin: 0 0 20px; }
.kontakt-kompakt .direkt-liste .knopf { max-width: 320px; }
.produkt.weiss { background: var(--weiss); }
.produkt-kopf { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 32px 64px; align-items: center; }
.produkt-kopf.rechts { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.produkt-titel h2 { overflow-wrap: anywhere; hyphens: auto; }
.produkt-kopf.ohne-bild { grid-template-columns: minmax(0, 1fr); }
.produkt-kopf.ohne-bild h2 { max-width: 22ch; }
.produkt-cta { margin-top: 32px; }
.leistung-raster.einspaltig { grid-template-columns: minmax(0, 1fr); }
.leistung-raster.einspaltig .leistung-neben { display: none; }
.leistung-raster.einspaltig .leistung-text p { max-width: 70ch; }
.situationen.vier { grid-template-columns: repeat(4, 1fr); }
.situationen.vier h3 { font-size: 18px; }
.welche-h3 { margin-top: 18px; }
.moin-listen { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 32px 64px; margin-top: 8px; }
@media (max-width: 700px) { .moin-listen { grid-template-columns: 1fr; gap: 24px; } }
.welche .hinweis-satz { margin-top: 40px; max-width: 60ch; }
.erf-rechts { display: grid; gap: 24px; align-content: start; }
.erf-rechts .erf-bild img { aspect-ratio: 2 / 1; }
.erf-kopf h3 { margin-top: 18px; }
.produkt-kopf.rechts .produkt-bild { order: 2; }
.produkt-bild img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; }
.produkt-titel h3 { margin-top: 18px; }
.produkt .leistung-raster { margin-top: 48px; }
.listen-paar { gap: 32px; }
.listen-titel { font-family: var(--grotesk); font-weight: 700; font-size: 16px; margin-bottom: 10px; }
.karte-neben .kontakt-satz { margin-top: 0; }
.karte-neben .kontaktzeile.gross { margin-bottom: 0; }
.galerie .sc a { cursor: zoom-in; }
.lightbox { position: fixed; inset: 0; background: rgba(20,20,20,.94); display: none; align-items: center; justify-content: center; z-index: 1000; padding: 24px; cursor: zoom-out; }
.lightbox.offen { display: flex; }
.lightbox img { max-width: 100%; max-height: 92vh; box-shadow: 0 10px 50px rgba(0,0,0,.5); }
.lightbox .schliessen { position: absolute; top: 12px; right: 16px; width: 44px; height: 44px; color: #fff; font-size: 34px; line-height: 1; background: none; border: 0; cursor: pointer; }
@media (max-width: 900px) {
  .hero-unterseite .hero-text { grid-template-columns: 1fr; }
  .profil-raster { grid-template-columns: 1fr 1fr; }
  .situationen.vier { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .situationen.vier { grid-template-columns: 1fr; }
  .produkt-kopf, .produkt-kopf.rechts { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .produkt-kopf.rechts .produkt-bild { order: 0; }
  .listen-paar { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .listen-paar { grid-template-columns: 1fr; }
  .profil-raster { grid-template-columns: 1fr; }
  .zitat { font-size: 18px; }
}

/* ---------- Über uns (Schema G, 27.10.2026) ---------- */
.hero .leuchtbanner.hero-bild-mittel picture img { aspect-ratio: 2 / 1; object-fit: cover; height: auto; }
.generationen-liste { list-style: none; margin: 0; padding: 0; counter-reset: gen; font-family: var(--grotesk); font-size: 16px; line-height: 1.4; }
.generationen-liste li { counter-increment: gen; display: grid; grid-template-columns: 36px 1fr; gap: 0 12px; padding: 12px 0; border-top: 1px solid var(--hairline); color: var(--neben); align-items: baseline; }
.generationen-liste li::before { grid-row: 1 / 3; }
.generationen-liste li b, .generationen-liste li span { grid-column: 2; }
.generationen-liste li:last-child { border-bottom: 1px solid var(--hairline); }
.generationen-liste li::before { content: counter(gen); font-weight: 800; font-stretch: 125%; font-size: 22px; line-height: 1; color: var(--gruen-signal); }
.generationen-liste b { display: block; color: var(--dunkel); font-weight: 700; }
.chronik { padding: var(--takt) 0; background: var(--weiss); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.zeitstrahl { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px 40px; }
.zeit-block { position: relative; padding-top: 18px; border-top: 3px solid var(--gruen); }
.zeit-jahr { font-family: var(--grotesk); font-weight: 800; font-stretch: 125%; font-size: clamp(40px, 3.6vw, 56px); line-height: 1; letter-spacing: -0.02em; margin: 0 0 16px; color: var(--dunkel); }
.zeit-block .fakten li:first-child { border-top: 0; }
.chronik-fotos-titel { margin: 64px 0 24px; font-family: var(--grotesk); font-size: 20px; }
.chronik-fotos { grid-template-columns: repeat(3, 1fr); gap: 24px 20px; }
.chronik-fotos .sc { background: var(--papier); }
.chronik-fotos figure { margin: 0; }
.chronik-fotos .sc-bild img { aspect-ratio: 4 / 3; }
.chronik-fotos .hoch .sc-bild img { object-fit: contain; background: var(--papier); }
.chronik-fotos figcaption { padding: 10px 2px 0; font-family: var(--grotesk); font-size: 14px; line-height: 1.35; color: var(--neben); }
@media (max-width: 1100px) { .zeitstrahl { grid-template-columns: 1fr 1fr; gap: 40px 32px; } }
@media (max-width: 700px) {
  .hero .leuchtbanner.hero-bild-mittel picture img { aspect-ratio: 4 / 3; }
  .zeitstrahl { grid-template-columns: 1fr; gap: 32px; }
  .chronik-fotos { grid-template-columns: 1fr 1fr; gap: 20px 12px; }
  .chronik-fotos-titel { margin-top: 48px; }
}

/* ---------- Restliche Seiten: Schemata H–M (27.10.2026) ---------- */
/* Hero ohne Bild */
.hero-nur-text { border-bottom: 1px solid var(--hairline); }
.hero-links .referenz-kat { margin-top: 18px; font-family: var(--grotesk); font-size: 15px; color: var(--neben); }
.hero-links .referenz-kat a { color: var(--dunkel); font-weight: 600; text-decoration: none; background: linear-gradient(var(--gruen), var(--gruen)) no-repeat 0 100% / 100% 2px; }
.hero-links .unterzeile.referenz-kat { font-family: var(--grotesk); }
.hero-hinweis { margin-top: 18px; max-width: 60ch; font-size: 16px; color: var(--neben); }
.hero-aktionen-404 { flex-wrap: wrap; }
/* Subnav nur mit Brotkrumen */
.subnav.nur-krumen .subnav-innen { min-height: 40px; }
.subnav.nur-krumen .brotkrumen { display: block; }
/* Referenz-Galerie: Hochformate über zwei Zeilen */
.referenz-galerie { grid-auto-flow: dense; grid-auto-rows: auto; }
.referenz-galerie .sc-bild img { aspect-ratio: 3 / 2; }
.referenz-galerie .hoch { grid-row: span 2; }
.referenz-galerie .hoch .sc-bild, .referenz-galerie .hoch a { height: 100%; }
.referenz-galerie .hoch .sc-bild img { aspect-ratio: auto; height: 100%; object-fit: cover; }
.moin-text .fakten { margin-top: 28px; max-width: 60ch; }
.moin-text > .fakten:first-child { margin-top: 0; }
/* Übersichten: Karten mit sichtbarem Text */
.uebersicht .einleitung { margin-bottom: 40px; }
.karten .sc { background: transparent; }
.karten .sc a { display: grid; grid-template-rows: auto auto; }
.karten .sc-text { position: static; transform: none; background: none; padding: 12px 0 0; font-size: 14px; line-height: 1.35; }
.karten .sc-text b { font-size: 16px; margin-bottom: 4px; }
.karten-ratgeber { grid-template-columns: repeat(3, 1fr); gap: 36px 28px; }
.karten-ratgeber .sc-bild img { aspect-ratio: 2 / 1; }
.karten-ratgeber .sc-text b { font-family: var(--grotesk); font-size: 18px; line-height: 1.3; }
.karten-ratgeber .sc-text { font-family: var(--serif); font-size: 15px; color: var(--neben); }
/* Artikel (Ratgeber, Rechtstexte) */
.artikel { padding: var(--takt) 0; }
.artikel-raster { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 48px 80px; align-items: start; }
.artikel-text { max-width: 68ch; }
.artikel-text h2 { font-size: clamp(26px, 2.6vw, 36px); line-height: 1.1; margin-top: 48px; }
.artikel-text h2:first-child { margin-top: 0; }
.artikel-text h2.klein { font-family: var(--grotesk); font-size: 20px; line-height: 1.3; margin-top: 36px; }
.artikel-text h3 { margin-top: 28px; }
.artikel-text h2 + p, .artikel-text h3 + p { margin-top: 14px; }
.artikel-text p + ul, .artikel-text p + ol, .artikel-text ul + p, .artikel-text ol + p { margin-top: 18px; }
.artikel-text ol { padding-left: 24px; font-family: var(--serif); font-size: 17px; line-height: 1.6; }
.artikel-text ol li { margin-bottom: 10px; }
.artikel-text ol.ut { list-style: none; padding: 0; margin-top: 36px; }
.artikel-text ol.ut li strong { font-family: var(--grotesk); font-size: 20px; line-height: 1.3; }
.artikel-text .fakten { max-width: none; }
.artikel-cta { margin-top: 40px; }
.artikel-neben { position: sticky; top: calc(var(--kopf-h) + var(--subnav-h) + 24px); display: grid; gap: 28px; }
.artikel-neben .listen-ueber { font-size: 22px; line-height: 1.2; }
.artikel-neben .liste-block a { color: var(--dunkel); text-decoration: none; background: linear-gradient(var(--gruen), var(--gruen)) no-repeat 0 100% / 100% 2px; }
.artikel-neben .liste-block a:hover { background-size: 100% 3px; }
.artikel-schmal .container { max-width: 1100px; }
.artikel-schmal .artikel-text { max-width: 72ch; }
.artikel-schmal .artikel-text > p:first-child { font-size: 19px; }
/* FAQ-Seite */
.faq.papier { background: var(--papier); }
.faq-kopf { display: grid; gap: 24px; justify-items: start; }
.faq-kopf h2 { position: sticky; top: calc(var(--kopf-h) + var(--subnav-h) + 32px); }
.faq-knopf { margin-top: 4px; }
/* Kontakt */
.kontakt-seite-raster { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px 80px; align-items: start; }
.einleitung.gross { font-size: 19px; }
.kontakt-seite-text h2 { font-size: clamp(26px, 2.6vw, 36px); margin-top: 48px; }
.kontakt-seite-text .zeiten { margin-top: 16px; font-family: var(--grotesk); font-weight: 600; font-size: 18px; line-height: 1.7; }
.adresse-karte h2 { font-size: clamp(22px, 2vw, 28px); line-height: 1.15; }
.adresse-karte .adresse-zeile { margin-top: 16px; font-family: var(--grotesk); font-size: 17px; line-height: 1.5; }
.adresse-karte .kontaktzeile { margin-top: 20px; }
.adresse-karte .knopf { margin-top: 28px; }
.anfahrt { padding: var(--takt) 0; background: var(--weiss); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.karte-consent { display: grid; place-content: center; text-align: center; gap: 8px; min-height: 320px; padding: 32px; border: 2px dashed var(--hairline); background: var(--papier); cursor: pointer; }
.karte-consent strong { font-family: var(--grotesk); font-size: 20px; }
.karte-consent p { max-width: 48ch; font-size: 15px; color: var(--neben); }
.karte-consent:hover { border-color: var(--gruen-signal); }
.anfahrt .karte iframe { width: 100%; height: 420px; border: 0; display: block; }
.anfahrt .karte:not(.karte-consent) { padding: 0; }
.kontakt-haupt .kontakt-satz + .kontakt-satz { font-size: 17px; }
@media (max-width: 1100px) {
  .artikel-raster, .kontakt-seite-raster { grid-template-columns: 1fr; gap: 40px; }
  .artikel-neben { position: static; }
  .karten-ratgeber { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .karten-ratgeber { grid-template-columns: 1fr; gap: 28px; }
  .referenz-galerie .hoch { grid-row: auto; }
  .referenz-galerie .hoch .sc-bild img { aspect-ratio: 3 / 4; }
  .faq-kopf h2 { position: static; }
  .karte-consent { min-height: 220px; padding: 24px 16px; }
  .anfahrt .karte iframe { height: 320px; }
}
/* Mobil: lange Wörter/URLs dürfen umbrechen (Referenztitel, Rechtstexte, Ratgeber) */
@media (max-width: 700px) {
  .hero-unterseite .hero-links h1 { hyphens: auto; overflow-wrap: anywhere; }
  .artikel-text, .moin-text, .fakten, .faq-liste, .kontakt-haupt, .artikel-neben, .sc-text { overflow-wrap: anywhere; }
  .artikel-text a, .faq-inhalt a { word-break: break-word; }
}
@media (max-width: 700px) {
  .moin-raster > * { min-width: 0; }
  .moin-kopf h2, .abschnitt-kopf h2, .kontakt-haupt h2 { overflow-wrap: anywhere; hyphens: auto; }
}
/* Kontaktseite: Schlussblock ohne zweite Kontaktzeile (28.10.2026) */
.kontakt-schluss h2 { max-width: 20ch; }
.kontakt-schluss .kontakt-satz { max-width: 62ch; margin-top: 24px; }
.kontakt-schluss .kontakt-satz + .kontakt-satz { margin-top: 14px; font-size: 18px; }

/* Kontakt: feste Anfahrtskarte mit Link (28.10.2026) */
.karte-bild { display: block; border: 1px solid var(--hairline); }
.karte-bild img { display: block; width: 100%; height: auto; }
.karte-bild:hover { border-color: var(--gruen-signal); }