/* Open Source Schriftarten über separates CCS einbinden: */

@import "UsedFonts.css";


/* ========== Globale Definitionen für die ganze Seite ==================== */

:root {
	--col_logo_face:#9D0E0E;				    /* Farbe des im Logo enthaltenen Gesichtsprofils */
	--col_logo_face_diff:#720b0b;			/* Etwas andere Farbe des im Logo enthaltenen Gesichtsprofils */
	--col_logo_figure:black;				    /* Farbe der im Logo enthaltenen Figur */
	--col_bkgnd_prairie:#FDDCA6;			  /* Hintergrundfarbe unten ("Prärie") */
	--col_bkgnd_horizon:#ea7f15;			  /* Hintergrundfarbe Horizont */
	--col_bkgnd_sky:#5b81ad;				    /* Hintergrundfarbe Himmel 
  */
  --col_main_menu:#9D0E0E;            /* Hintergrundfarbe des Hauptmenus */
  --col_bkgnd_toplink: #ffb563;       /* Hintergrundfarbe Menubläcke zum Seitenanfang */
  --col_sticker_bckgnd: #336600;      /* Hintergrundfarbe Sticker */
  --col_sticker_letter: #FFFFFF;      /* Schriftfarbe Sticker */
  --pos_blocks_lr: 0.7rem;              /* Randzone links-rechts für alle großen Blockelemente ("header", "main", ...) */
  --header_font_size: max(2.0rem, min(5vw, 3rem));  /* Dyn. Schriftgröße ("vw") des größten Schriftzuges im Header mit unterer und oberer Grenze ("rem"), keine "clamp"-Funktion wg. Kompatibilität */   
}

html {
  background-color:#FDDCA6;           /* Hintergrund Altgeräte, die kein "var" und kein "linear-gradient" kennen */
  background-image: linear-gradient(#5b81ad 0em, #ea7f15 5em, #fddca6 17em);    /* Temporär Hintergrund mit Farbverlauf für Geräte, die "linear-gradient" kennen, aber kein "var" */
	background-image: linear-gradient(var(--col_bkgnd_sky) 0em, var(--col_bkgnd_horizon) 5em, var(--col_bkgnd_prairie) 17em);   /* Hintergrund-Def. mit Farbverlauf für zeitgemäße Geräte */
	min-height: 100vh;
	background-repeat: no-repeat;
	background-attachment: scroll;
}

body {
  max-width: 60rem;					            /* Maximale Darstellungsbreite bei großen Viewports */
  margin: 1rem auto;				            /* "auto" hält den Inhalt in der Mitte auch bei überbreiten Viewports */
  font-family: "Rubik", sans-serif;	    /* Basis-Schriftart und -Stil für die gesamte sichtbare Darstellung */
  font-style: normal;
  font-size: 0.85rem;
  font-weight: 400;
  text-align: left;
  color: black;
  line-height: 120%;
}

/* =========================================== Header ============================================= */

header {
	display: flex;						            /* Flex-Layout für alle direkten Kind-Elemente wie p etc.  */
	flex-flow: row wrap;				          /* flex-direction "row" und flex-wrap "wrap" */
	justify-content: flex-start;		      /* Alle direkten Kind-Elemente werden linksbündig ausgerichtet */
  margin: 0rem 0.7rem;                  /* Temporär für Geräte, die kein "var" kennen */
	margin: 0rem var(--pos_blocks_lr);		/* Randbereich: oben/unten - rechts/links */
	background: url(../Images/Logo-Vektor_Opt.svg);             /* Logo */
	background-repeat: no-repeat;         /* Logo nur ein Mal */
  background-size: 5.2rem;              /* Temporär feste und kleinste Logo-Größe für die, welche nicht rechnen können */
  background-size: calc(2.6 * var(--header_font_size));       /* Logo Größe dyn. über Variable*/
}

header p {

	font-family: "Finger Paint", sans-serif;
  font-size: 2rem;                      /* Temporär feste und kleinste Schriftgröße für die, welche nicht rechnen können */
	font-size: var(--header_font_size);   /* Dyn Schriftgröße */
  margin: 0.6rem 1rem 0.5rem 6.6rem;    /* Temporär fester und kleinster Abstand für die, welche nicht rechnen können */
	margin: 0.6rem 1rem 0.5rem calc(3.3 * var(--header_font_size));		    /* Randbereich: oben - rechts - unten - links dyn. */
  min-height: 2.9em;                    /* Min. Absatzhöhe - Platz für Logo */
  line-height: 110%;
}

#headersubtitle {						            /* ID für Untertitel im Header */
	font-size: 0.7em;                     /* Schriftgröße RELATIV zu "header p" */
  white-space: nowrap;                  /* Kein Umbruch */
}

/* =========================================== Navigation ============================================= */

nav {                                   /* Festlegung für das Hauptmenu */
  font-size: 1.1rem;
}

nav ul {
  display: flex;						            /* Flex-Layout für alle direkten Kind-Elemente von ul (li-Elemente)  */
	flex-flow: row wrap;
	justify-content: center;
  text-align: center;
	list-style-type: none;
  background-color: #9D0E0E;          /* Temporär für Geräte, die kein "var" kennen */
  background-color: var(--col_main_menu);
  box-shadow: -0.3rem .6rem .6rem rgba(0, 0, 0, 0.548);
  padding: 0rem                         /* Ungeklärt: Wenn diese Def. fehlt, ist links ein dicker Rand zu sehen */
}

nav li {
  margin: 0.1rem;                       /* Dünner Rand um jedes Listenelement */
}

nav a {
	display: inline-block;
  min-width: 13rem;
  color:#FDDCA6;                      /* Temporär für Geräte, die kein "var" kennen */
	color: var(--col_bkgnd_prairie);
  text-decoration: none;
	padding: 0.3rem 0.3rem;
	font-weight: 400;
}

nav a[aria-current="page"]	{
  color:#000000;                      /* Temporär für Geräte, die kein "var" kennen */
	color: var(--col_logo_figure);
	font-weight: 500;
}

nav	a:focus {
  background-color: #FDDCA6;          /* Temporär für Geräte, die kein "var" kennen */
	background-color: var(--col_bkgnd_prairie);
  color:#720b0b;                      /* Temporär für Geräte, die kein "var" kennen */
	color: var(--col_logo_face_diff);
	font-weight: 500;
}
nav	a:hover {
  background-color: #FDDCA6;          /* Temporär für Geräte, die kein "var" kennen */
	background-color: var(--col_bkgnd_prairie);
  color:#720b0b;                      /* Temporär für Geräte, die kein "var" kennen */
	color: var(--col_logo_face_diff);
	font-weight: 500;
}

nav	a:hover[aria-current="page"] {
  background-color: #9D0E0E;          /* Temporär für Geräte, die kein "var" kennen */
	background-color: var(--col_logo_face);
  color:#000000;                      /* Temporär für Geräte, die kein "var" kennen */
	color: var(--col_logo_figure);
	font-weight: 500;
}

nav	a:active {
  background-color: #FDDCA6;          /* Temporär für Geräte, die kein "var" kennen */
	background-color: var(--col_bkgnd_prairie);
  color:#5b81ad;                      /* Temporär für Geräte, die kein "var" kennen */
	color: var(--col_bkgnd_sky);
	font-weight: 500;
}

/* =========================================== Main ============================================= */

main {
  margin: 0rem 0.7rem;                  /* Temporär für Geräte, die kein "var" kennen */
  margin: 0rem var(--pos_blocks_lr);		/* Randbereich: oben/unten - rechts/links */
}

main a:link {
  color:#9D0E0E;                      /* Temporär für Geräte, die kein "var" kennen */
  color: var(--col_logo_face);
  text-decoration: underline;
  font-weight: 500;
}

main a:visited {
  color: #9d0e0e;                     /* Temporär für Geräte, die kein "var" kennen */
  color: var(--col_logo_face);
  text-decoration: underline;
}

main a:focus {
  color: #9d0e0e;                     /* Temporär für Geräte, die kein "var" kennen */
  color: var(--col_logo_face);
  text-decoration: underline;
}

main a:hover {
  text-decoration: none;
}

main a:active {
  color:#5b81ad;                      /* Temporär für Geräte, die kein "var" kennen */
  color: var(--col_bkgnd_sky);
}

main ul {
  margin-top: 0.5rem;
  margin-bottom: 0.6rem;
  margin-left: 1rem;
}

main ol {
  margin-top: 7px;
  margin-bottom: 7px;
  margin-left: 1rem;
}

main li {
  margin-top: 0.5rem;
  margin-bottom: 0.6rem;
}

div#headline {                          /* Container für (Flex-) Formatierung Seitenüberschrift */
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;		    /* Ausrichtung links - rechts */
  margin-bottom: 1rem;
  font-size: 0.9rem;
  font-weight: bold;
  color: #336600;                     /* Temporär für Geräte, die kein "var" kennen */
  color: var(--col_sticker_bckgnd);
}

main a.toplink {
  background-color: #ffb563;          /* Temporär für Geräte, die kein "var" kennen */
  background-color: var(--col_bkgnd_toplink);
  padding: 0.3rem 0.5rem;
  margin: 1rem 0rem 0.4rem 0rem;
  font-weight: 500;
  text-decoration: none;
  display: inline-block;
  box-shadow: -0.2rem .3rem .6rem rgba(0, 0, 0, 0.548);
}

main a.toplink::before {
  content: "↑ ";
}

main p.sticker {
  background-color: #336600;          /* Temporär für Geräte, die kein "var" kennen */
  background-color: var(--col_sticker_bckgnd);    
  color: #ffffff;                     /* Temporär für Geräte, die kein "var" kennen */
  color: var(--col_sticker_letter);
  max-width: 7.3rem;
  margin: 1rem;                         /* Außenabstand Absatz zu umgebenden Elementen */
  padding: 0.5rem;                      /* Innenabstand zum Rand */
  border-radius: 0.6rem;
  box-shadow: -0.2rem .3rem .6rem rgba(0, 0, 0, 0.548);
  float: right;
}

/* =========================================== Footer ============================================= */

footer {
	display: flex;						            /* Flex-Layout für alle direkten Kind-Elemente wie p etc.  */
	flex-flow: row wrap;				          /* flex-direction "row" und flex-wrap "wrap" */
	justify-content: flex-start;		      /* Alle direkten Kind-Elemente werden linksbündig ausgerichtet */
  min-height: 11rem;                    /* Mindesthöhe, damit das Logo nicht unten abgeschnitten wird */
  margin: 4rem 0.7rem;                  /* Temporär für Geräte, die kein "var" kennen */
	margin: 4rem var(--pos_blocks_lr);		/* Randbereich: oben/unten - rechts/links */
}

footer p {
	margin: 1.5rem 0rem 1rem 1.5rem;		  /* Randbereich: oben - rechts - unten - links */
  font-size: 1rem;
  text-align: right;
}

footer nav {
  font-size: 1rem;
}

#cpright {						                /* ID für Copyright-Vermerk (im Footer) */
	font-size: 0.95em;                     /* Schriftgröße RELATIV zu "footer p" */
  white-space: nowrap;                  /* Kein Umbruch */
}

.Kontakt {
  font-weight: bold;
}

img {                                   /* Generell für alle Grafiken/ Fotos */
  width: 100%;
  height: auto;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.Foto {
  min-width:18em;                      /* Verhindert das zu starke Schrumpfen bei kleineren Viewports */
  object-fit: contain;
  object-position: left top;
}
.Foto-l {
  min-width:18em;
  height: 15rem;
  object-fit: contain;
  object-position: left top;
}
.Foto-r {                               /* Wie Foto-l */
  min-width:18em;
  height: 15rem;
  object-fit: contain;
  object-position: right top;
}

.Flyer-upr {
  min-width:18em;
  object-fit: contain;
  object-position: right top;
}

@media (min-width: 35em) {              /* Ab einer def. Größe des Viewports: */
  img {
    width: 40%;                             /* Größe für alle Grafiken/ Fotos bei breiten Viewports */
  }
  .Foto {
    width: 28em;
    margin-right: 1.5rem;                   /* Rechter Rand zum Text */
  }
  .Foto-l {
    float: left;                            /* Bild links, Textfluss rechts neben Bild */
    margin-right: 1.5rem;                   /* Rechter Rand zum Text */ 
  }
  .Foto-r {
    float: right;                           /* Bild rechts, Textfluss links neben Bild */
    margin-left: 1.5rem;                    /* Linker Rand zum Text */ 
  }
  .Flyer-upr {
    float: right;                           /* Bild rechts, Textfluss links neben Bild */
    margin-left: 1.5rem;                    /* Linker Rand zum Text */
    max-height: 33rem;
  }
}

.Patch {                                /* Feste Größe für "Aufkleber" */
  width: 16rem;
  margin-right: 1.5rem;
}
.Patch-l {                                /* Feste Größe für "Aufkleber" */
  width: 16rem;
  float: left;
  margin-right: 1.5rem;
}
.Patch-r {                                /* Feste Größe für "Aufkleber" */
  width: 16rem;
  float: right;
  margin-right: 1.5rem;
}

.Icon-l {
  width: 7rem;                          /* Feste Größe für links stehende Icons */
  float: left;
  margin-right: 1.5rem;
}

.Icon-r {
  width: 7rem;                          /* Feste Größe für rechts stehende Icons */
  float: right;
  margin-left: 1.5rem;
}

h1 {                                        /* Ist immer die Seitenüberschrift */
  font-family: "Finger Paint", sans-serif;	/* Überschreibt die Def. in "body" */
  font-size: 1.4rem;
  line-height: 120%;
}

h2 {                                        /* Haupt- ("article-") Überschriften auf der Seite */
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  font-size: 1.1rem;
  font-weight: bold;
}

h3 {                                        /* Unterüberschriften IN einem "article" */
  margin-top: 1.2rem;
  margin-bottom: 0.5rem;
  margin-left: 1.3rem;
  font-size: 1.0rem;
  font-weight: bold;
}

h4 {                                        /* Ersetzt zus. mit der Klasse "lineup" als div-Block eine */
  margin-top: 0.5rem;                       /* tabell. Auflistung z.B. für Workshop-Daten */
  margin-bottom: 0.3rem;
  margin-left: 2.6rem;
  font-weight: bold;
}

p {
  margin-top: 0.3rem;
  margin-bottom: 0.3rem;
  margin-left: 2.6rem;
}

div.lineup p {
  margin-left: 5rem;
}

div.lineup h4::before {
  content:'→ ';
}
address {
  font-style:normal;
}