/* ==========================================================================
   basis.css  ·  Rest-CSS für das Block-Theme Basis
   Skill: layout-standard 2.0.0 (Kern). Website-eigene Werte gehören ins Kind-Theme.
   --------------------------------------------------------------------------
   Schriftgrößen, Abstände, Farben und Breiten wohnen als Presets in
   theme.json. Diese Datei definiert keine
   zweiten Werte, sondern verweist nur auf die Presets und trägt, was
   theme.json nicht kann: Kern-Abschnitte 3 bis 6, Sticky-Kopf, Blog und die
   Elemente aus Entscheidung 34 (Akkordeon, Tabs, Pop-up, Video, Bildvergrößerung).
   Die Gestaltung der Blöcke (Formular, Inhaltsverzeichnis …) liegt im Plugin
   „Basis-Bausteine“, damit sie einen Theme-Wechsel übersteht.
   ========================================================================== */

:root{
  --header-h: var(--wp--custom--header-h);
  --focus-breite: var(--wp--custom--fokus-breite, 2px);
  /* Primärfarbe, mind. 3:1 auf hellen Flächen (Standardpalette 5,2:1) */
  --focus-color: var(--wp--preset--color--primaer);
  --feld-rand: var(--wp--preset--color--feldrand);
}
/* Dunkle Flächen (Varianten *-dunkel, Fuß, sekundaer): heller Ring und Feldrand, WCAG 1.4.11 */
:where([class*="-dunkel"], .has-sekundaer-background-color){
  --focus-color: var(--wp--preset--color--weiss);
  --feld-rand: var(--wp--preset--color--weiss);
}

/* --- 3. Typografische Umbruchregeln ------------------------------------- */
h1, h2, h3, h4, h5, h6 { text-wrap: balance; }
p, li, dd, figcaption   { text-wrap: pretty; }
p, li, dd, td, th       { overflow-wrap: break-word; }

/* --- 4. Medien ----------------------------------------------------------- */
img, svg, video, iframe, table { max-inline-size: 100%; }
img, svg, video { block-size: auto; }

/* --- 5. Reduced Motion --------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- 6. Fokus und Sprungmarken (WCAG 2.4.7, 1.4.11, 2.4.11) -------------- */
/* Eine Regel für alle: outline statt box-shadow (bleibt in forced-colors sichtbar),
   Schein von Kern oder Plugins entfernt, sonst Doppelring. */
:focus-visible{
  outline: var(--focus-breite) solid var(--focus-color);
  outline-offset: 0.125rem;
  box-shadow: none;
}
/* Ringfarbe schon in Ruhe, damit eine Transition nicht in falscher Farbe aufblitzt */
:where(a[href], button, input, select, textarea, summary){ outline-color: var(--focus-color); }

/* Skip-Link (WordPress erzeugt ihn in Block-Themes selbst und setzt die id am ersten main).
   Feste Position über Kopf und Cookie-Banner, Fläche dunkel, Ring wie überall. */
.skip-link.screen-reader-text:focus{
  position: fixed !important; /* Kern setzt absolute !important */
  inset-block-start: var(--wp--preset--spacing--s, 1rem);
  inset-inline-start: var(--wp--style--root--padding-left, 1rem);
  z-index: 100000;
  padding: 0.75em 1.25em;
  background-color: var(--wp--preset--color--sekundaer);
  color: var(--wp--preset--color--weiss);
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  border-radius: var(--wp--preset--border-radius--s, 0.25rem);
  --focus-color: var(--wp--preset--color--weiss);
}
main{ scroll-margin-block-start: var(--header-h); }
main:focus{ outline: none; } /* Sprungziel, kein Ring um den ganzen Inhalt */

/* Zielgröße WCAG 2.5.8: Links in Navigationen (Fuß, Rechtliches, Filter, Brotkrumen)
   mindestens 24 px hoch, auch wenn sie mobil umbrechen. */
:where(nav) a{
  display: inline-flex;
  align-items: center;
  min-block-size: 24px; /* WCAG 2.5.8, normativer Mindestwert, nicht tokenisieren */
}

main [id],
:where(a[href], button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])){
  scroll-margin-block-start: calc(var(--header-h) + 0.5rem);
}

/* --- Kopf: fixiert, mit Trennlinie ---------------------------------------- */
.wp-site-blocks > header:first-child{
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
  box-shadow: 0 1px 0 var(--wp--preset--color--akzent-hell);
}
.admin-bar .wp-site-blocks > header:first-child{ inset-block-start: var(--wp-admin--admin-bar--height, 0px); }
.basis-logo img{ inline-size: clamp(8.5rem, 6rem + 6vw, 12.5rem); block-size: auto; }
.basis-hauptnavigation a{ text-decoration: none; }
.basis-hauptnavigation a:hover{ text-decoration: underline; }
/* Klickflächen mindestens 44 px (Hausregel) */
.basis-hauptnavigation .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container-open{ min-block-size: 2.75rem; display: inline-flex; align-items: center; }
@media (max-width: 600px){ .basis-kopf-button{ display: none; } }

/* --- Fuß ------------------------------------------------------------------ */
.basis-fuss-titel{
  font-family: var(--wp--preset--font-family--akzent);
  font-weight: 500;
  margin: 0;
}
.basis-fuss .wp-block-navigation{ font-family: var(--wp--preset--font-family--text); font-weight: 400; }
.basis-fuss .wp-block-navigation-item__content{ min-block-size: 2.75rem; display: inline-flex; align-items: center; }

/* --- Hauptbereich (Abstand oben/unten in allen Vorlagen) ------------------ */
.basis-hauptbereich{ padding-block: var(--wp--preset--spacing--abschnitt); }

/* Icons in Karten: Breite an genau einer Stelle */
.is-style-karte .wp-block-image img{ inline-size: var(--wp--preset--dimension--icon); }

/* --- Blogbeiträge ----------------------------------------------------------- */
.basis-weitere .post-navigation-link-previous,
.basis-weitere .post-navigation-link-next{ display: grid; gap: var(--wp--preset--spacing--2xs); }
/* Blog-Filter als ruhige Textlinks, keine Pills */
.basis-filter a{
  display: inline-flex;
  align-items: center;
  min-block-size: 2.75rem;
  text-decoration: none;
  border-block-end: 2px solid transparent;
}
.basis-filter a:hover,
.basis-filter .current-menu-item > a{ border-block-end-color: currentColor; }
.basis-beitragskarte .wp-block-post-title a{ text-decoration: none; }
/* Ganze Karte klickbar, ein Link pro Karte (Semantik-Regel 8) */
.basis-beitragskarte{ position: relative; }
.basis-beitragskarte .wp-block-post-title a::after{ content: ""; position: absolute; inset: 0; border-radius: inherit; }
.basis-beitragskarte .wp-block-post-terms a{ position: relative; z-index: 1; }
/* Fokus zeigt die ganze Klickfläche, nicht nur den Titel */
/* Hover = dünner Akzentrand (>= 3:1 zur Kartenfläche), Fokus = Hover plus Ring */
.basis-beitragskarte{ border: 1px solid transparent; transition: border-color .15s; }
.basis-beitragskarte:hover,
.basis-beitragskarte:has(.wp-block-post-title a:focus-visible){ border-color: var(--wp--preset--color--akzent-dunkel); }
.basis-beitragskarte:has(.wp-block-post-title a:focus-visible){ outline: var(--focus-breite) solid var(--focus-color); outline-offset: 0.125rem; }
.basis-beitragskarte .wp-block-post-title a:focus-visible{ outline: 0; }

/* Hover auf dunklen Flächen über die Unterstreichung statt über die Farbe:
   Weiß bleibt Weiß (mind. 5,27:1 auch am hellsten Punkt des Verlaufs) */
:where([class*="-dunkel"]) a:where(:not(.wp-element-button)):hover{
  text-decoration-thickness: 0.15em;
}

/* --- Druck: Browser lassen Hintergründe weg, weiße Schrift wäre unsichtbar -- */
@media print{
  :where([class*="-dunkel"], [class*="verlauf"], .has-akzent-dunkel-background-color){
    background: none !important;
    color: black !important;
  }
  :where([class*="-dunkel"], [class*="verlauf"], .has-akzent-dunkel-background-color) :is(h1, h2, h3, h4, h5, h6, a){
    color: currentColor !important;
  }
  .wp-site-blocks > header:first-child{ position: static; box-shadow: none; }
  .basis-hauptnavigation, .basis-kopf-button, .basis-fuss .wp-block-navigation, .basis-weitere{ display: none; }
}

/* --- Themenleiste der Blog-Übersicht (Entscheidung 38, inc/themen.php) ------- */
.basis-filter{
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--wp--preset--spacing--m);
  margin: 0;
  padding: 0;
}
.basis-filter li{ margin: 0; }
.basis-filter .current-cat > a,
.basis-filter a[aria-current]{ border-block-end-color: currentColor; }

/* --- Lesetext: Tabellen, Code, Zitat ---------------------------------------- */
.wp-block-table{ overflow-x: auto; }
.wp-block-table table{ border-collapse: collapse; inline-size: 100%; }
.wp-block-table :is(th, td){
  border: 1px solid var(--wp--preset--color--akzent-hell);
  padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--s);
  text-align: start;
  vertical-align: top;
}
.wp-block-table th{ background: var(--wp--preset--color--akzent-hell); color: var(--wp--preset--color--sekundaer); }
.wp-block-code{ overflow-x: auto; white-space: pre-wrap; }
.wp-block-quote > :last-child{ margin-block-end: 0; }

/* --- Akkordeon: Block „Details“ und Akkordeon-Block des Kerns ---------------- */
.wp-block-details,
.wp-block-accordion-item{
  background: var(--wp--preset--color--weiss);
  border: 1px solid var(--wp--preset--color--akzent-hell);
  border-radius: var(--wp--preset--border-radius--m);
}
.wp-block-details > summary{
  cursor: pointer;
  font-weight: 600;
  color: var(--wp--preset--color--sekundaer);
  padding: var(--wp--preset--spacing--s) var(--wp--preset--spacing--m);
  min-block-size: 2.75rem;
}
.wp-block-details > summary :is(h2, h3, h4){ display: inline; font-size: var(--wp--preset--font-size--h4); margin: 0; }
.wp-block-details > :not(summary){ margin-inline: var(--wp--preset--spacing--m); }
.wp-block-details > :last-child:not(summary){ margin-block-end: var(--wp--preset--spacing--m); }
:is(.wp-block-details, .wp-block-accordion-item) + :is(.wp-block-details, .wp-block-accordion-item){ margin-block-start: var(--wp--preset--spacing--s); }
.wp-block-accordion-heading{ font-size: var(--wp--preset--font-size--h4); margin: 0; }
.wp-block-accordion-heading__toggle{
  font: inherit;
  color: var(--wp--preset--color--sekundaer);
  background: transparent;
  border: 0;
  padding: var(--wp--preset--spacing--s) var(--wp--preset--spacing--m);
  inline-size: 100%;
  cursor: pointer;
}
.wp-block-accordion-panel{ padding: 0 var(--wp--preset--spacing--m) var(--wp--preset--spacing--m); }
.wp-block-accordion-panel > :last-child{ margin-block-end: 0; }
@media (hover: hover){
  .wp-block-details > summary:hover,
  .wp-block-accordion-heading__toggle:hover{ color: var(--wp--preset--color--link-aaa); text-decoration: underline; }
}

/* --- Tabs: Block des Kerns (Entscheidung 34) -------------------------------- */
.wp-block-tab-list{
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--xs);
  border-block-end: 2px solid var(--wp--preset--color--akzent-hell);
  margin-block-end: var(--wp--preset--spacing--m);
}
.wp-block-tab-list [role="tab"]{
  font: inherit;
  font-family: var(--wp--preset--font-family--akzent);
  font-weight: 500;
  color: var(--wp--preset--color--sekundaer);
  background: transparent;
  border: 0;
  border-block-end: 2px solid transparent;
  margin-block-end: -2px;
  padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--s);
  min-block-size: 2.75rem;
  cursor: pointer;
}
.wp-block-tab-list [role="tab"][aria-selected="true"]{ color: var(--wp--preset--color--link-aaa); border-block-end-color: currentColor; }
@media (hover: hover){ .wp-block-tab-list [role="tab"]:hover{ color: var(--wp--preset--color--link-aaa); } }
.wp-block-tab-panel > :last-child{ margin-block-end: 0; }

/* --- Bildvergrößerung des Kerns ----------------------------------------------- */
.wp-lightbox-overlay .scrim{ background-color: var(--wp--preset--color--grund) !important; }
.wp-lightbox-overlay .close-button{ color: var(--wp--preset--color--sekundaer); }

/* --- Pop-up: Gruppe mit Stil „Pop-up“ wird zum <dialog> (inc/elemente.php) ------ */
.basis-dialog{
  max-inline-size: min(40rem, calc(100% - 2 * var(--wp--preset--spacing--m)));
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}
.basis-dialog::backdrop{ background: color-mix(in srgb, var(--wp--preset--color--sekundaer) 60%, transparent); }
.basis-dialog > .is-style-popup{ margin: 0; }
.basis-dialog__schliessen{ display: block; margin: 0 0 var(--wp--preset--spacing--xs) auto; }

/* --- Video erst auf Klick (inc/elemente.php, assets/js/video.js) ------------------ */
.basis-video{
  border: 2px dashed var(--wp--preset--color--primaer);
  border-radius: var(--wp--preset--border-radius--m);
  padding: var(--wp--preset--spacing--m);
  background: var(--wp--preset--color--weiss);
}
.basis-video__rahmen{
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  background: var(--wp--preset--color--sekundaer);
  border-radius: var(--wp--preset--border-radius--s);
  overflow: hidden;
}
.basis-video__rahmen iframe{ inline-size: 100%; block-size: 100%; border: 0; }
.basis-video__hinweis{ font-size: var(--wp--preset--font-size--klein); margin: var(--wp--preset--spacing--xs) 0 0; }

/* --- Suche ---------------------------------------------------------------------- */
.wp-block-search__input{
  font: inherit;
  color: var(--wp--preset--color--text);
  background: var(--wp--preset--color--weiss);
  border: 1px solid var(--feld-rand);
  border-radius: var(--wp--preset--border-radius--s);
  padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--s);
  min-block-size: 2.75rem;
}

/* --- Seitenleiste (Vorlage „Mit Seitenleiste“) ------------------------------------- */
.basis-seitenleiste{ font-size: var(--wp--preset--font-size--klein); }
.basis-seitenleiste h2{ font-size: var(--wp--preset--font-size--h4); }
.basis-seitenleiste > * + h2{ margin-block-start: var(--wp--preset--spacing--l); }
.basis-liste-schlicht{ list-style: none; padding: 0; }
.basis-liste-schlicht li{ margin-block: var(--wp--preset--spacing--xs); }

/* Nur für Screenreader, z. B. Ergänzung bei „Mehr erfahren“-Links */
.screen-reader-text:not(:focus){
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}