@charset "UTF-8";
/*!
 Theme Name:   Medienfachberatung v2026
 Theme URI:    https://www.medienfachberatung.de
 Author:       Sven Hoehn, Axel Roderus (Juliane Reimann v1)
 Author URI:   https://svenhoehn.net
 Version:      2.0.0
*/
/**
 * Main CSS.
 *
 * This file controls the complete theme styles.
 *
 * @package     JK SetupTheme
 * @since       1.0
 *
 * @author      Julane Krause, juliane@krause-webkonzepte.de
 *
 * @internal    last revised July 28, 2026
 * @version     2.0.0
 *
 */
/* ──────────────────────────────────────────────
 * Variables & Design Tokens
 * Sass variables (legacy), CSS Custom Properties,
 * breakpoints, typography, spacing, utility mixins
 * ──────────────────────────────────────────────*/
/* ──────────────────────────────────────────────
 * Sass Variables (legacy)
 * Still used for Sass-only features like
 * breakpoints ($md etc.) and the visually-hidden mixin.
 * Colors/fonts now live as CSS Custom Properties in :root.
 * ──────────────────────────────────────────────*/
/* District colors (Sass — kept for reference) */
/* Brand colors */
/* Font weights (Sass — legacy, see --fw-* below) */
/* Font families (Sass — legacy, see --ff-* below) */
/* ──────────────────────────────────────────────
 * Breakpoints
 * Legacy device-based breakpoints (unused in new code)
 * and simplified min-width breakpoints ($sm–$xl)
 * ──────────────────────────────────────────────*/
/* Legacy device breakpoints (kept for old partials) */
/* Simplified breakpoints (used in all new code) */
/* Smartphone/Tablet boundary */
/* Tablet Portrait */
/* Tablet Landscape / small Desktop */
/* Desktop */
/* ──────────────────────────────────────────────
 * Utility Mixins
 * ──────────────────────────────────────────────*/
/* Visually hidden — accessible screen-reader-only text */
/* ──────────────────────────────────────────────
 * Adobe Typekit — Neue Haas Grotesk
 * ──────────────────────────────────────────────*/
@import url("https://use.typekit.net/qxp1nhp.css");
/* ──────────────────────────────────────────────
 * Modern CSS Reset
 * Based on Josh Comeau's CSS Reset
 * ──────────────────────────────────────────────*/
*, *::before, *::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

body {
  -webkit-font-smoothing: antialiased;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
}

/* Prevent text overflow */
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

p {
  text-wrap: pretty;
}

h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

/* Isolation for stacking contexts */
#root, #__next {
  isolation: isolate;
}

/* Native lazy-loading size hint */
img:is([sizes=auto i], [sizes^="auto," i]) {
  contain-intrinsic-size: none !important;
}

/* Reset button defaults */
button {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  color: inherit;
  font: inherit;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
}

/* ──────────────────────────────────────────────
 * CSS Custom Properties (Design Tokens)
 * Single source of truth for colors, fonts,
 * spacing, and layout values used across the theme
 * ──────────────────────────────────────────────*/
:root {
  /* District colors (HSL) */
  --oberbayern: hsl(151, 24%, 50%);
  --niederbayern: hsl(196, 48%, 47%);
  --oberpfalz: hsl(24, 65%, 52%);
  --oberfranken: hsl(207, 40%, 52%);
  --mittelfranken: hsl(277, 19%, 46%);
  --unterfranken: hsl(87, 35%, 45%);
  --schwaben: hsl(5, 55%, 52%);
  /* Brand colors */
  --clr-primary: hsl(15, 0%, 30%);
  --clr-secondary: hsl(30, 0%, 70%);
  --clr-light-grey: hsl(0, 0%, 90%);
  /* Derived colors */
  --background: color-mix(in hsl, var(--clr-light-grey), white 50%);
  --ft-clr-h: var(--clr-primary);
  /* Font families */
  --ff-heading: "neue-haas-grotesk-display", sans-serif;
  --ff-body: "neue-haas-grotesk-text", sans-serif;
  /* Font weights */
  --fw-light: 400;
  --fw-roman: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  /* Font sizes — fluid clamp() scale (base 16px) */
  --fs-xs: clamp(0.6875rem, 0.625rem + 0.2vw, 0.8125rem); /* 11px → 13px */
  --fs-sm: clamp(0.8125rem, 0.775rem + 0.15vw, 0.875rem); /* 13px → 14px */
  --fs-base: clamp(0.875rem, 0.825rem + 0.2vw, 1rem); /* 14px → 16px */
  --fs-md: clamp(1rem, 0.95rem + 0.2vw, 1.125rem); /* 16px → 18px */
  --fs-lg: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem); /* 18px → 20px */
  --fs-xl: clamp(1.25rem, 1.1rem + 0.5vw, 1.5625rem); /* 20px → 25px */
  --fs-2xl: clamp(1.5625rem, 1.35rem + 0.7vw, 1.875rem); /* 25px → 30px */
  --fs-3xl: clamp(1.875rem, 1.65rem + 0.75vw, 2.25rem); /* 30px → 36px */
  /* Line heights */
  --lh-tight: 1.1; /* große Headings (36px) */
  --lh-snug: 1.2; /* Headings (20px–30px) */
  --lh-normal: 1.3; /* kleine Headings, Body groß */
  --lh-relaxed: 1.4; /* Body-Text, Blockquotes */
  /* Spacing scale */
  --space-2xs: 0.125rem; /*  2px */
  --space-xs: 0.25rem; /*  4px */
  --space-sm: 0.5rem; /*  8px */
  --space-md: 0.625rem; /* 10px */
  --space-lg: 1rem; /* 16px */
  --space-xl: 1.25rem; /* 20px */
  --space-2xl: 1.5rem; /* 24px */
  --space-3xl: 2.5rem; /* 40px */
  --space-4xl: 3.125rem; /* 50px */
  --space-5xl: 3.75rem; /* 60px */
  --space-6xl: 6.25rem; /* 100px */
  /* Layout widths */
  --content-width: 54rem; /* 864px – Lesebreite für Artikel */
  --grid-width: 75rem; /* 1200px – Card-Grid, 3 Spalten */
  --full-width: 100%; /* Hero, edge-to-edge */
  /* Fixed header offset for margin-block-start on main */
  --header-height: 74px;
}

/* ──────────────────────────────────────────────
 * Global Styles
 * Body typography, layout wrapper, links,
 * headings, images, lists, alignment utilities
 * ──────────────────────────────────────────────*/
/* Body */
body {
  font-family: var(--ff-body);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  font-weight: var(--fw-roman);
  color: var(--clr-primary);
}

/* Hide legacy Bootstrap .row class */
.row {
  display: none;
}

/* 12-column grid wrapper */
.wrapper {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 0;
}
@media (min-width: 768px) {
  .wrapper {
    grid-template-columns: repeat(12, 1fr);
  }
}

/* Responsive visibility helpers */
.visible-tablet-landscape {
  display: none;
}

.visible-tablet-portrait {
  display: block;
}
@media (min-width: 768px) {
  .visible-tablet-portrait {
    display: none;
  }
}

.hidden-tablet-landscape {
  display: block;
}

.hidden-tablet-portrait {
  display: none;
}
@media (min-width: 768px) {
  .hidden-tablet-portrait {
    display: block;
  }
}

/* Links */
a {
  color: var(--ft-clr);
  text-decoration: underline;
  outline: none;
}
a:hover, a:active, a:focus {
  text-decoration: underline;
  color: color-mix(in hsl, var(--fc-clr), white 5%);
}

/* Images – responsive defaults */
img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  font-style: italic;
  background-repeat: no-repeat;
  background-size: cover;
  shape-margin: 0.75rem;
}

/* ──────────────────────────────────────────────
 * Headings
 * ──────────────────────────────────────────────*/
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  font-family: var(--ff-heading);
  font-weight: var(--fw-semibold);
}

h1, .h2, h2, .h2, h3, .h3 {
  -webkit-margin-before: var(--space-xl);
          margin-block-start: var(--space-xl);
  -webkit-margin-after: var(--space-md);
          margin-block-end: var(--space-md);
}

h1, .h1 {
  font-size: var(--fs-2xl);
}

h2, .h2 {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}

h3, .h3 {
  font-size: var(--fs-lg);
  text-transform: uppercase;
}

h4, .h4 {
  font-size: var(--fs-md);
  text-transform: uppercase;
}

h5, .h5 {
  font-size: var(--fs-base);
}

h6, .h6 {
  font-size: var(--fs-sm);
}

p {
  font-size: var(--fs-base);
}

/* ──────────────────────────────────────────────
 * Blockquotes & Lists
 * ──────────────────────────────────────────────*/
blockquote {
  padding: 0;
  margin-block: var(--space-xl);
  margin-inline: 0;
  border: none;
  font-family: var(--ff-body);
  font-size: var(--fs-lg);
  line-height: 1.4;
  font-style: italic;
}

ul {
  -webkit-padding-start: var(--space-xl);
          padding-inline-start: var(--space-xl);
}

ol {
  -webkit-padding-start: var(--space-2xl);
          padding-inline-start: var(--space-2xl);
}

.radio {
  position: relative;
  display: inherit;
  margin-block: 0;
}

/* ──────────────────────────────────────────────
 * Image Alignment (WordPress)
 * @link https://codex.wordpress.org/Wrapping_Text_Around_Images
 * ──────────────────────────────────────────────*/
img.alignright {
  float: right;
  margin: 0 0 1em 1em;
}

img.alignleft {
  float: left;
  margin: 0 1em 1em 0;
}

img.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.alignright {
  float: right;
}

.alignleft {
  float: left;
}

.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* ──────────────────────────────────────────────
 * Header
 * Fixed position, spans content grid columns
 * ──────────────────────────────────────────────*/
.header {
  --letter-spacing-label: var(--letter-spacing);
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  width: 100%;
  z-index: 10;
}
@media (min-width: 768px) {
  .header {
    left: 8.3333333333%;
    width: 91.6666666667%;
  }
}

/* ──────────────────────────────────────────────
 * Navigation
 * Three-level structure:
 * 1. Main nav (#main-navigation) — external links
 * 2. Bezirke nav (#bezirke-navigation) — district selection
 * 3. Bezirk nav (#bezirk-navigation) — active district subnav
 * ──────────────────────────────────────────────*/
/* ──────────────────────────────────────────────
 * District color mapping (body class → CSS variable)
 * ──────────────────────────────────────────────*/
.district-oberpfalz {
  --district-color: var(--oberpfalz);
}

.district-unterfranken {
  --district-color: var(--unterfranken);
}

.district-oberfranken {
  --district-color: var(--oberfranken);
}

.district-mittelfranken {
  --district-color: var(--mittelfranken);
}

.district-schwaben {
  --district-color: var(--schwaben);
}

.district-oberbayern {
  --district-color: var(--oberbayern);
}

.district-niederbayern {
  --district-color: var(--niederbayern);
}

/* Hide Bezirk subnav when no district is active */
.no-district #bezirk-navigation {
  display: none;
}

/* ──────────────────────────────────────────────
 * Main Navigation — black bar, white text
 * ──────────────────────────────────────────────*/
#main-navigation {
  color: white;
  background-color: black;
  border-bottom: 1px solid white;
}

/* ──────────────────────────────────────────────
 * Bezirke Navigation — district selector with
 * per-district hover colors via --item-color
 * ──────────────────────────────────────────────*/
#bezirke-navigation {
  color: black;
  background-color: white;
  border-bottom: 1px solid currentcolor;
  /* Each district li gets its own hover color */
}
#bezirke-navigation .navbar-nav > li.oberpfalz {
  --item-color: var(--oberpfalz);
}
#bezirke-navigation .navbar-nav > li.unterfranken {
  --item-color: var(--unterfranken);
}
#bezirke-navigation .navbar-nav > li.oberfranken {
  --item-color: var(--oberfranken);
}
#bezirke-navigation .navbar-nav > li.mittelfranken {
  --item-color: var(--mittelfranken);
}
#bezirke-navigation .navbar-nav > li.schwaben {
  --item-color: var(--schwaben);
}
#bezirke-navigation .navbar-nav > li.oberbayern {
  --item-color: var(--oberbayern);
}
#bezirke-navigation .navbar-nav > li.niederbayern {
  --item-color: var(--niederbayern);
}
#bezirke-navigation .navbar-nav > li > a:hover, #bezirke-navigation .navbar-nav > li > a:active, #bezirke-navigation .navbar-nav > li > a:focus {
  color: white;
  background: var(--item-color);
}
#bezirke-navigation .navbar-nav > li.current-menu-item > a, #bezirke-navigation .navbar-nav > li.current-menu-ancestor > a {
  color: white;
  background: var(--item-color);
}

/* ──────────────────────────────────────────────
 * Bezirk Navigation — active district subnav
 * Background uses --district-color
 * Submenus: grid-template-rows animation (mobile),
 * absolute dropdown (desktop)
 * ──────────────────────────────────────────────*/
#bezirk-navigation {
  color: white;
  background-color: var(--district-color);
  border-bottom: 1px solid currentcolor;
}
@media (min-width: 768px) {
  #bezirk-navigation .navbar-nav > li:first-child {
    border-left: none;
  }
}
#bezirk-navigation {
  /* Sub menus */
}
#bezirk-navigation .sub-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  background: var(--district-color);
}
@media (min-width: 768px) {
  #bezirk-navigation .sub-menu {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
  }
  #bezirk-navigation .sub-menu li {
    flex: 1 1 auto;
    border: none;
  }
}
#bezirk-navigation {
  /* Sub-menu toggle button (CSS chevron) */
}
#bezirk-navigation .submenu-toggle {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  color: inherit;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  -webkit-margin-end: var(--space-lg);
          margin-inline-end: var(--space-lg);
}
#bezirk-navigation .submenu-toggle::after {
  content: "";
  display: inline-block;
  width: 0.6em;
  height: 0.6em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s;
}
#bezirk-navigation .submenu-toggle[aria-expanded=true]::after {
  transform: rotate(-135deg);
}
#bezirk-navigation {
  /* Sub-menu collapse animation */
}
@media (min-width: 768px) {
  #bezirk-navigation .menu-item-has-children {
    position: relative;
  }
  #bezirk-navigation .menu-item-has-children:hover > .submenu-toggle {
    transform: rotate(-180deg);
  }
}
#bezirk-navigation .menu-item-has-children a {
  flex: 1;
  background: var(--district-color);
}
#bezirk-navigation .menu-item-has-children {
  /* Collapsible wrapper around <ul> */
}
#bezirk-navigation .menu-item-has-children .submenu-collapse {
  width: 100%;
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows 0.3s ease;
}
#bezirk-navigation .menu-item-has-children .submenu-collapse > * {
  min-height: 0;
  overflow: hidden;
}
@media (min-width: 768px) {
  #bezirk-navigation .menu-item-has-children .submenu-collapse {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 10;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
  }
}
#bezirk-navigation .menu-item-has-children {
  /* Open state (JS toggle) */
}
#bezirk-navigation .menu-item-has-children.is-open > .submenu-collapse {
  grid-template-rows: 1fr;
}
@media (min-width: 768px) {
  #bezirk-navigation .menu-item-has-children.is-open > .submenu-collapse {
    display: block;
    overflow: visible;
  }
  #bezirk-navigation .menu-item-has-children.is-open > .submenu-collapse > * {
    overflow: visible;
  }
}
#bezirk-navigation .menu-item-has-children {
  /* Desktop: open on hover/focus-within */
}
@media (min-width: 768px) {
  #bezirk-navigation .menu-item-has-children:hover > .submenu-collapse, #bezirk-navigation .menu-item-has-children:focus-within > .submenu-collapse {
    display: block;
    overflow: visible;
  }
  #bezirk-navigation .menu-item-has-children:hover > .submenu-collapse > *, #bezirk-navigation .menu-item-has-children:focus-within > .submenu-collapse > * {
    overflow: visible;
  }
}

/* ──────────────────────────────────────────────
 * Shared nav components
 * ──────────────────────────────────────────────*/
/* Nav bar — flex container with label + toggle */
.nav-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding-block: var(--space-sm);
  padding-inline: var(--space-lg);
  /* Hide bar on desktop (except main nav) */
}
@media (min-width: 768px) {
  .nav-bar:not(#main-navigation .nav-bar) {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

/* Mobile toggle button (CSS chevron) */
.menu-toggle {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  color: inherit;
  font: inherit;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
}
.menu-toggle::after {
  content: "";
  display: inline-block;
  width: 0.75em;
  height: 0.75em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s;
}
@media (min-width: 768px) {
  .menu-toggle {
    display: none;
  }
}

/* Collapsible nav container (grid-template-rows animation) */
.nav-collapse {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows 0.3s ease;
}
.nav-collapse > * {
  min-height: 0;
  overflow: hidden;
}
@media (min-width: 768px) {
  .nav-collapse {
    grid-template-rows: 1fr;
    overflow: visible;
  }
  .nav-collapse > * {
    overflow: visible;
  }
}

/* ──────────────────────────────────────────────
 * Navbar items — shared list styling for all navs
 * ──────────────────────────────────────────────*/
.navbar-nav {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
}
@media (min-width: 768px) {
  .navbar-nav {
    display: flex;
    width: auto;
  }
}
.navbar-nav > li, .navbar-nav > li li {
  font-size: var(--fs-sm);
  border-bottom: 1px solid currentColor;
}
.navbar-nav > li.menu-item-has-children, .navbar-nav > li li.menu-item-has-children {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
}
@media (min-width: 768px) {
  .navbar-nav > li.menu-item-has-children, .navbar-nav > li li.menu-item-has-children {
    justify-content: flex-start;
  }
}
@media (min-width: 768px) {
  .navbar-nav > li, .navbar-nav > li li {
    border-right: 1px solid currentcolor;
    border-bottom: none;
  }
}
.navbar-nav > li:first-child, .navbar-nav > li li:first-child {
  border-top: 1px solid currentcolor;
}
@media (min-width: 768px) {
  .navbar-nav > li:first-child, .navbar-nav > li li:first-child {
    border-top: none;
    border-left: 1px solid currentcolor;
  }
}
.navbar-nav > li:last-child, .navbar-nav > li li:last-child {
  border-bottom: none;
}
.navbar-nav > li, .navbar-nav > li li {
  /* Link styling */
}
.navbar-nav > li > a, .navbar-nav > li li > a {
  display: block;
  padding-block: var(--space-xs);
  padding-inline: var(--space-lg);
  color: currentcolor;
  text-decoration: none;
  font-weight: var(--fw-semibold);
}
.navbar-nav > li > a:hover, .navbar-nav > li > a:active, .navbar-nav > li > a:focus, .navbar-nav > li li > a:hover, .navbar-nav > li li > a:active, .navbar-nav > li li > a:focus {
  text-decoration: none;
  color: color-mix(in hsl, var(--clr-primary), white 5%);
  background: color-mix(in hsl, var(--district-color), white 5%);
}
@media (min-width: 768px) {
  .navbar-nav > li > a, .navbar-nav > li li > a {
    padding-block: var(--space-sm);
    padding-inline: var(--space-md);
    border-bottom: none;
  }
}
.navbar-nav > li, .navbar-nav > li li {
  /* Active menu item */
}
.navbar-nav > li.current-menu-item, .navbar-nav > li li.current-menu-item {
  letter-spacing: 2px;
}
.navbar-nav > li, .navbar-nav > li li {
  /* Search form in nav */
}
.navbar-nav > li.searchform, .navbar-nav > li li.searchform {
  border-right: none;
  padding-inline: var(--space-lg);
  padding-block: var(--space-lg);
}
@media (min-width: 768px) {
  .navbar-nav > li.searchform, .navbar-nav > li li.searchform {
    padding-block: 0;
  }
}
.navbar-nav > li.searchform #searchform, .navbar-nav > li li.searchform #searchform {
  display: flex;
  flex-wrap: nowrap;
  gap: 1em;
  align-items: flex-end;
}
@media (min-width: 768px) {
  .navbar-nav > li.searchform #searchform, .navbar-nav > li li.searchform #searchform {
    gap: 0;
    padding-block: unset;
  }
}
.navbar-nav > li.searchform input, .navbar-nav > li li.searchform input {
  border: none;
  background: transparent;
  border-bottom: 1px solid white;
  color: white;
  font-size: var(--fs-sm);
  font-style: italic;
  font-weight: var(--fw-light);
  outline: none;
  padding: 0;
  margin-block: var(--space-xs) 0;
  margin-inline: 0 var(--space-lg);
  width: 100%;
}
.navbar-nav > li.searchform input::-moz-placeholder, .navbar-nav > li li.searchform input::-moz-placeholder {
  color: white;
  font-style: italic;
  font-weight: var(--fw-light);
}
.navbar-nav > li.searchform input::placeholder, .navbar-nav > li li.searchform input::placeholder {
  color: white;
  font-style: italic;
  font-weight: var(--fw-light);
}
.navbar-nav > li.searchform button, .navbar-nav > li li.searchform button {
  border: none;
  background: transparent;
  color: white;
}
.navbar-nav > li.searchform, .navbar-nav > li li.searchform {
  /* Search icon via SVG mask */
}
.navbar-nav > li.searchform .search-toggle, .navbar-nav > li li.searchform .search-toggle {
  width: 1em;
  height: 1em;
  padding-block: var(--space-xs);
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M384 208a176 176 0 1 0-352 0 176 176 0 1 0 352 0zM343.3 366C307 397.2 259.7 416 208 416 93.1 416 0 322.9 0 208S93.1 0 208 0s208 93.1 208 208c0 51.7-18.8 99-50 135.3L507.3 484.7c6.2 6.2 6.2 16.4 0 22.6s-16.4 6.2-22.6 0L343.3 366z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M384 208a176 176 0 1 0-352 0 176 176 0 1 0 352 0zM343.3 366C307 397.2 259.7 416 208 416 93.1 416 0 322.9 0 208S93.1 0 208 0s208 93.1 208 208c0 51.7-18.8 99-50 135.3L507.3 484.7c6.2 6.2 6.2 16.4 0 22.6s-16.4 6.2-22.6 0L343.3 366z'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

/* ──────────────────────────────────────────────
 * Nav open state (JS toggles .is-open on <nav>)
 * ──────────────────────────────────────────────*/
@media (min-width: 768px) {
  .header nav {
    display: flex;
  }
}
.header nav.is-open .nav-collapse {
  grid-template-rows: 1fr;
}
.header nav.is-open .menu-toggle::after {
  transform: rotate(-135deg);
}

/* ──────────────────────────────────────────────
 * Logo & nav label
 * ──────────────────────────────────────────────*/
.logo {
  display: block;
  color: white;
  text-transform: uppercase;
  font-size: var(--fs-sm);
  letter-spacing: var(--letter-spacing);
  font-weight: var(--fw-bold);
  text-decoration: none;
}
.logo:hover {
  text-decoration: none;
}

.nav-label {
  display: block;
  font-size: var(--fs-sm);
  letter-spacing: var(--letter-spacing);
  font-weight: var(--fw-bold);
}
@media (min-width: 768px) {
  .nav-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

/* ──────────────────────────────────────────────
 * SVG Bayern Map
 * District fills via CSS Custom Properties
 * Active district set by body class (.district-*)
 * ──────────────────────────────────────────────*/
/* Active district highlight */
.district-oberbayern #mfb-map .oberbayern {
  fill: var(--oberbayern);
}

.district-niederbayern #mfb-map .niederbayern {
  fill: var(--niederbayern);
}

.district-oberpfalz #mfb-map .oberpfalz {
  fill: var(--oberpfalz);
}

.district-oberfranken #mfb-map .oberfranken {
  fill: var(--oberfranken);
}

.district-mittelfranken #mfb-map .mittelfranken {
  fill: var(--mittelfranken);
}

.district-unterfranken #mfb-map .unterfranken {
  fill: var(--unterfranken);
}

.district-schwaben #mfb-map .schwaben {
  fill: var(--schwaben);
}

#mfb-map {
  /* Default district path styling */
}
#mfb-map .district {
  fill: transparent;
  stroke: white;
  stroke-width: 0.2px;
  transition: fill 0.2s ease;
}
#mfb-map a:hover .district,
#mfb-map a:active .district,
#mfb-map a:focus .district {
  outline: none;
}
#mfb-map a:focus {
  outline: none;
}
#mfb-map {
  /* Hover fills per district */
}
#mfb-map .oberbayern:hover .district,
#mfb-map .oberbayern:active .district,
#mfb-map .oberbayern:focus .district {
  fill: var(--oberbayern);
}
#mfb-map .unterfranken:hover .district,
#mfb-map .unterfranken:active .district,
#mfb-map .unterfranken:focus .district {
  fill: var(--unterfranken);
}
#mfb-map .oberfranken:hover .district,
#mfb-map .oberfranken:active .district,
#mfb-map .oberfranken:focus .district {
  fill: var(--oberfranken);
}
#mfb-map .oberpfalz:hover .district,
#mfb-map .oberpfalz:active .district,
#mfb-map .oberpfalz:focus .district {
  fill: var(--oberpfalz);
}
#mfb-map .mittelfranken:hover .district,
#mfb-map .mittelfranken:active .district,
#mfb-map .mittelfranken:focus .district {
  fill: var(--mittelfranken);
}
#mfb-map .niederbayern:hover .district,
#mfb-map .niederbayern:active .district,
#mfb-map .niederbayern:focus .district {
  fill: var(--niederbayern);
}
#mfb-map .schwaben:hover .district,
#mfb-map .schwaben:active .district,
#mfb-map .schwaben:focus .district {
  fill: var(--schwaben);
}

/* ──────────────────────────────────────────────
 * Content Layout
 * Main content area, hero section, masonry grid,
 * grid items (cards), sidebar-left, content spacing
 * ──────────────────────────────────────────────*/
/* District pages: extra top padding for nav clearance */
[class*=district-] main {
  -webkit-padding-before: calc(var(--space-3xl) - 4px);
          padding-block-start: calc(var(--space-3xl) - 4px);
}

/* Main content area — full width mobile, offset on desktop */
main {
  grid-column: 1/-1;
  -webkit-margin-before: var(--header-height);
          margin-block-start: var(--header-height);
}
@media (min-width: 768px) {
  main {
    grid-column: 2/-1;
  }
  main.content-archive, main.content-aktuelles {
    -webkit-padding-before: calc(var(--space-3xl) - 4px);
            padding-block-start: calc(var(--space-3xl) - 4px);
  }
}
.no-district main .post-content:first-child {
  -webkit-padding-before: var(--space-md);
          padding-block-start: var(--space-md);
}

/* ──────────────────────────────────────────────
 * Hero Section
 * Full-width gradient background with map + content
 * District pages: gradient from --district-color
 * ──────────────────────────────────────────────*/
.hero {
  width: 100%;
  padding-inline: var(--space-xl);
  padding-block: var(--space-lg) var(--space-3xl);
  background: radial-gradient(circle at top, var(--mittelfranken) 10%, var(--oberfranken) 50%, var(--oberbayern) 100%);
  /* District pages: gradient based on active district color */
}
[class*=district-] .hero {
  background: linear-gradient(135deg, color-mix(in hsl, var(--district-color), black 15%) 0%, var(--district-color) 35%, color-mix(in hsl, var(--district-color), white 40%) 70%, color-mix(in hsl, var(--district-color), white 60%) 100%);
}
.hero {
  -webkit-margin-after: var(--space-4xl);
          margin-block-end: var(--space-4xl);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
}
@media (min-width: 768px) {
  .hero {
    grid-template-columns: minmax(0, 70ch) minmax(-webkit-min-content, 20rem) auto;
    grid-template-columns: minmax(0, 70ch) minmax(min-content, 20rem) auto;
    gap: var(--space-3xl);
    align-items: center;
    padding-block: var(--space-3xl);
    padding-inline: var(--space-3xl);
  }
}
.hero {
  /* Bavaria map wrapper */
}
.hero .mfb-map-wrapper {
  width: 60%;
}
@media (min-width: 768px) {
  .hero .mfb-map-wrapper {
    width: 100%;
    grid-column: 2;
    grid-row: 1;
  }
}
.hero {
  /* Hero content — line-clamped to 6 lines on desktop */
}
@media (min-width: 768px) {
  .hero__content {
    grid-column: 1;
    grid-row: 1;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
    overflow: hidden;
  }
}
.hero__content {
  /* WPBakery wrapper divs: make invisible for line-clamp */
}
.hero__content .vc_row,
.hero__content .wpb_column,
.hero__content .vc_column-inner,
.hero__content .wpb_wrapper,
.hero__content .wpb_text_column {
  display: contents;
}
.hero__content {
  /* Hide images inside hero (from WPBakery content) */
}
.hero__content .wpb_single_image,
.hero__content img {
  display: none;
}
.hero__content p, .hero__content ul {
  font-size: var(--fs-xl);
  line-height: var(--lh-tight);
  font-weight: var(--fw-bold);
  color: white;
}
@media (min-width: 768px) {
  .hero__content p, .hero__content ul {
    font-size: var(--fs-3xl);
  }
}

/* ──────────────────────────────────────────────
 * Masonry Grid
 * CSS custom properties read by init-masonry.js
 * --grid-columns and --grid-gutter per breakpoint
 * ──────────────────────────────────────────────*/
.grid {
  position: relative;
  --grid-columns: 1;
  --grid-gutter: 0;
  width: 100%;
  padding-inline: var(--space-lg);
}
@media (min-width: 480px) {
  .grid {
    --grid-columns: 2;
    --grid-gutter: 40;
  }
}
@media (min-width: 768px) {
  .grid {
    --grid-columns: 3;
    --grid-gutter: 40;
    padding-inline: 0;
  }
}
@media (min-width: 1280px) {
  .grid {
    --grid-columns: 3;
    --grid-gutter: 60;
  }
}

/* ──────────────────────────────────────────────
 * Grid Item (Card)
 * Used in all archive/grid views via partials/grid-item.php
 * ──────────────────────────────────────────────*/
.grid-item {
  width: 100%;
  -webkit-margin-after: var(--space-3xl);
          margin-block-end: var(--space-3xl);
  background: var(--background);
  box-shadow: 4px 4px 5px color-mix(in hsl, var(--clr-light-grey), white 60%);
}
@media (min-width: 480px) {
  .grid-item {
    width: calc(50% - var(--grid-gutter) / 2 * 1px);
  }
}
@media (min-width: 768px) {
  .grid-item {
    width: calc(33.33% - var(--grid-gutter) / 2 * 3 * 1px);
    max-width: 45ch;
  }
}
.grid-item .post-link {
  text-decoration: none;
}
.grid-item .post-image img {
  width: 100%;
}
.grid-item h2 + .post-excerpt {
  -webkit-margin-before: var(--space-md);
          margin-block-start: var(--space-md);
}
.grid-item {
  /* Card content area */
}
.grid-item .post-content {
  padding-inline: var(--space-lg);
  -webkit-padding-after: var(--space-3xl);
          padding-block-end: var(--space-3xl);
  color: black;
}
.grid-item .post-content h2 {
  -webkit-padding-after: var(--space-md);
          padding-block-end: var(--space-md);
  border-bottom: 1px solid currentcolor;
  letter-spacing: unset;
}
.grid-item .post-content .post-subtitle {
  font-size: var(--fs-xs);
  font-weight: var(--fw-light);
}
.grid-item .post-content .post-subtitle + .post-excerpt {
  -webkit-margin-before: var(--space-md);
          margin-block-start: var(--space-md);
  -webkit-padding-before: var(--space-md);
          padding-block-start: var(--space-md);
  border-top: 1px solid black;
}
.grid-item {
  /* Date/time block */
}
.grid-item .date-time {
  display: flex;
  flex-direction: column;
  -webkit-padding-after: var(--space-md);
          padding-block-end: var(--space-md);
  gap: var(--space-2xs);
  border-bottom: 1px solid currentcolor;
  -webkit-margin-after: var(--space-md);
          margin-block-end: var(--space-md);
  font-size: var(--fs-xs);
  font-weight: var(--fw-light);
  letter-spacing: 0.5px;
}

/* ──────────────────────────────────────────────
 * Sidebar Left — rotated district name
 * Hidden on mobile via visually-hidden mixin,
 * visible on desktop with vertical text
 * ──────────────────────────────────────────────*/
.sidebar-left {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
@media (min-width: 768px) {
  .sidebar-left {
    display: flex;
    justify-content: center;
    width: unset;
    height: unset;
    margin: unset;
    overflow: unset;
    clip: unset;
    white-space: unset;
    position: relative;
  }
  .sidebar-left .title {
    font-size: var(--fs-md);
    font-weight: var(--fw-light);
    font-style: italic;
    color: var(--clr-secondary);
    -webkit-padding-before: var(--space-2xl);
            padding-block-start: var(--space-2xl);
    position: fixed;
  }
  .sidebar-left .title span {
    display: block;
    transform: rotate(-90deg);
  }
}

/* ──────────────────────────────────────────────
 * Content Typography (within .content blocks)
 * Spacing between headings, paragraphs, lists
 * ──────────────────────────────────────────────*/
.content h1 + h2 {
  -webkit-margin-before: var(--space-lg);
          margin-block-start: var(--space-lg);
}
.content h2 + p {
  -webkit-margin-before: var(--space-xl);
          margin-block-start: var(--space-xl);
}
.content p {
  line-height: var(--lh-relaxed);
}
.content * + p {
  -webkit-margin-before: var(--space-md);
          margin-block-start: var(--space-md);
}
.content p + :is(h1, h2, h3, h4, h5, h6) {
  -webkit-margin-before: var(--space-lg);
          margin-block-start: var(--space-lg);
}
.content ul, .content ol {
  font-size: var(--fs-base);
  -webkit-margin-before: var(--space-md);
          margin-block-start: var(--space-md);
}

/* ──────────────────────────────────────────────
 * Load More Button
 * Chevron icon in black circle + underlined text
 * ──────────────────────────────────────────────*/
#load-more-button {
  transition: opacity 0.3s ease;
}
#load-more-button button {
  font-size: var(--fs-base);
  color: black;
  text-decoration: underline;
  text-underline-offset: 4px;
  display: flex;
  gap: var(--space-lg);
  align-items: center;
}
#load-more-button button span {
  display: block;
  border-radius: 100vh;
  background: black;
  color: white;
  width: 2em;
  aspect-ratio: 1;
  /* Chevron inside circle */
}
#load-more-button button span::after {
  content: "";
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s;
  position: relative;
  top: 2px;
}
#load-more-button:hover {
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

/* ──────────────────────────────────────────────
 * Frontpage
 * Post color mapping, grid-item theming,
 * collapsible top grid, events calendar
 * ──────────────────────────────────────────────*/
/* ──────────────────────────────────────────────
 * Post color mapping (CPT class → --post-color)
 * Applied to .grid-item via partials/grid-item.php
 * ──────────────────────────────────────────────*/
.post-post {
  --post-color: var(--clr-primary);
}

.post-oberpfalz {
  --post-color: var(--oberpfalz);
}

.post-unterfranken {
  --post-color: var(--unterfranken);
}

.post-oberfranken {
  --post-color: var(--oberfranken);
}

.post-mittelfranken {
  --post-color: var(--mittelfranken);
}

.post-schwaben {
  --post-color: var(--schwaben);
}

.post-oberbayern {
  --post-color: var(--oberbayern);
}

.post-niederbayern {
  --post-color: var(--niederbayern);
}

/* ──────────────────────────────────────────────
 * Grid Item — color tile & hover state
 * Colored header tile with post type title
 * ──────────────────────────────────────────────*/
.grid-item {
  /* Color tile — district-colored header area */
}
.grid-item .color-tile {
  background: var(--post-color);
  aspect-ratio: 16/10;
  min-height: -webkit-fit-content;
  min-height: -moz-fit-content;
  min-height: fit-content;
  padding-inline: var(--space-lg);
  padding-block: var(--space-lg);
}
.grid-item .color-tile p {
  font-size: var(--fs-xl);
  line-height: var(--lh-normal);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  color: white;
}
.grid-item {
  /* Hover brightness bump on color tile */
}
.grid-item .post-link:hover .color-tile,
.grid-item .post-link:active .color-tile,
.grid-item .post-link:focus .color-tile {
  filter: brightness(1.05);
}
.grid-item {
  transition: background 0.3s ease;
}
.grid-item:hover {
  background: color-mix(in srgb, var(--post-color) 30%, transparent);
  transition: background 0.3s ease;
}

/* ──────────────────────────────────────────────
 * Grid Top — collapsible upper grid
 * Slides out when load-more button is clicked
 * ──────────────────────────────────────────────*/
.grid-top {
  transition: max-height 0.4s ease, opacity 0.3s ease;
  overflow: hidden;
}
.grid-top.is-hidden {
  max-height: 0 !important;
  opacity: 0;
  pointer-events: none;
}

/* ──────────────────────────────────────────────
 * Events Calendar
 * Upcoming events between grid-top and grid-bottom
 * Responsive grid: 2-col mobile, 3-col desktop
 * ──────────────────────────────────────────────*/
.events-calendar {
  padding-inline: var(--space-lg);
  -webkit-margin-after: var(--space-5xl);
          margin-block-end: var(--space-5xl);
  color: black;
}
@media (min-width: 768px) {
  .events-calendar {
    padding-inline: 0 var(--space-6xl);
    -webkit-margin-after: var(--space-6xl);
            margin-block-end: var(--space-6xl);
    max-width: var(--grid-width);
  }
}
.events-calendar {
  /* Calendar heading */
}
.events-calendar__title {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  -webkit-margin-after: var(--space-xl);
          margin-block-end: var(--space-xl);
}
.events-calendar {
  /* Event list — 1px gap grid for border lines */
}
.events-calendar__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
}
.events-calendar {
  /* Single event row — responsive grid link */
}
.events-calendar__item {
  border-bottom: 1px solid black;
}
.events-calendar__item:first-child {
  border-top: 1px solid black;
}
.events-calendar__item a {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: auto auto;
  gap: var(--space-xs) var(--space-sm);
  align-items: baseline;
  padding-block: var(--space-sm);
  text-decoration: none;
  color: inherit;
  transition: background 0.2s ease;
}
.events-calendar__item a:hover, .events-calendar__item a:focus-visible {
  background: color-mix(in srgb, var(--post-color, var(--clr-primary)) 30%, transparent);
}
@media (min-width: 768px) {
  .events-calendar__item a {
    grid-template-columns: 3fr 1fr 2fr;
    grid-template-rows: 1;
  }
}
.events-calendar {
  /* Date column — right-aligned mobile, left on desktop */
}
.events-calendar__date {
  font-size: var(--fs-sm);
  font-weight: var(--fw-roman);
  white-space: nowrap;
  text-align: right;
}
@media (min-width: 768px) {
  .events-calendar__date {
    font-size: var(--fs-base);
    text-align: left;
  }
}
.events-calendar {
  /* Date prefix (e.g. "Einsendeschluss") — hidden by default */
}
.events-calendar__prefix {
  display: none;
  font-size: var(--fs-xs);
  font-weight: var(--fw-light);
}
.events-calendar {
  /* Event title */
}
.events-calendar__name {
  font-weight: var(--fw-bold);
  font-size: var(--fs-base);
}
.events-calendar {
  /* Location — spans full width on mobile, last column on desktop */
}
.events-calendar__location {
  font-size: var(--fs-sm);
  grid-column: 1/-1;
}
@media (min-width: 768px) {
  .events-calendar__location {
    grid-column: -2/-1;
    font-size: var(--fs-base);
  }
}

/* ──────────────────────────────────────────────
 * Single Post & Page – content-single / content-page
 * ──────────────────────────────────────────────*/
/* District theming
 * --district-color is set per .district-* class in _navigation.scss
 * color-mix replaces the old SCSS lighten() calls
 * ──────────────────────────────────────────────*/
.content-single,
.content-page {
  color: black;
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: var(--space-xl);
}
@media (min-width: 768px) {
  .content-single,
  .content-page {
    grid-template-columns: minmax(-webkit-min-content, var(--content-width)) 1fr;
    grid-template-columns: minmax(min-content, var(--content-width)) 1fr;
    grid-gap: var(--space-3xl);
  }
}
.content-single a:hover, .content-single a:active, .content-single a:focus,
.content-page a:hover,
.content-page a:active,
.content-page a:focus {
  color: var(--district-color);
}
.content-single a:has(img),
.content-page a:has(img) {
  text-decoration: none;
}

/* ──────────────────────────────────────────────
 * Layout (mobile first)
 * ──────────────────────────────────────────────*/
.content-single,
.content-page {
  /* Content container */
}
.content-single .content-container,
.content-page .content-container {
  width: 100%;
  overflow: hidden;
}
@media (min-width: 768px) {
  .content-single .content-container,
  .content-page .content-container {
    background: var(--background);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
  }
}
.content-single .content-container .post-content:first-child,
.content-page .content-container .post-content:first-child {
  -webkit-padding-before: var(--space-md);
          padding-block-start: var(--space-md);
}
.content-single,
.content-page {
  /* Post thumbnail */
}
.content-single .post-thumbnail,
.content-page .post-thumbnail {
  width: 100%;
  position: relative;
  -webkit-margin-after: var(--space-xl);
          margin-block-end: var(--space-xl);
}
.content-single .post-thumbnail img,
.content-page .post-thumbnail img {
  width: 100%;
}
.content-single .post-thumbnail .post-thumbnail-copyright,
.content-page .post-thumbnail .post-thumbnail-copyright {
  font-family: var(--ff-heading);
  font-weight: var(--fw-light);
  font-size: var(--fs-xs);
  letter-spacing: 0.07em;
  position: absolute;
  right: 0;
  bottom: 0;
  padding: var(--space-xs) var(--space-sm) 3px;
  text-align: right;
}
.content-single .post-thumbnail .post-thumbnail-copyright a,
.content-page .post-thumbnail .post-thumbnail-copyright a {
  text-decoration: none;
}
.content-single,
.content-page {
  /* Post content */
}
.content-single .post-content,
.content-page .post-content {
  padding-inline: var(--space-xl);
  max-width: 66ch;
}
@media (min-width: 768px) {
  .content-single .post-content,
  .content-page .post-content {
    padding-inline: var(--space-2xl);
    -webkit-padding-after: var(--space-3xl);
            padding-block-end: var(--space-3xl);
  }
}
.content-single .post-meta,
.content-page .post-meta {
  -webkit-margin-after: var(--space-xl);
          margin-block-end: var(--space-xl);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-lg) 0;
}
@media (min-width: 768px) {
  .content-single .post-meta,
  .content-page .post-meta {
    justify-content: flex-start;
    gap: var(--space-lg) var(--space-2xl);
  }
}
.content-single .post-meta .post-category,
.content-page .post-meta .post-category {
  text-transform: uppercase;
  font-size: var(--fs-sm);
  font-weight: var(--fw-light);
  letter-spacing: 1.5px;
}
.content-single .post-meta .date-time,
.content-page .post-meta .date-time {
  font-size: var(--fs-sm);
  text-transform: none;
  font-weight: var(--fw-light);
  letter-spacing: 1.7px;
  width: 100%;
}
.content-single .post-title,
.content-page .post-title {
  line-height: var(--lh-tight);
  font-weight: var(--fw-semibold);
  letter-spacing: unset;
  -webkit-margin-after: var(--space-xl);
          margin-block-end: var(--space-xl);
  -webkit-padding-after: var(--space-xl);
          padding-block-end: var(--space-xl);
  border-bottom: 1px solid black;
}
.content-single .post-excerpt,
.content-page .post-excerpt {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  margin-block: var(--space-xl);
}
.content-single .post-excerpt p:last-of-type,
.content-page .post-excerpt p:last-of-type {
  -webkit-margin-after: 0;
          margin-block-end: 0;
}
.content-single .content,
.content-page .content {
  font-family: var(--ff-body);
  font-size: var(--fs-lg);
  line-height: var(--lh-normal);
}
.content-single .content p:has(img.alignnone),
.content-page .content p:has(img.alignnone) {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  align-items: flex-start;
}
@media (min-width: 768px) {
  .content-single .content p:has(img.alignnone),
  .content-page .content p:has(img.alignnone) {
    flex-direction: row;
    flex-wrap: wrap;
  }
}
.content-single .content p:has(img.alignnone) a,
.content-page .content p:has(img.alignnone) a {
  flex: 0 0 auto;
  min-width: 0;
  width: 100%;
  line-height: 0;
}
@media (min-width: 768px) {
  .content-single .content p:has(img.alignnone) a,
  .content-page .content p:has(img.alignnone) a {
    flex: 1 1 0;
  }
}
.content-single .content p:has(img.alignnone) img,
.content-page .content p:has(img.alignnone) img {
  display: block;
  width: 100%;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
}
.content-single .content .entry-content-asset,
.content-page .content .entry-content-asset {
  width: 100%;
  height: auto;
  -webkit-margin-after: var(--space-lg);
          margin-block-end: var(--space-lg);
}
.content-single .content .entry-content-asset iframe,
.content-page .content .entry-content-asset iframe {
  width: 100%;
}
.content-single .shariff,
.content-page .shariff {
  margin-block: var(--space-xl) var(--space-lg);
}
.content-single .post-author p,
.content-page .post-author p {
  letter-spacing: 1.2px;
  font-size: var(--fs-xs);
}
.content-single .divider,
.content-page .divider {
  background: var(--clr-secondary);
  height: 1px;
  width: 45%;
}
.content-single,
.content-page {
  /* ──────────────────────────────────────────
   * Post sidebar
   * ──────────────────────────────────────────*/
}
.content-single .post-sidebar,
.content-page .post-sidebar {
  padding-inline: var(--space-lg);
}
@media (min-width: 768px) {
  .content-single .post-sidebar,
  .content-page .post-sidebar {
    padding-block: var(--space-lg);
    padding-inline: var(--space-xs) var(--space-6xl);
    max-width: 35ch;
  }
}
.content-single .sidebar-section p + p:has(img.alignleft),
.content-page .sidebar-section p + p:has(img.alignleft) {
  -webkit-margin-before: var(--space-md);
          margin-block-start: var(--space-md);
}
.content-single .sidebar-section strong,
.content-page .sidebar-section strong {
  font-weight: var(--fw-semibold);
}
.content-single .sidebar-section hr,
.content-page .sidebar-section hr {
  margin-block: var(--space-xl) var(--space-md);
  border: 0;
  border-top: 1px solid var(--clr-secondary);
}
.content-single .sidebar-section .section-title,
.content-page .sidebar-section .section-title {
  text-transform: uppercase;
  font-weight: var(--fw-semibold);
  -webkit-padding-after: var(--space-2xl);
          padding-block-end: var(--space-2xl);
  width: 100%;
}
.content-single .sidebar-section .section-content,
.content-page .sidebar-section .section-content {
  font-size: var(--fs-base);
  font-weight: var(--fw-light);
  -webkit-padding-after: var(--space-3xl);
          padding-block-end: var(--space-3xl);
}
.content-single .sidebar-section .section-content .team-details-1,
.content-page .sidebar-section .section-content .team-details-1 {
  padding-block: var(--space-md);
  border-block: 1px solid var(--clr-secondary);
}
.content-single .sidebar-section .section-content .team-details-2,
.content-page .sidebar-section .section-content .team-details-2 {
  padding-block: var(--space-md);
  -webkit-margin-after: var(--space-3xl);
          margin-block-end: var(--space-3xl);
}
.content-single .sidebar-section .section-content .team-details-2.last,
.content-page .sidebar-section .section-content .team-details-2.last {
  -webkit-margin-after: 0;
          margin-block-end: 0;
}
.content-single .sidebar-section,
.content-page .sidebar-section {
  /* Repeater sections */
}
.content-single .sidebar-section.section-repeater,
.content-page .sidebar-section.section-repeater {
  -webkit-padding-after: var(--space-4xl);
          padding-block-end: var(--space-4xl);
}
.content-single .sidebar-section.section-repeater .section-title,
.content-page .sidebar-section.section-repeater .section-title {
  border-bottom: 1px solid var(--clr-secondary);
}
.content-single .sidebar-section.section-repeater .section-content,
.content-page .sidebar-section.section-repeater .section-content {
  -webkit-padding-before: var(--space-md);
          padding-block-start: var(--space-md);
}
.content-single .sidebar-section.section-repeater,
.content-page .sidebar-section.section-repeater {
  /* Remove bottom padding on last repeater (mobile) */
}
.content-single .sidebar-section.section-repeater:last-of-type .section-content,
.content-page .sidebar-section.section-repeater:last-of-type .section-content {
  -webkit-padding-after: 0;
          padding-block-end: 0;
}
.content-single .sidebar-section.section-repeater a,
.content-page .sidebar-section.section-repeater a {
  text-decoration: none;
  display: flex;
  gap: var(--space-md);
  align-items: baseline;
}
.content-single .sidebar-section.section-repeater a::before:not(img),
.content-page .sidebar-section.section-repeater a::before:not(img) {
  content: "→";
  font-family: var(--ff-body);
  font-weight: var(--fw-light);
  font-size: var(--fs-base);
  flex-shrink: 0;
}
.content-single .sidebar-section.section-repeater a[href*="facebook.com"]::after:not(img),
.content-page .sidebar-section.section-repeater a[href*="facebook.com"]::after:not(img) {
  content: "";
  display: inline-block;
  width: 0.85em;
  height: 0.85em;
  vertical-align: -0.05em;
  -webkit-margin-start: 5px;
          margin-inline-start: 5px;
  background-color: #3a5795;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M512 256C512 114.6 397.4 0 256 0S0 114.6 0 256C0 376 82.7 476.8 194.2 504.5l0-170.3-52.8 0 0-78.2 52.8 0 0-33.7c0-87.1 39.4-127.5 125-127.5 16.2 0 44.2 3.2 55.7 6.4l0 70.8c-6-.6-16.5-1-29.6-1-42 0-58.2 15.9-58.2 57.2l0 27.8 83.6 0-14.4 78.2-69.3 0 0 175.9C413.8 494.8 512 386.9 512 256z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M512 256C512 114.6 397.4 0 256 0S0 114.6 0 256C0 376 82.7 476.8 194.2 504.5l0-170.3-52.8 0 0-78.2 52.8 0 0-33.7c0-87.1 39.4-127.5 125-127.5 16.2 0 44.2 3.2 55.7 6.4l0 70.8c-6-.6-16.5-1-29.6-1-42 0-58.2 15.9-58.2 57.2l0 27.8 83.6 0-14.4 78.2-69.3 0 0 175.9C413.8 494.8 512 386.9 512 256z'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

/* ──────────────────────────────────────────────
 * Search Results
 * Highlight color for matched search terms
 * ──────────────────────────────────────────────*/
.highlight-search {
  background-color: var(--clr-secondary);
}

/* ──────────────────────────────────────────────
 * Filter (Medienwissen archive)
 * Isotope-driven filter UI with collapsible
 * taxonomy groups (<details>/<summary>),
 * pill-style buttons, and reset action
 * ──────────────────────────────────────────────*/
/* Filter wrapper */
.filters {
  color: black;
  padding-inline: var(--space-lg);
}
.filters .intro__text {
  margin-block: var(--space-2xl);
}
@media (min-width: 768px) {
  .filters .intro__text {
    max-width: 66ch;
  }
}

/* ──────────────────────────────────────────────
 * Filter List — taxonomy pill buttons
 * Collapsible groups with <details>/<summary>
 * ──────────────────────────────────────────────*/
.filter-list {
  -webkit-margin-after: var(--space-xl);
          margin-block-end: var(--space-xl);
  /* Collapsible filter group (<details> element) */
}
.filter-list .filter-group {
  -webkit-margin-after: var(--space-lg);
          margin-block-end: var(--space-lg);
}
.filter-list .filter-group summary {
  cursor: pointer;
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  -webkit-margin-after: var(--space-md);
          margin-block-end: var(--space-md);
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.filter-list .filter-group summary::-webkit-details-marker {
  display: none;
}
.filter-list .filter-group summary {
  /* Chevron indicator */
}
.filter-list .filter-group summary::after {
  content: "";
  width: 0.5em;
  height: 0.5em;
  border-right: 2px solid currentcolor;
  border-bottom: 2px solid currentcolor;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}
.filter-list .filter-group[open] > summary::after {
  transform: rotate(-135deg);
}
.filter-list {
  /* Pill button list — horizontal wrap layout */
}
.filter-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  align-content: baseline;
  flex-wrap: wrap;
  gap: var(--space-md);
  font-size: var(--fs-sm);
  font-weight: var(--fw-roman);
  line-height: 1;
}
.filter-list ul li {
  border: 1px solid black;
  border-radius: 100vw;
  padding-inline: var(--space-sm);
  padding-block: var(--space-xs);
}
.filter-list ul li.active {
  background: black;
  color: white;
}
.filter-list {
  /* Reset button appearance inside filter pills */
}
.filter-list button {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  color: inherit;
  font: inherit;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
}

/* ──────────────────────────────────────────────
 * Reset / "Alle anzeigen" button
 * Faded when no filter active, full opacity when active
 * ──────────────────────────────────────────────*/
.filter-actions {
  -webkit-margin-after: var(--space-4xl);
          margin-block-end: var(--space-4xl);
}

.filter-reset {
  background: none;
  border: 2px solid black;
  border-radius: 100vw;
  padding-inline: var(--space-lg);
  padding-block: var(--space-sm);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  cursor: pointer;
  opacity: 0.4;
  transition: opacity 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.filter-reset.is-active {
  opacity: 1;
}
.filter-reset:hover, .filter-reset:focus-visible {
  background: black;
  color: white;
}

/* RSS Feed items (loaded via rss-reader.js into #rss-feed) */
#rss-feed {
  -webkit-padding-after: var(--space-3xl);
          padding-block-end: var(--space-3xl);
}
#rss-feed.feed-items {
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
}
#rss-feed .feed-item {
  -webkit-margin-after: var(--space-xl);
          margin-block-end: var(--space-xl);
}
#rss-feed .feed-item:last-child {
  -webkit-margin-after: 0;
          margin-block-end: 0;
}
#rss-feed .feed-item-title {
  padding-block: var(--space-sm);
  -webkit-padding-end: var(--space-xl);
          padding-inline-end: var(--space-xl);
  border-block: 1px solid var(--clr-light-grey);
  font-weight: var(--fw-light);
  font-size: var(--fs-lg);
  letter-spacing: 0.1em;
  line-height: var(--lh-tight);
  text-transform: uppercase;
}
#rss-feed .feed-item-title a {
  text-decoration: none;
  color: inherit;
}
#rss-feed .feed-item-description {
  -webkit-padding-before: var(--space-sm);
          padding-block-start: var(--space-sm);
  line-height: var(--lh-relaxed);
}
#rss-feed .feed-item-link {
  text-decoration: none;
}
#rss-feed .feed-item-link::before {
  content: "→";
  font-weight: var(--fw-light);
  font-size: var(--fs-xl);
  padding-inline: var(--space-sm);
}

/* Shortcode: PDF icon link */
a.shortcode-pdf-icon {
  -webkit-margin-before: var(--space-md);
          margin-block-start: var(--space-md);
  display: block;
}
a.shortcode-pdf-icon::before {
  content: "" !important;
  padding: 0 !important;
}
a.shortcode-pdf-icon:hover, a.shortcode-pdf-icon:focus-visible {
  opacity: 0.85;
}

/* Cookie Notice */
body #cookie-notice {
  background-color: var(--clr-light-grey) !important;
  min-width: auto;
}
body #cookie-notice .cookie-notice-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
body #cookie-notice #cn-notice-text {
  width: 100%;
  flex-shrink: 0;
  text-align: left;
  color: var(--clr-text);
  display: block;
  padding: var(--space-sm);
}
body #cookie-notice .cn-button {
  flex-grow: 1;
  background-color: var(--clr-text);
  background-image: none;
  border: none;
  border-radius: 0;
  color: white;
}
@media (min-width: 768px) {
  body #cookie-notice {
    width: 21.1%;
    -webkit-margin-start: 8.3%;
            margin-inline-start: 8.3%;
  }
}
@media (max-width: 768px) {
  body #cookie-notice {
    width: 100%;
    margin: 0;
  }
  body #cookie-notice #cn-notice-text {
    text-align: center;
    -webkit-padding-after: var(--space-sm);
            padding-block-end: var(--space-sm);
  }
}

/* WPBakery / Visual Composer overrides */
div.pp_default .pp_content_container .pp_details,
div.pp_default .pp_gallery {
  display: none !important;
}
div.pp_default .pp_top,
div.pp_default .pp_bottom,
div.pp_default .pp_top .pp_middle,
div.pp_default .pp_top .pp_left,
div.pp_default .pp_top .pp_right,
div.pp_default .pp_bottom .pp_left,
div.pp_default .pp_bottom .pp_middle,
div.pp_default .pp_bottom .pp_right {
  display: none;
}
div.pp_default .pp_content_container .pp_left,
div.pp_default .pp_content_container .pp_right {
  background: transparent !important;
}
div.pp_default .pp_content {
  background-color: transparent !important;
}

.flexslider {
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.wpb_gallery .wpb_flexslider .flex-control-paging {
  display: none;
}

.vc_tta-accordion .vc_tta-panel-heading,
.vc_tta-accordion .vc_tta-panel-body {
  background-color: transparent !important;
}

/* WordPress Login Page */
body.login {
  background-color: white;
}
body.login #login h1 a {
  box-sizing: border-box;
  background: white;
  background-size: contain;
  width: 100%;
  height: auto;
  text-indent: 0;
  color: var(--clr-primary);
  padding: 20px 15px;
  font-size: 25px;
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
}
body.login #login .message {
  border-left: 4px solid var(--clr-primary);
}
body.login #login #loginform input[type=submit] {
  background: var(--clr-primary);
  border: 1px solid var(--clr-primary);
  box-shadow: none;
}
body.login #login #loginform input[type=submit]:hover {
  filter: brightness(1.05);
}
body.login #login #nav,
body.login #login #backtoblog {
  text-align: right;
}
body.login #login #nav a,
body.login #login #backtoblog a {
  color: var(--clr-primary);
}
body.login #login #nav a:hover,
body.login #login #backtoblog a:hover {
  color: var(--clr-primary);
}

/* ──────────────────────────────────────────────
 * Footer
 * Black (global) or white with district color (district pages)
 * 3-column grid on desktop: logo | logos | nav
 * ──────────────────────────────────────────────*/
footer {
  grid-column: 1/-1;
  background: black;
  color: white;
  display: flex;
  flex-direction: column;
  gap: var(--space-3xl);
  padding-inline: var(--space-lg);
  padding-block: var(--space-lg) var(--space-2xl);
  -webkit-margin-before: var(--space-6xl);
          margin-block-start: var(--space-6xl);
  /* District footer: white bg, district accent color */
}
footer.footer-district {
  background: white;
  color: var(--district-color);
  border-top: 1px solid currentcolor;
}
@media (min-width: 768px) {
  footer {
    grid-column: 2/-1;
    -webkit-padding-start: var(--space-3xl);
            padding-inline-start: var(--space-3xl);
    padding-block: var(--space-3xl) var(--space-6xl);
    display: grid;
    grid-template-columns: 1fr 3fr 1fr;
    grid-gap: var(--space-5xl);
  }
}

/* Site name in footer */
.footer-logo-mfb {
  font-size: var(--fs-lg);
  line-height: var(--lh-normal);
  text-transform: uppercase;
  font-weight: var(--fw-bold);
  letter-spacing: 2px;
}
@media (min-width: 768px) {
  .footer-logo-mfb {
    font-size: var(--fs-md);
    letter-spacing: 1px;
  }
}

/* Partner/district logos row */
.footer-logos {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
  width: 55%;
}
@media (min-width: 768px) {
  .footer-logos {
    width: 100%;
    flex-direction: row;
    gap: var(--space-3xl);
  }
  .footer-logos .district-logo {
    height: 3rem;
    display: block;
  }
  .footer-logos .district-logo img {
    width: auto;
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
    vertical-align: middle;
  }
}

/* Footer navigation (Impressum, Datenschutz etc.) */
.footer-nav {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-nav > li > a {
  text-decoration: none;
}

/*# sourceMappingURL=main.css.map */