/* Theme Name: Radio Hoffmann Theme URI: https://radio-hoffmann.de Author: dev-jml.de Description: Eigenes Theme für radio-hoffmann.de. One-Pager mit Logo-Kopf, Kontaktdaten und Öffnungszeiten, Team-Karussell, Light/Dark-Mode. Kein Page-Builder, keine Fremd-Bibliotheken, kein jQuery – nur Core-APIs. Version: 2.0.0 Requires at least: 6.4 Requires PHP: 8.1 License: proprietär Text Domain: radio-hoffmann */ /* ========================================================================== FARBEN Markenfarben direkt aus logo.jpg ausgelesen (nicht geschätzt): Blau #0D63A9 Wortmarke "RADIO HOFFMANN" -> Primärfarbe Gruen #33A55F Funkwellen, "MEDIENTECHNIK" -> Sekundärfarbe Rot #E4003B Sendepunkt, Schriftzug -> Akzent, sparsam einsetzen Im Dark Mode sind die Originaltöne zu dunkel (Blau auf Anthrazit ist kaum lesbar). Deshalb aufgehellte Varianten mit gleichem Farbton – die Marke bleibt erkennbar, der Kontrast stimmt. ========================================================================== */ :root { --rh-blue: #0d63a9; --rh-blue-dark: #094b81; --rh-green: #33a55f; --rh-green-dark: #27804a; --rh-red: #e4003b; /* Light Mode (Standard) */ --rh-bg: #ffffff; --rh-surface: #f4f6f9; --rh-surface-2: #e9edf2; --rh-fg: #16191d; --rh-muted: #5b6472; --rh-border: #dde2e8; --rh-primary: var(--rh-blue); --rh-primary-fg: #ffffff; --rh-accent: var(--rh-green); --rh-highlight: var(--rh-red); --rh-logo-plate: transparent; /* im Dark Mode weißes Plattchen, s.u. */ --rh-shadow: 0 1px 2px rgba(16, 25, 40, .06), 0 8px 24px rgba(16, 25, 40, .08); --rh-maxwidth: 72rem; --rh-textwidth: 44rem; --rh-radius: 10px; --rh-header-h: 5rem; } /* Dark Mode: folgt der Systemeinstellung ... */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --rh-bg: #101419; --rh-surface: #171c23; --rh-surface-2: #1f262f; --rh-fg: #e8ecf1; --rh-muted: #9aa5b2; --rh-border: #2a323c; --rh-primary: #62b0ee; --rh-primary-fg: #0b1016; --rh-accent: #5cc98a; --rh-highlight: #ff6b85; --rh-logo-plate: #ffffff; --rh-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35); } } /* ... lässt sich aber per Umschalter im Kopf übersteuern. data-theme wird von assets/js/theme.js auf gesetzt und in localStorage gemerkt. */ :root[data-theme="dark"] { --rh-bg: #101419; --rh-surface: #171c23; --rh-surface-2: #1f262f; --rh-fg: #e8ecf1; --rh-muted: #9aa5b2; --rh-border: #2a323c; --rh-primary: #62b0ee; --rh-primary-fg: #0b1016; --rh-accent: #5cc98a; --rh-highlight: #ff6b85; --rh-logo-plate: #ffffff; --rh-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35); } /* ========================================================================== GRUNDLAGEN ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--rh-header-h) + 1rem); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } body { margin: 0; background: var(--rh-bg); color: var(--rh-fg); font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; font-size: 1.05rem; line-height: 1.65; -webkit-font-smoothing: antialiased; } a { color: var(--rh-primary); text-underline-offset: .2em; } a:hover { color: var(--rh-blue-dark); } :root[data-theme="dark"] a:hover { color: #9bd0ff; } a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid var(--rh-primary); outline-offset: 2px; border-radius: 3px; } img, video, iframe { max-width: 100%; height: auto; } h1, h2, h3 { line-height: 1.15; letter-spacing: -.025em; font-weight: 800; } h1 { font-size: clamp(2rem, 5vw, 3rem); } h2 { font-size: clamp(1.6rem, 3.5vw, 2.3rem); } h3 { font-size: 1.25rem; } .rh-wrap { max-width: var(--rh-maxwidth); margin: 0 auto; padding: 0 1.25rem; } .rh-skip-link { position: absolute; left: -9999px; } .rh-skip-link:focus { left: 1rem; top: 1rem; z-index: 100; background: var(--rh-bg); color: var(--rh-fg); padding: .6rem 1rem; border: 2px solid var(--rh-primary); border-radius: var(--rh-radius); } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* ========================================================================== KOPFBEREICH – bleibt beim Scrollen stehen Beide Leisten stecken in EINEM sticky-Element (.rh-headbar). Wäre nur die Hauptleiste sticky, würde die Infoleiste beim Scrollen darunter verschwinden und der Kopf beim Zurückscrollen springen. ========================================================================== */ .rh-headbar { position: sticky; top: 0; z-index: 50; /* Milchglas: Der Inhalt scrollt sichtbar darunter durch, statt hart abgeschnitten zu werden. color-mix hält die Farbe automatisch passend, auch im Dark Mode. */ background: color-mix(in srgb, var(--rh-bg) 82%, transparent); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--rh-border); transition: box-shadow .25s ease, border-color .25s ease; } /* Erst beim Scrollen kommt der Schatten – am Seitenanfang wirkt der Kopf so Teil der Seite, beim Scrollen hebt er sich ab. Klasse setzt assets/js/theme.js. */ .rh-headbar.is-scrolled { box-shadow: 0 6px 24px rgba(16, 25, 40, .10); border-color: transparent; } :root[data-theme="dark"] .rh-headbar.is-scrolled { box-shadow: 0 6px 24px rgba(0, 0, 0, .45); } /* Ohne backdrop-filter (ältere Browser) lieber deckend als durchsichtig-unlesbar. */ @supports not (backdrop-filter: blur(1px)) { .rh-headbar { background: var(--rh-bg); } } /* --- Streifen 1: Logo | Öffnungszeiten | Kontakt, alles in einer Zeile --- */ .rh-header__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2.5rem; padding-block: .9rem; } /* .custom-logo-link greift, wenn im Backend ein eigenes Logo hochgeladen wird – WordPress erzeugt dann sein eigenes Markup statt unseres .rh-logo. */ .rh-logo, .custom-logo-link { display: inline-flex; align-items: center; margin-inline-end: auto; /* schiebt Zeiten und Kontakt nach rechts */ } .rh-logo img, .custom-logo-link img { display: block; width: auto; height: clamp(2.6rem, 7vw, 4.4rem); background: var(--rh-logo-plate); border-radius: 8px; padding: var(--rh-logo-pad, 0); } /* Im Dark Mode braucht das Logo einen hellen Grund: Die Wortmarke ist dunkelblau und wäre auf Anthrazit kaum zu erkennen. Ein weißes Plättchen erhält die Markenfarben unverändert – besser, als das Logo umzufärben. */ :root[data-theme="dark"] .rh-logo img, :root[data-theme="dark"] .custom-logo-link img { --rh-logo-pad: .4rem .6rem; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .rh-logo img, :root:not([data-theme="light"]) .custom-logo-link img { --rh-logo-pad: .4rem .6rem; } } /* Öffnungszeiten und Kontakt: zwei gleich aufgebaute Blöcke neben dem Logo. */ .rh-headinfo { font-size: .88rem; line-height: 1.5; } .rh-headinfo__head { display: flex; align-items: center; gap: .4rem; margin: 0 0 .3rem; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--rh-accent); } .rh-headinfo__head svg { width: .95em; height: .95em; } .rh-headinfo ul { list-style: none; margin: 0; padding: 0; } .rh-headinfo svg { width: 1em; height: 1em; flex: none; color: var(--rh-muted); } .rh-headinfo a { color: var(--rh-fg); text-decoration: none; } .rh-headinfo a:hover { color: var(--rh-primary); text-decoration: underline; } /* Drei Zeiten-Zeilen, Tag und Zeit spaltenweise ausgerichtet. */ .rh-headinfo__hours li { display: grid; grid-template-columns: 8.5rem auto; gap: 0 1rem; white-space: nowrap; } .rh-headinfo__hours li span:last-child { color: var(--rh-muted); } .rh-headinfo__contact li { display: flex; align-items: center; gap: .5rem; } .rh-cloak { display: inline-flex; align-items: center; gap: .5rem; } /* --- Streifen 2: blau, Menü --- */ .rh-navbar { background: var(--rh-blue); color: #fff; } :root[data-theme="dark"] .rh-navbar { background: #0a4d85; } .rh-navbar__inner { display: flex; align-items: center; gap: 1rem; min-height: 3rem; } .rh-nav { margin-inline-end: auto; } .rh-nav ul { display: flex; flex-wrap: wrap; gap: 0; list-style: none; margin: 0; padding: 0; } .rh-nav a { display: block; padding: .85rem 1.1rem; color: #fff; text-decoration: none; font-weight: 600; border-bottom: 3px solid transparent; } .rh-nav a:hover, .rh-nav .current-menu-item > a { color: #fff; background: rgba(255, 255, 255, .12); border-bottom-color: var(--rh-green); /* Grün aus dem Logo als Marker */ } /* Schaltflächen im blauen Streifen */ .rh-navtoggle, .rh-theme-toggle { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; height: 2.25rem; padding: 0 .6rem; flex: none; color: #fff; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .25); border-radius: 999px; cursor: pointer; font: inherit; font-size: .9rem; font-weight: 600; } .rh-theme-toggle { width: 2.25rem; padding: 0; margin-inline-start: auto; } .rh-navtoggle:hover, .rh-theme-toggle:hover { background: rgba(255, 255, 255, .22); border-color: rgba(255, 255, 255, .5); } .rh-navtoggle svg, .rh-theme-toggle svg { width: 1.2rem; height: 1.2rem; } .rh-navtoggle { display: none; } /* nur auf schmalen Geräten */ /* Sonne im Dark Mode, Mond im Light Mode – gezeigt wird, wohin es geht. */ .rh-theme-toggle .rh-icon-sun { display: none; } :root[data-theme="dark"] .rh-theme-toggle .rh-icon-sun { display: block; } :root[data-theme="dark"] .rh-theme-toggle .rh-icon-moon { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .rh-theme-toggle .rh-icon-sun { display: block; } :root:not([data-theme="light"]) .rh-theme-toggle .rh-icon-moon { display: none; } } /* ========================================================================== TABLET UND HANDY Bis 52rem klappt das Menü hinter eine Schaltfläche. Die Infoleiste zeigt dann nur noch die Öffnungszeiten – die Anschrift wäre einzeilig ohnehin abgeschnitten und steht vollständig im Fußbereich. ========================================================================== */ @media (max-width: 52rem) { /* Menü hinter eine Schaltfläche – die Menüpunkte würden sonst umbrechen und den blauen Streifen mehrzeilig machen. */ .rh-navtoggle { display: inline-flex; } .rh-navbar__inner { flex-wrap: wrap; min-height: 2.9rem; } .rh-nav { order: 3; flex-basis: 100%; margin-inline-end: 0; display: none; } .rh-nav.is-open { display: block; } .rh-nav ul { flex-direction: column; padding-bottom: .5rem; } .rh-nav li { border-top: 1px solid rgba(255, 255, 255, .2); } .rh-nav a { padding: .85rem .25rem; border-bottom: 0; } /* große Tippfläche */ /* Logo, Zeiten und Kontakt stapeln sich – nebeneinander wäre es zu eng. */ .rh-header__inner { gap: .9rem 1.5rem; } .rh-headinfo { font-size: .82rem; } .rh-headinfo__hours li { grid-template-columns: 7.5rem auto; } } @media (max-width: 30rem) { .rh-headinfo__hours li { grid-template-columns: 1fr; white-space: normal; } } /* Handy im Querformat: wenig Höhe, viel Breite. Der fixierte Kopf darf dort nicht den halben Bildschirm fressen. */ @media (max-height: 30rem) and (orientation: landscape) { :root { --rh-header-h: 3.25rem; } /* Querformat: Öffnungszeiten und Kontakt würden den halben Bildschirm füllen. Sie stehen vollständig im Fußbereich. */ .rh-headinfo { display: none; } .rh-logo img, .custom-logo-link img { height: 2rem; } .rh-section { padding-block: 2rem; } } /* ========================================================================== ABSCHNITTE (One-Pager) ========================================================================== */ .rh-section { padding-block: clamp(3rem, 7vw, 5.5rem); } .rh-section--alt { background: var(--rh-surface); } .rh-section__head { max-width: var(--rh-textwidth); margin-bottom: 2.5rem; } .rh-section__head h2 { margin: 0 0 .5rem; } .rh-section__head p { margin: 0; color: var(--rh-muted); font-size: 1.1rem; } /* Kleine Funkwellen-Linie als Trenner – Anleihe ans Logo */ .rh-eyebrow { display: inline-flex; align-items: center; gap: .5rem; margin: 0 0 .6rem; font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--rh-accent); } .rh-eyebrow::before { content: ""; width: 1.75rem; height: 2px; background: currentColor; border-radius: 2px; } /* --- Hero --- */ .rh-hero { position: relative; padding-block: clamp(3.5rem, 9vw, 7rem); background: radial-gradient(60rem 30rem at 85% -10%, color-mix(in srgb, var(--rh-green) 18%, transparent), transparent 60%), radial-gradient(50rem 28rem at 0% 0%, color-mix(in srgb, var(--rh-blue) 22%, transparent), transparent 60%), var(--rh-bg); border-bottom: 1px solid var(--rh-border); } .rh-hero__inner { max-width: var(--rh-textwidth); } .rh-hero h1 { margin: 0 0 1rem; font-size: clamp(2.1rem, 6vw, 3.4rem); } .rh-hero p { margin: 0 0 2rem; font-size: 1.2rem; color: var(--rh-muted); } .rh-buttons { display: flex; flex-wrap: wrap; gap: .75rem; } .rh-btn { display: inline-flex; align-items: center; gap: .5rem; padding: .8rem 1.5rem; font-weight: 600; text-decoration: none; border-radius: var(--rh-radius); border: 2px solid var(--rh-primary); background: var(--rh-primary); color: var(--rh-primary-fg); } .rh-btn:hover { background: var(--rh-blue-dark); border-color: var(--rh-blue-dark); color: #fff; } .rh-btn--ghost { background: transparent; color: var(--rh-primary); } .rh-btn--ghost:hover { background: var(--rh-primary); color: var(--rh-primary-fg); } /* --- Karten --- */ .rh-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); } .rh-card { background: var(--rh-bg); border: 1px solid var(--rh-border); border-radius: var(--rh-radius); padding: 1.5rem; box-shadow: var(--rh-shadow); } .rh-card h3 { margin: 0 0 .5rem; font-size: 1.2rem; } .rh-card p { margin: 0; color: var(--rh-muted); } /* ========================================================================== TEAM-KARUSSELL (Endlos-Ring) Kein Fremd-Skript und KEIN Scrollbalken mehr: ein nahtlos umlaufendes Band. assets/js/theme.js klont die Elemente und schiebt das Band per transform weiter; am Umschlagpunkt springt es unsichtbar um ein Set zurück. Bedienung nur über die zwei Pfeile. Pausiert bei Hover, Fokus und "reduzierter Bewegung"; der Takt (Sekunden) ist in den Einstellungen einstellbar. ========================================================================== */ .rh-team { position: relative; overflow: hidden; } .rh-team__track { display: flex; gap: 1.25rem; padding-block: .5rem 1.5rem; transition: transform .6s ease; will-change: transform; } /* Für den nahtlosen Rücksprung: Sprung ohne Animation. */ .rh-team__track.is-jumping { transition: none; } .rh-team__item { flex: 0 0 auto; width: min(16rem, 70vw); text-align: center; } .rh-team__photo { aspect-ratio: 1 / 1; margin-bottom: .9rem; overflow: hidden; border-radius: 50%; border: 4px solid var(--rh-surface-2); background: var(--rh-surface); } .rh-team__photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .rh-team__name { margin: 0; font-size: 1.1rem; font-weight: 700; } .rh-team__role { margin: .15rem 0 0; color: var(--rh-accent); font-weight: 600; font-size: .95rem; } .rh-team__bio { margin: .5rem 0 0; color: var(--rh-muted); font-size: .95rem; } .rh-team__controls { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .5rem; } .rh-team__btn { display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; color: var(--rh-fg); background: var(--rh-bg); border: 1px solid var(--rh-border); border-radius: 999px; cursor: pointer; } .rh-team__btn:hover { border-color: var(--rh-primary); color: var(--rh-primary); } .rh-team__btn svg { width: 1.1rem; height: 1.1rem; } /* ========================================================================== BEITRAEGE ========================================================================== */ .rh-entry + .rh-entry { margin-top: 2.5rem; padding-top: 2.5rem; border-top: 1px solid var(--rh-border); } .rh-entry__title { margin: 0 0 .35rem; font-size: 1.75rem; text-align: center; } .rh-entry__title a { color: inherit; text-decoration: none; } .rh-entry__title a:hover { color: var(--rh-primary); } .rh-entry__meta { margin: 0 0 1rem; color: var(--rh-muted); font-size: .9rem; } .rh-entry__thumb { margin: 0 0 1.25rem; } .rh-entry__thumb img { border-radius: var(--rh-radius); display: block; } .rh-entry__content { max-width: var(--rh-textwidth); } .rh-postcard { display: flex; flex-direction: column; overflow: hidden; background: var(--rh-bg); border: 1px solid var(--rh-border); border-radius: var(--rh-radius); box-shadow: var(--rh-shadow); } .rh-postcard img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; display: block; } .rh-postcard__body { padding: 1.25rem 1.4rem 1.5rem; } .rh-postcard__body h3 { margin: 0 0 .35rem; font-size: 1.2rem; } .rh-postcard__body h3 a { color: inherit; text-decoration: none; } .rh-postcard__body h3 a:hover { color: var(--rh-primary); } .rh-postcard time { color: var(--rh-muted); font-size: .85rem; } .rh-postcard p { margin: .5rem 0 0; color: var(--rh-muted); } .rh-pagination { margin-top: 3rem; display: flex; gap: .5rem; flex-wrap: wrap; } .rh-pagination .page-numbers { padding: .4rem .85rem; border: 1px solid var(--rh-border); border-radius: var(--rh-radius); text-decoration: none; } .rh-pagination .current { background: var(--rh-primary); border-color: var(--rh-primary); color: var(--rh-primary-fg); } /* ========================================================================== KONTAKT ========================================================================== */ .rh-contact { display: grid; gap: 2.5rem; grid-template-columns: 1fr; } @media (min-width: 56rem) { .rh-contact { grid-template-columns: 1fr 1.2fr; } } .rh-contact__list { list-style: none; margin: 0 0 2rem; padding: 0; display: grid; gap: 1rem; } .rh-contact__list li { display: flex; gap: .75rem; align-items: flex-start; } .rh-contact__list svg { width: 1.25rem; height: 1.25rem; flex: none; margin-top: .2rem; color: var(--rh-accent); } .rh-contact__list a { color: inherit; } .rh-hours { list-style: none; margin: 0; padding: 0; } .rh-hours li { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; border-bottom: 1px dashed var(--rh-border); } .rh-hours li:last-child { border-bottom: 0; } .rh-hours span:first-child { font-weight: 600; } .rh-hours span:last-child { color: var(--rh-muted); } /* ========================================================================== FORMULAR (Plugin radio-hoffmann-core) ========================================================================== */ .rh-form { display: grid; gap: 1rem; } .rh-form label { display: block; font-weight: 600; margin-bottom: .35rem; } .rh-form input[type="text"], .rh-form input[type="email"], .rh-form textarea { width: 100%; padding: .7rem .8rem; font: inherit; color: var(--rh-fg); background: var(--rh-bg); border: 1px solid var(--rh-border); border-radius: var(--rh-radius); } .rh-form textarea { min-height: 11rem; resize: vertical; } .rh-form button { justify-self: start; padding: .8rem 1.5rem; font: inherit; font-weight: 600; color: var(--rh-primary-fg); background: var(--rh-primary); border: 0; border-radius: var(--rh-radius); cursor: pointer; } .rh-form button:hover { background: var(--rh-blue-dark); color: #fff; } /* Honeypot: für Menschen unsichtbar, für Bots ein verlockendes Feld. Bewusst nicht display:none – manche Bots ignorieren solche Felder. */ .rh-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .rh-notice { padding: .9rem 1.1rem; border-radius: var(--rh-radius); border: 1px solid var(--rh-border); background: var(--rh-surface); margin-bottom: 1.5rem; } .rh-notice--ok { border-color: var(--rh-green); } .rh-notice--error { border-color: var(--rh-red); } /* ========================================================================== TITELBILDER (Hero-Slideshow) Beliebig viele Bilder wechseln oben auf der Startseite automatisch durch. Das Zuschneiden passiert hier rein optisch: Der Rahmen hat eine feste Höhe (--rh-hero-h aus den Einstellungen), das Bild füllt ihn mit object-fit:cover. Welcher Ausschnitt sichtbar ist, steuern object-position (Fokus) und transform:scale (Zoom) – beides je Bild als inline-Style aus dem PHP gesetzt. ========================================================================== */ .rh-hero { position: relative; /* Auf schmalen Geräten nicht die volle Wunschhöhe, sonst füllt ein Bild den ganzen ersten Bildschirm. Der kleinere der beiden Werte gewinnt. */ height: min(var(--rh-hero-h, 520px), 70vh); overflow: hidden; background: var(--rh-surface-2); border-bottom: 1px solid var(--rh-border); } .rh-hero__slide { position: absolute; inset: 0; margin: 0; opacity: 0; /* Sanftes Überblenden. Wird bei prefers-reduced-motion global entschärft (siehe Regel weiter oben im Stylesheet). */ transition: opacity .8s ease; /* Nicht angezeigte Bilder aus der Klick-/Tabreihenfolge nehmen. */ pointer-events: none; } .rh-hero__slide.is-active { opacity: 1; pointer-events: auto; } .rh-hero__img { width: 100%; height: 100%; object-fit: cover; display: block; /* object-position, transform (Zoom) und transform-origin setzt das PHP je Bild als inline-Style – hier stehen nur die Vorgaben. */ object-position: 50% 50%; } /* Ohne JavaScript ist nur das erste Bild aktiv; das genügt als statischer Kopf. Läuft JavaScript, blendet theme.js reihum das jeweils aktive Bild ein. */ /* ========================================================================== EINGEBETTETE SLIDESHOW (Block radio-hoffmann/slideshow) Dieselbe Überblend-Mechanik wie der Hero, aber als Element mitten im Beitrag: fester Höhenrahmen (--rh-ss-h aus dem Block), abgerundete Ecken, dezenter Hintergrund für den "Ganzes Bild"-Modus (object-fit: contain). Mehrere Slideshows pro Beitrag sind möglich – jede läuft eigenständig. ========================================================================== */ .rh-slideshow { position: relative; height: var(--rh-ss-h, 420px); margin-block: 1.75rem; overflow: hidden; border-radius: var(--rh-radius); background: var(--rh-surface-2); } .rh-slideshow__slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .8s ease; /* bei reduced-motion global entschärft */ pointer-events: none; } .rh-slideshow__slide.is-active { opacity: 1; pointer-events: auto; } .rh-slideshow__img { width: 100%; height: 100%; display: block; object-fit: cover; /* object-fit (cover/scale-down/contain) setzt der Block je Instanz inline */ object-position: center; } /* Pfeile vor/zurück – nur beim eingebetteten Block, halbtransparent über dem Bild, mittig an den Rändern. */ .rh-slideshow__nav { position: absolute; top: 50%; translate: 0 -50%; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; border-radius: 50%; color: #fff; background: rgba(16, 25, 40, .45); cursor: pointer; transition: background .2s ease; } .rh-slideshow__nav:hover, .rh-slideshow__nav:focus-visible { background: rgba(16, 25, 40, .72); } .rh-slideshow__nav svg { width: 1.5rem; height: 1.5rem; } .rh-slideshow__nav--prev { left: .75rem; } .rh-slideshow__nav--next { right: .75rem; } /* Timer-Kreis: füllt sich über die Intervalldauer (theme.js), unten rechts. */ .rh-slideshow__timer { position: absolute; right: .75rem; bottom: .75rem; z-index: 2; width: 2.25rem; height: 2.25rem; pointer-events: none; } .rh-slideshow__timer-svg { width: 100%; height: 100%; transform: rotate(-90deg); /* Start oben statt rechts */ } .rh-slideshow__timer-track { fill: rgba(16, 25, 40, .35); stroke: rgba(255, 255, 255, .35); stroke-width: 2.5; } .rh-slideshow__timer-bar { fill: none; stroke: #fff; stroke-width: 2.5; stroke-linecap: round; } @media (prefers-reduced-motion: reduce) { /* Ohne Auto-Wechsel hätte der Kreis keine Bedeutung. */ .rh-slideshow__timer { display: none; } } /* ========================================================================== REFERENZ (Block radio-hoffmann/reference) Ein Bild und daneben ein abgesetztes Beschreibungsfeld – zur Präsentation einzelner Referenzen. Mehrfach im Beitrag einsetzbar; Bild wahlweise rechts (Standard) oder links. ========================================================================== */ .rh-reference { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; align-items: center; margin-block: 1.75rem; } .rh-reference__text { background: var(--rh-surface); border: 1px solid var(--rh-border); border-radius: var(--rh-radius); padding: 1.25rem 1.4rem; color: var(--rh-fg); } .rh-reference__text > :first-child { margin-top: 0; } .rh-reference__text > :last-child { margin-bottom: 0; } .rh-reference__media { margin: 0; } .rh-reference__img, .rh-reference__media img { width: 100%; height: auto; display: block; border-radius: var(--rh-radius); } /* Bild links statt rechts. Die HTML-Reihenfolge bleibt Beschreibung -> Bild (Lesereihenfolge), nur die Anzeige dreht sich über order. */ .rh-reference--media-left .rh-reference__media { order: -1; } @media (max-width: 48rem) { .rh-reference { grid-template-columns: 1fr; } /* Gestapelt immer in Lesereihenfolge: erst Beschreibung, dann Bild. */ .rh-reference--media-left .rh-reference__media { order: 0; } } /* Referenzen-Slideshow (Block radio-hoffmann/references): mehrere Referenzen durchschalten. Ohne JS (kein .is-slider) stehen alle untereinander. */ .rh-refslider { position: relative; margin-block: 1.75rem; } .rh-refslider .rh-reference { margin-block: 0; } /* Slideshow-Modus (theme.js hat übernommen): nur die aktive Referenz zeigen. Kein Überblenden mit absoluter Positionierung – die Karten sind unterschiedlich hoch; ein sanftes Einblenden reicht und die Höhe bleibt ruhig. */ .rh-refslider.is-slider .rh-refslider__track > .rh-reference { display: none; } .rh-refslider.is-slider .rh-refslider__track > .rh-reference.is-active { display: grid; animation: rh-ref-fade .5s ease; } @keyframes rh-ref-fade { from { opacity: 0; } to { opacity: 1; } } /* Pfeile nur im Slideshow-Modus (mit JavaScript) – ohne JS stehen die Referenzen untereinander, dann wären Pfeile ohne Funktion. */ .rh-refslider__controls { display: none; } .rh-refslider.is-slider .rh-refslider__controls { display: flex; justify-content: center; gap: .5rem; margin-top: 1rem; } .rh-refslider__btn { display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; color: var(--rh-fg); background: var(--rh-bg); border: 1px solid var(--rh-border); border-radius: 999px; cursor: pointer; } .rh-refslider__btn:hover { border-color: var(--rh-primary); color: var(--rh-primary); } .rh-refslider__btn svg { width: 1.1rem; height: 1.1rem; } /* ========================================================================== KOPF DER STARTSEITE Das Funkwellen-Signet aus dem Logo als grosszuegiges, zurueckgenommenes Markenzeichen im Hintergrund – Wiedererkennung ohne Deko-Laerm. ========================================================================== */ .rh-intro { position: relative; overflow: hidden; padding-block: clamp(2.5rem, 6vw, 4.5rem); background: radial-gradient(42rem 26rem at 88% -20%, color-mix(in srgb, var(--rh-green) 14%, transparent), transparent 65%), radial-gradient(48rem 28rem at -10% -30%, color-mix(in srgb, var(--rh-blue) 16%, transparent), transparent 65%); border-bottom: 1px solid var(--rh-border); } .rh-intro__signal { position: absolute; top: 50%; right: -6rem; translate: 0 -50%; width: clamp(16rem, 34vw, 26rem); color: var(--rh-blue); opacity: .07; pointer-events: none; } :root[data-theme="dark"] .rh-intro__signal { color: #62b0ee; opacity: .10; } @media (max-width: 52rem) { .rh-intro__signal { right: -9rem; opacity: .05; } } .rh-intro h1 { margin: 0 0 .75rem; max-width: 22ch; } .rh-intro p { margin: 0; max-width: var(--rh-textwidth); font-size: 1.15rem; color: var(--rh-muted); } /* ========================================================================== BEITRAGSLISTE Die Startseite ist eine ruhige Praesentationsseite: die Beitraege stehen VOLLSTAENDIG untereinander (kein Anreissen, kein "Weiterlesen"), als gelegentliche Mitteilungen – Weihnachtsgruss, ein Foto vom neu dekorierten Schaufenster. Getrennt durch eine feine Linie, mittig auf angenehmer Lesebreite. Keine Karten, keine Hover-Animation: hier wird gelesen und geschaut, nicht geklickt. ========================================================================== */ .rh-posts { display: flex; flex-direction: column; max-width: 100%; } .rh-posts .rh-entry { width: 100%; max-width: 52rem; /* angenehme Lesebreite, mittig */ margin-inline: auto; padding: 0; border: 0; background: none; box-shadow: none; } /* Abstand und Trennlinie erst zwischen den Beitraegen – der erste sitzt direkt unter der Ueberschrift. */ .rh-posts .rh-entry + .rh-entry { margin-top: 3.5rem; padding-top: 3.5rem; border-top: 1px solid var(--rh-border); } .rh-posts .rh-entry__thumb { margin: 0 0 1.5rem; } .rh-posts .rh-entry__thumb img { width: 100%; height: auto; border-radius: var(--rh-radius); display: block; } .rh-posts .rh-entry__meta { margin: 0 0 .5rem; } .rh-posts .rh-entry__title { margin: 0 0 1rem; font-size: clamp(1.5rem, 3vw, 2rem); } /* Voller Beitragstext (the_content): normale Textfarbe, kein Abschneiden. Der erste/letzte Block ohne Aussenabstand, damit der Rhythmus stimmt. */ .rh-posts .rh-entry__content { max-width: none; color: var(--rh-fg); } .rh-posts .rh-entry__content > :first-child { margin-top: 0; } .rh-posts .rh-entry__content > :last-child { margin-bottom: 0; } /* Einzelansicht: Bild bleibt gross und mit Radius. */ .rh-entry__thumb img { border-radius: var(--rh-radius); } /* Kleines Signal-Symbol vor Abschnittsueberschriften */ .rh-eyebrow { color: var(--rh-accent); } /* ========================================================================== FUSSBEREICH Anschrift, Kontakt, vollständige Öffnungszeiten, Rechtliches. ========================================================================== */ .rh-footer { background: var(--rh-surface); border-top: 1px solid var(--rh-border); padding-block: 3rem 2rem; color: var(--rh-muted); font-size: .95rem; } .rh-footer__cols { display: grid; gap: 2.5rem; grid-template-columns: 1fr; } @media (min-width: 48rem) { .rh-footer__cols { grid-template-columns: 1.4fr 1fr 1fr; } } .rh-footer__logo { height: 3rem; width: auto; margin-bottom: 1rem; background: var(--rh-logo-plate); border-radius: 8px; padding: var(--rh-logo-pad, 0); } .rh-footer__address { margin: 0 0 1rem; } .rh-footer__head { margin: 0 0 .9rem; font-size: 1rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--rh-fg); } .rh-footer ul { list-style: none; margin: 0; padding: 0; } .rh-footer nav ul { display: grid; gap: .5rem; } .rh-footer a { color: var(--rh-fg); text-decoration: none; } .rh-footer a:hover { color: var(--rh-primary); text-decoration: underline; } .rh-footer__copy { margin: 2.5rem 0 0; padding-top: 1.5rem; border-top: 1px solid var(--rh-border); text-align: center; } /* "Cookie-Einstellungen" als schlichter Link-Knopf, ohne Button-Optik. */ .rh-footer__cookie { background: none; border: 0; padding: 0; font: inherit; color: var(--rh-primary); text-decoration: underline; text-underline-offset: .2em; cursor: pointer; } .rh-footer__cookie:hover { color: var(--rh-blue-dark); } .rh-main { display: block; }