/* ============================================================
   Kita-Landingpage (single Einrichtung).
   Ported from the mockup. The chrome, container,
   breadcrumb, headings, --content-col and the mobile heading scale come from design.css;
   this file adds only the page-specific sections (hero, accordion, Öffnungszeiten,
   Downloads, Kooperationspartner, logo grids and the anchor navigation).
   ============================================================ */

/* --content-col: the single content column every block on the page shares — the hero photo,
   the prose, the accordion dividers and the boxes all end on the same vertical (XD). */
.kpage{max-width:var(--container)}
/* A section that starts a new topic keeps the page's uniform whitespace above it. Sections that
   continue the one before (the accordion under "Lage und Umgebung") deliberately do not. */
.kpage--gap{padding-top:var(--section-gap)}
.kpage h1{font-size:var(--fs-h1);line-height:1.09;margin:.5rem 0 1.7rem;max-width:640px}  /* larger, breaks to 2 lines (XD) */
.kpage h2.section-h{margin-top:0}
.kprose{max-width:var(--content-col);color:var(--ink2);line-height:var(--lh-lead)}
.kprose p{margin:0 0 1.1rem}

/* Anchor navigation (jump links) — outline pills */
.anchornav{display:flex;flex-wrap:wrap;gap:.7rem;margin:0 0 1.6rem}
.anchornav a{display:inline-block;background:#F7F2EA;border:1px solid var(--gray);border-radius:25px;padding:.5rem 1.3rem;
  font-weight:700;font-size:.85rem;color:var(--ink);transition:background-color .15s,border-color .15s,color .15s}  /* XD: BG #F7F2EA, border #707070 */
/* Hover/focus: the pill fills black with white text, so the active target reads clearly. */
.anchornav a:hover,.anchornav a:focus-visible{background:var(--ink);border-color:var(--ink);color:#fff}

/* Contact details are actionable links (tel:/mailto:). WCAG SC 1.4.1: keep them
   distinguishable beyond colour, so underline by default and swap the underline for a
   subtle emphasis on hover/focus. Colour is inherited from the surrounding block. */
.contact a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.contact a:hover,.contact a:focus-visible{text-decoration:none;opacity:.85}

/* Info hero: wide image + overlapping red contact box (like the Jobs/Ehrenamt split) */
.khero{position:relative;min-height:482px;margin-bottom:var(--section-gap)}
.khero__img{width:var(--content-col)}
.khero__img img{width:100%;height:482px;object-fit:cover;display:block}
.khero__box{position:absolute;right:0;top:241px;transform:translateY(-50%);width:42.2%;min-height:400px;
  background:var(--red);color:#fff;padding:2.2rem 55px;display:flex;flex-direction:column;justify-content:center}
  /* top:241 = half the photo height, so the box centres against the image and not against
     .khero (which includes the Bildnachweis). Side padding 55px, measured on the XD. */
.khero__box .khero__name{color:#fff;font-size:1.4rem;line-height:1.25;margin:0 0 1.1rem;font-weight:700;-webkit-hyphens:none;hyphens:none}  /* the facility name: a label on the box, not a heading -- it repeats the h1 */
.khero__box p{color:#fff;margin:0;font-size:.92rem;line-height:20px}  /* XD: line step 20px */
.khero__box .person{font-weight:400;margin-top:10px}  /* XD: no bold; the 30px gap gives the hierarchy */
.khero__box .contact{display:flex;align-items:center;gap:.55rem}
/* The booking button closes the box, below the contact details and the people. align-self keeps
   the pill at its own width inside the flex column, which would otherwise stretch it edge to edge. */
.khero__box .khero__cta{margin-top:22px;align-self:flex-start}
.khero__box .contact::before{content:"";flex:none;width:13px;height:13px;background-size:contain;background-repeat:no-repeat;background-position:center}
.khero__box .contact--phone::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 15 15'%3E%3Crect x='.5' y='.5' width='14' height='14' rx='2.4' fill='%23fff'/%3E%3Cpath d='M4.7 3.5c-.5 0-.9.4-.9.9 0 3.8 3.1 6.9 6.9 6.9.5 0 .9-.4.9-.9V9c0-.3-.2-.6-.5-.6l-1.7-.4c-.3-.1-.5 0-.7.2l-.5.6C7.1 8.2 6.3 7.4 5.8 6.4l.6-.5c.2-.2.3-.4.2-.7l-.4-1.7c-.1-.3-.3-.5-.6-.5z' fill='%23E2001A'/%3E%3C/svg%3E")}
.khero__box .contact--mail::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 15 15'%3E%3Crect x='.5' y='.5' width='14' height='14' rx='2.4' fill='%23fff'/%3E%3Crect x='3' y='5' width='9' height='5.4' fill='%23E2001A'/%3E%3Cpath d='M3.4 5.4l4.1 2.9 4.1-2.9' fill='none' stroke='%23fff' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E")}

/* Accordion (native details) — XD: dark dividers, +/- in a thin red circle, open item
   on a light-gray block with a red title. */
.acc{max-width:var(--content-col);margin:.4rem 0 0}  /* no line above the first item (XD); dividers come from each item's border-bottom */
.acc details{border-bottom:1px solid var(--ink)}
/* Interior padding on every row: the dividers span the full component width while the
   title text and the +/- circle sit inset from both edges (XD). */
.acc summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;
  gap:1rem;padding:1.4rem 1.3rem;font-weight:700;font-size:1.05rem;color:var(--ink)}
.acc summary::-webkit-details-marker{display:none}
/* The title is an h3 for the outline; it must not look like one. font:inherit takes the size,
   weight and family the summary already sets, and color:inherit keeps the red of the open state. */
.acc summary h3{font:inherit; color:inherit; margin:0; -webkit-hyphens:inherit; hyphens:inherit}
.acc summary::after{content:"+";flex:none;width:27px;height:27px;border:1.5px solid var(--red);border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:var(--red);font-size:1.2rem;font-weight:400;line-height:1}
.acc details[open] summary::after{content:"\2212"}  /* U+2212 minus, centers like the plus */
.acc__body{padding:0 1.3rem 1.3rem;color:var(--ink2);line-height:var(--lh-lead)}
.acc__body a{color:var(--ink2);text-decoration:underline}
/* open item: light-gray block at the component width (aligned with the dividers, no
   bleed) with a red title and no bottom divider. The interior padding is the same as
   the closed rows, so titles and the icon stay in one column across all states. */
.acc details[open]{background:var(--light);border-bottom:0}
.acc details[open] summary{color:var(--red)}
.acc details[open] .acc__body{padding-top:.2rem;padding-bottom:1.5rem;padding-right:3rem}  /* text ends where the +/- circle begins */

/* Öffnungszeiten — plain text (the design's pink was an "editable area" note) */
.oeff{max-width:var(--content-col);color:var(--ink2);line-height:var(--lh-lead)}
.oeff p{margin:.15rem 0;font-weight:700;color:var(--ink)}  /* XD: the time lines are bold */
/* An entry with a midday break and a label runs past the column width and wraps, and on a phone
   it always does. At .15rem apart the gap between two entries is smaller than the gap between the
   wrapped halves of one, so the reader cannot tell where an entry ends: give the entries room and
   pull the continuation line in. */
.oeff p.oeff__row{margin:0 0 .7rem;padding-left:1.1rem;text-indent:-1.1rem}
.oeff p.oeff__row:last-of-type{margin-bottom:0}
.oeff__label{font-weight:400;color:var(--ink2)}
.oeff p.oeff__note{margin-top:1rem;font-weight:400;color:var(--ink2)}  /* footnote back to regular */
.oeff ul{margin:.6rem 0 0;padding-left:1.2rem}
.oeff li{margin:.25rem 0}

/* Downloads — box with a red PDF icon + bold text (XD; the pink fill was an editable-area note) */
.dl{display:flex;flex-direction:column;gap:.75rem;max-width:var(--content-col)}
.dl a{display:flex;align-items:center;gap:.9rem;background:#FCFCFC;border:1px solid #9c968c;color:var(--ink);
  font-weight:700;padding:.9rem 1.2rem;font-size:.95rem;line-height:1.35;transition:border-color .15s}
.dl a:hover{border-color:var(--red)}  /* XD: box border turns red on hover */
.dl a::before{content:"";flex:none;width:22px;height:27px;  /* outline red PDF document + Acrobat "A" (XD) */
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='27' viewBox='0 0 22 27'%3E%3Cpath d='M2 1h11l7 7v17a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1z' fill='none' stroke='%23E2001A' stroke-width='1.6'/%3E%3Cpath d='M13 1.2v5.8a1 1 0 0 0 1 1h5.8' fill='none' stroke='%23E2001A' stroke-width='1.6'/%3E%3Cpath d='M8 20l3-8 3 8M9.3 17.4h3.4' fill='none' stroke='%23E2001A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}

/* Kooperationspartner — carousel: red name panel + white info panel, red circle arrows */
.koop{position:relative}  /* spans the content width; the card sits left, arrows in the side gaps (XD) */
.koop__card{position:relative;display:grid;grid-template-columns:48% 52%;width:58%;max-width:640px;margin-left:44px;background:#fff;border:1px solid #ddd}
.koop__name{background:var(--red);color:#fff;padding:2rem clamp(24px,18%,56px);display:flex;flex-direction:column;justify-content:center}
/* Partner names are long compounds in a narrow red panel, so they are hyphenated rather than
   broken mid-word or left to overflow. The browser does it from the page's lang, which means a
   German name on the Turkish or Arabic site is divided by that language's rules -- accepted
   deliberately over marking every break point by hand in the content. */
.koop__name h3{color:#fff;font-size:1.4rem;line-height:1.16;margin:0;-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word}
.koop__info{padding:1.6rem 1.9rem;color:var(--ink2);font-size:.9rem;line-height:1.4}
.koop__info p{margin:0}
.koop__info .contact{display:flex;align-items:center;gap:.65rem}
.koop__info .contact::before{content:"";flex:none;width:12px;height:12px;background-size:contain;background-repeat:no-repeat;background-position:center}
.koop__info .contact--phone::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 15 15'%3E%3Crect x='.5' y='.5' width='14' height='14' rx='2.4' fill='%23E2001A'/%3E%3Cpath d='M4.7 3.5c-.5 0-.9.4-.9.9 0 3.8 3.1 6.9 6.9 6.9.5 0 .9-.4.9-.9V9c0-.3-.2-.6-.5-.6l-1.7-.4c-.3-.1-.5 0-.7.2l-.5.6C7.1 8.2 6.3 7.4 5.8 6.4l.6-.5c.2-.2.3-.4.2-.7l-.4-1.7c-.1-.3-.3-.5-.6-.5z' fill='%23fff'/%3E%3C/svg%3E")}
.koop__info .contact--mail::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 15 15'%3E%3Crect x='.5' y='.5' width='14' height='14' rx='2.4' fill='%23E2001A'/%3E%3Crect x='3' y='5' width='9' height='5.4' fill='%23fff'/%3E%3Cpath d='M3.4 5.4l4.1 2.9 4.1-2.9' fill='none' stroke='%23E2001A' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E")}
/* Website, directly under the e-mail. Same red rounded square as the other two icons, with a
   globe instead of a handset or an envelope. */
.koop__info .contact--web::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 15 15'%3E%3Crect x='.5' y='.5' width='14' height='14' rx='2.4' fill='%23E2001A'/%3E%3Ccircle cx='7.5' cy='7.5' r='4.1' fill='none' stroke='%23fff' stroke-width='1.1'/%3E%3Cellipse cx='7.5' cy='7.5' rx='1.9' ry='4.1' fill='none' stroke='%23fff' stroke-width='1.1'/%3E%3Cpath d='M3.6 6.1h7.8M3.6 8.9h7.8' stroke='%23fff' stroke-width='1.1'/%3E%3C/svg%3E")}
.koop__info .lbl{font-weight:700;color:var(--ink);margin-top:1.1rem}
/* Bullets sit in the text column: the marker shares the left edge with the label above it (XD) */
.koop__info ul{margin:.15rem 0 0;padding-left:0;list-style:none}
.koop__info li{margin:0}
.koop__info li::before{content:"\2022";display:inline-block;width:10.5px}
.koop__arrow{position:absolute;top:50%;transform:translateY(-50%);width:33px;height:33px;border-radius:50%;
  background:var(--red) center/33px 33px no-repeat;font-size:0;text-indent:-9999px}
.koop__arrow--prev{left:-44px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' viewBox='0 0 19 19'%3E%3Cpath d='M15 9.5H4M9 4.5l-5 5 5 5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.koop__arrow--next{right:-44px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' viewBox='0 0 19 19'%3E%3Cpath d='M4 9.5h11M10 4.5l5 5-5 5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
/* Dots are centred on the card, not on the content width — same box as .koop__card */
.koop__dots{display:flex;gap:.5rem;justify-content:center;margin-top:1rem;width:58%;max-width:640px;margin-left:44px}
.koop__dots span,.koop__dot{width:8px;height:8px;border-radius:50%;background:var(--border)}
.koop__dots span.is-active,.koop__dot.is-active{background:var(--red)}
/* The dots are controls, so they ship as buttons; strip the button chrome and give them a
   touch-sized hit area without changing the dot the design specifies. */
.koop__dot{border:0;padding:0;cursor:pointer;position:relative}
.koop__dot::after{content:"";position:absolute;top:-10px;right:-6px;bottom:-10px;left:-6px}
.koop__arrow{border:0;cursor:pointer}

/* One partner at a time. Only applied once koop-slider.js has taken over: without JavaScript
   every card stays visible, so the content is readable either way.

   The cards are stacked in one grid cell rather than hidden and shown, for two reasons. The row
   is as tall as the tallest card, so the section keeps its height while a visitor clicks through
   instead of jumping with each partner; and because both cards are laid out, one can fade into
   the other. visibility (not just opacity) keeps the hidden ones away from the keyboard and from
   screen readers. */
.koop.is-slider{display:grid; grid-template-columns:1fr}
.koop.is-slider .koop__card{
  grid-area:1/1; display:grid; visibility:hidden; opacity:0;
  transition:opacity .3s ease, visibility 0s linear .3s;
}
.koop.is-slider .koop__card.is-active{visibility:visible; opacity:1; transition:opacity .3s ease}
.koop.is-slider .koop__dots{grid-area:2/1}
@media(prefers-reduced-motion:reduce){
  .koop.is-slider .koop__card,
  .koop.is-slider .koop__card.is-active{transition:none}
}
/* Stacked cards need vertical breathing room when the slider is not active. */
.koop .koop__card + .koop__card{margin-top:1.5rem}
.koop.is-slider .koop__card + .koop__card{margin-top:0}

/* Keyboard focus has to be visible on both controls (WCAG 2.4.7); the arrows are red circles
   on white, so the ring is drawn in the ink colour to keep contrast. */
.koop__arrow:focus-visible,.koop__dot:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* Pointer and keyboard get the same answer: the circle turns from red to ink, the inversion the
   home tiles and the card links already use. Contrast of the white chevron rises rather than
   falls (17.9:1 on #171717 against 4.9:1 on red), and colour is not the only affordance — the
   control is a button, keeps its focus ring and sits under a pointer cursor. */
.koop__arrow{transition:background-color .15s}
.koop__arrow:hover,.koop__arrow:focus-visible{background-color:var(--ink)}

/* Logo grids (Unterstützer / Partnerlogos) — white boxes with a thin gray border (XD).
   Brand logos are placeholders (the real partner logos are pending). */
.logos{display:grid;grid-template-columns:repeat(3,1fr);gap:21px;max-width:68.5%;margin-top:32px}  /* XD: 3 x 235.5px, gap 21, width 748.5; margin collapses with the H2's margin-bottom */
.logos .logo{background:#fff;border:1px solid #B7B7B7;aspect-ratio:1.586;display:flex;align-items:center;justify-content:center;
  color:var(--gray);font-weight:700;font-size:.9rem}

/* Mobile: one row that scrolls sideways, rather than pills wrapping onto three.
   A deliberate departure from the phone artboard, agreed in KKZAWO-146. Two reasons, both
   measured on a 375px screen: wrapping made the navigation 156px tall before the page even
   started, and the artboard's icon-only pills hid the section name behind a glyph that does not
   say what the section is. Every chip now carries its text and the row scrolls, so the names stay
   readable and the block keeps the height of a single pill.

   The icons stay on the chips the artboard draws them for, beside the text rather than instead
   of it. Desktop is untouched: above this breakpoint the chips still wrap, and there are rarely
   enough of them to need a second row. */
@media(max-width:860px){
  .anchornav{gap:.5rem;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
    /* The row bleeds to both screen edges so the first and last chip are not visually clipped
       mid-pill; the padding puts them back on the content column.
       scroll-padding is what makes that padding survive: snapping aligns an item with the
       scrollport edge and ignores the padding otherwise, so on load the browser scrolled the row
       by exactly those 16px and the first pill ended up flush against the screen -- measured at
       320, 375, 414 and 768px, with scrollLeft sitting at 16 before anyone had touched it. */
    margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px;
    scroll-padding-left:16px;scroll-padding-right:16px}
  .anchornav::-webkit-scrollbar{display:none}
  /* flex:none — the chips keep their own width instead of sharing the row, which is what lets
     the row overflow and scroll rather than squeezing every name. */
  .anchornav a{flex:none;display:flex;align-items:center;justify-content:center;gap:.45rem;text-align:center;
    padding:.5rem 1rem;font-size:.85rem;white-space:nowrap;scroll-snap-align:start}
  /* The pills carry no icons. The phone artboard draws one on some of them, and they were kept
     beside the text when this row was built; the two that had one -- Kooperationspartner and
     Unterstützer -- read fine without it now that every pill shows its name, so the glyphs and the
     handshake raster they depended on are gone. A future section that wants one adds a class here
     again; entry_anchor_nav() still accepts it. */
  /* The photo credit is not shown under the hero on the phone artboard. */
  .khero .credit{display:none}
  /* Carousel, measured on the phone artboard: card 343x602, red panel 270 tall (45%),
     text 34 from the left edge; white panel padding 16/26/36; arrows 46px, 42px apart,
     centred 12px below the card. Dots are desktop-only. */
  .koop{padding-bottom:58px;margin-top:67px}
  .koop__card{position:static;grid-template-columns:1fr;width:auto;max-width:none;margin-left:0}
  .koop__name{padding:80px 34px 88px}
  .koop__name h3{font-size:29px;line-height:1.17}
  .koop__info{padding:16px 16px 36px 26px;font-size:18.7px;line-height:26.5px}  /* right padding is smaller than the left (XD) */
  .koop__info .contact::before{width:16px;height:16px}
  .koop__arrow{top:auto;bottom:0;transform:none;width:46px;height:46px;background-size:46px 46px}
  .koop__arrow--prev{left:calc(50% - 67px);right:auto}
  .koop__arrow--next{left:calc(50% + 21px);right:auto}
  .koop__dots{display:none}
  .khero{min-height:0;margin-bottom:2.5rem}
  .khero__img{width:100%}
  .khero__img img{height:220px}
  /* Photo on top, contact box below, separated by the mobile gutter (XD: 8 render px = 16 CSS). */
  .khero__box{position:static;transform:none;width:auto;min-height:0;margin:16px 0 0}
  /* The logo grids fill the whole content width on mobile (XD: 2 x 162px, gap 16). */
  .logos{grid-template-columns:repeat(2,1fr);gap:16px;max-width:none;margin-top:64px}
  .logos .logo{aspect-ratio:1.72}
}