/*
====================================================

* 	[Master Stylesheet]
	
	Theme Name : 2FX Media Landingpage 
	Version    :  2.0
	Author     :  2FX Media / Flux
	Author URI :  https://2fx.media

====================================================

	TOC
	
	1. PRIMARY STYLES
	2. COMMONS FOR PAGE DESIGN
		JQUERY LIGHT BOX
	3. MAIN SECTION

====================================================

/* ---------------------------------
1. PRIMARY STYLES
--------------------------------- */

body{
  margin: 0px;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  /*background-color:#fff;*/
  color:#000;
  background:url(../img/background-dark.jpg) no-repeat center center fixed;
  background-position: 20% 10%;
  background-size: cover;

 }   

html{ font-size: 100%; height: 100%; width: 100%; overflow-x: hidden; margin: 0px;  padding: 0px; touch-action: manipulation; }


/* ---------------------------------
Google Fonts local
--------------------------------- */
/* work-sans-100 - latin */
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 100;
  src: url('../fonts/work-sans-v13-latin-100.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/work-sans-v13-latin-100.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/work-sans-v13-latin-100.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/work-sans-v13-latin-100.woff') format('woff'), /* Modern Browsers */
       url('../fonts/work-sans-v13-latin-100.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/work-sans-v13-latin-100.svg#WorkSans') format('svg'); /* Legacy iOS */
}
/* work-sans-300 - latin */
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/work-sans-v13-latin-300.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/work-sans-v13-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/work-sans-v13-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/work-sans-v13-latin-300.woff') format('woff'), /* Modern Browsers */
       url('../fonts/work-sans-v13-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/work-sans-v13-latin-300.svg#WorkSans') format('svg'); /* Legacy iOS */
}
/* work-sans-200 - latin */
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 200;
  src: url('../fonts/work-sans-v13-latin-200.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/work-sans-v13-latin-200.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/work-sans-v13-latin-200.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/work-sans-v13-latin-200.woff') format('woff'), /* Modern Browsers */
       url('../fonts/work-sans-v13-latin-200.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/work-sans-v13-latin-200.svg#WorkSans') format('svg'); /* Legacy iOS */
}
/* work-sans-regular - latin */
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/work-sans-v13-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/work-sans-v13-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/work-sans-v13-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/work-sans-v13-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/work-sans-v13-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/work-sans-v13-latin-regular.svg#WorkSans') format('svg'); /* Legacy iOS */
}
/* work-sans-500 - latin */
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/work-sans-v13-latin-500.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/work-sans-v13-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/work-sans-v13-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/work-sans-v13-latin-500.woff') format('woff'), /* Modern Browsers */
       url('../fonts/work-sans-v13-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/work-sans-v13-latin-500.svg#WorkSans') format('svg'); /* Legacy iOS */
}
/* work-sans-700 - latin */
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/work-sans-v13-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/work-sans-v13-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/work-sans-v13-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/work-sans-v13-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/work-sans-v13-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/work-sans-v13-latin-700.svg#WorkSans') format('svg'); /* Legacy iOS */
}

/* ---------------------------------
END Google Fonts local
--------------------------------- */

h1, h2, h3, h4, h5, h6, p, a, ul, span, li, img, inpot, button{ margin: 0; padding: 0; }

h1,h2,h3,h4,h5,h6{ line-height: 1.5; font-weight: inherit; }

h1,h2,h3,h4{ font-family: 'Work Sans', sans-serif; }

p{ font-family: 'Work Sans'; line-height: 1.6; font-size: 1.05em; font-weight: 400; line-height: 1.7; color: rgb(151, 150, 150); }

h1{ font-size: 2em; line-height: 1;  letter-spacing: -0.5px; }
h2{ font-size: 1.5em; line-height: 1.1; }
h3{ font-size: 2.5em; }
h4{ font-size: 1.5em; }
h5{ font-size: 1.2em; }
h6{ font-size: .9em; letter-spacing: 1px; }

a, button{ display: inline-block; text-decoration: none; color: inherit; transition: all .3s; line-height: 1; }

a:focus, a:active, a:hover,
button:focus, button:active, button:hover,
a b.light-color:hover{ text-decoration: none; color: #333366; }

b{ font-weight: 500; }

img{ width: 100%; }

li{font-family: 'Work Sans'; line-height: 1.6; font-size: 1.05em; font-weight: 400; color: rgb(151, 150, 150); list-style: disc; display: inline-block; }

span{ display: inline-block; }

button{ outline: 0; border: 0; background: none; cursor: pointer; }

b.light-color{ color: #444; }

.icon{ font-size: 1.1em; display: inline-block; line-height: inherit; }

[class^="icon-"]:before, [class*=" icon-"]:before{ line-height: inherit; }

*, *::before, *::after {
    -webkit-box-sizing: inherit;
    box-sizing: inherit;
}

*, *::before, *::after {
    -webkit-box-sizing: inherit;
	box-sizing: inherit;} 

	
/* ---------------------------------
2. COMMONS FOR PAGE DESIGN
--------------------------------- */

.space-top-25 { padding-top:25px; }
.space-top-10 { padding-top:10px; }
.center-text{ text-align: center; } 
.space-left {margin-left: 10px;}

.bottom-10 {padding-bottom: 10px; }


/* New 2026 */

.main-area {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    color: #fff;
    overflow: hidden;
    filter: contrast(1.05) saturate(0.9);
}

.main-area--legal {
    min-height: auto;          /* überschreibt 100vh Verhalten */
    height: auto;
    display: flex;
    align-items: flex-start;   /* statt center */
    justify-content: center;
    padding: 80px 20px;
    color: #fff;
    overflow: hidden;
    filter: contrast(1.05) saturate(0.9);
}

.legal-container {
    max-width: 900px;
    width: 100%;
    margin: 0 auto;
    text-align: left;
}


/* Overlay für bessere Lesbarkeit */
.main-area::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.65),
        rgba(0, 0, 0, 0.45),
        rgba(0, 0, 0, 0.70)
    );
    z-index: 0;
}

.main-area--legal::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.65),
        rgba(0, 0, 0, 0.45),
        rgba(0, 0, 0, 0.70)
    );
    z-index: 0;
}



p {
    color: rgba(255, 255, 255, 0.85);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.7;
}

.hero p {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.container {
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
    padding: 0 30px;
    text-align: center;
    position: relative;
    z-index: 1;
}

h1, h2, p {
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

/* Hero-Entrance */

@keyframes heroFadeUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero > * {
    opacity: 0;
    animation: heroFadeUp 0.8s ease-out forwards;
}

.hero a {
    animation-delay: 0.1s;
}

.hero h1 {
    animation-delay: 0.25s;
}

.hero p:first-of-type {
    animation-delay: 0.4s;
}

.hero h2 {
    animation-delay: 0.55s;
}

.hero p:nth-of-type(2) {
    animation-delay: 0.7s;
}

.hero div {
    animation-delay: 0.85s;
}

@media (prefers-reduced-motion: reduce) {
    .hero > * {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* END Hero-Entrance */


::-webkit-input-placeholder { font-size: .9em; letter-spacing: 1px; }

::-moz-placeholder { font-size: .9em; letter-spacing: 1px; }

:-ms-input-placeholder { font-size: .9em; letter-spacing: 1px; }

:-moz-placeholder { font-size: .9em; letter-spacing: 1px; }

.full-height{ height: 100%; }

.position-static{ position: static; }

.font-white{ color: #fff; }


/* ---------------------------------
3. MAIN SECTION
--------------------------------- */

.main-area{ position: relative; height: 100vh; /*alt 100vh*/ z-index: 1; padding: 0 20px; background-size: cover; color: #fff; }

.main-area:after{ content:''; position: absolute; top: 0; bottom: 0;left: 0; right: 0; z-index: -1;  
	/*opacity: .4; background: #000;*/ }

.main-area .desc{ margin: 20px auto; max-width: 650px; /*background:rgba(255, 255, 255, 0.1);*/ padding: 20px; }

/*.main-area .notify-btn{ padding: 13px 35px; border-radius: 50px; border: 2px solid #fff;
	color: #fff; background: #fff; }*/

.main-area .notify-btn:hover{ background: none; }

.main-area .social-btn{ position: absolute; bottom: 40px; width: 100%; left: 50%; transform: translateX(-50%); }

.main-area .social-btn > li > a{ margin: 0 10px; padding-bottom: 7px; position: relative; overflow: hidden; }

.main-area .social-btn > li > a:after{ content:''; position: absolute; bottom: 0; left: 0; right: 0; 
	transition: all .2s; height: 2px; background: #000; }

.main-area .social-btn > li > a:hover:after{ transform: translateX(100%); }

.logo { width: 300px; }

.social-icons {font-size: 36px;}

/* Solid border */
hr.solid {
  border-top: 1px solid #bbb;  
  margin-top: 15px;
}

h1.law-headline {
  font-size: 1.5em;
}

h2.law-headline {
  font-size: 1.5em;
}

h3.law-headline {
  font-size: 1.5em;
}

.siegel-raidboxes {
  max-width: 180px;
}

.siegel-erecht {
  max-width: 180px;
}

.siegel-hoster {
  max-width: 260px;

}

.phone {
  padding-left: 15px;
}

/* ---------------------------------
FOOTER
--------------------------------- */

.footer {
  padding-bottom: 25px;
}