@charset "UTF-8";
/*  variables   */
/* #1b4379  #0033b3 */
/*neu: #56a532  ; alt: rgb(32,144,119);*/
/* 10% sw */
/*  was 2.7rem  */
/*  OCMS stage banner (sites/shared/css/stagebanner.scss), pushes the fixed header down  */
/* changed with new logo from 122px to 131px*/
/* was 3.5rem;*/
/* was 2rem;*/
/** Vertical padding applied to .frm.inner inside sections — top and bottom breathing room. */
/* desktop: ~96px, mobile: 56px  */
/* compact screens below $break3  */
/** Maximum content-frame width. Above this the outer frame stops growing and gets centered. */
/* horizontal padding applied when viewport is between break1 and frm_max_width */
/*****  specials  *********************************************************************/
/*27px + 10px + 5px;*/
/*****  typography  *******************************************************************/
/* 16px */
/* 14px */
/* 18px */
/** Body copy inside section .content — scales from 14px on mobile up to 16px on large screens. */
/** Grid column/row gaps for section column layouts (c2l, c3l). */
/* scales from 24px → 56px */
/* fixed row spacing between stacked rows */
/** Inline badge/label padding (e.g. div.title) — scales with viewport. */
/* vertical:   3px → ~6px  */
/* horizontal: 8px → ~14px */
/*****  responsive breakpoint mixins  *************************************************/
/* Usage:  @include bp-up($break1) { … }   →  min-width: $break1              */
/*         @include bp-down($break2) { … } →  max-width: ($break2 - 1)        */
/*         @include bp-between($break3, $break2) { … }                        */
/**
 * Scale a CSS value (including clamp()) by a unitless factor at browser runtime.
 *
 * SCSS cannot perform arithmetic on clamp() because clamp() is a plain CSS string
 * from SASS's perspective — the result would be invalid interpolated text, not a
 * usable length.  Wrapping in calc() delegates the multiplication to the browser,
 * where it is perfectly valid.
 *
 * @param  $value   Any CSS length: a plain length (1rem), a variable, or clamp(…).
 * @param  $factor  Unitless number (e.g. 0.75).
 * @return          CSS calc($value * $factor) string.
 *
 * @example
 *   margin-bottom: scale-val($font_size_h2, 0.75);
 *   // → calc(clamp(1.375rem, 3vw, 2rem) * 0.75)
 */
/**
 * Centers and caps .frm.outer at $frm_max_width.
 * Use inside a min-width: $break1 media block to replace the old `width: $break1` pattern.
 * The frame grows with the viewport up to $frm_max_width, with $frm_max_width_padding on each side.
 */
/* Stage banner of the OCMS staging preview (ocms_ClientController.StageBannerHtml()).
   Shared by all sites: only generic values / CSS custom properties with fallbacks, because this file cannot know
   a site's tokens. A site tunes the look by setting the --ocms-stagebanner-* properties on :root or by overriding
   .ocms-stagebanner in its own SCSS. A site with a fixed header must offset it by the banner height, e.g.
   body:has(.ocms-stagebanner) header { top: var(--ocms-stagebanner-height, 2rem); } (see fuchs_header_footer.scss).
   Bundle order: include after the site's *_variables.scss, before the layout files. */
.ocms-stagebanner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000; /* above fixed headers and flyouts of the sites */
  box-sizing: border-box;
  height: var(--ocms-stagebanner-height, 2rem);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0 0.75rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 0.8125rem;
  line-height: 1;
  background-color: var(--ocms-stagebanner-bg, #ffc107);
  color: var(--ocms-stagebanner-color, #212529);
  /* dev stage (Development environment only) is visually distinct from the set preview */
}
.ocms-stagebanner a {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
}
.ocms-stagebanner a:hover, .ocms-stagebanner a:focus-visible {
  text-decoration: none;
}
.ocms-stagebanner--dev {
  background-color: var(--ocms-stagebanner-bg-dev, #0d6efd);
  color: var(--ocms-stagebanner-color-dev, #ffffff);
}
@media (min-width: 561px) {
  .ocms-stagebanner {
    font-size: 0.875rem;
  }
}

/* Visible editor hint for a section whose partial failed to render (ocms_ClientController_multidomain.SectionRenderFailed).
   Only emitted on staged requests (set/dev), never on pub. Tunable via --ocms-section-error-* custom properties. */
.ocms-section-error {
  box-sizing: border-box;
  margin: 0.75rem auto;
  padding: 0.75rem 1rem;
  max-width: var(--ocms-section-error-max-width, 60rem);
  border: 0.125rem dashed var(--ocms-section-error-border, #b02a37);
  background-color: var(--ocms-section-error-bg, #f8d7da);
  color: var(--ocms-section-error-color, #58151c);
  font-size: 0.875rem;
  line-height: 1.4;
}
@media (min-width: 561px) {
  .ocms-section-error {
    padding: 1rem 1.5rem;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   fuchs_v2_base.scss - bundle fuchs_v2.min.css (loaded by views/_Layout_v2.cshtml AFTER fuchs.min.css)

   Ports the cross-section parts of the design (FuchsDesign/site/css): new_btn_anchor.scss (bare anchor button, centred
   button row) and new_feedback_r3.scss (.hl_left). Everything here only adds to or overrides the base bundle; the base
   bundle stays untouched so pub does not change. Values come from fuchs_variables.scss only.
   ───────────────────────────────────────────────────────────────────────────── */
/* ── Headline: left aligned (headline_align = left) ───────────────────────────
   Specificity above "section.section .headline" of the base bundle, no !important. */
section.section .frm.inner .hl_left {
  text-align: left;
}

/* ── Section headline rendered as h2: same top margin as the drafts' h1 (design comparison ALL-01, about 9px) ── */
section.section .frm.inner h2.headline {
  margin-top: 0.67em;
}

/* ── Text blocks inside a section that sit above/below the column grid (intro of logo / document sections) ── */
section.section .v2_intro {
  margin-bottom: 2rem;
  font-size: clamp(0.875rem, 1.1vw, 1rem);
  line-height: 1.6;
  text-align: center;
}

/* ── a.btn: the bare-anchor button (design: new_btn_anchor.scss) ───────────────
   `.btn` of the base bundle is written for a wrapper (<div class="btn"><a>); a bare <a class="btn"> needs its own
   geometry. Specificity (0,1,1) on purpose: existing local button rules keep winning. */
a.btn {
  display: inline-block;
  padding: 0.9rem 1.6rem;
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  border-radius: 2px;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  color: rgb(27, 67, 121);
  /* hover/focus is shown by border, underline and inner line - the text colour stays $fuchs_blau (>= 4.5:1 on white);
     the design's green text reached only 3.07:1 (B4) */
  /* the base bundle turns .btn.blue green on hover (white on green: 3.07:1): stay on the dark blue instead */
}
a.btn:hover, a.btn:focus-visible {
  border-color: rgb(27, 67, 121);
  box-shadow: inset 0 0 0 1px rgb(27, 67, 121);
  text-decoration: underline;
}
a.btn.blue, a.btn.green {
  color: #FFF;
}
a.btn.blue:visited, a.btn.blue:hover, a.btn.blue:focus-visible, a.btn.green:visited, a.btn.green:hover, a.btn.green:focus-visible {
  color: #FFF;
}
a.btn.blue:hover, a.btn.blue:focus-visible {
  background-color: #11284b;
  border-color: #11284b;
  box-shadow: none;
  text-decoration: underline;
}
a.btn.green:hover, a.btn.green:focus-visible {
  text-decoration: underline;
}
a.btn:focus-visible {
  outline: 3px solid rgb(27, 67, 121);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #FFF;
}

/* Buttons in cards: the base bundle fills them green on hover/focus (white text 3.07:1). Same specificity as the base
   rules (section.c3l.cards div.content > *:not(.imgf) a[class*=btn]:hover, +1 class for dark cards); this bundle loads later. */
section.section.cards div.content > .ctf a.btn:hover,
section.section.cards div.content > .ctf a.btn:focus {
  background-color: #11284b;
  border-color: #11284b;
  color: #FFF;
  text-decoration: underline;
}

section.section.cards.cddark div.content > .ctf a.btn:hover,
section.section.cards.cddark div.content > .ctf a.btn:focus {
  background-color: #FFF;
  border-color: #FFF;
  color: #11284b;
  text-decoration: underline;
}

section.section.cards div.content > .ctf a.btn:focus-visible {
  outline: 3px solid rgb(27, 67, 121);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #FFF;
}

/* Cards: the button row sits at the card foot, set off by a horizontal rule (user, 2026-11-02, as in the first draft).
   The text column of a card is a flex column that grows to the card height (base bundle), so margin-top: auto pins the row
   to the bottom and the rules of neighbouring cards line up. The row is the last <p> that holds only the button
   (fuchs_v2_item card: <p><a class="btn">). */
section.section.cards div.content > .ctf > p:last-child:has(> a.btn:only-child) {
  margin-top: auto;
  padding-top: 1.25rem;
  border-top: 1px solid #a6a6a6;
}

section.section.cards.cddark div.content > .ctf > p:last-child:has(> a.btn:only-child) {
  border-top-color: rgba(255, 255, 255, 0.25);
}

/* Light cards on a white section get a very fine grey line (user, 2026-11-02): on grey the card stands out by itself. */
main > section.light.cards.cdlight div.content,
main > section.cards.cdlight:not(.lightgray):not(.softgray):not(.warm):not(.light):not(.akzent):not(.frontpage):not(.fullscale_photo):nth-child(odd of section:not(.frontpage)) div.content {
  border: 1px solid #e5e5e5;
}

/* outline button on a dark or accent surface */
section.dark a.btn:not(.blue):not(.green),
section.akzent a.btn:not(.blue):not(.green) {
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.65);
  color: #FFF;
}
section.dark a.btn:not(.blue):not(.green):hover, section.dark a.btn:not(.blue):not(.green):focus-visible,
section.akzent a.btn:not(.blue):not(.green):hover,
section.akzent a.btn:not(.blue):not(.green):focus-visible {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: #FFF;
  color: #FFF;
}

/* ── .btnrow.btnrow_center: centred button pair of a closing call to action ───
   The `.btnrow` float grid of the base bundle stays for full-width rows; this modifier is the opt-in. */
.btnrow.btnrow_center {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 1rem;
  margin-top: 2rem;
}
.btnrow.btnrow_center > .btnfrm,
.btnrow.btnrow_center > .btn {
  float: none;
}
.btnrow.btnrow_center .btnfrm {
  width: auto;
  display: flex;
}
.btnrow.btnrow_center .btnfrm.bc2:nth-child(n+2), .btnrow.btnrow_center .btnfrm.bc3:nth-child(n+2), .btnrow.btnrow_center .btnfrm.bc4:nth-child(n+2) {
  margin-left: 0;
}
.btnrow.btnrow_center .btnfrm.bc2, .btnrow.btnrow_center .btnfrm.bc3, .btnrow.btnrow_center .btnfrm.bc4 {
  width: auto;
}
.btnrow.btnrow_center .btnfrm a.btn {
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 561px) {
  .btnrow.btnrow_center {
    flex-direction: column;
    align-items: stretch;
  }
  .btnrow.btnrow_center .btnfrm {
    width: 100%;
  }
  .btnrow.btnrow_center .btnfrm a.btn {
    width: 100%;
  }
}

/* the text directly above the button row is centred (replaces the inline text-align of the draft); other paragraphs of a
   section with buttons, e.g. the legal text of the social media section, stay left (design comparison DS-06) */
section.v2_btns .content > p:has(+ .btnrow) {
  text-align: center;
}

/* ── Stage banner (dev / set preview) ─────────────────────────────────────────
   Bug of the base bundle (fuchs_header_footer.scss, end of file): below $break2 the banner block moves EVERY
   `header .frm.outer` down by header + banner height. It means the mobile nav flyout, but the selector also hits the
   header's own relative frame (and the topstrip frame), so at 390 px the whole header content sits ~120 px too low.
   Fix: give the header frames their natural top back and move the flyout (position: fixed) instead. Same selector
   specificity as the original block; this bundle loads later and therefore wins. */
@media (max-width: 800px) {
  body:has(.ocms-stagebanner) header .frm.outer {
    top: auto;
  }
  body:has(.ocms-stagebanner) header .nav_menu_frm {
    top: calc(89px + 2rem);
  }
}
@media (max-height: 499px) and (max-width: 800px) {
  body:has(.ocms-stagebanner) header .nav_menu_frm {
    top: calc(66px + 2rem) !important;
  }
}

/* ── Hamburger as a real button (views/_Layout_v2.cshtml; S-003) ──────────────
   The base CSS styles #toggle-nav / .hamburger for a div; reset what a <button> adds so the look stays identical
   (content-box like the div, transparent, no default padding) and give keyboard focus a visible ring. */
header button.hamburger {
  box-sizing: content-box;
  background: transparent;
  color: inherit;
  font: inherit;
  padding-inline: 0;
  padding-bottom: 0;
}
header button.hamburger:focus-visible {
  outline: 3px solid rgb(27, 67, 121);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #FFF;
}

/* ── First section of a page without hero: keep the heading clear of the frozen flyin ─────────────────────
   The "Niederlassung Mallorca" teaser (fuchs_superspecial.scss, position: fixed; top: 200px, shown on screens >= 850px high)
   covers the top right of the first heading between tablet and small desktop width. Extra padding pushes the first
   heading below it; the look of the teaser and of the assistant button is not touched. */
@media (min-width: 768px) and (max-width: 1100px) {
  main:not(.hasfront) > section:first-of-type .frm.inner {
    padding-top: calc(clamp(3.5rem, 7vw, 6rem) + 6rem);
  }
}
/* ── Three-column sections at tablet width: no orphan on the left (B-004) ─────
   The base bundle turns section.c3l into two columns between $break3 and $break2; three items then end as 2 + 1 with
   the third alone on the left. Design intent: an even, calm row, so the last odd item is centred in a row of its own
   (cards, gallery, logos, detail cards alike). :nth-child(odd of .content) counts only the content cells; the eyebrow
   and headline in the same grid do not shift the parity. */
@media (min-width: 562px) and (max-width: 800px) {
  section.c3l .frm.inner > .content:last-child:nth-child(odd of .content) {
    grid-column: 1/-1;
    justify-self: center;
    width: calc((100% - clamp(1.5rem, 4vw, 3.5rem)) / 2);
  }
}
/* ── Alternating section background (user decision Q30, 2026-11-02) ───────────
   The first draft alternated white and grey sections. Counted among the sections of the page without the hero
   (:nth-child(even of ...), same technique as above), every second one is grey. Sections with an explicit background
   (warm | lightgray | softgray | light = explicit white | akzent) and the full-width photo keep theirs and only take their
   place in the count, so an editor's choice always wins; a page can set every section explicitly (bad: soft, white, grey,
   white, ...). White cards (cdlight) and job cards stand out better on the grey. */
main > section:nth-child(even of section:not(.frontpage)):not(.warm):not(.lightgray):not(.softgray):not(.light):not(.akzent):not(.fullscale_photo) {
  background-color: #e5e5e5;
}

/* select value background = softgray (Q30): one tone lighter than the grey */
main > section.softgray {
  background-color: #f5f4f4;
}

/* ── Footer call to action at tablet width (S-006) ────────────────────────────
   The frozen footer (fuchs_header_footer.scss) stacks the CTA strip as a flex COLUMN at <= $break2a but keeps
   `flex: 1 1 300px / 380px` on both blocks. In a column the flex-basis is the HEIGHT, which produced ~170 px of empty
   space above and below the tiles; align-items: flex-start also shrank the tiles to the left half. Only the layout is
   corrected here, the look of the footer is unchanged. */
@media (max-width: 768px) {
  footer .ft_cta_strip .ft_cta_left,
  footer .ft_cta_strip .ft_cta_contacts {
    flex: 0 0 auto;
  }
  footer .ft_cta_strip .ft_cta_contacts {
    align-self: stretch;
  }
}
/* ── Topstrip claims without inline styles (views/_Layout_v2.cshtml) ───────────
   The layout used style="--gcc: N" / "--gcp: N" for the number of claims and the position of each claim; the same custom
   properties are now set by the classes gcc_N / gcp_N (up to 8 claims). */
header .topstrip .frm.outer.gcc_1 {
  --gcc: 1;
}

header .topstrip .claim.gcp_1 {
  --gcp: 1;
}

header .topstrip .frm.outer.gcc_2 {
  --gcc: 2;
}

header .topstrip .claim.gcp_2 {
  --gcp: 2;
}

header .topstrip .frm.outer.gcc_3 {
  --gcc: 3;
}

header .topstrip .claim.gcp_3 {
  --gcp: 3;
}

header .topstrip .frm.outer.gcc_4 {
  --gcc: 4;
}

header .topstrip .claim.gcp_4 {
  --gcp: 4;
}

header .topstrip .frm.outer.gcc_5 {
  --gcc: 5;
}

header .topstrip .claim.gcp_5 {
  --gcp: 5;
}

header .topstrip .frm.outer.gcc_6 {
  --gcc: 6;
}

header .topstrip .claim.gcp_6 {
  --gcp: 6;
}

header .topstrip .frm.outer.gcc_7 {
  --gcc: 7;
}

header .topstrip .claim.gcp_7 {
  --gcp: 7;
}

header .topstrip .frm.outer.gcc_8 {
  --gcc: 8;
}

header .topstrip .claim.gcp_8 {
  --gcp: 8;
}

header .topstrip .claim .claim_icon {
  max-height: 100%;
}

/* the logo block links to the home page by script (fuchs_v2.js) */
header .nav-link--home {
  cursor: pointer;
}

/* ── Overlay note: OK button (a <button> in the v2 layout) with the look of the base bundle's .ol_btnframe > div ── */
.overlaynote .ol_base .ol_btnframe > button.ol_ok {
  display: block;
  width: 100px;
  margin: 15px auto 5px auto;
  background-color: #FFF;
  color: inherit;
  font: inherit;
  border: 1px solid #727272;
  border-radius: 3px;
  padding: 6px 10px;
  cursor: pointer;
  box-shadow: 0 0 3px rgba(17, 17, 17, 0.6);
}
.overlaynote .ol_base .ol_btnframe > button.ol_ok:focus-visible {
  outline: 3px solid rgb(27, 67, 121);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #FFF;
}

/* ── Skip link (first focusable element of the page, visible on focus) and its target ── */
.skip_link {
  position: fixed;
  top: -10rem;
  left: 0.5rem;
  z-index: 2147483642;
  padding: 0.75rem 1rem;
  background: #FFF;
  color: rgb(27, 67, 121);
  font-weight: 700;
  text-decoration: underline;
}
.skip_link:focus {
  top: 0.5rem;
  outline: 3px solid rgb(27, 67, 121);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #FFF;
}

/* #main takes the focus from the skip link / after the overlay note: no ring on the whole page, and the jump
   target is not hidden under the fixed header */
main#main {
  scroll-margin-top: calc(132px + 2rem);
}
main#main:focus {
  outline: none;
}

/* ── Long words and addresses wrap at 320 px (B5) ───────────────────────────── */
section.section .content a,
section.section .v2_intro a,
section.section .jintro a,
section.section .jdetails a,
section.section .jcontact a,
.hm_ig_note a,
.dn_question,
.dn_mail {
  overflow-wrap: anywhere;
}

/* ─────────────────────────────────────────────────────────────────────────────
   fuchs_v2_hero.scss - template fuchs_v2_section_hero (variants overlay | clear | below | map)

   The markup is the old section.frontpage (base bundle + fuchs_go.js drive position, parallax and the intro fade).
   Ported from the design: new_option51_sections.scss (.sp__teaser_lead) and new_feedback_r3.scss (.hero_clear, .hero_below).
   ───────────────────────────────────────────────────────────────────────────── */
/* ── All variants: veil and text are always fully visible ─────────────────────
   The base bundle fades veil and text with --overlay-opacity (intro animation via requestAnimationFrame + scroll fade
   by fuchs_go.js). When that script state stays at a low value (throttled rAF, restored scroll position) the headline
   is washed out over the photo (U-001, J-001, B-001). The next section covers the fixed hero when scrolling anyway, so
   v2 heroes do not depend on the fade. */
section.frontpage .sp__teaser_frame::after,
section.frontpage .sp__teaser_textoverlay {
  opacity: 1;
  transition: none;
}

/* Intro paragraph in the overlay: wider than the 420px cap of .sp__teaser_subtext (about 40 words) */
.sp__teaser_textoverlay .sp__teaser_subtext.sp__teaser_lead {
  margin-bottom: 0;
}
@media (min-width: 800px) {
  .sp__teaser_textoverlay .sp__teaser_subtext.sp__teaser_lead {
    max-width: 700px;
  }
}

/* ── clear: the veil only sits behind the text, neutral dark instead of blue ──── */
section.frontpage.hero_clear .sp__teaser_frame::after {
  background: linear-gradient(to bottom, rgba(17, 17, 17, 0.45), rgba(17, 17, 17, 0.35));
}
@media (min-width: 961px) {
  section.frontpage.hero_clear .sp__teaser_frame::after {
    background: linear-gradient(to right, rgba(17, 17, 17, 0.62) 0%, rgba(17, 17, 17, 0.5) 28%, rgba(17, 17, 17, 0.18) 45%, rgba(17, 17, 17, 0) 56%);
  }
}
section.frontpage.hero_clear .sp__teaser_textoverlay .sp__teaser_headline,
section.frontpage.hero_clear .sp__teaser_textoverlay .sp__teaser_subtext,
section.frontpage.hero_clear .sp__teaser_textoverlay .sp__teaser_badge {
  text-shadow: 0 1px 12px rgba(17, 17, 17, 0.55);
}

/* ── below: photo without overlay, text in a band below (needs .hnf: the section runs in the page flow) ── */
section.frontpage.hnf.hero_below {
  background-color: #11284b;
  /* section.frontpage sets top: <header height> for its fixed variant; at position: relative that would be an offset */
  top: 0;
}
@media (min-width: 961px) {
  section.frontpage.hnf.hero_below {
    top: 0;
  }
}
@media (max-height: 499px) {
  section.frontpage.hnf.hero_below {
    top: 0;
  }
}
section.frontpage.hnf.hero_below .sp__teaser_frame {
  position: relative;
  height: auto;
  /* ROCKSOLID: further slides lie over the first one (only the first sizes the frame) — stacked slides made the frame N photos tall and jump while flipping (RS-12, 2026-11-01) */
}
section.frontpage.hnf.hero_below .sp__teaser_frame::after {
  display: none;
}
section.frontpage.hnf.hero_below .sp__teaser_frame .sp__teaser_content {
  position: relative;
  height: auto;
  /* the base bundle sizes picture AND img to the viewport height; only img was reset, so the <picture> kept
     ~100vh and left an empty navy block under the photo (S-001) */
}
section.frontpage.hnf.hero_below .sp__teaser_frame .sp__teaser_content picture {
  height: auto;
  max-height: none;
}
section.frontpage.hnf.hero_below .sp__teaser_frame .sp__teaser_content img {
  height: auto;
  max-height: none;
  aspect-ratio: 3/2;
  /* people stand in the lower half of the photo; the wider desktop crop removes sky/facade at the top */
  object-position: 50% 85%;
}
@media (min-width: 961px) {
  section.frontpage.hnf.hero_below .sp__teaser_frame .sp__teaser_content img {
    height: auto;
    max-height: none;
    aspect-ratio: 2/1;
  }
}
section.frontpage.hnf.hero_below .sp__teaser_frame .sp__teaser_content ~ .sp__teaser_content {
  position: absolute;
  inset: 0;
  height: 100%;
}
section.frontpage.hnf.hero_below .sp__teaser_frame .sp__teaser_content ~ .sp__teaser_content picture,
section.frontpage.hnf.hero_below .sp__teaser_frame .sp__teaser_content ~ .sp__teaser_content img {
  height: 100%;
}
section.frontpage.hnf.hero_below .sp__teaser_textoverlay {
  position: static;
  height: auto;
  /* fuchs_go.js fades the overlay with the scroll position; the band below the photo must stay readable */
  opacity: 1;
  padding-top: clamp(3.5rem, 7vw, 6rem);
  padding-bottom: clamp(3.5rem, 7vw, 6rem);
}
@media (max-width: 560px) {
  section.frontpage.hnf.hero_below .sp__teaser_textoverlay {
    padding-top: clamp(2rem, 5vw, 3.5rem);
    padding-bottom: clamp(2rem, 5vw, 3.5rem);
  }
}
section.frontpage.hnf.hero_below .sp__teaser_textoverlay .sp__teaser_subtext {
  max-width: 640px;
}

/* ── map: the Google map fills the hero (kontakt, option-56 .hero_map) ───────────
   Same area and parallax as the photo heroes, filled edge to edge. Until the visitor clicks "Karte anzeigen" a neutral
   area with the note and the button stands in for the map (fuchs_v2.js initMapHero inserts the iframe). */
section.frontpage.hero_map {
  background-color: #e5e5e5;
  /* no photo: the frame would only lay the standard veil over the note and the button */
  /* hand-drawn map before the click (item property `image`): fills the hero, the note and the button lie on a panel at the
     foot so the red marker in the middle stays visible. The click replaces the whole .gmaps content by the iframe. */
}
section.frontpage.hero_map .sp__teaser_frame {
  display: none;
}
section.frontpage.hero_map .frm.outer,
section.frontpage.hero_map .frm.inner {
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
  padding: 0;
}
section.frontpage.hero_map .gmaps {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
section.frontpage.hero_map .gmaps iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
section.frontpage.hero_map .hm_backdrop {
  position: absolute;
  inset: 0;
}
section.frontpage.hero_map .hm_backdrop picture,
section.frontpage.hero_map .hm_backdrop img {
  display: block;
  width: 100%;
  height: 100%;
}
section.frontpage.hero_map .hm_backdrop img {
  object-fit: cover;
  object-position: 58% 50%;
}
section.frontpage.hero_map .gmaps.has_pic .hm_consent {
  position: absolute;
  left: 50%;
  bottom: clamp(1rem, 4vw, 3rem);
  transform: translateX(-50%);
  width: min(100% - 2 * clamp(1rem, 4vw, 3rem), 44rem);
  height: auto;
  background: rgba(255, 255, 255, 0.94);
  border-radius: 6px;
  box-shadow: 0 2px 12px rgba(17, 17, 17, 0.08);
}
section.frontpage.hero_map .hm_consent {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  text-align: center;
}
section.frontpage.hero_map .hm_note {
  max-width: 640px;
  margin: 0;
  font-size: clamp(0.875rem, 1.1vw, 1rem);
  line-height: 1.6;
  color: #000000;
}

/* ── Stage banner: the fixed hero starts below header AND banner ──────────────
   The base bundle offsets only the header; section.frontpage (position: fixed, top = header height) would sit
   under the header by the banner height. Same three cases and order as the base rule. */
body:has(.ocms-stagebanner) section.frontpage:not(.hnf) {
  top: calc(89px + 2rem);
  height: calc(100vh - 89px - 2rem);
}
@media (min-width: 961px) {
  body:has(.ocms-stagebanner) section.frontpage:not(.hnf) {
    top: calc(89px + 43px + 2rem);
    height: calc(100vh - 89px - 43px - 2rem);
  }
}
@media (max-height: 499px) {
  body:has(.ocms-stagebanner) section.frontpage:not(.hnf) {
    top: calc(66px + 2rem);
    height: calc(100vh - 66px - 2rem);
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   fuchs_v2_content.scss - template fuchs_v2_section_content (text | text2 | text3 | banner | image_left | image_right)

   Ported from the design: new_startseite_sections.scss (.hm_banner, .hm_wide_text), new_option51_sections.scss (long splits)
   and new_klima_sections.scss (.faq-item, single-column feature grid). The design addressed single sections through
   section[data-name="..."] selectors, which would tie the CSS to page content; here they are modifier classes that an
   editor sets in the template property css_class:
       img_top          top-aligns the image column of a long split (design: home_wp_*, about_klimaschutz)
       img_portrait     3:4 portrait crop of the image column from $break1 (narrow 1:2 / 2:1 splits)
       img_focus_right  with img_portrait: crop window shifted to the right
       grid_1col        the .c2grid of the body becomes one column on phones and gets a larger row gap
   ───────────────────────────────────────────────────────────────────────────── */
/* ── banner variant: wide image band above the headline, one wide text block ── */
section.v2_banner .frm.inner > .headline {
  text-align: left;
}

.hm_banner {
  margin-bottom: clamp(1.375rem, 3vw, 2rem);
}
.hm_banner img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
  object-fit: cover;
  /* from $break3: calm landscape band; below it the 3:2 original. Never wider than 16:9 (user, 2026-11-02: no strips) */
}
@media (min-width: 561px) {
  .hm_banner img {
    aspect-ratio: 16/9;
    object-position: 50% 40%;
  }
}
@media (min-width: 961px) {
  .hm_banner img {
    aspect-ratio: 16/9;
    object-position: 50% 30%;
  }
}

.hm_wide_text p {
  max-width: none;
}
.hm_wide_text p + p {
  margin-top: 1.25em;
}

/* ── images that stand alone (no card behind them): soft card shadow (user, 2026-11-02) ── */
section.hic .c2.imgf img,
.hm_banner img {
  box-shadow: 0 2px 12px rgba(17, 17, 17, 0.08);
}

/* ── split modifiers (css_class) ─────────────────────────────────────────────── */
section.img_top.hic .c2.imgf {
  align-self: start;
}

/* Image beside a text column (user, 2026-11-02): a fixed portrait crop 4:5 (Hochformat) at every screen size, so the picture
   never becomes a strip next to a much taller text. Original proportions are cut, not stretched (object-fit cover). */
section.hic .c2.imgf img {
  aspect-ratio: 4/5;
  object-fit: cover;
  height: auto;
}

@media (min-width: 961px) {
  section.img_portrait.hic .c2.imgf img {
    aspect-ratio: 4/5;
    object-fit: cover;
    height: auto;
  }
}

/* css_class img_focus_left: crop window at the left edge, for a sign or a face on the left of a 5:4 crop */
section.img_focus_left.hic .c2.imgf img {
  object-position: 0% 50%;
}

@media (min-width: 961px) {
  section.img_portrait.img_focus_right.hic .c2.imgf img {
    object-position: 72% 50%;
  }
}

/* ── FAQ item in a two-column text: a question never separates from its answer ── */
.faq-item {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  margin-bottom: 1.5rem;
}

/* ── feature grid (.c2grid) with paragraphs: one column on phones ─────────────── */
section.grid_1col .c2grid {
  row-gap: 2.5rem;
}
@media (max-width: 561px) {
  section.grid_1col .c2grid {
    grid-template-columns: 1fr;
  }
}

/* ── fact grid after body text: the design separates them with an empty spacer paragraph; the build uses a margin
   instead (design comparison BAD-02, WP-06/08, KL-08) ── */
section .content p + .c2grid {
  margin-top: 3.5rem;
}

/* ── legal text in two columns (impressum, datenschutz): sub-headings are bold run-in labels like the design's
   <strong> lines, both columns start at the same height, a heading never ends a column (IM-04/05, DS-02/03/05/08) ── */
section.t2c .content {
  /* intermediate heading of the legal text (datenschutz, kept as h2 for the outline, B9): left, one step larger */
  /* "label<br>value" pairs (impressum facts): the label is navy like the design's */
}
section.t2c .content h3,
section.t2c .content h4 {
  margin: 1em 0 0;
  font-size: 1em;
  font-weight: 700;
  line-height: inherit;
  color: rgb(27, 67, 121);
  break-after: avoid;
}
section.t2c .content h3 + p,
section.t2c .content h4 + p {
  margin-top: 0;
}
section.t2c .content h2 {
  margin: 1em 0 0;
  font-size: 1.25em;
  line-height: inherit;
  text-align: left;
  color: rgb(27, 67, 121);
  break-after: avoid;
}
section.t2c .content p > strong:first-child {
  color: rgb(27, 67, 121);
}
section.t2c .content > :first-child {
  margin-top: 0;
}

/* ── full-width photo section (fuchs_v2_section_photo): cropped, height limited, no distortion ── */
/* Full-width photo: shown in its original proportion, so that nobody in a group photo is cut off at the edges (user, 2026-11-02).
   No crop and no stretching: height follows the picture (width 100%, height auto). */
section.fullscale_photo.fullscale_v2 .fsp_content img {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
}

section.fullscale_photo.fullscale_v2 .frm.outer,
section.fullscale_photo.fullscale_v2 .frm.inner {
  padding: 0;
  margin: 0;
  max-width: none;
  width: 100%;
}

/* ─────────────────────────────────────────────────────────────────────────────
   fuchs_v2_grid.scss - template fuchs_v2_section_grid (photos | films | logos)

   Ported from the design: new_bad_sections.scss (.bd_gallery only), new_feedback_r3.scss (.lb_trigger, .lb_dialog),
   new_video-grid.scss (.vg_*), new_startseite_sections.scss (.hm_ig_note), plus the logo-card delta of the design's
   fuchs_specials.scss (centred logo, max-height).
   ───────────────────────────────────────────────────────────────────────────── */
/* ── photos: three-column row with enlargement ───────────────────────────────── */
section.bd_gallery .bd_gallery_item {
  margin: 0;
  display: flex;
  flex-direction: column;
  /* 3:2 keeps the sketch montage almost uncropped; 4:3 would cut plan content left and right */
}
section.bd_gallery .bd_gallery_item img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3/2;
  object-fit: cover;
  border-radius: 6px;
  background: #fafaf7;
  box-shadow: 0 2px 12px rgba(17, 17, 17, 0.08); /* stands alone, no card behind it */
}
section.bd_gallery .bd_gallery_item figcaption {
  padding-top: 0.625rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: #666666;
  text-align: left;
}

/* ImagePictureTag wraps the img in <picture> (inline by default): make the wrapper transparent for sizing */
.bd_gallery_item picture,
.vg_tile picture {
  display: block;
  width: 100%;
  height: 100%;
}

/* logo tiles centre the img itself, so the picture wrapper must not take the whole tile (design comparison KO-09) */
.logoshare .logo picture {
  display: contents;
}

/* the trigger is a <button> so the enlargement works by keyboard */
.lb_trigger {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}
.lb_trigger img {
  display: block;
  transition: opacity 0.2s ease;
}
.lb_trigger:hover img, .lb_trigger:focus-visible img {
  opacity: 0.88;
}
.lb_trigger:focus-visible {
  outline: 3px solid rgb(27, 67, 121);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #FFF;
}

/* native <dialog> (showModal): focus trap, Escape and ::backdrop come from the browser */
.lb_dialog {
  max-width: min(92vw, 1400px);
  max-height: 92vh;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}
.lb_dialog::backdrop {
  background: rgba(17, 40, 75, 0.9);
}
.lb_dialog figure {
  margin: 0;
}
.lb_dialog img {
  display: block;
  max-width: 100%;
  max-height: calc(92vh - 3rem);
  width: auto;
  height: auto;
  margin: 0 auto;
  border-radius: 6px;
}
.lb_dialog figcaption {
  margin-top: 0.75rem;
  color: #FFF;
  font-size: 0.875rem;
  text-align: center;
}
.lb_dialog .lb_close {
  position: absolute;
  top: -2.75rem;
  right: 0;
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  border-radius: 50%;
  background: #FFF;
  color: rgb(27, 67, 121);
  font-size: 1.125rem;
  line-height: 1;
  cursor: pointer;
}
.lb_dialog .lb_close:focus-visible {
  outline: 3px solid rgb(27, 67, 121);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #FFF;
}

/* ── films: 3x3 from $break1, 2x2 from $break3, one column below; fuchs_v2.js shows 9 / 4 / 3 tiles ── */
section.vg_section .frm.inner > .headline {
  text-align: left;
}

.vg_grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(0.5rem, 1.5vw, 1rem);
  grid-template-columns: 1fr;
  /* the script hides unused cells with [hidden]; display: grid on the container must not override it */
}
@media (min-width: 561px) {
  .vg_grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 961px) {
  .vg_grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.vg_grid .vg_cell {
  margin: 0;
  padding: 0;
  display: block;
}
.vg_grid .vg_cell[hidden] {
  display: none;
}

.vg_tile {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 6px;
  overflow: hidden;
  background: #11284b;
  cursor: pointer;
  aspect-ratio: 9/16;
  box-shadow: 0 2px 12px rgba(17, 17, 17, 0.08);
  /* darkening veil above the still, so play indicator and label stay readable */
}
.vg_tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.25s ease;
}
.vg_tile::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(17, 40, 75, 0.35) 0%, rgba(17, 40, 75, 0.1) 35%, rgba(17, 40, 75, 0.1) 55%, rgba(17, 40, 75, 0.8) 100%);
}
.vg_tile:hover img, .vg_tile:focus-visible img {
  transform: scale(1.03);
}
.vg_tile:hover .vg_play, .vg_tile:focus-visible .vg_play {
  background: rgb(86, 165, 50);
  border-color: rgb(86, 165, 50);
}
.vg_tile:focus-visible {
  outline: 3px solid rgb(27, 67, 121);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #FFF;
}

.vg_play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: clamp(38px, 6vw, 56px);
  height: clamp(38px, 6vw, 56px);
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.85);
  background: rgba(17, 40, 75, 0.45);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.vg_play::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-40%, -50%);
  border-style: solid;
  border-width: 0.45rem 0 0.45rem 0.75rem;
  border-color: transparent transparent transparent #FFF;
}

.vg_caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: clamp(0.5rem, 1.5vw, 0.875rem);
  color: #FFF;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.15;
  text-align: left;
}

/* Overlay. It lives inside main (position: relative; z-index: 1 = own stacking context), so its own z-index cannot rise
   above the fixed header (z-index 7). While it is open, body.vg_locked lifts main itself instead. */
.vg_overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
}
.vg_overlay[hidden] {
  display: none;
}

.vg_backdrop {
  position: absolute;
  inset: 0;
  background: rgba(17, 40, 75, 0.88);
  cursor: pointer;
}

.vg_dialog {
  position: relative;
  z-index: 1;
  max-width: min(420px, 90vw);
  width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  /* the dialog scrolls itself on low viewports (landscape phone), so the caption stays reachable */
  overflow-y: auto;
}

/* close button inside the dialog; sticky so it stays on top while the dialog scrolls */
.vg_close {
  position: sticky;
  top: 0;
  z-index: 2;
  align-self: flex-end;
  flex: 0 0 auto;
  margin-bottom: 0.5rem;
  margin-right: 0.5rem;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  background: rgba(17, 17, 17, 0.55);
  color: #FFF;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
.vg_close:hover {
  background: rgba(17, 17, 17, 0.8);
  border-color: #FFF;
}
.vg_close:focus-visible {
  outline: 3px solid rgb(27, 67, 121);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #FFF;
}

.vg_figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.vg_figure img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 70vh;
  object-fit: contain;
  border-radius: 6px;
  background: #111111;
  /* low viewports (landscape phone): 499px is the project's height threshold, see the base bundle */
}
@media (max-height: 499px) {
  .vg_figure img {
    max-height: 42vh;
  }
}

.vg_figcaption {
  padding-top: 0.875rem;
  color: #FFF;
  text-align: left;
}
.vg_figcaption .vg_figlabel {
  display: block;
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.15;
}

body.vg_locked {
  overflow: hidden;
}
body.vg_locked main {
  z-index: 1000;
}

/* ── footnote below the film grid (one <p> with an optional glyph <img>) ─────── */
.hm_ig_note {
  margin: 1.25rem 0 0;
  font-size: 0.875rem;
  line-height: 1.15;
  color: #666666;
}
.hm_ig_note p {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}
.hm_ig_note img {
  display: block;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  opacity: 0.55;
}
.hm_ig_note a:hover,
.hm_ig_note a:focus-visible {
  text-decoration: underline;
}

/* ── logos: centred logo in a card (delta of the design's fuchs_specials.scss) ─ */
.feedbackcollection .logoshare .logo {
  display: flex;
  align-items: center;
  justify-content: center;
}
.feedbackcollection .logoshare .logo img {
  max-height: 100%;
}

/* ── logos: intro above the logos, not in a grid cell beside them (F-002) ───────
   section.c3l turns .frm.inner into a grid, so a plain block between headline and logos became its first cell. */
section.c3l .frm.inner > .v2_intro {
  grid-column: 1/-1;
}

/* four logos form one row (design: heating page), any other number keeps the three-column grid */
@media (min-width: 961px) {
  section.feedbackcollection .frm.inner:has(> .content:nth-child(4 of .content):last-child) {
    grid-template-columns: repeat(4, 1fr);
  }
}
/* ─────────────────────────────────────────────────────────────────────────────
   fuchs_v2_list.scss - template fuchs_v2_section_list (contacts | downloads | jobs)

   contacts: replaces the table #directemails of the draft (and its inline style) by a list; look taken from the base
   bundle rules for #directemails. downloads: delta of the design's fuchs_specials.scss (.download_card strong) plus the
   clearing of the floated cards. jobs: the job ads as cards (design option-56 .jobs_cards, new_jobs_sections.scss) on
   top of the base bundle's .jobfrm/.job rules; in v2 always on, so no opt-in class.
   ───────────────────────────────────────────────────────────────────────────── */
/* ── contacts: icon | question over email, one row each ──────────────────────── */
/* the design's table shrinks to its content and sits left; the cell paddings below are the design's #directemails td
   values (icon .5rem 1rem, question 1rem 1rem .5rem, mail 0 1rem 1rem), so rows keep the design's height (ST-02, ST-03) */
.dn_list {
  list-style: none;
  width: fit-content;
  max-width: 100%;
  margin: 0;
  padding: 0;
  text-align: left;
}

.dn_row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "icon question" "icon mail";
  align-items: center;
  border-top: 1px solid #e5e5e5;
}
.dn_row > picture {
  display: contents;
}
.dn_row .dn_icon {
  grid-area: icon;
  display: block;
  box-sizing: content-box;
  height: 4rem;
  width: auto;
  margin: 0 auto;
  padding: 0.5rem 1rem;
}
.dn_row .dn_question {
  grid-area: question;
  align-self: end;
  padding: 1rem 1rem 0.5rem 1rem;
  font-size: 125%;
  font-weight: bolder;
}
.dn_row .dn_question p {
  margin: 0;
}
.dn_row .dn_mail {
  grid-area: mail;
  align-self: start;
  padding: 0 1rem 1rem 1rem;
  font-size: 110%;
  color: #666666;
}

/* ── downloads: floated cards, the container clears them ─────────────────────── */
.dl_cards {
  /* cards are centred in the column (390 px: one card used to sit left with the right half empty, K-003) */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.dl_cards .download_card {
  float: none;
}
.dl_cards::after {
  content: "";
  display: block;
  clear: both;
}

.download_card strong {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  top: 0;
  height: auto;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1.15;
  color: rgb(27, 67, 121);
  padding: 10px 10px 0 10px;
  text-align: center;
  /* long German compound words ("Handwerkerrechnung") must wrap instead of being clipped by the card (K-001) */
  overflow-wrap: anywhere;
  hyphens: auto;
}

/* ── jobs: job ads as cards (option-56 .jobs_cards) ───────────────────────────
   Same language as the c3l cards: white card, rounded, soft shadow, navy title, lists with a green dash, contact at
   the card foot below a hairline - instead of the base bundle's 700px box with the blue title bar. */
section.jobsection .frm.outer {
  width: 100%;
  max-width: none;
}
@media (min-width: 961px) {
  section.jobsection .frm.outer {
    width: calc(100% - 48px);
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
  }
}
section.jobsection .jobfrm {
  background: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 2.5vw, 1.5rem);
  align-items: stretch;
}
@media (min-width: 800px) {
  section.jobsection .jobfrm {
    grid-template-columns: repeat(2, 1fr);
  }
}
section.jobsection .jobfrm .job {
  margin: 0;
  border: 0;
  border-radius: 6px;
  background: #FFF;
  box-shadow: 0 2px 12px rgba(17, 17, 17, 0.08);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* list labels ("Das bieten wir:"); the live ads also carry prose paragraphs in the details, which stay body text */
  /* the application contact always sits at the card foot, set off by a hairline */
}
section.jobsection .jobfrm .job > div {
  padding: 0 clamp(1.25rem, 3vw, 2rem);
}
section.jobsection .jobfrm .job .jtitle {
  background: none;
  color: #11284b;
  font-size: clamp(1.375rem, 3vw, 2rem);
  line-height: 1.15;
  padding: clamp(1.25rem, 3vw, 2rem) clamp(1.25rem, 3vw, 2rem) 0;
  margin: 0 0 calc(clamp(1.375rem, 3vw, 2rem) * 0.75);
}
section.jobsection .jobfrm .job p,
section.jobsection .jobfrm .job li {
  font-size: clamp(0.875rem, 1.1vw, 1rem);
  line-height: 1.6;
  color: #000000;
}
section.jobsection .jobfrm .job .jdetails > p:has(+ ul) {
  font-weight: 700;
  color: #11284b;
  margin: 1.25rem 0 0.35rem;
}
section.jobsection .jobfrm .job ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
section.jobsection .jobfrm .job ul li {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}
section.jobsection .jobfrm .job ul li::before {
  content: "—";
  flex-shrink: 0;
  color: rgb(86, 165, 50);
  font-weight: 700;
}
section.jobsection .jobfrm .job .jcontact {
  margin-top: auto;
  padding-top: 1.25rem;
  padding-bottom: clamp(1.25rem, 3vw, 2rem);
}
section.jobsection .jobfrm .job .jcontact::before {
  content: "";
  display: block;
  border-top: 1px solid #e5e5e5;
  margin-bottom: 1.25rem;
}
section.jobsection .jobfrm .job .jcontact a {
  color: #11284b;
  font-weight: 700;
  text-decoration: underline;
}

/* Job cards on a white section: the same very fine grey line as the light cards (fuchs_v2_base.scss). */
main > section.light.jobsection .job,
main > section.jobsection:not(.lightgray):not(.softgray):not(.warm):not(.light):not(.akzent):not(.frontpage):not(.fullscale_photo):nth-child(odd of section:not(.frontpage)) .job {
  border: 1px solid #e5e5e5;
}