/* CSS-Regel zur Definition der Animation - Checkboxhack-Ersatz für alte Browser, dort mit Java-Script*/
@-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } }
/*
Updates:
13.05.2018: Linkes Menü entfernt. Definition #LeftMenu für das linke Aside wird nicht mehr benötigt.
01.2020: Style überarbeitet. Größere Hausschriften eingeführt, Überschriften neu formatiiert, Klasse H"Link zu DezentLink umbenannt.
01.05.2020: Responsives Menü überarbeitet.
01.06.2020: Umstellung auf Fullscreen (Seitenkopf auf voller Breite)
01.07.2020: Umstellung fertiggestellt, umstrukturiert
08.03.2021: Definition für Auswahlmenü (Dienstplan) eingefügt, form2021; Quelle: https://blog.kulturbanause.de/2015/03/formular-styling-mit-css-select-listen-radio-buttons-und-checkboxen-individuell-gestalten/
*/
/* Schriftarten einbetten*/
@font-face {
font-family: 'Handschrift';
font-display: swap; /* Bild wird zuerst mit Standard-Font angezeigt, wenn Schrift geladen hat gewechselt */
src: local('VTC Letterer Pro Regular'), /* Erst nachsehen, ob die Schrift installiert ist */
url('font/VTCLettererProRegular.woff2') format('woff2'), /* Moderne Browser */
url('font/VTCLettererProRegular.woff') format('woff'), /* IE 11 */
url('font/VTCLettererProRegular.ttf') format('truetype'); /* Safari, Android, iOS */
}
@font-face {
font-family: 'Schreibmaschinenschrift';
font-display: swap; /* Bild wird zuerst mit Standard-Font angezeigt, wenn Schrift geladen hat gewechselt */
src: local('SpecialElite'), /* Erst nachsehen, ob die Schrift installiert ist */
url('font/SpecialElite.woff2') format('woff2'), /* Moderne Browser */
url('font/SpecialElite.woff') format('woff'), /* IE 11 */
url('font/SpecialElite.ttf') format('truetype'); /* Safari, Android, iOS */
}
@font-face {
font-family: 'Fliesstext1';
font-display: swap; /* Bild wird zuerst mit Standard-Font angezeigt, wenn Schrift geladen hat gewechselt */
src: local('Hind-Medium'), /* Erst nachsehen, ob die Schrift installiert ist */
url('font/Hind-Medium.woff2') format('woff2'), /* Moderne Browser */
url('font/Hind-Medium.woff') format('woff'), /* IE 11 */
url('font/Hind-Medium.ttf') format('truetype'); /* Safari, Android, iOS */
}
@font-face {
font-family: 'Fliesstext2';
font-display: swap; /* Bild wird zuerst mit Standard-Font angezeigt, wenn Schrift geladen hat gewechselt */
src: local('Hind-Light'), /* Erst nachsehen, ob die Schrift installiert ist */
url('font/Hind-Light.woff2') format('woff2'), /* Moderne Browser */
url('font/Hind-Light.woff') format('woff'), /* IE 11 */
url('font/Hind-Light.ttf') format('truetype'); /* Safari, Android, iOS */
}
@font-face {
font-family: 'Ueberschrift1';
font-display: swap; /* Bild wird zuerst mit Standard-Font angezeigt, wenn Schrift geladen hat gewechselt */
src: local('Hind-Semibold'), /* Erst nachsehen, ob die Schrift installiert ist */
url('font/Hind-Semibold.woff2') format('woff2'), /* Moderne Browser */
url('font/Hind-Semibold.woff') format('woff'), /* IE 11 */
url('font/Hind-Semibold.ttf') format('truetype'); /* Safari, Android, iOS */
}
@font-face {
font-family: 'Ueberschrift2';
font-display: swap; /* Bild wird zuerst mit Standard-Font angezeigt, wenn Schrift geladen hat gewechselt */
src: local('Hind-Medium'), /* Erst nachsehen, ob die Schrift installiert ist */
url('font/Hind-Medium.woff2') format('woff2'), /* Moderne Browser */
url('font/Hind-Medium.woff') format('woff'), /* IE 11 */
url('font/Hind-Medium.ttf') format('truetype'); /* Safari, Android, iOS */
}
/* ===== Beginn Flex-Box - Definitionen ===== */
/* mobile first */
body {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
max-width: 100%;
width: 100%;
}
header {
-ms-flex-order: 1;
order: 1;
max-width: 100%;
width: 100%;
}
nav {
-ms-flex-order: 2;
order: 2;
max-width: 100%;
width: 100%;
}
#Top {
-ms-flex-order: 3;
order: 3;
max-width: 100%;
width: 100%;
}
main {
-ms-flex-order: 4;
order: 4;
max-width: 100%;
width: 100%;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
}
article {
/* innerhalb main */
-ms-flex-order: 5;
order: 5;
max-width: 100%;
width: auto;
}
#Right {
/* innerhalb main */
-ms-flex-order: 6;
order: 6;
max-width: 100%;
width: auto;
}
section {
}
footer {
-ms-flex-order: 7;
order: 7;
max-width: 100%;
width: auto;
}
/* großes Bild */
@media all and (min-width: 49em) {
body {
}
header {
/*max-height: 200px;
height: auto; */
}
nav {
}
#Top {
}
main {
-ms-flex-align: start;
align-items: flex-start;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-direction: row;
flex-direction: row;
align-items: stretch;
}
article {
/* innerhalb main */
-ms-flex-order: 5;
order: 5;
min-width: 36rem;
max-width: 50rem;
width: auto;
}
#Right {
/* innerhalb main */
-ms-flex-order: 6;
order: 6;
max-width: 10rem;
width: auto;
}
section {
}
footer {
max-width: 100%;
width: auto;
}
}
/* ==== Ende Flex-Box - Definitionen ==== */
/* ========== Beginn MENÜ =============== */
nav label,
nav span {
font-family: Ueberschrift1, "Verdana", "Levenim MT", sans-serif;
font-size: 0.9rem;
text-decoration: none;
}
nav ul li a {
font-family: Ueberschrift1, "Verdana", "Levenim MT", sans-serif;
font-size: 0.9rem;
text-decoration: none;
}
nav ul li label,
nav ul li span {
font-family: Ueberschrift2, "Verdana", "Levenim MT", sans-serif;
font-size: 0.8rem;
text-decoration: none;
}
nav ul li ul li a {
font-family: Ueberschrift2, "Verdana", "Levenim MT", sans-serif;
font-size: 0.8rem;
text-decoration: none;
}
#menu ul {
margin: 0;
padding: 0;
}
#menu .main-menu {
display: none;
}
#tm:checked + .main-menu {
display: block;
}
#menu input[type="checkbox"],
#menu ul span.drop-icon {
display: none;
}
#menu li,
#toggle-menu,
#menu .sub-menu {
border-style: solid;
border-color: rgba(0, 0, 0, .05);
}
#menu li,
#toggle-menu {
border-width: 0 0 1px;
}
#menu .sub-menu {
background-color: #444;
border-width: 1px 1px 0;
margin: 0 1em;
}
.sub-menu-intern{
background-color: #744;
}
#menu .sub-menu li:last-child {
border-width: 0;
}
#menu li,
#toggle-menu,
#menu a {
position: relative;
display: block;
color: white;
text-shadow: 1px 1px 0 rgba(0, 0, 0, .125);
}
#menu,
#toggle-menu {
background-color: #BE1B2D;
}
#toggle-menu,
#menu a {
padding: 0.75rem 1.5rem; /* Höhe Hauptmenü */
}
#menu ul li ul li a {
padding: 0.50rem 1.5rem; /* Höhe Submenü */
}
#menu a {
transition: all .125s ease-in-out;
-webkit-transition: all .125s ease-in-out;
}
#menu a:hover {
background-color: white;
color: #A00000;
}
#menu .sub-menu {
display: none;
}
#menu input[type="checkbox"]:checked + .sub-menu {
display: block;
}
#menu .sub-menu a:hover {
background-color: white;
color: #444;
box-shadow: 1px 1px 1px #ccc;
}
#toggle-menu .drop-icon,
#menu li label.drop-icon {
position: absolute;
right: 0;
top: 0;
}
#menu label.drop-icon, #toggle-menu span.drop-icon {
padding: 0.75rem 2rem;
font-size: 0.9rem;
text-align: center;
background-color: rgba(0, 0, 0, 0.5);
text-shadow: 0 0 0 transparent;
color: rgba(255, 255, 255, 0.75);
}
/* Darstellung mehrzeilig
@media only screen and (max-width: 64em) and (min-width: 52.01em) {
#menu li {
width: 33.333%;
}
#menu .sub-menu li {
width: auto;
}
}
*/
@media only screen and (min-width: 58em) {
#menu .main-menu {
display: block;
padding-left: 5%; /* Menü für Großbild einrrücken - Abstand von links */
}
#toggle-menu,
#menu label.drop-icon {
display: none;
}
#menu ul span.drop-icon {
display: inline-block;
}
#menu li {
float: left;
border-width: 0 1px 0 0;
}
#menu .sub-menu li {
float: none;
}
#menu .sub-menu {
border-width: 0;
margin: 0;
position: absolute;
top: 100%;
left: 0;
width: 19em;
z-index: 3000;
}
#menu .sub-menu,
#menu input[type="checkbox"]:checked + .sub-menu {
display: none;
}
#menu .sub-menu li {
border-width: 0 0 1px;
}
#menu .sub-menu .sub-menu {
top: 0;
left: 100%;
}
#menu li:hover > input[type="checkbox"] + .sub-menu {
display: block;
}
}
/* ========== Ende MENÜ =============== */
.Headbanner {
top: 0;
left: 0;
width: 100% !important;
height: auto !important;
display: block;
padding: 0;
margin: 0;
}
.HeadbannerLogo {
top: 0;
left: 0;
z-index: 1;
width: 100% !important;
height: auto !important;
display: block;
position: absolute;
padding: 0;
margin: 0;
}
body {
margin: 0px auto;
font-family: Fliesstext2, "Verdana", "Levenim MT", sans-serif;
font-size: 0.8rem;
color: #000000;
background: #E0E0E0;
/* Hintergrund Farbverlauf unschön auf mobilephone, daher nur noch auf Großformat */
/* background-image: url(grafik/ecke-dunkelgrau.png); */
/* background-image: linear-gradient(135deg, #000000, #E0E0E0 400px); */
/* background-repeat: no-repeat; */
}
h1 {
font-family: Ueberschrift1, "Verdana", "Levenim MT", sans-serif;
font-size: 1.8rem;
padding-top: 0;
margin: 5px 5px 10px 10px;
clear: left;
}
h2 {
font-family: Ueberschrift2, "Verdana", "Levenim MT", sans-serif;
font-size: 1.3rem;
padding: 0;
margin: 15px 5px 10px 10px;
clear: left;
}
h3 {
font-family: Ueberschrift2, "Verdana", "Levenim MT", sans-serif;
font-size: 1.2rem;
padding: 0;
margin: 15px 5px 20px 10px;
clear: left;
}
table {
}
th {
}
td {
}
table.rotgrau {
border-spacing: 2px;
border-collapse: separate;
clear:left;
float:none;
font-family: Fliesstext2, "Verdana", "Levenim MT", sans-serif;
font-size: 0.8rem;
text-align:center;
}
th.rotgrau {
border-radius: 5px;
background: #BE1B2D;
color: #FFFFFF;
padding: 4px;
margin: 0;
font-family: Fliesstext1, "Verdana", "Levenim MT", sans-serif;
font-weight: normal;
text-align:center;
}
td.rotgrauzeile1 {
border-radius: 5px;
background: #F0F0F0;
color: #000000;
padding: 4px;
margin: 0;
text-align:center;
}
td.rotgrauzeile2 {
border-radius: 5px;
background: #E0E0E0;
color: #000000;
padding: 4px;
margin: 0;
text-align:center;
}
/* Neue Klasse für Dienstplan */
/* - Kopf */
/* - - Unterscheidung EA oder JF (Schriftgröße, Schriftart, Hintergrund, Schriftfarbe) */
/* - Zeilen */
/* - - Unterscheidung EA oder JF (Schriftgröße, Schriftart, Hintergrund) */
/* - - Unterscheidung nach Dienstart (nur Schriftfarbe, ergänzend zu EA/JF-Definition) */
/* - - - Dienst */
/* - - - Freiw. Dienst */
/* - - - = Ausflug*/
/* - - - = Freiwilliger Dienst */
/* - - - = Freiw. Treff */
/* - - - = Freiwilliger Treff */
/* - - - Sonderdienst */
/* - - - = Versammlung */
/* - - - = Bereitschaft */
/* - - - = Arbeitseinsatz*/
/* TABLECLASS */
table.dienstplan {
border: 0;
border-spacing: 2px;
border-collapse: separate;
clear:left;
float:none;
font-family: Fliesstext2, "Verdana", "Levenim MT", sans-serif;
font-size: 0.8rem;
text-align:center;
}
table.dienstplan tr td {
border-radius: 5px;
padding: 2pt;
text-align:left;
}
table.dienstplanjf {
border: 0;
border-spacing: 2px;
border-collapse: separate;
clear: left;
float: none;
font-family: Fliesstext1, "Verdana", "Levenim MT", sans-serif;
font-size: 0.9rem;
text-align: center;
}
table.dienstplanjf tr td {
border-radius: 5px;
padding: 3pt 5pt;
text-align:left;
}
table.dienstplankg {
border: 0;
border-spacing: 2px;
border-collapse: separate;
clear: left;
float: none;
font-family: Fliesstext1, "Verdana", "Levenim MT", sans-serif;
font-size: 0.9rem;
text-align: center;
}
table.dienstplankg tr td {
border-radius: 5px;
padding: 3pt 5pt;
text-align:left;
}
th.dienstplan {
background: #BE1B2D;
border-radius: 5px;
color: #FFFFFF;
padding: 4px;
margin: 0;
font-family: Fliesstext1, "Verdana", "Levenim MT", sans-serif;
font-size:1.0rem;
font-weight: normal;
text-align:center;
}
th.dienstplanjf {
background: #0000A0;
border-radius: 5px;
color: #FFFFFF;
padding: 4px;
margin: 0;
font-family: Ueberschrift2, "Verdana", "Levenim MT", sans-serif;
font-size:1.1rem;
font-weight: normal;
vertical-align: middle;
text-align: center;
}
th.dienstplankg {
background: #9BDAFF;
border-radius: 5px;
color: #000080;
padding: 4px;
margin: 0;
font-family: Ueberschrift2, "Verdana", "Levenim MT", sans-serif;
font-size:1.1rem;
font-weight: normal;
vertical-align: middle;
text-align: center;
}
/* CLASS */
td.dienstplanzeile-1 {
background: #F0F0F0;
color: #000000;
margin: 0;
vertical-align: top;
}
td.dienstplanzeile-2 {
background: #E0E0E0;
color: #000000;
margin: 0;
vertical-align: top;
}
td.dienstplanzeile-alt1 {
background: #B0C0D0;
color: #505050;
margin: 0;
vertical-align: top;
}
td.dienstplanzeile-alt2 {
background: #A0B0C0;
color: #505050;
margin: 0;
vertical-align: top;
}
td.dienstplanzeile-info {
background: #B0B0B0;
color: #000000;
margin: 0;
}
td.dienstplantext-jfalt {
color: #909090;
}
td.dienstplantext-jfdienst {
color: #B40404;
}
td.dienstplantext-sonder {
color: #0B610B;
}
td.dienstplantext-freiw {
color: #0431B4;
}
td.dienstplantext-normal,
span.dienstplantext-normal {
color: #000000;
}
/* ENDE - Bis hier neu */
tr.rotgrauzeileeinsatzadmin,
td.rotgrauzeileeinsatzadmin {
height: 2em;
font-size: 0.8rem;
}
table.einsatz {
border: 0;
border-spacing: 2px;
padding: 0;
margin: 0;
clear:left;
float:none;
font-family: Fliesstext2, "Verdana", "Levenim MT", sans-serif;
font-size: 0.8rem;
}
th.einsatz {
border-radius: 5px;
background: #BE1B2D;
color: #FFFFFF;
padding: 5px 2px;
margin: 0;
font-family: Fliesstext1, "Verdana", "Levenim MT", sans-serif;
font-weight: normal;
text-align:center;
}
td.einsatzzeile1,
th.einsatzzeile1 {
border-radius: 5px;
background: #F0F0F0;
color: #000000;
padding: 5px 2px;
margin: 0;
vertical-align: top;
}
td.einsatzzeile2,
th.einsatzzeile2 {
border-radius: 5px;
background: #E0E0E0;
color: #000000;
padding: 5px 2px;
margin: 0;
vertical-align: top;
}
td.einsatzzeile3,
th.einsatzzeile3 {
border-radius: 5px;
background: #F5D0A9;
color: #000000;
padding: 5px 2px;
margin: 0;
vertical-align: top;
}
table.blindtop,
td.blindtop {
border: 0;
border-spacing: 0 5px;
vertical-align:top;
}
.AnzeigeNurGross,
.AnzeigeNurGross,
.AnzeigeNurGross {
display: none;
}
.AnzeigeNurMobil,
.AnzeigeNurMobil,
.AnzeigeNurMobil {
display: block;
}
table.einsatzliste {
display: none;
}
table.einsatzabk {
border: 0;
border-spacing: 0;
padding-left: 20px;
font-size: 0.8rem;
}
table.zeittafel {
font-size: 0.8rem;
width:99%;
}
.Formular {
display: block;
min-width: 50%;
max-width: 20rem;
width: auto;
padding: 1em;
margin-left: auto;
margin-right: auto;
margin-bottom: 1em;
border-radius: 5px;
border: 1px solid #E0E0E0;
background-color: #F0F0F0;
font-family: Fliesstext2, "Verdana", "Levenim MT", sans-serif;
font-size: 1rem;
text-align: left;
}
/* ===== START Auswahlmenü neu für Dienstplan--Auswahl-Optionen ===== */
/* Klasse form2021 */
/* basic styling */
*.form2021 {
font-size: 1em;
font-family: Fliesstext1, "Verdana", "Levenim MT", sans-serif;
line-height: 150%;
box-sizing:border-box;
}
form.form2021 {
max-width: 600px;
margin:0 auto;
}
fieldset.form2021 {
padding:0;
border:none;
margin:1em 0 0 0;
}
legend.form2021 {
font-size:1.2em;
font-weight: bold;
}
.boxform2021 {
border-radius: 5px;
background:#eee;
padding: 1em;
}
.boxform2021 div {
clear: both; /* fix for IE8 */
}
/* Labels */
label.form2021 {
display: inline-block;
}
label.form2021 {
margin: .2em 0;
}
/* remove standard-styles */
input.form2021, select.form2021, textarea.form2021 {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border:none;
border-radius: 0;
font-size: 1em;
width: 100%
}
/* Input & Textarea */
input.form2021, textarea.form2021 {
background-color:white;
border: 1px solid #bbb;
padding:.75em 1em .5em 1em;
box-shadow:inset 0 2px 1px 0 rgba(0,0,0,0.2);
}
textarea.form2021 {
resize:vertical;
}
input.form2021:hover,
input.form2021:active,
textarea.form2021:hover,
textarea.form2021:active {
border:1px solid #666;
}
/* Select */
select.form2021 {
width:100%;
border: 1px solid #bbb;
padding:.75em 1em .5em 1em;
box-shadow: 0 2px 1px 0 rgba(0,0,0,0.2);
background-color:white;
background-image:url(grafik/form2021pfeil.png);
background-position: right;
background-repeat: no-repeat;
}
select.form2021:hover {
box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1);
}
/* Hide browser-styling in IE10 */
select.form2021::-ms-expand {
display:none;
}
/* Hide custom-icons in lower versions of Internet Explorer (< IE10). */
.lt-ie10 select.form2021 {
background-image: none;
}
/* graceful degradation for ie8 */
input[type='checkbox'].form2021,
input[type='radio'].form2021 {
width:auto;
float:left;
margin-right: .75em;
background:transparent;
border:none;
}
/* better styling only for modern browsers. To identify them, check for pseudoclass (:checked, :not(:checked)) */
/* hide standard inputs */
input[type='checkbox'].form2021:checked,
input[type='checkbox'].form2021:not(:checked),
input[type='radio'].form2021:checked,
input[type='radio'].form2021:not(:checked) {
background: transparent;
position: relative;
visibility: hidden;
margin:0;
padding:0;
}
input[type='checkbox'].form2021 + label.form2021,
input[type='radio'].form2021 + label.form2021 {
cursor: pointer;
}
/* add custom inputs with ::before */
input[type='checkbox'].form2021:checked + label.form2021::before,
input[type='checkbox'].form2021:not(:checked) + label.form2021::before,
input[type='radio'].form2021:checked + label.form2021::before,
input[type='radio'].form2021:not(:checked) + label.form2021::before {
content:' ';
display:inline-block;
width: 17px;
height:17px;
position: relative;
top:4px;
border: 1px solid #bbb;
background: white;
margin-right: 1em;
box-shadow: inset 0 1px 1px 0 rgba(0,0,0,.1);
}
input[type=radio].form2021:checked + label.form2021::before,
input[type=radio].form2021:not(:checked) + label.form2021::before {
border-radius: 30px;
}
input[type='checkbox'].form2021:hover + label.form2021::before,
input[type='radio'].form2021:hover + label.form2021::before {
background:#ddd;
box-shadow: inset 0 0 0 2px white;
}
input[type='checkbox'].form2021:checked + label.form2021::before,
input[type='radio'].form2021:checked + label.form2021::before {
background:black;
box-shadow: inset 0 0 0 2px white;
}
/* ===== ENDE Auswahlmenü neu für Dienstplan--Auswahl-Optionen ===== */
/* Schwarz-transperenter Bereich mit weißem Text im unteren Bildrand*/
figure.sondersignal {
position: relative;
display: inline-block;
width: 152px;
}
figure.fotos {
position: relative;
display: inline-block;
width: 122px;
margin: 0 10px 10px 10px;
}
figure.fotos img {
display: block;
max-width:120px;
height:auto;
width: auto; /* ie 8 */
}
figure.fotos figcaption,
figure.sondersignal figcaption {
position: absolute;
bottom: 1em;
width: 100%;
text-align: center;
font-size: 0.7rem;
line-height: 1.5em;
color: white;
background: rgba(0, 0, 0, 0.5);
}
figure.jffotos {
position: relative;
display: inline-block;
max-width: 50%;
margin: 0;
padding: 0;
}
figure.jffotos img {
display: block;
height:auto;
width: auto; /* ie 8 */
}
/* Textzeile als Bilduntertitel */
figure.chronik {
position: relative;
display: inline-block;
width: 202px;
margin: 10px 10px 30px 10px;
}
figure.chronik img {
display: block;
max-width:200px;
height:auto;
width: auto; /* ie 8 */
}
figure.chronik figcaption {
position: absolute;
top: 100%;
width: 100%;
text-align: center;
font-size: 0.7rem;
line-height: 1.5em;
color: #000000;
background: none;
}
/* Bilder im Polaroidstil */
figure.polaroid {
background: white;
background: linear-gradient(110deg, white, oldlace);
box-shadow: 4px 4px 15px #444;
max-width: 220px;
vertical-align: top;
margin: 20px 30px 30px 30px;
/* Animation bei mouseover - Zoomeffekt und Drehung; Drehung in Unterklassen Rechts und Links aufgenommen */
position: relative;
/* transform: rotate(4deg); */
transition: all ease 0.6s;
}
figure.polaroidL {
/* Animation bei mouseover - Zoomeffekt und Drehung */
transform: rotate(-4deg);
}
figure.polaroidR {
/* Animation bei mouseover - Zoomeffekt und Drehung */
transform: rotate(4deg);
}
figure.polaroid:hover {
/* Animation bei mouseover - Zoomeffekt und Drehung */
transform: scale(1.1) rotate(0deg);
z-index: 999;
}
figure.polaroid img {
max-width: 90%;
height: auto;
margin: 5% 5% 5% 5%;
}
figure.polaroid figcaption {
width: 90%;
min-height: 52px;
margin: 0 5% 5% 5%;
font-family: Handschrift, "MV Boli", "Comic Sans MS", sans-serif;
font-size: 1.5em;
color: #0000A0;
text-align: center;
}
figure.polaroid figcaption.Normalschrift {
width: 90%;
min-height: 52px;
margin: 0 5% 5% 5%;
font-family: Fliesstext2, "Verdana", "Levenim MT", sans-serif;
font-size: 1em;
color: #404040;
text-align: center;
}
figure.polaroid figcaption.Handschrift {
width: 90%;
min-height: 52px;
margin: 0 5% 5% 5%;
font-family: Handschrift, "MV Boli", "Comic Sans MS", sans-serif;
font-size: 1.5em;
color: #0000A0;
text-align: center;
}
figure.polaroid figcaption.Schreibmaschinenschrift {
width: 90%;
min-height: 52px;
margin: 0 5% 5% 5%;
font-family: Schreibmaschinenschrift, "Courier New", Arial, sans-serif;
font-size: 1em;
color: #000030;
text-align: center;
}
.video-wrapper {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.video-wrapper video,
.video-wrapper iframe,
.video-wrapper object,
.video-wrapper embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.admineingabefeld {
font-family: Fliesstext1, "Verdana", "Levenim MT", sans-serif;
font-size: x-small; /*vorab Rückfallebene für IE definiert*/
font-size: 0.7rem;
}
/* Mobile first - alle Dokument-Blöcke bekommen 100% Breite */
article,
section,
aside,
footer {
/* border-radius: 0px 0.5em 0.5em; border: 1px solid; */
border-radius: 0;
border: 0;
}
article,
section,
aside {
padding: 10px;
margin: 10px 0 0 0;
}
article,
#Right {
border-radius: 12px 12px 12px 12px;
margin: 10px 5px 0 5px;
}
footer {
padding: 2px 10px;
margin: 10px 0 10px 0;
}
header {
border: 0;
box-shadow: 4px 4px 15px #444;
padding: 0;
margin: 0;
width: auto;
}
nav {
box-shadow: 4px 4px 15px #444;
}
header p {
margin: 0;
padding: 5px;
font-family: Fliesstext2, "Verdana", "Levenim MT", sans-serif;
font-size: 0.7rem;
clear: both;
}
.clearfix::before,
.clearfix::after {
content: " ";
display: table;
}
.clearfix::after {
clear: both;
}
.clearfix {
*zoom: 1; /* Für den IE6 und IE7 */
}
section {
background: #FFFFFF;
border-color: #606060;
}
article {
background: #FFFFFF;
border-color: #606060;
box-shadow: 4px 4px 15px #444;
}
article p {
font-family: Fliesstext2, "Verdana", "Levenim MT", sans-serif;
font-size: 1.0rem;
float: none;
margin: 0 10px 10px 10px;
}
article p.hervorgehoben {
font-family: Fliesstext1, "Verdana", "Levenim MT", sans-serif;
}
article img {
float: left;
margin-right: 10px;
margin-bottom: 10px;
border: 1px solid #606060;
border-radius: 0;
}
img.werbebanner {
max-width: 250px;
width: auto;
}
article div {
clear: left;
}
article div.linksfloat {
clear: none;
float: left;
}
article ul {
margin-left: 0;
clear: left;
list-style-type: none;
}
article ul.mitsymbol {
list-style-type: disc;
}
article ul.mitbox,
article p.mitbox,
article div.mitbox {
background-color: #F8E0E0;
border-radius: 10px;
padding: 10px 0;
}
article div.fotobox {
background-color: #B9D6F2;
border-radius: 10px;
padding: 10px;
margin: 10px;
}
article ul.einzugnurpc {
margin-left: 10px;
padding-left: 0;
}
article ul.einzugall {
margin-left: 10px;
padding-left: 20px;
}
article li {
font-family: Fliesstext2, "Verdana", "Levenim MT", sans-serif;
font-size: 1.0rem;
clear: left;
}
aside {
background: #F0F0F0;
border-color: #606060;
box-shadow: 4px 4px 15px #444;
}
#Top {
background-image: linear-gradient(135deg, #606060, #606060 10%, #E0E0E0 90%);
background-repeat: no-repeat;
background-size: cover;
margin: 0;
padding: 0;
}
#Top p {
margin: 0;
padding: 8px 10px 4px 10px;
}
#Right div.iconcontainer {
float: left;
clear: none;
margin: 0;
padding-bottom: 10px;
max-height: 200px;
height: auto;
max-width: 100%;
width: 100%;
}
#Right div.icon {
float: left;
clear: none;
margin-right: 10px;
max-height: 100%;
height: 100%;
max-width: 20%;
width: auto;
}
#Right img.icon {
height: auto;
max-height: 100%;
width: auto;
max-width: 100%;
}
footer {
/*background: #444;
border-color: #606060;
box-shadow: 4px 4px 15px #444;*/
font-size: 0.8rem;
}
footer p {
text-align: right;
float: none;
}
figure.linksfliessend {
float: none;
}
figure.rechtsfliessend {
float: none;
}
.kategorieimage {
float: left;
margin: 0 10px 10px 0;
border: 1px solid #606060;
border-radius: 0 0 10px 0;
box-shadow: 4px 4px 15px #444;
max-width:80px;
height:auto;
width: auto; /* ie 8 */
}
.kategorieimagesmall {
float: right;
margin: 0 10px 10px 0;
border: 1px solid #606060;
border-radius: 0 0 5px 0;
max-height:80px;
height:auto;
width: auto; /* ie 8 */
}
.kategorieimagesmaller {
float: right;
margin: 0 10px 10px 0;
border: 1px solid #606060;
border-radius: 0 0 5px 0;
max-height:50px;
height:auto;
width: auto; /* ie 8 */
}
.buttonaktiv {
color: #000000;
font-size: 0.8rem;
}
.buttoninaktiv {
color: #A0A0A0;
font-size: 0.8rem;
}
.videorauchmelder {
border:0;
width:300px;
height:169px;
}
.videosilvester {
border:0;
width:300px;
height:169px;
}
.videoblaulicht {
border:0;
width:300px;
height:169px;
}
/* Smart Phones und Tablets mit mittlerer Auflösung */
@media all and (min-width: 49em) {
article {
border-radius: 5px;
margin: 10px 0;
}
img.werbebanner {
max-width: 1000px;
width: auto;
}
#Right {
margin: 10px 0 10px 10px;
border-radius: 5px 5px 80px 5px;
}
#Top {
margin: 0;
padding: 0;
}
footer {
margin: 0 0 10px 0;
}
header p {
margin: -5px 0 0 0;
padding: 4px 4px 4px 4px;
font-family: Fliesstext2, "Verdana", "Levenim MT", sans-serif;
font-size: 0.7rem;
clear: none;
}
article ul.einzugnurpc {
margin-left: 0;
padding-left: 40px;
}
article ul.einzugall {
margin-left: 10px;
padding-left: 40px;
}
img.werbebanner {
max-width: 400px;
width: auto;
}
#Right div.icon {
float: none;
clear: both;
max-width: 120px;
width: auto;
height: auto;
max-height: 500px;
margin-right: 0;
padding-bottom: 10px;
}
#Right div.iconcontainer {
float: none;
clear: both;
max-width: 120px;
width: auto;
height: auto;
max-height: 1000px;
margin: 0;
padding: 0;
}
#Right img.icon {
height: auto;
max-height: 500px;
width: auto;
max-width: 120px;
}
body {
background-image: linear-gradient(135deg, #404040, #E0E0E0 400px);
background-repeat: no-repeat;
}
table.rotgrau {
font-size: 0.8rem;
}
table.einsatz {
font-size: 0.8rem;
}
table.einsatzliste {
display: block;
border: 0;
border-spacing: 1px;
padding: 0;
margin: 0;
font-size: 0.7rem;
}
td.einsatzliste,
th.einsatzliste {
padding: 1px;
margin: 0;
background: #E0E0E0;
font-weight: normal;
text-align:right;
}
table.zeittafel {
font-size: 0.8rem;
}
.AnzeigeNurGross,
.AnzeigeNurGross,
.AnzeigeNurGross {
display: block;
}
.AnzeigeNurMobil,
.AnzeigeNurMobil,
.AnzeigeNurMobil {
display: none;
}
.kategorieimage {
float: left;
margin: 0 20px 20px 0;
border: 1px solid #606060;
border-radius: 0 0 10px 0;
box-shadow: 4px 4px 15px #444;
max-width:120px;
height:auto;
width: auto; /* ie 8 */
}
.kategorieimagesmall {
float: right;
margin: 0 20px 20px 0;
border: 1px solid #606060;
border-radius: 0 0 5px 0;
max-height:80px;
height:auto;
width: auto; /* ie 8 */
}
.kategorieimagesmaller {
float: right;
margin: 0 20px 20px 0;
border: 1px solid #606060;
border-radius: 0 0 5px 0;
max-height:50px;
height:auto;
width: auto; /* ie 8 */
}
figure.fotos {
position: relative;
display: inline-block;
width: 202px;
}
figure.fotos img {
display: block;
max-width:200px;
height:auto;
width: auto; /* ie 8 */
}
figure.jffotos {
position: relative;
display: inline-block;
max-width: 25%;
margin:0;
padding: 5px;
}
figure.jffotos img {
display: block;
height:auto;
width: auto; /* ie 8 */
}
/* Bilder im Polaroidstil */
figure.polaroid {
background: white;
background: linear-gradient(110deg, white, oldlace);
box-shadow: 4px 4px 15px #444;
max-width: 220px;
vertical-align: top;
margin: 20px 30px 30px 30px;
}
figure.polaroid img {
max-width: 90%;
height: auto;
margin: 5% 5% 5% 5%;
}
figure.polaroid figcaption {
width: 90%;
min-height: 52px;
margin: 0 5% 5% 5%;
font-family: Handschrift, "MV Boli", "Comic Sans MS", sans-serif;
font-size: 1.5em;
color: #0000A0;
text-align: center;
}
figure.polaroid figcaption.Normalschrift {
width: 90%;
min-height: 52px;
margin: 0 5% 5% 5%;
font-family: Fliesstext2, "Verdana", "Levenim MT", sans-serif;
font-size: 1em;
color: #404040;
text-align: center;
}
figure.polaroid figcaption.Handschrift {
width: 90%;
min-height: 52px;
margin: 0 5% 5% 5%;
font-family: Handschrift, "MV Boli", "Comic Sans MS", sans-serif;
font-size: 1.5em;
color: #0000A0;
text-align: center;
}
figure.polaroid figcaption.Schreibmaschinenschrift {
width: 90%;
min-height: 52px;
margin: 0 5% 5% 5%;
font-family: Schreibmaschinenschrift, "Courier New", Arial, sans-serif;
font-size: 1em;
color: #000030;
text-align: center;
}
figure.linksfliessend {
float: left;
}
figure.rechtsfliessend {
float: right;
}
.buttonaktiv {
font-size: 0.8rem;
}
.buttoninaktiv {
font-size: 0.8rem;
}
.videorauchmelder {
border:0;
width:400px;
height:225px;
}
.videosilvester {
border:0;
width:400px;
height:225px;
}
.videoblaulicht {
border:0;
width:400px;
height:225px;
}
}
/* Für alle */
/* allgemeines - Mehr Lesen bei Einsatztext - auch Menü Smartphone mit Checkboxhack*/
input.hackbox {
display:none;
}
/* default-Zustand */
span.volltext {
display:none;
}
label.mehr_lesen {
color:#A00000;
}
label.mehr_lesen::before {
content:" Mehr";
padding-left: 1em;
margin-left: 0;
background-image:url('grafik/pikto-internlink_red.svg');
background-repeat:no-repeat;
background-position:left center;
background-size: 0.7em;
color: #A00000;
text-decoration: none;
cursor: pointer;
}
/* bei gesetztem Haken */
input.mehr_lesen:checked ~ span.volltext {
display:inline;
}
input.mehr_lesen:checked ~ label.mehr_lesen::before {
content:" Weniger";
padding-left: 1em;
margin-left: 0;
background-image:url('grafik/pikto-internlink_red.svg');
background-repeat:no-repeat;
background-position:left center;
background-size: 0.7em;
color: #A00000;
text-decoration: none;
cursor: pointer;
}
/* Checkboxhack für allgemeine Beschreibungen und Dienstplan (Aufklappen des Kalender-Icons) - Ergänzung zum input.hackbox */
/* default-Zustand */
span.beschreibung {
display:none;
}
label.aufklappen {
color:#A00000;
}
label.aufklappen::before {
content:"";
color:#A00000;
cursor: pointer;
}
/* bei gesetztem Haken */
input.aufklappen:checked ~ span.beschreibung {
display:inline;
}
input.aufklappen:checked ~ label.aufklappen::before {
content:"";
color:#A00000;
cursor: pointer;
}
/* Allgemeine Formatierung */
.nowrap {
white-space: nowrap;
}
.wrap {
white-space: normal;
}
.Link {
border: 0;
border-radius: 0;
color: #A00000;
text-decoration: none;
}
.Link:hover {
text-decoration: underline;
}
.DezentLink {
border: 0;
border-radius: 0;
color: #000000;
text-decoration: none;
}
.DezentLink:hover {
text-decoration: none;
color: #404040;
}
.GreyLink {
border: 0;
border-radius: 0;
color: #A0A0A0;;
text-decoration: none;
}
.GreyLink:hover {
text-decoration: none;
color: #404040;
}
.RedLink {
border: 0;
border-radius: 0;
color: #FF0000;
text-decoration: none;
}
.RedLink:hover {
text-decoration: underline;
}
.InternLink {
list-style-type: none;
padding-left: 1em;
margin-left: 0;
background-image:url('grafik/pikto-internlink_red.svg');
background-repeat:no-repeat;
background-position:left center;
background-size: 0.7em;
color: #A00000;
text-decoration: none;
}
.ExternLink {
list-style-type: none;
padding-left: 1.2em;
margin-left: 0;
background-image:url('grafik/pikto-externlink_red.svg');
background-repeat:no-repeat;
background-position:left center;
background-size: 1.1em;
color: #A00000;
text-decoration: none;
}
.InternLink:hover,
.ExternLink:hover {
text-decoration: underline;
}
p.seitenauswahltext,
span.seitenauswahltext {
color: #808080;
font-size: 0.8rem;
text-decoration: none;
vertical-align: middle;
clear: none;
/*float: left;*/
padding: 5px 3px 0 3px;
margin: 5px 3px 0 3px;
}
a.seitenauswahltext {
color: #808080;
text-decoration: none;
}
a.seitenauswahltext:hover {
color: #404040;
text-decoration: none;
}
.pikto {
float: left;
border: 0;
margin-right: 5px;
}
.wetterpikto {
float: left;
border: 0;
margin: 0px;
padding: 0 2px 4px 2px;
}
.Einsatznr {
font-family: Fliesstext1, "Verdana", "Levenim MT", sans-serif;
font-size: 1.5rem;
color: #A0A0A0;
clear: both;
}
.Bildunterschrift,
.Fussnote,
.Einsatzbericht {
font-family: Fliesstext2, "Verdana", "Levenim MT", sans-serif;
font-size: 0.8rem;
color: #606060;
clear: left;
}
.Feldbeschriftung {
font-family: Fliesstext2, "Verdana", "Levenim MT", sans-serif;
font-size: 0.8rem;
color: #606060;
margin-top: -0.4rem;
}