/* Only for debugging */
 
   /*
    * {      
        border: 1px solid #ccc;
	}
	*/
   
    /* Custom styles */

	:root {
		--accent: #669930;
		--dark-grey: #333;
		--light-grey: #eee;
		}
	
	

	a {
	  color: black;
	  text-decoration: none;
	  border-bottom: 1px dotted currentColor;
	}

	a:hover {
	  color: var(--accent);
	  border-bottom: 1px solid currentColor;
	}
	
	/* * * * * * * * * */
	/*  Color schemes  */
	/* * * * * * * * * */
	
	/* Background in accent color */
	
	.bg_accent {
		background-color: var(--accent);
		color: white;
		}
		
	.bg_accent a, .bg_dark a {
		color: white;
		border-bottom: 1px dotted currentColor;
		}
	
	.bg_accent a:hover, .bg_dark a:hover {
	    font-weight: bold;
		border-bottom: 1px solid currentColor;
		}
	
	/* Light grey background */
	
	.bg_light {
		background-color: var(--light-grey);
		}		

	.bg_light h2 {
		color: var(--accent);
		}
		
	/* Dark grey background */
	
	.bg_dark {
		background-color: var(--dark-grey);
		color: white;
		}
  
	/* End of color schemes * * * * */
		
		
	
    @font-face {
        font-family: 'Raleway';
        src: url('/fonts/Raleway-Regular.ttf') format('truetype');
        /* Add additional font variations (e.g., italic, bold) if necessary */
        }
        
	@font-face {
	  font-family: "IcoFont";
	  src: url("/fonts/icofont.woff2") format("woff2"),
	       url("/fonts/icofont.woff") format("woff");
	  font-weight: normal;
	  font-style: normal;
	}
	
    body {
        font-family: 'Raleway', sans-serif; /* Specify Raleway as the font-family */
        margin: 0;
        padding: 0;
        }
    
    h3 {
        margin-top: 48px; /* Adjust margin-top to achieve the desired line height */
        }
    
    .small_font {
        font-size: 0.75em;
        line-height: 0.8;
        }
		
	.white {
		color: #fff;
		}
		
    section, .text-block, .gallery, .footer {
    	padding-top: 20px; /* Add padding to the top of each section */
    	padding-bottom: 20px; /* Add padding to the bottom of each section */
    	margin: 0;
    	}

	.navbar, .navbar-bg {
  		position: fixed;      /* Bleibt oben */
  		top: 0;               /* An Oberkante */
  		left: 0; right: 0;    /* Volle Breite */
  		height: 70px;  /* Feste Höhe = Nav-Höhe */
    	display: flex;	
		}
	
    .navbar {
      color: #fff;
	  z-index: 1000;        /* Über HERO (z-index: 1) */
      align-items: center; /* Vertically center the content */
    }
	
	.navbar-bg {
  	    z-index: 2;        /* Über HERO (z-index: 1) */
		}	  
	  
	.navbar .container {
	    display: flex !important;      /* ← Container auch flex */
	    align-items: center; /* center: Alle Elemente vertikal zentriert, Alternative: 
		align-items: baseline; */
	    justify-content: space-between; /* ← Buttons links, Name rechts */
	    height: 100%;
		}

	/* Links-Bereich (immer links) */
	.nav-left {
	    display: flex;
	    align-items: center;
	    /* flex-shrink: 0; */  /* Nimmt nie weniger Platz als nötig */
		}

	/* Firmenname (immer rechts) */
	.navbar .company-name {
	    font-size: 0.75rem;
	    white-space: nowrap;  /* Kein Umbruch */
	    /* flex-shrink: 0;     */  /* Bleibt rechts */
	    margin-left: auto;     /* ← RECHTSBÜNDIG */
	    text-align: right;
		}	  

	/* Buttons */
	.navbar .button {
	    margin-left: 10px;
	    color: #fff;
		}
		
	.hero {
	  z-index: 3;
	  position: relative;
	  height: 100vh;
	  min-width: 100%;
	  display: flex;
	  align-items: center;
	  background-size: cover;
	  background-position: center;  /* Bild vertikal + horizontal zentriert */
	  background-repeat: no-repeat;
	}

	.hero-bg {
	  position: absolute;
	  top: 0; left: 0;
	  width: 100%; height: 100vh;
	  background-size: cover;
	  background-position: center;
	  z-index: 1;
	}

	.hero-text {
	  position: relative;
	  z-index: 2;
	  color: white;
	  text-shadow: 0 2px 4px rgba(0,0,0,0.5);	  
	}
	
	
    .text-block {
      background-color: #fff /*#f9f9f9*/;
      min-height: calc(100vh - 240px); /* Set minimum height to 100% viewport height minus navbar and footer heights */
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
	
    .text-block .caption {
      margin-bottom: 24px; /* Add space below the caption */
    }

	.di-warning, .di-arrow {
	  float: left;
	  font-size: 2em;
	  line-height: 1;
	  margin: 0.2em 0.3em 0 0;
	  font-family: 'IcoFont';
	}
	
	.di-warning::before {
	  content: "\f025"; /* icofont-warning-alt */
	  color: var(--dark-grey);
	}

	.di-arrow::before {
	  content: "\ea6d"; /* icofont-circled-right */
	  color: var(--accent);
	}


    .gallery-item {
      border: 1px solid #ccc;
      padding: 10px;
      margin-bottom: 20px; /* Add padding at the bottom of image columns */
    }
    .gallery-item img {
      max-width: 100%;
      height: auto; /* Maintain aspect ratio */
      display: block;
	  margin: 0 auto;
    }

    .space-between {
      padding-top: 20px; /* Add padding to the top */
      padding-bottom: 20px; /* Add padding to the bottom */
    }
    
    /* Apply grayscale filter by default to elements with class 'bw-image' */
    .bw-image {
      filter: grayscale(100%);
      transition: filter 0.5s ease; /* Smooth transition for the filter */
    }

    /* Remove grayscale filter on hover or touch for elements with class 'bw-image' */
    .bw-image:hover,
    .bw-image:active {
      filter: none;
    }

    .about_pic {
    	/* display: block;*/
		width: 100%;
		}
	
	.about_t2 {
		display: none;
		}
	
	
	
	
    @media (min-width: 480px) {
        .row {
            display: inline
            }
    }
    
	    
    @media (min-width: 768px) {
        footer .row {
            display: flex; /* to combine with align-items on wide screens*/
		    align-items: flex-end;  /* ← Nur Footer-Row, nicht alle! */
            }

		.about_ti {
		    display: flex;
		    align-items: flex-end;  /* Foto unten bündig */
			}
	
		.about_ti p {
			margin: 0;
			}

		.about_t1 {
			order: 1;
			}
	
	    .about_pic {
	    	order: 2;                  /* Foto RECHTS (nach Text1) */
	    	margin-left: 2rem;         /* Abstand zu Text1 */
	    	}

			
		.photo-overhang {
			  position: relative;
			  right: -60px;
			  /* margin-right: -100px;    */ /* ← 50px nach RECHTS über Grid */
			  }	
			  
		.navbar .company-name {
			  font-size: 2.4rem;
		  	  }
			  
        }
		
	@media (min-width: 1024px) {
		.hero-text {
	  	transform: translateY(-50%); }
		.navbar .company-name {
	    	font-size: 2.4rem;
	    	}
		
		.about_ti { 
		    flex: 2; 
		    display: flex; 
		  	}
  
		.about_t2copy { display: none; }    /* Copy weg */
		.about_t2 { display: block; }    /* Original ein */
		
		}
	
	/* NEU: Sidebar-Hintergrund (vollhöhe) */
	@media (min-width: 1740px) {
		.navbar, .navbar-bg {
	  		position: fixed;
	  		left: 0; top: 0; bottom: 0;
	  		width: 300px;
	  		height: 100vh;
	  	  	flex-direction: column;
	  		justify-content: flex-start;  /* Von oben */
	  		}
  
	  	 
		.navbar .container {
	    	flex-direction: column;
	    	height: 34vh;
	    	align-items: flex-start;
	    	justify-content: center;  /* ← VERTIKAL ZENTRIEREN */
	    	gap: 1.5rem;  /* Zeilenschaltung-Abstand */
		  	}
  
		.navbar .company-name {
			order: -1; 
	    	margin-left: 0;     /* ← Kein auto mehr */
	    	text-align: left;   /* ← Links statt right */
	  		}
	  
	 	.nav-left { order: 1; }
  
		body { margin-left: 300px; }

		.hero { left: -300px; width: calc(100% + 300px); }
	  
		footer {
	    	position: fixed;
	    	left: 0;
	    	bottom: 0;
	    	width: 300px;
	    	height: 66vh;
	    	z-index: 1000;
	    	background: transparent !important; /* überschreibt den dunklen hintergrund */
	    	font-size: 1em;   /* ← Exakt Skeleton body (15px) */
	    	line-height: 1.6;   /* ← Exakt Skeleton body */
			display: flex;
			flex-direction: column;
			justify-content: flex-end;  /* ← TEXT UNTEN andocken */
			}
  
		footer .row {
	  		flex-direction: column;
	  		margin-top: auto;  /* ← .row ans untere Ende von .container */
	  		}
	  
		footer .container {
	    	flex: 1;  /* ← Nimmt 100% Footer-Höhe */
	    	display: flex;  /* ← Container flex */
	    	flex-direction: column;
	  		}
	  
	 	footer .four.columns {
	    	width: 100%;
	    	margin-left: 0;
	  		}
	  
		footer h3 {
	    	font-size: 1em;        /* normale Schriftgröße */
	    	margin-bottom: 1.6em;
	    	text-transform: uppercase; /* ← GROSSBUCHSTABEN */
	  		}

	}
	
	
	/* Dark mode */
		
	@media (prefers-color-scheme: dark) {
	  :root {
	    --accent: #669930;
	    --dark-grey: #1a1a1a;
	    --light-grey: #333;
	  }
  
	  .text-block,
	  .gallery,
	  .footer,
	  body,
	  section {
	    background-color: var(--dark-grey) !important;
	    color: white !important;
	  }
  
	  a {
	    color: white !important;
	    border-bottom-color: white !important;
	  }
	}