@charset "UTF-8"; @-ms-viewport { width: device-width; } @viewport { width: device-width; } /* Copyright (c) David Bushell | http://dbushell.com/ */ /* normalize.css v2.0.1 | MIT License | git.io/normalize */ /* Hintergrundfarbe neu: */ /* definiert in Zeilen 267, 350, 379, 424, 469, 607 */ /* #000c67 */ /* #000c67 color description : Very dark blue. */ /* fuer stromstoerung dunkles rot = Paula Jensen Rot*/ /* #BC0137 */ /* tiefes rot */ /* Fonts: Zusätzliche Schriftarten definieren Sie durch das Attribut @font-face, welches Teil des CSS Fonts Module ist.[1] Beispiel @font-face { font-family: 'meine-schrift'; src: url('pfad/zu/meinerschrift.ttf') format('truetype'); } Der Parameter src muss eine gültige URL erhalten, für die Formatangabe sind folgende Werte erlaubt: 'eot' bzw. 'embedded-opentype', referenziert eine Schriftart im Format "Embedded Open Type" 'woff', referenziert eine Schriftart im Format "Web Open Font Format" 'truetype', referenziert eine Schriftart im Format "True Type" 'opentype', referenziert eine Schriftart im Format "Open Type" 'svg', referenziert eine Schriftart im Format "Scalable Vector Graphics" */ /* Silbentrennung: Damit die Silbentrennung auch tatsächlich funktioniert, muss natürlich die Sprache der Seite gesetzt sein: Zurzeit muss auch noch der Browser-Prefix herhalten, also p { -moz-hyphens: auto; -o-hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; } Nach einer längeren Anlaufphase kommen jetzt auch die Feinheiten wie die Zahl von Silbentrennungen in Folge (hyphenate-limit-lines: 2) und die Zahl der Buchstaben im Wort, bei der getrennt werden darf (hyphenate-limit-chars: auto 5). p { hyphenate-limit-chars: auto 5; hyphenate-limit-lines: 2; } Alles zurzeit nur mit Browserprefix! */ article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary { display: block; } audio, canvas, video { display: inline-block; } audio:not([controls]) { display: none; height: 0; } [hidden] { display: none; } html { font-family: sans-serif; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } body { margin: 0; } a:focus { outline: thin dotted; } a:active, a:hover { outline: 0; } h1 { font-size: 2em; } abbr[title] { border-bottom: 1px dotted; } b, strong { font-weight: bold; } dfn { font-style: italic; } mark { background: #ff0; color: #000; } code, kbd, pre, samp { font-family: monospace, serif; font-size: 1em; } pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; } q { quotes: "\201C" "\201D" "\2018" "\2019"; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } img { border: 0; } svg:not(:root) { overflow: hidden; } figure { margin: 0; } fieldset { border: 1px solid silver; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } legend { border: 0; padding: 0; } button, input, select, textarea { font-family: inherit; font-size: 100%; margin: 0; } button, input { line-height: normal; } button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; } button[disabled], input[disabled] { cursor: default; } input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; } input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; } input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } textarea { overflow: auto; vertical-align: top; } table { border-collapse: collapse; border-spacing: 0; } ul, ol { padding: 0; list-style: none; } h1, h2, h3, h4, h5, h6, p, ul, ol { margin: 0; } a { text-decoration: none; } body { color: #333; position: relative; width: 100%; min-width: 20em; /* background: #000c67; */ background: #000C67; /* tiefes dunkelblau */ } .highlight { background: #fff699; /* #fff699 color description : Very light yellow. */ padding: 0 0.5em; } .contenttext ul, .contenttext ol { list-style: outside disc; font-size: 1em; line-height: 1.5em; margin-bottom: 1.5em; } .contenttext p { font-size: 1em; line-height: 1.5em; /* margin-bottom: 1.5em; */ margin-bottom: 1.5em; } .contenttext p.small { color: #666; font-size: 0.8125em; line-height: 1.84615em; /* margin-bottom: 1.84615em; */ margin-bottom: 1.0em; } .contenttext p.medium { color: #666; font-size: 0.875em; line-height: 1.71429em; margin-bottom: 1.71429em; } .contenttext p:last-child { margin-bottom: 0; } .contenttext h1 { font-size: 1.875em; line-height: 1.2em; margin-bottom: 0.4em; } .contenttext h2 { font-size: 1.5em; line-height: 1.25em; margin-bottom: 0.5em; } .contenttext a { color: #6d7173; border-bottom: 1px solid #a1cfe5; text-decoration: none; outline: none; } .contenttext a:focus, .contenttext a:hover { color: #4ab336; border-bottom-color: #77b36b; /* #77b36b color description : Slightly desaturated lime green. */ } .block { position: relative; margin: 0 auto; /* Bc-2018-01-20 */ /* padding: 1.5em 1.25em; */ */ /* gibt eher den gesamten Abstand von oben an inkl. Ueberschrift */ padding: 1.5em 0.5em; max-width: 65em; } .close-btn { display: block; width: 2.625em; height: 2.25em; padding: 0; border: 0; outline: none; /* homa-blau */ background: #000C67 url("../img/close-btn.svg") left center no-repeat; background-size: 1.875em 1.875em; overflow: hidden; white-space: nowrap; text-indent: 100%; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .no-svg .close-btn { background-image: url("../img/close-btn.png"); } .close-btn:focus, .close-btn:hover { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; } .nav-btn { display: block; /* width: 2.625em; */ /* height: 2.25em; */ /* versuche */ width: 2.0em; height: 1.75em; padding: 0; border: 0; outline: none; /* background: #333333 url("../img/nav-icon.svg") left center no-repeat; */ /* homa-blau: #000C67 */ background: #000C67 url("../img/burger-30x20.png") left center no-repeat; /* background: #000c67 url("../img/burger-30x20.png") left center no-repeat; */ /* #333333 color description : Very dark gray. */ /* background-size: 1.875em 1.5em; */ background-size: 1.75em 1.25em; overflow: hidden; white-space: nowrap; text-indent: 100%; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70); opacity: 0.7; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .no-svg .nav-btn { background-image: url("../img/nav-icon.png"); } .nav-btn:hover, .nav-btn:focus { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; } #outer-wrap { position: relative; overflow: hidden; width: 100%; } #inner-wrap { position: relative; width: 100%; } #nav { z-index: 200; position: relative; overflow: hidden; width: 100%; color: #fff; } #nav .close-btn { display: none; } #nav .block-title { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } #nav .block { z-index: 2; position: relative; padding: 0.75em 1.25em; /* background: #000c67; */ /* #333333 color description : dunkelblau */ background: #000C67; /* homa-blau */ } #nav ul { *zoom: 1; display: block; } #nav ul:before, #nav ul:after { content: ""; display: table; } #nav ul:after { clear: both; } #nav li { display: block; } #nav li a { display: block; color: #ccc; font-size: 0.875em; line-height: 1.28571em; font-weight: bold; outline: none; } #nav li a:focus, #nav li a:hover { color: #fff; background: rgba(255, 255, 255, 0.1); } #nav li.is-active a { color: #fff; } #top { z-index: 100; position: relative; color: #fff; background: #000C67; /* tiefes dunkelblau */ } #top .block-title { /* margin: 0; */ margin-top: 0.0em; /* font-size: 1.875em; */ /* line-height: 1.2em; */ font-size: 1.6em; line-height: 1.2em; text-align: center; white-space: nowrap; } /* Bc 2018-01-20 */ #top .block-subtitle { margin-top: 0.5em; font-size: 0.8em; line-height: 1.2em; text-align: center; white-space: nowrap; } /*** der burger button */ #top .nav-btn { position: absolute; /* top: 1.5em; */ top: 0.75em; /* left: 1.875em; */ left: 1.5em; } #main { background: #fff; } #main .block { /* padding: 2.625em 1.875em; */ padding: 1.0em 1.0em; /* fuehrt den Text naeher an die Ueberschrift und */ } footer[role="contentinfo"] { background: #ddd; } @media screen and (min-width: 45.0625em) { #top .nav-btn { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } #nav .close-btn { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } #nav .block-title { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } #nav ul { text-align: center; white-space: nowrap; } #nav li { display: inline-block; border-right: 1px solid rgba(255, 255, 255, 0.1); } #nav li:last-child { border-right: none; } #nav li a { padding: 0.42857em 0.85714em; } } @media screen and (max-width: 45em) { #nav { position: absolute; top: 0; padding-top: 5.25em; } #nav:not(:target) { z-index: 1; height: 0; } #nav:target .close-btn { display: block; } #nav .close-btn { position: absolute; top: -3.75em; left: 1.875em; } #nav .block { position: relative; padding: 0; } #nav li { position: relative; border-top: 1px solid rgba(255, 255, 255, 0.1); } #nav li:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.1); } #nav li.is-active:after { z-index: 50; display: block; content: ""; position: absolute; top: 50%; right: -0.03125em; margin-top: -0.625em; border-top: 0.625em transparent solid; border-bottom: 0.625em transparent solid; border-right: 0.625em white solid; } #nav li a { padding: 0.85714em 2.14286em; } .js-ready #nav { height: 100%; width: 70%; /* homa-blau: #000C67 */ background: #000C67; -webkit-box-shadow: inset -1.5em 0 1.5em -0.75em rgba(0, 0, 0, 0.25); -moz-box-shadow: inset -1.5em 0 1.5em -0.75em rgba(0, 0, 0, 0.25); box-shadow: inset -1.5em 0 1.5em -0.75em rgba(0, 0, 0, 0.25); } .js-ready #nav .block { background: transparent; } .js-ready #nav .close-btn { display: block; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70); opacity: 0.7; } .js-ready #nav .close-btn:focus, .js-ready #nav .close-btn:hover { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; } .js-ready #nav { left: -70%; } .js-ready #inner-wrap { left: 0; } .js-nav #inner-wrap { left: 70%; } .csstransforms3d.csstransitions.js-ready #nav { left: 0; -webkit-transform: translate3d(-100%, 0, 0); -moz-transform: translate3d(-100%, 0, 0); -ms-transform: translate3d(-100%, 0, 0); -o-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; } .csstransforms3d.csstransitions.js-ready #inner-wrap { left: 0 !important; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-transition: -webkit-transform 500ms ease; -moz-transition: -moz-transform 500ms ease; -o-transition: -o-transform 500ms ease; transition: transform 500ms ease; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; } .csstransforms3d.csstransitions.js-nav #inner-wrap { -webkit-transform: translate3d(70%, 0, 0) scale3d(1, 1, 1); -moz-transform: translate3d(70%, 0, 0) scale3d(1, 1, 1); -ms-transform: translate3d(70%, 0, 0) scale3d(1, 1, 1); -o-transform: translate3d(70%, 0, 0) scale3d(1, 1, 1); transform: translate3d(70%, 0, 0) scale3d(1, 1, 1); } .csstransforms3d.csstransitions.js-ready #nav .block { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70); opacity: 0.7; -webkit-transition: opacity 300ms 100ms, -webkit-transform 500ms ease; -webkit-transition-delay: ease, 0s; -moz-transition: opacity 300ms 100ms ease, -moz-transform 500ms ease; -o-transition: opacity 300ms 100ms ease, -o-transform 500ms ease; transition: opacity 300ms 100ms ease, transform 500ms ease; -webkit-transform: translate3d(70%, 0, 0) scale3d(0.9, 0.9, 0.9); -moz-transform: translate3d(70%, 0, 0) scale3d(0.9, 0.9, 0.9); -ms-transform: translate3d(70%, 0, 0) scale3d(0.9, 0.9, 0.9); -o-transform: translate3d(70%, 0, 0) scale3d(0.9, 0.9, 0.9); transform: translate3d(70%, 0, 0) scale3d(0.9, 0.9, 0.9); -webkit-transform-origin: 50% 0%; -moz-transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; -o-transform-origin: 50% 0%; transform-origin: 50% 0%; } .csstransforms3d.csstransitions.js-nav #nav .block { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } /**************** für die Fotoshow in den Berichten ******************/ * {box-sizing: border-box} /* body {font-family: Verdana, sans-serif; margin:0} ## deaktiviert */ .mySlides {display: none} img {vertical-align: middle;} /* Slideshow container */ .slideshow-container { /* max-width: 1000px; alt */ max-width: 100%; /* neu */ position: relative; margin: auto; } /* Next & previous buttons */ .prev, .next { cursor: pointer; position: absolute; top: 50%; width: auto; padding: 16px; margin-top: -22px; color: white; font-weight: bold; font-size: 18px; transition: 0.6s ease; border-radius: 0 3px 3px 0; } /* Position the "next button" to the right */ .next { right: 0; border-radius: 3px 0 0 3px; } /* On hover, add a black background color with a little bit see-through */ .prev:hover, .next:hover { background-color: rgba(0,0,0,0.8); } /* Caption text */ .text { color: #f2f2f2; font-size: 15px; padding: 8px 12px; position: absolute; bottom: 8px; width: 100%; text-align: center; } /* Number text (1/3 etc) */ .numbertext { color: #f2f2f2; font-size: 12px; padding: 8px 12px; position: absolute; top: 0; } /* The dots/bullets/indicators */ .dot { cursor: pointer; height: 15px; width: 15px; margin: 0 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; } .active, .dot:hover { background-color: #717171; } /* Fading animation */ .fade { -webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.5s; } @-webkit-keyframes fade { from {opacity: .4} to {opacity: 1} } @keyframes fade { from {opacity: .4} to {opacity: 1} } /* On smaller screens, decrease text size */ @media only screen and (max-width: 300px) { .prev, .next,.text {font-size: 11px} } /********** Ende styles für die Fotoshow in den Berichten *******/