/* source-sans-pro-300 - latin */ @font-face { font-family: 'Source Sans Pro'; font-style: normal; font-weight: 300; src: local("Source Sans Pro Light"), local("SourceSansPro-Light"), url("/export/system/modules/de.rehadat.projekt2021.frontend/resources/fonts/source-sans-pro-v13-latin-300.woff2") format("woff2"), /* Super Modern Browsers */ url("/export/system/modules/de.rehadat.projekt2021.frontend/resources/fonts/source-sans-pro-v13-latin-300.woff") format("woff"), /* Modern Browsers */ url("/export/system/modules/de.rehadat.projekt2021.frontend/resources/fonts/source-sans-pro-v13-latin-300.ttf") format("truetype"); /* Safari, Android, iOS */ font-display: swap; } /* source-sans-pro-regular - latin */ @font-face { font-family: 'Source Sans Pro'; font-style: normal; font-weight: 400; src: local("Source Sans Pro Regular"), local("SourceSansPro-Regular"), url("/export/system/modules/de.rehadat.projekt2021.frontend/resources/fonts/source-sans-pro-v13-latin-regular.woff2") format("woff2"), /* Super Modern Browsers */ url("/export/system/modules/de.rehadat.projekt2021.frontend/resources/fonts/source-sans-pro-v13-latin-regular.woff") format("woff"), /* Modern Browsers */ url("/export/system/modules/de.rehadat.projekt2021.frontend/resources/fonts/source-sans-pro-v13-latin-regular.ttf") format("truetype"); /* Safari, Android, iOS */ font-display: swap; } /* source-sans-pro-600 - latin */ @font-face { font-family: 'Source Sans Pro'; font-style: normal; font-weight: 600; src: local("Source Sans Pro SemiBold"), local("SourceSansPro-SemiBold"), url("/export/system/modules/de.rehadat.projekt2021.frontend/resources/fonts/source-sans-pro-v13-latin-600.woff2") format("woff2"), /* Super Modern Browsers */ url("/export/system/modules/de.rehadat.projekt2021.frontend/resources/fonts/source-sans-pro-v13-latin-600.woff") format("woff"), /* Modern Browsers */ url("/export/system/modules/de.rehadat.projekt2021.frontend/resources/fonts/source-sans-pro-v13-latin-600.ttf") format("truetype"); /* Safari, Android, iOS */ font-display: swap; } /* source-sans-pro-700 - latin */ @font-face { font-family: 'Source Sans Pro'; font-style: normal; font-weight: 700; src: local("Source Sans Pro Bold"), local("SourceSansPro-Bold"), url("/export/system/modules/de.rehadat.projekt2021.frontend/resources/fonts/source-sans-pro-v13-latin-700.woff2") format("woff2"), /* Super Modern Browsers */ url("/export/system/modules/de.rehadat.projekt2021.frontend/resources/fonts/source-sans-pro-v13-latin-700.woff") format("woff"), /* Modern Browsers */ url("/export/system/modules/de.rehadat.projekt2021.frontend/resources/fonts/source-sans-pro-v13-latin-700.ttf") format("truetype"); /* Safari, Android, iOS */ font-display: swap; } :root { --schrift: #4b4a48; --hintergrund: #fff; --bordergrau: #ccc; --mittelgrau: #8d8d8d; --hintergrundzwei: #e9f2f7; --hintergrunddrei: #ddd; --eins: #046aa2; --schrifteins: #02407f; /* --zwei: #387652; */ /* zu hell auf hellgrauem Hintergrund */ --zwei: #36724f; /* --grueneins: #27754a; */ /* dunkelgrün Cookie-Balken */ --grueneins: #267349; /* genügend Kontrast auf hellgrauer News-Kachel von rehadat.de */ /* --gruenzwei: #0d9144; */ /* mittelgrün Farbverlauf */ --gruenzwei: #097b39; /* mittelgrün Farbverlauf */ /* --fehler: #d74242; */ --fehler: #d63d3d; --blaugradient: linear-gradient(45deg, #02407f, #046aa2); --blaugradientalpha: linear-gradient(44deg, rgba(2,64,127,0.9), rgba(4,106,162,0.9)); /* --mittelblaugradient: linear-gradient(45deg, #397293, #389ad6); */ --mittelblaugradient: linear-gradient(45deg, #397293, #247cb2); /* --gruengradient: linear-gradient(225deg, #6db38c 0%, #45a16b 100%); */ /* Lue 11.09.2024: Abgedunkelt nach BITV-Test */ --gruengradient: linear-gradient(45deg, var(--grueneins), var(--gruenzwei)); /* --gruengradientaktiv: linear-gradient(45deg, #21633f, #0a7135); */ --gruengradientaktiv: linear-gradient(45deg, #21633f, #086830); } @media (prefers-color-scheme: dark), (inverted-colors: inverted) { :root { --schrift: #fafafa; --hintergrund: #000; --bordergrau: #444; --mittelgrau: #616161; --hintergrundzwei: #171717; --hintergrunddrei: #333; --eins: #0589d6; /* etwas helleres Blau mit ausreichend Kontrast zu schwarz */ --schrifteins: #38b3fa; --zwei: #0fb353; /* etwas helleres Grün mit ausreichend Kontrast zu schwarz */ /* Grüner Farbverlauf: Im Dark Mode unaktivierter Zustand und hover/fokus/aktivierte Zustand vertauscht */ --gruengradient: linear-gradient(45deg, #21633f, #086830); --gruengradientaktiv: linear-gradient(45deg, var(--grueneins), var(--gruenzwei)); } } /* für Barrierfreiheit: Benutzerdefinierte Farben mit !important */ /* * { color: yellow !important; background: darkblue !important; & :is(a, button):is(:hover, :focus, :active) { border: 5px dotted fuchsia !important; } } */ /** Galerie-Dialog: Nicht verwendbare Typen ausblenden */ li.org-opencms-gwt-client-ui-css-I_CmsLayoutBundle-I_CmsListTreeCss-listTreeItem.org-opencms-gwt-client-ui-css-I_CmsLayoutBundle-I_CmsListItemWidgetCss-expired { display: none; } /* Platzhalter für Unter-Elemente im Editier-Modus */ .element-container, .section-container { border: 3px dotted var(--schrift); margin-top: 30px; padding: 15px; font-size: 1.25rem; color: var(--schrift); background-color: var(--hintergrund); } html { font-size: 100%; /* bei Standard-Einstellung von Browsern = 16px; */ /* Zum Testen, ob immer Vorder- und Hintergrundfarbe definiert sind - und nicht nur eines davon */ /* background-color: fuchsia; color: yellow; */ } body { font-family: 'Source Sans Pro',arial,sans-serif; font-variant-ligatures: no-common-ligatures; /* Ligaturen abstellen, weil sie vom Screenreader nicht richtig vorgelesen werden */ color: var(--schrift); background-color: var(--hintergrund); font-weight: 400; line-height: 1.5; font-size: 1.125rem; /* falls Browser auf 16px eingestellt ist = 18px; */ hyphens: auto; word-break: break-word; } * { box-sizing: border-box; } #cookieDialog { position: fixed; bottom: 0; left: 0; z-index: 100; width: 100%; color: #fff; background-color: var(--grueneins); opacity: 1; padding: 8px 0 0; font-weight: 400; } #cookieDialog p.bigFont { margin-bottom: 0; font-size: 1rem; } #cookieDialog a { color: #fff; font-weight: 600; } #cookieDialog button { margin: 15px 0; } #cookie-modal .modal-content { border: 2px solid var(--gruenzwei); } #cookie-modal .modal-header { padding: 0.5rem 1rem; color: #fff; background-color: var(--zwei); background-image: var(--gruengradient); font-weight: 600; border-bottom: none; } #cookie-modal .modal-body { overflow-y: auto; background-color: var(--hintergrund); } #cookie-modal .modal-footer { background: var(--hintergrund); padding: 0.5rem 1rem; } /* Überschriften - Standardgrößen für alle Inhalte */ /* Wir ermöglichen für Kleingeräte den Umbruch für Wörter wie "Bergmannsversorgungsscheine", "Behindertengleichstellungsschlichtungsverordnung" etc. */ h1, h2, h3, h4, h5, h6 { hyphens: auto; word-break: break-word; } :is(h1,h2,h3,h4,h5,h6):empty { display: none; } h1, h2, h3 { font-weight: 400; } h4, h5, h6 { font-weight: 600; } h1 { font-size: 2rem; /* falls der Browser auf 16px eingestellt ist = 32px */ margin-bottom: 20px; } h2, .text h2 { font-size: 1.55rem; } h3 { font-size: 1.375rem; } h4 { font-size: 1.25rem; } h5, h6 { font-size: 1.125rem; } /* fetter als "normale" h2 und mit mehr Abstand zum vorhergehenden Element */ h2.section-heading { font-weight: 600; padding: 15px 0; margin-top: 30px; } h2.searchinstead { margin: -20px 0 15px; } p { font-size: 1.125rem; /* margin-bottom: 1.5rem; */ /* ist vor allem in den Webservices besser, prüfen, ob das nicht anderswo Kollateralschäden verursacht */ margin-bottom: 1em; } cite, blockquote { margin: 1rem; font-style: italic; } blockquote em { background-color: var(--hintergrundzwei); color: var(--schrift); } blockquote p:first-of-type::before { display: inline; content: "\201e"; padding-right: 0.2rem; font-weight: 700; font-size: 2rem; line-height: 0.5; color: var(--schrifteins); } blockquote p:last-of-type::after { display: inline; content: "\201c"; padding-left: 0.2rem; font-weight: 700; font-size: 2rem; line-height: 0.5; color: var(--schrifteins); } /* Umbruch innerhalb von Abkürzungen wie e. V. verhindern */ abbr { white-space: nowrap; color: inherit; } main ul { list-style: none; /* padding-left: 20px; */ /* Wenn man diesen Wert nicht setzt: - widerspricht es dem Sunzinet-Enwurf - ist es besser lesbar - muss man für andere Aufzählungen den Wert nicht zurücksetzen - ist Text in der Aufzählung bündig mit Text in Nummerierungen */ margin-top: 15px; counter-reset: li; /* wenn man das hier weglässt, und sich vor einer ol eine ul befindet, beginnt die ol nicht mit 1 */ } main :is(ul,ol) > li > :is(ul,ol).enger { margin-top: 8px; } main ol li ul { counter-reset: revert; /* wenn man das hier weglässt, wird nach einer nested ul beim folgenden li der ol nicht korrekt weitergezählt (Datenchutzerklärung) */ } main ul li { padding-bottom: 15px; } main :is(ul,ol).enger li { padding-bottom: 2px; } /* Wird bisher nur in Leichter Sprache für die Erklärung von Schweren Wörtern benutzt Lue 09.04.2024 */ main dt { font-weight: 700; } main dd { margin-left: 1.5em; margin-bottom: 1.5em; } /* wenn wir die Standard-Liste so stylen, muss für alle anderen Listen ul li::before { display:none; } gesetzt werden */ main ul > li::before { font-family: "Font Awesome 6 Pro"; font-weight: 900; content: "\f04d"; color: var(--eins); background-color: transparent; margin-left: -1.5rem; margin-right: 15px; font-size: 0.75rem; position: relative; bottom: 1px; } main ul.checklist li::before { content: "\f058"; font-size: 24px; bottom: 0px; top: 3px; margin-left: -38px; } /* Everviz / Highcharts */ /* main .highcharts-a11y-proxy-group.highcharts-a11y-proxy-group-legend ul li::before, main .highcharts-a11y-proxy-group.highcharts-a11y-proxy-group-legend ol li::before, main li.highcharts-menu-item::before { */ main .rehadat-everviz :is(ul,ol) > li::before { display: none; } /* BEGINN Share-Buttons */ main .share-buttons { margin: 1.5rem 0; } main .biggerFont .toolbar { border: 2px solid var(--eins); padding: 10px; margin-bottom: 60px; } main .biggerFont #social-buttons-heading { margin-bottom: 0; border-bottom: 0; padding-top: 0; } main .shariff ul > li::before { display: none; } /* ENDE Share-Buttons */ main ol { padding-left: 30px; } /* Automatische Nummerierung der Paragraphen und Abschnitte der Datenschutzerklärung */ /* Erklärung dazu siehe https://developer.mozilla.org/de/docs/Web/CSS/CSS_Lists_and_Counters/CSS_Z%C3%A4hler_verwenden */ main .datenschutz { counter-reset: paragraph; } main .datenschutz h2::before { counter-increment: paragraph; content: "§ " counter(paragraph) " "; color: var(--eins); } main .datenschutz .section-heading { counter-reset: section; padding-top: 15px; padding-bottom: 8px; } /* main .datenschutz h3::before { counter-increment: section; content: "(" counter(section) ") "; color: var(--eins); } */ /* Innerhalb der Abschnitte alphabetisch nummerieren */ main .datenschutz ol { list-style-type: numeric; padding-left: 22px; } main .datenschutz ol li::marker { color: var(--eins); font-size: 1.375rem; font-weight: 600; } main .datenschutz ol li { padding-left: 5px; } main .datenschutz ol li ol { list-style-type: lower-alpha; } main .datenschutz ol li ol li::marker { color: var(--eins); font-size: 1.125rem; font-weight: 600; } main .datenschutz ol li ul { /* padding-left: 30px; */ padding-left: 20px; } main .datenschutz ol li ul li { padding-bottom: 8px; } main ol li { padding-bottom: 15px; padding-left: 10px; } main ol li::marker { color: var(--eins); } /* Tabellen - in den Inhalten und in den Webservices */ main table { margin-bottom: 30px; } main table.standard, main table.standard :is(thead,tbody) :is(th,td) { border-collapse: collapse; border: 1px solid var(--schrift); } main table.standard :is(thead,tbody) :is(th,td) { padding: 5px 7px; } main table.standard :is(thead,tbody) .blau-verlauf th { border: none; } main table :is(thead,tbody) th, main table tbody .beschriftung { font-weight: 600; } /* sm-vertical verdreht Texte in Tabellen in die Senkrechte */ /* Funktioniert auf dem iPhone leider nicht so, wie auf https://www.mediaevent.de/css/writing-mode.html beschrieben. Lue 16.10.2024 */ /* main table.standard th.sm-vertical { text-align: left; vertical-align: top; direction: rtl; } main table.standard th.sm-vertical span { writing-mode: vertical-rl; text-orientation: sideways; } */ main table .blau-verlauf { color: #fff; background-color: #02407f; background-image: var(--blaugradient); } main table .zahl { text-align: right; font-variant-numeric: lining-nums tabular-nums; } main table .hellblau { background-color: var(--hintergrundzwei); } /* Links */ a { color: var(--zwei); text-decoration: underline; } a:is(:hover,:focus,:active) { color: var(--zwei); text-decoration: none; } a:focus { /* color: #000; text-decoration: none; */ /* outline: none; */ /* Links sollen, wenn Benutzer sich individuelle Farben im Browser eingestellt haben - und nur dann! - einen sichtbaren Outline haben */ outline: 1px solid transparent; } .btn-link.focus, .btn-link:focus, button:is(:hover,:focus,:active) { /* Buttons sollen, wenn Benutzer sich individuelle Farben im Browser eingestellt haben - und nur dann! - einen sichtbaren Outline haben */ outline: 5px solid transparent; box-shadow: none; /* erforderlich für Bootstrap 4.6.2 */ } /* Links innerhalb der Standard-Inhalts-Spalte (nicht auf der Homepage) */ .single-col a:focus { outline: 1px solid var(--zwei); outline-offset: 1.5px; } nav.service a:focus { background-color: transparent; } /* Standard-Formatierung für die FontAwesome-Icons */ i { padding-left: 10px; } /* Buttons und Links im Button-Look */ :is(button,a).btn-solid { color: #fff; font-size: 1.125rem; font-weight: 400; min-width: 200px; border-radius: 8px; /* background-color: #32a852; */ background-color: var(--grueneins); border: 3px solid var(--grueneins); background-image: var(--gruengradient); cursor: pointer; text-decoration: none; padding: 0 2rem; display: inline-block; line-height: 2.75; } :is(button,a).btn-border { min-width: 200px; font-size: 1.125rem; border-radius: 8px; color: var(--grueneins); border-radius: 8px; border: 3px solid var(--grueneins); background-color: var(--hintergrund); cursor: pointer; text-decoration: none; padding: 0 2rem; display: inline-block; line-height: 2.75; text-align: center; vertical-align: middle; } :is(button,a).btn-solid:is(:hover,:focus,:active), :is(button,a).btn-border:is(:hover,:focus,:active) { color: #fff; background-color: var(--grueneins); background-image: var(--gruengradientaktiv); } /* auf dunkelblauem Hintergrund verwenden! */ :is(button,a).btn-border-white { min-width: 200px; font-size: 1.125rem; color: #fff; border: 3px solid #fff; border-radius: 8px; background-color: #02407f; background-image: var(--blaugradient); cursor: pointer; text-decoration: none; padding: 0 2rem; display: inline-block; line-height: 2.75; text-align: center; vertical-align: middle; } :is(button,a).btn-border-white:is(:hover,:focus,:active) { color: #02407f; background-color: #fff; background-image: none; border: 3px solid #02407f; outline: 5px solid transparent; /* wird wirksam bei benutzerbenutzerdefinierten Farben */ } /* rundum Platz schaffen, damit Tastaturfokus an allen Seiten sichtbar wird */ :is(button,a):is(.btn-solid,.btn-border,.btn-border-white) { margin: 5px; } :is(button,a):is(.btn-solid,.btn-border):focus { /* outline: 3px dotted var(--gruenzwei); */ outline: 3px solid var(--zwei); outline-offset: 2px; } :is(button,a).btn-border-white:focus { outline: 3px dotted #fff; } /* verkleinerte Variante für Suchfilter, erweiterte Suche, buchbare Veranstaltung */ button:is(.btn-solid,.btn-border,.btn-border-white).small, a:is(.btn-solid,.btn-border,.btn-border-white).small { /* min-width: unset; */ min-width: 100px; padding: 0 1rem; line-height: 2.2; } /* kleinste Variante für buchbare Veranstaltung */ button:is(.btn-solid,.btn-border,.btn-border-white).xs, a:is(.btn-solid,.btn-border,.btn-border-white).xs { font-size: 1rem; /* min-width: unset; */ min-width: 100px; padding: 0 0.5rem; line-height: 1.8; } /* für Elemente, die aufgrund Platzmangels ausgeblendet werden sollen (400% in Google Chrome) */ :is(div,span).nosmall { display: none; } hr { margin-bottom: 2rem; /* überschreibt 1rem von Bootstrap */ } /* Beschriftungen für Screenreader: Aus talentplus neu übernommen */ .offscreen { position: absolute; top: -1000rem; left: 0rem; } .offscreen li::before { display: none; } .offscreen :is(li,p) a { position: absolute; top: -1000rem; left: 0; color: #b31b34; background-color: var(--hintergrund); font-weight: 600; width: 20rem; font-size: 1.5rem; text-align: center; border: 3px solid #b31b34; border-radius: 0; padding: 0; line-height: 2.5; z-index: 50; } /* Sprungnavigation und sonstige Offscreen-Links beim Tabulieren sichtbar machen */ .offscreen :is(li,p) a:focus { position: absolute; top: 1000rem; left: 0; transition: top .05s ease-in; } /* Screenreader-Klasse in Bootstrap 4 */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* für verbesserte Aussprache von REHADAT verwenden wir in der Slider-Überschrift einen Offscreen-Span, der nur ein Leerzeichen enthält. Das sieht so aus: REHA DAT Hiermit verhindern wir einen Zeilenumbruch innerhalb von REHADAT: */ .rehadat-vorlesen { white-space: nowrap; } b, strong, .bold { font-weight: 600; } /* fett innerhalb von halbfett */ .bold strong, strong .bold, .really-bold, strong b, b strong, strong strong { font-weight: 700; } .blue, .really-bold.blue { color: var(--eins); } /* unfett wird für das Datum auf der Newslisten-Seite verwendet. light an unbekanntem Ort. */ .unfett, .light { font-weight: 300; } /* 2px größer als Standard 18px */ .bigFont, .form-content .feld.bigFont { font-size: 1.25rem; } /* 2px kleiner als Standard 18px */ .smallFont, .form-content .feld.smallFont { font-size: 1rem; } .upperCase { text-transform: uppercase; } /* Angabe der Absatz-ID (zum gezielten Verlinken) */ .para-id { font-size: 1rem; background-color: var(--hintergrundzwei); color: #000; padding: 5px; box-shadow: none; margin: 0 0 5px; } .center { text-align: center; } /* farbig hinterlegte Zeilen (Hintergrundfarbe des Blocks bleibt sichtbar */ .farbige-zeile { background-color: var(--hintergrundzwei); } /* BEGINN farbige Kästen (mit Ausrufezeichen, Fragezeichen, OK-Haken etc.) */ .unfertig, .wichtig, .frage, .tipp, .ok, .finder-emotion-text, .info-status, .rot, .blau, .gruen { padding: 5px; box-shadow: 0 .5rem 1rem rgba(0,0,0,.2); margin: 0 0 30px; } :is(th, td):is(.rot,.blau,.gruen) { box-shadow: none; } .rahmen-blau, .rahmen-grau { color: var(--schrift); background-color: var(--hintergrund); padding: 5px; margin: 0 0 30px; } .rahmen-blau,.info-status { border: 2px solid var(--eins); } .rahmen-grau { border: 2px solid #b5b5b5; } img:is(.rahmen-blau,.rahmen-grau) { padding: 0; margin-bottom: 0; } /* Abwandlung von: https://codepen.io/efost/pen/MjJGqq */ .zettel { width: 80%; min-width: 260px; max-width: 400px; margin: 30px auto 45px; box-shadow: 0 .5rem 1rem rgba(0,0,0,.2); border-top: 10px dotted var(--hintergrund); color: var(--schrift); background-color: #f3f0de; background-image: linear-gradient(rgba(255,210,140,0.2), rgba(200, 160, 100, 0.1) 11%, rgba(0,0,0,0) 35%, rgba(200, 160, 100, 0.1) 65%); padding: 15px; } :is(.unfertig,.wichtig,.frage,.tipp,.ok,.info-status):first-child { margin: 15px 0 30px; } :is(.unfertig,.wichtig,.frage,.tipp,.ok,.info-status):not(:first-child) { margin: 45px 0 30px; } .unfertig, .wichtig, .rot { /* hellrot */ background-color: #ffe6e6; } :is(.unfertig,.wichtig,.rot) :is(h1,h2,h3,h4,h5,h6) { color: #b31b34; } .frage, .tipp, .blau { /* hellblau */ background-color: #e9f2f7; } :is(.frage,.tipp,.blau) :is(h2,h3,h4,h5,h6) { color: #02407f; } .ok, .gruen { /* hellgrün */ /* background-color: #daffb3; */ /* wurde als zu gelblich = grell empfunden von Maisun */ /* background-color: #dfecdf; */ /* sieht bei mir abends blau aus */ /* background-color: #daffd3; */ /* Kompromiss? Lue 10.11.2023 */ background-color: #d9f3d9; /* etwas weniger gelblich Lue 28.11.2023 */ } :is(.ok,.gruen) :is(h2,h3,h4,h5,h6) { color: var(--zwei); background-color: transparent; } :is(.unfertig,.wichtig,.frage,.tipp,.ok,.finder-emotion-text,.rot,.blau,.gruen,.info-status) ul { padding-left: 35px; } :is(.unfertig,.wichtig,.frage,.tipp,.ok,.finder-emotion-text,.rot,.blau,.gruen,.info-status) :is(ul,div).document-list { /* padding: 15px; */ /* padding: 5px 0 15px; */ padding: 5px 0; /* margin-bottom: 30px; */ margin-bottom: 15px; } :is(.unfertig,.wichtig,.frage,.tipp,.ok,.finder-emotion-text,.info-status)::before { font-family: "Font Awesome 6 Pro"; font-weight: 600; font-size: 32px; position: relative; top: -38px; float: right; margin: 0 5px -35px; width: 48px; height: 48px; background-color: var(--hintergrund); border-radius: 50%; border: 1.5px solid; } :is(.unfertig,.wichtig,.frage,.tipp,.ok,.info-status).links::before { float: left; } /* mit rotem Schraubenschlüssel und Schraubendreher */ .unfertig::before { content: "\f7d9"; color: #b31b34; text-align: center; } /* mit rotem Ausrufezeichen */ .wichtig::before { color: #b31b34; content: "\21"; text-align: center; } /* mit blauem Fragezeichen */ .frage::before, .finder-emotion-text::before { content: "\3f"; color: var(--eins); text-align: center; } .tipp::before { font-family: "Font Awesome 6 Pro"; font-weight: 400; content: "\f0eb"; color: var(--eins); text-align: center; } /* mit grünem Haken */ .ok::before { content: "\f00c"; color: var(--zwei); text-align: center; } .info-status::before { content: "\f129"; color: var(--eins); text-align: center; } /* ENDE farbige Kästen (mit Ausrufezeichen, Fragezeichen, OK-Haken etc.) */ a.tip[tooltip]:is(:hover,:focus)::after { content: attr(tooltip); padding: 8px 12px; color: var(--zwei); position: absolute; left: 0; top: 100%; white-space: nowrap; z-index: 20; border-radius: 3px; box-shadow: 0px 0px 2px #c0c1c2; } /* Bild in Standardartikeln bei < 768px immer über volle Breite */ .bild, .bild-links { font-size: 1rem; margin-bottom: 30px; color: #7a7a7a; } :is(.bild,.bild-links) img { margin-bottom: 5px; width: 100%; height: auto; /* notwendig für blaue Banner in rehadat-bildung.de Lue 24.08.2023 */ } .row.border-bottom { padding-bottom: 30px; border-bottom: none !important; } footer { border-top: 1px solid var(--bordergrau); line-height: 1.2; } /* +++++++++++++++++++++ */ /* BEGINN VIDEOS + PODCASTS */ .full-width-video, .vertical-video { margin-bottom: 2rem; } .full-width-video video, .vertical-video video { width: 100%; height: 100%; } .youtube-video-wrapper .text-and-player, .rehadat-video-wrapper .text-and-player.vertical { display: flex; flex-direction: column; } /* für Plyr Video Player */ .plyr { --plyr-color-main: #02407f; --plyr-audio-control-color: #fff; --plyr-audio-controls-background: #247cb2; --plyr-video-control-color: #fff; --plyr-video-controls-background: #247cb2; /* #5c96f2; */ /* etwas heller als das Blau der Webservice-Linkboxen */ /* --plyr-video-control-background-hover: #046aa2; --plyr-video-control-color-hover: #fff; */ /* --plyr-video-background: #fff; */ --plyr-video-background: var(--hintergrund); --plyr-control-icon-size: 18px; --plyr-font-size-large: 18px; --plyr-font-size-large: 16px; --plyr-font-size-base: 14px; --plyr-font-size-small: 12px; --plyr-control-spacing: 8px; /* --plyr-captions-text-color: #02407f; --plyr-captions-background: var(--hintergrund); */ --plyr-captions-text-color: #ff0; --plyr-captions-background: #000; /* --plyr-control-radius: 50%; */ /* sieht komisch aus in den Menüs mit Text */ outline: 1px solid var(--bordergrau); } .youtube-video-wrapper .control { text-align: center; /* margin-top: -15px; */ } /* :is(.rehadat-video-wrapper,.youtube-video-wrapper) :is(.full-width-video,.vertical-video) .plyr, .youtube-video.native, .youtube-placeholder:is(.full-width-video,.vertical-video) { outline: 2px solid var(--eins); margin: 8px auto 15px; } */ .youtube-video-wrapper .youtube-placeholder { background-color: var(--hintergrundzwei); background-size: cover; /* evtl. background-size: 100% 100%; wegen ios / Safari */ padding: 8px; margin-bottom: 8px; outline: 2px solid var(--eins); line-height: 1.3; overflow-y: auto; } .youtube-video-wrapper .youtube-placeholder.full-width-video.ratio-16-9 { background-image: url('/system/modules/de.rehadat.projekt2021.frontend/resources/images/youtube-placeholder/youtube-16-9.png'); aspect-ratio: 16/9; } .youtube-video-wrapper .youtube-placeholder.full-width-video.ratio-4-3 { background-image: url('/system/modules/de.rehadat.projekt2021.frontend/resources/images/youtube-placeholder/youtube-4-3.png'); aspect-ratio: 4/3; } .youtube-video-wrapper .youtube-placeholder.vertical-video.ratio-1-1 { background-image: url('/system/modules/de.rehadat.projekt2021.frontend/resources/images/youtube-placeholder/youtube-1-1.png'); aspect-ratio: 1/1; } .youtube-video-wrapper .youtube-placeholder.vertical-video.ratio-4-5 { background-image: url('/system/modules/de.rehadat.projekt2021.frontend/resources/images/youtube-placeholder/youtube-4-5.png'); aspect-ratio: 4/5; } .youtube-video-wrapper .youtube-placeholder.vertical-video.ratio-9-16 { background-image: url('/system/modules/de.rehadat.projekt2021.frontend/resources/images/youtube-placeholder/youtube-9-16.png'); aspect-ratio: 9/16; } .youtube-video-wrapper .youtube-placeholder .title { font-size: 1.25rem; color: var(--eins); } /* ist (evtl. nur für größere Bildschirme erforderlich), damit hochformatige Videos nicht pillarboxed werden */ .youtube-player-wrapper .vertical-video .plyr__poster { background-size: cover; } .youtube-video.native { /* notwendig um bei focus und hover sichtbarem ca. 7px Abstand am unteren Rand zwischen */ /* .youtube-video.native und iframe zu vermeiden */ line-height: 0; } .ratio-16-9 .youtube-video.native { aspect-ratio: 16/9; } .ratio-4-3 .youtube-video.native { aspect-ratio: 4/3; } .ratio-1-1 .youtube-video.native { aspect-ratio: 1/1; } .ratio-4-5 .youtube-video.native { aspect-ratio: 4/5; } .ratio-9-16 .youtube-video.native { aspect-ratio: 9/16; } .youtube-video.native iframe { width: 100%; height: 100%; border: none; outline: none; /* outline: 2px solid var(--petrolzwei); */ /* grünes Modell Bildung */ outline: 2px solid var(--eins); } .podcast-wrapper { margin: 45px auto; outline: 2px solid var(--eins); padding: 0; border-radius: 11px; } .podcast-teaser { padding: 0; position: relative; } .podcast-teaser .titel { background-image: url('/system/modules/de.rehadat.projekt2021.frontend/resources/images/podcast-cover-neu.png'); background-size: 100% 100%; box-shadow: 0 .5rem 1rem rgba(0,0,0,.2); padding: 0; border-radius: 11px; width: 290px; height: 290px; margin: 0 auto; } .podcast-wrapper .podcast-teaser .title { width: unset; height: unset; background-image: none; border-radius: 11px 11px 0 0; } .podcast-teaser :is(.titel,.title) :is(h2,h3,h4) { text-transform: uppercase; background-color: var(--schrifteins); color: var(--hintergrund); font-weight: 400; font-size: 1.45rem; position: relative; top: -15px; left: auto; right: -15px; float: right; padding: 3px 8px; z-index: 2; } .podcast-wrapper .podcast-teaser .title :is(h2, h3, h4) { position: absolute; top: -15px; left: auto; right: -15px; } .podcast-teaser :is(.titel,.title) :is(h2,h3,h4)::after { font-family: "Font Awesome 6 Pro"; font-weight: 300; content: "\f130"; font-size: 1.45rem; padding-left: 5px; } .podcast-wrapper .podcast-teaser .title img { width: 100%; height: auto; border-radius: 11px 0 0 0; } .podcast-teaser .text { padding: 15px 0; width: 100%; } .podcast-wrapper .podcast-teaser .text { padding: 15px; width: 100%; } .podcast-teaser .text :is(h3,h4,h5) { color: var(--schrifteins); } .podcast-teaser .full-width-audio { /* width: calc(100vW - 30px); */ /* height: 290px; */ margin: 0 auto; padding-bottom: 0; } .podcast-teaser .plyr--video { border-top-left-radius: 11px; outline: none; } .podcast-teaser .document-list, .podcast-teaser .document-list li { padding: 0; } .podcast-teaser .plyr--audio { border-radius: 0; } :is(.vertical-video,.full-width-video,.podcast-teaser) .plyr__volume input[type="range"] { min-width: 50px; /* überschreibt 60px */ max-width: 60px; /* überschreibt 90px */ } .youtube-video.native:hover, .plyr:hover, :is(audio,video):is(:hover,:focus,:active), .youtube-video.native iframe:is(:hover,:focus,:active){ box-shadow: 0 0 12px rgba(100, 100, 100, 0.6) !important; } .youtube-video.native:focus-within, .plyr:focus-within, :is(video,audio):focus, .youtube-video.native iframe:focus { outline: 3px solid #046aa2; } /* :is(.plyr--video,.plyr--audio) .plyr__controls { padding: 6px !important; font-size: 1.125rem; } */ /* Variante mit grünem Hintergrund für die Bedien-Elemente */ .plyr-gruen :is(.plyr--video,.plyr--audio) .plyr__controls { background: #40825b !important; } :is(.plyr--video,.plyr--audio) .plyr__control:focus { outline: 4px solid #fff !important; outline-offset: 0 !important; } /* Schieberegler für Video-Fortschritt und Lautstärke, CSS-Tip von https://brennaobrien.com/blog/2014/05/style-input-type-range-in-every-browser.html */ .plyr--full-ui input[type=range]{ -webkit-appearance: none; } /* .plyr--full-ui input[type=range]::-webkit-slider-runnable-track { } */ .plyr--full-ui input[type=range]:focus { outline: none; } .plyr--full-ui input[type=range]:focus::-webkit-slider-runnable-track { outline: 3px solid #fff !important; outline-offset: 0 !important; background-color: #02407f !important; } .plyr--full-ui input[type="range"]::-moz-range-progress { background: #fff7 !important; } .plyr--full-ui input[type="range"]:focus::-moz-range-track { outline: 3px solid #fff !important; outline-offset: 0 !important; background-color: #02407f !important; } /* Einstellung der Geschwindigkeit: Umrandung der Radiobuttons */ .plyr__menu__container .plyr__control[role="menuitemradio"]::before { border: 2px solid; } /* :is(.plyr--video,.plyr--audio) .plyr__caption { font-size: 1rem !important; line-height: 145% !important; } */ .podcast-teaser .plyr--video .plyr__caption { font-size: 1.25rem !important; line-height: 1.3 !important; display: block; } .video-print-placeholder, .audio-print-placeholder { display: none; } .video-print-placeholder::before, .audio-print-placeholder::before { display: none; } /* ENDE VIDEOS */ /* +++++++++++++++++++++* / /* BEGINN EVERVIZ-Grafiken */ .rehadat-everviz { background-color: var(--hintergrund) !important; position: relative; padding-bottom: 0; margin-bottom: 30px; /* outline: 1.5px solid var(--eins); */ } .highcharts-background { fill: var(--hintergrund) !important; } .highcharts-title, .highcharts-title > div > span, .highcharts-subtitle, .highcharts-subtitle > div { font-family: 'Source Sans Pro',arial,sans-serif !important; color: var(--schrift) !important; /* fill: var(--schrift) !important; */ /* auskommentiert von Eva Eisch 22.11.2023 */ background-color: var(--hintergrund) !important; line-height: 1.2 !important; hyphens: auto !important; word-break: break-word; } .highcharts-title, .highcharts-title > div > span { font-weight: 400 !important; font-size: 22px !important; } .highcharts-subtitle, .highcharts-subtitle > div { font-weight: 400 !important; font-size: 16px !important; } .highcharts-label, .highcharts-label text, .highcharts-axis-labels, .highcharts-axis-labels text, .highcharts-axis .highcharts-axis-title, .highcharts-legend-item, .highcharts-legend-item text, .highcharts-credits, .highcharts-credits > tspan { font-family: 'Source Sans Pro',arial,sans-serif !important; color: var(--schrift) !important; fill: var(--schrift) !important; /* auskommentiert von Eva Eisch 22.11.2023, ist aber erforderlich für Legende im Dark Mode. Lue 02.01.2023 */ background-color: var(--hintergrund) !important; font-size: 14px !important; hyphens: auto !important; word-break: break-word; } /* Sonderfälle: Diese Grafiken haben Beschriftungen innerhalb der Säulen. Die Sollen im Tagmodus und im Dark Mode immer weiß sein */ #everviz-jDqBrTwV5 .highcharts-label text, #everviz-C9Dd-wMg9 .highcharts-label text { fill: #fff !important; } .highcharts-legend-item text:hover { font-family: 'Source Sans Pro',arial,sans-serif !important; color: var(--schrift) !important; fill: var(--schrift) !important; background-color: var(--hintergrund) !important; hyphens: auto !important; word-break: break-word; font-size: 14px !important; outline: 1px solid var(--schrift); outline-offset: 1px; } .highcharts-label.highcharts-tooltip > text, .highcharts-label.highcharts-tooltip > text > tspan { font-family: 'Source Sans Pro',arial,sans-serif !important; fill: #4b4a48 !important; } /*.highcharts-credits, .highcharts-credits text, .highcharts-credits tspan, .highcharts-credits tspan tspan { font-family: 'Source Sans Pro',arial,sans-serif !important; fill: var(--eins) !important; font-size: 14px !important; text-decoration: underline; hyphens: manual !important; } */ /*.highcharts-credits:hover, .highcharts-credits text:hover, .highcharts-credits tspan:hover, .highcharts-credits tspan tspan:hover, .highcharts-credits:focus, .highcharts-credits text:focus, .highcharts-credits tspan:focus, .highcharts-credits tspan tspan:focus { font-family: 'Source Sans Pro',arial,sans-serif !important; fill: var(--eins) !important; font-size: 14px !important; text-decoration: none; hyphens: manual !important; } */ .highcharts-menu-item { font-family: 'Source Sans Pro',arial,sans-serif !important; font-size: 14px !important; font-weight: 400; } /* ENDE EVERVIZ-Grafiken */ /* Checkboxen zum Anhaken, die nicht versendet werden */ .form-content.checklist { margin: 30px auto; padding: 15px 8px; border: 2px solid var(--zwei); background: var(--hintergrund); } .form-content.checklist h2 { margin-top: 0; } /* BEGINN Formulare WebForm und Filemaker */ /* BEGINN Rows, Cols etc. für Formulare */ /* This is the style of our error messages */ #mfemail { color: var(--fehler); background-color: transparent; } #mfemail.active { padding: 0.3em; } .form-content { margin: 0 auto; padding: 15px 0; } /* falls wir ein Formular in Zeilen + Spalten aufteilen wollen (z. B. Ausgleichsabgabe Ersparnisrechner) */ .row.form-content { margin: 0; padding: 10px 0 0; } .row.form-content.border-top { border-top: 1px solid var(--bordergrau); padding: 15px 0 0; } .row.form-content :is(.col-md-3,.col-md-4) { padding: 0 0 15px; } .row.form-content :is(.col-md-8,.col-md-9,.col-12) { padding: 0; } :is(.form-opener,.form-content) h2 { font-weight: 600; margin-top: 1.5em; } .form-footer h2 { font-weight: 600; margin-top: 15px; } :is(.form-opener,.form-content,.form-footer) p { font-size: 1.125rem; font-weight: 400; } :is(.form-opener,.form-content,.form-footer) .smallFont, .form-content label .smallFont { font-size: 1rem; font-weight: 400; } :is(.form-opener,.form-content,.form-footer) p.bold, .form-content label { font-weight: 600; margin-bottom: 0; } .form-content label span { font-weight: 400; } /* Ergebnisanzeige im Ersparnisrechner */ .form-content .feld { background-color: transparent; border: none; text-align: left; font-size: 1.125rem; } .form-content p.pflichtfeld-text { font-weight: 700; margin: 0 0 30px; font-size: 1.25rem; } .form-content img.fertig { width: 85px; max-width: 20%; float: left; margin: 8px 15px 8px 0; } /* ENDE Rows, Cols etc. für Formulare */ /* BEGINN eigentliche Formularelemente */ .form-content input:is([type=password],[type=text],[type=email],[type=file],[type=date],[type=datetime-local],[type=time],[type=number],[type=tel],[type=url]) { width: 100%; padding: 12px 20px; margin: 5px 0; display: inline-block; font-weight: 400; color: var(--schrift); border: 2px solid var(--mittelgrau); background-color: var(--hintergrund); } .biggerFont .form-content input:is([type=password],[type=text],[type=email],[type=file],[type=date],[type=datetime-local],[type=time],[type=number],[type=tel],[type=url]) { border-color: var(--schrift); } .form-content input:is([type=password],[type=text],[type=email],[type=file],[type=date],[type=datetime-local],[type=time],[type=number],[type=tel],[type=url]):is(:hover,:focus,:active), .biggerFont .form-content input:is([type=password],[type=text],[type=email],[type=file],[type=date],[type=datetime-local],[type=time],[type=number],[type=tel],[type=url]):is(:hover,:focus,:active) { border: 2px solid var(--schrifteins); outline: 2px solid var(--schrifteins); } /* Formulare: Ausgewählte Datei für input type="file" anzeigen */ .infoform-message { margin-left: 15px; width: 100%; padding: 12px 20px; margin: 8px 0; display: inline-block; border: 2px solid var(--hintergrunddrei); font-weight: 400; color: var(--schrift); background-color: var(--hintergrund); } /* Textarea */ .form-content textarea { width: 100%; padding: 15px; margin: 5px 0; font-weight: 400; color: var(--schrift); background-color: var(--hintergrund); border: 2px solid var(--mittelgrau); } .form-content textarea:is(:hover,:focus,:active) { border-color: var(--schrifteins); outline: 2px solid var(--schrifteins); } /* Checkbox und Radiobutton */ .form-content .group-label { font-weight: 600; margin-bottom: 0; } div:is(.group-cb, .group-rb), /* alte Variante */ .form-content fieldset { /* neue Variante */ margin-bottom: 1em; } .form-content fieldset > legend { font-size: inherit; font-weight: 600; margin-bottom: 0; } .form-content :is(.group-cb, .group-rb) :is(div, p, ul) { margin-top: 5px; margin-bottom: 0; padding-left: 0; } .form-content :is(.group-cb,.group-rb) ul li::before { display: none; } .form-content :is(.group-cb,.group-rb) ul li { padding-bottom: 1em; } .form-content :is(.group-cb,.group-rb) ul li:last-child { padding-bottom: 0; margin-bottom: 8px; /* notwendig für Abstand zwischen Radiobutton / Checkbox und evtl. Fehlermeldung */ } /* The container */ :is(.facet-list,.form-content) :is(.container-cb,.container-rb,.switch) { display: block; position: relative; padding-left: 2.2rem; /* margin-bottom: 5px; */ /* Verkleinerung des Abstands wirkt sich nur innerhalb des Filters der Suche aus */ cursor: pointer; font-weight: 400; line-height: 1.5; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .form-content p > :is(.container-cb,.container-rb) { margin-bottom: 8px; /* notwendig für Abstand zwischen Radiobutton / Checkbox und evtl. Fehlermeldung */ } /* Hide the browser's default checkbox */ :is(.facet-list,.form-content,.accordion.bd-links) input:is([type=checkbox],[type=radio]) { position: absolute; opacity: 0; cursor: pointer; } .switch input { display: block; position: absolute; opacity: 0; cursor: pointer; padding-left: 2.2rem; margin-bottom: 5px; /* Verkleinerung des Abstands wirkt sich nur innerhalb des Filters der Suche aus */ cursor: pointer; font-weight: 400; line-height: 1.5; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .wssortbox.maincol .form-content .container-cb { margin-top: -5px; margin-bottom: 0; } .wssortbox.maincol .form-content .lastCheckbox { margin-bottom: 22px; } /* BEGINN neue Checkbox + Radio Button */ /* Diesen Selektor braucht man, wenn das HTML so aussieht: */ /* :is(.facet-list,.form-content) :is(.container-cb,.container-rb) input ~ strong { */ :is(.facet-list,.form-content,.accordion.bd-links) input:is([type=checkbox],[type=radio]) ~ strong { font-weight: 400; } /* Fette Labels unter "Unsere Empfehlung" */ .facet-list.bold .container-cb input ~ strong { font-weight: 600; } /* :is(.facet-list,.form-content) :is(.container-cb,.container-rb) input:is(:hover, :focus, :active) ~ strong { */ :is(.facet-list,.form-content,.accordion.bd-links) input:is([type=checkbox],[type=radio]):is(:hover, :focus, :active) ~ strong { color: var(--eins); text-decoration: underline; } :is(.facet-list,.form-content,.accordion.bd-links) .container-cb input:disabled:is(:hover, :focus, :active) ~ strong { color: var(--mittelgrau); text-decoration: none; cursor: default; } :is(.facet-list,.form-content,.accordion.bd-links) .container-cb.disabled-cb, :is(.facet-list,.form-content,.accordion.bd-links) .container-cb.disabled-cb:hover { color: var(--mittelgrau); text-decoration: none; cursor: default; } /* :is(.facet-list,.form-content) :is(.container-cb,.container-rb) .checkmark { */ :is(.facet-list,.form-content,.accordion.bd-links) input:is([type=checkbox],[type=radio]) ~ span { position: absolute; top: 2px; left: 0; height: 1.5em; width: 1.5em; background-color: var(--hintergrund); border: 2px solid var(--mittelgrau); } /* :is(.facet-list,.form-content) .container-cb .checkmark { */ :is(.facet-list,.form-content,.accordion.bd-links) input[type=checkbox] ~ span { color: var(--eins); } /* :is(.facet-list,.form-content) .container-rb .checkmark { */ :is(.facet-list,.form-content,.accordion.bd-links) input[type=radio] ~ span { border-radius: 50%; } /* :is(.facet-list,.form-content) :is(.container-cb,.container-rb) input:is(:hover,:focus,:active) ~ .checkmark */ :is(.facet-list,.form-content,.accordion.bd-links) input:is([type=checkbox],[type=radio]):is(:hover,:focus,:active) ~ span { border: 2px solid var(--schrifteins); outline: 3px solid var(--schrifteins); } /* :is(.facet-list,.form-content) .container-cb input:disabled ~ .checkmark, :is(.facet-list,.form-content) .container-cb.disabled-cb:hover .checkmark { */ :is(.facet-list,.form-content,.accordion.bd-links) input[type=checkbox]:disabled ~ span, :is(.facet-list,.form-content,.accordion.bd-links) .container-cb.disabled-cb:hover .checkmark { border: 2px solid var(--mittelgrau); outline: none; } /* Create the checkmark/indicator (hidden when not checked) */ :is(.facet-list,.form-content,.accordion.bd-links) .checkmark::after { /* :is(.facet-list,.form-content) input[type=checkbox] ~ span::after { */ content: ""; position: absolute; display: none; } /* Style the checkmark/indicator */ :is(.facet-list,.form-content,.accordion.bd-links) .container-cb .checkmark::after { left: 0.4em; top: 0.15em; width: 0.5em; height: 1em; border: 2px solid var(--eins); border-width: 0 0.15em 0.15em 0; transform: rotate(45deg); } .form-content .container-rb .checkmark::after { top: 0.17em; left: 0.17em; width: 1em; height: 1em; /* color: var(--hintergrund); */ background-color: var(--eins); border-radius: 50%; /* border: 0.5rem solid var(--schrifteins); */ } /* Show the checkmark when checked */ :is(.facet-list,.form-content,.accordion.bd-links) :is(.container-cb,.container-rb) input:checked ~ .checkmark::after { display: block; } /* BEGINN Checkliste, die angehakte Werte in Cookie speichert */ .form-content.checklist .container-cb input:is(:hover,:focus,:active) ~ strong { color: var(--zwei) !important; text-decoration: underline; } .form-content.checklist .container-cb .checkmark::after { border: 2px solid var(--zwei); border-width: 0 0.15em 0.15em 0; } .form-content.checklist .container-cb input:is(:hover,:focus,:active) ~ .checkmark { box-shadow: 0 0 0 2.5px var(--zwei); } .form-content.checklist .checkmark { border-color: var(--zwei); } /* ENDE Checkliste, die angehakte Werte in Cookie speichert */ /* Checkbox-Variante als An- / Ausschalter in gerundeter Form Quelle: https://www.w3schools.com/howto/howto_css_switch.asp Dafür am Label class="switch" und am Span class="slider" setzen. */ .switch { cursor: pointer; position: relative; display: inline-block; height: 30px; padding-left: 75px; } .switch.small { height: 24px; padding-left: 60px; font-size: 18px; margin-bottom: 0; line-height: 1.2; } .switch.small strong { font-weight: 400; } .switch:is(:hover,:active) { /* color: var(--eins) !important; */ color: var(--schrifteins); text-decoration: underline; } .switch .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--hintergrund); -webkit-transition: .4s; transition: .4s; border-radius: 30px; width: 60px; border: 1px solid; } .switch.small .slider { border-radius: 14px; width: 46px; border: 1px solid; } .switch input:checked ~ .slider { background-color: var(--eins); opacity: 0.65; } .switch .slider:before { position: absolute; content: ""; height: 22px; width: 22px; left: 4px; bottom: 4px; /* background-color: #fff; */ background-color: var(--schrifteins); -webkit-transition: .4s; transition: .4s; border-radius: 50%; border: 1px solid; opacity: 0.65; } .switch.small .slider::before { height: 16px; width: 16px; left: 3px; } /* .switch input:hover ~ .slider { box-shadow: 0 0 1px #333; outline: 5px solid #e9f2f7; opacity: 1; } */ .switch input:is(:hover,:focus,:active) ~ .slider { box-shadow: 0 0 2px var(--schrifteins); outline: 5px solid var(--schrifteins); opacity: 1; } .switch input:is(:hover,:focus,:active) ~ strong { color: var(--eins); text-decoration: underline; } .switch input:is(:hover,:focus,:active) ~ .slider:before { border: 2px solid var(--schrifteins); opacity: 1; } .switch input:checked ~ .slider::before { -webkit-transform: translateX(30px); -ms-transform: translateX(30px); transform: translateX(30px); background-color: var(--hintergrund); opacity: 1; } .switch.small input:checked ~ .slider::before { -webkit-transform: translateX(24px); -ms-transform: translateX(24px); transform: translateX(24px); } .switch input:is(:hover,:focus,:active):checked ~ .slider:before { /* border: 2px solid #fff; */ border: 2px solid var(--hintergrund); } /* Selectbox */ /* select und Combobox (kommt vor in App-Suche) */ .form-content .selectbox, .form-content .ui-combobox .ui-combobox-input { /* Verschwinden des Pfeils */ -webkit-appearance: none; -moz-appearance: none; appearance: none; text-indent: 1px; background-color: var(--hintergrund); border-radius: 0; color: var(--schrift); font-family: "Source Sans Pro"; font-size: 1.125rem; font-weight: 400; line-height: 1.5; width: 100%; padding: 12px 20px; margin: 8px 0; display: inline-block; background-image: url('/system/modules/de.rehadat.projekt2021.frontend/resources/images/angle-down.svg'); background-repeat: no-repeat; background-size: 25px 25px; background-position: calc(100% - 10px); /* border: 2px solid var(--bordergrau); */ border: 2px solid var(--mittelgrau); cursor: pointer; } .biggerFont .form-content .selectbox { font-size: 1.375rem; } .form-content .selectbox:disabled, .form-content .ui-combobox .ui-combobox-input:disabled { /* color: #999; */ color: var(--mittelgrau); background-image: none; cursor: default; } .form-content .selectbox:is(:hover,:focus,:active) { background-image: url('/system/modules/de.rehadat.projekt2021.frontend/resources/images/angle-top.svg'); background-repeat: no-repeat; background-size: 25px 25px; background-position: calc(100% - 10px); border: 2px solid var(--schrifteins); outline: 2px solid var(--schrifteins); } .form-content .selectbox:disabled:hover { background-image: none; border: 2px solid var(--mittelgrau); outline: none; } .form-content .selectbox option { font-family: 'Source Sans Pro',arial,sans-serif; font-size: 1rem; } .biggerFont .form-content .selectbox option { /* font-size: 1.375rem; */ font-family: 'Source Sans Pro',arial,sans-serif; font-size: 0.85em; } .form-content .selectbox option:hover { box-shadow: 0 0 10px 100px #1882a8 inset !important; } .form-content .webform-button { padding: 30px 0; } /* BEGINN Auszeichnung nicht ausgefüllter oder fehlerhafter Formularfelder */ /* :invalid = Browser-Auszeichnung für ungültige Felder: leere required und falsche pattern */ /* input:focus:invalid, */ /* targeted Feld während der Eingabe, wenn falsches pattern (Buchstaben in PLZ) */ /* input[value=""], */ /* input[value=""]:focus:invalid { outline: none; border: 2px solid var(--mittelgrau); } */ /* .errorform, */ /* schlägt auch an, wenn nur gültige, aber noch nicht genug Zeichen eingegeben wurden, z. B. bei Hilfsmittelnummern [0-9\.]{13}: */ /* .form-content input:is([type=password],[type=text],[type=email],[type=file],[type=date],[type=datetime-local],[type=time],[type=number],[type=tel],[type=url]):optional:invalid, */ .form-content input:is([type=password],[type=text],[type=email],[type=file],[type=date],[type=datetime-local],[type=time],[type=number],[type=tel],[type=url]).errorform, .form-content input:is([type=password],[type=text],[type=email],[type=file],[type=date],[type=datetime-local],[type=time],[type=number],[type=tel],[type=url]).errorform:invalid, .form-content input:is([type=password],[type=text],[type=email],[type=file],[type=date],[type=datetime-local],[type=time],[type=number],[type=tel],[type=url]).valid:invalid, .form-content textarea.errorform, .form-content textarea.valid:invalid, .form-content .selectbox.errorform, .form-content .ui-combobox .ui-combobox-input .errorform { line-height: 1.5; background: url('../images/ausrufezeichen.png') no-repeat calc(100% - 12px)/25px 25px; border: 2px solid var(--fehler); outline: 3px dashed var(--fehler); } /* Sonderfalls Checkbox + Radiobutton: zu wenig Platz für Hintergrundbild, nur Border */ /* .form-content input:is([type=checkbox],[type=radio]).errorform + span */ /* .form-content fieldset.errorform input:is([type=checkbox],[type=radio]) ~ span, */ .form-content fieldset.errorform:invalid input:is([type=checkbox],[type=radio]) ~ span, .form-content fieldset.valid:invalid input:is([type=checkbox],[type=radio]) ~ span, .form-content input:is([type=checkbox],[type=radio]).errorform ~ span, .form-content input:is([type=checkbox],[type=radio]).errorform:invalid ~ span, .form-content input:is([type=checkbox],[type=radio]).valid:invalid ~ span, .form-content fieldset.errorform input:is([type=checkbox],[type=radio]):is(.valid,.check,.radio):not(:checked) ~ span { border: 2px solid var(--fehler); outline: 3px dashed var(--fehler); } /* fehlerhaftes Formularfeld mit Fokus */ .form-content input:is([type=password],[type=text],[type=email],[type=file],[type=date],[type=datetime-local],[type=time],[type=number],[type=tel],[type=url]):optional:focus:invalid, .form-content input:is([type=password],[type=text],[type=email],[type=file],[type=date],[type=datetime-local],[type=time],[type=number],[type=tel],[type=url]).errorform:is(:hover,:focus,:active), .form-content input:is([type=password],[type=text],[type=email],[type=file],[type=date],[type=datetime-local],[type=time],[type=number],[type=tel],[type=url]).errorform:focus:invalid, .form-content input:is([type=password],[type=text],[type=email],[type=file],[type=date],[type=datetime-local],[type=time],[type=number],[type=tel],[type=url]).valid:focus:invalid, .form-content input:is([type=checkbox],[type=radio]).errorform:is(:hover,:focus,:active) ~ span, .form-content input:is([type=checkbox],[type=radio]).errorform:focus:invalid ~ span, .form-content fieldset.errorform input:is([type=checkbox],[type=radio]):is(.valid,.check,.radio):not(:checked):is(:hover,:focus,:active) ~ span, .form-content textarea.errorform:is(:hover,:focus,:active), .form-content textarea.valid:focus:invalid, .form-content .selectbox.errorform:is(:hover,:focus,:active), .form-content .ui-combobox .ui-combobox-input .errorform { outline-style: solid; } /* .form-content input:is([type=checkbox],[type=radio]).errorform:is(:hover,:focus,:active) ~ span { border-color: var(--schrifteins); outline: 3px solid var(--schrifteins); } */ /* .form-content textarea.errorform:is(:hover,:focus,:active), .form-content .selectbox.errorform:is(:hover,:focus,:active) { border-color: var(--schrifteins); outline: 2px solid var(--schrifteins); } */ /* Wird benötigt wegen eines Fehlers in validate.js: Wenn eine textarea zuerst gefüllt wird, erhält sie die Klasse valid. Wird danach der Wert wieder entfernt, kommt errorform hinzu, aber valid wird nicht entfernt. */ /* .form-content textarea.valid.errorform, .form-content textarea.valid.errorform:invalid { */ .form-content textarea.valid.errorform { background: url('../images/ausrufezeichen.png') no-repeat calc(100% - 12px)/25px 25px; border-color: var(--fehler) !important; outline: 3px dashed var(--fehler) !important; } /* richtig ausgefüllte Felder kennzeichnen: Nur sinnvoll, wenn pattern angegeben ist und clientseitig geprüft werden kann */ /* Haken nur während der Eingabe anzeigen? */ .form-content input:is([type=password],[type=text],[type=email],[type=file],[type=date],[type=datetime-local],[type=time],[type=number],[type=tel],[type=url]).valid:focus:valid, /* .form-content input:is([type=password],[type=text],[type=email],[type=file],[type=date],[type=datetime-local],[type=time],[type=number],[type=tel],[type=url]):required:focus:valid, */ /* .form-content input:is([type=password],[type=text],[type=email],[type=file],[type=date],[type=datetime-local],[type=time],[type=number],[type=tel],[type=url]):optional:focus:valid, */ .form-content input:is([type=password],[type=text],[type=email],[type=file],[type=date],[type=datetime-local],[type=time],[type=number],[type=tel],[type=url]).errorform:focus:valid, .form-content textarea.errorform:focus:valid, .form-content textarea.valid.errorform:focus:valid, .form-content .selectbox.errorform:focus:valid, .form-content .ui-combobox .ui-combobox-input .errorform:focus:valid { /* wichtig für select */ width: 100%; padding: 12px 20px; margin: 8px 0; display: inline-block; /* Ende select */ line-height: 1.5; background: url('../images/haken.png') no-repeat calc(100% - 12px)/25px 25px; border: 2px solid var(--zwei); outline: 2px solid var(--zwei); } /* .form-content input:is([type=checkbox],[type=radio]).valid:focus:valid ~ span, */ .form-content input:is([type=checkbox],[type=radio]).invalid:checked:focus:valid ~ span, .form-content input:is([type=checkbox],[type=radio]):required:focus:valid ~ span, .form-content input:is([type=checkbox],[type=radio]).errorform:focus:valid ~ span, .form-content fieldset.errorform input:is([type=checkbox],[type=radio]).valid:checked:is(:hover,:focus,:active) ~ span, .form-content fieldset.errorform input:is([type=checkbox],[type=radio]).check:checked:is(:hover,:focus,:active) ~ span { border: 2px solid var(--zwei); outline: 2px solid var(--zwei); } /* Formulare: Bei Fehlern Meldung unterhalb des Eingabefeldes anzeigen */ .errorform-message, :is(.form-opener, .form-content, .form-footer) .errorform-message { color: var(--fehler); font-weight: 600; /* margin-bottom: 1rem; */ /* margin-bottom: 0.5rem; */ } .form-content input:is([type=password],[type=text],[type=email],[type=file],[type=date],[type=datetime-local],[type=time],[type=number],[type=tel],[type=url]).errorform ~ .errorform-message, .form-content input:is([type=password],[type=text],[type=email],[type=file],[type=date],[type=datetime-local],[type=time],[type=number],[type=tel],[type=url]).valid:focus:invalid ~ .errorform-message { display: inline-block; visibility: visible; } /* Fehlermeldung Sonderfall Checkbox + Radiobutton */ .form-content fieldset:is(.group-cb.errorform,.group-rb.errorform) .errorform-message, .form-content fieldset:is(.group-cb.errorform,.group-rb.errorform) input:is([type=checkbox],[type=radio]):focus:invalid .errorform-message { display: inline-block; visibility: visible; } .form-content input:is([type=password],[type=text],[type=email],[type=file],[type=date],[type=datetime-local],[type=time],[type=number],[type=tel],[type=url]).errorform:focus:valid ~ .errorform-message, .form-content textarea.errorform:focus:valid ~ .errorform-message, .form-content .selectbox.errorform:focus:valid ~ .errorform-message { display: none; visibility: hidden; } /* ENDE Auszeichnung nicht ausgefüllter oder fehlerhafter Formularfelder */ /* LEICHTE SPRACHE BEGINN */ /* Größere, fette Schrift für Texte in Leichter Sprache: Newsletter (=Neuigkeiten), Standardartikel, Akkordeon-Artikel usw. */ /* Keine Trennung in Leichter Sprache */ body .biggerFont, body .sl-only { hyphens: none !important; } /* BEGINN Sichtbarkeit steuern bei Leichter / Schwerer Sprache */ .wrapper-sl-only .sl-only, h2.sl-only { display: none; } .biggerFont .wrapper-sl-only .sl-only, .biggerFont h2.sl-only { display: block; } .biggerFont .sl-none, .biggerFont .row.bereich-teaser a .description.sl-none { display: none; } /* ENDE Sichtbarkeit steuern bei Leichter / Schwerer Sprache */ /* Info über SUMM */ #simpleLanguage .sl-info, #simpleLanguage .sl-info strong { font-size: 1.125rem; line-height: 1.5; } .biggerFont .sl-info .fa-book-open-reader { padding-left: 0; padding-right: 10px; color: var(--grueneins); } .biggerFont h1, h1 .biggerFont, .biggerFont h1 :is(strong,em) { font-size: 2.5rem; font-weight: 600; } .biggerFont h2 { font-size: 1.75rem; padding: 30px 0 10px; font-weight: 600; border-bottom: 2px solid var(--bordergrau); margin-bottom: 30px; } .biggerFont h2 strong { font-size: 1.75rem; font-weight: 700; } .biggerFont h3, .biggerFont h3 :is(strong,em) { font-size: 1.5rem; padding: 22px 0 10px; font-weight: 600; } .biggerFont h4, .biggerFont h4 :is(strong,em) { font-size: 1.375rem; padding: 15px 0 10px; font-weight: 600; } .biggerFont :is(h1,h2,h3,h4) strong { font-weight: 700; } .biggerFont, .biggerFont p, p.biggerFont, .biggerFont dd, .biggerFont dd p { font-size: 1.375rem; font-weight: 400; } .biggerFont.bold, .biggerFont .bold, .biggerFont strong, .biggerFont p strong, .biggerFont .bold p, .biggerFont strong p { font-size: 1.375rem; font-weight: 600; line-height: 1.75; } /* fett innerhalb von halbfett */ .biggerFont.bold strong, .biggerFont .bold strong, .biggerFont strong .bold, .biggerFont strong b, .biggerFont b strong, .biggerFont strong strong { font-weight: 700; } .biggerFont dt { font-size: 1.375rem; padding: 30px 0 15px 0; font-weight: 700; } .biggerFont .bild-links-div, .biggerFont .bottom-space, .biggerFont p.bottom-space { /* margin-bottom: 30px; */ padding-bottom: 30px; } .biggerFont :is(ol,ul,dl) { margin-bottom: 1.5em; } .biggerFont hr { margin: 30px 0; border-top: 2px solid var(--bordergrau); } .biggerFont em, .biggerFont :is(h1,h2,h3,h4,p,li,span,dt,dd) em { color: #d74242; /* rot */ font-style: normal; } :is(div,span).biggerFont strong { font-weight: 700; font-style: normal; } .biggerFont p.right { font-size: 1.75rem; border-top: 2px solid var(--bordergrau); text-align: right; padding: 10px 0 0 0; margin: 45px 0 0 0; } .biggerFont :is(.bild,.bild-links) { font-size: 1.25rem; line-height: 1.3; } /* .biggerFont .bild.medium, .biggerFont .bild-links { margin-bottom: 0; } */ .biggerFont :is(.bild-links,.bild.medium) img { width: auto; max-width: 100%; } /* LEICHTE SPRACHE ENDE */ /******************** Ende allgemeiner Formatierungen *****************/ /* SUCHE + NAVIGATION */ /* erste zeile */ header .container { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr auto; } header #searchbarContent { grid-column: 1 / 3; grid-row: 1 / 2; justify-self: center; margin-bottom: 2rem; } header ul li::before { display: none; } header a.nav-link { text-decoration: none; color: var(--schrift); } header a.nav-link:last-child { padding-right: 5px; padding-left: 10px; } header a.nav-link:is(:hover,:focus,:active) { text-decoration: underline; color: var(--eins); } #gridcontainer-navi { /* display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(2, auto); grid-gap: 2px; */ margin: 0; width: 100%; } #gridcontainer-navi > * { padding-top: 10px; } header .logo { grid-column: 1 / 2; grid-row: 2 / 3; } .logo .navbar-brand { padding-top: 12px; border-top: none; text-decoration: none; } .logo .navbar-brand:focus { background-color: var(--hintergrund); } .logo .navbar-brand img { width: 50%; min-width: 150px; background-color: var(--hintergrund); } .logo .navbar-brand:focus img { outline: 2px solid var(--eins); outline-offset: 8px; } .toggle-buttons { grid-column: 2 / 3; grid-row: 2 / 3; justify-self: end; display: flex; margin-right: 7px; } :is(.search-toggle,.menu-toggle) { padding: 15px 0; cursor: pointer; align-self: center; } #searchbarContent .suche-service-flex { display: flex; min-height: 55px; /* erforderlich, damit der Link zur erweiterten Suche auf Handys nicht das Portal-Logo verdeckt */ } #searchbarContent nav .nav { display: none; } .toggle-buttons .navbar-toggler, .toggle-buttons .navbar-toggler button { color: var(--eins); font-size: 1.55rem; border: none; padding-left: 2px; padding-right: 2px; margin-left: 3px; margin-right: 3px; border-radius: 5px; } /* Suche, Menü und Vorlese-Funktion */ .toggle-buttons .navbar-toggler:is(:focus,:active) { outline: 3px solid var(--eins); } .toggle-buttons .navbar-toggler :is(.fa-magnifying-glass,.fa-bars) { padding: 0 0.3rem; margin: 0; } .toggle-buttons .navbar-toggler .fa-magnifying-glass::before { content: "\f00d"; /* Close-Zeichen: X */ font-size: 1.75rem; font-weight: 400; padding: 0px 0.125rem; } .toggle-buttons .navbar-toggler.collapsed .fa-magnifying-glass::before { content: "\f002"; /* Lupe */ font-size: 1.55rem; font-weight: 600; padding: 0px; } .toggle-buttons .navbar-toggler .fa-bars::before { content: "\f00d"; /* Close-Zeichen: X */ font-size: 1.75rem; font-weight: 400; padding: 0px 0.125rem; } .toggle-buttons .navbar-toggler.collapsed .fa-bars::before { content: "\f0c9"; /* 3 horizontale Striche */ font-size: 1.55rem; font-weight: 600; padding: 1.5px 0; } /* Das Suchfeld */ .suchfeld { padding: 0.25rem 0.25rem 0.25rem 0.5rem; width: 250px; height: 2.2rem; /* border: 1.5px solid var(--bordergrau); */ border: 1.5px solid var(--mittelgrau); border-right: none; border-radius: 4px 0 0 4px; margin-right: 0px !important; font-size: 1.125rem; font-weight: 400; } .suchfeld:is(:hover,:focus,:active) { border-color: var(--eins); outline: 5px solid var(--hintergrundzwei); } .suchfeld-submit { width: 2.2rem; height: 2.2rem; border: none; border-radius: 0 4px 4px 0; background-color: #32a852; background-image: var(--gruengradient); margin: -0.25rem 0 0 -0.25rem !important; padding-left: 0.6rem; } .suchfeld-submit:is(:hover,:focus,:active) { background-color: var(--grueneins); background-image: var(--gruengradientaktiv); } .suchfeld-submit .fa-magnifying-glass { color: var(--hintergrund); background-color: transparent; padding-left: 0; font-weight: 400; } .suchfeld-submit:is(:hover,:focus,:active) .fa-magnifying-glass { font-weight: 900; } .suchfeld-submit:is(:hover,:focus,:active) .fa-magnifying-glass::before { background-color: transparent; } #searchbarContent .extended-search-wrapper { display: block; position: absolute; top: calc(2rem + 9.5px); left: 0; width: 100%; text-align: center; } #searchbarContent .extended-search .btn-extended-search { display: inline-block; position: relative; z-index: 5; font-size: 16px; font-weight: 600; height: auto; min-height: 24px; min-width: unset; padding: 0; text-align: center; border-radius:0 0 3px 3px; color: #046aa2; background-color: var(--hintergrund); text-decoration: none; border: none; border-bottom: 1.5px solid var(--eins); } #searchbarContent .extended-search .btn-extended-search .link-text { padding: 3px 15px; } #searchbarContent .extended-search .btn-extended-search:is(:hover,:focus,:active) { background-image: none; color: var(--hintergrund); background-color: var(--eins); outline: 3px solid transparent; /* für benutzerdefinierte Farbeinstellungen */ } #searchbarContent .extended-search .btn-extended-search::before { content: ''; width: 12.5px; height: 100%; position: absolute; transform: skewX(25deg); border: none; border-left: 1.8px solid var(--eins); top: 0; left: -7px; border-bottom-left-radius: 4px; background-color: var(--hintergrund); opacity: 1; } #searchbarContent .extended-search .btn-extended-search::after { content: ''; width: 12.5px; height: 100%; position: absolute; transform: skewX(-25deg); border: none; border-right: 1.8px solid var(--eins); top: 0; right: -7px; border-bottom-right-radius: 4px; background-color: var(--hintergrund); opacity: 1; } #searchbarContent .extended-search .btn-extended-search:is(:hover,:focus,:active)::before, #searchbarContent .extended-search .btn-extended-search:is(:hover,:focus,:active)::after { background-color: var(--eins); } #searchbarContent .extended-search .btn-extended-search:is(:hover,:focus,:active) i { font-weight: 900; } /* eigentliche Navigation */ /* Alternative Navi von https://bootsnipp.com/snippets/35p8X */ header #main-navigation { grid-column: 1 / 3; grid-row: 3 / 4; /* border-bottom: 1px solid var(--hintergrunddrei); margin: 0 15px; */ min-height: unset; } .mainmenu { background-color: var(--hintergrund); color: var(--schrift); margin: 0; padding: 0; min-height: 20px; width: 100%; hyphens: manual; } #navbarSupportedContent { margin: 0; } .navbar-nav .dropdown-menu { padding: 0; margin: 0; border: 0 solid rgba(0,0,0,.15); border-radius: 0; box-shadow: none; /* !important; */ background-color: var(--hintergrund); } .navbar-nav li::before { display: none; } .navbar-nav, .navbar-nav ul, .left-menu, .left-menu ul { list-style: none; padding-left: 0; } .navbar-nav a { color: var(--schrift); /* background-color: var(--hintergrund); */ background-color: transparent; font-size: 20px; padding: 12px; display: block; text-decoration: none; border-top: 1px solid var(--hintergrunddrei); } /* Sonderfall Leichte Sprache mit Leichte Sprache-Icon vor dem Navigationstext */ .navbar-nav a .fa-book-open-reader { padding: 2px 10px 2px 0; color: var(--eins); background-color: transparent; font-weight: 600; } /* aktiver / gehoverter Menüpunkt mit anderer Hintergrundfarbe */ /* .navbar-nav a.active, */ /* Hintergrund in allen Ebenen hervorheben */ .navbar-nav > li > a.active, /* Hintergrund nur bei der 1. Ebene hervorheben */ .navbar-nav a:is(:hover,:focus,:active) { color: var(--schrift); background-color: var(--hintergrunddrei); /* outline: 0; */ } .navbar-nav a:focus { outline: 3px solid var(--eins); } /* aktiver Punkt in allen Ebenen */ .navbar-nav a.active { font-weight: 600; color: var(--eins); background-color: transparent; } /* aufgeklappter Punkt */ .navbar-nav li.dropdown.show > a.dropdown-toggle { font-weight: 400; } .navbar-nav > li > a { padding-left: 24px; } .navbar-nav > li > ul > li > a { padding-left: 36px; } .navbar-nav > li > ul > li > ul > li > a { padding-left: 48px; } .navbar-nav > li > ul > li > ul > li > ul > li > a { padding-left: 60px; } /* Pfeil abwärts */ .dropdown .dropdown-toggle::after { font-family: "Font Awesome 6 Pro"; font-weight: 900; content: "\f078"; border: none; color: var(--eins); /* background-color: var(--hintergrund); */ background-color: transparent; display: inline-block; padding-right: 15px; float: right; } /* Pfeil aufwärts */ .dropdown.show > .dropdown-toggle::after { -webkit-transform: scaleY(-1); transform: scaleY(-1); } /* Bildschirm-Icon im Portale-Submenü der Hauptnavigation */ .navbar-nav .portal .icon { float: left; } .navbar-nav .fa-desktop { color: var(--eins); background-color: transparent; padding: 0 15px 0 0; } /* Trennstrich vor Portale-Menü auf Kleingeräten nicht anzeigen: */ .navbar-nav > li > .divider { display: none; } /* ENDE NAVIGATION */ /******************************************************************** BEGINN gemeinsame Formatierung für Nummerierung in Bühne + Webservice *********************************************************************/ /* sicherheitshalber alle alten und neuen Varianten von Bullets unsichtbar machen */ .carousel ul > li.carousel-item::before, .carousel .carousel-indicators li::before, .carousel-indicators.numbers li::before, .pagination-numbers li::before { display: none; } /* Blättern in WS-Ergebnisseiten + in Listen von Lexikonartikeln, falls Blättern eingestellt wurde */ .pagination-numbers { display: flex; /* padding: 25px 0 10px; */ padding: 0; margin: 1.5rem 0; } /* Slider-Liste positionieren - wird von Varianten tw. überschrieben */ .carousel-indicators.numbers { /* alternativ: */ /* position: static; justify-content: center; */ /* oder left */ /* display: flex; */ /* evtl. an einigen Stellen notwendig */ width: 100%; /* führt zu Zentrierung */ margin: 15px 0 0; } .carousel-indicators.numbers li, .pagination-numbers li { /* box-sizing: border-box; float: left; */ text-indent: 0; text-align: center; padding: 0; margin: 0 0.6em 0 0; list-style-type: none; width: 2.75rem; height: 2.75rem; border: none; border-radius: 100%; /* notwendig, weil sonst das a im li eckig wird */ transition: all 0.25s ease; font-size: 1.6rem; font-weight: 600; background-color: var(--hintergrund); line-height: 1.7; opacity: 1; } .pagination-numbers li:is(.prev,.next).list-page { display: none; } .carousel-indicators.numbers li:last-child, .pagination-numbers li:last-child { margin-right: 0; } .carousel-indicators.numbers li a, .pagination-numbers li a { outline: 2px solid var(--hintergrunddrei); outline-offset: 0; border-radius: 100%; color: var(--schrift); text-decoration: none; width: inherit; height: inherit; display: inline-block; } .carousel-indicators.numbers li.active a, .pagination-numbers li.active { outline: 2px solid var(--schrift); font-weight: 700; } .carousel-indicators.numbers li:hover a, .carousel-indicators.numbers li a:hover { color: var(--eins); font-weight: 700; outline: 2px solid var(--eins); } .carousel-indicators.numbers li a:focus { color: var(--eins); text-decoration: none; outline: 3.5px solid var(--eins); outline-offset: 0; } .pagination-numbers li:hover a, .pagination-numbers li a:hover { color: var(--zwei); text-decoration: none; outline: 2px solid var(--zwei); } .pagination-numbers li a:focus { color: var(--zwei); text-decoration: none; outline: 3.5px solid var(--zwei); outline-offset: 0; } /* << < > >> mit FontAwesome-Icons */ .pagination-numbers li i { padding-left: 0; } .pagination-numbers li.disabled { display: none !important; } /******************************************************************** ENDE gemeinsame Formatierung für Nummerierung in Webservice + Bühne *********************************************************************/ /* BEGINN News-Seite */ /* div für einzelne News */ .nachricht { margin-bottom: 45px; /* Schafft Platz nach jeder Nachricht. B.Luessem 28.08.2018 */ clear: both; } .nachricht .imageWithCaption { margin: 0; padding: 0; width: 100%; } .nachricht .imageWithCaption { margin: 5px 0 15px; } .nachricht .imageWithCaption img { width: 100%; height: auto; overflow: hidden; margin: 0; padding: 0; } .nachricht .imageWithCaption .imageCaption { width: 100%; font-size: 1rem; line-height: 1.2; display: inline-block; padding-top: 8px; } /* .nachricht p:nth-of-type(2), */ .nachricht :is(ul,div) { /* overflow: hidden; */ /* gesamte Liste/gesamter 2. Absatz neben dem Bild */ clear: left; /* Liste / 2. Absatz unterhalb des Bildes beginnen */ } /* ENDE News-Seite */ /* BEGINN Umfrage (blauer Balken) */ .margin-umfrage { margin: 0; } .padding-umfrage { padding: 0; } .bg-umfrage { background-color: #02407f; background-image: var(--blaugradient); color: #fff; /* bewusst fester Wert, soll auch im Dark Mode weiß sein */ } .gridcontainer-umfrage { display: grid; grid-template-columns: 100%; grid-template-rows: auto auto; width: 100%; padding: 0; padding-left: 20px; margin: 0; position: relative !important; background: url("/system/modules/de.rehadat.projekt2021.frontend/resources/images/sprechblase.svg") no-repeat calc(50% + 100px) calc(100% + 10px)/auto 235px; } /* linke box */ .umfrage-eins { grid-column: 1 / span 1; grid-row: 1; padding-right: 15px; padding-top: 40px; margin-bottom: -40px; z-index: 5; } .umfrage-text h2 { font-size: 2rem; font-weight: 200; margin-bottom: 20px; } /* rechte box */ .umfrage-zwei { grid-column: 1; grid-row: 2; min-height: 160px; padding-right: 15px; } .umfrage-zwei-inner { margin-top: 0; padding-top: 50px; margin-bottom: 10px; } .umfrage-zwei-inner img { width: 20px; height: 20px; } /* ENDE Umfrage */ /* BEGINN Logos */ .bg-logos { background-color: #fff; border-top: 1px solid #dee2e6; } .container.logos { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 45px; padding: 30px 15px; } .container.logos a img { max-width: 220px; min-height: 80px; } .container.logos a:focus img { outline: 2px solid var(--eins); outline-offset: 8px; } /* ENDE Logos */ /* Start des Footers */ /* Start der 3 Spalten */ .bg-footer { background-color: var(--hintergrund); } .gridcontainer-footer { width: 100%; margin: 15px auto 10px; } .gridcontainer-footer a, .gridcontainer-footer .text { font-size: 1rem; font-weight: 400; line-height: 2; color: var(--schrift); display: block; /* sorgt bei allen außer IE 11 dafür, dass Text und Grafik als Block Trefferflaeche bieten. B.Luessem 22.08.2018 */ } .gridcontainer-footer a:focus { background-color: transparent; } .gridcontainer-footer h3 a { font-size: 1.25rem !important; line-height: 1.3; font-weight: 400; text-decoration: none; color: var(--schrift); } .gridcontainer-footer h3 .heading { display: none; } .gridcontainer-footer ul { list-style-type: none; margin-left: 0; padding-left: 0; } .gridcontainer-footer a { text-decoration: none; } .gridcontainer-footer a:is(:hover,:focus,:active) { text-decoration: underline !important; cursor: pointer !important; color: var(--eins); } .gridcontainer-footer a .fa-chevron-down { color: var(--eins); float: right; padding-top: 7px; } .gridcontainer-footer p { margin-bottom: 0; } #spalte1, #spalte2, #spalte3 { padding: 0; } #spalte3 img.telefon { width: 16.5px; height: 24px; margin-right: 20px; } #spalte3 img.haus { width: 24px; height: 23px; margin-right: 11px; } #spalte3 img.brief { width: 22px; height: 14px; margin-right: 13px; } #accordion-footer div :is(ul,div).smallFont { display: none; } #accordion-footer div:target :is(ul,div).smallFont { display: block; } /* Start Versionen in Leichter Sprache und Gebärdensprache */ .alternative-formats-footer ul { list-style-type: none; display: flex; padding: 15px 0 5px; justify-content: center; } .alternative-formats-footer .languages ul li { margin: 0 4px; text-align: center; width: 80px; max-width: 80px; } .alternative-formats-footer .networks ul li { margin: 0 4px; text-align: center; width: 48px; max-width: 48px; } .alternative-formats-footer ul li a { color: var(--eins); background-color: var(--hintergrund); text-decoration: none; display: block; padding: 5px 0 2px; } .alternative-formats-footer ul li a:is(:hover,:focus,:active) { text-decoration: underline; cursor: pointer !important; } .alternative-formats-footer ul li a:focus { outline: 2px solid; } .alternative-formats-footer ul li .icon { display: block; font-size: 1.125rem; margin-bottom: 5px; } .alternative-formats-footer ul li.lang-switch a:is(:hover,:focus,:active) .lang-switch-icon, .alternative-formats-footer ul li a:is(:hover,:focus,:active) i { transform: scale(1.1); } .alternative-formats-footer .networks ul li .icon :is(.fa-instagram,.fa-instagram-square) { color: transparent; background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); background: -webkit-radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); background-clip: text; -webkit-background-clip: text; } .alternative-formats-footer .networks ul li .icon .fa-facebook { color: #4267b2; } .alternative-formats-footer .networks ul li .icon .fa-linkedin { color: #0e76a8; } .alternative-formats-footer .networks ul li .icon .fa-youtube { color: #f00; } .alternative-formats-footer ul li .text { font-size: 1rem; } .alternative-formats-footer .networks ul li .text { display: none; } .alternative-formats-footer ul li i { color: var(--eins); font-size: 2rem; padding: 0; background-color: var(--hintergrund); } .alternative-formats-footer ul li.lang-switch a .lang-switch-icon { text-decoration: none !important; border-radius: 100%; background-color: var(--eins); color: var(--hintergrund); font-size: 1.25rem; font-weight: 600; margin: 0 auto 5px; padding-top: 3px; width: 2rem; height: 2rem; display: block; } /* Start der letzten Zeile */ .padding-lastRowFluid, .padding-lastRow { padding: 0; } .bg-last-row { background-color: #247cb2; background-image: var(--mittelblaugradient); } .gridcontainer-lastRow { display: grid; grid-template-columns: 1fr; grid-template-rows: repeat(3, auto); grid-gap: 0px; margin: 0 auto; padding: 20px 0 0 20px; width: 100%; color: var(--hintergrund); } .gridcontainer-lastRow > div { font-size: 1rem; color: #fff; } .lastRow-one { grid-column: 1 / 2; grid-row: 1 / 2; padding-bottom: 15px; } .lastRow-two { grid-column: 1 / 2; grid-row: 2 / 3; padding-bottom: 25px ; padding-right: 10px; } .lastRow-three { grid-column: 1 / 2; grid-row: 3 / 4; justify-self: end; align-self: end; position: fixed; bottom: 0; right: 0; } .gridcontainer-lastRow > div img { break-inside: avoid !important; } .lastRow-three a { background-color: var(--hintergrund); text-align: center; break-inside: avoid !important; display: block; width: 3em; height: 3em; border-radius: 100%; color: var(--schrifteins); } .lastRow-three a .fa-arrow-up-to-line { font-size: 2rem; padding-left: 0; padding-top: 0.5rem; } .lastRow-three a:is(:hover,:focus,:active) { color: var(--hintergrund); background: var(--schrifteins); } /****************** Ende HOMEPAGE ***************/ /****************** Beginn ÜBRIGE INHALTE ***************/ /* Haupt-Inhaltsspalte mit max. 760px Breite */ .single-col, .single-col-short { margin: 0 auto; padding: 15px; width: 100%; /* notwendig für "schmale" Inhalte, die ausschließlich "kurze Zeilen" besitzen */ } .row.brotkrume { display: none; } p.brotkrume { font-size: 1rem; font-weight: 600; line-height: 1.35; margin: 30px 10px 30px 15px; } p.brotkrume a, p.brotkrume .navigation-level { color: var(--schrift); font-weight: 400; text-decoration: none; } p.brotkrume .navigation-level { margin-right: 8px; } p.brotkrume a:is(:hover,:focus) { color: var(--eins); text-decoration: underline; background-color: transparent; } p.brotkrume i { padding-right: 8px; color: var(--eins); } /* Vergrößerungsfunktion für Bilder in modalem Dialog Im Statistikportal gibt es eine Seite mit mehreren vergrößerten Bildern, die unterschiedliche IDs brauchen*/ #zoomed-image, #zoomed-image-a, #zoomed-image-b, #zoomed-image-1, #zoomed-image-2 { width: 85%; max-width: 1200px; } :is(#zoomed-image,#zoomed-image-a,#zoomed-image-b,#zoomed-image-1,#zoomed-image-2,#search-modal) button.close { color: var(--hintergrund); background-color: var(--eins); position: absolute; left: calc(100% - 22px); bottom: calc(100% - 22px); border-radius: 50%; padding: 5px 12px 7px; border: 3px solid var(--hintergrund); opacity: 0.85; width: auto; height: auto; } :is(#zoomed-image,#zoomed-image-a,#zoomed-image-b,#zoomed-image-1,#zoomed-image-2,#search-modal) button.close:not(:disabled):not(.disabled):is(:focus,:hover,:active) { opacity: 1; } :is(#zoomed-image,#zoomed-image-a,#zoomed-image-b,#zoomed-image-1,#zoomed-image-2) .modal-content img { width: 100%; height: auto; } /* Link zum Öffnen der vergrößerten Ansicht */ a.open-zoom { display: block; cursor: zoom-in; color: var(--mittelgrau); text-decoration: none; } a.open-zoom:is(:hover,:focus,:active) { outline: none; color: var(--eins); border: none; text-decoration: none; } a.open-zoom:is(:hover,:focus,:active) img { box-shadow: 0 2px 18px rgba(0, 0, 0, 0.25); } /* Ende Vergrößfunktion für Bilder in modalem Dialog */ /* Webservice-Linkbox für Bereichs- / Verteiler-Seiten (Field-Article) */ .webservice-box { border: 2px solid var(--eins); margin: 30px 0; padding: 8px; display: block; /* erforderlich für ICF-Webservice-Box in den Items, sonst wird display: flex von .row angewendet */ } .webservice-box .webservice-links { width: 100%; } .webservice-box .document-list { margin: 0; padding: 0; } /* falls es nicht der erste Link in der Webservice-Box ist und class="full-col" hat: */ .webservice-box .full-col:not(:first-child) { border-top: 1px solid var(--eins); padding-top: 15px; } /* Allgemein/Portal-Teaser oben/links mit Bild, unten/rechts Überschrift, Text, Link */ .row.portal-teaser { margin-right: -15px; margin-left: -15px; margin-bottom: 45px; padding: 0; } .image-boxen-outer { margin: 30px -15px; } .image-boxen-outer > div { padding-left: 15px; padding-right: 15px; } .image-box-outer { margin-top: 15px; margin-bottom: 15px; border: 1px solid #ccc; } .image-box-outer.landscape { /* width: 100%; padding-left: 15px; padding-right: 15px; */ margin-left: 15px; margin-right: 15px; width: calc(100% - 30px); } .image-box-outer a, .image-box-outer.landscape a { color: var(--schrift); text-decoration: none; display: flex; /* flex-direction: column; */ /* Lue 11.09.2024: nach BITV-Test Reihenfolge zu 1. Text + 2. Bild geändert */ flex-direction: column-reverse; height: auto; } .image-box-outer a:is(:hover,:focus,:active), .image-box-outer.landscape a:is(:hover,:focus,:active) { /* Dieser Box-Shadow ist etwas ausgeprägter nach links, rechts und unten als an anderen Stellen: */ box-shadow: 0 .5rem 1rem rgba(0,0,0,.2); color: var(--schrift); background-color: var(--hintergrund); } /* .image-box-outer a:is(:hover, :focus, :active), .image-box-outer.landscape a:is(:hover, :focus, :active) img { transform: scale(1.01); } */ .image-box-outer a:focus, .image-box-outer.landscape a:focus { outline: 2px solid var(--eins); outline-offset: 0; } /* notwendig für die Teaser in talentplus Standard-Artikeln */ .image-box-top img { width: 100%; } .image-box-bottom { padding: 15px; /* box-shadow: inset 1px 0 0 #ccc, inset 0 -1px 0 0 #ccc, inset -1px 0 0 #ccc; */ position: relative; min-height: 220px; display: flex; flex-direction: column; } .col-md-6.blue-icon { padding-left: 0; padding-right: 0; /* display: inline-block; */ height: 220px; width: 100%; } .col-md-6.blue-icon img { object-fit: cover; height: 100%; width: 100%; } .col-md-6.hover-shadow { padding: 10px 15px; /* box-shadow: inset 1px 0 0 #ccc, inset 0 -1px 0 0 #ccc, inset -1px 0 0 #ccc; */ min-height: 220px; height: 100%; display: flex; flex-direction: column; } /* a:is(:hover,:focus,:active) :is(.image-box-bottom,.col-md-6.hover-shadow) { box-shadow: none; } */ .col-md-6.hover-shadow h2, .col-md-6.hover-shadow .headline, .image-box-bottom h2, .image-box-bottom .headline { font-size: 1.55rem; font-weight: 400; color: var(--schrift); line-height: 1.3; margin-bottom: 5px; } :is(.col-md-6.hover-shadow,.image-box-bottom) .description { margin-bottom: 9px; flex-grow: 1; } a :is(.col-md-6.hover-shadow,.image-box-bottom) .link { color: var(--zwei); } :is(.col-md-6.hover-shadow,.image-box-bottom) .link .icon i { padding-left: 0; padding-right: 10px; } a:is(:hover,:focus) :is(.col-md-6.hover-shadow,.image-box-bottom) .link .text { text-decoration: underline; } /* Bereichs-Teaser */ .row.bereich-teaser { padding: 30px 0 0; margin: 0; display: block; } .row.bereich-teaser.simple-language, .biggerFont .row.bereich-teaser { padding-top: 0; padding-bottom: 15px; margin-bottom: 15px; } .row.bereich-teaser a { text-decoration: none; display: block; } .row.bereich-teaser a:is(:hover,:focus,:active) { /* Dieser Box-Shadow ist etwas ausgeprägter nach links, rechts und unten als an anderen Stellen: */ box-shadow: 0 .5rem 1rem rgba(0,0,0,.2); text-decoration: none; background-color: transparent; outline: none; } .row.bereich-teaser.simple-language a:is(:hover,:focus,:active), .biggerFont .row.bereich-teaser a:is(:hover,:focus,:active) { /* sieht aus wie ein grüner Border */ box-shadow: inset 4px 0 0 var(--zwei), inset 0 -4px 0 0 var(--zwei), inset -4px 0 0 var(--zwei), inset 0 4px 0 0 var(--zwei); border: none; outline-offset: 0; } .row.bereich-teaser .col-sm-12 { padding: 15px 0; } .row.bereich-teaser.simple-language .col-sm-12, .biggerFont .row.bereich-teaser .col-sm-12 { padding: 15px 0; } .row.bereich-teaser .col-md-4.col-lg-3 { float: left; padding: 15px 15px 15px 0; } .row.bereich-teaser.simple-language .col-md-4.col-lg-3m, .biggerFont .row.bereich-teaser .col-md-4.col-lg-3 { padding-bottom: 5px; font-size: 1rem; color: #7a7a7a; } .row.bereich-teaser .col-md-8.col-lg-9 { display: inline; float: right; padding: 15px 15px 15px 0; margin-bottom: 30px; } .row.bereich-teaser.simple-language .col-md-8.col-lg-9, .biggerFont .row.bereich-teaser .col-md-8.col-lg-9 { padding-left: 15px; padding-top: 15px; padding-bottom: 15px; } .row.bereich-teaser img { width: 100%; max-width: 200px; height: auto; box-shadow: 0 0 10px rgba(138, 138, 138, 0.3); } .row.bereich-teaser img.simple-language { box-shadow: none; margin: 15px; } .biggerFont .row.bereich-teaser img { margin-left: 5px; } .row.bereich-teaser a:is(:hover,:focus,:active) img { box-shadow: none; } .row.bereich-teaser a .headline, .row.bereich-teaser .headline { display: block; font-size: 1.25rem; font-weight: 600; color: var(--schrift); /* line-height: 33px; */ line-height: 1.2; margin-top: -8px; } .biggerFont .row.bereich-teaser a .headline, .biggerFont .row.bereich-teaser .headline, .biggerFont .row.bereich-teaser .headline abbr { font-size: 1.5rem; margin-top: 5px; margin-bottom: 8px; } .biggerFont .row.bereich-teaser a .headline em, .biggerFont .row.bereich-teaser .headline em { color: #d74242; font-weight: 600; font-style: normal; } .row.bereich-teaser a .description { color: var(--schrift); display: block; padding: 0 0 10px; } .row.bereich-teaser a .description ul { padding-left: 20px; margin-bottom: 0; } .row.bereich-teaser a .description ul li { padding-bottom: 5px; } .row.bereich-teaser a .link { color: var(--zwei); } .row.bereich-teaser.simple-language a .link, .biggerFont .row.bereich-teaser a .link { text-decoration: underline; } .row.bereich-teaser a:is(:hover,:focus,:active) .link { text-decoration: underline; } .row.bereich-teaser.simple-language a:is(:hover,:focus,:active) .link, .biggerFont .row.bereich-teaser a:is(:hover,:focus,:active) .link { text-decoration: none; } /* Kategorien-Filter für dynamische Liste, benutzt beim Lexikon */ .filterbox.categories {} .filterbox.categories .btn.btn-solid.li-label { display: none; } .filterbox.categories ul { font-size: 1.375rem; font-weight: 400; float: left; line-height: 45px; padding-left: 0; margin-left: 0; margin-top: 15px; } .filterbox.categories ul li { list-style-type: none; float: left; margin-right: 5px; width: 50px; height: 54px; margin-bottom: 0 !important; } .filterbox.categories ul > li::before { display: none; } /* Buttons und Links im Button-Look - übernommen von button.btn-solid, a.btn-solid */ .filterbox.categories ul li a { color: var(--zwei); font-size: 1.375rem; font-weight: 400; border-radius: 8px; background-color: var(--hintergrund); cursor: pointer; text-decoration: none; padding: 0; text-align: center; display: block; } .filterbox.categories ul li.active a { color: var(--hintergrund); font-weight: 400; border-radius: 8px; background-color: #32a852; background-image: var(--gruengradient); border: none; } .filterbox.categories ul li a:is(:hover,:focus,:active), .filterbox.categories ul li.active a:is(:hover,:focus,:active) { width: auto; background-color: var(--grueneins); background-image: var(--gruengradientaktiv); color: var(--hintergrund); } .filterbox.categories ul li .li-label { font-weight: 600; text-transform: uppercase; } .filterbox.categories ul li .li-count { font-weight: 300; } /* Lexikon-Vorspann: Großer Buchstabe */ #lexikon-buchstabe { font-size: 45px; font-weight: 600; display: block; margin-bottom: 30px; } /* Dynamische Liste, benutzt für Artikelliste des Lexikons */ ul.list-entries { padding-left: 0; } ul.list-entries li.list-entry { list-style-type: none; } ul.list-entries li.list-entry::before { display: none; } ul.list-entries li.list-entry a { text-decoration: none; } ul.list-entries li.list-entry a:is(:hover,:focus,:active) { outline: 1px solid var(--zwei); outline-offset: 3px; } /* verhindert einen Zeilenumbruch zwischen Linktext und Pfeil */ ul.list-entries li.list-entry i { display: inline; } ul.list-entries li.list-entry .lexiconarticle.display a .fa-arrow-right, ul.list-entries li.list-entry .lexiconarticle.display a:is(:hover,:focus,:active) .fa-arrow-right { text-decoration: none; } /* Graue Titelzeile der Lexikon-Artikel */ .lex-title-prefix { color: #777; font-weight: 400; line-height: 1.2; } /* Akkordeon-Seiten */ .akkordeon { /* margin-top: 30px; */ /* sieht beim einzelnen Akkordeon mit Text davor besser aus */ margin-top: 0; /* ermöglicht den optisch unsichtbaren Anschluss eines 2. Akkordeons */ } .akkordeon .card { border: none; border-top: 1px solid var(--hintergrunddrei); } .akkordeon .card.last { border: none; border-top: 1px solid var(--hintergrunddrei); /* border-bottom: 1px solid #ddd; */ /* sieht nicht gut aus, wenn das Akkordeon als letztes Element unmittelbar über der Linie steht, die die Spalte abschließt. */ } .akkordeon .card-header { border-bottom: none; background-color: var(--hintergrund); padding: 15px 0; } .akkordeon .card-header :is(h2,h3,h4,h5) { margin-bottom: 0; clear: both; display: flex; } a.anchor-link::after { text-decoration: none; margin-left: -0.5em; margin-right: 0; display: inline-flex; content: '#'; opacity: 0; color: var(--zwei); background-color: var(--hintergrund); } .card-header a.anchor-link::after { line-height: 1.5; } .single-col a.anchor-link:is(:focus,:active) { outline: none; } .podcast-teaser .titel :is(h2,h3,h4) a.anchor-link::after, .podcast-teaser .title :is(h2,h3,h4) a.anchor-link::after { color: var(--hintergrund); background-color: var(--schrifteins); margin-left: -0.1em; margin-right: 0.1em; } :is(h2,h3,h4,h5,h6):hover a.anchor-link::after, .card-header:hover a.anchor-link::after, .para :is(h2,h3,h4,h5,h6):hover a.anchor-link::after, :is(h2,h3,h4,h5,h6) a.anchor-link:is(:focus,:active)::after, :is(.card-header,.para) a.anchor-link:is(:focus,:active)::after { opacity: 1; } .akkordeon :is(.btn-link,.accordion-button) { color: var(--schrifteins); font-size: inherit; text-decoration: none; padding: 0; white-space: normal; text-align: left; display: block; width: 100%; } .akkordeon :is(.btn-link,.accordion-button).collapsed { color: var(--schrift) !important; } .akkordeon button:is(.btn-link,.accordion-button):is(:hover,:focus,:active) .text, .akkordeon button:is(.btn-link,.accordion-button).collapsed:is(:hover,:focus,:active) .text { color: var(--schrifteins) !important; text-decoration: underline; font-size: inherit; } .akkordeon button:is(.btn-link,.accordion-button).collapsed, .akkordeon button:is(.btn-link,.accordion-button):not(.collapsed) { background-color: inherit; box-shadow: none; } .akkordeon :is(.btn-link,.accordion-button) .text { display: inline-block; width: calc(100% - 1.875rem); } .akkordeon :is(.btn-link,.accordion-button) .icon { float: right; padding-top: 0; color: var(--eins); } .akkordeon :is(.btn-link,.accordion-button) .fa-chevron-down { padding-left: 2px; /* beim Standardwert 10px kommt es an einer Stelle in den FAQ sonst zu einem Zeilenumbruch */ } /* Akkordeon geöffnet */ .akkordeon :is(.btn-link,.accordion-button) .fa-chevron-down::before { font-family: "Font Awesome 6 Pro"; font-weight: 900; content: "\f077"; } /* Akkordeon geschlossen. Frech: Wir behalten den Namen bei, verwenden aber den Code für .fa.fa-angle-up */ .akkordeon :is(.btn-link,.accordion-button).collapsed .fa-chevron-down::before { font-family: "Font Awesome 6 Pro"; font-weight: 900; content: "\f078"; } .akkordeon :is(.card-body,.accordion-body) { /* padding: 0 2px 10px; */ /* die 2px werden vielleicht für border/outline an einigen Stellen gebraucht, zerstören aber die normale Spaltenbreite Lue 29.03.2024 */ padding: 0 0 10px; } .para :is(h2,h3,h4,h5,h6) { clear: both; } /* Kein Abstand falls Nicht-Akkordeon-Variante gewählt wurde */ .para .card-body { padding: 0; } .para .card-body.bildquellen { overflow: hidden; } .akkordeon .card.last.bottomBorder { border-bottom: 1px solid var(--hintergrunddrei); margin-bottom: 15px; } .para .card-body.bottomBorder { border-bottom: 1px solid var(--hintergrunddrei); /* margin-bottom: 15px; */ /* margin-bottom: 2rem; */ margin-bottom: 45px; padding-bottom: 15px; } /* Bild in

in Fließtext eingebunden - kann beliebige Breite haben: */ .akkordeon .card-body img, .para .card-body img { max-width: 100%; } /* Bild als eigenes Element eingebunden - Breite soll 100px sein: */ .akkordeon .card-body .akkordeon-img img, .para .card-body .akkordeon-img img { float: left; margin: 5px 15px 15px 0; width: 100px; overflow: hidden; } /* Text rechts neben dem Bild */ .akkordeon .card-body .akkordeon-text.rechts, .para .card-body .akkordeon-text.rechts { margin-left: 115px; overflow: hidden; } /* DOKUMENTEN-LISTE MIT ICONS */ .document-list li::before { display: none; } /* notwendig für Dokumentliste unterhalb von Bereichs-Teasern auf Handys */ .document-list-bottom { clear: both; } .document-list, .biggerFont .document-list { padding: 5px 0 15px; margin-bottom: 0; } .document-list li, .document-list p { padding: 0; margin-bottom: 0; } .document-list.striped li:nth-of-type(odd) { background-color: var(--hintergrundzwei); } .document-list :is(a,.ws-null) { color: var(--schrift); text-decoration: none; display: flex; width: 100%; padding: 5px 0; } .document-list a:is(:hover,:focus,:active) { outline: none; } ul.list-entries li.list-entry .document-list a:is(:hover,:focus,:active) { outline: 1px solid var(--eins); } .biggerFont .document-list a:is(:hover,:focus,:active) { outline: 2px solid var(--zwei); } .document-list :is(li,p,div) :is(a,.ws-null) .icon { color: var(--eins); display: flex; flex-direction: column; font-size: 2.25em; justify-content: center; text-align: center; flex: 0 0 1.33em; height: 1.33em; margin-right: 8px; } .biggerFont .document-list :is(li,p,div) a .icon { color: var(--zwei); } .document-list :is(li,p,div) a .icon :is(i,em) { padding: 0; } /* und das Icon vor dem stellen wir in der üblichen Größe (wie bei ) dar */ .document-list :is(li,p,div) a .icon em::before { line-height: 1; display: inline-block; text-rendering: auto; -webkit-font-smoothing: antialiased; } /* Sonderfall improvisierte Dokumentenliste in Leichter Sprache - rote Farbe von muss überschrieben werden */ .biggerFont .document-list:is(li,p,div) a .icon em::before { color: var(--zwei); } .document-list a .icon img { /* dieser Filter erzeugt das gleiche Blau wie für die Icons in Dokumentenlisten */ /* https://codepen.io/sosuke/pen/Pjoqqp */ filter: opacity(1) invert(21%) sepia(48%) saturate(4858%) hue-rotate(186deg) brightness(96%) contrast(97%); /* blau */ } /* Wenn 0 Ergebnisse gefunden wurden, ist das Icon schwarz */ .document-list .ws-null .icon img { color: var(--schrift); } .document-list a:is(:focus,:active) .icon { color: var(--hintergrund); background-color: var(--eins); } .biggerFont .document-list a:is(:focus,:active) .icon { background-color: var(--hintergrund); } .document-list a:is(:focus,:active) .icon img { filter: invert(1); } .document-list a .linkText { /* notwendig für Links in Kasten auf Bereichsseiten und bei 2-spaltigem Layout in Talentplus */ width: 100%; } .document-list .ws-null .linkText { color: var(--schrift); /* width: 100%; */ } .document-list a .linkText strong { text-decoration: underline; color: var(--eins); /* width: 100%; */ } .document-list a .linkText .linkInfo .smallFont { display: block; padding: 5px 0 15px; } .document-list a:is(:hover,:focus,:active) .linkText :is(strong,.linkInfo) { color: var(--eins); text-decoration: none; } .biggerFont .document-list :is(h2,h3,h4,h5,h6) { padding: 10px 0; } /* notwendig, damit mit improvisierte Dokumentenlisten keine rote Schrift (schwere Wörter!) haben */ .biggerFont .document-list a em { color: var(--zwei); font-style: normal; } .biggerFont .document-list a .linkText strong, .biggerFont .document-list a:is(:hover,:focus,:active) .linkText :is(strong,.linkInfo) { color: var(--zwei); } /* ENDE DOKUMENTEN-LISTE MIT ICONS */ /* BEGINN TERMIN-TEASER */ .event-wrapper { margin-bottom: 30px; } .event { display: block; } /* kleines graues Schild */ :is(.event,.event-compact) .info .badge { line-height: 1; text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: .25rem; color: var(--schrift); background: var(--hintergrunddrei); padding: 3px 6px; border: 1px solid var(--bordergrau); font-size: 1rem; font-weight: 400; margin: 0 8px 8px 0; width: auto; display: inline-block; } :is(.event,.event-compact) .topline, .event.visual-info .text .topline { font-size: 1rem; font-weight: 400; letter-spacing: 0.075em; text-transform: uppercase; margin-bottom: 0.25em; } .event .date { display: flex; background-color: var(--hintergrundzwei); flex-direction: row; /* justify-content: space-between; */ justify-content: center; font-size: 1rem; border-bottom: 2px solid var(--eins); padding: 5px 3px; margin-bottom: 5px; gap: 8px; /* für buchbare Veranstaltung */ } .event .date .blue { font-weight: 600; width: auto; } .event .day-week { display: none; } .event .day-month, .event .month { font-weight: 600; color: var(--eins); padding-right: 5px; } .event .text :is(h2.event-heading, h3.event-heading, h4.event-heading, h5.event-heading, h6.event-heading) { font-size: 1.55rem; } .event .text p { margin-bottom: 1rem; } .event .document-list { padding: 5px 0 0; } .event .document-list li { padding-bottom: 5px; } /* ENDE TERMIN-TEASER */ @media (min-width: 414px) { .logo .navbar-brand img { min-width: 200px; /* wird für IE 11 gebraucht, weil Logo sonst zu weit rechts platziert wird */ width: 100%; } /* TERMIN-TEASER */ .event .day-week { display: flex; padding-right: 15px; } .event .month { padding-right: 15px; } } @media (min-width: 576px) { /* News ab dieser Größe zweispaltig */ .nachricht .imageWithCaption { float: left; margin: 5px 15px 5px 0; width: 40% } /* in die Senkrechte gedrehte Texte in Tabellen zurückdrehen */ /* main table.standard th.sm-vertical { direction: ltr; } main table.standard th.sm-vertical span { writing-mode: horizontal-tb; text-orientation: sideways; } */ /* PODCAST */ .podcast-wrapper, .podcast-wrapper .podcast-teaser .full-width-audio { width: 360px; } /* BEGINN Bilder Artikeln - ab dieser Größe kommt die Darstellung in linker Spalte mit 50% Breite hinzu */ .bild-links-div { overflow: auto; } .biggerFont .bild-links-div { /* notwendig, damit ein langer Text das Bild nicht umfließt wie bei normaler Sprache, sondern in der rechten Spalten steht */ overflow: hidden; } .bild-links { width: calc(50% + 15px); float: left; margin-bottom: 0; padding-right: 30px; } .biggerFont .bild.medium { width: 50%; } .biggerFont .bild.medium img { max-width: 100%; } .biggerFont .bild-links.leichte-sprache { width: calc(35% + 30px); float: left; } .bild-links img { /* padding-right: 30px; */ margin-top: 5px; /* geändert für Bilder in field-article.jsp */ /* https://www.talentplus.de/inklusion-gestalten/digitale-teilhabe/was-ist-digitale-teilhabe/ */ } /* ENDE Bilder in Artikeln */ } @media (min-width: 768px) { #cookieDialog { padding: 15px 8px 8px; font-weight: 400; } #cookieDialog p.bigFont { font-size: 1.25rem; font-weight: 300; } h1, h2, h3, h4, h5, h6 { hyphens: manual; word-break: break-word; } .two-cols :is(h2, h3, h4, h5, h6) { hyphens: auto; word-break: break-word; } /* Elemente, die auf Kleingeräten nicht angezeigt werden wieder einschalten */ /* Inline-Element: */ span.nosmall { display: inline; } /* Block-Element: */ div.nosmall { display: block; } /* erste Zeile und Navi */ .logo .navbar-brand { padding-top: 15px; padding-left: 0; margin-left: 0; } .logo .navbar-brand img { height: 40px; min-width: auto; width: auto; max-height: 100%; margin-left: 0; } .suchfeld { width: 420px; } #gridcontainer-navi .navbar-toggler, #gridcontainer-navi .navbar-toggler button { padding-left: 0px; } #gridcontainer-navi .menu-toggle .navbar-toggler { margin-left: 21px; } .navbar-nav a { font-size: 22px; padding: 15px; } .navbar-nav > li > a { padding-left: 25px; } .navbar-nav > li > ul > li > a { padding-left: 40px; } .navbar-nav > li > ul > li > ul > li > a { padding-left: 55px; } .navbar-nav > li > ul > li > ul > li > ul > li > a { padding-left: 70px; } /* News-Seite: Bild ab dieser Größe etwas kleiner */ .nachricht .imageWithCaption { width: 30%; } /* # für interne Links */ a.anchor-link::after { margin-left: -0.75em; margin-right: 0.25em; } /* Blättern auf Bühne und in den Webservices */ .pagination-numbers li:is(.prev,.next).list-page { display: block; } /* BEGINN Umfrage */ .gridcontainer-umfrage { padding-left: 0; } /* rechte box */ .umfrage-zwei { min-height: 160px; width: 100%; } /* Input-Field inkl. Submit-Button */ .umfrage-zwei-inner { margin-bottom: 10px; } /* ENDE Umfrage */ /* Logos auf der Startseite */ .container.logos { flex-direction: row; flex-wrap: wrap; } /* ENDE Logos */ /* FOOTER */ /* Start 3 Spalten */ .gridcontainer-footer h3 a { display: none; } .gridcontainer-footer h3 .heading { font-size: 1.25rem; line-height: 1.3; } .gridcontainer-footer a .fa-chevron-down { display: none; } #accordion-footer div :is(ul,div).smallFont { display: block; } /* Sprachwahl: DE / EN, Leichte Sprache, Gebärdensprache */ .alternative-formats-footer { justify-content: center; display: flex; margin-bottom: 75px; } .alternative-formats-footer .languages { width: 50%; display: flex; justify-content: start; } .alternative-formats-footer .networks { width: 50%; display: flex; justify-content: end; } .alternative-formats-footer ul { margin-bottom: 30px; } .alternative-formats-footer .networks ul li { max-width: 80px; width: 80px; } .alternative-formats-footer .networks ul li .text { display: block; margin-bottom: 5px; font-size: 1rem; } /* Start der letzten Zeile */ .padding-lastRowFluid { padding: 0 15px; bottom: 0; left: 0; right: 0; z-index: 20; } .padding-lastRow { padding: 0 15px; } .gridcontainer-lastRow { display: grid; grid-template-columns: 120px 140px 120px 120px auto; grid-template-rows: repeat(1, 1fr); padding: 0; } .lastRow-one { grid-column: 1 / 2; grid-row: 1 / 2; padding-top: 13px; padding-bottom: 13px; } .lastRow-two { grid-column: 2 / 5; grid-row: 1 / 2; padding-top: 15px; padding-bottom: 15px; } .lastRow-three { grid-column: 5 / 6; grid-row: 1 / 2; justify-self: end; align-self: start; } .no-padding { padding: 0; } /* Ende FOOTER */ /* Breadcrumb-Navigation sichtbar machen */ .row.brotkrume { display: block; } /* BEGINN Zweispaltiges Layout: Text Links, Dokumentenliste und / oder Webservice-Linkliste rechts */ .card-body .two-cols { align-items: flex-start; display: flex; column-gap: 30px; } .card-body .two-cols .left-col { width: 50%; } .card-body .two-cols .right-col { width: 50%; padding: 15px 15px 0; border: 2px solid var(--eins); margin-bottom: 30px; } .card-body .two-cols .right-col .document-list { padding: 0; margin-top: 0; margin-bottom: 15px; } /* .card-body .two-cols .right-col .document-list:not(:first-child) { margin-top: 15px; } */ /* ENDE zweispaltiges Layout */ /* Allgemein/Portal-Teaser im Hoch- oder Querformat, oben/links mit Bild, unten/rechts Überschrift, Text, Link */ .row.portal-teaser { padding: 0 15px; } .image-boxen-outer { margin: 30px -15px; } .image-box-outer { margin-top: 15px; margin-bottom: 15px; } .image-box-outer.landscape { padding-left: 0; padding-right: 0; margin-left: 0; margin-right: 0; width: 100%; } /* .image-box-outer a, */ .image-box-outer.landscape a { /* flex-direction: row; */ /* Lue 11.09.2024: nach BITV-Test Reihenfolge zu 1. Text + 2. Bild geändert */ flex-direction: row-reverse; } .col-md-6.blue-icon { height: unset; } .image-box-bottom { padding: 10px; min-height: 250px; height: 100%; } .col-md-6.hover-shadow { min-height: 211px; padding: 10px 15px; /* im Querformat anderer Box-Shadow */ /* box-shadow: inset 0 1px 0 0 #ccc, inset 0 -1px 0 0 #ccc, inset -1px 0 0 #ccc; */ } a:is(:hover,:focus,:active) .col-md-6.hover-shadow { box-shadow: none; } /* Unterbereichs-Teaser */ .row.bereich-teaser { padding: 15px 0; } /* Notwendig, damit bei wenig Text der Hover-Effekt des Teaser über die gesamte Breite der Hauptinhaltsspalte geht */ .row.bereich-teaser a { display: flex; width: 100%; } .row.bereich-teaser a:focus { outline: 2px solid var(--zwei); outline-offset: 0; } .row.bereich-teaser .col-md-4.col-lg-3 { padding: 15px 15px 15px 0; } .row.bereich-teaser .col-md-8.col-lg-9 { margin-bottom: 0; } /* BEGINN Bilder in Artikeln - ab dieser Größe kommt die Darstellung in linker Spalte mit 50% Breite hinzu */ /* folgende Selektoren nach @media (min-width: 576px) verschoben: (Lue 28.03.2024) */ /* .bild-links-div { overflow: auto; } .biggerFont .bild-links-div { overflow: hidden; } .bild-links { width: calc(50% + 15px); float: left; } .biggerFont .text-rechts { overflow: hidden; display: block; } .biggerFont .bild.medium { width: 50%; } .biggerFont .bild.medium img { max-width: 100%; } .biggerFont .bild-links.leichte-sprache { width: calc(35% + 30px); float: left; } .bild-links img { padding-right: 30px; margin-top: 5px; } */ /* ENDE Bilder in Artikeln */ .unfertig, .wichtig, .frage, .tipp, .ok, .finder-emotion-text, .info-status, .rot, .blau, .gruen, .rahmen-blau, .rahmen-grau { padding: 15px; } main ul.checklist { margin-left: 18px; } /* Blaue Webservice-Linkbox auf Bereichsseiten */ .webservice-box { display: flex; } .webservice-box .left-col { width: 50%; float: left; } .webservice-box .right-col { width: 50%; float: right; } .webservice-box .full-col { width: 100%; clear: both; } /* Checkboxen zum Anhaken, die nicht versendet werden */ .form-content.checklist { padding: 15px; } /* Formulare mit mehreren Spalten (Ausgleichsabgabe Ersparnisrechner) */ .row.form-content { padding: 5px 0; } .row.form-content.border-top { border-top: 1px solid var(--bordergrau); padding: 15px 0 5px; } .row.form-content :is(.col-md-3,.col-md-4.col-md-8,.col-md-9,.col-12) { margin: 0; padding: 0; } .row.form-content :is(.col-md-8,.col-md-9) { padding-right: 45px; } /* PODCASTS & VIDEOS */ .podcast-wrapper { width: 100%; outline: none; } .podcast-teaser { display: flex; width: 100%; position: relative; align-items: flex-start; } .podcast-teaser .title-and-player { outline: 2px solid var(--eins); border-radius: 11px; } /* Größenangabe ist nur notwendig, wenn +