/*
Theme Name: Hugos Theme
Author: Hugo Reuter
Author URI: https://hugoreuter.de
*/

/*Seiten*/
:root {
    font-family: 'Trebuchet MS', sans-serif;
    font-size: 16px;
}	
body {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main{
	flex:1;
	padding:0px;
}
ul {
	list-style:none;
}
h3 {
   color: #0849A5;
}
h2 {
   color: black;
}
.Seitentitel, .Seitentitel-Startseite{
	margin-top:0px;
	margin-left:0px;
}
.Hintergrund{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-image: url('/wp-content/uploads/2025/10/1520119475907.jpeg');
  background-size: cover;
  background-position: center;
  z-index: -1;
}
h1 {
	color: black;
}
p{
	margin:0px;
}

.firmenlogo-container {
	height: 200px;
	background-image: url('/wp-content/uploads/2025/04/179125482.jpg');
  	background-size: cover;         /* Bild füllt den Bereich aus */
  	background-repeat: no-repeat;   /* Kein Wiederholen */
  	background-position: top;    /* Zentriert das Bild */
  	margin-left: 120px;
    margin-right: 120px;
}
.firmenlogo {
  	width: 350px;
    height: 200px;
    object-fit: contain;
	float:left;
	box-sizing: border-box;
	margin-left:10px;
}
main {
	background-color:white;
  	margin-left: 120px;
    margin-right: 120px;
	background-color:white;
	padding:20px;
	margin-top:20px;
	margin-bottom:20px;
}
.Seite a {
 	color:black;
}
.Detailseite{
	max-width: calc(100% - 240px);
}
.Detailseite ul {
  list-style-type: disc;   /* oder circle, square, decimal */
  list-style-position: outside; /* Punkte außerhalb des Textblocks */
  margin-left: 1.5em;      /* etwas Abstand für bessere Lesbarkeit */
  padding-left: 1.5em;
}

/*Beiträge */
.Beitrag {
	background-color: white;
	color:black;
	text-align: justify;
  	display: block;
  	overflow: hidden;
	margin-top:0px;
	padding:0px;
}
.Beitrag figure img {
  	width: 100%;
  	height: auto;
  	max-height: 100%;
  	display: block;
  	object-fit: contain;
	float: left;
	margin-bottom:20px;
	box-sizing: border-box;
}
figcaption {
	display: block;
  	text-align: left;
	color:black;
	font-size:70%;
}
figure {
  	display: block; 
  	text-align: left;
	margin-right: 40px;
  	padding: 0;
  	max-height: 100%;
	float:left;
	width: 38.2%;
}
.Beitrag a {
	color:black;
	margin-top: 0px;
  	padding: 0px;
}
.Beitrag h3 {
	color:black;
	margin:0px;
  	padding: 0;
}
.Beitrag p {
	color:black;
	margin-top:20px;	
	margin-bottom:20px;
  	padding: 0;
}
.Seitennavigation {
	height:40px;
	background-color:white;
    background-color: white;
	margin-top:0px;
}
.Seitennavigation a {
	color: #0849A5;
	text-decoration: none;
	padding-top:20px;	
}

/*Projekt Seite*/
.projekte-container {
	display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    box-sizing: border-box;
    top:0;
	padding:0px;
	margin:0px;
	background-color:white;
	gap:20px;
}
.projekt-element { 
    background-color: white;
    color: white;
	margin:0px;
	position: relative;
  	flex: 1 calc(33.333% - 20px);
}
.projekt-element-detail { 
	position: relative;
    background-color: white;
    color: white;
    padding: 0px;
	margin:0px;
    width: 100%;
    box-sizing: border-box;
}
.projekt-bild {
    display: block;
    width: 100%;
    height: 25vh;
    object-fit: contain;
}
.projekt-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0; /* Anfangs unsichtbar */
    transition: opacity 0.3s;
    background-color: #0849A5;
}
.projekt-element:hover .projekt-overlay {
 	opacity: 1;
}
.projekt-titel {
    color: white;
    text-decoration: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    padding: 20px;
 	display: block;  
    white-space: normal;  /* Mehrzeilige Anzeige erlauben */
    word-break: keep-all; /* Verhindert unschöne Worttrennung */
}
img[src=""] {
   	content: url('');
}

/* NAVIGATION */
nav { 
    margin-bottom: 0;
    top: 0;
    z-index: 1000;
    position: sticky;
    background-color: #0849A5;
    max-width: calc(100% - 240px); /* 120px links + 120px rechts */
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
}
nav .menu {
    display: flex;
    justify-content: left;  /* Zentriert die Menüpunkte horizontal */
    align-items: left;
    flex-wrap: wrap;          /* Falls zu viele Menüpunkte: bricht um */
    list-style: none;
    margin: 0;
    padding: 0;
	height:40px;
}
.menu ul{
	display:flex;
	flex-direction: row; /* horizontal */
}
nav li {
	list-style: none;
    flex-shrink: 0;
	height:40px;
}
nav a {
    display: flex;
    align-items: center;
    height: 100%;
    color: white;
    text-decoration: none;
    white-space: nowrap;
	padding-left:20px;
	padding-right:20px;
}
nav a:hover {
    color: black;
    background-color: rgba(250, 250, 250, 90%);
    text-decoration: underline;
}
/* Aktuelles Menüelement */
.current-menu-item {
    background-color: rgba(250, 250, 250, 90%);
}
.current-menu-item a {
    color: black;
}
.menu-button {
	display: none;
	background-color:white;
}
.menu-icon-1 svg path {
    display: none;
}
.menu-icon-2 svg path {
    display: none;
}
.sidebar {
	position:absolute;
	width:100%;
	top: 0;
	margin:0px;
	padding:0px;
	height:100vh;
	z-index:999;
	background-color: #0849A5;
	display:none;
	flex-direction:column;
	align-items: flex-start;
	justify-content: flex-start;
}
.sidebar li {
	list-style:none;
	height:80px;
	width:100%;	
}
.sidebar a {
	color:white;	
}	

/*Footer Menü Navigation*/
.menu-footer {
	display: inline-flex;
	list-style-type:none;
	text-decoration: none;
    margin-top: 20px;
	padding-left:20px;
}
.menu-footer-container {
	background-color: #094CA3;
	color: white;
	height: 200px;
    margin-left: 120px;
    margin-right: 120px;
}
.menu-footer a {
	color: lightgray;
	text-decoration: none;
	padding-right: 20px;
}
.menu-footer a:hover {
	color: white;
	text-decoration: underline;
}

/*Mobile*/
@media only screen and (max-width: 1000px) {
h1	{
	font-size:6vmin;
	margin:40px
}
nav,
main, 
.menu-footer-container,
.Startseite,
.firmenlogo-container{
	max-width: calc(100% - 80px);
	margin-left:40px;
	margin-right:40px;
}
.Detailseite{
	max-width: calc(100% - 80px);
}
.firmenlogo{
		box-sizing: border-box;
	width:80%;
	}
.projekt-titel,
.Datenschutz,
.Impressum,
.Beitrag,
.Seitennavigation,
.beitrag-navigation,
.Seite p {
 	font-size: 3vmin;
	font-style:none;
}
.menu-footer a {
 	font-size: 16px;
}
.projekte-container {
    flex-direction: column;
}
.projekt-element {
	width:100%;
}
ul.menu {
	display:none;
}
li#menu-item-0-sidebar .logo {
	filter: invert(100%);
	padding-left:0px;
	height:40px;
	width:40px;
}
.menu-button {
	display: flex;
	align-content:flex-start;
	background-color:white;
}
.menu-icon-2 {
    display: flex;
	align-items: left;
	padding-left:20px;
	margin:0px;
}
.menu-icon-1 {
    display: flex;
	align-items: left;
	padding-left:20px;
	margin:0px;
}
.menu-icon-2:hover {
background-color:white;
	}
li.menu-button {
	padding-top:40px;
	padding-bottom:40px;
}
nav li {
	list-style:none;
	background-color: #0849A5;
}
figure {
  	display: block; 
	width: 100%;
}
}