/* * Theme Name: Hello Elementor Child * Template: hello-elementor * Version: 1.0.2ed */ /*** * Shrinking Sticky header, no container edition * class: .sticky-header * Uses the built-in .elementor-container class for shrinking the header in non-container installs */ header.sticky-header { --header-height: 90px; --shrink-header-to: 0.6; --transition-timing: .45s cubic-bezier(.4, 0, .2, 1); --gd-header-scroll-opacity: 0.99; background-color: var(--gd-header-light); -webkit-backdrop-filter: none; backdrop-filter: none; transition: background-color var(--transition-timing), -webkit-backdrop-filter var(--transition-timing), backdrop-filter var(--transition-timing), box-shadow var(--transition-timing); } /* Scrolled header: translucent cream with a restrained glass/blur effect. */ header.sticky-header.elementor-sticky--effects { background-color: rgba( var(--gd-header-light-rgb), var(--gd-header-scroll-opacity) ) !important; box-shadow: 0 4px 33px 1px rgba(0, 0, 0, .07) !important; -webkit-backdrop-filter: saturate(160%) blur(18px) !important; backdrop-filter: saturate(160%) blur(18px) !important; } /* * Elementor may place the opaque background on an inner container * or overlay. It must become transparent in the scrolled state so * the backdrop blur remains visible. */ header.sticky-header.elementor-sticky--effects > .elementor-container, header.sticky-header.elementor-sticky--effects > .e-con-inner, header.sticky-header.elementor-sticky--effects > .elementor-background-overlay { background-color: transparent !important; background-image: none !important; } header.sticky-header > .elementor-container { min-height: var(--header-height); transition: min-height var(--transition-timing); } header.sticky-header.elementor-sticky--effects > .elementor-container { min-height: calc( var(--header-height) * var(--shrink-header-to) ); } /*** * class: .logo * Add the class "logo" to your logo to scale your logo to 80% on scroll */ header.sticky-header .logo img, header.sticky-header .logo.elementor-widget-theme-site-logo img, header.sticky-header .logo .elementor-icon svg { --logo-height: 32px; --logo-shrink-to: 0.80; height: var(--logo-height); transition: height var(--transition-timing); } header.sticky-header.elementor-sticky--effects .logo img, header.sticky-header.elementor-sticky--effects .logo.elementor-widget-theme-site-logo img, header.sticky-header.elementor-sticky--effects .logo .elementor-icon svg { height: calc( var(--logo-height) * var(--logo-shrink-to) ); } header.sticky-header .logo .elementor-icon svg { width: auto; } /* ========================================================= * EINZELANSICHT ŒUVRE * Werkmaße, Metadaten und Beschreibung * * Diese Regeln entsprechen der tatsächlichen Elementor-Struktur: * Die drei .oeuvre-meta-row-Container liegen direkt im rechten * Hauptcontainer und NICHT in einem zusätzlichen * .oeuvre-meta-Wrapper. * ========================================================= */ /* --------------------------------------------------------- * 1. WERKMASSE DIREKT UNTER DEM TITEL * * Elementor-Klasse am Shortcode-Widget: * oeuvre-dimensions * --------------------------------------------------------- */ .oeuvre-dimensions { display: block; width: 100%; margin: 0 0 18px; padding: 0; } .oeuvre-dimensions, .oeuvre-dimensions *, .oeuvre-meta-row, .oeuvre-meta-row *, .oeuvre-description, .oeuvre-description * { box-sizing: border-box; } .oeuvre-dimensions .elementor-widget-container, .oeuvre-dimensions .elementor-shortcode { display: block; width: 100%; margin: 0 !important; padding: 0 !important; } .oeuvre-dimensions .elementor-shortcode { font-size: 15px; font-weight: 400; line-height: 1.5; color: inherit; } /* --------------------------------------------------------- * 2. EINZELNE WERKDATENZEILE * * Wichtig: Titel, Maße und Beschreibung liegen in Elementor- * Untercontainern mit einem horizontalen Innenabstand von 16 px. * Die Werkdatenzeilen sind dagegen direkte Kinder. Deshalb wird * die komplette Zeile einschließlich Trennlinie um 16 px * eingerückt. So beginnen alle Elemente auf exakt derselben * vertikalen Achse. * --------------------------------------------------------- */ .oeuvre-meta-row { display: grid !important; grid-template-columns: 112px minmax(0, 1fr) !important; column-gap: 18px !important; align-items: center !important; width: calc(100% - 32px) !important; max-width: calc(100% - 32px) !important; min-height: 68px; margin: 0 16px !important; padding: 0 !important; border-bottom: 1px solid rgba(35, 31, 28, 0.13); } /* Falls Elementor einen zusätzlichen Innencontainer erzeugt. */ .oeuvre-meta-row > .e-con-inner { display: contents !important; } /* --------------------------------------------------------- * 3. LINKE BESCHRIFTUNG UND RECHTER WERT * --------------------------------------------------------- */ .oeuvre-meta-row > .oeuvre-meta-label, .oeuvre-meta-row > .oeuvre-meta-value, .oeuvre-meta-row > .e-con-inner > .oeuvre-meta-label, .oeuvre-meta-row > .e-con-inner > .oeuvre-meta-value { display: flex !important; align-items: center !important; align-self: stretch !important; min-width: 0 !important; width: 100% !important; min-height: 68px; margin: 0 !important; padding: 12px 0 !important; } .oeuvre-meta-label .elementor-widget-container, .oeuvre-meta-value .elementor-widget-container { display: flex !important; align-items: center !important; justify-content: flex-start !important; width: 100%; min-height: 24px; margin: 0 !important; padding: 0 !important; } /* --------------------------------------------------------- * 4. LINKE BESCHRIFTUNGEN * ANNÉE, TECHNIQUE, THÈME * --------------------------------------------------------- */ .oeuvre-meta-label { font-size: 11px; font-weight: 600; line-height: 1.45; letter-spacing: 0.09em; text-transform: uppercase; opacity: 0.78; } /* --------------------------------------------------------- * 5. RECHTE DYNAMISCHE WERTE * 2026, Huile sur papier, Abstraction * --------------------------------------------------------- */ .oeuvre-meta-value { font-size: 15px; font-weight: 400; line-height: 1.45; overflow-wrap: anywhere; } /* --------------------------------------------------------- * 6. ELEMENTOR-TEXT- UND SHORTCODE-RESET * * Der konkrete HTML-Code enthält links ein

und rechts ein * . Beide werden auf dieselbe Zeilenhöhe und Grundposition * gesetzt, damit ANNÉE und 2026 exakt auf einer Höhe stehen. * --------------------------------------------------------- */ .oeuvre-meta-label > p, .oeuvre-meta-value > span, .oeuvre-meta-label .elementor-widget-container > p, .oeuvre-meta-value .elementor-widget-container > span, .oeuvre-meta-label p, .oeuvre-meta-value p, .oeuvre-meta-label h1, .oeuvre-meta-label h2, .oeuvre-meta-label h3, .oeuvre-meta-label h4, .oeuvre-meta-label h5, .oeuvre-meta-label h6, .oeuvre-meta-value h1, .oeuvre-meta-value h2, .oeuvre-meta-value h3, .oeuvre-meta-value h4, .oeuvre-meta-value h5, .oeuvre-meta-value h6, .oeuvre-meta-label .elementor-heading-title, .oeuvre-meta-value .elementor-heading-title, .oeuvre-meta-label .elementor-shortcode, .oeuvre-meta-value .elementor-shortcode { display: block !important; width: 100%; margin: 0 !important; padding: 0 !important; font: inherit !important; font-size: inherit !important; font-weight: inherit !important; line-height: inherit !important; letter-spacing: inherit; color: inherit; } .oeuvre-meta-label .elementor-text-editor, .oeuvre-meta-value .elementor-text-editor, .oeuvre-meta-label .elementor-widget-text-editor, .oeuvre-meta-value .elementor-widget-text-editor { width: 100%; margin: 0 !important; padding: 0 !important; } /* --------------------------------------------------------- * 7. TAXONOMIEWERTE UND LINKS * --------------------------------------------------------- */ .oeuvre-meta-value a { display: inline; margin: 0; padding: 0; color: inherit; line-height: inherit; text-decoration: none; transition: opacity 0.2s ease; } .oeuvre-meta-value a:hover { opacity: 0.65; text-decoration: none; } .oeuvre-meta-value a:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; } /* --------------------------------------------------------- * 8. WERKBESCHREIBUNG * * Elementor-Klasse am Texteditor-Widget: * oeuvre-description * --------------------------------------------------------- */ .oeuvre-description { display: block; width: 100%; margin: 20px 0 0; padding: 0; } .oeuvre-description .elementor-widget-container { margin: 0 !important; padding: 0 !important; } .oeuvre-description p { margin-top: 0; margin-bottom: 0.8em; } .oeuvre-description p:last-child { margin-bottom: 0; } .oeuvre-description ul, .oeuvre-description ol { margin-top: 0.8em; margin-bottom: 0.8em; padding-left: 1.25em; } .oeuvre-description a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; } /* ========================================================= * TABLET * ========================================================= */ @media (max-width: 1024px) { .oeuvre-dimensions { margin-bottom: 17px; } .oeuvre-meta-row { grid-template-columns: 102px minmax(0, 1fr) !important; column-gap: 16px !important; min-height: 64px; } .oeuvre-meta-row > .oeuvre-meta-label, .oeuvre-meta-row > .oeuvre-meta-value, .oeuvre-meta-row > .e-con-inner > .oeuvre-meta-label, .oeuvre-meta-row > .e-con-inner > .oeuvre-meta-value { min-height: 64px; } } /* ========================================================= * SMARTPHONE * ========================================================= */ @media (max-width: 767px) { .oeuvre-dimensions { margin-bottom: 18px; } .oeuvre-dimensions .elementor-shortcode { font-size: 14px; line-height: 1.45; } .oeuvre-meta-row { grid-template-columns: 84px minmax(0, 1fr) !important; column-gap: 12px !important; min-height: 58px; } .oeuvre-meta-row > .oeuvre-meta-label, .oeuvre-meta-row > .oeuvre-meta-value, .oeuvre-meta-row > .e-con-inner > .oeuvre-meta-label, .oeuvre-meta-row > .e-con-inner > .oeuvre-meta-value { min-height: 58px; padding-top: 10px !important; padding-bottom: 10px !important; } .oeuvre-meta-label { font-size: 10px; letter-spacing: 0.08em; } .oeuvre-meta-value { font-size: 14px; line-height: 1.4; } .oeuvre-description { margin-top: 18px; } } /* ========================================================= * SEHR KLEINE SMARTPHONES * ========================================================= */ @media (max-width: 420px) { .oeuvre-meta-row { grid-template-columns: 74px minmax(0, 1fr) !important; column-gap: 10px !important; } .oeuvre-meta-label { font-size: 10px; letter-spacing: 0.07em; } .oeuvre-meta-value, .oeuvre-dimensions .elementor-shortcode { font-size: 13.5px; } } /* ========================================================= * COMPACT OEUVRE NAVIGATION * * Vorheriges Werk | kleines Übersichts-Icon | nächstes Werk * ========================================================= */ .gd-oeuvre-nav { display: grid !important; grid-template-columns: 200px 40px 200px !important; justify-content: center !important; align-items: center !important; column-gap: 16px !important; width: 100% !important; max-width: 472px !important; margin: 50px auto 0 !important; padding: 0 !important; } /* --------------------------------------------------------- * Allgemeiner Reset der drei Navigationselemente * --------------------------------------------------------- */ .gd-oeuvre-nav__item, .gd-oeuvre-nav__empty { min-width: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; } /* --------------------------------------------------------- * Linkes und rechtes Vorschaubild * --------------------------------------------------------- */ .gd-oeuvre-nav__item--left, .gd-oeuvre-nav__item--right, .gd-oeuvre-nav__empty--left, .gd-oeuvre-nav__empty--right { width: 200px !important; height: 200px !important; } .gd-oeuvre-nav__link { position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 200px !important; height: 200px !important; min-width: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; color: inherit !important; background: #f4f2ed; border: 0; border-radius: 2px; text-decoration: none !important; box-shadow: none; transition: transform 200ms ease, opacity 200ms ease; } .gd-oeuvre-nav__image { display: block !important; width: 100% !important; height: 100% !important; max-width: 200px !important; max-height: 200px !important; margin: 0 !important; padding: 0 !important; object-fit: contain !important; object-position: center !important; } .gd-oeuvre-nav__link:hover { transform: translateY(-2px); opacity: 0.88; } .gd-oeuvre-nav__link:focus-visible { outline: 2px solid #181818; outline-offset: 3px; } /* --------------------------------------------------------- * Pfeile auf den Bildern * --------------------------------------------------------- */ .gd-oeuvre-nav__arrow { position: absolute !important; top: 50% !important; z-index: 5 !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 32px !important; height: 32px !important; margin: 0 !important; padding: 0 !important; color: #181818; background: rgba(255, 255, 255, 0.96); border: 0; border-radius: 50%; font-family: Arial, sans-serif; font-size: 19px; font-weight: 400; line-height: 1; box-shadow: 0 2px 9px rgba(0, 0, 0, 0.16); transform: translateY(-50%) !important; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); } .gd-oeuvre-nav__arrow--left { left: 8px !important; } .gd-oeuvre-nav__arrow--right { right: 8px !important; } .gd-oeuvre-nav__arrow svg { display: block !important; width: 16px !important; height: 16px !important; min-width: 16px !important; min-height: 16px !important; max-width: 16px !important; max-height: 16px !important; margin: 0 !important; padding: 0 !important; fill: none !important; stroke: currentColor !important; } /* --------------------------------------------------------- * Mittlerer Übersichtsbutton * * Sichtbares Icon: 18 × 18 px * Anklickbare Fläche: 40 × 40 px * --------------------------------------------------------- */ .gd-oeuvre-nav__item--center { align-self: center !important; justify-self: center !important; width: 40px !important; height: 40px !important; min-width: 40px !important; min-height: 40px !important; max-width: 40px !important; max-height: 40px !important; } .gd-oeuvre-nav__link-overview { display: flex !important; align-items: center !important; justify-content: center !important; width: 40px !important; height: 40px !important; min-width: 40px !important; min-height: 40px !important; max-width: 40px !important; max-height: 40px !important; margin: 0 !important; padding: 0 !important; color: #181818 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; text-decoration: none !important; box-shadow: none !important; opacity: 0.62; transition: opacity 180ms ease, transform 180ms ease; } .gd-oeuvre-nav__link-overview:hover, .gd-oeuvre-nav__link-overview:focus-visible { opacity: 1; transform: scale(1.08); } .gd-oeuvre-nav__link-overview:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; } /* Das Raster selbst darf nur 18 × 18 px groß sein. */ .gd-oeuvre-nav__icon-grid { display: flex !important; align-items: center !important; justify-content: center !important; width: 18px !important; height: 18px !important; min-width: 18px !important; min-height: 18px !important; max-width: 18px !important; max-height: 18px !important; margin: 0 !important; padding: 0 !important; font-size: 0 !important; line-height: 0 !important; } .gd-oeuvre-nav__icon-grid svg, .gd-oeuvre-nav__overview-svg { display: block !important; width: 18px !important; height: 18px !important; min-width: 18px !important; min-height: 18px !important; max-width: 18px !important; max-height: 18px !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; fill: none !important; stroke: currentColor !important; } .gd-oeuvre-nav__icon-grid svg rect, .gd-oeuvre-nav__overview-svg rect { fill: none !important; stroke: currentColor !important; } /* * Falls eine ältere PHP-Version noch sichtbaren Text enthält: * Text ausblenden, aber für Screenreader erhalten. */ .gd-oeuvre-nav__text { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; } /* ========================================================= * NAVIGATION: SMARTPHONE * ========================================================= */ @media (max-width: 540px) { .gd-oeuvre-nav { grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1fr) !important; column-gap: 8px !important; width: 100% !important; max-width: 100% !important; margin-top: 36px !important; } .gd-oeuvre-nav__item--left, .gd-oeuvre-nav__item--right, .gd-oeuvre-nav__empty--left, .gd-oeuvre-nav__empty--right, .gd-oeuvre-nav__link { width: 100% !important; height: auto !important; aspect-ratio: 1 / 1 !important; } .gd-oeuvre-nav__image { max-width: none !important; max-height: none !important; } .gd-oeuvre-nav__item--center, .gd-oeuvre-nav__link-overview { width: 36px !important; height: 36px !important; min-width: 36px !important; min-height: 36px !important; max-width: 36px !important; max-height: 36px !important; } .gd-oeuvre-nav__icon-grid, .gd-oeuvre-nav__icon-grid svg, .gd-oeuvre-nav__overview-svg { width: 16px !important; height: 16px !important; min-width: 16px !important; min-height: 16px !important; max-width: 16px !important; max-height: 16px !important; } .gd-oeuvre-nav__arrow { width: 28px !important; height: 28px !important; } .gd-oeuvre-nav__arrow--left { left: 6px !important; } .gd-oeuvre-nav__arrow--right { right: 6px !important; } } /* ========================================================= * NAVIGATION: SEHR KLEINE SMARTPHONES * ========================================================= */ @media (max-width: 380px) { .gd-oeuvre-nav { grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1fr) !important; column-gap: 5px !important; } .gd-oeuvre-nav__item--center, .gd-oeuvre-nav__link-overview { width: 36px !important; height: 36px !important; min-width: 36px !important; min-height: 36px !important; max-width: 36px !important; max-height: 36px !important; } .gd-oeuvre-nav__icon-grid, .gd-oeuvre-nav__icon-grid svg, .gd-oeuvre-nav__overview-svg { width: 14px !important; height: 14px !important; min-width: 14px !important; min-height: 14px !important; max-width: 14px !important; max-height: 14px !important; } .gd-oeuvre-nav__arrow { width: 26px !important; height: 26px !important; } } /* ========================================================= * REDUZIERTE BEWEGUNGEN * ========================================================= */ @media (prefers-reduced-motion: reduce) { .gd-oeuvre-nav__link, .gd-oeuvre-nav__link-overview { transition: none !important; } } /* ========================================================= * WERKDATEN: * BESCHRIFTUNG UND WERT VERTIKAL AUSRICHTEN * ========================================================= */ .oeuvre-meta-row { align-items: center !important; } .oeuvre-meta-label, .oeuvre-meta-value { align-self: center; } /* Elementor-Innencontainer ebenfalls sauber ausrichten. */ .oeuvre-meta-label .elementor-widget-container, .oeuvre-meta-value .elementor-widget-container { display: flex; align-items: center; width: 100%; margin: 0 !important; padding: 0 !important; } /* Absätze und Shortcode-Ausgaben ohne zusätzliche Abstände. */ .oeuvre-meta-label p, .oeuvre-meta-value p, .oeuvre-meta-value .elementor-shortcode { margin: 0 !important; padding: 0 !important; line-height: 1.45; } /* ========================================================== * GRAVITY FORMS #3 — SUBMIT BUTTON * ========================================================== */ .gform-theme.gform-theme--framework#gform_wrapper_3 #gform_submit_button_3.gform_button.button { /* Gravity Forms Orbital variables */ --gf-ctrl-btn-bg-color-primary: #4A4745 !important; --gf-ctrl-btn-bg-color-hover-primary: #373432 !important; --gf-ctrl-btn-color-primary: #ffffff !important; --gf-ctrl-btn-color-hover-primary: #ffffff !important; /* Force actual properties as well */ background: #4A4745 !important; background-color: #4A4745 !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; text-transform: uppercase !important; border-color: #4A4745 !important; } /* HOVER */ .gform-theme.gform-theme--framework#gform_wrapper_3 #gform_submit_button_3.gform_button.button:hover { --gf-ctrl-btn-bg-color-primary: #373432 !important; --gf-ctrl-btn-bg-color-hover-primary: #373432 !important; --gf-ctrl-btn-color-primary: #ffffff !important; --gf-ctrl-btn-color-hover-primary: #ffffff !important; background: #373432 !important; background-color: #373432 !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; border-color: #373432 !important; }