/* CSS Document */
/* SELBST ENTWORFENES Stylesheet für gebcnew1, zuerst für Seite 1 = Deutsche Startseite - dort index.html 
   Benennung als stylegh.css   */

/* ====================================================   GLOBAL DEFINITION   ==================================================== */

/* alternatives Boxmodell */
html { 
  box-sizing: border-box; 
  background: #d5d5d5;	
} 

*, ::before, ::after { 
  box-sizing: inherit; 
}

body {
	max-width: 75em;
	margin:0 auto;
	padding: 0em;    /* das hier nur wg Testzwecken, später evtl auf Null setzen bzw rausnehmen */)
	background: #fff;	/* von der Netscape-Palette mit 216 Farben #fff = weiss  */
	color: black;         /* urspr.#333 = dunkles Grau, Schriftfarbe in aside-box, footer + bei Rahmenfarbe
                           auf entspr.Hintergrund bei aside box achten */
	font: normal 1em Arial, sans-serif;  /* Mindestschriftgröße wird dem Browser, bzw. dem Nutzer überlassen! */                
}



/* ====================================================   HEADER   ==================================================== */

header {                             /* NICHTS VERÄNDERN !!! */
	position: relative;		
	height: 270px;           /* urspr. 210px, halbieren?  */
	margin: 2em  0  0 3em;
	background: #777 url("img/IMG_6381.jpg") no-repeat right;   /* graue Hintergrundfarbe im Banner */
	background-size: contain; 			 
	padding: 0 0 0.5em;    /* urspr. 0 0 0.5em; ?  */
}

header a h1,
header a p {			/* Die Angaben für h1 müssen mit einem genauen Selektor überschrieben werden. */
	font-family: arial, verdana, sans-serif;
    font-style: normal;
    font-size: 1em;
    font-weight: bold;
    color: black;       /* geändert von white für Test, ändert Textfarbe im Banner */
	border-left: 0;            /* wieso nicht HIER mit font die Schriftart usw ändern...?!  */
	padding: 0;         /* urspr. 0; ?  */
    display: table;		/* Überschriften und Absätze sind sonst immer 100% breit, durch display:table
                        und display: inline-block; für das Elternelement a.ribbon wird das Banner nur so breit wie nötig. */
}

.ribbon {
	display: inline-block;
    width: 33%;   /* neu hinzugefügt, um die Breite des ribbon FESTzulegen, damit kein erstrecken nach rechts  */
	position: relative;	                       /*  erste Zahl reguliert vertikale Höhe,  statt 0 5em? ohne Wirkung                     */
	margin: 1em 0 2em -1.5em;  /* urspr. 2em 0 2em -1.5em;        2em ohne Wirkung, -1.5em zieht Banner nach li. */
	padding: 0.5em 1em;       /* urspr. 0.5em 1em; regelt Abstände zum Text */
	background: #4e7a92;
	box-shadow: 3px 5px 3px rgba(0,0,0,.8);   /* urspr. 0px 1px 3px rgba(0,0,0,.8);  */
}
 
.ribbon::before{
	display: block;
	width: 1.5em;         /* urspr. 1.5em; der schräge Winkel bewegt sich horizontal  */
	height: 0;            /* urspr. 0, schräger Winkel am Banner  */
	position: absolute;   /* urspr. absolute  */
	bottom: -1.5em;      /* urspr. -1.5em, der schräge Winkel am Banner  */
	left: 0em;           /* urspr. 0em; ebenfalls der schräge Winkel  */
	content: "";
	border-bottom: 1.5em solid transparent;     /* urspr. 1.5em solid transparent  */
	border-right: 1.5em solid rgb(0, 80, 116);
}
 
/** CONTENT **/
/* Versuch mit Flex-Box, zahlreiche Änderungen */

body  {
    display: flex;
    flex-flow: row wrap;
}

header, nav, footer  {
    flex: 1 100%;
}

article  {
    flex: 1 1 60%;      /* regelt Größenverteilung zwischen article- und aside-box, s.unten */
}


#Unternehmensberatung  {        /* erster Versuch mit div im Unternehmenstext, also #Unternehmen und Klammern */
    font-size: 1em; 
    text-align: justify;  /* wirkungslos, sollte Blocksatz bewirken */
    font-family: arial;
    color: #333;    /* ändert die Schriftfarbe in der article-box auf gleichen Farbwert wie oben im body, =dunkles Grau  */
    padding-left: 1em; /* ändert Seitenabstand links in article-box */
    padding right: 1em;   /* selbst bei 4em wirkungslos, müsste aber Seitenabstand nach rechts regeln */
}

aside  {
    flex: 1 1 40%;        /* siehe oben bei article, regelt Größenverteilung zw. article + aside box */
    border: 1px solid;    /* erzeugt Rahmen/border um die aside-box und padding-left erzeugt gleichmässigen Abstand
                             nur links - evtl. noch einen leicht farbigen Hintergrund..? */
    padding-left: 1em;
    background-color: silver;  /* ausprobiert wurden: silver, azure, ivory, lightslategrey  */
    font-size: 1em;
    line-height: 1.5em;
}


li    {
    display: column;
    list-style-type: none;   /* lässt die Aufzählungszeichen in aside-box verschwinden */
}


nav  {
    border: 1px solid;     /* regelt die Nav-Box mit Flaggen + Sprachen */
    display: flex; 
}
  
nav ul {                  /* regelt was? color neu dazugenommen? keine Veränderung */
    margin: 0.5em;        /* regelt in Nav-box den Innenabstand von Text zum Rand */
    padding: 0em;
    text-align: right;     /* urspr. left - jetzt?  keine Veränderung */
}

nav li  {                  /* regelt was? color dazugenommen? keine Veränderung */
    position: left;
    display: inline;       /* regelt die Anordnung der Flagen/Sprachen in horizontal, column = vertikal  */
}


h1,
h2 {
	font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; 
	padding-left: 1em; 
	color: #666; 
	text-transform: uppercase;
}
	
h2 span {
	font-size: 0.70em; 
	color: #818181; 
	text-transform: none;
}

h3	{ 
	font-size: 1em;
    font-weight: normal; 
	text-align: center;    /* das text-align: regelt die main box und footer...NICHT die aside-box */
	margin: 20px; 
	color: #333;    /* urspr. #4E68AD = helles Blau für die h3 Überschriften  */
}		

p {
	text-align: left; 
    line-height: 1.5em; 
	padding: 20px 0px;
}

a 	{ 
	color: #4e7a92; 
	outline: none; 
	text-decoration: none; 
}


footer  {
    position: left;
    display: inline;
    height: 10px;       /* irgendwie bewirkt das den hellgrauen Hintergrund und die Schrift ziemlich mittig */
    padding: 1em;
}