@font-face {
 font-family: Oswald;
 src: url('/fonts/oswald-v47-latin-400.woff2');
}
@font-face {
 font-family: Roboto;
 src: url('/fonts/roboto-v30-latin-regular.woff2');
}
@font-face {
 font-family: Roboto;
 font-weight: bold;
 src: url('/fonts/roboto-v30-latin-700.woff2');
}

:root {
 --menu-fg: #FFF;
 --menu-bg: #B23133;
 --nav-bg: #FFE8C7;
 --spec-txt: #248;
 --topnbtm-bg: linear-gradient(to bottom, #600 0%, #C24143 2%, #A22123 98%, #600 100%);
 --hdr-shad: drop-shadow(.1875rem .1875rem .125rem rgba(0,0,0,.5));
}



/* gemeinsame formatierungen (muessen als erstes stehen) */
* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 font-family: Roboto;
}
body {
 display: flex;
 flex-flow: row-reverse wrap;
 line-height: 1.6;
 background: #BB9;
 max-width: 61.25rem;
 margin: 0 auto;
 box-shadow: 0 0 1rem #333;
 -webkit-tap-highlight-color: transparent;
}
table {
 border-spacing: 0;
}
p {
 margin: 0 0 1rem;
}
th, td {
 text-align: left;
 vertical-align: top;
}
select,
textarea,
input[type="text"],
input[type="number"] {
  padding: .4rem;
  border: 1px solid #74A8DB;
  border-radius: 4px;
  font-size: 1rem;
  background: white;
  transition: border-color .3s;
  font-family: inherit;
  &:focus {
    outline: none;
    border-color: #3498DB;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, .1);
  }
  &:disabled {
    background: #F5F5F5;
    opacity: .5;
  }
}
input[type="checkbox"],
input[type="radio"] {
  margin-right: .5rem;
}
option {
  font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, Cantarell;
}
button {
  flex: 1;
  font-size: 1rem;
  padding: .3rem;
  cursor: pointer;
  color: #FFF;
  letter-spacing: 1px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .7);
  background: var(--spec-txt);
  border: 1px solid #555;
  border-radius: 4px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .25),
    0 1px 0 rgba(255, 255, 255, .25) inset,
    0 0 0 rgba(0, 0, 0, .5) inset,
    0 1.25rem 0 rgba(255, 255, 255, .08) inset,
    0 -1.25rem 1.25rem rgba(0, 0, 0, .3) inset,
    0 1.25rem 1.25rem rgba(255, 255, 255, .1) inset;
  transition: all 160ms linear 0s;
}
button:hover {
  box-shadow:
    0 2px 5px rgba(0, 0, 0, .5),
    0 1px 0 rgba(255, 255, 255, .25) inset,
    0 0 0 rgba(0, 0, 0, .25) inset,
    0 20px 0 rgba(255, 255, 255, .03) inset,
    0 -20px 20px rgba(0, 0, 0, .15) inset,
    0 20px 20px rgba(255, 255, 255, .05) inset;
}
button:disabled {
  background-color: #AAA;
  box-shadow: none;
  cursor: default;
}
a {
 outline: none;
}
a:link, a:visited, a:active {
 color: var(--spec-txt);
}
a:hover {
 color: #A00;
}
a.btn {
 display: block;
 font-family: Oswald;
 font-size: 1.4rem;
 line-height: 1.2;
 text-decoration: none;
 white-space: nowrap;
 width: fit-content;
 margin: 0 auto .25rem;
 color: var(--menu-bg);
} a.download { color: #008400; } a.order { color: #C11; } a.customers { color: #11C; }
a.btn::after {
 display: block;
 content: '';
 height: .125rem;
 background: currentColor;
 transform: scaleX(0);
 transition: all 180ms ease-in-out;
}
a.btn:hover::after {
 transform: scaleX(1);
}
a.pgmscr {
 display: block;
}
a.pgmscr img {
 width: 9.6875rem;
 height: 6.6875rem;
 border: .0625rem solid #888;
 border-radius: .3rem;
 transition: all 140ms ease-in-out;
}
a.pgmscr:hover img {
 transform: scale(1.02);
 box-shadow: 0 0 .375rem #666;
}
article a.pgmscr {
 float: left;
 margin: .3125rem 1rem .3125rem 0;
}
h1, h2 {
 font-weight: normal;
 line-height: 1.4;
 color: var(--spec-txt);
}
h1 {
 font-size: 1.2rem;
 border-bottom: .0625rem solid var(--spec-txt);
 margin: .8rem 0 2.6rem;
}
h2 {
 font-family: Oswald;
 font-size: 1.6rem;
 margin: 2.6rem 0 1.3rem;
}
h2.sep {
 border-radius: .5rem;
 padding: 0 .6rem;
 margin-top: 4rem;
 background: linear-gradient(to bottom, #E6EFFF, #FFF);
}
aside {
 line-height: 1.4;
 text-align: center;
 border-radius: .5rem;
 padding: .625rem;
 margin: 0 0 2.5rem;
 background: #F6F6F6;
 box-shadow: 0 0 .3rem #333;
}
aside li {
 margin: 1rem 0 0;
}
hr {
 height: 9rem;
 border: 0;
 background: center no-repeat url('/img/hr.webp');
}
ul {
 list-style: none;
}
article li {
 padding: 0 0 1rem 0;
 text-indent: -1.5rem;
 margin-left: 1.5rem;
}
article li::before {
 content: '\2756';
 color: var(--spec-txt);
 margin-right: 0.6rem;
}
.attention {
 font-weight: bold;
 color: #F00;
}
.hybrid {
 display: flex;
 flex-flow: column;
 gap: 1rem;
}
.hybrid > *:first-child {
 flex: 0%;
}
.advantage {
 color: var(--spec-txt);
}
.advantage::before {
 content: '\2714';
 font-weight: bold;
 color: #0A0;
 margin-right: .5rem;
}
iframe.bargen {
 width: 100%;
 height: 0;
 border: .0625rem solid #CCC;
 border-radius: .5rem;
}
pre {
 white-space: pre-wrap;
 word-break: break-word;
}
code {
 display: block;
 font-weight: bold;
 padding: .5rem;
 margin: .625rem 0;
 background: #F1F5F9;
 border: .0625rem solid #CBD5E1;
 border-radius: .5rem;
 color: var(--spec-txt);
}
.xmlk {
 font-weight: bold;
 color: var(--menu-bg);
}
.xmlv {
 color: #000;
}
.xmlg {
 color: #282;
}
.realtable {
 width: 100%;
}
.realtable th, .realtable td {
 padding: .1875rem .5rem;
 border-bottom: solid .0625rem #BBB;
}
.realtable th:first-child, .realtable td:first-child { padding-left: 0; }
.realtable th:last-child, .realtable td:last-child { padding-right: 0; }



/* main-seite */
#home {
 display: flex;
 flex-flow: wrap;
 gap: 2rem 0;
}
#home div {
 flex: 1;
 text-align: center;
 min-width: 20rem;
}
#home svg {
 display: block;
 width: 13.8rem;
 height: 5.5rem;
 margin: 0 auto;
 filter: drop-shadow(0 0 .2rem rgba(0,0,0,.4));
}
#home span {
 display: inline-block;
 font-family: Oswald;
 font-size: 1.6rem;
 padding: .3rem 0 0;
}



/* skeleton-formatierungen */
header {
 display: flex;
 flex: 100%;
 position: sticky;
 top: 0;
 height: 5.625rem;
 background: var(--topnbtm-bg);
}
header a {
 flex: 0%;
 padding: 3.5rem .5rem;
 background: .5rem .7rem / 16.8rem 2.5rem no-repeat url('/img/vwsoft.svg');
 filter: var(--hdr-shad);
 font-family: Oswald;
 font-size: 1.1rem;
 text-decoration: none;
 letter-spacing: .003rem;
}
header a::after {
 content: attr(data-addendum);
}
header a:link, header a:visited, header a:active {
 color: var(--menu-fg);
}
nav {
 flex: 0 1 12.5rem;
 display: flex;
 flex-flow: row-reverse;
 background: var(--nav-bg);
 width: 100%;
 height: 100%;
 position: fixed;
 top: 5.625rem;
 overflow: hidden;
 max-height: 0;
 transition: max-height .3s ease-out;
}
main {
 flex: 1;
 background: #FFF;
 padding: 0 .625rem 2rem;
}
footer {
 flex: 100%;
 color: var(--menu-fg);
 background: var(--topnbtm-bg);
 padding: 0 1rem;
 line-height: 2;
 text-align: right;
}



/* navigationsbereich-formatierungen */
nav ul {
 width: 100%;
 padding: 3rem 0 0;
}
nav a {
 display: inline-block;
 text-decoration: none;
 line-height: 2.2;
 border-radius: 0 9rem 9rem 0;
}
nav ul a:hover {
 background: #FFF;
}
nav ul a[aria-current] {
 color: var(--menu-fg);
 background: var(--menu-bg);
}
ul.lvl1 a {
 font-family: Oswald;
 font-size: 1.375rem;
 color: var(--menu-bg);
 padding: 0 1rem;
}
ul.lvl2 {
 padding: .3rem 0 1rem;
}
ul.lvl2 a {
 font-family: Roboto;
 font-size: 1.0625rem;
 padding: 0 .5rem 0 1.5rem;
}
ul.altclr a {
 color: var(--spec-txt);
}
ul.altclr a[aria-current] {
 background: var(--spec-txt);
}



/* Hamburger Icon */
#hamb {
 cursor: pointer;
 padding: 2.625rem 1.25rem;
}
#hamb-line {
 display: block;
 background: var(--menu-fg);
 width: 1.875rem;
 height: .1875rem;
 filter: var(--hdr-shad);
}
#hamb-line::before, #hamb-line::after {
 background: var(--menu-fg);
 content: '';
 width: 100%;
 height: 100%;
 position: absolute;
 transition: all .2s ease-out;
}
#hamb-line::before {
 top: .6875rem;
}
#hamb-line::after {
 top: -.6875rem;
}



/* Toggle Hamburger Icon */
#hamb-checkbox:checked ~ header #hamb-line {
 background: transparent;
}
#hamb-checkbox:checked ~ header #hamb-line::before {
 transform: rotate(-45deg);
 top: 0;
}
#hamb-checkbox:checked ~ header #hamb-line::after {
 transform: rotate(45deg);
 top: 0;
}
#hamb-checkbox:checked ~ nav {
 max-height: 100%;
}



/* slideshow */
figure {
 position: fixed;
 z-index: 1;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 background: rgba(0,0,0,.8);
 cursor: url('/img/i32_navigate_cross.webp'), pointer;
 text-align: center;
 font-size: 1.2rem;
 font-weight: bold;
 color: #FFF;
 padding: 1rem 0 0;
}
figure img {
 display: block;
 max-width: 100%;
 margin: .5rem auto 0;
 animation: zoom .3s;
}
@keyframes zoom {
 from { transform: scale(0); }
 to { transform: scale(1); }
}



/* responsiveness */
@media (max-width: 23.9rem) {
 html { font-size: 4vw; }
}

@media (min-width: 37.5rem) {
 .hybrid {
  flex-flow: row;
 }
 .hybrid > *:nth-child(2) {
  width: 10.9375rem;
 }
 main {
  padding-left: 1rem;
  padding-right: 1rem;
 }
}

@media (min-width: 48rem) {

 header {
  position: unset;
 }
 header a {
  text-align: right;
  background-position: .8rem 1.25rem;
  background-size: 21rem 3.125rem;
  padding: .6rem .8rem;
  font-size: 1.5rem;
  letter-spacing: 0;
 }

 #hamb {
  display: none;
 }

 nav {
  display: unset;
  position: unset;
  height: auto;
  max-height: unset;
  background: linear-gradient(to right, var(--nav-bg) 96%, #FFFFFF 100%);
 }
 nav a {
  line-height: 1.7;
 }

}