/******************************************************************************* * ******************************************************************************/ body { font-family: Verdana, Arial, Helvetica, sans-serif; background: white; margin: 0; padding: 0; font-size: 1em; color: #0586AC; /* Schriftfarbe: Blue */ line-height: 1.4em; font-size: 120%; /* background-image:url(images/Ozean3a.jpg); background-size:cover; background-position:center; background-repeat:no-repeat; background-size: contain; /* Hierdurch wird das Bild au einem Smartphone verkleinert (responsive Layout) */ background-attachment:fixed; */ } /* font-size: 12px; */ /* text-align: center; */ /********************************************************************** * Header und Logo **********************************************************************/ header { background: white; color: red; /* Keine Auswirkung */ height: 130px; /* Höhe des Headers */ margin-top: -15px; } header p { /* Wird aktuell nicht benötigt */ /* font-size: 1.2em; */ /* line-height: 2.5; */ font-size: 1.8em; line-height: 0.4em; padding-top: 30px; padding-left:100px; padding-buttom:0px; font-weight: bold; color: #0586AC; text-decoration: none; } header img { /* Header mit Logo und Bild */ max-width: 70%; /* So wird das Logo auch auf dem Smartphone vollständig angezeigt */ height: auto; padding-top: 30px; } header a:link, a:visited, a:hover, a:active { padding-top: 70px; padding-left: 10px; margin-left: 80px; padding-buttom: 0px; padding-right: 10px; } header a:hover, a:active { /* background-color: darkcyan; } */ background-color: darkcyan; } #header-box { border: 10px; background: #0586AC; /* background: #f1f1c1; */ /* background-color: grey; */ padding: 10px; margin: 20px; float: left; width: 40%; opacity: 0.9; } /************************************************************************** * Hamburger Menu **************************************************************************/ .nav-toggle { /* nav toggle */ color: yellow; /* Keine Auswirkung */ cursor: pointer; height: 2rem; left: 1rem; /* Abstand der 3 Balken relativ zum Rand */ position: fixed; top: 2rem; width: 3.6rem; z-index: 2; } .nav-toggle:hover { opacity: 0.8; } /* 3 Balken werden etwas blasser beim drüberfahren */ .nav-toggle .nav-toggle-bar, .nav-toggle .nav-toggle-bar::after, .nav-toggle .nav-toggle-bar::before { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); background: #0586AC; /* Schriftfarbe der 3 Balken */ content: ""; height: 0.4rem; transition: all 0.5s; width: 100%; } .nav-toggle .nav-toggle-bar { margin-top: 0; } .nav-toggle .nav-toggle-bar::after { margin-top: 0.8rem; } .nav-toggle .nav-toggle-bar::before { margin-top: -0.8rem; } .nav-toggle.expanded .nav-toggle-bar { background: transparent; } .nav-toggle.expanded .nav-toggle-bar::after, .nav-toggle.expanded .nav-toggle-bar::before { background: #0586AC; color: black; /* Keine Auswirkung */ margin-top: 0; } .nav-toggle.expanded .nav-toggle-bar::after { -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); } .nav-toggle.expanded .nav-toggle-bar::before { -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .nav { /* nav des Hamburger Menü */ /* background: #0586AC; */ background: #eafafa; /* Farbe Umrandung des Menüs color: yellow; /* Keine Auswirkung */ cursor: pointer; /* display: flex; */ /* Geht sonst über die gesamte Hölhe */ font-size: 1.1em; line-height: 3em; height: 100vh; /* 100% der gesamten H�he */ left: -30rem; /* Nach links verschoben. So sind sie nicht sichtbar */ padding: 6rem 2rem 2rem 2rem; position: fixed; top: 0; transition: all 0.5s; width: 20rem; /* Breite des Hintergrundes */ /* z-index: 1; */ } .nav.expanded { left: 0; } .nav ul { list-style: none; /* background: #0586AC; */ background: #eafafa; /* Farbe des Menüs color: white; /* Keine Auswirkung */ margin: auto 0; /* padding-top: 10px; padding-buttom: 30px; */ padding-left: 0px; /* padding: 0; */ } .nav li { border-top: 2px solid white; border-bottom: 2px solid white; } .nav a:link, a:visited, a:hover, a:active { color: #0586AC; /* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */ /* color: red; */ /* Nur 2 Felder werden berücksichtigt: be true, be you (5 und 6 von 11) text-decoration: none; /* line-height: 150%; */ padding-right: 0px; padding-left: 0px; margin-left: 0px; /* Sorgt dafür, dass Text stehen bleibt */ } .nav a:hover, a:active { font-weight: normal; padding-top: 15px; padding-bottom: 15px; padding-left: 5px; margin-left: 0px; padding-right: 5px; background-color: darkcyan; color: white; /* Falls nicht gewählt, wird die Font-Farbe verwendet */ } /*********************************************************************** * Navigation fuer Haupt-Navigation oberhalb der Grafik * margin = Aussenabstand * border = Rahmen * padding = Innenabstand um den Text * heigh/width = Hoehe und Breite des Textes ***********************************************************************/ .horizontal_nav { /* background: #0586AC; */ /* Hintergrund der Navigation: Hellblau */ /* background: #dffbfe; */ /* background: #eafafa; */ background: White; /* background: powderblue; */ height: 30px; font-size: 1.1em; font-weight: normal; /* border-top: 10px solid #0586AC; */ /* border-top: 10px solid #eafafa; */ /* border-bottom: 10px solid #eafafa; */ padding-top: 15px; /* Dicke der Navigation nach oben */ padding-bottom: 15px; /* nach unten */ /* marging-left: 0px */ Keine Auswirkung */ /* marging-right: 0px */ margin-top: 10px; /* Abstand zum Text oben */ margin-bottom: 20px; /* Abstand Text unterhalb der Navigation */ } .horizontal_nav ul { /* Neu ToTo: HIer ist die Liste der Navigation zu beschreiben */ /* width: 86vw; */ width: 95vw; /* Aufgrund der Anzahl der Elemente 100% */ padding:0; margin:0 auto; list-style-type:none; } .horizontal_nav a.aktuell { /* Neu ToTo: HIer ist die Liste der Navigation zu beschreiben */ } .horizontal_nav li { float:left; } /* wenn aktiv und wenn besucht */ .horizontal_nav a:link, a:visited, a:hover, a:active { /* Neu ToTo: HIer ist die Liste der Navigation zu beschreiben */ color: #0586AC; text-align: center; text-decoration: none; /* padding-right: 48px; */ /* padding-left: 45px; */ padding-right: 28px; padding-left: 25px; } .horizontal_nav a:hover, a:active { font-weight: normal; /* color: #0586AC; */ color: white; padding-top: 18px; padding-bottom: 18px; margin-left: 0px; background-color: darkcyan; } /*********************************************************************** *

**********************************************************************/ main { width: 95%; margin: auto; } /********************************************************************** *

* class="mehrspaltig" **********************************************************************/ article { /* Neu */ } .mehrspaltig { width: 100%; margin: auto; /* -webkit-column-width: 40rem; */ -webkit-column-width: 80rem; /* column-width: 40rem; } */ column-width: 80rem; } /*********************************************************************** *