.elementor-34474 .elementor-element.elementor-element-601a96b:not(.elementor-motion-effects-element-type-background), .elementor-34474 .elementor-element.elementor-element-601a96b > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-astglobalcolor5 );}.elementor-34474 .elementor-element.elementor-element-601a96b > .elementor-background-overlay{background-color:var( --e-global-color-3302450 );opacity:0.5;transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-34474 .elementor-element.elementor-element-601a96b > .elementor-container{max-width:1300px;min-height:296px;}.elementor-34474 .elementor-element.elementor-element-601a96b{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;margin-top:0px;margin-bottom:0px;padding:100px 0px 100px 0px;}.elementor-34474 .elementor-element.elementor-element-31d9dc9 > .elementor-element-populated{padding:0% 10% 0% 0%;}.elementor-widget-divider .elementor-divider__text{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-34474 .elementor-element.elementor-element-fd9d2cb{--divider-border-style:solid;--divider-color:var( --e-global-color-primary );--divider-border-width:1px;width:var( --container-widget-width, 50% );max-width:50%;--container-widget-width:50%;--container-widget-flex-grow:0;}.elementor-34474 .elementor-element.elementor-element-fd9d2cb > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-34474 .elementor-element.elementor-element-fd9d2cb .elementor-divider-separator{width:100%;margin:0 auto;margin-left:0;}.elementor-34474 .elementor-element.elementor-element-fd9d2cb .elementor-divider{text-align:left;padding-block-start:24px;padding-block-end:24px;}.elementor-34474 .elementor-element.elementor-element-fd9d2cb .elementor-divider__text{color:var( --e-global-color-primary );text-transform:uppercase;letter-spacing:2px;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;line-height:var( --e-global-typography-primary-line-height );}.elementor-34474 .elementor-element.elementor-element-ceec62a > .elementor-widget-container{padding:0px 0px 0px 0px;}.elementor-34474 .elementor-element.elementor-element-ceec62a{text-align:start;}.elementor-34474 .elementor-element.elementor-element-ceec62a .elementor-heading-title{font-family:"Barlow", Sans-serif;line-height:1.2em;color:var( --e-global-color-primary );}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );line-height:var( --e-global-typography-text-line-height );}.elementor-34474 .elementor-element.elementor-element-90aa28e{width:var( --container-widget-width, 56.152% );max-width:56.152%;--container-widget-width:56.152%;--container-widget-flex-grow:0;}.elementor-34474 .elementor-element.elementor-element-90aa28e > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-34474 .elementor-element.elementor-element-6b8ac0a{width:var( --container-widget-width, 105.983% );max-width:105.983%;--container-widget-width:105.983%;--container-widget-flex-grow:0;align-self:center;}.elementor-34474 .elementor-element.elementor-element-6b8ac0a > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-34474 .elementor-element.elementor-element-ed9bfba:not(.elementor-motion-effects-element-type-background), .elementor-34474 .elementor-element.elementor-element-ed9bfba > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-3302450 );}.elementor-34474 .elementor-element.elementor-element-ed9bfba > .elementor-container{max-width:1600px;}.elementor-34474 .elementor-element.elementor-element-ed9bfba{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;margin-top:80px;margin-bottom:0px;padding:40px 40px 40px 40px;}.elementor-34474 .elementor-element.elementor-element-ed9bfba > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}@media(max-width:1024px) and (min-width:768px){.elementor-34474 .elementor-element.elementor-element-31d9dc9{width:100%;}}@media(max-width:1024px){.elementor-34474 .elementor-element.elementor-element-601a96b{margin-top:0px;margin-bottom:0px;padding:20px 0px 30px 0px;}.elementor-34474 .elementor-element.elementor-element-31d9dc9 > .elementor-element-populated{margin:0px 0px 0px 0px;--e-column-margin-right:0px;--e-column-margin-left:0px;padding:0% 04% 0% 04%;}.elementor-widget-heading .elementor-heading-title{line-height:var( --e-global-typography-primary-line-height );}.elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}}@media(max-width:767px){.elementor-34474 .elementor-element.elementor-element-601a96b{margin-top:0px;margin-bottom:0px;padding:0px 0px 0px 0px;}.elementor-34474 .elementor-element.elementor-element-31d9dc9 > .elementor-element-populated{margin:0% 0% 00% 0%;--e-column-margin-right:0%;--e-column-margin-left:0%;padding:10% 5% 4% 5%;}.elementor-34474 .elementor-element.elementor-element-fd9d2cb .elementor-divider{text-align:left;padding-block-start:0px;padding-block-end:0px;}.elementor-34474 .elementor-element.elementor-element-fd9d2cb .elementor-divider-separator{margin:0 auto;margin-left:0;}.elementor-34474 .elementor-element.elementor-element-fd9d2cb .elementor-divider__text{line-height:1.4em;}.elementor-widget-heading .elementor-heading-title{line-height:var( --e-global-typography-primary-line-height );}.elementor-34474 .elementor-element.elementor-element-ceec62a .elementor-heading-title{font-size:1.9rem;}.elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-34474 .elementor-element.elementor-element-90aa28e > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}}@media(min-width:1920px){.elementor-34474 .elementor-element.elementor-element-601a96b > .elementor-container{max-width:1600px;min-height:550px;}.elementor-widget-heading .elementor-heading-title{line-height:var( --e-global-typography-primary-line-height );}.elementor-34474 .elementor-element.elementor-element-ceec62a .elementor-heading-title{font-size:2.6rem;line-height:1.4em;}.elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-34474 .elementor-element.elementor-element-ed9bfba{margin-top:00px;margin-bottom:0px;padding:040px 0px 0px 0px;}}/* Start custom CSS for html, class: .elementor-element-6b8ac0a *//* ========================================================================== LCN ADVENTSKALENDER – CUSTOM CSS Einfügen in: Elementor > Site Settings > Custom CSS (site-weit) ODER auf der Landingpage selbst: Seite bearbeiten > Erweitert (Advanced) > Custom CSS (nur für diese Seite empfohlen, da nur dort gebraucht) ========================================================================== */ #lcn-advent { /* ---- LCN Farbwelt als CSS-Variablen (an echtes Corporate Design anpassen) ---- */ --lcn-yellow: #f6c500; --lcn-yellow-deep: #d9ab00; --lcn-ink: #15171a; --lcn-ink-soft: #2b2e33; --lcn-paper: #ffffff; --lcn-fog: #f3f4f5; --lcn-line: #e2e4e7; --lcn-muted: #6b7078; --lcn-radius: 14px; --lcn-shadow: 0 10px 30px rgba(21, 23, 26, 0.08); max-width: 1180px; margin: 0 auto; padding: clamp(24px, 4vw, 56px) clamp(16px, 4vw, 32px) 64px; color: var(--lcn-ink); font-family: inherit; /* übernimmt Elementor Body-Font */ } #lcn-advent * { box-sizing: border-box; } /* ------------------------------------------------------------------------- Begrüßungs-Overlay ------------------------------------------------------------------------- */ .lcn-intro { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(15, 16, 18, 0.72); backdrop-filter: blur(6px); animation: lcn-fade-in .35s ease both; } .lcn-intro[hidden] { display: none; } .lcn-intro__card { background: var(--lcn-paper); border-radius: var(--lcn-radius); max-width: 460px; width: 100%; padding: clamp(28px, 5vw, 40px); text-align: center; box-shadow: 0 30px 60px rgba(0,0,0,.35); animation: lcn-pop-in .4s cubic-bezier(.2,.9,.3,1.2) both; } .lcn-intro__eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: .75rem; font-weight: 700; color: var(--lcn-yellow-deep); margin: 0 0 10px; } .lcn-intro__title { font-size: clamp(1.3rem, 3vw, 1.7rem); line-height: 1.25; margin: 0 0 12px; } .lcn-intro__text { color: var(--lcn-muted); line-height: 1.6; margin: 0 0 22px; font-size: .95rem; } /* ------------------------------------------------------------------------- Buttons ------------------------------------------------------------------------- */ .lcn-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: none; border-radius: 999px; padding: 12px 26px; font-weight: 600; font-size: .95rem; cursor: pointer; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; } .lcn-btn--primary { background: var(--lcn-yellow); color: var(--lcn-ink); } .lcn-btn--primary:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(246,197,0,.35); } .lcn-btn--primary:focus-visible { outline: 3px solid var(--lcn-ink); outline-offset: 2px; } /* ------------------------------------------------------------------------- Status-Leiste (Fortschritt + Countdown) ------------------------------------------------------------------------- */ .lcn-status { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; margin-bottom: 28px; background: var(--lcn-fog); border: 1px solid var(--lcn-line); border-radius: var(--lcn-radius); } .lcn-status__progress { display: flex; align-items: center; gap: 12px; flex: 1 1 240px; } .lcn-status__bar { flex: 1; height: 6px; border-radius: 999px; background: var(--lcn-line); overflow: hidden; max-width: 220px; } .lcn-status__fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--lcn-yellow-deep), var(--lcn-yellow)); transition: width .6s ease; } .lcn-status__label { font-size: .85rem; color: var(--lcn-muted); white-space: nowrap; } .lcn-status__countdown { margin: 0; font-size: .9rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--lcn-ink-soft); } /* ------------------------------------------------------------------------- Türen-Grid ------------------------------------------------------------------------- */ .lcn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: clamp(10px, 1.6vw, 18px); perspective: 1200px; /* für die 3D-Türanimation der Kinder */ } .lcn-door { position: relative; aspect-ratio: 3 / 4; border: none; border-radius: 10px; padding: 0; cursor: pointer; background: transparent; transform-style: preserve-3d; -webkit-tap-highlight-color: transparent; } /* Rahmen/Dahinter-Ebene (wird beim Öffnen sichtbar) */ .lcn-door__frame { position: absolute; inset: 0; border-radius: 10px; background: var(--lcn-ink); display: flex; align-items: center; justify-content: center; overflow: hidden; } .lcn-door__glow { position: absolute; inset: -20%; background: radial-gradient(circle, rgba(246,197,0,.55), transparent 65%); opacity: 0; transition: opacity .4s ease; } .lcn-door__day-icon { color: var(--lcn-yellow); font-size: 1.6rem; opacity: 0; transform: scale(.7); transition: opacity .3s ease .15s, transform .3s ease .15s; } /* Türblatt (das eigentlich sichtbare, klickbare Element) */ .lcn-door__leaf { position: absolute; inset: 0; border-radius: 10px; background: linear-gradient(155deg, #1d2024, var(--lcn-ink) 60%); border: 1px solid rgba(255,255,255,.06); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--lcn-paper); transform-origin: left center; transform: rotateY(0deg); box-shadow: var(--lcn-shadow); transition: transform .55s cubic-bezier(.3,.05,.2,1), box-shadow .25s ease; backface-visibility: hidden; } .lcn-door__number { font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 700; font-variant-numeric: tabular-nums; } .lcn-door__type { font-size: .65rem; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.55); } .lcn-door__lock { position: absolute; top: 8px; right: 8px; width: 20px; height: 20px; opacity: .55; } /* Hover-Zustand: dezenter Glow + leichtes Anheben, nur bei "erreichbaren" Türen */ .lcn-door:not(.is-locked):hover .lcn-door__leaf, .lcn-door:not(.is-locked):focus-visible .lcn-door__leaf { transform: translateY(-3px) rotateY(0deg); box-shadow: 0 16px 30px rgba(246,197,0,.28), var(--lcn-shadow); } .lcn-door:not(.is-locked):hover .lcn-door__leaf::after, .lcn-door:not(.is-locked):focus-visible .lcn-door__leaf::after { opacity: 1; } .lcn-door__leaf::after { content: ""; position: absolute; inset: 0; border-radius: 10px; box-shadow: 0 0 0 2px var(--lcn-yellow) inset; opacity: 0; transition: opacity .25s ease; } /* Heute-Zustand: hervorgehoben, dezent pulsierender Ring */ .lcn-door.is-today .lcn-door__leaf { background: linear-gradient(155deg, #262a1a, var(--lcn-ink) 55%); } .lcn-door.is-today .lcn-door__leaf::after { opacity: 1; animation: lcn-pulse-ring 2.2s ease-in-out infinite; } .lcn-door.is-today .lcn-door__badge { position: absolute; top: -9px; left: 50%; translate: -50% 0; background: var(--lcn-yellow); color: var(--lcn-ink); font-size: .6rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; z-index: 2; } /* Gesperrt-Zustand: gedämpft, kein Hover-Effekt, dezentes Schloss-Icon */ .lcn-door.is-locked .lcn-door__leaf { background: linear-gradient(155deg, #24262a, #1a1c1f 60%); opacity: .55; cursor: not-allowed; } .lcn-door.is-locked .lcn-door__number, .lcn-door.is-locked .lcn-door__type { color: rgba(255,255,255,.4); } .lcn-door.is-locked:hover .lcn-door__leaf { transform: none; } /* leichtes "Rütteln", wenn eine gesperrte Tür angeklickt wird */ .lcn-door.lcn-shake .lcn-door__leaf { animation: lcn-shake .4s ease; } /* Bereits geöffnete Türen: Türblatt bleibt sichtbar leicht geöffnet */ .lcn-door.is-open .lcn-door__leaf { transform: rotateY(-18deg); box-shadow: -6px 10px 18px rgba(0,0,0,.25); } .lcn-door.is-open .lcn-door__frame .lcn-door__glow, .lcn-door.is-open .lcn-door__frame .lcn-door__day-icon { opacity: 1; transform: scale(1); } .lcn-door.is-open .lcn-door__leaf::before { content: "✓"; position: absolute; bottom: 8px; right: 8px; width: 18px; height: 18px; border-radius: 50%; background: var(--lcn-yellow); color: var(--lcn-ink); font-size: .65rem; display: flex; align-items: center; justify-content: center; } /* Öffnen-Animation (Klick auf offene/heutige Tür) */ .lcn-door.lcn-opening .lcn-door__leaf { transform: rotateY(-100deg); box-shadow: -10px 14px 24px rgba(0,0,0,.3); } .lcn-door.lcn-opening .lcn-door__frame .lcn-door__glow { opacity: 1; } .lcn-door.lcn-opening .lcn-door__frame .lcn-door__day-icon { opacity: 1; transform: scale(1); } /* Partikel (werden per JS als kleine erzeugt) */ .lcn-particle { position: absolute; top: 50%; left: 50%; width: 5px; height: 5px; border-radius: 50%; background: var(--lcn-yellow); pointer-events: none; animation: lcn-particle-fly .7s ease-out forwards; } /* ------------------------------------------------------------------------- Fußnote ------------------------------------------------------------------------- */ .lcn-footnote { margin-top: 20px; font-size: .8rem; color: var(--lcn-muted); text-align: center; } /* ------------------------------------------------------------------------- Popup-Inhalt (im Elementor-Popup "LCN Adventskalender – Tür-Popup") ------------------------------------------------------------------------- */ .lcn-popup__badge { display: inline-block; background: var(--lcn-fog); color: var(--lcn-ink-soft); font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; padding: 5px 12px; border-radius: 999px; margin-bottom: 14px; } .lcn-popup__image { width: 100%; border-radius: 10px; margin-bottom: 16px; display: block; } .lcn-popup__title { font-size: clamp(1.2rem, 2.6vw, 1.6rem); margin: 0 0 10px; } .lcn-popup__body { color: var(--lcn-muted); line-height: 1.65; margin-bottom: 20px; } .lcn-popup__cta { width: 100%; } /* ------------------------------------------------------------------------- Keyframes ------------------------------------------------------------------------- */ @keyframes lcn-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes lcn-pop-in { from { opacity: 0; transform: scale(.92) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } } @keyframes lcn-pulse-ring { 0%, 100% { box-shadow: 0 0 0 2px var(--lcn-yellow) inset, 0 0 0 0 rgba(246,197,0,.45); } 50% { box-shadow: 0 0 0 2px var(--lcn-yellow) inset, 0 0 0 8px rgba(246,197,0,0); } } @keyframes lcn-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } } @keyframes lcn-particle-fly { to { transform: translate(var(--lcn-px, 40px), var(--lcn-py, -40px)) scale(0); opacity: 0; } } /* ------------------------------------------------------------------------- Bewegungsreduktion respektieren (Barrierefreiheit + Performance) ------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .lcn-door__leaf, .lcn-status__fill, .lcn-btn, .lcn-intro, .lcn-intro__card { transition: none !important; animation: none !important; } .lcn-door.is-open .lcn-door__leaf, .lcn-door.lcn-opening .lcn-door__leaf { transform: none; } .lcn-particle { display: none; } } /* ------------------------------------------------------------------------- Mobile-Anpassungen ------------------------------------------------------------------------- */ @media (max-width: 640px) { .lcn-grid { grid-template-columns: repeat(4, 1fr); gap: 8px; } .lcn-door__number { font-size: 1.15rem; } .lcn-door__type { display: none; } /* Platz sparen auf kleinen Screens */ .lcn-status { flex-direction: column; align-items: stretch; } .lcn-status__countdown { text-align: center; } } @media (max-width: 380px) { .lcn-grid { grid-template-columns: repeat(3, 1fr); } }/* End custom CSS */ /* Start custom CSS *//* ========================================================================== LCN ADVENTSKALENDER – CUSTOM CSS (v2, mobile-first) Einfügen in: Elementor > Website-Einstellungen > Custom CSS ODER Seite > Erweitert > Custom CSS (nur diese Seite, empfohlen) ERSETZT die bisherige CSS-Datei komplett. Design: nur drei flache Türfarben (Schwarz/Weiß/Gelb) im Wechsel, Gelb ausschließlich als Türfarbe (nicht mehr als Glow/Button-Akzent im übrigen UI), keine Farbverläufe als Flächenfüllung, kein grauer Rahmen. Jede Tür hat zwei sichtbare Scharniere links und eine Klinke rechts, ein kleines Weihnachts-Icon unter der Nummer (Tabler Icons, MIT-Lizenz) sowie eine dezente, mehrschichtige Schattentiefe für eine realistischere, physische Wirkung. Gesperrte Türen werden NICHT abgedunkelt — nur ein Schloss-Icon zeigt den Status. Tür 24 erhält einen dezenten goldenen Glanz (via box-shadow/Highlight, keine Verlaufsfläche); Türen 6/20/23 erhalten ein kleines, ruhiges Sondertag-Symbol zusätzlich zu ihrem Motiv-Icon. ========================================================================== */ #lcn-advent { --lcn-paper:#ffffff; --lcn-ink:#111111; --lcn-yellow:#ffd500; --lcn-muted:#5c5a55; --lcn-line:#e7e5e0; --lcn-radius:12px; box-sizing:border-box; /* WICHTIG — warum eine größere max-width allein NICHT gereicht hat: mit width:100% + margin:auto kann diese Box nie breiter werden als ihre Elementor-Spalte/-Section. Wenn diese Spalte selbst schmal ist (z.B. weil die Section "Boxed" mit einer alten/schmalen Inhaltsbreite eingestellt ist, oder die Spalte nicht 100% Breite hat), bleibt der Kalender klein, egal wie hoch max-width ist. Lösung: "Breakout"-Technik — die Box wird bewusst relativ zum kompletten Browserfenster positioniert (nicht zu ihrem Elternelement) und kann sich so unabhängig von der Spaltenbreite bis zu max-width ausdehnen. */ position:relative !important; left:50% !important; transform:translateX(-50%) !important; width:100vw !important; max-width:840px !important; margin:0 !important; padding:clamp(24px, 6vw, 56px) 14px 48px; color:var(--lcn-ink); font-family:inherit; /* übernimmt die auf der Seite eingestellte Elementor-Schrift */ } #lcn-advent *{box-sizing:border-box;} /* Absicherung: falls die Elementor-Spalte/Section selbst overflow:hidden erzwingt, würde die Breakout-Technik oben abgeschnitten. Das kann von hier aus nicht zuverlässig verhindert werden (der überschreibende Container liegt außerhalb von #lcn-advent) — falls der Kalender nach diesem Update seitlich "abgeschnitten" statt zentriert wirkt, bitte Bescheid geben, dann prüfen wir gezielt die Section/Spalten- Einstellungen (Erweitert → Überlauf/Overflow) in Elementor. */ /* ------------------------------------------------------------------------- Begrüßungs-Overlay ------------------------------------------------------------------------- */ .lcn-intro{ position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(17,17,17,.7); } .lcn-intro[hidden]{display:none;} .lcn-intro__card{ background:var(--lcn-paper); border-radius:var(--lcn-radius); max-width:420px; width:100%; padding:28px 24px; text-align:center; box-shadow:0 24px 50px rgba(17,17,17,.3); } .lcn-intro__eyebrow{ text-transform:uppercase; letter-spacing:.1em; font-size:.72rem; font-weight:700; color:var(--lcn-ink); margin:0 0 10px; } .lcn-intro__title{font-size:1.25rem; line-height:1.25; margin:0 0 12px;} .lcn-intro__text{color:var(--lcn-muted); line-height:1.6; margin:0 0 20px; font-size:.92rem;} .lcn-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; border:none; border-radius:999px; padding:11px 24px; font-weight:700; font-size:.92rem; cursor:pointer; text-decoration:none !important; } /* Der CTA-Button im Popup ist ein -Tag. WordPress-Themes definieren Link-Farben oft über "a:link"/"a:visited"/"a:hover" — diese Selektoren sind SPEZIFISCHER als eine einzelne Klasse (.lcn-btn--primary) und gewinnen deshalb ohne !important gegen unsere Farbe. Ergebnis genau wie gemeldet: Text unsichtbar in Ruhe (Theme-Linkfarbe = Button-Hintergrund), erst beim Hover sichtbar (Theme-Hoverfarbe weicht ab). Deshalb hier alle Link-Zustände explizit mit !important abgesichert. */ .lcn-btn--primary, .lcn-btn--primary:link, .lcn-btn--primary:visited, .lcn-btn--primary:hover, .lcn-btn--primary:focus, .lcn-btn--primary:active{ background:var(--lcn-ink) !important; color:var(--lcn-paper) !important; -webkit-text-fill-color:var(--lcn-paper) !important; } .lcn-btn--primary:focus-visible{outline:3px solid var(--lcn-yellow) !important; outline-offset:2px;} /* ------------------------------------------------------------------------- Status-Leiste ------------------------------------------------------------------------- */ .lcn-status{ display:flex; flex-direction:column; gap:10px; padding:14px 16px; margin-bottom:20px; background:#fafaf8; border-radius:var(--lcn-radius); } .lcn-status__progress{display:flex; align-items:center; gap:10px;} .lcn-status__bar{flex:1; height:5px; border-radius:999px; background:var(--lcn-line); overflow:hidden; max-width:200px;} .lcn-status__fill{height:100%; width:0%; background:var(--lcn-ink); transition:width .5s ease;} .lcn-status__label{font-size:.8rem; color:var(--lcn-muted); white-space:nowrap;} .lcn-status__countdown{margin:0; font-size:.82rem; font-weight:600; font-variant-numeric:tabular-nums; color:var(--lcn-ink);} @media (min-width:560px){ .lcn-status{flex-direction:row; align-items:center; justify-content:space-between;} } /* ------------------------------------------------------------------------- Türen-Grid — responsives Layout in drei Stufen. NUR die Anordnung (Spalten/Reihen/Abstände) wurde hier angepasst; Türdesign, Farben, Animationen, Öffnungslogik, Sonderdesigns etc. sind unverändert. Mobile (Basis, < 420px): 3 Spalten (wie bisher) Mobile groß (ab 420px): 4 Spalten (wie bisher) Tablet (ab TABLET-Breakpoint): 4 Spalten x 6 Reihen = 24 Türen exakt Desktop (ab DESKTOP-Breakpoint):6 Spalten x 4 Reihen = 24 Türen exakt Da bei genau 24 Türen 4×6 und 6×4 exakt aufgehen, ergeben sich die Reihen automatisch durch CSS Grid (kein Rest, keine überstehende Tür, keine Überlappung nötig) — es muss nur die Spaltenzahl gesetzt werden. Alle Spalten sind über "1fr" gleich breit, alle Reihen dadurch (wegen aspect-ratio an .lcn-door) automatisch gleich hoch. BREAKPOINTS SPÄTER ÄNDERN: einfach die beiden px-Werte unten anpassen (aktuell: Tablet ab 768px, Desktop ab 1100px). Beide @media-Regeln verwenden bewusst denselben Wert wie hier notiert, damit an einer Stelle im Kommentar sofort ersichtlich ist, was wo greift. ------------------------------------------------------------------------- */ .lcn-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:9px; perspective:1400px; } @media (min-width:420px){ .lcn-grid{ grid-template-columns:repeat(4, 1fr); gap:11px; } } /* TABLET ab 768px — 4 Spalten x 6 Reihen */ @media (min-width:768px){ .lcn-grid{ grid-template-columns:repeat(4, 1fr); gap:20px; } } /* DESKTOP ab 1100px — 6 Spalten x 4 Reihen, Container etwas breiter, damit die Türen bei 6 Spalten genug Platz zum "Atmen" behalten */ @media (min-width:1100px){ #lcn-advent{ max-width:1400px !important; } .lcn-grid{ grid-template-columns:repeat(6, 1fr); gap:32px; } } /* GROSSER DESKTOP/BREITBILDSCHIRM ab 1440px — Kalender nochmal größer, damit er auf sehr breiten Seiten/Monitoren nicht winzig im Verhältnis zum restlichen Seiteninhalt wirkt. Nur max-width/gap/Zahlengröße wachsen mit, das Verhältnis der Tür (aspect-ratio 3/4) bleibt gleich. */ @media (min-width:1440px){ #lcn-advent{ max-width:1600px !important; } .lcn-grid{ gap:36px; } } .lcn-door{position:relative; width:100%; aspect-ratio:3/4; transform-style:preserve-3d;} /* .lcn-door__hit ist ein