mainpage_v2_static/css/vanilla_burner.css

*, *::before, *::after {
 box-sizing: border-box;
}

* {
 margin: 0;
}

body {
 line-height: 1.5;
 -webkit-font-smoothing: antialiased;
}

img, picture, video, canvas, svg {
 display: block;
 max-width: 100%;
}

input, button, textarea, select {
 font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
 overflow-wrap: break-word;
}

#root, #__next {
 isolation: isolate;
}

* {
 font-size: 1.04em;
 letter-spacing: 0.05em;
 font-family: url="font/Gidole-Regular.ttf";
}

:root {
 --ve-light-violett: #A458AE;
 --ve-heavy-violett: #5d2169;
 --ve-vanilla: #faefdd;
 --ve-vanilla-heavy: #e4cba1;
}

@font-face  {
 font-family: "gidole";
 src: url("/fonts/Gidole-Regular.ttf");
}

body {
 width: 100%;
 height: 100vh;
 background-color: var(--ve-vanilla);
 font-family: "Noto Sans", Arial, sans-serif;
 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='380' height='380' viewBox='0 0 800 800'%3E%3Cg fill='none' stroke='%23E4CBA1' stroke-width='1'%3E%3Cpath d='M769 229L1037 260.9M927 880L731 737 520 660 309 538 40 599 295 764 126.5 879.5 40 599-197 493 102 382-31 229 126.5 79.5-69-63'/%3E%3Cpath d='M-31 229L237 261 390 382 603 493 308.5 537.5 101.5 381.5M370 905L295 764'/%3E%3Cpath d='M520 660L578 842 731 737 840 599 603 493 520 660 295 764 309 538 390 382 539 269 769 229 577.5 41.5 370 105 295 -36 126.5 79.5 237 261 102 382 40 599 -69 737 127 880'/%3E%3Cpath d='M520-140L578.5 42.5 731-63M603 493L539 269 237 261 370 105M902 382L539 269M390 382L102 382'/%3E%3Cpath d='M-222 42L126.5 79.5 370 105 539 269 577.5 41.5 927 80 769 229 902 382 603 493 731 737M295-36L577.5 41.5M578 842L295 764M40-201L127 80M102 382L-261 269'/%3E%3C/g%3E%3Cg fill='%2398886B'%3E%3Ccircle cx='769' cy='229' r='5'/%3E%3Ccircle cx='539' cy='269' r='5'/%3E%3Ccircle cx='603' cy='493' r='5'/%3E%3Ccircle cx='731' cy='737' r='5'/%3E%3Ccircle cx='520' cy='660' r='5'/%3E%3Ccircle cx='309' cy='538' r='5'/%3E%3Ccircle cx='295' cy='764' r='5'/%3E%3Ccircle cx='40' cy='599' r='5'/%3E%3Ccircle cx='102' cy='382' r='5'/%3E%3Ccircle cx='127' cy='80' r='5'/%3E%3Ccircle cx='370' cy='105' r='5'/%3E%3Ccircle cx='578' cy='42' r='5'/%3E%3Ccircle cx='237' cy='261' r='5'/%3E%3Ccircle cx='390' cy='382' r='5'/%3E%3C/g%3E%3C/svg%3E");
 background-attachment: fixed;
}

.skiplink {
 border: 0;
 clip: rect(1px,1px,1px,1px);
 clip-path: inset(50%);
 height: 1px;
 margin: -1px;
 overflow: hidden;
 padding: 0;
 position: absolute !important;
 width: 1px;
 word-wrap: normal !important;
}

.skiplink:focus {
 background-color: #eee;
 clip: auto !important;
 clip-path: none;
 color: #444;
 display: block;
 font-size: 1em;
 height: auto;
 left: 5px;
 line-height: normal;
 padding: 15px 23px 14px;
 text-decoration: none;
 top: 5px;
 width: auto;
 z-index: 100000;
}

#outerwrapper {
 max-width: 97%;
 margin: auto;
 border: 1px solid var(--ve-heavy-violett);
}

header {
 height: 100vh;
 max-width: 100%;
 margin: auto;
 padding: 3rem;
 z-index: 1;
 background: url(/images/cover-image.jpg) top center no-repeat;
 background-size: 100%;
 object-fit: cover;
}

header h1, header h4 {
 font-family: "gidole", sans-serif;
 font-weight: 700;
 color: var(--ve-heavy-violett);
 text-wrap: balance;
}

header h1 {
 font-size: calc(3vw + 1.4rem);
 margin-bottom: 0.7em;
}

header h4 {
 font-size: calc(2vw + 1.1rem);
}

header p {
 margin-left: 13vw;
 word-wrap: normal;
}

header p span {
 display: block;
 width: 86%;
 font-size: calc(0.5vw + 1rem);
 background-color: var(--ve-heavy-violett);
 color: var(--ve-vanilla);
 padding: 0.5rem;
}

header p span strong {
 color: var(--ve-vanilla);
}

header img {
 display: block;
 height: calc(7vw + 1.3rem);
 padding-top: 0 !important;
 margin-top: -1rem !important;
}

#header-sm {
 width: 100%;
 height: 200px;
 background: url(/images/cover-image_sm.jpg) center center no-repeat;
}

#header-sm img#logo_sm {
 display: inline;
 height: 6.5rem;
 margin-top: 1rem;
 margin-left: 22rem;
 padding-top: 0.5rem;
}

#header-sm h4 {
 display: inline;
 font-family: "gidole", sans-serif;
 font-size: calc(1vw + 1.1rem);
 font-weight: 700;
 color: var(--ve-heavy-violett);
 text-wrap: balance;
}

#menu__toggle {
 opacity: 0;
}

#menu__toggle:checked + .menu__btn > span {
 transform: rotate(45deg);
}

#menu__toggle:checked + .menu__btn > span::before {
 top: 0;
 transform: rotate(0deg);
}

#menu__toggle:checked + .menu__btn > span::after {
 top: 0;
 transform: rotate(90deg);
}

#menu__toggle:checked ~ .menu__box {
 left: 0 !important;
}

.menu__btn {
 position: fixed;
 top: 50px;
 left: 3.5%;
 width: 40px;
 height: 50px;
 cursor: pointer;
 z-index: 1;
}

.menu__btn > span, .menu__btn > span::before, .menu__btn > span::after {
 display: block;
 position: absolute;
 width: 100%;
 height: 2px;
 background-color: var(--ve-heavy-violett);
 transition-duration: .3s;
}

.menu__btn > span::before {
 content: '';
 top: -8px;
}

.menu__btn > span::after {
 content: '';
 top: 8px;
}

.menu__box {
 display: block;
 position: fixed;
 top: 0;
 left: -100%;
 width: 300px;
 height: 100%;
 margin: 0;
 padding: 110px 35px;
 list-style: none;
 background-color: var(--ve-light-violett);
 box-shadow: 2px 2px 6px rgba(0, 0, 0, .4);
 transition-duration: .3s;
}

.menu__item {
 display: block;
 padding: 12px 24px;
 color: var(--ve-vanilla);
 font-family: "gidole", sans-serif;
 font-size: 20px;
 font-weight: 600;
 text-decoration: none;
 transition-duration: .3s;
}

.menu__item:hover {
 background-color: var(--ve-heavy-violett);
 color: var(--ve-vanilla);
}

aside {
 background-color: var(--ve-light-violett);
 margin-bottom: 0.5rem;
 margin-right: 0.3rem;
 position: sticky;
 top: 5.5rem;
}

aside > nav {
 padding: 0.5rem;
 margin-top: -3.75em;
 background-color: var(--ve-light-violett);
}

aside > nav ul, footer ul {
 padding: 0;
}

aside > nav ul li, footer ul li {
 list-style-type: none;
}

aside > nav ul li a:link, aside > nav ul li a:visited {
 display: block;
 text-decoration: none;
 color: white;
 border: 7px solid var(--ve-light-violett);
 padding: 0.5rem;
}

aside > nav ul li a:hover, aside > nav ul li a:focus {
 border: 7px solid var(--ve-heavy-violett);
 transform: translate(0.15em, 0.15em);
 transition: transform 0.3s ease-out;
}

aside > nav ul li a.active {
 border: 7px solid var(--ve-vanilla);
}

.subnavi {
 margin-left: 2rem;
 font-size: 1.3rem;
}

.content {
 padding: 2rem;
 background-color: var(--ve-light-violett);
}

.content hr {
 margin: 4rem 0;
 clear: both;
}

.content hr.hidden {
 position: relative;
 left: -10000px;
 margin: 2rem 0;
}

.content img {
 margin: 0.5rem 0 1rem 0;
}

.content img#baugruppe_tranz, .content img#baugruppe_ex {
 background-color: var(--ve-vanilla);
}

.content h2, .content h3, .content h4, .content h5, .content h6, .content > #vorteile h2, .content > section h2, .content > section h3 {
 font-family: "gidole", sans-serif;
 margin-bottom: 1rem;
}

.content h2, .content h3, .content > #vorteile h2, .content > section h2, .content > section h3, .accordion ul li h3 {
 font-size: calc(1.5vw + 1.4rem);
}

.content > #vorteile h4 {
 margin-top: 2rem;
 font-size: calc(1.1vw + 1.1rem);
}

.content section {
 margin-bottom: 5rem;
}

.content p {
 margin-bottom: 1.5rem;
}

.content #imp section h2 {
 margin: 5rem 0 0.5rem 0;
}

.content > .attention, .content .accordion {
 background-color: var(--ve-vanilla);
 color: var(--ve-heavy-violett);
 margin-top: 5rem;
 padding: 2rem;
 border: 0.25rem var(--ve-heavy-violett) dashed;
}

.content .violett {
 background-color: var(--ve-light-violett);
 color: var(--ve-vanilla);
 padding: 0 !important;
 border: none !important;
}

.content > ul#vorteile li, .content ul#parts li, .content .prod_info ul li {
 margin-left: -1rem;
}

.content ul#parts li a:link, .content ul#parts li a:visited {
 color: var(--ve-vanilla);
 text-decoration: none;
}

.content dl#vorteile_parts {
 margin-bottom: 3rem;
}

.content dl#vorteile_parts dt {
 margin-top: 3rem;
 font-weight: 700;
}

.content dl#vorteile_parts dd {
 margin: 1rem 0;
}

.content img.prod_pic {
 float: left;
 width: 62%;
 margin-right: 0.5rem;
}

.content .prod_info {
 margin-top: 3rem;
 padding: 0.5rem;
 border: 1px solid var(--ve-vanilla);
}

.content p#gruender-edgar span {
 font-size: calc(3vw + 1.4rem);
}

#bestellung, #eg {
 background-color: var(--ve-vanilla);
 color: var(--ve-heavy-violett);
 padding: 1rem 0.5rem 0 0.5rem;
}

#bestellung a:link, #bestellung a:visited {
 color: var(--ve-heavy-violett);
}

#newsgrid {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 gap: 0.5rem;
}

#newsgrid > article.newsitem:first-child {
 grid-column: 1 / 3;
 background-color: var(--ve-vanilla);
 color: var(--ve-heavy-violett);
 margin-bottom: 1.5rem;
 padding: 2rem;
 border: 0.25rem var(--ve-heavy-violett) dashed;
}

#newsgrid > article.newsitem {
 padding: 0.5rem;
 border: 1px solid var(--ve-heavy-violett);
}

#newsgrid > article.newsitem h3 {
 font-size: calc(1vw + 1.1rem);
}

.main_with_sidebar {
 display: flex;
 flex-wrap: wrap;
 align-items: start;
 gap: 0.2rem;
}

.main_with_sidebar > :first-child {
 flex-basis: 37%;
 flex-grow: 1;
}

main {
 flex-basis: 62%;
 flex-grow: 9999;
 color: var(--ve-vanilla);
}

.wrapper {
 width: 75%;
 max-width: 1326px;
 padding: 0.5rem;
 margin: auto;
}

#contact {
 width: 100%;
 margin-top: 0.5rem;
 padding: 2rem;
 color: var(--ve-vanilla);
 background-color: var(--ve-light-violett);
}

#contact img.icon {
 display: inline;
 float: left;
 margin-right: 0.5rem;
 padding: 0.2rem 0;
 width: 1.5rem;
}

#contact h3 {
 font-size: calc(1.5vw + 1.3rem);
 margin-bottom: 1rem;
}

#contact p a:link, #contact p a:visited, .content p a:link, .content p a:visited {
 color: var(--ve-vanilla);
}

address {
 font-style: normal;
}

footer {
 height: 7rem;
 line-height: 7rem;
 text-align: center;
 color: var(--ve-vanilla);
 background-color: var(--ve-heavy-violett);
}

footer a:link, footer a:visited {
 display: inline;
 text-decoration: none;
 color: var(--ve-vanilla);
}

footer a:hover, footer a:focus {
 text-decoration: underline;
}

@media screen and (max-width: 767px) {
 header {
  padding-right: 0 !important;
 }
 header h4 {
  margin-top: 1rem !important;
  margin-bottom: 2rem;
  font-size: calc(1.5vw + 1.0rem);
 }
 header p {
  margin-left: 0 !important;
 }
 header img {
  margin-bottom: 0 !important;
 }
 #header-sm img#logo_sm {
  display: inline !important;
  margin: 1rem 0 0 3rem;
 }
 #header-sm h4 {
  display: inline !important;
  font-family: "gidole", sans-serif;
  font-size: calc(2vw + 1.1rem);
  font-weight: 700;
  color: var(--ve-heavy-violett);
  text-wrap: balance;
 }
 .content {
  padding: 0.5rem !important;
  margin-right: 0 !important;
 }
 .content h2, .content h3, .content > #vorteile h2, .content > section h2, .content > section h3 {
  font-size: calc(1.3vw + 1.2rem) !important;
 }
 .content > #vorteile {
  margin-top: 3rem !important;
  padding: 0.5rem !important;
 }
 .content hr {
  margin: 2rem 0 !important;
  clear: both;
 }
 #newsgrid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 0.5rem;
 }
 #newsgrid > article.newsitem:first-child {
  grid-column: 1 / 2;
 }
 .wrapper {
  width: 86%;
  margin-left: 2.6rem !important;
 }
 #contact {
  font-size: 1.02rem;
  padding: 0.5rem !important;
 }
 #contact img.icon {
  width: 0.7rem !important;
 }
 footer {
  height: auto !important;
 }
}

@media screen and (max-width: 1199px) {
 aside > #sidebar-menu {
  display: none;
 }
 .hamburger-menu {
  display: inline;
 }
 .main_with_sidebar {
  display: block;
  width: 100%;
  margin: auto;
 }
}

@media screen and (min-width: 1200px) {
 .hamburger-menu {
  display: none;
 }
}