:root {
  color-scheme: light;
  font-family: Arial, Helvetica, sans-serif;
  color: #3d3d3d;
  background: #d8d8d8 url('/fileadmin/layout/img/page-bg.png') repeat-x top;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; }

body { background: transparent; font-size: 13px; line-height: 1.55; }

a { color: #0877bd; text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }

#mainarea {
  width: 984px;
  margin: 22px auto;
  background: url('/fileadmin/layout/img/mainarea-center-bg.png') repeat-y;
  box-shadow: 0 2px 15px rgba(0,0,0,.28);
}

#mainarea-top {
  height: 32px;
  background: url('/fileadmin/layout/img/mainarea-top-bg.png') no-repeat;
}

#mainarea-header {
  position: relative;
  width: 940px;
  height: 113px;
  margin: 0 22px;
  background: url('/fileadmin/layout/img/mainarea-header-overlay-bg.jpg') center center / cover no-repeat;
  overflow: hidden;
}

.header-overlay {
  position: absolute;
  inset: 0;
  background: url('/fileadmin/layout/img/mainarea-header-overlay.png') center center / 100% 113px no-repeat;
  pointer-events: none;
}

.home-link { position: absolute; inset: 0; z-index: 1; }

.service-navigation {
  position: absolute;
  z-index: 2;
  right: 12px;
  bottom: 5px;
  display: flex;
  gap: 12px;
  font-size: 11px;
}

.service-navigation a { color: #fff; }

#mainarea-center { display: flex; min-height: 560px; padding: 16px 22px 22px; }

#mainarea-left { width: 236px; padding: 8px 11px; flex: 0 0 auto; }

.main-navigation {
  background: url('/fileadmin/layout/img/menu-center-bg.png') repeat-y;
  padding: 4px 12px 8px;
  border-radius: 3px;
}

.main-navigation ul { margin: 0; padding: 0; list-style: none; }
.main-navigation ul ul { margin-left: 14px; }

.main-navigation details > summary {
  position: relative;
  display: flex;
  align-items: flex-start;
  padding: 5px 7px 5px 2px;
  color: #4b4b4b;
  border-bottom: 1px solid rgba(255,255,255,.65);
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.main-navigation details > summary::-webkit-details-marker { display: none; }

.main-navigation details > summary::before {
  content: '\25B6';
  flex: 0 0 15px;
  margin: 6px 0 0 2px;
  color: #0877bd;
  font-size: 9px;
  line-height: 16px;
  transition: transform .15s ease;
}

.main-navigation details[open] > summary::before { transform: rotate(90deg); }
.main-navigation details > summary:hover { color: #0877bd; }
.main-navigation .tree-overview > a { font-style: italic; }
.main-navigation details > summary:focus-visible {
  outline: 2px solid rgba(8, 119, 189, .45);
  outline-offset: 1px;
}

.main-navigation a {
  position: relative;
  display: block;
  padding: 5px 7px 5px 22px;
  color: #4b4b4b;
  border-bottom: 1px solid rgba(255,255,255,.65);
}

.main-navigation a::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 7px;
  width: 15px;
  height: 16px;
  background: url('/fileadmin/layout/img/menu-icon-l1-inactive.gif') no-repeat;
}

.main-navigation li.active > a,
.main-navigation li.current > a {
  color: #0877bd;
  font-weight: bold;
}

.main-navigation li.active > a::before,
.main-navigation li.current > a::before {
  background-image: url('/fileadmin/layout/img/menu-icon-l1-active.gif');
}

#mainarea-right {
  width: 704px;
  min-height: 560px;
  padding: 28px 34px 38px;
  background: #fff url('/fileadmin/layout/img/mainarea-right-content-bg.jpg') right top no-repeat;
}

h1, h2, h3 {
  color: #0877bd;
  font-weight: normal;
  line-height: 1.25;
}

h1 { margin: 0 0 18px; padding: 5px 0 8px; font-size: 25px; border-bottom: 1px solid #c9c9c9; }
h2 { margin: 24px 0 10px; font-size: 19px; }
h3 { margin: 18px 0 8px; font-size: 16px; }

img { max-width: 100%; height: auto; }

.migrated-block {
  clear: both;
  margin: 0 0 24px;
  overflow: hidden;
}

.migrated-block p { margin: 0 0 10px; }

.migrated-media-grid,
.migrated-gallery,
.reference-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 14px 0 22px;
}

.migrated-media-grid figure,
.migrated-gallery figure,
.reference-card {
  margin: 0;
  padding: 8px;
  border: 1px solid #d4d4d4;
  background: rgba(255, 255, 255, .8);
}

.migrated-media-grid img,
.migrated-gallery img,
.reference-card img {
  display: block;
  width: 100%;
  max-height: 330px;
  object-fit: contain;
}

.migrated-media-grid figcaption {
  padding-top: 6px;
  color: #666;
  font-size: 11px;
}

.migrated-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.reference-card h2 { margin: 10px 0 8px; font-size: 16px; }
.reference-card details { margin-top: 8px; }
.reference-card summary { color: #0877bd; cursor: pointer; }

.section-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.section-links a {
  display: block;
  padding: 11px 13px;
  border: 1px solid #c9c9c9;
  background: rgba(255, 255, 255, .75);
}

.download a::before { content: '↓ '; }

#mainarea-right form {
  max-width: 620px;
  margin-top: 20px;
}

#mainarea-right form .form-group,
#mainarea-right form .mb-3 {
  margin-bottom: 15px;
}

#mainarea-right form label,
#mainarea-right form legend {
  display: block;
  margin-bottom: 5px;
  color: #3d3d3d;
  font-weight: bold;
}

#mainarea-right form input[type='text'],
#mainarea-right form input[type='email'],
#mainarea-right form input[type='tel'],
#mainarea-right form select,
#mainarea-right form textarea {
  width: 100%;
  padding: 8px 9px;
  border: 1px solid #bcbcbc;
  border-radius: 2px;
  background: #fff;
  color: #333;
  font: inherit;
}

#mainarea-right form textarea { resize: vertical; }

#mainarea-right form input:focus,
#mainarea-right form select:focus,
#mainarea-right form textarea:focus {
  border-color: #0877bd;
  outline: 2px solid rgba(8, 119, 189, .18);
}

#mainarea-right form .form-check,
#mainarea-right form .checkbox {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 16px 0;
}

#mainarea-right form .form-check label,
#mainarea-right form .checkbox label {
  margin: 0;
  font-weight: normal;
}

#mainarea-right form button[type='submit'],
#mainarea-right form input[type='submit'] {
  padding: 9px 18px;
  border: 0;
  border-radius: 2px;
  background: #0877bd;
  color: #fff;
  font: inherit;
  font-weight: bold;
  cursor: pointer;
}

#mainarea-right form button[type='submit']:hover,
#mainarea-right form button[type='submit']:focus,
#mainarea-right form input[type='submit']:hover,
#mainarea-right form input[type='submit']:focus {
  background: #065f98;
}

#mainarea-bottom {
  min-height: 40px;
  padding: 11px 32px 8px;
  color: #777;
  font-size: 10px;
  background: url('/fileadmin/layout/img/mainarea-bottom-bg.png') no-repeat;
}

@media (max-width: 1020px) {
  #mainarea { width: calc(100% - 24px); margin: 12px; background: #eee; }
  #mainarea-top { display: none; }
  #mainarea-header { width: calc(100% - 24px); margin: 12px; background-position: center; }
  #mainarea-center { padding: 0 12px 16px; }
  #mainarea-left { width: 220px; }
  #mainarea-right { width: calc(100% - 220px); }
  #mainarea-bottom { background-size: 100% 100%; }
}

@media (max-width: 720px) {
  #mainarea-header { height: 90px; }
  .header-overlay { background-size: auto 90px; background-position: right center; }
  #mainarea-center { display: block; }
  #mainarea-left, #mainarea-right { width: 100%; }
  #mainarea-left { padding: 0 0 12px; }
  #mainarea-right { min-height: 0; padding: 24px 20px; }
  .migrated-media-grid,
  .migrated-gallery,
  .reference-grid,
  .section-links { grid-template-columns: 1fr; }
}