/* ============================================================
   FONT & TYPOGRAPHY (angepasst für kompakteren Zeilenabstand)
   ============================================================ */

/* Selbst gehosteter Font "Questrial" */
@font-face {
    font-family: 'Questrial';
    src: url('/wp-content/themes/extendable/fonts/Questrial-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Globaler Reset – Entfernt alle Standardabstände und setzt die Schriftart */
* {
    margin: 0;
    padding: 0;
    font-family: 'Questrial', sans-serif;
}

/* --------------------- Überschriften --------------------- */
/* Hier wurden die line-height-Werte reduziert, um den Zeilenabstand zu verkleinern */

/* h1: Hauptüberschrift */
h1 {
    font-size: 70px;
    font-weight: 400;
    line-height: 1.1;       /* Reduziert von 1.2 auf 1.1 */
    margin-bottom: 20px;
}

/* h2: Zweite Ebene */
h2 {
    font-size: 55px;
    font-weight: 400;
    line-height: 1.1;       /* Reduziert */
    margin-bottom: 20px;
}

/* h3: Dritte Ebene */
h3 {
    font-size: 30px;
    font-weight: 100;
    line-height: 1.2;       /* Statt 1.3 */
    margin-bottom: 18px;
}

/* h4 */
h4 {
    font-size: 25px;
    font-weight: 100;
    line-height: 1.2;       /* Statt 1.3 */
    margin-bottom: 16px;
}

/* h5 */
h5 {
    font-size: 20px;
    font-weight: 100;
    line-height: 1.2;       /* Statt 1.3 */
    margin-bottom: 14px;
}

/* h6 */
h6 {
    font-size: 16px;
    font-weight: 100;
    line-height: 1.2;       /* Statt 1.3 */
    margin-bottom: 12px;
}

/* Erzwinge die Schriftart Questrial bei allen Überschriften */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Questrial', sans-serif !important;
}

/* --------------------- Absätze --------------------- */
/* Absatztext kompakter gestalten */
p {
    font-size: 18px;
    line-height: 1.4;       /* Reduziert von 1.5 auf 1.4 */
    margin-bottom: 20px;
}

/* ============================================================
   FARBEN & HINTERGRÜNDE
   ============================================================ */

/* Gesamter Seitenhintergrund */
body {
    background-color: #FFFCF8;
}

/* ============================================================
   HEADER STYLING
   ============================================================ */

/* Fixierter Header im Ausgangszustand */
header.wp-block-template-part {
  position: fixed;
  top: 20px;                /* 20px Abstand vom oberen Rand */
  left: 0;
  right: 0;
  height: 80px;             /* Header-Höhe */
  background-color: #FFFCF8; /* Startfarbe vor dem Scrollen */
  box-shadow: none;         /* Kein Schatten initial */
  z-index: 1000;
  margin: 0;
  padding: 0;
  transition: background-color 0.5s ease, box-shadow 0.5s ease; /* Sanfte Übergänge */
}

/* Header im aktivierten Zustand (nach Scrollen) */
/* Die Klasse "aktiv" wird per JavaScript hinzugefügt */
header.wp-block-template-part.aktiv {
  background-color: white !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

/* Container für alle Header-Inhalte (Logo, Navigation, Buttons) */
.wp-container-core-group-is-layout-3 {
  display: flex;
  align-items: center;              /* Vertikale Zentrierung */
  justify-content: space-between;   /* Logo links, Navigation/Buttons rechts */
  width: 100%;
  padding: 0 20px;                  /* 20px Abstand zu den Bildschirmrändern */
  box-sizing: border-box;
  height: 100%;
}

/* Logo-Container (linke Seite des Headers) */
.wp-container-core-group-is-layout-1 {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 100%;
}

/* Container für Navigation und Buttons (rechte Seite des Headers) */
.wp-container-core-group-is-layout-2 {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
}

/* Logo – passt sich der Header-Höhe an */
.custom-logo {
  height: 100%;
  width: auto;
}

/* Damit der Seiteninhalt nicht hinter dem fixierten Header verschwindet */
body {
  padding-top: 100px;  /* 20px (Abstand oben) + 80px (Header-Höhe) */
}

/* Topper */

.topTitle .background {
height: 330px!important;
}
.topTitle h1 {
    margin-bottom: 60px;
}

/* ============================================================
   NAVIGATIONS BUTTONS
   ============================================================ */

/* "Einloggen" Button (erster Button) – weißer Button mit schwarzer Umrandung */
.wp-block-buttons .wp-block-button:first-child .wp-block-button__link.wp-element-button {
  border: 2px solid #000;      
  border-radius: 10px;
  padding: 6px 20px;
  background-color: #fff;
  text-decoration: none;
  color: #000;
  
}

/* "Kontakt" Button (zweiter Button) – komplett schwarzer Button mit weißem Text */
.wp-block-buttons .wp-block-button:last-child .wp-block-button__link.wp-element-button {
  background-color: #000;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 6px 20px;
  text-decoration: none;
  display: inline-block;
}


.res_hidden {
display:none;
}

#wpadminbar {
display:none;
}

.detFunction summary svg {
display:none;
}




@media screen and (max-width: 1000px) {
.detFunction summary svg {
display:unset!important;
		    width: 50px;
    margin-left: auto;
    margin-right: 10px;
}
#aussenBilder {
display:none!important;
}
#back-1-res img {
width: calc(100vw - 81px);
}
#back-2-res img {
margin-top: -120%!important;
}
.dFunktionen_content {
display:none!important;
}
.res_hidden.dFunktionen_content {
display:block!important;
}

		.detFunction summary {
				display: flex;
				flex-direction: row-reverse;
				justify-content: flex-end;
				align-items: center;
				padding: 15px;
		}
		.detFunction summary img {
				margin:0!important;
				margin-right:20px!important;
		}
}



@media screen and (max-width: 850px) {
		.registrationForm_main {
				margin: 10px!important;
				width: calc(100vw - 117px)!important;
				padding: 40px!important;
		}
.footer .row {
width: calc(100% - 60px)!important;
}
.pD_itemsZ {
flex-direction: column;
}
.pD_items_i {
    width: calc(100% - 100px)!important;
}
.wp-block-columns.is-layout-flex.wp-container-core-columns-is-layout-1.wp-block-columns-is-layout-flex {
flex-direction: column;
}
.who_sider {
flex-direction: column;
margin-top: 30px;
}
.sider_img {
    height: 440px;
    width: auto;
    margin: 20px;
    margin-bottom:0;
}
.sider_text {
padding:0;
width: 100%;
}
.tt {
    margin: 20px!important;
    margin-top: 0!important;
    border-radius: 0px 0 30px 30px!important;
    padding: 60px 40px!important;
    padding-bottom: 45px!important;
    max-width: 100%!important;
}
.helmut {
flex-direction: column-reverse !important;
}
.dFunktionen_content_side#sidee1 {
    margin-top: 30px!important;
}
#chatVor {
flex-direction: column;
align-items: center;
}
#chatVor div {
width: calc(100% - 40px)!important;
max-width: 400px;
}
.footer {
    flex-direction: column;
}
}






@media screen and (max-width: 760px) {
				.registrationForm {
		    justify-content: space-between!important;
		}
		.mwai-conversation {
				padding:0!important;
		}
		.mwai-input {
				border-radius: 10px!important;
				padding: 15px 10px!important;
				max-height: 120px!important;
		flex-wrap: nowrap!important;
    flex-direction: row!important;
				    margin-top: -20px!important;

		}
		.mwai-input-submit {
		width: auto!important;
    margin-right: auto!important;
		}
		.mwai-input-text textarea {
    max-height: 100px!important;
    overflow: auto!important;
    scrollbar-width: none!important;
		}
		#aiForm .registrationForm_main {
		    margin-top: -50px !important;
    max-height: 75vh;
		}
		.mwai-conversation {
		    min-height: 450px;
		}
		.mwai-conversation {
				height: auto!important;
		}
		.registrationForm_main {
        width: calc(100vw - 75px) !important;
        padding: 27px !important;
    }
}






@media screen and (max-width: 550px) {
		.registrationForm_main {
		    width: calc(100vw - 70px) !important;
    		padding: 27px !important;
		}
h1 {
font-size: 50px!important;
}
h2 {
    font-size: 40px!important;
}
h3 {
    font-size: 24px!important;
}
h4 {
    font-size: 20px!important;
}
.tt {
padding: 40px 20px!important
}
:root {
--wp--preset--spacing--30: min(1rem, 5vw)!important;
}
.pD_items_i {
margin: 0px!important;
margin-top:30px!important;
width: calc(100% - 60px) !important;
}
#chatVor div {
margin-left:0!important;margin-right:0!important;
}
.dFunktionen_content_item {
margin-left:0!important;margin-right:0!important;
width: calc(100% - 40px)!important;
}
.section {
    margin-top: 70px!important;
}
.rM_main {
padding: 30px!important;
}
#back-1-res img {
width: calc(100vw - 50px)!important;
}
.tt {
margin: 10px !important;
margin-top:0!important;
}
.sider_img {
margin: 10px!important;
margin-bottom:0!important;
}
.priceD {
margin-top:100px!important;
margin-bottom:100px!important;
}
.releaseMarch {
margin-top:100px!important;
margin-bottom:100px!important;
}
header.wp-block-template-part {
top: 0 !important;
padding-bottom: 1em !important;
}
.helmut {
        margin-top: 15px!important;
}
.titleZusatz {
    margin-bottom: -10px!important;
    margin-left: 5px!important;
    margin-top: 30px!important;
}
.pD_items_i {
margin-top: 15px !important;
}
.pD_btn {
flex-direction: column!important;
    border-radius: 10px!important;
}
		
		.detFunction summary img {
				margin-right: 15px !important;
				width: 60px !important;
				padding: 10px !important;
				border-radius: 15px !important;
		}
}






.dF_ausklappen {display:none;}

@media screen and (max-width: 450px) {
		.topTitle h1 {
    text-align: center!important;
}
		.detFunction summary svg {
				display:none!important;
		}
		.dF_ausklappen {display:block;}
		.detFunction summary {
        display: flex;
        flex-direction: column-reverse;
        justify-content: flex-end;
        align-items: center;
        padding: 15px;
        text-align: center;
    }
		.detFunction {
		    margin-top: 25px;
		}
}








/* ============================================================
   ENDE DES CSS
   ============================================================ */