:root {
  --bg: #111111;
  --surface: #ffffff;
  --fg: #505050;
  --muted: #7d7d7d;
  --border: #bebebe;
  --accent: #e22523;
  --link: #467aa7;
  --link-hover: #2a5a8a;
  --red-dark: #9f0000;
  --line: rgb(200, 200, 200);
  --font-display: "Trebuchet MS", Arial, Helvetica, sans-serif;
  --font-body: Verdana, Arial, Helvetica, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { font-size: 62.5%; }

body {
  min-width: 920px;
  font-family: var(--font-body);
  font-size: 10px;
  color: var(--fg);
  background: var(--bg) url('../images/body-bg.jpg');
}

a:focus-visible { outline: 2px solid var(--link-hover); outline-offset: 1px; }

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.page-container {
  width: 900px;
  margin: 5px auto;
  border: 1px solid rgb(150, 150, 150);
  background: var(--surface);
}

.ticker { height: 18px; overflow: hidden; background: #e9e9eb; display: flex; align-items: center; }
.ticker-track {
  display: flex;
  flex: 0 0 auto;
  width: max-content;
  white-space: nowrap;
  animation: ticker-scroll 90s linear infinite;
}
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-run { display: flex; align-items: center; gap: 10px; padding-right: 10px; font-size: 11px; line-height: 18px; }
.ticker-run .sep { color: #999999; }
.ticker-run a { color: #000000; font-weight: bold; text-decoration: none; }
.ticker-run a:hover { text-decoration: underline; }
.ticker-run .credit { color: #000000; }
.ticker-run .credit a { font-weight: normal; }
@keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .ticker { overflow-x: auto; }
  .ticker-track { animation: none; }
}

.header { width: 900px; font-family: var(--font-display); }
.header-top { position: relative; width: 900px; height: 80px; background: rgb(230, 230, 230) url('../images/header-top.jpg'); }
.header-middle { width: 900px; height: 150px; background: rgb(230, 230, 230); }
.header-middle img { display: block; width: 100%; height: auto; }
.header-bottom { width: 900px; background: var(--surface) url('../images/header-menu.jpg') repeat-y; }

.sitename { position: absolute; top: 0; left: 0; padding: 25px 20px 0 30px; }
.sitename .site-title { font-size: 220.01%; font-weight: bold; }
.sitename a { color: var(--muted); text-decoration: none; }
.sitename a:hover { color: rgb(50, 50, 50); }

.navi { width: 900px; background: rgb(220, 220, 220) url('../images/header-bottom-nav.jpg') repeat-x; font-size: 130%; }
.navi ul { display: flex; list-style: none; }
.navi li { position: relative; border-right: 1px solid rgb(175, 175, 175); }
.navi li > a {
  display: block;
  height: 40px;
  line-height: 40px;
  padding: 0 16px;
  font-weight: bold;
  color: rgb(100, 100, 100);
  text-decoration: none;
}
.navi li:hover > a { background-color: rgb(210, 210, 210); }
.navi li > ul {
  display: none;
  position: absolute;
  top: 40px;
  left: -1px;
  z-index: 50;
  min-width: 170px;
  background: rgb(237, 237, 237);
  border: 1px solid rgb(175, 175, 175);
}
.navi li:hover > ul,
.navi li:focus-within > ul { display: block; }
.navi li > ul > li { border-right: 0; }
.navi li > ul > li > a {
  display: block;
  height: auto;
  line-height: 1.3em;
  padding: 5px 16px;
  font-size: 13px;
  font-weight: normal;
  color: rgb(50, 50, 50);
  border-bottom: 1px solid rgb(175, 175, 175);
}
.navi li > ul > li > a:hover { background-color: rgb(210, 210, 210); }

.header-breadcrumbs {
  clear: both;
  width: 900px;
  padding: 1em 0 1.5em;
  background: var(--surface) url('../images/header-breadcrumbs.jpg') repeat-y;
}

.main {
  clear: both;
  display: flex;
  align-items: flex-start;
  width: 900px;
  padding-bottom: 20px;
  background: url('../images/main-bg-withnav.jpg') repeat-y top left;
}
.main a { color: var(--link); font-weight: bold; text-decoration: none; }
.main a:hover { color: var(--link-hover); text-decoration: underline; }

.main-navigation { flex: 0 0 200px; width: 200px; }
.main-navigation .nav-heading {
  clear: both;
  margin: 30px 0 20px;
  padding: 4px 20px 3px;
  background: var(--border);
  font-family: var(--font-display);
  font-size: 150%;
  font-weight: bold;
  color: var(--surface);
}
.main-navigation .nav-heading.first { margin: 0; }

.nav3-bullet { width: 170px; margin: 10px 0 0 20px; border-bottom: 1px solid var(--line); }
.nav3-bullet dt a {
  display: block;
  min-height: 2em;
  line-height: 2em;
  padding-left: 10px;
  border-top: 1px solid var(--line);
  background: url('../images/bullet-full-1.gif') no-repeat 0 50%;
  color: var(--link);
  font-size: 120%;
  font-weight: bold;
  text-decoration: none;
}
.nav3-bullet dd a {
  display: block;
  min-height: 1.7em;
  line-height: 1.7em;
  margin-left: 15px;
  padding-left: 9px;
  background: url('../images/bullet-half-1.gif') no-repeat 0 50%;
  color: var(--link);
  font-size: 120%;
  font-weight: normal;
  text-decoration: none;
}
.nav3-bullet dt a:hover { background-image: url('../images/bullet-full-2.gif'); color: var(--link-hover); text-decoration: underline; }
.nav3-bullet dd a:hover { background-image: url('../images/bullet-half-2.gif'); color: var(--link-hover); text-decoration: underline; }
.nav3-bullet .left_shop { color: var(--accent); font-size: 11pt; }
.nav3-bullet .left_shop:hover { color: var(--accent); }

.sidebar-block { text-align: center; }
.sidebar-block img { display: block; margin: 0 auto 8px; }
.sidebar-block p { margin: 0 10px; font-size: 110%; line-height: 1.3em; overflow-wrap: break-word; }

#Counter {
  text-align: center;
  color: rgb(80, 80, 80);
  font-family: var(--font-body);
  font-size: 110%;
  line-height: 1.3em;
}
#Counter .counter-note { display: block; margin-top: 4px; color: var(--muted); font-size: 90%; }

.main-content { flex: 0 0 680px; width: 680px; margin-left: 20px; }

.column1-unit { width: 650px; margin-bottom: 10px; }

.page-heading {
  width: 600px;
  margin: 0 auto 12px;
  padding: 5px 10px 4px;
  background: var(--border);
  font-family: var(--font-display);
  font-size: 150%;
  font-weight: bold;
  line-height: 1.25em;
  color: var(--surface);
}

.news-frame { width: 600px; margin: 0 auto; border: 2px solid var(--accent); background: var(--surface); }
.news-divider { height: 12px; background: url('../images/divider-line.gif') repeat-x left center; background-size: auto 12px; }
.news-item { padding: 14px 18px 16px; border-bottom: 1px solid rgb(225, 225, 225); }
.news-item:last-of-type { border-bottom: 0; }
.news-item h2 { margin: 0 0 3px; font-family: var(--font-display); font-size: 150%; font-weight: bold; line-height: 1.25em; color: rgb(80, 80, 80); }
.news-item h2 a { color: inherit; text-decoration: none; }
.news-item h2 a:hover { color: var(--accent); }
.news-item .date { margin: 0 0 8px; color: var(--muted); font-size: 100%; }
.news-item p { margin: 0 0 8px; font-size: 110%; line-height: 1.4em; color: var(--fg); }
.news-item a { color: var(--link); }
.news-item p.warn { color: var(--red-dark); font-weight: bold; }
.news-item p.links { color: var(--muted); font-size: 100%; }
.news-item p.signatur { color: var(--muted); font-style: italic; }
.news-item ul { margin: 0 0 10px 16px; font-size: 110%; line-height: 1.4em; color: var(--fg); }
.news-item li { margin-bottom: 3px; }
.news-item img { display: block; max-width: 100%; height: auto; margin: 10px 0; border: 1px solid var(--border); }
.news-item blockquote { margin: 0 0 10px; padding: 8px 14px; border-left: 3px solid var(--border); color: var(--muted); font-size: 110%; font-style: italic; line-height: 1.4em; }

.news-item ul.termine { margin-left: 0; list-style: none; }
.news-item ul.termine li { display: flex; gap: 10px; padding: 3px 0; border-top: 1px solid rgb(232, 232, 232); }
.news-item ul.termine .t-date { flex: 0 0 120px; color: rgb(80, 80, 80); font-weight: bold; }
.news-item ul.ranglisten { display: flex; flex-wrap: wrap; gap: 6px; margin-left: 0; list-style: none; }
.news-item ul.ranglisten li { margin: 0; }

.adresse { margin: 0 0 10px; padding-left: 11px; font-size: 110%; font-style: normal; line-height: 1.45em; color: var(--fg); }
.adresse.center { padding-left: 0; text-align: center; }
.adresse a { color: var(--link); font-weight: bold; text-decoration: none; }
.adresse a:hover { color: var(--link-hover); text-decoration: underline; }

.pending { color: var(--muted); border-bottom: 1px dashed var(--border); cursor: help; }

.web-artikel { width: 678px; margin-bottom: 10px; }
.web-artikel-unitborder { width: 650px; padding: 10px 0 5px; border: 1px solid var(--border); background: rgb(238, 238, 240); }
.web-artikel h1,
.web-artikel h2.web-artikel-title {
  clear: both;
  padding: 4px 10px 3px;
  background: var(--border);
  font-family: var(--font-display);
  font-size: 150%;
  font-weight: bold;
  color: var(--surface);
}
.web-artikel p { margin: 5px 0; padding: 0 11px; font-size: 110%; line-height: 1.35em; color: var(--fg); }
.web-artikel p.center { text-align: center; }
.web-artikel p.rot { text-align: center; color: #ff0000; font-size: 14pt; }
.web-artikel p.gross { margin-top: 15px; text-align: center; font-size: 18pt; }
.web-artikel a { color: var(--link); font-weight: bold; text-decoration: none; }
.web-artikel a:hover { color: var(--link-hover); text-decoration: underline; }

.clear-contentunit { clear: both; width: 680px; height: 0.1em; border: none; }

.footer { clear: both; width: 900px; padding: 1em 0; background: rgb(225, 225, 225) url('../images/footer-bg.jpg') no-repeat; }
.footer p { text-align: center; color: var(--muted); font-size: 110%; font-weight: bold; line-height: 1.3em; }

.navi-burger { display: none; }

@media (max-width: 919px) {
  .navi { position: relative; }

  .navi-burger {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 46px;
    padding: 0 14px;
    border: 0;
    border-bottom: 1px solid rgb(175, 175, 175);
    background: rgb(220, 220, 220) url('../images/header-bottom-nav.jpg') repeat-x;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: bold;
    line-height: 1;
    color: rgb(100, 100, 100);
    text-align: left;
    cursor: pointer;
  }
  .navi-burger:hover,
  .navi-burger:focus-visible { color: rgb(40, 40, 40); }

  .navi-burger-icon {
    position: relative;
    display: block;
    flex: 0 0 auto;
    width: 22px;
    height: 16px;
  }
  .navi-burger-icon span,
  .navi-burger-icon::before,
  .navi-burger-icon::after {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: currentColor;
    transition: top 0.18s ease, transform 0.18s ease, opacity 0.18s ease;
  }
  .navi-burger-icon::before { content: ""; top: 0; }
  .navi-burger-icon span { top: 7px; }
  .navi-burger-icon::after { content: ""; top: 14px; }

  .navi-burger[aria-expanded="true"] .navi-burger-icon::before { top: 7px; transform: rotate(45deg); }
  .navi-burger[aria-expanded="true"] .navi-burger-icon span { opacity: 0; }
  .navi-burger[aria-expanded="true"] .navi-burger-icon::after { top: 7px; transform: rotate(-45deg); }

  .navi ul { display: none; }
  .navi.navi-open ul { display: block; }

  .navi li > ul {
    display: block;
    position: static;
    top: auto;
    left: auto;
    min-width: 0;
    border: 0;
    background: rgb(245, 245, 245);
  }
}

@media (prefers-reduced-motion: reduce) {
  .navi-burger-icon span,
  .navi-burger-icon::before,
  .navi-burger-icon::after { transition: none; }
}