/*
 * BGB Redesign 2026-11 (freigegeben 2026-11-11)
 * Nur der Inhalt zwischen Kopf (Menü, Hero/Video) und Fuß. Kopf und Fuß bleiben unverändert.
 * Leitidee: „Gebaut wie ein Gerüst“ – ein festes Raster, feine Konstruktionslinien, Rot nur als Signal.
 * Schriften: die vorhandenen (Generalsans für Überschriften, Open Sans für Text). Keine neuen Farben außer
 * dem bestehenden Hellgrau #f3f3f3 (--light-grey) und neutralen Linien.
 */

/* Maße gelten auch für Seiten, die nur den Gerüst-Hintergrund übernehmen (.rd-host, z. B. Kontakt) */
.rd, .rd-host {
  --rd-max: 1240px;
  --rd-pad: clamp(20px, 5vw, 64px);
  --rd-space: clamp(64px, 8.5vw, 128px);
}
.rd {
  --rd-red: #e1111f;
  --rd-ink: #000;
  --rd-text: #1b1b1b;
  --rd-muted: #555;
  --rd-line: #d4d4d4;
  --rd-rule: #8c8c8c;
  --rd-panel: #f3f3f3;
  --rd-radius: 14px;
  --rd-gap: clamp(24px, 4.2vw, 72px);
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: #fff;
  color: var(--rd-text);
  font-family: Opensans, 'Open Sans', Arial, sans-serif;
  font-size: clamp(1rem, .94rem + .25vw, 1.125rem);
  font-weight: 400;
  line-height: 1.6;
  padding-block: var(--rd-space);
}
.rd--sheet { border-radius: 20px 20px 0 0; }
/* Die Webflow-Grundregeln färben jedes p weiß (#fffc) und setzen Größe und Gewicht – im neuen Inhalt zurück auf den Text. */
.rd :where(p, li) { color: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; margin: 0; padding: 0; }
.rd :where(figure) { margin: 0; }


.rd-wrap {
  position: relative;
  z-index: 1;
  max-width: var(--rd-max);
  margin-inline: auto;
  padding-inline: var(--rd-pad);
}
.rd-sec { position: relative; }
.rd-sec + .rd-sec { margin-top: var(--rd-space); }
.rd-sec--tight + .rd-sec, .rd-sec + .rd-sec--tight { margin-top: clamp(40px, 5vw, 72px); }

/* ---------- Typografie ---------- */
.rd h1, .rd h2, .rd h3 {
  margin: 0;
  color: var(--rd-ink);
  font-family: Generalsans, 'Open Sans', Arial, sans-serif;
  font-weight: 700;
  text-transform: none;
  letter-spacing: -0.012em;
  /* keine automatische Silbentrennung: Safari trennt sonst auch kurze Wörter („Ge-rüst“), die in die Zeile passen.
     Größen so gewählt, dass das längste Wort bei jeder Breite ganz passt; break-word nur als Notnagel für sehr lange Wörter aus dem CMS. */
  overflow-wrap: break-word;
  -webkit-hyphens: manual;
  hyphens: manual;
}
.rd-h1 { font-size: clamp(2.25rem, 1.25rem + 2.7vw, 3.875rem); line-height: 1.03; }
.rd-h1--sm { font-size: clamp(2rem, 1.3rem + 1.8vw, 3.125rem); line-height: 1.05; }
.rd-h2 { font-size: clamp(1.875rem, 1.2rem + 1.9vw, 3rem); line-height: 1.06; }
.rd-h3 { font-size: clamp(1.375rem, 1.05rem + .85vw, 1.875rem); line-height: 1.12; }
.rd-kicker {
  display: block;
  margin-bottom: clamp(14px, 1.4vw, 20px);
  color: var(--rd-red);
  font-family: Opensans, 'Open Sans', Arial, sans-serif;
  font-size: .8125rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.rd-prose p { margin: 0 0 1em; max-width: 62ch; }
.rd-prose p:last-child { margin-bottom: 0; }
.rd-prose a { color: var(--rd-red); text-decoration: underline; text-underline-offset: 3px; }
/* längere Produkttexte: Zwischenüberschriften und Listen aus dem CMS */
.rd-prose h3 { margin: 1.7em 0 .55em; color: var(--rd-ink); font: 700 clamp(1.125rem, 1rem + .4vw, 1.3125rem)/1.25 Generalsans, 'Open Sans', Arial, sans-serif; letter-spacing: -.005em; text-transform: none; }
.rd-prose ul { margin: 0 0 1em; padding-left: 1.15em; max-width: 64ch; }
.rd-prose li { margin: .35em 0; padding-left: .2em; }
.rd-prose li::marker { color: var(--rd-red); }
.rd-grid--specs .rd-prose > h3:first-child { margin-top: 0; }
.rd-grid--specs .rd-prose ul { max-width: none; }
.rd-prose strong { color: var(--rd-ink); font-weight: 700; }
.rd-lead { font-size: clamp(1.0625rem, .98rem + .32vw, 1.25rem); line-height: 1.55; }

/* ---------- Gerüst im Hintergrund ---------- */
.rd-deco {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  background: url('../img/geruest-turm.svg') no-repeat right top / contain;
  opacity: .14;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
}
/* Ein Turm, auf allen Seiten gleich gesetzt (Wunsch 2026-11-11): Bezug ist die Oberkante des weißen Inhaltsbereichs
   (.rd bzw. .rd-host) und die rechte Kante des Inhaltsrasters – dort endet auch der graue Broschüren-Kasten der
   Startseite. Bündig ist die äußerste sichtbare Linie der Zeichnung (hinterer Ständer bei 622,5 von 640 Einheiten),
   nicht der leere Rand der Grafik: daher der Abzug von 17,5/640 der Breite. */
.rd-deco--page {
  --rd-tower-w: clamp(230px, 31vw, 470px);
  top: calc(var(--rd-space) * .45);
  right: calc((100% - min(100%, var(--rd-max))) / 2 + var(--rd-pad) - var(--rd-tower-w) * .02734);
  width: var(--rd-tower-w);
  aspect-ratio: 640 / 1418;
}
@media print { .rd-deco { display: none; } }
/* Handy: kein Gerüst im Hintergrund (Wunsch 2026-11-11); Tablet und Desktop behalten es */
@media (max-width: 767px) { .rd-deco { display: none; } }

/* Kontaktseite: nur der Gerüst-Turm im Hintergrund, sonst bleibt die Seite unverändert */
.rd-host { position: relative; isolation: isolate; overflow: clip; }

/* ---------- Einstieg: Titel | Linie | Text ---------- */
.rd-intro {
  display: grid;
  grid-template-columns: minmax(0, 5.6fr) minmax(0, 6.4fr);
  gap: var(--rd-gap);
  align-items: center;
  padding-block: clamp(0px, 3vw, 40px);
}
/* Breite der Überschriftenspalte – damit schrumpft eine H1 mit sehr langem Wort, statt es mitten im Wort zu trennen */
.rd-intro { --rd-intro-col: calc((min(100vw, var(--rd-max)) - 2 * var(--rd-pad) - var(--rd-gap)) * 5.6 / 12); }
.rd-intro .rd-h1[style*="--rd-h1-chars"] { font-size: min(clamp(2.25rem, 1.25rem + 2.7vw, 3.875rem), calc(var(--rd-intro-col) / (var(--rd-h1-chars) * .66))); }
.rd-intro__text {
  border-left: 1px solid var(--rd-rule);
  padding-left: var(--rd-gap);
  padding-block: 6px;
}
.rd-intro__text .rd-actions { margin-top: 24px; }

/* ---------- Bild/Text-Paar ---------- */
.rd-feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--rd-gap);
  align-items: center;
}
.rd-feature--wide-media { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.rd-feature--solo { grid-template-columns: minmax(0, 1fr); }
.rd-feature--solo .rd-feature__text { max-width: 760px; }

/* Brotkrumen (Produktseiten) */
.rd-crumbs { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-bottom: clamp(28px, 3.4vw, 48px); color: var(--rd-muted); font-size: .875rem; line-height: 1.4; }
.rd-crumbs a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.rd-crumbs a:hover { color: var(--rd-red); }
.rd-crumbs [aria-current] { color: var(--rd-ink); font-weight: 600; }
.rd-title-link { color: inherit; text-decoration: none; }
.rd-title-link:hover { color: var(--rd-red); }
.rd-feature--flip > .rd-feature__media { order: 2; }
.rd-feature__text > * + * { margin-top: 20px; }
.rd-feature__text .rd-h2 + .rd-prose, .rd-feature__text .rd-h3 + .rd-prose { margin-top: 18px; }

.rd-media {
  position: relative;
  overflow: hidden;
  border-radius: var(--rd-radius);
  background: var(--rd-panel);
  aspect-ratio: 4 / 3;
}
.rd-media img, .rd-media video, .rd-media iframe {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rd-media--video { aspect-ratio: 16 / 9; }
.rd-media--video > * { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ---------- 2×2-Raster mit Haarlinien ---------- */
.rd-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rd-grid__item {
  position: relative;
  border-top: 1px solid var(--rd-line);
  padding: clamp(28px, 3vw, 44px) clamp(24px, 3.4vw, 56px) clamp(32px, 3.4vw, 52px) 0;
}
.rd-grid__item:nth-child(2n) { padding-left: clamp(24px, 3.4vw, 56px); padding-right: 0; }
.rd-grid__item:nth-child(2n)::before {
  content: '';
  position: absolute;
  left: 0;
  top: clamp(28px, 3vw, 44px);
  bottom: clamp(12px, 1.6vw, 24px);
  width: 1px;
  background: var(--rd-line);
}
.rd-grid__item .rd-h3 { margin-bottom: 14px; }
.rd-grid__item .rd-prose p { max-width: 52ch; }

/* ---------- Fotoreihe ---------- */
.rd-photos {
  display: grid;
  grid-template-columns: 1.35fr 1.05fr .9fr;
  gap: clamp(12px, 1.6vw, 24px);
}
.rd-photos--2 { grid-template-columns: 1fr 1fr; }
.rd-photos .rd-media { aspect-ratio: auto; height: clamp(190px, 23vw, 340px); }

/* ---------- Links und Knöpfe ---------- */
.rd-link {
  display: inline-block;
  padding-bottom: 3px;
  border-bottom: 2px solid currentColor;
  color: var(--rd-red);
  font-family: Generalsans, 'Open Sans', Arial, sans-serif;
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.25;
  text-decoration: none;
}
.rd-link--sm { border-bottom: 0; padding-bottom: 0; font-size: .9375rem; }
.rd-arrow { display: inline-block; width: 1.05em; height: .76em; margin-left: .4em; vertical-align: -.04em; overflow: visible; transition: transform .2s ease; }
.rd-link:hover .rd-arrow, .rd-plink:hover .rd-arrow { transform: translateX(4px); }
.rd a:focus-visible { outline: 2px solid var(--rd-red); outline-offset: 4px; border-radius: 4px; }

.rd-actions { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; }
.rd-close { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; justify-content: space-between; }

/* ---------- Kopfzeile eines Abschnitts ---------- */
.rd-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 24px;
  margin-bottom: clamp(24px, 3vw, 44px);
}

/* ---------- Produkte als Links (Startseite, vorerst ohne Bilder) ---------- */
.rd-plinks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(16px, 2vw, 28px); list-style: none; margin: 0; padding: 0; }
.rd-plink {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 2px 24px 0;
  border-top: 1px solid var(--rd-ink);
  border-bottom: 1px solid var(--rd-line);
  color: var(--rd-ink);
  text-decoration: none;
  font: 700 clamp(1.1875rem, 1rem + .55vw, 1.5rem)/1.2 Generalsans, 'Open Sans', Arial, sans-serif;
}
.rd-plink .rd-arrow { flex: none; color: var(--rd-red); }
.rd-plink:hover .rd-plink__name { color: var(--rd-red); }

/* ---------- Neuigkeiten + Broschüre ---------- */
.rd-split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--rd-gap); align-items: stretch; }
.rd-news .rd-h2 { margin-bottom: clamp(18px, 2vw, 28px); }
.rd-news__date { display: block; color: var(--rd-red); font-size: .9375rem; font-weight: 700; margin-bottom: 6px; }
.rd-news__title a { color: inherit; text-decoration: none; }
.rd-news__title a:hover { text-decoration: underline; text-underline-offset: 4px; }
.rd-news__text { margin-top: 12px; max-width: 58ch; }
.rd-news__img { display: block; margin-top: 24px; max-width: 460px; }
.rd-news__img img { display: block; width: 100%; height: auto; }
.rd-news__links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; margin-top: 24px; max-width: 460px; }

.rd-panel {
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  background: var(--rd-panel);
  padding: clamp(28px, 3vw, 44px);
  color: inherit;
  text-decoration: none;
}
.rd-panel p { margin: 10px 0 0; }
.rd-brochure { align-items: center; justify-content: center; text-align: center; }
.rd-brochure p { max-width: 30ch; }
/* Titelblatt: steht ruhig (kein Schweben, Wunsch 2026-11-11). Mit Maus neigt es sich beim Überfahren leicht zum Zeiger
   (rd-tilt.js setzt --rx/--ry und die Schatten-Versätze --sx/--sy) und richtet sich beim Weggehen weich wieder auf.
   Aufbau: Rahmen (Bodenschatten) > Bühne (Perspektive) > Neige-Ebene > Bild – der Bodenschatten bleibt am Boden. */
.rd-brochure__frame { position: relative; display: block; width: min(100%, 240px); margin: 34px auto 22px; }
.rd-brochure__stage { position: relative; z-index: 1; display: block; perspective: 900px; }
.rd-brochure__tilt {
  display: block;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .7s cubic-bezier(.2, .8, .2, 1);
}
.rd-brochure__cover {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08), calc(var(--sx, 0px) * .6) calc(12px + var(--sy, 0px) * .6) 24px -14px rgba(0, 0, 0, .32);
  transition: box-shadow .7s cubic-bezier(.2, .8, .2, 1);
}
/* Schatten am Boden: wandert beim Neigen zur Gegenseite (translate per Variable – läuft auf der Grafikkarte) */
.rd-brochure__frame::after {
  content: '';
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: -16px;
  height: 20px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .34);
  filter: blur(9px);
  opacity: .9;
  translate: var(--sx, 0px) var(--sy, 0px);
  transition: translate .7s cubic-bezier(.2, .8, .2, 1);
}
/* solange der Zeiger darüber ist, folgt die Neigung schnell; beim Weggehen gilt wieder die lange Rückkehr oben */
.rd-brochure.is-tilting .rd-brochure__tilt { transition-duration: .18s; }
.rd-brochure.is-tilting .rd-brochure__cover { transition-duration: .18s; }
.rd-brochure.is-tilting .rd-brochure__frame::after { transition-duration: .18s; }

/* ---------- Häufige Fragen ---------- */
.rd-faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--rd-gap); align-items: start; }
.rd-faq__list details { border-top: 1px solid var(--rd-line); }
.rd-faq__list details:last-child { border-bottom: 1px solid var(--rd-line); }
.rd-faq__list summary {
  position: relative;
  padding: 22px 48px 22px 0;
  list-style: none;
  cursor: pointer;
  color: var(--rd-ink);
  font: 700 1.1875rem/1.3 Generalsans, 'Open Sans', Arial, sans-serif;
}
.rd-faq__list summary::-webkit-details-marker { display: none; }
.rd-faq__list summary::after {
  content: '+';
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--rd-red);
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1;
}
.rd-faq__list details[open] summary::after { content: '–'; }
.rd-faq__a { padding: 0 48px 24px 0; }

/* ---------- Team (Mir sind Grüscht) ---------- */
.rd-team { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 28px; list-style: none; margin: 0; padding: 0; }
.rd-team img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--rd-radius); }
.rd-team__name { display: block; margin-top: 12px; font: 700 1.125rem/1.2 Generalsans, 'Open Sans', Arial, sans-serif; color: var(--rd-ink); }
.rd-team__role, .rd-team a { display: block; color: var(--rd-muted); font-size: .9375rem; }

/* ---------- Tablet und Handy ---------- */
@media (max-width: 900px) {
  .rd-intro, .rd-feature, .rd-feature--wide-media, .rd-split, .rd-faq { grid-template-columns: minmax(0, 1fr); }
  .rd-intro { gap: 20px; min-height: 0; --rd-intro-col: calc(min(100vw, var(--rd-max)) - 2 * var(--rd-pad)); }
  .rd-intro__text { border-left: 0; padding-left: 0; padding-block: 0; }
  .rd-intro__text::before {
    content: '';
    display: block;
    width: 56px;
    height: 2px;
    margin-bottom: 20px;
    background: var(--rd-red);
  }
  .rd-feature { gap: 24px; }
  .rd-feature > .rd-feature__media, .rd-feature--flip > .rd-feature__media { order: -1; }
  .rd-deco--page { --rd-tower-w: 240px; opacity: .1; top: calc(var(--rd-space) - 40px); }
}
@media (max-width: 700px) {
  .rd-grid { grid-template-columns: minmax(0, 1fr); }
  .rd-grid__item, .rd-grid__item:nth-child(2n) { padding: 26px 0 30px; }
  .rd-grid__item:nth-child(2n)::before { display: none; }
  .rd-photos { grid-template-columns: 1fr 1fr; }
  .rd-photos > :first-child { grid-column: 1 / -1; }
  .rd-photos--2 > :first-child { grid-column: auto; }
  .rd-photos .rd-media { height: auto; aspect-ratio: 4 / 3; }
  .rd-plinks { grid-template-columns: minmax(0, 1fr); }
  .rd-plinks li + li .rd-plink { border-top: 0; }
  .rd-plink { padding: 18px 2px 18px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .rd *, .rd *::before, .rd *::after { transition: none !important; }
  .rd-brochure__tilt { transform: none; }
}

/* ---------- Startseite, Desktop: rundes Logo oben rechts ----------
   Das B im Header bleibt, wo es ist, und scrollt mit weg. Sobald es ganz aus dem Bild ist, gleitet oben rechts das runde
   Logo (wie auf den Unterseiten: .home-menu, 100 px, 20 px vom Rand, dreht sich) von oben herein und blendet auf;
   kommt das B im Header wieder ins Bild, blendet es aus. rd-seal.js schaltet nur die Klasse rd-dock-on (IntersectionObserver).
   Verborgen ist es per visibility – nicht fokussierbar und nicht vorgelesen. */
@media (min-width: 992px) {
  .rd-dock {
    opacity: 0;
    translate: 0 -32px;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .4s ease, translate .6s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .6s;
  }
  html.rd-dock-on .rd-dock {
    opacity: 1;
    translate: 0 0;
    visibility: visible;
    pointer-events: auto;
    transition: opacity .45s ease, translate .6s cubic-bezier(.2, .8, .2, 1), visibility 0s;
  }
}
@media (max-width: 991px) { .rd-dock { display: none; } }
@media (prefers-reduced-motion: reduce) { .rd-dock, html.rd-dock-on .rd-dock { transition: none; translate: none; } }