/* ========================================================================= Löwe Smartring – main.css Lokale Fonts (@font-face) + Komponenten-Styles. Tokens werden in style.css definiert (:root). ========================================================================= */ /* ---- Lokale Schriftarten (DSGVO: keine Google-Server) ------------------- WOFF2 zuerst (kompakt), TTF als Fallback für ältere Browser. */ @font-face { font-family: "Krona One"; src: url("../fonts/krona-one/KronaOne-Regular.woff2") format("woff2"), url("../fonts/krona-one/KronaOne-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Inter"; src: url("../fonts/inter/Inter-Variable.woff2") format("woff2-variations"), url("../fonts/inter/Inter-Variable.ttf") format("truetype-variations"); font-weight: 100 900; font-style: normal; font-display: swap; } /* ---- Layout-Primitives -------------------------------------------------- */ .lsd-container { width: 100%; max-width: var(--lsd-maxw); margin-inline: auto; padding-inline: var(--lsd-gutter); } .lsd-section { padding-block: clamp(3.5rem, 8vw, 7rem); transition: opacity .7s ease, transform .7s ease; } /* Verborgen nur, wenn JS aktiv ist (Klasse .js am ). Ohne JS – oder falls das Reveal fehlschlägt – bleibt der Inhalt sichtbar. */ .js .lsd-section { opacity: 0; transform: translateY(24px); } .lsd-section.is-visible { opacity: 1; transform: none; } .lsd-skip-link { position: absolute; left: -9999px; } .lsd-skip-link:focus { left: 1rem; top: 1rem; z-index: 1000; background: var(--lsd-ink); color: #fff; padding: .75rem 1rem; border-radius: .5rem; } /* ---- Typo-Rollen -------------------------------------------------------- */ .lsd-eyebrow { font-family: var(--lsd-font-display); font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--lsd-brass); margin: 0 0 1rem; } .lsd-h2 { font-family: var(--lsd-font-display); font-weight: 400; font-size: clamp(1.6rem, 3.6vw, 2.6rem); line-height: 1.18; text-wrap: balance; margin: 0 0 1.25rem; } .lsd-prose { max-width: 65ch; } .lsd-prose p { margin: 0 0 1rem; } /* Inhalts-Links im Markenton (auf dunklem Grund gut lesbar). */ .lsd-prose a { color: var(--lsd-brass); text-decoration: underline; text-underline-offset: 2px; } .lsd-prose a:hover { color: #dbe86a; } /* Rücklink „Zur Startseite" (z. B. Impressum/Datenschutz). */ .lsd-backlink { margin-bottom: 1.5rem; font-size: .85rem; } .lsd-backlink a { font-family: var(--lsd-font-display); letter-spacing: .06em; text-transform: uppercase; font-size: .72rem; color: var(--lsd-brass); text-decoration: none; } .lsd-backlink a:hover { color: #dbe86a; text-decoration: underline; } .lsd-backlink--bottom { margin-top: 2.5rem; margin-bottom: 0; padding-top: 1.5rem; border-top: 1px solid var(--lsd-line); } /* ---- Buttons ------------------------------------------------------------ */ .lsd-btn { display: inline-block; font-family: var(--lsd-font-display); font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; padding: 1rem 1.9rem; border-radius: 2px; transition: transform .2s ease, background .2s ease, color .2s ease; } .lsd-btn--primary { background: var(--lsd-brass); color: var(--lsd-on-accent); } .lsd-btn--primary:hover { transform: translateY(-2px); background: var(--lsd-brass-deep); } /* ---- Header ------------------------------------------------------------- */ .lsd-header { position: fixed; inset: 0 0 auto 0; z-index: 100; transition: background .3s ease, backdrop-filter .3s ease; } .lsd-header.is-scrolled { background: rgba(28, 34, 42, .82); backdrop-filter: blur(8px); } .lsd-header__inner { max-width: var(--lsd-maxw); margin-inline: auto; padding: 1.1rem var(--lsd-gutter); display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; } .lsd-header__cluster { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.25rem); } /* Logo weiß einfärben (Wortmarke ist schwarz auf transparent). */ .lsd-header__logo img { display: block; height: clamp(48px, 6vw, 68px); width: auto; filter: brightness(0) invert(1); } /* Unterseiten ohne Hero: Header sichtbar mit fest dunklem Grund (themenunabhängig, damit weißes Logo/Menü immer lesbar bleibt). */ .lsd-header--solid { position: sticky; background: #161b21; } .lsd-header--solid.is-scrolled { background: #161b21; } .lsd-menu { display: flex; gap: 1.75rem; list-style: none; margin: 0; padding: 0; } .lsd-menu a { color: #fff; text-decoration: none; font-size: .9rem; letter-spacing: .02em; } .lsd-menu a:hover { color: var(--lsd-brass); } .lsd-lang { display: flex; gap: .35rem; align-items: center; } .lsd-lang__item { color: rgba(255,255,255,.6); text-decoration: none; font-size: .8rem; font-weight: 600; letter-spacing: .05em; } .lsd-lang__item.is-active { color: #fff; } /* ---- Hero --------------------------------------------------------------- */ .lsd-hero { position: relative; min-height: 100vh; display: grid; align-items: end; background-image: var(--lsd-hero-image); background-size: cover; background-position: center; opacity: 1; transform: none; /* Hero ist sofort sichtbar */ } .lsd-hero__scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(20,24,29,.82) 0%, rgba(20,24,29,.15) 45%, rgba(20,24,29,.05) 100%); } .lsd-hero__inner { position: relative; max-width: var(--lsd-maxw); margin-inline: auto; width: 100%; padding: 0 var(--lsd-gutter) clamp(4rem, 10vw, 8rem); color: #fff; } .lsd-hero__eyebrow { font-family: var(--lsd-font-display); letter-spacing: .28em; text-transform: uppercase; font-size: .8rem; color: #fff; margin: 0 0 1.25rem; } .lsd-hero__claim { font-family: var(--lsd-font-display); font-weight: 400; font-size: clamp(2rem, 6vw, 4.2rem); line-height: 1.08; max-width: 16ch; text-wrap: balance; margin: 0 0 1.5rem; } .lsd-hero__subclaim { font-size: clamp(1rem, 1.6vw, 1.25rem); max-width: 42ch; color: rgba(255,255,255,.85); margin: 0 0 2.25rem; } /* Mobil: Texte + Button in den oberen Bereich (höher) statt am unteren Rand. */ @media (max-width: 600px) { .lsd-hero { align-items: start; } .lsd-hero__inner { padding-top: 20vh; padding-bottom: 3rem; } } /* ---- Ring-Slider (nativer Coverflow) ------------------------------------ */ .lsd-ring-track { display: flex; gap: 1.25rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-block: 2.5rem; padding-inline: calc(50% - clamp(115px, 14vw, 140px)); scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* alte Edge/IE */ cursor: grab; user-select: none; } .lsd-ring-track::-webkit-scrollbar { display: none; } /* WebKit/Chromium */ .lsd-ring-track.is-dragging { cursor: grabbing; scroll-snap-type: none; } /* Slider-Navigation: Pfeile + Punkte */ .lsd-ring-nav { display: flex; align-items: center; justify-content: center; gap: 1.25rem; margin-top: 1.5rem; } .lsd-ring-prev, .lsd-ring-next { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--lsd-line); background: var(--lsd-raise, #fff); color: var(--lsd-ink); font-size: 1.5rem; line-height: 1; display: grid; place-items: center; cursor: pointer; transition: background .2s ease, border-color .2s ease, opacity .2s ease; } .lsd-ring-prev:hover, .lsd-ring-next:hover { border-color: var(--lsd-brass); } .lsd-ring-prev:disabled, .lsd-ring-next:disabled { opacity: .35; cursor: default; } .lsd-ring-prev:focus-visible, .lsd-ring-next:focus-visible { outline: 2px solid var(--lsd-brass); outline-offset: 2px; } /* Kollektions-Filter über dem Slider */ .lsd-ring-filters { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.5rem; margin-bottom: 2.5rem; } .lsd-ring-filter { font-family: var(--lsd-font-display); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; padding: .6rem 1.1rem; border-radius: 2px; border: 1px solid var(--lsd-line); background: transparent; color: var(--lsd-slate); cursor: pointer; transition: border-color .2s ease, color .2s ease, background .2s ease; } .lsd-ring-filter:hover { border-color: var(--lsd-brass); color: var(--lsd-ink); } .lsd-ring-filter.is-active { background: var(--lsd-brass); color: var(--lsd-on-accent); border-color: var(--lsd-brass); } .lsd-ring-filter:focus-visible { outline: 2px solid var(--lsd-brass); outline-offset: 2px; } .lsd-ring-dots { display: flex; gap: .5rem; align-items: center; } .lsd-ring-dot { width: 9px; height: 9px; padding: 0; border-radius: 50%; border: 0; background: var(--lsd-line); cursor: pointer; transition: transform .2s ease, background .2s ease; } .lsd-ring-dot.is-active { background: var(--lsd-brass); transform: scale(1.3); } .lsd-ring-dot:focus-visible { outline: 2px solid var(--lsd-brass); outline-offset: 2px; } .lsd-ring-card { flex: 0 0 clamp(200px, 24vw, 250px); background: var(--lsd-raise); border: 1px solid var(--lsd-line); border-radius: 8px; padding: 2rem 1.5rem; text-align: center; height: auto; } /* Coverflow-Skalierung nur im Track (nicht im Archiv-Raster). Fallback-Werte = volle Größe, damit ohne JS nichts verkleinert bleibt. */ .lsd-ring-track .lsd-ring-card { scroll-snap-align: center; transform: scale(var(--s, 1)); opacity: var(--o, 1); transform-origin: center bottom; transition: transform .35s cubic-bezier(.22,.61,.36,1), opacity .35s ease, box-shadow .35s ease; } .lsd-ring-track .lsd-ring-card.is-active { box-shadow: 0 22px 50px -24px rgba(28,34,42,.5); z-index: 2; } .lsd-ring-card__visual { display: grid; place-items: center; height: 180px; } .lsd-ring-card__visual img { max-width: 100%; max-height: 180px; width: auto; height: auto; object-fit: contain; } .lsd-ring-glyph { width: 120px; height: 120px; border-radius: 50%; border: 14px solid var(--lsd-slate); background: radial-gradient(circle at 35% 30%, #6b7684, var(--lsd-ink)); box-shadow: inset 0 2px 6px rgba(255,255,255,.25); } .lsd-ring-card__name { font-family: var(--lsd-font-display); font-weight: 400; font-size: 1.15rem; margin: 1rem 0 .35rem; } .lsd-ring-card__attr { font-size: .82rem; letter-spacing: .04em; color: var(--lsd-slate); margin: 0; } /* Klickbare Ring-Karte */ .lsd-ring-card--link { display: block; text-decoration: none; color: inherit; cursor: pointer; } .lsd-ring-card__cue { display: inline-block; margin-top: .75rem; font-family: var(--lsd-font-display); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--lsd-brass); opacity: 0; transform: translateY(4px); transition: opacity .25s ease, transform .25s ease; } .lsd-ring-card--link:hover .lsd-ring-card__cue, .lsd-ring-card--link:focus-visible .lsd-ring-card__cue { opacity: 1; transform: none; } .lsd-ring-card--link:focus-visible { outline: 2px solid var(--lsd-brass); outline-offset: 3px; } /* ---- Basisring (über dem Wechselhüllen-Slider) -------------------------- */ .lsd-basering { display: grid; grid-template-columns: 320px 1fr; gap: clamp(1.5rem, 5vw, 4rem); align-items: center; margin-bottom: clamp(2.5rem, 6vw, 4rem); } .lsd-basering__visual { display: grid; place-items: center; } .lsd-basering__visual img { width: 100%; max-width: 320px; height: auto; border-radius: 8px; } .lsd-ring-glyph--lg { width: 220px; height: 220px; border-width: 26px; } .lsd-basering__name { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: 1rem; } .lsd-basering__text { max-width: 46ch; color: var(--lsd-slate); margin: 0; } .lsd-rings__head { border-top: 1px solid var(--lsd-line); padding-top: clamp(2rem, 5vw, 3rem); } @media (max-width: 760px) { .lsd-basering { grid-template-columns: 1fr; text-align: center; } .lsd-basering__visual { order: -1; } .lsd-basering__text { margin-inline: auto; } } /* ---- Breadcrumb --------------------------------------------------------- */ .lsd-breadcrumb { font-size: .8rem; margin-bottom: 1.5rem; } .lsd-breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0; padding: 0; } .lsd-breadcrumb li { display: flex; align-items: center; gap: .5rem; color: var(--lsd-slate); } .lsd-breadcrumb li:not(:last-child)::after { content: "\203A"; opacity: .5; } .lsd-breadcrumb a { color: var(--lsd-slate); text-decoration: none; } .lsd-breadcrumb a:hover { color: var(--lsd-brass); text-decoration: underline; } .lsd-breadcrumb [aria-current="page"] { color: var(--lsd-ink); } /* ---- Ring-Detailseite ---- */ .lsd-ring-single { padding-block: clamp(5rem, 10vw, 8rem) clamp(3rem, 8vw, 6rem); } .lsd-ring-single__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; } .lsd-ring-single__hero img { width: 100%; height: auto; border-radius: 8px; } .lsd-ring-single__gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; margin-top: .75rem; } .lsd-ring-single__gallery img { width: 100%; height: auto; border-radius: 4px; } .lsd-ring-single__material { font-family: var(--lsd-font-display); color: var(--lsd-slate); font-size: .95rem; margin: 0 0 1.5rem; } .lsd-ring-single__spectitle { font-family: var(--lsd-font-display); font-weight: 400; font-size: 1.1rem; margin: 2rem 0 1rem; } .lsd-specs { width: 100%; border-collapse: collapse; margin-bottom: 2rem; } .lsd-specs th, .lsd-specs td { text-align: left; padding: .7rem 0; border-bottom: 1px solid var(--lsd-line); font-size: .95rem; } .lsd-specs th { font-weight: 600; width: 45%; color: var(--lsd-slate); } .lsd-ring-single__back { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 1.5rem; } .lsd-ring-single__back a { color: var(--lsd-slate); text-decoration: none; } .lsd-ring-single__back a:hover { color: var(--lsd-brass); } @media (max-width: 820px) { .lsd-ring-single__grid { grid-template-columns: 1fr; } } /* ---- Ring-Archiv ---- */ .lsd-ring-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.5rem; margin-top: 2.5rem; } .lsd-ring-grid .lsd-ring-card { transition: transform .25s ease, box-shadow .25s ease; } .lsd-ring-grid .lsd-ring-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px -20px rgba(28,34,42,.45); } .lsd-ring-grid .lsd-ring-card img { width: 100%; height: auto; } /* ---- Zick-Zack Bild/Text ------------------------------------------------ */ .lsd-zigzag__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; } /* Ausrichtung des Elementor-Widgets: DOM ist immer [Bild, Text]. Bei "Text links, Bild rechts" wandert das Bild per order nach rechts. */ .lsd-zigzag--text-image .lsd-zigzag__media { order: 2; } /* Legacy-Klasse der Template-Parts (content-text-image.php). */ .lsd-zigzag__grid--reverse .lsd-zigzag__body { order: 2; } .lsd-zigzag__media img { width: 100%; height: auto; border-radius: 6px; display: block; } @media (max-width: 820px) { .lsd-zigzag__grid { grid-template-columns: 1fr; } /* Mobil einspaltig: Bild wieder zuerst (oben). */ .lsd-zigzag--text-image .lsd-zigzag__media { order: 0; } .lsd-zigzag__grid--reverse .lsd-zigzag__body { order: 0; } } /* ---- Footer (hell, an loewe-smartdevices.com angelehnt) ------------------ */ .lsd-footer { background: var(--lsd-raise); color: var(--lsd-ink); padding-block: 3rem; border-top: 1px solid var(--lsd-line); } .lsd-footer__inner { max-width: var(--lsd-maxw); margin-inline: auto; padding-inline: var(--lsd-gutter); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; } /* Dauerhaft dunkler Modus: Wortmarke weiß einfärben. */ .lsd-footer__logo { height: clamp(44px, 5vw, 56px); width: auto; filter: brightness(0) invert(1); } .lsd-footer__wordmark { font-family: var(--lsd-font-display); color: var(--lsd-ink); font-size: 1.35rem; } .lsd-footer__menu { display: flex; flex-wrap: wrap; gap: 1.25rem; list-style: none; margin: 0; padding: 0; } .lsd-footer__menu a { color: var(--lsd-ink); text-decoration: underline; text-underline-offset: 3px; font-size: .8rem; } .lsd-footer__menu a:hover { color: var(--lsd-slate); } .lsd-footer__copy { width: 100%; font-size: .78rem; color: var(--lsd-slate); margin: 0; } /* ---- USP-Reihe (Elementor-Widget) --------------------------------------- */ .lsd-usp { background: #1b2129; } .lsd-usp__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-top: 2.5rem; } .lsd-usp__num { font-family: var(--lsd-font-display); color: var(--lsd-brass); font-size: .8rem; letter-spacing: .1em; } .lsd-usp__item h3 { font-family: var(--lsd-font-display); font-weight: 400; font-size: 1.05rem; margin: .4rem 0 .5rem; } .lsd-usp__item p { margin: 0; color: var(--lsd-slate); font-size: .95rem; } @media (max-width: 760px) { .lsd-usp__grid { grid-template-columns: 1fr; gap: 1.5rem; } } /* ---- Kontakt-Sektion (Elementor-Widget) --------------------------------- */ /* Fest dunkel in beiden Themes, damit weißer Text/Form lesbar bleibt. */ .lsd-contact { background: #161b21; color: #fff; } .lsd-contact .lsd-h2 { color: #fff; } .lsd-contact .lsd-eyebrow { color: var(--lsd-brass); } .lsd-contact__lead { max-width: 60ch; color: rgba(255,255,255,.7); } .lsd-contact__form { margin-top: 2rem; max-width: 640px; } .lsd-contact__hint { color: rgba(255,255,255,.6); } /* Contact Form 7 / generische Formularfelder in der Kontakt-Sektion */ .lsd-contact__form label { display: block; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.6); margin-bottom: 1rem; } .lsd-contact__form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]), .lsd-contact__form textarea, .lsd-contact__form select { width: 100%; margin-top: .35rem; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.2); border-radius: 3px; padding: .8rem; color: #fff; font-family: inherit; font-size: .95rem; } .lsd-contact__form input::placeholder, .lsd-contact__form textarea::placeholder { color: rgba(255,255,255,.45); } .lsd-contact__form input:focus, .lsd-contact__form textarea:focus, .lsd-contact__form select:focus { outline: 2px solid var(--lsd-brass); outline-offset: 1px; border-color: transparent; } .lsd-contact__form .wpcf7-list-item { margin: .5rem 0 0 0; } .lsd-contact__form .wpcf7-list-item-label { color: rgba(255,255,255,.75); text-transform: none; letter-spacing: 0; } .lsd-contact__form input[type="submit"], .lsd-contact__form .wpcf7-submit { width: auto; margin-top: 1rem; background: var(--lsd-brass); color: var(--lsd-on-accent); border: 0; border-radius: 2px; padding: 1rem 1.9rem; font-family: var(--lsd-font-display); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; transition: background .2s ease, transform .2s ease; } .lsd-contact__form input[type="submit"]:hover, .lsd-contact__form .wpcf7-submit:hover { background: var(--lsd-brass-deep); transform: translateY(-2px); } .lsd-contact__form .wpcf7-not-valid-tip { color: #ffb4a2; font-size: .8rem; } .lsd-contact__form .wpcf7-response-output { border-color: rgba(255,255,255,.3) !important; color: #fff; border-radius: 3px; } /* ---- Elementor: Full-Bleed --------------------------------------------- */ /* Die Löwe-Sektionen sollen die volle Viewport-Breite einnehmen, auch wenn die umgebende Elementor-Section "boxed" ist. Nur im Elementor-Kontext – die native Startseite (index.php) ist bereits voll breit. */ .elementor-widget-loewe_hero .lsd-hero, .elementor-widget-loewe_ring_slider .lsd-rings, .elementor-widget-loewe_usp .lsd-usp, .elementor-widget-loewe_imagetext .lsd-zigzag, .elementor-widget-loewe_contact .lsd-contact { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } /* Elementor umschließt Widgets teils mit eigenem Padding – hier neutralisieren, damit die Sektion wirklich randlos sitzt. */ .elementor-widget-loewe_hero .elementor-widget-container, .elementor-widget-loewe_ring_slider .elementor-widget-container, .elementor-widget-loewe_usp .elementor-widget-container, .elementor-widget-loewe_imagetext .elementor-widget-container, .elementor-widget-loewe_contact .elementor-widget-container { padding: 0 !important; } /* Hinweis: Das Theme läuft dauerhaft im dunklen Modus – die Farbtokens sind in style.css (:root) fest dunkel gesetzt, daher kein prefers-color-scheme-Block. */