@charset "UTF-8";
/* CSS Reset  */
@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
    background-repeat: no-repeat;
  }
  * {
    padding: 0;
    margin: 0;
  }
  html {
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
         text-size-adjust: none;
    line-height: 1.25;
    -webkit-font-smoothing: antialiased;
    block-size: 100%;
    scrollbar-gutter: stable;
    scrollbar-color: var(--nak-blau-500) var(--grau-200);
    background: #0a0a0a;
  }
  body {
    min-block-size: 100%;
    background: var(--weiss);
  }
  img,
  iframe,
  audio,
  video,
  canvas {
    display: block;
    max-inline-size: 100%;
    block-size: auto;
  }
  svg {
    max-inline-size: 100%;
  }
  svg:not([fill]) {
    fill: currentColor;
  }
  input,
  button,
  textarea,
  select {
    font: inherit;
  }
  textarea {
    resize: vertical;
  }
  fieldset,
  iframe {
    border: none;
  }
  p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    overflow-wrap: break-word;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    text-wrap: balance;
  }
  p {
    text-wrap: pretty;
    font-variant-numeric: proportional-nums;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-variant-numeric: lining-nums;
  }
  p,
  blockquote,
  q,
  figcaption,
  li {
    hanging-punctuation: first allow-end last;
  }
  input,
  label,
  button,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    line-height: 1.1;
  }
  math,
  time,
  table {
    font-variant-numeric: tabular-nums lining-nums slashed-zero;
  }
  code {
    font-variant-numeric: slashed-zero;
  }
  table {
    border-collapse: collapse;
  }
  abbr {
    font-variant-caps: all-small-caps;
    text-decoration: none;
  }
  abbr[title] {
    cursor: help;
    -webkit-text-decoration: underline dotted;
            text-decoration: underline dotted;
  }
  sup,
  sub {
    line-height: 0;
  }
  :disabled {
    opacity: 0.8;
    cursor: not-allowed;
  }
  :focus-visible {
    outline-offset: 0.2rem;
  }
}
:root {
  /* Neutrale */
  --weiss: #ffffff;
  --schwarz: #000000;
  --grau-100: #f7f7f7;
  /* vormals grau-2 */
  --grau-200: #ededed;
  --grau-400: #bfbfbf;
  --grau-500: #999999;
  /* vormals grau-1 */
  --grau-700: #666666;
  /* vormals grau-dunkel */
  /* NAK-Blau */
  --nak-blau-100: #eaf3fa;
  /* vormals soft-3 */
  --nak-blau-200: #c9e1f3;
  /* vormals soft-2 */
  --nak-blau-300: #a8ceec;
  /* vormals soft-1 */
  --nak-blau-500: #2786cf;
  /* vormals digital */
  --nak-blau-700: #1f6ba6;
  /* vormals dunkel  */
  /* Dunkelblau */
  --dunkelblau-500: #1243a0;
  --dunkelblau-100: #e8ecf5;
  /* Türkisblau */
  --tuerkisblau-100: #e6f6f4;
  /* vormals soft-2 */
  --tuerkisblau-200: #ccece9;
  /* vormals soft-1 */
  --tuerkisblau-500: #00a091;
  /* Grün */
  --dunkelgruen-700: #006e14;
  --gelbgruen-100: #f2f8e9;
  /* vormals soft */
  --gelbgruen-500: #82be23;
  /* Gelb */
  --sonnengelb-500: #ffdc0f;
  --sonnengelb-500-50: #ffdc0f80;
  /* Orange */
  --orange-100: #fad3a6;
  /* vormals soft   */
  --orange-500: #f08200;
  --orange-700: #ed6900;
  /* vormals dunkel */
  /* Rot / Himbeere */
  --rot-500: #d21400;
  --himbeere-500: #d73282;
  --himbeere-200: #f9cce0;
  --himbeere-100: #fce4f0;
  /* Lila */
  --lila-100: #f1e8f2;
  /* vormals soft-2 */
  --lila-500: #731e7d;
  /* Abstände, Grössen, etc. */
  --container-max-width: 1820px;
  --gutter: clamp(18px, 3vw, 40px);
  --column-gap: clamp(16px, 2vw, 32px);
  --vertical-gap: clamp(64px, 10vh, 96px);
  --grid-overlay-color: rgba(255, 80, 80, 0.25);
  --overlay-button-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.3);
  /* Textstyles */
  --p1: 18px/1.5 "suisse", sans-serif;
  --p2: 16px/1.5 "suisse", sans-serif;
  --label1: clamp(14px, 1.5vw, 18px)/1.5 "suisse", sans-serif;
  --label2: clamp(14px, 1.5vw, 16px)/1.5 "suisse", sans-serif;
  --label3: clamp(12px, 1.5vw, 14px)/1.5 "suisse", sans-serif;
  --h1: clamp(32px, 26.4px + 1.5vw, 48px)/1.25 "suisse", system-ui, sans-serif;
  --h2: clamp(28px, 24px + 1.2vw, 40px)/1.25 "suisse", system-ui, sans-serif;
  --h3: clamp(20px, 18.4px + 0.4vw, 24px)/1.33 "suisse", system-ui, sans-serif;
  --h4: clamp(18px, 17.2px + 0.2vw, 20px)/1.4 "suisse", system-ui, sans-serif;
  --h5: clamp(16px, 15.2px + 0.2vw, 18px)/1.33 "suisse", system-ui, sans-serif;
}

@media (prefers-color-scheme: xxdark) {
  :root {
    /* ============================================
       NIGHTSHIFT MODE
       - Hintergrund bleibt hell, KEINE Invertierung
       - Weiß → warmes Cremeweiß (weniger Blaulicht)
       - Helle Töne leicht abgedunkelt/entsättigt
       - Brand-Farben bleiben weitgehend original
       ============================================ */
    /* Neutrale — warmer Weißton statt reinem Weiß */
    --weiss: #faf6ee;
    /* warmes Cremeweiß statt #ffffff */
    --schwarz: #1a1813;
    /* warmes Schwarz statt reinem Schwarz */
    --grau-100: #f2eee6;
    /* warmer Grau-Ton */
    --grau-200: #e6e1d6;
    /* warmer Grau-Ton */
    --grau-700: #5e5a52;
    /* warmer Sekundärtext */
    /* NAK-Blau — Tints minimal wärmer, Hauptfarben original */
    --nak-blau-100: #e4ecf3;
    /* leicht wärmer/gedämpfter */
    --nak-blau-200: #c2d9ea;
    --nak-blau-300: #a8ceec;
    /* original */
    --nak-blau-500: #2786cf;
    /* original */
    --nak-blau-700: #1f6ba6;
    /* original */
    /* Dunkelblau */
    --dunkelblau-500: #1243a0;
    /* original */
    /* Türkisblau */
    --tuerkisblau-100: #e0f0ee;
    /* minimal gedämpft */
    --tuerkisblau-200: #c5e5e1;
    --tuerkisblau-500: #00a091;
    /* original */
    /* Grün */
    --dunkelgruen-700: #006e14;
    /* original */
    --gelbgruen-100: #ecf3e0;
    /* minimal gedämpft */
    --gelbgruen-500: #82be23;
    /* original */
    /* Gelb — einzige Farbe, die wirklich blendet → leicht gedämpft */
    --sonnengelb-500: #f2cf0a;
    /* Orange */
    --orange-100: #f5cb9c;
    /* minimal gedämpft */
    --orange-500: #f08200;
    /* original */
    --orange-700: #ed6900;
    /* original */
    /* Rot / Himbeere */
    --rot-500: #d21400;
    /* original */
    --himbeere-500: #d73282;
    /* original */
    /* Lila */
    --lila-100: #ebe1ed;
    /* minimal gedämpft */
    --lila-500: #731e7d;
    /* original */
  }
}
@font-face {
  font-family: "suisse";
  src: url("../fonts/SuisseIntl-Light-WebXL.woff") format("woff"), url("../fonts/SuisseIntl-Light-WebXL.woff2") format("woff2");
  font-weight: 300;
}
@font-face {
  font-family: "suisse";
  src: url("../fonts/SuisseIntl-Regular-WebXL.woff") format("woff"), url("../fonts/SuisseIntl-Regular-WebXL.woff2") format("woff2");
  font-weight: 400;
}
@font-face {
  font-family: "suisse";
  src: url("../fonts/SuisseIntl-Medium-WebXL.woff") format("woff"), url("../fonts/SuisseIntl-Medium-WebXL.woff2") format("woff2");
  font-weight: 500;
}
* {
  font-family: "suisse", sans-serif;
}

a {
  color: var(--schwarz);
  text-decoration: none;
}

a span.underlined {
  font-weight: 500;
  background-repeat: no-repeat;
  background-image: linear-gradient(var(--nak-blau-500), var(--nak-blau-500));
  background-position: 0 100%;
  background-size: 100% 1px;
  text-decoration: none;
  display: inline-block;
}

a span.underlined_animation_inverted {
  font-weight: 500;
  background-repeat: no-repeat;
  transition: background-size 0.35s ease-in-out;
  background-image: linear-gradient(var(--nak-blau-500), var(--nak-blau-500));
  background-position: 0 100%;
  background-size: 100% 1px;
  text-decoration: none;
  display: inline-block;
}

a span.underlined_animation_inverted:hover {
  background-size: 0 1px;
}

a span.underlined_animation {
  font-weight: 500;
  background-repeat: no-repeat;
  transition: background-size 0.35s ease-in-out;
  background-image: linear-gradient(var(--nak-blau-500), var(--nak-blau-500));
  background-position: 0 100%;
  background-size: 0 1px;
  text-decoration: none;
  display: inline-block;
}

a span.underlined_animation:hover {
  background-size: 100% 1px;
}

a:hover {
  color: var(--nak-blau-500);
}

section img {
  aspect-ratio: 3/2;
}

.light {
  font-weight: 300;
}

.medium {
  font-weight: 500;
}

p {
  font: var(--p1);
}

p.p2 {
  font: var(--p2);
}

.label1 {
  font: var(--label1);
}

.label2 {
  font: var(--label2);
}

.label3 {
  font: var(--label3);
}

h1 {
  font: var(--h1);
}

h2 {
  font: var(--h2);
}

h3 {
  font: var(--h3);
}

h4 {
  font: var(--h3);
}

header,
main,
footer,
.wrapper {
  width: 100%;
  width: min(100%, var(--container-max-width));
  margin: auto;
}

ul {
  list-style: none;
}

.page-dim {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 10;
}

/* sobald ein li im Menü mit Mega-Panel gehovert/fokussiert ist */
body:has(.main-menu li.has-mega:hover) .page-dim,
body:has(.main-menu li.has-mega:focus-within) .page-dim {
  opacity: 1;
}

@media (min-width: 1025px) {
  .hide-on-desktop {
    display: none !important;
  }
}

@media (max-width: 1200px) and (min-width: 1025px) {
  .hide-on-small-desktop {
    display: none !important;
  }
}

@media (max-width: 1024.98px) and (min-width: 768px) {
  .hide-on-tablet {
    display: none !important;
  }
}

@media (max-width: 767.98px) {
  .hide-on-mobile {
    display: none !important;
  }
}

a.cta.cta.cta.cta.cta.cta {
  display: grid;
  grid-template-columns: 48px auto;
  background-color: var(--weiss);
  padding: 24px;
  font-weight: 500;
  gap: 24px;
  margin-bottom: 24px;
  height: auto;
}
a.cta.cta.cta.cta.cta.cta::after {
  display: none;
}
a.cta.cta.cta.cta.cta.cta svg {
  width: 48px;
  height: 48px;
}
a.cta.cta.cta.cta.cta.cta div {
  display: flex;
  flex-direction: column;
}
a.cta.cta.cta.cta.cta.cta div h4 {
  padding: 0;
  margin: 0;
  line-height: 1.25;
}
a.cta.cta.cta.cta.cta.cta div div {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-direction: row;
}
a.cta.cta.cta.cta.cta.cta div svg {
  width: 20px;
  height: 20px;
}
a.cta.cta.cta.cta.cta.cta div span {
  font-size: 14px;
  line-height: 1.25;
}
a.cta.cta.cta.cta.cta.cta::after {
  display: none;
}

a.cta--blue {
  outline: 2px solid var(--dunkelblau-500);
}
a.cta--blue svg {
  color: var(--dunkelblau-500);
}

a.cta--pink {
  outline: 2px solid var(--himbeere-500);
}
a.cta--pink svg {
  color: var(--himbeere-500);
}

a.cta--pink:hover {
  background-color: var(--himbeere-100) !important;
  color: #000 !important;
}

a.cta--blue:hover {
  background-color: var(--dunkelblau-100) !important;
  color: #000 !important;
}

header {
  position: sticky;
  top: 0;
  z-index: 30;
  /* über dem Overlay */
  /* Abstannd zwischen Logo und Text: 1/3 von 20vw oder 80px, je nachdem was kleiner ist */
  gap: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media (min-width: 1025px) {
  header {
    align-items: flex-end;
  }
}
header {
  padding-inline: var(--gutter);
  padding-block: var(--gutter);
  padding-bottom: 0;
  font-size: 18px;
  background: var(--weiss);
  transition: padding-block 0.3s ease, min-height 0.3s ease;
  /* Verkleinerter Header beim Scrollen: Logo + Text werden ausgeblendet
     und gleiten nach oben raus, restliche Inhalte (Navigation, CTAs)
     bleiben sichtbar. Die Höhe verringert sich animiert auf 60px. */
}
body.is-scrolled header {
  padding-block: 0;
  min-height: 60px;
}
body.is-scrolled header .logo-container {
  max-height: 0;
  margin-block-end: calc(var(--gutter) * -1);
  opacity: 0;
  transform: translateY(-100%);
  pointer-events: none;
}
body.is-scrolled header .main-menu a {
  padding-block: 20px;
}
body.is-scrolled header .secondary-menu {
  padding-block: 20px;
}
header .logo-container {
  display: flex;
  align-items: flex-end;
  padding-bottom: var(--gutter);
  gap: calc(min(10vw, 80px) / 3);
  flex-shrink: 0;
  transform-origin: top left;
  overflow: hidden;
  transition: max-height 0.3s ease, margin-block-end 0.3s ease, opacity 0.25s ease, transform 0.3s ease;
}
header .logo-container strong {
  font-weight: 500;
}
header .logo-container div {
  font-size: 18px;
  line-height: 1.25;
  display: flex;
  flex-direction: column;
  vertical-align: bottom;
  white-space: nowrap;
}
@media (max-width: 1024.98px) and (min-width: 768px) {
  header .logo-container div {
    font-size: 14px;
  }
}
@media (max-width: 767.98px) {
  header .logo-container div {
    font-size: 12px;
  }
}
header .logo-container img.logo {
  width: 80px;
  max-width: 10vw;
  min-width: 48px;
}
header .logo-container:hover {
  color: black;
}
header .main-menu {
  font-weight: 500;
  gap: var(--gutter);
  display: flex;
  align-items: center;
}
@media (min-width: 1025px) {
  header .main-menu {
    align-items: flex-end;
  }
}
header .main-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 2rem;
}
header .main-menu li {
  position: static;
  /* wichtig: Panel relativ zu .main-menu, nicht zum li */
}
header .main-menu {
  /* Submenu-Toggle-Button: nur Mobile/Tablet (menu-open) */
}
header .main-menu .submenu-toggle {
  display: none;
}
header .main-menu {
  /* ── Mega-Panel: zentrale Grid-Definition ────────────────
     Layout-Idee: jedes Kind bekommt einen Area-Namen
     (head/intro/links1/links2/cta/back). Pro Breakpoint
     wird nur grid-template-areas + columns ausgetauscht.
     Default = Desktop (4 Spalten). Tablet/Mobile werden
     im body.menu-open-Block überschrieben. */
}
header .main-menu .mega-panel {
  position: absolute;
  left: 0;
  right: 0;
  display: none;
  background: var(--weiss);
  padding: var(--gutter);
  border-top: 1px solid var(--grau-200);
  gap: var(--column-gap);
  /* Spalteninhalte oben ausrichten, nicht auf die Höhe verteilen */
  align-items: start;
  align-content: start;
  grid-auto-rows: min-content;
  grid-template-columns: repeat(4, 1fr);
  /* Desktop-Layout (vier Spalten):
     Spalte 1 = Textblock (head+intro),
     Spalten 2+3 = Menü-Listen,
     Spalte 4 = Sprache (oben) + CTAs (unten) */
  grid-template-areas: "head   . . langs" "intro  links1 links2 cta";
}
header .main-menu .mega-panel > .mega-panel-header {
  grid-area: head;
}
header .main-menu .mega-panel > .col--intro {
  grid-area: intro;
  padding-bottom: 24px !important;
}
header .main-menu .mega-panel .col--links-1 {
  grid-area: links1;
}
@media (max-width: 1024.98px) and (min-width: 768px) {
  header .main-menu .mega-panel .col--links-1 {
    margin-bottom: 0 !important;
  }
}
@media (max-width: 767.98px) {
  header .main-menu .mega-panel .col--links-1 {
    margin-bottom: 0 !important;
  }
}
header .main-menu .mega-panel .col--links-2 {
  grid-area: links2;
}
header .main-menu .mega-panel .col--cta {
  grid-area: cta;
  top: 0;
}
header .main-menu .mega-panel .col--langs {
  grid-area: langs;
}
header .main-menu .mega-panel {
  /* Wrapper um links1+links2: auf Desktop/Mobile transparent,
     damit die beiden Listen weiterhin als eigenständige Grid-Items
     in ihren jeweiligen Areas (links1/links2) platziert werden.
     Auf Tablet wird der Wrapper zum echten Grid-Item (siehe unten),
     damit beide Listen dort als ein durchgehender Block fließen. */
}
header .main-menu .mega-panel > .col--links-group {
  display: contents;
}
header .main-menu .mega-panel > .back-btn {
  grid-area: back;
  position: relative;
  left: -6px;
}
@media (max-width: 767.98px) {
  header .main-menu .mega-panel > .back-btn {
    margin-top: 16px;
  }
}
header .main-menu .mega-panel {
  /* Sprachauswahl im Mega-Panel (Desktop + Tablet) */
}
header .main-menu .mega-panel .col--langs {
  display: flex;
  gap: 8px;
  align-self: start;
  justify-content: flex-end;
}
@media (max-width: 1024.98px) and (min-width: 768px) {
  header .main-menu .mega-panel .col--langs {
    justify-content: flex-start;
  }
}
@media (max-width: 767.98px) {
  header .main-menu .mega-panel .col--langs {
    justify-content: flex-start;
  }
}
header .main-menu .mega-panel .col--langs .lang-btn {
  border: 2px solid var(--nak-blau-300);
  padding: 6px 14px;
  font-size: 16px;
  font-weight: 500;
  color: var(--grau-900);
  background: none;
  text-decoration: none;
  transition: background-color 0.2s ease;
}
header .main-menu .mega-panel .col--langs .lang-btn:hover {
  background-color: var(--nak-blau-100);
  color: var(--nak-blau-500);
}
header .main-menu .mega-panel a {
  padding: 0;
  height: auto;
  display: block;
  border-bottom: none;
}
header .main-menu .mega-panel nav {
  display: flex;
  flex-direction: column;
  position: relative;
  top: -12px;
}
header .main-menu .mega-panel nav a {
  padding-block: 16px;
  border-bottom: 1px solid var(--grau-200);
  position: relative;
}
header .main-menu .mega-panel nav > a::after {
  content: "";
  width: 10px;
  height: 10px;
  position: absolute;
  top: 50%;
  right: 5px;
  border-top: 1px solid var(--nak-blau-500);
  border-right: 1px solid var(--nak-blau-500);
  transform: translateY(-50%) rotate(45deg);
}
header .main-menu .mega-panel p {
  font: var(--label1);
  color: var(--grau-900);
  margin-bottom: 16px;
}
header .main-menu .mega-panel .mega-panel-header {
  display: flex;
  gap: var(--gutter);
  align-items: center;
}
header .main-menu .mega-panel .mega-panel-header h2 {
  font-weight: 500;
}
header .main-menu .mega-panel .mega-panel-header a {
  border: 2px solid var(--nak-blau-300);
  padding-inline: calc(var(--gutter) / 2);
  height: 100%;
  display: grid;
  align-items: center;
  font-size: 16px;
}
header .main-menu .mega-panel .mega-panel-header a:hover {
  background-color: var(--nak-blau-100);
  color: var(--nak-blau-500);
}
header .main-menu {
  /* Desktop: Hover/Focus öffnet das Panel als Grid */
}
header .main-menu li:hover > .mega-panel,
header .main-menu li:focus-within > .mega-panel {
  display: grid;
}
@media (max-width: 1024.98px) and (min-width: 768px) {
  header .main-menu li:hover > .mega-panel,
  header .main-menu li:focus-within > .mega-panel {
    /* Auf Tablet wird das Panel nicht via Hover/Focus geöffnet,
       sondern nur explizit via submenu-toggle (siehe body.menu-open) */
    display: none;
  }
}
@media (max-width: 767.98px) {
  header .main-menu li:hover > .mega-panel,
  header .main-menu li:focus-within > .mega-panel {
    /* Auf Mobile wird das Panel nicht via Hover/Focus geöffnet,
       sondern nur explizit via submenu-toggle (siehe body.menu-open) */
    display: none;
  }
}
@media (max-width: 1024.98px) and (min-width: 768px) {
  header .main-menu {
    display: none;
  }
}
header .main-menu a {
  padding-block: var(--gutter);
  height: 100%;
  display: flex;
  align-items: center;
}
@media (min-width: 1025px) {
  header .main-menu a {
    align-items: flex-end;
  }
}
header .main-menu a {
  border-bottom: 2px solid transparent;
  transition: border-color 0.3s ease-in-out, color 0.3s ease-in-out;
}
header .main-menu li:focus-within > a,
header .main-menu li:hover > a {
  border-bottom: 2px solid var(--nak-blau-500);
  color: var(--nak-blau-500);
}
header {
  /* ─── Toggle-Button Reset ─────────────────────────────────────── */
}
header button.toggle {
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
@media (max-width: 1024.98px) and (min-width: 768px) {
  header button.toggle {
    gap: 12px;
  }
  header button.toggle .underlined {
    border-bottom: 0 none;
    background-size: 100% 0;
  }
}
@media (max-width: 767.98px) {
  header button.toggle {
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
  }
  header button.toggle .underlined {
    border-bottom: 0 none;
    background-size: 100% 0;
  }
}
header button.toggle .close-icon {
  display: none;
}
header button.toggle svg {
  width: 16px;
  height: 16px;
  color: var(--nak-blau-500);
}
@media (max-width: 1024.98px) and (min-width: 768px) {
  header button.toggle svg {
    width: 24px;
    height: 24px;
  }
}
header .secondary-menu {
  font-weight: 500;
  padding-block: var(--gutter);
  display: flex;
  gap: var(--gutter);
  align-items: center;
}
@media (min-width: 1025px) {
  header .secondary-menu {
    align-items: flex-end;
  }
}
@media (max-width: 767.98px) {
  header .secondary-menu {
    font-size: 14px;
    line-height: 1.25;
  }
}
@media (max-width: 1024.98px) and (min-width: 768px) {
  header .secondary-menu {
    align-items: center;
  }
}
header .secondary-menu a {
  display: flex;
  align-items: center;
  gap: 8px;
}
@media (max-width: 1024.98px) and (min-width: 768px) {
  header .secondary-menu a {
    gap: 12px;
  }
  header .secondary-menu a .underlined_animation_inverted {
    border-bottom: 0 none;
    background-size: 100% 0;
  }
}
@media (max-width: 767.98px) {
  header .secondary-menu a {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
  }
  header .secondary-menu a .underlined_animation_inverted {
    border-bottom: 0 none;
    background-size: 100% 0;
  }
}
header .secondary-menu svg {
  width: 16px;
  height: 16px;
  color: var(--nak-blau-500);
}
@media (max-width: 1024.98px) and (min-width: 768px) {
  header .secondary-menu svg {
    width: 24px;
    height: 24px;
  }
}
@media (max-width: 767.98px) {
  header {
    border-bottom: 2px solid var(--grau-200);
  }
}

.breadcrumbs {
  border-top: 2px solid var(--grau-100);
  display: flex;
  padding: 16px var(--gutter);
  gap: 16px;
  background-color: var(--grau-100);
}
.breadcrumbs a {
  font-weight: 500;
  align-items: center;
  display: flex;
  gap: 8px;
  transition: color 0.3s ease-in-out;
  transition: border-color 0.3s ease-in-out;
}
.breadcrumbs a svg {
  color: var(--nak-blau-500);
  width: 16px;
  height: 16px;
}
.breadcrumbs svg {
  width: 12px;
  height: 12px;
}
@media (max-width: 767.98px) {
  .breadcrumbs {
    display: none;
  }
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  padding: 0 var(--gutter);
  -moz-column-gap: var(--column-gap);
       column-gap: var(--column-gap);
}

.grid-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  /* damit man durchklicken kann */
  z-index: 9999;
}

.grid-overlay-grid {
  margin-inline: auto;
  width: 100%;
  width: min(100%, var(--container-max-width));
  margin: auto;
  pointer-events: none;
  /* damit man durchklicken kann */
  z-index: 9999;
  display: none;
  /* standardmässig ausgeblendet, wird durch JavaScript aktiviert */
  height: 100%;
  -moz-column-gap: var(--column-gap);
       column-gap: var(--column-gap);
  padding: 0 var(--gutter);
  grid-template-columns: repeat(12, 1fr);
}

.grid-overlay-col {
  background: var(--grid-overlay-color);
}

/* Span-Klassen — Offset von 1, weil Spalte 1 das linke 1fr ist */
.span-1 {
  grid-column: span 1;
}
@media (max-width: 767.98px) {
  .span-1 {
    grid-column: span 2;
  }
}

.span-2 {
  grid-column: span 2;
}
@media (max-width: 767.98px) {
  .span-2 {
    grid-column: span 4;
  }
}

.span-3 {
  grid-column: span 3;
}
@media (max-width: 767.98px) {
  .span-3 {
    grid-column: span 6;
  }
}

.span-4 {
  grid-column: span 4;
}
@media (max-width: 767.98px) {
  .span-4 {
    grid-column: span 8;
  }
}

.span-4-pre {
  grid-column: 8/span 4;
}
@media (max-width: 1024.98px) and (min-width: 768px) {
  .span-4-pre {
    grid-column: span 5;
  }
}
@media (max-width: 767.98px) {
  .span-4-pre {
    grid-column: span 12;
  }
}

.span-5 {
  grid-column: span 5;
}
@media (max-width: 767.98px) {
  .span-5 {
    grid-column: span 12;
  }
}

.pre-1 {
  grid-column: 2/span 5;
}

.span-6 {
  grid-column: span 6;
}
@media (max-width: 767.98px) {
  .span-6 {
    grid-column: span 12;
  }
}

.span-12 {
  grid-column: span 12;
}

.flex-row {
  display: flex;
  flex-direction: row;
  gap: var(--gutter);
}

.flex-column {
  display: flex;
  flex-direction: column;
  gap: var(--gutter);
}

.autospace {
  flex-grow: 1;
}

.bg-grau-100 {
  background-color: var(--grau-100);
}

.bg-grau-200 {
  background-color: var(--grau-200);
}

.bg-grau-700 {
  background-color: var(--grau-700);
}

/* ─── Mobile / Tablet Menu Overlay ───────────────────────────────── */
/* page-dim auch bei offenem Mobile-Menü anzeigen */
body.menu-open .page-dim {
  opacity: 1;
  pointer-events: auto;
}

body.menu-open header .mega-panel {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

/* Main-Menu als Overlay UNTER dem Header */
body.menu-open .main-menu {
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  position: fixed;
  top: calc(var(--header-height, 88px));
  /* startet direkt unter dem Header */
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 25;
  background: var(--weiss);
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: var(--gutter);
}
@media (max-width: 1024.98px) and (min-width: 768px) {
  body.menu-open .main-menu {
    /* Tablet 1.Ebene: 2 Spalten.
       Links: Suche/CTA (.mobile-extras) + Sprachen (.mobile-lang).
       Rechts: Menü (ul). */
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "extras menu" "lang   menu";
    gap: var(--column-gap);
    align-items: start;
    align-content: start;
  }
  body.menu-open .main-menu > .mobile-extras {
    grid-area: extras;
  }
  body.menu-open .main-menu > ul {
    grid-area: menu;
  }
  body.menu-open .main-menu > .mobile-lang {
    grid-area: lang;
  }
}
@media (max-width: 767.98px) {
  body.menu-open .main-menu {
    /* Mobile: 1 Spalte */
    display: flex !important;
    flex-direction: column;
  }
}
body.menu-open .main-menu {
  /* ── Erste Ebene ─────────────────────────────────────── */
}
body.menu-open .main-menu > ul {
  flex-direction: column;
  gap: 0;
  padding: 0 var(--gutter);
}
body.menu-open .main-menu li {
  position: relative;
  border-bottom: 1px solid var(--grau-200);
}
body.menu-open .main-menu > ul > li {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
}
body.menu-open .main-menu > ul > li > a {
  padding-block: 18px;
  height: auto;
  align-items: center;
  border-bottom: none;
  grid-column: 1;
  grid-row: 1;
  font-size: 18px;
  font-weight: 500;
}
body.menu-open .main-menu > ul > li > a:hover,
body.menu-open .main-menu > ul > li > a:focus {
  border-bottom: none;
  color: var(--nak-blau-500);
}
body.menu-open .main-menu {
  /* Chevron für alle Einträge */
}
body.menu-open .main-menu > ul > li::after {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-top: 2px solid var(--nak-blau-500);
  border-right: 2px solid var(--nak-blau-500);
  transform: rotate(45deg);
  grid-column: 2;
  grid-row: 1;
  pointer-events: none;
  margin-right: 4px;
}
body.menu-open .main-menu {
  /* Einträge mit Submenu: Chevron durch Button ersetzt */
}
body.menu-open .main-menu > ul > li.has-mega::after {
  display: none;
}
body.menu-open .main-menu {
  /* Submenu-Toggle-Button */
}
body.menu-open .main-menu .submenu-toggle {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--nak-blau-500);
  padding: 18px 4px 18px 16px;
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.menu-open .main-menu .submenu-toggle::after {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.25s ease;
}
body.menu-open .main-menu {
  /* ── Zweite Ebene: Mega-Panel ersetzt erste Ebene ─────── */
}
@keyframes slideInFromRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes slideOutToRight {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}
body.menu-open .main-menu .mega-panel {
  display: none;
}
body.menu-open .main-menu {
  /* Wenn .showing-sub: erste Ebene + Extras ausblenden */
}
body.menu-open .main-menu.showing-sub .mobile-extras, body.menu-open .main-menu.showing-sub .mobile-lang {
  display: none !important;
}
body.menu-open .main-menu {
  /* In showing-sub: nur das aktive li (mit Panel) sichtbar lassen,
     andere li's der ersten Ebene verstecken.
     Während is-closing wird die erste Ebene wieder eingeblendet,
     damit man sie unter dem ausgleitenden Panel sieht. */
}
body.menu-open .main-menu.showing-sub:not(.is-closing) > ul > li:not(.is-open) {
  display: none !important;
}
body.menu-open .main-menu {
  /* Beim aktiven li: den Link und Toggle-Button der ersten Ebene verstecken,
     nur das Panel zeigen */
}
body.menu-open .main-menu.showing-sub:not(.is-closing) > ul > li.is-open > a, body.menu-open .main-menu.showing-sub:not(.is-closing) > ul > li.is-open > .submenu-toggle {
  display: none !important;
}
body.menu-open .main-menu {
  /* Aktives Mega-Panel als neue "Seite" anzeigen.
     Position absolut, damit es während is-closing als Overlay
     über die erste Ebene gleitet. */
}
body.menu-open .main-menu li.has-mega.is-open {
  /* offset-parent neutralisieren, damit das Panel relativ
     zur .main-menu (position: fixed) positioniert wird */
  position: static;
}
body.menu-open .main-menu li.has-mega.is-open > .mega-panel {
  /* Sichtbar als Overlay über der ersten Ebene.
     Spalten-/Area-Layout pro Breakpoint: */
  display: grid;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto;
  background: var(--weiss);
  z-index: 5;
  animation: slideInFromRight 0.3s ease forwards;
  padding: 0;
  border: none;
  gap: 0;
  /* Spalteninhalte oben ausrichten, nicht auf die Höhe verteilen */
  align-items: start;
  align-content: start;
  grid-auto-rows: min-content;
  /* Mobile (Default in diesem Block): 1 Spalte.
     Reihenfolge: Zurück → Textblock (head+intro) → Menü → CTAs.
     Sprachen werden auf Mobile 2. Ebene NICHT angezeigt. */
  grid-template-columns: 1fr;
  grid-template-areas: "back" "head" "intro" "links1" "links2" "cta";
  /* Tablet: 2 Spalten.
     Links: Zurück / Textblock / CTAs / Sprachen,
     Rechts: Menü (beide Link-Listen untereinander). */
}
@media (max-width: 1024.98px) and (min-width: 768px) {
  body.menu-open .main-menu li.has-mega.is-open > .mega-panel {
    grid-template-columns: 1fr 1fr;
    /* Linke Spalte: Zurück → Textblock → CTAs → Sprachen fließen sequenziell.
       Rechte Spalte: ein durchgehender Block mit beiden Link-Listen,
       damit die Zeilenhöhen nicht durch die linke Spalte gestreckt werden. */
    grid-template-areas: "back   ." "head   ." "intro  links" "cta    links" "langs  links";
  }
  body.menu-open .main-menu li.has-mega.is-open > .mega-panel > .col--links-group {
    display: block;
    grid-area: links;
    align-self: start;
  }
}
body.menu-open .main-menu li.has-mega.is-open > .mega-panel .mega-panel-header {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 16px var(--gutter) 12px;
}
body.menu-open .main-menu li.has-mega.is-open > .mega-panel .mega-panel-header h2 {
  font-size: 20px;
  font-weight: 500;
  flex: 1 1 100%;
}
body.menu-open .main-menu li.has-mega.is-open > .mega-panel .mega-panel-header .autospace {
  display: none;
}
body.menu-open .main-menu li.has-mega.is-open > .mega-panel .mega-panel-header a:not(.cta) {
  border: 2px solid var(--nak-blau-300);
  padding: 4px 12px;
  font-size: 14px;
  font-weight: 500;
  height: auto;
  display: inline-flex;
  align-items: center;
}
body.menu-open .main-menu li.has-mega.is-open > .mega-panel .col {
  display: block;
  padding: 0 var(--gutter);
  margin-bottom: 8px;
}
body.menu-open .main-menu li.has-mega.is-open > .mega-panel .col p {
  font-size: 14px;
  padding-block: 12px;
  color: var(--grau-900);
}
body.menu-open .main-menu li.has-mega.is-open > .mega-panel {
  /* Sprachen: auf Mobile 2. Ebene ausgeblendet,
     auf Tablet als Button-Reihe sichtbar.
     (Nach .col definiert, damit display:none gewinnt.) */
}
body.menu-open .main-menu li.has-mega.is-open > .mega-panel .col--langs {
  display: none;
}
@media (max-width: 1024.98px) and (min-width: 768px) {
  body.menu-open .main-menu li.has-mega.is-open > .mega-panel .col--langs {
    display: flex;
    gap: 8px;
    padding: 12px var(--gutter);
  }
}
body.menu-open .main-menu li.has-mega.is-open > .mega-panel nav {
  top: 0;
  padding: 0 var(--gutter);
  margin-bottom: 8px;
}
body.menu-open .main-menu li.has-mega.is-open > .mega-panel nav a {
  padding: 14px 0;
  font-size: 16px;
  font-weight: 500;
  border-bottom: 1px solid var(--grau-200);
  display: block;
  position: relative;
}
body.menu-open .main-menu li.has-mega.is-open > .mega-panel nav a::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 10px;
  height: 10px;
  border-top: 2px solid var(--nak-blau-500);
  border-right: 2px solid var(--nak-blau-500);
  transform: translateY(-50%) rotate(45deg);
}
body.menu-open .main-menu li.has-mega.is-open > .mega-panel .col--cta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px var(--gutter) 0;
}
body.menu-open .main-menu {
  /* Schließanimation: Panel gleitet nach rechts wieder weg */
}
body.menu-open .main-menu.is-closing li.has-mega.is-open > .mega-panel {
  animation: slideOutToRight 0.3s ease forwards;
}

/* Mobile Extras (Suche, Featured-CTA) */
body.menu-open .mobile-extras {
  flex-direction: column;
  padding: 0 var(--gutter);
  margin-bottom: 8px;
  display: grid;
  gap: calc(var(--gutter) * 2);
}
body.menu-open .mobile-extras .mobile-search {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-block: 16px;
  border-bottom: 1px solid var(--grau-200);
  font-size: 18px;
  font-weight: 400;
}
body.menu-open .mobile-extras .mobile-search svg {
  color: var(--nak-blau-500);
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}
body.menu-open .mobile-extras .mobile-cta-featured {
  display: grid !important;
  grid-template-columns: 56px 1fr;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background-color: var(--dunkelblau-500);
  color: var(--weiss);
  border-bottom: none;
  font-weight: 500;
}
body.menu-open .mobile-extras .mobile-cta-featured svg:first-child {
  width: 56px;
  height: 56px;
}
body.menu-open .mobile-extras .mobile-cta-featured div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
body.menu-open .mobile-extras .mobile-cta-featured div strong {
  font-size: 18px;
}
body.menu-open .mobile-extras .mobile-cta-featured div span {
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid var(--weiss);
  width: -moz-fit-content;
  width: fit-content;
}
body.menu-open .mobile-extras .mobile-cta-featured div span svg {
  width: 16px;
  height: 16px;
}

/* Sprachauswahl unten */
body.menu-open .mobile-lang {
  display: flex !important;
  gap: 12px;
  padding: 24px var(--gutter) 0;
}
body.menu-open .mobile-lang .lang-btn {
  border: 2px solid var(--nak-blau-300);
  padding: 8px 20px;
  font-size: 16px;
  font-weight: 500;
  color: var(--grau-900);
  background: none;
  text-decoration: none;
  transition: background-color 0.2s ease;
}
body.menu-open .mobile-lang .lang-btn:hover {
  background-color: var(--nak-blau-100);
  color: var(--nak-blau-500);
}

/* Toggle-Icon tauschen wenn Menü offen */
body.menu-open button.toggle .menu-icon {
  display: none !important;
}
body.menu-open button.toggle .close-icon {
  display: block !important;
  width: 16px;
  height: 16px;
}
@media (max-width: 1024.98px) and (min-width: 768px) {
  body.menu-open button.toggle .close-icon {
    width: 24px;
    height: 24px;
  }
}

a.with-icon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
a.with-icon svg {
  width: 16px;
  height: 16px;
  color: var(--nak-blau-500);
}

/* Zurück-Button */
.back-btn.back-btn.back-btn.back-btn.back-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--schwarz);
  font-size: 16px;
  font-weight: 500;
  padding: 16px var(--gutter);
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
}
.back-btn.back-btn.back-btn.back-btn.back-btn svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  transform: rotate(180deg);
  color: var(--nak-blau-500);
}

.content-hero {
  position: relative;
  padding: 0 var(--gutter);
}
@media (max-width: 1024.98px) and (min-width: 768px) {
  .content-hero {
    padding: 0;
  }
}
@media (max-width: 767.98px) {
  .content-hero {
    padding: 0;
  }
}
.content-hero img {
  aspect-ratio: 18/8;
  -o-object-fit: cover;
     object-fit: cover;
}
@media (max-width: 767.98px) {
  .content-hero img {
    width: 100%;
    aspect-ratio: 4/3;
  }
}
.content-hero .overlay {
  position: absolute;
  width: calc(50% - var(--gutter) - var(--column-gap) / 2);
  left: var(--gutter);
  bottom: calc(-1 * var(--vertical-gap));
  background-color: var(--nak-blau-500);
  color: var(--weiss);
  padding: var(--gutter);
  text-wrap: pretty;
  padding-bottom: 80px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
@media (max-width: 1024.98px) and (min-width: 768px) {
  .content-hero .overlay {
    padding-bottom: 12px;
    padding: var(--gutter);
    position: relative;
    top: -1px;
    left: 0;
    right: 0;
    width: auto;
    padding-bottom: 40px;
  }
}
@media (max-width: 767.98px) {
  .content-hero .overlay {
    padding: var(--gutter);
    position: relative;
    top: -1px;
    left: 0;
    right: 0;
    width: auto;
    padding-bottom: 40px;
  }
}
.content-hero {
  --big-square-size: 80px;
  --small-square-size: 40px;
}
@media (max-width: 767.98px) {
  .content-hero {
    --big-square-size: 48px;
    --small-square-size: 24px;
  }
}
.content-hero .big-square {
  position: absolute;
  width: var(--big-square-size);
  height: var(--big-square-size);
  transition: height 0.3s ease, width 0.3s ease, bottom 0.3s ease, right 0.3s ease;
  background-color: var(--nak-blau-300);
  bottom: calc(-0.5 * var(--big-square-size));
  right: var(--gutter);
}
@media (max-width: 1024.98px) and (min-width: 768px) {
  .content-hero .big-square {
    top: calc(44.4444444444vw - var(--big-square-size));
    right: 0;
  }
}
@media (max-width: 767.98px) {
  .content-hero .big-square {
    top: calc(75vw - var(--big-square-size));
    right: 0;
  }
}
.content-hero .small-square {
  position: absolute;
  width: var(--small-square-size);
  height: var(--small-square-size);
  transition: height 0.3s ease, width 0.3s ease, bottom 0.3s ease, right 0.3s ease;
  background-color: var(--nak-blau-500);
  bottom: var(--small-square-size);
  right: calc(var(--gutter) + var(--big-square-size));
}
@media (max-width: 1024.98px) and (min-width: 768px) {
  .content-hero .small-square {
    top: calc(44.4444444444vw - (var(--big-square-size) + var(--small-square-size)));
    right: calc(var(--big-square-size));
  }
}
@media (max-width: 767.98px) {
  .content-hero .small-square {
    top: calc(75vw - (var(--big-square-size) + var(--small-square-size)));
    right: calc(var(--big-square-size));
  }
}
.content-hero .scroll-indicator {
  position: absolute;
  bottom: calc(-1 * var(--vertical-gap) / 2);
  left: calc(50% + 2 * var(--column-gap));
  transform: translateX(-50%);
  z-index: 1;
}
@media (max-width: 767.98px) {
  .content-hero .scroll-indicator {
    left: 50%;
    transform: translateX(-50%);
  }
}
.content-hero.splide .splide__track {
  overflow-x: clip;
  overflow-y: visible;
}
.content-hero.splide .content-hero-card.splide__slide {
  box-sizing: border-box;
  position: relative;
}
.content-hero.splide .content-hero-card.splide__slide .overlay {
  left: 0;
  width: calc(50% - var(--column-gap) / 2);
}
@media (max-width: 1024.98px) and (min-width: 768px) {
  .content-hero.splide .content-hero-card.splide__slide .overlay {
    width: 100%;
  }
}
@media (max-width: 767.98px) {
  .content-hero.splide .content-hero-card.splide__slide .overlay {
    width: 100%;
  }
}
.content-hero.splide .content-hero-card.splide__slide .big-square {
  right: 0;
}
.content-hero.splide .content-hero-card.splide__slide .small-square {
  right: var(--big-square-size);
}
.content-hero .hero-scroll-indicator span {
  cursor: pointer;
}
.content-hero .hero-scroll-indicator .scroll-indicator-long {
  background-color: var(--grau-300, #ccc);
}
.content-hero .hero-scroll-indicator .scroll-indicator-long::after {
  width: var(--hero-progress-width, 0%);
  background-color: var(--schwarz);
  transition: width 0.1s linear;
}
.content-hero {
  margin-bottom: calc(var(--vertical-gap) * 2);
}

.content-news .button {
  border: 1px solid var(--nak-blau-300);
  padding: 16px 24px;
  display: inline-flex;
  vertical-align: middle;
  font-weight: 500;
  font-size: 18px;
}
.content-news .button svg {
  width: 20px;
  height: 20px;
  color: var(--nak-blau-500);
  margin-left: 8px;
}
.content-news .button:hover {
  background-color: var(--nak-blau-100);
}
.content-news h4 {
  color: var(--nak-blau-500);
  font-weight: 300;
}
.content-news h2 {
  font-weight: 500;
}
.content-news .left {
  grid-column: 2/span 5;
}
@media (max-width: 1024.98px) and (min-width: 768px) {
  .content-news .left {
    grid-column: span 6;
  }
}
.content-news .right {
  grid-column: 8/span 4;
}
@media (max-width: 1024.98px) and (min-width: 768px) {
  .content-news .right {
    grid-column: span 6;
  }
}
.content-news .flex-column {
  display: flex;
  flex-direction: column;
  gap: var(--column-gap);
  align-items: flex-start;
  padding-block: var(--gutter);
}
@media (max-width: 1024.98px) and (min-width: 768px) {
  .content-news .flex-column {
    padding-block: 0;
  }
}
.content-news .flex-column > div {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.content-news {
  margin-bottom: var(--vertical-gap);
}
@media (max-width: 767.98px) {
  .content-news .grid {
    display: flex;
    flex-direction: column;
    gap: 32px;
  }
  .content-news div {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .content-news .flex-column {
    gap: var(--gutter);
  }
}

.content-news-slider {
  background-color: var(--tuerkisblau-100);
  padding-top: 96px;
}
@media (max-width: 1024.98px) and (min-width: 768px) {
  .content-news-slider {
    padding-top: 64px;
  }
}
@media (max-width: 767.98px) {
  .content-news-slider {
    padding-top: 64px;
  }
}
.content-news-slider .content-news-slider-container {
  display: flex;
  gap: 32px;
  overflow-x: auto;
  padding-bottom: 16px;
}
@media (max-width: 767.98px) {
  .content-news-slider .content-news-slider-container {
    gap: 16px;
  }
}
.content-news-slider .content-news-slider-splide .splide__track {
  overflow: hidden;
}
.content-news-slider .content-news-slider-splide .content-news-slider-container.splide__list {
  gap: 0;
  overflow: visible;
  padding-bottom: 0;
}
.content-news-slider .content-news-slider-splide .content-news-slider-card.splide__slide {
  flex-basis: auto;
  width: auto;
  box-sizing: border-box;
}
@media (max-width: 767.98px) {
  .content-news-slider .content-news-slider-splide {
    margin-inline: calc(var(--gutter) * -1);
  }
  .content-news-slider .content-news-slider-splide .splide__track {
    padding-left: var(--gutter);
    padding-right: 0;
  }
}
.content-news-slider .content-news-slider-header a.button.is-disabled {
  opacity: 0.4;
  pointer-events: none;
}
.content-news-slider .scroll-indicator .scroll-indicator-ultralong::after {
  width: var(--news-slider-progress-width, 30%);
  left: var(--news-slider-progress-left, 0%);
  transition: left 0.25s ease, width 0.25s ease;
}
.content-news-slider .content-news-slider-header {
  display: flex;
  gap: 8px;
}
.content-news-slider .content-news-slider-header h4 {
  color: var(--nak-blau-500);
  font-weight: 300;
}
.content-news-slider .content-news-slider-header h2 {
  font-weight: 500;
}
.content-news-slider .content-news-slider-header a.button {
  border: 2px solid var(--nak-blau-300);
  padding: 12px 24px;
  display: inline-flex;
  vertical-align: middle;
  font-weight: 500;
  font-size: 16px;
  white-space: nowrap;
  gap: 8px;
}
.content-news-slider .content-news-slider-header a.button svg {
  width: 20px;
  height: 20px;
  color: var(--nak-blau-500);
}
.content-news-slider .content-news-slider-header a.button:hover {
  background-color: var(--nak-blau-100);
}
.content-news-slider .content-news-slider-header .flex-row {
  align-items: flex-start;
}
@media (max-width: 767.98px) {
  .content-news-slider .content-news-slider-header > div {
    flex-direction: column;
    gap: var(--gutter);
    align-items: flex-start;
  }
}
.content-news-slider .content-news-slider-header {
  margin-bottom: 64px;
}
@media (max-width: 767.98px) {
  .content-news-slider .content-news-slider-header {
    margin-bottom: 32px;
  }
}
.content-news-slider .content-news-slider-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex-shrink: 0;
  flex-basis: calc(33.333% - var(--column-gap) * 2 / 3);
}
@media (max-width: 1024.98px) and (min-width: 768px) {
  .content-news-slider .content-news-slider-card {
    flex-basis: calc(50% - var(--column-gap) * 2 / 2);
  }
}
@media (max-width: 767.98px) {
  .content-news-slider .content-news-slider-card {
    width: 100%;
  }
}
.content-news-slider .content-news-slider-card {
  align-items: flex-start;
}
.content-news-slider .content-news-slider-card h4 {
  font-weight: 500;
  font-size: 24px;
}
.content-news-slider .content-news-slider-card a {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}
.content-news-slider .content-news-slider-card a svg {
  width: 16px;
  height: 16px;
  color: var(--nak-blau-500);
}
.content-news-slider .content-news-slider-card-meta {
  display: flex;
  gap: 8px;
  font-size: 16px;
  color: var(--nak-blau-500);
  font-weight: 400;
  align-items: center;
}
.content-news-slider .content-news-slider-card-meta svg {
  width: 16px;
  height: 16px;
  color: var(--grau-700);
}
.content-news-slider .content-news-slider-card-meta .badge {
  background-color: var(--nak-blau-500);
  color: var(--weiss);
  padding: 7px 15px;
  font-size: 12px;
  font-weight: 500;
}
.content-news-slider .content-news-slider-card-meta .badge--tuerkisblau {
  background-color: var(--tuerkisblau-500);
  color: var(--weiss);
}
.content-news-slider .content-news-slider-card-meta .badge--dunkelgruen {
  background-color: var(--dunkelgruen-700);
  color: var(--weiss);
}
.content-news-slider .scroll-indicator {
  --indicator-height: 4px;
  position: relative;
  bottom: -32px;
  padding-top: 32px;
}
.content-news-slider {
  margin-bottom: var(--vertical-gap);
}

/* ─── News-Artikelansicht ─────────────────────────────────────
   Einzelseite eines Artikels: Header (Meta+H1+Lead), Aktions-
   Row, Galerie mit Thumbnails, Body-Text, Share-Buttons.       */
.content-news-view {
  margin-block: var(--vertical-gap);
}
@media (max-width: 767.98px) {
  .content-news-view {
    margin-block: var(--gutter);
  }
}
.content-news-view > .grid {
  row-gap: 32px;
}
.content-news-view .content-news-view-header,
.content-news-view .content-news-view-actions,
.content-news-view .content-news-view-gallery,
.content-news-view .content-news-view-body,
.content-news-view .content-news-view-share {
  grid-column: 4/span 6;
}
@media (max-width: 1024.98px) and (min-width: 768px) {
  .content-news-view .content-news-view-header,
  .content-news-view .content-news-view-actions,
  .content-news-view .content-news-view-gallery,
  .content-news-view .content-news-view-body,
  .content-news-view .content-news-view-share {
    grid-column: 2/span 10;
  }
}
@media (max-width: 767.98px) {
  .content-news-view .content-news-view-header,
  .content-news-view .content-news-view-actions,
  .content-news-view .content-news-view-gallery,
  .content-news-view .content-news-view-body,
  .content-news-view .content-news-view-share {
    grid-column: span 12;
  }
}
.content-news-view .content-news-view-gallery {
  grid-column: 3/span 8;
}
@media (max-width: 1024.98px) and (min-width: 768px) {
  .content-news-view .content-news-view-gallery {
    grid-column: 1/span 12;
  }
}
@media (max-width: 767.98px) {
  .content-news-view .content-news-view-gallery {
    grid-column: span 12;
  }
}
.content-news-view .content-news-view-header {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.content-news-view .content-news-view-header h1 {
  font-weight: 500;
  margin: 0;
}
.content-news-view .content-news-view-meta {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  align-self: flex-start;
  gap: 8px;
  margin: 0;
  color: var(--nak-blau-500);
  font-weight: 400;
  font-size: 16px;
}
.content-news-view .content-news-view-meta time {
  color: var(--nak-blau-500);
  font-weight: 400;
  font: var(--p1);
  font-size: 16px;
}
.content-news-view .content-news-view-lead {
  font: var(--p1);
  margin: 0;
  color: var(--schwarz);
}
.content-news-view .content-news-view-actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  margin-top: 8px;
}
@media (max-width: 767.98px) {
  .content-news-view .content-news-view-actions {
    flex-wrap: wrap;
  }
}
.content-news-view .content-news-view-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}
.content-news-view .content-news-view-action svg {
  width: 18px;
  height: 18px;
  color: var(--nak-blau-500);
}
.content-news-view .content-news-view-gallery {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.content-news-view .content-news-view-gallery-main {
  position: relative;
}
.content-news-view .content-news-view-gallery-main img {
  width: 100%;
  height: auto;
  aspect-ratio: 3/2;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
.content-news-view .content-news-view-gallery-main .content-news-view-gallery-splide .splide__track {
  overflow: hidden;
}
.content-news-view .content-news-view-gallery-main .content-news-view-gallery-splide .splide__list {
  padding: 0;
  margin: 0;
  list-style: none;
}
.content-news-view .content-news-view-gallery-main .content-news-view-gallery-splide .splide__slide {
  box-sizing: border-box;
}
.content-news-view .content-news-view-gallery-bar {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.content-news-view .content-news-view-gallery-badge {
  background-color: var(--tuerkisblau-500);
  color: var(--weiss);
  padding: 7px 15px;
  font-size: 12px;
  font-weight: 500;
}
.content-news-view .content-news-view-gallery-controls {
  display: flex;
  gap: 8px;
}
.content-news-view .content-news-view-gallery-controls a.button {
  background-color: var(--weiss);
  border: 1px solid var(--nak-blau-300);
  padding: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.content-news-view .content-news-view-gallery-controls a.button svg {
  width: 18px;
  height: 18px;
  color: var(--nak-blau-500);
}
.content-news-view .content-news-view-gallery-controls a.button:hover {
  background-color: var(--nak-blau-100);
}
.content-news-view .content-news-view-gallery-thumbs {
  margin: 0;
  padding: 0;
}
@media (max-width: 767.98px) {
  .content-news-view .content-news-view-gallery-thumbs {
    display: none;
  }
}
.content-news-view .content-news-view-gallery-thumbs .splide__list {
  padding: 0;
  margin: 0;
  list-style: none;
}
.content-news-view .content-news-view-gallery-thumbs .splide__slide {
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.2s ease;
}
.content-news-view .content-news-view-gallery-thumbs .splide__slide.is-active {
  opacity: 1;
}
.content-news-view .content-news-view-gallery-thumbs .splide__slide:hover {
  opacity: 0.85;
}
.content-news-view .content-news-view-gallery-thumbs .splide__slide img {
  width: 100%;
  height: auto;
  aspect-ratio: 3/2;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
.content-news-view .content-news-view-body {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.content-news-view .content-news-view-body h3 {
  font-weight: 500;
  margin: 16px 0 0;
}
.content-news-view .content-news-view-body p {
  margin: 0;
  font: var(--p1);
}
.content-news-view .content-news-view-body ul {
  margin: 0;
  padding-left: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  list-style: square;
}
.content-news-view .content-news-view-body ul li {
  font: var(--p1);
}
.content-news-view .content-news-view-body ul li::marker {
  color: var(--schwarz);
  font-size: 0.9em;
}
.content-news-view p.content-news-view-signature {
  margin-top: 8px !important;
  font-weight: 500;
}
.content-news-view .content-news-view-share {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 16px;
}
.content-news-view .content-news-view-share-label {
  margin: 0;
  color: var(--nak-blau-500);
  font-weight: 500;
}
.content-news-view .content-news-view-share-buttons {
  display: flex;
  flex-direction: row;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.content-news-view .content-news-view-share-buttons a {
  width: 40px;
  height: 40px;
  border: 1px solid var(--nak-blau-300);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--nak-blau-500);
}
.content-news-view .content-news-view-share-buttons a svg {
  width: 18px;
  height: 18px;
  color: var(--nak-blau-500);
}
.content-news-view .content-news-view-share-buttons a:hover {
  background-color: var(--nak-blau-100);
}

/* ─── Ähnliche Beiträge ───────────────────────────────────────
   Erbt das komplette Karten- und Slider-Layout von
   .content-news-slider und überschreibt nur die Header-Typo
   („Schon gelesen?" / „Ähnliche Beiträge") sowie die
   Hintergrundfarbe (graues Pendant zum türkisen Index-Slider). */
.content-news-related.content-news-slider {
  background-color: var(--tuerkisblau-100);
  padding-bottom: var(--vertical-gap);
  margin-bottom: 0;
}
.content-news-related.content-news-slider .content-news-related-header h4 {
  color: var(--nak-blau-500);
  font-weight: 300;
}

/* ─── News-Auflistung (Aktuelles) ─────────────────────────────
   Hellblauer Header mit H1, Suche und Filter-Toggle, türkise
   Deko-Quadrate; ausklappbares Filterpanel auf türkis-200;
   anschliessend 3-spaltiges Karten-Grid (responsive).         */
.content-news-list {
  margin-bottom: var(--vertical-gap);
}
.content-news-list .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.content-news-list .content-news-list-header {
  background-color: var(--nak-blau-100);
  position: relative;
  min-height: 200px;
}
.content-news-list .content-news-list-header-inner {
  position: sticky;
  top: 60px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  -moz-column-gap: var(--column-gap);
       column-gap: var(--column-gap);
  grid-template-rows: 48px min-content min-content;
  grid-template-areas: ".     .     .     .     .     .     .     .     .     squareTop squareTop squareTop" "title title title title title title title title title square    square    square" "ctrl  ctrl  ctrl  ctrl  ctrl  ctrl  ctrl  ctrl  ctrl  square2   square2   square2";
}
@media (max-width: 1024.98px) and (min-width: 768px) {
  .content-news-list .content-news-list-header-inner {
    grid-template-areas: ".     .     .     .     .     .     .     .     .     squareTop squareTop squareTop" "title title title title title title title title title square    square    square" "ctrl  ctrl  ctrl  ctrl  ctrl  ctrl  ctrl  ctrl  ctrl  square2   square2   square2";
  }
}
@media (max-width: 767.98px) {
  .content-news-list .content-news-list-header-inner {
    grid-template-rows: min-content min-content min-content;
    grid-template-areas: ".     .     .     .     .     .     .     .     .     .      squareTop squareTop" "title title title title title title title title title title  square    square" "ctrl  ctrl  ctrl  ctrl  ctrl  ctrl  ctrl  ctrl  ctrl  ctrl   ctrl   ctrl";
    padding-bottom: 32px;
  }
}
.content-news-list .content-news-list-header-inner {
  background-color: var(--nak-blau-100);
  transition: grid-template-rows 0.3s ease;
  /* Beim Scrollen wird der News-Listen-Header analog zur Karten- und
     Suchansicht auf die Bedien-Elemente (Suche + Filter-Toggle)
     reduziert. Die Headline klappt weg, die Deko-Quadrate bleiben
     erhalten und verkleinern sich. Auf Desktop ergibt sich eine
     Drei-Spalten-Anordnung (Controls links, Quadrate rechts). */
}
body.is-scrolled .content-news-list .content-news-list-header-inner {
  position: fixed;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  width: min(100%, var(--container-max-width));
  z-index: 50;
  grid-template-rows: 0 0 min-content;
}
body.is-scrolled .content-news-list .content-news-list-header-inner h2 {
  display: none;
}
body.is-scrolled .content-news-list .content-news-list-header-inner .content-news-list-controls {
  align-self: center;
  padding-block: 8px;
  max-width: none;
}
body.is-scrolled .content-news-list .content-news-list-header-inner .content-news-list-square--big {
  width: 64px;
  height: 64px;
}
body.is-scrolled .content-news-list .content-news-list-header-inner .content-news-list-square--small {
  width: 32px;
  height: 32px;
  margin-right: 64px;
}
body.is-scrolled .content-news-list .content-news-list-header-inner {
  /* Desktop-Scroll: kleines Quadrat oberhalb des grossen, Controls
     vertikal mittig auf Höhe beider Quadrate – identisches Muster
     wie in der Karten-Suche. */
}
@media (min-width: 1025px) {
  body.is-scrolled .content-news-list .content-news-list-header-inner {
    grid-template-rows: 0 32px min-content;
    grid-template-areas: ".    .    .    .    .    .    .    .    .    .       .       .      " ".    .    .    .    .    .    .    .    .    square  square  square " "ctrl ctrl ctrl ctrl ctrl ctrl ctrl ctrl ctrl square2 square2 square2";
  }
  body.is-scrolled .content-news-list .content-news-list-header-inner .content-news-list-controls {
    grid-row: 2/span 2;
    align-self: center;
    padding-block: 0;
  }
}
@media (max-width: 767.98px) {
  body.is-scrolled .content-news-list .content-news-list-header-inner {
    grid-template-rows: 0 0 min-content;
    grid-template-areas: ".    .    .    .    .    .    .    .    .    .    .    .   " ".    .    .    .    .    .    .    .    .    .    .    .   " "ctrl ctrl ctrl ctrl ctrl ctrl ctrl ctrl ctrl ctrl ctrl ctrl";
  }
  body.is-scrolled .content-news-list .content-news-list-header-inner .content-news-list-square--big,
  body.is-scrolled .content-news-list .content-news-list-header-inner .content-news-list-square--small {
    display: none;
  }
  body.is-scrolled .content-news-list .content-news-list-header-inner .content-news-list-controls {
    grid-column: 1/-1;
    padding-block: 8px;
  }
}
.content-news-list .content-news-list-header-inner h2 {
  grid-area: title;
  margin: 0;
  font-weight: 500;
  align-self: end;
  padding: 0 var(--gutter);
}
.content-news-list .content-news-list-square {
  pointer-events: none;
  justify-self: end;
}
.content-news-list .content-news-list-square--small {
  grid-area: square;
  align-self: start;
  width: 64px;
  height: 64px;
  background-color: var(--tuerkisblau-200);
  margin-right: 128px;
}
@media (max-width: 767.98px) {
  .content-news-list .content-news-list-square--small {
    width: 32px;
    height: 32px;
    grid-area: squareTop;
    margin-right: 64px;
  }
}
.content-news-list .content-news-list-square--big {
  grid-area: square2;
  align-self: start;
  width: 128px;
  height: 128px;
  background-color: var(--tuerkisblau-500);
}
@media (max-width: 767.98px) {
  .content-news-list .content-news-list-square--big {
    width: 64px;
    height: 64px;
    grid-area: square;
  }
}
.content-news-list .content-news-list-controls {
  grid-area: ctrl;
  align-self: center;
  display: flex;
  flex-direction: row;
  gap: 16px;
  flex-wrap: wrap;
  padding-inline: var(--gutter);
  max-width: 600px;
}
@media (max-width: 767.98px) {
  .content-news-list .content-news-list-controls {
    flex-direction: column;
    grid-columns: span 12;
    max-width: 100%;
    gap: 24px;
    padding-top: 24px;
  }
}
.content-news-list .content-news-list-search {
  display: flex;
  flex-direction: row;
  gap: 4px;
  background: var(--weiss);
  border: 1px solid rgba(0, 0, 0, 0.2509803922);
  border-radius: 4px;
  padding: 4px;
  flex-grow: 1;
  min-width: 280px;
}
.content-news-list .content-news-list-search:focus-within, .content-news-list .content-news-list-search:focus {
  outline: 4px solid var(--nak-blau-200);
}
@media (max-width: 767.98px) {
  .content-news-list .content-news-list-search {
    min-width: 0;
    width: 100%;
  }
}
.content-news-list .content-news-list-search input {
  flex-grow: 1;
  border: 0 none;
  align-self: stretch;
  font-size: 18px;
  font-weight: 400;
  background: transparent;
  width: auto;
}
.content-news-list .content-news-list-search input::-moz-placeholder {
  color: rgba(0, 0, 0, 0.3764705882);
  font-weight: 300;
}
.content-news-list .content-news-list-search input::placeholder {
  color: rgba(0, 0, 0, 0.3764705882);
  font-weight: 300;
}
.content-news-list .content-news-list-search button {
  border: none;
  background-color: var(--nak-blau-500);
  color: var(--weiss);
  padding: 12px 12px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.content-news-list .content-news-list-search button svg {
  width: 16px;
  height: 16px;
  color: var(--weiss);
}
.content-news-list .content-news-list-search button:hover {
  background-color: var(--nak-blau-700);
}
.content-news-list .content-news-list-filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background-color: transparent;
  border: 2px solid var(--nak-blau-300);
  color: var(--nak-blau-500);
  padding: 10px 24px;
  font-weight: 500;
  font-size: 18px;
  cursor: pointer;
  border-radius: 0;
}
.content-news-list .content-news-list-filter-toggle svg {
  width: 16px;
  height: 16px;
  color: var(--nak-blau-500);
}
.content-news-list .content-news-list-filter-toggle:hover {
  background-color: var(--nak-blau-100);
}
.content-news-list .content-news-list-filter-toggle[aria-expanded=true] {
  background-color: var(--nak-blau-500);
  color: var(--weiss);
}
.content-news-list .content-news-list-filter-toggle[aria-expanded=true] svg {
  color: var(--weiss);
}
@media (max-width: 767.98px) {
  .content-news-list .content-news-list-filter-toggle {
    width: 100%;
    justify-content: center;
  }
}
.content-news-list .content-news-list-filter {
  background-color: var(--tuerkisblau-200);
}
.content-news-list .content-news-list-filter[hidden] {
  display: none;
}
.content-news-list .content-news-list-filter > .wrapper {
  padding-inline: var(--gutter);
  padding-block: 32px;
}
.content-news-list .content-news-list-filter-form {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: center;
}
@media (max-width: 1024.98px) and (min-width: 768px) {
  .content-news-list .content-news-list-filter-form {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 767.98px) {
  .content-news-list .content-news-list-filter-form {
    grid-template-columns: 1fr;
  }
}
.content-news-list .content-news-list-filter-field {
  position: relative;
  display: block;
}
.content-news-list .content-news-list-filter-field input,
.content-news-list .content-news-list-filter-field select {
  width: 100%;
  background: var(--weiss);
  border: 0 none;
  padding: 14px 16px;
  font-size: 18px;
  font-weight: 400;
  color: var(--schwarz);
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.content-news-list .content-news-list-filter-field input::-moz-placeholder, .content-news-list .content-news-list-filter-field select::-moz-placeholder {
  color: rgba(0, 0, 0, 0.3764705882);
  font-weight: 300;
}
.content-news-list .content-news-list-filter-field input::placeholder,
.content-news-list .content-news-list-filter-field select::placeholder {
  color: rgba(0, 0, 0, 0.3764705882);
  font-weight: 300;
}
.content-news-list .content-news-list-filter-field--select svg, .content-news-list .content-news-list-filter-field--date svg {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--nak-blau-500);
  pointer-events: none;
}
.content-news-list .content-news-list-filter-actions {
  grid-column: 1/-1;
  display: flex;
  flex-direction: row;
  gap: 24px;
  justify-content: flex-end;
  align-items: center;
}
@media (max-width: 767.98px) {
  .content-news-list .content-news-list-filter-actions {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 16px;
  }
}
.content-news-list .content-news-list-filter-submit {
  background-color: var(--nak-blau-500);
  color: var(--weiss);
  border: 0 none;
  padding: 14px 24px;
  font-size: 18px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}
.content-news-list .content-news-list-filter-submit svg {
  width: 16px;
  height: 16px;
  color: var(--weiss);
}
.content-news-list .content-news-list-filter-submit:hover {
  background-color: var(--nak-blau-700);
}
.content-news-list .content-news-list-filter-reset {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}
.content-news-list .content-news-list-filter-reset svg {
  width: 16px;
  height: 16px;
  color: var(--nak-blau-500);
}
.content-news-list .content-news-list-body {
  padding-inline: var(--gutter);
  padding-top: var(--gutter);
}
.content-news-list .content-news-list-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  -moz-column-gap: var(--column-gap);
       column-gap: var(--column-gap);
  row-gap: calc(var(--vertical-gap) * 0.6);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (max-width: 1024.98px) and (min-width: 768px) {
  .content-news-list .content-news-list-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 767.98px) {
  .content-news-list .content-news-list-grid {
    grid-template-columns: 1fr;
  }
}
.content-news-list .content-news-list-card {
  display: block;
}
.content-news-list .content-news-list-card a.content-news-list-card-link {
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: inherit;
  text-decoration: none;
}
.content-news-list .content-news-list-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 3/2;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
.content-news-list .content-news-list-card h4 {
  margin: 0;
  font-weight: 500;
  font-size: 24px;
}
.content-news-list .content-news-list-card-meta {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--nak-blau-500);
  font-size: 16px;
  font-weight: 400;
}
.content-news-list .content-news-list-card-location {
  color: var(--nak-blau-500);
}
.content-news-list .content-news-list-card-lead {
  margin: 0;
  font: var(--p1);
  color: var(--schwarz);
}
.content-news-list .content-news-list-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  font-size: 18px;
}
.content-news-list .content-news-list-card-cta svg {
  width: 16px;
  height: 16px;
  color: var(--nak-blau-500);
}

.content-funnel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding-top: 48px;
}
@media (max-width: 767.98px) {
  .content-funnel {
    display: block;
    padding: 32px 0;
  }
  .content-funnel svg {
    display: none;
  }
}
@media (max-width: 1024.98px) and (min-width: 768px) {
  .content-funnel svg {
    display: none;
  }
}
.content-funnel {
  cursor: pointer;
}
.content-funnel a {
  color: var(--weiss);
  display: inline-flex;
  border: 2px solid rgba(255, 255, 255, 0.1882352941);
  padding: 12px 24px;
  font-size: 14px;
  display: inline-flex;
  gap: 8px;
  align-items: center;
}
.content-funnel a svg {
  width: 20px;
  height: 20px;
  color: var(--weiss);
}
.content-funnel > div {
  padding-block: var(--vertical-gap);
  padding-inline: var(--gutter);
  display: grid;
  align-items: center;
  justify-content: center;
  gap: 32px;
  grid-template-columns: auto auto;
}
@media (max-width: 767.98px) {
  .content-funnel > div {
    padding: calc(var(--gutter) * 2) var(--gutter);
    align-items: flex-start;
  }
}
.content-funnel > div {
  overflow: hidden;
  transition: transform 0.3s ease;
}
.content-funnel > div:focus-within, .content-funnel > div:hover {
  transform: scale(1.1);
}
@media (max-width: 1024.98px) and (min-width: 768px) {
  .content-funnel > div:focus-within, .content-funnel > div:hover {
    transform: scale(1.1);
  }
}
@media (max-width: 767.98px) {
  .content-funnel > div:focus-within, .content-funnel > div:hover {
    transform: scale(1.1);
  }
}
.content-funnel > div > svg {
  width: 128px;
  height: 128px;
  color: var(--weiss);
}
.content-funnel > div > div {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
  width: 20em;
}
@media (max-width: 767.98px) {
  .content-funnel > div > div {
    width: 100%;
  }
}
.content-funnel .content-funnel-left {
  background-color: var(--lila-500);
  color: var(--weiss);
}
@media (max-width: 767.98px) {
  .content-funnel .content-funnel-left {
    justify-content: start;
  }
}
.content-funnel h4 {
  font-weight: 300;
  font-size: 20px;
}
.content-funnel h3 {
  font-weight: 500;
  font-size: 24px;
}
.content-funnel .content-funnel-right {
  background-color: var(--nak-blau-500);
  color: var(--weiss);
}
@media (max-width: 767.98px) {
  .content-funnel .content-funnel-right {
    justify-content: start;
  }
}
.content-funnel {
  margin-bottom: var(--vertical-gap);
}

.content-highlight {
  background-color: var(--nak-blau-00);
  row-gap: var(--gutter);
  padding-bottom: 96px;
}
@media (max-width: 1024.98px) and (min-width: 768px) {
  .content-highlight {
    padding-bottom: 64px;
  }
}
@media (max-width: 767.98px) {
  .content-highlight {
    padding-bottom: 64px;
  }
}
.content-highlight .content-highlight-header {
  display: flex;
  gap: 8px;
  flex-direction: column;
  padding: var(--gutter) 0;
  padding-bottom: 12px;
  padding-top: 96px;
}
@media (max-width: 1024.98px) and (min-width: 768px) {
  .content-highlight .content-highlight-header {
    padding-top: 64px;
  }
}
@media (max-width: 767.98px) {
  .content-highlight .content-highlight-header {
    padding-top: 64px;
  }
}
.content-highlight .content-highlight-header h4 {
  color: var(--nak-blau-500);
  font-weight: 300;
}
.content-highlight .content-highlight-header h2 {
  font-weight: 500;
}
.content-highlight .content-highlight-header a.button {
  border: 2px solid var(--nak-blau-300);
  padding: 12px 24px;
  display: inline-flex;
  vertical-align: middle;
  font-weight: 500;
  font-size: 16px;
  white-space: nowrap;
  gap: 8px;
}
.content-highlight .content-highlight-header a.button svg {
  width: 20px;
  height: 20px;
  color: var(--nak-blau-500);
}
.content-highlight .content-highlight-header a.button:hover {
  background-color: var(--nak-blau-200);
}
.content-highlight .content-highlight-header .flex-row {
  align-items: flex-start;
}
@media (max-width: 767.98px) {
  .content-highlight .content-highlight-header {
    gap: var(--gutter);
  }
  .content-highlight .content-highlight-header > div {
    flex-direction: column;
    gap: var(--gutter);
    align-items: flex-start;
  }
}
.content-highlight .content-highlight-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--column-gap);
}
@media (max-width: 1439.98px) and (min-width: 1025px) {
  .content-highlight .content-highlight-cards {
    grid-template-columns: repeat(3, 1fr);
  }
  .content-highlight .content-highlight-cards > div:nth-child(n+4) {
    display: none;
  }
}
@media (max-width: 1024.98px) and (min-width: 768px) {
  .content-highlight .content-highlight-cards {
    grid-template-columns: repeat(2, 1fr);
  }
  .content-highlight .content-highlight-cards > div:nth-child(n+3) {
    display: none;
  }
}
@media (max-width: 767.98px) {
  .content-highlight .content-highlight-cards {
    display: flex;
    flex-direction: column;
    gap: var(--gutter);
  }
  .content-highlight .content-highlight-cards > div:nth-child(n+3) {
    display: none;
  }
}
.content-highlight .content-highlight-card {
  gap: var(--column-gap);
  align-items: flex-start;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}
@media (max-width: 1439.98px) and (min-width: 1025px) {
  .content-highlight .content-highlight-card {
    display: flex;
    flex-direction: column;
    gap: var(--gutter);
  }
}
@media (max-width: 1024.98px) and (min-width: 768px) {
  .content-highlight .content-highlight-card {
    display: flex;
    flex-direction: column;
    gap: var(--gutter);
    padding-bottom: var(--gutter);
  }
}
@media (max-width: 767.98px) {
  .content-highlight .content-highlight-card {
    display: flex;
    flex-direction: column;
    gap: var(--gutter);
    padding-bottom: var(--gutter);
  }
}
.content-highlight .content-highlight-card h4 {
  font-weight: 500;
  font-size: 18px;
}
.content-highlight .content-highlight-card img {
  grid-column: span 2;
}
.content-highlight .content-highlight-card a {
  display: inline-flex;
  gap: 12px;
  align-items: center;
  font-size: 16px;
}
.content-highlight .content-highlight-card a svg {
  width: 16px;
  height: 16px;
  color: var(--nak-blau-500);
}
.content-highlight .content-highlight-meta {
  display: flex;
  gap: 12px;
  font-size: 16px;
  font-weight: 400;
  align-items: flex-start;
  flex-direction: column;
  grid-column: span 4;
}
.content-highlight .content-highlight-meta > span {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--nak-blau-500);
}
.content-highlight .content-highlight-meta svg {
  width: 16px;
  height: 16px;
  color: var(--nak-blau-500);
}

footer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  grid-template-areas: "left right" "bottom bottom";
}
@media (max-width: 767.98px) {
  footer {
    grid-template-columns: 1fr;
    grid-template-areas: "left" "right" "bottom";
  }
}
footer .footer--left {
  padding-inline: var(--gutter);
  grid-area: left;
  background: var(--grau-100);
  padding-block: 96px;
}
@media (max-width: 1024.98px) and (min-width: 768px) {
  footer .footer--left {
    padding-block: 64px;
  }
}
@media (max-width: 767.98px) {
  footer .footer--left {
    padding-block: 64px;
  }
}
footer .footer--right {
  padding-inline: var(--gutter);
  background: var(--grau-200);
  grid-area: right;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto auto;
  grid-template-areas: "contact contact " "address links" "social links";
  gap: var(--column-gap);
  padding-block: 96px;
}
@media (max-width: 1024.98px) and (min-width: 768px) {
  footer .footer--right {
    grid-template-columns: 1fr;
    grid-template-areas: "contact" "address" "social" "links";
    gap: var(--gutter);
    padding-block: 64px;
  }
}
@media (max-width: 767.98px) {
  footer .footer--right {
    grid-template-columns: 1fr;
    grid-template-areas: "contact" "address" "social" "links";
    gap: var(--gutter);
    padding-block: 64px;
  }
}
footer .footer--right .footer--right-social {
  grid-area: social;
  display: flex;
  gap: 16px;
}
footer .footer--right .footer--right-social a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  background-color: var(--nak-blau-500);
  border-radius: 50%;
  padding: 8px;
  width: 40px;
  height: 40px;
  display: grid;
  align-items: center;
  justify-items: center;
}
footer .footer--right .footer--right-social a svg {
  width: 20px;
  height: 20px;
  color: var(--weiss);
}
footer .footer--right .footer--right-social a:hover {
  background-color: var(--nak-blau-700);
}
footer .footer--right .footer--right-links {
  grid-area: links;
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-size: 16px;
}
footer .footer--right .footer--right-links .underlined_animation {
  border-bottom: 1px solid var(--nak-blau-500);
}
footer .footer--right .footer--right-links svg {
  width: 16px;
  height: 16px;
  color: var(--nak-blau-500);
}
footer .footer--right .footer--right-contact {
  grid-area: contact;
}
footer .footer--right .footer--right-address {
  grid-area: address;
  font-size: 16px;
}
footer .footer-bottom {
  grid-area: bottom;
  background: #666;
  padding: var(--gutter);
  color: var(--weiss);
  display: flex;
  flex-direction: row;
  align-items: center;
}
footer .footer-bottom ul {
  gap: 16px;
}
footer .footer-bottom {
  padding-bottom: 128px;
}
@media (max-width: 1024.98px) and (min-width: 768px) {
  footer .footer-bottom {
    padding-bottom: 96px;
  }
}
@media (max-width: 767.98px) {
  footer .footer-bottom {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 8px;
    padding-bottom: 96px;
  }
}
footer .footer-bottom a.language {
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid rgba(255, 255, 255, 0.1882352941);
  text-decoration: none;
  color: var(--weiss);
  font-size: 14px;
}
footer .footer-bottom a.language:hover {
  background-color: rgba(255, 255, 255, 0.1882352941);
}
footer ul {
  display: flex;
  flex-direction: row;
}

.scroll-indicator {
  --indicator-height: 8px;
  display: flex;
  gap: 8px;
  z-index: 20;
}
@media (max-width: 767.98px) {
  .scroll-indicator {
    left: 50%;
    transform: translateX(-50%);
  }
}
.scroll-indicator .scroll-indicator-long {
  width: 40px;
  border-radius: var(--indicator-height);
  height: var(--indicator-height);
  background-color: #ccc;
  display: inline-block;
  position: relative;
}
.scroll-indicator .scroll-indicator-long::after {
  content: "";
  width: 22px;
  left: 0;
  top: 0;
  border-radius: var(--indicator-height);
  height: var(--indicator-height);
  background-color: var(--schwarz);
  display: inline-block;
  position: absolute;
  z-index: 1;
}
.scroll-indicator .scroll-indicator-ultralong {
  width: 100%;
  border-radius: var(--indicator-height);
  height: var(--indicator-height);
  background-color: #ccc;
  display: inline-block;
  position: relative;
}
.scroll-indicator .scroll-indicator-ultralong::after {
  content: "";
  width: 30%;
  left: 0;
  top: 0;
  border-radius: var(--indicator-height);
  height: var(--indicator-height);
  background-color: var(--schwarz);
  display: inline-block;
  position: absolute;
  z-index: 1;
}
.scroll-indicator .scroll-indicator-short {
  width: var(--indicator-height);
  border-radius: var(--indicator-height);
  height: var(--indicator-height);
  background-color: #ccc;
  display: inline-block;
}

form {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
}
form div {
  align-items: center;
}

fieldset {
  border: 1px solid rgba(0, 0, 0, 0.1882352941);
  padding: 0;
  background: #fff;
  border-radius: 4px;
  padding: 2px;
  width: 100%;
}
fieldset legend {
  padding: 0 8px;
  font-size: 14px;
  font-weight: 500;
  margin-left: 8px;
}
fieldset:focus-within {
  border-color: var(--nak-blau-500);
}

label {
  font-size: 12px;
  position: relative;
  padding: 0;
  font-weight: 500;
  display: flex;
}

label:has(input[type=checkbox]) {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 400;
  text-wrap: balance;
}
@media (max-width: 767.98px) {
  label:has(input[type=checkbox]) {
    align-items: flex-start;
    font-size: 16px;
  }
}

input[type=text],
input[type=email],
input[type=password],
textarea {
  padding: 8px 12px;
  border: 0 none;
  font-size: 14px;
  background: #fff;
  width: 80%;
  max-width: 100%;
}
input[type=text]:focus,
input[type=email]:focus,
input[type=password]:focus,
textarea:focus {
  outline: 0 none;
}

input[type=checkbox] {
  width: 24px;
  height: 24px;
  border: 1px solid rgba(0, 0, 0, 0.1882352941);
  border-radius: 4px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  position: relative;
  background-color: #fff;
  cursor: pointer;
  flex-shrink: 0;
  flex-grow: 0;
}
@media (max-width: 767.98px) {
  input[type=checkbox] {
    width: 20px;
    height: 20px;
  }
}
input[type=checkbox] {
  align-items: flex-start;
}
input[type=checkbox]:checked {
  background-color: var(--nak-blau-500);
}
input[type=checkbox]:checked::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 12px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
  left: 8px;
  top: 4px;
}
@media (max-width: 767.98px) {
  input[type=checkbox]:checked::after {
    left: 6px;
    top: 3px;
  }
}

button[type=submit] {
  background-color: var(--nak-blau-500);
  color: var(--weiss);
  border: none;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 500;
  display: inline-flex;
  gap: 8px;
  align-items: center;
}
button[type=submit] svg {
  width: 16px;
  height: 16px;
  color: var(--weiss);
}
button[type=submit]:hover {
  background-color: var(--nak-blau-700);
}

.content-search-form {
  min-height: 200px;
}

.content-overlay-container {
  position: fixed;
  bottom: var(--gutter);
  width: min(100%, var(--container-max-width));
  margin: auto;
  z-index: 100;
  display: flex;
  flex-direction: row;
  gap: 16px;
  align-items: right;
  padding: 0 var(--gutter);
  justify-content: flex-end;
}

.content-maps-overlay {
  background-color: var(--orange-500);
  color: var(--weiss);
  padding: 16px 24px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  font-size: 18px;
  border-radius: 2px;
}
@media (max-width: 767.98px) {
  .content-maps-overlay {
    flex-grow: 1;
  }
}
.content-maps-overlay {
  box-shadow: var(--overlay-button-shadow);
}
.content-maps-overlay:hover {
  background-color: var(--orange-700);
  color: #fff;
}
.content-maps-overlay svg {
  width: 24px;
  height: 24px;
  color: var(--weiss);
}

.content-top-up {
  background: var(--weiss);
  padding: 14px 20px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  font-size: 18px;
  border-radius: 2px;
}
.content-top-up svg {
  width: 20px;
  height: 20px;
  color: var(--nak-blau-500);
}
.content-top-up {
  color: var(--nak-blau-500);
  box-shadow: var(--overlay-button-shadow);
  border: 2px solid var(--nak-blau-200);
}
@media (min-width: 1025px) {
  .content-top-up {
    display: none;
  }
}
@media (max-width: 1024.98px) and (min-width: 768px) {
  .content-top-up {
    display: none;
  }
}

.content-search-form .content-search-form--suggestions {
  padding: var(--gutter);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  row-gap: 16px;
}
.content-search-form .content-search-form--suggestions p, .content-search-form .content-search-form--suggestions ul {
  grid-column: 4/span 8;
}
@media (max-width: 1024.98px) and (min-width: 768px) {
  .content-search-form .content-search-form--suggestions p, .content-search-form .content-search-form--suggestions ul {
    grid-column: 3/span 9;
  }
}
@media (max-width: 767.98px) {
  .content-search-form .content-search-form--suggestions p, .content-search-form .content-search-form--suggestions ul {
    grid-column: 1/span 12;
  }
}
.content-search-form .content-search-form--suggestions p {
  font-size: 18px;
  font-weight: 400;
}
.content-search-form .content-search-form--suggestions ul {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.content-search-form .content-search-form--suggestions ul li a {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 18px;
  font-weight: 500;
}
.content-search-form .content-search-form--suggestions ul li a svg {
  width: 16px;
  height: 16px;
  color: var(--nak-blau-500);
}
.content-search-form .content-search-form-header {
  position: sticky;
  top: 60px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: unset;
  -moz-column-gap: var(--column-gap);
       column-gap: var(--column-gap);
  grid-template-rows: 48px min-content min-content;
}
@media (max-width: 767.98px) {
  .content-search-form .content-search-form-header {
    grid-template-rows: 32px min-content min-content;
  }
}
.content-search-form .content-search-form-header {
  grid-template-areas: ". . . headline headline headline headline headline headline squareTop squareTop squareTop" "mtitle mtitle mtitle title title title title title title square square square" "mform mform mform form form form form form form square2 square2 square2";
}
@media (max-width: 1024.98px) and (min-width: 768px) {
  .content-search-form .content-search-form-header {
    grid-template-areas: ". . headline headline headline headline headline headline headline squareTop squareTop squareTop" "mtitle mtitle title title title title title title title square square square" "mform mform form form form form form form form square2 square2 square2";
  }
}
.content-search-form .content-search-form-header {
  background-color: var(--nak-blau-100);
  transition: grid-template-rows 0.3s ease;
  /* Beim Scrollen wird das Suchformular auf das Eingabefeld
     reduziert: die "Suche"-Headline wird ausgeblendet, die
     Dekoquadrate bleiben erhalten und das Feld bleibt in seiner
     angestammten Grid-Spalte. Auf Mobil docken wir es voll-
     breit unterhalb der Navigation an. */
}
body.is-scrolled .content-search-form .content-search-form-header {
  position: fixed;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  width: min(100%, var(--container-max-width));
  z-index: 50;
  /* Headline-Reihe kollabieren, restliche Reihen ihre
     natürliche Höhe behalten, damit die Quadrate sichtbar
     bleiben. */
  grid-template-rows: 0 min-content min-content;
}
body.is-scrolled .content-search-form .content-search-form-header h2 {
  display: none;
}
body.is-scrolled .content-search-form .content-search-form-header .content-search-form--form {
  /* Vertikal mittig zu den (gestapelten) Quadraten, links
     bündig in der ersten Spalte beginnend bis vor das
     große Quadrat. */
  grid-row: 2/span 2;
  grid-column: 1/span 9;
  align-self: center;
  padding-block: 8px;
  padding-inline: var(--gutter);
}
body.is-scrolled .content-search-form .content-search-form-header .big-square {
  width: 64px;
  height: 64px;
}
body.is-scrolled .content-search-form .content-search-form-header .small-square {
  width: 32px;
  height: 32px;
  margin-right: 64px;
}
@media (max-width: 767.98px) {
  body.is-scrolled .content-search-form .content-search-form-header {
    grid-template-rows: 0 0 min-content;
    grid-template-areas: ". . . . . . . . . . . ." ". . . . . . . . . . . ." "form form form form form form form form form form form form";
  }
  body.is-scrolled .content-search-form .content-search-form-header .big-square,
  body.is-scrolled .content-search-form .content-search-form-header .small-square {
    display: none;
  }
  body.is-scrolled .content-search-form .content-search-form-header .content-search-form--form {
    grid-area: form;
    grid-column: 1/-1;
    padding-block: 8px;
  }
}
.content-search-form .content-search-form-header h2 {
  grid-area: title;
  justify-self: start;
  align-self: center;
  font-weight: 500;
  view-transition-name: search-heading;
}
@media (max-width: 767.98px) {
  .content-search-form .content-search-form-header h2 {
    grid-column: mtitle/title;
    grid-row: mtitle;
    font-size: 32px;
    padding-left: var(--gutter);
    align-self: flex-end;
  }
}
.content-search-form .content-search-form-header .content-search-form--form {
  grid-area: form;
  padding-top: 16px;
  view-transition-name: search-form-field;
}
@media (max-width: 767.98px) {
  .content-search-form .content-search-form-header .content-search-form--form {
    grid-row: mform;
    grid-column: mform/square2;
    padding-inline: var(--gutter);
    padding-top: 24px;
    padding-bottom: 32px;
  }
}
.content-search-form .content-search-form-header form {
  display: flex;
  gap: 0;
  flex-grow: 0;
  flex-direction: row;
  border: 1px solid rgba(0, 0, 0, 0.2509803922);
  background: #fff;
  border-radius: 4px;
  padding: 4px;
}
.content-search-form .content-search-form-header form:focus-within, .content-search-form .content-search-form-header form:focus {
  outline: 4px solid var(--nak-blau-200);
}
.content-search-form .content-search-form-header form input {
  border: 0 none;
  flex-grow: 1;
  border-radius: 2px;
  align-self: stretch;
  font-size: 18px;
  font-weight: 400;
}
.content-search-form .content-search-form-header form input::-moz-placeholder {
  font-weight: 300;
  color: rgba(0, 0, 0, 0.2509803922);
  font-size: 16px;
}
.content-search-form .content-search-form-header form input::placeholder {
  font-weight: 300;
  color: rgba(0, 0, 0, 0.2509803922);
  font-size: 16px;
}
.content-search-form .content-search-form-header form button {
  border: none;
  background-color: var(--nak-blau-500);
  color: var(--weiss);
  padding: 10px;
  font-size: 16px;
  font-weight: 500;
  border-radius: 4px;
  display: inline-flex;
  gap: 8px;
  align-items: center;
}
@media (max-width: 767.98px) {
  .content-search-form .content-search-form-header form button {
    display: none;
  }
}
.content-search-form .content-search-form-header form button svg {
  width: 20px;
  height: 20px;
  color: var(--weiss);
}
.content-search-form .content-search-form-header form button:hover {
  background-color: var(--nak-blau-700);
}
.content-search-form .content-search-form-header form button.search-clear {
  background-color: transparent;
  color: var(--nak-blau-500);
  padding: 10px;
  border-radius: 4px;
  cursor: pointer;
}
@media (max-width: 767.98px) {
  .content-search-form .content-search-form-header form button.search-clear {
    display: inline-flex;
  }
}
.content-search-form .content-search-form-header form button.search-clear[hidden] {
  display: none;
}
.content-search-form .content-search-form-header form button.search-clear svg {
  width: 20px;
  height: 20px;
  color: var(--nak-blau-500);
}
.content-search-form .content-search-form-header form button.search-clear:hover {
  background-color: var(--nak-blau-100);
}
.content-search-form .content-search-form-header .big-square {
  width: 128px;
  height: 128px;
  background-color: var(--nak-blau-500);
  grid-area: square2;
  justify-self: end;
  view-transition-name: search-big-square;
}
@media (max-width: 767.98px) {
  .content-search-form .content-search-form-header .big-square {
    width: 64px;
    height: 64px;
    grid-area: square;
  }
}
.content-search-form .content-search-form-header .small-square {
  width: 64px;
  height: 64px;
  background-color: var(--nak-blau-300);
  grid-area: square;
  justify-self: end;
  margin-right: 128px;
  view-transition-name: search-small-square;
}
@media (max-width: 767.98px) {
  .content-search-form .content-search-form-header .small-square {
    width: 32px;
    height: 32px;
    margin-right: 64px;
    grid-area: squareTop;
  }
}
.content-search-form {
  margin-bottom: 24px;
}

.content-search-result {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-areas: "header header header header header header header header header right right right" "content content content content content content content content content right right right";
}
@media (max-width: 1200px) and (min-width: 1025px) {
  .content-search-result {
    grid-template-columns: repeat(12, 1fr);
    grid-template-areas: "header header header header header header header header right right right right" "content content content content content content content content right right right right";
  }
}
@media (max-width: 1024.98px) and (min-width: 768px) {
  .content-search-result {
    /* Auf Tablet keine eigene Sidebar mehr — der Filter wandert
       als Inline-Toggle in die Kopfzeile mit der Treffer-Anzahl. */
    grid-template-areas: "header header header header header header right right right right right right" "content content content content content content content content content content content content";
  }
}
@media (max-width: 767.98px) {
  .content-search-result {
    grid-template-areas: "right right right right right right right right right right right right" "header header header header header header header header header header header header" "content content content content content content content content content content content content";
  }
}
.content-search-result .content-search-result-header {
  grid-area: header;
  padding: var(--gutter);
}
@media (max-width: 1024.98px) and (min-width: 768px) {
  .content-search-result .content-search-result-header {
    grid-column: 1/span 8;
  }
}
@media (max-width: 767.98px) {
  .content-search-result .content-search-result-header {
    grid-column: 1/span 12;
  }
}
.content-search-result .content-search-result-header {
  display: flex;
  flex-direction: column;
  gap: var(--gutter);
  padding-block: var(--gutter);
}
.content-search-result .content-search-result-header h2 {
  font-weight: 500;
}
.content-search-result .content-search-result-filter {
  grid-area: right;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0 var(--gutter);
  margin-top: calc(var(--gutter) + 8px);
}
@media (max-width: 1024.98px) and (min-width: 768px) {
  .content-search-result .content-search-result-filter {
    /* Inline-Variante in der Kopfzeile, rechtsbündig zur
       Treffer-Anzahl. Box dient nur als Anker für das Popover. */
    margin-top: 0;
    padding: 0 var(--gutter);
    align-self: center;
    justify-self: end;
    position: relative;
  }
}
@media (max-width: 767.98px) {
  .content-search-result .content-search-result-filter {
    grid-column: 1/-1;
    margin-top: 0;
    margin-bottom: var(--gutter);
  }
}
.content-search-result .content-search-result-filter .filter-box {
  padding: var(--gutter);
  background: var(--nak-blau-100);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@media (max-width: 1024.98px) and (min-width: 768px) {
  .content-search-result .content-search-result-filter .filter-box {
    padding: 0;
    background: transparent;
    gap: 0;
    align-items: flex-end;
  }
}
@media (max-width: 767.98px) {
  .content-search-result .content-search-result-filter .filter-box {
    padding: 0;
    background: transparent;
    gap: 0;
  }
}
.content-search-result .content-search-result-filter .filter-toggle {
  all: unset;
  box-sizing: border-box;
  cursor: default;
  display: flex;
  align-items: center;
  gap: 8px;
}
.content-search-result .content-search-result-filter .filter-toggle span {
  font-size: 16px;
  color: var(--nak-blau-500);
  font-weight: 400;
}
.content-search-result .content-search-result-filter .filter-toggle svg {
  display: none;
  width: 20px;
  height: 20px;
}
@media (max-width: 1024.98px) and (min-width: 768px) {
  .content-search-result .content-search-result-filter .filter-toggle {
    cursor: pointer;
    background-color: var(--nak-blau-500);
    color: var(--weiss);
    padding: 14px var(--gutter);
    justify-content: center;
    word-wrap: nowrap;
    align-self: center;
  }
  .content-search-result .content-search-result-filter .filter-toggle span {
    color: var(--weiss);
    font-size: 18px;
    font-weight: 500;
  }
  .content-search-result .content-search-result-filter .filter-toggle svg {
    display: inline-block;
    color: var(--weiss);
  }
}
@media (max-width: 767.98px) {
  .content-search-result .content-search-result-filter .filter-toggle {
    cursor: pointer;
    background-color: var(--nak-blau-500);
    color: var(--weiss);
    padding: 14px var(--gutter);
    justify-content: center;
  }
  .content-search-result .content-search-result-filter .filter-toggle span {
    color: var(--weiss);
    font-size: 18px;
    font-weight: 500;
  }
  .content-search-result .content-search-result-filter .filter-toggle svg {
    display: inline-block;
    color: var(--weiss);
  }
}
.content-search-result .content-search-result-filter .filter-options {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@media (max-width: 1024.98px) and (min-width: 768px) {
  .content-search-result .content-search-result-filter .filter-options {
    position: absolute;
    top: 100%;
    right: var(--gutter);
    min-width: 240px;
    padding: var(--gutter);
    background: var(--nak-blau-100);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    z-index: 5;
    display: none;
  }
}
@media (max-width: 767.98px) {
  .content-search-result .content-search-result-filter .filter-options {
    padding: var(--gutter);
    background: var(--nak-blau-100);
    display: none;
  }
}
@media (max-width: 1024.98px) and (min-width: 768px) {
  .content-search-result .content-search-result-filter .filter-toggle[aria-expanded=true] + .filter-options {
    display: flex;
  }
}
@media (max-width: 767.98px) {
  .content-search-result .content-search-result-filter .filter-toggle[aria-expanded=true] + .filter-options {
    display: flex;
  }
}
.content-search-result .content-search-result-filter h5 {
  font-size: 16px;
  color: var(--nak-blau-500);
  font-weight: 400;
}
.content-search-result .content-search-result-filter label {
  font-size: 18px;
  color: var(--schwarz);
  font-weight: 500;
  display: flex;
  gap: 8px;
  flex-direction: row;
  align-items: baseline;
}
.content-search-result .content-search-result-filter input[type=radio] {
  width: 22px;
  height: 22px;
  border: 1px solid var(--nak-blau-500);
  border-radius: 50%;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  position: relative;
  background-color: #fff;
  cursor: pointer;
  flex-shrink: 0;
  flex-grow: 0;
}
.content-search-result .content-search-result-filter input[type=radio]:checked::after {
  content: "";
  position: absolute;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background-color: var(--nak-blau-500);
  left: 5px;
  top: 5px;
}
.content-search-result .content-search-result-filter a {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}
.content-search-result .empty {
  grid-area: header;
  padding: 12px var(--gutter);
  text-align: center;
  background-color: var(--grau-100);
  margin-bottom: var(--gutter);
  align-self: start;
  margin-top: calc(var(--gutter) + 8px);
}
.content-search-result .content-search-result-list {
  grid-area: content;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 0 var(--gutter);
  padding-bottom: var(--gutter);
}
.content-search-result .content-search-result-list .content-search-result-item {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: var(--column-gap);
  padding-bottom: 24px;
  border-bottom: 2px solid var(--grau-200);
}
@media (max-width: 767.98px) {
  .content-search-result .content-search-result-list .content-search-result-item {
    grid-template-columns: 1fr;
    row-gap: 16px;
  }
}
.content-search-result .content-search-result-list .content-search-result-item img {
  width: 100%;
  height: auto;
  grid-column: span 2;
}
@media (max-width: 767.98px) {
  .content-search-result .content-search-result-list .content-search-result-item img {
    grid-column: 1/-1;
    aspect-ratio: 3/2;
    -o-object-fit: cover;
       object-fit: cover;
  }
}
.content-search-result .content-search-result-list .content-search-result-item .content-search-result-item-meta {
  grid-column: span 7;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
@media (max-width: 767.98px) {
  .content-search-result .content-search-result-list .content-search-result-item .content-search-result-item-meta {
    grid-column: 1/-1;
  }
}
.content-search-result .content-search-result-list .content-search-result-item p.label {
  color: var(--nak-blau-500);
  font-size: 18px;
  font-weight: 400;
  position: relative;
  margin: 0;
  padding: 0;
  line-height: 1.25;
}
.content-search-result .content-search-result-list .content-search-result-item h4 {
  font-weight: 500;
  font-size: 24px;
}
.content-search-result .content-search-result-list .content-search-result-item:hover {
  background-color: var(--nak-blau-50);
  color: var(--schwarz);
}
.content-search-result .content-search-result-list .content-search-result-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding-block: calc(var(--gutter) * 1.5);
}
.content-search-result .content-search-result-list .content-search-result-pager .pager-pages {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 16px;
}
.content-search-result .content-search-result-list .content-search-result-pager .pager-pages li {
  display: inline-flex;
}
.content-search-result .content-search-result-list .content-search-result-pager .pager-pages a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  padding: 4px 6px;
  font-size: 18px;
  font-weight: 500;
  color: var(--schwarz);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.content-search-result .content-search-result-list .content-search-result-pager .pager-pages a.is-current {
  color: var(--nak-blau-500);
}
.content-search-result .content-search-result-list .content-search-result-pager .pager-pages a:hover {
  color: var(--nak-blau-500);
}
.content-search-result .content-search-result-list .content-search-result-pager .pager-prev,
.content-search-result .content-search-result-list .content-search-result-pager .pager-next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--nak-blau-500);
}
.content-search-result .content-search-result-list .content-search-result-pager .pager-prev svg,
.content-search-result .content-search-result-list .content-search-result-pager .pager-next svg {
  width: 24px;
  height: 24px;
}
.content-search-result .content-search-result-list .content-search-result-pager .pager-prev:hover,
.content-search-result .content-search-result-list .content-search-result-pager .pager-next:hover {
  color: var(--nak-blau-700);
}
.content-search-result .content-search-result-list .content-search-result-pager .pager-prev[aria-disabled=true],
.content-search-result .content-search-result-list .content-search-result-pager .pager-next[aria-disabled=true] {
  color: var(--grau-400, #b3b3b3);
  pointer-events: none;
}
.content-search-result .content-search-result-list .content-search-result-pager .pager-prev svg {
  color: var(--grau-400, #b3b3b3);
}

mark {
  background-color: var(--sonnengelb-500-50);
  padding: 2px 4px;
  color: var(--schwarz);
  display: inline-block;
}

/* ─── Gemeindesuche (/maps) ─────────────────────────────────────
   Eigenes, vollständig in sich abgeschlossenes Styling für die
   Gemeindesuche. Die Optik gleicht der Inhaltssuche, teilt aber
   bewusst KEINE Selektoren mit `.content-search-*`, damit beide
   Bereiche unabhängig voneinander angepasst werden können.
   Gemeinsame Basis-Styles werden in einem separaten Schritt
   in ein Basis-Modul ausgelagert. */
.content-maps-search {
  display: contents;
}

/* ── Such-Formular (Karten) ─────────────────────────────────── */
.content-maps-search-form {
  min-height: 200px;
  margin-bottom: 0;
}
.content-maps-search-form .content-maps-search-form-header {
  position: sticky;
  top: 60px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: unset;
  -moz-column-gap: var(--column-gap);
       column-gap: var(--column-gap);
  grid-template-rows: 48px min-content min-content 64px;
}
@media (max-width: 767.98px) {
  .content-maps-search-form .content-maps-search-form-header {
    grid-template-rows: 32px min-content min-content min-content;
  }
}
.content-maps-search-form .content-maps-search-form-header {
  /* Reiter (tabs) liegen in der 4. Zeile und spannen die volle
     Breite, damit die Unterkante des Reiter-Bands bündig an
     der Container-Kante anliegt. Das grosse orange Quadrat
     bleibt 128×128 in square2 (Zeile 3, Spalten 10–12). */
  grid-template-areas: ". . . headline headline headline headline headline headline squareTop squareTop squareTop" "mtitle mtitle title title title title title title title square square square" "mform mform form form form form form form form square2 square2 square2" "tabs tabs tabs tabs tabs tabs tabs tabs tabs tabs tabs tabs";
}
@media (max-width: 1024.98px) and (min-width: 768px) {
  .content-maps-search-form .content-maps-search-form-header {
    grid-template-areas: ". . headline headline headline headline headline headline headline squareTop squareTop squareTop" "mtitle title title title title title title title title square square square" "mform form form form form form form form form square2 square2 square2" "tabs tabs tabs tabs tabs tabs tabs tabs tabs tabs tabs tabs";
  }
}
.content-maps-search-form .content-maps-search-form-header {
  background-color: var(--nak-blau-100);
  transition: grid-template-rows 0.3s ease;
  /* Beim Scrollen wird das Suchformular auf das Eingabefeld
     reduziert: die Headline wird ausgeblendet, die Dekoquadrate
     bleiben erhalten und das Feld bleibt in seiner angestammten
     Grid-Spalte. Auf Mobil dockt es vollbreit unterhalb der
     Navigation an. */
}
body.is-scrolled .content-maps-search-form .content-maps-search-form-header {
  position: fixed;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  width: min(100%, var(--container-max-width));
  z-index: 50;
  /* Headline-Zeile kollabiert – Quadrate (square / square2)
     und Reiter (tabs) behalten ihre Positionen analog zum
     nicht gescrollten Zustand. */
  grid-template-rows: 0 min-content min-content min-content;
}
body.is-scrolled .content-maps-search-form .content-maps-search-form-header h2 {
  display: none;
}
body.is-scrolled .content-maps-search-form .content-maps-search-form-header .content-maps-search-form--form {
  align-self: center;
  padding-block: 8px;
  padding-inline: var(--gutter);
}
body.is-scrolled .content-maps-search-form .content-maps-search-form-header .content-maps-search-form--form:focus-within, body.is-scrolled .content-maps-search-form .content-maps-search-form-header .content-maps-search-form--form:focus {
  outline: 4px solid var(--nak-blau-200);
}
body.is-scrolled .content-maps-search-form .content-maps-search-form-header .big-square {
  width: 64px;
  height: 64px;
}
body.is-scrolled .content-maps-search-form .content-maps-search-form-header .small-square {
  width: 32px;
  height: 32px;
  margin-right: 64px;
}
body.is-scrolled .content-maps-search-form .content-maps-search-form-header {
  /* Desktop-Scroll: 3 Spalten – 1/3 Input, 1/3 Reiter, 1/3 Quadrate.
     Input vertikal zentriert, Reiter als echte Tabs an der
     Unterkante; Quadrate behalten Anordnung (klein oben links
     von gross). */
}
@media (min-width: 1025px) {
  body.is-scrolled .content-maps-search-form .content-maps-search-form-header {
    grid-template-rows: 0 32px min-content;
    grid-template-areas: ". . . . . . . . . . . ." ". . . . . . . . . square square square" "form form form form tabs tabs tabs tabs . square2 square2 square2";
  }
  body.is-scrolled .content-maps-search-form .content-maps-search-form-header .content-maps-search-form--form {
    grid-row: 2/span 2;
    align-self: center;
    padding-block: 0;
  }
  body.is-scrolled .content-maps-search-form .content-maps-search-form-header .content-maps-search-result-header {
    grid-row: 2/span 2;
    align-self: end;
    padding: 0;
    grid-column: form/square;
  }
}
@media (max-width: 767.98px) {
  body.is-scrolled .content-maps-search-form .content-maps-search-form-header {
    grid-template-rows: 0 0 min-content min-content;
    grid-template-areas: ". . . . . . . . . . . ." ". . . . . . . . . . . ." "form form form form form form form form form form form form" "tabs tabs tabs tabs tabs tabs tabs tabs tabs tabs tabs tabs";
  }
  body.is-scrolled .content-maps-search-form .content-maps-search-form-header .big-square,
  body.is-scrolled .content-maps-search-form .content-maps-search-form-header .small-square {
    display: none;
  }
  body.is-scrolled .content-maps-search-form .content-maps-search-form-header .content-maps-search-form--form {
    grid-area: form;
    grid-column: 1/-1;
    padding-block: 8px;
  }
}
.content-maps-search-form .content-maps-search-form-header h2 {
  grid-area: title;
  justify-self: start;
  align-self: center;
  font-weight: 500;
}
@media (max-width: 767.98px) {
  .content-maps-search-form .content-maps-search-form-header h2 {
    grid-column: mtitle/title;
    grid-row: mtitle;
    font-size: 32px;
    padding-left: var(--gutter);
    align-self: flex-end;
  }
}
.content-maps-search-form .content-maps-search-form-header .content-maps-search-form--form {
  grid-area: form;
  padding-top: 16px;
}
@media (max-width: 767.98px) {
  .content-maps-search-form .content-maps-search-form-header .content-maps-search-form--form {
    grid-row: mform;
    grid-column: mform/square2;
    padding-inline: var(--gutter);
    padding-top: 24px;
    padding-bottom: 32px;
  }
}
.content-maps-search-form .content-maps-search-form-header .content-maps-search-form--form form {
  display: flex;
  gap: 0;
  flex-grow: 0;
  flex-direction: row;
  border: 1px solid rgba(0, 0, 0, 0.2509803922);
  background: #fff;
  border-radius: 4px;
  padding: 4px;
}
.content-maps-search-form .content-maps-search-form-header .content-maps-search-form--form form:focus-within, .content-maps-search-form .content-maps-search-form-header .content-maps-search-form--form form:focus {
  outline: 4px solid var(--nak-blau-200);
}
.content-maps-search-form .content-maps-search-form-header .content-maps-search-form--form form input {
  border: 0 none;
  flex-grow: 1;
  border-radius: 2px;
  align-self: stretch;
  font-size: 18px;
  font-weight: 400;
}
.content-maps-search-form .content-maps-search-form-header .content-maps-search-form--form form input::-moz-placeholder {
  font-weight: 300;
  color: rgba(0, 0, 0, 0.2509803922);
  font-size: 16px;
}
.content-maps-search-form .content-maps-search-form-header .content-maps-search-form--form form input::placeholder {
  font-weight: 300;
  color: rgba(0, 0, 0, 0.2509803922);
  font-size: 16px;
}
.content-maps-search-form .content-maps-search-form-header .content-maps-search-form--form form button {
  border: none;
  background-color: var(--nak-blau-500);
  color: var(--weiss);
  padding: 10px;
  font-size: 16px;
  font-weight: 500;
  border-radius: 4px;
  display: inline-flex;
  gap: 8px;
  align-items: center;
}
@media (max-width: 767.98px) {
  .content-maps-search-form .content-maps-search-form-header .content-maps-search-form--form form button {
    display: none;
  }
}
.content-maps-search-form .content-maps-search-form-header .content-maps-search-form--form form button svg {
  width: 20px;
  height: 20px;
  color: var(--weiss);
}
.content-maps-search-form .content-maps-search-form-header .content-maps-search-form--form form button:hover {
  background-color: var(--nak-blau-700);
}
.content-maps-search-form .content-maps-search-form-header .content-maps-search-form--form form button.search-clear {
  background-color: transparent;
  color: var(--nak-blau-500);
  padding: 10px;
  border-radius: 4px;
  cursor: pointer;
}
@media (max-width: 767.98px) {
  .content-maps-search-form .content-maps-search-form-header .content-maps-search-form--form form button.search-clear {
    display: inline-flex;
  }
}
.content-maps-search-form .content-maps-search-form-header .content-maps-search-form--form form button.search-clear[hidden] {
  display: none;
}
.content-maps-search-form .content-maps-search-form-header .content-maps-search-form--form form button.search-clear svg {
  width: 20px;
  height: 20px;
  color: var(--nak-blau-500);
}
.content-maps-search-form .content-maps-search-form-header .content-maps-search-form--form form button.search-clear:hover {
  background-color: var(--nak-blau-100);
}
.content-maps-search-form .content-maps-search-form-header .content-maps-search-form--form form button.search-filter {
  background-color: var(--nak-blau-500);
  border-radius: 4px;
  padding: 10px;
  width: 40px;
  height: 40px;
  align-self: center;
  justify-content: center;
}
.content-maps-search-form .content-maps-search-form-header .content-maps-search-form--form form button.search-filter svg {
  width: 20px;
  height: 20px;
  color: var(--weiss);
}
.content-maps-search-form .content-maps-search-form-header .content-maps-search-form--form form button.search-filter:hover {
  background-color: var(--nak-blau-700);
}
.content-maps-search-form .content-maps-search-form-header .big-square {
  width: 128px;
  height: 128px;
  background-color: var(--orange-500);
  grid-area: square2;
  justify-self: end;
  grid-row: square2/tabs;
}
@media (max-width: 767.98px) {
  .content-maps-search-form .content-maps-search-form-header .big-square {
    width: 64px;
    height: 64px;
    grid-area: square;
  }
}
.content-maps-search-form .content-maps-search-form-header .small-square {
  width: 64px;
  height: 64px;
  background-color: var(--orange-100);
  grid-area: square;
  justify-self: end;
  margin-right: 128px;
}
@media (max-width: 767.98px) {
  .content-maps-search-form .content-maps-search-form-header .small-square {
    width: 32px;
    height: 32px;
    margin-right: 64px;
    grid-area: squareTop;
  }
}
.content-maps-search-form .content-maps-search-form-header {
  /* ── Reiter (Listen-/Kartenansicht) ────────────────────────
     Sitzen jetzt im Grid des Such-Form-Headers; spannen die
     volle Breite, damit die Border-Bottom b\u00fcndig am
     Container-Rand anliegt. */
}
.content-maps-search-form .content-maps-search-form-header .content-maps-search-result-header {
  grid-area: tabs;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: end;
}
.content-maps-search-form .content-maps-search-form-header .content-maps-search-result-header .maps-view-tabs {
  display: flex;
  gap: 4px;
  width: 100%;
  border-bottom: 1px solid var(--grau-500);
  justify-content: center;
  align-self: end;
  height: -webkit-fill-available;
  height: -moz-available;
  height: stretch;
}
@media (max-width: 767.98px) {
  .content-maps-search-form .content-maps-search-form-header .content-maps-search-result-header .maps-view-tabs {
    gap: 0;
  }
}
.content-maps-search-form .content-maps-search-form-header .content-maps-search-result-header .maps-view-tabs button {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  min-width: 200px;
  color: var(--schwarz);
  font-size: 18px;
  font-weight: 400;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--nak-blau-500);
  border-bottom: 1px solid transparent;
  position: relative;
  bottom: -1px;
  font-weight: 500;
}
@media (max-width: 767.98px) {
  .content-maps-search-form .content-maps-search-form-header .content-maps-search-result-header .maps-view-tabs button {
    flex: 0 1 auto;
    min-width: 0;
    padding: 12px 24px;
    font-size: 16px;
  }
}
.content-maps-search-form .content-maps-search-form-header .content-maps-search-result-header .maps-view-tabs button svg {
  width: 20px;
  height: 20px;
  color: var(--nak-blau-500);
}
.content-maps-search-form .content-maps-search-form-header .content-maps-search-result-header .maps-view-tabs button.is-active, .content-maps-search-form .content-maps-search-form-header .content-maps-search-result-header .maps-view-tabs button[aria-selected=true] {
  background-color: var(--weiss);
  color: var(--nak-blau-500);
  text-decoration: none;
  border: 1px solid var(--grau-400);
  border-bottom-color: var(--weiss);
}
.content-maps-search-form .content-maps-search-form-header .content-maps-search-result-header .maps-view-tabs button:hover:not(.is-active):not([aria-selected=true]) {
  color: var(--nak-blau-700);
}

/* ── Ergebnisse (Karten) ────────────────────────────────────── */
.content-maps-search-result {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  /* ─── Tab-Panels (Liste vs. Karte) ─────────────────────────── */
}
.content-maps-search-result .maps-view-panel {
  grid-column: 1/-1;
}
.content-maps-search-result .maps-view-panel[hidden] {
  display: none;
}
.content-maps-search-result .maps-view-panel--list {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: var(--gutter);
}
.content-maps-search-result .content-maps-result-item {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: start;
  -moz-column-gap: var(--column-gap);
       column-gap: var(--column-gap);
  padding-bottom: 24px;
  border-bottom: 2px solid var(--grau-200);
}
@media (max-width: 767.98px) {
  .content-maps-search-result .content-maps-result-item {
    grid-template-columns: 1fr;
    row-gap: 16px;
  }
  .content-maps-search-result .content-maps-result-item .maps-result-services {
    grid-column: 1/-1;
  }
}
.content-maps-search-result .content-maps-result-item img {
  grid-column: span 2;
  width: 100%;
  height: auto;
  aspect-ratio: 4/3;
  -o-object-fit: cover;
     object-fit: cover;
}
@media (max-width: 767.98px) {
  .content-maps-search-result .content-maps-result-item img {
    grid-column: 1/-1;
    aspect-ratio: 16/9;
  }
}
.content-maps-search-result .content-maps-result-item .maps-result-main {
  grid-column: span 5;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
@media (max-width: 767.98px) {
  .content-maps-search-result .content-maps-result-item .maps-result-main {
    grid-column: 1/-1;
  }
}
.content-maps-search-result .content-maps-result-item .maps-result-main h4 {
  margin: 0;
}
.content-maps-search-result .content-maps-result-item .maps-result-main h4 a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--schwarz);
  font-weight: 500;
}
.content-maps-search-result .content-maps-result-item .maps-result-main h4 a svg {
  width: 16px;
  height: 16px;
  color: var(--nak-blau-500);
}
.content-maps-search-result .content-maps-result-item .maps-result-main h4 a:hover {
  color: var(--nak-blau-500);
}
.content-maps-search-result .content-maps-result-item .maps-result-main .maps-district-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--nak-blau-500);
  font-weight: 400;
  font-size: 18px;
}
.content-maps-search-result .content-maps-result-item .maps-result-main .maps-district-link svg {
  width: 16px;
  height: 16px;
}
.content-maps-search-result .content-maps-result-item .maps-result-main .maps-district-link:hover {
  color: var(--nak-blau-700);
}
.content-maps-search-result .content-maps-result-item .maps-result-main .maps-result-address {
  color: var(--schwarz);
  font-size: 18px;
  margin: 0;
  line-height: 1.5;
}
.content-maps-search-result .content-maps-result-item .maps-result-services {
  grid-column: span 5;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
@media (max-width: 767.98px) {
  .content-maps-search-result .content-maps-result-item .maps-result-services {
    grid-column: 1/-1;
  }
}
.content-maps-search-result .content-maps-result-item .maps-result-services .maps-services-times {
  font-weight: 500;
  font-size: 16px;
  margin: 0;
}
.content-maps-search-result .content-maps-result-item .maps-result-services .maps-services-note {
  font-size: 16px;
  color: var(--schwarz);
  margin: 0;
}
.content-maps-search-result .content-maps-result-item .maps-result-services .maps-access-icons {
  list-style: none;
  margin: 0;
  padding: 0;
  display: inline-flex;
  gap: 12px;
}
.content-maps-search-result .content-maps-result-item .maps-result-services .maps-access-icons li {
  display: inline-flex;
  align-items: center;
  color: var(--nak-blau-500);
}
.content-maps-search-result .content-maps-result-item .maps-result-services .maps-access-icons li svg {
  width: 24px;
  height: 24px;
  color: currentColor;
}
.content-maps-search-result .maps-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 800px;
  padding: var(--gutter);
  color: var(--nak-blau-500);
}
.content-maps-search-result .maps-placeholder svg {
  width: 64px;
  height: 64px;
  color: currentColor;
}
.content-maps-search-result .maps-placeholder p {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
}

/* ─── View Transitions: Sticky-Header / Such-Formular ──────────
   Schnellere, ruhigere Cross-Fades. Die named Transitions
   (search-form-field, search-heading, search-big-square,
   search-small-square) morphen Position + Grösse automatisch.   */
::view-transition-group(*) {
  animation-duration: 0.3s;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.15s;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}
@view-transition {
  navigation: auto;
}/*# sourceMappingURL=style.css.map */