/* montserrat-300 - latin */ @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 300; font-display: swap; src: local(''), url('files/Fonts/montserrat-v25-latin-300.woff2') format('woff2'), url('files/Fonts/montserrat-v25-latin-300.woff') format('woff'); } /* montserrat-regular - latin */ @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-display: swap; src: local(''), url('files/Fonts/montserrat-v25-latin-regular.woff2') format('woff2'), url('files/Fonts/montserrat-v25-latin-regular.woff') format('woff'); } /* montserrat-500 - latin */ @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 500; font-display: swap; src: local(''), url('files/Fonts/montserrat-v25-latin-500.woff2') format('woff2'), url('files/Fonts/montserrat-v25-latin-500.woff') format('woff'); } /* roboto-condensed-regular - latin */ @font-face { font-family: 'Roboto Condensed'; font-style: normal; font-weight: 400; font-display: swap; src: local('Roboto Condensed'), local('RobotoCondensed-Regular'), url('files/Fonts/roboto-condensed-v16-latin-regular.woff2') format('woff2'), url('files/Fonts/roboto-condensed-v16-latin-regular.woff') format('woff'); } @media screen { html { overflow-y: scroll; } body { color: rgb(51, 51, 51); background-color: #fef6f0; } } @media (prefers-contrast: more) { body { color: black; } #cms_vorschau_label { color: white !important; background-color: black !important; opacity: 1 !important; } } body { font-family: 'Montserrat', sans-serif; font-size: 120%; font-weight: 300; line-height: 1.35; } @media (max-width: 414px) { body { font-size: 125%; } } @media (max-width: 359px) { body { font-size: 100%; } } /* ----------------------- Helper ------------------------- */ p, .p { margin: 0 0 0.8em 0; } /* MSIE nimmt sonst einen erheblich größeren Abstand */ p:empty { display: none; } .thinspace { margin-left: -0.07em; } .nowrap { white-space: nowrap; } .wordwrap { white-space: pre-wrap; } .silbentrennung { /* muss gesetzt sein!!! */ -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto; } .ellipse { display: block; white-space: nowrap; overflow: hidden; /* muss */ text-overflow: ellipsis; } .hidden { display: none !important; visibility: hidden !important; } .noview { /* identisch mit .printonly */ height: 1px !important; width: 1px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; overflow: hidden !important; line-height: 2 !important; position: absolute !important; } @media (hover: hover) { body:hover .noview a, /* damit die unsichtbaren Elemente auf mausbedienbaren Geräten keinen Fokus annehmen können */ body:hover .noview input, body:hover .noview button { display: none !important; } } @media screen { .printonly { /* identisch mit .noview */ height: 1px !important; width: 1px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; overflow: hidden !important; line-height: 2 !important; position: absolute !important; } } @media print { .noprint { display: none !important; } #cms_vorschau_label { display: none; } } #nojs .if-js, #js .if-nojs { display: none; } #cms_vorschau_label { /*display: none;*/ z-index: 9999 !important; } /* ----------------------- Normalize.css (Auszüge) ------------------------- */ /* https://github.com/necolas/normalize.css/blob/master/normalize.css */ html { -webkit-text-size-adjust: 100%; -webkit-font-variant-ligatures: no-common-ligatures; /* verhindert im Safari Fehler bei bedingten Trennstrichen nach Ligaturen, z.B. ft in Gemeinschafts-praxis */ font-variant-ligatures: no-common-ligatures; /* neuerdings funktioniert nur noch die prefixlose Variante */ } body, figure { margin: 0; } article, aside, details, figcaption, figure, /* Safari iPhone 3, MSIE 8 */ footer, header, main, /* wichtig für MSIE bis 11, Android bis 4.3, Opera 12 */ nav, section { display: block; } summary { display: list-item; } audio, canvas, progress, video { display: inline-block; /* MSIE 9 */ vertical-align: baseline; /* 'progress' in Chrome, Firefox und Opera */ } a { background: transparent; /* Remove the gray background color from active links in MSIE 10 */ } a:active { outline: 0; } small { font-size: 82%; } small small { font-size: 1em; } sub, sup { font-size: 82%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.34em; } sub { bottom: -0.25em; } img { border: 0; } svg:not(:root) { overflow: hidden; /* Hide the overflow in IE */ } button, input, optgroup, select, textarea { font-size: inherit; margin: 0; /* Firefox 4+, Safari, and Chrome */ } button { overflow: visible; /* `overflow` set to `hidden` in MSIE 8-11 */ } button::-moz-focus-inner, /* Remove inner padding and border in Firefox 4+ */ input::-moz-focus-inner { border: 0; padding: 0; } textarea { overflow: auto; /* Remove default vertical scrollbar in MSIE 8-11. */ } [hidden] { /* angeblich für MSIE 10 */ display: none; } header { height: 144px; background-color: white; position: relative; z-index: 999; } @media screen { header { box-shadow: 0px 5px 5px rgba(0,0,0,0.3); } } @media screen and (min-height: 768px) { header { position: sticky; top: 0; left: 0; width: 100%; } } @media screen and (max-width: 414px), screen and (max-height: 479px) { header { height: 110px; } } /* --------------------- Suche/Zurück -------------------- */ header .nav { max-width: 700px; padding-top: 56px; margin: 0 auto; } @media screen and (max-width: 480px), screen and (max-height: 479px) { header .nav { padding-top: 10px; } } /* ----------------------- Links -------------------- */ header > .nav > a { vertical-align: top; overflow: hidden; } /* --------------------- Zurück-Link -------------------- */ header .nav > .suchenlink ~ a:last-child { display: inline-block; width: 32px; height: 28px; padding: 4px 0; } header .nav > .suchenlink ~ a:last-child::before { content: url("data:image/svg+xml,%3Csvg viewBox='0 60 560 480' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 230 100 L 55 300 L 230 500 M 100 300 H 520' fill='none' stroke='%2363889d' stroke-width='70' stroke-linecap='round'%3E%3C/path%3E%3C/svg%3E"); display: inline-block; width: 32px; } /* ---------------------- Suchen-Link -------------------- */ header .nav > .suchenlink { text-decoration: none; float: right; } @media (hover: hover) { header .nav > .suchenlink:hover { color: inherit; } } header .nav > .suchenlink:after { content: url("data:image/svg+xml,%3Csvg viewBox='0 0 600 600' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='230' cy='230' r='200' fill='none' stroke='%23ababab' stroke-width='60'%3E%3C/circle%3E%3Cpath d='M 410 410 L 550 550' fill='none' stroke='%23ababab' stroke-width='100' stroke-linecap='round'%3E%3C/path%3E%3C/svg%3E"); display: inline-block; width: 28px; height: 28px; position: relative; top: 0.2em; margin-left: 10px; } /* ------------------------ Logo ---------------------- */ header .width-box { position: absolute; left: 50%; bottom: -26px; width: 300px; margin-left: -150px; } @media (max-width: 414px), (max-height: 479px) { header .width-box { bottom: -18px; width: 0px; margin-left: -0px; } } header .responsive-box { padding-bottom: 49.16666667%; } /* =========================== Hauptmenü ========================== */ body.mainmenu-open { height: 100vh; overflow: hidden; } #nojs .mainmenu { display: none; } .mainmenu { vertical-align: top; } .mainmenu.disabled { opacity: 0.4; pointer-events: none; } .mainmenu:not([open]) { float: right; } .mainmenu[open] { position: fixed; top: 0; left: 0; width: 100%; width: 100vw; height: 100%; height: 100vh; overflow-y: auto; box-sizing: border-box; padding: 1.8em 12px 4em 12px; /* 4em für Firefox Android */ background-color: white; z-index: 1000; } .in-google-translator .mainmenu[open] { top: 56px; height: calc(100vh - 56px); } @media (max-width: 480px), (max-height: 479px) { .mainmenu[open] { padding-top: 0; } } /* ------------------------ summary------------------------ */ .mainmenu > summary { color: #ababab; font-family: 'Roboto Condensed', sans-serif; text-align: right; cursor: pointer; list-style: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } @media (prefers-contrast: more) { .mainmenu > summary { color: black; } } .mainmenu > summary::-webkit-details-marker { display: none; } .mainmenu[open] > summary { max-width: 700px; margin: 0 auto; } @media (hover: hover) { .mainmenu > summary:hover { opacity: 0.8; } .mainmenu > summary:active { opacity: 1; } } /* --------------------------- summary .* ----------------------- */ .mainmenu[open] .opener, .mainmenu:not([open]) .closer { display: none; } /* ------------------------ summary .opener --------------------- */ .mainmenu .opener { display: inline-block; height: 40px; font-size: 25px; line-height: 1; position: relative; z-index: 999; /* FF: auf kleinen Bildschirmen liegt sonst ::before klicktechnisch hinter dem Logo (mit dem Home-Link) */ top: -2px; } .mainmenu .opener::before { content: url("data:image/svg+xml,%3Csvg viewBox='0 0 600 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 80 80 L 110 80 M 200 80 L 520 80 M 80 200 L 110 200 M 200 200 L 520 200 M 80 320 L 110 320 M 200 320 L 520 320' fill='none' stroke='%23ababab' stroke-width='60' stroke-linecap='round'%3E%3C/path%3E%3C/svg%3E"); display: inline-block; width: 39px; height: 26px; padding: 7px 0 8px 8px; vertical-align: -0.15em; } /* ------------------------ summary .closer --------------------- */ .mainmenu .closer { display: inline-block; font-size: 25px; line-height: 1; margin-top: 0.4em; } .mainmenu .closer::before { content: '×'; display: inline-block; font-family: 'Montserrat', sans-serif; font-size: 70px; line-height: 0.8; vertical-align: -15px; } @media (max-width: 480px), (max-height: 479px) { .mainmenu .closer { margin-top: 0; } } /* ============================== .tree =========================== */ .tree { max-width: 700px; margin: 0 auto; line-height: 1.5; } .tree, .tree ul { list-style-type: none; padding: 0; } .tree ul { margin: 0; } .tree li { position: relative; } .tree ul li { /* nur Unterebenen */ margin-left: 30px; } .tree a { display: block; white-space: nowrap; overflow: hidden; /* muss */ text-overflow: ellipsis; margin-bottom: 0.1em; margin-left: 30px; } /* ------------------------ summary ------------------------ */ .tree summary { position: absolute; top: 0; cursor: pointer; list-style: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .tree summary::-webkit-details-marker { display: none; } .tree summary::before { display: inline-block; min-width: 20px; /* nicht "em", die werden auf dem Handy sonst zu klein */ line-height: 20px; text-align: center; color: white; background-color: rgb(99,136,157); border-radius: 2px; opacity: 0.6; } .tree details[open] summary::before { content: '−'; } .tree details:not([open]) summary::before { content: '+'; } @media (hover: hover) { .tree summary:hover { opacity: 0.8; } .tree summary:active { opacity: 1; } } .tree summary span { display: block; height: 1px; width: 1px; overflow: hidden; position: absolute; } /* ------------------------ Link-Aussehen ------------------------ */ .tree a { color: rgb(99,136,157); text-decoration: none; } .tree a:visited { color: gray; } @media (hover: hover) { .tree a:hover { color: gray; } .tree a:active { color: rgb(243,139,54); } } .tree a.inpath { font-weight: 500; } @media (prefers-contrast: more) { .tree summary::before { background-color: black; } .tree a, .tree a:visited { color: black; } } @media (prefers-contrast: more) and (hover: hover) { .tree a:hover, .tree a:active { color: black; } } .fadeshow { overflow: hidden; /* zum Clippen der zoomenden Frames */ } .fadeshow, .fadeshow img { position: absolute; width: 100%; height: 100%; } #js .fadeshow img { /* transform 7.5s 0.5s <- die ersten 0.5s der Überblendung erfolgen ohne Skalierung */ transition: opacity 1.5s linear, transform 8s; } #js .fadeshow img.fadeout:nth-child(odd) { opacity: 0; transform: scale(1.03); } #js .fadeshow img.fadein:nth-child(odd) { opacity: 1; transform: scale(1.0); } #js .fadeshow img.fadeout:nth-child(even) { opacity: 0; transform: scale(1.0); } #js .fadeshow img.fadein:nth-child(even) { opacity: 1; transform: scale(1.03); } #hero { padding-bottom: 50px; /* maximale Randhöhe */ margin: 0 auto; } #hero .responsive-box { padding-bottom: 50%; } #hero .fadeshow img { image-orientation: from-image; } .bildershow, #nojs .bildershow noscript { position: absolute; width: 100%; height: 100%; overflow: hidden; /* zum Clippen der zoomenden Frames */ } .bildershow div { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: cover; } #js .bildershow div { /* transform 7.5s 0.5s <- die ersten 0.5s der Überblendung erfolgen ohne Skalierung */ transition: opacity 1.5s linear, transform 8s; } #js .bildershow div.fadeout:nth-child(odd) { opacity: 0; transform: scale(1.03); } #js .bildershow div.fadein:nth-child(odd) { opacity: 1; transform: scale(1.0); } #js .bildershow div.fadeout:nth-child(even) { opacity: 0; transform: scale(1.0); } #js .bildershow div.fadein:nth-child(even) { opacity: 1; transform: scale(1.03); } .id1 { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { .id1 { scroll-behavior: auto; } } #hero.startseite { padding-bottom: 40px; /* noch anpassen */ margin: 0; } #hero.startseite .fbox { position: relative; height: 700px; /* alte Browser */ height: calc(100vh - 144px); } @media (max-width: 414px), (max-height: 479px) { #hero.startseite .fbox { height: calc(100vh - 110px); } } /* -------------------- Text + Pfeil ---------------------- */ #hero.startseite .herotext { display: table; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 98; text-align: center; font-size: 72px; font-weight: 500; line-height: 1.35; } @media (max-width: 414px), (max-height: 479px) { #hero.startseite .herotext { font-size: 50px; } } @media (max-width: 359px), (max-height: 359px) { #hero.startseite .herotext { font-size: 28px; } } #hero.startseite .herotext a { display: table-cell; vertical-align: middle; color: white; text-decoration: none; text-shadow: 3px 3px 6px #000; padding: 0 12px; } #hero.startseite .herotext a div { margin-bottom: 0.3em; } @media (max-width: 414px), (max-height: 359px) { #hero.startseite .herotext svg { width: 120px; } } /* -------------------- Sprungmarke ---------------------- */ #hero.startseite #menue { position: absolute; display: block; overflow: hidden; height: 1px; bottom: 140px; } @media (max-width: 767px) { #hero.startseite #menue { bottom: 0; } } main { line-height: 1.5; padding-bottom: 50px; /* maximale Randhöhe */ } @media only screen and (max-width: 960px) { main { padding-bottom: 5%; /* mittlere Randhöhe */ } } @media only screen and (max-width: 599px) { main { padding-bottom: 20px; /* minimale Randhöhe */ } } main a { color: rgb(99,136,157); } main a:visited { color: gray; } @media (hover: hover) { main a:hover { color: gray; } main a:active { color: rgb(243,139,54); } } @media (prefers-contrast: more) { main a, main a:visited { color: black; text-decoration: underline; } } @media (hover: hover) and (prefers-contrast: more) { main a:hover, main a:active { color: black; text-decoration: underline; } } @media print { main { padding-bottom: 0; } main a, main a:visited, main a:hover, main a:active { color: black; text-decoration: underline; } main a[href^="http"]:after { content: " <"attr(href)">"; } main .notprinturl a[href^="http"]:after, main a[href^="http"].notprinturl:after { content: ""; } } h1, h2, h3, h4, h5, h6 { line-height: 1.5; margin-top: 0; } h1, .h1 { font-size: 2em; font-weight: 500; line-height: 1.2; color: rgb(99,136,157); margin-bottom: 28px; text-align: center; } @media (max-width: 359px) { h1, .h1 { font-size: 1.7em; } } h2 { font-size: 1.1em; font-weight: 500; text-align: center; margin-bottom: 1.2em; } h3, h4, h5, h6 { font-weight: 400; font-size: 1em; margin-bottom: 0; } .absatz ul:not([class]), .absatz ol:not([class]) { padding-top: 0; margin-top: 0; padding-bottom: 0; margin-bottom: 1em; } .listemptyline ul:not([class]) li { margin-bottom: 1em; } .blindlist { list-style: none; margin-left: 0; padding-left: 0; } .absatz ul:not([class]) { list-style: none; margin-left: 0; padding-left: 0; } .absatz ul:not([class]) li { padding-left: 1.2em; position: relative; } .absatz ul:not([class]) li:before { content: '•'; position: absolute; left: 0; color: inherit; font-family: Arial, sans-serif; /* sonst werden die Bullits unter Mac und Win unterschiedlich groß */ font-weight: bold; font-size: 1.25em; line-height: 1.3; } .absatz .blindlist li { padding-left: 0; } .absatz .blindlist li:before { display: none; } .absatz dl:not([class]) { margin-top: 0; margin-bottom: 1em; } .absatz dl:not([class]) dt { font-weight: 400; } .absatz dl:not([class]) dd { margin-left: 0; margin-bottom: 1em; } .dir ul { margin: 0 auto; } .dir a { display: block; background-color: white; padding-bottom: 14px; border-bottom: 1px solid #A5853A; margin-bottom: 5px; } @media all and (min-width: 768px) { .dir a { min-height: calc(100% - 12px); } } .dir a, .dir a:visited { color: inherit; text-decoration: none; } @media (hover: hover) { .dir a:hover, .dir a:active { color: inherit; text-decoration: none; } } .dir .thumbnail { background-color: #f0f0f0; padding-bottom: 50%; overflow: hidden; } .dir .thumbnail img { position: absolute; height: 100%; width: 100%; object-fit: cover; } .dir .footer { min-height: 7em; } .dir .linktext { color: rgb(99,136,157); font-size: 1.5em; font-weight: 400; line-height: 1.2; padding-top: 14px; margin-bottom: 0.1em; } .dir .linktext, .dir .teaser { padding-left: 18px; padding-right: 18px; } .dir .teaser { font-weight: normal; } /* "Gegen"-Stylesheets zu Layout "Grid" */ .flex-box.w50 > .breite-kachel { flex-basis: 100%; } .flex-box.w50.m20 > .breite-kachel { flex-basis: 100%; } main details { margin-bottom: 1.2em; } main summary { color: rgb(99,136,157); font-size: 1.1em; text-align: center; font-weight: 500; cursor: pointer; } @media (hover: hover) { main summary:hover { color: gray; } main summary:active { color: rgb(243,139,54); } } @media (prefers-contrast: more) { main summary { color: black; } } @media (hover: hover) and (prefers-contrast: more) { main summary:hover, main summary:active { color: black; } } .page-padding { margin-left: auto; margin-right: auto; padding-left: 12px; padding-right: 12px; box-sizing: border-box; } @media print { .page-padding { margin: 0; padding-left: 0; padding-right: 0; } } @media screen { .c16 { max-width: 1024px; } .c12 { max-width: 768px; } } .flex-box { display: flex; flex-flow: row wrap; justify-content: space-between; padding-bottom: 20px; /* margin-bottom funktioniert nicht */ } ul.flex-box, ol.flex-box { list-style: none; } ul.flex-box:not(.page-padding), ol.flex-box:not(.page-padding) { padding-left: 0; } .flex-box > * { margin: 0; /*
,
*/ } .flex-box.left { justify-content: flex-start; } .flex-box.center { justify-content: center; } .flex-box.right { justify-content: flex-end; } .flex-box.w50 > * { flex-basis: 50%; } .flex-box.w33 > * { flex-basis: 33.333333%; } .flex-box.w50.m20 > * { flex-basis: 48.7%; flex-basis: calc(50% - 12px); } .flex-box.w33.m20 > * { flex-basis: 31.6%; flex-basis: calc(33.333333% - 12px); } .flex-box.m20 { padding-bottom: 0; } .flex-box.m20 > * { margin-bottom: 24px; } /* % funktioniert nicht in Edge und Firefox */ .flex-box.m20.center { margin-left: -10px; margin-right: -10px; } .flex-box.m20.center > * { margin-left: 10px; margin-right: 10px; } @media all and (max-width: 767px) { .flex-box.m20 > * { margin-bottom: 24px; } .flex-box.m20.center { margin-left: -5px; margin-right: -5px; } .flex-box.m20.center > * { margin-left: 5px; margin-right: 5px; } .flex-box.w50.m20.center.fixed > * { flex-basis: 48.7%; flex-basis: calc(50% - 12px); } .flex-box.w50:not(.fixed) { display: block; max-width: 500px; } .flex-box.w33 { display: block; max-width: 500px; } } .responsive-box { position: relative; height: 0; } .responsive-box img { width: 100%; height: auto; vertical-align: bottom; box-sizing: border-box; /* falls ein border gesetzt ist */ } .responsive-box iframe, .responsive-box video, .responsive-box object, .responsive-box .responsive-subbox, .responsive-box .natural-size { position: absolute; width: 100%; height: 100%; } /* Bild überschreitet niemals seine natürliche Größe und Hochformate lassen sich in der Breite begrenzen */ .responsive-box .natural-size { /* Rahmen um Frame: border: 1px solid green; box-sizing: border-box; */ } .responsive-box .natural-size img { width: auto; max-width: 100%; height: auto; max-height: 100%; /* Rahmen um Bild: border: 1px solid red; box-sizing: border-box; passt nicht ganz im MSIE 8 */ } /* Bild zentrieren */ @media screen { .center .responsive-box .natural-size { overflow: hidden; /* sonst erzeugt MSIE 11 (Stand: 7/2015) manchmal einen vertikalen Rollbalken */ text-align: center; } } .absatz { margin-bottom: 36px; } .absatz:empty { display: none; } .youtube-video { background-color: #eee; } .youtube-video iframe { border: 0; } .youtube-video button { position: absolute; width: 100%; height: 100%; background-color: transparent; background-size: cover; background-repeat: no-repeat; background-position: center center; padding: 0; border: none; margin: 0; cursor: pointer; } .youtube-video button::before { content: url('files/Layout/YouTube.svg?ver=1575377478'); width: 60px; height: 42px; display: block; margin: 0 auto; } .youtube-video button span { display: inline-block; color: white; background-color: #222; padding: 5px 10px; border-radius: 6px; margin-top: 5px; } #nojs .youtube-video { background-color: black; color: white; } #nojs .youtube-video:before { content: '  Youtube erfordert Javascript'; } #nojs .youtube-video * { display: none; } #js .sterne { display: inline-block; } #js .sterne span { display: inline-block; width: 0; height: 20px; overflow: hidden; } #js .sterne .after { margin-left: 3px; } #js .sterne .before { margin-right: 3px; } #js .sterne span::before { display: inline-block; width: 100px; height: 20px; } #js .sterne.dehoga span::before { content: url('files/Layout/sterne.svg?ver=1520498474'); } #js .sterne.dtv span::before { content: url('files/Layout/dtv-sterne.svg?ver=1528358124'); } #js .sterne[data-anzahl="1"] span { width: 20px; } #js .sterne[data-anzahl="2"] span { width: 40px; } #js .sterne[data-anzahl="3"] span { width: 60px; } #js .sterne[data-anzahl="4"] span { width: 80px; } #js .sterne[data-anzahl="5"] span { width: 100px; } button.standard { font-family: inherit; font-size: inherit; font-weight: 500; text-align: center; color: white; background-color: #A5853A; padding: 8px 20px; border: 0; cursor: pointer; } body > footer { background-color: #fce7d6; } @media print { body > footer { display: none; } } /* Footer unten ankleben */ @media only screen and (min-width: 1052px) { html { height: 100%; } body { min-height: 100%; position: relative; } main { padding-bottom: 19em; } body > footer { position: absolute; bottom: 0px; width: 100%; } } /* ENDE Footer unten ankleben */ body > footer .silhouette { position: relative; background-color: #fef6f0; } body > footer .silhouette > div { max-width: 1024px; box-sizing: border-box; margin: 0 auto; } body > footer .silhouette > div > div { background-image: url(files/Layout/silhouEtte.svg?ver=1677057912); background-repeat: no-repeat; background-position: center top; background-size: cover; height: 0; padding-bottom: 10.546875%; position: relative; bottom: -12px; } body > footer ul { list-style-type: none; padding: 0; margin: 0 auto; text-align: center; } body > footer li a { display: inline-block; color: rgb(51, 51, 51); text-decoration: none; } @media (hover: hover) { body > footer li a:hover, body > footer li a:active { text-decoration: underline; } } @media only screen and (min-width: 1052px) { body > footer nav { padding-top: 3em; padding-bottom: 3em; } body > footer ul + ul { margin: 1em auto; } body > footer li { font-size: 0.9em; display: inline-block; padding-right: 3%; } body > footer li:last-child { padding-right: 0; } } @media only screen and (max-width: 1051px) { body > footer nav { padding-top: 2em; padding-bottom: 2em; } body > footer li a { padding: 10px 0; } } body > footer li:empty { display: none; } body > footer li img { vertical-align: bottom; } body > footer li [aria-label="Facebook"] img { width: auto; height: 44px; } body > footer li [aria-label="Instagram"] img { width: auto; height: 42px; } body > footer li [aria-label="YouTube"] img { width: auto; height: 42px; } body > footer .sitemaplink { display: inline-block; width: 1px; height: 1px; overflow: hidden; } body > footer .editlink { text-align: center; } footer li[lang="en"] { vertical-align: 0.3em; } .in-google-translator footer li[lang="en"] { display: none; } #nojs .zerts span { display: block; } #js .zerts span { display: inline-block; overflow: hidden; vertical-align: middle; margin: 0 7px; } #js .zerts span img { display: block; } @media print { .m1519982002 .flex-box.w50.m20.c16 { max-width: none; } .m1519982002 .flex-box.w50.m20.c16.suchergebnis { display: block; } .m1519982002 .flex-box.w50.m20.c16.suchergebnis > li { page-break-inside: avoid; break-inside: avoid; } .m1519982002 .suchergebnis { font-size: 0.66em; } .m1519982002 .suchergebnis li > a { border-bottom: 0; } .m1519982002 .suchergebnis li > a::after { content: ''; display: block; clear: both; } .m1519982002 .dir.uk-ergebnis .thumbnail { padding-bottom: 0; width: 25%; height: auto; box-sizing: border-box; float: left; } .m1519982002 .dir.uk-ergebnis .thumbnail img { position: static; height: auto; } .m1519982002 .suchergebnis .footer { width: 25%; box-sizing: border-box; float: left; } .m1519982002 .suchergebnis .linktext{ padding-top: 0; font-size: 1.2em; } .m1519982002 .suchergebnis .footer .teaser.text:not(.kontaktdaten) { display: none; } .m1519982002 .suchergebnis .footer .kontaktdaten a { display: inline; padding: 0; border: none; margin: 0; } .m1519982002 .suchergebnis .drucktextbox .zerts { margin-top: 1em; } .m1519982002 .suchergebnis .teaser.text.drucktextbox { width: 50%; box-sizing: border-box; float: left; margin-top: 0; } .m1519982002 .suchergebnis .drucktextheader, .m1519982002 .suchergebnis .druckeinheiten { padding-top: 0.3em; padding-bottom: 0.3em; border-top: 1px solid #999; border-bottom: 1px solid #999; margin-top: 0.3em; margin-bottom: 0.3em; } .m1519982002 .suchergebnis .drucktextheader { padding-top: 0; border-top: 0; margin-top: 0; } .m1519982002 .suchergebnis .drucktextheader + .druckeinheiten { padding-top: 0; border-top: 0; margin-top: 0; } .m1519982002 .suchergebnis .drucktextheader > span:last-child { float: right; } .m1519982002 .suchergebnis .drucktextheader::after { /* clearfix */ content: ''; display: block; clear: both; } } @media screen { .m1519982002 .suchergebnis .footer .kontaktdaten, .m1519982002 .suchergebnis .drucktextbox { display: none; } } @media print { .einheitentabelle { width: 100%; border-collapse: collapse; margin: 0; } .einheitentabelle td { vertical-align: top; border-bottom: 1px dashed silver; } .einheitentabelle td:last-child { text-align: right; } .m1519982002#js .suchergebnis .sterne span::before { width: 60px; height: 12px; padding-top: 8px; } .m1519982002#js .suchergebnis .sterne[data-anzahl="1"] span { width: 12px; } .m1519982002#js .suchergebnis .sterne[data-anzahl="2"] span { width: 24px; } .m1519982002#js .suchergebnis .sterne[data-anzahl="3"] span { width: 36px; } .m1519982002#js .suchergebnis .sterne[data-anzahl="4"] span { width: 48px; } .m1519982002#js .suchergebnis .sterne[data-anzahl="5"] span { width: 60px; } } @media screen { .einheitentabelle { display: none; } } main form[name] { margin-bottom: 2.5em; } main form[name] fieldset { padding: 0; border: 0; margin: 0 0 1em 0; } main form[name] legend { font-weight: 400; padding: 0; margin: 0 0 0.8em 0; } main form[name] label { display: block; } main form[name] label > span:first-child { display: inline-block; min-width: 7em; } main form[name] label > span:last-child { display: inline-block; margin-left: 0.5em; box-sizing: border-box; max-width: 90%; max-width: calc(100% - 2em); vertical-align: top; } main form[name] input[type="text"], main form[name] input[type="tel"], main form[name] input[type="email"] { font: inherit; box-sizing: border-box; width: 340px; margin-bottom: 0.5em; } @media (max-width: 360px) { main form[name] input[type="text"], main form[name] input[type="tel"], main form[name] input[type="email"] { width: 100%; } } details.article[open] summary { margin-bottom: 1em; } .urheber { display: block; color: gray; margin-top: 2em; } @media (prefers-contrast: more) { .urheber { color: black; } } .intro { text-align: center; font-size: 1.25em; } .knotenpunkte > div { line-height: 1.4; text-align: center; font-size: 18px; font-family: 'Roboto Condensed', sans-serif; } .knotenpunkte b, .knotenpunkte a { display: inline-block; min-width: 40px; min-height: 40px; color: white; background-color: rgb(193,18,28); /* = RAL 3020 */ text-align: center; font-weight: 400; padding-top: 8px; box-sizing: border-box; position: relative; margin-bottom: 10px; text-decoration: none; } .knotenpunkte a:visited { color: white; } @media (hover: hover) { .knotenpunkte a:hover { color: white; filter: brightness(120%); } } .knotenpunkte b:before, .knotenpunkte a:before { content: ''; display: inline-block; width: 30px; height: 30px; border: 2px solid white; border-radius: 50%; position: absolute; top: 3px; left: 3px; } .termin { position: relative; min-height: 3rem; padding-left: 3.5rem; margin-bottom: 1em; } .termin > h2, .termin > h3, .termin > h4, .termin > h5, .termin > h6 { font-size: 1em; margin: 0; } .termin::before, .termin::after { position: absolute; left: 0; width: 2.35rem; text-align: center; border: 1px solid rgb(99,136,157); margin-bottom: 1em; /* falls Termin einzeilig */ } .termin::after { content: attr(data-monat); top: 0.2rem; font-size: 0.8rem; font-weight: 300; color: white; background-color: rgb(99,136,157); border-radius: 3px 3px 0 0; } .termin::before { content: attr(data-tag); top: 1.25rem; font-weight: 500; line-height: 1.5; color: rgb(99,136,157); padding-top: 0.05rem; background-color: white; border-radius: 0 0 3px 3px; } .termin[data-tag="?"] { display: none; } .termin > data { white-space: nowrap; } .termin > data:not(:nth-of-type(4))::before { white-space: normal; } .termin > data:nth-of-type(2):not(:empty)::before { content: ' – '; } .termin > data:nth-of-type(3):not(:empty)::before { content: ', '; } .termin > data:nth-of-type(4):not(:empty)::before { content: ' – '; } .termin > data:nth-of-type(3):not(:empty) + data:nth-of-type(4)::after { content: ' Uhr'; } @media (max-width: 480px) { .termin > span:not(:empty) { display: block; } } #nojs .ilist { display: none; } details.ilist summary:empty:before, div.ilist:empty:before { content: 'Laden …'; } div.ilist:empty:before { display: block; text-align: center; } details.ilist summary:not(:empty) { text-decoration: underline; } details.ilist[open] summary { margin-bottom: 1em; } /* Thumbnails */ .foto-section .flex-box { justify-content: center; margin-left: -1px; } .foto-section .flex-box li { flex-basis: 24.7%; /* Fallback */ flex-basis: calc(25% - 1px); margin-left: 1px; margin-bottom: 1px; } .foto-section .flex-box li a { display: block; padding-bottom: 100%; } .foto-section .flex-box li a img { position: absolute; height: 100%; width: 100%; object-fit: cover; } /* Lightbox-Galerie */ @media screen and (hover: hover) { .scrollpane :focus:not(:focus-visible) { outline: none } .scrollpane :active:not(:focus-visible) { outline: none } /* Firefox */ /* Entfernt die lästigen Umrisse für Mausbenutzer, behält sie jedoch für Tastaturbenutzer bei und wird von Browsern ignoriert, die dies nicht unterstützen. */ } .scrollpane { /* waagerecht funktioniert im Desktop-Safari nur mit Touchpad */ overflow-x: scroll; /* oder auto – mit "hidden" geht das Wischen aber nicht mehr*/ overflow-y: hidden; white-space: nowrap; /* damit die enthaltenen Boxen nicht umbrechen */ -ms-scroll-snap-type: x mandatory; /* MSIE und Edge 12+ */ scroll-snap-type: x mandatory; background-color: #000; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; /* header hat 999 */ } .in-google-translator .scrollpane { top: 56px; height: calc(100% - 56px); } .scrollpane:not(.jump) { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { .scrollpane:not(.jump) { scroll-behavior: auto; } } .scrollpane button { /* Schließkreuz */ position: fixed; z-index: 9999; top: 15px; right: 15px; width: 42px; height: 42px; padding: 0; border: none; margin: 0; background-color: transparent; background-repeat: no-repeat; background-position: center center; background-size: contain; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 600 600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 70 70 L 530 530 M 70 530 L 530 70' fill='none' stroke='white' stroke-width='70' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3C/svg%3E"); cursor: pointer; } .in-google-translator .scrollpane button { top: calc(15px + 56px); } .scrollpane figure { display: inline-block; width: 100%; height: 100%; vertical-align: top; margin: 0; scroll-snap-align: start; position: relative; } .scrollpane figure a { display: inline-block; width: 100%; height: 100%; } .scrollpane img { border: none; /* MSI <= 10 */ width: 100%; height: 100%; object-fit: contain; } .scrollpane.jump figure:not(:target) img { display: none; } .scrollpane figcaption { text-align: center; color: white; background-color: rgba(0, 0, 0, 0.75); position: absolute; left: 0; width: 100%; bottom: 0; padding: 0.3em; } .scrollpane figcaption small { display: block; } .bild.zoomable a { display: inline-block; } .bild.zoomable img { vertical-align: bottom; } .bild { text-align: center; } .bild > a { display: inline-block; /* damit der Fokus das Bild umschließt */ } .bild img { width: auto; max-width: 100%; height: auto; vertical-align: bottom; } .bild figcaption { color: gray; text-align: center; margin-top: 0.3em; } @media (prefers-contrast: more) { .bild figcaption { color: black; } } .bild figcaption small { display: block; } .link { color: rgb(165, 133, 58); text-align: center; font-weight: 500; } .kontakt { text-align: center; } .kontakt b:not(.suchwort) { display: block; } .download-link { text-align: center; } hr { height: 0; padding: 0; border: 0; border-top: 1px solid rgb(165, 133, 58); margin: 30px 0; } .absatz > blockquote { margin-left: 0; padding-left: 1.8em; position: relative; } .absatz > blockquote::before { content: '»'; position: absolute; top: -0.32em; left: 0; line-height: 1; font-size: 2.8em; font-weight: 400; color: #888; } .absatz > blockquote > p { color: gray; } .absatz > blockquote > p:last-of-type { margin-bottom: 0; } .absatz > blockquote cite { font-style: normal; font-weight: 400; } .anbieter img { max-width: 100%; height: auto; } .anbieter .flex-box > div { text-align: center; } .anbieter q { display: block; color: #89061b; font-size: 0.9em; font-weight: 500; line-height: 1.35; margin-bottom: 0.5em; } .anbieter address { font-style: normal; font-size: 0.8em; } .anbieter address b { color: #89061b; } .id1519656710 h1 { /* Artikelsammlung "Zeitschätze" */ height: 1px; overflow: hidden; line-height: 2; margin: 0; } .objekt-hauptmotiv { max-width: 744px; padding-bottom: 1.5em; margin: 0 auto; } .objekt-hauptmotiv img { max-width: 100%; height: auto; vertical-align: bottom; } .objekt-hauptmotiv:empty { padding-bottom: 2.5em; } .objekt .titelgrafik h1 { height: 1px; overflow: hidden; line-height: 2; margin: 0; } .objekt .subtitle { text-align: center; margin-top: -1em; margin-bottom: 1.5em; } .objekt .titelgrafik ~ .subtitle-box .subtitle { margin-top: 0.5em; } .objekt .adresse, .objekt .zertifikate { text-align: center; } #js .objekt .zertifikate .sterne { margin: 0 7px; } #js .objekt .zertifikate > span { display: inline-block; vertical-align: middle; } .objekt h2 { padding-top: 1.1em; border-top: 1px solid rgb(165, 133, 58); } .objekt h2:only-child { /* :last-child ginge auch */ display: none; } .objekt .co { display: block; margin-top: 1.3em; } .objekt .einheiten { /*