/* ==========================================================================
   Header override stylesheet
   Loaded after the compiled bundle (layout/responsive/style) so source order
   gives it precedence. !important is only used where a bundle rule has
   equal-or-higher specificity (or its own !important) and still beats us.

   Two goals:
   1. Reduce the (far too tall) fixed-header height.
   2. Show a full inline horizontal nav on wide screens and hide the burger;
      keep the burger + full-screen overlay below the inline threshold.

   Inline-nav threshold: 1200px.
   At >=1200px the header is a SINGLE ROW: logo + wordmark on the left, the
   full 7-item nav on the right, both vertically centred. .header__top and
   .nav-primary are DOM siblings inside .header > .constrain, so we make the
   constrain a flex row to line them up. Below 1200px = burger + full-screen
   overlay (unchanged).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Compact header heights (vertical padding on .header__top)
   -------------------------------------------------------------------------- */
.header__top { padding: 12px 0; }

@media screen and (min-width: 720px) {
  .header__top { padding: 14px 0; }
}

@media screen and (min-width: 1024px) {
  .header__top { padding: 16px 0; }
}

/* --------------------------------------------------------------------------
   Compact logo (>=1024px). At <1200px the badge <i> stays position:absolute
   (it adds no layout width); at >=1200px it flows inline (see below).
   -------------------------------------------------------------------------- */
@media screen and (min-width: 1024px) {
  .header__logo {
    padding-left: 58px;
    /* Height-based crest (viewBox 96x112 is taller than wide) so the whole
       icon incl. the "seit 1973" ribbon fits the box instead of being clipped
       at the bottom. 46px tall fits inside the 76px burger header. */
    background-size: auto 46px;
    background-position: left center;
    font-size: 19px;
    min-height: 46px;
    height: auto;
  }
}

/* --------------------------------------------------------------------------
   Fixed-header offset on the body (replaces the old 120/130/150/190 ladder).
   body.header-solid rules in the bundle are specificity 0,2,0; ours match,
   source order wins.

   Values are tied to MEASURED header heights, not estimates. Because the full
   "Georg Ludwig Rexroth-Stiftung" wordmark wraps to multiple lines on narrow
   viewports, the burger-state header is taller than a single row: ~104px
   below 720px and ~118px from 720-1023px. At >=1024px the compact logo
   collapses the bar to ~78px, and the >=1200px single row to ~62px. Each
   offset equals the measured header height (flush, no white gap).
   -------------------------------------------------------------------------- */
body.header-solid { padding-top: 104px; }

@media screen and (min-width: 720px) {
  body.header-solid { padding-top: 118px; }
}

@media screen and (min-width: 1024px) {
  body.header-solid { padding-top: 78px; }
}

/* Single-row inline header (>=1200px). Crest 44px + 16px constrain padding
   top/bottom => ~76px; offset matches flush. */
@media screen and (min-width: 1200px) {
  body.header-solid { padding-top: 76px; }
}

/* --------------------------------------------------------------------------
   Scroll state. Smooth transitions; solid navy background + subtle shadow.
   Do NOT change body padding-top on scroll (avoid reflow / layout jump).
   -------------------------------------------------------------------------- */
.header { transition: background-color .2s ease, box-shadow .2s ease; }
.header__top { transition: padding .2s ease; }
.header__logo { transition: background-size .2s, padding .2s, font-size .2s; }

body.window-scroll .header {
  background: #002b49;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}

/* Logo-shrink on scroll only in the single-row burger range (1024-1199px).
   At >=1200px the logo/nav share one row at a fixed compact size, so we leave
   it alone to keep the row height steady (no jitter). */
@media screen and (min-width: 1024px) and (max-width: 1199px) {
  body.window-scroll .header__top { padding: 10px 0; }
  body.window-scroll .header__logo {
    background-size: auto 42px;
    padding-left: 54px;
    min-height: 42px;
    font-size: 18px;
  }
}

/* --------------------------------------------------------------------------
   Burger overlay (below the inline threshold). Header is shorter now, so the
   overlay's top padding is reduced to sit just under the bar.
   -------------------------------------------------------------------------- */
@media (max-width: 1199px) {
  body.navigation .nav-primary { padding-top: 88px; }
}

@media (max-width: 719px) {
  body.navigation .nav-primary { padding-top: 78px; }
}

/* Badge below the inline threshold: the bundle turns the wordmark text AND the
   "Mehr als 50 Jahre" badge back on at >=1024px, but the badge is still
   position:absolute (top:2px right:-12px) there, so it overlaps the wordmark in
   the 1024-1199px burger range. The inline-pill treatment only has room on the
   spacious single-row header (>=1340px), so hide the badge everywhere below the
   inline threshold to avoid the overlap. (Below 1024px the wordmark itself is
   hidden, so this is a no-op there.) */
@media screen and (max-width: 1199px) {
  .header__logo i { display: none; }
}

/* --------------------------------------------------------------------------
   Inline single-row navigation (>= 1200px).
   .header__top (logo) and .nav-primary (nav) are DOM siblings inside
   .header > .constrain. We make the constrain a flex row: logo pinned left,
   nav pinned right, both vertically centred on ONE line.
   -------------------------------------------------------------------------- */
@media screen and (min-width: 1200px) {

  .header__burger { display: none; }

  /* One row: logo left, nav right. The small vertical padding here sets the
     row's breathing room above/below the 40px crest. The extra right padding
     keeps the nav clear of the fixed top-right .lang-switch (DE / EN), which
     is a viewport-anchored box, not part of the header flow; without it the
     last nav item slides under the switcher. */
  .header .constrain {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-top: 16px;
    padding-bottom: 16px;
    /* Right gutter clears the fixed switcher. The switcher is anchored to the
       viewport's right edge, so its intrusion into the (centred, max-1248px)
       constrain shrinks as the viewport widens: ~96px at 1200px but only
       ~57px once the constrain hits its max width. Two values keep the gutter
       just big enough at each end without over-eating the row. */
    padding-right: 104px;
  }

  /* .header__top now holds only the logo (burger hidden); no vertical padding
     of its own — the row height comes from the constrain padding + content. */
  .header__top {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    padding: 0;
    flex: 0 0 auto;
  }

  /* Crest sized by HEIGHT, not width: the icon's viewBox is 96x112 (taller
     than wide), so a width-based background-size:40px renders ~47px tall and
     the "Seit 1973" ribbon at the bottom gets clipped. Pin the height to 44px
     (auto width -> ~38px) and make the logo box at least that tall so the whole
     crest, ribbon included, is contained. constrain padding adds the breathing
     room above/below -> single row ~62px. */
  .header__logo {
    padding-left: 48px;
    background-size: auto 44px;
    background-position: left center;
    min-height: 44px;
    line-height: 44px;
    font-size: 17px;
  }

  /* Badge: flow inline as a small light-blue pill to the RIGHT of the
     wordmark instead of absolutely overlapping it. .header__logo is a flex
     row (align-items:center) so the pill vertically centres next to the name.
     Bundle base rule is position:absolute; reset it fully. The pill only has
     room beside the nav once the row is wide enough; below ~1340px the 7 long
     DE labels + the wordmark + the fixed top-right language switcher leave no
     slack, so the pill is hidden there (see the 1200-1339px rule below). */
  .header__logo i {
    position: static;
    transform: none;
    top: auto;
    right: auto;
    left: auto;
    display: inline-block;
    margin-left: 10px;
    padding: 2px 6px;
    font-size: 11px;
    line-height: 1.3;
    font-style: normal;
    color: #fff;
    background-color: #5cc9fa;
    border-radius: 3px;
    white-space: nowrap;
  }

  /* Undo the full-screen overlay; sit inline on the right of the same row.
     body.navigation .nav-primary{display:flex} in the bundle is 0,2,1, so we
     keep display:flex !important here and reset the overlay positioning. No
     border-top / margin-top / padding-top (that was the old second-row
     separator). */
  .nav-primary {
    display: flex !important;
    flex-direction: row;
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    background: none;
    align-items: center;
    justify-content: flex-end;
    flex: 0 1 auto;
  }

  .nav-primary .level_1 {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
    width: auto;
    overflow: visible;
  }

  /* Links and the active <strong>. Bundle selector
     ".nav-primary ul li a, .nav-primary ul li .active" is 0,3,1; ours
     ".nav-primary .level_1 li a / li strong" matches at 0,3,1 and wins on
     source order. Font reduced to 13px so all 7 DE labels + the wordmark fit
     one row inside the usable width at 1200px (owner-approved). */
  .nav-primary .level_1 li a,
  .nav-primary .level_1 li strong {
    display: block;
    padding: 7px 9px;
    font-size: 13px;
    line-height: 1.2;
    font-weight: 400;
    white-space: nowrap;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    transition: color .2s ease, background-color .2s ease, box-shadow .2s ease;
  }

  .nav-primary .level_1 li a:hover,
  .nav-primary .level_1 li a:focus-visible {
    background: rgba(255, 255, 255, .12);
    color: #fff;
  }

  .nav-primary .level_1 li a:focus-visible {
    outline: 2px solid #5cc9fa;
    outline-offset: 2px;
  }

  /* Active item. The bundle sets font-weight:900 !important on .active, so
     !important is required to land 700. */
  .nav-primary .level_1 li.active > strong {
    font-weight: 700 !important;
    color: #fff;
    cursor: default;
    box-shadow: inset 0 -2px 0 #5cc9fa;
  }
}

/* Narrow inline band (1200-1339px). Here the usable width is tightest: the 7
   DE labels + wordmark + the language-switcher gutter leave no room for the
   inline "Mehr als 50 Jahre" pill, so hide it in this band only. At >=1340px
   the row is wide enough and the pill returns beside the wordmark. */
@media screen and (min-width: 1200px) and (max-width: 1359px) {
  .header__logo i { display: none; }
}

/* From 1360px the constrain is at its max width and the viewport-anchored
   switcher only intrudes ~57px, so the wide right gutter would otherwise
   crowd the nav into the logo. Tighten it and the inline pill fits again. */
@media screen and (min-width: 1360px) {
  .header .constrain { padding-right: 64px; }
}

/* --------------------------------------------------------------------------
   Hero height must track the (reduced) header offset.
   The home hero image is sized `calc(100vh - 190px)` (in a separately loaded
   bundle) so that header + hero fill exactly one viewport, keeping the red
   icon-navigation band (Projekte / Finanzen / Spenden) just below the fold.
   190px was the OLD header height; with the compact header the hero was ~114px
   too short and the red band peeked above the fold before scrolling. Re-tie the
   hero height to the new body.header-solid offset per breakpoint (104/118/78/76,
   matching the padding-top ladder above). Higher specificity than the source
   rule (.hero-slider__item .image_container img, 0,2,1) so it wins regardless of
   stylesheet order; the min-height floors are left untouched. Scoped to
   header-solid so the transparent-header pages (where the header overlays the
   hero) are unaffected. */
body.header-solid .hero-slider__item .image_container img { height: calc(100vh - 104px); }

@media screen and (min-width: 720px) {
  body.header-solid .hero-slider__item .image_container img { height: calc(100vh - 118px); }
}

@media screen and (min-width: 1024px) {
  body.header-solid .hero-slider__item .image_container img { height: calc(100vh - 78px); }
}

@media screen and (min-width: 1200px) {
  body.header-solid .hero-slider__item .image_container img { height: calc(100vh - 76px); }
}

/* ---------------------------------------------------------------------------
   Heading-rank fixes (one <h1> per page) — keep the visuals identical.
   On the project detail pages the hero label "Projekte"/"Projects" was demoted
   from <h1> to a <p class="heading-1 hero-kicker"> so the page's real subject
   can be the single <h1>. heading-1 supplies the h1 weight/family; the hero's
   60px + uppercase came from the tag-specific .hero-img__content h1 rule, which
   no longer matches a <p>. Re-apply size + caps here at higher specificity so
   the kicker looks exactly like the old hero <h1>.
   --------------------------------------------------------------------------- */
.hero-img__content .hero-kicker {
  font-size: 60px;
  text-transform: uppercase;
  margin: .67em 0;
}

/* Home carousel: slides 2 and 3 had their <h1> demoted to <h2 class="heading-1">
   (heading-1 == the global h1 declaration, so size is unchanged). The white text
   and red <strong> came from .hero-slider__item__content h1 rules, which no longer
   match an <h2>; re-apply them for the <h2> so the slides look identical. */
.hero-slider__item__content h2 { color: #fff; }
.hero-slider__item__content h2 strong { color: #df0024; }

/* ---------------------------------------------------------------------------
   Hero text legibility. Both hero types already lay a 50% black scrim over the
   photo (.hero-img--filter .hero-img__content / .hero-slider__item--filter:before),
   but on bright, busy photos the lighter-weight white sub-headline (h5, weight
   400) and the red <strong> can still lose contrast. A subtle text-shadow lifts
   the type off any background without darkening the image further. Applies at
   all breakpoints.
   --------------------------------------------------------------------------- */
.hero-img__content h1,
.hero-img__content h5,
.hero-img__content .hero-kicker,
.hero-slider__item__content h1,
.hero-slider__item__content h2,
.hero-slider__item__content h5 {
  text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}

/* ---------------------------------------------------------------------------
   Form enhancements (contact / donate / sponsorship)
   Added when the forms were wired to /forms/submit.php (replacing Contao).
   --------------------------------------------------------------------------- */

/* Honeypot: an off-screen field that real users never see or fill. Bots that
   complete every input give themselves away. Hidden accessibly (not display:none,
   so some bots still find it) and kept out of the tab order. */
.hp {
  position: absolute !important;
  left: -9999px !important;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Consent checkbox row: checkbox sits in the left padding so the label text
   (including the inline privacy link) flows as one normal paragraph instead of
   being split into flex columns. */
.widget-checkbox label {
  display: block;
  position: relative;
  padding-left: 1.8em;
  font-size: 0.9rem;
  line-height: 1.45;
  cursor: pointer;
}
.widget-checkbox input[type="checkbox"] {
  position: absolute;
  left: 0;
  top: 0.2em;
  margin: 0;
}

/* Inline submit feedback (filled in by forms-submit.js). */
.form-status {
  margin: 1rem 0 0;
}
.form-status:empty {
  display: none;
}
.form-status--pending { color: #555; }
.form-status--ok      { color: #1c7c3c; font-weight: 600; }
.form-status--error   { color: #b3261e; font-weight: 600; }

/* ==========================================================================
   Accessibility: burger as a <button>, visible skip-link, keyboard focus.
   The burger changed from <a> to <button> (toggles body.navigation via the
   bundle's jQuery handler on .header__burger; aria-expanded synced by
   /assets/js/nav-a11y.js). Reset UA button chrome so it looks identical to
   the old anchor, then add a keyboard-visible focus ring.
   ========================================================================== */
.header__burger {
  background: none;
  border: 0;
  padding: 0 0 4px;
  margin: 0;
  font-family: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.header__burger:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
  border-radius: 2px;
}

/* Skip-to-content link: visually hidden (.invisible) until focused, then
   pinned top-left so keyboard users can jump straight to <main>. */
.skip-link:focus {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 1000;
  width: auto;
  height: auto;
  margin: 0;
  padding: 10px 16px;
  clip: auto;
  overflow: visible;
  opacity: 1;
  background: #002b49;
  color: #fff;
  border-radius: 4px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* ==========================================================================
   Leadership / trustee cards (verantwortliche / en/leadership)
   The CV trigger and the popup close used to be dead <a href="/#"> / "/en/">
   anchors whose only job was to toggle the bio overlay via trustees.js. They
   are now real <button>s (no dead link, correct semantics). The bundle styles
   them by class (.trustees__info__cv / .trustees__description__close); reset
   the UA button chrome so they render exactly as the old anchors did.
   ========================================================================== */
.trustees__info__cv {
  -webkit-appearance: none;
  appearance: none;
  padding: 0;
  background-color: transparent;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.trustees__description__close {
  -webkit-appearance: none;
  appearance: none;
  padding: 0;
  border: 0;
  font: inherit;
  cursor: pointer;
}
.trustees__info__cv:focus-visible,
.trustees__description__close:focus-visible {
  outline: 2px solid #5cc9fa;
  outline-offset: 2px;
}

/* Beirat cards now sit in a 3-up row (width-*--1of3). At that narrower width
   the role line (.trustees__info__text, min-height:64px in the bundle for the
   old 2-up layout) wraps to 3 lines on ~1024-1199px, so give it room to keep
   the three name rows aligned. */
@media screen and (min-width: 720px) {
  .width-lap--1of3 .trustees__info__text,
  .width-desk--1of3 .trustees__info__text { min-height: 80px; }
}

/* ==========================================================================
   Button system — primary / secondary / tertiary
   Replaces the legacy zoo of btn--{red,gray,sky,outline,outline-red,
   outline-gray,border-bottom} colour variants + btn--{radius,medium,small,
   noforse} sizers with three semantic roles and a few honest modifiers:
     .btn--primary    solid red CTA            (Spenden, Pate werden, …)
     .btn--secondary  outline, fills on hover  (most "go here" actions)
     .btn--tertiary   low-emphasis text link   (Alle Projekte, Mehr zum Spenden)
     .btn--on-dark    secondary variant for dark hero/teaser bands (white outline)
     .btn--sm         compact size             (project-card Details, biography)
     .btn--center     centre a block button    (pre-existing bundle modifier, kept)
   The legacy variant rules still sit in the compiled bundle but are no longer
   referenced from markup; these rules load last so the roles win the cascade.
   ========================================================================== */

/* Shared geometry. Kept display:block (matches the bundle base .btn) so the
   pre-existing .btn--center{margin:0 auto} keeps centring block buttons. */
.btn--primary,
.btn--secondary {
  display: block;
  width: -webkit-max-content;
  width: max-content;
  min-width: 174px;
  padding: 16px 28px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  border: 2px solid transparent;
  border-radius: 40px;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

/* Primary — solid red. */
.btn--primary {
  background-color: #df0024;
  border-color: #df0024;
  color: #fff;
}
.btn--primary:hover,
.btn--primary:focus-visible {
  background-color: #b3001d;
  border-color: #b3001d;
  color: #fff;
}

/* Secondary — red outline on light backgrounds; fills on hover. */
.btn--secondary {
  background-color: transparent;
  border-color: #df0024;
  color: #df0024;
}
.btn--secondary:hover,
.btn--secondary:focus-visible {
  background-color: #df0024;
  color: #fff;
}

/* Secondary on dark sections (hero slides, teaser bands) — white outline. */
.btn--secondary.btn--on-dark {
  border-color: #fff;
  color: #fff;
}
.btn--secondary.btn--on-dark:hover,
.btn--secondary.btn--on-dark:focus-visible {
  background-color: #fff;
  color: #002b49;
}

/* Tertiary — text link with a red underline rule. No pill, no min-width. */
.btn--tertiary {
  display: inline-block;
  width: auto;
  min-width: 0;
  padding: 8px 4px;
  background-color: transparent;
  border: 0;
  border-bottom: 2px solid #df0024;
  border-radius: 0;
  color: #002b49;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
  text-transform: none;
}
.btn--tertiary:hover,
.btn--tertiary:focus-visible {
  background-color: transparent; /* beat the bundle's .btn:hover red fill */
  color: #df0024;
}

/* Compact size. On project cards the bundle stretches .btn to width:100%
   (.projects-list__button-group .btn, higher specificity), so there this only
   trims the height; standalone it also drops the min-width. */
.btn--sm {
  min-width: 0;
  padding: 12px 20px;
  font-size: 13px;
}

/* Keyboard focus ring for every role. */
.btn--primary:focus-visible,
.btn--secondary:focus-visible,
.btn--tertiary:focus-visible {
  outline: 2px solid #5cc9fa;
  outline-offset: 2px;
}

/* ==========================================================================
   Spendenerfolg / Impact chart (.donations)
   The Contao bar chart rendered as thin (4-10px) red slivers with only a faint
   dashed grid and no solid baseline, and gave no read-out of the headline
   figure. Bundle bar widths are 4px (base) / 8px (>=481) / 10px (>=720). We
   thicken the bars, turn the 0-line into a solid baseline, firm up the y-axis,
   and add a value label on the latest (tallest) bar. All overrides match the
   bundle breakpoints; nothing edits the compiled bundle.
   ========================================================================== */
.donations__item { width: 8px; }
@media screen and (min-width: 481px) { .donations__item { width: 12px; } }
@media screen and (min-width: 720px) { .donations__item { width: 16px; } }

/* Firm up the vertical y-axis (bundle: 1px #ececec). */
.donations:before { background-color: #c2ccd3; }

/* Solid baseline: the bundle draws the 0-value gridline as a faint dashed line
   via .donations__values__item:first-child:before. Make it a solid, darker
   rule so the bars visibly sit on a baseline. */
.donations__values__item:first-child:before {
  border-top-style: solid;
  border-top-color: #9aa7b0;
}

/* Value label on a bar (used on the latest bar) — the cumulative read-out. */
.donations__item__value {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  color: #002b49;
  white-space: nowrap;
}
@media screen and (min-width: 720px) { .donations__item__value { font-size: 13px; } }

/* The latest bar is hard against the chart's right edge; anchor its label to
   the right so it never clips outside the chart. */
.donations__item:last-child .donations__item__value {
  left: auto;
  right: 0;
  transform: none;
}

/* Contact form: reveal field labels. The bundle hides .widget-text /
   .widget-textarea labels unless the <form> is .white (the Spenden form is;
   the contact form is not). We keep the contact form's two-column layout and
   grey inputs but show the labels for accessibility. Specificity (.ce_form …)
   beats the bundle's `form .formbody …` rule; header.css also loads last. */
.ce_form .formbody .widget-text label,
.ce_form .formbody .widget-textarea label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
}
.ce_form .formbody .widget-text label .mandatory,
.ce_form .formbody .widget-textarea label .mandatory {
  color: #df0024;
  margin-left: 5px;
}

/* Footer contact column: show phone + email directly above the contact links.
   Slightly emphasised, with a gap separating them from the link list below. */
.footer__contact {
  margin-bottom: 14px;
}
.footer__contact a {
  font-weight: 600;
  word-break: break-word;
}

/* Standort / Location: address card + local static map (OpenStreetMap render,
   saved as an image so the page makes no external requests / sets no cookies).
   Two columns on desktop/large-tablet, stacked below 900px. */
.standort-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 48px;
  align-items: center;
}
@media (max-width: 899px) {
  .standort-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}
.standort-card h2 {
  margin-top: 0;
}
.standort-card__address {
  font-style: normal;
  line-height: 1.7;
  margin: 0 0 22px;
}
.standort-card__contact {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
}
.standort-card__contact li {
  margin-bottom: 6px;
}
.standort-card__label {
  display: inline-block;
  min-width: 64px;
  font-weight: 600;
}
.standort-map {
  margin: 0;
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}
.standort-map img {
  display: block;
  width: 100%;
  height: auto;
}
.standort-map__attr {
  position: absolute;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 2px 7px;
  font-size: 11px;
  line-height: 1.5;
  color: #333;
  background: rgba(255, 255, 255, 0.82);
  border-top-left-radius: 6px;
}
.standort-map__attr a {
  color: inherit;
  text-decoration: underline;
}