/* Note variants (component "Hinweistext", rich-text note style). Copied from the WordPress reference. */
.fks-note--narrow { max-width: 750px; margin-left: auto; margin-right: auto; }
.fks-note--small { font-size: 0.85rem; color: var(--color-text-muted); }
.fks-note--muted-italic { color: var(--color-text-muted); font-style: italic; }
.fks-note--small-italic { font-size: 0.85rem; color: var(--color-text-muted); font-style: italic; }

/* Subpage tabs are links (ADR 0016); match the reference <button> rendering. */
a.ogs-tab { display: inline-block; line-height: normal; text-decoration: none; }

/* Links in running text are underlined (WCAG 1.4.1, ADR 0054; intended difference to the reference, exceptions.md row 4).
   Every container that holds rich text (text blocks, info/contact card bodies) and any link inside a paragraph of the
   page (also the inline text of the note component, which has no container class). Buttons (also a rich-text
   <a class="btn">), tabs, cards, navigation and the footer keep their own look. */
:is(.text-content, .info-block, .highlight-box, .faq-answer, .menu-note, .ogs-info-card, .contact-card, main p) a:not(.btn):not(.ogs-tab) {
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.15em;
}

/* Light button on a dark background (component option "light"); replaces the former inline style. */
.btn.btn--light { border-color: #fff; color: #fff; }

/* Gallery items are native buttons (html-validate prefer-native-element); match the reference <div> rendering. */
button.gallery-item { display: block; width: 100%; margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: inherit; line-height: inherit; letter-spacing: inherit; }

/* Phone numbers in rich text never wrap (html-validate tel-non-breaking; class set by the renderer). */
a.tel-nowrap { white-space: nowrap; }

/* Bee messages (ADR 0046): the bubble may wrap but never leaves the viewport (a short message stays on one line, as in
   the reference); collapsed it is also invisible to the keyboard, so a hidden message link is never focused. */
.school-bee-bubble { white-space: normal; max-width: min(24rem, calc(100vw - 4.5rem)); transition: opacity 0.3s, transform 0.3s, visibility 0s; }
.school-bee.is-quiet .school-bee-bubble { visibility: hidden; transition: opacity 0.3s, transform 0.3s, visibility 0s linear 0.3s; }
.school-bee-message a { color: inherit; text-decoration: underline; }

/* The bee is a real button (keyboard, screen readers); main.js enables it. All button styles are reset, and the flight
   animation moves from the SVG to the button so the focus ring and the click area fly with the bee. */
.school-bee-button { display: block; margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; line-height: 0;
  pointer-events: auto; cursor: pointer; animation: beeRoam 26s ease-in-out 9s infinite; }
.school-bee-button:disabled { cursor: default; }
.school-bee-button:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }
.school-bee-button .school-bee-icon { display: block; animation: none; cursor: inherit; }
/* Someone who points at or tabs to the bee can catch it (and read what it says); WCAG 2.2.2 for the endless flight is
   a go-live decision (docs/superpowers/plans/plan-4c-follow-ups.md). */
.school-bee-button:hover, .school-bee-button:focus, .school-bee-button:focus-visible, .school-bee-button:focus-within { animation-play-state: paused; }
@media (max-width: 600px) {
  .school-bee-button { animation-name: beeRoamSmall; }
}
@media (prefers-reduced-motion: reduce) {
  .school-bee-button { animation: none; }
}

/* Text for screen readers and search engines only (ADR 0050 §3): the standard clip pattern, no visual change. */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Search page (/suche, ADR 0051): no counterpart in the reference; the form and the result list use the site's tokens. */
a.search-toggle { text-decoration: none; }
.search-page { max-width: 750px; }
.search-form label { display: block; font-weight: 600; margin-bottom: 0.4rem; }
.search-form-row { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.search-form-row input[type="search"] { flex: 1 1 14rem; min-width: 0; padding: 0.85rem 1.25rem; border: 2px solid var(--color-primary-light); border-radius: var(--radius-md); font: inherit; }
.search-form-row input[type="search"]:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }
.search-summary { margin: 1.5rem 0 1rem; color: var(--color-text-muted); }
.search-results-list { list-style: none; margin: 0; padding: 0; }
.search-results-list li { margin-bottom: 1.5rem; }
.search-results-list h2 { font-size: 1.15rem; margin: 0 0 0.25rem; }
.search-results-list p { margin: 0; color: var(--color-text-muted); }
.search-results-list mark { background: var(--color-primary-bg); color: inherit; padding: 0 0.1em; border-radius: 2px; }
.search-form-row .btn { font-family: inherit; font-size: 1rem; cursor: pointer; }

/* Search overlay (ADR 0051): a visible close button (44 x 44 px) next to the field, and a focus outline on the field that
   does not rely on the border colour alone (Task 11 review M2). Only the open dialog changes; the closed page is untouched. */
.search-box form { display: flex; align-items: center; gap: 0.5rem; }
.search-box .search-input { flex: 1 1 auto; min-width: 0; }
.search-box .search-input:focus-visible { outline: 3px solid var(--color-primary-darkest); outline-offset: 2px; }
.search-close { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  margin: 0; padding: 0; border: 2px solid var(--color-primary-light); border-radius: var(--radius-md); background: var(--color-white);
  color: var(--color-text); cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.search-close:hover { background: var(--color-primary-bg); border-color: var(--color-primary); }
.search-close:focus-visible { outline: 3px solid var(--color-primary-darkest); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .search-close { transition: none; } }

/* „Kalender abonnieren“ under a timeline (ADR 0081; intended difference to the reference, exceptions.md row 9): small, in
   the site's tokens, links of 44 px height so they are easy to hit on phones, a visible focus. */
.calendar-subscribe { max-width: 800px; margin: 2rem auto 0; padding-top: 0.75rem; border-top: 1px solid var(--color-primary-light);
  font-size: 0.95rem; color: var(--color-text-muted); }
.calendar-subscribe p { margin: 0; }
.calendar-subscribe__links { display: flex; flex-wrap: wrap; align-items: center; column-gap: 1.25rem; }
.calendar-subscribe__label { font-weight: 600; color: var(--color-text); }
.calendar-subscribe__link { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-primary-darkest);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
.calendar-subscribe__link:focus-visible { outline: 3px solid var(--color-primary-darkest); outline-offset: 2px; border-radius: 2px; }
.calendar-subscribe__hint { font-size: 0.85rem; }