diff --git a/static/css/vanilla_burner.css b/static/css/vanilla_burner.css deleted file mode 100644 index 60d0600..0000000 --- a/static/css/vanilla_burner.css +++ /dev/null @@ -1,589 +0,0 @@ -*, *::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; - } -}