/* * module-baeckerei.css – Ergänzungen für die Bäckerei-Optik, die durch die * gemeinsame Technik hinzukommen (von Hand gepflegt): * - Hauptnavigation aus Website → Navigation: aktive Seite (aria-current), * Aufklappmenüs, hervorgehobene Schaltfläche * - optionale Kontaktleiste über dem Kopf, Kurzbeschreibung im Fuß * Farben über die Bäckerei-Variablen (--kb-*), damit Website → Design wirkt. */ /* Wählbare Schriften aus Website → Design (lokal, SIL OFL) */ @font-face { font-family: 'SN Pro'; font-style: normal; font-weight: 300; font-display: swap; src: url('/assets/fonts/sn-pro-v1-latin-300.woff2') format('woff2'); } @font-face { font-family: 'SN Pro'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/sn-pro-v1-latin-500.woff2') format('woff2'); } @font-face { font-family: 'SN Pro'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/sn-pro-v1-latin-700.woff2') format('woff2'); } @font-face { font-family: 'SN Pro'; font-style: normal; font-weight: 800; font-display: swap; src: url('/assets/fonts/sn-pro-v1-latin-800.woff2') format('woff2'); } @font-face { font-display: swap; font-family: 'Inter'; font-style: normal; font-weight: 400; src: url('/assets/fonts/inter-v20-latin-regular.woff2') format('woff2'); } @font-face { font-display: swap; font-family: 'Lora'; font-style: normal; font-weight: 400; src: url('/assets/fonts/lora-v37-latin-regular.woff2') format('woff2'); } @font-face { font-display: swap; font-family: 'Lora'; font-style: normal; font-weight: 600 800; src: url('/assets/fonts/lora-v37-latin-600.woff2') format('woff2'); } /* Aktive Seite: wie bisher .active */ .kb-header nav a[aria-current="page"] { color: var(--kb-yellow); } /* Aufklappmenü (ry_nav_render_top(): .nav__dropdown) */ .kb-header nav .nav__dropdown { position: relative; display: flex; align-items: center; } .kb-header nav .nav__dropdown-arrow { display: inline-block; margin-left: .15rem; font-size: .75em; transition: transform .15s ease; } .kb-header nav .nav__dropdown-menu { position: absolute; top: 100%; left: -1rem; z-index: 50; display: none; min-width: 220px; margin: .6rem 0 0; padding: .5rem 0; list-style: none; background: var(--kb-red-dark); border-top: 3px solid var(--kb-yellow); border-radius: 0 0 6px 6px; box-shadow: 0 14px 30px rgba(0, 0, 0, .18); } .kb-header nav .nav__dropdown-menu::before { /* Brücke, damit das Menü beim Zeigen nicht zuklappt */ content: ""; position: absolute; top: -.9rem; left: 0; right: 0; height: .9rem; } .kb-header nav .nav__dropdown-menu a { display: block; padding: .45rem 1rem; white-space: nowrap; } .kb-header nav .nav__dropdown:hover .nav__dropdown-menu, .kb-header nav .nav__dropdown:focus-within .nav__dropdown-menu { display: block; } .kb-header nav .nav__dropdown:hover .nav__dropdown-arrow, .kb-header nav .nav__dropdown:focus-within .nav__dropdown-arrow { transform: rotate(180deg); } /* Hervorgehobene Schaltfläche (Website → Navigation) */ .kb-header nav .nav__cta a { padding: .45rem 1rem; border-radius: 999px; background: var(--kb-yellow); color: var(--kb-red-dark); } .kb-header nav .nav__cta a:hover, .kb-header nav .nav__cta a:focus-visible { background: #fff; color: var(--kb-red); } /* Sichtbare Fokusmarkierung in der roten Kopfleiste */ .kb-header nav a:focus-visible, .kb-menu:focus-visible, .kb-brand:focus-visible { outline: 3px solid var(--kb-yellow); outline-offset: 3px; } @media (max-width: 800px) { .kb-header nav .nav__dropdown { display: block; } .kb-header nav .nav__dropdown-menu { position: static; display: block; min-width: 0; margin: 0 0 .4rem; padding: 0 0 0 1rem; background: transparent; border: 0; box-shadow: none; } .kb-header nav .nav__dropdown-menu::before, .kb-header nav .nav__dropdown-arrow { display: none; } .kb-header nav .nav__dropdown-menu a { padding: .35rem 0; } .kb-header nav .nav__cta { margin-top: .5rem; } } /* Kontaktleiste über dem Kopf (Website → Design → „Kontaktleiste“) */ .kb-topbar { background: var(--kb-red-dark); color: #fff; font-size: .875rem; } .kb-topbar__inner { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .25rem 1.5rem; padding-block: .35rem; } .kb-topbar a { color: #fff; text-decoration: none; } .kb-topbar a:hover, .kb-topbar a:focus-visible { color: var(--kb-yellow); } /* Kurzbeschreibung im Fußbereich (Website → Design → „Kurzbeschreibung“) */ .kb-footer__claim { max-width: 22rem; margin: 1rem 0 0; opacity: .9; } /* Kopfbereiche der Modulseiten (Team, Bewerbung, Leistungen, Inhalte) auf dunklem Rot: Text, Brotkrumen und Überzeile hell, damit der Kontrast reicht (WCAG AA). */ :is(.career-hero, .team-hero, .career-team-hero, .service-hero, .application-hero, .content-hero) { color: #fff; } :is(.career-hero, .team-hero, .career-team-hero, .service-hero, .application-hero, .content-hero) :is(p, li, .breadcrumb, .breadcrumb a, .breadcrumb span, .hero__lead, .service-hero__lead) { color: #fff; } :is(.career-hero, .team-hero, .career-team-hero, .service-hero, .application-hero, .content-hero) .kicker { background: rgba(255, 255, 255, .14); color: var(--kb-yellow); } :is(.career-hero, .team-hero, .career-team-hero, .service-hero, .application-hero, .content-hero) a:not(.button):focus-visible { outline: 3px solid var(--kb-yellow); outline-offset: 3px; } /* Überschriften der Modulseiten in der Überschriftenschrift der Bäckerei (Website → Design) */ :is(.career-hero, .team-hero, .career-team-hero, .service-hero, .application-hero, .content-hero, .team-heading, .jobs-heading, .section-heading) :is(h1, h2) { font-family: var(--font-heading, KBLora, serif); } /* Hero-Slider der Startseite: ältere .hero-Regeln der Bäckerei-Stylesheets (Abstand, zentrierter Text, schmale Spalte) für den Slider zurücksetzen. Die Slider-Regeln selbst stehen in module.css unter .kb-heroslider. */ .kb-heroslider.hero { padding: 0; } .kb-heroslider.hero .hero__inner { justify-items: start; text-align: left; max-width: var(--max, 1180px); margin-inline: auto; padding-inline: clamp(16px, 4vw, 24px); } .kb-heroslider.hero .hero__title { max-width: 18ch; font-family: var(--font-heading, KBLora, serif); } .kb-heroslider.hero .hero__actions { justify-content: flex-start; } @media (max-width: 640px) { .kb-heroslider.hero .hero__actions .button { flex: 1 1 100%; text-align: center; } } /* Code-Schnipsel (z. B. technische Namen in Rechtstexten oder Beiträgen): Bootstrap färbt pink-rot – hier in der Bäckerei-Textfarbe. */ code { color: var(--kb-ink); background: var(--kb-cream); padding: .1em .35em; border-radius: 4px; font-size: .9em; overflow-wrap: anywhere; } pre code { padding: 0; background: none; border-radius: 0; } /* Cookie-Hinweis (Datenschutzeinstellungen): über dem roten Kopf, der mit z-index 9999 klebt – vorher verdeckte er auf dem Handy die Überschrift des Dialogs. */ .ry-consent { z-index: 10050; } /* Handy: Die drei Schaltflächen bleiben unten im Dialog sichtbar, nur Text und Kategorien scrollen; Beschreibungen etwas kompakter. */ @media (max-width: 600px) { .ry-consent__dialog { max-height: 92vh; max-height: 92dvh; padding: 1.1rem 1rem 0; } .ry-consent__text { font-size: .875rem; } .ry-consent__hint { font-size: .75rem; line-height: 1.45; } .ry-consent__label { padding: .55rem .7rem; } .ry-consent__actions { position: sticky; bottom: 0; z-index: 1; margin: .8rem -1rem 0; padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom, 0px)); background: #fff; border-top: 1px solid var(--color-border); gap: .45rem; } .ry-consent__actions .btn { flex: 1 1 100%; padding-top: .55rem; padding-bottom: .55rem; } .ry-consent__links { margin: 0; padding: 0 0 .8rem; background: #fff; } } /* Cookie-Hinweis: Schaltflächen wie die übrigen der Bäckerei (kb-btn-primary / kb-btn-light) – vorher CMS-Blau bzw. ohne Hintergrund. */ .ry-consent .ry-consent__actions .btn { border-radius: 999px; font-family: inherit; font-weight: 700; border: 2px solid var(--kb-red); } .ry-consent .ry-consent__actions .btn--primary { background: var(--kb-red); border-color: var(--kb-red); color: #fff; } .ry-consent .ry-consent__actions .btn--primary:hover { background: var(--kb-red-dark); border-color: var(--kb-red-dark); color: #fff; } .ry-consent .ry-consent__actions .btn--ghost { background: #fff; color: var(--kb-red); } .ry-consent .ry-consent__actions .btn--ghost:hover { background: var(--kb-cream); color: var(--kb-red-dark); } .ry-consent .ry-consent__links a { color: var(--kb-red); } /* ---------- Fuß: Hintergrundmuster (seit 20.10.2026; wählbar unter Website → Design, includes/kb-fussmuster.php) ---------- Eigene Ebene ::after über dem braunen Verlauf und hinter dem Inhalt (.kb-footer__grid hat z-index 1); ::before bleibt die große Ähre rechts unten (koebler-base.css) und lässt sich mit kb-ohne-aehre ausblenden. Werte als CSS-Variablen am