/* ==========================================================================
   DropsA — LEGACY DESIGN BRIDGE
   Loaded last, after dropsa-industrial.css.

   86 live pages — the whole Industrie/Branchen section plus a slice of
   Produkte — never got migrated to the `ds-*` layer. They still carry the
   original markup: `.section-card`, `.info-box`, `.info-links`, `.cta-wrap`,
   `.list-cards`, `.cta-box`, `.related-links-card`.

   Only `.section-card` and `.card-btn` were ever styled (white card, red
   centred headings, justified body text). `.info-box`, `.info-links`,
   `.cta-wrap` and `.list-cards` have NO rules anywhere in the codebase, which
   is why those pages render as bare boxes and naked bullet lists.

   WHY A BRIDGE INSTEAD OF REWRITING THE HTML
   Those 86 pages come in 14 different structural shapes and their bodies are
   German technical copy. A blind regex rewrite across them risks mangling
   sentences for a purely visual gain. Restyling the existing class names
   reaches every shape at once, touches no copy, and is reversible by deleting
   one file. The markup keeps its old class names — that debt is cosmetic and
   can be cleaned up per page later.

   Everything below is expressed in the same tokens the ds-* layer uses, so
   these pages inherit the real design system rather than a copy of it.
   ========================================================================== */

/* ---------- page shell ---------- */
main.container,
main.branchen-main{
  display:block;
  width:min(100% - 2 * var(--ds-inset), calc(var(--ds-container) + 2 * var(--ds-gutter)));
  margin-inline:auto;
  padding-inline:var(--ds-gutter);
  padding-block:0 var(--ds-8);
}

/* ---------- intro block -> page hero ----------
   The first .section-card on these pages is the page introduction. Giving it
   the .ds-phero treatment is the single biggest reason they stop looking like
   a different website. */
.section-card--intro{
  position:relative; isolation:isolate; overflow:hidden;
  background:linear-gradient(135deg, var(--ds-navy-3) 0%, var(--ds-navy) 62%);
  color:#fff;
  border-radius:var(--ds-r-xl);
  box-shadow:none;
  max-width:none;
  margin:0 0 var(--ds-3);
  padding:clamp(34px,3.6vw,56px) clamp(20px,3vw,44px);
  text-align:center;
}
/* the same faint blueprint grid the real hero uses */
.section-card--intro::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:linear-gradient(180deg, #000 0%, transparent 92%);
  mask-image:linear-gradient(180deg, #000 0%, transparent 92%);
}
.section-card--intro h1{
  color:#fff;
  font-size:clamp(1.75rem,3.6vw,2.7rem); line-height:1.14; font-weight:700;
  letter-spacing:-.02em; text-wrap:balance;
  margin:0 auto var(--ds-4); max-width:20ch;
}
.section-card--intro p{
  color:#c6d4e8;
  font-size:clamp(1rem,1.4vw,1.125rem); line-height:1.7;
  text-align:center;            /* never justify: it opens rivers in German */
  margin:0 auto; max-width:64ch;
}
.section-card--intro strong{ color:#fff; font-weight:600; }
.section-card--intro a{ color:var(--ds-gold); }

/* ---------- ordinary content card ---------- */
.section-card:not(.section-card--intro){
  background:var(--ds-surface);
  border:1px solid var(--ds-line);
  border-radius:var(--ds-r-xl);
  box-shadow:var(--ds-shadow);
  max-width:none;
  margin:0 0 var(--ds-3);
  padding:clamp(24px,3vw,44px) clamp(20px,3vw,40px);
  color:var(--ds-body);
  font-size:1rem;
}
/* red, centred headings were the loudest tell that these pages are older */
.section-card:not(.section-card--intro) h1,
.section-card:not(.section-card--intro) h2,
.section-card:not(.section-card--intro) h3{
  color:var(--ds-ink);
  text-align:left;
  letter-spacing:-.015em;
  text-wrap:balance;
}
/* `margin-inline:auto` keeps the heading on the same left edge as the prose
   block below it (see `--measure` in dropsa-industrial.css). The shorthand
   `margin:0 0 …` used to sit here and reset it to 0, so the heading started
   ~190px left of the paragraph it introduces. */
.section-card:not(.section-card--intro) h2{
  font-size:clamp(1.4rem,2.4vw,1.9rem);
  margin:0 auto var(--ds-4);
}
.section-card:not(.section-card--intro) h3{ font-size:1.125rem; margin:var(--ds-5) 0 var(--ds-2); }
.section-card:not(.section-card--intro) p,
.section-card:not(.section-card--intro) ul,
.section-card:not(.section-card--intro) ol{
  color:var(--ds-body); line-height:1.75; text-align:left; font-size:1rem;
}
.section-card a{ color:var(--ds-link); font-weight:600; }

/* ---------- info box -> section panel (was completely unstyled) ---------- */
.info-box,
.related-links-card{
  background:var(--ds-surface);
  border:1px solid var(--ds-line);
  border-radius:var(--ds-r-xl);
  box-shadow:var(--ds-shadow);
  margin:0 0 var(--ds-3);
  padding:clamp(24px,3vw,40px) clamp(20px,3vw,36px);
}
.info-box__title,
.related-links-card h2{
  font-size:clamp(1.3rem,2.2vw,1.75rem); font-weight:700; color:var(--ds-ink);
  margin:0 0 var(--ds-5); letter-spacing:-.015em;
}
/* a gold rule under the panel title, matching .ds__eyebrow's accent */
.info-box__title::after,
.related-links-card h2::after{
  content:""; display:block; width:34px; height:3px; border-radius:2px;
  background:var(--ds-gold); margin-top:var(--ds-3);
}

/* ---------- link lists -> the ds-links grid (was unstyled) ---------- */
.info-links,
.related-links-card ul{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr));
  gap:var(--ds-3);
}
.info-links a,
.related-links-card ul a{
  display:flex; align-items:center; gap:9px; height:100%;
  min-height:52px; padding:12px var(--ds-4);
  border:1px solid var(--ds-line); border-radius:10px;
  background:var(--ds-bg); color:var(--ds-ink);
  font-size:.9375rem; font-weight:600; line-height:1.45; text-decoration:none;
  box-sizing:border-box;
  transition:border-color var(--ds-t), background var(--ds-t), transform var(--ds-t);
}
.info-links a:hover,
.related-links-card ul a:hover{
  border-color:var(--ds-gold); background:#fffdf5; transform:translateY(-2px);
}
/* Items written as <a href="#"> are not links, they are bullet points — the
   page uses an anchor purely to get list markup. Render them as statements so
   nobody clicks a dead link. */
.info-links a[href="#"]{
  background:transparent; border:0; border-left:3px solid var(--ds-gold);
  border-radius:0; padding:6px 0 6px var(--ds-4); min-height:0;
  color:var(--ds-body); font-weight:400; cursor:default; pointer-events:none;
}
.info-links a[href="#"]:hover{ background:transparent; transform:none; border-color:var(--ds-gold); }

/* ---------- CTA row ---------- */
.cta-wrap{
  display:flex; flex-wrap:wrap; gap:var(--ds-3); justify-content:center;
  margin:0 0 var(--ds-3);
}
.section-card .cta-wrap,
.info-box .cta-wrap{ margin-top:var(--ds-6); }

/* ---------- card grids -> ds-cards ---------- */
.list-cards{
  list-style:none; margin:0 0 var(--ds-3); padding:0;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(272px,1fr));
  gap:var(--ds-5);
}
.list-cards__item{
  display:flex; flex-direction:column; gap:6px;
  background:var(--ds-surface);
  border:1px solid var(--ds-line); border-radius:var(--ds-r-lg);
  padding:var(--ds-5);
  box-shadow:0 1px 2px rgba(8,27,53,.05);
  transition:transform var(--ds-t), box-shadow var(--ds-t), border-color var(--ds-t);
}
.list-cards__item:hover{
  transform:translateY(-4px); box-shadow:var(--ds-shadow-lg); border-color:#c3d3e6;
}
.list-cards__item h2,
.list-cards__item h3{
  font-size:1.0625rem; font-weight:700; color:var(--ds-ink);
  margin:0 0 4px; text-align:left;
}
.list-cards__item p{ font-size:.9375rem; line-height:1.6; color:var(--ds-body); margin:0; text-align:left; }
.list-cards__item a{ color:var(--ds-link); font-weight:600; }

/* ---------- closing CTA band ---------- */
.cta-box{
  background:linear-gradient(135deg, var(--ds-navy-3) 0%, var(--ds-navy) 65%);
  color:#fff; text-align:center;
  border-radius:var(--ds-r-xl);
  padding:clamp(36px,4.5vw,64px) clamp(20px,3vw,40px);
  margin:0 0 var(--ds-3);
  border:0; box-shadow:none; max-width:none;
}
.cta-box h2,
.cta-box h3{ color:#fff; font-size:clamp(1.5rem,2.8vw,2.1rem); margin:0 0 var(--ds-3); letter-spacing:-.02em; }
.cta-box p{ color:#c2d0e6; font-size:1.0625rem; line-height:1.7; margin:0 auto var(--ds-5); max-width:60ch; text-align:center; }

/* ---------- buttons ----------
   style.css forces every legacy button with two !important rules:
     .cta-btn,.btn,...,.card-btn,.seo-btn,... { border-radius:999px !important }
     .cta-btn,.btn-primary,.card-btn,...      { background:linear-gradient(...) !important }
   A 999px pill with a vertical gradient is the old look; the ds layer uses a
   10px radius and a flat gold. !important here is answering !important there —
   the only way to win short of editing style.css, which many unmigrated pages
   still depend on. */
.card-btn,
.cta-btn{
  border-radius:10px !important;
  background:var(--ds-gold) !important;
}
.card-btn:hover,
.cta-btn:hover{ background:var(--ds-gold-dark) !important; }

.card-btn,
.cta-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:48px; padding:12px 24px;
  border-radius:10px; border:1px solid var(--ds-gold);
  background:var(--ds-gold); color:var(--ds-navy);
  font-size:.9688rem; font-weight:700; text-decoration:none; white-space:nowrap;
  box-shadow:none;
  transition:background var(--ds-t), transform var(--ds-t), box-shadow var(--ds-t);
}
.card-btn:hover,
.cta-btn:hover{
  background:var(--ds-gold-dark); border-color:var(--ds-gold-dark);
  transform:translateY(-2px); box-shadow:0 10px 24px rgba(255,193,7,.28);
}
.cta-box .card-btn,
.cta-box .cta-btn{ box-shadow:0 10px 28px rgba(255,193,7,.22); }

/* ---------- FAQ ---------- */
.faq-question{
  font-size:1.0625rem; font-weight:700; color:var(--ds-ink);
  margin:var(--ds-5) 0 var(--ds-2); text-align:left;
}
.faq-answer{
  color:var(--ds-body); line-height:1.75; text-align:left;
  margin:0 0 var(--ds-4); padding-left:var(--ds-4);
  border-left:2px solid var(--ds-line);
}

/* ==========================================================================
   2026-08-01 review — three generations were still unbridged, and the ones
   that were bridged stopped short of the DS language. The site must read as
   one design regardless of which generation a page was built in.
   ========================================================================== */

/* ---------- legacy CTA band -> .ds-cta ----------
   `.cta-wrap` sitting loose on the page had no band behind it, so a primary
   action floated between two white cards with nothing marking it as the end of
   the page. Give it the same navy block the DS CTA uses. */
.section-card + .cta-wrap,
main > .cta-wrap{
  background:linear-gradient(135deg, var(--ds-navy-3) 0%, var(--ds-navy) 100%);
  border-radius:var(--ds-r-xl);
  padding:var(--ds-8) var(--ds-gutter);
  margin:var(--ds-6) auto;
  width:min(100% - 2 * var(--ds-inset), calc(var(--ds-container) + 2 * var(--ds-gutter)));
}
main > .cta-wrap .card-btn, .section-card + .cta-wrap .card-btn{
  box-shadow:0 10px 28px rgba(255,193,7,.22);
}

/* NOTE — 2026-08-01, second pass: a `content:"→"` was added here to match the DS
   buttons. It escaped the button box on the pages where `.card-btn` is not the
   flex container the rule assumed, leaving a bare arrow floating on the navy
   band next to the button. Injecting glyphs through ::after depends on layout
   the bridge does not control — the DS arrow is real markup inside the anchor,
   and that is the only place it belongs. Same for the `↗` on `.info-links`,
   which landed at random offsets. Both removed; do not reintroduce. */

/* ---------- "Weiterführende Inhalte" box -> .ds-inline ---------- */
.info-box{
  background:var(--ds-bg); border:1px solid var(--ds-line);
  border-radius:var(--ds-r-xl); padding:clamp(20px,2.6vw,34px);
  margin:var(--ds-6) auto;
  width:min(100% - 2 * var(--ds-inset), calc(var(--ds-container) + 2 * var(--ds-gutter)));
}
.info-box__title{
  font-size:clamp(1.15rem,2vw,1.45rem); font-weight:700; color:var(--ds-ink);
  text-align:left; margin:0 0 var(--ds-4); letter-spacing:-.015em;
}
.info-box__title::after{
  content:""; display:block; width:34px; height:3px; background:var(--ds-gold);
  border-radius:2px; margin-top:var(--ds-3);
}
.info-links{
  list-style:none; margin:0; padding:0; display:grid; gap:10px;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
}
.info-links a{
  display:flex; align-items:center; gap:10px; height:100%;
  background:var(--ds-surface); border:1px solid var(--ds-line);
  border-radius:var(--ds-r); padding:13px 16px;
  color:var(--ds-ink); font-weight:600; font-size:.9375rem; text-decoration:none;
  transition:background var(--ds-t), border-color var(--ds-t), transform var(--ds-t);
}
.info-links a:hover{
  background:#fff; border-color:var(--ds-gold);
  transform:translateY(-2px); box-shadow:var(--ds-shadow);
}

/* ==========================================================================
   CTA SCOPING — read this before changing any button rule.

   `style.css` styles `.cta-btn, .btn, .btn-primary, .card-btn, .seo-btn,
   .card-cta` in ONE selector list, and pins `.card-btn` at
   `width:87%; max-width:220px; white-space:nowrap`. Three unrelated components
   share those classes:

     A. the CTA inside a card   — `.card-cta` (it IS the button, not a wrapper)
     B. the CTA in a page band  — `.card-btn` inside `.cta-wrap` / `.seo-cta`
     C. the link pills          — `.info-links a`

   Because they were all one selector, every fix to one silently changed the
   other two — a full-width card button, then a band button narrower than its
   own label, in turn. The rules below are therefore **scoped by context**:
   shared rules may set colour, radius and type; only a scoped rule may set
   width, alignment or position. Keep it that way.
   ========================================================================== */

/* shared token look only — never size or position here */
.card-btn, .cta-btn, .card-cta{
  white-space:normal;   /* a long label wraps inside the button, not out of it */
  text-align:center; text-wrap:balance;
}

/* --- B. page band CTA: sized by its label -------------------------------- */
.cta-wrap .card-btn, .cta-wrap .cta-btn,
.seo-cta .card-btn, .seo-cta .cta-btn,
.cta-box .card-btn, .cta-box .cta-btn{
  width:auto; max-width:100%; margin-inline:auto;
}

/* ---------- containment ----------
   The legacy shells are `content-box`, so any width these bridge rules set has
   their own padding added on top. At 375px that pushed `.section-card` to 409px,
   `.info-box` to 397px and `.cta-wrap` to 387px — all wider than the screen. The
   page did not scroll sideways only because `overflow-x` was clipping them, so
   the content was being cut off rather than fitted. Border-box plus a hard
   ceiling makes the width declarations mean what they say. */
.section-card, .section-card--intro, .info-box, .cta-wrap,
.seo-section, .seo-cta, .cta-box, .intro-cards, .list-cards{
  box-sizing:border-box; max-width:100%;
}
.section-card *, .info-box *, .cta-wrap *{ box-sizing:border-box; }

/* ---------- intro-cards: the overlap bug ----------
   `style.css` lays these out as `display:flex` and pins each card with
   `min-width:390px; max-width:440px`. The bridge switches the container to a
   `grid` with `auto-fit / minmax()` tracks — but the item's own min-width
   survived, so on a 1200px container the tracks came out 282px while every card
   still rendered 390px. Each card overflowed its track by ~108px and sat on top
   of its neighbour; all four adjacent pairs overlapped.
   Once the grid owns the sizing, the item must stop declaring its own. */
.intro-cards .intro-card{
  min-width:0; max-width:none; width:auto; flex:initial;
}
/* the grid needs a floor of its own, or a single card stretches to full width */
.intro-cards{ grid-template-columns:repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }

/* card titles centre with the card, matching the DS product cards.
   The type rules further down in this file own `text-align`; they are set to
   center there rather than fought with a duplicate rule here. */
.intro-cards .card-text{ align-items:center; }

/* --- A. in-card CTA ------------------------------------------------------
   `.card-cta` is the button itself, not a wrapper around one. It is the last
   flex child of `.card-text`, so `margin-top:auto` pins it to the bottom of the
   card and all buttons in a row line up regardless of how long the copy above
   them runs. It is sized by its label, centred in the card. */
.intro-cards .card-cta,
.list-cards__item .card-cta{
  margin-top:auto; align-self:center;
  width:auto; max-width:100%;
}
/* keep breathing room between the copy and the button even when the text is
   long enough that `margin-top:auto` collapses to zero */
.intro-cards .card-text > p:last-of-type,
.list-cards__item p:last-of-type{ margin-bottom:var(--ds-4); }

/* ---------- list-cards ----------
   NOTE — 2026-08-01, second pass: `padding:0` plus per-child `padding-inline`
   was tried here to give the cards a full-bleed media plate. It stripped the
   padding the card relies on and the children re-applied it inconsistently, so
   text spilled past the card edge and neighbouring cards visually collided.
   The card keeps its own padding; only the image is allowed to bleed, via
   negative margins that cannot disturb the box. */
.list-cards__item{ position:relative; border-radius:var(--ds-r-lg); }
.list-cards__item > img,
.list-cards__item picture img{
  display:block; width:calc(100% + 2 * var(--ds-5));
  margin:calc(-1 * var(--ds-5)) calc(-1 * var(--ds-5)) var(--ds-4);
  max-width:none; height:auto; aspect-ratio:16/10; object-fit:cover;
  border-radius:var(--ds-r-lg) var(--ds-r-lg) 0 0;
}
/* titles centre with the card, matching the DS product cards */
.list-cards__item h2, .list-cards__item h3{ text-align:center; }
.list-cards__item p{ text-align:center; }
.list-cards__item .card-btn{ margin-top:auto; }

/* ---------- subcategory cards: the /produkte/ category grids ----------
   A fifth card generation, on filter / fittings / steuerung / sensorik / mms /
   oelnebel / buersten and friends. `.subcategory-card` is a flex column of
   image + `.card-divider` + a bare `<span>` title, pinned at `min-height:320px`
   while its content measures ~190px — which is where the large empty area under
   every title came from. It also carries the old blue rule above the title.
   Brought onto the DS card language: media plate, centred title, gold hover
   rule, and height driven by content rather than a fixed floor. */
.subcategory-cards-row.subcategory-cards-row{
  display:grid; gap:var(--ds-5);
  grid-template-columns:repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  justify-content:center; align-items:stretch;
  padding-inline:0;
  width:min(100% - 2 * var(--ds-inset), calc(var(--ds-container) + 2 * var(--ds-gutter)));
  margin-inline:auto;
}
.subcategory-card.subcategory-card{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; gap:var(--ds-3);
  min-height:0; height:100%;
  padding:var(--ds-5) var(--ds-4);
  background:var(--ds-surface); border:1px solid var(--ds-line);
  border-radius:var(--ds-r-lg); box-shadow:var(--ds-shadow);
  text-decoration:none;
  transition:transform var(--ds-t), box-shadow var(--ds-t), border-color var(--ds-t);
}
.subcategory-card.subcategory-card:hover{
  transform:translateY(-4px); box-shadow:var(--ds-shadow-lg);
  border-color:#c3d3e6; background:var(--ds-surface);
}
.subcategory-card.subcategory-card::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px;
  background:var(--ds-gold); transform:scaleX(0); transform-origin:left;
  transition:transform var(--ds-t);
}
.subcategory-card.subcategory-card:hover::after{ transform:scaleX(1); }

/* the image sits on a plate and is never upscaled past its natural size */
.subcategory-card.subcategory-card img{
  width:100%; aspect-ratio:4/3; object-fit:contain;
  background:#fff; border:1px solid var(--ds-line-soft);
  border-radius:var(--ds-r); padding:var(--ds-3);
  box-sizing:border-box;
}
/* the blue rule is the old visual language; the gold hover rule replaces it */
.subcategory-card.subcategory-card .card-divider{ display:none; }
/* the title is a bare span — give it the DS card type and push it to sit
   directly under the media rather than floating in dead space */
.subcategory-card.subcategory-card > span{
  margin-top:auto; padding-top:var(--ds-1);
  font-size:1.0313rem; font-weight:700; line-height:1.35;
  color:var(--ds-ink); text-align:center; text-wrap:balance;
  /* reserve two lines so a one-line and a two-line title in the same row start
     on the same baseline instead of stepping against each other */
  min-height:2.7em; display:flex; align-items:center; justify-content:center;
}

/* ---------- seo-* generation (40 pages, previously unbridged) ---------- */
.seo-section{
  width:min(100% - 2 * var(--ds-inset), calc(var(--ds-container) + 2 * var(--ds-gutter)));
  margin-inline:auto; padding:var(--ds-section-y) 0; border-radius:var(--ds-r-xl);
}
.seo-section-alt{ background:var(--ds-bg); }
.seo-section h2{
  font-size:clamp(1.25rem,2.2vw,1.55rem); font-weight:700; color:var(--ds-ink);
  letter-spacing:-.01em; margin:0 0 var(--ds-4); text-align:left;
}
.seo-section h2::before{
  content:""; display:block; width:34px; height:3px; background:var(--ds-gold);
  border-radius:2px; margin-bottom:var(--ds-3);
}
.seo-section p, .seo-section li{ color:var(--ds-body); line-height:1.75; text-align:left; }
.seo-cta, .cta-box{
  background:linear-gradient(135deg, var(--ds-navy-3) 0%, var(--ds-navy) 100%);
  border-radius:var(--ds-r-xl); padding:var(--ds-8) var(--ds-gutter);
  margin:var(--ds-6) auto; text-align:center;
  width:min(100% - 2 * var(--ds-inset), calc(var(--ds-container) + 2 * var(--ds-gutter)));
}
/* When a navy CTA band sits inside a `.section-card`, the card's own dark text
   rules (`.section-card:not(.section-card--intro) h2/p`, 0,2,1 — and a global
   `.section-card p{color:… !important}`) outrank the plain `.cta-box` colours,
   so the heading/text render dark-on-navy = invisible. Force white/light here:
   the bridge loads last, so `!important` wins the tie against the global rule. */
.seo-cta h2, .cta-box h2, .seo-cta h3, .cta-box h3{ color:#fff !important; }
.seo-cta p, .cta-box p{ color:#c6d4e8 !important; }
.seo-card{
  background:var(--ds-surface); border:1px solid var(--ds-line);
  border-radius:var(--ds-r-lg); padding:var(--ds-5); box-shadow:var(--ds-shadow);
}

/* ---------- faq-list -> .ds-faq ----------
   The FAQ pages render question/answer as two spans in a list item. Give them
   the card rhythm the DS accordion has, so a FAQ page does not read as a
   different site. */
.faq-list{ list-style:none; margin:0; padding:0; display:grid; gap:var(--ds-3); }
.faq-list > li{
  background:var(--ds-surface); border:1px solid var(--ds-line);
  border-left:3px solid var(--ds-gold); border-radius:var(--ds-r);
  padding:var(--ds-4) var(--ds-5); box-shadow:var(--ds-shadow);
}
.faq-question{
  display:block; font-weight:700; color:var(--ds-ink); font-size:1.0313rem;
  line-height:1.4; margin-bottom:6px;
}
.faq-answer{
  display:block; color:var(--ds-body); font-size:.9688rem; line-height:1.7;
  text-align:left;
}

/* ---------- accessibility ---------- */
.info-links a:focus-visible,
.list-cards__item a:focus-visible,
.card-btn:focus-visible,
.cta-btn:focus-visible{
  outline:3px solid var(--ds-gold-dark); outline-offset:3px; border-radius:var(--ds-r-sm);
}

@media (max-width:560px){
  .info-links, .related-links-card ul, .list-cards{ grid-template-columns:1fr; }
  .cta-wrap{ flex-direction:column; }
  .cta-wrap .card-btn, .cta-wrap .cta-btn{ width:100%; }
}
@media (prefers-reduced-motion:reduce){
  .info-links a, .list-cards__item, .card-btn, .cta-btn{ transition:none; }
  .info-links a:hover, .list-cards__item:hover,
  .card-btn:hover, .cta-btn:hover{ transform:none; }
}

/* ---------- blocks branchen.css used to own ----------
   Only a handful of pages use these, but branchen.css has been retired, so
   without them those three pages would render unstyled. */
.intro-cards{
  list-style:none; margin:var(--ds-5) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(272px,1fr)); gap:var(--ds-5);
}
.intro-cards .intro-card{
  display:flex; flex-direction:column;
  background:var(--ds-surface); border:1px solid var(--ds-line);
  border-radius:var(--ds-r-lg); overflow:hidden;
  box-shadow:0 1px 2px rgba(8,27,53,.05);
  transition:transform var(--ds-t), box-shadow var(--ds-t), border-color var(--ds-t);
}
.intro-cards .intro-card:hover{ transform:translateY(-4px); box-shadow:var(--ds-shadow-lg); border-color:#c3d3e6; }
.intro-cards .intro-card img{ display:block; width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; }
.intro-cards .card-text{ padding:var(--ds-4) var(--ds-5) var(--ds-5); display:flex; flex-direction:column; gap:6px; flex:1; }
.intro-cards .card-text h2,
.intro-cards .card-text h3{ font-size:1.0625rem; font-weight:700; color:var(--ds-ink); margin:0; text-align:center; }
.intro-cards .card-text p{ font-size:.9375rem; line-height:1.6; color:var(--ds-body); margin:0; text-align:center; }

.faq-section{
  background:var(--ds-surface); border:1px solid var(--ds-line);
  border-radius:var(--ds-r-xl); box-shadow:var(--ds-shadow);
  padding:clamp(24px,3vw,40px) clamp(20px,3vw,36px); margin:0 0 var(--ds-3);
}
.faq-section h2{ font-size:clamp(1.3rem,2.2vw,1.75rem); color:var(--ds-ink); margin:0 0 var(--ds-5); text-align:left; }