/*
Syn­tax von css, hier wird ein­fach alles reingeschrieben nur eine Kleinigkeit, die Syn­tax wie das Design fest­geschrieben wird
Ele­ment oder Attrib­ut {Eigenschaft:Wert;}
in Fachsprache
Selek­tor {Dekla­ra­tion;}
*/

@media only screen and (min-width:950px) {
/* für die Aus­gabe am Bild­schirm bis max. 500 Pix­el = (max-width:500px), “only” gilt für ältere Browser
“and” = Abfrage starten, es kön­nen auch mehrere Abfrage angegeben wer­den z.b. and (min-width:440px) and (max-width:950px)
wobei hier mit and (min-width:440px) = min. 440px also z.b. Tablets und mit and (max-width:950px) mit­tlere Bild­schirme ange­sprochen werden */

body {
background-color:yellow;
}
}

@media only screen and (max-width:440px) {
/*für die Aus­gabe am Bild­schirm bis max. 500 Pix­el = (max-width:500px), “only” gilt für ältere Browser
“and” = Abfrage starten, es kön­nen auch mehrere Abfrage angegeben wer­den z.b. and (min-width:440px) and (max-width:950px)
wobei hier mit and (min-width:440px) = min. 440px also z.b. Tablets und mit and (max-width:950px) mit­tlere Bild­schirme ange­sprochen werden*/

body {
background-color:red;
}
}

@media only screen and (max-width:440px) and (min-width:950px) {
/*für die Aus­gabe am Bild­schirm bis max. 500 Pix­el = (max-width:500px), “only” gilt für ältere Browser
“and” = Abfrage starten, es kön­nen auch mehrere Abfrage angegeben wer­den z.b. and (min-width:440px) and (max-width:950px)
wobei hier mit and (min-width:440px) = min. 440px also z.b. Tablets und mit and (max-width:950px) mit­tlere Bild­schirme ange­sprochen werden*/

body {
background-color:pink;
}
}

@media print {/*für die Aus­gabe beim Drucken*/
}

* { box-siz­ing: border-box;
/* der * ist ein Uni­ver­salse­lek­tor und wird auf alle angewandt,
bor­der-box = neue Box Mod­ell das alte ist con­tent-box mit der neuen sind Designs ein­fach­er machbar*/
margin:0 auto;
padding:0;
}

.bild {
max-width:100%;
height:auto;
}

/*Menü ohne javaScript zum zusam­men­fassen bei kleinerem Display*/
head­er { back­ground-col­or: yel­low; back­ground-col­or: gray; width: 100%; float: left; bor­der-bot­tom: 1px sol­id black; }
#bere­ichl­o­go { col­or: white; back­ground-col­or: limegreen; dis­play: block; padding: 0.5em; text-dec­o­ra­tion: none; float: left; }
#bere­ichl­o­go { width: auto; } #steuerung li { list-style: none; float: left; }
#steuerung a { dis­play: block; height: 100%; width: 100%; padding: 0.5em; text-dec­o­ra­tion: none; col­or: white; back­ground-col­or: gray; }
.menue-but­ton { dis­play: none; } #steuerung { float: right; } #steuerung a:hover { col­or: black; back­ground: orange; }
/* CSS erweit­ern um MENÜ-But­ton und entsprechende Steuerung */ /* Menü-But­ton oben rechts ein­blenden bei klein­er als 600px */

@media only screen and (max-width:1000px) {
.menue-but­ton { dis­play: block; }
.menue-but­ton { back­ground-col­or: dark­blue; dis­play: block; posi­tion: absolute; right: 0; top: 0; padding: 0.5em; col­or: white;
cur­sor: point­er; text-dec­o­ra­tion: none; }
#bere­ichl­o­go { width: 100%; }
#steuerung { float: left; width: 100%; dis­play: none; }
#steuerung li { width: 100%; bor­der-bot­tom: 2px sol­id silver; }
.menue-button:hover { col­or: black; back­ground: orange; } }

/* die Magie, um die Steuerung einzublenden (auch auf mobile Devices) */
#nav-menue:target #steuerung { dis­play: block; }
/* aus­blenden des Menü-But­tons zum öff­nen — somit wird der zum Schließen sichtbar */
#nav-menue:target .menue-but­ton-beschr-open { dis­play: none ; }
/* All­ge­mein Anweisungen */
sec­tion { padding: 0.5em; float: left; width: 100%; }

#videobereich1 {  back­ground-col­or: orange;
posi­tion: relative;
height: 0;
padding-bot­tom: 56.25%;
/* Seit­en­ver­hät­nis durch 360 / 640 * 100% = 56,25%*/
}

.videoEx­tern {
back­ground-col­or: yellow;
posi­tion: absolute;
top: 0;
left: 0;
width: 50%;
height: 50%;
}

iframe{
border:0;
}

html, body {
text-align:center; /*für alte IE mit­tig ausrichten*/
height:100%;
}

a:link{ /*Linkansicht ohne Besucher­in­ter­ak­tion immer die Rei­hen­folge von a: ein­hal­ten also :link, :vis­it­ed, :focus, :hov­er, :active*/
background-color:pink;
}

a:visited{ /*Linkansicht mit Besucherinteraktion*/
background-color:green;
}

a:focus{ /*Linkansicht bei auswahl mit Tab*/
background-color:orange;
outline:none; /*gepunkteter Rah­men um Links ent­fer­nen, ein muss bei :focus, :hov­er, :active */
}

a:hover{ /*Linkansicht bei Mauszeiger über Link*/
background-color:yellow;
outline:none;
}

a:active{ /*Linkansicht bei aktivem klick*/
background-color:black;
outline:none;
}

#kopf{
background-color:pink;
bor­der-bot­tom: 1px sol­id black;
}

/* #seite{
position:relative; /*Ausrichtung rel­a­tiv nicht per abso­lut ist besser
min-height:100%; /*komplette Höhe min­destens nutzen
width:100%;
mar­gin: 0 auto;
background-color:black;
padding-bottom:2em;
}
*/

#fuss{
clear:both; /*der vorherige Bere­ich wird abgeschlossen*/
position:relative;
background-color:yellow;
bor­der-top: 2px sol­id black;
bottom:0;
width:100%;
height:2em;
}

#bere­ich {
text-align:left;
mar­gin: 0 auto; /* dies genügt für alle Brows­er um den Text mit­tig auszurichten,
0 ste­ht für die Rand­stärke nix und daas auto für die gle­ich­mäßige Aufteilung*/
background-color:snow;
width:95%;
}

#nav {
text-align:left;    /* Textausrichtung */
margin-top:10px;    /* Außen­ab­stand oben */
margin-bottom:10px;   /* Außen­ab­stand unten */
margin-left:20px;    /* Außen­ab­stand links */
margin-right:15px;    /* Außen­ab­stand rechts */
}

#nav ul {       /* wie man auch sieht kann man in bes­timmten Bere­ichen wie #nav gezielt Ele­mente auswählen diese wer­den nur
hier geän­dert nicht woanders*/
list-style:none;    /* keine Aufzählungspunkte */
}

#nav li {
display:inline;     /* wie float:left erfol­gt die Anord­nung hor­i­zon­tal mit :inline, die ange­sproch­enen Ele­mente ver­ber­gen mit :none,
für jedes Ele­ment eine eigene Zeile mit :block*/
/* float:left;      /* Anord­nung links */
margin-left:0px;    /* Außen­ab­stand links */
width:90px;      /* Bre­ite des Links */
background-color:silver;  /* Hintergrundfarbe */
border-top:1px black sol­id;  /* Rah­men Auflis­tung­punkt oben */
border-left:0px orange sol­id; /* Rah­men Auflis­tung­punkt links */
border-bottom:1px red sol­id; /* Rah­men unten */
border-right:2px blue sol­id; /* Rah­men rechts */
margin-top:10px;    /* Außen­ab­stand oben */
padding-top:8px;    /* Innen­ab­stand oben */
padding-bottom:8px;    /* Innen­ab­stand unten */
padding-left:0px;    /* Innen­ab­stand links */
padding-right:8px;    /* Innen­ab­stand rechts */
}

#inhalt {
font-size:1em;
background-color:green;
}

.boxg{
width: 250px; /*Breite des Bereichs*/
height: 175px; /*Höhe des Bereichs*/
opacity:1; /*Deckkraft ein­stellen = 0 durch­sichtig und = 1 undurch­sichtig, wobei es nur 0 und 1 gibt und alles dazwis­chen mit 0.x angeben,
es wird alles innen­liegende des Elemts mit ein­er Deck­kraft versehen*/
}

#box1{ /*eine Über­lagerung ist wie ein Stapel das erste Ele­ment kommt zu erst und liegt somit auf dem body alle anderen fol­gen obenauf*/
background-color:red;     /*trotzdem auch den alten Farb­w­ert mit angeben, für ältere Brows­er, son­st wird keine Farbe angezeigt*/
back­ground-col­or: hsla(0,100%,50%,0.5); /*dieses She­ma kaut CSS3 immer anwen­den, (h)ue = Farbton immer eine ein­fache Zahl von 0 bis 360;
(s)aturation = Sät­ti­gung immer % von 0% bis 100%
(l)ightness = Hel­ligkeit nur % von 0% bis 100%
das (a)lpha-Kanal dieser ist für die Trans­parenz zus­tendig, hier aber nur die Farbe, nicht die Schrift*/
back­ground-col­or: rgba(255,0,0,0.5); /*für das rgb Farb­she­ma geht dies auch nur die Werte von 0 bis 255 sind gültig für die Farbe*/
position:absolute;
/* width:250px;
height:175px; dafür wird eine Klasse angelegt .box­groesse für alle 3 da diese iden­tisch sind*/
top:90px;
left:100px;
z‑index:1; /*so kann der Stapel einen Index erhal­ten, Stan­dard bei kein fest­gelegten Index ist 0, so wird nun dieser als Stapel oben auf gelegt*/
}

#box2{
font-size:50px;
background-color:white;
position:absolute; /*nur den Befehl zur absoluten Posi­tion­ierung eines Ele­ment, noch keine Andeu­tung wo, wie, usw.*/
top:70px;
left:300px; /*Abstand zum linken Rand zuläs­sig ist px, %, em*, natür­lich gibts auch noch top, right, left, bot­tom, bei 0 muss keine Einheit
angegeben wer­den bei allen anderen größer 0 muss eine Ein­heit stehen*/
z‑index:2;
‑webkit-box-shad­ow: 10px 20px 30px wgite,
‑10px ‑10px 30px white;
/*-webkit- gilt für die Brows­er Safari und Chrome,
‑moz- für Mozilla
‑o- für Opera
‑ms für Inter­net Explorer
auch hier gilt wieder den all­ge­me­ingülti­gen Befehl als let­ztes zu schreiben, dieser ist der Befehl ohne z.B.
‑webkit- so geht man sich­er das Brows­er die sich dem neuen Sys­tem angepasst haben auch diesen ausführen
kein box-shad­ow anzeigen anstatt der Zahlen und Farbe none angeben*/
box-shad­ow: inset 10px 20px 30px white,
‑10px ‑10px 30px white;
/* mit inset ver­läuft der Schat­ten nicht ausser­halb son­dern inner­halb des Objekts
um mehrere Schat­ten um ein Objekt zu definieren nutzen Sie nur diese schreib­weiße, da bei ein­er doppelten
Ein­tra­gung von “box-shad­ow” nur der let­zte genutzt wird und der erste über­gan­gen wird, bei der Trennung
von bei­den Anweisun­gen nur ein Kom­ma nutzen.
diese Anweisung gilt nur für beliebige Elem­nente, für Schrift gibt es ein andere Anweisung
der erste Wert 10px gibt die hor­i­zon­tale Aus­rich­tung vom Objekt an, bei ein­er pos­i­tiv­en Zahl nach rechts
und bei ein­er neg­a­tiv­en nach links vom Objekt
der zweite Wert 20px gibt die ver­tikale Ver­schiebung an pos­i­tiv nach unten und neg­a­tiv nach oben
der dritte Wert 30px gibt die Härte des Schat­tens an ob 0px also ein direkt har­ter sicht­bar­er Schatten
oder ein weich­er sichtaber­er Schat­ten um das Objekt gelegt wird z.b. 100px*/
text-shadow:
0px ‑1px 0px black,
0px 1px 0px grey;
/*mann kann tolle Effek­te her­stellen, indem man mehrere ver­schi­dene Schat­ten mit unter­schiedlichen Werten mit Kom­ma zusammenfast,
z.B. ein Feuer­ef­fekt mit min 10 ver­schiede­nen Befehlen oder ein Neon­ef­fekt mit min. 5 ver­schiede­nen Befehlen der unterschiedlichsten
Intensität*/
trans­form: rotate(90deg) scale(2);
transform-origin:0% 100%;
/*transform = (ver­wan­del, über­führen, umwan­deln) als eine Möglichkeit rotate = (Rota­tion)
von Ele­menten Wert in Grad angegeben im Uhrzeigersinn pos­i­tiv­er Wert und dage­gen ein neg­a­tiv­er Wert
kein Leerze­ichen zwis­chen in der Dekla­ra­tion “rotate(xydeg);”
bei ein­er Kom­bi­na­tion von trans­form gilt:
trans­form: origin:(0% 50%) scale(1.4);
und nicht
transform-rotate(90deg);
transform-scale(2);
bei deisem 2. Ver­such der bei­den getren­nt zu erfassen würde nur die let­ztere Gültigkeit besitzen
auch hier gilt wieder die geson­derte Kennze­ich­nung ander­er Browser*/
/*transform: scale(1.4);
/* scale = (Ver­größern, verklein­ern, skalieren) hier find­et eine Ver­größerung statt z.B. 1.4 heißt eine 40% Ver­größerung des Elemts
oder auch als Eingabe als (x,y) wobei x und y für
unter­schiedliche Werte ste­hen und somit eine Verzehrung stat­tfind­et, eben­so für ver­schiedene Brows­er festlegen
*/
/*transform: skew(5deg, 6deg);
/* hier find­et eine Schräglage statt oder auch als Eingabe als (x,y) wobei x und y für unter­schiedliche Werte ste­hen und somit eine Verzehrung
stat­tfind­et, eben­so für ver­schiedene Ver­sio­nen festlegen
oder auch als skewX(20deg); d.h für Y wird der Wert von 0 angegeben
eben­so auch für Y gilt auch skewY(20deg); hier wird für X der Wert 0 gegeben
es gilt auch skew(20deg) d.h. die X Achse wird um 20 Grad gedreht und die Y Achse bleibt 0
*/
/*transform: translate(10%,10%);
/* trans­late = (ver­schieben, umset­zen, ver­rück­en, ver­set­zen) hier find­et eine Umset­zung statt oder auch als Eingabe als (x,y)
wobei x für eine hor­i­zon­tale Ver­set­zung gilt und y für eine ver­tikale, man kann auch nur einen Wert set­zen dann gilt nur die horizontale
Ver­schiebung und die ver­tikale wird als 0 festgesetzt
mit pos­i­tiv­en Werten find­en eine Ver­set­zung nach rechts/unten statt mit neg­a­tiv­en eine Ver­set­zung nach links/oben.
es gilt als Ein­heit px oder % wobei % zu bevorzu­gen ist da sich die Ver­set­zung an den Bild­schirm anpasst
, eben­so für ver­schiedene Ver­sio­nen festlegen
*/
/*transform-origin:0% 50%;../*origin = (Anfang, Anfangspunkt, Ursprung) Dreh­punkt fes­tle­gen wo ein Ele­ment gedreht wird
der erste Wert 0% ste­ht für die hor­i­zon­tale Aus­rich­tung und die 50% für die ver­tikale Ausrichtung
es wird von oben links ges­tartet d.h. 0% 0% ist oben links und 50% 100% ist mit­tig unten
, eben­so für ver­schiedene Ver­sio­nen festlegen*/
color:grey;
}

#box3 {
text-align:left;
padding:10px 10px 10px 10px;
background-color:blue;
position:absolute;
bottom:0;
right:0;
z‑index:3;
width:100px; /*obwohl eine class-Selek­tor angelegt wurde die alle #box.. anspricht, hat der ID-Selek­tor eine höhere Wer­tigkeit und wird immer
ein höheres Gewicht haben als die class-Selektoren*/
height:100px;

-webkit-bor­der-top-left-radius: 40px 80px;
‑webkit-bor­der-top-right-radius: 50px 90px;
‑webkit-bor­der-bot­tom-left-radius: 30px 70px;
‑webkit-bor­der-bot­tom-right-radius: 60px 20px;

-moz-bor­der-radius-topleft: 40px 80px;
‑moz-bor­der-radius-topright: 50px 90px;
‑moz-bor­der-radius-bot­tom­left: 30px 70px;
‑moz-bor­der-radius-bot­tom­right: 60px 20px;

bor­der-radius: 40px/80px;
/*
border-radius:100px 50% 50em 50%;
/*abgerundete Eck­en px, em, % ist gültig über­all von Werten von 0–50 bei Px die Divi­sion durch 2 aus bei­den Seiten
auch hier wieder mit den browsereigenen
Erweiterun­gen arbeit­en da es son­st bei älteren Browsern zu kom­p­lika­tio­nen kommt
entwed­er nur eine Angabe, dann bewirkt es die Änderung bei allen vier Eck­en oder einzeln, wobei von links oben im
Uhrzeigersinn die Ein­stel­lun­gen von stat­ten gehe../*border-radius: 50px/80px;
es gibt auch noch eine assymetrische Schreibweise*/
}

#info{
float:right;
width:10em;
background-color:yellow;
}

#logo{
width:30px;
height:30px;
background-color:pink;
}

h1 {color:#F00;} /* h1 = Ele­ment des Seit­en­ti­tel = Selek­tor; col­or = die Eigen­schaft Farbe; 255,0,0 = die Farbe rot also der Wert;
diese bei­den nen­nt man die Deklaration
*/

strong {background-color:#FF0;} /*Hintergrundfarbe*/

i {background-color:#0C0;}

table {
border-color:#0C0; /*Rahmenfarbe*/
border-style:solid; /*Art des Rah­mens solid=durchgezogen, double=doppelt, none=kein, dotted=gepunktet, dashed=gestrichelt,
groove/ridge/inset/outset=3D-Effekt*/
border-width:0.5em; /*Strichstärke des Rahmens*/
/*
border-top-style:hiden; /* top = oben um die Rah­me­nart oben zu bestimmen
border-right-style:double; /*right = rechts um die Rah­me­nart rechts zu bestimmen
border-left-style:groove; /*left = links um die Rah­me­nart links zu bestimmen
border-bottom-style:double; /*bottom = unten um die Rah­me­nart unten zu bestimmen

das Gle­iche

bor­der: green sol­id 5px;
*/
}

p {
color:#0C0;
font-size:150%;
/*gibt die Schrift­größe an entwed­er pt = abso­lut oder em = rel­a­tiv, noch wichtig die Schreib­weiße ist englisch daher statt einem ,
kommt ein .*/
font-family:arial, “luci­da con­sole”, sans-serif ; /*font-family = Schrif­tart, ari­al = Ari­al, wenn diese nicht vorhan­den, dann luci­da con­sole oder
eine ohne ser­ifen (Standfüßchen)*/
font-weight:lighter; /*Schriftstärke, bold = dick, nor­mal, bold­er = dick­er, lighter*/
border-color:#F90;
border-width:1px;
border-top-style:none;
border-right-style:none;
border-left-style:dotted;
border-bottom-style:dotted;
text-indent:1em; /*Einrückung der ersten Zeile eines Blocks*/
line-height:1.7em; /*Zeilenabstand 1.4em bis 1.7em ist gut für eine bessere Lesbarkeit*/
letter-spacing:0.1em; /*Abstand der einzel­nen Buchstaben*/
word-spacing:0.5em; /*Abstand der einzel­nen Wörtern*/
width: 100%; /*Breite der Gesamt­box bes­tim­men, in % berech­net dieser alles nach der realen größe*/
height: 100%; /*Höhe der Gesamt­box bestimmen*/
background-color:#FF0;
bor­der: #0C0 dou­ble 1em;
padding:0; /*Innenabstand des Textes*/
margin:0; /*Außenabstand*/

/*
padding-top:1em; /*Innenabstand des Textes nach oben
padding-left:1em; /*Innenabstand des Textes zur linken Seite
padding-bottom:1em; /*Innenabstand des Textes nach unten
padding-right:1em; /*Innenabstand des Textes zur recht­en Seite
margin-top:10em; /*Außenabstand des Textes nach oben
margin-left:10em; /*Außenabstand des Textes zur linken Seite
margin-bottom:10em; /*Außenabstand des Textes nach unten
margin-right:10em; /*Außenabstand des Textes zur recht­en Seite

geht auch verkürzt:

padding: 1em 2em 3em 4em; heißt top:1em, right:2em, bottom:3em, left:4em
*/
}

#dick{
font-weight:bolder;
font-style:oblique; /*Anzeige der Schrift nor­mal, oblique=schräggestelt, italic=kursiv*/
}

em {background-color:#0C0;}

#haupt­teil {
background-color:#F00; /* hier nun mit #… die Genaue Zuweisung des <div>-Attribut */
}

/* Alle Ele­mente wer­den hier­mit angesprochen:

* {
padding:0;
margin:0;
list-style:none;
}

body {
/* Die Schrift­größe wird gegen Browser­bugs abgesichert
font:normal 100.01% ari­al, sans-serif;
color:#000;
}

#menue {
width:10em;
bor­der: 1px sol­id #fff;
border-right:1px sol­id #777;
border-bottom:1px sol­id #777;
back­ground: #eef;
padding:0;
font:normal 0.9em ari­al, sans-serif;
}

h2 {
font: bold 1em ari­al, sans-serif;
color:#222;
back­ground: #ccf;
padding:3px 12px;
bor­der-top: 1px sol­id #fff;
bor­der-bot­tom: 1px sol­id #777;
}

ul li {
margin:7px 0 0;
bor­der-top: 2px sol­id #99f;
bor­der-bot­tom: 1px sol­id #fff;
}

/* Kon­textse­lek­tor für die Lis­tenein­träge der zweit­en Ebene: */

li li {
border:0;
margin:0;
display:inline;
}

a {
display:block;
col­or: #000;
padding: 1px 5px 3px 10px;
bor­der: 1px sol­id #eef;
bor­der-top: 1px sol­id #fff;
bor­der-bot­tom: 1px sol­id #aaf;
border-left:0;
background:#eef;
}

strong {
display:block;
col­or: #fff;
padding: 2px 5px 3px 10px;
back­ground: #006;
bor­der-right: 1px sol­id #fff;
bor­der-top: 1px sol­id #808000;
bor­der-bot­tom: 1px sol­id #ddf;
bor­der-left: 2px sol­id #bbb;
}

strong dfn {
color:#eef;
}

li li a, li li a:hover, li li strong {
padding-left:20px;
}

a:visited {
color:#444;
back­ground: url(butvis.gif) right top no-repeat;
}

a:hover {
padding:2px 10 px;
bor­der-top: 1px sol­id #bbb;
/* bei lokalen Ein­stel­lun­gen bleibt ein Hov­er-Effekt erhalten */
bor­der-right: 7px sol­id #fff;
bor­der-bot­tom: 1px sol­id #ddf;
bor­der-left: 1px sol­id #99f;
back­ground: #fff;
}

a:focus, a:active {
color:#ff0;
font-weight:bold;
bor­der-top: 1px sol­id #ff0;
bor­der-right: 7px sol­id #ff0;
bor­der-bot­tom: 1px sol­id #000;
bor­der-left: 1px sol­id #000;
back­ground: #33a;
}

dfn {
font: bold 0.7em tahoma, sans-serif;
color:#00c;
margin-right:3px;
}

strong dfn {
col­or: #fff;
}

#menue a:focus dfn, #menue a:active dfn {
col­or: #ff0;
}

span.unsichtbar {
position:absolute;
left:-1000px;
top:-1000px;
width:0;
height:0;
overflow:hidden;
display:inline;
}