/* ============================================================ 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; } /* ============================================================ Curatello · :root Design Tokens · vollständig gruppiert Hinweis: Variablennamen und Werte wurden bewusst nicht korrigiert. ============================================================ */ :root { /* ============================================================ 01 · BASIS ============================================================ */ /* @group 01 · Basis */ /* @subgroup Schrift · Global */ /* @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 Hintergrund · Seite */ /* @label Seitenhintergrund */ --cur-color-bg-page: #e9e9e9; /* @label Content Hintergrund unter Hero Bild */ --cur-color-bg-site: #e9e9e9; /* @subgroup Cards · Global */ /* @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 10px 20px #ffd6d6B3; /* @subgroup Farben · Text */ /* @label Fliesstext global */ --cur-color-text-main: #444444; /* @label Titel global */ --cur-font-color: #444444; /* @label Widget Titel Farbe */ --cur-widget-title-color: var(--cur-font-color); /* @label Color text muted */ --cur-color-text-muted: #444444; /* @subgroup Farben · Links */ /* @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; /* ============================================================ 02 · HEADER & NAVIGATION ============================================================ */ /* @group 02 · Header & Navigation */ /* @subgroup Allgemein · Browser Icon */ /* @label Favicon */ --cur-favicon-url: url('/assets/img/favicon.png'); /* @subgroup Header · Verhalten */ /* @label loslösen mit unset */ --cur-header-navigation-sticky: sticky; /* @label Header Breite */ --cur-header-width: 100%; /* @label Header normale Höhe */ --cur-header-height: 125px; /* @label Header Höhe beim Scrollen */ --cur-header-height-scrolled: 82px; /* @label Header Innenabstand normal */ --cur-header-inner-padding: 0 10px 0 40px; /* @label Header Innenabstand beim Scrollen */ --cur-header-inner-padding-scrolled: 0 10px 0 40px; /* @label Header Abstand Navigation */ --cur-header-inner-gap: 40px; /* @label Branding Abstand */ --cur-header-branding-gap: 14px; /* @label Header rechte Seite Abstand */ --cur-header-right-gap: 16px; /* @label Logo Skalierung beim Scrollen */ --cur-site-logo-scale-scrolled: 0.72; /* @label Seitentitel Skalierung beim Scrollen */ --cur-site-title-scale-scrolled: 0.82; /* @label Header Animation */ --cur-header-transition: 0.22s ease; /* @subgroup Header · 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 Header · 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 Header · Logo */ /* @label Logo Header */ --cur-site-logo-image: url('/assets/img/market-share.png'); /* @label Logo Header Breite */ --cur-site-logo-width: 86px; /* @label Logo Header Höhe */ --cur-site-logo-height: 86px; /* @subgroup Header · Hintergrund */ /* @label Header Nav Hintergrund Verlauf von */ --cur-header-gradient-from: #ffffff; /* @label Header Nav Hintergrund Verlauf bis */ --cur-header-gradient-to: #C0C0C0; /* @label Header */ --cur-header-border-bottom: 1px solid #444444; /* @label Navi Header */ --cur-header-shadow: 0 1px 3px #000000FF; /* @subgroup Navigation · Farben & Aktiv */ /* @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 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; /* @label Header Nav Link Activ */ --cur-nav-active-color: #ffffff; /* @subgroup Navigation · Schrift */ /* @label Navigation Links */ --cur-nav-font-size: 15px; /* @label Navigation Titel Fett */ --cur-nav-font-weight: 600; /* @subgroup Mobile Navigation */ /* @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; /* @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 Radius */ --cur-mobile-nav-toggle-radius: 0px; /* ============================================================ 03 · FOOTER & DEKO ============================================================ */ /* @group 03 · Footer & Deko */ /* @subgroup Footer · Logo */ /* @label Logo Footer */ --cur-site-footer-logo-image: url('/assets/img/market-share.png'); /* @label Logo Footer Breite */ --cur-footer-logo-widht-size: 40px; /* @label Logo Footer Höhe */ --cur-footer-logo-height-size: 40px; /* @subgroup XMAS · Obere Ecken */ /* @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: -18px; /* @label Obere Ecke Rechts Abstand rechts */ --cur-xmas-corner-top-right-right: -18px; /* @subgroup XMAS · Untere Ecken */ /* @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; /* @subgroup Footer · 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 TOP */ --cur-footer-border-top: var(--cur-header-border-bottom); /* @label Footer */ --cur-footer-shadow: var(--cur-header-shadow); /* @label Footer Breite */ --cur-site-footer: var(--cur-header-width); /* @subgroup Footer · 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 Footer · Nav 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 Footer · Nav Links 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; /* ============================================================ 04 · HERO ============================================================ */ /* @group 04 · Hero */ /* @subgroup Hero · 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 Hero · Bild */ /* @label Hero Bild Schatten */ --cur-hero-image-shadow: var(--cur-maincard-shadow); /* @label Hero Bild Schatten */ --cur-hero-image-radius: var(--cur-maincard-radius); /* @label Hintergrund Herobild */ --cur-hero-bg: #555555; /* @subgroup Hero · Subtitel */ /* @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 Hero · 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); /* ============================================================ 05 · LAYOUT & BREITEN ============================================================ */ /* @group 05 · Layout & Breiten */ /* @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 Seite */ /* @label Breite der Seite maximal */ --cur-page-max-width: 1400px; /* @label Inhaltsblock maximal breite */ --cur-content-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; /* @subgroup Lageplan · 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%; /* ============================================================ 06 · GLOBALE ELEMENTE ============================================================ */ /* @group 06 · Globale Elemente */ /* @subgroup Formular · Basis */ /* @label Formular Card */ --cur-form-card-bg: var(--cur-maincard-bg); /* @label Formular Inputfield */ --cur-form-input-field-bg: #ffffff; /* @label Formular Textarea */ --cur-form-textarea-bg: #ffffff; /* @label Form card border */ --cur-form-card-border: var(--cur-maincard-border); /* @label Form card shadow */ --cur-form-card-shadow: var(--cur-maincard-shadow); /* @label Form card radius */ --cur-form-card-radius: var(--cur-maincard-radius); /* @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: 1px solid #d4d4d4; /* @label Form control radius */ --cur-form-control-radius: var(--cur-maincard-radius); /* @label Form control shadow */ --cur-form-control-shadow: none; /* @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(0,0,0,0.06); /* @subgroup Modal · Global */ /* @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; /* ============================================================ 07 · MODULE ============================================================ */ /* @group 07 · Module */ /* @subgroup Highlighter & Aufmacher */ /* @label Highlighter Button Text */ /* @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); /* @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 News Modul */ /* @label News Bage Aktuelles */ --cur-news-tab-text-published: "Aktuelle News"; /* @label News Bage Archiv */ --cur-news-tab-text-archived: "Archiv"; /* @label News Hintergrund Sidebar */ --cur-widget-news-bg: var(--cur-maincard-bg); /* @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 Card Hintergrund Index Seite */ --cur-news-card-index-hintergrund: 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 News Badge Radius */ --cur-news-badge-published-radius: 0px; /* @label Sidebar News Schatten */ --cur-sidebar-card-shadow: var(--cur-maincard-shadow); /* @label News Badge */ --cur-news-badge-font-size: 11px; /* @label Widget News Fliesstext */ --cur-news-sidebar-size: var(--cur-font-size-base); /* @label News Text Aktuell */ --cur-news-badge-published-color: #ffffff; /* @label News Text Archiv */ --cur-news-badge-archived-color: #ffffff; /* @subgroup Cookie Modul */ /* @label Abdunklung */ --cur-cookie-overlay-bg: #000000B3; /* @label Hintergrund */ --cur-cookie-modal-bg: #ffffff; /* @label Cookie modal border */ --cur-cookie-modal-border: 1px solid #444444; /* @label Cookie modal shadow */ --cur-cookie-modal-shadow: 0 10px 20px #ffd6d6B3; /* @label Cookie modal radius */ --cur-cookie-modal-radius: 18px; /* @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: #374151; /* @label Cookie modal muted color */ --cur-cookie-modal-muted-color: #6b7280; /* @label Cookie group bg */ --cur-cookie-group-bg: #f8fafc; /* @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; /* @label Cookie toggle accent */ --cur-cookie-toggle-accent: #f36e34; /* @label Cookie manage bg */ --cur-cookie-manage-bg: #111827; /* @label Cookie manage color */ --cur-cookie-manage-color: #ffffff; /* @label Cookie manage border */ --cur-cookie-manage-border: 1px solid #111827; /* @label Cookie manage radius */ --cur-cookie-manage-radius: 999px; /* ============================================================ 08 · PRODUKTKATALOG ============================================================ */ /* @group 08 · Produktkatalog */ /* @subgroup Katalog · Texte */ /* @label Überschrift Produkt Katalog */ --cur-product-catalog-headline: "Produktkatalog"; /* @label Badge Produkte */ --cur-products-published: "Produkte"; /* @label Badge veröffentlicht */ --cur-products-published-1: "veröffentlicht"; /* @label Produkt suchen */ --cur-products-catalog-search: "Produkt suchen"; /* @label Überschrift Kategorien */ --cur-products-section-title-headline: "Kategorien"; /* @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: #444444; /* @subgroup Katalog · Count Box */ /* @label Produkt Count Texte Grösse */ --cur-products-count-txt: 13px; /* @label Produkt Count Texte Farbe */ --cur-products-count-color: #444444; /* @label Produkt Count Box Hintergrund */ --cur-products-count-bg: #C0C0C0; /* @label Produkt Count Box Texte Fett */ --cur-products-count-weight: 700; /* @label Produkt Count Box Radius */ --cur-products-count-radius: var(--cur-maincard-radius); /* @label Produkt Count Box Rahmen */ --cur-products-count-border: var(--cur-maincard-border); /* @label Produkt Count Box Hintergrund */ --cur-product-category-card-count-background: var(--cur-products-count-bg); /* @label Produkt Count Box Rahmen */ --cur-product-category-card-count-border: var(--cur-products-count-border); /* @label Produkt Count Texte Farbe */ --cur-product-category-card-count-color: var(--cur-products-count-color); /* @label Produkt Count Box Radius */ --cur-product-category-card-count-border-radius: var(--cur-products-count-radius); /* @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-products-count-weight); /* @label Produkt Count Box Texte Still */ --cur-products-card-txt-muted-color: #C0C0C0; /* @subgroup Katalog · Suche */ /* @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: #111827; /* @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: #f8fafc; /* @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: #444444; /* @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: inset 0 1px 2px #0f172a0a; /* @label Products input bg */ --cur-products-input-bg: #ffffff; /* @label Products input border */ --cur-products-input-border: #d8d8d8; /* @label Products input focus border */ --cur-products-input-focus-border: #1f1f1f; /* @subgroup Produktdetail · 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; /* @subgroup Katalog · Kategorien Index */ /* @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 Produkt Titel Farbe */ --cur-products-heading: #222222; /* @label Kategorie Produkt muted Text Farbe */ --cur-products-muted: #777777; /* @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 Card Hintergrund Media */ --cur-products-cat-bg: var(--cur-maincard-bg); /* @label Kategorie Box Radius */ --cur-products-toolbar-radius: var(--cur-maincard-radius); /* @label Products category image height */ --cur-products-category-image-height: 120px; /* @subgroup Katalog · Produktkarten */ /* @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 Kategorie Box Radius */ --cur-products-section-title-headline-border-bottom: 1px solid #C0C0C0; /* @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); /* @label Überschrift Grösse */ --cur-products-image-height: 185px; /* @label Kategorie Produkt Rahmen Radius */ --cur-products-card-radius: var(--cur-maincard-radius); /* @label Products badge bg */ --cur-products-badge-bg: #f1f1f1; /* @label Products badge text */ --cur-products-badge-text: #555555; /* @label Products price color */ --cur-products-price-color: #222222; /* @label Products price size */ --cur-products-price-size: 16px; /* @label Products price weight */ --cur-products-price-weight: 700; /* @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: #444444; /* @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 Produktdetail */ /* @label Product detail page bg */ --cur-product-detail-page-bg: #f5f5f5; /* @label Product detail shell width */ --cur-product-detail-shell-width: 1120px; /* @label Product detail card bg */ --cur-product-detail-card-bg: #ffffff; /* @label Product detail card radius */ --cur-product-detail-card-radius: 18px; /* @label Product detail card border */ --cur-product-detail-card-border: rgba(15, 23, 42, 0.08); /* @label Product detail card shadow */ --cur-product-detail-card-shadow: 0 12px 34px rgba(15, 23, 42, 0.07); /* @label Product detail muted */ --cur-product-detail-muted: #6b7280; /* @label Product detail soft */ --cur-product-detail-soft: #f8fafc; /* @label Product detail image bg */ --cur-product-detail-image-bg: #f1f5f9; /* @label Product detail main image height */ --cur-product-detail-main-image-height: 390px; /* @label Product detail thumb size */ --cur-product-detail-thumb-size: 76px; /* ============================================================ 09 · Lagepläne ============================================================ */ /* @group 09 · Lagepläne */ /* @subgroup Lagepläne Into*/ /* @label Intro ausbelenden */ --cur-siteplan-intro: var(--cur-galery-display-siteheader); /* @subgroup Lagepläne Texte Site Kartenübersicht */ /* @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 Lagepläne Card HG Rahman Radius Schatten */ /* @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); /* @label Siteplan stage card bg */ --cur-siteplan-stage-card-bg: #ffffff; /* @label Siteplan stage card border */ --cur-siteplan-stage-card-border: 1px solid rgba(0, 0, 0, 0.12); /* @label Siteplan stage card radius */ --cur-siteplan-stage-card-radius: 0px; /* @label Siteplan stage card shadow */ --cur-siteplan-stage-card-shadow: 0 8px 22px rgba(0, 0, 0, 0.10); /* @label Siteplan info card bg */ --cur-siteplan-info-card-bg: #ffffff; /* @label Siteplan info card border */ --cur-siteplan-info-card-border: 1px solid rgba(0, 0, 0, 0.12); /* @label Siteplan info card radius */ --cur-siteplan-info-card-radius: 0px; /* @label Siteplan info card shadow */ --cur-siteplan-info-card-shadow: 0 8px 22px rgba(0, 0, 0, 0.10); /* @label Siteplan toolbar margin bottom */ --cur-siteplan-toolbar-margin-bottom: 18px; /* @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; /* @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); /* @label Siteplan sidebar card bg */ --cur-siteplan-sidebar-card-bg: #ffffff; /* @label Siteplan sidebar card border */ --cur-siteplan-sidebar-card-border: 1px solid #d4d4d4; /* @label Siteplan sidebar card shadow */ --cur-siteplan-sidebar-card-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); /* @label Siteplan sidebar card radius */ --cur-siteplan-sidebar-card-radius: 0px; /* @label Siteplan stand link size */ --cur-siteplan-stand-link-size: 14px; /* @label Siteplan muted size */ --cur-siteplan-muted-size: 14px; /* ============================================================ 10 · Galerie ============================================================ */ /* @group 10 · Galerie */ /* @subgroup Galerie Modul */ /* @label Lightbox Hintergrund gratiniert */ --cur-gallery-lightbox-background: radial-gradient( circle at center, #222222ff, #00000033); /* @label intro ausblenden */ --cur-galery-display-siteheader: block; /* @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; /* @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); /* @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); /* @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; /* @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; /* ============================================================ 11 · AUSSTELLER ============================================================ */ /* @group 11 · Aussteller */ /* @subgroup Aussteller · Index · Kopfbereich */ /* @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 Aussteller · Suche Input Feld*/ /* @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; /* @subgroup Aussteller · 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: #ffffff; /* @label Aussteller Suche Button Textfarbe */ --cur-exh-search-button-color: #444444; /* @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: #444444; /* @label Aussteller Suche Button Textfarbe Hover */ --cur-exh-search-button-color-hover: #ffffff; /* @label Aussteller Suche Hinweis Größe */ --cur-exh-search-hint-size: 13px; /* @label Aussteller Suche Hinweis Farbe */ --cur-exh-search-hint-color: var(--cur-color-text-muted); /* @subgroup Aussteller · Cards */ /* @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); /* @subgroup Aussteller · Cards 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; /* @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 Aussteller · Detail · Layout */ /* @label Aussteller Detail Seitenbreite */ --cur-exh-detail-max-width: var(--cur-exh-index-max-width); /* @subgroup Aussteller · Detail · Cards */ /* @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); /* @label Aussteller Detail Header Fett */ --cur-exh-detail-header-weight: 600; /* @subgroup Aussteller · Detail · Galerie */ /* @label Aussteller Thumb Rahmen */ --cur-exh-thumb-border: 1px dotted #444444;; /* @subgroup Aussteller · Detail · Videos */ /* @label Aussteller Video Hintergrund */ --cur-exh-video-bg: var(--cur-maincard-bg); /* @label Aussteller Video Rahmen */ --cur-exh-video-border: 1px dotted #444444; /* @subgroup Aussteller · 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; /* @label Aussteller Social Links Ausrichtung */ --cur-exh-social-links-justify: center; /* @label Aussteller Social Link Radius */ --cur-exh-social-link-radius: 999px; /* @label Aussteller Social Link Hintergrund */ --cur-exh-social-link-bg: #f5f5f5; /* @label Aussteller Social Link Hintergrund Hover */ --cur-exh-social-link-bg-hover: #ececec; /* @label Aussteller Social Link Größe */ --cur-exh-social-link-size: 13px; /* @label Aussteller Social Link Farbe */ --cur-exh-social-link-color: var(--cur-color-text-main); /* @label Aussteller Social Link Farbe Hover */ --cur-exh-social-link-color-hover: var(--cur-color-link-hover); /* @label Aussteller Social Icon Größe */ --cur-exh-social-icon-size: 14px; /* @subgroup Aussteller · Detail · Formular */ /* @label Aussteller Formular Radius */ --cur-exh-detail-form-radius: 0px; /* @label Aussteller Formular Breite */ --cur-exh-detail-form-max-width: 90%; /* @subgroup Aussteller · Logo Detail */ /* @label Aussteller Logo Detail Breite */ --cur-exh-logo-width: 120px; /* ============================================================ 12 · BUTTONS ============================================================ */ /* @group 12 · Buttons */ /* @subgroup Produkt Button */ /* @label Produkt Button "Suchen */ --cur-products-search-button-send: "Suchen"; /* @label Katalog Suche Button Radius */ --cur-products-search-button-radius: var(--cur-maincard-radius); /* @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: #ffffff; /* @label Products search button txt color */ --cur-products-search-button-txt-color: #444444; /* @label Products search button border */ --cur-products-search-button-border: 1px solid #444444; /* @label Products button bg */ --cur-products-button-bg: #e9e9e9; /* @label Products button text */ --cur-products-button-text: #2f2f2f; /* @label Products button border */ --cur-products-button-border: #1f1f1f; /* @label Products button hover bg */ --cur-products-button-hover-bg: #1f1f1f; /* @label Products button hover text */ --cur-products-button-hover-text: #ffffff; /* @subgroup Cookie Buttons */ /* @label Cookie btn radius */ --cur-cookie-btn-radius: 12px; /* @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: #f36e34; /* @label Cookie btn primary color */ --cur-cookie-btn-primary-color: #ffffff; /* @label Cookie btn primary border */ --cur-cookie-btn-primary-border: 1px solid #f36e34; /* @label Cookie btn secondary bg */ --cur-cookie-btn-secondary-bg: #ffffff; /* @label Cookie btn secondary color */ --cur-cookie-btn-secondary-color: #111827; /* @label Cookie btn secondary border */ --cur-cookie-btn-secondary-border: 1px solid rgba(17, 24, 39, 0.14); /* @label Cookie btn ghost bg */ --cur-cookie-btn-ghost-bg: #f3f4f6; /* @label Cookie btn ghost color */ --cur-cookie-btn-ghost-color: #111827; /* @label Cookie btn ghost border */ --cur-cookie-btn-ghost-border: 1px solid rgba(17, 24, 39, 0.08); /* @subgroup Highlighter Button */ /* @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; /* @subgroup News Button */ /* @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; /* @subgroup Formular Button */ /* @label 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 Lageplan Button */ /* @label Siteplan btn font size */ --cur-siteplan-btn-font-size: 13px; /* @label Siteplan btn bg */ --cur-siteplan-btn-bg: #ffffff; /* @label Siteplan btn bg hover */ --cur-siteplan-btn-bg-hover: #f7f7f7; /* @label Siteplan btn border */ --cur-siteplan-btn-border: #d4d4d4; /* @label Siteplan btn color */ --cur-siteplan-btn-color: #333333; /* @label Siteplan btn radius */ --cur-siteplan-btn-radius: 0px; /* @label Siteplan btn shadow */ --cur-siteplan-btn-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); /* ============================================================ 13 · 404 Seite ============================================================ */ /* @group 13 · 404 Seite Cards*/ /* @subgroup 404 Texte */ /* @label 404 Fliessext Farbe */ --cur-error-title-color: #444444; /* @label 404 Fliessext Grösse */ --cur-error-title-size: 16px; /* @label 404 Fliessext Fett */ --cur-error-title-weight: 700; --cur-error-text-color: #444444; --cur-error-text-size: 16px; /* @subgroup 404 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-erro-shadow: var(--cur-maincard-shadow); /* ============================================================ 14 · SPEZIALBEREICHE ============================================================ */ /* @group 14 · Spezialbereiche */ /* @subgroup Noch prüfen */ /* @label Text Farbe */ --cur-form-text: #444444; /* ============================================================ 15 · Anfahrt · Routenplaner · ============================================================ */ /* @subgroup Routenplaner · 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 Routenplaner · 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 Schatten */ --cur-route-destination-text-color: var(--cur-main); /* @label Zielbox Text Farbe */ --cur-route-planner-ziel-text-color: #444444; /* @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 Routenplaner · Formulare */ /* @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 Textgrösse */ --cur-route-field-font-size: 16px; /* @subgroup Routenplaner · Vorschläge Box */ /* @label Vorschlagsbox Hintergrund */ --cur-route-suggest-bg: #b7ead9; /* @label Vorschlagsbox Rahmen */ --cur-route-suggest-border: var(--cur-maincard-radius); /* @label Vorschlagsbox Radius */ --cur-route-suggest-radius: var(--cur-maincard-radius); /* @label Vorschlagsbox Schatten */ --cur-route-suggest-shadow: var(--cur-maincard-shadow); /* @subgroup Routenplaner · Vorschläge Box Titel */ /* @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; /* @subgroup Routenplaner · Vorschläge Box Header */ /* @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; /* @subgroup Routenplaner · Vorschläge Box Text*/ /* @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; /* @subgroup Routenplaner · Vorschläge Box Hover */ /* @label Vorschlag Box Hintergrund */ --cur-route-planner-suggestion-bg: #f7efe9; /* @label Vorschlag Box Hover Hintergrund */ --cur-route-suggest-hover-bg: #f7efe9; /* @label Vorschlag Box Aktiv Hintergrund */ --cur-route-suggest-active-bg: #f7efe9; /* @subgroup Routenplaner · Vorschläge Box Button */ /* @label Vorschlag Box Button */ --cur-planner-button-bg: #ffffff; --cur-palnner-button-text-size: 16px; --cur-planner-button-border: var(--cur-maincard-border); --cur-planner-card-radius: var(--cur-maincard-radius); --cur-planner-card-shadow: var(--cur-maincard-shadow); --cur-planner-button-hover-bg: #444444; --cur-planner-button-hover-text-color: #ffffff; } 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-heading-h1::before { content: var(--cur-product-catalog-headline); } .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, 102px); } } .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 var(--cur-header-transition, 0.22s ease), box-shadow var(--cur-header-transition, 0.22s ease), background-color var(--cur-header-transition, 0.22s ease); } @media (min-width: 992px) { .site-header { position: fixed; height: var(--cur-header-height, 125px); } .site-header.is-scrolled { height: var(--cur-header-height-scrolled, 82px); } } .site-header-inner { max-width: var(--cur-page-max-width); margin: 0 auto; padding: var(--cur-header-inner-padding, 0 10px 0 40px;); display: flex; justify-content: space-between; align-items: center; gap: var(--cur-header-inner-gap, 40px); box-sizing: border-box; transition: height var(--cur-header-transition, 0.22s ease), min-height var(--cur-header-transition, 0.22s ease), max-height var(--cur-header-transition, 0.22s ease), padding var(--cur-header-transition, 0.22s ease); } @media (min-width: 992px) { .site-header-inner { height: var(--cur-header-height, 102px); min-height: var(--cur-header-height, 102px); max-height: var(--cur-header-height, 102px); } .site-header.is-scrolled .site-header-inner { height: var(--cur-header-height-scrolled, 78px); min-height: var(--cur-header-height-scrolled, 78px); max-height: var(--cur-header-height-scrolled, 78px); padding: var(--cur-header-inner-padding-scrolled, 6px 10px 8px 40px); gap: var(--cur-header-inner-gap, 40px); } } /* Branding-Bereich */ .site-branding { display: flex; align-items: center; gap: var(--cur-header-branding-gap, 14px); min-width: 0; } .site-header.is-scrolled .site-branding { gap: var(--cur-header-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 var(--cur-header-transition, 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 var(--cur-header-transition, 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: 0; margin-top: 10px; 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; } /* 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: 30px; 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); } .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: 240px; padding: 26px 24px 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; } /* 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: 30px; } .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-widht-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%; } .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); } .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: 80px minmax(0,1fr); gap: 12px; padding: 14px 14px 12px; } @media (max-width: 480px) { .cur-exh-card-inner { grid-template-columns: 64px minmax(0,1fr); } .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: flex; align-items: center; justify-content: center; } .cur-exh-card-media img { max-width: 100%; max-height: 64px; object-fit: contain; } .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; gap: 2px; min-width: 0; } .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: 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: 4px 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); } .cur-exh-card-meta { margin: 6px 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); padding: 20px; text-align: center; grid-column: 1 / -1; } /* ============================ 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; /* padding: 0 var(--cur-content-padding-x);*/ display: grid; grid-template-columns: 2fr 1fr; /* links breiter, rechts schmaler */ grid-template-areas: "gallery videos" "text side"; gap: 28px; /* etwas mehr Abstand zwischen den Cards */ } /* 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 { grid-area: gallery; } .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 img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } /* 1. Zeile · VIDEOS (rechts) */ .cur-exh-detail-videos { grid-area: videos; 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 + Kontakt übereinander) */ .cur-exh-detail-main { grid-area: text; display: grid; grid-template-rows: auto auto; gap: 24px; /* Abstand zwischen Beschreibung & Kontakt */ } /* 2. Zeile · TEXT (links) */ .cur-exh-detail-text { /* wird innerhalb von .cur-exh-detail-main gestapelt */ } .cur-exh-detail-text-body { padding: 18px; } /* 2. Zeile · rechte Spalte (About + Form + Social übereinander) */ .cur-exh-detail-side { grid-area: side; display: grid; grid-template-rows: auto auto auto; gap: 24px; } .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-top: 10px; } .cur-exh-social-links { display: flex; flex-wrap: wrap; gap: 8px 12px; justify-content: center; /* nicht mehr ganz links kleben */ } .cur-exh-social-link { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: #f5f5f5; font-size: 13px; color: var(--cur-color-text-main); } .cur-exh-social-link i { font-size: 14px; } .cur-exh-social-link:hover, .cur-exh-social-link:focus { background: #ececec; color: var(--cur-color-link-hover); } /* 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; /* alles untereinander */ grid-template-areas: "gallery" "videos" "text" "side"; } .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 { display: flex; flex-wrap: wrap; gap: 8px 12px; justify-content: center; width: 120px; margin: auto; margin-top: 15px; } #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-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, 1px solid rgba(0,0,0,0.04)); box-shadow: var(--cur-maincard-shadow, 0 1px 3px rgba(0,0,0,0.06)); 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 { 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 { margin: 8px 2px 0; font-size: 13px; color: var(--cur-color-text-muted, #777); } /* 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, 1px solid rgba(0,0,0,0.04)); box-shadow: var(--cur-maincard-shadow, 0 1px 3px rgba(0,0,0,0.06)); 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: var(--cur-gallery-lightbox-background); } /* 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-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, #ffffff); border: var(--cur-cookie-modal-border, 1px solid rgba(17, 24, 39, 0.10)); border-radius: var(--cur-cookie-modal-radius, 18px); 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, 28px); font-weight: var(--cur-cookie-modal-title-weight, 700); line-height: 1.2; color: var(--cur-color-text-main, #111827); } .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, 12px); padding: 12px 18px; font-size: var(--cur-cookie-btn-font-size, 14px); font-weight: var(--cur-cookie-btn-font-weight, 600); 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, #f36e34); color: var(--cur-cookie-btn-primary-color, #ffffff); border: var(--cur-cookie-btn-primary-border, 1px solid #f36e34); } .cur-cookie-btn--secondary { background: var(--cur-cookie-btn-secondary-bg, #ffffff); color: var(--cur-cookie-btn-secondary-color, #111827); border: var(--cur-cookie-btn-secondary-border, 1px solid rgba(17, 24, 39, 0.14)); } .cur-cookie-btn--ghost { background: var(--cur-cookie-btn-ghost-bg, #f3f4f6); color: var(--cur-cookie-btn-ghost-color, #111827); border: var(--cur-cookie-btn-ghost-border, 1px solid rgba(17, 24, 39, 0.08)); } .cur-cookie-manage { position: fixed; left: 18px; bottom: 18px; z-index: calc(9999 - 1); border-radius: var(--cur-cookie-manage-radius, 999px); background: var(--cur-cookie-manage-bg, #111827); color: var(--cur-cookie-manage-color, #ffffff); border: var(--cur-cookie-manage-border, 1px solid #111827); 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, .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: var(--cur-siteplan-intro); } .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: var(--cur-siteplan-toolbar-margin-bottom); } .cur-siteplan-btn { border: 1px solid 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); } .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: #777777; } @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); } .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: 1px solid rgba(15, 23, 42, 0.08); border-radius: var(--cur-products-toolbar-radius); box-shadow: 0 14px 36px rgba(15, 23, 42, 0.07); } .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); } .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); } .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); 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 .cur-product-button--ghost { background: #ff00ff; } /* ============================================================ Breadcrumb Index / Kategorie / Detail ============================================================ */ .cur-products-breadcrumb, .cur-product-detail-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-bottom: 24px; color: var(--cur-products-muted); font-size: 13px; line-height: 1.5; } .cur-products-breadcrumb a, .cur-product-detail-breadcrumb a { color: var(--cur-products-text); text-decoration: none; } .cur-products-breadcrumb a:hover, .cur-product-detail-breadcrumb a:hover { text-decoration: underline; } /* ============================================================ 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: 118px minmax(0, 1fr); min-height: 118px; 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: flex; align-items: center; justify-content: center; min-height: 118px; padding: 18px; background: var(--cur-products-soft-bg); } .cur-product-category-card__media img { width: 100%; height: 100%; max-height: 82px; object-fit: contain; display: block; } .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: block; height: var(--cur-products-image-height); background: var(--cur-products-soft-bg); overflow: hidden; color: inherit; text-decoration: none; border-bottom: (--cur-products-border); } .cur-product-card__media img { width: 100%; height: 100%; object-fit: scale-down; display: block; transition: transform 0.25s ease; } .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: 999px; 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: underline; } .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: 2px solid 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-hover-bg); color: var(--cur-products-button-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 { background: var(--cur-product-detail-page-bg); max-width: var(--cur-products-max-width) !important; } .cur-product-detail-modern .site-content { background: var(--cur-product-detail-page-bg); } .cur-product-detail-page { width: auto; padding: 34px 18px 58px; } .cur-product-detail-shell { width: min(100%, var(--cur-product-detail-shell-width)); margin: 0 auto; } /* ============================================================ 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: #ffffff; border: 1px solid rgba(15, 23, 42, 0.08); border-radius: 0; box-shadow: 0 14px 36px rgba(15, 23, 42, 0.06); } .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); background: var(--cur-product-detail-image-bg); border: 1px solid rgba(15, 23, 42, 0.06); border-radius: 0; overflow: hidden; } .cur-product-main-image a { 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: #9ca3af; 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; } .cur-product-thumb { appearance: none; padding: 0; height: var(--cur-product-detail-thumb-size); display: block; background: var(--cur-product-detail-image-bg); border: 2px solid transparent; border-radius: 0; 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: #111827; box-shadow: 0 6px 18px rgba(15, 23, 42, 0.14); } .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: rgba(15, 23, 42, 0.06); color: #111827; 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: rgba(15, 23, 42, 0.10); text-decoration: none; } .cur-product-detail-modern .cur-product-detail-title { margin: 0 0 14px; color: #111827; font-size: clamp(30px, 3.4vw, 44px); line-height: 1.08; font-weight: 800; 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: 1px solid rgba(15, 23, 42, 0.08); } .cur-product-detail-modern .cur-product-detail-price { color: #111827; font-size: clamp(24px, 2.6vw, 34px); line-height: 1; font-weight: 800; letter-spacing: -0.02em; } .cur-product-detail-modern .cur-product-detail-unit { color: var(--cur-product-detail-muted); font-size: 15px; font-weight: 600; } .cur-product-detail-modern .cur-product-detail-short { margin: 0 0 18px; color: #4b5563; 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: rgba(248, 250, 252, 0.82); border: 1px solid rgba(15, 23, 42, 0.07); border-radius: 0; overflow: hidden; } .cur-product-facts div { display: grid; grid-template-columns: 135px minmax(0, 1fr); gap: 14px; padding: 11px 14px; border-bottom: 1px solid rgba(15, 23, 42, 0.07); } .cur-product-facts div:last-child { border-bottom: 0; } .cur-product-facts dt { color: #6b7280; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; } .cur-product-facts dd { margin: 0; color: #111827; font-size: 14px; font-weight: 600; } .cur-product-detail-actions { margin-top: 24px; } /* ============================================================ Produktdetail · Alle 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: #fff; border: 1px solid rgba(15, 23, 42, 0.08); border-radius: 0; box-shadow: 0 14px 36px rgba(15, 23, 42, 0.06); } .cur-product-section-kicker { margin-bottom: 7px; color: #4444; 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: 0px 0px 10px; border-bottom: 1px solid rgba(15, 23, 42, 0.08); color: #4444 !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: #374151; 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-products-card-bg); border: 1px solid var(--cur-products-border); border-radius: 0; 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: #111827; font-size: 17px; line-height: 1.3; font-weight: 800; } .cur-product-video-card p { margin: 0 18px 18px; color: #6b7280; 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-products-card-bg); border: 1px solid var(--cur-products-border); border-radius: 0; 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-products-text); 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: #f1f5f9; border-radius: 50%; color: var(--cur-products-text); 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-products-muted); font-size: 13px; line-height: 1.45; } .cur-product-datasheet-card__body em { color: var(--cur-products-muted); 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: #FFFFF9 !important; border-color: rgba(214, 161, 0, 0.22); box-shadow: 0 8px 22px rgba(146, 64, 14, 0.045); } .cur-product-notice-modern__icon { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; background: #999; color: azure; border-radius: 0; font-size: 20px; } .cur-product-notice-modern .cur-products-section-title { color: #4a3500; } .cur-product-notice__content { color: #999999; 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-products-detail, .cur-product-detail, .cur-product-detail-card, .cur-product-gallery, .cur-product-info { width: 100%; max-width: 100%; box-sizing: border-box; } .cur-products-main { padding-left: 24px; padding-right: 24px; overflow-x: hidden; } .cur-products-card, .cur-products-search, .cur-products-section, .cur-product-detail-card { padding-left: 28px; padding-right: 28px; } .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-gallery img, .cur-product-gallery video, .cur-product-main-image, .cur-product-main-image img, .cur-product-thumbs, .cur-product-thumbs img { max-width: 100%; box-sizing: border-box; } .cur-product-main-image img { width: 100%; height: 100%; display: block; object-fit: cover; } .cur-product-thumbs { display: flex; flex-wrap: wrap; gap: 12px; } .cur-product-thumbs img { width: 96px; height: auto; } } @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: 0; } .cur-products-section-title, .cur-product-detail-modern .cur-products-section-title { font-size: 23px; margin-bottom: 20px; } .cur-product-detail-page { padding: 26px 14px 48px; } .cur-product-hero-card { padding: 22px 18px 24px; border-radius: 0; } .cur-product-main-image { height: 280px; border-radius: 0; } .cur-product-thumb-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); } .cur-product-thumb { height: 68px; border-radius: 0; } .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-main-image { height: 235px; } .cur-product-thumb-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cur-product-detail-modern .cur-product-detail-title { font-size: 30px; } } @media (max-width: 430px) { .cur-product-grid { grid-template-columns: 1fr; } } @media (max-width: 480px) { .cur-products-main { padding-left: 18px; padding-right: 18px; } .cur-products-card, .cur-products-search, .cur-products-section, .cur-product-detail-card { padding-left: 22px; padding-right: 22px; } .cur-products-search { transform: none; } .cur-product-thumbs img { width: 82px; } } /* ===== 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-erro-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: color-mix(in srgb, var(--cur-color-link) 12%, transparent); color: var(--cur-color-link); 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); 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-palnner-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); }