@charset "utf-8";
@import url("../ackermann_web/webfonts/agba_medium/stylesheet.css");

/* Einfache fließende Medien
   Hinweis: Für fließende Medien müssen Sie die Attribute 'height' und 'width' des Medium aus dem HTML-Code entfernen
   http://www.alistapart.com/articles/fluid-images/ 
*/

/* IE 6 unterstützt keine maximale Breite, verwenden Sie daher eine Standardbreite von 100% */
.ie6 img {
	width:100%;
}

/*
	Dreamweaver-Eigenschaften für fließende Raster
	----------------------------------
	dw-num-cols-mobile:		4;
	dw-num-cols-tablet:		8;
	dw-num-cols-desktop:	12;
	dw-gutter-percentage:	25;
	
	Idee durch den Artikel "Responsive Web Design" von Ethan Marcotte 
	http://www.alistapart.com/articles/responsive-web-design
	
	und "Golden Grid System" von Joni Korpi
	http://goldengridsystem.com/
*/







/* Grundlegendes Styling */
body, td, th {
    font-family: "agba medium";
    color: #FFF;
    font-size: 18px;
    line-height: 120%;
}

body {
    margin: 0;
    padding: 0;
    background-color: #000000; /* Falls der Hintergrund dunkel sein soll */
}

a:link, a:visited { color: #FFF; text-decoration: none; font-size: large; }
a:hover { color: #666; }

/* --- SCHWEBENDER FOOTER (FIXIERT) --- */
#footer-balken {
    position: fixed;      /* Fixiert den Footer im Sichtfenster */
    bottom: 10%;          /* 10% Abstand vom unteren Rand */
    left: 0;
    width: 100%;          /* Volle Breite */
    z-index: 9999;        /* Immer ganz oben über den Bildern */
    background-color: rgba(190,190,190,0.6);


*/ /* Optional: Hintergrund aktivieren falls nötig */
}

#footer-inhalt {
    max-width: 1550px;    /* Orientiert sich an deiner Grid-Breite */
    margin: 0 auto;
    width: 90%;
    display: flex;
    justify-content: space-between;
    align-items: center; 
    padding: 10px 0;
}

.footer-col {
    flex: 1;
}

.col-links {
    line-height: 1.1;
}

.col-links a {
    display: inline-block;
    margin-bottom: 2px;
    max-width: none;
}

.col-center {
    text-align: center;
}

/* --- ABSOLUTER FIX GEGEN LOGO-VERZERRUNG --- */
#footer-balken .col-logo img {
    /* 1. Höhe festlegen */
    height: 127px !important; 
    
    /* 2. Breite auf 'auto' zwingen, um Proportionen zu wahren */
    width: auto !important;
    
    /* 3. Alle eventuellen Störfaktoren aus anderen CSS-Dateien ausschalten */
    max-width: none !important;
    min-width: 0 !important;
    max-height: none !important;
    min-height: 0 !important;
    
    /* 4. Sicherstellen, dass das Bild nicht gestreckt wird */
    object-fit: contain !important; 
    
    display: block !important;
    border: none !important; /* Falls ein Rahmen stört */
}
/* Logo-Proportionen: Verhindert Verzerrung */
.col-logo img {
    height: 50px;         /* Hier die gewünschte Höhe einstellen */
    width: auto;          /* Breite passt sich proportional an */
    display: block;
}



/* Platzhalter am Ende der Seite, damit das letzte Bild nicht verdeckt wird */
.footer-spacer {
    height: 200px; 
}






/* Layout für Mobilgeräte: 480 px oder weniger. */

.gridContainer {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    padding-left: 0%;
    padding-right: 0%;
    font-family: "agba medium";
}
#LayoutDiv1 {
    clear: both;
    float: left;
    margin-left: 2%;
    width: 96%;
    display: block;
    max-width: 96%;
    position: absolute;
}
#LayoutDiv2 {
	clear: both;
	float: left;
	margin-left: 1%;
	width: 750px;
	display: block;
	max-width: 300px;
}
#hintergrund {
 position: fixed; 
  top: -50%; 
  left: -50%; 
  width: 200%; 
  height: 200%;
}
#bgvideo {
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	background-image: url(../ackermann_web/video/foto.jpg) no repeat;
	background-size: cover;	
}
#logo {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#textzeile {
	clear: both;
	float: left;
	margin-left: 0;
	display: block;
	bottom: 1%;
	text-align: center;
	position: absolute;
	text-shadow: 6px 6px 12px #333;
	letter-spacing: 0.7em;
	h1: 100%;
}
#bgimage {
min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	background-size: contain;
	z-index: -1;
	position: fixed;
}
#foto_fullscreen {
clear: none;
float: left;
margin-left: 5.2631%;
width: 100%;
display: block;
}
#einsvor {
	clear: both;
	float: right;
	right: 3%;
	width: 5%;
	height: 5%
	display: block;
	z-index: 8;
	bottom: 45%;
}
#einszurueck {
	clear: both;
	float: left;
	left: 3%;
	width: 5%;
	height: 5%
	display: block;
	z-index: 8;
	bottom: 45%;
}
#text1 {
    clear: both;
    float: left;
    margin-left: 10%;
    width: 90%;
    display: block;
    position: absolute;
}
#foto {
	clear: none;
	float: left;
	margin-left: 0%;
	width: 100%;
	display: block;
	max-width: 100%;
	max-height: 100%;
	overflow: hidden;
}
#quadrat {
	width: 150px;
	height: 150px;
	float: left;
}
#image100 {
}
.zeroMargin_mobile {
margin-left: 0;
}
.hide_mobile {
display: none;
}

}
/* Layout für Tablet-PCs: 481 bis 768 px. Erbt Stile vom: Layout für Mobilgeräte. */

@media only screen and (min-width: 481px) {
.gridContainer {
    width: 100%;
    padding-left: 0%;
    padding-right: 0%;
    font-family: "agba medium";
}
#LayoutDiv1 {
    clear: both;
    float: left;
    margin-left: 5%;
    width: 90%;
    display: block;
    max-width: 90%;
    position: absolute;
}
#LayoutDiv2 {
	clear: both;
	float: left;
	margin-left: 3%;
	width: 600px;
	display: block;
	max-width: 600px;
}
#hintergrund {
 position: fixed; 
  top: -50%; 
  left: -50%; 
  width: 200%; 
  height: 200%;
}
#bgvideo {
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	background-image: url(../ackermann_web/video/foto.jpg) no repeat;
	background-size: cover;	
}
#logo {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	margin-top: 8%;
}
#textzeile {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	bottom: 1%;
	text-align: center;
	position: absolute;
	text-shadow: 6px 6px 12px #333;
	letter-spacing:0.7em
	
}
#foto_fullscreen {
	clear: none;
	
	float: left;
	
	margin-left: 2.5641%;
	
	width: 100%;
	
	display: block;
	
}
#einsvor {
	clear: both;
	
	float: left;
	
	margin-left: 0;
	
	width: 100%;
	
	display: block;
	
}
#einszurueck {
	clear: both;
	
	float: left;
	
	margin-left: 0;
	
	width: 100%;
	
	display: block;
	
}
#text1 {
    clear: both;
    float: left;
    margin-left: 10%;
    width: 90%;
    z-index: 2;
    position: absolute;
    display: block;
	
}
#foto {
	clear: none;
	float: left;
	margin-left: 0%;
	width: 100%;
	display: block;
	max-width: 100%;
	max-height: 100%;
	z-index: -9;
	overflow: hidden;
	height: auto;
	min-width: 100%;
	min-height: 100%;
}
#footer {
    clear: both;
    float: left;
    margin-left: 0;
    width: 90%;
    display: block;
    bottom: 8%;
    text-align: left;
    position: fixed;
    text-shadow: 6px 6px 12px #333;
    letter-spacing: 0%;
    background-image: url(../grafiken/20schwarz.png);
    background-repeat: repeat;
    padding-left: 10%;
    padding-top: 1%;
    max-width: 90%;
    /* [disabled]line-height: 80%; */
    max-height: 150px;
    height: 150px;
    font-family: "agba medium";
}
#quadrat {
		width: 150px;
	height: 150px;
	float: left;
}
#image100 {
}
.hide_tablet {
display: none;
}
.zeroMargin_tablet {
margin-left: 0;
}

}

/* Desktoplayout: 769 bis maximal 1232 px.  Erbt Stile von: den Layouts für Mobilgeräte und Tablet-PCs. */

@media only screen and (min-width: 769px) {
.gridContainer {
    width: 100%;
    padding-left: 0%;
    padding-right: 0%;
    margin: auto;
    margin-left: 0%;
    margin-right: 0%;
    font-family: "agba medium";
}
#LayoutDiv1 {
	clear: both;
	float: left;
	margin-left: 0%;
	width: 100%;
	display: block;
	position: ;
	max-width: 100%;
}
#LayoutDiv2 {
    clear: both;
    float: left;
    margin-left: 10%;
    width: 750px;
    display: block;
    max-width: 750px;
    z-index: 1;
    background-color: #000000;
}
#hintergrund {
 position: fixed; 
  top: -50%; 
  left: -50%; 
  width: 200%; 
  height: 200%;
}
#bgvideo {
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	background-image: url(../ackermann_web/video/foto.jpg) no repeat;
	background-size: cover;
	z-index: -1;
	position: fixed;
}
#foto_fullscreen {
	clear: none;
	float: left;
	max-width: 100%;
	height:auto
	display: block;
	z-index: -1;
}

#text1 {
    clear: both;
    float: left;
    margin-left: 55%;
    width: 35%;
    display: block;
    margin-top: 5%;
    position: absolute;
    line-height: 130%;
}
#foto {
	clear: none;
	float: left;
	margin-left: 0%;
	width: 100%;
	display: block;
	max-width: 115%;
	max-height: 88%;
	position: absolute;
	overflow: hidden;
	min-width: 100%;
	min-height: 100%;
}
#quadrat {
	width: 150px;
	height: 150px;
	float: left;
}
#image100 {
}
.zeroMargin_desktop {
margin-left: 0;
}
.hide_desktop {
display: none;
}

}

#logo {
    clear: both;
    float: right;
    margin-left: 76.2711%;
    width: 23.7288%;
    display: block;
    z-index: 1;
    margin-top: 6%;
    margin-bottom: 50px;
}

#einsvor {
	clear: both;
	float: right;
	right: 3%;
	width: 3%;



	height: 5%
	display: block;
	z-index: 8;
	bottom: 45%;
	position: absolute;
}
#einszurueck {
	clear: both;
	float: left;
	left: 3%;
	width: 3%;



	height: 5%
	display: block;
	z-index: 8;
	bottom: 45%;
	position: absolute;
}

#textzeile {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	bottom: 0%;
	text-align: center;
	position: absolute;
	text-shadow: 6px 6px 12px #333;
	letter-spacing: 0.7em;
	max-width: 100%;
	font-size: 100%;
}
#footer {
    clear: both;
    float: left;
    margin-left: 0;
    width: 90%;
    display: block;
    bottom: 8%;
    text-align: left;
    position: fixed;
    text-shadow: 6px 6px 12px #333;
    letter-spacing: 0%;
    background-image: url(../grafiken/20schwarz.png);
    background-repeat: repeat;
    padding-left: 10%;
    padding-top: 1%;
    max-width: 90%;
    line-height: normal;
    max-height: 150px;
    height: 150px;
    z-index: 2;
    font-family: "agba medium";
}

#bild100 {
	
	float: left;
	width: 90%;	
}

.feststehender-container {
    position: fixed;   /* Positionierung relativ zum Viewport */
    top: 10%;            /* Ganz oben am Rand */
    left: 7%;           /* Ganz links am Rand */
    width: 20%;       /* Volle Breite */
    width: 100px;
    height: 100px;
    border-radius: 50%; /* Macht das Quadrat rund */
    z-index: 1000; /* Hintergrundfarbe, damit der Inhalt darunter nicht durchscheint */
    transform: rotate(-20deg);
    /* 1. Höhe festlegen */
    height: 50px !important;
    /* 2. Breite auf 'auto' zwingen, um Proportionen zu wahren */
    width: auto !important;
    /* 3. Alle eventuellen Störfaktoren aus anderen CSS-Dateien ausschalten */
    max-width: none !important;
    min-width: 0 !important;
    max-height: none !important;
    min-height: 0 !important;
    /* 4. Sicherstellen, dass das Bild nicht gestreckt wird */
    object-fit: contain !important;
    display: block !important;
    border: none !important; /* Falls ein Rahmen stört */
    color: #565656;
}
/* Logo-Proportionen: Verhindert Verzerrung */
.col-logo img {
    height: 50px;         /* Hier die gewünschte Höhe einstellen */
    width: auto;          /* Breite passt sich proportional an */
    display: block;
}