@import url("fonts.css");
:root { --color-primary: #880000; --color-secondary: #22546a; --color-text: #28343a; --color-muted: #647078; --color-surface: #f5f5f3; --color-surface-soft: #faf9f7; --color-border: #d7dfe2; --color-white: #fff; --content-width: 75rem; --radius: 0.75rem; --shadow: 0 0.5rem 1.5rem rgba(25, 50, 60, 0.08); }
html { scroll-behavior: smooth; }
body { margin: 0px; color: var(--color-text); background: var(--color-white); font-family: Barlow, "Nunito Sans", sans-serif; font-size: 1.0625rem; line-height: 1.65; }
body, p, li, td, dl, button, input, textarea, select { font-family: Barlow, "Nunito Sans", sans-serif; }
h1, h2, h3, h4, h5, h6 { margin-top: 0px; color: var(--color-primary); font-family: "Barlow Semi Condensed", sans-serif; font-weight: 300; line-height: 1.18; }
h1 { font-size: clamp(2rem, 4vw, 3rem); }
h2 { font-size: clamp(1.65rem, 3vw, 2.25rem); }
h3 { font-size: clamp(1.35rem, 2vw, 1.7rem); }
p, ul, ol { margin-bottom: 1.15rem; }
a { color: var(--color-primary); text-decoration-thickness: 0.08em; text-underline-offset: 0.16em; }
a:hover { color: var(--color-secondary); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid var(--color-secondary); outline-offset: 3px; }
img { max-width: 100%; height: auto; }
.grid-container { max-width: var(--content-width); }
.skip-link { position: fixed; top: 0.5rem; left: 0.5rem; z-index: 9999; padding: 0.7rem 1rem; color: var(--color-white); background: var(--color-secondary); transform: translateY(-150%); }
.skip-link:focus { color: var(--color-white); transform: translateY(0px); }
.site-header { padding-top: 1.25rem; background: var(--color-white); }
.brand { width: min(28.75rem, 90%); margin: 0 auto 1rem; text-align: center; }
.brand .moduletable, .brand p { margin: 0px; }
.main-navigation { border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); background: var(--color-surface-soft); }
.main-navigation ul.menu { justify-content: center; margin: 0px; background: transparent; }
ul.menu li > a { color: var(--color-secondary); font-family: "Barlow Semi Condensed", sans-serif; font-size: 1.08rem; font-weight: 400; }
ul.menu li > a:hover, ul.menu li.active > a, ul.menu li.current > a { color: var(--color-primary); background: transparent; }
.dropdown.menu > li.is-dropdown-submenu-parent > a::after { border-color: var(--color-secondary) transparent transparent; }
.is-dropdown-submenu { border: 1px solid var(--color-border); border-radius: 0 0 var(--radius) var(--radius); background: var(--color-white); box-shadow: var(--shadow); }
.mobile-navigation { padding: 0.65rem; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); background: var(--color-surface-soft); text-align: center; }
.menu-toggle { display: inline-flex; gap: 0.75rem; align-items: center; color: var(--color-secondary); font-weight: 600; cursor: pointer; }
.menu-icon::after { background: var(--color-primary); box-shadow: 0 7px 0 var(--color-primary), 0 14px 0 var(--color-primary); }
.off-canvas { padding: 3.5rem 1.25rem 1.5rem; background: var(--color-surface-soft); }
.off-canvas ul.menu { flex-direction: column; }
.site-main { padding: clamp(1.75rem, 4vw, 3.5rem) 0px; }
.content-layout { align-items: flex-start; }
.content-column { min-width: 0px; }
.content-column > :last-child, .sidebar-column > :last-child { margin-bottom: 0px; }
.sidebar-column { margin-top: 2rem; padding: 1.4rem; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface-soft); box-shadow: var(--shadow); }
.sidebar-column h1, .sidebar-column h2, .sidebar-column h3 { font-size: 1.5rem; }
.sidebar-column p, .sidebar-column li, .sidebar-column td { line-height: 1.5; }
.sidebar-column .login ul.menu { flex-direction: column; }
.button, button.btn, .btn { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0.7rem 1.15rem; border: 0px; border-radius: 999px; color: var(--color-white); background: var(--color-secondary); font-weight: 600; text-decoration: none; cursor: pointer; }
.button:hover, button.btn:hover, .btn:hover { color: var(--color-white); background: var(--color-primary); }
.site-footer { margin-top: 1rem; padding: 1.5rem 0px; border-top: 1px solid var(--color-border); background: var(--color-surface); }
.footer-navigation ul.menu { justify-content: center; margin-bottom: 1rem; }
.footer-meta { display: flex; gap: 1rem; justify-content: space-between; align-items: center; color: var(--color-muted); font-size: 0.95rem; }
.footer-meta p { margin: 0px; }
.to-top { white-space: nowrap; }
@media screen and (min-width: 64em) {
  .has-sidebar .content-column { padding-right: clamp(2rem, 5vw, 4.5rem); }
  .sidebar-column { margin-top: 0px; }
  .no-sidebar .content-column { max-width: 52rem; margin-right: auto; margin-left: auto; }
}
@media screen and (max-width: 39.9988em) {
  body { font-size: 1rem; }
  .site-header { padding-top: 0.75rem; }
  .brand { margin-bottom: 0.75rem; }
  .footer-meta { flex-direction: column; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, ::before, ::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}

/* Hauptnavigation: waagerecht auf Tablets und Desktop */
@media screen and (min-width: 40em) {
  .main-navigation > ul.mod-menu {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    background: transparent;
  }

  .main-navigation > ul.mod-menu > li {
    position: relative;
    margin: 0;
  }

  .main-navigation > ul.mod-menu > li > a {
    display: flex;
    align-items: center;
    min-height: 3.25rem;
    padding: 0.75rem 1rem;
    color: var(--color-secondary);
    font-family: "Barlow Semi Condensed", sans-serif;
    font-size: 1.05rem;
    font-weight: 400;
    text-decoration: none;
    white-space: nowrap;
  }

  .main-navigation > ul.mod-menu > li > a:hover,
  .main-navigation > ul.mod-menu > li.active > a,
  .main-navigation > ul.mod-menu > li.current > a {
    color: var(--color-primary);
    background: rgba(136, 0, 0, 0.05);
  }

  .main-navigation .mod-menu__sub {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    min-width: 15rem;
    margin: 0;
    padding: 0.5rem 0;
    border: 1px solid var(--color-border);
    border-radius: 0 0 var(--radius) var(--radius);
    background: var(--color-white);
    box-shadow: var(--shadow);
    list-style: none;
  }

  .main-navigation li:hover > .mod-menu__sub,
  .main-navigation li:focus-within > .mod-menu__sub {
    display: block;
  }

  .main-navigation .mod-menu__sub a {
    display: block;
    padding: 0.6rem 1rem;
    text-decoration: none;
    white-space: nowrap;
  }
}


/* Hauptnavigation: waagerecht auf Tablets und Desktop */
@media screen and (min-width: 40em) {
  .main-navigation > ul.mod-menu {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    background: transparent;
  }

  .main-navigation > ul.mod-menu > li {
    position: relative;
    margin: 0;
  }

  .main-navigation > ul.mod-menu > li > a {
    display: flex;
    align-items: center;
    min-height: 3.25rem;
    padding: 0.75rem 1rem;
    color: var(--color-secondary);
    font-family: "Barlow Semi Condensed", sans-serif;
    font-size: 1.05rem;
    font-weight: 400;
    text-decoration: none;
    white-space: nowrap;
  }

  .main-navigation > ul.mod-menu > li > a:hover,
  .main-navigation > ul.mod-menu > li.active > a,
  .main-navigation > ul.mod-menu > li.current > a {
    color: var(--color-primary);
    background: rgba(136, 0, 0, 0.05);
  }

  .main-navigation .mod-menu__sub {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    min-width: 15rem;
    margin: 0;
    padding: 0.5rem 0;
    border: 1px solid var(--color-border);
    border-radius: 0 0 var(--radius) var(--radius);
    background: var(--color-white);
    box-shadow: var(--shadow);
    list-style: none;
  }

  .main-navigation li:hover > .mod-menu__sub,
  .main-navigation li:focus-within > .mod-menu__sub {
    display: block;
  }

  .main-navigation .mod-menu__sub a {
    display: block;
    padding: 0.6rem 1rem;
    text-decoration: none;
    white-space: nowrap;
  }
}