/* * module-royalyoga.css – Ergänzungen zu royalyoga.css für Bausteine des gemeinsamen * CMS (von Hand gepflegt; module.css wird dagegen erzeugt). */ /* Sprunglink „Zum Inhalt springen“ – nur bei Tastaturfokus sichtbar */ .skip-link { position: absolute; left: 1rem; top: -100px; z-index: 2000; padding: .6rem 1rem; background: var(--ry-gold-3, #e1b15b); color: var(--ry-ink, #22271f); border-radius: 999px; font-weight: 500; } .skip-link:focus { top: 1rem; } /* Sichtbare Fokusmarkierung für Tastaturbedienung */ a:focus-visible, button:focus-visible, .btn:focus-visible, .form-control:focus-visible, .form-select:focus-visible, .form-check-input:focus-visible, .accordion-button:focus-visible { outline: 3px solid var(--ry-gold-3, #e1b15b); outline-offset: 2px; box-shadow: none; } main:focus { outline: none; } /* Hinweis-Popup: Bild (optional, aus Inhalte → Popups) */ .ry-popup-image { max-height: 220px; object-fit: cover; width: 100%; } /* Bewerbungsformular: Legende wie die Zwischenüberschriften */ fieldset > legend.ry-h3 { float: none; width: auto; } /* Code-Schnipsel (z. B. Cookie-Namen wie ry_consent in der Datenschutzerklärung): Bootstrap färbt pink-rot – hier in den Royal-Yoga-Farben. */ code { color: var(--ry-forest); background: var(--ry-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) als Dialog. Vorher ohne jede Gestaltung: Er erschien als Textblock unter dem Fußbereich. Aufbau wie bei der Dorfbäckerei, Farben der Website. Ebene über Kopf und Popups (z-index 10050). Die Schaltflächen sind weiter unten gestaltet. */ .ry-consent[hidden] { display: none; } .ry-consent { position: fixed; inset: 0; z-index: 10050; display: flex; align-items: center; justify-content: center; padding: 1rem; } .ry-consent__overlay { position: absolute; inset: 0; background: rgba(34, 39, 31, .55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } .ry-consent__dialog { position: relative; width: 100%; max-width: 46rem; max-height: 92vh; max-height: 92dvh; overflow-y: auto; padding: 1.6rem 1.5rem 1.25rem; background: #fff; border-radius: 18px; box-shadow: 0 14px 40px rgba(34, 39, 31, .22); color: var(--ry-ink); font-family: var(--ry-font-body); } .ry-consent__title { margin: 0; font-family: var(--ry-font-head); font-size: 1.9rem; line-height: 1.2; color: var(--ry-forest); } .ry-consent__text { margin: .6rem 0 0; font-size: .95rem; line-height: 1.6; color: #5b6157; } .ry-consent__list { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .5rem; } .ry-consent__item { border: 1px solid var(--ry-line); border-radius: 10px; background: var(--ry-cream); } .ry-consent__label { display: flex; gap: .7rem; align-items: flex-start; margin: 0; padding: .7rem .85rem; cursor: pointer; } .ry-consent__label input { margin-top: .2rem; width: 1.05rem; height: 1.05rem; flex: 0 0 auto; accent-color: var(--ry-forest); } .ry-consent__label input:disabled { cursor: not-allowed; opacity: .75; } .ry-consent__body { display: block; } .ry-consent__body strong { display: block; color: var(--ry-forest); font-size: .95rem; } .ry-consent__hint { display: block; margin-top: .2rem; font-size: .8125rem; line-height: 1.55; color: #5b6157; } .ry-consent__actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.1rem; } .ry-consent__actions .btn { flex: 1 1 12rem; justify-content: center; padding: .6rem 1.2rem; cursor: pointer; } .ry-consent__links { margin: .9rem 0 0; font-size: .8125rem; color: #5b6157; } .ry-consent__links a { color: var(--ry-forest); } .ry-consent :focus-visible { outline: 2px solid var(--ry-forest); outline-offset: 2px; } html.ry-consent-open { overflow: hidden; } @media (max-width: 600px) { .ry-consent { align-items: flex-end; padding: 0; } .ry-consent__dialog { border-radius: 18px 18px 0 0; 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(--ry-line); 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 ry-btn-primary (Gold) bzw. Umriss in Petrol – vorher ungestaltet. */ .ry-consent .ry-consent__actions .btn { border-radius: 999px; border: 2px solid var(--ry-forest); font-family: var(--ry-font-body); font-weight: 500; padding: .6rem 1.4rem; } .ry-consent .ry-consent__actions .btn--primary { background: var(--ry-corp-accent); border-color: var(--ry-corp-accent); color: var(--ry-ink); } .ry-consent .ry-consent__actions .btn--primary:hover { background: var(--ry-gold); border-color: var(--ry-gold); color: #fff; } .ry-consent .ry-consent__actions .btn--ghost { background: transparent; color: var(--ry-forest); } .ry-consent .ry-consent__actions .btn--ghost:hover { background: var(--ry-cream); } /* Nur eine Schaltfläche (keine optionalen Kategorien): als Hauptknopf (Gold) zeigen. */ .ry-consent .ry-consent__actions .btn:only-child { background: var(--ry-corp-accent); border-color: var(--ry-corp-accent); color: var(--ry-ink); } .ry-consent .ry-consent__actions .btn:only-child:hover { background: var(--ry-gold); border-color: var(--ry-gold); color: #fff; } /* Einblenden (.reveal aus module.css, Klasse is-visible setzt site.js): Die Regel für den sichtbaren Zustand fehlte – module.css übernimmt sie nicht, weil royalyoga.css „is-visible“ für das Popup selbst nutzt. Folge bis 10.10.2026: Kontaktformular und Kontaktdaten (und alle anderen .reveal-Bereiche) blieben unsichtbar. */ .reveal.is-visible { opacity: 1; transform: none; } /* Handy: seitliches Einblenden schob noch nicht sichtbare Bereiche 60 px aus dem Bild (waagerechtes Scrollen). */ @media (max-width: 767.98px) { .reveal:not(.is-visible):is(.reveal--left, .reveal--right) { transform: translateY(24px); } } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } } /* Kontaktseite (Aufbau aus dem gemeinsamen CMS): Royal-Yoga färbt Überschriften, Anschrift und Links dunkel – im dunklen Kopfbereich und im Kasten „Direkter Kontakt“ waren sie dadurch unlesbar bzw. unsichtbar. */ .application-hero h1, .application-hero .h1, .legal-hero h1, .career-hero h1 { color: #fff; } .contact-details h2, .contact-details address, .contact-details dd { color: #fff; } .contact-details dd a { color: #fff; text-decoration: underline; text-underline-offset: 3px; } .contact-details dd a:hover, .contact-details dd a:focus-visible { color: var(--ry-corp-accent); } /* ---------- Fuß: Hintergrundmuster (seit 20.10.2026; wählbar unter Website → Design, includes/ry-fussmuster.php) ---------- Muster als Maske über einer Farbfläche (::before) hinter dem Fußinhalt. Werte kommen als CSS-Variablen am