/* screen.css */
html { margin:0; border:0 none; padding:0;
color:#000000; background-color:#ffc908;
min-height:100%; min-width:100%; }
body { color:#000000; background-color:#FFFFFF;
margin:0 auto; border:0 none; padding:0;
text-align:left;
font-family:arial,helvetica,sans-serif;
}
a:link { color:#00005F; background-color:#FFFFFF; text-decoration:underline; }
a:visited { color:#00005F; background-color:#FFFFFF; text-decoration:underline; }
a:hover, a:focus { color:#3300FF; background-color:#FFFF80; text-decoration:none; }
a:active { color:#00005F; background-color:#FFFFFF; text-decoration:underline; }
a img, a img.ohnerahmen { border:0 none; text-decoration:none; }
.inhalt a:hover img, .inhalt a:focus img,
td.inhalt div.tx-photogals-pi1-big a:hover,
td.inhalt div.tx-photogals-pi1-big a:focus
{ color:#3300FF; background-color:#FFFFFF; }
header.logo {
border-top:1px solid transparent; /* #ffc908 notwendig, sonst gibt es zuviel Abstand oben! */
}
header.logo a
{ color:#000000; background-color:#ffff80; text-decoration:none; }
header.logo p.bildlogo,
header.logo p.bildlogo a, header.logo p.bildlogo a:link, header.logo p.bildlogo a:visited,
header.logo p.bildlogo a:hover, header.logo p.bildlogo a:focus, header.logo p.bildlogo a:active
{ color:#000000; background-color:#ffe73e; }
header.logo h1, header.logo h1:link, header.logo h1:visited, header.logo h1:hover, header.logo h1:focus, header.logo h1:active,
header.logo h2, header.logo h2:link, header.logo h2:visited, header.logo h2:hover, header.logo h2:focus, header.logo h2:active
{ color:#000000; background-color:#ffff80; }
header.logo h1 { font-size:30px; font-weight:bold; }
html[lang="en"] header.logo h1 { font-size:29px; }
html[lang="fr"] header.logo h1 { font-size:23px; }
header.logo h2 { font-size:17px; font-weight:bold; }
html[lang="en"] header.logo h2 { font-size:18px; font-weight:bold; }
html[lang="fr"] header.logo h2 { font-size:18px; font-weight:bold; }
header.logo p.altlang
{ font-size:1rem; color:#666666; background-color:#ffff80; }
header.logo p.altlang a, header.logo p.altlang a:link, header.logo p.altlang a:visited
{ color:#00005F; background-color:#ffff80; }
header.logo p.altlang a:hover, header.logo p.altlang a:focus, header.logo p.altlang a:active
{ color:#003399; background-color:#FFFFFF; }
header.logo p.altlang span.aktiv a, header.logo p.altlang span.aktiv a:link, header.logo p.altlang span.aktiv a:visited,
header.logo p.altlang span.aktiv a:hover, header.logo p.altlang span.aktiv a:focus, header.logo p.altlang span.aktiv a:active
{ color:#666666; background-color:#ffff80; }
header.logo p.altlang span.text-muted
{ color:#ffffff; background-color:#ffff80; }
header.logo p.altlang span.de::after, header.logo p.altlang span.en::after
{ content:"\00a0\007C\00a0"; /* nbsp, pipe, nbsp */}
main { color:#000000; background:#ffffff;
margin:1em 0 1em 0; padding:0.5em; }
main a:link, main a:visited
{ color:#00005F; background-color:transparent; text-decoration:underline; }
main a.tel:link, main a.tel:visited,
main a[href^=tel]:link, main a[href^=tel]:visited
{ color:#000000; background-color:transparent; text-decoration:none; }
main>div:first-child,
main>div:first-child h1, main>div:first-child h2
{ /* border:1px dotted red; */ margin-top:0; }
h1 { font-size:180%; font-weight:bold; font-style:normal; margin-top:0; }
h2 { font-size:130%; font-weight:bold; font-style:normal; }
h3 { font-size:110%; font-weight:bold; font-style:normal; }
h4 { font-size:100%; font-weight:bold; font-style:italic; }
h5, h6 { font-size:100%; font-weight:bold; font-style:normal; }
/* =============================================== */
/* Schrift- und Farbangaben fuer Hervorhebungen : */
/* =============================================== */
/* HTML-eigene Hervorhebungen und Markup: */
pre,tt,code { font-family:"courier new",courier,monospace; }
b { font-weight:bold; }
i { font-style:italic; }
u { text-decoration:none; } /* Unterstreichung abschalten! */
s,del { text-decoration:line-through; }
em { font-style:italic; font-weight:normal; }
strong { font-style:normal; font-weight:bold; }
address { font-style:normal; font-weight:normal; }
hr { height:3px; color:#FFFF80; background-color:#FFFF81;
border: 1px solid #FFFF80;
text-align:center; margin-left:auto; margin-right:auto; }
/* Horizontale Trennlinie */
/* Mozilla und Opera nehmen background-color, MSIE nimmt color als Farbe der Trennlinie */
/* Height ist bei Mozilla und MS IE die totale Hoehe (inkl. border)
bei Opera nur die Hoehe des "Contents" */
div.csc-frame-ruler-before::before
{ clear:both; border-top:3px solid #FFFF80; margin-top:1.5em; padding-top:0em; }
div.csc-frame-ruler-before>h2:first-child
{ margin-top:0; }
/* Tabellen: */
table.contenttable { border:0 none; }
tr, table.contenttable tr { border:0 none; }
td, th, table.contenttable td, table.contenttable th
{ text-align:left; vertical-align:top; font-style:normal; border:0 none; padding:0 0.5em 0.5em 0; }
th { font-weight:bold; }
td p, th p, td h2, th h2, td h3, th h3 { margin:0 0 0.5em 0; }
main ul li { margin-bottom:1em; }
main ul li ul { margin-top:1em; }
/* Inhaltsangaben am Seitenanfang: kompakte Listen. */
/* Einstellen beim Inhaltselement, Reiter Erscheinungsbild - Layout: Layout 1 */
main div.frame-layout-1 ul li { margin-bottom:0; }
main div.frame-layout-1 ul li ul { margin-top:0; }
/* Nach dem "Nach oben" Link (#top) einen grösseren Abstand: */
main div.frame-default p a[href="#top"] { display:block; margin:0; /* border:1px dotted #999999; */ padding-bottom:1em; }
fieldset { border:0 none; }
fieldset legend { display:none; } /* redundant, d.h. doppelt in Typo3 bei Radio */
/* Bild-Unterschriften etwas kleiner: */
div.csc-textpic .csc-textpic-caption
{ font-size:0.85em; font-weight:normal; }
/* Bild-Unterschriften mit Klasse .kleiner nicht noch kleiner, also 0.85em: */
div.csc-textpic .csc-textpic-caption .kleiner
{ font-size:1em; font-weight:normal; }
/* Kein Abstand über dem Text bei kombinierten Bild-Text-Elementen: */
div.csc-textpic-text h1, div.csc-textpic-text h2, div.csc-textpic-text h3,
div.csc-textpic-text p:first-child
{ margin-top:0; /* border:1px dotted green; */ }
/* News-Darstellung formatieren; unnötige Dinge in News-Auflistung ausblenden: */
/*
div.news-list-container div.news-list-item h2 { font-size:1em; font-weight:bold; margin-bottom:0.2em; }
div.news-list-container div.news-list-item p { margin-top:0.1em; }
h3 span.news-list-date { font-weight:normal; font-size:0.8em; }
div.news-single-item div:first-child,
div.news-single-item>a:first-child, div.news-single-item div:first-child+a,
div.news-list-category, div.news-list-morelink, div.news-single-category,
div.news-list-container div.news-list-item h2+a
{ display:none; }
*/
img.plakat { float:left; margin:0 20px 20px 0; border:0; }
/* Tabellen bei Veranstaltungen: einheitliche Spaltenbreiten */
div#c2 ~ div table.contenttable,
div#c340 ~ div table.contenttable,
div#c319 div table.contenttable
{ /* border:1px dotted yellow; */ }
div#c2 ~ div table.contenttable tr td:first-child,
div#c340 ~ div table.contenttable tr td:first-child,
div#c319 div table.contenttable tr td:first-child
{ width:25%; /* border:1px dotted red; */ }
div#c2 ~ div table.contenttable tr td:nth-child(2),
div#c340 ~ div table.contenttable tr td:nth-child(2),
div#c319 div table.contenttable tr td:nth-child(2)
{ width:25%; /* border:1px dotted blue; */ }
div#c2 ~ div table.contenttable tr td:nth-child(3),
div#c340 ~ div table.contenttable tr td:nth-child(3),
div#c319 div table.contenttable tr td:nth-child(3)
{ width:50%; /* border:1px dotted green; */ }
/* Links zum Seitenanfang: Mit Pfeil + Leerschlag */
main a[href="#top"]::before { content:"\21D1\00A0"; }
/* Neues Typo3-Formular formatieren: */
div.form-group { margin:1em 0 0 0; clear:both; min-height:1.5em; }
div.form-group label { width:10em; float:left; }
div.form-group label.control-label { clear:both; }
div.form-group label.form-check-label { width:35em; max-width:100%; }
div.inputs-list div.form-group { float:left; clear:none; margin:0; }
/* "formularnewsletter1-radiobutton-1 */
label[class="control-label"][for="kontaktformular1-radiobutton-1"]+div.input div,
label[class="control-label"][for="formularnewsletter1-radiobutton-1"]+div.input div,
label[class="control-label"][for="formularzkpmitsingen1-radiobutton-1"]+div.input div,
label[class="control-label"][for="formularzkpmitsingen1-radiobutton-2"]+div.input div,
label[class="control-label"][for="zkpgoenner1-radiobutton-1"]+div.input div,
label[class="control-label"][for="formularbkmitsingen1-radiobutton-1"]+div.input div,
label[class="control-label"][for="formularbkmitsingen1-radiobutton-2"]+div.input div
{ float:left; display:inline-block; }
label[class="control-label"][for="kontaktformular1-radiobutton-1"]+div.input div label,
label[class="control-label"][for="formularnewsletter1-radiobutton-1"]+div.input div label,
label[class="control-label"][for="formularzkpmitsingen1-radiobutton-1"]+div.input div label,
label[class="control-label"][for="formularzkpmitsingen1-radiobutton-2"]+div.input div label,
label[class="control-label"][for="zkpgoenner1-radiobutton-1"]+div.input div label,
label[class="control-label"][for="formularbkmitsingen1-radiobutton-1"]+div.input div label,
label[class="control-label"][for="formularbkmitsingen1-radiobutton-2"]+div.input div label
{ width:6.5em; margin:0 0 0 0; /* border:1px dashed blue; */ }
div.form-group input[type="text"] { width:15em; }
div.form-group textarea { width:30em; max-width:100%; height:8em; }
div.btn-group { margin:1.5em 0 1.5em 0; }
/* Kleines Newsletter-Formular unter Navigation: */
form#formularnewsletter2
{ width:11.5em; margin:3em 0.5em 1em 0.5em; float:left; /* border:1px dotted red; */ }
form#formularnewsletter2 input, form#formularnewsletter2 label
{ width:10em; margin:0; float:left; clear:both; }
form#formularnewsletter2 div.form-check,
form#formularnewsletter2 div.btn-group
{ margin:0; }
form#formularnewsletter2 div.clearfix p { font-weight:bold; }
form#formularnewsletter2 label { display:none; }
/* Login-Formular: */
div.tx-felogin-pi1 form fieldset { margin:0; padding:0; }
div.tx-felogin-pi1 form fieldset div { margin:0.5em 0 0.5em 0; }
div.tx-felogin-pi1 form label { width:8.5em; clear:both; float:left; }
/* Bestellformular (HTML selbst geschrieben, via Hostpoint-Formmailer-CGI: */
form[action^="/cgi-sys"], form[action^="/cgi-sys"] table
{ color:#000000; background-color:#ffffff; border:1px solid #fffffe; }
form[action^="/cgi-sys"] textarea { width:20em; }
/* Uploads-Tabelle / Datei-Verweise: */
.csc-uploads td p, .csc-uploads-fileSize { margin:0; font-size:0.85em; }
/* MP3-Player linksbuendig: */
div.csc-textmedia-gallery-row div.csc-textmedia-gallery-column figure
{ border:1px dotted #FFFF80; margin:0 0 1em 0; padding-top:0.5em; }
/* Haupt-Navigation */
nav.nav1 { /* border:3px dotted red; width:13em; */ }
/* Links in nav.nav1, ausserhalb der Navigation-UL: */
.nav1 p { max-width:11.5em; margin-left:0.5em; /* border:1px dotted green; */ }
.nav1 form p { margin:0; }
.nav1 a:link, .nav1 a:visited, .nav1 a:active,
.nav1 a:hover, .nav1 a:focus
{ text-decoration:underline; }
.nav1 a:link, .nav1 a:visited, .nav1 a:active
{ color:#00005F; background-color:#FFFF80; text-decoration:none; }
.nav1 a:hover, .nav1 a:focus
{ color:#003399; background-color:#FFFFFF; text-decoration:none; }
/* Navigations-UL: */
.nav1 ul
{ list-style-type:none;
margin:15px 8px 15px 15px;
border:1px solid #FFFF81;
/* border:1px dotted red; */
padding:0px;
width:11.5em;
color:#FFFFFF; background-color:#FFFF80;
font-size:1rem; font-weight:bold;
}
.nav1 ul li ul
{ list-style-type:none;
margin:0; padding:0;
border:0 none;
width:100%;
font-size:0.9rem; font-weight:normal;
color:#FFFFFF; background-color:#FFFF80;
}
.nav1 ul li ul li ul
{ list-style-type:none;
margin:0; padding:0;
font-weight:normal;
color:#FFFFFF; background-color:#FFFF80;
}
.nav1 ul li
{ color:#FFFFFF; background-color:#FFFF80;
margin:0; padding:0;
border:1px solid #FFFF81;
}
.nav1 ul li.aktiv
{ color:#BBFFBB; background-color:#FFFF80; margin:0; padding:0;
border:1px solid #FFFF81;
}
.nav1 ul li ul li
{ color:#FFFFFF; background-color:#FFFF80; margin:0;
padding:0 0 0 0px;
border:1px solid #FFFF81;
}
.nav1 ul li ul li.aktiv
{ color:#BBFFBB; background-color:#FFFF80; margin:0;
padding:0 0 0 0px;
border:1px solid #FFFF81;
}
.nav1 ul li ul li ul li
{ color:#FFFFFF; background-color:#FFFF80;
margin:0;
padding:0 0 0 0px;
border:1px solid #FFFF81;
}
.nav1 ul li ul li ul li.aktiv
{ color:#BBFFBB; background-color:#FFFF80; margin:0;
padding:0 0 0 0px;
border:1px solid #FFFF81;
}
/* Border notwendig wegen MS IE Bug (sonst zu grosse Abstaende unten) */
/* " " auch, weil li.aktiv auch einen feinen Rahmen hat */
/* 1. Ebene: */
.nav1 ul a, .nav1 ul span
{
display:block; /* width:100%; */
margin:0;
text-decoration:none;
}
.nav1 ul a:link, .nav1 ul a:visited, .nav1 ul a:active,
.nav1 ul a:hover, .nav1 ul a:focus,
.nav1 ul li span
{
text-decoration:none; display:block; padding:0px 0px;
border:0 none; border-bottom:2px solid #FFFF80;
}
.nav1 ul a:link, .nav1 ul a:visited, .nav1 ul a:active
{
color:#00005F; background-color:#FFFF80; text-decoration:none;
}
.nav1 ul a:hover, .nav1 ul a:focus
{
color:#003399; background-color:#FFFFFF; text-decoration:none;
}
.nav1 ul li span
{
color:#000000; background-color:#FFFFFF; text-decoration:none;
}
/* 2. und weitere Ebenen: */
.nav1 ul li ul a,
.nav1 ul li ul a:link, .nav1 ul li ul a:visited, .nav1 ul li ul a:active,
.nav1 ul li ul a:hover, .nav1 ul li ul a:focus,
.nav1 ul li ul li span
{
text-decoration:none; display:block;
margin:0;
border:0 none; border-bottom:4px solid #FFFF81;
padding:0px 0px 0px 12px;
}
.nav1 ul li ul a:link, .nav1 ul li ul a:visited, .nav1 ul li ul a:active
{
color:#000066; background-color:#FFFF80; text-decoration:none;
}
.nav1 ul li ul a:hover, .nav1 ul li ul a:focus
{
color:#003399; background-color:#FFFFFF; text-decoration:none;
}
.nav1 ul li ul li span
{
color:#000000; background-color:#FFFFFF; text-decoration:none;
}
/* 3. Ebene: */
.nav1 ul li ul li ul a:link, .nav1 ul li ul li ul a:visited,
.nav1 ul li ul li ul a:hover, .nav1 ul li ul li ul a:focus, .nav1 ul li ul li ul a:active,
.nav1 ul li ul li ul li span
{ padding:0px 0px 0px 24px; }
/* 4. Ebene: */
.nav1 ul li ul li ul li ul a:link, .nav1 ul li ul li ul li ul a:visited,
.nav1 ul li ul li ul li ul a:hover, .nav1 ul li ul li ul li ul a:focus, .nav1 ul li ul li ul li ul a:active,
.nav1 ul li ul li ul li ul li span
{ padding:0px 0px 0px 32px; }
/* 5. Ebene (!): */
.nav1 ul li ul li ul li ul li ul a:link, .nav1 ul li ul li ul li ul li ul a:visited,
.nav1 ul li ul li ul li ul li ul a:hover, .nav1 ul li ul li ul li ul li ul a:focus, .nav1 ul li ul li ul li ul li ul a:active,
.nav1 ul li ul li ul li ul li ul li span
{ padding:0px 0px 0px 40px; }
.nav1 ul li.aktiv span.noshow
{ display:none; }
footer
{ color:#000000; background:#FFFF80; }
footer a:link, footer a:visited
{ color:#00005F; background-color:#FFFF80; text-decoration:none; }
footer a:hover, footer a:focus, footer a:active
{ color:#00005F; background-color:#FFFFFF; text-decoration:none; }
footer a[href^="mailto:"], footer a[href^="mailto:"]:link, footer a[href^="mailto:"]:visited
{ text-decoration: none; }
footer a span.mailadresse { display:none; }
footer p.toplink a,
footer p.toplink a:link, footer p.toplink a:visited
{ text-decoration:none;
font-size:1.2em; font-weight:bold; text-align:center;
display:block;
width: 1.5em; height: 1.6em;
margin: 0 0 0 0.5em;
border:0 none;
padding: 0 0.2em 0.1em 0.2em;
/* border:1px solid red; */
}
/* Responsive Design */
/* Fuer breite Bildschirme: */
@media screen and (min-width:930px)
{
body { color:#000000; background:#ffffff; padding:0;
max-width:930px;
background-image: linear-gradient(to right, #FFFF80 210px, #FFFFFF 210px);
}
header.logo { color:#000000; background-color: #FFE73E;
background-image: linear-gradient(to right, #FFE73E 210px, #FFFF80 210px);
text-align:left; margin:0; padding:0;
width:930px; min-height:170px;
}
header.logo p.bildlogo a { display:block; width:195px; height:130px; float:left; text-align:center;
/* border:1px dotted red; */ margin:0; padding:10px 0 0 15px; }
header.logo h1 { display:block; width:600px; height:40px; float:left;
/* border:1px dotted green; */
margin:0; padding:20px 0 15px 60px; }
header.logo h2 { display:block; width:600px; /* height:50px; */ float:left;
/* border:1px dotted blue; */
margin:0; padding:10px 0 0 60px; }
header.logo p.altlang { display:block; width:400px; float:right; text-align:right;
font-size:0.9rem;
/* border:1px dotted red; */
margin:0; padding:10px 40px 0 0; }
main { color:#000000; background:#ffffff; background-image:none;
float:right; width:620px; margin:30px 40px 0 0; padding:0; }
footer
{
color:#000000; background:#FFFF80;
background-image: linear-gradient(to right, #ffe73e 210px, #FFFF80 210px);
clear:both; min-height:2.5em;
margin:1em 0 0 0; padding:0px 0 10px 15px;
}
nav.nav1 { margin-top:40px; }
footer p.toplink a { float:right; }
footer>p.datum { /* border:1px dashed green; */ width:255px; float:left; }
footer>p.datum+p { /* border:1px dashed #FFFF00; */ width:600px; float:left; }
/* Formular: */
/* Submit-Button und Newsletter-Checkbox nach rechts einruecken: */
div.btn-group,
form#kontaktformular1 div.form-check,
form#gaestebuch1 div.form-check
{ margin-left:10em; /* border:1px dotted green; */}
/* Button fuer Navigation ausblenden: */
input#responsive-nav, label.responsive-nav-label { display: none; }
}
/* Fuer schmale Bildschirme: */
@media screen and (max-width:929px)
{
header.logo { color:#000000; background-color:#FFFF80;
background-position: right top;
/* border:3px dotted red; */ text-align:left; margin:0; padding:0;
width:100%;
}
header.logo p.bildlogo { display:block; width:85px; height:130px; float:left; text-align:center;
/* border:1px dotted red; */ margin:0; padding:8px 0 8px 15px; }
header.logo h1 { display:inline-block; width:auto; /* height:50px; */ float:left;
text-align:left;
/* border:1px dotted green; */
margin:0; padding:10px 65px 5px 20px; }
header.logo h2 { display:inline-block; width:auto; /* height:50px; */ float:left;
text-align:left; margin:0;
/* border:1px dotted blue; */
padding:0px 65px 0 20px; }
header.logo p.altlang { width:300px; float:right; text-align:right;
margin:0; /* border:1px dotted red; */ padding:16px 16px 0px 5px; }
/* clearfix: */
header.logo:after, main:after
{ content:""; display:table; clear:both; }
main { color:#000000; background:transparent; background-image:none; clear:both;
margin:0;
/* border:1px dotted #888888; */
padding:0;
}
main, ul.navi, footer
{ margin:0; padding:20px; }
main p, main li
{ max-width:35em; } /* Beschraenkung der Zeilenlaenge zwecks Lesbarkeit */
nav.nav1 { color:#000000; background-color:#FFFF80; padding:1em 0; }
nav.nav1>ul { border:0 none; width:80%; padding:0 10%; margin:0; }
nav.nav1 ul li { max-width:250px; }
/* Mehr Abstand zwecks Antippbarkeit */
nav.nav1 ul li, nav.nav1 ul li ul li, nav.nav1 ul li ul li ul li,
nav.nav1 ul li ul li ul li ul li, nav.nav1 ul li ul li ul li ul li ul li
{ padding-bottom:0.35em; }
nav.nav1 ul li a+ul, nav.nav1 ul li span+ul
{ padding-top:0.35em; /* border:1px dotted red; */ }
nav.nav1 ul li a+ul li:last-child, nav.nav1 ul li span+ul li:last-child
{ padding-bottom:0em; /* border:1px solid green; */ }
nav.nav1 form#formularnewsletter2, nav.nav1 div#c382 p
{ border:0 none; width:80%; padding:1em 10%; margin:2em 0 0 0; }
/* Fix fuer Android bis 4.2 zwecks Checkbox-Hack zum Ein- und Ausblenden der Navigation
Siehe http://timpietrusky.com/advanced-checkbox-hack */
body { -webkit-animation: bugfix infinite 1s; }
@-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } }
/* Input-Checkbox fur Navigations-Schalter-Trick ausblenden */
input#responsive-nav { display:none; }
/* Label = Schalter für Navigation anzeigen: */
label.responsive-nav-label {
display: block; width:1em; height:1.6em; /* float:right; */
position:absolute; top:0.8em; right:0.8em;
margin: 0 0 1em 0.5em;
padding: 0 0.2em 0.1em 0.5em;
border:1px solid #00003F;
border-radius:10px;
cursor: pointer;
/* user-select:none; /* Fuer iOS-6-Bug */
color: #00003F;
background-color: #FFE73E;
font-size:1.5em;
z-index:20;
}
/* Hamburger-Symbol vor dem (inaktiven) Navigations-Label: */
input#responsive-nav[type=checkbox] ~ label.responsive-nav-label::before {
content: "\2261"; font-size:1.2em;
display:block; float:left;
width: 0.9em;
height: 1em;
/* border:1px solid #00003F; */
margin:0;
padding:0;
}
/* X-Symbol vor dem (aktiven) Navigations-Label: */
input#responsive-nav[type=checkbox]:checked ~ label.responsive-nav-label::before {
content: "X"; font-size:1em;
display:block; float:left;
width: 0.7em;
height: 1em;
/* border:1px solid #00003F; */
margin:0.2em 0 0 0;
padding:0;
}
/* Navigation und Sprachwahl vorerst ausblenden: */
nav.nav1, header.logo p.altlang {
position: absolute;
top: -9999px; left:-9999px;
}
/* Wenn Schaltflaeche Navigation geklickt: Navigation + Sprachwahl einblenden */
input#responsive-nav[type=checkbox]:checked ~ nav.nav1,
input#responsive-nav[type=checkbox]:checked ~ header.logo p.altlang
{
position: relative;
top:0; left:0;
}
/* Wenn Schaltflaeche Navigation geklickt: Navigation einblenden,
Contentbox auf Button-Hoehe reduzieren, Content ausblenden: */
input#responsive-nav[type=checkbox]:checked ~ main {
color:#000000; background-color:#FFFF80;
margin:0; /* border:3px dotted #FFFF80; */ padding:1em 0 0 0;
width:auto; height:1em; overflow:hidden;
}
input#responsive-nav[type=checkbox]:checked ~ main * { display:none; }
footer p.toplink a
{ position:fixed; bottom:0.5em; right:0.5em; display:block; width:2em; border:1px solid red; border-radius:5px; }
footer p.toplink a:link, footer p.toplink a:visited
{ color:#00003F; background-color:#FFFF80; }
}
/* Fuer ziemlich schmale Bildschirme: */
@media screen and (max-width:740px)
{
header.logo { /* border:3px dotted #99FF99; */ }
/*
header.logo h1
{ max-width:450px; margin:0 30px 0 0; padding:5px 0 0 20px; float:left; }
header.logo h2 { width:auto; float:left;
margin:0 30px 0 0; padding:0px 0 0 20px; }
*/
header.logo p.altlang { float:right; }
}
/* Fuer sehr schmale Bildschirme: */
@media screen and (max-width:550px)
{
header.logo { /* border:3px dotted #FF9999; */ }
header.logo p.bildlogo { width:32px; height:64px; margin:0; padding:10px 15px 10px 15px; }
header.logo p.bildlogo a img { width:32px; height:64px; }
/* header.logo h1 { }
header.logo h2 { width:280px; float:left; margin:0 30px 0 0; padding:10px 0 0 20px; }
*/
header.logo p.altlang { clear:both; width:auto; }
div.csc-textpic div.csc-textpic-imagewrap { max-width:100px; }
div.csc-textpic div.csc-textpic-imagewrap div.csc-textpic-image { }
div.csc-textpic div.csc-textpic-imagewrap div.csc-textpic-image img { max-width:100px; height:auto; }
div.csc-textpic-intext-left div.csc-textpic-text,
div.csc-textpic-intext-left-nowrap-160 div.csc-textpic-text
{ margin-left:105px; }
}
/* Fuer extrem schmale Bildschirme: */
@media screen and (max-width:440px)
{
header.logo { /* border:3px dotted #9999FF; */ }
/* header.logo p.bildlogo { padding-bottom:5px; width:100%; text-align:center; } */
header.logo h1 { width:auto; }
header.logo h2 { width:auto; }
/* header.logo p.altlang { position:absolute; top:65px; right:20px; padding:0; margin:0; } */
}
/* Typo3-Formatierungen korrigieren: */
div.ce-textpic div.ce-bodytext p:first-child { margin-top:0; } /* Text und Bild oben buendig machen */
/* Typo3-Mailformular formatieren: */
/* Mailformulare: Liste ohne Numerierung: */
.inhalt form ol { list-style-type:none; margin:0.5em 0; padding:0; }
.inhalt form ol li { margin:0.5em 0 0.5em 0; padding:0.5em 0 0 0; display:block; clear:both; border-bottom:1px solid #edd1a6; }
/* Stern auf gleicher Zeile mit Feldbezeichnung */
form label em { display:inline; padding-left:0.5em; }
/* Bestätigungsseite Mailformular (in DIV mit Einrückung 33%/66%): Liste ohne Numerierung: */
div.csc-frame-indent3366 ol { list-style-type:none; margin:0.5em 0; padding:0; }
div.csc-frame-indent3366 ol li { display:block; clear:both; padding-top:0.5em; }
div.csc-frame-indent3366 ol li.csc-form-element-textline label
{ display:inline-block; float:left; width:14.5em; clear:both; font-weight:bold; /* border:1px dashed #FF00FF; */ }
div.csc-frame-indent3366 form.csc-form-confirmation { clear:both; }
div.csc-frame-indent3366 form.csc-form-confirmation fieldset { border:0 none; }
/* Checkboxen/Radio: Reihenfolge umkehren, d.h. Checkbox links, Label rechts: */
.inhalt1 form ol li.csc-form-element-checkbox label,
.inhalt1 form ol li.csc-form-element-radio label
{ display:inline-block; float:right; width:85%; /* border:1px dotted blue; */ }
.inhalt1 form ol li.csc-form-element-checkbox input,
.inhalt1 form ol li.csc-form-element-radio input
{ display:inline-block; float:left; width:10%; /* border:1px dotted green; */ }
/* Textfelder: Label+Felder einheitlich breit, "Benoetigt"-Hinweis formatieren: */
html body main form div.form-group label.control-label
{ display:inline-block; float:left; width:12.5em; /* border:1px dashed #FF00FF; */ }
html body main form div.form-group label.control-label span.required
{ display:inline; /* margin:0 1em; border:1px dotted white; */
font-style:normal; font-weight:normal; font-size:0.85em; font-variant:normal; text-transform:none; }
html body main form div.form-group label.control-label+div.input input
{ display:inline-block; float:left; width:16em; /* border:1px solid #00FFAF; */ }
/* Zwischenueberschriften im Formular kleiner machen: */
html body main form div h2 { font-size:1.2em; clear:both; }
/* Kompaktes Formular auf Startseite besonders formatieren: */
html body div.inhalt1 form.newslettercompact ol li { padding:0.5em 0 0 0; }
html body div.inhalt1 form.newslettercompact ol li.csc-form-element-textline label
{ display:inline-block; float:left; width:10em; /* border:1px dashed #FF00FF; */ }
html body div.inhalt1 form.newslettercompact ol li.csc-form-element-submit { padding:0 0 0 10em; }
/* Bestaetigungs-Seite: Liste ohne Nummern */
#c85 ol, #c87 ol, #c116 ol
{ list-style-type:none; margin:1em 0 1em 0; padding:0; }
#c85 ol li, #c87 ol li, #c116 ol li
{ clear:both; margin:1em 0 1em 0; padding:0.5em 0 0 0; }
ol li.csc-form-element { /* border:1px dotted white; */ margin:0 0 0.5em 0; padding:0; }
ol li.csc-form-element label { float:left; clear:both; width:7em; padding-right:1em; }
ol li.csc-form-element-radio label { float:left; clear:both; width:20em; padding:0; }
form.csc-form-confirmation { clear:both; }
form.csc-form-confirmation ol li,
form.csc-form-confirmation fieldset ol li.csc-form-confirmation-true,
#c85 fieldset ol li.csc-form-confirmation-true,
#c87 fieldset ol li.csc-form-confirmation-true
{ float:left; clear:none; width:13em; /* border:1px dotted #ffff66; */ }
form.csc-form-confirmation ol li input
{ float:left; width:12em;
color:#000000; background-color:#ffffff;
margin:0; border:2px solid #c48e45; padding:0; }
form.csc-form-confirmation ol li.csc-form-confirmation-false input
{ color:#000000; background-color:#CCCCCC;
margin:0; border:2px solid #666666; padding:0; }
form.csc-form-confirmation fieldset
{ margin:0; border:0 none; padding:0; }
div#c87 form ol li.csc-form-10 label, div#c87 form ol li.csc-form-11 label
{ float:left; clear:both; width:22em; padding-right:1em; }
div#c87 input#field-10, div#c87 input#field-11
{ width:4em; }
/* News formatieren: */
/* Uebersicht/Listen: */
div.news-img-wrap, div.news-img-wrap span.no-media-element
{ display:none; }
div.teaser-text div[itemprop=description], div.teaser-text div[itemprop=description] p
{ margin:0; padding:0; }
div.teaser-text a.more { margin-top:0; font-size:0.05em; text-decoration:none; color:#FFFFFE; background-color:#FFFFFF; }
div.teaser-text a.more:before { content:"Details anzeigen ..."; font-size:20em; color:#00005F; background-color:#FFFFFF; text-decoration:underline; }
div.teaser-text a.more:visited:before { color:#00005F; background-color:#FFFFFF; }
div.news-list-view div.footer { font-size:0.7em; border-top:0 none; border-bottom:1px solid #cccccc; margin:0 0 1em 0; padding:0; }
div.news div.no-news-found { color:#fffffe; background-color:#ffffff; font-style:normal; }
div.news div.no-news-found:before { content:"Zur Zeit keine News ... "; color:#000000; background-color:#ffffff; }
/* Detail-Anzeige: */
div.news-single div.footer { font-size:0.7em; border:0 none; }
div.news-single div.teaser-text { font-size:1.2em; color:#000000; }
/* Abstand um iFrames (z.B. zwischen zwei YouTube-Filmen): */
iframe { margin:20px 0; }
/* Allgemeines Ein-/Ausblenden: */
.noshow, .printonly, .url { display:none; }