:root { --color-main: #1DA6E4; } @font-face { font-family: 'Inter'; src:url('font/inter/Inter_18pt-Regular.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src:url('font/inter/Inter_18pt-SemiBold.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; } body,div,p,h1,h2,h3,ul,li,figure { margin: 0; padding: 0; } ul { list-style: none; } div { box-sizing: border-box; } body { font: 16px Inter,Arial,sans-serif; color: #000; } .button, button { background: #1DA6E4; border-radius: 8px; text-align: center; padding: 0 20px; line-height: 48px; cursor: pointer; } .button, button { display: inline-block; font-size: 16px; font-weight: 600; color: #fff; text-decoration: none; border: none; } .button i, button i { opacity: 0.7; display: inline-block; margin-right: 10px; } #header { position: relative; z-index: 10; } #main { position: relative; z-index: 20; } form .text { border: 1px solid rgba(221, 221, 221, 1); border-radius: 8px; padding: 0 16px; } form .text { font: 300 16px/56px Inter,Arial,sans-serif; color: rgba(10, 14, 29, 1); } form .w100 { grid-column: 1 / span 2; } form .text:focus { outline-color: rgba(0, 133, 255, 1); } form .submit_div { grid-column: 1 / span 2; text-align: center; margin-top: 32px;} form .captcha { background-position: right center; background-repeat: no-repeat; background-size: auto 100%; } .contact form { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 16px; } .notice form { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 16px; } #header { background: #3790B8; padding: 26px 26px 0 26px; margin-bottom: 100px; } #header .fa-bars { display: none; } #header .fa-times { display: none; } #header .inside { background: #000; border-radius: 37px 37px 0 0; overflow: hidden; position: relative; height: 920px; padding: 23px; } #header .inside .visual { position: absolute; top: 0; left: 0; color: #fff; } #header .inside .visual { bottom: 0; right: 0; z-index: 1; padding-top: 240px; text-align: center; } #header .visual .back { background: #000 url('img/header.jpg') top center no-repeat; opacity: 0.4; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } #header .visual .back { background-size: cover; } #header .visual .sub { position:relative; margin:36px auto 36px; max-width:900px; font-size:24px; font-weight:500; opacity:.9; line-height:1.5; } #header .back { z-index: -1; } #header .contact .back { background-image: url('img/contact.jpg'); } #header .home .back { background-image: url('img/history.png'); } #header .service .back { background-image: url('img/chemie.jpg'); } #header .history .back { background-image: url('img/history.png'); } #header .imprint .back { background-image: url('img/chemie.png'); } #header .alloys .back { background-image: url('img/alloys/ni/Ni-alloy-turnings.jpg'); } #header .metals .back { background-image: url('img/metals/niob/Nb-targets.jpg'); } #header .service .back { background-image: url('img/cutting.jpg'); } #header .certificate .back { background-image: url('img/certificate.jpg'); } #header .contact .back { background-image: url('img/chemie.png'); } #header .notice .back { background-image: url('img/chemie.png'); } #header .gallium .back { background-image: url('img/metals/gallium/CuGa-turnings.jpg'); } #header .precious .back { background-image: url('img/metals/precious/precious-asch.jpg'); } #header .error .back { background-image: url('img/error.png'); } #header .cobalt .back { background-image: url('img/metals/cobalt/Co-briquettes.jpg'); } #header .germanium .back { background-image: url('img/metals/germanium/Ge-chunks.jpg'); } #header .hafnium .back { background-image: url('img/metals/hafnium/Hf-plates.jpg'); } #header .indium .back { background-image: url('img/metals/indium/In-bars-3.jpg'); } #header .molybdenum .back { background-image: url('img/metals/molybdenum/Mo-turnings.jpg'); } #header .nickel .back { background-image: url('img/metals/nickel/Ni-sheets.jpg'); } #header .niob .back { background-image: url('img/metals/niob/Nb-blocks.jpg'); } #header .tantal .back { background-image: url('img/metals/tantal/Ta-solids.jpg'); } #header .titan .back { background-image: url('img/metals/titan/Ti-solids-5.jpg'); } #header .vanadium .back { background-image: url('img/metals/vanadium/V-flakes.jpg'); } #header .tungsten .back { background-image: url('img/metals/tungsten/W-electrodes.jpg'); } #header .co-alloys .back { background-image: url('img/alloys/co/Co-ronden.jpg'); } #header .carbide .back { background-image: url('img/alloys/carbide/carbide-inserts.jpg'); } #header .hss .back { background-image: url('img/alloys/hss/hss-drills.jpg'); } #header .ni-alloys .back { background-image: url('img/alloys/ni/Ni-alloy-3.jpg'); } #header .nb-alloys .back { background-image: url('img/alloys/nb/Nb-Ti-rods.jpg'); } #header .ta-alloys .back { background-image: url('img/alloys/ta/Ta-tophats.jpg'); } #header .w-alloys .back { background-image: url('img/alloys/w/W-alloy-2.jpg'); } #header .sn-alloys .back { background-image: url('img/alloys/sn/Sn-slag.jpg'); } #header .zr-alloys .back { background-image: url('img/alloys/zr/Zr-alloy-3.jpg'); } #header .top { margin-top: 10px; font-size: 80px; font-weight: 700; } #header .contact ul { display: flex; justify-content: center; gap: 100px; list-style: none; margin-top: 180px; font-size: 16px; font-weight: 600; } #header .contact i { margin-right: 10px; color: #0085FF } #header ul.facts { display:grid; grid-template-columns:repeat(3,1fr); gap:60px; list-style:none; max-width:1200px; margin:100px auto 0; padding:0 20px; text-align:left; } #header ul.facts li { position:relative; } #header .facts .no { display:block; font-size:16px; font-weight: 600; margin-bottom: 20px; letter-spacing:2px; opacity:.8; } #header .facts .line { display:block; height:1px; margin:10px 0 20px; background:rgba(255,255,255,0.3); } #header .facts p { margin:0; font-size:16px; font-weight:500; opacity:.9; line-height:1.5; } #header .topbar { background: rgba(255,255,255,0.8); border: 2px solid #fff; border-radius: 12px; position: relative; z-index: 2; } #header .topbar { line-height: 48px; padding: 10px; text-align: center; } #header .topbar nav li { display: inline-block; font-size: 18px; letter-spacing: 2px; text-transform: uppercase; margin: 0 22px; } #header .topbar li a { padding: 0 10px; text-decoration: none; color: #000; } #header .topbar .logo { position: absolute; top: 10px; left: 40px; width: 79px; height: 51px; } #header .topbar .logo { background: url('img/logo.svg') no-repeat; font-size: 0; background-size: cover; } #header .topbar .right { position: absolute; top: 10px; right: 10px; } #header .topbar .right ul { display: inline-block; color: rgba(0,0,0,0.3); margin-right: 15px; } #header .topbar .right li { display: inline-block; margin: 0 10px; } /* ---- MAIN ---- */ #main .block { max-width: 1310px; margin: 0 auto; position: relative; margin-bottom: 50px; overflow: hidden; padding: 0 30px; } #main .block p { padding-bottom: 40px; } #main .block h2 { font-size: 56px; font-weight: 700; display: block; margin-bottom: 50px; color: #303746; } #main .wide { max-width: 100%; text-align: center; } #main .blue { background: #009DE4; color: #fff; padding: 110px 0; font-size: 40px; font-weight: 700; } #main .blue:after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url('img/blue.png') top center no-repeat; } #main .blue:after { z-index: 1; background-size: cover; } #main .blue * { position: relative; z-index: 2; } #main .blue .button { background: #fff; line-height: 72px; border-radius: 8px; padding: 0 60px; color:#303746; font-size: 24px; font-weight: 700; } #main .blue p { max-width: 900px; margin: 0 auto; } #main .contact { overflow: visible; max-width: 1000px; box-sizing: border-box; } #main .contact { background: #fff; padding: 113px; border-radius: 16px; position: relative; top: -300px; box-shadow: 0 0 50px rgba(0, 0, 0, 0.1); } #main .contact button { height: 72px; padding: 0 60px; font-size: 24px; font-weight: 400; } #main .contact form { display: none; padding-bottom: 60px; } #main .contact form.active { display: grid; } #main .contact .tabnav { padding-top: 50px; } #main .notice { overflow: visible; max-width: 1000px; box-sizing: border-box; } #main .notice h2 { text-align: center;} #main .notice { background: #fff; padding: 113px; border-radius: 16px; position: relative; top: -300px; box-shadow: 0 0 50px rgba(0, 0, 0, 0.1); } #main .notice .tabnav { padding-top: 50px; } #main .notice form.mainform { display: block; } #main .notice form.captcha { background-position: right center; background-repeat: no-repeat; background-size: auto 100%; } #main .notice .tabcontent { display: none; padding-bottom: 60px; } #main .notice .tabcontent.active { display: grid; grid-gap: 16px; } #main .notice button { height: 72px; padding: 0 60px; font-size: 24px; font-weight: 400; } #main .split50 { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 135px; } #main .split50 .text { font-size: 18px; font-weight: 300; line-height: 1.2; } #main .ptable { max-width: 100%; background: #fff url('img/ptable.png') center -150px no-repeat; min-height: 700px; background-size: cover; } #main .ptable:after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 150px; background: linear-gradient(to bottom, #fff, transparent); } #main .ptable .video { width: 1320px; height: 470px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 16px; } #main .ptable .video { overflow: hidden; } #main .ptable .video video { width: 100%; } #main .ptable .video .btn { display: block; width: 80px; line-height: 80px; background: var(--color-main); color: #fff; border-radius: 50%; } #main .ptable .video .btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; font-size: 30px; } #main .ptable .video .btn { outline: 15px solid rgba(0, 79, 169, 0.3); cursor: pointer; } #main .tabnav { margin-bottom: 50px; text-align: center; display: block; } #main .tabnav li { display: inline-block; margin: 0 32px; text-transform: uppercase; letter-spacing: 1px; line-height: 50px; cursor: pointer; } #main .tabnav .active { border-bottom: 2px solid rgba(0, 133, 255, 1); } #main .split h2 { font-size: 48px; line-height: 1.2; color: #fff; width: 80%; } #main .split { font-size: 18px; font-weight: 300; text-align: left; } #main .split .inside { max-width: 1310px; margin: 0 auto; padding: 0 30px; } #main .split .text { display: grid; grid-template-columns: 1fr 1.6fr; grid-gap: 80px; width: 70%; line-height: 1.4; } #main .split figure { position: absolute; top: -50%; right: -100px; height: calc(200%); transform: rotate(22deg); width: 400px; overflow: hidden; } #main .split figure img { object-fit: cover; height: 100%; width: auto; } /*#main .split img { clip-path: polygon(40% 0, 95% 0, 58% 100%, 0% 100%); position: absolute; top: -110px; right: -250px; } */ #main .services { color: #303746; } #main .services ul { padding: 40px 0; display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 16px; } #main .services li { border: 1px solid #009DE4; border-radius: 16px; padding: 36px 110px; position: relative; } #main .services li { min-height: 136px; box-sizing: border-box; font-size: 22px; font-weight: 600; color: #22282B; } #main .services img { width: 64px; height: 64px; position: absolute; top: 36px; left: 24px; } /* ÜBERSICHTSSEITE METALS, ALLOYS UND SERVICE */ #main .list ul { display: grid; grid-template-columns: 1fr; grid-row-gap: 80px; } #main .list li { display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 120px; align-items: center; } #main .list li:nth-child(even) a, #main .list li:nth-child(even) figure { order: 2; } #main .list li:nth-child(even) .txt { order: 1; } #main .list img { display: block; } #main .list h3 { font-size: 56px; font-weight: 700; color: #303746; margin-bottom: 12px; } #main .list p { font-size: 18px; font-weight: 400; color: #464F52; line-height: 1.45; } #main .list figure { position: relative; max-height: 300px; border-radius: 16px; overflow: hidden; } #main .list figure img { width: 100%; height: 100%; object-fit: cover; transition: all .3s; } #main .list figure img:hover{ transform: scale(1.05); } #main .list li a[href="/recycling"] figure img { object-fit: cover; height: 100%; } /* PRODUKTSEITE INCL. SWIPER */ #main .chips { display:flex; flex-wrap:wrap; gap:16px 24px; margin-top:24px; } #main .chips li { padding:34px 34px; border:1px solid var(--color-main); border-radius:16px; font-weight:500; font-size: 22px; } #main .gallery { position:relative; } #main .gallery ul { margin:0; padding:0; list-style:none; } #main .gallery .swiper { overflow:visible; cursor: pointer; } #main .gallery .swiper-slide { height:424px; border-radius:16px; background-size:cover; background-position:center; aspect-ratio:1/1; } #main .gallery .nav { position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; } #main .gallery .nav { border-radius:50%; background:#fff; border:1px solid var(--color-main); z-index:5; } #main .gallery .prev { left:-60px; } #main .gallery .next { right:-60px; } #main .gallery .nav i { pointer-events:none; } #main .metal-detail > p { font-size: 32px; } /* GALLERIEBILDER FÜR DETAILSEITEN */ #main .gallery .ga-1 { background-image:url('img/metals/gallium/CuGa-pieces.jpg'); } #main .gallery .ga-2 { background-image:url('img/metals/gallium/CuGa-targets.jpg'); } #main .gallery .ga-3 { background-image:url('img/metals/gallium/CuGa-turnings.jpg'); } #main .gallery .ga-4 { background-image:url('img/metals/gallium/Ga-melted.jpg'); } #main .gallery .co-1 { background-image:url('img/metals/cobalt/Co-briquettes.jpg'); } #main .gallery .pr-1 { background-image:url('img/metals/precious/precious-asch.jpg'); } #main .gallery .pr-2 { background-image:url('img/metals/precious/precious-filterbag.jpg'); } #main .gallery .pr-3 { background-image:url('img/metals/precious/precious-wipes.jpg'); } #main .gallery .ge-1 { background-image:url('img/metals/germanium/Ge-chunks.jpg'); } #main .gallery .ge-2 { background-image:url('img/metals/germanium/Ge-lenses.jpg'); } #main .gallery .hf-1 { background-image:url('img/metals/hafnium/Hf-plates.jpg'); } #main .gallery .hf-2 { background-image:url('img/metals/hafnium/Hf-targets.jpg'); } #main .gallery .in-1 { background-image:url('img/metals/indium/In-bars.jpg'); } #main .gallery .in-2 { background-image:url('img/metals/indium/In-bars-1.jpg'); } #main .gallery .in-3 { background-image:url('img/metals/indium/In-foil.jpg'); } #main .gallery .in-4 { background-image:url('img/metals/indium/ito.jpg'); } #main .gallery .in-5 { background-image:url('img/metals/indium/In-bars-2.jpg'); } #main .gallery .in-6 { background-image:url('img/metals/indium/In-bars-3.jpg'); } #main .gallery .mo-1 { background-image:url('img/metals/molybdenum/Mo-electrode-1.jpg'); } #main .gallery .mo-2 { background-image:url('img/metals/molybdenum/Mo-electrodes.jpg'); } #main .gallery .mo-3 { background-image:url('img/metals/molybdenum/Mo-plates-1.jpg'); } #main .gallery .mo-4 { background-image:url('img/metals/molybdenum/Mo-plates-2.jpg'); } #main .gallery .mo-5 { background-image:url('img/metals/molybdenum/Mo-plates.jpg'); } #main .gallery .mo-6 { background-image:url('img/metals/molybdenum/Mo-turnings.jpg'); } #main .gallery .mo-7 { background-image:url('img/metals/molybdenum/Mo-tyristor.jpg'); } #main .gallery .mo-8 { background-image:url('img/metals/molybdenum/Mo-wire.jpg'); } #main .gallery .ni-1 { background-image:url('img/plates.jpg'); } #main .gallery .ni-2 { background-image:url('img/metals/nickel/Ni-clips.jpg'); } #main .gallery .ni-3 { background-image:url('img/metals/nickel/Ni-discs.jpg'); } #main .gallery .ni-4 { background-image:url('img/metals/nickel/Ni-foil.jpg'); } #main .gallery .ni-5 { background-image:url('img/metals/nickel/Ni-sheets.jpg'); } #main .gallery .nb-1 { background-image:url('img/metals/niob/Nb-targets.jpg'); } #main .gallery .nb-2 { background-image:url('img/metals/niob/Nb-blocks.jpg'); } #main .gallery .nb-3 { background-image:url('img/metals/niob/Nb-scrap-1.jpg'); } #main .gallery .nb-4 { background-image:url('img/metals/niob/Nb-scrap.jpg'); } #main .gallery .nb-5 { background-image:url('img/metals/niob/Nb-sheets.jpg'); } #main .gallery .nb-6 { background-image:url('img/metals/niob/Nb-turnings.jpg'); } #main .gallery .ta-1 { background-image:url('img/metals/tantal/Ta-scrap.jpg'); } #main .gallery .ta-2 { background-image:url('img/metals/tantal/Ta-sheets-1.jpg'); } #main .gallery .ta-3 { background-image:url('img/metals/tantal/Ta-sheets.jpg'); } #main .gallery .ta-4 { background-image:url('img/metals/tantal/Ta-solids.jpg'); } #main .gallery .ti-1 { background-image:url('img/metals/titan/Ti-solids-1.jpg'); } #main .gallery .ti-2 { background-image:url('img/metals/titan/Ti-solids-2.jpg'); } #main .gallery .ti-3 { background-image:url('img/metals/titan/Ti-solids-3.jpg'); } #main .gallery .ti-4 { background-image:url('img/metals/titan/Ti-solids-5.jpg'); } #main .gallery .ti-5 { background-image:url('img/metals/titan/Ti-solids.jpg'); } #main .gallery .v-1 { background-image:url('img/metals/vanadium/V-flakes.jpg'); } #main .gallery .v-2 { background-image:url('img/metals/vanadium/vanadium.jpg'); } #main .gallery .w-1 { background-image:url('img/metals/tungsten/W-wire.jpg'); } #main .gallery .w-2 { background-image:url('img/metals/tungsten/W-tips.jpg'); } #main .gallery .w-3 { background-image:url('img/metals/tungsten/W-electrodes.jpg'); } #main .gallery .sn-1 { background-image:url('img/metals/vanadium/V-flakes.jpg'); } #main .gallery .sn-2 { background-image:url('img/metals/vanadium/vanadium.jpg'); } #main .gallery .co-alloy-1 { background-image:url('img/alloys/co/Co-electrodes.jpg'); } #main .gallery .co-alloy-2 { background-image:url('img/alloys/co/Co-gusskegel.jpg'); } #main .gallery .co-alloy-3 { background-image:url('img/alloys/co/Co-ronden.jpg'); } #main .gallery .co-alloy-4 { background-image:url('img/alloys/co/Co-scrap.jpg'); } #main .gallery .co-alloy-5 { background-image:url('img/alloys/co/Co-turnings.jpg'); } #main .gallery .carbide-1 { background-image:url('img/alloys/carbide/carbide_drills.jpg'); } #main .gallery .carbide-2 { background-image:url('img/alloys/carbide/carbide-1.jpg'); } #main .gallery .carbide-3 { background-image:url('img/alloys/carbide/carbide-2.jpg'); } #main .gallery .carbide-4 { background-image:url('img/alloys/carbide/carbide-3.jpg'); } #main .gallery .carbide-5 { background-image:url('img/alloys/carbide/carbide-4.jpg'); } #main .gallery .carbide-6 { background-image:url('img/alloys/carbide/carbide-5.jpg'); } #main .gallery .carbide-7 { background-image:url('img/alloys/carbide/carbide-inserts.jpg'); } #main .gallery .hss-1 { background-image:url('img/alloys/hss/hss-1.jpg'); } #main .gallery .hss-2 { background-image:url('img/alloys/hss/hss-2.jpg'); } #main .gallery .hss-3 { background-image:url('img/alloys/hss/hss-3.jpg'); } #main .gallery .hss-4 { background-image:url('img/alloys/hss/hss-4.jpg'); } #main .gallery .hss-5 { background-image:url('img/alloys/hss/hss-drills.jpg'); } #main .gallery .hss-6 { background-image:url('img/alloys/hss/taps.jpg'); } #main .gallery .ni-alloy-1 { background-image:url('img/alloys/ni/Ni-alloy-1.jpg'); } #main .gallery .ni-alloy-2 { background-image:url('img/alloys/ni/Ni-alloy-turnings.jpg'); } #main .gallery .ni-alloy-3 { background-image:url('img/alloys/ni/Ni-alloy-2.jpg'); } #main .gallery .ni-alloy-4 { background-image:url('img/alloys/ni/Ni-alloy-3.jpg'); } #main .gallery .ni-alloy-5 { background-image:url('img/alloys/ni/Ni-alloy-4.jpg'); } #main .gallery .ni-alloy-6 { background-image:url('img/alloys/ni/Ni-alloy-5.jpg'); } #main .gallery .ta-alloy-1 { background-image:url('img/alloys/ta/Ta-tophats.jpg'); } #main .gallery .ta-alloy-2 { background-image:url('img/alloys/ta/Ta-alloy-1.jpg'); } #main .gallery .ta-alloy-3 { background-image:url('img/alloys/ta/Ta-alloy-2.jpg'); } #main .gallery .ta-alloy-4 { background-image:url('img/alloys/ta/Ta-alloy-3.jpg'); } #main .gallery .w-alloy-1 { background-image:url('img/alloys/w/W-penetrators.jpg'); } #main .gallery .w-alloy-2 { background-image:url('img/alloys/w/W-alloy-1.jpg'); } #main .gallery .w-alloy-3 { background-image:url('img/alloys/w/W-alloy-2.jpg'); } #main .gallery .w-alloy-4 { background-image:url('img/alloys/w/W-alloy-3.jpg'); } #main .gallery .sn-alloy-1 { background-image:url('img/alloys/sn/Sn-slag.jpg'); } #main .gallery .sn-alloy-2 { background-image:url('img/alloys/sn/Sn-alloy-1.jpg'); } #main .gallery .sn-alloy-3 { background-image:url('img/alloys/sn/Sn-alloy-2.jpg'); } #main .gallery .zr-alloy-1 { background-image:url('img/alloys/zr/Zr-tubes.jpg'); } #main .gallery .zr-alloy-2 { background-image:url('img/alloys/zr/Zr-alloy-1.jpg'); } #main .gallery .zr-alloy-3 { background-image:url('img/alloys/zr/Zr-alloy-2.jpg'); } #main .gallery .zr-alloy-4 { background-image:url('img/alloys/zr/Zr-alloy-3.jpg'); } #main .gallery .zr-alloy-5 { background-image:url('img/alloys/zr/Zr-alloy-4.jpg'); } #main .gallery .zr-alloy-6 { background-image:url('img/alloys/zr/Zr-alloy-5.jpg'); } #main .gallery .zr-alloy-7 { background-image:url('img/alloys/zr/Zr-alloy-6.jpg'); } #main .gallery .cnc-1 { background-image:url('img/category/cnc-1.jpg'); } #main .gallery .cnc-2 { background-image:url('img/category/cnc-2.jpg'); } #main .gallery .cnc-3 { background-image:url('img/category/cnc-3.jpg'); } #main .gallery .cnc-4 { background-image:url('img/category/cnc-4.jpg'); } #main .gallery .cnc-5 { background-image:url('img/category/cnc-5.jpg'); } #main .gallery .aero-1 { background-image:url('img/category/aero-1.jpg'); } #main .gallery .aero-2 { background-image:url('img/category/aero-2.jpg'); } #main .gallery .aero-3 { background-image:url('img/category/aero-3.jpg'); } #main .gallery .aero-4 { background-image:url('img/category/aero-4.jpg'); } #main .gallery .metallurgy-1 { background-image:url('img/category/metallurgy-1.jpg'); } #main .gallery .metallurgy-2 { background-image:url('img/category/metallurgy-2.jpg'); } #main .gallery .petro-1 { background-image:url('img/chemie.jpg'); } #main .gallery .petro-2 { background-image:url('img/category/petro-1.jpg'); } #main .gallery .petro-3 { background-image:url('img/category/petro-2.jpg'); } #main .gallery .galvanic-1 { background-image:url('img/galvanic.png'); } #main .gallery .galvanic-2 { background-image:url('img/category/galvanic-1.jpg'); } #main .gallery .energy-1 { background-image:url('img/energy.png'); } #main .gallery .energy-2 { background-image:url('img/category/energy-1.jpg'); } /* HISTORY SEITE */ #main .timeline { position: relative; --year: 110px; --gap: 40px; --dot: 12px; } #main .timeline ul { position: relative; } #main .timeline ul:before { content:''; position:absolute; left: calc(var(--year) + var(--gap)/2); top: 0; bottom: 0; width: 2px; background: rgba(29,166,228,.35); } #main .timeline li { position: relative; display: grid; grid-template-columns: var(--year) 1fr; grid-column-gap: var(--gap); padding: 22px 0; } #main .timeline li:before { content:''; position:absolute; left: 122px; top: 26px; width: var(--dot); height: var(--dot); border-radius: 50%; background:#fff; border:4px solid var(--color-main); } #main .timeline .year { font: 700 28px/1 Inter,Arial,sans-serif; color:#303746; } #main .timeline p { font: 300 18px/1.5 Inter,Arial,sans-serif; color:#464F52; } /* ZERTIFIKATE */ #main .certificates .doclist { display:flex; flex-wrap:wrap; gap:12px; padding:0 8px; margin:0; list-style:none; } #main .certificates .doclist > li { flex:1 1 320px; } #main .certificates .doc { width:100%; text-align:left; background:#fff; border:1px solid #e3e3e3; border-radius:12px; padding:14px; line-height:1.35; cursor:pointer; transition:transform .08s ease, box-shadow .08s ease; } #main .certificates .doc:hover { transform:translateY(-2px); box-shadow:0 6px 16px rgba(0,0,0,.08); } #main .certificates .doc i { margin-right:10px; font-size:18px; } #main .certificates .title { display:block; font-weight:600; margin-bottom:4px; } #main .certificates .meta { color:#666; font-size:13px; } /* PDF VORSCHAU */ .pdf-modal { position:fixed; inset:0; display:none; z-index:1000; } .pdf-modal.active { display:block; } .pdf-modal .overlay { position:absolute; inset:0; background:rgba(0,0,0,.6); } .pdf-modal .window { position:absolute; inset:5% 5%; background:#111; border-radius:12px; overflow:hidden; } .pdf-modal iframe { width:100%; height:100%; border:0; display:block; } .pdf-modal .close { position:absolute; top:10px; right:12px; background:#fff; border:0; border-radius:10px; padding:6px 10px; cursor:pointer; } body.modal-open { overflow:hidden; } /* ===== AGB Seite ===== */ #main .terms { max-width:920px; margin:0 auto; } #main .terms h2 { margin:0 0 10px; } #main .terms .meta { color:#6b7280; font-size:13px; margin:6px 0 22px; } /* TOC-Chips */ #main .terms .toc { display:flex; flex-wrap:wrap; gap:10px; padding:8px 0; margin:0 0 24px; list-style:none; border-top:1px solid #eee; border-bottom:1px solid #eee; } #main .terms .toc a { display:inline-block; padding:8px 12px; border:1px solid #e5e7eb; border-radius:9999px; background:#fff; font-weight:600; } #main .terms .toc a:hover { background:#f7f7f7; } #main .terms .toc a.active { background:#111; color:#fff; border-color:#111; } /* IMPRESSUM */ #main .imprint { overflow: visible; max-width: 1000px; box-sizing: border-box; } #main .imprint { background: #fff; padding: 113px; border-radius: 16px; position: relative; top: -300px; box-shadow: 0 0 50px rgba(0, 0, 0, 0.1); } #main .imprint { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; } #main .imprint .col:first-child { border-right: 1px solid #eee; padding-right: 30px; } #main .imprint .col:last-child { padding-left: 30px; } #main .imprint ul { list-style: none; margin: 0; padding: 0; } #main .imprint li { margin: 10px 0; font-size: 16px; line-height: 1.6; } #main .imprint i { margin-right: 12px; color: var(--color-main); } #main .imprint a { color: #000; text-decoration: none; } #main .imprint a:hover { color: var(--color-main); } /* Inhalt */ #main .terms .section { margin:0 0 10px; scroll-margin-top:80px; } #main .terms h3 { font-size:32px; line-height:1.3; font-weight:700; margin:0 0 10px; letter-spacing: 1px; color: #303746; } #main .terms p { font-size:24px; line-height:1.7; font-weight:700; color:#303746; padding-bottom: 6px; } #main .terms ul { margin:0 0 14px 0; } #main .terms li { margin:0 0 16px; font-weight: 100; letter-spacing: 1px; line-height: 1.7; color:#303746; } #main .terms .subtitle { line-height: 1.4; font-size: 18px; letter-spacing: 1px; font-weight: bold;} #main .terms ul.loglist { list-style: none; margin: 0 0 15px 0; padding: 0; } #main .terms ul.loglist li { position: relative; padding-left: 20px; margin-bottom: 8px; } #main .terms ul.loglist li::before { content: "•"; color: #0085FF; font-weight: bold; position: absolute; left: 0; } #main .terms a { text-underline-offset:2px; } #main .terms .small { font-size:16px; line-height:1.5; font-weight:300; } .block.imprint .card { background:#fff; padding:40px; border-radius:16px; box-shadow:0 0 50px rgba(0,0,0,.08); } .block.imprint h2 { font-size:26px; margin-bottom:20px; } .block.imprint h3 { font-size:20px; margin-bottom:12px; } .block.imprint h4 { font-size:16px; font-weight:600; margin:10px 0 12px; } .block.imprint .grid { display:grid; grid-template-columns:repeat(2,1fr); gap:40px; } .block.imprint ul { list-style:none; margin:0 0 18px 0; padding:0; } .block.imprint li { margin:8px 0; line-height:1.6; } .block.imprint i { margin-right:10px; color:#0085FF; } .block.imprint a { color:#000; text-decoration:none; } .block.imprint a:hover { color:#0085FF; } #main .wedo { overflow: visible; } #main .wedo ul { display: grid; grid-template-columns: repeat(6, 1fr); grid-gap: 45px; } #main .wedo li { color: #fff; background: url('img/cutting.jpg') top center no-repeat; background-size: cover; } #main .wedo li { border-radius: 16px; font-size: 20px; font-weight: 300; line-height: 1.4; transition: all .5s; } #main .wedo a { color: #fff; text-decoration: none; padding: 36px; display: block; height: 420px; box-sizing: border-box; } #main .wedo a { background: linear-gradient(to bottom, #000 0px, transparent 300px); border-radius: 16px; } #main .wedo .name { font-size: 40px; font-weight: 700; display: block; margin-bottom: 20px; } #main .wedo li:hover { transform: scale(1.05); } #main .wedo .elem { position: absolute; z-index: 10; animation: flash 10s infinite linear; opacity: 0; } #main .wedo .el-ga { top: 30px; left: -20%; animation-delay: 1s; } #main .wedo .el-in { top: 300px; left: -15%; animation-delay: 2s; } #main .wedo .el-pt { top: 60px; right: -10%; animation-delay: 4s; } #main .wedo .el-au { top: 360px; right: -20%; animation-delay: 9s; } #main .wedo .el-nb { bottom: 60px; right: -15%; animation-delay: 5.5s; } #main .wedo .el-ag { bottom: 480px; right: -18%; animation-delay: 6s; } #main .wedo .el-w { bottom: 200px; left: -7%; animation-delay: 8s; } #main .wedo .el-pd { bottom: 600px; left: -10%; animation-delay: 9s; } #main .wedo .el-ta { right: +40%; } #main .wedo .el-ni { left: -10%; } #main .materials { background: linear-gradient(to bottom, #fff, #DBF4FB); max-width: 100%; margin: 0; } #main .materials .inside { max-width: 1310px; margin: 0 auto; padding: 50px 0; } #main .materials .split3 { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 70px; } #main .materials ul { border-right: 1px solid rgba(0, 0, 0, 0.2); font-size: 24px; font-weight: 300; } #main .materials li { margin-bottom: 20px; line-height: 31px; } #main .materials a { color: #000; text-decoration: none; transition: all .1s; } #main .materials a:hover { color: var(--color-main); } #main .materials a:after { content: '\f061'; font: bold 16px 'Font Awesome 6 Free'; display: inline-block; margin-left: 15px; } #main .materials a:after { position: relative; top: -2px; transition: all .1s; } #main .materials a:hover:after { margin-left: 25px; color: var(--color-main); } #main .wedo .melting { background-image: url('img/melting.jpg'); } #main .wedo .aerospace { background-image: url('img/aerospace.jpg'); } #main .wedo .chemie { background-image: url('img/chemie.png'); } #main .wedo .galvanic { background-image: url('img/galvanic.png'); } #main .wedo .energy { background-image: url('img/energy.png'); } /* ---- FOOTER ---- */ #footer { margin: 75px 0; color: #22282B; font-size: 18px; font-weight: 300; line-height: 1.4; } #footer .inside { max-width: 1310px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); grid-row-gap: 50px; } #footer h4 { color: #909DA2; font-weight: 500; text-transform: uppercase; font-size: 14px; letter-spacing: 2px; } #footer a { color: #000; text-decoration: none; } #footer .logo { background: url('img/logo.png') no-repeat left center; display: block; width: 79px; height: 51px; } #footer .bottom { margin-top: 60px; } #footer .dev { grid-column: 4; } #footer .inside > span { line-height: 51px; display: block; vertical-align: middle; color: #909DA2; } /* Grundlayout */ .downloads .dl-toolbar { display:flex; gap:16px; align-items:center; } .downloads .dl-search { flex:1; height:44px; padding:0 14px; border:1px solid rgba(0,0,0,.15); border-radius:10px; } .downloads .dl-filters { display:flex; gap:10px; } .downloads .dl-filter { height:44px; padding:0 14px; border:1px solid rgba(0,0,0,.12); border-radius:10px; background:#fff; cursor:pointer; } .downloads .dl-filter.is-active { border-color: var(--color-main); color: var(--color-main); } .downloads .dl-list { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:1fr; gap:14px; } .downloads .dl-item a { display:flex; gap:14px; align-items:flex-start; text-decoration:none; color:#111; padding:14px; border:1px solid rgba(0,0,0,.08); border-radius:12px; background:#fff; } .downloads .dl-item strong { display:block; font-weight:600; } .downloads .dl-item small { display:block; color:#666; margin-top:2px; } .downloads .dl-item em { display:block; color:#333; font-style:normal; margin-top:6px; } /* Dateityp-Icons (einfacher Badge) */ .downloads .icon { width:36px; height:36px; border-radius:8px; display:inline-grid; place-items:center; font:700 11px/1 Inter,system-ui,sans-serif; color:#fff; } .downloads .type-pdf { background:#E53935; } .downloads .type-docx { background:#1E88E5; } .downloads .type-xlsx { background:#43A047; } .downloads .type-pdf::before { content:"PDF"; } .downloads .type-docx::before { content:"DOC"; } .downloads .type-xlsx::before { content:"XLS"; } #main .list figure img[src='img/metals/precious/precious-asch.jpg'] { } /* ---- ANIMATIONS ---- */ @keyframes falling { 0% { top: -10%; opacity: 0; } 50% { opacity: .5; } 100% { opacity: 0; top: 110%; } } @keyframes flash { 0% { opacity: 0; } 50% { opacity: .4; transform: scale(1.2); } 100% { opacity: 0; } }