/* Stylesheet für Selfhtml Design 03
responsives Layout mit Grid Layout ab Z. 210 */
/* ==================================================== GLOBAL DEFINITION ==================================================== */
@import url('https://fontlibrary.org/face/carlito');
/* serif: caladea, el-messiri
sans-serif: carlito
*/
/* alternatives Boxmodell */
html {
box-sizing: border-box;
background: #FFFFFF;
}
*, ::before, ::after {
box-sizing: inherit;
}
body {
max-width: 75em;
margin:0 auto;
padding: 0;
background: #fff;
color: #000070;
font: normal 1em Carlito, Calibri, Arial, sans-serif;
/* font: normal 1em Caladea, Cambria, Times, ElMessiriRegular, sans-serif; */
/* Mindestschriftgröße wird dem Browser, bzw. dem Nutzer überlassen! */
}
/* ==================================================== HEADER ==================================================== */
/*
*/
header {
position: relative;
height: 167px;
margin: 0.1em 0.1em 0 0.1em;
background: #fff url("../../img/fadl.png") no-repeat center;
background-size: contain;
padding: 0 0 0.5em;
}
header a h1,
header a p { /*Die Angaben für h1 müssen mit einem genauen Selektor überschrieben werden. */
color: white;
border-left: 0;
padding: 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;
position: relative;
margin: 2em 0 2em -1.5em;
padding: 0.5em 1em;
background: #4e7a92;
box-shadow: 0px 1px 3px rgba(0,0,0,.8);
}
.ribbon::before{
display: block;
width: 1.5em;
height: 0;
position: absolute;
bottom: -1.5em;
left: 0em;
content: "";
border-bottom: 1.5em solid transparent;
border-right: 1.5em solid rgb(0, 80, 116);
}
/** CONTENT **/
main {
margin: 0 0 1em;
padding: 1em;
background: #FFFFFF;
}
h1 {
padding-left: 0.7em;
color: #66BBFF; /*#00C8C8 */
text-transform: uppercase;
font-size: 1.8em;
border-left:5px solid #66BBFF;
border-bottom:2px solid #66BBFF;
}
h1 span {
font-size: 0.7em;
text-transform: none;
}
h2 {
font-size: 1.4em;
font-weight: bold;
padding: 0px;
margin: 0px;
color: #66BBFF; /*#00C8C8 */
}
h3 {
font-size: 0.9em;
font-weight: normal;
font-style: italic;
padding: 0px;
margin: 0px;
}
h4 {
font-size: 1em;
font-weight: normal;
padding: 0px;
margin: 0px;
color: #66BBFF; /*#00C8C8 */
border-bottom:2px solid #66BBFF
}
.img-border {
margin: 0.5em 1em;
/* box-shadow: 0 0.1em 0.2em rgba(0,0,0,.5); */
}
p {
text-align: left;
line-height: 1.5em;
padding: 0px 0px
}
a {
color: #4e7a92;
outline: none;
text-decoration: underline;
}
a:hover, /* Durch Maus oder Tastatur angewählte Verweise werden sichtbar gemacht */
a:focus {
color: white;
text-decoration: none;
background: #000070 linear-gradient(hsla(0, 0%, 100%, 0.5), transparent);
box-shadow: 0 0.1em 0.2em rgba(0,0,0,.5);
}
a.more {
color: #000070
font-size:0.8em
font-weight: bold;
}
a.more:after{
content:" \2193 ";
font-size:0.8em;
font-weight:bold;
}
a.top {
color: #4e7a92; /* #66BBFF; */
font-size: 1em;
float: right;
font-weight: normal;
}
a.top:after{
content:" \2191 ";
font-size:1em;
font-weight:bold;
}
a.top:hover,
a.top:focus {
color: white;
text-decoration: none;
background: #000070 linear-gradient(hsla(0, 0%, 100%, 0.5), transparent);
box-shadow: 0 0.1em 0.2em rgba(0,0,0,.5);
}
ul.square {
list-style-type:square;
color: #000070;
margin: 0 0 0 0;
font-size: 1em;
font-weight: normal;
line-height: 1.5em;
}
ul.square li{
padding:5px;
}
/*DL, DT, DD Datenliste*/
dl.grid {
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 100%;
grid-template-columns: 1fr 100%;
}
dd {
margin: 0;
padding-left: 1em;
}
dd span:first-child {
display: inline-block;
width: 4em;
}
dl.grid dd {
margin-bottom: 1em;
}
a[href^="tel"] { white-space: nowrap; }
ul#footer-nav li {
list-style-type: none;
display: inline;
padding: 0 0.5em;
border-right: 1px solid #ACACAC;
}
footer {
border-top: 2px solid #66BBFF; /* 1px #000080 solid */
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 1fr;
grid-template-columns: repeat(2, 1fr);
font-size: 0.8em;
padding: 0.1em;
}
ul#footer-nav li:last-child {
border: none;
}
ul#footer-nav img {
width: 1.5em;
}
ul#footer-nav a:hover,
ul#footer-nav a:focus{
color: white;
background-color: #000070;
} ,
ul#footer-nav a:active {
background: white;
}
footer p {
-ms-grid-column: 2;
grid-column: 2 / 3;
font-size: 1 em;
text-align: left;
}
/** Navigation **/
nav#navigation{
}
#navigation ul {
list-style-type: none;
width: 100%;
margin-bottom:30px;
}
#navigation ul li.first-child { border-top: 1px #000070 solid; }
#navigation ul li a {
display: inline-block;
border-bottom: 1px solid #000070;
font-weight: normal;
font-size: 1em;
line-height: 0.5em;
padding: 0.5em 15px;
text-decoration: none;
width: 13em;
}
#navigation ul li a:before{
content:" ";
display:inline-block;
width:1em;
height:1em;
border-left:5px solid #000070;;
}
nav a[aria-current=page]{
background: #66BBFF linear-gradient(hsla(0, 0%, 100%, 0.5), transparent);
box-shadow: 0 0.1em 0.2em rgba(0,0,0,.5);
}
/** Buttons **/
button {
background: #66BBFF linear-gradient(hsla(0, 0%, 100%, 0.5), transparent);
border: 1px solid rgba(0,0,0,.1);
box-shadow: 0 0.1em 0.2em rgba(0,0,0,.5);
color: #3e6a82; /*#4e7a92; */
/* text-shadow: 0 -.05em .05em rgba(0,0,0,0.5); */
font-size: 0.9em;
font-weight: bold;
}
button:hover, /* Durch Maus oder Tastatur angewählte Verweise werden sichtbar gemacht */
button:focus {
color: white;
background-color: #000070;
font-size: 1em;
}
/* button.cancel {
background-color: #c32e04;
}
button.ok {
background-color: #5a9900;
}
*/
fieldset
{
border-color: #66BBFF;
/* box-color: #66BBFF; */
box-shadow: 0 0.2em 0.4em rgba(0,0,0,.1);
}
/*
input
{
box-shadow: 0 0.1em 0.2em rgba(0,0,0,.5);
}
select
{
box-shadow: 0 0.1em 0.2em rgba(0,0,0,.5);
}
textarea
{
box-shadow: 0 0.1em 0.2em rgba(0,0,0,.5);
}
*/
/* ========== Checkbox-Hack ========== */
/* allgemeines */
input.hackbox {
/* display:none; */
}
/* default-Zustand */
span.volltext {
display:none;
}
label.mehr_lesen {
color:#66BBFF;
}
label.mehr_lesen::before {
content:" (mehr";
color:#66BBFF;
}
/* bei gesetztem Haken */
input.mehr_lesen:checked ~ span.volltext {
display:inline;
}
input.mehr_lesen:checked ~ label.mehr_lesen::before {
content:" (weniger";
color:#66BBFF;
}
/* ========== responsives Grid-Layout ========== */
/* mobile first - auf schmalen Bildschirmen wird alles untereinander platziert. */
/* ab einer Breite von 30em haben zwei Spalten nebeneinander Platz: */
@media (min-width: 55em) { /* vorher: 30em */
main {
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 1fr 1fr;
grid-template-columns: repeat(3, 1fr); /* vorher: repeat(3, 1fr) */
grid-gap: 1em;
}
nav {
-ms-grid-column: 1;
grid-column: 1 / 2; /* vorher: 1 / 2 */
/* grid-row: 1 / 4; */ /* vorher: Eintrag fehlte */
}
#intro {
-ms-grid-column: 2;
-ms-grid-column-span: 2;
grid-column: 2 / 4; /* vorher: 2 / 3 */
-ms-grid-row: 1;
grid-row: 1 / 2;
}
article {
-ms-grid-column: 2;
grid-column: 2 / 3;
}
.spalte img {
width: 50%;
float: left;
margin-right: 0.5em;
}
}
/*
@media (min-width: 80em) {
main {
grid-template-columns: repeat(3, 1fr);
}
nav {
grid-row: 1 / 4;
}
#intro {
grid-column: 2 / 4;
grid-row: 1 / 2;
}
article {
grid-column: 2 / 4;
}
aside {
grid-column: 3 / 4;
grid-row: 1 / 2;
}
.spalte {
grid-row: 2 / 3;
}
.spalte img {
width: 33%;
}
}
*/