#top                    { width: 100%; overflow-x: hidden; }

/* ---- HEADER ---- */
#header                 { position: relative; z-index: 30; padding: 16px 16px 0 16px; }
#header nav             { position: fixed; top: 0; left: -110vw; width: 100vw; bottom: 0; overflow-y: auto; text-align: left; }
#header nav             { background: var(--color-main); color: #fff; z-index: 2000; padding: 30px; box-sizing: border-box; }
#header nav             { transition: left 0.3s ease-in-out; }
#header nav.open        { left: 0;}
#header .fa-times        { position: absolute; top: 30px; right: 30px; font-size: 26px; display: block; }
#header .topbar li a    { color: #fff; }
#header .topbar nav li  { display: block; }
#header .topbar .right ul   { display: none; }
#header .fa-bars            { display: inline-block; font-size: 26px; position: absolute; top: 50%; left: 30px; transform: translateY(-50%); }
#header .topbar .logo   { position: relative; top: auto; left: auto; display: inline-block; vertical-align: middle; }
#header .topbar .right  { margin-top: 1px; }
#header .topbar .button { font-size: 0; background: none; }
#header .topbar .button:before { content: '\f0e0'; font: bold 30px/48px 'Font Awesome 6 Free'; color: var(--color-main); }
#header .top            { font-size: 32px;}

#header .visual .sub       { font-size: 16px;}
#header .visual .facts     { display: block; margin-top: 24px; }
#header .visual .facts li  { display: block; margin-bottom: 16px; font-size: 8px; }
#header .visual .facts p  { font-size: 14px; }

/* ---- MAIN ---- */
#main .wedo             { display: block;}
#main .wedo ul          { display: block; }
#main .wedo li          { margin-bottom: 30px; }
#main .wedo a           { height: auto; }

#main .list ul          { display: block; }
#main .list li          { display: block; }
#main .list figure      { margin-bottom: 20px; }
#main .list .txt        { margin-bottom: 50px; }
#main .list h3          { font-size: 40px; word-wrap: break-word }

#main .services ul      { display: block;}
#main .services li      { margin-bottom: 30px; }
#main .split50          { display: block; }
#main .split50 h2       { font-size: 40px; word-wrap: break-word; }
#main .split figure     { display: none; }
#main .split .text      { display: block; width: auto; }
#main .materials h2     { text-align: center;}
#main .split3 li        { text-align: center; }
#main .blue             { font-size: 20px;}
#main .chips            { display: block;}
#main .chips li         { margin-bottom: 30px; }
#main .block h2         { font-size: 34px;}
#main .metal-detail > p     { font-size: 24px; word-break: break-word; }

#main .terms h3         { font-size: 24px;}
#main .terms p          { font-size: 18px; }

#main .services li      { font-size: 20px;}
#main .wedo .name           { font-size: 30px; }


#main .contact          { padding: 20px; }
#main .contact form.active      { display: block; }

#main .materials .split3    { grid-template-columns: 1fr; grid-gap: 30px; }
#main .materials ul         { border-right: none; border-bottom: 1px solid rgba(0,0,0,.2); padding-bottom: 20px; }

#main .materials h2     { font-size: 30px; }
#main .materials li     { margin-bottom: 12px; line-height: 26px; }
#main .materials a      { font-size: 18px; }

#main .ptable           { min-height: 40vh; background-size: 200% auto; }
#main .ptable:after     { height: 50px; }
#main .ptable .video    { max-width: 90vw; height: auto; }
#main .ptable .video    { top: 50%; }

/* Periodensystem erhält Scroll statt Shrink */
#main .ptable .grid,
#main .ptable .periodic,
#main .ptable .table            { max-height:260px; overflow:auto; -webkit-overflow-scrolling:touch; margin-top:16px; }
#main .ptable .grid img,
#main .ptable .periodic img,
#main .ptable .table img        { width:auto; min-width:700px; height:auto; }

/* ---- FOOTER ---- */
#footer .inside         { display: block; text-align: center; }
#footer .logo           { margin: 30px auto; }