/* = = = = = = = = = = = = = = = = = datei format.css = = = = = = = = = = = = 
= = = = = = = = = = = = = */ /* ############################################################ 
*/ /* allgemein */ /* ############################################################ 
*/ *, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; 
box-sizing: border-box; } html, body { font-family:'open_sanslight',georgia, tahoma, 
arial, Verdana, Segoe, 'Open Sans',helvetica,sans-serif; font-size:62.5%; line-height:1.4; 
font-weight:normal; height:100%; } body { font-size:1.7rem; margin: 0 auto; } 
/* zusätzliche zeilenabstände, absatz */ .content br { line-height:.6; } p.break 
{ line-height:7rem;margin:0; } /* überschriften */ h1, h2, h3, h4, h5 { font-family:'robotolight'; 
font-weight:normal; color:#454A52; } h2 {text-align:center; font-size:2.3rem; line-height: 
3.7rem; margin-top: 0rem; margin-bottom: 4.2rem; letter-spacing:.0rem; } h1 {text-align:center; 
text-transform:uppercase; font-size:3.0rem; line-height: 3rem; margin-top: 0rem; 
margin-bottom: 2.1rem; letter-spacing:0rem; } h1:after {display:block; border-top: 
5px solid #788696; display: block; width: 80px; content: ""; margin: 8px auto 
0; } h3 { font-size:2.1rem; line-height: 2.3rem; margin-top: 2.1rem; margin-bottom:1.4rem; 
letter-spacing:0rem; } /* allgemeine links */ a {background-color:transparent; 
color:#26292D; text-decoration: underline; } a:hover {color:#26292D; background-color:transparent; 
text-decoration:none; } /* quelltext-erklärungen - wenn vorhanden */ pre {white-space:pre-wrap;position:relative; 
font-size:1.5rem; padding:1rem 0.5rem 1rem 0.5rem; margin:2rem auto; text-align:center; 
background:#F2F3F4; border:dotted 3px #8E979F; color:#40454A; font-family:'open_sanslight',georgia, 
tahoma, arial, Verdana, Segoe, 'Open Sans',helvetica,sans-serif; } pre .extra 
{display:inline-block;position:absolute;left:0rem;top:1rem;font-size:2rem; color:#40454A;font-weight:bold; 
transform:rotate(-45deg); } /* ############################################################ 
*/ /* speziell*/ /* ############################################################ 
*/ .container_haupt { margin:0 auto; padding:0; width:100%; } .wrapper { margin:0 
auto; width:100%;padding:0rem; } /* bilder anpassen der grösse */ /* wenn sie 
eigene einzelne bilder einbauen, unabhängig von unserem bilderstystem, dann werden 
diese bilder maximal (max-width) so gross wie die original-abmessungen des bildes 
bwz. des umschliessenden containers wenn vorhanden */ img {max-width: 100%; height: 
auto; margin:0 auto; } /* wrapper homepagename */ .wrapper-name {position:absolute;width:50rem;height:18rem;z-index:0; 
left:50%;top:20%; margin-left:-15rem; margin-top:-9rem; display:table; } /* homepagename 
*/ .name{ display:table-cell;text-align:center; vertical-align:middle; text-align:left; 
font-size:1.8rem; line-height:2rem; letter-spacing:.0rem; color:#F1F3F5; padding: 
1rem .5rem; text-transform:uppercase; } .name b {font-weight:bold; font-size:3.0rem; 
line-height:3.0rem; } .name:before {display:block; font-family:'Font Awesome 5Free';/* 
- 'Font Awesome 5 Brands' for Brands symbols. */ font-weight: 400;/* Weight of 
the font (mandatory) - 400 for Regular and Brands symbols; - 900 for Solid symbols. 
*/ text-align:center; content:' ---------------- \f005 \f005 \f005 ---------------- 
\A '; white-space: pre;; color:#98A3AF; font-size:1.4rem; letter-spacing:-1px; 
} /* ############################################################ */ /* bereich 
logo */ /* ############################################################ */ .section-logo 
{ width:100%;height:70vh; position:relative; background:#EFEFEF; background-image:url(../images/online-teaching.jpg); 
background-position:50% 30%; background-repeat:no-repeat; background-size:cover; 
} /* ############################################################ */ /* bereich 
content */ /* ############################################################ */ 
.section-content { width:100%; color:#26292D; margin:0; padding:0; } .content 
{background:white; display:block;width:100vw; min-height:50vh; margin: 0 auto; 
text-align:left; padding:6rem 3rem 10rem 3rem ; } /* = = = = = = = = = = = = = 
= = = = = = = = = = = = = = = = = = = = = = = = = = = */ /* BILDER IM INHALTSBEREICH 
- BILD-SYSTEM mit FLOAT */ /* = = = = = = = = = = = = = = = = = = = = = = = = 
= = = = = = = = = = = = = = = = */ /* hinweis: erklärt wird es hier im template 
auf der seite index4.html (quartus) */ /* = = = = = = = = = = = = = = = = = = 
= = = = = = = = = = = = = = = = = = = = = = */ /* = = = = = */ /* BILD-SYSTEM 
- mit FLOAT */ /* = = = = = */ .content .box-text-re img , .content .box-text-li 
img, .content .box-mi { border:solid 5px #788696; box-shadow:0 0 2px black; } 
/* bild steht links, text fliesst rechts herum */ .content .box-text-re {float:none; 
padding:0; width: 100%; margin:0 auto; margin-bottom:3rem; margin-top:3rem; } 
/* bild steht rechts, text fliesst links herum */ .content .box-text-li {float:none; 
padding:0; width: 100%; margin:0 auto; margin-bottom:3rem; margin-top:3rem; } 
/* bild steht alleine ohne text in der mitte */ .content .box-mi { padding:0; 
width: 100%; margin:0 auto; margin-bottom:3rem; margin-top:3rem; } /* ############################################################ 
*/ /* bereich fusstop */ /* ############################################################ 
*/ .section-fusstop { width:100%; color:#DCE0E7; background: lightslategray;/* 
IE9*/ background: radial-gradient(circle, #647484,#414B56 ); } .fusstop {display:table;width:100%; 
height:20rem; margin: 0 auto; padding: 0;padding-bottom:2rem; font-size:1.4rem; 
} .fusstop h3 {margin:1rem 0;text-align:left; font-weight:normal; padding-right:1rem; 
color:#DEE0E2; font-size:1.4rem; border-bottom:dotted 1px #86A0BB; text-transform:uppercase; 
} .fusstopbox { display:block; padding:1rem 1rem 3rem 1rem ; text-align:left; 
} /* kontakt */ .fusstopbox .inhalt {width:28rem; padding:0rem; margin:0 auto; 
} .fusstopbox .inhalt ul {text-align:left; padding:0rem; margin:0; } .fusstopbox 
.inhalt li {list-style:none; padding:0rem; margin:0; } /* ############################################################ 
*/ /* fusstop-menu */ /* ############################################################ 
*/ /* allg. links, hier der email-link (infokontaktmustersohn@mail.de) */ .fusstop 
a {text-align:left; text-decoration : none; font-size:1.4rem; letter-spacing:0rem; 
padding:.1rem ; margin:.1rem 0; color:#DCE0E7 ; } .fusstop li a:hover { color:#fff 
; text-decoration:underline; } /* das fusstop-menü */ .fusstop-menu {width:28rem; 
margin:0 auto; padding:0; } .fusstop-menu ul { text-align:left; margin:0; padding:0; 
} .fusstop-menu li {list-style-type: none; margin:0; padding:0 ; } .fusstop-menu 
a {text-align:left; text-decoration : none; font-size:1.4rem; letter-spacing:0rem; 
padding:.1rem ; margin:.1rem 0; color:#DCE0E7; } .fusstop-menu li a:hover { color:#fff 
; text-decoration:underline; background:transparent; } /* ############################################################ 
*/ /* bereich fuss */ /* ############################################################ 
*/ .section-fuss {position:relative; width:100%; background:#5D6C7B;/* IE9*/ background: 
linear-gradient(to bottom, #5D6C7B,#000 ); box-shadow:0 0 1px black; } .fuss {display:table; 
margin: 0rem auto;text-align:center; padding:1rem;width:100%; height:4rem; } .fussbox-1a 
{ display:table-cell; vertical-align:middle;text-align:center; text-align:center; 
padding:0rem 0rem; font-size:1.6rem; line-height:1.9rem; } /* fussname */ .fussname 
{display:block; font-family:'robotolight'; text-align:center; padding:.6rem; font-size:1.2rem; 
line-height:1.5rem; letter-spacing:0.2rem; color:#B8C0C9; } /* ############################################################ 
*/ /* M E D I A Q U E R I E S - RESPONSIVE-BILDSCHIRMABFRAGEN*/ /* ############################################################ 
*/ /* ==================================== ab 320 pixel ================================== 
*/ /* - - - - - nur info - - - - - */ /* für die kleinste smartphone-auflösung 
von 320pixel benötigen wir KEINE bildschirmabragen (media queries), denn hierfür 
gilt ja automtisch der gesamte vorstehende quelltext-code - weil wir das template 
ja 'mobile-first' angelegt haben */ /* ==================================== ab 
360 pixel ================================== */ @media (min-width: 360px) { /* 
keine angabe */ .section-logo { height:36rem; } } /* ==================================== 
ab 400 pixel ================================== */ @media (min-width: 400px) { 
.content, .fuss { width:90vw; } .section-logo { height:32rem; } } /* ==================================== 
ab 480 pixel ================================== */ @media (min-width: 480px) { 
.section-logo { height:36rem; } /* - - - - - BILDER IM INHALTSBEREICH - mit FLOAT 
- - - - - */ .content .box-text-re { width: 70%; } .content .box-text-li{ width: 
70%; } .content .box-mi{ width: 70%; } /* - - - - - ende BILDER IM INHALTSBEREICH 
- mit FLOAT - - - - - */ .fussmenu li { display:inline; } } /* ==================================== 
ab 600 pixel ================================== */ @media (min-width: 600px) { 
/* keine angabe */ } /* ==================================== ab 640 pixel ================================== 
*/ @media (min-width: 640px) { /* keine angabe */ } /* ==================================== 
ab 768 pixel ================================== */ @media (min-width: 768px) { 
html {font-size:70%;} .content, .fusstop, .fuss { width:96vw; } .section-logo 
{ height:38rem; } .content { text-align:justify; } /* - - - - - BILDER IM INHALTSBEREICH 
- mit FLOAT - - - - - */ .content .box-text-re {width: 30%; float:left; text-align:justify; 
margin-right:2rem; margin-bottom:1rem; margin-top:1rem; } .content .box-text-li 
{width: 30%; float:right; text-align:justify; margin-left:2rem; margin-bottom:1rem; 
margin-top:1rem; } .content .box-mi{ width: 40%; } /* - - - - - ende BILDER IM 
INHALTSBEREICH - mit FLOAT - - - - - */ .fusstop , .fusstop a {font-size:1.1rem; 
} .fusstop-menu {width:auto; } .fusstop-menu a {font-size:1.1rem; } .fusstopbox 
{width:33.33%; display:table-cell;vertical-align:top; } .fusstopbox .inhalt {width:auto; 
} } /* ==================================== ab 800 pixel ================================== 
*/ @media (min-width: 800px) { /* keine angabe */ } /* ===================================== 
ab 1024 pixel ================================= */ @media (min-width: 1024px) 
{ /* wrapper homepagename */ .wrapper-name { margin-top:-7.5rem; } /* - - - - 
- BILDER IM INHALTSBEREICH - mit FLOAT - - - - - */ .content .box-text-re { margin-right:3rem; 
margin-bottom:2rem; margin-top:2rem; } .content .box-text-li{ margin-left:3rem; 
margin-bottom:2rem; margin-top:2rem; } /* - - - - - ende BILDER IM INHALTSBEREICH 
- mit FLOAT - - - - - */ } /* ===================================== ab 1100 pixel 
================================= */ @media (min-width: 1100px) { html { font-size:75%; 
} .content, .fusstop, .fuss { width:93vw; } pre {width:50vw; } } /* ===================================== 
ab 1300 pixel ================================= */ @media (min-width: 1300px) 
{ .content, .fusstop, .fuss { width:90vw; } } /* ===================================== 
ab 1400 pixel ================================= */ @media (min-width: 1400px) 
{ html { font-size:80%; } .content, .fusstop, .fuss { width:86vw; } } /* + + + 
+ + + + + + + C O D E ENDE + + + + + + + + + + */