/* colors */
/* Dunkelrot (Grafikelemente): #660000
Mittelrot (Texte): #990000
Braungrau: #3D3428
Beigegrau: #686752
Dunkelgrau: #333333
Mittelgrau: #5F5F5F
Hellgrau: #B1AEA9
Ockergelb: #AC7B04 */
/* =====================================================================
HINWEIS: Für ein korrektes responsives Verhalten bitte sicherstellen,
dass im jeder HTML-Seite folgendes Meta-Tag vorhanden ist:
===================================================================== */
/* standard */
html {
height: 101%;
scroll-behavior: smooth;
hyphens: auto;
}
* {
margin:0;
padding:0;
box-sizing: border-box; /* Verhindert, dass Padding die Breite überschreitet */
}
body {
-webkit-text-size-adjust: 100%;
color: #000000;
font-family: Palatino, Constantia, serif;
font-size: 0.9em;
line-height: 1.3em;
background: #330000 url("img/bg_red.jpg");
background-repeat: repeat;
background-attachment: fixed;
margin: 0;
}
p,ul {
padding-bottom: 0.9em;
}
sup {
vertical-align: top;
position: relative;
top: -0.2em;
}
.toptight {margin-top: 0px;}
.grau {
color: #686752;
}
.rot {
color: #a33;
}
.warning {
color: #a33;
font-weight:bold;
}
.durch {
text-decoration: underline #B1AEA9 .09em;
text-underline-offset: -.35em;
text-decoration-skip-ink: none;
color: #B1AEA9;
}
.meta {
font-size: 1em;
color: #686752;
font-style: italic;
margin-top: 0.2em;
}
.chevron-up::before {
content: '\25C0\FE0E ';
display: inline-block;
font-style: normal;
font-size: 0.8em;
color: #aaa;
height: 0.3em;
left: 0.3em;
position: relative;
top: 0.85em;
transform: rotate(90deg);
vertical-align: top;
width: 1.5em;
}
.chevron-dn::before {
content: '\25C0\FE0E ';
display: inline-block;
font-style: normal;
font-size: 0.8em;
color: #aaa;
height: 0.3em;
left: -0.75em;
position: relative;
top: 0.3em;
transform: rotate(-90deg);
vertical-align: top;
width: 1.5em;
}
.inserat {
font-size: 1em;
color: #686752;
font-style: italic;
margin: 0.2em 0 0 0;
padding-bottom: 0.4em;
}
.meta a {
color: #686752;
}
.meta a:hover {
color: #990000;
}
ol {
list-style-type:decimal;
}
ol.kursiv {
font-style: italic;
}
a {
color: #a33;
text-decoration-style: dotted;
text-decoration-thickness: 1.5px;
}
a:hover {
color: #333;
}
a img { border:none; padding-right: 0; margin-right: 0; display: inline;
}
h1, h2, h3, h4, h5, h6, .fauxh1, .fauxh2, .fauxh3, .fauxh4, .fauxh5 .fauxh6 {
hyphens: none;
}
h1 {
color: #3D3428;
font-weight: bold;
font-size: 1.9em;
line-height: 1.1em;
margin: 0 0 0.3em 0;
}
.fauxh1 {
display: block;
color: #3D3428;
font-weight: bold;
font-size: 1.9em;
margin: 0 0 0.3em 0;
}
h2 {
color: #AC7B04;
font-weight: bold;
font-size: 1.6em;
line-height: 1.2em;
font-style: italic;
margin: 0.6em 0 0.5em 0;
}
.fauxh2 {
display: block;
color: #AC7B04;
font-weight: bold;
font-size: 1.6em;
line-height: 1.2em;
font-style: italic;
margin: 0.6em 0 0.5em 0;
}
h3 {
color: #3D3428;
font-weight: bold;
font-size: 1.3em;
line-height: 1.3em;
margin: 0.6em 0 1em 0;
padding-bottom:1px;
border-bottom: 2px solid #b88b08;
}
.fauxh3 {
display: block;
color: #3D3428;
font-weight: bold;
font-size: 1.3em;
line-height: 1.3em;
margin: 0.6em 0 1em 0;
padding-bottom:1px;
border-bottom: 2px solid #b88b08;
}
h4 {
color: #333333;
font-weight: bold;
font-size: 1em;
margin: 0 0 0.5em 0;
padding-bottom:1px;
border-bottom: 1px solid #B1AEA9;
}
.fauxh4 {
display: block;
color: #333333;
font-weight: bold;
font-size: 1em;
margin: 0 0 0.5em 0;
padding-bottom:1px;
border-bottom: 1px solid #B1AEA9;
}
h5 {
color: #3D3428;
font-weight: bold;
font-size: 1.1em;
margin: 0.6em 0 0.4em 0;
border-bottom: 1px solid #AC7B04;
}
.fauxh5 {
display: block;
color: #3D3428;
font-weight: bold;
font-size: 1.1em;
margin: 0.6em 0 0.4em 0;
border-bottom: 1px solid #AC7B04;
}
/* Headline für Clavierwerk des Monats Accordion */
h6 {
background-color: #d8d6d4;
padding: 6px 6px 4px 6px;
font-size: 1.1em;
}
.fauxh6 {
background-color: #d8d6d4;
padding: 6px 6px 4px 6px;
font-size: 1.1em;
}
.markt {
margin-top: 0;
}
hr {
border-top: 2px dotted #b88b08;
border-left: none;
border-right: none;
border-bottom: none;
margin-top: 0.5em;
margin-bottom: 1.5em;
}
.ornament {
display: block;
background: no-repeat center/8% url("./img/ornament_divider.png");
height: 1.5em;
margin: 0.5em 0 1.5em 0;
}
/* Navigationsspalten, z.B. Länderauswahl auf Unterseite Museen */
.multi-columns {
border-top: 1px solid #B1AEA9;
border-bottom: 1px solid #B1AEA9;
padding: 12px 6px;
margin-bottom: 1.2em;
column-count: 3; /* number of columns */
column-gap: 2rem; /* space between columns */
font-size: 0.9em;
}
.multi-columns a {
display: inline-block; /* each entry on its own line */
padding: 0;
}
.multi-columns-declav {
width: 100%;
border-top: 1px solid #B1AEA9;
border-bottom: 1px solid #B1AEA9;
padding: 12px 6px;
}
.multi-columns-declav a {
display: inline-block;
width: 31%;
}
/* 3-spaltige Bildergalerien */
.image-4-columns {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px; /* equal row + column gaps */
max-width: 552px;
margin-bottom: 16px;
}
.image-3-columns {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px; /* equal row + column gaps */
max-width: 552px;
margin-bottom: 16px;
}
.image-2-columns {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px; /* equal row + column gaps */
max-width: 552px;
margin-bottom: 16px;
}
.image-4-columns a, .image-3-columns a, .image-2-columns a {
display: block;
}
.image-4-columns img, .image-3-columns img, .image-2-columns img {
width: 100%;
object-fit: contain; /* ensures clean cropping if needed */
display: block;
margin: 0px !important;
}
/* Tabellen: scrollbar auf kleinen Bildschirmen */
.table-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
margin-bottom: 1.4em;
}
table {
border-collapse: collapse;
table-layout: fixed;
width: 100%;
max-width: 552px;
border: 0;
color: #000000;
font-family: Palatino, Constantia, serif;
font-size: 0.9em;
line-height: 1.2em;
text-align: left;
margin-bottom: 0; /* margin jetzt am .table-wrap */
}
.intro {
display: flex;
gap: 10px;
align-items: flex-start; /* aligns items to the top */
}
.intro img {
width: 159px;
flex-shrink: 0; /* prevents image from shrinking */
}
.intro p {
font-style: italic;
flex: 1; /* takes remaining available width */
margin: 0; /* optional: removes default spacing */
}
tr {
border-bottom: 1px solid #B1AEA9;
}
td.member {
color: #990000;
}
td.marked {
background-color: #EDE5CC;
}
td.author {
background-color: #EDE5CC;
font-weight:bold;
}
td.markedmember {
color: #990000;
background-color: #EDE5CC;
}
th {
background-color: #AC7B04;
padding: 3px 6px 1px 6px;
color: #FFFFFF;
text-align: left;
font-weight: bold;
}
th.index {
color: #FFFFFF;
font-size: 1.3em;
font-style: italic;
margin: 0.6em 0 0.5em 0;
}
td {
vertical-align: top;
padding: 3px 6px 1px 6px;
border-bottom: 1px solid #B1AEA9;
}
td.columns {
padding: 12px 6px 1px 6px;
border-top: 1px solid #B1AEA9;
border-bottom: 0;
}
blockquote {
border-left: 4px solid #AC7B04;
color: #333333;
font-style: italic;
display: block;
font-size: 1em;
margin-bottom: 1.2em;
padding: 0 12px;
}
blockquote p {
padding: 3px 0;
}
img {
margin: 0 0 1.4em 0;
border: 0;
max-width: 100%; /* Bilder nie breiter als ihr Container */
height: auto;
}
/* miscellaneous */
.clearer {
clear: both;
}
.left {
float: left;
}
.right {
float: right;
}
/* main */
.anrede {
padding-top: 10px;
font-style: italic;
font-weight: bold;
font-size: 1.3em;
color: #5F5F5F;
}
.alarm {
width: 100%;
max-width: 542px;
float: right;
padding: 0px 24px 12px 24px;
background: #5F5F5F;
border-left: 10px solid #660000;
}
.alarm p {
color: #fff;
padding: 0;
}
.alarm h2 {
color: #fff;
padding: 0;
margin: 12px 0 2px 0;
}
.alarm a {
color: #fff;
}
.caption {
font-size: 1em;
color: #686752;
font-style: italic;
line-height: 1.25em;
margin: 0 0 15px 0;
padding: 0 0 4px 0;
background-color: ffffdd;
border-bottom: 1px solid #ddd;
}
.imagewithcaption img {
margin-bottom: 1px !important;
}
.outdated {
text-decoration: line-through;
text-decoration-thickness: 5px;
text-decoration-color: #ccc;
}
.frame {
width: 100%;
max-width: 521px;
border: 4px solid #a33;
padding: 12px;
}
.mapskarte {
position: relative;
text-align: center;
color: white;
}
.mapshinweis {
position: absolute;
top: 50%;
transform: translate(0, -53%);
padding: 0 20px;
}
.mapshinweis a {
color: #ece5cf;
}
/* .aufmacher und .main teilen sich den Bereich rechts neben #sidebar.
Beide erhalten margin-left:200px (= Sidebar-Breite), damit sie nicht
unter die gefloatete Sidebar rutschen. Kein float mehr nötig —
sie stapeln sich sauber vertikal, nahtlos am Sidebar-Rand. */
.aufmacher {
margin-left: 195px;
min-height: 4.8em;
padding: 160px 24px 5px 24px; /* padding-top: 160px = Höhe des Headers (150px) + 10px Luft,
damit die erste Überschrift auf Desktop-Höhe korrekt sitzt */
background: #EDE5CC;
}
.aufmacher fauxh3 {
margin: 1.3em 0 0.5em 0;
}
.aufmacher h1 {
margin-top: 0.6em;
}
.main {
margin-left: 195px;
padding: 18px 24px 18px 24px;
background: #fff;
}
.main ul {
list-style-image: url("img/li.gif");
}
.main ol {
list-style-type: decimal;
}
.main li {
margin-left: 1.5em;
}
ol.abc {
counter-reset: list;
}
ol.abc > li {
list-style: none;
position: relative;
}
ol.abc > li:before {
counter-increment: list;
content: counter(list, lower-alpha) ") ";
position: absolute;
left: -1.2em;
}
/*Floating Back-To-Top Button*/
#myBtn {
position: fixed;
bottom: 38px;
left: calc((100vw - 800px) / 2 + 30px);
background-image: url("img/arrow-to-top.gif");
background-size: 40%;
background-repeat: no-repeat;
background-position: center;
max-width: 50px;
width: 100%;
background-color: #AC7B04;
padding: 6px;
border: 2px solid #AC7B04;
}
@media (max-width: 832px) {
#myBtn {
left: 48px;
}
}
@media only screen and (min-device-width: 320px) and (max-device-width: 479px) and (orientation: portrait) {
#myBtn {
max-width: 90px;
height: 35px;
padding: 12px;
}
}
#myBtn a {
text-decoration: none;
}
/*Add hover effect to button, but only on hover enabled devices*/
@media (hover: hover) {
#myBtn:hover {
background-color: #660000;
}
}
/* Jubilaeumsbanner Vorschau 48 ClavTage Abstand */
.jubi {
float: left;
width: 100%;
max-width: 543px;
padding: 15px 15px 12px 15px;
margin: 12px 0 12px 0;
background-color: #EDE5CC;
border-left: 4px solid #AC7B04;
border-right: 4px solid #AC7B04;
}
.jubi img {
float: left;
margin:0 15px 0 0 !important;
padding: 0 !important;
}
.jubi h2 {
font-size: 30px;
}
/* Clavierwerk des Monats */
.cdm_thumb {
float: left;
width: 100%;
max-width: 506px;
padding: 15px;
margin: 12px 0 12px 0;
background-color: #EDE5CC;
}
.cdm_thumb img {
float: left;
margin:0 15px 0 0 !important;
padding: 0 !important;
}
/* structure */
.container {
font-size: 1em;
background: #B1AEA9 url("img/renaissance_corner.svg") no-repeat;
background-position: bottom left;
background-size: 24.5%;
margin: 0 auto;
width: 100%;
max-width: 800px;
border-left: solid 12px #000;
border-right: solid 12px #000;
border-bottom: solid 12px #000;
overflow: hidden; /* Clearfix: Float-Kinder dehnen den Container */
}
.container img {
margin: 4px 0 16px 0;
}
.header {
position: relative;
font-family: Palatino, Constantia, serif;
font-size: 1.7em;
background: url("img/header.svg") no-repeat;
background-color: #5f5f5f;
background-size: 100%;
background-position: center;
width: 100%;
max-width: 800px;
height: 150px;
float: left;
border-bottom: 6px solid #000000;
border-top: 6px solid #AC7B04;
}
.header-link {
position: absolute;
inset: 0; /* top:0; right:0; bottom:0; left:0 */
display: block;
}
/* Desktop Navigation */
#sidebar {
width: 195px;
float: left;
/* height:100% entfernt — overflow:hidden am Container übernimmt das Dehnen */
}
ul#navi li ul li a {
font-weight: normal;
}
ul#navi,
ul.navi-modal {
/* Kein float — liegt im gefloateten #sidebar (200px) und füllt ihn block-artig aus */
background:#B1AEA9;
padding-bottom: 0;
list-style:none;
}
ul#navi ul,
ul.navi-modal ul {
width: 200px; /* Untermenüs brauchen feste Breite, da sie absolut positioniert eingeblendet werden */
background:#B1AEA9;
padding-bottom: 0;
list-style:none;
}
ul#navi a,
ul.navi-modal a {
display:block;
padding:5px 0 2px 8px;
color:#333333;
font-family: Palatino, Constantia, serif;
font-weight: bold;
text-decoration:none;
letter-spacing: -.2px;
border-bottom:1px solid #5F5F5F;
}
ul#navi li,
ul.navi-modal li {
position:relative;
}
/* Alle Ebenen ausblenden */
ul#navi ul,
ul#navi li:hover ul ul,
ul#navi li:hover ul ul ul,
ul.navi-modal ul,
ul.navi-modal li:hover ul ul,
ul.navi-modal li:hover ul ul ul {
position:absolute;
left:-9999px;
top:0;
background:#eee;
border-left:1px solid #fff;
}
/* Einzelne Ebenen einblenden */
ul#navi li:hover ul,
ul#navi ul li:hover ul,
ul#navi ul ul li:hover ul,
ul.navi-modal li:hover ul,
ul.navi-modal ul li:hover ul,
ul.navi-modal ul ul li:hover ul {
left:195px;
-webkit-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.4);
-moz-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.4);
box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.4);
}
/* Hover Hinter- und Vordergrundfarbe für alle Ebenen */
ul#navi li:hover > a, ul#navi ul li:hover > a, ul#navi ul ul li:hover > a, ul#navi ul ul ul li:hover > a,
ul.navi-modal li:hover > a, ul.navi-modal ul li:hover > a, ul.navi-modal ul ul li:hover > a, ul.navi-modal ul ul ul li:hover > a {
background:#660000;
color:#fff;
}
ul#navi h1,
ul.navi-modal h1 {
background:#111 url("img/dot.gif") no-repeat;
background-position: 0.7em 50%;
padding:6px 0 4px 24px;
margin-bottom: 0;
color:#fff;
font-family: Palatino, Constantia, serif;
font-weight: bold;
font-size: 1em;
border-bottom:1px solid #5F5F5F;
cursor: pointer;
}
ul#navi h1:hover {
background-color:#B1AEA9;
color:#333;
}
ul#navi a span,
ul.navi-modal a span {
float:right;
font-weight:normal;
}
/* Pfeil nach rechts */
.arrow {
float: right;
font-size:1.4em;
padding-right: 8px;
}
/* Hervorhebung aktiver Untermenues */
.red {
color:#a33;
font-size:1.5em;
}
#navi .activenav,
.navi-modal .activenav {
background:#660000;
display:block;
padding:5px 0 2px 8px;
color:#fff;
font-family: Palatino, Constantia, serif;
font-weight: bold;
letter-spacing: -.2px;
border-bottom:1px solid #5F5F5F;
}
/* Navigation Ende */
/* Schnellnavigation */
.quicknav {
background-image: url("rosette_watermark.png");
background-size: 40%;
background-repeat: no-repeat;
background-position: center;
color: #fff;
width: 100%;
max-width: 536px;
height: auto;
margin-bottom: 15px;
padding: 10px 0 0 0px;
font-size: 1.5em;
font-weight: bold;
font-style: italic;
line-height: 1.4em;
text-align: center;
font-family: Palatino, Constantia, serif;
cursor: pointer;
position: relative;
}
.prio-1 {
background-color: #660000;
border: 8px outset #800000;
}
.prio-2 {
background-color: #AC7B04;
border: 8px outset #c19c43;
}
.quicknav:hover {
background-color: #555555;
border: 8px outset #888888;
}
.quickinfo {
font-family: Palatino, Constantia, serif;
font-size: 75%;
font-weight: normal;
line-height: 1em;
}
.quicklink {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1;
}
/* Schnellnavigation Ende */
/* Website-Update-Meldungen Startseite */
.update-wrapper {
display: flex;
align-items: flex-start;
margin-bottom: 5px;
}
.update-date {
width: 60px;
height: 19px;
background-color: #5F5F5F;
padding: 1px 5px 0 5px;
margin-right: 8px;
color: #fff;
font-weight: bold;
flex-shrink: 0;
}
.update {
font-style: italic;
margin-top: 1px;
}
/* beige Textbox (Mitgliederzitate Rueckblicke) */
.boxbeige {
background-color: #eee5cd;
width: 100%;
max-width: 522px;
padding: 15px 15px 10px 15px;
margin-bottom: 20px;
line-height: 1.2em;
text-align: left;
font-family: Palatino, Constantia, serif;
font-weight: normal;
font-size: 1em;
font-style: italic;
}
/* graue Textbox (Kondolenzseite) */
.boxgrau {
background-color: #d8d6d4;
width: 100%;
max-width: 522px;
padding: 15px 15px 10px 15px;
margin-bottom: 20px;
line-height: 1.2em;
text-align: center;
font-family: Palatino, Constantia, serif;
font-weight: normal;
font-size: 1em;
font-style: italic;
}
.boxgrau p {
padding: 0 0 5px 0;
}
.boxgrau hr {
margin: 5px 0 10px 0;
}
/* Google Consent */
.consent {
background-color: #660000;
border: 8px outset #990000;
color: #fff;
max-width: 552px;
height: auto;
margin-bottom: 15px;
padding: 10px 20px;
line-height: 1.2em;
text-align: center;
font-family: Palatino, Constantia, serif;
cursor: pointer;
position: relative;
}
.consent a {
color: #fff;
font-weight: bold;
}
.consenttxt {
display: block;
font-weight: bold;
font-size: 1.5em;
font-style: italic;
line-height: 1.25em;
padding: 15px 0 0 0;
}
.mapimage {
width: 100%;
max-width: 552px;
height: auto;
}
.mapimage img {
padding: 0;
margin: 0;
width: 100%;
height: auto;
}
.maplink {
z-index: 1;
width: 100%;
margin: 0px auto -60px auto;
}
.maplink a {
display: block;
position: relative;
top: -180px;
width: 90%;
margin: auto;
padding: 12px;
color: #fff;
background-color: rgba(102, 0, 0, 0.8);
font-family: Palatino, Constantia, serif;
text-align: center;
}
/* Google Consent Ende */
/* footer */
.footer {
color: #000000;
line-height: 26px;
width: 100%;
max-width: 800px;
font-size: 1em;
background: #5F5F5F;
text-align: center;
margin-bottom: 0px;
border-top: 8px solid #AC7B04;
}
.footer .left, .footer .right {
padding: 0 16px;
}
.footer a {
color: #000000;
}
.footer a:hover {
color: #B1AEA9;
}
/* Accordion Clavierwerk des Monats */
.accordion {
background-color: #5f5f5f;
color: #fff;
cursor: pointer;
padding: 10px 8px 6px 8px;
width: 100%;
border: none;
font-family: Palatino, Constantia, serif;
font-weight: bold; text-align: left;
font-style: italic;
outline: none;
font-size: 16px;
line-height: 0.8em;
transition: 0.5s;
}
.active, .accordion:hover {
background-color: #660000;
}
.accordion:after {
content: '\25BE';
color: #fff;
font-style: normal;
font-weight: bold;
font-size: 20px;
line-height: 0.8em;
float: right;
margin-left: 5px;
}
.active:after {
-moz-transform: scaleY(-1);
-o-transform: scaleY(-1);
-webkit-transform: scaleY(-1);
transform: scaleY(-1);
-ms-filter: "FlipV";
filter: FlipV;
}
.panel {
border-bottom: 8px solid #fff;
padding: 0 8px;
background-color: #f7f2e5;
max-height: 0;
overflow: hidden;
transition: max-height 0.5s;
}
/*Cookiedingsbums CSS*/
#cookiedingsbums a {color:#a33; text-decoration-style: dotted;}
#cookiedingsbums a:hover {color:#333;}
#cookiedingsbums div {padding:10px; padding-right:40px;}
#cookiedingsbums {
outline: 1px solid #7b92a9;
text-align:center;
border-top:1px solid #fff;
background: #d6e0eb;
background: -moz-linear-gradient(top, #d6e0eb 0%, #f2f6f9 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d6e0eb), color-stop(100%,#f2f6f9));
background: -webkit-linear-gradient(top, #d6e0eb 0%,#f2f6f9 100%);
background: -o-linear-gradient(top, #d6e0eb 0%,#f2f6f9 100%);
background: -ms-linear-gradient(top, #d6e0eb 0%,#f2f6f9 100%);
background: linear-gradient(to bottom, #d6e0eb 0%,#f2f6f9 100%);
position:fixed;
bottom:0px;
z-index:10000;
width:100%;
font-size:12px;
line-height:16px;}
#cookiedingsbumsCloser {
color: #777;
font: 14px/100% arial, sans-serif;
position: absolute;
right: 5px;
text-decoration: none;
text-shadow: 0 1px 0 #fff;
top: 5px;
cursor:pointer;
border-top:1px solid white;
border-left:1px solid white;
border-bottom:1px solid #7b92a9;
border-right:1px solid #7b92a9;
padding:4px;
background: #ced6df; /* Old browsers */
background: -moz-linear-gradient(top, #ced6df 0%, #f2f6f9 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ced6df), color-stop(100%,#f2f6f9));
background: -webkit-linear-gradient(top, #ced6df 0%,#f2f6f9 100%);
background: -o-linear-gradient(top, #ced6df 0%,#f2f6f9 100%);
background: -ms-linear-gradient(top, #ced6df 0%,#f2f6f9 100%);
background: linear-gradient(to bottom, #ced6df 0%,#f2f6f9 100%);
}
#cookiedingsbumsCloser:hover {border-bottom:1px solid white; border-right:1px solid white; border-top:1px solid #7b92a9; border-left:1px solid #7b92a9;}
/*Cookiedingsbums CSS Ende*/
/* =====================================================================
RESPONSIVE ANPASSUNGEN — Mobile First ab hier
===================================================================== */
/* --- Tablet (≤ 820px): Container beginnt zu schrumpfen --- */
@media (max-width: 820px) {
.container {
border-left: solid 6px #000;
border-right: solid 6px #000;
border-bottom: solid 6px #000;
}
.header {
height: 120px;
}
ul.navi-modal h1 {
font-size: 0.9em;
}
.multi-columns {
column-count: 2;
}
.aufmacher {
max-width: 100%;
padding-top: 130px; /* Desktop-Wert (160px) zurücksetzen: auf Mobil steht .aufmacher unterhalb des Headers, nicht daneben */
}
}
/* =====================================================================
HAMBURGER-MENÜ — nur auf Mobil sichtbar
===================================================================== */
/* Hamburger-Button: auf Desktop versteckt */
#nav-toggle {
display: none;
}
/* Modal: auf Desktop versteckt */
#nav-modal {
display: none;
}
/* --- Mobil (≤ 640px) --- */
@media (max-width: 640px) {
/* Container */
.container {
border-left: solid 4px #000;
border-right: solid 4px #000;
border-bottom: solid 4px #000;
}
/* Header: etwas flacher, Platz für Hamburger-Button */
.header {
height: 90px;
background-size: 100%;
background-position: center;
position: relative; /* Anker für absolut positionierten Button */
}
/* Desktop-Sidebar ausblenden */
#sidebar {
display: none;
}
/* Aufmacher: margin-left der Desktop-Sidebar zurücksetzen, padding-top reduzieren */
.aufmacher {
margin-left: 0;
max-width: 100%;
padding-top: 70px; /* Desktop-Wert (160px) zurücksetzen: auf Mobil steht .aufmacher
unterhalb des Headers, nicht daneben */
}
.main {
margin-left: 0;
padding: 14px 16px;
}
/* Erste Überschriften im Aufmacher: Abstände zum Header und nachfolgendem Content */
.aufmacher h1:first-child,
.aufmacher > h1 {
position:relative;
top:20px;
padding-bottom: 20px;
}
.aufmacher .fauxh3:first-child,
.aufmacher > .fauxh3 {
position:relative;
top:20px;
}
/* Alarm-Box */
.alarm {
float: none;
max-width: 100%;
}
/* Schnellnavigation */
.quicknav {
max-width: 100%;
height: auto;
min-height: 70px;
padding: 12px 8px;
}
/* Textboxen */
.boxbeige,
.boxgrau,
.consent,
.frame,
.jubi,
.cdm_thumb {
max-width: 100%;
float: none;
}
.jubi img,
.cdm_thumb img {
float: none;
display: block;
margin: 0 0 12px 0 !important;
}
/* Navigationsspalten */
.multi-columns {
column-count: 2;
}
/* Karten-Overlay */
.mapimage { max-width: 100%; }
.maplink {
width: 90%;
top: auto;
position: relative;
margin: -40px auto 0 auto;
}
/* Footer */
.footer { max-width: 100%; }
/* Floats aufheben */
.left, .right { float: none; }
/* Back-to-Top */
#myBtn { left: 10px; max-width: 44px; }
/* ------------------------------------------------------------------
HAMBURGER-BUTTON
------------------------------------------------------------------ */
#nav-toggle {
display: block;
position: absolute;
top: 14px;
right: 14px;
width: 44px;
height: 44px;
background-color: rgba(102, 0, 0, 0.85);
border: 1px solid #fff;
border-radius: 4px;
cursor: pointer;
padding: 9px 8px;
z-index: 9999;
/* Die drei Balken als -Kinder */
}
#nav-toggle span {
display: block;
width: 100%;
height: 2px;
background: #fff;
border-radius: 2px;
transition: transform 0.25s, opacity 0.05s;
}
#nav-toggle span + span {
margin-top: 5px;
}
/* Animiertes X wenn aktiv */
#nav-toggle.is-active span:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
#nav-toggle.is-active span:nth-child(2) {
opacity: 0;
visibility: hidden;
}
#nav-toggle.is-active span:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
/* ------------------------------------------------------------------
NAVIGATIONS-MODAL
------------------------------------------------------------------ */
#nav-modal {
display: block; /* immer im DOM, aber unsichtbar */
visibility: hidden;
opacity: 0;
position: fixed;
inset: 0; /* top/right/bottom/left: 0 */
z-index: 500;
background: rgba(0, 0, 0, 0.6); /* Backdrop */
transition: opacity 0.25s, visibility 0.25s;
}
#nav-modal.is-open {
visibility: visible;
opacity: 1;
}
/* Panel, das von links einschiebt */
#nav-modal-inner {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 80%;
max-width: 220px;
background: #EEE;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
transform: translateX(-100%);
transition: transform 0.25s ease;
}
#nav-modal.is-open #nav-modal-inner {
transform: translateX(0);
}
/* Navigation im Modal: volle Breite, keine Flyouts */
#nav-modal ul.navi-modal,
#nav-modal ul.navi-modal ul {
width: 100%;
float: none;
position: static;
left: auto;
top: auto;
background: transparent;
box-shadow: none;
border-left: none;
}
#nav-modal ul.navi-modal li {
position: static;
}
/* Untermenüs: immer sichtbar, leicht eingerückt */
#nav-modal ul.navi-modal ul {
display: block !important;
visibility: visible !important;
background: rgba(0,0,0,0.08);
border-left: 3px solid #660000;
}
#nav-modal ul.navi-modal a,
#nav-modal .navi-modal .activenav {
padding: 4px 12px 2px 14px;
font-size: 0.89em;
}
#nav-modal .activenav {
text-indent: 8px;
}
#nav-modal ul.navi-modal ul a {
padding-left: 22px;
font-weight: normal;
}
/* Hover-Effekte im Modal beibehalten */
#nav-modal ul.navi-modal li:hover > a {
background: #660000;
color: #fff;
}
}