/* ==========================================================================
   BGB – own additions on top of the exported Webflow CSS (loaded last).
   Fonts: Open Sans variable (local, no Google Fonts request).
   ========================================================================== */

/* ---- "Open Sans" (Google-Fonts-Ersatz, lokal): variable Schrift, wdth 75–100 / wght 300–800.
   Die Webflow-eigenen Familien "Opensans", "Opensans Condensed", "Opensans Semicondensed" und
   "Generalsans" bleiben unangetastet – site.webflow.css definiert sie mit statischen Schnitten
   aus public/assets/fonts (1:1 wie im Export). ---- */
/* Open Sans upright: static faces (≈57 KB each, only the weights in use are downloaded) instead of the 274 KB variable
   font; the site uses no font-stretch, so nothing is lost. The italic variable face below stays as a rarely needed fallback. */
@font-face {
  font-family: "Open Sans";
  src: url("../fonts/OpenSans-Light.woff2") format("woff2"), url("../fonts/OpenSans-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("../fonts/OpenSans-Regular.woff2") format("woff2"), url("../fonts/OpenSans-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("../fonts/OpenSans-Medium.woff2") format("woff2"), url("../fonts/OpenSans-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("../fonts/OpenSans-SemiBold.woff2") format("woff2"), url("../fonts/OpenSans-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("../fonts/OpenSans-Bold.woff2") format("woff2"), url("../fonts/OpenSans-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("../fonts/OpenSans-Italic-VariableFont_wdth,wght.woff2") format("woff2"), url("../fonts/OpenSans-Italic-VariableFont_wdth,wght.woff") format("woff"),
       url("../fonts/OpenSans-Italic-VariableFont_wdth,wght.ttf") format("truetype");
  font-weight: 300 800;
  font-stretch: 75% 100%;
  font-style: italic;
  font-display: swap;
}

/* ---- Rich text output (editor HTML inside Webflow paragraph classes) ----
   The export keeps all copy in <p class="paragraph-…"> with <br><br> between paragraphs. The editor emits
   real <p>/<ul> elements inside that wrapper; site.webflow.css has a global p/li rule (17px, 500, white 80 %)
   which must not win over the wrapper's paragraph class → inherit everything from the wrapper. */
.rich p, .rich li, .rich ul, .rich ol { font: inherit; color: inherit; letter-spacing: inherit; }
.rich p { margin: 0 0 1.2em; margin-bottom: 1lh; } /* one blank line, like <br><br> in the export */
.rich p:last-child { margin-bottom: 0; }
.rich a { color: inherit; text-decoration: underline; }
.rich ul, .rich ol { margin: 0 0 1em; padding-left: 1.4em; text-align: left; }
.rich h2, .rich h3 { margin: 1.2em 0 .4em; line-height: 1.15; font-family: inherit; }
.rich h2 { font-size: 1.25em; }
.rich h3 { font-size: 1.1em; }
.rich img { max-width: 100%; height: auto; border-radius: 20px; }
.rich blockquote { margin: 0 0 1em; padding-left: 1em; border-left: 3px solid currentColor; }
.paragraph-mittig.rich ul, .paragraph-mittig.rich ol { display: inline-block; text-align: left; }
.bgb-product__image { display: block; margin: 1em auto 0; max-width: 100%; border-radius: 20px; }

/* ---- Brochure subheading: the export's global h3 rule sets uppercase; Julian wants normal case (2026-09-06) ---- */
.paragraph-center { text-transform: none; }

/* ---- Address block on the contact page ---- */
.bgb-address { font-style: normal; }
/* Links in the contact block (white section): without a colour they fell back to the browser link colour
   (periwinkle in dark mode, 2.4:1 on white). Design blue, 6.1:1 on white (Julian 2026-09-06: "Links in Blau"). */
.bgb-address a, .rl-checkbox-label-small a { color: #0a58ca; text-decoration: underline; text-underline-offset: .15em; text-decoration-thickness: 1px; }
.bgb-address a:hover, .rl-checkbox-label-small a:hover { color: #083f8f; }

/* ---- Contact form extras ---- */
/* reCAPTCHA gate (two-click consent) */
.bgb-captcha__gate { background: #fff; border: 1px solid rgba(0,0,0,.2); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.bgb-captcha__gate[hidden] { display: none; }
.bgb-captcha__text { margin: 0; font-size: .9rem; line-height: 1.45; color: #151619; }
.bgb-captcha__text a { color: #e1111f; }
.bgb-captcha__load { align-self: flex-start; padding: 10px 18px; font-size: .9rem; cursor: pointer; }
.bgb-captcha.is-required .bgb-captcha__gate { border-color: #e1111f; box-shadow: 0 0 0 3px rgba(225,17,31,.15); }
.bgb-captcha__widget:empty { display: none; }
.bgb-hp { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }
.bgb-form-errors { margin: .5em 0 0; padding-left: 1.2em; }
.rl-success-message[style*="display:block"], .rl-error-message[style*="display:block"] { margin-bottom: 1.5rem; }
/* Success message: Webflow's default was a grey box (#f4f4f4) with the body's white text (barely visible).
   Julian 2026-09-06: black on white, same format as the "Bürozeiten:" line (rl-text-style-medium + bold-text). */
.rl-success-message { background-color: #fff; padding: 0; }
.rl-success-text { color: var(--relume-library-lite--rl-black, #000); font-family: Generalsans, sans-serif; font-size: 1.125rem; font-weight: 600; line-height: 1.5; text-align: center; }
@media screen and (max-width: 767px) { .rl-success-text { font-size: 1rem; } }
.rl-button { cursor: pointer; }

/* ---- Menu button accessibility (keyboard) ---- */
.menu-wrapper:focus-visible, .home-menu:focus-within { outline: 3px solid #fff; outline-offset: 3px; }

/* ---- Skip link ---- */
.bgb-skip { position: absolute; left: -9999px; top: 0; background: #fff; color: #151619; padding: .5em 1em; z-index: 10000; }
.bgb-skip:focus { left: 1rem; top: 1rem; }

/* ---- Vimeo click-to-load facade (replaces the inline iframe embed) ---- */
.vimeo-wrap { width: 100%; position: relative; }
.vimeo-aspect { position: relative; width: 100%; aspect-ratio: 16 / 9; min-height: 220px; overflow: hidden; border-radius: 12px; background: transparent; }
/* native <video> in the same box (used when a video file is set instead of a Vimeo id) */
.vimeo-aspect video { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: contain; background: transparent; }
.vimeo-aspect:fullscreen, .vimeo-aspect:-webkit-full-screen { border-radius: 0; background: #000; }
.vimeo-aspect:fullscreen .vimeo-fullscreen { opacity: .95; }
.vimeo-aspect iframe { position: absolute; inset: 0; width: 100%; height: 100%; display: block; background: transparent; border: 0; }
.vimeo-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vimeo-poster--empty { background: linear-gradient(135deg, #b30d18, #e1111f); }
.vimeo-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; border: 0; padding: 0; margin: 0; background: transparent; cursor: pointer; z-index: 2; }
.vimeo-play { width: 78px; height: 78px; border-radius: 999px; background: rgba(0,0,0,.55); position: relative; box-shadow: 0 10px 30px rgba(0,0,0,.25); transition: transform .12s ease, opacity .15s ease; }
.vimeo-play::before { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-40%,-50%); width: 0; height: 0; border-top: 14px solid transparent; border-bottom: 14px solid transparent; border-left: 22px solid #fff; }
.vimeo-overlay:hover .vimeo-play { transform: scale(1.05); }
.vimeo-wrap.is-playing .vimeo-play { opacity: 0; transform: scale(.95); pointer-events: none; }
.vimeo-wrap.is-loaded .vimeo-poster, .vimeo-wrap.is-loaded .vimeo-note { display: none; }
.vimeo-fullscreen { position: absolute; right: 14px; bottom: 14px; width: 42px; height: 42px; border-radius: 999px; border: 0; background: rgba(0,0,0,.55); color: #fff; font-size: 18px; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 3; backdrop-filter: blur(4px); transition: background .15s ease, transform .1s ease; }
.vimeo-fullscreen:hover { background: rgba(0,0,0,.75); transform: scale(1.05); }
.vimeo-note { position: absolute; left: 12px; right: 70px; bottom: 10px; margin: 0; font-size: 12px; line-height: 1.3; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.6); z-index: 2; pointer-events: none; }
.vimeo-note a { color: #fff; pointer-events: auto; }
@media (max-width: 767px) { .vimeo-aspect { max-height: 60vh; min-height: 200px; } }
@supports (height: 1dvh) { @media (max-width: 767px) { .vimeo-aspect { max-height: 60dvh; } } }

/* ---- "Cookie-Einstellungen" re-open link sits in the footer row like the other legal links (row stays centred).
   The wider row would enlarge logo and certificates (sized as % of the grid column), so both are capped at the
   export's desktop sizes (382 px / 136 px at a 546 px column). ---- */
@media (min-width: 768px) {
  .rl_footer4_logo { max-width: min(70%, 382px); }
  .image-9 { max-width: min(25%, 136px); }
}
/* order in the footer row: AGB · Datenschutz · Impressum · Cookie-Einstellungen · Login · © … (the export gives the
   copyright order: 9999 = last; on mobile it pins it to row 4, so release that and keep it last there too) */
.bgb-cookie-link { order: 1; }
.bgb-login-link { order: 2; }
@media (max-width: 767px) { #w-node-_37eaefef-998c-e57e-d574-341b67078493-67078482 { grid-area: auto; order: 9999; } }

/* ---- Cookie consent banner: uses the export's flowappz markup/classes; only the hidden state is ours ---- */
.flowappz-cookie-consent-popup-16[hidden] { display: none; }
/* The flowappz script positioned the popup via inline styles: desktop bottom-right 20px, mobile (≤767px) centred 16px above the bottom edge. */
.flowappz-cookie-consent-popup-16 { inset: auto 20px 20px auto; }
@media (min-width: 768px) { .flowappz-cookie-consent-popup-16 { max-width: 440px; } } /* export: 400 px – slightly wider (Julian 2026-09-06); phones keep the export's 300 px */
@media (max-width: 767px) { .flowappz-cookie-consent-popup-16 { inset: auto auto 16px 50%; transform: translateX(-50%); margin: 0; } }
.flowappz-cookie-popup-content-paragraph-31 .paragraph-63 { margin-bottom: 0; }
.flowappz-cookie-accept-button-29:focus-visible, .flowappz-cookie-reject-button-26:focus-visible { outline: 2px solid #000; outline-offset: 2px; }
.flowappz-cookie-popup-content-paragraph-31 .paragraph-63 a { color: inherit; text-decoration: none; } /* looks like the export's plain <strong>, stays a link */

/* ---- Team block (about page, optional) ---- */
.bgb-team { max-width: 1088px; margin: 0 auto 100px; padding: 0 10px; text-align: center; }
.bgb-team__heading { text-align: center; margin-bottom: 20px; }
.bgb-team__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 24px; }
.bgb-team__member { display: flex; flex-direction: column; align-items: center; gap: 4px; font-family: "Open Sans", sans-serif; color: #000; }
.bgb-team__photo { width: 140px; height: 140px; object-fit: cover; border-radius: 50%; margin-bottom: 8px; }
.bgb-team__name { font-weight: 700; }
.bgb-team__role { font-size: .9em; opacity: .8; }
.bgb-team__contact { font-size: .85em; color: inherit; }

/* ---- Inline FAQ (products / services pages) ---- */
.bgb-faq--inline { max-width: 1000px; margin: 40px auto 0; padding: 0 10px; }
.bgb-faq--inline .heading-5 { text-align: center; display: block; }
.bgb-faq__item { border-top: 1px solid rgba(0,0,0,.2); padding: 10px 0; }
.bgb-faq__item:last-child { border-bottom: 1px solid rgba(0,0,0,.2); }
.bgb-faq__q { cursor: pointer; font-family: "Generalsans", "Open Sans", sans-serif; font-weight: 600; font-size: 1.15em; line-height: 1.3; list-style: none; padding: 6px 30px 6px 0; position: relative; }
.bgb-faq__q::-webkit-details-marker { display: none; }
.bgb-faq__q::after { content: "+"; position: absolute; right: 4px; top: 4px; font-size: 1.4em; line-height: 1; font-weight: 300; }
details[open] > .bgb-faq__q::after { content: "–"; }
.bgb-faq__a { padding: 4px 0 10px; text-align: left; }

/* ---- Round BGB logo: continuous spin instead of the export's one-turn-and-back interaction (Julian, 2026-09-06).
   Applies to the hero logo (.play-showreel) and the round home logo on sub pages (.home-menu). Speed: one turn per 12 s (a quarter of the export speed, Julian 2026-09-06). ---- */
@keyframes bgb-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.play-showreel, .home-menu { animation: bgb-spin 12s linear infinite; }

/* ---- Home page, white area (Willkommen / News / Broschüre): calmer, centred two-column layout on desktop.
   The export made the video column 50vw × 100vh with 150 px padding and sticky positioning, which squeezed the
   text column to ~340 px and left a lot of empty space (Julian, 2026-09-06). Tablet/mobile keep the export rules. ---- */
@media (min-width: 992px) {
  .sek-brosch-re.inner { padding: 0 5% 24px; }
  .sek-brosch-re.inner .first-grid,
  .sek-brosch-re.inner .second-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-column-gap: 72px; align-items: center; max-width: 1180px; margin: 0 auto; }
  .sek-brosch-re.inner .first-grid { padding: 104px 0 56px; }
  .sek-brosch-re.inner .second-grid { padding: 56px 0 96px; }
  .sek-brosch-re.inner .box1,
  .sek-brosch-re.inner .box1_1 { position: static; height: auto; padding: 0; justify-content: center; }
  /* Webflow pins these grid items via #w-node ids to justify-self: center, which shrinks the video to its intrinsic width */
  .sek-brosch-re.inner .box2,
  .sek-brosch-re.inner .box2_2 { align-self: center; justify-self: stretch !important; width: 100%; }
  .sek-brosch-re.inner .videobox-wrapper { position: static; width: 100%; height: auto; padding: 0; align-self: auto; }
  .sek-brosch-re.inner .box2wrapper { position: static; width: 100%; height: auto; padding: 0; display: flex; justify-content: center; align-items: center; }
  .sek-brosch-re.inner .image-11 { max-width: 100%; max-height: none; }
  .sek-brosch-re.inner .hero-welcome,
  .sek-brosch-re.inner .hero-plettac { max-width: 560px; height: auto; margin: 0; }
  .sek-brosch-re.inner .heading { padding-top: 0; }
  .sek-brosch-re.inner > .sek-brosch-re { padding: 24px 5% 96px; }
}

/* ---- Reduced motion: never animate the image grids away ---- */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .circle-cursor { display: none !important; }
  .play-showreel, .home-menu { animation: none; }
}

/* ---- Full-screen menu: labels scale linearly with the viewport (Julian 2026-09-06) ----
   The export jumps from 3 vw above 991 px (30 px at 1000 px) to 7.5–8.5 vw below (74 px at 991 px) and keeps a 100 px
   menu padding there, so in narrow desktop windows the labels became huge and wrapped into overlapping lines
   (line-height .5/.25). Now one continuous size: the desktop 3 vw above ≈ 1436 px, below that a straight line down to
   32 px at 390 px (the export's phone size). Weight and line-height no longer jump either; the hover keeps the
   letter-spacing animation, scaled with the viewport so a hovered label never wraps or leaves the screen. */
.nav-text { font-size: max(3vw, calc(1.75rem + 1.05vw)); font-weight: 600; line-height: 1; white-space: nowrap; }
.nav-text:hover { letter-spacing: min(5px, .5vw); }
@media screen and (max-width: 991px) {
  .menu { padding-left: 30px; padding-right: 30px; }
  .navlinks { padding-top: 0; padding-bottom: 0; } /* export adds 1vh here – keeps the row spacing continuous as well */
}

/* ---- Background videos: overscan by 2 px per side. Safari shows a white hairline of the section at the sides of an
   object-fit:cover video (subpixel rounding); the video box clips the overscan (Julian 2026-09-06, Über-uns-Hero). ---- */
.w-background-video > video { width: calc(100% + 4px); height: calc(100% + 4px); }

/* ---- Home intro (Julian 2026-09-06): on the first entry per browser session (desktop only) the page is covered in
   brand red and only the round logo circle at the bottom of the hero stays visible; once the page has loaded, the
   hole around the logo opens a little, bounces back and then opens completely. The red is the spread shadow of a
   transparent disc (hole) whose centre/diameter come from site.js (--x/--y/--d = the .lightbox-link circle); the
   logo itself is raised above the layer, so it is visible from the very first paint without any script. An inline
   head script on the home page decides before the first paint (html.bgb-intro-pending); the fallback animation
   removes the layer after 6 s if the script never starts it. ---- */
@property --bgb-r { syntax: '<length>'; inherits: false; initial-value: 0px; }
.bgb-intro { display: none; position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; }
/* The hole is a radial gradient whose radius is a registered custom property: animating it only repaints, it never
   changes layout – the earlier width/height animation of a disc counted as a layout shift of 0.22 (Lighthouse CLS). */
html.bgb-intro-pending .bgb-intro { display: block; --bgb-r: calc(var(--d, 0px) / 2);
  background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), transparent calc(var(--bgb-r) - .5px), var(--red, #e1111f) var(--bgb-r));
  animation: bgb-intro-fallback .6s ease 6s forwards; }
html.bgb-intro-pending .hero .lightbox-link { z-index: 2147483001; }
html.bgb-intro-pending .bgb-intro.is-open { animation: bgb-intro-open 1.9s forwards; }
.bgb-intro.is-done { display: none !important; }
@keyframes bgb-intro-open {
  0%   { --bgb-r: calc(var(--d) / 2); animation-timing-function: cubic-bezier(.3, 0, .1, 1); }
  30%  { --bgb-r: calc(var(--d) * 1.2); animation-timing-function: cubic-bezier(.5, 0, .5, 1); } /* opens a little */
  50%  { --bgb-r: calc(var(--d) * .65); animation-timing-function: cubic-bezier(.7, 0, .2, 1); } /* bounces back */
  100% { --bgb-r: 120vmax; }                                                                   /* opens completely */
}
@keyframes bgb-intro-fallback { to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .bgb-intro { display: none !important; } }

/* ---- Background video: poster fallback without JavaScript / with reduced motion (moved from the partial) ---- */
[data-wf-bgvideo-fallback-img] { display: none; }
@media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }