@charset "UTF-8";
/* CSS Style Document WIBcms */
/* Theme: ModernLight */
/* Es gibt Einstellungen für Farben, Hintergründe und Textformatierungen (auch fonts),
die wir zur Anzeige brauchen UND beim Aufruf des Texteditors zur Pflege.
Diese Styles sind in der beide Male eingebundenen data/basic.css enthalten. */
/* --- Grundeinstellungen: Raster und Lage --- */
/* für die Zentrierung der gesamten Seite: */
/* div.body {width:1048px; margin:6px auto; padding:10px; background-color:#333; border-radius:9px; box-shadow:0px 0px 20px #666;} */
/* gesamte Seite ist zentriert:
div.body {max-width:75em; margin:0px auto; padding-left:10px; padding-right:10px} */
/* für die Zentrierung der einzelnen Bereiche: */
/* man beachte die Schachtelung (Beispiel header gilt auch für bread,nav,contentwrapper,footer):
gesamte SEITE ist bereits zentriert oder Element füllt gesamte Breite, XxxSize=0:
XxxSize=1: füllt gesamte Breite, Inhalt zentriert
XxxSize=2: ist zentriert
*/
/* div.inner {max-width:72em; margin:0px auto; padding-left:10px; padding-right:10px;} /* vertical-align:top;
div.outer {} */
/* --- Header --- */
header {margin-top:2px; position:relative;}
div.header {padding:0px; position:relative;}
header img {width:100%; max-width:72em; z-index:1;}
div.logo {position:absolute; z-index:4; top:6px; left:4px; width:130px; height:45px;}
div.slogan {position:absolute; z-index:5; bottom:4px; right:4px; text-align:right; vertical-align:bottom; font-size:clamp(1em, 2vw + 0.4em, 2em); font-style:italic; color:white}
/* --- Breadcrumbs --- */
div.locator {padding:6px 0px; border-top:1px solid #f80; border-bottom:1px solid #f80;}
.content ul li {position:relative;} /* Für Pflegesymbole in der Sitemap */
/******************** Navigation ************************/
nav {line-height:1.5; margin:0px;}
nav:after {content:""; clear:both; float:none;}
div.nav {padding:10px 0; min-height:40px; background-color:#f3f3f3;}
nav span, footer span, footer a,
nav a {background-color:#333; color:#cc3; padding:4px; margin-right:6px; border-radius:6px; box-shadow:0px 0px 4px white;}
nav a:hover, footer a:hover {background-color:#56c; box-shadow:0px 0px 10px #cdf; color:#fff; text-decoration:none;}
footer span, li.isSelected > a, nav a.isSelected,
nav span {background-color:#abf; box-shadow:0px 0px 18px #def; color:#003; text-decoration:none;}
footer a.isLocked, footer span.isLocked, .sitemap .isLocked, nav span.isLocked,
nav a.isLocked {color:red;}
footer a.partLocked, footer span.partLocked, .sitemap .partLocked, nav span.partLocked,
nav a.partLocked {color:orange;}
a.timeout, span.timeout {color:lightblue;}
div.naviL2 {padding:20px 0px;}
nav span.L1, nav a.L1 {font-size:1.1em; text-decoration:none; text-transform:uppercase;}
nav span.L2, nav a.L2 {font-size:0.9em; text-decoration:underline; text-transform:none;}
nav span.L3, nav a.L3 {font-size:0.8em; text-decoration:none; text-transform:none; padding-left:20px; padding-right:0px;}
nav span.L4, nav a.L4 {}
footer span, footer a {display:inline-block; margin:0px; min-width:10em;}
/* ---- falls 2. Navigation vorhanden ist ---- */
div.nav1 {display:inline-block; float:left;}
div.nav2 {display:inline-block; float:right;}
/* div.nav2:after {clear:both;}
/* ---- für Dropdown -- */
nav ul span,
nav ul a {display:inline-block;}
/* ---- horizontal ---- */
nav ul {list-style:none; margin:0; padding-left:0;}
nav ul li {float:left; position:relative;} /* margin:0 10px 0 0; */
nav ul li:last-child span,
nav ul li:last-child a {margin-right:0px;}
nav ul li span,
nav ul li a {} /* color:#d0d0d0; font-weight:400; */
nav ul li:hover > a,
nav ul li span {} /* padding-bottom:3px; border-bottom:4px solid #e20021; color:#d0d0d0; */
/* ---- dropdown ---- */
nav ul li ul {position:absolute; top:100%; left:auto; z-index:99; display:none; padding-top:2px;} /* float:left; + max-height:0px; overflow:hidden; statt d:none*/
nav ul li:hover > ul,
nav ul li.focus > ul {display:block;} /* max-height:400px; box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2); */
nav ul ul li {} /* margin:0 1px 1px 0; background:#3a3a3a; border:none; */
nav ul ul li a,
nav ul ul li span {width:120px; padding-left:8px;}
nav ul ul li:hover > a,
nav ul ul li:hover > span {} /* border:none; padding-bottom:7px; background:#E40023; */
/* ---- Level 3 ----
nav ul ul li.isParent:hover > a {background: url("/media/Icons/arrow-single.png") no-repeat scroll right 10px top 9px / 13px auto #e40023;}
nav ul ul ul {left:100%; top:0; padding-left:1px; padding-top:0;} */
/* ------------------- Hamburger --------------- */
/* -- all values are generated by config file -- */
/* ----- example media queries -----
.example {
padding: 20px;
color: white;
}
/* Extra small devices (phones, 600px and down) * /
@media only screen and (max-width: 600px) {
.example {background: red;}
}
/* Small devices (portrait tablets and large phones, 600px and up) * /
@media only screen and (min-width: 600px) {
.example {background: green;}
}
/* Medium devices (landscape tablets, 768px and up) * /
@media only screen and (min-width: 768px) {
.example {background: blue;}
}
/* Large devices (laptops/desktops, 992px and up) * /
@media only screen and (min-width: 992px) {
.example {background: orange;}
}
/* Extra large devices (large laptops and desktops, 1200px and up) * /
@media only screen and (min-width: 1200px) {
.example {background: pink;}
}
@media only screen and (orientation: landscape) {
body {
background-color: lightblue;
}
}
*/
@media only screen and (max-width: 42em) {
nav ul li {display:block; width:100%}
nav ul li ul {position:relative; transition: 1s}
nav ul li span ul {max-height:800px}
}
/* ------------------ Search-Icon ------------------- */
input#search {display:none; width:10px;}
label.search {width:20px;}
#search:checked {display:inline-block; top:30px}
/* --- Footer --- */
/* über gesamte Breite: */
footer {padding:10px 10px 0 10px; background-color:#ddd; display:flex; flex-flow:row wrap;} /* mit inner ^/ max-width:72rem; */
footer div.section {flex:auto;}
/* footer textformatierung ist immer gleich: */
footer ul {list-style:none; text-align:right;}
footer ul li{display:block; float:none; margin-bottom:8px;}
/* --- Ende Footer --- */
div#flashpage {position:absolute; z-index:9; top:3em; right:6em; width:8em; height:8em; background-color:red;}
div#flashpage a {color:white; text-decoration:none; width:100%; height:100%; display:flex; align-items:center; justify-content:center;}
/* --- Inhalt / Content (der äußere contentwrapper umschließt auch nicht-main-Elemente, z.B. eine 2. Navigation) --- */
div.contentwrapper,
div.wrapper {min-height:600px; margin:0 0 160px 0;}
div.wrap {min-height:600px; padding:10px}
/* --- Sidebar / Infobox / Bildleiste --- */
div.sidebar {display:inline-block; width:260px;}
div.sidebarleft {margin:0 30px 10px 0;}
div.sidebarright{margin:0;}
aside, aside.imagebar,
aside.sidebar {padding:0px 9px; background-color:#ddd; box-shadow:5px 5px 10px #333; border:1px solid #f80; border-radius:8px; position:relative;}
/* --- main content of any type --- */
main,
div.content {display:inline-block; max-width:720px; min-height:580px; margin:0; position:relative;}
/* ---------------------------- zweispaltiges Layout ---------------- */
.spaltenparent .spalte {width:48%; float:left;}
.spaltenparent .spalte.clear {clear:left; margin-right:4%;}
.spaltenparent:after {display:block; content:''; clear:both;}
@media screen and (max-width: 800px) {
.spaltenparent .spalte,
.spaltenparent .spalte.clear {width:100%; max-width:580px; float:none;}
}
/* --------------------------------------------------------------- */
/* Cookie-Hinweise: */
#cookies {border:1px solid yellow; background-color:#eee; color:black; text-align:center;}
/* --- Allgemeine HTML-Vorgaben für den Content --- */
/* Überschriften - hier bitte auch gleich für den Pflegebereich berücksichtigen, Danke! */
.h1,.h2,.h3,.h4,.h5,.h6,.p {line-height:22px !important; font-weight:normal !important; background-color:#eee !important; color:#678 !important;}
.h1 {font-size:22px !important; color:#567 !important}
.h4 {font-size:16px !important}
table {border-collapse:collapse;}
th, td {border:1px solid black;}
tr.kopf {background:#c7d0ff;}
/* Formulare */
fieldset {border:1px solid #f80; border-radius:8px; margin:0px;}
label {display:inline-block; width:180px;}
input[type=text], input[type=button], input[type=submit], input[type=password], input[type=email], textarea {width:300px; padding:1px; box-sizing:border-box;}
textarea {height:7em;}
legend {color:#33f;}
img.waiting {width:32px; height:32px; border:none; margin:-16px 0 0 32px; visibility:hidden;}
input.short {width:40px;}
input#Nickname {display:none;}
.selDay {width: 60px;}
.selMon {width:159px;}
.selYear {width: 80px;}
.sidebar label {display:inline;}
.sidebar input[type=text], .sidebar input[type=password], .sidebar input[type=submit] {width:98%;}
/* --- Bilder --- */
/* -- Diashow -- */
div#Galerie1 {position:relative; overflow:hidden; height:470px;}
/* -- manuelle Steuerung -- */
div#Galerie1 a {text-decoration:none; margin:0px 4px; font-size:20px; line-height:28px;}
div#Galerie1 a:hover, div#Galerie1 a:active {color:black;}
div#Galerie1 a.normal {color:#ccc; cursor:pointer;}
div#Galerie1 a.aktiv {color:#000; cursor:default;}
/* -- Die Dias selbst -- */
img.Home {position:relative; top:0px; left:0px; width:600px; height:450px; border-radius:50px; box-shadow:5px 5px 10px #000; opacity:1;}
img#Home1 {position:absolute; top:0px; left:0px; opacity:0;}
img.Galerie2 {height:120px;}
img.Lage {cursor:pointer; width:184px; height:132px;}
img#L1,img#L2 {position:absolute; width:640px; height:460px; top:0px; left:-100px; display:none; cursor:pointer;
border-radius:10px; box-shadow:0px 0px 20px;}
.picbox img {width:100px;}
img.voll {width:336px; height:488px;}
/* --- Angaben für den Kalender --- */
/* -- Kalender mit CSS-Buttons: -- */
div.calbutton {width:100px; height:80px; margin-top:20px; border-radius:20px; box-shadow:0px 0px 20px white; background:#cdf; color:black;
text-align:center; padding-top:20px; transform:rotate(-5deg);}
/* -- Kalender allgemein (>3 Termine) -- */
p.calsummary {font-weight:bold; padding-top:9px;}
div.calsummary {display:inline-block;}
/* Routenplaner */
.map {width:400px; height:240px;}
/* ##### Styles für die KissGallery ##### */
.kissgallery_head {text-align:center;}
.kissgallery {width:100%; background:none; text-align:center; border:none;}
/* Seitenauswahl */
.pageselect {display:inline-block; width:70px; border:1px solid #333; margin:0 1px 5px 1px; background:#fff;}
a.pageselect {color:blue;}
a.pageselect:hover, span.pageselect {color:black;}
/* thumbs (table) */
.kissgallery_thumbs {background:none; margin:0 auto; max-width:170px;}
.kissgallery_thumb_td {background:none; border:0px solid #bbb; padding:4px; text-align:center; vertical-align:top; font-size:0.8em;}
.kissgallery_thumb_td img {background:#fff; padding:4px;}
.kissgallery_thumb_td a img {border: 1px solid #aaa;}
.kissgallery_thumb_td a:hover img {background:#bba; border:1px solid #999;}
.kissgallery_thumb_td input {width:20px;}
.kdown {}
.desc1 {color:black;}
.desc2 {color:blue;}
.desc3 {color:green;}
.desc4 {color:orange;}
/* Bildergruppierung, max. 4 Bilder nebeneinander */
.groupleft {border:2px solid red; border-right:none; width:300px;}
.groupright {border:2px solid red; border-left:none; width:300px;}
.groupmid01,
.groupmid02 {border:2px solid red; border-left:none; border-right:none; width:300px;}
/* dito zusammengeklebt */
.groupright_glued a:hover img,
.groupright_glued a img {}
/* noch nicht realisiert: Bilder übereinander */
.grouptop {}
.groupbottom {}
.groupcenter01,
.groupcenter02 {}
.kissgallery #antwort {background:#fff;}
div#WLCount {display:inline; }
.formWishlist {padding:0px 0px 10px 0px;}
p.kissgallery_legal {font-size:11px; padding:8px;}
p.kissgallery_clearlist {font-size:12px; padding:6px;}
/* --- Auto-News --- */
div.AutoNewsWrapper {position:relative; margin-bottom:16px;}
.AutoNewsTitle {}
div.AutoNews {border:1px solid #ccc;}
div.AutoNews p.datum {text-align:right; font-style:italic; margin:0; padding:0 40px;}
/* --- Die Buttons für hervorgehobene Hinweise --- */
div.nobutton{width:245px; height:85px; font-size:16px; line-height:22px; font-weight:normal; color:#764E3F; padding-top:100px;}
div.stern {position:relative; margin:0px auto; padding-top:50px; width:187px; height:135px; color:white; font-size:20px; line-height:26px; text-align:center; vertical-align:middle; transform:rotate(-5deg);}
div.stern a {color:white;}
/* --- Allgemein Buttons für Hervorhebungen --- */
div.srot {background:url(../media/Buttons/stern_rot.png);}
div.sblau {background:url(../media/Buttons/stern_blau.png);}
div.sgelb {background:url(../media/Buttons/stern_gelb.png);}
div.sgreen {background:url(../media/Buttons/stern_green.png);}
div.eule {position:relative; margin:0 auto; width:245px; height:185px; color:white;}
div.erot {background:url(../media/Buttons/veranstaltung_eule.png); font-size:20px; line-height:26px;}
div.egelb {background:url(../media/Buttons/leseeulegelb.jpg); font-size:18px; line-height:20px;}
div.eultext {position:absolute; text-align:left; vertical-align:middle; transform:rotate(5deg);}
.erot .eultext {top:18px; left:90px;}
.egelb .eultext {top:16px; left:128px;}
/* --- Default-Bilder: --- */
img.calmissing {width:336px; height:254px; margin-top:200px;}
div.overlay {z-index:100; position:absolute;}
/* --- Ende des Contents und Extra-Content --- */
div.contend {clear:both; width:100%;}
/* --- Kommentare --- */
div.CommWrap {background:#eed; padding:1em;}
div#CommForm label {width:90%;}
.CommLevel0 {margin-left:0em;}
.CommLevel1 {margin-left:1em;}
.CommLevel2 {margin-left:2em;}
/* --- Bedienung --- */
.pointer {cursor:pointer; text-decoration:none;}
.pointer:hover {background-color:#ccc; text-decoration:none;}
.zoom {cursor:zoom-in;}
p.help {font-size:small;}
p.error {padding:8px; border:2px solid red; color:red; background-color:#fee;}
p.success {padding:8px; border:2px solid green; color:green; background-color:#efe;}
p.neutral {padding:8px; border:2px solid blue; color:blue; background-color:#eef;}
p.passnote {font-style:italic; font-size:0.9em;}
p.search {background-color:#ffffd0; padding:6px;}
.hilite {background-color:yellow;}
/* --- Protokolle und Uploads --- */
form.protokoll {display:none; z-index:1500; background:#eef; position:absolute; top:10px; left:400px; width:700px; min-height:580px; border-radius:4px; box-shadow: 4px 4px 4px #666; padding:4px;}
.toggle input[type='radio'] {display:none}
.toggle label {display:inline-block; width:.4em; text-align:center; border:1px solid #333; margin:0; padding:0 .5em; color:#fff; font-size:9pt}
.toggle label.s0 {background:#0c0; border-right:0px; border-radius:.3em 0 0 .3em;}
.toggle label.s1 {background:#f00; border-left:0px; border-radius:0 .3em .3em 0;}
.toggle input:checked + label {background:#fff;}
#dropzone {min-height:50px; font-size:.8em; padding:4px; border:1px solid blue;}
#previews {min-height:158px;}
#filelist {min-height:50px;}
#progress {display:none;}
.vorschau {height:150px; max-width:200px; border:1px solid #000; margin:4px 4px;}
div.vorschau,
p.vorschau {font-size:.7em; display:inline-block; overflow:hidden;}
div.vorschau2 {display:inline-block; max-width:208px; overflow:hidden;}
div.vorschau2 textarea {width:200px;}
/* --- DruckAnsicht --- */
.printlegal {font-size:1em; color:#009; border-top:1px solid black;}
@media print {
.noprint, .helper {display:none !important;}
body, .inner, aside, .sidebar {background-color:white;} /* color:black; */
body {padding:0 5mm; margin:2mm auto; border:1px solid #009;}
.wrapper, .wrap, .content {min-height:100px;}
form.protokoll {left:-1em; box-shadow:none; width:660px;}
}