/* Dialogkultur Copyright 2025 */

/* grundsätzliche Vorgaben */
	:root {
			--blau:		#001945;	/* primäre Hintergrundfarbe */
			--schwarz:	#2F2F2F; 	/* primäre Textfarbe */
			--weiss:	#FEFEFE; 	/* sekundäre Textfarbe */
			--gruen:	#7aaf3f; 	/* Akzentfarbe 1 */
			--gold:		#AD8B47; 	/* Akzentfarbe 2 (Hintergrund) */
			--grau:		#B7B7B7; 	/* Akzentfarbe 3 */
			
			--cardcolor: 	#ddd;	/* ??? */
		}
	
	
	body{
		font-family: Arial, Helvetica, sans-serif;
		text-align: center;
		scroll-behavior: smooth;
	}

	/* Links */
		a:link {
		    text-decoration:none;
		    text-transform: none; 
		    color: var(--blau);
	    }
	    a:visited {
		    text-decoration:none;
		    text-transform: none; 
		    color: var(--blau);
	    }

	/* Absatz */	
		p {
            font-size: 1.1em;
            line-height: 1.6;
			text-align: inherit;
        }
		
	/* Überschriften */
		h1 {
			font-size: 2em;
			font-weight: 600;
			text-align: center;
		}
		h2 {	
			font-size: 1.5em;
			font-weight: 500;
			text-align: center;
		}
		h3 {	
			font-size: 1.25em;
			font-weight: 400;
			text-align: center;
		}
		
	/* Standard Container */
		.flexcontainer {
			border-style: solid; border-width: 0px; border-color: red;
			width: 1200px;
			max-width: 80%;
			margin: auto;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: center; /* horizontal zentrieren */
			align-items: center; /* vertikal zentrieren */
		}
		.flexcontainer > section {		
			border-style: solid; border-width: 0px; border-color: red;
			text-align: center;
		}

		.boxwshadow {
			background-color: var(--grau);
			max-width: 90%;
			/* min-height: 50px; */
			margin: auto; 
			padding: 25px; 
			border: 0px solid; 
			box-shadow: 0px 0px 20px #888888;
		}			


/*navigation NEU 2025*/
		.logo {
			flex: 0 0 auto;
		}

		.flexnavi {
			border-style: solid; border-width: 0px; border-color: red;
			width: 1200px;
			max-width: 90%;
			margin: auto;
			display: flex;
			justify-content: space-between; /* Abstand zwischen Logo und Navigation */
			align-items: center;
			padding: 10px;
			flex-wrap: wrap; /* wichtig für Zeilenumbruch */
		}

		.navigation {
			display: flex;
			justify-content: flex-end;
			align-items: center;      /* Vertikal zentrieren */
			gap: 20px;                /* Fester Abstand zwischen den Sections */
			flex-wrap: wrap;          /* wichtig für Zeilenumbruch */
		}
		
		.navigation a {
			color: var(--blau);
		}
		
	/* 🔽 Medienregel für kleinere Bildschirme */
		@media (max-width: 768px) {
			.flexnavi {
				flex-direction: column;     /* Stapelt Logo & Menü vertikal */
				align-items: flex-start;    /* Logo und Menü linksbündig */
			}
			.navigation {
				flex-direction: row;          /* sorgt für horizontale Anordnung */
				justify-content: flex-start;  /* Optional: Menüpunkte auch linksbündig */
				gap: 15px;                    /* horizontaler Abstand zwischen Menüpunkten */
				margin-top: 10px;             /* Abstand zum Logo */
				flex-wrap: wrap;              /* falls nötig, umbrüche erlauben */
			}	

			.navigation a {
				font-size: 1.2em;
			}
		}


/* Responsive Anpassung für Overlays */
		.ht1 { /* Texte für kleine Bildschirme ausblenden */
			display: none;
		}

		@media screen and (max-width: 1000px){
			.ht { /* Texte für großen Bildschirm */
				background-color: var(--grau);
				opacity: 0;
			}
			.ht1 {
				display: initial;
			}
		}