/* Allgemeine Styles + Variablen */
:root{
  /* Farben */
  --accent-g: #74B476;    
  --accent-b: #222223;  

  /* Typografie */
  --font-family-base: 'Arial';
  --font-size-logo-text: 2vw;
  --font-size-body:          clamp(16px, 1.543vw, 40px);
  --font-size-h1:            clamp(22px, 1.764vw, 46px);
  --font-size-h2:            clamp(18px, 1.543vw, 40px);
  --font-size-h3:            clamp(26px, 3.527vw, 92px);
  --font-size-h4:            clamp(16px, 1.543vw, 36px);
  --font-size-navbar:        clamp(14px, 1vw, 26px);
  --font-size-language:      clamp(14px, 1vw, 26px);
  --font-size-contact-label: clamp(14px, 1.2vw, 32px);
  --font-size-contact-input: clamp(16px, 1.543vw, 40px);
  --font-size-footer-p:      clamp(12px, 1vw, 22px);
  --font-size-footer-bottom: clamp(10px, 0.9vw, 20px);

  --font-size-user-btn: 23.5px;
  --font-size-burger-icon: 1.5em;
  --font-size-dropdown-arrow: 12px;
  --font-size-fixed-button: 14px;

  /* Body */
  --body-bg-color: #f4f4f4;
  --body-text-color: #222223;
  --body-margin: 0;
  --body-padding: 0;

  /* Header / Navigation */
  --nav-padding-inline: 0; /* war effektiv 0 */
  --nav-z-index: 1000;
  --logo-small-width: 15vw;
  --logo-small-height: 5vw;
  --logo-small-margin-left: 1vw;
  --navbar-width: 20vw;
  --navbar-link-margin-right: 2%;
  --navbar-link-margin-left: 10%;
  --navbar-link-border-radius: 8px;
  --nav-logo-border-radius: 8px;
  --language-switcher-gap: 15px;
  --language-switcher-margin-right: 20px;
  --t-line-height: 1vw;
  --t-line-border-width: 0.15vw;
  --burger-content-top: 60px;
  --language-options-border-radius: 5px;
  --language-options-margin-top: 5px;
  --language-options-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
  --language-options-item-padding: 10px;
  --dropdown-arrow-margin-left: 5px;
  --dropdown-menu-top: 50px;
  --dropdown-menu-min-width: 10px;
  --dropdown-menu-border-radius: 15px;
  --dropdown-menu-padding: 10px;
  --dropdown-menu-margin-top: 10px;
  --dropdown-menu-width: 70px;
  --dropdown-menu-margin-right: 2%;
  --dropdown-btn-padding-block: 8px;
  --dropdown-btn-padding-inline: 8px;
  --dropdown-btn-border-radius: 15px;
  --dropdown-btn-margin-top: 5px;
  --user-btn-size: 40px;

  /* Banner & großes Logo */
  --banner-height: 80%;
  --banner-padding-bottom: 18%;
  --logo-big-border-radius: 4vw;
  --logo-big-padding: 3%;
  --logo-big-margin-top: 10%;
  --logo-big-margin-top-final: 15%;
  --logo-big-width: 40%;
  --logo-big-img-width: 38vw;

  /* Start-Section */
  --start-box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  --start-min-height: 600px;
  --start-heading-margin-top: 120px;
  --start-content-width: 80%;
  --start-paragraph-line-height: 1.6;
  --start-paragraph-top: 50px;
  --start-paragraph-right: 0px;
  --start-paragraph-bottom: 120px;
  --start-paragraph-left: 0px;

  /* Vorteile / Pros */
  --pros-img-width: 50%;
  --pros-width: 80%;
  --pros-gap: 3%;
  --pros-margin-bottom: 10%;
  --pros-heading-margin-bottom: 0.8vw;
  --pros-paragraph-line-height: 1.1;
  --pro-card-height: 22.479vw;
  --pro-card-width: 27.708vw;
  --pro-card-padding: 3.5%;
  --pro-card-border-radius: 4.2vw;
  --pro2-margin-top: 8%;
  --pro3-margin-top: 16%;
  --line-border-top-width: 0.23vw;
  --line-width: 3vw;

  /* Services */
  --services-width: 80%;
  --service-padding-block: 6px;
  --svc-toggle-padding-block: 12px;
  --svc-toggle-border-bottom-width: 0.2vw;
  --svc-icon-size: 22px;
  --svc-icon-line-width: 2.2vw;
  --svc-icon-line-height: 0.34vw;
  --svc-panel-transition-duration: 0.28s;
  --svc-list-item-height: 3vw;
  --svc-list-item-gap: 5vw;
  --svc-list-heading-min: 16vw;
  --svc-list-heading-ideal: 20vw;
  --svc-list-heading-max: 24vw;
  --services-divider-margin-block: 6px;

  /* Kontaktformular */
  --contact-form-margin-block: 10vw;
  --contact-form-width: 80%;
  --contact-form-gap: 2vw;
  --contact-label-gap: 0.5vw;
  --contact-input-border-radius: 1.2vw;
  --contact-input-border-width: 0.2vw;
  --contact-input-padding: 1vw;
  --contact-textarea-height: 20vw;
  --contact-button-margin-left: 2vw;
  --contact-button-border-radius: 3vw;
  --contact-button-width: 16vw;
  --contact-button-height: 4vw;
  --row-gap: 2vw;
  --c-info-margin-bottom: 2vw;
  --contact-status-margin-top: 8px;
  --contact-status-opacity: 0.9;

  /* Fixed-Box / Modal */
  --fixed-padding: 60px;
  --fixed-box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  --fixed-width: 500px;
  --fixed-height: 150px;
  --fixed-border-radius: 15px;
  --fixed-z-index: 6;
  --fixed-button-padding: 10px;
  --fixed-button-margin-block: 30px;
  --fixed-button-margin-inline: 5px;
  --fixed-button-border-radius: 5px;

  /* Contact-Container (unused im aktuellen HTML, aber variiert) */
  --contact-container-border-radius: 15px;
  --contact-container-padding: 20px;
  --contact-container-width: 200px;
  --contact-container-height: 300px;
  --contact-container-left: 60%;
  --contact-container-margin-top: 50px;

  /* Footer */
  --footer-padding-block: 10px;
  --footer-padding-inline: 20px;
  --footer-border-radius: 10px;
  --footer-gap: 2vw;
  --footer-content-width: 80%;
  --footer-content-max-width: 1200px;
  --footer-section-heading-margin-bottom: 0.7vw;
  --social-icon-size: 2vw;
  --footer-bottom-padding-top: 15px;
  --footer-bottom-border-top-width: 0.23vw;
  --footer-bottom-height: 30px;
}

/* Hilfsklassen */
.accent-g { 
	color: var(--accent-g);
}

.accent-b { 
	color: var(--accent-b);
}

/* Body + Überschriften */
body {
    font-family: var(--font-family-base);
    color: var(--body-text-color);
    margin: var(--body-margin);
    padding: var(--body-padding);
    background-color: var(--body-bg-color);
	text-align: center;
}

body h1{
	font-family: var(--font-family-base);
	font-size: var(--font-size-h1);
}

body h2{
	font-family: var(--font-family-base);
	font-size: var(--font-size-h2);	
}

body h3{
	font-family: var(--font-family-base);
	font-size: var(--font-size-h3);	
}

body h4{
	font-family: var(--font-family-base);
	font-size: var(--font-size-h4);	
}

body p{
	font-family: var(--font-family-base);
	font-size: var(--font-size-body);	
}

/* Banner-Style */
.nav-and-lang {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0 var(--nav-padding-inline) 0 var(--nav-padding-inline);
    background-color: transparent;
    position: fixed;
    top: 0;
    z-index: var(--nav-z-index);
    box-sizing: border-box;
    transition: background-color 0.3s ease;
}

.nav-and-lang.scrolled {
    background-color: rgba(0, 0, 0, 0.8); 
	padding-bottom: 0px;
	padding-top: 0px;
}

/* Burger-Menü für kleinere Bildschirme */
.burger_menu {
    display: none; 
}

.burger_icon {
    font-size: var(--font-size-burger-icon);
    cursor: pointer;
    color: white;
}

.burger_content {
    display: none; 
    background-color: #333;
    position: absolute;
    right: 0;
    top: var(--burger-content-top);
    width: 100%;
    text-align: left;
}

.burger_content a {
    color: white;
    padding: 12px 16px;
    display: block;
    text-decoration: none;
}

.burger_content a:hover {
    background-color: #555;
}

.banner {
    position: relative;
    background-color: #0d0d0d;
	background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    height: var(--banner-height);
    /*padding: 1%;*/
    padding-bottom: var(--banner-padding-bottom);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 0;
    margin: 0;
}

.Logo_big {
    text-align: center;
    align-items: center;
    justify-content: center; 
    background-color: #222223; 
	border-color: white;
    color: white;
    border-width: 0.1px;
    border-radius: var(--logo-big-border-radius);
    border-style: solid;
    padding: var(--logo-big-padding);
    margin-top: var(--logo-big-margin-top);
    width: var(--logo-big-width);
    margin: var(--logo-big-margin-top-final) auto auto auto;
}

.Logo_big img {
    width: var(--logo-big-img-width);
}

.Logo_big p {
    font-size: var(--font-size-logo-text);
}

.navbar {
	display: flex;
    align-items: center;
	width: var(--navbar-width);
}

.navbar a {
    color: white;
    text-decoration: none;
    margin: 0 var(--navbar-link-margin-right) 0 var(--navbar-link-margin-left);
    font-size: var(--font-size-navbar);
    border-radius: var(--navbar-link-border-radius);
}

.navbar a:hover {
    /*background-color: #ddd;*/
    color: var(--accent-g);
}

.logo_s {
    margin-left: var(--logo-small-margin-left);
    width: var(--logo-small-width);
    height: var(--logo-small-height);
    border-radius: var(--nav-logo-border-radius);
}

.menu {
	color: white;
	display: flex;
	align-items: center;
}

/* Sprachwechsel-Buttons */
.language-switcher {
    display: flex;
    align-items: center;
    gap: var(--language-switcher-gap);
}

.language-dropdown {
    cursor: pointer;
    display: flex;
    align-items: center;
    color: white;
    font-size: var(--font-size-language);
    position: relative;
    text-decoration: none;
}

.lang {
    text-decoration: none;
    margin: 0 5px;
}

.t_line{
	border-left: var(--t-line-border-width) solid white;
	height: var(--t-line-height);
}

.dropdown-arrow {
    margin-left: var(--dropdown-arrow-margin-left);
    font-size: var(--font-size-dropdown-arrow);
}

.language-options {
    display: none; /* Standardmäßig versteckt */
    position: absolute;
    background-color: #333;
    color: white;
    border-radius: var(--language-options-border-radius);
    margin-top: var(--language-options-margin-top);
    box-shadow: var(--language-options-shadow);
}

.language-options div {
    padding: var(--language-options-item-padding);
    cursor: pointer;
}

.language-options div:hover {
    background-color: var(--accent-g);
}

.language-switcher {
    display: flex;
    text-align: right;
    margin-right: var(--language-switcher-margin-right);
}


#user_btn {
    font-size: var(--font-size-user-btn);
    cursor: pointer;
    background-color: #68aa8e;
    border-radius: 50%;
    background: url(img/Profile_btn.jpg); no-repeat center center;
    background-size: cover;
    width: var(--user-btn-size);
    height: var(--user-btn-size);
    border-style: none;
}

.language-switcher a {
    color: white;
}

.dropdown_menu {
    display: none; 
    position: absolute;
    top: var(--dropdown-menu-top);
    right: 0;
    background-color: #f9f9f9;
    min-width: var(--dropdown-menu-min-width);
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
    border-radius: var(--dropdown-menu-border-radius);
    padding: var(--dropdown-menu-padding);
    z-index: 1;
    margin-top: var(--dropdown-menu-margin-top);
    text-align: center;
    width: var(--dropdown-menu-width);
	margin-right: var(--dropdown-menu-margin-right);
}

.dropdown_menu button {
    background-color: #72c9c1;
    color: white;
    border: none;
    padding: var(--dropdown-btn-padding-block) var(--dropdown-btn-padding-inline);
    cursor: pointer;
    width: 70%;
    border-radius: var(--dropdown-btn-border-radius);
    margin-top: var(--dropdown-btn-margin-top);
    box-sizing: border-box;
    width: 90%;
    max-width: 100%;
}

.show {display:block;}

.dropdown_menu button:hover {
    background-color: #0056b3;
}

.start {
   display: flex;
   flex-direction: column;
   padding: 0px;
   box-shadow: var(--start-box-shadow);
   min-height: var(--start-min-height);
   align-items: center;
   width: 100%;
   margin: 0;
}

.start h1 {
    text-align: center;
    display: flex;
    align-items: center;
    margin-top: var(--start-heading-margin-top);
}

.start p {
    width: var(--start-content-width);
	line-height: var(--start-paragraph-line-height);
	/*margin: var(--start-paragraph-top) var(--start-paragraph-right) var(--start-paragraph-bottom) var(--start-paragraph-left);*/
}

#text-1 {
	text-align: center;
}

.pros img {
    width: var(--pros-img-width);
}

.pros {
    color: white;
    width: var(--pros-width);
    gap: var(--pros-gap);
    display: flex;
    flex-direction: row;
    margin-bottom: var(--pros-margin-bottom);
}

.pros h2 {
    text-align: left;
	margin-bottom: var(--pros-heading-margin-bottom);
}

.pros p {
	width: 100%;
	line-height: var(--pros-paragraph-line-height);
}

.pro1 {
    height: var(--pro-card-height);
	width: var(--pro-card-width);
	padding: var(--pro-card-padding);
    background-color: #222223;
    border-radius: var(--pro-card-border-radius);
	text-align: left;
}

.pro2 {
    height: var(--pro-card-height);
	width: var(--pro-card-width);
	padding: var(--pro-card-padding);
    background-color: #222223;
    border-radius: var(--pro-card-border-radius);
    margin-top: var(--pro2-margin-top);
	text-align: left;
}

.pro3 {
    height: var(--pro-card-height);
	width: var(--pro-card-width);
	padding: var(--pro-card-padding);
    background-color: #222223;
    border-radius: var(--pro-card-border-radius);
    margin-top: var(--pro3-margin-top);
	text-align: left;
}

.line{
	border-top: var(--line-border-top-width) solid var(--accent-g);
	width: var(--line-width);
}

/* ===== Services Accordion ===== */
.services { 
  width: var(--services-width); 
  margin: 0 auto; 
}
.service { 
  padding: var(--service-padding-block) 0; 
}

.svc-toggle{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: transparent;
  border: 0;
  padding: var(--svc-toggle-padding-block) 0;
  cursor: pointer;
  color: inherit;
  border-bottom: var(--svc-toggle-border-bottom-width) solid var(--accent-b);
}
.svc-title{ 
  margin: 0; 
}

.svc-icon{
  position: relative;
  width: var(--svc-icon-size);
  height: var(--svc-icon-size);
  flex: 0 0 var(--svc-icon-size);
}
.svc-icon::before, .svc-icon::after{
  content:"";
  position:absolute;
  top: 50%; 
  left: 50%;
  width: var(--svc-icon-line-width);
  height: var(--svc-icon-line-height);
  background: var(--accent-g);
  transform: translate(-50%, -50%);
}
.svc-icon::after{
  transform: translate(-50%, -50%) rotate(90deg); /* Plus */
}
.svc-toggle[aria-expanded="true"] .svc-icon::after{
  opacity: 0; /* Minus-Zustand (nur waagerechter Strich sichtbar) */
	border-bottom: 0.1vw solid var(--accent-b);
}

.svc-panel{
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--svc-panel-transition-duration) ease, opacity var(--svc-panel-transition-duration) ease;
  opacity: 0.0;
}
.svc-panel.open{
  opacity: 1.0;
}
.svc-panel p{
	text-align: left;
}

#services_header {
	justify-content: center;
}

.svc-list {
	list-style: none;
	padding: 0px;
}

.svc-list li{
	height: var(--svc-list-item-height);
	display: flex;
	align-items: center;
	gap: var(--svc-list-item-gap);
}

.svc-list h4{
	 flex: 0 0 clamp(var(--svc-list-heading-min), var(--svc-list-heading-ideal), var(--svc-list-heading-max));
	text-align: left;
}
.svc-list p{
	
}

/* dezente Trennlinie zwischen Services */
.services hr{
  border: none;
  border-top: 1px solid rgba(255,255,255,.08);
  margin: var(--services-divider-margin-block) 0;
}

.contact_title {
	display: flex;
	justify-content: center;
	width: 100%
}

.contact-form {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin: var(--contact-form-margin-block) 0px var(--contact-form-margin-block) 0px;
	width: var(--contact-form-width);
	gap: var(--contact-form-gap);
}

.contact-form input, textarea {
	box-sizing: border-box;
}

.contact-form label{
  display:flex;
  flex-direction:column;
  align-items: flex-start;
	width: 100%;
	gap: var(--contact-label-gap);
	font-family: var(--font-family-base);
	font-size: var(--font-size-contact-label);
}

.contact-form input{
	width: 100%;
}

.contact-form input{
	border-radius: var(--contact-input-border-radius);
	border: var(--contact-input-border-width) solid var(--accent-b);
	padding: var(--contact-input-padding) var(--contact-input-padding) var(--contact-input-padding) var(--contact-input-padding);
	font-size: var(--font-size-contact-input);
}

.contact-form textarea {
	width: 100%;
	border-radius: var(--contact-input-border-radius);
	border: var(--contact-input-border-width) solid var(--accent-b);
	height: var(--contact-textarea-height);
	font-size: var(--font-size-contact-input);
	padding: var(--contact-input-padding) var(--contact-input-padding) var(--contact-input-padding) var(--contact-input-padding);
}

.contact-form button{
    background-color: var(--accent-g);
	color: white;
	margin-left: var(--contact-button-margin-left); 
	border: none;
	border-radius: var(--contact-button-border-radius);
	width: var(--contact-button-width);
	height: var(--contact-button-height);
	font-family: var(--font-family-base);
	font-size: var(--font-size-contact-input);
}

.row {
	display: flex;
	justify-content: space-between;
	width: 100%;
	gap: var(--row-gap);
}

.c_info {
	margin-bottom: var(--c-info-margin-bottom);
}

#contact_status{ 
	width: 100%;
  display: flex;
	justify-content: center;
	margin-top: var(--contact-status-margin-top); 
	font-family: var(--font-family-base);
	font-size: var(--font-size-contact-input);
	opacity: var(--contact-status-opacity); 
}

.fixed {
    display: inline-block;
    padding: var(--fixed-padding);
    flex-direction: column;
    background-color: yellow;
    position: fixed;
    box-shadow: var(--fixed-box-shadow);
    width: var(--fixed-width);
    height: var(--fixed-height);
    z-index: var(--fixed-z-index);
    border-radius: var(--fixed-border-radius);
    bottom: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    border-style: outset;
}

.fixed button {
    padding: var(--fixed-button-padding);
    margin: var(--fixed-button-margin-block) var(--fixed-button-margin-inline) ;
    font-size: var(--font-size-fixed-button);
    cursor: pointer;
    background-color: white;
    border-radius: var(--fixed-button-border-radius);
    cursor: pointer;
    color: darkred;
}

.fixed button:hover {
    color: black;
}

.contact_container {
    position: relative;
    display: flex;
    text-align: center;
    border-radius: var(--contact-container-border-radius);
    padding: var(--contact-container-padding);
    background-color: #62a287;
    width: var(--contact-container-width);
    height: var(--contact-container-height);
    left: var(--contact-container-left);
    margin-top: var(--contact-container-margin-top);
}

.footer {
	display: flex;
	flex-direction: column;
	justify-content: center; 
	align-items: center;
  background-color: #222223;
  color: white;
  padding: var(--footer-padding-block) var(--footer-padding-inline);
  box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.2);
  border-top-left-radius: var(--footer-border-radius);
  border-top-right-radius: var(--footer-border-radius);
	gap: var(--footer-gap);
}

.footer-content {
	width: var(--footer-content-width);
  display: flex;
	align-items: flex-start;
	flex-direction: row;
  max-width: var(--footer-content-max-width);
}

.footer-section {
	width: 100%;
	flex: auto;
}

.contact-info {
	text-align: left;
}

.social-media {
	text-align: right;
}

.footer-section p,
.footer-section a {
    color: white;
    text-decoration: none;
    transition: color 0.3s;
	margin-top: 0px;
}

.footer-section h1 {
    margin-bottom: var(--footer-section-heading-margin-bottom);
}


.footer-section p {
    font-size: var(--font-size-footer-p);
}

.footer-section a:hover {
    color: var(--accent-g);
}

.social-icon {
    width: var(--social-icon-size);
    height: var(--social-icon-size);
    transition: transform 0.3s;
}

.social-icon:hover {
    transform: scale(1.1);
}

.footer-bottom {
	width: var(--footer-content-width);
  text-align: center;
  padding-top: var(--footer-bottom-padding-top);
  border-top: var(--footer-bottom-border-top-width) solid var(--accent-g);
  font-size: 0.9em;
  color: #ddd;
	height: var(--footer-bottom-height);
}

.footer-bottom p {
    font-size: var(--font-size-footer-bottom);
}

/*
@media (max-width: 834px) {

  .pros {
    width: 100%;
    margin-bottom: 10%;
    padding-inline: 10%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 0;
  }

  .pro1,
  .pro2,
  .pro3 {
    flex: 0 0 80%;
    height: auto;
    margin-right: 16px;
    scroll-snap-align: center;
  }

  .pros img {
    width: 30%;
  }


  .pros::after {
    content: "●   ●   ●";
    display: block;
    text-align: center;
    margin: 16px auto 0;
    font-size: 10px;
    color: #ffffff;
  }
}
/*