/* =============   GLOBAL DEFINITION   ================================= */
/* -------------   Globale Variablen   --------------------------------- */
* {
   --navry: 20vh;        /* Abstand der rechten Nav-Leiste nach oben */
	--navryabst: 80px;    /* Abstände der einzelnen Elemente der rechten Nav-Leiste */
}

/* -------------   allgemeine, vorläufige Formatierungen   ------------- */
body {
   text-align: center;
   /*padding: 25px;*/
   font-size: 25px;
   font-weight: 400;
   box-sizing: border-box;  /* Angabe gilt nicht nur für Inhalt, sondern auch für Innenabstand und Rahmen */
   font-family: Garamond, Arial, sans-serif;
}


/* =============   HEADER   ============================================ */
/* unbenutzt */
header {
   /*border: 1px solid #e5e5e5;*/  /* nur für Entwicklung, am Ende auskommentieren */ 
}


/* =============   NAV   =============================================== */
nav {
   background-color: darkOrange;
   color: white;
   margin: 0 0 0 0;       /* Außen-Abstände: oben, rechts, unten, links */
   padding: 0;            /* Innen-Abstände */
	/*height: 10px;*/
	/*border: 3px solid black;*/      /* nur für Entwicklung, am Ende auskommentieren */
}


/* -------------   obere NaviLeiste als Container      ------------------- */
/* ~~~  nav / div  ~~~ */
.navcontainer{
  display: flex;
  width: 100%;
  flex-wrap: wrap; /* Erlaubt den Zeilenumbruch bei geringer Fensterbreite */
  flex-direction: column;/*row;*/  /* oder display: grid; */
  justify-content: center; /*space-between;*/ /*space-around;*/
  margin: 0;
  padding: 0;
}

/* ~~~  nav / table / tr / td  ~~~ */
.nza{                            /*** aktuelle Navigationszelle ***/
   background-color: Sienna;
   /*padding: 20px 15px 20px 15px;*/
	margin: 0;
	padding: 0;
	/*height: 10px;*/
   /*border: 1px solid green;*/      /* nur für Entwicklung, am Ende auskommentieren */
}

/* ~~~  nav / div / div / a  ~~~ */
.navbox{                        /*** restliche Navigationszellen ***/
   /*flex: 1;*/ /* Boxen sollen sich gleichmäßig verteilen, funktioniert aber nicht */
   /*flex-grow: 1;*/
   /*flex-basis: 16%;*/
  /*width: 100%;*/ /* Stellt sicher, dass die Box den Platz ausfüllt */
  /*box-sizing: border-box;*/ /* Stellt sicher, dass Padding und Border zur Breite zählen */
  /*border: 1px solid #ccc;*/ /* Nur zur Veranschaulichung */
  padding: 0px;
  text-align: center; /* Nur zur Veranschaulichung */
  margin: 0;
  /*height: 10px;*/
}




.navbox p{
   /*height: 20px;*/
	padding: 0px;
	margin: 20px 10px;  /* Abstand obenunten linksrechts */
}
.navcontainer a{
  text-decoration: none; /* Entfernt die Unterstreichung des Links */
  color: inherit; /* Erbt die Farbe des Textes */
}

.navcontainer a:hover {
  background-color: Sienna; 
}

@media (min-width:1000px) {  /* bei normalen und grossen Fenstern */
   .navcontainer{
      flex-direction: row;  /* Menüboxen untereinander statt nebeneinander */
   }
}

@media (min-width:1400px) {  /* bei normalen und grossen Fenstern */
   .navbox{
      min-width: 200px;
	}
   .navcontainer{
      gap: 10px; /* Optional: Abstand zwischen den Boxen */
   }
   .navbox p{
	   margin: 20px 25px;  /* Abstand obenunten linksrechts */
   }
}


/* =============   DIV: Kopffoto   ===================================== */
/* -------------   Kopffoto   ------------------------------------------ */
#kopffoto {
   text-align: center;
   border-radius: 7px;
   padding: 0px;          /* Innen-Abstände */
   margin: -1px 0 0 0;    /* Außen-Abstände: oben, rechts, unten, links */
}
#kopffoto > img {
   max-width:100%;
   height: auto;
   margin: 0 /*auto;*/
}


/* =============   ASIDE   ============================================= */
aside {                    /*** fiktiv, ohne definierte Maße ***/
   /*border: 3px solid fuchsia;*/ /* nur für Entwicklung, am Ende auskommentieren */
}

/* -------------   rechte NaviLeiste als Tabellen   -------------------- */
/* ~~~  aside / table  ~~~ */
table.tabr {                   /*** alle 3 Tabellen ***/
   position:fixed;             /* feste Bildschirmposition unabhängig vom Scrollen */
	right:0.5%;                 /* Position horizontal */
   background-color: #fff/0,1;
   border-spacing: 0;          /* Abstand der Tabellenzellen */
   margin: 0; 
   margin-right: 0;
   margin-left: auto;
   /*display:flex;*/           /* wichtig: Elternelement wird zum flexiblen Container */
   flex-flow:column;
	align-items:flex-end;       /* Alle Elemente werden am Ende der Querachse angeordnet */
   /*border: 2px solid blue;*/     /* nur für Entwicklung, am Ende auskommentieren */
}

/* ~~~  aside / table  ~~~ */
table.tabr1 {                  /*** Abstand jeder einzelnen Tabelle nach oben ***/
   top: var(--navry)}
table.tabr2 {
   top: calc(var(--navry) + var(--navryabst))}
table.tabr3 {
   top: calc(var(--navry) + calc(2 * var(--navryabst)))}

/* ~~~  aside / table / tr / td  ~~~ */
aside > table tr td {
   color: white;	                     /* Symbole und Text in weiss */
	background-color: rgb(255 129 65);  /* Hintergrund in orange */
   text-align: right;
	font-size: 25px;
	/*border: 1px solid green;*/            /* nur für Entwicklung, am Ende auskommentieren */
}

/* ~~~  aside / table / tr / td  ~~~ */
.zeile1 {
	display: flex;                      /*inline-block;*/ /*block;*/  /*inline;*/ /*flex;*/ /*table-cell;*/ /*inline-table;*/
   vertical-align: middle  !important; /* Wirkung nur für Text, nicht für Grafik */ 
   max-height: 40px;                   /* verhindert, dass beim fehlerhaften Anfangseffekt, die Zeile zusätzlich noch nach oben springt */
}
/* ~~~  aside / table / tr / td / a  ~~~ */
.zeile1 a {
   text-decoration: none;
	color: white;
}
/* ~~~  aside / table / tr / td / a  ~~~ */
.zeile1:hover {
   background-color: sienna;
   ::before {
	   content: "Suchen";
		display: inline-table;           /*inline-table;*/  /*inline-table;*/ /*inline;*/ /*inline-block;*/      /*flex*/ /*table-cell;*/ /*block;*/
      vertical-align: 12px;            /*middle;*/
		padding-left: 7px;
		/*white-space: nowrap;*/
   }
}

.zeile2 {
	display: flex;  
   vertical-align: middle  !important; 
	max-height: 40px;
}
.zeile2 a {
	text-decoration: none;
	color: white;
}
.zeile2:hover{
   background-color: sienna;
   ::before {
	   content: "nach\00A0oben";
	   display: inline-table;
      vertical-align: 12px;
		padding-left: 7px;
   }
}

.zeile3 {
	display: flex;
   vertical-align: middle  !important; 
	max-height: 40px;
}
.zeile3 a {
	text-decoration: none;
	color: white;
}
.zeile3:hover{
   background-color: sienna;
   ::before {
		content: "nach\00A0unten";
	   display: inline-table;
      vertical-align: 12px;
		padding-left: 7px;
   }
}

/* ~~~  aside / table / tr / td / a / img  ~~~ */
.logor {                     /* Logos rechts */
	/*decoding: async;*/      /* reset? */
   width: 40px;
	height: 40px;
}


/* =============   ARTICLE   =========================================== */
/* -------------   Hauptfenster   -------------------------------------- */
article {
	position: relative;
   color: black;
   float: left;
   width: 100%;  /*calc(95% - 10px);*/
   margin: 0 0 0 0;   /* Außen-Abstände: oben, rechts, unten, links */
	/*border: 3px solid black;*/  /* nur für Entwicklung, am Ende auskommentieren */ 
}

/* -------------   Überschriften, Absätze usw.   ----------------------- */
article h1 {
   margin-top: 0px;
   margin-bottom: 5px;
   font-size: 50px;
   font-weight: 600;
}
article h2 {
   margin-top: 0px;
   margin-bottom: 5px;
   font-size: 40px;
   font-weight: 700;
}
article h3 {
   margin-top: 0px;
   margin-bottom: 5px;
   font-size: 30px;
   font-weight: 400;
}


/* -------------   Bilderbox   ----------------------------------------- */
article div.bilderbox {
   display: flex;
   width: 100% /*95%;*/
	margin: auto;             /* horizontal mittig */
	background-color: darkorange;
   border: 2px dotted rgb(96 139 168);
   /* --- Gesamtheit der Kindelemente einer Zeile ---*/
	justify-content: center;  /* Zentriert die Elemente auf der x-Achse horizontal */
   flex-flow: row wrap;
	/*align-items: center;*/  /* Zentriert die Elemente auf der Querachse (vertikal) */
}
/* --- einzelne Kindelemente --- */
article div.bilderbox > * {
   width: 400px;
   height: 500px;
   background-color: rgb(200 200 200); /*rgb(96 139 168 / 0.2);*/
   margin: 0; /* Entfernt hier den Abstand, falls vorhanden */
   /* -- Für die interne Zentrierung des Inhalts, falls nötig -- */
   display: flex;
	align-items: center;
	justify-content: center;
   /* -- sonstige Einstellungen -- */
 /*flex-basis: auto;*/       /* jede flexbox vergrößert sich gleichmäßig, wenn Platz vorhanden */
   border-radius: 0; /*5px;*/
   /*border: 1px solid green;*/  /* nur für Entwicklung, am Ende auskommentieren */
}
article figure {
   border: thin silver solid;
   display: flex;
   flex-flow: column;
   padding: 0;
   width: 400px;
   /*margin: auto;*/
}
article img {
	height: 300px;
	width: 400px;
	object-fit: contain; /* Bild wird unverzerrt angepasst */
}
article figcaption {
   background-color: rgb(230 230 230);
   color: black;
   font: italic smaller sans-serif;
   padding: 30px;
   width: 340px;  /* doppelten padding-Wert abziehen */
	text-align: center;
	height: 250px;
}




   /*box-sizing: border-box;*/
	/*flex-direction: row;*/  /*row-reverse;*/   /* Bilder entlang der x-Achse */
	/*flex-wrap: wrap;*/                         /* Boxen-Zeilenumbruch */
   /*width: 100%;*/
   /*border: solid #5b6dcd 10px;*/
	/*background-color: rgb(96 139 168 / 0.2);*/
   /*padding: 5px;*/	




footer {
   width: 100%;  /*calc(100% - 50px);*/
   margin: 25px 0px 0px 0px;
   clear: both;
   /*border: 5px solid green;*/  /* nur für Entwicklung, am Ende auskommentieren */
   background-color: darkorange;
	color: white;
}

footer h1 {
   /*text-decoration-line: underline;*/
	/*text-decoration-color: white;*/
	/*text-decoration-thickness: 3px;*/
	border-bottom: 3px solid white;   /* längere Linie */
	padding-bottom: 10px;             /* Fügt etwas Platz unter der Linie hinzu */
	width: 80%;                      /* Macht die Linie 120% der Originalbreite des Überschrifteninhalts */
	display: inline-block;            /* Erlaubt die Einstellung von Breite und Höhe */
	margin-top: 0px;
   margin-bottom: 5px;
   font-size: 30px;
   font-weight: 600;

}

.footercontainer{
   display: flex; /* Macht die Kind-Elemente zu Flex-Items und ordnet sie nebeneinander an */
	flex-wrap: wrap; /* Erlaubt den Zeilenumbruch bei geringer Fensterbreite */
   gap: 10px; /* Fügt Abstand zwischen den Boxen hinzu */
	flex-direction: column;
}

.footerbox{
   flex: 1; /* Gibt jeder Box die Möglichkeit, sich entsprechend zu verteilen (optional, für gleiche Breite) */
   /*background-color: darkorange;*/
   padding: 20px;
   text-align: left;
   /*min-width: 200px;*/	
}

footer a{
   color: white;                   /* Schriftfarbe neu setzen weil Link */
   text-decoration: none;          /* keine Unterstreichung trotz Link */
}

footer a:hover{
   color: black;
}

@media (min-width:1200px) {  /* bei normalen und grossen Fenstern */
   .footercontainer{
      flex-direction: row;  /* Menüboxen untereinander statt nebeneinander */
   }
}



/*************************************************/
/* Überschrift h1 */

/* Header (Logo + Praxisname) */
header > p {
   color: black;                          /* Schriftfarbe: schwarz */
   font-weight: bold;                     /* Schriftstiel: fett */
   margin: 0px;                           /* kein Abstand zwischen Text und Header-Container, weil dreizeilig */
   }


	

/*
.unsichtbar {
	background-color: #fff/0,1;
   display: none;
}
.unsichtbar:hover {
	display: inline; 
	background-color: Sienna;
}
*/

/*************************************************/

	

/*************************************************/

/*************************************************/
/*
@media (max-width:719px) {
   ul.nav > li {
      width:16%;
   }
}

@media (min-width:720px) {
   ul.nav > li {
      width:16%; 
   }
}
*/

/******************************************************/
/* weitere wichtige Befehle */
   /*float: right;*/                   /* Ausrichtung nach rechts, bei Platzmangel rutscht die Leiste nach unten */
   /*font-style: normal !important;*/  /* umgeht die CSS-hierarchie */
   /*min-width: 1100px */              /* minimale Breite eines Bereichs */
   /*min-height: 517px;*/              /* minimale Höhe eines Bereichs */
   /*display: flex;  /*inline-block;*/ /*block;*/  /*inline;*/ /*flex;*/ /*table-cell;*/ /*inline-table;*/
   /*flex-direction:column;*/
   /*align-items: flex-end;*/
   /*object-fit: cover;*/         /* Bild füllt die gesamte Zelle aus und wird bei abweichenden Seitenverhältnissen abgeschnitten ; funktioniert nicht bei Tabellen */	
   /*object-position: 30% 30%;*/ /* 50% 50% für Bildmitte  ; funktioniert nicht bei Tabellen*/
   /*z-index:10;*/