@charset "UTF-8";

/************************************************************************************
*
* Theme Name: 		WP Theme Gemeinde Lauterach
* Theme URI:		https://gemeinde-lauterach.de/
* Text Domain:      Gemeinde Lauterach
* Description:      Custom WordPress-Theme for Gemeinde Lauterach, Barrierefreies Webdesign und WordPress-Webentwicklung Philipp Lindermeir - philipplindermeir.design
* Tested up to:     5.0
* Requiers PHP:     8.0
* Author:		    Gemeinde Lauterach
* Author URI:		https://gemeinde-lauterach.de/
* Version:			1.2
* License:          GNU General Public License V3 or later
* License URI:      https://www.gnu.org/licenses/gpl-3.0
*
************************************************************************************/

/* Webfonts */

/* lexend-regular - latin */
@font-face {
    font-display: swap; 
    font-family: 'Lexend';
    font-style: normal;
    font-weight: 400;
    src: url('./webfonts/lexend-v19-latin-regular.woff2') format('woff2'),
         url('./webfonts/lexend-v19-latin-regular.woff') format('woff'),
         local('lexend-v19-latin-regula');
}
  
  /* lexend-700 - latin */
  @font-face {
    font-display: swap;
    font-style: normal;
    font-weight: 700;
    src: url('./webfonts/lexend-v19-latin-700.woff2') format('woff2'),
         url('./webfonts/lexend-v19-latin-700.woff') format('woff'), 
         local('exend-v19-latin-700');   
}

:root {
    
    --theme-color-100: #f5f7fa;
    --theme-color-300: #dfe3e8;
    --theme-color-600: #034b68;      
    --theme-color-900: #121416;

    --accent-color-200: #d6dde1;    
    --theme-box-shadow: 0 2px 6px rgba(7, 7, 8, 0.4);

    --font-family: 'Lexend';
    --font-family-primary: var(--font-family);

    --font-weight-400: 400;
    --font-weight-700: 700;

    --font-size-small: 1rem;
    --font-size-primary: 1.125rem;
    --font-size-100: 1.125rem;
    --font-size-200: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);
    --font-size-300: clamp(1.125rem, 1rem + 0.4vw, 1.375rem);  
    --font-size-400: clamp(1.375rem, 1.2rem + 0.5vw, 1.75rem);
    --font-size-500: clamp(1.75rem, 1.45rem + 0.8vw, 2.25rem);  
    --font-size-600: clamp(2.25rem, 1.85rem + 1.2vw, 3rem);

    --padding-block-10: min(1.5rem, 5vw);
    --padding-block-20: min(2.5rem, 6vw);
    --padding-block-30: min(3.5rem, 7vw);
    --padding-block-40: min(4.5rem, 8vw);
    --padding-block-50: min(6.5rem, 9vw);
    
    --padding-space-top: 2.5rem;
    --padding-spaced-bottom: 2.5rem;

    --z-index-0: 0;
    --z-index-10: 10;
    --z-index-20: 20;
    --z-index-30: 30;
    --z-index-40: 40;
    
}

/* DARK Mode */

.darkmode {
    
    --theme-color-100: #121416;
    --theme-color-300: #242628;
    --theme-color-600: #9dd4e8;
    --theme-color-900: #f5f7fa;

    --accent-color-200: #4a4b4d;   
    --theme-box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
}

/***************************
* 01 – Fonts
* 02 – Variables
* 03 – Reset
* 04 – Base
* 05 – Typography
* 06 – Layout Helpers
* 07 – Utility Classes
****************************/

.resize-stopper * {
  transition: none !important;
  animation: none !important;
}

.responsive-auto {
  overflow-x: auto;
}

/* Create a root stacking context */

#root, #__next {
    isolation: isolate;
}
  
/* Base */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font: inherit
}
  
ul, ol,
ul[role='list'],
ol[role='list'] {
    list-style: none;
}

html {
    min-height: 100vh;
    position: relative;
    scroll-behavior: smooth;
    scroll-padding-block-start: 6em;
    overflow-x: hidden;
}

@media (min-width: 40em) {

html {
    scroll-padding-block-start: 6em;
}

}

html:focus-within {
    scroll-behavior: smooth;
}
  
body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-family: var(--font-family-primary);
    font-kerning: normal;
    text-rendering: optimizeSpeed;
    -webkit-font-smoothing: antialiased;
    line-height: 1.6;
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
    background-color: var(--theme-color-100);
    color: var(--theme-color-900);
}
  
body, h1, h2, h3, h4, p,
figure, blockquote, dl, dd {
  margin-block-end: 0;
}

/* A elements that don't have a class get default styles */
  
a:not([class]) {
    text-decoration-skip-ink: auto;
}
  
a {
    outline: none;
    text-decoration: none;
    cursor: pointer;
    color: currentColor;

    &:hover  {
    color: var(--theme-color-600);
    }
    
    &:focus-visible {
    color: var(--theme-color-900);
    }
}

@media (hover: none) {
    
    a {
        color: currentColor;
    }

}

/* Make images easier to work with */
  
img,
picture,
video,
svg {
    max-width: 100%;
    height: auto;
    display: block;
    font-style: italic;
    border: 0;
    image-rendering: -webkit-optimize-contrast
}
   
/* Remove built-in form typography styles */
  
address {
    margin-bottom: 1em;
    font-style: normal;
    line-height: inherit;
}
  
strong {
    font-weight: var(--font-weight-700);
}
  
small {
    font-size: var(--fs-100);
}
  
sub,
sup {
    position: relative;
    font-size: 75%;
    line-height: 0;
    vertical-align: baseline;
}
  
sub {
    bottom: -.25em;
}
  
sup {
    top: -.5em;
}

:focus:not(:focus-visible) {
    outline: 0
}
  
:focus-visible {
    outline: 2px dashed currentColor;
    outline-offset: 4px;
    color: currentColor;
}
  
button,
input,
optgroup,
select,
textarea {
    font: inherit;
    background-color: transparent;
    outline: none;
    border: none;
    border-radius: none;
    margin: 0
}
  
button {
    overflow: visible
}
  
button,
select {
    text-transform: none
}
  
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
    -webkit-appearance: button;
    cursor: pointer;
}
  
button[disabled],
html input[disabled] {
    cursor: default
}
  
button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0
}
  
input {
    line-height: normal
}
  
input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box;
    padding: 0
}
  
textarea {
  resize: vertical;
  overflow: auto;
}

/* Avoid text overflows */
  
h1, h2, h3, h4, h5, h6 {
    font-weight: var(--font-weight-700); 
    line-height: 1.4;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: auto;      
    max-inline-size: clamp(48ch, 60%, 70ch);
}

@supports (text-wrap: balance) {
  h1, h2, h3, h4, h5, h6 {
    text-wrap: balance;
  }
}

@supports (text-box-trim: trim-both) {
  h1, h2, h3, h4, h5, h6 {
    text-box-trim: trim-both;
  }
}

:where(h1, h2, h3) > a {
    color: currentColor;

    &:hover {
      color: var(--clr-accent-200);
      text-decoration: underline;
    }
    
    &:focus-visible {
      color: var(--clr-accent-200);
    }
}

p, ul, ol {
    font-size: var(--font-size-primary);
    font-weight: var(--font-weight-400); 
}
  
p:not([class]) {
    max-width: 76ch;
    line-height: 1.6;
}

p.teaser-text {
    max-width: 60ch;
    line-height: 1.6;
}

ul {
    line-height: 1.875rem;
}

p, li, figcaption {
    text-wrap: pretty;
}

/* Accessibility Style */
  
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden; /* Fallback */
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  clip-path: inset(50%);
    
   &:focus {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
    }
    
    &:active {
      position: static;
      width: auto;
      height: auto;
      margin: 0;
      overflow: visible;
      clip: auto;
      white-space: normal;
    }
}

.skip-nav--link {
    background-color: var(--theme-color-600);
    border-radius: 0.25em;
    color: var(--theme-color-100);
    font-family: var(--preset-ff-base);
    font-size: var(--preset-fs-100);
    font-weight: var(--preset-fw-400);
    padding: 0.5em 1em;
    position: absolute;
    left: 1em;
    top: 1em;
    transform: translateY(-150%);
    transition: transform 325ms ease-in-out;
    z-index: 80;
}

.skip-nav--link:focus,
.skip-nav--link:focus-visible {
    transform: translateY(0);
    color: var(--theme-color-100);
    outline: 2px solid var(--theme-color-600);
    outline-offset: 4px;
    opacity: 1;
}

/* Layout & Reusable Layout Style */

.layout {
    position: relative;
    overflow: clip;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

@supports(padding: max(0px)) {
   
    .layout {
    padding-left: max(0em, env(safe-area-inset-left));
    padding-right: max(0em, env(safe-area-inset-right));
    }

}
    
.section {
    --max-width: 100%;
    --container-spacing-inline: 0;
    width: min(var(--max-width), 100% - var(--container-spacing-inline) * 2);
    margin-inline: auto;
}

.section[data-section-width="100"] {
    --max-width: 50rem;
    --container-spacing-inline: 1em;
}

.section[data-section-width="200"] {
    --max-width: 64rem;
    --container-spacing-inline: 1em;
}

.section[data-section-width="300"] {
    --max-width: 80rem;
    --container-spacing-inline: 1em;
}

/* Spacing */

.spacing-block-10 {
    padding-block: var(--padding-block-10);
}

.spacing-block-20 {
    padding-block: var(--padding-block-20);
}

.spacing-block-30 {
    padding-block: var(--padding-block-30);
}

.spacing-block-40 {
    padding-block: var(--padding-block-40);
}

.spacing-block-50 {
    padding-block: var(--padding-block-50);
}

.spacing-block--top {
    padding-block-start: var(--padding-spaced-top);
  }
  
.spacing-block--bottom {
    padding-block-end: var(--padding-spaced-bottom);
}

/* Divider */

.divider {
  width: 100%;
  border: none;
  height: 1px;
  margin-block: 3rem;
}

.divider-default {
  background-color: var(--theme-color-600);
}
   
    
.divider-large {
  margin-block: 6rem;
}

.divider-default {
  background-color: var(--theme-color-600);
}
    
.divider-bottom {
  margin-block-end: 3em;
}

/* Buttons */

.button {
  min-width: 260px;
  min-height: 44px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 0.25rem;
  position: relative;
  font-weight: var(--font-weight-700);
  font-size: var(--font-size-primary);
  line-height: 1;
  padding: 0.75rem 1.25rem;
  cursor: pointer;
  border-radius: 100vw;
  text-box: trim-both cap alphabetic;
  text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.button-default {
  background-color: var(--theme-color-900);
  color: var(--theme-color-100);

  &:hover {
    background-color: var(--theme-color-300);
    color: var(--theme-color-900);                
  }
  
  &:focus-visible {
    outline: 2px solid var(--theme-color-900);
    outline-offset: 4px;
    color: var(--theme-color-100);
  }
    
    @media (hover: none) {
    &:hover {
      background-color: var(--theme-color-900);
      color: var(--theme-color-100);
    }
  }
    
}

.button-inverted {
  background-color: var(--theme-color-600);
  color: var(--theme-color-100);

  &:hover {
    background-color: var(--accent-color-200);                
  }
  
  &:focus-visible {
    outline: 2px solid var(--theme-color-900);
    outline-offset: 4px;
    color: var(--theme-color-100);
  }
    
    @media (hover: none) {
    &:hover {
      background-color: var(--theme-color-600);
      color: var(--theme-color-100);
    }
  }
    
}

.button-has-icon {
  background-color: var(--theme-color-900);
  color: var(--theme-color-100);
  
  &:hover {
    background-color: var(--theme-color-300);
    color: var(--theme-color-900);
  }
  
  &:focus-visible {
    outline: 2px solid var(--theme-color-900);
    outline-offset: 4px;
    color: var(--theme-color-100);
  }
    
    @media (hover: none) {
    &:hover {
      background-color: var(--theme-color-900);
      color: var(--theme-color-100);
    }
  }
    
}

.button-has-icon[data-icon="arrow-right"]::after,
.button-has-icon[data-icon="arrow-right-top"]::after {
  content: '';
  width: 24px;
  height: 24px;
  background-repeat: no-repeat;
  background-size: contain;
  margin-inline-start: 0.5rem;
}

.button-has-icon[data-icon="arrow-right"]::after {
  background-image: url(./public/svg/icon-arrow-right.svg);
}

.button-has-icon[data-icon="arrow-right-top"]::after {
  background-image: url(./public/svg/icon-arrow-up-right.svg);
}

/* Globale Komponente Header und Navigation */

.site-header {
    width: 100%;
    background-color: var(--theme-color-100);
    position: sticky;
    top: 0;
    padding-block: 1em;
    z-index: var(--z-index-20);
    box-shadow: var(--theme-box-shadow);
    
    & > * {
    display: flex;
    justify-content: space-between;
    align-items: center;
    --max-width: 80em;
    --padding: 1em;
    width: min(var(--max-width), 100% - var(--padding) * 2);
    margin: 0 auto;
    margin-inline: auto;
    }
}

.site-header--logo img {
    max-width: 60px;
    height: auto;
    display: block;
}

.site-header--nav {
   position: relative;
}

.header-navigation a:not([class]) {
    font-size: var (--font-size-primary);
    font-weight: var(--font-weight-700);
    color: var(--theme-color-900);
    padding-block: .5rem;
}

.header-navigation li a:hover {
  color: var(--theme-color-600);
  text-decoration-color: var(--theme-color-600);
  text-decoration-line: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  text-decoration-skip-ink: auto;
}

.header-navigation li a[aria-current="page"] {
  color: var(--theme-color-600);
  text-decoration-color: var(--theme-color-600);
  text-decoration-line: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  text-decoration-skip-ink: auto;
}

.mobile-nav{
    display: none;
}

@media (max-width: 44.5em) {
    
    .header-navigation {
        background-color: var(--theme-color-100);
        position: fixed;
        z-index: var(--z-index-30);
        inset: 0 0 0 30%;
        height: 100vh;
        height: 100dvh;
        flex-direction: column;
        padding: min(30vh, 10em) 2em;
        transform: translateX(100%);
        transition: transform 500ms cubic-bezier(0.075, 0.82, 0.165, 1);
        pointer-events: auto;
        overscroll-behavior-y: contain;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .header-navigation a:not([class]) {
        font-size: var (--font-size-200);
    }
    
    .header-navigation li {
        padding-block: .75em;
    }

    .header-navigation[data-visible="true"] {
        transform: translateX(0%);
        box-shadow: 0 0 0 100vmax hsla(0, 2%, 13%, 0.8);
    }

    .mobile-nav {
        width: 100px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .mobile-nav--toggle {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 1.5em;
        border-radius: 0.25em;
        outline: none;
        border: none;
        transition: all 250ms cubic-bezier(.29,.38,.41,.85);
        cursor: pointer;
        background-color: var(--theme-color-600);
        z-index: var(--z-index-40);
      }
      
     .mobile-nav--toggle:focus-visible {
        outline: 2px solid var(--theme-color-900);
        outline-offset: 4px;
    }
    
      .mobile-nav--toggle[aria-expanded="true"] {
        background-color: var(--theme-color-600);
    }

      .mobile-nav--toggle::before, .mobile-nav--toggle::after {
        content: '';
        width: 28px;
        height: 2px;
        position: absolute;
        background-color: var(--theme-color-100);
        transition: all 250ms cubic-bezier(.29,.38,.41,.85);
        will-change: transform;
      }
      
      .mobile-nav--toggle::before {
        transform: translateY(-3px);
      }
      
      .mobile-nav--toggle::after {
        transform: translateY(3px);
      }
      
      .active.mobile-nav--toggle::before {
        transform: translateY(0) rotate(45deg);
      }
      
      .active.mobile-nav--toggle::after {
        transform: translateY(0) rotate(-45deg);
      }
  
}
  
@media (min-width: 35em) and (max-width: 55em) {
  
    .header-navigation a > [aria-hidden="true"]{
      display: none
    }
  
}
  
@media (min-width: 44.5em) {
    
    .header-navigation > .menu-items {
        display: inline-flex;
        flex-wrap: wrap;
        gap: 1em;
    
        &:hover {
            color: var(--theme-color-600);
        }
    }

}

@media (hover: none) {
    
    .header-navigation li a:hover {
        color: inherit;
        text-decoration: none;
    }

    .header-navigation li a[aria-current="page"] {
    color: var(--theme-color-600);
    text-decoration-color: var(--theme-color-600);
    text-decoration-line: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
    }

    .mobile-nav--toggle:hover {
       background-color: var(--theme-color-600);
    }
    
    .header-navigation li a:active,
    .header-navigation li a:focus-visible {
    color: var(--theme-color-600);
    text-decoration: underline;
    text-decoration-color: var(--theme-color-600);
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
  }

  .mobile-nav--toggle:active,
  .mobile-nav--toggle:focus-visible {
    background-color: var(--theme-color-600);
    outline: 2px dashed var(--theme-color-900);
    outline-offset: 4px;
  }
    
}

/* Globale Komponente Footer */

.site-footer {
    width: 100%;
    padding-block: 5em;
    background-color: var(--theme-color-300);
    color: var(--theme-color-900);

    & > * {
        --max-width: 80em;
        --padding: 1em;
        width: min(var(--max-width), 100% - var(--padding) * 2);
        margin: 0 auto;
        margin-inline: auto;
    }
}

.site-footer--content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 1em;
}

.footer-block {
    position: relative;
}

.footer-block--headline h2 {
    font-size: var(--font-size-300);
    margin-block-end: .5em;
}

.footer-block--list li span.icon {
    display: flex;
}

.footer-block--list li strong {
    display: block;
}

dl.opening-hours {
    font-size: var(--font-size-primary);
}

dl.opening-hours dt {
    font-weight: var(--font-weight-700);
    display: block;
}

dl.opening-hours dd {
    padding-block-end: .25rem;
}

.footer-nav-menu {
    position: relative;
}

.footer-nav-menu li a {
    display: inline-block;
    padding-block-end: .25rem;
}

.site-footer--meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1em;
}

.footer-meta-menu {
    display: inline-flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 1em;
}

.footer-nav-menu li a[aria-current="page"],
.footer-meta-menu li a[aria-current="page"] {
  color: var(--theme-color-600);
  text-decoration-color: var(--theme-color-600);
  text-decoration-line: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  text-decoration-skip-ink: auto;
}

#theme-switch {
    height: 50px;
    width: 50px;
    padding: 0;
    border-radius: 50%;
    background-color: var(--clr-accent-400);
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: var(--clr-box-shadow);
}
   
#theme-switch svg:last-child {
    display: none
}
   
.darkmode #theme-switch svg:first-child {
    display: none
}
   
.darkmode #theme-switch svg:last-child {
    display: flex
}

/* Web-Komponenten Site Header and Bradcrumb */

.site-main--header {
    --max-width: 80em;
    --padding: 1em;
    width: min(var(--max-width), 100% - var(--padding) * 2);
    margin: 0 auto;
    margin-inline: auto;
}

.breadcrumb {
   font-size: var(--font-size-small);
    color: var(--theme-color-900);
    line-height: 1.6;
    white-space: nowrap;
    overflow: clip;
    text-overflow: ellipsis;
    padding-block: 1em;
}

.breadcrumb a {
    color: #0073e6;
    text-decoration: none;
}

.breadcrumb a {
    color: var(--theme-color-900);
}

.breadcrumb a:hover {
  color: var(--theme-color-600);
  text-decoration-color: var(--theme-color-600);
  text-decoration-line: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  text-decoration-skip-ink: auto;
}

.breadcrumb > span.current-page {
    color: var(--theme-color-600);
    text-decoration-color: var(--theme-color-600);
    text-decoration-line: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
    text-decoration-skip-ink: auto;
}

.header-container {
    position: relative;
    width: 100%;
    padding-block: 1em;
}

.header-container > *:not(:last-child) {
    margin-block-end: 1rem;
}

.header-container h1 {
    font-size: var(--font-size-600);
}

.header-container ul {
    line-height: 2rem;
}

/*  Web-Komponenten */

.section-heading {
    margin-block-end: 2em;
}

.section-heading--teaser :where(h2, h3) {
    margin-block-end: .5em;
}

.section-heading--teaser h2 {
    font-size: var(--font-size-500);
}

.section-heading--teaser h3 {
    font-size: var(--font-size-400);
}

/*  Block Image */

header-banner {
    position: relative
}

.header-banner--picture img {
    width: 100%;
    height: auto;
    max-inline-size: 100%;
    margin: 0;
}

.header-banner--caption {
    padding: .5em;
}

/*  Web-Komponenten Background Image */

.bg-image {
    width: 100%;
    padding: 8em 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    background-image: linear-gradient(to top, rgb(18 20 22 / .3), transparent max(84%, 84vw)), var(--bg-url);
}

@media (width > 46em) {
    
    .bg-image {
        padding: 12em 0;
    }
    
}

.bg-image--has-overlay {
    --max-width: 80em;
    --padding: 1em;
    width: min(var(--max-width), 100% - var(--padding) * 2);
    margin: 0 auto;
    margin-inline: auto;
}

.has-overlay--content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.has-overlay--content h1 {
    font-size: var(--font-size-600);
    background-color: var(--theme-color-600);
    color: var(--theme-color-100);
    border-radius: .5em 1em .5em 1em;
    padding: 1em;
    box-decoration-break: clone;
}

.has-overlay--content h1 span {
    font-size: var(--font-size-primary);
    font-weight: var(--font-weight-400);
    display: block;
    margin-block: .5em;
}

.has-overlay--content h3 {
    font-size: var(--font-size-400);
    color: #121416;
    margin-block-end: 1em
}

/*  Web-Komponenten Announcement */

.announcement-items {
    display: grid;
    gap: 1em;
    grid-template-columns: repeat(1,minmax(0,1fr))
}

@media (width > 53.75em) {

    .announcement-items {
        display: grid;
        gap: 1em;
        grid-template-columns: repeat(2,minmax(0, 1fr));
    }
}

.announcement-items--item:first-child {
    grid-row: 1/span 2;
}

.announcement-items--item {
    --teaser-spacing: 1em;
    display: flex;
    flex-direction: column;
    gap: .5em;
    padding: var(--teaser-spacing);
    position: relative;
    background-color: var(--accent-color-200);
    color: var(--theme-color-900);
}

.announcement-items--item > *:not(:last-child) {
    margin-block-end: .5em
}

.item-header--date {
  display: inline-flex;
  align-items: center;
  gap: 0.5em; 
  font-size: var(--font-size-small);
  margin-block-end: 1em;
  white-space: nowrap; 
  overflow: hidden;     
  text-overflow: ellipsis; 
}

.item-header--date .svg-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.item-header > *:not(:last-child) {
    margin-block-end: .5em
}

.item-header--list {
    margin-block: .5em;
    display: flex;
    flex-direction: column;
    line-height: 2.25rem;
}

.item-header--list li {
    display: inline-flex;
    align-items: center;
    gap: .25em;
}

.item-header--list li[data-icon="icon"]::before {
    content: '';
    width: 24px;
    height: 24px;
    background-image: url(./public/svg/icon-file-35a8d0.svg);
    background-repeat: no-repeat;
    background-size: contain;
    display: inline;
}

.item-header--headline h2 {
    font-size: var(--font-size-500);
}

.item-header--headline h3 {
    font-size: var(--font-size-400);
}

.item-header--excerpt > *:not(:last-child) {
    margin-block-end: .5em
}

.item-header--excerpt h3 {
    font-size: var(--font-size-200);
}

.item-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    margin-block-start: auto;
}

/*  Web-Komponenten MAIN SIDEBAR */

.section-block {
    position: relative;
}

.section-block--headlines :where(h1) {
    font-size: var(--font-size-600);
    margin-block-end: .5em;
}

.section-block--headlines :where(h2) {
    font-size: var(--font-size-500);
    margin-block-end: .5em;
}

.section-block--headlines :where(h3) {
    font-size: var(--font-size-400);
}

.section-block--wysiwyg,
.section-block--list {
    margin-block: 1em;
}

.section-block--wysiwyg > *:not(:last-child) {
    margin-block-end: .5rem;
}

.section-block--wysiwyg h4 {
    font-size: var(--font-size-300);
}

.section-block--wysiwyg p :where(a) {
    color: var(--theme-color-600);
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: var(--theme-color-600);
    overflow-wrap: break-word;
    text-decoration: none;

    & :focus-visible {
        outline: 2px dashed currentColor;
        outline-offset: 4px;
        color: var(--theme-color-600);
    }
}

.section-block--list li {
    display: list-item;
    line-height: 1.875rem;
}

.section-block--list[role="list"] {
    padding-inline: 1em;
}

.section-block--list > [role="listitem"] {
    font-size: var(--font-size-primary);
    font-weight: var(--font-weight-400);
    display: list-item;
    list-style:disc;
    list-style-position: outside;
    line-height: 1.875rem;
}

.section-block--subheadline > * {
    margin-block-end: .5em;
}

.section-block--subheadline :where(h2) {
    font-size: var(--font-size-500);
}

.section-block--subheadline :where(h3) {
    font-size: var(--font-size-400);
}

.section-block--subheadline :where(h4) {
    font-size: var(--font-size-300);
}


.section-block--wysiwyg ul {
    margin-block-start: 1em;
    margin-block-end: 2em;
    padding: 0 1em;
}

.section-block--wysiwyg li {
    list-style-position: outside;
  list-style-type: disc;
}

.section-block--wysiwyg li::marker {
  color: var(--theme-color-600);
} 

.section-block--images {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1em;
    --threshold: 40em;
}

.section-block--images > * {
    flex-grow: 1;
    flex-basis: calc((var(--threshold) - 100%) * 999);
}

.section-block--images figcaption {
    padding: .5em;
}

/*  Web-Komponenten Links Group */

.links-group {
    position: relative;
}

.links-group li:not(:last-child) {
    border-bottom: 1px solid var(--theme-color-600);
}

.links-group--link {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    transition: background-color .3s ease;
    padding-block: 1em;

    &:hover {
        background-color: var(--accent-color-200);
    }

    &:focus-visible {
        outline: 2px dashed currentColor;
        outline-offset: -2px;
        background-color: var(--accent-color-200);
    }
}

.links-group--link > :first-child {
    flex-basis: 3em;
    flex-grow: 1;
}

.links-group--link > :last-child {
    flex-basis: 0;
    flex-grow: 999;
    min-inline-size: 50%;
}

.link-icon {
    overflow: clip;
    position: relative;
    width: 32px;
    height: 32px;
    background-size: contain;
    background-repeat: no-repeat;
}

.link-text > *:not(:last-child) {
    margin-block-end: .5rem;
}

.link-text h4 {
    font-size: var(--font-size-200);
}
/*  Web-Komponenten Switcher */

.section-switcher {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
    --threshold: 40em;
}

.section-switcher > * {
    flex-grow: 1;
    flex-basis: calc((var(--threshold) - 100%) * 999);
}

.section-switcher--figure figure img {
    width: 100%;
    max-width: 100%;
    height: auto
}

.section-switcher--figure figcaption {
   font-size: var(--font-size-small);
    padding: .25em;
}

.section-switcher--content :where(h2, h3) {
    margin-block-end: .5em;
}

.section-switcher--content h2 {
    font-size: var(--font-size-500);
}

.section-switcher--content h3 {
    font-size: var(--font-size-400);
}

.section-switcher--content p {
    font-size: var(--font-size-primary);
}

.website-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
    --threshold: 50.625em;
}

.website-cards > * {
    flex-grow: 1;
    flex-basis: calc((var(--threshold) - 100%) * 999);
}

.website-cards--card {
    width: 100%;
    height: 100%;
    padding: 6em 0;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
    transition: transform 0.3s ease-in-out;
    
    &:focus-visible {
        outline: 2px dashed var(--theme-color-900);
        outline-offset: 4px;
    }
}

.website-cards--card::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to top,rgba(18, 18, 16, .6),transparent max(94%, 94vw));
}

@media (min-width: 50.625em) {

    .website-cards--card {
        padding: 10em 0;
    }
  
}

.website-cards--card > h4 {
    display: flex;
    justify-content: flex-end;
    font-size: var(--font-size-primary);
    color: var(--theme-color-900);
    background-color: var(--theme-color-100);
    z-index: var(--z-index-10);
    box-decoration-break: clone;
    padding: .2em .4em;
}

/*  Web-Komponenten Responsive Tabelle */

table {
    border-collapse: collapse;
    width: 100%;
}

table caption {
    text-align: left;
    padding: 1em .5em;
    background-color: var(--theme-color-300);
    color: var(--theme-color-900);
    font-size: var(--font-size-primary);
    font-weight: var(--font-weight-700);
}

table thead {
    font-weight: var(--font-weight-700);
}

table th {
    text-align: inherit;
  }
  
table th, table td {
    vertical-align: bottom;
    padding: 1em .5em;
    border-bottom: 1px solid var(--theme-color-600);
    white-space: nowrap;
    font-size: var(--font-size-primary);
    font-weight: var(--font-weight-400);
}
  
table tbody tr:nth-child(odd) {
    background-color: var( --accent-color-200);
}

/*  Web-Komponenten MAIN SIDEBAR */

/* Einspaltig – Mobile & Tablet (Reihenfolge: Sidebar → Main) */
.main-with-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1em;
}

.main-with-sidebar > :first-child {
    order: 2; /* Main kommt nach Sidebar */
    flex-basis: auto;
    flex-grow: 0;
}

.main-with-sidebar > :last-child {
    order: 1; /* Sidebar zuerst */
    flex-basis: auto;
    flex-grow: 0;
    position: static;
}

/* Zweispaltig ab 60em */
@media (min-width: 60em) {
    .main-with-sidebar {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .main-with-sidebar > :first-child {
        order: 1;
        flex-basis: 0;
        flex-grow: 999;
        min-inline-size: 50%;
    }

    .main-with-sidebar > :last-child {
        order: 2;
        flex-basis: 20em;
        flex-grow: 1;
        position: sticky;
        top: 7em;
    }
}

.main-editable :where(h2) {
    margin-block: .5rem;
}

.main-editable > *:not(:last-child) {
    margin-block-end: 1rem;
}

.main-editable h1 {
    font-size: var(--font-size-600);
}

.main-editable h2 {
    font-size: var(--font-size-500);
}

.sidebar {
    background-color: var(--theme-color-300);
    padding: 1em;
}

.sidebar-headline h3 {
    font-size: var(--font-size-400);
}

.sidebar-headline ul {
    font-size: var(--font-size-primary);
    margin-block: .5em;
}

.sidebar-headline li {
    display: block;
}

.sidebar-headline li a {
  color: var(--theme-color-600);
  text-decoration-color: var(--theme-color-600);
  text-decoration-line: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  text-decoration-skip-ink: auto;
    
    &:focus-visible {
        outline: 1px dashed currentColor;
        outline-offset: 4px;
    }
}

/*  Web-Komponenten Section */

.section-intro--headline {
    display: flex;
    justify-content: center;
    align-items: center;
}

.section-intro--headline h1 {
    font-size: var(--font-size-600);
    text-align: center;
}

.section-intro--headline::before {
    content: '';
    height: 1px;
    background-color: var(--theme-color-600);
    margin-right: 60px;
    display: inline-flex;
    flex: 1;
}

.section-intro--headline::after {
    content: '';
    height: 1px;
    background-color: var(--theme-color-600);
    margin-left: 60px;
    display: inline-flex;
    flex: 1;
}

.section-intro--teaser {
    display: flex;
    justify-content: center;
    align-items: center;
}

.section-main {
    --max-width: 50em;
    --container-spacing-inline: 1em;
    width: min(var(--max-width), 100% - var(--container-spacing-inline) * 2);
    margin: 0 auto;
    margin-inline: auto;
}

.section-main--article > *:not(:last-child) {
      margin-block-end: 1rem;
}

.quicklink-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(30em, 1fr));
    gap: 1em 1em
}

@media (min-width: 40em) {

    .quicklink-cards {
        gap: 2em 1em
    }
}

.quicklink-cards--card {
   --column: 220px 1fr;
    display: grid;
    grid-template-columns: var(--column);
    gap: 1em 1em
}

.card-image {
    grid-column: 1 / 3;
}

.card-content {
    grid-column: 1 / 3;
}

@media (min-width: 40em) {

    .card-image {
        grid-column: 1 / 2;
    }
      
    .card-content {
        grid-column: 2 / 3;
    }
}

.card-image img {
    width: 220px;
    max-width: 100%;
    height: auto;
}

/* TOC */

.toc {
  --animation-timing: 280ms;
  border-radius: .5em;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 1em;
  margin: 0;
  border: 1px solid var(--theme-color-600);
}

.toc header {
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
  min-height: 2em;
}

.toc-button {
  position: absolute;
  top: 0;
  right: 0;
  width: 24px;
  height: 24px;
  margin: 0;
  border: none;
}

.toc-button {
  transform: rotate(180deg);
  transition: transform var(--animation-timing) ease-in-out;
}

.toc-button[aria-expanded="true"] {
    transform: rotate(-180deg);
}
  
.toc-button[aria-expanded="false"] {
    transform: rotate(0);
 }
  
ul.toc-list {
    margin: 0;
    list-style-type: none;
    padding: .25em 0;
    line-height: 2rem;
    overflow: hidden;
    max-height: 100vh;
    transition: margin-block-start var(--animation-timing) cubic-bezier(0.2, 0.01, 0.56, 0.94),
    max-height var(--animation-timing) cubic-bezier(0.2, 0.01, 0.56, 0.94);
}

ul.toc-list.minimized {
    margin-block-start: 0;
    max-height: 0;
}

ul.toc-list li {
    position: relative;
    display: list-item;
    padding-inline: .5em;
}

@media screen and (min-width: 700px) {
    .toc nav {
      margin: 0 10%;
    }
}
  
.compact-contents {
    --max-width: 50em;
    --container-spacing-inline: 1em;
    width: min(var(--max-width), 100% - var(--container-spacing-inline)* 2);
    margin: 0 auto;
    margin-inline: auto;
}

.compact-contents--content {
      padding-block: 2rem;
} 

.compact-contents--content > *:not(:last-child) {
      margin-block-end: 1rem;
} 

.compact-contents--content:not(:last-child) {
    border-bottom: 1px solid var(--theme-color-600);
} 

.compact-contents--content h2 {
  font-size: var(--font-size-500);
}

.compact-contents--content h3 {
  font-size: var(--font-size-400);
}

.compact-contents--content h4 {
  font-size: var(--font-size-300);
    margin-block-start: 1em;
}

.compact-contents--content ul {
    margin-block: 1em;
}

.compact-contents--content ul li {
    display: list-item;
    position: relative
}

.compact-contents--content ul li a {
    text-decoration-color: var(--theme-color-900);
  text-decoration-line: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  text-decoration-skip-ink: auto;
}

.compact-contents--content ul li a:hover {
   color: var(--theme-color-600);
  text-decoration-color: var(--theme-color-600);
  text-decoration-line: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  text-decoration-skip-ink: auto;
}

.compact-contents--content ul li a[target="_blank"]::after {
  content: "";
  display: inline-flex;
  align-items: center;
  align-content: center;
  margin-left: .25em;
  width: 24px;
  height: 24px;
  background-size: 100%;
  background-image: url(./public/svg/arrow-up-right.svg);
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
  top: 0.325em;
}

/* Tab-Navigation */

.section-tabs-wrap {
  width: 100%;
}

h3#primary-heading {
    font-size: var(--font-size-400);
}
.section-tabs {
  position: relative;
}

.section-tabs--tab {
  list-style: none;
  padding: 0;
  margin: 0;
  display: block;
}

@media (width > 40em) {

.section-tabs--tab {
    display: inline-flex;
}

}

.section-tabs--tab li[role="presentation"] {
  background-color: var(--theme-color-300);
}

.tab-item a[role="tab"] {
  padding: 1em;
  display: inline-flex;
}

.section-tabs--tab li[role="presentation"]:has(a[aria-selected="true"]) {
  background-color: var(--theme-color-600);

  & a {
    color: var(--theme-color-100);
  }

}

.section-tab[role="tabpanel"] {
  padding: 1em;
  border: 1px solid var(--theme-color-600);
}

.section-tab--content {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  --threshold: 40em;
}

.section-tab--content > * {
  flex-grow: 1;
  flex-basis: calc((var(--threshold) - 100%) * 999);
}

.tab-content {
    position: relative
}

.tab-content h4 {
    font-size: var(--font-size-300);
    margin-block-end: .5em;
}

.tab-content ul {
    position: relative
    padding-inline: 1em;
}

.tab-content li {
    display: list-item;
}

.tab-content li a {
    text-decoration-color: var(--theme-color-900);
  text-decoration-line: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  text-decoration-skip-ink: auto;
}

.tab-content li a:hover {
  color: var(--theme-color-600);
  text-decoration-color: var(--theme-color-600);
  text-decoration-line: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  text-decoration-skip-ink: auto;
}

.tab-content li a[target="_blank"]::after {
  content: "";
  display: inline-flex;
  align-items: center;
  align-content: center;
  margin-left: .25em;
  width: 24px;
  height: 24px;
  background-size: 100%;
  background-image: url(./public/svg/arrow-down.svg);
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
  top: 0.325em;
}

.section-latest--headline h2 {
    font-size: var(--font-size-500);
    margin-block-end: 1em;
}

:root {
  --grid-gap-y: 4em;
  --grid-gap-x: 2em;

  --font-size-headline: var(--font-size-400);
  --font-weight-strong: var(--font-weight-700);

  --divider-color: var(--theme-color-600);
  --focus-outline: 2px dashed var(--theme-color-600);
  --focus-offset: 2px;
}

.section-latest--results {
  position: relative;
}

.results-teaser {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18em), 1fr));
  gap: var(--grid-gap-y) var(--grid-gap-x);

  .results-teaser--list {
    display: flex;
    flex-direction: column;
    position: relative;

    /* Ab dem 4. Element: Trennlinie */
    &:nth-child(n + 4)::after {
      content: "";
      position: absolute;
      top: -2rem;
      left: 0;
      right: 0;
      height: 1px;
      background-color: var(--divider-color);
    }
  }
}

.results-teaser--list {
  word-break: break-word;
  overflow-wrap: break-word;
}

.list-headline {
  display: inline-flex;
  justify-content: space-between;
  align-items: center;

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

  &--link {
    position: relative;

    &::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
    }
  }
}

.list-excerpt {
  a {
    font-weight: var(--font-weight-strong);

    &:focus-visible {
      outline: var(--focus-outline);
      outline-offset: var(--focus-offset);
    }
  }
}


/*  Web-Komponenten Beitrag */

:root {
  --spacing-block: 2em;
  --spacing-inline: 1em;
}

.section-blog--posts {
  li {
    > * {
      margin-block: var(--spacing-block);
    }

    &:not(:last-child) {
      border-bottom: 1px solid var(--theme-color-600);
    }
  }

  a {
    font-weight: var(--font-weight-700);
    text-decoration: underline;

    &:focus-visible {
      outline: 2px dashed var(--theme-color-600);
      outline-offset: 2px;
    }
  }
}

.section-blog--posts article > *:not(:last-child) {
    margin-block-end: .5rem;
}

.post-heading {
  margin-block-end: 1em;

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

  time .reading-time {
    font-size: var(--font-size-small);
  }
}

.site-block--heading {
  h1 {
    font-size: var(--font-size-600);
  }
}

.site-block--content {
  margin-block: var(--spacing-block);
}

.site-block--content > *:not(:last-child) { 
        margin-block-end: 1em;
}

h2.wp-block-heading {
    font-size: var(--font-size-500);
}

h3.wp-block-heading {
    font-size: var(--font-size-400);
}

h4.wp-block-heading {
    font-size: var(--font-size-300);
}

h5.wp-block-heading {
    font-size: var(--font-size-200);
}

.wp-block-image {
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0;
}

.post-meta {
  position: relative;
  display: block;
  margin-block-start: var(--spacing-block);

  ul {
    display: inline-flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: var(--spacing-inline);
  }

  li {
    font-size: var(--font-size-small);
    padding: 0.5em;
    border-radius: 100vw;
    border: 1px solid var(--theme-color-600);
  }
}

.post-meta-info {
    display: inline-flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 1em;
}

.post-content h2 + p,
.post-contenth3 + p {
  margin-block-start: .5rem;
}

.post-content p {
  margin-block-start: 0;
  margin-block-end: 0;
  line-height: 1.6;
}

.post-content p + p {
  margin-block-start: 1rem;
}

.post-content p + ul {
  margin-block-start: 1.5rem;
  margin-block-end: 1.5rem;
}

.post-content p a {
  color: var(--theme-color-600);
  text-decoration-color: var(--theme-color-600);
  text-decoration-line: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  text-decoration-skip-ink: auto;
}

.wp-block-list {
  padding-inline: 1em;
  line-height: 2rem;

  li {
    list-style-type: disc;
    list-style-position: outside;
  }
    
  li a {
  color: var(--theme-color-600);
  text-decoration-color: var(--theme-color-600);
  text-decoration-line: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  text-decoration-skip-ink: auto;
}
    
}

.site-block--content p a {
  color: var(--theme-color-600);
  text-decoration-color: var(--theme-color-600);
  text-decoration-line: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  text-decoration-skip-ink: auto;
}

.wp-block-separator.has-text-color.has-alpha-channel-opacity.has-background.is-style-wide {
  margin-block: 2rem;
}

/*  Web-Komponenten Beitrag Pagination */

.nav-links {
    display: flex;
    justify-content: flex-start;
    gap: 1em;
}

.nav-previous, .nav-next {
    font-weight: var(--font-weight-700);
    font-size: var(--font-size-base);
    text-decoration-color: var(--theme-color-600);
  text-decoration-line: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  text-decoration-skip-ink: auto;
}

.page-numbers:not(.next.page-numbers, .prev.page-numbers) {
    background-color: var(--theme-color-600);
    color: var(--theme-color-100);
    font-size: var(--font-size-small);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.next.page-numbers,
.prev.page-numbers {
    color: var(--theme-color-900);
    font-size: var(--font-size-small);
    display: inline-flex;
    align-items: center;
    text-decoration: underline
}

.page-numbers.current[aria-current="page"] {
    background-color: var(--theme-color-900);
    color: var(--theme-color-100);
    font-size: var(--font-size-small);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/*  Web-Komponenten 05082025 */

.list-copy {
    padding-block: 2em;
    border-bottom: 1px solid var(--theme-color-600);
}

.list-copy:last-child {
    border-bottom: hidden
}

.list-copy__info {
    position: relative;
}

.list-copy__info > *:not(:last-child) {
    margin-block-end: .5em;
}

.info-link {
  display: list-item;
  color: var(--theme-color-600);
  text-decoration-color: var(--theme-color-600);
  text-decoration-line: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  text-decoration-skip-ink: auto;
}

.info-link[target="_blank"]::after {
    content: "";
    display: inline-flex;
    align-items: center;
    align-content: center;
    margin-left: .75em;
    width: 24px;
    height: 24px;
    background-size: 100%;
    background-image: url(./public/svg/arrow-up-right.svg);
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    top: 34px;
}

/*  Web-Komponenten Sitempa Navigation */

.sitemap-header {
    position: relative
}

h1.site-title {
    font-size: var(--font-size-600);
}

p.description {
  font-size: var(--font-size-primary);
  color: var(--theme-color-900);
  margin-block-start: 1rem;
}

.sitemap-main {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 1em;
    --threshold: 40em;
}

.sitemap-main > * {
    flex-grow: 1;
    flex-basis: calc((var(--threshold) - 100%) * 999);
}

h2.sitemap-headline {
    font-size: var(--font-size-500);
    color: var(--theme-color-900);
}

.sitemap-list {
    margin-block: 1rem;
}

.sitemap-list li {
 line-height: 2rem;
}

.sitemap-list li:not(:last-child) {
  padding-block-end: .5rem;
}

.sitemap-list li a {
  color: var(--theme-color-600);
  text-decoration-color: var(--theme-color-600);
  text-decoration-line: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  text-decoration-skip-ink: auto;
}

.section-alert {
    position: relative;
}

.section-alert--content {
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    border: 1px solid var(--theme-color-600);
}

.alert-content--icon {
    padding: 1em .5em;
    
    & img {
        min-width: 1.5em;
    }
}

.alert-content--edit {
    padding: 1em
}

.alert-content--edit > *:not(:last-child) {
  margin-block-end: 1rem;
}

.alert-content--edit .pre-headline {
    font-size: var(--font-size-primary);
    display: block;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.alert-content--edit h2 {
    font-size: var(--font-size-300);
	font-weight: var(--font-weight-700);
}

.alert-text > *:not(:last-child) {
  margin-block-end: 1rem;
}

.alert-text p {
    font-size: var(--font-size-primary);
}

.alert-text p a,
.alert-text li a {
  color: var(--theme-color-600);
  text-decoration-color: var(--theme-color-600);
  text-decoration-line: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  text-decoration-skip-ink: auto;
}

.alert-close-button {
  background-color: var(--accent-color-200);
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  position: absolute;
  width: 42px;
  height: 42px;
  top: 1rem;
  right: 1rem;
  cursor: pointer;
  color: var(--theme-color-900);
  display: flex;
  justify-content: center;
  align-items: center;
}

.section-regions {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
    --threshold: 40em;
}

.section-regions > * {
    flex-grow: 1;
    flex-basis: calc((var(--threshold) - 100%) * 999);
}

.section-regions--child:first-child {
}

.section-regions--child:last-child {
}

.section-regions--child h3 {
    font-size: var(--font-size-400);
    margin-block-end: 1em;
}

.opening-hours dt {
    font-weight: var(--font-weight-700);
    margin-top: .75rem;
}

.opening-hours dt:first-child {
    margin-top: 0;
}

.opening-hours dd {
    margin: .25rem 0 0;
}

.section-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 1em
}

.section-cards {
    margin-block-end: 2em;
}

.section-cards > :first-child {
    flex-basis: 200px;
    flex-grow: 1;
}

.section-cards > :last-child {
    flex-basis: 0;
    flex-grow: 999;
    min-inline-size: 50%;
}

.section-cards--photo img {
    width: 260px;
    max-width: 100%;
    height: auto;
    margin: 0;
}

.section-boxes {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(20em,1fr));
  gap: 1em
}

.section-boxes--box {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 1em;
    border-top: 1px solid var(--theme-color-600);
    padding-block: 1em;
}

.box-icon {
  display: block;
  background-repeat: no-repeat;
  background-size: contain;
  width: 24px;
  height: 24px;
}

.box-content h3 {
    font-size: var(--font-size-300);
}

.cards-container {
  display: grid;
  grid-gap: 1em;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.cards-container--card {
  display: flex;
  flex-direction: column;
}

.cards-container--card > * {
  margin-block-end: 1em;
}

.card-visual img {
    background-color: #E7E9EE;
    width: 100%;
    max-width: 100%;
    height: auto;
}

.card-headline h3 {
    font-size: var(--font-size-300);
}

.card-content ul {
    font-size: var(--font-size-primary);
}

.card-content li {
    display: list-item;
    position: relative
}

.card-content li a {
    display: inline-block;
    color: var(--theme-color-600);
    text-decoration-color: var(--theme-color-600);
    text-decoration-line: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
    text-decoration-skip-ink: auto;
}

.card-content li a:hover {
    color: var(--theme-color-900);
    text-decoration-color: var(--theme-color-900);
}

@media (hover: none) {
 
}

.card-content li a[target="_blank"]::after {
  content: "";
  display: inline-flex;
  align-items: center;
  align-content: center;
  margin-left: .25em;
  width: 24px;
  height: 24px;
  background-size: 100%;
  background-image: url(./public/svg/arrow-up-right.svg);
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  top: .125em;
}

/* Column-Styles */

.section-component {
   position: relative
}

.section-component--top {
    margin-block-end: 2rem;
}

.section-component--top > *:not(:last-child) {
    margin-block-end: .5rem;
}

.section-component--top h2 {
    font-size: var(--font-size-500);
}

.section-component--columns {
  display: grid;
  grid-gap: 2em 1em;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
}

.columns-child {
  display: flex;
  flex-direction: column;
}

.columns-child > *:not(:last-child) {
    margin-block-end: .5rem;
}

.columns-child h2 {
    font-size: var(--font-size-400);
  margin-block-end: .5em;
}

.columns-child h3 {
    font-size: var(--font-size-300);
  margin-block-end: .5em;
}

.columns-child p {
    
}

.columns-child ul {
    
}

.columns-child li {
    
}

.section-contains {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
    --threshold: 40em;
}

.section-contains > * {
    flex-grow: 1;
    flex-basis: calc((var(--threshold) - 100%) * 999);
}

.section-contains--block {
    position: relative
}

.section-contains--block > *:not(:last-child) {
    margin-block-end: 1rem;
}

.section-contains--block h2 {
    font-size: var(--font-size-500);
}

.section-contains--block h3 {
    font-size: var(--font-size-400);
}

.section-contains--block figure img {
    max-inline-size: 100%;
    block-size: auto;
    inline-size: 100%;
    height: auto;
    display: block;
}

.linklist {
    position: relative
}

.linklist-item:not(:last-child) {
    border-bottom: 1px solid var(--theme-color-600);
}

.linklist-item--link {
   display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    transition: background-color .3s ease;
    padding-block: 1em;

    &:hover {
        background-color: var(--accent-color-200);
    }

    &:focus-visible {
        outline: 2px dashed currentColor;
        outline-offset: -2px;
        background-color: var(--accent-color-200);
    }
}

.linklist-item--link > *:not(:last-child) {
    margin-block-end: .5rem;
}

.linklist-item--link > :first-child {
    flex-basis: 3em;
    flex-grow: 1;
}

.linklist-item--link > :last-child {
    flex-basis: 0;
    flex-grow: 999;
    min-inline-size: 50%;
}

.link-icon {
    overflow: clip;
    position: relative;
    width: 32px;
    height: 32px;
    background-size: contain;
    background-repeat: no-repeat;
}

/* HTML-Video Styles */

.section-visual {
    position: relative;
  }
  
  .section-visual__video video {
    width: 100%;
    height: auto;
    max-inline-size: 100%;
    display: block;
  }
  
  .video-controls {
    position: absolute;
    bottom: 5rem;
    left: 1rem;
    display: flex;
    gap: .5em;
  }
  
  .video-controls button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .5em .75em;
    background-color: var(--theme-color-300);
    color: var(--theme-color-900);
    border: none;
    cursor: pointer;
    border-radius: .25em;
    font-size: 1rem;
    line-height: 1;
    transition: background-color 0.2s ease;
  }
  
  .video-controls button:hover:not(:disabled),
  .video-controls button:focus:not(:disabled) {
    outline: 2px solid var(--theme-color-900);
    outline-offset: 4px;
  }
  
  .video-controls button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
  
  .section-visual__caption {
    padding: .5em;
    color: var(--theme-color-900);
  }
  

/* Basis-Styles */
/* Komponenten */
/* Layout */
/* Interaktionen */
/* Dark Mode */
@media (prefers-color-scheme: dark) { ... }

/* Bewegungspräferenzen */
@media screen and (prefers-reduced-motion: no-preference) {

    .website-cards--card:hover {
        transform: translateY(-8px);
    }
}

/* Kontrastpräferenzen */
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {

}

@media (prefers-contrast: more) {
    :root {
        --theme-color-100: #fffdf8;
        --theme-color-300: #dfdfdf;
        --theme-color-600: #05afff;
        --theme-color-900: #070707;

        --accent-color-200: #dfefff;
        --theme-box-shadow: 0 0 0 3px rgba(24, 26, 27, 0.8);
    }

    .darkmode {
        --theme-color-100: #070707;
        --theme-color-300: #1f2123;
        --theme-color-600: #5bc0e8;
        --theme-color-900: #fffdf8;

        --accent-color-200: #2a2c2f;
        --theme-box-shadow: 0 0 0 3px rgba(254, 254, 254, 0.8);
    }
    
     .mobile-nav--toggle {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 1.5em;
        border-radius: 0.25em;
        outline: none;
        border: none;
        transition: all 250ms cubic-bezier(.29,.38,.41,.85);
        cursor: pointer;
        background-color: var(--theme-color-600);
        z-index: var(--z-index-40);
        outline: 2px solid var(--theme-color-600);
        outline-offset: 2px;
      }
    
    .mobile-nav--toggle:focus-visible {
        outline: 2px solid var(--theme-color-900);
        outline-offset: 4px;
    }
      
      .mobile-nav--toggle[aria-expanded="true"] {
        background-color: var(--theme-color-900);
        outline: 2px solid var(--theme-color-900);
        outline-offset: 2px;
    }
    
    .button-default {
        background-color: var(--theme-color-900);
        color: var(--theme-color-100);
        border: 2px solid var(--theme-color-600);
        transition: none;
        letter-spacing: 0.05em;

        &:hover {
          background-color: var(--accent-color-200);
          color: var(--theme-color-900);
        }

        &:focus-visible {
            color: var(--theme-color-100);
            outline: 2px solid var(--theme-color-600);
            outline-offset: 4px;
        }
    }
    
    .button-inverted {
  background-color: var(--theme-color-600);
  color: var(--theme-color-100);
 border: 2px solid var(--theme-color-100);
    transition: none;
        letter-spacing: 0.05em;

  &:hover {
    background-color: var(--accent-color-200);
    color: var(--theme-color-900);                
  }
  
  &:focus-visible {
    outline: 2px solid var(--theme-color-900);
    outline-offset: 4px;
    color: var(--theme-color-100);
  }
    
    @media (hover: none) {
    &:hover {
      background-color: var(--theme-color-600);
      color: var(--theme-color-100);
    }
  }
    
}

    .button-has-icon {
        background-color: var(--theme-color-900);
        color: var(--theme-color-100);
        border: 2px solid var(--theme-color-600);
        transition: none;
        letter-spacing: 0.05em;

        &:hover {
        background-color: var(--accent-color-200);
        color: var(--theme-color-900);
        }

        &:focus-visible {
            outline: 2px solid var(--theme-color-600);
            outline-offset: 4px;
        }
    }
    
    .website-cards--card {
        border: 2px solid var(--theme-color-600);
        
         &:focus-visible {
            outline: 2px solid var(--theme-color-600);
            outline-offset: 4px;
        }
    }
    
    .video-controls button {
  
  background-color: var(--theme-color-300);
  color: var(--theme-color-900);
    }
    
     .video-controls button:hover:not(:disabled),
  .video-controls button:focus-visible:not(:disabled) {
    outline: 2px solid var(--theme-color-900);
    outline-offset: 4px;
  }
    
}

@media (prefers-contrast: less) {
    :root {
        --theme-color-100: #f4f5f7;
        --theme-color-300: #dddfe4;
        --theme-color-600: #8aa0af;
        --theme-color-900: #3a3e42;

        --accent-color-200: #eaeef2;
        --theme-box-shadow: none;
    }

    .darkmode {
        --theme-color-100: #1c1d1f;
        --theme-color-300: #2b2d30;
        --theme-color-600: #6e8b99;
        --theme-color-900: #f1f2f5;

        --accent-color-200: #242628;
        --theme-box-shadow: none;
    }
    
    .button-default {
        background-color: var(--theme-color-900);
        color: var(--theme-color-100);
        border: 2px solid var(--theme-color-600);
        
        &:focus-visible {
            color: var(--theme-color-100);
            outline: 2px solid var(--theme-color-900);
            outline-offset: 4px;
        }
    }
    
    .button-has-icon {
        background-color: var(--theme-color-300);
        color: var(--theme-color-600);
        border: 2px solid var(--theme-color-600);

        &:hover {
            background-color: var(--theme-color-600);
            color: var(--theme-color-100);
        }
        
        &:focus-visible {
            outline: 2px solid var(--theme-color-600);
            outline-offset: 4px;
        }
    }
}

@media (hover: none) {
    
    .linklist-item--link:hover {
    background-color: initial;
    }
    
    .card-content li a:hover {
    color: inherit;
    text-decoration-color: inherit;
  }
    
     .video-controls button:hover:not(:disabled),
  .video-controls button:focus-visible:not(:disabled) {
    outline: 2px solid inherit;
  }
    
    a {
  &:hover {
    color: var(--theme-color-900);
  }
}
    
    
}