/* =========================================================
   BEFELD SITE PACKAGE
   Layout nach dem bisherigen Befeld-Webseitenaufbau
   ========================================================= */


/* ---------------------------------------------------------
   Grundeinstellungen
   --------------------------------------------------------- */

* {
    box-sizing: border-box;
}

html {
    margin: 0;
    padding: 0;
}

body {
    margin: 0;
    padding: 0;
	/* min-height: 100dvh; */

	
	overflow-x: hidden;

    font-family: Verdana, Arial, sans-serif;
    font-size: 13px;
    line-height: 1.7;

    color: #333333;
	/* background: #595959; */
	/* background: #eeeeee; */
	background: #dfdfdf;
	
    /* background: linear-gradient(
        to bottom,
        #eeeeee 0%,
		#eeeeee 10%,
		#dfdfdf 100%
    );
	/* background-attachment: scroll; */

}



/* 1. Die umschließende Box fängt den fertigen Schatten ab */
.hollow-square-shadow {
  position: fixed;
  top: 0%;
  left: 20%;
  z-index: 20;
  width: 500px;
  height: 500px;
  pointer-events: none; 

  /* HIERHIN WANDERT DER FILTER: Er sieht nun das fertige Loch */
  filter: drop-shadow(0px 10px 20px rgba(0, 0, 0, 0.7));
}

/* 2. Das Quadrat selbst kümmert sich nur noch um Farbe und Maske */
.hollow-square {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #ff007f, #7f00ff);

  /* Das Loch hineinschneiden */
  -webkit-mask-image: radial-gradient(circle, transparent 30%, black 30.5%);
  mask-image: radial-gradient(circle, transparent 30%, black 30.5%);
}





.bg-body-box {
	position: absolute;
	left: calc(-50vw + 50%);		/* 0; */
	width: 100vw;		/* 100%; */
	height: 100%;
	z-index: -10; /* Liegt hinter der Navigation, Main und Footer */

	/* top: 398px; */
	
	/* bottom: 0; /* Geht automatisch bis ganz nach unten zum Seitenende */
  
	/* background: #ffffff; /* Deine gewünschte weiße Hintergrundfarbe */
	background: #595959;

	
	/* Wirft ebenfalls den perfekten Rundum-Schatten nach außen */
}


.bg-main-box {
	position: absolute;
	left: calc(-50vw + 50%);		/* 0; */
	width: 100vw;		/* 100%; */
	z-index: -5; /* Liegt hinter der Navigation, Main und Footer */

	top: 398px; 
	
	bottom: 0; /* Geht automatisch bis ganz nach unten zum Seitenende */
  
	/* background: #ffffff; /* Deine gewünschte weiße Hintergrundfarbe */
	/* background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); */
    background: linear-gradient(
        to bottom,
        #ffffff 0%,
		#ffffff 5%,
		#dfdfdf 100%
    );
	
	/* Wirft ebenfalls den perfekten Rundum-Schatten nach außen */
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.5);
}

.metall-links-bg {
	position: absolute;
	top: 500px;
	left: -150px; /*calc(-50vw + 500px - 10%);		/* 0; */
	width: 100px;		/* 100%; */
	height: 150px;
	z-index: -2;
	
	pointer-events: none;
	transform: rotate(15deg); /* Leicht eingedreht für mehr Dynamik */

	background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);

}

.metall-links-shadow {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	
	/* pointer-events: none;

	background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); */

	filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.8));
}

.metall-links {
	
	width: 100%;
	height: 100%;

	background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);

	-webkit-mask-image: radial-gradient(circle, transparent 38%, black 38.5%);
	mask-image: radial-gradient(circle, transparent 38%, black 38.5%);
}





 /* 2. Eine weitere zusätzliche Hintergrund-Box (z.B. rechts oben) */
 .bg-deco-box-2 {
	position: fixed;
	top: 8%;
	right: 8%;
	z-index: 10;
	width: 300px;
	height: 300px;
	border-radius: 30px; /* Abgerundete Ecken */
	background: linear-gradient(225deg, #00c6ff, #0072ff); /* Blau-Verlauf */
	pointer-events: none;
	transform: rotate(15deg); /* Leicht eingedreht für mehr Dynamik */
	opacity: 0.7; /* Leicht transparent */
	filter: blur(4px) drop-shadow(0 15px 25px rgba(0,0,0,0.15)); /* Weichgezeichneter Schatten */
}




/* ---------------------------------------------------------
   Gesamte Seite
   --------------------------------------------------------- */

.page {
    width: 1000px;
    max-width: 100%;
	padding-bottom: 15px;

    min-height: 100vh;

    margin: 0 auto;

    /* background: #ffffff; */

    /* box-shadow:
        0 0 4px rgba(0, 0, 0, 0.45); */

    display: flex;
    flex-direction: column;
	
	position: relative; /* NEU Wichtig, damit sich die Hintergrund-Box daran ausrichtet */
}


/* ---------------------------------------------------------
   Kopfbereich
   --------------------------------------------------------- */


.header {
    width: 100%;
    height: 110px;

    background: linear-gradient(
        to bottom,
        #ffffff 0%,
		#ffffff 5%,
    /*    #ffffff 65%,	*/
        /* #eeeeee 100% */
		#dfdfdf 100%
    );

    /* border-bottom: 3px solid #595959; */    /*    #3b3b3b;	*/

	/* box-shadow:
    /*  0 10px 15px -10px rgba(0, 0, 0, 0.45); */
	/*	0 6px 8px 0 rgba(0, 0, 0, 0.15);	*/
	/*	0 0 2px 2px rgba(0, 0, 0, 0.5); */
		
	margin-bottom: 10px;

    position: relative;

    z-index: 10;

	/* filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.6)); */

	/* box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.5); */


}


.bg-header-box {
	position: absolute;
	top: 0;
	left: calc(-50vw + 50%);		/* 0; */
	width: 100vw;		/* 100%; */
	height: 156px;
	z-index: 11;

	/* box-shadow: inset 0 0 2px 1px rgba(0, 0, 0, 0.5); */

	/* Wirft einen weichen Rundum-Schatten in den grauen Browser-Rand */
	/* filter: blur(1px) drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.9)); */
	/* filter: drop-shadow(0px -1px 0px rgba(127, 127, 127, 0.9)); */
	/* filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.9))*/
	filter: /* drop-shadow(0px 1px 1px rgba(250, 250, 250, 0.9)) */
			drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.9));
	
}

.bg-header-box-cp{

	position: absolute;
	top: 0;
    left: 0;
    width: 100%;
    height: 100%;

	/* Kopierter Farbverlauf aus deinem Header */
	background: linear-gradient(
		to bottom,
		#ffffff 0%,
		#ffffff 5%,
		/* #eeeeee 100% */
		#dfdfdf 100%
	);
	
	/* box-shadow: inset 0 0 2px 1px rgba(0, 0, 0, 0.5); */

    clip-path: polygon(
        0% 0%,
		100% 0%,
		100% 110px,
        calc(50vw - 500px + 25px + 53px) 110px,
        calc(50vw - 500px + 25px + 31px) 148px,
        calc(50vw - 500px + 25px + 9px) 110px,
        0% 110px
    );

}




.header-inner {
    width: 100%;
    height: 100%;

    padding: 0 25px;

    display: flex;
    align-items: center;
    justify-content: space-between;
}



/* ---------------------------------------------------------
   Die neue, versetzte Hintergrund-Box mit Rundum-Schatten
   --------------------------------------------------------- */
.bg-page-box {
    /* 1. Volle Breite der Page einnehmen */
    width: 100%;
    
    /* 2. Absolute Positionierung, um sie hinter den Text zu schieben */
    position: absolute;
    left: 0;
    z-index: -1; /* Schiebt die Box hinter das Hero-Element und alle Texte */

    /* 3. DER VERSATZ: Wo soll die Box im Vergleich zur Page beginnen? */
    /* Wenn dein Header 105px hoch ist und du z.B. 80px freien Balken willst:
       105px + 80px = 185px. Sie fängt also erst bei Pixel 185 von oben an. */
    top: 120px;
    
    /* 4. Sie zieht sich von dort aus bis ganz nach unten zum Seitenende */
    bottom: 15px; 

    /* 5. Styling der Box */
    background: #ffffff; /* Hier die gewünschte Hintergrundfarbe */

    /* 6. DER PERFEKTE RUNDUM-SCHATTEN */
    /* Da X=0 und Y=0, strahlt der Schatten absolut gleichmäßig in alle 4 Richtungen 
       (oben, unten, links, rechts) über die 1000px-Grenze der Page hinaus! */
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.5); 
}




/* ---------------------------------------------------------
   Logo
   --------------------------------------------------------- */


.header-logo {
    /* display: flex; */
    /* align-items: center; */
	/* align-items: flex-start; */
    align-self: flex-start;
	flex-shrink: 0;

	
	width: 404px;
	height: 156px;	/* plus 8px für den Schatten */
	
	z-index: 20;
	
	/* filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.6)); */
}

.logo {
    display: flex;
    align-items: center;
    text-decoration: none;
	width: 100%;
	height: 100%;
	justify-content: center;

}


.logo img {
    display: block;
    width: 404px;
	max-width: 100%;
	height: auto;
	
	
	/* Verschiebt das Logo-Bild innerhalb der Wappenform etwas nach oben, 
    damit es optisch perfekt im 110px hohen Header zentriert bleibt */
	transform: translateY(-12px);
}


/* ---------------------------------------------------------
   Kontaktbereich Kopf
   --------------------------------------------------------- */

.header-contact {
    display: flex;
    align-items: flex-start;

    gap: 25px;
	
	margin-left: 25px;

    font-size: 12px;	/* 11px */
    line-height: 17px;	/* 16px 1.35; */

	z-index: 20;

}

.company-address {
    color: #333333;	
}

.company-address strong {
    font-weight: normal;
}

.header-links {
    display: flex;
    flex-direction: column;
}

.header-links a {
    color: #777777;

    text-decoration: none;

    font-style: italic;
	
	transition: color 0.2s ease, text-shadow 0.2s ease;
}

.header-links a:hover {
    color: #176b31;
	/* font-weight: bold; */
	text-shadow: 0.5px 0 0 #176b31, -0.5px 0 0 #176b31;
}


/* ---------------------------------------------------------
   Großes Headerbild
   --------------------------------------------------------- */

.hero {
    width: calc(100% - 10px);

    margin: 5px;
	/* margin: 8px 5px 0 5px; */

    /* border: 1px solid #777777; */
	
	position: relative;
	z-index: 1;

    background: #dddddd;
	
	overflow: hidden;
}

.hero img {
    display: block;

    width: 100%;
    max-width: 100%;
    height: auto;
}


/* ---------------------------------------------------------
   Navigation
   --------------------------------------------------------- */

.navigation {
    width: calc(100% - 10px);

    margin: 0 5px;

    background: #333333;

    position: relative;

    z-index: 20;
}

.navigation-inner {
    width: 100%;
}

.navigation ul {
    margin: 0;
    padding: 0;

    list-style: none;

    display: flex;
    flex-wrap: wrap;
}

.navigation li {
    margin: 0;
    padding: 0;

    position: relative;
}

.navigation a {
    display: block;

    padding: 7px 7px;

    color: #ffffff;

    text-decoration: none;

    font-size: 14px;
    line-height: 16px;
	white-space: nowrap;
	transition: background-color 0.2s ease;
}

.navigation > .navigation-inner > ul > li > a:hover,
.navigation > .navigation-inner > ul > li.active > a {
    background: #176b31;
}


/* ---------------------------------------------------------
   Untermenüs
   --------------------------------------------------------- */

.navigation ul.sub-navigation {
    display: none;

    position: absolute;

    top: 100%;
    left: 0;

    min-width: 190px;

    margin: 0;
    padding: 0;

    background: #333333;

    box-shadow:
        /* 0 2px 4px rgba(0, 0, 0, 0.35); */
		/* 0 0 2px 2px rgba(0, 0, 0, 0.5); */
		0 2px 4px rgba(0, 0, 0, 0.5);

    z-index: 100;
}

.navigation li:hover > ul.sub-navigation {
    display: block;
}

.navigation ul.sub-navigation li {
    width: 100%;
}

.navigation ul.sub-navigation a {
    width: 100%;

    padding: 7px 12px;

    white-space: nowrap;
}

.navigation ul.sub-navigation a:hover,
.navigation ul.sub-navigation li.active > a {
    background: #176b31;
}


/* ---------------------------------------------------------
   Hauptbereich
   --------------------------------------------------------- */

.main {
    flex: 1;

    width: calc(100% - 10px);
	
    margin: 0 5px;

	background: #ffffff;

    /* border-left: 1px solid #777777;
    border-right: 1px solid #777777;
    border-bottom: 1px solid #777777; */
}

.main-inner {
    width: 100%;

	min-height: 400px;

    padding: 5px 10px 0; /* 15px 0 80px 0; */
}


/* ---------------------------------------------------------
   Content
   --------------------------------------------------------- */

.content {
    /* width: 560px; */
	width: 600px;
	
    /* margin-left: 200px;
    margin-right: auto; */
	Margin: auto;
}

.content h1 {
    margin: 25px 0 15px 0;

    color: #176b31;

    font-size: 23px;
    line-height: 1.3;

    font-weight: bold;
}

.content h2 {
    margin: 25px 0 15px 0;

    color: #176b31;

    font-size: 21px;
    line-height: 1.2;
}

.content h3 {
    margin: 25px 0 12px 0;

    color: #176b31;

    font-size: 18px;
}

.content p {
    margin: 0 0 12px 0;

    text-align: justify;
}


/* ---------------------------------------------------------
   Links im Content
   --------------------------------------------------------- */

.content a {
    color: #176b31;

    text-decoration: underline;
}

.content a:hover {
    color: #0d4c21;
}


/* ---------------------------------------------------------
   Footer
   --------------------------------------------------------- */

.footer {
    width: calc(100% - 10px);

    margin: 0 5px 5px 5px;

    background: #333333;

    color: #ffffff;
}

.footer-inner {
    width: 100%;

    padding: 20px;

    text-align: center;

    font-size: 12px;
}

.footer-inner p {
    margin: 5px 0;
}

.footer a {
    color: #ffffff;

    text-decoration: none;

	transition: color 0.2s ease, text-shadow 0.2s ease;

}

.footer a:hover {
    /* text-decoration: underline; */

    color: #176b31;
	/* font-weight: bold; */
	text-shadow: 0.5px 0 0 #176b31, -0.5px 0 0 #176b31;

}


/* ---------------------------------------------------------
   Tablet
   --------------------------------------------------------- */

@media (max-width: 1000px) {

    .page {
        width: 100%;
    }


	.metall-links-bg {
		display: none;
	}


	.bg-header-box-cp {
		/* display: none; */

        clip-path: polygon(
            0% 0%, 
            100% 0%,
			100% 110px,
			78px 110px,
			56px 148px,
			34px 110px,
			0% 110px
        );

	}


    .content {
        width: calc(100% - 80px);

        margin-left: 40px;
    }

}


/* ---------------------------------------------------------
   Handy
   --------------------------------------------------------- */

@media (max-width: 780px) {

	.bg-header-box-cp {
		/* display: none; */

        clip-path: polygon(
            0% 0%, 
            100% 0%,
			100% 110px,
			calc(50vw - 149px) 110px,
			calc(50vw - 171px) 148px,
			calc(50vw - 193px) 110px,
			0% 110px
        );

	}

	

    .header {
        height: auto;
		box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.5); 

    }

    .header-inner {
	
        /* padding: 15px; */
		padding: 0 0 15px;

        display: block;

        text-align: center;
    }



    .header-logo {
        /* display: block;
		/* display: flex; */

		position: relative;
        left: calc(-50vw + 50%);
        width: 100vw;
	    top: 0;
		/* background: #444444; */

		
        /* width: 100%;             /* Nutzt die gesamte Breite des Handy-Bildschirms */
        /* max-width: 404px;        /* Wird niemals größer als das originale Desktop-Logo */
        margin: 0 auto;          /* Zentriert das gesamte Konstrukt auf dem Handy */
        height: auto;
		max-height: 156px;
        aspect-ratio: 404 / 156; /* Hält das proportionale Verhältnis (Breite zu Höhe) immer perfekt stabil */
        overflow: hidden;

    }
	
	.logo {
		/* background: #444444; */

	}
	
	.logo img {
		/* background: #444444; */

	    /* display: block; */
		width: 404px;
		max-width: 100%;
		height: auto;
		top: 0;
	
	
		/* Verschiebt das Logo-Bild innerhalb der Wappenform etwas nach oben, 
		damit es optisch perfekt im 110px hohen Header zentriert bleibt */
		transform: translateY(-12px);


	}



    .logo span {
        font-size: 14px;
    }

    .header-contact {
        margin: 5px 5px 0px;

        justify-content: center;

        /* gap: 20px; */ 

        text-align: left;
		
		font-size: 15px;
		line-height: 19px;	/* 1.35; */

    }

    .hero {
        margin-top: 5px;
    }

    .hero-placeholder {
        height: 180px;
    }

    .navigation ul {
        display: block;
    }

    .navigation li {
        width: 100%;
    }

    .navigation a {

		font-size: 15px;

        padding: 9px 12px;

        border-bottom: 1px solid #555555;
    }

    .navigation ul.sub-navigation {
        position: static;

        min-width: 0;

        display: block;

        box-shadow: none;

        background: #444444;
    }

    .navigation ul.sub-navigation a {
        padding-left: 25px;
    }

    .main-inner {
        padding: 25px 0 50px 0;
    }

    .content {
        width: auto;

        margin-left: 25px;
        margin-right: 25px;
    }

    .content h1 {
        font-size: 22px;
    }

}




/* ---------------------------------------------------------
   Kleines Handy
   --------------------------------------------------------- */

@media (max-width: 480px) {


    .header-inner {
		padding: 0 0 15px;
        text-align: center;
    }


    .header-contact {
		margin: 0px 5px 0px;

        display: block;

        text-align: center;
    }

    .header-links {
        margin-top: 10px;

        display: block;
    }

    .header-links a {
        display: inline-block;

        margin: 0 5px;
    }

    .hero-placeholder {
        height: 140px;
    }

    .navigation a {

		font-size: 16px;
	}


    .content {
        margin-left: 18px;
        margin-right: 18px;
    }

}


@media (max-width: 424px) {


    .bg-header-box {
        height: auto;
		max-height: 156px;
        aspect-ratio: 404 / 156; /* Hält das proportionale Verhältnis (Breite zu Höhe) immer perfekt stabil */
    }


    .bg-header-box-cp {

        clip-path: polygon(
            0% 0%, 
            100% 0%, 
            100% 70.5128%,
            calc(10px + (100% - 20px) * 0.131188) 70.5128%,
			calc(10px + (100% - 20px) * 0.076733) 94.8717%,
			calc(10px + (100% - 20px) * 0.022277) 70.5128%,
			0% 70.5128%
        );
    }


    .logo {
        font-size: 34px;
		
    }



    .logo img {
		/* margin: 0 5px; */
		/* padding-top: 10px; */
		/* width: 100%;
        max-width: 404px; */
        /* transform: none;    /* Setzt Desktop-Verschiebungen zurück */
		/* transform: translate(0px, -11.3207%); */
		transform: translate(0px, -11.3207%);

        /* Berechnet: Volle Breite MINUS 10px (5px links, 5px rechts) */
        width: calc(100% - 20px); 
        margin: 0 auto; /* Zentriert das Logo im Bildschirm */
        /* padding-top: 12px; /* Der feste, proportionale Abstand nach oben */
		
    }
	
	

}