@charset "utf-8";
/* CSS Document */

    @font-face {
    font-family: 'adrianna-condensed-extrabold';
    font-style: normal;
    font-weight: normal;
    src: local('adrianna-condensed-extrabold'), url('adrianna-condensed-extrabold.woff') format('woff');
    }

   @font-face {
    font-family: 'Calibri Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Calibri Regular'), url('Calibri.woff') format('woff');
    }

   @font-face {
    font-family: 'adrianna-condensed-thin';
    font-style: normal;
    font-weight: normal;
    src: local('adrianna-condensed-thin'), url('adrianna-condensed-thin.woff') format('woff');
    }

html, body {
height: 100%;
margin: 0;
padding: 0;
font-family: 'Futura-Win';
	font-size: 20px;

}

body {
	font-size: 100%;
}

#wrapper {
    position: relative;
    min-height: 100%;
    width: 100%;
    margin: 0 auto;
}

#content {
  padding-bottom: 350px;
  overflow: hidden;
}

#info_aussen {

}

#info_innen {

}

#info_innen1 {
	width: 1200px;
	margin: 0 auto 0 auto;
}

#untertitel {
	float: right;
	text-align: right;
	margin-right: 51.5%;
	margin-top: -10px;
}

#inhalt_aussen {
	width: 100%;
	margin-top: 30px;
}

#inhalt_aussen_u {
	width: 100%;
	margin-top: 220px;
	overflow: hidden;
	margin-bottom: 40px;
}

#inhalt_innen {
	width: 1200px;
	margin: 0 auto 0 auto;
}

#inhalt_innen_u {
	width: 1200px;
	margin: 0 auto 0 auto;
}

#clear {
	float: none;
	clear: both;
}

#pflex {
  margin-top: 50px;
  
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  margin-bottom: 40px;

}

#p1, #p2, #p3 {
	display: inline-block;
	width: 27%;
	height: 300px;
	padding: 3% 2% 5% 2%;
	margin-bottom: 20px;
	overflow: hidden;
}

#p1:hover {
	background: #d3d800;
}

#p2 {
	margin-top: 20px;
}

#p3 {
	margin-top: 40px;
}

#links {
	float: left;
	width: 45%;
}

#links_u {
	float: left;
	width: 50%;
	text-align: center;
	margin-top: 100px;
}

#rechts {
	float: right;
	width: 45%;
	padding-top: 40px;
}

#text {
	text-align: justify;
}

#diagonale {

}

#diagonale_r {
	margin-top: 100px;
	float: right;
}

#schlagtext {
	width: 100%;
	text-align: center;
	transform: rotate(2.9deg);
}

#button {
	display: inline-block;
	padding: 1% 3% 1% 3%;
	background: #d3d800;
	border-radius: 5px;
	font-family: 'Calibri Regular';
	color: #000;
}

#footer_aussen {
	margin-top: 0px;
  	position:absolute;
  	bottom:0px;
  	width:100%;
  	height: 300px;
}

#footer_innen {
	width: 1200px;
	margin: 0 auto 0 auto;
}

#f1 {
	float: left;
	width: 25%;
	padding-top: 100px;
	margin-right: 5%;
}

#f2 {
	float: left;
	width: 30%;
	height: 300px;
	display: flex;
  flex-direction: column;      /* Elemente untereinander anordnen */
  justify-content: flex-end;
}

#f3 {
	padding-top: 110px;
	float: right;
	width: 25%;
	text-align: right;
	padding-right: 15%;
}

.schraege_box {
  width: 300px;
  height: 200px;
  background-color: #ffffff;
  /* Schneidet die Box zu: Oben links (0 0), Oben rechts (100% 0), Unten rechts (79% 100%), Unten links (0 100%) */
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 75%);
}

.schraeger_schatten {
	filter: drop-shadow(10px 10px 15px rgba(0, 0, 0, 0.3));
}

.schraege_box_footer {
  width: 300px;
  height: 200px;
  background-color: #d3d800;
  /* Schneidet die Box zu: Oben links (0 0), Oben rechts (100% 0), Unten rechts (79% 100%), Unten links (0 100%) */
  clip-path: polygon(0 0, 100% 25%, 100% 100%, 0 100%);
}

.schraege_box_portfolio {
  background-color: #ececec;
  /* Schneidet die Box zu: Oben links (0 0), Oben rechts (100% 0), Unten rechts (80% 100%), Unten links (0 100%) */
  clip-path: polygon(0 0, 100% 4.5%, 100% 100%, 0 95.5%);
}

.schraege_box_portfolio:hover {
  background-color: #d3d800;
  /* Schneidet die Box zu: Oben links (0 0), Oben rechts (100% 0), Unten rechts (80% 100%), Unten links (0 100%) */
  clip-path: polygon(0 0, 100% 4.5%, 100% 100%, 0 95.5%);
}

.header {
	font-family: 'adrianna-condensed-extrabold';
	font-size: 45px;
	color: #d3d800;
}

.schlagzeile {
	font-family: 'adrianna-condensed-extrabold';
	font-size: 45px;
	color: #d3d800;
}

.header_text {
	font-family: 'adrianna-condensed-thin';
	font-size: 50px;
	color: #000000;
}

.ce-bodytext {
	font-family: 'Calibri Regular';
	font-size: 20px;
	line-height: 30px;
	color: #000;
}

.schlagtext {
	font-family: 'adrianna-condensed-extrabold';
	font-size: 30px;
	color: #000;
}

.kontakt {
	font-family: 'adrianna-condensed-thin';
	font-size: 45px;
	color: #000;
}

.name {
	font-family: 'adrianna-condensed-thin';
	font-size: 40px;
	line-height: 45px;
	color: #000;
}

.untertitel {
	font-family: 'adrianna-condensed-thin';
	font-size: 20px;
	letter-spacing: 2px;
	color: #000;
}

.container {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 100px;
}

.container::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  aspect-ratio: 190 / 8;
  /* Verlauf von oben-links nach unten-rechts mit 2px Strichstärke */
  background: linear-gradient(2.2deg, transparent calc(50% - 2px), #000 50%, transparent calc(50% + 2px));
  pointer-events: none; /* Klick-Ereignisse gehen durch die Linie hindurch */
}

/* FOOTERNAVIGATION Definitionen */

#navf, #navf ul {
  margin-top: 0px;
  float: left;
  font-family: 'Armata', sans-serif;
  font-size: 14px;
  line-height: 22px;
  list-style: none;
  font-weight: normal;
  margin-left: -40px;
}

#navf li {
}

#navf li a:link, #navf li a:visited {
  color: #fff;
  text-decoration: none;
}

#navf li a:hover {
  color: #589edd !important;
  text-decoration: none;
}

.navfa a {
  color: #589edd !important;
  text-decoration: none;
}

.navfa a:link  {
  color: #589edd !important;
  text-decoration: none;
}

.navfa a:active {
  color: #589edd !important;
  text-decoration: none;
}

.navfa a:hover {
  color: #589edd !important;
  text-decoration: none;
}

.line-container {
  width: 100%;
  max-width: 1920px;
  /* Bestimmt das Breiten-Höhen-Verhältnis, z.B. 16:9 */
  aspect-ratio: 190 / 8; 
  margin-top: -40px;
  z-index: 50;
}

.diagonal-svg {
  width: 100%;
  height: 100%;
}

:root {
  /* Das geforderte Verhältnis von 192 zu 8 */
  --ratio-w: 192;
  --ratio-h: 8;
  
  /* Die feste Höhe an der linken Kante */
  --base-height: 160px;
}

.diagonal-wrapper {
  width: 100%;
  filter: drop-shadow(0px 15px 10px rgba(0, 0, 0, 0.3));
  margin-bottom: 50px;
}

.diagonal-container {
  width: 100%;
  background-color: #fff;
  box-sizing: border-box;
  
  /* Inhalt zentrieren und beschränken, damit er nicht in die Schräge ragt */
  padding: 20px; 

  /* 1. Berechne die dynamische Höhe der Schräge (wächst mit der Breite) */
  --cut-height: calc(100cqw * var(--ratio-h) / var(--ratio-w));
  
  /* 2. Die Gesamthöhe des Containers ist die linke Basis (120px) + die Schräge */
  height: calc(var(--base-height) + var(--cut-height));

  /* 3. Der Clip-Path schneidet das Element perfekt ab */
  /* Oben links (0% 0%), Oben rechts (100% 0%), Unten rechts (100% 100%) */
  /* Unten links wird exakt auf die gewünschten 120px angehoben */
  clip-path: polygon(
    0% 0%, 
    100% 0%, 
    100% 100%, 
    0% var(--base-height)
  );
}

/* 1. Ihr bestehendes TYPO3-Gitter */
#inhalt_innen {
  display: flex;
  gap: 40px;
  align-items: flex-start;
}

/* 2. Der Bild-Container wird zur sicheren Basis */
#links.diagonal-image-container {
  flex: 1;
  position: relative;
  /* Verhindert unter allen Umständen, dass TYPO3 das Bild auf 0px kollabieren lässt */
  display: block !important; 
  width: 100% !important;
  height: auto !important;
  padding: 0;
  
  /* Radikaler Reset: Wir entfernen alle fehleranfälligen Pfade komplett */
  clip-path: none !important;
  -webkit-clip-path: none !important;
}

/* 3. Das Bild bleibt komplett normal (somit kann es nie wieder verschwinden!) */
#links.diagonal-image-container img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* 4. DIE OBERE KANTE: Ein weißes Keil-Dreieck überlagert die rechte obere Bildecke */
#links.diagonal-image-container::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  
  /* Berechnet die exakte Schrägenhöhe im Verhältnis 192:8 basierend auf 100vw */
  height: calc(100vw * 8 / 192); 
  
  /* Erzeugt ein perfektes, scharfes weißes Dreieck */
  background: linear-gradient(to bottom left, #ffffff 49.5%, transparent 50.5%);
  z-index: 10;
  pointer-events: none; /* Macht das Dreieck für Mausklicks unsichtbar */
}

/* 5. DIE UNTERE KANTE: Ein weißes Keil-Dreieck überlagert die linke untere Bildecke */
#links.diagonal-image-container::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  
  /* Haargenau die gleiche Höhe für absolute Parallelität */
  height: calc(100vw * 8 / 192); 
  
  /* Erzeugt das spiegelverkehrte Dreieck für die Unterseite */
  background: linear-gradient(to top right, #ffffff 49.5%, transparent 50.5%);
  z-index: 10;
  pointer-events: none;
}

/* 6. Die rechte Text-Spalte optisch anpassen */
#rechts {
  flex: 1;
  /* Schiebt Ihren Header-Text genau so weit nach unten, wie die obere Schräge tief ist */
  padding-top: calc(100vw * 8 / 192);
}