/* Angebote overview — /angebote.
   Only the classes specific to this page live here; container, breadcrumb, page-intro,
   section-h and the buttons come from design.css. */

/* The filter is the shared dropdown (.nfilter and .nselect in design.css), the same component the
   facilities and news listings use. It replaced a <select> with its own "Filtern" button: with one
   single-choice filter left, each option is a link, so choosing one applies it and no button is
   needed -- and nobody is navigated while still choosing (WCAG 3.2.2), which is what the button
   used to protect. Nothing is needed here for it. */

.agrid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--grid-gap-wide)}

.acard{background:#fff; box-shadow:0 3px 12px rgba(0,0,0,.2); display:flex; flex-direction:column}
.acard__media{position:relative; overflow:hidden}
.acard__media img{height:171px; width:100%; object-fit:cover; display:block; transition:transform .35s ease}
/* Card hover: a smooth zoom on the image (WCAG AA: colour/contrast unchanged; motion is
   suppressed for users who ask for reduced motion). */
.acard:hover .acard__media img,.acard:focus-within .acard__media img{transform:scale(1.05)}
@media(prefers-reduced-motion:reduce){
  .acard__media img{transition:none}
  .acard:hover .acard__media img,.acard:focus-within .acard__media img{transform:none}
}
.acard__body{padding:.85rem 1rem 1.1rem; display:flex; flex-direction:column; flex:1}
.acard__name{font-weight:700; font-size:1.05rem; line-height:1.3}
.acard__name a{color:inherit; text-decoration:none}
/* The town sits above the name and reads like the Fachbereich on a facility card and the date on a
   news card: a quiet line that places the entry before naming it. Same values as .kcard__fz. */
.acard__ort{color:var(--ink); font-size:14px; line-height:21px; font-weight:400; margin-bottom:.5rem}
/* The arrow link sits at the bottom edge of the body, so a row of cards shows it at one height
   whether the names run to one line or two. Same contract as .kcard. */
.acard .link-arrow{font-size:14px; line-height:20px; margin-top:auto}

.aempty{color:var(--ink2); margin:2rem 0}

@media(max-width:860px){.agrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.agrid{grid-template-columns:1fr}}

/* Single Angebot — no dedicated XD screen exists for it, so it follows the content page
   patterns: a single column of content blocks. */
/* The wrapper spans the container and does NOT set a width of its own: every block inside
   already limits itself to the reading column (.prose, .awo-figure in content.css), which is
   how the standard content pages are built. Limiting here as well would apply the same
   percentage twice -- the text would end up at roughly 43% of the container instead of the
   65.85% it reads at everywhere else. */
.asingle__media{max-width:var(--content-col)}
.asingle__media img{width:100%; height:auto; display:block; margin-bottom:1.4rem}

/* Text limits itself to the reading column; a gallery or an image block keeps the full content
   width, which is how the design draws them and how the standard content pages behave. Capping
   the wrapper instead would drag the media in with the text. */
.asingle__content{color:var(--ink2); line-height:var(--lh-lead)}
.asingle__content > p,
.asingle__content > ul,
.asingle__content > ol,
.asingle__content > h2,
.asingle__content > h3,
.asingle__content > h4,
.asingle__content > blockquote{max-width:var(--content-col)}
.asingle__content > p{margin:0 0 1.1rem}
.asingle__content > p:last-child{margin-bottom:0}
/* A content block brings its own .container, and here it lands inside the one the template
   already opened. On narrow screens both would add their side padding and the block would sit
   inset twice, narrower than the text above it. */
.asingle__content .container{padding-left:0; padding-right:0}

/* --- Angebot hero without a photo ---------------------------------------------------------
   The designed hero floats the contact box over the right of the image, so it is positioned
   against an image that is always there on an Einrichtung. An Angebot may have no image, and
   falling back to the photo that ships with the design would put a Kita building at the top of a
   counselling service. With no image to float over, the box becomes a normal block: the layout
   collapses to its own height instead of reserving the 482px the photo would have occupied.
   Scoped to the modifier the Angebot template emits, so the Einrichtung hero is untouched. */
.khero--noimg{min-height:0}
/* 461px = the 42.2% the box occupies over the 1092 content width, so a standalone box keeps the
   width it has on an Einrichtung instead of stretching to the text column. Below that it just
   fills the width available, which is what the mobile rule does for the box with an image. */
.khero--noimg .khero__box{position:static;transform:none;width:100%;max-width:461px;min-height:0}

/* An offer with no image and no contact details ends its title block at the heading. The first
   content section carries the top separation that holds it away from the section above it, and
   with nothing above it that separation reads as a hole under the heading. Adjacent sibling, so it
   applies to exactly that one case and cannot move a page that has a hero. */
.kpage--bare + .kpage--gap{padding-top:0}