/* Section CSS from the approved mockup.
 *
 * The mockup keeps shared chrome in awo.css and each page's section rules in its own
 * inline <style>. Those per-page rules are what the section blocks need, so they live
 * here rather than in design.css, which stays a clean copy of awo.css and can be
 * re-synced wholesale when the mockup changes.
 */

/* ---------- Hero (startseite) ---------- */
.hero{position:relative; background:transparent; margin-top:33px}  /* white gap header->hero: XD 39.8 x0.822 */
/* Red band (full-bleed) sits LOWER than the image, so the image peeks ~25px above it. XD: img 650, red 619 x0.822 */
.hero::before{content:''; position:absolute; left:0; right:0; top:25px; bottom:0; background:var(--red); z-index:0}
.hero__img{position:relative; z-index:1; display:block; width:100%; max-width:var(--container); margin:0 auto; height:534px; object-fit:cover}  /* aligned to content width (cards) */
.hero__box{position:absolute; z-index:2; bottom:24px; left:max(0px,calc((100% - var(--container))/2));
  background:var(--red); color:#fff; padding:2.2rem 2.4rem 2rem 12px; max-width:460px}  /* bottom:24 leaves a photo strip below; left pad small -> text aligns with photo edge (XD) */
.hero__box h1{color:#fff; font-size:1.9rem; line-height:1.13; margin-bottom:.7rem}  /* XD measured ~30px (smaller than section headings) */
.hero__box p{color:#fff; font-size:.9rem; opacity:.95; margin:0 0 1rem}
.hero__box .link-arrow{color:#fff}
/* News cards live in design.css now (shared across home + News/Presse listings). */
/* ---------- Was wir machen ---------- */
.tiles{display:grid; grid-template-columns:repeat(3,1fr); gap:33px 28px}  /* XD measured: row 33, col 28 */
.tile{background:var(--red); color:#fff; padding:1.5rem 1.6rem; min-height:120px; display:flex; flex-direction:column; justify-content:center; gap:18px}  /* breathing room between title and "mehr Infos" */
.tile b{font-size:19px; line-height:21px}        /* XD 24/26 ×0.79 */
.tile .link-arrow{color:#fff; font-size:14px; line-height:24px}  /* XD 18/30 ×0.79 */
/* Hover and keyboard focus invert the tile to black, the same treatment the buttons and the
   Einrichtung jump links already use, so the site behaves consistently. Contrast rises rather than
   falls (white on #171717 is 17.9:1 against 4.9:1 on red), and the colour change is not the only
   affordance — the whole tile is a link and carries its own arrow. */
.tile{transition:background-color .15s}
.tile:hover,.tile:focus-visible{background:var(--ink)}
.tile:focus-visible{outline:2px solid var(--ink); outline-offset:3px}
@media(max-width:860px){
  .tiles{grid-template-columns:1fr 1fr}
  /* Hero on mobile: same idea as desktop, not an image boxed in red. The image sits
     at content width and the red band (::before) starts partway down it, so the top
     of the photo is on white and the rest overlaps the red — measured 34px of photo
     above the red on the artboard. The image is cropped landscape (ratio ~2.3). */
  .hero{margin-top:0; background:transparent; padding:0; position:relative}
  .hero::before{display:block; top:34px; bottom:0; left:0; right:0}
  .hero__img{position:relative; z-index:1; width:calc(100% - 32px); max-width:none; height:150px;
    object-fit:cover; margin:0 16px}
  .hero__box{position:relative; z-index:1; left:auto; bottom:auto; width:auto; max-width:none;
    margin:0 16px; padding:22px 0 26px; background:transparent}
  /* Intro paragraph is bold on mobile, and more air before "mehr Infos". */
  .hero__box p{font-weight:700; margin-bottom:2.6rem}
}
@media(max-width:560px){ .tiles{grid-template-columns:1fr} }

/* Vertical rhythm between sections.
 *
 * The mockup carries these as an inline style on every <section>, which is how it
 * beats `.container{padding:0}` — a class selector that would otherwise win over
 * `section{padding:47px 0}`. Blocks emit classes rather than inline styles, so the
 * spacing is declared here instead.
 *
 * The selectors name both classes on purpose. `.awo-section` alone ties with
 * `.container{padding:0}` in design.css, and a tie is settled by which file loads last --
 * which is not something this file can rely on. On the right-to-left pages the order comes
 * out inverted, design.css last, and the whole rhythm collapsed to zero: measured, every
 * section on the Arabic pages sat at 0px while the same page in German sat at 105. Naming
 * both classes wins on specificity instead, whatever the order. Every block that emits
 * awo-section emits container with it.
 */
.container.awo-section { padding-top: var(--section-gap); }
/* The first section under the hero sits closer, as in the mockup. */
.container.awo-section--tight { padding-top: 66px; }

/* The section already carries the gap, so the listing block's optional heading does not add its
   own on top: padding does not collapse with a child's margin, and the two would add up --
   measured, the overview went from 105px to 134 before this rule existed.

   The heading's own margin is the fallback for a page that does not load this file, where the
   block follows the intro directly and the heading would otherwise sit against it. That used to
   include the Fachbereich landing pages, which is why their heading sat at 29px while the
   Einrichtungen overview sat at 105. They load this file now, so both sit at 105 and the two
   pages finally share one rhythm.

   Both classes are named here for the same reason as the rule above: on its own this selector ties
   with the per-block fallback in design.css, and the offers page loads this file before design.css,
   which handed the fallback the tie and put the heading 134px under the intro against 105 on the
   facilities overview -- the same drift this rule exists to prevent. */
.container.awo-section > .section-h { margin-top: 0; }

/* Same idea for the filter when it opens the section, which happens on a listing that carries no
   Zwischentitel: .nfilter has a margin of its own, and on top of the section's padding it would
   push the listing 29px lower than the ones that do have a heading. Whichever comes first sits on
   the section's gap and nothing else. */
.container.awo-section > .nfilter:first-child { margin-top: 0; }