/* ============================================================ Curatello · Lokale Webfonts ============================================================ */ @font-face { font-family: "CurRoboto"; src: url("/assets/fonts/roboto/roboto-latin-ext-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "CurRoboto"; src: url("/assets/fonts/roboto/roboto-latin-ext-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "CurGreatVibes"; src: url("/assets/fonts/great-vibes/great-vibes-latin-ext-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "CurPacifico"; src: url("/assets/fonts/pacifico/pacifico-latin-ext-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "CurLobster"; src: url("/assets/fonts/lobster/lobster-latin-ext-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "CurTangerine"; src: url("/assets/fonts/tangerine/tangerine-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "CurTangerine"; src: url("/assets/fonts/tangerine/tangerine-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "AromaVin"; src: url("/assets/fonts/aroma/AromaVintage-Regular.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } /* ============================================================ Curatello · :root Design Tokens · vollständig gruppiert Hinweis: Variablennamen und Werte wurden bewusst nicht korrigiert. ============================================================ */ :root { /* ============================================================ 01 · DESIGN-BASIS ============================================================ */ /* @group 01 · Design-Basis */ /* @subgroup Schrift */ /* @label Alle Texte */ --cur-font-family-base: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, Verdana, sans-serif; /* @label Fliesstext global */ --cur-font-size-base: 16px; /* @label H2 Überschriften */ --cur-font-size-h2-base: 20px; /* @subgroup Seitenflächen */ /* @label Seitenhintergrund */ --cur-color-bg-page: #e9e9e9; /* @label Content Hintergrund unter Hero Bild */ --cur-color-bg-site: #e9e9e9; /* @label Favicon */ --cur-favicon-url: url('/assets/img/favicon.png'); /* @subgroup Textfarben */ /* @label Fliesstext global */ --cur-color-text-main: #503020; /* @label Titel global */ --cur-font-color: #444444; /* @label Widget Titel Farbe */ --cur-widget-title-color: var(--cur-color-text-main); /* @label Color text muted */ --cur-color-text-muted: #503020; /* @subgroup Linkfarben */ /* @label Link Farbe */ --cur-color-link: #215C98; /* @label Link Farbe Hover */ --cur-color-link-hover: #710505; /* @label Link Farbe activ */ --cur-color-link-active: #000000; /* @label Link Farbe activ */ --cur-color-link-weight: 700; /* @subgroup Cards */ /* @label Cards Hintergrund für alle */ --cur-maincard-bg: #fbfbfb; /* @label Content (alle Rahmen global) */ --cur-maincard-border: 1px solid #C0C0C0; /* @label Global alle Cards und Boxen */ --cur-maincard-radius: 10px; /* @label Für alle Boxen */ --cur-maincard-shadow: 0 8px 20px #503020; /* @subgroup Buttons */ /* @label Button Hintergrund global */ --cur-btn-background-global: #3F5F4A; /* @label Button Rahmen global */ --cur-btn-border-global: var(--cur-maincard-border); /* @label Button Text Farbe global */ --cur-btn-text-color-global: #FBF7F0; /* @label Button Text Fett global */ --cur-btn-text-weight-global: 700; /* @label Button Radius global */ --cur-btn-radius-global: var(--cur-maincard-radius); /* @label Button Schatten global */ --cur-btn-shadow-global: var(--cur-maincard-shadow); /* @subgroup Button Hover */ /* @label Button Hintergrund Hover global */ --cur-btn-background-global-hover: #FBF7F0; /* @label Button Text Farbe Hover global */ --cur-btn-text-color-hover-global: #3F5F4A; /* ============================================================ 02 · HEADER ============================================================ */ /* @group 02 · Header */ /* @subgroup Verhalten */ /* @label loslösen mit unset */ --cur-header-navigation-sticky: sticky; /* @label Header Breite */ --cur-header-width: 100%; /* @label Logo Header Breite */ --cur-site-logo-width: 86px; /* @subgroup Logo */ /* @label Logo Header */ --cur-site-logo-image: url('/assets/img/market-share.png'); /* @label Logo Header Höhe */ --cur-site-logo-height: 86px; /* @subgroup Seitentitel */ /* @label Seitentitel */ --cur-site-title-text: "Curatello"; /* @label Seiten Titel */ --cur-site-title-size: 30px; /* @label Seiten Titel Fett */ --cur-site-title-weight: 600; /* @label Seiten Titel Farbe */ --cur-site-title-color: #444444; /* @label Seiten Titel Schriftart */ --cur-site-title-font-family: "CurGreatVibes", cursive; /* @subgroup Tagline */ /* @label Tagline Titel */ --cur-site-tagline-text: "Marktmanager"; /* @label Seiten Taglinetitel */ --cur-site-tagline-size: 14px; /* @label Seitentitel Tagline */ --cur-site-tagline-color: #444444; /* @subgroup Hintergrund */ /* @label Header Nav Hintergrund Verlauf von */ --cur-header-gradient-from: #ffffff; /* @label Header Nav Hintergrund Verlauf bis */ --cur-header-gradient-to: #C0C0C0; /* @subgroup Rahmen & Schatten */ /* @label Header */ --cur-header-border-bottom: 1px solid #694b37; /* @label Navi Header */ --cur-header-shadow: 0 8px 20px #694b37; /* ============================================================ 03 · NAVIGATION ============================================================ */ /* @group 03 · Navigation */ /* @subgroup Desktop Links */ /* @label Header Nav Activ Link */ --cur-nav-radius: 0px; /* @label Header Nav Lnks */ --cur-nav-link-color: #555555; /* @label Header Nav Link Hover */ --cur-nav-link-hover: #000000; /* @subgroup Aktiver Menüpunkt */ /* @label Header Nav Link Activ */ --cur-nav-active-bg: #fda5a5; /* @label Header Nav Link Activ Radius */ --cur-nav-active-radius: var(--cur-maincard-radius); /* @label Header Nav Link Activ */ --cur-nav-active-color: #ffffff; /* @subgroup Schrift */ /* @label Navigation Links */ --cur-nav-font-size: 15px; /* @label Navigation Titel Fett */ --cur-nav-font-weight: 600; /* @subgroup Mobile Menübox */ /* @label Hintergrund aufgeklappt */ --cur-mobile-nav-bg: #ffffff; /* @label Link Farbe */ --cur-mobile-nav-link-color: #555555; /* @label Link Hover */ --cur-mobile-nav-link-hover: #555555; /* @label Rahmen Farbe aufgeklappt */ --cur-mobile-nav-border-color: #d4d4d4; /* @subgroup Mobile Toggle */ /* @label Toggle Hintergrund Farbe */ --cur-mobile-nav-toggle-bg: #ffffff; /* @label Toggle Farbe */ --cur-mobile-nav-toggle-color: #555555; /* @label Rahmen Farbe Stärke */ --cur-mobile-nav-toggle-border: 1px solid #d4d4d4; /* @label Toogler Radius */ --cur-mobile-nav-toggle-radius: 0px; /* ============================================================ 04 · FOOTER ============================================================ */ /* @group 04 · Footer */ /* @subgroup Logo */ /* @label Logo Footer */ --cur-site-footer-logo-image: url('/assets/img/market-share.png'); /* @label Logo Footer Breite */ --cur-footer-logo-width-size: 40px; /* @label Logo Footer Höhe */ --cur-footer-logo-height-size: 40px; /* @subgroup Hintergrund */ /* @label Footer Nav Hintergrund Verlauf von */ --cur-footer-gradient-from: var(--cur-header-gradient-from); /* @label Footer Nav Hintergrund Verlauf bis */ --cur-footer-gradient-to: var(--cur-header-gradient-to); /* @label Footer Breite */ --cur-site-footer: var(--cur-header-width); /* @subgroup Rahmen & Schatten */ /* @label Footer TOP */ --cur-footer-border-top: var(--cur-header-border-bottom); /* @label Footer */ --cur-footer-shadow: var(--cur-header-shadow); /* @subgroup Copyright */ /* @label Footer Copyright Text Grösse */ --cur-footer-copyright-size: 16px; /* @label Footer Copyright Text Fett */ --cur-footer-copyright-weight: 700; /* @label Footer Copyright Text Farbe */ --cur-footer-copyright-color: #444444; /* @subgroup Links */ /* @label Footer Link Farbe */ --cur-site-footer-link-color: #444444; /* @label Footer Link Fett */ --cur-site-footer-link-weight: 700; /* @label Footer Link Grösse */ --cur-site-footer-link-size: 16px; /* @subgroup Link Hover */ /* @label Footer Link Farbe */ --cur-site-footer-link-color-hover: #444444; /* @label Footer Link Fett */ --cur-site-footer-link-weight-hover: 700; /* @label Footer Link Grösse */ --cur-site-footer-link-size-hover: 16px; /* ============================================================ 05 · DEKORATION ============================================================ */ /* @group 05 · Dekoration */ /* @subgroup Weihnachtsdeko oben */ /* @label Obere Ecken anzeigen */ --cur-xmas-corner-display: block; /* @label Obere Ecke Links Bild */ --cur-xmas-corner-top-left-image: url("/assets/img/oben-links.png"); /* @label Obere Ecke Rechts Bild */ --cur-xmas-corner-top-right-image: url("/assets/img/oben-rechts.png"); /* @label Obere Ecke Breite */ --cur-xmas-corner-width: 340px; /* @label Obere Ecke Höhe */ --cur-xmas-corner-height: 340px; /* @label Obere Ecke Links Abstand oben */ --cur-xmas-corner-top-left-top: -30px; /* @label Obere Ecke Links Abstand links */ --cur-xmas-corner-top-left-left: -30px; /* @label Obere Ecke Rechts Abstand oben */ --cur-xmas-corner-top-right-top: -13px; /* @label Obere Ecke Rechts Abstand rechts */ --cur-xmas-corner-top-right-right: -10px; /* @subgroup Weihnachtsdeko unten */ /* @label Footer Ecken anzeigen */ --cur-xmas-footer-corner-display: block; /* @label Footer Ecke Links Bild */ --cur-xmas-footer-corner-left-image: url("/assets/img/unten-links.png"); /* @label Footer Ecke Rechts Bild */ --cur-xmas-footer-corner-right-image: url("/assets/img/unten-rechts.png"); /* @label Footer Ecke Breite */ --cur-xmas-footer-corner-width: 340px; /* @label Footer Ecke Höhe */ --cur-xmas-footer-corner-height: 340px; /* @label Footer Ecke Abstand unten */ --cur-xmas-footer-corner-bottom: -18px; /* @label Footer Ecke Links Abstand */ --cur-xmas-footer-corner-left: -18px; /* @label Footer Ecke Rechts Abstand */ --cur-xmas-footer-corner-right: 0px; /* ============================================================ 06 · HERO ============================================================ */ /* @group 06 · Hero */ /* @subgroup Titel */ /* @label Hero Text Schatten */ --cur-hero-text-shadow: 0 0px 0px #000000B3; /* @label Hero Tite ausblenden */ --cur-hero-title-view: content; /* @label Hero Titel Grösse */ --cur-hero-title-size: 52px; /* @label Hero Titel Fett */ --cur-hero-title-weight: 600; /* @label Hero Titel Farbe */ --cur-hero-title-color: #ffffff; /* @subgroup Untertitel */ /* @label Hero Subtitel ausblenden */ --cur-hero-subtitle-view: content; /* @label Hero Subtitel Grösse */ --cur-hero-subtitle-size: 18px; /* @label Hero Subtitel Fett */ --cur-hero-subtitel-weight: 400; /* @label Hero Subtitel Farbe */ --cur-hero-subtitle-color: #ffffff; /* @subgroup Bildfläche */ /* @label Hero Bild Schatten */ --cur-hero-image-shadow: 0 8px 20px #694b37; /* @label Hero Bild Schatten */ --cur-hero-image-radius: var(--cur-maincard-radius); /* @label Hintergrund Herobild */ --cur-hero-bg: #555555; /* @subgroup Slider Dots */ /* @label Hero Dots Grösse */ --cur-hero-dot-size: 20px; /* @label Hero Dots Rahmen */ --cur-hero-dot-color: #FFFFFFB3; /* @label Hero Dots Rahmen Activ */ --cur-hero-dot-color-active: #000000B3; /* @label Hero Dots Hintergrund */ --cur-hero-dot-bg: transparent; /* @label Hero Dots Activ */ --cur-hero-dot-bg-active: var(--cur-nav-active-bg); /* ============================================================ 07 · LAYOUT & BREITEN ============================================================ */ /* @group 07 · Layout & Breiten */ /* @subgroup Seitenbreiten */ /* @label Breite der Seite maximal */ --cur-page-max-width: 1400px; /* @label Inhaltsblock maximal breite */ --cur-content-max-width: 1140px; /* @subgroup Modulbreiten */ /* @label News Seitenbreite */ --cur-news-index-max-width: 1140px; /* @label Galerie Seitenbreite */ --cur-galerie-max-width: 1140px; /* @label Album Seitenbreite */ --cur-album-max-width: 1140px; /* @label Produktkatalog */ --cur-products-max-width: 1140px; /* @label Lageplan Seitenbreite */ --cur-siteplan-max-width: 1140px; /* @label Aussteller Seitenbreite */ --cur-exh-index-max-width: 1140px; /* @subgroup Seitengestalter */ /* @label Seite mit Sidebar */ --cur-page-builder-width-with-sidebar: 1140px; /* @label Seite ohne Sidebar */ --cur-page-builder-width-without-sidebar: 1140px; /* ============================================================ 08 · FORMULARE & MODALE ============================================================ */ /* @group 08 · Formulare & Modale */ /* @subgroup Formularflächen */ /* @label Formular Card */ --cur-form-card-bg: var(--cur-maincard-bg); /* @label Formular Card Rahmen */ --cur-form-card-border: var(--cur-maincard-border); /* @label Formular Card Schatten */ --cur-form-card-shadow: var(--cur-maincard-shadow); /* @label Formular Card Schatten */ --cur-form-card-radius: var(--cur-maincard-radius); /* @subgroup Eingabefelder */ /* @label Formular Inputfield */ --cur-form-input-field-bg: #ffffff; /* @label Formular Textarea */ --cur-form-textarea-bg: #ffffff; /* @label Form label color */ --cur-form-label-color: var(--cur-color-text-main); /* @label Form help color */ --cur-form-help-color: #777777; /* @label Form control bg */ --cur-form-control-bg: #ffffff; /* @label Form control border */ --cur-form-control-border: var(--cur-maincard-border); /* @label Form control radius */ --cur-form-control-radius: var(--cur-maincard-radius); /* @label Form control Schatten */ --cur-form-control-shadow: var(--cur-maincard-shadow); /* @label Text Farbe */ --cur-form-text: #444444; /* @subgroup Fokus */ /* @label Form focus border */ --cur-form-focus-border: var(--cur-color-link); /* @label Form focus ring */ --cur-form-focus-ring: 0 0 0 3px rgba(157, 214, 25, 0.06); /* @subgroup Formular Buttons */ /* @label Formular Card Radius */ --cur-form-btn-radius: var(--cur-maincard-radius); /* @label Hintergrund Farbe */ --cur-form-btn-bg: #ffffff; /* @label Rahmen Stärke Farbe */ --cur-form-btn-border: #444444; /* @label Hintergrund Hover */ --cur-form-btn-hover-bg: #444444; /* @label Text Farbe Hover */ --cur-form-btn-hover-text: #ffffff; /* @label Arrow Farbe */ --cur-form-btn-arrow: #444444; /* @label Arrow Farbe Hover */ --cur-form-btn-hover-arrow: #ffffff; /* @subgroup Modale */ /* @label Modal radius */ --cur-modal-radius: 4px; /* @label Modal shadow */ --cur-modal-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); /* @label Modal title weight */ --cur-modal-title-weight: 600; /* @label Modal meta size */ --cur-modal-meta-size: 13px; /* ============================================================ 09 · SEITENGESTALTER ============================================================ */ /* @group 09 · Seitengestalter */ /* @subgroup Highlighter Cards */ /* @label · Hintergrund · Cards · global · */ --cur-featuered-bg: var(--cur-maincard-bg); /* @label · Rahmen · */ --cur-featuerd-border: var(--cur-maincard-border); /* @label · Schatten · */ --cur-featuerd-shadow: var(--cur-maincard-shadow); /* @label · Radius · */ --cur-featured-radius: var(--cur-maincard-radius); /* @subgroup Highlighter Texte */ /* @label · Titel · Grösse · */ --cur-featuerd-title-size: 20px; /* @label · Titel · Farbe · */ --cur-featuerd-title-color: var(--cur-font-color); /* @label · Titel · Fett · */ --cur-featuerd-title-fett: 700; /* @label · Fliesstext · Grösse· */ --cur-featuerd-text-size: var(--cur-font-size-base); /* @label · Fliesstext · Farbe · */ --cur-feature-text-color: var(--cur-font-color); /* @label · Fliesstext · Fett · */ --cur-feature-text-weight: 400; /* @subgroup Highlighter Buttons */ /* @label Highlighter Radius Hover */ --cur-highlighter-btn-hover-radius: var(--cur-maincard-radius); /* @label Highlighter Hintergrund Farbe */ --cur-highlighter-btn-bg: #ffffff; /* @label Highlighter Textfarbe */ --cur-highlighter-btn-text: #444444; /* @label Highlighter Rahmen */ --cur-highlighter-btn-border: #444444; /* @label Highlighter Hintergrund Farbe Hover */ --cur-highlighter-btn-hover-bg: #444444; /* @label Highlighter Textfarbe Hover */ --cur-highlighter-btn-hover-text: #ffffff; /* @label Highlighter Pfeil Farbe */ --cur-highlighter-btn-arrow: #1f1f1f; /* @label Highlighter Pfeilfarbe Hover */ --cur-highlighter-btn-hover-arrow: #ffffff; /* @label Highlighter btn font weight */ --cur-highlighter-btn-font-weight: 700; /* ============================================================ 10 · NEWS ============================================================ */ /* @group 10 · News */ /* @subgroup Texte & Badges */ /* @label News Bage Aktuelles */ --cur-news-tab-text-published: "Aktuelle News"; /* @label News Bage Archiv */ --cur-news-tab-text-archived: "Archiv"; /* @label Badge News Hintergrund */ --cur-news-badge-published-bg: var(--cur-nav-active-bg); /* @label News Badg Hintergrund Hover */ --cur-news-badge-published-background-hover: #444444; /* @label News Badge Radius */ --cur-news-badge-published-radius: 0px; /* @label News Badge */ --cur-news-badge-font-size: 11px; /* @label News Text Aktuell */ --cur-news-badge-published-color: #ffffff; /* @label News Text Archiv */ --cur-news-badge-archived-color: #ffffff; /* @subgroup News Cards */ /* @label News Card Hintergrund Index Seite */ --cur-news-card-index-hintergrund: var(--cur-maincard-bg); /* @subgroup Sidebar */ /* @label News Hintergrund Sidebar */ --cur-widget-news-bg: var(--cur-maincard-bg); /* @label Sidebar News Rahmen */ --cur-sidebar-card-border: var(--cur-maincard-border); /* @label Sidebar News Radius */ --cur-sidebar-card-radius: var(--cur-maincard-radius); /* @label Sidebar News Schatten */ --cur-sidebar-card-shadow: var(--cur-maincard-shadow); /* @label Widget News Fliesstext */ --cur-news-sidebar-size: var(--cur-font-size-base); /* @subgroup Buttons */ /* @label News Button Textgrösse */ --cur-news-button-font-size: 16px; /* @label News Button Hintergrundfarbe */ --cur-news-button-background: #ffffff; /* @label News Button Textfarbe */ --cur-news-button-color: #444444; /* @label News Button Rahmen */ --cur-news-button-border: 1px solid #444444; /* @label News Button Radius */ --cur-news-button-border-radius: 0px; /* @label News Button Text Decoration */ --cur-news-button-text-decoration: none; /* @label News Button Text Weight */ --cur-news-button-font-weight: 700; /* ============================================================ 11 · PRODUKTKATALOG ============================================================ */ /* @group 11 · Produktkatalog */ /* @subgroup Katalog Kopf */ /* @label Badge Produkte */ --cur-products-published: "Produkte"; /* @label Badge veröffentlicht */ --cur-products-published-1: "veröffentlicht"; /* @label Tagheadline Produkt Index */ --cur-product-catalog-lead: "Alle veröffentlichten Produkte mit Bildern, Videos und Datenblättern aus der Mediathek."; /* @label Überschrift Grösse */ --cur-products-heading-txt: clamp(24px, 4vw, 32px); /* @label Überschrift Fett */ --cur-products-heading-weight: 800; /* @label Überschrift Farbe */ --cur-products-heading-color: #444444; /* @label Fliesstext Grösse */ --cur-products-lead-txt: 17px; /* @label Fliesstext Fett */ --cur-products-lead-weight: 400; /* @label Fliesstext Farbe */ --cur-products-lead-color: var(--cur-color-text-main); /* @label Kategorie Produkt Titel Farbe */ --cur-products-heading: var(--cur-color-text-main); /* @label Kategorie Produkt muted Text Farbe */ --cur-products-muted: var(--cur-color-text-main); /* @subgroup Suche */ /* @label Produkt suchen */ --cur-products-catalog-search: "Produkt suchen"; /* @label Katalog Toolbox Suche Radius */ --cur-products-catalog-search-radius: var(--cur-maincard-radius); /* @label Katalog Input Box Radius */ --cur-products-catalog-search-input-radius: var(--cur-maincard-radius); /* @label Katalog Suche Text Farbe */ --cur-products-catalog-search-color: var(--cur-color-text-main); /* @label Katalog Suche Text Grösse */ --cur-products-catalog-search-txt: 15px; /* @label Katalog Suche Text Fett */ --cur-products-catalog-search-weight: 700; /* @label Katalog Suche Box Hintergrund */ --cur-products-catalog-search-bg: var(--cur-maincard-bg); /* @label Katalog Suche Box Rahmen */ --cur-products-catalog-search-border: var(--cur-maincard-border); /* @label Katalog Suche Input Hintergrund */ --cur-products-catalog-search-input-bg: #ffffff; /* @label Katalog Suche Input Rahmen */ --cur-products-catalog-search-input-border: var(--cur-maincard-border); /* @label Katalog Suche Input Hintergrund */ --cur-products-catalog-search-input-color: var(--cur-color-text-main); /* @label Products catalog search input txt */ --cur-products-catalog-search-input-txt: 15px; /* @label Products catalog search input shadow */ --cur-products-catalog-search-input-shadow: var(--cur-maincard-shadow); /* @label Products input bg */ --cur-products-input-bg: #ffffff; /* @label Products input border */ --cur-products-input-border: var(--cur-maincard-border); /* @subgroup Suchbuttons */ /* @label Produkt Button Suchen */ --cur-products-search-button-send: "Suchen"; /* @label Katalog Suche Button Radius */ --cur-products-search-button-radius: var(--cur-btn-radius-global); /* @label Products search button txt size */ --cur-products-search-button-txt-size: 14px; /* @label Products search button weight */ --cur-products-search-button-weight: 700; /* @label Products search button bg */ --cur-products-search-button-bg: var(--cur-btn-background-global); /* @label Products search button txt color */ --cur-products-search-button-txt-color: var(--cur-btn-text-color-global); /* @label Products search button border */ --cur-products-search-button-border: var(--cur-btn-border-global); /* @label Products search button border */ --cur-products-search-button-shadow: var(--cur-btn-shadow-global); /* @label Products search button Hintergrund Hover */ --cur-products-search-button-hover-bg: var(--cur-btn-background-global-hover); /* @label Products search button Text Farbe Hintergrund */ --cur-products-search-button-txt-hover-color: var(--cur-btn-text-color-hover-global); /* @label Products search button Rahmen Hover */ --cur-products-search-button-hover-border: var(--cur-maincard-border); /* @label Produkt Button Suche Zurücksetzen HG */ --cur-product-search-btn-bg: var(--cur-btn-background-global-hover); /* @label Produkt Button Suche Zurücksetzen Text Farbe */ --cur-product-btn-search-color: var(--cur-btn-text-color-hover-global); /* @subgroup Kategorien */ /* @label Überschrift Kategorien */ --cur-products-section-title-headline: "Kategorien"; /* @label Suche Card Schatten */ --cur-product-category-search-card-box-shadow: var(--cur-maincard-shadow); /* @label Products category image height */ --cur-products-category-image-height: 120px; /* @label Kategorie Box Radius */ --cur-products-section-title-headline-border-bottom: 1px solid #C0C0C0; --cur-products-section-title-shadow-color: #503020; /* @label Kategorie Box Überschrift Grösse */ --cur-products-section-title-headline-txt-size: var(--cur-products-heading-txt); /* @label Kategorie Box Überschritt Fett */ --cur-products-section-title-headline-font-weight: var(--cur-products-heading-weight); /* @label Kategorie Box Überschrift Farbe */ --cur-products-section-title-headline-color: var(--cur-products-heading-color); /* @subgroup Kategorie Cards */ /* @label Katalog Card Hintergrund */ --cur-cat-index-bg: var(--cur-maincard-bg); /* @label Kategorie Card Rahmen */ --cur-cat-index-border: var(--cur-maincard-border); /* @label Kategorie Card Schatten */ --cur-cat-index-shadow: var(--cur-maincard-shadow); /* @label Kategorie Card Radius */ --cur-cat-index-radius: var(--cur-maincard-radius); /* @label Kategorie Card Hintergrund Media */ --cur-products-cat-bg: var(--cur-maincard-bg); /* @label Kategorie Produkt Radius */ --cur-product-category-card-border-radius: var(--cur-maincard-radius); /* @label Kategorie Card Hintergrund */ --cur-product-category-card-border: 1px solid #444444; /* @label Product category card title font weight */ --cur-product-category-card-title-font-weight: 700; /* @label Product category card title txt size */ --cur-product-category-card-title-txt-size: 16px; /* @label Product category card title color */ --cur-product-category-card-title-color: var(--cur-color-text-main); /* @label Product category card bg */ --cur-product-category-card-bg: #ffffff; /* @label Product category card txt color */ --cur-product-category-card-txt-color: #444444; /* @label Product category card text decoration */ --cur-product-category-card-text-decoration: none; /* @label Product category card box shadow */ --cur-product-category-card-box-shadow: 0 8px 20px #444444; /* @subgroup Produkt Cards */ /* @label Produkt Count Box Texte Still */ --cur-products-card-txt-muted-color: var(--cur-btn-text-color-global); /*@label Kategorie Card Rahmen */ --cur-products-toolbar-border: var(--cur-maincard-border); /* @label Kategorie Produkt Rahmen Farbe */ --cur-products-border: var(--cur-maincard-border); /* @label Kategorie Produkt Rahmen Farbe Hover */ --cur-products-border-strong: var(--cur-maincard-border); /* @label Kategorie Produkt Card Hintergrund */ --cur-products-soft-bg: var(--cur-maincard-bg); /* @label Kategorie Produkt Card Hintergrund Media */ --cur-products-card-bg: var(--cur-maincard-bg); /* @label Kategorie Box Radius */ --cur-products-toolbar-radius: var(--cur-maincard-radius); /* @label Kategorie Box Schatten */ --cur-products-toolbar-shadow: var(--cur-maincard-shadow); /* @label Überschrift Grösse */ --cur-products-image-height: 185px; /* @label Kategorie Produkt Rahmen Radius */ --cur-products-card-radius: var(--cur-maincard-radius); /* @subgroup Badges & Count */ /* @label Produkt Count Texte Grösse */ --cur-products-count-txt: 13px; /* @label Produkt Count Texte Farbe */ --cur-products-count-color: var(--cur-btn-text-color-global); /* @label Produkt Count Hintegrund Farbe */ --cur-products-count-bg: var(--cur-btn-background-global); /* @label Produkt Count Box Schatten */ --cur-products-count-shadow: var(--cur-btn-shadow-global); /* @label Produkt Count Box Texte Fett */ --cur-products-count-weight: 700; /* @label Produkt Count Box Radius */ --cur-products-count-radius: var(--cur-btn-radius-global); /* @label Produkt Count Box Rahmen */ --cur-products-count-border: var(--cur-btn-border-global); /* @label Produkt Count Box Hintergrund */ --cur-product-category-card-count-background: var(--cur-btn-background-global); /* @label Produkt Count Box Rahmen */ --cur-product-category-card-count-border: var(--cur-btn-border-global); /* @label Produkt Count Texte Farbe */ --cur-product-category-card-count-color: var(--cur-btn-text-color-global); /* @label Produkt Count Box Radius */ --cur-product-category-card-count-border-radius: var(--cur-btn-radius-global); /* @label Produkt Count Texte Grösse */ --cur-product-category-card-count-font-size: var(--cur-products-count-txt); /* @label Produkt Count Box Texte Fett */ --cur-product-category-card-count-font-weight: var(--cur-btn-text-weight-global); /* @label Products badge bg */ --cur-products-badge-bg: var(--cur-btn-background-global); /* @label Products badge text */ --cur-products-badge-text: var(--cur-btn-text-color-global); /* @label Products badge Hover bg */ --cur-products-badge-hover-bg: var(--cur-btn-background-global-hover); /* @label Products badge Hover text */ --cur-products-badge-hover-text: var(--cur-btn-text-color-hover-global); /* @label Products badge Radius */ --cur-products-badge-radius: var(--cur-btn-radius-global); /* @label Products badge Rahmen */ --cur-products-badge-border: var(--cur-btn-border-global); /* @label Products badge Hover Rahmen */ --cur-products-badge-hover-border: var(--cur-btn-border-global); /* @label Produktdetail Badge Hintergrund */ --cur-product-detail-badge-bg: var(--cur-products-badge-bg); /* @label Produktdetail Badge Hover Hintergrund */ --cur-product-detail-badge-hover-bg: var(--cur-products-badge-hover-bg); --cur-product-detail-badge-hover-color: var(--cur-products-badge-hover-text); /* @label Produktdetail Badge Rahmen */ --cur-product-detail-badge-border: var(--cur-products-badge-hover-border); /* @label Produktdetail Badge Textfarbe */ --cur-product-detail-badge-color: var(--cur-products-button-text); /* @subgroup Preise */ /* @label Products price color */ --cur-products-price-color: var(--cur-color-text-main); /* @label Products price size */ --cur-products-price-size: 16px; /* @label Products price weight */ --cur-products-price-weight: 700; /* @subgroup Produkt Buttons */ /* @label Products button bg */ --cur-products-button-bg: var(--cur-btn-background-global); /* @label Products button text */ --cur-products-button-text: var(--cur-btn-text-color-global); /* @label Products button border */ --cur-products-button-border: var(--cur-btn-border-global); /* @label Products button hover bg */ --cur-products-button-hover-bg: var(--cur-btn-background-global); /* @label Products button hover text */ --cur-products-button-hover-text: var(--cur-btn-text-color-global); /* @subgroup Produktdetail */ /* @label Produktdetail Seitenhintergrund */ --cur-product-detail-page-bg: var(--cur-color-bg-page); /* @label Produktdetail Karten Hintergrund */ --cur-product-detail-card-bg: var(--cur-maincard-bg); /* @label Produktdetail Karten Radius */ --cur-product-detail-card-radius: var(--cur-maincard-radius); /* @label Produktdetail Karten Rahmen */ --cur-product-detail-card-border: var(--cur-maincard-border); /* @label Produktdetail Karten Schatten */ --cur-product-detail-card-shadow: var(--cur-maincard-shadow); /* @label Produktdetail Bild Hintergrund */ --cur-product-detail-image-bg: #f1f5f9; /* @label Produktdetail Textfarbe */ --cur-product-detail-text-color: var(--cur-color-text-main); /* @label Produktdetail dezente Textfarbe */ --cur-product-detail-muted-color: var(--cur-color-text-muted); /* @label Produktdetail Titel Farbe */ --cur-product-detail-title-color: var(--cur-color-text-main); /* @label Produktdetail Titel Grösse */ --cur-product-detail-title-size: clamp(30px, 3.4vw, 44px); /* @label Produktdetail Titel Stärke */ --cur-product-detail-title-weight: 800; /* @label Produktdetail Preis Farbe */ --cur-product-detail-price-color: var(--cur-color-text-main); /* @label Produktdetail Preis Grösse */ --cur-product-detail-price-size: clamp(24px, 2.6vw, 34px); /* @label Produktdetail Preis Stärke */ --cur-product-detail-price-weight: 800; /* @label Produkte Button hover Detail HG */ --cur-products-button-detail-hover-bg: var(--cur-btn-background-global-hover); /* @label Produkte Button hover Detail Text */ --cur-products-button-detail-hover-text: var(--cur-btn-text-color-hover-global); /* @subgroup Produktdetail Hinweise */ /* @label Produktdetail Fakten Hintergrund */ --cur-product-detail-facts-bg: var(--cur-maincard-bg); /* @label Produktdetail Fakten Rahmen */ --cur-product-detail-facts-border: 2px dotted rgba(24, 11, 135, 0.07); /* @label Produktdetail Hinweis Hintergrund */ --cur-product-detail-notice-bg: var(--cur-maincard-bg); /* @label Produktdetail Hinweis Rahmenfarbe */ --cur-product-detail-notice-border-color: rgba(214, 161, 0, 0.22); /* @label Produktdetail Hinweis Schatten */ --cur-product-detail-notice-shadow: 0 8px 22px rgba(146, 64, 14, 0.045); /* @label Produktdetail Hinweis Textfarbe */ --cur-product-detail-notice-text-color: var(--cur-color-text-main); /* @subgroup Datenblatt Modal */ /* @label Datenblatt Modal Hintergrund */ --cur-product-doc-modal-backdrop: rgba(0, 0, 0, 0.72); /* @label Datenblatt Modal Fläche */ --cur-product-doc-modal-bg: #ffffff; /* @label Datenblatt Modal Text */ --cur-product-doc-modal-text: #1f2933; /* @label Datenblatt Modal Rahmen */ --cur-product-doc-modal-border: rgba(0, 0, 0, 0.12); /* @label Datenblatt Modal Schatten */ --cur-product-doc-modal-shadow: 0 24px 80px rgba(0, 0, 0, 0.35); /* @label Datenblatt Modal Radius */ --cur-product-doc-modal-radius: 18px; /* @label Datenblatt Modal Innenabstand */ --cur-product-doc-modal-padding: 18px; /* @label Datenblatt Modal Body Hintergrund */ --cur-product-doc-modal-body-bg: #f7f7f7; /* @label Datenblatt Modal Schließen Hintergrund */ --cur-product-doc-modal-close-bg: #f1f1f1; /* @label Datenblatt Modal Schließen Text */ --cur-product-doc-modal-close-text: #111111; /* @label Datenblatt Modal Button Hintergrund */ --cur-product-doc-modal-button-bg: #111111; /* @label Datenblatt Modal Button Text */ --cur-product-doc-modal-button-text: #ffffff; /* ============================================================ 12 · AUSSTELLER ============================================================ */ /* @group 12 · Aussteller */ /* @subgroup Übersicht Kopf */ /* @label Aussteller Header Hintergrund */ --cur-exh-index-header-bg: var(--cur-maincard-bg); /* @label Aussteller Header Rahmen */ --cur-exh-index-header-border: var(--cur-maincard-border); /* @label Aussteller Header Schatten */ --cur-exh-index-header-shadow: var(--cur-maincard-shadow); /* @label Aussteller Header Radius */ --cur-exh-index-header-radius: var(--cur-maincard-radius); /* @label Aussteller Untertitel Größe */ --cur-exh-index-subtitle-size: 16px; /* @label Aussteller Untertitel Farbe */ --cur-exh-index-subtitle-color: var(--cur-color-text-muted); /* @label Aussteller Untertitel Fett */ --cur-exh-index-subtitle-weight: 700; /* @subgroup Suche Eingabe */ /* @label Aussteller Suche Label Größe */ --cur-exh-search-label-size: 13px; /* @label Aussteller Suche Label Farbe */ --cur-exh-search-label-color: var(--cur-color-text-muted); /* @label Aussteller Suche Input Fett */ --cur-exh-search-input-weight: 400; /* @label Aussteller Suche Input Radius */ --cur-exh-search-input-radius: var(--cur-maincard-radius); /* @label Aussteller Suche Input Rahmen */ --cur-exh-search-input-border: var(--cur-maincard-border); /* @label Aussteller Suche Input Größe */ --cur-exh-search-input-size: 14px; /* @label Aussteller Suche Input Farbe */ --cur-exh-search-input-color: #444444; /* @label Aussteller Suche Input Farbe */ --cur-exh-search-input-background: #ffffff; /* @label Aussteller Suche Input Feld Schatten */ --cur-exh-search-input-shadow: var(--cur-maincard-shadow); /* @subgroup Suche Button */ /* @label Aussteller Suche Button Radius */ --cur-exh-search-button-radius: var(--cur-maincard-radius); /* @label Aussteller Suche Button Rahmen */ --cur-exh-search-button-border: var(--cur-maincard-border); /* @label Aussteller Suche Button Größe */ --cur-exh-search-button-size: 14px; /* @label Aussteller Suche Button Hintergrund */ --cur-exh-search-button-bg:var(--cur-btn-background-global); /* @label Aussteller Suche Button Textfarbe */ --cur-exh-search-button-color: var(--cur-btn-text-color-global); /* @label Aussteller Suche Button Box Schatten */ --cur-exh-search-button-shadow: var(--cur-maincard-shadow); /* @label Aussteller Suche Button Hintergrund Hover */ --cur-exh-search-button-bg-hover: var(--cur-btn-background-global-hover); /* @label Aussteller Suche Button Textfarbe Hover */ --cur-exh-search-button-color-hover: var(--cur-btn-text-color-hover-global); /* @subgroup Suche Hinweise */ /* @label Aussteller Suche Hinweis Größe */ --cur-exh-search-hint-size: 13px; /* @label Aussteller Suche Hinweis ErgebnisFarbe */ --cur-exh-search-hint-color: red; /* @subgroup Karten */ /* @label Aussteller Card Hintergrund */ --cur-exh-card-bg: var(--cur-maincard-bg); /* @label Aussteller Card Rahmen */ --cur-exh-card-border: var(--cur-maincard-border); /* @label Aussteller Card Schatten */ --cur-exh-card-shadow: var(--cur-maincard-shadow); /* @label Aussteller Card Radius */ --cur-exh-card-radius: var(--cur-maincard-radius); /* @label Aussteller Card Hover Schatten */ --cur-exh-card-hover-shadow: 0 10px 22px rgba(0,0,0,.06); /* @label Aussteller Detail Card Hintergrund */ --cur-exh-detail-card-bg: var(--cur-maincard-bg); /* @label Aussteller Detail Card Rahmen */ --cur-exh-detail-card-border: var(--cur-maincard-border); /* @label Aussteller Detail Card Schatten */ --cur-exh-detail-card-shadow: var(--cur-maincard-shadow); /* @label Aussteller Detail Card Radius */ --cur-exh-detail-card-radius: var(--cur-maincard-radius); /* @subgroup Karten Texte */ /* @label Aussteller Card Titel Text Grösse */ --cur-exh-card-title-size: 16px; /* @label Aussteller Card Titel Text Fett */ --cur-exh-card-title-fett: 600; /* @label Aussteller Card Titel Text Farbe */ --cur-exh-card-title-color: #444444; /* @label Aussteller Card location Text Grösse */ --cur-exh-card-location-size: 14px; /* @label Aussteller Card Location Text Fett */ --cur-exh-card-location-fett: 600; /* @label Aussteller Card Location Text Farbe */ --cur-exh-card-location-color: var(--cur-exh-card-title-color); /* @label Aussteller Card Teaer Text Grösse */ --cur-exh-card-teaser-size:13px; /* @label Aussteller Card Teaser Text Fett */ --cur-exh-card-teaser-fett:600; /* @label Aussteller Card Teaser Text Farbe */ --cur-exh-card-teaser-color: var(--cur-exh-card-title-color); /* @label Aussteller Card Meta Text Grösse */ --cur-exh-card-meta-size: 13px; /* @label Aussteller Card Meta Text Fett */ --cur-exh-card-meta-fett: 600; /* @label Aussteller Card Meta Text Farbe */ --cur-exh-card-meta-color: var(--cur-exh-card-title-color); /* @label Aussteller Card Link Farbe */ --cur-exh-card-link-color: #2E6F40; /* @subgroup Karten Platzhalter */ /* @label Aussteller Platzhalter Radius */ --cur-exh-card-placeholder-radius: 9999px; /* @label Aussteller Platzhalter Hintergrund */ --cur-exh-card-placeholder-bg: rgba(0,0,0,.04); /* @label Aussteller Platzhalter Farbe */ --cur-exh-card-placeholder-color: var(--cur-color-text-muted); /* @label Aussteller Platzhalter Schriftgröße */ --cur-exh-card-placeholder-size-text: 22px; /* @label Aussteller Platzhalter Fett */ --cur-exh-card-placeholder-weight: 600; /* @subgroup Detail Layout */ /* @label Aussteller Detail Seitenbreite */ --cur-exh-detail-max-width: var(--cur-exh-index-max-width); /* @subgroup Detail Karten */ /* @label Aussteller Detail Header Fett */ --cur-exh-detail-header-weight: 600; /* @subgroup Detail Typografie */ /* @label Aussteller Detail H2 Größe */ --cur-exh-detail-h2-size: 20px; /* @label Aussteller Detail H3 Größe */ --cur-exh-detail-h3-size: 18px; /* @label Aussteller Detail H3 Ausrichtung */ --cur-exh-detail-h3-align: center; /* @subgroup Detail Galerie */ /* @label Aussteller Thumb Rahmen */ --cur-exh-thumb-border: 1px dotted #503020; /* @subgroup Detail Videos */ /* @label Aussteller Video Hintergrund */ --cur-exh-video-bg: var(--cur-maincard-bg); /* @label Aussteller Video Rahmen */ --cur-exh-video-border: 1px dotted #50302044; /* @subgroup Detail Logo */ /* @label Aussteller Detail Rahmen Logo Grösse */ --cur-ex-logo-frame-logo-width: 170px; /* @label Aussteller Detail Logo Rahmen HG */ --cur-ex-logo-frame-bg: var(--cur-color-bg-page); /* @label Aussteller Detail Logo Rahmen */ --cur-ex-logo-frame-border: var(--cur-maincard-border); /* @label Aussteller Detail Logo Rahmen Schatten */ --cur-ex-logo-frame-shadow: var(--cur-maincard-shadow); /* @label Aussteller Detail Logo Rahmen Radius */ --cur-ex-logo-frame-radius: var(--cur-maincard-radius); /* @label Aussteller Detail Logo Radius */ --cur-ex-logo-radius: var(--cur-maincard-radius); /* @subgroup Detail Formular */ /* @label Aussteller Formular Radius */ --cur-exh-detail-form-radius: 0px; /* @label Aussteller Formular Breite */ --cur-exh-detail-form-max-width: 90%; /* @subgroup Kontaktlinks */ /* @label Social Link E-Mail */ --cur-exh-mail-background: var(--cur-btn-background-global); /* @label Social Link E-Mail Rahman */ --cur-exh-mail-border: var(--cur-btn-border-global); /* @label Social Link E-Mails Rahman */ --cur-exh-mail-radius: var(--cur-btn-radius-global); /* @label Social Link E-Mails Schatten */ --cur-exh-mail-shadow: var(--cur-btn-shadow-global); /* @label Social Link E-Mails E-Mail Farbe */ --cur-exh-mail-color: var(--cur-btn-text-color-global); --cur-envelop-color: var(--cur-btn-background-global); --cur-phone-color: var(--cur-btn-background-global); --cur-globe-color: var(--cur-btn-background-global); /* @subgroup Social Links */ /* @label Social Links Radius */ --cur-exh-social-link-radius: var(--cur-maincard-radius); /* @label Social Links Background */ --cur-exh-social-link-background-icon: var(--cur-btn-background-global); /* @label Social Links Text Grösse */ --cur-exh-social-link-text-size: 14px; /* @label Social Links Text Icon Farbe */ --cur-exh-social-link-icon-color: var(--cur-btn-text-color-global); /* @label Social Links Rahmen */ --cur-exh-social-link-border: var(--cur-maincard-border); /* @label Social Links Hintergrund Hover */ --cur-exh-social-link-bg-hover: var(--cur-btn-background-global-hover); /* @label Social Links Text Farbe Hover */ --cur-exh-social-link-color-hover: var(--cur-btn-text-color-hover-global); /* @label Social Link Youtube */ --cur-bg-color-youtube: transparent; /* @label Social Link Youtube */ --cur-color-youtube: var(--cur-btn-background-global-hover); /* @label Social Link Instagram */ --cur-bg-color-instagram: transparent; /* @label Social Link Instagram */ --cur-color-instagram: var(--cur-btn-background-global-hover); /* @label Social Link Facebook */ --cur-color-facebook: var(--cur-btn-background-global-hover); /* @label Social Link TikTok */ --cur-color-tiktok: var(--cur-btn-background-global-hover); /* ============================================================ 13 · GALERIE ============================================================ */ /* @group 13 · Galerie */ /* @subgroup Intro */ /* @label intro ausblenden */ --cur-galery-display-siteheader: block; /* @subgroup Album Titel */ /* @label Titel Album Text Grösse */ --cur-gallery-thumb-caption-text-size: 13px; /* @label Titel Album Text Farbe */ --cur-gallery-thumb-caption-text-color: var(--cur-color-text-main); /* @label Titel Album Text Fett */ --cur-gallery-thumb-caption-font-weight: 700; /* @label Titel Album Box Hintergrund */ --cur-gallery-thumb-caption-background: var(--cur-maincard-bg); /* @label Titel Album Rahmen */ --cur-gallery-thumb-caption-border: 1px dotted #000; /* @label Titel Album Box Schatten */ --cur-gallery-thumb-caption-box-shadow: var(--cur-maincard-shadow); /* @label Titel Album Box Radius */ --cur-gallery-thumb-caption-border-radius: var(--cur-maincard-radius); /* @subgroup Galerie Cards */ /* @label Card Hintergrund */ --cur-gallery-card-background: var(--cur-maincard-bg); /* @label Card Rahmen */ --cur-gallery-card-border: var(--cur-maincard-border); /* @label Card radius */ --cur-gallery-card-radius: var(--cur-maincard-radius); /* @label Card Schatten */ --cur-gallery-card-shadow: var(--cur-maincard-shadow); /* @label Card Titel Grösse */ --cur-gallery-card-title-size: var(--cur-font-size-h2-base); /* @label Card Titel Fett */ --cur-gallery-card-title-weight: var(--cur-site-title-weight); /* @label Card Titel Farbe */ --cur-gallery-card-title-color: var(--cur-font-color); /* @label Card Text Grösse */ --cur-gallery-card-meta-size: 14px; /* @label Card Titel Fett */ --cur-gallery-card-meta-weight: var(--cur-color-link-weight); /* @label Card Titel Farbe */ --cur-gallery-card-meta-color: #444444; /* @label Card Meta Titel Position */ --cur-gallery-card-meta-titel-position: left; /* @subgroup Lightbox Hintergrund */ /* @label Lightbox Hintergrund Abdunklung Farbe */ --cur-gallery-lightbox-backdrop-color: #000000b8; /* @label Lightbox Hintergrund Abdunklung Intensität */ --cur-gallery-lightbox-backdrop-opacity: 72%; /* @subgroup Lightbox Navigation */ /* @label Lightbox Pfeil Hintergrund */ --cur-gallery-lightbox-nav-bg: #222222; /* @label Lightbox Pfeil Farbe */ --cur-gallery-lightbox-nav-color: #ffffff; /* @label Lightbox Rahmen Stärke */ --cur-gallery-lightbox-nav-border-width: 1px dotted #C0C0C0; /* @label Lightbox Radius */ --cur-gallery-lightbox-nav-radius: 0px; /* @label Lightbox Nav Schatten */ --cur-gallery-lightbox-nav-shadow: 0 1px 3px #000000FF; /* @label Lightbox Pfeil Icon Fett */ --cur-gallery-lightbox-nav-icon-weight: 400; /* @label Lightbox Pfeil Icon Versatz */ --cur-gallery-lightbox-nav-icon-offset-y: -2px; /* @subgroup Lightbox Close */ /* @label Lightbox Close Button Hintergrund */ --cur-gallery-lightbox-close-background: var(--cur-gallery-lightbox-nav-bg); /* @label Lightbox Close Button X Farbe */ --cur-gallery-lightbox-close-x-color: var(--cur-gallery-lightbox-nav-color); /* @label Lightbox Close Rahmen Stärke */ --cur-gallery-lightbox-close-box-rahmen: var(--cur-gallery-lightbox-nav-border-width); /* @label Lightbox Close Box Radius */ --cur-gallery-lightbox-close-box-radius: var(--cur-gallery-lightbox-nav-radius); /* @subgroup Lightbox Bild */ /* @label Lighbox Bild Radius */ --cur-gallery-lightbox-image-radius: var(--cur-maincard-radius); /* @label Lighbox Bild Shadow */ --cur-gallery-lightbox-image-shadow: var(--cur-maincard-shadow); /* @subgroup Lightbox Beschriftung */ /* @label Lightbox Bild Galerie Titel Grösse */ --cur-gallery-lightbox-caption-size: 13px; /* @label Lightbox Bild Galerie Titel Farbe */ --cur-gallery-lightbox-caption-color: #ffffff; /* @label Lightbox Bild Galerie Titel Fett */ --cur-gallery-lightbox-caption-weight: 500; /* ============================================================ 14 · LAGEPLAN ============================================================ */ /* @group 14 · Lageplan */ /* @subgroup Intro */ /* @label Intro ausbelenden */ --cur-siteplan-intro: var(--cur-galery-display-siteheader); /* @subgroup Spalten */ /* @label Linke Spalte: Breite Links und Rechts nicht mehr als 100% */ --cur-siteplan-col-left: 70%; /* @label Rechte Spalte: Breite Links und Rechts nicht mehr als 100% */ --cur-siteplan-col-right: 30%; /* @subgroup Übersicht Cards */ /* @label Siteplans Card Hintergrundfarbe */ --cur-siteplans-card-bg: var(--cur-maincard-bg); /* @label Siteplans Card Box Rahmen */ --cur-siteplans-card-border: var(--cur-maincard-border); /* @label Siteplans card radius */ --cur-siteplans-card-radius: var(--cur-maincard-radius); /* @label Siteplans card shadow */ --cur-siteplans-card-shadow: var(--cur-maincard-shadow); /* @subgroup Übersicht Texte */ /* @label Siteplans card Info Text Grösse */ --cur-siteplans-card-meta-size: 13px; /* @label Siteplans Info Text Farbe */ --cur-siteplans-card-meta-color: var(--cur-font-color); /* @label Siteplans Info Text Fett */ --cur-siteplans-card-meta-weight: 700; /* @subgroup Detail Karte */ /* @label Siteplan stage card bg */ --cur-siteplan-stage-card-bg: var(--cur-maincard-bg); /* @label Siteplan stage card border */ --cur-siteplan-stage-card-border: var(--cur-maincard-border); /* @label Siteplan stage card radius */ --cur-siteplan-stage-card-radius: var(--cur-maincard-radius); /* @label Siteplan stage card shadow */ --cur-siteplan-stage-card-shadow: var(--cur-maincard-shadow); /* @subgroup Marker */ /* @label Siteplan marker size */ --cur-siteplan-marker-size: 32px; /* @label Siteplan marker font size */ --cur-siteplan-marker-font-size: 11px; /* @label Siteplan marker bg */ --cur-siteplan-marker-bg: #f36e34; /* @label Siteplan marker color */ --cur-siteplan-marker-color: #ffffff; /* @label Siteplan marker radius */ --cur-siteplan-marker-radius: 999px; /* @label Siteplan marker shadow */ --cur-siteplan-marker-shadow: 0 4px 12px rgba(0, 0, 0, 0.18); /* @subgroup Marker Info */ /* @label Siteplan info card bg */ --cur-siteplan-info-card-bg: var(--cur-maincard-bg); /* @label Siteplan info card border */ --cur-siteplan-info-card-border: var(--cur-maincard-border); /* @label Siteplan info card radius */ --cur-siteplan-info-card-radius: var(--cur-maincard-radius); /* @label Siteplan info card shadow */ --cur-siteplan-info-card-shadow: var(--cur-maincard-shadow); /* @subgroup Sidebar Liste */ /* @label Siteplan sidebar card bg */ --cur-siteplan-sidebar-card-bg: var(--cur-maincard-bg); /* @label Siteplan sidebar card border */ --cur-siteplan-sidebar-card-border: var(--cur-maincard-border); /* @label Siteplan sidebar card shadow */ --cur-siteplan-sidebar-card-shadow: var(--cur-maincard-shadow); /* @label Siteplan sidebar card radius */ --cur-siteplan-sidebar-card-radius: var(--cur-maincard-radius); /* @label Siteplan stand link size */ --cur-siteplan-stand-link-size: 14px; /* @label Siteplan muted size */ --cur-siteplan-muted-size: 14px; --cur-siteplan-muted-color: var(--cur-color-text-muted); /* @subgroup Bildgröße */ /* @label Siteplan fit small */ --cur-siteplan-fit-small: 80%; /* @label Siteplan fit normal */ --cur-siteplan-fit-normal: 90%; /* @label Siteplan fit large */ --cur-siteplan-fit-large: 100%; /* @label Siteplan image border */ --cur-siteplan-image-border: 1px solid #e1e1e1; /* @label Siteplan image radius */ --cur-siteplan-image-radius: 0px; /* @subgroup Buttons */ /* @label Siteplan btn font size */ --cur-siteplan-btn-font-size: 13px; /* @label Siteplan btn bg */ --cur-siteplan-btn-bg: var(--cur-btn-background-global); /* @label Siteplan btn border */ --cur-siteplan-btn-border: var(--cur-btn-border-global); /* @label Siteplan btn color */ --cur-siteplan-btn-color: var(--cur-btn-text-color-global); /* @label Siteplan btn radius */ --cur-siteplan-btn-radius: var(--cur-btn-radius-global); /* @label Siteplan btn shadow */ --cur-siteplan-btn-shadow: var(--cur-btn-shadow-global); /* @label Siteplan btn HG hover */ --cur-siteplan-btn-bg-hover: var(--cur-btn-background-global-hover); /* @label Siteplan btn Text Farbe hover */ --cur-siteplan-btn-color-text: var(--cur-btn-text-color-hover-global); /* ============================================================ 15 · ANFAHRT & ROUTENPLANER ============================================================ */ /* @group 15 · Anfahrt & Routenplaner */ /* @subgroup Box */ /* @label Routenplaner maximale Breite */ --cur-route-max-width: 1140px; /* @label Routenplaner Formular maximale Breite */ --cur-route-form-max-width: 760px; /* @label Routenplaner Hintergrund */ --cur-route-bg: var(--cur-maincard-bg); /* @label Routenplaner Rahmen */ --cur-route-border: var(--cur-maincard-border); /* @label Routenplaner Radius */ --cur-route-radius: var(--cur-maincard-radius); /* @label Routenplaner Schatten */ --cur-route-shadow: var(--cur-maincard-shadow); /* @subgroup Zielbox */ /* @label Zielbox Hintergrund */ --cur-route-destination-bg: #b7ead9; /* @label Zielbox Rahmen */ --cur-route-destination-border: var(--cur-maincard-border); /* @label Zielbox Radius */ --cur-route-destination-radius: var(--cur-maincard-radius); /* @label Zielbox Schatten */ --cur-route-destination-shadow: var(--cur-maincard-shadow); /* @label Zielbox Text Farbe */ --cur-route-planner-ziel-text-color: var(--cur-color-text-main); /* @label Zielbox Text Fett */ --cur-route-planner-ziel-text-fett: 400; /* @label Zielbox Text Grösse */ --cur-route-planner-ziel-text-size: 16px; /* @label Zielbox Label Farbe */ --cur-route-planner-dest-text-color: var(--cur-route-planner-ziel-text-color); /* @label Zielbox Label Fett */ --cur-route-planner-dest-text-fett: 800; /* @label Zielbox Label Grösse */ --cur-route-planner-dest-text-size: var(--cur-route-planner-ziel-text-size); /* @subgroup Formular */ /* @label Label Grösse */ --cur-route-label-size: var(--cur-route-planner-ziel-text-size); /* @label Label Fett */ --cur-route-label-weight: 700; /* @label Eingabe Radius */ --cur-route-field-radius: var(--cur-maincard-radius); /* @label Eingabe Rahmen */ --cur-route-field-border: var(--cur-maincard-border); /* @label Eingabe Hintergrund */ --cur-route-field-bg: #ffffff; /* @label Eingabe Schatten */ --cur-route-shadow: var(--cur-maincard-shadow); /* @label Eingabe Textgrösse */ --cur-route-field-font-size: 16px; /* @subgroup Vorschläge Box */ /* @label Vorschlagsbox Hintergrund */ --cur-route-suggest-bg: #b7ead9; /* @label Vorschlagsbox Rahmen */ --cur-route-suggest-border: var(--cur-maincard-border); /* @label Vorschlagsbox Radius */ --cur-route-suggest-radius: var(--cur-maincard-radius); /* @label Vorschlagsbox Schatten */ --cur-route-suggest-shadow: var(--cur-maincard-shadow); /* @label Vorschlagsbox Titel Fett */ --cur-route-planner-suggestions-title-weight: 700; /* @label Vorschlagsbox Titel color */ --cur-route-planner-suggestions-title-color: #444444; /* @label Vorschlagsbox Titel Grösse */ --cur-route-planner-suggestions-title-size: 16px; /* @label Vorschlagsbox Header Fett */ --cur-route-planner-suggestions-head-weight: 700; /* @label Vorschlagsbox Header color */ --cur-route-planner-suggestions-head-color: #444444; /* @label Vorschlagsbox Header Grösse */ --cur-route-planner-suggestions-head-size: 16px; /* @label Vorschlagsbox Text Fett */ --cur-route-planner-suggestions-text-weight: 700; /* @label Vorschlagsbox Text color */ --cur-route-planner-suggestions-text-color: #444444; /* @label Vorschlagsbox Text Grösse */ --cur-route-planner-suggestions-text-size: 16px; /* @label Vorschlag Box Hover Hintergrund */ --cur-route-suggest-hover-bg: #f7efe9; /* @label Vorschlag Box Aktiv Hintergrund */ --cur-route-suggest-active-bg: #f7efe9; /* @subgroup Vorschläge Texte */ --cur-planner-card-radius: var(--cur-maincard-radius); --cur-planner-card-shadow: var(--cur-maincard-shadow); /* @subgroup Vorschläge Status */ /* @label Vorschlag Box Hintergrund */ --cur-route-planner-suggestion-bg: #f7efe9; /* @subgroup Buttons */ /* @label Vorschlag Box Button */ --cur-planner-button-bg: #ffffff; --cur-palner-button-text-size: 16px; --cur-planner-button-border: var(--cur-maincard-border); --cur-planner-button-hover-bg: #444444; --cur-planner-button-hover-text-color: #ffffff; /* ============================================================ 16 · COOKIE-HINWEIS ============================================================ */ /* @group 16 · Cookie-Hinweis */ /* @subgroup Overlay */ /* @label Abdunklung */ --cur-cookie-overlay-bg: #000000B3; /* @subgroup Modal */ /* @label Hintergrund */ --cur-cookie-modal-bg: var(--cur-color-bg-page); /* @label Cookie modal border */ --cur-cookie-modal-border: var(--cur-maincard-border); /* @label Cookie modal shadow */ --cur-cookie-modal-shadow: var(--cur-maincard-shadow); /* @label Cookie modal radius */ --cur-cookie-modal-radius: var(--cur-maincard-radius); /* @label Cookie manage bg */ --cur-cookie-manage-bg: var(--cur-btn-background-global); /* @label Cookie manage color */ --cur-cookie-manage-color: var(--cur-btn-text-color-global); /* @label Cookie manage border */ --cur-cookie-manage-border: var(--cur-btn-border-global); /* @label Cookie manage radius */ --cur-cookie-manage-radius: var(--cur-btn-radius-global); /* @subgroup Texte */ /* @label Cookie modal title size */ --cur-cookie-modal-title-size: 28px; /* @label Cookie modal title weight */ --cur-cookie-modal-title-weight: 700; /* @label Cookie modal text size */ --cur-cookie-modal-text-size: 15px; /* @label Cookie modal text color */ --cur-cookie-modal-text-color: var(--cur-color-text-main); /* @label Cookie modal muted color */ --cur-cookie-modal-muted-color: var(--cur-color-text-muted); /* @subgroup Gruppen */ /* @label Cookie group bg */ --cur-cookie-group-bg: var(--cur-maincard-bg); /* @label Cookie group border */ --cur-cookie-group-border: 1px solid rgba(17, 24, 39, 0.08); /* @label Cookie group radius */ --cur-cookie-group-radius: 14px; /* @label Cookie group title size */ --cur-cookie-group-title-size: 15px; /* @label Cookie group desc size */ --cur-cookie-group-desc-size: 13px; /* @subgroup Toggle */ /* @label Cookie toggle accent */ --cur-cookie-toggle-accent: green; /* @subgroup Buttons */ /* @label Cookie btn radius */ --cur-cookie-btn-radius: var(--cur-btn-radius-global); /* @label Cookie btn font size */ --cur-cookie-btn-font-size: 14px; /* @label Cookie btn font weight */ --cur-cookie-btn-font-weight: 600; /* @label Cookie btn primary bg */ --cur-cookie-btn-primary-bg: var(--cur-btn-background-global); /* @label Cookie btn primary color */ --cur-cookie-btn-primary-color: var(--cur-btn-text-color-global); /* @label Cookie btn primary border */ --cur-cookie-btn-primary-border: var(--cur-btn-border-global); /* @label Cookie btn secondary bg */ --cur-cookie-btn-secondary-bg: var(--cur-btn-background-global); /* @label Cookie btn secondary color */ --cur-cookie-btn-secondary-color: var(--cur-btn-text-color-global); /* @label Cookie btn secondary border */ --cur-cookie-btn-secondary-border: var(--cur-btn-border-global); /* @label Cookie btn ghost bg */ --cur-cookie-btn-ghost-bg: #C0C0C0; /* @label Cookie btn ghost color */ --cur-cookie-btn-ghost-color: #444444; /* @label Cookie btn ghost border */ --cur-cookie-btn-ghost-border: var(--cur-btn-border-global); /* ============================================================ 17 · BREADCRUMB ============================================================ */ /* @group 17 · Breadcrumb */ /* @subgroup Fläche */ --cur-breadcrumb-bg: transparent; --cur-breadcrumb-radius: 0px; /* @subgroup Schrift */ --cur-breadcrumb-font-size: 0.95rem; --cur-breadcrumb-font-weight: 500; /* @subgroup Farben */ --cur-breadcrumb-color: var(--cur-color-text-muted, #6f7377); --cur-breadcrumb-current-color: var(--cur-color-text-main); /* @subgroup Links */ --cur-breadcrumb-link-color: var(--cur-color-text-muted, #6f7377); --cur-breadcrumb-link-hover-color: var(--cur-color-link, #694b37); /* @subgroup Separator */ --cur-breadcrumb-separator-color: var(--cur-color-text-muted, #9a9a9a); /* @subgroup Fokus */ --cur-breadcrumb-focus-outline: 2px solid var(--cur-color-link, #694b37); /* ============================================================ 18 · FEHLERSEITEN ============================================================ */ /* @group 18 · Fehlerseiten */ /* @subgroup Texte */ /* @label 404 Fliessext Farbe */ --cur-error-title-color: #694b37; /* @label 404 Fliessext Grösse */ --cur-error-title-size: 16px; /* @label 404 Fliessext Fett */ --cur-error-title-weight: 700; /* @label 404 Fliessext Farbe */ --cur-error-text-color: #694b37; /* @label 404 Fliessext Grösse */ --cur-error-text-size: 16px; /* @subgroup Icon */ /* @label 404 Icon Hintergrund */ --cur-icon-404-bg: #694b37; /* @label 404 Icon Farbe */ --cur-icon-404-color: #FBF7F0; /* @subgroup Card */ /* @label 404 Card Hintergrund btn shadow */ --cur-error-bg: var(--cur-maincard-bg); /* @label 404 Card Rahmen */ --cur-error-border: var(--cur-maincard-border); /* @label 404 Card Radius */ --cur-error-radius: var(--cur-maincard-radius); /* @label 404 Card Schatten */ --cur-error-shadow: var(--cur-maincard-shadow); /* ============================================================ 19 Curatello · Chronik / Zeitleiste · Variablen ============================================================ */ /* @group 19 Chronik · Zeitleiste */ /* @label Chronik Linie Farbe */ --cur-chronicle-line-color: var(--cur-color-text-main); /* @label Chronik Marker Hintergrund */ --cur-chronicle-marker-bg: var(--cur-color-text-main); /* @label Chronik Marker Rahmen */ --cur-chronicle-marker-border: #ffffff; /* @label Chronik Karte Hintergrund */ --cur-chronicle-card-bg: var(--cur-color-bg-card, #ffffff); /* @label Chronik Karte Radius */ --cur-chronicle-card-radius: var(--cur-maincard-radius, 18px); /* @label Chronik Karte Schatten */ --cur-chronicle-card-shadow: var(--cur-maincard-shadow, 0 12px 30px rgba(0,0,0,.10)); /* @label Chronik Datum Hintergrund */ --cur-chronicle-date-bg: color-mix(in srgb, var(--cur-color-link, #694b37) 12%, transparent); /* @label Chronik Datum Farbe */ --cur-chronicle-date-color: var(--cur-color-link, #694b37); /* @label Chronik Titel Farbe */ --cur-chronicle-title-color: var(--cur-color-heading, #2d2018); /* @label Chronik Text Farbe */ --cur-chronicle-text-color: var(--cur-color-text, #3f3028); /* @label Chronik Bild Radius */ --cur-chronicle-image-radius: 14px; /* @label Chronik Einblendung Abstand */ --cur-chronicle-reveal-distance: 24px; /* ============================================================ 20 Curatello · Search · Box ============================================================ */ /* @group 20 Search · Box */ /* @subgroup Search Box Button */ /* @label Search Box Rahmen */ --cur-search-box-border: var(--cur-btn-border-global); /* @label Search Box Radius */ --cur-search-box-radius: var(--cur-btn-radius-global); /* @label Search Box Hintergrund */ --cur-search-box-bg: var(--cur-btn-background-global); /* @label Search Box TXT Farbe */ --cur-search-box-color: var(--cur-btn-text-color-global); /* @label Search Box Schatten */ --cur-search-box-shadow: var(--cur-btn-shadow-global); /* @label Search Box TXT Grösse */ --cur-search-box-font-size: 14px; /* @subgroup Search Box Button Hover */ /* @label Search Box Hintergrund Hover */ --cur-search-box-bg-hover: var(--cur-btn-background-global-hover); /* @label Search Box TXT Farbe Hover */ --cur-search-box-color-hover: var(--cur-btn-text-color-hover-global); /* ============================================================ 21 Curatello · Newdsletter · Box ============================================================ */ /* @group 21 Newsletter · Box */ /* @subgroup Newsletter Box Button */ /* @label Newsletter Box Radius */ --cur-newsletter-radius: var(--cur-btn-radius-global); /* @label Newsletter Box Rahmen */ --cur-newsletter-border: var(--cur-btn-border-global); /* @label Newsletter Box Hintergrund */ --cur-newsletter-background: var(--cur-btn-background-global); /* @label Newsletter Box TXT Farbe */ --cur-newsletter-txt-color: var(--cur-btn-text-color-global); /* @subgroup Newsletter Box Hover */ /* @label Newsletter Box Hintergrund Hover*/ --cur-newsletter-background-hover: var(--cur-btn-background-global-hover); /* @label Newsletter Box TXT Farbe Hover*/ --cur-newsletter-txt-color-hover: var(--cur-btn-text-color-hover-global); } body { background-color: #fdf4eb; } /* --------------------------- XMAS · Eckendeko exakt an den Browser-Ecken --------------------------- */ .cur-xmas-corner { display: var(--cur-xmas-corner-display); position: fixed; pointer-events: none; z-index: 10000; width: var(--cur-xmas-corner-width); height: var(--cur-xmas-corner-height); background-repeat: no-repeat; background-size: contain; } .cur-xmas-corner--top-left { top: var(--cur-xmas-corner-top-left-top); left: var(--cur-xmas-corner-top-left-left); background-image: var(--cur-xmas-corner-top-left-image); background-position: top left; } .cur-xmas-corner--top-right { top: var(--cur-xmas-corner-top-right-top); right: var(--cur-xmas-corner-top-right-right); background-image: var(--cur-xmas-corner-top-right-image); background-position: top right; } /* --------------------------- XMAS · Untere Eckendeko im Footer --------------------------- */ .site-footer { position: relative; overflow: visible; } .cur-xmas-footer-corner { display: var(--cur-xmas-footer-corner-display, block); position: absolute; pointer-events: none; z-index: 1; width: var(--cur-xmas-footer-corner-width, 340px); height: var(--cur-xmas-footer-corner-height, 340px); bottom: var(--cur-xmas-footer-corner-bottom); background-repeat: no-repeat; background-size: contain; } .cur-xmas-footer-corner--bottom-left { left: var(--cur-xmas-footer-corner-left); background-image: var(--cur-xmas-footer-corner-left-image); background-position: bottom left; } .cur-xmas-footer-corner--bottom-right { right: var(--cur-xmas-footer-corner-right); background-image: var(--cur-xmas-footer-corner-right-image); background-position: bottom right; } .site-footer > *:not(.cur-xmas-footer-corner) { position: relative; z-index: 2; } .cur-products-section-title-headline::before { content: var(--cur-products-section-title-headline); } .cur-products-search-button-send::before { content: var(--cur-products-search-button-send); } .cur-products-lead-text::before { content: var(--cur-product-catalog-lead); } .cur-products-published::before { content: var(--cur-products-published); } .cur-products-published-1::before { content: var(--cur-products-published-1); } .cur-products-search::before { content: var(--cur-products-catalog-search); display: block; color: var(--cur-products-catalog-search-color); font-size: var(--cur-products-catalog-search-txt); line-height: 1.3; font-weight: var(--cur-products-catalog-search-weight); } /* --------------------------- Base --------------------------- */ body.curatello-front { margin: 0; font-family: var(--cur-font-family-base) !important; line-height: 1.5; background-color: var(--cur-color-bg-page); color: var(--cur-color-text-main); font-size: var(--cur-font-size-base); } a { color: var(--cur-color-link); text-decoration: none; font-weight: var(--cur-color-link-weight); } a:hover, a:focus { color: var(--cur-color-link-hover); } /* Seite / Wrapper */ #page.site { max-width: var(--cur-page-max-width); margin: 20px auto; background: var(--cur-color-bg-site); /* transparent → keine Riesen-Card */ } /* Skip-Link nur für Screenreader sichtbar lassen */ .skip-link { position: absolute; left: -9999px; } /* --------------------------- HEADER · Radiate-Style (vollbreit) --------------------------- */ @media (min-width: 992px) { body.curatello-front { padding-top: var(--cur-header-height, 105px); } } .site-header { width: 100%; max-width: none; background: linear-gradient( to bottom, var(--cur-header-gradient-from), var(--cur-header-gradient-to) ); box-shadow: var(--cur-header-shadow); border-bottom: var(--cur-header-border-bottom); margin: 0; position: var(--cur-header-navigation-sticky); top: 0; left: 0; right: 0; z-index: 9999; transform: translateZ(0); backface-visibility: hidden; overflow: visible; transition: height 0.22s ease, box-shadow 0.22s ease, background-color 0.22s ease; } @media (min-width: 992px) { .site-header { position: fixed; height: 105px; } .site-header.is-scrolled { height: 82px; } } .site-header-inner { max-width: var(--cur-page-max-width); margin: 0 auto; padding: 0 10px 0 40px; display: flex; justify-content: space-between; align-items: center; gap: 40px; box-sizing: border-box; transition: height 0.22s ease, min-height 0.22s ease, max-height 0.22s ease, padding 0.22s ease; } @media (min-width: 992px) { .site-header-inner { height: 102px; min-height: 102px; max-height: 102px; } .site-header.is-scrolled .site-header-inner { height: 78px; min-height: 78px; max-height: 78px; padding: 6px 10px 8px 40px; gap: 40px; } } /* Branding-Bereich */ .site-branding { display: flex; align-items: center; gap: 14px; min-width: 0; } .site-header.is-scrolled .site-branding { gap: 14px; } /* Logo */ .site-logo-link { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; text-decoration: none; } .site-logo { display: inline-block; width: var(--cur-site-logo-width); min-width: var(--cur-site-logo-width); height: var(--cur-site-logo-height); min-height: var(--cur-site-logo-height); background-image: var(--cur-site-logo-image); background-size: contain; background-position: center center; background-repeat: no-repeat; background-color: transparent; vertical-align: middle; flex: 0 0 auto; transform: scale(1); transform-origin: left center; transition: transform 0.22s ease; will-change: transform; } .site-header.is-scrolled .site-logo { transform: scale(var(--cur-site-logo-scale-scrolled, 0.72)); } .site-logo-text { font-size: var(--cur-site-title-size); font-weight: var(--cur-site-title-weight); } /* Titel + Tagline */ .site-branding-text { display: flex; flex-direction: column; justify-content: center; gap: 3px; min-width: 0; transform: scale(1); transform-origin: left center; transition: transform 0.22s ease; will-change: transform; } .site-header.is-scrolled .site-branding-text { transform: scale(var(--cur-site-title-scale-scrolled, 0.82)); } .site-title { margin: 0; font-size: var(--cur-site-title-size); font-weight: var(--cur-site-title-weight); line-height: 1.1; } .site-title a { color: var(--cur-site-title-color); font-weight: inherit; font-family: var(--cur-site-title-font-family); font-size: inherit; line-height: inherit; } .site-description { display: block; visibility: visible; max-height: none; overflow: visible; margin: 3px 0 0; font-size: var(--cur-site-tagline-size); line-height: 1.25; color: var(--cur-site-tagline-color); opacity: 1; } .site-header.is-scrolled .site-description { margin: 3px 0 0; font-size: var(--cur-site-tagline-size); line-height: 1.25; opacity: 1; } /* Rechte Seite im Header: Navi + Suche */ .site-header-right { display: flex; align-items: stretch; gap: var(--cur-header-right-gap, 16px); } .site-header.is-scrolled .site-header-right { gap: var(--cur-header-right-gap, 16px); } /* Navigation */ .main-navigation { display: flex; align-items: stretch; font-size: var(--cur-nav-font-size); font-weight: var(--cur-nav-font-weight); letter-spacing: 0.03em; text-transform: none; } .site-header.is-scrolled .main-navigation { font-size: var(--cur-nav-font-size); } /* Desktop: Burger erstmal ausblenden */ .menu-toggle { display: none; border: none; background: transparent; cursor: pointer; font: inherit; padding: 0; } /* UL als horizontale Navi-Leiste */ .main-navigation .menu { display: flex; align-items: stretch; gap: 0; /* Tabs sitzen direkt aneinander */ list-style: none; padding: 0; margin: 0; } /* Ein Menüpunkt = Tab */ .main-navigation .menu-item { position: relative; } /* Link innerhalb des Tabs */ .main-navigation .menu-item > a { display: block; padding: 22px 20px; color: var(--cur-nav-link-color); background: transparent; border-radius: var(--cur-nav-radius); } /* Hover */ .main-navigation .menu-item > a:hover, .main-navigation .menu-item > a:focus { color: var(--cur-nav-link-hover); } /* Aktiver Menüpunkt – orangener Block, weiße Schrift */ .main-navigation .menu-item.current-menu-item > a, .main-navigation .menu-item.current_page_item > a { background: var(--cur-nav-active-bg); color: var(--cur-nav-active-color); border-radius: 10px; } /* --------------------------- Suche rechts (Icon) --------------------------- */ .header-search-toggle { border: none; background: transparent; cursor: pointer; padding: 0 8px; display: flex; align-items: center; } .search-icon-circle { width: 32px; height: 32px; border-radius: 50%; border: 2px solid #f36e34; position: relative; display: inline-block; } .search-icon-circle::after { content: ""; position: absolute; width: 12px; height: 2px; background: #f36e34; right: -4px; bottom: 4px; transform: rotate(45deg); transform-origin: center; } /* ============================================================ Header Navigation · Dropdown / Untermenüs (Radiate-like) ============================================================ */ .main-navigation { position: relative; } .main-navigation .menu, .main-navigation ul { list-style: none; margin: 0; padding: 0; } .main-navigation .menu { display: flex; align-items: stretch; gap: 0; } .main-navigation .menu > .menu-item { position: relative; } .main-navigation .menu-item { position: relative; } .main-navigation .menu-item > a { position: relative; display: block; } /* Elternpunkt mit Pfeil */ .main-navigation .menu-item-has-children > a { padding-right: 34px; } .main-navigation .menu-item-has-children > a::after { content: ""; position: absolute; top: 50%; right: 14px; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-65%) rotate(45deg); pointer-events: none; opacity: 0.85; } /* 1. Dropdown-Ebene */ .main-navigation .sub-menu { position: absolute; top: 100%; left: 0; z-index: 999; min-width: 220px; margin: 0; padding: 10px 0 0; opacity: 0; visibility: hidden; pointer-events: none; } /* Unterpunkte als Block */ .main-navigation .sub-menu li { position: relative; width: 100%; border-bottom: 1px solid rgba(0, 0, 0, 0.05); } .main-navigation .sub-menu li:last-child { border-bottom: none; } .main-navigation .sub-menu a { display: block; padding: 12px 18px; color: #555555; background: #ffffff; text-decoration: none; white-space: nowrap; font-size: 14px; font-weight: 400; line-height: 1.4; border: 1px solid #000; border-radius: 10px; } .main-navigation .sub-menu a:hover, .main-navigation .sub-menu a:focus { background: #f5f5f5; color: #333333; text-decoration: none; } /* Desktop: Dropdown bei Hover / Focus */ /* Desktop: Dropdown bei Hover / Focus / Klick */ .main-navigation .menu-item:hover > .sub-menu, .main-navigation .menu-item:focus-within > .sub-menu, .main-navigation .menu-item.is-open > .sub-menu { opacity: 1; visibility: visible; pointer-events: auto; } /* 2. Ebene rechts daneben */ .main-navigation .sub-menu .sub-menu { top: -1px; left: 100%; margin-left: 0; padding-top: 0; } /* Pfeil für tiefere Ebenen */ .main-navigation .sub-menu .menu-item-has-children > a { padding-right: 34px; } .main-navigation .sub-menu .menu-item-has-children > a::after { right: 14px; transform: translateY(-50%) rotate(-45deg); } /* ============================================================ Header Navigation · Active / Open sauber Ziel: - Elternpunkt oben aktiv, wenn Dropdown offen ist - Elternpunkt oben aktiv, wenn ein Child aktiv ist - Dropdown-Links selbst nicht aktiv einfärben ============================================================ */ /* Normaler Hauptmenüpunkt ohne Dropdown aktiv */ .main-navigation .menu > .menu-item.current-menu-item:not(.menu-item-has-children) > a, .main-navigation .menu > .menu-item.current_page_item:not(.menu-item-has-children) > a { background: var(--cur-nav-active-bg); color: var(--cur-nav-active-color); border-radius: var(--cur-nav-active-radius); } /* Elternpunkt aktiv, wenn ein Unterpunkt aktiv ist */ .main-navigation .menu > .menu-item.current-menu-ancestor > a, .main-navigation .menu > .menu-item.current-page-ancestor > a { background: var(--cur-nav-active-bg); color: var(--cur-nav-active-color); border-radius: var(--cur-maincard-radius); } /* Elternpunkt aktiv, wenn er per Klick geöffnet wurde */ .main-navigation .menu > .menu-item.menu-item-has-children.is-open > a { background: var(--cur-nav-active-bg); color: var(--cur-nav-active-color); border-radius: var(--cur-maincard-radius) } /* Elternpunkte mit href="/" NICHT automatisch wegen Startseite aktiv färben */ .main-navigation .menu > .menu-item.menu-item-has-children.current-menu-item > a[href="/"], .main-navigation .menu > .menu-item.menu-item-has-children.current_page_item > a[href="/"] { background: transparent; color: var(--cur-nav-link-color); } /* Aber: Wenn dieser Elternpunkt per Klick offen ist, trotzdem aktiv anzeigen */ .main-navigation .menu > .menu-item.menu-item-has-children.is-open > a[href="/"] { background: var(--cur-nav-active-bg); color: var(--cur-nav-active-color); } /* Dropdown-Links immer neutral lassen, auch wenn sie current-menu-item sind */ .main-navigation .sub-menu .menu-item.current-menu-item > a, .main-navigation .sub-menu .menu-item.current_page_item > a, .main-navigation .sub-menu .menu-item.current-menu-ancestor > a, .main-navigation .sub-menu .menu-item.current-page-ancestor > a { background: #ffffff; color: #555555; } /* Dropdown Hover bleibt sichtbar */ .main-navigation .sub-menu .menu-item > a:hover, .main-navigation .sub-menu .menu-item > a:focus { background: #f5f5f5; color: #333333; text-decoration: none; } /* Mobile / Tablet */ @media (max-width: 991px) { .main-navigation .menu { display: none; flex-direction: column; width: 100%; margin-top: 8px; padding: 4px 0; background: var(--cur-mobile-nav-bg); border: 1px solid var(--cur-mobile-nav-border-color); } .main-navigation.is-open .menu { display: flex; } .main-navigation .menu > .menu-item, .main-navigation .sub-menu .menu-item { width: 100%; } .main-navigation .menu-item > a { display: block; padding: 10px 12px; border-bottom: 1px solid var(--cur-mobile-nav-border-color); color: var(--cur-mobile-nav-link-color); background: transparent; } .main-navigation .menu-item:last-child > a { border-bottom: none; } .main-navigation .menu-item-has-children > a { padding-right: 34px; } .main-navigation .menu-item-has-children > a::after { right: 14px; transform: translateY(-65%) rotate(45deg); } .main-navigation .sub-menu { position: static; top: auto; left: auto; min-width: 0; margin: 0; padding: 0; border: 0; box-shadow: none; background: transparent; opacity: 1; visibility: visible; pointer-events: auto; display: block; } .main-navigation .sub-menu li { border-bottom: 0; } .main-navigation .sub-menu a { padding: 9px 12px 9px 28px; background: transparent; white-space: normal; font-size: 14px; color: var(--cur-mobile-nav-link-color); } .main-navigation .sub-menu .sub-menu a { padding-left: 42px; } .main-navigation .sub-menu .menu-item-has-children > a::after { right: 14px; transform: translateY(-65%) rotate(45deg); } } /* Mobile / Tablet */ @media (max-width: 991px) { .main-navigation .sub-menu { position: static; min-width: 0; margin: 6px 0 0 0; padding: 6px 0 0 14px; border: 0; box-shadow: none; background: transparent; opacity: 1; visibility: visible; transform: none; display: block; } .main-navigation .sub-menu a { padding: 8px 0; white-space: normal; } .main-navigation .sub-menu .sub-menu { margin-left: 0; padding-left: 14px; } .main-navigation .menu-item-has-children > a::after, .main-navigation .sub-menu .menu-item-has-children > a::after { right: 0; } } /* --------------------------- HERO (Bild / Slider / Video) --------------------------- */ .header-image { position: relative; margin-top: 50px; height: 600px; background: var(--cur-hero-bg); background-size: cover; background-position: center center; background-repeat: no-repeat; overflow: hidden; box-shadow: var(--cur-hero-image-shadow); border-radius: var(--cur-hero-image-radius); } /* NEU: Vollbreiter Hero, wenn #page die Klasse .cur-hero-fullwidth hat */ .cur-hero-fullwidth .header-image { width: 100vw; margin-left: calc(50% - 50vw); } /* Overlay bleibt auf Seitenbreite begrenzt */ .cur-hero-fullwidth .header-image-overlay { max-width: var(--cur-page-max-width); margin: 0 auto; } /* Fallback-Hero nutzt nur die Standard-Gradienten */ .header-image--fallback { background-image: linear-gradient( to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.5) ); } /* Single & Slider bekommen ihren Background per Inline-Style */ .header-image--single, .header-image--slider { /* keine zusätzlichen Regeln nötig, Basis reicht */ } /* Video-Hero: schwarzer Hintergrund, Video füllt den Bereich */ .header-image--video { background: #000000; background-image: none; } /* Gemeinsames Overlay (Text) */ .header-image-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 40px; pointer-events: none; /* Klicks sollen z.B. Video nicht blockieren */ } .hero-title { margin: 0 0 18px; font-size: var(--cur-hero-title-size); font-weight: var(--cur-hero-title-weight) !important; color: var(--cur-hero-title-color); text-shadow: var(--cur-hero-text-shadow); display: var(--cur-hero-title-view); } .hero-subtitle { margin: 0; max-width: 800px; font-size: var(--cur-hero-subtitle-size); color: var(--cur-hero-subtitle-color); text-shadow: var(--cur-hero-text-shadow); font-weight: var(--cur-hero-subtitel-weight); display: var(--cur-hero-subtitle-view); } /* ---------- Slider-Hero ---------- */ .cur-hero-slider { position: absolute; inset: 0; } .cur-hero-slide { position: absolute; inset: 0; background-size: cover; background-position: center center; background-repeat: no-repeat; opacity: 0; transition: opacity 0.5s ease-out; } .cur-hero-slide.is-active { opacity: 1; } /* Slider-Dots */ .cur-hero-dots { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; gap: 6px; pointer-events: auto; } .cur-hero-dot { width: var(--cur-hero-dot-size); height: var(--cur-hero-dot-size); border-radius: 0px; border: 1px solid var(--cur-hero-dot-color); background: var(--cur-hero-dot-bg); padding: 0; cursor: pointer; } .cur-hero-dot.is-active { background: var(--cur-hero-dot-bg-active); border-color: var(--cur-hero-dot-color-active); } /* ---------- Video-Hero ---------- */ .cur-hero-video-wrap { position: absolute; inset: 0; overflow: hidden; } .cur-hero-video { width: 100%; height: 100%; object-fit: cover; display: block; } .cur-hero-video-placeholder { width: 100%; height: 100%; background: #222; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; } .cur-hero-video-overlay { position: absolute; inset: 0; background: linear-gradient( to bottom, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.45) ); } /* --------------------------- CONTENT + SIDEBAR --------------------------- */ /* Abstand zwischen Hero und dem ersten Card-Block */ .site-content { padding-top: 40px; padding-bottom: 0px; } /* Container NUR für Grid, keine Card! */ .site-content .container { max-width: var(--cur-exh-detail-max-width); margin: 0 auto; padding: 0px; display: grid; grid-template-columns: 3fr 1fr; gap: 32px; } /* No-Sidebar Seiten (z.B. News-Index) → Container einspaltig */ .cur-layout-nosidebar .site-content .container { display: block; } /* Seitengestalter-Seiten: zentrale Breitensteuerung */ .cur-managed-page.cur-managed-page--with-sidebar .site-content .container { max-width: var(--cur-page-builder-width-with-sidebar); } .cur-managed-page.cur-managed-page--without-sidebar .site-content .container { max-width: var(--cur-page-builder-width-without-sidebar); } /* Seitengestalter-Seiten: Breadcrumb getrennt vom Content/Sidebar-Grid */ .cur-managed-page .site-content .cur-page-breadcrumb-container { display: block; margin-bottom: 24px; } .cur-managed-page.cur-managed-page--with-sidebar .site-content .cur-page-breadcrumb-container { max-width: var(--cur-page-builder-width-with-sidebar); } .cur-managed-page.cur-managed-page--without-sidebar .site-content .cur-page-breadcrumb-container { max-width: var(--cur-page-builder-width-without-sidebar); } .cur-managed-page.cur-managed-page--with-sidebar .site-content .cur-page-layout { display: grid; grid-template-columns: 3fr 1fr; gap: 32px; max-width: var(--cur-page-builder-width-with-sidebar); } .cur-managed-page.cur-managed-page--without-sidebar .site-content .cur-page-layout { display: block; max-width: var(--cur-page-builder-width-without-sidebar); } .cur-managed-page.cur-managed-page--without-sidebar #primary.content-area.page-main { width: 100%; max-width: 100%; } .cur-managed-page.cur-managed-page--without-sidebar .front-page-sections, .cur-managed-page.cur-managed-page--without-sidebar .front-featured { width: 100%; margin-top: 24px; } .cur-managed-page.cur-managed-page--without-sidebar .cur-block--form { margin-top: 24px; } .cur-managed-page.cur-managed-page--without-sidebar .cur-block--form .cur-form-card, .cur-managed-page.cur-managed-page--without-sidebar .cur-block--form .front-page-intro:has(.mm-contact-form) { max-width: 100%; margin-left: 0; margin-right: 0; } .cur-managed-page.cur-managed-page--with-sidebar .cur-block--form { margin-top: 24px; } /* Content links (Feature-Boxen + Intro-Card) */ .content-area { min-width: 0; } /* Drei Feature-Boxen – JEDE Box eigene Card */ .front-featured { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-bottom: 30px; align-items: stretch; /* alle Karten gleich hoch */ } /* Gemeinsamer Card-Aufbau für alle Feature-/Highlighter-Blöcke */ .featured-box { background: var(--cur-featuered-bg); box-shadow: var(--cur-featuerd-shadow); border-radius: var(--cur-featured-radius); border: var(--cur-featuerd-border); display: flex; flex-direction: column; overflow: hidden; } /* Bildbereich oben – sorgt für gleiche Bildhöhe & zentrierte Logos */ .featured-box-media { height: 200px; padding: 0px 10px 0; display: flex; align-items: center; justify-content: center; background: var(--cur-featuered-bg); } .featured-box-media img { max-width: 100%; max-height: 180px; display: block; } /* Unterer Bereich mit Titel/Text/Link – Titel fluchten */ .featured-box-body { flex: 1; padding: 0px 24px 26px; text-align: center; display: flex; flex-direction: column; justify-content: flex-start; gap: 10px; background: var(--cur-featuered-bg); } h3.featured-title { font-size: var(--cur-featuerd-title-size); color: var(--cur-featuerd-title-color); font-weight: var(--cur-featuerd-title-fett); } /* Standard-Feature-Images (z.B. in anderen Cards ohne .featured-box-media) */ .featured-box img { max-width: 110%; height: auto; display: block; border-radius: var(--cur-maincard-radius); } .featured-title { margin: 0; } .featured-text { margin: 0; font-size: var(--cur-featuerd-text-size); color: var(--cur-feature-text-color); line-height: 1.6; font-weight: var(--cur-feature-text-weight); } /* Intro-Bereich als EIGENE Card, getrennt von den Boxen */ .front-page-sections { margin-bottom: 24px; } .front-page-intro { background: var(--cur-maincard-bg); border: var(--cur-maincard-border); box-shadow: var(--cur-maincard-shadow); border-radius: var(--cur-maincard-radius); padding: 26px 24px !important; } .single-images { width: 100%; } /* Wenn die Intro-Card ein Formular enthält, Card-Padding aus den Formular-Variablen ziehen */ .front-page-intro:has(.mm-contact-form) { background: var(--cur-form-card-bg); border: var(--cur-form-card-border); box-shadow: var(--cur-form-card-shadow); border-radius: var(--cur-form-card-radius); padding: 26px 24px; max-width: 880px; margin-left: auto; margin-right: auto; } .front-page-intro .entry-title { margin: 0 0 8px; } .front-page-intro .entry-content p { margin: 0 0 1rem; } /* Auf statischen Seiten (pages.php) oben 24px Abstandmit Sidebar */ .page-main .front-page-sections { margin-top: 0; } /* --------------------------- HIGHLIGHTER-BLOCK (aus page_blocks) nutzt dein Markup:
--------------------------- */ .front-featured.cur-block--highlighter { margin: 20px 0; gap: 10px; } .front-featured.cur-block--highlighter .featured-box { height: 100%; } .front-featured.cur-block--highlighter .featured-box-body { display: flex; flex-direction: column; flex: 1 1 auto; } .front-featured.cur-block--highlighter .featured-text { margin-bottom: 0; } .front-featured.cur-block--highlighter .cur-highlighter-button-row { margin: auto 0 0; padding-top: 18px; } /* Bilder im Highlighter nutzen den gemeinsamen Bildbereich */ .front-featured.cur-block--highlighter .featured-box-media img { /* bewusst leer gelassen, Logos sollen komplett sichtbar sein */ } .front-featured.cur-block--highlighter .featured-title { margin: 0 0 10px; } .front-featured.cur-block--highlighter .featured-text { } .front-featured.cur-block--highlighter .featured-box p:last-child { margin-bottom: 0; } /* „Mehr erfahren“-Button als runde Radiate-Pille */ .front-featured .featured-box a { display: inline-block; margin-top: 6px; padding: 7px 18px; } .front-featured .featured-box a:hover { border: var(--cur-maincard-border); color: #333333; } /* --------------------------- SIDEBAR / WIDGETS --------------------------- */ .widget-area { background: transparent; } /* Jede Widget-Box eigene Card (z.B. Search, einzelne News) */ .widget { background: var(--cur-widget-news-bg); border: var(--cur-sidebar-card-border); box-shadow: var(--cur-sidebar-card-shadow); border-radius: var(--cur-sidebar-card-radius); padding: 18px 20px; margin-bottom: 24px; } .widget-title { margin: 0 0 8px; font-size: var(--cur-search-button-font-size); font-weight: 600; color: var(--cur-widget-title-color); } /* SIDEBAR-SEARCH (Radiate-like) */ .widget-search-form { margin: 0; } .widget-search-inner { display: flex; align-items: stretch; gap: 0; } .widget-search-inner .search-field { flex: 1; padding: 8px 10px; border: 1px solid #e1e1e1; font-size: 13px; border-right: none; } .widget-search-inner .search-submit { padding: 8px 14px; border: none; background: #f36e34; color: #ffffff; font-size: var(--cur-search-button-font-size); cursor: pointer; white-space: nowrap; } .widget-search-inner .search-submit:hover, .widget-search-inner .search-submit:focus { background: #e45f26; } /* ============================ NEWS-WIDGET · einzelne Cards ============================ */ /* Liste der News-Cards – KEINE eigene Card, nur vertikale Anordnung und Abstände */ .widget-news-list { display: flex; flex-direction: column; gap: 16px; } /* Jede News-Card ist selbst eine .widget (Card) */ .cur-news-card { cursor: pointer; transition: box-shadow 0.15s ease, transform 0.15s ease; } /* Hover-Effekt für News-Cards */ .cur-news-card:hover { transform: translateY(-2px); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08); } .widget-post-title { margin: 0 0 4px; font-size: var(--cur-search-button-font-size); font-weight: 600; line-height: 1.3; color: var(--cur-widget-title-color); } .widget-post-title a { display: block; color: var(--cur-widget-title-color); font-size: var(--cur-font-size-base) !important; } .widget-post-title a:hover, .widget-post-title a:focus { color: var(--cur-color-link-hover); } .widget-post-meta { font-size: 13px; color: var(--cur-color-text-muted); } /* --------------------------- FOOTER (vollbreit) --------------------------- */ .site-info { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; } .site-footer-link { color: var(--cur-site-footer-link-color); font-weight: var(--cur-site-footer-link-weight); font-size: var(--cur-site-footer-link-size); } .site-footer-link:hover{ color: var(--cur-site-footer-link-color-hover); font-weight: var(--cur-site-footer-link-weight-hover); font-size: var(--cur-site-footer-link-size-hover); } .site-info > span:first-child { display: inline-flex; align-items: center; gap: 8px; } .site-footer { width: var(--cur-site-footer); background: linear-gradient( to bottom, var(--cur-footer-gradient-from), var(--cur-footer-gradient-to) ); border-top: var(--cur-footer-border-top); box-shadow: var(--cur-footer-shadow); margin: auto; } .site-footer-inner { max-width: var(--cur-page-max-width); margin: 0 auto; padding: 32px 32px; text-align: center; font-size: var(--cur-footer-copyright-size); color: var(--cur-footer-copyright-color); font-weight: var(--cur-footer-copyright-weight); } img.site-footer-logo { display: block; width: var(--cur-footer-logo-width-size); height: var(--cur-footer-logo-height-size); object-fit: contain; } /* --------------------------- RESPONSIVE (grob, später feiner) --------------------------- */ /* Tablet: Highlighter 2 Spalten */ @media (max-width: 1024px) { .cur-block--highlighter.front-featured { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cur-xmas-corner, .cur-xmas-footer-corner { display: none !important; } } @media (max-width: 991px) { .site-header { position: unset; } .cur-xmas-corner, .cur-xmas-footer-corner { display: none !important; } .site-header-inner { position: relative; /* Referenz für das absolut positionierte Burger-Icon */ flex-direction: column; align-items: flex-start; gap: 12px; padding: 12px 16px 0 16px; } .site-header-right { width: 100%; justify-content: space-between; } /* Mobile Navigation: untereinander, via Hamburger ein-/ausblendbar */ .main-navigation { width: 100%; flex-direction: column; align-items: stretch; } .menu-toggle { display: inline-flex; align-items: center; justify-content: center; padding: 8px 12px; border-radius: var(--cur-mobile-nav-toggle-radius); border: var(--cur-mobile-nav-toggle-border); background: var(--cur-mobile-nav-toggle-bg); color: var(--cur-mobile-nav-toggle-color); /* NEU: oben rechts im Header */ position: absolute; top: -65px; right: 16px; z-index: 20; } .menu-toggle:focus { outline: 2px solid var(--cur-mobile-nav-border-color); outline-offset: 2px; } .main-navigation .menu { display: none; flex-direction: column; width: 100%; margin-top: 8px; padding: 4px 0; background: var(--cur-mobile-nav-bg); border: 1px solid var(--cur-mobile-nav-border-color); } .main-navigation.is-open .menu { display: flex; } .main-navigation .menu-item > a { padding: 10px 8px; border-bottom: 1px solid var(--cur-mobile-nav-border-color); color: var(--cur-mobile-nav-link-color); } .main-navigation .menu-item:last-child > a { border-bottom: none; } .main-navigation .menu-item > a:hover, .main-navigation .menu-item > a:focus { color: var(--cur-mobile-nav-link-hover); } .site-content { padding-top: 24px; padding-bottom: 24px; } .site-content .container { grid-template-columns: 1fr; padding: 16px; } .cur-layout-nosidebar .site-content .container { display: block; } .cur-managed-page.cur-managed-page--with-sidebar .site-content .container, .cur-managed-page.cur-managed-page--without-sidebar .site-content .container { max-width: 100%; } .cur-managed-page .site-content .cur-page-breadcrumb-container, .cur-managed-page .site-content .cur-page-layout { max-width: 100%; } .cur-managed-page.cur-managed-page--with-sidebar .site-content .cur-page-layout { grid-template-columns: 1fr; } .header-image { height: 260px; } .header-image-overlay { padding: 0 20px; } .front-featured { grid-template-columns: 1fr; } .cur-block--highlighter.front-featured { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ============================ MODAL für News ============================ */ body.cur-modal-open { overflow: hidden; } body.cur-nav-open { overflow: hidden; } .cur-modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); display: none; align-items: center; justify-content: center; z-index: 1000; } .cur-modal-overlay.is-open { display: flex; } .cur-modal { background: #ffffff; max-width: 700px; width: 90%; max-height: 80vh; border-radius: var(--cur-modal-radius); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); display: flex; flex-direction: column; overflow: hidden; } .cur-modal-header { padding: 16px 20px; border-bottom: 1px solid #e1e1e1; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .cur-modal-title { margin: 0; font-size: var(--cur-modal-title-size); font-weight: var(--cur-modal-title-weight); } .cur-modal-close { border: none; background: transparent; font-size: 22px; line-height: 1; cursor: pointer; padding: 0; } .cur-modal-body { padding: 26px 20px 20px; overflow: auto; } .cur-modal-meta { font-size: var(--cur-modal-meta-size); color: var(--cur-color-text-muted); margin-bottom: 8px; } #cur-news-modal-content p { margin: 0 0 10px; } /* Responsive Modal-Anpassung */ @media (max-width: 768px) { .cur-modal { max-width: 95%; width: 95%; max-height: 85vh; } } /* ============================ MEDIA-MODAL (Bilder/Videos Detailseite) ============================ */ /* eigene Variante, die sich an den Inhalt anpasst */ .cur-modal--media { background: transparent; /* kein weißer Rahmen – nur Content */ box-shadow: none; border-radius: 0; max-width: none; max-height: none; width: auto; height: auto; display: block; /* Inhalt definiert die Größe */ } /* Body ohne Standard-Padding */ .cur-modal--media .cur-modal-body, .cur-media-modal-body { padding: 0; overflow: visible; } /* Bilder dürfen weiterhin möglichst groß werden (bis Viewport-Grenze) */ .cur-modal--media img { display: block; max-width: calc(100vw - 2 * 40px); max-height: calc(100vh - 2 * 40px); width: auto; height: auto; margin: 0 auto; } /* Videos/Embeds in einer begrenzten Box (nicht Vollbild) */ .cur-media-video-inner { max-width: min( 960px, calc(100vw - 2 * 40px)); max-height: min( 540px, calc(100vh - 2 * 40px)); width: 100%; aspect-ratio: 16 / 9; margin: 0 auto; background: #000; overflow: hidden; } /* --------------------------------- MEDIA-MODAL · Navigationspfeile --------------------------------- */ /* Das Modal selbst als Bezugspunkt */ #cur-media-modal .cur-modal--media { position: relative; } /* Gemeinsames Styling für beide Pfeile */ .cur-media-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: none; padding: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.55); color: #ffffff; font-size: 26px; line-height: 1; cursor: pointer; z-index: 5; } /* Links/Rechts positionieren */ .cur-media-nav--prev { left: 16px; } .cur-media-nav--next { right: 16px; } /* Hover-Effekt */ .cur-media-nav:hover, .cur-media-nav:focus { background: rgba(0, 0, 0, 0.75); outline: none; } /* Auf kleineren Screens etwas kleinere Buttons */ @media (max-width: 768px) { .cur-media-nav { width: 36px; height: 36px; font-size: 22px; } .cur-media-nav--prev { left: 10px; } .cur-media-nav--next { right: 10px; } } /* Video/iframe füllen die Video-Box */ .cur-media-video-inner iframe, .cur-media-video-inner video { width: 100%; height: 100%; display: block; } /* Aussteller-Medienmodal nutzt bewusst dieselbe Lightbox-Struktur und dieselben Root-Variablen wie die Galerie-Lightbox. */ .cur-exh-media-lightbox .cur-gallery-lightbox-figure { justify-content: center; } .cur-exh-media-lightbox .cur-media-modal-body { display: flex; align-items: center; justify-content: center; width: 100%; min-width: 0; padding: 0; overflow: visible; } .cur-exh-media-lightbox .cur-media-modal-image { display: block; max-width: 100%; max-height: 70vh; width: auto; height: auto; object-fit: contain; } .cur-exh-media-lightbox .cur-media-video-inner { width: min(100%, 960px); max-width: min(100%, 960px); aspect-ratio: 16 / 9; margin: 0 auto; background: #000; overflow: hidden; border-radius: var(--cur-gallery-lightbox-image-radius); box-shadow: 0 12px 32px rgba(0,0,0,0.6); } .cur-exh-media-lightbox .cur-media-video-inner iframe, .cur-exh-media-lightbox .cur-media-video-inner video { width: 100%; height: 100%; display: block; border: 0; } @media (max-width: 640px) { .cur-exh-media-lightbox .cur-media-video-inner { width: 100%; max-width: 100%; } } /* ============================ NEWS-INDEX (No Sidebar Layout) ============================ */ /* Haupt-Container der News-Seite mittig begrenzen */ .cur-news-index-main { max-width: var(--cur-news-index-max-width); margin: 0 auto; } /* Kopfbereich der News-Seite als Card, typografisch wie die Intro-Card auf Home/Seite */ .cur-news-index-header { background: var(--cur-maincard-bg); border: var(--cur-maincard-border); box-shadow: var(--cur-maincard-shadow); border-radius: var(--cur-maincard-radius); padding: 26px 24px; margin-bottom: 24px; } .cur-news-index-title { margin: 0 0 6px; font-size: 24px; font-weight: 600; } .cur-news-index-subtitle { margin: 0; font-size: 26px; color: var(--cur-color-text-muted); } /* Karten-Grid (eine Spalte) */ .cur-news-grid { display: grid; grid-template-columns: 1fr; gap: var(--cur-news-index-card-gap); } /* Einzelne News-Kachel im gleichen Card-Look wie Main-Card */ .cur-news-card-index { background: var(--cur-news-card-index-hintergrund); border: var(--cur-maincard-border); box-shadow: var(--cur-maincard-shadow); border-radius: var(--cur-maincard-radius); padding: 18px 20px; margin-bottom: 20px; } /* Title / Meta / Teaser typografisch an andere Cards angelehnt */ .cur-news-card-title { margin: 0 0 4px; font-size: var(--cur-feature-title-size); font-weight: 600; color: var(--cur-feature-title-color); } .cur-news-card-meta { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--cur-color-text-muted); margin-bottom: 8px; } .cur-news-card-meta-badge { display: inline-flex; align-items: center; padding: 2px 8px; font-size: var(--cur-news-badge-font-size) } .cur-news-card-meta-badge--published { background: var(--cur-news-badge-published-bg); border-radius: var(--cur-news-badge-published-radius); border-color: var(--cur-news-badge-published-bg); color: var(--cur-news-badge-published-color); padding: 5px; } .cur-news-card-meta-badge--archived { background: var(--cur-news-badge-published-bg); border-radius: var(--cur-news-badge-published-radius); border-color: var(--cur-news-badge-published-bg); color: var(--cur-news-badge-published-color); } .cur-news-card-teaser { margin: 0 0 10px; font-size: var(--cur-feature-text-size); color: var(--cur-feature-text-color); } .cur-news-card-read-more { display: inline-flex !important; align-items: center; font-size: var(--cur-news-button-font-size); min-width: 10px; padding: 16px 20px 16px 26px; background: var(--cur-news-button-background); color: var(--cur-news-button-color); border: var(--cur-news-button-border); border-radius: var(--cur-news-button-border-radius); text-decoration: var(--cur-news-button-text-decoration); line-height: 1; font-weight: var(--cur-news-button-font-weight); letter-spacing: 0.02em; } .cur-news-card-footer { display: flex; justify-content: flex-end; gap: 6px; font-size: 13px; font-weight: 800; } /* Hover-Effekt passend zu den Sidebar-News-Cards */ .cur-news-card-index:hover { transform: translateY(-2px); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08); } /* Tabs-Buttons etwas typografisch angleichen */ .cur-news-tabs-buttons { display: inline-flex; gap: 8px; margin-bottom: 16px; } .cur-news-tab-button { border: 1px solid #d4d4d4; background: #ffffff; padding: 6px 14px; font-size: 1px; cursor: pointer; color: #555555; } .cur-news-tab-button.is-active { border-color: var(--cur-news-tab-active-border-color); background: var(--cur-news-tab-active-bg); color: var(--cur-news-tab-active-color); } .cur-news-panel { display: none; } .cur-news-panel.is-active { display: block; } .cur-news-empty { background: var(--cur-maincard-bg); border: var(--cur-maincard-border); box-shadow: var(--cur-maincard-shadow); border-radius: var(--cur-maincard-radius); padding: 26px 24px; font-size: 14px; color: var(--cur-color-text-muted); } /* ============================ EXHIBITORS-INDEX (No Sidebar Layout) ============================ */ /* Haupt-Container der Aussteller-Seite mittig begrenzen */ .cur-exh-index-main { max-width: var(--cur-exh-index-max-width); margin: 0 auto; padding-bottom: 32px; } /* Filter-/Such-Card */ .cur-exh-index-header { background: var(--cur-exh-index-header-bg); border: var(--cur-exh-index-header-border); box-shadow: var(--cur-exh-index-header-shadow); border-radius: var(--cur-exh-index-header-radius); padding: 26px 24px; margin-bottom: 24px; } .cur-exh-index-subtitle { margin: 0 0 10px; font-size: var(--cur-exh-index-subtitle-size); color: var(--cur-exh-index-subtitle-color); font-weight: var(--cur-exh-index-subtitle-weight); } /* Suche */ .cur-exh-index-search { margin-top: 4px; } .cur-exh-index-search-label { display: block; font-size: var(--cur-exh-search-label-size); margin-bottom: 4px; color: var(--cur-exh-search-label-color); } .cur-exh-index-search-row { display: flex; gap: 8px; flex-wrap: wrap; } .cur-exh-index-search-row input[type="text"] { flex: 1 1 220px; min-width: 0; padding: 6px 10px; border-radius: var(--cur-exh-search-input-radius); border: var(--cur-exh-search-input-border); font-size: var(--cur-exh-search-input-size); font-weight: var(--cur-exh-search-input-weight); color: var(--cur-exh-search-input-color); background: var(--cur-exh-search-input-background); box-shadow: var(--cur-exh-search-input-shadow); } .cur-exh-index-search-row button[type="submit"] { padding: 6px 14px; border-radius: var(--cur-exh-search-button-radius); border: var(--cur-exh-search-button-border); font-size: 14px; cursor: pointer; background: var(--cur-exh-search-button-bg); color: var(--cur-exh-search-button-color); box-shadow: var(--cur-exh-search-button-shadow); } .cur-exh-index-search-row button[type="submit"]:hover { background: var(--cur-exh-search-button-bg-hover); color: var(--cur-exh-search-button-color-hover); } .cur-exh-index-search-row .cur-exh-index-search-hint { margin: 6px 0 0; font-size: 13px; color: var(--cur-color-text-muted); } /* Grid mit Karten */ .cur-exh-index-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; } @media (max-width: 992px) { .cur-exh-index-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (max-width: 640px) { .cur-exh-index-grid { grid-template-columns: minmax(0,1fr); } } /* Karte */ .cur-exh-card { background: var(--cur-exh-card-bg); border: var(--cur-exh-card-border); box-shadow: var(--cur-exh-card-shadow); border-radius: var(--cur-exh-card-radius); overflow: hidden; /* transition: transform .12s ease-out, box-shadow .12s ease-out;*/ } .cur-exh-card-link { display: block; color: var(--cur-exh-card-link-color); text-decoration: none; } .cur-exh-card-inner { display: grid; grid-template-columns: 155px minmax(0, 1fr); gap: 0; min-height: 138px; padding: 0; } @media (max-width: 480px) { .cur-exh-card-inner { grid-template-columns: 110px minmax(0, 1fr); min-height: 118px; } .cur-exh-card-media { min-height: 118px; } .cur-exh-card-media picture { display: block; width: 100%; height: 100%; min-height: inherit; } .cur-exh-card-media img { min-height: 118px; } .cur-exh-card-body { padding: 14px 16px; } .cur-block--highlighter.front-featured { grid-template-columns: repeat(1, minmax(0, 1fr)); } } .cur-exh-card:hover { /*transform: translateY(-2px);*/ box-shadow: var(--cur-exh-card-hover-shadow); } /* Logo / Platzhalter links */ .cur-exh-card-media { display: block; min-height: 180px; width: 170px; background: var(--cur-products-soft-bg); overflow: hidden; } .cur-exh-card-media img { width: 100%; height: 100%; min-height: 138px; max-width: 170px; max-height: none; object-fit: cover; object-position: center center; display: block; } .cur-exh-card-placeholder { width: 64px; height: 64px; border-radius: 50%; background: rgba(0,0,0,.04); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 22px; color: var(--cur-color-text-muted); } /* Text rechts */ .cur-exh-card-body { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-width: 0; padding: 18px 22px; } .cur-exh-card-title { margin: 0; font-size: var(--cur-exh-card-title-size); font-weight: var(--cur-exh-card-title-fett); color: var(--cur-exh-card-title-color); } .cur-exh-card-location { margin: 2px 0 0; font-size: var(--cur-exh-card-location-size); font-weight: var(--cur-exh-card-location-fett); color: var(--cur-exh-card-location-color); } .cur-exh-card-teaser { margin: 10px 0 0; font-size: var(--cur-exh-card-teaser-size); font-weight: var(--cur-exh-card-teaser-fett); color: var(--cur-exh-card-teaser-color); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .cur-exh-card-meta { margin: 12px 0 0; font-size: var(--cur-exh-card-meta-size); font-weight: var(--cur-exh-card-meta-fett); color: var(--cur-exh-card-meta-color); } /* Empty-State */ .cur-exh-index-empty { background: var(--cur-maincard-bg); border: var(--cur-maincard-border); box-shadow: var(--cur-maincard-shadow); border-radius: var(--cur-maincard-radius); color: var(--cur-exh-search-hint-color); padding: 20px; text-align: center; grid-column: 1 / -1; } .cur-exh-index-search-hint { color: var(--cur-exh-search-hint-color); } /* ============================ FORMS · Radiate-Look ============================ */ .cur-form-card { background: var(--cur-maincard-bg); border: 0; box-shadow: var(--cur-maincard-shadow); border-radius: var(--cur-form-card-radius); padding: 26px 24px; margin: 0 auto; max-width: 880px; } .cur-form-header .entry-title { margin: 0 0 8px; font-size: 28px; line-height: 1.25; font-weight: 600; color: var(--cur-color-text-main); } .cur-form-intro { color: var(--cur-form-help-color); margin-bottom: 18px; } .cur-form-intro p { margin: 0; } .cur-form { display: block; } .cur-form-field { margin-bottom: 14px; } .cur-form-label { display: block; margin-bottom: 6px; font-weight: 600; color: var(--cur-form-label-color); } .cur-req { color: #d33; } .cur-form-control, .cur-form .form-control, .cur-form .form-select { border-radius: var(--cur-form-control-radius); padding: 10px 12px; border: var(--cur-form-control-border); background: var(--cur-form-control-bg); box-shadow: var(--cur-form-control-shadow); } .cur-form .form-control:focus, .cur-form .form-select:focus { outline: 0; border-color: var(--cur-form-focus-border); box-shadow: var(--cur-form-focus-ring); } .cur-help { margin-top: 6px; font-size: 13px; color: var(--cur-form-help-color); } /* Choice-Gruppen (Radio/Checkboxen) */ .cur-choice-group { display: grid; gap: 8px; } .cur-choice { margin: 0; } /* hCaptcha Abstand */ .cur-hcaptcha { transform: scale(1); transform-origin: left top; } /* Actions / Primary-Button */ .cur-form-actions { display: flex; justify-content: flex-end; margin-top: 12px; } .cur-btn-primary { border-radius: var(--cur-form-btn-radius); padding: var(--cur-form-btn-padding-y) var(--cur-form-btn-padding-x); font-weight: 600; border: 1px solid transparent; background: var(--cur-form-btn-bg); color: var(--cur-form-btn-color); transition: transform .06s ease, box-shadow .2s ease, background .2s ease; } .cur-btn-primary:hover, .cur-btn-primary:focus { background: var(--cur-form-btn-bg-hover); transform: translateY(-1px); box-shadow: var(--cur-form-btn-shadow-hover); } /* Volle Breite in Cards (.mm-contact-form) */ .front-page-intro .mm-contact-form { max-width: 100%; } .mm-contact-form .mm-form-row { width: 100%; display: block; box-sizing: border-box; } .mm-contact-form .form-control, .mm-contact-form .form-select, .mm-contact-form input[type="text"], .mm-contact-form input[type="email"], .mm-contact-form input[type="tel"], .mm-contact-form input[type="number"], .mm-contact-form input[type="date"], .mm-contact-form textarea, .mm-contact-form select { width: 100%; max-width: 100%; display: block; box-sizing: border-box; border-radius: var(--cur-form-control-radius); padding: 10px 12px; border: var(--cur-form-control-border); background: var(--cur-form-textarea-bg); box-shadow: var(--cur-form-control-shadow); } .mm-contact-form .form-control:focus, .mm-contact-form .form-select:focus, .mm-contact-form input[type="text"]:focus, .mm-contact-form input[type="email"]:focus, .mm-contact-form input[type="tel"]:focus, .mm-contact-form input[type="number"]:focus, .mm-contact-form input[type="date"]:focus, .mm-contact-form textarea:focus, .mm-contact-form select:focus { outline: 0; border-color: var(--cur-form-focus-border); box-shadow: var(--cur-form-focus-ring); } /* Radio-/Checkbox-Gruppen */ .mm-contact-form .d-flex.flex-column, .mm-contact-form .cur-choice-group { width: 100%; max-width: 100%; box-sizing: border-box; } /* SweetAlert/Submit-Button */ .mm-contact-form .btn.btn-primary { border-radius: var(--cur-form-btn-radius); padding: var(--cur-form-btn-padding-y) var(--cur-form-btn-padding-x); font-weight: 600; border: 1px solid transparent; background: var(--cur-form-btn-bg); color: var(--cur-form-btn-color); transition: transform .06s ease, box-shadow .2s ease, background .2s ease; } .mm-contact-form .btn.btn-primary:hover, .mm-contact-form .btn.btn-primary:focus { background: var(--cur-form-btn-bg-hover); transform: translateY(-1px); box-shadow: var(--cur-form-btn-shadow-hover); } .mm-contact-form .h-captcha { margin-top: 6px; } /* ============================================================ EXHIBITOR DETAIL · Layout & Cards ============================================================ */ /* Grid-Container für die Detailseite */ .cur-exh-detail { max-width: var(--cur-exh-index-max-width); margin: 0 auto 32px auto; display: grid; grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr); gap: 28px; align-items: start; } .cur-exh-detail-left, .cur-exh-detail-right { display: flex; flex-direction: column; gap: 28px; align-items: stretch; } .cur-exh-detail-gallery, .cur-exh-detail-videos, .cur-exh-detail-main, .cur-exh-detail-side, .cur-exh-detail-text, .cur-exh-detail-form, .cur-exh-detail-about, .cur-exh-detail-offers, .cur-exh-detail-social { width: 100%; height: auto; min-height: 0; align-self: stretch; } /* Utility: harte, eckige Karten */ .cur-card { background: var(--cur-exh-detail-card-bg); border: var(--cur-exh-detail-card-border); box-shadow: var(--cur-exh-detail-card-shadow); border-radius: var(--cur-exh-detail-card-radius); } /* 1. Zeile · GALLERY (links) */ .cur-exh-detail-gallery { width: 100%; } .cur-exh-detail-gallery-header, .cur-exh-detail-videos-header, .cur-exh-detail-text-header, .cur-exh-detail-about-header { padding: 14px 18px 0 18px; font-weight: 600; margin: 0 0 10px; } .cur-exh-detail-gallery-body { padding: 14px 18px 18px 18px; } /* 5-spaltiges, quadratisches Grid */ .cur-exh-detail-gallery-grid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 10px; } /* Quadratische Kacheln per Ratio-Box */ .cur-exh-thumb { position: relative; width: 100%; padding-top: 100%; /* 1:1 */ overflow: hidden; border: var(--cur-exh-thumb-border); } .cur-exh-thumb picture { position: absolute; inset: 0; display: block; width: 100%; height: 100%; } .cur-exh-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } /* 1. Zeile · VIDEOS (rechts) */ .cur-exh-detail-videos { width: 100%; background: var(--cur-exh-video-bg); } .cur-exh-detail-videos-body { padding: 14px 18px 18px 18px; } /* Kleinere Videos, 2 Spalten */ .cur-exh-detail-videos-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; } /* Responsive 16:9 Boxen für iframes/videos */ .cur-exh-video { position: relative; width: 100%; padding-top: 56.25%; /* 16:9 */ background: #000; overflow: hidden; border: var(--cur-exh-video-border); } .cur-exh-video iframe, .cur-exh-video video { position: absolute; inset: 0; width: 100%; height: 100%; } button.cur-exh-video { appearance: none; border: var(--cur-exh-video-border); cursor: pointer; padding-top: 56.25%; } .cur-exh-video video { object-fit: cover; } .cur-exh-video-placeholder, .cur-exh-video-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 8px; color: #fff; text-align: center; } .cur-exh-video-placeholder { background: rgba(0, 0, 0, 0.72); } .cur-exh-video-overlay { background: rgba(0, 0, 0, 0.22); opacity: 1; transition: background 0.18s ease-out; } .cur-exh-video:hover .cur-exh-video-overlay, .cur-exh-video:focus .cur-exh-video-overlay { background: rgba(0, 0, 0, 0.36); } .cur-exh-video-play { width: 42px; height: 42px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--cur-gallery-lightbox-nav-bg); color: var(--cur-gallery-lightbox-nav-color); border: var(--cur-gallery-lightbox-nav-border-width); box-shadow: var(--cur-gallery-lightbox-nav-shadow); font-size: 18px; line-height: 1; padding-left: 2px; } .cur-exh-video-text { font-size: 13px; line-height: 1.3; } /* Wrapper linke Spalte: Beschreibung + Formular sauber untereinander */ .cur-exh-detail-main { display: flex; flex-direction: column; gap: 24px; } /* 2. Zeile · TEXT (links) */ .cur-exh-detail-text { /* wird innerhalb von .cur-exh-detail-main gestapelt */ } .cur-exh-detail-text-body { padding: 18px; } /* Rechte Spalte: Kontakt + Angebote sauber untereinander */ /* Rechte Spalte: Kontakt + Angebote sauber untereinander */ .cur-exh-detail-side { display: flex; flex-direction: column; gap: 24px; width: 100%; align-items: stretch; } .cur-exh-detail-about, .cur-exh-detail-offers { width: 100%; max-width: none; box-sizing: border-box; align-self: stretch; } .cur-exh-detail-gallery, .cur-exh-detail-videos, .cur-exh-detail-text, .cur-exh-detail-form, .cur-exh-detail-about, .cur-exh-detail-offers, .cur-exh-detail-social { height: auto; min-height: 0; width: 100%; } .cur-exh-detail-text, .cur-exh-detail-form { align-self: stretch; } .cur-exh-detail-about .cur-exh-detail-about-body, .cur-exh-detail-form .cur-exh-detail-form-body, .cur-exh-detail-offers .cur-exh-detail-offers-body, .cur-exh-detail-social .cur-exh-detail-social-body { padding: 18px; } /* Alle Detail-Karten eckig halten, unabhängig von globalem Radius */ .cur-exh-detail .cur-card { /*border-radius: 0;*/ } /* Typo-Feinschliff in Karten */ .cur-exh-detail h2 { margin: 0 0 10px; font-size: 20px; } .cur-exh-detail h3 { margin: 0 0 10px; font-size: 18px; text-align: center; } .cur-exh-detail p { margin: 0 0 10px; } /* Social-Media-Links hübscher & zentriert */ .cur-exh-detail-social-body { padding: 14px 0 0; margin-top: 14px; border-top: 1px solid #ece7df; } .cur-exh-social-links { display: flex; flex-wrap: wrap; gap: 10px 12px; justify-content: center; align-items: center; } .cur-exh-detail-about-body p { margin: 0 0 14px; } .cur-exh-social-link { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--cur-exh-social-link-radius); background: var(--cur-exh-social-link-background-icon); font-size: var(--cur-exh-social-link-text-size); color: var(--cur-exh-social-link-icon-color); border: var(--cur-exh-social-link-border); } .cur-exh-social-link i { font-size: 14px; } .cur-exh-social-link:hover, .cur-exh-social-link:focus { background: var(--cur-exh-social-link-bg-hover); color: var(--cur-exh-social-link-color-hover); } /* Responsives Verhalten */ /* Responsives Verhalten */ @media (max-width: 1200px) { .cur-exh-detail-gallery-grid { grid-template-columns: repeat(4, minmax(0,1fr)); } } @media (max-width: 992px) { .cur-exh-detail { grid-template-columns: 1fr; } .cur-exh-detail-left, .cur-exh-detail-right { gap: 24px; } .cur-exh-detail-videos-grid { grid-template-columns: 1fr; } .cur-exh-detail-gallery-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } } @media (max-width: 640px) { .cur-exh-detail-gallery-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } } /* Formular-Karte im rechten Stapel: volle Breite, keine Rundung */ .cur-exh-detail-form .mm-contact-form, .cur-exh-detail-form .cur-form-card, .cur-exh-detail-form .front-page-intro { border-radius: 0; max-width: 90%; } /* Optional: kleine Abstände zwischen Labeln und Feldern im rechten Stapel */ .cur-exh-detail-form .cur-form-field { margin-bottom: 12px; } .ex-cur-logo-frame { width: var(--cur-ex-logo-frame-logo-width); max-width: 100%; margin: 0 auto 18px auto; padding: 10px 14px; background: var(--cur-ex-logo-frame-bg); border: 1px solid var(--cur-ex-logo-frame-border); box-shadow: var(--cur-ex-logo-frame-shadow); border-radius: var(--cur-ex-logo-frame-radius); } .ex-cur-logo-frame picture { display: block; width: 100%; } .ex-cur-logo { display: block; width: 100%; height: auto; border-radius: var(--cur-ex-logo-radius); filter: contrast(1.12) saturate(1.15); } .cur-exh-detail-about { padding: 18px; } .cur-exh-detail-about .cur-exh-detail-about-body { padding: 0; } .cur-exh-contact-list { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; } .cur-exh-contact-list li { display: flex; align-items: center; gap: 10px; margin: 0; } .cur-exh-contact-label { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; flex: 0 0 22px; } #f_h-captcha-response { display: none; } /* Galerie */ /* ============================================================ CURATELLO · GALLERY - Übersicht (/galerie) - Album-Detail (/galerie/{slug}) - Lightbox (Overlay) ============================================================ */ /* ============================ GALLERY INDEX (Übersicht) ============================ */ .cur-gallery-index-main { max-width: var(--cur-galerie-max-width); margin: 0 auto; padding: 0px 0 48px; } .cur-gallery-index-header { background: var(--cur-gallery-card-background); border: var(--cur-gallery-card-border); box-shadow: var(--cur-gallery-card-shadow); border-radius: var(--cur-gallery-card-radius); padding: 26px 24px; margin-bottom: 24px; display: var(--cur-galery-display-siteheader); } .cur-gallery-index-title { margin: 0 0 6px; font-size: 26px; font-weight: 600; color: var(--cur-color-text-main, #333); } .cur-gallery-index-subtitle { margin: 0; font-size: 14px; color: var(--cur-color-text-muted, #777); } .cur-gallery-empty-hint { margin: 0; padding: 24px 28px; border-radius: var(--cur-gallery-card-radius); background: var(--cur-gallery-card-background); border: var(--cur-gallery-card-border); box-shadow: var(--cur-gallery-card-shadow); font-size: 14px; color: var(--cur-color-text-muted, #777); } /* Alben-Grid: klassisches 3er-Grid mit Karten */ .cur-gallery-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; } @media (max-width: 960px) { .cur-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .cur-gallery-grid { grid-template-columns: 1fr; } } .cur-gallery-card { background: var(--cur-gallery-card-background); border: var(--cur-gallery-card-border); box-shadow: var(--cur-gallery-card-shadow); border-radius: var(--cur-gallery-card-radius); overflow: hidden; transition: transform 0.18s ease-out, box-shadow 0.18s ease-out; height: 100%; } .cur-gallery-card-link { text-decoration: none; color: inherit; display: flex; flex-direction: column; height: 100%; } .cur-gallery-card-inner { display: flex; flex-direction: column; height: 100%; } .cur-gallery-card-media { position: relative; overflow: hidden; background: #f5f5f5; } .cur-gallery-card-media picture { display: block; width: 100%; } .cur-gallery-card-image { display: block; width: 100%; height: 200px; object-fit: cover; transform: scale(1.01); transition: transform 0.25s ease-out; } .cur-gallery-card-image-placeholder { height: 200px; display: flex; align-items: center; justify-content: center; background: linear-gradient( 135deg, rgba(0,0,0,0.03), rgba(0,0,0,0.02) ); } .cur-gallery-card-image-placeholder-text { font-size: 13px; color: var(--cur-color-text-muted, #777); } .cur-gallery-card-body { padding: 16px 18px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; } .cur-gallery-card-title { margin: 0; font-size: var(--cur-gallery-card-title-size); font-weight: var(--cur-gallery-card-title-weight); color: var(--cur-gallery-card-title-color); text-align: var(--cur-gallery-card-meta-titel-position); } .cur-gallery-card-title-link { text-decoration: none; color: inherit; } .cur-gallery-card-title-link:hover { color: var(--cur-color-link-hover, #000); } .cur-gallery-card-meta { margin: 0; font-size: var(--cur-gallery-card-meta-size); color: var(--cur-gallery-card-meta-color); font-weight: var(--cur-gallery-card-meta-weight); } .cur-gallery-card-desc { margin: 4px 0 0; font-size: var(--cur-gallery-card-meta-size); color: var(--cur-gallery-card-meta-color); font-weight: var(--cur-gallery-card-meta-weight); } .cur-gallery-card-footer { display: flex; justify-content: center; margin-top: auto; } .cur-gallery-card-button { display: inline-flex; align-items: center; justify-content: center; padding: 10px 20px; border-radius: var(--cur-gallery-card-button-border-radius); font-size: var(--cur-gallery-card-button-font-size); font-weight: var(--cur-gallery-card-button-font-weight); border: var(--cur-gallery-card-button-border); background: var(--cur-gallery-card-button-background); color: var(--cur-gallery-card-button-color); box-shadow: var(--cur-gallery-card-button-box-shadow); transition: background 0.18s ease-out, transform 0.18s ease-out, box-shadow 0.18s ease-out; } .cur-gallery-card-button:hover { background: linear-gradient( to bottom, #fdfdfd, #e8f0f9 ); border: var(--cur-gallery-card-button-border-hover); background: var(--cur-gallery-card-button-background-hover); color: var(--cur-gallery-card-button-color-hover); } /* Hover-Effekt für ganze Card */ /*.cur-gallery-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.08); } .cur-gallery-card:hover .cur-gallery-card-image { transform: scale(1.04); }*/ /* ============================ GALLERY ALBUM (Detail) ============================ */ .cur-gallery-album-main { max-width: var(--cur-album-max-width); margin: 0 auto; padding: 0px 0 56px; } /* Album-Header-Karte */ .cur-gallery-album-header { margin-bottom: 24px; margin-top: 24px; display: none; } .cur-gallery-album-header-inner { background: var(--cur-maincard-bg, #ffffff); border: var(--cur-maincard-border); box-shadow: var(--cur-maincard-shadow); border-radius: var(--cur-maincard-radius); padding: 26px 24px; } .cur-gallery-album-title { margin: 0 0 6px; font-size: 26px; font-weight: 600; color: var(--cur-color-text-main, #333); } .cur-gallery-album-meta { margin: 0 0 8px; font-size: 14px; color: var(--cur-color-text-muted, #777); } .cur-gallery-album-desc { font-size: 14px; line-height: 1.6; color: var(--cur-color-text-main, #333); } /* ============================ GALLERY GRID (Layout B) ============================ */ /* Klassisches Grid mit 3/2/1 Spalten, alle Kacheln gleich breit */ .cur-gallery-album-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } @media (max-width: 1024px) { .cur-gallery-album-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .cur-gallery-album-grid { grid-template-columns: 1fr; } } .cur-gallery-thumb { margin: 0; display: flex; flex-direction: column; } .cur-gallery-thumb-link { display: block; text-decoration: none; color: inherit; } /* Feste Bildfläche mit 3:2-Ratio, sauberes Grid */ .cur-gallery-thumb-image-wrap { position: relative; width: 100%; padding-bottom: 66.6667%; /* 3:2 */ overflow: hidden; border-radius: var(--cur-maincard-radius); box-shadow: 0 1px 4px rgba(0,0,0,0.08); background: #f5f5f5; } .cur-gallery-thumb-image-wrap picture { position: absolute; inset: 0; display: block; width: 100%; height: 100%; } .cur-gallery-thumb-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.01); transition: transform 0.25s ease-out, opacity 0.18s ease-out; } /* Hover-Overlay mit „+“ Symbol */ .cur-gallery-thumb-overlay { position: absolute; inset: 0; background: radial-gradient( circle at center, rgba(255,255,255,0.08) 0, rgba(0,0,0,0.45) 100% ); opacity: 0; display: flex; align-items: center; justify-content: center; transition: opacity 0.22s ease-out; } .cur-gallery-thumb-icon { display: inline-flex; width: 32px; height: 32px; border-radius: 999px; align-items: center; justify-content: center; font-size: 22px; line-height: 1; background: rgba(255,255,255,0.92); color: var(--cur-color-text-main, #333); box-shadow: 0 3px 8px rgba(0,0,0,0.18); } /* Hover-Zustand */ .cur-gallery-thumb-link:hover .cur-gallery-thumb-image { transform: scale(1.05); } .cur-gallery-thumb-link:hover .cur-gallery-thumb-overlay { opacity: 1; } .cur-gallery-thumb-caption { display: flex; margin: 8px 2px 0; font-size: var(--cur-gallery-thumb-caption-text-size); color: var(--cur-gallery-thumb-caption-text-color); text-align: center; font-weight: var(--cur-gallery-thumb-caption-font-weight); background: var(--cur-gallery-thumb-caption-background); border: var(--cur-gallery-thumb-caption-border); box-shadow: var(--cur-gallery-thumb-caption-box-shadow); height: 25px; border-radius: var(--cur-gallery-thumb-caption-border-radius); justify-content: center; align-items: center; } /* Leerer-Zustand */ .cur-gallery-album-empty { padding: 24px 28px; border-radius: var(--cur-maincard-radius); background: var(--cur-maincard-bg, #ffffff); border: var(--cur-maincard-border); box-shadow: var(--cur-maincard-shadow); font-size: 14px; color: var(--cur-color-text-muted, #777); } /* ============================ LIGHTBOX (Overlay) ============================ */ body.cur-gallery-lightbox-open { overflow: hidden; } .cur-gallery-lightbox { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 0.22s ease-out, visibility 0.22s ease-out; } /* Wird per JS gesetzt: .is-active */ .cur-gallery-lightbox.is-active { opacity: 1; visibility: visible; pointer-events: auto; } .cur-gallery-lightbox-backdrop { position: absolute; inset: 0; background: color-mix( in srgb, var(--cur-gallery-lightbox-backdrop-color) var(--cur-gallery-lightbox-backdrop-opacity), transparent ); } /* Innerer Container */ .cur-gallery-lightbox-inner { position: relative; width: min(96vw, 1400px); max-width: 96vw; max-height: 92vh; display: grid; grid-template-columns: 72px minmax(0, 1fr) 72px; align-items: center; column-gap: 24px; padding: 24px 0; box-sizing: border-box; } @media (max-width: 768px) { .cur-gallery-lightbox-inner { width: min(100vw, 980px); max-width: 100vw; grid-template-columns: 52px minmax(0, 1fr) 52px; column-gap: 12px; padding: 16px 0; } } /* Bild + Caption */ .cur-gallery-lightbox-figure { grid-column: 2; margin: 0; max-width: 100%; max-height: 100%; min-width: 0; display: flex; flex-direction: column; align-items: center; } .cur-gallery-lightbox-picture { display: block; max-width: 100%; max-height: 70vh; } .cur-gallery-lightbox-image { display: block; max-width: 100%; max-height: 70vh; border-radius: var(--cur-gallery-lightbox-image-radius); box-shadow: var(--cur-gallery-lightbox-image-shadow); background: #000; object-fit: contain; transition: transform 0.18s ease-out, opacity 0.18s ease-out; } .cur-gallery-lightbox-caption { margin-top: 10px; max-width: min(100%, 80vw); text-align: center; font-size: var(--cur-gallery-lightbox-caption-size); line-height: 1.5; color: var(--cur-gallery-lightbox-caption-color); font-weight: var(--cur-gallery-lightbox-caption-weight); } /* Lightbox Buttons (Close, Prev, Next) */ .cur-gallery-lightbox-close, .cur-gallery-lightbox-prev, .cur-gallery-lightbox-next { position: absolute; border: none; padding: 0; margin: 0; background: transparent; cursor: pointer; color: var(--cur-gallery-lightbox-nav-color); font: inherit; } /* Close oben rechts */ .cur-gallery-lightbox-close { top: 16px; right: 18px; width: 32px; height: 32px; border-radius: var(--cur-gallery-lightbox-nav-border-width); display: flex; align-items: center; justify-content: center; background: var(--cur-gallery-lightbox-nav-bg); backdrop-filter: blur(3px); box-shadow: var(--cur-gallery-lightbox-nav-shadow); transition: background 0.18s ease-out, transform 0.12s ease-out; border: var(--cur-gallery-lightbox-nav-border-width); } .cur-gallery-lightbox-close-icon { font-size: 20px; line-height: 1; } /* Prev/Next links/rechts neben dem Bild */ /* Prev/Next links/rechts neben dem Bild */ .cur-gallery-lightbox-prev, .cur-gallery-lightbox-next { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border: var(--cur-gallery-lightbox-nav-border-width); border-radius: var(--cur-gallery-lightbox-nav-radius); display: inline-flex; align-items: center; justify-content: center; background: var(--cur-gallery-lightbox-nav-bg); color: var(--cur-gallery-lightbox-nav-color); box-shadow: var(--cur-gallery-lightbox-nav-shadow); transition: none; z-index: 30; } .cur-gallery-lightbox-prev { left: 24px; } .cur-gallery-lightbox-next { right: 24px; } .cur-gallery-lightbox-prev:hover, .cur-gallery-lightbox-prev:focus, .cur-gallery-lightbox-next:hover, .cur-gallery-lightbox-next:focus { background: var(--cur-gallery-lightbox-nav-bg); color: var(--cur-gallery-lightbox-nav-color); box-shadow: var(--cur-gallery-lightbox-nav-shadow); outline: none; transform: translateY(-50%); } .cur-gallery-lightbox-prev-icon, .cur-gallery-lightbox-next-icon { font-size: 34px; line-height: 1; font-weight: var(--cur-gallery-lightbox-nav-icon-weight); display: block; transform: translateY(var(--cur-gallery-lightbox-nav-icon-offset-y)); } /* Mobile */ @media (max-width: 640px) { .cur-gallery-lightbox-inner { grid-template-columns: 44px minmax(0, 1fr) 44px; column-gap: 8px; padding: 12px 0; } .cur-gallery-lightbox-prev, .cur-gallery-lightbox-next { width: 44px; height: 44px; opacity: 1; } .cur-gallery-lightbox-prev { left: 10px; } .cur-gallery-lightbox-next { right: 10px; } .cur-gallery-lightbox-prev-icon, .cur-gallery-lightbox-next-icon { font-size: 28px; } .cur-gallery-lightbox-close { top: 10px; right: 12px; width: 28px; height: 28px; } .cur-gallery-lightbox-close-icon { font-size: 18px; } } /* ============================================================ Page Builder / RichText: Medien sicher im Content begrenzen ============================================================ */ /* Verhindert, dass Bilder aus dem Seitegestalter den Inhaltsbereich sprengen. Wichtig für Seiten mit und ohne Sidebar. */ .cur-page-content img, .cur-richtext img, .page-content img, .content-area img, .site-main img { max-width: 100%; height: auto; } /* Falls TinyMCE ein Bild als Block setzt, bleibt es sauber im Content. */ .cur-page-content img[style], .cur-richtext img[style], .page-content img[style], .content-area img[style], .site-main img[style] { max-width: 100%; height: auto; } /* Zentrierte Bilder aus TinyMCE / Editor. */ .cur-page-content .aligncenter, .cur-richtext .aligncenter, .page-content .aligncenter, .content-area .aligncenter, .site-main .aligncenter { display: block; margin-left: auto; margin-right: auto; } /* Linksbündige Bilder aus TinyMCE / Editor. */ .cur-page-content .alignleft, .cur-richtext .alignleft, .page-content .alignleft, .content-area .alignleft, .site-main .alignleft { float: left; margin-right: 1.25rem; margin-bottom: 0.75rem; max-width: 100%; height: auto; } /* Rechtsbündige Bilder aus TinyMCE / Editor. */ .cur-page-content .alignright, .cur-richtext .alignright, .page-content .alignright, .content-area .alignright, .site-main .alignright { float: right; margin-left: 1.25rem; margin-bottom: 0.75rem; max-width: 100%; height: auto; } /* Bootstrap-/TinyMCE-nahe Ausrichtungsklassen absichern. */ .cur-page-content .text-start, .cur-richtext .text-start, .page-content .text-start, .content-area .text-start, .site-main .text-start { text-align: left; } .cur-page-content .text-center, .cur-richtext .text-center, .page-content .text-center, .content-area .text-center, .site-main .text-center { text-align: center; } .cur-page-content .text-end, .cur-richtext .text-end, .page-content .text-end, .content-area .text-end, .site-main .text-end { text-align: right; } /* Bootstrap-nahe Float-Klassen für Bilder. */ .cur-page-content .float-start, .cur-richtext .float-start, .page-content .float-start, .content-area .float-start, .site-main .float-start { float: left; margin-right: 1.25rem; margin-bottom: 0.75rem; } .cur-page-content .float-end, .cur-richtext .float-end, .page-content .float-end, .content-area .float-end, .site-main .float-end { float: right; margin-left: 1.25rem; margin-bottom: 0.75rem; } /* Zentrierung über Bootstrap-Klassen. */ .cur-page-content .mx-auto, .cur-richtext .mx-auto, .page-content .mx-auto, .content-area .mx-auto, .site-main .mx-auto { margin-left: auto; margin-right: auto; } .cur-page-content .d-block, .cur-richtext .d-block, .page-content .d-block, .content-area .d-block, .site-main .d-block { display: block; } /* Nach gefloateten Bildern den folgenden Content sauber halten. */ .cur-page-content::after, .cur-richtext::after, .page-content::after, .content-area::after, .site-main::after { content: ""; display: table; clear: both; } /* ============================================================ Cookie Consent Modal ============================================================ */ .cur-cookie-backdrop { position: fixed; inset: 0; z-index: 9999; background: var(--cur-cookie-overlay-bg, rgba(0, 0, 0, 0.58)); backdrop-filter: blur(2px); } .cur-cookie-modal { position: fixed; inset: 0; z-index: calc(9999 + 1); display: flex; align-items: center; justify-content: center; padding: 24px; } .cur-cookie-modal[hidden], .cur-cookie-backdrop[hidden], .cur-cookie-manage[hidden] { display: none !important; } .cur-cookie-modal__inner { width: min(100%, 720px); max-height: calc(100vh - 48px); overflow: auto; background: var(--cur-cookie-modal-bg); border: var(--cur-cookie-modal-border); border-radius: var(--cur-cookie-modal-radius); box-shadow: var(--cur-cookie-modal-shadow); padding: 28px 28px; } .cur-cookie-modal__head { margin-bottom: 14px; } .cur-cookie-modal__title { margin: 0; font-size: var(--cur-cookie-modal-title-size,); font-weight: var(--cur-cookie-modal-title-weight); line-height: 1.2; color: var(--cur-color-text-main); } .cur-cookie-modal__body { display: grid; gap: 18px; } .cur-cookie-modal__text { margin: 0; font-size: var(--cur-cookie-modal-text-size, 15px); color: var(--cur-cookie-modal-text-color, #374151); line-height: 1.7; } .cur-cookie-groups { display: grid; gap: 12px; } .cur-cookie-group { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; background: var(--cur-cookie-group-bg, #f8fafc); border: var(--cur-cookie-group-border, 1px solid rgba(17, 24, 39, 0.08)); border-radius: var(--cur-cookie-group-radius, 14px); padding: 14px 16px; } .cur-cookie-group__meta { display: flex; flex-direction: column; gap: 4px; } .cur-cookie-group__title { font-size: var(--cur-cookie-group-title-size, 15px); font-weight: 700; color: var(--cur-color-text-main, #111827); } .cur-cookie-group__desc { font-size: var(--cur-cookie-group-desc-size, 13px); line-height: 1.5; color: var(--cur-cookie-modal-muted-color, #6b7280); } .cur-cookie-group__toggle input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--cur-cookie-toggle-accent, #f36e34); cursor: pointer; } .cur-cookie-group__toggle input[type="checkbox"][disabled] { cursor: not-allowed; opacity: .9; } .cur-cookie-modal__privacy a { color: var(--cur-color-link, #444444); text-decoration: underline; } .cur-cookie-modal__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 22px; } .cur-cookie-btn { appearance: none; border-radius: var(--cur-cookie-btn-radius); padding: 12px 18px; font-size: var(--cur-cookie-btn-font-size); font-weight: var(--cur-cookie-btn-font-weight); cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease; } .cur-cookie-btn:hover { transform: translateY(-1px); } .cur-cookie-btn--primary { background: var(--cur-cookie-btn-primary-bg); color: var(--cur-cookie-btn-primary-color); border: var(--cur-cookie-btn-primary-border,); } .cur-cookie-btn--secondary { background: var(--cur-cookie-btn-secondary-bg); color: var(--cur-cookie-btn-secondary-color); border: var(--cur-cookie-btn-secondary-border); } .cur-cookie-btn--ghost { background: var(--cur-cookie-btn-ghost-bg); color: var(--cur-cookie-btn-ghost-color); border: var(--cur-cookie-btn-ghost-border); } .cur-cookie-manage { position: fixed; left: 18px; bottom: 18px; z-index: calc(9999 - 1); border-radius: var(--cur-cookie-manage-radius); background: var(--cur-cookie-manage-bg); color: var(--cur-cookie-manage-color); border: var(--cur-cookie-manage-border); padding: 10px 14px; font-size: 13px; line-height: 1.2; cursor: pointer; box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18); } body.cur-cookie-consent-open { overflow: hidden; } @media (max-width: 767.98px) { .cur-cookie-modal { align-items: flex-end; padding: 12px; } .cur-cookie-modal__inner { width: 100%; max-height: 90vh; border-radius: 16px 16px 0 0; padding: 20px 18px; } .cur-cookie-modal__title { font-size: 22px; } .cur-cookie-modal__actions { flex-direction: column; align-items: stretch; } .cur-cookie-btn { width: 100%; } } /* ============================================================ Curatello · Siteplans / Lagepläne passend zu den Siteplans-Tokens im :root ============================================================ */ .cur-siteplans-page .container, .cur-siteplan-page .container { max-width: var(--cur-siteplan-max-width); } .cur-siteplans-overview { width: 100%; margin: 0; } .cur-siteplans-list { width: 100%; max-width: 1140px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 270px)); justify-content: center; gap: 20px; } .cur-siteplans-item { width: 265px; max-width: 100%; display: flex; flex-direction: column; overflow: hidden; background: var(--cur-siteplans-card-bg); border: var(--cur-siteplans-card-border); border-radius: var(--cur-siteplans-card-radius); box-shadow: var(--cur-siteplans-card-shadow); box-sizing: border-box; } .cur-siteplans-item__media { display: block; background: #f5f5f5; text-decoration: none; } .cur-siteplans-item__media img { display: block; width: 100%; height: 240px; object-fit: cover; } .cur-siteplans-item__placeholder { min-height: 240px; display: flex; align-items: center; justify-content: center; color: #777777; padding: 20px; text-align: center; box-sizing: border-box; } .cur-siteplans-item__body { display: flex; flex: 1 1 auto; flex-direction: column; gap: 10px; padding: 26px 24px; text-align: center; } .cur-siteplans-item__title { margin: 0; font-size: 18px; color: #444444; } .cur-siteplans-item__title a { color: #444444; text-decoration: none; } .cur-siteplans-item__title a:hover, .cur-siteplans-item__title a:focus { color: #000000; } .cur-siteplans-item__text { margin: 0; color: #666666; } .cur-siteplans-item__meta { margin: 0; font-size: var(--cur-siteplans-card-meta-size); color: var(--cur-siteplans-card-meta-color); font-weight: var(--cur-siteplans-card-meta-weight); } .cur-siteplans-item__meta span + span::before { content: " · "; } .cur-siteplans-item__actions { margin: 0; } .cur-siteplans-item__actions a { text-decoration: none; } .cur-siteplans-empty-card { max-width: 760px; margin: 0 auto; background: #ffffff; border: 1px solid #d4d4d4; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); border-radius: 0; padding: 26px 24px; text-align: center; } .cur-siteplans-empty-title { margin: 0 0 8px; } .cur-siteplans-empty-text { margin: 0; color: #777777; } /* ============================================================ Detailseite ============================================================ */ .cur-siteplan-section { width: 100%; max-width: var(--cur-siteplan-max-width); margin-left: auto; margin-right: auto; } .cur-siteplan-intro, .cur-siteplan-empty { background: var(--cur-siteplan-info-card-bg); border: var(--cur-siteplan-info-card-border); border-radius: var(--cur-siteplan-info-card-radius); box-shadow: var(--cur-siteplan-info-card-shadow); padding: 22px 24px; margin-bottom: 24px; display: var(--cur-siteplan-intro); } .cur-siteplan-popup-card { background: var(--cur-siteplan-info-card-bg); border: var(--cur-siteplan-info-card-border); border-radius: var(--cur-siteplan-info-card-radius); box-shadow: var(--cur-siteplan-info-card-shadow); padding: 22px 24px; margin-bottom: 24px; display: block; } .cur-siteplan-popup-card[hidden] { display: none; } .cur-siteplan-info__title { margin: 0; } .cur-siteplan-info__body p { margin: 0; } .cur-siteplan-layout { display: grid; grid-template-columns: minmax(0, var(--cur-siteplan-col-left)) minmax(0, var(--cur-siteplan-col-right)); gap: 30px; align-items: start; } .cur-siteplan-maincol { min-width: 0; } .cur-siteplan-stage-card { background: var(--cur-siteplan-stage-card-bg); border: var(--cur-siteplan-stage-card-border); border-radius: var(--cur-siteplan-stage-card-radius); box-shadow: var(--cur-siteplan-stage-card-shadow); padding: 24px 24px; margin-bottom: 24px; width: 100%; box-sizing: border-box; } .cur-siteplan-toolbar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; } .cur-siteplan-btn { border: var(--cur-siteplan-btn-border); background: var(--cur-siteplan-btn-bg); color: var(--cur-siteplan-btn-color); padding: 8px 13px; font-size: var(--cur-siteplan-btn-font-size); border-radius: var(--cur-siteplan-btn-radius); cursor: pointer; box-shadow: var(--cur-siteplan-btn-shadow); } .cur-siteplan-btn:hover, .cur-siteplan-btn:focus { background: var(--cur-siteplan-btn-bg-hover); color: var(--cur-siteplan-btn-color-text) } .cur-siteplan-fit { width: 100%; margin: 0 auto; transform-origin: top center; } .cur-siteplan-fit--small { max-width: var(--cur-siteplan-fit-small); } .cur-siteplan-fit--normal { max-width: var(--cur-siteplan-fit-normal); } .cur-siteplan-fit--large { max-width: var(--cur-siteplan-fit-large); } .cur-siteplan-canvas { position: relative; width: 100%; } .cur-siteplan-image { display: block; width: 100%; height: auto; border: var(--cur-siteplan-image-border); border-radius: var(--cur-siteplan-image-radius); } .cur-siteplan-marker { position: absolute; transform: translate(-50%, -50%); width: var(--cur-siteplan-marker-size); height: var(--cur-siteplan-marker-size); border: 0; border-radius: var(--cur-siteplan-marker-radius); background: var(--cur-siteplan-marker-bg); color: var(--cur-siteplan-marker-color); box-shadow: var(--cur-siteplan-marker-shadow); display: inline-flex; align-items: center; justify-content: center; font-size: var(--cur-siteplan-marker-font-size); font-weight: 700; cursor: pointer; padding: 0; } .cur-siteplan-popup-card > * + * { margin-top: 6px; } .cur-siteplan-popup-title, .cur-siteplan-popup-meta, .cur-siteplan-popup-text, .cur-siteplan-popup-exhibitor { margin-bottom: 0; } .cur-siteplan-popup-title { margin-top: 0; } .cur-siteplan-sidebar { min-width: 0; } .cur-siteplan-sidebar-card { background: var(--cur-siteplan-sidebar-card-bg); border: var(--cur-siteplan-sidebar-card-border); box-shadow: var(--cur-siteplan-sidebar-card-shadow); border-radius: var(--cur-siteplan-sidebar-card-radius); padding: 18px 20px; } .cur-siteplan-stand-list { margin: 0; padding-left: 20px; } .cur-siteplan-stand-list li + li { margin-top: 12px; } .cur-siteplan-stand-headline { line-height: 1.4; } .cur-siteplan-stand-link { font-size: var(--cur-siteplan-stand-link-size); } .cur-siteplan-muted { font-size: var(--cur-siteplan-muted-size); color: var(--cur-siteplan-muted-color); } @media (max-width: 900px) { .cur-siteplans-list { gap: 24px; } .cur-siteplans-item { width: 320px; } .cur-siteplan-layout { grid-template-columns: 1fr; gap: 20px; } } @media (max-width: 680px) { .cur-siteplans-list { display: grid; grid-template-columns: 1fr; gap: 20px; } .cur-siteplans-item { width: 100%; max-width: 100%; } .cur-siteplan-section { width: 100%; max-width: 100%; } .cur-siteplan-layout { grid-template-columns: 1fr; gap: 16px; } .cur-siteplan-stage-card, .cur-siteplan-popup-card, .cur-siteplan-sidebar-card, .cur-siteplan-intro, .cur-siteplan-empty { width: 100%; max-width: 100%; min-width: 0; padding-left: 16px; padding-right: 16px; box-sizing: border-box; } .cur-siteplan-toolbar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; } .cur-siteplan-btn { width: 100%; min-width: 0; padding-left: 10px; padding-right: 10px; font-size: 12px; } .cur-siteplan-image, .cur-siteplan-maincol, .cur-siteplan-sidebar { width: 100%; max-width: 100%; min-width: 0; } .cur-siteplan-fit { width: 100%; margin: 0 auto; transform-origin: top center; } .cur-siteplan-fit--small { max-width: var(--cur-siteplan-fit-small); } .cur-siteplan-fit--normal { max-width: var(--cur-siteplan-fit-normal); } .cur-siteplan-fit--large { max-width: var(--cur-siteplan-fit-large); } .cur-siteplan-canvas { position: relative; width: 100%; } .cur-siteplan-marker { width: 28px; min-width: 28px; height: 28px; font-size: 10px; } .cur-siteplan-popup-meta, .cur-siteplan-popup-text, .cur-siteplan-popup-exhibitor, .cur-siteplan-muted, .cur-siteplan-stand-link { word-break: break-word; overflow-wrap: anywhere; } } @media (max-width: 768px) { .site-branding { gap: 10px; width: 100%; padding-right: 52px; box-sizing: border-box; } .site-logo { width: 64px; min-width: 64px; height: 64px; min-height: 64px; } .site-title { font-size: 24px; } .site-description { font-size: 13px; } } /* ===== Button Highlighter ===== */ .cur-highlighter-link { display: inline-flex !important; align-items: center; justify-content: space-between; gap: 18px; font-size: 16px !important; min-width: 100px; padding: 16px 26px; background: var(--cur-highlighter-btn-bg) !important; color: var(--cur-highlighter-btn-text) !important; border: 2px solid var(--cur-highlighter-btn-border) !important; border-radius: var(--cur-highlighter-btn-hover-radius) !important; text-decoration: none; line-height: 1; font-weight: var(--cur-highlighter-btn-font-weight) !important; letter-spacing: 0.02em; transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease; } .cur-highlighter-link::after { content: ""; display: inline-block; width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 10px solid var(--cur-highlighter-btn-arrow) !important; transition: border-left-color 0.25s ease; flex: 0 0 auto; } .cur-highlighter-link:hover, .cur-highlighter-link:focus-visible { background: var(--cur-highlighter-btn-hover-bg) !important; color: var(--cur-highlighter-btn-hover-text) !important; border-color: var(--cur-highlighter-btn-border); } .cur-highlighter-link:hover::after, .cur-highlighter-link:focus-visible::after { border-left-color: var(--cur-highlighter-btn-hover-arrow) !important; } .cur-highlighter-link:focus-visible { outline: none; } .cur-news-button:hover { background: #ffffff; } .cur-news-button.is-active { background: var(--cur-news-badge-published-bg); border: var(--cur-news-badge-published-bg); color: var(--cur-news-badge-published-color); border-radius: 0px !important; } .cur-news-button.is-active:hover { background: var(--cur-news-badge-published-background-hover); } .cur-news-button:active { background: var(--cur-news-badge-published-background-hover); } .cur-news-button--published::before { content: var(--cur-news-tab-text-published); padding: 10px; } .cur-news-button--archived::before { content: var(--cur-news-tab-text-archived); border-radius:0px; } /* ===== Button Formulare ===== */ .cur-form-link-button { display: inline-flex; align-items: center; justify-content: space-between; gap: 18px; font-size: 16px !important; min-width: 140px; padding: 16px 25px 16px 26px; background: var(--cur-form-btn-bg); border-radius: var(--cur-form-btn-radius); color: var(--cur-form-btn-text) !important; border: 2px solid var(--cur-form-btn-border) !important; text-decoration: none; font-size: 14px; line-height: 1; font-weight: 700; letter-spacing: 0.02em; transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease; } .cur-form-link-button::after { content: ""; display: inline-block; width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 10px solid var(--cur-form-btn-arrow); transition: border-left-color 0.25s ease; flex: 0 0 auto; } .cur-form-link-button:hover, .cur-more-button:focus-visible { background: var(--cur-form-btn-hover-bg); color: var(--cur-form-btn-hover-text) !important; border-color: var(--cur-form-btn-border) !important; background: var(--cur-form-btn-hover-bg) !important; } .cur-form-link-button:hover::after, .cur-form-link-button:focus-visible::after { border-left-color: var(--cur-form-btn-hover-arrow); } .cur-form-link-button:focus-visible { outline: none; } /* ============================================================ Curatello · Produktkatalog Grundlayout Index / Kategorie ============================================================ */ .cur-products-main { max-width: var(--cur-products-max-width); margin: 0 auto; padding: 0px; /*color: var(--cur-products-txt-title);*/ } .cur-products-section { margin-top: 34px; } .cur-products-section-title { margin: 0 0 24px; padding-bottom: 14px; /*border-bottom: var(--cur-products-section-title-headline-border-bottom);*/ font-size: var(--cur-products-section-title-headline-txt-size); line-height: 1.2; font-weight: var(--cur-products-section-title-headline-font-weight); letter-spacing: -0.02em; color: var(--cur-products-section-title-headline-color); background-image: linear-gradient( to bottom, transparent calc(100% - 8px), color-mix(in srgb, var(--cur-products-section-title-shadow-color) 14%, transparent) calc(100% - 6px), color-mix(in srgb, var(--cur-products-section-title-shadow-color) 65%, transparent) calc(100% - 4px), color-mix(in srgb, var(--cur-products-section-title-shadow-color) 14%, transparent) calc(100% - 2px), color-mix(in srgb, var(--cur-products-section-title-shadow-color) 0%, transparent) 100% ); background-repeat: no-repeat; background-size: 100% 100%; } .cur-products-index .cur-products-section, .cur-products-category .cur-products-section { padding: 30px 34px 34px; background: var(--cur-cat-index-bg); border: var(--cur-cat-index-border); box-shadow: var(--cur-cat-index-shadow); border-radius: var(--cur-cat-index-radius); } /* ============================================================ Produktkatalog · Kopfbereich / Suche als Card ============================================================ */ .cur-products-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 32px; align-items: center; margin-bottom: 34px; padding: 34px 38px; background: var(--cur-cat-index-bg); border: var(--cur-products-toolbar-border); border-radius: var(--cur-products-toolbar-radius); box-shadow: var(--cur-products-toolbar-shadow); } .cur-products-toolbar > div:first-child { min-width: 0; } .cur-products-heading { margin: 0 0 12px; font-size: var(--cur-products-heading-txt); line-height: 1.08; font-weight: var(--cur-products-heading-weight); letter-spacing: -0.035em; color: var(--cur-products-heading-color); } .cur-products-lead { margin: 0; max-width: 760px; font-size: var(--cur-products-lead-txt); line-height: 1.65; color: var(--cur-products-lead-color); font-weight: var(--cur-products-lead-weight); } .cur-products-count { display: inline-flex; align-items: center; margin: 18px 0 0; padding: 6px 11px; background: var(--cur-products-count-bg); color: var(--cur-products-count-color); border-radius: var(--cur-products-count-radius); font-size: var(--cur-products-count-txt); line-height: 1.2; font-weight: var(--cur-products-count-weight); border: var(--cur-products-count-border); box-shadow: var(--cur-products-count-shadow); } .cur-products-search { display: grid; grid-template-columns: 1fr; gap: 10px; align-self: stretch; padding: 20px; background: var(--cur-products-catalog-search-bg); border: var(--cur-products-catalog-search-border); border-radius: var(--cur-products-catalog-search-radius); box-shadow: var(--cur-product-category-search-card-box-shadow); } .cur-products-search::before { content: var(--cur-products-catalog-search); display: block; color: var(--cur-products-catalog-search-color); font-size: var(--cur-products-catalog-search-txt); line-height: 1.3; font-weight: var(--cur-products-catalog-search-weight); } .cur-products-search label { display: none; } .cur-products-search input { width: 100%; min-height: 46px; padding: 0 14px; background: var(--cur-products-catalog-search-input-bg); border: var(--cur-products-catalog-search-input-border); border-radius: var(--cur-products-catalog-search-input-radius); color: var(--cur-products-catalog-search-input-color) !important; font-size: var(--cur-products-catalog-search-input-txt); box-shadow: var(--cur-products-catalog-search-input-shadow); } .cur-products-search input:focus { outline: none; border-color: #111827; box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.10); } .cur-products-search button, .cur-products-search .cur-product-button { width: auto; min-height: 44px; justify-content: center; border-radius: var(--cur-products-search-button-radius); background: var(--cur-products-search-button-bg); box-shadow: var(--cur-products-search-button-shadow); color: var(--cur-products-search-button-txt-color); border: var(--cur-products-search-button-border); font-size: var(--cur-products-search-button-txt-size); font-weight: var(--cur-products-search-button-weight); } .cur-products-search button:hover, .cur-products-search .cur-product-button:hover { background: var(--cur-products-search-button-hover-bg); color: var(--cur-products-search-button-txt-hover-color); border: var(--cur-products-search-button-hover-border); } .cur-products-search .cur-product-button--ghost { background: var(--cur-product-search-btn-bg); color: var(--cur-product-btn-search-color); } /* ============================================================ Kategorien ============================================================ */ .cur-product-category-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .cur-product-category-card { display: grid; grid-template-columns: 155px minmax(0, 1fr); min-height: 138px; background: var(--cur-product-category-card-bg); border: var(--cur-product-category-card-border); border-radius: var(--cur-product-category-card-border-radius); color: var(--cur-product-category-card-txt-color); text-decoration: var(--cur-product-category-card-text-decoration); overflow: hidden; box-shadow: var(--cur-product-category-card-box-shadow); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .cur-product-category-card:hover { transform: translateY(-2px); border: var(--cur-product-category-card-border); box-shadow: var(--cur-product-category-card-box-shadow); border-color: var(--cur-products-border-strong); } .cur-product-category-card__media { display: block; min-height: 138px; padding: 0; background: var(--cur-products-soft-bg); overflow: hidden; } .cur-product-category-card__media img { width: 100%; height: 100%; min-height: 138px; max-height: none; object-fit: cover; object-position: center center; display: block; border-radius: 0; } .cur-product-category-card__media picture { display: block; width: 100%; height: 100%; } .cur-product-category-card__placeholder { width: 68px; height: 68px; min-height: 68px; display: flex; align-items: center; justify-content: center; color: var(--cur-products-muted); font-size: 28px; background: #ffffff; border-radius: 18px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05); } .cur-product-category-card__body { display: flex; flex-direction: column; justify-content: center; padding: 15px 16px; background: var(--cur-products-cat-bg); } .cur-product-category-card__title { display: block; font-size: var(--cur-product-category-card-title-txt-size); line-height: 1.3; font-weight: var(--cur-product-category-card-title-font-weight); color: var(--cur-product-category-card-title-color); } .cur-product-category-card__text { display: block; margin-top: 6px; font-size: 13px; line-height: 1.45; color: var(--cur-products-card-txt-muted-color); } .cur-product-category-card__count { display: inline-flex; align-self: flex-start; margin-top: 8px; padding: 3px 8px; background: var(--cur-product-category-card-count-background); border: var(--cur-product-category-card-count-border); color: var(--cur-product-category-card-count-color); border-radius: var(--cur-product-category-card-count-border-radius); font-size: var(--cur-product-category-card-count-font-size); line-height: 1.2; font-weight: var(--cur-product-category-card-count-font-weight); } /* ============================================================ Produktgrid / Produktkarte ============================================================ */ .cur-product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .cur-product-card { display: flex; flex-direction: column; min-height: 100%; background: var(--cur-products-card-bg); border: var(--cur-products-border); border-radius: var(--cur-products-card-radius); overflow: hidden; box-shadow: var(--cur-product-category-card-box-shadow); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .cur-product-card:hover { /*transform: translateY(-2px);*/ box-shadow: 0 12px 28px rgba(15, 23, 42, 0.085); border-color: var(--cur-products-border-strong); box-shadow: var(--cur-product-category-card-box-shadow); } .cur-product-card__media { display: flex; align-items: center; justify-content: center; height: var(--cur-products-image-height); padding: 16px; box-sizing: border-box; background: var(--cur-products-soft-bg); overflow: hidden; color: inherit; text-decoration: none; /* border-bottom: var(--cur-products-border);*/ background-image: linear-gradient( to bottom, transparent calc(100% - 8px), color-mix(in srgb, var(--cur-products-section-title-shadow-color) 14%, transparent) calc(100% - 6px), color-mix(in srgb, var(--cur-products-section-title-shadow-color) 65%, transparent) calc(100% - 4px), color-mix(in srgb, var(--cur-products-section-title-shadow-color) 14%, transparent) calc(100% - 2px), color-mix(in srgb, var(--cur-products-section-title-shadow-color) 0%, transparent) 100% ); background-repeat: no-repeat; background-size: 100% 100%; } .cur-product-card__media img { width: 100%; height: 100%; object-fit: cover; object-position: center center; display: block; border-radius: 14px; transition: transform 0.25s ease; } .cur-product-card__media picture { display: block; width: 100%; height: 100%; } .cur-product-card:hover .cur-product-card__media img { transform: scale(1.025); } .cur-product-card__placeholder { height: 100%; min-height: var(--cur-products-image-height); display: flex; align-items: center; justify-content: center; color: var(--cur-products-muted); font-size: 30px; } .cur-product-card__body { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 250px; padding: 12px 12px 14px; } .cur-product-card__category { display: inline-flex; align-self: flex-start; margin-bottom: 7px; padding: 3px 8px; background: var(--cur-products-badge-bg); color: var(--cur-products-badge-text); border-radius: var(--cur-products-badge-radius); border: var(--cur-products-badge-border); font-size: 10px; line-height: 1.2; font-weight: 700; text-decoration: none; text-transform: uppercase; letter-spacing: 0.03em; } .cur-product-card__category:hover { text-decoration: none; background: var(--cur-products-badge-hover-bg); color: var(--cur-products-text-hover-bg); border: var(--cur-products-badge-hover-border); } .cur-product-card__title { margin: 0 0 7px; font-size: 15px; line-height: 1.28; font-weight: 700; } .cur-product-card__title a { color: var(--cur-products-heading); text-decoration: none; } .cur-product-card__title a:hover { text-decoration: underline; } .cur-product-card__text { margin: 0 0 11px; color: var(--cur-products-muted); font-size: 12px; line-height: 1.5; } .cur-product-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: auto; margin-bottom: 11px; } .cur-product-card__body > .cur-product-button { margin-top: auto; align-self: center; min-width: 120px; } .cur-product-price { color: var(--cur-products-price-color); font-size: 15px; line-height: 1.2; font-weight: var(--cur-products-price-weight); } .cur-product-unit { color: var(--cur-products-muted); font-size: 12px; } /* ============================================================ Buttons ============================================================ */ .cur-product-button { display: inline-flex; align-items: center; justify-content: center; align-self: flex-start; min-height: 34px; padding: 0 12px; background: var(--cur-products-button-bg); color: var(--cur-products-button-text); border: var(--cur-products-button-border); border-radius: var(--cur-products-card-radius); text-decoration: none; font-size: 12px; line-height: 1; font-weight: 600; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .cur-product-button:hover, .cur-product-button:focus { background: var(--cur-products-button-detail-hover-bg); color: var(--cur-products-button-detail-hover-text); text-decoration: none; } .cur-product-button--ghost { background: transparent; color: var(--cur-products-button-border); } .cur-product-button--ghost:hover, .cur-product-button--ghost:focus { background: var(--cur-products-button-hover-bg); color: var(--cur-products-button-hover-text); } .cur-products-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; } /* ============================================================ Leere Zustände ============================================================ */ .cur-products-empty { padding: 30px; background: var(--cur-products-soft-bg); border: 1px dashed var(--cur-products-border-strong); border-radius: var(--cur-products-card-radius); color: var(--cur-products-muted); text-align: center; } .cur-products-empty p { margin: 0 0 16px; } /* ============================================================ Produktdetail · Grundlayout ============================================================ */ .cur-product-detail-modern { /*--cur-product-detail-main-image-height-local: 390px;*/ /*--cur-product-detail-thumb-height-local: 76px;*/ background: var(--cur-product-detail-page-bg); } .cur-product-detail-modern .site-content { background: var(--cur-product-detail-page-bg); } .cur-product-detail-page { width: 100%; max-width: 100%; box-sizing: border-box; } .cur-product-detail-page > .cur-breadcrumb:first-child { margin-top: 0; } /* ============================================================ Produktdetail · Hauptbereich als Card ============================================================ */ .cur-product-hero-card { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(340px, 0.98fr); gap: 30px; align-items: stretch; padding: 30px 34px 34px; background: var(--cur-product-detail-card-bg); border: var(--cur-product-detail-card-border); border-radius: var(--cur-product-detail-card-radius); box-shadow: var(--cur-product-detail-card-shadow); } .cur-product-hero-gallery, .cur-product-hero-content { min-width: 0; } .cur-product-main-image { position: relative; /*height: var(--cur-product-detail-main-image-height-local);*/ background: var(--cur-product-detail-image-bg); border: var(--cur-product-detail-card-border); border-radius: var(--cur-product-detail-card-radius); overflow: hidden; box-shadow: var(--cur-product-detail-card-shadow); } .cur-product-main-image a, .cur-product-main-image span { display: block; width: 100%; height: 100%; } .cur-product-main-image picture { display: block; width: 100%; height: 100%; } .cur-product-main-image img { width: 100%; height: 100%; object-fit: contain; display: block; /* transition: transform 0.25s ease, opacity 0.18s ease;*/ } /*.cur-product-main-image:hover img { transform: scale(1.018); }*/ .cur-product-main-image__empty { width: 100%; height: 100%; min-height: 260px; display: flex; align-items: center; justify-content: center; color: var(--cur-product-detail-muted-color); font-size: 48px; } /* ============================================================ Produktdetail · Thumbnail-Leiste ============================================================ */ .cur-product-thumb-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 12px; min-width: 0; max-width: 100%; } .cur-product-thumb { appearance: none; padding: 0; height: var(--cur-product-detail-thumb-height-local); display: block; min-width: 0; background: var(--cur-product-detail-image-bg); border: 2px solid transparent; border-radius: var(--cur-product-detail-card-radius); overflow: hidden; cursor: pointer; transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease; } .cur-product-thumb:hover { transform: translateY(-1px); border-color: rgba(15, 23, 42, 0.22); } .cur-product-thumb.is-active { border-color: var(--cur-product-detail-title-color); box-shadow: 0 6px 18px rgba(15, 23, 42, 0.14); } .cur-product-thumb picture { display: block; width: 100%; height: 100%; } .cur-product-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ============================================================ Produktdetail · Produktinfo ============================================================ */ .cur-product-hero-content { display: flex; flex-direction: column; justify-content: center; padding: 4px 4px 4px 0; } .cur-product-detail-badge { display: inline-flex; align-self: flex-start; margin-bottom: 16px; padding: 6px 11px; background: var(--cur-product-detail-badge-bg); color: var(--cur-product-detail-badge-color); border: var(--cur-product-detail-badge-border); border-radius: 999px; text-decoration: none; font-size: 11px; line-height: 1.2; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; } .cur-product-detail-badge:hover { background: var(--cur-product-detail-badge-hover-bg); color: var(--cur-product-detail-badge-hover-color); text-decoration: none; } .cur-product-detail-modern .cur-product-detail-title { margin: 0 0 14px; color: var(--cur-product-detail-title-color); font-size: var(--cur-product-detail-title-size); line-height: 1.08; font-weight: var(--cur-product-detail-title-weight); letter-spacing: -0.03em; } .cur-product-detail-price-panel { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin: 0 0 18px; padding: 0 0 18px; border-bottom: var(--cur-product-detail-card-border); } .cur-product-detail-modern .cur-product-detail-price { color: var(--cur-product-detail-price-color); font-size: var(--cur-product-detail-price-size); line-height: 1; font-weight: var(--cur-product-detail-price-weight); letter-spacing: -0.02em; } .cur-product-detail-modern .cur-product-detail-unit { color: var(--cur-product-detail-muted-color); font-size: 15px; font-weight: 600; } .cur-product-detail-modern .cur-product-detail-short { margin: 0 0 18px; color: var(--cur-product-detail-text-color); font-size: 16px; line-height: 1.7; } .cur-product-detail-short > :first-child, .cur-product-detail-description > :first-child, .cur-product-notice__content > :first-child { margin-top: 0; } .cur-product-detail-short > :last-child, .cur-product-detail-description > :last-child, .cur-product-notice__content > :last-child { margin-bottom: 0; } /* ============================================================ Produktdetail · Fakten ============================================================ */ .cur-product-facts { display: grid; grid-template-columns: 1fr; gap: 0; margin: 20px 0; padding: 0; background: var(--cur-product-detail-facts-bg); border: var(--cur-product-detail-facts-border); border-radius: var(--cur-product-detail-card-radius); box-shadow: var(--cur-product-detail-card-shadow); overflow: hidden; } .cur-product-facts div { display: grid; grid-template-columns: 135px minmax(0, 1fr); gap: 14px; padding: 11px 14px; border-bottom: var(--cur-product-detail-facts-border); } .cur-product-facts div:last-child { border-bottom: 0; } .cur-product-facts dt { color: var(--cur-product-detail-muted-color); font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; } .cur-product-facts dd { margin: 0; color: var(--cur-product-detail-title-color); font-size: 14px; font-weight: 600; } .cur-product-detail-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; } /* ============================================================ Produktdetail · Unterbereiche als Cards ============================================================ */ .cur-product-detail-modern .cur-products-section, .cur-product-content-card, .cur-product-notice-modern { margin-top: 34px; padding: 30px 34px 34px; background: var(--cur-product-detail-card-bg); border: var(--cur-product-detail-card-border); border-radius: var(--cur-product-detail-card-radius); box-shadow: var(--cur-product-detail-card-shadow); } .cur-product-section-kicker { margin-bottom: 7px; color: var(--cur-product-detail-muted-color); font-size: 11px; line-height: 1.2; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; } .cur-product-detail-modern .cur-products-section-title { margin: 0 0 24px; padding: 0 0 10px; border-bottom: var(--cur-product-detail-card-border); color: var(--cur-product-detail-title-color) !important; font-size: 18px; line-height: 1.2; font-weight: 800; letter-spacing: -0.02em; } .cur-product-detail-modern .cur-product-detail-description { margin: 0; color: var(--cur-product-detail-text-color); font-size: 16px; line-height: 1.8; } /* ============================================================ Produktdetail · Videos ============================================================ */ .cur-product-video-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .cur-product-video-card { background: var(--cur-product-detail-card-bg); border: var(--cur-product-detail-card-border); border-radius: var(--cur-product-detail-card-radius); overflow: hidden; box-shadow: 0 8px 20px rgba(15, 23, 42, 0.045); } .cur-product-video-card video { width: 100%; max-height: 360px; display: block; background: #000000; } .cur-product-video-card h3 { margin: 16px 18px 7px; color: var(--cur-product-detail-title-color); font-size: 17px; line-height: 1.3; font-weight: 800; } .cur-product-video-card p { margin: 0 18px 18px; color: var(--cur-product-detail-muted-color); font-size: 14px; line-height: 1.7; } /* ============================================================ Produktdetail · Datenblätter ============================================================ */ .cur-product-datasheet-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .cur-product-datasheet-card { background: var(--cur-product-detail-card-bg); border: var(--cur-product-detail-card-border); border-radius: var(--cur-product-detail-card-radius); box-shadow: 0 8px 20px rgba(15, 23, 42, 0.045); overflow: hidden; transition: transform 0.2s ease, box-shadow 0.2s ease; } .cur-product-datasheet-card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(15, 23, 42, 0.085); } .cur-product-datasheet-card a { display: flex; gap: 13px; padding: 18px; color: var(--cur-product-detail-title-color); text-decoration: none; } .cur-product-datasheet-card__icon { flex: 0 0 40px; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; background: var(--cur-product-detail-image-bg); border-radius: 50%; color: var(--cur-product-detail-title-color); font-size: 18px; } .cur-product-datasheet-card__body { min-width: 0; display: grid; gap: 5px; } .cur-product-datasheet-card__body strong { font-size: 15px; line-height: 1.3; } .cur-product-datasheet-card__body small { color: var(--cur-product-detail-muted-color); font-size: 13px; line-height: 1.45; } .cur-product-datasheet-card__body em { color: var(--cur-product-detail-muted-color); font-size: 13px; font-style: normal; text-decoration: underline; } /* ============================================================ Produktdetail · Hinweise / Warnungen ============================================================ */ .cur-product-notice-modern { display: grid; grid-template-columns: 50px minmax(0, 1fr); gap: 16px; background: var(--cur-product-detail-notice-bg) !important; border-color: var(--cur-product-detail-notice-border-color); box-shadow: var(--cur-product-detail-notice-shadow); } .cur-product-notice-modern__icon { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; background: var(--cur-product-detail-muted-color); color: #ffffff; border-radius: var(--cur-product-detail-card-radius); font-size: 20px; } .cur-product-notice-modern .cur-products-section-title { color: var(--cur-product-detail-title-color); } .cur-product-notice__content { color: var(--cur-product-detail-notice-text-color); font-size: 14px; line-height: 1.7; } /* ============================================================ Responsive ============================================================ */ @media (max-width: 1200px) { .cur-product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .cur-product-category-grid, .cur-product-datasheet-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cur-product-category-card { grid-template-columns: 105px minmax(0, 1fr); } .cur-product-hero-card { grid-template-columns: 1fr; } .cur-product-hero-content { padding: 0; } .cur-product-main-image { height: 360px; } } @media (max-width: 900px) { .cur-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cur-products-toolbar { grid-template-columns: 1fr; gap: 24px; padding: 28px 24px; } .cur-products-search { width: 100%; } .cur-product-video-grid { grid-template-columns: 1fr; } } @media (max-width: 768px) { .cur-products-main, .cur-products-section, .cur-products-card, .cur-products-search, .cur-product-detail-page, .cur-product-hero-card, .cur-product-hero-gallery, .cur-product-hero-content, .cur-product-main-image, .cur-product-thumb-strip { width: 100%; max-width: 100%; box-sizing: border-box; } .cur-products-main { overflow-x: hidden; } .cur-products-search { margin-left: 0; margin-right: 0; } .cur-products-search input, .cur-products-search button, .cur-products-search .cur-products-search-input, .cur-products-search .cur-products-search-button { width: 100%; max-width: 100%; box-sizing: border-box; } .cur-product-detail-actions { align-items: stretch; } .cur-product-detail-actions .cur-product-button, .cur-product-detail-actions a, .cur-product-detail-actions button { width: 100%; justify-content: center; text-align: center; } .cur-product-main-image img { width: 100%; height: 100%; display: block; object-fit: contain; } } @media (max-width: 760px) { .cur-products-index .cur-products-section, .cur-products-category .cur-products-section, .cur-product-detail-modern .cur-products-section, .cur-product-content-card, .cur-product-notice-modern { padding: 22px 18px 24px; border-radius: var(--cur-product-detail-card-radius); } .cur-products-section-title, .cur-product-detail-modern .cur-products-section-title { font-size: 23px; margin-bottom: 20px; } .cur-product-detail-modern { --cur-product-detail-main-image-height-local: 280px; --cur-product-detail-thumb-height-local: 68px; } .cur-product-hero-card { grid-template-columns: 1fr; gap: 20px; padding: 22px 18px 24px; border-radius: var(--cur-product-detail-card-radius); } .cur-product-hero-gallery { order: 1; } .cur-product-hero-content { order: 2; padding: 0; } .cur-product-thumb-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .cur-product-detail-modern .cur-product-detail-title { font-size: 30px; } .cur-product-facts div { grid-template-columns: 1fr; gap: 4px; } .cur-product-notice-modern { grid-template-columns: 1fr; } .cur-product-detail-modern .cur-product-video-grid, .cur-product-detail-modern .cur-product-datasheet-grid { grid-template-columns: 1fr; } } @media (max-width: 640px) { .cur-products-main { padding-top: 34px; padding-bottom: 48px; } .cur-products-heading { font-size: 27px; } .cur-product-category-grid, .cur-product-datasheet-grid { grid-template-columns: 1fr; } .cur-product-grid { grid-template-columns: 1fr; } .cur-product-category-card { grid-template-columns: 1fr; } .cur-product-category-card__media { min-height: var(--cur-products-category-image-height); } .cur-product-card__media { height: 270px; object-fit: contain; padding: 14px; background: var(--cur-products-soft-bg); } .cur-products-search { grid-template-columns: 1fr; } .cur-product-detail-modern .cur-product-detail-price { font-size: 28px; } } @media (max-width: 520px) { .cur-product-detail-modern { --cur-product-detail-main-image-height-local: 235px; --cur-product-detail-thumb-height-local: 62px; } .cur-product-thumb-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cur-product-detail-modern .cur-product-detail-title { font-size: 28px; } } @media (max-width: 480px) { .cur-products-search { transform: none; } .cur-product-hero-card, .cur-product-detail-modern .cur-products-section, .cur-product-content-card, .cur-product-notice-modern { padding-left: 16px; padding-right: 16px; } } /* ===== Größen-/Typo-Fix: wie deine Standardkarten ===== */ .mm-contact-form { width:100%; } .mm-contact-form .cur-form { width:100%; } .mm-contact-form .cur-form-title { font-size:22px; font-weight:600; margin:0 0 6px; line-height:1.25; } .mm-contact-form .cur-form-intro { margin:0 0 14px; font-size:15px; color:var(--cur-color-text-muted); } .mm-contact-form .cur-form-field { margin-bottom:14px; } .mm-contact-form label { display:ruby ; margin:0 5px 6px; font-weight:600; font-size:14px; } .mm-contact-form input[type="text"], .mm-contact-form input[type="email"], .mm-contact-form input[type="tel"], .mm-contact-form select, .mm-contact-form textarea { display:block; width:100%; box-sizing:border-box; padding:10px 12px; border: var(--cur-form-control-border); border-radius:var(--cur-form-control-radius); font-size:15px; line-height:1.45; background: var(--cur-form-input-field-bg); } .mm-contact-form textarea{ min-height:140px; } .mm-contact-form .cur-form-actions { margin-top:8px; } .mm-contact-form .cur-btn-primary { display:inline-block; border:none; border-radius:10px; padding:10px 16px; font-weight:600; cursor:pointer; background: var(--cur-button-primary-bg,#f36e34); color:#fff; box-shadow:0 1px 2px rgba(0,0,0,.06); } .mm-contact-form .cur-hcaptcha { margin-top:6px; } .entry-content h2, .entry-content h2 span { font-size: var(--cur-font-size-h2-base) !important; color: var(--cur-font-color); } .cur-product-document-modal { position: fixed; inset: 0; z-index: 99999; display: none; align-items: center; justify-content: center; padding: 24px; background: var(--cur-product-doc-modal-backdrop); } .cur-product-document-modal.is-open { display: flex; } .cur-product-document-modal-open { overflow: hidden; } .cur-product-document-modal__dialog { width: min(1100px, 96vw); height: min(820px, 92vh); background: var(--cur-product-doc-modal-bg); color: var(--cur-product-doc-modal-text); border-radius: var(--cur-product-doc-modal-radius); overflow: hidden; box-shadow: var(--cur-product-doc-modal-shadow); display: flex; flex-direction: column; } .cur-product-document-modal__header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: var(--cur-product-doc-modal-padding); border-bottom: 1px solid var(--cur-product-doc-modal-border); } .cur-product-document-modal__title { margin: 0; font-size: 18px; line-height: 1.3; } .cur-product-document-modal__close { width: 42px; height: 42px; border: 0; border-radius: 999px; background: var(--cur-product-doc-modal-close-bg); color: var(--cur-product-doc-modal-close-text); cursor: pointer; font-size: 26px; line-height: 1; } .cur-product-document-modal__body { position: relative; flex: 1; min-height: 0; background: var(--cur-product-doc-modal-body-bg); display: flex; align-items: center; justify-content: center; } .cur-product-document-modal__image { max-width: 100%; max-height: 100%; object-fit: contain; } .cur-product-document-modal__frame { width: 100%; height: 100%; border: 0; background: #ffffff; } .cur-product-document-modal__fallback { position: absolute; right: 18px; bottom: 18px; max-width: min(420px, calc(100% - 36px)); padding: 16px; background: var(--cur-product-doc-modal-bg); color: var(--cur-product-doc-modal-text); border: 1px solid var(--cur-product-doc-modal-border); border-radius: 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18); } .cur-product-document-modal__fallback p { margin: 0 0 12px; font-size: 14px; line-height: 1.45; } .cur-product-document-modal__open-link { display: inline-flex; align-items: center; justify-content: center; padding: 11px 16px; border-radius: 999px; background: var(--cur-product-doc-modal-button-bg); color: var(--cur-product-doc-modal-button-text); text-decoration: none; font-size: 14px; line-height: 1; } @media (max-width: 700px) { .cur-product-document-modal { padding: 10px; } .cur-product-document-modal__dialog { width: 100%; height: 92vh; border-radius: 14px; } .cur-product-document-modal__header { padding: 12px 14px; } .cur-product-document-modal__title { font-size: 15px; } .cur-product-document-modal__close { width: 38px; height: 38px; font-size: 24px; } .cur-product-document-modal__fallback { left: 12px; right: 12px; bottom: 12px; max-width: none; } } /* ============================================================ Curatello · Fehlerseite 404 Originelle Marktstand-Ansicht ohne neue Assets. Nutzt bestehende Curatello-Design-Tokens. ============================================================ */ .cur-error-page .site-content { padding-top: clamp(42px, 7vw, 90px); padding-bottom: clamp(46px, 7vw, 96px); } .cur-error-page .site-content .container { max-width: var(--cur-content-max-width, 1140px); } .cur-error-main { width: 100%; } .cur-error-hero { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(250px, 0.86fr) minmax(280px, 1.14fr); align-items: center; gap: clamp(28px, 5vw, 62px); max-width: 1140px; margin: 0 auto; padding: clamp(28px, 5vw, 66px); background: var(--cur-error-bg); border: var(--cur-error-border); border-radius: var(--cur-error-radius); box-shadow: var(--cur-error-shadow); } .cur-error-hero::before { content: ""; position: absolute; inset: -38% -20% auto auto; width: min(560px, 86vw); aspect-ratio: 1; border-radius: 999px; background: radial-gradient(circle, color-mix(in srgb, var(--cur-color-link) 18%, transparent), transparent 68%); pointer-events: none; opacity: 0.95; } .cur-error-hero::after { content: ""; position: absolute; left: 8%; right: 8%; bottom: 32px; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--cur-color-link) 28%, transparent), transparent); pointer-events: none; } .cur-error-scene, .cur-error-content, .cur-error-shortcuts { position: relative; z-index: 1; } .cur-error-scene { display: grid; justify-items: center; gap: 22px; } .cur-error-stall { position: relative; width: min(320px, 100%); min-height: 260px; display: grid; align-content: end; justify-items: center; filter: drop-shadow(0 22px 30px rgba(17, 24, 39, 0.14)); } .cur-error-stall__roof { position: absolute; top: 10px; left: 50%; width: 92%; height: 78px; border: var(--cur-maincard-border); border-radius: 22px 22px 10px 10px; background: repeating-linear-gradient( 90deg, var(--cur-color-link) 0 34px, color-mix(in srgb, var(--cur-maincard-bg) 88%, #ffffff) 34px 68px ); transform: translateX(-50%) perspective(160px) rotateX(10deg); transform-origin: bottom; } .cur-error-stall__roof::after { content: ""; position: absolute; left: 8%; right: 8%; bottom: -15px; height: 24px; border-radius: 999px; background: color-mix(in srgb, var(--cur-color-link) 70%, #000000); opacity: 0.18; } .cur-error-stall__sign { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: clamp(148px, 21vw, 214px); aspect-ratio: 1.25; margin-bottom: 26px; border: var(--cur-maincard-border); border-radius: calc(var(--cur-maincard-radius) * 0.82); background: var(--cur-color-bg-page); color: var(--cur-color-link); font-size: clamp(62px, 9vw, 108px); line-height: 1; font-weight: 900; letter-spacing: -0.08em; transform: rotate(-2deg); } .cur-error-stall__sign::before, .cur-error-stall__sign::after { content: ""; position: absolute; top: -38px; width: 2px; height: 42px; background: color-mix(in srgb, var(--cur-color-text-main) 32%, transparent); } .cur-error-stall__sign::before { left: 26%; } .cur-error-stall__sign::after { right: 26%; } .cur-error-stall__counter { display: flex; align-items: end; justify-content: center; gap: 14px; width: 100%; min-height: 78px; padding: 18px 22px; border: var(--cur-maincard-border); border-radius: calc(var(--cur-maincard-radius) * 0.9); background: color-mix(in srgb, var(--cur-maincard-bg) 84%, var(--cur-color-link)); } .cur-error-stall__counter span { display: block; width: 44px; height: 26px; border-radius: 999px 999px 14px 14px; background: var(--cur-color-link); opacity: 0.82; } .cur-error-stall__counter span:nth-child(2) { height: 38px; opacity: 0.65; } .cur-error-path { width: min(280px, 80%); height: 18px; border-radius: 999px; background: radial-gradient(ellipse at center, rgba(17, 24, 39, 0.16), transparent 72%); } .cur-error-kicker { margin: 0 0 10px; color: var(--cur-color-link); font-size: 14px; line-height: 1.3; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; } .cur-error-title { margin: 0; color: var(--cur-error-title-color); font-size: clamp(28px, 5vw, var(--cur-error-title-size)); line-height: 1.12; font-weight: var(--cur-error-title-weight); } .cur-error-text { max-width: 620px; margin: 18px 0 0; color: var(--cur-error-text-color); font-size: var(--cur-error-text-size); line-height: 1.75; } .cur-error-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; } .cur-error-button { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 15px 25px; border-radius: var(--cur-maincard-radius); border: 2px solid var(--cur-highlighter-btn-border, var(--cur-color-link)); font-size: 15px; line-height: 1; font-weight: var(--cur-highlighter-btn-font-weight, 700); text-decoration: none; transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease; } .cur-error-button:hover, .cur-error-button:focus-visible { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(17, 24, 39, 0.14); } .cur-error-button--primary { background: var(--cur-highlighter-btn-bg, var(--cur-color-link)); color: var(--cur-highlighter-btn-text, #ffffff); } .cur-error-button--primary:hover, .cur-error-button--primary:focus-visible { background: var(--cur-highlighter-btn-hover-bg, var(--cur-color-text-main)); color: var(--cur-highlighter-btn-hover-text, #ffffff); } .cur-error-button--ghost { background: transparent; color: var(--cur-color-link); } .cur-error-button--ghost:hover, .cur-error-button--ghost:focus-visible { background: var(--cur-highlighter-btn-hover-bg, var(--cur-color-text-main)); color: var(--cur-highlighter-btn-hover-text, #ffffff); } .cur-error-shortcuts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; max-width: 1060px; margin: 18px auto 0; } .cur-error-shortcut { display: grid; grid-template-columns: 46px minmax(0, 1fr); align-items: center; gap: 14px; min-height: 86px; padding: 18px; border: var(--cur-maincard-border); border-radius: var(--cur-maincard-radius); background: var(--cur-maincard-bg); color: var(--cur-color-text-main); text-decoration: none; box-shadow: var(--cur-maincard-shadow); transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; } .cur-error-shortcut:hover, .cur-error-shortcut:focus-visible { transform: translateY(-2px); border-color: color-mix(in srgb, var(--cur-color-link) 42%, transparent); } .cur-error-shortcut__icon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 999px; background: var(--cur-icon-404-bg); color: var(--cur-icon-404-color); font-size: 23px; line-height: 1; } .cur-error-shortcut strong, .cur-error-shortcut small { display: block; } .cur-error-shortcut strong { color: var(--cur-font-color); font-size: 16px; line-height: 1.25; } .cur-error-shortcut small { margin-top: 3px; color: var(--cur-color-text-main); font-size: 13px; line-height: 1.35; opacity: 0.78; } @media (max-width: 880px) { .cur-error-hero { grid-template-columns: 1fr; text-align: center; } .cur-error-text { margin-right: auto; margin-left: auto; } .cur-error-actions { justify-content: center; } .cur-error-shortcuts { grid-template-columns: 1fr; } } @media (max-width: 640px) { .cur-error-hero { margin-inline: 12px; padding: 28px 18px; } .cur-error-actions { display: grid; grid-template-columns: 1fr; } .cur-error-button { width: 100%; } .cur-error-shortcuts { margin-inline: 12px; } } td h2 { margin-top: -50px; } /* ============================================================ Curatello · Anfahrt / Routenplaner Block Abgestimmt auf views/content/curatello/_route_planner.php ============================================================ */ .cur-route-planner { width: min(100%, var(--cur-route-max-width)) !important; margin-left: auto; margin-right: auto; box-sizing: border-box; background: var(--cur-route-bg); border: var(--cur-route-border); border-radius: var(--cur-route-radius); box-shadow: var(--cur-route-shadow); padding: 40px; display: block; overflow: visible; } .cur-route-planner, .cur-route-planner * { box-sizing: border-box; } .cur-route-planner__card { width: 100%; margin: 0; background: transparent; border: 0; box-shadow: none; padding: 0; } .cur-route-planner__header { margin: 0 0 12px; } .cur-route-planner__title { margin: 0; } .cur-route-planner__intro { width: min(100%, var(--cur-route-form-max-width, 760px)); margin: 0 auto 22px; line-height: 1.65; } /* ------------------------------------------------------------ Ziel / Destination ------------------------------------------------------------ */ .cur-route-planner__destination { width: min(100%, var(--cur-route-form-max-width, 760px)); margin: 0 auto 24px; display: flex; align-items: flex-start; gap: 10px; background: var(--cur-route-destination-bg, var(--cur-maincard-bg)); box-shadow: var(--cur-route-destination-shadow); border: var(--cur-route-destination-border); border-radius: var(--cur-route-destination-radius); padding: 18px 22px; } .cur-route-planner__destination strong { flex: 0 0 auto; color: var(--cur-route-planner-dest-text-color); font-weight: var(--cur-route-planner-dest-text-fett); font-size: var(--cur-route-planner-dest-text-size); } .cur-route-planner__destination span { min-width: 0; line-height: 1.55; } .cur-route-planner__destination small { display: inline-block; margin-top: 4px; opacity: 0.82; line-height: 1.5; color: var(--cur-route-planner-ziel-text-color); font-weight: var(--cur-route-planner-ziel-text-fett); font-size: var(--cur-route-planner-ziel-text-size); } /* ------------------------------------------------------------ App / Formular ------------------------------------------------------------ */ .cur-route-planner__app { width: 100%; } .cur-route-planner__form { width: min(100%, var(--cur-route-form-max-width, 760px)); margin: 0 auto 18px; display: grid; grid-template-columns: 1fr; gap: 22px; align-items: start; } /* Adressfelder bewusst untereinander */ .cur-route-planner__address-grid { display: grid; grid-template-columns: 1fr; gap: 18px; width: 100%; } /* Alle Felder volle Breite */ .cur-route-planner__field, .cur-route-planner__field--wide { position: relative; min-width: 0; width: 100%; grid-column: 1 / -1; } .cur-route-planner__field label { display: block; margin: 0 0 10px; font-size: var(--cur-route-label-size, 16px); font-weight: var(--cur-route-label-weight, 700); line-height: 1.35; } .cur-route-planner__field input, .cur-route-planner__field select, .cur-route-planner__field textarea { width: 100%; min-width: 0; height: 35px; padding: 0 18px; border-radius: var(--cur-route-field-radius); border: var(--cur-route-field-border); background: var(--cur-route-field-bg); font-size: var(--cur-route-field-font-size); box-shadow: var(--cur-route-shadow); line-height: 1.2; } .cur-route-planner__field textarea { min-height: 120px; height: auto; padding-top: 16px; padding-bottom: 16px; } .cur-route-planner__field input:focus, .cur-route-planner__field select:focus, .cur-route-planner__field textarea:focus { outline: none; box-shadow: 0 0 0 3px rgba(194, 224, 244, 0.7); } /* ------------------------------------------------------------ Adressvorschläge ------------------------------------------------------------ */ .cur-route-planner__suggestions { position: static !important; width: 100%; max-height: 320px; overflow-y: auto; margin: -6px 0 0; padding: 14px; background: var(--cur-route-suggest-bg); border: var(--cur-route-suggest-border); border-radius: var(--cur-route-suggest-radius); box-shadow: var(--cur-route-suggest-shadow); z-index: 5; } .cur-route-planner__suggestions[hidden] { display: none !important; } .cur-route-planner__suggestions-title { display: block; margin: 2px 4px 12px; font-weight: var(--cur-route-planner-suggestions-title-weight); color: var(cur-route-planner-suggestions-title-color); font-size: var(cur-route-planner-suggestions-title-size); } .cur-route-planner__suggestion { display: block; width: 100%; text-align: left; border: 1px solid rgba(50, 20, 15, 0.10); border-radius: 14px; background: var(--cur-route-planner-suggestion-bg); padding: 14px 16px; margin: 0 0 10px; cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease; } .cur-route-planner__suggestion:last-child { margin-bottom: 0; font-weight: var(--cur-route-planner-suggestions-head-weight); color: var(cur-route-planner-suggestions-head-color); font-size: var(cur-route-planner-suggestions-head-size); } .cur-route-planner__suggestion:hover, .cur-route-planner__suggestion:focus { background: var(--cur-route-suggest-hover-bg, #f7efe9); border-color: rgba(50, 20, 15, 0.18); transform: translateY(-1px); } .cur-route-planner__suggestion.is-active { background: var(--cur-route-suggest-active-bg, #f2e3da); } .cur-route-planner__suggestion small { display: block; margin-top: 8px; opacity: 0.8; line-height: 1.5; font-weight: var(--cur-route-planner-suggestions-text-weight); color: var(cur-route-planner-suggestions-text-color); font-size: var(cur-route-planner-suggestions-text-size); } /* ------------------------------------------------------------ Buttons ------------------------------------------------------------ */ .cur-route-planner__actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; width: 100%; } .cur-route-planner__button { min-width: 240px; margin: auto; display: inline-flex; align-items: center; justify-content: center; align-self: flex-start; min-height: 40px; padding: 0 12px; background: var(--cur-planner-button-bg); color: var(--cur-planner-button-border); border: var(--cur-planner-button-border); border-radius: var(--cur-planner-card-radius); text-decoration: none; font-size: var(--cur-palner-button-text-size); line-height: 1; font-weight: 600; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; box-shadow: var(--cur-planner-card-shadow); } .cur-route-planner__button:hover, .cur-route-planner__button:focus { background: var(--cur-planner-button-hover-bg); color: var(--cur-planner-button-hover-text-color); text-decoration: none; } .cur-route-planner__actions button[hidden], .cur-route-planner__button[hidden] { display: none !important; } /* ------------------------------------------------------------ Status ------------------------------------------------------------ */ .cur-route-planner__status { width: min(100%, var(--cur-route-form-max-width, 760px)); margin: 0 auto 18px; min-height: 28px; padding: 4px 0; font-weight: 700; } .cur-route-planner__status.is-error { color: #b42318; } .cur-route-planner__status.is-success { color: #1f7a3f; } /* ------------------------------------------------------------ Karte ------------------------------------------------------------ */ .cur-route-planner__map { width: 100%; height: 460px; min-height: 360px; border: 1px solid rgba(50, 20, 15, 0.12); border-radius: 20px; overflow: hidden; background: #eef2f7; } /* ------------------------------------------------------------ Ergebnis ------------------------------------------------------------ */ .cur-route-planner__summary { width: min(100%, var(--cur-route-form-max-width, 760px)); margin: 24px auto 0; padding: 18px 20px; border: 1px solid rgba(50, 20, 15, 0.10); border-radius: 18px; background: rgba(255, 255, 255, 0.72); line-height: 1.65; } .cur-route-planner__summary[hidden] { display: none !important; } .cur-route-planner__steps { width: min(100%, var(--cur-route-form-max-width, 760px)); margin: 22px auto 0; padding-left: 24px; line-height: 1.55; } .cur-route-planner__steps[hidden] { display: none !important; } .cur-route-planner__steps li { margin-bottom: 12px; } .cur-route-planner__step-text { display: block; font-weight: 700; } .cur-route-planner__step-meta { display: block; margin-top: 4px; opacity: 0.76; font-size: 0.94em; } /* ------------------------------------------------------------ Druckdaten im normalen Frontend verstecken ------------------------------------------------------------ */ .cur-route-planner__print[hidden] { display: none !important; } /* ------------------------------------------------------------ Formular sofort sichtbar ------------------------------------------------------------ */ .cur-route-planner__body, .cur-route-planner__content, .cur-route-planner__panel { display: block; } .cur-route-planner__toggle { display: none; } /* ------------------------------------------------------------ Responsive ------------------------------------------------------------ */ @media (max-width: 860px) { .cur-route-planner { padding: 28px 22px; } .cur-route-planner__intro, .cur-route-planner__destination, .cur-route-planner__form, .cur-route-planner__status, .cur-route-planner__summary, .cur-route-planner__steps { width: 100%; } .cur-route-planner__destination { display: block; } .cur-route-planner__destination strong { display: block; margin-bottom: 6px; } .cur-route-planner__actions { flex-direction: column; align-items: stretch; } .cur-route-planner__button, .cur-route-planner__actions button { width: 100%; min-width: 0; } .cur-route-planner__map { height: 380px; min-height: 320px; } } /* ============================================================ Route Planner · Druckansicht nur Wegbeschreibung ============================================================ */ @media print { body.cur-route-print-only * { visibility: hidden !important; } body.cur-route-print-only .cur-route-planner, body.cur-route-print-only .cur-route-planner__print, body.cur-route-print-only .cur-route-planner__print * { visibility: visible !important; } body.cur-route-print-only .cur-route-planner { position: absolute !important; left: 0 !important; top: 0 !important; width: 100% !important; max-width: none !important; padding: 0 !important; margin: 0 !important; border: 0 !important; box-shadow: none !important; background: #fff !important; } body.cur-route-print-only .cur-route-planner__card > *:not(.cur-route-planner__print), body.cur-route-print-only .cur-route-planner__header, body.cur-route-print-only .cur-route-planner__intro, body.cur-route-print-only .cur-route-planner__destination, body.cur-route-print-only .cur-route-planner__app, body.cur-route-print-only .cur-route-planner__form, body.cur-route-print-only .cur-route-planner__actions, body.cur-route-print-only .cur-route-planner__suggestions, body.cur-route-print-only .cur-route-planner__map, body.cur-route-print-only .cur-route-planner__summary, body.cur-route-print-only .cur-route-planner__steps { display: none !important; } body.cur-route-print-only .cur-route-planner__print { display: block !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; color: #000 !important; background: #fff !important; } body.cur-route-print-only .cur-route-print-doc { display: block !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } body.cur-route-print-only .cur-route-print-doc h1 { margin: 0 0 18px !important; font-size: 24px !important; } body.cur-route-print-only .cur-route-print-doc h2 { margin: 24px 0 12px !important; font-size: 18px !important; } body.cur-route-print-only .cur-route-print-doc p { margin: 0 0 12px !important; line-height: 1.45 !important; } body.cur-route-print-only .cur-route-print-doc ol { margin: 0 !important; padding-left: 22px !important; } body.cur-route-print-only .cur-route-print-doc li { margin-bottom: 8px !important; line-height: 1.45 !important; page-break-inside: avoid; } body.cur-route-print-only a[href]::after { content: "" !important; } } /* ============================================================ Website-Passwortschutz ============================================================ */ .cur-site-password-page .cur-password-section { padding: 48px 0 64px; } .cur-site-password-page .cur-password-card { max-width: 620px; margin: 0 auto; padding: 34px; border-radius: 22px; background: var(--cur-card-bg, #fff); box-shadow: var(--cur-card-shadow, 0 18px 45px rgba(15, 23, 42, .12)); } .cur-site-password-page .cur-password-title { margin-bottom: 12px; } .cur-site-password-page .cur-password-text { margin-bottom: 22px; } .cur-site-password-page .cur-password-error { margin-bottom: 18px; padding: 12px 14px; border-radius: 12px; background: #fff1f2; color: #9f1239; font-weight: 700; } .cur-site-password-page .cur-password-form { display: grid; gap: 12px; } .cur-site-password-page .cur-password-label { font-weight: 800; } .cur-site-password-page .cur-password-input { width: 100%; min-height: 46px; padding: 10px 14px; border: 1px solid rgba(15, 23, 42, .18); border-radius: 12px; font: inherit; } .cur-site-password-page .cur-password-input:focus { outline: 2px solid rgba(15, 23, 42, .16); outline-offset: 2px; } .cur-site-password-page .cur-password-button { justify-self: start; margin-top: 8px; padding: 11px 20px; border: 0; border-radius: 999px; background: var(--cur-button-bg, #111827); color: var(--cur-button-color, #fff); font-weight: 800; cursor: pointer; } .cur-site-password-page .cur-password-button:hover, .cur-site-password-page .cur-password-button:focus { filter: brightness(.95); } button.cur-mail-obf.cur-exh-mail { display: inline-flex; align-items: center; gap: 8px; padding: 8px 15px; border: var(--cur-exh-mail-border); border-radius: var(--cur-exh-mail-radius); background: var(--cur-exh-mail-background); box-shadow: var(--cur-btn-shadow-global); cursor: pointer; color: var(--cur-exh-mail-color); } .fa-solid.fa-envelope { color: var(--cur-envelop-color); } button.cur-mail-obf.cur-exh-mail:hover { background: var(--cur-btn-background-global-hover); color: var(--cur-btn-text-color-hover-global); } .cur-mail-revealed-wrap.cur-exh-mail-revealed { display: inline-flex; align-items: center; gap: 8px; } .cur-mail-revealed-link.cur-exh-mail-link { color: inherit; text-decoration: none; font-weight: 500; } .cur-mail-revealed-link.cur-exh-mail-link:hover { color: #694b37; text-decoration: none; font-weight: 700; } .cur-mail-hide-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--cur-btn-radius-global); background: transparent; color: inherit; cursor: pointer; } .cur-mail-hide-btn:hover { background: rgba(0, 0, 0, 0.08); color: var(--cur-envelop-color); } .fa-solid.fa-phone { color: var(--cur-phone-color); } .fa-solid.fa-globe { color: var(--cur-globe-color); } .fa-brands.fa-instagram { color: var(--cur-color-instagram); background: var(--cur-bg-color-instagram); font-weight: 700; } .fa-brands.fa-tiktok { color: var(--cur-color-tiktok); } .fa-brands.fa-facebook-f { color: var(--cur-color-facebook); } .fa-brands.fa-youtube { color: var(--cur-color-youtube); background: var(--cur-bg-color-youtube); } .cur-breadcrumb { margin-top: 0px; margin-bottom: 15px; padding: 0px 0px; background: var(--cur-breadcrumb-bg); border-radius: var(--cur-breadcrumb-radius); color: var(--cur-breadcrumb-color); font-size: var(--cur-breadcrumb-font-size); font-weight: var(--cur-breadcrumb-font-weight); line-height: 1.4; } .cur-breadcrumb__list { display: flex; flex-wrap: wrap; align-items: center; gap: 0; margin: 0; padding: 0; list-style: none; } .cur-breadcrumb__item { display: inline-flex; align-items: center; min-width: 0; color: var(--cur-breadcrumb-color); } .cur-breadcrumb__item + .cur-breadcrumb__item::before { content: "/"; display: inline-flex; align-items: center; margin-left: 10px; margin-right: 10px; color: var(--cur-breadcrumb-separator-color); font-weight: 400; } .cur-breadcrumb__link { color: var(--cur-breadcrumb-link-color); text-decoration: none; transition: color 0.18s ease, text-decoration-color 0.18s ease; } .cur-breadcrumb__link:hover { color: var(--cur-breadcrumb-link-hover-color); text-decoration: underline; text-underline-offset: 3px; } .cur-breadcrumb__link:focus-visible { outline: var(--cur-breadcrumb-focus-outline); outline-offset: 3px; border-radius: 4px; } .cur-breadcrumb__current { color: var(--cur-breadcrumb-current-color); font-weight: 700; } @media (max-width: 767.98px) { :root { --cur-breadcrumb-margin-top: 18px; --cur-breadcrumb-margin-bottom: 22px; --cur-breadcrumb-font-size: 0.88rem; --cur-breadcrumb-separator-gap: 8px; } .cur-breadcrumb__list { row-gap: 6px; } } /* ============================================================ Curatello · Chronik / Zeitleiste · Layout ============================================================ */ .cur-chronicle { width: 100%; margin: 0 auto; } .cur-chronicle__inner { width: min(1140px, calc(100% - 0px)); margin: 0 auto; } .cur-chronicle__head { max-width: 820px; margin: 0 auto 34px; text-align: center; } .cur-chronicle__title { margin: 0 0 14px; color: var(--cur-chronicle-title-color); } .cur-chronicle__intro { color: var(--cur-chronicle-text-color); } .cur-chronicle__timeline { position: relative; padding: 16px 0 24px; } .cur-chronicle__timeline::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; transform: translateX(-50%); border-radius: 999px; background-image: linear-gradient( to bottom, transparent 0%, color-mix(in srgb, var(--cur-chronicle-line-color) 100%, transparent) 20%, color-mix(in srgb, var(--cur-chronicle-line-color) 100%, transparent) 80%, color-mix(in srgb, var(--cur-chronicle-line-color) 100%, transparent) 20%, transparent 100% ); } /* ============================================================ Curatello · Chronik / Zeitleiste · Ereignisse ============================================================ */ .cur-chronicle-event { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; margin: 0 0 34px; } .cur-chronicle-event:last-child { margin-bottom: 0; } .cur-chronicle-event__marker { position: absolute; left: 50%; top: 30px; width: 20px; height: 20px; transform: translateX(-50%); border-radius: 999px; background: var(--cur-chronicle-marker-bg); border: 4px solid var(--cur-chronicle-marker-border); box-shadow: 0 0 0 4px color-mix(in srgb, var(--cur-chronicle-marker-bg) 18%, transparent); z-index: 2; } .cur-chronicle-event__card { position: relative; min-width: 0; padding: 22px; border-radius: var(--cur-chronicle-card-radius); background: var(--cur-chronicle-card-bg); box-shadow: var(--cur-chronicle-card-shadow); color: var(--cur-chronicle-text-color); } .cur-chronicle-event--left .cur-chronicle-event__card { grid-column: 1; } .cur-chronicle-event--right .cur-chronicle-event__card { grid-column: 2; } .cur-chronicle-event__card::after { content: ""; position: absolute; top: 30px; width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; } .cur-chronicle-event--left .cur-chronicle-event__card::after { right: -10px; border-left: 10px solid var(--cur-chronicle-card-bg); } .cur-chronicle-event--right .cur-chronicle-event__card::after { left: -10px; border-right: 10px solid var(--cur-chronicle-card-bg); } /* ============================================================ Curatello · Chronik / Zeitleiste · Inhalt ============================================================ */ .cur-chronicle-event__date { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 10px; padding: 5px 11px; border-radius: 999px; background: var(--cur-chronicle-date-bg); color: var(--cur-chronicle-date-color); font-weight: 700; font-size: .9rem; } .cur-chronicle-event__title { margin: 0 0 10px; color: var(--cur-chronicle-title-color); font-size: clamp(1.1rem, 1.7vw, 1.45rem); } .cur-chronicle-event__text { line-height: 1.65; } .cur-chronicle-event__text > :last-child { margin-bottom: 0; } .cur-chronicle-event__image { float: left; display: block; width: min(42%, 190px); margin: 2px 18px 10px 0; border-radius: var(--cur-chronicle-image-radius); overflow: hidden; box-shadow: 0 8px 18px rgba(0,0,0,.12); } .cur-chronicle-event--right .cur-chronicle-event__image { float: right; margin: 2px 0 10px 18px; } .cur-chronicle-event__image img, .cur-chronicle-event__image picture { display: block; width: 100%; height: auto; } .cur-chronicle-event__image img { aspect-ratio: 4/3; object-fit: cover; transition: transform .22s ease; } .cur-chronicle-event__image:hover img { transform: scale(1.035); } .cur-chronicle-event__actions { clear: both; margin: 16px 0 0; } .cur-chronicle-event__button { display: inline-flex; align-items: center; justify-content: center; } .cur-chronicle__empty { text-align: center; color: var(--cur-chronicle-text-color); } /* ============================================================ Curatello · Chronik / Zeitleiste · Scroll-Einblendung ============================================================ */ .cur-chronicle-event[data-cur-chronicle-event] { opacity: 1; transform: none; } .js .cur-chronicle-event[data-cur-chronicle-event] { opacity: 0; transform: translateY(var(--cur-chronicle-reveal-distance)); transition: opacity .45s ease, transform .45s ease; } .js .cur-chronicle-event--left[data-cur-chronicle-event] { transform: translateX(calc(var(--cur-chronicle-reveal-distance) * -1)); } .js .cur-chronicle-event--right[data-cur-chronicle-event] { transform: translateX(var(--cur-chronicle-reveal-distance)); } .js .cur-chronicle-event.is-visible { opacity: 1; transform: translate(0,0); } /* ============================================================ Curatello · Chronik / Zeitleiste · Lightbox ============================================================ */ .cur-chronicle-lightbox { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center; padding: 24px; } .cur-chronicle-lightbox.is-active { display: flex; } .cur-chronicle-lightbox__backdrop { position: absolute; inset: 0; background: var(--cur-gallery-lightbox-backdrop-color, rgba(0,0,0,.72)); } .cur-chronicle-lightbox__inner { position: relative; z-index: 1; max-width: min(1100px, 94vw); max-height: 90vh; } .cur-chronicle-lightbox__img { display: block; max-width: 100%; max-height: 86vh; border-radius: var(--cur-gallery-lightbox-image-radius, 14px); box-shadow: var(--cur-gallery-lightbox-image-shadow, 0 18px 55px rgba(0,0,0,.34)); } .cur-chronicle-lightbox__close { position: absolute; right: 12px; top: 12px; z-index: 2; width: 42px; height: 42px; border-radius: 999px; border: 0; background: rgba(0,0,0,.62); color: #fff; font-size: 30px; line-height: 1; cursor: pointer; } body.cur-chronicle-lightbox-open { overflow: hidden; } /* ============================================================ Curatello · Chronik / Zeitleiste · Mobil ============================================================ */ @media (max-width: 767.98px) { .cur-chronicle__inner { width: min(100% - 24px, 640px); } .cur-chronicle__head { text-align: left; margin-bottom: 24px; } .cur-chronicle__timeline { padding-left: 28px; } .cur-chronicle__timeline::before { left: 8px; transform: none; } .cur-chronicle-event { display: block; margin-bottom: 24px; } .cur-chronicle-event__marker { left: -20px; top: 28px; width: 16px; height: 16px; border-width: 3px; } .cur-chronicle-event__card { padding: 18px; } .cur-chronicle-event__card::after { left: -10px !important; right: auto !important; border-left: 0 !important; border-right: 10px solid var(--cur-chronicle-card-bg) !important; } .cur-chronicle-event__image, .cur-chronicle-event--right .cur-chronicle-event__image { float: none; width: 100%; margin: 0 0 14px; } } /* ============================================================ Curatello · Chronik / Zeitleiste · Reduzierte Bewegung ============================================================ */ @media (prefers-reduced-motion: reduce) { .js .cur-chronicle-event[data-cur-chronicle-event] { opacity: 1; transform: none; transition: none; } .cur-chronicle-event__image img { transition: none; } } /* ============================================================ Curatello Editor · Frontend-Inhalte Für Texte, Produkt-Kurzbeschreibung, Beschreibung, Hinweise/Warnungen, Medien, Tabellen, Links und Lightbox-Medien ============================================================ */ /* ------------------------------------------------------------ Grundfluss für Editor-Inhalte ------------------------------------------------------------ */ .cur-content-flow, .entry-content { color: var(--cur-color-text, #1f2937); line-height: 1.65; } .cur-content-flow > *:first-child, .entry-content > *:first-child { margin-top: 0; } .cur-content-flow > *:last-child, .entry-content > *:last-child { margin-bottom: 0; } .cur-content-flow p, .entry-content p { margin: 0 0 1rem; } .cur-content-flow h2, .entry-content h2 { margin: 1.6rem 0 .75rem; color: var(--cur-color-heading, var(--cur-color-text, #111827)); font-size: clamp(1.45rem, 2.4vw, 2rem); line-height: 1.2; font-weight: 700; } .cur-content-flow h3, .entry-content h3 { margin: 1.35rem 0 .65rem; color: var(--cur-color-heading, var(--cur-color-text, #111827)); font-size: clamp(1.2rem, 2vw, 1.55rem); line-height: 1.25; font-weight: 700; } .cur-content-flow h4, .entry-content h4 { margin: 1.15rem 0 .55rem; color: var(--cur-color-heading, var(--cur-color-text, #111827)); font-size: 1.1rem; line-height: 1.3; font-weight: 700; } /* ============================================================ Editor Content · Text Highlight ============================================================ */ .cur-text-highlight { color: var(--cur-color-text-main); font-weight: 900; } /* ------------------------------------------------------------ Textausrichtung ------------------------------------------------------------ */ .cur-text-left { text-align: left; } .cur-text-center { text-align: center; } .cur-text-right { text-align: right; } .cur-text-justify { text-align: justify; } /* ------------------------------------------------------------ Links ------------------------------------------------------------ */ .cur-content-flow a[href]:not(.cur-content-button):not(.cur-content-file):not(.cur-content-media__lightbox), .entry-content a[href]:not(.cur-content-button):not(.cur-content-file):not(.cur-content-media__lightbox), .cur-editor-canvas a[href]:not(.cur-content-button):not(.cur-content-file):not(.cur-content-media__lightbox) { color: var(--cur-color-link, #503020); text-decoration: underline; text-underline-offset: .16em; font-weight: 600; } .cur-content-flow a[href]:not(.cur-content-button):not(.cur-content-file):not(.cur-content-media__lightbox):hover, .entry-content a[href]:not(.cur-content-button):not(.cur-content-file):not(.cur-content-media__lightbox):hover, .cur-editor-canvas a[href]:not(.cur-content-button):not(.cur-content-file):not(.cur-content-media__lightbox):hover { color: var(--cur-color-link-hover, var(--cur-color-link, #503020)); text-decoration-thickness: 2px; } /* ------------------------------------------------------------ Listen ------------------------------------------------------------ */ .cur-content-flow ul, .cur-content-flow ol, .entry-content ul, .entry-content ol { margin: 0 0 1rem; padding-left: 1.35rem; } .cur-content-flow li, .entry-content li { margin: .25rem 0; } .cur-list { padding-left: 1.35rem; } .cur-list--disc { list-style-type: disc; } .cur-list--square { list-style-type: square; } .cur-list--arrow { list-style: none; padding-left: 1.15rem; } .cur-list--arrow > li { position: relative; } .cur-list--arrow > li::before { content: "›"; position: absolute; left: -1.05rem; color: var(--cur-color-link, #503020); font-weight: 700; } .cur-list--diamond { list-style: none; padding-left: 1.25rem; } .cur-list--diamond > li { position: relative; } .cur-list--diamond > li::before { content: "◆"; position: absolute; left: -1.15rem; color: var(--cur-color-link, #503020); font-size: .78em; line-height: 1.9; } .cur-list--check { list-style: none; padding-left: 1.25rem; } .cur-list--check > li { position: relative; } .cur-list--check > li::before { content: "✓"; position: absolute; left: -1.15rem; color: var(--cur-color-link, #503020); font-weight: 700; } /* ------------------------------------------------------------ Info, Warnung, Zitat ------------------------------------------------------------ */ .cur-content-info, .cur-content-warning, .cur-content-quote { margin: 1.25rem 0; padding: 1rem 1.15rem; border-radius: var(--cur-radius-md, 10px); background: color-mix(in srgb, var(--cur-color-link, #503020) 8%, #fff); border: 1px solid color-mix(in srgb, var(--cur-color-link, #503020) 25%, transparent); } .cur-content-info > *:first-child, .cur-content-warning > *:first-child, .cur-content-quote > *:first-child { margin-top: 0; } .cur-content-info > *:last-child, .cur-content-warning > *:last-child, .cur-content-quote > *:last-child { margin-bottom: 0; } .cur-content-warning { background: color-mix(in srgb, #b45309 10%, #fff); border-color: color-mix(in srgb, #b45309 35%, transparent); } .cur-content-quote { border-left: 4px solid var(--cur-color-link, #503020); font-style: italic; } /* ------------------------------------------------------------ Button-Link ------------------------------------------------------------ */ .cur-content-button { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; max-width: 100%; margin: .35rem .25rem .35rem 0; padding: .7rem 1rem; border-radius: var(--cur-radius-button, 999px); background: var(--cur-color-link, #503020); color: #fff; text-decoration: none; font-weight: 600; line-height: 1.2; word-break: break-word; } .cur-content-button:hover { background: var(--cur-color-link-hover, var(--cur-color-link, #503020)); color: #fff; text-decoration: none; } /* ------------------------------------------------------------ PDF / Datei-Link ------------------------------------------------------------ */ .cur-content-file { display: inline-flex; align-items: center; gap: .45rem; max-width: 100%; margin: .5rem 0; color: var(--cur-color-link, #503020); font-weight: 600; text-decoration: underline; text-underline-offset: .16em; word-break: break-word; } .cur-content-file:hover { color: var(--cur-color-link-hover, var(--cur-color-link, #503020)); } .cur-content-media--file { display: block; max-width: 100%; } .cur-content-media--file .cur-content-file { display: inline-flex; max-width: 100%; } .cur-content-media--file { display: block; max-width: 100%; } .cur-content-media--file .cur-content-file { display: inline-flex; max-width: 100%; } /* ------------------------------------------------------------ Trennlinie ------------------------------------------------------------ */ .cur-content-separator { border: 0; border-top: 1px solid color-mix(in srgb, var(--cur-color-text, #111827) 18%, transparent); margin: 1.5rem 0; } /* ------------------------------------------------------------ Bilder und Videos aus der Mediathek ------------------------------------------------------------ */ .cur-content-media { width: min(var(--cur-media-width, 100%), 100%); max-width: 100%; margin: 1.25rem 0; } .cur-content-media--align-left { margin-left: 0; margin-right: auto; } .cur-content-media--align-center { margin-left: auto; margin-right: auto; } .cur-content-media--align-right { margin-left: auto; margin-right: 0; } .cur-content-media--float-left { float: left; margin: .35rem 1.35rem .35rem 0; shape-outside: inset(0 round var(--cur-radius-md, 10px)); shape-margin: .35rem; } .cur-content-media--float-right { float: right; margin: .35rem 0 .35rem 1.35rem; shape-outside: inset(0 round var(--cur-radius-md, 10px)); shape-margin: .35rem; } .cur-content-media--float-left + p, .cur-content-media--float-right + p, .cur-content-media--float-left + h2, .cur-content-media--float-right + h2, .cur-content-media--float-left + h3, .cur-content-media--float-right + h3 { margin-top: 0; } .cur-content-flow::after, .entry-content::after, .cur-editor-canvas::after { content: ""; display: table; clear: both; } .cur-content-media--small { --cur-media-width: 35%; } .cur-content-media--medium { --cur-media-width: 60%; } .cur-content-media--large { --cur-media-width: 82%; } .cur-content-media--full { --cur-media-width: 100%; } .cur-content-media img, .cur-content-media video { display: block; width: 100%; max-width: 100%; height: auto; max-height: 70vh; object-fit: contain; border-radius: var(--cur-radius-md, 10px); } .cur-content-media figcaption { margin-top: .45rem; color: var(--cur-color-muted, #64748b); font-size: .95em; line-height: 1.45; } /* Ausrichtung innerhalb figcaption – unabhängig vom Bild */ .cur-content-media figcaption .cur-text-left, .cur-content-media figcaption .cur-text-center, .cur-content-media figcaption .cur-text-right { display: block; } .cur-content-media figcaption .cur-text-left { text-align: left; } .cur-content-media figcaption .cur-text-center { text-align: center; } .cur-content-media figcaption .cur-text-right { text-align: right; } .cur-content-media__lightbox { display: block; color: inherit; text-decoration: none; cursor: zoom-in; } .cur-content-media__lightbox:hover { color: inherit; text-decoration: none; } /* ------------------------------------------------------------ Medien-Ausrichtung und Textumfluss ------------------------------------------------------------ */ .cur-content-media--align-left { margin-left: 0; margin-right: auto; } .cur-content-media--align-center { margin-left: auto; margin-right: auto; } .cur-content-media--align-right { margin-left: auto; margin-right: 0; } .cur-content-media--float-left { float: left; clear: none; margin: .35rem 1.35rem .35rem 0; shape-outside: inset(0 round var(--cur-radius-md, 10px)); shape-margin: .35rem; } .cur-content-media--float-right { float: right; clear: none; margin: .35rem 0 .35rem 1.35rem; shape-outside: inset(0 round var(--cur-radius-md, 10px)); shape-margin: .35rem; } .cur-content-media--float-left + p, .cur-content-media--float-right + p, .cur-content-media--float-left + .cur-content-float-text, .cur-content-media--float-right + .cur-content-float-text, .cur-content-media--float-left + h2, .cur-content-media--float-right + h2, .cur-content-media--float-left + h3, .cur-content-media--float-right + h3 { margin-top: 0; } .cur-content-float-text { margin-top: 0; } .cur-content-flow::after, .entry-content::after { content: ""; display: table; clear: both; } /* ------------------------------------------------------------ Tabellen ------------------------------------------------------------ */ .cur-content-table-wrap { width: 100%; max-width: 100%; overflow-x: auto; margin: 1.35rem 0; -webkit-overflow-scrolling: touch; border-radius: var(--cur-maincard-radius); border: 1px solid color-mix(in srgb, var(--cur-color-text, #111827) 18%, transparent); overflow-y: hidden; } .cur-content-table { --cur-table-head-color: var(--cur-color-link, #503020); width: 100%; max-width: 100%; border-collapse: collapse; background: var(--cur-color-bg-card, #fff); color: var(--cur-color-text, #1f2937); } .cur-content-table caption { caption-side: top; text-align: left; font-weight: 700; color: var(--cur-color-heading, var(--cur-color-text, #111827)); padding: .25rem 0 .65rem; } .cur-content-table th, .cur-content-table td { padding: .75rem .9rem; vertical-align: top; border: 1px solid color-mix(in srgb, var(--cur-color-text, #111827) 18%, transparent); } .cur-content-table th { font-weight: 700; background: var(--cur-table-head-color, var(--cur-color-link, #503020)); color: #fff; border-color: color-mix(in srgb, var(--cur-table-head-color, var(--cur-color-link, #503020)) 42%, transparent); } .cur-content-table td { background: var(--cur-color-bg-card, #fff); } .cur-content-table--full { width: 100%; } .cur-content-table--bordered th, .cur-content-table--bordered td { border: 1px solid color-mix(in srgb, var(--cur-color-text, #111827) 22%, transparent); } .cur-content-table--striped tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--cur-table-head-color, var(--cur-color-link, #503020)) 7%, #fff); } .cur-content-table--compact th, .cur-content-table--compact td { padding: .45rem .6rem; } .cur-content-table--plain th, .cur-content-table--plain td { border-color: transparent !important; border-bottom-color: transparent !important; } .cur-content-table--plain th { background: var(--cur-table-head-color, var(--cur-color-link, #503020)); color: #fff; } .cur-content-table--plain tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--cur-table-head-color, var(--cur-color-link, #503020)) 5%, #fff); } /* ------------------------------------------------------------ Medien innerhalb Tabellen ------------------------------------------------------------ */ .cur-content-table :is(td, th) .cur-content-media { float: none !important; clear: none !important; width: min(var(--cur-media-width, 100%), 100%); max-width: 100%; margin-top: .65rem; margin-bottom: .65rem; shape-outside: none; shape-margin: 0; } .cur-content-table :is(td, th) .cur-content-media--small { --cur-media-width: 35%; } .cur-content-table :is(td, th) .cur-content-media--medium { --cur-media-width: 60%; } .cur-content-table :is(td, th) .cur-content-media--large { --cur-media-width: 82%; } .cur-content-table :is(td, th) .cur-content-media--full { --cur-media-width: 100%; } .cur-content-table :is(td, th) .cur-content-media :is(img, video) { width: 100%; max-width: 100%; } .cur-content-table :is(td, th) .cur-content-media__lightbox { display: block; cursor: zoom-in; } .cur-content-table :is(td, th) :is(.cur-content-media--align-left, .cur-content-media--float-left) { margin-left: 0; margin-right: auto; } .cur-content-table :is(td, th) .cur-content-media--align-center { margin-left: auto; margin-right: auto; } .cur-content-table :is(td, th) :is(.cur-content-media--align-right, .cur-content-media--float-right) { margin-left: auto; margin-right: 0; } /* ------------------------------------------------------------ Produktdetail · Editor-Texte absichern ------------------------------------------------------------ */ .cur-product-detail-short.entry-content, .cur-product-detail-description.entry-content, .cur-product-notice__content.entry-content { max-width: 100%; } .cur-product-detail-short.entry-content img, .cur-product-detail-description.entry-content img, .cur-product-notice__content.entry-content img, .cur-product-detail-short.entry-content video, .cur-product-detail-description.entry-content video, .cur-product-notice__content.entry-content video { max-width: 100%; height: auto; } /* ------------------------------------------------------------ Admin-Editor · nur wenn curatello.css auch dort geladen wird Stört das Frontend nicht, weil .cur-editor-canvas nur im Admin existiert. ------------------------------------------------------------ */ .cur-editor-canvas figure.cur-content-media { cursor: pointer; } .cur-editor-canvas figure.cur-content-media--video, .cur-editor-canvas figure.cur-content-media--video video, .cur-editor-canvas figure.cur-content-media--video source { max-width: 100%; } .cur-editor-canvas figure.cur-content-media--video video { pointer-events: none; display: block; width: 100%; height: auto; max-height: 70vh; object-fit: contain; } /* ------------------------------------------------------------ Mobile Feinheiten ------------------------------------------------------------ */ .cur-content-table-mobile { display: none; } @media (max-width: 768px) { .cur-content-media, .cur-content-media--small, .cur-content-media--medium, .cur-content-media--large, .cur-content-media--full { width: 100%; --cur-media-width: 100%; } .cur-content-media--float-left, .cur-content-media--float-right { float: none; clear: none; margin: 1.25rem 0; shape-outside: none; shape-margin: 0; } .cur-content-media--align-left, .cur-content-media--align-center, .cur-content-media--align-right { margin-left: 0; margin-right: 0; } .cur-content-button { width: 100%; } .cur-content-table-wrap { overflow: visible; border: 0; } .cur-content-table.cur-content-table--responsive { display: none; } .cur-content-table-mobile { display: block; width: 100%; } .cur-content-table-mobile__card { overflow: hidden; margin: 0 0 1rem; border: 1px solid color-mix(in srgb, var(--cur-table-head-color, var(--cur-color-link, #503020)) 22%, transparent); border-radius: var(--cur-maincard-radius); background: var(--cur-color-bg-card, #fff); } .cur-content-table-mobile__title { padding: .85rem 1rem; background: var(--cur-table-head-color, var(--cur-color-link, #503020)); color: #fff; font-weight: 800; line-height: 1.25; } .cur-content-table-mobile__item { padding: .85rem 1rem; border-bottom: 1px solid color-mix(in srgb, var(--cur-table-head-color, var(--cur-color-link, #503020)) 14%, transparent); } .cur-content-table-mobile__item:nth-child(even) { background: color-mix(in srgb, var(--cur-table-head-color, var(--cur-color-link, #503020)) 6%, #fff); } .cur-content-table-mobile__item:last-child { border-bottom: 0; } .cur-content-table-mobile__item > :first-child { margin-top: 0; } .cur-content-table-mobile__item > :last-child { margin-bottom: 0; } .cur-content-table-mobile__item .cur-content-media { width: 100%; max-width: 100%; margin: .35rem 0; } .cur-content-table-mobile__item .cur-content-media img, .cur-content-table-mobile__item .cur-content-media video { width: 100%; max-width: 100%; } } /* Curatello Editor · Frontend-Ausgabe aus Seitengestalter/Fallback */ .cur-block--richtext .front-page-intro, .cur-block--fallback-body .front-page-intro{ overflow:hidden; } .cur-block--richtext-wide .front-page-intro{ max-width: min(100%, 980px); margin-left:auto; margin-right:auto; } .cur-block--richtext-full .front-page-intro{ max-width:100%; } .cur-block--text-left .entry-content{ text-align:left; } .cur-block--text-center .entry-content{ text-align:center; } .cur-block--text-right .entry-content{ text-align:right; } .cur-block--text-center .entry-content ul, .cur-block--text-center .entry-content ol, .cur-block--text-right .entry-content ul, .cur-block--text-right .entry-content ol{ display:inline-block; text-align:left; } .front-page-intro .entry-content.cur-content-flow p{ margin:0 0 1rem; } .front-page-intro .entry-content.cur-content-flow > *:last-child{ margin-bottom:0; } /* ------------------------------------------------------------ Newsletter-Anmeldeformular ------------------------------------------------------------ */ .cur-newsletter-signup { max-width: 480px; padding: 1.5rem; border-radius: 14px; background: var(--cur-color-bg-card, #fff); border: 1px solid color-mix(in srgb, var(--cur-color-text, #111827) 10%, transparent); } .cur-newsletter-signup__title { margin: 0 0 1rem; font-size: 1.25rem; } .cur-newsletter-signup__message { margin-bottom: 1rem; padding: .75rem 1rem; border-radius: 10px; font-size: .95rem; } .cur-newsletter-signup__message--ok { background: #d1f6df; color: #0a7a34; } .cur-newsletter-signup__message--error { background: #ffe1e1; color: #b42318; } .cur-newsletter-signup__row { display: flex; gap: .75rem; flex-wrap: wrap; } .cur-newsletter-signup__row .cur-newsletter-signup__field { flex: 1 1 160px; } .cur-newsletter-signup__field { margin-bottom: .9rem; } .cur-newsletter-signup__field label { display: block; margin-bottom: .3rem; font-size: .85rem; font-weight: 600; } .cur-newsletter-signup__field input { width: 100%; padding: .55rem .75rem; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--cur-color-text, #111827) 22%, transparent); font-size: .95rem; } .cur-newsletter-signup__submit { display: inline-block; padding: .65rem 1.4rem; border-radius: var(--cur-newsletter-radius); border: var(--cur-newsletter-border); background: var(--cur-newsletter-background); color: var(--cur-newsletter-txt-color); font-weight: 600; cursor: pointer; } .cur-newsletter-signup__submit:hover { background: var(--cur-newsletter-background-hover); color: var(--cur-newsletter-txt-color-hover); opacity: .9; } /* ------------------------------------------------------------ Newsletter-Abmeldeformular im Footer (kompakt) ------------------------------------------------------------ */ .cur-newsletter-footer-unsub { margin-top: .75rem; padding-top: .75rem; border-top: 1px solid rgba(255,255,255,.12); text-align: center; } .cur-newsletter-footer-unsub__label { display: block; font-size: .8rem; opacity: .75; margin-bottom: .4rem; } .cur-newsletter-footer-unsub__row { display: inline-flex; gap: .5rem; flex-wrap: wrap; justify-content: center; } .cur-newsletter-footer-unsub__row input { padding: .4rem .7rem; border-radius: 6px; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); color: inherit; font-size: .85rem; min-width: 200px; } .cur-newsletter-footer-unsub__row input::placeholder { color: inherit; opacity: .6; } .cur-newsletter-footer-unsub__row button { padding: .4rem 1rem; border-radius: 6px; border: 1px solid rgba(255,255,255,.3); background: transparent; color: inherit; font-size: .85rem; cursor: pointer; } .cur-newsletter-footer-unsub__row button:hover { background: rgba(255,255,255,.1); } .cur-newsletter-footer-unsub__message { font-size: .85rem; margin: 0; } .cur-newsletter-footer-unsub__message--ok { color: #4ade80; } .cur-newsletter-footer-unsub__message--error { color: #f87171; } /* ------------------------------------------------------------ Newsletter-Anmeldeformular in der Sidebar (Widget) ------------------------------------------------------------ */ .widget-newsletter-signup .cur-newsletter-signup { max-width: 100%; padding: 1.1rem 1rem; border-radius: 10px; } .widget-newsletter-signup .cur-newsletter-signup__title { font-size: 1rem; margin-bottom: .75rem; } .widget-newsletter-signup .cur-newsletter-signup__row { flex-direction: column; gap: .5rem; } .widget-newsletter-signup .cur-newsletter-signup__row .cur-newsletter-signup__field { flex: none; width: 100%; } .widget-newsletter-signup .cur-newsletter-signup__field input { width: 100%; box-sizing: border-box; } .widget-newsletter-signup .cur-newsletter-signup__submit { width: 100%; margin-top: .25rem; } .widget-search-box .cur-sidebar-search__btn { padding: 9px 16px; border: var(--cur-search-box-border); border-radius: var(--cur-search-box-radius); background: var(--cur-search-box-bg); color: var(--cur-search-box-color); font-size: var(--cur-search-box-font-size); box-shadow: var(--cur-search-box-shadow); cursor: pointer; white-space: nowrap; } .widget-search-box .cur-sidebar-search__btn:hover { background: var(--cur-search-box-bg-hover); color: var(--cur-search-box-color-hover); opacity: 0.9; } .widget-search-box .cur-sidebar-search__row { display: flex; gap: 6px; } .widget-search-box .cur-sidebar-search__input { flex: 1; min-width: 0; padding: 9px 12px; border: 1px solid rgba(0,0,0,0.15); border-radius: 6px; font-size: 14px; outline: none; } .widget-search-box .cur-sidebar-search__input:focus { border-color: #0000FF; }