/*  
	Der * definiert eine globale Variable. Den sogenannten "global reset".
	Die Schrifttype wird mit font-family auf eine Standard Schrift eingestellt. So wird erreicht, dass IMMER ALLE Schriften denselben font haben. Sollten später zB, Überschriften davon abweichen, müssen sie gesondert definiert werden.
*/
*
{
/* margin definiert den Aussenabstand einer Box */	
	margin:0px;	
/* padding definiert den Innenabstand einer Box */
	padding:0px;
/* font-family definiert die Schriftart */	
	font-family: "IBM Plex Mono", monospace;
/* position:relative definiert die Startposition einer Box */	
	position:relative;
/*  box-sizing:border-box definiert das padding und border NICHT zu Breite und Höhe dazu addiert werden  */	
	box-sizing:border-box;
}

html,body
{
	height:100%;
	scroll-behavior: smooth;
}

body 
{
	background:rgb(227, 227, 227);
	color:black;
	margin:0px;	
}

#mama
{
	width:1440px;
	background:rgb(255, 255, 255);
	margin:auto;
	/* chatGPT: */
	display: flex;
    flex-direction: column;
}

#eins
{
	height:500px;
	_background:pink;
}

h1
{
	_background: hotpink;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 270%;
	margin-left: 350px;
	padding-top: 110px;
}

/* Logo "Designtes" */
.logo {
    width: 300px;      /* nach Bedarf anpassen */
    height: auto;
    display: block;
    margin-bottom: -1.2em;
	_background: rgb(8, 180, 168);
}
  /* Logo Ende */

.text
{
	font-family: "Plus Jakarta Sans", sans-serif;
	font-weight: 200;
}

#zwei
{
	height:467px;
	_background:orange;
}
/*
#navi (alt)
{
	_background:teal;	
	display: flex;
	justify-content:center;
	align-items: center;
	margin-top: 20px;
	_padding: 0 52px 0 52px;
}
*/

/* ---------- DESKTOP: NAV / .img-area Overlay (einfügen VOR Media Queries) ---------- */

#navi {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	gap: 30px;
	margin-top: 20px;
	flex-wrap: nowrap;
  }
  
  .img-area {
	position: relative;
	width: 422px;
	height: 467px;
	flex: 0 0 422px;
	overflow: hidden;
	display: inline-block;
  }
  
  .img-area > a {
	position: absolute;
	inset: 0;
	display: block;
	z-index: 3;
	text-decoration: none;
  }
  
  .img-area img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: opacity 400ms ease;
	pointer-events: none;
  }
  
  .img-area .img-back  { z-index: 1; opacity: 0; }
  .img-area .img-front { z-index: 2; opacity: 1; }
  
  .img-area:hover .img-back  { opacity: 1; }
  .img-area:hover .img-front { opacity: 0; }
  
  figure {
	margin: 0;
	display: inline-block;
	vertical-align: top;
  }  

#drei
{
	height:1300px;
	_background:salmon;
}

#drei-mobile
{
	display:none
}

.trenner-mobile
{
	display: none;
}

/*  Illustriertes */
#vier
{
	height:250px;
	_background:firebrick;
}

#vier .navi-breadcrumbs
{
	_background: rgb(222, 73, 249);
	margin-left:70px;
	margin-top: -66px;
}

.navipunkt
{
	_background: red;
	float: left;
	margin:30px 15px;
}

/* chatGPT: 
.navipunkt { position: relative; z-index: 9999; } 
.navipunkt a { position: relative; z-index: 9999; cursor: pointer; }
*/

#fuenf
{
	height:3000px;
	_background:rgb(34, 87, 178);
}

h2
{
	margin-left:80px;
	font-weight: 300;
	margin-bottom: 30px;
}

p
{
	_background: rgb(228, 206, 8);
	margin-left:80px;
	margin-bottom: 45px;
	font-weight: 400;
	font-size: 90%;
}

.inhalt
{
	_background: khaki;
	width: 800px;
	margin: auto;
 	line-height: 350px;
	text-align: center;
}

#illu1-mobile, #illu2-mobile, #illu3-mobile, #illu4-mobile, #illu5-mobile, #digi1-mobile, #digi3-mobile, #digi4-mobile, #typo4-mobile, #typo5-mobile, #logos-mobile, #typo6-mobile, #typo7-mobile, #typo1-3-mobile
{
	display: none;
}

/*  Digitales */
#sechs
{
	height:250px;
	_background:rgb(34, 178, 154);
}

#sechs .navi-breadcrumbs
{
	_background: rgb(222, 73, 249);
	margin-left:70px;
	margin-top: -49px;
}

#sieben
{
	height:4180px;
	_background:rgb(2, 123, 103);
}

#sieben .inhalt
{
	width: 1100px;
}

/*  Typografiertes */
#acht
{
	height:250px;
	_background:rgb(124, 255, 24);
}

#acht .navi-breadcrumbs
{
	_background: rgb(222, 73, 249);
	margin-left:70px;
	margin-top: -92px;
}

#neun
{
	height:8600px;
	_background:rgb(79, 164, 14);
}

#neun .inhalt
{
	width: 1200px;
}

#tmobile img
{
	margin-right: 50px;
}

#ed1
{
	left: -110px;
}

#logos
{
	left: 55px;
	_background: gray;
}

#footer
{
	height:165px;
	_background: rgb(209, 139, 28);
}

#footer .navi-breadcrumbs
{
	_background: rgb(222, 73, 249);
	margin-left:70px;
	margin-top: -24px;
}

#impressum
{
	_background: rgb(217, 199, 39);
	width: 95%;
	padding-top: 110px;
	padding-bottom: 5px;
	padding-right: 120px;
}

#impressum h1
{
	margin-top: -110px;
}

a
{
	color:black;
	text-decoration:none;
	font-family: "Plus Jakarta Sans", sans-serif;
}



/* MEDIA QUERY */

/* ---------- Media Query für mittelgroße Bildschirme (bis 1400px) ---------- */
@media screen and (max-width: 1400px) {

	.logo {
        max-width: 320px;
    }

	/* NAV: zentriert, Elemente bleiben nebeneinander (können schrumpfen) */
	#navi {
	  display: flex;
	  justify-content: center;
	  align-items: flex-start;
	  gap: 30px;
	  margin-top: 20px;
	  flex-wrap: nowrap;        /* keine Umbrüche; falls Wrap gewünscht, setze auf wrap */
	  overflow: visible;
	}
  
	/* .img-area: flexibel, behält Seitenverhältnis */
	.img-area {
	  position: relative;
	  flex: 0 1 calc((100% - 60px) / 3); /* drei Spalten, Gap berücksichtigt */
	  min-width: 140px;                   /* verhindert zu starkes Schrumpfen */
	  max-width: 422px;
	  width: 100%;
	  height: auto;
	  aspect-ratio: 422 / 467;            /* sorgt dafür, dass Box sichtbar bleibt */
	  overflow: hidden;
	}
  
	/* Sicherstellen, dass Link und Bilder die .img-area füllen.
	   Wir setzen position für Bilder auf absolute (Referenz ist .img-area) */
	.img-area > a {
	  position: absolute;
	  inset: 0;
	  display: block;
	  z-index: 3;
	  text-decoration: none;
	}
  
	.img-area img {
	  position: absolute;
	  inset: 0;
	  width: 100%;
	  height: 100%;
	  object-fit: contain; /* contain verhindert Abschneiden bei kleiner Breite */
	  transition: opacity 300ms ease;
	  display: block;
	  pointer-events: none;
	}
  
	/* Hover / Overlay: konsistente Reihenfolge */
	.img-area .img-back  { z-index: 1; opacity: 0; transition: opacity 300ms ease; }
	.img-area .img-front { z-index: 2; opacity: 1; transition: opacity 300ms ease; }
  
	.img-area:hover .img-back  { opacity: 1; }
	.img-area:hover .img-front { opacity: 0; }

	/* Hover nur auf Geräten mit Maus / feinem Pointer */
@media (hover: hover) and (pointer: fine) {
	.img-area:hover .img-back  { opacity: 1; }
	.img-area:hover .img-front { opacity: 0; }
  }  
  
	figure {
	  margin: 0;
	  width: 100%;
	  display: inline-block;
	  vertical-align: top;
	}
  }
  
  /* ---------- Media Query für kleine Bildschirme / Mobile (bis 800px) ---------- */
  @media screen and (max-width: 800px) {

	.logo {
        max-width: 220px;
        margin-bottom: -1.3em; /* optional feinjustieren */
    }
  
	/* Grundcontainer */
	#mama {
	  width: 98%;
	  height: auto;
	}
  
	#eins {
	  height: 260px;
	}
  
	h1 {
	  font-size: 180%;
	  margin-left: 30px;
	  padding-top: 40px;
	}
  
	/* NAV: kompakt, drei Elemente nebeneinander (kein Umbruch) */
	#zwei {
	  height: auto;
	}
  
	#navi {
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  gap: 10px;
	  margin-top: 12px;
	  flex-wrap: nowrap;            /* keine Umbrüche */
	  overflow-x: auto;             /* erlaubt horizontales Scrollen, falls nötig */
	  -webkit-overflow-scrolling: touch;
	}
  
	/* .img-area mobil: drei kleine Spalten nebeneinander */
	.img-area {
	  position: relative;
	  flex: 0 1 calc((100% - 20px) / 3); /* drei Spalten */
	  min-width: 70px;                    /* kleinste Breite, anpassbar */
	  max-width: 360px;                   /* verhindert zu große Darstellung */
	  width: 100%;
	  aspect-ratio: 422 / 467;
	  height: auto;
	  overflow: hidden;
	}
  
	.img-area > a {
	  position: absolute;
	  inset: 0;
	  display: block;
	  z-index: 3;
	  text-decoration: none;
	}
  
	.img-area img {
	  position: absolute;
	  inset: 0;
	  width: 100%;
	  height: 100%;
	  object-fit: contain;
	  transition: opacity 200ms ease;
	  display: block;
	  pointer-events: none;
	}
  
	/* Auf Touchgeräten bleibt Front sichtbar; Back standardmäßig ausgeblendet */
	.img-area .img-back  { z-index: 1; opacity: 0; pointer-events: none; }
	.img-area .img-front { z-index: 2; opacity: 1; }
  
	/* Hover bleibt, aber auf Touchgeräten ist :hover nicht zuverlässig */
	.img-area:hover .img-back  { opacity: 1; }
	.img-area:hover .img-front { opacity: 0; }
  
	figure {
	  margin: 0 auto 12px auto;
	  width: 100%;
	  display: inline-block;
	}
  
	/* Falls irgendwo noch globale Regeln stehen, die width/height erneut setzen,
	   diese Zeilen in der MQ überschreiben wir hier explizit */
	.img-area img,
	.img-area > a {
	  width: 100%;
	  height: 100%;
	}  
/* Navi End */

#drei
{
	height:520px;
	_background:salmon;
}

#drei-desktop
{
	display:none
}

#drei-mobile
{
	display:block;
	margin-right: 25px;
}

#drei-mobile h1
{
	font-size: 122%;
}

/* Trenner Illustriertes */

#vier
{
	height:150px;
	_background:firebrick;
}

.trenner-mobile
{
	display: block;
	_background: tan;
	border-bottom: solid 1px black;
}

#illustriertes
{
	display: none;
}

#vier .navi-breadcrumbs
{
	_background: rgb(222, 73, 249);
	margin-left:20px;
	margin-top: -20px;
}

.navipunkt
{
	_background: red;
	margin: 26px 10px;
}
/* Trenner Illustriertes End */

#fuenf
{
	height:auto;
	_background:rgb(34, 87, 178);
}

h2
{
	margin-left:30px;
	margin-bottom: -70px;
}

p
{
	_background: rgb(228, 206, 8);
	margin-left:30px;
	margin-bottom: 35px;
	margin-top: 82px;
	font-size: 75%;
}

.inhalt
{
	_background: khaki;
	width: 90%;
	margin-bottom: 22px;
}

#illu1, #illu2, #illu3, #illu4, #illu5, #digi1, #digi2, #digi3, #digi4, #typo1, #typo1a, #typo2, #typo2a, #typo3, #typo3a, #typo4, #typo5, #logos, #typo6, #typo7
{
	display: none;
}

#illu1-mobile, #illu2-mobile, #illu3-mobile, #illu4-mobile, #illu5-mobile, #digi1-mobile, #digi3-mobile, #digi4-mobile, #typo1-3-mobile, #typo4-mobile, #typo5-mobile, #logos-mobile, #typo6-mobile, #typo7-mobile
{
	display: block;
}

#illu3-mobile, #illu4-mobile, #illu5-mobile
{
	padding: 0 0 52px 0;
}

/* Trenner Digitales */
#sechs
{
	height:150px;
	_background:rgb(34, 178, 154);
}

#sechs .navi-breadcrumbs
{
	_background: rgb(222, 73, 249);
	margin-left:20px;
	margin-top: -20px;
}

#digitales
{
	display: none;
}
/* Trenner Digitales End */

#sieben
{
	height:auto;
	_background:rgb(2, 123, 103);
}

#sieben .inhalt
{
	width: 90%;
}

/* Trenner Typografiertes */
#acht
{
	height:150px;
	_background:rgb(124, 255, 24);
}

#acht .navi-breadcrumbs
{
	_background: rgb(222, 73, 249);
	margin-left:20px;
	margin-top: -20px;
}

#typografiertes
{
	display: none;
}
/* Trenner Typografiertes End */

#neun
{
	height:auto;
	_background:rgb(79, 164, 14);
}

#neun .inhalt
{
	width: 90%;
	_background: darkmagenta;
}

#tmobile img
{
	margin-right: auto;
	width: 80%;
	margin-bottom: 80px;
}

#ed1
{
	left: 10px;
	width: 80%;
	height: auto;
	margin-bottom: -90px;
}

#ed-images
{
	line-height: 70px;
	margin-bottom: 40px;
}

#typo4-mobile
{
	margin-bottom: 80px;
}

#typo5-mobile
{
	margin-bottom: 80px;
}

#logos-mobile
{
	margin-bottom: 80px;
}




/* hier weiter: */

#footer
{
	height:165px;
	_background: rgb(209, 139, 28);
}

#footer .navi-breadcrumbs
{
	_background: rgb(222, 73, 249);
	margin-left:70px;
	margin-top: -24px;
}

#impressum
{
	_background: rgb(217, 199, 39);
	width: 95%;
	padding-top: 110px;
	padding-bottom: 5px;
}

#impressum h1
{
	margin-top: -110px;
}






}