/** Theme Name: Astra Child Author: Brainstorm Force Author URI: http://wpastra.com/about/ Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme! Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: astra-child Template: astra */ /* ========================================================================== Farbschema: Hell (Standard) / Dunkel / Automatisch Das Attribut html[data-theme] setzt ein kleines Skript im (inc/designbote-single.php, Abschnitt 12) – vor dem ersten Rendern, daher kein Aufblitzen. Kontraste nach WCAG 2.2 AA geprüft: Text ≥ 4.5:1, Bedienelemente/Rahmen ≥ 3:1. ========================================================================== */ html { color-scheme: light; } :root { --db-switch-border: #8a8a8a; /* 3.5:1 auf Weiß */ --db-switch-icon: #444; /* 9.7:1 */ --db-switch-on-bg: #7d6242; /* Markenbraun */ --db-switch-on-icon: #fff; /* 5.7:1 */ --db-focus: #1e293b; } /* ---- Umschalter (Sonne / Auto / Mond) ----------------------------------- */ .db-theme-switch { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border: 1px solid var(--db-switch-border); border-radius: 999px; background: transparent; line-height: 0; vertical-align: middle; } .db-theme-switch button, .db-theme-switch button:hover, .db-theme-switch button:focus { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin: 0; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--db-switch-icon); line-height: 0; cursor: pointer; box-shadow: none; } .db-theme-switch button:hover { background: rgba(125, 98, 66, 0.12); } .db-theme-switch button[aria-checked="true"], .db-theme-switch button[aria-checked="true"]:hover { background: var(--db-switch-on-bg); color: var(--db-switch-on-icon); } .db-theme-switch button:focus-visible { outline: 2px solid var(--db-focus); outline-offset: 2px; } .db-theme-switch svg { width: 18px; height: 18px; pointer-events: none; } @media (prefers-reduced-motion: no-preference) { .db-theme-switch button { transition: background-color 0.15s, color 0.15s; } } /* Header-Einbindung (Astra HTML-Element 2) */ .ast-header-html-2 .ast-builder-html-element p { margin: 0; } .ast-header-html-2 { display: flex; align-items: center; } #ast-mobile-header .ast-header-html-2 { margin-right: 8px; } /* ========================================================================== Dunkles Farbschema ========================================================================== */ html[data-theme="dark"] { color-scheme: dark; /* Palette */ --db-dark-bg: #141414; --db-dark-surface: #1d1d1d; --db-dark-surface-2: #2a2a2a; --db-dark-text: #ebe8e4; /* 15.1:1 */ --db-dark-text-2: #c9c4bf; /* 10.6:1 */ --db-dark-muted: #a39d97; /* 6.9:1 */ --db-dark-accent: #d2ad83; /* 8.8:1 – Braun, aufgehellt */ --db-dark-link: #d9b88f; /* 9.8:1 */ --db-dark-line: #34302d; /* dekorative Linien */ --db-dark-border: #736d67; /* 3.6:1 – Formularrahmen */ /* Astra-Palette umstellen */ --ast-global-color-2: var(--db-dark-text); --ast-global-color-3: var(--db-dark-text-2); --ast-global-color-4: var(--db-dark-bg); --ast-global-color-5: var(--db-dark-surface); --ast-global-color-6: var(--db-dark-text); --ast-global-color-7: var(--db-dark-line); --ast-global-color-8: var(--db-dark-text); --ast-global-color-subtle-background: var(--db-dark-line); --ast-border-color: var(--db-dark-line); --ast-global-dark-bg-style: var(--db-dark-bg); --ast-global-dark-lfs: var(--db-dark-surface); --ast-widget-bg-color: var(--db-dark-surface); --ast-comment-inputs-background: var(--db-dark-surface); --ast-title-layout-bg: var(--db-dark-surface); /* DESIGNBOTE-Variablen (single.css / list.css) */ --db-text: var(--db-dark-text); --db-muted: var(--db-dark-muted); --db-link: var(--db-dark-link); --db-link-hover: var(--db-dark-accent); --db-line: var(--db-dark-line); /* Umschalter */ --db-switch-border: var(--db-dark-border); --db-switch-icon: var(--db-dark-text); --db-switch-on-bg: var(--db-dark-accent); --db-switch-on-icon: #141414; --db-focus: var(--db-dark-text); } /* Flächen */ html[data-theme="dark"] body, html[data-theme="dark"] #page, html[data-theme="dark"] .site-content, html[data-theme="dark"] .ast-separate-container, html[data-theme="dark"] .ast-separate-container .ast-article-single, html[data-theme="dark"] .ast-separate-container .ast-article-post, html[data-theme="dark"] .ast-above-header-bar, html[data-theme="dark"] .ast-primary-header-bar, html[data-theme="dark"] .ast-below-header-bar, html[data-theme="dark"] .main-header-bar, html[data-theme="dark"] .ast-mobile-header-wrap .ast-primary-header-bar, html[data-theme="dark"] .ast-mobile-popup-drawer.active .ast-mobile-popup-inner, html[data-theme="dark"] .site-footer, html[data-theme="dark"] .site-primary-footer-wrap, html[data-theme="dark"] .site-below-footer-wrap, html[data-theme="dark"] .site-above-footer-wrap { background-color: var(--db-dark-bg) !important; color: var(--db-dark-text-2); } html[data-theme="dark"] .ast-above-header-bar, html[data-theme="dark"] .ast-primary-header-bar, html[data-theme="dark"] .site-below-footer-wrap { border-color: var(--db-dark-line) !important; } html[data-theme="dark"] .ast-header-sticked { box-shadow: 0 1px 0 var(--db-dark-line), 0 6px 18px rgba(0, 0, 0, 0.5) !important; } /* Grundtext und Überschriften */ html[data-theme="dark"] body, html[data-theme="dark"] p, html[data-theme="dark"] li { color: var(--db-dark-text-2); } html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6 { color: var(--db-dark-text); } html[data-theme="dark"] a { color: var(--db-dark-link); } html[data-theme="dark"] a:hover, html[data-theme="dark"] a:focus { color: var(--db-dark-accent); } html[data-theme="dark"] :focus-visible { outline-color: var(--db-dark-text); } /* Logo: dunkle Hälfte + Claim werden hell, Grau bleibt Grau */ html[data-theme="dark"] .custom-logo { filter: invert(1) hue-rotate(180deg); } html[data-theme="dark"] .db-icon path[fill="#231f20"] { fill: var(--db-dark-text); } /* Menü (Desktop, Dropdowns, Mobil) */ html[data-theme="dark"] .main-header-menu .menu-link, html[data-theme="dark"] .ast-builder-menu .menu-link, html[data-theme="dark"] .main-header-menu .sub-menu .menu-link, html[data-theme="dark"] .ast-header-navigation-arrow, html[data-theme="dark"] .dropdown-menu-toggle { color: var(--db-dark-text) !important; } html[data-theme="dark"] .main-header-menu .menu-item:hover > .menu-link, html[data-theme="dark"] .main-header-menu .menu-link:focus, html[data-theme="dark"] .main-header-menu .current-menu-item > .menu-link, html[data-theme="dark"] .main-header-menu .current-menu-ancestor > .menu-link, html[data-theme="dark"] .ast-builder-menu .current-menu-item > .menu-link, html[data-theme="dark"] .ast-builder-menu .current-menu-ancestor > .menu-link { color: var(--db-dark-accent) !important; } html[data-theme="dark"] .main-header-menu .sub-menu, html[data-theme="dark"] .ast-builder-menu .sub-menu { background-color: var(--db-dark-surface) !important; border-color: var(--db-dark-line) !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55); } html[data-theme="dark"] .main-header-menu .sub-menu .menu-item, html[data-theme="dark"] .ast-mobile-popup-content .menu-item, html[data-theme="dark"] .ast-mobile-popup-content .menu-link { border-color: var(--db-dark-line) !important; } html[data-theme="dark"] .ast-mobile-menu-trigger-minimal, html[data-theme="dark"] .ast-mobile-menu-trigger-minimal .ast-mobile-svg, html[data-theme="dark"] .menu-toggle-close, html[data-theme="dark"] .ast-mobile-popup-drawer .menu-toggle-close { color: var(--db-dark-text) !important; fill: currentColor; } /* Buttons (Astra-Standard: braun mit weißer Schrift – 5.7:1, bleibt) */ html[data-theme="dark"] #ast-scroll-top { box-shadow: 0 0 0 1px var(--db-dark-border); } /* Formulare global */ html[data-theme="dark"] input[type="text"], html[data-theme="dark"] input[type="email"], html[data-theme="dark"] input[type="url"], html[data-theme="dark"] input[type="search"], html[data-theme="dark"] input[type="password"], html[data-theme="dark"] input[type="number"], html[data-theme="dark"] input[type="tel"], html[data-theme="dark"] select, html[data-theme="dark"] textarea { background-color: var(--db-dark-surface) !important; border-color: var(--db-dark-border) !important; color: var(--db-dark-text) !important; } html[data-theme="dark"] ::placeholder { color: var(--db-dark-muted); opacity: 1; } /* ---- Einzelbeitrag (single.css) ----------------------------------------- */ html[data-theme="dark"] .db-breadcrumbs, html[data-theme="dark"] .db-breadcrumbs a, html[data-theme="dark"] .db-post__tags a, html[data-theme="dark"] .db-comments .comment-author, html[data-theme="dark"] .db-comments .comment-author a, html[data-theme="dark"] .db-related__headline, html[data-theme="dark"] .db-related__link { color: var(--db-dark-text-2); } html[data-theme="dark"] .db-breadcrumbs .breadcrumb_last { color: var(--db-dark-text); } html[data-theme="dark"] .db-breadcrumbs a:hover, html[data-theme="dark"] .db-post__tags a:hover, html[data-theme="dark"] .db-related__link:hover .db-related__headline { color: var(--db-dark-accent); } html[data-theme="dark"] .db-post__content, html[data-theme="dark"] .db-post__content p, html[data-theme="dark"] .db-post__content li { color: var(--db-dark-text-2); } html[data-theme="dark"] .db-post__content .glossary-tooltip .glossary-link a.glossary-only-link, html[data-theme="dark"] .db-post__content .glossary-tooltip .glossary-link::after { color: var(--db-dark-link); } html[data-theme="dark"] .glossary-tooltip-text { background-color: var(--db-dark-surface) !important; border-color: var(--db-dark-border) !important; color: var(--db-dark-text-2) !important; } html[data-theme="dark"] .glossary-tooltip-content::after, html[data-theme="dark"] .glossary-tooltip-text::after { background: var(--db-dark-surface) !important; border-color: var(--db-dark-border) !important; } html[data-theme="dark"] .db-comments .comment-meta, html[data-theme="dark"] .db-comments .comment-meta a, html[data-theme="dark"] .db-comment-hint { color: var(--db-dark-muted); } html[data-theme="dark"] .db-comments .comment-meta a:hover { color: var(--db-dark-accent); } html[data-theme="dark"] .db-comment-toggle, html[data-theme="dark"] .db-comment-toggle:focus { background-color: var(--db-dark-surface-2) !important; color: var(--db-dark-text) !important; } html[data-theme="dark"] .db-comment-toggle:hover { background-color: #363636 !important; } html[data-theme="dark"] .db-comment-panel, html[data-theme="dark"] .db-comments .comments-list .comment-respond { background-color: var(--db-dark-surface) !important; } html[data-theme="dark"] .db-comments .comment-form label, html[data-theme="dark"] .db-comments .comment-reply-title { color: var(--db-dark-text) !important; } html[data-theme="dark"] .db-comments .comment-form .required { color: #ff8a80 !important; } html[data-theme="dark"] #comments.db-comments .db-comment-submit { border-color: var(--db-dark-border) !important; color: var(--db-dark-text) !important; background: transparent !important; } html[data-theme="dark"] #comments.db-comments .db-comment-submit:hover, html[data-theme="dark"] #comments.db-comments .db-comment-submit:focus { background: var(--db-dark-text) !important; border-color: var(--db-dark-text) !important; color: #141414 !important; } /* ---- Beitragslisten (list.css) ------------------------------------------ */ html[data-theme="dark"] .db-list__subtitle, html[data-theme="dark"] .db-subcats a, html[data-theme="dark"] .db-archive-desc { color: var(--db-dark-text-2); } html[data-theme="dark"] .db-subcats a:hover { color: var(--db-dark-accent); } html[data-theme="dark"] .db-list__img { background-color: var(--db-dark-surface); } html[data-theme="dark"] .db-pagination .page-numbers { border-color: var(--db-dark-border); color: var(--db-dark-text); } html[data-theme="dark"] .db-pagination a.page-numbers:hover, html[data-theme="dark"] .db-pagination a.page-numbers:focus-visible { background: var(--db-dark-text); border-color: var(--db-dark-text); color: #141414; } html[data-theme="dark"] .db-pagination .page-numbers.current { color: var(--db-dark-accent); border-color: var(--db-dark-accent); } html[data-theme="dark"] .db-pagination .page-numbers.dots { border-color: transparent; } /* Bilder minimal abdunkeln, damit sehr helle Motive nicht blenden */ html[data-theme="dark"] .db-post__content img, html[data-theme="dark"] .db-list__img, html[data-theme="dark"] .db-related__img { filter: brightness(0.92); } html[data-theme="dark"] .db-list__title a { color: var(--db-dark-text); } html[data-theme="dark"] .db-list__title a:hover, html[data-theme="dark"] .db-list__item:has(.db-list__media:hover) .db-list__title a { color: var(--db-dark-accent); } html[data-theme="dark"] .ast-mobile-menu-trigger-minimal svg, html[data-theme="dark"] .ast-mobile-menu-trigger-minimal .ast-mobile-svg, html[data-theme="dark"] .menu-toggle-close svg { fill: var(--db-dark-text) !important; } html[data-theme="dark"] .ast-menu-toggle, html[data-theme="dark"] .ast-menu-toggle svg, html[data-theme="dark"] .ast-header-break-point .ast-mobile-header-wrap .ast-menu-toggle { color: var(--db-dark-text) !important; fill: var(--db-dark-text) !important; } /* ---- Agenturen (list.css) ----------------------------------------------- */ /* Logos sind für helle Flächen gemacht: im Dunkelmodus auf weißer Kachel */ html[data-theme="dark"] .db-agency__logo img, html[data-theme="dark"] .db-agency-item__logo img { padding: 8px; border-radius: 4px; background-color: #fff; } html[data-theme="dark"] .db-agency__meta, html[data-theme="dark"] .db-agency__name, html[data-theme="dark"] .db-agency-intro, html[data-theme="dark"] .db-agency-item__town, html[data-theme="dark"] .db-agency-item__url, html[data-theme="dark"] .db-agency-related__subtitle, html[data-theme="dark"] .db-agency-related__excerpt { color: var(--db-dark-text-2); } html[data-theme="dark"] .db-agency__label, html[data-theme="dark"] .db-agency-item__title, html[data-theme="dark"] .db-agency-item__title a, html[data-theme="dark"] .db-agency-related__title a { color: var(--db-dark-text); } html[data-theme="dark"] .db-agency-item__title a:hover, html[data-theme="dark"] .db-agency-item:has(.db-agency-item__logo:hover) .db-agency-item__title a, html[data-theme="dark"] .db-agency-related__title a:hover, html[data-theme="dark"] .db-agency-related__item:has(.db-agency-related__media:hover) .db-agency-related__title a { color: var(--db-dark-accent); } html[data-theme="dark"] .db-agency-related__img { background-color: var(--db-dark-surface); filter: brightness(0.92); } html[data-theme="dark"] .db-agency__content .gallery img { border-color: var(--db-dark-line) !important; } /* Brotkrümel: Links unterstrichen (WCAG 1.4.1 – nicht nur über die Farbe erkennbar) */ html body .db-breadcrumbs a, html body .db-list-primary .db-breadcrumbs a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } /* ---- Startseiten-Aufmacher (list.css): Schrift auf Bild bleibt weiß ------ */ html[data-theme="dark"] .db-hero__title, html[data-theme="dark"] .db-hero__cat, html[data-theme="dark"] .db-hero__subtitle, html[data-theme="dark"] .db-hero__link, html[data-theme="dark"] .db-hero__link:hover, html[data-theme="dark"] .db-hero__link:focus { color: #fff; } html[data-theme="dark"] .db-hero__img { filter: brightness(0.92); } /* ---- Logo-Slider (list.css): Logos auf heller Kachel ------------------- */ html[data-theme="dark"] .db-logos__link { background-color: #fff; border-radius: 4px; } html[data-theme="dark"] .db-logos__control { border-color: var(--db-dark-border); color: var(--db-dark-text); } html[data-theme="dark"] .db-logos__control:hover { border-color: var(--db-dark-text); } /* ========================================================================== Schriften seitenweit (lokal aus /fonts/, kein Google-Abruf) und Grundtypo wie im Original: Fließtext Helvetica Neue, Überschriften Oswald. ========================================================================== */ @font-face { font-family: "Oswald"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/oswald-v17-latin-regular.woff2") format("woff2"); } @font-face { font-family: "Oswald"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/oswald-v17-latin-700.woff2") format("woff2"); } @font-face { font-family: "Open Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/open-sans-v16-latin-regular.woff2") format("woff2"); } @font-face { font-family: "Open Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/open-sans-v16-latin-600.woff2") format("woff2"); } html body, html body button, html body input, html body select, html body textarea { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } html body h1, html body h2, html body h3, html body h4, html body h5, html body h6, html body .entry-title { font-family: "Oswald", Helvetica, Arial, sans-serif; font-weight: 400; } /* Suchformular (Suche, 404) */ .db-search-form { margin: 0 0 30px; } .db-search-form .search-form, .db-404 .search-form { display: flex; gap: 8px; max-width: 560px; margin: 0 0 24px; } .db-search-form .search-form label, .db-404 .search-form label { flex: 1; margin: 0; } .db-search-form .search-field, .db-404 .search-field { width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid #767676; border-radius: 0; font-size: 16px; } .db-search-form .search-submit, .db-404 .search-submit { min-height: 44px; padding: 0 18px; border: 1px solid #333; border-radius: 0; background: #333; color: #fff; font-family: "Oswald", Helvetica, Arial, sans-serif; letter-spacing: 0.7px; text-transform: uppercase; cursor: pointer; } /* ========================================================================== Footer: Social-Media-Links auf Taupe (#8f8279), darunter die Copyright-Zeile. Schwarz auf #8f8279 = 5,6:1 (WCAG AA, auch für Grafiken ≥ 3:1) ========================================================================== */ .db-social { padding: 28px 20px; background-color: #8f8279; } .db-social__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 16px; margin: 0 auto; padding: 0; list-style: none; } .db-social__list li { margin: 0; } .db-social__link { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 2px solid #000; border-radius: 50%; color: #000; transition: background-color 0.15s ease, color 0.15s ease; } .db-social__icon { display: block; width: 20px; height: 20px; fill: currentColor; } .db-social__link:hover, .db-social__link:focus-visible { background-color: #000; color: #8f8279; } .db-social__link:focus-visible { outline: 2px solid #000; outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { .db-social__link { transition: none; } } @media (max-width: 543px) { .db-social { padding: 24px 16px; } .db-social__list { flex-wrap: nowrap; gap: 8px; } .site-footer .site-below-footer-wrap { padding-left: 16px; padding-right: 16px; } } @media (max-width: 374px) { .db-social__link { width: 40px; height: 40px; } .db-social__icon { width: 18px; height: 18px; } } .site-footer .site-below-footer-wrap { background-color: #8f8279 !important; border-top: 1px solid rgba(0, 0, 0, 0.15) !important; } .site-footer .site-below-footer-wrap, .site-footer .site-below-footer-wrap p, .site-footer .site-below-footer-wrap .ast-footer-copyright { color: #000 !important; } .site-footer .site-below-footer-wrap a { color: #000 !important; text-decoration: underline; text-underline-offset: 3px; } /* Glossar-Einträge: keine Datum/Tags-Zeile (wie im Original) */ .db-glossary-single .db-post__meta { display: none; } /* ---- Dunkelmodus: Footer ---------------------------------------------- */ html[data-theme="dark"] .db-social, html[data-theme="dark"] .site-footer .site-below-footer-wrap { background-color: var(--db-dark-surface) !important; border-color: var(--db-dark-line) !important; } html[data-theme="dark"] .db-social { border-top: 1px solid var(--db-dark-line); } html[data-theme="dark"] .db-social__link { border-color: var(--db-dark-text); color: var(--db-dark-text); } html[data-theme="dark"] .db-social__link:hover, html[data-theme="dark"] .db-social__link:focus-visible { background-color: var(--db-dark-text); color: var(--db-dark-surface); outline-color: var(--db-dark-text); } html[data-theme="dark"] .site-footer .site-below-footer-wrap, html[data-theme="dark"] .site-footer .site-below-footer-wrap p, html[data-theme="dark"] .site-footer .site-below-footer-wrap .ast-footer-copyright, html[data-theme="dark"] .site-footer .site-below-footer-wrap a { color: var(--db-dark-text) !important; } html[data-theme="dark"] .db-search-form .search-submit, html[data-theme="dark"] .db-404 .search-submit { background: var(--db-dark-text); border-color: var(--db-dark-text); color: #141414; } .db-searchform .search-field { flex: 1; min-width: 0; } .db-glossary-single .db-post__header, .db-glossary-single .db-post__title { text-align: left; } html[data-theme="dark"] code, html[data-theme="dark"] kbd, html[data-theme="dark"] pre { background-color: var(--db-dark-surface-2); color: var(--db-dark-text); } html[data-theme="dark"] .gallery-caption, html[data-theme="dark"] .wp-caption-text, html[data-theme="dark"] figcaption { color: var(--db-dark-text-2); } /* ========================================================================== Newsletter: Sidebar-Hinweis, Anmelde-Pop-up () und alle Mailster- Formulare (.db-mailster, z. B. /newsletter/, Abmelden). Markup: functions.php §12 Pop-up-Farben wie im Original: #e6e6e6, Rahmen #817873 ========================================================================== */ .db-nl-teaser { margin: 0 0 12px; } .db-nl-teaser-action { margin: 0; } .db-nl-button, .db-nl-button:visited { display: inline-block; padding: 10px 22px; background: #333; color: #fff; font-family: "Oswald", Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.4; letter-spacing: 0.7px; text-transform: uppercase; text-decoration: none; } .db-nl-button:hover, .db-nl-button:focus-visible { background: #000; color: #fff; } .db-nl-button:focus-visible { outline: 2px solid #000; outline-offset: 3px; } /* Nach dem Schließen des Pop-ups bekommt der Button den Fokus zurück – Text bleibt weiß (sonst greift Astras a:focus). */ .db-nl-button:focus, .db-nl-button:active { color: #fff; } /* Pop-up */ html.db-nl-is-open { overflow: hidden; } .db-nl-dialog { width: min(600px, calc(100% - 32px)); max-width: none; max-height: calc(100% - 32px); padding: 0; border: 1px solid #817873; background: #e6e6e6; color: #333; box-shadow: 3px 5px 9px 0 rgba(0, 0, 0, 0.35); overflow: auto; overscroll-behavior: contain; } .db-nl-dialog::backdrop { background: rgba(0, 0, 0, 0.55); } .db-nl-dialog__inner { position: relative; padding: 40px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.5; } .db-nl-dialog__close { position: absolute; top: 6px; right: 6px; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 0; background: transparent; color: #333; font-size: 34px; line-height: 1; cursor: pointer; } .db-nl-dialog__close:hover, .db-nl-dialog__close:focus-visible { background: transparent; color: #000; } .db-nl-dialog__close:focus-visible { outline: 2px solid #000; outline-offset: -4px; } .db-nl-dialog__logo { display: block; width: 100px; height: 100px; margin: 0 auto 12px; border-radius: 50%; } .db-nl-dialog__title { margin: 0 0 6px; font-family: "Oswald", Helvetica, Arial, sans-serif; font-size: 25px; font-weight: 700; line-height: 1.3; text-align: center; color: #333; } .db-nl-dialog__text { margin: 0 0 24px; text-align: center; } .db-nl-dialog .mailster-form.db-mailster { max-width: none; } .db-nl-dialog .mailster-form.db-mailster .submit-button { width: 100%; } /* Mailster-Formulare */ .mailster-form.db-mailster { position: relative; max-width: 640px; margin: 0 0 32px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.5; } .mailster-form.db-mailster .mailster-form-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; } .mailster-form.db-mailster .mailster-form-fields > * { grid-column: 1 / -1; } .mailster-form.db-mailster .mailster-form-fields > .mailster-firstname-wrapper { grid-column: 1; } .mailster-form.db-mailster .mailster-form-fields > .mailster-lastname-wrapper { grid-column: 2; } .mailster-form.db-mailster.loading { opacity: 0.6; pointer-events: none; } .mailster-form.db-mailster .mailster-wrapper { margin: 0 0 14px; } .mailster-form.db-mailster .mailster-wrapper > label { display: block; margin: 0 0 4px; font-weight: 600; } .mailster-form.db-mailster .mailster-required { color: #a3302c; font-size: inherit; font-weight: 700; } .mailster-form.db-mailster .input { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid #767676; border-radius: 0; background: #fff; color: #222; font-size: 16px; line-height: 1.4; } .mailster-form.db-mailster .input:focus-visible { outline: 2px solid #333; outline-offset: 1px; border-color: #333; } .db-nl-note { margin: 0; font-size: 14px; line-height: 1.5; } .db-nl-note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } .mailster-form.db-mailster .mailster-datenschutz-wrapper > label { display: flex; align-items: center; gap: 10px; cursor: pointer; } .mailster-form.db-mailster .mailster-datenschutz-wrapper input[type="checkbox"] { width: 22px; height: 22px; margin: 0; accent-color: #333; } .db-nl-captcha { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 8px; } .db-nl-captcha__img { display: block; width: 200px; height: 70px; background: #fff; border: 1px solid #ccc; } .db-nl-captcha__reload { min-height: 44px; padding: 8px 14px; border: 1px solid #767676; border-radius: 0; background: #fff; color: #333; font-size: 14px; cursor: pointer; } .db-nl-captcha__reload:hover, .db-nl-captcha__reload:focus-visible { background: #333; border-color: #333; color: #fff; } .mailster-form.db-mailster .submit-button { padding: 12px 32px; border: 0; border-radius: 0; background: #333; color: #fff; font-family: "Oswald", Helvetica, Arial, sans-serif; font-size: 17px; line-height: 1.4; letter-spacing: 0.7px; text-transform: uppercase; cursor: pointer; } .mailster-form.db-mailster .submit-button:hover, .mailster-form.db-mailster .submit-button:focus-visible { background: #000; color: #fff; } .mailster-form.db-mailster .submit-button:focus-visible { outline: 2px solid #000; outline-offset: 3px; } .mailster-form.db-mailster .mailster-form-info { height: auto; margin: 0 0 16px; padding: 12px 16px; border-radius: 0; color: #fff; text-align: left; } .mailster-form.db-mailster .mailster-form-info:empty { display: none; } .mailster-form.db-mailster .mailster-form-info.error { background: #a3302c; } .mailster-form.db-mailster .mailster-form-info.success { background: #2e6b1f; } .mailster-form.db-mailster .mailster-form-info p, .mailster-form.db-mailster .mailster-form-info ul { margin: 0; padding: 0; list-style: none; } .mailster-form.db-mailster .mailster-form-info a { color: #fff; } .mailster-form.db-mailster .mailster-form-info:focus { outline: 2px solid #333; outline-offset: 2px; } .mailster-form.db-mailster .error .input, .mailster-form.db-mailster .error input[type="checkbox"] { outline: 2px solid #a3302c; outline-offset: 1px; } .mailster-form.db-mailster.completed .mailster-form-fields { display: none; } @media (max-width: 543px) { .db-nl-dialog__inner { padding: 36px 18px 22px; } .db-nl-dialog__logo { width: 72px; height: 72px; } .db-nl-dialog__title { font-size: 22px; } .mailster-form.db-mailster .mailster-form-fields { grid-template-columns: minmax(0, 1fr); } .mailster-form.db-mailster .mailster-form-fields > .mailster-firstname-wrapper, .mailster-form.db-mailster .mailster-form-fields > .mailster-lastname-wrapper { grid-column: 1; } .mailster-form.db-mailster .submit-button { width: 100%; } } /* Dunkelmodus */ html[data-theme="dark"] .db-nl-button { background: var(--db-dark-text); color: #141414; } html[data-theme="dark"] .db-nl-button:hover, html[data-theme="dark"] .db-nl-button:focus-visible { background: #fff; color: #141414; outline-color: var(--db-dark-text); } html[data-theme="dark"] .db-nl-dialog { background: var(--db-dark-surface); border-color: var(--db-dark-border); color: var(--db-dark-text); } html[data-theme="dark"] .db-nl-dialog__logo { background: #e6e6e6; } html[data-theme="dark"] .db-nl-dialog__title, html[data-theme="dark"] .db-nl-dialog__close { color: var(--db-dark-text); } html[data-theme="dark"] .db-nl-dialog__close:hover, html[data-theme="dark"] .db-nl-dialog__close:focus-visible { color: #fff; outline-color: var(--db-dark-text); } html[data-theme="dark"] .mailster-form.db-mailster .input { background: var(--db-dark-surface-2); border-color: var(--db-dark-border); color: var(--db-dark-text); } html[data-theme="dark"] .mailster-form.db-mailster .input:focus-visible { outline-color: var(--db-dark-text); border-color: var(--db-dark-text); } html[data-theme="dark"] .mailster-form.db-mailster .mailster-required { color: #ff8a80; } html[data-theme="dark"] .mailster-form.db-mailster .mailster-datenschutz-wrapper input[type="checkbox"] { accent-color: var(--db-dark-text); } html[data-theme="dark"] .db-nl-captcha__reload { background: var(--db-dark-surface-2); border-color: var(--db-dark-border); color: var(--db-dark-text); } html[data-theme="dark"] .db-nl-captcha__reload:hover, html[data-theme="dark"] .db-nl-captcha__reload:focus-visible { background: var(--db-dark-text); color: #141414; } html[data-theme="dark"] .mailster-form.db-mailster .submit-button { background: var(--db-dark-text); color: #141414; } html[data-theme="dark"] .mailster-form.db-mailster .submit-button:hover, html[data-theme="dark"] .mailster-form.db-mailster .submit-button:focus-visible { background: #fff; color: #141414; outline-color: var(--db-dark-text); } html[data-theme="dark"] .mailster-form.db-mailster .mailster-form-info:focus { outline-color: var(--db-dark-text); } /* ========================================================================== Seite "Glossar" (/design-glossar/, Glossary-Plugin: Buchstabenleiste + Liste) ========================================================================== */ .glossary-term-bar { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 32px; } .db-post__content .glossary-link-initial-item a, .db-post__content .glossary-no-link-initial-item { display: flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 6px; border: 1px solid #777; font-family: "Oswald", Helvetica, Arial, sans-serif; font-size: 18px; line-height: 1; text-transform: uppercase; text-decoration: none; color: #333; } .db-post__content .glossary-link-initial-item a:hover, .db-post__content .glossary-link-initial-item a:focus-visible { background: #333; border-color: #333; color: #fff; } .db-post__content .glossary-link-initial-item a:focus-visible { outline: 2px solid #000; outline-offset: 2px; } .db-post__content .glossary-no-link-initial-item { border-color: #ddd; color: #767676; } .glossary-term-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 28px 32px; } .glossary-letter { display: block; margin: 0 0 10px; padding-bottom: 6px; border-bottom: 1px solid #e5e5e5; font-family: "Oswald", Helvetica, Arial, sans-serif; font-size: 24px; line-height: 1.2; text-transform: uppercase; scroll-margin-top: 120px; } .db-post__content .glossary-block ul { margin: 0; padding: 0; list-style: none; } .db-post__content .glossary-block li { margin: 0 0 6px; } .db-post__content .glossary-block a { color: #333; text-decoration: none; } .db-post__content .glossary-block a:hover, .db-post__content .glossary-block a:focus-visible { text-decoration: underline; text-underline-offset: 3px; } /* ========================================================================== Galerien auf Seiten (z. B. "Agenturen": Logo + Adresse) als gleichmäßiges Raster ========================================================================== */ .db-page .gallery { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; margin: 24px 0; } .db-page .gallery > br { display: none; } .db-page .gallery .gallery-item { float: none !important; width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 0 12px; border: 1px solid #e5e5e5; text-align: center; } .db-page .gallery .gallery-icon img { display: block; width: 100%; height: auto; margin: 0; border: 0 !important; } .db-page .gallery .gallery-caption { margin: 0; padding: 10px 8px 0; font-size: 13px; line-height: 1.45; color: #555; } @media (max-width: 989px) { .db-page .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 543px) { .db-page .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } } html[data-theme="dark"] .db-post__content .glossary-link-initial-item a { border-color: var(--db-dark-border); color: var(--db-dark-text); } html[data-theme="dark"] .db-post__content .glossary-link-initial-item a:hover, html[data-theme="dark"] .db-post__content .glossary-link-initial-item a:focus-visible { background: var(--db-dark-text); border-color: var(--db-dark-text); color: #141414; outline-color: var(--db-dark-text); } html[data-theme="dark"] .db-post__content .glossary-no-link-initial-item { border-color: var(--db-dark-line); color: var(--db-dark-text-2); } html[data-theme="dark"] .glossary-letter { border-color: var(--db-dark-line); } html[data-theme="dark"] .db-post__content .glossary-block a { color: var(--db-dark-text); } html[data-theme="dark"] .db-page .gallery .gallery-item { border-color: var(--db-dark-line); background: var(--db-dark-surface); } html[data-theme="dark"] .db-page .gallery .gallery-icon { background: #fff; } html[data-theme="dark"] .db-page .gallery .gallery-caption { color: var(--db-dark-text-2); } /* ========================================================================== Mitlaufender Header (ersetzt Astra Pro "Sticky Header", Skript: functions.php §14) Desktop: Logo-Zeile scrollt weg, Menüzeile bleibt oben (mit Icon-Logo links). Mobil: ganze Kopfzeile bleibt oben – Logo unverändert, Menü-Button bleibt sichtbar. ========================================================================== */ :root { --db-above-h: 130px; --db-adminbar: 0px; } .admin-bar { --db-adminbar: 32px; } @media (max-width: 782px) { .admin-bar { --db-adminbar: 46px; } } @media (max-width: 600px) { .admin-bar { --db-adminbar: 0px; } } html { scroll-padding-top: calc(96px + var(--db-adminbar)); } #masthead { position: sticky; top: var(--db-adminbar); z-index: 99; transition: box-shadow 0.2s ease; } .ast-desktop #masthead { top: calc(var(--db-adminbar) - var(--db-above-h)); } #masthead.db-stuck { box-shadow: 0 2px 10px rgba(36, 50, 66, 0.075); } /* Desktop: Icon-Logo links neben dem Menü nur im mitlaufenden Zustand */ #masthead.db-stuck #ast-desktop-header .ast-header-html-1 { display: flex; align-items: center; margin-right: 20px; animation: db-fade-in 0.2s ease both; } @keyframes db-fade-in { from { opacity: 0; } to { opacity: 1; } } /* Mobil: aufgeklapptes Menü bleibt scrollbar, wenn es höher als der Bildschirm ist */ .ast-header-break-point.ast-main-header-nav-open #masthead .ast-mobile-header-content { max-height: calc(100vh - 80px - var(--db-adminbar)); max-height: calc(100dvh - 80px - var(--db-adminbar)); overflow-y: auto; overscroll-behavior: contain; } @media (prefers-reduced-motion: reduce) { #masthead { transition: none; } #masthead.db-stuck #ast-desktop-header .ast-header-html-1 { animation: none; } } html[data-theme="dark"] #masthead.db-stuck { box-shadow: 0 1px 0 var(--db-dark-line), 0 6px 18px rgba(0, 0, 0, 0.5); } /* Glossar-Tooltips (Plugin setzt z-index 9999) dürfen nicht über dem mitlaufenden Header liegen */ .glossary-tooltip { z-index: 1 !important; } .glossary-tooltip:hover, .glossary-tooltip:focus-within { z-index: 98 !important; } /* ========================================================================== Sidebar: Empfehlungen (graue Kästen wie im Original) und Meistgelesen ========================================================================== */ .db-featured, .db-popular { margin: 0; padding: 0; list-style: none; } .db-featured__item { margin: 0 0 12px; background: #e6e6e6; } .db-featured__link { display: block; padding: 12px 12px 14px; color: #333; text-align: center; text-decoration: none; } .db-featured__img, .db-popular__img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; } .db-featured__title { display: block; margin-top: 10px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.4; } .db-featured__link:hover .db-featured__title, .db-featured__link:focus-visible .db-featured__title { text-decoration: underline; text-underline-offset: 3px; } .db-featured__link:focus-visible, .db-popular__link:focus-visible { outline: 2px solid #333; outline-offset: 2px; } .db-popular { counter-reset: db-pop; } .db-popular__item { counter-increment: db-pop; margin: 0; padding: 12px 0; border-bottom: 1px solid var(--db-line, #e5e5e5); } .db-popular__item:first-child { padding-top: 0; } .db-popular__link { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: start; color: #333; text-decoration: none; } .db-popular__link .db-picture, .db-popular__img { grid-column: 1; grid-row: 1; } .db-popular__title { grid-column: 2; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.35; } .db-popular__title::before { content: counter(db-pop) ". "; font-family: "Oswald", Helvetica, Arial, sans-serif; font-weight: 700; color: #7d6242; } .db-popular__link:hover .db-popular__title { text-decoration: underline; text-underline-offset: 3px; } html[data-theme="dark"] .db-featured__item { background: var(--db-dark-surface-2); } html[data-theme="dark"] .db-featured__link, html[data-theme="dark"] .db-popular__link { color: var(--db-dark-text); } html[data-theme="dark"] .db-popular__item { border-color: var(--db-dark-line); } html[data-theme="dark"] .db-popular__title::before { color: var(--db-dark-accent); } html[data-theme="dark"] .db-featured__link:focus-visible, html[data-theme="dark"] .db-popular__link:focus-visible { outline-color: var(--db-dark-text); } /* ========================================================================== Borlabs Cookie: Dialog bleibt hell – Texte schwarz, Links/Buttons mit ausreichendem Kontrast (WCAG AA), auch im Dunkelmodus der Seite ========================================================================== */ #BorlabsCookieBox, .brlbs-cmpnt-container { --dialog-text-color: #000; --dialog-footer-text-color: #000; --dialog-card-text-color: #000; --dialog-list-item-text-color-even: #000; --dialog-list-item-text-color-odd: #000; --dialog-table-row-text-color-even: #000; --dialog-table-row-text-color-odd: #000; --dialog-tab-bar-tab-text-color-inactive: #000; --dialog-search-bar-input-text-color: #000; --dialog-link-primary-color: #1a6b2e; --dialog-link-primary-color-hover: #0f4a1f; --dialog-link-secondary-color: #333; --dialog-link-secondary-color-hover: #000; --dialog-button-accept-all-color: #1e7b34; --dialog-button-accept-all-color-hover: #16612a; --dialog-button-accept-only-essential-text-color: #000; --dialog-button-accept-only-essential-text-color-hover: #000; --dialog-button-close-text-color: #000; --dialog-button-close-text-color-hover: #000; --dialog-button-save-consent-text-color: #000; --dialog-button-save-consent-text-color-hover: #000; --dialog-card-control-element-color: #1a6b2e; --dialog-card-control-element-color-hover: #0f4a1f; --dialog-list-item-control-element-color: #1a6b2e; --dialog-list-item-control-element-color-hover: #0f4a1f; --dialog-control-element-color: #1a6b2e; --dialog-control-element-color-hover: #0f4a1f; --dialog-tab-bar-tab-background-color-active: #1e7b34; --dialog-tab-bar-tab-border-color-bottom-active: #1e7b34; --dialog-tab-bar-tab-border-color-left-active: #1e7b34; --dialog-tab-bar-tab-border-color-right-active: #1e7b34; --dialog-tab-bar-tab-border-color-top-active: #1e7b34; --dialog-checkbox-background-color-active: #1e7b34; --dialog-checkbox-border-color-active: #1e7b34; } #BorlabsCookieBox .brlbs-cmpnt-dialog, .brlbs-cmpnt-container .brlbs-cmpnt-dialog { color-scheme: light; } html[data-theme="dark"] #BorlabsCookieBox .brlbs-cmpnt-dialog :is(p, li, h1, h2, h3, h4, h5, h6), html[data-theme="dark"] .brlbs-cmpnt-container .brlbs-cmpnt-dialog :is(p, li, h1, h2, h3, h4, h5, h6) { color: inherit; } html[data-theme="dark"] #BorlabsCookieBox .brlbs-cmpnt-dialog a:not([class*="btn"]):not([class*="button"]), html[data-theme="dark"] .brlbs-cmpnt-container .brlbs-cmpnt-dialog a:not([class*="btn"]):not([class*="button"]) { color: var(--dialog-link-primary-color); } /* Glossar-Tooltip: "Weiterlesen" lesbar (Plugin-Pink hat auf Grau nur 2,8:1) */ .glossary-tooltip .glossary-more, .glossary-tooltip .glossary-more:visited { color: #3d2f1f !important; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } .glossary-tooltip .glossary-more:hover, .glossary-tooltip .glossary-more:focus-visible { color: #000 !important; } /* Mitlaufender Header am Desktop: 60 px statt 80 px hoch. Die 20 px werden unten als Abstand ausgeglichen, damit der Inhalt beim Umschalten nicht springt (kein CLS). */ @media (min-width: 922px) { .ast-desktop #masthead .ast-primary-header-bar .site-primary-header-wrap, .ast-desktop #masthead .ast-primary-header-bar .main-header-menu > .menu-item { transition: min-height 0.2s ease, line-height 0.2s ease; } .ast-desktop #masthead { transition: box-shadow 0.2s ease, margin-bottom 0.2s ease; } .ast-desktop #masthead.db-stuck { margin-bottom: 20px; } .ast-desktop #masthead.db-stuck .ast-primary-header-bar .site-primary-header-wrap { min-height: 60px; } .ast-desktop #masthead.db-stuck .ast-primary-header-bar .main-header-menu > .menu-item { line-height: 60px; } } @media (min-width: 922px) and (prefers-reduced-motion: reduce) { .ast-desktop #masthead, .ast-desktop #masthead .ast-primary-header-bar .site-primary-header-wrap, .ast-desktop #masthead .ast-primary-header-bar .main-header-menu > .menu-item { transition: none; } } /* Menü-Abstand: Die Punkte des Hauptmenüs rücken mit der Fensterbreite zusammen (ab 922 px Desktop-Menü). Im mitlaufenden Zustand steht zusätzlich das Icon-Logo links – dann wurde das Menü bis ca. 1030 px zweizeilig. Abstand links/rechts wächst von 5 px (922 px) auf 17 px (ab ca. 1070 px, Astra-Standard). */ @media (min-width: 922px) { #ast-desktop-header .main-header-menu > .menu-item > .menu-link { padding-left: clamp(5px, calc(4.75px + (100vw - 922px) * 0.0835), 17px); padding-right: clamp(5px, calc(4.75px + (100vw - 922px) * 0.0835), 17px); } } /* Suche im Hauptmenü: Desktop = Lupe rechts neben dem Menü, mobil = Suchfeld als erster Menüpunkt */ .db-menu-search .search-form { display: flex; gap: 8px; margin: 0; } .db-menu-search .search-form label { flex: 1; margin: 0; } .db-menu-search .search-field { width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid #767676; border-radius: 0; font-size: 16px; background: #fff; color: #1e293b; box-sizing: border-box; } .db-menu-search .search-submit { min-height: 44px; padding: 0 18px; border: 1px solid #333; border-radius: 0; background: #333; color: #fff; font-family: "Oswald", Helvetica, Arial, sans-serif; letter-spacing: 0.7px; text-transform: uppercase; cursor: pointer; } #ast-desktop-header .db-menu-search--desktop { position: absolute; left: 100%; top: 0; height: 100%; display: flex; align-items: center; margin-left: 6px; list-style: none; } .db-search-toggle { position: relative; } .db-search-toggle > summary { list-style: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; color: #334155; } .db-search-toggle > summary::-webkit-details-marker { display: none; } .db-search-toggle > summary:hover, .db-search-toggle[open] > summary { background: rgba(51, 65, 85, 0.08); } .db-search-toggle > summary:focus-visible { outline: 2px solid var(--db-focus, #1e293b); outline-offset: 2px; } .db-search-panel { position: absolute; right: 0; top: calc(100% + 14px); z-index: 1000; width: min(380px, calc(100vw - 32px)); padding: 12px; background: #fff; border: 1px solid #d5dbe3; box-shadow: 0 8px 24px rgba(36, 50, 66, 0.15); } .db-menu-search--mobile { list-style: none; padding: 12px 20px; } html[data-theme="dark"] .db-search-toggle > summary { color: var(--db-dark-text); } html[data-theme="dark"] .db-search-toggle > summary:hover, html[data-theme="dark"] .db-search-toggle[open] > summary { background: rgba(235, 232, 228, 0.1); } html[data-theme="dark"] .db-search-panel { background: var(--db-dark-surface); border-color: var(--db-dark-line); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); } html[data-theme="dark"] .db-menu-search .search-field { background: var(--db-dark-surface-2); color: var(--db-dark-text); border-color: var(--db-dark-border); } html[data-theme="dark"] .db-menu-search .search-submit { background: var(--db-dark-accent); border-color: var(--db-dark-accent); color: #141414; }